/* 案件の見た目（このファイルだけを案件ごとに書く）
 * 値は DNA.md の実測を tokens.css の変数にしてから使う（色・大きさを直接書かない）
 * 決まり：1つの部品は1か所にだけ書く。末尾に足して上書きしない。!important を使わない
 * 土台（base.css）の指定を変えたいときは、ここで上書きせず、キットの改善として報告する
 */

/* ---------- 読み込み画面：英字の社名を1文字ずつ細い線で描く（一筆書き調）。約2.3秒で消える。操作は通す（pointer-events: none） ---------- */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--color-paper) var(--paper); background-size: 264px 264px; pointer-events: none; transition: opacity 0.5s ease, visibility 0.5s ease; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__catch { width: min(80vw, 460px); height: auto; overflow: visible; }
.loader__ch { --k: 0; fill: none; stroke: var(--color-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: loader-draw 0.7s ease-in-out calc(80ms + var(--k) * 110ms) forwards; }
.loader__ch:nth-child(2) { --k: 1; }
.loader__ch:nth-child(3) { --k: 2; }
.loader__ch:nth-child(4) { --k: 3; }
.loader__ch:nth-child(5) { --k: 4; }
.loader__ch:nth-child(6) { --k: 5; }
.loader__ch:nth-child(7) { --k: 6; }
.loader__ch:nth-child(8) { --k: 7; }
.loader__ch:nth-child(9) { --k: 8; }
.loader__ch:nth-child(10) { --k: 9; }
.loader__ch:nth-child(11) { --k: 10; }
@keyframes loader-draw { to { stroke-dashoffset: 0; } }

/* ---------- 地：方眼＋紙の繊維（DNA 要点1。全ページ同じ地） ---------- */
.page::before, .rail::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--paper); background-size: 264px 264px;
}
.page--hero::before { content: none; }

/* ---------- 見出しの組（DNA 要点4。日本語の内部セクション名は非表示に。責任者 2026-10-29） ---------- */
.head { display: grid; gap: var(--sp-1); }
/* 見出し：太く大きく、下に短いティールの線（責任者指示の p3 画像） */
.ttl--r { font-size: 1.75em; line-height: 1.4; letter-spacing: 0.02em; font-feature-settings: "palt"; }
.ttl--r .kw { font-weight: 800; }
.ttl--r::after, .ln--em::after, .cbox__ttl::after, .fv .txt > .body:first-child::after { content: ""; display: block; width: 2.4rem; height: 2px; background: var(--color-accent); scale: 0 1; }
.ttl--r::after { margin-top: 0.3em; transform-origin: left center; }
.ln--em::after, .cbox__ttl::after { margin-top: 0.45em; transform-origin: left center; }
.page.is-active .ttl--r::after, .rv.is-on.ln--em::after, .rv.is-on .cbox__ttl::after { scale: 1 1; transition: scale 500ms var(--ease-out) 600ms; }
@media (max-height: 800px) { .ttl--r { font-size: 1.5em; } .ln--em { font-size: 1.2em; } }   /* 低い画面は見出しと強調の大きさを一段下げて1画面に収める */
@media (max-height: 700px) { .ttl--r { font-size: 1.4em; } .ln--em { font-size: 1.15em; } .cbox__ttl { font-size: 1em; } }
@media (max-height: 620px) { .ttl--r { font-size: 1.3em; } .ln--em { font-size: 1.1em; } }
.bigen--title { flex-shrink: 0; margin-block: 0.25em 0.15em; }
@media (max-height: 600px) { .bigen--title, .with-person__img { display: none; } }   /* 低い画面は英字・p5 の絵を出さず、本文を収める */
.bigen--title .bigen__word { flex: 0 0 auto; width: auto; height: var(--en-h); max-height: none; }
/* 本文の太字：1行まるごとの太字（.ln--em）は大きく・太く・ティール＋下に短い線（先方指示「本文太字部分の強調」・責任者指示の p1／p3 画像） */
.kw { font-weight: 700; }
.close .kw, .body .kw { color: var(--color-accent-text); }
.ln--em { font-size: 1.32em; line-height: 1.45; letter-spacing: 0.02em; font-feature-settings: "palt"; }
.ln--em .kw { font-weight: 800; }
.ln--em + .ln { margin-top: 0.5em; }

/* ---------- 本文のまとまり（近接：段落の間＝--sp-p） ---------- */
.txt { display: grid; gap: var(--sp-p); }
.page__inner { word-break: keep-all; overflow-wrap: break-word; }   /* 文節の折れ目（<wbr>）以外では折らない。iPhone の Safari は auto-phrase が効かず1文字単位で折るため（AGENTS.md 2.13） */

/* ---------- p1＝FV（参考の1画面目：迷路の細線＋英字のかけら＋細線の題字。中央揃え） ---------- */
.fv .page__inner { text-align: center; }
.fv { --fv-band: clamp(40px, 11dvh, 130px); }
.fv__head { margin-top: var(--fv-band); }
.fv .txt { margin-bottom: var(--fv-band); }   /* 上の帯と同じだけ下にも間を取り、上下の余白をそろえる（AGENTS.md 2.9 の絶対条件） */
@media (max-height: 800px) { .fv { --fv-band: max(38px, 6dvh); } .fv .txt { --lh-body: 1.7; } }   /* 低い画面は文字と間を詰めて1画面に収める（飾りは消さない） */
@media (max-height: 700px) { .fv { --fv-band: max(32px, 5dvh); } .fv .txt { --lh-body: 1.6; --sp-p: 0.5em; } }
/* 背景の飾り＝間取り図の部屋の壁（端から入り角を丸く曲がり端へ抜ける・入口に点線の扉の開き）＋部屋の中にばらした題字の文字（DNA.md 0.8）。重ね置きなので中身の高さを使わない */
.door { fill: none; stroke: var(--color-ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.page.is-active .door { opacity: 0.85; transition: opacity 600ms ease 1200ms; }
.dk__m { stroke: var(--color-accent); stroke-width: 1.4; }   /* 記号（×・○）は部屋の中に1つまで（DNA.md 0.8 D3） */
/* FV の背景＝間取り図（参考 FV の動画の形：画面幅の6〜7割の大きな段々の部屋・中に大きくばらした題字の文字。DNA.md 0.8）。
   中身（題字・見出し・吹き出し・本文）の位置を site.js が測り、その周りを壁で回り込んで描く。約2秒ごとに壁の段と文字を組み替える */
.fv__plan { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; pointer-events: none; fill: none; stroke: var(--color-ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.fvp-w { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fv.is-active .fvp-w { animation: pf-line-draw 1000ms var(--ease-out) 100ms forwards; }
.fvp-l, .fvp-m, .fvp-door { opacity: 0; }
.fvp-m { stroke: var(--color-accent); stroke-width: 1.4; }
.fvp-door { stroke-dasharray: 2 3; }
.fv.is-active .fvp-l, .fv.is-active .fvp-m { opacity: 1; transition: opacity 400ms ease 500ms; }
.fv.is-active .fvp-door { opacity: 0.85; transition: opacity 400ms ease 800ms; }
.fv__head { display: grid; justify-items: center; gap: var(--sp-p); }
.fv__title { width: 92%; height: auto; fill: none; stroke: var(--color-ink); stroke-width: 1.3; stroke-linejoin: round; overflow: visible; }
.fv__title .pf-line-draw { --pf-dur: 550ms; --pf-delay: calc(120ms + var(--i, 0) * 35ms); translate: calc(var(--i, 0) * 9px) 0; }   /* 字間を広げる（責任者指示「詰まりすぎ」）。--i は1文字ずつの番号 */
.fv__title .pf-line-draw:nth-child(2) { --i: 1; }
.fv__title .pf-line-draw:nth-child(3) { --i: 2; }
.fv__title .pf-line-draw:nth-child(4) { --i: 3; }
.fv__title .pf-line-draw:nth-child(5) { --i: 4; }
.fv__title .pf-line-draw:nth-child(6) { --i: 5; }
.fv__title .pf-line-draw:nth-child(7) { --i: 6; }
.fv__title .pf-line-draw:nth-child(8) { --i: 7; }
.fv__title .pf-line-draw:nth-child(9) { --i: 8; }
.fv__title .pf-line-draw:nth-child(10) { --i: 9; }
.fv__title .pf-line-draw:nth-child(11) { --i: 10; }
/* 題字は散らばったかけらから集まって組み上がる（参考の動画 0.5〜1.0秒）。字間の translate とは別の transform で動かす */
.fv__title path { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); transform-box: fill-box; transform-origin: center; }
.fv.is-active .fv__title path { transform: none; transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1) var(--pf-delay); }
.fv__title path:nth-child(1) { --fx: -60px; --fy: -40px; --fr: -90deg; }
.fv__title path:nth-child(2) { --fx: 30px; --fy: -70px; --fr: 120deg; }
.fv__title path:nth-child(3) { --fx: -40px; --fy: 50px; --fr: 45deg; }
.fv__title path:nth-child(4) { --fx: 70px; --fy: 40px; --fr: -60deg; }
.fv__title path:nth-child(5) { --fx: -80px; --fy: 10px; --fr: 180deg; }
.fv__title path:nth-child(6) { --fx: 20px; --fy: 60px; --fr: 90deg; }
.fv__title path:nth-child(7) { --fx: -30px; --fy: -60px; --fr: -45deg; }
.fv__title path:nth-child(8) { --fx: 60px; --fy: -30px; --fr: 150deg; }
.fv__title path:nth-child(9) { --fx: -50px; --fy: 40px; --fr: -120deg; }
.fv__title path:nth-child(10) { --fx: 40px; --fy: 70px; --fr: 60deg; }
.fv__title path:nth-child(11) { --fx: 80px; --fy: -50px; --fr: -90deg; }
.ttl--fv { font-size: 1.7em; line-height: 1.35; letter-spacing: 0.04em; font-feature-settings: "palt"; }
.ttl--fv .kw { font-weight: 800; }
.ttl--fv .ln + .ln { font-size: 1.22em; color: var(--color-accent-text); }   /* 2行目「ちょっと羨ましい。」はティールで一回り大きく（責任者指示の画像） */
@media (max-height: 800px) { .ttl--fv { font-size: 1.5em; } }
@media (max-height: 700px) { .ttl--fv { font-size: 1.3em; } }

/* 背景の線・記号・英字のかけらは、描き終わったあともそれぞれ別のリズムで漂い続ける（参考は表示後も動き続ける。責任者指示） */
.deco path, .rail__maze path { transform-box: fill-box; transform-origin: center; }
.deco .pf-line-draw.is-on, .rail__maze .pf-line-draw.is-on { animation: pf-line-draw var(--pf-dur) var(--pf-ease) var(--pf-delay) forwards, fv-drift var(--drift-dur, 4.6s) ease-in-out calc(var(--pf-delay) + var(--pf-dur)) infinite; }
.deco path:nth-child(2n), .rail__maze path:nth-child(2n) { --dx: 5px; --dy: 4px; --drift-dur: 5.6s; }
.deco path:nth-child(3n), .rail__maze path:nth-child(3n) { --dx: -4px; --dy: -5px; --drift-dur: 3.9s; }
.dk__m, .rail__mark { --dr: 14deg; --dy: -6px; --drift-dur: 3.4s; }
.deco path:not(.dk__m) { --dx: 0px; }   /* 端の線は横に動かさない（本文に寄らないように） */
@keyframes fv-drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: var(--dx, 0px) var(--dy, -5px); rotate: var(--dr, 0deg); } }


/* 3つの悩み＝吹き出し：上と右は開き、左の線から下の線へ回り込み、右端で下へくるっと跳ねる形（責任者指示の画像）。右に腕を組んで悩む職人 */
.bubbles { position: relative; display: grid; gap: 0.6em; margin-top: 0.1em; padding-right: 29%; }
.bubbles__person { position: absolute; right: -0.4em; bottom: -0.2em; width: 31%; height: auto; }
.bubble { position: relative; width: fit-content; padding: 0.35em 1.7em 0.7em 0.95em; font-size: max(var(--fs-min), var(--fs-quote)); font-weight: 500; line-height: 1.7; text-align: left; }
.bubble .ln + .ln { padding-left: 0.6em; }
.bubble::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--color-ink); border-right: 0; border-radius: 1.3em 0 0 1.3em; clip-path: polygon(0 0, 1.35em 0, 1.35em 4px, 100% 4px, 100% 100%, 0 100%); pointer-events: none; }
.bubble::after { content: ""; position: absolute; left: 100%; top: calc(100% - 1px); width: 1em; height: 0.95em; border-top: 1px solid var(--color-ink); border-right: 1px solid var(--color-ink); border-top-right-radius: 1em; pointer-events: none; }
.bubble--1 { margin-inline: 0 auto; }
.bubble--2 { margin-inline: 15% auto; }
.bubble--3 { margin-inline: 4% auto; }
@media (max-height: 800px) { .bubbles { gap: 0.35em; } .bubble { padding-block: 0.1em 0.45em; line-height: 1.55; } }   /* 低い画面は吹き出しの余白を詰めて1画面に収める */

/* 低い画面・PC の詰め（上の基本の指定より後ろに置く） */
@media (max-height: 600px) { .fv .txt { --lh-body: 1.45; } .fv { --fv-band: 28px; } .ttl--fv { font-size: 1.15em; } .bubbles { gap: 0.25em; } .bubble { padding-block: 0 0.4em; line-height: 1.45; } .ln--em { font-size: 1.1em; } }
@media (min-width: 768px) and (max-height: 1000px) { .fv { --fv-band: max(38px, 6dvh); } .fv .txt { --lh-body: 1.65; } .ttl--fv { font-size: 1.6em; } .bubbles { gap: 0.35em; } .bubble { padding-block: 0.1em 0.45em; line-height: 1.55; } .fv .ln--em { font-size: 1.2em; } }

/* FV の出方（責任者指示：大胆に緩急。先方修正 10-30 19:55②「遅い」で全体の時間を約半分に）：題字と見出し → 職人 → 吹き出しを1つずつ弾ませて → 本文はまとめて1回で出す（先方修正 10-30 20:30「本文テキストはまとめて出していい」でタイプライターをやめた。吹き出しの3つ目が出てから出す）。
   swipe.js の 0.12秒刻み（上から順）に、出るときだけの待ちを足す */
.fv .ttl .ln:first-child { --rv-x: 100ms; }
.fv .ttl .ln + .ln { --rv-x: 320ms; }
.fv .bubbles__person { --rv-x: 560ms; }
.fv .bubble--1 { --rv-x: 760ms; }
.fv .bubble--2 { --rv-x: 980ms; }
.fv .bubble--3 { --rv-x: 1200ms; }
.fv .txt.rv { --rv-x: 1480ms; transform: none; }   /* 上から7つ目＝0.2＋0.12×6＝0.92秒＋1.48秒＝2.4秒で出始める（吹き出し3つ目は 0.2＋0.12×5＋1.2＝2.2秒に出始める）。前のタイプライターと同じく位置は動かさず、その場で浮かび上がる */
.fv .rv.is-on { transition-delay: var(--rv-x, 0ms); }
.fv .ttl .ln + .ln.rv { transform: scale(1.6); }
.fv .ttl .ln + .ln.rv.is-on { transform: none; transition: opacity 180ms ease var(--rv-x), transform 420ms cubic-bezier(0.2, 1.5, 0.4, 1) var(--rv-x); }
.fv .bubble.rv { transform: scale(0.35); transform-origin: left bottom; }
.fv .bubble.rv.is-on { transform: none; transition: opacity 150ms ease var(--rv-x), transform 440ms cubic-bezier(0.2, 1.6, 0.4, 1) var(--rv-x); }
.fv .txt > .body:first-child::after { margin: 0.45em auto 0; transform-origin: center; }
.fv .ln--em::after { margin-inline: auto; transform-origin: center; }
.fv.is-active .txt > .body:first-child::after, .fv.is-active .ln--em::after { scale: 1 1; transition: scale 400ms var(--ease-out) 2800ms; }   /* 本文が出きってから（2.4秒＋0.4秒）線を引く */

/* ---------- p2：特大の細線英字（参考 ABOUT・FUTURE の型。線を描く＝line-draw）＋ボードがハマる遊び ---------- */
.bigen { display: flex; align-items: flex-end; gap: 0.9em; margin-block: clamp(0.4em, 5dvh, 3.4em) clamp(0.2em, 3dvh, 2.2em); }
.bigen__word { flex: 1; min-width: 0; height: auto; max-height: 4.6em; fill: none; stroke: var(--color-ink); stroke-width: 1.4; stroke-linecap: butt; stroke-linejoin: round; overflow: visible; }
.bigen__word .pf-line-draw { --pf-delay: calc(200ms + var(--i, 0) * 120ms); }   /* 1文字ずつ 0.12秒ずらす（0.2秒で描き始め、約1.4秒で描き終わる。AGENTS.md 2.8） */
.bigen__word .pf-line-draw:nth-child(2) { --i: 1; }
.bigen__word .pf-line-draw:nth-child(3) { --i: 2; }
.bigen__word .pf-line-draw:nth-child(4) { --i: 3; }
.bigen__word .pf-line-draw:nth-child(5) { --i: 4; }
.bigen__word .pf-line-draw:nth-child(6) { --i: 5; }
.bigen__word .pf-line-draw:nth-child(7) { --i: 6; }
.boards-band { flex-shrink: 0; width: 100%; height: clamp(56px, 11dvh, 150px); fill: none; stroke: var(--color-ink); stroke-width: 1.2; overflow: visible; }   /* ボードの割付：最後の1枚がティールで「ハマる」（コンセプトの遊び） */
@media (min-height: 920px) { .boards-band { height: 22dvh; } }   /* 縦に長い画面は図を大きくして、中身を画面の6割以上に */
.boards-band .pf-line-draw { --pf-dur: 1000ms; --pf-delay: 300ms; }
.boards-band .boards-band__screws { stroke: var(--color-faint); stroke-width: 2; --pf-delay: 900ms; --pf-dur: 300ms; }
.boards-band__piece { fill: var(--color-accent); opacity: 0; transform: translate(10px, -60px) rotate(-12deg); transform-box: fill-box; transform-origin: 50% 50%; }
.p2.is-active .boards-band__piece { opacity: 1; transform: none; transition: opacity 0.25s ease 1.2s, transform 0.55s var(--ease-out) 1.2s; }
.ttl--concept { font-size: 1.5em; letter-spacing: 0.06em; }
.ttl--concept .kw { color: var(--color-ink); }

/* ---------- p3：線画の物語（R10）。分数の札を左列に縦線でつなぐタイムライン＋最後に代表の線画 ---------- */
.page.p3, .page.p4, .page.p5, .page.p7 { --lh-body: var(--lh-dense); }   /* 文字の多いページだけ行間を詰める（AGENTS.md 2.3・5） */
.step { display: inline-flex; align-items: center; justify-content: center; padding: 0.23em 0.55em 0; font-family: var(--font-en); font-weight: 500; font-size: var(--fs-min); line-height: 1.32; letter-spacing: 0.06em; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); }   /* Josefin Sans は字面が上に寄るので、札の高さは変えずに上へ 0.23em 足して文字を楕円の上下中央に（先方修正 10-30 19:55①） */
.p3 .bigen--title, .p7 .bigen--title { margin-block: 0 0.15em; }   /* 先方修正 10-30 でカードが増えた2ページは、英字の上の空きを詰めて1画面に収める（中身は上下中央なので英字の位置はもともとページごとに違う） */
.timeline { --lh-body: var(--lh-card); display: grid; gap: 0.5em; }
@media (max-height: 800px) { .timeline { gap: 0.3em; } }
.timeline__row { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.55em; width: calc(100% - var(--story-step) * 2); padding: 0.4em 0.7em; background: var(--color-base); border: 1px solid var(--color-accent); border-radius: var(--radius-s); box-shadow: var(--shadow-card); }   /* 1/3〜3/3 をカードにして少しずつ右へずらし、最後だけ色を反転（先方修正 10-30①「ひと目で流れがわかるように」・添付の修正後イメージ：緑の枠・緑の札・右下の影） */
.timeline__row:nth-child(2) { margin-left: var(--story-step); --pf-delay: 120ms; }
.timeline__row:nth-child(3) { margin-left: calc(var(--story-step) * 2); color: var(--color-on-dark); background: var(--color-accent); --pf-delay: 240ms; }
.timeline__row .step { color: var(--color-on-dark); background: var(--color-accent); border-color: var(--color-accent); }
.timeline__row:nth-child(3) .step { color: var(--color-accent-text); background: var(--color-base); border-color: var(--color-base); }
.story { position: relative; }
.story__end { position: relative; display: grid; align-content: center; gap: var(--sp-p); min-height: var(--story-h); padding-right: calc(var(--story-w) + 0.3em); }
.story__end .ln--em { margin-right: calc(-1.8em - 0.3em); }   /* 締めの見出しは線画の足元の空きまで使ってよい */
.story__person { position: absolute; right: -0.4em; bottom: 0; width: auto; max-width: var(--story-w); height: 100%; object-fit: contain; object-position: right bottom; }   /* 代表の線画は締めの文の横に、頭まで見せる（カードに隠さない） */

/* ---------- p4：施工前（ボードの線画）→施工後（写真）の前後比較（R5 の写真の前後比較）＋タブ枠の見出し ---------- */
@property --ba { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.ba { position: relative; flex-shrink: 0; height: clamp(72px, 14dvh, 240px); margin: 0; overflow: hidden; border-radius: var(--radius-photo); touch-action: pan-y; cursor: ew-resize; --ba: 50%; }
.p4.is-active .ba:not(.is-dragged) { animation: ba-sweep 1.8s var(--ease-out) 0.5s both; }
@keyframes ba-sweep { from { --ba: 92%; } to { --ba: 50%; } }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.ba__before { position: absolute; inset: 0; background: var(--color-paper); clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--ba); width: 1px; background: var(--color-base); }
.ba__handle { position: absolute; z-index: 1; top: 50%; left: var(--ba); display: grid; place-items: center; width: 2.4em; height: 2.4em; translate: -50% -50%; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-base); }
.ba__handle svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ba__dot { position: absolute; left: 14%; top: 26%; width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--color-accent); --pf-spread: 2.8; }
.ba__dot--2 { left: 33%; top: 58%; --pf-delay: 1.8s; }
.roles { display: grid; gap: var(--sp-p); }
.role { display: grid; }
.tab { justify-self: start; position: relative; z-index: 1; margin-bottom: -1px; padding: 0.2em 1em 0.1em; font-size: max(var(--fs-min), 0.93em); line-height: 1.6; background: var(--color-paper); border: 1px solid var(--color-ink); border-bottom: 0; border-radius: 0.9em 0.9em 0 0; }
.role .body { padding-top: 0.45em; border-top: 1px solid var(--color-ink); }

/* ---------- p5：角に三角の付いた枠2つ（責任者指示の画像）。上はティールの枠＋丸い＋を点線でつなぐ箇条、下は墨の枠＋先輩と後輩の線画 ---------- */
.p5 .ttl--r .ln + .ln { color: var(--color-accent-text); }
.p5 .ttl--r::after { content: none; }
.p5 .bigen--title::after { content: ""; flex: 1; align-self: center; height: 1px; background: var(--color-ink); }
.cbox { position: relative; padding: 1em 1.1em 1.05em; border: 1px solid var(--color-ink); border-radius: var(--radius-frame); }
.cbox::before { content: ""; position: absolute; top: -1px; left: -1px; width: 1.9em; height: 1.9em; background: var(--color-ink); border-top-left-radius: var(--radius-frame); clip-path: polygon(0 0, 100% 0, 0 100%); }
.cbox--accent { border-color: var(--color-accent); }
.cbox--accent::before { background: var(--color-accent); }
.cbox__ttl { font-size: 1.22em; font-weight: 800; line-height: 1.45; letter-spacing: 0.02em; font-feature-settings: "palt"; color: var(--color-accent-text); }
.points { display: grid; gap: 0.6em; margin-top: 0.75em; }
.points li { position: relative; padding-left: 2.4em; line-height: 1.6; }
.points li::before { content: "+"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.65em; height: 1.65em; font-family: var(--font-en); font-weight: 300; line-height: 1; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 50%; }
.points li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.825em - 0.5px); top: 1.85em; bottom: -0.5em; border-left: 1px dashed var(--color-accent); opacity: 0.6; }
.points li:nth-child(2) { --pf-delay: 120ms; }
.points li:nth-child(3) { --pf-delay: 240ms; }
.plus__list li { position: relative; padding-left: 1.1em; }
.plus__list li::before { content: ""; position: absolute; left: 0.15em; top: 0.68em; width: 0.38em; height: 0.38em; border-radius: 50%; background: var(--color-accent); }   /* ＋の使いすぎを避けて小さな丸に（責任者指示） */
.with-person { padding-bottom: 0.6em; }
.with-person .ln--em + .ln { min-height: calc(var(--senior-w) * 0.8); padding-right: calc(var(--senior-w) - 0.4em); }
.with-person__img { position: absolute; right: 0.5em; bottom: 0.35em; width: var(--senior-w); height: auto; }
@media (max-height: 800px) { .cbox { padding: 0.7em 0.95em 0.75em; } .cbox__ttl { font-size: 1.06em; } .points { gap: 0.35em; margin-top: 0.55em; } .points li { line-height: 1.5; } }
@media (max-height: 700px) { .cbox { padding: 0.6em 0.85em 0.65em; } .points { gap: 0.25em; } }
@media (max-height: 600px) { .p5 .cbox { padding-block: 0.45em 0.5em; } .p3 .ttl--r, .p5 .ttl--r { font-size: 1.2em; } .cbox__ttl { font-size: max(var(--fs-min), 0.95em); } .timeline { gap: 0.15em; } .page.p3, .page.p5 { --lh-body: 1.5; } }   /* いちばん低い画面（390×540）も1画面に */
@media (max-height: 600px) { .with-person .ln--em + .ln { min-height: 0; padding-right: 0; } }

/* ---------- p6：新潟の街並みの線画にティールのピンが立つ（R10）。「さらに、」の箇条は左の縦線 ---------- */
.page.p6 { --lh-body: calc(var(--lh-dense) - 0.05); }
.town { position: relative; }
@media (max-height: 700px) { .town { width: 86%; margin-inline: auto; } }
.town__img { display: block; width: 100%; height: auto; }
.plus { padding-left: 0.9em; color: var(--color-career-text); border-left: 2px solid var(--color-accent); line-height: 1.6; }
.plus__ttl { font-weight: 700; }

/* ---------- p7：2つの枠（未経験なら／経験者なら）。枠の線を描く（line-draw） ---------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; }
.pair__box { position: relative; display: grid; align-content: start; justify-items: center; gap: 0.4em; padding: 0.75em 0.75em 0.9em; text-align: center; background: var(--color-base); border: 1px solid var(--color-accent); border-radius: var(--radius-s); box-shadow: var(--shadow-card); }   /* 未経験／経験者の2枚のカードに人物を1人ずつ（先方修正 10-30②。元の2人並びの絵を左右に分け、添付の修正後イメージどおり緑の枠・右下の影・絵の下に点線） */
.pair__img { flex-shrink: 0; width: auto; max-width: 100%; height: var(--pair-img-h); }
.pair__who { position: relative; justify-self: stretch; margin-top: 0.35em; padding: 0.2em 0.6em; font-weight: 700; font-size: max(var(--fs-min), 0.93em); color: var(--color-on-dark); background: var(--color-accent); border-radius: var(--radius-pill); }
.pair__who::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-0.4em - 0.35em); border-top: 1px dashed var(--color-faint); }   /* 絵と札の間の点線（修正後イメージ） */
.req__flow { word-break: normal; }   /* 仕事内容は折れ目を指定せず横幅に任せる（先方修正 10-30③） */
.pair__txt { font-size: max(var(--fs-min), 0.9em); line-height: 1.65; }
@media (max-height: 800px) { .pair__box { padding: 0.6em 0.7em 0.7em; } .pair__txt { line-height: 1.5; } .p7 .ln--em { font-size: 1.1em; } .page.p7 { --lh-body: 1.55; } .p7 .ttl--r { font-size: 1.35em; } }   /* 低い画面は枠と強調を詰めてイラストを残す（責任者「文字を小さくしてでもイラスト」） */

/* ---------- 会社概要・募集要項・エントリー ---------- */
.co__logo { width: min(100%, 15em); height: auto; }
.bigen--co { margin-block: 0; }
.bigen--co .bigen__word { max-height: none; }
.co__town { display: block; width: 100%; height: auto; }
@media (max-height: 600px) { .co__town { display: none; } }
.field__opt { padding: 0.1em 0.5em; font-size: var(--fs-min); line-height: 1.4; font-weight: 500; color: var(--color-ink); border: 1px solid var(--color-faint); border-radius: var(--radius-s); }

/* ---------- 全ページの背景の飾り（FV と同じ線・＋・×・丸。ページごとに形を変える。責任者指示「全体的に背景に装飾」）。中身の高さを使わない重ね置き ---------- */
.deco { position: absolute; inset: var(--header-h) 0 0; z-index: 1; pointer-events: none; }
.dk { position: absolute; width: auto; fill: none; stroke: var(--color-ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.dk .pf-line-draw { --pf-dur: 1300ms; --pf-delay: 250ms; }
.dk--c { top: 0; right: 0; height: min(100px, 13dvh); aspect-ratio: 130 / 100; }

/* ---------- PC の左右の帯：参考 FV の「迷路のような細い道と＋・×」を自作の線で（ロゴ・ボタンの上下に置き、重ねない） ---------- */
.rail__maze { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; pointer-events: none; }
.rail__maze .pf-line-draw { --pf-dur: 1600ms; --pf-delay: 200ms; }
.rail__maze .rail__mark { stroke: var(--color-accent); stroke-width: 1.4; --pf-dur: 500ms; --pf-delay: 1500ms; }
.rail-logo, .rail-side { position: relative; z-index: 1; }

/* ---------- 動きのプリセット（animations/<name>/web/preset.css から取り込み。色は tokens の変数に） ---------- */
/* line-draw */
.pf-line-draw { --pf-dur: 800ms; --pf-delay: 0ms; --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; } }
/* chara-idle（sway） */
.pf-chara-idle { --pf-delay: 0ms; transform-origin: 50% 100%; }
.pf-chara-idle--sway { --pf-dur: 3600ms; --pf-angle: 2.5deg; }
.pf-chara-idle--sway.is-on { animation: pf-chara-idle-sway var(--pf-dur) ease-in-out var(--pf-delay) infinite alternate; }
@keyframes pf-chara-idle-sway { from { rotate: calc(var(--pf-angle) * -1); } to { rotate: var(--pf-angle); } }

/* slide-left・slide-right（札と箇条） */
.pf-slide-left, .pf-slide-right { --pf-dur: 600ms; --pf-dist: 48px; --pf-delay: 0ms; --pf-ease: cubic-bezier(0.22, 1, 0.36, 1); opacity: 0; transform: translateX(calc(var(--pf-dist) * var(--pf-dir, -1))); }
.pf-slide-right { --pf-dir: 1; }
.pf-slide-left.is-on, .pf-slide-right.is-on { opacity: 1; transform: none; transition: opacity var(--pf-dur) ease var(--pf-delay), transform var(--pf-dur) var(--pf-ease) var(--pf-delay); }
/* ripple（p4 の点） */
.pf-ripple { --pf-dur: 2.4s; --pf-delay: 600ms; --pf-spread: 1.25; --pf-ring: var(--color-accent); --pf-ring-2: var(--color-accent); --pf-width: 2px; }
.pf-ripple::before, .pf-ripple::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--pf-width) solid var(--pf-ring); opacity: 0; pointer-events: none; }
.pf-ripple::after { border-color: var(--pf-ring-2); }
.pf-ripple.is-on::before { animation: pf-ripple var(--pf-dur) ease-out var(--pf-delay) infinite; }
.pf-ripple.is-on::after { animation: pf-ripple var(--pf-dur) ease-out calc(var(--pf-delay) + var(--pf-dur) / 2) infinite; }
@keyframes pf-ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(var(--pf-spread)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .loader__ch { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .pf-slide-left, .pf-slide-right, .pf-slide-left.is-on, .pf-slide-right.is-on { opacity: 1; transform: none; transition: none; }
  .pf-ripple.is-on::before, .pf-ripple.is-on::after { animation: none; opacity: 0; }
  .p4.is-active .ba:not(.is-dragged) { animation: none; }
  .pf-line-draw, .pf-line-draw.is-on { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .deco .pf-line-draw.is-on, .rail__maze .pf-line-draw.is-on { animation: none; }
  .fv__plan .fvp-w { stroke-dasharray: none; animation: none; }
  .fvp-l, .fvp-m, .fvp-door { opacity: 1; transition: none; }
  .fv .bubble.rv, .fv .ttl .ln + .ln.rv { transform: none; }
  .fv__title path { transform: none; }
  .ttl--r::after, .ln--em::after, .cbox__ttl::after, .fv .txt > .body:first-child::after { scale: 1 1; }
  .pf-chara-idle, .pf-chara-idle.is-on { animation: none; rotate: none; }
  .boards-band__piece { opacity: 1; transform: none; }
}