/* あんきずかん LP。アプリ本体（src/styles/global.css）の色をそのまま持ってきている。 */
:root {
  --bg: #f1eff9;
  --bg-deep: #e5e1f3;
  --paper: #ffffff;
  --text: #2c2839;
  --ink-soft: #6f6a86;
  --ink-faint: #a9a4c0;
  --line: #ddd7ee;
  --ink: #211d1d;
  --reward: #f0824f;
  --rika: #63bda2;   --rika-l: #e6f4f0;
  --shakai: #6b96cf; --shakai-l: #e8eff8;
  --kokugo: #dd8ba3; --kokugo-l: #fbedf1;
  --sansu: #e8ab5c;  --sansu-l: #fcf2e3;
  --jiji: #8f88c4;   --jiji-l: #eeecf8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic',
               'Yu Gothic UI', Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

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

a { color: #c8663a; }
a:hover { color: #a04a24; }

.wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding-inline: 22px; }

/* ===== ヘッダー ===== */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: rgba(241, 239, 249, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 12px; padding-bottom: 12px;
}
/* ロゴも指で押せる高さにする（画像は 30px しかない） */
.site-head .wrap > a { display: block; padding-block: 7px; }
/* プレビュー版（lp/_preview.html）では <img> が直接の <svg> に置きかわる。
   img だけを指すと、そちらで大きさが効かず、ロゴが巨大になる */
.site-head :is(img, svg) { height: 30px; width: auto; display: block; }
.head-links { display: flex; gap: 18px; font-size: 14px; font-weight: 700; }
/* **必ず 1 行で。** 入りきらないと「つ／な／が／り」と縦に折れる */
.head-links a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.head-links a:hover { color: var(--text); }

/* ===== ボタン ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 30px;
  border: 2px solid var(--ink); border-radius: 16px;
  font: inherit; font-weight: 900; font-size: 17px;
  text-decoration: none; color: var(--ink);
  background: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .06s, box-shadow .06s;
}
.btn:hover { color: var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--reward); color: var(--ink); }
.btn-ghost {
  border-color: var(--line); box-shadow: 0 4px 0 var(--line);
  /* **透明にしない。** 背景がえんぴつの柄なので、中に柄がすけて汚れて見える */
  color: var(--ink-soft); background: var(--paper);
}
.btn-ghost:active { box-shadow: 0 0 0 var(--line); }

/* ===== ヒーロー =====
 * OGP と同じ組み（ロゴ → 網羅の主張 → 数 → 図鑑が埋まる → 右にスマホ）。
 * 縦は画面に合わせて詰めてある。
 */
.hero { position: relative; padding-block: 52px 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: center;
}

.hero-text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }

/* ロゴが主役。きっちり中央だと下の行と重心がずれて見えるので少し左へ寄せる。
   <img> ではなく SVG をそのまま置いてある。中の濁点モンスターを別々に動かすため */
.hero-logo { display: block; transform: translateX(-3%); }

.hero-logo svg {
  height: clamp(62px, 9vw, 116px);
  width: auto;
  display: block;
  overflow: visible;
}

/* **.play が付いてから 1 度だけ再生する。**
   すぐ始めると、画像がそろって画面が出たころには終わっていて、
   「動いていない」ように見える（実際そうなった）。
   ひらいたときに 1 度だけ再生する。
   「あんきずかん」が 1 文字ずつ ぽよん と立ち上がり、
   そのあと濁点の 2 ひきが上から落ちてくる。
   **くり返さない。** スマホの中の動画とぶつかって、どちらも見てもらえなくなる。
   SVG の transform 属性は残したいので、CSS では translate / scale の
   個別プロパティを使う（transform を書くと属性ごと上書きしてしまう）。 */
.hero-logo .ch,
.hero-logo .mon-a,
.hero-logo .mon-b {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.hero-logo.play .ch {
  animation: logo-poyon 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hero-logo.play .ch-0 { animation-delay: 0.10s; }
.hero-logo.play .ch-1 { animation-delay: 0.19s; }
.hero-logo.play .ch-2 { animation-delay: 0.28s; }
.hero-logo.play .ch-3 { animation-delay: 0.37s; }
.hero-logo.play .ch-4 { animation-delay: 0.46s; }
.hero-logo.play .ch-5 { animation-delay: 0.55s; }

@keyframes logo-poyon {
  0%   { translate: 0 30%; scale: 0.84 1.16; opacity: 0; }
  45%  { translate: 0 -11%; scale: 1.07 0.93; opacity: 1; }
  72%  { translate: 0 3%; scale: 0.98 1.02; }
  100% { translate: 0 0; scale: 1 1; opacity: 1; }
}

/* 文字がそろってから、上から落ちてくる */
.hero-logo .mon-a,
.hero-logo .mon-b { transform-origin: center; }
.hero-logo.play .mon-a,
.hero-logo.play .mon-b {
  animation: logo-drop 0.68s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hero-logo.play .mon-a { animation-delay: 0.86s; }
.hero-logo.play .mon-b { animation-delay: 1.00s; }

@keyframes logo-drop {
  0%   { translate: 0 -420%; opacity: 0; }
  55%  { translate: 0 10%; opacity: 1; }
  76%  { translate: 0 -6%; }
  100% { translate: 0 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo.play .ch,
  .hero-logo.play .mon-a,
  .hero-logo.play .mon-b { animation: none; }
}

.hero-claim {
  margin: 0;
  font-size: clamp(18px, 2.6vw, 28px);
  font-weight: 900;
  line-height: 1.45;
  white-space: nowrap;
}

/* 数だけ大きく、強調色にする */
.hero-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 700;
  color: var(--ink-soft);
}

.hero-count b { font-size: clamp(26px, 3.6vw, 38px); font-weight: 900; color: var(--reward); }

.hero-tag {
  margin: 4px 0 0;
  font-size: clamp(26px, 4.4vw, 42px);
  font-weight: 900;
  line-height: 1.4;
}

/* 行ごとに折り返しを禁じる。「うま／る。」のような切れ方をさせない */
.hero-tag span { display: block; white-space: nowrap; }

/* スマホは縦全部。中身は実機を撮った動画（lp/build_demo_anim.py） */
.hero-phone {
  display: block;
  width: 268px;
  padding: 9px;
  border-radius: 36px;
  background: var(--ink);
  box-shadow: 0 8px 0 rgba(33, 29, 29, 0.16);
  justify-self: end;
}

.hero-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  background: var(--bg);
}

.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
/* 「いまは無料・広告なし」は、押す前にいちばん知りたいこと。
   まわりの一行より少しだけ強く出す */
.hero-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); text-align: center; line-height: 1.9; }
.hero-note b { font-size: 14.5px; font-weight: 900; color: var(--ink-soft); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-phone { justify-self: center; width: 240px; }
}

@media (max-width: 560px) {
  .hero { padding-block: 32px 0; }
  .hero-claim { white-space: normal; }
}

/* ===== 画面の集合 =====
 * ヘッダーのすぐ下に、いろんな画面を少しずつ かたむけて重ねる。
 * **下は切りっぱなし。** 続きがあるように見えるほうが、数を感じる。
 * **説明は付けない。** ここは「楽しそう」だけ伝わればよい。
 */
.collage {
  overflow: hidden;
  padding-top: 8px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.collage-in {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
  padding: 0 12px;
}

.cshot {
  flex: none;
  display: block;
  width: 138px;
  height: 190px;          /* 画面の上のほうだけ見せて、下は切る */
  margin-left: -16px;
  overflow: hidden;
  padding: 5px 5px 0;
  border-radius: 18px 18px 0 0;
  background: var(--ink);
  box-shadow: 0 5px 0 rgba(33, 29, 29, 0.13);
  rotate: var(--r);
  translate: 0 var(--y);
}
.cshot:first-child { margin-left: 0; }
.cshot img {
  display: block;
  width: 128px;
  height: auto;
  border-radius: 13px 13px 0 0;
  background: var(--paper);
}

@media (max-width: 700px) {
  .cshot { width: 112px; height: 152px; margin-left: -12px; }
  .cshot img { width: 102px; }
}

/* ===== ふわっと出す =====
 * 画面に入ったところで、下から少し上がりながら現れる。
 * **JS でクラスを付けてから動かす。** 先に隠しておくと、JS が動かない場や
 * 読みこみが遅い場で、中身がずっと出てこない事故になる。
 */
.reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.55s ease, translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; transition: none; }
}

/* ===== 数字 ===== */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin: 56px 0;
}
.stat {
  background: var(--paper); border: 2px solid var(--line); border-radius: 18px;
  padding: 20px 12px; text-align: center;
}
/* 数え上げるので、桁がふえても字がおどらないように幅をそろえる */
.stat b { display: block; font-size: clamp(22px, 4.4vw, 30px); font-weight: 900; line-height: 1.3;
  font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 12.5px; color: var(--ink-soft); }

/* ===== セクション ===== */
section { padding-block: 52px; }
h2 {
  margin: 0 0 10px;
  font-size: clamp(21px, 3.6vw, 28px); font-weight: 900; line-height: 1.5;
  text-wrap: balance;
}
/* 見出しの前にモンスターを 1 ぴき。アイコンと同じ顔（真円・目だけ）。
   **節ごとに色を変える。** 同じ色が続くと、ならんだときに単調になる。
   「つくっている人」だけは付けない（自己紹介にモンスターは要らない）。 */
section h2::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.34em;
  vertical-align: -0.16em;
  background: center / contain no-repeat;
}
#maker h2::before { content: none; }
/* 「一問一答で構成！」だけは付けない。すぐ下にモードの丸がならぶので、印が多すぎる */
#uri h2::before { content: none; }
#dekiru h2::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'><circle cx='12' cy='12' r='9.6' fill='%238fd6b4' stroke='%23211d1d' stroke-width='2'/><circle cx='8.9' cy='11.4' r='1.9' fill='%23211d1d'/><circle cx='15.1' cy='11.4' r='1.9' fill='%23211d1d'/></svg>"); }
#kyouka h2::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'><circle cx='12' cy='12' r='9.6' fill='%23a8c4e8' stroke='%23211d1d' stroke-width='2'/><circle cx='8.9' cy='11.4' r='1.9' fill='%23211d1d'/><circle cx='15.1' cy='11.4' r='1.9' fill='%23211d1d'/></svg>"); }
#osusume h2::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'><circle cx='12' cy='12' r='9.6' fill='%23f0b3c5' stroke='%23211d1d' stroke-width='2'/><circle cx='8.9' cy='11.4' r='1.9' fill='%23211d1d'/><circle cx='15.1' cy='11.4' r='1.9' fill='%23211d1d'/></svg>"); }
#hogosha h2::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'><circle cx='12' cy='12' r='9.6' fill='%23bab4e0' stroke='%23211d1d' stroke-width='2'/><circle cx='8.9' cy='11.4' r='1.9' fill='%23211d1d'/><circle cx='15.1' cy='11.4' r='1.9' fill='%23211d1d'/></svg>"); }
#pwa h2::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'><circle cx='12' cy='12' r='9.6' fill='%23f2a65a' stroke='%23211d1d' stroke-width='2'/><circle cx='8.9' cy='11.4' r='1.9' fill='%23211d1d'/><circle cx='15.1' cy='11.4' r='1.9' fill='%23211d1d'/></svg>"); }

.sec-lead { margin: 0 0 30px; color: var(--ink-soft); font-size: 15.5px; }

/* ===== ヒーローの言い切りチップ ===== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.chip {
  font-size: 13px;
  font-weight: 900;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* 「いまは 完全無料」だけ色を付ける。全部に色を付けると強調が消える */
.chip-strong {
  background: var(--reward);
  border-color: var(--ink);
  color: var(--ink);
}

/* ===== ウリの 2 つ =====
 * **切りかえない。** タブや開閉にすると、片方が隠れて読まれない。
 * 2 つとも大きく出し、地の色と斜めの区切りで「別のモード」だと見せる。
 * 上（つながり）は左にスマホ、下（ぜんぶ）はその逆にして、目の動きを変える。
 */
.uri-h { font-size: clamp(26px, 4.8vw, 40px); line-height: 1.45; text-align: center; }
.uri-lead {
  margin-bottom: 34px;
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--text);
  text-align: center;
}
.uri-lead b {
  font-weight: 900;
  padding: 0 3px;
  background: linear-gradient(transparent 64%, rgba(240, 130, 79, 0.4) 64%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 2つのモードの名前。**ボタンではない。**
   すぐ下に両方とも出ているので、押す先がない。
   輪郭とかたい影をやめて、色だけの見出しにしてある。 */
.modes {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin: 0 0 6px;
}
.mode {
  /* **2 つの幅をそろえる。** 字数がちがうだけで大きさが変わると、
     どちらかが強く見えてしまう */
  flex: 0 1 240px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15.5px; font-weight: 900;
  color: var(--ink);
}
.mode i {
  font-style: normal;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}
.mode-a { background: #8fd6b4; }
.mode-b { background: #f2c98a; }

.uri-block { padding-block: 52px; }
/* 見出しのところ。地は白のまま、①の線でつぎの段と分ける */
.uri-head { background: var(--paper); padding-block: 52px 0; }
.uri-block-a { background: var(--paper); }
/* 見出しと モードの名前は、1 つめの段の中にある */
.uri-head .uri-h { margin-top: 0; }
.uri-head .modes { margin-bottom: 34px; }
/* **斜めの区切り。** 下の段を上へ引き上げ、上ふちを斜めに切る。
   下の段があとに描かれるので、切ったところから上の段の色が見える */
/* **地の色は変えない。** 2 つとも白のまま、斜めの線 1 本で区切る */
.uri-block-b { background: var(--paper); }

/* 段のさかいめ。**まっすぐな線 1 本。** ①の帯と同じ引きかたにそろえる */
.uri-split { position: relative; background: var(--paper); height: 44px; }
.uri-split::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 2px solid var(--line);
}

/* 段の番号。**区切りの中央に置く。** 線だけだと、
   つぎが 2 つめのモードだということが伝わらない */
.uri-mark {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  font-size: 15px; font-weight: 900;
  color: var(--ink);
}
/* ① は横線の上。② の斜め線とそろえて、番号が線に乗っている形にする */
/* **下に余白を付けない。** 親の外へ抜けて（マージンの相殺）、
   ①の線の下に地色のすき間が 1 本入って見える */
.uri-mark-band { position: relative; height: 44px; }
.uri-mark-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 2px solid var(--line);
}
.uri-mark-band .uri-mark {
  position: absolute;
  left: 50%; top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
/* **番号に色を付けない。** モードの色は下の名前と実例で足りていて、
   ここまで色を持たせると、ページの上のほうが騒がしくなる */
.uri-mark-a { background: var(--paper); }
.uri-mark-b {
  position: absolute;
  left: 50%; top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  background: var(--paper);
}

/* 上に貼りつくヘッダーのぶん、飛び先を下げる。
   段の頭に付けると、見出しより上へ戻ってしまう（押した場所より上に飛ぶ） */
.uri-row { scroll-margin-top: 76px; }

.uri-row { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 44px; align-items: center; }
.uri-row-rev { grid-template-columns: minmax(0, 1fr) 296px; }

.uri-phone {
  display: block;
  width: 100%;
  padding: 9px;
  border-radius: 34px;
  background: var(--ink);
  box-shadow: 0 8px 0 rgba(33, 29, 29, 0.16);
}
.uri-phone img { display: block; width: 100%; height: auto; border-radius: 26px; background: var(--paper); }

.uri-say { display: block; min-width: 0; }

/* 名前はロゴ。動詞だけ字にする（SKILL.md §10-2 と同じ考え方） */
.uricol-name {
  --uri-logo-h: 58px;
  display: flex; align-items: baseline; gap: 6px;
  font-size: 22px; font-weight: 900; line-height: 1;
}
.uricol-name :is(img, svg) {
  height: var(--uri-logo-h); width: auto;
  margin-bottom: calc(var(--uri-logo-h) * -0.0952);
}

.uri-lead2 { margin: 14px 0 0; font-size: 16px; color: var(--ink-soft); }
.uri-p { margin: 14px 0 0; font-size: 15px; line-height: 1.95; color: var(--ink-soft); }
.uri-p b { color: var(--text); font-weight: 900; }


/* 実例の「例」。**わくの上ふちに引っかける。**
   離して置くと本文のように読めるし、こい色だと主役に見えてしまう。
   ここは「これは例です」とだけ分かればよいので、うんとうすくする。 */
/* それぞれのモードの数。画面に入ったところで 0 から数え上がる */
.uri-count { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0; }
.uri-count > span { display: flex; align-items: baseline; gap: 6px; }
.uri-count b {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--reward);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  text-align: center;
}
.uri-count i {
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink-soft);
}

.ex-wrap { position: relative; display: block; margin-top: 22px; }
.ex-tag {
  position: absolute;
  top: -11px;
  left: 18px;
  z-index: 1;
  padding: 2px 11px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
  color: var(--ink-faint);
}

/* 答えを縦につないで、因果が一本道であることを見せる */
.chainbox-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.chainbox-tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--jiji-l);
  color: #6f68a6;
}
.chainbox-head b { font-size: 16px; font-weight: 900; line-height: 1.5; }
.chainbox-head > span { font-size: 12.5px; color: var(--ink-faint); }

.chainflow { display: block; }
.chainflow-i {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 6px 2px;
}
.chainflow-i::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: -8px;
  width: 2px;
  background: var(--line);
}
.chainflow-i:last-child::before { display: none; }
.chainflow-n {
  position: relative;
  z-index: 1;
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 900;
  background: var(--jiji-l);
  color: #6f68a6;
  border: 2px solid #cfcbe8;
}
.chainflow-a { font-size: 13.5px; font-weight: 700; line-height: 1.6; }

/* 「ぜんぶ おぼえる」は、何をする時間なのかを 1 行ずつ文で出す */
/* つながりの実例（.chainbox）と同じ、丸角のわくに入れる。
   地がうすいと、行がばらばらに浮いて見える */
.zlines {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 20px 22px;
}
.zline { display: flex; align-items: flex-start; gap: 12px; }
.zline-tag {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-size: 11px; font-weight: 900;
}
.zline-t { font-size: 13.5px; font-weight: 700; line-height: 1.65; }
.zline-shakai .zline-tag { background: #a8c4e8; }
.zline-rika   .zline-tag { background: #8fd6b4; }
.zline-kokugo .zline-tag { background: #f0b3c5; }
.zline-sansu  .zline-tag { background: #f2c98a; }

/* PC はロゴを大きく出す。横に余裕があるので、ここが顔になる */
@media (min-width: 821px) {
  /* 絵は上ぞろえ。**列の高さいっぱいには伸ばさない。**
     数と実例が入って列が長くなったので、いっぱいに伸ばすと
     スマホが不自然に細長くなる（実際そうなった）。
     高さの上限だけ決めて、はみ出すぶんは下を切る。 */
  .uri-row, .uri-row-rev { align-items: start; }
  .uri-phone {
    height: auto;
    max-height: 580px;
    padding: 9px 9px 0;
    border-radius: 34px 34px 0 0;
    overflow: hidden;
  }
  .uri-phone img {
    width: 100%;
    height: auto;
    border-radius: 26px 26px 0 0;
  }
  .uricol-name { --uri-logo-h: 116px; font-size: 34px; gap: 10px; }
}

@media (max-width: 820px) {
  /* **名前（ロゴ）→ スマホの絵 → 説明 の順にする。**
     絵が先だと、何のモードの絵なのか分からないまま見ることになる。
     .uri-say の箱を消して（display: contents）、中身を並べかえる。 */
  .uri-row, .uri-row-rev { grid-template-columns: 1fr; gap: 16px; justify-items: stretch; }
  .uri-say { display: contents; }
  .uricol-name { order: 1; }
  .uri-lead2 { order: 2; margin-top: 0; }
  .uri-phone { order: 3; justify-self: center; max-width: 268px; }
  .uri-row-rev .uri-phone { order: 3; }
  .uri-p { order: 4; margin-top: 0; }
  /* **例はいちばん最後。** order を書かないと 0 になり、
     名前より前（＝段のいちばん上）に出てしまう */
  .uri-count { order: 5; }
  .ex-wrap { order: 6; }
  .uri-block { padding-block: 40px; }
  .uri-head { padding-block: 40px 0; }
  .uri-split, .uri-mark-band { height: 34px; }
}

/* ===== つながりの実例 ===== */
/* ウリのコラムの中に置くので、白いカードの上に白いカードを重ねない。
   うすい地色＋点線のわくで、「例です」とだけ分かればよい */
.chainbox {
  display: block;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 24px 26px 22px;
}

.chainbox-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }

.chainbox-tag {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 900;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--jiji-l);
  color: var(--jiji-d, #6f68a6);
  margin-bottom: 4px;
}

.chainbox-head b { font-size: 19px; font-weight: 900; line-height: 1.5; }
.chainbox-head > span { font-size: 13.5px; color: var(--ink-faint); }

/* ===== タイプの顔 ===== */
.tcard-face {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--line);
}

.tcard-face svg { width: 58px; height: 58px; display: block; }

/* ===== つくっている人 ===== */
.maker {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 26px;
  padding: 34px 36px 32px;
}

.maker-faces { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.maker-face {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
}

.maker-face svg { width: 44px; height: 44px; display: block; }

.maker-text h2 { margin: 0 0 14px; }
.maker-text p {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.95;
}
.maker-text p:last-child { margin-bottom: 0; }
/* 子ども2人の話。**中黒の点は出さない。**「一人目」「二人目」が
   そのまま目印になるので、点と両方だと頭が二重になる */
.maker-kids {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.maker-kids li {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--bg);
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.9;
}
.maker-kids b {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 900;
}
.maker-text b { color: var(--text); font-weight: 900; }

/* まだ埋まっていないところ。公開前に必ず消す */

/* ===== 下に貼りつくボタン =====
 * ヒーローが見えている間は隠す（script が付ける .is-on で出す）。
 * script が動かない環境では出ないが、上の CTA は残るので読めなくならない。
 */
.float-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(241, 239, 249, 0.94);
  backdrop-filter: blur(8px);
  border-top: 2px solid var(--line);
  transform: translateY(130%);
  transition: transform .22s ease;
}

.float-cta.is-on { transform: none; }

.float-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.float-text { display: flex; flex-direction: column; line-height: 1.5; }
.float-text b { font-size: 15px; font-weight: 900; }
.float-text span { font-size: 12px; color: var(--ink-soft); }
.float-cta .btn { min-height: 50px; font-size: 15.5px; padding: 0 24px; }

@media (max-width: 820px) {
  .maker { grid-template-columns: 1fr; gap: 24px; }
  .maker-faces { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .chainbox { padding: 24px 20px 22px; }
  .maker { padding: 26px 20px 24px; }
  /* **1 行に収める。** 下に居すわるものなので、高いぶんだけ
     読める範囲がせまくなる。説明は上の CTA に出ているので落とす */
  .float-text span { display: none; }
  .float-text b { font-size: 13px; white-space: nowrap; }
  .float-inner { gap: 10px; }
  .float-cta { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  /* **折り返させない。** min-height を下げても、ボタンの字が 2 行になると
     60px まで戻ってしまう（実際そうなっていた）。字を小さくして 1 行に収める */
  .float-cta .btn {
    flex: 1; min-height: 42px; font-size: 13.5px; padding: 0 12px;
    white-space: nowrap;
  }
}

/* ===== できること（1画面に1つずつのカード）=====
 * **下へスクロールすると、つぎの機能。** 横のスワイプはやめて、中身も同じ
 * カードに書く。1 枚で完結するほうが読まれる。
 * スナップは mandatory ＋ scroll-snap-stop: always にして、カードと
 * カードの中途半端な位置で止まらないようにしている。
 */
/* スマホでは、帯をスクロールしているあいだ「できること」を上に貼りつける。
   見出しが流れると、いま何の一覧を見ているのか分からなくなる */
.deck-h { margin-bottom: 16px; }

/* 帯のまわり。目印を置くために、位置の基準にする */
.deck-wrap { position: relative; }

/* 右のレール。いまどこを見ているかが分かる */
.deck-rail {
  position: absolute;
  top: 14px; bottom: 14px; right: -14px;
  width: 5px;
  border-radius: 999px;
  background: var(--line);
}
.deck-rail i {
  position: absolute;
  left: 0; right: 0;
  min-height: 22px;
  border-radius: 999px;
  background: var(--ink);
  transition: top 0.12s linear;
}

/* 下の矢印。「まだ下にある」を出す。1 回でも動かしたら消える */
.deck-cue {
  position: absolute;
  right: 18px; bottom: 16px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  animation: deck-bob 1.5s ease-in-out infinite;
  transition: opacity 0.3s, translate 0.3s;
}
.deck-cue::before {
  content: "";
  width: 10px; height: 10px;
  margin-top: -4px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  rotate: 45deg;
}
.deck-cue.gone { opacity: 0; translate: 0 6px; pointer-events: none; }

@keyframes deck-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-cue { animation: none; }
  .deck-rail i { transition: none; }
}

.deck {
  height: min(520px, 74vh);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  border-radius: 26px;
  border: 2px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  background: var(--paper);
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.deck-card {
  position: relative;
  height: min(520px, 74vh);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  padding: 28px 34px;
  border-top: 6px solid var(--line);
}
.deck-rika   { border-top-color: var(--rika); }
.deck-shakai { border-top-color: var(--shakai); }
.deck-kokugo { border-top-color: var(--kokugo); }
.deck-sansu  { border-top-color: var(--sansu); }
.deck-jiji   { border-top-color: var(--jiji); }

/* 何枚目かの印。ページ番号らしくせず、ボタンと同じ丸みで小さく置く */
.deck-i {
  position: absolute;
  top: 16px; right: 20px;
  display: flex; align-items: baseline; gap: 3px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  font-size: 12px; font-weight: 900;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.deck-i b { font-size: 15px; color: var(--ink); }
.deck-i i { font-style: normal; opacity: 0.5; }
.deck-rika   .deck-i { background: #ddf1ea; }
.deck-shakai .deck-i { background: #dfeaf8; }
.deck-kokugo .deck-i { background: #fae3ea; }
.deck-sansu  .deck-i { background: #fbeada; }
.deck-jiji   .deck-i { background: #e6e3f5; }

.deck-body { display: flex; align-items: center; gap: 34px; width: 100%; height: 100%; }
.deck-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* 一言は教科の色。見出しは大きく黒く、説明は小さく灰色。
   3 つを同じ調子で書くと、どこを読めばいいのか分からない */
.deck-lead { font-size: 13px; font-weight: 900; letter-spacing: 0.04em; color: var(--ink-faint); }
.deck-rika   .deck-lead { color: #3c8f78; }
.deck-shakai .deck-lead { color: #4a72a8; }
.deck-kokugo .deck-lead { color: #b56680; }
.deck-sansu  .deck-lead { color: #bb8237; }
.deck-jiji   .deck-lead { color: #6a63a0; }
.deck-name { font-size: clamp(24px, 3.4vw, 32px); font-weight: 900; line-height: 1.35; }
.deck-p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* スマホの画面。**高さは自動＋上限。**
   決め打ちにすると、絵より枠が高いときに下が黒くあいてしまう（実際そうなった）。 */
.deck-shot {
  flex: none;
  align-self: flex-end;
  display: block;
  /* PC は大きく。カードの高さいっぱいまで使い、下は切りっぱなしにする */
  width: 300px;
  height: auto;
  max-height: 100%;
  overflow: hidden;
  padding: 7px 7px 0;
  border-radius: 24px 24px 0 0;
  background: var(--ink);
}
.deck-shot img {
  display: block; width: 286px; height: auto;
  border-radius: 18px 18px 0 0;
  background: var(--bg);
}


@media (max-width: 700px) {
  /* レールは帯の中に入れる（外に出すと画面からはみ出す） */
  .deck-rail { right: 6px; }
  .deck-cue { right: 14px; bottom: 62px; }

  /* **ヘッダーは追いかけない。** ナビはスマホでは隠してあってロゴだけなので、
     70px を居すわらせる意味がない。そのぶんカードを高くする */
  .site-head { position: static; }

  /* 見出しを画面のいちばん上に留める */
  .deck-h {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -22px 12px;
    padding: 10px 22px 8px;
    background: var(--bg);
  }
  #dekiru { padding-top: 12px; }

  /* **題名 → 番号（その横）→ スマホ画面 → 説明 の順。**
     絵が先だと、何の機能の絵なのか分からないまま見ることになる。
     .deck-body と .deck-text の箱を消して（display: contents）、
     カードそのものを 2 列のグリッドにして置きなおす。 */
  /* **カードの高さは、画面から引き算で決める。**
     割合（86vh）だと、居すわるものの高さのぶんで画面からはみ出す
     （700px の画面で 22px はみ出していた）。
     12 節の余白 ＋ 62 見出し ＋ 56 下のボタン ＋ 26 のがし = 156。
     ヘッダーを追いかけさせるのをやめたので、その 70 が要らなくなった */
  .deck { --deck-h: min(760px, calc(100vh - 156px)); }
  .deck { --deck-h: min(760px, calc(100dvh - 156px)); }
  .deck { height: var(--deck-h); }
  /* **カードを帯より少し低くして、つぎのカードの頭をのぞかせる。**
     ぴったり同じ高さだと、ここが動くことに気づかれずに素通りされる */
  .deck-card { height: calc(var(--deck-h) - 52px); }

  /* 節の頭が画面の上に合うように、近づいたら吸いつかせる。
     mandatory ではなく proximity なので、ふつうのスクロールのじゃまはしない */
  html { scroll-snap-type: y proximity; }
  #dekiru { scroll-snap-align: start; scroll-margin-top: 0; }
  .deck-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 4px 10px;
    padding: 16px 16px 18px;
  }
  .deck-body, .deck-text { display: contents; }

  .deck-name { grid-column: 1; grid-row: 1; font-size: 21px; align-self: center; }
  .deck-i {
    position: static;
    grid-column: 2; grid-row: 1;
    align-self: center;
    box-shadow: 0 3px 0 var(--ink);
  }
  .deck-lead { grid-column: 1 / -1; grid-row: 2; }
  /* **枠を絵に合わせる（伸ばさない）。**
     以前は残りの高さいっぱいに広げて下を切っていたが、画面写真は
     たての比が 2.2、枠は 1.5 しかないので、**上から 7 割ほどしか見えていなかった。**
     絵のほうを見せたいところで切って、枠はその高さに合わせる。 */
  .deck-shot {
    grid-column: 1 / -1; grid-row: 3;
    align-self: center;
    width: 100%;
    height: auto;
    max-height: 100%;
    margin-top: 8px;
    padding: 6px 6px 0;
    border-radius: 18px 18px 0 0;
  }
  .deck-shot img { width: 100%; border-radius: 13px 13px 0 0; }
  .deck-p {
    grid-column: 1 / -1; grid-row: 4;
    margin-top: 12px;
    font-size: 13.5px; line-height: 1.8;
  }
}

/* ===== タイプ別のおすすめ =====
 * 切り替えは CSS だけ。ラジオを隠して :checked で出し分ける。
 */
/* **fixed にする。** absolute だと、ラジオ本体がページの上のほうにあるので、
   下のタブを押したときにブラウザがそこまでスクロールしてしまう */
input[name="use"] {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.use-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.use-tabs label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}

.use-tabs label b { font-size: 15px; font-weight: 900; line-height: 1.4; }
.use-tabs label span { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.use-tabs label:hover { border-color: var(--ink-faint); }

#use1:checked ~ .use-tabs label[for=use1],
#use2:checked ~ .use-tabs label[for=use2],
#use3:checked ~ .use-tabs label[for=use3] {
  border-color: var(--reward);
  box-shadow: 0 3px 0 var(--reward);
}

#use1:checked ~ .use-tabs label[for=use1] span,
#use2:checked ~ .use-tabs label[for=use2] span,
#use3:checked ~ .use-tabs label[for=use3] span { color: var(--ink-soft); }

#use1:focus-visible ~ .use-tabs label[for=use1],
#use2:focus-visible ~ .use-tabs label[for=use2],
#use3:focus-visible ~ .use-tabs label[for=use3] {
  outline: 3px solid var(--jiji);
  outline-offset: 2px;
}

.use-pane { display: none; }

#use1:checked ~ .use-panes .use-pane:nth-child(1),
#use2:checked ~ .use-panes .use-pane:nth-child(2),
#use3:checked ~ .use-panes .use-pane:nth-child(3) { display: block; }

.use-panes {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 22px;
  padding: 28px 28px 26px;
}

.use-situation {
  margin: 0 0 22px;
  padding-left: 14px;
  border-left: 3px solid var(--line);
  font-size: 14px;
  color: var(--ink-faint);
}

.rcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* 画面を左に、字を右に。**スマホの下は切りっぱなし**にして、
   「できること」の帯と同じ見せ方でそろえる */
.rcard {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 18px 0 14px;
  border-radius: 18px;
  background: var(--bg);
  border: 2px solid var(--line);
  overflow: hidden;
}

.rcard-shot {
  flex: none;
  display: block;
  width: 84px;
  height: 132px;
  overflow: hidden;
  padding: 5px 5px 0;
  border-radius: 15px 15px 0 0;
  background: var(--ink);
}
.rcard-shot img {
  display: block; width: 74px; height: auto;
  border-radius: 11px 11px 0 0;
  background: var(--paper);
}

.rcard-text { display: flex; flex-direction: column; gap: 3px; padding-bottom: 16px; }
.rcard b { font-size: 16px; font-weight: 900; line-height: 1.45; }
.rcard-text > span { font-size: 12.5px; color: var(--ink-soft); }

.rcard-btn {
  align-self: flex-start;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 900;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--line);
  color: var(--ink-soft);
}

.rcard-btn:hover { border-color: var(--reward); color: var(--text); }

.rcard-rika   { border-left: 6px solid var(--rika); }
.rcard-shakai { border-left: 6px solid var(--shakai); }
.rcard-kokugo { border-left: 6px solid var(--kokugo); }
.rcard-sansu  { border-left: 6px solid var(--sansu); }
.rcard-jiji   { border-left: 6px solid var(--jiji); }

/* ===== 機能の説明パネル =====
 * 「できること」の一覧からも、タイプ別のおすすめからも、同じものをひらく。
 * :target なので JavaScript は要らない。閉じるは #close（どこにも無い id）へ
 * 飛ばす。ページが動かないまま :target が外れる。
 */
.fpanel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fpanel:target,
.fpanel.is-open { display: flex; }

.fpanel-back {
  position: absolute;
  inset: 0;
  background: rgba(44, 40, 57, 0.45);
}

.fpanel-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 202px;
  gap: 26px;
  padding: 48px 34px 32px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 26px;
  box-shadow: 0 10px 0 rgba(33, 29, 29, 0.18);
}

.fpanel-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  text-decoration: none;
  color: var(--ink-faint);
  border-radius: 50%;
}

.fpanel-close:hover { color: var(--text); background: var(--bg); }

.fpanel-kicker {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--reward);
}

.fpanel-text h3 { margin: 0 0 12px; font-size: 24px; font-weight: 900; line-height: 1.45; }
.fpanel-text p {
  margin: 0;
  max-width: 30em;   /* 1 行が長いと読みにくい */
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.9;
}

/* スマホの枠。中身は実際のアプリの画面写真。
   にせのステータスバーは描かない（実機では本物が上に重なって二重に見える） */
.phone {
  display: block;
  width: 188px;
  flex-shrink: 0;
  padding: 7px;
  border-radius: 28px;
  background: var(--ink);
  box-shadow: 0 6px 0 rgba(33, 29, 29, 0.18);
}

.phone-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 21px;
  background: var(--bg);
}

@media (max-width: 820px) {
  .fpanel-box { grid-template-columns: 1fr; justify-items: center; }
  .fpanel-text { width: 100%; }
}

@media (max-width: 560px) {
  .chips { gap: 6px; }
  .chip { font-size: 12px; padding: 6px 12px; }
  .use-tabs { grid-template-columns: 1fr; gap: 8px; }
  .use-tabs label { min-height: 54px; flex-direction: row; align-items: baseline; gap: 8px; }
  .rcards { grid-template-columns: 1fr; }
  .use-panes { padding: 22px 18px 20px; }
  .fpanel { padding: 12px; }
  .fpanel-box { padding: 46px 20px 24px; max-height: 90vh; }
  .fpanel-text h3 { font-size: 21px; }
}

/* ===== 教科 ===== */
/* 教科のパネル。**飾りを重ねない。**
   こい地・輪郭・かたい影・顔・ピルを全部のせたら、5 つならんで うるさかった。
   白い箱にそろえ、教科の色は数字だけに残す。 */
.subjects { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.subject {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 10px 18px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  text-align: center;
}

.subject b { display: block; font-size: 17px; font-weight: 900; line-height: 1.4; }
.subject-note { display: block; font-size: 11px; line-height: 1.5; color: var(--ink-faint); }
.subject-n { display: block; margin-top: 6px; font-size: 13px; font-weight: 900; }
.subject-rika   .subject-n { color: #3c8f78; }
.subject-shakai .subject-n { color: #4a72a8; }
.subject-kokugo .subject-n { color: #b56680; }
.subject-sansu  .subject-n { color: #bb8237; }
.subject-jiji   .subject-n { color: #6a63a0; }

/* 全部でいくつあるかを、教科カードの前に 1 行で出す */
.kyouka-total {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin: 0 0 26px;
  font-size: 15px; font-weight: 900; color: var(--ink-soft);
}
.kyouka-total b {
  display: inline-block;
  text-align: center;
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 900;
  color: var(--reward);
  font-variant-numeric: tabular-nums;
}


/* ===== 親向け ===== */
.parents { background: var(--paper); border: 2px solid var(--line); border-radius: 26px; padding: 38px 34px; }
.parents ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.parents li { display: flex; gap: 14px; align-items: flex-start; }
.parents li svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 6px; }
/* 見出しだけを1行にする。`li b` にすると、本文の中の
   <b>980円の買い切り</b> まで行を折ってしまう（実際に折れていた） */
.parents li div > b { display: block; font-size: 16px; font-weight: 900; }
.parents li span { display: block; font-size: 14.5px; color: var(--ink-soft); }

/* ===== iOS の帯 ===== */
/* ── ブラウザ版で遊ぶ時には（ホーム画面に追加） ────────────────
   絵は画面写真ではなく CSS で組む。**SVG の中に文字を置かない。**
   <img> で読む SVG は別の文書あつかいで、LP の書体が効かない。 */
.pwa { background: var(--paper); border: 2px solid var(--line); border-radius: 26px; padding: 38px 34px; }
.pwa .sec-lead { margin-bottom: 26px; }
.pwa-steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.pwa-steps li { display: flex; flex-direction: column; gap: 8px; }
.pwa-steps li > b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 900; }
.pwa-steps li > span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
.pwa-no {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
/* 文の中に出すアイコン */
.pwa-inline { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; color: var(--ink); }
.pwa-inline svg { display: block; width: 100%; height: 100%; }

.pwa-fig { display: block; background: var(--bg); border-radius: 18px; padding: 18px 0 0; margin-bottom: 6px; }
.pwa-phone {
  display: flex; flex-direction: column; width: 128px; height: 150px; margin: 0 auto;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px 16px 0 0;
  border-bottom: 0; overflow: hidden;
}
/* 1. Safari */
.pwa-top { flex: none; display: flex; padding: 7px 8px 5px; }
.pwa-url {
  flex: 1; height: 15px; border-radius: 8px; background: var(--bg);
  font-size: 8.5px; color: var(--ink-soft); text-align: center; line-height: 15px;
}
.pwa-page { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; }
.pwa-line { height: 8px; border-radius: 4px; background: var(--line); }
.pwa-line-1 { width: 78%; }
.pwa-line-2 { width: 100%; }
.pwa-line-3 { width: 60%; }
.pwa-foot {
  flex: none; display: flex; align-items: center; justify-content: space-around;
  padding: 5px 6px 7px; border-top: 1.5px solid var(--line);
}
.pwa-foot i { width: 11px; height: 11px; border-radius: 3px; background: var(--line); }
.pwa-hit {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sansu-l); border: 2px solid var(--reward);
  color: var(--ink);
}
.pwa-hit svg { display: block; width: 14px; height: 14px; }
/* 2. 追加のメニュー */
.pwa-sheet { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; height: 100%; padding: 10px 8px 12px; background: var(--bg); }
.pwa-row { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 7px; border-radius: 8px; background: var(--paper); }
.pwa-row-on { border: 2px solid var(--reward); background: var(--sansu-l); }
.pwa-row-on svg { flex: none; width: 13px; height: 13px; color: var(--ink); }
.pwa-row-on b { font-size: 9px; font-weight: 900; white-space: nowrap; }
/* 3. ホーム画面 */
.pwa-phone-home { background: var(--bg); padding: 12px 10px; gap: 10px; }
.pwa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pwa-grid i { aspect-ratio: 1; border-radius: 7px; background: #fff; opacity: .65; }
.pwa-app { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pwa-app img { display: block; width: 34px; height: 34px; border-radius: 8px; }
.pwa-app svg { display: block; width: 34px; height: 34px; border-radius: 8px; }
.pwa-app b { font-size: 8px; font-weight: 700; color: var(--ink-soft); }

.pwa-note {
  margin: 24px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--bg);
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.8;
}
.pwa-note b { color: var(--ink); font-weight: 900; }

@media (max-width: 700px) {
  .pwa { padding: 28px 22px; }
  /* 3 列のままだと絵が 90px を切ってつぶれる。横ならびの 1 列にする */
  .pwa-steps { grid-template-columns: 1fr; gap: 18px; }
  .pwa-steps li {
    display: grid; grid-template-columns: 108px 1fr; grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 4px; align-items: start;
  }
  .pwa-fig { grid-row: 1 / 3; margin-bottom: 0; padding-top: 12px; border-radius: 14px; }
  .pwa-phone { width: 84px; height: 100px; border-width: 2px; border-radius: 12px 12px 0 0; }
  .pwa-url { height: 12px; font-size: 6.5px; line-height: 12px; }
  .pwa-page { gap: 5px; padding: 6px 7px; }
  .pwa-line { height: 6px; }
  .pwa-hit { width: 20px; height: 20px; }
  .pwa-hit svg { width: 11px; height: 11px; }
  .pwa-foot i { width: 8px; height: 8px; }
  .pwa-sheet { gap: 4px; padding: 7px 6px 8px; }
  /* 「ホーム画面に追加」が 84px の枠に収まる大きさ。大きくすると右が切れる */
  .pwa-row { height: 19px; gap: 3px; padding: 0 4px; }
  .pwa-row-on b { font-size: 6px; }
  .pwa-row-on svg { width: 9px; height: 9px; }
  .pwa-phone-home { padding: 8px 7px; gap: 7px; }
  .pwa-grid { gap: 6px; }
  .pwa-app img, .pwa-app svg { width: 24px; height: 24px; border-radius: 6px; }
  .pwa-app b { font-size: 6px; }
  .pwa-steps li > b { align-self: end; }
  .pwa-note { padding: 14px 15px; }
}

.band {
  background: var(--jiji-l); border: 2px dashed var(--jiji); border-radius: 22px;
  padding: 30px 28px; text-align: center;
}
/* 見出しだけを1行にする（`.band b` だと本文中の <b> まで行が折れる） */
.band > b { display: block; font-size: 19px; font-weight: 900; margin-bottom: 6px; }
.band p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* ===== フッター ===== */
.site-foot { border-top: 2px solid var(--line); margin-top: 40px; padding-block: 30px 44px; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot-links { display: flex; gap: 20px; font-size: 14px; }
/* 指で押せる高さ（44px）にする。字だけだと 26px しかない */
.foot-links a { color: var(--ink-soft); text-decoration: none; font-weight: 700;
  display: inline-block; padding-block: 9px; }
.foot-links a:hover { color: var(--text); }
.copy { font-size: 13px; color: var(--ink-faint); }

/* ===== 本文ページ（プライバシー・サポート） ===== */
.doc { max-width: 760px; }
.doc h1 { font-size: clamp(24px, 4.6vw, 34px); font-weight: 900; margin: 48px 0 8px; line-height: 1.5; }
.doc .updated { color: var(--ink-faint); font-size: 13.5px; margin: 0 0 36px; }
.doc h2 { font-size: 19px; margin: 38px 0 10px; }
.doc p, .doc li { font-size: 15.5px; color: var(--text); }
.doc ul { padding-left: 1.3em; }
.doc li { margin-bottom: 6px; }
.doc .box {
  background: var(--paper); border: 2px solid var(--line); border-radius: 18px;
  padding: 22px 24px; margin: 24px 0;
}
.doc .box p:first-child { margin-top: 0; }
.doc .box p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* 節が 11 個ある。1 つ 24px 詰めるだけで、画面 1/3 ぶん短くなる */
  section { padding-block: 40px; }
  /* 下に出るボタン（約 88px）が、いちばん下の字にかぶらないようにする */
  .site-foot { margin-top: 28px; padding-bottom: 120px; }
  /* ナビは入りきらない。縦に流し読みするページなので、
     たたむより外して、下に出るボタンにまかせる */
  .head-links { display: none; }
  .hero { padding-block: 44px 36px; }
  .hero img.logo { height: 62px; }
  .parade svg { width: 58px; height: 58px; }
  .head-links { gap: 14px; font-size: 13px; }
  .btn { width: 100%; }
  .hero-cta { flex-direction: column; }
  .parents { padding: 28px 22px; }
}