@charset "utf-8";

:root{
  --base-font: "Noto Sans JP", sans-serif;

  --base-font-color: #fff;
  --base-font-size: clamp(1.2rem, var(--comp-24), 1.6rem);
  --base-lineheight: 1.8;

  --blue: #4254ff;
  --yellow: #fccf18;

  --comp-width: 740; /*-- SPカンプの幅 --*/

  --comp-780: calc(780cqw / var(--comp-width) * 100);
  --comp-660: calc(660cqw / var(--comp-width) * 100);
  --comp-620: calc(620cqw / var(--comp-width) * 100);
  --comp-580: calc(580cqw / var(--comp-width) * 100);
  --comp-535: calc(535cqw / var(--comp-width) * 100);
  --comp-500: calc(500cqw / var(--comp-width) * 100);
  --comp-480: calc(480cqw / var(--comp-width) * 100);
  --comp-460: calc(460cqw / var(--comp-width) * 100);
  --comp-450: calc(450cqw / var(--comp-width) * 100);
  --comp-440: calc(440cqw / var(--comp-width) * 100);
  --comp-380: calc(380cqw / var(--comp-width) * 100);
  --comp-360: calc(360cqw / var(--comp-width) * 100);
  --comp-350: calc(350cqw / var(--comp-width) * 100);
  --comp-340: calc(360cqw / var(--comp-width) * 100);
  --comp-320: calc(320cqw / var(--comp-width) * 100);
  --comp-310: calc(310cqw / var(--comp-width) * 100);
  --comp-300: calc(300cqw / var(--comp-width) * 100);
  --comp-280: calc(280cqw / var(--comp-width) * 100);
  --comp-270: calc(270cqw / var(--comp-width) * 100);
  --comp-265: calc(265cqw / var(--comp-width) * 100);
  --comp-260: calc(260cqw / var(--comp-width) * 100);
  --comp-255: calc(255cqw / var(--comp-width) * 100);
  --comp-250: calc(250cqw / var(--comp-width) * 100);
  --comp-245: calc(245cqw / var(--comp-width) * 100);
  --comp-240: calc(240cqw / var(--comp-width) * 100);
  --comp-235: calc(235cqw / var(--comp-width) * 100);
  --comp-230: calc(230cqw / var(--comp-width) * 100);
  --comp-225: calc(225cqw / var(--comp-width) * 100);
  --comp-220: calc(220cqw / var(--comp-width) * 100);
  --comp-215: calc(215cqw / var(--comp-width) * 100);
  --comp-210: calc(210cqw / var(--comp-width) * 100);
  --comp-205: calc(205cqw / var(--comp-width) * 100);
  --comp-200: calc(200cqw / var(--comp-width) * 100);
  --comp-195: calc(195cqw / var(--comp-width) * 100);
  --comp-190: calc(190cqw / var(--comp-width) * 100);
  --comp-185: calc(185cqw / var(--comp-width) * 100);
  --comp-180: calc(180cqw / var(--comp-width) * 100);
  --comp-175: calc(175cqw / var(--comp-width) * 100);
  --comp-170: calc(170cqw / var(--comp-width) * 100);
  --comp-165: calc(165cqw / var(--comp-width) * 100);
  --comp-160: calc(160cqw / var(--comp-width) * 100);
  --comp-155: calc(155cqw / var(--comp-width) * 100);
  --comp-150: calc(150cqw / var(--comp-width) * 100);
  --comp-145: calc(145cqw / var(--comp-width) * 100);
  --comp-140: calc(140cqw / var(--comp-width) * 100);
  --comp-135: calc(135cqw / var(--comp-width) * 100);
  --comp-130: calc(130cqw / var(--comp-width) * 100);
  --comp-125: calc(125cqw / var(--comp-width) * 100);
  --comp-120: calc(120cqw / var(--comp-width) * 100);
  --comp-115: calc(115cqw / var(--comp-width) * 100);
  --comp-110: calc(110cqw / var(--comp-width) * 100);
  --comp-105: calc(105cqw / var(--comp-width) * 100);
  --comp-100: calc(100cqw / var(--comp-width) * 100);
  --comp-95: calc(95cqw / var(--comp-width) * 100);
  --comp-90: calc(90cqw / var(--comp-width) * 100);
  --comp-85: calc(85cqw / var(--comp-width) * 100);
  --comp-80: calc(80cqw / var(--comp-width) * 100);
  --comp-75: calc(75cqw / var(--comp-width) * 100);
  --comp-70: calc(70cqw / var(--comp-width) * 100);
  --comp-65: calc(65cqw / var(--comp-width) * 100);
  --comp-60: calc(60cqw / var(--comp-width) * 100);
  --comp-55: calc(55cqw / var(--comp-width) * 100);
  --comp-50: calc(50cqw / var(--comp-width) * 100);
  --comp-45: calc(45cqw / var(--comp-width) * 100);
  --comp-40: calc(40cqw / var(--comp-width) * 100);
  --comp-35: calc(35cqw / var(--comp-width) * 100);
  --comp-30: calc(30cqw / var(--comp-width) * 100);
  --comp-25: calc(25cqw / var(--comp-width) * 100);
  --comp-20: calc(20cqw / var(--comp-width) * 100);
  --comp-15: calc(15cqw / var(--comp-width) * 100);
  --comp-10: calc(10cqw / var(--comp-width) * 100);
  --comp-05: calc(5cqw / var(--comp-width) * 100);

  --comp-112: calc(112cqw / var(--comp-width) * 100);
  --comp-96: calc(96cqw / var(--comp-width) * 100);
  --comp-88: calc(88cqw / var(--comp-width) * 100);
  --comp-84: calc(84cqw / var(--comp-width) * 100);
  --comp-82: calc(82cqw / var(--comp-width) * 100);
  --comp-72: calc(72cqw / var(--comp-width) * 100);
  --comp-68: calc(68cqw / var(--comp-width) * 100);
  --comp-56: calc(56cqw / var(--comp-width) * 100);
  --comp-48: calc(48cqw / var(--comp-width) * 100);
  --comp-42: calc(42cqw / var(--comp-width) * 100);
  --comp-36: calc(36cqw / var(--comp-width) * 100);
  --comp-32: calc(32cqw / var(--comp-width) * 100);
  --comp-28: calc(28cqw / var(--comp-width) * 100);
  --comp-26: calc(26cqw / var(--comp-width) * 100);
  --comp-24: calc(24cqw / var(--comp-width) * 100);
  --comp-22: calc(22cqw / var(--comp-width) * 100);
  --comp-18: calc(18cqw / var(--comp-width) * 100);
  --comp-08: calc(8cqw / var(--comp-width) * 100);
  --comp-06: calc(6cqw / var(--comp-width) * 100);
}

html{ font-size: 62.5%; margin: 0 !important;}
body{ margin:0 auto; padding:0; font-display: auto; -webkit-font-smoothing: antialiased !important; font-smoothing: antialiased !important; font-family: var(--base-font); color: var(--base-font-color);  width: 100%; letter-spacing: 0.03em; color: var(--base-font-color); }
body > noscript,
body > img,
body > iframe[width="0"][height="0"] {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
:where(:root, body) { overflow-x: clip;}
main img{ border:none; vertical-align:bottom; -webkit-backface-visibility: hidden; width: 100%; height: auto; max-width: 100%;}

/* IE8+, Chrome  */
a{ transition: all ease 0.5s; outline: 0;}

@media (any-hover: hover) {
  a:hover{ opacity: 0.75;}
}

@media screen and (width > 800px){
.sp{ display: none !important;}
}
    
@media screen and (width <= 800px){
.pc{ display: none !important;}
}

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

COMMON

----------------------------------------------*/
/*
 SECTION・HEADING・PARTS
--------------------------------*/
.lpContent{ position: relative; overflow: clip;}
.lpContent h1,
.lpContent h2,
.lpContent h3,
.lpContent h4,
.lpContent h5,
.lpContent h6,
.lpContent p{ font-family: var(--base-font);}
.lpContent::before{ content: ""; display: block; width: 100%; height: 100vh; background-image: url(../img/bg-main.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; position: fixed; pointer-events: none;}
main{ display: block; container-type: inline-size; width: 100%; max-width: 740px; margin-inline: auto; overflow: clip; filter: drop-shadow(0 0 var(--comp-10) #005ac2);}
p{ margin:0; line-height: var(--base-lineheight); font-size: var(--base-font-size); font-family: var(--base-font);}
p b{ font-weight: 700;}
.nowrap{ text-wrap: nowrap !important; display: inline-block;}
.indent01{ text-indent: -1em; padding-left: 1em; display: inline-block; }
.btn{ margin: var(--comp-60) auto 0; z-index: 2; position: relative;}
.btn a{ display: block; background-color: var(--blue); color: #fff; font-size: var(--comp-28); width: fit-content; min-width: var(--comp-460); margin-inline: auto; box-sizing: border-box; padding: var(--comp-35) var(--comp-110) var(--comp-35) var(--comp-45); border-radius: 10000px; font-weight: 700; line-height: 1.2; position: relative; filter: drop-shadow(0 var(--comp-25) var(--comp-08) rgb(0 0 0 / 0.2)); transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;}
.btn a::before{ content: ""; background-image: url(../img/btn-arrow.svg); background-repeat: no-repeat; background-position: center center; background-size: content; display: block; aspect-ratio: 1 / 1; width: var(--comp-70); position: absolute; top: 50%; right: var(--comp-20); transform: translateY(-50%); transition: transform 0.3s ease;}

@media (any-hover: hover) {
  .btn a:hover{ opacity: 1; transform: translateY(calc(var(--comp-05) * (-1))) scale(1.03); filter: drop-shadow(0 var(--comp-30) var(--comp-10) rgb(0 0 0 / 0.28));}
  .btn a:hover::before{ transform: translate(var(--comp-05), -50%);}
}


/*
 VISUAL
--------------------------------*/
.visual{ display: block; background-image: url(../img/bg-main.webp); background-position: center center; background-repeat: no-repeat; background-size: cover; aspect-ratio: 740 / 1140; width: 100%; box-sizing: border-box;padding-top: var(--comp-30); position: relative; z-index: 6;}
.visual .logo{ position: relative; left: var(--comp-30); width: var(--comp-440);}
.visual .logo img{ width: var(--comp-440);}
.visual .supergt{ aspect-ratio: 1 / 1; position: absolute; top: var(--comp-80); right: var(--comp-10); width: calc(353cqw / var(--comp-width) * 100); display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding-bottom: var(--comp-20);}
.visual .supergt img{ display: block; position: relative; z-index: 2; width: calc(233cqw / var(--comp-width) * 100);}
.visual .supergt::before{ content: ""; display: block; width: 100%; aspect-ratio: 1 / 1; background-image: url(../img/gt-date-circle.svg); background-repeat: no-repeat; background-position: center center; position: absolute; top: 0; left: 0; z-index: 1; animation: supergt-circle-rotate 20s linear infinite; }
h2{ width: 100%; position: absolute; top: var(--comp-360); z-index: 3; transform-origin: center center; animation: h2-slide-scale-in 1.1s 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;}
h2 img{ width: var(--comp-660); display: block; margin-inline: auto;}
.object01,
.object02,
.object03,
.object04{ position: absolute; display: block;}
.object01 img,
.object02 img,
.object03 img,
.object04 img{ display: block;}
.object01{ top: var(--comp-110); left: 0; width: var(--comp-340); animation: object01-slide-in 1.1s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;}
.object02{ top: calc(896cqw / var(--comp-width) * 100); left: 0; width: calc(349cqw / var(--comp-width) * 100); z-index: 2; animation: object-right-slide-in 1.1s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;}
.object03{ top: calc(815cqw / var(--comp-width) * 100); right: 0; width: calc(354cqw / var(--comp-width) * 100); z-index: 2; animation: object-right-slide-in 1.1s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;}
.object04{ top: calc(1000cqw / var(--comp-width) * 100); left: 0; width: 100%; z-index: 1;}

@keyframes object01-slide-in {
  from { opacity: 0; transform: translateX(calc(var(--comp-80) * (-1)));}
  to { opacity: 1; transform: translateX(0);}
}

@keyframes object-right-slide-in {
  from { opacity: 0; transform: translateX(var(--comp-80));}
  to { opacity: 1; transform: translateX(0);}
}

@keyframes h2-slide-scale-in {
  from { opacity: 0; transform: translateX(calc(var(--comp-80) * (-1))) scale(0.8);}
  to { opacity: 1; transform: translateX(0) scale(1);}
}
.innerMain{ filter: drop-shadow(var(--comp-05) var(--comp-05) 0px #000); display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; gap: var(--comp-10); position: absolute; top: calc(585cqw / var(--comp-width) * 100); width: 100%;}
.innerMain p{ font-weight: 900; position: relative; line-height: 1; box-sizing: border-box; width: fit-content; max-width: 100%; margin: 0 auto; margin-inline: auto; font-feature-settings: "palt"; letter-spacing: 0.03em;}
.line1{ font-size: var(--comp-30); padding: var(--comp-06) var(--comp-20) var(--comp-08); }
.line2{ font-size: var(--comp-32); padding: var(--comp-08) var(--comp-20) var(--comp-10) var(--comp-25);}
.line2 small{ font-size: var(--comp-20); line-height: 1; display: inline-block;}
.line3{ font-size: var(--comp-68); padding: 0 var(--comp-40) var(--comp-10);}
.line3 .large{ font-size: var(--comp-82); transform: translateY(0.05em); display: inline-block; line-height: 1;}
.line4{ font-size: var(--comp-30); padding: var(--comp-08) var(--comp-20) var(--comp-10); }
.line1 > span,
.line2 > span,
.line3 > span,
.line4 > span{ position: relative; line-height: 1; display: inline-block; color: #000;}
.line1::before,
.line2::before,
.line3::before,
.line4::before{ content: ""; position: absolute; top: 0; left: 0; background-color: #fff; display: block; width: 100%; height: 100%;}
.line1::before{ clip-path: polygon(var(--comp-08) 0, 100% 0, calc(100% - var(--comp-08)) 100%, 0 100%);}
.line2::before{ clip-path: polygon(0 0, calc(100% - var(--comp-10)) 0, 100% 100%, var(--comp-10) 100%); }
.line3::before{ clip-path: polygon(var(--comp-20) 0, 100% 0, calc(100% - var(--comp-20)) 100%, 0 100%); }
.line4::before{ clip-path: polygon(var(--comp-10) 0, 100% 0, calc(100% - var(--comp-10)) 100%, 0% 100%); }
@keyframes supergt-circle-rotate {
	to { transform: rotate(360deg); }
}

/*
 POINT
--------------------------------*/
#point{ background-color: #40caef; padding: calc(375cqw / var(--comp-width) * 100) 0 var(--comp-40); position: relative; z-index: 5;}
#point::after{ content: ""; display: block; background-image: url(../img/bg-wave-aqua.svg); aspect-ratio: 780 / 100; width: var(--comp-780); position: absolute; left: 0; bottom: calc(var(--comp-90) * (-1));}
#point h3{ width: 100%; background-image: url(../img/bg-0-aqua.svg); background-repeat: no-repeat; background-position: center center; background-size: calc(555cqw / var(--comp-width) * 100); min-height: calc(480cqw / var(--comp-width) * 100); display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: var(--comp-56); font-weight: 900; text-align: center; line-height: 1.75;}
.pointList{ list-style: none; margin-bottom: var(--comp-120);}
.pointList li{ position: relative; width: 100%; box-sizing: border-box; opacity: 0; transform: translateY(var(--comp-80));}
.pointList li.scrollin{ animation: point-list-bounce 0.8s both;}

@keyframes point-list-bounce {
  0% { opacity: 0; transform: translateY(var(--comp-80));}
  55% { opacity: 1; transform: translateY(calc(var(--comp-15) * (-1)));}
  100% { opacity: 1; transform: translateY(0);}
}
.pointList li:nth-child(odd){ padding-left: var(--comp-10);}
.pointList li:nth-child(even){ padding-right: var(--comp-10);}
.pointList li:nth-child(2){ margin-top: calc(var(--comp-60) * (-1));}
.pointList li:nth-child(3){ margin-top: calc(var(--comp-50) * (-1));}
.pointList li:nth-child(4){ margin-top: calc(var(--comp-135) * (-1));}
.pointList li:nth-child(1)::before{ background-image: url(../img/img-point01.webp); aspect-ratio: 590 / 812; width: calc(295cqw / var(--comp-width) * 100); right: 0; top: 0;}
.pointList li:nth-child(2)::before{ background-image: url(../img/img-point02.webp); aspect-ratio: 490 / 506; width: calc(245cqw / var(--comp-width) * 100); left: 0; top: var(--comp-60);}
.pointList li:nth-child(3)::before{ background-image: url(../img/img-point03.webp); aspect-ratio: 560 / 512; width: calc(280cqw / var(--comp-width) * 100); right: 0; top: var(--comp-50);}
.pointList li:nth-child(4)::before{ background-image: url(../img/img-point04.webp); aspect-ratio: 664 / 794; width: calc(332cqw / var(--comp-width) * 100); left: 0; top: var(--comp-135);}
.pointList li::before{ content: ""; display: block; background-repeat: no-repeat; background-size: contain; background-position: center center; position: absolute; pointer-events: none;}
.pointList li:nth-child(1) .inner{ background-image: url(../img/point01-circle.webp); aspect-ratio: 760 / 900; width: var(--comp-380);}
.pointList li:nth-child(2) .inner{ background-image: url(../img/point02-circle.webp); aspect-ratio: 1070 / 1208; width: var(--comp-535);}
.pointList li:nth-child(3) .inner{ background-image: url(../img/point03-circle.webp); aspect-ratio: 760 / 900; width: var(--comp-380);}
.pointList li:nth-child(4) .inner{ background-image: url(../img/point04-circle.webp); aspect-ratio: 760 / 900; width: var(--comp-380);}
.pointList li .inner{ background-repeat: no-repeat; background-position: center top; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: var(--comp-05); gap: var(--comp-20);}
.pointList li:nth-child(odd) .inner{ margin-right: auto;}
.pointList li:nth-child(even) .inner{ margin-left: auto;}
.pointList li .inner p{ font-size: var(--comp-56); font-weight: 900; text-align: center; line-height: 1.3; margin-inline: auto;}
.pointList li .inner p.small{ font-size: var(--comp-48); font-weight: 700;}
.pointList li:nth-child(odd) .inner p{ color: var(--blue);}
.pointList li:nth-child(even) .inner p{ color: #fff;}
.arrowText{ width: var(--comp-660); aspect-ratio: 660 / 308; background-image: url(../img/special-arrow.svg); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--comp-48); font-weight: 900; font-feature-settings: "palt"; letter-spacing: 0.03em; box-sizing: border-box; padding: 0 var(--comp-60) var(--comp-50); position: absolute; bottom: auto; left: var(--comp-40); z-index: 5; opacity: 0; transform: translateY(calc(var(--comp-50) * (-1))); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);}
.arrowText.scrollin{ opacity: 1; transform: translateY(0);}

/*
 PRICE
--------------------------------*/
#price{ background-color: #fccf18; padding: var(--comp-350) 0 var(--comp-40); position: relative; z-index: 4;}
#price::after{ content: ""; display: block; background-image: url(../img/bg-wave-yellow.svg); aspect-ratio: 780 / 100; width: var(--comp-780); position: absolute; left: 0; bottom: calc(var(--comp-90) * (-1));}
#price hgroup{ margin-bottom: var(--comp-50);}
#price hgroup h3{ font-weight: 900; aspect-ratio: 1290 / 1370; background-image: url(../img/special-circle.webp); background-size: contain; width: calc(645cqw / var(--comp-width) * 100); margin-inline: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding-bottom: var(--comp-30); opacity: 0; transform: scale(0.65); transform-origin: center center; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);}
#price hgroup h3.scrollin{ opacity: 1; transform: scale(1);}
#price hgroup h3 span{ display: block; width: fit-content; margin-inline: auto; line-height: 1.4; font-feature-settings: "palt"; letter-spacing: 0.03em;}
#price hgroup h3 .line01{ font-size: var(--comp-72);}
#price hgroup h3 .line02{ font-size: var(--comp-112);}
#price hgroup h3 .line02 small{ font-size: var(--comp-48);}
#price hgroup h3 .line03{ font-size: var(--comp-96);}
#price hgroup .caution{ font-size: var(--comp-24); color: #222; font-weight: 500; text-align: center; padding-inline: var(--comp-40); box-sizing: border-box;}
#price .lead{ font-size: var(--comp-32); color: #222; font-weight: 700; text-align: center; padding-inline: var(--comp-40); box-sizing: border-box; margin-bottom: var(--comp-60);}
#price figure{ padding-inline: var(--comp-40); box-sizing: border-box;}
#price figure,
.lpFooter .catch{ opacity: 0; transform: translateY(var(--comp-80)); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);}
#price figure.scrollin,
.lpFooter .catch.scrollin{ opacity: 1; transform: translateY(0);}

@media (prefers-reduced-motion: reduce) {
  #price figure,
  .lpFooter .catch{ opacity: 1; transform: none; transition: none;}
}

/*
 ENJOY
--------------------------------*/
#enjoy{ background-color: #fff; padding-top: var(--comp-100);}
#enjoy hgroup{ background-image: url(../img/bg-enjoy-confetti.webp); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; padding: calc(225cqw / var(--comp-width) * 100) 0 var(--comp-80);}
#enjoy hgroup h3 .sub{ color: #fff; width: var(--comp-580); text-align: center; font-size: var(--comp-48); font-weight: 700; background-color: var(--blue); clip-path: polygon(0 0, 100% 0, calc(100% - var(--comp-15)) 50%, 100% 100%, 0 100%, var(--comp-15) 50%); display: block; margin-inline: auto; box-sizing: border-box; padding: var(--comp-20) var(--comp-30); opacity: 0; transform: translateY(var(--comp-30)); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); margin-bottom: var(--comp-25);}
#enjoy hgroup h3 .main{ color: var(--blue); text-align: center; font-size: var(--comp-80); font-weight: 900; display: block; width: fit-content; margin-inline: auto; opacity: 0; transform: translateY(var(--comp-30)); transition: opacity 0.7s 0.35s ease, transform 0.7s 0.35s cubic-bezier(0.22, 1, 0.36, 1);}
#enjoy hgroup.scrollin h3 .sub,
#enjoy hgroup.scrollin h3 .main{ opacity: 1; transform: translateY(0);}
#enjoy hgroup h3 .main::after{ content: ""; background-image: url(../img/line-wave.svg); display: block; width: calc(353cqw / var(--comp-width) * 100); aspect-ratio: 353 / 32; margin-top: var(--comp-20);}
.enjoyList{ display: flex; flex-direction: column;}
.enjoyList li{ padding-top: var(--comp-80); position: relative; padding-inline: var(--comp-40); box-sizing: border-box;}
.enjoyList li .inner{ opacity: 0; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);}
.enjoyList li:nth-child(odd) .inner{ transform: translate(var(--comp-80), var(--comp-80));}
.enjoyList li:nth-child(even) .inner{ transform: translate(calc(var(--comp-80) * (-1)), var(--comp-80));}
.enjoyList li.scrollin .inner{ opacity: 1; transform: translate(0, 0);}
.enjoyList li:nth-child(1){ padding-top: var(--comp-80); padding-bottom: var(--comp-220); color: #fff;}
.enjoyList li:nth-child(2){ padding-top: var(--comp-180); padding-bottom: var(--comp-110); margin-top: calc(var(--comp-160) * (-1));}
.enjoyList li:nth-child(3){ padding-top: var(--comp-80); padding-bottom: var(--comp-120);}
.enjoyList li::before{ content: ""; display: block; width: 100%; position: absolute; top: 0; left: 0;}
.enjoyList li:nth-child(1):before{ height: 100%; background-color: var(--blue); clip-path: polygon(0 0, 100% var(--comp-160), 100% 100%, 0 calc(100% - var(--comp-160)));}
.enjoyList li:nth-child(3):before{ height: 100%; background-color: var(--blue); clip-path: polygon(0 var(--comp-160), 100% 0, 100% 100%, 0 100%);}
.enjoyList li .inner{ position: relative;}
.enjoyList li h4{ font-weight: 700; font-size: var(--comp-48); text-align: center; }
.enjoyList li:nth-child(odd){ color: #fff;}
.enjoyList li:nth-child(even){ color: var(--blue);}
.enjoyList li figure{ margin-bottom: var(--comp-60);}
.enjoyList li h4 span{ background-image: linear-gradient(180deg, transparent 0%, transparent 75%, var(--yellow) 75%, var(--yellow) 100%); line-height: 1.75;}
.enjoyList li h4 + p{ margin-top: var(--comp-30); font-size: var(--comp-32); font-weight: 700; text-align: center;}
.enjoyList li h4 + p small{ font-weight: 500;}
.enjoyList li h4 + p small.right{ display: block; text-align: right; font-size: var(--comp-24);}

/*
 FOOTER
--------------------------------*/
.lpFooter{ margin-top: -1px; background-color: var(--yellow); box-sizing: border-box; background-image: url(../img/bg-wave-blue.svg); background-repeat: no-repeat; background-position: center top; background-size: var(--comp-780); padding-top: var(--comp-300); position: relative; overflow: hidden; isolation: isolate;}
.lpFooter::before{ content: ""; position: absolute; inset: 0; z-index: -1; background-image: url(../img/bg-2daysfree-confetti.webp); background-repeat: no-repeat; background-position: center var(--comp-80); background-size: 100cqw auto; pointer-events: none;}
.lpFooter > *{ position: relative; z-index: 1;}
.lpFooter .catch{ margin: 0 auto var(--comp-45); text-align: center; line-height: 1.8; min-height: var(--comp-480); display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: url(../img/bg-0-yellow.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
.lpFooter .catch .sub{ font-size: var(--comp-56); display: block; font-weight: 900; text-shadow: 5px 5px #fff; color: var(--blue);}
.lpFooter .catch .main{ font-size: var(--comp-88); background-color: #fff; width: fit-content; color: var(--blue); font-weight: 900; border-radius: var(--comp-10); padding: var(--comp-10) var(--comp-40);}
.lpFooter .catch .main small{ font-size: var(--comp-56);}
.lpFooter .btn{ margin-top: var(--comp-40); z-index: 2;}
.lpFooter .logo{ background-color: #fcaf18; width: 100%; display: block; padding: var(--comp-170) 0 var(--comp-80); position: relative; background-image: url(../img/bg-wave-yellow.svg); background-repeat: no-repeat; background-position: center top; background-size: var(--comp-780); z-index: 1;}
.lpFooter .logo img{ display: block; width: var(--comp-440); margin-inline: auto;}