@charset "utf-8";
/* CSS Document */

/*---*/
.rec_officetour{
  /*background-image: url(../img/top/bg_officetour3.png);*/
  background-image: url(../img/top/bg_officetour_close.png);
  background-size: 100% auto;
  background-repeat:no-repeat;
  aspect-ratio:1920/440;
  width:76%;
  max-width:1920px;
  margin:0 auto 16px;
  display:flex;
  gap:16px;
  padding:10.75vw 0 0 12vw;
}
.rec_officetour div{
  width:24vw;
}
.rec_officetourbn{
  width:76%;
  max-width: 1920px;
  margin:auto;
}
.rec_officetourbn img{
  width:100%;
}

.rec_officetourbn p{
  color:#194755;
  line-height:1.5;
  text-align:center;
  padding:8px 0;
  font-weight:bold;
}

/*--*/

.rec_body{
  background: url(../img/top/il_bodybg.png) center top repeat-x;
  background-size: 100% auto;
}
.rec_keyvisual{
  display: flex;
  margin-bottom: 100px;
}
.rec_keyvisual>div:first-of-type{
  position: relative;
  width: 50%;
}
.rec_randompic{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.rec_randompic img{
  position: absolute;
  width: 18.75vw;
  transform: scale(0);
  animation-duration: 5s;
  animation-timing-function: linear;
}
/*--画像のpositionやanimation系のcssはtoppictureで指定--*/
.rec_keyvisual .rec_catch{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 3.6vw;
  z-index: 100;
}
.rec_keyvisual .rec_catch p{width: 31.25vw;}
.rec_keyvisual .rec_catch p img{width: 100%;}
.rec_keyvisual>div:last-of-type{width: 50%;}
.rec_keyvisual>div:last-of-type img{object-fit: cover;}

.rec_tour{
  margin-bottom: 72px;
  background: linear-gradient(transparent 0%, transparent 20%, #222A37 20%, #222A37 80%, transparent 80%, transparent 100%);
}
.rec_tour div{
  max-width: 960px;
  margin: auto;
  aspect-ratio: 16/9;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 47px rgba(0, 0, 0, 0.16);
}



.rec_mynavi{
  margin-bottom: 40px;
  padding: 0 16px;
  text-align: center;
}
.rec_mynavi a{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 640px;
  width: 100%;
  height: 130px;
  margin: auto;
  font-weight: bold;
  font-size: 2.125rem;
  letter-spacing: 0.11em;
  color: #000000;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.16);
}

.rec_mynavi a p img{
  display:block;
  width:100%;
  margin:auto;
}

.rec_mynavi a p span{
  display:inline-block;
  padding-top:0.25em;
  font-size:0.875rem;
  font-size:0.75em;
}


.rec_newemployee{
  position: relative;
  padding: 0 16px;
}
.rec_newemployee::before,
.rec_newemployee::after{
  content: "";
  position: absolute;
  display: block;
  width: 73%;
  height: 350px;
}
.rec_newemployee::before{
  left: 0;
  top: 160px;
  background: linear-gradient(to right, #9D9AFF 0%, #5DD9E8 48.12%, rgba(108, 202, 237, 0) 100%);
}
.rec_newemployee::after{
  right: 0;
  top: 360px;
  background: linear-gradient(to left,#9D9AFF 0%, #5DD9E8 48.12%, rgba(108, 202, 237, 0) 100%);
}
.rec_newemployee h2{
  padding-top: 72px;
  text-align: center;
  background: url(../img/top/txt_ttlbg_interview.svg) center top no-repeat;
}
.rec_newemployee h2 span{
  display: block;
  margin-bottom: 16px;
  font-size: 1.625rem;
  font-weight: bold;
  color: #222A37;
}
.rec_newemployee h2 p{
  font-size: 1.75rem;
  font-weight: bold;
  letter-spacing: 0.11em;
  color:#1D235E;
}
.rec_newemployee ul{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1378px;
  margin: -40px auto 0;
  z-index: 5;
}
.rec_newemployee ul li{
  width: 24%;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.2s linear;
}
.rec_newemployee ul li:nth-of-type(2){
  padding-top: 64px;
  transition-delay: 0.15s;
}
.rec_newemployee ul li:nth-of-type(3){
  padding-top: 64px;
  transition-delay: 0.3s;
}
.rec_newemployee ul li:nth-of-type(4){transition-delay: 0.45s;}
.rec_newemployee ul.inView li{
  opacity: 1;
  transform: translateY(0);
}
.rec_newemployee ul li a{display: block;}
.rec_newemployee ul li .rec_photo{
  aspect-ratio: 99/115;
  overflow: hidden;
}
.rec_newemployee ul li .rec_photo img{
  height: 100%;
  object-fit: cover;
  transition: all 0.35s ease-in-out;
}
.rec_newemployee ul li .rec_namebox{
  position: relative;
  margin: -48px 0 auto auto;
  width: 84%;
  padding: 20px;
  background-color: #222A37;
}
.rec_newemployee ul li .rec_namebox h3{
  margin-bottom: 10px;
  font-size: 2.25rem;
  font-weight: bold;
  color: #FFFFFF;
}
.rec_newemployee ul li .rec_namebox p{
  line-height: 1.5;
  font-size: 0.75rem;
  color: #FFFFFF;
}

.rec_mixerbnr{
  width:88%;
  max-width:640px;
  margin:32px auto 32px;
  position: relative;
}

.rec_mixerbnr a{
  display:flex;
  justify-content: center;
  padding:1.25em 1em;
  color:#000;
  font-weight:bold;
  background-color:#FFF;
  box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.16);
  font-size:clamp(0.75rem, 0.473rem + 1.04vw, 1.25rem);
}



.rec_senior{
  position: relative;
  margin-bottom: 80px;
}
.rec_senior::before,
.rec_senior::after{
  content: "";
  position: absolute;
  display: block;
  width: 73%;
  height: 160px;
}
.rec_senior::before{
  left: 0;
  top: 520px;
  background: linear-gradient(to right, #FFD79A 0%, #5DD9E8 48.12%, rgba(108, 202, 237, 0) 100%);
}
.rec_senior::after{
  right: 0;
  top: 560px;
  background: linear-gradient(to left, #FFD79A 0%, #5DD9E8 48.12%, rgba(108, 202, 237, 0) 100%);
}
.rec_senior h2{
  margin-bottom: 32px;
  padding-top: 72px;
  text-align: center;
  background: url(../img/top/txt_ttlbg_interview.svg) center top no-repeat;
}

.rec_senior h2 p{
  font-size: 2.125rem;
  font-weight: bold;
  letter-spacing: 0.11em;
  color:#1D235E;;
}

.rec_message{
  margin-bottom: 176px;
  padding: 0 16px;
}
.rec_message .rec_wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rec_message .rec_wrap div:first-of-type{width: 72%;}
.rec_message h2{
  margin-bottom: 28px;
  font-size: 1.75rem;
  font-weight: bold;
  letter-spacing: 0.11em;
  color: #000000;
}
.rec_message h2 span{
  display: block;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: bold;
  color: #A1A1A1;
}
.rec_message p{
  line-height: 1.625;
  font-size: clamp(0.875rem, 0.696rem + 0.36vw, 1.125rem);/*14-18 800-1920*/
  font-weight: bold;
  color: #000;
}
.rec_message .rec_wrap div:last-of-type{width: 25%;}



.rec_bnrarea{
  margin-bottom: 56px;
  padding: 0 16px;
}
.rec_bnrarea ul{
  display: flex;
  /*justify-content: space-around;*/
  flex-wrap: wrap;
  gap: 24px 0;
  max-width: 1000px;
  margin: 0 auto 24px;
}
.rec_bnrarea ul li{
  width: 33.3%;
  text-align: center;
}
.rec_bnrarea ul li a{
  display: inline-block;
  text-align: center;
  font-size: 0.75rem;
  color: #333333;
}
.rec_bnrarea ul li img{
  height: 60px;
  margin-bottom: 8px;
}
.rec_bnrarea ul li:nth-of-type(2) img,
.rec_bnrarea ul li:nth-of-type(3) img{border: 1px solid #CCCCCC;}
.rec_btminfo{
  margin-bottom: 120px;
  padding: 0 16px;
  font-size: 1.375em;
  color: #333333;
}
.rec_btminfo h3{
  position: relative;
  margin-bottom: 0.875em;
  text-align: center;
  font-weight: bold;
  background-color: #FFFFFF;
}
.rec_btminfo h3::before{
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: linear-gradient(-45deg, transparent, #888888 10%, #888888 90%, transparent);
}
.rec_btminfo h3 span{
  position: relative;
  display: inline-block;
  padding: 0 1em;
  background-color: #FFF;
  z-index: 2;
}
.rec_btminfo ul li{
  margin-bottom: 1.25em;
  font-size: 0.925rem;
}
.rec_btminfo ul li a::before{content:"◆";}
.rec_btminfo ul li a{
  display: block;
  padding: 1em;
  color: #333333;
  border: solid 1px #D0D0D0;
}
.rec_btminfo ul li a span{
  display: inline-block;
  margin-left: 0.5em;
  text-decoration: underline;
}


.slick-dots{
  bottom: -32px;
}

.rec_archive {
  padding: 10px 16px 64px;
  border-top:none;
  background-color:transparent;
}



@media screen and (min-width:801px){
  .rec_mynavi a:hover{opacity: 0.5;}
  .rec_newemployee ul li a:hover img{transform: scale(1.2);}
  .rec_bnrarea ul li a:hover{opacity: 0.5;}
  .rec_btminfo ul li a:hover{background-color: #E2E2E275;}
  .rec_mixerbnr a:hover{opacity: 0.5;}
  .rec_officetour div a img:hover,
  .rec_officetourbn img:hover{opacity: 0.5;}
}

@media screen and (max-width:1430px){/*1378 + padding32px + スクロールバー*/
  .rec_newemployee ul li .rec_namebox{padding: 1.4vw;}
  .rec_newemployee ul li .rec_namebox h3{font-size: 2.25vw;}
  .rec_newemployee::before,
  .rec_newemployee::after{height: 24.5vw;}
  .rec_newemployee::after{top: 25.2vw;}
}

@media screen and (max-width:800px){

  .rec_mynavi a{
    height: max(20vw, 96px);
    font-size: clamp(1.25rem, 0.283rem + 3.68vw, 2.125rem);/*20-34 420-800*/
  }
  .rec_mynavi a img{width: 56%;}
  


  .rec_newemployee h2{
    margin-bottom: 24px;
    padding-top: max(9vw, 40px);
    background-size: 80% auto;
    background-position: center bottom 2vw;
  }
  .rec_newemployee h2 span{font-size: clamp(1.125rem, 0.572rem + 2.11vw, 1.625rem);}/*18-26 420-800*/
  .rec_newemployee h2 p{font-size: clamp(1.25rem, 0.283rem + 3.68vw, 2.125rem);}/*20-34 420-800*/
  .rec_newemployee::before,
  .rec_newemployee::after{height: 120px;}
  .rec_newemployee::before{top: max(21vw, 104px);}
  .rec_newemployee::after{top: max(37vw, 144px);}
  .rec_newemployee ul{margin-top: 0;}
  .rec_newemployee ul li{width: 22%;}
  .rec_newemployee ul li:nth-of-type(2){padding-top: 32px;}
  .rec_newemployee ul li:nth-of-type(3){padding-top: 32px;}
  .rec_newemployee ul li .rec_namebox{width: calc(100% - 12px);}
  .rec_newemployee ul li .rec_namebox h3{font-size: clamp(10px, 2.25vw, 16px);}
  .rec_newemployee ul li .rec_namebox p{font-size: clamp(10px, 0.349rem + 1.05vw, 14px);}/*10-14 420-800*/

  .rec_senior{margin-bottom: 48px;}
  .rec_senior h2{
    padding-top: max(9vw, 40px);
    background-size: 80% auto;
    background-position: center bottom 2vw;
  }
  .rec_senior h2 span{font-size: clamp(1.125rem, 0.572rem + 2.11vw, 1.625rem);}/*18-26 420-800*/
  .rec_senior h2 p{font-size: clamp(1.25rem, 0.283rem + 3.68vw, 2.125rem);}/*20-34 420-800*/
  .rec_senior::before,
  .rec_senior::after{height: 120px;}
  .rec_senior::before{top: 180px;}
  .rec_senior::after{top: 240px;}

  .rec_message{margin-bottom: 80px;}
  .rec_message .rec_wrap{
    flex-wrap: wrap;
    justify-content: center;
  }
  .rec_message .rec_wrap div:first-of-type{display: contents;}
  .rec_message h2{
    width: 100%;
    margin-bottom: 16px;
    text-align: center;
    font-size: 1.5rem;
    order: 1;
  }
  .rec_message h2 span{font-size: 1rem;}
  .rec_message p{
    font-size: 0.875rem;
    order: 3;
    font-weight:normal;
  }
  .rec_message .rec_wrap div:last-of-type{
    min-width: 168px;
    margin-bottom: 16px;
    order: 2;
  }

  .rec_bnrarea ul li img{height: max(7.5vw, 32px);}
  .rec_bncaption{font-size: clamp(0.625rem, 0.211rem + 1.58vw, 1rem);}/*10-16 420-800*/
  .rec_btminfo{margin-bottom: 0;}
  .rec_btminfo ul li a{font-size: clamp(0.75rem, 0.474rem + 1.05vw, 1rem);}/*12-16 420-800*/
  
  .slick-dots{bottom: -48px;}
  .slick-dots li{margin: 0;}
}

@media screen and (max-width:480px){
  .rec_keyvisual{
    display: block;
    position:relative;
    margin-bottom:24px;
  }
  .rec_randompic{
    display:none;
  }
  
  .rec_keyvisual>div:first-of-type{
    width:100%;
    position:static;
  }
  
  .rec_keyvisual .rec_catch{
    width: 100%;
    position: absolute;
    bottom:0;
    height:auto;
  }
  
  .rec_keyvisual>div:last-of-type{
    width:100%;
  }
  .rec_keyvisual .rec_catch p {
    width: 50vw;
  }
  
  .rec_mynavi{
    width:88%;
    margin:0 auto 24px;
  }
  
  .rec_mynavi a{
    height: max(20vw, 72px);
  }
  .rec_mynavi a img{width: 56%;}
  
  /*-- オフィスツアー告知 --*/
  .rec_officetour{
    width:92%;
    padding-top:13vw;
    padding-left:20vw;
  }
  .rec_officetourbn p{
    font-size:0.875em;
  }



  .rec_newemployee ul{
    flex-wrap: wrap;
    gap: 16px 0;
  }
  .rec_newemployee ul li{width: 48%;}
  .rec_newemployee ul li:nth-of-type(2){padding-top: 0;}
  .rec_newemployee ul li:nth-of-type(3){padding-top: 0;}
}