/* 調べもの（/lab/）。★読み物のための組み方。
 *
 * ■ ★★アプリ・サービスサイトとの違い
 *   ・アプリ（.app）  … カードを1列で読む → 520px
 *   ・実績（.page）   … 表を広く使う      → 880px
 *   ・**記事（.lab）** … 長い文を読み続ける → **文は 660px、表と図は広く**
 *   ★記事だけ本文の幅を狭くする。880px いっぱいに日本語を流すと1行90字近くになり、
 *     折り返したときに次の行頭を見失う。★読み物では致命的。
 *
 * ■ ★色と部品は既存のトークンをそのまま使う（css/tokens.css）。
 *   ★★別のサイトに見せない。運営が同じであることが、この記事の信用の土台。
 *     見た目を作り分けると「どこかの記事」になり、実測値の重みが落ちる。
 *
 * ■ ★飾りを足さない（css/page.css と同じ決まり）。
 *   段は余白で作る。線は「そこで話が変わる」ときの1本だけ。
 */

/* ---------------------------------------------------------------- 器 */
/* ★★幅は .page（880px）に任せる。**ここで別の幅を持たない**（2026-09-03）。
 *
 * ■ ★★文だけ 660px に絞っていたのをやめた
 *   読み物なので1行を短くしたほうが読みやすい、という理屈で絞っていたが、
 *   ★表や答えの枠は 880px のままだったので、**同じ画面に2つの幅**ができ、
 *     段落だけが内側に引っ込んで見えていた。
 *   ★そもそも 15px の全角なら 880px でも1行58字ほどで、
 *     「90字近くになる」という当初の見立てが**大きすぎた**（字の大きさを
 *     考えずに幅だけで割っていた）。絞る理由がそこまで強くない。
 *   ∴ ヘッダー・実績・サービスサイトと**同じ1つの幅**に揃える。
 */
.lab { width: 100%; }

/* ---------------------------------------------------------------- 頭 */
.lab-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--accent);
}
.lab-t {
  margin: 0 0 16px;
  font-size: clamp(22px, 4.6vw, 30px);
  font-weight: 800;
  line-height: 1.45;
  color: var(--t1);
  /* ★長い題を単語の途中で折らない。日本語の題は読点で折れると読みにくい。 */
  word-break: auto-phrase;
}
.lab-lead {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--t2);
}
/* ★いつ・何を数えたか。★数字だけ引用されたときに条件が落ちないよう、頭に置く。 */
.lab-meta {
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--edge);
  font-size: 12px;
  line-height: 1.9;
  color: var(--t3);
}

/* ---------------------------------------------------------------- 答え */
/* ★★いちばん知りたい答えを先に置く枠。★読ませてから答えない。
 *   検索から来た人は「確率は？」だけを知りたい。そこに1秒で届かせる。 */
.lab-ans {
  margin: 0 0 34px;
  padding: 22px 24px;
  /* ★★左のブランド色の帯は外した（2026-09-03）。
   *   ★飾りを足さない、という css/page.css の決まりに戻す。
   *     枠は1本で足りる——色の帯は「ここが大事」を色で言っているだけで、
   *     大きい数字がすでにそれを言っている。二重に言うと、かえって散る。 */
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--ink2);
}
.lab-ans-k { font-size: 13px; color: var(--t2); }
.lab-ans-v {
  margin: 4px 0 8px;
  font-size: clamp(38px, 9vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.lab-ans-s { font-size: 13px; line-height: 1.9; color: var(--t2); }

/* ---------------------------------------------------------------- 本文 */
.lab-h2 {
  margin: 40px 0 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--t1);
  scroll-margin-top: 76px;      /* ★見出しへ飛んだとき、ヘッダーの下に隠れない */
}
.lab-p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 2.05;            /* ★長文なので行間を広く取る */
  color: var(--t2);
}
.lab-p b { color: var(--t1); font-weight: 700; }
.lab-ul {
  margin: 0 0 18px;
  padding-left: 1.3em;
  list-style: disc;
}
.lab-ul li {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 2.0;
  color: var(--t2);
}
.lab-ul b { color: var(--t1); }

/* ★但し書き。★小さくするが、読めなくはしない（12pxを下回らない）。 */
.lab-note {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--ink2);
  font-size: 12px;
  line-height: 1.95;
  color: var(--t3);
}
.lab-note b { color: var(--t2); }

/* ★表は実績と同じ形を借りる（.page-tbl）。★1列目だけ左そろえも継ぐ。 */
.lab-tbl td:last-child, .lab-tbl th:last-child { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 導線 */
/* ★★本文の外に1つだけ。★本文に売り込みを混ぜると、
 *   書いてある数字まで疑われる（記事が売り場になった瞬間に負ける）。 */
.lab-cta {
  margin: 44px 0 0;
  padding: 24px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--ink2);
}
.lab-cta-t {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}
.lab-cta-p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.95;
  color: var(--t2);
}
.lab-cta-p b { color: var(--t1); }
.lab-cta-a { display: inline-flex; }
.lab-cta-b {
  margin-left: 16px;
  font-size: 13px;
  color: var(--accent);
}
@media (max-width: 520px) {
  .lab-cta-a { display: flex; width: 100%; }
  .lab-cta-b { display: inline-block; margin: 14px 0 0; }
}

/* ★表の中の棒。★数字だけだと形が読めないので、長さで並びを見せる。
 *   ★色は付けない（css/page.css の「飾りを足さない」に合わせる）。 */
.lab-bar {
  display: block;
  height: 8px;
  min-width: 1px;
  border-radius: 2px;
  background: var(--accent);
}
/* ★いちばん多い行だけ地を敷く。★1行だけなので、色は使わず明るさで。 */
.lab-tr-on td { background: var(--ink3); }

/* ---------------------------------------------------------------- 札 */
/* ★カテゴリとタグ。★小さく、目立たせない——記事の中身より前に出るものではない。 */
.lab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 26px;
}
.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--edge);
  border-radius: 100px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--t2);
  text-decoration: none;
  transition: border-color .14s, color .14s;
}
.lab-chip:hover { border-color: var(--line2); color: var(--t1); }
/* ★カテゴリだけ少し立てる。タグと同じ強さだと、階層が読み取れない。 */
.lab-chip-c { border-color: var(--line); color: var(--t1); font-weight: 700; }
.lab-chip-n { color: var(--t3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 次に読む */
/* ★★袋小路を作らない。★記事どうしを結ぶと、土台の記事に評価が集まる。 */
.lab-next { margin: 34px 0 0; }
.lab-next-t {
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--t3);
}
.lab-next-a {
  display: block;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .14s;
}
.lab-next-a:hover { border-color: var(--line2); }
.lab-next-h {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--t1);
  word-break: auto-phrase;
}
.lab-next-l {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--t3);
}

/* ---------------------------------------------------------------- 一覧 */
.lab-list { display: grid; gap: 12px; margin: 8px 0 24px; }
.lab-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--ink2);
  text-decoration: none;
  transition: border-color .14s;
}
.lab-card:hover { border-color: var(--line2); }
.lab-card-d {
  display: block;
  font-size: 11px;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
}
.lab-card-t {
  display: block;
  margin: 6px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--t1);
  word-break: auto-phrase;
}
.lab-card-l { display: block; font-size: 13px; line-height: 1.85; color: var(--t2); }

/* ---------------------------------------------------------- 動きを減らす設定 */
/* ★「動きを減らす」を選んでいる人には、色や線の移り変わりも出さない。 */
@media (prefers-reduced-motion: reduce) {
  .lab-card, .lab-next-a, .lab-chip { transition: none; }
}