@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: #e8ae3b;
  --red: #d83b1e;
  --red02: #ba141e;
  --bordeaux: #90000f;
  --beige: #fff1e0;

  --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-64: calc(64cqw / var(--comp-width) * 100);
  --comp-56: calc(56cqw / var(--comp-width) * 100);
  --comp-48: calc(48cqw / var(--comp-width) * 100);
  --comp-46: calc(46cqw / var(--comp-width) * 100);
  --comp-44: calc(44cqw / 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-19: calc(19cqw / 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) #641f13);}
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(--red); 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%);}
}

.lpLayout{ display: grid; grid-template-columns: 30% 66%; justify-content: space-between; align-items: start; max-width: 1220px; padding-inline: 10px; box-sizing: border-box; margin-inline: auto;}
.sideCv{ display: block; align-self: start; position: sticky; top: 50vh; z-index: 10; color: var(--bordeaux); text-align: center; transform: translateY(-50%); container-type: inline-size;}
.sideCv .ribbon{ background-color: var(--bordeaux); color: var(--beige); font-size: calc(30cqw / 430 * 100); padding: calc(10cqw / 430 * 100) calc(40cqw / 430 * 100); clip-path: polygon(0 0, 100% 0, calc(100% - calc(8cqw / 430 * 100)) 50%, 100% 100%, 0 100%, calc(8cqw / 430 * 100) 50%); font-weight: 900; width: fit-content; line-height: 1.4; margin: 0 auto calc(10cqw / 430 * 100);}
.sideCv .date{ position: relative; text-align: center; color: var(--beige); font-size: calc(24cqw / 430 * 100); font-weight: 700; padding: calc(10cqw / 430 * 100) calc(30cqw / 430 * 100); width: fit-content; margin: 0 auto calc(20cqw / 430 * 100); }
.sideCv .date::before,
.sideCv .date::after{ content: ""; display: block; aspect-ratio: 20 / 40; width: calc(20cqw / 430 * 100); position: absolute; top: 50%; transform: translateY(-50%); animation: moreTextBlink 1.2s infinite;}
.sideCv .date::before{ background-image: url(../img/side-object01.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; left: 0; }
.sideCv .date::after{ background-image: url(../img/side-object02.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; right: 0;}
.sideCv .large{ font-size: calc(40cqw / 430 * 100); font-weight: 700; color: var(--beige); margin: 0 auto calc(40cqw / 430 * 100); text-align: center;}
.sideCvButton{ margin-top: calc(40cqw / 430 * 100);}
.sideCvButton a{ display: flex; flex-direction: column; justify-content: center; width: calc(290cqw / 430 * 100); height: calc(85cqw / 430 * 100); margin-inline: auto; padding: 0 0 0 calc(40cqw / 430 * 100); border-radius: 9999px; background-color: #e99a1f; background-position: center; background-size: cover; box-sizing: border-box; color: #fff; font-size: calc(23cqw / 430 * 100); line-height: 1.2; font-weight: 700; white-space: nowrap; position: relative; filter: drop-shadow(0 5px 8px rgb(109 47 0 / 0.22)); transition: transform 0.3s ease, opacity 0.3s ease; text-align: left;}
.sideCvButton a::after{ content: ""; display: block; width: calc(60cqw / 430 * 100); aspect-ratio: 1; background:  url(../img/btn-arrow.svg) no-repeat center / contain; border-radius: 50%; position: absolute; top: 50%; right: calc(12cqw / 430 * 100); transform: translateY(-50%); transition: transform 0.3s ease;}

@media screen and ( 749px < width <= 1100px){
.lpLayout{ display: grid; grid-template-columns: 40% 55%; }
}

@media screen and (width <= 749px){
.lpLayout{ display: block; padding: 0;}
.sideCv{ display: none;}
}

@keyframes moreTextBlink {
0%, 49.99% { opacity: 1;}
50%, 100% { opacity: 0;}
}

@media (any-hover: hover){
  .sideCvButton a:hover{ opacity: 1; transform: translateY(-3px) scale(1.02);}
  .sideCvButton a:hover::after{ transform: translate(4px, -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 .race{ 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 .race img{ display: block; position: relative; z-index: 2; width: calc(256cqw / var(--comp-width) * 100);}
.visual .race::before{ content: ""; display: block; width: 100%; aspect-ratio: 1 / 1; background-image: url(../img/race-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: object02-slide-in 1.1s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;}
.object03{ top: calc(800cqw / var(--comp-width) * 100); right: 0; width: calc(354cqw / var(--comp-width) * 100); z-index: 2; animation: object03-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(var(--comp-80));}
  to { opacity: 1; transform: translateX(0);}
}

@keyframes object02-slide-in {
  from { opacity: 0; transform: translate(var(--comp-80), calc(var(--comp-80) * (-1))) scale(0.9);}
  to { opacity: 1; transform: translate(0, 0) scale(1);}
}

@keyframes object03-slide-in {
  from { opacity: 0; transform: translate(calc(var(--comp-80) * (-1)), calc(var(--comp-80) * (-1))) scale(0.9);}
  to { opacity: 1; transform: translate(0, 0) scale(1);}
}

@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
--------------------------------*/
.movieList{ padding-inline: var(--comp-40); box-sizing: border-box; margin: var(--comp-10) auto var(--comp-60); width: 90%; display: flex; flex-direction: column; gap: var(--comp-40);}
.movieList iframe{ aspect-ratio: 16 / 9; display: block; width: 100%;}
.movieList p{ font-size: var(--comp-32); font-weight: 700; text-align: center; margin-top: var(--comp-15); line-height: 1.6;}

#point{ background-color: var(--red); 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-wave01.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-zero01.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-40);}
.pointList li{ position: relative; width: 100%; box-sizing: border-box;}
.pointList li, .pointList::after{ opacity: 0; transform: translateY(var(--comp-80));}
.pointList li.scrollin, .pointList.scrollin::after{ 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(1){ margin-bottom: var(--comp-30);}
.pointList li:nth-child(1)::before{ background-image: url(../img/img-point01.webp); aspect-ratio: 420 / 1060; width: calc(210cqw / var(--comp-width) * 100); right: 0; bottom: 0;}
.pointList li:nth-child(2)::before{ background-image: url(../img/img-point02.webp); aspect-ratio: 664 / 794; width: calc(332cqw / var(--comp-width) * 100); left: 0; top: calc(var(--comp-40) * (-1));}
.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: 1070 / 1208; width: var(--comp-535);}
.pointList li:nth-child(2) .inner{ background-image: url(../img/point02-circle.webp); aspect-ratio: 760 / 900; width: var(--comp-380);}
.pointList li .inner{ background-repeat: no-repeat; background-position: center top; background-size: contain; 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-44); font-weight: 700;}
.pointList li:nth-child(odd) .inner p{ color: #fff;}
.pointList li:nth-child(even) .inner p{ color: var(--red02);}
.pointList::after{ content: ""; aspect-ratio: 1480 / 1320; width: 100%; display: block; background-image: url(../img/img-point03.webp); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-top: calc(var(--comp-50) * (-1));}
.arrowText{ width: var(--comp-660); aspect-ratio: 660 / 308; background-image: url(../img/special-arrow.svg); background-repeat: no-repeat; 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: var(--yellow); padding: var(--comp-350) 0 var(--comp-40); position: relative; z-index: 4;}
#price::after{ content: ""; display: block; background-image: url(../img/bg-wave02.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-64);}
#price hgroup h3 .line02{ font-size: var(--comp-95);}
#price hgroup h3 .line02 small{ font-size: var(--comp-44);}
#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,
.gourmetBox,
#enjoy .catch,
.modelBox h4,
.lpFooter .catch{ opacity: 0; transform: translateY(var(--comp-80)); transition: opacity 0.9s ease, transform 0.9s ease;}
#price figure.scrollin,
.gourmetBox.scrollin,
#enjoy .catch.scrollin,
.modelBox h4.scrollin,
.lpFooter .catch.scrollin{ opacity: 1; transform: translateY(0);}
.gourmetBox{ margin-top: var(--comp-100);}
.gourmetBox h4{ color: var(--red02); font-size: var(--comp-50); font-weight: 900; text-align: center; line-height: 1.4; margin-bottom: min(--comp-40); margin-bottom: var(--comp-30);}
.gourmetBox h4::before{ content: ""; display: block; margin-inline: auto; background-image: url(../img/slide-object.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; width: var(--comp-100); aspect-ratio: 100 / 50; animation: moreTextBlink 1.2s infinite;}
.gourmetBox .gourmetSlide{ --gourmet-slide-width: calc(var(--comp-150) * 6.4); height: var(--comp-150); width: 100%; background-image: url(../img/img-slide.webp); background-repeat: repeat-x; background-position: 0 center; background-size: var(--gourmet-slide-width) 100%; animation: gourmetSlide 30s linear infinite;}


@keyframes gourmetSlide {
0% { background-position: 0 center; }
100% { background-position: calc(var(--gourmet-slide-width) * (-1)) center;}
}

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

/*
 ENJOY
--------------------------------*/
#enjoy{ background-color: #ffd33e; padding-top: var(--comp-100); mask-image: url(../img/mask.webp), url(../img/bg-wave03.svg); mask-repeat: no-repeat; mask-position: center top, center bottom; mask-size: 100% calc(100% - var(--comp-100) + 1px) , var(--comp-780) var(--comp-100); position: relative; z-index: 2;}
#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(--bordeaux); 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(--red02); 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);}
#enjoy .catch{ font-size: var(--comp-60); color: var(--red02); font-weight: 900; text-align: center; line-height: 1.25; margin-bottom: var(--comp-50);}
.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:nth-child(3){ padding-top: var(--comp-180); padding-bottom: var(--comp-160);}*/
.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(--red); 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(--red); clip-path: polygon(0 var(--comp-160), 100% 0, 100% calc(100% - var(--comp-160)), 0 100%);}*/
.enjoyList li:nth-child(3):before{ height: 100%; background-color: var(--red); 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(--red02);}
.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);}

.modelBox h4{ color: var(--red02); text-align: center; font-size: var(--comp-48); background-image: linear-gradient(180deg, transparent 0%, transparent 75%, #fff 75%, #fff 100%); width: fit-content; box-sizing: border-box; margin: 0 auto; max-width: calc(100% - var(--comp-80)); font-weight: 700; line-height: 1.4;}
.modelBox h4{ background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), background-size 0.4s linear 0.4s;}
.modelBox h4.scrollin{ background-size: 100% 100%;}
@media (prefers-reduced-motion: reduce) {
  .modelBox h4{ opacity: 1; transform: none; background-size: 100% 100%; transition: none;}
}
.modelList{ background-image: url(../img/bg-plan.webp); background-repeat: repeat-y; background-position: center top; background-size: 100%; padding-bottom: var(--comp-150); padding-top: var(--comp-50); display: flex; flex-direction: column; gap: var(--comp-20);}
.modelList div{ position: relative; display: flex; flex-wrap: wrap; row-gap: var(--comp-20); align-items: center; justify-content: center; opacity: 0;}
.modelList div.scrollin{ animation: modelListItemAppear 0.7s ease 0.4s forwards;}
.modelList div:first-child.scrollin{ animation-delay: 0s;}
.modelList div::after{ content: ""; display: block; aspect-ratio: 10 / 80; background-image: url(../img/line-plan.svg); width: var(--comp-10); opacity: 0; transform: scaleY(0); transform-origin: center top;}
.modelList div:has(+ div.scrollin)::after{ animation: modelListLineAppear 0.4s ease forwards;}
.modelList div:has(+ div.scrollin)::before{ animation: modelListDropAppear 0.4s ease forwards;}
.modelList div:last-child::after,
.modelList div:last-child::before{ content: none;}
.modelList div:nth-child(odd){ flex-direction: row-reverse; }
.modelList div:nth-child(even){ flex-direction: row; }
.modelList div dt{ width: 50%; box-sizing: border-box; }
.modelList div:nth-child(odd) dt{ padding: 0 var(--comp-80) 0 var(--comp-40);}
.modelList div:nth-child(even) dt{ padding: 0 var(--comp-40) 0 var(--comp-80);}
.modelList div dt .time{ color: var(--red02); font-size: var(--comp-46); font-weight: 900; margin-bottom: var(--comp-10); line-height: 1;}
.modelList div dt .time.t{ font-size: var(--comp-40);}
.modelList div dt .color{ color: #d83b1e; font-size: var(--comp-24); font-weight: 900; line-height: 1.5; margin-bottom: var(--comp-10);}
.modelList div dt .text{ color: #222222; font-size: var(--comp-22); font-weight: 700; line-height: 1.5;}
.modelList div dt .text small{ font-size: var(--comp-18);}
.modelList div dt .more{ color: #222222; font-size: var(--comp-22); font-weight: 700; line-height: 1.5; }
.modelList div dt .more span{ color: #d83b1e; display: block; width: fit-content; font-weight: 900;} 
.modelList div dd{ width: 50%; display: flex;}
.modelList div:nth-child(odd) dd{ justify-content: flex-end; }
.modelList div:nth-child(even) dd{ justify-content: flex-start; }
.modelList div dd img{ width: calc(370cqw / var(--comp-width) * 100); max-width: calc(370cqw / var(--comp-width) * 100); opacity: 0;}
.modelList div:nth-child(odd).scrollin dd img{ animation: modelImageOddAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;}
.modelList div:nth-child(even).scrollin dd img{ animation: modelImageEvenAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;}
.modelList div:first-child.scrollin dd img{ animation-delay: 0s;}
.modelList div:has( + .fireworks)::before{ background-image: url(../img/tab-point01.webp); }
.modelList div.fireworks{ background-image: url(../img/bg-tab-point01.webp); background-repeat: no-repeat; background-position: center center; background-size: contain; padding-top: var(--comp-30); margin-top: calc(var(--comp-30) * (-1));}

@media (prefers-reduced-motion: reduce) {
  .modelList div,
  .modelList div::before,
  .modelList div::after,
  .modelList div dd img{ animation: none; opacity: 1; transform: none;}
}

@keyframes modelImageOddAppear {
0% { opacity: 0; transform: translate(calc(var(--comp-60) * (-1)), calc(var(--comp-60) * (-1))); filter: blur(0.3rem);}
100% { opacity: 1; transform: translate(0, 0); filter: blur(0);}
}

@keyframes modelImageEvenAppear {
0% { opacity: 0; transform: translate(var(--comp-60), calc(var(--comp-60) * (-1))); filter: blur(0.3rem);}
100% { opacity: 1; transform: translate(0, 0); filter: blur(0);}
}

@keyframes modelListItemAppear {
0% { opacity: 0; transform: translateY(calc(var(--comp-30) * (-1)));}
100% { opacity: 1; transform: translateY(0);}
}

@keyframes modelListLineAppear {
0% { opacity: 0; transform: scaleY(0);}
100% { opacity: 1; transform: scaleY(1);}
}

@keyframes modelListDropAppear {
0% { opacity: 0; transform: scale(0.5);}
100% { opacity: 1; transform: scale(1);}
}

/*
 FOOTER
--------------------------------*/
.lpFooter{ margin-top: -1px; background-color: var(--yellow); box-sizing: border-box; padding-top: var(--comp-300); position: relative; overflow: hidden; isolation: isolate; position: relative; z-index: 1; margin-top: calc(var(--comp-100) * (-1));}
.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-zero02.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(--red02);}
.lpFooter .catch .main{ font-size: var(--comp-88); background-color: #fff; width: fit-content; color: var(--red02); 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: var(--red); width: 100%; display: block; padding: var(--comp-170) 0 var(--comp-80); position: relative; background-image: url(../img/bg-wave04.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;}