/*
 * CLYVARN ポートフォリオ 共通スタイル — 「編集の手仕事（editorial craft）」（DESIGN.md 2026-09-27）
 *
 * - 地は 2 つ：紙（既定。読む所と作品を見せる所）と 墨（data-ground="ink"。名乗る所・約束する所・連絡を受ける所）。
 *   ページ全体の明暗は切り替えない（color-scheme: light。利用者の明暗設定で色を切り替える media query を書かない）。墨の地は「帯」として置き、
 *   その中では役割トークンの値だけを差し替える（役割名は同じ。部品 CSS は地を知らない）。DESIGN.md「Grounds」。
 *   紙：地 --canvas、台と帯 --surface、罫 1px --line、文字は墨（--ink / --ink-body / --ink-2 / --ink-3）。
 *   墨：地 n-10（暖色の近黒。純黒にしない）→ 台 n-9 → 罫 n-8、文字は紙（n-0 / n-2 / n-3 / n-4）。
 *   色は藍 --accent だけ。紙の上の用途は 主ボタンの地 と 「公開中」の四角い印 の 2 つ。墨の上では藍を面にせず
 *   （近黒＋明るい青は却下・hard）、主ボタンは紙の地に墨の文字へ反転する。focus / selection は藍の別段（部品の状態）。
 *   墨の中でも、画面写真の台（.plate）とアイコンの台（.maker__face / .maker__mount）は必ず紙に戻す。
 * - 書体：欧文・数字は Archivo（400 / 500）、和文は Zen Kaku Gothic New（400 / 500）。font-family は 欧文 → 和文 の順。
 *   h1 / h2 だけ Shippori Mincho（500）。ほかに広げない。太字 700 は使わない。
 * - 形：角丸 0・影 0。奥行きは 紙の重なり（canvas → surface → surface-raise）と 1px の罫だけ。端末の枠は描かない
 *   （画面写真は 1px の罫で縁を取った「図版」）。
 * - 節：<section class="section"><div class="wrap"><h2 class="section__title">…。節の頭に 1px の罫（--line-strong）。
 *   1024px〜 は 左に見出し 5 列：右に中身 7 列。全幅にしたい物（台・一覧・表）には .section__wide。
 * - 動き：状態表示（押下 120ms・ハンバーガー 200ms・固定バー 240ms）だけ。演出はトップの制作実績の 3 画面の登場 1 か所
 *   （top.css）。prefers-reduced-motion では止める。
 * - 層：tokens → base → layout → components。ページ用 CSS（assets/pages/*.css）は層の外なので、必ず勝つ。
 *
 * コントラスト（計算値 2026-09-28）。紙 canvas #f9f6f2 の上：ink-body 15.2 / ink-2 7.9 / ink-3 5.6（surface 上 5.2）/
 * accent-ink on accent 11.0 / focus 8.6 / line-control 3.1 / line-strong 2.0（装飾の罫線。意味を持たせない）。
 * 墨 canvas #0f0d09 の上：ink-body 14.9 / ink-2 12.3 / ink-3 9.0（surface 上 7.6）/ accent-ink on accent 18.0 /
 * focus 9.7 / line-control 5.7 / line-strong 3.2。
 */

@layer tokens, base, layout, components;

@layer tokens {
  :root {
    color-scheme: light;

    /* 中立ランプ n-0〜n-10（OKLCH H=80。紙 → 墨）。部品はこの下の役割名だけを参照する */
    --n-0: #f9f6f2;
    --n-1: #f1eee9;
    --n-2: #e5e1da;
    --n-3: #d1cdc7;
    --n-4: #b4b0aa;
    --n-5: #908b84;
    --n-6: #67635a;
    --n-7: #514c45;
    --n-8: #36322c;
    --n-9: #221f1a;
    --n-10: #0f0d09;

    /* 藍（蕎麦猪口の印判）のランプ。使う段だけ */
    --ai-0: #d8e6f9;
    --ai-3: #9abae4;
    --ai-7: #1d487c;
    --ai-8: #123865;
    --ai-9: #0e294a;

    /* 役割トークン */
    --canvas: var(--n-0);
    --surface: var(--n-1);
    --surface-raise: var(--n-2);
    --line: var(--n-3);
    --line-strong: var(--n-4);
    --line-control: var(--n-5);
    --ink: var(--n-10);
    --ink-body: var(--n-9);
    --ink-2: var(--n-7);
    --ink-3: var(--n-6);
    --accent: var(--ai-8);
    --accent-hover: var(--ai-9);
    --accent-ink: var(--n-0);
    --focus: var(--ai-7);
    --selection: var(--ai-0);

    /* 書体：欧文 → 和文 → generic。見出しだけ明朝を先頭に（明朝が持つ欧文で「AI」「SEO」を描く） */
    --font-latin: "Archivo";
    --font-ja: "Zen Kaku Gothic New";
    --font-ja-display: "Shippori Mincho";
    --font-body: "Archivo", "Zen Kaku Gothic New", "Zen Kaku Gothic New Fallback", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
    --font-display: "Shippori Mincho", "Shippori Mincho Fallback", "Hiragino Mincho ProN", "Yu Mincho", serif;

    /* 役割ごとの大きさ（DESIGN.md typography.roles） */
    --fs-body: clamp(1rem, 0.96rem + 0.14vw, 1.0625rem);
    --fs-small: 1rem;
    --fs-caption: 0.9375rem;
    --fs-label: 0.875rem;
    --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-h1: clamp(1.875rem, 1.2rem + 1.9vw, 2.75rem);
    --fs-h2: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    --fs-h3: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
    --fs-figure: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    --lh-body: 1.85;
    --lh-lead: 1.7;
    --lh-h1: 1.4;
    --lh-h2: 1.45;
    --lh-h3: 1.5;
    --lh-label: 1.4;
    --measure: 38em;

    /* 余白の段 4/8/12/16/24/32/48/64/96/128 と流体の節間 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;
    --space-section: clamp(64px, 6vw + 32px, 128px);
    --space-block: clamp(24px, 2.5vw + 12px, 48px);

    /* グリッド */
    --gutter: 16px;
    --col-gap: 16px;
    --max: 1240px;
    --header-h: 64px;
    --tap: 44px;
    --sticky-h: 72px;
    --rule: 1px;

    /* 動き（状態表示だけ） */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --t-press: 120ms;
    --t-dropdown: 200ms;
    --t-panel: 240ms;
    --t-showpiece: 360ms;
    --z-header: 40;
    --z-sticky: 50;
  }

  @supports (color: oklch(50% 0 0)) {
    :root {
      --n-0: oklch(97.5% 0.006 80);
      --n-1: oklch(95% 0.008 80);
      --n-2: oklch(91% 0.01 80);
      --n-3: oklch(85% 0.01 80);
      --n-4: oklch(76% 0.01 80);
      --n-5: oklch(64% 0.012 80);
      --n-6: oklch(50% 0.014 80);
      --n-7: oklch(42% 0.014 80);
      --n-8: oklch(32% 0.012 80);
      --n-9: oklch(24% 0.01 80);
      --n-10: oklch(16% 0.008 80);
      --ai-0: oklch(92% 0.03 255);
      --ai-3: oklch(78% 0.07 255);
      --ai-7: oklch(40% 0.1 255);
      --ai-8: oklch(34% 0.09 255);
      --ai-9: oklch(28% 0.07 255);
    }
  }

  @media (min-width: 768px) {
    :root {
      --gutter: 32px;
      --col-gap: 24px;
      --header-h: 72px;
    }
  }

  @media (min-width: 1024px) {
    :root {
      --gutter: 48px;
      --col-gap: 32px;
    }
  }

  /* ---------- 地（ground）：紙と墨。役割名は同じで、値だけを差し替える（DESIGN.md「Grounds」） ----------
   * 墨の地は HTML に data-ground="ink" を書いた要素だけ：ヘッダー／各ページの一画面目（表紙）／
   * トップの「どんなご相談ですか？」と「3つの約束」（.section--band）／扉の申し出の節 1 つ（.section--band）／
   * 相談の帯（.contact-band・.section--band）／扉の固定バー／フッター／about の「このサイトの作り」の頭（.section__band。機関室）／
   * 本文へ移動の札（.skip-link。墨のヘッダーの上に出るので墨の役割で描く）。
   * 読む文章（できることの説明・事例の本文・進め方の詳細）と画面写真は墨に置かない。
   * 地の要素は自分で地の色を塗り、文字色を地の本文色に戻す（color は継承されるため）。部品の背景指定があればそちらが勝つ。 */
  [data-ground] {
    background: var(--canvas);
    color: var(--ink-body);
  }

  [data-ground="ink"] {
    color-scheme: dark;
    --canvas: var(--n-10);
    --surface: var(--n-9);
    --surface-raise: var(--n-8);
    --line: var(--n-8);
    --line-strong: var(--n-6);
    --line-control: var(--n-5);
    --ink: var(--n-0);
    --ink-body: var(--n-2);
    --ink-2: var(--n-3);
    --ink-3: var(--n-4);
    --accent: var(--n-0);
    --accent-hover: var(--n-2);
    --accent-ink: var(--n-10);
    --focus: var(--ai-3);
    --selection: var(--ai-7);
  }

  /* 紙に戻す：data-ground="paper" と、墨の中の図版の台・アイコンの台・構成メモの見本（画面写真・絵・書類の見本は紙の上でだけ見せる） */
  [data-ground="paper"],
  [data-ground="ink"] :is(.plate, .memo, .maker__face, .maker__mount) {
    color-scheme: light;
    --canvas: var(--n-0);
    --surface: var(--n-1);
    --surface-raise: var(--n-2);
    --line: var(--n-3);
    --line-strong: var(--n-4);
    --line-control: var(--n-5);
    --ink: var(--n-10);
    --ink-body: var(--n-9);
    --ink-2: var(--n-7);
    --ink-3: var(--n-6);
    --accent: var(--ai-8);
    --accent-hover: var(--ai-9);
    --accent-ink: var(--n-0);
    --focus: var(--ai-7);
    --selection: var(--ai-0);
    color: var(--ink-body);
  }

  /* 扉ページの印（計測とテストが使う）。扉ごとの色は付けない（藍 1 色） */
  body[data-door="artist"],
  body[data-door="renewal"],
  body[data-door="recruit"] {
    --page-kind: door;
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    background: var(--canvas);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: var(--line-strong) var(--canvas);
    scroll-padding-top: calc(var(--header-h) + 16px);
  }

  body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink-body);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.02em;
    font-synthesis-weight: none;
    font-synthesis-style: none;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    hanging-punctuation: allow-end;
    caret-color: var(--accent);
    accent-color: var(--accent);
  }

  :lang(ja) {
    text-autospace: normal;
    text-spacing-trim: space-first;
  }

  ::selection {
    background: var(--selection);
    color: var(--ink);
  }

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0;
    word-break: auto-phrase;
    text-wrap: balance;
  }

  h1,
  h2 {
    font-family: var(--font-display);
  }

  h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }

  h3,
  h4 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: 0.01em;
  }

  p,
  ul,
  ol,
  dl,
  dd,
  figure {
    margin: 0;
  }

  /* 本文の行長は 30〜40 字。li は部品（一覧・格子）の入れ物にもなるので、文章の一覧だけ components 層で同じ幅にする */
  p,
  dd {
    max-inline-size: var(--measure);
    text-wrap: pretty;
  }

  li {
    text-wrap: pretty;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  b,
  strong {
    color: var(--ink);
    font-weight: 500;
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--line-strong);
    transition: text-decoration-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out);
  }

  a:hover {
    text-decoration-color: var(--ink);
  }

  button {
    font: inherit;
    color: inherit;
  }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  [hidden] {
    display: none !important;
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .nowrap,
  .phrase {
    white-space: nowrap;
  }

  .phrase {
    display: inline-block;
  }

  .muted {
    color: var(--ink-2);
  }

  /* 幅で並びが変わる図版の説明：SP だけ／768px〜 だけに出す言い方 */
  .only-pc {
    display: none;
  }

  @media (min-width: 768px) {
    .only-sp {
      display: none;
    }

    .only-pc {
      display: inline;
    }
  }

  /* 見出しの改行：PC だけ／SP だけ */
  .br-pc {
    display: none;
  }

  .br-sp {
    display: inline;
  }

  @media (min-width: 768px) {
    .br-sp {
      display: none;
    }
  }

  @media (min-width: 1024px) {
    .br-pc {
      display: inline;
    }
  }
}

@layer layout {
  .wrap {
    width: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
  }

  /* 本文へ移動：墨のヘッダーの上に出る札。HTML に data-ground="ink" を書くので、墨の役割で描かれる
     （札の地は --ink＝紙、文字は --canvas＝墨、フォーカスリングは墨の上の ai-3）。ブランドの左端にそろえ、ヘッダーの高さの中央に出す */
  .skip-link {
    position: absolute;
    top: -80px;
    left: max(var(--gutter), calc((100% - var(--max)) / 2));
    z-index: calc(var(--z-header) + 1);
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 16px;
    background: var(--ink);
    color: var(--canvas);
    font-size: var(--fs-caption);
    font-weight: 500;
    text-decoration: none;
  }

  .skip-link:focus {
    top: calc((var(--header-h) - var(--tap)) / 2);
  }

  /* 札が出ている間は、ブランドの後ろの「ホームページ制作｜長野」を隠す（札が頭の文字を半分だけ隠さないように） */
  body:has(> .skip-link:focus) .site-header__tag {
    visibility: hidden;
  }

  main > :last-child:not(.section--band):not(.contact-band):not([data-ground="ink"]) {
    padding-bottom: var(--space-section);
  }

  /* ---------- 節：頭に 1px の罫。1024px〜 は 左に見出し 5 列・右に中身 7 列 ---------- */
  .section {
    padding-top: var(--space-section);
  }

  :is(.section, .section__band) > .wrap {
    padding-top: var(--sp-5);
    border-top: var(--rule) solid var(--line-strong);
  }

  :is(.section, .section__band) > .wrap > * + * {
    margin-top: var(--sp-5);
  }

  :is(.section, .section__band) > .wrap > .section__title + * {
    margin-top: var(--sp-4);
  }

  :is(.section, .section__band) > .wrap > .section__wide {
    margin-top: var(--space-block);
  }

  :is(.section, .section__band) > .wrap > .section__wide + * {
    margin-top: var(--space-block);
  }

  /* 節の中の小見出し（h3）。上の余白 > 下の余白 */
  :is(.section, .section__band) > .wrap > .section__sub,
  :is(.section, .section__band) > .wrap > .case-subhead,
  :is(.section, .section__band) > .wrap > h3 {
    margin-top: var(--sp-7);
    padding-top: var(--sp-4);
    border-top: var(--rule) solid var(--line);
  }

  :is(.section, .section__band) > .wrap > .section__sub + *,
  :is(.section, .section__band) > .wrap > .case-subhead + *,
  :is(.section, .section__band) > .wrap > h3 + * {
    margin-top: var(--sp-3);
  }

  @media (min-width: 1024px) {
    :is(.section, .section__band) > .wrap {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      column-gap: var(--col-gap);
      align-items: start;
    }

    :is(.section, .section__band) > .wrap > * {
      grid-column: 2;
    }

    :is(.section, .section__band) > .wrap > .section__title {
      grid-column: 1;
      grid-row: 1;
      padding-right: var(--sp-5);
    }

    :is(.section, .section__band) > .wrap > .section__title + * {
      margin-top: 0.35em;
    }

    :is(.section, .section__band) > .wrap > .section__wide {
      grid-column: 1 / -1;
    }
  }

  /* 短い節が続く時は、続けて読む 1 つのまとまりにする */
  .section--brief + .section--brief {
    padding-top: var(--space-block);
  }

  /* 帯：地の色を変えて置く節（約束・申し出・相談の帯・機関室）。地は data-ground が塗る。地の切り替わりが節の区切りなので、頭の罫は要らない */
  .section--band {
    margin-top: var(--space-section);
    padding-block: var(--space-section);
  }

  /* 帯の前書き（1〜2 文の短い段落）は、見出しと同じく文節で折る（節の一部を帯にした章の扉 .section__band も同じ） */
  :is(.section--band, .section__band) > .wrap > p,
  .cta-block > p {
    word-break: auto-phrase;
  }

  .section--band > .wrap,
  .section__band > .wrap {
    padding-top: 0;
    border-top: 0;
  }

  /* 節の一部だけを帯にする時（about の機関室）：帯は節の中で全幅、続きの .wrap は同じ節のまま紙に戻る */
  .section__band {
    padding-block: var(--space-section);
  }

  .section__band + .wrap {
    padding-top: var(--space-block);
    border-top: 0;
  }

  .section > .section__band + .wrap > :first-child {
    margin-top: 0;
  }

  /* ---------- 1画面目（.hero）：文章だけ ---------- */
  .hero {
    padding-top: clamp(40px, 5vw + 16px, 96px);
  }

  /* 墨の表紙：下にも余白を持って閉じる（次の紙の節は自分の上余白で始まる） */
  .hero[data-ground="ink"] {
    padding-bottom: clamp(48px, 4vw + 24px, 96px);
  }

  .hero > .wrap > * + *,
  .hero__body > * + * {
    margin-top: var(--sp-5);
  }

  .hero .crumbs + *,
  .hero .eyebrow + *,
  .hero .label + * {
    margin-top: var(--sp-3);
  }

  .hero .lead {
    max-inline-size: 34em;
  }

  .hero .note {
    max-inline-size: var(--measure);
  }

  .hero .maker {
    margin-top: var(--space-block);
  }

  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-block);
  }
}

@layer components {
  /* ---------- 小さな文字：ラベル・リード・注記 ---------- */
  .eyebrow,
  .label {
    color: var(--ink-3);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.04em;
  }

  /* リードは見出しの次に大きい文。見出しと同じく文節で折る（typography-ja §2。語の途中で折らない） */
  .lead {
    color: var(--ink-body);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    letter-spacing: 0.01em;
    word-break: auto-phrase;
  }

  /* 短い文も文節で折る（DESIGN.md「Japanese Typography」2026-09-28 第 2 回）：名札・要点・約束・仕様表の値・手順と一覧の題・
     直す前と直し方・窓口の説明・案内の一言・あいさつ。1〜3 行の文が語の途中（御｜社・本｜名・塩尻｜市）で割れないように。
     本文の長い段落には付けない。固有名と一語（御社の名義・本名・全国オンライン対応・塩尻市）は HTML の .nowrap でも割らない */
  :is(
      .points > li,
      .steps__title,
      .steps > li:not(:has(.steps__title)),
      .promise-list li,
      .value-list > li,
      .capabilities__text,
      .case-where,
      .steps__text,
      .maker__reading,
      .maker__role,
      .spec dd,
      .case-meta dd,
      .info-list dd,
      .work__points dd,
      .check-list__title,
      .check-list .muted,
      .check-list > li:not(:has(.check-list__title)),
      .fix-list__from,
      .fix-list__to,
      .methods__desc,
      .case-card__meta,
      .swipe-hint,
      .greeting,
      .contact-band__more,
      .site-footer__about
    ) {
    word-break: auto-phrase;
    text-wrap: pretty;
  }

  /* auto-phrase が効かないブラウザ（Safari・Firefox）：リードと帯の前書きは、HTML に書いた文節の切れ目（<wbr>）と約物でだけ折る。
     keep-all は <wbr>・約物・空白でだけ折り返し、はみ出す時は body の overflow-wrap: anywhere が受ける（2026-09-28） */
  @supports not (word-break: auto-phrase) {
    .lead,
    .intro__lead,
    .contact-band__lead,
    :is(.section--band, .section__band) > .wrap > p,
    .cta-block > p {
      word-break: keep-all;
    }
  }

  .note,
  .permission,
  .sample-lead,
  .swipe-hint,
  .mock-hint {
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.8;
  }

  .note,
  .permission,
  .sample-lead {
    padding-left: var(--sp-4);
    border-left: var(--rule) solid var(--line-strong);
  }

  .swipe-hint {
    color: var(--ink-3);
  }

  @media (min-width: 768px) {
    .swipe-hint {
      display: none;
    }
  }

  .greeting {
    max-inline-size: var(--measure);
    padding: var(--sp-3) var(--sp-4);
    border: var(--rule) solid var(--line);
    background: var(--surface);
    color: var(--ink-body);
    font-size: var(--fs-small);
    line-height: 1.8;
  }

  /* 現在地：リンクは触れる目標の 44px。リンクと現在地の文字はベースラインでそろえる。区切りの「/」は小ラベルの色 */
  .crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    color: var(--ink-3);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
  }

  .crumbs li + li::before {
    content: "/";
    margin: 0 0.7em;
    color: var(--ink-3);
  }

  .crumbs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--tap);
    min-height: var(--tap);
    color: var(--ink-2);
    text-decoration: none;
  }

  .crumbs a:hover {
    color: var(--ink);
    text-decoration: underline;
  }

  .crumbs [aria-current] {
    color: var(--ink-2);
  }

  /* ---------- ヘッダー：墨の地（data-ground="ink"）。下に 1px の罫。SP はブランド＋「相談する」＋メニュー ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: var(--rule) solid var(--line);
    background: var(--canvas);
  }

  /* 1 段目の高さはメニューを開いても変えない（開いた時に「相談する」が上へずれない）。ブランドの列は中身の幅より縮めない
     （320px の扉で「CLYVARN」が「つくっている人」に重ならないように。2026-09-28） */
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto auto;
    grid-template-rows: var(--header-h) auto;
    column-gap: var(--sp-3);
    align-items: center;
    min-height: var(--header-h);
  }

  /* 359px 以下（iPhone SE の拡大表示など）：ヘッダーの中だけ余白を詰めて、ブランド・つくっている人・相談するを 1 行に収める */
  @media (max-width: 359px) {
    .site-header .wrap {
      width: calc(100% - 24px);
    }

    .site-header__inner {
      column-gap: var(--sp-2);
    }

    .site-header__cta {
      padding-inline: 10px;
    }
  }

  .site-header__brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-3);
    min-height: var(--tap);
    padding-block: 10px;
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__tag {
    display: none;
    color: var(--ink-2);
    font-size: var(--fs-label);
    font-weight: 400;
    letter-spacing: 0;
  }

  .site-header__cta {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 16px;
    border: var(--rule) solid var(--ink);
    color: var(--ink);
    font-size: var(--fs-caption);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out);
  }

  .site-header__cta:hover {
    background: var(--ink);
    color: var(--canvas);
  }

  .site-header__cta:active {
    transform: translateY(1px);
  }

  /* 扉ページのヘッダー：案内（ナビ）の代わりに「つくっている人」の 1 本だけ。SP でも隠さない */
  .site-header__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink-body);
    font-size: var(--fs-caption);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__link:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
  }

  /* ハンバーガー：<button aria-expanded aria-controls>。開いた時は「閉じる」の文字に変わる */
  .site-header__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(4em + 8px);
    min-height: var(--tap);
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: var(--fs-caption);
    font-weight: 500;
    cursor: pointer;
  }

  .site-header__menu[aria-expanded="true"] .site-header__menu-open,
  .site-header__menu[aria-expanded="false"] .site-header__menu-close {
    display: none;
  }

  .site-nav {
    display: none;
    grid-column: 1 / -1;
    border-top: var(--rule) solid var(--line);
    overscroll-behavior: contain;
  }

  /* 開いた一覧は墨の一段明るい台（surface）に敷き、画面の端まで伸ばす（表紙の墨と続いて「ページが動いた」ように見せない） */
  .site-header__menu[aria-expanded="true"] + .site-nav {
    display: block;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    background: var(--surface);
  }

  .site-nav ul {
    display: flex;
    flex-direction: column;
    padding-block: var(--sp-2);
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink-body);
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: none;
  }

  .site-nav a:hover,
  .site-nav a[aria-current] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
  }

  .site-nav a[aria-current] {
    text-decoration-color: var(--ink);
  }

  @media (min-width: 768px) {
    .site-header__tag {
      display: inline;
    }
  }

  @media (min-width: 1024px) {
    .site-header__inner {
      grid-template-columns: auto minmax(0, 1fr) auto;
      column-gap: var(--sp-7);
    }

    .site-header__menu {
      display: none;
    }

    .site-nav,
    .site-header__menu[aria-expanded="false"] + .site-nav,
    .site-header__menu[aria-expanded="true"] + .site-nav {
      display: block;
      grid-column: 2;
      grid-row: 1;
      margin-inline: 0;
      padding-inline: 0;
      border-top: 0;
      background: transparent;
    }

    .site-header__cta {
      grid-column: 3;
      grid-row: 1;
    }

    .site-header__link {
      grid-column: 2;
      grid-row: 1;
      justify-self: start;
    }

    .site-nav ul {
      flex-direction: row;
      flex-wrap: nowrap;
      column-gap: var(--sp-6);
      padding: 0;
    }

    .site-nav a {
      font-size: var(--fs-caption);
      white-space: nowrap;
    }
  }

  /* 1024〜1199px は案内の間を 1 段つめる（5 項目を 1 行・72px 以内に保つ） */
  @media (min-width: 1024px) and (max-width: 1199px) {
    .site-nav ul {
      column-gap: var(--sp-5);
    }
  }

  /* ---------- ボタンとリンク ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 48px;
    padding: 0 24px;
    border: var(--rule) solid var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--t-press) var(--ease-out), border-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out), transform var(--t-press) var(--ease-out);
  }

  .btn:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
  }

  .btn:active {
    transform: translateY(1px);
  }

  /* 副ボタンの枠は UI 部品なので 3:1 以上の line-control（line-strong は装飾の罫）。副ボタンは地（canvas）の上にだけ置く */
  .btn--secondary {
    border-color: var(--line-control);
    background: transparent;
    color: var(--ink);
  }

  .btn--secondary:hover {
    border-color: var(--ink);
    background: transparent;
  }

  .btn--block {
    display: flex;
    width: 100%;
  }

  /* 新しいタブで開く物には斜めの矢印（CSS の mask。テキストに ↗ を書かない。data: URI は CSP の img-src の範囲） */
  .btn.ext::after,
  .live-link::after {
    content: "";
    flex: none;
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10.5 10 2.5M3.5 2h6.5v6.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10.5 10 2.5M3.5 2h6.5v6.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* 文中のリンク（行き先を言う文言）。下線＋山形 */
  .text-link {
    display: inline-block;
    padding-block: 10px;
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.6;
    word-break: auto-phrase;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.18em;
  }

  .text-link::after,
  .row-list__more::after,
  .sample-card__open::after,
  .case-card__more::after {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-left: 0.5em;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-0.08em) rotate(45deg);
  }

  .text-link:hover {
    text-decoration-color: var(--ink);
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .actions .btn {
    flex: 1 1 260px;
  }

  /* 公開中の印：8×8 の藍の四角＋文字「公開中」＋ドメイン（下線） */
  .live-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
    min-height: var(--tap);
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
  }

  .live-link__state,
  .status {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--ink-2);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .live-link__state::before,
  .status::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--accent);
  }

  .live-link__text {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.18em;
  }

  .live-link:hover .live-link__text {
    text-decoration-color: var(--ink);
  }

  /* ---------- つくっている人：アイコンを台に 1px 罫で置き、名札と対にする ---------- */
  .maker {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .maker__face,
  .maker__mount {
    flex: none;
    border: var(--rule) solid var(--line);
    background: var(--surface);
  }

  /* アイコンの絵は白黒で見せる（紙と墨と藍の画面で、表紙のいちばん鮮やかな点にしない。2026-09-28 第 2 回。
     絵・ファイル・alt・大きさは変えない。色に戻す時はこの filter の 1 行を消す） */
  .maker__face {
    width: 56px;
    height: 56px;
    padding: 4px;
    object-fit: cover;
    filter: grayscale(1);
  }

  .maker__mount {
    display: block;
    padding: var(--sp-3);
  }

  .maker__mount .maker__face {
    width: auto;
    max-width: 240px;
    height: auto;
    padding: 0;
    border: var(--rule) solid var(--line);
    background: var(--canvas);
  }

  .maker__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-inline-size: none;
    line-height: 1.6;
  }

  .maker__name {
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  .maker__reading,
  .maker__role {
    color: var(--ink-2);
    font-size: var(--fs-caption);
  }

  /* ---------- 図版の台（.plate）と画面写真の縁 ---------- */
  /* 画面写真は端末の枠なし・影なし。1px の罫で縁を取るだけ（.phone / .browser / .device__frame は縁の名前） */
  .phone,
  .browser,
  .device__frame,
  .strip__frame,
  .shot img,
  .plate img {
    display: block;
    border: var(--rule) solid var(--line);
    background: var(--canvas);
  }

  .phone img,
  .browser img,
  .device__frame img,
  .strip__frame img {
    width: 100%;
    border: 0;
  }

  .plate {
    padding: var(--space-block) var(--sp-4);
    border: var(--rule) solid var(--line);
    background: var(--surface);
  }

  /* 図版の 1〜2 行の説明は文節で折る（「申し込｜む」のような語の途中の改行を出さない） */
  .plate__caption,
  .device figcaption,
  .shot__note,
  .ba__note,
  .compare__caption {
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.65;
    word-break: auto-phrase;
  }

  .plate__caption {
    margin-top: var(--sp-3);
  }

  /* 端末の一覧：SP は横スクロールの帯（各 72vw）、768px〜 は 3 列 */
  /* 横スクロールの帯は position: relative（中の visually-hidden の絶対配置が文書の幅を広げないように） */
  .device-strip {
    position: relative;
    margin-inline: calc(-1 * var(--gutter));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .device-strip::-webkit-scrollbar {
    display: none;
  }

  .device-strip ul {
    display: flex;
    gap: var(--sp-4);
    width: max-content;
    padding: 0 var(--gutter) var(--sp-2);
  }

  .device-strip .device {
    width: 72vw;
    max-width: 320px;
    scroll-snap-align: start;
    scroll-margin-left: var(--gutter);
  }

  .device figcaption {
    margin-top: var(--sp-3);
  }

  @media (min-width: 768px) {
    .device-strip {
      margin-inline: 0;
      overflow: visible;
    }

    .device-strip ul {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--col-gap);
      width: auto;
      padding: 0;
    }

    .device-strip .device {
      width: auto;
      max-width: none;
    }

    /* 台の上に並べる版：紙の台に 1px の罫 */
    .device-strip--tile ul {
      padding: var(--space-block) var(--space-block);
      border: var(--rule) solid var(--line);
      background: var(--surface);
    }
  }

  /* 現在の公式サイトと、リニューアル案：同じ台・同じ大きさ・同じ名札 */
  .ba {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-block);
    padding: var(--space-block) var(--sp-4);
    border: var(--rule) solid var(--line);
    background: var(--surface);
  }

  .ba__item,
  .shot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    align-content: start;
  }

  .ba__label,
  .shot__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
    color: var(--ink-2);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
  }

  .ba__tag,
  .shot__tag {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .ba__desc {
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.7;
    word-break: auto-phrase;
  }

  @media (min-width: 768px) {
    .ba {
      padding: var(--space-block);
    }
  }

  @media (min-width: 960px) {
    .ba {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--col-gap);
    }

    .ba > .ba__note {
      grid-column: 1 / -1;
    }
  }

  /* 修正前と修正後：2 枚を並べる（figure.compare__item > a > img ＋ figcaption） */
  .compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .compare__item a {
    display: block;
    border: var(--rule) solid var(--line);
    background: var(--surface);
  }

  .compare__item img {
    width: 100%;
    aspect-ratio: 390 / 844;
    object-fit: cover;
    object-position: top;
  }

  .compare__item figcaption {
    margin-top: var(--sp-2);
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 500;
  }

  .compare__caption {
    grid-column: 1 / -1;
  }

  /* ---------- 一覧の部品：罫 1px で区切る ---------- */
  .problem-list,
  .steps,
  .check-list,
  .points,
  .info-list,
  .value-list,
  .fix-list,
  .faq,
  .stats__list,
  .fact__list {
    border-top: var(--rule) solid var(--line);
  }

  .problem-list > li,
  .check-list > li,
  .points > li,
  .value-list > li,
  .fix-list > li,
  .stats__list > li {
    padding: var(--sp-4) 0;
    border-bottom: var(--rule) solid var(--line);
  }

  /* 本当に順序がある手順だけ番号（等幅数字。左に小さく）。中身が文字だけの行もあるので、番号は絶対配置 */
  .steps {
    counter-reset: step;
  }

  .steps > li {
    position: relative;
    padding: var(--sp-4) 0 var(--sp-4) 2.4em;
    border-bottom: var(--rule) solid var(--line);
    counter-increment: step;
  }

  .steps > li::before {
    content: counter(step);
    position: absolute;
    top: calc(var(--sp-4) + 0.15em);
    left: 0;
    color: var(--ink-3);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
  }

  .steps__title {
    display: block;
    color: var(--ink);
    font-weight: 500;
  }

  .steps p,
  .steps__text,
  .case-where {
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.8;
  }

  .steps__title + .steps__text,
  .steps__title + .case-where,
  .steps__title + p {
    margin-top: var(--sp-1);
  }

  .check-list > li {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .check-list__title {
    color: var(--ink);
    font-weight: 500;
  }

  .check-list .muted {
    font-size: var(--fs-small);
    line-height: 1.8;
  }

  @media (min-width: 768px) {
    .check-list--cols {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--col-gap);
    }
  }

  /* 直す前 → 直し方。番号は手順（.steps）と同じ等幅数字を左の小さな列に（丸数字は使わない） */
  .fix-list {
    counter-reset: fix;
  }

  .fix-list > li {
    display: grid;
    grid-template-columns: 2em minmax(0, 1fr);
    gap: var(--sp-1) var(--sp-3);
    counter-increment: fix;
  }

  .fix-list > li::before {
    content: counter(fix);
    grid-row: 1 / span 2;
    padding-top: 0.15em;
    color: var(--ink-3);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
  }

  .fix-list > li > * {
    grid-column: 2;
  }

  .fix-list__from {
    color: var(--ink-2);
  }

  .fix-list__to {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    color: var(--ink);
    font-weight: 500;
  }

  .fix-list__to::before {
    content: "";
    flex: none;
    width: 0.45em;
    height: 0.45em;
    border-top: 1px solid var(--ink-3);
    border-right: 1px solid var(--ink-3);
    transform: rotate(45deg);
  }

  @media (min-width: 768px) {
    .fix-list > li {
      grid-template-columns: 2em minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--sp-5);
    }

    .fix-list > li::before {
      grid-row: 1;
    }

    .fix-list > li > .fix-list__to {
      grid-column: 3;
    }
  }

  /* 仕様表（dl）：項目名 7em・値。行罫 1px。事例の仕様・事業者情報・見どころ */
  .spec > div,
  .case-meta > div,
  .info-list > div,
  .work__points > div {
    display: grid;
    grid-template-columns: 7em minmax(0, 1fr);
    column-gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: var(--rule) solid var(--line);
    font-size: var(--fs-small);
    line-height: 1.7;
  }

  .spec,
  .case-meta,
  .info-list,
  .work__points {
    border-top: var(--rule) solid var(--line);
  }

  .spec dt,
  .case-meta dt,
  .info-list dt,
  .work__points dt {
    color: var(--ink-3);
    font-weight: 500;
  }

  .spec dd,
  .case-meta dd,
  .info-list dd,
  .work__points dd {
    color: var(--ink-body);
  }

  /* 仕様表の行・事例カードの中の「公開中」リンク：触れる範囲は 44px のまま（.live-link の min-height）、
     上下の負の余白で相殺して、行の高さと文字の並び（項目名とのベースライン）を変えない */
  :is(.case-meta, .case-card) .live-link {
    margin-block: calc((1.5em - var(--tap)) / 2);
  }

  @media (max-width: 599px) {
    .case-meta--wide > div {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--sp-1);
    }
  }

  @media (min-width: 600px) {
    .case-meta--wide > div {
      grid-template-columns: 9em minmax(0, 1fr);
    }
  }

  /* 行一覧：1 行 1 入口（宛先／一文／詳しく見る）。扉の一覧・404 の入口・見本の目次 */
  .row-list {
    border-top: var(--rule) solid var(--line);
  }

  .row-list__item {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-5) 0;
    border-bottom: var(--rule) solid var(--line);
    color: var(--ink-body);
    text-decoration: none;
  }

  .row-list__for {
    color: var(--ink);
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: var(--lh-h3);
  }

  .row-list__text {
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.8;
    word-break: auto-phrase;
  }

  .row-list__more {
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.18em;
  }

  .row-list__item:hover .row-list__more {
    text-decoration-color: var(--ink);
  }

  @media (min-width: 768px) {
    .row-list__item {
      grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr);
      column-gap: var(--col-gap);
      align-items: baseline;
    }

    .row-list__more {
      justify-self: end;
      white-space: nowrap;
    }
  }

  /* 1024px〜 は節の 5:7 と同じ線に一文の左端をそろえる（帯の前書き・注記と左端が 2 本にならない。2026-09-28 第 2 回） */
  @media (min-width: 1024px) {
    .row-list__item {
      grid-template-columns: calc((100% - var(--col-gap)) * 5 / 12) minmax(0, 1fr) auto;
    }
  }

  /* よくある質問 */
  .faq details {
    border-bottom: var(--rule) solid var(--line);
  }

  .faq summary {
    position: relative;
    display: block;
    padding: var(--sp-4) 40px var(--sp-4) 0;
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::before,
  .faq summary::after {
    content: "";
    position: absolute;
    top: calc(var(--sp-4) + 0.9em);
    right: 8px;
    width: 14px;
    height: 1px;
    background: var(--ink-3);
    transition: transform var(--t-dropdown) var(--ease-out);
  }

  .faq summary::after {
    transform: rotate(90deg);
  }

  .faq details[open] summary::after {
    transform: rotate(0deg);
  }

  .faq__answer {
    padding: 0 0 var(--sp-5);
    color: var(--ink-body);
    font-size: var(--fs-small);
    line-height: 1.85;
  }

  .faq__answer > * + * {
    margin-top: 0.8em;
  }

  /* 構成メモの見本：一枚の紙 */
  .memo {
    padding: var(--sp-2) var(--sp-5);
    border: var(--rule) solid var(--line);
    background: var(--surface);
  }

  .memo .steps {
    border-top: 0;
  }

  .memo .steps > li:last-child {
    border-bottom: 0;
  }

  /* ---------- 数字の札（.stats）と事実の枠（.fact）：紙の台に 1px 罫。期間・出典を必ず ---------- */
  .stats,
  .fact {
    padding: var(--sp-5) var(--sp-4);
    border: var(--rule) solid var(--line);
    background: var(--surface);
  }

  .stats + .stats,
  .stats + .note,
  .facts + .note {
    margin-top: var(--sp-4);
  }

  .stats__title,
  .fact__title {
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.6;
  }

  .stats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--sp-3);
    border-top: var(--rule) solid var(--line);
  }

  .stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
    border-bottom: var(--rule) solid var(--line);
  }

  .stat:nth-child(even) {
    padding-right: 0;
    padding-left: var(--sp-3);
    border-left: var(--rule) solid var(--line);
  }

  .stat--wide {
    grid-column: 1 / -1;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  /* 数字の説明（何の数字か・いつの数字か）は、ほかの説明文と同じ 16px（2026-09-28 第 2 回。14px では老眼で読めない） */
  .stat__label {
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.6;
    word-break: auto-phrase;
    text-wrap: pretty;
  }

  /* 単位（回・点・KB・秒）はリードの大きさ。16px のままだと、34px の数字の横で四角い記号に見える */
  .stat__value {
    color: var(--ink);
    font-size: var(--fs-lead);
    line-height: 1.2;
  }

  .stat__num,
  .fact__num {
    margin-right: 0.15em;
    font-size: var(--fs-figure);
    font-weight: 500;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
  }

  .stat__value--text {
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.5;
  }

  .stats__source,
  .stats__note,
  .fact__source,
  .fact__note {
    margin-top: var(--sp-3);
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.7;
    word-break: auto-phrase;
  }

  .stats__note,
  .fact__note {
    margin-top: var(--sp-1);
  }

  .stats__list {
    margin-top: var(--sp-3);
  }

  .stats__list > li {
    padding: var(--sp-3) 0;
    font-size: var(--fs-small);
    line-height: 1.8;
  }

  /* 文章の一覧の行長（本文と同じ 38em）。幅を li に付けると行の罫だけが短くなり、一覧の上の罫と右端がずれる。
     罫は一覧の幅いっぱいに引き、右の余白で文字だけを 38em に収める（2 列の格子の中では余白 0）。
     li の padding の一括指定より後に置く。よくある質問は、答えの段落（p）が 38em なので対象にしない */
  .problem-list > li,
  .check-list > li,
  .points > li,
  .value-list > li,
  .fix-list > li,
  .stats__list > li,
  .fact__list > li,
  .steps > li {
    padding-inline-end: max(0px, calc(100% - var(--measure)));
  }

  @media (min-width: 768px) {
    .stats,
    .fact {
      padding: var(--sp-5);
    }

    .stats__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .stat,
    .stat:nth-child(even) {
      padding: var(--sp-3) var(--sp-4);
      border-bottom: 0;
      border-left: var(--rule) solid var(--line);
    }

    .stat:nth-child(4n + 1) {
      padding-left: 0;
      border-left: 0;
    }

    .stat--wide {
      padding-top: var(--sp-4);
      border-top: var(--rule) solid var(--line);
    }
  }

  .facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .fact__main {
    margin-top: var(--sp-2);
    color: var(--ink);
    line-height: 1.8;
  }

  .fact__list {
    display: grid;
    gap: var(--sp-1);
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    font-size: var(--fs-small);
  }

  @media (min-width: 768px) {
    .facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--col-gap);
    }
  }

  /* ---------- できること（デザイン・導線設計・SEO・AIO）：4 行の仕様表 ---------- */
  .capabilities {
    border-top: var(--rule) solid var(--line);
  }

  .capabilities > li {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-4) 0;
    border-bottom: var(--rule) solid var(--line);
  }

  .capabilities__en {
    color: var(--ink-3);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.02em;
  }

  /* SP は縦に積むので、英字の札が真下の和文の題（Design／デザイン）の言い直しに見える。768px 未満では出さない */
  @media (max-width: 767px) {
    .capabilities__en {
      display: none;
    }
  }

  .capabilities__title {
    color: var(--ink);
  }

  .capabilities__text {
    color: var(--ink-body);
    font-size: var(--fs-small);
    line-height: 1.8;
  }

  @media (min-width: 768px) {
    .capabilities > li {
      grid-template-columns: 6.5em 7em minmax(0, 1fr);
      column-gap: var(--col-gap);
      align-items: baseline;
    }
  }

  /* ---------- デザインサンプル（制作できるサイトの例）：スマホ画面を台に 1px 罫。端末の枠なし ---------- */
  .sample-gallery {
    position: relative;
    margin-inline: calc(-1 * var(--gutter));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }

  .sample-gallery ul {
    display: flex;
    gap: var(--sp-4);
    width: max-content;
    padding: 0 var(--gutter) var(--sp-4);
  }

  .sample-card {
    display: flex;
    flex-direction: column;
    width: 60vw;
    max-width: 250px;
    scroll-snap-align: start;
    scroll-margin-left: var(--gutter);
  }

  .sample-card figure {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .sample-card .device__frame {
    padding: var(--sp-3);
    background: var(--surface);
  }

  .sample-card .device__frame img {
    aspect-ratio: 390 / 740;
    object-fit: cover;
    object-position: top;
    border: var(--rule) solid var(--line);
  }

  .sample-card figcaption {
    flex: 1;
    padding: var(--sp-3) 0 var(--sp-2);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.6;
  }

  .sample-card__kind {
    display: block;
    color: var(--ink);
    font-weight: 500;
    word-break: auto-phrase;
    text-wrap: pretty;
  }

  .sample-card__open {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink);
    font-size: var(--fs-caption);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.18em;
  }

  .sample-card__open:hover {
    text-decoration-color: var(--ink);
  }

  /* 10 点を 5 列 × 2 段に（3 列だと最後の段が 1 点だけ残る）。1023px までは横スクロールの帯のまま */
  @media (min-width: 1024px) {
    .sample-gallery {
      margin-inline: 0;
      overflow: visible;
    }

    .sample-gallery ul {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: var(--sp-7) var(--sp-5);
      width: auto;
      padding: 0;
    }

    .sample-card {
      width: auto;
      max-width: none;
    }
  }

  /* 帯のままの 768〜1023px では「横にスワイプ」の一言を残す */
  @media (min-width: 768px) and (max-width: 1023px) {
    .section:has(.sample-gallery) .swipe-hint {
      display: inline;
    }
  }

  /* ---------- 見本のパソコンの画面（<dialog>、site.js が作る）：紙の上の台に 1px 罫。影・角丸なし ---------- */
  .viewer {
    width: min(100% - 2 * var(--gutter), 1120px);
    max-width: none;
    height: fit-content;
    max-height: calc(100dvh - 2 * var(--gutter));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: var(--rule) solid var(--line-strong);
    background: var(--canvas);
    color: var(--ink-body);
  }

  .viewer::backdrop {
    background: color-mix(in srgb, var(--ink) 55%, transparent);
  }

  .viewer__inner {
    max-height: calc(100dvh - 2 * var(--gutter) - 2 * var(--rule));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .viewer__bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--header-h);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: var(--rule) solid var(--line);
    background: var(--canvas);
  }

  .viewer__title {
    max-inline-size: none;
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.6;
  }

  .viewer__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: var(--tap);
    padding: 0 16px;
    border: var(--rule) solid var(--ink);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-caption);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--t-press) var(--ease-out), color var(--t-press) var(--ease-out);
  }

  .viewer__close:hover {
    background: var(--ink);
    color: var(--canvas);
  }

  .viewer__close:active {
    transform: translateY(1px);
  }

  .viewer__figure {
    margin: var(--sp-4);
    padding: var(--sp-3);
    border: var(--rule) solid var(--line);
    background: var(--surface);
  }

  .viewer__img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--rule) solid var(--line);
    background: var(--canvas);
  }

  .viewer__caption {
    margin-top: var(--sp-3);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.65;
  }

  /* 開いている間は、後ろのページをスクロールさせない。幅を取るスクロールバーがある時だけ、その幅を残して横にずらさない
     （幅を取らないスクロールバーの画面で溝を足すと、文が折り返し直して後ろのページが上下にずれる） */
  .has-viewer {
    overflow: hidden;
  }

  .has-viewer.has-scrollbar {
    scrollbar-gutter: stable;
  }

  @media (min-width: 768px) {
    .viewer__bar {
      padding-inline: var(--sp-5) var(--sp-4);
    }

    .viewer__figure {
      margin: var(--sp-5);
      padding: var(--sp-4);
    }
  }

  /* ---------- 事例へのカード（実績）：行の形。画面写真は 1px 罫 ---------- */
  .case-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .case-card {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-4);
    border: var(--rule) solid var(--line);
    background: var(--surface);
  }

  .case-card__thumb {
    width: 88px;
    border: var(--rule) solid var(--line);
    background: var(--canvas);
    aspect-ratio: 375 / 700;
    object-fit: cover;
    object-position: top;
  }

  .case-card__title {
    font-size: var(--fs-h3);
  }

  .case-card__link {
    text-decoration: none;
  }

  .case-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .case-card:hover .case-card__link {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
  }

  .case-card__meta {
    margin-top: var(--sp-1);
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.7;
  }

  .case-card__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-3);
  }

  .case-card .live-link {
    position: relative;
    z-index: 2;
  }

  .case-card__more {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    font-size: var(--fs-caption);
    font-weight: 500;
  }

  @media (min-width: 768px) {
    .case-card {
      grid-template-columns: 120px minmax(0, 1fr);
      gap: var(--sp-5);
      padding: var(--sp-5);
    }

    .case-card__thumb {
      width: 120px;
    }
  }

  .case-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-6);
  }

  /* ---------- 相談の窓口（ボタンの並び）・相談ブロック ---------- */
  .methods {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    max-width: 30rem;
  }

  .methods__title {
    color: var(--ink);
    font-weight: 500;
  }

  .methods__desc,
  .methods__fallback {
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.8;
  }

  .methods > li > .btn + .methods__desc {
    margin-top: var(--sp-2);
  }

  .cta-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  .cta-block > p {
    max-inline-size: var(--measure);
  }

  .cta-block__note,
  .cta-more {
    color: var(--ink-2);
    font-size: var(--fs-small);
  }

  @media (min-width: 1024px) {
    .cta-block {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      column-gap: var(--col-gap);
      align-items: start;
    }

    .cta-block > .eyebrow,
    .cta-block > h2 {
      grid-column: 1;
    }

    .cta-block > h2 ~ * {
      grid-column: 2;
    }

    .cta-block > h2 + p {
      margin-top: 0.35em;
    }

    .section--band > .wrap > .cta-block {
      grid-column: 1 / -1;
    }
  }

  /* 固定の相談バー（扉ページの SP だけ）：帯の部品。1画面目を過ぎてから出る（site.js） */
  .sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: var(--rule) solid var(--line);
    background: var(--canvas);
  }

  .sticky-cta.is-waiting {
    visibility: hidden;
    transform: translateY(110%);
  }

  .sticky-cta .btn {
    display: flex;
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
  }

  /* Tab で進んだ先が固定バーの裏に隠れないよう、下にもバーの分の余白を取ってスクロールさせる（WCAG 2.4.11） */
  @media (max-width: 899px) {
    html:has(.sticky-cta) {
      scroll-padding-bottom: calc(var(--sticky-h) + 16px);
    }
  }

  /* 固定バーの分の余白はフッター（墨）の中に取る。body に取ると、ページの最下部に紙の細い帯が残る */
  body:has(.sticky-cta) .site-footer {
    padding-bottom: calc(var(--sp-7) + var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  }

  @media (min-width: 900px) {
    .sticky-cta {
      display: none;
    }

    body:has(.sticky-cta) .site-footer {
      padding-bottom: calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
    }
  }

  /* ---------- フッター：墨の地（data-ground="ink"）に文章だけ ---------- */
  .site-footer {
    padding: var(--sp-7) 0 calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
    border-top: var(--rule) solid var(--line);
    color: var(--ink-2);
    font-size: var(--fs-caption);
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  /* 触れる範囲は 44px。上下の負の余白で相殺して、行の高さと下の紹介文の位置は変えない */
  .site-footer__brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    margin-block: calc((1.85em - var(--tap)) / 2);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
  }

  .site-footer__about {
    margin-top: var(--sp-2);
    line-height: 1.7;
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-5);
  }

  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink-body);
    text-decoration: none;
  }

  .site-footer__links a:hover {
    text-decoration: underline;
  }

  .site-footer__copy {
    color: var(--ink-3);
    font-size: var(--fs-label);
  }

  @media (min-width: 768px) {
    .site-footer__inner {
      grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr);
      column-gap: var(--col-gap);
      align-items: first baseline;
    }

    .site-footer__copy {
      text-align: right;
    }
  }

  /* 1024px〜 はリンク（5 つまで）を 1 行に。リンクの列は中身の幅、紹介文の列が残りを取る */
  @media (min-width: 1024px) {
    .site-footer__inner {
      grid-template-columns: minmax(0, 1fr) max-content max-content;
    }
  }

  /* ---------- 動き：状態表示だけ。prefers-reduced-motion では止める ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .sticky-cta.is-ready {
      transition: transform var(--t-panel) var(--ease-out), visibility var(--t-panel);
    }

    /* 見本の画面を開いた時：紙が 1 枚置かれる（opacity と 8px の移動だけ。閉じる時は動かさない） */
    .viewer[open] {
      animation: viewer-in var(--t-panel) var(--ease-out);
    }

    .viewer[open]::backdrop {
      animation: viewer-fade var(--t-panel) var(--ease-out);
    }

    @keyframes viewer-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
    }

    @keyframes viewer-fade {
      from {
        opacity: 0;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}