---
// 導入比較ガイド：学習用GPU PCを買うか、Runpod で借りるか（LP。LOG の記事ではない）
// 元はClaudeのアーティファクトで作った試作。数字の出典はページ下の「出典と記録」
import Base from '../layouts/Base.astro';
import { SITE, AUTHOR, PUBLISHER } from '../lib/seo';
const title = 'ロボットAIの学習用GPU、買うか借りるか ― 実費と計算機で決める導入ガイド';
// 検索結果に出すタイトルは短くする（全角32字前後で切れるため）。ページの見出し（h1）は上の title のまま
const seoTitle = 'ロボットAIの学習用GPU、買うか借りるか｜実費と損益分岐の計算機';
const description = 'ロボットAI（π0.5）の学習用GPUを、PCで買うかクラウド（Runpod）で借りるか。実際にA40を借りて学習させた費用（記録のある7回で4,677円）、RTX 5090 PCとの損益分岐を出す計算機、4つの質問の判定フローで決められる導入ガイド。';
const path = '/gpu-buy-or-rent';
const url = SITE + path;
const jsonLd = [
  {
    '@context': 'https://schema.org', '@type': 'Article', headline: title, description,
    url, mainEntityOfPage: url, image: [SITE + '/og/gpu-buy-or-rent.jpg'], inLanguage: 'ja',
    datePublished: '2026-10-23', dateModified: '2026-10-23', author: AUTHOR, publisher: PUBLISHER,
    articleSection: '導入比較ガイド',
    keywords: 'GPU 買うか借りるか, 学習用GPU, クラウドGPU, Runpod, A40, RTX 5090, RTX 5080, π0.5, openpi, LoRA, GPUメモリ, 損益分岐, フィジカルAI, ロボットAI',
    about: [
      { '@type': 'Thing', name: 'クラウドGPU' },
      { '@type': 'Thing', name: 'ロボット学習' },
      { '@type': 'SoftwareApplication', name: 'π0.5（openpi）', applicationCategory: 'Robot foundation model' },
    ],
    isPartOf: { '@type': 'CollectionPage', name: 'フィジカルAI研究室', url: SITE + '/series6' },
    hasPart: { '@type': 'WebApplication', name: '買う方が安くなる使用時間の計算機', url: url + '#calc', 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: 'フィジカルAI研究室', item: SITE + '/series6' },
      { '@type': 'ListItem', position: 3, name: 'ロボットAIの学習用GPU、買うか借りるか', item: url },
    ],
  },
];
---
<Base title={`${seoTitle} | Pixels to Motors`} description={description} path={path} ogImage="/og/gpu-buy-or-rent.jpg" ogType="article" published="2026-10-23" modified="2026-10-23" jsonLd={jsonLd}>
  <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="gbr">
<section class="fv" aria-labelledby="fv-h">
  <div class="fv-art" aria-hidden="true"><img class="fv-arm" src="/site/gbr/arm-red.webp" alt="" width="930" height="858"></div>
  <div class="fv-in">
    <div class="fv-text">
      <p class="who">これからロボットAIの学習環境を用意する、<br>企業の担当者・研究者・エンジニア向け</p>
      <h1 id="fv-h">ロボット<span class="lat">AI</span>の<br>学習用<span class="lat">GPU</span>、<br>買うか借りるか</h1>
      <p class="fv-lead">買う前に借りて、実際に学習させました。見積書と、利用明細を並べます。実費と計算機で、自分の場合どちらが合うかを決められる導入ガイドです。</p>
      <div class="fv-cta"><a class="btn dark" href="#calc">自分の条件で計算する<i class="ms" aria-hidden="true">arrow_forward</i></a></div>
    </div>
    <div class="fv-docs">
      <div class="doc">
        <div class="doc-top">
          <div class="doc-h"><span>見積書</span><em class="tag-buy">買わなかった</em></div>
          <p class="doc-sub">自作の学習用 Linux PC（2026年7月に検討した構成）</p>
          <dl class="doc-rows">
            <div><dt>GPU</dt><dd><b>RTX 5080 <u class="gb16">16GB</u></b></dd></div>
            <p class="doc-warn">学習に要るGPUメモリの目安（22.5GB超）に届かない</p>
            <div><dt>CPU</dt><dd>Ryzen 9 9950X</dd></div>
            <div><dt>メモリ・電源</dt><dd>64〜128GB・1000W級</dd></div>
          </dl>
        </div>
        <div class="doc-total"><span>合計（概算）</span><s class="big-buy">¥750,000</s></div>
      </div>
      <div class="ratio" aria-label="およそ160分の1"><span>およそ</span><b>1/160</b></div>
      <div class="doc rcpt">
        <div class="doc-top">
          <div class="doc-h"><span>利用明細</span><em class="tag-rent">実費</em></div>
          <p class="doc-sub mono">Runpod A40 48GB ／ 2026年10月 ／ 記録のある7回</p>
          <ul class="rcpt-rows mono">
            <li><span>推論を初めて動かす</span><span>¥54</span></li>
            <li><span>GPUメモリを測る</span><span>¥81</span></li>
            <li><span>試しに200ステップ学習</span><span>¥95</span></li>
            <li><span>2,000ステップ学習</span><span>¥1,153</span></li>
            <li><span>実機で推論＋追加学習</span><span>¥1,422</span></li>
            <li><span>4,000ステップ学習し直し</span><span>¥861</span></li>
            <li><span>4,000ステップ学習</span><span>¥1,011</span></li>
          </ul>
        </div>
        <div class="doc-total rcpt-total"><span>合計</span><b class="big-rent">¥4,677</b></div>
      </div>
    </div>
  </div>
</section>

<section id="summary" class="band-white">
  <div class="wrap wide">
    <h2 class="sum-title"><span class="h-num">3</span>つの数字で、先に結論</h2>
    <div class="facts3">
      <div class="fact"><b class="fact-n">22.5<small>GB超</small></b><svg class="fact-chart" viewBox="0 0 300 58" role="img" aria-label="RTX 5080の16GBは、学習に要る22.5GBに届かない。借りたA40は48GB。"><defs><pattern id="fcHatchA" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="2.5" height="5" style="fill:var(--ink)"/></pattern></defs><rect x="0" y="11" width="96" height="16" fill="url(#fcHatchA)"/><rect x="0" y="31" width="288" height="16" style="fill:var(--ink)"/><line x1="135" y1="1" x2="135" y2="57" class="fc-th"/></svg><h3>GPUは、速さより先に<br>メモリの量で決まる</h3><p>Physical Intelligence の π0.5 の追加学習は、公開コードの説明書の目安でGPU1枚に22.5GB超が要る。16GBのRTX 5080では届かない。</p></div>
      <div class="fact"><b class="fact-n"><small class="pre">月</small>180<small>時間</small></b><svg class="fact-chart" viewBox="0 0 300 58" role="img" aria-label="借りる費用は使う時間に比例して増え、買う費用はほぼ一定。約178時間で交わる。"><defs><pattern id="fcHatchB" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="2.5" height="5" style="fill:var(--ink)"/></pattern></defs><polygon points="150,30 300,4 300,26" fill="url(#fcHatchB)"/><line x1="0" y1="56" x2="300" y2="56" class="fc-axis"/><line x1="0" y1="56" x2="300" y2="4" class="fc-rent"/><line x1="0" y1="34" x2="300" y2="26" class="fc-buy"/><line x1="150" y1="30" x2="150" y2="56" class="fc-th"/><circle cx="150" cy="30" r="4" style="fill:var(--sheet);stroke:var(--ink);stroke-width:2"/></svg><h3>これより使うなら、<br>買う方が安い</h3><p>RTX 5090のPC（約124万円）を4年使う場合の目安。私たちがGPUを一番多く使う月でも約120時間なので、借りる方が安い。買うGPUと借りるGPUの速さの違いは測っていない。</p></div>
      <div class="fact"><b class="fact-n"><small class="pre">約</small>3<small>割</small></b><svg class="fact-chart" viewBox="0 0 300 58" role="img" aria-label="借りた費用のうち、約7割が作業していた時間、約3割が置いていた時間。"><defs><pattern id="fcHatchC" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="2.5" height="5" style="fill:var(--ink)"/></pattern></defs><rect x="0" y="14" width="210" height="30" style="fill:var(--ink)"/><rect x="214" y="14" width="86" height="30" fill="url(#fcHatchC)"/></svg><h3>借りた費用のうち、<br>置いていただけの分</h3><p>借りる側の損は、使っていない時間の課金と、毎回の立ち上げ。学習のあと Pod を止めずに待っていた時間に払っていた。</p></div>
    </div>
    <nav class="toc" aria-label="目次">
      <a href="#memory"><i>01</i>メモリが足りるか</a><a href="#cost"><i>02</i>実際の費用</a><a href="#calc"><i>03</i>損益分岐の計算</a><a href="#compare"><i>04</i>9項目の比較</a><a href="#flow"><i>05</i>判定フロー</a><a href="#checklist"><i>06</i>借りる前のチェック</a>
    </nav>
    <p class="scope">比べているのは、機材とサービスの料金だけです。人の作業時間は入れていません。借りる側は Runpod の場合で、国内・円建てのクラウド（<a href="https://ai.sakura.ad.jp/gpu/">さくらインターネットの高火力</a>など）や、中古のGPU・今あるPCへの増設は比べていません。</p>
  </div>
</section>

<section id="memory" class="band-ink">
  <div class="wrap wide side">
    <div class="side-l">
      <div class="sec-head"><span class="sec-no" aria-hidden="true">01</span><h2><span class="ph">最初に決めるのは、</span><span class="ph"><span class="lat">GPU</span>のメモリが足りるか</span></h2></div>
    <div class="prose">
      <p>AIの学習では、モデルと計算途中のデータをGPUのメモリに載せます。足りなければ、学習は始まりません。</p>
      <p>Physical Intelligence 社のロボット用AIモデル π0.5 は、カメラの画像と指示の文から、アームを動かします。その LoRA学習（一部だけ学習し直す方法）には、GPU1枚に22.5GB超が要ります。</p>
      <p>計画したRTX 5080は16GBで届きません。24GB以上は、買うと約100万円から。借りれば、48GBのA40が1時間約93円です。</p>
    </div>
    </div>
    <div class="side-r">
      <figure>
      <div class="seg" role="group" aria-label="用途を選ぶ">
        <button type="button" data-th="8" aria-pressed="false">推論 8GB超</button>
        <button type="button" data-th="22.5" aria-pressed="true">LoRA学習 22.5GB超</button>
        <button type="button" data-th="70" aria-pressed="false">全体の学習 70GB超</button>
      </div>
      <div class="memrows" id="memrows"></div>
      <figcaption>破線は、選んだ用途に要るGPUメモリ。斜線は足りないGPU、灰色は買うGPU（価格.comの単体最安）、黒は借りるGPU、橙は実際に借りたGPU（Runpod の1時間あたり・Secure Cloud）。</figcaption>
    </figure>
    </div>
  </div>
</section>

<section id="cost">
  <div class="wrap wide">
    <div class="cost-hero">
      <div class="cost-head">
        <div class="sec-head stack"><span class="sec-no" aria-hidden="true">02</span><h2><span class="ph">記録のある<span class="lat">7</span>回で</span><span class="ph">約<span class="lat">4,700</span>円。</span><br><span class="ph"><span class="lat">3</span>割は使っていない</span><span class="ph">時間の分だった</span></h2></div>
      <div class="cost-num">
        <b class="huge">¥4,677</b>
        <p class="huge-sub">Runpod の A40（48GB）を借りた、記録のある7回のGPU代</p>
        <p class="cost-split"><span><i class="sw sw-w"></i>作業していた時間 約3,300円</span><span><i class="sw sw-i"></i>置いていた時間 約1,400円</span></p>
      </div>
      </div>
      <div class="cost-chart">
        <figure>
      <div class="legend"><span><i style="background:var(--rent)"></i>作業していた時間</span><span><i style="background:var(--stripe)"></i>何もせずに置いていた時間</span></div>
      <div class="costcols" id="costrows"></div>
      <div class="costsum"><span>合計（記録のある回）</span><span class="costsum-sub">うち置いていた分 約1,400円</span><span class="v">¥4,677</span></div>
    </figure>
      </div>
    </div>
    <div class="video-row">
      <figure class="clip">
      <video src="/media/LOG361_v3_success_181602_red.mp4" poster="/media/LOG361_01_success_181602_red.jpg" controls muted playsinline preload="none"></video>
      <figcaption>この費用で学習させた π0.5 が、机の上のアーム（mechArm 270）で初めてブロックを箱に入れた回。横から撮った約3分20秒の動画です。<a href="/record/pi05-first-block-in-box">この回の記録を読む</a></figcaption>
    </figure>
      <div class="video-note">
        <span class="kicker">この金額で学習したAI</span>
    <div class="prose">
      <p>借りていた時間は記録のある回で約48時間、そのうち学習は、ログに残った時間の合計で約23.6時間でした（1ステップ6.5〜7.1秒）。<b>置いていた約1,400円は、学習が終わってから実機の準備ができるまで、Podを止めずに待っていた分です。</b>時間で払う以上、使わない時間にも料金はかかります。</p>
    </div>
      </div>
    </div>
  </div>
</section>

<section id="calc" class="band-tint">
  <div class="wrap wide">
    <div class="sec-head center"><span class="sec-no" aria-hidden="true">03</span><h2><span class="ph">買う方が安くなるのは、</span><span class="ph">月に何時間使うときか</span></h2></div>
    <div class="prose center-p"><p>PCの価格を使う年数で割った1か月分と、借りた場合の1か月分を比べます。初期値は、このプロジェクトの実際の使い方です。機材とサービスの料金だけの比較で、人の作業時間は入れていません。</p></div>
    <div class="calc">
      <div class="inputs">
        <div class="field">
          <label for="pc">買うPC</label>
          <select id="pc">
            <option value="1244980|0.75|32" selected>RTX 5090 32GB 搭載BTO（1,244,980円）</option>
            <option value="998800|0.65|24">RTX 4090 24GB 単体（998,800円・PC本体は別）</option>
            <option value="750000|0.55|16">RTX 5080 16GB 自作の見積もり（750,000円）</option>
            <option value="3400000|0.75|96">RTX PRO 6000 96GB 自作（約340万円）</option>
          </select>
        </div>
        <div class="field">
          <label for="cloud">借りるGPU</label>
          <select id="cloud">
            <option value="0.62|48" selected>A40 48GB Secure</option>
            <option value="0.38|48">A40 48GB Community</option>
            <option value="0.37|24">RTX 4090 24GB Community</option>
            <option value="1.22|32">RTX 5090 32GB Secure</option>
            <option value="1.82|80">A100 80GB Secure</option>
          </select>
        </div>
        <div class="field">
          <label for="hours"><span>使う時間</span><output id="hoursO">月120時間</output></label>
          <input type="range" id="hours" min="10" max="720" step="10" value="120">
          <span class="hint">借りるGPUで換算。私たちが一番多く使う月で約120時間。720時間＝毎日24時間</span>
        </div>
        <div class="field">
          <label for="idle"><span>置いておく時間</span><output id="idleO">30%</output></label>
          <input type="range" id="idle" min="0" max="60" step="5" value="30">
          <span class="hint">借りていた時間のうち、何もしていなかった割合。実績は約3割</span>
        </div>
        <div class="field">
          <label for="speed"><span>買うGPUの速さ</span><output id="speedO">1倍</output></label>
          <input type="range" id="speed" min="0.5" max="3" step="0.25" value="1">
          <span class="hint">借りるGPUの何倍か。私たちは測っていない（1倍＝同じ時間で終わる前提）
        </div>
        <div class="twocol">
          <div class="field">
            <label for="years"><span>使う年数</span><output id="yearsO">4年</output></label>
            <input type="range" id="years" min="1" max="6" step="1" value="4">
          </div>
          <div class="field">
            <label for="resale"><span>売って戻る</span><output id="resaleO">20%</output></label>
            <input type="range" id="resale" min="0" max="50" step="5" value="20">
          </div>
        </div>
        <div class="twocol">
          <div class="field"><label for="kwh">電気（円/kWh）</label><input type="number" id="kwh" value="31" min="0" step="1"></div>
          <div class="field"><label for="fx">1ドル（円）</label><input type="number" id="fx" value="158" min="1" step="1"></div>
        </div>
      </div>
      <div class="result">
        <p class="verdict-big" id="verdict"></p>
        <div class="kpis">
          <div class="kpi"><div class="k">借りる 1か月</div><div class="v" id="kRent"></div></div>
          <div class="kpi"><div class="k">買う 1か月（PC代＋電気）</div><div class="v" id="kBuy"></div></div>
          <div class="kpi"><div class="k">買う方が安くなる使用時間</div><div class="v" id="kBe"></div></div>
        </div>
        <div id="memWarn" class="warn" hidden></div>
        <div class="chartbox" id="chartbox"><svg id="chart" viewBox="0 0 560 250" role="img" aria-label="使った月数ごとの合計費用。買う場合と借りる場合"></svg><div class="tip" id="tip" hidden></div></div>
        <details>
          <summary>計算式と前提</summary>
          <pre>借りる（円/月）＝ 1時間の料金（円）× 使う時間 ÷（1 − 置く時間の割合）
買う（円/月）　＝（PC価格 − 売却額）÷（年数×12）＋ 消費電力kW ×（使う時間 ÷ 速さ）× 電気単価
買う方が安くなる時間 ＝ PC代の月額 ÷［1時間の料金 ÷（1 − 置く時間の割合）− 消費電力kW × 電気単価 ÷ 速さ］

・使う時間は、借りるGPUで同じ学習にかかる時間
・消費電力はPC全体の目安で、実測ではない（RTX 5090はGPUだけで575W）
・1時間の料金は、Runpod のドル建ての公開価格（秒単位で課金）に、Pod のディスク200GB（動いている間だけ課金）の分を足し、為替で円にした値。止めている間の保存料は入れていない
・RTX 5090 搭載BTOはドスパラの GALLERIA XPR7A-R59（2026年10月23日の価格）
・売却で戻る割合と電気単価は仮の値。自社の値に変えて使う</pre>
        </details>
      </div>
    </div>
    <div class="cta-inline">
      <span>自社の台数・使い方で試算したい場合は、条件を送ってもらえれば計算します。</span>
      <a class="btn" href="/message?topic=physical-ai">試算を相談する<i class="ms" aria-hidden="true">arrow_forward</i></a>
    </div>
  </div>
</section>

<section id="compare" class="band-white">
  <div class="wrap wide">
    <div class="sec-head"><span class="sec-no" aria-hidden="true">04</span><h2><span class="ph">買うと借りるを</span><span class="ph"><span class="lat">9</span>項目で比べる</span></h2></div>
    <div class="duel" role="table" aria-label="買うと借りるの比較。強い側を黒で塗っている">
      <div class="duel-row duel-head" role="row"><div class="d-b" role="columnheader">自宅に買う</div><div class="d-n" role="columnheader"><span class="sr">項目</span></div><div class="d-r" role="columnheader">Runpod で借りる</div></div>
      <div class="duel-row" role="row"><div class="d-b" role="cell">75万〜124万円</div><div class="d-n" role="rowheader">はじめる費用</div><div class="d-r win" role="cell"><span class="sr">強い：</span>約1,600円（10ドル）の入金から</div></div>
      <div class="duel-row" role="row"><div class="d-b" role="cell">買ったGPUで固定</div><div class="d-n" role="rowheader">使えるメモリ</div><div class="d-r win" role="cell"><span class="sr">強い：</span>回ごとに16〜180GBから選べる</div></div>
      <div class="duel-row" role="row"><div class="d-b win" role="cell"><span class="sr">強い：</span>電気代だけ（1時間約23円）</div><div class="d-n" role="rowheader">長く回すときの費用</div><div class="d-r" role="cell">A40で1時間約98円。止め忘れも課金</div></div>
      <div class="duel-row" role="row"><div class="d-b win" role="cell"><span class="sr">強い：</span>電源を入れるだけ</div><div class="d-n" role="rowheader">すぐ使えるか</div><div class="d-r" role="cell">立ち上げ約1時間10分。空き待ちもある</div></div>
      <div class="duel-row" role="row"><div class="d-b win" role="cell"><span class="sr">強い：</span>同じ机の上</div><div class="d-n" role="rowheader">ロボットとの距離</div><div class="d-r" role="cell">私たちの環境（秋田→米国）で往復0.6〜1.6秒</div></div>
      <div class="duel-row" role="row"><div class="d-b win" role="cell"><span class="sr">強い：</span>社外に出さずに済む</div><div class="d-n" role="rowheader">データの扱い</div><div class="d-r" role="cell">社外に出してよいかの確認が要る。転送に時間がかかる</div></div>
      <div class="duel-row" role="row"><div class="d-b" role="cell">同じ部品を同じ値段でそろえにくい</div><div class="d-n" role="rowheader">他人が同じ環境を作れるか</div><div class="d-r win" role="cell"><span class="sr">強い：</span>空きと地域の条件が合えば、同じGPUを借りられる</div></div>
      <div class="duel-row" role="row"><div class="d-b" role="cell">自分で持つ</div><div class="d-n" role="rowheader">置き場所・熱・故障</div><div class="d-r win" role="cell"><span class="sr">強い：</span>持たない</div></div>
      <div class="duel-row" role="row"><div class="d-b win" role="cell"><span class="sr">強い：</span>円</div><div class="d-n" role="rowheader">支払いの通貨</div><div class="d-r" role="cell">ドル建て。円の額は為替で変わる</div></div>
      <div class="duel-row duel-foot" role="row"><div class="d-b" role="cell"><b>5</b>項目</div><div class="d-n" role="cell">強い項目の数</div><div class="d-r" role="cell"><b>4</b>項目</div></div>
    </div>
    <div class="cmp-bottom">
        <p class="cmp-note">借りる側の弱い項目は、どれも実際に起きたことです。</p>
        <div class="cons">
      <div class="con"><div class="v">約3割</div><h3>使っていない時間の課金</h3><p>学習が終わってから実機の準備ができるまで、Podを置いたままにした。</p></div>
      <div class="con"><div class="v">4時間20分</div><h3>空き待ち</h3><p>早朝にA40を予約したが、起動は11時前後。空いていたのは16GBのGPUだけだった。</p></div>
      <div class="con"><div class="v">1時間10分</div><h3>毎回の立ち上げ</h3><p>起動6分、ライブラリの導入約20分、学習済みモデルの送信約40分。</p></div>
      <div class="con"><div class="v">0.6〜1.6秒</div><h3>往復の遅れ</h3><p>秋田のMacから米国のデータセンターまで。1回目は準備で約55秒かかる。</p></div>
    </div>
    </div>
  </div>
</section>

<section id="reverse" class="band-quote">
  <div class="wrap wide quote">
    <span class="kicker">予想と逆だったこと</span>
    <blockquote>借りた環境は、他人が再現できないと思っていた。</blockquote>
    <p>研究室を作り始めたときは、借りた環境は他人が再現できないと考えて、PCを自作するつもりでした。実際には、GPUの型番と手順を書いておけば、読んだ人は空きと地域の条件が合う限り、同じA40を1時間約93円で借りられます。</p>
    <p>自作のPCは、同じ部品を同じ値段でそろえるのが難しくなっています。RTX 5090を積んだBTOの最安は、5月に約60万円だったものが、10月は約124万円です（同じ構成どうしの比較ではありません）。どちらの場合も、同じ結果にたどり着くには、コードの版・使ったライブラリ・学習の設定・データの記録が要ります。</p>
  </div>
</section>

<section id="flow">
  <div class="wrap wide side">
    <div class="side-l">
      <div class="sec-head"><span class="sec-no" aria-hidden="true">05</span><h2><span class="ph">あなたの場合はどちらか：</span><span class="ph"><span class="lat">4</span>つの質問</span></h2></div>
      <div class="prose"><p>答えを選ぶと、次の質問が出ます。最後に「借りる」「買う」「併用」「まず借りて測る」のどれが合うかを出します。使用時間の分かれ目は、上の計算機の条件に合わせて変わります。</p></div>
    </div>
    <div class="side-r">
      <div class="flow" id="flowbox" aria-live="polite"></div>
    </div>
  </div>
</section>

<section id="checklist">
  <div class="wrap wide">
    <div class="chk-head">
      <div class="sec-head"><span class="sec-no" aria-hidden="true">06</span><h2><span class="ph">借りるなら、</span><span class="ph">最初に決めておく<span class="lat">7</span>つ</span></h2></div>
      <p class="chk-lead">どれも、このプロジェクトで一度失敗したことです。</p>
    </div>
    <ol class="checks">
      <li><span class="n"><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><rect x="18" y="2" width="12" height="5"/><circle cx="24" cy="27" r="19"/><path class="w" d="M24 16v11l7 5"/></svg></span><div><b>実機を動かす時間を決めてから Pod を作る</b><span>置いていた時間の約1,400円は、これで払わずに済んだ。</span></div></li>
      <li><span class="n"><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><rect x="3" y="7" width="42" height="34"/><path class="w" d="M11 18l7 6-7 6"/><path class="w" d="M22 31h13"/></svg></span><div><b>作るときにSSHのポート（TCP 22）を開けておく</b><span>後から開けると Pod が作り直され、準備が消えた。</span></div></li>
      <li><span class="n"><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><rect x="5" y="8" width="38" height="32"/><rect class="wf" x="17" y="15" width="5" height="12"/><rect class="wf" x="26" y="15" width="5" height="12"/><rect class="wf" x="5" y="31" width="38" height="2.5"/></svg></span><div><b>止めるか削除するかを、保存料と作り直す手間で決める</b><span>停止中もディスクの料金はかかる。作り直すと、私たちの場合は約1時間10分かかった。</span></div></li>
      <li><span class="n"><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><path d="M19 3h10v18h9L24 35 10 21h9z"/><path d="M3 30h7v8h28v-8h7v15H3z"/></svg></span><div><b>削除の前に、モデルとログを手元へ</b><span>届いたファイルが読み込めるかまで確かめる。サイズだけ見て、途中で切れたまま読み込んで失敗した。</span></div></li>
      <li><span class="n"><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><rect x="3" y="6" width="42" height="36"/><rect class="wf" x="25" y="6" width="3" height="36"/><rect class="wf" x="28" y="23" width="17" height="3"/></svg></span><div><b>学習は tmux の中で動かす</b><span>手元のターミナルが固まっても、学習は止まらなかった。</span></div></li>
      <li><span class="n"><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><path class="s" d="M9 25A15 15 0 0 1 35 14"/><path d="M41 5v15H26z"/><path class="s" d="M39 23A15 15 0 0 1 13 34"/><path d="M7 43V28h15z"/></svg></span><div><b>学習した Pod で、そのまま推論する</b><span>モデルの往復の転送（約1時間）がなくなる。</span></div></li>
      <li><span class="n"><svg class="ico" viewBox="0 0 48 48" aria-hidden="true"><path d="M8 2h32v44l-5.3-3.5L29.3 46 24 42.5 18.7 46l-5.4-3.5L8 46z"/><path class="w" d="M15 13h18M15 21h18M15 29h11"/></svg></span><div><b>GPUの型番・時間・費用を毎回書く</b><span>書かなかった回は、合計に入れられなかった。</span></div></li>
    </ol>
  </div>
</section>

<section id="next" class="cta-x">
  <div class="wrap wide">
    <div class="cta-x-in">
      <div class="cta-x-copy">
        <p class="cta-x-k">GPU代 ¥4,677 で、ここまで動いた。</p>
        <h2>次は、<br>あなたのロボットで。</h2>
        <p class="cta-x-sub">台数・使い方・データの条件を送ってもらえれば、このページと同じ計算で、買う場合と借りる場合を並べてお返しします。学習環境の立ち上げの相談も受け付けています。</p>
      </div>
      <div class="cta-x-act">
        <a class="cta-x-main" href="/message?topic=physical-ai"><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>実測：フィジカルAI研究室 <a href="/record/building-a-physical-ai-lab-at-home">Log#1（PCの計画）</a>・<a href="/record/openpi-remote-inference-first-run">Log#2</a>・<a href="/record/pi05-libero-benchmark-first-run">Log#3</a>・<a href="/record/pi05-mecharm-demo-to-inference">Log#4</a>・<a href="/record/pi05-mecharm-lora-2000-steps">Log#5</a>・<a href="/record/pi05-mecharm-first-real-run">Log#6</a>・<a href="/record/pi05-mecharm-4000-steps">Log#7</a>・<a href="/record/pi05-retrain-five-positions">Log#10</a>・<a href="/record/pi05-learned-the-pauses">Log#11</a>・<a href="/record/pi05-first-block-in-box">Log#12</a></li>
        <li>GPUメモリの目安：<a href="https://github.com/Physical-Intelligence/openpi">openpi README</a>（GPU1枚の場合の推定。推論 >8GB・LoRA >22.5GB・全体 >70GB）</li>
        <li>借りる価格：<a href="https://www.runpod.io/pricing">Runpod Pricing</a>（2026年10月8日更新）、<a href="https://docs.runpod.io/pods/pricing">Pod の料金とディスク</a>、<a href="https://docs.runpod.io/pods/storage/types">ストレージの種類</a>、<a href="https://docs.runpod.io/references/security-and-compliance">セキュリティ</a></li>
        <li>買う価格：<a href="https://kakaku.com/pc/videocard/itemlist.aspx?pdf_Spec103=500">価格.com</a>（RTX 5090 1,199,800円・RTX 5080 295,799円・RTX 4090 998,800円）、<a href="https://www.dospara.co.jp/gamepc?prefn1=txGraphicFilter&prefv1=GeForce%20RTX%205090">ドスパラ RTX 5090搭載モデル</a>（デスクトップ最安 GALLERIA XPR7A-R59・1,244,980円・2026年10月23日）、<a href="https://gazlog.jp/entry/geforce-rtx5090-bto-more-cheap/">GAZLOG 2026年5月</a></li>
        <li>電気：<a href="https://www.eftc.or.jp/qa/">全国家庭電気製品公正取引協議会</a>（目安単価31円/kWh）、<a href="https://www.nvidia.com/en-us/geforce/graphics-cards/50-series/rtx-5090/">NVIDIA RTX 5090</a>（575W）</li>
        <li>為替：欧州中央銀行の参照レート（2026年10月19〜22日、157〜158円）</li>
        <li>検証：このページは公開後に、別のAI（ChatGPT）に誤りや言い過ぎを探してもらい、指摘をもとに直しています（2026年10月23日）</li>
      </ul>
    </details>
  </div>
</section>
  </div>
</Base>
<script is:inline>
(function(){
  // ---- 1. GPUメモリの図 ----
  var gpus=[
    {n:"RTX 5080",s:"最初に計画したPC",gb:16,price:"¥295,799",cls:"buyg"},
    {n:"RTX 4090",s:"買う",gb:24,price:"¥998,800",cls:"buyg"},
    {n:"RTX 5090",s:"買う",gb:32,price:"¥1,199,800",cls:"buyg"},
    {n:"A40",s:"実際に借りたGPU",gb:48,price:"<small>約</small>93<small>円/時</small>",cls:"rentg",act:1},
    {n:"A100",s:"借りる",gb:80,price:"<small>約</small>283<small>円/時</small>",cls:"rentg"}
  ];
  var MAX=90, rows=document.getElementById("memrows");
  gpus.forEach(function(g){
    var r=document.createElement("div");r.className="memrow"+(g.act?" actual":"");
    r.innerHTML='<div class="name">'+g.n+(g.s?'<small>'+g.s+'</small>':'')+'</div>'+
      '<div class="track"><div class="bar '+g.cls+'" style="width:'+(g.gb/MAX*100)+'%"><span class="gb">'+g.gb+'GB</span></div><div class="thresh"></div></div>'+
      '<div class="res"><b></b>'+g.price+'</div>';
    rows.appendChild(r);g.el=r;
  });
  function setTh(th){
    gpus.forEach(function(g){
      var ok=g.gb>=th, bar=g.el.querySelector(".bar");
      bar.classList.toggle("ok",ok);bar.classList.toggle("ng",!ok);
      g.el.querySelector(".thresh").style.left=(th/MAX*100)+"%";
      g.el.querySelector(".res b").textContent=ok?"足りる":"足りない";
    });
    document.querySelectorAll(".seg button").forEach(function(b){b.setAttribute("aria-pressed",String(+b.dataset.th===th));});
  }
  document.querySelectorAll(".seg button").forEach(function(b){b.addEventListener("click",function(){setTh(+b.dataset.th);});});
  setTh(22.5);

  // ---- 2. 費用の図 ----
  var runs=[
    ["Log#2","推論を初めて動かす（35分）",0.34,0],
    ["Log#3","GPUメモリを測る（52分）",0.51,0],
    ["Log#4","試しに200ステップ学習",0.6,0],
    ["Log#5","2,000ステップ学習",7.3,3.7],
    ["Log#6・7","実機で推論＋2,050ステップ追加",9.0,5.0],
    ["Log#10","4,000ステップ学習し直し",5.45,0],
    ["Log#11","4,000ステップ学習",6.4,0]
  ];
  var FX=158, CM=9.5, cr=document.getElementById("costrows");
  runs.forEach(function(r){
    var work=r[2]-r[3], d=document.createElement("div");d.className="costcol";
    d.innerHTML='<div class="cbar" title="'+r[1]+'：約'+Math.round(r[2]*FX).toLocaleString('ja-JP')+'円'+(r[3]?'（うち置いていた分 約'+Math.round(r[3]*FX).toLocaleString('ja-JP')+'円）':'')+'">'+
      '<div class="v">¥'+Math.round(r[2]*FX).toLocaleString('ja-JP')+'</div>'+
      (r[3]?'<i class="idle" style="--p:'+(r[3]/CM*100)+'%"></i>':'')+'<i class="work" style="--p:'+(work/CM*100)+'%"></i></div>'+
      '<div class="t">'+r[1]+'<small>'+r[0]+'</small></div>';
    cr.appendChild(d);
  });

  // ---- 3. 損益分岐の計算 ----
  var $=function(id){return document.getElementById(id)};
  var yen=function(v){return "¥"+Math.round(v).toLocaleString("ja-JP")};
  var man=function(v){return (v/10000).toFixed(v>=1e6?0:1).replace(/\.0$/,"")+"万円"};
  function css(name){return getComputedStyle(document.getElementById("chart")||document.querySelector(".gbr")||document.documentElement).getPropertyValue(name).trim()}
  function calc(){
    var pc=$("pc").value.split("|").map(Number), cl=$("cloud").value.split("|").map(Number);
    var price=pc[0], kw=pc[1], pcMem=pc[2], rate=cl[0], clMem=cl[1];
    var h=+$("hours").value, idle=+$("idle").value/100, yrs=+$("years").value, resale=+$("resale").value/100, sp=+$("speed").value||1;
    var kwh=Math.max(0,+$("kwh").value||0), fx=Math.max(1,+$("fx").value||158);
    $("hoursO").textContent="月"+h+"時間"; $("idleO").textContent=Math.round(idle*100)+"%";
    $("speedO").textContent=sp+"倍";$("yearsO").textContent=yrs+"年"; $("resaleO").textContent=Math.round(resale*100)+"%";
    Array.prototype.forEach.call($("cloud").options,function(o){
      if(!o.dataset.name)o.dataset.name=o.textContent.trim();
      var d=+o.value.split("|")[0]; o.textContent=o.dataset.name+"（約"+Math.round(d*fx)+"円／"+d.toFixed(2)+"ドル）";
    });
    var months=yrs*12, rentHour=rate*fx/(1-idle), powerHour=kw*kwh/sp;
    var rentM=rentHour*h, pcFix=price*(1-resale)/months, buyM=pcFix+powerHour*h;
    $("kRent").innerHTML=yen(rentM);
    $("kBuy").innerHTML=yen(buyM);
    var diff=rentHour-powerHour, be=diff>0?pcFix/diff:Infinity;
    $("kBe").innerHTML=isFinite(be)?(be>720?'<span>720時間超</span><small> 24時間でも届かない</small>':'<i>月</i>'+Math.round(be)+'<i>時間</i><small> 1日'+(be/30).toFixed(1)+'時間</small>'):'なし';
    var totalRent=rentM*months, totalBuy=buyM*months, gap=Math.abs(totalRent-totalBuy);
    var v=$("verdict");
    var note=sp===1?'（速さが同じ場合）':'';
    if(totalRent<totalBuy){v.innerHTML='月'+h+'時間なら、'+yrs+'年で <span class="rent">借りる方が'+man(gap)+'安い</span>'+note+'。';}
    else{v.innerHTML='月'+h+'時間なら、'+yrs+'年で <span class="buy">買う方が'+man(gap)+'安い</span>'+note+'。';}
    var w=$("memWarn"), msgs=[];
    if(pcMem<22.5){msgs.push("このPC（"+pcMem+"GB）は、π0.5のLoRA学習の目安（GPU1枚で22.5GB超）に届かないため、比較の対象外です。数字は参考です。");v.innerHTML='このPCは、π0.5 の追加学習の目安に届かないため<span class="buy">比較の対象外</span>です。';}
    if(clMem<22.5)msgs.push("このGPU（"+clMem+"GB）は、π0.5のLoRA学習の目安に届かないため、比較の対象外です。");
    w.hidden=!msgs.length; w.textContent=msgs.join(" ");
    window.__gbrBe=be; if(window.__gbrFlow)window.__gbrFlow();
    draw(months,price*(1-resale),powerHour*h,rentM);
  }
  function draw(months,net,powerM,rentM){
    var svg=$("chart"),W=560,H=250,L=56,R=12,T=14,B=34;
    var maxY=Math.max(net+powerM*months,rentM*months)*1.15||1;
    var x=function(m){return L+(W-L-R)*m/months}, y=function(v){return T+(H-T-B)*(1-v/maxY)};
    var ink=css("--muted"), rule=css("--rule"), rent=css("--act")||css("--rent"), buy=css("--buy"), fg=css("--ink");
    var step=niceStep(maxY/4), s='';
    for(var g=0;g<=maxY;g+=step){s+='<line x1="'+L+'" x2="'+(W-R)+'" y1="'+y(g)+'" y2="'+y(g)+'" stroke="'+rule+'" stroke-width="1"/>'+
      '<text x="'+(L-8)+'" y="'+(y(g)+4)+'" text-anchor="end" font-size="12" font-weight="700" fill="'+ink+'" font-family="Manrope,sans-serif">'+(g/10000).toLocaleString("ja-JP")+'万</text>';}
    for(var yr=0;yr<=months/12;yr++){s+='<text x="'+x(yr*12)+'" y="'+(H-12)+'" text-anchor="middle" font-size="12" font-weight="700" fill="'+ink+'" font-family="Manrope,sans-serif">'+yr+'年</text>';}
    s+='<line x1="'+L+'" x2="'+(W-R)+'" y1="'+y(0)+'" y2="'+y(0)+'" stroke="'+fg+'" stroke-width="1"/>';
    s+='<line x1="'+x(0)+'" y1="'+y(net)+'" x2="'+x(months)+'" y2="'+y(net+powerM*months)+'" stroke="'+buy+'" stroke-width="1.5" stroke-dasharray="5 4"/>';
    s+='<line x1="'+x(0)+'" y1="'+y(0)+'" x2="'+x(months)+'" y2="'+y(rentM*months)+'" stroke="'+rent+'" stroke-width="2.5"/>';
    var d=rentM-powerM;
    if(d>0){var mx=net/d; if(mx<=months){s+='<circle cx="'+x(mx)+'" cy="'+y(rentM*mx)+'" r="5" fill="'+css("--sheet")+'" stroke="'+fg+'" stroke-width="2"/>'+
      '<text x="'+Math.min(x(mx)+8,W-R-90)+'" y="'+(y(rentM*mx)-10)+'" font-size="11" fill="'+fg+'" font-family="Manrope,Noto Sans JP,sans-serif" font-weight="700" stroke="'+css("--sheet")+'" stroke-width="5" paint-order="stroke">'+(mx/12).toFixed(1)+'年で逆転</text>';}}
    var lx=x(months)-4;
    s+='<text x="'+lx+'" y="'+(y(net+powerM*months)-8)+'" text-anchor="end" font-size="12" font-weight="700" fill="'+buy+'" font-family="IBM Plex Sans JP,sans-serif">買う</text>';
    s+='<text x="'+lx+'" y="'+(y(rentM*months)+(rentM*months>net+powerM*months?-8:16))+'" text-anchor="end" font-size="12" font-weight="700" fill="'+rent+'" font-family="IBM Plex Sans JP,sans-serif">借りる</text>';
    s+='<line id="hx" x1="0" x2="0" y1="'+T+'" y2="'+(H-B)+'" stroke="'+fg+'" stroke-width="1" opacity="0"/>';
    s+='<rect x="'+L+'" y="'+T+'" width="'+(W-L-R)+'" height="'+(H-T-B)+'" fill="transparent" id="hit"/>';
    svg.innerHTML=s;
    var hit=$("hit"),hx=$("hx"),tip=$("tip"),box=$("chartbox");
    function move(ev){var r=svg.getBoundingClientRect(),px=(ev.clientX-r.left)*W/r.width;
      var m=Math.max(0,Math.min(months,Math.round((px-L)/(W-L-R)*months)));
      hx.setAttribute("x1",x(m));hx.setAttribute("x2",x(m));hx.setAttribute("opacity",".5");
      tip.hidden=false;tip.style.left=(x(m)*r.width/W)+"px";tip.style.top=(T*r.height/H+4)+"px";
      tip.innerHTML=m+"か月目<br>買う "+yen(net+powerM*m)+"<br>借りる "+yen(rentM*m);}
    hit.addEventListener("pointermove",move);hit.addEventListener("pointerdown",move);
    hit.addEventListener("pointerleave",function(){tip.hidden=true;hx.setAttribute("opacity","0");});
  }
  function niceStep(v){var p=Math.pow(10,Math.floor(Math.log10(v))),n=v/p;return (n<=1?1:n<=2?2:n<=5?5:10)*p;}
  ["pc","cloud","hours","idle","speed","years","resale","kwh","fx"].forEach(function(id){$(id).addEventListener("input",calc);});
  calc();
  try{window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",calc);}catch(e){}
  new MutationObserver(calc).observe(document.documentElement,{attributes:true,attributeFilter:["data-theme"]});

  // ---- 5. 判定フロー ----
  var Q={
    data:{q:"学習に使うデータ（現場の映像・顧客の設備・未公開の製品など）を、社外のクラウドに送ってよいですか？",o:[["送ってよい","mem"],["送れない","!onprem"],["まだ分からない","!approve"]]},
    mem:{q:"使うAIの学習に要るGPUメモリは、買えるGPU（32GBまで）に収まりますか？",o:[["収まる","hours"],["収まらない・まだ分からない","!rent-mem"]]},
    hours:{q:"",o:[]},
    robot:{q:"AIの答えを待てない動かし方をしますか？（私たちの環境では、米国のGPUとの往復に0.6〜1.6秒かかった）",o:[["待てない","!hybrid"],["待てる（学習が中心）","!rent"]]}
  };
  var OUT={
    "onprem":["buy","手元か、条件を確かめた国内のクラウドで動かす","データを社外に出せないなら、自社のPCか、契約・保存場所・削除の条件を確かめた国内のクラウドで学習します。買う前に、機密でないデータで、必要なメモリと時間を測ってください。"],
    "approve":["","先に社内の承認を確かめる","送るデータ、送り先の会社と地域、保存と削除の条件を、社内のルールで確かめてください。待つ間は、機密でないデータで必要なメモリと時間を測れます。"],
    "rent-mem":["","まず借りて、メモリを測る","メモリが分からないまま買うと、足りないPCを買うことがあります。目的の処理が動く最小のGPUを時間で借りて、使ったメモリ・時間・ディスクを測ってから決めてください。"],
    "rent":["","借りる（Runpod など）","学習の時だけ借りるのが安く、GPUの大きさも回ごとに変えられます。6章の7つを最初に決めておくと、使っていない時間の課金を減らせます。"],
    "hybrid":["","併用：学習は借りる、推論は手元","学習は借りたGPUで回し、ロボットを動かす推論だけを手元のGPUで動かすと、遠くとの往復の遅れがなくなります。手元のGPU代と電気代が別にかかります。推論に要るメモリと速さは、使うモデルで測って確かめてください。"],
    "buy":["buy","買う方が安くなりやすい","1年の使用時間が、いまの計算機の条件での分かれ目を超えています。ただし速さの違いは測っていません。買う前に、そのGPUで同じ学習を回した時間とメモリを、借りて測ってください。"]
  };
  var box2=document.getElementById("flowbox"), ans=[];
  function render(){
    var h="", node="data", end=null;
    for(var k=0;;k++){
      var q=Q[node], a=ans[k];
      if(node==="hours"){var be=window.__gbrBe;
        if(isFinite(be)&&be<=720){var yr=Math.round(be*12/100)*100;
          q={q:"1年でGPUを何時間使いますか？（忙しい月も休む月も入れた合計。借りるGPUで換算）",o:[["約"+yr.toLocaleString("ja-JP")+"時間より少ない","robot"],["約"+yr.toLocaleString("ja-JP")+"時間以上","!buy"]]};}
        else{q={q:"いまの計算機の条件では、24時間回し続けても買う方は安くなりません。次へ進んでください。",o:[["次へ","robot"]]};}}
      h+='<div class="step'+(a!==undefined?' done':'')+'"><div class="q"><span class="n">Q'+(k+1)+'</span>'+q.q+'</div><div class="opts">';
      q.o.forEach(function(o,j){h+='<button type="button" data-k="'+k+'" data-j="'+j+'" aria-pressed="'+(a===j)+'">'+o[0]+'</button>';});
      h+='</div></div>';
      if(a===undefined)break;
      var nx=q.o[a][1];
      if(nx.charAt(0)==="!"){end=nx.slice(1);break;}
      node=nx;
    }
    if(end){var o=OUT[end];h+='<div class="outcome '+o[0]+'"><div class="label">おすすめ</div><h3>'+o[1]+'</h3><p>'+o[2]+'</p></div><button type="button" class="reset">最初から答え直す</button>';}
    box2.innerHTML=h;
    box2.querySelectorAll(".opts button").forEach(function(b){b.addEventListener("click",function(){var k=+b.dataset.k;ans=ans.slice(0,k);ans.push(+b.dataset.j);render();});});
    var rs=box2.querySelector(".reset"); if(rs)rs.addEventListener("click",function(){ans=[];render();});
  }
  window.__gbrFlow=render;
  render();
})();
</script>
<style is:global>
.gbr{
  --paper:#f4f5f7; --sheet:#ffffff; --ink:#121418; --muted:#5c616b; --rule:#e2e4e9;
  /* ---- 色の札：差し色はここだけで決める。色を戻すときは、各行の右の「色あり」の値に替える ---- */
  --rent:#121418;          /* 借りる・実費の差し色　　　色あり #2a56d4 */
  --rent-soft:#e4e6ea;     /* 借りるの薄い面　　　　　　色あり #e6ecfb */
  --rent-on-dark:#ffffff;  /* 暗い帯の上の差し色　　　　色あり #9db3f6 */
  --buy:#6b707a;           /* 買う・見積もりの差し色　　色あり #b7500f */
  --buy-soft:#eceef1;      /* 買うの薄い面　　　　　　　色あり #fbece4 */
  --buy-deep:#3c414b;      /* 注意書きの文字　　　　　　色あり #7a3800 */
  --quote-bg:#2b2e35;      /* 引用の帯の地　　　　　　　色あり #2a56d4 */
  --quote-sub:#c8ccd4;     /* 引用の帯の小さな文字　　　色あり #cdd9ff */
  --quote-text:#e4e6eb;    /* 引用の帯の本文　　　　　　色あり #e3e9ff */
  --act:#f2600c;           /* 差し色：実際に借りて払った分（A40・実費）だけに使う */
  --photo-filter:grayscale(1); /* 写真の色　　　　　　　色あり none */
  --stripe:repeating-linear-gradient(135deg,var(--ink) 0 2.5px,transparent 2.5px 5px); /* ストライプはこれ1種類だけ（黒と白が同じ太さの斜線） */
  --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; --wide:60rem;
}
.gbr, .gbr *{box-sizing:border-box}
.gbr{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.75;letter-spacing:.02em;
  padding:48px 0 0;
  text-autospace:normal;-webkit-font-smoothing:antialiased}
.gbr a{color:var(--rent);text-underline-offset:3px}
.gbr p a,.gbr figcaption a,.gbr li a,.gbr td a,.gbr dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gbr p a:hover,.gbr figcaption a:hover,.gbr li a:hover,.gbr td a:hover,.gbr dd a:hover{text-decoration-thickness:2px}
.gbr a:focus-visible,.gbr button:focus-visible,.gbr input:focus-visible,.gbr select:focus-visible{outline:2px solid var(--rent);outline-offset:2px}
.gbr .wrap{max-width:calc(var(--wide) + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}
.gbr .prose{max-width:var(--body)}
.gbr .num,.gbr .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.gbr h1,.gbr h2,.gbr h3{text-wrap:balance;letter-spacing:0}
.gbr h2{font-size:clamp(1.75rem,3.3vw,2.55rem);line-height:1.3;margin:0;font-weight:800;letter-spacing:-.005em}
.gbr h3{font-size:1.06rem;line-height:1.5;margin:0 0 .4rem}
.gbr p{margin:0 0 1em}
.gbr .label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gbr section{padding-block:80px}
.gbr section > .wrap{display:grid;gap:20px}
.gbr .lede-line{font-weight:700;border-left:3px solid var(--ink);padding-left:12px;margin:0}
.gbr header.hero{padding-block:40px 8px}
.gbr header.hero .wrap{display:grid;gap:18px}
.gbr .hero h1{font-size:clamp(1.9rem,5.2vw,3.1rem);line-height:1.22;margin:0;font-weight:700}
.gbr .hero h1 span{display:block;color:var(--muted);font-weight:500;font-size:.62em;margin-top:.35em}
.gbr .meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85rem;color:var(--muted)}
.gbr .tickets{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.gbr .ticket{background:var(--sheet);border:1.5px solid var(--ink);padding:18px 20px 16px;display:grid;gap:6px;min-width:0;position:relative}
.gbr .ticket .what{font-size:.92rem;color:var(--muted);padding-right:6.5rem}
.gbr .ticket .big{font-family:var(--mono);font-weight:600;font-size:clamp(2rem,6vw,3.2rem);line-height:1.05;font-variant-numeric:tabular-nums}
.gbr .ticket.buy .big{color:var(--buy);text-decoration:line-through;text-decoration-thickness:3px}
.gbr .ticket.rent .big{color:var(--rent)}
.gbr .ticket .sub{font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.gbr .ticket .verdict{font-size:.92rem;font-weight:500;border-top:1px dashed var(--rule);padding-top:8px;margin-top:4px}
.gbr .stamp{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;border:1.5px solid currentColor;padding:2px 8px;transform:rotate(-4deg)}
.gbr .ticket.buy .stamp{color:var(--buy)}
.gbr .ticket.rent .stamp{color:var(--rent)}
.gbr .tldr{background:var(--sheet);border:1px solid var(--rule);padding:20px 22px;display:grid;gap:12px}
.gbr .tldr ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.gbr .toc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.gbr .toc a{position:relative;font-size:.85rem;font-weight:700;text-decoration:none;padding:14px 34px 14px 14px;color:var(--ink);background:#eceef1;display:grid;gap:2px;line-height:1.4;transition:background .15s,color .15s}
.gbr .toc a i{font-style:normal;font-family:'Manrope',sans-serif;font-weight:800;color:var(--muted);font-size:.8rem}
.gbr .toc a::after{content:"↓";position:absolute;right:12px;bottom:13px;font-family:'Manrope',sans-serif;font-weight:800;font-size:1rem;line-height:1;transition:transform .15s}
.gbr .toc a:hover{background:var(--ink);color:#fff}
.gbr .toc a:hover i{color:#c8ccd4}
.gbr .toc a:hover::after{transform:translateY(3px)}
.gbr figure{margin:0;background:var(--sheet);border:1px solid var(--rule);padding:20px;display:grid;gap:14px;min-width:0}
.gbr figcaption{font-size:.82rem;color:var(--muted);line-height:1.6}
.gbr .seg{display:flex;flex-wrap:wrap;gap:6px}
.gbr .seg button{font:inherit;font-size:.85rem;padding:6px 12px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.gbr .seg button[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
.gbr .memrows{display:grid;gap:10px}
.gbr #memory figure{padding:36px 36px 30px;gap:26px}
.gbr #memory .memrows{gap:22px}
.gbr .memrow{display:grid;grid-template-columns:8.5rem 1fr 7.5rem;gap:12px;align-items:center}
.gbr .memrow .name{font-family:"Manrope","Noto Sans JP",sans-serif;font-size:1.05rem;font-weight:800;line-height:1.3;letter-spacing:-.01em}
.gbr .memrow .name small{font-family:var(--sans);font-weight:500;letter-spacing:0;margin-top:2px}
.gbr .memrow .name small{display:block;color:var(--muted);font-size:.75rem}
.gbr .track{position:relative;height:26px;background:transparent;border-bottom:1px solid var(--rule)}
.gbr .bar{position:absolute;left:0;top:3px;bottom:3px;border-radius:0;transition:background .3s,opacity .3s}
.gbr .bar.buyg.ok{background:var(--buy)}
.gbr .bar.rentg.ok{background:var(--rent)}
.gbr .bar.ng{outline:0}
.gbr .bar.buyg.ng{background:var(--stripe)}
.gbr .bar.rentg.ng{background:var(--stripe)}
.gbr .bar .gb{position:absolute;right:-3.4em;top:50%;transform:translateY(-50%);font-family:"Manrope",sans-serif;font-size:.8rem;font-weight:700;color:var(--ink)}
.gbr .thresh{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--ink);transition:left .4s}
.gbr .memrow .res{font-family:"Manrope","Noto Sans JP",sans-serif;font-size:1.08rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;white-space:nowrap;text-autospace:no-autospace}
.gbr .memrow .res small{font-size:.66em;font-weight:700;margin:0 1px}
.gbr .memrow .res b{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.02em;margin-bottom:2px}
.gbr .memrow.actual .bar.ok{background:var(--act)}
.gbr .memrow.actual .res{color:var(--act)}
.gbr .memrow.actual .name{color:var(--act)}
.gbr .axis{display:grid;grid-template-columns:8.5rem 1fr 7.5rem;gap:12px}
.gbr .axis .ticks{position:relative;height:1.2em;font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.gbr .axis .ticks span{position:absolute;transform:translateX(-50%)}
@media (prefers-reduced-motion: reduce){.gbr .bar,.gbr .thresh{transition:none}
}
.gbr .costrows{display:grid;gap:8px}
.gbr .costrow{display:grid;grid-template-columns:minmax(0,13rem) 1fr 4.2rem;gap:12px;align-items:center;font-size:.86rem}
.gbr .costrow .t{line-height:1.35;min-width:0}
.gbr .costrow .t small{display:block;color:var(--muted);font-size:.74rem}
.gbr .ctrack{display:flex;gap:2px;height:20px}
.gbr .ctrack i{display:block;height:100%}
.gbr .ctrack .work{background:var(--rent)}
.gbr .ctrack .idle{background:var(--stripe);border-radius:0}
.gbr .ctrack .work:last-child{border-radius:0}
.gbr .costrow .v{text-align:right;font-family:"Manrope",sans-serif;font-weight:800;font-size:1.08rem;letter-spacing:-.01em;white-space:nowrap}
.gbr .costsum{display:grid;grid-template-columns:minmax(0,13rem) 1fr 4.2rem;gap:12px;border-top:1.5px solid var(--ink);padding-top:8px;font-weight:700;font-size:.9rem}
.gbr .costsum-sub{font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:700;font-size:.85rem;color:var(--muted)}
.gbr .costsum .v{text-align:right;font-family:"Manrope",sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.01em;white-space:nowrap}
.gbr .legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;color:var(--muted)}
.gbr .legend i{display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:-1px}
.gbr .calc{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:0;border:1.5px solid var(--ink);background:var(--sheet)}
/* 計算機だけ黒地。色の札をこの中だけ置き換える（図の線の色もここから読む） */
.gbr .calc{--ink:#f2f3f5;--sheet:#121418;--paper:#1f2228;--muted:#9da3ad;--rule:#353941;--rent:#ffffff;--buy:#b9bec7;--buy-soft:#2a2d34;color:var(--ink);border-color:#121418}
.gbr .calc .inputs{border-right-color:var(--rule)}
.gbr .calc .field select,.gbr .calc .field input[type=number]{color-scheme:dark}
.gbr .calc .field select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2f3f5' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;padding-right:34px;text-overflow:ellipsis}
.gbr .inputs{padding:20px;border-right:1.5px solid var(--ink);display:grid;gap:16px;align-content:start}
.gbr .field{display:grid;gap:4px}
.gbr .field label{font-size:.88rem;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:8px;line-height:1.4}
.gbr .field label output{white-space:nowrap;font-size:1rem;color:var(--rent)}
.gbr .field label output{font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:1.1rem;text-autospace:no-autospace}
.gbr .field select,.gbr .field input[type=number]{font:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);width:100%}
.gbr .field input[type=range]{width:100%;accent-color:var(--rent)}
.gbr .field .hint{font-size:.72rem;color:var(--muted);line-height:1.5}
.gbr .twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gbr .result{padding:20px;display:grid;gap:16px;align-content:start;min-width:0}
.gbr .verdict-big{font-size:1.15rem;font-weight:700;line-height:1.55;margin:0}
.gbr .verdict-big .rent{color:var(--act)}
.gbr .verdict-big .buy{color:var(--buy)}
.gbr .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gbr .kpi{border-top:1.5px solid var(--ink);padding-top:8px;min-width:0}
.gbr .kpi .k{font-size:.74rem;color:var(--muted);line-height:1.4}
.gbr .kpi .v{font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-autospace:no-autospace;white-space:nowrap}
.gbr .kpi .v i{font-style:normal;font-size:.6em;font-weight:700;margin:0 1px}
.gbr .kpi .v small{display:block;font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px}
.gbr .chartbox{position:relative;min-width:0}
.gbr .chartbox svg{display:block;width:100%;height:auto}
.gbr .tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--sheet);font-size:.75rem;padding:6px 8px;line-height:1.5;font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:700;white-space:nowrap;transform:translate(-50%,-110%)}
.gbr .warn{font-size:.8rem;border:1px solid var(--buy);color:var(--ink);background:var(--buy-soft);padding:8px 10px}
.gbr details{border-top:1px solid var(--rule);padding-top:10px;font-size:.85rem}
.gbr details summary{cursor:pointer;font-weight:500}
.gbr details pre{font-family:var(--mono);font-size:.78rem;white-space:pre-wrap;line-height:1.7;margin:.6em 0 0;color:var(--muted)}
.gbr .cta-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:0;padding:20px 24px;font-size:.92rem}
.gbr .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;padding:10px 18px;border:1.5px solid var(--ink);color:var(--ink);background:var(--sheet);font-size:.92rem}
.gbr .btn.primary{background:var(--rent);border-color:var(--rent);color:#fff}
.gbr .btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.gbr .btn:hover{transform:translateY(-1px)}
/* ボタンは二重枠にしない（フォーカスは塗りの反転で示す） */
.gbr .btn:focus-visible{outline:none;background:var(--ink);border-color:var(--ink);color:#fff}
.gbr .btn.dark:focus-visible,.gbr .btn.primary:focus-visible{text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion: reduce){.gbr .btn:hover{transform:none}
}
.gbr .tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--sheet)}
.gbr table{border-collapse:collapse;width:100%;min-width:640px;font-size:.86rem;line-height:1.55}
.gbr th,.gbr td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.gbr thead th{font-size:.78rem;color:var(--muted);font-weight:500;border-bottom:1.5px solid var(--ink)}
.gbr thead th.b{color:var(--buy)}
.gbr thead th.r{color:var(--rent)}
.gbr tbody th{font-weight:700;width:9rem}
.gbr .mk{font-family:"Manrope",sans-serif;font-weight:800;display:inline-block;width:1.4em;font-size:1rem}
.gbr tbody tr:last-child th,.gbr tbody tr:last-child td{border-bottom:0}
.gbr .cons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gbr .con{background:var(--ink);color:#fff;padding:20px 18px 18px;display:grid;gap:6px;align-content:start;min-width:0}
.gbr .con .v{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.9rem;color:var(--rent-on-dark);line-height:1.1}
.gbr .con h3{font-size:.95rem;margin:0}
.gbr .con p{font-size:.82rem;color:#c8ccd6;margin:0;line-height:1.6}
.gbr .flow{border:0;background:var(--sheet);padding:28px 28px 24px;display:grid;gap:22px;box-shadow:0 1px 0 var(--rule),0 18px 40px -24px rgba(18,20,24,.25)}
.gbr .step{display:grid;gap:8px}
.gbr .step .q{font-weight:700}
.gbr .step .q .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--rent);color:#fff;font-family:'Manrope',sans-serif;font-size:.8rem;margin-right:10px;vertical-align:1px}
.gbr .step.done .q .n{background:var(--muted)}
.gbr .step .opts{display:flex;flex-wrap:wrap;gap:8px}
.gbr .step .opts button{font:inherit;font-size:.86rem;padding:7px 14px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.gbr .step .opts button[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
.gbr .step.done .q{color:var(--muted)}
.gbr .outcome{padding:16px 18px;background:#f3f4f6}
.gbr .outcome.buy{background:#f3f4f6}
.gbr .outcome h3{font-size:1.1rem;margin:0 0 4px}
.gbr .outcome p{margin:0;font-size:.9rem}
.gbr .reset{font:inherit;font-size:.8rem;background:none;border:0;color:var(--rent);text-decoration:underline;cursor:pointer;justify-self:start;padding:0}
.gbr .checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:2px solid var(--ink)}
.gbr .checks li{display:grid;grid-template-columns:2.4rem 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule)}
.gbr .checks li .n{width:2.2rem;height:2.2rem;display:grid;place-items:center;border:2px solid var(--ink);font-family:'Manrope',sans-serif;font-weight:800;font-size:.85rem;color:var(--ink)}
.gbr .checks li b{display:block}
.gbr .checks li span{font-size:.86rem;color:var(--muted)}
.gbr .cta-end{background:transparent;color:#fff;padding:0;display:grid;gap:16px;max-width:40rem}
.gbr .cta-end h2{color:#fff;margin:0;font-size:clamp(1.8rem,3.6vw,2.6rem)}
.gbr .cta-end p{margin:0;max-width:36em;color:#d6dae3}
.gbr .cta-end .btns{display:flex;flex-wrap:wrap;gap:12px}
.gbr .cta-end .btn{background:transparent;color:#fff;border-color:#fff}
.gbr .cta-end .btn.primary{background:var(--rent);border-color:var(--rent);color:#fff}
.gbr .sources{font-size:.8rem;color:var(--muted)}
.gbr .sources ul{padding-left:1.2em;margin:.5em 0 0;display:grid;gap:4px}
@media (max-width:760px){.gbr .tickets{grid-template-columns:1fr}
.gbr .calc{grid-template-columns:1fr}
.gbr .inputs{border-right:0;border-bottom:1.5px solid var(--ink)}
.gbr .calc .inputs{border-bottom-color:var(--rule)}
.gbr .cons{grid-template-columns:1fr 1fr}
.gbr .memrow,.gbr .axis{grid-template-columns:6.4rem 1fr 5.6rem;gap:8px}
.gbr .costrow,.gbr .costsum{grid-template-columns:minmax(0,8.5rem) 1fr 3.6rem;gap:8px}
.gbr .kpis{grid-template-columns:1fr 1fr}

}
@media (max-width:420px){.gbr .cons{grid-template-columns:1fr}
}

.gbr .clip video{display:block;width:100%;height:auto;background:var(--ink)}

/* ---- FV（見積書と利用明細） ---- */
.gbr .fv{position:relative;overflow:hidden;background:var(--paper);padding:0}
.gbr .fv-art{position:absolute;right:0;top:0;width:min(58%,840px);aspect-ratio:840/852}
/* 最初の画面だけ、ブロックの赤を残す（画像側で赤以外を白黒にしてある） */
.gbr .fv-art::before{content:"";position:absolute;inset:0;background:url(/site/gbr/halftone-red.png) 0 0/100% 100% no-repeat;opacity:.5}
.gbr .fv-art::after{content:"";position:absolute;left:0;top:0;bottom:0;width:20%;background:linear-gradient(90deg,var(--paper),rgba(244,245,247,0))}
.gbr .fv-arm{position:absolute;left:9.05%;top:0;width:98.33%;max-width:none;height:auto;mix-blend-mode:multiply;opacity:.82}
.gbr .fv-in{position:relative;max-width:calc(1080px + 2*var(--gut));margin:0 auto;padding:56px var(--gut) 40px;display:grid;gap:44px}
.gbr .fv-text{max-width:33rem;display:grid;gap:18px}
.gbr .fv .who{margin:0;font-size:.9rem;font-weight:700;color:var(--rent);line-height:1.6}
.gbr .fv h1{margin:0;font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.12;font-weight:900;letter-spacing:-.01em}
/* 英字（Manrope の一番太い800）を、日本語の900と同じ太さに見せる */
.gbr .fv h1 .lat,.gbr h2 .lat,.gbr .h-num{-webkit-text-stroke:.028em currentColor;paint-order:stroke fill;letter-spacing:.01em}
.gbr .fv-lead{margin:0;font-size:1rem;line-height:1.85;color:#2a2d33;max-width:30em}
.gbr .fv-cta{display:flex;flex-wrap:wrap;gap:10px}
.gbr .fv-docs{display:grid;grid-template-columns:minmax(0,380px) 120px minmax(0,380px);align-items:stretch}
.gbr .doc{background:#fff;border:1px solid var(--rule);padding:20px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:330px;min-width:0}
.gbr .doc-top{display:grid;gap:8px}
.gbr .doc-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gbr .doc-h span{font-size:1.25rem;font-weight:700;letter-spacing:.08em}
.gbr .doc-h em{font-style:normal;font-size:.75rem;font-weight:700;color:#fff;padding:4px 10px}
.gbr .tag-buy{background:var(--buy)} .gbr .tag-rent{background:var(--rent)}
.gbr .doc-sub{margin:0;font-size:.72rem;color:var(--muted);line-height:1.5}
.gbr .doc-rows{margin:0;font-size:.82rem;border-top:1px solid #eceef1}
.gbr .doc-rows div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #eceef1}
.gbr .doc-rows dt{color:var(--muted)} .gbr .doc-rows dd{margin:0;text-align:right}
.gbr .gb16{text-decoration:none;color:var(--buy);border-bottom:2px solid var(--buy)}
.gbr .doc-warn{margin:0;padding:6px 10px;background:var(--buy-soft);color:var(--buy-deep);font-size:.7rem;font-weight:700;line-height:1.5}
.gbr .doc-total{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.gbr .doc-total span{font-size:.88rem;font-weight:700}
.gbr .big-buy{font-family:'Manrope',sans-serif;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--buy);text-decoration-thickness:3px;letter-spacing:0}
/* 利用明細だけ色を入れる（最後のCTAのボタンと同じ橙）。見積書は白黒のまま */
.gbr .fv-docs{--est:#f2600c}
.gbr .fv-docs .tag-rent{background:var(--est)}
.gbr .fv-docs .big-rent{color:var(--est)}
.gbr .big-rent{font-family:'Manrope',sans-serif;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;color:var(--rent);letter-spacing:0}
.gbr .rcpt-rows{list-style:none;margin:0;padding:0;border-top:1px dashed #b8bcc6;font-size:.75rem;letter-spacing:0}
.gbr .rcpt-rows li{display:flex;justify-content:space-between;gap:8px;padding:3px 0}
.gbr .rcpt-total{border-top:1px dashed #b8bcc6;padding-top:6px}
.gbr .ratio{align-self:center;justify-self:center;width:96px;height:96px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-content:center;text-align:center;line-height:1.1;position:relative;z-index:1}
.gbr .ratio span{font-size:.7rem;color:#c8ccd4} .gbr .ratio b{font-family:'Manrope',sans-serif;font-size:1.5rem;font-weight:800}
.gbr .fv-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;align-items:center}
.gbr .fv-foot .meta{font-size:.8rem}
.gbr .fv-cap{margin:0;font-size:.75rem;color:#3c414b;background:#fff;border:1px solid var(--rule);padding:5px 12px}
/* ---- セクションの帯 ---- */
.gbr .band-white{background:#fff}
.gbr .band-tint{background:#e9ebef}
.gbr .band-ink{background:var(--ink);color:#e8eaf0}
.gbr .band-ink h2,.gbr .band-ink h3{color:#fff}
.gbr .band-ink .prose p{color:#cfd4de}
.gbr .band-ink a{color:var(--rent-on-dark)}
.gbr .band-ink figure{color:var(--ink)}
.gbr .band-ink figure a{color:var(--rent)}
.gbr .sec-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.gbr .sec-no{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(3.2rem,7vw,5rem);line-height:.82;color:var(--paper);-webkit-text-stroke:3px var(--rent);paint-order:stroke fill;letter-spacing:-.02em}
/* 中を地の色で塗って、字の輪郭が重なる所の小さな三角を隠す（地の色に合わせる） */
.gbr .band-white .sec-no{color:#fff}
.gbr .band-tint .sec-no{color:#e9ebef}
.gbr .band-ink .sec-no{color:var(--ink);-webkit-text-stroke-color:var(--rent-on-dark)}
.gbr .sec-head h2{flex:1 1 20rem;padding-bottom:4px}
.gbr .kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--rent)}
.gbr .facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.gbr .fact{padding:22px 28px 10px 0;display:grid;gap:8px;align-content:start;min-width:0}
.gbr .fact + .fact{padding-left:28px;border-left:1px solid var(--rule)}
.gbr .fact-n{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--rent);letter-spacing:-.02em}
.gbr .fact-n small{font-size:.42em;font-weight:700;margin-left:4px;color:var(--ink)}
.gbr .fact-n small.pre{margin-left:0;margin-right:4px}
.gbr .fact-n{text-autospace:no-autospace}
.gbr .fact h3{margin:0;font-size:1.02rem;line-height:1.5;word-break:auto-phrase}
.gbr .fact p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.75}
.gbr .fact-chart{display:block;width:100%;max-width:300px;height:auto;margin:16px 0 10px;overflow:visible}
.gbr .fact-chart .fc-th{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 3}
.gbr .fact-chart .fc-axis{stroke:var(--ink);stroke-width:1}
.gbr .fact-chart .fc-rent{stroke:var(--rent);stroke-width:2.5}
.gbr .fact-chart .fc-buy{stroke:var(--ink);stroke-width:1.5}
.gbr .scope{margin:0 auto;font-size:.82rem;color:var(--muted);max-width:none;text-align:center;text-wrap:balance;word-break:auto-phrase}
.gbr .split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:start}
.gbr .split2 .prose{max-width:none}
.gbr .cta-band{position:relative;overflow:hidden;padding-block:96px}
.gbr .cta-band::before{content:"";position:absolute;right:-60px;top:50%;width:620px;aspect-ratio:840/852;transform:translateY(-50%);background:url(/site/gbr/halftone.png) 0 0/100% 100% no-repeat;opacity:.22;filter:var(--photo-filter)}
.gbr .cta-band .wrap{position:relative}
/* 最後のCTA：黒の細いストライプ地に白いカード。ボタンだけ色（ページで色を使うのはここだけ） */
.gbr .cta-x{--cta:#f2600c; /* 利用明細の --est と同じ色 */position:relative;isolation:isolate;overflow:hidden;background:#0b0c0e;padding-block:96px}
.gbr .cta-x::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/site/gbr/cta-arm.webp) left -460px center/auto 130% no-repeat;opacity:.22;-webkit-mask:linear-gradient(90deg,#000 45%,transparent 75%);mask:linear-gradient(90deg,#000 45%,transparent 75%)}
.gbr .cta-x::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,#fff 0 3px,#0b0c0e 3px 10px);clip-path:polygon(74% 0,100% 0,100% 100%,52% 100%)}
.gbr #summary .wrap.wide,.gbr .cta-x .wrap.wide{max-width:calc(1080px + 2*var(--gut))}
.gbr .cta-x-in{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:44px;align-items:center;padding:64px 60px}
.gbr .cta-x-copy{display:grid;gap:14px}
.gbr .cta-x-k{margin:0;font-family:"Manrope","Noto Sans JP",sans-serif;font-weight:800;font-size:.95rem;color:var(--ink)}
.gbr .cta-x h2{margin:0;color:var(--ink);font-size:clamp(1.9rem,6.4vw,3.2rem);line-height:1.2;font-weight:900;word-break:auto-phrase}
.gbr .cta-x-sub{margin:0;color:#3c414b;font-size:.92rem;line-height:1.85;max-width:32em}
.gbr .cta-x-act{display:grid;gap:12px}
.gbr .cta-x-main,.gbr .cta-x-sec{word-break:auto-phrase;display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;transition:background .15s,color .15s}
.gbr .cta-x-main{background:var(--cta);color:#fff;padding:24px 26px;font-weight:900;font-size:1.15rem;line-height:1.35}
.gbr .cta-x-main small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;margin-bottom:4px}
.gbr .cta-x-main i.ms{font-size:28px;transition:transform .2s}
.gbr .btn .ms{font-size:18px;transition:transform .2s}
.gbr .btn:hover .ms{transform:translateX(3px)}
.gbr .cta-x-sec{border:1.5px solid var(--ink);color:var(--ink);padding:15px 20px;font-weight:700;font-size:.86rem}
.gbr .cta-x-sec i{font-size:1.15rem}
.gbr .cta-x-main:hover{background:var(--ink)}
.gbr .cta-x-sec:hover{background:var(--ink);color:#fff}
.gbr .cta-x-main:hover i,.gbr .cta-x-sec:hover i{transform:translateX(5px)}
.gbr .cta-x-main:focus-visible,.gbr .cta-x-sec:focus-visible{outline:none;background:var(--ink);color:#fff}
@media (max-width:900px){.gbr .cta-x{padding-block:48px}.gbr .cta-x::before{background-position:center;background-size:cover;-webkit-mask:none;mask:none;opacity:.18}.gbr .cta-x::after{clip-path:polygon(84% 0,100% 0,100% 100%,40% 100%)}.gbr .cta-x-in{grid-template-columns:1fr;gap:28px;padding:32px 24px}}
/* 最後のCTAだけ色を使う（ページ内で唯一の色） */
.gbr .cta-color{--cta:#2a56d4;background:var(--cta);color:#fff}
.gbr .cta-color::before{filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.42;width:680px}
.gbr .cta-color::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 50%,rgba(20,44,140,.55) 0%,rgba(20,44,140,0) 60%);pointer-events:none}
.gbr .cta-color .wrap{z-index:1}
.gbr .cta-color .cta-k{color:#dfe7ff;letter-spacing:.14em}
.gbr .cta-color h2{color:#fff}
.gbr .cta-color p{color:#e6ecff}
.gbr .cta-color .cta-end .btn{background:transparent;color:#fff;border-color:#fff;padding:14px 22px;font-size:1rem}
.gbr .cta-color .cta-end .btn.primary{background:#fff;border-color:#fff;color:var(--cta)}
.gbr .cta-color .cta-end .btn.primary:hover{background:#121418;border-color:#121418;color:#fff}
.gbr .cta-color .cta-end .btn:not(.primary):hover{background:rgba(255,255,255,.12)}
#flow .wrap{max-width:calc(52rem + 2*var(--gut))}
@media (max-width:900px){
  .gbr .fv-art{position:relative;width:100%;margin-bottom:-38%}
  .gbr .fv-art::after{left:0;right:0;top:auto;bottom:0;width:auto;height:45%;background:linear-gradient(0deg,var(--paper) 15%,rgba(244,245,247,0))}
  .gbr .fv-in{padding-top:0}
  .gbr .fv-docs{grid-template-columns:1fr;gap:12px;max-width:420px}
  .gbr .ratio{width:80px;height:80px;margin:-4px 0}
  .gbr .facts3{grid-template-columns:1fr}
  .gbr .fact + .fact{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .gbr .toc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gbr .split2{grid-template-columns:1fr}
  .gbr .checks{grid-template-columns:1fr}
  .gbr section{padding-block:56px}
}

/* ---- レイアウトの変化 ---- */
.gbr .wrap.wide{max-width:calc(1200px + 2*var(--gut))}
.gbr #summary .wrap.wide,.gbr #calc .wrap.wide,.gbr #reverse .wrap.wide{max-width:calc(1080px + 2*var(--gut))}
.gbr .side{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.gbr .side-l{position:sticky;top:88px;display:grid;gap:22px;align-self:start;align-content:start}
.gbr .side-l .prose{max-width:none}
.gbr .side-l .prose p{font-size:.9rem;line-height:1.85}
.gbr .side .sec-head,.gbr .sec-head.stack{flex-direction:column;align-items:flex-start;gap:14px}
.gbr .side .sec-head h2,.gbr .sec-head.stack h2{flex:none}
.gbr .side-r{min-width:0}
.gbr .sec-head.center{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:12px}
.gbr .sec-head.center h2{flex:none}
.gbr .center-p{margin:0 auto;text-align:center}
.gbr .cost-hero{display:grid;gap:36px}
.gbr .cost-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:end;padding-bottom:32px;border-bottom:2px solid var(--ink)}
.gbr .cost-head .sec-head h2{max-width:none;word-break:auto-phrase}
.gbr .cost-num{display:grid;gap:12px;justify-items:end;text-align:right}
.gbr .cost-num .huge{margin-top:0}
.gbr .cost-chart figure{background:transparent;border:0;padding:0;box-shadow:none}
.gbr .cost-chart{min-width:0}
.gbr .costcols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px;align-items:start}
.gbr .costcol{display:grid;gap:12px;min-width:0}
.gbr .cbar{height:300px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;border-bottom:2px solid var(--ink)}
.gbr .cbar i{display:block;width:min(100%,88px);height:var(--p);flex:none}
.gbr .cbar .work{background:var(--ink)}
.gbr .cbar .idle{background:var(--stripe)}
.gbr .cbar .v{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;line-height:1;margin-bottom:8px;white-space:nowrap}
.gbr .costcol .t{font-size:.8rem;line-height:1.45;word-break:auto-phrase}
.gbr .costcol .t small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
.gbr .cost-chart .costsum{display:flex;justify-content:flex-end;align-items:baseline;gap:24px;border-top:0;padding-top:4px}
.gbr .cost-chart .costsum > span:first-child{margin-right:auto}
.gbr .huge{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(4.2rem,10vw,8.4rem);line-height:.88;color:var(--act);letter-spacing:-.035em;margin-top:18px}
.gbr .huge-sub{margin:0;font-size:.9rem;color:var(--muted)}
.gbr .cost-split{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85rem;font-weight:700}
.gbr .sw{display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:0}
.gbr .sw-w{background:var(--rent)} .gbr .sw-i{background:var(--stripe)}
.gbr .video-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:44px;align-items:center;margin-top:64px}
.gbr .video-row figure.clip{padding:0;border:0;background:transparent;gap:10px}
.gbr .video-row figure.clip video{box-shadow:0 24px 48px -28px rgba(18,20,24,.45)}
.gbr .video-note{display:grid;gap:12px}
.gbr .video-note .prose{max-width:none}
.gbr .video-note .kicker{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:800;letter-spacing:.01em;line-height:1.35;color:var(--ink);margin-bottom:4px}
.gbr .duel{display:grid;margin-top:8px}
.gbr .duel-row{display:grid;grid-template-columns:minmax(0,1fr) 13rem minmax(0,1fr);border-bottom:1px solid var(--rule)}
.gbr .duel-row > div{padding:16px 22px;font-size:.95rem;line-height:1.55;display:flex;align-items:center;color:var(--muted)}
.gbr .duel-row .d-b{justify-content:flex-end;text-align:right}
.gbr .duel-row .d-n{justify-content:center;text-align:center;font-weight:700;font-size:.88rem;color:var(--ink);padding-inline:10px}
.gbr .duel-row .win{background:var(--ink);color:#fff;font-weight:700}
.gbr .duel-head{border-bottom:2px solid var(--ink)}
.gbr .duel-head > div{font-size:1.35rem;font-weight:900;color:var(--ink);padding-bottom:14px}
.gbr .duel-foot{border-bottom:0}
.gbr .duel-foot > div{color:var(--ink);font-weight:700;font-size:.9rem;align-items:baseline;padding-top:18px}
.gbr .duel-foot .d-n{color:var(--muted);font-weight:500;font-size:.8rem}
.gbr .duel-foot b{font-family:"Manrope",sans-serif;font-weight:800;font-size:2.8rem;line-height:1;margin-right:4px}
.gbr .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gbr .cmp-bottom{display:grid;gap:14px;margin-top:48px}
.gbr .cmp-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:28px;align-items:start;margin-top:8px}
.gbr .cmp-grid table{min-width:560px}
.gbr .cmp-side{display:grid;gap:14px}
.gbr .cmp-note{margin:0;font-size:.9rem;font-weight:700}
.gbr .cmp-side .cons{grid-template-columns:1fr 1fr;gap:10px}
.gbr .band-quote{background:var(--quote-bg);color:#fff;padding-block:96px}
.gbr #reverse{position:relative;overflow:hidden;isolation:isolate;background:#0b0c0e}
.gbr #reverse::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/site/gbr/reverse.webp) right center/cover no-repeat}
.gbr #reverse::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,12,14,.92) 0%,rgba(11,12,14,.7) 45%,rgba(11,12,14,.15) 100%)}
.gbr .quote{display:grid;gap:22px}
.gbr .quote .kicker{color:var(--quote-sub)}
.gbr .quote blockquote{word-break:auto-phrase;margin:0;font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:900;line-height:1.25;letter-spacing:-.01em;max-width:16em}
.gbr .quote p{margin:0;color:var(--quote-text);max-width:44em;font-size:1rem;line-height:1.9}
.gbr .chk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap}
.gbr .chk-lead{margin:0;color:var(--muted);font-size:.95rem}
.gbr #checklist .checks{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;border-top:0;margin-top:8px}
.gbr #checklist .checks li{display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px;background:#fff;border:0;box-shadow:0 1px 0 var(--rule)}
.gbr #checklist .checks li .n{width:auto;height:auto;border:0;display:block;line-height:0;color:var(--ink)}
.gbr #checklist .ico{width:48px;height:48px;fill:currentColor;stroke:none}
.gbr #checklist .ico .w{fill:none;stroke:#fff;stroke-width:3.6;stroke-linecap:square;stroke-linejoin:miter}
.gbr #checklist .ico .wf{fill:#fff}
.gbr #checklist .ico .s{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:butt}
.gbr #checklist .checks li b{font-size:1.02rem;line-height:1.5;margin-bottom:6px}
.gbr #checklist .checks li span{display:block;line-height:1.65}
@media (max-width:900px){
  .gbr .side,.gbr .cost-hero,.gbr .video-row,.gbr .cmp-grid{grid-template-columns:1fr;gap:28px}
  .gbr .cost-head{grid-template-columns:1fr;gap:20px}
  .gbr .memrow{grid-template-columns:minmax(0,1fr) 6.6rem;row-gap:6px}
  .gbr .memrow .name{grid-column:1/-1}
  .gbr .memrow .track{grid-column:1;margin-right:3.4rem}
  .gbr .memrow .res{grid-column:2;grid-row:2;text-align:right}
  .gbr .bar .gb{right:auto;left:calc(100% + 6px)}
  .gbr .duel-row{grid-template-columns:minmax(0,1fr) 5.6rem minmax(0,1fr)}
  .gbr .duel-row > div{padding:12px 10px;font-size:.8rem}
  .gbr .duel-row .d-n{font-size:.74rem;padding-inline:4px}
  .gbr .duel-head > div{font-size:1rem}
  .gbr .duel-foot b{font-size:2rem}
  .gbr #memory figure{padding:20px;gap:16px}
  .gbr #memory .memrows{gap:12px}
  .gbr .cost-num{justify-items:start;text-align:left}
  .gbr .costcols{grid-template-columns:repeat(7,calc((100vw - var(--gut) - 42px)/3.5));gap:14px;overflow-x:auto;margin-right:calc(-1*var(--gut));padding-right:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gbr .costcols::-webkit-scrollbar{display:none}
  .gbr .costcol .t{word-break:normal;font-size:.74rem}
  .gbr .cbar{height:220px}
  .gbr .cbar .v{font-size:.95rem}
  .gbr .cost-chart .costsum{flex-wrap:wrap;gap:4px 16px}
  .gbr .costsum .v{font-size:1.15rem}
  .gbr .side-l{position:static}
  .gbr .video-row{margin-top:40px}
  .gbr .band-quote{padding-block:64px}
  .gbr #reverse::after{background:rgba(11,12,14,.8)}
}

/* ---- 文字の大きさの段階 ---- */
.gbr .sum-title{margin:0;text-align:center;font-feature-settings:"palt"}
.gbr .h-num{font-size:1.32em;line-height:1;margin-right:.04em;letter-spacing:0}
.gbr .sum-title{text-autospace:no-autospace}
.gbr .fact h3{font-size:1.15rem}
.gbr .fact p{font-size:.88rem}
.gbr .prose p{font-size:1.02rem;line-height:1.9}
.gbr figcaption{font-size:.72rem;line-height:1.65}
.gbr .kicker{font-size:.78rem}
.gbr .field .hint{font-size:.72rem;line-height:1.55}
.gbr .twocol .field label span{white-space:nowrap}

/* ---- スマートフォン ---- */
@media (max-width:900px){
  .gbr .fact{padding-right:0}
  .gbr .fact-chart{margin-inline:auto}
  .gbr .fact-n{justify-self:center}
  .gbr .fact h3{text-align:center;white-space:nowrap;font-size:min(1.15rem,4.6vw)}
  .gbr .fact h3 br{display:none}
  .gbr .memrow{grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:14px;align-items:end}
  .gbr .memrow .name{grid-column:1;grid-row:1}
  .gbr .memrow .res{grid-column:2;grid-row:1;text-align:right}
  .gbr .memrow .track{grid-column:1/-1;grid-row:2;margin-right:3.4rem}
}
@media (max-width:600px){
  .gbr #checklist .checks li{flex-direction:row;align-items:flex-start;gap:16px}
  .gbr #checklist .checks li .n{flex:none}
}

/* 見出しは言葉の切れ目でだけ折り返す */
.gbr h2 .ph{display:inline-block}

/* 角丸は使わない */
.gbr *,.gbr *::before,.gbr *::after{border-radius:0!important}
/* ボタンだけ、サイト共通の角丸（4px） */
.gbr .ratio{border-radius:50%!important}
.gbr .btn,.gbr .cta-x-main,.gbr .seg button,.gbr .reset,.gbr .flow button,.gbr #flowbox button,.gbr .cta-inline .btn{border-radius:4px!important}
</style>