@charset "utf-8";

@media print{
  #loader-bg,#t-mv:before{ display:none; }
}

#rechead,#gentry,.menu-trigger,#nav{ opacity:0; pointer-events:none; }

#wrap{ position:relative; z-index:3; }


#bg1, #bg2, #bg3 {
  opacity:0;
  z-index: 2;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  position: fixed;
  animation: scale-bg2 .3s forwards;
  overflow: hidden;
}
#bg2{ z-index:1; }
#bg3{ z-index:0; }
#bg1 .bg,#bg2 .bg,#bg3 .bg{ background:url(../img/top/bg1.webp) repeat-y center -70%; background-size: 100% auto; width: 80%; margin: 0 auto; height: 1200%; }
#bg2 .bg{ background-image:url(../img/top/bg2.webp); background-position: center -40%;  width: 90%; height: 1000%; }
#bg3 .bg{ background-image:url(../img/top/bg3.webp); background-position: center -20%;  width: 100%; height: 700%; }
#bg1.on, #bg2.on, #bg3.on { animation: scale-bg1 .5s forwards var(--tra-ani); }


#top-mv {  position: relative; z-index:1; max-width:1920px; padding-bottom:4rem; margin-bottom:6rem; }
#top-mv-ph{ z-index:1; opacity:0; }
.slick-list {  }
.slider .slick-slide{ margin: 0 10px; overflow: hidden; border-radius: 2rem;}
.slider .slick-slide { position:relative; }
.slider .slick-slide:before{ content:""; width:100%; height:100%; background:#C5DDF2; position:absolute; right: 0; top:0; z-index:1; } 
.slider .slick-slide img{ transition:var(--tra2); transform:scale(1.3);  }
.slider .slick-slide img.sp{ display:none; }
.slider .slick-slide:hover img{ transform:scale(1.1); }
.top-copy{ position:absolute; left:8%; bottom: 0; transform:rotate(-4deg); z-index:5; mix-blend-mode: screen; display:flex; align-items:flex-end; pointer-events:none; opacity:0; }
.top-copy img{  }

body.start #top-mv-ph{ animation: fade .5s .5s forwards; }
body.start .slider .slick-slide:before { animation: wid2 .6s 1s forwards; pointer-events:none; }
body.start .slider .slick-slide img{ transform:scale(1); }
body.start .top-copy { animation: scale3 .6s 1.5s forwards var(--tra-ani); }
body.start #rechead,body.start #gentry,body.start .menu-trigger{ animation: DownAnime .5s 2s forwards; }
body.start #nav{ animation: leftAnime .5s 2s forwards; }


#top-msg{ text-align:center; padding:0; height:250lvh; position:relative; }
#top-msg-in{ height:100lvh; display:flex; justify-content:center; align-items:center; position:absolute; top:0; width:100%; }
#top-msg h3{ font-size:300%; margin-bottom:1rem; }
#top-msg p{ font-size:110%; line-height:2.5; font-weight:500; }
#top-msg-in.fixed{ position:fixed; }
#top-msg-in.end{ top:150lvh; opacity:1; }
#top-msg-in > div{ opacity:0; animation: scale-back .5s forwards; }
#top-msg-in.on > div{ animation: scale .5s .5s forwards; }

#top-msg h3,#top-msg p{ text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF; }

#top-interview{ position:relative; padding:8% 5%; }
#top-interview:before{ content: ""; background-color: rgba(255, 255, 255, .9); width:0; height:100%; position:absolute; left:50%; top:0; transition:var(--tra1); }
#top-interview.play:before{ left:0; width:100%; }
#top-interview-in{ position:relative; display:flex; justify-content:space-between; }
.inter-left{ width:56%; }
.inter-right{ width:40%; }

.top-tit{ display:flex; justify-content:space-between; gap:5rem; align-items:flex-start; }
.top-tit p{ flex:1; font-size:90%; color:#555; }

h2.t-tit{ line-height:1.5; letter-spacing:0.1em; margin-bottom:1rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; flex:0; align-items:center; }
h2.t-tit b{ display:flex; font-size:350%; font-weight:600; line-height:1; color:#000; width:100%; }
h2.t-tit b span{ opacity:0; position:relative; }
h2.t-tit > span{ opacity:0; }
h2.t-tit:after{ content:""; flex:1; background:#000; height:1px; opacity:0; }
h2.t-tit.wh b{ color:#fff;}
h2.t-tit.wh:after{ background:#fff; }
.masktxt{ overflow:hidden; opacity: 0; }
.masktxt p,.masktxt h3{ opacity: 0; transform: matrix(1, 0, 0, 1, 0, 100); transition: 1s .5s cubic-bezier(0.22, 1, 0.36, 1); }
.masktxt + .masktxt p,.masktxt + .masktxt h3{ transition-delay:.7s; }

.play h2.t-tit b span{ animation: tit .5s forwards; }
.play h2.t-tit b span:nth-child(2){animation-delay:.05s; }
.play h2.t-tit b span:nth-child(3){animation-delay:.0s; }
.play h2.t-tit b span:nth-child(4){animation-delay:.15s; }
.play h2.t-tit b span:nth-child(5){animation-delay:.2s; }
.play h2.t-tit b span:nth-child(6){animation-delay:.25s; }
.play h2.t-tit b span:nth-child(7){animation-delay:.3s; }
.play h2.t-tit b span:nth-child(8){animation-delay:.35s; }
.play h2.t-tit b span:nth-child(9){animation-delay:.4s; }
.play h2.t-tit > span,.play h2.t-tit:after{ animation: fade 1s forwards; }
.play .masktxt{ opacity:1; }
.play .masktxt p,.play .masktxt h3{ transform: matrix(1, 0, 0, 1, 0, 0); opacity:1; }

.employee{ display:flex; gap:4%; flex-wrap:wrap; }
.employee li{ width:48%; margin-top:6%; opacity:0; }
.employee a{ color:#000; display:block; transition:.3s; }
.employee a:hover{ text-decoration:none; color:var(--color-base); }
.employee .ph{ overflow:hidden; border-radius:1rem; margin-bottom:1rem; position:relative; }
.employee .ph::before,.interview .ph::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
  z-index: 2;
}
.employee a:hover .ph::before,.interview a:hover .ph::before {
  animation: kiran 0.5s linear;
}
.employee a .ph img,.interview a .ph img{ transition:var(--tra1); }
.employee h3{ font-size:130%; padding-right:3rem; position:relative; }
.employee a h3:after{ content:""; position:absolute; right:0; top:.5rem; width:2.5rem; height:2.5rem; background:url(../img/arr.svg) no-repeat center center; background-size:contain; transition:var(--tra1); }
.employee p{ font-size:90%; padding-right:3rem; }
.employee a:hover .ph img,.interview a:hover .ph img{ transform:scale(1.12);  }
.employee a:hover h3:after{ transform:scale(1.3); }

.interview{ display:flex; gap:1rem; flex-wrap:wrap; }
.interview li{ width:100%; opacity:0; }
.interview a{ display:block; position:relative; color:#fff; }
.interview a:hover{ text-decoration:none; }
.interview .ph{ overflow:hidden; border-radius:1rem; margin-bottom:1rem; position:relative; }
.interview .tit{ position:absolute; left:0; bottom:1rem; }
.interview .tit .tag{ background:#04CDFC; color:#fff; border-radius:0 100px 100px 0; font-weight:600; display:inline-block; width:12em; padding:.5rem 1.5rem; text-align:center; }
.interview .tit .tag.col1{ background:#2DD08F; }
.interview .tit h3{ font-size:140%; padding:1rem 1.5rem; text-shadow: 0 0 10px #000;}


.play .employee li,.play .interview li{ animation: scale1 .8s 1s forwards var(--tra-ani); }
.play .employee li:nth-child(2){animation-delay:1.1s; }
.play .employee li:nth-child(3){animation-delay:1.3s; }
.play .employee li:nth-child(4){animation-delay:1.4s; }
.play .employee li:nth-child(5){animation-delay:1.6s; }
.play .employee li:nth-child(6){animation-delay:1.7s; }
.play .interview li:nth-child(1){ animation-delay:1.2s; }
.play .interview li:nth-child(2){ animation-delay:1.5s; }

#top-benefit{ position:relative; padding:5% 5% 0; }
#top-benefit-in{ max-width:1600px; margin:0 auto; background: #043CA3; background-image: linear-gradient(180deg, #043CA3, var(--color-base)); color:#fff; border-radius:3rem; box-shadow:0 0 4rem rgba(0, 0, 0, .3); padding:5%; display:flex; justify-content:space-between; flex-wrap:wrap; }
#benefit-tit{ width:6rem; }
#benefit-tit h2.t-tit{  flex-direction:row-reverse; align-items:flex-start; position:relative; margin-bottom:.5rem; }
#benefit-tit h2.t-tit b { writing-mode: vertical-rl; width:auto; }
#benefit-tit h2.t-tit > span{ writing-mode: vertical-rl; letter-spacing:0.3em; }
#benefit-tit h2.t-tit::after { height:calc(100% - 8.5em); width:1px; position:absolute; left:.7em; top:8.2em; }
#benefit-tit p{ text-align:center; font-size:90%; opacity:.7; }
#benefit-fig{ width:calc(100% - 10rem); }
#benefit-fig h3{ font-size:200%; margin-top:1em; }
#benefit-fig > ul{ display:flex; justify-content:space-between; align-items:center; gap:5rem; margin:2rem 0; opacity:0; }
.play #benefit-fig > ul{ animation: scale1 .8s 1s forwards var(--tra-ani); }
.play #benefit-fig > ul:nth-child(2){ animation-delay:1s; }
.play #benefit-fig > ul:nth-child(3){ animation-delay:1.2s; }
.play #benefit-fig > ul:nth-child(4){ animation-delay:1.4s; }
.benefit-fig1 li{ width:30%; }
.benefit-fig1 li:first-child{ width:36%; }
.benefit-fig2 li{ width:40%; }
.benefit-fig2 li:first-child{ width:52%; }
.benefit-fig3 li{ width:50%; }
.link-a{ width:100%; }
#top-benefit-in .view{ opacity:0; }
#top-benefit-in.play .view{ animation: fade .5s 1.8s forwards; }

#top-workplace{ position:relative; padding:0 0 0; margin:5% 0 0; }
#top-workplace-in{ padding:8% 0 12%; }
#top-workplace-in .txt{ max-width:600px; width: 35%; margin:0 auto; transform:translateX(20%); }
#workplace-tit{ display:inline-block; position:relative; z-index:2; }
#workplace-tit h2.t-tit { width:23rem; margin-bottom:2rem; }
#top-workplace-in .txt p{ margin-bottom:1rem; }
#top-workplace-in .txt .view{ margin-left:0; margin-top:2rem; opacity:0; }
#top-workplace-in.play .view{ animation: fade .5s 1s forwards; }
#top-workplace ul.ph{ position:absolute; left:5%; width:95%; height:90%; }
#top-workplace ul.ph li{ position:absolute; overflow:hidden; border-radius:2rem; }
#top-workplace ul.ph .p1{ width:30%; top:0%; left:0; }
#top-workplace ul.ph .p2{ width:15%; bottom:-10%; left:20%; }
#top-workplace ul.ph .p3{ width:17%; top:-10%; right:10%; }
#top-workplace ul.ph .p4{ width:22%; bottom:-20%; right:2%; }
#workplace-tit h2.t-tit ,#top-workplace-in .txt p{ text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF; }

#top-ourwork{ height:150lvh; width:100%; margin:10% 0; position:relative; }
#top-ourwork-in{ height:0; opacity: 0; width: 100%; position:absolute; overflow:hidden; top:0;  }
#top-ourwork-in.on{ animation: height .8s forwards; }
#top-ourwork-in.fixed{ position:fixed; }
#top-ourwork-in.end{ top:50lvh; }
#top-ourwork-in:before{ content:""; width:100%; height:100%; position:absolute; top:0; background:rgba(6, 39, 77, .5); z-index:1; }
#top-ourwork .txt{ position:absolute; transform:translate(-50%,-50%); top:50%; left:50%; z-index:3; color:#fff; max-width:33rem; background:rgba(5, 63, 146, .5); border-radius:1rem; padding:3rem 5rem; opacity:0; }
#top-ourwork .play .txt{ animation: fade .5s forwards; }
#top-ourwork .txt p{ font-size:95%; line-height:2em; margin:2rem 0; }
#top-ourwork .txt .view{ opacity:0; }
#top-ourwork .play .txt .view{ animation: fade .5s 1s forwards; }
#top-ourwork video{ position:absolute; transform:translate(-50%,-50%); top:50%; left:50%; object-fit:cover; width:100%; height:100%; }

#top-message{  padding:8% 5% 6%; }
#top-message-in{ max-width:1480px; margin:0 auto; position:relative; }
#top-message-in .ph{ margin-left:28%; border-radius:3rem; overflow:hidden; position:relative; }
#top-message-in .ph:before{ content:""; width:100%; height:100%; background:#C5DDF2; position:absolute; right: 0; top:0; z-index:1; }
#top-message-in.play .ph:before{ animation: wid2 .8s .3s forwards; }
#top-message-in.play .ph img{ animation: scale4 .8s .3s forwards;}
#top-message-in .txt{ position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:2; }
#top-message-in  h2.t-tit{ position:relative; padding-bottom:1.5rem; margin-bottom:1.5rem; text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF; }
#top-message-in  h2.t-tit::after{ position:absolute; width:8rem; bottom:0; }
#top-message-in .txt h3,#top-message-in .txt p{ font-size:450%; text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF; -webkit-text-stroke: 1px #fff; font-weight:800; line-height:1.2; }
#top-message-in .txt p{ -webkit-text-stroke: 0px #fff; font-size:160%; font-weight:600; margin-top:1rem; }
#top-message-in .txt .view{ margin:2rem 0 0 0; opacity:0; }
#top-message-in.play .txt .view{ animation: fade .5s 1.4s forwards; }

#faq{ padding:8% 5%; }
#top-faq-in{ max-width:1500px; margin:0 auto; background:rgba(235, 245, 252, .9); box-shadow:0 0 3rem rgba(0, 0, 0, .2); border-radius:3rem; padding:5%; }
#top-faq-in .txt{ display:flex; align-items:center; justify-content: flex-start; gap:4rem; margin-bottom:2rem; }
#top-faq-in .txt .masktxt{  width:auto; }
#top-faq-in .txt p{ color:#333; font-size:95%; }
#top-faq-in h2.t-tit{ position:relative; padding-right:4rem; margin-bottom:0;   }
#top-faq-in h2.t-tit b,#top-faq-in h2.t-tit > span{ display:block; }
#top-faq-in h2.t-tit > span{ letter-spacing:0; }
#top-faq-in h2.t-tit::after{ position:absolute; width:1px; top:0; height:100%; right:0; }
dl.faq{ border:1px solid #D7E1EB; border-radius:1rem; background:#fff; margin:1.5rem 0; opacity:0; }
dl.faq dt,dl.faq dd{padding:1.5rem 2rem 1.5rem 6rem; position: relative;}
dl.faq dt{ font-size:130%; font-weight:600; padding-right:4rem; cursor:pointer; transition:.5s; }
dl.faq dt:hover{ color:var(--color-base); }
dl.faq dd{ border-top:1px solid #D7E1EB; display:none; }
dl.faq dt:after{content: "＋"; position: absolute; top: 50%; right: 2rem; font-weight: 400; transform:translateY(-50%); }
dl.faq dt.open:after{ content: "ー"; }
dl.faq dt:before,dl.faq dd:before{ width:2.5rem; border-radius:50px; border:1px solid #ccc; text-align:center; font-size:1.1rem; font-weight:600; display:block; position:absolute; left:2rem; top:50%; line-height:1.4; transform:translateY(-50%); }
dl.faq dt:before{ content:"Q"; color:var(--color-base); }
dl.faq dd:before{ content:"A"; color:#185AA5; }

.play dl.faq{ animation: scale1 .8s 1s forwards var(--tra-ani); }
.play dl.faq:nth-child(2){ animation-delay:1s; }
.play dl.faq:nth-child(3){ animation-delay:1.1s; }
.play dl.faq:nth-child(4){ animation-delay:1.2s; }
.play dl.faq:nth-child(5){ animation-delay:1.3s; }
.play dl.faq:nth-child(6){ animation-delay:1.4s; }
.play dl.faq:nth-child(7){ animation-delay:1.5s; }
.play dl.faq:nth-child(8){ animation-delay:1.6s; }
.play dl.faq:nth-child(9){ animation-delay:1.7s; }
.play dl.faq:nth-child(10){ animation-delay:1.8s; }

.foot-slider{ padding-bottom:8%; }
.foot-slider .slick-track{ display:flex; align-items:center; gap:2rem; }
.foot-slider .s1 { width:24vw; }
.foot-slider .s2 { width:20vw; }
.foot-slider .s3 { width:17vw; margin-top:7rem; }
.foot-slider .s4 { width:12vw; }





@media screen and (max-width: 1650px) {
  
}
@media screen and (max-width: 1440px) {
 #bg1 .bg{ width: 100%; }
 #bg2 .bg{ width: 100%; }
 .top-copy{ width:70%; }
}
@media screen and (max-width: 1250px) {
  #benefit-fig h3 { font-size:180%; }
  #top-message-in .txt h3{ font-size:400%; }
  
  
}
@media screen and (max-width: 810px) {
  body.start #nav { display:none; }
  .slider .slick-slide img.sp{ display:block; }
  #bg1 .bg{ background-image:url(../img/top/bg1_sp.webp); width: 120%; margin-left: -10%; height: 1500lvh; }
  #bg2 .bg{ background-image:url(../img/top/bg2_sp.webp); width: 110%; margin-left: -5%; height: 1300lvh; }
  #bg3 .bg{ background-image:url(../img/top/bg3_sp.webp); width: 110%; margin-left: -5%; height: 1000lvh; }
  .top-copy { bottom:1rem; width:84%; }
  #top-msg { height: 200lvh; }
  #top-msg-in.end { top: 100lvh;}
  #top-msg h3 { font-size:250%; }
  #top-interview { padding:15% 6%; }
  #top-interview-in { display:block; }
  .inter-left { width: 100%; margin-bottom: 3rem;}
  .inter-right { width: 100%;}
  #top-benefit { padding:10% 3% 0; }
  #top-benefit-in{ display:block; padding: 10% 8%; }
  #benefit-tit{ width:16rem; }
  #benefit-tit h2.t-tit{  flex-direction:row; align-items:center; }
  #benefit-tit h2.t-tit b { writing-mode: horizontal-tb; width:auto; }
  #benefit-tit h2.t-tit > span{ writing-mode: horizontal-tb; letter-spacing:0.3em; }
  #benefit-tit h2.t-tit::after { height:1px; width:auto; position: static; flex: 1; }
  #benefit-tit p{ text-align:left; }
  #benefit-fig{ width:100%; }
  #benefit-fig > ul { gap:2rem; flex-wrap:wrap; justify-content:space-around; }
  .benefit-fig1 li { width:45%; }
  .benefit-fig1 li:first-child { width:60%; }
  .benefit-fig2 li:first-child {width: 85%;}
  .benefit-fig2 li { width:70%; }
  .benefit-fig3 li { width:80%; }
  #top-workplace{ margin:0 0 0; }
  #top-workplace-in{ padding:60% 0 30%; }
  #top-workplace-in .txt{ width: 75%; margin:0 auto; transform:translateX(0); }
  #top-workplace-in .txt p{ font-weight: 500; }
  #top-workplace ul.ph{ position:absolute; left:0; width:100%; height:90%; }
  #top-workplace ul.ph li{ border-radius:1rem; }
  #top-workplace ul.ph .p1{ width:40%; top:0%; left:-10%; }
  #top-workplace ul.ph .p2{ width:30%; bottom:-15%; left:5%; }
  #top-workplace ul.ph .p3{ width:30%; top:5%; right:10%; }
  #top-workplace ul.ph .p4{ width:40%; bottom:-15%; right:-5%; }
  #top-ourwork{ height:100lvh;}
  #top-ourwork-in.end{ top:0; }
  #top-ourwork .txt { width: 80%;  }
  #top-ourwork video{  }
  #top-message-in .txt { position:relative; top: 0; left: 0; transform: translateY(-2rem); width:80%; margin:0 auto; }
  #top-message-in .ph { margin:0; border-radius:2rem; }
  #top-message-in .txt h3 { font-size: 380%;}
  #faq { padding: 20% 0; }
  #top-faq-in { padding:10% 6%; border-radius: 0; }
  #top-faq-in h2.t-tit { padding-right:1.5rem; }
  #top-faq-in .txt { gap:1.5rem; }
  dl.faq dt, dl.faq dd { padding: 1.5rem 1.5rem 1.5rem 4rem; }
  dl.faq dt { font-size:110%; padding-right:3rem; }
  dl.faq dt::before, dl.faq dd::before { left:1rem; }
  dl.faq dt::after { right:1.5rem; }
  .foot-slider{ padding-bottom:15%; }
  .foot-slider .s1 { width:45vw; }
  .foot-slider .s2 { width:40vw; }
  .foot-slider .s3 { width:35vw; margin-top:7rem; }
  .foot-slider .s4 { width:28vw; }
 


}

@media screen and (max-width: 600px) {
  .top-copy { flex-wrap:wrap; gap:1rem; bottom:-2rem; }
  .top-copy span{ width:90%; }
  .top-copy span:first-child{ width:80%; }
  #top-msg h3 { font-size:200%; }
  #top-msg p { font-size: 100%; }
  .top-tit { display:block; }
  .top-tit h2.t-tit { width:20rem; }
  .employee { display:block; }
  .employee li { width: 100%; }
  #benefit-fig h3 { font-size:160%; }
  #top-ourwork .txt { padding: 3rem 3rem; }
  #top-ourwork h2.t-tit{ margin-bottom:0; }
  #top-ourwork h2.t-tit b { font-size:350%; }
  #top-message-in .txt { width:90%; }
  #top-message-in .txt h3 { font-size: 280%;}
  #top-message-in .txt p { font-size:120%; }

}




rem;