/* 案件の見た目（このファイルだけを案件ごとに書く）
 * 値は DNA の実測を tokens.css の変数にしてから使う（色・大きさを直接書かない）
 * 決まり：1つの部品は1か所にだけ書く。末尾に足して上書きしない。!important を使わない
 * 土台（base.css）の指定を変えたいときは、ここで上書きせず、キットの改善として報告する
 * 型：参考（ci.funtech.inc logo-details）の 稲妻・四隅のスピード線・細い線の角ばった枠・テクノ書体の英字ラベル＋極太の和文・手描きの道具（DNA の 0）
 */

/* ---------- ヘッダーのロゴ（白地用：支給ロゴの紺の地を抜き、線と文字をロゴの紺に。稲妻の黄は紺のふち付き。2026-10-29 ユーザー指示。元の logo.jpg は残す） ---------- */
.brand { display: block; width: calc((var(--header-h) - 10px) * 367 / 578); }   /* 高さ＝ヘッダー−10px になる幅（画像の縦横比 367:578。画像の幅は土台の .logo img が 100%） */
.brand__img { display: block; }

/* ---------- 見出し・ラベル（全ページ共通） ---------- */
.head { position: relative; display: grid; gap: var(--sp-1); }
.en-label { justify-self: start; padding-right: 0.4em; font-family: var(--font-en); font-weight: 700; letter-spacing: 0.08em; color: var(--color-main-2); background: var(--color-base); }   /* 隅のスピード線に重なっても読めるよう地を敷く */
.en-label__sub { margin-left: 0.6em; color: var(--color-ink); }
.hd { font-family: var(--font-head); font-weight: 400; font-size: var(--fs-head); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--color-ink); word-break: keep-all; }
.hd--xl { font-size: var(--fs-hero-head); }
.hd__key { color: var(--color-main); }
.txt { display: grid; gap: var(--sp-p); }
.body { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 稲妻（参考 R4・S-IMG-2：筆でちぎった帯＋墨の縁。GPT で生成した筆の稲妻 assets/brush-bolt.webp） ---------- */
.bolt-img { display: block; height: auto; pointer-events: none; }

/* ---------- 四隅のスピード線（参考 R2・R7） ---------- */
.speed {
  position: absolute; z-index: 1; width: 46%; height: 22%; pointer-events: none;
  background: repeating-linear-gradient(-32deg, var(--color-speed) 0 2px, transparent 2px 8px);
}
.speed--tr { top: var(--header-h); right: 0; clip-path: polygon(30% 0, 100% 0, 100% 100%); }
.speed--tl { top: var(--header-h); left: 0; clip-path: polygon(0 0, 70% 0, 0 100%); }
.speed--bl { bottom: 0; left: 0; clip-path: polygon(0 35%, 0 100%, 60% 100%); }
.speed--br { bottom: 0; right: 0; clip-path: polygon(100% 30%, 100% 100%, 35% 100%); }

/* ---------- 背景の巨大な英字（参考 R8：薄く・流れ続ける。疑似要素で描く＝検査の重なりに数えない） ---------- */
.page[data-giant]::before {
  content: attr(data-giant) attr(data-giant); position: absolute; z-index: 0; left: 0; top: 54%; width: max-content;
  font-family: var(--font-en); font-weight: 900; font-size: 6.5em; line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px var(--color-giant); rotate: -8deg; pointer-events: none;
  animation: pf-marquee 60s linear infinite paused;
}
.page.is-active[data-giant]::before { animation-play-state: running; }   /* 見えていないページでは動かさない（負荷を下げる） */
.page--p2[data-giant]::before { top: 30%; animation-direction: reverse; }

/* ---------- 電気のビリビリ（参考 megavolt-creative：絵がコマ送りで震え続ける・背景一面の稲妻の落書き・稲妻の明滅。2026-10-29 責任者「電気びりびり系をもっと」） ---------- */
.page:not(.page--hero) .page__inner::before {   /* 背景の稲妻の落書き（薄く。疑似要素＝検査の重なりに数えない） */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;   /* inset は 0 のまま（外へはみ出すと長いページのスクロールの範囲が伸び、最下部のスナップと食い違う） */
  background: url("assets/zap-doodle.svg") 0 0 / 210px 210px repeat; opacity: 0.2;
}
.page.is-active:not(.page--long) .page__inner::before { animation: zap-doodle 0.48s steps(1) infinite; }   /* 見えている1画面のページだけ、落書きがコマ送りで揺れる（transform だけ＝描き直しなし。長いページは揺らさない：iPhone でスクロールが重くならないように） */
.speed::before, .speed::after {   /* 隅のスピード線の中で、ときどき稲妻が光る（2コマを交互に） */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: url("assets/zap-arc1.svg") center / contain no-repeat;
}
.speed::after { background-image: url("assets/zap-arc2.svg"); }
.page.is-active .speed::before { animation: zap-flash 2.6s steps(1) 0.4s infinite; }
.page.is-active .speed::after { animation: zap-flash 2.6s steps(1) 0.52s infinite; }
@keyframes zap-doodle { 0% { transform: translate(0, 0); } 33% { transform: translate(2px, -3px); } 66% { transform: translate(-3px, 2px); } }
@keyframes zap-flash { 0% { opacity: 0; } 8% { opacity: 1; } 12% { opacity: 0; } 16% { opacity: 1; } 22% { opacity: 0; } 100% { opacity: 0; } }
@keyframes zap-boil { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(1.5px, -1px) rotate(0.8deg); } 50% { transform: translate(-1px, 1.5px) rotate(-0.6deg); } 75% { transform: translate(1px, 1px) rotate(0.4deg); } }
@keyframes zap-flicker { 0%, 84% { opacity: 1; } 86% { opacity: 0.25; } 89% { opacity: 1; } 92% { opacity: 0.4; } 95%, 100% { opacity: 1; } }
.sfx.is-on { animation: pf-stamp var(--pf-dur) var(--pf-ease) var(--pf-delay) both, zap-boil 0.36s steps(1) calc(var(--pf-delay) + var(--pf-dur)) infinite; }   /* 押されたあとは震え続ける */
.tool.is-on { animation: pf-float var(--pf-dur) ease-in-out var(--pf-delay) infinite alternate, zap-boil 0.3s steps(1) infinite; }   /* 浮く（translate・rotate）＋震える（transform）はぶつからない */
.bolt-img.is-on { animation: pf-paint-reveal var(--pf-dur) var(--pf-ease) var(--pf-delay) both, pf-paint-reveal-y calc(var(--pf-dur) * 0.55) var(--pf-ease) var(--pf-delay) both, zap-flicker 3.2s steps(1) calc(var(--pf-delay) + var(--pf-dur)) infinite; }

/* ---------- 手描きの道具（参考 R5：太い輪郭＋ずらした影。常に揺れる＝float 強め） ---------- */
.tool { position: absolute; z-index: 3; width: var(--tool-w); height: auto; pointer-events: none; --pf-amp: 8px; --pf-tilt: 5deg; --pf-dur: 1.8s; }

/* ---------- p1 掴み ---------- */
.page--p1 .hd__key { padding: 0 0.08em; background: var(--color-accent); --pf-a: var(--color-main); --pf-b: var(--color-accent-2); }
.p1-art { position: absolute; z-index: 1; top: 0; right: 0; width: 38%; height: 100%; pointer-events: none; }
.bolt--p1 { position: absolute; top: 4%; right: -14%; width: 120%; rotate: 62deg; --pf-delay: 120ms; --pf-dur: var(--bolt-dur); }
.sfx { position: absolute; z-index: 2; height: auto; pointer-events: none; --pf-from-scale: 2.6; --pf-from-rotate: -18deg; }   /* 擬音（参考 S-IMG-5 の「ゴゴゴ」→ 電気の擬音。GPT で生成した手描きの文字の絵） */
.sfx--label { top: -0.6em; right: -0.3em; width: 30%; rotate: -6deg; --pf-delay: 250ms; }   /* 英字ラベルの右の空き */
.sfx--p2 { top: -1.1em; width: 26%; }
.sfx--p3 { top: -0.8em; right: -0.2em; width: calc(var(--fig-h) * 1.05); rotate: 6deg; --pf-delay: 950ms; }   /* 電球が点くのと同時に */
.sfx--p4 { top: 1.5em; right: -0.3em; width: 34%; rotate: -8deg; --pf-delay: 300ms; }
.sfx--p5 { left: -0.2em; top: 2.7em; width: 30%; rotate: -10deg; --pf-delay: 700ms; }   /* 段違いの吹き出しの空き（2つ目の左） */
.sfx--p6b { width: 22%; rotate: 0deg; }
.sfx--p7 { top: -1.9em; right: -0.3em; width: calc(var(--meter-w) * 1.25); rotate: -6deg; --pf-delay: 1200ms; }   /* 針が振り切れたところで */
.body--sfx { position: relative; }
.sfx--p7b { top: 0.2em; right: 0; width: 30%; rotate: 8deg; --pf-delay: 650ms; }
.sfx--p8b { right: -0.2em; bottom: -0.2em; width: 34%; rotate: -6deg; --pf-delay: 1400ms; }
.sfx--co { width: 28%; }
.sfx--p1 { top: 2.4em; right: -0.4em; width: 92%; rotate: -8deg; --pf-delay: 420ms; }
.tag { justify-self: start; display: inline-flex; padding: 0.3em 1em; font-weight: 900; line-height: 1.4; color: var(--color-on-dark); background: var(--color-main); border-radius: var(--radius-pill); --pf-delay: 380ms; }
.strong { font-weight: 900; font-size: 1.28em; line-height: 1.45; letter-spacing: 0.02em; }
.strong__key { padding: 0 0.15em; background: var(--color-accent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.frame { position: relative; padding: 0.9em 1em; border: var(--frame-w) solid var(--color-main); }
.frame::after { content: ""; position: absolute; inset: 5px -6px -6px 5px; z-index: -1; border: 1px dashed var(--color-main); }
.frame__label { position: absolute; top: -0.75em; left: 0.8em; padding: 0 0.4em; font-family: var(--font-en); font-weight: 700; font-size: var(--fs-min); line-height: 1.4; letter-spacing: 0.08em; color: var(--color-main-2); background: var(--color-base); }
.tool--p1 { right: -0.4em; bottom: calc(100% - 0.9em); width: calc(var(--tool-w) * 0.8); }

/* ---------- p2 違和感（参考 R6：段違いの枠／R7：濃い地の帯） ---------- */
.issues { display: grid; grid-template-columns: 22% minmax(0, 1fr); gap: 0.5em; font-weight: 700; }
.issue { grid-column: 1 / -1; justify-self: start; align-self: center; display: block; padding: 0.4em 0.8em; line-height: 1.55; border: var(--frame-w) solid var(--color-main); background: var(--color-base); }
.issue:nth-of-type(2) { grid-column: 2; border-color: var(--color-ink); --pf-delay: 140ms; }
.issue:nth-of-type(3) { background: var(--color-pale); --pf-delay: 280ms; }
.issue--aligned { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.issue__no { margin-right: 0.6em; font-family: var(--font-en); font-weight: 900; color: var(--color-main-2); }
.tool--p2 { position: relative; grid-column: 1; grid-row: 2; align-self: center; justify-self: center; width: 100%; max-width: calc(var(--tool-w) * 0.8); --pf-delay: -0.6s; }
.ask { justify-self: start; rotate: -1.5deg; --pf-delay: 520ms; }
.ask__in { display: inline-block; padding: 0.5em 0.85em; font-weight: 900; line-height: 1.5; color: var(--color-on-dark); background: var(--color-deep); box-shadow: 4px 4px 0 0 var(--color-accent); --pf-delay: 980ms; --pf-amp: 5px; }

/* ---------- p3 現在の当社（参考 R3：作図の枠） ---------- */
.head--fig { grid-template-columns: minmax(0, 1fr) var(--fig-h); align-items: end; column-gap: 0.4em; }
.head__t { display: grid; gap: var(--sp-1); }
.fig { width: var(--fig-h); height: var(--fig-h); --pf-delay: 160ms; }
.fig__svg { display: block; overflow: visible; }
.fig__guide { fill: none; stroke: var(--color-main); stroke-width: 1px; stroke-dasharray: 3 3; }
.fig__head, .fig__body { fill: var(--color-main); }
.fig__wire { fill: none; stroke: var(--color-ink); stroke-width: 2.5px; stroke-linejoin: round; }
.fig__bulb { fill: var(--color-base); stroke: var(--color-ink); stroke-width: 2.5px; transition: fill 200ms ease; }
.fig__spark { fill: none; stroke: var(--color-ink); stroke-width: 2.5px; stroke-linecap: round; opacity: 0; transition: opacity 200ms ease; }
.fig.is-on .fig__bulb { fill: var(--color-accent); transition-delay: 900ms; }
.fig.is-on .fig__spark { opacity: 1; transition-delay: 900ms; }
.close-band { padding: 0.05em 0.4em; font-weight: 900; --pf-band: var(--color-accent); --pf-delay: 1200ms; }
.bolt--p3 { position: absolute; right: 0; bottom: 0; width: 20%; --pf-delay: 1250ms; --pf-dur: var(--bolt-dur); }

/* ---------- シートの太字（キット 2.6：太さ700・1.1倍・行の高さを押し広げない。ハイライトはしない） ---------- */
.kw { font-weight: 700; font-size: 1.1em; line-height: 1; }

/* ---------- p4 仕事内容（参考 R3 の作図 → 1本の配線に端子が並ぶ） ---------- */
.works { position: relative; margin-block: var(--works-space); }   /* 前後の文との間を広げる（2026-10-30 先方「リストの上下にゆとりを」） */
.works__list { position: relative; display: grid; gap: var(--works-gap); padding-left: 1.8em; font-weight: 700; }   /* 行の間・枝の長さ（2026-10-30 先方「行間をゆったり・横の線を少し長く」） */
.works__list::before { content: ""; position: absolute; left: 0.35em; top: 0.7em; bottom: calc(2.2em + var(--works-gap)); width: 2.5px; background: var(--color-ink); }   /* 配線（幹線） */
.work { position: relative; line-height: 1.5; --pf-dist: 28px; }
.work::before { content: ""; position: absolute; left: -1.45em; top: 0.75em; width: 0.85em; height: 2.5px; background: var(--color-ink); }   /* 枝の線 */
.work::after { content: ""; position: absolute; left: -0.72em; top: calc(0.75em - 0.3em); width: 0.6em; height: 0.6em; background: var(--color-accent); border: 2px solid var(--color-ink); }   /* 端子 */
.work:nth-of-type(2) { --pf-delay: 90ms; }
.work:nth-of-type(3) { --pf-delay: 180ms; }
.work:nth-of-type(4) { --pf-delay: 270ms; }
.work:nth-of-type(5) { --pf-delay: 360ms; }
.works__end { margin: 0.3em 0 0 -1.8em; font-weight: var(--fw-body); }
.tool--p4 { right: 0; top: 0; width: calc(var(--tool-w) * 1.05); --pf-delay: -0.9s; }
.mark-l { font-weight: 700; background: linear-gradient(transparent 60%, var(--color-accent) 60%); }
.vow { position: relative; padding: 0.2em 0 0.2em 1.1em; font-weight: 700; border-left: 4px solid var(--color-main); }
.vow::before { content: "“"; position: absolute; left: 0.25em; top: -0.55em; font-family: var(--font-head); font-size: 2.6em; line-height: 1; color: var(--color-accent); -webkit-text-stroke: 1.5px var(--color-ink); }

/* ---------- p5 仕事のやり方（参考 R6 の色違いの枠 → 現場の声の吹き出し） ---------- */
.voices { position: relative; display: grid; gap: 0.2em; font-weight: 900; }
.voice { position: relative; justify-self: start; margin-bottom: var(--tail); padding: 0.35em 0.8em; line-height: 1.45; border: 2px solid var(--color-ink); background: var(--voice-bg); rotate: -1.5deg; --voice-bg: var(--color-accent); --tail: 0.85em; --pf-delay: 280ms; --pf-from-scale: 1.8; }
.voice::before, .voice::after { content: ""; position: absolute; top: 100%; width: 0; height: 0; border-style: solid; border-color: transparent; }   /* 吹き出しのしっぽ：墨の三角（ふち）の上に、地の色の三角を一回り小さく重ねる */
.voice::before { left: 1.1em; border-width: var(--tail) var(--tail) 0 0; border-top-color: var(--color-ink); }
.voice::after { left: calc(1.1em + 2px); border-width: calc(var(--tail) - 5px) calc(var(--tail) - 5px) 0 0; border-top-color: var(--voice-bg); }
.voice:nth-of-type(2) { justify-self: end; color: var(--color-on-dark); rotate: 1.5deg; --voice-bg: var(--color-main); --pf-delay: 430ms; }
.voice:nth-of-type(2)::before { left: auto; right: 1.1em; border-width: var(--tail) 0 0 var(--tail); }
.voice:nth-of-type(2)::after { left: auto; right: calc(1.1em + 2px); border-width: calc(var(--tail) - 5px) 0 0 calc(var(--tail) - 5px); }
.voice:nth-of-type(3) { margin-left: 8%; color: var(--color-on-dark); rotate: -0.8deg; --voice-bg: var(--color-deep); --pf-delay: 580ms; }
.motto { justify-self: start; font-weight: 900; font-size: 1.12em; line-height: 1.5; }
.motto__t { position: relative; }
.motto__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.25em; height: 0.3em; background: var(--color-main); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--ease-out); }   /* 標語の伸びる下線 */
.motto.is-on .motto__t::after { transform: none; transition-delay: 250ms; }

/* ---------- p6 キャリア（締め＝今 → これから の対比・図＝順番待ちの階段と稲妻の近道） ---------- */
.shift { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stairs-w); align-items: end; column-gap: 0.5em; }
.shift__t { display: grid; gap: 0.45em; }
.shift__tag { display: inline-block; margin-right: 0.6em; padding: 0 0.4em; font-family: var(--font-en); font-weight: 900; font-size: var(--fs-min); line-height: 1.6; letter-spacing: 0.08em; vertical-align: 0.1em; }
.shift__next { justify-self: start; padding: 0.35em 0.7em; font-weight: 900; font-size: 1.08em; line-height: 1.5; color: var(--color-on-dark); background: var(--color-deep); box-shadow: 4px 4px 0 0 var(--color-accent); --pf-delay: 700ms; }
.shift__next .shift__tag { color: var(--color-ink); background: var(--color-accent); }
.stairs { width: var(--stairs-w); height: calc(var(--stairs-w) * 0.92); --pf-delay: 300ms; }
.stairs__svg { display: block; overflow: visible; }
.stairs__step { fill: none; stroke: var(--color-main); stroke-width: 2px; stroke-dasharray: 4 3; }
.stairs__wait { fill: var(--color-line); }
.stairs__bolt { fill: none; stroke: var(--color-ink); stroke-width: 8px; stroke-linejoin: round; stroke-linecap: round; }
.stairs__bolt--in { stroke: var(--color-accent); stroke-width: 3.5px; }   /* 墨の縁の上にライム（参考 R4 の稲妻） */
.stairs__me { fill: var(--color-main); stroke: var(--color-ink); stroke-width: 2.5px; }
.stairs.is-on .stairs__bolt { stroke-dasharray: 160; stroke-dashoffset: 160; animation: stairs-bolt 520ms cubic-bezier(1, 0.26, 0, 1) 800ms forwards; }
@keyframes stairs-bolt { to { stroke-dashoffset: 0; } }

/* ---------- p7 待遇（太字の数字・メーターの針が振り切れる・はんこの締め） ---------- */
.pay { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--meter-w); align-items: center; column-gap: 0.6em; }
.pay__t .kw { color: var(--color-main-2); }
.meter { width: var(--meter-w); }
.meter__svg { display: block; overflow: visible; }
.meter__arc { fill: none; stroke: var(--color-ink); stroke-width: 3px; }
.meter__hot { fill: none; stroke: var(--color-accent); stroke-width: 9px; }
.meter__tick { fill: none; stroke: var(--color-ink); stroke-width: 2.5px; }
.meter__needle { transform-origin: 60px 66px; transform: rotate(-80deg); }
.meter__needle path { fill: none; stroke: var(--color-main); stroke-width: 4px; stroke-linecap: round; }
.meter__needle circle { fill: var(--color-ink); }
.page.is-active .meter__needle { animation: meter-swing 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both, meter-buzz 0.18s linear 1.9s infinite alternate; }
@keyframes meter-swing { 0% { transform: rotate(-80deg); } 45% { transform: rotate(-28deg); } 100% { transform: rotate(66deg); } }
@keyframes meter-buzz { from { transform: rotate(62deg); } to { transform: rotate(68deg); } }
.perks { display: grid; gap: 0.55em; padding: 0.9em 1em; font-weight: 700; background: var(--color-base); border: 2.5px solid var(--color-ink); border-radius: 4px; box-shadow: var(--shadow-soft); }   /* 座布団（白の地＋墨の枠＋ずらした影。2026-10-30 先方「背景色＋枠でひとつのフレームに」・角は先方の参考画像の小さな丸み） */
.perk { position: relative; padding-left: 1.5em; line-height: 1.55; --pf-delay: 200ms; }
.perk + .perk { --pf-delay: 340ms; }
.perk::before { content: ""; position: absolute; left: 0.1em; top: 0.3em; width: 0.95em; height: 0.95em; background: var(--color-accent); border: 2px solid var(--color-ink); }
.perk::after { content: ""; position: absolute; left: 0.38em; top: 0.42em; width: 0.32em; height: 0.55em; border: solid var(--color-ink); border-width: 0 2.5px 2.5px 0; rotate: 45deg; }   /* チェックの印 */
.seal { justify-self: start; --pf-delay: 900ms; --pf-from-rotate: -14deg; }
.seal__in { display: inline-block; padding: 0.45em 0.9em; font-weight: 900; line-height: 1.5; color: var(--color-main-2); border: 4px double var(--color-main); background: var(--color-base); }

/* ---------- p8 締め（濃い紫の面＝参考の黒の面。最終ブロック＝ライムの帯＋墨の極太） ---------- */
.page--p8::after {   /* 集中線（参考の ENDING MESSAGE の背景。尖った線を1枚の SVG に描き、中央は空ける。疑似要素で描く＝検査の重なりに数えない） */
  content: ""; position: absolute; z-index: 0; inset: -10%; pointer-events: none;
  background: url("assets/speed-burst.svg") 50% 40% / auto 120% no-repeat; opacity: 0.7; transform: scale(1.04);
}
.page--p8.is-active::after { animation: p8-burst 1.6s ease-in-out infinite alternate; }   /* 見えているページだけ脈打つ */
@keyframes p8-burst { from { transform: scale(1.04) rotate(0deg); } to { transform: scale(1.12) rotate(1.5deg); } }
.page--p8 .hd { color: var(--color-on-dark); }
.page--p8 .hd__key { padding: 0 0.08em; color: var(--color-ink); background: var(--color-accent); }   /* p1 の「乗っ取り」と同じライムの面（締めで1枚目に呼応させる） */
.page--p8 .en-label { color: var(--color-accent); background: var(--color-deep); }
.page--p8 .en-label__sub { color: var(--color-on-dark); }
.page--p8 .speed { --color-speed: var(--color-speed-dark); }
.page--p8[data-giant]::before { -webkit-text-stroke-color: var(--color-giant-dark); top: 70%; }
.bolt--p8 { position: absolute; z-index: 1; top: calc(var(--header-h) + 1%); right: -14%; width: 40%; rotate: 58deg; --pf-delay: 160ms; --pf-dur: var(--bolt-dur); }
.wishes { display: grid; gap: 0.25em; font-weight: 700; }
.wish { position: relative; padding-left: 1.3em; line-height: 1.55; }
.wish::before { content: ""; position: absolute; left: 0.1em; top: 0.35em; width: 0.7em; height: 0.8em; background: var(--color-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.wish:nth-of-type(2) { --pf-delay: 120ms; }
.wish:nth-of-type(3) { --pf-delay: 240ms; }
.final { position: relative; display: grid; justify-items: start; gap: var(--sp-p); }
.final__t { padding: 0.35em 0.7em; font-family: var(--font-head); font-size: 1.32em; line-height: 1.4; letter-spacing: 0.02em; color: var(--color-ink); background: var(--color-accent); box-shadow: 5px 5px 0 0 var(--color-main); --pf-delay: 900ms; }
.final__t .kw { font-weight: 400; font-size: 1em; }
.sfx--p8 { right: -0.6em; top: 0.4em; width: 30%; rotate: 8deg; --pf-delay: 1200ms; }
.final__btn { display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px; padding: 0 1.6em; font-weight: 900; letter-spacing: 0.08em; color: var(--color-ink); background: var(--color-on-dark); border: 2px solid var(--color-ink); box-shadow: 4px 4px 0 0 var(--color-accent); }
.final__ar { width: 1.2em; height: 1.2em; }

/* ---------- 会社概要（参考 R3：細い線の角ばった枠） ---------- */
.co { display: grid; gap: var(--sp-p); padding: 1.2em 1em 0.6em; }
.co__logo { display: block; width: 6.5em; height: auto; }
.spec--co .spec__row:last-child { border-bottom: 0; }
.tool--co { right: var(--gutter); bottom: calc(var(--pad-y) + 0.4em); width: calc(var(--tool-w) * 0.9); --pf-delay: -1.2s; }

/* ---------- 募集要項・エントリー（下層の頭＋表＋フォーム） ---------- */
.sub-head { position: relative; display: grid; gap: var(--sp-1); padding-bottom: 0.6em; border-bottom: var(--frame-w) solid var(--color-main); }
.bolt--sub { position: absolute; right: 0; bottom: 0.2em; width: 30%; }
.spec { display: grid; }
.spec__row { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 1em; padding: 0.85em 0; border-bottom: 1px solid var(--color-line); }
.spec__dt { font-weight: 900; color: var(--color-main-2); }
.spec__dd { font-weight: var(--fw-body); word-break: keep-all; overflow-wrap: anywhere; }
.spec__dd--flow { word-break: normal; }   /* 仕事内容：語の切れ目で折らず横幅いっぱいで折り返す（先方 10-30「全て改行なしで横幅に任せる」） */
.badge { padding: 0.1em 0.55em; font-size: var(--fs-min); line-height: 1.5; color: var(--color-on-dark); background: var(--color-main); }
.badge--opt { color: var(--color-main-2); background: var(--color-pale); }
.form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; }
.form__ar { width: 1.2em; height: 1.2em; }

/* ---------- PC の左右の帯（巨大な英字が流れる・ロゴ・稲妻・道具） ---------- */
@media (min-width: 960px) {
  .rail { overflow: hidden; }
  .giant { position: absolute; inset: 8% 0 auto 0; height: 1.1em; --pf-size: 132px; --pf-color: var(--color-main); --pf-opacity: 0.22; --pf-speed: 40s; font-family: var(--font-en); font-weight: 900; }
  .giant::before { content: attr(data-text) attr(data-text); display: block; width: max-content; }   /* 流れる文字は疑似要素で描く（帯の外へ出る要素を作らない。キット 2.8） */
  .giant.is-on::before { animation: pf-marquee var(--pf-speed) linear infinite; }
  .giant--r.is-on::before { animation-direction: reverse; }
  .giant--r { inset: auto 0 8% 0; }
  .rail-logo { position: relative; z-index: 1; }
  .rail-bolt { position: absolute; right: 14%; bottom: 16%; width: min(40%, 200px); height: auto; rotate: 64deg; pointer-events: none; }   /* 傾けても帯の内側に収まる大きさ（中央の本文に掛けない） */
  .rail-side { position: relative; z-index: 1; }
  .rail-tool { position: absolute; left: 10%; top: 10%; width: min(46%, 230px); height: auto; --pf-amp: 10px; --pf-tilt: 6deg; --pf-dur: 2s; }
  .rail-tool--l { left: 8%; right: auto; top: auto; bottom: 8%; width: min(40%, 200px); --pf-delay: -1s; }
  .rail-tool.is-on { animation: pf-float var(--pf-dur) ease-in-out var(--pf-delay) infinite alternate, zap-boil 0.32s steps(1) infinite; }
  .rail-bolt { animation: zap-flicker 2.8s steps(1) infinite; }
}

/* TOPの動画を始める前の読み込み画面 */
.hero-loading:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-pale);
}
.hero__fallback[hidden] { display: none; }