<title>丸テーブル前後比較</title>
<meta name="claude:viewport-fit-sides" content="cover">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=IBM+Plex+Mono:wght@500;600&display=swap">
<style>
/* LP「どこで止まるか」に入れる前の確認用。LP と同じ明るいグレーの面・黒の文字・橙は1か所だけ */
:root{
  --bg:#f4f5f7; --panel:#ffffff; --fg:#121418; --sub:#5c616b; --line:#d9dce1; --accent:#f2600c; --dark:#121418; --on-dark:#ffffff;
  --sans:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#15171b;--panel:#1d2026;--fg:#eceef1;--sub:#a3a8b2;--line:#30343c;--dark:#eceef1;--on-dark:#121418;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#15171b;--panel:#1d2026;--fg:#eceef1;--sub:#a3a8b2;--line:#30343c;--dark:#eceef1;--on-dark:#121418;color-scheme:dark}
body{background:var(--bg);color:var(--fg);font:400 15px/1.8 var(--sans);word-break:auto-phrase}
.wrap{max-width:1040px;margin:0 auto;padding-block:40px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:48px}
.label{font:700 12px/1 var(--sans);letter-spacing:.08em;color:var(--sub)}
h1{margin:8px 0 0;font:900 26px/1.45 var(--sans);text-wrap:balance}
h2{margin:0;font:900 20px/1.5 var(--sans);text-wrap:balance}
p{margin:0}
.lead{color:var(--sub);max-width:42em}
.sec{display:grid;gap:16px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.pair{grid-template-columns:1fr}}
figure{margin:0;display:grid;gap:10px;min-width:0}
video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:992/864;background:#e8e2d6;border-radius:4px}
.cap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tag{display:inline-block;padding:4px 10px;border-radius:4px;font:700 13px/1.4 var(--sans);background:var(--dark);color:var(--on-dark)}
.tag.after{background:var(--accent);color:#fff}
.cap span{font-size:14px;color:var(--sub)}
.num{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 20px;background:var(--panel);border-radius:6px}
.num b{font:600 34px/1 var(--mono)}
.num em{font:600 34px/1 var(--mono);font-style:normal;color:var(--accent)}
.num i{font-style:normal;color:var(--sub)}
.num small{font-size:14px;color:var(--sub)}
.num span{flex-basis:100%;font-size:14px}
.note{font-size:13px;color:var(--sub)}
.switch{display:grid;gap:12px;max-width:560px}
.seg{display:inline-flex;gap:4px;padding:4px;background:var(--panel);border-radius:6px;justify-self:start}
.seg button{font:700 14px/1 var(--sans);padding:10px 18px;border:0;border-radius:4px;background:transparent;color:var(--fg);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--dark);color:var(--on-dark)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stack{position:relative}
.stack video{position:relative}
.stack video+video{position:absolute;inset:0}
.checks{display:grid;gap:10px;padding:20px;background:var(--panel);border-radius:6px}
.checks h2{font-size:17px}
.checks ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
</style>

<div class="wrap">
  <header>
    <p class="label">確認用（サイトには載せていません）</p>
    <h1>丸テーブルの間を広げると、ロボットは止まらなくなった</h1>
    <p class="lead">記憶の店（② 定番の郊外型）を3Dで建て、同じ客・同じ注文・同じ時刻で2回走らせました。違うのは、右の丸テーブルの位置だけです。ロボット2台・真上から・12倍速。右下の数字は、シミュレーションを始めてからの経過時間（分:秒）です。</p>
  </header>

  <section class="sec" aria-labelledby="a-h">
    <p class="label">影を短くして撮り直した版（光の高さ 52°→75°）</p>
    <div class="pair" id="pair">
      <figure>
        <video src="srl-before.mp4" poster="srl-before.jpg" muted playsinline preload="auto" aria-label="直す前。丸テーブルの間に白いロボット2台が止まり、青いスタッフがまわりを回る"></video>
        <figcaption class="cap"><b class="tag">直す前</b><span>丸テーブルの間 1.1m</span></figcaption>
      </figure>
      <figure>
        <video src="srl-after.mp4" poster="srl-after.jpg" muted playsinline preload="auto" aria-label="直した後。同じ時刻に、ロボットは丸テーブルの間を通り抜けていく"></video>
        <figcaption class="cap"><b class="tag after">直した後</b><span>右の丸テーブルを1.0m右へ／間 2.1m</span></figcaption>
      </figure>
    </div>
    <div class="num">
      <b>8</b><i>→</i><em>0</em><small>回</small>
      <span>丸テーブルの間で、ロボットが60秒以上動けなくなった回数（ロボット2台・1回分）</span>
    </div>
  </section>


</div>

<script>
(function(){
  function sync(vs){
    var go=function(){vs.forEach(function(v){try{v.currentTime=0;var p=v.play();if(p&&p.catch)p.catch(function(){});}catch(e){}});};
    vs.forEach(function(v){v.addEventListener('ended',go);});
    var n=0;vs.forEach(function(v){v.addEventListener('canplay',function once(){v.removeEventListener('canplay',once);if(++n===vs.length)go();});});
  }
  var pair=[].slice.call(document.querySelectorAll('#pair video'));
  var st=[].slice.call(document.querySelectorAll('#stack video'));
  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if(!reduce){sync(pair);sync(st);}else{pair.concat(st).forEach(function(v){v.controls=true;});}
  var b=document.getElementById('swBefore'),a=document.getElementById('swAfter');
  function show(after){st[0].hidden=after;st[1].hidden=!after;b.setAttribute('aria-pressed',String(!after));a.setAttribute('aria-pressed',String(after));}
  b.addEventListener('click',function(){show(false);});
  a.addEventListener('click',function(){show(true);});
})();
</script>
