.intro { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.intro__half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--color-ink); animation: intro-split 0.75s var(--ease-split) 2.25s both; }
.intro__half--t { top: 0; --to: -100%; }
.intro__half--b { bottom: 0; --to: 100%; }
@keyframes intro-split { to { translate: 0 var(--to); } }
.intro__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: min(2vw, 12px); animation: intro-out 0.75s var(--ease-split) 2.25s both; }
@keyframes intro-out { to { translate: 0 -25%; opacity: 0; } }
.intro__word {
  font-family: var(--font-en); font-weight: 700; font-size: min(34vw, 300px); line-height: 0.9; letter-spacing: -0.01em;
  color: transparent; background: url("assets/intro_collage.webp?v=20261030e") 0% 50% / auto 100%; -webkit-background-clip: text; background-clip: text;
  animation: intro-word 0.6s var(--ease-intro) 0.1s both, intro-pan 3s linear both, intro-zoom 1.4s var(--ease-intro) 0.8s both;
}
@keyframes intro-word { from { translate: 0 30%; opacity: 0; } }
@keyframes intro-pan { to { background-position-x: 100%; } }
@keyframes intro-zoom { to { scale: 1.08; } }
.intro__cone { flex-shrink: 0; width: min(8vw, 72px); height: auto; animation: intro-cone 0.75s var(--ease-snappy) both, intro-hop 0.32s ease-in-out 0.95s 4 alternate; }
.intro__cone--a { --from: 60vh; }
.intro__cone--b { --from: -60vh; animation-delay: 0.15s, 1.1s; }
@keyframes intro-cone { from { translate: 0 var(--from); } }
@keyframes intro-hop { from { rotate: 0deg; } to { rotate: -10deg; } }
.intro__cone-body { fill: var(--color-lime); stroke: var(--color-ink); }
.intro__cone-band { fill: var(--color-white); }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

.wordmark { display: inline-flex; align-items: baseline; gap: 0.3em; color: var(--color-ink); white-space: nowrap; }
.wordmark__ja { font-weight: 700; font-size: var(--fs-min); letter-spacing: 0.06em; }
.wordmark__en { font-family: var(--font-en); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: 0.01em; color: var(--color-main); }
.wordmark--rail .wordmark__ja { font-size: 16px; }
.wordmark--rail .wordmark__en { font-size: 56px; }

.column .site-header { background: var(--color-white); }
.site-header .logo { width: auto; }
.site-header .hb--entry { color: var(--color-ink); background: var(--color-lime); }

.page__inner { word-break: keep-all; overflow-wrap: anywhere; }

.copy { font-weight: var(--fw-copy); font-size: var(--fs-copy); line-height: var(--lh-copy); letter-spacing: var(--ls-copy); color: var(--color-ink); }
.page[data-tone="dark"] .copy { color: var(--color-on-dark); }
.box { padding: 0 0.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.box--lime { color: var(--color-ink); background: var(--color-lime); }
.box--ink { color: var(--color-on-dark); background: var(--color-ink); }
.head { display: grid; gap: var(--sp-1); }
.sec-en { font-family: var(--font-en); font-weight: 700; font-size: 3.1em; line-height: 1; letter-spacing: 0.01em; color: var(--color-main); }
.sec-en--light { color: var(--color-lime); }
.sec-ttl { font-weight: var(--fw-copy); font-size: 1.15em; letter-spacing: 0.06em; }

.page .pf-char-in { --pf-dur: var(--dur-en); --pf-step: 40ms; --pf-delay: 150ms; --pf-dist: 5em; }
.page .pf-film-in { --pf-dur: var(--dur-person); --pf-dist: 22%; --pf-ease: var(--ease-out); }
.page .pf-band-paint { --pf-band: var(--color-ink); --pf-dur: 480ms; }
.page .pf-shake { --pf-dur: 420ms; --pf-amp: 6px; }

.fv .page__inner { gap: var(--sp-g); }
.fv-stage {
  position: relative; flex-shrink: 0; height: clamp(190px, 37dvh, 400px);
  margin-inline: calc(var(--gutter) * -1);
}
.fv-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; }
.fl { opacity: 0; translate: 640px 0; transform-box: fill-box; transform-origin: right center; }
.fl--w { fill: var(--color-white); }
.fl--l { fill: var(--color-lime); }
.lines.is-on .fl {
  animation: fl-in var(--dur-line) var(--ease-out) var(--d) both, fl-pulse 6.4s ease-in-out calc(var(--d) * 9 + 2.2s) infinite;
}
.lines.is-on .fl:nth-child(even) { animation-duration: var(--dur-line), 8s; }
@keyframes fl-in { from { opacity: 0; translate: 640px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fl-pulse { 0%, 70%, 100% { scale: 1 1; } 80% { scale: 0 1; } 88% { scale: 0 1; } }

.fv-en {
  position: absolute; margin: 0; font-family: var(--font-en); font-weight: 700; font-size: var(--fs-en-xl); line-height: 0.9;
  letter-spacing: 0.01em; color: var(--color-white); white-space: nowrap; rotate: var(--tilt); transform-origin: left bottom;
}
.fv-en--top { left: 0.94em; top: calc(100% - 2.5em); z-index: 6; }   
.fv-en--bottom { left: 0; top: calc(100% - 0.9em); z-index: 6; }

.fv-p { position: absolute; bottom: 0; height: 90%; opacity: 0; filter: blur(var(--blur-in)); }
.fv-p img { width: auto; max-width: none; height: 100%; }
.fv-p.is-on { opacity: 1; filter: blur(0); transition: opacity var(--dur-person) ease-out var(--dl), filter var(--dur-person) ease-out var(--dl); }
.fv-p.is-on img { --pf-delay: var(--dl); }
.fv-p--a { left: 7%; bottom: 22%; height: 80%; z-index: 2; --dl: 520ms; }
.fv-p--f { left: 44%; bottom: 26%; height: 76%; z-index: 2; --dl: 900ms; }
.fv-p--b { right: -2%; bottom: 24%; height: 78%; z-index: 2; --dl: 780ms; }
.fv-p--c { left: -8%; height: 100%; z-index: 4; --dl: 600ms; }
.fv-p--d { left: 27%; height: 80%; z-index: 5; --dl: 700ms; }
.fv-p--e { right: -12%; height: 98%; z-index: 4; --dl: 1000ms; }

.fv-tape {
  position: absolute; left: -12%; bottom: 30%; z-index: 3; width: 124%; padding: 0.2em 0; rotate: 8deg;
  --pf-size: 13px; --pf-color: var(--color-ink); --pf-opacity: 1; --pf-speed: 14s;
  font-family: var(--font-en); font-weight: 700; letter-spacing: 0.12em; background: var(--color-lime);
  box-shadow: 0 -3px 0 var(--color-ink), 0 3px 0 var(--color-ink);
}
.fv-ring { position: absolute; right: 3%; bottom: 3%; z-index: 7; width: clamp(64px, 20vw, 104px); height: auto; overflow: visible; }
.fv-ring.is-on { animation: fv-ring 12s linear infinite; }
@keyframes fv-ring { to { rotate: 360deg; } }
.fv-ring__bg { fill: var(--color-lime); }
.fv-ring__t { font-family: var(--font-en); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; fill: var(--color-ink); }
.fv-ring__c { font-family: var(--font-en); font-weight: 700; font-size: 26px; fill: var(--color-main); }
.fv-stage.pf-shake { --pf-delay: 1450ms; --pf-amp: 7px; --pf-dur: 380ms; }

.copy--fv { font-size: 1em; line-height: 1.18; letter-spacing: 0.01em; }
.fv-c1 { font-size: 1.7em; }
.fv-c2 { font-size: 2.45em; }
.fv-c3 { margin-block: 0.42em 0.3em; font-size: 3.3em; line-height: 1.1; }
.copy--fv .pf-char-in--drop { --pf-delay: 150ms; --pf-step: 45ms; --pf-dur: 750ms; }
.copy--fv .fv-c2--late { --pf-delay: 380ms; }
.box--stamp { display: inline-block; --pf-delay: 1000ms; --pf-dur: 460ms; }
.copy--fv .box--stamp { --pf-delay: 1250ms; --pf-dur: 520ms; --pf-from-scale: 2.8; --pf-from-rotate: -14deg; }
.box--tape { position: relative; padding: 0.06em 0.36em 0.06em 0.24em; rotate: -3deg; }
.box--tape::before, .box--tape::after {
  content: ""; position: absolute; left: 0; right: 0; height: 0.16em;
  background: repeating-linear-gradient(-45deg, var(--color-ink) 0 0.14em, var(--color-lime) 0.14em 0.28em) 0 0 / 0.4em 100%;
  animation: tape 1.2s linear infinite;
}
.box--tape::before { top: -0.24em; }
.box--tape::after { bottom: -0.24em; animation-direction: reverse; }
@keyframes tape { to { background-position-x: 0.4em; } }
.fv-body.pf-ln-marker { --pf-bar: var(--color-lime); --pf-ink: var(--color-on-dark); --pf-delay: 1700ms; line-height: 1.8; --pf-step: 120ms; --pf-dur: 520ms; }
.fv-co.pf-slide-left { --pf-delay: 2350ms; --pf-dist: 60px; }
.fv-txt { position: relative; z-index: 7; display: grid; gap: var(--sp-p); }
.fv-body { color: var(--color-on-dark); }
.fv-co { font-weight: 900; font-size: 1.1em; letter-spacing: 0.08em; color: var(--color-on-dark); }
.fv-co__bar { display: inline-block; width: 2px; height: 0.9em; margin-inline: 0.7em; vertical-align: -0.08em; background: var(--color-on-dark); }
.fv-co__en { font-family: var(--font-en); font-size: 1.15em; letter-spacing: 0.14em; }

.cut { position: absolute; z-index: 1; opacity: 0; filter: blur(var(--blur-in)); }
.cut img { width: auto; max-width: none; height: 100%; }
.cut.is-on { opacity: 1; filter: blur(0); transition: opacity var(--dur-person) ease-out var(--dl), filter var(--dur-person) ease-out var(--dl); }
.cut.is-on .pf-film-in { --pf-delay: var(--dl); }
.qa-layout { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: var(--reading-gap); padding-top: var(--qa-top-space); }
.cut--qa { right: 0; bottom: 0; height: var(--qa-figure-h); --dl: 150ms; }
.cut--vision { right: 0; bottom: 0; height: var(--vision-figure-h); --dl: 420ms; }
.cut--plan { right: -4%; bottom: 0; height: 118%; z-index: 2; --dl: 600ms; }
.cut--w1 { left: -4%; bottom: 0; height: 88%; --dl: 150ms; }
.cut--w2 { right: 2%; bottom: 0; height: 104%; z-index: 2; --dl: 320ms; }
.cut--pro { right: 3%; bottom: 0; height: 100%; --dl: 150ms; }

.copy--xl { font-size: calc(var(--fs-copy) * 1.12); }
.box--blue { color: var(--color-on-dark); background: var(--color-main); }
.lines--corner { position: absolute; top: var(--header-h); right: 0; z-index: 1; width: 72%; height: 38%; overflow: hidden; }
.qa .qa-body { font-size: var(--qa-body-size); line-height: 1.75; }
.close-box { display: grid; gap: 0.25em; font-weight: var(--fw-copy); font-size: 1.12em; line-height: 1.5; }
.chip { display: inline-block; margin: 0.15em 0.3em 0.15em 0; padding: 0 0.4em; line-height: 1.7; color: var(--color-main); background: var(--color-white); }
.chip--lime { color: var(--color-ink); background: var(--color-lime); }
.copy--boxes { font-size: 1.5em; line-height: 1.55; }
.bx, .bxp { padding: 0.06em 0.32em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bx { color: var(--color-ink); background: var(--color-white); }
.bxp { color: var(--color-main); }
.page .bxp.pf-band-paint { --pf-band: var(--color-white); --pf-delay: calc(200ms + var(--k) * 150ms); padding: 0.06em 0.32em; }
.en-bg {
  position: absolute; margin: 0; font-family: var(--font-en); font-weight: 700; line-height: 0.9; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px var(--color-on-dark-line); opacity: 0.55;
}
.pay { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em 0.7em; }
.pay__tag { padding: 0.15em 0.8em; font-weight: var(--fw-copy); color: var(--color-on-dark); background: var(--color-ink); border-radius: var(--radius-pill); }
.pay__v { display: inline-flex; align-items: baseline; gap: 0.15em; font-weight: var(--fw-copy); }
.pay__num { font-family: var(--font-en); font-weight: 700; font-size: 2.1em; line-height: 1; letter-spacing: 0.01em; }

.pg-lime { background: var(--color-lime); }
.quotes { position: relative; z-index: 2; font-weight: 700; font-size: var(--fs-quote); line-height: var(--lh-quote); letter-spacing: 0.02em; color: var(--color-on-dark); }
.quotes .q { display: inline-block; margin-block: 0.17em; }
.quotes .pf-band-paint { --pf-delay: calc(260ms + var(--k) * 200ms); }
.quotes .q.pf-shake.is-on { --pf-delay: calc(1250ms + var(--k) * 80ms); rotate: var(--tilt-q); transition: rotate 260ms var(--ease-out) calc(1500ms + var(--k) * 80ms); }
.quotes .q:nth-child(1) { --tilt-q: -2.5deg; }
.quotes .q:nth-child(3) { --tilt-q: 2deg; }
.quotes .q:nth-child(5) { --tilt-q: -1.5deg; }
.qa .close-ln { color: var(--color-main); }

.en-stack { position: relative; display: grid; font-family: var(--font-en); font-weight: 700; font-size: clamp(52px, 17vw, 84px); line-height: 1.02; color: var(--color-white); }
.en-stack__l { margin: 0; white-space: nowrap; }
.en-stack__l--2 { padding-left: 0.9em; }
.en-stack .pf-char-in { --pf-dist: 0.9em; --pf-step: 45ms; }
.en-stack__l--2.pf-char-in { --pf-delay: 330ms; }
.hand { position: absolute; left: -0.1em; bottom: -0.32em; width: 1.6em; height: auto; overflow: visible; }
.hand__t { font-family: "Yellowtail", cursive; font-size: 74px; fill: transparent; stroke: var(--color-lime); stroke-width: 1.6; }
.hand__t.pf-line-draw { --pf-dur: 1100ms; --pf-delay: 600ms; stroke-dasharray: 420; stroke-dashoffset: 420; }
.hand__t.is-on { fill: var(--color-lime); transition: fill 400ms ease 1500ms; }
.vision-layout { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: var(--reading-gap); padding-top: var(--vision-head-space); }
.body--vision { font-size: var(--vision-body-size); line-height: 1.7; }
.ln--fit { letter-spacing: -0.03em; text-wrap: balance; }

.plan {
  position: relative; padding: 1.1em 1.2em 1.2em; color: var(--color-on-dark); border-radius: 12px;
  background: var(--color-main) radial-gradient(circle, var(--color-on-dark-line) 1px, transparent 1.6px) 0 0 / 16px 16px;
  --pf-ink: var(--color-ink); --pf-delay: 300ms;
}
.plan__tag { display: inline-block; margin-bottom: 0.5em; padding: 0.1em 0.6em; font-weight: var(--fw-copy); font-size: 1.05em; color: var(--color-ink); background: var(--color-lime); rotate: -3deg; --pf-delay: 820ms; }
.plan__list { display: grid; gap: 0.2em; max-width: 62%; font-weight: var(--fw-copy); font-size: 1.18em; line-height: 1.5; }
.plan__list li { display: flex; align-items: center; gap: 0.5em; }
.plan__list li::before { content: ""; flex-shrink: 0; width: 0.8em; height: 0.8em; border: 2px solid var(--color-lime); }
.plan__etc { margin-top: 0.2em; font-weight: 700; }
.plan__bar {
  display: block; width: 0; max-width: 62%; height: 12px; margin-top: 0.7em;
  background: repeating-linear-gradient(var(--tilt), var(--color-lime) 0 9px, var(--color-ink) 9px 18px);
}
.plan__bar.is-on { width: 62%; transition: width 1200ms var(--ease-out) 900ms; }
.build .close { color: var(--color-main); font-size: 1.08em; line-height: 1.7; }

.collage { position: relative; flex-shrink: 0; height: clamp(160px, 31dvh, 300px); margin-inline: calc(var(--gutter) * -1); }
.collage .en-bg { left: -0.05em; bottom: 0.1em; font-size: clamp(80px, 26vw, 128px); }

.pro-stage { position: relative; flex-shrink: 0; height: clamp(150px, 35dvh, 340px); margin: 0 calc(var(--gutter) * -1) -4.4em; }
.en-bg--pro { left: 0.1em; top: 0.3em; font-size: clamp(54px, 17vw, 84px); }
.copy--pro { position: relative; z-index: 2; }
.pay--pro { color: var(--color-on-dark); }
.pay__badge {
  display: grid; place-items: center; width: 4.6em; height: 4.6em; font-weight: var(--fw-copy);
  color: var(--color-ink); background: var(--color-lime); border-radius: 50%; --pf-delay: 700ms;
}

.page[data-mq] { --mq-c: var(--mq-light); --hatch: var(--hatch-light); background-image: repeating-linear-gradient(60deg, transparent 0 26px, var(--hatch) 26px 27px); }
.page[data-mq][data-tone="dark"] { --mq-c: var(--mq-dark); --hatch: var(--hatch-dark); }
.pg-lime[data-mq] { --mq-c: var(--mq-ink); --hatch: var(--hatch-ink); }
.page[data-mq]::before, .page[data-mq]::after {
  content: attr(data-mq); position: absolute; left: -10%; z-index: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--font-en); font-weight: 700; font-size: clamp(64px, 20vw, 112px); line-height: 1; letter-spacing: 0.01em;
  color: transparent; -webkit-text-stroke: 1.5px var(--mq-c);
  transform: rotate(var(--tilt)); transform-origin: 0 50%; animation: bgmq 46s linear infinite;
}
.page[data-mq]::before { top: 46%; }
.page--long[data-mq] { contain: paint; }
.page[data-mq]::after { top: 92%; animation-duration: 54s; animation-direction: reverse; }
@keyframes bgmq { from { transform: rotate(var(--tilt)) translateX(0); } to { transform: rotate(var(--tilt)) translateX(-50%); } }

[data-thud] { --on: var(--color-ink); }
[data-thud] .box--ink, [data-thud] .bx--ink { --on: var(--color-on-dark); }
[data-thud] .c { display: inline-block; opacity: 0; }
[data-thud].is-on .c { animation: thud 520ms cubic-bezier(0.25, 1.6, 0.5, 1) var(--ct) both, ink 260ms linear calc(var(--ct) + 300ms) both; }
@keyframes thud { 0% { opacity: 0; transform: translateY(-0.7em) scale(1.35); } 60% { opacity: 1; transform: translateY(0.06em) scale(0.96, 1.06); } 100% { opacity: 1; transform: none; } }
@keyframes ink { from { color: var(--color-line); } to { color: var(--on); } }
.lead { position: relative; z-index: 3; transform-origin: left center; }
.lead.is-on { animation: lead 1450ms var(--ease-split) both; }
@keyframes lead { 0%, 64% { translate: 0 var(--cy, 0px); scale: 1.14; } 100% { translate: 0 0; scale: 1; } }
.rv.late { transform: none; }
.rv.late.is-on { transition-delay: var(--al, 1600ms); }
.qa .quotes { --al: 1250ms; }
.qa .quotes .pf-band-paint { --pf-delay: calc(1300ms + var(--k) * 160ms); }
.qa .quotes .q.pf-shake.is-on { --pf-delay: calc(1950ms + var(--k) * 80ms); transition-delay: calc(2200ms + var(--k) * 80ms); }
.qa .body { --al: 1700ms; }

.plan__list li { position: relative; }
.plan__list li::after {
  content: ""; position: absolute; left: 0.2em; top: 50%; width: 0.62em; height: 0.32em; margin-top: -0.3em;
  border-left: 3px solid var(--color-lime); border-bottom: 3px solid var(--color-lime); rotate: -45deg; scale: 0; transform-origin: 30% 70%;
}
.plan.is-on .plan__list li::after { animation: chk 380ms cubic-bezier(0.3, 1.7, 0.5, 1) calc(1250ms + var(--c) * 300ms) both; }
@keyframes chk { from { scale: 0; } to { scale: 1.25; } }

.rk-layout { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: var(--reading-gap); padding-top: var(--rk-top-space); }
.cut--rk { right: 0; bottom: 0; height: var(--rk-figure-h); --dl: 200ms; }
.cut--rk .pf-jump-in { --pf-delay: 350ms; --pf-dur: 800ms; }
.rk-tag {
  align-self: flex-start; padding: 0.25em 0.8em; font-family: var(--font-en); font-weight: 700; font-size: 1.05em; letter-spacing: 0.2em;
  color: var(--color-lime); background: var(--color-ink); transform: skewX(-12deg);
}
.rk-copy { position: relative; z-index: 2; font-size: 1.8em; line-height: 1.36; }
.rk-copy .bx { padding: 0.02em 0.22em; }
.bx--ink { color: var(--color-on-dark); background: var(--color-ink); }
.newbie .rk-body { position: relative; z-index: 2; font-size: var(--rk-body-size); line-height: 1.55; --al: 1300ms; }

.rk-tail { padding-right: calc(var(--rk-figure-h) * 411 / 900 - var(--gutter) + 10px); }
.pay--rk { position: relative; z-index: 2; flex-direction: column; align-items: flex-start; gap: 0.3em; color: var(--color-ink); --al: 1550ms; }
.pay--rk .pay__num { font-size: var(--rk-pay-num); }

.page.pg-ink { background-color: var(--color-ink); }
.benefit .box--stamp { --pf-delay: 350ms; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-weight: var(--fw-copy); perspective: 900px; }
.tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.2em 0.55em; min-height: 3.4em; padding: 0.55em 0.75em; line-height: 1.35;
  opacity: 0; transform: rotateX(-90deg); transform-origin: 50% 0;
}
.tiles.is-on .tile { animation: flip 620ms cubic-bezier(0.3, 1.4, 0.5, 1) calc(600ms + var(--c) * 110ms) both; }
@keyframes flip { 0% { opacity: 0; transform: rotateX(-90deg); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.tile__ic { width: 1.7em; height: 1.7em; }
.tile--big { grid-column: 1 / -1; color: var(--color-on-dark); background: var(--color-main); }
.tile--big .tile__ic { width: 2.4em; height: 2.4em; color: var(--color-lime); }
.tile__main { font-size: 1.15em; }
.tile__num { margin-inline: 0.06em; font-family: var(--font-en); font-weight: 700; font-size: 2.6em; line-height: 1; color: var(--color-lime); }
.tile__note { grid-column: 1 / -1; font-weight: 500; font-size: var(--fs-min); line-height: 1.6; }
.tile--lime { color: var(--color-ink); background: var(--color-lime); }
.tile--white { color: var(--color-ink); background: var(--color-white); }
.tile--blue { color: var(--color-on-dark); background: var(--color-main); }
.tile--wide { grid-column: 1 / -1; }
.tile--etc { display: block; min-height: 0; padding: 0.2em 0.2em 0; font-size: var(--fs-min); color: var(--color-on-dark); }
.paren { font-size: max(var(--fs-min), 0.82em); }
.benefit .body { --al: 1500ms; }
.one-line { letter-spacing: 0; font-feature-settings: "palt"; }

.climb { position: relative; flex-shrink: 0; height: clamp(240px, 46dvh, 440px); }
.climb__bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 8px; }
.bar {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.45em; height: var(--h); padding: 1.6em 0 0.35em;
  color: var(--color-ink); background: var(--color-lime); transform-origin: 50% 100%; scale: 1 0;
}
.bar:nth-child(even) { background: var(--color-white); }
.climb.is-on .bar { animation: grow 680ms cubic-bezier(0.3, 1.3, 0.5, 1) calc(450ms + var(--c) * 220ms) both; }
@keyframes grow { from { scale: 1 0; } to { scale: 1 1; } }
.bar__lv { font-family: var(--font-en); font-weight: 700; font-size: 1.1em; line-height: 1; color: var(--color-main); }
.bar__t { writing-mode: vertical-rl; font-weight: var(--fw-copy); font-size: max(var(--fs-min), 0.92em); line-height: 1.4; letter-spacing: 0; }
.climb__arrow {
  position: absolute; left: 4%; bottom: 66%; z-index: 1; width: 66%; height: 6px; background: var(--color-lime);
  rotate: -24deg; transform-origin: 0 50%; scale: 0 1;
}
.climb__arrow::after { content: ""; position: absolute; right: -14px; top: -9px; border-left: 18px solid var(--color-lime); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.climb.is-on .climb__arrow { animation: arrow 900ms var(--ease-out) 1300ms both; }
@keyframes arrow { from { scale: 0 1; } to { scale: 1 1; } }
.cut--climb { right: 0; bottom: calc(90% + 1.7em); height: 30%; z-index: 2; --dl: 1450ms; }
.cut--climb .pf-jump-in { --pf-delay: 1500ms; }
.grow .body { --al: 1900ms; }

.req--co { border-top: 2px solid var(--color-ink); }
.company .cta { align-self: center; }

.req-page .req { border-top-color: var(--color-ink); }
.req-page .req dt { font-weight: 900; color: var(--color-main); }
.palt { font-feature-settings: "palt"; }

.entry-bg { margin: 0.3em 0 -0.35em; font-family: var(--font-en); font-weight: 700; font-size: 6.2em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--color-on-dark-line); opacity: 0.6; }
.entry-page .head { position: relative; z-index: 1; }
.entry-people { position: absolute; right: calc(var(--gutter) * -1); top: calc(var(--header-h) + 0.6em); z-index: 0; width: 60%; height: clamp(220px, 40dvh, 340px); }
.cut--e1 { right: 30%; bottom: 0; height: 88%; --dl: 150ms; }
.cut--e2 { right: -6%; bottom: 0; height: 100%; --dl: 300ms; }
.copy--entry .ln { display: block; }
.entry-card { position: relative; z-index: 1; padding: 1.4em 1.1em 1.6em; color: var(--color-ink); background: var(--color-white); }
.badge { margin-left: 0.2em; padding: 0.05em 0.5em; font-size: var(--fs-min); line-height: 1.5; color: var(--color-on-dark); background: var(--color-main); }
.badge--opt { color: var(--color-ink); background: var(--color-lime); }

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 56px; padding: 0 1.6em;
  font-weight: 900; letter-spacing: 0.08em; border-radius: var(--radius-pill);
}
.cta--lime { color: var(--color-ink); background: var(--color-lime); }
.cta__ar { width: 1.1em; height: 1.1em; }
.req-page .cta { align-self: center; margin-top: var(--sp-g); }

@media (min-width: 960px) {
  .rail { background: var(--color-pale) repeating-linear-gradient(var(--tilt), transparent 0 46px, var(--color-deco-line) 46px 48px); }
  .rail--left .rail-logo { gap: 18px; }
  .rail--left .rail-logo__en { font-family: var(--font-en); letter-spacing: 0.32em; }
  .rail--left .rail-logo__jobs { color: var(--color-ink); }
  .rail-side__page .rail-side__now { font-family: var(--font-en); font-weight: 700; font-size: 64px; }
  .rail-side .btn--fill { color: var(--color-ink); background: var(--color-lime); }
}

@media (max-height: 600px) {
  .fv .body { line-height: 1.75; }
  .fv-en { font-size: calc(var(--fs-en-xl) * 0.72); }
  .req--co .req__row { padding-block: 0.5em; }
  .fv-stage { height: clamp(150px, 31dvh, 260px); }
  .copy--fv { font-size: 0.82em; }
  .rk-copy { font-size: 1.38em; }
  .newbie .rk-body { line-height: 1.45; }
  .qa .qa-body { line-height: 1.6; }
  .rk-tag { font-size: max(var(--fs-min), 0.9em); }
  .pay--rk { flex-direction: row; align-items: center; }
  .pay--rk .pay__num { font-size: 1.55em; }
  .en-stack { font-size: clamp(40px, 12.5vw, 64px); }
  .company .sec-en { font-size: 2.4em; }
}

@media (max-height: 700px) {
  .pro-stage { height: clamp(130px, 27dvh, 220px); }
}

@media (min-height: 860px) {
  .tile { padding: 0.8em 0.9em; }
  .tile--etc { min-height: 0; }
  .climb { height: clamp(300px, 46dvh, 480px); }
  .collage { height: clamp(260px, 36dvh, 400px); }
  .plan { padding: 1.6em 1.4em 1.7em; }
  .plan__list { gap: 0.45em; }
  .page .body:not(.rk-body):not(.qa-body):not(.body--vision) { line-height: 2.2; }
  .req--co .req__row { padding-block: 1.15em; }
  .tile { min-height: 5.6em; }
  .build .page__inner { gap: 3.1em; }
  .plan__list { font-size: 1.3em; }
}

.hero__video::-webkit-media-controls, .hero__video::-webkit-media-controls-start-playback-button { display: none; -webkit-appearance: none; }