diff --git a/.claude/launch.json b/.claude/launch.json
index 807d024..6f5ab5d 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -6,6 +6,12 @@
       "runtimeExecutable": "dotnet",
       "runtimeArgs": ["run", "--project", "src/MesApp.Api", "--urls", "http://localhost:5210"],
       "port": 5210
+    },
+    {
+      "name": "guide",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": ["-NoProfile", "-Command", "jekyll serve -s docs -d $env:TEMP\\mes-docs-site --port 4000"],
+      "port": 4000
     }
   ]
 }
diff --git a/docs-dev/FactoryTour.md b/docs-dev/FactoryTour.md
new file mode 100644
index 0000000..3cf2bd7
--- /dev/null
+++ b/docs-dev/FactoryTour.md
@@ -0,0 +1,358 @@
+# 工場模型で見る 製造から出荷まで 仕様書
+
+サンプルのギアポンプ製造を、**動く工場模型**と、それに連動する **MES の記録の変化**で見せるガイドの新ページを作る。
+1カード＝1セッションで進める（`Orchestration.md` §4.1）。カードの間はセッションをクリアし、次へ進む前に前のカードをコミットする。
+新しいセッションでは「`docs-dev/FactoryTour.md` の TOUR-01 を実行して」とだけ頼めば着手できるように書いてある。
+
+## 背景
+
+`docs/walkthrough.md` は図と画面写真で流れを説明しているが、次の理由で分かりにくい。
+
+- 図が箱と矢印の抽象図で、**工場のどこで起きているか**が見えない
+- 物の動きと記録の変化が別々の章にあり、読者が頭の中でつなぐ必要がある
+
+このページで伝えることは1つ。**「現場で物が動くと、誰がどの画面に入力し、MES のどの記録が変わるか」**。
+
+## 決定事項（2026-11-03）
+
+| 論点 | 決定 | 理由 |
+|:--|:--|:--|
+| 置き場所 | 新しい全幅ページ `docs/factory-tour.html`。`walkthrough.md` は画面写真つきの詳細編として残す | サイドバーがなく模型を大きく見せられる。操作の詳細は既存ページに任せられる |
+| 進め方 | 模型 → 5場面 → 15場面の順に作り、模型と5場面のそれぞれで利用者の確認を受ける | 演出を確かめる前に全場面のデータを作ると、手戻りが大きい |
+| 描画 | 等角投影の SVG を素の JavaScript で生成する。外部ライブラリ・ビルド・外部通信なし | 説明に回転は不要。軽く、日本語ラベルが鮮明で、GitHub Pages にそのまま置ける |
+| 場面の持ち方 | 描画処理と場面データを分ける | サンプルが変わってもデータの修正で済む |
+| 動きの進行 | 既定は「次へ」で1場面ずつ。「再生」を押すと自動で進む | 読む速さは人によって違う |
+| 反映の見せ方 | 信号は**人の端末から** MES へ飛ばす。設備から直接は飛ばさない | 設備からの自動収集は将来拡張（Spec.md 3章の製造実施・設備稼働報告）。実際にない連携に見せない |
+| 数値の正 | 在庫と作業指示の状態は `samples/actual-csv` の **01〜15 だけを取り込んだ時点**の値 | 16 以降の在庫操作（24 の払出戻し、30 の保管サンプルなど）まで含めると、物語の数字とずれる |
+| 01〜15 に入らないもの | 次の3つは実データとの照合の対象にしない。**差立（場面4）**と**完了承認（場面11）**は CSV に無く、画面で操作する場面と明記する。**設備の停止（場面5・10）**は `16_equipment-logs.csv` の記録で、台帳の数字に影響しない演出として扱う | 照合できないものを基準に含めると、受入基準が満たせなくなる |
+| 最終検査（PR-40）の担当 | **op001**。サンプルマスタで op001 に有効な SK-03 を足す（TOUR-03） | 実績入力は現場作業者・生産管理・管理者だけ（`MesRoleGroups.ShopFloorRecord`）なので qc001 は入力できず、op002 の SK-03 は期限切れで着手を拒否される。今のサンプルには担当できる人がいない |
+| 外注（PR-20）の担当 | **op001**（昼勤）が戻りを確認して実績を入力する | 工順に作業区・スキルの指定がなく、CSV にも作業者の列がない。夜勤の op003 は勤務を終えている |
+| 場面のURL | `#machining` のように場面の `id` を使う。画面に出す番号は `no` に持つ | 場面を足しても既存のリンクが壊れない |
+| 多言語 | 日本語のみ | ユーザーガイド全体が日本語のみで、`I18nCheck.ps1` の対象外 |
+
+`Spec.md` は変更しない（アプリの機能を変えない、説明用のページのため）。
+
+## 対象外
+
+- 本物の3D表示（カメラの回転・拡大）、動画の書き出し
+- アプリ本体（`src/`）への組み込み、実データとの接続
+- 保全・治工具・棚卸・不適合処置・リワーク（物語の外。`walkthrough.md` 10章に任せる）
+- `walkthrough.md` の図の削除や作り替え（導線の追加と、TOUR-03・TOUR-05 に書いた文言の修正だけを行う）
+
+## 画面仕様
+
+### レイアウト
+
+幅 1000px 以上：
+
+```
+┌ ガイドへ戻る ─────── ページ名 ──────────────┐
+│ ┌ 工場模型 ───────────┐ ┌ 場面 5／15 ────┐ │
+│ │                      │ │ タイトル・日時  │ │
+│ │  等角の工場          │ │ 現場で起きること│ │
+│ │  物・人・信号が動く  │ │ 誰がどの画面に  │ │
+│ │                      │ │ MESで変わること │ │
+│ └──────────────────────┘ │ 詳しく見る →    │ │
+│ [◀ 前へ][▶ 再生][次へ ▶] └─────────────────┘ │
+│ ○─○─○─●─○─○  場面の列（押すと移動）         │
+│ ┌ MES の台帳 ─ 在庫 ──────── 作業指示の状態 ┐ │
+│ └───────────────────────────────────────────┘ │
+└───────────────────────────────────────────────┘
+```
+
+幅 1000px 未満：模型 → 変化の帯 → 操作 → 説明 → 台帳の縦積み。横スクロールは出さない。
+
+**第4拍の変化は、模型と同時に見えること**（このページの主題）。
+
+- 幅 1000px 以上：1440×900 で模型と台帳が同時に収まるように、模型の高さを画面に合わせる。台帳は在庫と作業指示の2段組とし、収まらなければ欄の中でスクロールして、変わった行を見える位置へ送る
+- 幅 1000px 未満：模型の直下に**変化の帯**を置き、今の場面で変わった行だけを出す
+
+スマホ幅（375px）では全景だとラベルが読めないので、**カメラ（SVG の viewBox）を今の場面の範囲に寄せる**。範囲は `station`・`actors`・`moves` の置場をすべて含む矩形とし、全体を見せる場面だけ `camera: 'all'` を指定する。
+
+**模型のラベルは全幅で「部分」を既定とし、操作の「ラベル 部分／全部」で切り替える**（すべて出すと重なって読めないため）。部分では次だけを出す。全部ではすべて出す（重なりは許容する）。
+
+- 今の作業とその前後の持ち場（`station`・`actors`・`moves` の置場と `around`）のラベルと、そこに置かれた物の数量
+- 場面の担当者（`actors`）、動かす設備（`equipment`）、異常（`alerts`）、MES サーバー
+- 開始前は持ち場の名前だけ
+
+### 工場の配置
+
+U字の流れとする。下の配置図は並びの正とし、座標は `TOUR-01` で見た目を見ながら決める。
+
+```
+              事務所（pm001）  MES サーバー
+
+受入ヤード → WH-M01／WH-M02 → WC-MC1 ─────────→ 搬出口 → 外注先（工場の外）
+             部材倉庫        EQ-01・EQ-05                     │
+               │             WIP-01                           │
+               │ 部材                                         │
+               └──────────────────────┐                       ▼
+出荷ヤード ← WH-P01 ← WC-PK1 ← WC-QC1 ← WC-AS1 ←──────── WIP-02
+（SHIP-01）  製品倉庫  EQ-04    EQ-03    EQ-02
+```
+
+| 模型の要素 | 表し方 |
+|:--|:--|
+| 作業区・倉庫 | 床に区画を引き、コードとマスタの名前のラベルを付ける（`WC-MC1 マシニング加工`） |
+| 設備 | 箱を組み合わせた簡単な形。実績のあった設備だけ使う（加工は EQ-01。EQ-05 は置くだけ） |
+| 物 | 色分けした小さな立方体。部材・半製品・製品で形か色を変え、数量ラベルを付ける |
+| 人 | ロール色の簡単な人形と、ユーザーID。持ち場に立つ |
+| 端末 | 人の横に小さなタブレット。入力するときに光る |
+| MES サーバー | 事務所の横に置く、信号の行き先。カメラを寄せて画面の外に出るときは、画面の端に固定の目印を出して、そこへ信号を飛ばす |
+| トラック | 受入ヤード、搬出口、出荷ヤード |
+
+対象外の置場（WH-S01 保全部品棚）は模型に置かない。
+
+### 1場面の演出（4拍）
+
+1. **現場が動く**：物が持ち場へ移動し、設備が動く
+2. **人が入力する**：端末が光り、右の「誰がどの画面に」が強調される
+3. **信号が飛ぶ**：端末から MES サーバーへ点線が流れる
+4. **記録が変わる**：台帳（狭い画面では変化の帯）の数字が変わり、変わった行を約1秒強調する
+
+**実際に起きた異常**（`alerts`）では、持ち場を赤く光らせ、説明に赤の項目を足す。起きていないこと（判定が無ければ止まる、など）は赤くせず `note` に書く。
+
+### MES の台帳
+
+| 欄 | 内容 |
+|:--|:--|
+| 在庫 | 下の9ロットの置場と数量（単位つき）。まだ無いロットは薄く表示する |
+| 作業指示の状態 | `SMP-SF-001-10` など5件の状態。工程展開の前は薄く表示する |
+| 説明 | 「部材は作業指示への投入で減る」「在庫に入るのは最終工程の良品だけ」など、数字の見方を場面に応じて短く添える |
+
+スマホ幅では台帳の全行を畳み、「すべて表示」で開く（変わった行は変化の帯に出ている）。
+
+場面を飛ばしても表示が合うように、各場面は**差分**を持ち、1場面目から足し直して表示する。**台帳（`effects`）も模型の物（`moves`）も同じ畳み込みで作る**。
+
+### 操作
+
+| 操作 | 動き |
+|:--|:--|
+| 開いたとき | ハッシュなしなら**開始前**（全景。物はなく、説明欄に案内を出す）。「次へ」か「再生」で場面1の4拍から始まる。ハッシュつきならその場面の最終状態を表示する |
+| 次へ | 次の場面の4拍を再生する。4拍の途中で押すと今の場面を最終状態にしてから進む |
+| 前へ・場面の列 | 移動先の最終状態をアニメーションなしで表示する。自動再生中なら一時停止する。場面1では「前へ」を無効にする |
+| もう一度 | 今の場面の4拍を、その場面の直前の状態から再生する |
+| 再生／一時停止 | 4拍の後、説明を読む時間（約5秒）を置いて次へ進む。最後の場面で止まる。最後の場面で押すと場面1から再生し直す |
+| ラベル 部分／全部 | 模型のラベルの出し方を切り替える。再生と場面の位置には影響しない（再読込で部分に戻る） |
+| キーボード | ← → で前後、Space で再生・一時停止。**ボタン・リンクにフォーカスがあるときの Space はそのボタンの操作だけにする**。修飾キーつきは無視する |
+| URL | `#machining` で該当場面を開く。手で移動したときは履歴に積み（`pushState`）、自動再生中は積まない（`replaceState`）。ブラウザの戻る・進むと手で書き換えたハッシュには `hashchange` で追従し、未知のハッシュは開始前にする |
+
+### 見た目とアクセシビリティ
+
+- ロール色は `docs/assets/style.css` の `--r-pm` `--r-op` `--r-lg` `--r-qc` `--r-ng` をそのまま使う（ガイドの図と色を合わせる）。模型の本体は無彩色
+- ダークモードは `prefers-color-scheme` で追従する（ガイドと同じ。切替ボタンは置かない）
+- `prefers-reduced-motion: reduce` では動かさず、各場面の最終状態だけを表示する（「もう一度」も同じ）。自動再生の間隔はそのまま使える
+- 説明と台帳は SVG の外の HTML に置く。場面が変わったら `aria-live="polite"` で要約を読み上げる。SVG には `role="img"` と場面ごとの説明の `aria-label` を付ける
+- 色だけで伝えない（異常には「逸脱」などの語を添える）
+- JavaScript が無いときは `<noscript>` で `walkthrough.html` へ案内する
+
+## ファイル構成
+
+| ファイル | 内容 |
+|:--|:--|
+| `docs/factory-tour.html` | ページ本体。`intro.html` と同じく front matter なしの単独 HTML。`assets/style.css` を読み、ヘッダーはガイドの `.topbar` を流用する |
+| `docs/assets/tour/tour.css` | このページだけのレイアウトと演出 |
+| `docs/assets/tour/scenes.js` | 工場の配置、在庫の初期値、場面データ（処理を書かない） |
+| `docs/assets/tour/tour.js` | 等角描画、4拍の進行、台帳の再計算、操作 |
+
+`type="module"` は使わず、通常の `<script>` で読む。
+
+`.claude/launch.json` に確認用の構成 `guide`（ポート 4000）を足す。`powershell -NoProfile -Command "jekyll serve -s docs -d $env:TEMP\mes-docs-site --port 4000"` を起動する（`$env:TEMP` は launch.json では展開されないので PowerShell を通す）。`--livereload` は付けない（「外部へのリクエストなし」の確認を濁さないため）。
+
+### 場面データの形
+
+```js
+{
+  id: 'machining',            // 変えない。URL は #machining
+  no: 5,                      // 画面に出す番号。15場面での番号で固定
+  title: '夜勤で機械加工',
+  when: '9/1 21:00〜9/2 3:00（夜勤 N）',
+  station: 'WC-MC1',          // 強調の対象。カメラは station・actors・moves の範囲から決める
+  around: ['DOCK'],           // moves に出ない前後の工程の持ち場。部分表示でラベルを出す（カメラには含めない）
+  actors: [{ user: 'op003', role: 'op', at: 'WC-MC1' }],
+  // from なしは生成、to なしは消滅。as は到着後の品目（鋳造品→加工品のような変化を表す）
+  moves: [{ item: 'casting', qty: 20, from: 'WH-M01', to: 'WC-MC1', as: 'machined' }],
+  floor: '現場で起きること（1〜2文）',
+  input: [{ who: 'op003', menu: '生産・製造実行 → 作業指示 → 実績入力', record: '投入・良品数・製造条件' }],
+  effects: [{ lot: 'R3001-260901', delta: -20 }, { wo: 'SMP-SF-001-10', status: '完了' }],
+  alerts: [{ at: 'WC-MC1', text: '送り速度 1350 が許容範囲外（逸脱）' }],
+  note: '数字の見方の補足',
+  detail: { href: 'walkthrough.html#execution', image: null }
+}
+```
+
+- `detail.image` は説明欄の「詳しく見る」の下に小さな写真（`loading="lazy"`）で出し、押すと `detail.href` へ飛ぶ。**その場面と同じ記録を写した写真だけ**を指定する。無理に当てはめない（`record.webp` は組立の画面なので、機械加工には使わない）
+- **未実装の場面**は `{ id, no, title, stub: true, moves, effects }` だけを持つ。`scenes.js` には最初から15場面すべてを並べ、足し直しの対象にするが、場面の列と前後の移動では飛ばす
+
+## 場面
+
+### 台帳の初期値と最終値（01〜15 取込時点）
+
+| ロット | 品目 | 置場 | 受入後 | 最終 |
+|:--|:--|:--|--:|--:|
+| R3001-260901 | ハウジング鋳造品 | WH-M01 | 50 個 | 30 個 |
+| R3002-260901 | ギアセット | WH-M01 | 50 セット | 40 セット |
+| R3003-260901 | シャフト | WH-M01 | 50 本 | 40 本 |
+| R3004-260901 | Oリング | WH-M02 | 200 個 | 182 個 |
+| R3007-260901 | Oリング（耐油） | WH-M02 | 40 個 | 38 個 |
+| R3005-260901 | 六角ボルト M6x20 | WH-M02 | 500 本 | 460 本 |
+| R3006-260901 | 潤滑油 | WH-M02 | 20 L | 19.5 L |
+| SF2000-S001 | ハウジング加工品 | WIP-02 | ― | 9 個（19で入庫し、10を投入） |
+| FG1000-S001 | ギアポンプ組立品 | WH-P01 | ― | 4 個（9で入庫し、5を出荷） |
+
+台帳の単位はマスタのとおり（FG-1000 は「個」）。説明文の「台」は `walkthrough.md` に合わせた読み物の表記とする。
+
+物語に関係しない受入（保全部品、期限切れ・期限間近、追加入荷 R3001-260902）は台帳に出さない。
+
+### 第1段階の5場面（TOUR-02）
+
+場面の番号は15場面に広げた後のもの。
+
+| No | id | 場面 | 日時 | 現場 | 入力 | 台帳の変化 | 異常・見どころ |
+|:--|:--|:--|:--|:--|:--|:--|:--|
+| 1 | `receiving` | 部材が届く | ― | トラックが7種類の部材を届け、WH-M01・WH-M02 へ入れる | lg001／物流・在庫 → 受入 | 7ロットができる | ロット番号がここで生まれ、以降すべてをつなぐ。Oリング・潤滑油には有効期限 |
+| 5 | `machining` | 夜勤で機械加工 | 9/1 21:00〜9/2 3:00 | op003 が EQ-01 で鋳造品20個を削る | op003／作業指示 → 実績入力 | R3001 50→30。`SMP-SF-001-10` 完了 | **異常：**送り速度 1350（許容 1100〜1300）で**逸脱**。0:40〜1:10 に主軸ベルトの滑りで**停止**（16 の記録）。**見どころ：**良品20個は現場にあるが、最終工程ではないので在庫には増えない |
+| 8 | `assembly` | ギアポンプを組み立てる | 9/3 8:30〜11:30 | op002 が EQ-02 でハウジングと部品を組む | op002／作業指示 → 実績入力 | SF2000 19→9、R3002・R3003 −10、R3004 −18、R3007 −2、R3005 −40、R3006 −0.5。`SMP-FG-001-10` 完了 | **見どころ：**Oリングの一部を耐油品で代替し、理由が残る。予定にない品目は投入できない |
+| 10 | `packing` | 梱包して製品倉庫へ | 9/3 13:30〜14:00 | op002 が EQ-04 で梱包し、9台を WH-P01 へ運ぶ | op002／作業指示 → 実績入力 | FG1000-S001 が 9 で入庫。`SMP-FG-001-30` 完了 | **異常：**不良1（DR-05・再作業待ち）。14:00〜14:20 にシールヒーター温度上昇待ちで EQ-04 が**停止**（16 の記録）。**見どころ：**ここで初めて製品が在庫に入る |
+| 14 | `shipment` | サンプル商事へ5台出荷 | 10/16 予定 | lg001 が WH-P01 から5台をトラックへ積む | lg001／物流・在庫 → 出荷管理 | FG1000-S001 9→4 | **見どころ：**承認済みの出荷判定が無いと出荷実行で止まる |
+
+残りの10場面は `stub: true` で並べる。中身が要るのは次の3つで、ほかは空でよい。
+
+| No | stub の id | moves・effects |
+|:--|:--|:--|
+| 3 | `order` | 作業指示5件を「未配布」で作る |
+| 7 | `outsourcing` | 加工品19個を WIP-02 へ（不良1は消滅）。SF2000-S001 +19。`SMP-SF-001-20` 完了 |
+| 9 | `final-test` | 組立品10台を WC-QC1 へ。`SMP-FG-001-20` 完了 |
+
+表示する場面の前に stub があるときは、説明欄に**つなぎの表示**（「この前に：表面処理で 19 個が WIP-02 へ（場面7で追加）」）を出す。文言は stub の `title` から作る。
+
+### 第2段階で加える10場面（TOUR-04）
+
+| No | id | 場面 | 担当／メニュー | 内容 |
+|:--|:--|:--|:--|:--|
+| 2 | `receiving-inspection` | 受入検査 | qc001／品質 → 検査管理 | R3001-260901 が検査待ちになり、INS-03 外観「巣・欠けなし」で合格し正常へ戻る |
+| 3 | `order` | 製造指図から作業指示へ | pm001／生産・製造実行 → 製造指図 | SMP-SF-001（20個）と SMP-FG-001（10台）を登録・承認・工程展開。作業指示の紙が現場へ飛ぶ。指図・作業指示の状態欄がここから動く |
+| 4 | `dispatch` | 差立 | pm001／生産・製造実行 → 差立 | **サンプルの CSV は差立を取り込まない**。例として、SMP-FG-002 を画面で展開し -10 を op002・EQ-02 へ割り当てる様子を見せ、「画面で試せる操作」と明記する。台帳は変えない。SMP-FG-001 は未配布のまま着手できると添える。スキルの照合も見せる |
+| 6 | `in-process-inspection` | 工程内検査 | qc001／品質 → 検査管理 | INS-01 内径 50.01・49.98（規格 49.95〜50.05）、INS-02 外観キズなしで合格。測定値が規格の帯に入る演出 |
+| 7 | `outsourcing` | 外注で表面処理 | op001／作業指示 → 実績入力 | トラックで外注先へ。良品19・不良1（DR-01 鋳巣）で戻り、SF2000-S001 が WIP-02 に 19 で入庫。8:00〜12:00 |
+| 9 | `final-test` | 最終検査の工程 | op001／作業指示 → 実績入力 | PR-40。EQ-03 で 10台、試験圧力 0.5 MPa、吐出音 異音なし。12:30〜13:00。作業指示の工程なので qc001 ではなく、SK-03 を持つ現場作業者が入力する。後の完成品検査（場面12）と別物であることを添える |
+| 11 | `completion-approval` | 完了承認 | pm001／実績入力（製造完了承認） | **サンプルの CSV には入らない、画面で行う操作**と明記する。3件の作業指示が承認済になり、指図 SMP-FG-001 が完了。SMP-SF-001 も同様 |
+| 12 | `final-inspection` | 完成品検査 | qc001／品質 → 検査管理 | FG1000-S001 が検査待ち → INS-04 吐出量 20.3（規格 19〜21）、INS-05 漏れなしで合格・グレード A → 正常 |
+| 13 | `shipment-judgment` | 出荷指示と出荷判定 | lg001／物流・在庫 → 出荷管理、qc001／品質 → 出荷判定 | lg001 が出荷指示 SMP-SH-001 を作り、qc001 が FG1000-S001 に判定「可」を出して承認する。比較として SMP-SH-002 が「保留」で止まっている様子を見せる |
+| 15 | `trace` | トレース | qc001／品質 → トレーサビリティ | `camera: 'all'`。FG1000-S001 から SF2000-S001、R3001-260901 と部材6ロットへ、模型の上を光でさかのぼる。切替で鋳造品から製品・出荷へたどる向きも見せる |
+
+追加に合わせて、`stub` とつなぎの表示を取り除き、状態欄（製造指図とロットの状態）を台帳に足す。場面11の後の状態欄は CSV の取込結果より先へ進む（作業指示は承認済、指図は完了）ので、実データとの照合は場面10までの状態で行う。
+
+## カード
+
+| ID | 内容 | 想定層 | 状態 |
+|:--|:--|:--|:--|
+| TOUR-01 | 工場模型の静的な描画とページの骨組み | L1 / high | 完了（見た目の確認済み） |
+| TOUR-02 | 進行・操作・台帳と第1段階の5場面 | L1 / high | 完了（見た目と操作の確認済み） |
+| TOUR-03 | 最終検査を担当できる作業者をサンプルに足す | L2 / low | 完了 |
+| TOUR-04 | 残り10場面 | L2 / medium | 完了 |
+| TOUR-05 | ガイドからの導線と仕上げ | L2 / medium | 完了 |
+| TOUR-06 | 在庫照会の写真を今のサンプルで撮り直す | L2 / low | 完了 |
+
+全カード共通の参照：`docs/walkthrough.md`、`samples/actual-csv/README.md`、この仕様書。ガイドの説明ページなので `Spec.md` には触れない。業務プロセスとの対応は `walkthrough.md` の該当章で説明する。
+
+### TOUR-01：工場模型の静的な描画とページの骨組み
+
+- **目的**：演出を載せる前に、等角の見た目とレイアウトを確かめる
+- **変更対象**：`docs/factory-tour.html`、`docs/assets/tour/tour.css`、`docs/assets/tour/tour.js`、`docs/assets/tour/scenes.js`（配置だけ）、`.claude/launch.json`
+- **変更禁止**：`src/`、`Spec.md`、`samples/`、`docs/` の既存ページ
+- **想定変更ファイル数**：5。`Orchestration.md` §4.1 の「3ファイル超は分割」の**例外**とする（すべて新規で、1枚でも欠けると見た目を確かめられない）
+- **まだしないこと**：場面の再生、台帳の値、ガイドからのリンク（直接 URL で確認する）
+- **受入基準**
+  1. 配置図のすべての要素（作業区・倉庫・設備・人・端末・MES サーバー・トラック）が等角で描かれ、説明欄と台帳欄の枠がレイアウトどおりに並ぶ
+  2. カメラを任意の持ち場に寄せる関数があり、コンソールから呼ぶと viewBox が変わる
+  3. 幅 1440／768／375px で横スクロールが出ず、1440×900 で模型と台帳欄が同時に収まる。375px では持ち場に寄せるとラベルが読める
+  4. ライト・ダーク・`prefers-reduced-motion` のそれぞれで表示が崩れない
+  5. コンソールエラーなし、外部へのリクエストなし
+  6. `jekyll build -s docs -d "$env:TEMP\mes-docs-site"` が成功する
+- **完了時**：スクリーンショットを利用者に渡し、**見た目の確認を受けてから TOUR-02 に進む**
+
+### TOUR-02：進行・操作・台帳と第1段階の5場面
+
+- **目的**：4拍の演出と操作を5場面で確かめる
+- **変更対象**：`docs/assets/tour/scenes.js`、`docs/assets/tour/tour.js`、`docs/assets/tour/tour.css`
+- **変更禁止**：TOUR-01 と同じ
+- **想定変更ファイル数**：3
+- **受入基準**
+  1. 上の5場面が、4拍の演出つきで順に再生できる
+  2. 「操作」の表のとおりに動き、場面を飛ばしても台帳の値と模型の物の位置・数量が合う
+  3. 台帳と作業指示の状態が、**01〜15 だけを新しい DB に取り込んだ実データ**と一致する（確認手順は下）
+  4. 第4拍の変化が、1440×900 と 375px で模型と同時に見える
+  5. 幅 1440／768／375px で横スクロールが出ず、模型のラベルが読める
+  6. ライト・ダーク・`prefers-reduced-motion` のそれぞれで表示が崩れない
+  7. コンソールエラーなし、外部へのリクエストなし
+  8. `jekyll build -s docs -d "$env:TEMP\mes-docs-site"` が成功する
+  9. 各場面のメニュー表記が `NavMenu.razor` に一致する
+- **完了時**：スクリーンショットを利用者に渡し、**見た目と操作の確認を受けてから TOUR-04 に進む**
+
+### TOUR-03：最終検査を担当できる作業者をサンプルに足す
+
+- **目的**：PR-40 を画面から着手・入力できる人がいない今のサンプルを直す（決定事項の表）
+- **変更対象**：`samples/master-csv/19_user-skills.csv`（`op001,SK-03,2025-04-01,2028-03-31` を追加）、`samples/master-csv/README.md`（75行目付近に op001 が担当できることを追記）、`docs/walkthrough.md`（2章の役目の表で op001 に最終検査を足す）
+- **変更禁止**：`src/`、`Spec.md`、op002 の期限切れの SK-03（拒否を確かめる用に残す）
+- **想定変更ファイル数**：3
+- **受入基準**
+  1. 新しい DB にマスタを取り込み、SMP-FG-002 を画面で展開すると、工程20に **op001 は着手でき、op002 は資格切れで拒否される**
+  2. `dotnet test` が全緑
+  3. `jekyll build -s docs -d "$env:TEMP\mes-docs-site"` が成功する
+
+### TOUR-04：残り10場面
+
+- **目的**：15場面の物語を完成させる
+- **変更対象**：`docs/assets/tour/scenes.js`、`docs/assets/tour/tour.js`（必要な演出だけ。トレースの光、測定値の帯など）、`docs/assets/tour/tour.css`
+- **変更禁止**：TOUR-01 と同じ
+- **想定変更ファイル数**：3
+- **受入基準**
+  1. 15場面すべてが順に再生でき、`stub` とつなぎの表示が残っていない
+  2. 各場面の担当・メニュー・数値が、サンプルCSVと `NavMenu.razor` の表記に一致する
+  3. 差立（場面4）と完了承認（場面11）が、画面で行う操作だと分かる文言になっている
+  4. TOUR-02 の受入基準 2〜8 を15場面で満たす（基準3の実データ照合は場面10までの状態と在庫の最終値で行う）
+
+### TOUR-05：ガイドからの導線と仕上げ
+
+- **目的**：読者がページへたどり着けるようにし、既存ページとの食い違いを片付ける
+- **変更対象**：`docs/_config.yml`（ナビの `walkthrough.html` の直前に「工場模型で見る 製造から出荷まで」）、`docs/index.md`、`docs/walkthrough.md`（冒頭からのリンクと、下の申し送りの確認）。`intro.html` からのリンクは作らない
+- **変更禁止**：`src/`、`Spec.md`、`docs/assets/tour/`（ただし確認で見つかった `detail.href` の誤りは直してよい）
+- **想定変更ファイル数**：3（写真の撮り直しが要るときは別カードにする）
+- **受入基準**
+  1. ガイドの目次・`index.md`・`walkthrough.md` からページへ行け、ページからガイドへ戻れる
+  2. 各場面の「詳しく見る」が `walkthrough.md` の該当章へ飛ぶ
+  3. 下の申し送りを確認し、結果に応じて `walkthrough.md` の文言を直すか、写真の撮り直しのカードを起こしている
+  4. `jekyll build` が成功し、`docs/_site` を作っていない
+
+### TOUR-06：在庫照会の写真を今のサンプルで撮り直す
+
+- **目的**：`walkthrough.md` 4章の在庫照会の写真を、手元で再現できる一覧にする（下の申し送りの確認結果）
+- **変更対象**：`docs/assets/walkthrough/inventory.webp`、`docs/walkthrough.md`（写真の説明文と alt）
+- **変更禁止**：`src/`、`Spec.md`、`samples/`
+- **想定変更ファイル数**：2
+- **撮り方**：`samples/master-csv` と `samples/actual-csv` の **01〜15 だけ**を新しい DB に取り込んだ状態で撮るか、全部を取り込んだ状態で撮るかを先に決める。今の説明文は前者に近い
+- **受入基準**
+  1. 写真の一覧と数量が、決めた取込範囲の実データに一致する
+  2. 説明文の数字が写真と一致し、TOUR-05 で足した但し書きが不要なら外している
+  3. `jekyll build -s docs -d "$env:TEMP\mes-docs-site"` が成功する
+
+## 確認の手順
+
+新しい DB に `samples/master-csv` の ZIP と、`samples/actual-csv` の **01〜15 だけ**の ZIP を取り込む（新しい DB の用意は既存の手順に従う）。在庫照会・作業指示の一覧の値を「台帳の初期値と最終値」と比べる。
+
+**TOUR-02 で実データから確かめること**（CSV だけでは決まらない）：
+
+- `SMP-SF-001-20`（19＋1）と `SMP-FG-001-30`（9＋1）の状態が「完了」になること。コード上は数量によらず、実績1件で完了になる（`WorkOrderExecutionService.cs` の実績登録）
+- 作業指示5件が「承認済」になっていないこと（CSV に完了承認の列がない）
+- 取込後の各ロットの在庫ステータス
+
+## 既存ページへの申し送り
+
+`walkthrough.md` の「鋳造品は残り30個」「9台→4台」は 01〜15 の時点の値。サンプルを全部取り込むと、24 の払出戻し（R3001 +1）と 30 の保管サンプル（FG1000-S001 −1）で値が変わるはずなので、`walkthrough.md` の説明と在庫照会の写真が今のサンプルと合っているかを TOUR-05 で確認する。
+
+**確認の結果（TOUR-05、2026-11-03）**：サンプルを全部取り込むと、R3001-260901 は 31 個、FG1000-S001 は 3 個、ロットは追加入荷や分割を含めて増える。図の「9台 → 4台」「残り4台」は出荷を実行した時点の値として正しいので、但し書きを足した。在庫照会の写真は全 10 件で、今のサンプルの 01 にあるロット（R3001-260902 など）が写っておらず 01〜15 の時点とも一致しないので、説明文に但し書きを足し、撮り直しを TOUR-06 に分けた。
+
+**撮り直しの結果（TOUR-06、2026-11-03）**：取込範囲は **01〜15 だけ**に決めた（本文の「残り30個」「9→4台」とこのページの台帳に揃うため）。写真は全 15 件で、台帳の9ロットの数量は「台帳の初期値と最終値」の最終値とすべて一致した。残りの6件は台帳の対象外（保全部品3件、R3001-260902、R3004-251001、R3006-250801）。全部を取り込むと数量が変わる但し書きは、今も必要なので残した。
+
+CSV の実績には作業者の列がない。模型に出す担当者はユーザーマスタの所属・シフトと `walkthrough.md` の記述に合わせた（夜勤の機械加工は op003、昼勤の外注の受入と最終検査は op001）。
diff --git a/docs/_config.yml b/docs/_config.yml
index c798ebc..75bd3ec 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -34,6 +34,8 @@ nav:
         url: getting-started.html
       - title: 画面構成と共通操作
         url: basics.html
+      - title: 工場模型で見る 製造から出荷まで
+        url: factory-tour.html
       - title: サンプルで見る 製造から出荷まで
         url: walkthrough.html
   - section: 準備
diff --git a/docs/assets/tour/scenes.js b/docs/assets/tour/scenes.js
new file mode 100644
index 0000000..2df3041
--- /dev/null
+++ b/docs/assets/tour/scenes.js
@@ -0,0 +1,478 @@
+// 工場模型の配置データ（docs-dev/FactoryTour.md「工場の配置」）。処理は tour.js に書く
+// 座標は床の上の単位。x は配置図の左から右、y は配置図の上から下へ増える
+window.TOUR_DATA = {
+  // 工場の床（建屋の範囲）
+  floor: { x: 0, y: -2.5, w: 26.5, d: 20 },
+
+  // 床に引く区画。code は場面データの station・actors・moves から指す名前
+  // label はラベルの置き方（既定は奥の角の真上。center は区画の中央で、name がなければコードだけ）
+  // labelAt はラベルを置く床の座標（隣の物と重なる区画だけ）、labelNarrow は狭い画面でラベルを置く床の座標（寄せると手前の物のラベルと重なる区画だけ）
+  // slots は物を置く位置。置く順に使う。3つ目の値は高さ（トラックの荷台の上など）
+  zones: [
+    { code: 'OFFICE', name: '事務所', x: 9, y: -2, w: 5, d: 3.5, kind: 'office', spot: [13.2, 0.4] },
+    { code: 'MES', name: 'MES サーバー', x: 15, y: -2, w: 3, d: 3.5, kind: 'server' },
+
+    { code: 'YARD-IN', name: '受入ヤード', x: 0, y: 3.5, w: 4, d: 5, kind: 'yard', spot: [2.3, 8] },
+    { code: 'WH-M01', name: '部材倉庫', x: 5, y: 2.5, w: 3.5, d: 3.3, kind: 'warehouse', spot: [5.7, 5.3], slots: [[6.6, 3], [5.9, 3.7], [6.6, 4.6]] },
+    { code: 'WH-M02', name: '部材倉庫', x: 5, y: 6.2, w: 3.5, d: 3.3, kind: 'warehouse', spot: [5.7, 9], labelAt: [4.3, 6.2], slots: [[6.6, 6.7], [5.6, 7.7], [6.6, 8.2], [5.6, 9.2]] },
+    { code: 'WC-MC1', name: 'マシニング加工', x: 10, y: 3.5, w: 9.5, d: 5, kind: 'workcenter', spot: [10.5, 7.2], labelNarrow: [14, 3.5], slots: [[18.6, 7.6]] },
+    { code: 'WIP-01', name: '', x: 16.6, y: 4, w: 2.4, d: 2.4, kind: 'wip', parent: 'WC-MC1', label: 'center', spot: [16.4, 7.4] },
+    { code: 'DOCK', name: '搬出口', x: 21.5, y: 3.5, w: 4.5, d: 5, kind: 'yard', spot: [22.2, 7.8] },
+    { code: 'OUTSIDE', name: '外注先（工場の外）', x: 29, y: 3.5, w: 4.5, d: 5, kind: 'outside' },
+
+    { code: 'SHIP-01', name: '出荷ヤード', x: 0, y: 12.5, w: 4, d: 4.5, kind: 'yard', spot: [3.3, 16.3], slots: [[1.8, 14.6, 1.65]] },
+    { code: 'WH-P01', name: '製品倉庫', x: 5, y: 12.5, w: 3.5, d: 4.5, kind: 'warehouse', spot: [5.7, 16.4], slots: [[6.2, 14.2]] },
+    { code: 'WC-PK1', name: '梱包', x: 9.5, y: 12.5, w: 3.5, d: 4.5, kind: 'workcenter', spot: [12.8, 15.6], slots: [[10, 14.3]] },
+    { code: 'WC-QC1', name: '最終検査', x: 14, y: 12.5, w: 3.5, d: 4.5, kind: 'workcenter', spot: [17.3, 15.6], slots: [[14.6, 14.2]] },
+    { code: 'WC-AS1', name: 'ポンプ組立', x: 18.5, y: 12.5, w: 3.5, d: 4.5, kind: 'workcenter', spot: [21.8, 15.6], slots: [[20.2, 13]] },
+    { code: 'WIP-02', name: '仕掛置場', x: 23, y: 12.5, w: 3, d: 4.5, kind: 'wip', labelNarrow: [26, 12.5], slots: [[24.3, 15.5]] }
+  ],
+
+  // 設備。shape は tour.js の形の名前。label: 'left' はコードを手前の角でなく左の角に出す
+  equipments: [
+    { code: 'EQ-01', zone: 'WC-MC1', x: 11, y: 4.8, shape: 'machining' },
+    { code: 'EQ-05', zone: 'WC-MC1', x: 13.6, y: 4.8, shape: 'machining' },
+    { code: 'EQ-02', zone: 'WC-AS1', x: 19.9, y: 13.6, shape: 'bench', label: 'left' },
+    { code: 'EQ-03', zone: 'WC-QC1', x: 15.4, y: 13.6, shape: 'gantry', label: 'left' },
+    { code: 'EQ-04', zone: 'WC-PK1', x: 10.9, y: 13.4, shape: 'packer', label: 'left' }
+  ],
+
+  // 什器。設備マスタには載らない見た目だけのもの
+  fixtures: [
+    { zone: 'WH-M01', x: 7.3, y: 2.9, shape: 'rack' },
+    { zone: 'WH-M02', x: 7.3, y: 6.6, shape: 'rack' },
+    { zone: 'WH-P01', x: 7.3, y: 13, shape: 'rack' },
+    { zone: 'OFFICE', x: 10.2, y: -1.4, shape: 'desk' },
+    { zone: 'MES', x: 15.8, y: -1.4, shape: 'server' },
+    { zone: 'OUTSIDE', x: 29.8, y: 4.1, shape: 'plant' }
+  ],
+
+  // トラック
+  trucks: [
+    { zone: 'YARD-IN', x: 0.4, y: 4.6, shape: 'truck' },
+    { zone: 'DOCK', x: 22.6, y: 4.2, shape: 'truck' },
+    { zone: 'SHIP-01', x: 0.4, y: 13.2, shape: 'truck' }
+  ],
+
+  // 人の持ち場。場面データの actors が別の持ち場を指すと、そこへ移す
+  people: [
+    { user: 'pm001', role: 'pm', at: 'OFFICE' },
+    { user: 'lg001', role: 'lg', at: 'YARD-IN' },
+    { user: 'op003', role: 'op', at: 'WC-MC1' },
+    { user: 'op001', role: 'op', at: 'WC-MC1', x: 13, y: 8.3 },
+    { user: 'op002', role: 'op', at: 'WC-AS1' },
+    { user: 'qc001', role: 'qc', at: 'WC-QC1' }
+  ],
+
+  // 床に引く物の流れ。material は部材の供給で、本流と線種を変える
+  flows: [
+    { path: [[4, 6], [5, 6]] },
+    { path: [[8.5, 6], [10, 6]] },
+    { path: [[19.5, 6], [21.5, 6]] },
+    { path: [[26, 6], [29, 6]] },
+    { path: [[31.2, 8.5], [31.2, 14.7], [26, 14.7]] },
+    { path: [[23, 14.7], [22, 14.7]] },
+    { path: [[18.5, 14.7], [17.5, 14.7]] },
+    { path: [[14, 14.7], [13, 14.7]] },
+    { path: [[9.5, 14.7], [8.5, 14.7]] },
+    { path: [[5, 14.7], [4, 14.7]] },
+    { path: [[6.7, 9.5], [6.7, 10.9], [20.2, 10.9], [20.2, 12.5]], material: true, label: '部材' }
+  ],
+
+  // 模型の物。kind で色を変える（material 部材／semi 半製品／product 製品／rework 再作業待ち）
+  items: {
+    casting: { name: 'ハウジング鋳造品', kind: 'material' },
+    gear: { name: 'ギアセット', kind: 'material' },
+    shaft: { name: 'シャフト', kind: 'material' },
+    oring: { name: 'Oリング', kind: 'material' },
+    oringOil: { name: 'Oリング（耐油）', kind: 'material' },
+    bolt: { name: '六角ボルト', kind: 'material' },
+    oil: { name: '潤滑油', kind: 'material' },
+    machined: { name: 'ハウジング加工品', kind: 'semi' },
+    assembled: { name: '組立済みのポンプ', kind: 'semi' },
+    product: { name: 'ギアポンプ', kind: 'product' },
+    rework: { name: '再作業待ち', kind: 'rework' }
+  },
+
+  // 台帳の行。samples/actual-csv の 01〜15 に出る、物語に関係するロットと作業指示だけ
+  lots: [
+    { lot: 'R3001-260901', name: 'ハウジング鋳造品', at: 'WH-M01', unit: '個' },
+    { lot: 'R3002-260901', name: 'ギアセット', at: 'WH-M01', unit: 'セット' },
+    { lot: 'R3003-260901', name: 'シャフト', at: 'WH-M01', unit: '本' },
+    { lot: 'R3004-260901', name: 'Oリング', at: 'WH-M02', unit: '個' },
+    { lot: 'R3007-260901', name: 'Oリング（耐油）', at: 'WH-M02', unit: '個' },
+    { lot: 'R3005-260901', name: '六角ボルト M6x20', at: 'WH-M02', unit: '本' },
+    { lot: 'R3006-260901', name: '潤滑油', at: 'WH-M02', unit: 'L' },
+    { lot: 'SF2000-S001', name: 'ハウジング加工品', at: 'WIP-02', unit: '個' },
+    { lot: 'FG1000-S001', name: 'ギアポンプ組立品', at: 'WH-P01', unit: '個' }
+  ],
+  manufacturingOrders: ['SMP-SF-001', 'SMP-FG-001'],
+  orders: ['SMP-SF-001-10', 'SMP-SF-001-20', 'SMP-FG-001-10', 'SMP-FG-001-20', 'SMP-FG-001-30'],
+
+  // 場面。各場面は差分だけを持ち、tour.js が1場面目から足し直して表示する（docs-dev/FactoryTour.md「場面データの形」）
+  // moves の via は、足し直しに関わらない見た目の起点・終点（from なしの生成がどこから来るか、to なしの消滅がどこへ行くか）
+  // alerts の labelAt は異常のラベルを置く床の座標（既定は区画の手前の角）
+  // around は moves に出ない前後の工程の持ち場（部分表示でラベルを出す）
+  // note は説明欄の「見どころ」、ledgerNote は台帳に添える数字の見方。equipment は第1拍で動かす設備
+  // moves の route は、途中で通る持ち場（外注先への往復など）。papers は作業指示の紙が事務所から飛ぶ先の持ち場
+  // effects の { lot, status, from } はロットの状態の変化。from は場面の中で一度なった状態（検査待ちなど）で、足し直しには使わない
+  // changeNotes は台帳の行が変わらない記録の変化。gauges は説明欄に出す測定値と規格の帯
+  // trace は模型の上でたどるロットのつながり（back／forward を説明欄で切り替える）。labelAt はラベルを置く床の座標（既定は弧の中央）
+  scenes: [
+    {
+      id: 'receiving',
+      no: 1,
+      title: '部材が届く',
+      station: 'YARD-IN',
+      around: ['WC-MC1'],
+      actors: [{ user: 'lg001', role: 'lg', at: 'YARD-IN' }],
+      moves: [
+        { item: 'casting', qty: 50, via: 'YARD-IN', to: 'WH-M01' },
+        { item: 'gear', qty: 50, via: 'YARD-IN', to: 'WH-M01' },
+        { item: 'shaft', qty: 50, via: 'YARD-IN', to: 'WH-M01' },
+        { item: 'oring', qty: 200, via: 'YARD-IN', to: 'WH-M02' },
+        { item: 'oringOil', qty: 40, via: 'YARD-IN', to: 'WH-M02' },
+        { item: 'bolt', qty: 500, via: 'YARD-IN', to: 'WH-M02' },
+        { item: 'oil', qty: 20, via: 'YARD-IN', to: 'WH-M02' }
+      ],
+      floor: 'トラックが7種類の部材を届け、WH-M01・WH-M02 へ入れます。',
+      input: [{ who: 'lg001', menu: '物流・在庫 → 受入', record: '品目・数量・置場・ロット番号・有効期限' }],
+      effects: [
+        { lot: 'R3001-260901', delta: 50 },
+        { lot: 'R3002-260901', delta: 50 },
+        { lot: 'R3003-260901', delta: 50 },
+        { lot: 'R3004-260901', delta: 200 },
+        { lot: 'R3007-260901', delta: 40 },
+        { lot: 'R3005-260901', delta: 500 },
+        { lot: 'R3006-260901', delta: 20 }
+      ],
+      note: 'ロット番号がここで生まれ、以降の在庫・投入・追跡をすべてつなぎます。Oリング・潤滑油には有効期限があります。',
+      ledgerNote: '受入で、ロットごとの在庫ができる。',
+      detail: { href: 'walkthrough.html#receiving', image: null }
+    },
+    {
+      id: 'receiving-inspection',
+      no: 2,
+      title: '受入検査で鋳造品が合格',
+      station: 'WH-M01',
+      around: ['YARD-IN', 'WC-MC1'],
+      actors: [{ user: 'qc001', role: 'qc', at: 'WH-M01' }],
+      floor: 'qc001 が鋳造品 R3001-260901 の外観を目視で確かめ、巣や欠けがないことを確認します。',
+      input: [{ who: 'qc001', menu: '品質 → 検査管理', record: '検査指示の発行・INS-03 外観「巣・欠けなし」・総合判定' }],
+      effects: [{ lot: 'R3001-260901', status: '正常', from: '検査待ち' }],
+      note: '検査指示を発行するとロットは「検査待ち」になり、工程へ払い出せません。合格すると「正常」に戻ります。',
+      ledgerNote: '数量は変わらず、ロットの状態だけが動く。',
+      detail: {
+        href: 'walkthrough.html#inspection',
+        image: 'assets/walkthrough/inspections.webp',
+        alt: '検査管理画面。受入・工程内・完成品の3件の検査指示が、承認済・合格で並んでいる'
+      }
+    },
+    {
+      id: 'order',
+      no: 3,
+      title: '製造指図から作業指示へ',
+      station: 'OFFICE',
+      around: ['WC-MC1', 'DOCK', 'WC-AS1', 'WC-QC1', 'WC-PK1'],
+      actors: [{ user: 'pm001', role: 'pm', at: 'OFFICE' }],
+      papers: ['WC-MC1', 'DOCK', 'WC-AS1', 'WC-QC1', 'WC-PK1'],
+      floor: 'pm001 が SMP-SF-001（20個）と SMP-FG-001（10台）を登録・承認し、工程展開します。工程ごとの作業指示が現場へ届きます。',
+      input: [{ who: 'pm001', menu: '生産・製造実行 → 製造指図', record: '品目・数量・納期の登録、承認、工程展開' }],
+      effects: [
+        { mo: 'SMP-SF-001', status: '展開済' },
+        { mo: 'SMP-FG-001', status: '展開済' },
+        { wo: 'SMP-SF-001-10', status: '未配布' },
+        { wo: 'SMP-SF-001-20', status: '未配布' },
+        { wo: 'SMP-FG-001-10', status: '未配布' },
+        { wo: 'SMP-FG-001-20', status: '未配布' },
+        { wo: 'SMP-FG-001-30', status: '未配布' }
+      ],
+      note: '工順に沿って、工程ごとの作業指示ができます。産出ロット（SF2000-S001・FG1000-S001）と予定材料もここで決まります。',
+      ledgerNote: '指図と作業指示の状態がここから動く。在庫はまだ変わらない。',
+      detail: {
+        href: 'walkthrough.html#order',
+        image: 'assets/walkthrough/order-detail.webp',
+        alt: '製造指図 SMP-FG-001 の詳細画面。予定材料7品目と、工程展開でできた作業指示3件が表示されている'
+      }
+    },
+    {
+      id: 'dispatch',
+      no: 4,
+      title: '差立（画面で行う操作）',
+      station: 'OFFICE',
+      around: ['WC-AS1'],
+      actors: [{ user: 'pm001', role: 'pm', at: 'OFFICE' }],
+      papers: ['WC-AS1'],
+      floor: 'pm001 が作業指示ごとに、作業者・設備・着手順を割り当てます。ここでは例として、SMP-FG-002 を画面で工程展開し、-10 を op002・EQ-02 へ割り当てます。',
+      input: [
+        { who: 'pm001', menu: '生産・製造実行 → 製造指図', record: 'SMP-FG-002 の工程展開' },
+        { who: 'pm001', menu: '生産・製造実行 → 差立', record: 'SMP-FG-002-10 の作業者 op002・設備 EQ-02・着手順' }
+      ],
+      changeNotes: ['例の SMP-FG-002-10 が配布済になる（台帳の行は変わらない）'],
+      note: 'サンプルの CSV は差立を取り込まないので、画面で試せる操作です。SMP-FG-001 は差立を省いて、未配布のまま着手できます。作業者のスキルも照合するので、SK-04（組立作業）を持たない人や資格の期限が切れた人は割り当てられません。',
+      ledgerNote: '台帳は変わらない。このあとの物語は未配布のまま着手して進む。',
+      detail: {
+        href: 'walkthrough.html#order',
+        image: 'assets/walkthrough/dispatch.webp',
+        alt: '差立画面。SMP-FG-002 の作業指示2件が未配布で並び、作業者・設備・着手順を選べる'
+      }
+    },
+    {
+      id: 'machining',
+      no: 5,
+      title: '夜勤で機械加工',
+      when: '9/1 21:00〜9/2 3:00（夜勤 N）',
+      station: 'WC-MC1',
+      around: ['DOCK'],
+      equipment: 'EQ-01',
+      actors: [{ user: 'op003', role: 'op', at: 'WC-MC1' }],
+      moves: [{ item: 'casting', qty: 20, from: 'WH-M01', to: 'WC-MC1', as: 'machined' }],
+      floor: 'op003 が EQ-01 で鋳造品20個を削ります。',
+      input: [{ who: 'op003', menu: '生産・製造実行 → 作業指示 → 実績入力', record: '投入ロット・良品数・製造条件' }],
+      effects: [{ lot: 'R3001-260901', delta: -20 }, { wo: 'SMP-SF-001-10', status: '完了' }],
+      alerts: [
+        { at: 'WC-MC1', tag: '逸脱', labelAt: [19.5, 5.5], text: '逸脱：送り速度 1350 が許容範囲 1100〜1300 の外' },
+        { at: 'WC-MC1', tag: '停止', text: '停止：0:40〜1:10 に EQ-01 が主軸ベルトの滑りで停止（設備稼働の記録。台帳の数字は変わらない）' }
+      ],
+      note: '良品20個は現場にありますが、最終工程ではないので在庫には増えません。',
+      ledgerNote: '部材は作業指示への投入で減る。在庫に入るのは最終工程の良品だけ。',
+      detail: { href: 'walkthrough.html#execution', image: null }
+    },
+    {
+      id: 'in-process-inspection',
+      no: 6,
+      title: '工程内検査で合格',
+      station: 'WC-MC1',
+      around: ['DOCK'],
+      actors: [{ user: 'qc001', role: 'qc', at: 'WIP-01' }],
+      floor: 'qc001 がノギスでハウジングの内径を2個測り、外観にキズがないことを確かめます。',
+      input: [{ who: 'qc001', menu: '品質 → 検査管理', record: '工程内検査（SMP-SF-001-10）・INS-01 内径・INS-02 外観「キズなし」・総合判定' }],
+      gauges: [{ name: 'INS-01 ハウジング内径', min: 49.95, max: 50.05, unit: 'mm', values: [50.01, 49.98] }],
+      changeNotes: ['SMP-SF-001-10 の工程内検査が合格で確定する（台帳の行は変わらない）'],
+      note: '測定値を入れると、規格と照合して合否が自動で決まります。',
+      ledgerNote: '工程内検査は作業指示が対象なので、ロットの状態は動かない。',
+      detail: {
+        href: 'walkthrough.html#inspection',
+        image: 'assets/walkthrough/inspections.webp',
+        alt: '検査管理画面。受入・工程内・完成品の3件の検査指示が、承認済・合格で並んでいる'
+      }
+    },
+    {
+      id: 'outsourcing',
+      no: 7,
+      title: '外注で表面処理',
+      when: '9/2 8:00〜12:00（昼勤 D）',
+      station: 'DOCK',
+      actors: [{ user: 'op001', role: 'op', at: 'DOCK' }],
+      moves: [
+        { item: 'machined', qty: 19, from: 'WC-MC1', to: 'WIP-02', route: ['DOCK', 'OUTSIDE'] },
+        { item: 'machined', qty: 1, from: 'WC-MC1', via: 'OUTSIDE', route: ['DOCK'] }
+      ],
+      floor: 'トラックで加工品20個を外注先へ運びます。表面処理から戻った19個は WIP-02 へ入り、op001 が戻りを確かめて実績を入力します。',
+      input: [{ who: 'op001', menu: '生産・製造実行 → 作業指示 → 実績入力', record: '良品数・不良と不良内容・入庫先 WIP-02' }],
+      effects: [{ lot: 'SF2000-S001', delta: 19 }, { wo: 'SMP-SF-001-20', status: '完了' }],
+      alerts: [{ at: 'DOCK', tag: '不良', labelAt: [24.5, 8.8], text: '不良：1個（DR-01 鋳巣）を廃棄。WIP-02 へは入らない' }],
+      note: '表面処理は SF-2000 の最終工程なので、良品19個がここで SF2000-S001 として在庫に入ります。',
+      ledgerNote: '最終工程の良品だけが在庫に入る。不良の1個は入らない。',
+      detail: { href: 'walkthrough.html#execution', image: null }
+    },
+    {
+      id: 'assembly',
+      no: 8,
+      title: 'ギアポンプを組み立てる',
+      when: '9/3 8:30〜11:30（昼勤 D）',
+      station: 'WC-AS1',
+      around: ['WC-QC1'],
+      equipment: 'EQ-02',
+      actors: [{ user: 'op002', role: 'op', at: 'WC-AS1' }],
+      moves: [
+        { item: 'gear', qty: 10, from: 'WH-M01', via: 'WC-AS1' },
+        { item: 'shaft', qty: 10, from: 'WH-M01', via: 'WC-AS1' },
+        { item: 'oring', qty: 18, from: 'WH-M02', via: 'WC-AS1' },
+        { item: 'oringOil', qty: 2, from: 'WH-M02', via: 'WC-AS1' },
+        { item: 'bolt', qty: 40, from: 'WH-M02', via: 'WC-AS1' },
+        { item: 'oil', qty: 0.5, from: 'WH-M02', via: 'WC-AS1' },
+        { item: 'machined', qty: 10, from: 'WIP-02', to: 'WC-AS1', as: 'assembled' }
+      ],
+      floor: 'op002 が EQ-02 で、ハウジングと部品を組みます。',
+      input: [{ who: 'op002', menu: '生産・製造実行 → 作業指示 → 実績入力', record: '投入ロット・代替理由・良品数・締付トルク' }],
+      effects: [
+        { lot: 'SF2000-S001', delta: -10 },
+        { lot: 'R3002-260901', delta: -10 },
+        { lot: 'R3003-260901', delta: -10 },
+        { lot: 'R3004-260901', delta: -18 },
+        { lot: 'R3007-260901', delta: -2 },
+        { lot: 'R3005-260901', delta: -40 },
+        { lot: 'R3006-260901', delta: -0.5 },
+        { wo: 'SMP-FG-001-10', status: '完了' }
+      ],
+      note: 'Oリングの一部を耐油品で代替し、理由が残ります。予定にない品目は投入できません。',
+      ledgerNote: '半製品も部材と同じく、投入で減る。',
+      detail: {
+        href: 'walkthrough.html#execution',
+        image: 'assets/walkthrough/record.webp',
+        alt: 'SMP-FG-001-10 の実績入力画面。代替理由つきの Oリングを含む7件の部材投入が並ぶ'
+      }
+    },
+    {
+      id: 'final-test',
+      no: 9,
+      title: '最終検査の工程で 10 台を確認',
+      when: '9/3 12:30〜13:00（昼勤 D）',
+      station: 'WC-QC1',
+      around: ['WC-AS1', 'WC-PK1'],
+      equipment: 'EQ-03',
+      actors: [{ user: 'op001', role: 'op', at: 'WC-QC1' }],
+      moves: [{ item: 'assembled', qty: 10, from: 'WC-AS1', to: 'WC-QC1' }],
+      floor: 'op001 が EQ-03 で10台を試験します。試験圧力は 0.5 MPa で、吐出音に異音はありません。',
+      input: [{ who: 'op001', menu: '生産・製造実行 → 作業指示 → 実績入力', record: '良品数・試験圧力・吐出音' }],
+      effects: [{ wo: 'SMP-FG-001-20', status: '完了' }],
+      note: '作業指示の工程なので、qc001 ではなく SK-03 を持つ現場作業者が入力します。ロットを検査する完成品検査（場面12）とは別物です。',
+      ledgerNote: '途中の工程の良品は、在庫に増えない。',
+      detail: { href: 'walkthrough.html#execution', image: null }
+    },
+    {
+      id: 'packing',
+      no: 10,
+      title: '梱包して製品倉庫へ',
+      when: '9/3 13:30〜14:00（昼勤 D）',
+      station: 'WC-PK1',
+      equipment: 'EQ-04',
+      actors: [{ user: 'op002', role: 'op', at: 'WC-PK1' }],
+      moves: [
+        { item: 'assembled', qty: 9, from: 'WC-QC1', to: 'WH-P01', as: 'product' },
+        { item: 'assembled', qty: 1, from: 'WC-QC1', to: 'WC-PK1', as: 'rework' }
+      ],
+      floor: 'op002 が EQ-04 で梱包し、9台を WH-P01 へ運びます。',
+      input: [{ who: 'op002', menu: '生産・製造実行 → 作業指示 → 実績入力', record: '良品数・不良と不良内容・入庫先' }],
+      effects: [{ lot: 'FG1000-S001', delta: 9 }, { wo: 'SMP-FG-001-30', status: '完了' }],
+      alerts: [
+        { at: 'WC-PK1', tag: '不良', text: '不良：1台（DR-05・再作業待ち）' },
+        { at: 'WC-PK1', tag: '停止', text: '停止：14:00〜14:20 に EQ-04 がシールヒーター温度上昇待ちで停止（設備稼働の記録。台帳の数字は変わらない）' }
+      ],
+      note: 'ここで初めて製品が在庫に入ります。',
+      ledgerNote: '最終工程の良品だけが在庫に入る。不良の1台は入らない。',
+      detail: { href: 'walkthrough.html#execution', image: null }
+    },
+    {
+      id: 'completion-approval',
+      no: 11,
+      title: '完了承認（画面で行う操作）',
+      station: 'OFFICE',
+      actors: [{ user: 'pm001', role: 'pm', at: 'OFFICE' }],
+      floor: 'pm001 が実績を確かめ、完了した作業指示を1件ずつ承認します。',
+      input: [{ who: 'pm001', menu: '生産・製造実行 → 作業指示 → 実績入力（製造完了承認）', record: '作業指示ごとの承認' }],
+      effects: [
+        { wo: 'SMP-SF-001-10', status: '承認済' },
+        { wo: 'SMP-SF-001-20', status: '承認済' },
+        { mo: 'SMP-SF-001', status: '完了' },
+        { wo: 'SMP-FG-001-10', status: '承認済' },
+        { wo: 'SMP-FG-001-20', status: '承認済' },
+        { wo: 'SMP-FG-001-30', status: '承認済' },
+        { mo: 'SMP-FG-001', status: '完了' }
+      ],
+      note: 'サンプルの CSV には入らない、画面で行う操作です。全工程を承認すると、製造指図が完了になります。',
+      ledgerNote: 'CSV の取込では作業指示は完了、指図は展開済のまま。この先の状態欄は、画面で承認した場合の値。',
+      detail: { href: 'walkthrough.html#order', image: null }
+    },
+    {
+      id: 'final-inspection',
+      no: 12,
+      title: '完成品検査で FG1000-S001 が合格',
+      station: 'WH-P01',
+      around: ['WC-PK1'],
+      actors: [{ user: 'qc001', role: 'qc', at: 'WH-P01' }],
+      floor: 'qc001 が FG1000-S001 の吐出量を流量計で測り、気密試験で漏れがないことを確かめます。',
+      input: [{ who: 'qc001', menu: '品質 → 検査管理', record: '検査指示の発行・INS-04 吐出量・INS-05 気密試験「漏れなし」・総合判定（グレード A）' }],
+      gauges: [{ name: 'INS-04 吐出量', min: 19, max: 21, unit: 'L/min', values: [20.3] }],
+      effects: [{ lot: 'FG1000-S001', status: '正常', from: '検査待ち' }],
+      note: '検査待ちの間、このロットは出荷できません。合格・グレード A で「正常」に戻ります。',
+      ledgerNote: '数量は変わらず、ロットの状態だけが動く。',
+      detail: {
+        href: 'walkthrough.html#inspection',
+        image: 'assets/walkthrough/inspections.webp',
+        alt: '検査管理画面。受入・工程内・完成品の3件の検査指示が、承認済・合格で並んでいる'
+      }
+    },
+    {
+      id: 'shipment-judgment',
+      no: 13,
+      title: '出荷指示と出荷判定',
+      when: '10/16 出荷予定',
+      station: 'SHIP-01',
+      around: ['WH-P01'],
+      actors: [{ user: 'lg001', role: 'lg', at: 'SHIP-01' }, { user: 'qc001', role: 'qc', at: 'WC-QC1' }],
+      floor: 'lg001 がサンプル商事へ5台の出荷指示 SMP-SH-001 を作り、qc001 が FG1000-S001 に判定「可」を出して承認します。',
+      input: [
+        { who: 'lg001', menu: '物流・在庫 → 出荷管理', record: '出荷先・予定日・品目・数量' },
+        { who: 'qc001', menu: '品質 → 出荷判定', record: '対象の出荷指示とロット、判定「可」、承認' }
+      ],
+      changeNotes: ['SMP-SH-001 の出荷判定が「可」で承認済になる（台帳の行は変わらない）'],
+      note: '比較：別の出荷指示 SMP-SH-002 は判定が「保留」のままで、出荷実行に進めません。',
+      ledgerNote: '指示と判定では、在庫は動かない。',
+      detail: {
+        href: 'walkthrough.html#shipping',
+        image: 'assets/walkthrough/shipment-judgments.webp',
+        alt: '出荷判定画面。SMP-SH-001 と FG1000-S001 を対象にした判定「可」が承認済、SMP-SH-002 の判定「保留」が未承認で並んでいる'
+      }
+    },
+    {
+      id: 'shipment',
+      no: 14,
+      title: 'サンプル商事へ5台出荷',
+      when: '10/16 予定',
+      station: 'WH-P01',
+      around: ['WC-PK1'],
+      actors: [{ user: 'lg001', role: 'lg', at: 'WH-P01' }],
+      moves: [{ item: 'product', qty: 5, from: 'WH-P01', to: 'SHIP-01' }],
+      floor: 'lg001 が WH-P01 から5台をトラックへ積みます。',
+      input: [{ who: 'lg001', menu: '物流・在庫 → 出荷管理', record: '出荷指示 SMP-SH-001 のロットと数量' }],
+      effects: [{ lot: 'FG1000-S001', delta: -5 }],
+      note: '承認済みの出荷判定が無いと、出荷実行で止まります。',
+      ledgerNote: '出荷で製品の在庫が減る。',
+      detail: {
+        href: 'walkthrough.html#shipping',
+        image: 'assets/walkthrough/shipping.webp',
+        alt: '出荷管理画面。SMP-SH-001 が完了（指示数5・出荷済5）、SMP-SH-002 が指示のまま'
+      }
+    },
+    {
+      id: 'trace',
+      no: 15,
+      title: 'トレースでロットをたどる',
+      station: 'WH-P01',
+      camera: 'all',
+      around: ['WIP-02', 'WH-M01', 'WH-M02', 'SHIP-01'],
+      actors: [{ user: 'qc001', role: 'qc', at: 'WC-QC1' }],
+      floor: 'qc001 が FG1000-S001 を追跡すると、使った半製品と部材のロットまで、記録がつながってたどれます。',
+      input: [{ who: 'qc001', menu: '品質 → トレーサビリティ', record: '追跡するロット番号' }],
+      changeNotes: ['参照するだけなので、記録は変わらない'],
+      trace: {
+        back: {
+          name: '製品から部材へ',
+          links: [
+            { from: 'WH-P01', to: 'WIP-02', tag: 'SF2000-S001', text: 'FG1000-S001 ← SF2000-S001 10個' },
+            { from: 'WIP-02', to: 'WH-M01', tag: 'R3001-260901', text: 'SF2000-S001 ← R3001-260901 20個' },
+            { from: 'WH-P01', to: 'WH-M01', tag: 'R3002・R3003', labelAt: [8.9, 9.3], text: 'FG1000-S001 ← R3002-260901 10セット・R3003-260901 10本' },
+            { from: 'WH-P01', to: 'WH-M02', tag: 'R3004 ほか3件', labelAt: [5.2, 10.7], text: 'FG1000-S001 ← R3004-260901 18個・R3007-260901 2個・R3005-260901 40本・R3006-260901 0.5 L' }
+          ]
+        },
+        forward: {
+          name: '鋳造品から製品・出荷へ',
+          links: [
+            { from: 'WH-M01', to: 'WIP-02', tag: 'SF2000-S001', text: 'R3001-260901 → SF2000-S001' },
+            { from: 'WIP-02', to: 'WH-P01', tag: 'FG1000-S001', text: 'SF2000-S001 → FG1000-S001' },
+            { from: 'WH-P01', to: 'SHIP-01', tag: '出荷 5', labelAt: [2.2, 18], text: 'FG1000-S001 → サンプル商事へ5台（SMP-SH-001）' }
+          ]
+        }
+      },
+      note: '「鋳造品に鋳巣が多い」と分かったときは、鋳造品から製品・出荷へたどれば、影響する製品と出荷先がすぐに分かります。',
+      ledgerNote: 'どの記録もロット番号でつながっている。',
+      detail: {
+        href: 'walkthrough.html#trace',
+        image: 'assets/walkthrough/trace.webp',
+        alt: 'トレーサビリティ画面。FG1000-S001 のトレースバックに、SF2000-S001 とその下の R3001-260901、ほか6件の部材ロットがツリーで並んでいる'
+      }
+    }
+  ]
+};
diff --git a/docs/assets/tour/tour.css b/docs/assets/tour/tour.css
new file mode 100644
index 0000000..d1029cd
--- /dev/null
+++ b/docs/assets/tour/tour.css
@@ -0,0 +1,445 @@
+/* 工場模型のページ（docs-dev/FactoryTour.md）。ガイドの style.css の変数を使い、このページだけのレイアウトと模型の色を足す */
+
+:root {
+  color-scheme: light dark;
+  /* 模型の本体は無彩色。面の濃さで立体に見せる */
+  --m-ground: #eef0f2;
+  --m-slab: #fbfbfc;
+  --m-slab-side-l: #c9ced4;
+  --m-slab-side-r: #b6bcc3;
+  --m-road: #dfe2e6;
+  --m-zone: #eceef1;
+  --m-zone-line: #a9b0b8;
+  --m-yard: #f2f3f5;
+  --m-body-top: #e4e7ea;
+  --m-body-l: #c4c9cf;
+  --m-body-r: #a9afb6;
+  --m-dark-top: #a3a9b0;
+  --m-dark-l: #80868d;
+  --m-dark-r: #6a7077;
+  --m-light-top: #f6f7f8;
+  --m-light-l: #dfe2e6;
+  --m-light-r: #ccd0d5;
+  --m-wall-top: #dadde1;
+  --m-wall-l: #eceef0;
+  --m-wall-r: #e3e5e8;
+  --m-tire: #4c5157;
+  --m-window: #f8fafc;
+  --m-led: #e8ebee;
+  --m-flow: #8b929a;
+  --m-label-bg: rgba(255, 255, 255, .9);
+  /* 物の色。部材・半製品・製品・再作業待ちを面の濃さごとに持つ（明暗で共通） */
+  --i-material-top: #eeb84f; --i-material-l: #cf962d; --i-material-r: #b07d1f;
+  --i-semi-top: #66abee; --i-semi-l: #3d88d4; --i-semi-r: #2c6fb5;
+  --i-product-top: #4fc78b; --i-product-l: #2fa469; --i-product-r: #238856;
+  --i-rework-top: #ee7a6f; --i-rework-l: #d25549; --i-rework-r: #b2433a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --m-ground: #0b0e12;
+    --m-slab: #1a1f26;
+    --m-slab-side-l: #2a3038;
+    --m-slab-side-r: #20262d;
+    --m-road: #181c22;
+    --m-zone: #2a313a;
+    --m-zone-line: #4b535e;
+    --m-yard: #1f242b;
+    --m-body-top: #5a626d;
+    --m-body-l: #454c55;
+    --m-body-r: #373d45;
+    --m-dark-top: #3b424b;
+    --m-dark-l: #2c323a;
+    --m-dark-r: #23282f;
+    --m-light-top: #7a828c;
+    --m-light-l: #626a74;
+    --m-light-r: #525962;
+    --m-wall-top: #363c45;
+    --m-wall-l: #262b32;
+    --m-wall-r: #2c3239;
+    --m-tire: #0d0f12;
+    --m-window: #8b95a1;
+    --m-led: #7c8794;
+    --m-flow: #7c8590;
+    --m-label-bg: rgba(15, 18, 22, .88);
+  }
+}
+
+/* ---------- レイアウト ---------- */
+.tour-page { line-height: 1.6; }
+
+.tour {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  grid-template-rows: minmax(300px, 1fr) auto 216px;
+  grid-template-areas:
+    "model side"
+    "controls side"
+    "ledger ledger";
+  gap: 10px;
+  padding: 10px 16px 12px;
+  height: calc(100vh - 52px);
+  height: calc(100dvh - 52px);
+  min-height: 640px;
+}
+.tour-model { grid-area: model; }
+.tour-controls { grid-area: controls; }
+.tour-side { grid-area: side; }
+.tour-ledger { grid-area: ledger; }
+.tour-band { display: none; }
+
+.tour-model,
+.tour-side,
+.tour-ledger,
+.tour-band {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  min-width: 0;
+}
+
+.tour-model {
+  position: relative;
+  background: var(--m-ground);
+  overflow: hidden;
+  min-height: 0;
+}
+.tour-legend {
+  position: absolute;
+  left: 8px;
+  bottom: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 10px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--m-label-bg);
+  color: var(--text-muted);
+  font-size: 11px;
+}
+.tour-legend span { display: inline-flex; align-items: center; gap: 4px; }
+.tour-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
+.swatch-material { background: var(--i-material-top); }
+.swatch-semi { background: var(--i-semi-top); }
+.swatch-product { background: var(--i-product-top); }
+.swatch-rework { background: var(--i-rework-top); }
+#tour-svg { display: block; width: 100%; height: 100%; }
+
+.tour-side {
+  background: var(--bg);
+  padding: 12px 16px;
+  overflow-y: auto;
+  font-size: 14px;
+  min-height: 0;
+}
+.tour-side h1 { font-size: 18px; line-height: 1.4; margin: 0 0 8px; border: 0; padding: 0; }
+.tour-side h2 { font-size: 13px; margin: 14px 0 4px; color: var(--text-muted); border: 0; padding: 0; }
+.tour-side p { margin: 0 0 6px; }
+.tour-count { font-size: 12px; color: var(--text-muted); }
+.text-note { color: var(--text-muted); font-size: 13px; margin: 0; }
+.tour-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.tour-noscript { margin: 16px; }
+.tour-when { font-size: 13px; color: var(--text-muted); }
+.tour-gauges { margin: 8px 0; }
+.tour-gauge-name { font-size: 13px; }
+.tour-gauge { position: relative; height: 14px; margin: 2px 0 8px; background: var(--bg-alt); border-radius: 7px; }
+.tour-gauge-band { position: absolute; left: 25%; width: 50%; top: 2px; bottom: 2px; background: var(--i-product-top); border-radius: 5px; }
+.tour-gauge-dot {
+  position: absolute;
+  top: 50%;
+  width: 11px;
+  height: 11px;
+  margin: -5.5px 0 0 -5.5px;
+  border-radius: 50%;
+  background: var(--r-qc);
+  border: 1.5px solid var(--bg);
+  transition: opacity .35s;
+}
+.tour-gauges.is-pending .tour-gauge-dot { opacity: 0; }
+.tour-trace-mode { margin: 8px 0 6px; flex-wrap: wrap; }
+.tour-section { margin: 0 -8px; padding: 0 8px 2px; border-radius: 6px; transition: background-color .2s; }
+.tour-section.is-lit { background: var(--accent-soft); }
+.tour-who.role-pm { color: var(--r-pm); }
+.tour-who.role-op { color: var(--r-op); }
+.tour-who.role-lg { color: var(--r-lg); }
+.tour-who.role-qc { color: var(--r-qc); }
+.tour-side ul { margin: 0 0 6px; padding-left: 18px; }
+.tour-side li { margin: 0 0 2px; }
+.tour-effects { font-size: 13px; }
+.tour-alerts { margin-top: 6px; color: var(--r-ng); font-weight: 600; font-size: 13px; }
+.tour-detail { display: inline-block; margin-top: 10px; }
+.tour-photo { display: block; margin-top: 6px; }
+.tour-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; }
+
+/* ---------- 操作 ---------- */
+.tour-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+  min-width: 0;
+}
+.tour-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
+.tour-buttons button {
+  font: inherit;
+  font-size: 13px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-alt);
+  color: var(--text);
+  cursor: pointer;
+}
+.tour-buttons button:disabled { color: var(--text-muted); cursor: default; opacity: .7; }
+
+.tour-label-mode { display: flex; align-items: center; font-size: 13px; }
+.tour-label-mode-name { margin-right: 6px; color: var(--text-muted); }
+.tour-label-mode button {
+  font: inherit;
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+  background: var(--bg-alt);
+  color: var(--text);
+  cursor: pointer;
+}
+.tour-label-mode button:first-of-type { border-radius: 6px 0 0 6px; }
+.tour-label-mode button:last-of-type { border-radius: 0 6px 6px 0; border-left: 0; }
+.tour-label-mode button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+
+.tour-rail {
+  display: flex;
+  flex: 1 1 390px; /* 15場面の丸が1列に収まる幅。足りなければ次の行へ回る */
+  align-items: center;
+  justify-content: space-between;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  background: linear-gradient(var(--border), var(--border)) center / 100% 2px no-repeat;
+}
+.tour-rail li { margin: 0; line-height: 0; }
+/* 押せる範囲は 24px 取り、見た目の丸は ::before で小さく描く */
+.tour-rail button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+.tour-rail button::before {
+  content: "";
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 2px solid var(--text-muted);
+  border-radius: 50%;
+  background: var(--bg);
+}
+.tour-rail button.is-past::before { background: var(--text-muted); }
+.tour-rail button[aria-current]::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+
+/* ---------- 台帳 ---------- */
+.tour-ledger {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 16px;
+  padding: 8px 12px;
+  min-height: 0;
+  background: var(--bg);
+}
+.tour-ledger-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.tour-ledger h2 { font-size: 13px; margin: 0 0 4px; color: var(--text-muted); border: 0; padding: 0; }
+.tour-ledger-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+.tour-ledger table { width: 100%; margin: 0; font-size: 12.5px; display: table; border-collapse: collapse; }
+.tour-ledger th,
+.tour-ledger td { padding: 2px 8px; border: 0; border-bottom: 1px solid var(--border); text-align: left; line-height: 1.5; }
+.tour-ledger thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-alt); }
+.tour-ledger tbody tr:nth-child(even) td { background: none; }
+.tour-ledger .num { text-align: right; white-space: nowrap; }
+.tour-ledger tr.is-absent td { opacity: .45; }
+.tour-ledger tbody tr.is-changed td { background: var(--accent-soft); font-weight: 600; }
+.tour-ledger tr.is-flash td { animation: tour-flash 1s ease-out; }
+.tour-ledger-note { flex: none; margin-top: 4px; font-size: 12px; }
+.tour-ledger-toggle { display: none; }
+
+@keyframes tour-flash {
+  0%, 60% { background: var(--r-lg-bg); box-shadow: inset 0 0 0 1px var(--r-lg); }
+  100% { background: var(--accent-soft); box-shadow: none; }
+}
+
+/* ---------- 変化の帯（幅 1000px 未満） ---------- */
+.tour-band h2 { font-size: 13px; margin: 0 0 4px; color: var(--text-muted); border: 0; padding: 0; }
+.tour-band ul { margin: 0 0 4px; padding-left: 18px; font-size: 13px; }
+.tour-band li { margin: 0; }
+.tour-band ul.is-pending { visibility: hidden; }
+.tour-band ul.is-flash { animation: tour-band-flash 1s ease-out; border-radius: 4px; }
+@keyframes tour-band-flash {
+  0%, 60% { background: var(--r-lg-bg); }
+  100% { background: none; }
+}
+
+/* ---------- 模型 ---------- */
+.slab { fill: var(--m-slab); stroke: var(--m-zone-line); stroke-width: .6; }
+.slab-side-l { fill: var(--m-slab-side-l); }
+.slab-side-r { fill: var(--m-slab-side-r); }
+.road { fill: var(--m-road); }
+
+.zone { fill: var(--m-zone); stroke: var(--m-zone-line); stroke-width: 1; stroke-linejoin: round; }
+.zone-yard { fill: var(--m-yard); stroke-dasharray: 6 4; }
+.zone-wip { fill: none; stroke-dasharray: 3 3; }
+.zone-office,
+.zone-server { fill: var(--m-yard); }
+.zone-outside { fill: var(--m-yard); stroke-dasharray: 6 4; }
+
+.box polygon { stroke: rgba(0, 0, 0, .18); stroke-width: .5; stroke-linejoin: round; }
+.tone-body .f-top { fill: var(--m-body-top); }
+.tone-body .f-left { fill: var(--m-body-l); }
+.tone-body .f-right { fill: var(--m-body-r); }
+.tone-dark .f-top { fill: var(--m-dark-top); }
+.tone-dark .f-left { fill: var(--m-dark-l); }
+.tone-dark .f-right { fill: var(--m-dark-r); }
+.tone-light .f-top { fill: var(--m-light-top); }
+.tone-light .f-left { fill: var(--m-light-l); }
+.tone-light .f-right { fill: var(--m-light-r); }
+.tone-wall .f-top { fill: var(--m-wall-top); }
+.tone-wall .f-left { fill: var(--m-wall-l); }
+.tone-wall .f-right { fill: var(--m-wall-r); }
+.tone-tire .f-top,
+.tone-tire .f-left,
+.tone-tire .f-right { fill: var(--m-tire); }
+.tone-material .f-top { fill: var(--i-material-top); }
+.tone-material .f-left { fill: var(--i-material-l); }
+.tone-material .f-right { fill: var(--i-material-r); }
+.tone-semi .f-top { fill: var(--i-semi-top); }
+.tone-semi .f-left { fill: var(--i-semi-l); }
+.tone-semi .f-right { fill: var(--i-semi-r); }
+.tone-product .f-top { fill: var(--i-product-top); }
+.tone-product .f-left { fill: var(--i-product-l); }
+.tone-product .f-right { fill: var(--i-product-r); }
+.tone-rework .f-top { fill: var(--i-rework-top); }
+.tone-rework .f-left { fill: var(--i-rework-l); }
+.tone-rework .f-right { fill: var(--i-rework-r); }
+.window { fill: var(--m-window); opacity: .85; }
+.server-led { fill: var(--m-led); }
+
+.flow { fill: none; stroke: var(--m-flow); stroke-width: 2; stroke-linejoin: round; }
+.flow-head { fill: var(--m-flow); stroke: none; }
+.flow.flow-material { stroke-dasharray: 5 4; stroke-width: 1.5; }
+
+.person-shadow { fill: rgba(0, 0, 0, .18); }
+.person-body,
+.person-head { stroke: var(--bg); stroke-width: .8; }
+.role-pm .person-body, .role-pm .person-head { fill: var(--r-pm); }
+.role-op .person-body, .role-op .person-head { fill: var(--r-op); }
+.role-lg .person-body, .role-lg .person-head { fill: var(--r-lg); }
+.role-qc .person-body, .role-qc .person-head { fill: var(--r-qc); }
+.terminal { fill: var(--m-dark-l); stroke: var(--bg); stroke-width: .8; }
+.terminal.is-lit { fill: var(--accent); stroke: var(--accent); animation: tour-terminal .45s ease-in-out infinite alternate; }
+
+/* 場面の強調 */
+.zone.is-station { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.6; }
+.zone.is-alert { fill: var(--r-ng-bg); stroke: var(--r-ng); stroke-width: 2; animation: tour-alert 1.2s ease-in-out infinite alternate; }
+.is-running { animation: tour-run .16s linear infinite alternate; }
+.is-receiving .server-led { fill: var(--accent); }
+
+/* 信号。太さはカメラの寄りによらず一定にする */
+.signal {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2;
+  stroke-dasharray: 5 6;
+  vector-effect: non-scaling-stroke;
+  animation: tour-signal .45s linear infinite;
+}
+.signal-dot { fill: var(--accent); }
+
+/* トレースの光 */
+.trace-glow, .trace-line { fill: none; stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 0; }
+.trace-glow { stroke-opacity: .22; }
+.trace-end { fill: var(--accent); }
+.trace-glow.is-drawing, .trace-line.is-drawing { animation: tour-trace .7s ease-out backwards; }
+.tour-ledger-mo td:first-child { font-weight: 600; }
+
+@keyframes tour-trace { from { stroke-dashoffset: 1; } }
+@keyframes tour-terminal { from { opacity: .55; } to { opacity: 1; } }
+@keyframes tour-alert { from { fill-opacity: .55; } to { fill-opacity: 1; } }
+@keyframes tour-run { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
+@keyframes tour-signal { to { stroke-dashoffset: -11; } }
+
+/* ラベルは tour.js が縮尺を打ち消すので、ここの文字の大きさがそのまま画面上の大きさになる */
+.label text { font-size: 12px; fill: var(--text); }
+.label rect { fill: var(--m-label-bg); stroke: var(--m-zone-line); stroke-width: .5; }
+.label-zone text { font-weight: 600; }
+.label-equipment text { font-size: 11px; fill: var(--text-muted); }
+.label-equipment rect { stroke: none; }
+.label-flow text { font-size: 11px; fill: var(--text-muted); }
+.label-flow rect { stroke: none; }
+.label-person text { font-size: 11px; font-weight: 600; }
+.label-person rect { stroke: none; }
+.label-person.role-pm text { fill: var(--r-pm); }
+.label-person.role-op text { fill: var(--r-op); }
+.label-person.role-lg text { fill: var(--r-lg); }
+.label-person.role-qc text { fill: var(--r-qc); }
+.label-pin text { font-size: 11px; font-weight: 600; }
+.label-stock text { font-size: 11px; font-weight: 700; }
+.label-stock rect { stroke: none; }
+.label-moving text { font-size: 11px; font-weight: 600; }
+.label-trace text { font-size: 11px; font-weight: 700; fill: var(--accent); }
+.label-trace rect { stroke: var(--accent); }
+.label-alert text { font-size: 11px; font-weight: 700; fill: var(--r-ng); }
+.label-alert rect { fill: var(--r-ng-bg); stroke: var(--r-ng); }
+.label.is-hidden { display: none; }
+/* スマホの全景は小さすぎてラベルが読めないので出さない（カメラを寄せて読む） */
+.is-overview .label { display: none; }
+
+/* ---------- 幅 1000px 未満は縦積み ---------- */
+@media (max-width: 999.98px) {
+  .tour {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    min-height: 0;
+    padding: 8px 16px 16px;
+  }
+  .tour-model { aspect-ratio: 4 / 3; flex: none; max-height: 70vh; width: 100%; }
+  .tour-band { display: block; padding: 8px 12px; }
+  .tour-side { overflow: visible; }
+  .tour-ledger { grid-template-columns: minmax(0, 1fr); }
+  .tour-ledger-scroll { overflow: visible; }
+  .tour-ledger-toggle {
+    display: block;
+    font: inherit;
+    font-size: 13px;
+    padding: 4px 12px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--bg-alt);
+    color: var(--text);
+    cursor: pointer;
+    justify-self: start;
+  }
+  .tour-ledger.is-collapsed .tour-ledger-col { display: none; }
+  .tour-rail { flex-basis: 100%; }
+  /* 下端は異常のラベルが来るので、狭い画面では上端に置く */
+  .tour-legend { top: 6px; bottom: auto; font-size: 10px; gap: 0 8px; }
+}
+
+/* スマホ幅では場面の列が1列に収まらないので折り返す。押せる範囲は 24px のまま */
+@media (max-width: 439.98px) {
+  .tour-rail { flex-wrap: wrap; justify-content: flex-start; background: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tour-page * { animation: none !important; transition: none !important; }
+}
diff --git a/docs/assets/tour/tour.js b/docs/assets/tour/tour.js
new file mode 100644
index 0000000..513680e
--- /dev/null
+++ b/docs/assets/tour/tour.js
@@ -0,0 +1,1405 @@
+// 工場模型の等角描画とカメラ（docs-dev/FactoryTour.md TOUR-01）
+// 配置は scenes.js の TOUR_DATA に持ち、ここには描き方だけを書く
+(function () {
+  'use strict';
+
+  var data = window.TOUR_DATA;
+  var svg = document.getElementById('tour-svg');
+  var NS = 'http://www.w3.org/2000/svg';
+
+  var UNIT = 24;                     // 床の1単位の長さ（SVG の座標）
+  var COS30 = Math.cos(Math.PI / 6);
+  var NARROW = '(max-width: 999.98px)';
+  var LABEL_PAD = 34;                // カメラの余白。持ち場の上に出るラベルの分
+  var MIN_VIEW_W = 300;              // 寄りすぎて持ち場の外が分からなくなるのを防ぐ
+  var MIN_LABEL_SCALE = 0.5;         // これより小さい全景ではラベルが重なる
+  var CROWDED_PILES = 3;             // 同じ置場にこれ以上の物が並ぶと、数量のラベルが混み合う
+  var MIN_CROWDED_SCALE = 0.65;      // 混み合う置場の数量を出す最小の縮尺
+
+  // 等角投影：床の (x, y) と高さ z を SVG の座標へ
+  function project(x, y, z) {
+    return [(x - y) * COS30 * UNIT, (x + y) * 0.5 * UNIT - (z || 0) * UNIT];
+  }
+
+  function el(name, attrs, parent) {
+    var node = document.createElementNS(NS, name);
+    for (var key in attrs) node.setAttribute(key, attrs[key]);
+    if (parent) parent.appendChild(node);
+    return node;
+  }
+
+  function points(list) {
+    return list.map(function (p) { return p[0].toFixed(1) + ',' + p[1].toFixed(1); }).join(' ');
+  }
+
+  // 床の上の四角形
+  function floorRect(parent, x, y, w, d, cls, z) {
+    return el('polygon', {
+      points: points([project(x, y, z), project(x + w, y, z), project(x + w, y + d, z), project(x, y + d, z)]),
+      class: cls
+    }, parent);
+  }
+
+  // 箱：見える3面（上・左手前・右手前）を描く。tone は CSS の面の濃さ
+  function box(parent, x, y, z, w, d, h, tone) {
+    var top = z + h;
+    var g = el('g', { class: 'box ' + (tone || 'tone-body') }, parent);
+    el('polygon', { class: 'f-left', points: points([project(x, y + d, z), project(x + w, y + d, z), project(x + w, y + d, top), project(x, y + d, top)]) }, g);
+    el('polygon', { class: 'f-right', points: points([project(x + w, y, z), project(x + w, y + d, z), project(x + w, y + d, top), project(x + w, y, top)]) }, g);
+    el('polygon', { class: 'f-top', points: points([project(x, y, top), project(x + w, y, top), project(x + w, y + d, top), project(x, y + d, top)]) }, g);
+    return g;
+  }
+
+  // 設備と什器の形。座標は左奥の角からの相対で、奥から手前へ順に描く
+  var SHAPES = {
+    machining: function (g, x, y) {
+      box(g, x, y, 0, 2, 2, 1.7);
+      box(g, x + 0.5, y + 0.5, 1.7, 1, 1, 0.5, 'tone-dark');
+      el('polygon', { class: 'window', points: points([project(x + 0.35, y + 2, 0.55), project(x + 1.65, y + 2, 0.55), project(x + 1.65, y + 2, 1.45), project(x + 0.35, y + 2, 1.45)]) }, g);
+      box(g, x + 2, y + 1.3, 0.5, 0.25, 0.5, 0.8, 'tone-dark');
+    },
+    bench: function (g, x, y) {
+      box(g, x, y, 0, 0.2, 0.2, 0.75, 'tone-dark');
+      box(g, x + 1.7, y, 0, 0.2, 0.2, 0.75, 'tone-dark');
+      box(g, x, y + 1.1, 0, 0.2, 0.2, 0.75, 'tone-dark');
+      box(g, x + 1.7, y + 1.1, 0, 0.2, 0.2, 0.75, 'tone-dark');
+      box(g, x, y, 0.75, 1.9, 1.3, 0.13);
+      box(g, x + 0.65, y + 0.35, 0.88, 0.6, 0.6, 0.35, 'tone-dark');
+    },
+    gantry: function (g, x, y) {
+      box(g, x, y, 0, 1.9, 1.6, 0.4);
+      box(g, x + 0.1, y + 0.55, 0.4, 0.2, 0.3, 1.1, 'tone-dark');
+      box(g, x + 1.6, y + 0.55, 0.4, 0.2, 0.3, 1.1, 'tone-dark');
+      box(g, x + 0.1, y + 0.55, 1.5, 1.7, 0.3, 0.22);
+      box(g, x + 0.85, y + 0.6, 0.85, 0.2, 0.2, 0.65, 'tone-dark');
+    },
+    packer: function (g, x, y) {
+      box(g, x, y, 0, 1.9, 1.4, 0.75);
+      box(g, x + 0.2, y + 0.2, 0.75, 1.5, 1, 0.25, 'tone-dark');
+      box(g, x + 0.3, y + 1.4, 0.28, 1.3, 0.8, 0.12, 'tone-light');
+    },
+    rack: function (g, x, y, zone) {
+      var length = zone.d - 1.3;
+      box(g, x, y, 0, 0.8, length, 0.12, 'tone-light');
+      box(g, x, y, 0.65, 0.8, length, 0.1, 'tone-light');
+      box(g, x, y, 1.3, 0.8, length, 0.1, 'tone-light');
+      box(g, x + 0.75, y, 0, 0.05, 0.05, 1.4, 'tone-dark');
+      box(g, x + 0.75, y + length - 0.05, 0, 0.05, 0.05, 1.4, 'tone-dark');
+    },
+    desk: function (g, x, y) {
+      box(g, x, y, 0, 2.6, 1, 0.65);
+      box(g, x + 0.3, y + 0.15, 0.65, 0.7, 0.08, 0.45, 'tone-dark');
+      box(g, x + 1.5, y + 0.15, 0.65, 0.7, 0.08, 0.45, 'tone-dark');
+    },
+    server: function (g, x, y) {
+      box(g, x, y, 0, 1.4, 1.4, 2.2, 'tone-dark');
+      for (var i = 0; i < 4; i++) {
+        var z = 0.35 + i * 0.45;
+        el('polygon', { class: 'server-led', points: points([project(x + 0.2, y + 1.4, z), project(x + 1.2, y + 1.4, z), project(x + 1.2, y + 1.4, z + 0.12), project(x + 0.2, y + 1.4, z + 0.12)]) }, g);
+      }
+    },
+    plant: function (g, x, y) {
+      box(g, x, y, 0, 2.9, 2.6, 1.3);
+      box(g, x + 0.4, y + 0.4, 1.3, 0.5, 0.5, 1, 'tone-dark');
+    },
+    truck: function (g, x, y) {
+      box(g, x, y + 0.1, 0.25, 3, 1.7, 0.1, 'tone-dark');
+      box(g, x + 0.1, y, 0.35, 2.1, 1.9, 1.3, 'tone-light');
+      box(g, x + 2.25, y + 0.1, 0.35, 0.85, 1.7, 0.95);
+      el('polygon', { class: 'window', points: points([project(x + 2.5, y + 1.8, 0.8), project(x + 3.1, y + 1.8, 0.8), project(x + 3.1, y + 1.8, 1.2), project(x + 2.5, y + 1.8, 1.2)]) }, g);
+      box(g, x + 0.35, y + 1.7, 0, 0.5, 0.2, 0.25, 'tone-tire');
+      box(g, x + 2.4, y + 1.7, 0, 0.5, 0.2, 0.25, 'tone-tire');
+    }
+  };
+
+  var FOOTPRINT = { machining: [2.3, 2], bench: [1.9, 1.3], gantry: [1.9, 1.6], packer: [1.9, 2.2], rack: [0.8, 2], desk: [2.6, 1], server: [1.4, 1.4], plant: [2.9, 2.6], truck: [3.1, 1.9] };
+
+  var zoneByCode = {};
+  data.zones.forEach(function (z) { zoneByCode[z.code] = z; });
+
+  var layers = {};     // floor → flows → things → stock → people → moving → signal → labels の順に重ねる
+  var labels = [];     // 画面上の大きさを一定に保つラベル（カメラが変わると縮尺を掛け直す）
+  var pin;             // MES サーバーが画面の外に出たときの目印
+  var camera = { rect: null, codes: null, k: 1 };
+  var labelMode = 'part'; // ラベルの出し方。part は今の場面に関わるものだけ、all はすべて
+  var zonePolygons = {};
+  var people = {};     // user → 人形の要素、持ち場、今の床の座標
+
+  function drawFloor() {
+    var f = data.floor;
+    var thick = 0.35;
+    var bx = f.x, by = f.y, w = f.w, d = f.d;
+    el('polygon', { class: 'slab-side-l', points: points([project(bx, by + d), project(bx + w, by + d), project(bx + w, by + d, -thick), project(bx, by + d, -thick)]) }, layers.floor);
+    el('polygon', { class: 'slab-side-r', points: points([project(bx + w, by), project(bx + w, by + d), project(bx + w, by + d, -thick), project(bx + w, by, -thick)]) }, layers.floor);
+    floorRect(layers.floor, bx, by, w, d, 'slab');
+
+    // 奥の壁。左の壁はトラックの出入口の分だけ切る
+    box(layers.floor, bx, by - 0.15, 0, w, 0.15, 1.1, 'tone-wall');
+    [[by, 3.5 - by], [8.5, 4], [17, by + d - 17]].forEach(function (seg) {
+      box(layers.floor, bx - 0.15, seg[0], 0, 0.15, seg[1], 1.1, 'tone-wall');
+    });
+
+    // 工場の外の構内路と、外注先の土台
+    var out = zoneByCode.OUTSIDE;
+    floorRect(layers.floor, f.x + f.w, out.y - 0.3, out.x + out.w + 0.3 - f.x - f.w, 15.7 - out.y + 0.3, 'road');
+    floorRect(layers.floor, out.x - 0.3, out.y - 0.3, out.w + 0.6, out.d + 0.6, 'slab');
+
+    data.zones.forEach(function (z) {
+      zonePolygons[z.code] = floorRect(layers.floor, z.x, z.y, z.w, z.d, 'zone zone-' + z.kind);
+    });
+  }
+
+  function drawFlows() {
+    data.flows.forEach(function (flow) {
+      var pts = flow.path.map(function (p) { return project(p[0], p[1]); });
+      el('polyline', { class: 'flow' + (flow.material ? ' flow-material' : ''), points: points(pts) }, layers.flows);
+      var a = pts[pts.length - 2], b = pts[pts.length - 1];
+      var angle = Math.atan2(b[1] - a[1], b[0] - a[0]);
+      var size = 7;
+      el('polygon', {
+        class: 'flow-head' + (flow.material ? ' flow-material' : ''),
+        points: points([
+          b,
+          [b[0] - size * Math.cos(angle - 0.5), b[1] - size * Math.sin(angle - 0.5)],
+          [b[0] - size * Math.cos(angle + 0.5), b[1] - size * Math.sin(angle + 0.5)]
+        ])
+      }, layers.flows);
+    });
+  }
+
+  // 建物の中の物は、1台ごとに奥から手前の順で描く（区画が重ならないのでこの粒度で足りる）
+  function drawThings() {
+    var things = [];
+    data.equipments.concat(data.fixtures, data.trucks).forEach(function (t) {
+      things.push({ x: t.x, y: t.y, draw: function (g) { SHAPES[t.shape](g, t.x, t.y, zoneByCode[t.zone]); }, code: t.code, zone: t.zone, shape: t.shape, label: t.label });
+    });
+    things.sort(function (a, b) { return (a.x + a.y) - (b.x + b.y); });
+    things.forEach(function (t) {
+      var g = el('g', { 'data-zone': t.zone }, layers.things);
+      t.draw(g);
+      if (t.code) {
+        g.setAttribute('data-code', t.code);
+        var fp = FOOTPRINT[t.shape];
+        var left = t.label === 'left';
+        var at = project(left ? t.x : t.x + fp[0], t.y + fp[1], 0);
+        addLabel(t.code, at[0] + (left ? 0 : 14), at[1] + 11, 'label-equipment', t.zone).crowded = true;
+      }
+    });
+  }
+
+  // 人は場面に応じて持ち場を移るので、設備より手前の層に描く
+  function drawPeople() {
+    data.people.forEach(function (p) {
+      var zone = zoneByCode[p.at];
+      var home = [p.x === undefined ? zone.spot[0] : p.x, p.y === undefined ? zone.spot[1] : p.y];
+      var g = el('g', {}, layers.people);
+      drawPerson(g, p, home[0], home[1]);
+      var foot = project(home[0], home[1], 0);
+      addLabel(p.user, foot[0], foot[1] + 13, 'label-person role-' + p.role, p.at);
+      people[p.user] = {
+        role: p.role,
+        g: g,
+        home: home,
+        homeZone: p.at,
+        pos: home,
+        label: labels[labels.length - 1],
+        terminal: g.querySelector('.terminal')
+      };
+    });
+  }
+
+  // 人を床の座標へ置く。ラベルも一緒に動かす
+  function setPersonPos(user, pos, zone) {
+    var man = people[user];
+    var from = project(man.home[0], man.home[1], 0);
+    var to = project(pos[0], pos[1], 0);
+    man.pos = pos;
+    man.g.setAttribute('transform', 'translate(' + (to[0] - from[0]).toFixed(1) + ' ' + (to[1] - from[1]).toFixed(1) + ')');
+    man.label.x = to[0];
+    man.label.y = to[1] + 13;
+    if (zone) man.label.g.setAttribute('data-zone', zone);
+    if (camera.rect) placeLabel(man.label);
+  }
+
+  function personSpot(user, zone) {
+    var man = people[user];
+    return zone === man.homeZone ? man.home : zoneByCode[zone].spot;
+  }
+
+  // 人は高さ方向に立つ簡単な人形。横に端末（入力するときに光る）を持つ
+  function drawPerson(g, p, x, y) {
+    var person = el('g', { class: 'person role-' + p.role, 'data-user': p.user }, g);
+    var foot = project(x, y, 0);
+    el('ellipse', { class: 'person-shadow', cx: foot[0], cy: foot[1], rx: 9, ry: 4.5 }, person);
+    el('path', {
+      class: 'person-body',
+      d: 'M' + (foot[0] - 7) + ' ' + foot[1] + ' l1 -17 q0 -5 6 -5 q6 0 6 5 l1 17 q-7 3.5 -14 0 z'
+    }, person);
+    el('circle', { class: 'person-head', cx: foot[0], cy: foot[1] - 27, r: 5.5 }, person);
+    var tx = foot[0] + 10, ty = foot[1] - 19;
+    el('polygon', {
+      class: 'terminal',
+      'data-terminal': p.user,
+      points: points([[tx, ty], [tx + 9, ty - 4], [tx + 9, ty + 7], [tx, ty + 11]])
+    }, person);
+  }
+
+  function addLabel(text, x, y, cls, zone, dynamic) {
+    var g = el('g', { class: 'label ' + cls, 'data-zone': zone }, layers.labels);
+    var bg = el('rect', { rx: 4, ry: 4 }, g);
+    var t = el('text', { 'text-anchor': 'middle', 'dominant-baseline': 'central' }, g);
+    t.textContent = text;
+    var label = { g: g, x: x, y: y, bg: bg, text: t, dynamic: !!dynamic };
+    labels.push(label);
+    return label;
+  }
+
+  function zoneLabels() {
+    data.zones.forEach(function (z) {
+      var apex = z.label === 'center' ? project(z.x + z.w / 2, z.y + z.d / 2, 0)
+        : z.labelAt ? project(z.labelAt[0], z.labelAt[1], 0)
+        : project(z.x, z.y, 0);
+      var title = /^[A-Z]+-/.test(z.code) && z.code !== 'YARD-IN' ? (z.code + ' ' + z.name).trim() : z.name;
+      var label = addLabel(title, apex[0], apex[1] - (z.label === 'center' ? 0 : 12), 'label-zone', z.code);
+      if (z.labelNarrow) {
+        var at = project(z.labelNarrow[0], z.labelNarrow[1], 0);
+        label.narrowAt = [at[0], at[1] - 12];
+      }
+    });
+    data.flows.forEach(function (flow) {
+      if (!flow.label) return;
+      var p = flow.path[1];
+      var at = project(p[0] + 5, p[1], 0);
+      addLabel(flow.label, at[0], at[1] - 11, 'label-flow', 'FLOW');
+    });
+  }
+
+  function measureLabels() {
+    labels.forEach(measureLabel);
+  }
+
+  // ラベルの地の大きさを文字に合わせる。全景で隠れている間は測れないので、文字数から見積もる
+  function measureLabel(l) {
+    var box = l.text.getBBox();
+    var width = box.width || l.text.textContent.length * 7;
+    var height = box.height || 14;
+    l.halfWidth = width / 2 + 5;
+    el2attrs(l.bg, { x: -width / 2 - 5, y: -height / 2 - 2, width: width + 10, height: height + 4 });
+  }
+
+  function placeLabel(l) {
+    var at = l.narrowAt && isNarrow() ? l.narrowAt : [l.x, l.y];
+    var x = at[0] + clampShift(at[0], l.halfWidth * camera.k, camera.rect);
+    l.g.setAttribute('transform', 'translate(' + x.toFixed(1) + ' ' + at[1].toFixed(1) + ') scale(' + camera.k.toFixed(3) + ')');
+  }
+
+  function el2attrs(node, attrs) {
+    for (var key in attrs) node.setAttribute(key, attrs[key]);
+  }
+
+  // 持ち場の画面上の範囲（SVG 座標）
+  function zoneBounds(code) {
+    var z = zoneByCode[code];
+    if (!z) return null;
+    var extra = code === 'MES' ? 3 : 2.3;  // 背の高い物が上に伸びる分
+    var corners = [project(z.x, z.y, extra), project(z.x + z.w, z.y, extra), project(z.x + z.w, z.y + z.d), project(z.x, z.y + z.d)];
+    var xs = corners.map(function (c) { return c[0]; });
+    var ys = corners.map(function (c) { return c[1]; });
+    return { x0: Math.min.apply(null, xs), y0: Math.min.apply(null, ys), x1: Math.max.apply(null, xs), y1: Math.max.apply(null, ys) };
+  }
+
+  function allBounds() {
+    var f = data.floor;
+    var out = zoneByCode.OUTSIDE;
+    return {
+      x0: project(f.x, f.y + f.d)[0] - 12,
+      y0: project(f.x, f.y, 1.1)[1] - 12,
+      x1: project(out.x + out.w, out.y)[0] + 12,
+      y1: Math.max(project(f.x + f.w, f.y + f.d)[1], project(out.x + out.w, 15.7)[1]) + 14
+    };
+  }
+
+  // 範囲を枠の縦横比に広げて viewBox にする。これで viewBox ＝ 見えている範囲になる
+  function fitRect(bounds) {
+    var rect = svg.getBoundingClientRect();
+    var aspect = rect.width > 0 && rect.height > 0 ? rect.width / rect.height : 1.7;
+    var w = Math.max(bounds.x1 - bounds.x0, MIN_VIEW_W);
+    var h = bounds.y1 - bounds.y0;
+    if (w / h < aspect) w = h * aspect; else h = w / aspect;
+    var cx = (bounds.x0 + bounds.x1) / 2, cy = (bounds.y0 + bounds.y1) / 2;
+    return { x: cx - w / 2, y: cy - h / 2, w: w, h: h };
+  }
+
+  function isNarrow() { return window.matchMedia(NARROW).matches; }
+
+  // カメラの適用。ラベルは文字の大きさが画面上で一定になるよう縮尺を打ち消す
+  function applyCamera() {
+    var bounds;
+    if (camera.codes) {
+      bounds = null;
+      camera.codes.forEach(function (code) {
+        var b = zoneBounds(code);
+        if (!b) return;
+        bounds = bounds
+          ? { x0: Math.min(bounds.x0, b.x0), y0: Math.min(bounds.y0, b.y0), x1: Math.max(bounds.x1, b.x1), y1: Math.max(bounds.y1, b.y1) }
+          : b;
+      });
+      bounds.x0 -= LABEL_PAD; bounds.x1 += LABEL_PAD; bounds.y0 -= LABEL_PAD; bounds.y1 += LABEL_PAD;
+    } else {
+      bounds = allBounds();
+    }
+    var view = fitRect(bounds);
+    camera.rect = view;
+    svg.setAttribute('viewBox', [view.x, view.y, view.w, view.h].map(function (n) { return n.toFixed(1); }).join(' '));
+
+    var box = svg.getBoundingClientRect();
+    var scale = box.width > 0 ? box.width / view.w : 1;
+    var k = 1 / scale;
+    camera.k = k;
+    labels.forEach(placeLabel);
+    updateLabelVisibility(scale);
+    updatePin(view, k);
+  }
+
+  // 端で切れかけたラベルを枠の中へ押し戻す量。完全に外のものは動かさない
+  function clampShift(center, half, view) {
+    var over = center + half - (view.x + view.w);
+    var under = view.x - (center - half);
+    if (over > 0 && over < half * 2) return -over;
+    if (under > 0 && under < half * 2) return under;
+    return 0;
+  }
+
+  // 狭い画面では、今の持ち場に関わるラベルと MES サーバーだけを出す。縮尺が小さい全景では読めないので出さない（CSS の is-overview）
+  function updateLabelVisibility(scale) {
+    var narrow = isNarrow();
+    svg.classList.toggle('is-overview', !camera.codes && scale < MIN_LABEL_SCALE);
+    var scene = current >= 0 ? scenes[current] : null;
+    labels.forEach(function (l) {
+      var hide = false;
+      if (labelMode === 'part') {
+        hide = !isRelevantLabel(l, scene);
+        // 広い範囲を映すと、設備のコードと棚に並ぶ物の数量は重なって読めない（変わった数は変化の帯に出ている）
+        if (narrow && l.crowded && scale < MIN_CROWDED_SCALE) hide = true;
+      }
+      l.g.classList.toggle('is-hidden', hide);
+    });
+  }
+
+  // 部分表示で出すラベル。今の作業とその前後の持ち場、担当者、動かす設備、異常、MES サーバーだけ
+  // 開始前は持ち場の名前だけを出す
+  function isRelevantLabel(l, scene) {
+    var classes = l.g.classList;
+    var zone = l.g.getAttribute('data-zone');
+    if (zone === 'MES') return true;
+    if (!scene) return classes.contains('label-zone');
+    if (classes.contains('label-alert') || classes.contains('label-trace')) return true;
+    if (classes.contains('label-flow')) return false;
+    if (classes.contains('label-equipment')) return l.text.textContent === scene.equipment;
+    if (classes.contains('label-person')) {
+      return (scene.actors || []).some(function (a) { return a.user === l.text.textContent; });
+    }
+    var codes = sceneCodes(scene).concat(scene.around || []);
+    return codes.indexOf(zone) >= 0 || isChildOf(zone, codes);
+  }
+
+  function isChildOf(code, codes) {
+    var z = zoneByCode[code];
+    return !!(z && z.parent && codes.indexOf(z.parent) >= 0);
+  }
+
+  // MES サーバーが画面の外に出たら、画面の右上に固定の目印を出す（持ち場のラベルと重ならないように）
+  function updatePin(view, k) {
+    var b = zoneBounds('MES');
+    var cx = (b.x0 + b.x1) / 2, cy = (b.y0 + b.y1) / 2;
+    var inside = cx >= view.x && cx <= view.x + view.w && cy >= view.y && cy <= view.y + view.h;
+    pin.g.classList.toggle('is-hidden', inside);
+    if (inside) return;
+    pin.x = view.x + view.w - 54 * k;
+    pin.y = view.y + 18 * k;
+    pin.g.setAttribute('transform', 'translate(' + pin.x.toFixed(1) + ' ' + pin.y.toFixed(1) + ') scale(' + k.toFixed(3) + ')');
+  }
+
+  function drawPin() {
+    var g = el('g', { class: 'label label-pin is-hidden' }, layers.labels);
+    var bg = el('rect', { rx: 4, ry: 4 }, g);
+    var t = el('text', { 'text-anchor': 'middle', 'dominant-baseline': 'central' }, g);
+    t.textContent = 'MES サーバー';
+    pin = { g: g, bg: bg, text: t, x: 0, y: 0 };
+  }
+
+  function measurePin() {
+    var box = pin.text.getBBox();
+    el2attrs(pin.bg, { x: box.x - 6, y: box.y - 3, width: box.width + 12, height: box.height + 6 });
+  }
+
+  // ---------- 場面の畳み込み（台帳も模型の物も、1場面目から足し直して作る） ----------
+
+  var scenes = data.scenes;
+  var lotByCode = {};
+  data.lots.forEach(function (l) { lotByCode[l.lot] = l; });
+
+  function round(n) { return Math.round(n * 1000) / 1000; }
+
+  function addStock(stock, zone, item, qty) {
+    var piles = stock[zone] = stock[zone] || [];
+    var pile = piles.filter(function (p) { return p.item === item; })[0];
+    if (!pile) piles.push(pile = { item: item, qty: 0 });
+    pile.qty = round(pile.qty + qty);
+    if (pile.qty <= 0) piles.splice(piles.indexOf(pile), 1);
+  }
+
+  function applyScene(state, scene) {
+    (scene.moves || []).forEach(function (m) {
+      if (m.from) addStock(state.stock, m.from, m.item, -m.qty);
+      if (m.to) addStock(state.stock, m.to, m.as || m.item, m.qty);
+    });
+    (scene.effects || []).forEach(function (e) {
+      if (e.lot && e.delta !== undefined) {
+        state.lots[e.lot] = round((state.lots[e.lot] || 0) + e.delta);
+        state.lotStatus[e.lot] = state.lotStatus[e.lot] || '正常';
+      }
+      if (e.lot && e.status) state.lotStatus[e.lot] = e.status;
+      if (e.mo) state.mos[e.mo] = e.status;
+      if (e.wo) state.orders[e.wo] = e.status;
+    });
+    (scene.actors || []).forEach(function (a) { state.people[a.user] = a.at; });
+  }
+
+  // count 番目までの場面を足した状態。stateAt(0) は開始前
+  function stateAt(count) {
+    var state = { stock: {}, lots: {}, lotStatus: {}, mos: {}, orders: {}, people: {} };
+    scenes.slice(0, count).forEach(function (s) { applyScene(state, s); });
+    return state;
+  }
+
+  function stateBefore(scene) { return stateAt(scenes.indexOf(scene)); }
+  function stateAfter(scene) { return stateAt(scenes.indexOf(scene) + 1); }
+
+  // ---------- 模型の物 ----------
+
+  var CUBES = [[0, 0], [0.36, 0], [0, 0.36], [0.36, 0.36]];
+
+  function pileSize(qty) { return qty >= 100 ? 4 : qty >= 30 ? 3 : qty >= 10 ? 2 : 1; }
+
+  // 床の原点に物の山を描く。置く場所は呼び出し側が translate で決める
+  function drawPile(parent, item, qty) {
+    var kind = data.items[item].kind;
+    var g = el('g', { class: 'pile' }, parent);
+    var title = el('title', {}, g);
+    title.textContent = data.items[item].name + ' ' + qty;
+    if (kind === 'product') {
+      box(g, -0.3, -0.25, 0, 0.6, 0.5, 0.42, 'tone-product');
+      return g;
+    }
+    CUBES.slice(0, pileSize(qty)).forEach(function (c) {
+      box(g, c[0] - 0.18, c[1] - 0.18, 0, 0.3, 0.3, 0.3, 'tone-' + kind);
+    });
+    return g;
+  }
+
+  function zoneCenter(code) {
+    var z = zoneByCode[code];
+    return [z.x + z.w / 2, z.y + z.d / 2, 0];
+  }
+
+  // 物の置き場所。slots の無い置場や消える物は、区画の中央か最初の slot へ向かう
+  function slotOf(state, zone, item) {
+    var slots = zoneByCode[zone].slots;
+    if (!slots) return zoneCenter(zone);
+    var index = (state.stock[zone] || []).map(function (p) { return p.item; }).indexOf(item);
+    var slot = slots[Math.max(index, 0)] || slots[slots.length - 1];
+    return [slot[0], slot[1], slot[2] || 0];
+  }
+
+  function clearDynamicLabels() {
+    labels = labels.filter(function (l) {
+      if (l.dynamic) l.g.parentNode.removeChild(l.g);
+      return !l.dynamic;
+    });
+  }
+
+  // 物の山と、異常のラベルを描き直す
+  function renderField(state, scene) {
+    clearDynamicLabels();
+    while (layers.stock.firstChild) layers.stock.removeChild(layers.stock.firstChild);
+    var added = [];
+    Object.keys(state.stock).forEach(function (zone) {
+      state.stock[zone].forEach(function (pile) {
+        var at = slotOf(state, zone, pile.item);
+        var p = project(at[0], at[1], at[2]);
+        var g = drawPile(layers.stock, pile.item, pile.qty);
+        g.setAttribute('transform', 'translate(' + p[0].toFixed(1) + ' ' + p[1].toFixed(1) + ')');
+        var label = addLabel(String(pile.qty), p[0], p[1] + 12, 'label-stock', zone, true);
+        label.crowded = state.stock[zone].length >= CROWDED_PILES;
+        added.push(label);
+      });
+    });
+    alertTags(scene).forEach(function (a) {
+      var z = zoneByCode[a.at];
+      var p = a.labelAt ? project(a.labelAt[0], a.labelAt[1], 0) : project(z.x + z.w, z.y + z.d, 0);
+      added.push(addLabel(a.text, p[0], p[1] + (a.labelAt ? 0 : 24), 'label-alert', a.at, true));
+    });
+    traceLinks(scene).forEach(function (link) {
+      var c = traceCurve(link);
+      var mid = link.labelAt ? project(link.labelAt[0], link.labelAt[1], 0) : [(c.a[0] + 2 * c.c[0] + c.b[0]) / 4, (c.a[1] + 2 * c.c[1] + c.b[1]) / 4];
+      added.push(addLabel(link.tag, mid[0], mid[1], 'label-trace', 'TRACE', true));
+    });
+    added.forEach(measureLabel);
+    applyCamera();
+  }
+
+  // 同じ持ち場の異常は1つのラベルにまとめる（「逸脱・停止」）
+  function alertTags(scene) {
+    var byZone = {};
+    ((scene && scene.alerts) || []).forEach(function (a) {
+      var entry = byZone[a.at] = byZone[a.at] || { at: a.at, tags: [], labelAt: null };
+      entry.tags.push(a.tag);
+      entry.labelAt = entry.labelAt || a.labelAt;
+    });
+    return Object.keys(byZone).map(function (at) {
+      return { at: at, text: byZone[at].tags.join('・'), labelAt: byZone[at].labelAt };
+    });
+  }
+
+  function renderPeople(state) {
+    Object.keys(people).forEach(function (user) {
+      var zone = state.people[user] || people[user].homeZone;
+      setPersonPos(user, personSpot(user, zone), zone);
+    });
+  }
+
+  function markZones(scene) {
+    Object.keys(zonePolygons).forEach(function (code) {
+      zonePolygons[code].classList.toggle('is-station', !!scene && scene.station === code);
+      zonePolygons[code].classList.toggle('is-alert', alertTags(scene).some(function (a) { return a.at === code; }));
+    });
+  }
+
+  // カメラは狭い画面だけ寄せる。範囲は station・actors・moves の置場をすべて含む
+  function sceneCodes(scene) {
+    var codes = [];
+    function add(code) { if (code && codes.indexOf(code) < 0) codes.push(code); }
+    add(scene.station);
+    (scene.actors || []).forEach(function (a) { add(a.at); });
+    (scene.moves || []).forEach(function (m) {
+      add(m.from); add(m.to); add(m.via);
+      (m.route || []).forEach(add);
+    });
+    return codes;
+  }
+
+  function setSceneCamera(scene) {
+    camera.codes = scene && isNarrow() && scene.camera !== 'all' ? sceneCodes(scene) : null;
+    applyCamera();
+  }
+
+  // ---------- 台帳 ----------
+
+  var ledger = { lots: {}, mos: {}, orders: {} };
+  var bandEl = document.querySelector('.tour-band');
+  var ledgerEl = document.querySelector('.tour-ledger');
+  var ledgerNote;
+
+  function cell(tr, text, cls) {
+    var td = document.createElement('td');
+    td.textContent = text;
+    if (cls) td.className = cls;
+    tr.appendChild(td);
+    return td;
+  }
+
+  function buildLedger() {
+    var lotBody = document.getElementById('tour-ledger-lots');
+    data.lots.forEach(function (l) {
+      var tr = document.createElement('tr');
+      cell(tr, l.lot);
+      cell(tr, l.name);
+      cell(tr, l.at);
+      ledger.lots[l.lot] = { tr: tr, value: cell(tr, '―', 'num'), status: cell(tr, '―') };
+      lotBody.appendChild(tr);
+    });
+    var statusHead = document.createElement('th');
+    statusHead.textContent = '状態';
+    lotBody.closest('table').tHead.rows[0].appendChild(statusHead);
+
+    var orderBody = document.getElementById('tour-ledger-orders');
+    var orderCol = orderBody.closest('.tour-ledger-col');
+    orderCol.querySelector('h2').textContent = '製造指図・作業指示の状態';
+    orderBody.closest('table').tHead.rows[0].cells[0].textContent = '指図・作業指示';
+    data.manufacturingOrders.forEach(function (mo) {
+      var tr = document.createElement('tr');
+      tr.className = 'tour-ledger-mo';
+      cell(tr, mo);
+      ledger.mos[mo] = { tr: tr, value: cell(tr, '―') };
+      orderBody.appendChild(tr);
+    });
+    data.orders.forEach(function (wo) {
+      var tr = document.createElement('tr');
+      cell(tr, wo);
+      ledger.orders[wo] = { tr: tr, value: cell(tr, '―') };
+      orderBody.appendChild(tr);
+    });
+    ledgerNote = document.createElement('p');
+    ledgerNote.className = 'text-note tour-ledger-note';
+    orderCol.appendChild(ledgerNote);
+
+    // 狭い画面では全行を畳む。変わった行は変化の帯に出ている
+    var toggle = document.createElement('button');
+    toggle.type = 'button';
+    toggle.className = 'tour-ledger-toggle';
+    toggle.textContent = 'すべて表示';
+    toggle.setAttribute('aria-expanded', 'false');
+    toggle.addEventListener('click', function () {
+      var collapsed = ledgerEl.classList.toggle('is-collapsed');
+      toggle.textContent = collapsed ? 'すべて表示' : '畳む';
+      toggle.setAttribute('aria-expanded', String(!collapsed));
+    });
+    ledgerEl.classList.add('is-collapsed');
+    ledgerEl.insertBefore(toggle, ledgerEl.firstChild);
+  }
+
+  function lotText(lot, qty) { return qty + ' ' + lotByCode[lot].unit; }
+
+  // その場面で変わった行。ロットの状態は、場面の中で一度なった状態（from）があればそこからの変化として見せる
+  function changesOf(before, after, scene) {
+    var list = [];
+    data.lots.forEach(function (l) {
+      var from = before.lots[l.lot], to = after.lots[l.lot];
+      if (from !== to) list.push({ row: ledger.lots[l.lot], text: l.lot + ' ' + l.name + '：' + (from === undefined ? '新規 ' + lotText(l.lot, to) : from + ' → ' + lotText(l.lot, to)) });
+      (scene.effects || []).forEach(function (e) {
+        if (e.lot === l.lot && e.status) {
+          list.push({ row: ledger.lots[l.lot], text: l.lot + ' ' + l.name + '：' + (e.from || before.lotStatus[l.lot]) + ' → ' + e.status });
+        }
+      });
+    });
+    data.manufacturingOrders.forEach(function (mo) {
+      var from = before.mos[mo], to = after.mos[mo];
+      if (from !== to) list.push({ row: ledger.mos[mo], text: mo + '：' + (from === undefined ? to : from + ' → ' + to) });
+    });
+    data.orders.forEach(function (wo) {
+      var from = before.orders[wo], to = after.orders[wo];
+      if (from !== to) list.push({ row: ledger.orders[wo], text: wo + '：' + (from === undefined ? to : from + ' → ' + to) });
+    });
+    return list;
+  }
+
+  function renderLedger(state, scene, changes, flash) {
+    data.lots.forEach(function (l) {
+      var row = ledger.lots[l.lot], qty = state.lots[l.lot];
+      row.value.textContent = qty === undefined ? '―' : lotText(l.lot, qty);
+      row.status.textContent = state.lotStatus[l.lot] || '―';
+      row.tr.classList.toggle('is-absent', qty === undefined);
+    });
+    data.manufacturingOrders.forEach(function (mo) {
+      var row = ledger.mos[mo], status = state.mos[mo];
+      row.value.textContent = status === undefined ? '―' : status;
+      row.tr.classList.toggle('is-absent', status === undefined);
+    });
+    data.orders.forEach(function (wo) {
+      var row = ledger.orders[wo], status = state.orders[wo];
+      row.value.textContent = status === undefined ? '―' : status;
+      row.tr.classList.toggle('is-absent', status === undefined);
+    });
+    var all = data.lots.map(function (l) { return ledger.lots[l.lot]; })
+      .concat(data.manufacturingOrders.map(function (mo) { return ledger.mos[mo]; }))
+      .concat(data.orders.map(function (wo) { return ledger.orders[wo]; }));
+    all.forEach(function (row) {
+      row.tr.classList.remove('is-changed', 'is-flash');
+    });
+    changes.forEach(function (c) {
+      c.row.tr.classList.add('is-changed');
+      if (flash) {
+        // 同じ行が続けて変わってもアニメーションをやり直す
+        void c.row.tr.getBoundingClientRect();
+        c.row.tr.classList.add('is-flash');
+      }
+    });
+    scrollToChanged(changes);
+    ledgerNote.textContent = (scene && scene.ledgerNote) || '';
+  }
+
+  // 変わった行を、欄の中で見える位置へ送る（ページ自体はスクロールさせない）
+  function scrollToChanged(changes) {
+    document.querySelectorAll('.tour-ledger-scroll').forEach(function (scroller) {
+      var first = changes.filter(function (c) { return scroller.contains(c.row.tr); })[0];
+      if (!first) return;
+      var head = scroller.querySelector('thead');
+      var top = first.row.tr.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+      scroller.scrollTop += top - head.getBoundingClientRect().height;
+    });
+  }
+
+  // 変化の帯。行は先に場所を取っておき、第4拍で見せる（途中でボタンの位置がずれないように）
+  function renderBand(scene, changes, revealed) {
+    bandEl.textContent = '';
+    if (!scene) {
+      var empty = document.createElement('p');
+      empty.className = 'text-note';
+      empty.textContent = 'この場面で変わった記録がここに出ます。';
+      bandEl.appendChild(empty);
+      return;
+    }
+    var heading = document.createElement('h2');
+    heading.textContent = 'この場面で変わった記録';
+    bandEl.appendChild(heading);
+    var list = document.createElement('ul');
+    list.className = revealed ? 'is-flash' : 'is-pending';
+    changeTexts(scene, changes).forEach(function (text) {
+      var li = document.createElement('li');
+      li.textContent = text;
+      list.appendChild(li);
+    });
+    bandEl.appendChild(list);
+    if (scene.ledgerNote) {
+      var note = document.createElement('p');
+      note.className = 'text-note';
+      note.textContent = scene.ledgerNote;
+      bandEl.appendChild(note);
+    }
+  }
+
+  // 台帳の行の変化と、台帳の行が変わらない記録の変化
+  function changeTexts(scene, changes) {
+    return changes.map(function (c) { return c.text; }).concat(scene.changeNotes || []);
+  }
+
+  function revealBand() {
+    var list = bandEl.querySelector('ul');
+    if (list) list.className = 'is-flash';
+  }
+
+  // ---------- トレース ----------
+
+  var traceDirection = 'back';
+
+  function traceLinks(scene) {
+    return scene && scene.trace ? scene.trace[traceDirection].links : [];
+  }
+
+  // 模型の上を弧でつなぐ（SVG の座標）
+  function traceCurve(link) {
+    var from = zoneCenter(link.from), to = zoneCenter(link.to);
+    var a = project(from[0], from[1], 0), b = project(to[0], to[1], 0);
+    return { a: a, b: b, c: [(a[0] + b[0]) / 2, Math.min(a[1], b[1]) - 46] };
+  }
+
+  // 光の線。線の長さを1にして、描かれていく動きを CSS で付ける（動きを減らす設定では最初から全部出る）
+  function renderTrace(scene, animate) {
+    clearLayer(layers.trace);
+    traceLinks(scene).forEach(function (link, i) {
+      var c = traceCurve(link);
+      var d = 'M' + c.a[0].toFixed(1) + ' ' + c.a[1].toFixed(1) + ' Q' + c.c[0].toFixed(1) + ' ' + c.c[1].toFixed(1) + ' ' + c.b[0].toFixed(1) + ' ' + c.b[1].toFixed(1);
+      ['trace-glow', 'trace-line'].forEach(function (cls, layer) {
+        var path = el('path', {
+          class: cls + (animate ? ' is-drawing' : ''),
+          d: d,
+          pathLength: 1,
+          'stroke-width': (layer ? 3 : 9) * camera.k
+        }, layers.trace);
+        path.style.animationDelay = (i * 180) + 'ms';
+      });
+      el('circle', { class: 'trace-end', cx: c.b[0], cy: c.b[1], r: 4.5 * camera.k }, layers.trace);
+    });
+  }
+
+  // ---------- 説明欄 ----------
+
+  var sideEl = document.getElementById('tour-side');
+  var liveEl = sideEl.querySelector('.tour-live');
+  var sideBody;
+  var sideStartHtml;
+
+  function node(tag, cls, text, parent) {
+    var n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (text !== undefined) n.textContent = text;
+    if (parent) parent.appendChild(n);
+    return n;
+  }
+
+  function buildSide() {
+    sideBody = document.createElement('div');
+    while (sideEl.firstChild && sideEl.firstChild !== liveEl) sideBody.appendChild(sideEl.firstChild);
+    sideEl.insertBefore(sideBody, liveEl);
+    sideStartHtml = sideBody.innerHTML;
+  }
+
+  function renderSide(scene, changes) {
+    sideEl.scrollTop = 0;
+    if (!scene) {
+      sideBody.innerHTML = sideStartHtml;
+      return;
+    }
+    sideBody.textContent = '';
+    node('p', 'tour-count', '場面 ' + scene.no + '／' + scenes.length, sideBody);
+    node('h1', '', scene.title, sideBody);
+    if (scene.when) node('p', 'tour-when', scene.when, sideBody);
+
+    node('h2', '', '現場で起きること', sideBody);
+    node('p', '', scene.floor, sideBody);
+    if (scene.alerts && scene.alerts.length) {
+      var alerts = node('ul', 'tour-alerts', undefined, sideBody);
+      scene.alerts.forEach(function (a) { node('li', '', a.text, alerts); });
+    }
+    if (scene.gauges) renderGauges(scene.gauges);
+    if (scene.trace) renderTraceChoice(scene);
+
+    var input = node('div', 'tour-section tour-section-input', undefined, sideBody);
+    node('h2', '', '誰がどの画面に', input);
+    scene.input.forEach(function (i) {
+      var p = node('p', '', undefined, input);
+      node('strong', 'tour-who role-' + people[i.who].role, i.who, p);
+      p.appendChild(document.createTextNode(' ' + i.menu));
+      node('p', 'text-note', i.record, input);
+    });
+
+    var effects = node('div', 'tour-section tour-section-effects', undefined, sideBody);
+    node('h2', '', 'MES で変わること', effects);
+    var list = node('ul', 'tour-effects', undefined, effects);
+    changeTexts(scene, changes).forEach(function (text) { node('li', '', text, list); });
+
+    if (scene.note) {
+      node('h2', '', '見どころ', sideBody);
+      node('p', '', scene.note, sideBody);
+    }
+    if (scene.detail) {
+      var link = node('a', 'tour-detail', '詳しく見る →', sideBody);
+      link.href = scene.detail.href;
+      if (scene.detail.image) {
+        var photo = node('a', 'tour-photo', undefined, sideBody);
+        photo.href = scene.detail.href;
+        var img = node('img', '', undefined, photo);
+        img.src = scene.detail.image;
+        img.alt = scene.detail.alt || '';
+        img.loading = 'lazy';
+      }
+    }
+  }
+
+  // 測定値と規格の帯。帯の左右に余白を取り、規格の外の値も置けるようにする
+  function renderGauges(gauges) {
+    var box = node('div', 'tour-gauges', undefined, sideBody);
+    gauges.forEach(function (g) {
+      node('p', 'tour-gauge-name', g.name + '　' + g.values.join('・') + ' ' + g.unit + '（規格 ' + g.min + '〜' + g.max + '）', box);
+      var bar = node('div', 'tour-gauge', undefined, box);
+      bar.setAttribute('aria-hidden', 'true');
+      node('i', 'tour-gauge-band', undefined, bar);
+      g.values.forEach(function (v) {
+        var dot = node('b', 'tour-gauge-dot', undefined, bar);
+        dot.style.left = (25 + (v - g.min) / (g.max - g.min) * 50) + '%';
+      });
+    });
+  }
+
+  function setGaugesPending(on) {
+    var box = sideBody.querySelector('.tour-gauges');
+    if (box) box.classList.toggle('is-pending', on);
+  }
+
+  // トレースの向きの切替と、たどったロットの一覧
+  function renderTraceChoice(scene) {
+    var group = node('div', 'tour-label-mode tour-trace-mode', undefined, sideBody);
+    group.setAttribute('role', 'group');
+    group.setAttribute('aria-label', 'たどる向き');
+    var list = node('ul', 'tour-effects', undefined, sideBody);
+    var choices = Object.keys(scene.trace).map(function (key) {
+      var button = node('button', '', scene.trace[key].name, group);
+      button.type = 'button';
+      button.addEventListener('click', function () {
+        traceDirection = key;
+        sync();
+        renderTrace(scene, true);
+        renderField(stateAfter(scene), scene);
+      });
+      return { key: key, button: button };
+    });
+    function sync() {
+      choices.forEach(function (c) { c.button.setAttribute('aria-pressed', String(c.key === traceDirection)); });
+      list.textContent = '';
+      traceLinks(scene).forEach(function (link) { node('li', '', link.text, list); });
+    }
+    sync();
+  }
+
+  function lightSection(name, on) {
+    var section = sideBody.querySelector('.tour-section-' + name);
+    if (section) section.classList.toggle('is-lit', on);
+  }
+
+  function announce(scene) {
+    var text = scene
+      ? '場面 ' + scene.no + '／' + scenes.length + ' ' + scene.title + '。' + scene.floor
+      : '工場の全景。受入から加工、外注、組立、検査、梱包を経て出荷までの配置';
+    svg.setAttribute('aria-label', text);
+    liveEl.textContent = scene ? text : '';
+  }
+
+  // ---------- 4拍の進行 ----------
+
+  var BEAT = { move: 1300, stagger: 130, input: 900, signal: 850, flash: 1000, dwell: 5000 };
+
+  var current = -1;      // scenes の位置。-1 は開始前
+  var playing = false;   // 自動再生
+  var running = false;   // 4拍の途中
+  var run = { token: 0, timers: [], dwell: null };
+
+  function reducedMotion() { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
+
+  function later(ms, fn) {
+    var token = run.token;
+    var id = setTimeout(function () { if (token === run.token) fn(); }, ms);
+    run.timers.push(id);
+  }
+
+  function tween(ms, delay, onFrame) {
+    var token = run.token;
+    var start = performance.now() + delay;
+    (function frame(now) {
+      if (token !== run.token) return;
+      var t = Math.max(0, Math.min(1, (now - start) / ms));
+      onFrame(t * t * (3 - 2 * t));
+      if (t < 1) requestAnimationFrame(frame);
+    })(performance.now());
+  }
+
+  function clearLayer(layer) { while (layer.firstChild) layer.removeChild(layer.firstChild); }
+
+  // 実行中の4拍と、読む時間の待ちをやめる。人の位置や物は呼び出し側が描き直す
+  function cancelRun() {
+    run.token++;
+    run.timers.forEach(clearTimeout);
+    run.timers = [];
+    clearTimeout(run.dwell);
+    running = false;
+    clearLayer(layers.moving);
+    clearLayer(layers.signal);
+    svg.classList.remove('is-receiving');
+    svg.querySelectorAll('.is-running').forEach(function (n) { n.classList.remove('is-running'); });
+    svg.querySelectorAll('.is-lit').forEach(function (n) { n.classList.remove('is-lit'); });
+  }
+
+  // 場面の最終状態をアニメーションなしで表示する
+  function renderFinal(scene) {
+    var after = stateAfter(scene);
+    var changes = changesOf(stateBefore(scene), after, scene);
+    traceDirection = 'back';
+    setSceneCamera(scene);
+    renderTrace(scene, false);
+    renderPeople(after);
+    markZones(scene);
+    renderField(after, scene);
+    renderLedger(after, scene, changes, false);
+    renderBand(scene, changes, true);
+    renderSide(scene, changes);
+    announce(scene);
+  }
+
+  function showStart() {
+    cancelRun();
+    current = -1;
+    var empty = stateAt(0);
+    setSceneCamera(null);
+    renderTrace(null, false);
+    renderPeople(empty);
+    markZones(null);
+    renderField(empty, null);
+    renderLedger(empty, null, [], false);
+    renderBand(null, [], false);
+    renderSide(null, []);
+    announce(null);
+    updateControls();
+  }
+
+  function showFinal(index) {
+    cancelRun();
+    current = index;
+    renderFinal(scenes[index]);
+    syncHash();
+    updateControls();
+  }
+
+  function playScene(index) {
+    cancelRun();
+    current = index;
+    syncHash();
+    var scene = scenes[index];
+    if (reducedMotion()) {
+      renderFinal(scene);
+      finishScene();
+      updateControls();
+      return;
+    }
+    running = true;
+    var before = stateBefore(scene);
+    var after = stateAfter(scene);
+    var changes = changesOf(before, after, scene);
+    traceDirection = 'back';
+    setSceneCamera(scene);
+    renderTrace(scene, true);
+    renderPeople(before);
+    markZones(scene);
+    renderLedger(before, scene, [], false);
+    renderBand(scene, changes, false);
+    renderSide(scene, changes);
+    setGaugesPending(true);
+    announce(scene);
+    updateControls();
+
+    // 第1拍：現場が動く
+    var lifted = stateBefore(scene);
+    (scene.moves || []).forEach(function (m) { if (m.from) addStock(lifted.stock, m.from, m.item, -m.qty); });
+    renderField(lifted, scene);
+    startEquipment(scene, true);
+    var moves = scene.moves || [];
+    moves.forEach(function (m, i) { flyPiece(m, before, after, i * BEAT.stagger); });
+    (scene.papers || []).forEach(function (zone, i) { flyPaper(scene.station, zone, i * BEAT.stagger); });
+    walkPeople(scene, before, after);
+    var moveTime = BEAT.move + Math.max(0, (scene.papers || []).length - 1) * BEAT.stagger;
+    moves.forEach(function (m, i) { moveTime = Math.max(moveTime, moveDuration(m) + i * BEAT.stagger); });
+
+    later(moveTime, function () {
+      clearLayer(layers.moving);
+      renderPeople(after);
+      renderField(after, scene);
+
+      // 第2拍：人が入力する
+      setTerminals(scene, true);
+      lightSection('input', true);
+      setGaugesPending(false);
+
+      later(BEAT.input, function () {
+        // 第3拍：信号が飛ぶ
+        startEquipment(scene, false);
+        lightSection('input', false);
+        sendSignals(scene);
+
+        later(BEAT.signal, function () {
+          // 第4拍：記録が変わる
+          clearLayer(layers.signal);
+          setTerminals(scene, false);
+          svg.classList.add('is-receiving');
+          renderLedger(after, scene, changes, true);
+          revealBand();
+          lightSection('effects', true);
+
+          later(BEAT.flash, function () {
+            svg.classList.remove('is-receiving');
+            lightSection('effects', false);
+            running = false;
+            finishScene();
+            updateControls();
+          });
+        });
+      });
+    });
+  }
+
+  // 4拍の後。自動再生なら、読む時間を置いて次へ進む。最後の場面で止まる
+  function finishScene() {
+    if (!playing) return;
+    if (current >= scenes.length - 1) {
+      playing = false;
+      return;
+    }
+    run.dwell = setTimeout(function () { playScene(current + 1); }, BEAT.dwell);
+  }
+
+  function startEquipment(scene, on) {
+    if (!scene.equipment) return;
+    var g = layers.things.querySelector('[data-code="' + scene.equipment + '"]');
+    if (g) g.classList.toggle('is-running', on);
+  }
+
+  // 途中の持ち場を通る物は、その分だけ時間をかける
+  function moveDuration(move) {
+    return BEAT.move * (1 + (move.route || []).length * 0.6);
+  }
+
+  // 作業指示の紙を事務所から持ち場へ飛ばす
+  function flyPaper(fromZone, toZone, delay) {
+    var a = zoneCenter(fromZone), b = zoneCenter(toZone);
+    var g = el('g', { class: 'moving-piece' }, layers.moving);
+    box(g, -0.3, -0.22, 0, 0.6, 0.44, 0.03, 'tone-light');
+    g.style.visibility = 'hidden';
+    tween(BEAT.move, delay, function (t) {
+      if (t > 0) g.style.visibility = '';
+      var p = project(a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, Math.sin(t * Math.PI) * 1.6);
+      g.setAttribute('transform', 'translate(' + p[0].toFixed(1) + ' ' + p[1].toFixed(1) + ')');
+    });
+  }
+
+  // 物を置場から置場へ飛ばす。as のある物は途中で変わらず、到着後の描き直しで変わる
+  function flyPiece(move, before, after, delay) {
+    var fromZone = move.from || move.via;
+    var toZone = move.to || move.via;
+    var a = move.from ? slotOf(before, fromZone, move.item) : zoneCenter(fromZone);
+    var b = move.to ? slotOf(after, toZone, move.as || move.item) : slotOf(after, toZone, '');
+    var g = el('g', { class: 'moving-piece' }, layers.moving);
+    drawPile(g, move.item, move.qty);
+    var tag = el('g', { class: 'label label-moving' }, g);
+    var bg = el('rect', { rx: 4, ry: 4 }, tag);
+    var text = el('text', { 'text-anchor': 'middle', 'dominant-baseline': 'central', y: 0 }, tag);
+    text.textContent = data.items[move.item].name + ' ' + move.qty;
+    var size = text.getBBox();
+    el2attrs(bg, { x: -size.width / 2 - 5, y: -size.height / 2 - 2, width: size.width + 10, height: size.height + 4 });
+    g.style.visibility = 'hidden';
+    var stops = [a].concat((move.route || []).map(zoneCenter), [b]);
+    tween(moveDuration(move), delay, function (t) {
+      if (t > 0) g.style.visibility = '';
+      var lift = Math.sin(t * Math.PI) * 0.7;
+      var at = (stops.length - 1) * t;
+      var i = Math.min(Math.floor(at), stops.length - 2);
+      var r = at - i, s = stops[i], e = stops[i + 1];
+      var p = project(s[0] + (e[0] - s[0]) * r, s[1] + (e[1] - s[1]) * r, s[2] + (e[2] - s[2]) * r + lift);
+      g.setAttribute('transform', 'translate(' + p[0].toFixed(1) + ' ' + p[1].toFixed(1) + ')');
+      tag.setAttribute('transform', 'translate(0 -16) scale(' + camera.k.toFixed(3) + ')');
+    });
+  }
+
+  function walkPeople(scene, before, after) {
+    (scene.actors || []).forEach(function (actor) {
+      var user = actor.user;
+      var from = personSpot(user, before.people[user] || people[user].homeZone);
+      var to = personSpot(user, after.people[user]);
+      if (from === to) return;
+      tween(BEAT.move, 0, function (t) {
+        setPersonPos(user, [from[0] + (to[0] - from[0]) * t, from[1] + (to[1] - from[1]) * t], actor.at);
+      });
+    });
+  }
+
+  function setTerminals(scene, on) {
+    (scene.input || []).forEach(function (i) {
+      people[i.who].terminal.classList.toggle('is-lit', on);
+    });
+  }
+
+  // 信号は人の端末から MES へ飛ばす（設備からの自動収集は無い。決定事項の表）
+  function sendSignals(scene) {
+    (scene.input || []).forEach(function (i) {
+      var man = people[i.who];
+      var foot = project(man.pos[0], man.pos[1], 0);
+      var a = [foot[0] + 14, foot[1] - 17];
+      var pinShown = !pin.g.classList.contains('is-hidden');
+      var server = zoneByCode.MES;
+      var b = pinShown ? [pin.x, pin.y] : project(server.x + 1.5, server.y + 1.3, 2.2);
+      var c = [(a[0] + b[0]) / 2, Math.min(a[1], b[1]) - 30 * camera.k];
+      var line = el('path', {
+        class: 'signal',
+        d: 'M' + a[0].toFixed(1) + ' ' + a[1].toFixed(1) + ' Q' + c[0].toFixed(1) + ' ' + c[1].toFixed(1) + ' ' + b[0].toFixed(1) + ' ' + b[1].toFixed(1)
+      }, layers.signal);
+      var dot = el('circle', { class: 'signal-dot', r: 4 * camera.k }, layers.signal);
+      var length = line.getTotalLength();
+      tween(BEAT.signal, 0, function (t) {
+        var p = line.getPointAtLength(length * t);
+        el2attrs(dot, { cx: p.x, cy: p.y });
+      });
+    });
+  }
+
+  // ---------- 操作 ----------
+
+  var buttons = {};
+
+  function buildControls() {
+    var list = document.querySelectorAll('.tour-buttons button');
+    buttons.prev = list[0];
+    buttons.play = list[1];
+    buttons.again = list[2];
+    buttons.next = list[3];
+    buttons.play.disabled = false;
+    buttons.prev.addEventListener('click', goPrev);
+    buttons.play.addEventListener('click', togglePlay);
+    buttons.again.addEventListener('click', function () {
+      if (current >= 0) playScene(current);
+    });
+    buttons.next.addEventListener('click', goNext);
+
+    var rail = document.getElementById('tour-rail');
+    scenes.forEach(function (scene, index) {
+      var li = document.createElement('li');
+      var button = document.createElement('button');
+      button.type = 'button';
+      button.title = '場面 ' + scene.no + ' ' + scene.title;
+      button.setAttribute('aria-label', button.title);
+      button.addEventListener('click', function () {
+        playing = false;
+        showFinal(index);
+      });
+      li.appendChild(button);
+      rail.appendChild(li);
+    });
+    legend();
+    buildLabelMode();
+    document.addEventListener('keydown', onKey);
+    window.addEventListener('hashchange', onHashChange);
+    window.matchMedia(NARROW).addEventListener('change', function () {
+      setSceneCamera(current >= 0 ? scenes[current] : null);
+    });
+  }
+
+  // ラベルの「部分／全部」の切替
+  function buildLabelMode() {
+    var group = document.createElement('div');
+    group.className = 'tour-label-mode';
+    group.setAttribute('role', 'group');
+    group.setAttribute('aria-label', '模型のラベルの表示');
+    node('span', 'tour-label-mode-name', 'ラベル', group);
+    var choices = [['part', '部分'], ['all', '全部']].map(function (c) {
+      var button = node('button', '', c[1], group);
+      button.type = 'button';
+      button.addEventListener('click', function () {
+        labelMode = c[0];
+        syncLabelMode();
+        applyCamera();
+      });
+      return { mode: c[0], button: button };
+    });
+    function syncLabelMode() {
+      choices.forEach(function (c) {
+        c.button.setAttribute('aria-pressed', String(c.mode === labelMode));
+      });
+    }
+    syncLabelMode();
+    var controls = document.querySelector('.tour-controls');
+    controls.insertBefore(group, document.getElementById('tour-rail'));
+  }
+
+  function legend() {
+    var box = node('div', 'tour-legend', undefined, document.querySelector('.tour-model'));
+    box.setAttribute('aria-hidden', 'true');
+    [['material', '部材'], ['semi', '半製品'], ['product', '製品'], ['rework', '再作業待ち']].forEach(function (k) {
+      var item = node('span', '', undefined, box);
+      node('i', 'swatch-' + k[0], undefined, item);
+      item.appendChild(document.createTextNode(k[1]));
+    });
+  }
+
+  function updateControls() {
+    buttons.prev.disabled = current <= 0;
+    buttons.again.disabled = current < 0;
+    buttons.next.disabled = current >= scenes.length - 1;
+    buttons.play.textContent = '';
+    node('span', '', playing ? '❚❚ ' : '▶ ', buttons.play).setAttribute('aria-hidden', 'true');
+    buttons.play.appendChild(document.createTextNode(playing ? '一時停止' : '再生'));
+    document.querySelectorAll('#tour-rail button').forEach(function (button, index) {
+      button.classList.toggle('is-past', index < current);
+      if (index === current) button.setAttribute('aria-current', 'step');
+      else button.removeAttribute('aria-current');
+    });
+  }
+
+  function goNext() {
+    if (current < scenes.length - 1) playScene(current + 1);
+  }
+
+  function goPrev() {
+    if (current <= 0) return;
+    playing = false;
+    showFinal(current - 1);
+  }
+
+  function togglePlay() {
+    if (playing) {
+      // 4拍の途中なら最後まで見せ、そこで止める
+      playing = false;
+      clearTimeout(run.dwell);
+      updateControls();
+      return;
+    }
+    playing = true;
+    if (current >= scenes.length - 1) { playScene(0); return; }
+    if (running) { updateControls(); return; }
+    playScene(current + 1);
+  }
+
+  function onKey(e) {
+    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+    if (e.key === 'ArrowRight') { goNext(); return; }
+    if (e.key === 'ArrowLeft') { goPrev(); return; }
+    if (e.key !== ' ') return;
+    // ボタン・リンクの上の Space は、その要素の操作だけにする
+    if (e.target.closest && e.target.closest('button, a, input, select, textarea, summary')) return;
+    e.preventDefault();
+    togglePlay();
+  }
+
+  // 手で移動したときは履歴に積み、自動再生中は積まない
+  function syncHash() {
+    var hash = '#' + scenes[current].id;
+    if (location.hash === hash) return;
+    if (playing) history.replaceState(null, '', hash);
+    else history.pushState(null, '', hash);
+  }
+
+  function indexOfHash() {
+    var id = location.hash.slice(1);
+    for (var i = 0; i < scenes.length; i++) if (scenes[i].id === id) return i;
+    return -1;
+  }
+
+  function onHashChange() {
+    playing = false;
+    var index = indexOfHash();
+    if (index < 0) showStart();
+    else showFinal(index);
+  }
+
+  function init() {
+    layers.floor = el('g', { class: 'layer-floor' }, svg);
+    layers.flows = el('g', { class: 'layer-flows' }, svg);
+    layers.things = el('g', { class: 'layer-things' }, svg);
+    layers.stock = el('g', { class: 'layer-stock' }, svg);
+    layers.people = el('g', { class: 'layer-people' }, svg);
+    layers.trace = el('g', { class: 'layer-trace' }, svg);
+    layers.moving = el('g', { class: 'layer-moving' }, svg);
+    layers.signal = el('g', { class: 'layer-signal' }, svg);
+    layers.labels = el('g', { class: 'layer-labels' }, svg);
+
+    drawFloor();
+    drawFlows();
+    drawThings();
+    drawPeople();
+    zoneLabels();
+    drawPin();
+    measureLabels();
+    measurePin();
+    applyCamera();
+    buildLedger();
+    buildSide();
+    buildControls();
+
+    var index = indexOfHash();
+    if (index < 0) showStart();
+    else showFinal(index);
+
+    if (window.ResizeObserver) new ResizeObserver(applyCamera).observe(svg);
+    else window.addEventListener('resize', applyCamera);
+  }
+
+  // カメラと状態の公開窓口。コンソールの確認から呼ぶ
+  // focus('WC-MC1') / focus(['WH-M01', 'WC-MC1']) / focus('all')
+  window.TourModel = {
+    focus: function (target) {
+      if (target === 'all' || target === undefined) {
+        camera.codes = null;
+      } else {
+        var codes = [].concat(target);
+        var unknown = codes.filter(function (code) { return !zoneByCode[code]; });
+        if (unknown.length) throw new Error('未知の持ち場: ' + unknown.join(', '));
+        camera.codes = codes;
+      }
+      applyCamera();
+      return svg.getAttribute('viewBox');
+    },
+    zones: function () { return Object.keys(zoneByCode); },
+    // 場面 id までを足し直した状態（省略すると今の場面）
+    state: function (id) {
+      var scene = id ? scenes.filter(function (s) { return s.id === id; })[0] : scenes[current];
+      return scene ? stateAfter(scene) : stateAt(0);
+    }
+  };
+
+  init();
+})();
diff --git a/docs/assets/walkthrough/inventory.webp b/docs/assets/walkthrough/inventory.webp
index fc70aa4..a592a9a 100644
Binary files a/docs/assets/walkthrough/inventory.webp and b/docs/assets/walkthrough/inventory.webp differ
diff --git a/docs/factory-tour.html b/docs/factory-tour.html
new file mode 100644
index 0000000..0e8ee83
--- /dev/null
+++ b/docs/factory-tour.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<!-- 工場模型で見る 製造から出荷まで（docs-dev/FactoryTour.md）。サイドバーのない全幅ページ -->
+<title>工場模型で見る 製造から出荷まで | Parallel Factory MES ユーザーガイド</title>
+<meta name="description" content="サンプルのギアポンプ製造を、動く工場模型と MES の記録の変化で見るページ。">
+<!-- ファビコンは build/icon.svg と同じ図柄（intro.html と同じ） -->
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(-5.5,-9.5) scale(1.06)'%3E%3Crect x='19' y='58' width='21' height='26' rx='6' fill='%23CDEBDF'/%3E%3Crect x='47' y='32' width='21' height='52' rx='6' fill='%238FD2BE'/%3E%3Crect x='75' y='46' width='21' height='38' rx='6' fill='%235CC8A8'/%3E%3Cg fill='none' stroke='%2318193F' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='50' width='21' height='26' rx='6'/%3E%3Crect x='40' y='24' width='21' height='52' rx='6'/%3E%3Crect x='68' y='38' width='21' height='38' rx='6'/%3E%3Cpath d='M13 88 H88'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E">
+<link rel="stylesheet" href="assets/style.css">
+<link rel="stylesheet" href="assets/tour/tour.css">
+</head>
+<body class="tour-page">
+<a class="skip" href="#tour-side">説明へスキップ</a>
+
+<header class="topbar">
+  <a class="brand" href="index.html">Parallel Factory <strong>MES</strong></a>
+  <span class="brand-sub">工場模型で見る 製造から出荷まで</span>
+  <a class="intro-link" href="index.html"><span aria-hidden="true">&larr; </span>ガイドへ戻る</a>
+</header>
+
+<noscript>
+  <p class="tour-noscript">このページの表示には JavaScript が必要です。<a href="walkthrough.html">画面写真つきの説明</a>をご覧ください。</p>
+</noscript>
+
+<main class="tour">
+  <section class="tour-model" aria-label="工場模型">
+    <svg id="tour-svg" role="img" aria-label="工場の全景。受入から加工、外注、組立、検査、梱包を経て出荷までの配置"></svg>
+  </section>
+
+  <section class="tour-band" aria-label="この場面で変わった記録">
+    <p class="text-note">この場面で変わった記録がここに出ます。</p>
+  </section>
+
+  <section class="tour-controls" aria-label="場面の操作">
+    <div class="tour-buttons">
+      <button type="button" disabled><span aria-hidden="true">◀ </span>前へ</button>
+      <button type="button" disabled><span aria-hidden="true">▶ </span>再生</button>
+      <button type="button" disabled>もう一度</button>
+      <button type="button" disabled>次へ<span aria-hidden="true"> ▶</span></button>
+    </div>
+    <ol class="tour-rail" id="tour-rail"></ol>
+  </section>
+
+  <aside class="tour-side" id="tour-side" aria-label="場面の説明">
+    <p class="tour-count">開始前</p>
+    <h1>工場模型で見る 製造から出荷まで</h1>
+    <p>現場で物が動くと、誰がどの画面に入力し、MES のどの記録が変わるか。サンプルのギアポンプ製造で順に見ていきます。</p>
+    <h2>現場で起きること</h2>
+    <p class="text-note">―</p>
+    <h2>誰がどの画面に</h2>
+    <p class="text-note">―</p>
+    <h2>MES で変わること</h2>
+    <p class="text-note">―</p>
+    <p aria-live="polite" class="tour-live"></p>
+  </aside>
+
+  <section class="tour-ledger" aria-label="MES の台帳">
+    <div class="tour-ledger-col">
+      <h2>在庫</h2>
+      <div class="tour-ledger-scroll">
+        <table>
+          <thead><tr><th>ロット</th><th>品目</th><th>置場</th><th class="num">数量</th></tr></thead>
+          <tbody id="tour-ledger-lots"></tbody>
+        </table>
+      </div>
+    </div>
+    <div class="tour-ledger-col">
+      <h2>作業指示の状態</h2>
+      <div class="tour-ledger-scroll">
+        <table>
+          <thead><tr><th>作業指示</th><th>状態</th></tr></thead>
+          <tbody id="tour-ledger-orders"></tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+</main>
+
+<script src="assets/tour/scenes.js"></script>
+<script src="assets/tour/tour.js"></script>
+</body>
+</html>
diff --git a/docs/index.md b/docs/index.md
index 3a8c7f2..766d7dc 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -21,6 +21,8 @@ next_title: 導入と初期設定
   <span><strong>まずは紹介ページで全体を見る &rarr;</strong><small>製造指図から出荷までの流れと主な画面を、画面写真でひととおり紹介しています。</small></span>
 </a>
 
+動きで流れをつかみたいときは、[工場模型で見る 製造から出荷まで](factory-tour.html) をご覧ください。現場で物が動くと MES のどの記録が変わるかを、15の場面で順に見られます。
+
 ## ガイドの読みかた
 
 <div class="cards">
diff --git a/docs/walkthrough.md b/docs/walkthrough.md
index ca28195..c51073f 100644
--- a/docs/walkthrough.md
+++ b/docs/walkthrough.md
@@ -9,6 +9,8 @@ next_url: masters.html
 next_title: マスタ管理
 ---
 
+先に動きで流れをつかみたいときは、[工場模型で見る 製造から出荷まで](factory-tour.html) をご覧ください。このページはその詳細編です。
+
 <div class="tip">
 <p><strong>このページの内容は、そのまま手元で再現できます。</strong>
 <code>samples/master-csv</code> と <code>samples/actual-csv</code> のCSVをそれぞれZIPにまとめ、
@@ -110,7 +112,7 @@ CSVに含まれない操作（完了承認・検査承認など）は、<a href=
 |---|---|---|---|
 | pm001 | 生産 管理太郎 | 生産管理 | 製造指図の登録・承認・工程展開、差立、完了承認 |
 | lg001 | 物流 四郎 | 物流 | 部材の受入、出荷指示と出荷 |
-| op001 / op003 | 加工 一郎 / 加工 三平 | 現場作業者 | ハウジングの機械加工（op003 は夜勤） |
+| op001 / op003 | 加工 一郎 / 加工 三平 | 現場作業者 | ハウジングの機械加工（op003 は夜勤）。op001 はギアポンプの最終検査の実績入力も担当 |
 | op002 | 組立 二郎 | 現場作業者 | ギアポンプの組立・梱包 |
 | qc001 | 品質 三子 | 品質管理・品質保証 | 検査、出荷判定 |
 
@@ -209,8 +211,8 @@ MBOMと工順の登録方法は、[マスタ管理の品目・MBOM・工順](mas
 - 鋳造品は **受入検査**（INS-03 目視）で外観を確かめています。検査の流れは [7章](#inspection) で説明します。
 
 <figure class="shot">
-<img src="assets/walkthrough/inventory.webp" width="1440" height="939" alt="在庫照会画面。部材ロット、半製品ロット SF2000-S001、製品ロット FG1000-S001 がロケーション別に並んでいる" loading="lazy">
-<figcaption>在庫照会（物流・在庫 → 在庫照会・操作）。この写真は出荷まで終えた後の状態で、鋳造品は50個から20個使って残り30個になっている</figcaption>
+<img src="assets/walkthrough/inventory.webp" width="1440" height="1154" alt="在庫照会画面。部材ロット、保全部品のロット、半製品ロット SF2000-S001、製品ロット FG1000-S001 の15件が、ロケーションと数量とともに並んでいる" loading="lazy">
+<figcaption>在庫照会（物流・在庫 → 在庫照会・操作）。この写真は実績CSVの <code>01</code>〜<code>15</code> だけを取り込み、出荷まで終えた時点の状態で、鋳造品 R3001-260901 は50個から20個使って残り30個になっている。同じ受入で入った保全部品や追加入荷のロットも並び、R3001-260902 は受入検査で不合格になったので「不良」と出る。ロット番号を指定しなかった MP-9002 は取り込んだ日で番号が決まる。サンプルを全部取り込むと、<code>16</code> 以降の在庫操作が加わるので数量が変わる（たとえば鋳造品は払出戻しで31個、ギアポンプは保管サンプルで3台）</figcaption>
 </figure>
 
 詳しくは [物流・在庫管理の受入](logistics.html#receiving) をご覧ください。
@@ -429,7 +431,7 @@ MBOMと工順の登録方法は、[マスタ管理の品目・MBOM・工順](mas
 <text class="m" x="700" y="232">明細の「出荷済」が5になり、指示は完了</text>
 </svg>
 </div>
-<figcaption>図8　出荷の4つの手順。判定が「保留」や未承認のままだと、④で止まる</figcaption>
+<figcaption>図8　出荷の4つの手順。判定が「保留」や未承認のままだと、④で止まる。「9台 → 4台」は出荷を実行した時点の数量で、サンプルを全部取り込むと、後の保管サンプルで3台になる</figcaption>
 </figure>
 
 <figure class="shot">
@@ -476,7 +478,7 @@ MBOMと工順の登録方法は、[マスタ管理の品目・MBOM・工順](mas
 <g class="m" text-anchor="middle"><text x="300" y="326">◀ トレースバック：製品から、使った部材へさかのぼる</text><text x="760" y="326">トレースフォワード：部材から製品・出荷へ ▶</text></g>
 </svg>
 </div>
-<figcaption>図9　FG1000-S001 のつながり。鋳造品のロットまで2段さかのぼれる</figcaption>
+<figcaption>図9　FG1000-S001 のつながり。鋳造品のロットまで2段さかのぼれる。「残り4台」は出荷を実行した時点の数量</figcaption>
 </figure>
 
 <figure class="shot">
@@ -499,7 +501,7 @@ FG1000-S001 の履歴タブ（製造・検査・在庫の記録）を開けば
 | 段階 | サンプルCSVで入るもの | 画面から操作すること |
 |---|---|---|
 | マスタ | `samples/master-csv` の20ファイル（作業区〜ユーザーのスキル、保全手順書） | ― |
-| 受入 | `01_receiving.csv`（部材10ロット・保全部品3ロット。期限切れ・期限間近のロットを含む） | 在庫照会の **期限アラート** で期限切れ・期限間近のロットを確かめる |
+| 受入 | `01_receiving.csv`（部材10ロット・保全部品3ロット。期限切れ・期限間近のロットを含む） | 在庫照会の **期限アラート** で期限切れのロットを確かめる。日数を 365 に増やすと、期限間近のロットも期限接近として出る |
 | 製造指図 | `02_manufacturing-orders.csv`（SMP-SF-001・SMP-FG-001 は展開済み、SMP-FG-002 は承認済み、SMP-FG-003 は未承認）、`17_manufacturing-orders.csv`（リワーク指図 SMP-RW-001。承認済み） | SMP-FG-002・SMP-RW-001 の **工程展開** と **差立** |
 | 実行 | `03`〜`09`（段取り・点検・投入・出来高・製造条件）、`16_equipment-logs.csv`（設備の稼働・故障・停止） | 各作業指示の **製造完了承認**（pm001） |
 | 検査 | `10_inspections.csv`（4件。判定まで。追加入荷の受入検査は不合格） | 各検査の **検査承認** |
diff --git a/samples/actual-csv/01_receiving.csv b/samples/actual-csv/01_receiving.csv
index 29462d3..a7a697a 100644
--- a/samples/actual-csv/01_receiving.csv
+++ b/samples/actual-csv/01_receiving.csv
@@ -10,5 +10,5 @@ MP-9002,10,WH-S01,,,ロット番号は自動採番（保全用クーラントフ
 MP-9002,4,WH-S01,MP9002-260901,,保全実績（19）で消費するクーラントフィルタ
 MP-9003,2,WH-S01,MP9003-260901,,保全実績（19）で消費するシールヒーター
 RM-3001,30,WH-M01,R3001-260902,,鋳造品 追加入荷（受入検査で不合格になる）
-RM-3004,30,WH-M02,R3004-251001,2026-10-31,前回入荷の残り（期限間近。先入れ先出しで先に引き当たる）
+RM-3004,30,WH-M02,R3004-251001,2027-07-31,前回入荷の残り（期限間近。先入れ先出しで先に引き当たる）
 RM-3006,5,WH-M02,R3006-250801,2026-08-31,期限切れ（投入・出荷できないことの確認用）
diff --git a/samples/actual-csv/README.md b/samples/actual-csv/README.md
index 52e59ea..e878d0b 100644
--- a/samples/actual-csv/README.md
+++ b/samples/actual-csv/README.md
@@ -68,7 +68,7 @@ GET  /api/actuals/csv/receiving/template      … ヘッダーだけのCSV
 - ダッシュボード・品質分析・生産性などの期間指定の画面は「今日」を基準に開くので、何も出ないときは
   **基準日を 2026-09-03 に変えるか「◀ 前へ」で戻して**見てください
 - 期限切れのロット（R3006-250801、期限 2026-08-31）は取り込んだ日によらず期限アラートに出ます。
-  期限間近のロット（R3004-251001、期限 2026-10-31）が「間近」に見えるのは 2026年10月中だけで、それ以降に取り込むと期限切れとして出ます
+  期限間近のロット（R3004-251001、期限 2027-07-31）は、期限アラートの日数を 365 に増やすと期限接近として出ます。既定の30日で出るのは 2027年7月だけで、期限を過ぎると期限切れとして出ます
 - 資格の期限（`samples/master-csv/19_user-skills.csv`）も同じく固定です。op002 の SK-03 は期限切れ、ほかは 2027年以降に切れます
 - 治工具の寿命は、利用実績（21）の記録日時で数えます。メンテナンスで寿命をリセットすると、リセットした時刻（取り込んだ時刻）より前の記録は数えなくなります
 
diff --git a/samples/master-csv/19_user-skills.csv b/samples/master-csv/19_user-skills.csv
index 8479e75..61c56c0 100644
--- a/samples/master-csv/19_user-skills.csv
+++ b/samples/master-csv/19_user-skills.csv
@@ -1,6 +1,7 @@
 UserName,SkillCode,AcquiredOn,ExpiresOn
 op001,SK-01,2024-04-01,
 op001,SK-02,2023-06-15,2028-06-14
+op001,SK-03,2025-04-01,2028-03-31
 op002,SK-04,2024-04-01,
 op003,SK-01,2025-10-01,
 qc001,SK-03,2024-10-01,2027-09-30
diff --git a/samples/master-csv/README.md b/samples/master-csv/README.md
index 945de5e..6a982dd 100644
--- a/samples/master-csv/README.md
+++ b/samples/master-csv/README.md
@@ -72,7 +72,7 @@ RM-3001 ハウジング鋳造品
 - `14_inspection-devices.csv` の `DV-03` は校正期限切れです。検査実績の測定器に選ぶと登録できません
 - `SF-2000` の機械加工は `EQ-01` と `EQ-05` のどちらでも作業できます（候補設備）
 - `op003` は夜勤（20:00〜翌05:00）の作業者です。直別の集計を試せます
-- `op002` の `SK-03`（社内検査員認定）は 2026-03-31 で期限切れです。SK-03 が必要な最終検査（FG-1000 の工程20）に差立・着手しようとすると拒否されます
+- `op002` の `SK-03`（社内検査員認定）は 2026-03-31 で期限切れです。SK-03 が必要な最終検査（FG-1000 の工程20）に差立・着手しようとすると拒否されます。有効な SK-03 を持つ `op001` は担当できます
 
 ## 注意