@charset "utf-8";


/*--------------------
   interview index
----------------------*/
#interviewTopTitle{
 background: url("../images/interview_mv.jpg") no-repeat left top/cover;
}
#interviewTopTitle *{
 color: #fff;
}
#interviewTopTitle h1{
 margin-bottom: 25px;
}

.interviewListArea{
 padding: 146px 0 165px;
}
.interviewListArea h2{
 margin-bottom: 30px;
 font-size: 32px;
 color: var(--Dblue);
 text-align: center;
 line-height: 1.875;
}
.interviewListArea h2 + p{
 font-weight: 500;
}
.interviewList{
 max-width: 1189px;
 margin: 90px auto 0;
}
@media screen and (min-width: 769px) {
 .interviewList {
  gap:65px 44px;
  justify-content: flex-start;
 }
 .interviewList li{
  width: calc((100% - 44px*2)/3);
 }
}/*-PC only-*/

.interviewList li{
 background: var(--LLgray);
 padding: 0 32px 33px;
 display: flex;
 flex-direction: column;
}
.interviewList li .btnWrap{
 margin-top: auto;
}
.interviewList li figure{
 margin: 0 -32px 42px;
}
.interviewList li .jobttl{
 display: block;
 margin-bottom: 10px;
 color: #535353;
 font-size: 12px;
 font-weight: 700;
 text-align: left;
}
.interviewList li h3{
 margin-bottom: 25px;
 font-size: 25px;
}
.interviewList li h4{
 margin-bottom: 25px;
 font-size: 20px;
 color: var(--blue);
 line-height: 1.4;
}
.interviewList li p{
 font-size: 12px;
 line-height: 1.9;
}
/* リード文とVIEW MOREボタンの間に最低限の余白を確保（本文が長くても密着しない） */
.interviewList li p:not(.btnWrap){
 margin-bottom: 30px;
}


@media screen and (max-width: 768px) {/* SP interviewTop*/
#interviewTopTitle{
 background: url("../images/interview_mv.jpg") no-repeat left 30% top/cover;
}
#interviewTopTitle p{
 font-size:min(4.4vw, 20px);
}
 
.interviewListArea{
 padding: 80px 0 70px;
}
.interviewListArea h2{
 margin-bottom: 30px;
 font-size: min(6vw,32px);
}
.interviewList{
 margin: 60px auto 0;
}
 
 .interviewList li{
 padding: 0 20px 30px;
  margin-bottom: 30px;
 }
.interviewList li figure{
 margin: 0 -20px 20px;
}
.interviewList li h3{
 margin-bottom: 20px;
}
.interviewList li h4{
 margin-bottom: 20px;
}
}/*-SP only-*/


/*--------------------
   interview detail
----------------------*/
#interviewTitle{
 background: url("../images/interview01_mv.jpg") no-repeat left top/ cover;
 display: flex;
 align-items: flex-end;
 height: 791px;
 padding-bottom:135px;
}
#interview02 #interviewTitle,
.postid-39 #interviewTitle{
 background: url("../images/interview02_mv.jpg") no-repeat left top/ cover;
}
#interview03 #interviewTitle,
.postid-42 #interviewTitle{
 background: url("../images/interview03_mv.jpg") no-repeat left top/ cover;
}
#interview04 #interviewTitle,
.postid-43 #interviewTitle{
 background: url("../images/interview04_mv.jpg") no-repeat left top/ cover;
}
#interview05 #interviewTitle,
.postid-44 #interviewTitle{
 background: url("../images/interview05_mv.jpg") no-repeat left top/ cover;
}
#interview06 #interviewTitle,
.postid-45 #interviewTitle{
 background: url("../images/interview06_mv.jpg") no-repeat left top/ cover;
}
#interview07 #interviewTitle,
.postid-46 #interviewTitle{
 background: url("../images/interview07_mv.jpg") no-repeat left top/ cover;
}
#interviewTitle h1 .en{
 display: block;
 margin-bottom: 10px;
 color: #fff;
 font-weight: 600;
}
#interviewTitle h1 span:not(.en){
 display: inline-block;
 background: var(--blue);
 padding: 0px 5px 0 15px;
 margin-top: 9px;
 color: #fff;
 font-size: 50px;
 line-height: 1.46;
}

@media screen and (max-width: 768px) {/* SP */
#interviewTitle{
 height: 500px;
 padding-bottom:20vw;
}
#interviewTitle h1 span:not(.en){
 margin-top: 8px;
 font-size: min(8vw,50px);
 line-height: 1.46;
}
 /**/ 
#interview01 #interviewTitle,
.postid-31 #interviewTitle{
 background-position:  left 35% top;
}
#interview02 #interviewTitle,
.postid-39 #interviewTitle{
 background-position:  right 20% top;
}
#interview03 #interviewTitle,
.postid-42 #interviewTitle{
 background-position:  right 10% top;
}
	.postid-43 #interviewTitle{
 background-position:  right 40% top;
}
#interview06 #interviewTitle,
.postid-45 #interviewTitle{
 background-position:  left top;
}
#interview07 #interviewTitle,
.postid-46 #interviewTitle{
 background-position:  left top;
}
 
}/*-SP only-*/
@media screen and (orientation:portrait) and (max-width: 768px) {
#interview06 #interviewTitle{
 background-position:  center top;
}
#interview07 #interviewTitle{
 background-position:  left 30% top;
}
}/*SP tate*/


/***/
#interviewLead{
 padding-top: 104px;
 padding-bottom: 110px;
}
#interviewLead *{
 text-align: center;
}
#interviewLead h2{
 margin-bottom: 15px;
 font-size: 40px;
}
#interviewLead .jobtitle{
 margin-bottom: 50px;
 font-weight: 700;
 font-size: 14px;
}
#interviewLead p{
 font-size: 22px;
 font-weight: 500;
 line-height: 2;
 letter-spacing: -0.02em;
}


@media screen and (max-width: 768px) {/* SP */

#interviewLead{
 padding-top: 80px;
 padding-bottom: 80px;
}
#interviewLead h2{
 font-size: min(9vw,40px);
}
#interviewLead p{
 font-size: min(4.4vw,20px);
}
}/*-SP only-*/
/****/

.interviewBox{}
#sec02{
 margin-top: 113px;
}
@media screen and (min-width: 769px) {
 .interviewBox .pcFlex figure{
  width: 56.5%;
  margin-left: -6.5%;
 }
 .interviewBox .pcFlex .txts{
  position: relative;
  width: 43.1%;
  max-width: 534px;
  padding-top: 80px;
  padding-bottom: 90px;
 }
 .interviewBox .pcFlex .txts::before{
  content: "";
  display: block;
  background: var(--LLgray);
  width: 187%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: -62%;
  z-index: -1;
 }
 #sec01 .pcFlex{
  align-items: flex-end;
 }
 #sec01 .pcFlex figure{
  margin-bottom: 90px;
 }
 #sec02 .pcFlex{
  flex-flow: row-reverse;
  align-items: flex-end;
 }
 #sec02 .pcFlex figure{
  margin-left: auto;
  margin-right: -6.5%;
  margin-bottom: 148px;
 }
 #sec03 .pcFlex{
  align-items: center;
 }
 #sec03 .pcFlex .txts{padding: 0;}
 #sec03 .pcFlex .txts::before{
  display: none;
 }
}/*-PC only-*/
.interviewBox h2{
 margin-bottom: 35px;
 color: var(--Dblue);
 font-size: 30px;
 line-height: 1.6;
 letter-spacing: -0.03em;
}
.interviewBox h2 .num{
 display: block;
 margin-bottom: 35px;
 color: var(--blue2);
 font-size: 16px;
 font-weight: 600;
 font-family: "Poppins", sans-serif;
 line-height: 1;
 letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {/* SP */
 .interviewBox .pcFlex figure{
  margin: 0;
 }
 .interviewBox .pcFlex .txts{
  background: var(--LLgray);
  padding: 30px 5% 20px;
 }
.interviewBox h2{
 margin-bottom: 30px;
 font-size: min(6vw,30px);
 line-height: 1.6;
}
.interviewBox h2 .num{
 margin-bottom: 20px;
 font-size: 16px;
}

}/*-SP only-*/
/**/

.wideimg{
 width: 100%;
 height: 387px;
 margin: 107px 0 177px;
}
.wideimg img{
 object-fit: cover;
 width: 100%;
 height: 100%;
}

@media screen and (max-width: 768px) {/* SP */
.wideimg{
 margin: 60px 0 80px;
 height:min(40vw,387px) ;
}

}/*-SP only-*/

/**/
#interviewLinks{
 max-width: 1220px;
 justify-content: space-between;
 margin-top: 255px;
 margin-bottom: 180px;
}
#interviewLinks a{
 display:flex;
 align-items: center;
 gap:0 54px;
}
#interviewLinks a:hover{
 opacity: .7;
}
#interviewLinks .prev{
 flex-flow: row-reverse;
}
#interviewLinks a > p{
 color: var(--blue2);
 font-weight: 600;
}
#interviewLinks a >div{
 max-width: 190px;
}
#interviewLinks a div figure{
 margin: 0 0 20px;
}
#interviewLinks a div figure img{
 object-fit: cover;
 width: 100%;
 height: 100%;
 aspect-ratio:190/141;}
#interviewLinks a .flex{
 align-items: center;
 justify-content: space-between;
}
#interviewLinks a .flex .en{
 padding: 0 0 0 7px;
 color: var(--blue2);
 font-size: 16px;
 font-weight: 600;
}
#interviewLinks a .flex p {
 border-left: 1px var(--blue2) solid;
 padding: 2px 0 4px 20px;
 font-size: 20px;
 font-weight: 700;
 line-height: 1;
}
#interviewLinks a .flex p span{
 display: block;
 margin-bottom: 11px;
 color: #535353;
 font-size: 12px;
}

@media screen and (max-width: 768px) {/* SP */
#interviewLinks{
 margin-top: 150px;
 margin-bottom: 150px;
 align-items: flex-end;
}
#interviewLinks a{
 gap:0 10px;
}
#interviewLinks a > p{
 font-size: 14px;
}
#interviewLinks a >div{
 max-width: 120px;
}
#interviewLinks a div figure{
 margin: 0 0 10px;
}
 #interviewLinks a .flex {
  flex-flow: column;
  align-content: center;
 }
#interviewLinks a .flex .en{
 padding: 0 0 5px;
 font-size: 14px;
}
#interviewLinks a .flex p {
 border-left:none;
 border-top: 1px var(--blue2) solid;
 padding: 10px 0 0px;
 font-size: min(4.5vw,20px);
 font-weight: 700;
 line-height: 1;
}
#interviewLinks a .flex p span{
 margin-bottom: 8px;
 font-size: min(2.4vw,12px);
 min-height: 2em;
}

 #interviewLinks .indexBtn{
  flex:0 0 40px;
  width: 40px;
  margin-bottom: -55px;
 }
}/*-SP only-*/



@media screen and (min-width: 769px) {

}/*-PC only-*/
@media screen and (max-width: 768px) {/* SP */

}/*-SP only-*/