.plane { position: absolute; z-index: 0; top: 0; bottom: 0; background: var(--grain), var(--color-main); clip-path: inset(0 100% 0 0); transition: clip-path 800ms var(--ease-out); }
.plane--full { left: 0; right: 0; }
.pg-about .plane { background: var(--grain), var(--bg-fv); }
.pg-concept .plane { background: var(--grain), var(--bg-p2); }
.pg-concept .head { justify-self: start; align-self: flex-start; padding: 0.55em 0.9em 0.6em; margin-left: calc(var(--gutter) * -1); padding-left: var(--gutter); background: var(--color-p2-plate); }   
.pg-concept .voice { color: var(--color-ink); background: var(--color-p2-veil); border-color: var(--color-p2); }
.pg-concept .voice::after { border-color: var(--color-p2); background: var(--color-base); }
.pg-concept .voice__cap { color: var(--color-p2); }
.pg-concept .card { color: var(--color-p2); border-color: var(--color-p2); }
.pg-concept .card::before { background: var(--color-p2); }
.pg-msg .plane { background: var(--grain), var(--bg-p3); }
.page.is-active .plane { clip-path: inset(0 0 0 0); }

.slider > .page { background: var(--grain), var(--color-base); }
.slider > .page[data-tone="dark"] { background: var(--grain), var(--color-base); color: var(--color-on-dark); }
.site-header .logo { width: 148px; }
.site-header .hb { letter-spacing: 0.08em; }
.page--hero .hero__swipe { padding: 0 0 6px; background: none; color: var(--color-on-dark); border-bottom: 1px solid currentColor; }
.req .req__row { grid-template-columns: 5.2em 1fr; color: var(--color-ink); }
@media (min-width: 960px) {
  .rail--left .rail-logo__en, .rail--left .rail-logo__jobs { color: var(--color-on-dark); }
  .rail-side .rail-side__now { font-family: var(--font-en); font-weight: 400; font-size: 120px; }
}

.sec-en { display: flex; justify-content: center; font-family: var(--font-en); font-weight: 400; font-size: var(--fs-en-xl); line-height: 1; letter-spacing: var(--ls-en); color: var(--color-main); }
.sec-en--light { color: var(--color-on-dark); }
.pg-mq .sec-en--light { text-shadow: 0 0 3px var(--color-shade), 0 0 10px var(--color-shade); }
.pg-concept .sec-en--light, .pg-concept .concept__ttl { color: var(--color-p2); text-shadow: none; }
.pg-msg .sec-en--light { color: var(--color-on-dark); text-shadow: none; }
.sec-en__t { position: relative; padding-bottom: 0.14em; }
.sec-en__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--line-w); background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out); }
.sec-en__t.is-on::after { transform: scaleX(1); transition-delay: 450ms; }
.pg-mq .sec-en__t.is-on::after { transition-delay: calc(var(--mq-wait) + 350ms); }
.head { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--sp-1); text-align: center; }
.head--l { justify-items: start; text-align: left; }
.head--l .sec-en { justify-content: flex-start; }
.txt { display: grid; gap: var(--sp-p); }
.page__inner > * { position: relative; z-index: 1; }

.pf-char-in { --pf-dur: 850ms; --pf-step: 45ms; --pf-delay: 300ms; --pf-dist: 3em; --pf-ease: cubic-bezier(0.08, 0.82, 0.17, 1); }
.pf-char-in .pf-c { position: relative; opacity: 0; }
.pf-char-in.is-on .pf-c { opacity: 1; animation: pf-char-in-from-l var(--pf-dur) var(--pf-ease) calc(var(--pf-delay) + var(--i, 0) * var(--pf-step)) both; }
@keyframes pf-char-in-from-l { from { left: calc(var(--pf-dist) * -1); opacity: 0; } 25% { opacity: 1; } to { left: 0; opacity: 1; } }

.pf-line-draw { --pf-dur: 1000ms; --pf-delay: 300ms; --pf-ease: ease-out; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pf-line-draw.is-on { animation: pf-line-draw var(--pf-dur) var(--pf-ease) var(--pf-delay) forwards; }
@keyframes pf-line-draw { to { stroke-dashoffset: 0; } }

.pf-jump-in { --pf-dur: 750ms; --pf-delay: 0ms; --pf-rise: 80%; --pf-from: 0.4; --pf-ease: var(--ease-back); translate: 0 var(--pf-rise); scale: var(--pf-from); opacity: 0; }
.pf-jump-in.is-on { animation: pf-jump-in var(--pf-dur) var(--pf-ease) var(--pf-delay) both, pf-float 2.8s ease-in-out calc(var(--pf-delay) + var(--pf-dur)) infinite alternate; }
@keyframes pf-jump-in { from { translate: 0 var(--pf-rise); scale: var(--pf-from); opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes pf-float { from { translate: 0 0; rotate: -1.5deg; } to { translate: 0 -8px; rotate: 1.5deg; } }

.corner::before, .corner::after { content: ""; position: absolute; z-index: 2; width: 48px; height: 48px; border: 0 solid currentColor; pointer-events: none; }
.corner::before { left: -12px; top: -12px; border-width: 1.5px 0 0 1.5px; }
.corner::after { right: -12px; bottom: -12px; border-width: 0 1.5px 1.5px 0; }

.mq-hero { position: absolute; z-index: 0; left: 50%; top: calc(var(--header-h) + 1.2dvh); height: var(--p1-mq-h); width: auto; max-width: none; translate: -50% 75dvh; filter: contrast(1.05); transition: translate 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.pg-mq.is-active .mq-hero { translate: -50% 0; transition-delay: 50ms; }
.pg-mq .rv.is-on { transition-delay: var(--mq-wait); }
.pg-mq .pf-char-in { --pf-delay: var(--mq-wait); }

.pg-about .page__inner { gap: 0; justify-content: flex-start; }   
.fv { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; margin-inline: calc(var(--gutter) * -1); container-type: size; }   
.fv__box { position: relative; width: min(100cqw, 100cqh * 1089 / 947); margin-inline: auto; aspect-ratio: 1089 / 947; }
.fv__orbit { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; opacity: 0; scale: 0.9; transition: opacity 800ms ease, scale 1000ms var(--ease-out); }
.fv .mq-hero.fv__mq { top: calc(1.2dvh - var(--pad-y)); height: var(--p1-mq-h); z-index: 1; translate: -50% 85dvh; }
.fv__catch { position: absolute; z-index: 3; height: auto; max-width: none; opacity: 0; scale: 0.5; rotate: -8deg; transition: opacity 500ms ease, scale 900ms var(--ease-back), rotate 900ms var(--ease-back); }
.fv__icons { position: absolute; inset: 0; z-index: 2; }
.fv__ic { position: absolute; opacity: 0; translate: 0 1.4em; scale: 0.5; transition: opacity 450ms ease, translate 700ms var(--ease-back), scale 700ms var(--ease-back); }
.fv__ic img { width: 100%; height: auto; }
.pg-about.is-active .fv__mq { translate: -50% 0; transition-duration: 1100ms; transition-delay: 50ms; }
.pg-about.is-active .fv__orbit { opacity: 1; scale: 1; transition-delay: var(--fv-t-orbit); }
.pg-about.is-active .fv__catch { opacity: 1; scale: 1; rotate: 0deg; transition-delay: var(--fv-t-name); }
.pg-about.is-active .fv__ic { opacity: 1; translate: 0 0; scale: 1; }
.pg-about.is-active .fv__ic--light { transition-delay: var(--fv-t-ic); }
.pg-about.is-active .fv__ic--tv { transition-delay: calc(var(--fv-t-ic) + var(--fv-t-step)); }
.pg-about.is-active .fv__ic--air { transition-delay: calc(var(--fv-t-ic) + var(--fv-t-step) * 2); }
.pg-about.is-active .fv__ic--door { transition-delay: calc(var(--fv-t-ic) + var(--fv-t-step) * 3); }

.fv__rig { position: absolute; z-index: 1; left: 50%; top: calc(1.2dvh - var(--pad-y)); height: var(--p1-mq-h); aspect-ratio: 474 / 1400; translate: -50% 0; visibility: hidden; pointer-events: none; }
.fv__rig.is-playing { visibility: visible; }
.fv__rig-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: contrast(1.05); }
.fv__rig-u, .fv__rig-f, .fv__rig-h { position: absolute; inset: 0; will-change: transform; }
.fv__rig-u { transform-origin: 84.79% 20.07%; }
.fv__rig-f { transform-origin: 87.02% 34.71%; }
.fv__rig-h { transform-origin: 89.45% 48.11%; }

.fv__co { position: relative; z-index: 4; flex-shrink: 0; display: grid; justify-items: center; margin-top: 0; margin-bottom: 0; padding-block: 0.4em; font-weight: 900; line-height: 1.2; letter-spacing: 0.06em; color: var(--color-on-dark); text-shadow: 0 0 4px var(--color-shade), 0 0 14px var(--color-shade); opacity: 0; translate: 0 0.6em; scale: 0.92; transition: opacity 600ms ease, translate 800ms var(--ease-out), scale 800ms var(--ease-back); }
.fv__co-s { font-size: 1.05em; letter-spacing: 0.4em; }
.fv__co-m { position: relative; padding-bottom: 0.18em; font-size: min(6.6vw, 32px); white-space: nowrap; }   
.fv__co-m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-on-dark); box-shadow: 0 0 8px var(--color-shade); transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-out); }   
.pg-about.is-active .fv__co-m::after { transform: scaleX(1); transition-delay: calc(var(--fv-t-co) + 400ms); }
.pg-about.is-active .fv__co { opacity: 1; translate: 0 0; scale: 1; transition-delay: var(--fv-t-co); }

.about__panel { position: relative; z-index: 4; flex-shrink: 0; align-self: center; margin-top: 0.9em; width: 86%; padding: 0.85em 1.1em 0.9em; font-size: max(var(--fs-min), 0.88em); line-height: 1.6; text-align: center; color: var(--color-on-dark); background: var(--color-veil); border: 4px solid var(--color-on-dark); border-radius: 0 1.4em 1.4em 0; opacity: 0; transition: opacity var(--dur-in) ease; }   
.about__panel::after { content: ""; position: absolute; right: -15px; top: 50%; width: 22px; height: 22px; border: solid var(--color-on-dark); border-width: 4px 4px 0 0; background: var(--color-main); rotate: 45deg; translate: 0 -50%; }
.pg-about.is-active .about__panel { opacity: 1; transition-delay: var(--fv-t-panel); }

.pg-about .about__panel .body:nth-child(1) .rv.is-on { transition-delay: calc(var(--fv-t-panel) - 120ms); }   
.pg-about .about__panel .body:nth-child(2) .rv.is-on { transition-delay: calc(var(--fv-t-panel) - 40ms); }
.pg-about .about__close .ln:nth-child(1).rv.is-on { transition-delay: calc(var(--fv-t-panel) + 40ms); }
.pg-about .about__close .ln:nth-child(2).rv.is-on { transition-delay: calc(var(--fv-t-panel) + 70ms); }
.about__panel .txt { color: var(--color-on-dark); }
.about__close { display: grid; gap: 0.1em; margin-top: var(--sp-p); font-weight: 900; font-size: 1.05em; line-height: 1.55; letter-spacing: 0.06em; color: var(--color-on-dark); }
.about__close .ln:first-child { justify-self: center; padding-bottom: 0.12em; background: linear-gradient(currentColor, currentColor) left bottom / 100% 3px no-repeat; }

.pg-concept .head { color: var(--color-on-dark); }
.concept__ttl { display: grid; font-weight: 900; line-height: 1.2; letter-spacing: 0.08em; color: var(--color-on-dark); text-shadow: 0 0 3px var(--color-shade), 0 0 10px var(--color-shade); }
.concept__ttl-a { font-size: 1.1em; letter-spacing: 0.12em; }
.concept__ttl-b { font-size: 2.4em; }
.card { align-self: flex-start; width: 90%; padding: 0.85em 1.1em; color: var(--color-main); background: var(--grain), var(--color-base); border: 1.5px solid var(--color-main); translate: -115% 0; transition: translate 800ms var(--ease-back); }
.card::before { content: ""; position: absolute; left: 1.1em; top: 0.55em; width: 2.2em; height: 2px; background: var(--color-main); }
.pg-concept.is-active .card { translate: 0 0; transition-delay: calc(var(--mq-wait) + 250ms); }
.card__one { margin-top: 0.35em; font-weight: 900; font-size: 1.5em; line-height: 1.3; letter-spacing: 0.08em; }
.dots { display: inline-flex; }
.dot { position: relative; display: inline-block; line-height: 1.15; }
.dot::before { content: ""; position: absolute; top: -0.2em; left: 50%; width: 0.2em; aspect-ratio: 1; border-radius: 50%; background: currentColor; translate: -50% 0; }
.voice { align-self: flex-end; width: 88%; padding: 1em 1.1em 1.1em; background: var(--color-veil); border: 4px solid var(--color-on-dark); border-radius: 0 1.4em 1.4em 0; color: var(--color-on-dark); clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-out); }
.voice::after { content: ""; position: absolute; right: -15px; top: 50%; width: 22px; height: 22px; border: solid var(--color-on-dark); border-width: 4px 4px 0 0; background: var(--color-main); rotate: 45deg; translate: 0 -50%; }
.pg-concept.is-active .voice { clip-path: inset(-30px -30px -30px -30px); transition-delay: calc(var(--mq-wait) + 450ms); }
.voice__cap { float: left; margin: 0.02em 0.12em 0 0; font-size: 3.6em; line-height: 0.95; font-weight: 300; }

.page.pg-msg { color: var(--color-on-dark); }
.pg-mq .msg__shape { opacity: 0; transition: opacity 300ms ease; }
.pg-mq.is-active .msg__shape { opacity: 1; transition-delay: var(--mq-wait); }
.pg-msg .pf-line-draw { --pf-delay: var(--mq-wait); }
.pg-msg .msg__ring { --pf-delay: calc(var(--mq-wait) + 300ms); }

.plane--top { left: 0; right: 0; bottom: auto; height: 34%; }
.pg-work, .pg-m1, .pg-m3, .pg-person { --color-on-dark: var(--color-main); }   
.pg-work .plane, .pg-m2 .plane, .pg-person .plane { background: var(--grain), var(--color-base); }
.pg-m1 .plane, .pg-m3 .plane { background: var(--grain), var(--color-pale); }
.page.pg-m2 { background: var(--grain), var(--color-base); }
.pg-work .page__inner, .pg-m1 .page__inner, .pg-m2 .page__inner, .pg-m3 .page__inner, .pg-person .page__inner, .pg-company .page__inner { justify-content: center; gap: var(--sp-p);    }
@media (min-height: 1000px) { .pg-work .page__inner, .pg-m1 .page__inner, .pg-m2 .page__inner, .pg-m3 .page__inner, .pg-person .page__inner, .pg-company .page__inner { gap: calc(var(--sp-g) * 1.8); } }   
.pg-work .head, .pg-m1 .head, .pg-m2 .head, .pg-m3 .head, .pg-person .head { gap: 0.3em; }
.m-ttl { display: grid; justify-items: start; gap: 0.2em; font-weight: 900; font-size: 1em; line-height: 1.25; letter-spacing: 0.06em; color: var(--color-main); }
.m-ttl--dark { color: var(--color-main); }
.m-ttl__no { margin-bottom: 0.3em; }
.m-ttl__pre { font-size: 1.15em; letter-spacing: 0.1em; }
.m-ttl__big { font-size: 2.05em; line-height: 1.2; letter-spacing: 0.04em; }

.work__head { justify-items: start; text-align: left; color: var(--color-main); }
.work__head .sec-en, .band .sec-en, .pg-company .sec-en { justify-content: flex-start; }
.band .head, .pg-company .head { justify-items: start; text-align: left; }
.work__ttl, .band__ja, .m-ttl__no { font-weight: 900; font-size: max(var(--fs-min), 0.95em); letter-spacing: 0.2em; }   
.work__lead { position: relative; align-self: center; padding: 0.3em 1.6em; font-weight: 900; font-size: max(var(--fs-min), 0.95em); letter-spacing: 0.08em; text-align: center; color: var(--color-main); }   
.work__lead::before, .work__lead::after { content: ""; position: absolute; width: 1.2em; height: 1.1em; border: 0 solid var(--color-main); }
.work__lead::before { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.work__lead::after { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.work__lead-em { font-size: 1.2em; }

.work__panel > .job { flex: 0 0 86%; box-shadow: var(--shadow-box); scroll-snap-align: start; position: relative; display: grid; align-content: start; gap: 0.55em; padding: 1.1em 1.1em 1.2em; font-size: max(var(--fs-min), 0.9em); line-height: 1.65; }
.job--1 { color: var(--color-base); background: var(--grain), var(--color-main); }
.job--2 { color: var(--color-ink); background: var(--color-base); border: 2.5px solid var(--color-main); }
.job__dot { display: block; width: 5.6em; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--color-base); }
.job__dot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.job--1 .job__dot { border: 3px solid var(--color-base); }
.job--2 .job__dot { position: absolute; right: 0.9em; top: 0.9em; width: 4.8em; border: 2.5px solid var(--color-main); }
.job__body { display: contents; }
.job__head { display: grid; gap: 0.25em; }
.job--2 .job__head { padding-right: 5.4em; }
.job__badge { display: grid; justify-items: center; width: max-content; padding: 0.15em 0.4em 0.3em; font-family: var(--font-en); font-size: var(--fs-min); line-height: 1; letter-spacing: 0.1em; border: 1.5px solid currentColor; border-radius: 0 0 0.9em 0.9em; }
.job__badge b { font-weight: 400; font-size: 1.5em; }
.job--2 .job__badge { color: var(--color-main); }
.job__name { font-weight: 900; font-size: 1.55em; line-height: 1.2; letter-spacing: 0.06em; }
.job--1 .job__name { padding-bottom: 0.3em; border-bottom: 1.5px solid var(--color-base); }
.job--2 .job__name { font-size: 1.75em; color: var(--color-main); }
.job__list { display: grid; gap: 0.15em; }
.job__list li { position: relative; padding-left: 1em; font-weight: 700; }
.job__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45em; height: 0.45em; background: currentColor; }
.job__list--row { display: flex; flex-wrap: wrap; gap: 0.35em 0.5em; }
.job__list--row li { padding: 0.1em 0.7em; color: var(--color-base); background: var(--color-main); }
.job__list--row li::before { content: none; }
.job__end { font-weight: 900; }
.job--2 .job__end { color: var(--color-main); }
.work__panel { display: flex; gap: 0.8em; margin-inline: calc(var(--gutter) * -1); padding: 0.2em var(--gutter) 0.4em; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.work__panel::-webkit-scrollbar { display: none; }
.work__panel > .vh { position: absolute; }
.work__dots { display: flex; align-items: center; justify-content: center; gap: 0.6em; }
.work__dot { width: 9px; height: 9px; padding: 0; border: 1.5px solid var(--color-main); border-radius: 50%; background: transparent; cursor: pointer; }
.work__dot.is-on { background: var(--color-main); }
.work__swipe { margin-left: 0.6em; font-family: var(--font-en); font-size: var(--fs-min); letter-spacing: 0.2em; color: var(--color-main); }

.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; text-align: center; color: var(--color-on-dark); }
.role { display: grid; grid-template-rows: auto auto 3.9em; justify-items: center; align-content: start; gap: 0.3em; opacity: 0; translate: 0 var(--rise); transition: opacity var(--dur-in) ease, translate var(--dur-in) var(--ease-back); }
.pg-m1.is-active .role { opacity: 1; translate: 0 0; }
.pg-m1.is-active .role:nth-child(1) { transition-delay: 500ms; }
.pg-m1.is-active .role:nth-child(2) { transition-delay: 650ms; }
.pg-m1.is-active .role:nth-child(3) { transition-delay: 800ms; }
.role__dot { display: block; width: min(4.8em, 20vw); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--color-base); }
.role__dot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; scale: 0.9; translate: 0 6%; }
.role__badge { display: grid; justify-items: center; min-width: 3.4em; padding: 0.1em 0.4em 0.35em; font-family: var(--font-en); font-size: var(--fs-min); line-height: 1; letter-spacing: 0.12em; border: 1px solid currentColor; border-radius: 0 0 1em 1em; }
.role__badge b { font-weight: 400; font-size: 1.6em; }
.role__t { font-weight: 700; font-size: var(--fs-ui); line-height: 1.35; }
.m1__chance { font-weight: 700; font-size: max(var(--fs-min), 0.95em); letter-spacing: 0.08em; color: var(--color-on-dark); }
.m1__big { display: grid; justify-items: start; gap: 0.25em; font-weight: 900; font-size: 1.75em; line-height: 1.25; letter-spacing: 0.04em; }   
.m1__big .ln:nth-child(2) { margin-left: 0.8em; }
.m1__big .ln:nth-child(3) { margin-left: 1.6em; }
.m1__band { display: inline-block; padding: 0.1em 0.45em; color: var(--color-base); background: var(--color-main); box-shadow: 5px 5px 0 var(--color-main-2); clip-path: inset(0 100% 0 0); transition: clip-path 600ms var(--ease-out); }
.pg-m1.is-active .m1__big .ln:nth-child(1) .m1__band { clip-path: inset(-10px -10px -10px -10px); transition-delay: 900ms; }
.pg-m1.is-active .m1__big .ln:nth-child(2) .m1__band { clip-path: inset(-10px -10px -10px -10px); transition-delay: 1100ms; }
.pg-m1.is-active .m1__big .ln:nth-child(3) .m1__band { clip-path: inset(-10px -10px -10px -10px); transition-delay: 1300ms; }
.pg-m1 .body { color: var(--color-on-dark); font-size: max(var(--fs-min), 0.86em); line-height: 1.6; }

.pg-m2 .head { color: var(--color-main); }
.depts { display: grid; color: var(--color-main); }
.depts__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.dept { display: grid; justify-items: center; gap: 0.35em; font-weight: 700; font-size: var(--fs-ui); letter-spacing: 0.02em; text-align: center; opacity: 0; translate: 0 var(--rise); transition: opacity var(--dur-in) ease, translate var(--dur-in) var(--ease-back); }
.dept__dot { display: grid; place-items: center; width: 3.6em; aspect-ratio: 1; border-radius: 50%; color: var(--color-on-dark); background: var(--color-main); }
.dept__dot svg { width: 52%; height: 52%; }
.pg-m2.is-active .dept { opacity: 1; translate: 0 0; }
.pg-m2.is-active .dept:nth-child(1) { transition-delay: 450ms; }
.pg-m2.is-active .dept:nth-child(2) { transition-delay: 600ms; }
.pg-m2.is-active .dept:nth-child(3) { transition-delay: 750ms; }
.depts__n { margin-top: 0.7em; font-weight: 900; font-size: 1.1em; letter-spacing: 0.1em; text-align: center; }   
.m2__voice { position: relative; padding: 0.8em 1em 0.85em; border: 3px solid var(--color-main); border-radius: 1.2em 1.2em 1.2em 0; color: var(--color-ink); }
.m2__voice::after { content: ""; position: absolute; left: -3px; bottom: -14px; width: 16px; height: 14px; background: var(--color-main); clip-path: polygon(0 0, 100% 0, 0 100%); }
.m2__voice .body { font-size: max(var(--fs-min), 0.9em); line-height: 1.7; }
.m2__voice .voice__cap { color: var(--color-main); font-size: 3.1em; }
.m2__end { justify-self: stretch; margin-inline: calc(var(--gutter) * -1); padding: 0.7em var(--gutter); font-weight: 900; font-size: 1em; line-height: 1.6; color: var(--color-on-dark); background: var(--grain), var(--color-main); text-align: center; }   

.m3__lead { font-weight: 500; font-size: max(var(--fs-min), 0.92em); color: var(--color-on-dark); }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.perk { display: grid; align-content: center; justify-items: center; text-align: center; gap: 0.4em; padding: 0.7em 0.75em; font-weight: 700; font-size: max(var(--fs-min), 0.9em); line-height: 1.45; color: var(--color-main); background: var(--grain), var(--color-base); }
.perk--wide { grid-column: 1 / -1; }
.perk__dot { display: grid; place-items: center; width: 2.3em; aspect-ratio: 1; border-radius: 50%; color: var(--color-main); border: 2px solid var(--color-main); }
.perk__dot svg { width: 56%; height: 56%; }
.m3__end { font-weight: 900; font-size: 1.05em; letter-spacing: 0.06em; color: var(--color-on-dark); text-align: center; }   

.person__ttl { font-weight: 900; font-size: 1.35em; line-height: 1.35; letter-spacing: 0.08em; color: var(--color-on-dark); }

.pv { position: relative; display: grid; gap: 0.2em; }
.pv__type { font-family: var(--font-en); font-size: var(--fs-min); letter-spacing: 0.2em; }
.pv__type b { margin-left: 0.3em; font-weight: 400; font-size: 1.8em; }
.pv__name { font-weight: 900; font-size: 1.08em; line-height: 1.35; letter-spacing: 0.04em; }
.pv__voice { font-weight: 900; font-size: max(var(--fs-min), 0.92em); line-height: 1.5; }
.pv__cap { font-size: 1.9em; line-height: 1; font-weight: 300; vertical-align: -0.12em; }
.pv__txt { font-weight: var(--fw-body); font-size: max(var(--fs-min), 0.82em); line-height: 1.55; }
.pv--1 { margin-left: calc(var(--gutter) * -1); width: calc(94% + var(--gutter)); padding: 0.9em 1.1em 1em var(--gutter); color: var(--color-base); background: var(--grain), var(--color-main); }
.pv--1 .pv__name { padding-bottom: 0.25em; border-bottom: 1.5px solid var(--color-base); }
.pv--2 { justify-self: end; width: 92%; padding: 0.9em 1.1em 1em 1.3em; color: var(--color-main); background: var(--color-base); border-left: 6px solid var(--color-main); box-shadow: var(--shadow-box); }
.pv--2 .pv__txt { color: var(--color-ink); }
.pv__quote { position: absolute; right: 0.15em; top: -0.35em; font-family: var(--font-en); font-size: 5em; line-height: 1; color: var(--color-main-2); opacity: 0.35; pointer-events: none; }

.band__ja--light { color: var(--color-on-dark); }
.co__photo { flex-shrink: 0; align-self: center; width: 86%; padding: 6px; background: var(--color-base); box-shadow: var(--shadow-box); }
.co__photo img { width: 100%; height: clamp(130px, 28dvh, 220px); object-fit: cover; object-position: 40% 70%; }
.co { color: var(--color-main); border-top: 2px solid var(--color-main); border-bottom: 2px solid var(--color-main); }
.co__row { display: grid; grid-template-columns: 6em 1fr; gap: 0.8em; padding: 0.6em 0.2em; font-size: max(var(--fs-min), 0.95em); line-height: 1.6; }
.co__row + .co__row { border-top: 1px solid var(--color-line); }
.co dt { font-weight: 700; letter-spacing: 0.04em; }
.co dd { color: var(--color-ink); }

.band { position: relative; margin: 0 calc(var(--gutter) * -1); padding: 1.6em var(--gutter) 2.6em; background: var(--grain), var(--color-main); color: var(--color-on-dark); }
.band .sec-en__t::after { transform: none; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: -2.4em; }
.tab { position: relative; min-height: 52px; font: inherit; font-weight: 700; letter-spacing: 0.06em; color: var(--color-main); background: var(--color-pale); border: 0; border-radius: 0; cursor: pointer; transition: background var(--dur-hover) ease, color var(--dur-hover) ease; }
.tab[aria-selected="true"] { background: var(--color-base); box-shadow: inset 0 3px 0 var(--color-main); }
.j { display: none; }
.pg-req[data-job="1"] .j1, .pg-req[data-job="2"] .j2 { display: inline; }
.req { position: relative; margin-top: 0.6em; font-weight: var(--fw-body); letter-spacing: 0.04em; color: var(--color-main); }
.req dt { border-left: 2px solid var(--color-main); padding-left: 0.5em; }
.req dd .ln { padding-left: 1em; text-indent: -1em; }
.req dd .ln + .ln { margin-top: 0.15em; }
.req__ind { margin-left: 1em; }
.req__sub { font-size: max(var(--fs-min), 0.85em); }
.req__pay { font-weight: 900; font-size: 1.12em; color: var(--color-main); }
.req__jobs .ln::before { content: "◇"; }   

.band--entry { padding-bottom: 4.2em; }
.form { position: relative; margin-top: -3.6em; padding: 1.4em 1.1em; background: var(--color-base); border: 1px solid var(--color-main); }
.badge { margin-left: 0.4em; padding: 0.1em 0.5em; font-size: var(--fs-min); font-weight: 700; line-height: 1.4; color: var(--color-on-dark); background: var(--color-main); }
.badge--opt { color: var(--color-main); background: none; border: 1px solid var(--color-main); }
.plus { width: 12px; height: 12px; }

@media (min-width: 960px) {
  .stage { background: var(--grain), var(--color-pale); }
  .rail { overflow: hidden; }
  .rail--left { background: var(--grain), var(--color-main); }
  .rail-mq { position: absolute; left: 50%; top: 42%; height: 82%; width: auto; max-width: none; translate: -50% 0; opacity: 0.92; }
  .rail-logo { position: relative; z-index: 1; align-self: start; margin-top: 8vh; }
  .rail-side { position: relative; color: var(--color-main); }
  .rail-side__name { font-size: 15px; letter-spacing: 0.3em; }
}

.pg-msg .page__inner { position: relative; }
.msg__en { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 3.6dvh); font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; line-height: 1; color: var(--color-on-dark); }
.pg-msg .msg { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + (100% - var(--header-h)) * 0.31); aspect-ratio: 948 / 615;    }
.pg-msg .msg__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pg-msg .msg__shape path { fill: var(--color-msg-veil); stroke: var(--color-on-dark); stroke-width: 7px; stroke-linejoin: miter; }   
.pg-msg .msg__t { position: absolute; width: max-content; translate: -50% -50%; font-weight: 900; font-size: clamp(17px, 5.1vw, 24px); line-height: 1.6; letter-spacing: 0.06em; text-align: center; color: var(--color-on-dark); text-shadow: 0 0 6px var(--color-msg-shade); margin: 0; }
.msg__t--a { left: 52.7%; top: 23.6%; }
.msg__t--b { left: 50.6%; top: 67.1%; }

.pg-msg .mq-side { height: calc(var(--p1-mq-h) * 0.86); top: calc(var(--header-h) + 1.2dvh + var(--p1-mq-h) * 0.1); filter: contrast(1.05) brightness(0.92); }
.pg-msg .mq-side--l { left: 24%; }
.pg-msg .mq-side--r { left: 76%; }
.pg-msg.is-active .mq-side { transition-delay: 200ms; }

.pg-m1 .m-ttl__big, .pg-person .m-ttl__big { font-size: 1.75em; }
.pg-m1 .role__dot { width: min(4em, 18vw); }
.pg-m1 .role { grid-template-rows: auto auto auto; }
.pg-m1 .m1__big { font-size: 1.5em; gap: 0.2em; }
.pv--1, .pv--2 { padding-top: 0.7em; padding-bottom: 0.75em; }

.slider .page:not(.page--hero) .rv { transition: opacity 500ms ease, transform 700ms var(--ease-back); }
.slider .page:not(.page--hero) .rv:not(.is-on) { transform: translateY(1.4em) scale(0.94); }

html { background: var(--color-base); }
html:has(#top.is-active), html:has(#p1.is-active) { background: var(--color-main); }
html:has(#p2.is-active) { background: var(--color-p2-end); }
html:has(#p3.is-active) { background: var(--bg-p3); }
html:has(#p4.is-active) { background: var(--color-base); }
html:has(#p5.is-active) { background: var(--color-pale); }
html:has(#p6.is-active) { background: var(--color-base); }
html:has(#p7.is-active) { background: var(--color-pale); }
html:has(#p8.is-active) { background: var(--color-base); }

.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--grain), var(--color-base); pointer-events: none; animation: loader-out 500ms ease 1900ms forwards; }
.loader__mark { position: relative; width: min(84vw, 380px); opacity: 0; scale: 0.94; animation: loader-in 900ms var(--ease-out) 200ms forwards; color: var(--color-main); }
.loader__mark img { width: 100%; height: auto; }
@keyframes loader-in { to { opacity: 1; scale: 1; } }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }

@media (max-height: 650px) {
  .pv__type, .pv__quote { display: none; }
  .pv--1, .pv--2 { padding-top: 0.5em; padding-bottom: 0.55em; }
}

@media (max-height: 560px) {
  .pv__type, .pv__quote { display: none; }
  .pv--1, .pv--2 { padding-top: 0.5em; padding-bottom: 0.55em; }
  .perk { gap: 0.2em; padding: 0.4em 0.6em; }
  .perk__dot { width: 1.7em; }
  .m3__end { font-size: max(var(--fs-min), 0.95em); }
  .job__dot { width: 4.4em; }
  .job--2 .job__dot { width: 3.8em; }
  .job--2 .job__head { padding-right: 4.4em; }
}

@media (max-height: 620px) {
  .role__badge { display: none; }
  .role__dot { width: 3.8em; }
  .role { grid-template-rows: auto 3.9em; }
  .m1__big { font-size: 1.3em; }
  .concept__ttl-b { font-size: 2em; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-char-in .pf-c, .pf-line-draw, .pf-jump-in { opacity: 1; animation: none; left: 0; stroke-dashoffset: 0; translate: 0 0; scale: 1; }
  .card, .fv__ic, .fv__catch, .fv__orbit, .fv__co { opacity: 1; translate: none; scale: 1; rotate: none; }
  .mq-hero { translate: -50% 0; }
  .plane, .voice { clip-path: none; }
  .loader { display: none; }
}