@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.68;
  --lpSetTxt01: #4c2727;
  --lpSetBg01:#f7f4ef;
  --lpSetBg02:#ebe4dc;
}
html {
  scroll-behavior: smooth;
}
.l-container {
  width: 100%;
}
.feature {
  width: 100%;
  font-feature-settings: "palt";
  font-family: "ryo-gothic-plusn", "yu-gothic-pr6n",'游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic', メイリオ, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--lpSetTxt01);
  background: var(--lpSetBg01);
}
.feature * {
  margin: 0;
  box-sizing: border-box;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.feature a { 
  display: block;
  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 (PC ONLY)
*******************************/
.feature {
  display: flex;
}

/* .f_left / .f_right
----------------------------- */
.feature .f_left,
.feature .f_right {
  width: 50%;
  text-align: center;
}
.feature .f_left .f_left__box,
.feature .f_right .f_right__box {
  position: relative;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__title,
.feature .f_right .f_right__btn {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  margin-inline: auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature .f_left .f_left__box .f_left__title h2 {
  width: calc(360 * (100vw / 1400));
}
.feature .f_right .f_right__btn a {
  font-family: "classic-script-mn", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(66 * (100vw / 1400));
  line-height: 1.0;
  text-align:center;
  color: var(--lpSetTxt01);
  width: fit-content;
  margin: 0 auto calc(50 * var(--lpSetSize));
  background: url(../img/allitems.svg) center bottom no-repeat;
  background-size: calc(172.26 * (100vw / 1400)) calc(2 * (100vw / 1400));
}


/* .f_main
----------------------------- */
.feature .f_main {
  width: calc(510 * (100vw / 1400));
}


/* credit
*******************************/
.sec__credit {
  width:calc(500 * var(--lpSetSize));
  margin: 0 auto;  
  padding: calc(30 * var(--lpSetSize)) 0 calc(70 * var(--lpSetSize));
}
.feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0 * var(--lpSetSize)) calc(20 * var(--lpSetSize));
  justify-content: center;
}
.feature .sec__credit .credit li {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--lpSetTxt01);
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.05em;
  line-height: 2.0;
}

/* 以下、クレジット間に「/」を入れる場合 
.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;
}
*/


/* svg .text
*******************************/
.feature .deco {
  position: relative;
  width: calc(750 * var(--lpSetSize));
}


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

/* .hero
----------------------------- */
.feature .hero {
  padding: 0 0 calc(76 * var(--lpSetSize)) 0;
  overflow: hidden;
  background:var(--lpSetBg02);
}

/* video */
.feature .hero .video_wrap {
  background: var(--lpSetBg02);
  position:relative;
  margin: 0 0 calc(152 * var(--lpSetSize)) 0;
}
.feature .hero .video_wrap video {
  display: block;
  width: 100% !important;
  height: auto;
  min-height: calc(1333 * var(--lpSetSize));
}
.feature .hero .video_wrap .btn_sound {
  position: absolute;
  bottom: calc(20 * var(--lpSetSize));
  left: calc(590 * var(--lpSetSize));
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.050em;
  color: #FFFFFF;
  cursor: pointer;
}
.feature .hero .video_wrap .sound_on {
  display: block;  
}
.feature .hero .video_wrap .off .sound_on {
  display: none;
}
.feature .hero .video_wrap .sound_off {
  display: none;
}
.feature .hero .video_wrap .off .sound_off {
  display: block;
}
.feature .hero__lead h2 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto calc(70 * var(--lpSetSize));
}
.feature .hero__lead p {
  text-align: center;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 2.0;
  margin: 0 0 calc(30 * var(--lpSetSize)) 0;
}


/* .sec
----------------------------- */
.feature .sec01 {
  padding: 0 0 calc(200 * var(--lpSetSize)) 0;
  background:var(--lpSetBg02); 
}
.feature .img01 {
  margin: 0 0 calc(110 * var(--lpSetSize)) 0;
}
.feature .img01 figure {
  width: calc(600 * var(--lpSetSize));
  height: calc(900 * var(--lpSetSize));
  margin: 0 calc(40 * var(--lpSetSize)) 0 0;
}
.feature .sec01 p {
  text-align: center;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 2.0;
  margin: 0 0 calc(26 * var(--lpSetSize)) 0;  
}
.feature .sec01 .sec__text {
  margin: 0 0 calc(136 * var(--lpSetSize)) 0;
}
.feature .sec01 .about h3 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto calc(60 * var(--lpSetSize));
}
.feature .sec01 .about .accordion a {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0 0 calc(18 * var(--lpSetSize)) calc(40 * var(--lpSetSize));
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.10em;
  line-height: calc(32 * var(--lpSetSize));
}
.feature .sec01 .about .accordion a.view {
  min-width: calc(204 * var(--lpSetSize));
  width:fit-content;
  background: url(../img/view.svg) left bottom no-repeat;
  background-size: calc(204 * var(--lpSetSize)) calc(36 * var(--lpSetSize));
}
.feature .sec01 .about .accordion a.close {
  min-width: calc(137 * var(--lpSetSize));
  width:fit-content;  
  background: url(../img/close.svg) left bottom no-repeat;
  background-size: calc(137 * var(--lpSetSize)) calc(36 * var(--lpSetSize));
}
.feature .sec02 {
  background: var(--lpSetBg01);
  padding: calc(150 * var(--lpSetSize)) 0 calc(146 * var(--lpSetSize)) 0;
}
.feature .deco01 {
  padding: calc(48 * var(--lpSetSize)) 0 0 0; 
}
.feature .img02 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto calc(150 * var(--lpSetSize));
}
.feature .text01 {
  width: calc(236 * var(--lpSetSize));
  position:absolute;
  top: calc(40 * var(--lpSetSize));
  left: calc(22 * var(--lpSetSize));
}
.feature .text01_s {
  width: calc(14.9229 * var(--lpSetSize));
  position:absolute;
  bottom: calc(20 * var(--lpSetSize));
  right: calc(24 * var(--lpSetSize));  
}
.feature .img03 {
  width: calc(750 * var(--lpSetSize));
  margin: 0 0 calc(120 * var(--lpSetSize)) 0;
}
.feature .img04 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .deco02 {
  padding: calc(100 * var(--lpSetSize)) 0 0 0; 
}
.feature .img05 {
  width: calc(450 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .text02 {
  width: calc(379.0354 * var(--lpSetSize));
  position:absolute;
  top: calc(36 * var(--lpSetSize));
  left: calc(286 * var(--lpSetSize));  
}
.feature .sec03 {
  background:var(--lpSetBg02);
}
.feature .deco03 {
  padding: calc(176 * var(--lpSetSize)) 0 calc(150 * var(--lpSetSize)) 0; 
}
.feature .img06 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .text03 {
  width: calc(175.0889 * var(--lpSetSize)); 
  position:absolute;
  top: calc(180 * var(--lpSetSize));
  right: calc(64 * var(--lpSetSize));
}
.feature .text03_s {
  width: calc(14.9229 * var(--lpSetSize)); 
  position:absolute;
  top: calc(516 * var(--lpSetSize));
  left: calc(26 * var(--lpSetSize));
}
.feature .img07 figure {
  width: calc(660 * var(--lpSetSize));
  height: calc(990 * var(--lpSetSize));
  margin: 0 calc(40 * var(--lpSetSize)) 0 0;
}
.feature .sec04 {
  padding: 0 0 calc(120 * var(--lpSetSize)) 0;
}
.feature .deco04 {
  padding: calc(268 * var(--lpSetSize)) 0 0 0;
  background:var(--lpSetBg02);  
}
.feature .img08 {
  width: calc(750 * var(--lpSetSize));
}
.feature .text04 {
  width: calc(366.677 * var(--lpSetSize));
  position:absolute;
  top: calc(118 * var(--lpSetSize));
  left: calc(190 * var(--lpSetSize));  
}
.feature .img09 {
  padding:calc(120 * var(--lpSetSize)) 0 0 0;
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto calc(120 * var(--lpSetSize));
}
.feature .img10 {
  width: calc(750 * var(--lpSetSize));
}
.feature .sec05 {
  background:var(--lpSetBg02);
}
.feature .deco05 {
  padding: calc(200 * var(--lpSetSize)) 0 calc(120 * var(--lpSetSize)) 0;
}
.feature .img11 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .text05 {
  width: calc(235.2686 * var(--lpSetSize));
  position:absolute;
  top: calc(190 * var(--lpSetSize));
  right: calc(20 * var(--lpSetSize));
}
.feature .text05_s {
  width: calc(174.541 * var(--lpSetSize));
  position:absolute;
  top: calc(970 * var(--lpSetSize));
  left: calc(50 * var(--lpSetSize));
}
.feature .img12 {
  width: calc(750 * var(--lpSetSize));
  margin: 0 0 calc(120 * var(--lpSetSize)) 0;  
}
.feature .img13 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto;
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  background: var(--lpSetBg02);
  padding: calc(44 * var(--lpSetSize)) 0 calc(140 * var(--lpSetSize));
}
.feature .sec__btn {
  margin: 0 0 calc(88 * var(--lpSetSize)) 0;
}
.feature .sec__btn a {
  font-family: "classic-script-mn", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(100 * var(--lpSetSize));
  line-height: 1.0;
  text-align:center;
  color: var(--lpSetTxt01);
  width: fit-content;
  margin: 0 auto calc(50 * var(--lpSetSize));
  background: url(../img/allitems.svg) center bottom no-repeat;
  background-size:calc(261 * var(--lpSetSize)) calc(2 * (100vw / 1400));
}
.feature .sec_bottom .staff {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
  line-height: 2.0;
  letter-spacing:0.05em;
  text-align:center;
}


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

/* フェードイン */
.js-fade-in {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease, transform 0.8s ease;
  will-change: opacity;
}
.js-fade-in.is-show {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* --------------------------------------------------- */

@media screen and (min-width: 1400px) {  
  :root {
    --lpSetSize: 1px * 0.68;
  }
  .feature .f_left .f_left__box .f_left__title h2 {
    width: 360px;
  }
  .feature .f_right .f_right__btn a {
    font-size: 66px;
    margin: 0 auto 50px;
    background: url(../img/allitems.svg) center bottom no-repeat;
    background-size: 172.26px 2px;
  }
  .feature .f_main {
    width: 510px;
  }
}