/* サービスサイト（/about/）・実績（/results/）・法令の3枚。
 *
 * ■ ★★組み方の決まり（2026-08-26に**飾りを落とした**）
 *   ・段は**余白で作る**。線と箱で囲わない。
 *   ・強弱は**字の大きさと重さ**で付ける。色を足さない。
 *   ・線を引くのは「そこで話が変わる」ときの**1本だけ**。囲まない。
 *   ★以前は見出しの上に青い棒、中見出しに青い目盛り、現在地に丸、
 *     質問・数字・断りにそれぞれ箱……と飾りが増えていた。
 *     1つずつは小さいが、1ページに集まると**どれが大事なのか読めなくなる**。
 *   ★飾りを減らすと、残った少ない強弱がそのまま効く。
 *
 * ■ ★★アプリ側（.app）とは**幅の考え方が違う**。
 *   ・アプリ：カードは1列で読むもの。広げても読みにくくなるだけ → 520px
 *   ・表と数字の粒：広い画面では広く使ったほうが読める → 880px
 *   ★同じ 520px に押し込めると、PCで表が縦に潰れて読めない。
 *
 * ■ ★★ただし**文だけは 880px まで広げない**（--measure = 660px）。
 *   880px いっぱいに日本語を流すと1行90字近くになり、
 *   折り返したときに次の行頭を見失う。★枠は広く、文は狭く。
 *
 * ★色と角丸はアプリと同じトークンを使う。**新しい流儀を持ち込まない**——
 *   同じサイトの中で2つの見た目があると、別のサイトに来たように見える。
 */

/* ---------------------------------------------------------------- 幅 */
/* ★.body（520px）の中に置かれるので、ここで押し戻して広げる。
 *   ★負のマージンではなく幅で戻す。負のマージンは端末幅によって溢れる。 */
.page {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 560px) {
  /* ★.app の 520px を、このページだけ広げる。
   *   ★:has が効かない環境では 520px のまま出る（読めなくはならない）。 */
  .app:has(.page) { max-width: 912px; }
}

/* ---------------------------------------------------------------- 見出し */
/* ★★大見出しは**大きく、字間を詰めて**置く。飾りは付けない。
 *   ★以前は上に青い棒を1本敷いていた。棒が無くても、
 *     ページの頭にいちばん大きい字がある時点で「ここが始まり」は伝わる。
 *   ★字間を詰める（-.022em）。大きい字は既定の字間だと間延びして、
 *     文字が1つずつ離れて見える。詰めると1つのかたまりとして読める。
 *   ★太さは 600 まで。700 は日本語だと潰れて見える。
 *
 * ★★法令のページ（.doc-t）も**同じ決まりに乗せる**。
 *   ★以前は css/doc.css が別の大きさを持っていて、
 *     特商法や規約だけ**別のサイトのように見えていた**。
 *   ★値を書き写して合わせない。**同じ決まりに名前を足す**——
 *     書き写すと、片方を直した日にまた離れる。 */
.page-t, .doc-t {
  margin: 0 0 14px;
  font-size: 30px; font-weight: 600; line-height: 1.3;
  color: var(--t1);
  letter-spacing: -.022em;
}
@media (max-width: 559px) {
  .page-t, .doc-t { font-size: 25px; }
}
.page-lead {
  /* ★導入は本文より少し大きく。★大きすぎると見出しと競る。 */
  max-width: var(--measure);
  margin: 0 0 40px;
  font-size: 16px; line-height: 1.85; color: var(--t2);
}
.page-lead b { color: var(--t1); }

/* ★★中見出しは**余白だけ**で切る。線も印も引かない。
 *   ★上に 52px 空ける。これは本文の行送り（約28px）のほぼ2行ぶんで、
 *     「1行空いた」ではなく「段が変わった」と読める間隔。
 *   ★線で切ると、ページが横線だらけになって、どの線が重いのか分からなくなる。
 *     空白は何本引いても濃くならないので、いくつ並べても効きが落ちない。 */
.page-h2, .doc-h {
  margin: 52px 0 14px;
  font-size: 19px; font-weight: 600; color: var(--t1);
  letter-spacing: -.012em;
  line-height: 1.45;
}
/* ★最初の中見出しだけ上を詰める。導入文のすぐ下でこれ以上空けると、
 *   導入が本文から切り離されて見える。 */
.page-lead + .page-h2,
.doc-t + .doc-h, .doc-warn + .doc-h { margin-top: 8px; }

.page-p, .doc p {
  /* ★★1行の長さを抑える（理由は css/tokens.css の --measure）。
   *   ★表と数字の粒には掛けない。あちらは桁をそろえて見るもの。 */
  max-width: var(--measure);
  margin: 0 0 16px;
  font-size: 15px; line-height: 1.9; color: var(--t2);
}
.page-p b, .doc p b { color: var(--t1); }
/* ★本文の中のリンクは、色ではなく**下線**で示す。
 *   ★色を足すと、太字（b）と競って本文がまだらになる。 */
.page-p a, .page-lead a, .doc p a {
  color: var(--t1);
  text-decoration: underline;
  text-decoration-color: var(--line2);
  text-underline-offset: 3px;
}
.page-p a:hover, .page-lead a:hover, .doc p a:hover {
  text-decoration-color: var(--t1);
}

/* ---------------------------------------------------------------- 表 */
/* ★★スマホでは横に溢れる。**枠の中だけ**を横に流す——
 *   画面ごと横に動くと、縦に読んでいる指が滑って読めなくなる。
 * ★囲わない。★下に1本だけ引く——表がどこで終わるかは要るが、
 *   四辺を囲うと、表そのものより枠のほうが目立つ。 */
.page-tw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--edge);
}
/* ★★これは**数字の表**。★nowrap は桁をそろえて読むためのもの。
 *   ここに長い文を入れると**折り返さずに横へ伸びる**（1200pxになった）。
 *   ★PCではぎりぎり収まるので気づきにくく、**スマホでだけ崩れる**。
 *   言葉と理由の対は .page-dl を使うこと。
 * ★字は13pxのまま。★tools/_smoke_guard.php の幅の検算がこの大きさで
 *   計算している——変えるなら、あちらの1字あたりの px も一緒に直すこと。 */
.page-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-tbl th, .page-tbl td {
  padding: 11px 14px 11px 0;
  text-align: right;
  border-bottom: 1px solid var(--edge);
}
.page-tbl th:last-child, .page-tbl td:last-child { padding-right: 0; }
/* ★添え字（返還など）。★数字の主役（配当）より小さく淡く。 */
.page-dim { font-size: 11px; color: var(--t3); }
/* ★1列目だけ左そろえ。名前は左から読むもので、数字は右そろえで桁を見る。 */
.page-tbl th:first-child, .page-tbl td:first-child {
  text-align: left;
  white-space: normal;
}
/* ★見出しは**小さく字間を開けた添え字**にする。地を敷かない。
 *   ★地を敷くと帯になって、表の中でいちばん濃いものが見出しになる。
 *     見出しは中身を読むための道しるべで、主役ではない。 */
.page-tbl thead th {
  position: sticky; top: 0;      /* ★長い表を縦に読むとき、見出しが残る */
  background: var(--ink1);       /* ★留まる以上、下の行が透けないよう地は要る */
  color: var(--t3);
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  padding-top: 0; padding-bottom: 9px;
}
.page-tbl tbody tr:last-child td { border-bottom: none; }
.page-tbl td b { color: var(--t1); }
/* ★指を乗せた行を少しだけ浮かせる。★縞模様（1行おきの色）にはしない——
 *   数字の表に縞を入れると、桁を追う目が横縞に引っぱられる。 */
.page-tbl tbody tr { transition: background .12s; }
.page-tbl tbody tr:hover { background: var(--ink2); }
/* ★基準を下回った行。★隠さず、色で分かるようにするだけ。 */
.page-tbl tr.under td { color: var(--t3); }

/* ---------------------------------------------------------------- よくある質問 */
/* ★開閉にする。全部開いていると、探している1つに辿り着けない。
 *   ★中身はHTMLに**必ず在る**（display:none ではない）ので、機械には全部読める。
 * ★★1つずつ箱に入れない。★5つ並ぶと箱が5つ並んで、
 *   中身より箱のほうが目に入る。**間の細い線1本**で足りる。 */
.page-faq {
  max-width: var(--measure);
  margin: 0 0 8px;
  border-top: 1px solid var(--edge);
}
.page-q { border-bottom: 1px solid var(--edge); }
.page-q > summary {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 2px;
  font-size: 15px; font-weight: 500; color: var(--t1);
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
  transition: color .14s;
}
.page-q > summary:hover { color: var(--t1); }
.page-q > summary::-webkit-details-marker { display: none; }
/* ★開いているかを記号で示す。押せることが分かるように。
 *   ★float ではなく flex で右端へ。float だと、質問が2行になったとき
 *     記号が2行目に回り込む。 */
.page-q > summary::after {
  content: '＋';
  margin-left: auto;
  color: var(--t3); font-weight: 400;
  transition: color .14s;
}
.page-q[open] > summary::after { content: '−'; }
.page-q > summary:hover::after { color: var(--t2); }
.page-a {
  padding: 0 2px 18px;
  font-size: 14px; line-height: 1.9; color: var(--t2);
}
.page-a b { color: var(--t1); }
.page-a a {
  color: var(--t1);
  text-decoration: underline;
  text-decoration-color: var(--line2);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- 道案内 */
.page-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin: 0 0 20px;
  font-size: 12px; color: var(--t3);
}
.page-crumb a { color: var(--t3); text-decoration: none; transition: color .14s; }
.page-crumb a:hover { color: var(--t2); }
.page-crumb-s { color: var(--line2); }

/* ★★足元の道案内。**いま読んでいる節（/about/）の続き**だけを並べる。
 *   実績・自慢・予報は上の帯にあるので出さない（2026-08-26）。
 *   それまでは上の帯とほぼ同じものを出していて、/about/price では
 *   足元8項目のうち5つが重複、「料金」は1画面に3回出ていた。 */
.page-nav {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
  font-size: 14px;
}
/* ★何の並びなのかを一言で言う。無いと「なぜここにこの5つがあるのか」が読めない。 */
.page-nav-t {
  margin-bottom: 12px;
  font-size: 11px; letter-spacing: .08em;
  color: var(--t3);
}
.page-nav-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
}
.page-nav a {
  color: var(--t2); text-decoration: none;
  transition: color .14s;
}
.page-nav a:hover { color: var(--t1); }
/* ★★いま居るところ。**押せないもの**ではなく**そこに居る**ことを示す。
 *   以前は --line2（薄い灰）で、並びの中でいちばん暗く＝無効に見えていた。
 * ★★丸印はやめた（2026-08-26）。**字の重さと明るさの2つ**で足りる——
 *   まわりが --t2 の細字なので、--t1 の太字は並びの中で確実に浮く。
 *   ★色だけには頼っていない（重さがもう1つの手がかり）。 */
.page-nav-here { color: var(--t1); font-weight: 600; }

/* ★★読み物の出口。**道案内の外**に置く（.page-nav の兄弟）。
 *
 * ■ なぜ列から出したか（2026-08-26）
 *   塗ったボタンを道案内の列に混ぜると、列の中で1つだけ目立つものが
 *   **現在地に見える**。道案内の中で目立つ＝いま居るところ、が普通の読み方。
 *   ★行き先の印と現在地の印は、**同じ列に置くと必ず取り違えられる**。
 *   ∴ 位置で役割を分ける。上＝節の続き（行き先）／下＝本編へ進む（動作）。
 *
 * ■ ★★形は .btn.fill（css/controls.css）を**そのまま借りる**。
 *   ・一度、塗るのをやめて細い枠（--brand の1px）にしたが、それでも
 *     **現在地に見える**と言われた。理由は分かる——#1B4A96 は暗い紺なので、
 *     暗い地に1px引いても**ほとんど見えない**。結果、字だけが薄く浮いた
 *     箱になり、押せないものと同じ見た目になっていた。
 *   ・∴ 色ではなく**形**で分ける。塗った箱は、道案内の項目としては
 *     絶対に現れない形。現在地（太字の文字）と取り違えようがない。
 *   ・★新しい見た目を作らず、サイトが既に持っている「押すもの」の形を使う。
 *     アプリ側で押してきた形と同じなら、説明なしで押せると分かる。
 * ★★全幅にしない。文の左端にそろえて置く——最後に画面いっぱいの帯が来ると、
 *   静かに読ませてきたページの終わりだけが**急に大きくなる**。
 *   ★狭い画面では全幅にする（下の @media）。指で押すものなので、
 *     幅が要るのはむしろそちら。 */
.page-out { margin-top: 28px; }
.page-out-a {
  letter-spacing: 0;
  transition: background .14s;
}
.page-out-i { transition: transform .14s; }
.page-out-a:hover .page-out-i { transform: translateX(3px); }
@media (max-width: 559px) {
  .page-out-a { display: flex; width: 100%; }
}

/* ---------------------------------------------------------------- 読み物の箱 */
/* ★★1件（見出し＋数字＋説明＋合うプラン）を**1枚**にまとめる（2026-09-05）。
 *   縦に流れるだけだと、どこで1件が切れるのか読み手が数えることになる。
 * ★地との差は詰める（tokens の --ink2 の注記どおり。開けると「板の羅列」に見える）。
 *   輪郭は明度差ではなく縁の線（--edge）で出す。 */
.page-card {
  max-width: var(--measure);
  margin: 16px 0;
  padding: 20px 22px;
  background: var(--ink2);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
/* ★箱そのものが区切りを担うので、中の最初の見出しの上余白は消す。 */
.page-card > .page-h2:first-child { margin-top: 0; }
.page-card > .page-p:last-child { margin-bottom: 0; }
/* ★箱の中の KPI は、実績ページ（独立して立つ）より一段控えめに。
 *   説明と同じ箱に入るので、数字だけが飛び出さないよう 34px→26px。 */
.page-card .page-kpi { gap: 10px; margin: 14px 0 16px; }
.page-card .page-kpi-v { font-size: 26px; }
/* ★カードの中の枠は、カード地（--ink2）の上で一段浮かせる。地は据え置きでよいが、
 *   縁だけ少し強めて、カードの縁と二重に見えないようにする。 */
.page-card .page-kpi-c { padding: 12px 14px; }

/* ★「合うプラン」の1行。★本文より引く——見出しと本文が主で、これは添え物。 */
.page-fit-p {
  margin: 14px 0 0;
  font-size: 13px; color: var(--t3);
}
.page-fit-p b { color: var(--t2); font-weight: 600; }
/* ★プラン名の札。★丸めた小さな札で「分類」だと分かる形にする（本文と混ざらない）。 */
.page-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 11px;
  background: var(--ink3);
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 12px; color: var(--t2);
}

/* ------------------------------------------------ 言葉とその理由（表の代わり）
 * ★★2列の表に長い文を入れない。狭い画面では1列150pxしか残らず、
 *   しかも .page-tbl は nowrap なので**折り返さずに横へ伸びる**。
 *   ★縦に積めば、画面の幅がいくつでも同じように読める。
 * ★★囲わない・縦線も引かない（2026-08-26に落とした）。
 *   言葉が太字、理由が細字——**字の重さだけ**で対になっていることは読める。
 *   組と組の切れ目は細い線1本で足りる。 */
.page-dl {
  max-width: var(--measure);
  margin: 0 0 20px;
  border-top: 1px solid var(--edge);
}
.page-dl-i {
  padding: 16px 0;
  border-bottom: 1px solid var(--edge);
}
.page-dl-t {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
}
.page-dl-d {
  /* ★dd の既定の字下げ（40px）を消す。消さないと右へ寄って幅を食う。 */
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--t2);
  overflow-wrap: anywhere;             /* ★長い語で横へ溢れない */
}
.page-dl-d b { color: var(--t1); }

/* ---------------------------------------------------------------- 断り */
/* ★囲わない。★上に線を1本引いて、字を小さく暗くするだけで
 *   「本文とは別のもの」は伝わる。箱に入れると、注意書きのほうが本文より目立つ。 */
.page-note {
  max-width: var(--measure);
  margin: 36px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--edge);
  font-size: 12px; line-height: 1.85; color: var(--t3);
}
.page-note b { color: var(--t2); }
.page-note a { color: var(--t2); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 数字の粒 */
/* ★実績の頭に置く大きな数字。★根拠（母数）を必ず添える——
 *   率だけ大きく出すと、何件の話なのかが読めない。
 * ★★1つずつ**枠で囲う**（2026-09-05にユーザー要望で戻した）。
 *   ★以前は「数字自体が大きいので囲わない」方針だったが、母数の添え字まで
 *     含めると1件がどこからどこまでか掴みにくかった。枠で1件の輪郭を出す。
 *   ★間隔は詰める（枠どうしがくっつかない程度）。囲うと余白が二重に効くので。 */
.page-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 4px 0 36px;
}
/* ★1件の枠。地から一段だけ浮かせる（--ink3）。カードの中（--ink2）でも
 *   ページ地（--ink1）でも、どちらの上でも輪郭が出る明るさ。 */
.page-kpi-c {
  padding: 13px 15px;
  background: var(--ink3);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
/* ★名札は小さく、字間を開けて。★数字が主役なので、名札は控える。 */
.page-kpi-k {
  font-size: 11px; color: var(--t3);
  letter-spacing: .08em; line-height: 1.5;
}
.page-kpi-v {
  margin-top: 8px;
  font-size: 34px; font-weight: 600; color: var(--t1);
  font-variant-numeric: tabular-nums;
  /* ★数字は字間を詰める。桁が多いと、既定の字間では間延びして見える。 */
  letter-spacing: -.03em;
  line-height: 1.1;
}
/* ★添え字は数字の下に少し空けて置く。★母数や注意書きが数字にくっついていると、
 *   数字の一部に見える（「130,360円 最高」と読める）。 */
.page-kpi-s {
  margin-top: 8px;
  font-size: 12px; line-height: 1.6; color: var(--t3);
}

/* ---------------------------------------------------------------- 一覧の口 */
/* ★日ごと・場ごとへ渡る口。数が多いので、札を敷き詰める形にする。
 *   ★ここは囲う。**数が多くて、1つ1つが押せるもの**だから——
 *     どこからどこまでが1つの口なのかが、線でしか分からない。 */
.page-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px;
}
.page-chips a {
  padding: 7px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font-size: 13px; color: var(--t2); text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .14s, color .14s;
}
.page-chips a:hover { border-color: var(--line2); color: var(--t1); }
/* ★当たりの多かった日だけ少し立てる。全部同じだと、めくる手がかりが無い。 */
.page-chips a.hot { border-color: var(--rough3); color: var(--t1); }

/* ---------------------------------------------------------- 盤（/results/grid） */
/* ■ ★★場ごとの行 × 1R〜12R。右に集計（当日・累計）。
 *   ★格子は grid で組む。表（<table>）にしない——見出しの行と本体の行で
 *     列幅がずれないのが要で、table だと会場名の長さで列が動く。
 *   ★会場名は左に貼り付ける（position: sticky）。横に流したときに
 *     **どの場の行を見ているか**が分からなくなるのを防ぐ。 */
.rg-wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0 0 8px;
}
.rg-board {
  flex: 1 1 auto;
  min-width: 0;                       /* ★flex の中で overflow を効かせる要 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* ★右の集計。★幅を決め打つ。伸ばすと盤が痩せて、マスの印が読めなくなる。 */
.rg-side { flex: 0 0 232px; }
/* ★狭い画面では縦に積む。★盤を横スクロールさせたまま右に置くと、
 *   集計へ届く前に横スクロールの壁ができる。 */
@media (max-width: 760px) {
  .rg-wrap { flex-direction: column; gap: 8px; }
  .rg-side { flex: 1 1 auto; width: 100%; }
}

.rg-row { display: flex; align-items: stretch; width: max-content; min-width: 100%; }
.rg-vname {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 92px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 0;
  /* ★地と同じ色で塗る。塗らないと、横に流したときにマスが透けて見える。 */
  background: var(--ink1);
  font-size: 12px;
  border-bottom: 1px solid var(--edge);
}
.rg-vname a { color: var(--t1); text-decoration: none; }
.rg-vname a:hover { text-decoration: underline; }
/* ★その場の件数。★小さく添えるだけ（主役はマスの散らばり）。 */
.rg-vn { margin-left: auto; color: var(--t3); font-size: 11px; }

.rg-cells {
  display: grid;
  grid-template-columns: repeat(12, minmax(46px, 1fr));
  flex: 1 1 auto;
}
.rg-cell {
  min-height: 34px;
  padding: 3px 2px;
  border-left: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}
.rg-head .rg-cell, .rg-head .rg-vname { min-height: 0; border-bottom: none; }
.rg-th {
  padding: 2px;
  color: var(--t3);
  font-size: 11px;
  text-align: center;
  display: block;
}
/* ★予報を出した回のマス。★地を一段浮かせるだけ（色は付けない）。 */
.rg-on { background: var(--ink3); }

/* ★★色は**印ごと**に付ける（マスではなく）。
 *   ★荒れ度で塗ってはいけない。段は「どれだけ荒れたか」で、当たり外れではない。
 *     イン逃げにとっては荒れ＝外れなので、段で塗ると**外れがいちばん濃い緑**になる。
 *   ★同じレースでも「荒れ」と「イン逃げ」は逆のことを言うので、
 *     片方が当たればもう片方は外れる。∴ マス単位では塗り分けられない。 */
.rg-m {
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 2px;
}
.rg-m.hit  { background: var(--ok); color: #fff; font-weight: 700; }
/* ★外れは**消さない**。薄くするだけ（良いところだけ見せない）。 */
.rg-m.miss { color: var(--t3); }

/* ★色の読み方。★色だけ出して意味を書かないと、ただの飾りになる。 */
.rg-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 10px 0 20px;
  font-size: 12px;
  color: var(--t2);
}
/* ★印と言葉は1組で扱う。★離すと、どの色がどの言葉か読み取れなくなる。 */
.rg-ki { display: inline-flex; align-items: center; gap: 6px; }
.rg-k {
  width: 22px;
  height: 12px;
  border: 1px solid var(--edge);
  border-radius: 2px;
}
.rg-k.hit  { background: var(--ok); border-color: var(--ok); }
.rg-k.miss { background: var(--ink3); }
.rg-k.none { background: transparent; }

/* ★右の集計の見出し。★当日と累計を同じ形で2回出す。 */
.rg-hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t1);
}
.rg-sub { margin-left: auto; color: var(--t3); font-weight: 400; font-size: 11px; }
/* ★狭い列なので、余白と字を詰める。★桁は tabular-nums のまま（page-tbl 由来）。 */
.rg-side .page-tbl { font-size: 12px; }
.rg-side .page-tbl th, .rg-side .page-tbl td { padding: 7px 8px 7px 0; }
.rg-side .page-p { font-size: 11px; line-height: 1.8; }

/* ---------------------------------------------------------- 動きを減らす設定 */
/* ★★「動きを減らす」を選んでいる人には、色や線の移り変わりも出さない。
 *   ★飾りのために、その設定を無視しない。
 *   ★ここに**この下書きで transition を書いた印を全部**並べる。
 *     書き足したら、ここにも足すこと。 */
@media (prefers-reduced-motion: reduce) {
  .page-tbl tbody tr,
  .page-q > summary,
  .page-q > summary::after,
  .page-crumb a,
  .page-nav a,
  .page-out-a,
  .page-out-i,
  .page-chips a { transition: none; }
}