/* ============================================================================
   Hiragana Trial — Landing page
   lp.ja.html / lp.en.html / lp.th.html の3枚が共有する唯一のスタイルシート。
   ・色・寸法・書体はすべて design-system/tokens/tokens.css のトークン経由。
     新規の直書き hex は 0 件（#記号そのものを使っていない）。
   ・言語差は class ではなく html[lang] で吸収する（3枚のクラス語彙は同一）。
   ・JavaScript なし。外部ドメイン参照なし。
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.85;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: anywhere;   /* はみ出しの最終防衛線（特にタイ語） */
}

h1, h2, h3, p, ul, figure, figcaption { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; }

a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }

/* ---- 言語別のタイポグラフィ -------------------------------------------- */
/* 日本語: 折り返し位置が自由なので禁則を明示する */
html[lang="ja"] body { line-break: strict; word-break: normal; }
/* 英語: 同内容が1.5〜2倍。見出しは2行前提。自動ハイフネーションはしない */
html[lang="en"] body { line-height: 1.7; hyphens: manual; }
/* タイ語: 単語間スペースが無い＋声調記号/上下の母音で字が上下に伸びる
   → 行間を厚くし、overflow-wrap で箱からのはみ出しを止める */
html[lang="th"] body { line-height: 2.2; }
/* 納品時にあった暫定の --font-ui 上書きは削除した（104）。tokens.css 本体に
   "Noto Sans Thai Looped" を和文の直後で入れてあるので、ここで重ねる必要がない。
   むしろ暫定版は "Noto Sans Thai"（非ループ）を Looped より前に置いていたため、
   端末に非ループ版が入っていると**そちらが勝って**しまう指定だった。 */

/* ---- 共通コンテナ ------------------------------------------------------
   モバイル: 左右 --safe-x（375px なら 8% = 30px → 使える幅 315px）
   1280px:   余白を外し max-width 1080px（両端 100px）                    */
.in {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: var(--safe-x);
  padding-right: var(--safe-x);
}
@media (min-width: 1280px) { .in { padding-left: 0; padding-right: 0; } }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--ink);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  font-weight: 700; text-decoration: none; z-index: 2;
}
.skip:focus { left: var(--sp-2); top: var(--sp-2); }

/* ---- ① バー（ロゴ＋言語切替） ------------------------------------------ */
.bar { background: var(--paper); border-bottom: 1px solid var(--line); }
.bar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
  padding-top: var(--sp-1); padding-bottom: var(--sp-1);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink); }
/* ※ロゴは差し替え前提の固定箱（44×44）。周囲はこの箱の中身に依存しない */
.brand__mark {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.brand__name { font-size: var(--fs-label); font-weight: 900; letter-spacing: .02em; }

.langs { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.langs__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--sp-2); border-radius: var(--radius-pill);
  color: var(--ink-soft); font-size: var(--fs-label); font-weight: 700; text-decoration: none;
}
.langs__link:hover { background: var(--paper-deep); color: var(--ink); }
.langs__link.is-current {
  background: var(--indigo-soft); color: var(--indigo-deep); font-weight: 900;
  box-shadow: inset 0 0 0 2px var(--indigo-line);   /* 色以外の手掛かり（輪郭） */
}

/* ---- ① ヒーロー -------------------------------------------------------- */
.hero { padding-top: var(--sp-4); padding-bottom: var(--sp-6); }
.hero__in { display: grid; gap: var(--sp-5); }
.hero__title {
  font-size: calc(var(--fs-display) * .8);
  line-height: 1.35; font-weight: 900; letter-spacing: .01em;
  margin-bottom: var(--sp-3);
}
.hero__lede { color: var(--ink-soft); max-width: 34em; margin-bottom: var(--sp-4); }
/* 「登録不要・広告なし・ダウンロード不要」は本文と同じ薄いキャプションだったので、
   ファーストビューで読まれずに流れていた（Lazyweb 診断 F2 = anti-pull）。文言は
   1語も変えず、区切り記号で割ってチップにしただけ。親が最初に確かめたい3点が
   走り読みで拾える。
   ★172: チップを CTA の【上】へ移し、「追跡なし」を足して4つにした。Pro 監査の
   最上位の指摘（F1・HIGH・friction）は「安全を確かめたい親が、赤ボタンを押す
   その場所で確認できない」。下に置いてある限り、確認はタップのあとになる。 */
.hero__note {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-soft);
}
/* チップ列（<ul>）だけが CTA の上。variant が CTA の下に置く <p class="hero__note">
   は従来どおり上マージンのまま — セレクタを分けないと、あちらの余白が消える。 */
ul.hero__note { margin-top: 0; margin-bottom: var(--sp-3); }
.hero__claim {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-weight: 700; line-height: 1.7;
}
/* 印は teal の点1つ。trust__icon / fig__key と同じ語彙で、新しい色を増やさない */
.hero__claim::before {
  content: ""; flex: none; width: 6px; height: 6px;
  border-radius: 50%; background: var(--teal);
}
html[lang="th"] .hero__title { line-height: 1.55; }
html[lang="en"] .hero__title { line-height: 1.2; }

/* 主 CTA — ※--shu を使うのはこの1ブロックだけ※ */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--hit-min);            /* 88px */
  padding: var(--sp-2) var(--sp-5);
  max-width: 100%;
  border-radius: var(--radius-pill);
  background: var(--shu);
  color: var(--surface);
  box-shadow: 0 var(--shadow-btn-y) 0 var(--shu-deep);
  font-size: calc(var(--fs-title) * .82);
  font-weight: 900; line-height: 1.4; text-align: center; text-decoration: none;
  transition: transform var(--motion-tap), box-shadow var(--motion-tap), background var(--motion-tap);
}
.cta:hover { background: var(--shu-deep); color: var(--surface); box-shadow: 0 var(--shadow-btn-y) 0 var(--shu-darker); }
.cta:active { transform: translateY(var(--shadow-btn-y)); box-shadow: none; }
.cta__icon { flex: none; width: 22px; height: 22px; }
html[lang="ja"] .cta__label { font-family: var(--font-kana); }  /* 隣の子が読める字で */

/* 繰り返しの CTA（Lazyweb 診断 F1 = friction · HIGH）。
   開始導線がヒーローの1つだけだったので、5000px の根拠を読み切って納得した親が
   「一番上まで戻る」しか道が無かった。置く場所は納得が最大になる2点だけ:
   ④の締め（＝書けなくても進める、と読み終えた直後）と、⑤の直後（＝副 CTA の
   メール登録より前。主が先、従が後）。語も色も新しく増やさず .cta をそのまま使う。
   ※ pulse.js は a[href="/app/"] を全部拾うので、計測は増設不要（127）。 */
.cta-again { margin-top: var(--sp-5); }
.sec .cta-again:first-child { margin-top: 0; }

/* ヒーローの図版（かなずかん） */
.art-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-4);
}
.art-card__head {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.art-tile {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--line);
  border-radius: var(--radius-md); box-shadow: 0 var(--shadow-btn-y) 0 var(--line-deep);
}
.art-tile--done { background: var(--teal-soft); border-color: var(--teal); }
.art-tile__kana { font-family: var(--font-kana); font-size: calc(var(--fs-title) * 1.15); line-height: 1; }
.art-tile__mark { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; color: var(--teal-deep); }
.art-card__foot { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-soft); }

/* ---- セクション共通 ---------------------------------------------------- */
.sec { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.sec--sunk { background: var(--paper-deep); }
.sec__title {
  font-size: calc(var(--fs-title) * .92); line-height: 1.45; font-weight: 900;
  color: var(--indigo-deep); margin-bottom: var(--sp-4);
}
.sec__lede { color: var(--ink-soft); margin-bottom: var(--sp-4); max-width: 40em; }

/* ---- ② 3つの要点 ------------------------------------------------------- */
.points { display: grid; gap: var(--sp-4); }
.point {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-4);
}
.point__icon { width: 28px; height: 28px; color: var(--indigo); margin-bottom: var(--sp-2); }
.point__title { font-size: calc(var(--fs-body) * 1.18); font-weight: 900; margin-bottom: var(--sp-1); line-height: 1.5; }
.point__body { color: var(--ink-soft); }

/* ---- ③ 保護者への約束 --------------------------------------------------- */
.trust__list { display: grid; gap: var(--sp-3); }
.trust__item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-3);
}
.trust__icon { flex: none; width: 24px; height: 24px; color: var(--teal-deep); margin-top: 4px; }
.trust__text { min-width: 0; }

/* ---- ④ 設計の根拠（このページの核） ------------------------------------- */
.why__lede {
  font-size: calc(var(--fs-title) * .82); line-height: 1.55; font-weight: 700;
  margin-bottom: var(--sp-5);
}
.why__lede .why__kana { font-family: var(--font-kana); }
.why__items { display: grid; gap: var(--sp-4); }
.why-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-4);
}
.why-item__title {
  font-size: calc(var(--fs-body) * 1.12); font-weight: 900;
  color: var(--indigo-deep); line-height: 1.5; margin-bottom: var(--sp-2);
}
.why-item__body { color: var(--ink-soft); }
/* 自社の失敗を認めている段落 — 角を取らない。面を変えて最も大きく置く */
.why-item--own { background: var(--indigo-soft); border: 2px solid var(--indigo-line); box-shadow: none; }
.why-item--own .why-item__title { font-size: calc(var(--fs-body) * 1.3); }
.why-item--own .why-item__body { color: var(--ink); font-size: calc(var(--fs-body) * 1.06); }
.why__close {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 2px solid var(--line);
  font-size: calc(var(--fs-title) * .72); line-height: 1.6; font-weight: 700;
}

/* ---- 図版 --------------------------------------------------------------- */
.fig {
  margin-top: var(--sp-3);
  background: var(--paper); border: 1px dashed var(--line-dash);
  border-radius: var(--radius-md); padding: var(--sp-3);
}
.why-item--own .fig, .sec--sunk .fig { background: var(--surface); }
.fig__cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.fig__cell { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.fig__shape { display: block; width: 100%; max-width: 96px; height: auto; }
.fig__age { font-size: var(--fs-label); font-weight: 900; color: var(--indigo-deep); line-height: 1.4; }
.fig__name { font-size: var(--fs-caption); color: var(--ink-soft); line-height: 1.5; }
/* 読み→書きの時間軸 */
.tl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-2); align-items: center; }
.tl__label { font-size: var(--fs-caption); font-weight: 900; color: var(--ink-soft); }
.tl__label--muted { font-weight: 700; color: var(--ink-faint); }
.tl__track { display: grid; grid-template-columns: repeat(4, 1fr); }
.tl__bar { display: block; height: 26px; border-radius: var(--radius-pill); }
.tl__bar--read { grid-column: 1 / 5; background: var(--teal-soft); border: 2px solid var(--teal); }
.tl__bar--write { grid-column: 4 / 5; background: var(--surface); border: 2px dashed var(--indigo); }
.tl__axis { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--line-strong); }
.tl__tick { padding-top: 4px; border-left: 2px solid var(--line-strong); padding-left: 6px; font-size: var(--fs-caption); font-weight: 700; color: var(--ink-soft); }
.tl__note { display: block; font-weight: 900; color: var(--indigo-deep); }
.fig__cap { margin-top: var(--sp-2); font-size: var(--fs-caption); line-height: 1.7; color: var(--ink-soft); }
.fig__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.fig__side { flex: none; text-align: center; }
.fig__main { flex: 1 1 220px; min-width: 0; }
.fig__kana { font-family: var(--font-kana); font-size: calc(var(--fs-display) * 1.7); line-height: 1; }
.fig__side-cap { font-size: var(--fs-caption); color: var(--ink-soft); }

/* ---- ⑤ 入っているもの --------------------------------------------------- */
/* ⑤ は線アイコン＋文章から【実画面】に変えた（105）。ここは「中に何が入って
   いるか」を説明する場所で、このプロダクトの中身は画面そのものである。抽象的な
   アイコンでは、和紙トーン・スミ・かなの手書き感という一番の魅力が1つも伝わらない。
   画像はアプリの実キャプチャ（`tools/shoot-app-screens.mjs` の出力）。 */
.content__list {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 375px でも2列。1列だと
      端末画面4枚で異常に縦長になり、スクロールで文脈が切れる */
  list-style: none; padding: 0;
}
.content__item {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-2);
}
.content__text { min-width: 0; font-size: var(--fs-caption); line-height: 1.7; }

/* 画面の枠。端末モックは描かない（枠の絵が主役になってしまう）。角丸と
   実体影だけ与えて「画面である」と分かればいい。 */
.shot {
  margin: 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper);
  box-shadow: 0 2px 0 var(--paper-shade);
}
.shot__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 375 / 560;          /* 上から 560pt 分だけ見せる。812 まで入れると
      1枚が縦に伸びすぎ、4枚並べたときに顔（上部）が小さくなる */
  object-fit: cover; object-position: top center;
}

@media (min-width: 760px) {
  .content__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .content__item { padding: var(--sp-3); }
  .content__text { font-size: var(--fs-body); }
}

/* ---- ⑥ メール登録（副 CTA。主 CTA を食わない） -------------------------- */
.mail {
  max-width: 640px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-4);
}
.mail__art { float: right; width: 76px; height: 76px; margin: 0 0 var(--sp-2) var(--sp-3); }
.mail__title { font-size: calc(var(--fs-body) * 1.18); font-weight: 900; line-height: 1.5; margin-bottom: var(--sp-1); }
.mail__body { color: var(--ink-soft); }
.mail__form { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.mail__input {
  flex: 1 1 200px; min-width: 0; min-height: 56px;
  padding: 0 var(--sp-3);
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-md);
  font: inherit; line-height: 1.4;
}
.mail__input::placeholder { color: var(--ink-faint); }
.mail__submit {
  flex: 0 1 auto; min-height: 56px; padding: 0 var(--sp-4);
  background: var(--teal); color: var(--surface);
  border: 0; border-radius: var(--radius-md);
  box-shadow: 0 var(--shadow-btn-y) 0 var(--teal-deep);
  font: inherit; font-weight: 900; cursor: pointer;
  transition: transform var(--motion-tap), box-shadow var(--motion-tap), background var(--motion-tap);
}
.mail__submit:hover { background: var(--teal-deep); }
.mail__submit:active { transform: translateY(var(--shadow-btn-y)); box-shadow: none; }
.mail__note { margin-top: var(--sp-3); font-size: var(--fs-caption); line-height: 1.7; color: var(--ink-soft); }
/* 送信成功時の面（pulse.js が hidden を外す） */
.mail__done {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--teal-soft); border: 2px solid var(--teal);
  border-radius: var(--radius-md); font-weight: 700;
}
.mail__done[hidden] { display: none; }
.mail__done .trust__icon { margin-top: 3px; }

/* ※ポリシー / 利用規約リンクの差し込み口（§3.7）
   いまは空。空のうちは消えるので、後から <a> を1本入れるだけで足りる。 */
.slot { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--ink-soft); }
.slot:empty { display: none; margin: 0; }

/* ---- ⑦ フッタ ----------------------------------------------------------- */
.foot { background: var(--paper-deep); border-top: 1px solid var(--line); padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
.foot__in { display: grid; gap: var(--sp-3); }
.foot__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.foot__label { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-soft); margin-right: var(--sp-1); }
.foot__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2);
  border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: 700; text-decoration: none;
}
.foot__link:hover { background: var(--surface); }
.foot__rights { font-size: var(--fs-caption); color: var(--ink-soft); }


/* ---- 世界の帯（030-world-assets の原本をそのまま配置した装飾） ---------- */
/* ★ 罫線を外した（170）。Lazyweb の監査は「帯ごとに別のパネルに見える」ことを
   最上位の指摘に挙げていて、1px の線はまさにその境目を描いていた。帯自体の
   空の色（--sky-soft）と地面のカーブだけで、上下のセクションとは十分に分かれる。 */
.scene { display: block; width: 100%; height: 132px; overflow: hidden; background: var(--sky-soft); }
.scene__svg { display: block; width: 100%; height: 100%; }
.scene--foot { height: 92px; }
/* ★ 帯の高さは幅に追従させる（104・受入 C-1）。
   .scene の SVG は viewBox 1200×240 を `xMidYMax slice` で敷いている。slice は
   【下端基準】で切るので、帯が「幅 ÷ 1200 × 240」より低いと上が落ちる。納品時は
   200px 固定だったため、1280px 幅では上 56px 相当が消え、**空に描かれた雲2つの
   下半分だけが樹々の上に浮いて見えていた**（受注側の proof にも写っていた）。
   20vw = ちょうど 1200:240 の比なので、760〜1300px では1ドットも切れない。
   260px で止めるのは、超広幅で帯だけが間延びしないため（そこでは雲は完全に隠れる）。 */
@media (min-width: 760px) {
  .scene { height: clamp(200px, 20vw, 260px); }
  .scene--foot { height: 140px; }
}

/* ---- 集めるもの（⑤） --------------------------------------------------- */
.collect { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.collect__tile { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 6px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 var(--shadow-btn-y) 0 var(--line-deep); }
.collect__svg { display: block; width: 100%; height: auto; }
@media (min-width: 760px) { .collect { grid-template-columns: repeat(7, 1fr); gap: var(--sp-3); } }

/* ---- デスクトップ ------------------------------------------------------- */
@media (min-width: 760px) {
  .points { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .trust__list { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  /* ⑤ の列数は 238 行の .content__list 側で決めている（実画面4枚 → 4列）。
     ここで 1fr 1fr に戻すと、後勝ちで 2列に潰れる（105 で実際に踏んだ）。 */
  .content__list { gap: var(--sp-4); }
  .why__items { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .why-item--own { grid-column: 1 / -1; }
  .foot__in { grid-template-columns: 1fr auto; align-items: center; }
  .sec__title { font-size: calc(var(--fs-title) * 1.15); }
}
@media (min-width: 900px) {
  .hero { padding-top: var(--sp-5); }
  .hero__in { grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--sp-6); }
  .hero__title { font-size: calc(var(--fs-display) * 1.3); }
  .hero__lede { font-size: calc(var(--fs-body) * 1.12); }
  .why__lede { font-size: calc(var(--fs-title) * 1.05); }
  .why__close { font-size: calc(var(--fs-title) * .92); }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .mail__submit { transition: none; }
}


/* ---- C-8 アートのスロット（110） ---------------------------------------
   受注側は「名前つきの穴に入る SVG」だけを作り、当方がビルド時に
   インライン展開する。箱を決めるのは【この CSS】で、SVG 側は viewBox しか
   持たない（だから width/height 属性を禁止してある）。 */
.point__art { display: block; width: 88px; height: 88px; margin-bottom: var(--sp-2); color: var(--indigo); }
.point__art svg { display: block; width: 100%; height: 100%; }

.fig__art { display: block; }
.fig__art svg { display: block; width: 100%; height: auto; }
/* 「私たちの失敗から」は横長1枚で、④の中で唯一 2列ぶちぬきの記事に入る */
.fig__art--own { max-width: 420px; margin-inline: auto; }

/* 区切り帯。ヒーロー下の .scene と同じ語彙・同じ切られ方をする。
   ★上端基準ではなく下端基準で切る（xMidYMax slice）ので、C-8 には
   「上端付近に主要モチーフを置かない」ことを発注要件に入れてある（§2-C）。 */
.rule { position: relative; display: block; width: 100%; height: 76px; overflow: hidden; }
.rule svg { display: block; width: 100%; height: 100%; }
/* スミは C-8 の原本に触らず、帯の上に重ねる兄弟要素として置く（170）。
   ヒーロー下の帯 → この2本 → フッタ上の帯、と左から右へ現れるので、
   スクロールが「同じ子が旅している1本の道」として読める。 */
/* ★ セレクタは `.rule svg` と同じ詳細度では勝てない（クラス1+要素1）。
   width/height が 100% のまま効くと、絵は帯いっぱいの箱の中央に置かれ、
   left が大きい b は箱ごと画面外へ出て**消える**（実機で踏んだ）。 */
.rule svg.rule__sumi { position: absolute; bottom: 6px; width: 40px; height: 42px; pointer-events: none; }
.rule__sumi--a { left: 17%; }
.rule__sumi--b { left: 62%; }
@media (min-width: 760px) {
  .rule { height: 110px; }
  .rule svg.rule__sumi { width: 54px; height: 56px; bottom: 10px; }
}

/* C-8 のラベル。SVG に文字を置かせていない（多言語のため）ので、
   図が意味を持つのに必要な語は【全部ここ】にある。納品 manifest §5 の指定。 */
.fig__labels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-1); margin-top: var(--sp-1); text-align: center;
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-soft);
}
.fig__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--ink-soft);
}
.fig__key { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.fig__key::before { content: ""; width: 14px; height: 8px; border-radius: 2px; }
.fig__key--read::before  { background: var(--teal); }
.fig__key--write::before { background: var(--indigo); }
.fig__note { color: var(--ink-faint); }