---
import Base from '../layouts/Base.astro';
import RecordCard from '../components/RecordCard.astro';
import { ymd } from '../lib/format';
import { media } from '../lib/media';
// SNS アイコン（Font Awesome Free 6.7.2・CC BY 4.0。ライセンス表記は各 SVG の中に残している）
import icGithub from '../icons/github.svg?raw';
import icLinkedin from '../icons/linkedin.svg?raw';
import icX from '../icons/square-x-twitter.svg?raw';
import icYoutube from '../icons/youtube.svg?raw';
import { allCards } from '../lib/records';
import MangaCard from '../components/MangaCard.astro';
import LoadMore from '../components/LoadMore.astro';
import GuideCards from '../components/GuideCards.astro';
import ThinkingBanner from '../components/ThinkingBanner.astro';
import OneYearBanner from '../components/OneYearBanner.astro';
import TopAiGuide from '../components/TopAiGuide.astro';
import { allManga } from '../lib/records';
// Studio のトップと同じく、4コマは新しい4話
const mangaCards = allManga.slice(0, 4);

// 2026-10-30：研究室（series6）はお手本の関節の動きを重ねた白黒ツートンの図（tools/series_cards/series6.py）、導入シミュレーション（series8）は Unity の画面、画像認識（series7）は赤い箱の写真が処理されていく4列の図（tools/series_cards/series7.py）に変えた。
// 前の絵：研究室 = media の s-1672x941_76620d86-fa7b-491f-b554-99c2f8981d8d.webp、画像認識 = media の s-1800x1200_v-frms_82af05c4-20df-4ea1-b88d-355ed8fabd63.webp、導入シミュレーション = /site/series8-service-robot-simulation.png?v=3（どれも消さずに残してある）
const series = [
  { href: '/series1', img: 's-1920x1318_v-frms_4cd7792b-68a1-4239-ad08-0785c4e538c5.webp', en: 'Drug Delivery Robot', ja: '薬剤搬送ロボットハコブくん',
    desc: '病院で薬を運ぶロボット「ハコブくん」を題材に、人とロボットの関わり（HRI）を設計する記録。画面の設計、Unity での自律移動、日々の開発の記録を、4コママンガと一緒に残しています。' },
  { href: '/series6', img: '/site/series6-physical-ai-lab-demos.webp', en: 'Physical AI Lab', ja: 'フィジカルAI研究室',
    desc: 'ロボットアームが動きを覚える環境を、自宅にひとりで作る記録。お手本の動きを集めてロボット用のAIに学習させ、実機で確かめます。誰でも同じ手順で始められる形で残しています。' },
  { href: '/series7', img: '/site/series7-image-recognition-steps.webp', en: 'Image recognition and Object detection', ja: '画像認識と物体検出',
    desc: 'ロボットのカメラが物を見つける仕組みを、下の層から学び直す記録。画素・色・しきい値・輪郭といった手法を、机の上のアームを撮った写真で1つずつ測って確かめます。' },
  { href: '/series8', img: '/site/series8-service-robot-unity.webp', en: 'Service Robot Simulation', ja: 'サービスロボット導入シミュレーション',
    desc: '配膳・清掃・搬送などのロボットを店や施設に入れる前に、待ち時間・人数・止まる場所・費用を試算する記録。時間と台数は SimPy、空間と動きは Unity で扱い、前提・結果・コードをすべて公開しています。' },
  { href: '/series5', img: '/site/series5-deep-dive.jpg', // 考察記事のサムネイルと同じ形（3-B）。元の HTML は tools/series5_top_card.html（2026-10-26）
    en: 'Deep Dive', ja: '考察記事',
    desc: '実装の記録とは別に、フィジカルAIやロボットについて、なぜそうなるのか、何を意味するのかを考えた記事。外れた議論も含めて、対話をそのまま残しています。' },
  { href: '/series2', img: 's-1920x1318_v-frms_0d775000-730b-4ac2-90b5-d814a9f53fc6.webp', en: 'R2R2R', ja: 'デジタルツイン学習-R2R2R（Real to Render to Real）',
    desc: 'iPhone で物を3Dスキャンし、Unity で動きを試してから、机の上のロボットアームで実際に動かす記録。ロボット工学を学んでいないデザイナーでも、アームの動きを設計できるかを試しています。' },
  { href: '/series4', img: '/site/series4-behind-the-solo-lab-door.png', en: 'Behind the Solo Lab', ja: 'ひとり研究所の裏側', desc: 'フィジカルAIの研究をひとりで続けるために、AIと一緒に作ってきた仕組みの記録。サイト、動画、記録の整理など、研究の外側の作業をどう回しているかを残しています。' },
];
const records = await allCards();
// ロボットに関わる人へ・事業所についての仕事の進め方（2026-11-12 エイイチが B 案に決定）。裏づけは公開済みの記録
const byLog = (n: number) => records.find((c) => c.day === `LOG${n}`)!;
const shortTitle = (n: number) => byLog(n).title.replace(/^.*?\| /, '').replace(/ ― .*$/, '');
const SOLVE = [
  { who: 'ロボット会社の導入・営業の人へ', img: '/site/series8-service-robot-unity.webp',
    pain: '導入先ごとに条件が違い、見積もりと段取りが毎回手作業になる',
    make: '店や病院の形と運び方を入れると、台数・待ち時間・詰まる場所が出る導入前の試算。Unity で動きを見せる再現。導入先が変わっても使える手順の型。',
    logs: [477, 485] },
  { who: 'ロボットを入れる店や病院へ', img: '/site/sim/hospital.jpg',
    pain: 'メーカーの説明だけでは、自分の現場で回るかが分からない',
    make: 'メーカーに寄らない立場での、入れる前の確かめ。通る道、待たせる場所、人の手が要る回数を、入れる前に数字で出します。',
    logs: [404, 389] },
  { who: 'ロボットに AI で動きを覚えさせる人へ', img: '/site/lab/run-poster.webp',
    pain: '学習させても、どこで失敗し、人がどれだけ手を出しているかが見えない',
    make: '失敗した所を人がゲームパッドで直し、そのまま学習のお手本にする道具。直す時間の計測。借りた GPU で学習を回す手順。',
    logs: [492, 419] },
  { who: 'ロボットの横で働く人の画面と手順', img: '/site/sim/serving.jpg',
    pain: 'ロボットが止まったとき、現場の人がどうすればいいか分からない',
    make: '止まった理由と次にやることが分かる画面と手順。現場の人に伝えるための説明の絵や動画も作ります。',
    logs: [439, 389] },
];
const WAYS = [
  { h: 'ロボットより、現場に入れる手間を見る',
    t: 'ロボットそのものは、大手とAIがどんどん安く強くしていきます。残るのは、現場ごとに違う導入の手間。そこを、決まった見積もりと手順に変えます。', log: 481 },
  { h: '入れる前に、現場ごと再現して数える',
    t: '店や病院を、人の動きごと3Dで再現し、どこで詰まるかを入れる前に数えます。勘ではなく、数えた結果で決めます。', log: 477 },
  { h: '測ってから、縮める先を決める',
    t: '人が手を出している時間を測り、どこに時間がかかっているかを数字にしてから手を打ちます。直す先を、思いつきで選びません。', log: 492 },
];
// 立ち位置の1文（2026-11-08 エイイチが決定）。タイトル・説明文・AI 向けの案内（src/lib/llmsGuide.ts の GUIDE_LEAD）とそろえる
const LINE = '現場で人が受け入れて、使い続けられるロボットを';
const DESC = `${LINE}。そのために、サービスロボットを店に入れる前に何が起きるかを試算と3D（Unity）で確かめ、机の上のロボットアームにお手本から動きを覚えさせています。前提・結果・コードはすべて公開。29年のデザイナー経験をもつ島津 栄一（ADAPT DESIGN）の研究記録です。`;
import { SITE, SITE_NAME, AUTHOR, PUBLISHER } from '../lib/seo';
const jsonLd = [
  { '@context': 'https://schema.org', '@type': 'WebSite', name: SITE_NAME, url: SITE + '/', inLanguage: 'ja', description: DESC, publisher: PUBLISHER },
  { '@context': 'https://schema.org', ...PUBLISHER, founder: AUTHOR,
    sameAs: ['https://www.youtube.com/@PixelstoMotors', 'https://github.com/PixelstoMotors', 'https://x.com/adaptdesignjp'] },
  { '@context': 'https://schema.org', ...AUTHOR, sameAs: ['https://www.linkedin.com/in/eiichi-shimazu/', 'https://x.com/adaptdesignjp'], description: '29年のデザイナー経験を持つデザイナー／ディレクター。Pixels to Motors で人とロボットの関わり（HRI）とフィジカルAIを研究・発信している。' },
];
---
<Base title={`Pixels to Motors ｜ ${LINE}`}
  description={DESC}
  ogImage="/site/ffb300c2-1071-4714-978c-87d386d5dfd3.png" path="/" jsonLd={jsonLd}>

  <!-- 最初の画面（2026-11-08 作り直し）。立ち位置の1文を主役に、いま進めている2つ（導入シミュレーション・研究室）をその証拠として並べる。
       同じ1文をタイトル・説明文・AI 向けの案内（src/lib/llmsGuide.ts）にもそろえている（AI がこのサイトを説明するときの言葉になるため）。
       前の FV はハコブくんの動画（media の hakobu_fv_voice_eleven.mp4・消さずに残してある） -->
  <section class="hero-wrap"><div class="hero">
    <div class="hero-head">
      <h1>現場で人が受け入れて、<br>使い続けられるロボットを。</h1>
      <p>そのために、いま2つを進めています。店に入れる前に何が起きるかを確かめることと、ロボットに動きを覚えさせること。前提・結果・コードは、すべて公開しています。</p>
    </div>
    <div class="hero-cards">
      <a class="hcard" href="/series8" data-ev="FV:導入シミュレーション">
        <img src="/site/series8-service-robot-unity.webp" alt="Unityで建てたファミレスを斜めから見たところ" width="1320" height="880" />
        <span class="hc-meta"><span><span class="hc-kicker">入れる前に確かめる</span><span class="hc-title">サービスロボット<wbr>導入シミュレーション</span></span><i class="ms" aria-hidden="true">arrow_forward</i></span>
      </a>
      <a class="hcard" href="/series6" data-ev="FV:研究室">
        <img class="hc-arm" src="/site/lab/run-poster.webp" alt="机の上のロボットアームと、赤いブロックと白い箱" width="1200" height="900" />
        <span class="hc-meta"><span><span class="hc-kicker">動きを覚えさせる</span><span class="hc-title">フィジカルAI研究室</span></span><i class="ms" aria-hidden="true">arrow_forward</i></span>
      </a>
    </div>
  </div></section>

  <!-- このサイトの楽しみ方（AI に読ませて聞く）。何度も来ている人向けに、ヒーローのすぐ下・閉じると1行（2026-11-03） -->
  <TopAiGuide />

  <!-- 解説動画：YouTube の新着を GitHub の videos.json から読む埋め込み（Studio で使っていたものをそのまま） -->
  <section class="sec"><div class="panel">
    <div class="embed-wide"><iframe src="/embeds/top-video.html" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox" title="解説動画" data-embed style="height:450px"></iframe></div>
  </div></section>

  <!-- 1年の LP（/one-year）への入口。動画の次、導入前ガイドの前に置く（2026-10-25）
       MASTER 2026-10-25：デジタルの AI の土台を記録から示すページは、トップと SNS に出してよい（AI活用の相談の看板にはしない） -->
  <section class="sec"><div class="panel">
    <h2 class="sec-h">Pixels to Motors の1年 | Year One</h2>
    <OneYearBanner />
  </div></section>

  <!-- 導入前ガイド：LP 2つ（GPU を買うか借りるか・配膳ロボットの導入前シミュレーション）への入口 -->
  <section class="sec"><div class="panel">
    <h2 class="sec-h">導入前ガイド | Guide</h2>
    <GuideCards />
  </div></section>

  <section class="sec"><div class="panel">
    <h2 class="sec-h">4コママンガ | Archive</h2>
    <div class="grid4">{mangaCards.map((m) => <MangaCard item={m} />)}</div>
    <div class="center"><a class="btn-more" href="/manga-archive">もっと見る<i class="ms">arrow_forward</i></a></div>
  </div></section>

  <!-- 考えのページ（/thinking）への入口。4コマとシリーズの間に置く
       （2026-10-24 のアクセスの記録：TOP は25%の深さまでで42%、下まで33%しか読まれない。一番下では届かないため上げた。最初の画面の直下は上すぎるとエイイチの判断） -->
  <section class="sec"><div class="panel">
    <h2 class="sec-h">いまの考え | Thinking</h2>
    <ThinkingBanner />
  </div></section>

  <section class="sec"><div class="panel">
    <h2 class="sec-h">シリーズ | Series</h2>
    <div class="grid2">
      {series.map((s) => (
        <a class="scard" href={s.href}>
          <img src={s.img.startsWith('/') ? s.img : media(`/media/${s.img}`)} alt={`${s.ja}｜${s.en}`} loading="lazy" />
          <div class="sc-meta">
            <div class="sc-line"><span class="sc-ja">{s.ja}</span><span class="sc-en">{s.en}</span></div>
            {s.desc && <p class="sc-desc">{s.desc}</p>}
          </div>
        </a>
      ))}
    </div>
  </div></section>

  <section class="sec" id="record"><div class="panel">
    <h2 class="sec-h">記録 | Record</h2>
    <LoadMore limit={12} total={records.length}>{records.map((c) => <RecordCard item={c} />)}</LoadMore>
    <div class="embed-banner"><iframe src="/embeds/top-banner.html" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation" title="お知らせ" data-embed style="height:240px"></iframe></div>
  </div></section>

  <!-- ロボットに関わる人へ（2026-11-12）。相手ごとに、困りごと → 作れるもの → 裏づけの記録。
       MASTER：トップに相談の窓口は出さないため、ボタンは置かない -->
  <section class="sec" id="for-robotics"><div class="panel">
    <h2 class="sec-h">ロボットに関わる人へ | For Robotics Teams</h2>
    <p class="sv-lead">ロボットを作る人、売る人、入れる人、横で働く人。それぞれの困りごとに、これまでの記録から作れるものです。</p>
    <div class="sv-grid">
      {SOLVE.map((s) => (
        <div class="sv">
          <div class="sv-head">
            <img class="sv-img" src={s.img} alt="" loading="lazy" />
            <div><p class="sv-who">{s.who}</p><p class="sv-pain">{s.pain}</p></div>
          </div>
          <div class="sv-make"><span class="sv-tag">作れるもの</span><p>{s.make}</p></div>
          <div class="sv-links">{s.logs.map((n) => (
            <a href={`/record/${byLog(n).slug}`}><span class="sv-log">LOG{n}</span>{shortTitle(n)}<i class="ms" aria-hidden="true">arrow_forward</i></a>
          ))}</div>
        </div>
      ))}
    </div>
  </div></section>

  <section class="sec" id="about"><div class="panel">
    <h2 class="sec-h">事業所について | Sole Prop</h2>
    <div class="prop">
      <div class="prop-person">
        <video class="prop-photo" src={media("/media/s-1280x720_ff64009f-cd40-4e7d-8ba3-350ff0d6c3ad.mp4")} poster={media("/media/s-2048x2048_5af0bc9f-8d23-4bdb-85e4-ada51bfd7bbd.webp")} muted autoplay loop playsinline></video>
        <p class="prop-role">Robotics UX &amp; HRI Designer</p>
        <p class="prop-name">島津 栄一</p>
      </div>
      <div class="prop-body">
        <p class="prop-lead">画面（Pixels）のデザインから、動き（Motors）のデザインへ</p>
        <p class="prop-text">フィジカルAIの技術で作られたロボットが、現場で使い続けられるためのサービスやプロダクトをつくる。そのための研究所を目指しています。<br><br>29年にわたるデザイナーとしての知見を土台に、人とロボットの関わり（HRI）と、ロボットが学習できる環境づくりに取り組むデザイン事務所です。Unityでのシミュレーション、実機のロボットアーム、借りたGPUでの学習・推論までを自分の手で回し、AIエージェント（Claude Code）を設計と実装の相棒にしています。基準は物理精度ではなく体験の成立。画面上の「Pixels（デジタル）」の設計を、現実の「Motors（モーター）」へ——その過程を公開しています。</p>
        <dl class="prop-facts">
          <div><dt>事業所名</dt><dd>ADAPT DESIGN</dd></div>
          <div><dt>設立</dt><dd>2021年10月</dd></div>
          <div class="wide"><dt>研究・実践分野</dt><dd>フィジカルAI（学習・推論） / HRI / ロボティクスUX設計 / デジタルツイン / 画像認識 / Unity / R2R2R</dd></div>
          <div><dt>SNS</dt><dd class="sns">
            <a href="https://github.com/PixelstoMotors/r2r2r-content" aria-label="GitHub" set:html={icGithub} />
            <a href="https://www.linkedin.com/in/eiichi-shimazu/" aria-label="LinkedIn" set:html={icLinkedin} />
            <a href="https://x.com/adaptdesignjp" aria-label="X" set:html={icX} />
            <a href="https://www.youtube.com/@PixelstoMotors" aria-label="YouTube" set:html={icYoutube} />
          </dd></div>
        </dl>
      </div>
    </div>
    <!-- 仕事の進め方（2026-11-12）。立ち位置の1文を黒い面に、その下に考え方3つ。写真の下に隙間ができないよう、プロフィールの外に全幅で置く -->
    <div class="ways">
      <p class="ways-stance">現場ごとに違う導入の手間を、<br>決まった見積もりと手順に変える。</p>
      <div class="ways-cols">
        {WAYS.map((w) => (
          <div class="way">
            <p class="way-h">{w.h}</p>
            <p class="way-t">{w.t}</p>
            <a class="way-link" href={`/record/${byLog(w.log).slug}`}>LOG{w.log} を読む<i class="ms" aria-hidden="true">arrow_forward</i></a>
          </div>
        ))}
      </div>
    </div>
  </div></section>
</Base>

<style>
  /* 最初の画面：下の節のパネル（.sec の左右 80px＋.panel の 32px）と端をそろえる */
  .hero-wrap { padding: 0 80px; }
  .hero { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding: 112px 32px 48px; display: flex; flex-direction: column; gap: 44px; }
  .hero-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .hero h1 { margin: 0; font: 900 46px/1.4 'Noto Sans JP', sans-serif; letter-spacing: -0.005em; }
  .hero-head p { flex: 0 1 440px; margin: 0 0 6px; font: 400 16px/1.85 'Noto Sans JP', sans-serif; color: #333; }
  .hero-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .hcard { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,.08); color: var(--ink); }
  .hcard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #eceef2; transition: transform .3s; }
  .hcard .hc-arm { object-position: center 40%; }
  .hcard:hover img { transform: scale(1.02); }
  .hc-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; position: relative; background: #fff; }
  .hc-meta > span { display: flex; flex-direction: column; gap: 6px; }
  .hc-kicker { font: 500 13px/1 'Noto Sans JP', sans-serif; color: #666; }
  .hc-title { font: 600 22px/1.3 'Noto Sans JP', sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
  .hc-meta .ms { font-size: 24px; }
  .embed-wide { margin: 0 -16px; } /* 埋め込み側の左右 16px の余白ぶん外へ出し、カードの端をほかの節と揃える */
  .embed-wide iframe, .embed-banner iframe { display: block; width: 100%; border: 0; }
  .embed-banner { max-width: 964px; margin: 48px auto 0; }

  .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

  .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .scard { display: block; background: #fff; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.08); overflow: hidden; }
  .scard img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .sc-meta { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
  .sc-line { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
  /* 日本語を先に、大きく置く（シリーズのページの見出し「考察記事 | Deep Dive」とそろえる。2026-10-26） */
  .sc-ja { font: 600 24px/1.3 var(--sans); }
  .sc-en { font: 500 14px/16.8px var(--sans); }
  .sc-desc { margin: 0; font: 400 14px/1.7 var(--sans); color: #555; }

  .center { display: flex; justify-content: center; margin-top: 40px; }
  .btn-more { display: inline-flex; align-items: center; gap: 16px; padding: 8px 24px; border-radius: 4px; background: var(--dark); color: #fff; font: 500 20px/30px var(--sans); }

  .prop { display: flex; gap: 40px; }
  .prop-person { flex: 0 0 160px; text-align: center; }
  .prop-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; }
  .prop-role { margin: 12px 0 4px; font: 300 12px/1.3 var(--sans); color: #888; }
  .prop-name { margin: 0; font: 500 20px/20px var(--sans); }
  .prop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .prop-lead { margin: 0; padding: 10px 8px; background: #f7f7f7; font: 600 18px/1.4 var(--sans); }
  .prop-text { margin: 0; font: 400 14px/1.5 var(--sans); color: #333; }
  .prop-facts { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 16px 40px; }
  .prop-facts dt { font: 300 12px/15.6px var(--sans); color: #888; }
  .prop-facts dd { margin: 4px 0 0; font: 400 14px/1.5 var(--sans); }
  /* 仕事の進め方：黒い面に立ち位置の1文、その下に考え方3つ */
  .ways { margin-top: 32px; border-radius: 8px; overflow: hidden; }
  .ways-stance { margin: 0; padding: 32px; background: var(--ink); color: #fff; font: 600 26px/1.5 var(--sans); }
  .ways-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #f7f7f7; }
  .way { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
  .way + .way { box-shadow: inset 1px 0 0 #e6e6e6; }
  .way-h { margin: 0; font: 600 16px/1.5 var(--sans); }
  .way-t { margin: 0; font: 400 13px/1.7 var(--sans); color: #333; flex: 1; }
  .way-link { color: var(--ink); font: 500 14px/1.5 var(--sans); }
  .way-link .ms, .sv-links .ms { vertical-align: -3px; margin-left: 4px; }
  /* ロボットに関わる人へ：2×2。困りごとを見出しに、作れるものを白い面に */
  .sv-lead { margin: -16px 0 24px; font: 400 14px/1.7 var(--sans); color: #333; }
  .sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .sv { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: #f7f7f7; border-radius: 8px; }
  .sv-head { display: flex; gap: 20px; align-items: center; }
  .sv-head > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .sv-img { flex: 0 0 120px; width: 120px; height: 90px; border-radius: 8px; object-fit: cover; }
  .sv-who { margin: 0; font: 500 13px/1.4 var(--sans); color: #666; }
  .sv-pain { margin: 0; font: 600 20px/1.5 var(--sans); }
  .sv-make { padding: 16px 20px; background: #fff; border-radius: 8px; flex: 1; }
  .sv-make p { margin: 6px 0 0; font: 400 14px/1.7 var(--sans); color: #333; }
  .sv-tag { font: 600 12px/1 var(--sans); }
  .sv-links { display: flex; flex-direction: column; gap: 6px; }
  .sv-links a { color: var(--ink); font: 500 14px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
  .sv-log { display: inline-block; margin-right: 8px; font: 600 13px/1 Inter, sans-serif; }
  .sns { display: flex; gap: 12px; }
  .sns a { display: inline-flex; color: #242424; }
  .sns a :global(svg) { height: 18px; width: auto; display: block; }
  .sns a:hover { color: #666; }

  @media (max-width: 1023px) {
    .ways-cols, .sv-grid { grid-template-columns: 1fr; }
    .way + .way { box-shadow: inset 0 1px 0 #e6e6e6; }
    .hero-wrap { padding: 0 24px; }
    .hero { padding: 96px 0 32px; gap: 32px; }
    .hero-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .hero-head p { flex: none; max-width: 640px; }
    .hero-cards { gap: 20px; }
    .hc-title { font-size: 18px; }
    .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 599px) {
    .hero-wrap { padding: 0 16px; }
    .hero { padding: 80px 0 24px; gap: 24px; }
    .hero h1 { font-size: 26px; line-height: 1.5; }
    .hero-head p { font-size: 15px; line-height: 1.8; }
    .hero-cards { grid-template-columns: 1fr; gap: 16px; }
    .hc-meta { padding: 14px 16px; }
    .hc-title { font-size: 17px; }
    .grid2 { grid-template-columns: 1fr; gap: 24px; }
    .grid4 { gap: 16px; }
    .prop { flex-direction: column; align-items: center; gap: 24px; }
    .ways-stance { padding: 24px; font-size: 20px; }
    .ways-stance br { display: none; }
    .sv { padding: 20px; }
    .sv-pain { font-size: 18px; }
    .sv-head { gap: 14px; }
    .sv-img { flex-basis: 84px; width: 84px; height: 84px; }
  }
  .guide-wrap { max-width: 1280px; margin: 0 auto; }
</style>