@charset "UTF-8";

.feature {
  --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: #80afca;
  background: #efe1e7;
}
.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: #ead8df;}
.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_main {
  width: calc(510 * (100vw / 1400));
  background: #ead8df;
}

/* .f_left__box / .f_right__box
----------------------------- */
.feature .f_left .f_left__box {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url("../img/pc_motif01.png") left bottom no-repeat;
  background-size: calc(270 * (100vw / 1400)) calc(190 * (100vw / 1400));
}
.feature .f_left .f_left__title {
  width: calc(278.3943 * (100vw / 1400));
  margin: 0 auto;
}

.feature .f_right .f_right__box {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url("../img/pc_motif02.png") right top no-repeat;
  background-size: calc(210 * (100vw / 1400)) calc(230 * (100vw / 1400));
}
.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(96 * (100vw / 1400));
  margin-bottom:calc(10 * (100vw / 1400));
}
.feature .f_right .f_right__btn a span {
  font-family: "ivyora-display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(34 * (100vw / 1400));
  letter-spacing: 0.025em;
  display: inline-block;
  border-bottom: 1px solid #80afca;
}

/*****************************************************
.feature (PC・SP共通)
*****************************************************/
.feature .motif_wrap {
  position: relative;
}
.feature .motif {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.feature .motif01 {
  width: calc(210 * var(--lpSetSize));
}
.feature .motif02 {
  width: calc(250 * var(--lpSetSize));
}


/* .hero
----------------------------- */
.feature .hero {
  position: relative;
  margin-bottom: calc(40 * var(--lpSetSize));
}
.feature .hero .hero_txt {
  width: calc(523.791 * var(--lpSetSize));
  position:absolute;
  left: calc(113.5972 * var(--lpSetSize));
  top:calc(36.631 * var(--lpSetSize));
  z-index: 1;
}
.feature .hero .hero_img {
  width: 100%;
  position: relative;
  z-index: 0;
}
.feature .hero .motif_wrap_hero {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.feature .hero .motif_wrap_hero > div {
  position: relative;
  width: calc(750 * var(--lpSetSize));
  height: calc(1110 * var(--lpSetSize));;
}
.feature .hero .motif01 {
  right: 0 ; 
  top:calc(110.2914 * var(--lpSetSize));
}
.feature .hero .motif02 {
  left: 0; 
  top:calc(895.2914 * var(--lpSetSize));
}


/* .sec
----------------------------- */
.feature .lead {
  position: relative;
  padding-top: calc(130 * var(--lpSetSize));
  margin-bottom: calc(106 * var(--lpSetSize));
}
.feature .lead p {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size:calc(26 * var(--lpSetSize));
  line-height: 2.0;
  text-align:center;
}
.feature .lead .motif03 {
  left:calc(318.4256 * var(--lpSetSize));
  top: 0;
  width: calc(113.1488 * var(--lpSetSize));
}

.feature .text03 {
  display:flex;
  justify-content: space-between;
}
.feature .text03 p {
  font-family: "ivyora-display", serif;
  font-weight: 400;
  font-style: normal;
  font-size:calc(24 * var(--lpSetSize));
  letter-spacing: 0.050em;
  line-height: 1;
  padding: calc(14 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) 0;
}

.feature .img01 {
  margin-bottom: calc(100 * var(--lpSetSize));
}

.feature .img02 {
  margin-bottom: calc(100 * var(--lpSetSize));
}

.feature .motif_wrap02 {
  position: relative;
}
.feature .motif_wrap02 .motif01 {
  right: 0 ; 
  top:calc(-126 * var(--lpSetSize));
}
.feature .motif_wrap02 .motif02 {
  left: 0; 
  top:calc(645 * var(--lpSetSize));
}
.feature .img03 {
  width: calc(580 * var(--lpSetSize));
  margin: 0 auto;
}

.feature .motif_wrap03 {
  position: relative;
}
.feature .sticky_wrap .motif_wrap03  {
  position:sticky;
  top: calc(80px + (50 * var(--lpSetSize)));
  z-index:1;
}
.feature .img05 {
  position: relative;
  z-index:1;
}

.feature .text04 {
  text-align: center;
  padding-top: calc(30 * var(--lpSetSize));
  margin-bottom: calc(34 * var(--lpSetSize));
}
.feature .text04 p:first-of-type {
  font-family: "ivyora-display", serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(70 * var(--lpSetSize));
  margin-bottom: calc(14 * var(--lpSetSize));
}
.feature .text04 p:last-child {
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
}

.feature .motif_wrap04 {
  position: relative;
}
.feature .img06 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: none;
}
.feature .motif_wrap04 .motif01 {
  right: 0 ; 
  top:calc(-51 * var(--lpSetSize));
  z-index: 0;
}
.feature .motif_wrap04 .motif02 {
  left: 0; 
  top:calc(389 * var(--lpSetSize));
  z-index: 2;
}

.feature .sec__slide,
.feature .img07,
.feature .img08 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 auto;
}

.feature .motif_wrap05 {
  padding-top: calc(50 * var(--lpSetSize))
}

.feature .motif_wrap06 {
  position: relative;  
}
.feature .img11 {
  width: calc(500 * var(--lpSetSize));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: none;
}
.feature .motif_wrap06 .motif01 {
  right: 0; 
  top:calc(-54 * var(--lpSetSize));
  z-index: 0;
}
.feature .motif_wrap06 .motif02 {
  left: 0; 
  top:calc(386 * var(--lpSetSize));
  z-index: 2;
}

.feature .motif_wrap07 {
  padding-top: calc(50 * var(--lpSetSize))
}

.feature .motif_wrap09 {
  margin-bottom: calc(40 * var(--lpSetSize));
}
.feature .motif_wrap09 .motif03 {
  left:calc(402.2233 * var(--lpSetSize));
  top:calc(937 * var(--lpSetSize));
  width: calc(135.7785 * var(--lpSetSize));
}

.feature .text02 {
  margin-bottom:calc(20 * var(--lpSetSize));
}

.feature .motif_wrap10 {
  position: relative;
}
.feature .sticky_wrap .motif_wrap10  {
  position:sticky;
  top: calc(80px + (50 * var(--lpSetSize)));
  z-index:1;
}
.feature .img17 {
  position: relative;
  z-index:1;
}

.feature .motif_wrap11 {
  position: relative;
  margin-bottom: calc(50 * var(--lpSetSize));
}
.feature .img18 {
  width: calc(630 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .motif_wrap11 .motif01 {
  right: 0 ; 
  top:calc(-68.5 * var(--lpSetSize));
}
.feature .motif_wrap11 .motif02 {
  left: 0; 
  top:calc(769.5 * var(--lpSetSize));
}

.feature .motif_wrap12 {
  position: relative;
  margin-top:calc(14 * var(--lpSetSize));
}
.feature .motif_wrap12 .motif02 {
  left: 0; 
  top:calc(572 * var(--lpSetSize));
}


/* .sec__btn */
.feature .sec_bottom .sec__btn {
  margin-bottom: calc(90 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature .sec_bottom .sec__btn .btn {
  width: calc(240 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn span {
  font-family: "ivyora-display", serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(70 * var(--lpSetSize));
  letter-spacing: 0.025em;
  display: inline-block;
  border-bottom: calc(2 * var(--lpSetSize)) solid #80afca;
}
.feature .sec_bottom .staff {
  text-align:center;
  padding-bottom: calc(120 * var(--lpSetSize));
}
.feature .sec_bottom .staff dt {
  font-family: "ivyora-display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(46 * var(--lpSetSize));
  letter-spacing: 0.050em;
  margin-bottom: calc(20 * var(--lpSetSize));
}
.feature .sec_bottom .staff dd {
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 2.0;
}

/* credit
----------------------------- */
.feature .sec__credit {
  width:calc(700 * var(--lpSetSize));
  margin: 0 auto;
  padding: calc(30 * var(--lpSetSize)) 0 calc(140 * var(--lpSetSize)) 0;
}
.feature .sec__credit .credit {
  display:flex;
  gap: 0 calc(30 * var(--lpSetSize));
  flex-wrap: wrap;
  justify-content: center;
}
.feature .sec__credit .credit li {
  font-family: "univers-next-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.050em;
  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 a {
  text-decoration:underline;
}

 
/* credit 曲線対応
----------------------------- */
.feature .motif_wrap08,
.feature .motif_wrap09 {
  position: relative;
}
.feature .credit_span {
  position: absolute;
  left: 0;
  top: 0;
  --lpCredit08: 0; /* .credit08用 */
  --lpCredit09: 1000; /* .credit09用 */
  width: 100%;
}
.feature .credit_span .credit {
  display: block;
}
.feature .credit_span li.item {
  position: relative;
}
.feature .credit_span li.item span {
  position: absolute;
}

/* .credit08用 */
.feature .credit08.credit_span li.item span:nth-of-type(1) {
  left: calc(514 * var(--lpSetSize));
  top: calc((23 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(45deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(2) {
  left: calc(528 * var(--lpSetSize));
  top: calc((32 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(46deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(3) {
  left: calc(532 * var(--lpSetSize));
  top: calc((38 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(47deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(4) {
  left: calc(541 * var(--lpSetSize));
  top: calc((49 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(48deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(5) {
  left: calc(550 * var(--lpSetSize));
  top: calc((61 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(50deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(6) {
  left: calc(561 * var(--lpSetSize));
  top: calc((70 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(51deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(7) {
  left: calc(570 * var(--lpSetSize));
  top: calc((81 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(53deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(8) {
}
.feature .credit08.credit_span li.item span:nth-of-type(9) {
  left: calc(579 * var(--lpSetSize));
  top: calc((97 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(54deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(10) {
  left: calc(591 * var(--lpSetSize));
  top: calc((105 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(55deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(11) {
  left: calc(593 * var(--lpSetSize));
  top: calc((116 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(55deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(12) {
  left: calc(600 * var(--lpSetSize));
  top: calc((128 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(58deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(13) {
  left: calc(607 * var(--lpSetSize));
  top: calc((142 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(58deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(14) {
  left: calc(616 * var(--lpSetSize));
  top: calc((155 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(59deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(15) {
  left: calc(620 * var(--lpSetSize));
  top: calc((167 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(60deg);
}
.feature .credit08.credit_span li.item span:nth-of-type(16) {
  left: calc(625 * var(--lpSetSize));
  top: calc((180 - var(--lpCredit08)) * var(--lpSetSize));
  transform: rotate(64deg);
}

/* .credit09用 */
.feature .credit09.credit_span li.item span:nth-of-type(1) {
  left: calc(97 * var(--lpSetSize));
  top: calc((1170 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(
-67deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(2) {
  left: calc(104 * var(--lpSetSize));
  top: calc((1159 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-62deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(3) {
  left: calc(111 * var(--lpSetSize));
  top: calc((1147 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-60deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(4) {
  left: calc(118 * var(--lpSetSize));
  top: calc((1136.5 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-61deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(5) {
  left: calc(126 * var(--lpSetSize));
  top: calc((1124 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-57deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(6) {
}
.feature .credit09.credit_span li.item span:nth-of-type(7) {
  left: calc(138 * var(--lpSetSize));
  top: calc((1104 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-57deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(8) {
  left: calc(150 * var(--lpSetSize));
  top: calc((1095 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-45deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(9) {
  left: calc(153 * var(--lpSetSize));
  top: calc((1086 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-52deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(10) {
  left: calc(163 * var(--lpSetSize));
  top: calc((1074 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-45deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(11) {
  left: calc(172 * var(--lpSetSize));
  top: calc((1063 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-48deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(12) {
  left: calc(182 * var(--lpSetSize));
  top: calc((1051 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-45deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(13) {
  left: calc(192 * var(--lpSetSize));
  top: calc((1041 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-45deg);
}
.feature .credit09.credit_span li.item span:nth-of-type(14) {
  left: calc(202 * var(--lpSetSize));
  top: calc((1031 - var(--lpCredit09)) * var(--lpSetSize));
  transform: rotate(-45deg);
}


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

/* .js_fadein_star (.hero)
----------------------------- */
.feature .hero .js_fadein_star {
  opacity: 0;
  transform: translateY(-10%);
  transition: 1.5s;
}
.feature .hero .js_fadein_star.is_show {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.0s;
}

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

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


/*****************************************************
レスポンシブ対応 (PC ONLY)
*****************************************************/
@media screen and (min-width: 1400px) { 
  .feature {
    --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__box {
    background: url("../img/pc_motif01.png") left bottom no-repeat;
    background-size: 270px 190px;
  }
  .feature .f_left .f_left__title {
    width: 278.3943px;
  }
  .feature .f_right .f_right__box {
    background: url("../img/pc_motif02.png") right top no-repeat;
    background-size: 210px 230px;
  }
  .feature .f_right .f_right__btn a img.btn {
    width: 96px;
    margin-bottom:10px;
  }
  .feature .f_right .f_right__btn a span {
    font-size: 34px;
  }
}