/* ============================================================
   見本ページ共通の「魅せる」部品（2026-11-06・生産設備の見本から共通化）—『軌跡』魅せる版（nihonseiki-portal/kiseki/show.css）の型を、本体の色と書体のまま。
   動きは3つだけ：写真＝左から開く（バーン・.55秒）／文字＝下から上がる（.5秒）／数字＝桁が転がる。
   固定する舞台（.show-pin）は、JS が動きを許した時（html.show-live）だけ。既定（JSなし・?qa=1・動きを減らす設定・高さ540px未満）は
   段を縦に並べて全部見せる（.flat と同じ見え方）。ゆっくり寄る（Ken Burns）はしない。
   🔴 固定の舞台の親に overflow-x:clip を付けない（iPhone の Safari で上下に跳ねる・2026-11-05 実測）。
============================================================ */
body.show { --cg: clamp(32px, 4vw, 72px); --nfs: clamp(120px, 13.5vw, 208px); --mh: calc(var(--nfs) * .9 + 36px); --top: clamp(24px, 9vh, 112px); --stage-top: 68px; }
@media (max-width: 760px) { body.show { --stage-top: 60px; } }

/* ---------- ① 入口 ---------- */
.show-hero { position: relative; min-height: calc(100vh - var(--stage-top)); min-height: calc(100svh - var(--stage-top)); display: flex; align-items: flex-end; overflow: hidden; background: var(--g1); isolation: isolate; }
.show-hero-ph { position: absolute; inset: 0; margin: 0; z-index: -1; }
.show-hero-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.show-hero-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,26,32,.9) 0%, rgba(22,26,32,.82) 20%, rgba(22,26,32,.42) 44%, rgba(22,26,32,.58) 60%, rgba(22,26,32,.95) 84%, var(--g1) 100%); }
/* 2026-11-06 あきと「ここは見やすく」＝パンくずと見出しが写真の配管に重なって読めなかった。上の帯を暗く・字を明るく・影を付ける */
.show-hero .crumb, .show-hero .crumb a { color: var(--ink-2); text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.6); }
.show-hero .crumb [aria-current] { color: var(--ink); }
.show-head .h2 { text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.55); }
.show-claim, .show-note { text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.show-hero-in { position: relative; width: 100%; padding-top: 128px; padding-bottom: clamp(56px, 11vh, 128px); }
.show-hero .crumb { margin: 0 0 8px; }
.show-head { margin: 0 0 clamp(20px, 3vh, 32px); }
.show-head .h2 { font-size: 20px; line-height: 1.4; letter-spacing: .12em; color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 14px; }
.show-head .h2::before { content: ""; width: 40px; height: 3px; background: var(--red); flex: none; }
.show-claim { margin: 0; color: var(--ink); font-weight: 700; font-feature-settings: "palt"; }
.show-l { display: block; overflow: hidden; padding-bottom: .06em; }
.show-l > span { display: inline-block; }
.show-l1 { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.4; }
.show-l2 { font-size: clamp(26px, 3.2vw, 46px); line-height: 1; margin-top: .1em; }
.show-hero { --hn: clamp(116px, 18vw, 264px); }
/* 大きな数字の桁は高さ1emの箱（転がすため overflow:hidden）＝箱の下端が並びの基準になる。字の基線は下端から約 .125em 上なので、両脇の語をそこまで上げる */
.show-l2 > span { display: inline-flex; flex-wrap: wrap; align-items: flex-end; column-gap: .14em; }
.show-l2 .w { display: block; line-height: 1; margin-bottom: calc(var(--hn) * .125 - .02em); }
.show-n { display: block; font-family: var(--ff-en); font-weight: 700; font-size: var(--hn); line-height: .9; letter-spacing: -.005em; font-variant-numeric: tabular-nums; color: var(--ink); }
.show-l3 { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.3; margin-top: .14em; }
.show-note { margin: clamp(20px, 3vh, 32px) 0 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); overflow: hidden; }
.show-note > span { display: inline-block; padding-top: 14px; border-top: 1px solid var(--line-strong); }

/* 入口の動き：写真が左から開き、文字が1行ずつ上がる。数字は motion6 の転がる桁（.m6-odo）を使う */
/* 隠すのは頭の小さなスクリプトが .js を付けた時から（後から隠すとチラつく）。JS が動きを止めた時は .in をすぐ付ける */
html.js:not(.qa):not(.still) .show-hero:not(.in) .show-hero-ph img { clip-path: inset(0 100% 0 0); }
html.js:not(.qa):not(.still) .show-hero:not(.in) .show-l > span, html.js:not(.qa):not(.still) .show-hero:not(.in) .show-note > span, html.js:not(.qa):not(.still) .show-hero:not(.in) .show-head .h2 { transform: translateY(105%); opacity: 0; }
.show-hero.in .show-hero-ph img { transition: clip-path .6s var(--m6-out, cubic-bezier(.16,1,.3,1)); }
.show-hero.in .show-l > span, .show-hero.in .show-note > span, .show-hero.in .show-head .h2 { transition: transform .5s var(--m6-out, ease-out), opacity .3s linear; }
.show-hero.in .show-head .h2 { transition-delay: .25s; }
.show-hero.in .show-l1 > span { transition-delay: .35s; }
.show-hero.in .show-l2 > span { transition-delay: .45s; }
.show-hero.in .show-l3 > span { transition-delay: .55s; }
.show-hero.in .show-note > span { transition-delay: .75s; }

/* ---------- ② 本社の台数（段） ---------- */
.show-sec { position: relative; background: var(--g1); padding-top: clamp(72px, 10vw, 128px); }
.show-h2 { margin: 0 0 20px; font-size: clamp(28px, 3vw, 44px); line-height: 1.3; color: var(--ink); font-feature-settings: "palt"; }
.show-lead { margin: 0 0 clamp(40px, 6vw, 72px); }
.show-pin { position: relative; }
.show-pin .stage { position: relative; }
.beats { list-style: none; margin: 0; padding: 0; }
.show-rail { list-style: none; margin: 0; padding: 0; }

/* 既定（固定しない）：段を縦に並べる */
.show-meter { display: none; }
.beat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--cg); align-items: center; padding: 0 0 clamp(48px, 7vw, 88px); }
.beat .btx { grid-column: 1; }
.beat .bph { grid-column: 2; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--g2); border: 1px solid var(--line); }
.beat .bph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.show-kind { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; font-weight: 700; color: var(--ink); font-feature-settings: "palt"; }
.show-mk { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--note); }
.show-sub { margin: 18px 0 0; font-size: 18px; line-height: 1.2; color: var(--ink-2); font-weight: 700; }
.show-sub b { font-family: var(--ff-en); font-size: 1.9em; color: var(--ink); margin: 0 .08em 0 .16em; font-variant-numeric: tabular-nums; }
.show-sub b:first-child { margin-left: 0; }
.show-sum .show-sub b:last-of-type { color: var(--red); }
/* ---------- 文字の札（写真の無い段）2026-11-06 あきと「安っぽい」→ 作り替え ----------
   共通＝方眼の地（24px の細目・120px の太目）。真ん中に大きな文字を置くだけの札をやめ、
   生産設備＝図面の紙（四隅のトンボ・一点鎖線の中心線・右下の表題欄）／コスト低減＝コストの棒（提案前 100 → 提案後 100−CD・削れた分に斜線）。
   動き（固定した舞台で段が開いた時だけ）：トンボ→中心線→文字→表題欄の順に出る／提案後の棒が 100 から縮み、削れた分と −CD% が出る。
   ?qa=1・動きを止める設定・背の低い画面（.flat）は最初から最終の姿。 */
.beat .bph.show-plate { position: relative; display: grid; background-color: var(--g2);
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px; }
.show-plate p { margin: 0; }
.show-plate .pl-name small { display: block; font-size: 14px; line-height: 1.4; letter-spacing: .08em; color: var(--note); }
.show-plate .pl-name b { display: block; font-family: var(--ff-en); font-weight: 700; line-height: 1.1; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 図面の紙（生産設備） */
.pl-dwg { place-items: center; padding: clamp(20px, 3vw, 40px); }
.pl-crop { position: absolute; inset: 0; pointer-events: none; }
.pl-crop i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--g6); }
.pl-crop i:nth-child(1) { left: 14px; top: 14px; border-left-width: 1px; border-top-width: 1px; }
.pl-crop i:nth-child(2) { right: 14px; top: 14px; border-right-width: 1px; border-top-width: 1px; }
.pl-crop i:nth-child(3) { left: 14px; bottom: 14px; border-left-width: 1px; border-bottom-width: 1px; }
.pl-crop i:nth-child(4) { right: 14px; bottom: 14px; border-right-width: 1px; border-bottom-width: 1px; }
.pl-cl { position: absolute; left: 7%; right: 7%; top: 58%; height: 1px; background: repeating-linear-gradient(90deg, var(--g5) 0 26px, transparent 26px 32px, var(--g5) 32px 35px, transparent 35px 41px); }   /* 一点鎖線＝旋削品の図面の中心線 */
.pl-dwg .pl-name { position: relative; z-index: 1; margin-top: -9%; text-align: center; }   /* 中心線の少し上に（線は名前の下を通る） */
.pl-dwg .pl-name b { margin-top: 6px; font-size: clamp(34px, 4.2vw, 64px); letter-spacing: .02em; }
.pl-dwg .pl-mk { font-family: var(--ff-jp); font-size: .46em; font-weight: 700; letter-spacing: .08em; color: var(--ink-2); vertical-align: .32em; }
.pl-tb { position: absolute; right: 40px; bottom: 40px; margin: 0; border: 1px solid var(--g5); border-left: 2px solid var(--red); background: var(--g2); font-size: 12px; line-height: 1.4; }
.pl-tb { display: grid; grid-template-columns: max-content auto; }
.pl-tb > div { display: contents; }
.pl-tb > div + div > * { border-top: 1px solid var(--g5); }
.pl-tb dt { padding: 6px 10px; border-right: 1px solid var(--g5); color: var(--note); white-space: nowrap; }
.pl-tb dd { margin: 0; padding: 6px 12px; color: var(--ink-2); white-space: nowrap; }

/* コストの棒（コスト低減） */
.pl-cd { grid-template-rows: auto 1fr; padding: clamp(20px, 3vw, 40px); }
.pl-cd .pl-name { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; }
.pl-cd .pl-name b { font-size: clamp(30px, 3.2vw, 48px); letter-spacing: .02em; }
.pl-bars { align-self: end; display: grid; row-gap: 34px; }
.pl-row { display: grid; grid-template-columns: 4em minmax(0, 1fr) 2.6em; align-items: center; column-gap: 14px; }
.pl-l { font-size: 13px; line-height: 1.3; color: var(--note); white-space: nowrap; }
.pl-v { font-family: var(--ff-en); font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; line-height: 1; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pl-b0 .pl-v { color: var(--ink-2); }
.pl-bar { position: relative; height: clamp(22px, 2.4vw, 34px); }
.pl-bar i { position: absolute; inset: 0; background: var(--g5); transform-origin: 0 50%; }
.pl-b1 .pl-bar i { background: var(--ink-2); transform: scaleX(calc(var(--af) / 100)); }
.pl-b1 .pl-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--af) * 1%); right: 0; border: 1px dashed #ff6a6f; border-left: 0;
  background: repeating-linear-gradient(135deg, rgba(255,106,111,.32) 0 2px, transparent 2px 8px); }   /* 削れた分 */
.pl-bar em { position: absolute; bottom: 100%; left: calc(var(--af) * 1%); right: 0; margin-bottom: 6px; font-style: normal; text-align: center; white-space: nowrap;
  font-family: var(--ff-en); font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; line-height: 1; color: #ff6a6f; }
.pl-bar em b { font-size: 1.25em; }

/* 動き（段が開いた時） */
html.show-live .steps:not(.flat) .beat .pl-crop i { opacity: 0; transform: scale(.4); transition: none; }
html.show-live .steps:not(.flat) .beat .pl-cl { transform: scaleX(0); transition: none; }
html.show-live .steps:not(.flat) .beat .pl-dwg .pl-name { clip-path: inset(0 100% 0 0); transition: none; }
html.show-live .steps:not(.flat) .beat .pl-tb { opacity: 0; transform: translateY(8px); transition: none; }
html.show-live .steps:not(.flat) .beat.on .pl-crop i { opacity: 1; transform: none; transition: opacity .35s linear .2s, transform .5s var(--m6-out, ease-out) .2s; }
html.show-live .steps:not(.flat) .beat.on .pl-cl { transform: none; transition: transform .8s var(--m6-out, ease-out) .3s; }
html.show-live .steps:not(.flat) .beat.on .pl-dwg .pl-name { clip-path: inset(0 0 0 0); transition: clip-path .6s var(--m6-out, ease-out) .45s; }
html.show-live .steps:not(.flat) .beat.on .pl-tb { opacity: 1; transform: none; transition: opacity .4s linear .8s, transform .4s var(--m6-out, ease-out) .8s; }
html.show-live .steps:not(.flat) .beat .pl-b1 .pl-bar i { transform: scaleX(1); transition: none; }
html.show-live .steps:not(.flat) .beat .pl-b1 .pl-bar::after, html.show-live .steps:not(.flat) .beat .pl-bar em, html.show-live .steps:not(.flat) .beat .pl-b1 .pl-v { opacity: 0; transition: none; }
html.show-live .steps:not(.flat) .beat .pl-bar em { transform: translateY(6px); }
html.show-live .steps:not(.flat) .beat.on .pl-b1 .pl-bar i { transform: scaleX(calc(var(--af) / 100)); transition: transform 1s var(--m6-out, ease-out) .45s; }
html.show-live .steps:not(.flat) .beat.on .pl-b1 .pl-bar::after { opacity: 1; transition: opacity .35s linear 1.05s; }
html.show-live .steps:not(.flat) .beat.on .pl-bar em { opacity: 1; transform: none; transition: opacity .35s linear 1.2s, transform .4s var(--m6-out, ease-out) 1.2s; }
html.show-live .steps:not(.flat) .beat.on .pl-b1 .pl-v { opacity: 1; transition: opacity .3s linear 1.1s; }
@media (max-width: 760px) {
  .pl-dwg .pl-name { margin-top: 0; }
  .pl-dwg .pl-name small { font-size: 13px; }
  .pl-dwg .pl-name b { font-size: clamp(30px, 9vw, 40px); }
  .pl-dwg { place-items: start center; padding-top: 30px; }
  .pl-cl { top: 50%; }
  .pl-tb { right: 14px; bottom: 14px; left: 14px; }
  .pl-tb dd { white-space: normal; }
  .pl-cd .pl-name small { font-size: 13px; }
  .pl-bars { row-gap: 28px; }
  .pl-row { grid-template-columns: 3.6em minmax(0, 1fr) 2.2em; column-gap: 10px; }
  .pl-l { font-size: 12px; }
}

/* 固定する時（JS が動きを許した時だけ） */
html.show-live .show-pin:not(.flat) { height: calc(var(--len) * 1vh); height: calc(var(--len) * 1svh); }
html.show-live .show-pin:not(.flat) > .stage { position: sticky; top: var(--stage-top); height: calc(100vh - var(--stage-top)); height: calc(100svh - var(--stage-top)); overflow: hidden; }
html.show-live .steps:not(.flat) .show-stage { display: grid; height: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: var(--top) var(--mh) minmax(0, 1fr); column-gap: var(--cg); }
html.show-live .steps:not(.flat) .show-meter { display: block; grid-column: 1; grid-row: 2; z-index: 2; }
html.show-live .steps:not(.flat) .beats { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; min-height: 0; }
html.show-live .steps:not(.flat) .beat { grid-area: 1 / 1; padding: 0; grid-template-rows: var(--top) var(--mh) auto minmax(0, 1fr); visibility: hidden; opacity: 0; transition: opacity .3s linear, visibility 0s .3s; }
html.show-live .steps:not(.flat) .beat.on { visibility: visible; opacity: 1; transition: opacity 0s, visibility 0s; }
html.show-live .steps:not(.flat) .beat .btx { grid-row: 3; padding-top: 8px; }
html.show-live .steps:not(.flat) .beat .bph { grid-row: 1 / -1; align-self: center; aspect-ratio: auto; height: min(74%, 640px); clip-path: inset(0 100% 0 0); }
html.show-live .steps:not(.flat) .beat.on .bph { clip-path: inset(0 0 0 0); transition: clip-path .55s var(--m6-out, cubic-bezier(.16,1,.3,1)); }
html.show-live .steps:not(.flat) .beat .btx > * { opacity: 0; transform: translateY(16px); }
html.show-live .steps:not(.flat) .beat.on .btx > * { opacity: 1; transform: none; transition: opacity .5s var(--m6-out, ease-out) .12s, transform .5s var(--m6-out, ease-out) .12s; }
html.show-live .steps:not(.flat) .beat.on .btx > :nth-child(2) { transition-delay: .2s; }
html.show-live .steps:not(.flat) .beat.on .btx > :nth-child(3) { transition-delay: .28s; }
html.show-live .steps:not(.flat) .show-sub b { font-size: 1.4em; }

/* 大きな数字（段に合わせて桁が転がる）と、4つの目盛り */
.show-cnt { margin: 0; display: flex; align-items: baseline; gap: .1em; color: var(--ink); }
.show-roll { display: inline-flex; font-family: var(--ff-en); font-weight: 700; font-size: var(--nfs); line-height: .9; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.show-cnt small { font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; color: var(--ink-2); }
.show-roll .dg { display: inline-block; position: relative; overflow: hidden; height: .9em; line-height: .9; }
.show-roll .dg i { display: block; font-style: normal; height: .9em; line-height: .9; }
.show-roll .dg i.in { animation: showDgIn .5s var(--m6-out, cubic-bezier(.16,1,.3,1)) both; }
.show-roll .dg i.out { position: absolute; left: 0; top: 0; animation: showDgOut .5s var(--m6-out, cubic-bezier(.16,1,.3,1)) both; }
.show-roll.down .dg i.in { animation-name: showDgInD; } .show-roll.down .dg i.out { animation-name: showDgOutD; }
@keyframes showDgIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes showDgOut { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes showDgInD { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes showDgOutD { from { transform: none; } to { transform: translateY(100%); } }
.show-rail { display: flex; gap: 8px; margin-top: 18px; }
.show-rail li { width: 36px; height: 3px; background: var(--g4); transition: background-color .3s linear, width .3s var(--m6-out, ease-out); }
.show-rail li.done { background: var(--g6); }
.show-rail li.cur { background: var(--red); width: 56px; }

/* ---------- ③ 現場の考え方（1行ずつ） ---------- */
.show-lines-sec { position: relative; background: var(--g1); border-top: 1px solid var(--line); }
.show-lines-sec .stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: var(--cg); padding: clamp(72px, 10vw, 128px) var(--pad); max-width: calc(var(--w) + 2 * var(--pad)); margin: 0 auto; box-sizing: border-box; }
.show-lines-sec .stage > .wrap { padding: 0; max-width: none; margin: 0; grid-column: 1; grid-row: 1; }
.show-lines-ph { grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); }
.show-lines-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.show-lines-tx { margin: 0; font-size: clamp(24px, 2.7vw, 40px); line-height: 1.55; font-weight: 700; color: var(--ink); font-feature-settings: "palt"; }
.show-lines-tx .ln { display: block; }
.show-lines-tx .u { display: inline-block; }
.show-lines-tx .ln.end { margin-top: .5em; padding-top: .5em; border-top: 3px solid var(--red); width: fit-content; }
html.show-live .lines:not(.flat) .stage { padding-top: 0; padding-bottom: 0; }
html.show-live .lines:not(.flat) .show-lines-ph { clip-path: inset(0 100% 0 0); }
html.show-live .lines:not(.flat).ph-on .show-lines-ph { clip-path: inset(0 0 0 0); transition: clip-path .55s var(--m6-out, cubic-bezier(.16,1,.3,1)); }
html.show-live .lines:not(.flat) .ln { opacity: .14; transform: translateY(10px); transition: opacity .45s var(--m6-out, ease-out), transform .45s var(--m6-out, ease-out); }
html.show-live .lines:not(.flat) .ln.on { opacity: 1; transform: none; }
html.show-live .lines:not(.flat) .ln.end { border-top-color: transparent; transition: opacity .45s var(--m6-out, ease-out), transform .45s var(--m6-out, ease-out), border-color .3s linear .2s; }
html.show-live .lines:not(.flat) .ln.end.on { border-top-color: var(--red); }

/* ---------- ⑤ 一覧 ---------- */
.show-list { background: var(--g1); }

/* ---------- スマホ・幅の狭い画面 ---------- */
@media (max-width: 899px) {
  body.show { --nfs: clamp(88px, 24vw, 132px); --top: 12px; --mh: calc(var(--nfs) * .9 + 30px); }
  .beat { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .beat .btx { grid-column: 1; grid-row: 1; }
  .beat .bph { grid-column: 1; grid-row: 2; }
  html.show-live .steps:not(.flat) .show-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top) var(--mh) minmax(0, 1fr); }
  html.show-live .steps:not(.flat) .beat { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top) var(--mh) auto minmax(0, 1fr); row-gap: 0; }
  html.show-live .steps:not(.flat) .beat .btx { grid-column: 1; grid-row: 3; padding: 4px 0 14px; }
  html.show-live .steps:not(.flat) .beat .bph { grid-column: 1; grid-row: 4; align-self: stretch; height: auto; margin-bottom: 16px; }
  html.show-live .steps:not(.flat) .show-mk { font-size: 13px; margin-top: 2px; }
  html.show-live .steps:not(.flat) .show-sub { margin-top: 8px; font-size: 16px; }
  .show-kind { font-size: 20px; }
  .show-lines-sec .stage { grid-template-columns: minmax(0, 1fr); row-gap: 28px; align-content: center; }
  .show-lines-ph { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; }
  .show-lines-sec .stage > .wrap { grid-row: 2; }
  .show-lines-tx { font-size: clamp(21px, 5.6vw, 26px); }
}
@media (max-width: 760px) {
  .show-hero-in { padding-bottom: calc(56px + 28px); }
  /* 止めた舞台も、下の電話の帯（56px＋端末の下の余白）の上で終える */
  html.show-live .show-pin:not(.flat) > .stage { height: calc(100vh - var(--stage-top) - 56px - env(safe-area-inset-bottom)); height: calc(100svh - var(--stage-top) - 56px - env(safe-area-inset-bottom)); }
}   /* スマホは画面の下に電話の帯（56px）がある */
@media (max-width: 560px) {
  .show-hero-in { padding-top: 72px; }
  .show-head .h2 { font-size: 15px; gap: 10px; }
  .show-head .h2::before { width: 28px; }
  .show-hero { --hn: clamp(96px, 30vw, 132px); }
  .show-note { font-size: 14px; }
}

/* ---------- 2026-11-06 統括：9ページを見て共通にした直し ---------- */
/* 語の塊ごとに折る（1〜2字だけの行を作らない）・単位は折らない */
.show-hero .u, .show-lines-tx .u, .show-kind .u, .show-mk .u, .show-note .u { display: inline-block; }
.show-cnt small { white-space: nowrap; }
/* 写真の無い段の文字の札：面が広すぎて寂しく・スマホでは縦に伸びて重かった → 高さを抑える */
html.show-live .steps:not(.flat) .beat .bph.show-plate { height: min(56%, 480px); }
@media (max-width: 899px) {
  html.show-live .steps:not(.flat) .beat .bph.show-plate { align-self: start; height: auto; aspect-ratio: 16 / 10; max-height: 100%; }
}

/* ---------- 2026-11-06 背の低いスマホ（iPhone SE など・高さ700px以下）：入口の文字が下の電話の帯に隠れる／止めた舞台の中身がはみ出すのを防ぐ ---------- */
@media (max-width: 760px) and (max-height: 700px) {
  body.show { --nfs: clamp(76px, 21vw, 96px); --mh: calc(var(--nfs) * .9 + 26px); }
  .show-hero { --hn: clamp(84px, 24vw, 104px); }
  .show-hero-in { padding-top: 52px; padding-bottom: calc(56px + 16px); }
  .show-hero .crumb { margin-bottom: 0; }
  .show-head { margin-bottom: 10px; }
  .show-l1 { font-size: 19px; }
  .show-l2, .show-l3 { font-size: 23px; }
  .show-note { margin-top: 14px; font-size: 14px; line-height: 1.6; }
  .show-lines-ph { aspect-ratio: 21 / 9; }
  .show-lines-tx { font-size: 19px; line-height: 1.5; }
  .show-lines-sec .stage { row-gap: 18px; }
}

/* 2026-11-06 スマホ：入口のページの題が2行になる時（例 海外拠点（タイ／インドネシア／マレーシア））、赤い線を1行目にそろえ、字の間隔を詰める */
@media (max-width: 760px) {
  .show-head .h2 { align-items: flex-start; letter-spacing: .05em; }
  .show-head .h2::before { margin-top: calc(.7em - 1.5px); }
}

/* ============================================================
   拠点を順に巡る地図（.show-pin.route・src/route.js）— 2026-11-06
   『軌跡』の「諏訪から海を渡る」を黒い地に：陸地は薄い灰色、通った線は灰色、いま飛んでいる線と光の点と着いた時の波紋だけ赤。
   札（写真＋年＋社名＋所在地）は PC は右、スマホは下。動きは 写真＝左から開く／文字＝下から上がる／線＝伸びる だけ。
============================================================ */
.gl-route-sec { background: var(--g1); border-top: 1px solid var(--line); }
.route .stage { background: var(--g1); }
.rt-map { position: absolute; inset: 0; }
.rt-svg { display: block; width: 100%; height: 100%; }
.rt-land path { fill: rgba(230, 234, 240, .10); stroke: rgba(230, 234, 240, .22); stroke-width: .7; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rt-line { fill: none; stroke: rgba(195, 202, 211, .5); stroke-width: var(--sw, 1px); stroke-linecap: round; transition: stroke .3s linear; }
.rt-line.now { stroke: var(--red); }
.rt-plane { fill: #ff6a6f; opacity: 0; transition: opacity .2s linear; }
.rt-plane.on { opacity: 1; }
.rt-site { opacity: 0; transition: opacity .3s linear; }
.rt-site.on { opacity: 1; }
.rt-dot { fill: var(--ink); }
.rt-site[data-s="suwa"] .rt-dot { fill: var(--red); }
.rt-ring { fill: none; stroke: var(--red); stroke-width: var(--sw, 1px); opacity: 0; transform-box: fill-box; transform-origin: center; }
.rt-site.hit .rt-ring { animation: rtRing 1.3s cubic-bezier(.16, 1, .3, 1) 1; }
@keyframes rtRing { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(6); } }
.rt-lbl { font-family: var(--ff-jp); font-weight: 700; font-size: var(--fs, 8px); fill: var(--ink); paint-order: stroke; stroke: var(--g1); stroke-width: var(--halo, 1px); stroke-linejoin: round; }
.rt-head { position: relative; z-index: 2; padding-top: clamp(20px, 4vh, 40px); pointer-events: none; }
.rt-k { margin: 0; display: inline-flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 700; letter-spacing: .12em; color: var(--ink); text-shadow: 0 0 10px var(--g1), 0 0 3px var(--g1); }
.rt-k::before { content: ""; width: 40px; height: 3px; background: var(--red); flex: none; }
.rt-cards { list-style: none; margin: 0; padding: 0; }
.rt-card { background: rgba(22, 26, 32, .92); border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rt-card .rph { margin: 0; overflow: hidden; aspect-ratio: 43 / 20; background: var(--g2); }
.rt-card .rph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-card .rtx { padding: 18px 22px 22px; }
.rt-card .ry { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.rt-card .y { font-family: var(--ff-en); font-weight: 700; font-size: clamp(46px, 4.6vw, 64px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rt-card .rp { font-size: 15px; font-weight: 700; color: var(--red); letter-spacing: .04em; }
.rt-card .nm { margin: 12px 0 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.rt-card .pl { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--note); }
.rt-card .sum { margin: 0; font-size: 17px; line-height: 1.8; font-weight: 700; color: var(--ink); }
.rt-card .u { display: inline-block; }
.rt-note { position: relative; z-index: 2; margin: 0; padding-top: 12px; padding-bottom: 16px; font-size: 13px; color: var(--note); }

/* 止める時（JS が動きを許した時だけ） */
html.show-live .route:not(.flat) .rt-head { position: absolute; left: 0; right: 0; top: 0; }
html.show-live .route:not(.flat) .rt-note { position: absolute; left: 0; right: 0; bottom: 0; }
html.show-live .route:not(.flat) .rt-cards { position: absolute; z-index: 3; display: grid; }
html.show-live .route:not(.flat) .rt-card { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .3s linear, visibility 0s .3s; }
html.show-live .route:not(.flat) .rt-card.on { visibility: visible; opacity: 1; transition: opacity 0s, visibility 0s; }
html.show-live .route:not(.flat) .rt-card .rph img { clip-path: inset(0 100% 0 0); }
html.show-live .route:not(.flat) .rt-card.on .rph img { clip-path: inset(0 0 0 0); transition: clip-path .55s cubic-bezier(.16, 1, .3, 1) .05s; }
html.show-live .route:not(.flat) .rt-card .rtx > * { opacity: 0; transform: translateY(14px); }
html.show-live .route:not(.flat) .rt-card.on .rtx > * { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.16, 1, .3, 1) .15s, transform .5s cubic-bezier(.16, 1, .3, 1) .15s; }
html.show-live .route:not(.flat) .rt-card.on .rtx > :nth-child(2) { transition-delay: .22s; }
html.show-live .route:not(.flat) .rt-card.on .rtx > :nth-child(3) { transition-delay: .3s; }
@media (min-width: 900px) {
  html.show-live .route:not(.flat) .rt-cards { right: max(var(--pad), calc((100vw - var(--w)) / 2 + var(--pad))); top: 50%; transform: translateY(-50%); width: min(440px, 36vw); }
}
@media (max-width: 899px) {
  html.show-live .route:not(.flat) .rt-cards { left: 16px; right: 16px; bottom: 16px; }
  .rt-card .rph { aspect-ratio: 43 / 17; }
  .rt-card .rtx { padding: 14px 16px 16px; }
  .rt-card .y { font-size: 40px; }
  .rt-card .nm { margin-top: 8px; font-size: 16px; }
  .rt-card .pl { font-size: 13px; }
  .rt-card .sum { font-size: 15px; line-height: 1.7; }
  html.show-live .route:not(.flat) .rt-note { display: none; }   /* スマホは札が下にあるので、地図の出典は止めた舞台の外（下の地球儀の出典と同じ）に任せる */
}
@media (max-width: 760px) and (max-height: 700px) {
  .rt-card .rph { aspect-ratio: 43 / 14; }
  .rt-card .y { font-size: 34px; }
}
/* 止めない時（動きを減らす設定など）：引き終えた地図の下に札を並べる */
.route.flat .rt-map, html:not(.show-live) .route .rt-map { position: relative; height: min(70vw, 560px); }
.route.flat .rt-cards, html:not(.show-live) .route .rt-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 24px var(--pad) 8px; max-width: calc(var(--w) + 2 * var(--pad)); margin: 0 auto; box-sizing: border-box; }
/* 2026-11-06 統括の見直し：札は中身の高さ（写真の無い札の下に空白を残さない）・スマホは写真を左の小さな枠にして札を低く（地図を広く・元の幅430pxの写真を引き伸ばさない）・札が出たら左上の見出しを消す（地図の名前と重ならない） */
html.show-live .route:not(.flat) .rt-card { align-self: center; }
@media (max-width: 899px) {
  html.show-live .route:not(.flat) .rt-card { align-self: end; }
  .rt-card:not(.no-ph) { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .rt-card:not(.no-ph) .rph { aspect-ratio: auto; height: 100%; min-height: 118px; }
  .rt-card:not(.no-ph) .rtx { padding: 12px 14px 14px; }
  .rt-card:not(.no-ph) .y { font-size: 34px; }
  .rt-card .ry { gap: 2px 10px; }
  .rt-card .rp { font-size: 13px; }
  html.show-live .route:not(.flat) .rt-head { transition: opacity .3s linear; }
}
@media (max-width: 760px) and (max-height: 700px) { .rt-card:not(.no-ph) .rph { min-height: 100px; } }
@media (max-width: 899px) { .rt-card:not(.no-ph) .rph { height: 100%; max-height: 148px; } }   /* 元の幅430pxの工場写真を 1.6 倍より大きく引き伸ばさない */
html.show-live .route:not(.flat) .rt-head { transition: opacity .3s linear; }
html.show-live .route:not(.flat).started .rt-head { opacity: 0; pointer-events: none; }   /* 札が出たら左上の題を消す（地図の名前と重ならない・飛んでいる途中に戻らない） */
.rt-card .rp { color: #ff6a6f; }   /* 黒い地の上の赤い字は明るい赤（--red は明るさの差 3.41 で基準 4.5 に届かない・光の点と同じ色） */

/* 2026-11-06 拠点を順に巡る地図をページの一番上に置く時（海外拠点）：パンくずと題を場面の左上に・写真の上と同じ読みやすさ */
.gl-route-sec:first-child { border-top: 0; }
.rt-head .crumb { margin: 0 0 4px; pointer-events: auto; }
.rt-head .crumb, .rt-head .crumb a { color: var(--ink-2); text-shadow: 0 0 10px var(--g1), 0 0 3px var(--g1), 0 0 2px var(--g1); }
.rt-head .crumb [aria-current] { color: var(--ink); }
.rt-title { margin: 0; }
.rt-title .h2 { text-shadow: 0 0 12px var(--g1), 0 0 4px var(--g1), 0 0 2px var(--g1); }
@media (max-width: 760px) { .rt-head { padding-top: 8px; } .rt-title .h2 { font-size: 17px; } }
.gl-route-sec { padding-top: 0; }   /* 共通の .show-sec の上の余白はこの場面には要らない（ヘッダーと地図の間に暗い帯ができた） */

/* ---------- 2026-11-06 海外拠点の表紙（開いた最初の画面）：あきと「途中みたいで気持ち悪い」→ 大きな題・一文・4拠点が全部見える地図・下へ促す線 ----------
   route.js が表紙の間 .cover を付ける（最初の札の進み 12% 未満）。表紙を過ぎると .started で題が消え、地図は本社へ寄る。
   止めない時（.flat・動きを減らす設定）は、題と一文をいつもの大きさで地図の上に。 */
.rt-lead { margin: 14px 0 0; font-size: 16px; line-height: 1.8; font-weight: 700; color: var(--ink-2); text-shadow: 0 0 12px var(--g1), 0 0 4px var(--g1); }
.rt-lead .u { display: inline-block; }
.rt-cue { display: none; }
html.show-live .route:not(.flat) .rt-site { transition: opacity .45s linear; }
html.show-live .route:not(.flat).cover .rt-site:not([data-s="khonkaen"]) { opacity: .62; }
html.show-live .route:not(.flat).cover .rt-site.on { opacity: 1; }
html.show-live .route:not(.flat).cover .rt-site[data-s="suwa"] .rt-ring { animation: rtRing 2.4s cubic-bezier(.16, 1, .3, 1) infinite; }
html.show-live .route:not(.flat) .rt-title .h2 .t > .u:first-child { transition: font-size .3s; }
@media (min-width: 900px) {
  html.show-live .route:not(.flat) .rt-head { bottom: 0; display: flex; flex-direction: column; padding-top: clamp(20px, 4vh, 40px); padding-bottom: clamp(32px, 7vh, 72px); }
  html.show-live .route:not(.flat) .rt-head .crumb { margin-bottom: auto; }
  html.show-live .route:not(.flat) .rt-title { margin-top: auto; }
  html.show-live .route:not(.flat) .rt-title .h2 { display: block; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: .1em; }
  html.show-live .route:not(.flat) .rt-title .h2::before { display: block; width: 56px; margin-bottom: 22px; }
  html.show-live .route:not(.flat) .rt-title .h2 .t > .u:first-child { display: block; margin-bottom: 10px; font-size: clamp(56px, 6vw, 92px); line-height: 1.05; letter-spacing: .06em; }
  html.show-live .route:not(.flat) .rt-lead { margin-top: 22px; font-size: clamp(17px, 1.4vw, 21px); }
  html.show-live .route:not(.flat) .rt-lead .u { display: block; }
  html.show-live .route:not(.flat) .rt-cue { display: block; margin-top: clamp(28px, 6vh, 56px); }
}
html.show-live .route:not(.flat) .rt-cue i { display: block; width: 1px; height: 40px; background: rgba(255,255,255,.55); animation: cue 1.8s ease-in-out infinite; }
@media (max-width: 899px) {
  html.show-live .route:not(.flat) .rt-head { padding-top: 14px; }
  html.show-live .route:not(.flat) .rt-title .h2 { display: block; font-size: 15px; letter-spacing: .08em; }
  html.show-live .route:not(.flat) .rt-title .h2::before { display: block; width: 36px; margin-bottom: 14px; }
  html.show-live .route:not(.flat) .rt-title .h2 .t > .u:first-child { display: block; margin-bottom: 6px; font-size: clamp(40px, 12vw, 52px); line-height: 1.1; letter-spacing: .06em; }
  html.show-live .route:not(.flat) .rt-lead { margin-top: 10px; font-size: 14px; line-height: 1.7; }
  html.show-live .route:not(.flat) .rt-cue { display: block; position: absolute; right: var(--pad); top: calc(100vh - 60px - 56px - 64px); top: calc(100svh - 60px - 56px - 64px - env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .rt-cue i, html.show-live .route:not(.flat).cover .rt-site[data-s="suwa"] .rt-ring { animation: none; } }