/* ============================================
   5つのLAB: 4秒ループの図解（CSSのみ）
   - 既定は「完成形」。動きは html.ld-on（JSが付与）かつ reduced-motion でないときだけ
   - 全部品が周期 4000ms を共有。時間割:
       0–80%（0–3200ms） 登場 / 80–84% 完成形で保持 / 84–96% 同時リセット / 96–100% 開始と同じ見た目
   - 出番のずれは animation-delay を使わず、--fs / --fl（登場区間3200msに対する%）と linear() で作る
       開始時刻 = --fs × 3200ms、長さ = --fl × 3200ms（4000ms周期に対しては ×0.8 で%換算）
   - キーフレームは from/to の2点だけ（timing function が周期全体にかかるように）
   ============================================ */

.lab-diagram {
  margin: 0 0 22px; max-width: 460px; padding: 12px 14px 10px;
  border-radius: 16px; border: 1px solid var(--lab-line, rgba(15, 18, 34, .08));
  background: #fff; box-shadow: 0 14px 30px -26px rgba(15, 18, 34, .45);
}
.lab-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.lab-diagram text { font-family: var(--font-jp-display, "Zen Kaku Gothic New", sans-serif); }
.lab-diagram figcaption { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--lab-sub, #474c63); text-align: center; }

/* 部品 */
.ld-label { font-size: 13px; font-weight: 800; fill: var(--lab-ink, #0f1222); text-anchor: middle; }
.ld-sub { font-size: 11.5px; font-weight: 800; fill: var(--lab-sub, #474c63); }
.ld-tag { font-size: 11.5px; font-weight: 800; fill: var(--lab-c); text-anchor: middle; }
.ld-en { font-family: var(--font-en-display, "Space Grotesk", sans-serif) !important; font-size: 9px; font-weight: 700; letter-spacing: .14em; fill: var(--lab-c); text-anchor: middle; }
.ld-line { fill: none; stroke: var(--lab-c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ld-thick { stroke-width: 5; }
.ld-icon { fill: none; stroke: var(--lab-ink, #0f1222); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ld-ghost { fill: none; stroke: rgba(15, 18, 34, .14); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ld-fill { fill: var(--lab-c); }
.ld-soft { fill: var(--lab-soft); }
.ld-paper { fill: #fff; }
.ld-white { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 変形の基準（SVG内でも要素自身の箱で回す・拡大する） */
.ld-a { transform-box: fill-box; transform-origin: 50% 50%; }
.ld-o-lb { transform-origin: 0% 100%; }
.ld-o-cb { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .ld-on .lab-diagram .ld-a {
    --fs: 0; --fl: 10;
    --ld-s: calc(var(--fs) * .8%);
    --ld-e: calc((var(--fs) + var(--fl)) * .8%);
    --ld-m: calc((var(--fs) + var(--fl) / 2) * .8%);
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-play-state: paused; /* 画面に入るまで止めておく */
    /* 登場 → 保持 → 84–96% で同時に戻す → 96–100% は開始と同じ */
    animation-timing-function: linear(0, 0 var(--ld-s), 1 var(--ld-e), 1 84%, 0 96%, 0 100%);
  }
  .ld-on .lab-diagram.is-playing .ld-a { animation-play-state: running; }

  /* 往復（出番の中で行って戻る。消さない） */
  .ld-on .lab-diagram .ld-a.ld-swing,
  .ld-on .lab-diagram .ld-a.ld-pulse { animation-timing-function: linear(0, 0 var(--ld-s), 1 var(--ld-m), 0 var(--ld-e), 0 100%); }
  /* 回転（1回転して始点と同じ見た目で止まる。消さない） */
  .ld-on .lab-diagram .ld-a.ld-spin { animation-timing-function: linear(0, 0 var(--ld-s), 1 var(--ld-e), 1 100%); }

  .ld-on .lab-diagram .ld-draw { stroke-dasharray: 1; animation-name: ld-draw; }
  .ld-on .lab-diagram .ld-pop { animation-name: ld-pop; }
  .ld-on .lab-diagram .ld-in { animation-name: ld-in; }
  .ld-on .lab-diagram .ld-move { animation-name: ld-move; }
  .ld-on .lab-diagram .ld-swing { animation-name: ld-swing; }
  .ld-on .lab-diagram .ld-pulse { animation-name: ld-pulse; }
  .ld-on .lab-diagram .ld-spin { animation-name: ld-spin; }
}

@keyframes ld-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ld-pop { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
@keyframes ld-in { from { opacity: 0; translate: var(--dx, 0px) var(--dy, 0px); } to { opacity: 1; translate: 0 0; } }
@keyframes ld-move { from { translate: var(--tx, 0px) var(--ty, 0px); } to { translate: 0 0; } } /* 始点(--tx)から完成形の位置へ */
@keyframes ld-swing { from { rotate: 0deg; } to { rotate: var(--sw, -10deg); } }
@keyframes ld-pulse { from { scale: 1; } to { scale: var(--ps, 1.14); } }
@keyframes ld-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

@media (max-width: 760px) {
  .lab-diagram { max-width: none; margin: 0 0 14px; padding: 10px 10px 8px; border-radius: 14px; }
}

/* ---------- 下層ページ用（/web/ /app/）: 色・余白だけ差し替え。部品と時間割は共通 ---------- */
.ld-mute { stroke: var(--lab-sub, #474c63); opacity: .55; }
.lab-diagram .ld-mid { text-anchor: middle; }
.lab-diagram .ld-start { text-anchor: start; }

/* WEB LAB（明るい面・ブルー） */
.lab-diagram--web {
  --lab-c: #2B7BFA; --lab-soft: rgba(43, 123, 250, .13); --lab-ink: #1d1d1f; --lab-sub: #6e6e73;
  --lab-line: rgba(0, 0, 0, .08);
  --font-jp-display: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en-display: "Inter", sans-serif;
  max-width: 560px; margin: 0 auto clamp(28px, 4vw, 44px); padding: 16px 18px 12px; border-radius: 20px;
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .12);
}
.lab-diagram--web figcaption { color: var(--lab-sub); font-weight: 500; }

/* APP LAB（暗い面・シアン） */
.lab-diagram--app {
  --lab-c: #22E6FF; --lab-soft: rgba(34, 230, 255, .16); --lab-ink: #F2F5FF; --lab-sub: #C5CBE8;
  --lab-line: rgba(124, 160, 255, .22);
  --font-jp-display: var(--font-jp, "Noto Sans JP", sans-serif);
  --font-en-display: var(--font-mono, monospace);
  max-width: 520px; margin: 14px 0 16px; padding: 14px 14px 10px; border-radius: 14px;
  background: rgba(7, 7, 18, .55); box-shadow: none;
}
.lab-diagram--app .ld-paper { fill: #0E0E22; }
.lab-diagram--app .ld-ghost { stroke: rgba(197, 203, 232, .22); }
.lab-diagram--app .ld-white { stroke: #070712; }
.lab-diagram--app .ld-hot { stroke: #FF3DA6; }
.lab-diagram--app .ld-hot-fill { fill: #FF3DA6; }
.lab-diagram--app .ld-bar-old { fill: rgba(197, 203, 232, .16); }
.lab-diagram--app .ld-chip-t { fill: var(--lab-c); }
.lab-diagram .ld-dash { stroke-dasharray: 3 4; }

@media (max-width: 760px) {
  .lab-diagram--web { margin: 0 auto 24px; padding: 12px 10px 8px; }
  .lab-diagram--app { margin: 12px 0 14px; padding: 10px 8px 8px; }
}

/* ---------- 下層ページ（/web/ /app/）の文字サイズ基準：共通トークン ----------
   役割ごとに同じ値を使う。12px 未満は使わない。本文 16px・ヒーロー（h1・リード）は各ページの既存値のまま。
   （トップページはこのトークンを参照しない） */
:root {
  --lt-micro: 12px;      /* チップ・バッジ・必須/任意・税別・© など最小の文字 */
  --lt-label: 13px;      /* kicker・英字ラベル・フッター列見出し・カテゴリ */
  --lt-step: 13.5px;     /* STEP 番号・連番（01 など） */
  --lt-note: 14px;       /* 注記・同意文・フォーム補足・料金の補足 */
  --lt-form-label: 15px; /* フォームの項目名・選択チップ */
  --lt-body: 16px;       /* 本文（カード本文・説明文） */
  --lt-btn: 16px;        /* ボタン（モバイル） */
  --lt-table: 16px;      /* 比較表のセル */
  --lt-table-head: 15px; /* 比較表の行見出し（モバイル） */
  --lt-h3: 18px;         /* カードの h3（同じ役割は同じサイズ） */
  --lt-h3-feature: clamp(1.2rem, 2.2vw, 1.4rem); /* 大きいカードの見出し（強み・場面） */
}

/* 図解ラベル：モバイルで描画サイズ 13px 以上（viewBox の縮小率込み）。
   文字を大きくする分、図の左右の余白を詰めて縮小率を上げる。部品の位置・時間割はそのまま */
@media (max-width: 480px) {
  .lab-diagram--web { padding: 10px 4px 8px; }
  .lab-diagram--web[data-ld="web-after"] { padding: 18px 4px 12px !important; }
  .lab-diagram--web .ld-label,
  .lab-diagram--web .ld-sub,
  .lab-diagram--web .ld-tag { font-size: 15px !important; }

  .lab-diagram--app { padding: 8px 4px 8px; }
  .lab-diagram--app .ld-label,
  .lab-diagram--app .ld-sub,
  .lab-diagram--app .ld-tag { font-size: 14.5px !important; }
  /* カードの内側に置く図は、カードの余白まで少し広げる */
  .scene .lab-diagram--app { margin-left: -14px; margin-right: -14px; }
  .lab-diagram--app[data-ld="app-pr"] { margin-left: -12px !important; margin-right: -12px !important; }
  .lab-diagram--app[data-ld="app-pr"] .ld-label { font-size: 14px !important; }
  .lab-diagram--app[data-ld="app-pr"] .ld-start { transform: translateX(-5px); }
  .lab-diagram--app[data-ld="app-pr"] path[d^="M102"] { translate: 5px 0; } /* 下書きの横棒（長さ・動きはそのまま） */
  /* /app/ 既製の型→オリジナル／コスト（viewBox 320 幅。360px 画面で描画 13px 以上） */
  .lab-diagram--app[data-ld="app-original"] .ld-label,
  .lab-diagram--app[data-ld="app-original"] .ld-sub { font-size: 15.5px !important; }
}