/* ============================================================================
   HpRun 紹介サイト

   設計の約束
   ・色はアプリの Shared/BrandColors.swift と同じ値だけを使う。
     #1FA9FF（ブランド青）／#0B83D9（濃い青）／#0E2C45（ネイビー）／#F5C842（Plusの金）。
     金は **Plus の章だけ**。アプリで「金＝Plus」と決めているのと同じ規則をサイトにも通す。
   ・**地と紙の関係をアプリに合わせる**（#186）。アプリの地は systemGroupedBackground＝
     青みを帯びた薄いグレーで、その上に**白いカード**が浮く。以前のサイトは地が純白で、
     その上に白いカードを 1px の枠線で囲っていた。図と地が逆で、平たく見える原因だった。
   ・グレーは純グレーにせず、青（色相210°）へわずかに寄せる。
   ・Webフォントは読み込まない。Apple の端末では -apple-system が SF Pro とヒラギノを
     選ぶので、**アプリと同じ字面**で並ぶ。CDNを待って崩れる事故も起きない。
     「アプリと同じ書体」がこのページの前提なので、ここは意匠より整合性を採る。
   ・和文の詰めは font-feature-settings:"palt"。Apple の日本語ページと同じ扱い。
   ・章（.chapter）の見え方はトークンの上書きだけで切り替える。要素ごとの色指定を
     後から打ち消す書き方はしない（セレクタの強さで喧嘩させない）。
   ============================================================================ */

:root {
  /* アプリのブランドカラー（そのまま） */
  --sky: #1fa9ff;
  --sky-deep: #0b83d9;
  --navy: #0e2c45;
  --gold: #f5c842;

  /* 小さい文字と、白抜き文字を載せるボタンのための青（#186）。
     アプリの青をそのまま使うと、Webのコントラスト基準（AA・4.5:1）に届かない。実測:
       白 on #1FA9FF … 2.57:1 ／ 白 on #0B83D9 … 3.99:1 ／ #0B83D9 on 地(#EDF1F6) … 3.52:1
     どれも不足。明度だけを落とした #0B6FBD なら
       白 on … 5.23:1 ／ 地の上 … 4.61:1 ／ 白地の上 … 5.23:1 で全て満たす。
     **図（矢印・フォーカス枠）にはブランドの #1FA9FF をそのまま使う**ので、
     色味は変えずに「小さい文字だけ濃い側にずらす」扱いにしている。 */
  --sky-text: #0b6fbd;

  /* 地と紙と文字（ライト）。アプリの grouped background と同じ関係。 */
  --ground: #edf1f6;           /* 地＝薄い青みグレー */
  --paper: #ffffff;            /* 白い章の地 */
  --card: #ffffff;             /* 地の上に浮くカード */
  --ink: #0b131c;
  --muted: #5a6b7e;
  --line: #dbe3ec;
  --accent: var(--sky-text);   /* 文字・細線に使う青（コントラストを満たす側） */
  --lift: 0 14px 34px -20px rgba(13, 43, 69, .34);   /* カードの影（アプリの hpCard 相当） */
  --bezel: rgba(13, 43, 69, .10);                    /* 端末画像の縁 */

  /* 寸法 */
  --radius: 16px;              /* アプリのカードと同じ角丸16 */
  --pad-y: clamp(84px, 12vw, 148px);
  --gutter: clamp(20px, 5vw, 32px);
  --shot-max: 340px;
  /* ヒーローの端末を次の章にまたがせる量。**:root に置くこと**。
     以前は .overlap（＝ヒーロー）に置いていたが、これを読むのは
     `.overlap + .chapter`＝**隣の要素**で、兄弟には変数が継承されない。
     結果 calc() が無効になり、次の章の上余白が丸ごと消えて、
     はみ出した端末と中身がぶつかっていた（#186 で発見）。 */
  --overlap: clamp(40px, 7vw, 96px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #080d13;
    --paper: #0d141c;
    --card: #16202b;
    --ink: #e9eff5;
    --muted: #93a4b6;
    --line: #1f2c39;
    --accent: #63c4ff;
    --lift: 0 14px 34px -20px rgba(0, 0, 0, .8);
    --bezel: rgba(255, 255, 255, .10);
  }
}

/* テーマ切り替え（data-theme が付く環境）ではメディアクエリより属性を勝たせる */
:root[data-theme="dark"] {
  --ground: #080d13;
  --paper: #0d141c;
  --card: #16202b;
  --ink: #e9eff5;
  --muted: #93a4b6;
  --line: #1f2c39;
  --accent: #63c4ff;
  --lift: 0 14px 34px -20px rgba(0, 0, 0, .8);
  --bezel: rgba(255, 255, 255, .10);
}
:root[data-theme="light"] {
  --ground: #edf1f6;
  --paper: #ffffff;
  --card: #ffffff;
  --ink: #0b131c;
  --muted: #5a6b7e;
  --line: #dbe3ec;
  --accent: #0b6fbd;
  --lift: 0 14px 34px -20px rgba(13, 43, 69, .34);
  --bezel: rgba(13, 43, 69, .10);
}

* { box-sizing: border-box; }

/* 明暗どちらも自前で持っていることをブラウザに伝える。スクロールバーや
   フォーム部品が地に合う色になり、Chrome の自動ダーク化にも二重にかからない。 */
:root { color-scheme: light dark; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1120px, 100% - var(--gutter) * 2); margin-inline: auto; }
.center { text-align: center; }

/* ── 上部バー ────────────────────────────────────────────────────────────
   現在地の章をなぞって色を変える（Apple のプロダクトページと同じ振る舞い）。 */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--ground) 76%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.bar-brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink); font-weight: 700; letter-spacing: .01em;
}
.bar-brand:hover { text-decoration: none; }
.bar-brand img { border-radius: 7px; }
.bar-nav { display: flex; gap: clamp(13px, 2.2vw, 24px); font-size: 14px; }
.bar-nav a { color: var(--muted); white-space: nowrap; transition: color .2s; }
.bar-nav a:hover { color: var(--ink); text-decoration: none; }
.bar-nav a[aria-current="true"] { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .bar-nav { display: none; } }

/* ── 章 ────────────────────────────────────────────────────────────────
   地の切り替えは**トークンの差し替えだけ**で行う。
   .chapter--paper 白い地　　.chapter--dark ネイビーの地 */
.chapter { padding: var(--pad-y) 0; background: var(--ground); color: var(--ink); }
.chapter--paper { --ground: var(--paper); --card: color-mix(in srgb, var(--ink) 4%, transparent); }
.chapter--dark {
  --ground: var(--navy);
  --paper: var(--navy);
  --ink: #ffffff;
  --muted: rgba(233, 241, 248, .70);
  --line: rgba(255, 255, 255, .16);
  --card: rgba(255, 255, 255, .07);
  --accent: #7fd0ff;
  --lift: 0 22px 56px -28px rgba(0, 0, 0, .8);
  --bezel: rgba(255, 255, 255, .12);
}

/* ── 見出しの型 ────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.title {
  margin: 0 0 18px;
  font-size: clamp(30px, 4.6vw, 54px); font-weight: 800;
  letter-spacing: -.036em; line-height: 1.22; text-wrap: balance;
}
/* 和文は既定だとどこでも折り返す。実際「走る。あとは、アプリが数える。」が
   「ア／プリ」で切れていた。見出しは**句のかたまり自体を折り返しの単位**にして、
   どの幅でも意味のある位置でだけ改行させる（ヒーローの h1 と同じ扱い）。 */
.title span, .hero h1 span { display: inline-block; }
.title--big { font-size: clamp(34px, 6vw, 68px); letter-spacing: -.042em; line-height: 1.14; }
.lede {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.8vw, 20px); color: var(--muted);
  max-width: 34em;
}
.lede.center { margin-inline: auto; }
.note { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.note.center { margin-inline: auto; max-width: 40em; }

/* ── 数字（アプリの Font.metric と同じ見せ方） ──────────────────────────
   大きな数字＋小さな単位。アプリのカードで距離・タイム・ペースを出しているのと
   同じ組み方をページ全体の共通部品にする。ページの声はここで決まる。 */
.m {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .28em;
  margin: 0; font-variant-numeric: tabular-nums;
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
}
.m.center { justify-content: center; }
.m b { font-size: clamp(46px, 8.4vw, 92px); font-weight: 800; }
.m span { font-size: clamp(18px, 2.6vw, 26px); font-weight: 700; color: var(--muted); letter-spacing: -.02em; }
.m i { font-style: normal; font-size: clamp(22px, 3.4vw, 34px); color: var(--sky); font-weight: 700; padding-inline: .3em; }
/* 一覧のなかに置く小さい方 */
.m--sm b { font-size: 27px; }
.m--sm span { font-size: 14px; }

/* ── ボタン ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  border: 1px solid transparent;
  background: var(--sky-text); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  transition: background .2s, transform .2s;
}
.btn:hover { background: color-mix(in srgb, var(--sky-text) 88%, #000); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.actions.center { justify-content: center; }

/* ── ヒーロー ──────────────────────────────────────────────────────────
   以前は背景に皇居ランニングコースをなぞった線を canvas で描いていた。やめた理由（#186）:
   ①**右の端末が同じコースの地図を出している**ので、意味が重複する。
   ②コースの縦横比は 0.57 で、端末の縦横比とほぼ同じ。つまり「1周の形が読める大きさ」
     にすると、必ず端末の裏に隠れる。実測して、この構図では両立しないと分かった。
   飾りを1つ減らし、地は端末の後ろのごく淡い光だけにする。 */
.hero {
  /* z-index を持たせて位置指定の重ね合わせ文脈をつくる。次の章（位置指定なし）より
     前に描かれるので、はみ出した端末が隠れない。縦のはみ出しは活かしたいので
     横だけを切る（overflow: hidden にすると端末の下側が丸ごと消える）。 */
  position: relative; z-index: 1; overflow-x: clip;
  padding: clamp(48px, 7vw, 88px) 0 0;
  background:
    radial-gradient(70% 60% at 74% 44%, rgba(31, 169, 255, .17) 0%, rgba(31, 169, 255, 0) 64%),
    var(--navy);
  color: #fff;
  --ink: #ffffff;
  --muted: rgba(233, 241, 248, .70);
  --line: rgba(255, 255, 255, .18);
  --bezel: rgba(255, 255, 255, .14);
}

.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px); align-items: end;
}
/* グリッドの子は既定で min-width:auto＝min-content より縮まない。見出しの
   inline-block（句のかたまり）はそれ自体が幅を持つので、狭い画面で列が縮めず
   **ページごと横にはみ出す**。0 を明示して、中で折り返させる。 */
.hero-grid > *, .pair > * { min-width: 0; }
.hero-copy { padding-bottom: clamp(24px, 6vw, 76px); }
.hero-icon { width: 72px; border-radius: 18px; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .65); }
.chip {
  display: inline-block; margin: 20px 0 18px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(31, 169, 255, .16);
  border: 1px solid rgba(31, 169, 255, .38);
  color: #a5dcff; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
}
.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 5.6vw, 76px); font-weight: 800;
  letter-spacing: -.042em; line-height: 1.14;
}
.hero .lede { max-width: 26em; }
.hero-en {
  margin: 14px 0 0;
  font-size: 14px; letter-spacing: .06em; color: rgba(233, 241, 248, .52);
}
.hero-shot { --shot-max: 330px; }

/* 1段組。**justify-items:center は使わない**——それを付けると列の幅が max-content で
   決まり、見出しの inline-block（句のかたまり）が折り返せずに画面からはみ出す。
   幅は列いっぱいに伸ばしたうえで、中身を text-align で中央に置く。 */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { padding-bottom: 0; }
  .hero-icon, .hero .lede { margin-inline: auto; }
  .hero .actions { justify-content: center; }
  .hero-shot { margin-top: clamp(40px, 8vw, 64px); }
}

/* ヒーローの端末を次の章にまたがせる（Apple のプロダクトページと同じ繋ぎ方）。
   量は :root の --overlap で決める（理由はそちらのコメント）。 */
.overlap .hero-shot { margin-bottom: calc(var(--overlap) * -1); }
.overlap + .chapter { padding-top: calc(var(--pad-y) + var(--overlap)); }

/* ── 端末の枠 ──────────────────────────────────────────────────────────
   角丸は iPhone の実寸に合わせる（画面 402pt に対し角丸 55pt ＝ 幅の 13.7%）。 */
.shot {
  width: 100%; max-width: var(--shot-max); margin-inline: auto;
  border-radius: calc(var(--shot-max) * .137);
  overflow: hidden;
  box-shadow: var(--lift), 0 0 0 1px var(--bezel);
}
.shot img { width: 100%; }
/* Apple Watch（416×496pt）。角丸は実機に合わせて幅の約17%、寸法も端末なりに小さく。 */
.shot--watch { --shot-max: 248px; border-radius: calc(var(--shot-max) * .17); }

/* 画面の一部を切り出した図。端末ではなく**カードの角丸**をあてる。
   Apple のプロダクトページと同じで、端末まるごとと切り出しを混ぜて緩急をつける。 */
.detail {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--lift), 0 0 0 1px var(--bezel);
}
.detail img { width: 100%; }
.detail--wide { max-width: 560px; margin-inline: auto; }

/* ── 2段組（文章＋図） ──────────────────────────────────────────────── */
.pair {
  display: grid; grid-template-columns: 1fr minmax(220px, var(--shot-max));
  gap: clamp(32px, 6vw, 76px); align-items: center;
}
.pair--flip { grid-template-columns: minmax(220px, var(--shot-max)) 1fr; }
.pair--flip .pair-copy { order: 2; }
/* 切り出しの図は端末より横に広いので、列の比率を変える */
.pair--detail { grid-template-columns: 1fr minmax(280px, 440px); }
.pair--detail.pair--flip { grid-template-columns: minmax(280px, 440px) 1fr; }
/* 1段組。justify-items:center を使わない理由はヒーローと同じ（max-content で
   はみ出す）。列は伸ばしたまま、図の中央寄せは .shot / .detail 側の margin で行う。 */
@media (max-width: 900px) {
  .pair, .pair--flip, .pair--detail, .pair--detail.pair--flip {
    grid-template-columns: 1fr;
  }
  .pair--flip .pair-copy { order: 0; }
  .pair-copy { max-width: 34em; margin-inline: auto; }
  .pair-shot { width: 100%; }
}

/* ── 小見出しの並び ──────────────────────────────────────────────────
   使い分けの規則
   ・端末や図の隣に置く3点 … 罫線だけ（.facts--plain）。カードにすると図と競う。
   ・単独で並べる要素 … 白いカード（.card）。アプリの hpCard と同じ、枠線なし＋影。 */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.fact h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.fact p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.7; }
.facts--stack { grid-template-columns: 1fr; gap: 0; }
.facts--stack .fact { padding: 16px 0; border-top: 1px solid var(--line); }
/* 横一列で、罫線だけで区切る（図の下に置く3点用） */
.facts--rule .fact { padding-top: 18px; border-top: 1px solid var(--line); }
.card {
  padding: 24px 22px; border-radius: var(--radius);
  background: var(--card); box-shadow: var(--lift);
}
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ── 一覧（ポイントの交換先・Plusの特典） ──────────────────────────────
   罫線で仕切る素の並び。Apple の仕様表と同じ骨格。 */
.spec { max-width: 720px; margin: 44px auto 0; padding: 0; list-style: none; text-align: left; }
.spec li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.spec-main { flex: 1 1 15rem; }
.spec-main b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.spec-main span { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.spec .m { flex: 0 0 auto; }

/* ── Plus ─────────────────────────────────────────────────────────────
   金は Plus の章にだけ現れる（アプリと同じ規則）。 */
.plus-spec .spec-main b { color: var(--gold); }

/* ── ランタメ（試聴リンク） ────────────────────────────────────────────
   アプリと同じ見せ方。Apple の公式バッジ（SVG・改変禁止）をそのまま置き、
   Spotify 側は公式アイコン＋規定文言の箱にする。**Apple のバッジの寸法は写さない**
   （Apple の "Do not imitate Apple communications." に触れるため）。
   合わせるのは高さと上下の中心だけ。
   バッジは見出しより小さく保つ（"Keep the badge smaller than the other images and
   main message."）。高さ40pxで1行目のキャップ高は12.1px。
   バッジには影も光彩もかけない（"Do not apply special effects such as shadows or
   glows to the badge."）。周囲はバッジ高さの1/10＝4px以上あける。 */
.listen { display: flex; flex-wrap: wrap; gap: 16px; margin: 30px 0 0; }
.badge { --h: 40px; display: block; height: var(--h); }
.badge img { height: var(--h); width: auto; }
.badge:hover { text-decoration: none; }
.badge--spotify {
  display: flex; align-items: center; gap: calc(var(--h) * .32);   /* 排他ゾーン＝アイコンの半分 */
  padding: 0 calc(var(--h) * .32);
  border-radius: calc(var(--h) * .28);
  background: #000;                        /* 緑ロゴは黒か白の地の上でのみ使える */
  color: #fff; white-space: nowrap;
}
.badge--spotify:hover { background: #141414; }
.badge--spotify svg { height: calc(var(--h) * .64); width: auto; flex: 0 0 auto; }
.badge-text { font-size: calc(var(--h) * .36); font-weight: 600; letter-spacing: -.005em; }
/* 番組のカバーは正方形。端末ではないのでカードの角丸をあてる。 */
.cover { max-width: 320px; margin-inline: auto; border-radius: var(--radius); box-shadow: var(--lift); overflow: hidden; }

/* ── 締めのCTA ────────────────────────────────────────────────────────── */
.cta-icon { width: 88px; border-radius: 22px; margin: 0 auto 24px; box-shadow: var(--lift); }

/* ── フッター ──────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 48px 0 32px; background: var(--ground); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; }
.foot-brand { margin: 0 0 4px; font-weight: 700; }
.foot-line { margin: 0; font-size: 14px; color: var(--muted); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; align-items: flex-start; }
.foot-nav a { color: var(--muted); }
.foot-nav a:hover { color: var(--ink); }
.copy { margin: 30px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ── 現れ方 ──────────────────────────────────────────────────────────────
   章に入ったときに一度だけ、そっと持ち上げる。

   **隠すのはスクリプトが動いているときだけ**にする（.js-reveal は JS が付ける）。
   素の CSS で opacity:0 にすると、JS が止まった・IntersectionObserver が
   発火しなかったときに**本文が最後まで出てこない**。動きは飾りなので、
   本文の見える・見えないをそこに賭けない。 */
.js-reveal .rise { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js-reveal .rise.is-in { opacity: 1; transform: none; }

/* ── プライバシーポリシー（build_privacy.py が出す素の見出しに当てる） ── */
.doc { padding: clamp(44px, 7vw, 72px) 0 clamp(64px, 9vw, 96px); }
.doc h1 { margin: 0 0 8px; font-size: clamp(27px, 4.2vw, 38px); font-weight: 800; letter-spacing: -.028em; }
.doc .meta { margin: 0 0 40px; font-size: 14px; color: var(--muted); }
.doc h2 {
  margin: 44px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 20px; font-weight: 700; letter-spacing: -.015em;
}
.doc h3 { margin: 24px 0 6px; font-size: 16.5px; font-weight: 700; }
.doc p, .doc li { color: var(--muted); font-size: 16.5px; max-width: 40em; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 1.3em; }

/* 横に長いものはそれ自身の中で横スクロールさせる（本文は絶対に横に動かさない） */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }