/*---------コンテンツページごとに変更 sp ---------*/
.foot_contact_wrap{
  padding-top: var(--px90);
}
/*---------業務を知る sp ---------*/
.work{
  padding: var(--px85) 0 var(--px140);
  width: min(90%,1740px);
  margin: 0 auto;
  
  &:first-child{
    padding-bottom: var(--px60);
    border-bottom: 1px solid #fff;
  }
  &:not(:first-child){
    padding: 0 0 var(--px60);
  }
  
  .titles{
    color: #fff;
    
    h3{
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      position: relative;
      padding-bottom: var(--px40);
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 2.1em;
        bottom: 0;
        left: 0;
        border-bottom: solid clamp(1px,0.2vw,2px) #fff;
      }
    }
    h4{
      font-size: var(--font-size24);
      font-weight: var(--Bold);
      padding-top: var(--px40);
      
      span{
        font-size: 120%;
        padding: 0 .1em;
      }
    }
   h5{
      font-size: var(--font-size18);
      font-weight: var(--Bold);
      padding-top: var(--px20);
      
      span{
        font-size: 130%;
        padding: 0 .1em;
      }
    }
    p{
      padding-top: var(--px35);
      font-size: var(--font-size18);
      line-height: 1.7;
    }
  }
  .image{
    padding-top: var(--px30);
    width: min(50%,480px);
  }
}

/*---------社風を知る sp ---------*/
.inner{
  padding: var(--px60) 0;
  width: min(90%,1740px);
  margin: 0 auto;  
  
  .titles{
    color: #fff;
    
    h3{
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      position: relative;
      padding-bottom: var(--px40);
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 2.1em;
        bottom: 0;
        left: 0;
        border-bottom: solid clamp(1px,0.2vw,2px) #fff;
      }
    }
    h4{
      font-size: var(--font-size18);
      font-weight: var(--Bold);
      /*padding-top: var(--px40);*/
      
      span{
        font-size: 130%;
        padding: 0 .1em;
      }
    }
    p{
      padding-top: var(--px35);
      width: min(100%,740px);
      font-size: var(--font-size18);
      line-height: 1.7;
    }
    .titles_img{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(1, auto);
      grid-gap: clamp(15px,2vw,24px);
      padding-top: var(--px40);
    }
  }
  .image{
    padding-top: var(--px30);
    aspect-ratio: 830 / 550;
	  overflow: hidden;
    
    img{
      height: 100%;
      object-fit: cover;
      object-position: 50% 70%;
    }
  }
 
}

/*---------先輩社員の声 sp ---------*/
.voice{
  padding: var(--px85) 0 var(--px140);
  width: min(90%,1740px);
  margin: 0 auto;
  
  .titles{
    color: #fff;
    margin-bottom: var(--px50);
    
    h3{
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      position: relative;
      padding-bottom: var(--px40);
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 2.1em;
        bottom: 0;
        left: 0;
        border-bottom: solid clamp(1px,0.2vw,2px) #fff;
      }
    }
  }
  .voice_inner{
    background-color: #fff;
    padding: var(--px40) clamp(20px,4vw,90px);
    border-radius: var(--px20);
    width: min(100%,1280px);
    margin: 0 auto var(--px40);
    
    .voice_tx{
      h4{
        font-size: var(--font-size32);
        font-weight: var(--Bold);
        border-bottom: 1px solid #707070;
        padding-bottom: 5px;
        
        span{
          font-size: var(--font-size18);
          font-weight: var(--Regular);
          color: var(--main-color);
          padding-left: 10px;
        }
      }
      h5{
        font-size: var(--font-size24);
        font-weight: var(--Bold);
        color: var(--main-color);
        padding-top: var(--px20);
        line-height: 1.4;
      }
      p{
        padding-top: var(--px10);
        line-height: 1.7;
      }
    }
    .voice_img{
      width: min(60%,280px);
      border-radius: var(--px20);
      overflow: hidden;
      aspect-ratio: 320 / 300;
      margin-top: var(--px20);
      background-color: #eee;
      
      img{
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
      }
    }
  }
}

/*---------採用Ｑ＆Ａ sp ---------*/
.qa{
  padding: var(--px85) 0;
  background-color: #fff;
  
    h3{
      font-size: var(--font-size60);
      font-weight: var(--ExtraBold);
      position: relative;
      padding-bottom: var(--px50);
      text-align: center;
      color: var(--main-color);
      line-height:.9;
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 2.1em;
        bottom: 0;
        left: calc((100% - 2.1em) / 2);
        border-bottom: solid clamp(1px,0.2vw,2px) var(--font-color);
      }
      span{
        font-size: var(--font-size18);
        font-weight: var(--Bold);
        color: var(--font-color);
      }
    }
}
.qa_wrap{
  padding-top: var(--px40);
  width: min(90%,1252px);
  margin: 0 auto;
  
  .q_box{
    padding-left: 10px;
    font-size: var(--font-size32);
    font-weight: var(--Bold); 
  }
  .a_box{
    margin-top: var(--px30);
    padding: var(--px30) var(--px50);
    border: 1px solid #707070;;
    border-radius: var(--px20);
    
    h4{
      padding-bottom: var(--px20);
      border-bottom: 1px solid #707070;
      color: var(--main-color);
      font-size: var(--font-size24);
    }
    p{
      padding: var(--px20) var(--px20) var(--px10) clamp(18px,2.2vw,30px);
    }
  }
}  
/*---------マイナビバナー sp ---------*/
.mynavi{
  padding: var(--px60) 0;
  width: min(95%,1740px);
  margin: 0 auto;
  border-bottom: 1px solid #fff;
  
  .recruitment_info{
    margin: 0 auto;
    text-align: center;
    font-size: var(--font-size24);
    font-weight: var(--ExtraBold);
    background-color: #F1914A;
    border-top-right-radius: var(--px20);
    border-bottom-right-radius: var(--px20);
    transition: .3s;
    
    position: fixed;
    left: 0;
    bottom: 25vh;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: .2em;
    
    a{
      color: #fff;
      display: block;
      width: 100%;
      padding: var(--px60) 17px var(--px60) 13px;
      position: relative;
      transition: .3s;
    }
  }
  .recruitment_info_on{
    position: static;
    width: min(90%,640px);
    border-radius: var(--px20);
    writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb; /* IE 対応 */
    text-orientation: mixed;
    
    a{
      padding: var(--px60) var(--px10) var(--px60) 0;
      
      &:after{
        position: absolute;
        content: "";
        right: 35px;
        bottom: calc(50% - 8px);
        /*ボーダー矢印*/
        display: inline-block;
        width: 15px;
        height: 15px;
        border-top: 4px solid #fff;
        border-right: 4px solid #fff;
        transform: rotate(45deg);
      }
    }
    
  }
  
  .mynavi_btn{
    width: 195px;
    margin: var(--px40) auto 0;
    text-align: center;
    
    a{
      display: block;
      width: 100%;
    }
    
  }
}
@media (min-width:768px){
/*---------コンテンツページごとに変更 tab ---------*/
.foot_contact{/*フッタにRECRUITとMAILFORMのどちらか1つの場合*/
  justify-content: center;
}
/*---------業務を知る tab ---------*/
.work{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  
  .titles{
    width: 62%;
  }
  .image{
    padding-top: 0;
    width: min(35%,480px);
    padding-bottom: 24px;
  }
} 
/*---------先輩社員の声 tab ---------*/
.voice{

  .voice_inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  
    .voice_tx{
      width: 67.5%;
    }
    .voice_img{
      width: min(28%,320px);
      margin-top: 0;
    }
  } 
}
  
  
  
}
@media (min-width:1024px){
/*---------業務を知る pc ---------*/
.work{
  align-items: center;

  .image{
    padding: 60px 0 0;
  }
} 
/*---------社風を知る pc ---------*/
.inner{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  
  .titles{
    width: 56%;
    order: 2;
  }
  .image{
    width: 40%;
    padding-top: 0;
    aspect-ratio: auto;
    aspect-ratio: 830 / 800;
    
    img{
      object-position: 30% 50%;
    }
  }
}  
/*---------先輩社員の声 pc ---------*/
.voice{
  .voice_inner{
    .voice_tx{
      width: 67%;
    }
    .voice_img{
      width: min(29%,320px);
    }
  } 
}

@media (min-width:1280px){
/*---------業務を知る 1280 ---------*/
.work{
  
  .titles{
    width: 62%;
  }
  .image{
    width: min(36%,520px);
    padding: 70px 0 0;
  }
} 

  
}

@media (min-width:1480px){  
/*---------社風を知る 1480 ---------*/
.inner{
  
  .titles{
    width: 48%;
  }
  .image{
    width: min(48%,830px);
    
    img{
      object-position: 50% 50%;
    }
  }
}

  
}
  
@media (min-width:1660px){  
/*---------社風を知る 1660 ---------*/
.inner{
  align-items: flex-end;

}

  
}