/*
  `/consulting`（AllRev Consulting = マーケティング特化の AI コンサルティング）
  **専用**のスタイル。

  **`home.css` の上に重ねて読む。** ヘッダー・フッター・ボタン・章ヘッダ・
  声明 + FIG・FAQ・CTA バンド・お問い合わせフォームはサービス紹介 4 枚と
  同じ部品をそのまま使い（配色と余白の正本は `home.css` の `:root`。
  **ここに色の値を書かない。`var(--…)` だけ**）、このファイルが持つのは
  **このページにしか無いもの**——

    ① フッターの 4 列（`home.css` は 5 列固定）… このページは
       「プロダクト」「ドキュメント」の列を持たない（本文でツールに
       言及しない約束なので、管理画面の導線をフッターにも置かない）。
    ② ヒーローの図（`.pdca`）… 3 つの土台（整理 → 連携 → 自動化）の板の上で、
       マーケティングの PDCA の輪が回りつづけ、8 つの支援領域の札へ届く
       （回る光・軸を昇る点・幹を昇る点）。
       **文字は名前だけ・框も影も付けない**——これは画面ではなく仕組みの図。
    ③ 特徴の絵（`.fa-*`）… FIG カード 3 枚の線画（的に届く矢印 / 流れの
       途中のゲート / 右肩上がりの線）。`mcp.css` の②と同じ作法。
    ④ 本文の並び（`.steps` / `.flow`）。
    ⑤ つなぎこみの帯（`#integrations`）… 部品は `home.css` の「つなげる先」を
       そのまま借り、ここが持つのは**このページだけ違う 2 つ**——4 ゾーンめが
       絵ではなくカードなので変わる列比と、手書きの svg に当てるハブの色。

  ── 守ること（`home.css` の「動き」の節と同じ）──────────────
  - **JS を切っても本文が全部読める。** ループの絵は「素の状態 = 最後まで
    進んだ状態」で、キーフレームは**出る前**を隠すだけ。
    `prefers-reduced-motion: reduce` では `animation: none` で素の状態へ。
  - **スクロール出現の隠し規則は `.js-reveal` の下にしか書かない**
    （印は JS が「動かせると確かめてから」付ける）。
  - **動かすのは transform / opacity / stroke-dashoffset だけ。** 数字は
    アニメーションさせない。hover で要素を動かさない。
  - **面を張るカードはヘアライン（`--sh-ring`）だけ。影は框だけ**
    （`home.css` の「影を使ってよいのは浮いているものだけ」）。
  - **font-weight は 600 まで**（700/800 は読み込んでいない）。
  - **青は押せる場所だけ。** 判定ラベルと通し番号は状態色と文字色で付ける。
  - **読ませる文字に `--faint` を使わない**（白地で 2.56:1）。薄い文字は
    `--muted` まで。
*/

/* ── ① フッターの列 ───────────────────────────────────── */
/* このページのフッターは「会社紹介 + サービス + コンサルティング + 会社情報」
   の 4 つ。`home.css` の 5 列のままだと、右端に空の 1 列ぶんの余白が残って
   「読み込みに失敗した列」に見える。**`home.css` は触らない**
   （あちらは 4 枚と `/mcp` が読む）。

   **広い画面だけに掛ける。** メディアクエリは詳細度を上げないので、素で
   書くと**後から読まれるこちらが `home.css` の狭い画面の規則（1000px 以下
   = 2 列 / 520px 以下 = 1 列）にも勝ってしまい**、スマートフォンでも 4 列の
   まま「広告運用（Ad）」が 3 行に割れる（2026-09-21 に実際にそうなっていた）。
   閾値は向こうの 1 つ目（1000px）と同じ値で切る。 */
@media (min-width: 1001px) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── ② ヒーローの図（PDCA のループ）───────────────────────
   **これは画面ではなく仕組みの図**なので、框（`.window-frame`）も影も
   持たない（`home.css` の「影を使ってよいのは浮いているものだけ」。
   ここで浮くのは輪の中心 = `.pd-hub` だけ）。**框を持ってよいのも
   そこだけ**——中心はチャットで指示を出している場面（2026-09-22 に
   ユーザー指示）で、図の中で人の手が入る唯一の場所だから。

   一番上が 8 つの支援領域の札（2026-09-22 追加。名前は `#scope` の見出し
   そのもの）、その下が PDCA の輪（寝かせた楕円に 4 つの駅 = 設計 →
   制作・配信 → 計測 → 改善）、一番下が 3 つの土台（① 整理 → ② 連携 →
   ③ 自動化 の 3 段の板）。輪は板の上に浮き、中心から下りた軸（点線）が
   一番上の板に立つ。
   札は、中心から上へ立つ幹（実線）→ 横の母線 → 札ごとの枝、で輪につながる
   （参考にした絵の「1 本の線から施策ごとの札へ枝分かれする」形）。
   **文字は名前だけ**——AI と人の分担・承認・チップの一覧は 2026-09-22 に
   「情報が多い」で外し、**図の上下にあった見出し 1 行ずつも同日ユーザー
   指示で外した**（何の図かは本文と `aria-label` が言う）。例外は中心の
   指示の 1 文だけで、**そこにも返事の本文は書かない**。

   ── 動き（すべて opacity / transform / stroke-dashoffset だけ）────────
   組み上がる順の再生（16s の時間割）も絵と一緒に外した。残るのは
   「回っている」の印だけで、どれも出番を持たない:

     `.pd-comet`（+ `-glow`）  輪を回り続ける光。`--pd-orbit` で 1 周
     `.pd-say-1` 〜 `-6`       中心のチャットの 6 つの発言が順に出て窓を
                               下へ伸ばし、上限まで来たら古いものから上へ
                               抜ける。**①出稿を頼む ②バナー案 は 1 回だけ**
                               （`--pd-intro`）で、**③配信の承認 →
                               ④レポート → ⑤バナーを修正します →
                               ⑥またバナー案 が回る**（`--pd-loop`。
                               ⑥ のあとは ③ へ戻る）
     `.pd-approval-*`          その途中、却下 / 承認する → 承認しました
                               （カードの縁も待っている間だけ緑。同じ 1 周）
     `.pd-reply i`             その下で待っている点 3 つ（1.4s）
     `.pd-layer::before` → `.pd-pulse` → `.pd-flash`
                               板 ①②③ が順に光り、点が軸を昇り、中心が
                               ひとつ光る（`--pd-feed` で 1 周。「土台が
                               輪を動かしている」の印）
     → `.pd-pulse-up` → `.pd-area::before`
                               続けて点が幹を昇り、8 枚の札が淡く光る
                               （「輪が領域へ届いている」の印。同じ 1 周の後半）

   **素の状態 = 完成形**（輪・駅・板・軸・中心・札・幹・母線は全部見えている）。
   素の状態で `opacity: 0` を持ってよいのは**一時的な印**（`.pd-layer::before` /
   `.pd-pulse` / `.pd-flash` / `.pd-pulse-up` / `.pd-area::before`）だけで、
   `server/tests/test_lp_consulting.py` が見張る。回る光は止めると PLAN の駅の裏に隠れる（`stroke-dashoffset`）。

   ── 幅 ──────────────────────────────────────────────
   図は 1 列（札 → 輪 → 板）で、幅は `--pd-max` まで。駅と中心は HTML なので
   文字は縮まず、輪（svg）だけが幅に合わせて縮む。札は 800px 以下で
   4 枚 × 2 段（1 枚が 85px を切ると「クリエイティブ」が語の途中で折れる）。
   520px 以下は駅と札の文字を 1 段小さくし、中心のチャットは上バーと
   点 3 つを畳んで指示の文だけにする（框の四隅が楕円の外へ出る）。 */

.pdca {
  /* 回る光の 1 周と、土台 → 軸 → 中心の 1 周。**`:root` を増やさない**
     （このページのこの図でしか使わない）。 */
  --pd-orbit: 7s;
  /* 6s だったが、後半に「幹を昇る → 札が光る」を足したので 8s（板の拍は
     同じ割合のまま、少しゆっくりになる）。 */
  --pd-feed: 8s;
  /* 中心のチャット。**時間の軸は 2 本**（2026-09-22 にユーザー指示で
     「⑥ から ③ へ戻す」形にした）:
       `--pd-intro` … ①出稿を頼む ②バナー案 の 2 つ。**1 回だけ**流れて、
                       最初の周が終わるところで畳まれ、そのまま戻らない
                       （頼むのは最初の 1 回きり、を時間でも言う）。
       `--pd-loop`  … ③配信の承認 → ④レポート → ⑤バナーを修正します →
                       ⑥またバナー案、の 4 つ。**ここだけが無限に回る**
                       ので、2 周目からは⑥のあと③へ戻る。
     `--pd-open` は輪が回りはじめる時刻（＝①②が出そろうまでの間）で、
     **`--pd-intro` = `--pd-open` + `--pd-loop`**。3 つの値は対なので、
     どれかを動かすときは 3 つとも見る（ずれると、①②が消える前に③が
     戻ってきて会話の順が壊れる）。 */
  --pd-open: 6s;
  --pd-loop: 20s;
  --pd-intro: 26s;
  --pd-max: 860px;

  /* 幹の上端（svg の座標）と母線（CSS の px）を同じ高さに置くための
     ものさし。この幅を 100 とする cqw で、svg の viewBox（幅 800）の
     1 単位 = 1/8 cqw。`.pd-orbit` も同じ幅なので値は食い違わない。 */
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: var(--pd-max);
  /* 上下とも同じ空き（`auto` は左右）。**下を 0 に戻さない**——`.hero` は
     `padding-bottom: 0` なので、ここが図と次の節（`#statement`）の間の
     唯一の余白になる。2026-09-22 までは図の下にあった見出し 1 行が
     それを担っていて、外した日にここへ移した。幅は 4 枚のヒーローで
     `home.css` が図の下に空けるぶん（`.logos` の `margin-top: 64px`）と同じ。 */
  margin: clamp(40px, 5vw, 64px) auto;
  display: flex;
  /* DOM は読み上げの順（土台 → 輪）。見た目は輪が上。 */
  flex-direction: column-reverse;
  align-items: stretch;
  animation: window-in 0.95s var(--ease-out) 0.46s backwards;
}

/* ── 下: 土台の 3 段の板 ─────────────────────────────── */

/* **DOM は ①②③ の順**（読み上げの順）で、見た目だけ逆に積む
   ——土台は下から重なるものなので、① が一番下に来る。 */
.pd-layers {
  /* **`home.css` が地ならししているのは `ul` だけ。** `ol` は素のままなので、
     ここで落とさないと UA の `padding-inline-start: 40px` と `margin: 1em 0`
     が残る。 */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

/* 1 段の板 = 天面（`::after`。寝かせた角丸、高さ `--pd-top`）+ 前面
   （この箱そのもの。天面の下、`padding-top` から下が前面）。天面の縁が
   前面の上の縁で、前面の下の角は天面と同じ角丸（押しつぶした 14 × 7）。
   **下ほど広い**（① が一番広い）ので、3 段が階段に見える。
   **高さは中身で決まる**（道具の数だけ折り返す）ので固定しない。

   **板は重ねない（2026-09-22）。** それまでは上の板を天面の高さぶん
   下へ重ねていたので、下の板の天面が真ん中で隠れ、見えているのは
   左右の端だけだった——「上の板が下の板にめり込んでいる」形なので、
   段の重なりではなく**角丸のカードが 3 枚並んでいる**ようにしか
   見えなかった（ユーザー指摘）。少し上から見た段々を描くなら、
   上の板の前面の下に、下の板の天面が**手前の縁として**見えるのが
   正しい並び。 */
.pd-layer {
  --pd-w: 88%;
  /* 天面の奥行き。**薄くしない**——1 段が細い帯になると、板の上の面ではなく
     カードの見出し帯に見える。 */
  --pd-top: 26px;
  position: relative;
  width: var(--pd-w);
  min-height: calc(var(--pd-top) + 44px);
  padding: calc(var(--pd-top) + 10px) 18px 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 0 0 14px 14px / 0 0 7px 7px;
  /* 前面。**1 色で塗らない**——天面と同じ濃さの帯が縦に立つと、板ではなく
     角丸のカードに見える（2026-09-22 まではそう見えていた）。上から光が
     当たっている面なので、天面の前縁と同じ濃さから始めて、下へ 1 段落とす。
     `--pd-top` から始めるのは、それより上は天面（`::after`）が覆って
     いて見えないため（そこから塗ると、見えている面のどこが明るいのかが
     板の高さで変わる）。 */
  background: linear-gradient(to bottom, var(--bg-card) var(--pd-top), var(--bg-raise));
  /* ヘアライン + **下の板の天面へ落ちる影**。板どうしが重なっていることは、
     縁の段差だけでは読めない（同じ濃さの面が 2 枚並んでいるようにしか
     見えない）——影は「浮いているものだけ」の例外で、ここは面と面の
     重なりそのものを見せている。一番下の板のぶんは地面へ落ちる。 */
  box-shadow:
    var(--sh-ring),
    0 3px 5px -2px rgba(15, 23, 42, 0.2),
    0 14px 22px -12px rgba(15, 23, 42, 0.24);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.pd-layer-2 { --pd-w: 74%; }
.pd-layer-3 { --pd-w: 60%; }

/* 層の名前（左）。**縮めない**——道具が増えても名前は 1 行のまま。 */
.pd-layer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* その層で扱う道具（右）。**層をまたいで並べ直さない**——どの層の道具かが
   読めることがこの一覧の仕事。入り切らなければ折り返す（板が縦に伸びる）。 */
.pd-tools {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.pd-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: var(--bg);
  box-shadow: var(--sh-ring);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--body);
}

/* マークは配布物をそのまま置く（`home.css` の `.brand-mark` と同じ扱い）。
   持っていないサービス（LINE）は**文字だけ**——似せて描かない。 */
.pd-tool .brand-mark {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

/* **AWS だけワードマーク**（他は記号）。正方形の枠に入れると 15px 幅まで
   縮んで読めないので、横幅だけ広く取る。高さは他と揃える。 */
.pd-tool .is-wordmark {
  width: 25px;
}

/* 上の板は下の板の天面の**上に乗る**（めり込ませない）ので、間は 0。
   描く順は DOM の順（① → ② → ③）なので、上の板の影が下の板の天面へ
   落ちる（`.pd-layer` の box-shadow）——重なりを見せているのはその影と
   幅の差で、位置の重なりではない。 */
.pd-layer + .pd-layer {
  margin-bottom: 0;
}

/* 天面。**奥ほど明るい**——寝ている面なので、手前（前縁）へ向かって
   1 段落とすと、立っている前面との境目が線を引かなくても分かる
   （線は `--sh-ring` の 1px が引くが、それだけだと帯にしか見えない）。 */
.pd-layer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--pd-top);
  border-radius: 14px / 7px;
  background: var(--bg);
  /* 前縁（天面と前面の境目）だけ濃い線にする。ヘアライン 1 本では
     「面が折れている」ところが読めない。 */
  box-shadow: var(--sh-ring), inset 0 -1px 0 var(--line2);
}

/* 一番上の板の天面には、輪の光が落ちる（軸が立つ場所）。 */
.pd-layer-3::after {
  background:
    radial-gradient(ellipse 46% 80% at 50% 50%, rgba(37, 99, 235, 0.18), transparent),
    var(--bg);
}

/* 一番下の板は地面に置かれている（上の板の影を受ける相手がいない）。
   受ける影が無いぶん、落とす影をもう一段深くして接地を見せる。 */
.pd-layer-1 {
  box-shadow:
    var(--sh-ring),
    0 3px 5px -2px rgba(15, 23, 42, 0.2),
    0 22px 32px -18px rgba(15, 23, 42, 0.28);
}

/* 「いま流れている」印。前面だけを淡く染める。**一時的な光なので
   素の状態では出ない**（読ませる要素ではないので `opacity: 0` を素で
   持ってよい）。 */
.pd-layer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--pd-top);
  bottom: 0;
  border-radius: inherit;
  background: var(--b-tint);
  opacity: 0;
  pointer-events: none;
}

/* 通し番号（読み上げの順 = 積む順）。等幅の小さな字。 */
.pd-no {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.pd-no::before {
  content: "0";
}

/* 線画のアイコン（板にも駅にも同じ）。特徴カードのアイコンと同じ色。 */
.pd-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--icon-stroke);
}

.pd-layer-title {
  position: relative;
}

/* ── 上: PDCA の輪 ───────────────────────────────────── */

.pd-ring {
  position: relative;
}

/* **座標の正本は svg の viewBox（800 × 400）**。駅と中心はその座標を
   % に直して置くので、幅が変わっても輪と駅の位置関係が保たれる
   （`mcp.css` の `.s-hub` / `.s-tile` と同じ手）。中心 (400, 200)、
   輪は 300 × 130、軸は 200 → 414（箱の下 + 天面の半分 = 一番上の板の天面の真ん中）。 */
.pd-orbit {
  position: relative;
  aspect-ratio: 800 / 400;
  container-type: inline-size;
}

/* 地の点描。輪のまわりだけ薄く敷いて、外へ向かって消す（図の「場」。
   框ではない——縁も面も無い）。mask の色は不透明なら何でもよいので
   `--ink` を借りる。**横にはみ出させない**（右へ出すとページの幅を超えて
   横スクロールが生まれる）。 */
.pd-orbit::before {
  content: "";
  position: absolute;
  inset: -6% 0 0;
  z-index: 0;
  background-image: radial-gradient(var(--line2) 1px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 46% 72% at 50% 50%, var(--ink) 10%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 72% at 50% 50%, var(--ink) 10%, transparent 100%);
  pointer-events: none;
}

/* 中心のにじみ。ヒーローの地の青と同じ役どころ（1 面 1 箇所の青ワッシュは
   ここ）。 */
.pd-orbit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(200 / 400 * 100%);
  z-index: 0;
  width: 46%;
  height: 72%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(37, 99, 235, 0.11),
    rgba(37, 99, 235, 0.04) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.pd-arcs {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 軸。中心から下の板へ。 */
.pd-axis {
  fill: none;
  stroke: var(--line2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

/* 軸を昇る点。**「移動中」だけの一時的な印**なので素の状態では出ない。 */
.pd-pulse {
  fill: var(--b600);
  opacity: 0;
}

/* 幹。中心から上へ、駅（PLAN）の裏を通って母線まで。**実線**——点線の軸は
   「板の上に立つ」の印で、こちらは「輪から領域へ流れる」の線（母線・枝と
   同じ）。母線・枝は CSS の 1.5px なので、幅で縮まない線にして太さを揃える。 */
.pd-trunk {
  fill: none;
  stroke: var(--line2);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* 幹を昇る点。`.pd-pulse` と同じく**移動中だけの印**。 */
.pd-pulse-up {
  fill: var(--b600);
  opacity: 0;
}

/* 輪の道筋（1 本の楕円）。駅の裏を通る。
   **太さは箱に連動させない**（`vector-effect`）——狭い画面では箱を縦に
   伸ばす（`.pd-orbit` の `aspect-ratio`）ので、連動させると上下の弧だけ
   太い楕円になる。母線・枝（CSS の 1.5px）とも太さが揃う。 */
.pd-orbit-track {
  fill: none;
  stroke: var(--line2);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* 向きの矢じり（駅と駅の間）。止めた人にも回る向きが分かるように、
   光とは別に常に置く。 */
.pd-dir path {
  fill: rgba(37, 99, 235, 0.45);
}

/* 回り続ける光。`pathLength="100"` なので dasharray は % と同じ。
   芯（濃い短い線）と、その周りのにじみ（太く薄い同じ線）の 2 本。
   **素の状態は止まった 1 点で、それは PLAN の駅の裏に置く**——楕円の
   始点は右端（0）で時計回り、上端は 75 なので、5 の長さの線を
   72.5〜77.5 に置くには offset 27.5（線は offset のぶん後ろへずれる）。
   右端に置くと DO の駅からはみ出して、止めた人にだけ青い切れ端が見える。
   動かすのは dashoffset だけ。 */
.pd-comet {
  fill: none;
  stroke: var(--b600);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 27.5;
}

.pd-comet-glow {
  fill: none;
  stroke: rgba(37, 99, 235, 0.16);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 27.5;
}

/* 4 つの駅。輪の 4 つの端に、駅の中心を合わせて置く（駅は輪の上に
   乗り、光は裏を通る）。**影は落とさない**（並ぶものはヘアラインだけ）。 */
.pd-nodes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-node {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border-radius: var(--pill);
  background: var(--bg);
  box-shadow: var(--sh-ring);
  white-space: nowrap;
}

.pd-plan { left: 50%; top: calc(70 / 400 * 100%); }
.pd-do { left: calc(700 / 800 * 100%); top: calc(200 / 400 * 100%); }
.pd-check { left: 50%; top: calc(330 / 400 * 100%); }
.pd-act { left: calc(100 / 800 * 100%); top: calc(200 / 400 * 100%); }

.pd-card-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

/* 工程の名（PLAN / DO / CHECK / ACT）。等幅の小さな字。 */
.pd-stage {
  padding-left: 1px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* 中心。**この図で浮くのはここだけ**（`mcp.css` の `.s-core` と同じ）。
   2026-09-22 にユーザー指示で、名前を書いた円から**チャットで指示を出して
   いる場面**へ変えた（人が何をするのかが図のどこにも無かった）。
   形は `/mcp` のヒーローのチャット（`mcp.css` の `.s-chat`）と同じ約束で、
   **框を持ってよいのはここだけ**——「画面ではなく仕組みの図」に画面が
   1 枚だけ混ざるのは、そこが人の手が入る唯一の場所だから。

   **幅は輪の座標で決める**（360 / 800 = 45%）。駅（DO = x 700 / ACT = x 100）
   にも輪の弧にも触れない大きさで、高さは中身なり——文が 2 行になっても
   楕円（300 × 130）の内側に収まる。文字は `cqw`（図の幅）で縮むので、
   **中の文が画面の幅で折り返し方だけを変える**（駅の文字と同じ考え方）。 */
.pd-hub {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(200 / 400 * 100%);
  transform: translate(-50%, -50%);
  width: calc(360 / 800 * 100%);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--sh-ring), var(--sh-float);
  /* 中の文は左から読む（駅や札と違い、ここだけは文）。 */
  text-align: left;
}

/* **常時の青い輪は置かない。** 円だった頃は「灯っている中心」の印として
   外側に 1.5px の青い輪を回していたが、框が角丸の板になった今それを
   そのまま巻くと、**入力中の欄のような選択枠**に見える（押せそうに
   見えるものを図の中に作らない）。灯るのは拍の一瞬だけ = `.pd-flash`。 */

/* 点が着いたときの一瞬の光。**一時的な印**なので素の状態では出ない。 */
.pd-flash {
  position: absolute;
  inset: -5px;
  border-radius: calc(var(--r-lg) + 5px);
  box-shadow:
    0 0 0 1.5px rgba(37, 99, 235, 0.7),
    0 0 28px rgba(37, 99, 235, 0.35);
  opacity: 0;
  pointer-events: none;
}

/* 上バー。窓の点 3 つ（`::before`。`mcp.css` の `.s-chat-bar` と同じ）と、
   中心の名前。**ロゴも製品名も置かない**——ここに置いてよいのは
   「誰に指示しているか」までで、道具の名前は土台の板が持っている。 */
.pd-hub-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: clamp(22px, 3.4cqw, 32px);
  padding: 0 clamp(8px, 1.3cqw, 12px);
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.pd-hub-bar::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 9px 0 0 var(--faint), 18px 0 0 var(--faint);
  /* 点は 3 つで 1 組だが、幅を持つのは 1 つ目だけ（残りは影）。名前は
     右端へ寄せる。 */
  margin-right: auto;
}

/* **末尾の字間を足さない**（`letter-spacing` は最後の字の後ろにも入る）
   ——右端に揃えたときに 1 字ぶん内側へ寄って見える。 */
.pd-hub-title {
  font-family: var(--mono);
  font-size: clamp(9px, 1.4cqw, 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* **グリッドではなく縦のフレックス。** 発言の入れ物は高さ 0 まで畳める
   （`min-height: 0`）ので、グリッドの行だと**上限に当たった瞬間に行ごと
   潰れて**、絵も吹き出しも真ん中で切れた窓になる（行の最小が 0 だから
   縮められてしまう）。フレックスなら `flex: none` で「縮まない」と言える
   ——はみ出したぶんは上へ抜けて、窓の上端で切れる（＝チャットの窓）。 */
.pd-hub-body {
  display: flex;
  flex-direction: column;
  /* **高さの上限。** 会話が進むと窓は伸びるが、伸ばし切ると駅（PLAN /
     CHECK）に乗る——上限まで来たら**古い発言が上へ抜けていく**。
     transform で送らないのは、発言の高さが幅で変わる（折り返す）ため
     ——px で送ると、折り返した幅でだけ半端な位置で止まる。 */
  max-height: clamp(110px, 23cqw, 200px);
  overflow: hidden;
  justify-content: flex-end;
  /* **間は `gap` で取らない。** 出番の前の発言は高さ 0 に畳んであるだけ
     なので、`gap` は畳んだぶんにも入る（＝空の窓に 4 つ分の隙間が開いた
     まま「伸びていく」ことになる）。間隔は畳まれる側の内側
     ——`.pd-say` の `margin-top`——に持たせる。 */
  gap: 0;
  padding: clamp(8px, 1.4cqw, 13px) clamp(8px, 1.4cqw, 13px) clamp(9px, 1.5cqw, 14px);
  /* 上へ抜けていく発言は**ぼかして消す**。切り口をそのまま見せると、
     文や絵が真ん中で切れた「壊れた窓」に見える（狭い画面ほど窓が低く、
     いちばん新しい往復すら上端に触るので必ず起きる）。mask の色は
     不透明なら何でもよいので `--ink` を借りる（`.pd-orbit::before` と同じ）。 */
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) clamp(10px, 2cqw, 18px));
  mask-image: linear-gradient(to bottom, transparent, var(--ink) clamp(10px, 2cqw, 18px));
}

/* 発言 1 つぶんの入れ物。**窓が伸びるのはここ**——1 行だけのグリッドの
   行を `0fr` → `1fr` と動かすと、中身の高さのぶんだけ開く（高さを px で
   持たないので、文が 2 行に折れる幅でも数字を直さなくてよい）。
   **素の状態は開いている**（`1fr`）ので、動きを減らす設定でも会話は
   全部見える。`0fr` の補間に対応していない相手では段階的に開くだけで、
   出る順は `opacity` のほうが持っている。 */
.pd-turn {
  display: grid;
  grid-template-rows: 1fr;
  /* 上限に当たっても縮まない（縮むと、窓の途中で絵が切れる）。 */
  flex: none;
}

/* 畳むのは**中身の側**（行が 0 になっても中身は縮まないので、隠すには
   ここで切る）。`min-height: 0` が無いと、グリッドの最小サイズが中身の
   高さになって畳めない。 */
.pd-turn > .pd-say {
  overflow: hidden;
  min-height: 0;
  margin-top: clamp(5px, 0.9cqw, 9px);
}

.pd-turn:first-child > .pd-say {
  margin-top: 0;
}

/* 発言。**指示（貴社）は右寄せの淡い面、応答（AI）は左寄せで面を張らない**
   （`mcp.css` の `.s-user` / `.s-ai` と同じ）。4 つとも素の状態で見えている
   ——動きがやるのは順に出すことだけ。 */
.pd-say {
  max-width: 96%;
  font-size: clamp(9px, 1.45cqw, 13px);
  line-height: 1.7;
}

.pd-ask {
  justify-self: end;
  padding: clamp(4px, 0.85cqw, 9px) clamp(8px, 1.25cqw, 12px);
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  background: var(--bg-raise);
  color: var(--ink);
}

/* 応答。**面も枠も持たない**——4 往復のうち 2 つが面を張ると、中心が
   吹き出しの列になって輪より重く見える（返ってきたものの絵が面を持つ）。 */
.pd-ans {
  justify-self: start;
  /* 絵が入るので、吹き出しと違って幅いっぱいまで使う。 */
  max-width: 100%;
  width: 100%;
  padding-left: 2px;
  display: grid;
  justify-items: start;
  gap: clamp(4px, 0.7cqw, 7px);
  color: var(--body);
}

/* ── 返ってきたもの（バナー案 / レポート）────────────────────
   ④のダッシュボードの絵と同じ扱いで、**何が出てくるのかを形で見せる**。
   **中に文字を置かない**——この大きさでは読めないし、図の中の数字は
   裏付けの取れない実績に読める。色は既存の 3 段の面とヘアラインだけで、
   青は「いちばん伸びた棒」と折れ線の 1 箇所ずつに絞る。 */
.pd-thumbs {
  display: flex;
  gap: clamp(4px, 0.7cqw, 7px);
}

/* **高さで揃える**（幅は比から決まる）——窓の幅で背が伸び縮みすると、
   会話が 1 つ進むたびに窓の伸びしろが変わる。 */
.pd-thumb {
  height: clamp(26px, 4.3cqw, 40px);
  width: auto;
}

.pd-report {
  height: clamp(34px, 5.6cqw, 52px);
  width: auto;
  max-width: 100%;
}

.pd-art-card {
  fill: var(--bg);
  stroke: var(--line);
  stroke-width: 1.5;
}

/* 写真の面。**3 枚で濃さを変える**（別の案だと分かる最小限。色相は増やさない）。 */
.pd-art-photo {
  fill: var(--pd-photo, var(--bg-raise));
}

.pd-art-hill,
.pd-art-sun {
  fill: var(--pd-photo-mark, var(--line2));
}

.pd-thumb-a { --pd-photo: rgba(37, 99, 235, 0.12); --pd-photo-mark: rgba(37, 99, 235, 0.3); }
.pd-thumb-b { --pd-photo: var(--bg-raise); --pd-photo-mark: var(--line2); }
.pd-thumb-c { --pd-photo: rgba(37, 99, 235, 0.07); --pd-photo-mark: rgba(37, 99, 235, 0.22); }

/* 見出しと本文の代わりの棒。 */
.pd-art-text {
  fill: var(--line2);
}

.pd-art-text.is-2 {
  fill: var(--line);
}

/* ボタン。**バナーだと分かるのはここ**（色を薄めない）。 */
.pd-art-cta {
  fill: var(--b600);
}

.pd-art-bars rect {
  fill: var(--line);
}

.pd-art-bars .is-on {
  fill: var(--b600);
}

.pd-art-line {
  fill: none;
  stroke: var(--b600);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pd-art-dot {
  fill: var(--b600);
}

/* 会話の下で待っている点 3 つ。**「このあとも回りつづける」の印**で、
   5 つ目の発言ではない（だから `aria-hidden`）。
   **素の状態でも見える**（薄く点いている）。 */
.pd-reply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 2px;
  /* 発言と同じ間隔（`gap` を持たないぶん、こちらも自分で開ける）。 */
  margin-top: clamp(5px, 0.9cqw, 9px);
  align-self: flex-start;
  flex: none;
}

.pd-reply i {
  width: clamp(4px, 0.7cqw, 6px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--b600);
  opacity: 0.35;
}

/* ── 配信の前の承認 ────────────────────────────────────────
   ④の「出稿・投稿・送信は、人が承認してから」を、いちばん人が見る図の中で
   もう一度見せる。**見た目は `/agent` の承認カード**（`collage-approve-
   marketing.svg`）に合わせる——緑の丸いチェック、「〜の承認」の見出し、
   中身 1 行、「却下 / 承認する」。同じものが 2 つのページで別の形に
   見えないようにするためなので、並びと色を入れ替えない。
   **素の状態は承認し終わったあと**（＝話し終わった会話）で、ボタンは
   **動く相手にだけ出る途中の状態**——だから `display` で出し分ける
   （`opacity: 0` で素の状態を欠けさせない。この図の約束）。 */
.pd-approval {
  display: grid;
  gap: clamp(3px, 0.5cqw, 5px);
  width: 100%;
  padding: clamp(6px, 0.9cqw, 9px) clamp(7px, 1.1cqw, 11px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-card);
  font-size: clamp(8px, 1.2cqw, 11px);
  line-height: 1.45;
}

.pd-approval-head {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.7cqw, 7px);
}

/* 緑の丸いチェック。**承認まわりで色が変わるのはここだけ**（`--ok` は
   状態色で、押すもの＝青と役割が違う）。 */
.pd-approval-badge {
  flex: none;
  width: clamp(11px, 1.6cqw, 14px);
  height: clamp(11px, 1.6cqw, 14px);
  fill: var(--ok);
}

/* チェックは丸の上に白で抜く（色は HTML に書かない）。 */
.pd-approval-badge path {
  stroke: var(--bg);
}

.pd-approval-name {
  font-weight: 600;
  color: var(--ink);
}

.pd-approval-note {
  color: var(--body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 押す前（ボタン）と押したあと（承認しました）は**同じマス**に重ねる
   ——入れ替わっても行の高さが動かない。 */
.pd-approval-state {
  display: grid;
  justify-items: end;
  margin-top: clamp(1px, 0.3cqw, 3px);
}

.pd-approval-act,
.pd-approval-ok {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.pd-approval-ok {
  align-self: center;
  font-weight: 600;
  color: var(--b700);
}

.pd-approval-act {
  display: none;
  gap: clamp(4px, 0.6cqw, 6px);
}

/* 却下は枠だけ、承認するは塗り（`/agent` の承認カードと同じ）。 */
.pd-approval-no,
.pd-approval-yes {
  padding: clamp(2px, 0.35cqw, 4px) clamp(6px, 0.9cqw, 10px);
  border-radius: var(--r);
  font-weight: 600;
}

.pd-approval-no {
  border: 1px solid var(--line2);
  color: var(--body);
}

.pd-approval-yes {
  background: var(--b600);
  /* 白は地の色のトークンで取る（このファイルに 16 進を書かない。
     見張りは `test_the_css_never_hardcodes_a_colour`）。 */
  color: var(--bg);
}

/* ── 一番上: 同じ輪で回す支援領域の札 ─────────────────────
   輪の中心から立つ幹（svg の `.pd-trunk`）→ 横の母線 → 札ごとの枝、で
   札が輪につながる。母線と枝は札の擬似要素（`::after`）が描く
   ——札 1 枚が「自分の枝 + 母線の自分のぶん（左右の間隔の半分ずつ）」を
   描くと、隣の札のぶんとつながって 1 本の母線になる。端の札だけ内側へ
   伸ばす（外へ出た切れ端を残さない）。

   **幹の上端と母線は同じ高さに置く。** 幹は svg の座標（上端から
   `--pd-bus` ぶん上）、母線は札の下から `--pd-drop` 下。だから
   `.pd-areas` の下マージン = `--pd-drop` + `--pd-bus`。**`--pd-bus` は
   HTML の `d="M400 200V-24"` と対**（24 単位 = 3cqw）で、幹を昇る点の
   終点も同じ値から出る（`pd-rise-up` の 224 = 200 + 24）。
   3 箇所のずれは `test_lp_consulting.py` が見張る。
   **輪の箱を起こす画面では、この値も起こした比のぶん大きくなる**
   ——幹は縦の線なので長さが箱の高さに比例する（`@media` の
   `.pd-orbit { aspect-ratio }` と対。同じテストが見張る）。

   札の高さは**固定**（`--pd-ah`）——2 段に折れたとき、段と段をつなぐ幹の
   長さを計算で出すため（中身で高さが変わると母線の位置が読めない）。
   中身は 3 行（アイコン・名前・「活用方法を見る」）で、64px から上げた
   （2026-09-30。導線の行を足したぶん）。 */
.pd-areas {
  --pd-ah: 80px;
  --pd-ag: 8px;
  --pd-drop: 14px;
  --pd-bus: 3cqw;
  position: relative;
  margin-bottom: calc(var(--pd-drop) + var(--pd-bus));
}

.pd-area-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* **列の数を数字で書かない。** 札の枚数に合わせて 1 段に並べる
     （`grid-auto-flow: column`）——`repeat(8, …)` と書いていた頃に
     札を 1 枚減らしたら、8 列目が空のまま残って**札の列だけが左へ
     ずれ、幹とつながっていないように見えた**（2026-09-22。ずれは
     54px で、図としては成立しているので画面を見ても間違いだと
     分からない）。畳んだときだけ下の @media が列を決める。 */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--pd-ag);
  /* 2 段に折れたとき、上の段の母線が段と段の間に入る。 */
  row-gap: calc(var(--pd-drop) + 16px);
}

/* 段と段をつなぐ幹（上の段の母線 → 下の段の母線）。1 段のときは上端と
   下端が同じ高さになり、長さ 0 で描かれない。下の段の真ん中の間隔を
   通る——4 枚でも 8 枚でも、真ん中は札と札の間。 */
.pd-area-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--pd-ah) + var(--pd-drop));
  bottom: calc(-1 * var(--pd-drop));
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--line2);
  pointer-events: none;
}

/* 札。駅と同じ白地 + ヘアライン（並ぶものに影は落とさない）。
   アイコンの下に名前。**名前は `#scope` の見出しと同じ文字列**。 */
.pd-area {
  position: relative;
  height: var(--pd-ah);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: var(--sh-ring);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  /* 「SNS アカウント運用」は空白でだけ折る（語の途中で折らない）。 */
  word-break: keep-all;
  /* ただし**入り切らないときは折る**。`keep-all` だけだと、札より長い語
     （320px の「クリエイティブ」「アカウント運用」）が折れずに札の外へ
     はみ出す——白い札の縁をまたいだ文字は、折れた文字より読めない。
     入る幅では折る理由が無いので、ここが効くのは一番狭い画面だけ。 */
  overflow-wrap: anywhere;
}

.pd-area .pd-icon {
  width: 18px;
  height: 18px;
}

/* 札は押せる（その領域のやり方を書いたコラムの章へ。2026-09-30 に
   ユーザー指示）。**リンクを札いっぱいに広げ、中身はリンクが並べる**
   ——札（`li`）の高さは固定なので、札の中に置いただけだと押せるのが
   文字の上だけになる。余白は札の値を受け継ぐ（狭い画面の @media が
   札の余白を詰めると、リンクも一緒に詰まる）。 */
.pd-area-link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: inherit;
  border-radius: inherit;
  color: inherit;
  transition: box-shadow var(--t-fast);
}

/* 押せることの印は枠の色と下線だけ（hover で動かさない）。 */
.pd-area-link:hover {
  box-shadow: var(--sh-ring-hover);
  text-decoration: none;
}

/* 導線。**青は押すと何かが起きる場所だけ**——札の中でここだけ青い。
   矢印は読み上げない（「活用方法を見る」で意味は足りる）。 */
.pd-area-go {
  margin-top: 1px;
  color: var(--b700);
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.pd-area-go::after {
  content: " →" / "";
}

.pd-area-link:hover .pd-area-go {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 「届いた」印。札を淡く染める。**一時的な光なので素の状態では出ない**
   （板の `.pd-layer::before` と同じ）。 */
.pd-area::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--b-tint);
  opacity: 0;
  pointer-events: none;
}

/* 枝（札の下の真ん中から母線へ）+ 母線の自分のぶん（左右の間隔の半分まで
   はみ出して、隣の札のぶんとつながる）。線は 1.5px の gradient 2 本
   （1 本目 = 枝、2 本目 = 母線）。 */
.pd-area::after {
  content: "";
  position: absolute;
  left: calc(-0.5 * var(--pd-ag));
  right: calc(-0.5 * var(--pd-ag));
  top: 100%;
  height: calc(var(--pd-drop) + 1.5px);
  background:
    linear-gradient(var(--line2), var(--line2)) 50% 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--line2), var(--line2)) 0 100% / 100% 1.5px no-repeat;
  pointer-events: none;
}

/* 端の札は母線を内側にだけ伸ばす。箱の端が札の真ん中になるので、
   枝もその端に寄せる。 */
.pd-area:first-child::after {
  left: 50%;
  background-position: 0 0, 0 100%;
}

.pd-area:last-child::after {
  right: 50%;
  background-position: 100% 0, 0 100%;
}

/* ── ②の動き（キーフレーム）──────────────────────────────
   **素の状態は全部見えている**（上の各ルール）。ここは「回っている」の
   印だけ。100% で素の状態に戻るので fill-mode は要らない。 */

/* 回り続ける光。offset を減らすと楕円の向き = 時計回りに進む。
   100 で 1 周なので、素の 27.5 に戻って切れ目なく続く。 */
@keyframes pd-comet {
  from { stroke-dashoffset: 127.5 }
  to { stroke-dashoffset: 27.5 }
}

/* 中心のまわりの光の輪。ゆっくり回るだけ。 */
/* 中心のチャット。**4 つの発言が順に出て、最後にまとめて消えて戻る**
   （`--pd-talk` で 1 周）。素の状態は 4 つとも見えている会話なので、
   キーフレームがやるのは「出番の前を畳んでおく」ことだけ——出たあとは
   86% までそのまま置いて、読み切る時間を作る。
   **動かすのは行の高さ（`0fr` → `1fr`）と `opacity`** で、窓は中身のぶん
   だけ下へ伸びる（＝会話が進むと大きくなる）。高さを px で持たないので、
   文が 2 行に折れる幅でも数字を直さなくてよい。
   **4 つの割合は輪の拍（`--pd-feed`）と揃えない**（別の周期。合わせに
   いくと、どちらかの速さを直すたびにもう片方が読めなくなる）。 */
/* ①② = 1 回だけ（`--pd-intro`）。最初の周の終わりで畳まれ、`forwards` で
   そのまま戻らない。 */
@keyframes pd-say-1 {
  0%, 3% { grid-template-rows: 0fr; opacity: 0 }
  7%, 46% { grid-template-rows: 1fr; opacity: 1 }
  52%, 100% { grid-template-rows: 0fr; opacity: 0 }
}

@keyframes pd-say-2 {
  0%, 12% { grid-template-rows: 0fr; opacity: 0 }
  16%, 62% { grid-template-rows: 1fr; opacity: 1 }
  68%, 100% { grid-template-rows: 0fr; opacity: 0 }
}

/* ③〜⑥ = 無限に回る側（`--pd-loop`。`--pd-open` だけ遅らせて始める。
   `backwards` で、始まるまでは畳まれたまま）。

   **畳むのは「窓から上へ抜けたあと」で、周の終わりではない。** 4 つを
   周の終わりでまとめて畳むと、次の周が始まるまでの数秒だけ**窓が空になる**
   （実測 2 秒ほど。壊れて見える）。窓は下に貼りついているので、上へ抜けた
   発言をいつ畳んでも見た目は動かない——だから ③④⑤ は次が 2 つ出たころに
   静かに畳む。

   **⑥ を周またぎで残さない。** 残すと、次の周の ③ が**⑥ の上に**開く
   （DOM の順がそのまま上下なので、新しい発言が古い発言の上に出る）
   ——会話が後ろへ戻ったように見えるので、⑥ は周の終わりで畳み、
   入れ替わりに ③ が下から開く。畳みと開きを詰めてあるので空白は一瞬で、
   その間も点 3 つ（`.pd-reply`）が窓に残る。 */
@keyframes pd-say-3 {
  0% { grid-template-rows: 0fr; opacity: 0 }
  3%, 44% { grid-template-rows: 1fr; opacity: 1 }
  50%, 100% { grid-template-rows: 0fr; opacity: 0 }
}

@keyframes pd-say-4 {
  0%, 22% { grid-template-rows: 0fr; opacity: 0 }
  26%, 64% { grid-template-rows: 1fr; opacity: 1 }
  70%, 100% { grid-template-rows: 0fr; opacity: 0 }
}

@keyframes pd-say-5 {
  0%, 44% { grid-template-rows: 0fr; opacity: 0 }
  48%, 86% { grid-template-rows: 1fr; opacity: 1 }
  92%, 100% { grid-template-rows: 0fr; opacity: 0 }
}

@keyframes pd-say-6 {
  0%, 64% { grid-template-rows: 0fr; opacity: 0 }
  68%, 96% { grid-template-rows: 1fr; opacity: 1 }
  99%, 100% { grid-template-rows: 0fr; opacity: 0 }
}

/* 承認。**押される前で止まって見える時間を作る**（1 周の 1 割弱）
   ——ここが一瞬で通ると、人が押したようには見えない。待っている間だけ
   カードの縁が緑になり（`/agent` の承認カードと同じ印）、ボタンが出る。 */
@keyframes pd-approval-act {
  0%, 6% { opacity: 0 }
  10%, 20% { opacity: 1 }
  23%, 100% { opacity: 0 }
}

@keyframes pd-approval-ok {
  0%, 20% { opacity: 0 }
  24%, 84% { opacity: 1 }
  90%, 100% { opacity: 0 }
}

@keyframes pd-approval-card {
  0%, 6% { border-color: var(--line); background: var(--bg-card) }
  10%, 20% { border-color: var(--ok); background: rgba(21, 128, 61, 0.05) }
  24%, 100% { border-color: var(--line); background: var(--bg-card) }
}

/* 応答の点 3 つ（「いま動いている」の印）。**素の状態は薄く点いた 3 つ**で、
   消えるのは拍の途中だけ。中心が円だった頃はまわりを回る光の輪
   （`pd-spin`）がこの役だったが、框が角丸の板になって回せなくなった
   ——チャットなら、待っているのは輪ではなく点 3 つのほう。 */
@keyframes pd-dots {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0) }
  30% { opacity: 1; transform: translateY(-2px) }
}

/* 土台 → 軸 → 中心（`--pd-feed` で 1 周）。板が ① → ② → ③ と順に
   光り、点が軸を昇り（214 = 板の天面の真ん中から中心まで）、中心が
   ひとつ光って消える。 */
@keyframes pd-feed-1 { 0%, 2% { opacity: 0 } 8%, 16% { opacity: 1 } 24%, 100% { opacity: 0 } }
@keyframes pd-feed-2 { 0%, 12% { opacity: 0 } 18%, 26% { opacity: 1 } 34%, 100% { opacity: 0 } }
@keyframes pd-feed-3 { 0%, 22% { opacity: 0 } 28%, 36% { opacity: 1 } 44%, 100% { opacity: 0 } }

@keyframes pd-rise {
  0%, 40% { opacity: 0; transform: translateY(214px) }
  43% { opacity: 1; transform: translateY(214px) }
  57% { opacity: 1; transform: translateY(0) }
  59%, 100% { opacity: 0; transform: translateY(0) }
}

@keyframes pd-flash {
  0%, 56% { opacity: 0; transform: scale(1) }
  59% { opacity: 1; transform: scale(1) }
  74%, 100% { opacity: 0; transform: scale(1.3) }
}

/* 同じ 1 周の後半: 点が幹を昇り（224 = 中心 200 + 母線の 24）、
   8 枚の札が淡く光って消える。 */
@keyframes pd-rise-up {
  0%, 70% { opacity: 0; transform: translateY(0px) }
  72% { opacity: 1; transform: translateY(0px) }
  82% { opacity: 1; transform: translateY(-224px) }
  84%, 100% { opacity: 0; transform: translateY(-224px) }
}

@keyframes pd-reach {
  0%, 81% { opacity: 0 }
  85%, 91% { opacity: 1 }
  97%, 100% { opacity: 0 }
}

/* 割り当て。**`no-preference` の中に入れる**——動きを減らす設定での
   縮退を「あとから `animation: none` で打ち消す」書き方にすると、
   詳細度の高い割り当てだけが止まらずに残る（動きを減らしていない人の
   画面では正しく見えるので、こちらからは気づけない）。掛けなければ
   外す必要も無い。 */
@media (prefers-reduced-motion: no-preference) {
  .pd-comet { animation: pd-comet var(--pd-orbit) linear infinite; }
  .pd-comet-glow { animation: pd-comet var(--pd-orbit) linear infinite; }
  /* 中心のチャット。**①② は 1 回だけ、③〜⑥ が回る**（上の 3 つの値）。
     回る側は `--pd-open` だけ遅らせ、`backwards` で始まるまで畳んでおく
     ——⑥ のあとは ③ に戻るので、「頼む」は最初の 1 回きりになる。
     回る 4 つは**同じ長さ・同じ起点**（割合で出番をずらす）。長さを
     別々に持つと、直した 1 つだけが会話の順から外れる。 */
  .pd-say-1 { animation: pd-say-1 var(--pd-intro) var(--ease-out) 1 forwards; }
  .pd-say-2 { animation: pd-say-2 var(--pd-intro) var(--ease-out) 1 forwards; }
  .pd-say-3 { animation: pd-say-3 var(--pd-loop) var(--ease-out) var(--pd-open) infinite backwards; }
  .pd-say-4 { animation: pd-say-4 var(--pd-loop) var(--ease-out) var(--pd-open) infinite backwards; }
  .pd-say-5 { animation: pd-say-5 var(--pd-loop) var(--ease-out) var(--pd-open) infinite backwards; }
  .pd-say-6 { animation: pd-say-6 var(--pd-loop) var(--ease-out) var(--pd-open) infinite backwards; }

  /* 承認の途中の状態（ボタンと緑の縁）は**ここでだけ出す**（素の状態は
     承認し終わったあと。`display` で出し分けるのは、`opacity: 0` を素の
     CSS に置かないため）。**③ と同じ時間の軸**に乗せる。 */
  .pd-approval-act {
    display: flex;
    animation: pd-approval-act var(--pd-loop) var(--ease-out) var(--pd-open) infinite backwards;
  }

  .pd-approval-ok {
    animation: pd-approval-ok var(--pd-loop) var(--ease-out) var(--pd-open) infinite backwards;
  }

  .pd-approval {
    animation: pd-approval-card var(--pd-loop) step-end var(--pd-open) infinite backwards;
  }

  .pd-reply i { animation: pd-dots 1.4s var(--ease-out) infinite; }
  .pd-reply i:nth-child(2) { animation-delay: 0.16s; }
  .pd-reply i:nth-child(3) { animation-delay: 0.32s; }

  .pd-layer-1::before { animation: pd-feed-1 var(--pd-feed) linear infinite; }
  .pd-layer-2::before { animation: pd-feed-2 var(--pd-feed) linear infinite; }
  .pd-layer-3::before { animation: pd-feed-3 var(--pd-feed) linear infinite; }
  .pd-pulse { animation: pd-rise var(--pd-feed) var(--ease-out) infinite; }
  .pd-flash { animation: pd-flash var(--pd-feed) var(--ease-out) infinite; }
  .pd-pulse-up { animation: pd-rise-up var(--pd-feed) var(--ease-out) infinite; }
  .pd-area::before { animation: pd-reach var(--pd-feed) linear infinite; }
}

/* ── ②の狭い画面 ─────────────────────────────────────── */

/* 800px 以下: 札が 1 段に入らない（1 枚 85px を切ると「SNS アカウント
   運用」のような長い名前が語の途中で折れる）ので 4 枚 × 2 段。
   **`grid-auto-flow` を `row` に戻すのを忘れない**——`column` のままだと
   列の指定が効かず、いつまでも 1 段に詰め込まれる。段の端の札が変わる
   ——4 枚目が上の段の右端、5 枚目が下の段の左端。 */
@media (max-width: 800px) {
  /* 輪の箱を少し起こす。**寝かせた 800 × 400 のままだと、幅が減ったぶん
     上下の駅（PLAN / CHECK）と中心のチャットの間が先に尽きる**
     ——実測で 521〜700px は框が駅に 3〜7px 乗っていた（框のほうが上に
     描かれるので、駅の角が欠けて見える）。さらに狭い画面ではもう一段
     起こす（下の 520px の節）。 */
  .pd-orbit {
    aspect-ratio: 800 / 480;
  }

  /* 幹は**縦**の線なので、起こした比のぶんだけ長くなる
     （24 単位 × 480/400 ÷ 800 = 幅の 3.6%）。**母線の高さはこの値と対**。 */
  .pd-areas {
    --pd-bus: 3.6cqw;
  }

  /* **4 列ではなく 8 列（札は 2 列ぶん）。** 端数の段（7 枚なら 4 + 3）を
     真ん中へ寄せるための半列で、札の幅は 4 列のときと同じ
     （2 列 + 間 1 つ = 4 列のときの 1 列）。左寄せのままだと下の段が
     半列ぶん左へずれ、**輪から立つ幹が段の真ん中から外れる**——線は
     つながっているのに、図としては傾いて見える。 */
  .pd-area-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .pd-area {
    grid-column: span 2;
  }

  /* 端数の段を真ん中に置く。**枚数を数えて書かない**——「下の段が何枚
     余ったか」（`nth-last-child`）で選ぶので、札を足し引きしても
     当たる札が勝手に変わる（8 枚 = 4 + 4 のときはどちらも当たらない）。 */
  .pd-area:nth-child(5):nth-last-child(3) {
    grid-column: 2 / span 2;
  }

  .pd-area:nth-child(5):nth-last-child(2) {
    grid-column: 3 / span 2;
  }

  .pd-area:nth-child(5)::after {
    left: 50%;
    background-position: 0 0, 0 100%;
  }

  .pd-area:nth-child(4)::after {
    right: 50%;
    background-position: 100% 0, 0 100%;
  }
}

/* 520px 以下: 輪が 350px くらいまで縮む。駅は 1 段小さく。
   **中心は元から 1 行**（「AI Agent」）なので、副題を隠す規則は要らない
   ——2026-09-22 までは「マーケティングの / PDCA」の 2 行で、円が 60px を
   切ると上の行が入らなかった。

   **幅を詰めるだけでは足りない（2026-09-22）。** 800 × 400 のまま狭い画面へ
   入れると、左右の駅（x 100 / 700 = 端から 12.5%）と中心のチャットが
   **同じ高さの帯**に並ぶので、幅が減ったぶんだけ両者が近づく——実測で
   360px では駅とチャットが 3px 重なり、320px では 9px 重なっていた
   （そのうえ DO の駅が図の右端から 18px はみ出す）。**輪の箱を縦に
   伸ばして帯を離す**（`aspect-ratio`）+ **左右の駅を縦積みの細い札に
   する**の 2 つで開ける。駅が伸ばしても弧の上に乗ったままなのは、駅が
   viewBox の座標を % に直して置いてあり、svg も
   `preserveAspectRatio="none"` で同じ比で伸びるから。 */
@media (max-width: 520px) {
  .pd-orbit {
    aspect-ratio: 800 / 520;
  }

  /* 幹は**縦**の線なので、箱を縦に伸ばした比のぶんだけ長くなる
     （24 単位 × 520/400 ÷ 800 = 幅の 3.9%）。**母線の高さはこの値と対**
     ——素の 3cqw のままだと幹だけが母線を突き抜ける。 */
  .pd-areas {
    --pd-bus: 3.9cqw;
  }

  .pd-node {
    gap: 5px;
    padding: 5px 9px 5px 8px;
  }

  /* 左右の駅（DO / ACT）だけ縦積みの細い札にする。輪の左右の端は図の端に
     近いので、横長のままだと図からはみ出し、真ん中のチャットともぶつかる。
     **上下の駅（PLAN / CHECK）は横のまま**——あちらは左右に幅が余っていて、
     縦に積むと今度は上下でチャットとぶつかる。 */
  .pd-do,
  .pd-act {
    flex-direction: column;
    gap: 2px;
    width: 68px;
    padding: 7px 4px;
    border-radius: var(--r-lg);
    text-align: center;
  }

  /* 横並びのときの光学調整（工程の語を 1px 内側へ）は、縦積みでは
     真ん中がずれるだけなので戻す。 */
  .pd-do .pd-stage,
  .pd-act .pd-stage {
    padding-left: 0;
  }

  .pd-node .pd-icon {
    width: 13px;
    height: 13px;
  }

  .pd-card-title {
    font-size: 11.5px;
  }

  .pd-stage {
    font-size: 9px;
  }

  /* 輪が 350px くらいまで縮むと、上バーと点 3 つを入れたままでは框の
     四隅が楕円の外へ出る（＝輪の弧を跨いで乗る）。**残すのは指示の文**
     ——チャットだと分かるのは面の形と右寄せのほうで、上バーはその念押し。
     框ごと消さないのは、消すと文が地の上に浮いて図の説明書きに見えるため。

     **幅は左右の駅との隙間で決まる。** 駅の文字は幅で縮まない
     （`.pd-node` は px）ので、狭い画面ほど駅は輪の中へ張り出す。上で
     左右の駅を 68px の縦積みにしたぶんだけ框を広げられる（47.5% =
     400 ± 190）が、ここを 50% より広げると**框が駅に乗る**
     ——320px の実測で隙間は 4px しかない（広い画面では起きないので、
     こちらからは気づけない）。 */
  .pd-hub {
    width: calc(380 / 800 * 100%);
  }

  .pd-hub-bar,
  .pd-reply {
    display: none;
  }

  .pd-hub-body {
    padding: clamp(7px, 1.6cqw, 11px);
    /* 輪が縮むぶん、窓の上限も下げる（上下の駅に乗せない）。出ているのは
       いちばん新しい往復だけになる——チャットの窓としては正しい。
       輪を縦に伸ばしたぶん（上の `aspect-ratio`）、素の 20cqw より
       高く取れる。 */
    max-height: clamp(80px, 31cqw, 130px);
  }

  /* 文が小さくなりすぎないように、下限だけ上げる（幅で決まる字は
     350px の図では 9px まで落ちて、図の中で読める字ではなくなる）。 */
  .pd-say {
    font-size: clamp(10.5px, 1.45cqw, 13px);
  }

  .pd-approval {
    font-size: clamp(9.5px, 1.2cqw, 11px);
  }

  .pd-flash {
    inset: -4px;
    border-radius: calc(var(--r-lg) + 4px);
  }

  .pd-layer {
    --pd-w: 100%;
    --pd-top: 20px;
    padding: calc(var(--pd-top) + 9px) 12px 9px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
  }

  .pd-layer-2 { --pd-w: 90%; }
  .pd-layer-3 { --pd-w: 80%; }

  .pd-tools {
    justify-content: flex-start;
  }

  .pd-areas {
    --pd-ah: 74px;
    --pd-ag: 6px;
    --pd-drop: 12px;
  }

  .pd-area {
    font-size: 10.5px;
    padding: 5px 3px;
  }

  .pd-area .pd-icon {
    width: 16px;
    height: 16px;
  }
}

/* 429px 以下: 札の中身の幅（60〜83px）に「活用方法を見る →」（84px）が
   入らないので、「活用方法 →」まで縮める（2026-09-30 に実測。430px で
   札の中身が 87px になり、全文が入る）。**折り返させない**——導線が
   2 行に割れると、札の高さ（固定）からはみ出す。 */
@media (max-width: 429px) {
  .pd-area-go-more {
    display: none;
  }
}

/* 352px を切ると「アカウント運用」が 1 行に入らず、札の中身が 3 行になる
   （折り返しの境目を実測した値。フォントの実寸で前後するので 359px まで
   見る。360px = よくある Android の幅はそのまま 2 行で収まる）。
   **高さは固定のまま上げる**——中身に合わせて伸ばすと、2 段に折れたときの
   段と段をつなぐ幹の長さが計算で出せなくなる（`.pd-areas` の注記）。 */
@media (max-width: 359px) {
  .pd-areas {
    --pd-ah: 86px;
  }

  /* この幅では上下の駅とチャットの隙間が 1px まで詰まる（実測）。
     窓を一段低くして離す。 */
  .pd-hub-body {
    max-height: clamp(72px, 27cqw, 130px);
  }
}

/* ── ③ 特徴の絵（FIG カードの線画）───────────────────────
   `home.css` の `.fig-art` に SVG を置く（4 枚は webp のイラストだが、
   ここは線画）。**素の状態 = 動き終わった状態**で、キーフレームは
   出番の前を隠すだけ。3 枚とも 5s のループで、開始をずらして同時に
   動かない（3 つが同じ拍で動くと、絵ではなく点滅に見える）。
   色は CSS 側で持つ（HTML に 16 進を書かない）。 */

.fig-art .fa {
  width: min(100%, 200px);
  height: auto;
  color: var(--b700);
}

/* ③成果の線の先端は塗りの点（線と同じ色）。 */
.fa-rise .fa-dot {
  fill: currentColor;
}

/* 声明は 1 文（「マーケターとエンジニアが二人一組で、御社に伴走します。」）。
   日本語はどの字の間でも折れるので、`home.css` の 22em では「二 / 人一組」
   のように語の途中で折れる（`text-wrap: balance` でも同じ）。折れる場所を
   HTML 側の `<wbr />` に限る——広い画面は「、」の後ろ、狭い画面は句ごと。 */
.statement {
  word-break: keep-all;
}

/* ①特化: 源（左の棒）から矢印が右へ引かれ、的（右）に届く。 */
@keyframes fa-aim {
  0%, 16% { stroke-dashoffset: 100; }
  44%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

@keyframes fa-pop {
  0%, 30% { transform: scale(0.9); opacity: 0; }
  46%, 88% { transform: none; opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}

/* ②ゲート: 線が引かれ、チェックが入ってから先へ流れる。 */
@keyframes fa-flow {
  0%, 8% { stroke-dashoffset: 100; }
  24%, 90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

@keyframes fa-flow-2 {
  0%, 56% { stroke-dashoffset: 100; }
  72%, 90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

@keyframes fa-check {
  0%, 30% { stroke-dashoffset: 100; }
  50%, 90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

/* ③成果: 線が左下から右上へ引かれ、先端の点が着く。 */
@keyframes fa-rise {
  0%, 12% { stroke-dashoffset: 100; }
  48%, 90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

@media (prefers-reduced-motion: no-preference) {
  .fa-aim .fa-arrow {
    stroke-dasharray: 100;
    animation: fa-aim 5s linear infinite;
  }

  .fa-aim .fa-target {
    transform-origin: 126px 50px;
    animation: fa-pop 5s var(--ease-out) infinite;
  }

  .fa-rise .fa-line {
    stroke-dasharray: 100;
    animation: fa-rise 5s linear 0.6s infinite;
  }

  .fa-rise .fa-dot {
    transform-origin: 132px 26px;
    animation: fa-pop 5s var(--ease-out) 0.6s infinite;
  }

  .fa-gate .fa-flow {
    stroke-dasharray: 100;
    animation: fa-flow 5s linear 1.2s infinite;
  }

  .fa-gate .fa-flow-2 { animation-name: fa-flow-2; }

  .fa-gate .fa-check {
    stroke-dasharray: 100;
    animation: fa-check 5s linear 1.2s infinite;
  }
}

/* ── ③-2 特徴の本文の強調（`#statement`）─────────────────
   **強調は太さではなく色で付ける**（`home.css` の `.hero-lead strong` /
   `.statement strong` と同じ。700 は読み込んでいないので、太らせようと
   すると合成されたにじんだ字になる）。`.fig p` の地色は `--muted` なので、
   `--ink` に上げるだけで強調として読める。 */
.fig p strong {
  color: var(--ink);
  font-weight: 500;
}

/* 特徴の下から外へ出るリンク（実績は会社のサイトが正本）。
   見た目は道具のカードの「くわしく見る」（`home.css` の `.svc-go`）に
   合わせる——同じ「この先に続きがある」印を 2 通り持たない。 */
.fig-link {
  margin-top: 14px;
}

.fig-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--b700);
  font-size: 13.5px;
  font-weight: 500;
}

.fig-link svg {
  transition: transform 0.16s ease;
}

.fig-link a:hover {
  text-decoration: none;
}

.fig-link a:hover svg {
  transform: translateX(3px);
}

/* ── ④-1 進め方（`#approach`）3 列 ────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.step {
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  padding: clamp(24px, 2.6vw, 34px);
}

.step-no {
  color: var(--faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.step h3 {
  margin-top: 6px;
  font-size: 17px;
}

.step h3 + p {
  margin-top: 12px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.85;
}

/* 各段の絵（`common:codex-image-gen` で作った webp）。番号の下・見出しの
   上に置き、FIG カードと読み順を揃える。**動かさない**——生成画像なので
   線を引く動きは作れず、枠ごと動かすと下の文字と拍がずれる。 */
.step-art {
  margin: clamp(18px, 2.2vw, 26px) 0 clamp(16px, 2vw, 22px);
  display: grid;
  place-items: center;
}

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

/* ── ④-2 支援領域（`#scope`）買う側の流れ ─────────────
   **流れと説明が 1 つの列に入る。** 段（`.fl`）の中に領域の説明
   （`.area`）をそのまま置き、段は 5 つ、矢印は**段と段の間（gap の中）**。
   段に属さないものは**この節に置かない**（2026-09-22 にユーザー指示で
   「どの段にもかかるもの」の帯を削除した。復活させるなら段と地続きに
   見せないこと——同じ罫線で続けると 6 つ目の段に読める）。

   **矢印を罫線の上に重ねない。** 重ねると地色で罫線を抜く必要があり、
   `.section-alt` の地（`--bg`）を CSS に写すことになる——地色を動かした
   ときに、矢印の下だけ前の色の帯が残る（並べて見ないと気づけない）。
   段の名前の行に揃えれば、抜きは要らない。

   **狭い画面では矢印を「↓」に差し替える**（`content` ごと入れ替える）。
   1 列に畳んだのに「→」のままだと、次の段がどちらにあるのか読めない。 */

.flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.fl {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid var(--line2);
}

/* 矢印は段と段の間だけ（先頭には出ない）。`gap` と同じ幅を取り、
   段の名前の行に高さを合わせる。 */
.fl + .fl::before {
  content: "→" / "";
  position: absolute;
  top: 16px;
  left: -24px;
  width: 24px;
  color: var(--faint);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.fl-stage {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.fl-say {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* 領域の説明。**面を張らない**（8 枚も並ぶと面ばかりになる）。区切りは
   `home.css` の FIG と同じ考え方で、上のヘアライン 1 本
   ——ただし**段の中に入ったものは罫線を持たない**（段の頭の罫線と
   二重になり、1 段が 2 段に割れて見える）。 */
.area {
  padding-top: 18px;
  border-top: 1px solid var(--line2);
}

.fl .area {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

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

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

/* 段の下の、その分野の活用ガイドへのリンク。押せるので青（`--b700`）。
   ヒーローの札の「活用方法を見る」と同じ色と矢印 */
.area .area-guide {
  margin-top: 10px;
  font-size: 13px;
}

.area-guide a {
  color: var(--b700);
  text-decoration: none;
}

.area-guide a::after {
  content: " →" / "";
}

.area-guide a:hover {
  text-decoration: underline;
}

/* ── ④-3 道具（`#services`）2 枚 ─────────────────────────
   `home.css` の `.svc-grid` は 3 列（あちらは 3 サービス並ぶ）。
   ここは 2 枚なので、3 列のままだと右が 1 列空いて**カードが 1 枚
   抜けたように見える**（あちらのコメントが言っているのと同じ形）。 */
@media (min-width: 561px) {
  #services .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── ④-4 比較（`#compare`）1 枚の表 ───────────────────────
   **読むのは印（○ / △ / ×）で、文はその補足**（2026-09-23 にユーザー指示。
   3 者を文章で並べていた頃は、1 行を読み比べるのに 3 つの文を読む必要が
   あった）。だから文は 1 行に収まる長さにして、`--muted` のまま置く
   ——印と同じ濃さにすると、どちらを先に読むのか決まらない。

   **印は色だけで区別しない。** 文字（○ / △ / ×）そのものを置き、
   色は補助に留める（色が見分けにくい人には 3 列とも同じに見える）。

   **狭い画面でも表のまま横へ流す。** 行を縦に畳む書き方は、軸と列の
   名前を `content` に写すことになり、選択も読み上げもできない文字が
   増える——代わりに**軸の列を左に貼り付ける**（`position: sticky`）ので、
   どの行を読んでいるかは流しても分かる。

   **罫線はセルに引く**（`border-collapse: separate`）——`collapse` だと
   貼り付けた列の罫線が表の枠に吸われ、スクロールしたときに左端の線だけ
   消える。 */

/* 印の読み方。**表の前に置く**——記号の意味を知らないまま表に入ると、
   △ が「できる」なのか「できない」なのか決まらない。 */
.cmp-legend {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--muted);
  font-size: 12.5px;
}

.cmp-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmp-legend .mk {
  font-size: 15px;
}

.cmp-hint {
  display: none;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.cmp {
  overflow-x: auto;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
}

/* 枠の内側に収める（`overflow` の中で角丸を切るため、外側の枠は `.cmp`、
   セルの罫線はセル自身が持つ）。 */
.cmp-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
}

.cmp-table :is(th, td) {
  padding: 16px clamp(10px, 1.1vw, 16px);
  vertical-align: top;
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.85;
}

.cmp-table thead :is(th, td) {
  border-top: 0;
  padding-top: 20px;
  padding-bottom: 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

/* 軸の列。**貼り付けるので地を持つ**（下を流れるセルが透けない）。
   ここだけ左寄せ——行の名前は読む文で、印ではない。 */
.cmp-table :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 25%;
  padding-left: clamp(14px, 1.3vw, 20px);
  padding-right: clamp(14px, 1.3vw, 20px);
  background: var(--bg-card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
}

.cmp-table thead .cmp-corner {
  background: var(--bg-card);
}

/* うちの列は**広く取る**——ここだけ「何をするのか」まで書くので、
   等分のままだと 1 行 6 文字で折り返して縦に伸びる。残りの 2 列は
   指定しない（`table-layout: fixed` が余りを等分する）。 */
.cmp-table :is(th, td):last-child {
  width: 34%;
}

/* うちの列。**淡い青のワッシュ 1 面だけ**（塗り分けを増やすと、
   どこを比べている表なのかより先に色が目に入る）。 */
.cmp-table .cmp-us {
  background: var(--b-tint);
  color: var(--ink);
}

.cmp-table thead .cmp-us {
  color: var(--b700);
}

.cmp-us-note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

/* 印そのもの。 */
.mk {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.mk-yes {
  color: var(--b700);
}

.mk-mid {
  color: var(--warn);
}

.mk-no {
  color: var(--muted);
}

/* 読み上げ用の語（`○` は「まる」としか読まれない）。**`opacity` で
   隠さない**——素の状態で隠れている部品を探す検査に引っかかるうえ、
   0 の不透明度は読み上げにも残る書き方ではない。 */
.mk-say {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 印の下の一言。**印より弱く置く**（同じ濃さだと、どちらを先に読むのか
   決まらない）。 */
.mk-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* うちの列は文が長いので、1 段だけ濃くする（薄いまま長文を置くと、
   いちばん読ませたい列がいちばん読みにくくなる）。 */
.cmp-us .mk-note {
  color: var(--body);
  text-align: left;
}

/* ── ④-5 料金（`#pricing`）2 枚 ─────────────────────────
   **2 枚は同じ形**（種別 → 名前 → 額 → 含まれるもの）。並べて読み比べる
   のは額と中身なので、片方にだけ面の色や「おすすめ」の印を付けない
   ——付けると、与件に無い推し分けをページが勝手にすることになる。
   **額は数字として動かさない**（出現は枠ごと。`home.css` の約束）。 */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 980px;
  margin-inline: auto;
}

.plan {
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  padding: clamp(26px, 2.8vw, 38px);
  display: flex;
  flex-direction: column;
}

.plan-kind {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.plan h3 {
  margin-top: 6px;
  font-size: 18px;
}

.plan-price {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
}

.plan-amount {
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-feature-settings: "tnum";
}

.plan-unit {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

.plan-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* 含まれるもの。額との間はヘアライン 1 本で切る（面を重ねない）。
   **注記（何で額が変わるか）は 2 枚とも持つ**（2026-09-24 にユーザー指示で
   勉強会にも足した）——片方にしか無いと、無いほうは定額だと読まれる。 */
.plan-points {
  margin: 22px 0 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}

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

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

/* 担当者（`#advisor`。2026-09-30 に料金の中から節へ独立）。幅は料金の
   2 枚と揃える。 */
.advisor {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.8vw, 38px);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--sh-ring);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 28px);
}

.advisor-photo {
  flex: none;
  width: clamp(88px, 10vw, 120px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  box-shadow: var(--sh-ring);
}

.advisor-role {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.advisor-name {
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}

.advisor-bio {
  margin-top: 8px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.8;
}

/* ── ④-6 費用の比べ方（`#pricing` の 2 枚の下）──────────────
   4 枚は同じ形（用途 → ほかの頼み方 → 私たち）。**2 行は「いくら」と
   「いつまでかかるか」を同じ順で並べる**——読み比べるのはそこだけ。
   私たちの行は比較表の `.cmp-us` と同じ淡い青で示す（ページの中で
   「こちら側」の印を 2 通りにしない）。
   **既定は閉じたトグル**（`<details>`。2026-09-30 にユーザー指示）。
   中身はスクロール出現の対象にしない——閉じているあいだは位置が取れず、
   開いた瞬間に出現済みか未出現かが読み込み時の偶然で決まる。 */
.costs {
  max-width: 980px;
  margin: clamp(28px, 3vw, 40px) auto 0;
}

.costs-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  cursor: pointer;
  list-style: none;
  transition: box-shadow var(--t-fast);
}

.costs-toggle::-webkit-details-marker {
  display: none;
}

.costs-toggle:hover {
  box-shadow: var(--sh-ring-hover);
}

.costs-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.costs-chevron {
  margin-left: auto;
  flex: none;
  color: var(--muted);
  transition: transform var(--t-fast);
}

.costs[open] .costs-chevron {
  transform: rotate(180deg);
}

.costs-body {
  padding-top: clamp(20px, 2.4vw, 28px);
}

.costs-lead {
  margin: 0 auto;
  max-width: 640px;
  color: var(--body);
  font-size: 15px;
  line-height: 1.85;
  text-align: center;
}

.cost-list {
  margin-top: clamp(24px, 2.6vw, 32px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cost {
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  padding: clamp(22px, 2.4vw, 30px);
}

.cost h4 {
  font-size: 16px;
  color: var(--ink);
}

.cost-case {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.cost-rows {
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
}

.cost-row {
  padding: 12px 14px;
  border-radius: var(--r);
  box-shadow: var(--sh-ring);
}

.cost-row dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.cost-row dd {
  margin: 4px 0 0;
}

.cost-row strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  font-feature-settings: "tnum";
}

.cost-row dd span {
  display: block;
  margin-top: 2px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.7;
}

.cost-us {
  background: var(--b-tint);
  box-shadow: none;
}

.cost-us dt {
  color: var(--b700);
}

.costs-notes {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.costs-notes li::before {
  content: "※ ";
}

.plans-foot {
  margin-top: clamp(28px, 3vw, 40px);
  text-align: center;
}

.plans-foot p {
  color: var(--muted);
  font-size: 14px;
}

.plans-foot .btn {
  margin-top: 16px;
}

/* ── ⑤ つなぎこみの帯（`#integrations`）───────────────────
   部品は `home.css` の「つなげる先」をそのまま借りる（`.int-grid` /
   `.int-card` / `.chan` / `.hub` / `.int-checks` / `.int-screen`）。
   このページだけ違うのは 1 つ:

   ① **ハブの色**。この節の svg は手書きなので、16 進を HTML に書くと
      `home.css` の `:root` と二重管理になる——`<stop>` と `<path>`
      `<circle>` の class に対してここで当てる。

   ② **③の列を広げる**。`home.css` の比率は 4 枚の③（「施策の立案と実行」
      のような 8 文字の行）に合わせてあり、こちらの③は 20 文字あるので
      **5 行が全部 2 行に折れる**。足りない分は②のハブから借りる
      ——あそこは点線が広がっているだけで、詰めても読むものが減らない。
      絵（`.monitor`）は 420px までの可変なので、狭くなっても崩れない。

   **列比の上書きは広い画面だけに掛ける。** メディアクエリは詳細度を
   上げないので、素で書くと後から読まれるこちらが `home.css` の畳む規則
   （1180px 以下 = 3 列 / 900px 以下 = 1 列）にも勝ってしまい、
   スマートフォンでも 4 列のままになる。閾値は向こうの 1 つ目（1180px）の
   外側で切る。 */

@media (min-width: 1181px) {
  .int-grid {
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 1.22fr)
      minmax(0, 1.22fr) minmax(0, 1.2fr);
  }
}

/* **マークの無い行でも高さを揃える。** 空の `.chan-logos` は高さ 0 なので、
   そのままだとマークのある行だけが 4px 高くなり、行の間隔がばらつく
   （①は 6 行のうち 1 行がマークを持たない）。 */
.int-card .chan-logos {
  min-height: 20px;
}

/* ハブの図の色。**トークンだけ**（`home.css` の `.hub-fan` の点線は
   あちらの規則がそのまま効く）。

   **透ける青は `rgba()` で書く。`stop-opacity` に分けない**——`0` の
   不透明度を宣言で書くと、「素の状態で隠れている部品」の検査に引っかかる
   （あちらが探しているのは JS を切った人に出ない部品で、グラデーションの
   端はそれに当たらないが、見分けは付かない）。 */
.c-ring-1 {
  stop-color: rgba(37, 99, 235, 0.45);
}

.c-ring-2 {
  stop-color: var(--b600);
}

.c-ring-3 {
  stop-color: var(--b700);
}

.c-glow-1 {
  stop-color: rgba(37, 99, 235, 0.16);
}

.c-glow-2 {
  stop-color: rgba(37, 99, 235, 0);
}

.c-hub-face {
  fill: var(--bg);
}

.c-hub-mark {
  stroke: var(--b600);
}

.c-hub-text {
  fill: var(--ink);
}

/* ── 狭い画面 ─────────────────────────────────────────── */

@media (max-width: 1000px) {
  /* 5 段は 2 列に畳むと「次はどれか」が読めなくなるので 1 列にする。
     矢印も下向きに差し替え、段の頭ではなく**段と段の間**へ移す。 */
  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .fl + .fl::before {
    content: "↓" / "";
    top: -23px;
    left: 0;
    width: auto;
  }
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .plans,
  .cost-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 写真を経歴の上へ。横並びのままだと本文の幅が 1 行 10 文字ほどになる。 */
  .advisor {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 表が枠に収まらなくなったら、横へ流せることを文で伝える（スクロールの
   影だけでは、そこが動くと気づけない）。

   **貼り付けた列に隠れる幅を作らない。** 軸の列は左に貼り付いたままなので、
   右端まで流しても読めるのは「画面の幅 − 軸の列」まで——ここより広い列が
   あると、いちばん読ませたい列の左側が軸の下に入って**永久に読めない**
   （横へ流し切っているので、それ以上どうにもできない）。だから狭い画面では
   軸を詰め、どの列もその幅に収まるようにする。 */
@media (max-width: 860px) {
  .cmp-hint {
    display: block;
  }

  .cmp-table {
    min-width: 680px;
  }

  .cmp-table :is(th, td) {
    padding: 14px 10px;
  }

  .cmp-table :is(th, td):first-child {
    width: 120px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12.5px;
  }

  .cmp-table :is(th, td):last-child {
    width: 188px;
  }
}

@media (max-width: 359px) {
  .cmp-table {
    min-width: 600px;
  }

  .cmp-table :is(th, td):first-child {
    width: 108px;
  }

  .cmp-table :is(th, td):last-child {
    width: 164px;
  }
}

/* ── スクロール出現（`home.css` の②と同じ作り）───────────────
   隠す規則は `.js-reveal` の下だけ。対象の並びはページ側の JS
   （`REVEAL_SELECTOR`）の**後ろ半分**と同じ 1 本（前半は `home.css` が
   持つ部品 = 章ヘッダ・声明・FIG・FAQ・CTA・フォーム）。 */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal :is(.step, .fl, .cmp, .plan) {
    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(.step, .fl, .cmp, .plan):not(.is-in) {
    opacity: 0;
    transform: translateY(var(--rise)) scale(0.98);
  }

  /* 並びの時間差。1 枚 110ms（`home.css` の 130ms より少し詰める——
     ここは 8 枚並ぶ段があるので、同じ刻みだと最後が遅れて見える）。 */
  .js-reveal .step:nth-child(2) {
    transition-delay: 110ms;
  }

  .js-reveal .step:nth-child(3) {
    transition-delay: 220ms;
  }

  .js-reveal .plan:nth-child(2) {
    transition-delay: 110ms;
  }

  /* 段は流れなので、左から順に出す（同時に出ると流れに見えない）。 */
  .js-reveal .fl:nth-child(2) { transition-delay: 70ms; }
  .js-reveal .fl:nth-child(3) { transition-delay: 140ms; }
  .js-reveal .fl:nth-child(4) { transition-delay: 210ms; }
  .js-reveal .fl:nth-child(5) { transition-delay: 280ms; }
}

/* 動きを減らす設定では、線画のループを止める（素の状態 = 描き終わった
   状態なので、止めても絵は欠けない）。②の縮退は no-preference の中に
   しか無いので、ここに書き足すのは `.fa` の分だけでよい。 */
@media (prefers-reduced-motion: reduce) {
  /* **効いているのはこの規則ではなく、割り当てを `no-preference` に
     入れてあること**（②の頭のコメント）。ここは「この設定では図も線画も
     止まる」を 1 箇所で読めるようにするための控えで、擬似要素まで
     名指ししてあるのは `.pdca *` が `::before` / `::after` に当たらないため。 */
  .fa *,
  .pdca,
  .pdca *,
  .pdca *::before,
  .pdca *::after {
    animation: none;
  }
}

/* ── 狭い画面の文字の段（〜640px）───────────────────────────
   値は `home.css` の `--m-*`（linear.app のモバイル版の実測）を読むだけ。
   **数字を書かない**——正本が 2 つになる。横スワイプの列（`.steps`）も
   `home.css` の同じ節が持つ。 */
@media (max-width: 640px) {
  .step h3,
  .plan h3 {
    font-size: var(--m-h3);
    line-height: 1.35;
  }

  .plan-points li,
  .advisor-bio,
  .costs-lead,
  .plans-foot p {
    font-size: var(--m-desc);
    line-height: 1.75;
  }

  .step h3 + p,
  .fig-link a,
  .area p {
    font-size: var(--m-desc);
    line-height: 1.75;
  }

  .area h3 {
    font-size: var(--m-h4);
  }

  .step-no,
  .plan-kind,
  .plan-note,
  .advisor-role,
  .fl-say,
  .cmp-hint,
  .cmp-legend li {
    font-size: var(--m-small);
  }
}

/* ヒーローのリード文の 2 文め（2026-09-30 に長くなった）。語の途中
   （「コンサルテ｜ィング」）で折れないよう、句の単位でだけ折る。 */
.hero-lead .nw {
  white-space: nowrap;
}