@charset "UTF-8";
.PE-recruit01{
  background: url(../img/eyecatch/PE-recruit01.png);
}
.PE-recruit02{
  background: url(../img/eyecatch/PE-recruit02.png);
}

.intro-img{
  display: block;
  margin-inline: auto;
  margin-bottom: 2.4rem;
}
.intro{
  margin-bottom: 3.2rem;

  line-height: 1.6;
  text-align: center;
}

main .btnContainer{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;

  width: 100%;
  margin-bottom: 6rem;
}
main .btn{
  position: relative;

  justify-content: center;
  gap: .8rem;

  width: 18rem;
}
main .btnContainer .btn::before{
  content: attr(data-text);
  position: absolute;
  left: 50%;
  bottom: -2.4rem;
  transform: translateX(-50%);

  display: block;

  width: auto;

  font-size: 1.5rem;
  color: #333;
  white-space: nowrap;
}
.list-layout{
  margin-bottom: 2.4rem;
}

#contact-info .btn{
  margin-inline: auto;
  margin-bottom: 2.4rem;
}
#contact-info .text{
  margin-bottom: 2.4rem;
  text-align: center;
}
.text-fax{
  font-weight: 600;
}

/*-----form-----*/
.form-title{
  width: 100%;
  padding-left: 1.6rem;
  padding-bottom: .8rem;
  margin-bottom: 4rem;

  font-size: 1.8rem;
  font-weight: 600;
  text-align: left;

  border-bottom: solid 1px #707070;
}
#status{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;

  margin-bottom: 4rem;
}
#status .cube{
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;

  width: 8rem;
  height: 8rem;

  font-size: 1.8rem;
  color: #fff;
  background: #B5B5B5;
}
#status .cube:not(:last-child)::before,
#status .status-blue:not(:last-child)::after{
  /*status 横線*/
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);

  display: inline-block;
  width: 4rem;
  height: 2px;
}
#status .cube:not(:last-child)::before{
  /*status 横線 灰色*/
  background-color: #B5B5B5;
}
#status .status-blue,
#status .status-blue::after{
  z-index: 3;
  background-color: #2959DD;
}

form{
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
}
.inputContainer{
  display: grid;
  grid-template-columns: 22rem 1fr;
  column-gap: 6rem;

  width: 100%;
  margin-bottom: 2.4rem;
}
.inputContainer .title,
.inputContainer .text,
.inputContainer input,
.inputContainer iext,
.inputContainer select,
.inputContainer textarea{
  font-size: 1.7rem;
  line-height: 1.4;
  padding: .8rem 0;
}
.inputContainer select{
  /*セレクトの高さ調整*/
  padding: 1rem 0;
}
.inputContainer .title{
  position: relative;
  font-weight: 700;
}
.inputContainer .title.required::before{
  content: '必須';
  position: absolute;

  top: 1rem;
  right: 0;

  display: inline-block;
  padding: .2rem .4rem;
  font-size: 1.3rem;
  color: #fff;
  background: #f00;
}
.inputContainer input,
.inputContainer select,
.inputContainer textarea{
  width: 100%;
  padding-left: .8rem;
  padding-right: .8rem;

  border: solid 1px #90cbf9;
  background: #f7f7f7;
  border-radius: 2px;
  outline-color: #2196f3;
}
form input[type="submit"]{
  display: none;
}
form label.submitbtn{
  width: 100%;
  margin-top: 64px;
  padding: 1.2rem 0;
}
form > p{
  width: 100%;
}

form ul{
  width: 100%;
  margin-bottom: 3.2rem;

  border-top: solid 1px #DEDEDE;
}
form ul li{
  display: grid;
  grid-template-columns: 19.6rem 1fr;
  padding: 1.6rem;

  line-height: 1.4;

  border-bottom: solid 1px #DEDEDE;
}
@media (max-width : 1024px){
}
@media (max-width : 599px){
  .inputContainer{
    display: grid;
    grid-template-columns: 1fr;
  }
}