@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400) * 0.68;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top: 80px;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt";
  color: #000000;
}
.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;  
  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;
}
.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));
}

/* .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(200 *(100vw / 1400));
}
.feature .f_right .f_right__btn {
  width: calc(300 *(100vw / 1400));
}
.feature .f_left .f_left__title,
.feature .f_right .f_right__btn {
  margin: 0 auto;
}
.feature .f_right .f_right__btn a {
  position: relative;
}
.feature .f_right .f_right__btn .btn_motif {
  position: absolute;
  top:0;
  left:0;
}


/*****************************************************
container
*****************************************************/
.feature {
  background: #a8d8ef;
}
.feature .f_main {
  overflow: hidden;
}

/* .hero
----------------------------- */
.feature .hero {
  margin-bottom: calc(64 * var(--lpSetSize));
}

/* video */
.feature .hero .video_wrap {
  position:relative;
}
.feature .hero .video_wrap video {
  display: block;
  width: 100% !important;
  height: auto;
  min-height: calc(1300 * var(--lpSetSize));
}
.feature .hero .video_wrap .btn_sound {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  width: calc(156.93 * var(--lpSetSize));
  height: calc(41.6 * var(--lpSetSize));
}
.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 .hero__title {
  width: calc(360 * var(--lpSetSize));
  margin: 0 0 0 calc(184 * var(--lpSetSize));
  padding: calc(111 * var(--lpSetSize)) 0 calc(90 * var(--lpSetSize));
}
.feature .hero .lead p {
  color: #ffffff;
  text-align: center;
  /* padding-bottom: calc(00 * var(--lpSetSize)); */
}
.feature .hero .lead p span {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size:calc(30 * var(--lpSetSize));
  letter-spacing: 0.075em;
}
.feature .hero .lead p strong {
  font-family: "aptly", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size:calc(70 * var(--lpSetSize));
  letter-spacing: 0.04em;
  line-height: 2.0;
}


/* .sec
----------------------------- */
.feature .bg_w,
.feature .sec__img {
  background: #ffffff;
}
.feature .motif,
.feature .ball {
  pointer-events: none;
}
.feature .ball {
  position: absolute;
  width: calc(80 * var(--lpSetSize));
  height: calc(80 * var(--lpSetSize));
  background: #ffe33f;
  border-radius: 50%;
  z-index: 1;
}
.feature .sec__slide figure {
  margin: 0 calc(10 * var(--lpSetSize));
}


/* .motif_wrap01 ----- */
.feature .motif_wrap01 ul {
  display: flex;
  gap: calc(50 * var(--lpSetSize));
  margin-bottom: calc(120 * var(--lpSetSize));
  justify-content: center;
}
.feature .motif01 {
  width: calc(61.1996 * var(--lpSetSize));
}
.feature .motif02 {
  width: calc(61.1986 * var(--lpSetSize));
}
.feature .motif03 {
  width: calc(60.4574 * var(--lpSetSize));
}

/* .motif_wrap02 ----- */
.feature .motif_wrap02 {
  width: calc(610 * var(--lpSetSize));
  position: relative;
  margin: 0 auto calc(140 * var(--lpSetSize));
}
.feature .motif04 {
  width: calc(610 * var(--lpSetSize));
  position: absolute;
  top: 0;
  left: 0;
}
.feature .img01 {
  width: calc(610 * var(--lpSetSize));
}

/* .motif_wrap03 ----- */
.feature .motif_wrap03 {
  position: relative;
}
.feature .motif05 {
  width: calc(818.5806 * var(--lpSetSize));
  position: absolute;
  top: calc(-58 * var(--lpSetSize));;
  left: calc(-23.129 * var(--lpSetSize));;
}
.feature .img02 {
  width: 100%;
  margin-bottom: calc(150 * var(--lpSetSize));
} 
.feature .img03,
.feature .img04 {
  width: calc(610 * var(--lpSetSize));
}

/* .ball ----- */
.feature .motif_wrap03 .ball01 {
  top:calc(-58.4677 * var(--lpSetSize));
  left:calc(232.3548 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball02 {
  top:calc(97.3065 * var(--lpSetSize));
  left:calc(693.7742 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball03 {
  top:calc(451.1774 * var(--lpSetSize));
  left:calc(601.4516 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball04 {
  top:calc(678.8258 * var(--lpSetSize));
  left:calc(-23.129 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball05 {
  top:calc(835.8871 * var(--lpSetSize));
  left:calc(715.4516 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball06 {
  top:calc(1059.729 * var(--lpSetSize));
  left:calc(190.5484 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball07 {
  top:calc(1248.5968 * var(--lpSetSize));
  left:calc(70.3548 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball08 {
  top:calc(1429.0193 * var(--lpSetSize));
  left:calc(434.4194 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball09 {
  top:calc(1659.6935 * var(--lpSetSize));
  left:calc(579 * var(--lpSetSize));
}
.feature .motif_wrap03 .ball10 {
  top:calc(2133.4355 * var(--lpSetSize));
  left:calc(21.7742 * var(--lpSetSize));
}
.feature .motif_wrap03 .pingu {
  position: absolute;
  width: calc(90.6861 * var(--lpSetSize));  
  top:calc(214.8468 * var(--lpSetSize));
  left:calc(109.3038 * var(--lpSetSize));
  pointer-events: none;
}
.feature .motif_wrap03 .pinga {
  position: absolute;
  width: calc(70 * var(--lpSetSize));
  top:calc(915 * var(--lpSetSize));
  left:calc(583.1821 * var(--lpSetSize));
  pointer-events: none;
}


/* .motif_wrap04 ----- */
.feature .bg_wrap01 {
  position: relative;
  background: linear-gradient(180deg, #a8d8ef 0%, #a8d8ef calc(1125 * var(--lpSetSize)), #ffffff calc(1125 * var(--lpSetSize)), #ffffff 100%);
}
.feature .motif_wrap04 {
  position: relative;  
}
.feature .img05 {
  width: 100%;
  margin-bottom: calc(120 * var(--lpSetSize));  
}
.feature .img06 {
  width: calc(560 * var(--lpSetSize));
  position: relative;
  margin-bottom: calc(40 * var(--lpSetSize));
}
.feature .img06::after {
  content: '';
  display: block;
  width: calc(555 * var(--lpSetSize));
  height: calc(830 * var(--lpSetSize));
  border-top: calc(5 * var(--lpSetSize)) #a8d8ef solid;
  border-right: calc(5 * var(--lpSetSize)) #a8d8ef solid;
  border-bottom: calc(5 * var(--lpSetSize)) #a8d8ef solid;
  position: absolute;
  top:0;
  left:0;
  pointer-events: none;  
}
.feature .motif06 {
  width: calc(693.9355 * var(--lpSetSize));
  position: absolute;
  top: calc(617.8387 * var(--lpSetSize));
  left: calc(26.2581 * var(--lpSetSize));
}
.feature .img07 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 0 calc(60 * var(--lpSetSize)) calc(50 * var(--lpSetSize));
}

/* .motif_wrap05 ----- */
.feature .motif_wrap05 ul {
  display: flex;
  gap: calc(40 * var(--lpSetSize));
  margin-bottom: calc(80 * var(--lpSetSize));
  justify-content: center;
}
.feature .motif07 {
  width: calc(200 * var(--lpSetSize));
}
.feature .motif08 {
  width: calc(200 * var(--lpSetSize));
}

.feature .img08 {
  width: calc(480 * var(--lpSetSize));
  margin: 0 auto;
}

/* .motif_wrap06 ----- */
.feature .motif_wrap06 {
  position: relative;
  width: calc(700 * var(--lpSetSize));
  margin:0 auto;  
}
.feature .img09 a {
  display: flex;
}
.feature .img09 img { 
  width: calc(350 * var(--lpSetSize));
}
.feature .motif09 {
  width: calc(700 * var(--lpSetSize));
  position: absolute;
  top:0;
  left:0;
}

/* .motif_wrap07 ----- */
.feature .motif_wrap07 {
  position: relative;
  padding: calc(100 * var(--lpSetSize)) 0 calc(110 * var(--lpSetSize));
}
.feature .motif10 {
  width: calc(132.1299 * var(--lpSetSize));
  position: absolute;  
  top: calc(-68.25 * var(--lpSetSize));
  left: calc(477.8701 * var(--lpSetSize));  
}
.feature .img10,
.feature .img11 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 auto;
}

/* .motif_wrap08 ----- */
.feature .motif_wrap08 {
  position: relative;
  padding: 0 0 calc(110 * var(--lpSetSize)) 0;
}
.feature .img12 {
  width: calc(544 * var(--lpSetSize));
  margin: 0 0 0 calc(218 * var(--lpSetSize));
  padding: calc(8 * var(--lpSetSize));
  background: none;
  border: calc(4 * var(--lpSetSize)) solid #ffffff;
}
.feature .img12 a {
  background: #ffffff !important;
  display: block;
  overflow: hidden;
  height: calc(780 * var(--lpSetSize));
}
.feature .img12 img {
  width: calc(522 * var(--lpSetSize));
}
.feature .motif11 {
  width: calc(150 * var(--lpSetSize));
  position: absolute;
  top: calc(-59.7871 * var(--lpSetSize));
  left: calc(28 * var(--lpSetSize));  
}

/* .motif_wrap09 ----- */
.feature .motif_wrap09 ul {
  display: flex;
  gap: calc(50 * var(--lpSetSize));
  margin-bottom: calc(110 * var(--lpSetSize));
  justify-content: center;
}
.feature .motif12 {
  width: calc(61.1062 * var(--lpSetSize));
}
.feature .motif13 {
  width: calc(61.1996 * var(--lpSetSize));
}
.feature .motif14 {
  width: calc(89.8109 * var(--lpSetSize));
}

/* .img13 ----- */
.feature .img13 {
  width: calc(700 * var(--lpSetSize));
  margin: 0 auto;
}

/* .motif_wrap10 ----- */
.feature .motif_wrap10 {
  position: relative;
}
.feature .motif15 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;  
}
.feature .img14 {
  width: 100%;
}

/* .motif_wrap11 ----- */
.feature .motif_wrap11 {
  position: relative;
  padding: calc(220 * var(--lpSetSize)) 0 0 0;
}
.feature .motif16 {
  width: calc(300 * var(--lpSetSize));
  position: absolute;
  top: calc(65 * var(--lpSetSize)); 
  left: calc(25.183 * var(--lpSetSize)); 
}
.feature .img15 {
  width: calc(590 * var(--lpSetSize));
  margin: 0 auto calc(120 * var(--lpSetSize));
}

/* .motif_wrap12 ----- */
.feature .motif_wrap12 {
  position: relative;
}
.feature .img16 {
  width: calc(540 * var(--lpSetSize));
  margin-bottom: calc(80 * var(--lpSetSize));
}
.feature .img17 {
  width: calc(640 * var(--lpSetSize));
  margin: 0 0 0 calc(111 * var(--lpSetSize));
}
.feature .motif17 {
  width: calc(712.2963 * var(--lpSetSize));
  position: absolute;
  top:calc(385.7097 * var(--lpSetSize));
  left: calc(7.129 * var(--lpSetSize));
}

/* .motif_wrap13 ----- */
.feature .motif_wrap13 {
  position: relative;
}
.feature .img18 {
  width: 100%;
}
.feature .motif18 {
  width: calc(583.3652 * var(--lpSetSize));
  position: absolute;
  top:calc(332.2251 * var(--lpSetSize));
  left: calc(93.7168 * var(--lpSetSize)); 
}

/* .motif_wrap14 ----- */
.feature .motif_wrap14 {
  position: relative;
  padding-top: calc(200 * var(--lpSetSize));
}
.feature .motif19 {
  width: calc(220 * var(--lpSetSize));
  position: absolute;  
  top:calc(-91 * var(--lpSetSize));
  left: calc(500 * var(--lpSetSize));
}
.feature .img19,
.feature .img20 {
  width: calc(550 * var(--lpSetSize));
}

/* .motif_wrap15 ----- */
.feature .motif_wrap15 ul {
  display: flex;
  gap: calc(50 * var(--lpSetSize));
  margin-bottom: calc(140 * var(--lpSetSize));
  justify-content: center;
}
.feature .motif20 {
  width: calc(74.5367 * var(--lpSetSize));
}
.feature .motif21 {
  width: calc(61.8729 * var(--lpSetSize));
}
.feature .motif22 {
  width: calc(61.1985 * var(--lpSetSize));
}

/* .motif_wrap16 ----- */
.feature .motif_wrap16 {
  position: relative;
}
.feature .motif23 {
  width: calc(258.414 * var(--lpSetSize));
  position: absolute;  
  top:calc(142.6448 * var(--lpSetSize));
  left: calc(93.6079 * var(--lpSetSize));
}
.feature .img21 {
  width: 100%;
}

/* .motif_wrap17 ----- */
.feature .motif_wrap17 {
  position: relative;
  padding-top: calc(140 * var(--lpSetSize));
}
.feature .motif24 {
  width: calc(686.9983 * var(--lpSetSize));
  position: absolute;  
  top:calc(15.0645 * var(--lpSetSize));
  left: calc(27.7 * var(--lpSetSize));
}
.feature .img22 {
  width: calc(650 * var(--lpSetSize));
  margin: 0 0 calc(60 * var(--lpSetSize)) calc(100 * var(--lpSetSize));
}

/* .bg_wrap ----- */
.feature .bg_wrap02 {
  position: relative;
  background: linear-gradient(180deg, #a8d8ef 0%, #a8d8ef calc(450 * var(--lpSetSize)), #ffffff calc(450 * var(--lpSetSize)), #ffffff 100%);
}
.feature .img23 {
  width: calc(610 * var(--lpSetSize));
  margin: 0 0 0 calc(-11 * var(--lpSetSize));
}

/* .img24 ----- */
.feature .img24 {
  width: calc(551 * var(--lpSetSize));
  margin: 0 auto;
}


/* .motif_wrap18 ----- */
.feature .motif_wrap18 {
  position: relative;
  padding-bottom: calc(200 * var(--lpSetSize));
}
.feature .img25 {
  width: calc(711 * var(--lpSetSize));
  margin: 0 0 calc(120 * var(--lpSetSize)) calc(40 * var(--lpSetSize));
}
.feature .img26,
.feature .img27 {
  width: calc(600 * var(--lpSetSize));
}

/* .ball ----- */
.feature .motif_wrap18 .ball01 {
  top:calc(-55 * var(--lpSetSize));
  left:calc(117.5806 * var(--lpSetSize));
}
.feature .motif_wrap18 .ball02 {
  top:calc(113.0645 * var(--lpSetSize));
  left:calc(458.6129 * var(--lpSetSize));
}
.feature .motif_wrap18 .ball03 {
  top:calc(265.3226 * var(--lpSetSize));
  left:calc(699 * var(--lpSetSize));
}
.feature .motif_wrap18 .ball04 {
  top:calc(478.0645 * var(--lpSetSize));
  left:calc(628.5484 * var(--lpSetSize));
}
.feature .motif_wrap18 .ball05 {
  top:calc(600.7097 * var(--lpSetSize));
  left:calc(-15.5806 * var(--lpSetSize));
}
.feature .motif_wrap18 .ball06 {
  top:calc(1151 * var(--lpSetSize));
  left:calc(403.6452 * var(--lpSetSize));
}
.feature .motif_wrap18 .ball07 {
  top:calc(1392.0322 * var(--lpSetSize));
  left:calc(532.5484 * var(--lpSetSize));
}
.feature .motif_wrap18 .ball08 {
  top:calc(2029.0645 * var(--lpSetSize));
  left:calc(32.8387 * var(--lpSetSize));
}
.feature .motif_wrap18 .pingu {
  position: absolute;
  width: calc(80 * var(--lpSetSize));  
  top:calc(52.3109 * var(--lpSetSize));
  left:calc(597.4633 * var(--lpSetSize));
  pointer-events: none;
}
.feature .motif_wrap18 .pinga {
  position: absolute;
  width: calc(70 * var(--lpSetSize));
  top:calc(856.8639 * var(--lpSetSize));
  left:calc(149.0028 * var(--lpSetSize));
  pointer-events: none;
}


/* .motif_wrap19 ----- */
.feature .motif_wrap19 {
  position: relative;
}
.feature .img28 {
  width: calc(660 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .motif26 {
  position: absolute;  
  width: calc(315.0965 * var(--lpSetSize));
  top:calc(73.8047 * var(--lpSetSize));
  left:calc(325.3562 * var(--lpSetSize));  
}

/* .sec_cafe
----------------------------- */
.feature .sec_cafe {
  margin-bottom: calc(54 * var(--lpSetSize));
  padding-bottom: calc(146 * var(--lpSetSize));
  background: url(../img/line.png) left bottom no-repeat;
  background-size: 100% auto;
}

/* .motif_wrap20 ----- */
.feature .motif_wrap20 {
  position: relative;
  margin-bottom: calc(54 * var(--lpSetSize));
}
.feature .motif27 {
  width: calc(280 * var(--lpSetSize));
  position: absolute;  
  top: 0;
  left: calc(235 * var(--lpSetSize));
}
.feature .motif28 {
  width: 100%;
  position: absolute;
  top: calc(178 * var(--lpSetSize));
  left: 0;
}
.feature .motif28 h2 {
  font-family: "aptly", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: calc(90 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1.25;
  color: #4079a0;
  text-align: center;
}
.feature .img29 {
  width: 100%;
  padding-top: calc(102 * var(--lpSetSize));
}


/* .txt ----- */
.feature .sec_cafe .txt {
  margin-bottom: calc(60 * var(--lpSetSize));
  padding: calc(66 * var(--lpSetSize)) 0;
  background-image: url(../img/line.png), url(../img/line.png);
  background-position: top left, bottom left;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.050em;
  line-height: 1;
  text-align: center;
  color: #e6290f;
}
.feature .sec_cafe .txt .txt01 {
  font-size: calc(24 * var(--lpSetSize));
  margin-bottom: calc(25 * var(--lpSetSize));
}
.feature .sec_cafe .txt .txt02 {
  font-size: calc(52 * var(--lpSetSize));
  letter-spacing: 0.050em;
  margin-bottom: calc(45 * var(--lpSetSize));
}
.feature .sec_cafe .txt .txt03 {
  font-size: calc(28 * var(--lpSetSize));
  letter-spacing: 0.050em;
}

/* .lead ----- */
.feature .sec_cafe .lead {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(26 * var(--lpSetSize));
  letter-spacing: 0.050em;
  line-height: 2.0;
  text-align: center;
  color: #ffffff;
  margin-bottom: calc(90 * var(--lpSetSize));
}

/* .loop_slide ----- */
.feature .loop_slide {
  margin-bottom: calc(200 * var(--lpSetSize));
}
.feature .loop_slide .splide__slide {
  width: calc(320 * var(--lpSetSize));
  margin-left: calc(15 * var(--lpSetSize));
}


/* .motif_wrap21 ----- */
.feature .motif_wrap21 {
  position: relative;
}
.feature .motif_wrap21 p {
  font-family: "aptly", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: calc(90 * var(--lpSetSize));
  letter-spacing: 0.025em;
  line-height: 1.0;
  color: #ffffff;
}
.feature .motif_wrap21 ul {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(24 * var(--lpSetSize));
  letter-spacing: 0.060em;
  line-height: 1.5;
  color: #ffffff;
}
.feature .img30 {
  width: calc(600 * var(--lpSetSize));
  position: relative;
  margin: 0 0 calc(120 * var(--lpSetSize)) 0;
}
.feature .img30 .motif30 {
  position: absolute;
  top: calc(40 * var(--lpSetSize));
  left: calc(200 * var(--lpSetSize));
}
.feature .img31 {
  width: calc(600 * var(--lpSetSize));
  position: relative;
  margin: 0 0 0 calc(150 * var(--lpSetSize));
}
.feature .img31 .motif32 {
  position: absolute;
  top: calc(40 * var(--lpSetSize));
  left: calc(47 * var(--lpSetSize));
}
.feature .img31 .motif32 p {
  margin-bottom: calc(18 * var(--lpSetSize));
}
.feature .motif29 {
  width: calc(200 * var(--lpSetSize));
  position: absolute;
  top: calc(-132 * var(--lpSetSize));
  left: calc(8 * var(--lpSetSize));
}
.feature .motif31 {
  width: calc(709.4194 * var(--lpSetSize));
  position: absolute;
  top: calc(334.5161 * var(--lpSetSize));
  left: calc(24.2258 * var(--lpSetSize));  
}
.feature .motif33 {
  width: calc(240 * var(--lpSetSize));
  position: absolute;
  top: calc(940 * var(--lpSetSize));
  left: calc(490 * var(--lpSetSize));  
}
.feature .motif34 {
  width: calc(180 * var(--lpSetSize));
  position: absolute;
  top: calc(1771 * var(--lpSetSize));
  left: calc(63 * var(--lpSetSize));  
}


/* credit
----------------------------- */
.feature .sec__credit {
  padding-top: calc(30 * var(--lpSetSize));
  padding-bottom: calc(188 * var(--lpSetSize));
}
.feature .credit01 {
  width: calc(420 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .credit03 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .credit04 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .credit05 {
  width: calc(640 * var(--lpSetSize));
  margin: 0 0 0 calc(110 * var(--lpSetSize));
  padding-bottom: calc(150 * var(--lpSetSize));
}
.feature .credit06 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 0 0 calc(40 * var(--lpSetSize));
  padding-bottom: calc(108 * var(--lpSetSize));
}
.feature .credit07 {
  width: calc(560 * var(--lpSetSize));
  margin: 0 0 0 calc(40 * var(--lpSetSize));
  padding-bottom: calc(178 * var(--lpSetSize));
}
.feature .credit08 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto calc(20 * var(--lpSetSize));
  padding-top: calc(20 * var(--lpSetSize));
}
.feature .credit09 {
  width: calc(600 * var(--lpSetSize));
  margin: 0 auto;
}
.feature .sec__credit .credit {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(18 * var(--lpSetSize));
  justify-content: center;
}
.feature .sec__credit.credit05 .credit,
.feature .sec__credit.credit06 .credit,
.feature .sec__credit.credit07 .credit {
  justify-content: left;
}


.feature .sec__credit .credit li {
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(22 * var(--lpSetSize));
  letter-spacing: 0.05em;
  line-height: 2.0;
}
.feature .sec__credit .credit li .price {
  margin-left: 0.2em;
}
.feature .sec__credit .credit li {
  position: relative;
}
.feature .sec__credit .credit li,
.feature .sec__credit .credit a {
  display: flex;
}


/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  background: #ffffff;
  padding: calc(120 * var(--lpSetSize)) 0 calc(200 * var(--lpSetSize));
}
.feature .sec_bottom .sec__btn {
  width: calc(680 * var(--lpSetSize));
  margin: 0 auto calc(62 * var(--lpSetSize));
}
.feature .sec_bottom .copyright {
  width: calc(137.6514 * var(--lpSetSize));
  margin: 0 auto;
}


/* ---------------------------------------------------
animation
--------------------------------------------------- */

/* .mask_circle
----------------------------- */
.feature .mask_circle,
.feature .mask_circle-center,
.feature .mask_circle.--1,
.feature .mask_circle.--2 {
  opacity: 0;
}
.feature .mask_circle.is-show,
.feature .mask_circle-center.is-show {
  animation: mask_circle 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.feature .mask_circle.--1.is-show {
  animation: mask_circle 2s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards;
}
.feature .mask_circle.--2.is-show {
  animation: mask_circle 2s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}
@keyframes mask_circle {
  0% {
    opacity: 0;    
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }
  100% {
    opacity: 1;    
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}


/* .dot-wrap
----------------------------- */
.feature .dot-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
  .feature .motif_wrap03 .dot-wrap {
    top: calc(200 * var(--lpSetSize));
  }
  .feature .motif_wrap18 .dot-wrap {
    top: calc(950 * var(--lpSetSize));
  }
.feature .parallax-area {
  position: relative;
}
.feature .parallax-dot {
  animation: parallax-anim linear;
  will-change: transform;
  transform: translateZ(0) translateY(calc(var(--scroll-offset, 0) * var(--parallax-speed, -0.2) * 1px));
  -webkit-transform: translateZ(0) translateY(calc(var(--scroll-offset, 0) * var(--parallax-speed, -0.2) * 1px));
}
@keyframes parallax-anim {
  from {
    transform: translateZ(0) translateY(0px);
  }
  to {
    transform: translateZ(0) translateY(-200px);
  }
}
.js-anime.fade{
  opacity: 0;
  transition: 0.6s ease;
}
.js-anime.fade.show{
  opacity: 1;
}

/* .js-fadeup
----------------------------- */
.feature .js-fadeup {
  transform: translateY(15%);
  opacity: 0;
}
.feature .js-fadeup.is-show {
  transform: translateY(0);
  transition: all 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}

/* .js-typing
----------------------------- */
.feature ul.js-typing li {
  opacity: 0;
  transition: 0s;
}
.feature ul.js-typing.is-show li:nth-child(1) {
  opacity: 1;
  transition-delay: 0.5s;
}
.feature ul.js-typing.is-show li:nth-child(2) {
  opacity: 1;
  transition-delay: 0.8s;
}
.feature ul.js-typing.is-show li:nth-child(3) {
  opacity: 1;  
  transition-delay: 1.1s;
}

/* .js-blur
-------------------------------*/
.feature .js-blur,
.feature .js-blur-center {
  opacity: 0;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}
.feature .js-blur.is-show,
.feature .js-blur-center.is-show {
  animation-name: imageBlur;
}
@keyframes imageBlur {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    filter: blur(15px);
  }  
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.feature .--1.is-show {
  animation-delay: 0.5s;
}
.feature .--2.is-show {
  animation-delay: 1.0s;
}
.feature .--3.is-show {
  animation-delay: 1.2s;
}


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

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

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

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

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

}