/*
  AllRev のサービス紹介ページ 4 枚（`/` `/account` `/seo` `/all-in-one`）専用のスタイル。

  **ほかの 2 枚を触らない。** 読み物 57 枚（`/docs/*` と `/terms` `/privacy`
  `/data-deletion`）は `docs.css`、広告用 LP 2 枚（`/lp-ad-1` `/lp-ad-2`）は
  `styles.css`。こちらの配色に合わせてあちらのトークンを動かすと、関係のない
  ページの色と余白が変わる。**このファイルを読むのはサービス紹介の 4 枚と、
  その上に `mcp.css` を重ねる `/mcp`（Claude / ChatGPT から使う）、
  `consulting.css` を重ねる `/`（AI コンサルティング）だけ。**
  （`docs.css` は同じ Linear 風の白キャンバスで、トークンはここの `:root` を
  正本として写してある——**値を動かすなら両方直す**。）

  **ビルドしない**（Tailwind も PostCSS も通さない）。ここに書いたものが
  そのまま配信される。

  **JS を実行しなくても本文が読める**こと（クローラに読まれるのが仕事）。
  アニメーションも配置も CSS だけで完結させ、`display:none` を JS で
  外す作りにしない。例外はスクロール連動の縮退 1 つだけで、それも
  **JS が印を付けた `<html>` の下でしか隠さない**（「動き」の節）。

  ── 見た目の方針（Linear 風・**白キャンバス**。2026-09-02 v3）──────
  **正本は `server/app/mcp/knowledge/skills/linear-design/SKILL.md` の「方針転換（v3）」節。**
  値（面・境界線・文字・角丸・ウェイト）を動かすときは、まずあちらの表と
  理由を直す——ここはその適用先（**ずれたら両方直す**）。

  **キャンバスは白**（ユーザー指定）。採るのは linear.app の**構成・
  モーション・「実物の画面を見せる」構え**で、色は反転させてある
  ——ダッシュボード（`web/src/index.css`）と同じ側になったので、
  ページに載せるモックも実物の画面（霧色地 × 白カード）に揃える。
  **暗地専用だった値（近黒の 3 段・明るい青のリンク色・ロゴの白下地円・
  aurora / glow の背景画像）は、この面には 1 つも残っていない。**

  要点:
  - **面は 3 段だけ**（`--bg` → `--bg-card` → `--bg-raise`）。増やさない。
  - **ふつうのカードの分離は 1px のヘアラインだけ**（`--sh-ring`。影なし）。
    **影を使ってよいのは「浮いている」2 種類だけ**——ウィンドウ框と
    コラージュの前面カード（`--sh-float`）、およびドロップダウン級
    （`--sh-xl`）。白地ではヘアラインだけだと浮きが出ないので影が要るが、
    **並んでいるカードには落とさない**（面の数だけ影が並ぶと紙束に見える）。
  - **角丸は 2 / 6 / 12 / 9999 の 4 語彙だけ。**
  - **font-weight の上限は 600。** 700/800 は読み込んでもいない
    （`scripts/make_lp_service_pages.py` の Google Fonts の link）。
    強調は太さではなく色（`--ink`）で付ける。
  - **青は「押すと何かが起きる」場所だけ。** 飾り・見出し・図解に散らさない。
    塗りボタンは 1 画面 1 つ（ヒーロー / CTA バンド / 送信ボタン）。
  - **白地の上の文字色に `--b600`（#2563eb）を使わない**——白文字を載せる
    塗りには使えるが（5.17:1）、文字色は `--b700`（#1d4ed8 = 6.70:1）。
  - **`--faint` を読ませる文字に使わない**（白地で 2.56:1 = AA 落ち）。
    小さく添える注記ほど薄い色を選びたくなるが、読めなかった人には
    **読めていないことが分からない**ので、いちばん直りにくい。
    薄い文字が要るときは `--muted`（4.76:1）。
    **状態色も同じ理由で濃いほうに揃えてある**（`--ok` / `--warn`）
    ——アイコンだけなら 3:1 で足りるが、同じトークンが送信結果の
    文にも載る。

  ── 配置とモーション（v3。linear.app の実測に合わせた）──────────
  **節の地色の交互は使わない。** 節の地はすべて `--bg` で、`--bg-card` は
  カードとウィンドウ框の面だけに使う。**区切りは余白（96〜160px）と
  1px のヘアライン**。
  markup の `.section-alt` は**そのまま残す**（節の並びの見張りが読む＝
  `server/tests/test_lp_service_pages.py` の `SECTION_ORDER`）。いまは
  「地色が違う節」ではなく「**上にヘアラインを引く節**」の印として効く。

  ほかの要点:
  - **ヒーローは 2 段組にしない。** 左寄せの文（`.hero-copy`。最大 680px）
    → その下に**全幅のウィンドウ**（`.hero-shot`）。下端は `mask-image` で
    ページへ溶かす。
  - **章は 3 つ組**（`#can` / `#cycle`）: 2 段組の章ヘッダ（`.section-head`）
    → **コラージュ**（`.collage`。背面のボードが右端からはみ出し、前面の
    カードが影で浮く）→ 機能名のリンク行（`.feature-links`）。
  - **`#statement` は 2 トーンの大ステートメント + FIG カード 3 枚**
    （`.statement` / `.figs`）。面は張らず、列の間の 1px だけで割る。
  - **出現は 1 回・短距離**（28px / 0.8s / `cubic-bezier(0.16, 1, 0.3, 1)`。
    画面系は 40px + 0.97 → 1 の拡大）。
    ヒーローだけ読み込み時に動く。

  **挿絵（`illust-*.webp`）も説明のための図も使わない**（v3 で運用サイクルの
  円環図も落とした）。ページに載る絵は**実物の画面の見本**（ヒーロー・
  コラージュ）と、文字を持たない FIG の線画だけ。人物やロボットの絵は
  「何をしてくれるのか」を 1 つも説明しないのに、縦を大きく取っていた。
  **`.duo` のような「本文＋絵」の 2 段組を戻さない。**
*/

:root {
  /* ── 面（明るい順に 3 段。これ以上増やさない） ───────────── */
  --bg: #ffffff; /* ページ地（白。ユーザー指定） */
  --bg-card: #f8fafc; /* 淡い面: ウィンドウの上バー・hover・カードの地 */
  --bg-raise: #f1f5f9; /* さらに一段（使いすぎない） */

  /* ── 境界線（分離の主役。ダークと同じ思想） ───────────────── */
  --line: #e2e8f0; /* 標準のヘアライン */
  --line2: #cbd5e1; /* 強めの区切り・フッター上端・hover */

  /* ── 文字（白地での実測比） ───────────────────────────── */
  --ink: #0f172a; /* 見出し（白地 17.85:1） */
  --body: #475569; /* 本文（白地 7.58:1） */
  --muted: #64748b; /* 補足・ラベル（白地 4.76:1・淡い面 4.55:1、AA 可） */
  /* **読ませる文字に使わない。** 白地で 2.56:1 しかなく AA（4.5:1）に
     届かない（3:1 も割るので、意味を持つ線画にも使わない）。
     装飾専用——通し番号・框の信号の点など、消えても読むものが減らない場所だけ。 */
  --faint: #94a3b8;

  /* ── アクセント = 既存テーマのロイヤルブルー ─────────────── */
  --b600: #2563eb; /* 塗りボタンの地（白文字と 5.17:1）。文字色には使わない */
  --b700: #1d4ed8; /* 白地の上のリンク・アクセント文字（6.6:1）。
     塗りボタンの hover もこちら（白文字と 7.0:1） */
  --b-tint: rgba(37, 99, 235, 0.06); /* 地の淡い青ワッシュ。1 面 1 箇所まで */

  /* ── 状態色（表示のみ。アクションに使わない） ───────────────
     **白地で AA を満たす濃さにしてある**（#16a34a は 3.30:1 で、
     チェックの線画には足りても**送信結果の文には足りない**——
     読めなかった人には読めていないことが分からない、いちばん直りにくい
     壊れ方なので、アイコンと文で色を分けずに濃いほうへ揃える）。 */
  --ok: #15803d; /* 白地 5.02:1 */
  --warn: #c2410c; /* 白地 5.18:1 */

  /* カードの見出しに載るアイコンバッジ（`#usecases`）。
     **ごく淡い青の円 + `--b700` の線画。** 線色をこれ以上明るくしない——
     バッジの地との比が 3:1 を切ると、装飾とはいえ何のアイコンなのか
     読めなくなる。**青ベタの塗りバッジには戻さない。** */
  --icon-badge-bg: rgba(37, 99, 235, 0.09);
  --icon-stroke: var(--b700);

  /* ── 角丸: 4 語彙だけ（2 / 6 / 12 / 9999） ────────────────── */
  --r-sm: 2px;
  --r: 6px; /* ボタン・入力 */
  --r-lg: 12px; /* カード上限。**これ以上大きくしない** */
  --pill: 9999px;

  /* ── エレベーション ─────────────────────────────────────
     ヘアラインが標準。**影は「浮いている」ものだけ**
     （ウィンドウ框・コラージュの前面カード = `--sh-float`、
     ドロップダウン級 = `--sh-xl`）。並ぶカードには落とさない。 */
  --sh-ring: inset 0 0 0 1px var(--line);
  --sh-ring-hover: inset 0 0 0 1px var(--line2);
  --sh-float: 0 24px 48px -24px rgba(15, 23, 42, 0.18);
  --sh-xl: 0 12px 32px -8px rgba(15, 23, 42, 0.16);

  /* ── レイアウト ───────────────────────────────────────── */
  --wrap: 1180px;

  /* ── モーション ───────────────────────────────────────
     **出現の曲線と距離は 1 組だけ。** 直書きすると、あとから足した節だけ
     速さも距離も違う出方になる（そして並べて見ないと気づけない）。

     **v4（2026-09-03）で振れ幅を上げた。** 指示は「もっと大胆な動きに」で、
     参照はコーポレートサイト（tripclear.jp）のトップ——せり上がる見出し・
     流れるロゴ帯・ゆっくり漂う背景。上げたのは**距離と段差**だけで、
     曲線（`--ease-out`）と「transform と opacity しか動かさない」規則は
     そのまま（ease-in を使わない・数字はアニメーションさせない・
     hover では動かさない、も変えていない）。

     3 段階を使い分ける:
     `--rise`（文・カード）< `--rise-screen`（面積の大きい画面）
     < `--rise-bold`（章ヘッダと声明。章の切り替わりだけ大きく振る）。 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rise: 44px; /* 文・カードの上がる距離。14px → 28px → 44px（v4 で「大胆に」） */
  --rise-screen: 60px; /* 画面系（ヒーローのウィンドウ・コラージュ前面）。文より大きく */
  --rise-bold: 76px; /* 章ヘッダ・声明。章に入った瞬間をいちばん大きく振る */
  --t-reveal: 0.9s;
  /* 色・枠・影の変化（linear-design の共通則 = 120ms）。**出現の transition
     にも混ぜて書く**ので、ここが無いと**出現ごと死ぬ**——短縮形の中に
     未定義の `var()` が 1 つでもあると、その宣言は計算の時点で丸ごと無効に
     なり `all 0s`（＝アニメーションなし）へ落ちる。**エラーにも警告にも
     ならず、opacity は 0 → 1 に「切り替わる」ので、隠れてはいないぶん
     ぱっと見は正常に見える**（2026-09-03 まで実際にそうなっていた。
     `--t-fast` を定義し忘れたまま、動いているつもりで縮退経路を書いていた）。 */
  --t-fast: 0.12s;

  /* ── フォント ─────────────────────────────────────────── */
  /* 読み込みは family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600
     （700/800 は読み込まない。見出しは 600 で止める） */
  --sans:
    "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  /* 日本語の詰め。**外さない**——見出しは 1 行に収まる前提で改行位置を
     決めてあるので、詰めが無いと「マーケティング業務を、」だけが折り返す。 */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(37, 99, 235, 0.16);
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  /* **`--b600` にしない。** 暗地の上では 3.9:1 で AA に届かない。 */
  color: var(--b700);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.4;
  /* 和文は -0.01em まで。**-0.02em 級を掛けない**（濁点・半濁点が
     隣の字に食い込む）。 */
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

/* 連携チップの 1 行だけ本文より広く取る（11 件が 1180px に収まらない）。 */
.wrap-wide {
  width: min(100% - 40px, 1320px);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 100;
  background: var(--b600);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r);
}

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

/* ── ロゴ ───────────────────────────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.logo:hover {
  text-decoration: none;
}

.logo-mark {
  display: block;
  flex: none;
}

/* ── ボタン ─────────────────────────────────────────────── */
/* **塗りは 1 画面 1 つ。** 並ぶ CTA の 2 つ目以降はゴースト。 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.btn:hover {
  text-decoration: none;
}

/* 主ボタン。**影も translateY も付けない**（分離はボーダー、という方針）。
   hover は**薄い側へ振らない**——濃い側 `--b700`（#1d4ed8）なら白文字と
   7.0:1 で、静止時（5.17:1）より読みやすくなる（SKILL.md の表も同じ値）。 */
.btn-primary {
  background: var(--b600);
  color: #fff;
}

.btn-primary:hover {
  background: var(--b700);
}

.btn-outline {
  background: transparent;
  color: var(--body);
  border-color: var(--line);
}

.btn-outline:hover {
  background: var(--bg-card);
  border-color: var(--line2);
  color: var(--ink);
}

/* CTA バンドの中の 2 つ。地が青いパネルだった頃の名残の名前で、
   いまはそれぞれ主ボタン / ゴーストと同じ扱い（**markup は変えない**ので
   ここで受ける）。 */
.btn-white {
  background: var(--b600);
  color: #fff;
}

.btn-white:hover {
  background: var(--b700); /* 主ボタンと同じ理由 */
}

.btn-ghost-white {
  background: transparent;
  color: var(--body);
  border-color: var(--line);
}

.btn-ghost-white:hover {
  background: var(--bg-card);
  border-color: var(--line2);
  color: var(--ink);
}

.btn-lg {
  height: 46px;
  padding: 0 22px;
  font-size: 15px;
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── ヘッダー ───────────────────────────────────────────── */

.site-header {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline: auto;
  position: relative;
}

.header-nav a {
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.header-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* ヘッダーの「資料請求」は**ヒーローの主ボタンと同時に画面に居る**ので、
   ここだけゴーストに落とす（塗りは 1 画面 1 つ）。markup は 4 枚とも
   `.btn-primary` のままなので、置き場所で受ける。 */
.header-cta .btn-primary {
  background: transparent;
  color: var(--body);
  border-color: var(--line);
}

.header-cta .btn-primary:hover {
  background: var(--bg-card);
  border-color: var(--line2);
  color: var(--ink);
}

.header-login {
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.header-login:hover {
  color: var(--ink);
}

@media (max-width: 1080px) {
  .header-nav {
    display: none;
  }
}

@media (max-width: 560px) {
  .header-login {
    display: none;
  }

  .header-inner {
    min-height: 64px;
  }
}

/* ── ヘッダーのサービス切替（JS 無し）─────────────────────
   `:hover` と `:focus-within` の両方で開く。キーボードでも Tab で
   中のリンクへ入れる。リンクは常に DOM にあるのでクローラからも見える。 */

.nav-drop {
  position: relative;
}

.nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-drop-trigger svg {
  transition: transform 0.16s ease;
}

.nav-drop:hover .nav-drop-trigger,
.nav-drop:focus-within .nav-drop-trigger {
  color: var(--ink);
}

.nav-drop:hover .nav-drop-trigger svg,
.nav-drop:focus-within .nav-drop-trigger svg {
  transform: rotate(180deg);
}

/* パネル側で上の隙間を持つ。マージンで空けるとその隙間で hover が切れる。 */
.nav-drop-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding-top: 14px;
  width: 340px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}

.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* **外側に影を落としてよい数少ない場所**（浮いている面なので、
   ボーダーだけだと下の本文と地続きに見える）。 */
.nav-drop-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: 8px;
  display: grid;
  gap: 2px;
}

.nav-drop-item {
  display: block;
  padding: 11px 14px;
  border-radius: var(--r);
}

.nav-drop-item:hover {
  background: var(--bg-card);
  text-decoration: none;
}

.nav-drop-name {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

.nav-drop-jp {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.nav-drop-item.is-current {
  background: rgba(37, 99, 235, 0.12);
}

.nav-drop-item.is-current .nav-drop-name {
  color: var(--b700);
}

.nav-drop-item.is-current .nav-drop-name::after {
  content: "いまご覧のページ";
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 1px 7px;
  vertical-align: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop-panel,
  .nav-drop-trigger svg {
    transition: none;
  }
}

/* ── 狭い画面のメニュー（`<details>`。JS 無しで開閉する）─────
   1080px 以下では上のナビが畳まれるので、**そこから先はこのメニューが
   唯一のページ内の移動手段**になる（畳む前は「フッターまで落ちるしか
   ない」状態だった）。

   **開閉に JS を使わない。** `<details>` の素の動きに乗せる——開閉が
   スクリプト頼みだと、読み込みに失敗した画面ではナビへ行く手段が
   1 つも無くなる。ページ側の JS がやるのは「行き先を押したら閉じる」
   「外を押したら閉じる」だけで、無くても使える。

   **中身は上のナビと同じ並び**（同じ飛び先・同じ名前・同じ順）。
   2 箇所に書くことになるので、ずれはテストで止める
   （`test_lp_service_pages.py` / `test_lp_consulting.py`）。 */

.nav-menu {
  display: none;
  position: relative;
  margin-left: auto;
}

/* 三角（`::marker`）を消す。Safari は `::-webkit-details-marker`。 */
.nav-menu-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--body);
  cursor: pointer;
  list-style: none;
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast);
}

.nav-menu-btn::-webkit-details-marker {
  display: none;
}

.nav-menu-btn:hover,
.nav-menu[open] .nav-menu-btn {
  background: var(--bg-card);
  border-color: var(--line2);
  color: var(--ink);
}

/* 開いているあいだは「×」に差し替える（同じボタンで閉じられることを、
   押す前に分かるようにする）。 */
.nav-menu[open] .nav-menu-bars {
  display: none;
}

.nav-menu-x {
  display: none;
}

.nav-menu[open] .nav-menu-x {
  display: block;
}

/* **外側に影を落としてよい数少ない場所**（浮いている面なので、
   ボーダーだけだと下の本文と地続きに見える）。 */
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: max(220px, min(260px, calc(100vw - 32px)));
  display: grid;
  gap: 2px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
}

.nav-menu-panel a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--r);
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
}

.nav-menu-panel a:hover {
  background: var(--bg-card);
  color: var(--ink);
  text-decoration: none;
}

/* ナビが畳まれる幅から出す（畳まれていない幅に出すと、同じ行き先が
   2 つ並ぶ）。 */
@media (max-width: 1080px) {
  .nav-menu {
    display: block;
  }
}

/* 下の固定 CTA が出る幅では、ヘッダーの同じボタンを畳む
   ——同じ「無料で相談する」が 1 画面に 3 つ（ヘッダー・ヒーロー・
   下のバー）並ぶので、いちばん押しにくい 1 つを消す。 */
@media (max-width: 720px) {
  .header-cta .btn {
    display: none;
  }
}

/* ── セクション共通 ─────────────────────────────────────── */

/* **節の区切りは余白**。画面が広いほど広く取る（linear.app は 1440px で
   およそ 160px）。狭い画面では 96px より詰めない——ここを詰めると、
   見出しが前の節の本文の続きに見える。 */
.section {
  padding: clamp(96px, 10vw, 160px) 0;
}

/* **地色は塗り分けない**（上のコメント）。`.section-alt` が持つのは
   1px の上ヘアラインだけで、これが節の切れ目になる。 */
.section-alt {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

/* 章ヘッダ。**左に見出し・右に説明文の 2 段組**（linear.app の章と同じ）。
   中央寄せは `.section-head-center`（料金だけ）。

   **左側だけを 1 つの要素にまとめてある**（`.section-head-main`）——
   眉・見出し・説明文を直に置くと、眉を持たない節（`#cycle`）で見出しだけが
   1 行ぶん下がる。 */
/* **左の段は右より広く取る。** 和文の見出しは 1 文字が全角で、44px なら
   13 文字で 570px を超える——半々に割ると `<br />` で決めた折り返し位置の
   手前で勝手に折れて、「広告運用に必要 / なすべてを、」のように語の
   途中で割れる（欧文の見出しなら半々で足りる。ここは真似しない）。 */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 20px 64px;
  align-items: start;
  margin: 0 0 clamp(40px, 4.4vw, 64px);
}

.section-head-main {
  max-width: 100%;
}

.eyebrow {
  display: inline-block;
  color: var(--b700);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* 節見出し。**左寄せ**（中央寄せは料金と締めの CTA だけ）。 */
h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.3;
}

/* 見出しの直後の 1 行。**見出しは `--ink`、こちらは `--muted`** の 2 トーンで
   組む（`--bg` 上 6.1:1 で AA。`--faint` にはしない）。 */
.section-sub {
  margin-top: 0;
  color: var(--muted);
  font-size: 15.5px;
  max-width: 42em;
  text-wrap: balance; /* `.hero-lead` と同じ理由 */
}

/* 中央寄せの章ヘッダ。**増やさない**——ページの中に視線の起点が 2 つできる。 */
.section-head-center {
  display: block;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.section-head-center .section-head-main {
  max-width: none;
}

.section-head-center .section-sub {
  margin: 18px auto 0;
}

.accent {
  color: var(--b700);
}

/* 狭い画面では 2 段組を畳む（説明文が見出しの下へ回る）。 */
@media (max-width: 860px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .section-head-main {
    max-width: none;
  }
}

/* ── ヒーロー ───────────────────────────────────────────── */
/* **2 段組にしない**（v2）。左寄せの文（`.hero-copy`）→ 全幅のウィンドウ
   （`.hero-shot`）の縦 1 本。

   **背景に画像を敷かない**（v3）。暗地用の `hero-aurora.webp` は白地では
   ただの薄汚れにしかならないので廃止した。地は `--bg`（白）のままで、
   **`--b-tint` の radial を 1 箇所だけ**——ページの隅にごく淡い青を置くのは
   linear.app と同じ作法だが、白地では濃度を上げた瞬間に「色の付いた帯」に
   見えるので、ここより濃くしない。

   **ここを動かさない**（v4 で 2 枚に増やして漂わせたが、v4.2 で戻した）。
   全面のワッシュは形そのものが「画面の周りの広がり」なので、`transform` で
   拡大・移動させると**動いている最中は別の絵**になる——止まった状態が
   元と同じでも、見ている人には「グラデーションが変わった」としか映らない
   （2026-09-03 に指摘された）。動きは前景（文・カード・ロゴ帯）で作り、
   **地は動かさない。** */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  padding: clamp(64px, 8vw, 112px) 0 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    120% 90% at 78% 0%,
    var(--b-tint) 0%,
    rgba(37, 99, 235, 0) 62%
  );
}

/* 文のかたまり。**1 行の長さで上限を決める**（68 文字を超えると、
   次の行の頭を探すのに目が戻る）。 */
.hero-copy {
  max-width: 680px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  box-shadow: var(--sh-ring);
  color: var(--muted);
  border-radius: var(--pill);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
}

.hero-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--b600);
}

/* サービス名。**消さない・小さくしすぎない**——OAuth 同意画面のブランド確認は
   ホームページでの名乗りを見る（markup 上は変わらずページ唯一の h1 で、
   本文の最初に読まれる見出し）。

   **v2 で「いちばん大きい文字」の座はタグラインへ渡した。** 名前は
   ページの中で 3 箇所（ヘッダーのロゴ・この h1・リード文）に出るのに対し、
   初めて開いた人が 1 秒で受け取るべきなのは「何をしてくれるのか」のほう。
   ここは眉のすぐ下に置く**名乗りの行**として組む。 */
.hero h1 {
  margin-top: 20px;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.4;
}

/* **`nowrap` を外さない。** 外すと「（SNS アカウント運 / 用）」のように
   括弧の途中で折り返す。 */
.h1-jp {
  font-size: 0.62em;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  margin-left: 6px;
}

/* **このページで一番強い言葉。** 最初の 1 秒で伝わってほしいのは製品名
   ではなく「伝えれば、ぜんぶやってくれる」のほう（25px だった頃は、
   すぐ下のリード文と同じ高さに見えてただの説明文に読めた）。

   和文の見出しなので**字送りは -0.015em まで**（`palt` 併用）。
   2 行に割るのは `<br />` なので、大きくしても折り返し位置は変わらない。 */
.hero-tagline {
  margin-top: 10px;
  color: var(--ink);
  /* **上限は「いちばん長い行が段（680px）に収まる大きさ」。**
     12 全角（「完全自動広告運用システム」）が `palt` 込みで収まるのが
     この値までで、ここを上げると 2 行目の最後の 1 文字だけが 3 行目へ
     落ちる（2026-09-02 に本番で発生）。**上げるなら実測してから。** */
  font-size: clamp(22px, 6.2vw, 56px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* 12 全角を超える行を持つページだけ 1 段下げる（14 全角の
   「完全自動マーケティングシステム」が 680px に収まる上限 = 48px）。
   **付け外しは生成側**（`make_lp_service_pages.hero()` が行の長さで判定）。 */
.hero-tagline--long {
  font-size: clamp(22px, 5.3vw, 48px);
}

/* **1 行 = 1 つの `<span>` で、行の中では折り返さない。**
   `<br />` だけだと「行の区切り」は決まっても「行の中で折れない」ことは
   保証されない——段より長ければ語の途中で折れる。 */
.hero-tagline span {
  display: inline-block;
  white-space: nowrap;
}

/* リードは 2 本。**1 本目だけ 1 段大きい**——ここまでが「何のサービスか」で、
   2 本目（承認の約束）は但し書きとして読まれてよい。
   **`:first-of-type` で書かない**——`.hero-copy` の中の最初の `<p>` は
   バッジなので、1 つも当たらない（隣接の `+` で 2 本目を指す）。 */
.hero-lead {
  margin-top: 22px;
  font-size: 17px;
  color: var(--body);
  /* 2 行に折れるとき、行の長さを揃える。放っておくと段の幅しだいで
     最後の 1 文字（「…サービスで｜す」）だけが次の行に落ちる
     （2026-09-02 に本番で発生）。`balance` は Chrome / Safari / Firefox
     とも対応済みで、非対応なら何も起きない。 */
  text-wrap: balance;
}

.hero-lead + .hero-lead {
  margin-top: 14px;
  font-size: 15px;
}

/* 強調は太さではなく色で付ける（700 は読み込んでいない）。 */
.hero-lead strong {
  color: var(--ink);
  font-weight: 500;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* 「ご招待制です」。**`--faint` にしない**（`--bg` 上で 3.45:1 = AA 落ち）。
   小さく添える注記だが、押す前に読めないと期待が食い違う種類の情報で、
   しかも読めなかった人には**読めていないことが分からない**。 */
.hero-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted);
}


/* ヒーローの画面（`scripts/make_lp_hero.py` が書き出す SVG）。**全幅で置く。**

   **枠も地色も CSS では持たない。** SVG 自身が 1px の枠（#e2e8f0）と
   角丸（`rx="14"`）と地（#f4f5f9）を描いているので、ここで囲うと
   二重の枠になる。角丸だけ SVG に合わせるのは、**影の縁を絵に描いてある
   角へ合わせる**ため（12px にすると角の外側 2px に影が四角く残る）。
   高さは幅から決まる（`width`/`height` を書いてあるので、読み込む前から
   場所が取られて本文が動かない）。

   **下端はページへ溶かす**（`mask-image`）。画面は下へ続いているもの
   なので、底で切って枠を閉じると「小さな 1 枚の絵」になる。
   `mask-image` に対応しないブラウザでは**枠の付いた画面がそのまま出る**
   ——欠けるのは効果だけで、読めるものは減らない。

   **白地では影で浮かせる**（`--sh-float`）。ヘアラインだけだと、白い框が
   白い地に溶けて「画面が置いてある」感じが出ない。**影を使ってよいのは
   浮いているものだけ**なので、並ぶカードへここから真似して広げない。 */
.hero-shot {
  position: relative;
  margin-top: clamp(48px, 6vw, 76px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sh-float);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}

.hero-art {
  display: block;
  width: 100%;
  height: auto;
}

/* 狭い画面ではボタンの幅がばらつくと押しにくいので縦積みで揃える */
@media (max-width: 520px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* ── ウィンドウの框（画面と図をここに載せる）───────────────── */
/* **上バー（信号 3 点）+ 1px のヘアライン + r12** の 1 部品。
   いまこれを使うのは `#integrations` の管理画面だけ（ヒーローとコラージュは
   框を持たず、画面の SVG 自身が chrome を描いている）。

   **白地では影で浮かせる**（`--sh-float`）——白い框が白い地に溶けると、
   画面が「置いてある」ようには見えない。**並んでいるカードへ広げない。**

   信号の点は `--faint`（装飾専用の色）。**白地ではここが 3:1 を割っても
   框であることは読める**——上バーの地（`--bg-raise`）と下端の 1px が
   すでに「窓の縁」を作っているので、点はその上の飾り。暗地では点が
   唯一の手がかりだったので、そこだけ事情が違う。 */
.window-frame {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-float);
}

.window-bar {
  height: 38px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding-left: 16px;
}

/* 点 3 つを 1 要素で描く（markup を増やさない）。 */
.window-bar::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  box-shadow:
    14px 0 0 var(--faint),
    28px 0 0 var(--faint);
}

/* 框の中の画像は框いっぱいに。**上バーの下から始まる**ので、
   角丸は親の `overflow: hidden` に任せる。 */
.window-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* 連携チップ。ヒーローの下いっぱいに 1 行で敷く（左の段に入れると
   件数の多いページで何行にも割れる）。
   **企業ロゴの帯は作らない**（顧客ではないし商標。ここはつなげる先の名前）。 */
.logos {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding: 34px 0 40px;
  display: grid;
  gap: 16px;
  justify-items: center;
}

/* 下のチップ列が何の一覧なのかを言う唯一の行。`--faint` では 3.45:1 で
   読めず、読めないと連携ロゴが「取引先の帯」に見える（そう読まれないために
   置いた行なので、薄くする意味がない）。 */
.logos-title {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* **ピルの地を外した**（v2）。11 個の淡い面が横一列に並ぶと、そこだけ
   ボタンの列に見えて押したくなる——ここは押せないただの名前なので、
   マークと文字だけを並べる（linear.app のロゴ列と同じ）。
   面が無くなったぶん、間隔で 1 件ずつを切る。

   **流れる帯（マーキー）にしない**（v4 で入れて v4.2 で戻した）。1 行に
   伸ばして等間隔に配ると**止まった状態の並びまで変わる**——ここは
   「つなげる先の名前」を読ませる場所なので、見た目は元の中央寄せのまま、
   動きは前景（文・カード）で作る。 */
.logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.logo-chip svg {
  color: var(--b600);
  flex: none;
}

/* サービスのマークは**各社の公式ロゴをそのまま置く**（`img/logos/`）。
   縦横比が社ごとに違う（Meta は横長・TikTok は縦長）ので、正方形の枠に
   `contain` で収める——`width`/`height` を素直に効かせると横長のロゴだけ
   潰れて別物に見える。

   **白い下地の円は要らない**（v3）。暗地で Notion と TikTok の黒い形が
   沈むのを避けるために敷いていたもので、白地ではそのまま見える
   ——**ロゴ自体は改変しない**（商標）ので、余計な装飾は載せないほうがよい。 */
.brand-mark {
  flex: none;
  object-fit: contain;
}

/* ── 画面のモックの「※」と、ページ下端の注記 ────────────────
   **印は包みの側に置く。** 画面もコラージュも `mask-image` で端を
   フェードさせている（コラージュは `overflow: hidden` でも切る）ので、
   中に入れた印は一緒に薄くなるか切り取られて消える。

   **`--muted` にする**（`--faint` にしない）。装飾の扱いだが、
   これが見えないと下端の注記がどの画像を指しているのか分からない
   ——見えない印は、無いのと同じ。 */

.shot-marked {
  position: relative;
}

.shot-mark {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  /* 白い框の上でも、はみ出したボードの上でも読めるように、地を
     ごく薄く敷く（印そのものは 1 文字しかないので、囲いは付けない）。 */
  background: rgba(255, 255, 255, 0.82);
  border-radius: var(--pill);
  padding: 3px 5px;
}

/* 「つなげる先」の管理画面だけ框が小さいので、印も内側へ寄せる。 */
.monitor .shot-mark {
  top: 6px;
  right: 6px;
  font-size: 12px;
}

/* 注記の本文。**ページに 1 つだけ**（`#contact` の下・フッターの直前）。
   小さく添える文なので `--faint` を選びたくなるが、読めなかった人には
   読めていないことが分からない——`--muted`（白地 4.76:1）で止める。 */
.shot-disclaimer {
  margin-top: clamp(28px, 3vw, 44px);
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.8;
}

/* ── 声明 + FIG カード（`#statement`）────────────────────── */
/* **2 トーンの大ステートメント。** 段落の中で `<strong>` だけが `--ink`、
   続きは `--muted`——span を本文に差し込まず、いま在る 2 つの要素の
   色分けだけで出す（linear.app の声明と同じ）。

   **`h2` にしない**（markup 側も `<p>`）。ここは節の題ではなくページの
   主張そのもので、見出しにすると目次の階層が 1 つ増えるだけ。 */

.statement {
  max-width: 22em;
  color: var(--muted);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

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

/* FIG カード 3 枚。**面を張らない。** 区切りは列と列のあいだの 1px だけ
   ——白地でカードを 3 枚並べると、声明のすぐ下にもう 1 つの節が始まった
   ように見える。 */
.figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(56px, 6vw, 96px);
}

.fig {
  padding: 0 clamp(20px, 2.4vw, 34px);
  border-left: 1px solid var(--line);
}

.fig:first-child {
  padding-left: 0;
  border-left: 0;
}

/* 通し番号。**装飾なので `--faint`**（隣に題と本文が必ず並ぶ）。
   **和文なので字送りは開けない**——`FIG 0.1` の頃は mono + 0.08em で
   図面のラベルらしく見せていたが、同じ量を和文に掛けると
   「特 徴 1」と間延びして、ラベルではなく短い見出しに見える。 */
.fig-no {
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* 絵の置き場。**縦を固定しない**——画像は元の比で伸びる。
   絵は codex 生成のフラットイラスト（白地の正方形 webp）。カードの地も
   白なので縁は出ないが、正方形 720px を素の大きさで置くと縦を食うので
   240px に絞る。3 枚とも同じ枠に入れて高さを揃える。 */
.fig-art {
  margin: clamp(24px, 3vw, 44px) 0;
  display: grid;
  place-items: center;
}

.fig-art img {
  display: block;
  width: min(100%, 240px);
  height: auto;
}

/* 特徴3 のサイクル図だけ、工程名のラベルを絵の上に重ねる
   （生成画像に文字は焼けない——崩れる。位置は絵の中のノードと 1:1 なので、
   **絵を差し替えたらここも見直す**。ラベルは読ませる文字なので --body）。 */
.fig-art-cycle {
  position: relative;
}

.cycle-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--body);
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
}

/* 位置は画像の % 座標（正方形。ノード: 上・右・下・左の 4 隅）。
   ラベルは各ノードの**中心側**に置く——外側だと絵の枠から出る。 */
.cycle-label-top {
  left: 50%;
  top: 33%;
}

.cycle-label-right {
  left: 82%;
  top: 65%;
}

.cycle-label-bottom {
  left: 50%;
  top: 97%;
}

.cycle-label-left {
  left: 18%;
  top: 65%;
}

.fig h3 {
  font-size: 15px;
}

.fig p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.8;
}

@media (max-width: 760px) {
  .statement {
    max-width: none;
  }

  /* 縦積み。区切りは**上のヘアライン**に変える（左の線は縦積みでは
     何も割っていない飾りになる）。 */
  .figs {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .fig {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .fig:first-child {
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }

  .fig-art img {
    width: min(100%, 200px);
  }
}

/* ── 章のコラージュ（`#can` / `#cycle`）────────────────────
   **面の重なりで見せる。** 背面に大きなボードを置いて**右端から画面の外へ
   はみ出させ**、前面に小さなカードを影で浮かせる（linear.app の章と同じ）。

   **背面を枠に収めない。** 収めた瞬間に「小さくて読めない 1 枚の絵」に
   なる——切れているものは続きがあるものとして読まれる、という理由は
   ヒーローの下端フェードと同じ。左右の端は `mask-image` で地へ溶かす。

   高さは幅から決める（`clamp`）。中の画像は `object-fit` ではなく素の
   大きさで置き、はみ出したぶんを `overflow: hidden` が切る——縮めると
   ボードの文字が読めなくなり、読める密度がこの型の本体なので。 */

.collage {
  position: relative;
  height: clamp(480px, 46vw, 640px);
  margin-top: clamp(40px, 4.4vw, 64px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 5%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 88%, transparent 100%);
}

/* 背面のボード。**右へはみ出す**ので `right` は負。

   **枠も角丸も付けない。** SVG 側は角丸なしの全面塗り（#f4f5f9）で
   書き出してあり、端は CSS のフェードで地へ溶かす前提
   ——ここで囲うと、はみ出しているはずのボードが「1 枚の絵」に戻る。
   下端も同じ理由でフェードさせる（親の横方向のフェードと合成すると
   ブラウザ差が出るので、**縦は画像自身に掛ける**）。 */
/* **はみ出す量 = 幅 − 100%。** そう置くと反対側の端がちょうど段の端に
   揃う（`width: 104%` / `right: -14%` のように別々に決めていた頃は、
   反対側に 10% ぶんの白い帯が残っていた）。反転した章も同じ関係で、
   `left` に付け替えるだけ。 */
.collage-back {
  position: absolute;
  top: 0;
  right: -14%;
  width: 114%;
  max-width: none;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

/* 前面のカード。**白地では影で浮かせる**（ヘアラインだけだと白い面が
   白い地に溶ける）。

   **枠は付けない**——SVG が自分で 1px の枠を描いている（二重になる）。
   角丸だけ SVG の `rx`（14）に合わせる: **角丸の語彙を増やしたのではなく、
   絵に描いてある角に影の縁を合わせている**（12px にすると角の外側 2px に
   影が四角く残る）。 */
.collage-front {
  position: absolute;
  left: 0;
  top: 6%;
  width: min(42%, 520px);
  height: auto;
  border-radius: 14px;
  box-shadow: var(--sh-float);
}

/* **左右を返した章**（`#planning`）。背面が左へはみ出し、前面が右に浮く。
   章が 3 つ続くので、向きを変えないと下へ行くほど「同じ絵が並んでいる」
   ように見える（手本の linear.app も章ごとに重なりの向きを変えている）。
   フェードの向きも一緒に返す——返さないと、はみ出している側の端が
   切りっぱなしで残る。 */
.collage-flip {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 95%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 95%, transparent 100%);
}

.collage-flip .collage-back {
  right: auto;
  left: -14%;
}

.collage-flip .collage-front {
  left: auto;
  right: 0;
}

/* 中間。**背面を拡大する**——幅そのままで縮めると、ボードの中の文字が
   読めなくなるうえ、框の高さ（`.collage` の `height`）に画像が届かず
   下に白い帯が残る。はみ出す量が増えるぶん、見える列は減る。 */
@media (max-width: 980px) {
  .collage {
    height: clamp(400px, 58vw, 560px);
  }

  .collage-back {
    right: -26%;
    width: 126%;
  }

  .collage-flip .collage-back {
    right: auto;
    left: -26%;
  }

  .collage-front {
    width: min(58%, 420px);
    top: 8%;
  }
}

/* 狭い画面。**横スクロールは絶対に出さない。** 背面は 6 割ほどを右に
   残すだけにして、前面のカードを主役にする（画面の幅で読めるのは
   1 枚ぶんしかない）。 */
@media (max-width: 640px) {
  .collage {
    height: clamp(380px, 96vw, 460px);
  }

  .collage-back {
    right: -90%;
    width: 190%;
    top: 2%;
  }

  .collage-flip .collage-back {
    right: auto;
    left: -90%;
  }

  .collage-front {
    width: min(92%, 360px);
    top: 12%;
  }
}

/* ── 章の末尾の機能行 ─────────────────────────────────────
   `機能` のラベル + `機能名 +` の 2 カラム（linear.app の章の下端と同じ）。
   **押すとその場で開く**（`<details>`。JS は使わない。FAQ と同じ流儀）。

   **リンクに見せない。** ほかのページへ飛ばさないので、hover で下線も
   青も出さない——押せることは `+` と cursor だけで示す。 */

.feature-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px 40px;
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.feature-links-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* **2 カラム。** 開いた項目のぶんだけ列が伸びる（`grid` ではなく
   `columns` にすると、開閉のたびに項目が列をまたいで飛び移る）。 */
.feature-links-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  align-content: start;
}

.feature-item {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}

/* 左の列は線を持たない（1 本目の線はラベルとの境になってしまう）。 */
.feature-item:nth-child(odd) {
  border-left: 0;
  padding-left: 0;
  padding-right: 24px;
}

.feature-item summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
  transition: color 0.16s ease;
}

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

.feature-item summary:hover {
  color: var(--ink);
}

/* 開閉の印。**`+` を 45 度回して × にする**（字を差し替えない）。
   `--muted`（白地 4.76:1）——これが見えないと、畳まれていること自体に
   気づけない。 */
/* **名前のすぐ隣に置く**（右端に飛ばさない）。手本（linear.app の章の
   下端）も名前の直後で、そのほうが「この語が開く」と読める。 */
.feature-item summary::after {
  content: "+";
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  transition: transform 0.16s ease;
}

.feature-item[open] summary::after {
  transform: rotate(45deg);
}

.feature-item[open] summary {
  color: var(--ink);
}

.feature-item > p {
  padding: 0 26px 14px 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  .feature-item summary::after {
    transition: none;
  }
}

@media (max-width: 860px) {
  .feature-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .feature-links-list {
    grid-template-columns: 1fr;
  }

  .feature-item,
  .feature-item:nth-child(odd) {
    border-left: 0;
    padding: 0;
  }
}

/* ── できること（`#can`）────────────────────────────────
   **カードグリッドは廃止した**（v3）。章ヘッダ → コラージュ → 機能リンク行の
   3 つ組で組む（規則は上の `.collage` / `.feature-links`）ので、この節に
   専用の指定は要らない。**`.can-grid` / `.can` / `.can-shot` を戻さない。**

   残っているのは `#usecases` のアイコンバッジだけ。 */

/* **真円 + ごく淡い青 + `--b700` の線画。影は付けない。**
   中の SVG は 24px・`fill="none"`・`stroke-width="1.5"` で統一
   （正本は `scripts/make_lp_service_pages.py`）。 */
.use-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--icon-badge-bg);
  color: var(--icon-stroke);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.use h3 {
  font-size: 17px;
}


/* ── つなげる先 ─────────────────────────────────────────── */
/* **横 4 ゾーン**（一覧 → ハブ → できること → 管理画面）。左から右へ
   読むと、そのままデータの流れになる。

   **高さは揃わない。揃えようとしない。** つなげる先の件数はサービスに
   よって 6〜10 件と開くので、`align-items: stretch` で引き伸ばすと
   件数の少ないページのカードが間延びする。`center` で上下中央に置き、
   低いほうには `min-height` を持たせて、6 件のページでも隣との差が
   目立たないところまで詰める。 */

/* **横 1 列の 4 ゾーン**（一覧 → ハブ → できること → 管理画面）。
   左から右がそのままデータの流れで、markup の順番と一致している
   ——読み上げの順も「どこから集めて、何をして、何ができて、どこへ出るか」。

   **管理画面を全幅で 1 段目に置く形（v2）へ戻さない。** あの形では
   `#can` / `#cycle` のコラージュと同じ迫力になり、章が 3 つ続いている
   ように見えた——この節の主役は 3 ゾーンのほうで、画面はその結び。

   **カンプは横長の帯**（およそ 4:1）。ゾーンを大きくすると縦に伸びて
   別物になる——文字も余白もここでは本文より一段小さく保つ。 */
.int-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr) minmax(0, 1.5fr)
    minmax(0, 0.86fr) minmax(0, 1.28fr);
  gap: 0 8px;
  align-items: center;
}

/* この節の見出しだけ長い（26 文字）。ほかの節と同じ 44px まで振ると
   左の段で 3 行に割れるので、1 段下げて 2 行に収める。 */
.int-h2 {
  font-size: clamp(25px, 2.9vw, 38px);
}

/* 両端のカード。**外側の影は持たない**（分離はヘアラインだけ）。 */
.int-card {
  align-self: center;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  padding: 16px 16px 14px;
}

.int-card-title {
  font-size: 12.5px;
  text-align: center;
  margin-bottom: 10px;
}

/* 左カードの行。**1 行 = カテゴリ 1 つ。区切り線を引かない**
   （カンプは線が無く、間隔だけで区切っている）。 */
.chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}

.chan-name {
  color: var(--body);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}

.chan-logos {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--b600);
  flex: none;
}

/* 左カードのマークは**左揃えで縦に通す**（右揃えにすると、行ごとの
   件数の差がそのまま左端のがたつきになり、ロゴの列に見えない）。 */
.int-card-channels .chan-logos {
  flex: 0 0 44%;
  justify-content: flex-start;
}

/* つなげる先ごとの明細（畳んである）。**帯の高さに響かせない**ための置き場。 */
.int-detail {
  max-width: 760px;
  margin: 18px auto 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  background: var(--bg-card);
}

.int-detail > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--b700);
}

.int-detail-body {
  padding: 0 16px 12px;
}

.int-detail .chan {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.int-detail .chan-group .chan:first-of-type {
  border-top: 0;
}

.int-detail .chan-name {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

/* ② 中央のハブ */
.int-hub {
  align-self: center;
}

.hub {
  margin: 0;
  text-align: center;
}

.hub-ring {
  width: 100%;
}

.hub-ring svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ハブ図の SVG は 4 枚の HTML に直接埋まっている（正本は
   `scripts/make_lp_service_pages.py` の `hub_svg`）。**白地前提で描いてある**
   ので、v2 で足していた暗地用の上書き（円の地・文字色）は外した
   ——白いキャンバスでは svg のままが正しい。点線だけ、白地では
   薄すぎるので濃度を上げる。 */
.hub-fan {
  stroke: rgba(37, 99, 235, 0.5);
}

.hub figcaption {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--b700);
}

/* ③ ひとつの画面で完結 */
.int-checks {
  display: grid;
  gap: 18px;
}

.int-checks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.65;
}

/* **`--ok` は状態表示だけ**（チェック済みの印）。 */
.int-checks svg {
  color: var(--ok);
  flex: none;
  margin-top: 2px;
}

.int-checks strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
}

.int-checks li > span > span {
  display: block;
  font-size: 12px;
  color: var(--body);
  line-height: 1.65;
}

/* ④ 管理画面。**ハブと同じくキャプションを付ける**——図が 2 つ出るのに
   片方だけ無名だと、「何の画面か分からない絵」になる。

   **モニターの台座は外し、ウィンドウの框に載せた**（v2）。スタンドと台座は
   「離れて置いてある機械」の絵で、幅を取るわりに何も説明していなかった。

   **全幅では置かない**（v3 で v2 の全幅を取り消した）。置き場は
   「ひとつの画面で完結」の隣（4 ゾーンめ）で、幅は列に従う。 */
.monitor {
  margin: 0 auto;
  width: min(100%, 420px);
}

.monitor figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* 画面の下端はページへ溶かす（ヒーローと同じ作法）。 */
.monitor-screen {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
}

/* 許可の範囲。**節から消さない**——「つないだ瞬間に勝手に動く」と
   読まれる。カンプのサブコピーに差し替えたぶん、ここへ移してある。 */
.int-consent {
  margin-top: 34px;
  text-align: center;
  font-size: 13.5px;
  color: var(--body);
}

.int-note {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* 中間（3 ゾーン + 管理画面を下段へ）。カード｜ハブ｜カードの読み順は
   そのままで、管理画面だけ 2 段目へ落とす。 */
@media (max-width: 1180px) {
  .int-grid {
    grid-template-columns:
      minmax(0, 1.24fr) minmax(0, 0.8fr)
      minmax(0, 0.96fr);
  }

  .int-screen {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .monitor {
    width: min(100%, 460px);
  }
}

/* 縦 1 列。**点線コネクタは消す**——縦積みでは左右へ伸びる線が
   何も結んでいない（宙に浮いて見える）。 */
@media (max-width: 900px) {
  .int-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .int-card {
    min-height: 0;
    /* 1 列に畳んだときに 1 行が長くなりすぎないよう、読める幅で止める。 */
    max-width: 620px;
    margin-inline: auto;
    width: 100%;
  }

  .hub-ring {
    width: min(100%, 300px);
    margin-inline: auto;
  }

  .hub-ring::before,
  .hub-ring::after,
  .hub-link,
  .hub-fan {
    display: none;
  }
}

@media (max-width: 480px) {
  .int-card {
    padding: 20px 16px;
  }
}

/* ── 活用シーン ─────────────────────────────────────────── */

/* **面を持たないカード列**（linear.app の Changelog と同じリズム）。
   区切りは 1 枚ずつの上ヘアラインと、その左端に置く点だけ——3 枚が同じ形の
   面で並ぶと、読む前に「3 つある」ことだけが伝わってしまう。
   列の間は 16px ではなく広めに取る（線が 3 本並ぶので、近いと 1 本の
   長い線に見える）。 */
.use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.use {
  position: relative;
  padding: 26px 0 0;
  border-top: 1px solid var(--line2);
  display: flex;
  flex-direction: column;
}

/* 上ヘアラインの左端の点。**アイコンのバッジとは別の役割**——バッジは
   「何の話か」、点は「ここから 1 件」の印で、大きさも位置も重ならない。 */
.use::before {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--b600);
}

.use-lead {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.8;
}

/* Before → After。**図は置かない**——3 枚とも同じ形の模式図を並べると、
   絵の違いを探させるだけで意味は文にしか無い（残す図は運用サイクルの
   1 枚だけ、という方針とも揃う）。 */
.ba {
  margin-top: auto;
  padding-top: 20px;
}

.ba-before,
.ba-after {
  font-size: 12.5px;
  line-height: 1.75;
}

.ba-before {
  color: var(--muted);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

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

.ba-before span,
.ba-after span {
  display: inline-block;
  margin-right: 8px;
  border-radius: var(--r);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

.ba-before span {
  background: var(--bg-raise);
  color: var(--muted);
}

.ba-after span {
  background: rgba(37, 99, 235, 0.14);
  color: var(--b700);
}

/* 面を外したので**左端に寄せる**（中央に置くと、囲いの無いカードでは
   何の中心なのか分からない矢印になる）。

   **回すのは中の svg だけ。** 箱ごと 90 度回すと、箱の中心を軸に回るので
   左端に寄せた矢印が段のまん中まで飛ぶ（`justify-content: center` の
   ときだけ、たまたま元の位置に戻っていた）。 */
.ba-arrow {
  display: flex;
  justify-content: flex-start;
  color: var(--b600);
  padding: 8px 0;
}

/* 右向きの矢印を下向きに使う（画像を増やさない） */
.ba-arrow svg {
  transform: rotate(90deg);
}

@media (max-width: 980px) {
  .use-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-inline: auto;
  }

  .ba {
    margin-top: 0;
  }
}

/* ── 料金。**具体額は書かない**（決まった正本が無い）───────── */
/* 絵を外したので、費用の構造を 1 枚のカードにまとめてある。 */

.price-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  padding: 44px 40px;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.price-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}

.price-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-raise);
  border-radius: var(--r);
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  line-height: 1.7;
}

.price-points svg {
  color: var(--ok);
  flex: none;
  margin-top: 4px;
}

.price-note {
  margin-top: 28px;
  font-size: 14px;
  color: var(--muted);
}

.price-card .btn {
  margin-top: 20px;
}

@media (max-width: 760px) {
  .price-card {
    padding: 28px 20px;
  }

  .price-points {
    grid-template-columns: 1fr;
  }
}

/* ── サービス切替カード ─────────────────────────────────── */

/* **列の数は並ぶカードの数と揃える。** いまは 3 枚（AllRev Agent / MCP /
   Consulting。正本は `scripts/make_lp_service_pages.py` の `SERVICES`）。
   4 列のままにすると最後の 1 列が空いて、**カードが 1 枚抜けたように見える**
   ——2026-09-22 に 4 サービスから 1 サービス + 2 つへ変えたときの取り残し。
   サービスを増減させたらここも直す。 */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.svc {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  padding: 24px;
  color: inherit;
  transition: box-shadow 0.16s ease;
}

a.svc:hover {
  box-shadow: var(--sh-ring-hover);
  text-decoration: none;
}

/* 「くわしく見る」の矢印だけ、hover でわずかに前へ出す。 */
.svc-go svg {
  transition: transform 0.16s ease;
}

a.svc:hover .svc-go svg {
  transform: translateX(3px);
}

.svc h3 {
  font-size: 17px;
}

.svc h3 span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}

.svc-one {
  margin-top: 12px;
  font-size: 13px;
  color: var(--body);
  line-height: 1.8;
}

.svc-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--b700);
  font-size: 13.5px;
  font-weight: 500;
}

.svc.is-current {
  background: var(--bg-raise);
  box-shadow: var(--sh-ring-hover);
}

.svc-now {
  display: inline-block;
  margin-bottom: 10px;
  background: rgba(37, 99, 235, 0.12);
  border-radius: var(--pill);
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--b700);
}

@media (max-width: 980px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

/* ── よくいただくご質問（JS 無しの <details>）──────────── */
/* **面を作らない。** 1 問 = 1 行のリストで、区切りは上下のヘアラインだけ
   （カードを 8 枚並べると、答えを読む前に面の数だけが目に入る）。 */

.faq {
  max-width: 880px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 46px 20px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

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

.faq-item summary::before {
  content: "Q";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.12);
  color: var(--b700);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

/* 開くか閉じるかを示す唯一の目印。**装飾ではないので `--faint` にしない**
   ——これが見えないと、答えが畳まれていること自体に気づけない
   （1.4.11 は 3:1 を求める。`--faint` は 3.45:1 で辛うじてだが、
   `--muted` なら 5.9:1 で余裕がある）。 */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 26px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item[open] summary {
  padding-bottom: 8px;
}

.faq-body {
  padding: 0 46px 22px 36px;
}

.faq-body p {
  font-size: 14px;
  color: var(--body);
}

@media (max-width: 560px) {
  .faq-item summary {
    padding: 16px 32px 16px 0;
    font-size: 14.5px;
  }

  .faq-body {
    padding: 0 0 18px 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

/* ── CTA バンド ─────────────────────────────────────────── */
/* **中央揃えの 1 枚。** 左右 2 段組 + 端末モックに作り替えない
   （一度試して戻した経緯がある）。
   青いグラデーションの塗りだった頃の名残で `.btn-white` /
   `.btn-ghost-white` が載っているが、面はほかのカードと同じ扱いにして、
   青は押せる 1 つだけに残す。 */

.cta-band {
  background: var(--bg);
  padding: clamp(96px, 10vw, 160px) 0;
}

.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 160% at 50% 100%, var(--b-tint) 0%, rgba(37, 99, 235, 0) 62%),
    var(--bg-card);
  box-shadow: var(--sh-ring);
  padding: 64px 40px;
  text-align: center;
}

/* 飾りの円。**画像を増やさない**ための擬似要素。振幅も濃さも
   「気づかれない」ところで止める（目で追わせる動きにしない）。 */
.cta-panel::before,
.cta-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--b-tint);
}

.cta-panel::before {
  width: 260px;
  height: 260px;
  left: -70px;
  bottom: -120px;
}

.cta-panel::after {
  width: 340px;
  height: 340px;
  right: -110px;
  top: -150px;
}

/* **ページを締める 1 文なので、節見出しより大きい。** 中央寄せを許すのは
   ここと料金だけ（1 行で言い切る見出しには効く）。 */
.cta-panel h2 {
  position: relative;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.25;
}

.cta-panel p {
  position: relative;
  margin-top: 16px;
  color: var(--body);
  font-size: 15px;
}

.cta-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

@media (max-width: 640px) {
  .cta-band {
    padding: 64px 0;
  }

  .cta-panel {
    padding: 40px 22px;
  }

  .cta-actions .btn {
    width: 100%;
  }
}

/* ── 資料請求フォーム ───────────────────────────────────── */
/* **背景に画像を敷かない**（v3。暗地用の `cta-glow.webp` は廃止した）。
   地は `--bg`（節ごとの塗り分けはやめた。`.section-alt` が持つのは上の
   ヘアラインだけ）で、**`--b-tint` の radial を 1 箇所だけ**——ヒーローと
   同じ濃度に揃える（ページの上下で色の強さが違うと、下だけ別のサイトに見える）。 */

#contact {
  position: relative;
  isolation: isolate;
  background: var(--bg);
}

#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    100% 80% at 50% 100%,
    var(--b-tint) 0%,
    rgba(37, 99, 235, 0) 62%
  );
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-points {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.contact-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  line-height: 1.75;
}

.contact-points svg {
  color: var(--ok);
  flex: none;
  margin-top: 5px;
}

.form-card {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  padding: 32px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--body);
}

.req {
  background: rgba(37, 99, 235, 0.12);
  color: var(--b700);
  border-radius: var(--r-sm);
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 500;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: var(--bg);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}

.field textarea {
  resize: vertical;
}

/* **枠を 2px 広げない**（`box-shadow` のリングを足すと、入力欄の高さが
   変わったように見えて行が跳ねる）。色だけで示す。 */
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--b600);
}

/* 送信結果。**成功だけを目立たせない**——失敗も同じ場所に同じ大きさで出す。 */
.form-note {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
  min-height: 1px;
}

.form-note--ok {
  color: var(--ok);
}

.form-note--error {
  color: var(--warn);
}

.form-fine {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.8;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .form-card {
    padding: 24px 20px;
  }
}

/* ── フッター ───────────────────────────────────────────── */
/* **さらに黒い面を作らない。** 全ページが暗地なので、締めるのは
   地色ではなく `--line2` の 1px（濃紺のフッターへ戻さない）。 */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line2);
  color: var(--muted);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px;
}

.site-footer .logo {
  color: var(--ink);
}

.footer-col h3 {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  font-size: 13px;
  color: var(--muted);
}

.footer-col a:hover {
  color: var(--body);
}

.footer-bottom {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 12.5px;
  color: var(--muted);
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-bottom a {
  color: var(--muted);
}

.footer-bottom a:hover {
  color: var(--body);
}

@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .footer-about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 狭い画面の固定 CTA ─────────────────────────────────── */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: none;
}

@media (max-width: 720px) {
  .sticky-cta {
    display: block;
  }

  .sticky-cta[hidden] {
    display: none;
  }

  body {
    padding-bottom: 76px;
  }
}

/* ── 動き ───────────────────────────────────────────────────
   **本文は JS 無しで全部見える**（このファイル冒頭の方針どおり）。3 層で付ける:

   ① 読み込み時: ヒーローを段階的に登場させる。**行が 1 本ずつ下から
      せり上がる**（`line-rise`。h1 → タグライン 2 行 → リード）→ 遅れて
      ウィンドウ（`window-in`）→ ロゴ帯。
   ② スクロール時: 節の中身を、視界に入るのに合わせて起こす
      （IntersectionObserver + transition。**時間で再生する**）。
      **ヘッダーの下線だけは位置に紐づける**（`scroll()`。戻せば戻る）。
   ③ 常時: ハブ図の点線を流す・バッジの点を脈打たせる・CTA の飾り円を
      ゆっくり漂わせる。**目で追わせる動きにしない**（読む邪魔をしない振幅）。

   **v4（2026-09-03）で全体に振れ幅を上げた。** 指示は「もっと大胆な動きに」で、
   参照はコーポレートサイト（tripclear.jp）のトップ。**上げたのは距離・段差・
   常時の要素数だけ**で、下の規則は 1 つも緩めていない
   ——動かすのは transform と opacity（と、ヒーローの行だけ clip-path と
   blur）／ease-in を使わない／数字はアニメーションさせない／
   **hover では要素を動かさない**（ロゴ帯の hover は「止める」ので、
   位置も大きさも変わらない）。

   **距離と曲線は 3 段階 + 1 組の曲線**（`--rise` 44px / `--rise-screen` 60px /
   `--rise-bold` 76px、`--t-reveal` 0.9s、`--ease-out`）。文・カードは
   `--rise`、面積の大きい「画面」（ヒーローのウィンドウ・コラージュの前面
   カード）は `window-in`（`--rise-screen` + 0.94 → 1 の拡大）、
   **章の入口（`.section-head` / `.statement`）だけ `rise-bold`**
   ——章の切り替わりがカード 1 枚と同じ出方だと、ページが「節の連なり」に
   読めない。**回転は付けない**（linear.app に無い。v4 で足したのは
   視差 1 箇所 = ヒーローの画面だけ）。

   **動かない環境で本文が消えないこと**が絶対条件:
   - ①のキーフレームは隠すのが from 側と fill だけで、**素の状態は常に見える**。
     fill は `backwards` だけにする——`both` にすると通過後もアニメーションが
     transform を握り続ける（アニメーションはカスケードで hover より強い）。
   - ②が隠す規則は **`<html class="js-reveal">` の下にしか書かない**
     ——この印は JS が「動かせると確かめてから」付けるので、JS を切った
     ブラウザとクローラには素の状態（全部見える）しか届かない。
     **素の状態を `opacity: 0` にして JS で外す形にはしない**——それが、
     JS を切った相手に本文が 1 行も出ない、いちばん避けたい壊れ方
     （しかもこちらの画面では絶対に再現しない）。
   - `prefers-reduced-motion: reduce` では①③をまとめて止める
     （②は no-preference の中にしか書かない。JS 側も同じ条件で降りる）。

   **効いているかどうかは体感でも「中間値が出たか」でも確かめない。**
   位置に紐づいていた頃は、計測スクリプトが 1 コマずつ送ると中間値が出て
   **効いているように見えた**が、実際のフリック 1 回では 150ms で
   終わり切っていた（2026-09-03）。測るのは
   **「視界に入ってから何 ms かけて出終わるか」**
   （`scripts/measure_lp_motion.py`。一度に送ってから時間で追う）。 */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--rise)) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 章ヘッダ・声明だけ**もっと大きく振る**（v4）。章の切り替わりが
   カード 1 枚と同じ出方だと、ページが「節の連なり」に読めない。
   カードと同じ曲線・同じ時間で、距離だけ `--rise-bold`。
   **縮退（Firefox）側にも同じ距離を書いてある**——片方だけ大きくすると、
   ブラウザによって章の入り方が変わる。 */
@keyframes rise-bold {
  from {
    opacity: 0;
    transform: translateY(var(--rise-bold)) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ① ヒーローの登場。**文が先、画面があと。**
   読む順番と同じ順で出ることで、目の動きと画面の動きが揃う。
   `backwards` で遅延中も from 側（透明）に保つ。

   **v4 で「行がせり上がる」型にした**（コーポレートサイトの
   `intro-line-rise` と同じ構え）。かたまりごとに同時に出していた頃は、
   いちばん強い言葉（`.hero-tagline`）も他の行と同じ出方だった
   ——**1 行ずつ、下から、ぼけを解きながら**出ると、そこがページの主役だと
   読む前に分かる。

   マスクは **`clip-path` で要素ごとに掛ける**（`overflow: hidden` の親で
   まとめない）。`.hero-tagline` は 2 行が 1 要素の中にあるので、親で切ると
   1 行目が下がったぶんが 2 行目の位置に見えてしまう——`clip-path` は
   自分のボックスに効くので、行が互いを侵さない。
   終わりの値を負の inset（`-30% -12% -35% -12%`）にしてあるのは、
   `none` と `inset()` の間は補間できないため。**外側へ広げた inset は
   何も切らない**ので、見た目は `none` と同じで、止まった瞬間に
   ディセンダ（g・y の下）が欠けることもない。 */
@keyframes line-rise {
  from {
    opacity: 0;
    transform: translateY(0.58em);
    clip-path: inset(0 0 110% 0);
    filter: blur(7px);
  }

  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-30% -12% -35% -12%);
    filter: blur(0);
  }
}

.hero-badge,
.hero-actions,
.hero-note,
.logos {
  animation: rise-in var(--t-reveal) var(--ease-out) backwards;
}

/* 見出しと主役の 2 行、説明文は行のせり上がりで。**1 行ずつずらす。** */
.hero h1,
.hero-tagline span,
.hero-lead {
  animation: line-rise 1.05s var(--ease-out) backwards;
}

.hero h1 {
  animation-delay: 0.08s;
}

/* `.hero-tagline` の `<span>` は 1 行 = 1 つ（`<br />` で割ってある）。
   **2 行目のほうが強い言葉**（青いほう）なので、そこで一拍置く。 */
.hero-tagline span:first-child {
  animation-delay: 0.2s;
}

.hero-tagline span.accent {
  animation-delay: 0.34s;
}

.hero-lead {
  animation-delay: 0.5s;
}

.hero-lead + .hero-lead {
  animation-delay: 0.58s;
}

.hero-actions {
  animation-delay: 0.64s;
}

.hero-note {
  animation-delay: 0.72s;
}

/* ウィンドウだけ別のキーフレーム（**`--rise-screen` + わずかな拡大**）。
   画面は面積が大きいので、文と同じ距離では動いたことが分からない。
   拡大は 0.94 → 1 まで——これ以上かけると、止まったときに文字の
   にじみが見える（v4 で 0.97 から下げた。**ここが上限**）。 */
@keyframes window-in {
  from {
    opacity: 0;
    transform: translateY(var(--rise-screen)) scale(0.94);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hero-shot {
  animation: window-in 0.95s var(--ease-out) 0.46s backwards;
}

.logos {
  animation-delay: 0.86s;
}

/* ② 視界に入ったら起こす。**「時間」で再生する**（v4.1 = 2026-09-03）。

   **`animation-timeline: view()` は使わない。廃止した。復活させない。**
   あれは進行がスクロール**位置**に紐づくので、トラックパッドで一度
   フリックすると、その慣性の 100ms ほどで出現が終わり切る
   ——実測で `.use` の不透明度が 0.09 から 150ms 以内に 1（送った距離を
   600 / 1200 / 1800px と変えても同じ）。**「動いていない」のではなく
   「見る間が無い」**で、しかも計測スクリプトが 1 コマずつ送って測ると
   中間値が出るので**効いているように見えてしまう**（2026-09-03 に
   「全然静的」と指摘されて分かった）。

   代わりに **IntersectionObserver + transition**——視界に入ったことを
   検知したら、そこから `--t-reveal`（0.9s）かけて**時計の時間で**再生する。
   どれだけ速くスクロールしても再生時間は変わらない。参照した
   コーポレートサイト（tripclear.jp）のトップもこの作りで、あちらが
   動いて見えるのはここが理由。

   **位置に紐づけてよいのはヘッダーの下線だけ**（`scroll()`。戻せば戻る）。
   **ヒーローの画面に視差を掛けない**——`opacity` と `scale` で奥へ退がらせて
   みたが、送ると**画面の見本が白く飛び、縮んだぶん下に隙間が空く**
   （2026-09-03 に指摘された）。このページでいちばん見せたい絵なので、
   スクロール中も元のまま出しておく。

   **隠す規則は `<html class="js-reveal">` の下にしか書かない。**
   この印は JS が「動かせると確かめてから」付けるので、JS を切った
   ブラウザとクローラには素の状態（全部見える）しか届かない。
   **素の状態を `opacity: 0` にして JS で外す形にはしない**——それが、
   JS を切った相手に本文が 1 行も出ない、いちばん避けたい壊れ方
   （しかもこちらの画面では絶対に再現しない）。

   **対象の並びは JS 側の `REVEAL_SELECTOR` と同じ 1 本**
   （`scripts/make_lp_service_pages.py`。ずれは
   `tests/test_lp_service_pages.py` が止める）。JS は視界に入った要素に
   `is-in` を付けるだけで、**1 回きり**（戻っても消さない。
   IntersectionObserver は位置と結びつかないので、往復で明滅させると
   壊れて見える）。

   transition には hover で使う色・影も並べる——並べないと、ここで
   transition を上書きした要素だけ hover が瞬時に切り替わる。 */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal
    :is(
        .section-head,
        .statement,
        .fig,
        .feature-links,
        .int-card,
        .int-hub,
        .int-screen,
        .int-consent,
        .int-detail,
        .use,
        .price-card,
        .svc,
        .faq-item,
        .cta-panel,
        .contact-grid > *,
        .collage-back,
        .collage-front
    ) {
    transition:
      opacity var(--t-reveal) var(--ease-out),
      transform var(--t-reveal) var(--ease-out),
      border-color var(--t-fast),
      background-color var(--t-fast),
      box-shadow var(--t-fast),
      color var(--t-fast);
  }

  .js-reveal
    :is(
        .section-head,
        .statement,
        .fig,
        .feature-links,
        .int-card,
        .int-hub,
        .int-screen,
        .int-consent,
        .int-detail,
        .use,
        .price-card,
        .svc,
        .faq-item,
        .cta-panel,
        .contact-grid > *,
        .collage-back,
        .collage-front
    ):not(.is-in) {
    opacity: 0;
    transform: translateY(var(--rise)) scale(0.98);
  }

  /* 章の入口は距離を上げる（`rise-bold` にあたるぶん）。 */
  .js-reveal :is(.section-head, .statement):not(.is-in) {
    transform: translateY(var(--rise-bold)) scale(0.985);
  }

  /* 面積の大きい「画面」は、文と同じ距離では動いたことが分からない。
     **背面が先・前面があと**（面の重なりの順に出る）。 */
  .js-reveal .collage-front:not(.is-in) {
    transform: translateY(var(--rise-screen)) scale(0.94);
  }

  /* 並びの時間差。**時間で再生するようになったので、遅延がそのまま
     見える**（位置紐づけの頃は `animation-range` の終わりを何割ずらしても、
     速いスクロールでは全部同時に出ていた）。1 枚 130ms。 */
  .js-reveal :is(.use:nth-child(3n + 2), .fig:nth-child(2), .svc:nth-child(2), .int-hub, .collage-front) {
    transition-delay: 130ms;
  }

  .js-reveal
    :is(.use:nth-child(3n), .fig:nth-child(3), .svc:nth-child(3), .int-grid > .int-card:not(.int-card-channels)) {
    transition-delay: 260ms;
  }

  .js-reveal .svc:nth-child(4) {
    transition-delay: 390ms;
  }

  /* FAQ は縦に積まれた 10 行。**上から順に降りてくる**と、節に入った
     ことが 1 行目を読む前に分かる（行数が多いので刻みは小さく、
     5 行目から先は同じ遅延で止める——伸ばし続けると、下のほうが
     いつまでも出てこない）。 */
  .js-reveal .faq-item:nth-child(2) {
    transition-delay: 70ms;
  }

  .js-reveal .faq-item:nth-child(3) {
    transition-delay: 140ms;
  }

  .js-reveal .faq-item:nth-child(4) {
    transition-delay: 210ms;
  }

  .js-reveal .faq-item:nth-child(n + 5) {
    transition-delay: 280ms;
  }

  /* 位置そのものが意味を持つヘッダーの下線だけ、スクロール位置に紐づける
     （戻せば戻る。`view()` と違って「1 回きり」ではない）。 */
  @supports (animation-timeline: scroll()) {
    /* ヘッダーの下線。**最上部では引かず、送り始めた最初の 96px で現れる**
       （linear.app と同じ。ヒーローの上に線を置くと、ページの頭で面が
       2 つに割れて見える）。fill は `both`（状態なので、通過後も
       握っていてよい）。 */
    @keyframes header-settle {
      from {
        border-bottom-color: transparent;
      }

      to {
        border-bottom-color: var(--line);
      }
    }

    .site-header {
      animation: header-settle linear both;
      animation-timeline: scroll();
      animation-range: 0 96px;
    }

  }

  /* `scroll()` の無いブラウザのヘッダー下線（JS が `is-scrolled` を
     出し入れする）。 */
  @supports not (animation-timeline: scroll()) {
    .js-reveal .site-header {
      border-bottom-color: transparent;
      transition: border-color var(--t-fast);
    }

    .js-reveal.is-scrolled .site-header {
      border-bottom-color: var(--line);
    }
  }
}

/* ③-1 ハブ図。点線を左 → 中心 → 右へ流す（パスの向きがその順なので、
   ひとつの負のオフセットで「集まって、出ていく」流れになる）。
   周期は dasharray（2.5 5 = 7.5）の倍数でないと 1 周ごとに継ぎ目が跳ぶ。 */
@keyframes hub-flow {
  to {
    stroke-dashoffset: -15;
  }
}

.hub-fan path {
  animation: hub-flow 1.8s linear infinite;
}

/* ③-2 ハブの後光をゆっくり呼吸させる。 */
@keyframes hub-breathe {
  50% {
    opacity: 0.55;
  }
}

.hub-ring circle[fill="url(#hubGlow)"] {
  animation: hub-breathe 3.6s ease-in-out infinite;
}

/* ③-3 バッジの点。稼働中のインジケーターらしく脈打たせる。 */
@keyframes badge-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35);
  }

  70%,
  100% {
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0);
  }
}

.hero-badge::before {
  animation: badge-pulse 2.4s ease-out infinite;
}

/* ③-4 CTA の飾り円をゆっくり漂わせる。周期を変えて同期させない。
   **v4 で振幅を上げた**（20px → 34px）——締めの 1 画面だけは、止まって
   いる面が 1 つも無いほうがいい。 */
@keyframes cta-drift {
  to {
    transform: translate3d(0, -34px, 0) scale(1.1);
  }
}

.cta-panel::before {
  animation: cta-drift 7s ease-in-out infinite alternate;
}

.cta-panel::after {
  animation: cta-drift 9.5s ease-in-out infinite alternate-reverse;
}

/* 動きを減らす設定では、①③を止める（②とその縮退は no-preference の中に
   しか無い）。`animation: none` なので素の状態＝すべて表示に戻る
   ——**`clip-path` も `filter` も素の値に戻る**ので、行のせり上がりを
   足したぶんでここに書き足すのはセレクタだけでよい。 */
@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero h1,
  .hero-tagline,
  .hero-tagline span,
  .hero-lead,
  .hero-actions,
  .hero-note,
  .hero-shot,
  .logos,
  .hub-fan path,
  .hub-ring circle[fill="url(#hubGlow)"],
  .hero-badge::before,
  .cta-panel::before,
  .cta-panel::after {
    animation: none;
  }

}

/* ── 狭い画面（〜640px）の文字の段と、カード列の横スワイプ ────────
   **linear.app のモバイル版（幅 390px）の実測に合わせる**（2026-09-23）。
   あちらは段が少ない——節の見出し 24px / カードの見出し 20px /
   本文 15px（行送り 24px）/ カードの説明 14px / 補足 13px の 5 段で、
   補足より小さい文字は画面の見本の中にしか無い。こちらは部品ごとに
   11.5〜17px が散っていて、同じ役割の文字が節によって別の大きさだった。

   **段の値はここの `--m-*` が正本。** `consulting.css` / `mcp.css` の
   部品も同じトークンを読む（数字を写すと片方だけずれる）。
   和文は欧文より字面が詰まって見えるので、行送りだけ Linear より
   少し広く取る（本文 1.7 / 説明 1.75）。

   **大見出し（`.hero-tagline`）は動かさない。** Linear の 38px は欧文の
   短い語だからで、和文の 1 行（「完全自動マーケティングシステム」15 字）は
   いまの大きさで画面の幅いっぱい——上げると行が割れる。
   **画面の見本（ヒーロー・コラージュ・連携の図）の中の文字も対象外**
   （Linear も見本の中は 10〜12px。実物の画面の縮尺なので）。 */
@media (max-width: 640px) {
  :root {
    --m-h2: 24px; /* 節の見出し・声明 */
    --m-cta: 26px; /* 締めの CTA（大見出しと同じ格。和文なので 1 段下げる） */
    --m-h3: 20px; /* カードの見出し */
    --m-h4: 16px; /* 一覧の項目の見出し */
    --m-body: 15px; /* 本文・リード */
    --m-desc: 14px; /* カードの説明 */
    --m-small: 13px; /* 補足・ラベル・注記 */
    --m-tag: 12px; /* 札（「いま」「これから」など）。これより下げない */
  }

  h2,
  .int-h2 {
    font-size: var(--m-h2);
    line-height: 1.33;
  }

  .statement {
    font-size: var(--m-h2);
    line-height: 1.55;
  }

  .cta-panel h2 {
    font-size: var(--m-cta);
    line-height: 1.35;
  }

  .fig h3,
  .use h3,
  .svc h3 {
    font-size: var(--m-h3);
    line-height: 1.35;
  }

  .hero-lead,
  .hero-lead + .hero-lead,
  .section-sub,
  .cta-panel p,
  .faq-item summary,
  .faq-body p,
  .contact-points li,
  .price-card .price-note,
  .price-points li,
  .feature-item summary {
    font-size: var(--m-body);
    line-height: 1.7;
  }

  .fig p,
  .use-lead,
  .svc-one,
  .feature-item p,
  .int-consent {
    font-size: var(--m-desc);
    line-height: 1.75;
  }

  .fig .fig-no,
  .hero-note,
  .ba-before,
  .ba-after,
  .svc h3 span,
  .svc-go,
  .feature-links-label,
  .int-note,
  .int-detail summary,
  .shot-disclaimer,
  .form-fine,
  .field label,
  .footer-col a,
  .footer-bottom p,
  .footer-bottom a {
    font-size: var(--m-small);
  }

  .ba-before span,
  .ba-after span,
  .logos-title,
  .svc-now {
    font-size: var(--m-tag);
  }

  /* ── 横スワイプ ──
     **縦に積むと 3 枚目まで読まれない**（1 枚が画面の高さを使い切る）。
     Linear と同じく次のカードの端を覗かせて、横に送れることを形で示す
     （幅 84%。「→ スワイプ」の文を足さない——覗いている端が答え）。
     列は画面の端まで広げ、送り始めと止まる位置は本文の左端（20px）に揃える
     （`.wrap` の余白と同じ値。変えるなら両方）。
     スクロールバーは出さない（覗いている端とバーの 2 つで同じことを言う）。 */
  /* `.wrap >` は `consulting.css`（後から読む）の `.steps { display: grid }`
     に負けないため。 */
  .wrap > :is(.figs, .steps, .use-grid, .svc-grid),
  .wrap-wide > .int-grid {
    display: flex;
    gap: 12px;
    max-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }

  :is(.figs, .steps, .use-grid, .svc-grid, .int-grid)::-webkit-scrollbar {
    display: none;
  }

  :is(.figs, .steps, .use-grid, .svc-grid, .int-grid) > * {
    flex: 0 0 min(84%, 340px);
    scroll-snap-align: start;
  }

  /* つなぎこみ（`#integrations`）は 4 ゾーン（一覧 → ハブ → できること →
     管理画面）を**横 1 列に戻す**——縦に積むと 1,500px になり、しかも
     「左から右へ読むとデータの流れになる」という広い画面の読み方が消える。
     カードの高さは揃えない（広い画面と同じ理由。`.int-grid` の頭のコメント）。 */
  .wrap-wide > .int-grid {
    align-items: center;
  }

  .int-grid > :is(.int-card, .int-screen) {
    margin: 0;
    max-width: none;
  }

  /* ハブは**つなぎ目**なので、カード 1 枚ぶんの幅を取らない。輪の周りだけを
     切り出し（図は 300px で描いて中央を 168px 見せる）、止まる位置は中央
     ——両隣のカードの端が左右に覗き、「ここを通って集まる」形になる。
     点線（`.hub-fan`）は縦積みのときに消していたが、横に戻したので出す。 */
  .int-grid > .int-hub {
    flex-basis: 168px;
    overflow: clip;
    scroll-snap-align: center;
  }

  .int-grid .hub-ring {
    width: 300px;
    margin-inline: calc(50% - 150px);
  }

  .int-grid .hub-fan {
    display: inline;
  }

  /* **横スワイプの列の中では、カードを動かさない**（2026-09-23 に
     ユーザー指示）。指で送っている最中にカードが浮き上がってくると
     送りにくい——しかも横の列は IntersectionObserver が画面の外の
     カードを「見えていない」と数えるので、送った先で毎回動きが始まる。
     列の外（章ヘッダ・FAQ・CTA など）の出現はそのまま残す。
     部品名まで書いて詳細度を 4 段にしてあるのは、`.steps` の隠し規則が
     後から読む `consulting.css` にあるため（3 段同士だと読み込み順で負ける）。
     `/mcp` の横に流れるカード（`.pc`）は `mcp.css` が同じことをしている。 */
  .js-reveal
    :is(.figs, .steps, .use-grid, .svc-grid, .int-grid)
    > :is(.fig, .step, .use, .svc, .int-card, .int-hub, .int-screen):not(.is-in) {
    opacity: 1;
    transform: none;
  }

  /* FIG は縦積みのときの上ヘアラインを 1 枚目にも残す（横に並ぶと、
     線の有無で 1 枚目だけ別物に見える）。 */
  .fig,
  .fig:first-child {
    padding-top: 24px;
  }
}