---
// ロボットが現場で止まる瞬間の図鑑（LP。LOG の記事ではない）
// 伝えること：カタログには書いていない「入れてから分かる止まり方」と、入れる前に自分の現場で確かめる問い
// 誰に：ロボットの導入を判断する経営者と、導入を任された PM（飲食・病院・物流など）
// 中身は 2026-11-14 のサイトの制作チーム（サイト改善/制作/止まる瞬間の図鑑/）で、エイイチが4本から選んだ案（作者 codex・持ち寄りと話し合いのあと）を土台にした
// 画像・動画は、自分で撮ったものとシミュレーションの画面だけ。SNS・他社の動画から切り出した画像は使わない（使用許可がないため。2026-11-14 エイイチの指摘）
// 数字はすべて出典のログ本文から。新しい数字を足すときは、ログ本文で確かめてから
import Base from '../layouts/Base.astro';
import { SITE, AUTHOR, PUBLISHER } from '../lib/seo';

const path = '/robot-stops';
const url = SITE + path;
const title = 'ロボットが現場で止まる瞬間の図鑑 ― 入れる前に、自分の現場で確かめる12の問い';
const seoTitle = 'ロボットが現場で止まる瞬間の図鑑｜配膳・搬送ロボットとロボットアーム';
const description = '配膳ロボット・病院の搬送ロボット・ロボットアームが現場で止まった12の瞬間を、実店舗の動画観察・シミュレーション・実機の記録から集めた。止まったロボットを直すのは約1〜10秒、店員が来るまでは約18〜53秒以上。起きたこと・原因・入れる前に確かめる問いを、出典つきで。';
const published = '2026-11-14';
const modified = '2026-11-14';

type Src = { t: string; h: string };
type Item = { n: string; id: string; img: string; cap: string; metric: { l: string; v: string; u: string; n: string }; name: string; where: string; what: string; why: string[]; cond: string; ask: string[]; src: Src[]; hakobu: string };
type Chapter = { id: string; kind: 'svc' | 'arm'; title: string; items: Item[] };

const chapters: Chapter[] = [
  {
    id: 'whose-job', kind: 'svc', title: '止まったあと、誰の仕事になるか', items: [
      {
        n: '01', id: 'staff-arrival', img: 'LOG456_01_staff_beside_robots.png', cap: 'シミュレーションの店で、通路に固まった配膳ロボット2台とスタッフ・お客さん', metric: { l: '店員が来るまで', v: '約18〜53', u: '秒以上', n: '直す作業は約1〜10秒' }, name: '店員が来るまで', where: '飲食店／実店舗の動画観察',
        what: '店員が対応した動画4例では、直す作業は約1〜10秒、店員が来るまでは約18〜53秒以上でした。通路で向かい合った例では、来るまで41秒以上、直す作業は約5秒でした。',
        why: ['狭い通路で向かい合ったり、待機場所の出口をふさがれたりしていました。ロボットの声や赤い明かりが映っていても、助けが来るまでの時間は、直す時間より長くなっていました。'],
        cond: '編集された実店舗動画4例の観察。秒数は動画上の概算で、待ち時間には下限を含みます。',
        ask: ['忙しい時間に止まったら、誰が、何で気づくか。', '「止まってから人が着くまで」と「着いてから直すまで」を分けて測れるか。'],
        src: [{ t: '店員が来るまでと直す時間の記録', h: '/record/serving-robot-video-ledger' }, { t: '待機場所の横で53秒以上進めなかった動画', h: '/record/serving-robot-jams-are-aisles' }, { t: '通路に固まったロボットとスタッフの画面', h: '/record/serving-robots-jam-cause-standby-entry' }],
        hakobu: '直すのはすぐです。来てもらうまでが長いんです。',
      },
      {
        n: '02', id: 'second-robot', img: 'robot_stops_02_second_robot_v2.jpg', cap: '28卓の店を真上から。白い2台が席の前の一本道で向かい合い、どちらも進めない（シミュレーション）', metric: { l: '入店待ち', v: '13.8 → 25.1', u: '分', n: '1台 → 2台' }, name: '2台目で待ちが延びる', where: '28卓・スタッフ2人の飲食店／シミュレーション',
        what: '普通の混み具合で、入店待ちは1台の13.8分から、2台では25.1分へ延びました。スタッフがロボットを動かしに行く回数も、13回から54回に増えました。',
        why: ['2台とも近い方の狭い一本道を選び、向かい合ってふさぎ合っていました。「一本道は1台ずつ」にすると2台の入店待ちは17.6分まで縮みましたが、試した改善案でも1台より短くなりませんでした。'],
        cond: '来客などの条件を変えた10回の中央値。1台と2台ではシミュレーションの版が異なり、この店・人数・運用での比較です。',
        ask: ['2台目が加わると、どの一本道で出会うか。片方が待てる場所はあるか。', '運ぶ量だけでなく、人が助けに行く回数と入店待ちも改善するか。'],
        src: [{ t: '2台目と通行ルールを比べた記録', h: '/record/serving-robot-one-per-narrow-restaurant' }, { t: '小さな店に2台を入れた記録', h: '/record/small-store-second-robot-wait' }],
        hakobu: '同僚が増えたら、店員さんを呼ぶ仕事が増えました。',
      },
      {
        n: '03', id: 'bussing', img: 'robot_stops_03_bussing_wait.jpg', cap: '下げ膳のロボットが卓の横で皿を待つ。うしろのお客さんは通路を抜けられない（シミュレーション）', metric: { l: '卓が使えるまで', v: '4.49 → 8.06', u: '分', n: '下げ膳も任せた2台' }, name: '下げ膳中、通路をふさぐ', where: '飲食店／シミュレーション',
        what: '6店・1〜2台・各10回の比較では、下げ膳も任せると、スタッフの歩く距離は12条件すべてで減りました。一方、細い通路の2店では2台のとき、退店から卓が使えるまでが4.05分→6.05分、4.49分→8.06分に延びました。',
        why: ['下げ膳のロボットが卓に着き、スタッフを待つあいだに通路をふさいでいました。別の通路があれば回れますが、一本道では、ほかのロボットも人も待たされます。'],
        cond: '数字は各10回の中央値。各条件1回の比較動画では入店待ちの増減も見られましたが、繰り返し集計とそろわない店があるため、ここでは卓が使えるまでの時間を示しています。',
        ask: ['皿を載せる人が来ないあいだ、どこで待つか。その横を通れるか。', '歩く距離が減っても、次のお客さんを座らせるまでが延びていないか。'],
        src: [{ t: '下げ膳を加えて繰り返し比較した記録', h: '/record/serving-robot-sim-bussing-narrow-aisles' }, { t: '6店の比較動画', h: '/record/serving-robot-bussing-depends-on-aisles' }],
        hakobu: 'お皿待ちのつもりが、通せんぼになってました。',
      },
      {
        n: '04', id: 'cleanup', img: 'robot_stops_04_queue_empty_tables_v2.jpg', cap: '46卓の店の入口に並ぶお客さん。右の席は空いているが、片付けが済んでいない（シミュレーション）', metric: { l: '席が空いているのに待った', v: '3.4', u: '分', n: 'ロボット2台でも残った' }, name: '席は空いているのに案内できない', where: '46卓・38卓の飲食店／試算とシミュレーションの比較',
        what: '46卓の店では、0台・1台・2台と増やすと、入店待ちは8.1分→6.6分→5.5分に縮みました。それでも2台のとき、「席は空いているのに待った時間」が46卓の店で3.4分、38卓の店で3.5分残りました。',
        why: ['試算ではレジが詰まっていましたが、3Dの店では、スタッフが歩き回ることで片付けと案内が後回しになる、とログでは見ています。ここで止まっているのは、次のお客さんを迎える仕事です。'],
        cond: '各10回の中央値。片付けと案内が原因という説明はログの見立てで、当時の再現には瞬間移動などの簡略化も残っていました。',
        ask: ['運ぶ仕事が減った時間を、誰が片付けと案内に使えるか。', '満席で待つ時間と、席を使える状態にできず待つ時間を分けているか。'],
        src: [{ t: '46卓の店で詰まる仕事を調べた記録', h: '/record/large-store-cleanup-bottleneck' }, { t: '38卓の店と待機場所を調べた記録', h: '/record/standby-jam-every-store' }],
        hakobu: '運び終わりました。次のお客さんの席は、まだでした。',
      },
    ],
  },
  {
    id: 'aisles', kind: 'svc', title: '通路と待機場所で、抜けられない', items: [
      {
        n: '05', id: 'faceoff', img: 'LOG370_02_robots_face_to_face.png', cap: '細い通路の入口で、向かい合ったまま止まった2台（シミュレーション）', metric: { l: '2台が止まり続けた', v: '約9分10', u: '秒', n: 'シミュレーションの1例' }, name: 'にらみ合い', where: '飲食店／実店舗の動画観察とシミュレーション',
        what: '実店舗の動画では、待機場所の横で向かい合った2台が53秒以上進めず、店員が空の方を手でよけて約4〜5秒で解いていました。シミュレーションの42卓・通路95cmの店では、2台が約9分10秒止まった例がありました。',
        why: ['シミュレーションでは、両方が料理を載せている場合などに、どちらが譲るかを決められず、よけた先も相手の道の上でした。実店舗の機体内部の判断は未確認で、ログで調べたメーカーの公開資料でも、どちらが譲るかの具体的な決まりは確認できませんでした。', '店員が助ける決まりをシミュレーションに入れると、約9分の例は助け2回・約105秒で解けましたが、同じ台に何度も助けが必要になる問題が残りました。'],
        cond: '実店舗の観察は同じメーカーの少数例。約9分と約105秒は、シミュレーションの特定条件1回ずつの結果です。',
        ask: ['荷物を載せた2台が出会ったら、どちらが、どこまで下がるか。何秒待つか。導入元に実演してもらえるか。', '自力で解けないとき、人が安全に解く手順を実際に試せるか。'],
        src: [{ t: '実店舗の場面と店員が助ける決まりの比較', h: '/record/serving-robot-faceoff-staff-resolves' }, { t: '待機場所の横で向かい合った動画の観察', h: '/record/serving-robot-jams-are-aisles' }, { t: '向かい合って止まった2台の画面（線に縛った作り）', h: '/record/serving-robot-fixed-route-jam' }],
        hakobu: 'お先にどうぞ。……その先に、ぼくがいます。',
      },
      {
        n: '06', id: 'standby', img: 'LOG456_02_standby_jam_frames.png', cap: '待機点へ斜めに戻ろうとして、隣の台の前で止まる（上から見た4コマ）', metric: { l: '入店待ち', v: '11.7 → 17.2', u: '分', n: '2台 → 5台' }, name: '待機場所へ戻れない', where: '70卓・312席の飲食店／シミュレーション',
        what: '入店待ちは2台で11.7分、5台で17.2分でした。別の比較で、待機点へまっすぐ入る決まりにすると、待機場所付近の止まり合いは1営業あたり3,317秒→1,255秒に減りましたが、入店待ちは12.22分→14.90分に延びました。',
        why: ['0.8m間隔の待機点へ斜めに戻ると、隣で待つ台が前のセンサーに入り、止まっていました。人も待機点の区画を通らない形にすると、止まり合いは809秒まで減りました。'],
        cond: '各10回の中央値。台どうしの順番決めが不足した再現での結果です。待機場所の詰まりが減っても、同じ比較で入店待ちは短くなりませんでした。',
        ask: ['ほかの台が待機しているところへ最後の1台が戻り、また出発できるか。人の通り道と重ならないか。', '待機場所の停止時間を減らしたあと、片付けや入店待ちまで改善したか。'],
        src: [{ t: '5台で待ちが延びた記録', h: '/record/large-restaurant-five-serving-robots-longer-wait' }, { t: '斜めに戻る入り方を調べた記録', h: '/record/serving-robots-jam-cause-standby-entry' }, { t: '人の通り道も変えた記録', h: '/record/serving-robot-jam-three-rules' }],
        hakobu: '駐車位置は空いてます。入る途中が空いてません。',
      },
      {
        n: '07', id: 'dead-end', img: 'LOG374_01_deadend_jam.png', cap: 'ドリンクバーと6人席の間の行き止まりで、向かい合う2台', metric: { l: '60秒以上の停止', v: '57 → 59', u: '回', n: '地図で道を引いても減らない' }, name: 'ドリンクバーの横で詰まる', where: '飲食店／シミュレーション',
        what: '決まった線だけを走る作りから、地図で道を引く作りに変えても、60秒以上の停止は57回→59回で減りませんでした。さらにドリンクバーを上へ0.5m、左へ0.8m動かして抜け道を作ると、20回になりました。',
        why: ['最初は、同じ線を往復するシミュレーション側の制約がありました。それを外しても、ドリンクバーと席の間が0.4mしかない行き止まりに詰まりが集中しました。道を探せるようにする変更に加えて、抜け道を作る配置の変更が必要でした。'],
        cond: '同じ店・2台・同じ乱数条件で各1回の比較。57回→20回は、道の引き方と配置の両方を変えた結果です。',
        ask: ['行き止まりで往復の流れが出会わないか。家具を動かして抜け道を作れるか。', 'シミュレーションで詰まった原因は、現場の配置か、再現する側が加えた制約か。'],
        src: [{ t: '決まった線しか走れなかった作り', h: '/record/serving-robot-fixed-route-jam' }, { t: '道の引き方とドリンクバー移動を分けた比較', h: '/record/serving-robot-map-planner' }],
        hakobu: '地図は読めます。壁の向こうには回れません。',
      },
    ],
  },
  {
    id: 'numbers', kind: 'arm', title: '命令や学習の数字が良くても、仕事は終わらない', items: [
      {
        n: '08', id: 'false-success', img: 'LOG352_03_freeze_after_place.jpg', cap: '箱に置いたあと、その姿勢のまま動かなくなったアーム', metric: { l: '深く倒した姿勢への命令', v: '6回中0', u: '回動いた', n: 'エラーは出なかった' }, name: '動かないのに、記録は成功', where: 'ロボットアーム／実機 mechArm 270',
        what: '動かなかった記録2本が、台帳では「つかめた・箱に入った」と判定されていました。実機では、肩95.53〜99.22°の姿勢への命令がエラーなしに6回とも動かず、肩を87.27°にして教え直すと5回続けて成功しました。',
        why: ['公式の肩の範囲は−85°〜＋90°ですが、送る側のライブラリはそれより広い範囲を許していました。手で教えると範囲外まで倒せても、その姿勢への命令では動きませんでした。本線にあった肩88°の上限確認も、再生用コードには入っていませんでした。'],
        cond: '上記の角度での実機試行。88°は本線の設定値で、厳密に確かめた拒否境界ではありません。台帳の成功判定も実際の動きと食い違っていました。',
        ask: ['教示・再生・本番で、同じ可動範囲の確認が働くか。', '試験導入の報告にある「成功」は、誰が、何を見て付けたか。1回ずつ動画と照らせるか。'],
        src: [{ t: '動かなかった角度・教え直し・台帳の誤判定の記録', h: '/record/teach-replay-19-demos' }],
        hakobu: 'ぼくが動くより先に、台帳で成功してました。',
      },
      {
        n: '09', id: 'power', img: 'LOG487_04_mecharm_label.jpg|LOG487_05_old_adapter_label.jpg', cap: '左：本体のラベル（40W）　右：8か月つないでいた電源（24W）', metric: { l: 'つかんで運べた', v: '1/3 → 5/5', u: '回', n: '電源を 12V・2A → 5A に' }, name: 'つかんだのに落とす', where: 'ロボットアーム／実機 mechArm 270',
        what: 'ブロックを落としていた実機で、8か月分の記録は、本体表示40Wに対して24Wの電源を使って取られていました。3,355円の電源へ替えると、同じモデル・爪の設定・位置で成功は3回中1回から5回中5回になりましたが、交換後も1回は人が持ち上げを補助しました。',
        why: ['使っていた電源は12V・2Aで、交換後は12V・5Aです。落とす前に爪の電流が0付近まで下がる記録と、交換後の変化から、ログでは電源不足が原因と判断しています。8か月使った電源は、箱に入っておらず、あとから別送されたものでした。'],
        cond: '別の日の3回と5回の比較。電圧低下の直接測定はなく、交換後も補助した1回で爪の電流低下が残りました。',
        ask: ['試験機材の電源と部品は機体の指定に合い、本番と同じ構成か。型番まで照らしたか。', 'つかんで静止するだけでなく、持ち上げて運ぶ間も保持できるか。人が補助した回を分けているか。'],
        src: [{ t: '落とす直前の電流と電源を調べた記録', h: '/record/mecharm-270-drops-block-underpowered-adapter' }, { t: '電源交換後の実機比較', h: '/record/mecharm-270-5a-adapter-stops-dropping-block' }],
        hakobu: '学習のおかわりより先に、電源を見てください。',
      },
      {
        n: '10', id: 'loss', img: 'LOG348_02_gripper_beyond_block.jpg', cap: '学習を増やしたあとも、爪はブロックの奥で閉じた', metric: { l: '学習誤差', v: '0.0057 → 0.0030', u: '', n: '実機では2回ともつかめず' }, name: '学習の数字は良いのに空振り', where: 'ロボットアーム／π0.5を使った実機 mechArm 270',
        what: '2,000ステップ学習した実機は4回ともつかむ前に止まり、動画では爪がブロックの上に乗っていました。学習を約4,000ステップに増やし、学習誤差が約0.0057から0.0030に下がっても、実機2回ともブロックの奥で爪を閉じました。',
        why: ['お手本19本は、ブロックをほぼ同じ場所に置いて集めていました。ログでは「いつもの場所へ手を伸ばす」だけでも学習誤差が下がると考え、位置の違うお手本が必要と判断しました。'],
        cond: '実機は追加学習前4回、追加後2回。その後、5か所で19本のお手本を集め直して学習し直しています（続きは出典の記録から）。',
        ask: ['学習に使っていない位置へ対象物を置いても、つかむ場所が変わるか。', '学習誤差とは別に、つかめた回数、箱まで運べた回数、人が補助した回数を数えているか。'],
        src: [{ t: '最初の実機試行で爪が乗った記録', h: '/record/pi05-mecharm-first-real-run' }, { t: '追加学習しても奥で空振りした記録', h: '/record/pi05-mecharm-4000-steps' }],
        hakobu: 'いつもの場所は覚えました。今日のブロックは、そこですか？',
      },
    ],
  },
  {
    id: 'detect', kind: 'svc', title: '止まりを見つける仕組みも、確かめる', items: [
      {
        n: '11', id: 'detector', img: 'LOG418_05_path_line_examples.png', cap: '同じ通路を走るロボット。上は道の線あり、下は線なし', metric: { l: '長い止まりを拾えた割合', v: '72 → 28', u: '%', n: '画面の道の線を消すと' }, name: '見張りが見ていたのは、画面の線', where: '飲食店／シミュレーションの録画を使った画像検知試験',
        what: '静止画1枚ずつで30秒以上の停止を見つける試験では、誤報5%の条件で、経路線ありは93件中67件（72%）、線なしは94件中26件（28%）を拾いました。線なしでは、ロボットどうしの詰まりを47件中4件しか拾えませんでした。',
        why: ['画像検知は、画面に描かれた道の線が交わる所を手がかりにしていました。その線がない画像では、向かい合う2台と、普段どおり並んで待つ2台を区別しにくくなりました。'],
        cond: 'シミュレーション録画で試した一つの検知方法。撮り直しで動きも変わっており、同一場面から線だけを消した比較ではありません。',
        ask: ['止まりを映像で見張る仕組みを提案されたら、評価に使った映像は、自分の現場のカメラと同じ見え方か。', '止まった時刻と長さを、機体の記録から取り出せるか。導入元に、その記録を見せてもらえるか。'],
        src: [{ t: '経路線を消して検知率を測り直した記録', h: '/record/serving-robot-jam-detection-without-path-lines' }],
        hakobu: 'ぼくの困り顔より、道の線を見てたんですね。',
      },
      {
        n: '12', id: 'placeholder-people', img: 'LOG488_04_east_10am.png', cap: '仮の病院の10時ごろ。待合と大廊下に患者・職員・ロボットが行き交う', metric: { l: '1日の問題', v: '84 → 132', u: '件', n: '通れない所を直すと' }, name: '仮の人の動きで、問題が増える', where: '病院の搬送ロボット／シミュレーションで作った仮の病院',
        what: '行き先へ歩いて行けなかった患者・職員41人を通れるようにすると、急停止・ひやり・人によけさせた等の問題が1日84件→132件に増えました。職員の行き先と動き方を直すと132件→68件→19件となり、さらに患者などの動きを補うと51件になりました。',
        why: ['職員141人を「1時間に1回、くじ引きで選んだ部屋へ行って戻る」という仮の決まりで動かしていました。付き添いのために通れるようにした場所へ、職員が普段も行くようになり、ロボットと出会う回数が増えていました。'],
        cond: '主に同じ乱数条件1通りでの比較。件数は衝突事故の数ではなく、19件は患者などの動きを補う前の値です。',
        ask: ['導入元のシミュレーションでは、職員と患者の動きを何に基づいて置いたか。仮置きの動きを示してもらえるか。', '問題が減ったとき、必要な人の移動まで減らしていないか。人と荷物が目的地へ着いているか。'],
        src: [{ t: '外来の廊下を避ける経路の比較', h: '/record/hospital-transport-robot-avoid-outpatient-hall' }, { t: '通れる場所を直して問題が増えた記録', h: '/record/hospital-transport-robot-blocked-paths-more-conflicts' }, { t: '職員の仮の動きと測り直し', h: '/record/hospital-transport-robot-conflicts-came-from-placeholder-staff-moves' }],
        hakobu: '毎時間くじ引きで出張する病院だとは聞いてません。',
      },
    ],
  },
];

const all = chapters.flatMap((c) => c.items);
// 読む人で分ける：サービスロボット（配膳・搬送）とロボットアーム。タブで切り替える（JS が動かないときは全部見える）
const TABS = [{ k: 'svc', t: 'サービスロボット' }, { k: 'arm', t: 'ロボットアーム' }] as const;
const kindOf = Object.fromEntries(chapters.flatMap((c) => c.items.map((i) => [i.id, c.kind])));

const jsonLd = [
  {
    '@context': 'https://schema.org', '@type': 'Article', headline: title, description, url, mainEntityOfPage: url,
    inLanguage: 'ja', datePublished: published, dateModified: modified, author: AUTHOR, publisher: PUBLISHER,
    about: [{ '@type': 'Thing', name: '配膳ロボット' }, { '@type': 'Thing', name: '搬送ロボット' }, { '@type': 'Thing', name: 'ロボット導入' }, { '@type': 'Thing', name: 'フィジカルAI' }],
    citation: [...new Set(all.flatMap((i) => i.src.map((s) => SITE + s.h)))],
  },
  {
    '@context': 'https://schema.org', '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Pixels to Motors', item: SITE + '/' },
      { '@type': 'ListItem', position: 2, name: 'ロボットが現場で止まる瞬間の図鑑', item: url },
    ],
  },
];
---
<Base title={`${seoTitle} | Pixels to Motors`} description={description} path={path} ogType="article" published={published} modified={modified} jsonLd={jsonLd}>
  <div class="rs">

<section class="fv" aria-labelledby="fv-h">
  <div class="fv-copy">
    <p class="who">ロボットの導入を決める方と、任された方へ</p>
    <h1 id="fv-h">ロボットが<br>現場で止まる<br>瞬間の図鑑</h1>
    <p class="lead">配膳ロボット・病院の搬送ロボット・ロボットアームが止まった12の場面を、実店舗の動画・シミュレーション・実機の記録から集めました。</p>
    <dl class="fv-stat">
      <div><dt>止まった配膳ロボットを直す作業</dt><dd><span class="u">約</span>1〜10<span class="u">秒</span></dd></div>
      <div class="big"><dt>店員が来るまで</dt><dd><span class="u">約</span>18〜53<span class="u">秒以上</span></dd></div>
    </dl>
    <p class="fv-note">実店舗の動画で、店員が対応した4例</p>
  </div>
  <figure class="fv-media">
    <video src="/media/robot_stops_fv_v1.mp4" poster="/media/robot_stops_fv_v1.jpg" muted loop playsinline autoplay preload="metadata" aria-label="シミュレーションの店で、配膳ロボットが長く止まった場所に寄っていく動画"></video>
    <figcaption>シミュレーションの店で、ロボットが長く止まった所へ寄る（黄＝お客さん・青＝スタッフ・白＝ロボット）</figcaption>
  </figure>
</section>

<div class="tabbar" id="tabs">
  <div class="wrap">
    <div class="tabs" role="tablist" aria-label="ロボットの種類">
      {TABS.map((t, ti) => <button type="button" role="tab" data-tab={t.k} aria-selected={ti === 0 ? 'true' : 'false'} data-ev={`タブ:${t.t}`}>{t.t}</button>)}
    </div>
  </div>
</div>

<section class="idx-sec" aria-labelledby="idx-h">
  <div class="wrap">
    <h2 id="idx-h" class="sr">12の止まる瞬間</h2>
    <ul class="idx">
      {all.map((i) => (
        <li data-kind={kindOf[i.id]}><a class="icard" href={`#${i.id}`} data-ev={`目次:${i.name}`}>
          <span class="ithumb"><img src={`/media/${i.img.split('|')[0]}`} alt="" loading="lazy"></span>
          <span class="imeta">
            <span class="iline"><span class="iv">{i.metric.v}<small>{i.metric.u}</small></span><span class="tag">{i.metric.l}</span></span>
            <span class="ititle">{i.name}</span>
          </span>
        </a></li>
      ))}
    </ul>
  </div>
</section>

{chapters.map((c) => (
  <section id={c.id} data-kind={c.kind}>
    <div class="wrap">
      <h2 class="ch">{c.title}</h2>
      {c.items.map((i, k) => (
        <article class={`card${k % 2 ? ' rev' : ''}`} id={i.id}>
          <figure class={`shot${i.img.includes('|') ? ' pair' : ''}`}>
            <div class="shot-imgs">{i.img.split('|').map((f) => <img src={`/media/${f}`} alt={i.cap} loading="lazy">)}</div>
            <figcaption>{i.cap}</figcaption>
          </figure>
          <div class="side">
            <p class="where"><span class="tag">{i.where}</span></p>
            <h3>{i.name}</h3>
            <p class="metric"><span class="m-l">{i.metric.l}</span><span class="m-v">{i.metric.v}<span class="u">{i.metric.u}</span></span><span class="m-n">{i.metric.n}</span></p>
            <div class="ask">
              <h4>入れる前に確かめること</h4>
              <ul>{i.ask.map((a) => <li>{a}</li>)}</ul>
            </div>
            <figure class="hk">
              <img src="/site/hakobu/avatar.webp" alt="ハコブくん" width="160" height="160" loading="lazy">
              <blockquote>{i.hakobu}</blockquote>
            </figure>
          </div>
          <details class="more">
            <summary>何が起きたか・なぜ止まったか・出典</summary>
            <div class="more-in">
              <div>
                <h4>何が起きたか</h4>
                <p>{i.what}</p>
                <h4>なぜ止まったか</h4>
                {i.why.map((w) => <p>{w}</p>)}
              </div>
              <div>
                <h4>測った条件</h4>
                <p class="cond">{i.cond}</p>
                <h4>出典</h4>
                <p class="src">{i.src.map((x) => <a href={x.h}>{x.t}</a>)}</p>
              </div>
            </div>
          </details>
        </article>
      ))}
    </div>
  </section>
))}

<section class="end band-ink" id="next">
  <div class="wrap">
    <h2>自分の現場で、一つ確かめる</h2>
    <div class="prose">
      <p>足す判断の前に、どこで仕事が止まり、誰の手が必要になっているかを確かめてください。もう一つ確かめたいのが、<strong>報告にある「成功」と、実際に終わった仕事が一致しているか</strong>です。台帳の成功、学習誤差、画像の検知率だけでは、拾えていない止まりがありました。</p>
      <p>気になった場面を一つ選び、試験導入で次の欄を埋めてください。</p>
    </div>
    <div class="table"><table>
      <tbody>
        <tr><th>起きた条件</th><td>場所、混み具合、台数、荷物、人の作業</td></tr>
        <tr><th>待った時間</th><td>停止、気づき、人の到着、復帰の各時刻</td></tr>
        <tr><th>人がしたこと</th><td>画面操作、移動、積み下ろし、持ち上げなど</td></tr>
        <tr><th>仕事の結果</th><td>届いたか、卓が使えたか、次の人を案内できたか。記録と動画は一致するか</td></tr>
        <tr><th>変えて比べること</th><td>台数、配置、通行ルール、待ち方などを一つずつ</td></tr>
      </tbody>
    </table></div>
    <div class="prose">
      <p>人が手を貸して完了した回は、その手間も含めて導入の結果です。店の形・人数・台数を変えて考えるには、<a href="/series8">配膳ロボットの導入シミュレーション</a>へ。</p>
    </div>
    <a class="cta" href="/message?topic=physical-ai" data-ev="図鑑:相談"><span><small>自分の現場で確かめたい止まり方を</small>メッセージで送る</span><i class="ms" aria-hidden="true">arrow_forward</i></a>
  </div>
</section>

  </div>
  <script is:inline>
    (function () {
      var root = document.querySelector('.rs'); if (!root) return;
      var btns = root.querySelectorAll('.tabs [data-tab]');
      function set(k) {
        root.setAttribute('data-tab', k);
        btns.forEach(function (b) { b.setAttribute('aria-selected', b.getAttribute('data-tab') === k ? 'true' : 'false'); });
      }
      btns.forEach(function (b) { b.addEventListener('click', function () { set(b.getAttribute('data-tab')); var t = document.getElementById('tabs'); if (t && t.getBoundingClientRect().top <= 49) window.scrollTo({ top: t.offsetTop - 48 }); }); });
      function fromHash() {
        var id = decodeURIComponent(location.hash.slice(1)); if (!id) return false;
        var el = document.getElementById(id); var sec = el && el.closest('[data-kind]');
        if (sec) { set(sec.getAttribute('data-kind')); el.scrollIntoView(); return true; }
        return false;
      }
      if (!fromHash()) set('svc');
      window.addEventListener('hashchange', fromHash);
    })();
  </script>
</Base>

<style is:global>
.rs{
  --paper:#f7f7f7; --sheet:#fff; --ink:#242424; --muted:#555; --rule:#e6e6e6;
  --robot:#f2600c; /* 差し色：最後のメッセージのボタンだけ（ほかの LP の最後のボタンとそろえる） */
  --gut:max(16px,env(safe-area-inset-left,0px));
  --sans:Inter,"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --r-s:6px;
}
.rs, .rs *{box-sizing:border-box}
.rs{padding-top:48px;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.8;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
.rs a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rs a:hover{text-decoration-thickness:2px}
.rs .wrap{max-width:calc(1120px + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}
.rs h1,.rs h2,.rs h3{text-wrap:balance;letter-spacing:0;margin:0}
.rs p{margin:0 0 .9em}
.rs .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rs section{padding-block:88px}
.rs .band-white{background:#fff}
.rs .u{font-family:var(--sans);font-size:.42em;font-weight:700;margin:0 .12em;letter-spacing:0}

/* ---- 最初の画面：左に見出しと「直す時間と来るまでの時間」、右に止まる場面の動画（膜をかけない） ---- */
.rs .fv{display:grid;grid-template-columns:minmax(360px,34rem) minmax(0,1fr);background:var(--ink);color:#fff;padding:0;min-height:max(600px,calc(100svh - 48px))}
.rs .fv-copy{padding:64px 48px 48px max(var(--gut),calc((100vw - 1120px)/2));display:flex;flex-direction:column;justify-content:center}
.rs .who{font-size:.85rem;font-weight:700;color:#bbb;margin-bottom:18px}
.rs .fv h1{font-size:clamp(2.2rem,3.6vw,3.1rem);line-height:1.15;font-weight:900}
.rs .lead{margin-top:24px;color:#ccc;font-size:1rem;line-height:1.9}
.rs .fv-stat{margin:20px 0 0;display:grid;gap:10px;border-top:2px solid #fff;padding-top:18px}
.rs .fv-stat dt{font-size:.85rem;color:#bbb}
.rs .fv-stat dd{margin:0;font-weight:800;font-size:2rem;line-height:1.1;color:#aaa}
.rs .fv-stat .big dd{font-size:clamp(2.6rem,4vw,3.4rem);color:#fff;white-space:nowrap}
.rs .fv-note{font-size:.78rem;color:#999;margin-top:12px}
.rs .fv-media{margin:0;position:relative;background:#1b1b1b;overflow:hidden;display:flex;align-items:center;padding:48px 48px 64px}
.rs .fv-media video{display:block;width:100%;height:auto;max-height:100%;border-radius:var(--r-s)}
.rs .fv-media figcaption{position:absolute;left:48px;bottom:22px;color:#aaa;font-size:.78rem}

/* ---- タブ：上が角丸の見出しが、下の太い線につながる形（選んでいる方は面ごと黒）。下へ読み進めても上に残る ---- */
.rs .tabbar{position:sticky;top:48px;z-index:5;background:var(--paper)}
.rs .tabs{display:flex;gap:6px;align-items:flex-end;border-bottom:3px solid var(--ink);padding-top:14px}
.rs .tabs button{font:inherit;font-size:1.05rem;font-weight:900;cursor:pointer;border:0;background:#ececec;color:var(--muted);border-radius:var(--r-s) var(--r-s) 0 0;padding:12px 28px;transition:background .15s,color .15s}
.rs .tabs button:hover{background:#ddd;color:var(--ink)}
.rs .tabs button[aria-selected="true"]{background:var(--ink);color:#fff;padding-block:16px 12px}
.rs[data-tab="svc"] [data-kind="arm"], .rs[data-tab="arm"] [data-kind="svc"]{display:none}

/* ---- 12の場面の目次：サイトの記録カード（RecordCard）と同じ決まり ---- */
.rs .idx-sec{padding-block:32px 72px}
.rs .idx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rs .icard{display:block;background:#fff;border-radius:8px;box-shadow:0 8px 16px rgba(0,0,0,.08);overflow:hidden;text-decoration:none!important;color:var(--ink)}
.rs .ithumb{display:block;aspect-ratio:16/9;background:#fff;overflow:hidden}
.rs .ithumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.rs .icard:hover .ithumb img{transform:scale(1.03)}
.rs .imeta{display:flex;flex-direction:column;gap:8px;padding:16px}
.rs .iline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rs .iv{font:400 18px/18px Inter,sans-serif}
.rs .iv small{font-size:11px;margin-left:2px}
.rs .ititle{font:600 16px/1.6 var(--sans);letter-spacing:0}

/* ---- 章と1場面：写真が主役、横に数字1つと確かめること。説明は開いたときだけ ---- */
.rs .ch{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.35;font-weight:900;margin-bottom:36px}
/* 影は「押せる」の印（サイトの記録カードと同じ）。場面のカードは押す物ではないので影を付けない */
.rs .card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;background:var(--sheet);border-radius:8px;overflow:hidden;margin-bottom:32px;scroll-margin-top:64px}
.rs .card.rev .shot{grid-column:2;grid-row:1}
.rs .card.rev .side{grid-column:1;grid-row:1}
.rs .shot{margin:0;background:#1b1b1b;display:flex;flex-direction:column}
.rs .shot-imgs{flex:1;display:flex;min-height:340px}
.rs .shot-imgs img{display:block;width:100%;height:100%;object-fit:cover;flex:1;min-width:0}
.rs .shot.pair .shot-imgs{gap:2px}
.rs .shot figcaption{color:#ccc;font-size:.78rem;line-height:1.6;padding:10px 16px}
.rs .side{padding:32px 34px}
.rs .where{margin:0 0 12px}
.rs .card h3{font-size:1.7rem;line-height:1.3;font-weight:900}
.rs .metric{display:grid;margin:18px 0 20px}
.rs .m-l{font-size:.82rem;font-weight:700;color:var(--muted)}
.rs .m-v{font-family:Inter,sans-serif;font-weight:800;font-size:2.6rem;line-height:1.15;letter-spacing:-.01em}
.rs .m-n{font-size:.82rem;color:var(--muted)}
.rs .card h4{font-size:.82rem;font-weight:800;margin:0 0 6px;color:var(--muted)}
.rs .ask{background:var(--ink);color:#fff;border-radius:var(--r-s);padding:18px 20px}
.rs .ask h4{color:#bbb}
.rs .ask ul{margin:0;padding-left:1.1em;display:grid;gap:8px}
.rs .ask li{font-size:.95rem;font-weight:700;line-height:1.6}
.rs .hk{display:flex;gap:12px;align-items:center;margin:18px 0 0}
.rs .hk img{width:52px;height:52px;border-radius:50%;flex:none}
.rs .hk blockquote{margin:0;background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:9px 14px;font-size:.9rem;font-weight:700;line-height:1.6}
.rs .more{grid-column:1/-1;border-top:1px solid var(--rule)}
.rs .more summary{cursor:pointer;list-style:none;padding:14px 34px;font-size:.88rem;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.rs .more summary::-webkit-details-marker{display:none}
.rs .more summary::after{content:"+";font-size:1.3rem;font-weight:400}
.rs .more[open] summary::after{content:"−"}
.rs .more summary:hover{background:var(--paper)}
.rs .more-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;padding:4px 34px 28px}
.rs .more-in p{font-size:.95rem}
.rs .cond{color:var(--muted);font-size:.85rem!important}
.rs .src a{display:block;font-size:.85rem}

/* ---- 最後：自分の現場で確かめる（黒の面）とボタン1つ ---- */
.rs .band-ink{background:var(--ink);color:#eee}
.rs .band-ink h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:900;margin-bottom:28px}
.rs .band-ink a{color:#fff}
.rs .prose{max-width:40em}
.rs .prose p{color:#ccc;font-size:1rem;line-height:1.9}
.rs .prose strong{color:#fff}
.rs .table{overflow-x:auto;margin:8px 0 28px;max-width:40em}
.rs .table table{border-collapse:collapse;width:100%;font-size:.92rem}
.rs .table th,.rs .table td{border-bottom:1px solid #444;padding:10px 12px;text-align:left;vertical-align:top}
.rs .table th{white-space:nowrap;font-weight:800;color:#fff}
.rs .cta{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:40em;margin-top:20px;text-decoration:none!important;background:var(--robot);color:#fff!important;padding:24px 26px;font-weight:900;font-size:1.15rem;line-height:1.35;border-radius:var(--r-s);transition:background .15s}
.rs .cta small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;margin-bottom:4px}
.rs .cta .ms{font-size:28px;transition:transform .2s}
.rs .cta:hover{background:#000}
.rs .cta:hover .ms{transform:translateX(3px)}

@media (max-width:900px){
  .rs section{padding-block:60px}
  .rs .fv{grid-template-columns:1fr;min-height:0}
  .rs .fv-copy{padding:48px var(--gut) 36px}
  .rs .fv-media{padding:16px var(--gut) 44px}
  .rs .fv-media figcaption{left:var(--gut);bottom:14px}
  .rs .idx{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .rs .card{grid-template-columns:1fr}
  .rs .card.rev .shot,.rs .card.rev .side{grid-column:auto;grid-row:auto}
  .rs .shot-imgs{min-height:0;aspect-ratio:4/3}
  .rs .side{padding:24px 20px}
  .rs .more summary{padding:14px 20px}
  .rs .more-in{grid-template-columns:1fr;gap:8px;padding:4px 20px 24px}
  .rs .card h3{font-size:1.45rem}
  .rs .m-v{font-size:2.2rem}
}
</style>
