:root {
  /* 2026-07-21: 灰色の地に灰色の文字が溶けていた（実測2.7〜3.3:1、AAは4.5:1）。
     地色を白へ寄せ、--muted は7.2:1、--tertiary は5.2:1まで締めた。 */
  color-scheme: light; --bg:#fafbfc; --surface:#fff; --soft:#f0f2f5; --text:#17191c;
  --muted:#4b5462; --tertiary:#5f6875; --line:#d7dce4; --line-strong:#c2c9d3;
  --primary:#2563eb; --primary-deep:#1d4ed8; --primary-soft:#eaf1ff; --coral:#d97155;
  --success:#15803d; --display:"BIZ UDPGothic","Yu Gothic UI",Meiryo,sans-serif;
  --body:"Yu Gothic","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace; --max:1180px; --radius:12px;
  --shadow:0 12px 36px rgba(23,25,28,.08);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:82px; -webkit-text-size-adjust:100%; }
body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.75; }
/* height:auto が無いと、CSSで幅だけ変えたときにHTMLのheight属性が残って画像が縦へ潰れる。 */
img { max-width:100%; height:auto; }
a { color:inherit; }
:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 72%,white); outline-offset:3px; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:9px 13px; border-radius:8px; background:var(--primary); color:#fff; font-size:13px; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; z-index:50; top:0; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:10px max(24px,calc((100vw - var(--max))/2)); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(12px); }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand img { width:40px; height:40px; border:1px solid var(--line); border-radius:10px; }
.brand>span { display:grid; line-height:1.1; }
.brand strong { font-family:var(--display); font-size:17px; letter-spacing:-.02em; }
.brand small { margin-top:4px; color:var(--tertiary); font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; }
.site-header nav { display:flex; align-items:center; gap:4px; }
.site-header nav a { padding:8px 10px; border-radius:7px; color:var(--muted); font-size:13px; font-weight:650; text-decoration:none; }
.site-header nav a:hover { background:var(--soft); color:var(--text); }
/* ヒーローは2列＋下段の作例ストリップ。ストリップは grid-column:1/-1 で全幅へ渡す。 */
.hero { position:relative; isolation:isolate; max-width:var(--max); display:grid; grid-template-columns:minmax(0,.96fr) minmax(400px,1.04fr); align-items:center; gap:clamp(22px,3vw,34px) clamp(34px,6vw,82px); margin:0 auto; padding:44px 24px 46px; }
.hero>* { position:relative; z-index:1; }
.status-line { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:var(--primary); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; }
.status-line b { padding:3px 7px; border:1px solid color-mix(in srgb,var(--coral) 38%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--coral) 9%,var(--surface)); color:var(--coral); font-size:10px; }
.hero-copy,.hero-visual { min-width:0; }
.hero h1 { margin:0; overflow-wrap:anywhere; font-family:var(--display); font-size:clamp(39px,4.6vw,56px); font-weight:700; line-height:1.16; letter-spacing:-.045em; }
.hero h1 em { color:var(--primary); font-style:normal; }
.hero-lead { max-width:570px; margin:22px 0 0; color:var(--text); font-family:var(--display); font-size:17px; font-weight:700; line-height:1.85; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:0 19px; border:1px solid transparent; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; }
.button.primary { border-color:var(--primary); background:var(--primary); color:#fff; }
.button.primary:hover { border-color:var(--primary-deep); background:var(--primary-deep); }
.button.secondary { border-color:var(--line-strong); background:var(--surface); }
.button.secondary:hover { background:var(--soft); }
.honesty-note { max-width:570px; margin:20px 0 0; padding-left:13px; border-left:2px solid var(--coral); color:var(--muted); font-size:13px; line-height:1.85; }
.hero-visual { position:relative; margin:0; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); transform:rotate(1.2deg); }
.hero-visual::before { content:"LOCAL"; position:absolute; z-index:2; top:-19px; right:22px; padding:6px 11px; border:2px solid var(--primary); background:var(--surface); color:var(--primary); font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.14em; transform:rotate(-4deg); }
.hero-visual img { display:block; width:100%; border-radius:10px; }
.hero-visual figcaption { display:flex; justify-content:space-between; gap:14px; padding:11px 4px 0; color:var(--tertiary); font-family:var(--mono); font-size:11px; }
.hero-visual figcaption b { color:var(--primary); font-weight:650; }
.section { max-width:var(--max); margin:0 auto; padding:48px 24px; border-top:1px solid var(--line); }
/* 見出しを右カラムへ寄せると、下に続くカード群と左端が438pxずれて中央寄せのように見えていた。
   ラベル→見出し→説明を左揃えで縦に積み、本文と同じ左端から始める。 */
.section-heading { max-width:860px; display:grid; margin-bottom:26px; }
.section-heading>p { margin:0 0 9px; color:var(--primary); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; }
.section-heading h2 { margin:0; font-family:var(--display); font-size:clamp(26px,3vw,36px); line-height:1.35; letter-spacing:-.035em; text-wrap:balance; }
.section-heading>span { margin-top:11px; color:var(--muted); font-size:15px; line-height:1.85; }
.local-route { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:10px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.local-route>div { min-width:0; display:grid; gap:4px; }
.local-route small { color:var(--primary); font-family:var(--mono); font-size:11px; }
.local-route strong { font-size:13.5px; overflow-wrap:anywhere; }
.local-route i { color:var(--line-strong); font-style:normal; }
.about-points { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.about-points article,.feature-card,.boundary-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.about-points article { padding:18px; }
.about-points b { font-size:15px; }
.about-points p { margin:8px 0 0; color:var(--muted); font-size:13.5px; line-height:1.8; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.feature-card { min-width:0; display:grid; grid-template-columns:58px minmax(0,1fr); column-gap:15px; padding:22px; }
.feature-mark { grid-row:1/span 3; width:58px; height:58px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line)); border-radius:13px; background:var(--primary-soft); color:var(--primary); font-family:var(--mono); font-size:12px; font-weight:800; }
.feature-card small { color:var(--tertiary); font-family:var(--mono); font-size:10px; letter-spacing:.05em; }
.feature-card h3 { margin:2px 0 0; font-family:var(--display); font-size:19px; }
.feature-card p { margin:13px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }
.feature-card ul { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0 0; padding:0; list-style:none; }
.feature-card li { padding:5px 9px; border-radius:6px; background:var(--soft); color:var(--muted); font-size:11.5px; }
.compare-note { display:grid; grid-template-columns:minmax(190px,.65fr) minmax(0,1.35fr); align-items:center; gap:28px; margin-top:14px; padding:21px 22px; border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line)); border-radius:var(--radius); background:var(--primary-soft); }
.compare-note div { min-width:0; display:grid; }
.compare-note small { color:var(--primary); font-size:11px; font-weight:700; }
.compare-note strong { font-family:var(--display); font-size:17px; }
.compare-note p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.8; }
.setup-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.8fr); gap:34px 64px; }
.setup-section .section-heading { grid-column:1/-1; }
.setup-steps { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.setup-steps li { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.setup-steps li>span { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:var(--primary); color:#fff; font-family:var(--mono); font-size:11px; font-weight:800; }
.setup-steps li>div { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 12px; }
.setup-steps b { font-size:14px; }
.setup-steps code { padding:4px 7px; border:1px solid var(--line); border-radius:5px; background:var(--soft); color:var(--primary); font-family:var(--mono); font-size:12px; }
.setup-steps small { grid-column:1/-1; color:var(--muted); font-size:12px; line-height:1.75; }
.terminal { align-self:stretch; overflow:hidden; border:1px solid #2b313b; border-radius:var(--radius); background:#111318; box-shadow:var(--shadow); }
.terminal header { height:37px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid #2b313b; }
.terminal header span { width:8px; height:8px; border-radius:50%; background:#4a5260; }
.terminal header span:nth-child(1) { background:#d97155; }.terminal header span:nth-child(2) { background:#c89b35; }.terminal header span:nth-child(3) { background:#2d936c; }
.terminal header b { margin-left:6px; color:#9ba4b2; font-family:var(--mono); font-size:9px; font-weight:500; }
.terminal pre { margin:0; padding:32px 26px; color:#d9e2f2; font-family:var(--mono); font-size:14px; line-height:2; }
.terminal code::before { content:"> "; color:#6ea8fe; }
.boundary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.boundary-card { padding:24px; }
.boundary-card>span { color:var(--primary); font-family:var(--mono); font-size:11px; font-weight:700; }
.boundary-card h3 { margin:7px 0 16px; font-family:var(--display); font-size:19px; }
.boundary-card h3 code { color:inherit; font-family:var(--mono); font-size:15px; }
.boundary-card ul { margin:0; padding-left:19px; font-size:14px; }
.boundary-card li { margin:6px 0; }
.boundary-card p { margin:17px 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.8; }
.boundary-card.connection { border-top:3px solid var(--coral); }.boundary-card.connection>span { color:var(--coral); }
.boundary-card.local { border-top:3px solid var(--success); }.boundary-card.local>span { color:var(--success); }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); background:var(--surface); }
.faq-list summary { padding:17px 20px; font-size:15px; font-weight:700; cursor:pointer; }
.faq-list details p { margin:0; padding:0 20px 20px; color:var(--muted); font-size:14px; line-height:1.85; }
.site-footer { max-width:var(--max); display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 auto; padding:32px 24px 46px; border-top:1px solid var(--line); color:var(--muted); }
.site-footer>div { display:flex; align-items:center; gap:9px; }.site-footer img { border:1px solid var(--line); border-radius:8px; }.site-footer span { display:grid; line-height:1.3; }
.site-footer b { color:var(--text); font-family:var(--display); font-size:15px; }.site-footer small { color:var(--tertiary); font-size:11px; }.site-footer p { margin:0; font-size:13px; text-align:right; }
@media (prefers-color-scheme:dark) {
  :root { color-scheme:dark; --bg:#0f1115; --surface:#191c23; --soft:#20242c; --text:#f2f4f7; --muted:#b3bccb; --tertiary:#98a2b1; --line:#333a45; --line-strong:#3b4350; --primary:#6ea8fe; --primary-deep:#8fbcff; --primary-soft:#1a2a42; --coral:#f08b70; --success:#54c785; --shadow:0 14px 42px rgba(0,0,0,.28); }
  .hero-visual img { opacity:.92; }.terminal { background:#090a0d; }
}
@media (max-width:860px) {
  .site-header { padding-inline:18px; }.site-header nav { max-width:62vw; overflow-x:auto; }.site-header nav a { flex:0 0 auto; }
  .hero { grid-template-columns:1fr; min-height:0; padding-top:58px; }.hero-copy { max-width:700px; }.hero-visual { max-width:720px; transform:none; }
  .setup-section { grid-template-columns:1fr; }.terminal { min-height:190px; }
  /* 4段階の横並びは、この幅では1段あたり約145pxしかなく文言が2〜3行に折れる。縦積みへ切り替える。 */
  .local-route { grid-template-columns:1fr; gap:5px; padding:16px; }
  .local-route i { transform:rotate(90deg); justify-self:center; }
  .local-route>div { padding:9px; border-radius:7px; background:var(--soft); }
}
@media (max-width:640px) {
  html { scroll-padding-top:16px; }.brand img { width:36px; height:36px; }.brand small { display:none; }
  /* 5項目のうち3項目を隠していたため、狭い画面ではページ内リンクがほぼ使えなかった。
     ここでは追従をやめて2段に折り返し、5項目とも触れるようにする。 */
  .site-header { position:static; min-height:0; flex-wrap:wrap; row-gap:4px; padding-block:8px; }
  .site-header nav { flex-wrap:wrap; justify-content:flex-start; width:100%; max-width:none; overflow-x:visible; }
  .site-header nav a { padding-inline:8px; font-size:10px; }
  .hero { padding:42px 16px 64px; }.hero h1 { font-size:clamp(37px,11vw,50px); }.hero-lead { font-size:14px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }.hero-visual { padding:9px; border-radius:14px; }.hero-visual figcaption { display:grid; gap:2px; }
  .section { padding:40px 16px; }.section-heading { display:block; margin-bottom:24px; }.section-heading>p { margin:0 0 8px; }.section-heading h2 { font-size:26px; }.section-heading>span { display:block; }
  .about-points,.feature-grid,.boundary-grid { grid-template-columns:1fr; }.feature-card { grid-template-columns:48px minmax(0,1fr); padding:18px; }.feature-mark { width:48px; height:48px; }
  .compare-note { grid-template-columns:1fr; gap:10px; }.setup-section { gap:24px; }.setup-steps li>div { grid-template-columns:1fr; }.setup-steps code { width:max-content; max-width:100%; }
  .terminal pre { padding:26px 20px; }.site-footer { align-items:flex-start; flex-direction:column; padding-inline:16px; }.site-footer p { text-align:left; }
}
@media (max-width:390px) { .hero h1 { font-size:38px; }.hero-actions .button { width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* ============================================================
   ガイド（site/guide/*.html）の共通レイアウト
   JavaScriptを使わないため、狭い画面のメニューは details/summary で開閉する。
   ============================================================ */
.doc { max-width:var(--max); display:grid; grid-template-columns:236px minmax(0,1fr); gap:44px; margin:0 auto; padding:34px 24px 78px; }
.side { position:sticky; top:88px; align-self:start; max-height:calc(100dvh - 118px); overflow-y:auto; padding-right:6px; scrollbar-width:thin; }
.side__grp { margin:20px 0 7px; color:var(--tertiary); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; }
.side__grp:first-child { margin-top:0; }
.side__link { display:block; padding:7px 10px; border-radius:7px; color:var(--muted); font-size:13px; text-decoration:none; }
.side__link:hover { background:var(--soft); color:var(--text); }
.side__link.is-here { background:var(--primary-soft); color:var(--primary); font-weight:700; }
.main { min-width:0; }
.crumb { margin:0 0 14px; color:var(--tertiary); font-size:12.5px; }
.crumb a { color:var(--muted); }
.main h1 { margin:0; font-family:var(--display); font-size:clamp(27px,3.4vw,37px); line-height:1.3; letter-spacing:-.035em; text-wrap:balance; }
.main .lead { margin:15px 0 0; color:var(--muted); font-size:16px; line-height:1.95; }
.main h2 { margin:40px 0 0; padding-top:22px; border-top:1px solid var(--line); font-family:var(--display); font-size:22px; letter-spacing:-.02em; }
.main h3 { margin:26px 0 0; font-family:var(--display); font-size:16.5px; }
.main p { margin:13px 0 0; font-size:15px; line-height:1.95; }
.main ul,.main ol { margin:13px 0 0; padding-left:21px; font-size:15px; line-height:1.9; }
.main li { margin:5px 0; }
.main li > code,.main p > code,.main td > code { padding:2px 6px; border:1px solid var(--line); border-radius:5px; background:var(--soft); color:var(--primary); font-family:var(--mono); font-size:12.5px; }
/* コマンドやURLを code で書くと1語が長く、折り返せずに本文からはみ出す。 */
.main p,.main li,.main td,.steps p,.callout { overflow-wrap:anywhere; }
.main strong { font-weight:700; }
.main a { color:var(--primary); }
.shot { margin:20px 0 0; }
.shot img { display:block; width:100%; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.shot figcaption { margin-top:9px; color:var(--muted); font-size:13px; line-height:1.8; }
.callout { margin:20px 0 0; padding:15px 17px; border:1px solid color-mix(in srgb,var(--primary) 32%,var(--line)); border-left-width:3px; border-radius:var(--radius); background:var(--primary-soft); font-size:14px; line-height:1.85; }
.callout.warn { border-color:color-mix(in srgb,var(--coral) 42%,var(--line)); background:color-mix(in srgb,var(--coral) 9%,var(--surface)); }
/* 見出し行だけをブロックにする。本文中の強調まで改行されると、文が途中で切れて読めなくなる。 */
.callout > strong:first-child { display:block; margin-bottom:3px; }
.steps { display:grid; gap:9px; margin:18px 0 0; padding:0; list-style:none; counter-reset:step; }
.steps li { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:13px; margin:0; padding:14px 15px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.steps li::before { content:counter(step); counter-increment:step; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--primary); color:#fff; font-family:var(--mono); font-size:11px; font-weight:800; }
/* li の中身は ::before に続く grid item なので、2つ目以降（<p> や <ul>）が
   次の行の1列目＝30pxの番号カラムへ落ちて、コードが1文字ずつ折り返していた。
   本文はすべて2列目に置く。 */
.steps li > * { grid-column:2; }
.steps b { display:block; font-size:15px; }
.steps p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.85; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin:18px 0 0; }
.card { display:grid; align-content:start; gap:5px; padding:16px 17px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); text-decoration:none; }
a.card:hover { border-color:color-mix(in srgb,var(--primary) 45%,var(--line)); box-shadow:var(--shadow); }
.card__ic { font-size:17px; line-height:1; }
.card__t { color:var(--text); font-family:var(--display); font-size:16px; }
.card__d { color:var(--muted); font-size:13px; line-height:1.8; }
.tbl { width:100%; margin:18px 0 0; border:1px solid var(--line); border-radius:var(--radius); border-collapse:separate; border-spacing:0; overflow:hidden; font-size:13.5px; }
.tbl th,.tbl td { padding:10px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.tbl th { background:var(--soft); color:var(--muted); font-size:12.5px; font-weight:700; white-space:nowrap; }
.tbl tr:last-child th,.tbl tr:last-child td { border-bottom:0; }
.tbl-wrap { overflow-x:auto; }
/* ============================================================
   実測グラフ（guide/models.html）
   JSも外部読み込みも使えないので、座標を計算した静的SVGを直書きし、
   色だけCSS側で持つ。数値は必ず直後の表にも載せる（読み上げ・印刷・JS無効のため）。
   ============================================================ */
.chart-figure { margin:18px 0 0; padding:16px 18px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.chart-figure figcaption { margin-top:10px; color:var(--muted); font-size:12.5px; line-height:1.8; }
.chart-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.chart { display:block; width:100%; height:auto; overflow:visible; }
/* 狭い幅で縮めると軸ラベルが読めなくなるので、表と同じく横スクロールへ逃がす。 */
@media (max-width:760px) { .chart { min-width:600px; } }
/* モデル名が1文字ずつ折り返されると読めない。表ごと横スクロールさせる。 */
.tbl td > code,.tbl th > code { white-space:nowrap; }
.chart-grid { stroke:var(--line); stroke-width:1; }
.chart-tick,.chart-unit { fill:var(--tertiary); font-family:var(--mono); font-size:11px; }
.chart-label { fill:var(--text); font-family:var(--mono); font-size:12.5px; font-weight:700; }
.chart-value { fill:var(--text); font-size:12.5px; font-weight:700; }
.chart-n { fill:var(--tertiary); font-family:var(--mono); font-size:11px; font-weight:400; }
.chart-none { fill:var(--tertiary); font-size:12px; }
.chart-bar--local { fill:var(--coral); }
.chart-bar--cloud { fill:var(--primary); }
.chart-bar--m12 { fill:color-mix(in srgb,var(--primary) 45%,var(--surface)); }
.chart-bar--m26 { fill:color-mix(in srgb,var(--primary) 70%,var(--surface)); }
.chart-bar--m31 { fill:var(--coral); }
.chart-bar--m35 { fill:var(--primary); }
/* 目盛りの上限を超えた棒。色はモデルの色のままにして（塗りを変えるとどのモデルか分からなくなる）、
   破線の輪郭と値の頭の ▸ で「ここで切ってある」ことを示す。 */
.chart-bar.is-over { stroke:var(--text); stroke-width:1.4; stroke-dasharray:4 3; }
.chart-legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin:12px 0 0; padding:0; list-style:none; font-size:12.5px; }
.chart-legend li { display:flex; align-items:center; gap:7px; color:var(--muted); }
.chart-legend i { width:14px; height:14px; border-radius:3px; }
.chart-legend .is-local { background:var(--coral); }
.chart-legend .is-cloud { background:var(--primary); }
.chart-legend .is-m12 { background:color-mix(in srgb,var(--primary) 45%,var(--surface)); }
.chart-legend .is-m26 { background:color-mix(in srgb,var(--primary) 70%,var(--surface)); }
.chart-legend .is-m31 { background:var(--coral); }
.chart-legend .is-m35 { background:var(--primary); }
.pager { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin:46px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.pager a { display:grid; gap:3px; max-width:48%; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--text); font-size:14px; font-weight:650; text-decoration:none; }
.pager a:hover { border-color:var(--primary); }
.pager small { color:var(--tertiary); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; }
.pager .next { margin-left:auto; text-align:right; }
.nav__menu { display:none; }
@media (max-width:960px) {
  .doc { grid-template-columns:1fr; gap:24px; padding-top:26px; }
  .side { position:static; max-height:none; padding:14px 15px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
  .side__grp:first-child { margin-top:0; }
}
@media (max-width:640px) {
  .doc { padding:20px 16px 60px; }
  .grid { grid-template-columns:1fr; }
  .main h2 { margin-top:34px; }
  .pager a { max-width:100%; flex:1 1 100%; }
  .pager .next { text-align:left; }
}

/* ============================================================
   TOP（site/index.html）のLP用パーツ
   ガイド21ページと共通のクラス（.section / .card / .shot 等）は変えず、
   ここで足すものはすべて lp- 始まりの新しいクラス名にする。
   意匠は「研究室のノート」— 方眼の下地、--mono のスタンプ、白い紙の枠。
   ============================================================ */
/* アイコンはアプリと同じLucideのsymbolを直書きし <use> で参照する（外部読み込みなし）。
   スプライト本体は display:none ではなく潰して置く（一部ブラウザーで参照が切れるため）。 */
.lp-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.lp-ic { width:1em; height:1em; flex:0 0 auto; }
.button { gap:7px; }
.button .lp-ic { width:15px; height:15px; }
.feature-mark .lp-ic { width:25px; height:25px; }
.card__ic .lp-ic { width:19px; height:19px; color:var(--primary); }
/* 方眼はヒーローの背面へ全幅で敷く。body の overflow-x:hidden があるので 100vw で横スクロールは出ない。 */
.hero::before { content:""; position:absolute; z-index:0; inset:0 auto 0 50%; width:100vw; margin-left:-50vw; pointer-events:none;
  background-image:repeating-linear-gradient(to right,color-mix(in srgb,var(--line) 62%,transparent) 0 1px,transparent 1px 29px),
                   repeating-linear-gradient(to bottom,color-mix(in srgb,var(--line) 62%,transparent) 0 1px,transparent 1px 29px);
  mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 94%); }
.hero .honesty-note { max-width:530px; margin-top:22px; }
/* ヘッダーは3種類のリンクを見た目で分ける。①ページ内=既定の文字だけ ②別ページ=アイコン付きで本文色
   ③外部=枠付きCTA＋外部リンクの印。区切り線は①と②のあいだ。 */
/* 項目が増えると、1つの中で改行して読みにくくなる。行内では折らず、詰め方で吸収する。 */
.lp .site-header nav a { white-space:nowrap; }
.lp .site-header nav { gap:2px; }
/* ナビが伸びるとブランドの英字が2行に折れる。狭いときはタグラインを畳む（同じ文字列はヒーローにも出る）。 */
.lp .brand small { white-space:nowrap; }
@media (max-width:1360px) { .lp .brand small { display:none; } }
@media (min-width:861px) and (max-width:1200px) { .lp .site-header nav a { padding-inline:7px; } }
.lp-nav-sep { flex:0 0 auto; width:1px; height:17px; margin:0 5px; background:var(--line-strong); }
.site-header nav a.lp-nav-page { display:inline-flex; align-items:center; gap:5px; color:var(--text); }
.site-header nav a.lp-nav-page .lp-ic { width:14px; height:14px; color:var(--primary); }
.site-header nav a.lp-nav-cta { display:inline-flex; align-items:center; gap:6px; margin-left:6px; border:1px solid color-mix(in srgb,var(--primary) 55%,var(--line)); background:var(--primary-soft); color:var(--primary); }
.site-header nav a.lp-nav-cta .lp-ic { width:12px; height:12px; }
.site-header nav a.lp-nav-cta:hover { background:var(--primary); color:#fff; }
/* 吹き出しはHTMLのテキスト。画像へ文言を焼き込むと直せず、読み上げにも乗らないため。 */
.lp-hero__bubble { position:absolute; z-index:3; right:14px; bottom:58px; max-width:min(78%,330px); margin:0; padding:12px 16px; border:2px solid var(--coral); border-radius:15px; background:var(--surface); font-family:var(--display); font-size:14px; font-weight:700; line-height:1.6; box-shadow:var(--shadow); transform:rotate(-1.6deg); }
.lp-hero__bubble::after { content:""; position:absolute; right:34px; bottom:-10px; width:16px; height:16px; border-right:2px solid var(--coral); border-bottom:2px solid var(--coral); border-bottom-right-radius:3px; background:var(--surface); transform:rotate(45deg); }
.lp-strip { grid-column:1/-1; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(148px,1fr); gap:12px; margin-top:8px; padding:4px 2px 12px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.lp-strip figure { min-width:0; margin:0; padding:8px 8px 6px; border:1px solid var(--line); border-radius:11px; background:var(--surface); box-shadow:0 6px 18px rgba(23,25,28,.06); animation:lp-rise .52s both; }
.lp-strip figure:nth-child(2) { animation-delay:.06s; }
.lp-strip figure:nth-child(3) { animation-delay:.12s; }
.lp-strip figure:nth-child(4) { animation-delay:.18s; }
.lp-strip figure:nth-child(5) { animation-delay:.24s; }
.lp-strip figure:nth-child(odd) { transform:rotate(-.5deg); }
.lp-strip figure:nth-child(even) { transform:rotate(.5deg); }
.lp-strip img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; object-position:top center; border-radius:6px; background:var(--soft); }
.lp-strip figcaption { display:grid; gap:4px; padding-top:8px; color:var(--muted); font-size:12px; }
.lp-strip figcaption b { justify-self:start; padding:2px 7px; border:1px solid color-mix(in srgb,var(--primary) 30%,var(--line)); border-radius:5px; color:var(--primary); font-size:11px; font-weight:700; }
@keyframes lp-rise { from { opacity:0; transform:translateY(14px); } }
.lp-glance { display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:16px; }
.lp-glance figure { min-width:0; margin:0; padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
/* 作例は根拠として出すものなので、ここでは切り抜かない（比較の枠が欠けると意味が変わる）。
   縦横比が機能ごとに違うぶん下端は揃わないが、カードごとに枠があるので破綻しない。 */
.lp-glance img { display:block; width:100%; border-radius:8px; background:var(--soft); }
.lp-glance figcaption { margin-top:11px; font-size:14px; line-height:1.8; }
/* どのモデルが作ったかは作例の意味を決めるので、キャプションに必ず出す。識別子なので等幅。 */
.lp-model { display:inline-block; margin-left:7px; padding:2px 8px; border:1px solid var(--line); border-radius:5px; background:var(--soft); color:var(--muted); font-family:var(--mono); font-size:11.5px; font-weight:700; white-space:nowrap; }
.lp-jump { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:18px; }
.lp-jump span { color:var(--muted); font-size:13px; }
/* 動作要件は2カラムのグリッドなので、明示しないと右カラムへ入り込む。 */
.lp-jump--center { grid-column:1/-1; justify-content:center; margin-top:26px; }
.lp-jump+.local-route,.lp-shot+.about-points { margin-top:18px; }
.lp-shot { margin:0; }
.lp-shot img { display:block; width:100%; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.lp-shot figcaption { margin-top:11px; color:var(--muted); font-size:13px; line-height:1.8; }
.lp-feature-wide { grid-column:1/-1; }
/* こんな人に便利。利用者の言葉を主役にするので、アイコンは添えるだけの大きさに留める。 */
.lp-audience__list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.lp-audience__list li { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:start; column-gap:15px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.lp-audience__ic { grid-row:1/span 2; width:42px; height:42px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line)); border-radius:11px; background:var(--primary-soft); color:var(--primary); }
.lp-audience__ic .lp-ic { width:21px; height:21px; }
.lp-audience__list b { align-self:center; font-size:16px; line-height:1.6; }
.lp-audience__list li>span:last-child { margin-top:5px; color:var(--muted); font-size:13.5px; line-height:1.8; }
@media (max-width:640px) {
  .lp-audience__list li { grid-template-columns:34px minmax(0,1fr); column-gap:12px; padding:14px 15px; }
  .lp-audience__ic { width:34px; height:34px; border-radius:9px; }
  .lp-audience__ic .lp-ic { width:18px; height:18px; }
  .lp-audience__list b { font-size:15px; }
}
/* 作例集と使い方ガイドは、この製品の一次資料なので他のカードより一段大きく出す。 */
.lp-docs { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:13px; }
.lp-doc { display:grid; align-content:start; gap:7px; padding:24px 24px 20px; border:1px solid color-mix(in srgb,var(--primary) 32%,var(--line)); border-radius:var(--radius); background:var(--surface); text-decoration:none; }
.lp-doc:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.lp-doc__ic { width:44px; height:44px; display:grid; place-items:center; margin-bottom:3px; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line)); border-radius:12px; background:var(--primary-soft); color:var(--primary); }
.lp-doc__ic .lp-ic { width:22px; height:22px; }
.lp-doc__t { font-family:var(--display); font-size:20px; }
.lp-doc__d { color:var(--muted); font-size:14px; line-height:1.85; }
.lp-doc__go { margin-top:6px; color:var(--primary); font-size:13.5px; font-style:normal; font-weight:700; }
.lp-doc__go::after { content:" →"; }
.lp-honesty__body { max-width:780px; padding-left:16px; border-left:3px solid var(--coral); }
.lp-honesty__body p { margin:0 0 13px; color:var(--muted); font-size:15px; line-height:1.95; }
.lp-honesty__body strong { color:var(--text); }
.lp-honesty__body p:last-child { margin-bottom:0; }
.lp-honesty__link a { color:var(--primary); font-weight:700; }
.lp-buy__inner { position:relative; isolation:isolate; overflow:hidden; display:grid; justify-items:center; gap:13px; padding:46px 26px; border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line)); border-radius:16px; background:var(--primary-soft); text-align:center; }
.lp-buy__inner::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(to right,color-mix(in srgb,var(--primary) 12%,transparent) 0 1px,transparent 1px 29px),
                   repeating-linear-gradient(to bottom,color-mix(in srgb,var(--primary) 12%,transparent) 0 1px,transparent 1px 29px); }
.lp-buy__inner>* { position:relative; z-index:1; }
.lp-buy__label { margin:0; color:var(--primary); font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; }
.lp-buy h2 { margin:0; font-family:var(--display); font-size:clamp(24px,3.2vw,34px); letter-spacing:-.035em; }
.lp-buy p { max-width:640px; margin:0; color:var(--muted); font-size:15px; line-height:1.9; }
.lp-buy .button { margin-top:6px; }
.lp-buy p.lp-buy__note { color:var(--muted); font-size:12.5px; }
@media (max-width:860px) {
  /* 1列に落ちるとヒーロー画像が縦を食い、作例がファーストビューから消える。絵は最後へ送る。 */
  .hero-copy { order:1; }
  .lp-strip { order:2; }
  .hero-visual { order:3; }
  .lp-glance { grid-template-columns:repeat(2,1fr); }
  .lp-glance figure:last-child { grid-column:1/-1; }
  .lp-hero__bubble { right:10px; bottom:44px; font-size:12px; }
}
/* 共通ヘッダーはこの幅でナビを横スクロールにするため、作例集・使い方ガイド・CTAが枠外へ隠れる。
   ガイド21ページの挙動は変えたくないので、body.lp が付くTOPだけ折り返す。
   項目が増えて1行に収まらなくなる境目は実測で約1080px。 */
@media (max-width:1080px) {
  .lp .site-header { flex-wrap:wrap; row-gap:6px; }
  .lp .site-header nav { flex-wrap:wrap; justify-content:flex-start; width:100%; max-width:none; overflow-x:visible; }
  .lp .lp-nav-sep { display:none; }
}
/* さらに狭いところでは追従もやめる。実測でこの幅から3段になり、追従すると画面を食いすぎる。 */
@media (max-width:960px) {
  .lp .site-header { position:static; min-height:0; padding-block:8px; }
}
@media (max-width:640px) {
  .hero { padding:34px 16px 40px; }
  .lp-strip { margin-top:2px; grid-auto-columns:minmax(132px,1fr); }
  .hero-lead { font-size:15px; }
  /* ボタン3つを縦に積むと作例がファーストビューから押し出される。購入だけ全幅、
     作例集とガイドは横に2つ並べる。 */
  .hero-actions { grid-template-columns:1fr 1fr; }
  .hero-actions .primary { grid-column:1/-1; }
  .lp-docs { grid-template-columns:1fr; }
  .lp-glance { grid-template-columns:1fr; }
  /* 狭い幅では figcaption が2行になるので、吹き出しはその上へ逃がす。 */
  .lp-hero__bubble { right:8px; bottom:56px; max-width:82%; padding:9px 12px; font-size:12px; }
  .lp-buy__inner { padding:32px 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .lp-strip figure { animation:none; }
}

/* ------------------------------------------------------------
   画像の拡大表示（TOP）
   JSも外部読み込みも使えないので :target で開閉する。閉じるリンクは存在しない
   フラグメント(#_)へ送って :target を外す（#top だとページ先頭へ飛んでしまう）。
   拡大できることが見た目で分からないと押されないので、右下にチップを出す。
   ------------------------------------------------------------ */
.lp-zoom { position:relative; display:block; }
.lp-zoom__chip { position:absolute; right:7px; bottom:7px; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border:1px solid color-mix(in srgb,var(--text) 12%,transparent); border-radius:999px; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(6px); color:var(--text); font-size:11.5px; font-weight:700; }
.lp-zoom__chip .lp-ic { width:13px; height:13px; color:var(--primary); }
.lp-zoom:hover .lp-zoom__chip { border-color:var(--primary); background:var(--primary); color:#fff; }
.lp-zoom:hover .lp-zoom__chip .lp-ic { color:#fff; }
.lp-shot .lp-zoom__chip,.lp-glance .lp-zoom__chip { right:11px; bottom:11px; }
.lp-zoom-view { display:none; }
.lp-zoom-view:target { position:fixed; z-index:200; inset:0; display:grid; place-items:center; padding:clamp(16px,4vw,48px); background:color-mix(in srgb,#0b0d11 88%,transparent); }
.lp-zoom-view__backdrop { position:absolute; inset:0; }
.lp-zoom-view figure { position:relative; max-height:100%; margin:0; display:grid; gap:10px; }
.lp-zoom-view img { display:block; max-width:100%; max-height:calc(100dvh - 132px); width:auto; object-fit:contain; border-radius:10px; background:#fff; }
.lp-zoom-view figcaption { color:#e8ecf3; font-size:13px; text-align:center; }
.lp-zoom-view__close { position:absolute; z-index:2; top:14px; right:16px; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 15px; border:1px solid rgba(255,255,255,.34); border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:13px; font-weight:700; text-decoration:none; }
.lp-zoom-view__close:hover { background:rgba(255,255,255,.2); }
.lp-zoom-view__close .lp-ic { width:15px; height:15px; }
@media (max-width:640px) {
  .lp-zoom__chip { right:5px; bottom:5px; padding:3px 8px; font-size:11px; }
  .lp-zoom-view img { max-height:calc(100dvh - 150px); }
}

/* 珊瑚色は白地に3.3:1しかない。文字に使う2か所だけ本文色へ寄せて締める（枠線は色のまま）。 */
.status-line b,.boundary-card.connection>span { color:color-mix(in srgb,var(--coral) 55%,var(--text)); }
/* 流れ図の矢印が薄すぎて順序が読めなかった（1.6:1）。 */
.local-route i { color:var(--tertiary); }