---
// TOP の「導入前ガイド」：LP 2つ（GPU を買うか借りるか・配膳ロボットの導入前シミュレーション）への入口を横に並べ、
// その下に、ロボットが現場で止まる瞬間の図鑑（/robot-stops）への入口を横いっぱいで置く（2026-11-15）
// GPU は黒い面で、背景の写真の上に文字をそのまま置く。配膳ロボットは明るい面に、文字を左・店の立体の絵（SVG・試算と同じ店）を右に置く
// 3D の店の録画は高さ 720px までしかなく粗く見えたため、どの大きさでも粗くならない線の図にした。
// 縦に切り抜くと何の図か分からず、白黒の平面図は色味がなかったので、同じ店を斜め上から見た立体の絵（tools/make_cta_iso.py で作る）を切らずに置く
// 配膳ロボットの数字（○/99条件）は、ここだけでは意味が分からずノイズに見えたので載せない（2026-10-24）
// 2枚がひと目で別のものと分かるように、面の色と組み方を変える（中身の順番はそろえる）。/series6 は GuideBanner（1本）のまま
// 題名と説明は「|」で文節に区切り、区切りの間でだけ折り返す（.ph）。word-break: auto-phrase は iPhone の Safari が無視し、
// 「買/うか」「損益分/岐」「自/分」のように語の途中で切れたため（2026-10-24）
const cards = [
  {
    href: '/gpu-buy-or-rent', bg: '/site/gbr/reverse.webp', light: false, label: '導入比較ガイド',
    fig: { old: '¥750,000', big: '¥4,700', small: '' },
    title: 'ロボットAIの|学習用GPU、|買うか借りるか',
    sub: '実際に|借りて|学習させた|費用と、|損益分岐の|計算機、|判定フローで|決められます。',
    ev: 'TOPガイド:GPU',
  },
  {
    href: '/serving-robot-one-less-staff', img: '/site/srl/cta-iso.svg', light: true, label: '導入前シミュレーション',
    title: '配膳ロボットを、|導入前に|自分の店舗で|シミュレーション',
    sub: '店舗の|図面と|人数から、|何人で回るか・|どこで止まるか・|月いくらかかるかを|出します。',
    ev: 'TOPガイド:配膳ロボット',
  },
  {
    href: '/robot-stops', photo: ['/media/robot_stops_02_second_robot_v2.jpg', '/media/robot_stops_arm_gripper.jpg'], light: true, wide: true, label: '導入前の確認',
    alt: ['店を真上から見たシミュレーションの画面。2台の配膳ロボットが一本道で向かい合って止まっている', '実機のロボットアームの爪が、赤いブロックの奥で閉じている'],
    title: 'ロボットが|現場で止まる|瞬間の図鑑',
    sub: '配膳・病院の搬送・|ロボットアームが|止まった12の場面と、|入れる前に|確かめることを|まとめました。',
    ev: 'TOPガイド:図鑑',
  },
];
const ph = (t: string) => t.split('|');
---
<div class="gcards">
  {cards.map((c) => (
    <a class={`gcard${c.light ? ' light' : ''}${c.wide ? ' wide' : ''}${c.photo ? ' photo' : ''}`} href={c.href} data-ev={c.ev} style={c.bg ? `--bg:url(${c.bg})` : undefined}>
      {c.photo && <span class="gc-img">{c.photo.map((src, k) => <span class="gc-ph"><img style={k === 0 ? "object-position:30% 55%" : "object-position:35% 50%"} src={src} alt={c.alt[k]} loading="lazy" /></span>)}</span>}
      {c.img && <span class="gc-img"><img src={c.img} alt="店の立体図（席・キッチン・配膳ロボットの通り道）" width="1400" height="900" loading="lazy" /></span>}
      <span class="gc-body">
        <span class="gc-label">{c.label}</span>
        {c.fig && <span class="gc-fig" aria-hidden="true">
          {c.fig.old && <s class="gc-old">{c.fig.old}</s>}
          <b class="gc-big">{c.fig.big}</b>
          {c.fig.small && <small class="gc-small">{c.fig.small}</small>}
        </span>}
        <span class="gc-title">{ph(c.title).map((p) => <span class="ph">{p}</span>)}</span>
        <span class="gc-sub">{ph(c.sub).map((p) => <span class="ph">{p}</span>)}</span>
        <span class="gc-go">読む<i class="ms">arrow_forward</i></span>
      </span>
    </a>
  ))}
</div>
<style>
  .gcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  /* ほかのセクションのカード（記録・4コマ・シリーズ）と同じ角丸と影 */
  .gcard { position: relative; isolation: isolate; overflow: hidden; display: grid; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.08); background: #0b0c0e; color: #fff; text-decoration: none; }
  .gc-body { display: grid; align-content: center; gap: 10px; padding: 32px; }
  .gcard::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg) right center / cover no-repeat; transition: transform .6s ease; }
  .gcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,12,14,.95) 0%, rgba(11,12,14,.86) 55%, rgba(11,12,14,.55) 100%); }
  .gcard:hover::before { transform: scale(1.03); }
  .gcard:focus-visible { outline: 2px solid #121418; outline-offset: 3px; }
  .gc-label { font: 700 12px/18px var(--sans); color: #b9bec7; letter-spacing: .08em; }
  .gc-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: 'Manrope', 'Noto Sans JP', sans-serif; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .gc-old { font-size: 20px; font-weight: 800; color: #8d939d; text-decoration-thickness: 2px; }
  .gc-big { font-size: 40px; font-weight: 800; color: #f2600c; letter-spacing: -.01em; }
  .gc-small { font: 700 14px/1.5 var(--sans); color: #d6dae3; }
  .gc-title { margin-top: 4px; font: 900 22px/1.45 var(--sans); word-break: auto-phrase; text-wrap: pretty; }
  .gc-sub { font: 400 14px/1.7 var(--sans); color: #c8ccd4; text-wrap: pretty; }
  /* 文節の中では折り返さない。1つの文節が枠より長いときだけ中で折り返す */
  .ph { display: inline-block; max-width: 100%; }
  .gc-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; }
  .gcard:hover .gc-go { background: #fff; color: #121418; }
  /* 配膳ロボット：明るい面。カードが広いときは文字を左・立体の絵を右に、狭いときは絵を上・文字を下に置く。
     区切りはカードの幅で決める（画面の幅ではない）。2枚並びのカードは画面が 900〜1300px くらいだと 450〜600px しかなく、
     横に並べると文字の列が細くなって題名と説明が細かく折り返すため。
     横に並べるのは、ガイドの枠（.gcards）が 1180px 以上（カード1枚が約580px 以上）のときだけ。文字の列は 300px より狭くしない */
  .gcards { container-type: inline-size; }
  .gcard.light { grid-template-columns: 1fr; background: #eceef1; color: #121418; }
  .gcard.light::before, .gcard.light::after { content: none; }
  .gc-img { grid-column: 1; grid-row: 1; position: relative; display: block; overflow: hidden; height: 220px; background: #eceef1; }
  /* 絵を上・文字を下に置くときは、絵を枠の下端にそろえ、文字との間を詰める（間が空きすぎて見えたため。2026-10-24） */
  .gc-img img { position: absolute; top: 12px; left: 12px; display: block; width: calc(100% - 24px); height: calc(100% - 12px); object-fit: contain; object-position: 50% 100%; transition: transform .6s ease; }
  .gcard.light .gc-body { grid-column: 1; grid-row: 2; padding: 8px 32px 32px; }
  @container (min-width: 1180px) {
    .gcard.light { grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); }
    .gc-img { grid-column: 2; grid-row: 1; height: auto; }
    .gc-img img { top: 0; left: 0; width: calc(100% - 20px); height: 100%; object-position: 0 50%; }
    .gcard.light .gc-body { grid-column: 1; grid-row: 1; padding: 32px 20px 32px 32px; }
  }
  .gcard.light:hover .gc-img img { transform: scale(1.03); }
  /* 図鑑（3枚目）：2枚の下に横いっぱいで置く。絵ではなくシミュレーションの画面なので、枠いっぱいに敷く（2026-11-15） */
  .gcard.wide { grid-column: 1 / -1; }
  /* サービスロボットとロボットアームの両方を載せるページなので、2枚を左右に並べる（2026-11-15） */
  .gcard.photo .gc-img { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #121418; }
  .gc-ph { position: relative; overflow: hidden; }
  .gcard.photo .gc-img img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  @container (min-width: 1180px) {
    .gcard.wide { grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); }
    .gcard.photo .gc-img { min-height: 300px; }
  }
  .gcard.light .gc-title { font-size: 20px; }
  .gcard.light .gc-label { color: #5c616b; }
  .gcard.light .gc-small { color: #121418; }
  .gcard.light .gc-body { word-break: auto-phrase; text-wrap: pretty; }
  .gcard.light .gc-sub { color: #4a4f58; }
  .gcard.light:hover .gc-go { background: #121418; color: #fff; }
  .gc-go .ms { font-size: 18px; transition: transform .2s; }
  .gcard:hover .gc-go .ms { transform: translateX(3px); }
  @media (max-width: 899px) {
    .gcards { grid-template-columns: 1fr; }
    .gcard { min-height: 0; }
    .gc-body { padding: 24px 20px; }
    .gcard.light .gc-body { padding: 8px 20px 24px; }
    .gcard:not(.light)::after { background: rgba(11,12,14,.84); }
    .gc-big { font-size: 32px; }
    .gc-title { font-size: 19px; }
  }
</style>