---
// 一緒に手を動かすコンサルの案内（2026-10-28）。「何を頼めるか」を書き、ほかのページの出口はここへつなぐ
// 決めたこと（エイイチ 2026-10-28）：打ち合わせは週1回・訪問は月1回くらい（全国どこでも。交通費・宿泊費は別）・
// 料金はページに出さず相談で決める・最初の相談はオンライン30分まで無料、それ以降は有料
// 最初の画面は案A（一緒にやることが主役）。新しい肩書き・キャッチコピーは付けない（MASTER の枝概念の追加禁止）
// デザインは導入比較ガイド（/gpu-buy-or-rent）にそろえる（色・文字・番号の見出し・数字の強調・帯）。写真や絵は使わない（2026-10-28）
// 入口（MASTER v2.1・2026-10-28）：フッター（相談について）・研究の記録の末尾（フィジカルAI研究室・導入シミュレーション）・/llms.txt。
// トップの画面の中と SNS の投稿には出さない（SNS はプロフィール欄にだけリンクを置く）
import Base from '../layouts/Base.astro';
import { SITE, AUTHOR } from '../lib/seo';
const title = 'フィジカルAIの導入を、一緒に手を動かして進めます';
const description = 'ロボット学習の環境の立ち上げ、サービスロボットの導入前の確認、現場で回る運用の決め方を、週1回の打ち合わせと月1回の訪問で一緒に進めます。最初の30分の相談は無料（オンライン）。';
const CTA = '/message?topic=physical-ai';
const jsonLd = [{
  '@context': 'https://schema.org', '@type': 'Service', name: title, description, url: SITE + '/consult',
  serviceType: 'フィジカルAI・ロボット導入のコンサルティング（一緒に手を動かす形）', provider: AUTHOR, areaServed: { '@type': 'Country', name: 'Japan' }, inLanguage: 'ja',
}];
---
<Base title={`${title} | Pixels to Motors`} description={description} path="/consult" 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&display=swap" />
  <div class="cs">
    <section class="fv" aria-labelledby="fv-h">
      <div class="fv-in">
        <div class="fv-text">
          <p class="who">フィジカル<span class="lat">AI</span>・ロボットの導入を進める、<br>企業の担当者・研究開発チーム向け</p>
          <h1 id="fv-h">フィジカル<span class="lat">AI</span>の導入を、<br>一緒に手を動かして<br>進めます</h1>
          <p class="fv-lead"><b>ロボットに何を任せ、どこを人が持つか。</b>学習環境の立ち上げから、現場で回る運用の落とし所まで、週1回の打ち合わせと月1回の訪問で一緒に進めます。</p>
          <div><a class="btn cta" href={CTA} data-ev="無料で相談する（最初の画面）">無料で相談する（30分）<i class="ms" aria-hidden="true">arrow_forward</i></a></div>
        </div>
        <ol class="do" aria-label="一緒にやること">
          <li><a href="#proof" data-ev="最初の画面：01へ"><span class="do-n">01</span><div><h2>ロボット学習の環境を立ち上げる</h2><p>借りて測り、買うかどうかを決めるところまで</p></div><i class="ms" aria-hidden="true">arrow_downward</i></a></li>
          <li><a href="#flow" data-ev="最初の画面：02へ"><span class="do-n">02</span><div><h2>サービスロボットを入れる前に確かめる</h2><p>店の形・台数・回し方をシミュレーションで比べる</p></div><i class="ms" aria-hidden="true">arrow_downward</i></a></li>
          <li><a href="#who" data-ev="最初の画面：03へ"><span class="do-n">03</span><div><h2>現場で回る運用を決める</h2><p>止まり方と人の手間を実物から読み、運用で解く</p></div><i class="ms" aria-hidden="true">arrow_downward</i></a></li>
        </ol>
      </div>
    </section>

    <section class="band-white" id="proof" aria-labelledby="proof-h">
      <div class="wrap">
        <div class="sec-head"><span class="sec-no" aria-hidden="true">01</span><h2 id="proof-h">どれも、自分で手を動かして<br>確かめてきたこと</h2></div>
        <div class="facts3">
          <a class="fact" href="/gpu-buy-or-rent" data-ev="根拠：導入比較ガイド">
            <b class="fact-n">4,677<small>円</small></b>
            <h3>ロボット<span class="lat">AI</span>の学習を、<br>クラウドで7回回した実費</h3>
            <p>借りて測り、買うか借りるかの判断まで公開しています。</p>
            <span class="more">導入比較ガイドを見る<i class="ms" aria-hidden="true">arrow_forward</i></span>
          </a>
          <a class="fact" href="/serving-robot-one-less-staff" data-ev="根拠：配膳ロボットの試算">
            <b class="fact-n">19<small>本</small></b>
            <h3>配膳ロボットの<br>導入シミュレーションの記録</h3>
            <p>店の図面と人数から、何人で回るか・どこで止まるかを出します。</p>
            <span class="more">導入前の試算を見る<i class="ms" aria-hidden="true">arrow_forward</i></span>
          </a>
          <a class="fact" href="/one-year" data-ev="根拠：1年の記録">
            <b class="fact-n">379<small>本</small></b>
            <h3>コードと実行ログを省かずに残した、<br><span class="lat">1</span>年分の作業ログ</h3>
            <p><span class="lat">AI</span> に書かせ・確かめさせ・記録させる進め方が、ロボットを動かす <span class="lat">AI</span> の土台になっています。</p>
            <span class="more">1年の記録を見る<i class="ms" aria-hidden="true">arrow_forward</i></span>
          </a>
        </div>
      </div>
    </section>

    <section class="band-tint" id="flow" aria-labelledby="flow-h">
      <div class="wrap">
        <div class="sec-head"><span class="sec-no" aria-hidden="true">02</span><h2 id="flow-h">進め方</h2></div>
        <ol class="steps">
          <li class="first"><span class="kicker">まず</span><h3>オンラインで<span class="lat">30</span>分</h3><p>無料。今の状況と、ロボットに任せたいことを伺います。</p></li>
          <li><span class="kicker">次に</span><h3><span class="lat">1</span>か月、小さく試す</h3><p>ここから有料です。料金は、内容を伺ってから相談して決めます。</p></li>
          <li><span class="kicker">そして</span><h3>週<span class="lat">1</span>回の打ち合わせと<br>月<span class="lat">1</span>回の訪問</h3><p>訪問は全国どこでも。交通費・宿泊費は別にいただきます。</p></li>
        </ol>
      </div>
    </section>

    <section class="band-ink" id="who" aria-labelledby="who-h">
      <div class="wrap">
        <div class="sec-head"><span class="sec-no" aria-hidden="true">03</span><h2 id="who-h">誰がやっているか</h2></div>
        <div class="who-row">
          <p class="who-text">島津栄一（Pixels to Motors）。29年のデザイナー経験。秋田から、ロボットの学習と推論を自分の手で回し、その記録をすべて公開しています。ロボットやフィジカルAIが、これからどこに立つのかを見極め、いま運用に耐える落とし所へ持っていくことを仕事にしています。</p>
          <div><a class="btn cta" href={CTA} data-ev="無料で相談する（最後）">無料で相談する（30分）<i class="ms" aria-hidden="true">arrow_forward</i></a></div>
        </div>
      </div>
    </section>
  </div>
</Base>

<style>
  /* 色・文字・形は導入比較ガイド（/gpu-buy-or-rent の .gbr）と同じ値。差し色（橙）は「実際に払った分」専用なので、このページでは使わない */
  .cs {
    --paper: #f4f5f7; --sheet: #fff; --ink: #121418; --muted: #5c616b; --rule: #e2e4e9; --tint: #e9ebef;
    --gut: max(16px, env(safe-area-inset-left, 0px));
    --font: "Manrope", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
    background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.75; letter-spacing: .02em;
    padding-top: 48px; -webkit-font-smoothing: antialiased;
  }
  .cs *, .cs *::before, .cs *::after { box-sizing: border-box; }
  .cs h1, .cs h2, .cs h3 { text-wrap: balance; letter-spacing: 0; margin: 0; }
  .cs p { margin: 0; }
  .cs .lat { -webkit-text-stroke: .028em currentColor; paint-order: stroke fill; letter-spacing: .01em; }
  .cs section { padding-block: 80px; scroll-margin-top: 48px; }
  .cs .wrap { max-width: calc(1080px + 2 * var(--gut)); margin: 0 auto; padding-inline: var(--gut); display: grid; gap: 40px; }

  /* 角丸は導入比較ガイドのボタンと同じ 4px。ボタンとカードにだけ付ける */
  .btn { border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; padding: 12px 20px; border: 1.5px solid var(--ink); color: var(--ink); background: var(--sheet); font-size: .95rem; }
  /* 相談のボタンは導入比較ガイドの相談のボタン（.cta-x-main）と同じオレンジ。マウスを乗せると黒（黒い帯の上では白） */
  .btn.cta { --cta: #f2600c; background: var(--cta); border-color: var(--cta); color: #fff; transition: background .15s, border-color .15s, color .15s, transform .2s; }
  .btn.cta:hover { background: var(--ink); border-color: var(--ink); }
  .band-ink .btn.cta:hover { background: #fff; border-color: #fff; color: var(--ink); }
  .btn .ms { font-size: 18px; transition: transform .2s; }
  .btn:hover { transform: translateY(-1px); }
  .btn:hover .ms { transform: translateX(3px); }
  .btn:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

  /* 最初の画面 */
  .cs .fv { padding: 0; }
  .fv-in { max-width: calc(1080px + 2 * var(--gut)); margin: 0 auto; padding: 48px var(--gut) 64px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .fv-text { display: grid; gap: 20px; max-width: 33rem; }
  .who { font-size: .9rem; font-weight: 700; line-height: 1.6; }
  .fv h1 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); line-height: 1.14; font-weight: 900; letter-spacing: -.01em; }
  .fv-lead { font-size: 1rem; line-height: 1.85; color: #2a2d33; max-width: 30em; }
  .fv-lead b { display: block; margin-bottom: 6px; font-size: 1.15rem; line-height: 1.6; color: var(--ink); }
  .do { list-style: none; margin: 0; padding: 0; background: var(--sheet); border-radius: 4px; overflow: hidden; }
  .do a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 22px 20px 22px 20px; color: var(--ink); text-decoration: none; transition: background .2s, color .2s; }
  .do a > .ms { font-size: 20px; color: var(--muted); transition: transform .2s, color .2s; }
  .do a:hover { background: var(--ink); color: #fff; }
  .do a:hover p, .do a:hover > .ms { color: #cfd4de; }
  .do a:hover .do-n { color: var(--ink); -webkit-text-stroke-color: #fff; }
  .do a:hover > .ms { transform: translateY(3px); }
  .do li + li { border-top: 1px solid var(--rule); }
  .do-n { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--sheet); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; letter-spacing: -.02em; }
  .do h2 { font-size: 1.1rem; line-height: 1.5; font-weight: 700; }
  .do p { margin-top: 4px; font-size: .88rem; color: var(--muted); line-height: 1.7; }

  /* 番号の見出し（導入比較ガイドの .sec-head と同じ） */
  .sec-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
  .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(--ink); paint-order: stroke fill; letter-spacing: -.02em; }
  .sec-head h2 { flex: 1 1 20rem; padding-bottom: 4px; font-size: clamp(1.75rem, 3.3vw, 2.55rem); line-height: 1.3; font-weight: 800; letter-spacing: -.005em; }
  .band-white { background: #fff; }
  .band-white .sec-no { color: #fff; }
  .band-tint { background: var(--tint); }
  .band-tint .sec-no { color: var(--tint); }
  .band-ink { background: var(--ink); color: #e8eaf0; }
  .band-ink h2 { color: #fff; }
  .band-ink .sec-no { color: var(--ink); -webkit-text-stroke-color: #fff; }

  /* 根拠の数字（導入比較ガイドの .facts3 と同じ） */
  .facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
  .fact { padding: 24px 28px 8px 0; display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--ink); text-decoration: none; }
  .fact + .fact { padding-left: 28px; border-left: 1px solid var(--rule); }
  .fact-n { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.02em; text-autospace: no-autospace; }
  .fact-n small { font-size: .42em; font-weight: 700; margin-left: 4px; }
  .fact-n small.pre { margin: 0 4px 0 0; }
  .fact h3 { margin-top: 6px; font-size: 1.02rem; line-height: 1.5; }
  .fact p { font-size: .85rem; color: var(--muted); line-height: 1.75; }
  .more { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .more .ms { font-size: 18px; transition: transform .2s; }
  .fact:hover .more { text-decoration-thickness: 2px; }
  .fact:hover .more .ms { transform: translateX(3px); }

  /* 進め方 */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .steps li { border-radius: 4px; background: var(--sheet); padding: 24px 24px 22px; display: grid; gap: 8px; align-content: start; transition: background .2s, color .2s; }
  .steps li:hover { background: var(--ink); color: #fff; }
  .steps li:hover .kicker { color: #b9bec7; }
  .steps li:hover p { color: #cfd4de; }
  .steps li.first { background: var(--ink); color: #fff; }
  .kicker { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
  .steps li.first .kicker { color: #b9bec7; }
  .steps h3 { font-size: 1.35rem; line-height: 1.45; font-weight: 800; }
  .steps p { font-size: .88rem; line-height: 1.75; color: var(--muted); }
  .steps li.first p { color: #cfd4de; }

  /* 誰がやっているか */
  .who-row { display: grid; grid-template-columns: minmax(0, 36em) auto; gap: 32px 56px; align-items: end; justify-content: space-between; }
  .who-text { font-size: 1rem; line-height: 2; color: #cfd4de; }

  @media (max-width: 900px) {
    .fv-in { grid-template-columns: 1fr; gap: 32px; padding: 32px var(--gut) 48px; }
    .facts3, .steps { grid-template-columns: 1fr; }
    .fact, .fact + .fact { padding: 24px 0 16px; border-left: 0; }
    .fact + .fact { border-top: 1px solid var(--rule); }
    .who-row { grid-template-columns: 1fr; }
    .cs section { padding-block: 64px; }
  }
  @media (max-width: 600px) {
    .do a { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 18px 14px; }
    .do-n { font-size: 2rem; }
  }
</style>
