@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.68;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #5a5655;
}
.feature * {
  margin:0;
  box-sizing:border-box;
}
.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% - (510 * (100vw / 1400))) / 2);
  position:sticky;
  height: calc(100vh - 80px);
  top: 80px;
}
.feature .f_left {
  background: #cfbfdd;
}
.feature .f_right {
  background: #eec5cb;
}
.feature .f_main {
  width: calc(510 * (100vw / 1400));
}

/* .f_left__box / .f_right__box
----------------------------- */
.feature .f_left .f_left__box,
.feature .f_right .f_right__box {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature .f_left .f_left__title {
  width: calc(261.24 * (100vw / 1400));
  margin: 0 auto;
}
.feature .f_right .f_right__btn {
  width: fit-content;
  margin: 0 auto;
}
.feature .f_right .f_right__btn a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature .f_right .f_right__btn a img.btn {
  width: calc(127.922 * (100vw / 1400));
  margin-bottom:calc(24.5631 * (100vw / 1400));
}
.feature .f_right .f_right__btn a img.btn_txt {
  width: calc(224.856 * (100vw / 1400));
}

/*****************************************************
.feature (SP)
*****************************************************/



/*****************************************************
.feature (PC・SP共通)
*****************************************************/
.feature .f_main {
  background: #fcfaf1;
}
.feature .motif {
  position: absolute;
}


/* .hero
----------------------------- */
.feature .hero {
  position: relative;
  margin-bottom: calc(100 * var(--lpSetSize));
}
.feature .hero .hero_txt {
  width: calc(475.8467 * var(--lpSetSize));
  position:absolute;
  left: calc(138.3374 * var(--lpSetSize));
  top:calc(656.3762 * var(--lpSetSize));
  z-index: 1;
}
.feature .hero .hero_img {
  width: 100%;
  position: relative;
  z-index: 0;
}
.feature .hero .motif01 {
  width: calc(45.084 * var(--lpSetSize));
  left: calc(660 * var(--lpSetSize)); 
  top:calc(36 * var(--lpSetSize));
  z-index: 1;
}
.feature .hero .motif02 {
  width: calc(44.9074 * var(--lpSetSize));
  left: calc(636 * var(--lpSetSize)); 
  top:calc(143 * var(--lpSetSize));
  z-index: 1;  
}
.feature .hero .motif03 {
  width: calc(45.084 * var(--lpSetSize));
  left: calc(30 * var(--lpSetSize)); 
  top:calc(1050 * var(--lpSetSize));
  z-index: 1;  
}


/* .sec
----------------------------- */
.feature .motif {
  pointer-events: none;
}

/* .text
----------------------------- */
.feature .sec01 .text01 {
  width: calc(787.6973 * var(--lpSetSize));
  margin: calc(30 * var(--lpSetSize)) 0 0 calc(-36.833 * var(--lpSetSize));
}
.feature .sec02 .text02 {
  width: calc(838.3438 * var(--lpSetSize));
  margin: calc(20 * var(--lpSetSize)) 0 0 calc(-53.085 * var(--lpSetSize));
}
.feature .sec04 .text03 {
  width: calc(844.4648 * var(--lpSetSize));
  position:absolute;
  top: calc(-16 * var(--lpSetSize));
  left: calc(-55.9316 * var(--lpSetSize));
  z-index: 1;
  pointer-events: none;
}
.feature .sec04 .text04 {
  width: calc(750 * var(--lpSetSize));
}
.feature .sec05 .text05 {
  width: calc(750 * var(--lpSetSize));
  margin: calc(30 * var(--lpSetSize)) 0 0 calc(2.0742 * var(--lpSetSize));
  position: relative;
  z-index: 0;
}
.feature .sec .text07 {
  width: calc(651.9102 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec .text08 {
  width: calc(651.9102 * var(--lpSetSize));
  margin: 0 auto;  
}


/* .sec01
----------------------------- */
.feature .sec h2 {
  width: calc(497.9473 * var(--lpSetSize));
  margin: 0 auto calc(50 * var(--lpSetSize));
}
.feature .sec .lead {
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: -0.020em;
  line-height: 2.0;
  text-align: center;
}
.feature .sec .motif_wrap01 {
  position: relative;
  background: url('../img/motif04.png') calc(40 * var(--lpSetSize)) calc(402 * var(--lpSetSize)) no-repeat;
  background-size: calc(668 * var(--lpSetSize));
  overflow: hidden;
}
.feature .sec .bg_wrap01 {
  background: url('../img/bg_net.svg') 0 0 repeat-y;
  background-size: calc(750 * var(--lpSetSize)) auto;
  padding: 0 0 calc(120 * var(--lpSetSize)) 0;  
}
.feature .sec .slide01 {
  width: calc(450 * var(--lpSetSize));
  margin: calc(-70 * var(--lpSetSize)) auto 0;
  padding: 0 0 calc(241 * var(--lpSetSize)) 0;
}
.feature .img01,
.feature .img02 {
  width: calc(450 * var(--lpSetSize));
  background: none;
}
.feature .sec .slide02 {
width: calc(750 * var(--lpSetSize));
}
.feature .img03 ,
.feature .img04 {
width: calc(750 * var(--lpSetSize));
}
.feature .img05 {
  width: calc(670 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .img06 {
  width: calc(603.75 * var(--lpSetSize));
  margin: 0 auto;
  background: url(../img/bg_img06.png) 0 0 no-repeat;
  background-size: contain;
}
.feature .motif_wrap02 {
  position: relative;
}
.feature .motif05 {
  width: calc(45.084 * var(--lpSetSize));
  left: calc(670 * var(--lpSetSize)); 
  top:calc(-80 * var(--lpSetSize));
  z-index: 1;  
}
.feature .motif06 {
  width: calc(44.9074 * var(--lpSetSize));
  left: calc(635 * var(--lpSetSize)); 
  top:calc(40 * var(--lpSetSize));
  z-index: 1;
}
.feature .motif07 {
  width: calc(44.9233 * var(--lpSetSize));
  left: calc(130 * var(--lpSetSize)); 
  top:calc(755 * var(--lpSetSize));
  z-index: 1;
}
.feature .motif08 {
  width: calc(45.0986 * var(--lpSetSize));
  left: calc(25 * var(--lpSetSize)); 
  top:calc(825 * var(--lpSetSize));
  z-index: 1;
}

/* .sec02
----------------------------- */
.feature .sec02 {
}
.feature .img07 {
  width: 100%;
}
.feature .motif_wrap03 {
  position: relative;
  background: #c8d791;
  overflow: hidden;
  padding-bottom: calc(120 * var(--lpSetSize));
}
.feature .slide03 {
  width: calc(670 * var(--lpSetSize));
  margin: calc(-40 * var(--lpSetSize)) auto 0;
}
.feature .img08,
.feature .img09 {
  width: calc(670 * var(--lpSetSize));
}
.feature .sec .sticky-content {
  position: relative;
  background: #eec5cb;
}
.feature .img10 {
  position: sticky;
  top: 80px;
  z-index: 1;
  width: 100%;
}
.feature .img11 {
  position: sticky;
  top: 0;
  z-index: 2;
  width: calc(580 * var(--lpSetSize));
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: calc(127.5 * var(--lpSetSize)) 0;
  background: none;
}
.feature .img11 a {
  border: #eec5cb calc(4 * var(--lpSetSize)) solid;
  background: #ffffff;
}
.feature .img11 a img { transition: opacity 0.3s;}
.feature .img11 a:hover {
  border: #eec5cb calc(4 * var(--lpSetSize)) solid;
  background: #ffffff;
  opacity: 1;
}
.feature .img11 a:hover img { opacity: .7; }

.feature .motif_wrap04 {
  position: relative;
  background: #f1d1d5;
  padding: calc(64 * var(--lpSetSize)) 0 calc(100 * var(--lpSetSize));
}
.feature .img12 {
  width: calc(630 * var(--lpSetSize));
  margin: calc(60 * var(--lpSetSize)) auto 0;
  background: url(../img/bg_img12.png) 0 0 no-repeat;
  background-size: contain;
}
.feature .motif09 {
  width: calc(44.6318 * var(--lpSetSize));
  left: calc(-3 * var(--lpSetSize)); 
  top:calc(920 * var(--lpSetSize));
  z-index: 1;
}
.feature .motif10 {
  width: calc(44.2514 * var(--lpSetSize));
  left: calc(85 * var(--lpSetSize)); 
  top:calc(1091 * var(--lpSetSize));
  z-index: 1;
}
.feature .motif11 {
  width: calc(45.0971 * var(--lpSetSize));
  left: calc(325 * var(--lpSetSize)); 
  top:calc(1180 * var(--lpSetSize));
  z-index: 1;
}
.feature .motif12 {
  width: calc(45.0676 * var(--lpSetSize));
  left: calc(465 * var(--lpSetSize)); 
  top:calc(1325 * var(--lpSetSize));
  z-index: 1;
}

/* .sec03
----------------------------- */
.feature .sec03 {
  padding: 0 0 calc(120 * var(--lpSetSize)) 0;
}
.feature .motif_wrap05 {
  position:relative;
}
.feature .img13 {
  width: 100%;
}
.feature .text06 {
  width: calc(711.7252 * var(--lpSetSize));
  position:absolute;
  top: calc(69 * var(--lpSetSize));
  left: calc(21 * var(--lpSetSize));
}
.feature .slide04 {
  margin: calc(80 * var(--lpSetSize)) 0 0 0;
}
.feature .img14,
.feature .img15 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 calc(40 * var(--lpSetSize)) 0 0;
}

/* .sec04
----------------------------- */
.feature .sec04 {
  background:#d4c5e0;
  padding-bottom: calc(100 * var(--lpSetSize));
}
.feature .motif_wrap06 {
  position:relative;
  overflow: hidden;
}
.feature .img16 {
  width: 100%;
  margin-bottom:calc(80 * var(--lpSetSize));
}
.feature .img17,
.feature .img18 {
  width: calc(640 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .motif_wrap07 {
  padding: calc(70 * var(--lpSetSize)) 0 0 0;
}
.feature .img19 {
  background: none;
  position: relative;
  height:calc(256 * var(--lpSetSize));
}
.feature .img19 li {
  position: absolute;
}
.feature .img19_1 {
  width: calc(189.9843 * var(--lpSetSize));
  left: calc(60 * var(--lpSetSize));
  top: calc(42 * var(--lpSetSize));
}
.feature .img19_1 img {
  transform: rotate(-10deg);
}
.feature .img19_2 {
  width: calc(193.8532 * var(--lpSetSize));
  left: calc(278.0734 * var(--lpSetSize));
  top: calc(-2 * var(--lpSetSize));
}
.feature .img19_3 {
  width: calc(198.263 * var(--lpSetSize));
  left: calc(496 * var(--lpSetSize));
  top: calc(41 * var(--lpSetSize));
}
.feature .img19_3 img {
  transform: rotate(10deg);
}

/* .sec05
----------------------------- */
.feature .img20 {
  width: 100%;
  margin-bottom: calc(62 * var(--lpSetSize));
}
.feature .img21 {
  width: calc(670 * var(--lpSetSize));
  margin: calc(60 * var(--lpSetSize)) auto 0;
}
.feature .sec .bg_wrap02 {
  padding: calc(40 * var(--lpSetSize)) 0 calc(150 * var(--lpSetSize)) 0;
  background: url('../img/bg_net.svg') left calc(430 * var(--lpSetSize)) no-repeat;
  background-size: calc(750 * var(--lpSetSize)) auto;
}
.feature .img22 {
  width: calc(640 * var(--lpSetSize));
  margin: calc(-40 * var(--lpSetSize)) auto 0;
  background: none;
  position: relative;
  z-index: 1;
}
.feature .img22 a {
  border:#c1e5ea calc(4 * var(--lpSetSize)) solid;
  background: #ffffff;
}
.feature .img22 a img { transition: opacity 0.3s;}
.feature .img22 a:hover {
  background: #ffffff;
  opacity: 1;
}
.feature .img22 a:hover img { opacity: .7; }

.feature .motif_wrap08 {
  position: relative;
}
.feature .motif13 {
  width: calc(45.084 * var(--lpSetSize));
  left:calc(620 * var(--lpSetSize));
  top:calc(1185.5303 * var(--lpSetSize));
}
.feature .motif14 {
  width: calc(44.9074 * var(--lpSetSize));
  left:calc(580 * var(--lpSetSize));
  top:calc(1305.5303 * var(--lpSetSize));  
}

/* .sec__btn */
.feature .sec .sec__btn {
  width: fit-content;
  margin: calc(70 * var(--lpSetSize)) auto calc(68 * var(--lpSetSize));
  font-family: "kepler-3-display-variable",sans-serif;
  font-variation-settings: 'wdth' 60, 'wght' 500;
  font-size: calc(140 * var(--lpSetSize));
  letter-spacing: 0.010em;
  color: #c8d791;
}
.feature .sec .sec__btn a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature .sec .sec__btn a img.btn {
  width: calc(296.1158 * var(--lpSetSize));
  margin-bottom:calc(50 * var(--lpSetSize));
}
.feature .sec .sec__btn a img.btn_txt {
  width: calc(520.5 * var(--lpSetSize));
}
.feature .sec .staff {
  text-align:center;
  color: #c8d791;
}
.feature .sec .staff dt {
  font-family: "filmotype-yale", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(100 * var(--lpSetSize));
  margin: 0 0 calc(16 * var(--lpSetSize)) calc(-20 * var(--lpSetSize));
}
.feature .sec .staff dd {
  font-family: "kepler-3-display-variable",sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: calc(30 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1.6;
}


/* credit
----------------------------- */
.feature .sec__credit {
  width:calc(670 * var(--lpSetSize));
  margin: 0 auto;
  padding: calc(34 * var(--lpSetSize)) 0 calc(68 * var(--lpSetSize)) 0;
}
.feature .sec__credit .credit {
  display:flex;
  gap: calc(20 * var(--lpSetSize));
}
.feature .credit04 .credit,
.feature .credit06 .credit,
.feature .credit09 .credit,
.feature .credit11 .credit {
  justify-content: center;
}
.feature .credit08 {
  width:calc(640 * var(--lpSetSize));
}
.feature .sec__credit .credit li {
  font-family: "kepler-3-display-variable",sans-serif;
  font-variation-settings: 'wdth' 80, 'wght' 400;
  font-size: calc(30 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1.6;
}
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
}
.feature .credit01 .credit li,
.feature .credit02 .credit li,
.feature .credit03 .credit li,
.feature .credit04 .credit li {
  color: #c8d791;
}
.feature .credit05 .credit li {
  color: #edf2da;
}
.feature .credit06 .credit li,
.feature .credit08 .credit li,
.feature .credit09 .credit li {
  color: #ffffff;
}
.feature .credit07 .credit li,
.feature .credit10 .credit li,
.feature .credit11 .credit li {
  color: #87cbda;
}
 
/* credit 曲線対応 */
.feature .credit_span {
  position: absolute;
  top: 0; 
  left: 0;
  --lpCredit01: 1925;
}
.feature .credit_span .credit {
  position: relative;
}
.feature .credit_span li.item span {
  position: absolute;
}
.feature .credit01.credit_span li.item span:nth-of-type(1) {
  left: calc(198.3286 * var(--lpSetSize));
  top: calc((2600 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(45deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(2) {
  left: calc(207 * var(--lpSetSize));
  top: calc((2611 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(44deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(3) {
  left: calc(216 * var(--lpSetSize));
  top: calc((2619 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(43deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(4) {
  left: calc(224 * var(--lpSetSize));
  top: calc((2625 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(41deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(5) {
  left: calc(230 * var(--lpSetSize));
  top: calc((2634 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(39deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(6) {
  /* left: calc(228 * var(--lpSetSize)); */
  /* top: calc((2653 - var(--lpCredit01)) * var(--lpSetSize)); */
  /* transform: rotate(39deg); */
}
.feature .credit01.credit_span li.item span:nth-of-type(7) {
  left: calc(249 * var(--lpSetSize));
  top: calc((2646 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(36deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(8) {
  left: calc(261 * var(--lpSetSize));
  top: calc((2650 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(34deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(9) {
  left: calc(264 * var(--lpSetSize));
  top: calc((2655 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(30deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(10) {
  left: calc(274 * var(--lpSetSize));
  top: calc((2661 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(24deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(11) {
  left: calc(285 * var(--lpSetSize));
  top: calc((2665 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(20deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(12) {
  left: calc(299 * var(--lpSetSize));
  top: calc((2668 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(18deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(13) {
  left: calc(309 * var(--lpSetSize));
  top: calc((2672 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(16deg);
}
.feature .credit01.credit_span li.item span:nth-of-type(14) {
  left: calc(319 * var(--lpSetSize));
  top: calc((2675 - var(--lpCredit01)) * var(--lpSetSize));
  transform: rotate(14deg);
}


/*****************************************************
animation
*****************************************************/
/* .js_fadeup (.hero)
----------------------------- */
.feature .hero .js_fadeup {
  transform: translateY(5%);
  filter: blur(5px);
  opacity: 0;  
  transition: all 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.feature .hero.is_show .js_fadeup {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
}

/* .js_typing (.hero)
----------------------------- */
.feature .hero ul.js_typing li {
  opacity: 0;
  transition: 0s;
}
.feature .hero.is_show ul.js_typing li:nth-child(1) {
  opacity: 1;
  transition-delay: 1.5s;
}
.feature .hero.is_show ul.js_typing li:nth-child(2) {
  opacity: 1;
  transition-delay: 1.8s;
}
.feature .hero.is_show ul.js_typing li:nth-child(3) {
  opacity: 1;  
  transition-delay: 2.1s;
}

/* .js_fadein (.hero)
----------------------------- */
.feature .hero .js_fadein {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.feature .hero.is_show .js_fadein {
  opacity: 1;
  transition-delay: 0.5s;
}


/* .js_typing (.sec)
----------------------------- */
.feature .sec ul.js_typing.js_anime li {
  opacity: 0;
  transition: 0s;
}
.feature .sec ul.js_typing.js_anime.is_show li:nth-child(1) {
  opacity: 1;
  transition-delay: 0s;
}
.feature .sec ul.js_typing.js_anime.is_show li:nth-child(2) {
  opacity: 1;
  transition-delay: 0.3s;
}
.feature .sec ul.js_typing.js_anime.is_show li:nth-child(3) {
  opacity: 1;  
  transition-delay: 0.6s;
}
.feature .sec ul.js_typing.js_anime.is_show li:nth-child(4) {
  opacity: 1;  
  transition-delay: 0.9s;
}

/* .js_fadeup (.sec)
----------------------------- */
.feature .sec .js_fadeup {
  transform: translateY(12%);
  filter: blur(5px);
  opacity: 0;
  transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.feature .sec .js_fadeup.is_show {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
}

.feature .sec .js_anime.--1.is_show {
  transition-delay: 0.3s;
}
.feature .sec .js_anime.--2.is_show {
  transition-delay: 0.6s;
}
.feature .sec .js_anime.--3.is_show {
  transition-delay: 0.9s;
}


/* .js_fadein (.sec)
----------------------------- */
.feature .sec .js_anime.js_fadein {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.feature .sec .js_anime.js_fadein.is_show {
  opacity: 1;
}


/*****************************************************
レスポンシブ対応 (PC ONLY)
*****************************************************/
@media screen and (min-width: 1400px) { 
  :root {
    --lpSetSize: 1px * 0.68;
  }
  .feature .f_left,
  .feature .f_right {
    width: calc((100% - 510px) / 2);
  }
  .feature .f_main {
    width: 510px;
  }
  .feature .f_left .f_left__title {
    width: 261.24px;
  }
  .feature .f_right .f_right__btn a img.btn {
    width: 127.922px;
    margin-bottom:24.5631px;
  }
  .feature .f_right .f_right__btn a img.btn_txt {
    width: 224.856px;
  }
}