/* ============================================================================
   HpRun — Material Design 3（紹介サイト／プライバシーポリシー共通）

   ■ 決まり
   Google 公式の Material Design 3 だけで組む。独自の意匠は足さない。
   使っているのは M3 が定めている仕組みそのもの:
     ・カラーロール（md-sys-color-*）
     ・タイプスケール（Display / Headline / Title / Body / Label）
     ・シェイプスケール（0 / 4 / 8 / 12 / 16 / 28 / full）
     ・エレベーション（レベル0〜5）
     ・ステートレイヤー（hover 8% / pressed 10%）

   ■ 地は白
   運営の指示（2026-09-19）。M3 の既定はニュートラルに元色の色味を少し混ぜるので
   地が「ほぼ白」になるが、彩度を0にして**白を白のまま**出している
   （`tools/m3_palette.py`。色の節は生成物なので手で書き換えない）。
   面の段は surface → surface-container-low → surface-container で付ける。

   ■ 太さ
   M3 の既定は Display / Headline が Regular(400)。読み物ではなく**入口のページ**なので、
   見出しだけ Medium(500)、ヒーローの1行だけ Bold(700) に上げている。
   本文・ラベルは M3 のまま（Body 400 / Label・Title 500）。

   ■ 書体
   Roboto（M3 の既定）＋ Noto Sans JP（Google の日本語書体）＋ Material Symbols。
   いずれも Google Fonts。日本語は Noto Sans JP が先に効く並びにしてある。

   ■ コントラスト
   on-X を X の上に置く組み合わせは、すべて AA を満たす。
   実測は `python3 tools/m3_palette.py --check`。
   ============================================================================ */

/* 生成物。直接編集しない（tools/m3_palette.py が原本）。元色 #1fa9ff */
:root, :root[data-theme="light"] {
  --md-sys-color-primary: #00639a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d0e4ff;
  --md-sys-color-on-primary-container: #001d33;
  --md-sys-color-secondary: #4b6078;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d0e4ff;
  --md-sys-color-on-secondary-container: #031d31;
  --md-sys-color-tertiary: #745475;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fdd7fd;
  --md-sys-color-on-tertiary-container: #2c112e;
  --md-sys-color-error: #bf0031;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad8;
  --md-sys-color-on-error-container: #420003;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1b1b1b;
  --md-sys-color-surface-variant: #e0e3e6;
  --md-sys-color-on-surface-variant: #45474a;
  --md-sys-color-surface-dim: #dadada;
  --md-sys-color-surface-bright: #f9f9f9;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f3f3;
  --md-sys-color-surface-container: #eeeeee;
  --md-sys-color-surface-container-high: #e8e8e8;
  --md-sys-color-surface-container-highest: #e2e2e2;
  --md-sys-color-outline: #75777a;
  --md-sys-color-outline-variant: #c4c7ca;
  --md-sys-color-inverse-surface: #303030;
  --md-sys-color-inverse-on-surface: #f1f1f1;
  --md-sys-color-inverse-primary: #9bcbff;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-primary: #9bcbff;
    --md-sys-color-on-primary: #003353;
    --md-sys-color-primary-container: #004a75;
    --md-sys-color-on-primary-container: #d0e4ff;
    --md-sys-color-secondary: #b3c8e4;
    --md-sys-color-on-secondary: #1c3247;
    --md-sys-color-secondary-container: #33485f;
    --md-sys-color-on-secondary-container: #d0e4ff;
    --md-sys-color-tertiary: #e0bbe0;
    --md-sys-color-on-tertiary: #432645;
    --md-sys-color-tertiary-container: #5b3c5c;
    --md-sys-color-on-tertiary-container: #fdd7fd;
    --md-sys-color-error: #ffb3b0;
    --md-sys-color-on-error: #680016;
    --md-sys-color-error-container: #920023;
    --md-sys-color-on-error-container: #ffdad8;
    --md-sys-color-surface: #131313;
    --md-sys-color-on-surface: #e2e2e2;
    --md-sys-color-surface-variant: #45474a;
    --md-sys-color-on-surface-variant: #c4c7ca;
    --md-sys-color-surface-dim: #131313;
    --md-sys-color-surface-bright: #393939;
    --md-sys-color-surface-container-lowest: #0e0e0e;
    --md-sys-color-surface-container-low: #1b1b1b;
    --md-sys-color-surface-container: #1f1f1f;
    --md-sys-color-surface-container-high: #2a2a2a;
    --md-sys-color-surface-container-highest: #353535;
    --md-sys-color-outline: #8f9194;
    --md-sys-color-outline-variant: #45474a;
    --md-sys-color-inverse-surface: #e2e2e2;
    --md-sys-color-inverse-on-surface: #303030;
    --md-sys-color-inverse-primary: #00639a;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
  }
}
:root[data-theme="dark"] {
  --md-sys-color-primary: #9bcbff;
  --md-sys-color-on-primary: #003353;
  --md-sys-color-primary-container: #004a75;
  --md-sys-color-on-primary-container: #d0e4ff;
  --md-sys-color-secondary: #b3c8e4;
  --md-sys-color-on-secondary: #1c3247;
  --md-sys-color-secondary-container: #33485f;
  --md-sys-color-on-secondary-container: #d0e4ff;
  --md-sys-color-tertiary: #e0bbe0;
  --md-sys-color-on-tertiary: #432645;
  --md-sys-color-tertiary-container: #5b3c5c;
  --md-sys-color-on-tertiary-container: #fdd7fd;
  --md-sys-color-error: #ffb3b0;
  --md-sys-color-on-error: #680016;
  --md-sys-color-error-container: #920023;
  --md-sys-color-on-error-container: #ffdad8;
  --md-sys-color-surface: #131313;
  --md-sys-color-on-surface: #e2e2e2;
  --md-sys-color-surface-variant: #45474a;
  --md-sys-color-on-surface-variant: #c4c7ca;
  --md-sys-color-surface-dim: #131313;
  --md-sys-color-surface-bright: #393939;
  --md-sys-color-surface-container-lowest: #0e0e0e;
  --md-sys-color-surface-container-low: #1b1b1b;
  --md-sys-color-surface-container: #1f1f1f;
  --md-sys-color-surface-container-high: #2a2a2a;
  --md-sys-color-surface-container-highest: #353535;
  --md-sys-color-outline: #8f9194;
  --md-sys-color-outline-variant: #45474a;
  --md-sys-color-inverse-surface: #e2e2e2;
  --md-sys-color-inverse-on-surface: #303030;
  --md-sys-color-inverse-primary: #00639a;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

:root {
  /* タイプスケール（M3 の値） */
  --md-sys-typescale-display-small: 36px;
  --md-sys-typescale-headline-large: 32px;
  --md-sys-typescale-headline-medium: 28px;
  --md-sys-typescale-headline-small: 24px;
  --md-sys-typescale-title-large: 22px;
  --md-sys-typescale-title-medium: 16px;
  --md-sys-typescale-body-large: 16px;
  --md-sys-typescale-body-medium: 14px;
  --md-sys-typescale-body-small: 12px;
  --md-sys-typescale-label-large: 14px;
  --md-sys-typescale-label-medium: 12px;

  /* シェイプスケール */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* エレベーション */
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);

  /* モーション */
  --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-duration-short4: 200ms;

  /* 版面（M3 のウインドウクラスに合わせた余白） */
  --page-max: 1000px;
  --page-gutter: 16px;
}
@media (min-width: 600px) { :root { --page-gutter: 24px; } }
@media (min-width: 905px) { :root { --page-gutter: 32px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: Roboto, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--md-sys-typescale-body-large);
  font-weight: 400;
  line-height: 1.8;
  word-break: auto-phrase;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--md-sys-color-primary); }
:focus-visible {
  outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.page { width: min(var(--page-max), 100% - var(--page-gutter) * 2); margin-inline: auto; }

/* ── タイプ ───────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; }
.display   { font-size: clamp(30px, 5.2vw, var(--md-sys-typescale-display-small)); line-height: 1.28; font-weight: 700; letter-spacing: -.2px; }
.headline  { font-size: clamp(23px, 3.4vw, var(--md-sys-typescale-headline-medium)); line-height: 1.34; font-weight: 500; }
.title     { font-size: var(--md-sys-typescale-title-medium); line-height: 1.5; font-weight: 500; letter-spacing: .15px; }
.body      { font-size: var(--md-sys-typescale-body-large); line-height: 1.8; letter-spacing: .5px; margin: 0; }
.body-sm   { font-size: var(--md-sys-typescale-body-medium); line-height: 1.75; letter-spacing: .25px; margin: 0; }
.caption   { font-size: var(--md-sys-typescale-body-small); line-height: 1.7; letter-spacing: .4px; margin: 0; }
.subdued   { color: var(--md-sys-color-on-surface-variant); }
.measure   { max-width: 46ch; }

/* ── Top app bar ─────────────────────────────────────────────────────── */

.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 0 var(--page-gutter);
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.appbar__brand {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  text-decoration: none; color: inherit;
  font-size: var(--md-sys-typescale-title-large); font-weight: 500;
}
.appbar__brand img { border-radius: var(--md-sys-shape-corner-small); }
.appbar__spacer { margin-inline-start: auto; }

/* ── ボタン ───────────────────────────────────────────────────────────── */

.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 40px; padding: 10px 24px;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  font-family: inherit; font-size: var(--md-sys-typescale-label-large);
  font-weight: 500; letter-spacing: .1px; line-height: 20px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.button::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.button:hover::before { opacity: .08; }
.button:active::before { opacity: .10; }
.button > * { position: relative; }
.button--filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.button--filled:hover { box-shadow: var(--md-sys-elevation-1); }
.button--outlined { background: transparent; color: var(--md-sys-color-primary);
                    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }
.button--text { background: transparent; color: var(--md-sys-color-primary); padding-inline: 12px; }

/* Apple の公式バッジは改変しないので、M3 のボタンには入れずそのまま置く。 */
.badge-appstore { display: inline-block; line-height: 0; }
.badge-appstore img { height: 40px; width: auto; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ── チップ ───────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 16px; margin: 0;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: var(--md-sys-typescale-label-large); font-weight: 500; letter-spacing: .1px;
}
.chip .symbol { font-size: 18px; }

/* ── カード ───────────────────────────────────────────────────────────── */

.card {
  padding: 24px; border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}
.card--filled { background: var(--md-sys-color-surface-container-low); box-shadow: none; }

/* ── 記号（Material Symbols） ─────────────────────────────────────────── */

.symbol {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; white-space: nowrap; direction: ltr;
  font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; user-select: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ── 面と節 ───────────────────────────────────────────────────────────── */

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--tint { background: var(--md-sys-color-surface-container-low); }
.section--accent {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.section--accent .subdued { color: inherit; opacity: .84; }

.pair { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 905px) {
  .pair { grid-template-columns: 1fr 1fr; }
  .pair--flip > :first-child { order: 2; }
}
.stack > * + * { margin-top: 12px; }
.stack > .actions { margin-top: 24px; }

.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 905px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* 端末の画像は **Apple 公式の枠（Apple Design Resources）** を焼き込んだ透過PNG。
   枠をCSSで描き足さない。 */
.device { width: min(100%, 300px); margin-inline: auto; }
/* 画面の一部を切り出した図は、M3 のカードと同じ角丸で囲う。 */
.shot {
  border-radius: var(--md-sys-shape-corner-medium); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}

/* 数字 */
.figure { display: flex; align-items: baseline; gap: 6px; }
.figure b { font-size: var(--md-sys-typescale-display-small); font-weight: 500; line-height: 1.1;
            font-variant-numeric: tabular-nums; }
.figure span { font-size: var(--md-sys-typescale-title-medium); font-weight: 500;
               color: var(--md-sys-color-on-surface-variant); }
.section--accent .figure span { color: inherit; opacity: .8; }

/* 一覧 */
.list { list-style: none; margin: 0; padding: 0; }
.list > li {
  display: flex; align-items: center; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.list > li:first-child { border-top: 1px solid var(--md-sys-color-outline-variant); }
.list__text { flex: 1 1 auto; min-width: 0; }
.list__trailing { flex: none; margin-inline-start: auto; }

/* ── フッター ─────────────────────────────────────────────────────────── */

.footer {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  padding: 40px 0 32px;
}
.footer a { color: var(--md-sys-color-primary); }
.footer__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1fr auto; align-items: start; } }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ── ポリシーのページ（生成物が使う） ─────────────────────────────────── */

.doc { padding: clamp(32px, 6vw, 64px) 0; max-width: 72ch; }
.doc h1 { font-size: var(--md-sys-typescale-headline-large); line-height: 1.3; font-weight: 500; margin: 0 0 8px; }
.doc h2 { font-size: var(--md-sys-typescale-title-large); font-weight: 500; margin: 40px 0 8px;
          padding-top: 24px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.doc h3 { font-size: var(--md-sys-typescale-title-medium); font-weight: 500; margin: 24px 0 6px; }
.doc p, .doc li { font-size: var(--md-sys-typescale-body-medium); line-height: 1.85; }
.doc ul { padding-inline-start: 1.2em; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0;
             font-size: var(--md-sys-typescale-body-small); display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--md-sys-color-outline-variant); padding: 8px 10px; text-align: left; }
.meta { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-small); }