@charset "UTF-8";

html {
  font-size: 10px;
}

html {
  font-size: calc(10 * (100vw / 1200));
}

body {
  overflow-x: clip;
}

.l-container {
  color: #000;
  font-feature-settings: "palt";
  font-style: normal;
  margin: 0 auto 0;
  width: 100%;
}
.l-container a {
  display: block;
  color: #000;
  text-decoration: none;
}
.l-container img{
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.l-container .default-img{
  width: 100%;
  height: auto;
  display: block;
}

.l-container .feature{
  display: flex;
  margin: 0 auto;
  width: 100%;
}

.l-container #sp-only{
  display: none !important;
}

/*******************************
credit
*******************************/

.l-container .creditList .credit{
  display: flex;
  flex-direction: column;
  gap: calc(16 *(100vw / 1400) * 0.64) 0;
}

.l-container .creditList .credit li{
  position: relative;
  width: fit-content;
}

.l-container .creditList .credit li,
.l-container .creditList .credit a{
  color: #000;
  font-family: "acumin-pro", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: calc(20 *(100vw / 1400) * 0.64);
  letter-spacing: 0.05em;
  line-height: 1;
}

.l-container .credit01{
  margin: calc(40 *(100vw / 1400) * 0.64) 0 0 calc(180 *(100vw / 1400) * 0.64);
}

.l-container .credit02,.l-container .credit03,
.l-container .credit05,.l-container .credit06{
  margin: calc(40 *(100vw / 1400) * 0.64) 0 0 calc(40 *(100vw / 1400) * 0.64);
}

.l-container .credit04{
  margin: calc(40 *(100vw / 1400) * 0.64) 0 0 calc(120 *(100vw / 1400) * 0.64);
}

.l-container .credit07{
  margin: calc(40 *(100vw / 1400) * 0.64) 0 0 calc(200 *(100vw / 1400) * 0.64);
}

.l-container .credit08{
  margin: calc(40 *(100vw / 1400) * 0.64) 0 0 calc(75 *(100vw / 1400) * 0.64);
}

/*******************************
hero
*******************************/

.feature .mv{
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  width: calc(700 *(100vw / 1400));
}
.feature .mv__img{
  background: url(../img/mv.jpg) top center / cover no-repeat;
  height: 100%;
  width: 100%;
}

.feature .hero{
  margin: calc(122 *(100vw / 1400) * 0.64) auto 0;
  width: 100%;
}

.feature .hero .hero__slide{
  margin: 0 auto;
  width: 100%;
}
.feature .hero .hero__slide.slide02{
  margin: calc(85 *(100vw / 1400) * 0.64) auto 0;
}
.feature .hero .hero__slide-img{
  margin: 0 calc(7 *(100vw / 1400) * 0.64);
  width: calc(276 *(100vw / 1400) * 0.64);
}

.feature .hero .hero__text{
  font-size: calc(24 *(100vw / 1400) * 0.64);
  letter-spacing: 0.05em;
  line-height: 2;
  margin: calc(73 *(100vw / 1400) * 0.64) auto 0;
  text-align: center;
}

/*******************************
container
*******************************/

.feature .main{
  padding: 0 0 calc(130 *(100vw / 1400));
  width: calc(700 *(100vw / 1400));
}

.feature .sec{
  position: relative;
  margin: auto;
  width: calc(480 *(100vw / 1400));
}

.feature .sec .inner{
  margin: auto;
  position: relative;
  width: 100%;
}

.feature .sec .sec__flex{
  display: flex;
}

.feature .sec .sec__img,
.feature .sec .sec__slide,
.feature .sec .sec__other{
  position: relative;
}

/*******************************
sec01
*******************************/

.feature .sec01{
  margin: calc(226 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec01 .sec__logo{
  margin: 0 auto;
  width: calc(448 *(100vw / 1400));
}

.feature .sec01 .img02{
  margin: calc(92 *(100vw / 1400)) auto 0;
  width: 100%;
  z-index: 1;
}

.feature .sec01 .slide01{
  margin: calc(-60 *(100vw / 1400) * 0.64) calc(30 *(100vw / 1400) * 0.64) 0 auto;
  width: calc(540 *(100vw / 1400) * 0.64);
  z-index: 3;
}

.feature .sec01 .other01{
  margin: calc(-60 *(100vw / 1400) * 0.64) 0 0;
  width: calc(350 *(100vw / 1400) * 0.64);
  z-index: 2;
}

/*******************************
sec02
*******************************/

.feature .sec02{
  margin: calc(202 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec02 .img05{
  margin: 0 auto;
  width: 100%;
}
.feature .sec02 .img06{
  margin: 0 auto;
  width: 100%;
}

/*******************************
sec03
*******************************/

.feature .sec03{
  margin: calc(200 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec03 .img07{
  margin: 0 auto;
  width: 100%;
}
.feature .sec03 .img08{
  margin: calc(80 *(100vw / 1400) * 0.64) 0 0 auto;
  width: calc(510 *(100vw / 1400) * 0.64);
}
.feature .sec03 .img09{
  margin: 0;
  width: calc(570 *(100vw / 1400) * 0.64);
}

/*******************************
sec04
*******************************/

.feature .sec04{
  margin: calc(200 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec04 .img10{
  margin: 0;
  width: calc(700 *(100vw / 1400) * 0.64);
}

.feature .sec04 .slide02{
  margin: calc(80 *(100vw / 1400) * 0.64) 0 0 auto;
  width: calc(630 *(100vw / 1400) * 0.64);
}

/*******************************
sec05
*******************************/

.feature .sec05{
  margin: calc(201 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec05 .sec__item{
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.feature .sec05 .sec__bg{
  position: relative;
  width: 100%;
  z-index: 1;
}

.feature .sec05 .img13{
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(600 *(100vw / 1400) * 0.64);
  width: calc(440 *(100vw / 1400) * 0.64);
  z-index: 2;
}

.feature .sec05 .img14{
  margin: 0 auto;
  width: 100%;
}

/*******************************
sec06
*******************************/

.feature .sec06{
  margin: calc(200 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec06 .slide03{
  margin: 0 auto;
  width: 100%;
}

/*******************************
sec07
*******************************/

.feature .sec07{
  margin: calc(200 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec07 .img17{
  margin: 0;
  width: calc(520 *(100vw / 1400) * 0.64);
  z-index: 1;
}

.feature .sec07 .slide04{
  margin: calc(-60 *(100vw / 1400) * 0.64) 0 0 auto;
  width: calc(550 *(100vw / 1400) * 0.64);
  z-index: 2;
}

/*******************************
sec08
*******************************/

.feature .sec08{
  margin: calc(202 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec08 .sec__item{
  margin: calc(100 *(100vw / 1400) * 0.64) auto 0;
  width: 100%;
}
.feature .sec08 .img22{
  width: 100%;
}
.feature .sec08 .sec__logo{
  margin: auto;
  position: absolute;
  bottom: calc(46 *(100vw / 1400) * 0.64);
  left: 0;
  right: 0;
  width: calc(706 *(100vw / 1400) * 0.64);
  z-index: 2;
}

.feature .sec08 .slide05{
  margin: 0 auto;
  width: calc(600 *(100vw / 1400) * 0.64);
}

/*******************************
sec09
*******************************/

.feature .sec09{
  margin: calc(138 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec09 .sec__btn{
  margin: calc(104 *(100vw / 1400) * 0.64) auto 0;
  width: calc(480 *(100vw / 1400) * 0.64);
}
.feature .sec09 .sec__btn.btn02{
  margin: calc(70 *(100vw / 1400) * 0.64) auto 0;
  width: calc(480 *(100vw / 1400) * 0.64);
}

.feature .sec09 .sec__staff{
  box-sizing: border-box;
  border-top: calc(1 *(100vw / 1400) * 0.64) solid #808080;
  border-bottom: calc(1 *(100vw / 1400) * 0.64) solid #808080;
  font-family: "acumin-pro", sans-serif;
  font-weight: 400;
  font-size: calc(20 *(100vw / 1400) * 0.64);
  letter-spacing: 0.05em;
  line-height: 2;
  margin: calc(120 *(100vw / 1400) * 0.64) auto 0;
  padding: calc(30 *(100vw / 1400) * 0.64) 0 calc(30 *(100vw / 1400) * 0.64) calc(50 *(100vw / 1400) * 0.64);
  width: 100%;
}

.feature .sec09 .img23{
  margin: calc(6 *(100vw / 1400) * 0.64) auto 0;
  width: calc(600 *(100vw / 1400) * 0.64);
}

.feature .sec09 .sec__ttl{
  color: #444552;
  font-family: "acumin-variable",sans-serif;
  font-variation-settings: 'wght' 700, 'wdth' 100, 'slnt' 0;
  font-size: calc(55 *(100vw / 1400) * 0.64);
  text-align: center;
  width: fit-content;
}

.feature .sec09 .sec__text{
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 300;
  font-size: calc(26 *(100vw / 1400) * 0.64);
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
}
.feature .sec09 .sec__text span{
  color: #8f8f97;
}

.feature .sec09 .ttl01{
  margin: 0 auto;
}
.feature .sec09 .ttl02{
  margin: calc(95 *(100vw / 1400) * 0.64) auto 0;
}
.feature .sec09 .ttl03{
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  font-size: calc(42 *(100vw / 1400) * 0.64);
  letter-spacing: 0.03em;
  margin: calc(100 *(100vw / 1400) * 0.64) auto 0;
}

.feature .sec09 .text01{
  margin: calc(19 *(100vw / 1400) * 0.64) auto 0;
}
.feature .sec09 .text02{
  margin: calc(8 *(100vw / 1400) * 0.64) auto 0;
}
.feature .sec09 .text03{
  margin: calc(18 *(100vw / 1400) * 0.64) auto 0;
}
.feature .sec09 .text04{
  margin: calc(18 *(100vw / 1400) * 0.64) auto 0;
}
.feature .sec09 .text05{
  font-size: calc(24 *(100vw / 1400) * 0.64);
  margin: calc(55 *(100vw / 1400) * 0.64) auto 0;
}

/*******************************
fade
*******************************/

.l-container #feature .target[data-fade="top"],
.l-container #feature .target[data-fade="left"],
.l-container #feature .target[data-fade="right"]{
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.l-container #feature .target[data-fade="top"]{
  transform: translateY(100px);
}
.l-container #feature .target[data-fade="left"]{
  transform: translateX(-50px);
}
.l-container #feature .target[data-fade="right"]{
  transform: translateX(50px);
}

.l-container #feature .target[data-fade="top"][data-is-active="true"],
.l-container #feature .target[data-fade="left"][data-is-active="true"],
.l-container #feature .target[data-fade="right"][data-is-active="true"]{
  opacity: 1;
  transform: translateX(0);
}

.l-container #feature .target[data-scale="scale"],
.l-container #feature .target[data-mv="scale"]{
  overflow: hidden;
}
.l-container #feature .target[data-scale="scale"] img,
.l-container #feature .target[data-mv="scale"] > div{
  animation-duration: 2s;
  animation-fill-mode: both;
  transition: transform 1s ease-out, 1s ease-out;
  transform: scale(1.1, 1.1);
}
.l-container #feature .target[data-mv="scale"] > div{
  opacity: 0;
  transform: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.l-container #feature .target[data-scale="scale"][data-is-active="true"] img,
.l-container #feature .target[data-mv="scale"][data-is-active="true"] > div{
  transform: scale(1);
}
.l-container #feature .target[data-mv="scale"][data-is-active="true"] > div{
  opacity: 1;
}

.l-container #feature .target[data-text="text"]{
  position: relative;
}
.l-container #feature .target[data-text="text"] span{
  opacity: 0;
}
.l-container #feature .target[data-text="text"]::before{
  background: #444552;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
}
.l-container #feature .target[data-text="text"][data-is-active="true"]::before{
  animation: band forwards .8s 1 ease .1s normal;
}
.l-container #feature .target[data-text="text"][data-is-active="true"] span{
  animation: text forwards .6s 1 ease .5s normal;
}

@keyframes text{
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes band{
  0% { left: 0; width: 0; }
  50% { left: 0; width: 100%; }
  51% { left: 0;vwidth: 100%; }
  68% { left: 0; width: 100%; }
  100% { left: 100%; width: 0; }
}

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

  /*******************************
  credit
  *******************************/

  .l-container .creditList .credit{
    display: flex;
    flex-direction: column;
    gap: calc(16px * 0.64) 0;
  }

  .l-container .creditList .credit li{
    position: relative;
    width: fit-content;
  }

  .l-container .creditList .credit li,
  .l-container .creditList .credit a{
    color: #000;
    font-family: "acumin-pro", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: calc(20px * 0.64);
    letter-spacing: 0.05em;
    line-height: 1;
  }

  .l-container .credit01{
    margin: calc(40px * 0.64) 0 0 calc(180px * 0.64);
  }

  .l-container .credit02,.l-container .credit03,
  .l-container .credit05,.l-container .credit06{
    margin: calc(40px * 0.64) 0 0 calc(40px * 0.64);
  }

  .l-container .credit04{
    margin: calc(40px * 0.64) 0 0 calc(120px * 0.64);
  }

  .l-container .credit07{
    margin: calc(40px * 0.64) 0 0 calc(200px * 0.64);
  }

  .l-container .credit08{
    margin: calc(40px * 0.64) 0 0 calc(75px * 0.64);
  }

  /*******************************
  hero
  *******************************/

  .feature .mv{
    height: calc(100vh - 80px);
  }
  .feature .mv__img{
    background: url(../img/mv.jpg) top center / cover no-repeat;
    height: 100%;
    width: 100%;
  }

  .feature .hero{
    margin: calc(122px * 0.64) auto 0;
  }

  .feature .hero .hero__slide.slide02{
    margin: calc(85px * 0.64) auto 0;
  }
  .feature .hero .hero__slide-img{
    margin: 0 calc(7px * 0.64);
    width: calc(276px * 0.64);
  }

  .feature .hero .hero__text{
    font-size: calc(24px * 0.64);
    margin: calc(73px * 0.64) auto 0;
  }

  /*******************************
  container
  *******************************/

  .feature .main{
    padding: 0 0 calc(130px);
    width: calc(700 *(100vw / 1400));
  }

  .feature .sec{
    width: calc(480px);
  }

  /*******************************
  sec01
  *******************************/

  .feature .sec01{
    margin: calc(226px * 0.64) auto 0;
  }

  .feature .sec01 .sec__logo{
    margin: 0 auto;
    width: calc(448px);
  }

  .feature .sec01 .img02{
    margin: calc(92px) auto 0;
  }

  .feature .sec01 .slide01{
    margin: calc(-60px * 0.64) calc(30px * 0.64) 0 auto;
    width: calc(540px * 0.64);
  }

  .feature .sec01 .other01{
    margin: calc(-60px * 0.64) 0 0;
    width: calc(350px * 0.64);
  }

  /*******************************
  sec02
  *******************************/

  .feature .sec02{
    margin: calc(202px * 0.64) auto 0;
  }

  /*******************************
  sec03
  *******************************/

  .feature .sec03{
    margin: calc(200px * 0.64) auto 0;
  }

  .feature .sec03 .img08{
    margin: calc(80px * 0.64) 0 0 auto;
    width: calc(510px * 0.64);
  }
  .feature .sec03 .img09{
    width: calc(570px * 0.64);
  }

  /*******************************
  sec04
  *******************************/

  .feature .sec04{
    margin: calc(200px * 0.64) auto 0;
  }

  .feature .sec04 .img10{
    width: calc(700px * 0.64);
  }

  .feature .sec04 .slide02{
    margin: calc(80px * 0.64) 0 0 auto;
    width: calc(630px * 0.64);
  }

  /*******************************
  sec05
  *******************************/

  .feature .sec05{
    margin: calc(201px * 0.64) auto 0;
  }

  .feature .sec05 .img13{
    height: calc(600px * 0.64);
    width: calc(440px * 0.64);
  }

  /*******************************
  sec06
  *******************************/

  .feature .sec06{
    margin: calc(200px * 0.64) auto 0;
  }

  /*******************************
  sec07
  *******************************/

  .feature .sec07{
    margin: calc(200px * 0.64) auto 0;
  }

  .feature .sec07 .img17{
    width: calc(520px * 0.64);
  }

  .feature .sec07 .slide04{
    margin: calc(-60px * 0.64) 0 0 auto;
    width: calc(550px * 0.64);
  }

  /*******************************
  sec08
  *******************************/

  .feature .sec08{
    margin: calc(202px * 0.64) auto 0;
  }

  .feature .sec08 .sec__item{
    margin: calc(100px * 0.64) auto 0;
  }

  .feature .sec08 .sec__logo{
    bottom: calc(46px * 0.64);
    width: calc(706px * 0.64);
  }

  .feature .sec08 .slide05{
    width: calc(600px * 0.64);
  }

  /*******************************
  sec09
  *******************************/

  .feature .sec09{
    margin: calc(138px * 0.64) auto 0;
  }

  .feature .sec09 .sec__btn{
    margin: calc(104px * 0.64) auto 0;
    width: calc(480px * 0.64);
  }
  .feature .sec09 .sec__btn.btn02{
    margin: calc(70px * 0.64) auto 0;
    width: calc(480px * 0.64);
  }

  .feature .sec09 .sec__staff{
    border-top: calc(1px * 0.64) solid #808080;
    border-bottom: calc(1px * 0.64) solid #808080;
    font-size: calc(20px * 0.64);
    margin: calc(120px * 0.64) auto 0;
    padding: calc(30px * 0.64) 0 calc(30px * 0.64) calc(50px * 0.64);
  }

  .feature .sec09 .img23{
    margin: calc(6px * 0.64) auto 0;
    width: calc(600px * 0.64);
  }

  .feature .sec09 .sec__ttl{
    font-size: calc(55px * 0.64);
  }

  .feature .sec09 .sec__text{
    font-size: calc(26px * 0.64);
  }
  .feature .sec09 .sec__text span{
    color: #8f8f97;
  }

  .feature .sec09 .ttl01{
    margin: 0 auto;
  }
  .feature .sec09 .ttl02{
    margin: calc(95px * 0.64) auto 0;
  }
  .feature .sec09 .ttl03{
    font-size: calc(42px * 0.64);
    margin: calc(100px * 0.64) auto 0;
  }

  .feature .sec09 .text01{
    margin: calc(19px * 0.64) auto 0;
  }
  .feature .sec09 .text02{
    margin: calc(8px * 0.64) auto 0;
  }
  .feature .sec09 .text03{
    margin: calc(18px * 0.64) auto 0;
  }
  .feature .sec09 .text04{
    margin: calc(18px * 0.64) auto 0;
  }
  .feature .sec09 .text05{
    font-size: calc(24px * 0.64);
    margin: calc(55px * 0.64) auto 0;
  }
}

.pc-footer{
  margin: 0;
}
.l-footer{
  padding: 0;
}