/* Homepage editorial layout. Campaign data and destinations stay in home_campaigns.
   Poster composition: warm paper, solid brand folds, real product imagery.
   These local campaign inks intentionally remain fixed in both themes. */
.hm-top { padding: 24px 0 6px; }
.hm-top-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:20px; }
.hm-top-title { font-size:clamp(18px,2.1vw,23px); font-weight:800; letter-spacing:-.02em; line-height:1.5; color:var(--text); line-break:strict; }
.hm-top-meta { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; color:var(--muted); }
.hm-top-stat b { color:var(--hm-stat-emphasis); font-weight:800; }
.hm-top-stat-link { color:inherit; }
.hm-top-stat-link:hover { text-decoration:underline; text-underline-offset:3px; }
.hm-top-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }

/* Campaign posters */
.hb { position:relative; min-width:0; }
.hb-track { display:flex; gap:16px; margin:0; padding:0; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; }
.hb-track::-webkit-scrollbar { display:none; }
.hb-slide { flex:0 0 100%; min-width:0; scroll-snap-align:start; display:flex; --hb-ink:#065f46; --hb-paper:#f3f5ef; --hb-fold:#047857; --hb-fold-light:#b4d8c7; }
.hb-t-amazon { --hb-ink:#172b26; --hb-fold:#0a6854; --hb-fold-light:#bdd9c6; }
.hb-t-rakuten { --hb-ink:#a80719; --hb-fold:#bf1424; --hb-fold-light:#e8b8b6; --hb-paper:#faf4ed; }
.hb-t-yahoo { --hb-ink:#a80d2f; --hb-fold:#bb183f; --hb-fold-light:#e6b8c4; --hb-paper:#faf4ef; }
.hb-t-docomo { --hb-ink:#a40e39; --hb-fold:#ad1640; --hb-fold-light:#e6baca; }
.hb-t-aupay { --hb-ink:#923c13; --hb-fold:#a94315; --hb-fold-light:#ecc7a9; --hb-paper:#faf4ed; }
.hb-card { position:relative; isolation:isolate; flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); align-items:center; gap:32px; min-height:392px; padding:38px 5%; overflow:hidden; border:1px solid #dedfd7; border-radius:4px; background:var(--hb-paper); color:#1c2823; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.hb-card:focus-visible { outline:3px solid var(--hm-accent); outline-offset:-4px; }
.hb-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hb-bg::before { content:""; position:absolute; inset:0 0 0 56%; background:var(--hb-fold-light); clip-path:polygon(62% 0,100% 0,100% 100%,0 100%); }
.hb-bg::after { content:""; position:absolute; inset:0 0 0 57%; background:var(--hb-fold); clip-path:polygon(86% 0,100% 0,100% 100%,0 100%); }
.hb-body { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hb-eyebrow { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; line-height:1.4; margin-bottom:4px; }
.hb-plat { font-size:22px; font-weight:900; color:var(--hb-ink); letter-spacing:-.025em; }
.hb-kind { padding-left:16px; border-left:1px solid #a3aba3; font-size:13px; font-weight:700; color:#45594f; }
.hb-hl { display:block; font-size:clamp(48px,6vw,84px); line-height:1.02; font-weight:900; letter-spacing:-.045em; font-variant-numeric:tabular-nums; color:var(--hb-ink); white-space:nowrap; }
.hb-hl small { margin-left:.4em; font-size:.26em; font-weight:800; letter-spacing:0; vertical-align:.2em; }
.hb-title { display:block; font-size:clamp(20px,2.1vw,29px); font-weight:800; line-height:1.45; letter-spacing:-.025em; line-break:strict; }
.hb-title-lg { font-size:clamp(28px,3.1vw,44px); }
.hb-sub { display:block; max-width:40em; font-size:14px; line-height:1.8; color:#46574f; line-break:strict; }
.hb-foot { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:10px; }
.hb-dl { display:inline-flex; align-items:center; gap:6px; min-height:24px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.hb-dl svg { flex-shrink:0; }
.hb-dl.is-urgent { color:#a81924; }
.hb-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; min-height:48px; padding:0 22px; border-radius:3px; background:var(--hb-ink); color:#fff; font-size:15px; font-weight:800; white-space:nowrap; }
.hb-card:hover .hb-cta { text-decoration:underline; text-underline-offset:4px; }
.hb-visual { position:relative; justify-self:center; width:clamp(220px,24vw,320px); aspect-ratio:1; display:grid; place-items:center; }
.hb-plate { position:relative; width:100%; aspect-ratio:1; background:#fff; border:1px solid #e4e5dc; border-radius:2px; box-shadow:8px 8px 0 rgba(0,0,0,.08); }
.hb-plate img { position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); display:block; object-fit:contain; }
.hb-visual-type { width:100%; padding:32px; border-top:1px solid rgba(255,255,255,.65); border-bottom:1px solid rgba(255,255,255,.65); aspect-ratio:auto; min-height:230px; color:var(--hb-ink); text-align:center; }
.hb-wordmark { display:block; font-size:clamp(30px,4vw,58px); font-weight:900; letter-spacing:-.05em; line-height:1.25; }
.hb-edition { display:block; margin-top:16px; font-size:14px; font-weight:700; letter-spacing:.15em; }
/* The solid paper panel keeps lettering readable over the diagonal fold. */
.hb-visual-type { background:var(--hb-paper); box-shadow:8px 8px 0 rgba(0,0,0,.08); }

/* Carousel controls: 44px targets, no decorative loops. */
.hb-ctrl { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:6px; }
.hb-btn,.hb-dot { display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:3px; background:transparent; color:var(--text-secondary); cursor:pointer; }
.hb-btn[hidden] { display:none; }
.hb-btn:hover,.hb-dot:hover { background:var(--border-light); color:var(--text); }
.hb-btn:focus-visible,.hb-dot:focus-visible { outline:2px solid var(--hm-accent); outline-offset:-2px; }
.hb-pause .hb-ico-play { display:none; }
.hb-pause[aria-pressed="true"] .hb-ico-pause { display:none; }
.hb-pause[aria-pressed="true"] .hb-ico-play { display:block; }
.hb-dots { display:flex; align-items:center; }
.hb-dot > span { display:block; width:8px; height:4px; background:var(--muted-light); }
.hb-dot[aria-current="true"] > span { width:28px; background:var(--hm-accent); }

/* Search is a utility row, separate from the campaign poster. */
.hm-top .hm-hero-tool { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:start; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; padding:22px 0; background:transparent; }
.hm-top .hm-search { margin:0; }
.hm-top .hm-search-label,.hm-top .hm-chips-label { font-size:14px; margin-bottom:10px; color:var(--text); }
.hm-top .hm-search-box { border-radius:3px; }
.hm-top .hm-search-btn { border-radius:2px; }
.hm-top .hm-search-help { font-size:12px; margin-top:8px; }
.hm-top .hm-chips-block { margin:0; }
.hm-top .hm-hero-chips { gap:0 18px; }
.hm-top .hm-hero-chips a { min-height:36px; padding:4px 0; border:0; border-radius:0; background:transparent; color:var(--text-secondary); font-size:13px; font-weight:600; }
.hm-top .hm-hero-chips a:hover { color:var(--hm-accent); text-decoration:underline; text-underline-offset:4px; }
.hm-top .hm-chip-more { margin-top:6px; font-size:12px; }

/* Campaign directory: clear rows, quiet dividers, deadline first. */
.hc-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
.hc-main,.hc-next { min-width:0; }
.hc-filter { display:flex; gap:6px; margin:0 0 10px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border); }
.hc-filter::-webkit-scrollbar { display:none; }
.hc-chip { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; min-height:48px; padding:0 16px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--text-secondary); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.hc-chip span { font-size:12px; font-weight:600; color:var(--muted); }
.hc-chip[aria-pressed="true"] { border-bottom-color:var(--hm-accent); color:var(--hm-accent); }
.hc-chip:hover { background:var(--border-light); }
.hc-chip:focus-visible { outline:2px solid var(--hm-accent); outline-offset:-3px; }
.hc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:0 28px; list-style:none; }
.hc-grid.is-collapsed > .hc-extra,.hc-card[hidden] { display:none !important; }
.hc-card { display:flex; min-width:0; }
.hc-link { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; padding:20px 0; border-bottom:1px solid var(--border); color:var(--text); }
.hc-link:hover .hc-title { text-decoration:underline; text-underline-offset:4px; }
.hc-link:focus-visible { outline:2px solid var(--hm-accent); outline-offset:2px; }
.hc-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.hc .hm-plat { width:auto; height:auto; min-width:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--text-secondary); font-size:12px; font-weight:800; }
.hc-tag { display:inline-flex; align-items:center; padding:0 0 0 12px; border-left:1px solid var(--border); color:var(--muted); font-size:12px; }
.hc-title { display:block; font-size:16px; font-weight:800; line-height:1.6; line-break:strict; }
.hc-bonus { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:1.7; color:var(--text-secondary); }
.hc-dl { display:inline-flex; align-items:flex-start; gap:6px; margin-top:auto; padding-top:4px; font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.hc-dl svg { flex-shrink:0; margin-top:.2em; }
.hc-dl time { display:inline-flex; flex-wrap:wrap; column-gap:.5em; }
.hc-dl time > span { white-space:nowrap; }
.hc-dl.is-urgent { color:var(--hm-stat-emphasis); }
.hc-more { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; margin-top:16px; border:1px solid var(--border); border-radius:3px; background:transparent; color:var(--hm-accent); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.hc-more:hover { background:var(--card); border-color:var(--hm-accent); }
.hc-more:focus-visible { outline:2px solid var(--hm-accent); outline-offset:2px; }
.hc-next { padding:20px; background:var(--card); border:1px solid var(--border); border-radius:3px; }
.hc-next .hm-sub { margin-bottom:12px; }

/* Editorial cards share the same restrained rectangular rhythm. */
.hm-art-card,.hm-art-card.is-new { border:0; border-top:1px solid var(--border); border-radius:0; background:transparent; }
.hm-art-card:hover { background:transparent; border-color:var(--text-secondary); }
.hm-art-link { padding:22px 0; }
.hm-art-title { font-size:18px; line-height:1.65; }
.hm-art-new { display:inline-flex; align-items:center; height:var(--hm-badge-h); font-size:12px; font-weight:800; color:var(--hm-stat-emphasis); }
.hm-sec .kn-group,.hm-sec .kn-search-box,.hm-hub-grid a,.hm-survey-card { border-radius:3px; box-shadow:none; }
.hm-sec .kn-group-ico { background:transparent; color:var(--text-secondary); border-radius:0; }
.hm-sec .kn-search-box button { border-radius:2px; min-height:44px; }

@media (min-width:768px) { .hm-top-title .hm-br-sp { display:none; } }
@media (min-width:1180px) { .hc-layout { grid-template-columns:minmax(0,1fr) 320px; align-items:start; gap:40px; } }
@media (max-width:1023px) {
  .hb-card { padding:30px; gap:24px; min-height:370px; }
  .hb-visual { width:210px; }
  .hb-hl { font-size:56px; }
  .hb-title { font-size:22px; }
  .hb-visual-type { width:100%; padding:20px; }
}
@media (max-width:767px) {
  .hm-top { padding-top:18px; }
  .hm-top-head { margin-bottom:16px; }
  .hm-top-meta { font-size:12px; gap:4px 12px; }
  .hb-card { grid-template-columns:minmax(0,1fr); align-items:start; padding:24px 22px; min-height:416px; gap:0; }
  .hb-bg::before { inset:0 0 auto auto; width:120px; height:100px; clip-path:polygon(55% 0,100% 0,100% 100%,0 100%); }
  .hb-bg::after { inset:0 0 auto auto; width:96px; height:100px; clip-path:polygon(90% 0,100% 0,100% 100%,0 100%); }
  .hb-body { gap:12px; }
  .hb-eyebrow { min-height:78px; padding-right:86px; align-content:flex-start; gap:8px; margin:0; }
  .hb-plat { font-size:19px; width:100%; }
  .hb-kind { padding:0; border:0; font-size:12px; }
  .hb-hl { font-size:clamp(35px,9.8vw,60px); }
  .hb-title { font-size:20px; line-height:1.55; }
  .hb-title-lg { font-size:28px; }
  .hb-sub { font-size:13px; line-height:1.8; }
  .hb-foot { width:100%; margin-top:4px; gap:12px; }
  .hb-dl { font-size:12px; }
  .hb-cta { width:100%; min-height:48px; font-size:14px; }
  .hb-visual { position:absolute; top:16px; right:16px; width:84px; }
  .hb-plate { box-shadow:3px 3px 0 rgba(0,0,0,.08); }
  .hb-plate img { inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); }
  .hb-visual-type { display:none; }
  .hm-top-grid { gap:8px; }
  .hm-top .hm-hero-tool { grid-template-columns:minmax(0,1fr); padding:20px 0; gap:20px; }
  .hm-top .hm-hero-chips { gap:0 20px; }
  .hm-top .hm-hero-chips a { min-height:44px; }
  .hm-top .hm-search-help { font-size:12px; }
  .hc-grid { grid-template-columns:minmax(0,1fr); }
  .hc-link { padding:18px 0; }
  .hc-chip { padding-inline:12px; }
  .hc-title { font-size:16px; }
  .hc-next { padding:20px 16px; }
}
@media (prefers-reduced-motion:reduce) { .hb-track { scroll-behavior:auto; } }
/* ヘッダの見た目は app.css に移した（全ページ共通・2026-10-05 May「页眉要全站所有页面一致」） */
.hm-hub-grid a { border-radius:3px; }

@media (max-width:767px) {
  .hm-top .hm-search-box { grid-template-columns:minmax(0,1fr) auto; height:58px; padding:6px; gap:6px; }
  .hm-top .hm-search-icon { display:none; }
  .hm-top .hm-search-input { height:44px; padding-left:6px; font-size:16px; }
  .hm-top .hm-search-btn { grid-column:auto; width:auto; height:44px; padding:0 16px; }
}
.hm-sec .kn-tile > a { border-radius:3px; background:var(--card); }
.hm-sec .kn-tile > a:hover .kn-group-ico { transform:none; }


/* ================================================================
   編集部のおすすめ（.hp・2026-10-05）— May が dashboard で選んだ物だけを並べる節
   左に正方形の画像（無ければモールの色札）、右に 帯→見出し→ひとこと→価格/締切。
   ================================================================ */
.hp-grid { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-content:start; }  /* 翻页で高さを保った時に行を引き伸ばさない */
.hp-card { display:flex; min-width:0; }
.hp-link { flex:1 1 auto; min-width:0; display:grid; grid-template-columns:96px minmax(0,1fr); align-items:start; gap:14px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); transition:border-color .18s ease; }
.hp-link:hover { border-color:var(--text-secondary); }
.hp-link:hover .hp-title { text-decoration:underline; text-underline-offset:3px; }
.hp-link:focus-visible { outline:2px solid var(--hm-accent); outline-offset:2px; }
.hp-thumb { display:grid; place-items:center; width:96px; aspect-ratio:1; overflow:hidden; border:1px solid var(--border-light); border-radius:10px; background:#fff; }
.hp-thumb img { width:100%; height:100%; padding:6px; object-fit:contain; }
.hp-thumb-none { border:0; color:#fff; font-size:13px; font-weight:800; letter-spacing:.02em; }
.hp-body { min-width:0; display:flex; flex-direction:column; gap:5px; }
.hp-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:11.5px; font-weight:700; color:var(--muted); line-height:1.4; }
.hp-plat { color:var(--text-secondary); font-weight:800; }
.hp-kind { padding-left:8px; border-left:1px solid var(--border); }
.hp-badge { padding:1px 7px; border-radius:4px; background:var(--border-light); color:var(--text-secondary); }
.hp-title { font-size:15px; font-weight:800; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hp-note { font-size:12.5px; line-height:1.65; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hp-foot { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-top:2px; }
.hp-price { font-size:18px; font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; }
.hp-off { font-size:12px; font-weight:800; color:var(--hm-stat-emphasis); }
.hp-asof { font-size:11px; color:var(--muted); }
.hp-dl { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.hp-dl svg { flex-shrink:0; }
.hp-dl.is-urgent { color:var(--hm-stat-emphasis); }
@media (max-width:1179px) { .hp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* PC のページ送り（2026-10-06 May「要有个数限制，超过了的话就web翻页」）。1 页 6 件＝3 列×2 段／2 列×3 段。
   JS が無い時は .hp-off が付かない＝全件が並ぶ（pager も hidden のまま）。手机は下の 1024px 以下で横送り。 */
@media (min-width:1025px) { .hp-grid > li.hp-off { display:none; } }
.hp-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:16px; }
.hp-pager[hidden] { display:none; }
.hp-pg-btn,
.hp-pg-num { display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text-secondary); font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; cursor:pointer; touch-action:manipulation; transition:border-color .18s ease, color .18s ease; }
.hp-pg-btn { padding:0; }
.hp-pg-btn:hover:not(:disabled),
.hp-pg-num:hover { border-color:var(--text-secondary); color:var(--text); }
.hp-pg-num[aria-current="page"] { border-color:var(--text); background:var(--text); color:var(--card); cursor:default; }
.hp-pg-btn:disabled { opacity:.4; cursor:default; }
.hp-pg-btn:focus-visible,
.hp-pg-num:focus-visible { outline:2px solid var(--hm-accent); outline-offset:2px; }
.hp-pg-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* 開催中のキャンペーン：PC でも一段詰める（2026-10-05 May「稍微缩小」）。
   行の高さを「一番長い行」に揃えない（1fr をやめる）・余白と字を一段小さく・説明は 1 行・
   広い画面は 3 列（最初に開く件数は home_campaigns.CAMPAIGN_VISIBLE＝6＝3 列×2 段）。 */
.hc-grid { grid-auto-rows:auto; }
.hc-link { gap:5px; padding:14px 0; }
.hc-title { font-size:15px; line-height:1.55; }
.hc-bonus { -webkit-line-clamp:1; font-size:12.5px; }
@media (min-width:1180px) { .hc-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; } }

/* ================================================================
   スマホのアプリ形（2026-10-05 May「移动端改造成 app 的模式」）
   トップを「アプリのホーム画面」の並びに寄せる。PC には効かない（1024px 以下＝スマホとタブレット縦だけ）。
     1. 見出しは小さく 1 段に。数字の行は横に流す
     2. バナー（home-banner-art.css 側で約 200px に圧縮）
     3. 検索は丸い 1 行、カテゴリは横に送るチップ
     4. 節の頭は「見出し｜すべて見る」の 1 行。説明文は 2 行で切る
     5. 記事・商品・実勢価格は横に送るカード列（次の 1 枚の端を見せる）
     6. 長い索引（ジャンル・総合ガイド）は 3 段の横スクロール
   🔴 情報は消さない：切るのは見た目の行数だけで、リンクも本文も DOM に全部ある。
   ================================================================ */
@media (max-width:1024px){
  /* 1. 見出し */
  .hm-top { padding:14px 0 0; }
  .hm-top-head { display:block; margin-bottom:12px; }
  .hm-top-title { font-size:15px; line-height:1.55; letter-spacing:-.01em; }
  .hm-top-meta { flex-wrap:nowrap; gap:0 14px; margin:4px calc(-1 * var(--hm-gutter)) 0; padding:0 var(--hm-gutter); overflow-x:auto; scrollbar-width:none; font-size:12px; white-space:nowrap; }
  .hm-top-meta::-webkit-scrollbar { display:none; }
  .hm-top-grid { gap:0; }

  /* 3. 検索・カテゴリ */
  .hm-top .hm-hero-tool { display:block; padding:6px 0 0; border:0; }
  .hm-top .hm-search-label,
  .hm-top .hm-chips-label,
  .hm-top .hm-search-help { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .hm-top .hm-search-box { grid-template-columns:auto minmax(0,1fr) auto; height:48px; padding:0 4px 0 14px; gap:8px; border-width:1px; border-radius:24px; }
  .hm-top .hm-search-icon { display:block; width:18px; height:18px; }
  .hm-top .hm-search-input { height:46px; padding:0; font-size:16px; }
  .hm-top .hm-search-btn { grid-column:auto; width:auto; height:40px; padding:0 16px; border-radius:20px; font-size:14px; }
  .hm-top .hm-chips-block { display:flex; align-items:center; gap:8px; margin:10px calc(-1 * var(--hm-gutter)) 0; padding:0 var(--hm-gutter) 2px; overflow-x:auto; scrollbar-width:none; }
  .hm-top .hm-chips-block::-webkit-scrollbar { display:none; }
  .hm-top .hm-hero-chips { flex-wrap:nowrap; gap:8px; }
  .hm-top .hm-hero-chips a,
  .hm-top .hm-chip-more { flex-shrink:0; min-height:40px; margin:0; padding:0 14px; border:1px solid var(--border); border-radius:20px; background:var(--card); color:var(--text-secondary); font-size:13px; font-weight:700; white-space:nowrap; }
  .hm-top .hm-chip-more { color:var(--hm-accent); }
  .hm-top .hm-hero-chips a:active,
  .hm-top .hm-chip-more:active { background:var(--border-light); }

  /* 4. 節の頭 */
  .hm-sec { padding:26px 0 6px; }
  .hm-sec-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:2px 12px; padding-top:14px; border-top:1px solid var(--border); margin-bottom:12px; }
  .hm-sec-title { font-size:19px; line-height:1.4; }
  .hm-sec-lead { margin-top:4px; font-size:13px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .hm-meta { margin-top:2px; font-size:11.5px; }
  .hm-sec-more { min-height:40px; margin-top:-8px; font-size:13px; white-space:nowrap; }
  .hm-sec-more-n { display:none; }   /* 「（1,572,871件）」は見出しを 2 行に割るので外す。件数は節の上にも出ている */
  .hm-note { font-size:11.5px; line-height:1.7; }

  /* 開催中のキャンペーン：行を詰める */
  .hc-page .hm-sec { padding-top:16px; }
  .hc-page .hm-sec-head { border-top:0; padding-top:0; }   /* /campaigns は 1 節だけ＝上の罫は要らない */
  .hc-filter { margin:0 calc(-1 * var(--hm-gutter)) 2px; padding:0 var(--hm-gutter); }
  .hc-chip { min-height:44px; padding:0 12px; font-size:13px; }
  .hc-grid { grid-auto-rows:auto; }   /* 1fr のままだと一番長い行に全行が揃い、短い行に空白が出る */
  .hc-link { gap:3px; padding:12px 0; }
  .hc-title { font-size:15px; line-height:1.5; }
  .hc-bonus { -webkit-line-clamp:1; font-size:12px; }
  .hc-dl { padding-top:2px; font-size:11.5px; }
  .hc-more { min-height:44px; margin-top:10px; border-radius:22px; }
  .hc-layout { gap:20px; }
  .hc-next { padding:14px 16px; border-radius:12px; }

  /* 5. 横に送るカード列（記事・商品・実勢価格） */
  .hp-grid,
  .hm-art-grid,
  .hm-deal-grid,
  .hm-survey-grid { position:relative; display:flex; gap:10px; margin:0 calc(-1 * var(--hm-gutter)); padding:2px var(--hm-gutter) 8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--hm-gutter); scrollbar-width:none; overscroll-behavior-x:contain; }
  .hp-grid::-webkit-scrollbar,
  .hm-art-grid::-webkit-scrollbar,
  .hm-deal-grid::-webkit-scrollbar,
  .hm-survey-grid::-webkit-scrollbar { display:none; }
  .hp-grid > li,
  .hm-art-grid > li,
  .hm-deal-grid > li,
  .hm-survey-grid > * { scroll-snap-align:start; }
  /* 🔴 横スクロールの箱は position:relative にする。中の「見た目だけ隠した」表題（絶対配置）が
     箱の外を基準にすると、スクロールの切り抜きをすり抜けてページ全体を横に 288px 広げていた */

  .hm-art-card,
  .hm-art-card.is-new { flex:0 0 min(80%, 340px); border:1px solid var(--border); border-radius:14px; background:var(--card); }
  .hm-art-link { padding:14px 14px 12px; }
  .hm-art-meta { gap:6px 8px; margin-bottom:6px; }
  .hm-art-title { font-size:15px; line-height:1.55; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .hm-art-desc { font-size:12.5px; line-height:1.7; -webkit-line-clamp:2; }
  .hm-art-foot { padding-top:8px; font-size:11.5px; }
  .hm-art-card:active,
  .hm-deal-card:active,
  .hm-hub-grid a:active,
  .hc-link:active { opacity:.72; }

  .hp-card { flex:0 0 min(86%, 380px); }
  .hp-link { grid-template-columns:80px minmax(0,1fr); gap:12px; padding:12px; border-radius:14px; }
  .hp-thumb { width:80px; }
  .hp-title { font-size:14.5px; }
  .hp-link:active { opacity:.72; }
  .hp-pager { display:none; }   /* 手机は翻页しない＝全件を横に送る（上の .hp-grid が横スクロール） */
  .hm-deal-card { flex:0 0 min(36%, 176px); border-radius:12px; }
  .hm-deal-body { padding:8px 10px 10px; }
  .hm-deal-name { font-size:12px; }
  .hm-deal-price { font-size:14px; }

  .hm-survey-card { flex:0 0 min(86%, 420px); padding:16px; border-radius:14px; }
  .hm-survey-head { padding-bottom:10px; margin-bottom:10px; }
  .hm-survey-q { font-size:16px; }

  /* コラムを探す：10 の入口を 2 列の小さなタイルに */
  .hm-find-search { margin-bottom:12px; }
  .hm-sec .kn-search-box { height:48px; padding:0 4px 0 14px; border-radius:24px; }
  .hm-sec .kn-search-box button { height:40px; min-height:40px; padding:0 16px; border-radius:20px; font-size:14px; }
  .hm-sec .kn-tiles { gap:8px; }
  .hm-sec .kn-tile > a { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:10px; padding:10px 12px; border-radius:12px; }
  .hm-sec .kn-tile .kn-group-ico { grid-row:1 / 3; width:36px; height:36px; margin:0; border-radius:10px; }
  .hm-sec .kn-tile .kn-group-ico svg { width:19px; height:19px; }
  .hm-sec .kn-tile-label { font-size:13.5px; line-height:1.35; }
  .hm-sec .kn-tile-desc { display:none; }
  .hm-sec .kn-tile-n { margin:0; padding:0; font-size:11.5px; font-weight:700; color:var(--muted); }

  /* 特集ガイド：2 列の小さなカード */
  .hm-hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hm-hub-grid a { gap:4px; padding:12px; border-radius:12px; font-size:13px; }
  .hm-hub-title { font-size:13.5px; line-height:1.45; }
  .hm-hub-desc { font-size:11.5px; line-height:1.6; }

  /* 6. 長い索引は 3 段の横スクロール（72 本の総合ガイドが縦 1,600px を占めていた） */
  .hm-index { margin-top:18px; }
  .hm-index .hm-sub { font-size:14px; margin-bottom:8px; }
  .hm-index-list { position:relative; display:grid; grid-auto-flow:column; grid-template-rows:repeat(3,auto); grid-auto-columns:max-content; gap:6px 8px; margin:0 calc(-1 * var(--hm-gutter)); padding:10px var(--hm-gutter) 6px; overflow-x:auto; scrollbar-width:none; border-top:0; }
  .hm-index-list::-webkit-scrollbar { display:none; }
  .hm-index-list li:not(:last-child)::after { display:none; }
  .hm-index-list a { min-height:38px; padding:0 13px; border:1px solid var(--border); border-radius:19px; background:var(--card); font-size:13px; white-space:nowrap; }

  /* mottoku とは */
  .hm-about-grid { gap:16px; }
  .hm-about-col h3 { font-size:15px; }
  .hm-about-col p { font-size:13.5px; line-height:1.8; }
  .hm-about-links { gap:0 16px; }
}
/* タブレット縦：特集ガイドは 3 列（2 列だと 1 枚が横に間延びする） */
@media (min-width:600px) and (max-width:1024px){
  .hm-hub-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .hm-art-grid,.hm-deal-grid,.hm-survey-grid { scroll-behavior:auto; }
}