/* 暮らしの準備リスト — 記事サイト
 *
 * Pinterest からの流入が前提。滞在が短いので、ファーストビューに
 * 見出し・PR表記・早見表を収める。画像は置かない（LCPを守る）。
 *
 * 設計の芯:
 *   ページ全体をモノクロで組み、彩度のある色はボタン1色だけに絞る。
 *   「この色＝押せる」がサイト内で学習されることが本体なので、
 *   --cta はボタン以外に絶対に使わない。楽天の赤には寄せない
 *   （公式ボタンだと誤認させる態様を避けるため）。
 *   見せ場は早見表のカード1枚に集中させ、他は静かに保つ。
 */

:root {
  /* **クリーム地をやめた（2026-08-12）。**
     「ピンの紙色に合わせる」という理由で #fbf7f0 にしていたが、出来上がったものは
     AI生成デザインの定番そのものだった（暖かいクリーム地＋高コントラストの見出し）。
     実測した競合4本（SAKIDORI #f5f5f5 / folk #fff / 360life #fff / マイベスト白）は
     全部が白か中間グレーで、暖色はゼロだった。
     ピンとサイトをつなぐのは地色ではなく**アクセント色**なので、金は変えない。 */
  --bg:        #fbfbf9;
  /* 地が白になったので、面のほうをグレーにして反転させる（folk と同じ組み方） */
  --card:      #f4f5f2;
  /* 構造マーク専用（h2の帯・アイコン・★・寸法線）。**文字には使わない。**
     白地3.48:1・カード地3.22:1で非テキストの3:1は満たすが、本文のAA4.5:1に足りない */
  --accent:    #a8843a;
  --accent-tint: #f7efdc;
  /* 文字に使う金。白地5.37:1・カード地4.96:1でAAを満たす */
  --accent-ink: #846627;
  --star-off:  #dcdcdc;
  /* 判断のマーカー。**黄（数字）と見分けるための緑。**
     地に対して十分に薄く、上に乗る --ink が 15:1 を保つ濃さにしてある */
  --judge:     #d9e4cd;
  /* 文字は中性グレー。競合3/4が #333 前後で、緑みの黒（旧 #12171a）より軽い */
  --ink:       #17181a;   /* 鉛筆の黒鉛。**青寄りの冷たい黒**にする。
                             茶色寄りの黒はAI生成の定番に寄る。地に対し 15.9:1 */
  --ink-2:     #5c6066;   /* 冷たい灰。地に対し 6.6:1 */
  --ink-3:     #6c7076;   /* 地に対し 5.1:1・カード地 4.9:1 */
  /* マーカーの帯。文字色は --ink のままにして、帯だけで色を足す */
  --marker:    #ffe7a3;
  --line:      #e2e4e1;
  --line-2:    #eef0ec;
  --cta:       #0d6e63;   /* ボタン専用。楽天の赤に寄せない（公式ボタンとの誤認回避） */

  /* **巻尺の黄色。** AI生成の定番であるテラコッタにもアシッドグリーンにも
     寄せない。この案件の道具（メジャー）から取った色で、
     目盛りと数字にだけ使う */
  --tape:      #e3a81f;
  --wrap: 42rem;
  /* **角丸を締めた。** 緩い角丸は柔らかく見え、計器という方向と矛盾する */
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "BIZ UDPGothic", Meiryo, sans-serif;
  font-size: 16.5px;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* ヘッダーバー（.site-head / .site-name / .site-tagline）は 2026-08-17 に外した。
   理由は templates/site/base.html の注記を参照。
   ページの先頭は、記事ならパンくず、トップなら H1 から始まる */

/* ── 記事カード ─────────────────────────────
 * モバイルではカードにしない。地色との差が1.17:1でほぼ知覚できないのに、
 * 左右のパディングで本文幅を40px削っていた。幅を本文に回す。
 * カードは700px以上でだけ有効にする。
 */
.sheet { padding: 24px 0 34px; }

/* ── パンくず ───────────────────────────── */
.crumb {
  font-size: 12px; color: var(--ink-3);
  letter-spacing: .05em; margin-bottom: 12px;
}
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--ink-2); }

/* ── 見出し ─────────────────────────────── */
h1 {
  font-size: 27px;
  line-height: 1.36;
  letter-spacing: -.03em;
  margin: 0 0 14px;
  font-weight: 800;
  /* 行末に1語だけ残るのを防ぐ。日本語でも効く */
  text-wrap: balance;
}
/* 記事の題は、組み立てのときに入れた `<wbr>` の位置だけで折る。
   keep-all を付けないとブラウザが「ふたり暮らしの防／災」と漢字の途中で割る
   （2026-08-20 に実機で確認）。入りきらないときだけ anywhere が働く */
.sheet > h1 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h2 {
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -.02em;
  margin: 52px 0 16px;
  font-weight: 800;
}
/* **斜線の帯をやめた（2026-08-19）。**
 *
 * 見出しに構造マークが2つ（縦罫＋斜線の帯）並んでいた。
 * 縦罫だけで役割は足りていて、帯は装飾になっていた。
 * この案件の黄は目盛り・縦罫・マーカーの3つで使う。4つ目は多い。
 *
 * 代わりに細い罫を1本。見出しの下に余白を作る役だけを残す。 */
h2 { position: relative; padding-bottom: 11px; }
h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--line);
}
h3 {
  font-size: 17.5px;
  line-height: 1.6;
  letter-spacing: -.02em;
  margin: 40px 0 10px;
  font-weight: 800;
  display: flex; align-items: baseline; gap: 10px;
}
/* 早見表の 01..07 と本文の見出しを対応させる番号 */
.h3-no {
  flex: none;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: #fff; background: var(--ink-2);
  border-radius: 4px; padding: 3px 6px 2px;
  font-variant-numeric: tabular-nums;
  transform: translateY(-2px);
}

p { margin: 0 0 1.35em; }
/* 本文の強調。実測した比較サイトはどれも黄色のマーカーを多用していた。
   下線でも太字でもなく、地に色を敷くのが日本語だと読みを止めない */
article strong {
  font-weight: 800;
  background: linear-gradient(transparent 58%, #ffe9a8 58%);
  padding: 0 1px;
}
a { color: var(--ink); text-underline-offset: 3px; }

/* ── PR表記 ─────────────────────────────
 * 景表法の運用基準が「小さく」「薄い色」「末尾」をNGとしているので、
 * 本文と同じ濃さで H1 の直下に置く。灰色のボックスにはしない。
 */
.pr {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 20px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.pr b {
  display: inline-block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--ink); border: 1.5px solid var(--ink);
  border-radius: 3px; padding: 1px 6px; margin-right: 8px;
  vertical-align: 1.5px;
}

/* 判断の強調。**圏点をやめてマーカーにした（2026-08-19）。**
 *
 * 圏点（文字の上の点々）は W3C JLReq にある正式な組み方だが、
 * 実機で読んで「不自然」という指摘が出た。日本語のウェブで見慣れた強調は
 * マーカーと太字のほうで、圏点は縦組みの本や教科書の記号として読まれる。
 *
 * 帯の色でデータと判断を分ける。**黄は数字、緑は判断。**
 *   `…`   → mark.key（黄）  価格・件数・寸法・商品名
 *   *…*   → article em（緑） 選んだ基準・線の引き方
 */
article em {
  font-style: normal; font-weight: 700;
  background-image: linear-gradient(transparent 58%, var(--judge) 58%);
  padding-bottom: 1px;
}

/* ④ ★の半分塗り。色数を増やさずに華やかさを足す */
.stars { white-space: nowrap; letter-spacing: .04em; }
.stars span { color: var(--star-off); }
.stars .on { color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stars .half {
    background-image: linear-gradient(90deg, var(--accent) 50%, var(--star-off) 50%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ── 数値サマリ ───────────────────────────
   **定義は「目盛り」の節に1つだけ置いてある。** ここには書かない。
   2026-08-19 まで同じ .summary / .summary b / .summary span が2か所にあり、
   前の値は後ろに全部上書きされて**一度も効いていなかった**（実測）。
   片方を直しても画面が変わらないので、間違いに気づけない形だった。 */

/* ── 早見表 ─────────────────────────────
 * 4列のテーブルは幅390pxで破綻した（品目名が5行に折り返し、最終列が切れた）。
 * 1品目1ブロックにして横スクロールを消す。
 * 品目名はリンクにしない。「まだ読みたい」と「もう買いたい」が
 * 同じ場所で衝突して誤タップを生むため。
 */
.quick { list-style: none; counter-reset: q; padding: 0; margin: 0; }
/* サムネイルが3行をまたぎ、右側に品名・価格・用途を積む。
   品名と価格を同じ行に置くと幅390pxで品名が1文字だけ折り返した（実測）ため、
   品名に行を丸ごと与えている。品名が何文字でも破綻しない。
   **指を置いた行だけ地を変える**（動きの節ではなくここに置く） */
.q-item {
  counter-increment: q;
  padding: 13px 0 13px 34px;
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  transition: background .16s ease;
}
.q-item + .q-item { border-top: 1px solid var(--line-2); }
.q-item::before {
  content: counter(q, decimal-leading-zero);
  position: absolute; left: 0; top: 15px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.q-body { min-width: 0; }
.q-head { display: flex; align-items: baseline; }
.q-meta {
  display: flex; align-items: baseline; gap: 10px; margin-top: 2px;
  flex-wrap: wrap;
}
.q-rev {
  margin-left: auto; white-space: nowrap;
  font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
/* **指で押す前提なので44px以上にする。** 実測23pxしかなかった。
   余白ぶんを負のマージンで戻す。**行の高さは変えない**（早見表が縦に伸びる） */
.q-name {
  display: inline-block; padding: 11px 0; margin: -11px 0;
  font-weight: 800; font-size: 16.5px; line-height: 1.4; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
a.q-name { text-decoration: underline; text-decoration-color: #cfd6d2;
           text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a.q-name:hover { text-decoration-color: var(--ink-2); }
.q-price {
  color: var(--accent-ink);
  font-weight: 800; font-size: 15.5px;
  white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.q-sub {
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin-top: 1px;
}

/* 品目のアイコン。早見表では商品写真（.q-shot）を優先し、これは写真が無いときの控え。
   ピン画像と同じ Lucide（ISC）を使い、見た目の一貫性を持たせる */
.q-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-right: 2px;
}
/* 商品画像。**切り抜き禁止。**
 * 楽天は「画像の一部を切り取って使用すること」「画像の上に直接文字や装飾を入れること」を
 * 著作者人格権（同一性保持権）を根拠に禁じている。可なのはサイズ変更と外側への加工だけ。
 * したがって object-fit: cover は使えない。contain は「正方形でないものが来ても
 * letterbox する」ための保険で、実測13/13品は楽天側が600×600に正規化して返す。
 * 地色を白にするのは、商品画像の背景が白で紙色(#fbf7f0)と段差が出るため。
 */
/* **幅いっぱいにしない（2026-08-19）。**
   楽天の商品画像には「送料無料」「楽天1位」のような赤字が焼き込まれていて、
   こちらでは消せない（同一性保持権を根拠に加工が禁じられている）。
   幅390pxで358px角に出すと、紙面でいちばん声が大きい面になっていた。
   **消せないものは、小さくする。** 押す面としては300pxでも十分に大きい */
.shot {
  max-width: 300px; margin: 14px auto 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
  /* 正方形の箱を先に予約する。楽天は概ね正方形で返すが、実測で 599x600 の品が
     あった（耐震マット）。height:auto にすると1pxでもズレた瞬間に
     レイアウトシフトが出るし、将来 600x400 の品が来たら大きく飛ぶ。
     箱を固定して contain で収めれば、どんな比率でもシフトしない */
  aspect-ratio: 1 / 1;
}
.shot img { width: 100%; height: 100%; object-fit: contain; }

/* 大事な語のマーカー。`語` と書くと付く。
   **文字色は変えず、下に色の帯だけを敷く。** 文字色を金にすると
   本文サイズでコントラストが足りない（#a8843a は 3.26:1）。
   帯は 58% から下に敷く。文字の下端に重なる高さが、紙に引いた線に近い */
mark.key {
  background: linear-gradient(transparent 58%, var(--marker) 58%);
  color: inherit;
  font-weight: 700;
  padding: 0 1px;
}
/* 箱の中では帯を濃くする。箱の地色に負けるため */
.box mark.key { background: linear-gradient(transparent 58%, #efd58c 58%); }

/* 商品画像はタップで楽天へ。枠は画像の外側なので加工に当たらない */
.shot a { display: block; line-height: 0; }
.shot a:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }

/* 節の頭の写真。参考サイトの骨格（h2 → 画像 → 本文）を借りる。
   図解（.fig）と違って枠線を付けない。写真は輪郭が自分で立つ */
.photo { margin: 14px 0 20px; }
.photo img { width: 100%; height: auto; border-radius: 3px; display: block; }
/* クレジットは画像の外。ライセンス上は不要だが出どころを書く */
.photo-credit {
  margin-top: 6px; font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .02em;
}
/* **UnsplashのAPIガイドラインが撮影者ページへのリンクを必須にしている。**
   出典なので本文のリンクより弱く見せるが、下線は残す。
   下線を消すとリンクだと分からず、「リンクを含む」という要求を満たさなくなる */
.photo-credit a { color: var(--ink-3); text-decoration: underline; }
.photo-credit a:hover { color: var(--ink-2); }

/* 記事の図解。自前で作った画像なので加工の制約はない（楽天の画像とは別）。
   **寸法はこちらが決めているので aspect-ratio の箱を予約しない。**
   img の width/height 属性に正しい値が入っているため height:auto でもシフトしない。
   レイアウトごとに高さが違う（split 1200×800 / formula 1200×430）ので、
   箱を固定すると片方が letterbox になる。
   枠線は付けない（図の中に既に枠があるので二重になる） */
.fig { margin: 20px 0 22px; line-height: 0; }
/* **地色を白にしたので、図（白地）と本文の境界が消えた。** 枠で輪郭を作る
   （商品画像 .shot と同じ扱い。図の地色を変えるより、外側で線を引くほうが安全）。

   **角丸をやめた（2026-08-17）。** 図の中身から丸枠と色地を外したのに、
   記事側が角丸のカードで包んでいたので、外から見ると結局カードだった。
   直角にすると、貼られた部品ではなく紙面に組まれた図として読める。
   写真（.photo）は角丸のままにする。あちらは丸いほうが写真に見える */
.fig img {
  width: 100%; height: auto; border-radius: 0;
  background: #fff; border: 1px solid var(--line);
}

/* 早見表のサムネイル。丸アイコンと同じ場所に入るので、寸法を .q-icon に合わせる。
   **写真は楽天へのリンク（a.q-buy）。** 56pxなので指で押せる（44px以上）。
   品名は記事内アンカーのままにして、押し先を上下に離してある */
.q-shot {
  display: block;
  flex: none; width: 56px; height: 56px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  overflow: hidden;
  margin-right: 4px;
  line-height: 0;
}
.q-shot img { width: 100%; height: 100%; object-fit: contain; }
/* 押せることを見せる。**枠の濃さだけで出す**（影も塗りも足さない） */
.q-buy { transition: border-color .18s ease; }
@media (hover: hover) {
  .q-buy:hover { border-color: var(--cta); }
}

/* 画像内の「送料無料」「楽天ランキング第1位」は加工できないので、外側で断る。
   1記事に1度だけ。PR表記の直後に置いて、どの画像より先に読ませる */
.pr-img { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

/* h2 の丸アイコンバッジ（360life/LDK の型）。
   早見表の .q-icon と同じ見え方にして、サイト内で丸バッジの意味を1つに保つ。
   斜線の帯（h2::after）と合わせて、見出しの構造マークは2つまでにとどめる */
/* **丸い塗りバッジをやめた（2026-08-19）。**
 *
 * `CLAUDE.md` で「丸枠・色地・丸アイコンを全廃」と決めたのに、見出しにだけ
 * 残っていた。丸い色地のアイコンはAI生成の意匠の典型で、
 * この案件の方向（計器・目盛り・精度）とも噛み合わない。
 *
 * 代わりに巻尺の色の縦罫を1本引く。目盛りと同じ語彙になる。
 */
.h2-icon {
  flex: none; width: 3px; height: 26px;
  border-radius: 0;
  background: var(--tape);
  display: inline-block;
  margin-right: 12px;
  vertical-align: -4px;
  overflow: hidden;         /* 中のSVGは出さない。罫だけにする */
  text-indent: -99px;
}
.h2-icon svg { display: none; }

/* 連番をやめる面では、番号ぶんの余白も戻す */
.quick .q-item { padding-left: 0; }
.q-item::before { display: none; }

/* トピックのまとまり。記事が増えたときに効く */
.topic { margin-top: 40px; }
.topic h2 { display: flex; align-items: baseline; gap: 10px; }
.topic .count {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .04em;
}
.related { margin-top: 54px; }
.related h2 { font-size: 18px; }

/* 本文中に表が残っていた場合の保険 */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line-2); }
th { font-weight: 800; }

/* ── ボタン ─────────────────────────────
 * 高さ56px以上。グラデーションと強い影は広告に見えて逆効果なので付けない。
 */
.cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  width: 100%; min-height: 76px;
  padding: 14px 18px;
  margin: 24px 0 0;
  background: var(--cta);
  color: #fff;
  text-decoration: none;
  font-weight: 800; font-size: 16.5px; line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  border-radius: 3px;
  transition: background .15s ease;
}
.cta:hover { background: #0a5a51; }
.cta-main { display: block; }
/* 「…を楽天市場で見る」が「見／る」、「ベッド下の収納ボックス 4／個組」で割れていた。
   text-wrap: balance は商品名の途中（「収納ボック／ス」）で折り、
   word-break: auto-phrase は未対応環境で「楽天市／場」に割れた。実測して両方却下。
   末尾だけ nowrap にすると、改行できる位置が商品名と末尾のあいだだけになる。
   **商品名側は nowrap にしない**（長い商品名がボタンからあふれる） */
.cta-tail { white-space: nowrap; }
/* 価格はボタンの外。楽天は禁止例に「商品名に含まれない情報（値段など）を
   追加する」を挙げている。争う価値がないので外に出す */
.cta-price {
  margin: 7px 0 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
/* 価格の取得日。楽天ウェブサービスのFAQが、価格を1時間に1回以上更新しない
   場合に「価格情報に隣接して更新日時を明記」することを求めている。
   金額より1段落として、価格そのものの視認性は落とさない */
.cta-asof {
  display: inline-block; margin-left: 6px;
  font-size: 11.5px; font-weight: 400; color: var(--ink-3);
  letter-spacing: 0;
}
.cta-price + .cta-note { margin-top: 3px; }
/* 早見表の直後にボタンを置くと、近接則で「最後の品目のボタン」に見える。
   何のボタンかを言い直す */
.cta-lead {
  margin: 30px 0 -14px; font-size: 13.5px; font-weight: 700;
  color: var(--ink-2); letter-spacing: .04em;
}
.cta-note {
  font-size: 11.5px; color: var(--ink-3);
  margin: 8px 0 30px; text-align: center; letter-spacing: .02em;
}

/* ボタンの直上に出す判断材料。英語圏のA/Bで最も一貫して効いた形。
   レビューは数値のみ（本文の転載・要約は楽天が明示的に禁止） */
.cta-facts {
  margin: 24px 0 -18px;
  font-size: 13px; color: var(--ink-2); font-weight: 600;
  letter-spacing: .01em;
}
.cta-lead + .cta-facts { margin-top: 10px; }


@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stars .half {
    background-image: linear-gradient(90deg, var(--accent) 50%, var(--star-off) 50%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ── 数値サマリ ─────────────────────────
 * 数値はすべてデータから導いたもの。文章を作っていない。
 * 匿名運営で信頼を作る手段は、検証できる数字を出すことしかない
 */
/* 目次。h2 だけを並べる（品目のナビは早見表が持っている）。
   折り返しの中に入る唯一のナビなので折りたたまない。
   数字は「何番目の節か」を示すもので、順番に意味がある（PREPの流れ） */
/* **囲みと 01/02/03 を外した（2026-08-19）。**
 *
 * 目次の番号は情報を持っていない。読者が要るのは行き先であって順番ではなく、
 * 連番は「順序が読者に必要なとき」にだけ意味がある。
 * 塗りつぶしの角丸カードと連番の組み合わせは、AI生成の意匠の典型でもある。
 *
 * 代わりに罫線と余白で組む。行き先だけを立てる。
 */
.toc {
  margin: 28px 0 32px;
  padding: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
/* **ラベルを「目次」にし、番号を振った（2026-08-19）。**
   「この記事の中身」を11pxで置いていたが、実機で見て**目次だと分からなかった**。
   番号は飾りではない。節は実際に順序を持っていて、読者はそこを飛ばして戻る。
   **囲みカードにはしない**（DESIGN.md）。罫線と余白のまま、番号だけ足す。 */
.toc-title {
  margin: 10px 0 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .10em;
  color: var(--ink-2);
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li + li { border-top: 1px solid var(--line-2); }
.toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 11px 0;
  font-size: 15.5px; font-weight: 700; color: var(--ink);
  text-decoration: none;
  /* 巻尺の色を、下線が伸びる動きで使う。触れたところだけ */
  background-image: linear-gradient(var(--tape), var(--tape));
  background-size: 0 2px; background-position: 0 calc(100% - 8px);
  background-repeat: no-repeat;
  transition: background-size .26s ease;
}
@media (hover: hover) { .toc a:hover { background-size: 100% 2px; } }
/* 番号。桁を揃えて、本文より一段落とした色に */
.toc a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  flex: none; min-width: 1.9em;
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
/* **飛び先が追従バーの下に隠れないようにする（2026-08-19）。**
   バーの高さは実測51px。余白は14pxしか取っていなかったので、
   タブを押すと見出しが上に隠れて着地していた（「まとめ」で y=22px、
   「早見表」で y=-58px）。
   スクロールの容れ物にまとめて指定して、アンカーごとに書かない
   （個別に書くと、新しいアンカーを足したとき忘れる）。 */
:root { --stick: 63px; }
html { scroll-padding-top: var(--stick); }
article h2, article h3, #quick, #items, #end, .sources { scroll-margin-top: var(--stick); }

/* **囲みをやめた（2026-08-19）。** 塗りつぶし＋枠＋角丸の箱が、
   ページの中でいちばん「AIが作った」に見える要素になっていた。
   罫線と余白で組み、数字は要約と同じ計器の面にする（Signature に揃える）。 */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 26px; margin: 0 0 24px; padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.stats > div { padding: 0; }
.stats dt {
  font-size: 11px; color: var(--ink-3); letter-spacing: .1em; margin: 0 0 3px;
}
.stats dd {
  color: var(--ink);
  margin: 0;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 18px; font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
/* **4列固定をやめた（2026-08-17）。**
   項目数は記事によって2〜4件で変わるのに repeat(4, 1fr) を固定していたため、
   2件の記事では右半分が空のグレーとして残り、最も目立つ位置にバグに見える
   空白が出ていた。項目数だけ列を作る形にする。 */
@media (min-width: 700px) {
  .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
}

/* ── 品目のスペック表 ───────────────────
 * 楽天APIから取っているのに出していなかったデータを出す
 */
table.spec {
  width: 100%; border-collapse: collapse; margin: 0 0 20px;
  font-size: 13.5px; line-height: 1.6;
}
table.spec th, table.spec td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-2);
}
table.spec th {
  width: 5.6em; font-weight: 600; color: var(--ink-3); background: #f7f8f7;
  white-space: nowrap; font-size: 12.5px;
}
table.spec td { font-weight: 600; font-variant-numeric: tabular-nums; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: none; }

/* ── 上部のタブ ─────────────────────────
 * 長い記事の中で今どこにいるかを示す。実測した比較サイトが共通して持っていた
 */
.tabs { border-bottom: 1px solid var(--line); background: var(--bg); }
.tabs .wrap { display: flex; gap: 0; }
.tabs a {
  flex: 1; text-align: center; padding: 12px 4px 11px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  text-decoration: none; letter-spacing: .04em;
  border-bottom: 3px solid transparent;
}
/* **現在地を出す（2026-08-19）。** 印は :hover しか無かったが、
   スマホに hover は無い。border-bottom は透明で確保済みなので、
   色を変えるだけで行が動かない */
.tabs a[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--tape);
}

.tabs a:hover { color: var(--ink); border-bottom-color: var(--line); }
.tabs.is-stuck {
  position: sticky; top: 0; z-index: 18;
  box-shadow: 0 1px 8px rgba(18, 23, 26, .07);
}

/* ── ラベル付きの囲みボックス ─────────────
 * 実サイト10本を数えたら、囲みボックスが348個で装飾として最多だった
 * （バッジ866個・比較表162個・吹き出しは10個だけ）。
 * 実物の構造は「ラベル＋箇条書き」で、写真が要らない。
 *
 * 色は config/decoration.yaml が CSS変数として差し込む。
 * --cta（ボタン専用色）は使わない。「この色＝押せる」の学習を壊すため。
 */
/* **塗りつぶしのヘッダーをやめた（2026-08-19）。**
 * 濃い地に白抜きの帯＋淡い地の本文＋角丸、という組みは、
 * `DESIGN.md`「囲みカードを既定にしない」「塗りつぶしを使わない」と噛み合っていない。
 * 記事の中でいちばん声が大きいのがこの箱になっていた。
 *
 * 型の区別（要点／注意／出典／順番／補足）は残す。それは情報だから。
 * **色は文字と左の罫にだけ載せる。** 面は塗らない。 */
.box {
  margin: 30px 0;
  padding: 2px 0 2px 15px;
  border-left: 3px solid var(--box-label-bg);
}
.box-label {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 9px; padding: 0 0 8px;
  color: var(--box-label-bg);
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  line-height: 1.4;
  border-bottom: 1px solid var(--line-2);
}
.box-icon { display: flex; flex: none; }
.box-body { padding: 0; font-size: 15.5px; line-height: 1.85; }
.box-body > *:last-child { margin-bottom: 12px; }
.box-body p { margin: 0 0 .9em; }
.box-body ul, .box-body ol { margin: 0 0 .9em; padding-left: 1.35em; }
.box-body li { margin-bottom: .35em; }
.box-body li::marker { color: var(--box-label-bg); }

/* 型ごとの色。**文字と左の罫にだけ載る。** 面は塗らないので、
   白地に対するコントラストで選ぶ（どれも 5:1 以上） */
.box--point    { --box-label-bg: #1a5548; }
.box--caution  { --box-label-bg: #97482d; }
.box--source   { --box-label-bg: #3f567a; }
.box--order    { --box-label-bg: #7a5c22; }
.box--note     { --box-label-bg: #4f5552; }

/* ラベルの無い引用は出典などに使う。装飾しない */
blockquote {
  margin: 26px 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--line);
  color: var(--ink-2); font-size: 15.5px;
}

/* ── 記事一覧 ───────────────────────────── */
/* ── カテゴリの色（パステル）─────────────────────────────
 * **カテゴリを色で分けるのは日本語のブログで一般的な作り。**
 * どのトピックにどの色を当てるかは config/site.yaml の topic_tones が持つ
 * （ジャンル固有の語をコードに書かない）。
 *
 * 地は淡く、文字は同じ色相の濃い版にする。**全組み合わせを測ってある**:
 * 文字は白地で5.4〜7.6:1、自分の淡い地の上で4.7〜6.4:1（本文AA 4.5:1を満たす）。
 * 淡い地は白地に対して1.10〜1.19:1（1.06未満だと白地で沈む）。
 *
 * **6色まで。** 7つ以上あると読者が色とカテゴリの対応を覚えられない。
 */
.tone-1 { --tone: #e3f3ee; --tone-ink: #186b55; }   /* ミント */
.tone-2 { --tone: #fbe8ee; --tone-ink: #a83258; }   /* ピンク */
.tone-3 { --tone: #fdf3da; --tone-ink: #856517; }   /* イエロー */
.tone-4 { --tone: #e7eef9; --tone-ink: #2b5990; }   /* ブルー */
.tone-5 { --tone: #efe9f7; --tone-ink: #5b4790; }   /* ラベンダー */
.tone-6 { --tone: #f7efdc; --tone-ink: #846627; }   /* サンド */

/* ── トップのヒーローとカテゴリのチップ ─────────────────── */
.hero { padding: 4px 0 6px; }
.hero h1 { font-size: 27px; line-height: 1.35; margin: 0 0 12px; }
.hero-lead {
  font-size: 14.5px; line-height: 1.85; color: var(--ink-2); margin: 0;
}
.chips {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 18px 0 2px;
}
/* **色地の丸ピルをやめた（2026-08-19）。**
 *
 * 塗りつぶした角丸のラベルはAI生成の意匠の典型で、`CLAUDE.md` の
 * 「丸枠・色地を全廃」とも噛み合っていなかった。
 * トピックの色は下の罫にだけ残す。数はサイト共通の計器の面で出す。
 */
.chips a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 0 6px;
  color: var(--ink);
  border-bottom: 2px solid var(--tone-ink, var(--accent-ink));
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.chips a span {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .chips a:hover { border-color: var(--tape); }
  .chips a:hover span { color: var(--ink); }
}

/* ── 記事カード。トップと記事下の回遊で同じものを使う ───────
   早見表（.q-item）と同じ組み方にしている。新しい型を増やさない。
   サムネイルは情景写真（自前）を既定にし、無い記事だけ商品画像に落とす。
   出どころで切り取ってよいかが変わる（下の .card-thumb の注記を参照） */
.cards { list-style: none; padding: 0; margin: 0; --thumb: 96px; }
.cards li + li { border-top: 1px solid var(--line-2); }
/* **列幅は変数1つで決める。** 以前は列を 112px、サムネを 96px と別々に書いていて、
   16px の死んだ余白がサムネと本文のあいだに残っていた。列幅を --thumb で持ち、
   サムネは列いっぱいに広げる。画面幅で変えるときも1箇所で済む */
/* カードの左に細い色の帯。カテゴリが一覧で見分けられる。
   持ち上がりは罫の濃さで出す。**影は足さない**（再描画を呼ぶうえ意匠に合わない） */
.card {
  display: grid; grid-template-columns: var(--thumb) 1fr; gap: 14px;
  align-items: start;
  padding: 18px 0 18px 12px;
  border-left: 4px solid var(--tone, transparent);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}
/* **サムネイルを商品画像に変えた（2026-08-17）。**
 * それまではピンの1枚目（表のレンダー）を square に cover で切って敷いていたが、
 * 112px では文字が読めず、一覧の3枚すべてがグレーの面に見えていた。
 *
 * **cover をやめて contain にしたのは意匠ではなく規約。**
 * 楽天は「画像の一部を切り取って使用すること」を同一性保持権を根拠に
 * 禁じている（Product.image_url の注記）。可なのはサイズ変更と外側への加工だけ。
 * cover は切り取りに当たるので使えない。
 *
 * 楽天は正方形に正規化して返す（実測13/13品）ので、正方形の枠に contain で
 * 収めれば余白はほとんど出ない。内側に余白を取るのは、商品が枠に触れると
 * 切り抜いたように見えるため。
 */
/* **出どころで扱いを分ける（2026-08-19）。**
 * 情景写真は自分で生成したものなので切り取れる。枠いっぱいに敷く。
 * 商品画像は楽天のものなので切り取れない。白地に余白を取って収める。
 * **同じ見た目にはしない。** 規約が許す範囲が違うため。 */
.card-thumb {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 3px; overflow: hidden;
  line-height: 0;
}
.card-thumb--product {
  background: #fff; border: 1px solid var(--line); padding: 6px;
}
.card-thumb--product img { width: 100%; height: 100%; object-fit: contain; }
.card-thumb--scene { background: var(--card); }
.card-thumb--scene img {
  width: 100%; height: 100%; object-fit: cover;
  /* 情景写真は一覧の中で主役ではない。少し落として、題を前に出す */
  filter: saturate(.92);
}
.card:hover .card-thumb--scene img,
.card:focus-visible .card-thumb--scene img { filter: saturate(1); }
.card-thumb--none { background: var(--card); }
.card-body { display: block; min-width: 0; }
/* **塗りつぶしをやめた（2026-08-19）。** カードの左に既に色の帯があるので、
   同じ情報を色地でもう一度出す必要がない。字間を広げた小さな文字だけにする */
.card-topic {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--tone-ink, var(--accent-ink));
  padding: 0;
}
.card-title {
  display: block; margin-top: 7px;
  font-size: 16px; font-weight: 800; line-height: 1.5; letter-spacing: -.025em;
  color: var(--ink);
}
.card:hover .card-title { text-decoration: underline; }
/* 品数と合計。**これがうちの独自性なので目立たせる** */
/* **記事と同じ計器の面にする。** Signature（数を大きく置く）は
   一覧でも効かせる。ここだけ別の書体だと、同じサイトに見えない */
/* **一覧のカードからは品数・価格を外した（2026-08-19）。**
   実機で並べて見ると、題・カテゴリ・品数・価格・日付の5段になって読みにくかった。
   一覧で要るのは「何の記事か」と「いつのものか」の2つ。
   先頭の1本（.lead-sum）には残す。あちらは1件だけで、面積に余裕がある。 */
.card-date {
  display: block; margin-top: 3px;
  font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.card:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 8px; }

/* 記事の日付。競合は全部出している */
.posted {
  margin: -4px 0 14px; font-size: 12.5px; color: var(--ink-3);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
/* カテゴリ別ページの見出し。カテゴリ名だけ色を付ける */
.hero-cat { color: var(--tone-ink, var(--accent-ink)); }
/* 今いるカテゴリのチップに印を付ける */
.chips a.is-here { outline: 2px solid var(--tone-ink, var(--accent-ink)); outline-offset: 1px; }

.feed { margin-top: 30px; }
.feed-head {
  font-size: 15px; letter-spacing: .08em; color: var(--ink-3);
  margin: 0 0 4px; padding-bottom: 0;
}
.feed-head::after { display: none; }   /* 斜線の帯は記事の見出し専用 */

/* ── 先頭の1本（2026-08-19）─────────────────
 * 96px角の情景写真は実寸で色の面にしか見えなかったので、
 * いちばん新しい1本だけ版面いっぱいの3:2で出す。
 * **囲みカードにしない**（DESIGN.md）。枠も地色も付けず、写真と罫線だけで組む。
 * 自前の写真なので cover で敷いてよい。 */
.lead {
  display: block; text-decoration: none; color: inherit;
  margin: 10px 0 6px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.lead-shot {
  display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 4px; background: var(--card);
  /* 写真の下に巻尺の線を1本だけ引く。Signature を一覧にも通す */
  border-bottom: 3px solid var(--tone, var(--tape));
}
.lead-shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.94);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1), filter .3s ease;
}
.lead:hover .lead-shot img,
.lead:focus-visible .lead-shot img { transform: scale(1.03); filter: saturate(1); }
.lead-body { display: block; margin-top: 13px; }
.lead-topic {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--tone-ink, var(--accent-ink));
}
.lead-title {
  display: block; margin-top: 6px;
  font-size: 21px; font-weight: 800; line-height: 1.42; letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.lead:hover .lead-title { text-decoration: underline; text-underline-offset: 3px; }
.lead-sum {
  display: block; margin-top: 7px;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.lead-date {
  display: block; margin-top: 5px;
  font-size: 12px; color: var(--ink-3);
  letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
  /* 広い画面では写真と文字を横に並べる。写真が主、文字が従 */
  .lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: center; }
  .lead-body { margin-top: 0; }
  .lead-title { font-size: 25px; }
}

.posts { list-style: none; padding: 0; margin: 0; }
.posts li + li { border-top: 1px solid var(--line-2); }
.posts li { padding: 20px 0; }
.posts a {
  text-decoration: none; font-weight: 800; font-size: 18px;
  line-height: 1.5; letter-spacing: -.025em;
}
.posts a:hover { text-decoration: underline; }
.posts .meta {
  font-size: 12px; color: var(--ink-3); margin-top: 6px;
  letter-spacing: .03em; font-variant-numeric: tabular-nums;
}

/* ── フッター ───────────────────────────── */
.site-foot {
  margin-top: 26px;
  padding: 4px 0 44px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .03em;
}
.site-foot nav { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.credit { margin-top: 8px; }

/* ── 固定ページ ─────────────────────────── */
.page h2 { font-size: 18px; margin-top: 40px; }
.page ul { padding-left: 1.2em; }
.page li { margin-bottom: .45em; }

@media (min-width: 700px) {
  body { font-size: 17.5px; background: var(--bg); }

  /* **浮いたグレーのパネルをやめた（2026-08-17）。**
     白地に角丸＋影のカードを全面に敷いていたが、出来上がりは記事ではなく
     アプリの画面に見えていた。自分で実測した競合（SAKIDORI / folk / 360life /
     マイベスト）はどれも本文を地の上に直接置いている。
     面を1枚減らし、--card は早見表・箱・サムネの枠だけに使う。
     そうすると白地の上でそれらが「持ち上がった要素」として読める。 */
  .sheet { padding: 30px 0 54px; margin: 0; }

  /* **40px から下げた（2026-08-17）。**
     版面576pxに40pxだと1行15字しか入らず、31字の見出しが3行に折れて
     最終行が「した」1語だけで残っていた。33pxなら1行18字で2行に収まる。
     balance は行末の孤立をさらに防ぐ。 */
  h1 { font-size: 33px; line-height: 1.32; }
  h2 { font-size: 23px; }
  h3 { font-size: 19px; }
  .summary b { font-size: 31px; }
  .q-name { font-size: 17.5px; }

  /* サムネイルを広げる。版面が 390px から 640px になるのに 96px のままだと、
     商品が本文の脇の添え物になって「何の記事か」を伝えない。
     128px は CARD_PX=320 の 2.5倍以内なので、2倍の画面でも粗くならない */
  .cards { --thumb: 128px; }

  /* **品目セクションの全幅画像に上限を付ける。**
     .shot は幅100%の正方形なので、版面が640pxになる画面では 640px 角になり、
     1品ごとに画面がまるごと商品写真で埋まる。売り文句が焼き込まれた
     出品者の画像がその大きさで出ると、記事ではなく広告の面に見える。
     モバイル（356px角）の見え方を上限にして、左に寄せて本文の流れを保つ */
  .shot { max-width: 340px; }
}

/* 記事の扉画像。**枠を付けない。** 写真は輪郭が自分で立つ
   （図解 .fig は白地なので枠が要るが、写真は要らない）。
   角丸は写真らしさを助けるので残す（図解は直角にした。役割が違う） */
.door { margin: 18px 0 22px; line-height: 0; }
.door img {
  width: 100%; height: auto; display: block;
  border-radius: 3px;
}

/* ══ 動き（2026-08-18）════════════════════════════════════════
 *
 * **重くしない。** 動かすのは `opacity` と `transform` だけにする。
 * この2つは合成だけで済むので、再描画も再レイアウトも起きない。
 * 影や高さを動かすと、スクロールのたびにレイアウトが走って落ちる。
 *
 * **JSが動いたときだけ効かせる。** `html.js-motion` が付くまでは
 * 何も隠さない。既定で `opacity: 0` にすると、JSが失敗したときに
 * 本文が消えるうえ、最大要素の描画（LCP）がJSの実行待ちになる。
 *
 * **最初の画面ぶんは動かさない。** 折り返しの上を動かすと、
 * 読み始めが遅れるだけで得がない（`data-reveal` を付けない）。
 */

@media (prefers-reduced-motion: no-preference) {
  html.js-motion .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  }
  html.js-motion .reveal.is-in {
    opacity: 1;
    transform: none;
  }
  /* 並んでいるものは少しずらす。**間隔は60msまで。**
     それ以上あけると、最後の1枚が出るまで待たされる感じになる */
  html.js-motion .cards .reveal:nth-child(2) { transition-delay: .06s; }
  html.js-motion .cards .reveal:nth-child(3) { transition-delay: .12s; }
  html.js-motion .cards .reveal:nth-child(4) { transition-delay: .18s; }
  html.js-motion .cards .reveal:nth-child(n+5) { transition-delay: .24s; }
}

/* 写真は読み込めてから出す。差し替わる瞬間の跳ねを消す。
 *
 * **目印は `js-fade` の1つだけ（2026-08-19）。**
 * ここに選択子を並べ、site.js にも同じ並びを書いていた。
 * 先頭カードを足したときCSSにだけ足して、写真が**出ないまま**になった。
 * CSSが隠してJSが出す形なので、片方だけ足すと黙って消える
 * （CLAUDE.md「同じ数字を2か所で組む」）。目印を1つにして、両方から引く。 */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion img.js-fade {
    opacity: 0;
    transition: opacity .45s ease;
  }
  html.js-motion img.js-fade.is-loaded { opacity: 1; }
}

/* カードの持ち上がりは .card 本体に書いてある */

/* 早見表の行。地の変化は .q-item 本体に書いてある */
@media (hover: hover) {
  /* **--paper は :root に無かった（実測0件）。** 色が解決できず、
     hover が何も起きていなかった。地の面は --card なのでそちらを使う */
  .q-item:hover { background: color-mix(in srgb, var(--card) 88%, var(--ink)); }
}

/* リンクの下線を引く動き。太さではなく**伸び方**で示す */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-title { background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px; background-position: 0 100%;
    background-repeat: no-repeat; transition: background-size .28s ease; }
  .card:hover .card-title { background-size: 100% 1px; }
}

/* ══ 広い画面（2026-08-19）══════════════════════════════════
 *
 * 実測すると、はみ出しはどの幅でも0で、1行42字は日本語の適正内だった。
 * **壊れてはいなかった。使えていなかった。** 1440pxでも本文は672pxのまま、
 * 両脇に400pxずつ空白が残り、カードは1列だった。
 *
 * 本文の幅は広げない。**日本語は1行45字を超えると行を追うのが難しくなる。**
 * 広げるのは「並べられるもの」だけ ── 記事の一覧と、表・図。
 */

/* ── 記事の一覧を段組みにする ─────────────────
   一覧のページだけ版面を広げる。記事ページの本文は狭いまま */
@media (min-width: 900px) {
  body:has(.feed) .wrap { max-width: 60rem; }

  /* **版面を広げても、地の文は広げない。**
     カードは並べたいが、読む文は1行45字を超えさせない。
     版面だけ広げたら 1行77字になった（実測） */
  body:has(.feed) h1,
  body:has(.feed) .hero-lead,
  body:has(.feed) .pr,
  body:has(.feed) .pr-img,
  body:has(.feed) .feed-head { max-width: 42rem; }

  .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
  }
  /* 段組みにすると「上下の罫で仕切る」形が崩れる。**列の境目に縦罫を引く** */
  .cards .card { border-top: 1px solid var(--line-2); padding: 22px 0; }
  .cards .card:nth-child(-n+2) { border-top: none; }
  .cards li + li { border-top: none; }
  .cards { --thumb: 116px; }
}

@media (min-width: 1240px) {
  body:has(.feed) .wrap { max-width: 72rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards .card:nth-child(-n+3) { border-top: none; }
  .cards { --thumb: 104px; }
}

/* ── 表と図は本文より少し広げる ─────────────────
   数字が並ぶものは、行が詰まっているより1行に収まるほうが読みやすい。
   **本文の左端と揃える**（中央に寄せると読む位置が動く） */
@media (min-width: 1100px) {
  .sheet table, .fig, .quick {
    width: calc(100% + 7rem);
    max-width: calc(100vw - 4rem);
  }
}

/* ── 触れる場所を広い画面でだけ持ち上げる ───────── */
@media (min-width: 900px) and (hover: hover) {
  .card:hover { transform: translateY(-3px); }
}

/* ══ 投稿の当番表（/pins/）2026-08-19 ═══════════════════════
 *
 * **ページの中に <style> で書くとCSPに止められる。** サイトは
 * style-src 'self' なので、インラインのスタイルは適用されない。
 * 実機で試すまで気づかなかった（ローカルにCSPを付けずに見ていた）。
 *
 * 投稿の作業用のページ。読者には見せない（noindex・どこからもリンクしない）
 */
/* 作業用のページ。サイトの意匠は借りるが、組みは当番表として作る */
.q-wrap { max-width: 46rem; margin: 0 auto; padding: 0 16px 5rem; }
.q-wrap .q-head { padding: 2rem 0 1rem; border-bottom: 2px solid var(--ink); }
.q-wrap .q-head h1 { font-size: 24px; margin: 0 0 .3rem; }
.q-wrap .q-head p { margin: 0; color: var(--ink-3); font-size: 14px; }
.q-wrap .q-day {
  display: flex; align-items: baseline; gap: .6rem;
  margin: 2.4rem 0 0; padding-bottom: .35rem;
  border-bottom: 2px solid var(--ink); font-weight: 700;
}
.q-wrap .q-day .d { font-size: 20px; font-variant-numeric: tabular-nums; }
.q-wrap .q-day .w { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.q-wrap .q-day .c { margin-left: auto; font-size: 13px; color: var(--ink-3); font-weight: 400; }
.q-wrap .q-pin { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.q-wrap .q-pin:first-of-type, .q-wrap .q-day + .q-pin { border-top: none; }
.q-wrap .q-top { display: flex; gap: 1rem; align-items: flex-start; }
.q-wrap .q-when { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums;
          white-space: nowrap; padding-top: .2rem; }
.q-wrap .q-ttl { font-size: 17px; font-weight: 700; line-height: 1.5; margin: 0 0 .2rem; }
.q-wrap .q-board { font-size: 12px; letter-spacing: .08em; color: var(--accent-ink); }
/* **画像は大きく出す。** ここを長押しして写真に保存する */
.q-wrap .q-shot {
  display: block; width: 100%; max-width: 320px; height: auto;
  margin: .9rem 0; border: 1px solid var(--line);
}
.q-wrap .q-row { border-bottom: 1px dotted var(--line); padding: .5rem 0 .6rem; }
.q-wrap .q-k { font-size: 12px; color: var(--ink-3); letter-spacing: .08em;
       display: flex; justify-content: space-between; align-items: baseline; }
/* **指で押す前提なので44px以上にする。** 33pxだと外す */
.q-wrap .q-act {
  font-size: 13px; color: var(--accent-ink);
  border: 1px solid var(--line); border-radius: 4px;
  padding: .5rem .9rem; white-space: nowrap;
}
/* **本文は選べるままにする。** コピーが効かないときは長押しで選んで写す */
.q-wrap .q-v { font-size: 14px; line-height: 1.6; margin-top: .25rem; overflow-wrap: anywhere;
       -webkit-user-select: text; user-select: text; }
.q-wrap .q-v.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
/* ── 進み具合 ───────────────────────── */
.q-wrap .q-bar {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: .7rem 0 .6rem; display: flex; align-items: baseline; gap: .6rem;
  font-size: 13px; color: var(--ink-3);
}
.q-wrap .q-bar b { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.q-wrap .q-track { flex: 1; height: 2px; background: var(--line-2); position: relative; top: -2px; }
.q-wrap .q-track i { display: block; height: 100%; width: 0; background: var(--accent);
             transition: width .3s; }
.q-wrap .q-hint { white-space: nowrap; font-size: 11.5px; }
@media (max-width: 24rem) { .q-hint { display: none; } }

/* 済んだものは沈める。次に出すものに印を付ける */
.q-wrap .q-pin.is-done { opacity: .42; }
.q-wrap .q-pin.is-next .q-ttl { text-decoration: underline; text-decoration-color: var(--accent);
                        text-underline-offset: 5px; text-decoration-thickness: 3px; }
.q-wrap .q-check {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; margin-top: .5rem; cursor: pointer;
  color: var(--ink-3); font-size: 14px; user-select: none;
}
.q-wrap .q-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); margin: 0; }

/* 行はどこを押してもコピーする。**文字は選べるままにしてある** */
.q-wrap .q-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.q-wrap .q-row:active { background: var(--card); }
.q-wrap .q-act.is-ok { color: var(--cta); }

.q-wrap .q-note { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
          font-size: 14px; color: var(--ink-3); }
.q-wrap .q-note ol { padding-left: 1.2rem; }
.q-wrap .q-note b { color: var(--ink); }

/* ══ 目盛り（2026-08-19）════════════════════════════════════
 *
 * **この案件の Signature。** 記事が数えた個数ぶんだけ目盛りを引く。
 * 装飾ではなく情報で、`品数` がそのまま本数になる。
 *
 * 素材は巻尺。この案件の中心が「先に数えてから買う」で、
 * 記事の中でも「メジャーを当てるしかない」と書いている。
 * 数える道具をそのまま意匠に持ってきた。
 *
 * **1本ずつが1品を指す。** 数が合っていないと意味が消えるので、
 * 本数は site.py が products の数から渡す。
 */
.summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 20px;
  position: relative;
}

/* ══ トンボ（2026-08-20。目盛りを差し替えた）════════════════
 * 印刷の裁ちトンボ。**裁つ前に確かめる線で、裁ったら戻せない。**
 * 買う手前に一つ渡す位置と同じ構造。
 *
 * 廃止したのは目盛り（品数ぶんの本数）。由来が「数える道具をそのまま意匠にした」
 * ことで、軸を替えたので根拠が消えた。
 *
 * **可変要素を持たない。** 目盛りは「1本が1品」で品数と結びついていたので、
 * 数が合わないと意味が消える危うさがあった。トンボにはそれが無い。
 *
 * 四隅にL字を置く。**線だけの形なので縮小の下限問題が起きない。**
 * 記事内では要約の枠に対して置く（要約が「仕上がり」の面になる）。 */
.marks {
  position: absolute; inset: -14px -10px;
  pointer-events: none;
}
.marks i {
  position: absolute; width: 14px; height: 14px;
}
/* L字は2辺だけ引く。**枠にしない**（囲みカードを既定にしない、という決定） */
.marks i:nth-child(1) { top: 0; left: 0;
  border-top: 2px solid var(--tape); border-left: 2px solid var(--tape); }
.marks i:nth-child(2) { top: 0; right: 0;
  border-top: 2px solid var(--tape); border-right: 2px solid var(--tape); }
.marks i:nth-child(3) { bottom: 0; left: 0;
  border-bottom: 2px solid var(--tape); border-left: 2px solid var(--tape); }
.marks i:nth-child(4) { bottom: 0; right: 0;
  border-bottom: 2px solid var(--tape); border-right: 2px solid var(--tape); }

/* 数字。**計器の読みに見せる。** 表示面はここが担う */
.summary b {
  display: block;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 32px; font-weight: 700; letter-spacing: -.05em;
  line-height: 1.1; color: var(--ink);
}
.summary span {
  display: block; margin-top: 5px;
  font-size: 12.5px; letter-spacing: .06em; color: var(--ink-3);
}

/* ── 動き ─────────────────────────────────────────
 * 動かすのは opacity と transform だけ。合成だけで済む
 */
@media (prefers-reduced-motion: no-preference) {
  /* ① 目盛りが左から引かれる。**ページで一度きりの見せ場** */
  /* **`style="--n:N"` を使わない。** style 属性もインライン扱いで
     CSP（style-src 'self'）に止められる。実測で7件の違反が出た（2026-08-19）。
     順番は nth-child で書く。上限は MAX_ITEMS の8に合わせてある */
  /* **四隅が順に着地する（2026-08-20）。** 目盛りの「左から引く」を差し替えた。
     トンボは可変要素を持たないので、数え上げと揃える必要が無くなった。
     代わりに**版面が決まる瞬間**を出す。四隅が内側から所定の位置に収まる。

     **引き金は JS が付ける `is-counting`。** 既定では何も隠さない
     （JSが失敗してもトンボは出たまま）。クラス名は据え置き
     — JS 側の目印を替えると、片方だけ直したときに何も動かなくなる */
  html.js-motion .summary.is-counting .marks i {
    opacity: 0;
    animation: land .34s cubic-bezier(.2,.8,.3,1) forwards;
  }
  html.js-motion .summary.is-counting .marks i:nth-child(1) { animation-delay: 0s; }
  html.js-motion .summary.is-counting .marks i:nth-child(2) { animation-delay: .06s; }
  html.js-motion .summary.is-counting .marks i:nth-child(3) { animation-delay: .12s; }
  html.js-motion .summary.is-counting .marks i:nth-child(4) { animation-delay: .18s; }
  /* 内側から外へ。**translate だけ。** 合成で済む */
  html.js-motion .summary.is-counting .marks i:nth-child(1) { transform: translate(6px, 6px); }
  html.js-motion .summary.is-counting .marks i:nth-child(2) { transform: translate(-6px, 6px); }
  html.js-motion .summary.is-counting .marks i:nth-child(3) { transform: translate(6px, -6px); }
  html.js-motion .summary.is-counting .marks i:nth-child(4) { transform: translate(-6px, -6px); }
  @keyframes land { to { opacity: 1; transform: translate(0, 0); } }

  /* ② マーカーが左から引かれる。**好評なので動かす。**
     背景の幅を伸ばすので、再描画は要素の中だけで済む */
  html.js-motion mark.key {
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .5s cubic-bezier(.3,.7,.2,1);
  }
  html.js-motion mark.key.is-in { background-size: 100% 100%; }

  /* ③ 数字が数え上がる（JSが差し替える）。桁が動いても幅が揺れないよう
     tabular-nums にしてある */
}

/* ══ 記事末尾の商品まとめ（2026-08-19）══════════════════════
 *
 * **最後まで読んだ人の買う場所。** 本文中のCTAと同じ楽天リンクを指す。
 * 品名・レビュー・価格を1行にして、行ごとにボタンを置く。
 * 早見表と同じ順に並ぶので、本文で見た順のまま買える。
 * 囲みカードにしない ── 上下の太罫で束ねる（DESIGN.md）。
 */
.recap {
  margin: 40px 0 8px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 4px 0 18px;
}
.recap h2 {
  font-size: 18px; padding: 14px 0 0; margin: 0 0 6px;
  border: 0;
}
.recap h2::after { display: none; }
.recap-list { list-style: none; margin: 0; padding: 0; }
/* **列を固定にする（2026-08-19）。** `auto` にしていたので、行ごとに
   トラック幅が変わり、価格の左端が実測154px、ボタンの左端が153px揺れていた
   （兄弟のグリッドはトラックを共有しない）。
   DESIGN.md「数量の列を右揃えにして、縦に読める背骨にする」が効いていなかった。

   幅390pxではさらに悪く、ボタンの文言が「＜品名＞を楽天市場で見る」なので、
   品名が長いほどボタンが太り、その分だけ品名の欄が痩せていた
   （厚手のウェットティッシュ 76px→3行）。**行の型を分ける。** */
.recap-row {
  display: grid;
  /* 写真の列を足した（2026-08-19）。名前と数字だけでは、最後まで読んだ人が
     「どれのことか」を思い出せなかった（実機で出た指摘） */
  grid-template-columns: 56px 1fr 6.3em;
  grid-template-areas: "shot name price" "shot review review" "go go go";
  align-items: baseline;
  gap: 6px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
}
.recap-row:first-child { border-top: 0; }
/* **切り抜かない。** 楽天は画像の一部の切り取りを同一性保持権で禁じている。
   可なのはサイズ変更と、画像の外側への加工だけ。だから contain のみ。
   リンクにはしない。すぐ下に緑のボタンがあるので、誤タップの元になる */
.recap-shot { grid-area: shot; align-self: start; }
.recap-shot img {
  display: block; width: 56px; height: 56px;
  object-fit: contain; background: #fff;
  border: 1px solid var(--line-2); border-radius: 2px;
}
.recap-name { grid-area: name; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.recap-star {
  grid-area: review; font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.recap-n { color: var(--ink-3); }
.recap-price {
  grid-area: price; text-align: right; white-space: nowrap;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 16px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.recap-asof {
  display: block; font-family: inherit;
  font-size: 10.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0;
}
/* ボタン。本文中のCTAより小さく、行の右下に置く */
.recap-go {
  grid-area: go; align-self: center;
  /* 狭い画面ではボタンを行幅いっぱいにする。**品名の欄を痩せさせない**
     （560px以上では右端に寄せ直す。下の @media を見る） */
  justify-self: stretch; text-align: center; margin-top: 4px;
  display: inline-block; text-decoration: none;
  background: var(--cta); color: #fff;
  font-size: 13.5px; font-weight: 700;
  padding: 9px 16px; border-radius: 3px;
  transition: transform .12s ease, background .12s ease;
}
.recap-go .cta-tail { font-size: 11px; opacity: .82; margin-left: 2px; }
@media (hover: hover) { .recap-go:hover { transform: translateY(-1px); background: #0b5f56; } }
.recap-note { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

@media (min-width: 560px) {
  /* 広い画面では1行に：品名・レビュー・価格・ボタン。
     **3列とも固定**にして、価格の右端とボタンの左端を縦に通す */
  .recap-row {
    grid-template-columns: 1fr 6.5em minmax(190px, 15rem);
    grid-template-areas: "name price go" "review price go";
    align-items: center; gap: 2px 20px;
  }
  .recap-go { justify-self: end; margin-top: 0; }
}

/* 値段から入る道。**ボタンにしない。** 上のCTAと同じ強さで置くと、
   どちらを押すか迷わせる。1行の文として置き、品名だけをリンクにする */
.cta-alt {
  margin: 12px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink-2);
}
.cta-alt a {
  font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  padding: 6px 0; display: inline-block;
}
.cta-alt a:hover { text-decoration-color: var(--cta); }
.cta-alt .cta-tail { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.cta-alt b {
  margin-left: 8px; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* 出典（2026-08-19）。**トップで「公的機関の資料から」と言っている
   根拠がここ。** 記事の主張のうち、数がどこから来たかを示す。
   囲みカードにしない。上下の罫と余白だけで面を作る（DESIGN.md） */
.sources {
  margin: 34px 0 0; padding: 16px 0 4px;
  border-top: 1px solid var(--line);
}
.sources h2 {
  font-size: 14px; letter-spacing: .06em; color: var(--ink-3);
  margin: 0 0 10px; padding: 0; border: 0; font-weight: 700;
}
.sources h2::after { display: none; }
.src-list { list-style: none; margin: 0; padding: 0; }
.src-list li { padding: 9px 0; border-top: 1px solid var(--line-2); }
.src-list li:first-child { border-top: 0; }
.src-list a {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.src-list a:hover { text-decoration-color: var(--tape); }
.src-org {
  display: inline-block; margin-left: 8px;
  font-size: 11.5px; letter-spacing: .08em; color: var(--ink-3);
}
.src-note {
  display: block; margin-top: 3px;
  font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
}

/* Pinterest へ保存する導線。**ボタンにしない。**
   楽天のCTA（緑）と同じ強さで置くと、買う導線と競合する。
   罫線と余白だけで組み、線が引かれる動きだけ持たせる */
.save { margin: 26px 0 0; }
.save-go {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 2px; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  border-bottom: 2px solid var(--line);
  transition: color .2s ease, border-color .2s ease;
}
.save-mark svg {
  display: block; fill: none; stroke: var(--tape);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
  .save-go:hover { color: var(--ink); border-bottom-color: var(--tape); }
}

/* ══ 題字のロックアップ（2026-08-19）════════════════════════
 *
 * トップの題字を、巻尺のロックアップにする。素のゴシック1行だと
 * 飾り気がなく、サイトの中で最初に目に入る場所なのに何も語っていなかった。
 *
 * サイト全体の Signature が目盛りなので、それを**最初に見せる**。
 * 題字の下に目盛りの帯を敷き、タグラインを計器の読みのように右に置く。
 */
/* **題字は「文字」ではなく「印」にする。**
 *
 * ゴシック1行だと、名前を書いてあるだけで何も語らない。
 * このサイトは**リストを作る場所**なので、リストの記号（チェック欄）を
 * 題字に組み込む。読み込み時にチェックが引かれる。
 *
 * 2段に組むのは、「暮らしの」が説明で「準備リスト」が名前だから。
 * 同じ大きさで1行に流すと、どこが名前か分からない。
 */
.wordmark {
  padding: 8px 0 2px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "box name" "tape tape" "tag tag";
  align-items: center;
  column-gap: 14px;
}
.wordmark-box { grid-area: box; display: block; line-height: 0; }
.wordmark-box svg { width: 34px; height: 34px; display: block; }
.wm-frame { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.wm-tick {
  fill: none; stroke: var(--tape); stroke-width: 3.2;
  stroke-linecap: square; stroke-linejoin: miter;
}

.wordmark h1 {
  grid-area: name;
  margin: 0; line-height: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* 「暮らしの」は説明。小さく、字間を開けて、上に添える */
.wm-lead {
  font-size: 12.5px; font-weight: 700; letter-spacing: .22em;
  color: var(--ink-2); margin-bottom: 3px;
}
/* 「準備リスト」が名前。ここだけ大きく、字間を詰める */
.wm-main {
  font-size: 33px; font-weight: 800; letter-spacing: -.035em;
  color: var(--ink);
}
/* ══ 仕上がり線（2026-08-20。巻尺の目盛りを差し替えた）══════════
 * 題字の下に**裁ち位置の線**を1本引く。両端に短い立ち上がりを付けて、
 * 罫ではなく「ここで裁つ」という印にする。ピンの四隅のトンボと同じ語彙。
 *
 * 目盛りの帯（5目盛りごとの長い線）をやめた。由来が「数える道具を
 * そのまま意匠にした」ことで、軸を替えたので根拠が消えた。
 * **消し忘れると、動くけれど古い印が出る**（実際に1度残った）。
 *
 * 読み込み時に左から伸びる（動きは下の @media）。clip なので
 * 再描画は要素の中だけで済む。 */
.wordmark-tape {
  grid-area: tape;
  height: 14px; margin: 10px 0 8px;
  position: relative;
  border-bottom: 2px solid var(--tape);
}
/* 両端の立ち上がり。**トンボの角と同じ形**を、線の両端に1つずつ */
.wordmark-tape::before,
.wordmark-tape::after {
  content: ""; position: absolute; bottom: 0;
  width: 2px; height: 10px; background: var(--tape);
}
.wordmark-tape::before { left: 0; }
.wordmark-tape::after { right: 0; }
.wordmark-tag {
  grid-area: tag;
  margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--ink-2);
  font-weight: 700;
}
.wordmark-tag::before {
  content: "▸"; color: var(--tape); margin-right: .4em; font-size: 11px;
}

@media (min-width: 700px) {
  .wordmark { column-gap: 18px; }
  .wordmark-box svg { width: 44px; height: 44px; }
  .wm-lead { font-size: 14px; }
  .wm-main { font-size: 46px; }
  .wordmark-tape { height: 18px; margin: 16px 0 10px; }
  .wordmark-tag { font-size: 14px; }
}

/* 仕上がり線が左から伸びる。**ページで最初の見せ場。** clip で幅を切るので
   再描画は要素の中だけ。scaleX だと両端の立ち上がりまで潰れるので clip を使う */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .wordmark-tape {
    animation: tape-draw .7s cubic-bezier(.22,.7,.25,1) both;
  }
  @keyframes tape-draw {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
  html.js-motion .wordmark h1 {
    animation: wm-rise .55s cubic-bezier(.2,.7,.3,1) both;
  }
  /* 枠が描かれてから、チェックが引かれる。**リストに印を入れる動作**そのもの */
  html.js-motion .wm-frame {
    stroke-dasharray: 84; stroke-dashoffset: 84;
    animation: wm-draw .5s cubic-bezier(.3,.7,.3,1) .05s forwards;
  }
  html.js-motion .wm-tick {
    stroke-dasharray: 24; stroke-dashoffset: 24;
    animation: wm-draw .32s cubic-bezier(.4,.8,.3,1) .5s forwards;
  }
  @keyframes wm-draw { to { stroke-dashoffset: 0; } }
  @keyframes wm-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  html.js-motion .wordmark-tag {
    animation: wm-rise .5s cubic-bezier(.2,.7,.3,1) .28s both;
  }
}

/* ══ 記事の中の動き（2026-08-19）════════════════════════════
 *
 * 題字とマーカーは動いていたが、**本文の中がほぼ静止**していた。
 * 読んでいる最中に起きるものを足す。
 *
 * **語彙は Signature（目盛り）に揃える。** 引かれる・伸びる・立ち上がる。
 * 回転・拡大・弾みは使わない（この案件の道具にその動きが無い）。
 */
@media (prefers-reduced-motion: no-preference) {

  /* ① 見出しの縦罫が下から伸びる。**節に入った合図** */
  html.js-motion h2 .h2-icon {
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .34s cubic-bezier(.2,.8,.3,1);
  }
  html.js-motion h2.is-in .h2-icon { transform: scaleY(1); }

  /* ② 早見表の行が上から順に入る。**数え上げる動作**に見せる */
  html.js-motion .q-item {
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
  }
  html.js-motion .quick.is-in .q-item { opacity: 1; transform: none; }
  html.js-motion .quick.is-in .q-item:nth-child(1) { transition-delay: .00s; }
  html.js-motion .quick.is-in .q-item:nth-child(2) { transition-delay: .05s; }
  html.js-motion .quick.is-in .q-item:nth-child(3) { transition-delay: .10s; }
  html.js-motion .quick.is-in .q-item:nth-child(4) { transition-delay: .15s; }
  html.js-motion .quick.is-in .q-item:nth-child(5) { transition-delay: .20s; }
  html.js-motion .quick.is-in .q-item:nth-child(6) { transition-delay: .25s; }
  html.js-motion .quick.is-in .q-item:nth-child(n+7) { transition-delay: .30s; }

  /* ③ 記事末尾の商品まとめも同じ入り方。**買う場所に着いた合図** */
  html.js-motion .recap-row {
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
  }
  html.js-motion .recap.is-in .recap-row { opacity: 1; transform: none; }
  html.js-motion .recap.is-in .recap-row:nth-child(1) { transition-delay: .00s; }
  html.js-motion .recap.is-in .recap-row:nth-child(2) { transition-delay: .06s; }
  html.js-motion .recap.is-in .recap-row:nth-child(3) { transition-delay: .12s; }
  html.js-motion .recap.is-in .recap-row:nth-child(4) { transition-delay: .18s; }
  html.js-motion .recap.is-in .recap-row:nth-child(5) { transition-delay: .24s; }
  html.js-motion .recap.is-in .recap-row:nth-child(n+6) { transition-delay: .30s; }

  /* ④ CTAは触れると持ち上がる。**押せるものだと分かる** */
  .cta { transition: transform .14s ease, box-shadow .14s ease; }
  @media (hover: hover) { .cta:hover { transform: translateY(-2px); } }

  /* ⑤ 目次の現在地。読んでいる節に印が付く（site.js が付ける） */
  .toc a { position: relative; }
  html.js-motion .toc a.is-current {
    background-size: 100% 2px;
  }
}