@charset "UTF-8";
.feature {
  --lpSetSize: (100vw / 1400) * 0.6666666;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "Gilda Display", serif;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  background: #eff2f4;
}
.feature * {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  list-style: none;
}
.feature h1,
.feature h2,
.feature h3,
.feature h4,
.feature strong {
  font-weight: normal;
}
.feature img {
  width:100%;
  height:auto;
  vertical-align:top;
  display:block;
}
.feature a { 
  display: block;
  color: inherit;
  text-decoration: none;  
}


/*****************************************************
.feature (PC)
*****************************************************/

/* 共通
----------------------------- */
html { scroll-padding-top: 80px;}
.feature a { transition: opacity 0.3s;}
.feature a:hover { cursor: pointer; opacity: .7;}
.feature .sec__img { background: #ffffff;}
.l-footer { padding-top: 0 !important;}
.pc-footer { margin-top: 0 !important;}

/* .feature（大枠）
----------------------------- */
.feature { 
  display: flex;
}
.feature .f_left,
.feature .f_right {
  width: calc((100% - (500 * (100vw / 1400))) / 2);
  position:sticky;
  height: calc(100vh - 80px);
  top: 80px;
}
.feature .f_main {
  width: calc(500 * (100vw / 1400));
  background: #ffffff;
}
/* .f_left__box
----------------------------- */
.feature .f_left .f_left__box {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature .f_left__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.feature .f_left__title img {
  display: block;
  width: calc(136.3304 * (100vw / 1400));
  margin-bottom: calc(46 * (100vw / 1400));
}
.feature .f_left__title span {
  display: block;
  font-size: calc(16.42 * (100vw / 1400));
}
.feature .f_left__title strong {
  display: block;
  font-size: calc(49.26 * (100vw / 1400));
}

/* .f_left__box / .f_right__box
----------------------------- */
.feature .f_right .f_right__box {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.feature .f_right .f_right__btn {
  width: calc(260 * (100vw / 1400));
  font-size: calc(30 * (100vw / 1400));
  line-height: calc(60 * (100vw / 1400));
  text-align: center;
}
.feature .f_right .f_right__btn a {
  background: #000000;
  color: #ffffff;
}


/*****************************************************
.feature (PC・SP共通)
*****************************************************/

/* .hero
----------------------------- */
.feature .hero {
  position: relative;
}
.feature .hero .hero_txt {
  position: absolute;
  width: calc(297.7508 * var(--lpSetSize));
  top: calc(477.3359 * var(--lpSetSize));
  left: calc(416.4581 * var(--lpSetSize));
}

/* .preorder
----------------------------- */
.feature .preorder {
  padding: calc(94 * var(--lpSetSize)) 0 calc(70 * var(--lpSetSize));
  text-align: center;
}
.feature .preorder p:nth-of-type(1) {
  font-size: calc(30 * var(--lpSetSize));
  margin-bottom: calc(1 * var(--lpSetSize));
}
.feature .preorder p:nth-of-type(2) {
  font-size: calc(90 * var(--lpSetSize));
  margin-left: calc(-9 * var(--lpSetSize));
}
.feature .preorder p.date {
  display: inline-block;
  font-size: calc(40 * var(--lpSetSize));
  letter-spacing: 0.01em;
  line-height:1.3;
  margin-top: calc(14 * var(--lpSetSize));
  margin-left: calc(-6 * var(--lpSetSize));
  margin-bottom: calc(30 * var(--lpSetSize));
  border-bottom: calc(2 * var(--lpSetSize)) #000000 solid;
}
.feature .preorder p.date span {
  font-size: calc(30 * var(--lpSetSize));
}

/* .sec
----------------------------- */
/* .credit_wrap */
.feature .credit_wrap {
  width: fit-content;
}
.feature .sec__credit {
  display: flex;
  gap: calc(8 * var(--lpSetSize));
  font-size: calc(24 * var(--lpSetSize));
}
.feature .sec__credit .credit {
  display:flex;
}
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
  gap: 0.02em;
}
/* 以下、クレジット間に／を入れる場合 */
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
}
.feature .sec__credit .credit li::after {
  content: "/";
  margin: 0 calc(8 * var(--lpSetSize));
}
.feature .sec__credit .credit li:last-of-type::after {
  content: none !important;
}
.feature .sec__credit .credit .txt {
  margin-right: calc(10 * var(--lpSetSize));
}

/* .imgXX */
.feature .img01,
.feature .img04,
.feature .img11,
.feature .img16 {
  position: relative;
}
.feature .img01 .sec__credit .credit,
.feature .img04 .sec__credit .credit,
.feature .img11 .sec__credit .credit,
.feature .img16 .sec__credit .credit {
  position: absolute;
  color: #ffffff;
  bottom: calc(20 * var(--lpSetSize));
  right: calc(20 * var(--lpSetSize));
  writing-mode: vertical-lr;
  transform: rotate(180deg);  
}
.feature .img01 .sec__credit .credit li::after,
.feature .img04 .sec__credit .credit li::after,
.feature .img11 .sec__credit .credit li::after,
.feature .img16 .sec__credit .credit li::after {
  margin:  calc(8 * var(--lpSetSize)) 0;
}
.feature .img01 .sec__credit .credit .txt,
.feature .img04 .sec__credit .credit .txt,
.feature .img11 .sec__credit .credit .txt,
.feature .img16 .sec__credit .credit .txt {
  margin-bottom: calc(10 * var(--lpSetSize));
}

/* .imgXX */
.feature .img01 {
  width: 100%;
}
.feature .img02 {
  width: 100%;
}
.feature .img02 .sec__credit {
  width:calc(680 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: center;
  padding: calc(10 * var(--lpSetSize)) 0 calc(90 * var(--lpSetSize));
}
.feature .img02 .sec__credit .credit {
  flex-wrap: wrap;
  justify-content: center;
}
.feature .img02 .sec__credit .credit li:nth-of-type(3)::after {
  content: "";
  margin: 0;
}
.feature .img03 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img03 .sec__credit {
  justify-content: center;
  padding: calc(10 * var(--lpSetSize)) 0 calc(94 * var(--lpSetSize));
}
.feature .img04 {
  width: 100%;
}
.feature .img05 {
  width: 100%;
}
.feature .img05 .sec__credit {
  justify-content: center;
  padding: calc(10 * var(--lpSetSize)) 0 calc(94 * var(--lpSetSize));
}
.feature .img06 {
  width: 100%;
}
.feature .img06 .sec__credit {
  justify-content: end;
  padding: calc(10 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) calc(96 * var(--lpSetSize));
}
.feature .img06 figure {
  width: calc(550 * var(--lpSetSize));
  margin: 0 0 0 calc(200 * var(--lpSetSize));
}
.feature .img07 {
  width: 100%;
}
.feature .img08 {
  width: 100%;
  margin: calc(-50 * var(--lpSetSize)) 0 0 0;
  position:relative;
  z-index:1;
}
.feature .img08 figure {
  width: calc(500 * var(--lpSetSize));
}
.feature .img08 .sec__credit {
  padding: calc(10 * var(--lpSetSize)) 0 calc(94 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
}
.feature .img09 {
  width: 100%;
}
.feature .img09 figure {
  width: calc(550 * var(--lpSetSize));
  margin: 0 0 0 calc(200 * var(--lpSetSize));
}
.feature .img09 .sec__credit {
  justify-content: end;
  padding: calc(10 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) calc(96 * var(--lpSetSize));
}
.feature .img10 {
  width: calc(650 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img10 .sec__credit {
  justify-content: center;
  padding: calc(10 * var(--lpSetSize)) 0 calc(96 * var(--lpSetSize));
}
.feature .img11 {
  width: 100%;
}
.feature .img12 {
  width: calc(450 * var(--lpSetSize));
  margin: calc(-200 * var(--lpSetSize)) auto 0;
  position:relative;
  z-index:1;
}
.feature .img13 {
  width: 100%;
}
.feature .img13 .sec__credit {
  justify-content: center;
  padding: calc(10 * var(--lpSetSize)) 0 calc(96 * var(--lpSetSize));
}
.feature .img14 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 0 0 calc(150 * var(--lpSetSize));
}
.feature .img14 .sec__credit {
  justify-content: end;
  padding: calc(10 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) calc(96 * var(--lpSetSize));
}
.feature .img15 {
  width: calc(600 * var(--lpSetSize));
}
.feature .img15 .sec__credit {
  padding: calc(6 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) calc(98 * var(--lpSetSize));
}
.feature .img16 {
  width: 100%;
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom p.sec__btn a {
  text-align: center;
  font-size: calc(40 * var(--lpSetSize));
  font-weight: 400;
  line-height: calc(96 * var(--lpSetSize));
  background: #000000;
  color: #ffffff;
  padding: calc(5 * var(--lpSetSize)) 0 0 calc(4 * var(--lpSetSize));
}

/*****************************************************
animation
*****************************************************/

/* .is_fade-up
----------------------------- */
.js_anime.is_fade-up {
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
  opacity: 0;
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  transition-delay: 0.1s;
}
.js_anime.is_show.is_fade-up {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/******************************************************/

@media screen and (min-width: 1400px) { 
  .feature {
    --lpSetSize: 1px * 0.6666666;
  }
  .feature .f_left,
  .feature .f_right {
    width: calc((100% - 500px) / 2);
  }
  .feature .f_main {
    width: 500px;
  }
  .feature .f_left__title img {
    width: 136.3304px;
    margin-bottom: 46px;
  }
  .feature .f_left__title span {
    font-size: 16.42px;
  }
  .feature .f_left__title strong {
    font-size: 49.26px;
  }

  .feature .f_right .f_right__btn {
    width: 260px;
    font-size: 30px;
    line-height: 60px;
  }
}