---
// 導入前の試算ガイド：配膳ロボットを、導入前に自分の店でシミュレーション（LP。LOG の記事ではない）
// 伝えること：導入前に、自分の店（提案先の店）で何が起きるかが分かる。その試算と3Dの店での確かめを頼める
// 数字は試算（public/sim/serving-robot.html）からビルドのときに読む（src/lib/servingSim.ts）。3Dの店の数字は LOG364・LOG367 の記録から
// 動画と画像は public/site/srl/（Unity の記録動画から切り出した短いループと、試算と同じ描き方の平面図）
import Base from '../layouts/Base.astro';
import { SITE, AUTHOR, PUBLISHER } from '../lib/seo';
import { headline as H, twoRobots, staffTable, plans, buyLarge, robotMonthRent, savedPerStaff, COST, CONDITIONS, min1, man, minStaff, STORES } from '../lib/servingSim';

const title = '配膳ロボットを、導入前に自分の店舗でシミュレーション ― 試算と3Dの店舗で確かめる';
const seoTitle = '配膳ロボットの導入前シミュレーション｜自分の店舗で試算と3D';
const yen = (v: number) => Math.round(v).toLocaleString('ja-JP');
const manAbs = (v: number) => man(Math.abs(v)).replace(/^[+−]/, '');
const conds = CONDITIONS.toLocaleString('ja-JP');

// 導入前に分かること（いくらかかるか）
const cost2 = robotMonthRent(2);
const savedPeak = savedPerStaff(2);
const savedShift = savedPerStaff(COST.shiftH);
const walkCut = Math.round((1 - H.same.walk_km_per_staff / H.base.walk_km_per_staff) * 100);

const description = `配膳ロボットの導入前シミュレーション。自分の店舗で何人で回るか・どこで止まるか・月いくらかかるかを、導入前に確かめる。${conds}条件の試算と、店舗を3D（Unity）で建てて走らせた記録から。2台入れても店舗が回る人数が減らない条件が${twoRobots.total}のうち${twoRobots.none}。飲食店と、提案するメーカー・販売会社向け。`;
const path = '/serving-robot-one-less-staff';
const url = SITE + path;
const today = '2026-10-24';
const jsonLd = [
  {
    '@context': 'https://schema.org', '@type': 'Article', headline: title, description,
    url, mainEntityOfPage: url, image: [SITE + '/og/serving-robot-one-less-staff.jpg'], inLanguage: 'ja',
    datePublished: today, dateModified: today, author: AUTHOR, publisher: PUBLISHER,
    articleSection: '導入前の試算ガイド',
    keywords: '配膳ロボット, 導入 シミュレーション, 導入前 試算, 人手不足, 飲食店, ファミレス, 人件費, 省力化投資補助金, Unity, サービスロボット, 提案',
    about: [{ '@type': 'Thing', name: '配膳ロボット' }, { '@type': 'Thing', name: '導入前の試算' }],
    isPartOf: { '@type': 'CollectionPage', name: 'サービスロボット導入シミュレーション', url: SITE + '/series8' },
    hasPart: { '@type': 'WebApplication', name: '配膳ロボットの導入試算', url: SITE + '/sim/serving-robot', applicationCategory: 'BusinessApplication', operatingSystem: 'Web', offers: { '@type': 'Offer', price: 0, priceCurrency: 'JPY' } },
  },
  {
    '@context': 'https://schema.org', '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Pixels to Motors', item: SITE + '/' },
      { '@type': 'ListItem', position: 2, name: 'サービスロボット導入シミュレーション', item: SITE + '/series8' },
      { '@type': 'ListItem', position: 3, name: '配膳ロボットの導入前シミュレーション', item: url },
    ],
  },
];
// 02 ① の切り替えの図に渡す（店 × 混み具合 × ロボット0〜3台の最少のスタッフ）
const staffData = staffTable.map((s) => ({ k: s.key, n: s.label, t: s.tables, c: s.crowd.map((c) => ({ a: c.arr, s: c.staff })) }));
const P5 = '通路を狭めた効率重視の店舗'; // 試算のデータの名前（「80cmに」）は通路を0.95mにする前のもの。LP ではこの名前で呼ぶ
const planMax = Math.max(...plans.map((p) => p.from));
// 最初の画面の右側：分割と全面を切り替える（分割4枚 → Unity の編集画面 → コード・図面・費用の3分割 → 試算の画面）。全面には元が大きい画像だけを使う
const p1 = plans.find((p) => p.key === 'fam_p1')!;
const p1Store = STORES.fam_p1, p1Arr = p1Store.arrivals[1];
const p1Staff0 = minStaff('fam_p1', 0, p1Arr)!, p1Staff2 = minStaff('fam_p1', 2, p1Arr)!;
const MENU = [
  { n: '01', id: 'trouble', t: '導入後のつまずき' }, { n: '02', id: 'know', t: '導入前に分かること' }, { n: '03', id: 'shape', t: 'なぜ自分の店舗でやるのか' },
  { n: '04', id: 'sim', t: 'まず、近い店舗で試す' }, { n: '05', id: 'flow', t: '頼むときの流れ' }, { n: '06', id: 'roles', t: '立場ごとの使い方' }, { n: '07', id: 'limits', t: 'この試算で言えないこと' },
];
---
<Base title={`${seoTitle} | Pixels to Motors`} description={description} path={path} ogImage="/og/serving-robot-one-less-staff.jpg" ogType="article" published={today} modified={today} jsonLd={jsonLd} noindex={true}>
  <link slot="head" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />
  <div class="srl">

<section class="fv" aria-labelledby="fv-h">
  <div class="fv-stage" aria-hidden="true">
    <div class="sc sc-split4 on" data-dur="6000">
      <figure class="ft t-plan"><img src="/site/srl/plan-p1.svg" alt="" width="320" height="230"><figcaption>店舗の平面図</figcaption></figure>
      <figure class="ft t-3d"><video src="/site/srl/fv-oblique.mp4" poster="/site/srl/fv-oblique.webp" muted loop playsinline preload="auto"></video><figcaption>同じ店舗を3Dで建てる</figcaption></figure>
      <figure class="ft t-run"><video src="/site/srl/top-busy.mp4" poster="/site/srl/top-busy.webp" muted loop playsinline preload="auto"></video><figcaption><span><span class="ft-long">スタッフとロボットを</span>走らせる</span><span class="ft-keys"><i class="k-robot"></i>ロボット<i class="k-staff"></i>スタッフ<i class="k-guest"></i>客</span></figcaption></figure>
      <figure class="ft t-res">
        <figcaption>試算の結果</figcaption>
        <dl>
          <div><dt>店舗が回る人数</dt><dd><b>{p1Staff0}</b><small>人</small><i>→</i><em>{p1Staff2}</em><small>人</small></dd></div>
          <div><dt>入店待ち</dt><dd><b>{min1(p1.from)}</b><small>分</small><i>→</i><em>{min1(p1.to)}</em><small>分</small></dd></div>
          <div><dt>ひと月の差し引き</dt><dd><em>{man(savedPeak - cost2)}</em><small>万円</small></dd></div>
        </dl>
        <p class="ft-note">効率重視の店舗・1時間{p1Arr}組・ロボット0台 → 2台（月額）</p>
      </figure>
    </div>
    <div class="sc sc-full" data-dur="4500">
      <figure class="ft t-full"><img class="kb" src="/site/srl/fv-unity.webp" alt="" width="1920" height="1741"><figcaption>Unity の編集画面で、店舗を建てて回す</figcaption></figure>
    </div>
    <div class="sc sc-split3" data-dur="6500">
      <figure class="ft t-term"><video src="/site/srl/terminal.mp4" poster="/site/srl/terminal.webp" muted playsinline preload="auto"></video><figcaption>試算のコードを回す（SimPy）</figcaption></figure>
      <figure class="ft t-routes"><img src="/site/srl/fv-routes.webp" alt="" width="1130" height="791"><figcaption>ロボットの道を図面に引く</figcaption></figure>
      <figure class="ft t-cost"><img src="/site/srl/fv-cost.webp" alt="" width="1862" height="1424"><figcaption>費用と浮く人件費</figcaption></figure>
    </div>
    <div class="sc sc-full" data-dur="4500">
      <figure class="ft t-full"><img class="kb" src="/site/srl/fv-sim.webp" alt="" width="2000" height="1840"><figcaption>人数・台数を変えて、結果を見比べる</figcaption></figure>
    </div>
    <div class="sc-bar"><i></i><i></i><i></i><i></i></div>
  </div>
  <div class="fv-side">
    <div class="fv-copy">
      <p class="who">配膳ロボットの導入を考える飲食店と、<br>提案するメーカー・販売会社の方へ</p>
      <h1 id="fv-h">配膳ロボットを、<br>導入前に自分の店舗で<br>シミュレーション</h1>
      <p class="fv-lead">店舗の図面と人数から、何人で回るか・どこで止まるか・月いくらかかるかを出します。</p>
      <a class="fv-btn" href="/message?topic=physical-ai" data-ev="FV:相談">自店の条件で試算を相談する<i class="ms" aria-hidden="true">arrow_forward</i></a>
    </div>
    <nav class="fv-menu" aria-label="このページの中身" data-ev-area="toc">
      {MENU.map((m) => <a href={`#${m.id}`} data-ev={`FVメニュー:${m.t}`}><span>{m.t}</span><em class="ms" aria-hidden="true">arrow_downward</em></a>)}
    </nav>
  </div>
</section>

<section id="trouble" class="band-white">
  <div class="wrap">
    <div class="sec-head center"><h2><span class="ph">導入後のつまずきの多くは、</span><span class="ph">導入前に分かる</span></h2></div>
    <p class="sec-lead">試算と3Dの店舗で、実際に出たつまずきです。どれも、店舗の形と使い方の決め方で結果が変わりました。</p>
    <div class="troubles">
      <figure class="tr">
        <img src="/site/srl/trouble-staff.webp" alt="3Dの店舗を斜めから見たところ。席は客で埋まっている" width="1400" height="930" loading="lazy">
        <figcaption><span class="tr-k">試算で</span><b>入れたのに、人が減らない</b><span class="tr-t">2台入れても、{twoRobots.total}条件のうち{twoRobots.none}条件で、店舗が回る最少のスタッフは同じ。ロボットが運ぶのは料理だけで、片付けと案内は人に残るため。</span></figcaption>
      </figure>
      <figure class="tr">
        <img src="/site/srl/trouble-register.webp" alt="3Dの店舗の入口とレジのまわりに、客とスタッフとロボットが固まっている" width="680" height="510" loading="lazy">
        <figcaption><span class="tr-k">3Dの店舗で</span><b>会計の列で、ロボットが止まる</b><span class="tr-t">会計に並ぶ客がロボットの通り道に立ち、レジのまわりで112回止まった。列と通り道を離すと31回に。</span></figcaption>
      </figure>
      <figure class="tr">
        <img src="/site/srl/trouble-pass.webp" alt="料理の受け渡し口の横で、ロボット2台が待ったまま、スタッフが料理を運んでいく" width="720" height="540" loading="lazy">
        <figcaption><span class="tr-k">3Dの店舗で</span><b>人が先に運び、ロボットが遊ぶ</b><span class="tr-t">料理が出てくるカウンター（受け渡し口）の横にいるスタッフが先に運び、ロボットが運んだ料理は約3割。ロボットに先に割り当てる決まりにして約7割に。</span></figcaption>
      </figure>
    </div>
  </div>
</section>

<section id="know">
  <div class="wrap">
    <div class="sec-head center"><h2><span class="ph">導入前に分かる</span><span class="ph"><span class="lat">3</span>つのこと</span></h2></div>
    <div class="know">
      <div class="kn">
        <div class="kn-text">
          <h3>何人で回るか</h3>
          <p>店舗と混み具合を選ぶと、ロボット0〜3台ごとに、店舗が回る最少のスタッフが出ます。標準ファミレスの普通の混み具合では、何台入れても3人のまま。大型店や焼肉の食べ放題では、1人減る混み具合があります。</p>
          <p class="kn-note">「店舗が回る」は、席が空いているのに片付けや案内が追いつかずに待つ時間が、平均10分未満のこと。ロボットは料理を運ぶだけで、1往復で3卓まで回る前提です。</p>
        </div>
        <figure class="staff-fig">
          <div class="seg" role="group" aria-label="店舗を選ぶ" id="segStore">
            {staffData.map((s) => <button type="button" data-k={s.k} aria-pressed={s.k === 'family' ? 'true' : 'false'}>{s.n}</button>)}
          </div>
          <div class="seg small" role="group" aria-label="混み具合を選ぶ" id="segCrowd">
            <button type="button" data-c="0" aria-pressed="false">空いている</button><button type="button" data-c="1" aria-pressed="true">普通</button><button type="button" data-c="2" aria-pressed="false">混雑</button>
          </div>
          <p class="staff-cond" id="staffCond"></p>
          <div class="staffrows" id="staffRows" aria-live="polite"></div>
        </figure>
      </div>
      <div class="kn rev">
        <div class="kn-text">
          <h3>どこで止まるか</h3>
          <p>試算の店舗を3D（Unity）で建て、スタッフ・客・ロボットを動かして、止まった回数と場所を数えます。直し方を決めたら、同じ店舗でもう一度走らせて確かめます。</p>
          <div class="kn-nums">
            <div><span>細い通路の入口で、ロボットどうしが鉢合わせ</span><b>79<i>→</i><em>0</em><small>回</small></b></div>
            <div><span>レジのまわりでロボットが止まる</span><b>112<i>→</i><em>31</em><small>回</small></b></div>
          </div>
        </div>
        <figure class="clip clip-4">
          <video class="loop" src="/site/srl/four-views.mp4" poster="/site/srl/four-views.webp" muted loop playsinline preload="none" aria-label="3Dの店舗を、真上・正面・横・斜めの4つの視点で同時に映した動画。キッチンのモニターに、ロボットとスタッフがいま何をしているかが出ている"></video>
          <figcaption>同じ店舗を、真上・正面・横・斜めの4つの視点で同時に見る。左上の枠（キッチンのモニター）に、ロボットとスタッフがいま何をしているか、止まった回数が出ます。</figcaption>
        </figure>
      </div>
      <div class="kn">
        <div class="kn-text">
          <h3>月いくらかかるか</h3>
          <p>ロボット2台を月額で借りると月{manAbs(cost2)}万円。1人減って浮く人件費は月{manAbs(savedPeak)}万円で、差し引きは月{man(savedPeak - cost2)}万円です。条件と、人件費以外で変わることも並べます。</p>
          <ul class="kn-list">
            <li><span>昼と夜に4時間ずつ減らせたら</span><b>{man(savedShift - cost2)}<small>万円/月</small></b></li>
            <li><span>買って補助金を使う大型店（{buyLarge.from}人 → {buyLarge.to}人）</span><b>{man(buyLarge.net)}<small>万円/月</small></b></li>
            <li><span>人数そのままで、1人が歩く距離</span><b><small>約</small>{walkCut}<small>%減</small></b></li>
          </ul>
        </div>
        <figure class="cost-fig">
          <p class="cf-k">1人減ったときの、ひと月の差し引き</p>
          <b class="cf-big">{man(savedPeak - cost2)}<small>万円/月</small></b>
          <div class="cb-row"><span class="cb-l">ロボット2台の費用</span><span class="cb-track"><i class="cb-robot" style={`width:${(cost2 / Math.max(cost2, savedPeak) * 100).toFixed(1)}%`}></i></span><b class="cb-v">{manAbs(cost2)}<small>万円</small></b></div>
          <div class="cb-row"><span class="cb-l">浮く人件費（1人）</span><span class="cb-track"><i class="cb-ink" style={`width:${(savedPeak / Math.max(cost2, savedPeak) * 100).toFixed(1)}%`}></i></span><b class="cb-v">{manAbs(savedPeak)}<small>万円</small></b></div>
          <figcaption>ロボットは1台 月{yen(COST.rent)}円・保守{yen(COST.maint)}円・充電{yen(COST.charge)}円。人件費は混む2時間 × 1日2回 × 30日 × 時給{yen(COST.wage)}円（2026年度の最低賃金の全国平均・社会保険などは入れていない）。補助金は省力化投資補助金（カタログ注文型）で、補助率は1/2以下。条件があり、使う製品が対象かはカタログと公募要領で確かめます。</figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>

<section id="shape" class="band-white">
  <div class="wrap wide">
    <div class="shape-top">
      <div class="sec-head center"><h2><span class="ph">答えは、</span><span class="ph">店舗の形で変わる</span></h2></div>
      <div class="prose"><p>同じ2台でも、入店待ちの縮み方は店舗ごとに違います。近い店舗の数字は、自分の店舗の答えになりません。</p></div>
    </div>
    <div class="plans">
      {plans.map((p) => (
        <figure class="plan">
          <img src={`/site/srl/plan-${p.file}.svg`} alt={`${p.key === 'fam_p5' ? P5 : p.name.replace(/店$/, '店舗')}の平面図`} loading="lazy" width="320" height="230">
          <figcaption>
            <b>{p.key === 'fam_p5' ? P5 : p.name.replace(/店$/, '店舗')}</b>
            <span class="pmeta">{p.tables}卓・スタッフ{p.staff}人・1時間{p.arrivals}組</span>
            <span class="pbar" aria-hidden="true"><i class="pb-from" style={`width:${(p.from / planMax * 100).toFixed(1)}%`}></i><i class="pb-to" style={`width:${(p.to / planMax * 100).toFixed(1)}%`}></i></span>
            <span class="pval">{min1(p.from)}<i>→</i><em>{min1(p.to)}</em><small>分</small></span>
          </figcaption>
        </figure>
      ))}
    </div>
    <p class="plans-note">数字は入店待ち（ロボット0台 → 2台）。スタッフは試算の初めの人数、混み具合は普通。寸法はすべて仮の値です。</p>
  </div>
</section>

<section id="sim" class="band-ink" data-ev-area="sim">
  <div class="wrap wide">
    <div class="sec-head center"><h2><span class="ph">まず、</span><span class="ph">近い店舗で試す</span></h2></div>
    <div class="prose center-p"><p>条件を選ぶと、その場で数字が変わります。自分の店舗の形で出すときは、下の流れで頼めます。</p></div>
    <div class="simbox">
      <iframe src="/sim/serving-robot.html?embed=1&lp=1" title="配膳ロボットの導入試算" loading="lazy" class="simframe"></iframe>
    </div>
    <div class="sim-foot">
      <a class="sim-open" href="/sim/serving-robot" target="_blank" rel="noopener" data-ev="試算を全画面で開く">試算を全画面で開く<i class="ms" aria-hidden="true">open_in_new</i></a>
      <span>1つの条件につき40回計算した平均です（全{conds}条件）。</span>
    </div>
  </div>
</section>

<section id="flow">
  <div class="wrap">
    <div class="sec-head center"><h2><span class="ph">頼むときに送るのは、</span><span class="ph">図面と人数と混む時間</span></h2></div>
    <ol class="steps">
      <li><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><path d="M8 4h22l10 10v30H8z"/><path class="w" d="M24 36V20M17 26l7-7 7 7"/></svg><b>図面と条件を送る</b><span>店舗の図面（写真と寸法でも）、卓の数、スタッフの人数、混む時間、ロボットの使い方</span></li>
      <li><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><rect x="4" y="6" width="40" height="36"/><path class="w" d="M26 6v14M26 28v14M4 22h14M26 30h18"/></svg><b>図面に起こす</b><span>卓・通路・受け渡し口・レジ・待機場所を、試算と3Dの店舗で使える形にする</span></li>
      <li><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><rect x="4" y="26" width="9" height="18"/><rect x="19" y="14" width="9" height="30"/><rect x="34" y="4" width="9" height="40"/></svg><b>試算する</b><span>ロボット0台から何台までで、店舗が回る最少の人数・待ち時間・費用を出す</span></li>
      <li><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><path d="M24 3l19 10v22L24 45 5 35V13z"/><path class="w" d="M5 13l19 10 19-10M24 23v22"/></svg><b>3Dの店舗で走らせる</b><span>通路・レジ・受け渡し口で、止まる所と回数を数える</span></li>
      <li><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><path d="M8 4h32v40H8z"/><path class="w" d="M15 25l6 6 12-13"/></svg><b>結果と直し方を返す</b><span>下の4つをまとめてお返しする</span></li>
    </ol>
    <div class="receive">
      <p class="rc-k">受け取るもの</p>
      <ul>
        <li><b>何人で回るか</b><span>ロボットの台数ごとの、店舗が回る最少の人数と待ち時間の表</span></li>
        <li><b>どこで止まるか</b><span>3Dの店舗で止まった所の図と、走らせた動画</span></li>
        <li><b>どう直すか</b><span>待機場所・通路・会計の列・ロボットの使い方の直し方</span></li>
        <li><b>いくらかかるか</b><span>月額と購入の費用、浮く人件費、補助金の目安</span></li>
      </ul>
    </div>
  </div>
</section>

<section id="roles" class="band-ink">
  <div class="wrap">
    <div class="sec-head center"><h2><span class="ph">店舗は「入れるか」を、</span><span class="ph">提案する側は「どう入れるか」を決める</span></h2></div>
    <div class="roles">
      <div class="role">
        <p class="role-k">飲食店の経営者・事業責任者</p>
        <ul><li>入れるか、何台か、どの使い方か</li><li>人件費と補助金で、費用が合うか</li><li>どの店舗から入れるか</li></ul>
      </div>
      <div class="role">
        <p class="role-k">配膳ロボットのメーカー・販売会社</p>
        <ul><li>提案先の店舗での、人数と費用の根拠</li><li>導入前に、通路・待機場所・会計の列を決める</li><li>導入後の「止まる」相談を減らす</li></ul>
      </div>
    </div>
  </div>
</section>

<section id="limits" class="band-tint">
  <div class="wrap">
    <div class="limits">
      <div class="sec-head center"><h2><span class="ph">この試算で</span><span class="ph">言えないこと</span></h2></div>
      <ul class="lim">
        <li>数字は、公開されている導入事例とメーカーの仕様をもとにした仮の前提です。実際の店舗で測った値ではありません。</li>
        <li>ロボットなしでは、3Dの店舗と試算の料理の待ちが平均0.2〜0.4分の差で合いました。ロボットを入れたときの差は、原因を分けて調べている途中です（<a href="/record/serving-robot-stage-b-18-runs">LOG367</a>）。</li>
        <li>実際の店舗で数えた値が入るほど、前提を直して合わせていきます。数えるための<a href="/record/serving-robot-observation-sheet">観察シート</a>も公開しています。</li>
      </ul>
    </div>
  </div>
</section>

<section id="next" class="cta-a">
  <div class="wrap">
    <div class="cta-a-in">
      <div class="cta-a-copy">
        <p class="cta-a-k">図面と人数を送ってもらえれば、同じ試算でお返しします。</p>
        <h2>次は、<br>あなたの店舗で。</h2>
        <p class="cta-a-sub">提案先の店舗での試算や、3Dの店舗での確かめの相談も受け付けています。</p>
      </div>
      <div class="cta-a-act">
        <ul class="send">
          <li><i class="ms" aria-hidden="true">map</i><span>店舗の図面<small>写真と寸法でも</small></span></li>
          <li><i class="ms" aria-hidden="true">groups</i><span>スタッフの人数と、混む時間</span></li>
          <li><i class="ms" aria-hidden="true">smart_toy</i><span>ロボットの使い方<small>料理だけ・下げ膳にも など</small></span></li>
        </ul>
        <a class="cta-x-main" href="/message?topic=physical-ai" data-ev="最後:相談"><span><small>自店・提案先の条件で</small>試算を相談する</span><i class="ms" aria-hidden="true">arrow_forward</i></a>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:32px">
  <div class="wrap sources">
    <details>
      <summary>出典と記録</summary>
      <ul>
        <li>試算：<a href="/sim/serving-robot">配膳ロボットの導入試算</a>（SimPy・{conds}条件・各40回の平均）。このページの試算の数字は、試算のページから読み込んでいます</li>
        <li>記録：サービスロボット導入シミュレーション <a href="/record/serving-robot-simulation-simpy">Log#1（試算を作る）</a>・<a href="/record/serving-robot-observation-sheet">Log#2（観察シート）</a>・<a href="/record/unity-family-restaurant-serving-robot">Log#4（3Dの店舗を建てる）</a>・<a href="/record/audit-simulator-before-unity">Log#5</a>・<a href="/record/floor-plans-into-simulator">Log#6（平面図）</a>・<a href="/record/unity-store-from-site-json">Log#7</a>・<a href="/record/serving-robot-cost-subsidy">Log#8（費用と補助金）</a>・<a href="/record/serving-robot-jam-points">Log#9（詰まる所）</a>・<a href="/record/serving-robot-stage-b-18-runs">Log#10（18回の台帳）</a></li>
        <li>費用：<a href="https://www.onamae.com/business/article/306061/">お名前.com ビジネス（配膳ロボットの導入費用）</a>、<a href="https://sogyotecho.jp/inshokuten-haizenrobot/">創業手帳（保守・充電）</a></li>
        <li>時給：<a href="https://www.jil.go.jp/kokunai/blt/backnumber/2026/10/special_03.html">労働政策研究・研修機構（2026年度の最低賃金）</a></li>
        <li>補助金：<a href="https://hojyokin-portal.jp/columns/shoryokuka-catalog">補助金ポータル（省力化投資補助金 カタログ注文型）</a>、<a href="https://www.mhlw.go.jp/content/001696868.pdf">厚生労働省（介護業で申請できる製品の例に配膳ロボット）</a></li>
      </ul>
    </details>
  </div>
</section>
  </div>
</Base>
<script is:inline define:vars={{ staffData }}>
(function(){
  // ---- 動画：見えている間だけ再生する（動きを減らす設定では止めておく） ----
  var still = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  // ---- 最初の画面：分割と全面を順に切り替える ----
  var scs = [].slice.call(document.querySelectorAll('.srl .fv-stage .sc')), bars = [].slice.call(document.querySelectorAll('.srl .sc-bar i')), si = 0, timer = null;
  function vids(sc, play){ sc.querySelectorAll('video').forEach(function(v){ if (play) { if (v.closest('.t-term')) v.currentTime = 0; v.play().catch(function(){}); } else v.pause(); }); }
  function show(n){
    var cur = scs[si], nx = scs[n];
    scs.forEach(function(x){ x.classList.remove('prev'); });
    if (cur !== nx) { cur.classList.remove('on'); cur.classList.add('prev'); setTimeout(function(){ cur.classList.remove('prev'); vids(cur, false); }, 1300); }
    nx.classList.remove('on'); void nx.offsetWidth; nx.classList.add('on'); vids(nx, true);
    bars.forEach(function(b, k){ b.classList.toggle('done', k < n); b.classList.remove('on'); });
    var d = +nx.dataset.dur; bars[n].style.setProperty('--d', d + 'ms'); void bars[n].offsetWidth; bars[n].classList.add('on');
    si = n; clearTimeout(timer); timer = setTimeout(function(){ show((si + 1) % scs.length); }, d);
  }
  if (still) { vids(scs[0], false); bars.forEach(function(b){ b.style.display = 'none'; }); }
  else {
    show(0);
    document.addEventListener('visibilitychange', function(){ if (document.hidden) { clearTimeout(timer); vids(scs[si], false); } else show(si); });
  }
  var loops = document.querySelectorAll('.srl video.loop');
  if (still) { loops.forEach(function(v){ v.controls = true; }); }
  else if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function(es){ es.forEach(function(e){ var v = e.target; if (e.isIntersecting) { v.play().catch(function(){}); } else { v.pause(); } }); }, { threshold: .35 });
    loops.forEach(function(v){ io.observe(v); });
  }

  // ---- 02 ①：店が回る最少のスタッフ ----
  var store = 'family', crowd = 1;
  var rowsEl = document.getElementById('staffRows'), condEl = document.getElementById('staffCond');
  var CROWD = ['空いている','普通','混雑'];
  // 人とロボットの絵（人＝頭と体、ロボット＝顔の画面と段の付いた配膳ロボット）
  var ICON = {
    'g-staff': '<svg viewBox="0 0 16 30" aria-hidden="true"><circle cx="8" cy="4.6" r="4.2"/><path d="M1.5 13.2c0-2.3 1.9-4.2 4.2-4.2h4.6c2.3 0 4.2 1.9 4.2 4.2v8.3h-3.1V30H4.6v-8.5H1.5z"/></svg>',
    'g-robot': '<svg viewBox="0 0 22 30" aria-hidden="true"><rect x="3" y="0.5" width="16" height="10" rx="3.5"/><circle class="w" cx="8" cy="5.5" r="1.5"/><circle class="w" cx="14" cy="5.5" r="1.5"/><path d="M4 12h14l1.6 15H2.4z"/><rect x="2" y="27.5" width="18" height="2" rx="1"/></svg>'
  };
  function dots(n, cls){ var s=''; for (var i=0;i<n;i++) s+='<i class="'+cls+'">'+ICON[cls]+'</i>'; return s; }
  function renderStaff(){
    var s = staffData.find(function(x){ return x.k === store; }), c = s.c[crowd];
    condEl.textContent = s.n + '（' + s.t + '卓）・' + CROWD[crowd] + '（1時間' + c.a + '組）';
    var base = c.s[0], h = '';
    c.s.forEach(function(st, n){
      var diff = (base != null && st != null) ? st - base : null;
      var tag = n === 0 ? '<em class="same">基準</em>' : diff == null ? '' : diff < 0 ? '<em class="cut">' + (-diff) + '人減る</em>' : diff > 0 ? '<em class="plus">揺らぎ</em>' : '<em class="same">減らない</em>';
      h += '<div class="srow"><span class="sl">ロボット' + n + '台</span><span class="sg">' + dots(st || 0, 'g-staff') + dots(n, 'g-robot') + '</span><span class="sv"><b>' + (st == null ? '―' : st) + '</b><small>人</small>' + tag + '</span></div>';
    });
    rowsEl.innerHTML = h;
    document.querySelectorAll('#segStore button').forEach(function(b){ b.setAttribute('aria-pressed', String(b.dataset.k === store)); });
    document.querySelectorAll('#segCrowd button').forEach(function(b){ b.setAttribute('aria-pressed', String(+b.dataset.c === crowd)); });
  }
  document.querySelectorAll('#segStore button').forEach(function(b){ b.addEventListener('click', function(){ store = b.dataset.k; renderStaff(); }); });
  document.querySelectorAll('#segCrowd button').forEach(function(b){ b.addEventListener('click', function(){ crowd = +b.dataset.c; renderStaff(); }); });
  renderStaff();
})();
</script>
<style is:global>
.srl{
  --paper:#f7f7f7; --sheet:#ffffff; --ink:#242424; --muted:#555; --rule:#e6e6e6;
  --robot:#f2600c;         /* 差し色：ロボット（ロボットを入れたときの値・ロボットの印）だけに使う。最後のCTAのボタンも研究室LPとそろえてこの色 */
  --gut:max(16px,env(safe-area-inset-left,0px));
  --sans:"Manrope","Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --body:36em;
}
.srl, .srl *{box-sizing:border-box}
.srl{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.75;letter-spacing:.02em;padding-top:48px;text-autospace:normal;-webkit-font-smoothing:antialiased}
.srl a{color:var(--ink);text-underline-offset:3px}
.srl p a,.srl figcaption a,.srl li a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.srl p a:hover,.srl figcaption a:hover,.srl li a:hover{text-decoration-thickness:2px}
.srl a:focus-visible,.srl button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.srl .wrap{max-width:calc(1040px + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}
/* 広くするのは2つだけ：6つの平面図（図を大きく見せて店舗ごとの違いを読ませる）と、埋め込んだ試算（左の条件と右の結果を横に並べたまま使えるように） */
.srl .wrap.wide{max-width:calc(1280px + 2*var(--gut))}
.srl .prose{max-width:var(--body)}
.srl .prose p{font-size:1.02rem;line-height:1.9}
.srl .mono{font-family:var(--mono);letter-spacing:0}
.srl h1,.srl h2,.srl h3{text-wrap:balance;letter-spacing:0}
.srl h2{font-size:clamp(1.75rem,3.3vw,2.55rem);line-height:1.3;margin:0;font-weight:800;letter-spacing:-.005em}
.srl h2 .ph{display:inline-block}
.srl h3{font-size:1.5rem;line-height:1.4;margin:0;font-weight:900}
.srl p{margin:0 0 1em}
.srl section{padding-block:96px}
.srl section > .wrap{display:grid;gap:24px}
.srl figure{margin:0;min-width:0}
.srl figcaption{font-size:.74rem;color:var(--muted);line-height:1.65}
.srl .lat{-webkit-text-stroke:.028em currentColor;paint-order:stroke fill;letter-spacing:.01em}

/* ---- 帯と見出し ---- */
.srl .band-white{background:#fff}
.srl .band-tint{background:#f0f0f0}
.srl .band-ink{background:var(--ink);color:#eee}
.srl .band-ink h2,.srl .band-ink h3{color:#fff}
.srl .band-ink .prose p{color:#ccc}
.srl .band-ink a{color:#fff}
.srl .sec-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.srl .sec-head h2{flex:1 1 20rem;padding-bottom:4px}
.srl .sec-head.center{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px}
.srl .sec-head.center h2{flex:none}
.srl .center-p{margin:0 auto;text-align:center}
.srl .sec-lead{margin:0 auto;text-align:center;max-width:none;color:var(--muted);font-size:1rem;line-height:1.85}

/* ---- FV：左に見出しとメニュー（黒の面）、右に切り替わる動画（膜をかけない） ---- */
.srl .fv{display:grid;grid-template-columns:minmax(360px,32rem) minmax(0,1fr);background:#242424;color:#fff;padding:0;min-height:max(640px,calc(100svh - 48px))}
.srl .fv-stage{grid-column:2;grid-row:1;position:relative;overflow:hidden;background:#242424;min-height:0}
/* 場面：分割と全面を切り替える。入ってくる場面の枠は、左から順に開く */
.srl .sc{position:absolute;inset:8px 8px 8px 0;display:grid;gap:8px;visibility:hidden;z-index:1}
.srl .sc.on{visibility:visible;z-index:3}
.srl .sc.prev{visibility:visible;z-index:2}
.srl .sc.on .ft{animation:ftIn .9s cubic-bezier(.65,0,.25,1) both}
.srl .sc.on .ft:nth-child(2){animation-delay:.12s}
.srl .sc.on .ft:nth-child(3){animation-delay:.24s}
.srl .sc.on .ft:nth-child(4){animation-delay:.36s}
@keyframes ftIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.srl .sc-split4{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.srl .ft.t-plan{grid-column:1/6;grid-row:1;background:#fff}
.srl .t-plan img{object-fit:contain!important;padding:52px 20px 16px}
.srl .t-3d{grid-column:6/13;grid-row:1}
.srl .t-run{grid-column:1/8;grid-row:2}
.srl .t-res{grid-column:8/13;grid-row:2}
.srl .sc-full{grid-template-columns:1fr;grid-template-rows:1fr}
.srl .sc-full .kb{object-position:50% 30%}
.srl .sc-full.on .kb{animation:kb 5s linear both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.srl .sc-split3{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,11fr) minmax(0,9fr)}
.srl .ft.t-term{grid-column:1/13;grid-row:1;background:#0d0f12}
.srl .t-term video{object-fit:cover;object-position:left top}
.srl .ft.t-term figcaption{top:auto;bottom:12px}
.srl .ft.t-routes{grid-column:1/7;grid-row:2;background:#fff}
.srl .t-routes img{object-fit:contain!important;padding:48px 12px 10px}
.srl .ft.t-cost{grid-column:7/13;grid-row:2;background:#fff}
.srl .t-cost img{object-position:left top}
.srl .sc-bar{position:absolute;right:18px;bottom:18px;z-index:5;display:flex;gap:6px}
.srl .sc-bar i{display:block;width:28px;height:3px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.srl .sc-bar i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.srl .sc-bar i.done::after{transform:scaleX(1)}
.srl .sc-bar i.on::after{animation:bar var(--d,5s) linear both}
@keyframes bar{to{transform:scaleX(1)}}
.srl .ft{position:relative;overflow:hidden;margin:0;background:#2f2f2f;min-height:0}
.srl .ft img,.srl .ft video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.srl .ft figcaption{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;max-width:calc(100% - 24px);padding:6px 10px;background:#242424;color:#fff;font-size:.78rem;font-weight:700;line-height:1.4}
.srl .ft.t-res{background:#fff;color:var(--ink);display:grid;grid-template-rows:1fr auto;gap:10px;padding:60px 22px 18px}
.srl .t-res figcaption{background:var(--ink)}
.srl .t-res dl{margin:0;display:grid;grid-auto-rows:1fr;gap:0;border-top:2px solid var(--ink)}
.srl .t-res dl div{display:grid;align-content:center;gap:2px;padding:8px 0;border-bottom:1px solid var(--rule)}
.srl .t-res dt{font-size:.74rem;font-weight:700;color:var(--muted)}
.srl .t-res dd{margin:0;font-family:'Manrope','Noto Sans JP',sans-serif;font-weight:800;font-size:clamp(1.4rem,2.1vw,2.3rem);line-height:1.1;white-space:nowrap;text-autospace:no-autospace}
.srl .t-res dd small{font-size:.42em;font-weight:700;margin:0 2px}
.srl .t-res dd i{font-style:normal;font-size:.5em;color:var(--muted);margin:0 6px;vertical-align:.15em}
.srl .t-res dd em{font-style:normal;color:var(--robot)}
.srl .ft-note{margin:0;font-size:.72rem;color:var(--muted)}
.srl .ft-keys{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:#ddd;font-size:.72rem}
.srl .ft-keys i{display:inline-block;width:9px;height:9px;margin-left:6px}
@media (prefers-reduced-motion: reduce){.srl .sc.on .ft,.srl .sc-full.on .kb{animation:none}}
.srl .k-robot{background:#fff}.srl .k-staff{background:#2f5bd8}.srl .k-guest{background:#f2c230}
.srl .fv-side{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:36px;padding:48px 0}
.srl .fv-copy{display:grid;gap:20px;padding:0 44px}
.srl .fv .who{margin:0;font-size:.86rem;font-weight:700;line-height:1.65;color:#bbb}
.srl .fv h1{margin:0;font-size:clamp(2.2rem,3.1vw,2.9rem);line-height:1.2;font-weight:900;letter-spacing:-.01em;word-break:keep-all}
.srl .fv-lead{margin:0;font-size:.96rem;line-height:1.9;color:#ddd}
.srl .fv-btn{justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:15px 20px;background:#fff;color:var(--ink)!important;font-weight:800;font-size:.95rem;text-decoration:none;transition:background .15s,color .15s}
.srl .fv-btn .ms{font-size:18px;transition:transform .2s}
.srl .fv-btn:hover{background:var(--ink);color:#fff!important;box-shadow:inset 0 0 0 1.5px #fff}
.srl .fv-btn:hover .ms{transform:translateX(3px)}
.srl .fv-menu{display:grid;border-top:1px solid #3a3a3a}
.srl .fv-menu a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 44px;border-bottom:1px solid #3a3a3a;color:#eee;text-decoration:none;font-size:.86rem;font-weight:700;transition:background .15s,color .15s}
.srl .fv-menu a i{font-style:normal;font-size:.74rem;color:#888}
.srl .fv-menu a em{font-style:normal;font-size:16px;color:#888;transition:transform .2s}
.srl .fv-menu a:hover{background:#2f2f2f;color:#fff}
.srl .fv-menu a:hover em{transform:translateY(3px);color:#fff}

/* ---- 01 つまずき ---- */
.srl .troubles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:16px}
.srl .tr{display:grid;gap:16px;align-content:start}
.srl .tr img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#3a3a3a}
.srl .tr figcaption{display:grid;gap:8px;color:var(--ink);font-size:.9rem}
.srl .tr-k{justify-self:start;font-size:.76rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.srl .tr b{font-size:1.2rem;line-height:1.45;font-weight:900}
.srl .tr-t{color:var(--muted);line-height:1.75}

/* ---- 02 分かる3つのこと ---- */
.srl .know{display:grid;gap:88px;margin-top:24px}
.srl .kn{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.srl .kn.rev{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.srl .kn.rev .kn-text{order:2}
.srl .kn-text{display:grid;gap:14px;align-content:start}
.srl .kn-no{font-family:'Manrope','Noto Sans JP',sans-serif;font-weight:800;font-size:1.1rem;color:var(--muted)}
.srl .kn-text p{margin:0;font-size:.98rem;line-height:1.9}
.srl .kn-note{font-size:.8rem!important;color:var(--muted);line-height:1.7!important}
.srl .kn-nums{display:grid;border-top:2px solid var(--ink);margin-top:6px}
.srl .kn-nums div{display:grid;gap:6px;padding:18px 0 16px;border-bottom:1px solid var(--rule)}
.srl .kn-nums div b{font-size:clamp(2.6rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.02em}
.srl .kn-nums div b em{font-weight:800}
.srl .kn-nums span{font-size:.84rem;font-weight:700}
.srl .kn-nums b,.srl .kn-list b{font-family:'Manrope','Noto Sans JP',sans-serif;font-weight:800;font-size:2rem;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;text-autospace:no-autospace}
.srl .kn-nums i{font-style:normal;font-size:.55em;margin:0 10px;color:var(--muted);vertical-align:.15em}
.srl .kn-nums em{font-style:normal;color:var(--robot)}
.srl .kn-nums small,.srl .kn-list small{font-size:.42em;font-weight:700;margin:0 3px}
.srl .kn-list{list-style:none;margin:6px 0 0;padding:0;display:grid;border-top:2px solid var(--ink)}
.srl .kn-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule)}
.srl .kn-list span{font-size:.86rem;font-weight:700}
.srl .kn-list b{font-size:1.5rem}
.srl .staff-fig{background:var(--sheet);padding:30px 30px 24px;display:grid;gap:14px;box-shadow:0 1px 0 var(--rule)}
.srl .seg{display:flex;flex-wrap:wrap;gap:6px}
.srl .seg button{font:inherit;font-size:.85rem;font-weight:700;padding:7px 12px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.srl .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.srl .seg.small button{font-size:.8rem;padding:5px 10px}
.srl .staff-cond{margin:6px 0 0;font-size:.82rem;font-weight:700;color:var(--muted)}
.srl .staffrows{display:grid;border-top:2px solid var(--ink)}
.srl .srow{display:grid;grid-template-columns:7rem minmax(0,1fr) 9rem;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.srl .srow .sl{font-size:.88rem;font-weight:700}
.srl .srow .sg{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.srl .g-staff,.srl .g-robot{display:block;width:17px;height:32px;line-height:0}
.srl .g-robot{width:23px}
.srl .g-staff svg,.srl .g-robot svg{width:100%;height:100%;display:block}
.srl .g-staff svg{fill:var(--ink)}
.srl .g-robot svg{fill:var(--robot)}
.srl .g-robot svg .w{fill:#fff}
.srl .g-staff + .g-robot{margin-left:12px}
.srl .srow .sv{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;white-space:nowrap}
.srl .srow .sv b{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.9rem;line-height:1}
.srl .srow .sv small{font-size:.8rem;font-weight:700;margin-right:10px}
.srl .srow em{font-style:normal;font-size:.72rem;font-weight:700;padding:3px 8px;min-width:4.6em;text-align:center}
.srl .srow em.same{background:#f0f0f0;color:var(--muted)}
.srl .srow em.cut{background:var(--ink);color:#fff}
.srl .srow em.plus{background:transparent;color:var(--muted);border:1px solid var(--rule)}
.srl .clip{display:grid;gap:10px}
.srl .clip-4{max-width:480px;justify-self:center;width:100%}
.srl .clip-4 video{aspect-ratio:694/720!important}
.srl .clip video{display:block;width:100%;height:auto;aspect-ratio:976/652;background:#3a3a3a;box-shadow:0 24px 48px -28px rgba(36,36,36,.45)}
.srl .cost-fig{background:var(--sheet);padding:32px;display:grid;gap:14px;box-shadow:0 1px 0 var(--rule)}
.srl .cf-k{margin:0;font-size:.86rem;font-weight:700;color:var(--muted)}
.srl .cf-big{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(3.6rem,7vw,6rem);line-height:.9;letter-spacing:-.03em;white-space:nowrap;text-autospace:no-autospace;margin-bottom:10px}
.srl .cf-big small{font-size:.24em;font-weight:700;letter-spacing:0;margin-left:6px}
.srl .cb-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr) 6.5rem;gap:14px;align-items:center}
.srl .cb-l{font-size:.86rem;font-weight:700}
.srl .cb-track{display:block;height:28px;background:#f0f0f0}
.srl .cb-track i{display:block;height:100%}
.srl .cb-robot{background:var(--robot)}.srl .cb-ink{background:var(--ink)}
.srl .cb-v{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.6rem;line-height:1;text-align:right;white-space:nowrap}
.srl .cb-v small{font-size:.45em;font-weight:700;margin-left:3px}

/* ---- 03 店の形 ---- */
.srl .shape-top{display:grid;gap:20px;justify-items:center;text-align:center}
.srl .shape-top .prose{max-width:none}
.srl .shape-top .prose p{margin:0}
.srl .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;margin-top:24px}
.srl .plan{display:grid;gap:12px;align-content:start}
.srl .plan img{display:block;width:100%;height:auto;aspect-ratio:320/230;object-fit:contain;background:var(--paper);padding:10px}
.srl .plan figcaption{display:grid;gap:6px;color:var(--ink);font-size:.86rem}
.srl .plan b{font-size:.98rem;line-height:1.4}
.srl .pnum{display:inline-block;margin-right:6px}
.srl .pmeta{font-size:.76rem;color:var(--muted)}
.srl .pbar{display:grid;gap:3px;margin-top:4px}
.srl .pbar i{display:block;height:8px}
.srl .pb-from{background:var(--ink)}.srl .pb-to{background:var(--robot)}
.srl .pval{font-family:'Manrope','Noto Sans JP',sans-serif;font-weight:800;font-size:1.6rem;line-height:1.2;white-space:nowrap;text-autospace:no-autospace}
.srl .pval i{font-style:normal;font-size:.7em;margin:0 6px;color:var(--muted)}
.srl .pval em{font-style:normal;color:var(--robot)}
.srl .pval small{font-size:.6em;margin-left:2px}
.srl .plans-note{margin:0;font-size:.8rem;color:var(--muted)}

/* ---- 04 試す ---- */
.srl .simbox{background:#fff;padding:8px;margin-top:8px}
.srl .simframe{display:block;width:100%;height:1600px;border:0}
.srl .sim-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;font-size:.88rem;color:#ccc}
.srl .sim-open{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:4px}
.srl .sim-open .ms{font-size:16px}

/* ---- 05 頼む流れ ---- */
.srl .steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.srl .steps li{position:relative;background:#fff;padding:22px 20px 24px;display:grid;gap:8px;align-content:start;box-shadow:0 1px 0 var(--rule)}
.srl .steps li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:2px;background:var(--ink)}
.srl .steps i{font-style:normal;font-weight:600;font-size:1.6rem;line-height:1}
.srl .steps .ico{width:40px;height:40px;fill:var(--ink);margin-bottom:8px}
.srl .steps .ico .w{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:square;stroke-linejoin:miter}
.srl .steps b{font-size:1.02rem;line-height:1.45}
.srl .steps span{font-size:.84rem;color:var(--muted);line-height:1.7}
.srl .receive{background:var(--ink);color:#fff;padding:32px 36px;display:grid;grid-template-columns:10rem minmax(0,1fr);gap:24px;align-items:start;margin-top:12px}
.srl .rc-k{margin:0;font-size:1.1rem;font-weight:900}
.srl .receive ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px}
.srl .receive li{display:grid;gap:4px;padding-top:12px;border-top:1px solid #444}
.srl .receive b{font-size:1rem}
.srl .receive span{font-size:.86rem;color:#ccc;line-height:1.7}

/* ---- 06 立場ごと ---- */
.srl .roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:16px}
.srl .role{background:#fff;color:var(--ink);padding:32px 36px}
.srl .role-k{margin:0 0 16px;font-size:1.15rem;font-weight:900}
.srl .role ul{list-style:none;margin:0;padding:0;display:grid;border-top:2px solid var(--ink)}
.srl .role li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:1rem;font-weight:700;line-height:1.55}

/* ---- 07 言えないこと ---- */
.srl #limits{padding-block:72px}
.srl .limits{display:grid;gap:28px;max-width:52rem;margin:0 auto;width:100%}
.srl .lim{margin:0;padding:0;list-style:none;display:grid;border-top:2px solid var(--ink)}
.srl .lim li{padding:16px 0;border-bottom:1px solid #ddd;font-size:.95rem;line-height:1.85}

/* ---- 最後のCTA：3Dの店舗の写真の上に、送るもの3つとボタン ---- */
.srl .cta-a{position:relative;isolation:isolate;overflow:hidden;background:#242424;padding-block:120px}
.srl .cta-a::before{content:"";position:absolute;inset:0;z-index:-2;background:#242424 url(/site/srl/cta-plan.svg) center/cover no-repeat}
.srl .cta-a-in{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:56px 60px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.srl .cta-a-copy{display:grid;gap:14px}
.srl .cta-a-k{margin:0;font-weight:800;font-size:.95rem}
.srl .cta-a h2{margin:0;font-size:clamp(1.9rem,5vw,3rem);line-height:1.2;font-weight:900;word-break:auto-phrase}
.srl .cta-a-sub{margin:0;color:#444;font-size:.92rem;line-height:1.85}
.srl .cta-a-act{display:grid;gap:10px}
.srl .send{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.srl .send li{display:flex;align-items:center;gap:14px;background:var(--paper);padding:15px 18px;font-weight:700;font-size:.98rem}
.srl .send li .ms{flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:20px}
.srl .send small{display:block;font-weight:500;font-size:.76rem;color:var(--muted);margin-top:1px}
.srl .cta-a .cta-x-main{margin-top:6px}
/* ---- 最後のCTAのボタン ---- */
.srl .cta-x-main{word-break:auto-phrase;display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;background:var(--robot);color:#fff!important;padding:24px 26px;font-weight:900;font-size:1.15rem;line-height:1.35;transition:background .15s}
.srl .cta-x-main small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;margin-bottom:4px}
.srl .cta-x-main .ms{font-size:28px;transition:transform .2s}
.srl .cta-x-main:hover{background:var(--ink)}
.srl .cta-x-main:hover .ms{transform:translateX(5px)}
.srl .cta-x-main:focus-visible{outline:none;background:var(--ink)}
.srl .sources{font-size:.8rem;color:var(--muted)}
.srl .sources details{border-top:1px solid var(--rule);padding-top:10px}
.srl .sources summary{cursor:pointer;font-weight:500}
.srl .sources ul{padding-left:1.2em;margin:.5em 0 0;display:grid;gap:4px}

/* 見出しの下の説明文は、幅の広い画面では1行で出す */
@media (min-width:1100px){.srl .sec-lead,.srl .shape-top .prose p,.srl #sim .center-p p{white-space:nowrap}.srl #sim .center-p{max-width:none}}

/* ---- タブレット・スマートフォン ---- */
@media (max-width:900px){
  .srl .cta-a{padding-block:56px}
  .srl .cta-a-in{grid-template-columns:1fr;gap:28px;padding:32px 22px}
  .srl section{padding-block:60px}
  .srl .fv{grid-template-columns:1fr;min-height:0}
  .srl .fv-stage{grid-column:1;grid-row:2;aspect-ratio:1/1;margin:0 8px}
  .srl .sc{inset:0;gap:6px}
  .srl .sc-split4{grid-template-columns:1fr 1fr}
  .srl .ft.t-plan{grid-column:1;grid-row:1}.srl .ft.t-3d{grid-column:2;grid-row:1}.srl .ft.t-run{grid-column:1;grid-row:2}.srl .ft.t-res{grid-column:2;grid-row:2}
  .srl .t-plan img{padding:40px 6px 6px}
  .srl .sc-split3{grid-template-columns:1fr 1fr;grid-template-rows:3fr 2fr}
  .srl .ft.t-term{grid-column:1/3;grid-row:1}.srl .ft.t-routes{grid-column:1;grid-row:2}.srl .ft.t-cost{grid-column:2;grid-row:2}
  .srl .t-routes img{padding:38px 6px 6px}
  .srl .ft-long{display:none}
  .srl .ft.t-res{grid-template-rows:auto;align-content:end;padding:40px 12px 12px;gap:6px}
  .srl .t-res dl{grid-auto-rows:auto}
  .srl .t-res dl div{padding:4px 0}
  .srl .t-res dt{font-size:.62rem}
  .srl .t-res dd{font-size:1.05rem}
  .srl .t-res dd i{margin:0 3px}
  .srl .ft-keys,.srl .ft-note{display:none}
  .srl .ft figcaption{left:6px;top:6px;font-size:.68rem;padding:4px 8px}
  .srl .ft.t-term figcaption{top:auto;bottom:6px}
  .srl .sc-bar{right:10px;bottom:10px}
  .srl .sc-bar i{width:18px}
  .srl .fv-side{display:contents}
  .srl .fv-copy{grid-row:1;padding:28px var(--gut) 24px!important}
  .srl .fv-menu{grid-row:3;margin-top:16px}
  .srl .fv-copy{gap:16px}
  .srl .fv h1{font-size:clamp(2rem,8.6vw,2.8rem)}
  .srl .fv-menu a{padding:12px var(--gut)}
  .srl .troubles{grid-template-columns:1fr;gap:36px}
  .srl .know{gap:56px}
  .srl .kn,.srl .kn.rev{grid-template-columns:1fr;gap:24px}
  .srl .kn.rev .kn-text{order:0}
  .srl .staff-fig,.srl .cost-fig{padding:20px 16px}
  .srl .srow{grid-template-columns:5.6rem minmax(0,1fr) auto;gap:8px}
  .srl .srow .sv b{font-size:1.5rem}
  .srl .srow .sv small{margin-right:6px}
  .srl .g-staff{width:12px;height:23px}.srl .g-robot{width:16px;height:23px}
  .srl .cb-row{grid-template-columns:1fr auto;gap:6px 12px}
  .srl .cb-track{grid-column:1/-1;grid-row:2;height:22px}
  .srl .cb-v{font-size:1.3rem}
  .srl .shape-top,.srl .limits{grid-template-columns:1fr;gap:20px}
  .srl .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .srl .simframe{height:1500px}
  .srl .simbox{padding:4px;margin-inline:calc(-1*var(--gut) + 4px)}
  .srl .steps{grid-template-columns:1fr;gap:10px}
  .srl .steps li{padding:16px;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start}
  .srl .steps .ico{grid-row:1/3;margin:0}
  .srl .steps li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-10px;width:2px;height:10px}
  .srl .receive{grid-template-columns:1fr;padding:24px 20px;gap:12px}
  .srl .receive ul{grid-template-columns:1fr;gap:12px}
  .srl .roles{grid-template-columns:1fr;gap:14px}
  .srl .role{padding:24px 20px}
        }
@media (max-width:600px){
  .srl .plan img{padding:4px}
  .srl .plan b{font-size:.86rem}
  .srl .pmeta{font-size:.7rem}
  .srl .pval{font-size:1.2rem}
}

/* 角丸は、埋め込んだ試算（/sim/serving-robot）とそろえる：大きな面 12px・カードと画像 8px・ボタンと札 4px */
.srl{--r-l:12px;--r-m:8px;--r-s:4px}
.srl .simbox,.srl .staff-fig,.srl .cost-fig,.srl .receive,.srl .role,.srl .cta-a-in{border-radius:var(--r-l)}
.srl .send li,.srl .send li .ms{border-radius:var(--r-m)}
.srl .simbox{overflow:hidden}
.srl .simframe{border-radius:calc(var(--r-l) - 6px)}
.srl .ft,.srl .tr img,.srl .plan img,.srl .clip video,.srl .steps li{border-radius:var(--r-m)}
.srl .ft figcaption,.srl .srow em,.srl .cb-track,.srl .cb-track i,.srl .pbar i{border-radius:var(--r-s)}
.srl .cta-x-main,.srl .seg button,.srl .fv-btn,.srl .toc a{border-radius:var(--r-s)}
.srl .ft-keys i{border-radius:50%}
</style>
