/* ================================================================
   mottoku トップページ（編集面）— home.css   2026-09-01
   style.css の後に読み込まれる。トップ専用なので接頭辞は全部 .hm-。

   設計方針:
   - 版面は「編集面」なので本文用の幅（1100px）にする。フィード(/deals)の
     1500px は商品グリッド用の幅で、文章には広すぎて 1 行が長くなりすぎる。
   - 配色は style.css の semantic token をそのまま使う（生 hex を増やさない）。
     🔴 例外は「アクセント文字色」だけ。--brand-deep(#047857) は dark の
        --bg(#0f172a) 上で 3.26:1 しか出ず AA 不足なので、テーマで切り替わる
        --hm-accent を新設してこちらを使う（既存 koramu-hub-rest-list と同じ手当）。
   - 本文は 16px。body 既定の 14px はデータ密度の高いフィード向けの値で、
     読ませる面には小さい（モバイルで iOS の自動ズームも誘発する）。
   ================================================================ */

:root {
  --hm-accent: var(--brand-deep);         /* light: #047857 on #fff = 5.02:1 */
  --hm-accent-weak: var(--brand);
  --hm-stat-emphasis: #b91c1c;            /* 掲載件数の強調色。light: #b91c1c on #f8fafc = 6.0:1（May 指定「赤で目立たせる」2026-09-07） */
  --hm-band: #ffffff;                     /* 交互に敷く帯の地色 */
  /* 🔴 hero にブランド色のグラデ地を敷かない（2026-09-01）。
     色の面で「ここが特別」と言うのは広告的で、編集面では字の大きさと余白で示す。
     地は本文と同じにして、区切りはヘッダの罫と節の罫に任せる。 */
  --hm-hero-bg: transparent;
  /* 🔴 グリッドは 1 本（--container = 1500px）。ヘッダ・フッタと同じ左端に揃える。
     以前は 1100px の独自幅を持たせていたため、ヘッダ 50px / 帯 74px / 本文 250px と
     左端が 3 本になって「下だけ狭い」に見えていた（2026-09-01 実測）。 */
  --hm-wrap: var(--container);
  --hm-gutter: 24px;                      /* 🔴 ヘッダ .header-inner と同値にする
                                             （main は上で無効化したので、揃える相手は
                                             画面に見えているヘッダ／フッタ側） */
  --hm-measure: 46em;                     /* 読み物の行長上限（本文は必ずこれで頭打ち） */
  --hm-field: 640px;                      /* 入力欄の上限。グリッド幅いっぱいには広げない */
  /* ラベル類の寸法。高さは全種類で共通にして行が揃うようにする。
     モール名バッジだけは幅も固定する（文字幅が Amazon 48px / 楽天 23px と
     倍以上違い、並べるとガタつくため。実測値 → 最長 48 + 左右 10 で 68px）。
     やり方は kaitorix の .store-rank / .stat-store-rank-badge と同じ
     ＝ inline-flex + 中央寄せ + 固定 w/h + flex-shrink:0。 */
  --hm-badge-h: 24px;
  --hm-plat-w: 68px;
}

[data-theme="dark"] {
  --hm-accent: #6ee7b7;                   /* dark: #6ee7b7 on #1e293b = 9.6:1 */
  --hm-stat-emphasis: #f87171;            /* dark: #f87171 on #1e293b = 6.8:1 */
  --hm-accent-weak: var(--brand-mid);
  --hm-band: #16212f;                     /* --card(#1e293b) より一段沈めた帯 */
  --hm-hero-bg: transparent;
}

/* ================================================================
   共通レイアウト
   ================================================================ */
/* 🔴 トップだけ main の箱を無効化する。style.css の `main` は
   `max-width:1500px + padding:28px 24px 56px` なので、その中で帯を敷くと
   帯が全幅にならず、さらに .hm-wrap を中央寄せすると三重に内側へ入る。
   home.css はトップページでしか読み込まれないので、ここでの上書きは他ページに
   影響しない（読み込みは templates/home.html の head_extra ブロック）。 */
main {
  max-width: none;
  padding: 0;
}

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

/* 読み物の列。グリッドの左端は共有したまま、行長だけ頭打ちにする
   （中央寄せしない＝左端がずれない）。 */
.hm-col { max-width: var(--hm-measure); }

.hm-sec {
  padding: 52px 0 56px;
  font-size: 16px;
  line-height: 1.8;
}
/* 🔴 節ごとに地色を交互に敷くのはやめた（2026-09-01）。
   帯の塗り分けはテンプレート感が強いうえ、節の切れ目はすでに
   .hm-sec-head の上罫線が示している。地は 1 つに統一する。 */
.hm-sec-band { background: transparent; }

/* 節の頭。**全節に同じ「色つき小見出し＋タイトル」を積むのはやめる**
   （2026-09-01 May 指摘「AI 味」）。6 節が寸分違わぬリズムで並ぶのが
   機械生成の最大の手癖なので、
     ・区切りは色ではなく**細罫**（新聞・雑誌の作法）
     ・日付や出典は見出しの上に積まず、**同じ行の右**に置く
   に変える。ブランド色は「リンクと 1 つの主要動作」だけに使う。 */
.hm-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--text);   /* 節の切れ目は 1 本の罫で示す */
  margin-bottom: 24px;
}
.hm-sec-head > div { min-width: 0; }

/* 見出しの下に置く署名行（日付・出典）。記事のバイラインと同じ扱いで、
   色つきの飾りラベルにはしない。全節には付けず、出所を言う必要がある節だけ。 */
.hm-meta {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-break: strict;
}
.hm-meta > span { white-space: nowrap; }

.hm-sec-title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--text);
}

.hm-sec-lead {
  margin-top: 12px;
  max-width: var(--hm-measure);
  font-size: 15px;
  color: var(--text-secondary);
}
.hm-sec-lead strong { color: var(--text); font-weight: 700; }

.hm-sec-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-accent);
  min-height: 44px;               /* タップ領域の下限 */
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  transition: gap 0.18s ease, color 0.18s ease;
}
.hm-sec-more:hover { gap: 10px; }
.hm-sec-more svg { flex-shrink: 0; }

.hm-note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 84ch;
}

.hm-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* フォーカスリングは全要素に明示（style.css 側の :focus-visible を強めに上書き） */
.hm-sec a:focus-visible,
.hm-hero a:focus-visible,
.hm-search-btn:focus-visible {
  outline: 2px solid var(--hm-accent-weak);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 🔴 検索の入力欄にはここで枠を足さない（2026-09-03 May 指摘「双重框体」）。
   テキスト入力はマウスで押しても :focus-visible に必ず一致するので、
   上の共通リングを当てると **箱の :focus-within リングと二重**に見える
   （外＝箱の border+4px リング / 内＝入力欄そのものの outline）。
   入力欄のフォーカスは箱側（.hm-search-box:focus-within）が示す役目なので、
   入力欄自身の outline は none のままにする。 */
.hm-search-input:focus,
.hm-search-input:focus-visible { outline: none; }

/* ================================================================
   器の寸法規則（2026-09-01 May 指示「框体也可以一样大小・这个逻辑是扩展到整个站的」）
   ----------------------------------------------------------------
   同じ役割で並ぶ器は同じ寸法にする。守るべき点は 2 つあって、
   どちらか一方だけだと揃わない:
     ① `grid-auto-rows: 1fr` … 既定では**行ごとに**高さが決まるので、
        1 行目 64px / 2 行目 48px のように段差が出る（実測）。
     ② 子要素を 100% にする … `<li><a>` 構造だと伸びるのは `<li>` だけで、
        中の `<a>` は内容分の高さのままになる（hub グリッドの実際の原因）。
   新しくカードを並べる時は必ずこの 2 つをセットで書く。
   ================================================================ */
.hm-hub-grid,
.hm-art-grid,
.hm-deal-grid,
.hm-survey-grid,
.hm-sale-grid,
.hm-about-grid { grid-auto-rows: 1fr; }

/* `<li>` が器、その中のリンクが中身、という構造を全部同じ扱いにする */
.hm-hub-grid > li,
.hm-art-grid > li,
.hm-deal-grid > li { display: flex; }
.hm-hub-grid > li > a,
.hm-art-grid > li > .hm-art-link,
.hm-deal-grid > li > .hm-deal-link { flex: 1 1 auto; min-width: 0; }

/* ================================================================
   1. HERO
   ================================================================ */
.hm-hero {
  background: var(--hm-hero-bg);
  padding: 56px 0 60px;
}

/* 左＝このサイトは何か／右＝ここから始める。7:5 の非対称。
   1180px 未満では 1 カラムに落として左詰めのまま積む。 */
.hm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: 56px;
}
.hm-hero-main { min-width: 0; }

.hm-hero-tool {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px;
  /* 影で浮かせない。地と違う面であることは罫と塗りで足りる。 */
}
[data-theme="dark"] .hm-hero-tool { background: #16212f; }

/* 1 カラムに落ちたら、道具パネルは**グリッド幅いっぱい**にする。
   ここで max-width を掛けると「この箱だけ右端に届いていない」に見える
   （2026-09-01 の指摘そのもの）。代わりに中身を 2 列にして、
   入力欄が 1000px に伸びるのを防ぐ。 */
@media (max-width: 1180px) {
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hm-hero-tool {
    padding: 24px;
    display: grid;
    /* 🔴 固定 2 列にすると 900〜1024px で入力欄が 228px まで潰れる（実測）。
       各列に 420px 確保できる時だけ 2 列＝入力欄が使える幅を割り込まない。 */
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 32px;
    align-items: start;
  }
  .hm-hero-tool .hm-search { margin: 0; }
}

.hm-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);            /* ブランド色は使わない＝色は動作にだけ使う */
  margin-bottom: 12px;
  line-break: strict;
}
.hm-eyebrow > span { white-space: nowrap; }

.hm-hero-title {
  font-size: clamp(26px, 4.4vw, 44px);  /* 26px: 390px 幅で 2 行目 13 字が収まる実測値 */
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.28;
  color: var(--text);
  margin-bottom: 18px;
  /* 🔴 text-wrap: balance は使わない。日本語には語境界が無いので、均等割りを
     狙って「デー / タ」のようにカタカナ語の途中で割ってくる（実測）。
     読点で明示的に改行する（テンプレの <br class="hm-br-sp">）方が確実。 */
  line-break: strict;
}

.hm-hero-lead {
  max-width: var(--hm-measure);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-secondary);
}
.hm-hero-lead strong {
  color: var(--text);
  font-weight: 700;
  /* 🔴 蛍光ペン風のグラデ下線は使わない。強調は字面（太さ・色）だけで足りる。 */
}

/* ── 検索モジュール ────────────────────────────────────────────
   設計:
   - 「入力欄 + ボタン」を 1 つの面として組む（grid 3 列）。以前はボーダー箱の中に
     ボタンを押し込んでいて、内側の余白が上下で食い違い、独立した部品に見えていた。
   - 幅は --hm-field (640px) 止まり。グリッドは 1500px だが 1500px の入力欄は使えない。
     左端はグリッドと共有するので「狭い」ではなく「揃っている」に見える。
   - ラベルは可視のまま残す（プレースホルダだけのラベルは UX 上 High 深刻度）。
     ただしグレーの小文字を浮かせるのではなく、モジュールの見出しとして組む。
   - 補助文をボタン下に常設（何が検索できるかはプレースホルダだけでは足りない）。
   ------------------------------------------------------------- */
.hm-search { margin: 0 0 20px; }

.hm-search-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 10px;
}

.hm-search-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 8px 0 20px;
  background: var(--card);
  border: 1.5px solid var(--muted-light);
  border-radius: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hm-search-box:hover { border-color: var(--text-secondary); }
.hm-search-box:focus-within {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 4px var(--brand-light);
}

.hm-search-icon { color: var(--muted); flex-shrink: 0; }
.hm-search-box:focus-within .hm-search-icon { color: var(--hm-accent); }

.hm-search-input {
  min-width: 0;                    /* grid セルで兄弟を潰さないための必須指定 */
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;                 /* 16px 未満は iOS が自動ズームする */
  outline: none;
}
.hm-search-input::placeholder { color: var(--muted); }
.hm-search-input::-webkit-search-cancel-button { cursor: pointer; }

.hm-search-btn {
  height: 48px;                    /* 箱 64 − 上下 8 の内寸ぴったり */
  padding: 0 26px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-deep);   /* 白文字で 5.48:1（--brand は 3.77:1 で AA 未満） */
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
}
.hm-search-btn:hover { background: var(--brand-darker); }
.hm-search-btn:active { transform: scale(0.97); }

.hm-search-help {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

.hm-chips-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.hm-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hm-hero-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* タップ領域の下限（WCAG 2.5.8 / Apple HIG） */
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.hm-hero-chips a:hover {
  border-color: var(--text-secondary);
  color: var(--text);
  background: var(--bg);
}
/* chip 行に混ぜるとテキストリンクが 1 つだけ折り返して孤立するので独立させる。 */
.hm-chip-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-accent);
  transition: gap 0.18s ease;
}
.hm-chip-more:hover { gap: 10px; }
.hm-chip-more svg { flex-shrink: 0; }

/* ── 掲載件数（リードの直後）────────────────────────────────
   h1(900) とリード(16px) の間の重みにする。h1 より大きくすると「広告の数字」に、
   リードと同じにすると読み飛ばされる。この面では色は動作にだけ使う規約だが、
   **件数の数字だけは例外**（May 指定 2026-09-07「赤で目立たせる」）＝
   --hm-stat-emphasis（動作色の緑と衝突しない赤系、light/dark とも 4.5:1 超）。
   単位「件」と説明文は従来どおり本文色／muted のまま。
   🔴 tabular-nums。桁の多い数字は毎日変わるので、比例数字だと更新のたびに
      「件」以降の位置が横に揺れる。 */
.hm-hero-stat {
  margin-top: 20px;
  color: var(--text);
  line-break: strict;
}
.hm-hero-stat-num {
  color: var(--hm-stat-emphasis);
  font-size: clamp(26px, 3.1vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.hm-hero-stat-unit {
  margin-left: 2px;
  font-size: 15px;
  font-weight: 700;
}
.hm-hero-stat-cap {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;   /* 「のお得情報を掲載中」を途中で折らない */
}

.hm-hero-meta {
  margin-top: 14px;      /* 件数を挟んだので、以前の 24px から詰める */
  font-size: 13px;
  color: var(--muted);
}
/* 🔴 行頭禁則を strict にする。既定（auto）だと Chrome は長音符「ー」や
   小書き仮名「ッ・ャ・ュ」を行頭に送る（実測 2026-09-03: 1440px で 4 件、
   390px で 4 件）。日本語の組版では行頭に置けない文字なので、面全体に効かせる。
   .hm-eyebrow だけに指定していたのを、本文・カード・注記まで広げる。 */
.hm-hero, .hm-sec { line-break: strict; }

.hm-hero-meta > span { white-space: nowrap; }
.hm-hero-meta a { color: var(--hm-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* 見出しの改行位置は読点で固定する（幅任せにすると語中で割れる）。
   全幅で有効にしたいので display:none にはしない。 */
.hm-br-sp { display: inline; }

/* ================================================================
   プラットフォームのバッジ（セール／商品で共用）
   ================================================================ */
.hm-plat {
  display: inline-flex;
  align-items: center;
  justify-content: center;      /* 幅を固定するので中央寄せ */
  align-self: flex-start;
  flex-shrink: 0;
  width: var(--hm-plat-w);
  height: var(--hm-badge-h);
  padding: 0;                   /* 固定寸法なので padding では伸ばさない */
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  background: var(--muted);
  white-space: nowrap;
}
.hm-plat-amazon  { background: #b45309; }   /* #b45309 on #fff = 4.6:1（白抜き文字も AA） */
.hm-plat-rakuten { background: var(--rakuten); }
.hm-plat-yahoo   { background: #d1002b; }   /* --yahoo(#ff0033) は白文字で 3.9:1 なので沈める */
.hm-plat-aupay   { background: #b91c1c; }
.hm-plat-other   { background: var(--text-secondary); }

/* ================================================================
   2. 開催中のセール
   ================================================================ */
/* 開催中（可変 0〜4 件）と予定を横に並べる。開催中だけだと広い画面で右が空くため。 */
.hm-sale-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 40px;
  align-items: start;
}
.hm-sub {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.hm-sale-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
/* 🔴 彩色の左罫（border-left: 3px solid brand）は使わない。意味を持たない色帯で、
   LLM が書く CSS の手癖として最も目につく（May 指摘 2026-09-01）。
   モールの識別はバッジが担っているので、カードは細罫だけで足りる。 */
.hm-sale-card {
  position: relative;                /* ::after の覆いの基準 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
/* カードのどこを押しても LP へ行く。覆いは `.hm-sale-link` の ::after なので、
   リンクの数は 1 本のまま＝タブ順も読み上げも増えない。 */
.hm-sale-card:hover {
  border-color: var(--brand-light);
  background: var(--brand-bg);
  box-shadow: var(--shadow-md);
}
/* 覆いはリンク自身なのでフォーカスはリンクに立つ。枠はカード側に出して位置を合わせる */
.hm-sale-card:has(.hm-sale-link:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.hm-sale-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
}
.hm-sale-period {
  font-size: 14px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hm-sale-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
}
[data-theme="dark"] .hm-sale-entry { color: #fbbf24; }
/* 特典は「何がもらえるか」＝カードの主役。条件は補足なので一段落とす */
.hm-sale-bonus {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
}
.hm-sale-terms {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}

.hm-sale-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* タップ領域の下限 */
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-accent);
}
.hm-sale-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.hm-sale-card:hover .hm-sale-link { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   3. 実勢価格レポート — サイト固有の一次データ。ここが一番の見せ場
   ================================================================ */
.hm-survey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 本ちょうど */
  gap: 20px;
}
.hm-survey-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
}

.hm-survey-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
}
.hm-survey-q {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hm-survey-total {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 表は必ず自前の容器で横スクロールさせる（ページ本体は横スクロールさせない） */
.hm-survey-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-survey-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.hm-survey-table th,
.hm-survey-table td {
  padding: 9px 6px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-light);
}
.hm-survey-table th:first-child,
.hm-survey-table th[scope="row"] { padding-left: 0; }
.hm-survey-table th:last-child,
.hm-survey-table td:last-child { padding-right: 0; }
.hm-survey-table thead th {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border-bottom-color: var(--border);
}
.hm-survey-table th[scope="row"],
.hm-survey-table thead th:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;   /* 短縮名にしたので折り返させない（「楽天市 場」対策） */
}
/* 「中央の帯」は補助情報。幅が足りない時はここだけ小さく畳む */
.hm-survey-table td:last-child { font-size: 11.5px; letter-spacing: -0.01em; }
.hm-survey-table tbody tr:last-child th,
.hm-survey-table tbody tr:last-child td { border-bottom: 0; }
.hm-num-strong {
  font-weight: 800;
  color: var(--text);
  font-size: 17px;                 /* この表の主役は中央値。字の大きさで示す */
  letter-spacing: -0.02em;
}
.hm-num-dim { color: var(--muted); font-size: 12px; }

.hm-survey-note {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-secondary);
}

.hm-survey-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hm-survey-date {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hm-survey-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;               /* タップ領域の下限 */
  font-size: 13px;
  font-weight: 700;
  color: var(--hm-accent);
  transition: gap 0.18s ease;
}
.hm-survey-link:hover { gap: 9px; }

/* ================================================================
   4. 新着コラム
   ================================================================ */
.hm-art-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 9 記事 = 3×3。孤行を作らない */
  gap: 20px;
}
/* 🔴 hover で translateY させない。全カードが同じ量だけ浮くのは
   テンプレート感が強く、視線誘導にもなっていない。境界の変化で足りる。 */
.hm-art-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hm-art-card:hover {
  border-color: var(--text-secondary);
  background: var(--bg);
}
.hm-art-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}
.hm-art-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hm-art-cat {
  display: inline-flex;
  align-items: center;
  height: var(--hm-badge-h);
  padding: 0 9px;
  border-radius: 4px;
  /* ブランド色の地はやめる。色は「押せるもの」に取っておく。 */
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.hm-art-date {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hm-art-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 10px;
}
.hm-art-card:hover .hm-art-title { text-decoration: underline; text-underline-offset: 3px; }
.hm-art-desc {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-secondary);
  /* 3 行で切る。切ったことが分かるよう省略記号を出す */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-art-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.hm-art-badge {
  display: inline-flex;
  align-items: center;
  height: var(--hm-badge-h);
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
}

/* ================================================================
   5. 特集まとめガイド
   ================================================================ */
/* 見出しだけのチップ 14 個ではリンク集にしか見えないので、1 行の説明を添えた
   カードにする（2026-09-03）。3 列＝1 枚あたり 2 行の説明が入る幅。 */
.hm-hub-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hm-hub-grid a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.hm-hub-title {
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}
.hm-hub-desc {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
  /* 2 行で切る。説明は「押す手がかり」なので全文は要らない */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-hub-grid a:hover .hm-hub-title { color: var(--hm-accent); }
.hm-hub-grid a:hover {
  border-color: var(--text-secondary);
  color: var(--text);
  background: var(--bg);
}

/* ================================================================
   索引ブロック（調査済みジャンル／テーマ別ガイド／カテゴリ）
   ----------------------------------------------------------------
   規模を見せるための一覧。装飾は足さず、罫と字の大きさだけで組む。
   リンクが主役なので色はリンクにだけ乗せる（既定は本文色、hover で下線）。
   ================================================================ */
.hm-index { margin-top: 30px; }
.hm-index-guides { margin-top: 34px; }

.hm-sub .hm-index-count {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hm-index-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.hm-index-list li { display: flex; align-items: center; }
/* 中黒で区切る新聞の索引の作法。最後の項目には出さない。 */
.hm-index-list li:not(:last-child)::after {
  content: "・";
  color: var(--muted-light);
  margin-left: 8px;
}
.hm-index-list a {
  display: inline-flex;
  align-items: center;
  /* 索引の項目は 1 つずつが独立した押し先。中黒区切りで文章のように見えるが
     インライン例外（WCAG 2.5.8）には当たらないので 44px を確保する。 */
  min-height: 44px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-break: strict;
}
.hm-index-list a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* カテゴリは件数つきなので中黒ではなく罫で区切る表組みにする */
.hm-cat-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1fr;              /* 器の寸法規則（全站共通） */
  /* 🔴 列間を詰めると件数が隣の列の見出しにくっついて「次の分類の数字」に読める。
     列と列の間は空けて、どの数字がどの分類のものか一目で決まるようにする。 */
  column-gap: 32px;
  row-gap: 0;
  border-top: 1px solid var(--border);
}
.hm-cat-list > li { display: flex; border-bottom: 1px solid var(--border); }
.hm-cat-list a {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 2px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  transition: color 0.18s ease, background 0.18s ease;
}
.hm-cat-list a:hover { color: var(--text); background: var(--card); }
.hm-cat-n {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) { .hm-cat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .hm-cat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .hm-cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .hm-cat-list { grid-template-columns: 1fr; } }

/* ================================================================
   6. これから始まるセール
   ================================================================ */
/* 予定表は「囲み」にしない。左の開催中カードと同じ箱を 2 つ並べると
   どちらが主かが伝わらないうえ、箱ばかりの面になる。
   罫だけの行組みにして、開催中（囲み）＝今日の行動、予定（素の表）＝参照 と分ける。 */
.hm-up-list {
  list-style: none;
  border-top: 1px solid var(--border);
}
.hm-up-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.hm-up-date {
  flex: 0 0 auto;
  min-width: 5.5em;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hm-up-name { color: var(--text-secondary); }
/* LP がある回はリンクにする。行が詰まっているので下線は hover の時だけ出し、
   タップ領域は行の高さ（padding 13px + 本文）で確保する。 */
.hm-up-link {
  color: var(--hm-accent);
  font-weight: 700;
  text-decoration: none;
}
.hm-up-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hm-up-entry {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: var(--hm-badge-h);
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

/* ================================================================
   7. お得情報の抜粋（フィードへの導線。密度は控えめに）
   ================================================================ */
.hm-deal-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));   /* 12 件 = 6×2 */
  gap: 14px;
}
.hm-deal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.hm-deal-card:hover { border-color: var(--text-secondary); }
.hm-deal-link { display: flex; flex-direction: column; }
.hm-deal-thumb {
  aspect-ratio: 1 / 1;            /* 画像の遅延読み込みでレイアウトが跳ねないよう先に確保 */
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hm-deal-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;       /* 白地サムネの縁を目立たせない */
}
[data-theme="dark"] .hm-deal-thumb img { mix-blend-mode: normal; }
.hm-deal-noimg { color: var(--muted-light); }
.hm-deal-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;                /* 名前の行数が違っても価格が底に揃う */
  padding: 10px 12px 12px;
}
.hm-deal-price { margin-top: auto; }
.hm-deal-name {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-deal-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   8. mottoku について
   ================================================================ */
.hm-sec-about {
  background: var(--hm-band);      /* ページを閉じる 1 面だけ地色を変える */
}
.hm-about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.hm-about-col h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);   /* 色帯ではなく細罫 */
  line-height: 1.4;
}
.hm-about-col p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-secondary);
}
.hm-about-col strong { color: var(--text); font-weight: 700; }
.hm-about-col a { color: var(--hm-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.hm-about-links {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.hm-about-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* タップ領域の下限 */
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.hm-about-links a:hover { color: var(--hm-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   レスポンシブ
   固定列数にしたので、各断点で明示的に落とす（auto-fit 任せをやめた代償）。
   ガターは style.css の main と同じ 24 / 16 / 12px 三段に揃える
   ＝ヘッダ・フッタと左端が常に一致する。
   ================================================================ */
@media (max-width: 1280px) {
  /* hub はカード化して既定 3 列にしたので、ここで 4 列に戻さない
     （狭い画面で列が増えるという逆転になっていた。2026-09-03） */
  .hm-deal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .hm-sec { padding: 52px 0; }
  .hm-hero { padding: 48px 0 44px; }
  .hm-survey-grid,
  .hm-art-grid,
  .hm-hub-grid,
  .hm-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-about-grid { gap: 28px; }
  .hm-sale-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
  :root { --hm-gutter: 16px; }
  .hm-hero-tool { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; }
  /* 単列なら入力欄はカード幅いっぱいで良い（狭い画面ほど幅が要る） */
  .hm-sec { padding: 44px 0; }
  .hm-hero { padding: 36px 0 36px; }

  .hm-sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
  }
  .hm-sec-title { font-size: 22px; }

  .hm-survey-grid,
  .hm-art-grid,
  .hm-about-grid { grid-template-columns: 1fr; }
  .hm-hub-grid { grid-template-columns: 1fr; }
  .hm-deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-sale-grid { grid-template-columns: 1fr; }

  /* 検索: 64px 一体型のままだと押し込むので、ボタンを下段へ回す */
  .hm-search-box {
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    row-gap: 0;
    padding: 6px 14px 12px;
  }
  .hm-search-input { height: 48px; }
  .hm-search-btn { grid-column: 1 / -1; width: 100%; }

  .hm-up-item { font-size: 14px; }
  .hm-up-entry { margin-left: 0; }
}

@media (max-width: 480px) {
  /* ⚠️ ここでガターを下げない。.header-inner は ≤768 の 16px のまま 480 以下でも
     変わらないので、下げるとロゴと本文の左端がずれる（実測 10px vs 12px）。 */
  .hm-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);            /* ブランド色は使わない＝色は動作にだけ使う */
  margin-bottom: 12px;
  line-break: strict;
}
.hm-eyebrow > span { white-space: nowrap; }

.hm-hero-title { letter-spacing: -0.03em; }
  .hm-sale-card, .hm-survey-card, .hm-art-link { padding: 16px; }
  .hm-deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-hub-grid { grid-template-columns: 1fr; }
}

/* 動きを減らす設定を尊重（装飾的な transform は全部止める） */
@media (prefers-reduced-motion: reduce) {
  .hm-survey-card, .hm-art-card, .hm-deal-card,
  .hm-sec-more, .hm-survey-link, .hm-hero-chips a, .hm-hub-grid a {
    transition: none !important;
  }
  .hm-survey-card:hover, .hm-art-card:hover { transform: none; }
}