@charset "utf-8";

:root{
  --base-font: "Zen Kaku Gothic New", sans-serif;

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

  --yellow: #f3ff00;
  --blue: #0045ff;
  --red: #ff4a4a;

  --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-66: calc(66cqw / 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);

}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
	img {
		image-rendering: -webkit-optimize-contrast !important;
	}
}

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; }
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;}
img{ border:none; vertical-align:bottom; -webkit-backface-visibility: hidden; width: 100%; height: auto; max-width: 100%;}

@keyframes objectAppear {
0% { opacity: 0; transform: translateY(var(--comp-30)) scale(0.9); filter: blur(0.4rem);}
70% { opacity: 1; transform: translateY(calc(var(--comp-05) * (-1))) scale(1.03); filter: blur(0);}
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0);}
}

@keyframes objectFloat03 {
0%, 100% { transform: translateY(0);}
36% { transform: translateY(calc(var(--comp-15) * (-1)));}
68% { transform: translateY(var(--comp-10));}
}

@keyframes objectFloat04 {
0%, 100% { transform: translateY(0);}
42% { transform: translateY(var(--comp-10));}
74% { transform: translateY(calc(var(--comp-18) * (-1)));}
}

@keyframes objectFloat05 {
0%, 100% { transform: translateY(0);}
31% { transform: translateY(calc(var(--comp-10) * (-1)));}
63% { transform: translateY(var(--comp-15));}
}

@keyframes objectFloat06 {
0%, 100% { transform: translateY(0);}
39% { transform: translateY(var(--comp-18));}
71% { transform: translateY(calc(var(--comp-10) * (-1)));}
}

@keyframes supergtSlideIn {
0% { opacity: 0; transform: translateX(50%);}
100% { opacity: 1; transform: translateX(0);}
}

@keyframes openingBounceScale {
0% { opacity: 0; transform: scale(0.55);}
58% { opacity: 1; transform: scale(1.08);}
76% { opacity: 1; transform: scale(0.96);}
100% { opacity: 1; transform: scale(1);}
}

@keyframes openingRiseIn {
0% { opacity: 0; transform: translateY(var(--comp-80));}
68% { opacity: 1; transform: translateY(calc(var(--comp-10) * (-1)));}
100% { opacity: 1; transform: translateY(0);}
}

@keyframes mvCatchSway {
0%, 100% { transform: rotate(-8deg);}
50% { transform: rotate(-3.5deg) scale(1.025);}
}

@keyframes mvCatchDropAppear {
0% { opacity: 0; transform: translate(var(--comp-60), var(--comp-40)) rotate(12deg) scale(0.55); filter: blur(0.3rem);}
100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: blur(0);}
}

@keyframes leadDropBeforeAppear {
0% { opacity: 0; transform: translate(var(--comp-60), calc(var(--comp-20) * (-1))) rotate(12deg) scale(0.55); filter: blur(0.3rem);}
100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: blur(0);}
}

@keyframes leadDropAfterAppear {
0% { opacity: 0; transform: translate(calc(var(--comp-60) * (-1)), var(--comp-40)) rotate(-12deg) scale(0.55); filter: blur(0.3rem);}
100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: blur(0);}
}

@keyframes pointListItemAppear {
0% { opacity: 0; transform: translateY(calc(var(--comp-50) * (-1))); filter: blur(0.3rem);}
100% { opacity: 1; transform: translateY(0); filter: blur(0);}
}

@keyframes pointListHeadingAppear {
0% { opacity: 0; transform: rotate(-10deg);}
25% { opacity: 0.35; transform: rotate(8deg);}
50% { opacity: 0.65; transform: rotate(-5deg);}
75% { opacity: 0.9; transform: rotate(3deg);}
100% { opacity: 1; transform: rotate(0);}
}

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

@keyframes priceTableAppear {
0% { opacity: 0; transform: scale(0.8); filter: blur(0.3rem);}
100% { opacity: 1; transform: scale(1); filter: blur(0);}
}

@keyframes regularPriceAppear {
0% { opacity: 0;}
100% { opacity: 1;}
}

@keyframes regularPriceLineDraw {
0% { transform: scaleX(0);}
100% { transform: scaleX(1);}
}

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

@keyframes pointHeadingBalloonAppear {
0% { opacity: 0; transform: scale(0.65); filter: blur(0.3rem);}
100% { opacity: 1; transform: scale(1); filter: blur(0);}
}

@keyframes pointHeadingTitleAppear {
0% { opacity: 0; transform: translateY(calc(var(--comp-30) * (-1))); filter: blur(0.3rem);}
100% { opacity: 1; transform: translateY(0); filter: blur(0);}
}

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

@keyframes whatBoxRightAppear {
0% { opacity: 0; transform: translateX(var(--comp-60)); filter: blur(0.3rem);}
100% { opacity: 1; transform: translateX(0); filter: blur(0);}
}

@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);}
}

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

@keyframes headingMainAppear {
0% { opacity: 0; transform: scale(0.8);}
100% { opacity: 1; transform: scale(1);}
}

/* 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; background-image: url(../img/bg-b01.webp); background-repeat: repeat; background-position: center top; width: 100%; max-width: 740px; margin-inline: auto; overflow: clip; filter: drop-shadow(0 0 var(--comp-10) #005ac2);}
#contents{ mask-image: url(../img/mask.webp), url(../img/bg-wave01.webp); mask-repeat: no-repeat; mask-position: left 0 top calc(var(--comp-150) - 1px),  center 0; mask-size: 100cqw calc(100% - var(--comp-150) + 1px), calc(1500cqw / var(--comp-width) * 100) var(--comp-150);}
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-40) auto 0; z-index: 2; position: relative;}
.btn a{ display: block; background-image: url(../img/bg-y01.webp); color: var(--blue); 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: 900; line-height: 1.2; position: relative; transition: transform 0.3s ease, opacity 0.3s ease;}
.btn a::before{ content: ""; background-image: url(../img/arrow-b.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.02);}
  .btn a:hover::before{ transform: translate(var(--comp-10), -50%);}
}

/*
 HEADER
--------------------------------*/
.lpHeader{ box-sizing: border-box; width: 100%; position: relative; z-index: 2; }
.lpHeader .logo{ width: var(--comp-440); margin-bottom: var(--comp-30); padding: var(--comp-40) var(--comp-40) 0;}
.lpHeader .supergt{ margin-top: calc(var(--comp-80) * (-1)); width: 100cqw; position: relative; right: calc(var(--comp-75) * (-1)); opacity: 0; animation: supergtSlideIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;}

/*
 VISUAL
--------------------------------*/
.visual{ background-image: url(../img/bg-mv.webp); background-repeat: repeat-y; border-radius: 0 0 10000px 10000px; margin-bottom: var(--comp-260);}
.innerVisual{ margin-top: calc(var(--comp-105) * (-1)); position: relative; z-index: 1;}
.innerVisual .vs-img{ display: block; width: calc(100% + var(--comp-60)); position: relative; left: calc(var(--comp-30) * (-1)); opacity: 0; transform-origin: center 58%; animation: openingBounceScale 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;}
.mvCatch{ line-height: 1.1; text-align: center; position: absolute; top: var(--comp-280); width: 100%; opacity: 0; transform-origin: center center; animation: openingBounceScale 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards; z-index: 3;}
.mvCatch::before{ content: ""; display: block; aspect-ratio: 106 / 84; width: calc(106cqw / var(--comp-width) * 100); background-image: url(../img/mv-drop01.webp); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: calc(84cqw / var(--comp-width) * 100 * (-1)); left: var(--comp-20); opacity: 0; transform-origin: center center; animation: mvCatchDropAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards;}
.mvCatch b{ display: block; font-weight: 900; filter: drop-shadow(0 0 0.75rem rgb(11 55 178 / 0.5)); transform: rotate(-8deg); transform-origin: center center; animation: mvCatchSway 3.8s ease-in-out 2s infinite alternate;}
.mvCatch .sub{ color: #fff; font-size: var(--comp-84); display: block; margin-inline: auto;}
.mvCatch .sub small{ font-size: var(--comp-60);}
.mvCatch .main{ color: var(--yellow); font-size: var(--comp-110); display: block; margin-inline: auto;}
.mvCatch .main small{ font-size: var(--comp-84); color: #fff;}
.mvCatch .main .large{ font-size: var(--comp-130); color: #fff; transform: translateY(0.05em); display: inline-block; line-height: 1;}
.innerVisual .object01{ width: calc(344cqw / var(--comp-width) * 100); aspect-ratio: 344 / 218; position: absolute; left: calc(var(--comp-100) * (-1)); bottom: calc(var(--comp-10) * (-1)); opacity: 0; animation: openingRiseIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.55s forwards;}
.innerVisual .object02{ width: var(--comp-230); aspect-ratio: 230 / 260; position: absolute; right: calc(var(--comp-20) * (-1)); bottom: var(--comp-25); opacity: 0; animation: openingRiseIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.7s forwards;}
.leadBox{ margin-top: var(--comp-30); position: relative; padding-bottom: var(--comp-40);}
.leadBox .lead{ text-align: center; font-size: var(--comp-60); color: #e4ffff; font-weight: 900; line-height: 1.4; filter: drop-shadow(0 0 0.7em 002bff); position: relative; z-index: 5;}
.leadBox .lead::before{ content: ""; display: block; aspect-ratio: 70 / 100; background-image: url(../img/mv-drop02.webp); background-repeat: no-repeat; background-position: center center; background-size: contain; width: var(--comp-70); position: absolute; top: var(--comp-30); left: var(--comp-30); opacity: 0; transform-origin: center center;}
.leadBox .lead::after{ content: ""; display: block; aspect-ratio: 70 / 100; background-image: url(../img/mv-drop03.webp); background-repeat: no-repeat; background-position: center center; background-size: contain; width: var(--comp-70); position: absolute; top: calc(var(--comp-100) * (-1)); right: var(--comp-30); opacity: 0; transform-origin: center center;}
.leadBox.scrollin .lead::before{ animation: leadDropBeforeAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;}
.leadBox.scrollin .lead::after{ animation: leadDropAfterAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;}
.leadBox .lead small{ font-size: var(--comp-42); display: block;}
.leadBox .scrollBtn{ width: var(--comp-120); aspect-ratio: 1 / 1; margin: var(--comp-30) auto 0;}
.objectBox{ aspect-ratio: 740 / 448; width: 100%; margin-left: var(--comp-20); position: absolute; pointer-events: none; margin-top: calc(var(--comp-225) * (-1));}
.objectBox .object03{ aspect-ratio: 220 / 202; width: var(--comp-220); position: absolute; left: 0; top: var(--comp-30);}
.objectBox .object04{ aspect-ratio: 210 / 164; width: var(--comp-210); position: absolute; top: 0; right: 0;}
.objectBox .object05{ aspect-ratio: 178 / 158; width: calc(178cqw / var(--comp-width) * 100); position: absolute; left: var(--comp-140); bottom: 0;}
.objectBox .object06{ aspect-ratio: 278 / 222; width: calc(278cqw / var(--comp-width) * 100); position: absolute; right: var(--comp-50); bottom: var(--comp-45);}
.objectBox figure{ opacity: 0;}
.objectBox figure img{ will-change: transform;}
.objectBox.scrollin figure{ animation: objectAppear 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;}
.objectBox.scrollin figure img{ animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
.objectBox.scrollin .object03{ animation-delay: 0.25s;}
.objectBox.scrollin .object04{ animation-delay: 0.45s;}
.objectBox.scrollin .object05{ animation-delay: 0.65s;}
.objectBox.scrollin .object06{ animation-delay: 0.85s;}
.objectBox.scrollin .object03 img{ animation-name: objectFloat03; animation-duration: 7.2s; animation-delay: 1.1s;}
.objectBox.scrollin .object04 img{ animation-name: objectFloat04; animation-duration: 8.1s; animation-delay: 1.35s;}
.objectBox.scrollin .object05 img{ animation-name: objectFloat05; animation-duration: 7.7s; animation-delay: 1.6s;}
.objectBox.scrollin .object06 img{ animation-name: objectFloat06; animation-duration: 8.8s; animation-delay: 1.85s;}

@media (prefers-reduced-motion: reduce) {
  .lpHeader .supergt,
  .innerVisual .vs-img,
  .mvCatch,
  .mvCatch::before,
  .mvCatch b,
  .leadBox .lead::before,
  .leadBox .lead::after,
  .innerVisual .object01,
  .innerVisual .object02,
  .objectBox figure,
  .objectBox figure img{ animation: none; opacity: 1;}
}

/*
 POINT
--------------------------------*/
#point{ background-color: rgb(0 74 255 / 0.6); padding: var(--comp-105) 0 var(--comp-150); mask-image: url(../img/mask.webp), url(../img/bg-wave02.webp); mask-repeat: no-repeat; mask-position: left 0 top 0,  center bottom; mask-size: 100cqw calc(100% - var(--comp-150) + 1px), calc(1500cqw / var(--comp-width) * 100) var(--comp-150);}
#point hgroup .fukidashi{ width: fit-content; margin-inline: auto; margin-bottom: var(--comp-20); opacity: 0; transform-origin: center center;}
#point hgroup .fukidashi img{ display: block; width: var(--comp-220);}
#point hgroup h3{ text-align: center; opacity: 0;}
#point hgroup.scrollin .fukidashi{ animation: pointHeadingBalloonAppear 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
#point hgroup.scrollin h3{ animation: pointHeadingTitleAppear 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;}
#point hgroup h3 small{ display: block; font-weight: 900; font-size: var(--comp-40); color: var(--yellow);}
#point hgroup h3 span{ display: block; font-weight: 900; font-size: var(--comp-60); color: #fff;}
#point h4:has( + .pointList){ aspect-ratio: 376 / 150; width: calc(376cqw / var(--comp-width) * 100); margin: var(--comp-60) var(--comp-40) 0 auto; opacity: 0; transform-origin: 50% 85%;}
#point h4:has( + .pointList).scrollin{ animation: pointListHeadingAppear 0.8s ease-out forwards;}
.pointList{ counter-reset: number 0; margin-bottom: var(--comp-20); margin-top: calc(var(--comp-60) * (-1));}
.pointList li{ position: relative; box-sizing: border-box; opacity: 0;}
.pointList li.scrollin{ animation: pointListItemAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.pointList li:nth-child(odd){ padding-top: var(--comp-60); padding-left: var(--comp-40);}
.pointList li:nth-child(even){ padding-top: var(--comp-65); padding-right: var(--comp-40);}
.pointList li:nth-child(1) .inner,
.pointList li:nth-child(2) .inner,
.pointList li:nth-child(4) .inner{ width: var(--comp-380);}
.pointList li:nth-child(1) .inner{ background-image: url(../img/bg-point01-circle.webp);}
.pointList li:nth-child(2) .inner{ background-image: url(../img/bg-point02-circle.webp);}
.pointList li:nth-child(3) .inner{ background-image: url(../img/bg-point03-circle.webp); width: var(--comp-500); }
.pointList li:nth-child(4) .inner{ background-image: url(../img/bg-point04-circle.webp);}
.pointList li .inner{ background-repeat: no-repeat; background-position: center center; background-size: contain; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.pointList li:nth-child(odd) .inner{ margin-right: auto;}
.pointList li:nth-child(even) .inner{ margin-left: auto;}
.pointList li .inner::before{ counter-increment: number 1; content: "0" counter(number); display: flex; flex-direction: column; justify-content: center; align-items: center; width: var(--comp-150); aspect-ratio: 1 / 1; color: var(--blue); font-size: var(--comp-90); background-color: #fff; line-height: 0; border-radius: 100px; font-weight: 900; box-sizing: border-box; padding-bottom: var(--comp-15); position: absolute; top: 0;}
.pointList li:nth-child(1)::before{ background-image: url(../img/bg-point01.webp); aspect-ratio: 1480 / 760;}
.pointList li:nth-child(2)::before{ background-image: url(../img/bg-point02.webp); aspect-ratio: 1480 / 760;}
.pointList li:nth-child(3)::before{ background-image: url(../img/bg-point03.webp); aspect-ratio: 1480 / 1000;}
.pointList li:nth-child(4)::before{ background-image: url(../img/bg-point04.webp); aspect-ratio: 1480 / 760;}
.pointList li::before{ content: ""; background-repeat: no-repeat; background-position: center center; background-size: contain; display: block; position: absolute; bottom: 0; left: 0; width: 100%; pointer-events: none;}
.pointList li:nth-child(2)::after,
.pointList li:nth-child(4)::after{ content: ""; background-repeat: no-repeat; background-position: center center; background-size: contain; display: block; position: absolute; pointer-events: none;}
.pointList li:nth-child(2)::after{ bottom: 0; left: var(--comp-260); background-image: url(../img/img-point02.webp); aspect-ratio: 320 / 320; width: var(--comp-160);}
.pointList li:nth-child(4)::after{ bottom: var(--comp-225); left: var(--comp-320); background-image: url(../img/img-point04.webp); aspect-ratio: 132 / 312; width: var(--comp-66);}
.pointList li:nth-child(odd) .inner::before{ left: var(--comp-40);}
.pointList li:nth-child(even) .inner::before{ right: var(--comp-40); }
.pointList li:nth-child(odd) p{ color: var(--blue); }
.pointList li:nth-child(even) p{ color: var(--yellow); }
.pointList li p{ font-size: var(--comp-60); font-weight: 900; text-align: center; line-height: 1.2;}
.pointList li p small{ font-size: var(--comp-50); display: block;}
.moreText{ text-align: center; font-weight: 900; font-size: var(--comp-80); line-height: 1.3; color: var(--yellow); margin-bottom: var(--comp-50);}
.moreText > *{ display: block;}
.moreText small{ font-size: var(--comp-50); color: #fff; margin-inline: auto; width: fit-content; padding: 0 var(--comp-25); position: relative; font-feature-settings: "palt"; display: block;}
.moreText small::before,
.moreText small::after{ content: ""; display: block; height: var(--comp-55); width: var(--comp-06); background-color: var(--red); position: absolute; top: 50%; animation: moreTextBlink 1.2s infinite;}
.moreText small::before{ left: 0; transform: rotate(-30deg) translateY(-50%);}
.moreText small::after{ right: 0; transform: rotate(30deg) translateY(-50%);}
.arrowText{ width: var(--comp-660); aspect-ratio: 660 / 306; 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-60); left: var(--comp-40); z-index: 5; color: var(--blue); margin: 0 auto var(--comp-50); opacity: 0;}
.arrowText.scrollin{ animation: pointListItemAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.priceTable{ width: var(--comp-660); margin-inline: auto; border-radius: var(--comp-40); overflow: hidden; display: block; opacity: 0; transform-origin: center center;}
.priceTable.scrollin{ animation: priceTableAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.priceTable tbody{ display: flex; flex-direction: column; gap: 5px;}
.priceTable tr{ display: flex; background-color: #fff; align-items: center;}
.priceTable th{ background-image: url(../img/bg-b02.webp); width: var(--comp-200); height: var(--comp-125); text-align: center; font-size: var(--comp-30); vertical-align: middle; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.priceTable td{ flex: 1; display: flex; box-sizing: border-box; padding: 0 var(--comp-35); gap: var(--comp-15); align-items: center;}
.priceTable td .regular-price{ color: #333; width: fit-content; font-size: var(--comp-36); font-weight: 900; position: relative; line-height: 1; margin-right: auto; order: 1; opacity: 0;}
.priceTable td .regular-price::before{ content: ""; display: block; width: 100%; height: 2px; background-color: var(--red); position: absolute; top: calc(65% - 1px); transform: scaleX(0); transform-origin: left center;}
.priceTable td .regular-price small{ font-size: var(--comp-22);}
.priceTable td::before{ content: ""; order: 2; display: block; width: var(--comp-42); background-image: url(../img/arrow-fee.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; aspect-ratio: 42 / 14; opacity: 0; transform-origin: center center;}
.priceTable td > .red{ order: 3; color: var(--red); font-size: var(--comp-60); font-weight: 900; line-height: 0; display: block; padding-bottom: var(--comp-05); opacity: 0; transform-origin: center center;}
.priceTable td > .red small{ font-size: var(--comp-40);}
.priceTable.scrollin td .regular-price{ animation: regularPriceAppear 0.35s ease 0.9s forwards;}
.priceTable.scrollin td .regular-price::before{ animation: regularPriceLineDraw 0.4s ease 1.25s forwards;}
.priceTable.scrollin td::before{ animation: priceArrowAppear 0.3s ease 1.65s forwards;}
.priceTable.scrollin td > .red{ animation: priceArrowAppear 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.9s forwards;}
.priceTable + .caution{ margin-top: var(--comp-30); text-indent: -1em; padding-left: 1em; font-size: var(--comp-20); font-weight: 500; width: var(--comp-580); margin-inline: auto;}
.whatBox{ margin-top: var(--comp-100); margin-inline: auto;}
.whatBox hgroup{ position: relative; margin-bottom: var(--comp-30);}
.whatBox hgroup::before,
.whatBox hgroup::after{ content: ""; display: block; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 0; opacity: 0;}
.whatBox hgroup::before{ background-image: url(../img/img-what01.webp); width: calc(256cqw / var(--comp-width) * 100); aspect-ratio: 256 / 124; left: 0;}
.whatBox hgroup::after{ background-image: url(../img/img-what02.webp); width: calc(224cqw / var(--comp-width) * 100); aspect-ratio: 224 / 150; right: 0;}
.whatBox hgroup.scrollin::before{ animation: whatBoxLeftAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.whatBox hgroup.scrollin::after{ animation: whatBoxRightAppear 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
.whatBox hgroup h4{ background-image: url(../img/fukidashi-w01.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;  aspect-ratio: 394 / 96; width: calc(394cqw / var(--comp-width) * 100); margin-inline: auto; color: var(--blue); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--comp-36); font-weight: 900; box-sizing: border-box; padding-bottom: var(--comp-15);}
.whiteBox{ width: var(--comp-660); margin-inline: auto; background-color: #fff; border-radius: var(--comp-50); padding: var(--comp-50); box-sizing: border-box; }
.whiteBox > p:not([class]){ font-size: var(--comp-24); font-weight: 500; color: #333;}

@media (prefers-reduced-motion: reduce) {
  #point hgroup .fukidashi,
  #point hgroup h3,
  #point h4:has( + .pointList),
  .pointList li,
  .arrowText,
  .priceTable,
  .priceTable td .regular-price,
  .priceTable td::before,
  .priceTable td > .red,
  .whatBox hgroup::before,
  .whatBox hgroup::after{ animation: none; opacity: 1; transform: none;}
  .moreText small::before,
  .moreText small::after{ animation: none;}
  .priceTable td .regular-price::before{ animation: none; transform: scaleX(1);}
}

/*
 MODEL COURSE
--------------------------------*/
#model-course{ background-color: rgb(0 194 255 / 0.6); padding: var(--comp-140) 0 0; mask-image: url(../img/mask.webp), url(../img/bg-wave03.webp); mask-repeat: no-repeat; mask-position: left 0 top calc(var(--comp-150) - 1px), center top; mask-size: 100cqw calc(100% - var(--comp-150) + 1px), calc(1500cqw / var(--comp-width) * 100) var(--comp-150); margin-top: calc(calc(72cqw / var(--comp-width) * 100) * (-1));}
#model-course hgroup{ margin-bottom: var(--comp-50); }
#model-course hgroup h3{ text-align: center; font-weight: 900; line-height: 1.6; margin-bottom: var(--comp-60);}
#model-course hgroup h3 small{ display: block; color: var(--yellow); font-size: var(--comp-40); line-height: 1.2; opacity: 0;}
#model-course hgroup h3 span{ display: block; font-size: var(--comp-60); opacity: 0; transform-origin: center center;}
#model-course hgroup.scrollin h3 small{ animation: headingSubAppear 0.6s ease forwards;}
#model-course hgroup.scrollin h3 span{ animation: headingMainAppear 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;}
#model-course hgroup h3::after{ content: ""; display: block; width: calc(144cqw / var(--comp-width) * 100); aspect-ratio: 144 / 20; background-image: url(../img/icon-wave-w.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-inline: auto; }
#model-course .catch{ font-size: var(--comp-30); font-weight: 900; line-height: 1.6; text-align: center;}
@media (prefers-reduced-motion: reduce) {
  #model-course hgroup h3 small,
  #model-course hgroup h3 span{ animation: none; opacity: 1; transform: none;}
}
.tabBtn{ width: var(--comp-660); background-image: url(../img/tab-wave.svg);background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--comp-20); justify-content: center; margin-bottom: var(--comp-10);}
.tabBtn li:nth-child(1) button{ background-image: url(../img/tab01.svg);}
.tabBtn li:nth-child(2) button{ background-image: url(../img/tab02.svg);}
.tabBtn li button{ width: var(--comp-280); aspect-ratio: 280 / 83; display: block; background-repeat: no-repeat; background-position: center center; background-size: contain; opacity: 0.65; transition: opacity 0.3s ease;}
.tabBtn li.active button{ opacity: 1;}

@media (any-hover: hover) {
  .tabBtn li button:hover{ opacity: 1;}
}

#model-course > div[id^="day"]{ display: block; height: 0; opacity: 0; padding-bottom: 0;}
#model-course > div[id^="day"].active{ display: block; height: auto; opacity: 1; transition: opacity 0.3s ease;}
.modelList{ background-image: url(../img/bg-tab.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/tab-line.svg); width: var(--comp-10); opacity: 0; transform: scaleY(0); transform-origin: center top;}
.modelList div:nth-child(odd):before{ right: calc(50% + var(--comp-40)); background-image: url(../img/tab-drop01.webp); }
.modelList div:nth-child(even):before{ left: calc(50% + var(--comp-40)); background-image: url(../img/tab-drop02.webp);}
.modelList div::before{ content: ""; display: block; aspect-ratio: 140 / 160; width: var(--comp-70); position: absolute; bottom: 0; background-repeat: no-repeat; background-position: center center; background-size: contain; opacity: 0; transform: scale(0.5); transform-origin: center center;}
.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(--blue); font-size: var(--comp-40); font-weight: 900; margin-bottom: var(--comp-15); line-height: 1;}
.modelList div dt .yellow{ color: var(--yellow); font-size: var(--comp-30); font-weight: 900; line-height: 1.2;}
.modelList div dt .text{ color: #fff; font-size: var(--comp-26); font-weight: 700; line-height: 1.5;}
.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(444cqw / var(--comp-width) * 100); max-width: calc(444cqw / 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;}
@media (prefers-reduced-motion: reduce) {
  .modelList div,
  .modelList div::before,
  .modelList div::after,
  .modelList div dd img{ animation: none; opacity: 1; transform: none;}
}

/*
 FOOTER
--------------------------------*/
.lpFooter{ background-image: url(../img/bg-footer.webp); padding: var(--comp-195) 0 var(--comp-30); mask-image: url(../img/mask.webp), url(../img/bg-wave03.webp); mask-repeat: no-repeat; mask-position: left 0 top calc(var(--comp-150) - 1px), center top; mask-size: 100cqw calc(100% - var(--comp-150) + 1px), calc(1500cqw / var(--comp-width) * 100) var(--comp-150); margin-top: calc(calc(72cqw / var(--comp-width) * 100) * (-1));}
.lpFooter .catch{ text-align: center; line-height: 1.4; }
.lpFooter .catch > b >*{ display: block;}
.lpFooter .catch .sub{ font-size: var(--comp-50); font-weight: 900; opacity: 0;}
.lpFooter .catch .sub small{ font-size: var(--comp-36);}
.lpFooter .catch .main{ color: #ffff6d; font-size: var(--comp-60); opacity: 0; transform-origin: center center;}
.lpFooter .catch.scrollin .sub{ animation: headingSubAppear 0.6s ease forwards;}
.lpFooter .catch.scrollin .main{ animation: headingMainAppear 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;}
.lpFooter .catch .main small{ font-size: var(--comp-50); color: #fff; }
.lpFooter .catch .main .white{ color: #fff;}
@media (prefers-reduced-motion: reduce) {
  .lpFooter .catch .sub,
  .lpFooter .catch .main{ animation: none; opacity: 1; transform: none;}
}
.lpFooter .catch + .btn{ margin-top: var(--comp-40);}
.lpFooter .logo{ width: var(--comp-440); margin: var(--comp-120) auto 0;}