@charset "UTF-8";
@import url("animation.css");

:root {
  --lpSetSize: (100vw / 1400) * 0.6;
}
.l-container {
  width: 100%;
}
.l-container .feature {
  width: 100%;
  font-feature-settings: "palt";
}
.feature * {
  margin: 0;
  box-sizing: border-box;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.feature a {
  color: inherit;
  text-decoration: none;  
  transition: opacity 0.3s;
}
.feature a:hover {
  cursor: pointer;
  opacity: .7;
}

/* PC only */
.l-footer {
  padding-top: 0 !important;
}
.pc-footer {
  margin-top: 0 !important;
}


/* .feature wrap
*******************************/
.feature {
  display: flex;
  background: #a82c31;
}
.feature .f_left,
.feature .f_right {
  width: calc((100% - (450 *(100vw / 1400))) / 2);
  position:sticky;
  height: 100vh;
  top: 0;
}
.feature .f_main {
  width: calc(450 *(100vw / 1400));
  max-width: 450px;
}

/* .f_main
----------------------------- */
.feature .f_main .inner,
.feature .f_main .sec {
  width: calc(740 * var(--lpSetSize));
  margin: 0 auto;
  background: #f7cfda;  
}

/* .f_left__box / .f_right__box
----------------------------- */
.feature .f_left .f_left__box,
.feature .f_right .f_right__box {
  height: 100%;  
  display: flex;
  flex-direction: column;
  justify-content: center;

}
.feature .f_left .f_left__title {
  width: calc(280 *(100vw / 1400));
}
.feature .f_right .f_right__btn {
  width: calc(270 *(100vw / 1400));
}
.feature .f_left .f_left__title,
.feature .f_right .f_right__btn {
  margin: 0 auto;
}


/* font-style
*******************************/
.l-container .feature {
  font-family: "meno-banner", serif;
  font-weight: 600;
  font-style: normal;  
  color: #c1272d;
}
.feature .text_jp {
  font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", Meiryo, メイリオ, Helvetica, Arial, sans-serif;
  font-weight: 500;
}
.feature .text_en {
  font-family: "nautica", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.feature .text_i {
  font-style: italic;
}


/* credit
*******************************/
.feature .sec__credit {
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1;
  margin: calc(60 * var(--lpSetSize)) auto 0;
  padding: 0 0 calc(124 * var(--lpSetSize)) 0;
}
.feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(16 * var(--lpSetSize)) calc(18 * var(--lpSetSize));
}
.feature .sec__credit .credit li .price {
  letter-spacing: 0;
  margin-left: calc(8 * var(--lpSetSize));
}


/* 以下、クレジット間に／を入れる場合 */
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
}
.feature .sec__credit .credit li.separator::after {
  content: "/";
  margin-left: calc(8 * var(--lpSetSize));
}
.feature .sec__credit .credit li:last-of-type::after {
  content: none !important;
}

/* credit 幅 */
.feature .sec__credit.credit01 {
  width: calc(550 * var(--lpSetSize));
}
.feature .sec__credit.credit05 {
  width: calc(450 * var(--lpSetSize));
}
.feature .sec__credit.credit08 {
  width: calc(450 * var(--lpSetSize));
}
.feature .sec__credit.credit10 {
  width: calc(550 * var(--lpSetSize));
}


/* layout
*******************************/
.feature .wrap__flex {
  display:flex;
}
.feature .sec__deco01,
.feature .sec__deco02,
.feature .sec__deco03 { 
  position: relative;
}


/* image-size
*******************************/
.feature .hero {
  width: 100%;
}
.feature .img02,
.feature .img03 {
  width: calc(570 * var(--lpSetSize));
}
.feature .img04 {
  width: calc(315 * var(--lpSetSize));
}
.feature .img05 {
  width: calc(660 * var(--lpSetSize));
}
.feature .img06,
.feature .img07 {
  width: calc(330 * var(--lpSetSize));
}
.feature .img08 {
  width: calc(450 * var(--lpSetSize));
}
.feature .img09 {
  width: calc(600 * var(--lpSetSize));
}
.feature .img10,
.feature .img11,
.feature .img12,
.feature .img13 {
  width: calc(345 * var(--lpSetSize));
}
.feature .img14,
.feature .img15 {
  width: calc(600 * var(--lpSetSize));
}
.feature .img16 {
  width: calc(420 * var(--lpSetSize));
}
.feature .img17 {
  width: calc(600 * var(--lpSetSize));
}
.feature .img18,
.feature .img19 {
  width: calc(480 * var(--lpSetSize));
}
.feature .img20 {
  width: calc(420 * var(--lpSetSize));
}
.feature .img21,
.feature .img22 {
  width: calc(600 * var(--lpSetSize));
}
.feature .parts01 {
  width: calc(110 * var(--lpSetSize));
}
.feature .parts02 {
  width: calc(120 * var(--lpSetSize));
}
.feature .parts03 {
  width: calc(130 * var(--lpSetSize));
}


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

/* .hero
----------------------------- */
.feature .hero {
  text-align: center;
}
.feature .hero .inner {
  padding: calc(108 * var(--lpSetSize)) 0 calc(107 * var(--lpSetSize));
}
.feature .hero .hero__lead {
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.2;
  letter-spacing: 0.045em;
  margin-bottom: calc(36 * var(--lpSetSize));
}
.feature .hero .hero__title {
  font-size: calc(68.8 * var(--lpSetSize));
  margin-bottom: calc(12 * var(--lpSetSize));
  letter-spacing: 0.01em;
}
.feature .hero .hero__title span {
  font-size: calc(96 * var(--lpSetSize));
  margin-left: calc(5 * var(--lpSetSize));
}
.feature .hero .hero__subtitle {
  font-size: calc(24 * var(--lpSetSize));
  line-height: 2.2;
  letter-spacing: 0.05em;
}


/* .sec01
----------------------------- */
.feature .img02,
.feature .img03 {
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .wrap__flex:has(.img04){
  display:flex;
  justify-content: center;
  gap: 0 calc(10 * var(--lpSetSize));
}


/* .sec02
----------------------------- */
.feature .sec02 {
  padding-bottom: calc(102 * var(--lpSetSize));
}
.feature .sec02 .text01,
.feature .sec02 .text02 {
  font-size: calc(80 * var(--lpSetSize));
  line-height: 1;
  letter-spacing: 0.025em;
}
.feature .sec02 .text01 {
  position: absolute;  
  top: calc(60 * var(--lpSetSize));
  left: calc(120 * var(--lpSetSize));
}
.feature .sec02 .text02 {
  position: absolute;  
  top: calc(400 * var(--lpSetSize));
  right: calc(18 * var(--lpSetSize));
}
.feature .sec02 .img05 {
  margin: 0 auto;
  padding: calc(98 * var(--lpSetSize)) 0 0 0;
}
.feature .sec02 .wrap__flex {
  display:flex;
  justify-content: flex-end;
  gap: 0 calc(40 * var(--lpSetSize));
}
.feature .sec02 .sec__deco02 {
  padding: calc(280 * var(--lpSetSize)) 0 0 0;
}
.feature .sec02 .sec__deco02 .text01 {
  top: calc(60 * var(--lpSetSize));
  left: calc(35 * var(--lpSetSize));
  z-index:1;
}
.feature .sec02 .sec__deco03 {
  padding: calc(80 * var(--lpSetSize)) 0 0 0;
}
.feature .sec02 .sec__deco03 .text01 {
  top: calc(580 * var(--lpSetSize));
  left: calc(66 * var(--lpSetSize));
  z-index:1;
}
.feature .sec02 .credit03 .credit {
  margin: 0 0 0 calc(40 * var(--lpSetSize));
  display: flex;
  gap: calc(15 * var(--lpSetSize)) calc(7 * var(--lpSetSize));
  flex-direction: column;
}
.feature .sec02 .img08 {
  margin: 0 auto;
  padding: calc(24 * var(--lpSetSize)) 0 0 0;
}
.feature .sec02 .credit04 .credit {
  margin: 0 0 0 calc(145 * var(--lpSetSize));
  display: flex;
  gap: calc(15 * var(--lpSetSize)) calc(7 * var(--lpSetSize));
  flex-direction: column;
}


/* .sec03
----------------------------- */
.feature .sec03 {
  padding-bottom: calc(220 * var(--lpSetSize));
}
.feature .sec03 .sec__deco01 .img09 {
  margin:0 auto;
}
.feature .sec03 .sec__deco01 .parts01 {
  position: absolute;
  top: calc(-34 * var(--lpSetSize));
  left: calc(30 * var(
  --lpSetSize));
}
.feature .sec03 .sec__deco01 .parts02 {
  position: absolute;
  bottom: calc(-50 * var(--lpSetSize));
  right: calc(20 * var(--lpSetSize));
}
.feature .sec03 .wrap__flex {
  display:flex;
  gap: calc(10 * var(--lpSetSize));
  flex-wrap: wrap;
  justify-content: center;
}
.feature .sec03 .flex_inner {
  width:calc(345 * var(--lpSetSize));
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature .sec03 .sec__deco02 .text01 {
  font-size: calc(60 * var(--lpSetSize));
  line-height: 1;
  letter-spacing: 0.025em; 
}
.feature .sec03 .sec__deco03 .text02 {
  font-size: calc(40 * var(--lpSetSize));
  margin-bottom: calc(-20 * var(--lpSetSize));
  line-height: 1;
  letter-spacing: 0.025em;
}


/* .sec04
----------------------------- */
.feature .sec04 .img14 {
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec04 .img15 {
  margin: 0 auto;
}


/* .sec05
----------------------------- */
.feature .sec05 .img16 {
  margin: 0 auto;
}
.feature .sec05 .img17 {
  margin: calc(100 * var(--lpSetSize)) auto calc(80 * var(--lpSetSize));
}
.feature .sec05 .img18 {
  margin: 0 0 calc(20 * var(--lpSetSize)) calc(30 * var(--lpSetSize));
}
.feature .sec05 .img19 {
  margin: 0 0 0 calc(230 * var(--lpSetSize));
}
.feature .sec05 .credit08 {
  margin: calc(60 * var(--lpSetSize)) 0 0 calc(230 * var(--lpSetSize));
}
.feature .sec05 .credit08 .credit {
  display: flex;
  justify-content: flex-start;
}


/* .sec06
----------------------------- */
.feature .sec06 .img20 {
  margin: 0 auto;
}
.feature .sec06 .sec__deco01 .text01 {
  font-size: calc(50 * var(--lpSetSize));
  line-height: 1;
  letter-spacing: 0.025em;
  text-align:center;
  padding-top: calc(102 * var(--lpSetSize));
  margin-bottom: calc(40 * var(--lpSetSize));
}

/* .sec07
----------------------------- */
.feature .sec07 .img21 {
  padding-top: calc(100 * var(--lpSetSize));  
  margin: 0 auto calc(20 * var(--lpSetSize));
}
.feature .sec07 .img22 {
  margin: 0 auto;
}


/* .sec sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: 0 0 calc(130 * var(--lpSetSize)) 0;
}
.feature .sec_bottom .sec__btn {
  padding: calc(100 * var(--lpSetSize)) 0 0 0;
  margin: 0 auto calc(220 * var(--lpSetSize));
  width: calc(540 * var(--lpSetSize));
}
.feature .sec_bottom .parts03 {
   margin: 0 auto calc(28 * var(--lpSetSize));
}
.feature .sec_bottom .sec__staff {
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 2.0;
  text-align:center;
}



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

  :root {
    --lpSetSize: 1px * 0.6;
  }

  /* .feature wrap
  *******************************/
  .feature .f_left,
  .feature .f_right {
    width: calc((100% - 450px) / 2); 
  }
  .feature .f_main {
    width: 450px; 
  }

  /* .f_left__box / .f_right__box
  ----------------------------- */
  .feature .f_left .f_left__title {
    width: 280px;
  }
  .feature .f_right .f_right__btn {
    width: 270px;
  }

}