.page__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: var(--grain-size); opacity: var(--grain-opacity); mix-blend-mode: overlay;
}

.ld { position: fixed; inset: 0; z-index: 15; padding-top: var(--header-h); background: var(--color-ink); color: var(--color-on-dark); transition: opacity 600ms var(--load-ease); }
.ld::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: var(--grain-size); opacity: var(--grain-opacity); mix-blend-mode: overlay; }
.ld.is-out { opacity: 0; pointer-events: none; }
.ld__in { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding-block: 1.4rem; }
.ld__mq { min-width: 0; overflow: hidden; white-space: nowrap; }
.ld__track { display: flex; width: max-content; animation: ld-mq 20s linear infinite; }
.ld__mq--top .ld__track { animation-direction: reverse; opacity: var(--load-top-opacity); }
.ld__track span { padding-inline-end: var(--load-gap); font-family: var(--font-en); font-weight: 500; font-size: var(--load-fs); line-height: 1.1; }
.ld__pc { font-variant-numeric: tabular-nums; }
@keyframes ld-mq { to { transform: translateX(-50%); } }
.ld__body { display: grid; gap: 3px; text-align: center; }   
.ld__row { position: relative; display: grid; place-items: center; height: clamp(48px, 14vw, 80px); }
.ld__bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-load-bar); transition: width 800ms var(--load-ease); }
.ld.is-closing .ld__bar { width: 100%; }
.ld__name { position: relative; font-family: var(--font-head); font-weight: 600; font-size: clamp(24px, 7vw, 44px); letter-spacing: 0.04em; line-height: 1; }
.ld__en { position: relative; font-family: var(--font-en); font-weight: 500; font-size: clamp(var(--fs-min), 3.4vw, 16px); letter-spacing: 0.28em; line-height: 1; padding-left: 0.28em; }   

.bgmq { position: absolute; inset: auto 0 6%; z-index: 1; overflow: hidden; white-space: nowrap; pointer-events: none; color: var(--color-on-dark); opacity: 0.07; }
.page[data-tone="light"] .bgmq { color: var(--color-ink); opacity: 0.06; }
.bgmq__track { display: inline-block; font-family: var(--font-stripe); font-size: clamp(80px, 20dvh, 200px); line-height: 1; animation: bgmq 70s linear infinite; animation-play-state: paused; }
.page.is-built .bgmq__track { animation-play-state: running; }
@keyframes bgmq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bgmq__track { animation: none; } }

.tw-c { position: relative; visibility: hidden; }
.tw-on .tw-c { animation: tw-in 1ms linear both; }
.tw-on .hd .tw-c::after {
  content: ""; position: absolute; left: 100%; top: 0.12em; width: 0.5em; height: 1em; background: currentColor;
  opacity: 0; animation: tw-caret var(--tw-ch, 28ms) linear forwards; animation-delay: inherit;
}
@keyframes tw-in { from { visibility: hidden; } to { visibility: visible; } }
@keyframes tw-caret { from, 96% { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-c { visibility: visible; } }

.hd { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-head); line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.hd--xl { font-size: var(--fs-head-xl); line-height: 1.08; }
.head { display: grid; gap: var(--sp-1); }
.txt { display: grid; gap: var(--sp-p); }
.kw { font-weight: 700; }

.boxes { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-box); line-height: 1.16; letter-spacing: var(--ls-head); }
.boxes--kw { font-family: var(--font-body); font-size: 1.12em; letter-spacing: 0.02em; }
.rb { display: inline-block; perspective: 900px; margin-block: 0.06em; opacity: 0; }
.rb.is-on { opacity: 1; transition: opacity 200ms ease calc(var(--d, 0ms) - 200ms); }   
.rb__cube { position: relative; display: inline-block; transform-style: preserve-3d; transition: transform var(--rot-dur) ease-in-out; }
.rb__a, .rb__b { display: block; padding: 0.06em 0.28em 0.1em; backface-visibility: hidden; }
.rb__a { transform: translateZ(var(--box-depth)); background: var(--color-accent); color: var(--color-on-dark-faint); }
.rb__b { position: absolute; inset: 0; transform: rotateX(-90deg) translateZ(var(--box-depth)); background: var(--color-base); color: var(--color-ink); }
.rb.is-on .rb__cube { transform: rotateX(90deg); transition-delay: var(--d, 0ms); }
.rb.is-on .rb__a { opacity: 0; transition: opacity 0s linear calc(var(--d, 0ms) + var(--rot-dur)); }   

.fv::after { content: ""; position: absolute; inset: var(--header-h) calc(var(--gutter) - 1px) 0; z-index: 1; border-inline: 1px solid var(--color-rule-dark); pointer-events: none; }
.fv__head { display: grid; gap: var(--sp-1); padding-block: var(--sp-1) var(--sp-p); border-block: 1px solid var(--color-rule-dark); }
.fv__label { font-family: var(--font-en); font-weight: 600; font-size: clamp(18px, min(7.4vw, 4.2dvh), 40px); line-height: 1; letter-spacing: 0.32em; }
.fv__word { padding-block: 2px; }
.fv .hd { font-family: var(--font-catch); font-weight: 200; letter-spacing: -0.02em; }
.frw { display: block; width: 100%; height: min(40vw, 17.2dvh, 230px); overflow: visible; }
.lg-d, .lg-u { fill: var(--color-frag-b); }
.fr--a { fill: url(#lg-u); }
.fr--d { fill: url(#lg-d); }
.fr--u { fill: url(#lg-u); }
.fr { transform-box: fill-box; transform-origin: 50% 0; opacity: 0; transform: translateY(-18%) scaleY(0.2); }
.fv.is-built .fr { opacity: 1; transform: none; transition: opacity 320ms ease calc(var(--i) * 34ms), transform 520ms var(--ease-out) calc(var(--i) * 34ms); }

.strip {
  --pf-size: var(--fs-ui); --pf-opacity: 1; --pf-color: var(--color-on-dark); --pf-speed: var(--strip-speed);
  margin-inline: calc(var(--gutter) * -1); padding-block: 0.55em;
  font-family: var(--font-en); font-weight: 600; letter-spacing: 0.04em; background: var(--color-accent);
}
.wins { display: grid; margin: 0 calc(var(--gutter) * -1) -2em; padding-bottom: 2em; overflow-x: clip; }   
.win {
  position: relative; display: grid; grid-template-columns: 5.3em 1fr var(--win-img); align-items: center; gap: 0.6em;
  padding: 0.45em var(--gutter); background: var(--color-base); color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  opacity: 0;   
}
.win.is-shown { opacity: 1; }
.win.is-gs .win__img { animation: none; }   
@media (prefers-reduced-motion: reduce) { .win { opacity: 1; } }
.win::after { content: ""; position: absolute; inset: 0; background: var(--color-sink); opacity: 0; pointer-events: none; }

.wins-page .hd { position: relative; z-index: 2; }
.wins-page.is-built .hd { animation: p2-hd calc(var(--p2-hold) + var(--p2-move)) linear both; }
@keyframes p2-hd { 0%, 61.5% { transform: translateY(var(--hd-dy, 0px)); animation-timing-function: var(--ease-out); } 100% { transform: none; } }   
.wins-page .strip, .wins-page .txt { opacity: 0; }
.wins-page.is-built .strip { animation: p2-fade 400ms ease var(--p2-flow) both; }
.wins-page.is-built .txt { animation: p2-fade 300ms ease var(--p2-txt) both; }
.wins-page.is-built .win::after { animation: p2-sink 600ms ease calc(var(--p2-flow) + var(--k) * var(--win-step) + 300ms) both; }
@keyframes p2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes p2-sink { from { opacity: 0; } to { opacity: calc((3 - var(--k)) * 0.09); } }
.win__en { font-family: var(--font-num); font-weight: 700; font-size: 2.15em; line-height: 0.8; letter-spacing: -0.06em; }
.win__t { font-family: var(--font-head); font-weight: 700; font-size: 1.12em; line-height: 1.3; letter-spacing: -0.02em; }
@media (min-width: 768px) { .win__t { font-size: max(1.12em, 18.8px); } }   
.win__img { width: var(--win-img); height: var(--win-img); object-fit: contain; animation: turn 6s ease-in-out infinite alternate; }
@keyframes turn { from { transform: perspective(300px) rotateY(-28deg); } to { transform: perspective(300px) rotateY(28deg); } }

.page--blue::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--color-accent); }
.page--blue .page__inner::before { content: none; }   
.grow .page__inner { font-size: max(1em, 1.85dvh); }   
.company .page__inner { font-size: max(1em, 2.2dvh); }   

.company .sheet { padding-block: 1.2em 1.6em; margin-bottom: 0; }   
.boxes--on-blue .rb__a { background: var(--color-ink); }

.sw-title { display: block; width: 100%; height: clamp(30px, 6dvh, 64px); }
.sw-title text { font-family: var(--font-stripe); font-size: 64px; fill: url(#lg-d); }

.sw-g { position: relative; display: block; flex-shrink: 0; }
.sw-g__a, .sw-g__b { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.sw-g__a text { fill: var(--color-accent); }
.sw-g__b text { fill: var(--color-on-dark); }
.page.is-built .sw-g > .sw-title:first-child { animation: sw-shake 4s steps(1) infinite; }
.page.is-built .sw-g__a { animation: sw-gl-a 4s steps(1) infinite; }
.page.is-built .sw-g__b { animation: sw-gl-b 4s steps(1) infinite; }
@keyframes sw-shake { 0% { transform: translate(-2px, 1px) skewX(-6deg); } 3% { transform: translate(2px, -1px) skewX(5deg); } 6% { transform: translate(-1px, 0); } 9%, 100% { transform: none; } }
@keyframes sw-gl-a {
  0% { opacity: 0.85; clip-path: inset(8% 0 62% 0); transform: translateX(-5px); } 3% { opacity: 0.85; clip-path: inset(48% 0 22% 0); transform: translateX(4px); }
  6% { opacity: 0.85; clip-path: inset(70% 0 4% 0); transform: translateX(-6px); } 9% { opacity: 0.85; clip-path: inset(22% 0 50% 0); transform: translateX(3px); }
  12%, 100% { opacity: 0; clip-path: none; transform: none; }
}
@keyframes sw-gl-b {
  0% { opacity: 0.7; clip-path: inset(58% 0 12% 0); transform: translateX(5px); } 3% { opacity: 0.7; clip-path: inset(12% 0 70% 0); transform: translateX(-4px); }
  6% { opacity: 0.7; clip-path: inset(34% 0 40% 0); transform: translateX(6px); } 9% { opacity: 0.7; clip-path: inset(76% 0 2% 0); transform: translateX(-3px); }
  12%, 100% { opacity: 0; clip-path: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sw-g__a, .sw-g__b { display: none; } }

.msg__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.msg__line { fill: var(--color-accent); }
.msg__glow-in { stop-color: var(--color-accent); stop-opacity: 0.55; }
.msg__glow-out { stop-color: var(--color-ink); stop-opacity: 1; }
.msg__word { font-family: var(--font-stripe); font-size: 150px; fill: var(--color-on-dark-faint); }
.boxes--hd { font-size: 1.5em; line-height: 1.3; }
.msg__r { text-align: right; }

.msg .boxes { font-weight: 700; }
.msg .rb { position: relative; isolation: isolate; margin-block: 0.12em; }
.msg .rb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-accent); clip-path: var(--para); transform: translate(var(--edge), calc(var(--edge) * 0.55)); }
.msg .rb__a, .msg .rb__b { clip-path: var(--para); padding: 0.2em 1em 0.24em; }
@media (max-height: 599px) { .msg .rb__a, .msg .rb__b { padding-block: 0.08em 0.1em; } }
.msg .rb--ink .rb__b { background: var(--color-ink); color: var(--color-on-dark); }
.msg__ul { opacity: 0; }
.tw-on .msg__ul { animation: p2-fade 250ms ease var(--ul-at, 0ms) both; }   

.msg .boxes--hd { font-size: clamp(16px, calc((min(100vw, var(--col)) - 112px) / 14.6), 30px); }   
.msg__koko { position: relative; display: inline-block; font-weight: 800; font-size: 1.8em; line-height: 1.05; letter-spacing: -0.06em; backface-visibility: hidden; }   
.msg__rt { position: absolute; left: -0.05em; bottom: 92%; width: calc(100% + 0.1em); height: auto; mix-blend-mode: multiply; }   
.msg .boxes--hd .rb__a, .msg .boxes--hd .rb__b { padding-top: 1em; }   
.msg__list { display: grid; justify-items: start; }
.msg__tab { font-family: var(--font-body); font-size: 1.12em; letter-spacing: 0.02em; position: relative; z-index: 1; margin-bottom: -0.15em; }
.msg__ul { justify-self: stretch; margin: 0; padding: 0.3em 1em; list-style: none; background: var(--color-base); color: var(--color-ink); box-shadow: var(--edge) calc(var(--edge) * 0.55) 0 var(--color-accent); font-family: var(--font-body); font-weight: 700; font-size: 1.02em; line-height: 1.4; }
.msg__ul li { position: relative; padding: 0.42em 0 0.42em 1.25em; }   
.msg__ul li + li { border-top: 1px solid var(--color-line); }
.msg__ul li::before { content: ""; position: absolute; left: 0; top: calc(0.42em + 0.39em); width: 0.62em; height: 0.62em; background: var(--color-accent); }
.msg .page__inner { font-size: max(1em, 2dvh); }   

#p4 {
  --fs-base: clamp(var(--fs-min), min(2.1dvh, 3.6vw), 16px);
  --sp-p: max(1.1em, calc(3.2dvh - 12px));
  --sp-g: max(1.8em, calc(5dvh - 20px));
}
#p4 .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  grid-template-areas: "photo band" "photo body";
  gap: 0.3em 0.75em;
  align-items: center;
}
#p4 .card__img { grid-area: photo; height: auto; aspect-ratio: 1; }
#p4 .card__img img { object-fit: contain; }
#p4 .card__band { grid-area: band; margin-top: 0; padding: 0.4em 0.55em; }
#p4 .card__band-sm { display: none; }
#p4 .card__band-lg { font-size: 1.1em; }
#p4 .card__body { grid-area: body; padding: 0 0.1em 0.3em; }
#p4 .card__ttl { font-size: 1.12em; }
@media (min-width: 768px) {
  #p4 {
    --fs-base: clamp(var(--fs-min), 2.1dvh, 17px);
    --sp-p: max(1.1em, calc(5dvh - 20px));
    --sp-g: max(1.8em, calc(9dvh - 40px));
  }
}
@media (max-height: 600px) { #p4 { --lh-body: 1.6; } }
@media (max-height: 599px) { #p4 .card { grid-template-areas: "photo body"; } }

.card { position: relative; padding: 6px; background: var(--color-base); color: var(--color-ink); border-radius: var(--radius-s); }
.card__img { position: relative; overflow: hidden; height: var(--card-img-h); background: var(--color-accent); border-radius: 2px; }
.card__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }

.talk__strips { display: grid; margin-inline: calc(var(--gutter) * -1); }
.talk__strip { position: relative; overflow: hidden; height: clamp(26px, calc(9dvh - 34px), 90px); margin: 0; background: var(--color-accent); clip-path: inset(0 100% 0 0); }
.talk__strip:nth-child(2) { clip-path: inset(0 0 0 100%); }
.talk__strip img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); filter: grayscale(1) contrast(1.05) brightness(1.15); mix-blend-mode: multiply; }
.talk__strip::after { content: ""; position: absolute; inset: 0; background: var(--color-base); opacity: 0.22; mix-blend-mode: screen; }
.grow.is-built .talk__strip { animation: talk-strip 700ms var(--ease-out) calc(120ms + var(--k) * 140ms) both; }
@keyframes talk-strip { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .talk__strip, .talk__strip:nth-child(2) { clip-path: none; } }
.grow::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--color-accent); clip-path: polygon(0 44%, 40% 44%, 100% 84%, 100% 100%, 72% 100%, 0 60%); opacity: 0.85; pointer-events: none; }
.grow::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--color-base); clip-path: polygon(62% 34%, 100% 34%, 100% 58%); opacity: 0.1; pointer-events: none; }
.grow .body { font-weight: 700; }
.grow .hd { text-align: center; }   

.card__band {
  display: grid; gap: 0.15em; margin-top: 2px; padding: 0.7em 0.9em 0.75em; color: var(--color-on-dark);
  background: linear-gradient(115deg, var(--color-ink) 0 36%, var(--color-accent) 36% 47%, var(--color-ink) 47% 63%, var(--color-accent) 63% 66%, var(--color-ink) 66%);
}
.card__band-sm { display: flex; gap: 0.9em; font-family: var(--font-en); font-weight: 600; font-size: var(--fs-min); letter-spacing: 0.22em; }
.card__band-sm span { letter-spacing: 0.04em; font-weight: 500; }
.card__band-lg { font-family: var(--font-en); font-weight: 500; font-size: 1.45em; line-height: 1.05; letter-spacing: -0.01em; }
.card:has(.card__band) .card__img { height: calc(var(--card-img-h) - 2em); }   
@media (max-height: 699px) { .card__band { padding-block: 0.4em 0.45em; } .card__band-sm { display: none; } }
@media (max-height: 599px) { .card__band { display: none; } .card:has(.card__band) .card__img { height: var(--card-img-h); } }
.card__body { display: grid; gap: var(--sp-1); padding: 0.55em 0.45em 0.35em; }
.card__tag { justify-self: start; padding: 0.12em 0.55em; font-weight: 700; font-size: max(var(--fs-min), 0.92em); background: var(--color-ink); color: var(--color-on-dark); }
.card__ttl { font-weight: 700; font-size: 1.3em; line-height: 1.32; }

.px__cells { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; pointer-events: none; }
.px__cells i { background: var(--color-ink); }
.page.is-built .px__cells i { opacity: 0; transition: opacity 120ms steps(1) var(--r); }

.stack { position: relative; padding-top: var(--stack-peek); perspective: 1200px; }
.card--back { position: absolute; top: 0; left: 0; right: 0; transform-origin: 50% 10%; opacity: 0.5; }
.card--back .card__img { height: calc(var(--card-img-h) * 0.6); }
.job--stack.is-built .card--back { transform: rotate(-2.67deg) rotateX(40deg) scale(0.7); transition: transform 900ms var(--ease-out) 200ms; }
.steps { display: flex; flex-wrap: wrap; gap: 0.3em 0.35em; font-family: var(--font-head); font-weight: var(--fw-head); font-size: 1.05em; line-height: 1.16; }

.lanes { display: grid; margin-inline: calc(var(--gutter) * -1); }
.lane { --pf-size: 1.55em; --pf-opacity: 1; --pf-color: var(--color-on-dark); --pf-speed: 28s; padding-block: 0.3em; font-family: var(--font-head); font-weight: var(--fw-head); border-top: 1px solid var(--color-on-dark-line); }
.lane:last-child { border-bottom: 1px solid var(--color-on-dark-line); }
.lane--rev.is-on .pf-track { animation-direction: reverse; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; }
.card--sm { padding: 5px 5px 8px; }
.card--sm .card__img { height: var(--duo-img-h); }
.card--l { transform: rotate(-2.67deg); }
.card--r { transform: rotate(2.67deg) translateY(0.5em); }
.card__cap { margin-top: 0.45em; padding-inline: 0.2em; font-weight: 700; font-size: max(var(--fs-min), 0.95em); line-height: 1.45; }
.income { display: grid; line-height: 1.5; }
.income > .kw { display: grid; gap: 0.4em; }   
.income__n { font-family: var(--font-num); font-size: 2.05em; line-height: 1.2; letter-spacing: -0.03em; }

.since__num { display: block; width: 100%; height: clamp(100px, 22dvh, 210px); }
.since__num text { font-family: var(--font-num); font-weight: 700; font-size: 250px; letter-spacing: -0.06em; fill: url(#lg-b); }   
.since__num .since__yr { font-family: var(--font-stripe); font-weight: 400; font-size: 36px; letter-spacing: 0; fill: var(--color-accent); }
.since__num .since__sm { font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; fill: var(--color-ink); }
.lg-b { fill: var(--color-accent); }
.since .strip { margin-bottom: calc(var(--sp-g) * -0.4); }
.boxes--inv .rb__a { background: var(--color-accent); }
.boxes--inv .rb__b { background: var(--color-ink); color: var(--color-on-dark); }

.dream::after { content: ""; position: absolute; inset: 0 calc(var(--gutter) / 2); z-index: 1; border-inline: 1px solid var(--color-rule-dark); pointer-events: none; }

.dream .hd { font-size: clamp(22px, 8vw, 40px); white-space: nowrap; }   
.dream .hd .ln { display: inline; }
.dream__lead { font-family: var(--font-head); font-weight: 600; font-size: 1.2em; line-height: 1.5; }
.dream__pts { padding: 0.15em 1em; background: var(--color-base); color: var(--color-ink); border: 2px solid var(--color-ink); box-shadow: 0.45em 0.45em 0 var(--color-accent); }
.dream__pt { display: grid; grid-template-columns: 4.4em 1fr; gap: 0.8em; align-items: start; padding-block: 0.7em; }
.dream__pt + .dream__pt { border-top: 1px solid var(--color-line); }
.dream__pt .body { line-height: 1.6; }
.dream__tag { padding-top: 0.25em; font-family: var(--font-en); font-weight: 600; font-size: var(--fs-min); letter-spacing: 0.12em; }
.dream__tag .pf-mask-reveal > span { display: inline-block; padding: 0.15em 0.5em; background: var(--color-accent); color: var(--color-on-dark); }
.dream__sink { --pf-size: 2.6em; --pf-opacity: 0.16; --pf-color: var(--color-on-dark); --pf-speed: 34s; margin-inline: calc(var(--gutter) * -1); font-family: var(--font-head); font-weight: var(--fw-head); }

.sheet { padding: 0.6em 1.1em 1.2em; margin: 0.5em 0.6em 0.9em 0.2em; background: var(--color-base); color: var(--color-ink); border-radius: var(--radius-s); border: 2px solid var(--color-ink); box-shadow: 0.55em 0.55em 0 var(--color-ink); outline: 1px solid var(--color-on-dark); outline-offset: 0.35em; }   
.field__opt { padding: 0.1em 0.5em; font-size: var(--fs-min); line-height: 1.4; border: 1px solid var(--color-line); border-radius: var(--radius-s); }

.fv__word, .sw-title, .card, .stack, .duo, .since__num, .lanes, .wins, .strip { flex-shrink: 0; }