.head,.txt,.close,.doubts,.roles,.cards,.co { word-break: keep-all; overflow-wrap: anywhere; }
.head { position: relative; isolation: isolate; display: grid; gap: var(--sp-1); }
.head[data-echo]::before { content: attr(data-echo); position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -.38em; overflow: hidden; font-family: var(--font-en); font-size: clamp(88px,27vw,134px); font-weight: 300; line-height: 1; letter-spacing: -.065em; white-space: nowrap; color: var(--heading-echo-light); pointer-events: none; }
.page[data-tone="dark"] .head[data-echo]::before { color: var(--heading-echo-dark); }
.head .ttl { font-family: var(--font-head); font-size: var(--fs-jp-subtitle); font-weight: var(--fw-head); line-height: var(--lh-head-reference); letter-spacing: var(--ls-head-reference); }
.head .kw { font-weight: inherit; }
.kw { font-weight: 700; }
.display-line { display: block; }
.body + .body { margin-top: var(--sp-p); }
.body .ln + .ln { margin-top: .28em; }
.editorial { display: flex; flex-direction: column; gap: var(--sp-g); min-height: calc((100dvh - var(--header-h)) * .76); max-height: calc(100dvh - var(--header-h) - var(--pad-y) * 2); }
.editorial > .head,.editorial > .txt,.editorial > .close,.editorial > .doubts { flex: 0 0 auto; }
.visual-stage { position: relative; flex: 1 1 auto; min-height: 250px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); background-size: cover; background-repeat: no-repeat; background-position: center 60%; }
.visual-stage--raw::after { content: ""; position: absolute; inset: 125px 0 0; background: var(--raw-scene) center 45% / cover no-repeat; }
.visual-stage--finish::after { content: ""; position: absolute; inset: 150px 0 0; background: var(--finish-scene) center 48% / cover no-repeat; }
.visual-stage .head { position: relative; z-index: 1; }
.editorial--1 .display-line { display: inline-block; }
.editorial--1 .close { font-size: 1.25em; line-height: 1.5; color: var(--color-gold-hi); padding-top: var(--sp-1); }
.editorial__media { position: relative; flex: 1 1 auto; height: clamp(100px,26dvh,280px); min-height: 60px; overflow: hidden; }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial__media--process { margin-inline: calc(-1 * var(--gutter)); }
.editorial__media--process img { object-position: center 48%; }
.editorial__media--detail { height: clamp(80px,17dvh,180px); }
.editorial__media--detail img { object-position: center 62%; }
.page--rule { --bg-dark: var(--color-main); }
.page--freedom { --bg-dark: var(--color-ink); }
.editorial--3 .word--focus { color: var(--color-gold-hi); }
.editorial--3 .close { padding-top: var(--sp-p); font-size: 1.18em; line-height: 1.6; }
.page--work { background: var(--light-field); }
.page--environment,.page--people,.page--company { background: linear-gradient(115deg,var(--field-white),var(--field-haze)),url("assets/reflective-metal-31417511.jpg?v=20261024world1") center / cover; }
.editorial--5 { justify-content: center; }
.doubt,.card__txt { font-weight: 500; }
.doubt { color: var(--color-ink); }
.doubts { display: grid; gap: var(--sp-1); color: var(--color-main); border-left: 1px solid var(--color-accent); padding-left: var(--sp-p); }
.editorial--5 .txt { display: grid; gap: var(--sp-g); }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-p); }
.role { display: flex; align-items: center; min-height: clamp(125px,20dvh,200px); padding: var(--sp-p); background: var(--card-face); border-top: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-line); }
.role__lead { display: block; font-weight: 700; font-size: 1.2em; margin-bottom: var(--sp-1); }
.cards { display: grid; flex: 1; gap: var(--sp-p); }
.card { display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-p); align-content: center; padding: var(--sp-p); background: var(--card-face); border-top: 1px solid var(--color-line); }
.card::before { white-space: nowrap; content: attr(data-card); font-family: var(--font-en); font-size: 30px; line-height: 1; font-weight: 300; color: var(--color-main); }
.card__body { display: grid; gap: var(--sp-1); }
.card__ttl,.card__txt { font-size: max(var(--fs-min),.94em); line-height: 1.55; }
.card__type { display: block; font-size: clamp(16px,4.1vw,18px); font-weight: 700; margin-top: .3em; }

.co { display: grid; flex: 1; grid-template-rows: repeat(4,1fr); border-top: 1px solid var(--color-main); }
.co__row { display: grid; grid-template-columns: 6.3em 1fr; gap: var(--sp-p); padding: var(--sp-p) 0; align-items: center; border-bottom: 1px solid var(--color-line); }
.co dt { font-weight: 500; color: var(--color-main); }
.co dd { font-weight: 500; }
.co__row:first-child dd { font-size: 1.4em; font-weight: 700; }
.head .section-display { font-family: var(--font-en); font-size: var(--fs-section-en); font-weight: 400; line-height: .98; letter-spacing: -.055em; color: var(--color-main); white-space: nowrap; }
.head .section-display--long { font-size: var(--fs-section-en-long); }
.head .section-display--medium { font-size: var(--fs-section-en-medium); }
.page[data-tone="dark"] .section-display { color: var(--color-on-dark); }
.rail-brand { display: block; width: 100%; }
.scene-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--decor-type-light); background: var(--decor-sheen); }
.page[data-tone="dark"] .scene-decor { color: var(--decor-type-dark); }
.scene-decor__word { position: absolute; left: 0; width: 100%; overflow: hidden; bottom: .05em; font-family: var(--font-en); font-size: clamp(90px,26vw,130px); font-weight: 300; letter-spacing: -.065em; line-height: .85; white-space: nowrap; }
.scene-decor__arc { position: absolute; width: 530px; height: 530px; right: -340px; top: 9%; border: 1px solid var(--decor-line-light); border-radius: 50%; }
.scene-decor__arc::after { content: ""; position: absolute; inset: 22px; border: inherit; border-radius: inherit; }
.page[data-tone="dark"] .scene-decor__arc { border-color: var(--decor-line-dark); }
.page--people .scene-decor__arc { top: 45%; }
.world-field { display: none; }
@media (min-width:960px) {
 .world-field { display: block; position: fixed; inset: 0; pointer-events: none; overflow: hidden; background: var(--color-ink); transition: background 700ms var(--ease-out); }
 .world-field__type { position: absolute; top: 0; bottom: 0; width: calc((100% - var(--col)) / 2); overflow: hidden; }
 .world-field__type--left { left: 0; }
 .world-field__type--right { right: 0; }
 .world-field__type--right .world-field__word { left: auto; right: 0; text-align: right; }
 .world-field__word { position: absolute; left: 0; width: 100%; overflow: hidden; bottom: .04em; font-family: var(--font-en); font-size: min(180px,calc((100vw - var(--col)) * .11)); font-weight: 300; letter-spacing: -.065em; line-height: .85; white-space: nowrap; color: var(--decor-type-dark); }
 .world-field__arc { position: absolute; width: 68vw; height: 68vw; left: -30vw; top: -34vw; border: 1px solid var(--decor-line-dark); border-radius: 50%; }
 .stage:is([data-scene="p4"],[data-scene="p5"],[data-scene="p6"],[data-scene="p7"],[data-scene="requirements"],[data-scene="entry"]) .world-field__word { color: var(--decor-type-light); }
 .stage:is([data-scene="p4"],[data-scene="p5"],[data-scene="p6"],[data-scene="p7"],[data-scene="requirements"],[data-scene="entry"]) .world-field__arc { border-color: var(--decor-line-light); }
 .world-field::before { content: ""; position: absolute; inset: 44% -20% -60%; opacity: .1; background: url("assets/zinc-surface.jpg?v=20261024world1") center / cover no-repeat; transform: perspective(700px) rotateX(55deg); transform-origin: center top; mask-image: var(--stage-mask); }
 .world-field::after { content: ""; position: absolute; inset: 40% 0 0; mask-image: var(--stage-mask); background: radial-gradient(ellipse at 5% 70%,var(--field-glint),transparent 50%),radial-gradient(ellipse at 70% 10%,var(--field-shadow),transparent 60%); animation: field-light 9s ease-in-out infinite alternate; }
 .stage[data-scene="p2"] .world-field { background: var(--color-main); }
 .stage:is([data-scene="p4"],[data-scene="p5"],[data-scene="p6"],[data-scene="p7"],[data-scene="requirements"],[data-scene="entry"]) .world-field { background: var(--light-field); }
 .rail--left { isolation: isolate; }
 .rail--left::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--logo-field); mask-image: var(--logo-field-mask); pointer-events: none; }
 .rail--world .rail-brand { padding: var(--sp-p); }
 .rail--world :is(.rail-logo__en,.rail-logo__jobs) { color: var(--color-main); }
 .rail--world .rail-side__page,.rail--world .rail-side__now { color: var(--color-on-dark); }
 .stage:is([data-scene="p4"],[data-scene="p5"],[data-scene="p6"],[data-scene="p7"],[data-scene="requirements"],[data-scene="entry"]) :is(.rail-side__page,.rail-side__now) { color: var(--color-main); }
}
@keyframes field-light { from { opacity: .4; translate: -2% 0; } to { opacity: .8; translate: 2% 0; } }
@media (min-width:960px) and (min-height:980px) {
 .editorial--5 .roles { grid-template-columns: 1fr; }
 .editorial--5 .role { min-height: 145px; }
}
@media (max-height:700px) {
 .editorial { min-height: calc((100dvh - var(--header-h)) * .84); gap: var(--sp-1); }
 .visual-stage { min-height: 160px; background-position: center 55%; }
 .editorial__media { height: 100px; min-height: 40px; }
 .editorial__media--detail { height: 65px; }

 .body .ln + .ln { margin-top: .2em; }
 .editorial--5 .txt { gap: var(--sp-p); }
 .role { min-height: 90px; padding: var(--sp-1); }
 .role__lead { font-size: 1.1em; }
 .card { grid-template-columns: 20px 1fr; padding: .55em; gap: var(--sp-1); }
 .card::before { font-size: 20px; }
 .card__body { gap: .3em; }
 .card__ttl,.card__txt { font-size: 13px; line-height: 1.45; }
 .card__type { font-size: 14px; }
 .cards { gap: var(--sp-1); }
 .editorial--3 .visual-stage { min-height: 255px; }
 .visual-stage--finish::after { inset-block-start: 105px; background-position: center 40%; background-size: 100% auto; background-image: var(--finish-photo); mask-image: var(--cinema-photo-mask); }
 .editorial--1 .visual-stage { min-height: 200px; }
 .visual-stage--raw::after { inset-block-start: 90px; background-size: 500px auto; background-position: left 38%; }
 .co__row:first-child dd { font-size: 1.15em; }
}

.hero__shade { position: absolute; inset: var(--header-h) 0 0; z-index: 1; background: var(--hero-shade); pointer-events: none; }
.hero__copy { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + clamp(36px,8dvh,90px)); z-index: 2; display: grid; gap: var(--sp-g); color: var(--color-base); pointer-events: none; }
.hero__eyebrow { font-family: var(--font-en); font-size: var(--fs-ui); font-weight: 400; letter-spacing: .18em; }
.hero__display { font-family: var(--font-en); font-size: var(--fs-cinema-hero); font-weight: 400; line-height: .95; letter-spacing: -.055em; }
.hero__display span { display: block; white-space: nowrap; }

.loader { position: fixed; inset: 0; z-index: 100; display: none; place-content: center; justify-items: center; gap: 1.6em; background: var(--color-base); transition: opacity 700ms var(--ease-out),visibility 0s linear 700ms; animation: loader-fallback 0s linear 4s forwards; }
.is-loading .loader { display: grid; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__logo { width: min(68vw,320px); height: auto; }
.loader__status { display: grid; gap: var(--sp-1); justify-items: center; }
.loader__caption { font-family: var(--font-en); font-size: var(--fs-ui); font-weight: 500; letter-spacing: .18em; color: var(--color-main); }
.loader__line { display: block; width: min(68vw,320px); height: 2px; background: var(--color-line); overflow: hidden; }
.loader__line i { display: block; width: 100%; height: 100%; background: var(--color-accent); transform: translateX(-100%); animation: loader-run 1400ms var(--ease-out) infinite; }
@keyframes loader-run { to { transform: translateX(100%); } }
@keyframes loader-fallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }

html:not(.motion-ready) .rv { opacity: 1; transform: none; }
.motion-title-line { display: block; }
.tm-entered .motion-title-line { animation: type-sweep var(--motion-title) var(--motion-spring) both; }
.motion-phrase { white-space: nowrap; }
.motion-char { display: inline-block; }
.tm-entered .motion-char { animation: character-dash 368ms var(--motion-spring) var(--char-delay) both,character-ink 224ms linear calc(var(--char-delay) + 304ms) both; }
.tm-entered .motion-panel { animation: item-assemble 520ms var(--ease-out) 760ms both; }
.tm-entered .hero__display span { animation: type-sweep var(--motion-title) var(--motion-spring) both; }
.tm-entered .hero__display span + span { animation-delay: 150ms; }
.tm-entered .hero__eyebrow { animation: subtitle-rise var(--motion-title) var(--ease-out) 260ms both; }
.tm-entered .visual-stage--raw::after { animation: photo-unfold 880ms var(--motion-unfold) 880ms both,photo-develop var(--motion-photo) ease-out 920ms both; transform-origin: center; }
.tm-entered .visual-stage--finish::after { animation: circle-aperture var(--motion-circle) linear both,circle-camera var(--motion-circle) linear both,circle-focus var(--motion-circle) linear both; transform-origin: center; }
.tm-entered .editorial__media img { animation: photo-unfold 880ms var(--motion-unfold) 880ms both,photo-develop var(--motion-photo) ease-out 920ms both; }
.tm-entered .motion-item { animation: item-assemble var(--motion-item) var(--ease-out) var(--motion-delay) both; }
.tm-entered .head[data-echo]::before { animation: echo-arrive var(--motion-photo) var(--ease-out) both,echo-drift 8s ease-in-out var(--motion-photo) infinite alternate; }
.scene-decor__word::before,.world-field__word::before { content: attr(data-motion-word) "　" attr(data-motion-word) "　"; display: block; width: max-content; animation: word-flow var(--marquee-time,30s) linear infinite; }
.page:not(.is-active) .scene-decor__word::before { animation-play-state: paused; }
.page.is-active .scene-decor__arc { animation: arc-drift 12s ease-in-out infinite alternate; }
.world-field__arc { animation: arc-drift 16s ease-in-out infinite alternate; }
.motion-paused :is(.motion-title-line,.motion-char,.motion-panel,.hero__display span,.hero__eyebrow,.motion-item,.editorial__media img,.scene-decor__word,.scene-decor__arc,.world-field__word,.world-field__arc),
.motion-paused .scene-decor__word::before,.motion-paused .world-field__word::before,.motion-paused .head[data-echo]::before,.motion-paused .visual-stage::after,.motion-paused .world-field::after { animation-play-state: paused; }
@keyframes type-sweep {
 from { opacity: 0; transform: translateX(1.5em) skewX(-28deg); }
 55% { opacity: 1; transform: translateX(-.14em) skewX(12deg); }
 80% { transform: translateX(.04em) skewX(-4deg); }
 to { opacity: 1; transform: none; }
}
@keyframes character-dash {
 from { opacity: 0; transform: translateX(1.5em) skewX(-28deg); }
 55% { opacity: 1; transform: translateX(-.14em) skewX(12deg); }
 80% { transform: translateX(.04em) skewX(-4deg); }
 to { opacity: 1; transform: none; }
}
@keyframes character-ink { from { color: var(--motion-ink); } to { color: inherit; } }
@keyframes subtitle-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes photo-unfold {
 from { opacity: 0; transform: translateY(30%) scale(.7); clip-path: inset(18% 8%); }
 22% { opacity: 1; }
 65% { transform: translateY(-2%) scale(1.04); clip-path: inset(0); }
 to { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes photo-develop {
 from { filter: brightness(3.2) contrast(.25) saturate(0) blur(3px); }
 45% { filter: brightness(1.7) contrast(.6) saturate(.4) blur(1px); }
 to { filter: none; }
}
@keyframes item-assemble { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes echo-arrive { from { opacity: 0; translate: 80px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes echo-drift { from { translate: 0 0; } to { translate: -24px 0; } }
@keyframes word-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes arc-drift { from { transform: translateY(0) scale(1); } to { transform: translateY(24px) scale(1.06); } }
@media (prefers-reduced-motion:reduce) {
 .motion-title-line,.motion-char,.motion-panel,.motion-item { opacity: 1; transform: none; }
}

@keyframes circle-aperture {
 0%,10% { clip-path: circle(0% at 50% 50%); }
 60%,100% { clip-path: circle(150% at 50% 50%); }
}
@keyframes circle-camera {
 0%,10% { transform: scale(2); }
 100% { transform: scale(1); }
}
@keyframes circle-focus {
 0%,10% { filter: blur(16px); }
 50%,100% { filter: blur(0); }
}