---
// ロボットが現場で止まる瞬間の図鑑（/robot-stops）への入口。/series8 の配膳ロボットの LP のバナーの下に置く（2026-11-15）
// 形は ServingBanner と同じ（明るい面・左に文字・右に画像）。図鑑はサービスロボットとロボットアームの両方を載せるので、2枚を左右に並べて枠いっぱいに敷く
// 組み方はバナーの幅で切り替える（画面の幅ではない）。720px 未満では絵を上・文字を下に置き、文字が絵に押されて細くならないようにする
---
<div class="rsb-wrap">
  <a class="rsb-bn" href="/robot-stops" data-ev="series8:図鑑">
    <span class="rsb-img"><span class="rsb-ph"><img style="object-position:30% 55%" src="/media/robot_stops_02_second_robot_v2.jpg" alt="店を真上から見たシミュレーションの画面。2台の配膳ロボットが一本道で向かい合って止まっている" loading="lazy" /></span><span class="rsb-ph"><img style="object-position:35% 50%" src="/media/robot_stops_arm_gripper.jpg" alt="実機のロボットアームの爪が、赤いブロックの奥で閉じている" loading="lazy" /></span></span>
    <span class="rsb-text">
      <span class="rsb-label">導入前の確認</span>
      <span class="rsb-title">ロボットが現場で止まる瞬間の図鑑</span>
      <span class="rsb-sub">このシリーズの記録から、配膳ロボットが止まった場面を集めたページです。病院の搬送ロボット・ロボットアームを合わせた12の場面と、入れる前に確かめることをまとめました。</span>
      <span class="rsb-go">読む<i class="ms">arrow_forward</i></span>
    </span>
  </a>
</div>
<style>
  .rsb-wrap { container-type: inline-size; }
  .rsb-bn { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.08); background: #eceef1; color: #121418; text-decoration: none; }
  .rsb-bn:focus-visible { outline: 2px solid #121418; outline-offset: 3px; }
  .rsb-img { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 220px; overflow: hidden; background: #121418; }
  .rsb-ph { position: relative; overflow: hidden; }
  .rsb-img img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .6s ease; }
  .rsb-bn:hover .rsb-img img { transform: scale(1.03); }
  .rsb-text { display: grid; align-content: center; gap: 10px; padding: 24px 20px 28px; word-break: auto-phrase; text-wrap: pretty; }
  .rsb-label { font: 700 12px/18px var(--sans); color: #5c616b; letter-spacing: .08em; }
  .rsb-title { margin-top: 4px; font: 900 22px/1.45 var(--sans); }
  .rsb-sub { font: 400 14px/1.7 var(--sans); color: #4a4f58; max-width: 40em; }
  .rsb-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-top: 6px; padding: 0 20px; border-radius: 4px;
    background: #f2600c; color: #fff; font: 700 14px/1 var(--sans); white-space: nowrap; transition: background .15s, color .15s; }
  .rsb-bn:hover .rsb-go { background: #121418; color: #fff; }
  .rsb-go .ms { font-size: 18px; transition: transform .2s; }
  .rsb-bn:hover .rsb-go .ms { transform: translateX(3px); }
  /* 広いときは文字を左・絵を右に。文字の列は 360〜600px、残りの幅に絵を真ん中に置く */
  @container (min-width: 720px) {
    .rsb-bn { grid-template-columns: minmax(360px, 600px) minmax(0, 1fr); }
    .rsb-img { grid-column: 2; grid-row: 1; height: auto; min-height: 260px; }
    .rsb-img img { top: 0; left: 0; width: 100%; height: 100%; object-position: 50% 50%; }
    .rsb-text { grid-column: 1; grid-row: 1; padding: 36px 24px 36px 36px; }
  }
</style>