@charset "UTF-8";

html{
  font-size: 10px;
}

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

body{
  overflow-x: clip;
}

.l-container{
  color: #000;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 300;
  margin: 0 auto calc(120 *(100vw / 1400));
  overflow: clip;
  width: 100%;
}
.l-container a{
  display: block;
  color: #fff;
  text-decoration: none;
  transition: opacity 1s;
}

.l-container a:hover{
  cursor: pointer;
  opacity: .6;
}

.l-container img{
  width: 100%;
  height: 100%;
  vertical-align: top;
}

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

.l-container .video__body{
  height: 100%;
  width: 100%;
}

.l-container .video__body--content{
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

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

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

.feature .moreModal__item{
  font-family: "open-sans-condensed", sans-serif;
  font-weight: 300;
  font-size: calc(36 *(100vw / 1400) * 1.253);
  letter-spacing: 0.1em;
  margin: calc(40 *(100vw / 1400) * 1.253) 0 0;
}

.feature .creditList{
  margin: calc(40 *(100vw / 1400) * 1.253) auto 0;
  position: relative;
  width: 100%;
}

.feature .creditList .credit{
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 *(100vw / 1400) * 1.253) calc(30 *(100vw / 1400));
}

.feature .creditList .credit li{
  position: relative;
  width: 30%;
}

.feature .creditList .credit li,
.feature .creditList .credit a{
  color: #000;
  display: flex;
  font-family: "open-sans-condensed", sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: calc(14 *(100vw / 1400) * 1.253);
  letter-spacing: 0.1em;
  line-height: 1;
}

.feature .creditList .credit a{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.feature .creditList .credit li p{
  margin: 0;
}

.feature .creditList .credit li .image{
  width: 100%;
}
.feature .creditList .credit li .txt{
  margin-top: calc(16 *(100vw / 1400) * 1.253);
}
.feature .creditList .credit li .price{
  margin-top: calc(10 *(100vw / 1400) * 1.253);
}

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

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

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

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

.feature .sec .sec__img{
  position: relative;
}

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

.feature .sec01{
  margin: 0 auto;
}

.feature .sec01 .img01{
  width: calc(668 *(100vw / 1400) * 1.253);
}

.feature .sec01 .img02{
  margin: calc(46 *(100vw / 1400) * 1.253) auto 0;
  width: calc(662 *(100vw / 1400) * 1.253);
}

.feature .sec01 .flex01{
  flex-wrap: wrap;
  gap: calc(10 *(100vw / 1400) * 1.253) 0;
  justify-content: space-between;
  margin: calc(70 *(100vw / 1400) * 1.253) auto 0;
  width: calc(684 *(100vw / 1400) * 1.253);
}
.feature .sec01 .flex01 .sec__img{
  width: calc(336 *(100vw / 1400) * 1.253);
}

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

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

.feature .sec02 .flex01{
  flex-direction: column;
  gap: calc(33 *(100vw / 1400) * 1.253) 0;
  margin: 0 auto;
  width: calc(500 *(100vw / 1400) * 1.253);
}
.feature .sec02 .flex01 .sec__img{
  width: calc(500 *(100vw / 1400) * 1.253);
}

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

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

.feature .sec03 .img10{
  margin: 0 auto;
  width: 100%;
}
.feature .sec03 .img11{
  margin: calc(78 *(100vw / 1400) * 1.253) 0 0 auto;
  width: calc(660 *(100vw / 1400) * 1.253);
}
.feature .sec03 .img12{
  margin: calc(76 *(100vw / 1400) * 1.253) auto 0;
  width: calc(676 *(100vw / 1400) * 1.253);
}

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

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

.feature .sec04 .sec__flex.flex01{
  justify-content: space-between;
  margin: 0 0 0 auto;
  width: calc(730 *(100vw / 1400) * 1.253);
}
.feature .sec04 .flex01 .sec__img{
  width: calc(357 *(100vw / 1400) * 1.253);
}

.feature .sec04 .img15{
  margin: calc(114 *(100vw / 1400) * 1.253) 0 0;
  width: calc(690 *(100vw / 1400) * 1.253);
}
.feature .sec04 .img16{
  margin: calc(72 *(100vw / 1400) * 1.253) auto 0;
  width: calc(548 *(100vw / 1400) * 1.253);
}
.feature .sec04 .img17{
  margin: calc(60 *(100vw / 1400) * 1.253) auto 0;
  width: calc(640 *(100vw / 1400) * 1.253);
}

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

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

.feature .sec05 .img18{
  width: 100%;
}
.feature .sec05 .flex01{
  margin: calc(83 *(100vw / 1400) * 1.253) auto 0;
  width: 100%;
}
.feature .sec05 .flex01 .sec__img{
  width: 100%;
}
.feature .sec05 .img21{
  margin: calc(72 *(100vw / 1400) * 1.253) auto 0;
  width: calc(635 *(100vw / 1400) * 1.253);
}

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

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

.feature .sec06 .img22{
  width: calc(638 *(100vw / 1400) * 1.253);
}
.feature .sec06 .img23{
  margin: calc(92 *(100vw / 1400) * 1.253) auto 0;
  width: 100%;
}
.feature .sec06 .img24{
  margin: calc(108 *(100vw / 1400) * 1.253) auto 0;
  width: calc(556 *(100vw / 1400) * 1.253);
}
.feature .sec06 .img25{
  margin: calc(88 *(100vw / 1400) * 1.253) 0 0 calc(220 *(100vw / 1400) * 1.253);
  width: calc(420 *(100vw / 1400) * 1.253);
}
.feature .sec06 .img26{
  margin: 0 0 0 calc(220 *(100vw / 1400) * 1.253);
  width: calc(420 *(100vw / 1400) * 1.253);
}

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

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

.feature .sec07 .img27{
  margin: 0 auto;
  width: calc(662 *(100vw / 1400) * 1.253);
}

.feature .sec07 .flex01{
  justify-content: space-between;
  margin: calc(72 *(100vw / 1400) * 1.253) 0 0;
  width: calc(713 *(100vw / 1400) * 1.253);
}
.feature .sec07 .flex01 .sec__img{
  width: calc(0344 *(100vw / 1400) * 1.253);
}

.feature .sec07 .img30{
  margin: calc(110 *(100vw / 1400) * 1.253) auto 0;
  width: calc(534 *(100vw / 1400) * 1.253);
}
.feature .sec07 .img31{
  margin: calc(55 *(100vw / 1400) * 1.253) auto 0;
  width: calc(534 *(100vw / 1400) * 1.253);
}

.feature .sec07 .img32{
  margin: calc(78 *(100vw / 1400) * 1.253) auto 0;
  width: 100%;
}

.feature .sec07 .sec__btn{
  background: #232323;
  margin: calc(154 *(100vw / 1400) * 1.253) auto 0;
  height: calc(80 *(100vw / 1400) * 1.253);
  width: calc(500 *(100vw / 1400) * 1.253);
}
.feature .sec07 .sec__btn a{
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-family: "niveau-grotesk", sans-serif;
  font-weight: 300;
  font-size: calc(30 *(100vw / 1400) * 1.253);
  justify-content: center;
  line-height: 1;
  padding-top: calc(4 *(100vw / 1400) * 1.253);
  height: 100%;
  width: 100%;
}

.feature .sec07 .sec__btn.btn02{
  margin: calc(80 *(100vw / 1400) * 1.253) auto 0;
}

/*******************************
modal
*******************************/

.feature .moreModal{
  box-sizing: border-box;
  background: #fff;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity .4s ease;
  height: calc(468 *(100vh / 660));
  width: calc(770 *(100vw / 1400));
  z-index: 90;
}
.feature .moreModal.on{
  opacity: 1;
  pointer-events: all;
}

.feature .moreModal .inner{
  box-sizing: border-box;
  overflow: auto;
  padding: calc(65 *(100vw / 1400));
  position: relative;
  height: 100%;
}
.feature .moreModal .inner::-webkit-scrollbar{
  width: 2px;
}
.feature .moreModal .inner::-webkit-scrollbar-thumb{
  background: #ccc;
}

.feature .moreModal .moreModal__box{
  display: none;
  opacity: 0;
  pointer-events: none;
}
.feature .moreModal .moreModal__box.on{
  display: block;
  opacity: 1;
  pointer-events: all;
}

.feature .moreModal .moreModal__img{
  margin: 0 auto;
  width: 100%;
}

.feature .moreModal .moreModal__close{
  background: url(../img/close.png) top center / contain no-repeat;
  margin: 0 auto;
  position: absolute;
  bottom: calc(-60 *(100vw / 1400) * 1.253);
  left: 0;
  right: 0;
  height: calc(25 *(100vw / 1400));
  width: calc(25 *(100vw / 1400));
}

.feature .bg{
  background: #000;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  transition: opacity .4s ease;
  height: 100%;
  width: 100%;
  z-index: 80;
}
.feature .bg.on{
  opacity: .5;
  pointer-events: all;
}

body.modal-lock{
  position: fixed;
  width: 100%;
}

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

.l-container #feature [data-fade="fade"]{
  opacity: 0;
  transition: opacity .8s, transform .8s;
  transform: translateY(60px);
}
.l-container #feature [data-fade="fade"][data-is-active="true"]{
  opacity: 1;
  transform: translateY(0);
}

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

  .feature .moreModal__item{
    font-size: calc(36px * 1.253);
    margin: calc(40px * 1.253) 0 0;
  }

  .feature .creditList{
    margin: calc(20px * 1.253) auto 0;
  }

  .feature .creditList .credit{
    gap: calc(40px * 1.253) 30px;
  }

  .feature .creditList .credit li,
  .feature .creditList .credit a{
    font-size: calc(14px * 1.253);
  }

  .feature .creditList .credit li .txt{
    margin-top: calc(16px * 1.253);
  }
  .feature .creditList .credit li .price{
    margin-top: calc(10px * 1.253);
  }

  .feature{
    width: 940px;
  }

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

  .feature .sec01 .img01{
    width: calc(668px * 1.253);
  }

  .feature .sec01 .img02{
    margin: calc(46px * 1.253) auto 0;
    width: calc(662px * 1.253);
  }

  .feature .sec01 .flex01{
    gap: calc(10px * 1.253) 0;
    margin: calc(70px * 1.253) auto 0;
    width: calc(684px * 1.253);
  }
  .feature .sec01 .flex01 .sec__img{
    width: calc(336px * 1.253);
  }

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

  .feature .sec02{
    margin: calc(90px * 1.253) auto 0;
  }

  .feature .sec02 .flex01{
    gap: calc(33px * 1.253) 0;
    width: calc(500px * 1.253);
  }
  .feature .sec02 .flex01 .sec__img{
    width: calc(500px * 1.253);
  }

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

  .feature .sec03{
    margin: calc(110px * 1.253) auto 0;
  }

  .feature .sec03 .img11{
    margin: calc(78px * 1.253) 0 0 auto;
    width: calc(660px * 1.253);
  }
  .feature .sec03 .img12{
    margin: calc(76px * 1.253) auto 0;
    width: calc(676px * 1.253);
  }

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

  .feature .sec04{
    margin: calc(108px * 1.253) auto 0;
  }

  .feature .sec04 .sec__flex.flex01{
    margin: 0 0 0 auto;
    width: calc(730px * 1.253);
  }
  .feature .sec04 .flex01 .sec__img{
    width: calc(357px * 1.253);
  }

  .feature .sec04 .img15{
    margin: calc(114px * 1.253) 0 0;
    width: calc(690px * 1.253);
  }
  .feature .sec04 .img16{
    margin: calc(72px * 1.253) auto 0;
    width: calc(548px * 1.253);
  }
  .feature .sec04 .img17{
    margin: calc(60px * 1.253) auto 0;
    width: calc(640px * 1.253);
  }

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

  .feature .sec05{
    margin: calc(120px * 1.253) auto 0;
  }

  .feature .sec05 .flex01{
    margin: calc(83px * 1.253) auto 0;
  }
  .feature .sec05 .img21{
    margin: calc(72px * 1.253) auto 0;
    width: calc(635px * 1.253);
  }

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

  .feature .sec06{
    margin: calc(94px * 1.253) auto 0;
  }

  .feature .sec06 .img22{
    width: calc(638px * 1.253);
  }
  .feature .sec06 .img23{
    margin: calc(92px * 1.253) auto 0;
  }
  .feature .sec06 .img24{
    margin: calc(108px * 1.253) auto 0;
    width: calc(556px * 1.253);
  }
  .feature .sec06 .img25{
    margin: calc(88px * 1.253) 0 0 calc(220px * 1.253);
    width: calc(420px * 1.253);
  }
  .feature .sec06 .img26{
    margin: 0 0 0 calc(220px * 1.253);
    width: calc(420px * 1.253);
  }

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

  .feature .sec07{
    margin: calc(78px * 1.253) auto 0;
  }

  .feature .sec07 .img27{
    width: calc(662px * 1.253);
  }

  .feature .sec07 .flex01{
    margin: calc(72px * 1.253) 0 0;
    width: calc(713px * 1.253);
  }
  .feature .sec07 .flex01 .sec__img{
    width: calc(0344px * 1.253);
  }

  .feature .sec07 .img30{
    margin: calc(110px * 1.253) auto 0;
    width: calc(534px * 1.253);
  }
  .feature .sec07 .img31{
    margin: calc(55px * 1.253) auto 0;
    width: calc(534px * 1.253);
  }

  .feature .sec07 .img32{
    margin: calc(78px * 1.253) auto 0;
  }

  .feature .sec07 .sec__btn{
    margin: calc(154px * 1.253) auto 0;
    height: calc(80px * 1.253);
    width: calc(500px * 1.253);
  }
  .feature .sec07 .sec__btn a{
    font-size: calc(30px * 1.253);
    padding-top: calc(4px * 1.253);
  }

  .feature .sec07 .sec__btn.btn02{
    margin: calc(80px * 1.253) auto 0;
  }

  /*******************************
  modal
  *******************************/

  .feature .moreModal{
    height: calc(467 *(100vh / 667));
    width: 770px;
  }

  .feature .moreModal .inner{
    padding: 65px;
  }

  .feature .moreModal .moreModal__close{
    bottom: calc(-60px * 1.253);
    height: calc(25px * 1.253);
    width: calc(25px * 1.253);
  }
}

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