.site-header { border-bottom: var(--stroke) solid var(--color-ink); }
.page { color: var(--color-ink); }

.grid-lime, .grid-navy { background-size: var(--grid-size) var(--grid-size); }
.bg-white.page { background: var(--color-white); }
.grid-lime { background-color: var(--color-lime); background-image: linear-gradient(var(--grid-lime) 1px, transparent 1px), linear-gradient(90deg, var(--grid-lime) 1px, transparent 1px); }
.grid-navy.page { background-color: var(--color-main); background-image: linear-gradient(var(--grid-navy) 1px, transparent 1px), linear-gradient(90deg, var(--grid-navy) 1px, transparent 1px); }

.sv-lime { fill: var(--color-lime); stroke: var(--color-ink); }
.sv-ink { fill: var(--color-ink); }
.sv-main { fill: var(--color-main); }
.sv-grid { stroke: var(--color-ink); stroke-width: 1; opacity: 0.35; }

.bgdeco { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.bgmq { position: absolute; left: 0; right: 0; }
.bgmq--a { top: calc(var(--header-h) + 4%); }
.bgmq--b { bottom: 3%; }
.bgmq .pf-marquee { --pf-speed: 60s; --pf-size: clamp(64px, 20vw, 96px); --pf-color: var(--bgmq-ink); --pf-opacity: 1; font-family: var(--font-en); font-weight: 700; letter-spacing: 0.01em; }
.pf-marquee--rev.is-on .pf-track { animation-direction: reverse; }
.page[data-tone="dark"] .bgmq .pf-marquee { --pf-color: var(--bgmq-white); }
.grid-lime .bgmq .pf-marquee { --pf-color: var(--bgmq-onlime); }
.gd { position: absolute; top: var(--t); width: 19px; height: 19px; }
.bgshape { position: absolute; opacity: 0.09; }
.bgshape--burst { right: -46px; top: 26%; width: 150px; height: 150px; animation: burst-spin 40s linear infinite; }
.bgshape--spark { left: -24px; bottom: 18%; width: 96px; height: 96px; }
.page[data-tone="dark"] .bgshape { opacity: 0.1; }
.page[data-tone="dark"] .bgshape--spark .sv-ink { fill: var(--color-white); }
.grid-lime .bgshape--burst .sv-lime { fill: var(--color-white); }
.gd--l { left: 1px; }
.gd--r { right: 1px; }
.gd--burst { width: 20px; height: 20px; animation: burst-spin 12s linear infinite; }
.gd--spark { animation: twinkle 2.4s ease-in-out infinite; }
.gd--conf { width: 8px; height: 16px; background: var(--color-lime); border: var(--stroke) solid var(--color-ink); rotate: 24deg; }
.gd--r.gd--conf { rotate: -18deg; background: var(--color-main); }
.page[data-tone="dark"] .gd--spark .sv-ink, .page[data-tone="dark"] .gd--spark { fill: var(--color-on-dark); }
.page[data-tone="dark"] .gd--r.gd--conf { background: var(--color-white); }
.grid-lime .gd--l.gd--conf { background: var(--color-white); }
@keyframes twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 0.6; opacity: 0.6; } }

.en-head.pf-mask-reveal { --pf-bar: var(--color-lime); --pf-dur: 650ms; }
.grid-lime .en-head.pf-mask-reveal { --pf-bar: var(--color-white); }
.copy.pf-char-in { --pf-delay: 200ms; --pf-step: 25ms; --pf-dur: 600ms; }
.page .pf-stamp { --pf-delay: 900ms; }

.head { display: grid; gap: var(--sp-1); }
.en-head__in { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.en-head { font-family: var(--font-en); font-weight: 700; font-size: var(--fs-en-head); line-height: 1.1; letter-spacing: 0; color: var(--color-ink); }
.en-head__jp { font-family: var(--font-body); font-weight: 900; font-size: var(--fs-min); letter-spacing: 0.06em; }
.en-head--white { color: var(--color-on-dark); }
.copy { font-family: var(--font-head); font-weight: var(--fw-copy); font-size: var(--fs-copy); line-height: var(--lh-copy); letter-spacing: 0.02em; color: var(--color-main); }
.page[data-tone="dark"] .copy { color: var(--color-on-dark); }
.txt { display: grid; gap: var(--sp-p); }
.kw { font-weight: 900; }
.page[data-tone="light"] .kw { color: var(--color-main); }

.av { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: contain; }
.pillmsg { justify-self: start; padding: 0.5em 1.1em; font-weight: 900; line-height: 1.5; color: var(--color-ink); background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-bubble); }
.pillmsg--lime { background: var(--color-lime); }

.go { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 0 8px 0 1.4em; color: var(--color-ink); background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-pill); transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), gap 300ms var(--ease-out); }
.go__txt { font-weight: 900; font-size: 1.1em; }
.go__ar { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; color: var(--color-ink); }
.go__ar svg { width: 20px; height: 20px; }
.go--navy { margin-top: 1.5em; }
@media (hover: hover) { .go:hover { gap: 32px; background: var(--color-ink); color: var(--color-white); } .go:hover .go__ar { color: var(--color-white); } }

.job-tag { justify-self: start; padding: 0.15em 0.9em; font-weight: 900; color: var(--color-white); background: var(--color-main); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-pill); }
.job-tag--white { color: var(--color-ink); background: var(--color-white); }

.pg-fv .page__inner { gap: 0; padding-left: 0; padding-right: 0; }
.fv-top { position: relative; flex: 1 1 0; min-height: 70px; max-height: 230px; padding-bottom: 14px; }
.reel { height: 100%; overflow: hidden; }
.reel__track { display: flex; gap: 14px; height: 100%; width: max-content; padding-left: var(--gutter); }
.reel__card { flex: 0 0 auto; height: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 8px; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); overflow: hidden; }
.reel__card img { width: 100%; height: 100%; object-fit: contain; }
.reel.is-run .reel__track { animation: reel-run var(--reel-dur, 40s) linear infinite; }
@keyframes reel-run { to { transform: translateX(calc(var(--reel-dist, 600px) * -1)); } }
.fv-oval { position: absolute; left: 10px; bottom: -22px; z-index: 3; width: clamp(128px, 40vw, 176px); height: auto; overflow: visible; }
.fv-burst { position: absolute; right: 10px; top: -16px; z-index: 3; display: grid; place-items: center; width: 84px; height: 84px; }
.fv-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: burst-spin 14s linear infinite; }
.fv-burst__t { position: relative; font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: var(--color-ink); rotate: 10deg; }
@keyframes burst-spin { to { transform: rotate(360deg); } }
.mq-band { flex: 0 0 auto; position: relative; z-index: 2; border-top: var(--stroke) solid var(--color-ink); border-bottom: var(--stroke) solid var(--color-ink); background: var(--color-white); padding: 5px 0; }
.mq-band .pf-marquee { --pf-speed: 32s; --pf-size: 20px; --pf-color: var(--color-ink); --pf-opacity: 1; font-family: var(--font-en); font-weight: 700; letter-spacing: 0.01em; }
.fv-body { display: grid; gap: var(--sp-g); padding: calc(var(--sp-g) + 10px) var(--gutter) 0; }
.copy--big { width: fit-content; font-size: clamp(24px, 7.5vw, 36px); line-height: 1.22; letter-spacing: 0; color: var(--color-ink); }
.copy--big .ln--big { font-size: 1.24em; white-space: nowrap; }
.pg-coach .copy--big { font-size: clamp(22px, 7vw, 30px); }
.pg-coach .copy--big .ln--big { font-size: 1.1em; }
.copy--big .hl { color: var(--color-main); background: linear-gradient(transparent 58%, var(--color-lime) 58%); }   
.copy .maru { display: inline-block; margin: 0 0.1em; padding: 0 0.22em; font-size: 0.8em; vertical-align: 0.08em; color: var(--color-ink); background: var(--color-lime); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-pill); line-height: 1.15; }
.quote-line { font-weight: 900; color: var(--color-main); }
.fv-talk { display: flex; align-items: flex-start; gap: 8px; }
.fv-txt { flex: 1 1 auto; gap: 0.55em; padding: 0.8em 1em; font-weight: 700; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-bubble); }
.fv-txt .body { font-weight: 700; }
@media (max-height: 800px) {
  .fv-talk { position: relative; display: block; }
  .fv-talk .av { position: absolute; right: -6px; top: -16px; z-index: 2; width: 38px; height: 38px; }
  .fv-txt { padding: 0.6em 0.85em; gap: 0.4em; font-size: var(--fs-min); line-height: 1.6; }
  .fv-body { gap: 0.7em; padding-top: 0.9em; }
  .copy--big { font-size: clamp(24px, 7.4vw, 32px); }
}
@media (max-height: 600px) { .fv-top { display: none; } }

.pg-fv.fv-intro .copy--big { opacity: 0; transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(1.12); }
.pg-fv.fv-intro.is-c1 .copy--big { opacity: 1; transition: opacity 300ms ease; }
.pg-fv.fv-intro.is-c2 .copy--big { transform: none; transition: opacity 300ms ease, transform 300ms var(--ease-out); }

.pg-fv .fv-top.rv.is-on { transition-delay: 650ms; }
.pg-fv .mq-band.rv.is-on { transition-delay: 720ms; }
.pg-fv .fv-talk.rv.is-on { transition-delay: 790ms; }

.loader { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.loader__half { position: absolute; left: 0; right: 0; height: 50.5%; background-color: var(--color-lime); background-image: linear-gradient(var(--grid-lime) 1px, transparent 1px), linear-gradient(90deg, var(--grid-lime) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); animation: ld-split 600ms var(--ease-out) 1200ms forwards; }
.loader__half--t { top: 0; border-bottom: var(--stroke) solid var(--color-ink); }
.loader__half--b { bottom: 0; border-top: var(--stroke) solid var(--color-ink); --ld-to: 100%; }
.loader__mark { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; width: min(62vw, 260px); translate: -50% -50%; animation: ld-mark-out 400ms ease 1150ms forwards; }
.loader__oval { width: 100%; height: auto; overflow: visible; animation: ld-pop 600ms cubic-bezier(.34, 1.56, .64, 1) both; }
.loader__mascot { width: 34%; height: auto; margin-bottom: -8%; animation: ld-peek 500ms var(--ease-out) 450ms both; }
@keyframes ld-pop { from { opacity: 0; transform: scale(0.4) rotate(-24deg); } to { opacity: 1; transform: none; } }
@keyframes ld-peek { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes ld-mark-out { to { opacity: 0; transform: scale(1.08); } }
@keyframes ld-split { to { transform: translateY(var(--ld-to, -100%)); } }

.news { position: relative; display: grid; gap: var(--sp-p); }
.news::before { content: ""; position: absolute; left: 22px; top: 50px; bottom: 50px; border-left: var(--stroke) dashed var(--color-ink); transform-origin: 50% 0; }
.news__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.news__stack { display: grid; justify-items: start; gap: 8px; }
.news__note { padding-left: 56px; }
.pillmsg--old { font-size: 1.08em; color: var(--color-on-dark); background: var(--color-main); }
.pillmsg--me { background: var(--color-lime); }
.news .av { transform: scale(0); }
.news .pillmsg { opacity: 0; transform: scale(0.4); transform-origin: 0 50%; }
.news::before { transform: scaleY(0); }
.news .news__note { opacity: 0; transform: translateY(10px); }
.news.is-on .av { transform: none; transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1); }
.news.is-on .news__row--b .av { transition-delay: 850ms; }
.news.is-on .pillmsg { opacity: 1; transform: none; transition: opacity 200ms ease 150ms, transform 420ms cubic-bezier(.34, 1.56, .64, 1) 150ms; }
.news.is-on::before { transform: none; transition: transform 500ms var(--ease-out) 450ms; }
.news.is-on .news__note { opacity: 1; transform: none; transition: opacity 400ms ease 550ms, transform 400ms var(--ease-out) 550ms; }
.news.is-on .pillmsg--me { transition-delay: 950ms; }
.news.is-on .pillmsg--me + .pillmsg--me { transition-delay: 1100ms; }
.page .voice-end__txt.pf-stamp { --pf-delay: 1250ms; --pf-from-scale: 1.6; }
@media (prefers-reduced-motion: reduce) { .news .av, .news .pillmsg, .news::before, .news .news__note { opacity: 1; transform: none; } }
.voice-end { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.voice-end__txt { padding: 0.8em 1.1em; font-weight: 700; background: var(--color-base); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }
.voice-end__spark { width: 34px; height: 34px; }

.hang { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 40px; }
.hang__mascot { position: absolute; right: 18%; top: 0; z-index: 3; width: 92px; height: auto; }
.hang__card { position: relative; display: grid; gap: 8px; padding: 12px 14px 14px; background: var(--color-lime); border: var(--stroke) solid var(--color-ink); }
.hang__close { font-weight: 900; font-size: 1.12em; line-height: 1.5; text-align: center; color: var(--color-ink); }

.ba { display: grid; }
.ba__box { position: relative; display: grid; gap: 4px; padding: 10px 12px 12px; border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }
.ba__box--before { margin-right: 26px; background: var(--color-white); }
.ba__box--now { margin-left: 26px; color: var(--color-on-dark); background: var(--color-main); }
.ba__lbl { display: flex; align-items: baseline; gap: 8px; margin-right: 76px; font-family: var(--font-en); font-weight: 700; line-height: 1; }
.ba__en { font-size: clamp(26px, 8vw, 34px); letter-spacing: 0.02em; }
.ba__box--before .ba__en { color: var(--color-main); }
.ba__box--now .ba__en { color: var(--color-lime); }
.ba__sub { font-size: var(--fs-min); letter-spacing: 0.04em; white-space: nowrap; }
.ba__pic { position: absolute; right: 6px; top: -18px; width: 76px; height: auto; }
.ba__lead { font-weight: 900; }
.ba__box--now .ba__lead { color: var(--color-lime); }
.ba__arrow { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; margin-block: -6px; }
.ba__arrow svg { width: 52px; height: 30px; overflow: visible; }
.ba__arrow-path { fill: var(--color-lime); stroke: var(--color-ink); stroke-width: 4; stroke-linejoin: round; }
.ba__arrow-t { font-family: var(--font-en); font-weight: 700; font-size: var(--fs-min); letter-spacing: 0.08em; color: var(--color-ink); }
.ba .ba__box--before { opacity: 0; transform: translateX(-36px) rotate(-2deg); }
.ba .ba__arrow { opacity: 0; transform: scale(0.2) rotate(-90deg); }
.ba .ba__box--now { opacity: 0; transform: scale(1.35) rotate(3deg); }
.ba.is-on .ba__box--before { opacity: 1; transform: none; transition: opacity 350ms ease 100ms, transform 500ms var(--ease-out) 100ms; }
.ba.is-on .ba__arrow { opacity: 1; transform: none; transition: opacity 200ms ease 550ms, transform 450ms cubic-bezier(.34, 1.56, .64, 1) 550ms; }
.ba.is-on .ba__box--now { opacity: 1; transform: none; transition: opacity 200ms ease 850ms, transform 420ms cubic-bezier(.2, 1.4, .4, 1) 850ms; }
.page .hang__close.pf-stamp { --pf-delay: 1100ms; --pf-from-scale: 1.8; }
@media (prefers-reduced-motion: reduce) { .ba .ba__box--before, .ba .ba__arrow, .ba .ba__box--now { opacity: 1; transform: none; } }
.page.is-active .hang__mascot { transform-origin: 50% 100%; animation: hang-peek 3.6s ease-in-out infinite; }
@keyframes hang-peek { 0%, 100% { rotate: 0deg; } 50% { rotate: -4deg; } }

.head--side { grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.head__fig { width: clamp(84px, 26vw, 120px); height: auto; }
.head__fig--wide { width: clamp(96px, 28vw, 130px); }
.head--side .copy { font-size: min(var(--fs-copy), 5.4vw); }
.head--side .copy .ln { white-space: nowrap; }

.copy--one .ln { display: inline; white-space: nowrap; }
.svc { display: flex; align-items: flex-start; gap: 10px; }
.av--l { width: 52px; height: 52px; }
.svc__bubble { display: grid; gap: var(--sp-p); padding: 0.75em 1.05em; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-bubble); }
.split { display: grid; border-top: var(--stroke) dashed var(--color-ink); }
.split__row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 0.5em 0; border-bottom: var(--stroke) dashed var(--color-ink); }
.split__tag { font-weight: 900; font-size: 1.05em; color: var(--color-main); }
.split dd { font-weight: 700; }
.flag { justify-self: center; padding: 0.45em 1em; font-weight: 900; line-height: 1.55; text-align: center; color: var(--color-white); background: var(--color-main); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }

.price { display: grid; gap: var(--sp-p); }
.price__head { display: flex; align-items: baseline; gap: 10px; }
.price__head::after { content: ""; flex: 1 1 auto; align-self: center; height: 0; border-top: 1px solid var(--color-ink); }
.price__en { font-family: var(--font-en); font-weight: 700; font-size: clamp(24px, 7vw, 30px); line-height: 1.1; }
.price__jp { font-weight: 900; font-size: var(--fs-min); letter-spacing: 0.04em; }
.icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; padding-top: 4px; }

.icons__item { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 4px 8px; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); transition: translate 300ms var(--ease-out); }
.icons__item:nth-child(2) { margin-bottom: 12px; }
.icons__item:nth-child(3) { margin-bottom: 24px; }
.icons__item:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 46%; z-index: 2; width: 12px; height: 12px; border-top: 3px solid var(--color-ink); border-right: 3px solid var(--color-ink); rotate: 45deg; }
.icons__en { font-family: var(--font-en); font-weight: 700; font-size: var(--fs-min); letter-spacing: 0.12em; line-height: 1; color: var(--color-main); }
.icons__pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; background: radial-gradient(circle closest-side, var(--color-lime) 0 92%, transparent 94%); }
.icons__img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.icons__name { padding: 0.05em 0.45em; font-weight: 900; font-size: var(--fs-min); letter-spacing: 0; white-space: nowrap; color: var(--color-white); background: var(--color-main); border-radius: var(--radius-pill); }
.icons .icons__item { opacity: 0; transform: translateY(24px) rotate(-6deg) scale(0.8); }
.icons.is-on .icons__item { opacity: 1; transform: none; transition: opacity 250ms ease, transform 450ms cubic-bezier(.34, 1.56, .64, 1); }
.icons.is-on .icons__item:nth-child(2) { transition-delay: 150ms; }
.icons.is-on .icons__item:nth-child(3) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) { .icons .icons__item { opacity: 1; transform: none; } }
@media (hover: hover) { .icons__item:hover { translate: 0 -4px; } }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.cards__item { display: grid; justify-items: center; gap: 5px; transition: scale 300ms var(--ease-out); }
.cards__pic { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }
.cards__pic img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); object-fit: contain; }
.cards__tag { padding: 0 0.35em; font-weight: 900; font-size: var(--fs-min); letter-spacing: 0; white-space: nowrap; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-pill); }
@media (hover: hover) { .cards__item:hover { scale: 1.05; } }
.blog-foot { display: grid; gap: var(--sp-1); }
.blog-foot__txt { line-height: 1.6; }

.plans-head { display: flex; align-items: center; gap: 12px; }
.plans-head__ic { display: grid; place-items: center; width: 50px; height: 50px; padding: 3px; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: 50%; }
.plans-head__ic img { width: 100%; height: 100%; object-fit: contain; }
.ticket { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px 0 20px; color: var(--color-ink); background: var(--color-lime); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); transition: background var(--dur-hover) var(--ease-out); }
.ticket__en { font-family: var(--font-en); font-weight: 700; font-size: clamp(22px, 6.4vw, 28px); line-height: 1; }
.ticket__jp { flex: 1 1 auto; font-weight: 900; font-size: var(--fs-min); }
.ticket__ar { width: 18px; height: 18px; }
@media (hover: hover) { .ticket:hover { background: var(--color-white); } }
.tiles { flex: 1 1 0; min-height: 56px; max-height: 200px; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: var(--stroke) solid var(--color-ink); background: var(--color-main); }
.tiles__pic { position: relative; grid-row: 1 / 3; min-height: 0; border-right: var(--stroke) solid var(--color-ink); }
.tiles__pic img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.tiles__cell { display: grid; place-content: center; justify-items: center; color: var(--color-on-dark); text-align: center; }
.tiles__cell + .tiles__cell { border-top: var(--stroke) solid var(--color-ink); }
.tiles__en { font-family: var(--font-en); font-weight: 700; font-size: clamp(20px, 6vw, 26px); line-height: 1.1; }
.tiles__jp { font-weight: 900; font-size: var(--fs-min); }
.page.is-active .tiles__pic img { animation: lift 2.4s var(--ease-out) infinite; }
@keyframes lift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.team-en { font-family: var(--font-en); font-weight: 700; font-size: var(--fs-en-xl); line-height: 1; color: var(--color-on-dark); }
.brand-pic { position: relative; flex: 1 1 0; min-height: 56px; max-height: 170px; margin: 0; background: var(--color-base); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }
.brand-pic img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.want { display: grid; gap: 6px; }
.want__box { padding: 0.65em 1em; font-weight: 900; line-height: 1.6; color: var(--color-ink); background: var(--color-lime); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }

.big-quote { justify-self: start; padding: 0.15em 0.8em; font-weight: 900; font-size: 1.12em; line-height: 1.5; color: var(--color-ink); background: var(--color-lime); border: var(--stroke) solid var(--color-ink); rotate: -2deg; }

.next-txt__who { justify-self: start; padding: 0.5em 1em; font-weight: 900; color: var(--color-ink); background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-bubble); }
.next-txt__end { font-weight: 900; font-size: 1.12em; line-height: 1.6; }
.next-txt__hl { color: var(--color-ink); background: linear-gradient(transparent 12%, var(--color-lime) 12%, var(--color-lime) 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.15em; }
.collage { position: relative; flex: 1 1 0; min-height: 60px; max-height: 220px; }

.collage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.page.is-active .collage__img { animation: pop 2.2s var(--ease-out) infinite; }
@keyframes pop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.pg-close .go { color: var(--color-ink); }

.co { display: grid; gap: 1em; padding-left: 16px; border-left: var(--stroke) solid var(--color-ink); }
.co__row { display: grid; gap: 2px; }
.co dt { display: grid; font-weight: 900; color: var(--color-main); }
.co__en { font-family: var(--font-en); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--color-main); }
.co dd { font-weight: 700; }
.co dd a { color: inherit; }
.co-fig { position: relative; flex: 1 1 0; min-height: 60px; max-height: 220px; margin: 0; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }
.co-fig img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }

.pg-req .page__inner, .pg-entry .page__inner { gap: 1.2em; }
.req dd { font-weight: var(--fw-body); }
.req__sub { display: inline-block; padding-left: 1em; }
.entry-card { padding: 1.4em 1.2em; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }
.badge { font-size: var(--fs-min); font-weight: 900; color: var(--color-error); }
.badge--opt { color: var(--color-main); }

@media (max-height: 760px) {
  :root { --fs-copy: 1.42em; --fs-en-head: clamp(24px, 7vw, 30px); }
  .head__fig { width: clamp(64px, 20vw, 92px); }
  .hang { padding-top: 34px; }
  .hang__mascot { width: 78px; }
  .ba__pic { width: 58px; top: -12px; }
  .pg-coach .copy--big { font-size: clamp(22px, 6.4vw, 27px); }
  .pg-civil .page__inner { gap: 0.8em; }
  .icons__pic { aspect-ratio: 2 / 1; }
  .icons__item { gap: 2px; padding: 4px 4px 6px; }
  .icons__en { display: none; }
  .icons__item:nth-child(2) { margin-bottom: 6px; }
  .icons__item:nth-child(3) { margin-bottom: 12px; }
  .price { gap: 0.45em; }
  .ba__lbl { margin-right: 58px; }
  .ba__en { font-size: 24px; }
  .ba__box { padding: 6px 10px 8px; gap: 2px; }
  .ba__arrow { height: 26px; margin-block: -7px; }
  .ba__arrow svg { width: 44px; height: 26px; }
  .pg-coach .head { gap: 2px; }
  .pg-coach .page__inner { gap: 0.6em; }
}
@media (max-height: 700px) {
  .plans-head__ic { width: 40px; height: 40px; }
  .hang__card { gap: 6px; padding: 10px 12px 12px; }
  .blog-foot .en-head { display: none; }
  .cards__pic { aspect-ratio: 3 / 2; }
  .pg-manage .page__inner { gap: calc(var(--sp-g) * 0.7); }
  .pg-manage .txt { gap: calc(var(--sp-p) * 0.7); }
  .pg-manage .pillmsg { padding-block: 0.3em; }
  .pg-coach { font-size: max(var(--fs-min), calc(var(--fs-base) * 0.95)); }
  .hang { padding-top: 26px; }
  .hang__mascot { width: 62px; }
  .ba__sub, .ba__arrow-t { display: none; }
  .hang__close { font-size: 1.04em; line-height: 1.45; }
  .pg-manage { font-size: max(var(--fs-min), calc(var(--fs-base) * 0.92)); }
}
@media (max-height: 600px) {
  :root { --fs-copy: 1.3em; --fs-en-head: 22px; --sp-g: 0.75em; --sp-p: 0.5em; }
  .en-head__jp { display: none; }
  .pillmsg, .svc__bubble, .voice-end__txt, .want__box, .flag { padding-block: 0.35em; }
  .brand-pic, .collage, .tiles, .co-fig, .cards__pic { display: none; }
  .hang { padding-top: 0; }
  .hang__mascot, .ba__pic { display: none; }
  .ba__lbl { margin-right: 0; }
  .copy--big { font-size: 23px; }
  .pg-coach .copy--big { font-size: 20px; }
  .ba__en { font-size: 17px; }
  .hang__close { font-size: 1em; }
  .pg-civil .txt, .price { gap: 0.3em; }
  .icons__pic { aspect-ratio: 9 / 2; }
  .icons__item:nth-child(2) { margin-bottom: 2px; }
  .icons__item:nth-child(3) { margin-bottom: 4px; }
  .pg-civil .page__inner { gap: 0.4em; }
}
@media (min-height: 860px) {
  .news { gap: 1.2em; }
  .av { width: 56px; height: 56px; }
  .news__note { padding-left: 66px; }
  .news::before { left: 27px; top: 58px; bottom: 58px; }
}
@media (min-height: 860px) {
  .fv-body { gap: 1.6em; padding-top: 1.8em; }
  .copy--big { font-size: clamp(28px, 7.5vw, 34px); }
  .fv-txt { gap: 0.9em; padding: 1.3em 1.3em; font-size: 15.5px; line-height: 1.85; }
}
@media (min-height: 1000px) {
  :root { --fs-base: 16.5px; --sp-g: 2.4em; --sp-p: 1.2em; --fs-copy: 1.85em; }
  .head__fig--wide { width: 110px; }
  .fv-top { max-height: 300px; }
  .fv-body { gap: 2.6em; padding-top: 2.6em; }
  .copy--big { font-size: 36px; }
  .fv-txt { gap: 1.35em; padding: 2em 1.7em; font-size: 17px; line-height: 1.95; }
  .fv-oval { width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .gd, .bgshape { animation: none; }
  .page.is-active .hang__mascot, .page.is-active .tiles__pic img, .page.is-active .collage__img, .fv-burst svg { animation: none; }
}

@media (min-width: 960px) {
  .column { border-left: var(--stroke) solid var(--color-ink); border-right: var(--stroke) solid var(--color-ink); }
  .rail-logo__box { display: block; padding: 14px 18px; background: var(--color-white); border: var(--stroke) solid var(--color-ink); border-radius: var(--radius-card); }
  .rail-oval { width: min(100%, 220px); height: auto; overflow: visible; rotate: -4deg; }
  .rail-deco { position: absolute; z-index: 0; height: auto; pointer-events: none; }
  .rail-deco--l { left: 8%; bottom: 5%; width: min(40%, 220px); }
  .rail-deco--r { right: 10%; bottom: 6%; width: min(34%, 180px); }
}