/*
  `/mcp`（AllRev MCP = Claude / ChatGPT から使う）**専用**のスタイル。

  **`home.css` の上に重ねて読む。** ヘッダー・フッター・ボタン・章ヘッダ・
  声明 + FIG・ほかのサービスのカード・FAQ・CTA バンド・資料請求フォームは
  サービス紹介 4 枚と同じ部品をそのまま使い（配色と余白の正本は `home.css`
  の `:root`。**ここに色の値を書かない**）、このファイルが持つのは
  **このページにしか無い 4 つの絵**——

    ① ヒーローの舞台（`.stage`）… AI チャット → AllRev → つなげる先、を
       1 本の流れとして**時間で**再生する（ループ）。zapier.com のトップの
       「アプリとアプリが線でつながり、チャットに書いた内容が実行される」
       見せ方を、こちらの 3 者（チャット・AllRev・媒体）に置き換えたもの。
    ② 特徴の絵（`.fa-*`）… FIG カード 3 枚の線画がそれぞれ短いループで動く
       （つながる／会話の行が増える／承認のチェックが入る）。
    ③ つなげる先の軌道（`.m-orbit`）… AllRev を中心に、媒体のマークが
       2 つの輪でゆっくり回る（zernio.com の「つないだ先が中心の周りに
       並ぶ」構え）。マークは常に正立させる（輪の回転を打ち消す）。
    ④ 媒体ごとのカード（`.pc`。③と同じ節）… zernio.com の "Everything social"
       の型で、横に送る（動きは snap のスクロールと矢印だけ）。

  ── 守ること（`home.css` の「動き」の節と同じ）──────────────
  - **JS を切っても本文が全部読める。** ループの絵は「素の状態 = 最後まで
    進んだ状態」で、キーフレームは**出る前**を隠すだけ（`both` ではなく
    `backwards` 相当の書き方 + 100% で素の状態に戻る）。
    `prefers-reduced-motion: reduce` では `animation: none` で素の状態へ。
  - **スクロール出現の隠し規則は `.js-reveal` の下にしか書かない**
    （印は JS が「動かせると確かめてから」付ける）。
  - **動かすのは transform / opacity / stroke-dashoffset だけ。** 数字は
    アニメーションさせない。hover で要素を動かさない（輪は「止める」だけ）。
  - **青は押せる場所だけ。** 流れる線と点は `--b600` の薄い透過で、
    読ませる文字には使わない。
  - **コードを見せない。** 読むのはエンジニアではないので、接続の手順も
    「URL を 1 つ登録する」までで止め、コマンドはドキュメントへ送る。

  ── ループの時間割（`--loop` = 18s。ヒーローの舞台）──────────
  各要素のキーフレームは同じ 18s を共有し、**%** で出番を持つ。
  「どの % で何が起きるか」はここが正本（HTML 側は class を付けるだけ）:

     2– 5%  利用者の発言が出る
     6–13%  AI が考えている（点 3 つ）
    13–22%  ① Meta 広告の実績を取得   … 線を渡って Meta のタイルが灯る
    24–33%  ② Google 広告の実績を取得 … 同じく Google 広告
    35–44%  ③ 成果の悪い広告セットを停止 → **承認待ち**で止まる
    47–50%  AI の返答
    53–56%  承認待ちのカード（管理画面で承認するまで何も変わらない）
    94–98%  全部消えて、最初へ

  時刻を変えるときは**同じ出来事に関わる要素をまとめて**動かす
  （行・線の点・パス・タイルの 4 つが 1 組）。
*/

/* ── 共通の小物 ───────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 眉の下に添える 1 行のラベル（ステップ番号など）。装飾ではなく読ませる
   文字なので `--muted`（`--faint` にしない）。 */
.m-kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ── ① ヒーローの舞台 ──────────────────────────────────── */

:root {
  --loop: 18s;
  --wire: 72px; /* チャットと AllRev の間の線の長さ */
}

/* ヒーローの文の下・全幅。`home.css` の `.hero-shot` と同じ立ち位置
   （影で浮かせるのは框だけ。舞台そのものは面を張らない）。 */
.stage {
  position: relative;
  margin-top: clamp(48px, 6vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) var(--wire) minmax(0, 1fr);
  align-items: center;
  animation: window-in 0.95s var(--ease-out) 0.46s backwards;
}

/* チャットの窓。**框は `home.css` の `.window-frame` と同じ作り**
   （上バー + ヘアライン + r12 + 浮く影）だが、上バーにはタブを載せるので
   別のクラスにしてある。 */
.s-chat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-float);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.s-chat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
}

.s-chat-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);
  margin-right: 30px;
}

/* 「Claude」「ChatGPT」のタブ。**ロゴは置かない**（配布物を持っていない
   マークを似せて描かない、という `home.css` の方針）。名前の文字だけ。 */
.s-tab {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: var(--pill);
}

.s-tab.is-on {
  color: var(--ink);
  background: var(--bg);
  box-shadow: var(--sh-ring);
}

.s-body {
  padding: 18px 18px 20px;
  display: grid;
  gap: 12px;
  align-content: start;
}

/* 発言。利用者は右寄せの淡い面、AI は左寄せで面を張らない。 */
.s-msg {
  max-width: 88%;
  font-size: 13.5px;
  line-height: 1.7;
}

.s-user {
  justify-self: end;
  background: var(--bg-raise);
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  padding: 10px 14px;
  color: var(--ink);
}

.s-ai {
  color: var(--body);
}

/* AI の「考えている」点 3 つ。 */
.s-typing {
  display: inline-flex;
  gap: 4px;
  padding: 6px 2px;
}

.s-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}

/* AllRev が動いた記録の行（ツール実行）。**行頭のラベルで「これは AllRev
   が動いた印」と言う**——チャットの本文とは別の種類の情報なので、面で
   囲って区別する。 */
.s-tools {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  background: var(--bg-card);
  max-width: 92%;
}

.s-tools-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.s-tool {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.5;
}

.s-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  justify-self: center;
}

.s-tool.is-gate .s-dot {
  background: var(--warn);
}

/* 状態の文字。素の状態は「完了」／「承認待ち」（動いている最中の
   「実行中」は出番のときだけ重ねる）。 */
.s-state {
  position: relative;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.s-state-run {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
}

/* 承認待ちのカード。**押せる見た目にしない**（ボタン風の面だが、これは
   絵の中の管理画面の話で、ページ上で押しても何も起きない）。 */
.s-gate {
  max-width: 92%;
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  background: var(--bg);
}

.s-gate-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--warn);
}

.s-gate-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
}

.s-gate-body {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.6;
}

.s-gate-note {
  font-size: 11.5px;
  color: var(--muted);
}

/* チャットと AllRev をつなぐ線。点が往復する（左 → 右 → 左）。 */
.s-wire {
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--line2) 0 4px,
    transparent 4px 9px
  );
}

.s-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--b600);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
  opacity: 0;
}

/* AllRev と、つなげる先のタイル。SVG の線の上に HTML のタイルを % で置く
   （箱の比を SVG の viewBox（520 × 360）に固定してあるので、幅が変わっても
   線の端とタイルがずれない）。 */
.s-hub {
  position: relative;
  aspect-ratio: 520 / 360;
}

.s-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.s-lines path {
  fill: none;
  stroke: rgba(37, 99, 235, 0.45);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* 中心の AllRev。**マークは `favicon.svg` をそのまま読む**（写しを作らない）。 */
.s-core {
  position: absolute;
  left: calc(96 / 520 * 100%);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-float);
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
}

.s-core img {
  width: 34px;
  height: 34px;
}

.s-core span {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}

/* タイル 6 枚。左端が線の終点（x = 318 / 520）。 */
.s-tile {
  position: absolute;
  left: calc(318 / 520 * 100%);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 8px;
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: var(--sh-ring);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.s-tile .brand-mark {
  width: 18px;
  height: 18px;
}

.s-tile:nth-child(3) { top: calc(46 / 360 * 100%); }
.s-tile:nth-child(4) { top: calc(100 / 360 * 100%); }
.s-tile:nth-child(5) { top: calc(154 / 360 * 100%); }
.s-tile:nth-child(6) { top: calc(208 / 360 * 100%); }
.s-tile:nth-child(7) { top: calc(262 / 360 * 100%); }
.s-tile:nth-child(8) { top: calc(316 / 360 * 100%); }

/* 対応する AI チャット（ヒーローの下の 1 行）。`home.css` の `.logos` を
   そのまま使い、ここでは間隔だけ詰める。 */
.stage + .logos {
  margin-top: 48px;
}

@media (max-width: 980px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    justify-items: center;
  }

  .s-chat {
    width: 100%;
    max-width: 560px;
    min-height: 0;
  }

  /* 線は縦に。点の往復は横向きのまま書いてあるので、線ごと 90 度回す。 */
  .s-wire {
    width: var(--wire);
    transform: rotate(90deg);
    margin: calc(var(--wire) / 2 - 1px) 0;
  }

  .s-hub {
    width: 100%;
    max-width: 560px;
  }
}

@media (max-width: 520px) {
  .s-core {
    width: 64px;
    height: 64px;
  }

  .s-core img {
    width: 26px;
    height: 26px;
  }

  .s-core span {
    font-size: 9px;
  }

  .s-tile {
    height: 30px;
    font-size: 11px;
    gap: 6px;
    padding: 0 9px 0 7px;
  }

  .s-tile .brand-mark {
    width: 14px;
    height: 14px;
  }
}

/* ── ①の時間割（キーフレーム）──────────────────────────────
   **素の状態は全部見えている**（上の各ルール）。ここは「出番の前は隠す」と
   「最後に消えて最初へ戻る」だけを書く。100% で素の状態に戻るので、
   fill-mode は要らない。 */

@keyframes s-in-2 {
  0%, 2% { opacity: 0; transform: translateY(8px); }
  5%, 94% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}

@keyframes s-typing {
  0%, 6% { opacity: 0; }
  7%, 12% { opacity: 1; }
  13%, 100% { opacity: 0; }
}

@keyframes s-blink {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* ツール行の面。1 行目と同時に出て、最後に消える。 */
@keyframes s-in-13 {
  0%, 13% { opacity: 0; transform: translateY(8px); }
  15%, 94% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}

@keyframes s-in-24 {
  0%, 24% { opacity: 0; transform: translateY(6px); }
  26%, 94% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}

@keyframes s-in-35 {
  0%, 35% { opacity: 0; transform: translateY(6px); }
  37%, 94% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}

@keyframes s-in-47 {
  0%, 47% { opacity: 0; transform: translateY(8px); }
  50%, 94% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}

@keyframes s-in-53 {
  0%, 53% { opacity: 0; transform: translateY(8px); }
  56%, 94% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}

/* 状態の点。**動いている最中は薄い灰で脈打ち、終わると緑（承認待ちは
   橙）になる。** 素の状態が「終わったあと」なので、キーフレームは
   「その前は灰」だけを書く。 */
@keyframes s-dot-13 {
  0%, 13% { background: var(--faint); transform: scale(0.8); }
  14% { transform: scale(1.15); }
  16% { transform: scale(0.85); }
  18% { transform: scale(1.15); }
  20% { transform: scale(0.85); }
  21.9% { background: var(--faint); transform: scale(1); }
  22%, 100% { background: var(--ok); transform: none; }
}

@keyframes s-dot-24 {
  0%, 24% { background: var(--faint); transform: scale(0.8); }
  25% { transform: scale(1.15); }
  27% { transform: scale(0.85); }
  29% { transform: scale(1.15); }
  31% { transform: scale(0.85); }
  32.9% { background: var(--faint); transform: scale(1); }
  33%, 100% { background: var(--ok); transform: none; }
}

@keyframes s-dot-35 {
  0%, 35% { background: var(--faint); transform: scale(0.8); }
  36% { transform: scale(1.15); }
  38% { transform: scale(0.85); }
  40% { transform: scale(1.15); }
  42% { transform: scale(0.85); }
  43.9% { background: var(--faint); transform: scale(1); }
  44%, 100% { background: var(--warn); transform: none; }
}

/* 「実行中」の文字を、終わりの文字の上に重ねる。 */
@keyframes s-run-13 { 0%, 13% { opacity: 0; } 14%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes s-run-24 { 0%, 24% { opacity: 0; } 25%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes s-run-35 { 0%, 35% { opacity: 0; } 36%, 43% { opacity: 1; } 44%, 100% { opacity: 0; } }

@keyframes s-done-13 { 0%, 21.9% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes s-done-24 { 0%, 32.9% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes s-done-35 { 0%, 43.9% { opacity: 0; } 44%, 100% { opacity: 1; } }

/* 線を渡る点。3 往復（13→22 / 24→33 / 35→44）。 */
@keyframes s-pulse {
  0%, 13.5% { opacity: 0; transform: translateX(0); }
  14% { opacity: 1; transform: translateX(0); }
  17.5% { transform: translateX(var(--wire)); }
  18.5% { transform: translateX(var(--wire)); }
  21.5% { opacity: 1; transform: translateX(0); }
  22%, 24.5% { opacity: 0; transform: translateX(0); }
  25% { opacity: 1; }
  28.5% { transform: translateX(var(--wire)); }
  29.5% { transform: translateX(var(--wire)); }
  32.5% { opacity: 1; transform: translateX(0); }
  33%, 35.5% { opacity: 0; transform: translateX(0); }
  36% { opacity: 1; }
  39.5% { transform: translateX(var(--wire)); }
  40.5% { transform: translateX(var(--wire)); }
  43.5% { opacity: 1; transform: translateX(0); }
  44%, 100% { opacity: 0; transform: translateX(0); }
}

/* 中心の AllRev。点が着いた瞬間に一度だけ光る（影の輪を広げる）。 */
@keyframes s-core {
  0%, 17% { box-shadow: var(--sh-float), 0 0 0 0 rgba(37, 99, 235, 0.28); }
  17.5% { box-shadow: var(--sh-float), 0 0 0 0 rgba(37, 99, 235, 0.28); }
  21% { box-shadow: var(--sh-float), 0 0 0 16px rgba(37, 99, 235, 0); }
  28.5% { box-shadow: var(--sh-float), 0 0 0 0 rgba(37, 99, 235, 0.28); }
  32% { box-shadow: var(--sh-float), 0 0 0 16px rgba(37, 99, 235, 0); }
  39.5% { box-shadow: var(--sh-float), 0 0 0 0 rgba(37, 99, 235, 0.28); }
  43% { box-shadow: var(--sh-float), 0 0 0 16px rgba(37, 99, 235, 0); }
  43.1%, 100% { box-shadow: var(--sh-float), 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* 中心から先への線。出番のときだけ濃く描き（`pathLength="100"` なので
   dasharray 100 で 1 本ぶん）、それ以外は薄く残す。 */
@keyframes s-path-meta {
  0%, 17% { stroke-dashoffset: 100; opacity: 0.35; }
  20.5% { stroke-dashoffset: 0; opacity: 1; }
  24% { opacity: 1; }
  28% { opacity: 0.35; stroke-dashoffset: 0; }
  38.5% { stroke-dashoffset: 100; opacity: 0.35; }
  42% { stroke-dashoffset: 0; opacity: 1; }
  46% { opacity: 1; }
  50%, 100% { opacity: 0.35; stroke-dashoffset: 0; }
}

@keyframes s-path-google {
  0%, 28% { stroke-dashoffset: 100; opacity: 0.35; }
  31.5% { stroke-dashoffset: 0; opacity: 1; }
  35% { opacity: 1; }
  39%, 100% { opacity: 0.35; stroke-dashoffset: 0; }
}

/* 行き先のタイル。線が着いたら灯る（青い輪 + 淡い地）。 */
@keyframes s-tile-meta {
  0%, 19.5% { box-shadow: var(--sh-ring); background: var(--bg); }
  21%, 25% { box-shadow: inset 0 0 0 1px var(--b600); background: var(--b-tint); }
  29% { box-shadow: var(--sh-ring); background: var(--bg); }
  41% { box-shadow: var(--sh-ring); background: var(--bg); }
  42.5%, 47% { box-shadow: inset 0 0 0 1px var(--b600); background: var(--b-tint); }
  51%, 100% { box-shadow: var(--sh-ring); background: var(--bg); }
}

@keyframes s-tile-google {
  0%, 30.5% { box-shadow: var(--sh-ring); background: var(--bg); }
  32%, 36% { box-shadow: inset 0 0 0 1px var(--b600); background: var(--b-tint); }
  40%, 100% { box-shadow: var(--sh-ring); background: var(--bg); }
}

@media (prefers-reduced-motion: no-preference) {
  .s-user { animation: s-in-2 var(--loop) linear infinite; }
  .s-typing { animation: s-typing var(--loop) linear infinite; }
  .s-typing i { animation: s-blink 0.9s ease-in-out infinite; }
  .s-typing i:nth-child(2) { animation-delay: 0.15s; }
  .s-typing i:nth-child(3) { animation-delay: 0.3s; }
  .s-tools { animation: s-in-13 var(--loop) linear infinite; }
  .s-tool-2 { animation: s-in-24 var(--loop) linear infinite; }
  .s-tool-3 { animation: s-in-35 var(--loop) linear infinite; }
  .s-tool-1 .s-dot { animation: s-dot-13 var(--loop) linear infinite; }
  .s-tool-2 .s-dot { animation: s-dot-24 var(--loop) linear infinite; }
  .s-tool-3 .s-dot { animation: s-dot-35 var(--loop) linear infinite; }
  .s-tool-1 .s-state-run { animation: s-run-13 var(--loop) linear infinite; }
  .s-tool-2 .s-state-run { animation: s-run-24 var(--loop) linear infinite; }
  .s-tool-3 .s-state-run { animation: s-run-35 var(--loop) linear infinite; }
  .s-tool-1 .s-state-done { animation: s-done-13 var(--loop) linear infinite; }
  .s-tool-2 .s-state-done { animation: s-done-24 var(--loop) linear infinite; }
  .s-tool-3 .s-state-done { animation: s-done-35 var(--loop) linear infinite; }
  .s-reply { animation: s-in-47 var(--loop) linear infinite; }
  .s-gate { animation: s-in-53 var(--loop) linear infinite; }
  .s-pulse { animation: s-pulse var(--loop) linear infinite; }
  .s-core { animation: s-core var(--loop) linear infinite; }
  .s-lines path {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
  }
  .s-path-meta { animation: s-path-meta var(--loop) linear infinite; }
  .s-path-google { animation: s-path-google var(--loop) linear infinite; }
  .s-tile-meta { animation: s-tile-meta var(--loop) linear infinite; }
  .s-tile-google { animation: s-tile-google var(--loop) linear infinite; }
}

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

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

/* ①つながる: 左（チャット）と右（AllRev）が寄り、間の線が引かれ、
   中央にチェックが入る。 */
@keyframes fa-slide-l {
  0% { transform: translateX(-10px); opacity: 0.4; }
  22%, 88% { transform: none; opacity: 1; }
  100% { transform: translateX(-10px); opacity: 0.4; }
}

@keyframes fa-slide-r {
  0% { transform: translateX(10px); opacity: 0.4; }
  22%, 88% { transform: none; opacity: 1; }
  100% { transform: translateX(10px); opacity: 0.4; }
}

@keyframes fa-draw {
  0%, 24% { stroke-dashoffset: 100; }
  48%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

@keyframes fa-pop {
  0%, 50% { transform: scale(0); opacity: 0; }
  60%, 88% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ②同じ会話で: 吹き出しの中の行が 1 本ずつ書かれる。 */
@keyframes fa-line-1 {
  0%, 8% { stroke-dashoffset: 100; opacity: 0; }
  10% { opacity: 1; }
  24%, 90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes fa-line-2 {
  0%, 30% { stroke-dashoffset: 100; opacity: 0; }
  32% { opacity: 1; }
  46%, 90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes fa-line-3 {
  0%, 52% { stroke-dashoffset: 100; opacity: 0; }
  54% { opacity: 1; }
  68%, 90% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes fa-dot-1 { 0%, 8% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-dot-2 { 0%, 30% { opacity: 0; } 32%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fa-dot-3 { 0%, 52% { opacity: 0; } 54%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* ③人が承認: 手が伸びてきて、チェックが引かれ、輪が広がる。 */
/* 矢印のカーソルが寄ってきて、押す（少し縮む）。 */
@keyframes fa-hand {
  0% { transform: translate(16px, 12px); opacity: 0; }
  22%, 34% { transform: none; opacity: 1; }
  38% { transform: scale(0.88); opacity: 1; }
  44%, 50% { transform: none; opacity: 1; }
  64%, 100% { transform: translate(16px, 12px); opacity: 0; }
}

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

@keyframes fa-ring {
  0%, 40% { transform: scale(0.8); opacity: 0; }
  46% { opacity: 0.5; }
  70%, 100% { transform: scale(1.18); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .fa-left { animation: fa-slide-l 5s var(--ease-out) infinite; }
  .fa-right { animation: fa-slide-r 5s var(--ease-out) infinite; }
  .fa-link { stroke-dasharray: 100; animation: fa-draw 5s linear infinite; }
  .fa-ok { transform-origin: 80px 50px; animation: fa-pop 5s var(--ease-out) infinite; }

  .fa-chat .fa-line path { stroke-dasharray: 100; }
  .fa-line-1 path { animation: fa-line-1 5s linear 0.8s infinite; }
  .fa-line-2 path { animation: fa-line-2 5s linear 0.8s infinite; }
  .fa-line-3 path { animation: fa-line-3 5s linear 0.8s infinite; }
  .fa-line-1 circle { animation: fa-dot-1 5s linear 0.8s infinite; }
  .fa-line-2 circle { animation: fa-dot-2 5s linear 0.8s infinite; }
  .fa-line-3 circle { animation: fa-dot-3 5s linear 0.8s infinite; }

  .fa-hand { transform-origin: 112px 66px; animation: fa-hand 5s var(--ease-out) 1.6s infinite; }
  .fa-check { stroke-dasharray: 100; animation: fa-check 5s linear 1.6s infinite; }
  .fa-ring { transform-origin: 80px 50px; opacity: 0; animation: fa-ring 5s ease-out 1.6s infinite; }
}

/* 動きを止めたときの輪は要らない（チェックだけで足りる）。 */
@media (prefers-reduced-motion: reduce) {
  .fa-ring,
  .fa-hand {
    display: none;
  }
}

/* ── できること / できないこと ────────────────────────── */

.m-can {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.m-can-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
}

.m-can-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.m-can-item .use-icon {
  margin: 0;
}

.m-can-item h3 {
  font-size: 14.5px;
}

.m-can-item p {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.75;
}

/* 決めていること 3 つ。**面を張る唯一のカード**（節の中で性格が違う 1 枚）。 */
.m-cannot {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-ring);
  padding: 26px 28px;
}

.m-cannot h3 {
  font-size: 15px;
}

.m-cannot p {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.m-cannot ul {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.m-cannot li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--body);
}

.m-cannot li strong {
  color: var(--ink);
  font-weight: 500;
}

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

@media (max-width: 980px) {
  .m-can {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .m-can-list {
    grid-template-columns: 1fr;
  }
}

/* ── ③ つなげる先の軌道 ──────────────────────────────── */

.m-orbit-wrap {
  display: grid;
  justify-items: center;
}

.m-orbit {
  --size: min(560px, 92vw);
  --r1: calc(var(--size) * 0.24);
  --r2: calc(var(--size) * 0.44);
  --dur1: 70s;
  --dur2: 110s;
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-inline: auto;
}

.m-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed var(--line2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.m-ring-1 {
  width: calc(var(--r1) * 2);
  height: calc(var(--r1) * 2);
}

.m-ring-2 {
  width: calc(var(--r2) * 2);
  height: calc(var(--r2) * 2);
}

/* 輪の回転は、線と衛星をまとめて持つ箱（`.m-spin`）に掛ける。
   輪の枠そのものは `translate(-50%, -50%)` を持つので、そこに回転を
   足すと中心がずれる。 */
.m-spin {
  position: absolute;
  inset: 0;
}

.m-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-float);
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
  z-index: 2;
}

.m-center img {
  width: 40px;
  height: 40px;
}

.m-center span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}

/* 衛星 1 つ = 3 段の入れ子。
   `.m-sat`     … 輪の上の位置（角度 → 半径ぶん外へ）
   `.m-sat-fix` … その位置を中心に据え、位置決めの回転を打ち消す
   `.m-sat-body`… 輪の回転を打ち消す（回っても正立）
   `--i` が何番目か、`--n` が輪に何個あるか。 */
.m-sat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--i) * 360deg / var(--n))) translateX(var(--r));
}

.m-ring-1-sats .m-sat { --r: var(--r1); }
.m-ring-2-sats .m-sat { --r: var(--r2); }

.m-sat-fix {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * -360deg / var(--n)));
}

.m-sat-body {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 8px;
  border-radius: var(--pill);
  background: var(--bg);
  box-shadow: var(--sh-ring);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.m-sat-body .brand-mark {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes m-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes m-unspin {
    to { transform: rotate(-360deg); }
  }

  .m-ring-1-sats { animation: m-spin var(--dur1) linear infinite; }
  .m-ring-1-sats .m-sat-body { animation: m-unspin var(--dur1) linear infinite; }
  .m-ring-2-sats { animation: m-spin var(--dur2) linear infinite reverse; }
  .m-ring-2-sats .m-sat-body { animation: m-unspin var(--dur2) linear infinite reverse; }

  /* hover では「止める」だけ（位置も大きさも変えない）。 */
  .m-orbit:hover .m-spin,
  .m-orbit:hover .m-sat-body {
    animation-play-state: paused;
  }
}

/* 狭い画面では、輪を段の外まで広げる（`--size` = 画面幅）代わりに半径を
   詰める。**外側の輪の衛星は「Search Console」がいちばん長い**ので、
   その半分（およそ 52px）+ 半径が画面の半分に収まる比が 0.37。
   はみ出しは `.m-orbit-wrap` で切る（切れるのは数 px の余白だけ）。 */
@media (max-width: 600px) {
  .m-orbit-wrap {
    margin-inline: -20px;
    overflow: hidden;
  }

  .m-orbit {
    --size: min(560px, 100vw);
    --r1: calc(var(--size) * 0.19);
    --r2: calc(var(--size) * 0.375);
  }

  /* 内側の輪は**マークだけの丸**にする。名前付きのまま 2 つの輪を並べると、
     内外の札が重なる瞬間が必ず来る（幅 400px では半径の差が札 1 枚ぶん
     取れない）。だから内側に置くのはマークを持つ先だけ（HTML 側の注記）。 */
  .m-ring-1-sats .m-sat-text {
    display: none;
  }

  .m-ring-1-sats .m-sat-body {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .m-center {
    width: 84px;
    height: 84px;
  }

  .m-center img {
    width: 30px;
    height: 30px;
  }

  .m-sat-body {
    height: 28px;
    font-size: 10.5px;
    gap: 5px;
    padding: 0 9px 0 6px;
  }

  .m-sat-body .brand-mark {
    width: 14px;
    height: 14px;
  }
}

/* 軌道の下・カードの前の小見出し（同じ節の中の 2 つめの絵なので h3）。 */
.m-cards-head {
  margin-top: clamp(48px, 5vw, 72px);
  max-width: 640px;
}

.m-cards-head h3 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
}

.m-cards-head p {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--muted);
}

.pc-carousel {
  margin-top: 28px;
}

.pc-carousel + .wrap .int-note {
  margin-top: 8px;
}

/* ── 媒体ごとにできること（横に送るカード）──────────────────
   zernio.com の "Everything social, not just posting" の型。
   **横スクロールは CSS だけ**（`overflow-x: auto` + `scroll-snap`）。矢印は
   JS が足す飾りで、無くても指とホイールで送れる。

   **媒体色はカードの見出しの面にだけ許す**（本文の青は「押せる場所」の色で、
   こちらは「その媒体の画面」を名乗る面。役割が違うので混ざらない）。
   白い文字を載せるので、各社の色より**一段濃い側**を採る（4.5:1 を切る色は
   そのまま使わない。GA4 の橙・Instagram の桃・LINE の緑がそれにあたる）。 */

.pc-carousel {
  position: relative;
}

/* 段の幅で始めて、右端は画面の外へ続く（続きがあることが見える）。
   左の余白は `.wrap` と同じ計算。 */
.pc-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden; /* 出現の translateY で縦にはみ出させない */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px max(20px, calc((100% - var(--wrap)) / 2)) 24px;
  /* **snap の基準を padding の内側にする。** 無いと mandatory の snap が
     初期状態で 1 枚目を padding-box の左端へ寄せ、左の余白が消える
     （見た目は「1 枚目が切れて始まる」）。 */
  scroll-padding-left: max(20px, calc((100% - var(--wrap)) / 2));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pc-track::-webkit-scrollbar {
  display: none;
}

/* 末尾の空き。**mandatory の snap は「カードの頭」にしか止まれない**ので、
   最後のカードを頭まで送れるだけの幅が右に無いと、終端の数枚が
   切れたまま届かない（矢印を押しても手前の snap 点へ戻る）。
   幅は「段の幅 − カード 1 枚 − 間隔」= 最後のカードが左端に着く分。 */
.pc-track::after {
  content: "";
  flex: none;
  width: calc(100% - 316px);
}

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

.pc {
  position: relative;
  flex: none;
  width: 300px;
  height: 430px;
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-snap-align: start;
  background: linear-gradient(160deg, var(--pc-a), var(--pc-b));
  box-shadow: var(--sh-float);
  display: flex;
  flex-direction: column;
}

.pc-head {
  padding: 22px 20px 16px;
}

.pc-head h3 {
  color: #fff;
  font-size: 18px;
  line-height: 1.45;
  min-height: 2.9em;
}

/* 媒体名のピル。押せない（ボタンではない）ので hover も付けない。 */
.pc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  height: 32px;
  padding: 0 12px 0 14px;
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

/* 画面の見本。左と上に角丸、右と下は切れて続く（zernio と同じ構え）。 */
.pc-shot {
  flex: 1;
  margin-left: 18px;
  background: var(--bg);
  border-radius: 10px 0 0 0;
  box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

/* 見本は面の幅に収める（右端で数字が切れると、行が読めない）。
   「続きがある」のは下端だけ。 */
.pm {
  padding: 14px 14px 0;
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.pm-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.pm-head span {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
}

.pm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--body);
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}

.pm-row b {
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-row > span {
  flex: none;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.pm-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
}

.pm-dot.ok { background: var(--ok); }
.pm-dot.warn { background: var(--warn); }

.pm-thumb,
.pm-file,
.pm-avatar {
  flex: none;
  display: block;
  background: var(--bg-raise);
  box-shadow: var(--sh-ring);
}

.pm-thumb { width: 22px; height: 30px; border-radius: 3px; }
.pm-file { width: 18px; height: 22px; border-radius: 2px; }
.pm-avatar { width: 20px; height: 20px; border-radius: 50%; }

.pm-tag {
  border-radius: var(--pill);
  padding: 1px 8px;
  background: var(--bg-raise);
  color: var(--muted) !important;
}

.pm-tag.ok { background: rgba(21, 128, 61, 0.1); color: var(--ok) !important; }
.pm-tag.warn { background: rgba(194, 65, 12, 0.1); color: var(--warn) !important; }

.pm-note {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: var(--r);
  background: var(--bg-card);
  box-shadow: var(--sh-ring);
}

.pm-note.warn {
  color: var(--warn);
  background: rgba(194, 65, 12, 0.06);
}

/* GA4 の横棒。長さは `--w`（説明用の見本）。 */
.pm-bar {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink);
}

.pm-bar b { font-weight: 500; }

.pm-bar i {
  display: block;
  height: 10px;
  border-radius: 2px;
  background: var(--bg-raise);
  position: relative;
  overflow: hidden;
}

.pm-bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w);
  background: var(--pc-b);
  border-radius: 2px;
}

.pm-bar span {
  font-size: 10.5px;
  color: var(--muted);
}

/* Instagram の投稿グリッド。 */
.pm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.pm-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: linear-gradient(150deg, var(--bg-raise), var(--line2));
}

/* ロゴのタイル。右下に浮く（配布物のロゴをそのまま。文字だけの先には無い）。 */
.pc-tile {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 36px -14px rgba(15, 23, 42, 0.45);
  display: grid;
  place-items: center;
}

.pc-tile .brand-mark {
  width: 40px;
  height: 40px;
}

/* 媒体色（見出しの面）。**白文字で 4.5:1 を切らない濃さ**に寄せてある。 */
.pc-meta { --pc-a: #0052cc; --pc-b: #0a66e6; }
.pc-gads { --pc-a: #1557b0; --pc-b: #1a73e8; }
.pc-yahoo { --pc-a: #0f7a35; --pc-b: #148c3f; }
.pc-tiktokads { --pc-a: #161616; --pc-b: #333333; }
.pc-gsc { --pc-a: #1e3a8a; --pc-b: #1d4ed8; }
.pc-ga4 { --pc-a: #a34e00; --pc-b: #c45f00; }
.pc-instagram { --pc-a: #7a2fa0; --pc-b: #c1275f; }
.pc-tiktok { --pc-a: #161616; --pc-b: #333333; }
.pc-drive { --pc-a: #137333; --pc-b: #1e8e3e; }
.pc-wordpress { --pc-a: #135e80; --pc-b: #21759b; }
.pc-liny { --pc-a: #0f766e; --pc-b: #11827a; }

/* 矢印。段の外側に浮く丸（`--sh-xl` = ドロップダウン級の影）。
   端に着いた側は JS が `hidden` にする。 */
.pc-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-top: -30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--sh-xl);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.pc-arrow:hover {
  background: var(--bg-card);
  border-color: var(--line2);
}

.pc-arrow[hidden] {
  display: none;
}

.pc-arrow-prev { left: max(8px, calc((100% - var(--wrap)) / 2 - 56px)); }
.pc-arrow-next { right: max(8px, calc((100% - var(--wrap)) / 2 - 56px)); }

@media (max-width: 1300px) {
  .pc-arrow-prev { left: 8px; }
  .pc-arrow-next { right: 8px; }
}

@media (max-width: 600px) {
  .pc {
    width: min(300px, 82vw);
    height: 410px;
  }

  .pc-arrow {
    display: none;
  }
}

/* ── スクロール出現（`home.css` の②と同じ作り）───────────────
   隠す規則は `.js-reveal` の下だけ。対象の並びはページ側の JS
   （`REVEAL_SELECTOR`）と同じ 1 本。`home.css` が持つ部品（章ヘッダ・
   声明・FIG・ほかのサービス・FAQ・CTA・フォーム）はあちらの規則が効く。 */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal :is(.m-can-item, .m-cannot, .m-orbit-wrap, .stage + .logos, .pc) {
    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(.m-can-item, .m-cannot, .m-orbit-wrap, .stage + .logos, .pc):not(.is-in) {
    opacity: 0;
    transform: translateY(var(--rise)) scale(0.98);
  }

  .js-reveal .m-cannot {
    transition-delay: 130ms;
  }

  .js-reveal .m-can-item:nth-child(2n) {
    transition-delay: 90ms;
  }

  /* 横に並ぶカードは、見えている 4 枚が左から順に出る。 */
  .js-reveal .pc:nth-child(2) { transition-delay: 100ms; }
  .js-reveal .pc:nth-child(3) { transition-delay: 200ms; }
  .js-reveal .pc:nth-child(n + 4) { transition-delay: 300ms; }
}

@media (prefers-reduced-motion: reduce) {
  .stage,
  .s-user,
  .s-typing,
  .s-typing i,
  .s-tools,
  .s-tool-2,
  .s-tool-3,
  .s-dot,
  .s-state-run,
  .s-state-done,
  .s-reply,
  .s-gate,
  .s-pulse,
  .s-core,
  .s-lines path,
  .s-tile,
  .fa *,
  .m-spin,
  .m-sat-body {
    animation: none;
  }

  /* 「考えている」点は出番の無い飾りなので、止めるときは消す。 */
  .s-typing {
    display: none;
  }
}

/* ── 狭い画面の文字の段（〜640px）───────────────────────────
   値は `home.css` の `--m-*`（linear.app のモバイル版の実測）を読むだけ。 */
@media (max-width: 640px) {
  .m-can-item h3,
  .m-cannot h3 {
    font-size: var(--m-h4);
  }

  .m-can-item p {
    font-size: var(--m-desc);
    line-height: 1.75;
  }

  .m-cards-head h3 {
    font-size: var(--m-h3);
  }

  .m-cards-head p {
    font-size: var(--m-body);
    line-height: 1.7;
  }

  .m-cannot li {
    font-size: var(--m-small);
  }

  /* **横に流れるカードは動かさない**（`home.css` の横スワイプの列と同じ。
     指で送っている最中にカードが浮き上がってくると送りにくい）。隠し規則
     （上の出現の節）は `:is()` の中の `.stage + .logos` が詳細度を 4 段に
     引き上げているので、こちらは 5 段にして読み込み順に頼らない。 */
  .js-reveal .pc-carousel .pc-track > .pc:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}