/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.block{display:block}.table{display:table}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}
/* ==========================================================================
   くらし選び帖 デザインシステム 2026
   --------------------------------------------------------------------------
   旧CSS 24ファイル・16,000行（improvements / late-fixes / final-polish /
   global-qa-fixes / display-fixes / mobile-fixes ほか）を置き換える単一の土台。
   パッチを積む運用に戻らないよう、ここではトークンとコンポーネントだけを定義し、
   個別ページの微調整は書かない。ページ固有の見た目は ui-pages.css に置く。

   設計方針:
   1. 読みもの優先。本文は1カラム・最大42em・行間1.95で、まず文章が読める状態を作る。
   2. 装飾の英字ラベル（QUICK ANSWER / HOW TO CHOOSE など）は使わない。
      比較記事の信頼感は情報の並び順で作り、飾りでは作らない。
   3. 商品カードは「見出し＋根拠＋価格＋導線」の順に固定し、1件の高さを抑える。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root {
  /* 面（白基調。面の差は背景色ではなく罫線で作る） */
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #f6f7f8;
  --surface-navy: #1e2227; /* 名前は互換のため残すが中身はチャコール */

  /* 文字 */
  --ink: #313131;
  --ink-strong: #1a1a1a;
  --ink-muted: #6f6f6f;
  /* 注記・出典・補助ラベル用。白背景で4.5:1（WCAG AA）を満たす濃さにする。
     以前の #85898f は約3.5:1で、いちばん読ませたい注記が読みにくかった。 */
  --ink-faint: #6b7076;
  --ink-inverse: #ffffff;

  /* ブランド（家電量販店トーンの深い赤）。
     赤は「強調・CTA・バッジ」専用。本文中のテキストリンクには使わない。 */
  --brand: #c8102e;
  --brand-strong: #9e0c24;

  /* 販売先の色。商品カードの購入ボタンが楽天もAmazonも --brand の同じ赤で、
     どちらの店のボタンか色で判別できなかった。販売先ごとに1組ずつ持たせ、
     比較表・商品カード・追従バーで同じ色を使う。Amazonのオレンジは白文字だと
     読みにくいため、文字色も対で持つ。 */
  --store-rakuten: #bf0000;
  --store-rakuten-strong: #8f0000;
  --store-rakuten-ink: #ffffff;
  --store-amazon: #ff9900;
  --store-amazon-strong: #e07c00;
  --store-amazon-ink: #131921;
  --brand-soft: #f4f4f4;
  --brand-line: #dedede;

  /* テキストリンク。基調の赤×クリームに合わせ、ブランド赤より少し落ち着いた
     赤系を機能色として使う。下線・矢印と組み合わせてリンクだと分かるようにする。 */
  --link: #313131;
  --link-strong: #000000;

  /* 状態 */
  --accent-warm: #b45309;
  --accent-warm-soft: #fdf4e8;
  --accent-good: #0f766e;
  --accent-good-soft: #e6f4f2;

  /* 罫 */
  --line: #e3e5e8;
  --line-strong: #c9ccd1;

  /* 影 */
  --shadow-sm: 0 1px 2px rgb(18 20 23 / 6%);
  --shadow-md: 0 2px 8px rgb(18 20 23 / 7%);
  --shadow-lg: 0 8px 28px rgb(18 20 23 / 10%);

  /* 角丸。my-best.com の実測（要素の角丸は4px中心、画像は0〜4px）に合わせて
     四角寄りに統一する。--r-full だけは検索バーやチップのピル形状で使うため残す。 */
  --r-sm: 4px;
  --r-md: 4px;
  --r-lg: 4px;
  --r-full: 999px;

  /* 余白スケール（4の倍数） */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 88px;

  /* 幅 */
  --w-prose: 42rem;   /* 本文（日本語で約38〜42字/行） */
  --w-content: 60rem; /* 表・カードなど本文より広い要素 */
  --w-page: 75rem;    /* ページ最大幅 */

  --font-jp: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 価格など数値表示用。等幅フォントだと円・税込などの和文が浮くため、
     本文と同じ書体で数字だけ等幅（tabular-nums）にする。 */
  --font-num: var(--font-jp);
}

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  /* 長尺記事では CSS smooth scroll がアンカー移動を打ち消す環境がある。
     目次・スキップリンク・商品リンクは「確実に移動する」ことを優先する。 */
  scroll-behavior: auto;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  body { font-size: 16.5px; }
}

*, *::before, *::after { box-sizing: border-box; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-strong); text-decoration: underline; }

.verdict-list a,
.related-links a,
.footer-meta a,
.buy-box > a,
.product-detail-toggle > summary {
  min-height: 40px;
}

.verdict-list a,
.buy-box > a,
.product-detail-toggle > summary {
  display: inline-flex;
  align-items: center;
  padding-block: 7px;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; }
p, ul, ol, dl, figure, table { margin: 0; }
ul, ol { padding-left: 1.35em; }
li { margin-block: 0.35em; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--s3) var(--s5);
  background: var(--surface-navy);
  color: var(--ink-inverse);
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. レイアウト・プリミティブ
   -------------------------------------------------------------------------- */
.u-wrap {
  width: min(100% - 2 * var(--s4), var(--w-page));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .u-wrap { width: min(100% - 2 * var(--s6), var(--w-page)); }
}

/* 本文の読みやすい幅。表・カードだけ広げるために .u-bleed を併用する。 */
.u-prose { max-width: var(--w-prose); }
.u-bleed { max-width: var(--w-content); }

.u-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-muted { color: var(--ink-muted); }
.u-note { font-size: 0.875rem; color: var(--ink-muted); line-height: 1.8; }

/* --------------------------------------------------------------------------
   4. 見出しと本文タイポグラフィ
   -------------------------------------------------------------------------- */

/* 日本語の見出しは既定だと文字単位で折り返すため、「〜と比較」の「較」だけが
   次行に落ちるような孤立行が出る。文節単位の改行に切り替えて防ぐ。
   word-break: auto-phrase は Chromium 系のみ有効で、非対応環境は従来動作に戻る。
   text-wrap: pretty は最終行が極端に短くなる折り返しを避ける。

   適用は見出しだけに限る。目次のような幅200px前後の細い段に掛けると、
   文節が入りきらず行数がかえって増える（実測: 右レールの目次が2行→3行）。 */
h1, h2, h3, h4 {
  word-break: auto-phrase;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  margin-top: 2.4em;
  margin-bottom: 0.9em;
  padding-bottom: 0.5em;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  border-bottom: 2px solid var(--line);
  position: relative;
}
.prose h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 3.5em;
  height: 2px;
  background: var(--ink-strong);
}

.prose h3 {
  margin-top: 2em;
  margin-bottom: 0.7em;
  padding-left: 0.6em;
  font-size: clamp(1.075rem, 2.8vw, 1.2rem);
  border-left: 4px solid var(--ink-strong);
}

.prose h4 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  font-size: 1rem;
  color: var(--ink-strong);
}

.prose p { line-height: 1.95; }
.prose strong { font-weight: 700; color: var(--ink-strong); }
.prose a { text-decoration: underline; text-underline-offset: 0.2em; }

/* --------------------------------------------------------------------------
   5. 共通パーツ：ボタン
   -------------------------------------------------------------------------- */
.btn,
.cta-primary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover, .cta-primary:hover, .cta-secondary:hover { text-decoration: none; }

.btn-primary, .cta-primary {
  background: var(--brand);
  color: var(--ink-inverse);
}
.btn-primary:hover, .cta-primary:hover { background: var(--brand-strong); }

.btn-outline, .cta-secondary {
  background: var(--surface);
  color: var(--brand-strong);
  border-color: var(--brand-line);
}
.btn-outline:hover, .cta-secondary:hover { background: var(--brand-soft); border-color: var(--brand); }

/* --------------------------------------------------------------------------
   6. グローバルヘッダー・広告表記バー
   -------------------------------------------------------------------------- */
.global-ad-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s4);
  /* 黒帯は本文より先に目に入り、ページ全体を広告面のように見せていた。
     表記は法令上必要なので消さず、淡色＋本文色にして主張だけ弱める。 */
  background: var(--surface-sunken);
  color: var(--ink);
  border-bottom: 1px solid rgb(31 41 55 / 8%);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}
/* モバイルは84pxを占めて本文を押し下げていた。余白と行間を詰めたうえで、
   但し書き（価格・在庫・契約条件）だけ隠して1行に収める。広告表記本体は残す。
   但し書きと同じ内容は各商品カード・各サービスカードにも入っている。 */
@media (max-width: 639px) {
  .global-ad-bar {
    gap: 2px var(--s2);
    padding: var(--s1) var(--s3);
    font-size: 0.6875rem;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .global-ad-bar > span { display: none; }
  .global-ad-bar-detail { display: none; }
}
.global-ad-bar b {
  padding: 1px var(--s2);
  border: 1px solid rgb(31 41 55 / 22%);
  border-radius: var(--r-sm);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.global-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .global-site-header { padding-inline: var(--s6); }
}

.global-brand-lockup { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.global-brand-lockup p {
  display: none;
  padding-left: var(--s3);
  border-left: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
/* ヘッダー内の要素はグローバルナビと同じ1100pxで切り替える */
@media (min-width: 1100px) { .global-brand-lockup p { display: block; } }

.logo { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-strong); text-decoration: none; }
.logo span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}
.logo span::before { content: "選"; }
.logo b { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }

.global-desktop-nav { display: none; }
@media (min-width: 1100px) {
  .global-desktop-nav {
    display: flex;
    align-items: center;
    gap: var(--s1);
    margin-left: auto;
    flex-wrap: wrap;
  }
  .global-desktop-nav a {
    padding: var(--s2) var(--s3);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
  }
  /* 中間幅では余白と文字を少し詰め、ナビが2行に折り返さないようにする */
  @media (max-width: 1560px) {
    .global-desktop-nav { gap: 0; }
    .global-desktop-nav a { padding: var(--s2) 10px; font-size: 0.8125rem; }
  }
  .global-desktop-nav a:hover { background: var(--brand-soft); color: var(--brand-strong); text-decoration: none; }
  .global-desktop-nav .global-primary-link {
    background: var(--ink-strong);
    color: var(--ink-inverse);
    font-weight: 700;
  }
  .global-desktop-nav .global-primary-link:hover { background: #000; color: var(--ink-inverse); }
}

.global-mobile-menu { margin-left: auto; position: relative; }
@media (min-width: 1100px) { .global-mobile-menu { display: none; } }
.global-mobile-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s2) var(--s4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.global-mobile-menu > summary::-webkit-details-marker { display: none; }
.global-mobile-menu[open] > summary { background: var(--brand); color: var(--ink-inverse); border-color: var(--brand); }
.global-mobile-menu > nav {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s2));
  z-index: 110;
  display: grid;
  min-width: 220px;
  padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.global-mobile-menu > nav a {
  padding: var(--s3);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  color: var(--ink);
}
.global-mobile-menu > nav a:hover { background: var(--brand-soft); text-decoration: none; }

/* --------------------------------------------------------------------------
   7. トップの特集バナー3枚（全ページ共通で出るナビゲーション）
   -------------------------------------------------------------------------- */
.site-guide-banners {
  display: grid;
  gap: var(--s3);
  width: min(100% - 2 * var(--s4), var(--w-page));
  margin: var(--s5) auto;
  grid-template-columns: 1fr;
}
body:has(main.article-page) > .site-guide-banners,
body:has(main.article-library-page) > .site-guide-banners,
body:has(main.product-hub-page) > .site-guide-banners,
body:has(main.summer-hub-page) > .site-guide-banners,
body:has(main.winter-hub-page) > .site-guide-banners,
body:has(main.heatstroke-page) > .site-guide-banners {
  display: none;
}
@media (min-width: 640px) { .site-guide-banners { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .site-guide-banners { width: min(100% - 2 * var(--s6), var(--w-page)); } }
/* モバイルは縦積みだと本文到達まで約1200px押し下がるため、
   1行の横スクロールに畳む。 */
@media (max-width: 639px) {
  .site-guide-banners {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--s1);
  }
  .site-guide-banner { min-height: 110px; scroll-snap-align: start; }
}

.site-guide-banner {
  position: relative;
  display: block;
  min-height: 132px;
  padding: var(--s4);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ink-inverse);
  isolation: isolate;
  box-shadow: var(--shadow-md);
}
.site-guide-banner:hover { text-decoration: none; }
.site-guide-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* 画像の上に文字を置くので、可読性はグラデーションで担保する。
   旧デザインは白抜き文字が写真に埋もれて読めなくなっていた。 */
.site-guide-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgb(15 16 19 / 88%) 0%, rgb(15 16 19 / 68%) 55%, rgb(15 16 19 / 25%) 100%);
}
.site-guide-banner small {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 92%);
}
.site-guide-banner strong {
  display: block;
  margin-top: var(--s1);
  font-size: 1.0625rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}
.site-guide-banner span {
  display: block;
  margin-top: var(--s1);
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 85%);
}

/* --------------------------------------------------------------------------
   8. パンくず
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  /* リンク自体を44pxにした分、行の上下パディングは詰めて
     パンくず全体の高さを従来（約49px）に保つ。 */
  padding-block: var(--s1);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
/* 文字サイズは13pxのまま、リンクの当たり判定だけ44pxに広げる。
   行自体は align-items:center の1行なので、パンくずの見た目の高さは変わらない。 */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-muted);
}
.breadcrumb a:hover { color: var(--link); }
.breadcrumb > span:last-child { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   9. 記事ページの骨格
   -------------------------------------------------------------------------- */
/* ページ幅は本文の読み幅（--w-prose = 42字/行）に合わせる。
   以前はページ1200px・セクション892pxに対して段落だけ672pxで折り返しており、
   見出し・表・商品カードは箱いっぱいなのに文章だけ左に寄り、右側に170px前後の
   空白が残っていた。箱を文章に合わせることで、余白は左右対称になる。 */
.article-page {
  --w-article-column: calc(var(--w-prose) + 2 * var(--s5));
  width: min(100% - 2 * var(--s4), var(--w-article-column));
  margin-inline: auto;
  padding-bottom: var(--s9);
}
@media (min-width: 768px) {
  .article-page { width: min(100% - 2 * var(--s6), var(--w-article-column)); }
}
/* 目次レールが出る記事ページだけ、レール（260px）とその間隔ぶんを足す。 */
@media (min-width: 1100px) {
  .article-page-with-rail {
    width: min(100% - 2 * var(--s6), calc(var(--w-article-column) + var(--s7) + 260px));
  }
}

/* 本文と目次の2カラム。
   1024pxで2カラム化すると右レールが240pxしか取れず、日本語の見出しが
   3行に折り返して目次として読めなくなる（実測: 1024pxで「瞬間冷却パックの
   使い切りタイプと再利用タイプの違い」が3行）。
   グローバルヘッダーの切り替えと同じ1100pxまで引き上げ、レールも260pxにする。 */
.article-layout { display: block; }
@media (min-width: 1100px) {
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--s7);
    align-items: start;
  }
}

.article-body { min-width: 0; }
.article-body > section,
.article-body > nav,
.article-body > aside,
.article-body article,
.article-body [id] { scroll-margin-top: 96px; }

/* 読み幅の統一。
   本文（.article-head / .article-section の段落）は --w-prose で42字/行に
   収まっていたが、結論ボックス・編集部ワンポイント・FAQ・セクション直下の
   段落だけが素通しで、1440pxでは838〜892px（約54〜57字/行）になっていた。
   箱の幅は変えず、中の文章だけ同じ読み幅に揃える。 */
.article-verdict p,
.editorial-onepoint p,
.faq-list details p,
.article-section > p {
  max-width: var(--w-prose);
}

/* --- カテゴリーチップ（記事間の最短導線） --- */
.category-chip-nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
}
.category-chip-label {
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-muted);
}
.category-chip-nav > div {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-block: 2px;
}
.category-chip-nav a {
  flex: none;
  padding: var(--s1) var(--s3);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  color: var(--ink);
  white-space: nowrap;
}
.category-chip-nav a:hover { border-color: var(--link); color: var(--link); text-decoration: none; }
.category-chip-nav a.current {
  background: var(--surface-navy);
  border-color: var(--surface-navy);
  color: var(--ink-inverse);
  font-weight: 700;
}

/* --- 右レールの1位イチ押しカード（追従CTA） --- */
.rail-pick {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.rail-pick-flag {
  justify-self: start;
  padding: 2px var(--s3);
  background: var(--brand);
  color: var(--ink-inverse);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
}
.rail-pick img { width: 100%; height: 110px; object-fit: contain; }
.rail-pick strong { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-strong); overflow-wrap: anywhere; }
.rail-pick-price { font-size: 1.125rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.rail-pick-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse) !important;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}
.rail-pick-cta:hover { background: var(--brand-strong); text-decoration: none; }
.rail-pick-more { font-size: 0.75rem; text-align: center; }

/* --- 右レールの関連記事バナー --- */
.rail-related {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rail-related > b {
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-strong);
}
.rail-related { min-width: 0; }
.rail-related > a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
  padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
}
.rail-related > a:hover { border-color: var(--link); text-decoration: none; }
.rail-related img {
  width: 64px;
  height: 48px;
  object-fit: contain;
  background: var(--surface);
  border-radius: 4px;
}
.rail-related strong {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.rail-related em {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  font-style: normal;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 記事ヘッダー --- */
.article-head {
  margin-top: var(--s5);
  padding: 0 0 var(--s6);
  border-bottom: 1px solid var(--line);
}
.article-head h1 {
  max-width: min(24ch, 100%);
  font-size: clamp(1.9rem, 5.2vw, 3.25rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 900;
  color: var(--ink-strong);
}
.article-kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.article-kicker span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--brand);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-kicker span + span::before {
  content: "・";
  margin-right: var(--s2);
}
.article-lead {
  margin-top: var(--s4);
  max-width: var(--w-prose);
  font-size: 1rem;
  line-height: 1.95;
  color: var(--ink);
}
.article-eyecatch {
  margin-top: var(--s5);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: var(--w-content);
}
.article-eyecatch img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.refrigerator-capacity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}
.refrigerator-capacity-card {
  display: grid;
  min-width: 0;
  gap: var(--s2);
  padding: var(--s4);
  color: var(--ink-strong);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.refrigerator-capacity-card:hover { border-color: var(--brand); }
.refrigerator-capacity-card > span {
  color: var(--brand-strong);
  font-size: 0.8125rem;
  font-weight: 700;
}
.refrigerator-capacity-card > strong { font-size: 1.75rem; line-height: 1.1; }
.refrigerator-capacity-card > b { font-size: 0.95rem; overflow-wrap: anywhere; }
.refrigerator-capacity-card > small { color: var(--ink); line-height: 1.65; }
.refrigerator-capacity-card > em { margin-top: var(--s2); color: var(--brand-strong); font-size: 0.8125rem; font-style: normal; font-weight: 700; }
@media (max-width: 639px) {
  .refrigerator-capacity-grid { grid-template-columns: 1fr; }
}

.refrigerator-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}
.refrigerator-checklist-card {
  display: grid;
  gap: var(--s2);
  min-width: 0;
  padding: var(--s5);
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.refrigerator-checklist-card:hover { border-color: var(--brand); }
.refrigerator-checklist-card > span { color: var(--brand); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.refrigerator-checklist-card > strong { font-size: 1.05rem; line-height: 1.4; }
.refrigerator-checklist-card > p { margin: 0; color: var(--ink-muted); font-size: .9rem; line-height: 1.65; }
.refrigerator-checklist-card > em { color: var(--brand-strong); font-size: .8125rem; font-style: normal; font-weight: 700; }
.refrigerator-table-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
}
.refrigerator-table-guide > div {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.refrigerator-table-guide strong { color: var(--brand-strong); font-size: .9rem; }
.refrigerator-table-guide span { color: var(--ink-muted); font-size: .85rem; line-height: 1.5; }
@media (max-width: 639px) {
  .refrigerator-checklist-grid { grid-template-columns: 1fr; }
  .refrigerator-table-guide { grid-template-columns: 1fr; gap: .5rem; }
  .refrigerator-table-guide > div { padding: .7rem .85rem; }
}

/* 冷蔵庫記事は刷新案に合わせ、見出しとアイキャッチを横並びにする。 */
.refrigerator-article-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.refrigerator-hero-copy { min-width: 0; }
.refrigerator-hero-visual { margin: 0; min-width: 0; }
.refrigerator-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}
@media (max-width: 760px) {
  .refrigerator-article-head { grid-template-columns: 1fr; gap: 1rem; }
  .refrigerator-hero-visual { order: -1; }
  .refrigerator-hero-visual img { aspect-ratio: 16 / 10; }
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.article-meta b { font-weight: 500; color: var(--ink); }
.article-top-product-hero {
  margin-top: var(--s5);
  max-width: min(100%, 38rem);
  padding: var(--s4);
  background: linear-gradient(180deg, rgb(255 251 247 / 100%), rgb(255 255 255 / 100%));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.article-top-product-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.action-camera-top-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: var(--s5);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid rgb(198 219 228 / 0.9);
  border-radius: calc(var(--r-lg) + 4px);
  background: linear-gradient(180deg, rgb(248 251 254 / 0.96), rgb(255 255 255 / 1));
  box-shadow: 0 18px 44px rgb(32 74 96 / 0.12);
  align-items: stretch;
}
.action-camera-top-showcase-copy {
  display: grid;
  gap: 0.8rem;
  align-content: center;
  min-width: 0;
}
.action-camera-top-showcase-copy span {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1e6a8a;
}
.action-camera-top-showcase-copy strong {
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  line-height: 1.35;
  color: #0f2740;
}
.action-camera-top-showcase-copy p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.75;
  color: rgb(35 63 83 / 0.92);
}
.action-camera-top-showcase-visual {
  display: grid;
  gap: 0.9rem;
  align-items: stretch;
}
.action-camera-top-showcase-main {
  overflow: hidden;
  min-width: 0;
  margin: 0;
  border-radius: calc(var(--r-lg) + 4px);
  background: linear-gradient(180deg, #f7fafc, #eef4f7);
  border: 1px solid #dbe6ee;
  box-shadow: 0 14px 32px rgb(34 72 95 / 0.12);
  display: grid;
  gap: 0;
}
.action-camera-top-showcase-main-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 370px;
  padding: 18px 18px 6px;
}
.action-camera-top-showcase-main img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 350px;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 18px 28px rgb(0 0 0 / 0.12));
}
.action-camera-top-showcase-main-copy {
  display: grid;
  gap: 0.5rem;
  padding: 0 18px 18px;
  color: #111214;
}
.action-camera-top-showcase-main-copy b {
  justify-self: start;
  display: inline-flex;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: rgb(214 16 46 / 0.96);
  font-size: 0.75rem;
  font-weight: 800;
}
.action-camera-top-showcase-main-copy strong {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: #111214;
}
.action-camera-top-showcase-main-copy p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #4d5058;
}
.action-camera-top-showcase-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.action-camera-top-showcase-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.92);
  border: 1px solid rgb(211 226 234 / 0.95);
  box-shadow: 0 12px 24px rgb(34 72 95 / 0.08);
  color: inherit;
  text-decoration: none;
}
.action-camera-top-showcase-card:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.action-camera-top-showcase-card small {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--brand);
  grid-column: 2;
}
.action-camera-top-showcase-card img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: calc(var(--r-sm) + 4px);
  background: rgb(255 255 255 / 0.96);
  grid-row: 1 / span 3;
  padding: 0.4rem;
}
.action-camera-top-showcase-card b {
  font-size: 0.86rem;
  line-height: 1.45;
  color: #10253a;
  grid-column: 2;
}
.action-camera-top-showcase-card span {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-muted);
  grid-column: 2;
}
.action-camera-top-showcase-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.action-camera-top-showcase-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.05rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.action-camera-top-showcase-actions a:first-child {
  background: #0f2740;
  color: #fff;
}
.action-camera-top-showcase-actions a:last-child {
  background: rgb(255 255 255 / 0.9);
  border: 1px solid rgb(177 204 217 / 0.95);
  color: #14435a;
}
.action-camera-article-rail .rail-price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
@media (max-width: 640px) {
  .article-top-product-hero {
    padding: var(--s3);
  }
  .action-camera-top-showcase {
    grid-template-columns: 1fr;
  }
  .action-camera-top-showcase-main-figure {
    min-height: 250px;
    padding: 14px 14px 2px;
  }
  .action-camera-top-showcase-main img {
    max-height: 228px;
  }
  .action-camera-top-showcase-grid {
    grid-template-columns: 1fr;
  }
  .action-camera-top-showcase-card {
    grid-template-columns: 74px 1fr;
  }
  .action-camera-top-showcase-card img {
    width: 74px;
    height: 74px;
  }
}

/* --- 疑問→ガイド誘導（検索意図のミスマッチ対策） --- */
.article-intent-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface-sunken);
  border-left: 4px solid var(--ink-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.9375rem;
}
.article-intent-callout > b { color: var(--ink-strong); font-size: 0.875rem; }
.article-intent-callout > a { font-weight: 600; }

/* --- 結論ボックス --- */
.article-verdict {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-left: 5px solid var(--ink-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
/* 見出しの階層を揃える。結論ボックスの見出しだけ17pxで、同じh2の
   セクション見出し（20.8px〜）より小さく、読み手には小見出しに見えていた。 */
.article-verdict > h2 {
  font-size: clamp(1.25rem, 3.6vw, 1.5rem);
  color: var(--ink-strong);
}
/* タイトルの疑問への直接の答え。見出しの直後・1画面目で読ませる一文。
   リード文より強く、見出しより弱い階層にする。 */
.article-answer {
  max-width: var(--w-prose);
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: 6px solid var(--ink-strong);
  font-size: clamp(1.08rem, 3vw, 1.28rem);
  font-weight: 600;
  line-height: 1.8;
  color: var(--ink-strong);
}

@media (max-width: 700px) {
  .article-head h1 {
    max-width: 100%;
    font-size: clamp(1.8rem, 8vw, 2.55rem);
    line-height: 1.34;
  }

  .article-kicker span {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
  }

  .article-answer {
    padding-left: var(--s3);
    border-left-width: 5px;
    font-size: 1rem;
    line-height: 1.9;
  }
}
.article-fast-answer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}
.article-fast-answer-card {
  display: grid;
  grid-template-columns: minmax(5.5rem, 6.5rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--s2) var(--s3);
  min-height: 0;
  padding: var(--s4);
  background: linear-gradient(180deg, rgb(255 250 247 / 100%), rgb(255 255 255 / 100%));
  border: 1px solid rgb(232 216 209 / 0.98);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.article-fast-answer-card span {
  align-self: start;
  padding-top: 0.15rem;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.article-fast-answer-card strong {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink-strong);
}
.article-fast-answer-card em {
  grid-column: 2;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-style: normal;
}
.article-fast-answer-card:hover {
  text-decoration: none;
  border-color: rgb(213 90 78 / 0.32);
  transform: translateY(-2px);
}
.article-verdict .verdict-problem {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--brand-soft);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
}
.article-verdict .verdict-problem b { color: var(--brand-strong); }
.article-verdict > p {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  line-height: 1.95;
}
.article-search-demand {
  padding: var(--s5);
  background:
    linear-gradient(135deg, rgb(244 250 247 / 100%), rgb(255 255 255 / 100%)),
    var(--surface);
  border: 1px solid rgb(80 148 117 / 18%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.keyword-chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.keyword-chip-cloud a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--s3);
  border: 1px solid rgb(80 148 117 / 24%);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 92%);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.keyword-chip-cloud a:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
  text-decoration: none;
}
.search-intent-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.search-intent-card {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.search-intent-card h3 {
  font-size: 0.9875rem;
  line-height: 1.6;
  color: var(--ink-strong);
}
.search-intent-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--ink-muted);
}
@media (max-width: 920px) {
  .article-fast-answer {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .article-fast-answer-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .article-fast-answer-card em {
    grid-column: auto;
  }
}
.search-intent-card a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 40px;
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--brand-strong);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}
.article-quick-buy {
  padding: var(--s5);
  background: linear-gradient(180deg, rgb(255 251 244 / 95%), rgb(255 255 255 / 100%));
  border: 1px solid rgb(207 168 96 / 35%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.article-quick-buy > h2 {
  padding-bottom: var(--s3);
  border-bottom: 2px solid rgb(207 168 96 / 35%);
}
.article-quick-buy > h2::after { background: #c08b2b; }
.quick-buy-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.quick-buy-card {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.quick-buy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 0.75rem;
}
.quick-buy-head > span {
  padding: 2px var(--s2);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 700;
}
.quick-buy-head > b {
  color: var(--ink-faint);
  font-weight: 700;
}
.quick-buy-card h3 {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-strong);
}
.quick-buy-product-figure {
  margin: 0;
  padding: var(--s3);
  background: linear-gradient(180deg, rgb(247 252 255 / 100%), rgb(255 255 255 / 100%));
  border: 1px solid rgb(204 224 233 / 0.9);
  border-radius: var(--r-md);
}
.quick-buy-product-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.quick-buy-card > p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.8;
}
.quick-buy-card dl {
  display: grid;
  gap: var(--s2);
  margin: 0;
}
.quick-buy-card dl > div {
  display: grid;
  gap: 2px;
  padding-top: var(--s2);
  border-top: 1px dashed var(--line);
}
.quick-buy-card dt {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}
.quick-buy-card dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-strong);
}
.quick-buy-actions {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s2);
}
.quick-buy-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.quick-buy-actions a:first-child {
  border: 1px solid var(--line-strong);
  color: var(--ink-strong);
  background: var(--surface-sunken);
}
.quick-buy-actions a:first-child:hover { background: var(--surface); }
.quick-buy-store {
  color: var(--ink-inverse);
  background: var(--brand);
}
.quick-buy-store:hover {
  color: var(--ink-inverse);
  background: var(--brand-strong);
}
/* 販売先ごとの色。同じ赤だとどちらの店のボタンか判別できないため分ける。 */
.quick-buy-store.store-rakuten {
  background: var(--store-rakuten);
  color: var(--store-rakuten-ink) !important;
}
.quick-buy-store.store-rakuten:hover { background: var(--store-rakuten-strong); }
.quick-buy-store.store-amazon {
  background: var(--store-amazon);
  color: var(--store-amazon-ink) !important;
}
.quick-buy-store.store-amazon:hover { background: var(--store-amazon-strong); }

.verdict-list {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: 0;
  list-style: none;
}
.verdict-list li {
  display: grid;
  /* 1列目=商品写真、2列目=向いている人と商品名。写真を追加したので
     列を明示する。auto 1fr のままだと写真が既存の列を押し出して、
     選び方の見出しが18pxまで潰れたのと同じことが起きる。 */
  grid-template-columns: 72px 1fr;
  gap: var(--s2) var(--s3);
  align-items: start;
  margin: 0;
  padding: var(--s3) 0 0;
  border-top: 1px dashed var(--line);
  font-size: 0.9375rem;
}
.verdict-list li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 639px) {
  .verdict-list li { grid-template-columns: 1fr; }
}
.verdict-list dfn {
  justify-self: start;
  padding: 2px var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.verdict-list b { color: var(--brand-strong); }
.verdict-list a { font-weight: 700; }

/* --- 目次 --- */
.article-toc {
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.article-toc > b {
  display: block;
  margin-bottom: var(--s3);
  font-size: 0.9375rem;
}
.article-toc ol { margin: 0; padding-left: 0; list-style: none; counter-reset: toc; }
.article-toc li {
  counter-increment: toc;
  margin: 0;
  border-bottom: 1px dashed var(--line);
}
.article-toc li:last-child { border-bottom: 0; }
/* 目次はリンク色ではなく黒。数字バッジと矢印でリンクだと分かる */
.article-toc a {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) 0;
  font-size: 0.9375rem;
  color: var(--ink-strong);
  text-decoration: none;
}
.article-toc a::before {
  content: counter(toc);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
}
.article-toc a::after { content: "›"; margin-left: auto; color: var(--ink-faint); }
.article-toc a:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 0.2em; }

@media (min-width: 1100px) {
  .article-toc-rail { position: sticky; top: 96px; }
  .article-toc-rail .article-toc { margin-top: var(--s5); padding-inline: var(--s4); }
  /* レールは幅が限られるので、行末の矢印を省いて見出しの文字幅を稼ぐ。
     リンクであることは左の数字バッジで示す。 */
  .article-toc-rail .article-toc a::after { content: none; }
  /* デスクトップは右レールに出すので本文中のインライン目次は隠す */
  .article-body > .article-toc { display: none; }
}
@media (max-width: 1099px) {
  .article-toc-rail { display: none; }
}

/* --- セクション --- */
.article-section { margin-top: var(--s8); }
.article-section > h2 {
  padding-bottom: var(--s3);
  font-size: clamp(1.3rem, 4vw, 1.625rem);
  color: var(--ink-strong);
  border-bottom: 2px solid var(--line);
  position: relative;
}
.article-section > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 4em;
  height: 2px;
  background: var(--ink-strong);
}
.section-intro {
  margin-top: var(--s4);
  max-width: var(--w-prose);
  line-height: 1.95;
}

/* --- 選び方（チェックポイント） --- */
.check-list { display: grid; gap: var(--s5); margin-top: var(--s5); }
.check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3) var(--s4);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.check-item:last-child { border-bottom: 0; padding-bottom: 0; }
.check-item > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.check-item > h3 {
  align-self: center;
  font-size: 1.125rem;
  color: var(--ink-strong);
}
.check-item > p {
  grid-column: 2;
  max-width: var(--w-prose);
  line-height: 1.95;
}
/* 実例写真は本文と同じ列に置く。グリッドは「auto 1fr」の2列で、
   figure を自動配置に任せると1列目（auto）へ入り、見出しの幅が
   18pxまで潰れて縦書きのように1文字ずつ折り返していた。 */
.check-item > figure { grid-column: 2; }
@media (max-width: 519px) {
  .check-item > figure { grid-column: 1 / -1; }
}
/* 519px。同じ520pxを min と max の両方で使うと520pxちょうどで両方が真になるため、
   max 側は1px下げる。 */
@media (max-width: 519px) {
  .check-item > p { grid-column: 1 / -1; }
}

/* --- 商品のセールスポイント（チェックリスト） --- */
.product-sales-points {
  display: grid;
  gap: var(--s1);
  margin-top: var(--s3);
  padding: 0;
  list-style: none;
}
.product-sales-points li {
  position: relative;
  margin: 0;
  padding-left: 1.5em;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--ink);
}
.product-sales-points li::before {
  content: "✓";
  position: absolute;
  left: 0.2em;
  color: var(--brand);
  font-weight: 700;
}

/* --- 電気代の比較図（横棒チャート） --- */
.power-chart {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  max-width: var(--w-content);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.power-row { display: grid; gap: var(--s1); }
.power-row > a { font-size: 0.875rem; font-weight: 700; }
.power-row small { font-size: 0.75rem; color: var(--ink-muted); }
.power-bar-track {
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.power-bar {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding-inline: var(--s3);
  background: #39424e;
  border-radius: var(--r-sm);
}
.power-bar b {
  font-size: 0.8125rem;
  color: var(--ink-inverse);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
}
/* 電気代は差を読む図なので、赤/緑の善悪表現ではなく単色＋数値で公平に見せる。 */
.power-row:first-of-type .power-bar { background: var(--accent-good); }

/* --- 購入前に知っておくといい情報（解説パート） --- */
.knowledge-list { margin-top: var(--s5); max-width: var(--w-prose); }
.knowledge-topic { margin-top: var(--s6); }
.knowledge-topic:first-child { margin-top: 0; }
.knowledge-topic > h3 {
  padding-left: 0.6em;
  border-left: 4px solid var(--brand);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-strong);
}
.knowledge-topic > p { margin-top: var(--s3); line-height: 1.95; }
.knowledge-topic > ul {
  margin-top: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  list-style: none;
}
.knowledge-topic > ul li {
  position: relative;
  margin: 0;
  padding-left: 1.4em;
  font-size: 0.9375rem;
  line-height: 1.9;
}
.knowledge-topic > ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}

.knowledge-image {
  margin-top: var(--s3);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.knowledge-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* --- あわせて読みたい（本文中の関連記事カード） --- */
.related-inline {
  margin-top: var(--s7);
  padding: var(--s4) var(--s5) var(--s5);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-width: var(--w-content);
}
.related-inline > b {
  display: inline-block;
  padding: 2px var(--s3);
  background: var(--brand);
  color: var(--ink-inverse);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
}
.related-inline > div {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.related-inline a {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
}
.related-inline a:hover { border-color: var(--brand); text-decoration: none; }
.related-inline img {
  width: 96px;
  height: 72px;
  object-fit: contain;
  background: var(--surface);
  border-radius: 4px;
}
.related-inline small { display: block; font-size: 0.6875rem; color: var(--brand); font-weight: 700; }
.related-inline strong { display: block; font-size: 0.875rem; line-height: 1.6; color: var(--ink-strong); }
.related-inline em { display: block; margin-top: 2px; font-size: 0.75rem; font-style: normal; color: var(--link); font-weight: 700; }

/* --- 掲載メーカーの特徴 --- */
.maker-list { margin-top: var(--s5); max-width: var(--w-prose); }
.maker-item { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px dashed var(--line); }
.maker-item:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.maker-item > h3 {
  padding-left: 0.6em;
  border-left: 4px solid var(--ink-strong);
  font-size: 1.0625rem;
  color: var(--ink-strong);
}
.maker-item > p { margin-top: var(--s3); line-height: 1.95; }

/* --- 編集部からのワンポイント --- */
.editorial-onepoint {
  margin-top: var(--s5);
  max-width: var(--w-content);
  padding: var(--s5);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-md);
  position: relative;
}
.editorial-onepoint > b {
  display: inline-block;
  padding: 2px var(--s3);
  background: var(--brand);
  color: var(--ink-inverse);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
}
.editorial-onepoint > p {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  line-height: 1.95;
}

/* --- 並び替え・絞り込み --- */
.product-controls {
  margin-top: var(--s5);
  max-width: var(--w-content);
  padding: var(--s4);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.product-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
}
.product-controls-row:first-child { margin-top: 0; }
.product-controls-row > span {
  min-width: 4.5em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-muted);
}
.product-controls-row button {
  cursor: pointer;
  min-height: 38px;
  padding: var(--s1) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  color: var(--ink);
}
.product-controls-row button:hover { border-color: var(--brand); }
.product-controls-row button.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink-inverse);
  font-weight: 700;
}
.product-controls-note { margin-top: var(--s3); font-size: 0.75rem; color: var(--ink-faint); }
.product-controls-status {
  margin-top: var(--s2);
  min-height: 1.5em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.product-controls-row[aria-label="比較の基準"] button.active {
  background: linear-gradient(135deg, #0f6fb5, #1f9bd1);
  border-color: #0f6fb5;
}

/* 並び替え後もキーボード順・読み上げ順と画面の順番が一致するよう、
   DOMを並べ替える。flexは余白管理だけに使う。 */
.article-products { display: flex; flex-direction: column; }

/* --- 比較表（スペック・違い共通） --- */
.table-scroll {
  margin-top: var(--s5);
  max-width: var(--w-content);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.7;
}
.table-scroll th,
.table-scroll td {
  padding: var(--s3) var(--s4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.table-scroll th:last-child, .table-scroll td:last-child { border-right: 0; }
.table-scroll tbody tr:last-child th,
.table-scroll tbody tr:last-child td { border-bottom: 0; }
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-navy);
  color: var(--ink-inverse);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
/* 行頭（比較ポイント／商品名）は横スクロール中も残す */
.table-scroll tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 8.5em;
  background: var(--surface-sunken);
  font-weight: 700;
  color: var(--ink-strong);
}
.table-scroll tbody tr:nth-child(even) td { background: var(--surface-sunken); }
.table-scroll td { min-width: 9em; }
.table-scroll .is-best {
  color: var(--accent-good);
  font-weight: 700;
}
.table-scroll .cell-price { white-space: nowrap; font-family: var(--font-num);
  font-variant-numeric: tabular-nums; }
.table-scroll a { font-weight: 700; }

/* 比較表の購入セル（マイベスト型: 表から直接ストアへ） */
.table-scroll .cell-buy { min-width: 10em; }
.table-scroll .cell-buy b { display: block; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.table-store-line {
  display: grid;
  gap: 6px;
  padding: 10px 0;
}
.table-store-line + .table-store-line {
  border-top: 1px dashed var(--line);
}
.table-store-best {
  display: block;
  margin-top: 8px;
  color: var(--accent-good);
  font-size: 0.75rem;
  font-weight: 700;
}
.table-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--s1);
  min-height: 34px;
  padding: 0 var(--s3);
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--ink-inverse) !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.table-buy-btn.store-rakuten { background: var(--store-rakuten); color: var(--store-rakuten-ink) !important; }
.table-buy-btn.store-amazon { background: var(--store-amazon); color: var(--store-amazon-ink) !important; }
.table-buy-btn.store-rakuten:hover { background: var(--store-rakuten-strong); }
.table-buy-btn.store-amazon:hover { background: var(--store-amazon-strong); }
.table-buy-btn.cta-best {
  border-color: rgb(255 255 255 / 0.88);
  box-shadow: 0 2px 10px rgb(200 16 46 / 24%);
}
.table-buy-btn:hover { opacity: 0.9; text-decoration: none; }

.table-hint {
  margin-top: var(--s2);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* --- 販売先の切り替え（総合／楽天／Amazon） ---
   比較表の購入セルは3通りをサーバーで描画しておき、選択中の販売先だけを出す。
   切替のたびにJSでアフィリエイトURLを組み立て直さないための作り。 */
.cell-store-rakuten,
.cell-store-amazon { display: none; }
.compare-table[data-store="rakuten"] .cell-store-all,
.compare-table[data-store="amazon"] .cell-store-all { display: none; }
.compare-table[data-store="rakuten"] .cell-store-rakuten,
.compare-table[data-store="amazon"] .cell-store-amazon { display: block; }
.cell-store-none { color: var(--ink-faint); font-weight: 400; }
/* その販売先に掲載が無い商品。消さずに末尾へ回し、順位だけ外す。 */
.product-entry.is-store-unavailable { opacity: 0.72; }
.product-entry.is-store-unavailable .product-rank {
  background: var(--surface-sunken);
  color: var(--ink-faint);
}
.compare-table tbody tr.is-store-unavailable th,
.compare-table tbody tr.is-store-unavailable td { color: var(--ink-muted); }
@media (min-width: 768px) { /* 比較表の購入セル（マイベスト型: 表から直接ストアへ） */
.table-scroll .cell-buy { min-width: 10em; }
.table-scroll .cell-buy b { display: block; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.table-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--s1);
  min-height: 34px;
  padding: 0 var(--s3);
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--ink-inverse) !important;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.table-buy-btn.store-rakuten { background: var(--store-rakuten); color: var(--store-rakuten-ink) !important; }
.table-buy-btn.store-amazon { background: var(--store-amazon); color: var(--store-amazon-ink) !important; }
.table-buy-btn.store-rakuten:hover { background: var(--store-rakuten-strong); }
.table-buy-btn.store-amazon:hover { background: var(--store-amazon-strong); }
.table-buy-btn.cta-best {
  border-color: rgb(255 255 255 / 0.88);
  box-shadow: 0 2px 10px rgb(200 16 46 / 24%);
}
.table-buy-btn:hover { opacity: 0.9; text-decoration: none; }

.table-hint { display: none; } }

/* --- 価格の目安 --- */
.price-summary {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: var(--w-content);
}
.price-stat {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.price-stat small {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.price-stat strong {
  display: block;
  margin-top: var(--s1);
  font-size: 1.375rem;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}
.price-stat span {
  display: block;
  margin-top: var(--s1);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   10. 商品エントリー
   BicCamera型の「見出し＋おすすめポイント＋本文」を基本形にし、
   スペック・価格・購入導線を下に積む。1件あたりの高さを旧デザインの
   約1,000pxから半分程度に抑える。
   -------------------------------------------------------------------------- */
.product-group { margin-top: var(--s7); }
.product-group > h3 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-sunken);
  border-left: 4px solid var(--ink-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 1.0625rem;
}
.product-group > h3 small {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.product-entry {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
  scroll-margin-top: 88px;
}
.product-entry:first-of-type { border-top: 0; }

.product-entry-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
}
.product-rank {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--surface-navy);
  color: var(--ink-inverse);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
.product-rank.rank-1 { background: #b8860b; }
.product-rank.rank-2 { background: #6b7a8a; }
.product-rank.rank-3 { background: #a0663a; }
.product-entry-head h3 {
  margin: 0;
  font-size: clamp(1.0625rem, 3.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-strong);
}
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}
.product-tags span,
.product-tags b {
  padding: 1px var(--s2);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.product-tags b {
  font-weight: 700;
  background: var(--accent-good-soft);
  border-color: transparent;
  color: var(--accent-good);
}

.product-entry-main {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .product-entry-main { grid-template-columns: 220px minmax(0, 1fr); }
}

.product-figure {
  display: grid;
  /* 暗黙行autoだとimgのmax-height:100%が解決できず画像がはみ出すため、行を明示する */
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  place-items: center;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-figure img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.product-pitch {
  padding: var(--s3) var(--s4);
  background: var(--brand-soft);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  line-height: 1.85;
}
.product-pitch b { color: var(--brand-strong); }

.product-note {
  margin-top: var(--s4);
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--ink-muted);
}

.product-specs-inline {
  display: grid;
  gap: 0;
  margin-top: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 0.875rem;
}
.product-specs-inline > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  border-bottom: 1px solid var(--line);
}
.product-specs-inline > div:last-child { border-bottom: 0; }
.product-specs-inline dt {
  padding: var(--s2) var(--s3);
  background: var(--surface-sunken);
  font-weight: 700;
  color: var(--ink-strong);
}
.product-specs-inline dd { margin: 0; padding: var(--s2) var(--s3); background: var(--surface); }
.product-specs-inline:empty { display: none; }

.product-detail-toggle { margin-top: var(--s3); }
.product-detail-toggle > summary {
  cursor: pointer;
  padding: var(--s2) 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--link);
}
.product-detail-toggle[open] > summary { margin-bottom: var(--s2); }

.product-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s4);
  font-size: 0.875rem;
}

/* --- 寸法図・設置イメージ --- */
/*
   2026-09-09: 開閉式にした。
   それまでは max-height: 420px + object-fit: contain で常時表示していたが、
   販売ページの寸法図は 1000×2384 のような縦長が多く、450px幅の枠に
   contain で収めると 176×420 の細い帯になって図の文字が読めなかった。
   （エアコン記事では4枚がこの状態だった。）
   サイトが既に使っている「詳しい仕様を見る」と同じ開閉の作りに寄せ、
   開いたときは幅いっぱいで、縦は画面の高さまで伸ばして読めるようにする。
*/
.product-size-figure {
  margin-top: var(--s4);
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.product-size-figure > summary {
  padding: var(--s3);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.product-size-figure > summary::-webkit-details-marker { display: none; }
.product-size-figure > summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--ink-muted);
  font-weight: 400;
}
.product-size-figure[open] > summary::after { content: "−"; }
.product-size-figure > summary:hover { background: var(--surface-2, rgba(0, 0, 0, 0.03)); }
.product-size-figure > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.product-size-figure .product-size-body { padding: 0 var(--s3) var(--s3); }
.product-size-figure img {
  width: 100%;
  height: auto;
  max-height: min(80vh, 900px);
  object-fit: contain;
  border-radius: var(--r-sm);
}
.product-size-figure .product-size-caption {
  margin-top: var(--s2);
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* --- 購入ボックス --- */
.buy-box {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}
.buy-box-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.buy-box-head span {
  padding: 0 var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-faint);
}
.buy-box-head b { font-weight: 700; color: var(--ink); }

.price-compare {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: var(--s3);
}
.price-compare > span {
  padding: var(--s2) var(--s3);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.price-compare > span.is-best {
  background: var(--accent-good-soft);
  border-color: var(--accent-good);
  color: var(--accent-good);
  font-weight: 700;
}

.store-actions { display: grid; gap: var(--s2); }
@media (min-width: 520px) { .store-actions { grid-template-columns: 1fr 1fr; } }
.store-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 50px;
  padding: var(--s3) var(--s4);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--ink-inverse);
  background: var(--surface-navy);
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.store-actions a:hover { opacity: 0.9; text-decoration: none; }
.store-actions a.store-rakuten { background: var(--store-rakuten); color: var(--store-rakuten-ink) !important; }
.store-actions a.store-amazon { background: var(--store-amazon); color: var(--store-amazon-ink) !important; }
/* 最安側でも店舗色は残し、枠と影で優先度だけを上げる */
.store-actions a.cta-best {
  border-color: rgb(255 255 255 / 0.88);
  box-shadow: 0 2px 8px rgb(200 16 46 / 35%);
}
.store-actions a.cta-best:hover { opacity: 1; }
.best-price-flag {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  padding: 1px var(--s2);
  border-radius: 3px;
  background: rgb(255 255 255 / 22%);
  font-size: 0.6875rem;
  font-weight: 700;
}

.store-link-text-compact { display: none; }
@media (max-width: 380px) {
  .store-actions .store-link-text-full { display: none; }
  .store-actions .store-link-text-compact { display: inline; }
}

.buy-box-meta {
  margin-top: var(--s3);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

.strength-stars {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f8fbfe, #eef5fb);
  border: 1px solid #d8e8f4;
  border-radius: var(--r-md);
}
.strength-star-row {
  display: grid;
  gap: 4px;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
}
.strength-star-row dt {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-muted);
}
.strength-star-row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.strength-star-icons {
  color: #e6a817;
  letter-spacing: 1px;
  font-size: 0.95rem;
}
.strength-star-meta {
  font-size: 0.8125rem;
  color: var(--ink-strong);
}
@media (max-width: 520px) {
  .strength-star-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq-list { margin-top: var(--s5); max-width: var(--w-content); }
.faq-list > details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--s3);
}
.faq-list > details > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
  padding: var(--s4);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-strong);
  list-style: none;
}
.faq-list > details > summary::-webkit-details-marker { display: none; }
.faq-list > details > summary::before {
  content: "Q";
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.75rem;
}
.faq-list > details > summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--ink-faint);
  font-weight: 400;
}
.faq-list > details[open] > summary::after { content: "－"; }
.faq-list > details > p {
  margin: 0;
  padding: 0 var(--s4) var(--s4) calc(var(--s4) + 22px + var(--s3));
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   12. 注意書き・出典
   -------------------------------------------------------------------------- */
.callout {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--accent-warm-soft);
  border-left: 4px solid var(--accent-warm);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.875rem;
  line-height: 1.85;
}
.callout b { color: var(--accent-warm); }

.installation-note {
  margin-top: var(--s4);
  padding: var(--s4);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--ink-muted);
}
.installation-note b { color: var(--ink-strong); }

/* --------------------------------------------------------------------------
   13. 関連リンク
   -------------------------------------------------------------------------- */
.related-block { margin-top: var(--s7); }
.related-block > h2 {
  padding-bottom: var(--s3);
  font-size: 1.25rem;
  border-bottom: 2px solid var(--line);
}
.related-links {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s3);
  margin-top: var(--s4);
}
.related-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 56px;
  min-width: 0;
  flex: 1 1 min(190px, 100%);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  text-wrap: balance;
  text-wrap: pretty;
  line-height: 1.45;
}
.related-links a::after { content: "→"; margin-left: auto; color: var(--link); }
.related-links a:hover { border-color: var(--brand); background: var(--brand-soft); text-decoration: none; }

/* --------------------------------------------------------------------------
   14. モバイル固定バー
   -------------------------------------------------------------------------- */
/* 販売先の切り替えに合わせて、固定バーもその店舗の1位に差し替える。
   3通りをサーバーで描画し、表示の出し分けだけをCSSで行う。 */
.buybar-variant { display: none; align-items: center; gap: var(--s3); width: 100%; }
.article-mobile-buybar[data-store="all"] .buybar-all,
.article-mobile-buybar[data-store="rakuten"] .buybar-rakuten,
.article-mobile-buybar[data-store="amazon"] .buybar-amazon { display: flex; }
.article-mobile-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s4);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 28px rgb(15 23 42 / 9%);
}
/* 固定購入バーを隠すのは、右レールの追従CTA（.rail-pick）が出る1100px以上から。
   768pxで隠すと 768〜1099px の記事ページに追従する購入導線が1つも無くなる
   （実測: 900px でモバイルバー・目次レール・rail-pick すべて非表示）。 */
@media (min-width: 1100px) { .article-mobile-buybar { display: none; } }
/* PR表記と価格を縦に積むと、狭い画面で3行になりバーが150px近くまで伸びていた。
   横1行に並べて高さを抑える。PR表記は法令上必要なので消さず、位置だけ整える。 */
.article-mobile-buybar span {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
}
.article-mobile-buybar small {
  flex: none;
  padding: 0 4px;
  border: 1px solid rgb(31 41 55 / 26%);
  border-radius: var(--r-sm);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.article-mobile-buybar b { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-mobile-buybar a {
  margin-left: auto;
  flex: none;
  min-height: 38px;
  padding: 0 var(--s4);
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.8125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 8px 18px rgb(15 23 42 / 10%);
}
/* 固定バーの購入ボタンもストア公式色で区別する */
.article-mobile-buybar a.store-cta-rakuten { background: var(--store-rakuten); color: var(--store-rakuten-ink); }
.article-mobile-buybar a.store-cta-amazon { background: var(--store-amazon); color: var(--store-amazon-ink); }
/* 固定バーの分だけ本文末尾に余白を足す */
/* 固定バーが出ている幅では、本文末尾がバーに隠れないよう余白を足す */
@media (max-width: 1099px) { .article-page { padding-bottom: 96px; } }

.site-back-to-top {
  position: fixed;
  right: var(--s4);
  bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  pointer-events: none;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  background: rgb(255 255 255 / 92%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.site-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.site-back-to-top:hover { text-decoration: none; background: var(--surface); }
@media (max-width: 1099px) {
  .site-back-to-top {
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 95;
  }
}
@media (min-width: 1100px) { .site-back-to-top { bottom: var(--s5); } }

/* --------------------------------------------------------------------------
   15. フッター
   -------------------------------------------------------------------------- */
body > footer,
.article-page > footer,
main > footer {
  margin-top: var(--s9);
  padding: var(--s7) var(--s4);
  background: var(--surface-navy);
  color: rgb(255 255 255 / 85%);
}
main > footer .logo { color: var(--ink-inverse); }
main > footer p {
  max-width: var(--w-prose);
  margin-top: var(--s3);
  font-size: 0.875rem;
  line-height: 1.85;
}
/* フッターナビは行間だけで並んでいたためタップ領域が27pxしかなく、
   指で押し分けられなかった。1件ずつ44pxの高さを確保する。 */
body > footer nav,
.article-page > footer nav,
main > footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s5);
  margin-top: var(--s5);
}
body > footer nav a,
.article-page > footer nav a,
main > footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-inverse);
  font-size: 0.875rem;
  text-decoration: none;
}
body > footer nav a:hover,
.article-page > footer nav a:hover,
main > footer nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid rgb(255 255 255 / 15%);
  font-size: 0.8125rem;
}
.footer-meta a { color: var(--ink-inverse); text-decoration: underline; }

/* 結論の3台に添える商品写真 */
.verdict-thumb {
  grid-row: 1 / span 2;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}
.verdict-thumb img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 519px) {
  .verdict-list li { grid-template-columns: 56px 1fr; }
  .verdict-thumb { width: 56px; height: 56px; }
}

/* --------------------------------------------------------------------------
   16. アクションカメラ記事の専用レイアウト
   -------------------------------------------------------------------------- */
.article-page-action-camera .article-rail {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}
.article-page-action-camera .aside-box {
  border: 1px solid rgb(177 204 217 / 0.85);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.92);
  padding: 18px;
  box-shadow: 0 18px 40px rgb(18 33 58 / 6%);
}
.article-page-action-camera .aside-box h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}
.article-page-action-camera .aside-box > a {
  display: block;
  padding: 10px 0;
  line-height: 1.7;
  color: var(--ink-strong);
  border-bottom: 1px dashed var(--line);
  text-decoration: none;
}
.article-page-action-camera .aside-box > a:last-of-type {
  border-bottom: 0;
}
.article-page-action-camera .aside-box.alert ol {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.9;
}
.article-page-action-camera .decision-grid,
.article-page-action-camera .action-camera-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.article-page-action-camera .decision-card,
.article-page-action-camera .check-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 18px 40px rgb(18 33 58 / 6%);
}
.article-page-action-camera .decision-card b,
.article-page-action-camera .check-card b {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.article-page-action-camera .decision-card h3,
.article-page-action-camera .check-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.55;
}
.article-page-action-camera .decision-card p,
.article-page-action-camera .check-card p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.85;
}
.article-page-action-camera .warning,
.article-page-action-camera .scope-note {
  margin-top: 16px;
  border-radius: 16px;
  background: #fff8ea;
  border: 1px solid #f6dfb6;
  padding: 16px 18px;
  line-height: 1.8;
}
.article-page-action-camera .scope-note a {
  color: var(--brand);
  font-weight: 700;
}
.article-page-action-camera .compare-table-action-camera {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.article-page-action-camera .compare-table-action-camera th,
.article-page-action-camera .compare-table-action-camera td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.article-page-action-camera .compare-table-action-camera th {
  background: #f7f7f8;
  text-align: left;
  font-size: 0.875rem;
  white-space: nowrap;
}
.article-page-action-camera .compare-table-action-camera tr:last-child td {
  border-bottom: 0;
}
.article-page-action-camera .compare-table-action-camera th:first-child,
.article-page-action-camera .compare-table-action-camera td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  min-width: 280px;
}
.article-page-action-camera .compare-table-action-camera th:first-child {
  z-index: 3;
  background: #f7f7f8;
}
.article-page-action-camera .compare-table-compact {
  min-width: 0;
}
.article-page-action-camera .compare-table-compact th:first-child,
.article-page-action-camera .compare-table-compact td:first-child {
  position: static;
  min-width: 180px;
}
.article-page-action-camera .compare-table-compact .choice {
  font-weight: 700;
  color: var(--ink-strong);
}
.article-page-action-camera .prod-cell {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: center;
}
.article-page-action-camera .prod-cell img {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}
.article-page-action-camera .prod-cell .rank {
  color: var(--brand);
  font-size: 0.75rem;
}
.article-page-action-camera .buy-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 700;
}
.article-page-action-camera .cards {
  display: grid;
  gap: 16px;
}
.article-page-action-camera .card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 20px 48px rgb(18 33 58 / 8%);
}
.article-page-action-camera .card-media {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7fafc 0%, #eef4f7 100%);
  min-height: 220px;
}
.article-page-action-camera .card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.article-page-action-camera .card-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.article-page-action-camera .card-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
}
.article-page-action-camera .num {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
}
.article-page-action-camera .card-title small {
  display: block;
  margin-bottom: 6px;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.article-page-action-camera .card-title h3 {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.45;
}
.article-page-action-camera .best,
.article-page-action-camera .rail-price .best {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff3d9;
  color: #8b5a00;
  font-size: 0.75rem;
  font-weight: 800;
}
.article-page-action-camera .verdict {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
}
.article-page-action-camera .goodbad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.article-page-action-camera .goodbad > div {
  border-radius: 16px;
  background: #f7fafc;
  padding: 14px 16px;
  line-height: 1.8;
}
.article-page-action-camera .goodbad b {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--ink-strong);
}
.article-page-action-camera .specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.article-page-action-camera .specs span,
.article-page-action-camera .rail-specs span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f6f6f7;
  font-size: 0.8125rem;
  font-weight: 700;
}
.article-page-action-camera .shops,
.article-page-action-camera .rail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.article-page-action-camera .shops a,
.article-page-action-camera .rail-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
}
.article-page-action-camera .shops .amazon,
.article-page-action-camera .rail-actions .amazon {
  background: #ff9900;
  color: #111;
}
.article-page-action-camera .shops .rakuten,
.article-page-action-camera .rail-actions .rakuten {
  background: #bf0000;
  color: #fff;
}
.article-page-action-camera .shops .detail,
.article-page-action-camera .rail-detail {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-strong);
}
.article-page-action-camera .pr {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.75;
}
.article-page-action-camera .rail-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.article-page-action-camera .rail-product-thumb {
  margin: 12px 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7fafc 0%, #eef4f7 100%);
}
.article-page-action-camera .rail-product-thumb img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}
.article-page-action-camera .rail-product-title {
  margin: 0 0 8px;
  font-weight: 800;
  line-height: 1.6;
}
.article-page-action-camera .rail-product-copy,
.article-page-action-camera .rail-price,
.article-page-action-camera .toc-note {
  color: var(--ink-muted);
  line-height: 1.75;
}
.article-page-action-camera .rail-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
@media (max-width: 1099px) {
  .article-page-action-camera .article-rail {
    display: none;
  }
  .article-page-action-camera .decision-grid,
  .article-page-action-camera .action-camera-check-grid,
  .article-page-action-camera .goodbad,
  .article-page-action-camera .card {
    grid-template-columns: 1fr;
  }
  .article-page-action-camera .card-media {
    min-height: 180px;
  }
}
/* ==========================================================================
   ページ固有レイアウト 2026
   --------------------------------------------------------------------------
   ui.css のトークンとコンポーネントを前提に、トップ・ハブ・記事一覧・ガイド・
   商品詳細・固定ページのレイアウトだけを書く。色や角丸を直接書かず、
   必ず ui.css のカスタムプロパティを参照する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 共通：ページシェルとセクション
   -------------------------------------------------------------------------- */
.gateway-page,
.summer-hub-page,
.winter-hub-page,
.heatstroke-page,
.article-library-page,
.service-guide-page,
.intent-guide-page,
.product-detail-page,
.product-hub-page,
.room-aircon-page,
.about-page,
.blog-homepage {
  width: min(100% - 2 * var(--s4), var(--w-page));
  margin-inline: auto;
  padding-bottom: var(--s8);
}
@media (min-width: 768px) {
  .gateway-page,
  .summer-hub-page,
.winter-hub-page,
  .heatstroke-page,
  .article-library-page,
  .service-guide-page,
  .intent-guide-page,
  .product-detail-page,
  .product-hub-page,
  .room-aircon-page,
  .about-page,
  .blog-homepage { width: min(100% - 2 * var(--s6), var(--w-page)); }
}

.gateway-page {
  --content-max: 990px;
  --space-heading-body: 24px;
}

.gateway-page > section {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

/* 旧デザインの記事内ヘッダー・広告バーはグローバルヘッダーと二重になっていた */
.ad-bar,
.article-header,
.article-category-nav,
.blog-homepage .site-header { display: none; }

/* セクションの垂直リズムを1か所で決める */
.gateway-page > section,
.summer-hub-page,
.winter-hub-page section,
.heatstroke-page section,
.article-library-page section,
.service-guide-page section,
.intent-guide-page section,
.product-detail-page section,
.product-hub-page section,
.room-aircon-page section,
.about-page section {
  margin-top: var(--s8);
  scroll-margin-top: 88px;
}

/* 見出しの既定形 */
.gateway-page h2,
.summer-hub-page,
.winter-hub-page h2,
.heatstroke-page h2,
.article-library-page h2,
.service-guide-page h2,
.intent-guide-page h2,
.product-detail-page h2,
.product-hub-page h2,
.room-aircon-page h2,
.about-page h2 {
  font-size: clamp(1.3rem, 4vw, 1.625rem);
  line-height: 1.45;
  color: var(--ink-strong);
}
.gateway-page h3,
.summer-hub-page,
.winter-hub-page h3,
.heatstroke-page h3,
.article-library-page h3,
.service-guide-page h3,
.intent-guide-page h3,
.product-detail-page h3,
.product-hub-page h3,
.room-aircon-page h3,
.about-page h3 { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-strong); }

/* --------------------------------------------------------------------------
   1.5 商品一覧ハブ（/products）
   -------------------------------------------------------------------------- */
.product-hub-hero {
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.product-hub-hero h1 {
  font-size: clamp(1.8rem, 5.2vw, 2.3rem);
  line-height: 1.45;
}
.product-hub-hero p {
  margin-top: var(--s4);
  max-width: var(--w-prose);
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--ink-muted);
}
.product-hub-hero small {
  display: inline-block;
  margin-top: var(--s4);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.product-hub-anchor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s6);
}
.product-hub-anchor a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s3);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
}
.product-hub-anchor a:hover { border-color: var(--brand); color: var(--brand-strong); }

.product-hub-category {
  margin-top: var(--s7);
}
.product-hub-category > h2 > small {
  display: block;
  margin-top: var(--s1);
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.product-hub-product-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.product-hub-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.product-hub-card-link {
  color: var(--ink);
  text-decoration: none;
}
.product-hub-card-image {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: var(--s3);
}
.product-hub-card-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.product-hub-card-copy {
  display: grid;
  gap: var(--s2);
  padding: var(--s4);
}
.product-hub-card-copy > small {
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.product-hub-card-copy > p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-muted);
}
.product-hub-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.product-hub-card-links { display: grid; gap: var(--s1); margin-top: var(--s1); }
.product-hub-card-copy .store-tag {
  width: fit-content;
  padding: 3px var(--s2);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.6875rem;
  white-space: nowrap;
}
.product-hub-card-actions {
  display: grid;
  gap: var(--s2);
  padding: 0 var(--s4) var(--s4);
  margin-top: auto;
}
.product-hub-card-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--s3);
  border-radius: var(--r-md);
  color: var(--ink-inverse);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.product-hub-card-actions a.store-rakuten { background: #bf0000; }
.product-hub-card-actions a.store-amazon { background: #232f3e; }

.product-hub-note {
  margin-top: var(--s7);
  padding: var(--s5);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.product-hub-note ul {
  padding-left: 1.1rem;
  margin: var(--s4) 0 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.product-hub-note li + li { margin-top: var(--s2); }
.product-hub-note small {
  display: block;
  margin-top: var(--s4);
  color: var(--ink-faint);
  font-size: 0.75rem;
}

.eyebrow {
  display: block;
  margin-bottom: var(--s2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
}

/* セクション見出しブロック（見出し＋説明文）の共通形 */
.gateway-section-heading,
.gateway-start-heading,
.section-heading,
.summer-category-section > header,
.summer-purpose > div:first-child,
.home-faq > div:first-child,
.library-browser > header,
.library-heatstroke-feature > header,
.library-heatstroke-products > header {
  display: grid;
  gap: var(--s3);
  width: 100%;
  max-width: var(--content-max);
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--line);
  position: relative;
  margin-bottom: var(--space-heading-body);
}
.gateway-section-heading::after,
.gateway-start-heading::after,
.section-heading::after,
.summer-category-section > header::after,
.summer-purpose > div:first-child::after,
.home-faq > div:first-child::after,
.library-browser > header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 4em;
  height: 2px;
  background: var(--ink-strong);
}
.gateway-section-heading > p:last-child,
.gateway-start-heading > p:last-child,
.summer-category-section > header > p:last-child {
  max-width: var(--w-prose);
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.gateway-section-heading > p,
.gateway-start-heading > p,
.summer-category-section > header > p,
.home-faq > div:first-child > p {
  text-wrap: pretty;
  max-width: 62ch;
}
.home-hero .gateway-hero-lead,
.home-hero p.lede,
.gateway-page > .home-directory,
.gateway-page > .gateway-purpose,
.gateway-page > .home-aircon-sizes {
  width: min(100%, var(--content-max));
}
/* 2026-08-02刷新: トップの見出しを大きくして雑誌調に */
.gateway-section-heading h2,
.gateway-start-heading h2 { font-size: clamp(1.5rem, 3.2vw, 1.875rem); letter-spacing: 0.01em; }
.section-heading h2,
.summer-category-section > header h2,
.summer-purpose > div:first-child h2,
.home-faq > div:first-child h2,
.library-browser > header h2,
.library-heatstroke-feature > header h2,
.library-heatstroke-products > header h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.35;
}
.gateway-page > .home-hero,
.gateway-page > .home-decision-strip,
.gateway-page > .home-features,
.gateway-page > .gateway-start,
.gateway-page > .home-directory,
.gateway-page > .gateway-purpose,
.gateway-page > .home-aircon-sizes,
.gateway-page > .heat-alert-banner {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: 0 !important;
}
.gateway-page > .gateway-purpose {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   2. トップページ（gateway）
   -------------------------------------------------------------------------- */
/* トップは共通バナーを出さない（特集タイルに役割を移した） */
body:has(.gateway-page) > .site-guide-banners { display: none; }

/* --- 紙色×雑誌風のスプリットヒーロー --- */
/* 2026-08-02再刷新: 写真全面+白グラデ→温かい紙色ベースに大見出し。
   右側は角丸の写真パネルの上に目玉カードが浮かぶ構成 */
body:has(.gateway-page) {
  background: #fbf9f6;
  overflow-x: clip;
}
/* トップではヘッダーも紙色に溶け込ませる */
body:has(.gateway-page) .global-site-header {
  background: #fbf9f6;
  border-bottom: 0;
  backdrop-filter: none;
}
.gateway-page > .home-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * var(--s4));
  background:
    radial-gradient(680px 360px at 78% -10%, rgb(200 16 46 / 9%), transparent 64%),
    radial-gradient(560px 300px at 18% 92%, rgb(253 186 116 / 14%), transparent 66%),
    linear-gradient(180deg, #fff 0%, #fffdf9 48%, #fbf7ef 100%);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  overflow: hidden;
}
.gateway-page > .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(200 16 46 / 4%) 1px, transparent 1px),
    linear-gradient(180deg, rgb(200 16 46 / 3%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
  opacity: 0.46;
}
/* inner と grid は同一要素のため、::before(写真)の上に載せる子側へ z-index を付ける */
.home-hero-inner { position: relative; }
.home-hero-copy,
.home-hero .hero-pick { position: relative; z-index: 1; }
.home-hero-copy {
  display: grid;
  align-content: start;
.home-hero-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  max-width: 34rem;
  padding: var(--s1) var(--s1) var(--s1) var(--s4);
  background: #ffffff;
  border-radius: var(--r-full);
  box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
}
.home-hero-search span { color: var(--ink-muted); }
.home-hero-search input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
}
.home-hero-search input:focus { outline: none; }
.home-hero-search button {
  flex: none;
  min-height: 44px;
  padding: 0 var(--s5);
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink-strong);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}
.home-hero-search button:hover { background: #000; }
}
@media (min-width: 1100px) {
  /* 生成背景をヒーロー全面に敷くため、旧写真パネルは使わない。 */
  .home-hero-inner::before {
    content: none;
  }
}
@media (max-width: 1099px) {
  /* スマホも写真＋暗幕。白文字の可読性を保つため上から下へ濃くする。 */
  .gateway-page > .home-hero {
    background:
      radial-gradient(520px 280px at 90% -8%, rgb(200 16 46 / 9%), transparent 66%),
      linear-gradient(180deg, #fff 0%, #fffdf9 56%, #fbf7ef 100%);
  }
}
.home-hero-inner {
  width: min(100% - 2 * var(--s4), var(--w-page));
  margin-inline: auto;
  padding: clamp(1.4rem, 3vw, 2.65rem) 0 clamp(1.15rem, 2.6vw, 2.15rem);
}
@media (min-width: 768px) { .home-hero-inner { width: min(100% - 2 * var(--s6), var(--w-page)); } }
.home-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  justify-self: start;
  padding: 6px var(--s3);
  background: #fff;
  color: var(--brand-strong);
  border: 1px solid rgb(200 16 46 / 16%);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 24px rgb(31 41 55 / 6%);
}
.home-hero h1 {
  margin-top: var(--s3);
  font-size: clamp(2.05rem, 1.15rem + 4vw, 4.15rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-feature-settings: "palt";
  max-width: 11.5em;
  text-wrap: balance;
  overflow-wrap: normal;
}
.home-hero h1 em {
  font-style: normal;
  color: var(--brand);
  padding: 0 0.04em 0.08em;
  background:
    linear-gradient(transparent 76%, rgb(247 217 180 / 92%) 76%, rgb(247 217 180 / 92%) 91%, transparent 91%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 2026-08-27 top renewal: compact, honest trust cue below the hero lead. */
.gateway-hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.48rem;
  margin: 0.62rem 0 0;
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.gateway-hero-trust span:first-child {
  color: var(--brand);
  font-weight: 900;
}
.home-hero .gateway-hero-lead {
  color: var(--ink);
  max-width: 42em;
  margin-top: var(--s3);
  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
  line-height: 1.85;
}
.home-search-panel {
  display: grid;
  gap: var(--s3);
  width: min(100%, 54rem);
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  padding: clamp(0.7rem, 1.7vw, 1rem);
  background: #fff;
  border: 1px solid rgb(31 41 55 / 12%);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgb(31 41 55 / 12%);
}
.home-search-main {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  min-height: 72px;
  padding: var(--s2) var(--s4) var(--s2) var(--s3);
  border: 2px solid var(--brand);
  border-radius: var(--r-full);
  background: linear-gradient(180deg, #fff 0%, #fffafa 100%);
  color: var(--ink-strong);
  text-decoration: none;
}
.home-search-main::before {
  content: "⌕";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 1.35rem;
  font-weight: 900;
}
.home-search-main:hover {
  text-decoration: none;
  box-shadow: 0 10px 24px rgb(200 16 46 / 14%);
}
.home-search-main span {
  grid-column: 2;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.home-search-main b {
  grid-column: 2;
  color: var(--ink-strong);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.3;
}
.home-search-main i {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink-inverse);
  font-style: normal;
  font-weight: 900;
}
.home-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-inline: 4px;
}
.home-search-suggestions a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px var(--s3);
  border: 1px solid rgb(31 41 55 / 12%);
  border-radius: var(--r-full);
  background: #fff;
  color: var(--ink-strong);
  font-size: 0.8125rem;
  font-weight: 800;
  text-decoration: none;
}
.home-search-suggestions a:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-inverse);
  text-decoration: none;
}
.home-visual-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  width: min(100%, 58rem);
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
}
.home-visual-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 148px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(31 41 55 / 10%);
  border-radius: 22px;
  background: #fff;
  color: var(--ink-inverse);
  text-decoration: none;
  box-shadow: 0 18px 40px rgb(31 41 55 / 10%);
}
.home-visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(17 24 39 / 4%) 0%, rgb(17 24 39 / 10%) 45%, rgb(17 24 39 / 66%) 100%),
    linear-gradient(90deg, rgb(17 24 39 / 42%) 0%, transparent 62%);
  pointer-events: none;
}
.home-visual-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.22s ease;
}
.home-visual-card:hover {
  transform: translateY(-2px);
  color: var(--ink-inverse);
  text-decoration: none;
  box-shadow: 0 22px 48px rgb(31 41 55 / 14%);
}
.home-visual-card:hover img {
  transform: scale(1.045);
}
.home-visual-card span {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: end;
  gap: 4px;
  min-height: 148px;
  padding: var(--s3);
}
.home-visual-card strong {
  color: #fff;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgb(0 0 0 / 32%);
}
.home-visual-card small {
  color: rgb(255 255 255 / 92%);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 1px 8px rgb(0 0 0 / 28%);
}
.home-search-suggestions--sub {
  width: min(100%, 58rem);
  margin-top: var(--s3);
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.home-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s2) var(--s5);
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.9375rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgb(200 16 46 / 18%);
}
.home-hero-actions a + a {
  background: rgb(255 255 255 / 78%);
  border: 1px solid rgb(31 41 55 / 12%);
  color: var(--ink-strong);
  box-shadow: var(--shadow-lg);
}
.home-hero-actions a:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.home-hero-mini-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s3);
}
.home-hero-mini-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 3px 12px;
  border: 1px solid rgb(31 41 55 / 12%);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 58%);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}
.home-hero-mini-links a::after {
  content: "→";
  margin-left: 6px;
  color: var(--brand);
}
.home-hero-mini-links a:hover {
  border-color: rgb(200 16 46 / 34%);
  background: #fff;
  text-decoration: none;
}
.home-hero-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.home-hero-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s1) var(--s4);
  background: rgb(255 255 255 / 54%);
  border: 1px solid rgb(31 41 55 / 12%);
  border-radius: var(--r-full);
  color: var(--ink-strong);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.home-hero-chips a:hover { border-color: var(--brand); background: var(--brand); color: var(--ink-inverse); text-decoration: none; }
.home-hero-chips .home-hero-chip-all { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); font-weight: 700; }
.home-hero-chips .home-hero-chip-all:hover { color: var(--ink-inverse); background: var(--brand-strong); }
.home-hero .gateway-hero-lead {
  max-width: 34em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* ヒーローは「巨大な説明」より、my-best 風に“入口をすぐ押せる”構造へ。
   ただし色・文言・検証訴求はくらし選び帖独自のままにする。 */
.home-hero-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 768px) and (max-width: 1279px) {
  .home-hero-copy {
    max-width: none;
    width: 100%;
  }

  .home-hero h1 {
    max-width: 9.6em;
    font-size: clamp(2.15rem, 4.7vw, 3.1rem);
    line-height: 1.22;
  }

  .home-hero .gateway-hero-lead {
    max-width: 29em;
  }

  .home-visual-nav {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    gap: var(--s4);
    align-items: stretch;
  }

  .home-hero-copy {
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
    column-gap: var(--s5);
    align-items: end;
    max-width: none;
  }

  .home-hero-kicker,
  .home-hero h1,
  .home-hero .gateway-hero-lead {
    grid-column: 1;
  }

  .home-hero .gateway-hero-lead {
    max-width: 44em;
  }

  .home-visual-nav {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    width: 100%;
    max-width: none;
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s2);
  }

  .home-search-suggestions--sub,
  .home-hero-actions {
    grid-column: 1 / -1;
  }

  .home-visual-card,
  .home-visual-card span {
    min-height: 118px;
  }
}
.hero-pick {
  display: grid;
  gap: var(--s2);
  /* 1カラム時に横836pxまで伸びて、画像180pxの平べったいカードになっていた。
     2カラム時の列幅は340pxなのでこの上限は効かず、1カラム時だけ効く。 */
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: var(--s3);
  background: #fff;
  border: 1px solid rgb(31 41 55 / 10%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.hero-pick-flag {
  justify-self: start;
  padding: 2px var(--s3);
  background: var(--brand);
  color: var(--ink-inverse);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
}
/* 暗黙グリッド行はautoになり img の max-height:100% が解決できないため、pxで直接制限する */
.hero-pick-image {
  display: grid;
  place-items: center;
  height: 164px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #fff;
}
/* 中身は楽天の商品写真（正方形・白背景）。cover にすると縦が22%切り落とされ、
   商品の上下が欠ける。全体を収める contain にする。 */
.hero-pick-image img {
  width: 100%;
  height: 100%;
  max-height: 164px;
  max-width: 100%;
  object-fit: contain;
  background: var(--surface);
}
.hero-pick-category { font-size: 0.75rem; font-weight: 700; color: var(--brand); }
.hero-pick-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hero-pick-price { display: flex; align-items: baseline; gap: var(--s3); margin-top: var(--s1); }
.hero-pick-price small { font-size: 0.75rem; font-weight: 700; color: var(--accent-good); }
.hero-pick-price b { font-size: 1.55rem; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hero-pick-price i { font-size: 0.75rem; font-style: normal; color: var(--ink-muted); margin-left: 2px; }
.hero-pick-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}
.hero-pick-cta:hover { background: var(--brand-strong); text-decoration: none; }
.hero-pick-meta { font-size: 0.6875rem; color: var(--ink-muted); }

@media (min-width: 1100px) {
  .hero-pick {
    align-self: stretch;
    max-width: none;
    min-height: 100%;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: stretch;
    gap: var(--s2);
    margin: 0;
    padding: var(--s3);
    border-radius: 24px;
    box-shadow: 0 18px 44px rgb(60 45 25 / 12%);
  }

  .hero-pick-flag {
    grid-column: auto;
    grid-row: auto;
  }

  .hero-pick-image {
    grid-column: auto;
    grid-row: auto;
    height: 150px;
    border-radius: 16px;
  }

  .hero-pick-image img {
    max-height: 150px;
  }

  .hero-pick-category {
    grid-column: auto;
    grid-row: auto;
    margin-top: var(--s1);
  }

  .hero-pick-name {
    grid-column: auto;
    grid-row: auto;
    font-size: 0.98rem;
  }

  .hero-pick-price {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    gap: 2px;
    margin-top: var(--s1);
  }

  .hero-pick-price b {
    font-size: 1.42rem;
  }

  .hero-pick-cta {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    padding-inline: var(--s4);
  }

  .hero-pick-meta {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
  }
}

/* --- mybest風の「探す」カテゴリ入口。数字ではなく用途語で選ばせる。 --- */
.home-topic-dock {
  width: min(100%, var(--content-max));
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgb(31 41 55 / 6%);
}
.home-topic-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: clamp(0.875rem, 2vw, 1.25rem);
}
.home-topic-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.home-topic-heading h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(1.35rem, 2.4vw, 1.875rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: right;
}
.home-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.8vw, 1rem);
}
.home-topic-grid a {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 10px 10px 12px;
  border: 1px solid rgb(31 41 55 / 10%);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.home-topic-grid a:hover {
  transform: translateY(-2px);
  border-color: rgb(200 16 46 / 34%);
  box-shadow: 0 12px 26px rgb(31 41 55 / 9%);
  text-decoration: none;
}
.home-topic-grid a:hover .home-topic-icon {
  box-shadow: 0 12px 28px rgb(200 16 46 / 12%);
}
.home-topic-icon {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #fbf6ef;
  box-shadow: inset 0 0 0 1px rgb(31 41 55 / 5%);
  transition: box-shadow 0.15s ease;
}
.home-topic-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-topic-grid strong {
  color: var(--ink-strong);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.35;
}
.home-topic-grid small {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.home-decision-strip {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    radial-gradient(circle at top right, rgb(200 16 46 / 10%), transparent 28%),
    linear-gradient(135deg, #fffaf2 0%, #fff 46%, #f7f1ea 100%);
  border: 1px solid rgb(124 45 18 / 12%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.home-decision-strip::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(32vw, 260px);
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b91c1c 0%, #ef4444 55%, rgb(239 68 68 / 0%) 100%);
}

.home-decision-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  gap: var(--s4);
  align-items: end;
  margin-bottom: var(--s4);
}

.home-decision-intro {
  display: grid;
  gap: var(--s2);
}

.home-decision-intro .eyebrow {
  margin-bottom: 0;
  color: #b91c1c;
}

.home-decision-intro h2 {
  margin: 0;
  font-size: clamp(2.05rem, 5vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.home-decision-intro > p:last-child {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.85;
}

.home-decision-summary {
  display: grid;
  gap: 12px;
  padding: 1rem 1.1rem;
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(31 41 55 / 8%);
  border-radius: var(--r-lg);
}

.home-decision-summary div {
  display: grid;
  gap: 4px;
}

.home-decision-summary div + div {
  padding-top: 12px;
  border-top: 1px solid rgb(31 41 55 / 9%);
}

.home-decision-summary b {
  color: var(--ink-strong);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.home-decision-summary span {
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

.home-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}

.home-decision-card {
  position: relative;
  display: grid;
  gap: var(--s3);
  min-height: 100%;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  background: linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 88%));
  border: 1px solid rgb(31 41 55 / 8%);
  border-radius: var(--r-lg);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-decision-card:hover {
  transform: translateY(-4px);
  border-color: rgb(185 28 28 / 20%);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

.home-decision-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  border: 1px solid rgb(31 41 55 / 10%);
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-decision-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.home-decision-card small {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-decision-card-label {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 82%);
  border: 1px solid rgb(31 41 55 / 8%);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
}

.home-decision-card strong {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.32;
  color: var(--ink-strong);
}

.home-decision-card > span {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.home-decision-card p {
  margin: 0;
  padding-top: var(--s2);
  border-top: 1px dashed rgb(31 41 55 / 12%);
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.7;
}

.home-decision-card b {
  margin-top: auto;
  color: var(--link);
  font-size: 0.9rem;
}

.home-decision-card-primary {
  background:
    radial-gradient(circle at top right, rgb(239 68 68 / 14%), transparent 30%),
    linear-gradient(165deg, #fff4ec 0%, #fff9f5 52%, #fff 100%);
}

.home-decision-card-compare {
  background:
    radial-gradient(circle at top left, rgb(249 115 22 / 10%), transparent 32%),
    linear-gradient(165deg, #fffdfa 0%, #fff 48%, #f8f6f2 100%);
}

.home-decision-card-problem {
  background:
    radial-gradient(circle at top left, rgb(15 118 110 / 10%), transparent 30%),
    linear-gradient(165deg, #f6fbfa 0%, #fff 52%, #f5f7f4 100%);
}

/* --- 特集タイル3枚 --- */
.home-features {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-feature {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink-inverse);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.home-feature:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 16px 40px rgb(15 30 50 / 22%)); }
.home-feature { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.home-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.35s ease; }
.home-feature:hover img { transform: scale(1.05); }
.home-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(15 16 19 / 12%) 20%, rgb(15 16 19 / 82%) 85%);
}
.home-feature span { position: absolute; inset: auto var(--s4) var(--s4); display: grid; gap: 2px; }
.home-feature small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; color: rgb(255 255 255 / 78%); }
.home-feature strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.home-feature em {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8125rem;
  font-style: normal;
  color: rgb(255 255 255 / 85%);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.home-feature small::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: var(--s2);
  vertical-align: middle;
  background: var(--brand);
}

@media (max-width: 1099px) {
  .home-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .home-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gateway-hero {
  display: grid;
  gap: var(--s6);
  align-items: center;
  margin-top: var(--s6);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
  .gateway-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: var(--s7); }
}

.gateway-hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.gateway-hero-kicker span {
  padding: 2px var(--s3);
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 700;
}

.gateway-hero-copy h1 {
  margin-top: var(--s4);
  font-size: clamp(1.75rem, 5.5vw, 2.75rem);
  line-height: 1.35;
  color: var(--ink-strong);
}
.gateway-hero-copy h1 span { color: var(--brand); }

.gateway-hero-lead {
  margin-top: var(--s4);
  max-width: var(--w-prose);
  font-size: 1rem;
  line-height: 1.95;
}

.gateway-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.gateway-hero-actions > a { display: inline-flex; align-items: center; min-height: 44px; }

.gateway-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.gateway-proof dt {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
  line-height: 1.2;
}
.gateway-proof dd { margin: 0; font-size: 0.75rem; color: var(--ink-muted); }

.gateway-hero-visual { position: relative; border-radius: var(--r-md); overflow: hidden; }
.gateway-hero-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gateway-hero-photo-caption {
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  display: grid;
  gap: 2px;
  padding: var(--s3);
  background: rgb(255 255 255 / 92%);
  border-radius: var(--r-sm);
}
.gateway-hero-photo-caption b { font-size: 0.875rem; color: var(--ink-strong); }
.gateway-hero-photo-caption span { font-size: 0.75rem; color: var(--ink-muted); }

/* --- 畳数別エアコンへの近道（特集タイル直下の1行） --- */
.home-aircon-sizes {
  width: min(100%, var(--content-max));
  margin: var(--s4) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
@media (min-width: 768px) {
  .home-aircon-sizes { width: min(100%, var(--content-max)); }
}
.home-aircon-sizes > b {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-muted);
}
.home-aircon-sizes > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.home-aircon-sizes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 72px;
  padding: var(--s1) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--ink-strong);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  font-feature-settings: "tnum" 1;
}
.home-aircon-sizes a:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-inverse);
  text-decoration: none;
}


/* --- カテゴリー一覧（トップの主役） --- */
.directory-group { margin-top: var(--s5); }
.directory-group > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--surface-sunken);
  border-left: 4px solid var(--ink-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 1.0625rem;
}
.directory-group > h3 small { font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); }
.directory-group > h3 small { flex-shrink: 0; }
/* カテゴリー一覧はチップ（丸いピル）で並べる。
   以前は flex:1 1 165px で幅を引き伸ばした箱だったため、
   ・行の高さが行内の最長ラベルに引きずられ 56 / 75 / 104px とバラバラ
   ・line-height 1.9 のまま2行になると1件75px
   になり、375pxでこのセクションだけで2,588px（トップ全体の21.8%）を占めていた。
   全ラベルは1行に収まる（最長「ペット用ヒーター・ホットカーペット」で318px < 343px）
   ため、1行固定・高さ44pxのチップに揃える。ヒーローの .home-hero-chips と同じ語彙。 */
.directory-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}
.directory-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s1) var(--s3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-strong);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.directory-links a > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  /* 件数バッジは1チップあたり幅を34px占めていた。チップを1行に2つ入れるため
     最小幅と内側余白を詰める。 */
  min-width: 1.5rem;
  height: 1.375rem;
  padding: 0 var(--s1);
  border-radius: var(--r-full);
  background: rgb(200 16 46 / 8%);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  line-height: 1.375rem;
}
/* ラベルは要素ではなく素のテキストノード（<a>冷蔵庫<span>6</span></a>）なので、
   以前あった `a > :not(span)` の -webkit-line-clamp は何にも当たっていなかった。
   チップ化で1行固定にしたため、あわせて削除した。 */
.directory-links a:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--ink-inverse);
  text-decoration: none;
}
.directory-links a:hover > span {
  background: rgb(255 255 255 / 22%);
  color: var(--ink-inverse);
}

.heat-alert-action-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: var(--s5);
  align-items: stretch;
  margin-top: var(--s4);
  padding: clamp(var(--s5), 4vw, var(--s7));
  background:
    radial-gradient(circle at 8% 12%, rgb(255 255 255 / 20%), transparent 24%),
    radial-gradient(circle at 100% 0%, rgb(104 216 255 / 28%), transparent 32%),
    linear-gradient(135deg, #194c7d 0%, #0f7da3 54%, #0ba8d1 100%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--r-lg);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.heat-alert-action-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 10%) 0%, transparent 34%),
    radial-gradient(circle at 75% 85%, rgb(255 255 255 / 12%), transparent 26%);
  pointer-events: none;
}

.heat-alert-action-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: var(--s4);
}

.heat-alert-action-copy .eyebrow {
  width: fit-content;
  padding: 6px var(--s4);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 18%);
  color: rgb(255 255 255 / 90%);
}

.heat-alert-action-copy h2 {
  margin: 0;
  color: var(--ink-inverse);
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 7em;
  text-wrap: balance;
}

.heat-alert-action-copy p {
  margin: 0;
  max-width: 22em;
  color: rgb(255 255 255 / 82%);
  font-size: 1.05rem;
  line-height: 1.8;
}

.heat-alert-action-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.heat-alert-action-card {
  display: grid;
  gap: var(--s2);
  min-height: 100%;
  padding: clamp(var(--s4), 2vw, var(--s5));
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(248 251 255 / 93%));
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

.heat-alert-action-card:hover {
  transform: translateY(-4px);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}

.heat-alert-action-card small {
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.heat-alert-action-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 1.35rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.heat-alert-action-card span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.heat-alert-action-card b {
  margin-top: auto;
  color: var(--link);
  font-size: 0.95rem;
}

.heat-alert-action-buy {
  background:
    radial-gradient(circle at top right, rgb(255 255 255 / 12%), transparent 32%),
    linear-gradient(145deg, #22324a, #334a67);
  border-color: rgb(255 255 255 / 12%);
  color: var(--ink-inverse);
}

.heat-alert-action-buy.store-cta-amazon {
  background:
    radial-gradient(circle at top right, rgb(255 255 255 / 10%), transparent 30%),
    linear-gradient(145deg, #243449, #36516f);
}

.heat-alert-action-buy small,
.heat-alert-action-buy strong,
.heat-alert-action-buy span,
.heat-alert-action-buy b {
  color: var(--ink-inverse);
}

.heat-alert-action-buy span {
  opacity: 0.9;
}

.winter-product-promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.34fr);
  gap: var(--s5);
  align-items: stretch;
  margin-top: var(--s4);
  padding: clamp(var(--s5), 4vw, var(--s7));
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ink-inverse);
  background:
    radial-gradient(circle at 8% 10%, rgb(255 255 255 / 18%), transparent 25%),
    radial-gradient(circle at 92% 8%, rgb(255 184 86 / 26%), transparent 30%),
    radial-gradient(circle at 58% 95%, rgb(34 197 94 / 15%), transparent 34%),
    linear-gradient(135deg, #243145 0%, #6b3f2c 50%, #b46428 100%);
  box-shadow: 0 28px 72px rgb(63 38 22 / 24%);
}

.winter-product-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 11%) 0%, transparent 34%),
    radial-gradient(circle at 80% 82%, rgb(255 255 255 / 12%), transparent 26%);
  pointer-events: none;
}

.winter-product-copy,
.winter-product-grid {
  position: relative;
  z-index: 1;
}

.winter-product-copy {
  display: grid;
  align-content: center;
  gap: var(--s4);
}

.winter-product-copy .eyebrow {
  width: fit-content;
  padding: 6px var(--s4);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 15%);
  border: 1px solid rgb(255 255 255 / 20%);
  color: rgb(255 255 255 / 92%);
}

.winter-product-copy h2 {
  margin: 0;
  color: var(--ink-inverse);
  font-size: clamp(2.1rem, 4.35vw, 3.45rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.winter-product-copy p {
  margin: 0;
  max-width: 25em;
  color: rgb(255 255 255 / 84%);
  font-size: 1.05rem;
  line-height: 1.85;
}

.winter-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.winter-product-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 94%);
  color: #8b3b10;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 28px rgb(35 22 15 / 16%);
}

.winter-product-actions a:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.winter-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.winter-product-card {
  display: grid;
  gap: var(--s2);
  min-height: 100%;
  padding: clamp(var(--s4), 2vw, var(--s5));
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(255 250 243 / 94%));
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 16px 34px rgb(50 28 15 / 18%);
}

.winter-product-card-image {
  display: block;
  overflow: hidden;
  height: 132px;
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 50% 36%, rgb(255 255 255 / 100%), rgb(245 241 234 / 92%) 58%, rgb(225 211 190 / 88%));
}

.winter-product-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s2);
  mix-blend-mode: multiply;
}

.winter-product-card:hover {
  transform: translateY(-4px);
  text-decoration: none;
  box-shadow: 0 22px 46px rgb(50 28 15 / 24%);
}

.winter-product-card small {
  color: #b54f12;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.winter-product-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 1.35rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.winter-product-card span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.winter-product-card b {
  margin-top: auto;
  color: #b54f12;
  font-size: 0.95rem;
}

.winter-product-card-main {
  background:
    radial-gradient(circle at top right, rgb(255 255 255 / 18%), transparent 32%),
    linear-gradient(145deg, #192438, #2c405d);
  border-color: rgb(255 255 255 / 18%);
  color: var(--ink-inverse);
}

.winter-product-card-main .winter-product-card-image {
  background:
    radial-gradient(circle at 52% 44%, rgb(255 255 255 / 100%), rgb(234 239 246 / 92%) 58%, rgb(178 194 214 / 80%));
}

.winter-product-card-main small,
.winter-product-card-main strong,
.winter-product-card-main span,
.winter-product-card-main b {
  color: var(--ink-inverse);
}

.winter-product-card-main span {
  opacity: 0.88;
}

@media (max-width: 900px) {
  .heat-alert-action-banner,
  .winter-product-promo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .heat-alert-action-grid,
  .winter-product-grid {
    grid-template-columns: 1fr;
  }
}

/* --- いま買うならこの1台（各記事1位商品の購入カード） --- */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}
.featured-grid.featured-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gateway-start-grid,
.gateway-purpose-grid,
.featured-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.featured-card {
  position: relative;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.featured-card:hover { border-color: var(--brand-line); box-shadow: 0 10px 26px rgb(15 30 50 / 12%); }
/* 各記事1位の商品につけるランキング風バッジ */
.featured-card::before {
  content: "1位";
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(160deg, #d4a017, #b8860b);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgb(15 30 50 / 25%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.featured-card-media { display: flex; flex-direction: column; gap: var(--s1); color: inherit; text-decoration: none; }
.featured-card-media:hover { text-decoration: none; }
.featured-card-media:hover strong { color: var(--brand); }
/* 商品写真（多くが正方形・白背景）。cover だと4:3の枠で25%切れる。 */
.featured-card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface);
}
.featured-card-media small { font-size: 0.6875rem; font-weight: 700; color: var(--brand); }
.featured-card-media strong {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.9em;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* 楽天とAmazonの価格を縦に並べ、最安の行を大きく赤字で強調する */
.featured-offers { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.featured-offer { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 0; font-size: 0.75rem; color: var(--ink-muted); }
.featured-offer b { font-size: 0.875rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.featured-offer em {
  margin-left: 6px;
  padding: 0 6px;
  background: var(--accent-good-soft);
  border-radius: var(--r-full);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
  color: var(--accent-good);
}
.featured-offer.is-best { color: var(--ink-strong); font-weight: 700; }
.featured-offer.is-best b { font-size: 1.25rem; font-weight: 700; color: var(--brand); }
.featured-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}
.featured-cta:hover { background: var(--brand-strong); color: var(--ink-inverse); text-decoration: none; }
.featured-cta-secondary { background: var(--surface); color: var(--brand-strong); border: 1px solid var(--brand-line); }
.featured-cta-secondary:hover { background: var(--brand-soft); color: var(--brand-strong); }
/* 購入ボタンはストアの公式色に合わせて、どこで買うかを一目で分かるようにする */
.store-cta-rakuten { background: #bf0000; color: #fff; }
.store-cta-rakuten:hover { background: #990000; color: #fff; }
.store-cta-amazon { background: #ff9900; color: #131921; }
.store-cta-amazon:hover { background: #e68a00; color: #131921; }
/* 購入ボタンの下に単独で置くリンク。高さ23pxではタップし分けられないため
   44pxを確保する（文字サイズは変えない）。 */
.featured-article-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 0.75rem;
  text-align: center;
}
.featured-note { margin-top: var(--s4); font-size: 0.6875rem; color: var(--ink-muted); }
.featured-note,
.heat-alert-copy > small,
.heat-alert-links small,
.heat-alert-source,
.caption,
.meta-note {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* 小さすぎる補助文言は最小でも読み切れるサイズを担保し、白紙上の色差を確保 */
.hero-pick-meta,
.heatstroke-showcase-copy > p,
.gateway-proof dd,
.home-feature small {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.gateway-page .caption,
.gateway-page .meta-note {
  color: var(--ink-faint);
}

.home-section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s4);
}

.home-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 82%);
  color: var(--ink-strong);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.home-secondary-cta:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

.home-guide-shelves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.home-guide-shelf {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  background: rgb(255 255 255 / 84%);
  border: 1px solid rgb(31 41 55 / 8%);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 28px rgb(31 41 55 / 6%);
}

.home-guide-shelf > small {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-guide-shelf > h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
}

.home-guide-shelf > p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.75;
}

.home-guide-links {
  display: grid;
  gap: var(--s2);
}

.home-guide-links a {
  display: block;
  padding: var(--s3);
  background: #fff;
  border: 1px solid rgb(31 41 55 / 8%);
  border-radius: var(--r-lg);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.65;
  text-decoration: none;
}

.home-guide-links a:hover {
  border-color: rgb(200 16 46 / 20%);
  color: var(--brand);
  text-decoration: none;
}

/* 写真の上で読みやすさが落ちる文言にはグラデーションの上を通す。 */
.gateway-hero-photo-caption,
.heatstroke-showcase-image figcaption,
.summer-hub-hero figcaption,
.site-guide-banner span,
.site-guide-banner small {
  text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

/* --- タブ切り替え --- */
.gateway-home-switcher-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.gateway-home-switcher-tabs button {
  cursor: pointer;
  min-height: 44px;
  padding: var(--s2) var(--s5);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.gateway-home-switcher-tabs button:hover { border-color: var(--brand); color: var(--brand-strong); }
.gateway-home-switcher-tabs button.is-active,
.gateway-home-switcher-tabs button[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink-inverse);
}

/* --- カードグリッド --- */
.gateway-start-grid,
.gateway-service-grid,
.gateway-priority-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}

.gateway-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}

@media (max-width: 767px) {


  .home-decision-shell {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }

  .home-decision-intro h2 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .home-decision-intro > p:last-child {
    font-size: 0.9375rem;
    line-height: 1.75;
  }

  .home-decision-summary {
    padding: var(--s3);
  }

  .home-decision-grid,
  .home-guide-shelves,
  .featured-grid,
  .gateway-start-grid,
  .gateway-purpose-grid,
  .gateway-service-grid,
  .gateway-priority-grid {
    /* 固定1カラムだと 639px幅で13画面、700px幅で16.8画面と、375pxの
       14.1画面より縦に長くなっていた。auto-fit にして、入る幅では
       自動的に2カラムに畳む（343px→1列 / 607px→2列 / 668px→2列）。 */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* 2026-08-26 home topic dock desktop repair:
   過去の my-best 風試作で、PC幅だけ見出しが右側に残って切れる状態が
   起きていたため、カテゴリー導線は「見出し → 正方形アイコンカード →
   人気ショートカット」の1カラム構成に戻して固定する。 */
.home-topic-dock {
  width: min(1180px, calc(100% - 32px));
  margin: clamp(1.6rem, 4vw, 3rem) auto;
  padding: clamp(1.05rem, 2.4vw, 1.85rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.45rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(1.35rem, 3vw, 2.15rem);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 64px rgb(15 23 42 / 7%);
}

.home-topic-heading {
  display: grid;
  justify-items: start;
  gap: 0.42rem;
  max-width: none;
  min-width: 0;
  text-align: left;
}

.home-topic-heading span {
  color: var(--brand);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.home-topic-heading h2 {
  margin: 0;
  max-width: none;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 1rem + 1.45vw, 2.15rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.home-topic-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.82rem;
  overflow: visible;
}

.home-topic-grid a {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.88rem;
  row-gap: 0.18rem;
  min-width: 0;
  min-height: 112px;
  padding: 0.88rem 1rem;
  overflow: hidden;
  border-radius: 1.1rem;
}

.home-topic-icon {
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  flex: 0 0 auto;
}

.home-topic-grid strong,
.home-topic-grid small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-topic-grid strong {
  align-self: end;
  line-height: 1.35;
}

.home-topic-grid small {
  align-self: start;
  line-height: 1.5;
}

.home-topic-quick-links {
  width: 100%;
  margin-top: 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.1rem 0 0.25rem;
  scrollbar-width: none;
}

.home-topic-quick-links::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-topic-dock {
    width: min(100% - 1.25rem, 560px);
    margin-block: 1.15rem;
    padding: 0.95rem;
    border-radius: 1.35rem;
  }

  .home-topic-heading h2 {
    font-size: clamp(1.22rem, 5.2vw, 1.55rem);
  }

  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
  }

  .home-topic-grid a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.34rem;
    min-height: 122px;
    padding: 0.72rem 0.55rem;
    text-align: center;
  }

  .home-topic-icon {
    width: 58px;
    height: 58px;
  }

  .home-topic-grid small {
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  .home-topic-grid a {
    min-height: 116px;
    padding-inline: 0.42rem;
  }
}

@media (min-width: 960px) {
  .home-feature {
    min-height: 0;
  }

  .featured-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .featured-card {
    padding: var(--s3);
  }

  .featured-card-media img {
    aspect-ratio: 1;
  }

  .featured-offer:not(.is-best) {
    display: none;
  }
}

/* 「いま買うならこの1台」の6枚は、モバイルで縦積みすると2,785px
   （トップ全体の約20%）を占め、次の「よく読まれている比較記事」まで
   7.4画面ぶんスクロールが必要だった。.site-guide-banners と同じ
   横スクロール1行に畳む。HTMLの順序と件数は変えないのでリンクは全て残る。
   ※必ず上の max-width:767px ブロックより後ろに置くこと。先に書くと
     grid-template-columns: minmax(0,1fr) に上書きされ、1枚目の列が
     0pxに潰れる。 */
@media (max-width: 639px) {
  /* ここはトップで最も購入に近いセクション（GA4: トップのキーイベント9件の主な出所）。
     一度は横スクロールの1行に畳んだが、横スワイプしないと2枚目以降に届かず
     購入機会を削るため、縦スクロールだけで6枚すべて見える2カラムに戻した。
     縦積み2,785px → 2カラムで約1,200px と、高さは大きく抑えたまま全件を見せる。
     .featured-grid--cols-2（商品4件時）は詳細度 0,2,0 なので同じ詳細度で並べる。 */
  .featured-grid,
  .featured-grid.featured-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
  }

  .gateway-page > .home-hero {
    margin-top: calc(-1 * var(--s3));
  }

  .home-hero-inner {
    width: min(100% - 2 * var(--s3), var(--w-page));
    padding-block: var(--s3);
  }

  .home-hero-grid {
    gap: var(--s4);
  }

  .home-hero h1 {
    margin-top: var(--s2);
    max-width: 8.7em;
    font-size: clamp(1.95rem, 8vw, 2.45rem);
    line-height: 1.22;
    letter-spacing: -0.012em;
  }

  .home-hero .gateway-hero-lead {
    margin-top: var(--s2);
    font-size: 0.9rem;
    line-height: 1.65;
  }

  .home-search-panel {
    gap: var(--s2);
    margin-top: var(--s3);
    padding: var(--s2);
    border-radius: 18px;
    backdrop-filter: none;
  }

  .home-search-main {
    min-height: 54px;
    padding: var(--s2) var(--s3);
    border-radius: 14px;
  }

  .home-search-main b {
    font-size: 0.98rem;
  }

  .home-visual-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
    width: 100%;
    margin: var(--s3) 0 0;
    padding-inline: 0;
    overflow: visible;
  }

  .home-visual-card,
  .home-visual-card span {
    min-height: 104px;
    border-radius: 16px;
  }

  .home-visual-card span {
    padding: var(--s2);
  }

  .home-visual-card strong {
    font-size: 0.94rem;
  }

  .home-visual-card small {
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .home-search-suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .home-search-suggestions a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-hero-actions a {
    min-height: 44px;
    padding-inline: var(--s4);
  }

  .home-hero-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .home-hero-chips a {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: var(--s3);
    font-size: 0.8125rem;
    scroll-snap-align: start;
  }

  .hero-pick {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    max-width: 330px;
    padding: var(--s3);
    border-radius: var(--r-md);
    box-shadow: 0 14px 34px rgb(60 45 25 / 16%);
  }

  .hero-pick-flag {
    grid-column: auto;
  }

  .hero-pick-image {
    grid-row: auto;
    height: 148px;
    border-radius: 12px;
  }

  .hero-pick-image img {
    max-height: 148px;
  }

  .hero-pick-category,
  .hero-pick-name,
  .hero-pick-price {
    min-width: 0;
  }

  .hero-pick-price {
    display: grid;
    justify-content: space-between;
    gap: 1px;
  }

  .hero-pick-price b {
    font-size: 1.22rem;
  }

  .hero-pick-cta {
    grid-column: auto;
    min-height: 44px;
  }

  .hero-pick-meta {
    grid-column: auto;
  }

  .home-features {
    grid-template-columns: 1fr;
    gap: var(--s2);
    margin-top: var(--s3);
  }

  .home-feature {
    grid-column: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-md);
  }

  .home-feature span {
    inset: auto var(--s3) var(--s3);
  }

  .home-topic-dock {
    margin-top: var(--s3);
    padding: var(--s3);
    border-radius: 20px;
  }

  .home-topic-heading {
    display: grid;
    gap: 3px;
    margin-bottom: var(--s2);
  }

  .home-topic-heading h2 {
    font-size: 1.05rem;
  }

  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
  }

  .home-topic-grid a {
    min-height: 150px;
    padding: 10px;
    border-radius: 16px;
  }

  .home-topic-icon {
    aspect-ratio: 16 / 9;
    border-radius: 13px;
  }

  .home-topic-grid strong {
    font-size: 0.9rem;
  }

  .home-topic-grid small {
    font-size: 0.7rem;
  }

  .home-aircon-sizes {
    margin-top: var(--s3);
    gap: var(--s2);
  }

  .home-aircon-sizes > b {
    width: 100%;
  }

  .home-aircon-sizes > div {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .home-aircon-sizes a {
    flex: 0 0 auto;
    min-width: 64px;
    min-height: 40px;
    padding-inline: var(--s3);
    font-size: 0.8125rem;
  }

  .heat-alert-action-banner {
    margin-top: var(--s3);
    padding: var(--s3);
    gap: var(--s3);
    border-radius: var(--r-md);
  }

  .heat-alert-action-copy {
    gap: var(--s2);
  }

  .heat-alert-action-copy h2 {
    font-size: 1.9rem;
    max-width: none;
  }

  .heat-alert-action-copy p {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .heat-alert-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
  }

  .heat-alert-action-card {
    padding: var(--s3);
    gap: 3px;
    min-height: 132px;
    border-radius: var(--r-lg);
  }

  .heat-alert-action-card small {
    font-size: 0.75rem;
  }

  .heat-alert-action-card strong {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .heat-alert-action-card span {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .heat-alert-action-card b {
    font-size: 0.8125rem;
  }

  .winter-product-promo {
    margin-top: var(--s3);
    padding: var(--s3);
    gap: var(--s3);
    border-radius: var(--r-md);
  }

  .winter-product-copy {
    gap: var(--s2);
  }

  .winter-product-copy h2 {
    font-size: 1.9rem;
  }

  .winter-product-copy p {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .winter-product-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .winter-product-actions a {
    min-height: 44px;
  }

  .winter-product-grid {
    gap: var(--s2);
  }

  .winter-product-card {
    padding: var(--s3);
    gap: 3px;
    min-height: 0;
    border-radius: var(--r-lg);
  }

  .winter-product-card-image {
    height: 104px;
    margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s2);
    border-radius: var(--r-lg);
  }

  .winter-product-card small {
    font-size: 0.75rem;
  }

  .winter-product-card strong {
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .winter-product-card span {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .winter-product-card b {
    font-size: 0.8125rem;
  }

  .gateway-start-heading,
  .gateway-section-heading {
    gap: var(--s2);
    padding-bottom: var(--s3);
    margin-bottom: var(--s3);
  }

  .gateway-section-heading h2,
  .gateway-start-heading h2 {
    font-size: 1.35rem;
    line-height: 1.35;
  }

  .gateway-section-heading > p:last-child,
  .gateway-start-heading > p:last-child {
    font-size: 0.875rem;
    line-height: 1.65;
  }

  .featured-card {
    padding: var(--s3);
    border-radius: var(--r-sm);
  }

  .home-decision-strip {
    padding: var(--s3);
    border-radius: var(--r-lg);
  }

  .home-decision-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-decision-card {
    padding: var(--s3);
    border-radius: var(--r-lg);
  }

  .home-decision-card strong {
    font-size: 1.05rem;
  }

  .home-decision-card > span {
    font-size: 0.8125rem;
    line-height: 1.65;
  }

  .home-decision-card p {
    font-size: 0.78125rem;
    line-height: 1.65;
  }

  .home-section-actions {
    justify-content: stretch;
  }

  .home-secondary-cta {
    width: 100%;
  }

  .home-guide-shelf {
    padding: var(--s3);
    border-radius: var(--r-lg);
  }

  .home-guide-links a {
    padding: var(--s2) var(--s3);
    border-radius: var(--r-lg);
    font-size: 0.8125rem;
  }

  .featured-card::before {
    top: -6px;
    left: -6px;
    width: 32px;
    height: 32px;
    font-size: 0.6875rem;
  }

  .featured-card-media img {
    aspect-ratio: 1;
  }

  .featured-card-media small {
    font-size: 0.625rem;
  }

  .featured-card-media strong {
    min-height: 2.75em;
    font-size: 0.75rem;
  }

  .featured-offer:not(.is-best) {
    display: none;
  }

  .featured-offer {
    display: grid;
    gap: 1px;
  }

  .featured-offer.is-best b {
    font-size: 1rem;
  }

  .featured-cta {
    min-height: 42px;
    font-size: 0.75rem;
  }

  .featured-article-link {
    min-height: 38px;
    font-size: 0.6875rem;
  }

}


.gateway-start-grid > a,
.gateway-purpose-grid > a,
.gateway-service-grid > a,
.gateway-service-grid > article {
  flex: 1 1 260px;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gateway-start-grid > a:hover,
.gateway-purpose-grid > a:hover,
.gateway-service-grid > a:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  text-decoration: none;
}

/* 「よく読まれている比較記事」「いまの困りごとから探す」のカード画像は
   楽天の商品写真。cover だと25%切れるため contain で全体を見せる。 */
.gateway-start-grid > a > img,
.gateway-purpose-grid img,
.gateway-service-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface);
}

/* 最短ショートカットのカードは span と small が同じ文言を持つ（旧CSSの名残）。
   span 側を隠して二重表示を防ぐ。 */
.gateway-conversion-start .gateway-start-grid > a > span { display: none; }

/* カード内の要素は実装ごとに出現順が違うので役割ごとに指定する */
.gateway-start-grid > a > span,
.gateway-service-copy > span,
.gateway-service-grid > article > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: var(--s4) var(--s4) 0;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
}
.gateway-start-grid > a > small,
.gateway-purpose-grid > a small,
.gateway-service-copy > small,
.gateway-service-grid > article > small {
  padding: var(--s2) var(--s4) 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.gateway-start-grid > a > strong,
.gateway-purpose-grid > a strong,
.gateway-service-copy > strong,
.gateway-service-grid > article > strong {
  padding: var(--s1) var(--s4) 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-strong);
}
.gateway-start-grid > a > em,
.gateway-purpose-grid > a em,
.gateway-service-copy > em,
.gateway-service-grid > article > em {
  padding: var(--s2) var(--s4) 0;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.8;
  color: var(--ink-muted);
}
.gateway-start-grid > a > b,
.gateway-purpose-grid > a b,
.gateway-service-copy > b,
.gateway-service-grid > article > b {
  margin-top: auto;
  padding: var(--s4);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--link);
}
.gateway-service-grid > article > b { color: var(--ink-faint); }

.gateway-purpose-image { position: relative; }
.gateway-purpose-image span {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  padding: 2px var(--s3);
  border-radius: var(--r-full);
  background: rgb(24 26 30 / 85%);
  color: var(--ink-inverse);
  font-size: 0.6875rem;
  font-weight: 700;
}
.gateway-purpose-grid > a > div:last-child,
.gateway-service-copy { display: flex; flex-direction: column; flex: 1; }

/* 「よく読まれている比較記事」「いまの困りごとから探す」のカードは、縦積みだと
   1枚410pxのうち256px（62%）が画像で、4枚で1,700px前後を占めていた。
   モバイルはサムネイル左・文字右の横型に組み替え、4枚を一度に見渡せるようにする。
   ※上のカード基底ルール（display:flex）と詳細度が同じなので、必ずこの位置より
     後ろに置くこと。前に書くと flex に負けて縦積みのままになる。 */
@media (max-width: 639px) {
  .gateway-start-grid > a,
  .gateway-purpose-grid > a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s3);
    padding: var(--s3);
  }
  .gateway-start-grid > a > img {
    grid-column: 1;
    grid-row: 1 / span 4;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
  }
  .gateway-start-grid > a > small,
  .gateway-start-grid > a > strong,
  .gateway-start-grid > a > em,
  .gateway-start-grid > a > b { grid-column: 2; padding: 0; }

  .gateway-purpose-grid > a > .gateway-purpose-image { grid-column: 1; }
  .gateway-purpose-grid > a > .gateway-purpose-image img {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
  }
  .gateway-purpose-grid > a > div:last-child { grid-column: 2; }
  .gateway-purpose-grid > a strong,
  .gateway-purpose-grid > a em,
  .gateway-purpose-grid > a b { padding: 0; }

  .gateway-start-grid > a > b,
  .gateway-purpose-grid > a b { margin-top: var(--s1); }
}

.gateway-service-note {
  margin-top: var(--s4);
  max-width: var(--w-prose);
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--ink-muted);
}

/* --- 季節の比較バナー3枚 --- */
.gateway-priority-banner {
  position: relative;
  display: block;
  min-height: 220px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink-inverse);
  box-shadow: var(--shadow-md);
}
.gateway-priority-banner:hover { text-decoration: none; }
.gateway-priority-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.gateway-priority-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(15 16 19 / 25%) 0%, rgb(15 16 19 / 84%) 65%);
}
.gateway-priority-banner > div {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: var(--s1);
  padding: var(--s5);
}
.gateway-priority-banner small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: rgb(255 255 255 / 78%); }
.gateway-priority-banner strong { font-size: 1.125rem; line-height: 1.5; }
.gateway-priority-banner span { font-size: 0.8125rem; color: rgb(255 255 255 / 82%); }
.gateway-priority-banner b { margin-top: var(--s2); font-size: 0.875rem; }

/* --- 一覧リンクブロック（旧 article-cta） --- */
.article-cta { margin-top: var(--s6); }
.article-cta > div:first-child { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.article-cta > div:first-child > span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.article-cta > div:first-child > b { font-size: 1.0625rem; color: var(--ink-strong); }

/* --------------------------------------------------------------------------
   3. ハブページ（夏家電・家電・熱中症対策）
   -------------------------------------------------------------------------- */
.summer-hub-hero,
.appliance-home-hero,
.library-hero,
.intent-hero,
.service-guide-hero,
.product-detail-hero,
.policy-hero {
  display: grid;
  gap: var(--s6);
  align-items: center;
  margin-top: var(--s5);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.summer-hub-hero > *,
.appliance-home-hero > *,
.library-hero > *,
.intent-hero > *,
.service-guide-hero > *,
.product-detail-hero > *,
.policy-hero > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .summer-hub-hero,
  .appliance-home-hero,
  .intent-hero,
  .service-guide-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: var(--s7); }
}

.summer-hub-hero h1,
.library-hero h1,
.intent-hero h1,
.service-guide-hero h1,
.product-detail-hero h1,
.policy-hero h1,
.appliance-home-hero h1 {
  font-size: clamp(1.6rem, 5vw, 2.375rem);
  line-height: 1.4;
  color: var(--ink-strong);
}
.summer-hub-hero h1 strong,
.library-hero h1 strong { color: var(--brand); }

.summer-hub-hero p,
.library-hero p,
.intent-hero p,
.service-guide-hero p,
.product-detail-hero p,
.policy-hero p {
  margin-top: var(--s4);
  max-width: var(--w-prose);
  line-height: 1.95;
}
.summer-hub-hero small,
.library-hero small {
  display: block;
  margin-top: var(--s4);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.service-guide-visual {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.service-guide-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.summer-hub-hero > div > div,
.library-hero > a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}
.summer-hub-hero > div > div a,
.library-hero > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}
.summer-hub-hero > div > div a + a {
  background: var(--surface);
  color: var(--brand-strong);
  border: 1.5px solid var(--brand-line);
}
.summer-hub-hero figure { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; }
.summer-hub-hero figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.summer-hub-hero figcaption {
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  display: grid;
  gap: 2px;
  padding: var(--s3);
  background: rgb(255 255 255 / 92%);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.summer-hub-hero figcaption b { font-size: 0.9375rem; color: var(--ink-strong); }

/* --- カテゴリーカードのグリッド --- */
.summer-category-grid,
.blog-entry-grid > div:not(.section-heading),
.blog-featured-posts > div:not(.section-heading),
.blog-guide-archive > div:not(.section-heading),
.library-article-grid,
.business-product-grid,
.business-category-product-grid,
/* ガイドの商品カードの購入導線。これまでガイドには購入リンクが1本も無く、
   読者は記事ページへ移動しないと買えなかった（32本すべて同じ状態）。 */
.intent-buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}
.intent-buy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink) !important;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.intent-buy a:hover { border-color: var(--brand); text-decoration: none; }
/* 確認時点で安かった販売先を主ボタンにする */
.intent-buy a.cta-best {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink-inverse) !important;
}
.intent-buy a.cta-best:hover { background: var(--brand-strong); }

.intent-products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
}

.blackout-guide-page {
  background:
    linear-gradient(180deg, #fcfdfd 0%, #f4f7f7 42%, #eef3f3 100%);
}

.blackout-guide-page .article-layout {
  gap: clamp(28px, 3vw, 44px);
}

.blackout-guide-page .article-body {
  min-width: 0;
}

.blackout-guide-page .article-section {
  scroll-margin-top: 104px;
}

.blackout-guide-page .intent-hero {
  gap: var(--s5);
  padding: clamp(24px, 3vw, 38px);
  border-color: rgb(206 220 222 / 0.95);
  background:
    linear-gradient(140deg, rgb(255 255 255 / 0.98) 0%, rgb(241 247 247 / 0.97) 100%);
}

.blackout-guide-page .intent-hero-copy {
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.blackout-guide-page .intent-hero h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.blackout-guide-page .article-answer {
  margin: 0;
  max-width: 58rem;
  padding: 18px 22px;
  border: 1px solid rgb(166 196 199 / 0.95);
  border-left: 5px solid #2d7f84;
  border-radius: calc(var(--r-md) + 2px);
  background: #f1f8f8;
  box-shadow: 0 12px 28px rgb(27 68 73 / 5%);
  font-size: 1rem;
  line-height: 1.78;
}

.blackout-guide-page .article-lead {
  margin: 0;
  max-width: 56rem;
  font-size: 0.98rem;
  line-height: 1.82;
}

.blackout-guide-page .intent-hero-copy > small {
  display: block;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.7;
}

.blackout-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

.blackout-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 var(--s5);
  border-radius: 999px;
  border: 1px solid rgb(45 127 132 / 0.18);
  background: rgb(255 255 255 / 0.96);
  color: var(--brand-strong);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px rgb(24 52 55 / 5%);
}

.blackout-hero-actions a:first-child {
  background: linear-gradient(135deg, #2d7f84, #275f64);
  color: var(--ink-inverse);
  border-color: transparent;
}

.blackout-hero-side {
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.blackout-guide-page .intent-hero-visual {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 6px);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.blackout-guide-page .intent-hero-visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.blackout-hero-card {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: #f3f9f9;
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-hero-card h2 {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-strong);
}

.blackout-hero-card ul {
  display: grid;
  gap: var(--s2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.blackout-hero-card li {
  padding: var(--s3) var(--s4);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: var(--r-sm);
  background: rgb(255 255 255 / 0.92);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.8;
}

.blackout-summary-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.blackout-guide-page .article-jump-nav {
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.98);
}

.blackout-guide-page .article-jump-nav b {
  margin-bottom: var(--s3);
}

.blackout-guide-page .article-jump-nav a {
  border-radius: 999px;
  background: #f3f8f8;
  border: 1px solid rgb(206 220 222 / 0.95);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.blackout-guide-page .article-jump-nav a:hover {
  background: #eaf4f4;
  border-color: rgb(45 127 132 / 0.35);
}

.blackout-summary-card {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s5);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-summary-card > span {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: #edf7f7;
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.blackout-summary-card h3 {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-strong);
}

.blackout-summary-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--ink-muted);
}

.blackout-guide-page .intent-decision-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.blackout-guide-page .intent-decision-grid > div {
  gap: var(--s3);
  padding: var(--s4);
}

.blackout-guide-page .intent-decision-grid > div > p {
  font-size: 0.84rem;
  line-height: 1.7;
}

.blackout-compare-shell {
  display: grid;
  gap: var(--s5);
}

.blackout-compare-toolbar {
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: linear-gradient(180deg, #f9fcfc 0%, #f1f7f7 100%);
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-compare-toolbar h3 {
  font-size: 1.12rem;
  line-height: 1.5;
}

.blackout-compare-toolbar p:last-child {
  margin: var(--s2) 0 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.8;
}

.blackout-compare-buttons {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.blackout-compare-buttons button {
  display: grid;
  gap: 6px;
  padding: var(--s4);
  border: 1px solid rgb(191 208 210 / 0.95);
  border-radius: calc(var(--r-sm) + 4px);
  background: rgb(255 255 255 / 0.92);
  text-align: left;
  color: var(--ink);
}

.blackout-compare-buttons button strong {
  font-size: 0.95rem;
}

.blackout-compare-buttons button span {
  color: var(--ink-muted);
  font-size: 0.81rem;
  line-height: 1.6;
}

.blackout-compare-buttons button.is-active {
  border-color: #2d7f84;
  background: linear-gradient(135deg, #2d7f84, #275f64);
  color: var(--ink-inverse);
  box-shadow: 0 12px 28px rgb(27 68 73 / 16%);
}

.blackout-compare-buttons button.is-active span {
  color: rgb(242 250 250 / 0.92);
}

.blackout-compare-table-wrap {
  overflow-x: auto;
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-compare-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
}

.blackout-compare-table th,
.blackout-compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgb(228 236 237 / 1);
  vertical-align: top;
  text-align: left;
}

.blackout-compare-table thead th {
  background: #f5fbfb;
  color: var(--brand-strong);
  font-size: 0.86rem;
}

.blackout-compare-table tbody th > span {
  display: block;
  line-height: 1.5;
}

.blackout-compare-table tbody th > small {
  display: block;
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 0.75rem;
}

.blackout-table-stars {
  color: #d28a17;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}

.blackout-table-rating {
  display: grid;
  gap: 6px;
}

.blackout-table-rating p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.7;
}

.blackout-compare-table .is-cheapest {
  background: #f3f9ef;
  color: #2c6b2f;
  font-weight: 700;
}

.blackout-product-flow {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

.blackout-product-entry {
  display: grid;
  gap: var(--s5);
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 6px);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.98) 0%, rgb(248 251 251 / 0.98) 100%);
  box-shadow: 0 12px 28px rgb(20 44 48 / 5%);
}

.blackout-product-entry-head {
  display: flex;
  gap: var(--s4);
  justify-content: space-between;
  align-items: flex-start;
}

.blackout-product-entry-head h3 {
  margin-top: var(--s2);
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  line-height: 1.45;
}

.blackout-product-rank {
  display: grid;
  gap: 6px;
  min-width: 144px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #edf7f7;
  color: var(--brand-strong);
  text-align: right;
}

.blackout-product-rank span {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.blackout-product-rank small {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.blackout-product-entry-main {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: start;
}

.blackout-product-figure {
  margin: 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgb(224 232 233 / 1);
  border-radius: calc(var(--r-md) + 4px);
  background: #fff;
}

.blackout-product-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.blackout-product-entry-body {
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.blackout-product-target {
  margin: var(--s2) 0 0;
  color: #a7272d;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.7;
}

.blackout-product-pitch {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgb(225 234 235 / 1);
  border-left: 4px solid rgb(45 127 132 / 0.75);
  border-radius: calc(var(--r-sm) + 8px);
  background: #fbfdfd;
  font-size: 0.92rem;
  line-height: 1.82;
}

.blackout-rating-summary {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgb(225 234 235 / 1);
  border-radius: calc(var(--r-sm) + 8px);
  background: #fcfefe;
}

.blackout-rating-lead {
  display: grid;
  gap: 6px;
}

.blackout-rating-lead span,
.blackout-rating-grid span {
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-weight: 700;
}

.blackout-rating-lead strong,
.blackout-rating-grid strong {
  color: #d28a17;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.blackout-rating-lead p,
.blackout-rating-grid p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.7;
}

.blackout-rating-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blackout-rating-grid > div {
  display: grid;
  gap: 4px;
  padding: 14px 15px;
  border-radius: 16px;
  background: #f5f9f9;
}

.blackout-rating-grid > div.is-current {
  background: #e9f5f5;
  outline: 1px solid rgb(45 127 132 / 0.25);
}

.blackout-price-board {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blackout-price-board > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgb(226 233 234 / 1);
  border-radius: 14px;
  background: #fafcfc;
}

.blackout-price-board > div.is-cheapest {
  border-color: #9ac992;
  background: #f3f9ef;
}

.blackout-price-board span {
  color: var(--ink-faint);
  font-size: 0.76rem;
  font-weight: 700;
}

.blackout-price-board strong {
  font-size: 0.96rem;
  line-height: 1.5;
}

.blackout-spec-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--s1) 0 0;
}

.blackout-spec-list div {
  padding: 12px;
  border-radius: 14px;
  background: #f5f9f9;
}

.blackout-spec-list dt {
  color: var(--ink-faint);
  font-size: 0.74rem;
}

.blackout-spec-list dd {
  margin: 6px 0 0;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.55;
}

.blackout-product-points {
  display: grid;
  gap: var(--s2);
  padding-left: 1.1rem;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
  line-height: 1.68;
}

.blackout-product-caution {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
  line-height: 1.72;
}

.blackout-store-actions {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blackout-store-button {
  justify-content: center;
  min-height: 46px;
  border-radius: 14px !important;
  font-size: 0.86rem !important;
  font-weight: 800;
}

.blackout-store-rakuten {
  border: 1px solid #d73f3f !important;
  background: #fff4f4 !important;
  color: #b52a2a !important;
}

.blackout-store-amazon {
  border: 1px solid #2c3947 !important;
  background: #f6f7f9 !important;
  color: #1f2b37 !important;
}

.blackout-store-rakuten.blackout-store-best {
  background: linear-gradient(135deg, #d93030, #b21717) !important;
  color: var(--ink-inverse) !important;
  border-color: transparent !important;
}

.blackout-store-amazon.blackout-store-best {
  background: linear-gradient(135deg, #232f3e, #101820) !important;
  color: var(--ink-inverse) !important;
  border-color: transparent !important;
}

.blackout-price-note {
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.7;
}

.blackout-product-links {
  margin: 0;
}

.blackout-product-links a {
  color: var(--brand-strong);
  font-weight: 700;
  text-decoration: none;
}

.blackout-scene-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.blackout-scene-visual {
  margin: var(--s5) 0 0;
  overflow: hidden;
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 6px);
  background: #fff;
  box-shadow: 0 12px 28px rgb(20 44 48 / 5%);
}

.blackout-scene-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}

.blackout-scene-visual figcaption {
  padding: 14px 18px 16px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.blackout-authority-grid,
.blackout-detail-sections {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
}

@media (max-width: 820px) {
  .blackout-product-entry-head,
  .blackout-product-entry-main {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .blackout-product-rank {
    min-width: 0;
    text-align: left;
  }

  .blackout-rating-grid,
  .blackout-price-board,
  .blackout-store-actions,
  .blackout-spec-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.blackout-authority-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ガイドの「公表仕様の引用」ブロック。メーカーの公表値を引用として並べ、
   出典リンクを添える。画像は掲載商品の販売ページ画像で、メーカーの公式写真は
   使わない（許諾を取っていないため）。 */
.guide-figure-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.guide-figure-card {
  display: grid;
  gap: var(--s3);
  align-content: start;
  margin: 0;
  padding: var(--s5);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.guide-figure-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f4f8f8;
  border-radius: var(--r-md);
}

.guide-figure-card figcaption {
  display: grid;
  gap: var(--s3);
}

.guide-figure-card figcaption > span {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: #edf7f7;
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

.guide-figure-card h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
}

.guide-figure-card blockquote {
  margin: 0;
  padding-left: var(--s4);
  border-left: 3px solid var(--brand-strong);
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

.guide-figure-source {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.7;
}

.guide-figure-source a {
  color: var(--brand-strong);
  font-weight: 700;
}

@media (max-width: 820px) {
  .guide-figure-card {
    padding: 18px;
  }
}

.blackout-authority-card,
.blackout-detail-card {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s5);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-authority-card > span {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: #edf7f7;
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

.blackout-authority-card h3,
.blackout-detail-card h3 {
  font-size: 1.05rem;
  line-height: 1.55;
}

.blackout-authority-card p,
.blackout-detail-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

.blackout-authority-card a {
  color: var(--brand-strong);
  font-weight: 700;
}

.blackout-detail-card ul {
  display: grid;
  gap: var(--s2);
  padding-left: 1.1rem;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.75;
}

.blackout-scene-card {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s5);
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-scene-card > span {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: #edf7f7;
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

.blackout-scene-card h3 {
  font-size: 1.05rem;
  line-height: 1.55;
}

.blackout-scene-card ul {
  display: grid;
  gap: var(--s2);
  padding-left: 1.1rem;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.75;
}

.blackout-guide-page .intent-guide-body > section {
  padding: clamp(var(--s4), 2.4vw, var(--s6));
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-guide-page .intent-guide-body > section + section {
  margin-top: var(--s4);
}

.blackout-guide-page .intent-guide-body > section h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
}

.blackout-guide-page .intent-guide-body > section ul {
  display: grid;
  gap: var(--s2);
  padding-left: 1.2rem;
}

.blackout-guide-page .article-jump-nav,
.blackout-guide-page .service-comparison-table,
.blackout-guide-page .intent-products > article,
.blackout-guide-page .article-method-note,
.blackout-guide-page .article-cta {
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-guide-page .article-method-note,
.blackout-guide-page .article-cta,
.blackout-guide-page .rail-pick {
  border-color: rgb(206 220 222 / 0.95);
  background: rgb(255 255 255 / 0.97);
}

.blackout-guide-page .article-toc-rail {
  display: grid;
  gap: var(--s4);
  align-content: start;
}

.blackout-guide-page .article-toc,
.blackout-guide-page .rail-pick {
  border: 1px solid rgb(206 220 222 / 0.95);
  border-radius: calc(var(--r-md) + 4px);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 10px 24px rgb(20 44 48 / 5%);
}

.blackout-guide-page .rail-pick {
  padding: var(--s5);
}

.blackout-guide-page .rail-pick strong {
  line-height: 1.55;
}

.blackout-guide-page .rail-pick p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.75;
}

@media (min-width: 900px) {
  .blackout-guide-page .intent-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  }

  .blackout-guide-page .blackout-hero-side {
    position: sticky;
    top: 88px;
  }

  .blackout-guide-page .intent-products {
    gap: var(--s5);
  }
}

@media (min-width: 1100px) {
  .blackout-product-grid > .blackout-product-card {
    flex-basis: 100%;
  }

  .blackout-product-card {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .blackout-product-card img {
    max-height: 220px;
  }
}

@media (max-width: 720px) {
  .blackout-guide-page .intent-hero {
    padding: 22px 18px;
  }

  .blackout-guide-page .article-answer {
    padding: 16px 16px 16px 18px;
  }

  .blackout-guide-page .article-jump-nav {
    gap: 10px;
  }

  .blackout-guide-page .article-jump-nav a {
    width: 100%;
    justify-content: center;
  }

  .blackout-summary-card,
  .blackout-authority-card,
  .blackout-detail-card,
  .blackout-scene-card,
  .blackout-product-entry {
    padding: 18px;
  }

  .blackout-product-card {
    grid-template-columns: 1fr;
  }

  .blackout-product-card img {
    aspect-ratio: 4 / 3;
  }

  .blackout-rating-grid,
  .blackout-price-board,
  .blackout-store-actions {
    grid-template-columns: 1fr;
  }

  .blackout-spec-list {
    grid-template-columns: 1fr;
  }
}

.summer-category-grid > a,
.blog-entry-grid > div:not(.section-heading) > a,
.blog-featured-posts > div:not(.section-heading) > article,
.blog-guide-archive > div:not(.section-heading) > article,
.library-article-grid > article,
.business-product-grid > article,
.business-category-product-grid > article,
.intent-products > article {
  flex: 1 1 260px;
}

.summer-category-grid > a {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.summer-category-grid > a:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; }
.summer-category-grid > a > div:first-child { position: relative; }
/* カテゴリー画像と楽天の商品写真（fitin=275:275 の正方形）が混在する。
   cover だと正方形側が36〜51%切れるため contain に統一する。 */
.summer-category-grid > a img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--surface); }
.summer-category-grid > a > div:first-child > span {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: rgb(24 26 30 / 85%);
  color: var(--ink-inverse);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
}
.summer-category-grid > a > small { padding: var(--s4) var(--s4) 0; font-size: 0.75rem; color: var(--ink-muted); }
.summer-category-grid > a > h3 { padding: var(--s1) var(--s4) 0; }
.summer-category-grid > a > p { padding: var(--s2) var(--s4) 0; font-size: 0.875rem; line-height: 1.8; color: var(--ink-muted); }
.summer-category-grid > a > b { margin-top: auto; padding: var(--s4); font-size: 0.875rem; color: var(--link); }

/* --- 困りごとカード --- */
.summer-purpose > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
}
.summer-purpose article {
  flex: 1 1 280px;
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.summer-purpose article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--ink-inverse);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
}
.summer-purpose article p { font-size: 0.875rem; line-height: 1.8; color: var(--ink-muted); }
.summer-purpose article > div { display: grid; gap: var(--s2); margin-top: var(--s2); }
.summer-purpose article > div a { font-size: 0.875rem; font-weight: 700; }

/* --- 夏ハブの近道カード --- */
.summer-fast-track-grid,
.summer-goods-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
}
.summer-fast-track-grid .summer-fast-track-card,
.summer-fast-track-grid .summer-goods-card,
.summer-goods-grid .summer-fast-track-card,
.summer-goods-grid .summer-goods-card {
  flex: 1 1 220px;
}
.summer-fast-track-card,
.summer-goods-card {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
}
.summer-fast-track-card:hover,
.summer-goods-card:hover {
  border-color: var(--brand-line);
  box-shadow: 0 10px 26px rgb(15 30 50 / 10%);
  text-decoration: none;
}
.summer-fast-track-card small {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.08em;
}
.summer-fast-track-card strong,
.summer-goods-card strong {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-strong);
}
.summer-fast-track-card p,
.summer-goods-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-muted);
}
.summer-fast-track-card b,
.summer-goods-card b {
  margin-top: auto;
  font-size: 0.875rem;
  color: var(--link);
}
.summer-goods-bridge {
  margin-top: var(--s8);
  padding: var(--s6);
  background: linear-gradient(180deg, rgb(255 249 244 / 100%), rgb(255 255 255 / 100%));
  border: 1px solid rgb(215 177 121 / 35%);
  border-radius: var(--r-lg);
}
.summer-goods-card {
  grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
  align-items: center;
  padding: var(--s4);
}
/* ここも商品写真。正方形以外の写真が来ると cover で切れるため contain。 */
.summer-goods-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
}
.summer-goods-card > div {
  display: grid;
  gap: var(--s2);
}
@media (max-width: 639px) {
  .summer-goods-card {
    grid-template-columns: 1fr;
  }
}

/* --- 結論ボックス --- */
.method-section,
.guide-answer,
.answer-capsule,
.heatstroke-search-answer,
.business-direct-answer {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-left: 5px solid var(--ink-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.answer-capsule-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brand); }
.method-section h1,
.guide-answer h1,
.room-aircon-page .article-hero-copy h1 {
  font-size: clamp(1.6rem, 5vw, 2.375rem);
  line-height: 1.35;
  color: var(--ink-strong);
}
.method-section h2,
.guide-answer h2 { font-size: 1.25rem; }
.method-section p,
.guide-answer p,
.answer-capsule p {
  margin-top: var(--s3);
  max-width: var(--w-prose);
  font-size: 0.9375rem;
  line-height: 1.95;
}

/* --- ハブ共通FAQ --- */
.home-faq > div:last-child,
.summer-faq > div:last-child,
.heatstroke-faq > div:last-child,
.product-faq > div:last-child { margin-top: var(--s5); max-width: var(--w-content); }

.home-faq details,
.summer-faq details,
.heatstroke-faq details,
.product-faq details,
.about-page details {
  margin-bottom: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.home-faq summary,
.summer-faq summary,
.heatstroke-faq summary,
.product-faq summary,
.about-page summary {
  cursor: pointer;
  padding: var(--s4);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.home-faq details > p,
.summer-faq details > p,
.heatstroke-faq details > p,
.product-faq details > p,
.about-page details > p {
  padding: 0 var(--s4) var(--s4);
  font-size: 0.9375rem;
  line-height: 1.95;
}

/* --------------------------------------------------------------------------
   4. 記事一覧（ライブラリー）
   -------------------------------------------------------------------------- */
.library-controls { display: grid; gap: var(--s3); margin-top: var(--s5); }
.filter-row { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.article-library-page {
  background:
    radial-gradient(circle at top left, rgb(255 255 255 / 0.94), transparent 28%),
    linear-gradient(180deg, #fcf8f3 0%, #f6efe7 42%, #f2eae1 100%);
}

.library-trust-hero {
  position: relative;
  overflow: hidden;
  margin-top: var(--s5);
  border: 1px solid rgb(223 211 201 / 0.9);
  border-radius: 40px;
  background: #eee2d4;
  box-shadow: 0 26px 70px rgb(53 33 18 / 11%);
}

.library-trust-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-trust-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(249 243 237 / 0.97) 0%, rgb(249 243 237 / 0.94) 40%, rgb(249 243 237 / 0.7) 60%, rgb(249 243 237 / 0.2) 100%),
    linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0));
}

.library-trust-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 1.25rem;
  padding: 1.75rem;
}

.library-trust-hero-copy {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  padding: 0.9rem;
  min-width: 0;
}

.library-trust-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.library-trust-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.78rem;
  border: 1px solid rgb(197 31 51 / 0.18);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.76);
  color: #7b2932;
  font-size: 0.75rem;
  font-weight: 700;
}

.library-trust-kicker {
  margin: 0;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.library-trust-hero h1 {
  margin: 0;
  font-size: clamp(2.9rem, 6vw, 4.6rem);
  max-width: 7.1em;
  line-height: 1.02;
  letter-spacing: -0.06em;
  color: var(--ink-strong);
  text-wrap: balance;
}

.library-trust-hero h1 strong {
  color: var(--brand);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: rgb(197 31 51 / 0.24);
  text-decoration-thickness: 0.18em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}

.library-trust-lead,
.library-trust-note {
  margin: 0;
  max-width: 38rem;
  color: #3f352e;
}

.library-trust-lead {
  font-size: 1.02rem;
  line-height: 1.82;
}

.library-trust-note {
  font-size: 0.9rem;
  line-height: 1.8;
}

.library-trust-hero-side {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.library-trust-sidebox {
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: var(--shadow-md);
}

.library-trust-sidebox small {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.library-trust-sidebox strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ink-strong);
}

.library-trust-sidebox p {
  margin: 0.5rem 0 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

.library-jump-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.library-jump-card {
  padding: 1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(255 249 245 / 0.96) 100%);
  box-shadow: var(--shadow-md);
  color: inherit;
  text-decoration: none;
}

.library-jump-card b {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink-strong);
  font-size: 0.94rem;
  line-height: 1.45;
}

.library-jump-card span {
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.library-block {
  margin-top: 1.35rem;
  padding: 1.4rem;
  border: 1px solid rgb(228 217 208 / 0.92);
  border-radius: 30px;
  background: linear-gradient(180deg, rgb(255 253 250 / 0.98) 0%, rgb(255 248 242 / 0.98) 100%);
  box-shadow: var(--shadow-md);
}

.library-block-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.library-block-head h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.library-block-head p {
  margin: 0.45rem 0 0;
  color: var(--ink-muted);
  line-height: 1.72;
}

.library-block-link {
  color: var(--brand);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.library-directory-shell,
.library-guide-tracks,
.library-hub-shelf {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.library-directory-head {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 960px) {
  .library-directory-head {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
    align-items: end;
  }
}

.library-directory-head p,
.library-guide-tracks .section-heading p,
.library-hub-shelf .section-heading p {
  max-width: 62ch;
  color: var(--ink-muted);
  line-height: 1.85;
}

.library-directory-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.library-directory-stats article {
  display: grid;
  gap: 0.18rem;
  padding: 0.82rem 0.9rem;
  background: rgb(255 255 255 / 0.82);
  border: 1px solid rgb(231 219 211 / 0.9);
  border-radius: 18px;
}

.library-directory-stats strong {
  color: var(--ink-strong);
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1;
}

.library-directory-stats span {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.library-directory-grid,
.library-intent-grid,
.library-guide-callout-grid,
.library-policy-grid,
.library-hub-grid {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.library-directory-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.library-directory-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid rgb(232 220 211 / 0.95);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.9);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  min-height: 132px;
}

.library-directory-card:hover,
.library-guide-track:hover,
.library-hub-card:hover {
  transform: translateY(-3px);
  border-color: rgb(204 61 57 / 0.32);
  box-shadow: 0 16px 34px rgb(41 21 10 / 0.08);
  text-decoration: none;
}

.library-directory-card > img {
  width: 64px;
  height: 64px;
  padding: 0.28rem;
  border-radius: 18px;
  object-fit: contain;
  background: #f8f1e8;
  box-shadow: inset 0 0 0 1px rgb(232 220 211 / 0.75);
}

.library-directory-copy {
  display: grid;
  gap: 0.25rem;
}

.library-directory-copy small,
.library-hub-card small,
.library-guide-track small {
  color: var(--brand);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.library-directory-copy h3,
.library-guide-track h3,
.library-hub-card h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.08rem;
  line-height: 1.35;
}

.library-directory-copy p,
.library-guide-track p,
.library-hub-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.58;
}

.library-directory-card em {
  display: none;
}

.library-directory-copy b,
.library-guide-track-cta,
.library-hub-card b {
  color: var(--link);
  font-size: 0.85rem;
  font-weight: 800;
}

.library-intent-grid,
.library-guide-callout-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.library-intent-card,
.library-guide-callout {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid rgb(233 220 214 / 0.96);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.library-intent-card small,
.library-guide-callout small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 0 0.72rem;
  border-radius: 999px;
  background: rgb(197 31 51 / 0.08);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.library-intent-card:hover,
.library-guide-callout:hover,
.library-story-lead:hover,
.library-story-mini:hover,
.library-jump-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgb(41 21 10 / 0.08);
  text-decoration: none;
}

.library-intent-card strong,
.library-guide-callout strong {
  display: block;
  margin-top: 0.1rem;
  font-size: 1.24rem;
  line-height: 1.42;
  color: var(--ink-strong);
}

.library-intent-card p,
.library-guide-callout p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.72;
}

.library-hub-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.library-hub-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(233 220 214 / 0.96);
  border-radius: 24px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.library-hub-card img,
.library-hub-card .image-neutral-fallback {
  width: 100%;
  height: 118px;
  object-fit: cover;
  background: var(--surface-sunken);
}

.library-hub-card > div {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 0.95rem 1rem;
  min-height: 154px;
}

.library-story-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.library-story-lead,
.library-story-mini {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.library-story-lead img,
.library-story-lead .image-neutral-fallback {
  width: 100%;
  height: 126px;
  object-fit: cover;
}

.library-story-copy {
  display: grid;
  gap: 0.38rem;
  padding: 1rem 1.1rem;
}

.library-story-copy small {
  display: inline-flex;
  width: fit-content;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgb(255 244 241 / 1);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 800;
}

.library-story-lead .library-story-copy strong {
  font-size: 1.08rem;
  line-height: 1.36;
  color: var(--ink-strong);
}

.library-story-copy p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.72;
}

.library-story-list {
  display: contents;
}

.library-story-mini {
  display: block;
}

.library-story-mini img,
.library-story-mini .image-neutral-fallback {
  width: 100%;
  height: 126px;
  object-fit: cover;
}

.library-story-mini .library-story-copy {
  align-content: center;
  padding: 0.9rem 1rem 0.9rem 0;
}

.library-story-mini .library-story-copy strong {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-strong);
}

.library-story-mini .library-story-copy p {
  font-size: 0.84rem;
}

.library-policy-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.library-policy-card {
  min-height: 156px;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98) 0%, rgb(249 242 235 / 0.98) 100%);
}

.library-policy-card strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  color: var(--ink-strong);
}

.library-policy-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.72;
}

.library-controls input,
.library-controls select {
  width: 100%;
  min-height: 48px;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--ink);
}
.library-controls input:focus,
.library-controls select:focus { border-color: var(--brand); }

.library-section-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.library-section-tabs button {
  cursor: pointer;
  min-height: 40px;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  color: var(--ink);
}
.library-section-tabs button.active,
.library-section-tabs button[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink-inverse);
  font-weight: 700;
}
.library-result-summary { margin-top: var(--s4); font-size: 0.875rem; color: var(--ink-muted); }

/* 種別（比較記事／ガイド）の切り替え。カテゴリータブの手前に置く。 */
.library-kind-switch { display: flex; gap: 0; margin-top: var(--s4); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; width: fit-content; max-width: 100%; }
.library-kind-switch button {
  cursor: pointer;
  min-height: 42px;
  padding: var(--s2) var(--s5);
  background: var(--surface);
  border: 0;
  border-right: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
}
.library-kind-switch button:last-child { border-right: 0; }
.library-kind-switch button small { font-size: 0.8125rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.library-kind-switch button.active,
.library-kind-switch button[aria-pressed="true"] { background: var(--ink-strong); color: var(--ink-inverse); font-weight: 700; }
.library-kind-switch button.active small,
.library-kind-switch button[aria-pressed="true"] small { color: var(--ink-inverse); opacity: 0.75; }

/* 一覧は60件ずつ表示する。269件を一度に「描く」と一覧だけで35,000pxを超えるため、
   61件目以降は hidden で畳む。DOMには残すので、内部リンクとクロール経路は減らない。 */
.library-article-grid > article[hidden] { display: none !important; }
/* 一覧は60件ずつ。269件を一度に描くと一覧だけで35,000pxを超える。 */
.library-more {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  margin-top: var(--s5);
  min-height: 52px;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.library-more:hover { background: var(--surface-sunken); }
.library-more small { font-weight: 400; font-size: 0.8125rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.library-article-grid > article,
.library-heatstroke-guides > a,
.library-heatstroke-products > div > article {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
}
.library-article-grid > article:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); }
.library-card-image { position: relative; display: block; }
/* object-fit は後方の「商品写真はcontain」ブロックで指定する。
   ここで cover を書くと、順序が変わったときに切れる側へ倒れる。 */
.library-card-image img { width: 100%; aspect-ratio: 16 / 10; }
.library-card-image > span {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  padding: 2px var(--s3);
  border-radius: var(--r-full);
  background: rgb(24 26 30 / 85%);
  color: var(--ink-inverse);
  font-size: 0.6875rem;
  font-weight: 700;
}
.library-article-grid > article > div { display: flex; flex-direction: column; flex: 1; padding: var(--s4); }
.library-article-grid > article small { font-size: 0.75rem; color: var(--ink-muted); }
.library-article-grid > article h3 { margin-top: var(--s2); font-size: 1rem; line-height: 1.55; }
.library-article-grid > article h3 a { color: var(--ink-strong); text-decoration: none; }
.library-article-grid > article h3 a:hover { color: var(--brand); }
.library-article-grid > article p { margin-top: var(--s2); font-size: 0.84rem; line-height: 1.72; color: var(--ink-muted); }
.library-article-grid > article ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: 0;
  list-style: none;
}
.library-article-grid > article li {
  margin: 0;
  padding: 1px var(--s2);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  font-size: 0.6875rem;
  color: var(--ink-muted);
}
.library-card-cta { margin-top: auto; padding-top: var(--s4); font-size: 0.875rem; font-weight: 700; color: var(--link); }

.library-empty {
  display: grid;
  gap: var(--s3);
  justify-items: start;
  margin-top: var(--s5);
  padding: var(--s6);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.library-empty button {
  cursor: pointer;
  min-height: 44px;
  padding: var(--s2) var(--s5);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  border: 0;
  font-weight: 700;
}

.library-heatstroke-guides,
.library-heatstroke-products > div {
  display: grid;
  gap: var(--s4);
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* 商品写真（白背景）をカードに使うためcoverでは切れる。containで収める。 */
.library-heatstroke-guides > a img,
.library-card-image img,
.heatstroke-pick-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--surface);
}
.library-heatstroke-guides h3,
.library-article-grid h3 { overflow-wrap: anywhere; }
.library-heatstroke-guides > a > div,
.heatstroke-pick-copy { display: flex; flex-direction: column; flex: 1; gap: var(--s2); padding: var(--s4); }

.library-heatstroke-feature > header h2,
.library-heatstroke-products > header h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.18;
}

.library-heatstroke-guides > a h3,
.library-heatstroke-products > div > article h3 {
  font-size: 1.04rem;
  line-height: 1.5;
}

@media (max-width: 639px) {
  .library-trust-hero-inner,
  .library-story-layout,
  .library-story-mini {
    grid-template-columns: 1fr;
  }

  .library-jump-grid,
  .library-directory-grid,
  .library-intent-grid,
  .library-guide-callout-grid,
  .library-policy-grid,
  .library-hub-grid {
    grid-template-columns: 1fr;
  }

  .library-directory-card {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    padding: 0.95rem;
  }

  .library-directory-card > img {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }

  .library-trust-hero {
    border-radius: 28px;
  }

  .library-trust-hero-inner {
    padding: 1rem;
  }

  .library-trust-hero-copy {
    padding: 0.35rem;
  }

  .library-trust-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.5rem);
    max-width: 100%;
  }

  .library-block {
    padding: 1.1rem;
    border-radius: 26px;
  }

  .library-block-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .library-story-mini img,
  .library-story-mini .image-neutral-fallback {
    width: 100%;
    min-height: 220px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .library-jump-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-intent-grid,
  .library-guide-callout-grid,
  .library-policy-grid,
  .library-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-story-layout {
    grid-template-columns: 1fr;
  }
}

.heatstroke-pick-image { position: relative; display: block; }
.heatstroke-pick-image span {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  padding: 2px var(--s3);
  border-radius: var(--r-full);
  background: rgb(24 26 30 / 85%);
  color: var(--ink-inverse);
  font-size: 0.6875rem;
  font-weight: 700;
}
.heatstroke-pick-copy strong { font-family: var(--font-num);
  font-variant-numeric: tabular-nums; font-size: 1.125rem; color: var(--ink-strong); }
.heatstroke-pick-stores { display: grid; gap: var(--s2); margin-top: auto; }
.heatstroke-pick-stores a,
.business-product-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-navy);
  color: var(--ink-inverse);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.heatstroke-pick-stores a.store-rakuten,
.business-product-actions a.store-rakuten { background: #bf0000; }
.heatstroke-pick-stores a.store-amazon,
.business-product-actions a.store-amazon { background: #232f3e; }
.library-affiliate-note { display: block; margin-top: var(--s4); font-size: 0.75rem; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Guides index: my-best style visual navigation
   -------------------------------------------------------------------------- */
.guide-index-page.article-page {
  width: min(100% - 2 * var(--s4), 78rem);
  --w-article-column: 78rem;
}

.guide-index-page,
.guide-index-page * {
  box-sizing: border-box;
}

.guide-index-page article {
  width: min(100% - 2 * var(--s4), var(--w-page));
  max-width: none;
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr);
  gap: var(--s6);
  align-items: center;
  margin-top: var(--s4);
  padding: clamp(var(--s5), 3.2vw, var(--s7));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 94%) 48%, rgb(255 248 246 / 88%) 100%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}

.guide-hero-copy {
  display: grid;
  gap: var(--s4);
  max-width: 760px;
  min-width: 0;
}

.guide-hero h1 {
  margin: 0;
  max-width: 12.5em;
  font-size: clamp(2rem, 1.2rem + 2.1vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.028em;
  overflow-wrap: normal;
}

.guide-hero h1 span,
.guide-hero h1 strong {
  display: block;
}

.guide-hero h1 strong {
  color: var(--brand);
  font-weight: 900;
  white-space: nowrap;
}

.guide-hero-copy > p:not(.eyebrow) {
  max-width: 42rem;
  margin: 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
  line-height: 1.9;
}

.guide-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
}

.guide-hero-stats div {
  min-width: 112px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 84%);
  box-shadow: var(--shadow-xs);
}

.guide-hero-stats dt {
  margin: 0 0 2px;
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 900;
}

.guide-hero-stats dd {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-num);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.1;
}

.guide-hero-actions,
.guide-index-page .guide-card-grid,
.guide-feature-grid,
.guide-category-grid {
  display: grid;
  gap: var(--s3);
}

.guide-hero-actions {
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: center;
}

.guide-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s5);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.guide-hero-actions a:first-child {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}

.guide-hero-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.guide-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / 32%), transparent 42%);
}

.guide-hero-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.guide-hero > * {
  min-width: 0;
}

.guide-category-section,
.guide-feature-section,
.guide-shelf {
  margin-top: var(--s7);
}

.guide-category-grid {
  /* 7ジャンル＋「すべてのガイド」で8枚。4列にすると2行できれいに埋まる。
     3列だと最終行が1枚だけ残っていた。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s4);
}

.guide-category-card,
.guide-card {
  color: var(--ink);
  text-decoration: none;
}

.guide-category-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--s3);
  row-gap: 2px;
  align-content: start;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: none;
}

.guide-category-card img { grid-row: 1 / span 3; align-self: center; }
.guide-category-card span,
.guide-category-card h3,
.guide-category-card p { grid-column: 2; }
/* すべてのガイドも、ほかの入口と同じ写真アイコン付きにする。 */
.guide-category-card-all { grid-template-columns: 64px minmax(0, 1fr); }

.guide-category-card:hover,
.guide-card:hover {
  border-color: var(--brand);
  text-decoration: none;
  transform: translateY(-1px);
}

.guide-category-card img {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  object-fit: cover;
  background: #f7f1eb;
  box-shadow: 0 8px 18px rgb(31 24 20 / 0.08);
}

/* 2026-09-13: ラベルは赤いピルだった。見出し・数字・リンク・アイコンまで
   同じ赤で、強調がどこにも効いていなかったので、ここは文字だけにする。 */
.guide-category-card span,
.guide-card-label {
  width: fit-content;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.guide-category-card h3 {
  margin: 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.guide-category-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.guide-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s4);
}

.guide-index-page .guide-card-grid {
  /* 棚は1棚4本。4列にすると1行で収まり、縦の長さが目に見えて減る
     （3列だと4本目だけが2行目に落ちて、棚ごとに空きが出ていた）。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s4);
}

.guide-card {
  display: grid;
  align-content: start;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.guide-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-muted, #f1f1ef);
}

.guide-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.guide-card:hover .guide-card-thumb img { transform: scale(1.03); }

.guide-card-body {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: var(--s3) var(--s4) var(--s4);
}

.guide-card-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.guide-card-note {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 0.86rem;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 上段の3枚だけ大きく見せる。104枚が同じ大きさで並んでいて、
   どれから読めばいいのかが分からない状態だった。 */
.guide-card-feature .guide-card-thumb { aspect-ratio: 3 / 2; }
.guide-card-feature .guide-card-title { font-size: 1.12rem; -webkit-line-clamp: 2; }

.guide-shelf-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.guide-shelf-heading img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* 「すべてのガイド」の見出しにはアイコンが無い。子が1つだけだと grid の
   1列目（72px）に本文が入り、h2 と説明文が72px幅で1文字ずつ折り返されて
   縦書きのように見えていた（/guides、2026-09-07に実測）。子が1つなら
   2列ぶんを使う。 */
.guide-shelf-heading > div:only-child {
  grid-column: 1 / -1;
}

.guide-shelf-heading h2,
.guide-shelf-heading p {
  margin: 0;
}

.guide-shelf-heading p:not(.eyebrow) {
  color: var(--ink-muted);
}

@media (max-width: 1180px) {
  .guide-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-index-page .guide-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .guide-index-page .guide-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .guide-index-page.article-page {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--s3);
  }
  .guide-index-page article {
    width: 100%;
    max-width: 100%;
  }
  .guide-hero {
    grid-template-columns: 1fr;
    gap: var(--s4);
    padding: var(--s4) var(--s3);
    width: calc(100% - var(--s4));
    max-width: 100%;
    margin-inline: auto;
  }
  .guide-hero,
  .guide-hero-copy,
  .guide-hero-actions,
  .guide-hero-actions a,
  .guide-hero-stats,
  .guide-hero-stats div,
  .guide-hero-visual,
  .guide-hero-visual img {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
  .guide-hero h1 {
    max-width: 100%;
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .guide-hero h1 strong { white-space: normal; }
  .guide-hero-actions,
  .guide-category-grid,
  .guide-feature-grid,
  .guide-index-page .guide-card-grid { grid-template-columns: 1fr; }
  .guide-hero-actions,
  .guide-hero-actions a,
  .guide-hero-visual,
  .guide-hero-visual img { width: 100%; max-width: 100%; }
  .guide-hero-actions a { padding-inline: var(--s3); }
  .guide-hero-visual { order: -1; }
  .guide-hero-stats { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 100%; }
  .guide-hero-stats div:last-child { grid-column: auto; }
  .guide-hero-stats div { min-width: 0; padding: var(--s2); }
  .guide-hero-stats dd { font-size: 1rem; }
  .guide-category-card {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    min-height: 0;
  }
  .guide-category-card img { grid-row: span 3; }
  .guide-category-card p { font-size: 0.875rem; }
  .guide-card { min-height: 0; padding: var(--s4); }
}

.update-chip {
  align-self: start;
  padding: 2px var(--s3);
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.intent-guide-hub > div:last-child {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.intent-guide-card {
  display: block;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
}
.intent-guide-card:hover { border-color: var(--brand); text-decoration: none; }
.intent-guide-copy { display: grid; gap: var(--s2); }
.intent-guide-copy > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
}
.intent-guide-copy p { font-size: 0.875rem; line-height: 1.8; color: var(--ink-muted); }
.intent-guide-copy b { font-size: 0.875rem; color: var(--link); }

/* --------------------------------------------------------------------------
   5. ガイド・商品詳細・固定ページ
   -------------------------------------------------------------------------- */
.service-guide-page article,
.intent-guide-page article,
.product-detail-page article,
.about-page article,
.room-aircon-page article { max-width: var(--w-content); }

.service-guide-answer,
.service-primary-cta {
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.service-guide-answer {
  border-left: 5px solid var(--ink-strong);
  box-shadow: var(--shadow-sm);
}

.service-primary-cta {
  display: grid;
  gap: var(--s4);
  align-items: center;
  border-color: var(--brand-line);
  background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

@media (min-width: 900px) {
  .service-primary-cta {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  }
}

.service-primary-cta small {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.service-primary-cta b {
  display: block;
  margin-top: var(--s2);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-strong);
}

.service-primary-cta p {
  margin-top: var(--s3);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-muted);
}

.service-comparison-table,
.heatstroke-table-wrap {
  margin-top: var(--s5);
  max-width: var(--w-content);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.service-comparison-table table,
.heatstroke-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.service-comparison-table th,
.service-comparison-table td,
.heatstroke-table-wrap th,
.heatstroke-table-wrap td {
  padding: var(--s3) var(--s4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.service-comparison-table thead th,
.heatstroke-table-wrap thead th {
  background: var(--surface-navy);
  color: var(--ink-inverse);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.service-comparison-table tbody th,
.heatstroke-table-wrap tbody th { background: var(--surface-sunken); font-weight: 700; }

.check-grid,
.service-decision-grid,
.intent-decision-grid,
.business-plan-grid,
.policy-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.check-grid > div,
.service-decision-grid > div,
.intent-decision-grid > div,
.business-plan-grid > div,
.policy-grid > div {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.check-grid > div > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--ink-inverse);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
}
.check-grid > div > p { font-size: 0.875rem; line-height: 1.85; color: var(--ink-muted); }

.service-decision-grid > div > span,
.intent-decision-grid > div > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--ink-inverse);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
}

.service-decision-grid > div > p,
.intent-decision-grid > div > p {
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--ink-muted);
}

.product-toc,
.about-section,
.policy-section,
.product-detail-section,
.content-section { margin-top: var(--s6); }

.product-buy-box {
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}
.product-spec-list,
.product-specs,
.product-identity {
  display: grid;
  margin-top: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 0.875rem;
}
.product-spec-list > div,
.product-specs > div,
.product-identity > div { display: grid; grid-template-columns: 9em 1fr; border-bottom: 1px solid var(--line); }
.product-spec-list > div:last-child,
.product-specs > div:last-child,
.product-identity > div:last-child { border-bottom: 0; }
.product-spec-list dt,
.product-specs dt,
.product-identity dt { padding: var(--s2) var(--s3); background: var(--surface-sunken); font-weight: 700; }
.product-spec-list dd,
.product-specs dd,
.product-identity dd { margin: 0; padding: var(--s2) var(--s3); background: var(--surface); }

.product-model { font-size: 0.9375rem; color: var(--ink-muted); }
.product-price { margin-top: var(--s3); font-size: 0.9375rem; }
.product-price strong { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.product-byline { margin-top: var(--s4); }
.product-feature-story { margin-top: var(--s5); max-width: var(--w-prose); }
.product-feature-story > * + * { margin-top: var(--s3); }

.service-checklist {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
  padding-left: 1.2rem;
}

.service-checklist li,
.service-cautions li,
.service-sources li {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-muted);
}

.service-guide-faq > div:last-child {
  margin-top: var(--s5);
  max-width: var(--w-content);
}

.official-service-link-primary {
  display: grid;
  gap: var(--s2);
  align-content: start;
  min-height: 100%;
  padding: var(--s4);
  background: var(--brand);
  border-radius: var(--r-md);
  color: var(--ink-inverse);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.official-service-link-primary:hover {
  background: var(--brand-strong);
  color: var(--ink-inverse);
  text-decoration: none;
}

.official-service-link-primary small {
  color: rgb(255 255 255 / 86%);
  letter-spacing: normal;
  font-weight: 500;
}
.product-related { margin-top: var(--s6); }

.pros-cons { display: grid; gap: var(--s4); margin-top: var(--s5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pros-cons > div { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }

.source-note,
.domestic-note,
.article-method-note,
.campaign-disclosure,
.service-sources,
.business-sources,
.policy-facts,
.product-byline {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--ink-muted);
}

.text-link { font-weight: 700; }
.product-back { display: block; margin-top: var(--s5); font-size: 0.875rem; font-weight: 700; }
/* 単独で置く「戻る」導線。高さ20pxではタップし分けられないため44pxを確保する */
.product-back a { display: inline-flex; align-items: center; min-height: 44px; }

/* --------------------------------------------------------------------------
   6. フッター（トップ・ハブ共通の3ブロック型）
   -------------------------------------------------------------------------- */
main > footer > div:first-child p {
  max-width: var(--w-prose);
  margin-top: var(--s3);
  font-size: 0.875rem;
  line-height: 1.85;
}
main > footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
  font-size: 0.875rem;
}
main > footer nav a { color: rgb(255 255 255 / 88%); }

/* --------------------------------------------------------------------------
   7. 熱中症対策ページ・そのほかの残存パーツ
   -------------------------------------------------------------------------- */
.heat-alert-banner {
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
/* 発表中は背景・見出しも警告色にして、ひと目で危険度が伝わるようにする */
.heat-alert-alert { border-left-color: #f59e0b; border-color: #fcd34d; background: #fffbeb; }
.heat-alert-alert .heat-alert-copy > strong { color: #b45309; font-size: 1.0625rem; }
.heat-alert-alert .heat-alert-copy > strong::before { content: "⚠ "; }
.heat-alert-alert .heat-alert-head { border-bottom-color: #fde68a; }
.heat-alert-special { border-left-color: var(--brand); border-color: #f5b7c0; background: #fdf1f3; }
.heat-alert-special .heat-alert-copy > strong { color: var(--brand-strong); font-size: 1.0625rem; }
.heat-alert-special .heat-alert-copy > strong::before { content: "⚠ "; }
.heat-alert-special .heat-alert-head { border-bottom-color: #f5c6cd; }
.heat-alert-none { border-left-color: var(--accent-good); }

.heat-alert-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.heat-alert-head > b { font-size: 0.9375rem; color: var(--ink-strong); }
.heat-alert-chip {
  padding: 2px var(--s3);
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.heat-alert-chip.level-alert { background: #fef3c7; color: #92400e; }
.heat-alert-chip.level-special { background: var(--brand-soft); color: var(--brand-strong); }
.heat-alert-chip.level-none { background: var(--accent-good-soft); color: var(--accent-good); }

.heat-alert-period-tabs { display: flex; gap: 0; margin-left: auto; border: 1px solid var(--line-strong); border-radius: var(--r-full); overflow: hidden; }
.heat-alert-period-tabs button {
  cursor: pointer;
  min-height: 34px;
  padding: 0 var(--s4);
  background: var(--surface);
  border: 0;
  font-size: 0.8125rem;
}
.heat-alert-period-tabs button[aria-pressed="true"] { background: var(--surface-navy); color: var(--ink-inverse); font-weight: 700; }

.heat-alert-region { display: flex; align-items: center; gap: var(--s2); }
.heat-alert-region > span { font-size: 0.75rem; font-weight: 700; color: var(--ink-muted); }
.heat-alert-region select {
  min-height: 34px;
  padding: 0 var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit;
  font-size: 0.875rem;
}

.heat-alert-body {
  display: grid;
  gap: var(--s4);
  padding-top: var(--s4);
}
@media (min-width: 900px) { .heat-alert-body { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }

.heat-alert-copy strong { display: block; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-strong); }
.heat-alert-copy > p { margin-top: var(--s2); font-size: 0.875rem; line-height: 1.85; color: var(--ink-muted); }
.heat-alert-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: 0.8125rem; }
/* 外部リンク2本は文中ではなく独立した導線なので、タップ領域を44pxにする */
.heat-alert-links a { display: inline-flex; align-items: center; min-height: 44px; }
.heat-alert-links small { color: var(--ink-muted); }

/* 天気: 今日/明日の2枚ミニカード */
.heat-alert-weather { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.heat-alert-weather-empty {
  grid-column: 1 / -1;
  padding: var(--s4);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.weather-day {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--s3);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
}
.weather-day.is-active { background: var(--surface); border-color: var(--link); box-shadow: var(--shadow-sm); }
.weather-day > small { font-size: 0.75rem; font-weight: 700; color: var(--ink-muted); }
.weather-icon { font-size: 1.75rem; line-height: 1.2; }
.weather-label { font-size: 0.75rem; color: var(--ink-muted); }
.weather-temps { display: flex; align-items: baseline; gap: var(--s2); font-variant-numeric: tabular-nums; }
.weather-temps b { font-size: 1.375rem; color: #dc2626; }
.weather-temps em { font-size: 1rem; font-style: normal; color: #2563eb; }
.weather-temps i { font-size: 0.6875rem; font-style: normal; }
.weather-rain { font-size: 0.75rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.heat-alert-source { margin-top: var(--s3); font-size: 0.75rem; color: var(--ink-muted); }

/* --- 熱中症ヒーロー --- */
.heatstroke-showcase {
  display: grid;
  gap: var(--s6);
  margin-top: var(--s5);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
  .heatstroke-showcase { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding: var(--s7); }
  .heatstroke-pillars { grid-column: 1 / -1; }
}
.heatstroke-season-note { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--brand); }
.heatstroke-showcase-copy h1 { margin-top: var(--s3); font-size: clamp(1.6rem, 5vw, 2.375rem); line-height: 1.4; color: var(--ink-strong); }
.heatstroke-showcase-copy > p:not(.heatstroke-season-note) { margin-top: var(--s4); max-width: var(--w-prose); line-height: 1.95; }
.heatstroke-updated { font-size: 0.8125rem; color: var(--ink-muted); }
.heatstroke-showcase-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.heatstroke-showcase-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: var(--s2) var(--s5);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}
.heatstroke-showcase-actions a:nth-child(n+2) {
  background: var(--surface);
  color: var(--brand-strong);
  border: 1.5px solid var(--brand-line);
}
.heatstroke-showcase-image { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; }
.heatstroke-showcase-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.heatstroke-showcase-image figcaption {
  position: absolute;
  left: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  display: grid;
  gap: 2px;
  padding: var(--s3);
  background: rgb(255 255 255 / 92%);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.heatstroke-showcase-image figcaption b { font-size: 0.9375rem; color: var(--ink-strong); }
.heatstroke-pillars { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--s3); }
.heatstroke-pillars a {
  display: grid;
  gap: var(--s1);
  padding: var(--s4);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
}
.heatstroke-pillars a:hover { border-color: var(--brand); background: var(--brand-soft); }
.heatstroke-pillars b { color: var(--ink-strong); }
.heatstroke-pillars span { font-size: 0.8125rem; color: var(--ink-muted); }

.heatstroke-hero-alert {
  margin-top: var(--s5);
  padding: var(--s5);
  background: #fff5f5;
  border: 1px solid #f0c2c2;
  border-left: 5px solid #b91c1c;
  border-radius: var(--r-md);
}
.heatstroke-hero-alert b { color: #b91c1c; }
.heatstroke-hero-alert p { margin-top: var(--s2); max-width: var(--w-prose); font-size: 0.9375rem; line-height: 1.9; }

.heatstroke-evidence,
.heatstroke-editorial {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.heatstroke-evidence p,
.heatstroke-editorial p { margin-top: var(--s3); max-width: var(--w-content); font-size: 0.9375rem; line-height: 1.9; }
.heatstroke-evidence > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s4);
  font-size: 0.875rem;
}

.heatstroke-search-answer em { font-style: normal; color: var(--accent-warm); }
.heatstroke-search-answer-copy { margin-top: var(--s3); max-width: var(--w-content); }
.heatstroke-search-answer-copy > * + * { margin-top: var(--s3); }
.heatstroke-search-answer-copy strong { display: block; color: #b91c1c; }
.heatstroke-search-answer-copy nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.heatstroke-search-answer-copy nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--brand-line);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

/* --- 対象切り替え（個人/企業）と企業向けブロック --- */
.audience-switcher-heading { display: grid; gap: var(--s2); max-width: var(--w-content); }
.audience-summary,
.personal-summary { margin-top: var(--s4); max-width: var(--w-prose); font-size: 0.9375rem; line-height: 1.9; color: var(--ink-muted); }

.heatstroke-heading,
.business-section-heading { display: grid; gap: var(--s2); max-width: var(--w-content); margin-top: var(--s7); }

.heatstroke-banner-grid,
.business-stock-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.heatstroke-goods-starter,
.business-readiness,
.business-operations,
.business-stock {
  margin-top: var(--s6);
}

.business-rule-card {
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.business-products > div,
.business-category-product-grid { margin-top: var(--s5); }

.business-product-grid > article,
.business-category-product-grid > article {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.business-product-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--s4); }
.business-product-copy { display: flex; flex-direction: column; flex: 1; gap: var(--s2); padding: var(--s4); }
.business-product-price { font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.business-product-note { font-size: 0.8125rem; color: var(--ink-muted); }
.business-product-actions { display: grid; gap: var(--s2); margin-top: auto; padding-top: var(--s3); }
.business-compare-link { font-size: 0.875rem; font-weight: 700; }
.heat-alert-controls,
.heat-alert-period-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.heat-alert-period-tabs button {
  cursor: pointer;
  min-height: 40px;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.875rem;
}
.heat-alert-period-tabs button[aria-selected="true"] { background: var(--accent-warm); border-color: var(--accent-warm); color: var(--ink-inverse); font-weight: 700; }
.heat-alert-source { margin-top: var(--s3); font-size: 0.75rem; color: var(--ink-muted); }

.heatstroke-emergency {
  margin-top: var(--s6);
  padding: var(--s5);
  background: #fff5f5;
  border: 1px solid #f0c2c2;
  border-left: 5px solid #b91c1c;
  border-radius: var(--r-md);
}

.audience-tabs,
.heatstroke-axis-nav,
.heatstroke-user-chooser,
.aircon-size-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.audience-tabs button,
.heatstroke-axis-nav a,
.aircon-size-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.audience-tabs button[aria-pressed="true"],
.audience-tabs button.active { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. /appliances（ブログ型ホーム）
   -------------------------------------------------------------------------- */
.blog-homepage {
  --appliance-card-image: 92px;
  display: grid;
  gap: var(--s6);
}

.blog-homepage > * {
  min-width: 0;
  max-width: 100%;
}

.blog-homepage > section {
  width: 100%;
  margin-top: 0;
  scroll-margin-top: 88px;
}

.appliance-directory-hero {
  position: relative;
  display: grid;
  gap: var(--s5);
  overflow: hidden;
  margin-top: var(--s5);
  padding: clamp(var(--s5), 4vw, var(--s7));
  border: 1px solid var(--line);
  border-radius: calc(var(--r-md) + 8px);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 96%) 0%, rgb(255 255 255 / 92%) 58%, rgb(255 255 255 / 58%) 100%),
    url("/category-laundry-2026.jpg") right center / min(44vw, 520px) auto no-repeat,
    linear-gradient(135deg, var(--surface), var(--surface-sunken));
  box-shadow: var(--shadow-sm);
}

@media (min-width: 960px) {
  .appliance-directory-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    align-items: end;
    min-height: 360px;
  }
}

.appliance-directory-copy {
  display: grid;
  gap: var(--s4);
  max-width: 760px;
}

.appliance-trust-pill {
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  padding: 0 var(--s3);
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.appliance-directory-copy h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(2.45rem, 5.4vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.06em;
  color: var(--ink-strong);
}

.appliance-directory-copy h1 strong {
  color: var(--brand);
  font-weight: inherit;
  background: linear-gradient(transparent 63%, color-mix(in srgb, var(--brand) 14%, transparent) 0);
}

.appliance-directory-copy > p:not(.appliance-trust-pill) {
  max-width: 670px;
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.9;
  color: var(--ink-muted);
}

.appliance-hero-actions,
.appliance-hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.appliance-hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.appliance-hero-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 86%);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.appliance-hero-panel {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--shadow-sm);
}

.appliance-hero-panel span {
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 800;
}

.appliance-hero-panel ul {
  display: grid;
  gap: var(--s2);
}

.appliance-hero-panel li {
  padding-left: var(--s3);
  border-left: 3px solid var(--brand);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-strong);
}

.appliance-hero-panel a {
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
}

.appliance-priority-section {
  display: grid;
  gap: var(--s4);
}

.appliance-priority-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.appliance-priority-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  min-height: 142px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.appliance-priority-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.appliance-priority-card figure {
  display: grid;
  place-items: center;
  margin: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
}

.appliance-priority-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s2);
}

.appliance-priority-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.appliance-priority-card small,
.blog-category-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appliance-priority-card small {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
}

.appliance-priority-card h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.45;
}

.appliance-priority-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.appliance-priority-card b {
  color: var(--link);
  font-size: 0.8125rem;
}

.appliance-home-hero { align-items: center; }
.blog-home-hero > img,
.appliance-home-hero > img {
  width: 100%;
  border-radius: var(--r-md);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.hero-copy .summer-kicker {
  display: block;
  margin-top: var(--s2);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand);
}
.hero-copy .lead { margin-top: var(--s4); max-width: var(--w-prose); line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
/* 主ボタンの隣に置く副リンクはパディングが無く31pxしかなかった。主ボタンと
   同じ44pxに揃えて、並んだときの高さも合わせる。 */
.hero-actions > a { display: inline-flex; align-items: center; min-height: 44px; }
.blog-home-metrics,
.home-proof-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.blog-home-metrics dt,
.home-proof-bar dt {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
  line-height: 1.2;
}
.blog-home-metrics dd,
.home-proof-bar dd { margin: 0; font-size: 0.75rem; color: var(--ink-muted); }

.appliance-decision-grid {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s6);
}
@media (min-width: 960px) {
  .appliance-decision-grid { grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr); }
}
.appliance-decision-lead,
.appliance-route-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.appliance-decision-lead { padding: var(--s5); }
.appliance-decision-lead h2 {
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.45;
}
.appliance-decision-lead > p:last-of-type {
  margin-top: var(--s3);
  max-width: var(--w-prose);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-muted);
}
.appliance-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.appliance-check-list li {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--s3);
  background: var(--brand-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  color: var(--brand-strong);
  font-size: 0.8125rem;
  font-weight: 700;
}
.appliance-section-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.appliance-section-links a {
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.appliance-route-stack { display: grid; gap: var(--s3); }
.appliance-route-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s1) var(--s3);
  min-height: 0;
  padding: var(--s4);
  color: var(--ink);
  text-decoration: none;
}
.appliance-route-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.appliance-route-card > span {
  grid-row: 1 / span 2;
  align-self: start;
  color: var(--brand);
  font-family: var(--font-num);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
}
.appliance-route-card small {
  color: var(--brand);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.appliance-route-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
.appliance-route-card p {
  grid-column: 2;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-muted);
}
.appliance-route-card b {
  grid-column: 2;
  margin-top: var(--s2);
  color: var(--link);
  font-size: 0.875rem;
}

/* blog-feature-grid は見出し＋カードラッパーの2階層。カードラッパー側を
   グリッド化しないとPCでも1列に潰れる。 */
.blog-feature-grid,
.appliance-route-section,
.blog-featured-posts {
  display: grid;
  gap: var(--s3);
}
.blog-feature-grid > .section-heading { grid-column: 1 / -1; }
.blog-feature-grid > div:not(.section-heading) {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.blog-feature-card,
.blog-entry-grid .blog-entry-card,
.blog-post-card,
.blog-entry-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
}
.blog-feature-card:hover,
.blog-entry-grid .blog-entry-card:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); text-decoration: none; }
.blog-feature-card { padding: 0; overflow: hidden; }
/* 商品写真とイメージ写真が混在する。正方形の商品写真は16:10のcoverで
   38%切れるため contain に寄せる（イメージ写真は上下に余白が入る）。 */
.blog-feature-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface-sunken); }
.blog-feature-card > div { display: flex; flex-direction: column; gap: var(--s2); flex: 1; padding: var(--s4); }
.blog-entry-card span,
.blog-feature-card small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brand); }
.blog-entry-card b,
.blog-feature-card b { margin-top: auto; font-size: 0.875rem; font-weight: 700; color: var(--link); }
.blog-entry-card-with-image figure { margin: 0; }
.blog-entry-card-with-image { padding: 0; overflow: hidden; }
.blog-entry-card-with-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--surface); }
.blog-entry-card-with-image > div { display: flex; flex-direction: column; gap: var(--s2); flex: 1; padding: var(--s4); }
.blog-entry-card p,
.blog-feature-grid p { font-size: 0.875rem; line-height: 1.8; color: var(--ink-muted); }

.blog-category-section { margin-top: var(--s5); }
.blog-category-lists { display: grid; gap: var(--s4); margin-top: var(--s5); }
.blog-category-area {
  padding: clamp(var(--s4), 3vw, var(--s5));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.blog-category-area > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.blog-category-area > header span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brand); }
.blog-category-area > header h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.4;
}
.blog-category-area > header p { font-size: 0.875rem; color: var(--ink-muted); }
.blog-category-area > header b { margin-left: auto; font-size: 0.8125rem; color: var(--ink-faint); }
.blog-category-list {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.blog-category-list li { margin: 0; }
.blog-category-list a {
  display: grid;
  grid-template-columns: var(--appliance-card-image) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: var(--s3);
  overflow: hidden;
  min-height: 100%;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.blog-category-list a:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.blog-category-item figure {
  display: grid;
  place-items: center;
  margin: 0;
  grid-row: 1 / span 2;
  width: var(--appliance-card-image);
  height: var(--appliance-card-image);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
}
.blog-category-item figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s2);
}
.blog-category-item > div {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 0;
  min-width: 0;
}
.blog-category-item small {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  padding: 2px var(--s2);
  border-radius: var(--r-full);
  background: var(--brand-soft);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.blog-category-item h4 {
  font-size: 1.08rem;
  line-height: 1.55;
}
.blog-category-item p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.blog-category-item > b {
  align-self: end;
  padding: 0;
  font-size: 0.875rem;
  color: var(--link);
}
.category-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
@media (min-width: 900px) {
  .category-filter-panel {
    padding: var(--s4) var(--s5);
  }
}
.category-filter-panel > div:first-child {
  display: grid;
  gap: 4px;
  flex: 0 1 280px;
}
.category-filter-panel > div:first-child b {
  font-size: 1rem;
  line-height: 1.5;
}
.category-filter-panel > div:first-child span {
  color: var(--ink-muted);
  font-size: 0.8125rem;
}
/* .filter-row は検索ボックス追加時に .category-filter-controls で包まれ、
   パネル直下の flex アイテムではなくなった。包んだ div は flex アイテムの
   既定 min-width:auto のせいで中身の最小幅（チップ10個＝約920px）まで
   広がり、スマホ幅では /appliances のページ全体が横に586pxはみ出していた
   （2026-09-07に実測）。ここで縮めることを許可し、横スクロールは
   .filter-row 側に任せる。 */
.category-filter-panel .category-filter-controls {
  display: grid;
  gap: var(--s2);
  flex: 1 1 620px;
  min-width: 0;
}

.category-filter-panel .filter-row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 620px;
  gap: var(--s2);
  justify-content: flex-start;
  grid-template-columns: none;
}
.category-filter-panel button,
.category-expand-button {
  cursor: pointer;
  min-height: 40px;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.category-filter-panel button.active,
.category-filter-panel button.active-category-filter { background: var(--brand); border-color: var(--brand); color: var(--ink-inverse); font-weight: 700; }
.active-category-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s3);
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.active-category-filter button {
  min-height: 34px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--link);
  font-weight: 700;
}
.category-no-results {
  margin-top: var(--s4);
  padding: var(--s5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-muted);
}
.blog-guide-archive { margin-top: var(--s6); }
.intent-guide-hub > div:last-child {
  gap: var(--s3);
  margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}
.intent-guide-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  min-height: 132px;
  padding: var(--s3);
}
/* /heatstroke のカードは画像なしで .intent-guide-copy だけを持つ。
   画像用の1列目（96px／狭幅では78px）に本文が入り、h3 が96px幅で
   折り返されていた（2026-09-07に実測）。画像が無いカードは本文に
   全列を使わせる。列数は幅で変わるので 1 / -1 で指定する。 */
.intent-guide-card > .intent-guide-copy:only-child {
  grid-column: 1 / -1;
}

.intent-guide-image {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
}
.intent-guide-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  padding: var(--s2);
  background: transparent;
  border-radius: 0;
}
.intent-guide-copy {
  min-width: 0;
  gap: 5px;
}
.intent-guide-copy > span {
  display: inline-flex;
  place-items: unset;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 24px;
  padding: 2px var(--s2);
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
}
.intent-guide-copy h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
}
.intent-guide-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.intent-guide-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .blog-homepage {
    --appliance-card-image: 78px;
    gap: var(--s5);
    width: min(100% - 2 * var(--s3), var(--w-page));
  }

  .appliance-directory-hero {
    margin-top: var(--s3);
    gap: var(--s3);
    padding: var(--s3);
    background:
      linear-gradient(180deg, rgb(255 255 255 / 98%) 0%, rgb(255 255 255 / 94%) 100%),
      url("/category-laundry-2026.jpg") right top / 150px auto no-repeat,
      var(--surface);
  }

  .appliance-trust-pill {
    min-height: 28px;
    padding-inline: var(--s2);
    font-size: 0.75rem;
  }

  .appliance-directory-copy h1 {
    max-width: 330px;
    font-size: clamp(2.15rem, 9.6vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.055em;
  }

  .appliance-directory-copy > p:not(.appliance-trust-pill) {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.9375rem;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .appliance-hero-actions a { min-height: 42px; padding-inline: var(--s3); }
  .appliance-hero-chips { gap: var(--s1); }
  .appliance-hero-chips a { min-height: 34px; padding-inline: var(--s2); font-size: 0.8125rem; }
  .appliance-hero-panel { display: none; }
  .appliance-priority-grid { grid-template-columns: 1fr; }
  .appliance-priority-card { min-height: 112px; grid-template-columns: 82px minmax(0, 1fr); }
  .appliance-priority-card figure { width: 82px; height: 82px; }
  .category-filter-panel { padding: var(--s3); }
  .category-filter-panel .filter-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .category-filter-panel button { flex: 0 0 auto; }
  .blog-category-list { grid-template-columns: 1fr; }
  .blog-category-list a { min-height: 0; }
  .intent-guide-hub > div:last-child { grid-template-columns: 1fr; }
  .intent-guide-card {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 108px;
  }
  .intent-guide-image {
    width: 78px;
    height: 78px;
  }
}

.house-ad,
.monetization-slot,
.campaign-banner-section,
.official-service-banner {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.monetization-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-muted); }

.campaign-banner-section {
  display: grid;
  gap: var(--s4);
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--brand) 14%, transparent), transparent 34%),
    linear-gradient(135deg, var(--surface), var(--surface-sunken));
}

/* --------------------------------------------------------------------------
   12. /articles/action-camera custom article layout
   -------------------------------------------------------------------------- */
.article-page-action-camera {
  --ac-brand: #1d6369;
  --ac-brand-strong: #124b52;
  --ac-marker: color-mix(in srgb, #f0d48a 72%, transparent);
  --accent-good: #1f7a59;
  --accent-warm: #c66a18;
  --accent-warm-soft: #fff4df;
  --surface: #fff;
  --surface-sunken: #f7fbfb;
  --line: #d7e3e4;
  --ink: #334155;
  --ink-strong: #162024;
  --ink-muted: #667681;
  --ink-inverse: #fff;
}

body:has(.article-page-action-camera) .site-guide-banners {
  display: none;
}

body:has(.article-v2-page-action-camera) .site-guide-banners {
  display: none;
}

.article-page-action-camera a:focus-visible,
.article-page-action-camera summary:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.article-page-action-camera .article-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.article-page-action-camera .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0 0;
  font-size: .78rem;
  color: var(--ink-muted);
}

.article-page-action-camera .breadcrumbs a {
  color: var(--ink-muted);
  text-decoration: none;
}

.article-page-action-camera .breadcrumbs a:hover {
  text-decoration: underline;
}

.article-page-action-camera .article-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

.article-page-action-camera .article-grid > * {
  min-width: 0;
}

.article-page-action-camera .article-head {
  padding: 18px 0 0;
}

.article-page-action-camera .action-camera-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: 30px;
  align-items: start;
}

.article-page-action-camera .action-camera-hero-copy {
  min-width: 0;
}

.article-page-action-camera .action-camera-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.article-page-action-camera .action-camera-hero-tags span {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  color: var(--brand);
  font-size: .72rem;
  font-weight: 700;
}

.article-page-action-camera .article-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ac-brand) 10%, #fff);
  color: var(--ac-brand);
  font-family: var(--font-num);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.article-page-action-camera .article-head h1 {
  margin: 14px 0 0;
  color: var(--ink-strong);
  font-size: clamp(2.2rem, 4.9vw, 4.15rem);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -.022em;
}

.article-page-action-camera .action-camera-hero-title {
  margin: 14px 0 12px;
  color: var(--ink-strong);
  max-width: 16em;
  font-size: clamp(1.85rem, 4.4vw, 2.55rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.022em;
  text-wrap: balance;
  overflow-wrap: normal;
}

.article-page-action-camera .action-camera-hero-title em {
  display: block;
  margin-top: 6px;
  color: var(--brand);
  font-style: normal;
  font-size: .82em;
  line-height: 1.2;
}

.article-page-action-camera .action-camera-hero-lead {
  max-width: 42rem;
  font-size: .9rem;
  line-height: 1.78;
}

.article-page-action-camera .action-camera-conclusion {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--ac-brand);
  background: color-mix(in srgb, var(--ac-brand) 5%, #fff);
  color: var(--ink-strong);
  font-size: .94rem;
  line-height: 1.88;
}

.article-page-action-camera .action-camera-conclusion b {
  color: var(--ac-brand);
}

.article-page-action-camera .action-camera-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.article-page-action-camera .hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-size: .83rem;
  font-weight: 700;
}

.article-page-action-camera .hero-action.is-solid {
  background: var(--ac-brand-strong);
  border-color: var(--ac-brand-strong);
  color: #fff;
  box-shadow: 0 10px 24px rgba(18, 75, 82, .16);
}

.article-page-action-camera .hero-action.is-ghost {
  background: #fff;
  color: var(--ac-brand);
}

.article-page-action-camera .action-camera-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.article-page-action-camera .action-camera-hero-points div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.article-page-action-camera .action-camera-hero-points small {
  display: block;
  color: var(--ink-muted);
  font-size: .66rem;
}

.article-page-action-camera .action-camera-hero-points strong {
  display: block;
  margin-top: 4px;
  color: var(--brand);
  font-size: .95rem;
  font-weight: 800;
}

.article-page-action-camera .action-camera-meta-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 16px;
  color: var(--ink-muted);
  font-size: .72rem;
}

.article-page-action-camera .action-camera-hero-visual {
  display: grid;
  gap: 12px;
  align-content: start;
}

.article-page-action-camera .action-camera-hero-main {
  overflow: hidden;
  border: 1px solid #dbe6ee;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fafc, #eef4f7);
  box-shadow: 0 18px 42px rgba(17, 18, 20, .08);
  align-self: start;
}

.article-page-action-camera .action-camera-hero-main-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 370px;
  padding: 18px 18px 6px;
}

.article-page-action-camera .action-camera-hero-main-figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 350px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .12));
}

.article-page-action-camera .action-camera-hero-main-copy {
  display: grid;
  gap: 8px;
  padding: 0 18px 18px;
  color: #111214;
}

.article-page-action-camera .action-camera-hero-main-copy b {
  display: inline-flex;
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
}

.article-page-action-camera .action-camera-hero-main-copy strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1.3;
}

.article-page-action-camera .action-camera-hero-main-copy p {
  margin: 0;
  color: #4d5058;
  font-size: .8rem;
  line-height: 1.65;
}

.article-page-action-camera .action-camera-hero-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.article-page-action-camera .action-camera-hero-mini-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(17, 18, 20, .04);
  color: inherit;
  text-decoration: none;
}

.article-page-action-camera .action-camera-hero-mini-card img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  background: #fafafa;
  border-radius: 10px;
  padding: 6px;
}

.article-page-action-camera .action-camera-hero-mini-copy small {
  display: block;
  margin-bottom: 4px;
  color: var(--brand);
  font-size: .66rem;
  font-weight: 800;
}

.article-page-action-camera .action-camera-hero-mini-copy strong {
  display: block;
  font-size: .86rem;
  line-height: 1.4;
}

.article-page-action-camera .action-camera-hero-mini-copy p {
  margin: 4px 0 0;
  color: #555;
  font-size: .76rem;
  line-height: 1.55;
}

.article-page-action-camera .article-subtitle {
  margin: 8px 0 0;
  color: var(--ac-brand);
  font-size: .95rem;
  line-height: 1.65;
  font-weight: 700;
}

.article-page-action-camera .article-byline {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  margin: 18px 0 0;
}

.article-page-action-camera .byline-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ac-brand-strong);
  color: var(--ink-inverse);
  font-size: .8rem;
  font-weight: 700;
}

.article-page-action-camera .article-byline b {
  display: block;
  font-size: .84rem;
  color: var(--ink-strong);
}

.article-page-action-camera .article-byline small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-num);
  font-size: .7rem;
  color: var(--ink-muted);
}

.article-page-action-camera .article-eyecatch {
  margin: 18px -20px 0;
  overflow: hidden;
  background: var(--surface-sunken);
}

.article-page-action-camera .article-eyecatch img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.article-page-action-camera .article-answer {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--ac-brand-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac-brand) 7%, #fff), #fff);
}

.article-page-action-camera .article-answer .label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--ac-brand);
  font-family: var(--font-num);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.article-page-action-camera .article-answer p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-strong);
  font-weight: 700;
}

.article-page-action-camera .article-answer small {
  display: block;
  margin-top: 9px;
  font-size: .83rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

.article-page-action-camera .article-anchors {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 24px;
  padding: 4px 0 0;
  scrollbar-width: none;
}

.article-page-action-camera .article-anchors::-webkit-scrollbar {
  display: none;
}

.article-page-action-camera .article-anchors a {
  flex: none;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  scroll-snap-align: start;
}

.article-page-action-camera .article-anchors a:hover {
  border-color: var(--ac-brand);
  color: var(--ac-brand);
}

.article-page-action-camera .article-section {
  padding-top: 56px;
  scroll-margin-top: 120px;
}

.article-page-action-camera .article-section > h2 {
  margin: 0 0 10px;
  color: var(--ink-strong);
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  font-weight: 900;
  line-height: 1.45;
}

.article-page-action-camera .article-section > h2 .step {
  display: inline-block;
  margin-right: 10px;
  color: var(--ac-brand);
  font-family: var(--font-num);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.article-page-action-camera .section-lead {
  margin: 0 0 24px;
  color: var(--ink-muted);
  font-size: .95rem;
  line-height: 1.9;
}

.article-page-action-camera h3 {
  margin: 0 0 10px;
  color: var(--ink-strong);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.6;
}

.article-page-action-camera p {
  margin: 0 0 14px;
}

.article-page-action-camera .hl {
  background-image: linear-gradient(transparent 64%, var(--ac-marker) 64%);
  background-repeat: no-repeat;
}

.article-page-action-camera .choose-axes,
.article-page-action-camera .pre-checks,
.article-page-action-camera .price-stats,
.article-page-action-camera .next-list {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.article-page-action-camera .choose-axis,
.article-page-action-camera .pre-check,
.article-page-action-camera .price-stat,
.article-page-action-camera .product-entry,
.article-page-action-camera .rail-card,
.article-page-action-camera .pcard,
.article-page-action-camera .article-faq {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(17, 58, 63, .06);
}

.article-page-action-camera .choose-axis,
.article-page-action-camera .pre-check,
.article-page-action-camera .price-stat,
.article-page-action-camera .pcard,
.article-page-action-camera .rail-card {
  padding: 16px;
}

.article-page-action-camera .choose-axis {
  padding: 14px 16px;
}

.article-page-action-camera .choose-axis-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.article-page-action-camera .choose-axis .step,
.article-page-action-camera .pre-check .tag,
.article-page-action-camera .rail-rank,
.article-page-action-camera .pcard-rank,
.article-page-action-camera .product-entry .rank,
.article-page-action-camera .article-rail h4,
.article-page-action-camera .next-group h3 {
  color: var(--ac-brand);
  font-family: var(--font-num);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-page-action-camera {
  --ac-rank-1-ink: #8a5b00;
  --ac-rank-1-bg: #fff1c9;
  --ac-rank-1-line: #e7c768;
  --ac-rank-2-ink: #546272;
  --ac-rank-2-bg: #eef2f7;
  --ac-rank-2-line: #cfd8e4;
  --ac-rank-3-ink: #8a5a3b;
  --ac-rank-3-bg: #f6e7de;
  --ac-rank-3-line: #ddb69b;
  --ac-rank-4-ink: #2a6a66;
  --ac-rank-4-bg: #e7f3f1;
  --ac-rank-4-line: #b9d7d3;
  --ac-rank-5-ink: #5f6f73;
  --ac-rank-5-bg: #edf2f2;
  --ac-rank-5-line: #ced8d8;
}

.article-page-action-camera .pcard-rank,
.article-page-action-camera .product-entry .rank,
.article-page-action-camera .compare-table-v2 tbody th small,
.article-page-action-camera .rail-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ac-rank-4-line);
  border-radius: 999px;
  background: var(--ac-rank-4-bg);
  color: var(--ac-rank-4-ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: none;
}

.article-page-action-camera .compare-table-v2 tbody th small {
  margin-top: 6px;
}

.article-page-action-camera .compare-cards .pcard:nth-child(1) .pcard-rank,
.article-page-action-camera .compare-table-v2 tbody tr:nth-child(1) th small,
.article-page-action-camera .product-entry:nth-of-type(1) .rank,
.article-page-action-camera .rail-rank {
  border-color: var(--ac-rank-1-line);
  background: var(--ac-rank-1-bg);
  color: var(--ac-rank-1-ink);
}

.article-page-action-camera .compare-cards .pcard:nth-child(2) .pcard-rank,
.article-page-action-camera .compare-table-v2 tbody tr:nth-child(2) th small,
.article-page-action-camera .product-entry:nth-of-type(2) .rank {
  border-color: var(--ac-rank-2-line);
  background: var(--ac-rank-2-bg);
  color: var(--ac-rank-2-ink);
}

.article-page-action-camera .compare-cards .pcard:nth-child(3) .pcard-rank,
.article-page-action-camera .compare-table-v2 tbody tr:nth-child(3) th small,
.article-page-action-camera .product-entry:nth-of-type(3) .rank {
  border-color: var(--ac-rank-3-line);
  background: var(--ac-rank-3-bg);
  color: var(--ac-rank-3-ink);
}

.article-page-action-camera .compare-cards .pcard:nth-child(4) .pcard-rank,
.article-page-action-camera .compare-table-v2 tbody tr:nth-child(4) th small,
.article-page-action-camera .product-entry:nth-of-type(4) .rank {
  border-color: var(--ac-rank-4-line);
  background: var(--ac-rank-4-bg);
  color: var(--ac-rank-4-ink);
}

.article-page-action-camera .compare-cards .pcard:nth-child(5) .pcard-rank,
.article-page-action-camera .compare-table-v2 tbody tr:nth-child(5) th small,
.article-page-action-camera .product-entry:nth-of-type(5) .rank {
  border-color: var(--ac-rank-5-line);
  background: var(--ac-rank-5-bg);
  color: var(--ac-rank-5-ink);
}

.article-page-action-camera .choose-axis .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ac-brand) 10%, #fff);
  line-height: 1;
}

.article-page-action-camera .choose-axis h3 {
  margin: 2px 0 0;
}

.article-page-action-camera .choose-axis p,
.article-page-action-camera .pre-check p,
.article-page-action-camera .article-callout,
.article-page-action-camera .product-entry .body,
.article-page-action-camera .article-faq p {
  font-size: .9rem;
  line-height: 1.9;
  color: var(--ink);
}

.article-page-action-camera .choose-axis .example {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: .84rem;
}

.article-page-action-camera .quick-picks {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(17, 58, 63, .06);
}

.article-page-action-camera .quick-pick {
  border-bottom: 1px solid var(--line);
}

.article-page-action-camera .quick-pick:last-child {
  border-bottom: 0;
}

.article-page-action-camera .quick-pick summary {
  display: grid;
  gap: 8px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.article-page-action-camera .quick-pick summary::-webkit-details-marker {
  display: none;
}

.article-page-action-camera .quick-pick .need {
  color: var(--ac-brand);
  font-size: .78rem;
  font-weight: 700;
}

.article-page-action-camera .quick-pick .pick,
.article-page-action-camera .pcard-name,
.article-page-action-camera .rail-card .p-name {
  color: var(--ink-strong);
  font-size: 1rem;
  font-weight: 700;
}

.article-page-action-camera .quick-pick .price,
.article-page-action-camera .p-price,
.article-page-action-camera .pcard-price {
  color: var(--ink-strong);
  font-family: var(--font-num);
  font-size: 1.2rem;
  font-weight: 700;
}

.article-page-action-camera .quick-pick .price span,
.article-page-action-camera .pcard-price span,
.article-page-action-camera .p-best {
  display: block;
  margin-top: 4px;
  color: var(--accent-good);
  font-size: .68rem;
  font-weight: 600;
}

.article-page-action-camera .quick-pick .reason {
  padding: 0 16px 16px;
}

.article-page-action-camera .price-asof,
.article-page-action-camera .pr-note,
.article-page-action-camera .metric-bar-note {
  color: var(--ink-muted);
  font-size: .72rem;
  line-height: 1.7;
}

.article-page-action-camera .table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.article-page-action-camera .quick-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-size: .88rem;
}

.article-page-action-camera .quick-table th {
  padding: 11px 12px;
  background: #f6f6f7;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  font-size: .76rem;
  font-weight: 800;
}

.article-page-action-camera .quick-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.article-page-action-camera .quick-table tr:last-child td {
  border-bottom: 0;
}

.article-page-action-camera .quick-table td strong {
  color: var(--ink-strong);
}

.article-page-action-camera .best {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 999px;
  background: #fff4cf;
  color: #8a6400;
  font-size: .66rem;
  font-weight: 800;
}

.article-page-action-camera .article-callout {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent-warm);
  background: var(--accent-warm-soft);
  border-radius: 0 16px 16px 0;
}

.article-page-action-camera .compare-cards {
  display: grid;
  gap: 12px;
}

.article-page-action-camera .pcard-head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 13px;
  align-items: start;
}

.article-page-action-camera .pcard-thumb {
  display: grid;
  gap: 5px;
  justify-items: center;
}

.article-page-action-camera .pcard-thumb img,
.article-page-action-camera .prod-cell img,
.article-page-action-camera .product-photo,
.article-page-action-camera .rail-photo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  object-fit: contain;
}

.article-page-action-camera .pcard-thumb img {
  width: 64px;
  height: 64px;
}

.article-page-action-camera .pcard-for,
.article-page-action-camera .product-entry .why {
  margin: 3px 0 0;
  color: var(--ac-brand);
  font-size: .82rem;
  font-weight: 600;
}

.article-page-action-camera .pcard-spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 16px;
  margin-top: 10px;
  font-size: .84rem;
}

.article-page-action-camera .pcard-spec dd {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-num);
}

.article-page-action-camera .pcard-buy,
.article-page-action-camera .product-buys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.article-page-action-camera .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: .83rem;
  font-weight: 700;
  text-decoration: none;
  transition: .15s ease;
}

.article-page-action-camera .btn.is-ghost {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ac-brand);
}

.article-page-action-camera .btn.is-amazon {
  background: var(--store-amazon);
  color: #111;
}

.article-page-action-camera .btn.is-amazon:hover {
  background: var(--store-amazon-strong);
}

.article-page-action-camera .btn.is-rakuten {
  background: var(--store-rakuten);
  color: #fff;
}

.article-page-action-camera .btn.is-rakuten:hover {
  background: var(--store-rakuten-strong);
}

.article-page-action-camera .compare-table-wrap {
  display: none;
  position: relative;
}

.article-page-action-camera .compare-table-action-camera {
  width: 100%;
  min-width: 840px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .82rem;
  overflow: visible;
  border-radius: 0;
  border: 0;
}

.article-page-action-camera .compare-table-action-camera th,
.article-page-action-camera .compare-table-action-camera td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.article-page-action-camera .compare-table-action-camera thead th {
  background: #f6f6f7;
  color: var(--ink-strong);
  font-weight: 800;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.article-page-action-camera .compare-table-action-camera tbody th {
  background: #fbfcfd;
  color: var(--ink-strong);
  text-align: left;
  width: 176px;
}

.article-page-action-camera .compare-table-action-camera th:first-child,
.article-page-action-camera .compare-table-action-camera td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface, #fff);
  box-shadow: 1px 0 0 var(--line);
}

.article-page-action-camera .compare-table-action-camera thead th:first-child {
  z-index: 4;
  background: #f6f6f7;
}

.article-page-action-camera .compare-table-action-camera tbody th small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-num);
  font-size: .7rem;
  color: var(--ink-muted);
}

.article-page-action-camera .compare-table-action-camera td.spec,
.article-page-action-camera .compare-table-action-camera td.price {
  color: var(--ink-strong);
  font-family: var(--font-num);
  line-height: 1.65;
}

.article-page-action-camera .compare-table-action-camera td.price span {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  color: #8a6400;
}

.article-page-action-camera .compare-table-action-camera .prod-cell,
.article-page-action-camera .compare-table-action-camera .prod-cell span,
.article-page-action-camera .compare-table-action-camera .prod-cell small,
.article-page-action-camera .compare-table-action-camera .prod-cell a {
  color: var(--ink-strong);
}

.article-page-action-camera .table-scroll-wrap {
  position: relative;
}

.article-page-action-camera .table-scroll-wrap::after {
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 32px;
  pointer-events: none;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
}

.article-page-action-camera .prod-cell {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: start;
}

.article-page-action-camera .prod-cell img {
  width: 48px;
  height: 48px;
}

.article-page-action-camera .price-stat .k {
  display: block;
  color: var(--ink-muted);
  font-size: .74rem;
}

.article-page-action-camera .price-stat .v {
  display: block;
  margin-top: 4px;
  color: var(--ink-strong);
  font-family: var(--font-num);
  font-size: 1.6rem;
  font-weight: 700;
}

.article-page-action-camera .price-stat .n {
  display: block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: .76rem;
}

.article-page-action-camera .product-entry {
  padding: 18px;
  margin-bottom: 16px;
}

.article-page-action-camera .product-head {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}

.article-page-action-camera .product-photo {
  width: 96px;
  height: 96px;
}

.article-page-action-camera .product-fit {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 0 0 14px;
}

.article-page-action-camera .product-fit div {
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--surface-sunken);
  font-size: .84rem;
  line-height: 1.75;
}

.article-page-action-camera .product-fit .is-for {
  border-left: 3px solid var(--accent-good);
}

.article-page-action-camera .product-fit .is-caution {
  border-left: 3px solid var(--accent-warm);
}

.article-page-action-camera .product-fit b {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-strong);
  font-size: .72rem;
  letter-spacing: .04em;
}

.article-page-action-camera .product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.article-page-action-camera .product-chips span,
.article-page-action-camera .rail-pick-specs span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-sunken);
  font-family: var(--font-num);
  font-size: .8rem;
  color: var(--ink-strong);
}

.article-page-action-camera .product-store-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.article-page-action-camera .product-store-summary-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #d8e4ea;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdfe 0%, #f4f8fa 100%);
}

.article-page-action-camera .product-store-summary-item small {
  color: var(--ink-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.article-page-action-camera .product-store-summary-item strong {
  color: var(--ink-strong);
  font-family: var(--font-num);
  font-size: 1rem;
  line-height: 1.4;
}

.article-page-action-camera .product-store-summary-item span {
  color: #48606c;
  font-size: .74rem;
}

.article-page-action-camera .product-store-summary-item.is-best {
  border-color: color-mix(in srgb, var(--brand) 24%, #d8e4ea);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, #fff) 0%, #f3f8fa 100%);
}

.article-page-action-camera .product-store-summary-item.is-pending strong {
  font-size: .9rem;
}

.article-page-action-camera .shops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}

.article-page-action-camera .shops.action-camera-product-shops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-page-action-camera .product-shop-heading {
  grid-column: 1 / -1;
  margin: 0;
  color: #445862;
  font-size: .78rem;
  line-height: 1.7;
}

.article-page-action-camera .product-primary-actions,
.article-page-action-camera .product-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  grid-column: 1 / -1;
}

.article-page-action-camera .shops .store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 1px solid #d8e4ea;
  background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
  box-shadow: 0 8px 18px rgba(17, 58, 63, .05);
}

.article-page-action-camera .shops .store-amazon {
  color: #7a5200;
  background: linear-gradient(180deg, #fff8ec 0%, #fff3db 100%);
}

.article-page-action-camera .shops .store-rakuten {
  color: #9e2333;
  background: linear-gradient(180deg, #fff7f8 0%, #ffedf0 100%);
}

.article-page-action-camera .shops .store-link.is-lowest {
  color: #fff;
  border-color: #123843;
  background: linear-gradient(180deg, #173f49 0%, #123843 100%);
  box-shadow: 0 14px 26px rgba(18, 56, 67, .18);
}

.article-page-action-camera .shops .store-link.is-nodata {
  opacity: .75;
  font-weight: 600;
}

.article-page-action-camera .shops .detail {
  width: 100%;
}

.article-page-action-camera .shops .detail.btn {
  min-height: 46px;
  border-radius: 12px;
}

.article-page-action-camera .action-camera-store-price-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.article-page-action-camera .action-camera-store-price-strip span {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px 13px;
  border: 1px solid #dde5ea;
  border-radius: 14px;
  background: #f8fbfc;
}

.article-page-action-camera .action-camera-store-price-strip span b {
  color: #50626b;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
}

.article-page-action-camera .action-camera-store-price-strip span em {
  color: var(--ink-strong);
  font-family: var(--font-num);
  font-size: .96rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

.article-page-action-camera .action-camera-store-price-strip span.is-best {
  border-color: color-mix(in srgb, var(--brand) 18%, #dde5ea);
  background: #fff7f8;
}

.article-page-action-camera .action-camera-price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 10px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
}

.article-page-action-camera .action-camera-price-badge-best {
  color: #0f4e51;
  background: #e7f7f5;
}

.article-page-action-camera .action-camera-price-badge-note {
  color: #6b7280;
  background: #f4f5f7;
}

.article-page-action-camera .quick-buy-actions .quick-buy-store {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 15px;
  border: 1px solid #dde5ea;
  border-radius: 12px;
  background: #f8fbfc;
  color: #163948 !important;
  box-shadow: 0 6px 16px rgba(17, 58, 63, .04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.article-page-action-camera .quick-buy-actions .quick-buy-store.store-rakuten {
  background: #fff3f5;
  color: #9e2333 !important;
}

.article-page-action-camera .quick-buy-actions .quick-buy-store.store-amazon {
  background: #fff4df;
  color: #7a5200 !important;
}

.article-page-action-camera .quick-buy-actions .quick-buy-store.cta-best {
  border-color: color-mix(in srgb, var(--brand) 42%, #dde5ea);
  box-shadow: 0 10px 22px rgba(200, 16, 46, .08);
}

.article-page-action-camera .quick-buy-actions .quick-buy-store:hover,
.article-page-action-camera .shops .store-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(17, 58, 63, .08);
}

.article-page-action-camera .quick-buy-actions .quick-buy-store .store-link-divider {
  display: none;
}

.article-page-action-camera .quick-buy-actions .quick-buy-store .store-link-text {
  display: contents;
}

.article-page-action-camera .quick-buy-actions .quick-buy-store .store-link-text-full {
  font-size: .86rem;
  font-weight: 800;
}

.article-page-action-camera .quick-buy-actions .quick-buy-store .store-link-shop {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.article-page-action-camera .quick-buy-actions .quick-buy-store .store-link-arrow {
  opacity: .6;
  font-size: 1rem;
}

.article-page-action-camera .quick-buy-actions > a:first-child {
  min-height: 50px;
  border: 1px solid #d9e1e6;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-strong);
}

.article-page-action-camera .quick-buy-actions > a:first-child:hover {
  border-color: #bfcbd3;
  background: #f8fbfc;
}

.article-page-action-camera .shops .store-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid #dde5ea;
  background: #f8fbfc;
  box-shadow: 0 6px 16px rgba(17, 58, 63, .04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.article-page-action-camera .shops .store-amazon {
  color: #7a5200;
  background: #fff4df;
}

.article-page-action-camera .shops .store-rakuten {
  color: #9e2333;
  background: #fff3f5;
}

.article-page-action-camera .shops .store-link.is-lowest {
  color: inherit;
  border-color: color-mix(in srgb, var(--brand) 42%, #dde5ea);
  background: #fff7f8;
  box-shadow: 0 10px 22px rgba(200, 16, 46, .08);
}

.article-page-action-camera .shops .store-link .store-link-text {
  display: contents;
}

.article-page-action-camera .shops .store-link .store-link-shop {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.article-page-action-camera .shops .store-link .store-link-divider {
  display: none;
}

.article-page-action-camera .shops .store-link .store-link-text-full {
  font-size: .86rem;
  font-weight: 800;
}

.article-page-action-camera .shops .store-link .store-link-arrow {
  opacity: .6;
  font-size: 1rem;
}

.article-page-action-camera .rail-rank {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: .92rem;
  letter-spacing: .02em;
  text-transform: none;
}

.article-page-action-camera .rail-card.rail-best {
  border: 2px solid var(--brand);
  box-shadow: 0 14px 28px rgba(200, 16, 46, .08);
}

.article-page-action-camera .rail-card.rail-best .rail-best-visual {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.article-page-action-camera .rail-card.rail-best .p-price {
  color: var(--brand);
  font-size: 1.55rem;
}

.article-page-action-camera .rail-card.rail-best .p-best {
  margin-bottom: 12px;
}

.article-page-action-camera .compare-table .is-na {
  color: #6b7280;
  font-size: .92em;
}

.article-page-action-camera .metric-bars {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(17, 58, 63, .06);
}

.article-page-action-camera .metric-bar {
  margin-bottom: 16px;
}

.article-page-action-camera .metric-bar:last-of-type {
  margin-bottom: 0;
}

.article-page-action-camera .metric-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.article-page-action-camera .metric-bar-head b,
.article-page-action-camera .prod-link {
  color: var(--ink-strong);
  font-weight: 700;
  text-decoration: none;
}

.article-page-action-camera .prod-link:hover {
  color: var(--ac-brand);
}

.article-page-action-camera .metric-bar-head .v {
  color: var(--ink-strong);
  font-family: var(--font-num);
  font-size: 1.15rem;
  font-weight: 700;
}

.article-page-action-camera .metric-bar-track {
  height: 9px;
  margin-top: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ac-brand) 12%, #fff);
  overflow: hidden;
}

.article-page-action-camera .metric-bar-track i {
  display: block;
  height: 100%;
  background: var(--ac-brand);
  border-radius: 999px;
}

.article-page-action-camera .article-faq {
  overflow: hidden;
}

.article-page-action-camera .article-faq details {
  border-bottom: 1px solid var(--line);
}

.article-page-action-camera .article-faq details:last-child {
  border-bottom: 0;
}

.article-page-action-camera .article-faq summary {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--ink-strong);
  font-weight: 700;
}

.article-page-action-camera .article-faq summary::-webkit-details-marker {
  display: none;
}

.article-page-action-camera .article-faq summary::before {
  content: "Q";
  color: var(--ac-brand);
  font-family: var(--font-num);
  font-size: .8rem;
}

.article-page-action-camera .article-faq p {
  margin: 0;
  padding: 0 16px 16px 42px;
}

.article-page-action-camera .next-group {
  margin-bottom: 22px;
}

.article-page-action-camera .next-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-page-action-camera .next-list a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.article-page-action-camera .next-list a:hover {
  border-color: var(--ac-brand);
}

.article-page-action-camera .next-list a::after {
  content: " →";
  color: var(--ac-brand);
}

.article-page-action-camera .next-list a small {
  display: block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: .74rem;
  line-height: 1.6;
}

.article-page-action-camera .article-footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.article-page-action-camera .decision-order {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: o;
  display: grid;
  gap: 10px;
}

.article-page-action-camera .decision-order li {
  counter-increment: o;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.8;
}

.article-page-action-camera .decision-order li::before {
  content: counter(o);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ac-brand) 12%, #fff);
  color: var(--ac-brand);
  font-family: var(--font-num);
  font-size: .7rem;
  font-weight: 700;
}

.article-page-action-camera .article-rail {
  display: none;
}

.article-page-action-camera .article-rail h4 {
  margin: 0 0 12px;
}

.article-page-action-camera .article-toc-action-camera {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: .84rem;
}

.article-page-action-camera .article-toc-action-camera a {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
}

.article-page-action-camera .article-toc-action-camera a:hover {
  color: var(--ac-brand);
}

.article-page-action-camera .article-toc-action-camera .i {
  flex: none;
  color: var(--ac-brand);
  font-family: var(--font-num);
  font-size: .76rem;
}

.article-page-action-camera .rail-best-head {
  margin: 0 0 14px;
}

.article-page-action-camera .rail-best-visual {
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.article-page-action-camera .rail-photo {
  width: 96px;
  height: 96px;
}

.article-page-action-camera .rail-card .p-note {
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: .78rem;
  line-height: 1.7;
}

.article-page-action-camera .toc-note {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: .74rem;
  line-height: 1.7;
}

.article-page-action-camera .rail-pick-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.article-page-action-camera .rail-card .product-buys {
  flex-direction: column;
  align-items: stretch;
}

.article-page-action-camera .rail-card .btn {
  width: 100%;
  text-align: center;
}

@media (min-width: 760px) {
  .article-page-action-camera .action-camera-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  }

  .article-page-action-camera .choose-axes {
    grid-template-columns: 1fr 1fr;
  }

  .article-page-action-camera .article-eyecatch {
    margin-inline: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
  }

  .article-page-action-camera .product-head {
    grid-template-columns: 120px 1fr;
    gap: 20px;
  }

  .article-page-action-camera .product-photo {
    width: 120px;
    height: 120px;
  }

  .article-page-action-camera .product-fit,
  .article-page-action-camera .pre-checks,
  .article-page-action-camera .price-stats,
  .article-page-action-camera .next-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .article-page-action-camera .next-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .article-page-action-camera .choose-axes {
    grid-template-columns: 1fr 1fr;
  }

  .article-page-action-camera .article-eyecatch img {
    aspect-ratio: 16 / 9;
  }

  .article-page-action-camera .compare-cards {
    display: none;
  }

  .article-page-action-camera .compare-table-wrap {
    display: block;
  }

  .article-page-action-camera .article-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
  }

  .article-page-action-camera .article-rail {
    display: block;
    position: sticky;
    top: 64px;
  }
}

@media (max-width: 759px) {
  .article-page-action-camera .action-camera-hero {
    grid-template-columns: 1fr;
  }

  .article-page-action-camera .article-shell {
    padding-inline: 16px;
  }

  .article-page-action-camera .action-camera-hero-title,
  .article-page-action-camera .article-head h1 {
    font-size: clamp(2rem, 8.8vw, 2.9rem);
  }

  .article-page-action-camera .action-camera-meta-list {
    grid-template-columns: 1fr;
  }

  .article-page-action-camera .hl {
    background-image: none;
    text-decoration: underline;
    text-decoration-color: var(--ac-marker);
    text-decoration-thickness: 4px;
    text-underline-offset: 2px;
  }

  .article-page-action-camera .quick-pick .price,
  .article-page-action-camera .pcard-price {
    font-size: 1.05rem;
  }

  .article-page-action-camera .action-camera-hero-main-figure {
    min-height: 250px;
    padding: 14px 14px 2px;
  }

  .article-page-action-camera .action-camera-hero-main-figure img {
    max-height: 228px;
  }

  .article-page-action-camera .action-camera-hero-mini-grid,
  .article-page-action-camera .action-camera-hero-points {
    grid-template-columns: 1fr;
  }

  .article-page-action-camera .action-camera-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .article-page-action-camera .article-anchors {
    top: 56px;
    margin-top: 18px;
    padding-top: 2px;
    scroll-snap-type: x proximity;
  }

  .article-page-action-camera .action-camera-store-price-strip,
  .article-page-action-camera .product-store-summary,
  .article-page-action-camera .shops.action-camera-product-shops,
  .article-page-action-camera .product-primary-actions,
  .article-page-action-camera .product-secondary-actions {
    grid-template-columns: 1fr;
  }

  .article-page-action-camera .action-camera-hero-mini-card {
    grid-template-columns: 74px 1fr;
  }

  .article-page-action-camera .action-camera-hero-mini-card img {
    width: 74px;
    height: 74px;
  }

  .article-page-action-camera .pcard-buy,
  .article-page-action-camera .product-buys {
    justify-content: flex-start;
  }

  .article-page-action-camera .choose-axis-head {
    gap: 10px;
  }

  .article-page-action-camera .choose-axis h3 {
    font-size: 1rem;
    line-height: 1.55;
  }

  .article-page-action-camera .choose-axis p,
  .article-page-action-camera .article-callout,
  .article-page-action-camera .product-entry .body {
    font-size: .86rem;
    line-height: 1.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-page-action-camera * {
    animation: none !important;
    transition: none !important;
  }
}

.campaign-banner-section > header {
  display: grid;
  gap: var(--s2);
}

.campaign-banner-section > header small,
.campaign-banner-topline small {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 2px var(--s2);
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.campaign-banner-section h2 {
  margin: var(--s2) 0 0;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.35;
  color: var(--ink-strong);
}

.campaign-banner-section > header p,
.campaign-banner p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.75;
}

.campaign-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s3);
  align-items: stretch;
}

.campaign-banner {
  display: grid;
  gap: var(--s3);
  height: 100%;
  min-height: 100%;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.campaign-banner:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.campaign-banner.is-full-image-ad {
  grid-template-rows: auto auto;
  align-content: start;
  padding: var(--s3);
  background: #fff;
  border-color: rgba(200, 16, 46, .8);
}

.campaign-full-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: var(--r-md);
  object-fit: cover;
}

.campaign-full-image-cta {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  width: 100%;
  margin: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--brand);
  box-shadow: none;
  color: var(--ink-inverse);
  font-size: 0.9375rem;
  font-weight: 800;
  text-align: center;
}

.campaign-full-image-cta i {
  font-style: normal;
}

.campaign-banner-visual {
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
}

.campaign-banner-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.campaign-banner-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.campaign-banner-topline em {
  min-height: 24px;
  padding: 2px var(--s2);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
}

.campaign-banner strong {
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--ink-strong);
}

.campaign-banner b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  margin-top: auto;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 0.9375rem;
  text-align: center;
}

.campaign-banner b i {
  font-style: normal;
}

.campaign-banner.is-pending b {
  background: var(--surface-navy);
}

.campaign-review-note,
.campaign-disclosure {
  color: var(--ink-muted);
}

.campaign-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.campaign-guide-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
}

.campaign-guide-links a::after {
  content: "→";
  margin-left: var(--s2);
}

.campaign-guide-links a:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  text-decoration: none;
}

@media (max-width: 620px) {
  .campaign-banner-section { padding: var(--s4); }
  .campaign-banner { padding: var(--s3); }
  .campaign-banner b { width: 100%; }
  .campaign-guide-links a { width: 100%; justify-content: center; }
}

/* 型番ハブ: カード3件のあとに、残りの型番をリンク一覧で並べる */
.product-hub-more { margin-top: var(--s4); font-size: 0.875rem; }
.product-hub-more > b { display: block; margin-bottom: var(--s2); color: var(--ink-muted); font-size: 0.8125rem; }
.product-hub-more ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; }
.product-hub-more li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--link); }
.product-hub-more-compare { display: inline-block; margin-top: var(--s3); color: var(--link); font-weight: 700; }

/* ---------------------------------------------------------------------------
   サービスガイドの申込導線（上部の比較カード／本文中の1行CTA）
   記事ページの購入導線と同じ3点（上部・中盤・追従）にそろえるために追加。
   追従バーは記事と同じ .article-mobile-buybar を使い回すので、ここには書かない。
   --------------------------------------------------------------------------- */
.service-offers { margin-top: var(--s6); }
.service-offer-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--s4);
}
.service-offer-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.service-offer-card h3 { font-size: 1rem; line-height: 1.4; }
.service-offer-best { color: var(--ink-muted); font-size: 0.8125rem; line-height: 1.6; }
.service-offer-card ul { margin: 0; padding-left: 1.1em; font-size: 0.8125rem; line-height: 1.8; }
.service-offer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: auto;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-weight: 700;
  font-size: 0.875rem;
  text-align: center;
}
.service-offer-cta:hover { background: var(--brand-strong); text-decoration: none; }
.service-offer-card small { color: var(--ink-muted); font-size: 0.6875rem; line-height: 1.6; }

.service-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--surface-muted, var(--surface));
}
.service-inline-cta > div { display: grid; gap: 2px; min-width: 0; }
.service-inline-cta small { color: var(--ink-muted); font-size: 0.6875rem; letter-spacing: 0.08em; }
.service-inline-cta b { font-size: 0.9375rem; line-height: 1.5; }
.service-inline-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-left: auto;
  padding: var(--s2) var(--s5);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-weight: 700;
  font-size: 0.875rem;
}
.service-inline-cta a:hover { background: var(--brand-strong); text-decoration: none; }
@media (max-width: 520px) {
  .service-inline-cta a { margin-left: 0; width: 100%; }
}

/* サービスの総額比較図。棒グラフ自体は記事の .power-chart を使い回す。 */
.service-cost h3 { margin-top: var(--s6); font-size: 1rem; }
.service-cost .power-chart { margin-top: var(--s3); }
.cost-row-name { font-size: 0.875rem; line-height: 1.5; }
.service-cost .service-comparison-table { margin-top: var(--s6); }
.service-cost caption {
  caption-side: top;
  padding-bottom: var(--s2);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  text-align: left;
}
/* 「使い続けるなら安い順」と「途中でやめるなら安い順」が入れ替わることの注意書き。
   図だけでは読み取れない結論なので、本文と同じ強さで置く。 */
.cost-flip-note {
  margin-top: var(--s4);
  padding: var(--s4);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  font-size: 0.9375rem;
  line-height: 1.8;
}
/* 電気代グラフは「1位＝緑」で良いが、この図では成立しない。
   使い続ける場合と途中でやめる場合で1位が入れ替わるため、同じサービスが
   片方の図で緑・もう片方で灰になり、色が「おすすめ度」の誤ったシグナルになる。
   色は全て同じにして、結論は .cost-flip-note の文章で伝える。 */
.service-cost .power-row:first-of-type .power-bar { background: #39424e; }

/* カテゴリー別の比較図（#metric）も同じ理由で先頭行の色を戻す。
   電気代は「安いほど良い」と言い切れるので先頭を強調してよいが、この図の軸は
   容量・重量・回数などで、大小どちらが望ましいかは読者の使い方で変わる。
   たとえばポータブル電源の容量は、持ち歩くなら小さいほうが、家に置くなら
   大きいほうが向く。先頭だけ緑にすると「これが正解」という誤ったシグナルになる。
   並び順と本文で差を伝え、色は結論に使わない。 */
#metric .power-row:first-of-type .power-bar { background: #39424e; }

/* ---------------------------------------------------------------------------
   秋冬の季節セクション（home-cold-season）

   直した点（いずれも1512pxでの実測にもとづく）:
   1. 見出しが clamp(2.1rem, 5vw, 4rem) で64pxまで伸び、半分幅の列に対して
      大きすぎて画面外まで溢れていた。列幅はコンテナ基準なのに文字だけ
      ビューポート基準で伸びるため、画面を広げるほど破綻する。
   2. 2カラム構成で左のコピー列に430px以上の空白ができていた。
      見出しをカードの上に置く1カラムに変え、空白をなくす。
   3. 紺→茶→橙の濃いグラデーションは、サイトの配色（白基調＋#c8102e）から
      浮いていた。地は明るいままにして、季節感は商品写真で出す。
   4. カードが縦積みで並び、「セラミックヒー/ター」のように語中で折れていた。
      4枚を横一列にし、日本語は文節で折り返す。
   --------------------------------------------------------------------------- */
.home-cold-season {
  display: block;
  padding: clamp(var(--s5), 3vw, var(--s6)) !important;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-warm);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--accent-warm-soft) 0%, var(--surface) 58%);
  color: var(--ink);
  overflow: hidden;
}

.home-cold-season-intro {
  display: grid;
  gap: var(--s3);
  max-width: 46em;
  margin-bottom: var(--s5);
}

.home-cold-season-intro .eyebrow {
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-warm);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.home-cold-season-intro h2 {
  margin: 0;
  color: var(--ink-strong);
  /* vw ではなく控えめな上限で固定する。列幅と噛み合わずに溢れるのを防ぐ。 */
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  word-break: auto-phrase;
}

.home-cold-season-intro > p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.85;
}

.home-cold-season-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.home-cold-season-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s2) var(--s5);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}
.home-cold-season-actions a:hover { background: var(--brand-strong); text-decoration: none; }
/* 2つ目以降は補助導線。主CTAと同じ強さで並べると、どちらを押すか迷う。 */
.home-cold-season-actions a + a {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-strong);
}
.home-cold-season-actions a + a:hover { background: var(--surface-sunken); }

.home-cold-season-guides {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
}
.home-cold-season-guides a { color: var(--link); font-size: 0.875rem; }

.home-cold-season-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 文字数の差でカードの下端がずれないようにそろえる。 */
  grid-auto-rows: 1fr;
  gap: var(--s3);
}

.home-cold-season-card {
  display: grid;
  align-content: start;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.home-cold-season-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  text-decoration: none;
}
/* 「おすすめ」の1枚だけ地色を変えると、他3枚と別物に見えて並びが崩れる。
   強調は枠線だけにとどめる。 */
.home-cold-season-card.is-featured { border-color: var(--accent-warm); }

/* 写真は4枚とも同じ枠・同じ収め方にする。 */
.home-cold-season-card-image {
  margin-bottom: var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.home-cold-season-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s3);
}

.home-cold-season-card-copy { display: grid; gap: 6px; min-width: 0; }
.home-cold-season-card-copy small { color: var(--ink-muted); font-size: 0.75rem; font-weight: 700; }
.home-cold-season-card-copy strong {
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink-strong);
  word-break: auto-phrase;
}
.home-cold-season-card-copy p { margin: 0; color: var(--ink-muted); font-size: 0.8125rem; line-height: 1.7; }
.home-cold-season-card-copy span {
  width: fit-content;
  padding: 3px var(--s2);
  border-radius: var(--r-full);
  background: var(--accent-warm-soft);
  color: var(--accent-warm);
  font-size: 0.75rem;
  font-weight: 700;
}
.home-cold-season-card-copy b { margin-top: var(--s2); color: var(--link); font-size: 0.8125rem; font-weight: 700; }

@media (max-width: 1000px) {
  .home-cold-season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-cold-season { padding: var(--s4) !important; }
  .home-cold-season-actions a { flex: 1 1 auto; justify-content: center; }
  .home-cold-season-card { padding: var(--s3); }
}

/* ---------------------------------------------------------------------------
   トップの編集バナー
   生成画像内の日本語は使わず、文字はHTMLで重ねる。これで文字化け・
   架空日本語を防ぎ、PC/スマホで同じ見出しサイズに制御する。
   --------------------------------------------------------------------------- */
.home-editorial-banners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--s3);
  margin-top: var(--s5);
}
.home-editorial-banner {
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 14px 34px rgb(18 23 31 / 10%);
  color: var(--ink-strong);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.home-editorial-banner::after,
.wb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 78%) 44%, rgb(255 255 255 / 16%) 78%);
  pointer-events: none;
}
.home-editorial-banner:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 42px rgb(18 23 31 / 14%);
  text-decoration: none;
}
.home-editorial-banner img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-editorial-banner span,
.wb span {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 6px;
  width: min(72%, 34rem);
  padding: clamp(1rem, 2vw, 1.55rem);
  line-height: 1.45;
}
.home-editorial-banner small,
.wb small {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 2px var(--s2);
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.home-editorial-banner strong,
.wb strong {
  color: var(--ink-strong);
  font-size: clamp(1.12rem, 2vw, 1.75rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.home-editorial-banner em,
.wb em {
  color: var(--brand);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 860px) {
  .home-editorial-banners { grid-template-columns: 1fr; }
  .home-editorial-banner { aspect-ratio: 16 / 9; }
  .home-editorial-banner img { min-height: 0; height: 100%; }
}

/* ---------------------------------------------------------------------------
   秋冬家電ハブ（/winter-appliances）
   夏の /summer-appliances と同じ役割のページ。カードの作りは
   トップの秋冬セクションとそろえる（白カード・白背景の実物写真・価格の起点）。
   --------------------------------------------------------------------------- */
.winter-hub-hero { margin-bottom: var(--s6); }
.winter-hub-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

.winter-hub-group { margin-top: var(--s6); }
.winter-hub-group-head { max-width: 46em; margin-bottom: var(--s4); }
.winter-hub-group-head small {
  color: var(--accent-warm);
  font-size: 0.8125rem;
  font-weight: 700;
}
.winter-hub-group-head h3 {
  margin: 4px 0 6px;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.4;
  color: var(--ink-strong);
  word-break: auto-phrase;
}
.winter-hub-group-head p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.85; }

.winter-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s3);
}
.winter-hub-card {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.winter-hub-card:hover { transform: translateY(-2px); border-color: var(--line-strong); text-decoration: none; }
.winter-hub-card-image {
  display: block;
  margin-bottom: var(--s2);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.winter-hub-card-image img { width: 100%; height: 100%; object-fit: contain; padding: var(--s3); }
.winter-hub-card strong { font-size: 1rem; line-height: 1.4; color: var(--ink-strong); word-break: auto-phrase; }
.winter-hub-price { color: var(--ink-muted); font-size: 0.8125rem; }
.winter-hub-price b {
  margin-right: 2px;
  color: var(--brand);
  font-size: 1.1875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.winter-hub-card > b { margin-top: var(--s2); color: var(--link); font-size: 0.8125rem; font-weight: 700; }

/* 2026-09-13: 秋冬ハブの目次。.article-anchors は article-v2 の中でしか
   スタイルが当たっていなかったので、このページ用に書く。横スクロールで
   1行に収め、狭い画面でも高さを食わないようにする。 */
.winter-hub-page .article-anchors {
  display: flex;
  gap: var(--s2);
  margin: var(--s5) 0 0;
  padding-bottom: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
}
.winter-hub-page .article-anchors::-webkit-scrollbar { display: none; }
.winter-hub-page .article-anchors a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.winter-hub-page .article-anchors a:hover {
  border-color: var(--line-strong);
  color: var(--ink-strong);
}
/* 目次から飛んだとき、見出しが上端に貼り付かないようにする */
.winter-hub-page section[id] { scroll-margin-top: 88px; }

.winter-hub-guides { margin-top: var(--s7); }
.winter-hub-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.winter-hub-guide-card {
  display: grid;
  gap: 4px;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.winter-hub-guide-card:hover { border-color: var(--line-strong); border-left-color: var(--accent-warm); text-decoration: none; }
.winter-hub-guide-card strong { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-strong); word-break: auto-phrase; }
.winter-hub-guide-card p { margin: 0; color: var(--ink-muted); font-size: 0.8125rem; line-height: 1.7; }
.winter-hub-guide-card b { margin-top: 4px; color: var(--link); font-size: 0.8125rem; }

@media (max-width: 900px) {
  .winter-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .winter-hub-guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .winter-hub-grid { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   秋冬バナー（支給素材）
   素材ごとの比率が違うと、PCでカードサイズがばらつき、スマホでは文字が
   見切れる。表示用は1600×900に正規化した画像を使い、全カードを同一比率で
   並べる。背景のぼかし・切り抜きは入れない。
   --------------------------------------------------------------------------- */
.wb-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}
.wb-row { display: contents; }

.wb {
  position: relative;
  display: grid;
  align-items: end;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-strong);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wb:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgb(45 26 14 / 18%);
  text-decoration: none;
}
.wb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.wb span {
  width: min(78%, 30rem);
  padding: clamp(0.9rem, 1.7vw, 1.35rem);
}
.wb strong {
  font-size: clamp(1rem, 1.55vw, 1.45rem);
}
.wb em {
  font-size: 0.78rem;
}

@media (max-width: 1000px) {
  .wb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wb-strip { grid-template-columns: 1fr; }
  .home-editorial-banner span,
  .wb span { width: min(84%, 30rem); }
}

/* --------------------------------------------------------------------------
   my-best型「カテゴリーから徹底比較」横スクロール棚（2026-08-25）
   -------------------------------------------------------------------------- */
.compare-shelves,
.compare-shelf,
.compare-shelf-head,
.compare-shelf-track {
  min-width: 0;
  max-width: 100%;
}
.compare-shelves { display: grid; gap: var(--s6); }
.compare-shelf { width: 100%; }
.compare-shelf-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}
.compare-shelf-head h2 { font-size: 1.25rem; color: var(--ink-strong); }
.compare-shelf-head p { font-size: 0.8125rem; color: var(--ink-muted); }
.compare-shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: var(--s3);
  margin: var(--s4) 0 0;
  padding: var(--s1) var(--s1) var(--s3);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.compare-shelf-track li { margin: 0; scroll-snap-align: start; }
.compare-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  height: 100%;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.compare-card:hover { border-color: var(--ink-strong); box-shadow: var(--shadow-md); text-decoration: none; }
.compare-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  margin-bottom: var(--s1);
  background: #fff;
  overflow: hidden;
}
/* 注意: display:grid + 暗黙行だと img の height/max-height の%が auto 行を参照して
   効かず、width=240属性の画像が110pxの枠を突き抜けて文字に重なる。
   flex（高さが確定した包含ブロック）にして max-height で収める。 */
.compare-card-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.compare-card strong { font-size: 0.875rem; line-height: 1.5; color: var(--ink-strong); overflow-wrap: anywhere; }
.compare-card small { font-size: 0.75rem; color: var(--ink-muted); }
.compare-card b {
  margin-top: auto;
  padding: var(--s2) 0;
  border: 1.5px solid var(--ink-strong);
  border-radius: var(--r-full);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.compare-card:hover b { background: var(--ink-strong); color: #fff; }

/* 比較表の画像列。商品名だけの行が続くと型番の区別がつかないため、
   my-best と同じく写真を1列だけ添える。装飾なので alt は空にしている。 */
.compare-table .cell-thumb {
  width: 76px;
  padding: var(--s2);
  text-align: center;
}
.compare-table .cell-thumb img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   防災セット記事の見え方調整（2026-08-28）
   参考HTMLの「紙っぽい余白」「結論カード」「選び方のカード化」を
   emergency-kit のみに重ねる。
   -------------------------------------------------------------------------- */
.article-page-emergency-kit {
  width: min(100% - 2 * var(--s6), 1280px);
  background:
    radial-gradient(circle at top left, rgb(250 253 255 / 0.96), transparent 24%),
    linear-gradient(180deg, #f7fcff 0%, #ecf8ff 42%, #f5fbff 100%);
}

.article-page-emergency-kit .article-body {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(var(--s4), 2vw, var(--s6));
  border: 1px solid rgb(214 228 239 / 0.95);
  border-radius: calc(var(--r-lg) + 2px);
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 22px 54px rgb(34 76 122 / 8%);
}

.article-page-emergency-kit .article-layout {
  max-width: 1280px;
  margin-inline: auto;
  gap: clamp(var(--s4), 2vw, var(--s6));
}

.article-page-emergency-kit .article-toc-rail {
  width: 280px;
  min-width: 0;
  align-self: start;
}

.article-page-emergency-kit .article-toc-rail .article-toc,
.article-page-emergency-kit .article-toc-rail .article-side-summary {
  background: rgb(255 255 255 / 0.94);
}

@media (min-width: 1100px) and (max-width: 1339px) {
  .article-page-emergency-kit .article-layout {
    display: block;
  }

  .article-page-emergency-kit .article-toc-rail {
    display: none;
  }

  .article-page-emergency-kit .article-body > .article-toc {
    display: block;
  }
}

@media (min-width: 1340px) {
  .article-page-emergency-kit .article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(var(--s5), 2.4vw, var(--s7));
  }
}

.emergency-kit-article-head {
  padding: clamp(var(--s5), 3vw, var(--s7));
  border: 1px solid rgb(214 228 239 / 0.95);
  border-radius: calc(var(--r-lg) + 2px);
  background:
    linear-gradient(140deg, rgb(255 255 255 / 0.99) 0%, rgb(244 250 255 / 0.97) 100%);
  box-shadow: var(--shadow-sm);
}

.article-page-emergency-kit .article-kicker span:last-child {
  background: #edf6ff;
  color: #1e5da8;
}

.article-page-emergency-kit .article-answer {
  max-width: 58rem;
  padding: var(--s4) var(--s5);
  border: 1px solid rgb(205 221 237 / 0.98);
  border-left: 5px solid #1e5da8;
  border-radius: var(--r-md);
  background: #f4faff;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .article-lead {
  max-width: 62rem;
  font-size: 1rem;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .article-head h1 {
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid rgb(214 228 239 / 0.95);
}

.article-page-emergency-kit .emergency-kit-disclosure {
  margin-top: var(--s4);
  border-color: rgb(224 208 182 / 0.95);
  background: linear-gradient(180deg, #fffaf2 0%, #fff 100%);
  color: #5d4630;
}

.article-page-emergency-kit .emergency-kit-disclosure p {
  margin: 0;
}

.article-page-emergency-kit .emergency-kit-disclosure p + p {
  margin-top: var(--s2);
}

.article-page-emergency-kit .article-fast-answer {
  gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-page-emergency-kit .article-fast-answer-card,
.article-page-emergency-kit .quick-buy-card,
.article-page-emergency-kit .check-item,
.article-page-emergency-kit .maker-item,
.article-page-emergency-kit .related-inline > div > a {
  border-radius: calc(var(--r-md) + 2px);
  background: rgb(255 255 255 / 0.96);
  box-shadow: 0 10px 24px rgb(34 76 122 / 7%);
}

.article-page-emergency-kit .article-fast-answer-card {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: var(--s2);
  min-height: 0;
  padding: var(--s4);
  border-color: rgb(214 228 239 / 0.95);
}

.article-page-emergency-kit .article-fast-answer-card strong {
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.75;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .article-fast-answer-card em {
  margin-top: auto;
}

.article-page-emergency-kit .article-verdict {
  padding: clamp(var(--s5), 2.5vw, var(--s6));
  border: 1px solid rgb(214 228 239 / 0.95);
  border-radius: calc(var(--r-lg) + 2px);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(240 248 255 / 0.98));
}

.article-page-emergency-kit .emergency-kit-start-section {
  padding: clamp(var(--s5), 2.6vw, var(--s6));
  border: 1px solid rgb(214 228 239 / 0.95);
  border-radius: calc(var(--r-lg) + 2px);
  background: linear-gradient(180deg, rgb(252 254 255 / 0.98), rgb(241 249 255 / 0.98));
}

.article-page-emergency-kit .emergency-kit-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}

.article-page-emergency-kit .emergency-kit-start-card {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s4);
  border: 1px solid rgb(217 230 240 / 0.95);
  border-radius: calc(var(--r-md) + 2px);
  background: rgb(255 255 255 / 0.96);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 24px rgb(34 76 122 / 7%);
}

.article-page-emergency-kit .emergency-kit-start-card span {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #d60f33;
  color: #fff;
  font-weight: 800;
}

.article-page-emergency-kit .emergency-kit-start-card strong {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .emergency-kit-start-card p,
.article-page-emergency-kit .emergency-kit-start-note p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.8;
}

.article-page-emergency-kit .emergency-kit-start-card em {
  margin-top: auto;
  color: #b10d2b;
  font-style: normal;
  font-weight: 700;
}

.article-page-emergency-kit .emergency-kit-start-note {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s4);
  border: 1px solid rgb(210 225 238 / 0.95);
  border-radius: calc(var(--r-md) + 2px);
  background: #f3faff;
}

.article-page-emergency-kit .emergency-kit-start-note div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.article-page-emergency-kit .emergency-kit-start-note a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid rgb(208 221 234 / 0.98);
  border-radius: 999px;
  background: #fff;
  color: #1e5da8;
  font-weight: 700;
  text-decoration: none;
}

.article-page-emergency-kit .verdict-compact-copy {
  max-width: 56rem;
  color: var(--ink-muted);
  line-height: 1.85;
}

.article-page-emergency-kit .verdict-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3);
  padding-left: 0;
}

.article-page-emergency-kit .verdict-list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  margin: 0;
  padding: var(--s4);
  list-style: none;
  border: 1px solid rgb(220 232 242 / 0.95);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.94);
}

.article-page-emergency-kit .verdict-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}

.article-page-emergency-kit .verdict-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.article-page-emergency-kit .article-intent-callout {
  border-radius: calc(var(--r-md) + 2px);
  background: linear-gradient(180deg, #f4fbff 0%, #fff 100%);
  border-color: rgb(212 227 239 / 0.95);
}

.article-page-emergency-kit .article-quick-buy .section-intro,
.article-page-emergency-kit .emergency-kit-choose-section .section-intro,
.article-page-emergency-kit .emergency-kit-compare-section .section-intro {
  max-width: 62rem;
}

.article-page-emergency-kit .quick-buy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.article-page-emergency-kit .quick-buy-card {
  display: grid;
  align-content: start;
  gap: var(--s3);
  min-height: 0;
  padding: var(--s4);
  border-color: rgb(218 231 241 / 0.95);
}

.article-page-emergency-kit .quick-buy-hero {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
}

.article-page-emergency-kit .quick-buy-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-sm) + 2px);
  background: linear-gradient(180deg, #ffffff 0%, #f3faff 100%);
}

.article-page-emergency-kit .quick-buy-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
}

.article-page-emergency-kit .quick-buy-lead {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.75;
}

.article-page-emergency-kit .quick-buy-card h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .quick-buy-card dl {
  margin: 0;
}

.article-page-emergency-kit .product-entry-main {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: start;
}

.article-page-emergency-kit .quick-buy-card,
.article-page-emergency-kit .emergency-kit-start-card,
.article-page-emergency-kit .article-fast-answer-card {
  min-width: 0;
}

.article-page-emergency-kit .product-figure {
  margin: 0;
  padding: var(--s4);
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-md) + 2px);
  background: #fff;
  box-shadow: 0 16px 34px rgb(34 76 122 / 8%);
}

.article-page-emergency-kit .product-figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
}

.article-page-emergency-kit .emergency-kit-criteria-section {
  padding: clamp(var(--s5), 2.6vw, var(--s6));
  border: 1px solid rgb(214 228 239 / 0.95);
  border-radius: calc(var(--r-lg) + 2px);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(242 249 255 / 0.98));
}

.emergency-kit-criteria-figure {
  margin-top: var(--s5);
  overflow: hidden;
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-md) + 2px);
  background: #fff;
  box-shadow: 0 10px 24px rgb(34 76 122 / 7%);
}

.emergency-kit-criteria-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.emergency-kit-criteria-figure figcaption {
  padding: var(--s3) var(--s4);
  border-top: 1px solid rgb(218 231 241 / 0.95);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.emergency-kit-selection-figure {
  margin-top: var(--s5);
  overflow: hidden;
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-md) + 2px);
  background: #fff;
  box-shadow: 0 10px 24px rgb(34 76 122 / 7%);
}

.emergency-kit-selection-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.emergency-kit-selection-figure figcaption {
  padding: var(--s3) var(--s4);
  border-top: 1px solid rgb(218 231 241 / 0.95);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.emergency-kit-pick-details {
  margin-top: var(--s4);
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-sm) + 2px);
  background: rgb(255 255 255 / 0.92);
}

.emergency-kit-pick-details summary {
  cursor: pointer;
  padding: var(--s3) var(--s4);
  font-weight: 700;
  color: #1e5da8;
  list-style: none;
}

.emergency-kit-pick-details summary::-webkit-details-marker {
  display: none;
}

.emergency-kit-pick-details[open] summary {
  border-bottom: 1px solid rgb(218 231 241 / 0.95);
}

.emergency-kit-pick-table {
  margin-top: 0;
}

.emergency-kit-pick-table th,
.emergency-kit-pick-table td {
  min-width: 180px;
}

.emergency-kit-pick-table tbody th {
  background: #f3faff;
  color: #1f3958;
}

.emergency-kit-pick-note {
  margin-top: var(--s4);
  padding: var(--s4);
  border-left: 4px solid #1e5da8;
  border-radius: var(--r-md);
  background: #eef7ff;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.85;
}

.article-page-emergency-kit .emergency-kit-official-section {
  display: grid;
  gap: var(--s5);
}

.article-page-emergency-kit .emergency-kit-official-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: var(--s5);
  align-items: end;
}

.article-page-emergency-kit .emergency-kit-official-head > div {
  display: grid;
  gap: var(--s3);
}

.article-page-emergency-kit .emergency-kit-official-head > div > span,
.article-page-emergency-kit .emergency-kit-official-card > span {
  display: inline-flex;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: #edf6ff;
  color: #1e5da8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.article-page-emergency-kit .emergency-kit-official-head h2,
.article-page-emergency-kit .emergency-kit-official-card h3 {
  margin: 0;
}

.article-page-emergency-kit .emergency-kit-official-head p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.85;
}

.article-page-emergency-kit .emergency-kit-official-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-lg) + 2px);
  background: #fff;
  box-shadow: 0 18px 44px rgb(34 76 122 / 10%);
}

.article-page-emergency-kit .emergency-kit-official-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.article-page-emergency-kit .emergency-kit-official-figure figcaption {
  padding: var(--s4) var(--s5);
  border-top: 1px solid rgb(218 231 241 / 0.95);
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.75;
}

.article-page-emergency-kit .emergency-kit-official-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.article-page-emergency-kit .emergency-kit-official-card {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-md) + 2px);
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  min-width: 0;
}

.article-page-emergency-kit .emergency-kit-official-card h3,
.article-page-emergency-kit .emergency-kit-official-card p,
.article-page-emergency-kit .emergency-kit-official-card a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .emergency-kit-official-card strong {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: #193b63;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.35;
}

.article-page-emergency-kit .emergency-kit-official-card p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.8;
}

.article-page-emergency-kit .emergency-kit-official-card a {
  color: #1e5da8;
  font-weight: 700;
  text-decoration: none;
}

.article-page-emergency-kit .emergency-kit-official-card a:hover {
  text-decoration: underline;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer {
  display: grid;
  gap: var(--s5);
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-card {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-md) + 2px);
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  box-shadow: 0 12px 28px rgb(34 76 122 / 8%);
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-card > span {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #193b63;
  color: #fff;
  font-weight: 800;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-card h3,
.article-page-emergency-kit .emergency-kit-knowledge-primer-card p,
.article-page-emergency-kit .emergency-kit-knowledge-primer-card a {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-card p {
  color: var(--ink-muted);
  line-height: 1.85;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-figure {
  display: grid;
  gap: 10px;
  margin: 0;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-thumb {
  display: block;
  padding: var(--s3);
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-sm) + 2px);
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 22px rgb(34 76 122 / 7%);
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-thumb img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: #fff;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-figure figcaption {
  display: grid;
  gap: 4px;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-figure figcaption a {
  color: #193b63;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.55;
  text-decoration: none;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-figure figcaption small {
  color: var(--ink-muted);
  line-height: 1.6;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.2rem;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-card li {
  color: #193b63;
  line-height: 1.7;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-card a {
  color: #1e5da8;
  font-weight: 700;
  text-decoration: none;
}

.article-page-emergency-kit .emergency-kit-knowledge-primer-links {
  display: grid;
  gap: 10px;
}

.article-page-emergency-kit .emergency-kit-pack-split a,
.article-page-emergency-kit .emergency-kit-knowledge-primer-links a {
  color: #1e5da8;
  font-weight: 700;
  text-decoration: none;
}

.article-page-emergency-kit .emergency-kit-pack-split a:hover,
.article-page-emergency-kit .emergency-kit-knowledge-primer-links a:hover,
.article-page-emergency-kit .emergency-kit-knowledge-primer-figure figcaption a:hover {
  text-decoration: underline;
}

.article-page-emergency-kit .emergency-kit-pack-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.article-page-emergency-kit .emergency-kit-pack-split section {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid rgb(214 228 239 / 0.95);
  border-radius: calc(var(--r-md) + 2px);
  background: #f3faff;
}

.article-page-emergency-kit .emergency-kit-pack-split strong {
  color: #1e5da8;
  font-size: 1.1rem;
}

.article-page-emergency-kit .emergency-kit-pack-split ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.2rem;
}

.article-page-emergency-kit .emergency-kit-pack-split li {
  line-height: 1.75;
}

.article-page-emergency-kit .quick-buy-head span {
  background: #193b63;
}

.article-page-emergency-kit .quick-buy-head b {
  background: #edf6ff;
  color: #1e5da8;
}

.article-page-emergency-kit .emergency-kit-choose-section .check-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.article-page-emergency-kit .emergency-kit-choose-section .check-item {
  min-width: 0;
  padding: var(--s5);
  border-color: rgb(218 231 241 / 0.95);
}

.article-page-emergency-kit .emergency-kit-choose-section .check-item > span {
  background: #d60f33;
}

.article-page-wearable-blanket .wearable-blanket-start-section,
.article-page-wearable-blanket .wearable-blanket-scene-links {
  padding: clamp(var(--s5), 2.6vw, var(--s6));
  border: 1px solid rgb(229 215 199 / 0.96);
  border-radius: calc(var(--r-lg) + 2px);
  background:
    radial-gradient(circle at top right, rgb(185 28 28 / 0.06), transparent 26%),
    linear-gradient(180deg, rgb(255 251 246 / 0.98), rgb(255 255 255 / 0.98));
  box-shadow: 0 16px 34px rgb(49 31 17 / 6%);
}

.article-page-wearable-blanket .wearable-blanket-top-visual {
  margin: var(--s4) 0 0;
  overflow: hidden;
  border: 1px solid rgb(229 215 199 / 0.96);
  border-radius: calc(var(--r-lg) + 4px);
  background: linear-gradient(180deg, rgb(255 250 245 / 0.98), rgb(255 255 255 / 0.98));
  box-shadow: 0 18px 36px rgb(49 31 17 / 8%);
}

.article-page-wearable-blanket .wearable-blanket-top-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.article-page-wearable-blanket .wearable-blanket-start-grid,
.article-page-wearable-blanket .wearable-blanket-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}

.article-page-wearable-blanket .wearable-blanket-start-card,
.article-page-wearable-blanket .wearable-blanket-scene-card {
  display: grid;
  gap: var(--s2);
  align-content: start;
  min-width: 0;
  padding: var(--s4);
  border: 1px solid rgb(229 215 199 / 0.96);
  border-radius: calc(var(--r-md) + 2px);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(255 249 243 / 0.98));
  box-shadow: 0 10px 24px rgb(49 31 17 / 5%);
}

.article-page-wearable-blanket .wearable-blanket-start-card span,
.article-page-wearable-blanket .wearable-blanket-scene-card span {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(135deg, #b91c1c 0%, #d97706 100%);
  color: #fff;
  font-weight: 800;
}

.article-page-wearable-blanket .wearable-blanket-start-card strong,
.article-page-wearable-blanket .wearable-blanket-scene-card strong {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-strong);
}

.article-page-wearable-blanket .wearable-blanket-start-card p,
.article-page-wearable-blanket .wearable-blanket-scene-card p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.82;
}

.article-page-wearable-blanket .wearable-blanket-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s4);
}

.article-page-wearable-blanket .wearable-blanket-start-actions a,
.article-page-wearable-blanket .wearable-blanket-scene-card {
  text-decoration: none;
}

.article-page-wearable-blanket .wearable-blanket-start-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 22px rgb(185 28 28 / 16%);
}

.article-page-wearable-blanket .wearable-blanket-start-actions a:last-child {
  background: #fff4ea;
  color: var(--ink-strong);
  box-shadow: none;
}

.article-page-wearable-blanket .wearable-blanket-scene-card {
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.article-page-wearable-blanket .wearable-blanket-scene-card:hover {
  transform: translateY(-3px);
  border-color: rgb(185 28 28 / 0.22);
  box-shadow: 0 16px 30px rgb(49 31 17 / 8%);
  text-decoration: none;
}

.article-page-wearable-blanket .wearable-blanket-scene-card em {
  margin-top: auto;
  color: #b91c1c;
  font-style: normal;
  font-weight: 700;
}

.emergency-kit-table-guide {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.emergency-kit-table-guide > div {
  display: grid;
  gap: 4px;
  padding: var(--s4);
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: var(--r-md);
  background: #f4faff;
}

.emergency-kit-table-guide strong {
  color: #1e5da8;
  font-size: 0.9375rem;
}

.emergency-kit-table-guide span {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.article-page-emergency-kit .table-scroll,
.article-page-emergency-kit .compare-table {
  border-radius: calc(var(--r-md) + 2px);
}

.article-page-emergency-kit .compare-table thead th {
  background: #eef7ff;
  color: #193b63;
  font-weight: 800;
}

.article-page-emergency-kit .compare-table tbody th {
  background: #f8fcff;
}

.article-page-emergency-kit .compare-table .cell-thumb img {
  width: 88px;
  height: 88px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: var(--r-sm);
}

.article-page-emergency-kit .check-example {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  min-width: 0;
  padding: var(--s4);
  border: 1px solid rgb(218 231 241 / 0.95);
  border-radius: calc(var(--r-sm) + 2px);
  background: #f7fcff;
}

.article-page-emergency-kit .check-example a {
  display: block;
  flex: none;
}

.article-page-emergency-kit .check-example img {
  width: 112px;
  height: 112px;
  padding: 8px;
  object-fit: contain;
  border: 1px solid rgb(218 231 241 / 0.95);
}

.article-page-emergency-kit .check-example figcaption {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .article-toc {
  max-width: 100%;
}

.article-page-emergency-kit .article-toc li {
  min-width: 0;
}

.article-page-emergency-kit .article-toc a {
  align-items: flex-start;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .article-toc a::before {
  margin-top: 0.15rem;
}

.article-page-emergency-kit .article-toc-rail {
  min-width: 0;
}

@media (max-width: 1080px) {
  .article-page-emergency-kit .emergency-kit-official-head,
  .article-page-emergency-kit .emergency-kit-official-grid {
    grid-template-columns: 1fr;
  }
}

.article-page-emergency-kit .article-toc-rail .article-toc {
  margin-top: 0;
  padding: var(--s4);
}

.article-page-emergency-kit .article-toc-rail .article-toc a {
  font-size: 0.875rem;
}

.article-page-emergency-kit .rail-pick,
.article-page-emergency-kit .rail-related {
  margin-top: var(--s4);
}

.article-page-emergency-kit .rail-related > a {
  align-items: start;
}

.article-page-emergency-kit .rail-related strong,
.article-page-emergency-kit .rail-related em,
.article-page-emergency-kit .rail-pick strong,
.article-page-emergency-kit .related-inline strong,
.article-page-emergency-kit .related-inline em {
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .related-inline > div {
  grid-template-columns: 1fr;
}

.article-page-emergency-kit .related-inline a {
  align-items: start;
}

.article-page-emergency-kit .product-entry-head > div,
.article-page-emergency-kit .product-source-links,
.article-page-emergency-kit .buy-box,
.article-page-emergency-kit .buy-box-head,
.article-page-emergency-kit .product-specs-inline,
.article-page-emergency-kit .product-pitch {
  min-width: 0;
}

.article-page-emergency-kit .product-entry-head h3,
.article-page-emergency-kit .product-pitch,
.article-page-emergency-kit .product-note,
.article-page-emergency-kit .buy-box-meta,
.article-page-emergency-kit .product-source-links,
.article-page-emergency-kit .product-specs-inline dd,
.article-page-emergency-kit .product-specs-inline dt {
  overflow-wrap: anywhere;
}

.article-page-emergency-kit .product-specs-inline > div {
  grid-template-columns: minmax(6.2em, 7.4em) minmax(0, 1fr);
}

.article-page-emergency-kit .knowledge-list {
  max-width: 100%;
}

.article-page-emergency-kit .knowledge-topic + .knowledge-topic {
  padding-top: var(--s5);
  border-top: 1px dashed rgb(225 231 223 / 0.95);
}

@media (min-width: 1100px) and (max-width: 1439px) {
  .article-page-emergency-kit .article-fast-answer {
    grid-template-columns: 1fr;
  }

  .article-page-emergency-kit .emergency-kit-start-grid,
  .article-page-emergency-kit .emergency-kit-knowledge-primer-grid,
  .article-page-emergency-kit .quick-buy-grid,
  .article-page-emergency-kit .verdict-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-page-wearable-blanket .wearable-blanket-start-grid,
  .article-page-wearable-blanket .wearable-blanket-scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) and (max-width: 979px) {
  .article-page-emergency-kit .product-entry-main {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: var(--s4);
  }

  .article-page-emergency-kit .product-figure {
    padding: var(--s3);
  }
}

@media (max-width: 767px) {
  .article-page-emergency-kit {
    width: min(100% - 2 * var(--s2), 100%);
  }

  .article-page-emergency-kit .article-body {
    padding: var(--s3);
    border-radius: var(--r-lg);
  }

  .emergency-kit-article-head {
    padding: var(--s4);
  }

  .article-page-emergency-kit .verdict-list li {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .article-page-emergency-kit .verdict-thumb {
    width: 56px;
    height: 56px;
  }

  .article-page-emergency-kit .article-fast-answer {
    grid-template-columns: 1fr;
  }

  .article-page-emergency-kit .emergency-kit-start-grid,
  .article-page-emergency-kit .emergency-kit-official-head,
  .article-page-emergency-kit .emergency-kit-knowledge-primer-grid,
  .article-page-emergency-kit .emergency-kit-pack-split {
    grid-template-columns: 1fr;
  }

  .article-page-emergency-kit .quick-buy-grid,
  .article-page-emergency-kit .verdict-list {
    grid-template-columns: 1fr;
  }

  .article-page-emergency-kit .emergency-kit-start-note div {
    flex-direction: column;
  }

  .article-page-emergency-kit .emergency-kit-start-note a {
    width: 100%;
  }

  .article-page-emergency-kit .quick-buy-hero {
    grid-template-columns: 1fr;
  }

  .article-page-emergency-kit .quick-buy-figure {
    max-width: 220px;
  }

  .article-page-emergency-kit .product-entry-main,
  .article-page-emergency-kit .check-example {
    grid-template-columns: 1fr;
  }

  .article-page-emergency-kit .related-inline a {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .article-page-emergency-kit .related-inline img {
    width: 72px;
    height: 72px;
  }

  .article-page-emergency-kit .check-example img {
    width: 96px;
    height: 96px;
  }

  .article-page-wearable-blanket .wearable-blanket-start-grid,
  .article-page-wearable-blanket .wearable-blanket-scene-grid {
    grid-template-columns: 1fr;
  }

  .article-page-wearable-blanket .wearable-blanket-start-actions {
    flex-direction: column;
  }

  .article-page-wearable-blanket .wearable-blanket-start-actions a {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   単独広告主のPR記事（/magazine）
   my-best のマガジン面に合わせて、比較記事より本文を主役にする。
   広告であることの開示は消さず、黒帯にもせず、本文と同じ色の1文で出す。
   -------------------------------------------------------------------------- */
.magazine-page article {
  width: min(100% - 2 * var(--s4), 46rem);
  margin-inline: auto;
  padding-bottom: var(--s7);
}
.magazine-header { margin-top: var(--s5); }
.magazine-kicker {
  display: inline-block;
  margin: 0 0 var(--s3);
  padding: 2px var(--s3);
  border: 1px solid rgb(31 41 55 / 22%);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.magazine-page h1 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.45;
  color: var(--ink-strong);
}
/* 開示。14pxで本文色。小さくして目立たなくすることはしない。 */
.magazine-disclosure {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink);
}
.magazine-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.magazine-eyecatch {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s5);
  border-radius: var(--r3, 12px);
  border: 1px solid var(--line, #ece7e2);
}
.magazine-lead { margin-top: var(--s5); }
.magazine-lead p,
.magazine-section p { line-height: 1.95; }
.magazine-section h2 {
  margin-top: var(--s6);
  font-size: 1.375rem;
  color: var(--ink-strong);
}
.magazine-list {
  margin: var(--s4) 0 0;
  padding-left: 1.25em;
  line-height: 1.95;
}
.magazine-list li { margin-top: var(--s2); }
.magazine-table { width: 100%; border-collapse: collapse; margin-top: var(--s4); }
.magazine-table th,
.magazine-table td {
  padding: var(--s3);
  border: 1px solid rgb(31 41 55 / 12%);
  text-align: left;
  font-size: 0.9375rem;
  vertical-align: top;
}
.magazine-table th { width: 34%; background: var(--surface-sunken); font-weight: 700; }
/* CTA。バナーではなく、本文の流れに置く1本のボタンにする。 */
.magazine-cta {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: var(--surface-sunken);
  border-radius: var(--r-lg);
  text-align: center;
}
.magazine-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--s6);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-inverse);
  font-weight: 700;
  text-decoration: none;
}
.magazine-cta-button:hover { background: var(--brand-strong); text-decoration: none; }
.magazine-cta small {
  display: block;
  margin-top: var(--s3);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* 単独広告主のPR記事の一覧 */
.magazine-index-list {
  display: grid;
  gap: var(--s4);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}
.magazine-index-list a {
  display: block;
  padding: var(--s5);
  border: 1px solid rgb(31 41 55 / 12%);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.magazine-index-list a:hover { border-color: rgb(31 41 55 / 28%); text-decoration: none; }
.magazine-index-list small {
  display: inline-block;
  margin-bottom: var(--s2);
  padding: 1px var(--s2);
  border: 1px solid rgb(31 41 55 / 22%);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  font-weight: 700;
}
.magazine-index-list strong { display: block; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-strong); }
.magazine-index-list p { margin: var(--s2) 0 0; font-size: 0.875rem; line-height: 1.8; color: var(--ink-muted); }
.magazine-index-list em { display: inline-block; margin-top: var(--s3); font-style: normal; font-weight: 700; font-size: 0.875rem; }

/* メーカー紹介から、そのメーカーの掲載商品へ絞り込んで移動するボタン */
.maker-jump {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s2) var(--s4);
  border: 1px solid rgb(31 41 55 / 20%);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.maker-jump::after { content: "→"; }
.maker-jump:hover { border-color: rgb(31 41 55 / 40%); background: var(--surface-sunken); text-decoration: none; }

/* 選び方の各項目に添える実例写真。生成画像ではなく掲載商品の販売ページ写真。 */
.check-example {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s3) 0 0;
  padding: var(--s3);
  background: var(--surface-sunken);
  border-radius: var(--r-lg);
}
.check-example img {
  width: 72px;
  height: 72px;
  flex: none;
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--r-sm);
}
.check-example figcaption {
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.check-example figcaption a { color: var(--ink); font-weight: 700; }
.check-example figcaption small { display: block; margin-top: 2px; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   トップ最終調整（2026-08-25）
   my-best の「カテゴリを押して探す」分かりやすさだけを参考にし、
   検索窓ではなく画像カテゴリと価格確認済み商品へ最短で進ませる。
   -------------------------------------------------------------------------- */
body:has(.gateway-page) {
  background: #fbf9f6;
}

.gateway-page > .home-hero {
  margin-top: 0;
  border-bottom: 0;
  background:
    radial-gradient(520px 260px at 80% 6%, rgb(200 16 46 / 7%), transparent 68%),
    radial-gradient(540px 300px at 10% 100%, rgb(245 158 11 / 10%), transparent 72%),
    linear-gradient(180deg, #fff 0%, #fffdf9 60%, #fbf7ef 100%);
}

.home-hero-inner {
  padding-block: clamp(1.35rem, 2.8vw, 2.45rem) clamp(0.9rem, 2vw, 1.35rem);
}

.home-hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

.home-hero-copy {
  display: grid;
  max-width: 760px;
}

.home-hero-kicker {
  padding: 5px 14px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

.home-hero h1 {
  max-width: 9.7em;
  margin-top: var(--s3);
  font-size: clamp(2.15rem, 1.25rem + 4vw, 3.85rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.home-hero h1 em {
  color: var(--brand);
  padding: 0 0.03em 0.03em;
  background:
    linear-gradient(transparent 72%, rgb(246 215 178 / 94%) 72%, rgb(246 215 178 / 94%) 88%, transparent 88%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.home-hero .gateway-hero-lead {
  max-width: 44em;
  margin-top: var(--s3);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.82;
}

.home-visual-nav {
  display: none;
}

.home-search-suggestions--sub {
  width: 100%;
  max-width: 760px;
  margin-top: var(--s4);
}

.home-hero-actions {
  margin-top: var(--s4);
}

.home-hero-actions a {
  min-height: 46px;
  padding-inline: var(--s5);
}

.home-topic-dock {
  margin-top: clamp(0.75rem, 1.8vw, 1.25rem);
  padding: clamp(0.9rem, 2vw, 1.25rem);
  border-radius: 24px;
}

.home-topic-heading {
  align-items: center;
}

.home-topic-heading h2 {
  max-width: 22em;
  font-size: clamp(1.28rem, 2vw, 1.65rem);
}

.home-topic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-topic-grid a {
  padding: 8px 8px 12px;
  border-radius: 18px;
}

.home-topic-icon {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #fff;
}

.home-topic-icon img {
  object-fit: cover;
  object-position: center;
}

.home-daily-highlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2rem);
  width: min(100%, var(--content-max));
  margin: clamp(1rem, 2.4vw, 1.5rem) auto 0;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid rgb(31 41 55 / 9%);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 92%) 0%, rgb(255 250 242 / 92%) 100%),
    radial-gradient(420px 220px at 92% 14%, rgb(200 16 46 / 9%), transparent 70%);
  box-shadow: 0 18px 46px rgb(31 41 55 / 6%);
}

.home-daily-highlight-copy {
  display: grid;
  gap: var(--s2);
}

.home-daily-highlight-copy span {
  width: fit-content;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.home-daily-highlight-copy h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.35;
}

.home-daily-highlight-copy p {
  max-width: 42em;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.94rem;
  line-height: 1.8;
}

.home-daily-highlight .hero-pick {
  max-width: 360px;
  min-height: 0;
  margin: 0;
  box-shadow: 0 14px 34px rgb(31 41 55 / 10%);
}

.home-daily-highlight .hero-pick-image {
  height: auto;
  aspect-ratio: 1;
}

.home-daily-highlight .hero-pick-image img {
  max-height: none;
}

.home-buy-now {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.featured-grid {
  gap: clamp(0.65rem, 1.3vw, 0.95rem);
}

.featured-card {
  padding: var(--s3);
  border-radius: 18px;
}

.featured-card-media img {
  aspect-ratio: 1;
  max-height: 156px;
  object-fit: contain;
}

.featured-card-media strong {
  min-height: 3.05em;
}

@media (min-width: 1280px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero-copy {
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
  }

  .home-search-suggestions--sub,
  .home-hero-actions {
    grid-column: auto;
  }
}

@media (max-width: 959px) {
  .home-daily-highlight {
    grid-template-columns: 1fr;
  }

  .home-daily-highlight .hero-pick {
    justify-self: start;
    max-width: min(100%, 360px);
  }
}

@media (max-width: 767px) {
  .home-topic-heading {
    display: grid;
    justify-content: start;
  }

  .home-topic-heading h2 {
    text-align: left;
  }

  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .gateway-page > .home-hero {
    margin-top: 0;
  }

  .home-hero-inner {
    padding-block: var(--s4) var(--s3);
  }

  .home-hero h1 {
    max-width: 8.6em;
    font-size: clamp(2rem, 9vw, 2.55rem);
    line-height: 1.2;
  }

  .home-hero-actions {
    grid-template-columns: 1fr;
  }

  .home-daily-highlight {
    margin-top: var(--s3);
    padding: var(--s3);
    border-radius: 22px;
  }

  .home-daily-highlight .hero-pick {
    max-width: 100%;
  }

  .featured-card-media img {
    max-height: 132px;
  }
}

/* --------------------------------------------------------------------------
   トップ再調整（2026-08-25 夜）
   実測でカテゴリ棚がPC幅1280でも約893pxまで伸びていたため、
   画像バナー型ではなく「画像アイコンで選ぶ」導線へ寄せる。
   -------------------------------------------------------------------------- */
.gateway-page > .home-hero {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 92%) 0%, rgb(255 255 255 / 82%) 56%, rgb(255 249 239 / 55%) 100%),
    linear-gradient(180deg, #fff 0%, #fffaf3 100%);
}

.home-hero-inner {
  padding-block: clamp(1rem, 2vw, 1.75rem) clamp(0.65rem, 1.4vw, 1rem);
}

.home-hero-copy {
  max-width: 860px;
}

.home-hero h1 {
  max-width: 11.5em;
  margin-top: 0.65rem;
  font-size: clamp(2rem, 1.25rem + 3.1vw, 3.2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.home-hero h1 em {
  display: inline;
  padding-inline: 0.02em;
  padding-bottom: 0.03em;
  background:
    linear-gradient(transparent 68%, rgb(244 220 190 / 95%) 68%, rgb(244 220 190 / 95%) 86%, transparent 86%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.home-hero .gateway-hero-lead {
  max-width: 38em;
  margin-top: 0.9rem;
  font-size: clamp(0.95rem, 1vw, 1.02rem);
  line-height: 1.72;
}

.home-search-suggestions--sub {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  max-width: 100%;
  margin-top: 0.85rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-search-suggestions--sub::-webkit-scrollbar {
  display: none;
}

.home-search-suggestions--sub a {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.home-hero-actions a {
  min-height: 44px;
  padding: 0.72rem 1.3rem;
}

.home-topic-dock {
  width: min(100%, var(--content-max));
  margin-top: clamp(0.45rem, 1.2vw, 0.85rem);
  padding: clamp(0.75rem, 1.6vw, 1rem);
  border-radius: 22px;
}

.home-topic-heading {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.7rem;
}

.home-topic-heading span {
  font-size: 0.78rem;
}

.home-topic-heading h2 {
  max-width: none;
  font-size: clamp(1.08rem, 1.35vw, 1.3rem);
  line-height: 1.35;
  text-align: left;
}

.home-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 0.55rem;
}

.home-topic-grid a {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  row-gap: 0.18rem;
  align-items: center;
  min-height: 76px;
  padding: 0.58rem;
  border-radius: 16px;
}

.home-topic-icon {
  grid-row: 1 / span 2;
  width: 50px;
  height: 50px;
  aspect-ratio: 1;
  border-radius: 18px;
  background: #fff7f4;
  box-shadow: inset 0 0 0 1px rgb(200 16 46 / 7%);
}

.home-topic-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-topic-grid strong {
  align-self: end;
  font-size: 0.9rem;
  line-height: 1.25;
}

.home-topic-grid small {
  align-self: start;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.home-daily-highlight {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  margin-top: clamp(0.75rem, 1.8vw, 1.2rem);
  padding: clamp(0.8rem, 1.8vw, 1.15rem);
  border-radius: 22px;
}

.home-daily-highlight-copy {
  gap: 0.3rem;
}

.home-daily-highlight-copy h2 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.home-daily-highlight-copy p {
  font-size: 0.88rem;
  line-height: 1.65;
}

.home-daily-highlight .hero-pick {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-areas:
    "image flag"
    "image category"
    "image name"
    "image price"
    "image cta"
    "meta meta";
  column-gap: 0.8rem;
  row-gap: 0.18rem;
  width: 100%;
  max-width: 420px;
  padding: 0.75rem;
}

.home-daily-highlight .hero-pick-flag {
  grid-area: flag;
  justify-self: start;
  margin: 0;
  font-size: 0.7rem;
}

.home-daily-highlight .hero-pick-image {
  grid-area: image;
  align-self: stretch;
  min-height: 108px;
  aspect-ratio: 1;
  border-radius: 16px;
}

.home-daily-highlight .hero-pick-category {
  grid-area: category;
}

.home-daily-highlight .hero-pick-name {
  grid-area: name;
  font-size: 0.95rem;
  line-height: 1.35;
}

.home-daily-highlight .hero-pick-price {
  grid-area: price;
  display: block;
  margin: 0;
}

.home-daily-highlight .hero-pick-price b {
  display: block;
  font-size: 1.25rem;
}

.home-daily-highlight .hero-pick-cta {
  grid-area: cta;
  min-height: 40px;
  padding-block: 0.6rem;
  font-size: 0.82rem;
}

.home-daily-highlight .hero-pick-meta {
  grid-area: meta;
  margin: 0.35rem 0 0;
}

@media (max-width: 767px) {
  .gateway-page > .home-hero {
    background: linear-gradient(180deg, #fff 0%, #fffaf3 100%);
  }

  .home-hero-inner {
    padding-block: 0.95rem 0.75rem;
  }

  .home-hero h1 {
    max-width: 9.8em;
    font-size: clamp(1.82rem, 7.2vw, 2.35rem);
    line-height: 1.22;
  }

  .home-hero .gateway-hero-lead {
    margin-top: 0.7rem;
    line-height: 1.68;
  }

  .home-topic-dock {
    padding: 0.75rem;
    border-radius: 18px;
  }

  .home-topic-heading {
    display: grid;
    gap: 0.2rem;
  }

  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .home-topic-grid a {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 74px;
    padding: 0.55rem;
  }

  .home-topic-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .home-topic-grid strong {
    font-size: 0.88rem;
  }

  .home-topic-grid small {
    font-size: 0.7rem;
  }

  .home-daily-highlight {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .home-daily-highlight .hero-pick {
    grid-template-columns: 92px minmax(0, 1fr);
    max-width: 100%;
  }

  .home-daily-highlight .hero-pick-image {
    min-height: 92px;
  }
}

/* --------------------------------------------------------------------------
   Homepage final QA fix (2026-08-25)
   - 文字重なりを防ぐ
   - my-best風の「カテゴリーから探す」入口を残し、重複棚は隠す
   - 今日の目玉を横長バナーではなく小さな商品カードにする
   -------------------------------------------------------------------------- */
.gateway-page {
  overflow-x: clip;
}

.gateway-page > .home-hero {
  margin-top: 0;
  overflow: hidden;
  border-bottom: 1px solid rgb(31 41 55 / 7%);
  background:
    radial-gradient(520px 280px at 88% 12%, rgb(200 16 46 / 6%), transparent 68%),
    radial-gradient(520px 300px at 10% 92%, rgb(245 158 11 / 9%), transparent 72%),
    linear-gradient(180deg, #fff 0%, #fffdf9 66%, #fbf6ee 100%);
}

.home-hero-inner,
.home-hero-inner.home-hero-grid {
  width: min(100% - 2 * var(--s6), var(--w-page));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
  padding-block: clamp(1.2rem, 2.7vw, 2.25rem) clamp(0.85rem, 1.8vw, 1.25rem);
}

.home-hero-copy {
  max-width: 760px;
  min-width: 0;
}

.home-hero-kicker {
  width: fit-content;
  margin: 0;
  padding: 0.36rem 0.95rem;
  border: 1px solid rgb(200 16 46 / 14%);
  border-radius: var(--r-full);
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 10px 26px rgb(31 41 55 / 4%);
}

.home-hero h1 {
  max-width: 8.5em;
  margin: 0.7rem 0 0;
  font-size: clamp(2.2rem, 1.35rem + 3.15vw, 3.75rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
  overflow-wrap: normal;
}

.home-hero h1 em {
  display: inline;
  color: var(--brand);
  font-style: normal;
  padding-inline: 0.03em;
  background:
    linear-gradient(transparent 66%, rgb(244 214 176 / 96%) 66% 86%, transparent 86%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.home-hero .gateway-hero-lead {
  max-width: 37em;
  margin: 0.85rem 0 0;
  font-size: clamp(0.98rem, 0.9rem + 0.34vw, 1.12rem);
  line-height: 1.78;
  text-wrap: pretty;
}

.home-visual-nav,
.home-search-suggestions--sub,
.compare-shelves {
  display: none !important;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.05rem;
}

.home-hero-actions a {
  min-height: 48px;
  padding: 0.78rem 1.35rem;
  font-size: 0.95rem;
}

.home-topic-dock {
  width: min(100% - 2 * var(--s6), var(--w-page));
  margin-top: clamp(0.9rem, 2vw, 1.35rem);
  padding: clamp(0.95rem, 1.9vw, 1.3rem);
  border: 1px solid rgb(109 74 45 / 10%);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgb(255 252 248 / 96%) 0%, rgb(255 247 239 / 92%) 100%),
    url("/home-topic-bg-premium.png") center/cover no-repeat;
  box-shadow: 0 24px 54px rgb(79 51 29 / 8%);
}

.home-topic-heading {
  display: grid;
  justify-items: start;
  gap: 0.3rem;
  margin-bottom: 0.95rem;
}

.home-topic-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 0.72rem;
  border-radius: var(--r-full);
  border: 1px solid rgb(200 16 46 / 14%);
  background: rgb(255 255 255 / 78%);
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.home-topic-heading h2 {
  max-width: 14em;
  margin: 0;
  font-size: clamp(1.34rem, 1.08rem + 1.1vw, 1.92rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-align: left;
}

.home-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 0.78rem;
}

.home-topic-grid a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 0.16rem 0.82rem;
  min-height: 114px;
  padding: 0.78rem;
  border: 1px solid rgb(109 74 45 / 10%);
  border-radius: 22px;
  background: rgb(255 255 255 / 84%);
  box-shadow: 0 14px 28px rgb(79 51 29 / 5%);
}

.home-topic-icon {
  grid-row: 1 / span 3;
  width: 72px;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgb(200 16 46 / 9%);
  background: linear-gradient(180deg, rgb(255 255 255 / 95%) 0%, rgb(248 240 232 / 92%) 100%);
  box-shadow: 0 10px 24px rgb(79 51 29 / 8%);
}

.home-topic-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-topic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
  align-self: end;
}

.home-topic-meta b,
.home-topic-meta i {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0.52rem;
  border-radius: var(--r-full);
  font-size: 0.66rem;
  line-height: 1;
  font-style: normal;
  white-space: nowrap;
}

.home-topic-meta b {
  background: rgb(200 16 46 / 8%);
  color: var(--brand-strong);
}

.home-topic-meta i {
  background: rgb(115 91 68 / 7%);
  color: var(--ink-muted);
}

.home-topic-grid strong {
  align-self: center;
  font-size: 1rem;
  line-height: 1.28;
  color: var(--ink-strong);
}

.home-topic-grid small {
  align-self: start;
  display: -webkit-box;
  overflow: hidden;
  color: #6d5b4d;
  font-size: 0.77rem;
  line-height: 1.42;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-daily-highlight {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  border-radius: 24px;
}

.home-daily-highlight .hero-pick {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-areas:
    "image flag"
    "image category"
    "image name"
    "image price"
    "image cta"
    "meta meta";
  column-gap: 0.85rem;
  row-gap: 0.2rem;
  width: 100%;
  max-width: 360px;
  min-height: 0;
  margin: 0;
  padding: 0.8rem;
  border-radius: 20px;
}

.home-daily-highlight .hero-pick-flag {
  grid-area: flag;
  justify-self: start;
  margin: 0;
  font-size: 0.68rem;
}

.home-daily-highlight .hero-pick-image {
  grid-area: image;
  align-self: stretch;
  height: auto;
  min-height: 108px;
  aspect-ratio: 1;
  border-radius: 16px;
}

.home-daily-highlight .hero-pick-image img {
  max-height: none;
}

.home-daily-highlight .hero-pick-category {
  grid-area: category;
}

.home-daily-highlight .hero-pick-name {
  grid-area: name;
  font-size: 0.95rem;
  line-height: 1.35;
}

.home-daily-highlight .hero-pick-price {
  grid-area: price;
  display: block;
  margin: 0;
}

.home-daily-highlight .hero-pick-price b {
  display: block;
  font-size: 1.22rem;
}

.home-daily-highlight .hero-pick-cta {
  grid-area: cta;
  min-height: 40px;
  padding-block: 0.58rem;
  font-size: 0.82rem;
}

.home-daily-highlight .hero-pick-meta {
  grid-area: meta;
  margin: 0.34rem 0 0;
}

@media (max-width: 767px) {
  .home-hero-inner,
  .home-hero-inner.home-hero-grid,
  .home-topic-dock {
    width: min(100% - 2 * var(--s4), var(--w-page));
  }

  .home-hero-inner,
  .home-hero-inner.home-hero-grid {
    padding-block: 1rem 0.8rem;
  }

  .home-hero h1 {
    max-width: 8.6em;
    font-size: clamp(1.95rem, 8.5vw, 2.55rem);
    line-height: 1.2;
  }

  .home-hero .gateway-hero-lead {
    line-height: 1.68;
  }

  .home-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .home-hero-actions a {
    min-height: 46px;
    padding-inline: 0.65rem;
    font-size: 0.88rem;
  }

  .home-topic-dock {
    margin-top: 0.75rem;
    padding: 0.82rem;
    border-radius: 22px;
  }

  .home-topic-heading {
    display: grid;
    justify-items: start;
  }

  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
  }

  .home-topic-grid a {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    justify-items: start;
    align-content: start;
    min-height: 156px;
    padding: 0.62rem;
    gap: 0.34rem;
    text-align: left;
  }

  .home-topic-icon {
    grid-row: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1.55 / 1;
    border-radius: 18px;
  }

  .home-topic-meta {
    gap: 0.28rem;
  }

  .home-topic-grid strong {
    align-self: auto;
    width: 100%;
    font-size: 0.9rem;
  }

  .home-topic-grid small {
    align-self: auto;
    width: 100%;
    font-size: 0.7rem;
    line-height: 1.4;
  }

  .home-daily-highlight {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .home-daily-highlight .hero-pick {
    max-width: 100%;
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .home-daily-highlight .hero-pick-image {
    min-height: 92px;
  }
}

@media (max-width: 340px) {
  .home-hero-actions {
    grid-template-columns: 1fr;
  }

  .home-topic-grid a {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 112px;
    padding-inline: 0.48rem;
    text-align: left;
  }

  .home-topic-icon {
    grid-row: 1 / span 3;
    width: 72px;
    aspect-ratio: 1;
    height: 72px;
  }
}

/* --------------------------------------------------------------------------
   2026-08-25: category wording + daily pick overlap fix
   - 意味が伝わる「カテゴリーから探す」へ
   - 今日の目玉は画像・本文・CTAを分離し、どの幅でも重ならないカードへ
   -------------------------------------------------------------------------- */
.home-topic-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(31 41 55 / 8%);
}

.home-topic-quick-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.45rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: #fff;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 20px rgb(31 41 55 / 4%);
}

.home-topic-quick-links a:hover {
  border-color: rgb(200 16 46 / 28%);
  color: var(--brand-strong);
  text-decoration: none;
}

.home-daily-highlight .hero-pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.72rem;
  width: 100%;
  max-width: 390px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(0.85rem, 1.8vw, 1rem);
  overflow: hidden;
}

.home-daily-highlight .hero-pick-flag {
  position: static;
  justify-self: start;
  margin: 0;
}

.home-daily-highlight .hero-pick-main {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
}

.home-daily-highlight .hero-pick-body {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.home-daily-highlight .hero-pick-image {
  display: block;
  width: 116px;
  height: 116px;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
}

.home-daily-highlight .hero-pick-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.home-daily-highlight .hero-pick-category,
.home-daily-highlight .hero-pick-name,
.home-daily-highlight .hero-pick-price {
  min-width: 0;
}

.home-daily-highlight .hero-pick-category {
  font-size: 0.75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.home-daily-highlight .hero-pick-name {
  display: block;
  font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.08rem);
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.home-daily-highlight .hero-pick-price {
  display: grid;
  gap: 0.12rem;
  margin: 0.15rem 0 0;
}

.home-daily-highlight .hero-pick-price small {
  font-size: 0.75rem;
}

.home-daily-highlight .hero-pick-price b {
  display: block;
  font-size: clamp(1.22rem, 1.04rem + 0.9vw, 1.55rem);
  line-height: 1.1;
}

.home-daily-highlight .hero-pick-cta {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  border-radius: 15px;
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: center;
}

.home-daily-highlight .hero-pick-meta {
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .home-topic-quick-links {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-inline: -0.2rem;
    padding-inline: 0.2rem;
    scroll-padding-inline: 0.2rem;
    -webkit-overflow-scrolling: touch;
  }

  .home-topic-quick-links a {
    flex: 0 0 auto;
    min-height: 36px;
    padding-inline: 0.7rem;
    font-size: 0.78rem;
  }

  .home-daily-highlight .hero-pick {
    max-width: none;
    text-align: left;
  }

  .home-daily-highlight .hero-pick-main {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 0.72rem;
  }

  .home-daily-highlight .hero-pick-image {
    width: 96px;
    height: 96px;
    margin-inline: 0;
    border-radius: 15px;
  }

  .home-daily-highlight .hero-pick-body {
    width: auto;
    justify-self: stretch;
  }

  .home-daily-highlight .hero-pick-cta {
    inline-size: 100%;
    justify-content: center;
  }
}

@media (max-width: 340px) {
  .home-daily-highlight .hero-pick-image {
    width: 88px;
    height: 88px;
  }
}

/* Final homepage visual lock (2026-08-27)
   The hero emphasis should read like a soft pen underline, not a stripe through
   the Japanese characters. Keep this at the end so older homepage experiments
   above cannot pull the mark back into the middle of the text. */
.gateway-page .home-hero h1 em {
  color: var(--brand);
  background: none;
  text-decoration-line: underline;
  text-decoration-color: rgb(200 16 46 / 18%);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.24em;
  text-decoration-skip-ink: none;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

@media (max-width: 639px) {
  body:has(.gateway-page) .global-ad-bar {
    display: none;
  }
}

/* 2026-08-27 final specificity lock:
   The top-page category dock is intentionally square-icon based.
   Older homepage experiments define .home-topic-heading later in the bundled CSS
   as a right-aligned flex row, so every selector here is scoped with
   .gateway-page to win by specificity instead of relying on import order. */
.gateway-page .home-topic-dock {
  width: min(1180px, calc(100% - 32px));
  margin: clamp(1.6rem, 4vw, 3rem) auto;
  padding: clamp(1.05rem, 2.4vw, 1.85rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.45rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(1.35rem, 3vw, 2.15rem);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 64px rgb(15 23 42 / 7%);
}

.gateway-page .home-topic-heading {
  display: grid;
  justify-content: start;
  justify-items: start;
  align-items: start;
  gap: 0.42rem;
  max-width: none;
  min-width: 0;
  margin: 0;
  text-align: left;
}

.gateway-page .home-topic-heading span {
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: none;
}

.gateway-page .home-topic-heading h2 {
  margin: 0;
  max-width: none;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 1rem + 1.45vw, 2.15rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: left;
  overflow-wrap: anywhere;
}

.gateway-page .home-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 0.95rem);
  overflow: visible;
}

.gateway-page .home-topic-grid a {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 0.78rem;
  min-width: 0;
  min-height: 96px;
  padding: 0.72rem 0.82rem;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
}

.gateway-page .home-topic-icon {
  width: 58px;
  height: 58px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--brand-soft);
}

.gateway-page .home-topic-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gateway-page .home-topic-grid strong,
.gateway-page .home-topic-grid small {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .gateway-page .home-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .gateway-page .home-topic-dock {
    width: min(100% - 1.25rem, 560px);
    margin: 1rem auto 1.2rem;
    padding: 0.9rem;
    border-radius: 1.25rem;
  }

  .gateway-page .home-topic-heading h2 {
    font-size: clamp(1.18rem, 5.2vw, 1.55rem);
    line-height: 1.35;
  }

  .gateway-page .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
  }

  .gateway-page .home-topic-grid a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.34rem;
    min-height: 120px;
    padding: 0.68rem 0.5rem;
    text-align: center;
  }

  .gateway-page .home-topic-icon {
    width: 58px;
    height: 58px;
  }
}

/* 2026-08-27 final home category dock lock:
   このファイルにはトップ刷新の試作CSSが複数残っているため、PC/スマホの
   「カテゴリーから探す」はここで最終形に固定する。 */
.home-topic-dock {
  width: min(1180px, calc(100% - 32px));
  margin: clamp(1.6rem, 4vw, 3rem) auto;
  padding: clamp(1.05rem, 2.4vw, 1.85rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.45rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(1.35rem, 3vw, 2.15rem);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 64px rgb(15 23 42 / 7%);
}

.home-topic-heading {
  display: grid;
  justify-items: start;
  gap: 0.42rem;
  max-width: none;
  min-width: 0;
  text-align: left;
}

.home-topic-heading span {
  color: var(--brand);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.home-topic-heading h2 {
  margin: 0;
  max-width: none;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 1rem + 1.45vw, 2.15rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.home-topic-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.82rem;
  overflow: visible;
}

.home-topic-grid a {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.88rem;
  row-gap: 0.18rem;
  min-width: 0;
  min-height: 112px;
  padding: 0.88rem 1rem;
  overflow: hidden;
  border-radius: 1.1rem;
}

.home-topic-icon {
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  flex: 0 0 auto;
}

.home-topic-grid strong,
.home-topic-grid small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-topic-grid strong {
  align-self: end;
  line-height: 1.35;
}

.home-topic-grid small {
  align-self: start;
  line-height: 1.5;
}

.home-topic-quick-links {
  width: 100%;
  margin-top: 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.1rem 0 0.25rem;
  scrollbar-width: none;
}

.home-topic-quick-links::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-topic-dock {
    width: min(100% - 1.25rem, 560px);
    margin-block: 1.15rem;
    padding: 0.95rem;
    border-radius: 1.35rem;
  }

  .home-topic-heading h2 {
    font-size: clamp(1.22rem, 5.2vw, 1.55rem);
  }

  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
  }

  .home-topic-grid a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.34rem;
    min-height: 122px;
    padding: 0.72rem 0.55rem;
    text-align: center;
  }

  .home-topic-icon {
    width: 58px;
    height: 58px;
  }

  .home-topic-grid small {
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  .home-topic-grid a {
    min-height: 116px;
    padding-inline: 0.42rem;
  }
}

/* 2026-08-25: override the older grid-area daily-pick rules after markup change. */
.home-daily-highlight .hero-pick,
.home-daily-highlight .hero-pick-main,
.home-daily-highlight .hero-pick-body {
  grid-template-areas: none;
}

.home-daily-highlight .hero-pick-flag,
.home-daily-highlight .hero-pick-image,
.home-daily-highlight .hero-pick-category,
.home-daily-highlight .hero-pick-name,
.home-daily-highlight .hero-pick-price,
.home-daily-highlight .hero-pick-cta,
.home-daily-highlight .hero-pick-meta {
  grid-area: auto;
}

@media (max-width: 767px) {
  .home-daily-highlight .hero-pick-main {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .home-daily-highlight .hero-pick-body,
  .home-daily-highlight .hero-pick-cta,
  .home-daily-highlight .hero-pick-meta {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .home-daily-highlight .hero-pick-image {
    justify-self: start;
  }
}

/* --------------------------------------------------------------------------
   2026-08-26: homepage category cards back to square icon navigation
   - 横長バナー画像ではなく、480×480 の正方形WebPアイコンを使う
   - PCは一覧性を優先して小さめのカード、スマホは3列のタップ入口
   -------------------------------------------------------------------------- */
.home-topic-grid {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.62rem;
}

.home-topic-grid a {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 0.72rem 0.48rem;
  gap: 0.36rem;
  text-align: center;
}

.home-topic-icon {
  grid-row: auto;
  width: clamp(58px, 5.2vw, 74px);
  height: clamp(58px, 5.2vw, 74px);
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px rgb(31 41 55 / 5%);
}

.home-topic-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-topic-grid strong {
  align-self: auto;
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  line-height: 1.25;
}

.home-topic-grid small {
  align-self: auto;
  max-width: 10em;
  font-size: 0.68rem;
  line-height: 1.35;
  -webkit-line-clamp: 2;
}

@media (max-width: 1099px) {
  .home-topic-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .home-topic-grid a {
    min-height: 122px;
    padding: 0.58rem 0.3rem;
    border-radius: 17px;
  }

  .home-topic-icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
  }

  .home-topic-grid strong {
    font-size: 0.78rem;
  }

  .home-topic-grid small {
    font-size: 0.62rem;
    line-height: 1.25;
  }
}

@media (max-width: 340px) {
  .home-topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-topic-grid a {
    min-height: 112px;
  }

  .home-topic-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  .home-topic-grid small {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2026-08-26: my-best inspired but original homepage portal
   - 文字検索より「カテゴリー・画像・用途」から入れるトップへ
   - PC/スマホとも文字重なり・横スクロールを防ぐ最終上書き
   -------------------------------------------------------------------------- */
.gateway-page {
  overflow-x: clip;
}

.gateway-page > .home-hero {
  padding: 0;
  overflow: clip;
}

.home-hero-inner.home-hero-portal {
  width: min(100% - 2 * var(--s6), var(--w-page));
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(1.1rem, 3vw, 2.2rem);
  align-items: center;
  padding-block: clamp(1.7rem, 3vw, 2.8rem);
}

.home-hero-portal > * {
  min-width: 0;
}

.home-hero-copy {
  max-width: none;
}

.home-hero h1 {
  max-width: 7.2em;
  margin-top: 0.8rem;
  font-size: clamp(2.7rem, 1.55rem + 4.2vw, 5.35rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
  overflow-wrap: normal;
}

.home-hero h1 em {
  display: inline;
  color: var(--brand);
  font-style: normal;
  padding-inline: 0.02em;
  background:
    linear-gradient(transparent 70%, rgb(245 221 186 / 100%) 70% 88%, transparent 88%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.home-hero .gateway-hero-lead {
  max-width: 34em;
  margin-top: 1rem;
  line-height: 1.85;
}

.home-hero-search-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 520px);
  min-height: 58px;
  margin-top: 1.25rem;
  padding: 0.9rem 1.05rem 0.9rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink-muted);
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: 0 16px 34px rgb(31 41 55 / 6%);
}

.home-hero-search-link:hover {
  border-color: rgb(200 16 46 / 28%);
  color: var(--brand-strong);
  text-decoration: none;
}

.home-hero-search-link span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1.2rem;
}

.home-hero-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(180px, 0.74fr);
  gap: 0.9rem;
  min-width: 0;
}

.home-hero-sidecards {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.home-hero-article {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 176px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 18px 42px rgb(31 41 55 / 8%);
}

.home-hero-article--main {
  min-height: clamp(320px, 33vw, 430px);
}

.home-hero-article img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
}

.home-hero-article span {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  left: 0.85rem;
  display: grid;
  gap: 0.25rem;
  max-width: 26rem;
  padding: 0.78rem 0.86rem;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 18px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 14px 30px rgb(31 41 55 / 15%);
  backdrop-filter: blur(8px);
}

.home-hero-article--main span {
  right: 1rem;
  bottom: 1rem;
  left: auto;
  width: min(72%, 22rem);
  padding: 0.95rem 1rem;
}

.home-hero-article small {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.home-hero-article strong {
  color: var(--ink);
  font-size: clamp(1rem, 0.88rem + 0.55vw, 1.32rem);
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.home-hero-article em {
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.home-hero-actions {
  margin-top: 1rem;
}

.home-hero-actions a:first-child {
  background: var(--brand);
  color: var(--ink-inverse);
}

.home-topic-dock,
.home-purpose-dock {
  width: min(100% - 2 * var(--s6), var(--w-page));
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 18px 44px rgb(31 41 55 / 6%);
}

.home-topic-heading,
.home-purpose-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.home-topic-heading span,
.home-purpose-heading span {
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.home-topic-heading h2,
.home-purpose-heading h2 {
  margin: 0;
  font-size: clamp(1.16rem, 0.98rem + 0.9vw, 1.6rem);
  line-height: 1.35;
  text-align: right;
}

.home-topic-grid {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.68rem;
}

.home-topic-grid a {
  min-height: 132px;
  padding: 0.72rem 0.5rem;
  border-radius: 21px;
}

.home-topic-icon {
  width: 74px;
  height: 74px;
  aspect-ratio: 1;
  border-radius: 20px;
}

.home-purpose-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.72rem;
}

.home-purpose-grid a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.48rem;
  min-width: 0;
  min-height: 118px;
  padding: 0.78rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fffafa 100%);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 28px rgb(31 41 55 / 5%);
}

.home-purpose-grid a:hover {
  border-color: rgb(200 16 46 / 24%);
  color: var(--brand-strong);
  text-decoration: none;
}

.home-purpose-icon {
  display: block;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--brand-soft);
}

.home-purpose-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-purpose-grid strong {
  font-size: 0.84rem;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.home-daily-highlight {
  width: min(100% - 2 * var(--s6), var(--w-page));
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  align-items: center;
}

.home-daily-highlight .hero-pick {
  max-width: 380px;
  border-radius: 22px;
}

@media (max-width: 1099px) {
  .home-hero-inner.home-hero-portal {
    grid-template-columns: 1fr;
  }

  .home-hero-showcase {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .home-topic-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .home-purpose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .gateway-page > .home-hero {
    border-bottom: 0;
  }

  .home-hero-inner.home-hero-portal,
  .home-topic-dock,
  .home-purpose-dock,
  .home-daily-highlight {
    width: min(100% - 2 * var(--s4), var(--w-page));
  }

  .home-hero-inner.home-hero-portal {
    gap: 1rem;
    padding-block: 1rem 0.7rem;
  }

  .home-hero-kicker {
    padding: 0.3rem 0.75rem;
    font-size: 0.74rem;
  }

  .home-hero h1 {
    max-width: 6.4em;
    font-size: clamp(2.35rem, 13vw, 3.45rem);
    line-height: 1.08;
    letter-spacing: -0.026em;
  }

  .home-hero .gateway-hero-lead {
    font-size: 0.96rem;
    line-height: 1.72;
  }

  .home-hero-search-link {
    min-height: 52px;
    margin-top: 1rem;
    border-radius: 16px;
    font-size: 0.82rem;
  }

  .home-hero-showcase {
    grid-template-columns: 1fr;
  }

  .home-hero-sidecards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero-article {
    min-height: 142px;
    border-radius: 18px;
  }

  .home-hero-article--main {
    min-height: 236px;
  }

  .home-hero-article span,
  .home-hero-article--main span {
    right: 0.62rem;
    bottom: 0.62rem;
    left: 0.62rem;
    width: auto;
    padding: 0.62rem 0.68rem;
    border-radius: 14px;
  }

  .home-hero-article strong {
    font-size: 0.9rem;
  }

  .home-hero-article em {
    display: none;
  }

  .home-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-topic-dock,
  .home-purpose-dock {
    margin-top: 0.85rem;
    padding: 0.8rem;
    border-radius: 21px;
  }

  .home-topic-heading,
  .home-purpose-heading {
    display: grid;
    justify-items: start;
    gap: 0.22rem;
  }

  .home-topic-heading h2,
  .home-purpose-heading h2 {
    text-align: left;
  }

  .home-topic-grid,
  .home-purpose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.52rem;
  }

  .home-topic-grid a,
  .home-purpose-grid a {
    min-height: 118px;
    padding: 0.58rem 0.3rem;
    border-radius: 17px;
  }

  .home-topic-icon,
  .home-purpose-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .home-topic-grid strong,
  .home-purpose-grid strong {
    font-size: 0.76rem;
    line-height: 1.26;
  }

  .home-topic-grid small {
    display: none;
  }

  .home-daily-highlight {
    grid-template-columns: 1fr;
  }

  .home-daily-highlight .hero-pick {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .home-hero-sidecards,
  .home-topic-grid,
  .home-purpose-grid,
  .home-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero h1 {
    font-size: clamp(2.1rem, 12vw, 2.75rem);
  }
}

/* 2026-08-26 final polish: スマホは「先にカテゴリー」を優先し、PCの見出しも左寄せで迷わせない */
.home-topic-heading,
.home-purpose-heading {
  justify-content: flex-start;
}

.home-topic-heading h2,
.home-purpose-heading h2 {
  text-align: left;
}

/* 2026-08-26 trust cleanup: 「今日」断言を避け、my-best型の入口として読みやすくする */
.home-hero-kicker {
  display: none;
}

.home-hero h1 {
  max-width: 8.2em;
  line-height: 1.14;
  letter-spacing: -0.022em;
}

.home-hero h1 em {
  color: var(--brand);
  background:
    linear-gradient(rgb(200 16 46 / 18%), rgb(200 16 46 / 18%)) 0 91% / 100% 0.22em no-repeat;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.home-hero .gateway-hero-lead {
  max-width: 34rem;
}

.home-daily-highlight {
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 340px);
}

.home-daily-highlight .hero-pick {
  width: 100%;
  max-width: 340px;
  padding: 1rem;
}

.home-daily-highlight .hero-pick-main {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0.82rem;
  align-items: center;
}

.home-daily-highlight .hero-pick-image {
  align-self: center;
  justify-self: start;
  width: 104px;
  height: 104px;
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.home-daily-highlight .hero-pick-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-daily-highlight .hero-pick-name {
  font-size: clamp(0.98rem, 1.6vw, 1.14rem);
}

.home-daily-highlight .hero-pick-cta {
  min-height: 48px;
}

.home-daily-highlight .hero-pick-meta {
  margin-top: 0.55rem;
}

@media (max-width: 767px) {
  .home-hero h1 {
    max-width: 7.1em;
    font-size: clamp(2rem, 10.2vw, 2.75rem);
    line-height: 1.17;
    letter-spacing: -0.018em;
  }

  .home-hero .gateway-hero-lead {
    max-width: 100%;
    font-size: 0.93rem;
    line-height: 1.65;
  }

  .home-hero-showcase {
    display: grid;
  }

  .home-daily-highlight {
    grid-template-columns: 1fr;
  }

  .home-daily-highlight .hero-pick {
    max-width: 100%;
  }

  .home-daily-highlight .hero-pick-main {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .home-daily-highlight .hero-pick-image {
    align-self: center;
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 767px) {
  .home-hero-inner.home-hero-portal {
    padding-block: 1rem 0.2rem;
  }

  .home-hero-actions a {
    min-height: 54px;
    padding-inline: 0.85rem;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .home-hero-actions {
    grid-template-columns: 1fr;
  }
}

/* 2026-08-26 follow-up: スマホでも比較記事の入口を残し、CTAは検索窓とカテゴリーに集約する */
.home-hero-actions {
  display: none;
}

.home-hero-article strong {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
}

@media (max-width: 767px) {
  .home-hero-inner.home-hero-portal {
    gap: 0.85rem;
    padding-block: 0.9rem 0.45rem;
  }

  .home-hero-showcase {
    display: block;
  }

  .home-hero-sidecards {
    display: none;
  }

  .home-hero-article--main {
    min-height: 178px;
    aspect-ratio: 16 / 9;
  }

  .home-hero-article--main img {
    height: 100%;
  }

  .home-hero-article--main span {
    inset: auto 0.62rem 0.62rem 0.62rem;
    width: auto;
    max-width: none;
  }

  .home-hero-article--main strong {
    font-size: 0.98rem;
    line-height: 1.28;
  }
}

/* 2026-08-26 top renewal final: my-best型の「探せるトップ」に寄せる最終上書き。
   既存の価格・記事・広告ロジックは触らず、重なり・余白・正方形アイコンだけを整える。 */
body:has(.gateway-page) {
  overflow-x: clip;
  background:
    linear-gradient(180deg, #fffdf8 0%, #fff 42%, #fffdf8 100%);
}

.gateway-page > .home-hero {
  margin: 0;
  padding: clamp(1.2rem, 3vw, 2.2rem) 0 clamp(0.85rem, 2vw, 1.4rem);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.92) 44%, rgba(255,248,239,0.78) 100%),
    repeating-linear-gradient(90deg, rgba(200,16,46,0.035) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(200,16,46,0.025) 0 1px, transparent 1px 76px);
  border-bottom: 1px solid var(--line);
}

.home-hero-inner.home-hero-portal {
  width: min(100% - 2 * clamp(1.35rem, 5vw, 5rem), 1100px);
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
  align-items: center;
}

.home-hero-copy {
  max-width: 560px;
  margin: 0;
  text-align: left;
}

.home-hero h1 {
  max-width: 8.4em;
  margin: 0;
  font-size: clamp(2.85rem, 6vw, 4.85rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-align: left;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.home-hero h1 em {
  display: inline;
  color: var(--brand);
  font-style: normal;
  background:
    linear-gradient(transparent 58%, rgba(242, 210, 172, 0.95) 58% 80%, transparent 80%) 0 0 / 100% 100% no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-inline: 0.02em;
}

.home-hero .gateway-hero-lead {
  max-width: 31rem;
  margin-top: clamp(0.8rem, 1.8vw, 1.15rem);
  font-size: clamp(1rem, 1.35vw, 1.08rem);
  line-height: 1.82;
  color: var(--ink-muted);
}

.home-hero-search-link {
  width: min(100%, 470px);
  min-height: 58px;
  margin-top: clamp(1rem, 2vw, 1.35rem);
  padding: 0.55rem 0.85rem 0.55rem 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.95);
  color: var(--ink-muted);
  box-shadow: 0 16px 36px rgb(25 30 40 / 0.08);
  font-weight: 700;
  text-decoration: none;
}

.home-hero-search-link span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink-inverse);
}

.home-search-suggestions--sub {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
}

.home-search-suggestions--sub::-webkit-scrollbar { display: none; }

.home-search-suggestions--sub a {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.46rem 0.82rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-strong);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}

.home-hero-showcase {
  min-width: 0;
  display: grid;
  max-width: 100%;
  grid-template-columns: minmax(0, 1.38fr) minmax(172px, 0.62fr);
  gap: 0.78rem;
}

.home-hero-sidecards {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.78rem;
}

.home-hero-article,
.home-hero-article--main {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 16px 42px rgb(20 24 34 / 0.10);
  background: var(--surface);
}

.home-hero-article--main { aspect-ratio: 16 / 11; }

.home-hero-article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.home-hero-article span,
.home-hero-article--main span {
  inset: auto 0.72rem 0.72rem 0.72rem;
  width: auto;
  max-width: calc(100% - 1.44rem);
  padding: 0.78rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
  color: var(--ink-strong);
  box-shadow: 0 14px 26px rgb(0 0 0 / 0.12);
}

.home-hero-article small {
  color: var(--brand);
  letter-spacing: 0.08em;
}

.home-hero-article strong {
  color: var(--ink-strong);
  font-size: clamp(0.96rem, 1.4vw, 1.18rem);
  line-height: 1.28;
  overflow-wrap: anywhere;
  word-break: normal;
}

.home-hero-article--main strong {
  font-size: clamp(1.12rem, 2.1vw, 1.6rem);
}

.home-hero-article em {
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.home-topic-dock,
.home-purpose-dock {
  width: min(100% - 2 * clamp(1rem, 3vw, 2.5rem), 1180px);
  margin: clamp(1rem, 2.5vw, 1.8rem) auto 0;
  padding: clamp(1rem, 2.2vw, 1.55rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 18px 44px rgb(21 25 34 / 0.07);
}

.home-topic-heading,
.home-purpose-heading {
  margin-bottom: 0.9rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.home-topic-heading span,
.home-purpose-heading span {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.home-topic-heading h2,
.home-purpose-heading h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.35;
  text-align: right;
}

.home-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.78rem;
}

.home-topic-grid a {
  min-width: 0;
  min-height: 116px;
  padding: 0.85rem;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.16rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgb(20 24 34 / 0.055);
}

.home-topic-icon {
  grid-row: 1 / span 2;
  width: 76px;
  height: 76px;
  aspect-ratio: 1 / 1;
  border-radius: 19px;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid rgba(200,16,46,0.10);
}

.home-topic-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: none;
}

.home-topic-grid strong {
  min-width: 0;
  align-self: end;
  font-size: 1.04rem;
  line-height: 1.35;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.home-topic-grid small {
  min-width: 0;
  align-self: start;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.home-topic-quick-links {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-topic-quick-links::-webkit-scrollbar { display: none; }

.home-topic-quick-links a {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0.43rem 0.76rem;
}

.home-purpose-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.72rem;
}

.home-purpose-grid a {
  min-width: 0;
  min-height: 100px;
  padding: 0.74rem 0.55rem;
}

.home-purpose-icon {
  width: 52px;
  height: 52px;
  aspect-ratio: 1 / 1;
}

.home-daily-highlight {
  width: min(100% - 2 * clamp(1rem, 3vw, 2.5rem), 1180px);
  margin: clamp(1rem, 2.4vw, 1.7rem) auto 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: center;
  gap: 1.1rem;
  border-radius: 28px;
}

.home-daily-highlight-copy h2 {
  font-size: clamp(1.28rem, 2.4vw, 2rem);
  line-height: 1.35;
}

.home-daily-highlight .hero-pick {
  max-width: 360px;
  margin-left: auto;
  padding: 0.95rem;
  border-radius: 22px;
}

.home-daily-highlight .hero-pick-main {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0.78rem;
}

.home-daily-highlight .hero-pick-image {
  width: 96px;
  height: 96px;
  border-radius: 18px;
}

.home-daily-highlight .hero-pick-name {
  font-size: 1rem;
  line-height: 1.42;
}

.home-daily-highlight .hero-pick-price b {
  font-size: 1.4rem;
}

.home-daily-highlight .hero-pick-cta {
  width: 100%;
  min-height: 46px;
  margin-top: 0.75rem;
  border-radius: 14px;
}

.compare-shelves,
.home-features,
.gateway-start,
.home-editorial-banners,
.home-buy-now,
.home-appliance-gateway,
.home-gadget-hub,
.home-guides-hub {
  width: min(100% - 2 * clamp(1rem, 3vw, 2.5rem), 1180px);
  margin-inline: auto;
}

.home-feature {
  min-width: 0;
  min-height: 0;
}

@media (max-width: 1024px) {
  .home-hero-inner.home-hero-portal {
    width: min(100% - 2 * clamp(1rem, 3vw, 2.5rem), 860px);
    grid-template-columns: 1fr;
  }

  .home-hero-copy {
    max-width: 720px;
  }

  .home-hero-showcase {
    grid-template-columns: minmax(0, 1.25fr) minmax(180px, 0.75fr);
  }

  .home-purpose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .gateway-page > .home-hero {
    padding-top: 1rem;
  }

  .home-hero-inner.home-hero-portal {
    width: min(100% - 1.25rem, 560px);
    gap: 0.95rem;
  }

  .home-hero h1 {
    max-width: 7.2em;
    font-size: clamp(2.15rem, 12vw, 3.05rem);
    line-height: 1.09;
    letter-spacing: -0.028em;
  }

  .home-hero .gateway-hero-lead {
    margin-top: 0.78rem;
    font-size: 0.95rem;
    line-height: 1.74;
  }

  .home-hero-search-link {
    min-height: 52px;
    font-size: 0.84rem;
    letter-spacing: -0.01em;
  }

  .home-hero-showcase {
    display: block;
  }

  .home-hero-sidecards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.62rem;
    margin-top: 0.62rem;
  }

  .home-hero-article--main {
    min-height: 0;
    aspect-ratio: 16 / 9.7;
  }

  .home-hero-sidecards .home-hero-article {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
  }

  .home-hero-article span,
  .home-hero-article--main span {
    inset: auto 0.5rem 0.5rem 0.5rem;
    padding: 0.58rem;
    border-radius: 14px;
  }

  .home-hero-article small,
  .home-hero-article em {
    display: none;
  }

  .home-hero-article strong,
  .home-hero-article--main strong {
    font-size: 0.88rem;
    line-height: 1.32;
  }

  .home-topic-dock,
  .home-purpose-dock {
    width: min(100% - 1.25rem, 560px);
    padding: 0.9rem;
    border-radius: 22px;
  }

  .home-topic-heading,
  .home-purpose-heading {
    display: block;
  }

  .home-topic-heading h2,
  .home-purpose-heading h2 {
    margin-top: 0.12rem;
    text-align: left;
    font-size: 1.25rem;
  }

  .home-topic-grid {
    grid-template-columns: 1fr;
    gap: 0.62rem;
  }

  .home-topic-grid a {
    min-height: 92px;
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 0.68rem;
    border-radius: 18px;
  }

  .home-topic-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .home-topic-grid strong {
    font-size: 0.98rem;
  }

  .home-topic-grid small {
    display: block;
    font-size: 0.78rem;
    line-height: 1.42;
  }

  .home-purpose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-daily-highlight {
    width: min(100% - 1.25rem, 560px);
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .home-daily-highlight .hero-pick {
    max-width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 360px) {
  .home-hero h1 {
    font-size: clamp(2rem, 11.4vw, 2.6rem);
  }

  .home-hero-sidecards,
  .home-purpose-grid {
    grid-template-columns: 1fr;
  }

  .home-topic-grid a {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .home-topic-icon {
    width: 58px;
    height: 58px;
  }
}

/* 2026-08-26 visual QA fix:
   .gateway-page はスマホで左右 var(--s4) だけ内側にあるため、
   ヒーローを 100vw 相当で描く場合は同じ分だけ左へ戻す。
   これが無いと検索窓・ヒーローカードの右端が clip される。 */
.home-daily-highlight {
  padding-inline: clamp(1rem, 2vw, 1.35rem);
}

@media (min-width: 768px) {
  .gateway-page > .home-hero {
    width: calc(100% + 2 * var(--s6));
    margin-inline: calc(-1 * var(--s6));
  }
}

@media (max-width: 767px) {
  .gateway-page > .home-hero {
    width: calc(100% + 2 * var(--s4));
    margin-inline: calc(-1 * var(--s4));
  }
}

/* 2026-08-26 top portal polish:
   my-best系の「入口の多さ」は残しつつ、くらし選び帖は正方形アイコン中心に戻す。
   上部で縦に伸びすぎないよう、カテゴリーはPC 4列・スマホ2列へ。 */
.home-topic-heading h2,
.home-purpose-heading h2 {
  text-align: left;
  font-size: clamp(1.24rem, 2.1vw, 1.72rem);
}

@media (min-width: 900px) {
  .home-topic-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.home-topic-grid a {
  min-height: 94px;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 0.72rem 0.82rem;
  border-radius: 18px;
}

.home-topic-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.home-topic-grid strong {
  font-size: 0.98rem;
}

.home-topic-grid small {
  font-size: 0.76rem;
  line-height: 1.4;
}

.home-purpose-dock {
  padding: clamp(0.9rem, 1.8vw, 1.2rem);
}

.home-purpose-grid a {
  min-height: 86px;
  border-radius: 18px;
}

.home-purpose-icon {
  width: 46px;
  height: 46px;
}

.home-daily-highlight {
  margin-top: clamp(0.85rem, 2vw, 1.25rem);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.home-daily-highlight-copy p {
  max-width: 36rem;
}

.home-daily-highlight .hero-pick {
  max-width: 320px;
}

.home-daily-highlight .hero-pick-main {
  grid-template-columns: 82px minmax(0, 1fr);
}

.home-daily-highlight .hero-pick-image {
  width: 82px;
  height: 82px;
}

@media (max-width: 767px) {
  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
  }

  .home-topic-grid a {
    min-height: 122px;
    padding: 0.68rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    text-align: center;
  }

  .home-topic-icon {
    width: 58px;
    height: 58px;
  }

  .home-topic-grid small {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .home-purpose-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.62rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .home-purpose-grid::-webkit-scrollbar {
    display: none;
  }

  .home-purpose-grid a {
    flex: 0 0 132px;
    min-height: 92px;
  }

  .home-daily-highlight-copy p {
    display: none;
  }

  .home-daily-highlight .hero-pick {
    padding: 0.82rem;
  }
}

@media (max-width: 360px) {
  .home-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-topic-grid a {
    min-height: 116px;
  }

  .home-topic-grid strong {
    font-size: 0.86rem;
  }

  .home-topic-grid small {
    display: none;
  }
}

@media (max-width: 767px) {
  .home-topic-grid a > .home-topic-icon,
  .home-topic-grid a > strong,
  .home-topic-grid a > small {
    align-self: center;
    text-align: center;
  }

  .home-topic-grid a > strong,
  .home-topic-grid a > small {
    width: 100%;
  }
}

/* 2026-08-26 mobile category containment:
   最後にもう一度だけ幅を固定する。過去の min(100% - ...) 系ルールが
   Safari/Chrome の計算差で残ると右列が切れるため、スマホでは
   コンテナを viewport 内に閉じ込め、カードは正方形アイコン2列にする。 */
@media (max-width: 767px) {
  .home-topic-dock {
    box-sizing: border-box;
    width: auto;
    max-width: calc(100vw - 1.25rem);
    margin-inline: auto;
  }

  .home-topic-grid {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.58rem;
    overflow-x: auto;
    scroll-padding-inline: 0.1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .home-topic-grid::-webkit-scrollbar {
    display: none;
  }

  .home-topic-grid a {
    box-sizing: border-box;
    flex: 0 0 126px;
    min-width: 126px;
    max-width: 126px;
    min-height: 122px;
    overflow: hidden;
  }

  .home-topic-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    aspect-ratio: 1;
  }
}

/* 2026-08-26 final mobile hero/card QA:
   320〜390pxで見出しの赤字が詰まって見える問題と、
   「今日の注目商品」が2カラムのまま右へ逃げる問題を最後に抑える。 */
@media (max-width: 767px) {
  .home-hero h1 {
    font-size: clamp(2.35rem, 13vw, 3.05rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
    max-width: 6.6em;
  }

  .home-hero h1 em {
    padding-bottom: 0.04em;
    background:
      linear-gradient(transparent 62%, rgba(216, 10, 47, 0.16) 62%, rgba(216, 10, 47, 0.16) 92%, transparent 92%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .home-daily-highlight {
    display: block;
    padding: 1.05rem;
  }

  .home-daily-highlight-copy {
    margin-bottom: 0.8rem;
  }

  .home-daily-highlight-copy h2 {
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    line-height: 1.32;
  }

  .home-daily-highlight .hero-pick {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .home-daily-highlight .hero-pick-main {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
  }

  .home-daily-highlight .hero-pick-image {
    width: 88px;
    height: 88px;
  }

  .home-daily-highlight .hero-pick-cta {
    width: 100%;
    min-height: 48px;
  }
}

@media (max-width: 340px) {
  .home-hero h1 {
    font-size: clamp(2.15rem, 12.2vw, 2.72rem);
    max-width: 6.4em;
  }
}

/* 2026-08-26 desktop daily-pick tighten:
   横長バナーに見えないよう、PCでも内容幅を詰めて商品カードを近づける。 */
@media (min-width: 768px) {
  .home-daily-highlight {
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 420px);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.6rem, 3.6vw, 2.4rem);
    min-height: 0;
  }

  .home-daily-highlight-copy {
    max-width: 30rem;
  }

  .home-daily-highlight .hero-pick {
    width: 100%;
    max-width: 420px;
    justify-self: end;
  }
}

/* 2026-08-26 verified home finish:
   トップ刷新の最後の固定値。過去の試作CSSが多いため、ここより上の
   home-hero-search-link / 横長カテゴリ / 100vw補正を実表示優先で上書きする。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gateway-page {
  overflow-x: clip;
}

.gateway-page > .home-hero {
  width: auto;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
  overflow: visible;
}

.home-hero-inner.home-hero-portal {
  width: min(100% - 2 * clamp(1rem, 4vw, 4.25rem), 1160px);
}

.home-hero h1 {
  max-width: 7.6em;
  font-size: clamp(2.75rem, 5.5vw, 4.7rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
}

.home-hero h1 em {
  color: var(--brand);
  background:
    linear-gradient(transparent 66%, rgba(242, 210, 172, 0.96) 66% 84%, transparent 84%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.home-hero-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  width: min(100%, 480px);
  min-height: 58px;
  margin-top: clamp(1rem, 2vw, 1.35rem);
  padding: 0.32rem 0.38rem 0.32rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgb(25 30 40 / 8%);
}

.home-hero-search-form:focus-within {
  border-color: rgb(200 16 46 / 36%);
  box-shadow: 0 0 0 4px rgb(200 16 46 / 10%), 0 16px 36px rgb(25 30 40 / 8%);
}

.home-hero-search-form input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  outline: none;
}

.home-hero-search-form input::placeholder {
  color: var(--ink-muted);
  opacity: 0.78;
}

.home-hero-search-form button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink-inverse);
  font-size: 1.12rem;
  font-weight: 900;
  cursor: pointer;
}

.home-hero-search-form button:hover,
.home-hero-search-form button:focus-visible {
  background: var(--brand-strong);
}

.image-neutral-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: inherit;
  background:
    radial-gradient(circle at 32% 24%, rgb(255 255 255 / 90%) 0 20%, transparent 21%),
    linear-gradient(135deg, #fff7f1 0%, #fff 46%, #f8f1ea 100%);
  color: var(--brand);
}

.image-neutral-fallback i {
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 28%;
  background: rgb(200 16 46 / 9%);
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
  font-size: clamp(1.2rem, 4vw, 2.2rem);
}

.home-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
}

.home-topic-grid a {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  min-height: 96px;
  padding: 0.72rem 0.82rem;
  overflow: hidden;
}

.home-topic-icon {
  width: 58px;
  height: 58px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

.compare-shelves-head {
  display: grid;
  gap: 0.28rem;
  margin-bottom: 0.85rem;
}

.compare-shelves-head span {
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.compare-shelves-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.32;
}

.compare-shelves-head p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.7;
}

.compare-shelf-head h3 {
  margin: 0;
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.35;
}

.home-daily-highlight {
  overflow: visible;
}

.home-daily-highlight .hero-pick {
  max-width: 360px;
  margin-left: auto;
}

.home-daily-highlight .hero-pick-main {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.82rem;
}

.home-daily-highlight .hero-pick-image {
  width: 92px;
  height: 92px;
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.home-daily-highlight .hero-pick-image img {
  object-fit: contain;
}

@media (max-width: 1024px) {
  .home-hero-inner.home-hero-portal {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .gateway-page > .home-hero {
    margin-inline: calc(50% - 50vw);
    padding-block: 0.95rem 0.85rem;
  }

  .home-hero-inner.home-hero-portal {
    width: min(100% - 1.25rem, 560px);
    gap: 0.9rem;
  }

  .home-hero h1 {
    max-width: 7.2em;
    font-size: clamp(2.05rem, 10.8vw, 2.95rem);
    line-height: 1.16;
    letter-spacing: -0.018em;
  }

  .home-hero .gateway-hero-lead {
    font-size: 0.94rem;
    line-height: 1.68;
  }

  .home-hero-search-form {
    min-height: 52px;
    grid-template-columns: minmax(0, 1fr) 38px;
    border-radius: 15px;
  }

  .home-hero-search-form input {
    font-size: 0.84rem;
  }

  .home-hero-search-form button {
    width: 34px;
    height: 34px;
  }

  .home-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
    overflow: visible;
  }

  .home-topic-grid a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.34rem;
    min-width: 0;
    max-width: none;
    min-height: 120px;
    text-align: center;
  }

  .home-topic-icon {
    width: 58px;
    height: 58px;
  }

  .home-topic-grid small {
    display: block;
    font-size: 0.72rem;
  }

  .home-daily-highlight .hero-pick {
    max-width: 100%;
    margin-left: 0;
  }

  .home-daily-highlight .hero-pick-main {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .home-daily-highlight .hero-pick-image {
    width: 88px;
    height: 88px;
  }
}

/* 2026-08-27 public mobile QA lock:
   公開版の実スクリーンショットで、ヒーロー説明文と右側カードが
   320〜390px幅の右端で切れて見えたため、トップのファーストビューだけ
   viewport内に完全固定する。上の試作CSS群より後勝ちで効かせる。 */
@media (max-width: 767px) {
  .gateway-page > .home-hero {
    box-sizing: border-box;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow-x: clip;
  }

  .home-hero-inner.home-hero-portal,
  .home-hero-copy,
  .home-hero-showcase,
  .home-hero-article,
  .home-hero-article--main,
  .home-hero-sidecards {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  .home-hero-inner.home-hero-portal {
    width: min(calc(100vw - 1.25rem), 560px);
    margin-inline: auto;
  }

  .home-hero .gateway-hero-lead {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .home-hero .gateway-hero-lead .lead-desktop {
    display: none;
  }

  .home-hero .gateway-hero-lead .lead-mobile {
    display: inline;
  }

  .home-hero-search-form {
    width: 100%;
    max-width: 100%;
  }

  .home-hero-sidecards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-hero-article span,
  .home-hero-article--main span {
    max-width: calc(100% - 1rem);
  }
}

@media (max-width: 340px) {
  .home-hero-sidecards {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .home-hero .gateway-hero-lead .lead-mobile {
    display: none;
  }
}

/* 2026-08-27 final hero bleed safety:
   全幅ヒーローを main の外側まで広げる設計は維持しつつ、親の clip と
   100vw の組み合わせで左右32pxが切れる状態を避ける。横スクロール防止は
   body 側に任せ、ヒーロー自体は切り落とさない。 */
body {
  overflow-x: clip;
}

main.gateway-page,
.gateway-page {
  overflow-x: visible;
}

.gateway-page > .home-hero {
  width: auto;
  overflow: visible;
}

@media (max-width: 767px) {
  .gateway-page > .home-hero {
    width: auto;
    overflow: visible;
  }

  .home-hero-showcase .home-hero-sidecards {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .home-hero-showcase .home-hero-sidecards > .home-hero-article {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .home-hero-showcase .home-hero-sidecards {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .home-hero-showcase .home-hero-sidecards > .home-hero-article {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* 問い合わせ・広告掲載窓口 */
.contact-hero {
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}
.contact-hero h1 { max-width: 18em; }
.contact-primary {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: var(--s5);
  padding: .75rem 1.2rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.contact-primary:hover { background: var(--brand-strong); }
.contact-address { display: block; margin-top: .65rem; color: var(--ink-muted); }
.contact-address span { font-size: .8rem; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s6);
}
.contact-card {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.contact-card h2 { margin: .35rem 0 .7rem; font-size: 1.2rem; }
.contact-card p { margin: 0; color: var(--ink-muted); font-size: .95rem; }
.contact-card ul { margin: var(--s4) 0 0; padding-left: 1.2rem; color: var(--ink-muted); font-size: .9rem; }
.contact-template { margin-top: var(--s6); }
.contact-template-lead { color: var(--ink-muted); }
.contact-template pre {
  margin: var(--s4) 0 0;
  padding: var(--s4);
  overflow-x: auto;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  font: inherit;
  line-height: 1.8;
  white-space: pre-wrap;
}
.contact-notice { margin-top: var(--s5); }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: var(--s4); }
  .contact-primary { width: 100%; justify-content: center; }
}

/* Contact form */
.contact-form-section {
  margin-top: var(--s7);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.contact-form-heading { margin-bottom: var(--s5); }
.contact-form-heading h2 { margin: .3rem 0 .45rem; }
.contact-form-heading p:last-child { margin: 0; color: var(--ink-muted); }
.contact-form { display: grid; gap: var(--s4); }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.contact-form label { display: grid; gap: .45rem; min-width: 0; }
.contact-form label > span { font-weight: 700; font-size: .95rem; }
.contact-form label b { margin-left: .4rem; color: var(--brand); font-size: .72rem; }
.contact-form label i { margin-left: .4rem; color: var(--ink-muted); font-size: .72rem; font-style: normal; font-weight: 400; }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; padding: .75rem .85rem;
}
.contact-form input:not([type="checkbox"]):focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 65%, transparent); outline-offset: 1px; }
.contact-form textarea { min-height: 9rem; resize: vertical; }
.contact-consent { display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: .6rem !important; }
.contact-consent input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--brand); }
.contact-consent span { font-size: .85rem !important; font-weight: 400 !important; color: var(--ink-muted); }
.contact-consent a { color: var(--brand-strong); text-decoration: underline; }
.contact-submit-row { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.contact-submit { border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: inherit; font-weight: 700; padding: .85rem 1.35rem; cursor: pointer; }
.contact-submit:hover { background: var(--brand-strong); }
.contact-submit-row small { color: var(--ink-muted); }
.contact-form-status { margin: 0; color: var(--brand-strong); font-weight: 700; }
@media (max-width: 760px) {
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-submit { width: 100%; }
}

/* 2026-08-27 top renewal guardrails.
   Keep the mock's responsive behaviour while preserving the production
   components and real image cards. */
.home-hero-inner,
.home-hero-copy,
.home-hero-showcase,
.home-hero-article,
.home-hero-sidecards,
.home-topic-dock,
.home-purpose-dock,
.home-daily-highlight,
.home-daily-highlight > * {
  min-width: 0;
}

.home-hero h1,
.home-hero h2,
.home-hero h3,
.home-topic-dock h2,
.home-purpose-dock h2,
.home-daily-highlight h2 {
  overflow-wrap: anywhere;
}

[id] {
  scroll-margin-top: 5rem;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .home-hero-search-form input {
    /* Prevent iOS Safari from zooming when the search field receives focus. */
    font-size: 16px;
  }

  .gateway-hero-trust {
    font-size: 0.76rem;
  }
}

/* 2026-08-27 mobile audit fixes: keep the hero inside the content box so
   100vw calculations cannot create a 16px horizontal bleed. */
@media (max-width: 767px) {
  main.gateway-page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .gateway-page > .home-hero {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
  }
}

.featured-card-date {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

/* 2026-08-27 UI/UX pass:
   参考イメージに寄せて、文字の圧を少し下げながら画像の存在感を戻す。
   最後尾で上書きし、ヒーロー・カテゴリ・比較カードの視認性を優先する。 */
.home-hero-inner.home-hero-portal {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.1rem, 2.6vw, 2.35rem);
  align-items: start;
}

.home-hero-copy {
  max-width: 32rem;
  padding-top: clamp(0.25rem, 0.8vw, 0.8rem);
}

.home-hero h1 {
  max-width: 7.05em;
  font-size: clamp(2.45rem, 5vw, 4.15rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.home-hero .gateway-hero-lead {
  max-width: 28rem;
  margin-top: 0.82rem;
  font-size: clamp(0.9rem, 1.18vw, 1rem);
  line-height: 1.72;
  color: var(--ink-muted);
}

.gateway-hero-trust {
  margin-top: 0.72rem;
  font-size: 0.74rem;
  line-height: 1.45;
}

.home-hero-search-form {
  width: min(100%, 460px);
  min-height: 56px;
  margin-top: 1rem;
}

.home-search-suggestions--sub {
  gap: 0.44rem;
  margin-top: 0.72rem;
}

.home-search-suggestions--sub a {
  min-height: 36px;
  padding: 0.38rem 0.72rem;
  font-size: 0.78rem;
}

.home-hero-showcase {
  grid-template-columns: minmax(0, 1.58fr) minmax(188px, 0.72fr);
  gap: 0.9rem;
}

.home-hero-sidecards {
  gap: 0.9rem;
}

.home-hero-article,
.home-hero-article--main {
  border-radius: 26px;
  box-shadow: 0 18px 46px rgb(20 24 34 / 0.11);
}

.home-hero-article {
  aspect-ratio: 5 / 4;
}

.home-hero-article--main {
  aspect-ratio: 16 / 12;
}

.home-hero-article img,
.home-hero-article--main img {
  object-fit: cover;
}

.home-hero-article span,
.home-hero-article--main span {
  inset: auto 0.7rem 0.7rem 0.7rem;
  max-width: min(88%, calc(100% - 1.4rem));
  padding: 0.66rem 0.74rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / 95%), rgb(255 255 255 / 86%));
  box-shadow: 0 10px 22px rgb(15 20 30 / 0.12);
  backdrop-filter: blur(6px);
}

.home-hero-article small {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.home-hero-article strong {
  font-size: clamp(0.9rem, 1.18vw, 1.04rem);
  line-height: 1.3;
}

.home-hero-article--main strong {
  font-size: clamp(1.05rem, 1.8vw, 1.38rem);
}

.home-hero-article em {
  margin-top: 0.14rem;
  font-size: 0.72rem;
  line-height: 1.45;
}

.home-topic-dock,
.home-purpose-dock,
.home-daily-highlight {
  padding: clamp(0.92rem, 1.9vw, 1.28rem);
}

.home-topic-grid a {
  grid-template-columns: 68px minmax(0, 1fr);
  min-height: 102px;
  padding: 0.78rem 0.82rem;
}

.home-topic-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
}

.home-topic-grid strong {
  font-size: 0.94rem;
  line-height: 1.3;
}

.home-topic-grid small {
  font-size: 0.74rem;
  line-height: 1.38;
}

.home-purpose-grid a {
  min-height: 88px;
  padding: 0.66rem 0.5rem;
}

.home-purpose-grid a strong {
  font-size: 0.82rem;
  line-height: 1.32;
}

.home-purpose-icon {
  width: 44px;
  height: 44px;
}

.home-daily-highlight-copy h2 {
  font-size: clamp(1.18rem, 2vw, 1.62rem);
}

.home-daily-highlight-copy p {
  font-size: 0.88rem;
  line-height: 1.65;
}

.home-daily-highlight .hero-pick {
  max-width: 370px;
}

.home-daily-highlight .hero-pick-main {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0.82rem;
}

.home-daily-highlight .hero-pick-image {
  width: 104px;
  height: 104px;
}

.home-daily-highlight .hero-pick-name {
  font-size: 0.94rem;
}

.home-daily-highlight .hero-pick-price b {
  font-size: 1.32rem;
}

.compare-shelf-track {
  grid-auto-columns: 184px;
}

.compare-card {
  gap: 0.4rem;
  padding: 0.7rem;
  border-radius: 18px;
}

.compare-card-media {
  height: 132px;
  border-radius: 14px;
  margin-bottom: 0.1rem;
  background: linear-gradient(180deg, #fff8f3 0%, #fff 100%);
}

.compare-card strong {
  font-size: 0.83rem;
  line-height: 1.42;
}

.compare-card small,
.compare-card b {
  font-size: 0.7rem;
}

@media (max-width: 1024px) {
  .home-hero-inner.home-hero-portal {
    grid-template-columns: 1fr;
  }

  .home-hero-copy {
    max-width: 100%;
    padding-top: 0;
  }

  .home-hero-showcase {
    grid-template-columns: minmax(0, 1.42fr) minmax(180px, 0.82fr);
  }
}

@media (max-width: 767px) {
  .home-hero h1 {
    max-width: 7em;
    font-size: clamp(2rem, 10vw, 2.7rem);
    line-height: 1.14;
  }

  .home-hero .gateway-hero-lead {
    margin-top: 0.7rem;
    font-size: 0.88rem;
    line-height: 1.62;
  }

  .gateway-hero-trust {
    font-size: 0.72rem;
  }

  .home-hero-search-form {
    min-height: 50px;
  }

  .home-search-suggestions--sub a {
    min-height: 34px;
    font-size: 0.74rem;
  }

  .home-hero-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.68rem;
  }

  .home-hero-article--main {
    aspect-ratio: 4 / 3;
  }

  .home-hero-sidecards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.68rem;
    margin-top: 0;
  }

  .home-hero-sidecards .home-hero-article {
    aspect-ratio: 1 / 1.02;
    border-radius: 20px;
  }

  .home-hero-article span,
  .home-hero-article--main span {
    inset: auto 0.52rem 0.52rem 0.52rem;
    max-width: calc(100% - 1.04rem);
    padding: 0.52rem 0.58rem;
  }

  .home-hero-article strong,
  .home-hero-article--main strong {
    font-size: 0.84rem;
    line-height: 1.28;
  }

  .home-topic-grid a {
    min-height: 114px;
    padding: 0.62rem 0.5rem;
  }

  .home-topic-icon {
    width: 54px;
    height: 54px;
  }

  .home-topic-grid strong {
    font-size: 0.84rem;
  }

  .home-topic-grid small {
    font-size: 0.69rem;
  }

  .home-purpose-grid a {
    flex: 0 0 122px;
    min-height: 88px;
  }

  .home-daily-highlight .hero-pick-main {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .home-daily-highlight .hero-pick-image {
    width: 92px;
    height: 92px;
  }

  .compare-shelf-track {
    grid-auto-columns: 166px;
  }

  .compare-card-media {
    height: 116px;
  }
}

@media (max-width: 380px) {
  .home-hero h1 {
    font-size: clamp(1.88rem, 9.6vw, 2.35rem);
  }

  .home-hero-sidecards {
    grid-template-columns: 1fr;
  }
}

.home-spotlight-section,
.home-utility-band {
  width: min(100% - 2 * clamp(1rem, 3vw, 2.5rem), 1180px);
  margin: clamp(1.25rem, 2.8vw, 2rem) auto 0;
}

.home-spotlight-section .gateway-start-heading,
.home-rebuild-decision .gateway-start-heading,
.home-rebuild-reading .gateway-start-heading {
  width: min(100%, 860px);
  margin-inline: auto;
}

.home-spotlight-section .home-features {
  margin-top: 0.9rem;
}

.home-rebuild-decision,
.home-rebuild-reading {
  width: min(100% - 2 * clamp(1rem, 3vw, 2.5rem), 1180px);
  margin: clamp(1.25rem, 2.8vw, 2rem) auto 0;
}

.home-rebuild-decision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.82fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.home-rebuild-panel,
.home-rebuild-reading-main,
.home-rebuild-compact-panel,
.home-rebuild-guides-panel {
  min-width: 0;
  min-height: 100%;
  padding: clamp(0.95rem, 1.9vw, 1.28rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 18px 44px rgb(21 25 34 / 0.07);
}

.home-rebuild-panel--purpose {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92)),
    linear-gradient(135deg, rgba(200,16,46,0.04), transparent 45%);
}

.home-rebuild-panel--daily {
  background:
    linear-gradient(180deg, rgba(255,250,246,0.98), rgba(255,255,255,0.94)),
    linear-gradient(135deg, rgba(246,173,85,0.08), transparent 46%);
}

.home-rebuild-panel--service {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,253,250,0.94)),
    linear-gradient(135deg, rgba(122,162,247,0.07), transparent 48%);
}

.home-rebuild-panel-head,
.home-rebuild-subhead {
  display: grid;
  gap: 0.22rem;
  margin-bottom: 0.85rem;
}

.home-rebuild-panel-head span,
.home-rebuild-subhead span {
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.home-rebuild-panel-head h3,
.home-rebuild-subhead h3 {
  margin: 0;
  font-size: clamp(1.02rem, 1.5vw, 1.32rem);
  line-height: 1.35;
  color: var(--ink-strong);
}

.home-rebuild-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.home-rebuild-purpose-grid a {
  min-width: 0;
  min-height: 100px;
  padding: 0.74rem 0.58rem;
  display: grid;
  justify-items: center;
  gap: 0.34rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

.home-rebuild-purpose-grid a strong {
  font-size: 0.82rem;
  line-height: 1.35;
}

.home-rebuild-panel--daily .hero-pick {
  max-width: 100%;
  margin-left: 0;
}

.home-rebuild-panel--daily .home-rebuild-panel-head {
  margin-bottom: 0.65rem;
}

.home-rebuild-service-list {
  display: grid;
  gap: 0.72rem;
}

.home-rebuild-service-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 0.78rem;
  align-items: stretch;
  min-width: 0;
  min-height: 116px;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 22px rgb(20 24 34 / 0.05);
  color: var(--ink);
  text-decoration: none;
}

.home-rebuild-service-card img {
  width: 100%;
  height: 100%;
  min-height: 102px;
  object-fit: cover;
  border-radius: 14px;
}

.home-rebuild-service-card span {
  display: grid;
  align-content: center;
  gap: 0.18rem;
  min-width: 0;
}

.home-rebuild-service-card small {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-rebuild-service-card strong {
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--ink-strong);
}

.home-rebuild-service-card em {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-muted);
  font-style: normal;
}

.home-rebuild-reading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.88fr);
  gap: 1rem;
  align-items: start;
}

.home-rebuild-reading-main .gateway-start-grid {
  margin-top: 0;
}

.home-rebuild-reading-side {
  display: grid;
  gap: 1rem;
}

.home-rebuild-compact-list {
  display: grid;
  gap: 0.7rem;
}

.home-rebuild-compact-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0.72rem;
  align-items: center;
  min-width: 0;
  padding: 0.56rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

.home-rebuild-compact-card img,
.home-rebuild-compact-card .image-neutral-fallback {
  width: 96px;
  height: 78px;
  border-radius: 12px;
}

.home-rebuild-compact-card span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.home-rebuild-compact-card small {
  color: var(--brand);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-rebuild-compact-card strong {
  font-size: 0.9rem;
  line-height: 1.38;
  color: var(--ink-strong);
}

.home-guide-shelves--rebuild {
  gap: 0.7rem;
}

.home-guide-shelves--rebuild .home-guide-shelf {
  padding: 0.95rem;
  border-radius: 18px;
}

.home-guide-shelves--rebuild .home-guide-shelf p {
  font-size: 0.84rem;
  line-height: 1.6;
}

.home-guide-shelves--rebuild .home-guide-links a {
  font-size: 0.8rem;
}

@media (max-width: 1024px) {
  .home-rebuild-decision-grid,
  .home-rebuild-reading-grid {
    grid-template-columns: 1fr;
  }

  .home-rebuild-purpose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-spotlight-section,
  .home-rebuild-decision,
  .home-rebuild-reading {
    width: min(100% - 1.25rem, 560px);
    margin-top: 1rem;
  }

  .home-rebuild-panel,
  .home-rebuild-reading-main,
  .home-rebuild-compact-panel,
  .home-rebuild-guides-panel {
    padding: 0.9rem;
    border-radius: 22px;
  }

  .home-rebuild-purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
  }

  .home-rebuild-purpose-grid a {
    min-height: 92px;
    padding: 0.62rem 0.45rem;
  }

  .home-rebuild-service-card,
  .home-rebuild-compact-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .home-rebuild-service-card img,
  .home-rebuild-compact-card img,
  .home-rebuild-compact-card .image-neutral-fallback {
    width: 88px;
    height: 72px;
  }
}

@media (max-width: 380px) {
  .home-rebuild-purpose-grid {
    grid-template-columns: 1fr;
  }

  .home-rebuild-service-card,
  .home-rebuild-compact-card {
    grid-template-columns: 1fr;
  }

  .home-rebuild-service-card img,
  .home-rebuild-compact-card img,
  .home-rebuild-compact-card .image-neutral-fallback {
    width: 100%;
    height: 140px;
  }
}

/* 2026-08-27 top page rebuild: reference-inspired editorial homepage */
.gateway-page {
  background:
    radial-gradient(circle at top left, rgb(255 235 232 / 0.95), transparent 34%),
    linear-gradient(180deg, #fffaf8 0%, #fff 34%, #fff7f5 100%);
}

.gateway-page > .home-topref-trustbar,
.gateway-page > .home-topref-categories,
.gateway-page > .home-topref-purpose,
.gateway-page > .home-topref-spotlight,
.gateway-page > .home-topref-latest,
.gateway-page > .home-topref-ranking,
.gateway-page > .home-topref-special,
.gateway-page > .home-topref-policy {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}

.home-topref-trustbar {
  margin-top: 0.85rem;
}

.home-topref-trustbar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.15rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(225 210 205 / 0.9);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 12px 30px rgb(53 32 19 / 0.05);
}

.home-topref-trustbar-inner p {
  margin: 0;
  font-size: 0.83rem;
  color: var(--ink);
}

.home-topref-trustbar-inner p::before {
  content: "◌";
  margin-right: 0.45rem;
  color: var(--brand);
  font-weight: 800;
}

.gateway-page > .home-hero {
  width: min(100% - 2rem, 1180px);
  margin: 1rem auto 0;
}

.home-hero.home-hero .home-hero-inner {
  gap: 1.35rem;
  padding: 1.1rem 0 0;
  align-items: stretch;
}

.home-hero.home-hero .home-hero-copy {
  background: rgb(255 255 255 / 0.7);
  border: 1px solid rgb(225 210 205 / 0.8);
  border-radius: 28px;
  padding: 1.6rem;
  box-shadow: 0 18px 36px rgb(53 32 19 / 0.06);
}

.home-hero.home-hero h1 {
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.home-hero.home-hero h1 em {
  color: var(--brand);
  font-style: normal;
}

.gateway-hero-lead {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink);
}

.gateway-hero-trust {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.home-hero-search-form {
  margin-top: 1.2rem;
  border-radius: 18px;
  min-height: 62px;
  background: #fff;
}

.home-hero-search-form input {
  font-size: 0.98rem;
}

.home-search-suggestions--sub {
  margin-top: 1rem;
  gap: 0.55rem;
}

.home-search-suggestions--sub a {
  background: rgb(255 255 255 / 0.92);
  border-color: rgb(229 215 209 / 0.95);
  font-size: 0.78rem;
}

.home-hero-showcase {
  gap: 0.95rem;
}

.home-hero-article {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgb(225 210 205 / 0.85);
  box-shadow: 0 18px 36px rgb(53 32 19 / 0.08);
  background: #fff;
}

.home-hero-article img,
.home-hero-article .image-neutral-fallback {
  display: block;
  width: 100%;
  object-fit: cover;
}

.home-hero-article--main img,
.home-hero-article--main .image-neutral-fallback {
  min-height: 440px;
}

.home-hero-sidecards .home-hero-article img,
.home-hero-sidecards .home-hero-article .image-neutral-fallback {
  min-height: 206px;
}

.home-hero-article span {
  gap: 0.34rem;
  padding: 1rem 1.05rem 1.1rem;
}

.home-hero-article small {
  font-size: 0.73rem;
  font-weight: 900;
  color: var(--brand);
}

.home-hero-article strong {
  font-size: 1.5rem;
  line-height: 1.28;
}

.home-hero-sidecards .home-hero-article strong {
  font-size: 1.16rem;
}

.home-hero-article em {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.home-topref-heading,
.home-topref-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.home-topref-heading h2,
.home-topref-section-head h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.2;
  color: var(--ink-strong);
}

.home-topref-section-head a {
  color: var(--brand);
  font-size: 0.83rem;
  font-weight: 800;
  text-decoration: none;
}

.home-topref-categories,
.home-topref-purpose,
.home-topref-spotlight,
.home-topref-latest,
.home-topref-ranking,
.home-topref-special,
.home-topref-policy {
  margin-top: 1.35rem;
}

.home-topref-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-topref-category-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 1rem 1.05rem;
  border: 1px solid rgb(229 215 209 / 0.95);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 12px 26px rgb(53 32 19 / 0.05);
  color: inherit;
  text-decoration: none;
}

.home-topref-category-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fff2ef 100%);
  border: 1px solid rgb(255 222 216 / 0.95);
}

.home-topref-category-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.home-topref-category-card strong {
  display: block;
  font-size: 0.96rem;
  line-height: 1.35;
}

.home-topref-category-card small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.home-topref-purpose {
  padding: 1rem;
  border: 1px solid rgb(244 220 217 / 0.96);
  border-radius: 28px;
  background: linear-gradient(180deg, rgb(255 247 246 / 0.98), rgb(255 252 251 / 0.98));
}

.home-topref-purpose-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8rem;
}

.home-topref-purpose-card {
  display: grid;
  justify-items: center;
  gap: 0.62rem;
  min-height: 132px;
  padding: 0.9rem 0.7rem;
  border: 1px solid rgb(236 219 214 / 0.98);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.home-topref-purpose-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fff3ef 100%);
  border: 1px solid rgb(255 224 219 / 0.96);
}

.home-topref-purpose-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.home-topref-purpose-card strong {
  font-size: 0.84rem;
  line-height: 1.45;
}

.home-topref-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr) minmax(300px, 1fr);
  gap: 0.95rem;
}

.home-topref-story-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgb(229 214 208 / 0.96);
  background: #fff;
  box-shadow: 0 16px 34px rgb(53 32 19 / 0.07);
  color: #fff;
  text-decoration: none;
}

.home-topref-story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(25 20 16 / 0.04) 0%, rgb(25 20 16 / 0.7) 100%);
}

.home-topref-story-card img,
.home-topref-story-card .image-neutral-fallback {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.home-topref-story-card.is-lead {
  grid-row: span 2;
}

.home-topref-story-card.is-lead img,
.home-topref-story-card.is-lead .image-neutral-fallback {
  min-height: 590px;
}

.home-topref-story-card.is-stack img,
.home-topref-story-card.is-stack .image-neutral-fallback {
  min-height: 286px;
}

.home-topref-story-card.is-mini img,
.home-topref-story-card.is-mini .image-neutral-fallback {
  min-height: 190px;
}

.home-topref-story-copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 0.36rem;
  padding: 1rem 1rem 1.05rem;
}

.home-topref-story-copy small {
  color: rgb(255 227 223);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.home-topref-story-copy strong {
  font-size: 1.08rem;
  line-height: 1.34;
}

.home-topref-story-card.is-lead .home-topref-story-copy strong {
  font-size: 2rem;
  line-height: 1.16;
}

.home-topref-story-copy em {
  font-size: 0.83rem;
  line-height: 1.55;
  color: rgb(250 241 239 / 0.95);
  font-style: normal;
}

.home-topref-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.12rem;
  font-style: normal;
}

.home-topref-chip-row b {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0.12rem 0.52rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
  border: 1px solid rgb(255 255 255 / 0.22);
  font-size: 0.68rem;
  font-weight: 800;
}

.home-topref-latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.home-topref-latest-card {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border: 1px solid rgb(229 215 209 / 0.95);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.92);
  color: inherit;
  text-decoration: none;
}

.home-topref-latest-card span {
  display: grid;
  gap: 0.22rem;
}

.home-topref-latest-card small {
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 900;
}

.home-topref-latest-card strong {
  font-size: 0.94rem;
  line-height: 1.5;
}

.home-topref-latest-card em {
  font-size: 0.77rem;
  line-height: 1.5;
  color: var(--ink-muted);
  font-style: normal;
}

.home-topref-latest-card time {
  flex: 0 0 auto;
  padding-left: 0.6rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.home-topref-ranking-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.home-topref-ranking-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem;
  border: 1px solid rgb(233 219 214 / 0.96);
  border-radius: 22px;
  background: rgb(255 252 251 / 0.96);
  color: inherit;
  text-decoration: none;
}

.home-topref-ranking-number {
  color: var(--brand);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}

.home-topref-ranking-card img,
.home-topref-ranking-card .image-neutral-fallback {
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 16px;
}

.home-topref-ranking-card small {
  color: var(--brand);
  font-size: 0.66rem;
  font-weight: 900;
}

.home-topref-ranking-card strong {
  font-size: 0.83rem;
  line-height: 1.5;
}

.home-topref-special-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 0.95rem;
}

.home-topref-special-card {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgb(233 219 214 / 0.96);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 34px rgb(53 32 19 / 0.06);
  color: inherit;
  text-decoration: none;
}

.home-topref-special-card.is-main {
  grid-row: span 2;
  grid-template-columns: 1fr;
}

.home-topref-special-card img,
.home-topref-special-card .image-neutral-fallback {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

.home-topref-special-card.is-main img,
.home-topref-special-card.is-main .image-neutral-fallback {
  min-height: 420px;
}

.home-topref-special-card span {
  display: grid;
  align-content: center;
  gap: 0.32rem;
  padding: 1rem 1.1rem;
}

.home-topref-special-card small {
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 900;
}

.home-topref-special-card strong {
  font-size: 1.02rem;
  line-height: 1.45;
}

.home-topref-special-card.is-main strong {
  font-size: 1.9rem;
  line-height: 1.18;
}

.home-topref-special-card em {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-muted);
  font-style: normal;
}

.home-topref-policy {
  margin-bottom: 1.35rem;
}

.home-topref-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgb(232 217 212 / 0.95);
  border-bottom: 1px solid rgb(232 217 212 / 0.95);
}

.home-topref-policy-grid p,
.home-topref-policy-grid a {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
}

.home-topref-policy-grid a {
  color: var(--brand);
  font-weight: 800;
  justify-self: end;
}

@media (max-width: 1100px) {
  .home-topref-category-grid,
  .home-topref-ranking-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-topref-purpose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-topref-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-topref-story-card.is-lead {
    grid-row: auto;
    grid-column: span 2;
  }

  .home-topref-story-card.is-lead img,
  .home-topref-story-card.is-lead .image-neutral-fallback {
    min-height: 440px;
  }

  .home-topref-special-grid {
    grid-template-columns: 1fr;
  }

  .home-topref-special-card.is-main {
    grid-row: auto;
  }
}

@media (max-width: 767px) {
  .gateway-page > .home-topref-trustbar,
  .gateway-page > .home-hero,
  .gateway-page > .home-topref-categories,
  .gateway-page > .home-topref-purpose,
  .gateway-page > .home-topref-spotlight,
  .gateway-page > .home-topref-latest,
  .gateway-page > .home-topref-ranking,
  .gateway-page > .home-topref-special,
  .gateway-page > .home-topref-policy {
    width: min(100% - 1.25rem, 560px);
  }

  .home-topref-trustbar-inner {
    padding: 0.85rem 0.9rem;
  }

  .home-hero.home-hero .home-hero-inner {
    padding-top: 0.4rem;
  }

  .home-hero.home-hero .home-hero-copy {
    padding: 1.15rem 1rem;
    border-radius: 22px;
  }

  .home-hero.home-hero h1 {
    font-size: clamp(1.9rem, 10vw, 2.85rem);
  }

  .gateway-hero-lead {
    font-size: 0.92rem;
    line-height: 1.75;
  }

  .home-hero-article--main img,
  .home-hero-article--main .image-neutral-fallback {
    min-height: 300px;
  }

  .home-hero-sidecards .home-hero-article img,
  .home-hero-sidecards .home-hero-article .image-neutral-fallback {
    min-height: 170px;
  }

  .home-hero-article strong {
    font-size: 1.18rem;
  }

  .home-topref-heading,
  .home-topref-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }

  .home-topref-category-grid,
  .home-topref-latest-grid,
  .home-topref-ranking-grid,
  .home-topref-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-topref-purpose-grid,
  .home-topref-spotlight-grid,
  .home-topref-special-grid {
    grid-template-columns: 1fr;
  }

  .home-topref-category-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
  }

  .home-topref-category-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .home-topref-category-icon img {
    width: 28px;
    height: 28px;
  }

  .home-topref-purpose {
    padding: 0.9rem;
    border-radius: 22px;
  }

  .home-topref-purpose-card {
    min-height: 110px;
  }

  .home-topref-story-card.is-lead,
  .home-topref-story-card.is-stack,
  .home-topref-story-card.is-mini {
    grid-column: auto;
  }

  .home-topref-story-card.is-lead img,
  .home-topref-story-card.is-lead .image-neutral-fallback,
  .home-topref-story-card.is-stack img,
  .home-topref-story-card.is-stack .image-neutral-fallback,
  .home-topref-story-card.is-mini img,
  .home-topref-story-card.is-mini .image-neutral-fallback {
    min-height: 240px;
  }

  .home-topref-story-card.is-lead .home-topref-story-copy strong {
    font-size: 1.34rem;
  }

  .home-topref-latest-card {
    flex-direction: column;
    gap: 0.45rem;
  }

  .home-topref-latest-card time {
    padding-left: 0;
  }

  .home-topref-ranking-card img,
  .home-topref-ranking-card .image-neutral-fallback {
    height: 96px;
  }

  .home-topref-special-card,
  .home-topref-special-card.is-main {
    grid-template-columns: 1fr;
  }

  .home-topref-special-card img,
  .home-topref-special-card .image-neutral-fallback,
  .home-topref-special-card.is-main img,
  .home-topref-special-card.is-main .image-neutral-fallback {
    min-height: 220px;
  }

  .home-topref-special-card.is-main strong {
    font-size: 1.32rem;
  }

  .home-topref-policy-grid a {
    justify-self: start;
  }
}

@media (max-width: 380px) {
  .home-topref-category-grid,
  .home-topref-ranking-grid,
  .home-topref-policy-grid {
    grid-template-columns: 1fr;
  }

  .home-topref-purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2026-08-27 full homepage refresh */
.gateway-page > .home-refresh-trust,
.gateway-page > .home-refresh-hero,
.gateway-page > .home-refresh-daily-strip,
.gateway-page > .home-refresh-seasonal,
.gateway-page > .home-refresh-start,
.gateway-page > .home-refresh-categories,
.gateway-page > .home-refresh-discovery,
.gateway-page > .home-refresh-theme-shelves,
.gateway-page > .home-refresh-spotlight,
.gateway-page > .home-refresh-latest,
.gateway-page > .home-refresh-ranking,
.gateway-page > .home-refresh-special,
.gateway-page > .home-refresh-policy {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}

.home-refresh-trust {
  margin-top: 0.9rem;
}

.home-refresh-trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.25rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid rgb(233 219 214 / 0.95);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.88);
  box-shadow: 0 10px 28px rgb(37 20 11 / 0.05);
}

.home-refresh-trust-inner p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink);
}

.home-refresh-trust-inner p::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.55rem;
  border-radius: 999px;
  background: var(--brand);
  vertical-align: middle;
}

.home-refresh-hero {
  margin-top: 1rem;
}

.home-refresh-hero-band {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  border-radius: 40px;
  background: #18110d;
  box-shadow: 0 28px 70px rgb(35 18 8 / 0.16);
}

.home-refresh-hero-background,
.home-refresh-hero-background img,
.home-refresh-hero-background.image-neutral-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-refresh-hero-background img,
.home-refresh-hero-background.image-neutral-fallback {
  object-fit: cover;
  object-position: 58% center;
}

.home-refresh-hero-overlay {
  position: relative;
  z-index: 1;
  min-height: 760px;
  padding: 2rem;
  background:
    linear-gradient(90deg, rgb(18 12 9 / 0.88) 0%, rgb(18 12 9 / 0.72) 40%, rgb(18 12 9 / 0.26) 72%, rgb(18 12 9 / 0.48) 100%),
    linear-gradient(180deg, rgb(11 7 5 / 0.15) 0%, rgb(11 7 5 / 0.68) 100%);
}

.home-refresh-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.94fr);
  gap: 1.35rem;
  align-items: end;
}

.home-refresh-hero-copy,
.home-refresh-discovery-panel,
.home-refresh-start-card,
.home-refresh-latest-card,
.home-refresh-ranking-card,
.home-refresh-policy-grid,
.home-refresh-category-card,
.home-refresh-special-card,
.home-refresh-value-card {
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 16px 36px rgb(41 21 10 / 0.06);
}

.home-refresh-hero-copy {
  align-self: center;
  max-width: 560px;
  padding: 1rem 0 0;
  background: transparent;
  box-shadow: none;
}

.home-refresh-kicker {
  margin: 0 0 0.8rem;
  color: rgb(255 213 205 / 0.96);
  font-size: 0.77rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.home-refresh-hero-copy h1 {
  margin: 0;
  font-size: clamp(3rem, 5.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #fff8f2;
  text-wrap: balance;
}

.home-refresh-hero-copy h1 em {
  color: #fff;
  font-style: normal;
  background: linear-gradient(transparent 60%, rgb(180 35 24 / 0.95) 60% 86%, transparent 86%) 0 0 / 100% 100% no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.home-refresh-hero-lead {
  margin: 1rem 0 0;
  font-size: 1.04rem;
  line-height: 1.95;
  color: rgb(255 246 238 / 0.9);
}

.home-refresh-hero-note {
  margin: 0.95rem 0 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgb(255 236 227 / 0.7);
}

.home-refresh-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 0;
  margin-top: 1.35rem;
  min-height: 62px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 18px;
  background: rgb(12 8 6 / 0.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}

.home-refresh-search input {
  border: 0;
  padding: 0 1rem;
  font-size: 0.97rem;
  background: transparent;
  color: #fff7f2;
}

.home-refresh-search button {
  border: 0;
  border-left: 1px solid rgb(255 255 255 / 0.12);
  background: linear-gradient(180deg, rgb(41 28 22 / 0.96) 0%, rgb(26 18 14 / 0.98) 100%);
  color: #fff2ee;
  font-size: 1.2rem;
}

.home-refresh-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 1rem 0 0;
}

.home-refresh-search-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.38rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: #fff7f2;
  font-size: 0.78rem;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.home-refresh-fact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1.3rem;
}

.home-refresh-fact-card {
  display: grid;
  gap: 0.16rem;
  padding: 0.8rem 0.88rem;
  border-top: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.02) 100%);
  backdrop-filter: blur(2px);
}

.home-refresh-fact-card small {
  color: rgb(255 232 224 / 0.78);
  font-size: 0.7rem;
  font-weight: 700;
}

.home-refresh-fact-card strong {
  color: #fff8f3;
  font-size: 1.26rem;
  line-height: 1.15;
}

.home-refresh-fact-card strong span {
  margin-left: 0.16rem;
  color: rgb(255 214 205 / 0.92);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-refresh-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.home-refresh-hero-point {
  padding-top: 0.9rem;
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

.home-refresh-hero-point strong {
  display: block;
  margin-bottom: 0.45rem;
  color: #fff8f2;
  font-size: 0.82rem;
}

.home-refresh-hero-point span {
  color: rgb(255 236 227 / 0.72);
  font-size: 0.76rem;
  line-height: 1.7;
}

.home-refresh-hero-side {
  display: grid;
  gap: 0.95rem;
}

.home-refresh-hero-ticker {
  margin-top: 1.2rem;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  border-bottom: 1px solid rgb(255 255 255 / 0.18);
  padding: 0.9rem 0;
}

.home-refresh-hero-ticker-track {
  display: flex;
  width: max-content;
  gap: 0.8rem;
  animation: home-refresh-ticker-scroll 34s linear infinite;
}

.home-refresh-hero-ticker-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  min-width: 296px;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.08);
  color: #fff8f3;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.home-refresh-hero-ticker-item img,
.home-refresh-hero-ticker-item .image-neutral-fallback {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
}

.home-refresh-hero-ticker-item span {
  display: grid;
  gap: 0.16rem;
}

.home-refresh-hero-ticker-item strong {
  font-size: 0.9rem;
  line-height: 1.4;
}

.home-refresh-hero-ticker-item em {
  color: rgb(255 236 227 / 0.76);
  font-size: 0.74rem;
  line-height: 1.5;
  font-style: normal;
}

.home-refresh-hero-main,
.home-refresh-rail-card,
.home-refresh-story-card {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.home-refresh-hero-main {
  display: grid;
  align-content: end;
  border-radius: 30px;
  min-height: 430px;
  padding: 1rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05) 0%, rgb(20 13 10 / 0.16) 42%, rgb(20 13 10 / 0.68) 100%),
    linear-gradient(135deg, rgb(125 102 83 / 0.24) 0%, rgb(47 34 28 / 0.36) 100%);
  box-shadow: 0 24px 48px rgb(10 7 5 / 0.18);
  backdrop-filter: blur(8px);
}

.home-refresh-hero-main::after,
.home-refresh-rail-card::after,
.home-refresh-story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(31 18 10 / 0.06) 0%, rgb(31 18 10 / 0.72) 100%);
}

.home-refresh-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-refresh-hero-main-copy,
.home-refresh-rail-card span,
.home-refresh-story-card span {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.32rem;
  padding: 0;
}

.home-refresh-hero-main-copy small,
.home-refresh-rail-card small,
.home-refresh-story-card small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 26px;
  padding: 0.1rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: rgb(36 23 17 / 0.5);
  color: rgb(255 238 233);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.home-refresh-hero-main-copy strong {
  font-size: clamp(1.9rem, 2.7vw, 2.7rem);
  line-height: 1.1;
}

.home-refresh-hero-main-copy em,
.home-refresh-rail-card em,
.home-refresh-story-card em {
  color: rgb(255 244 240 / 0.98);
  font-size: 0.84rem;
  line-height: 1.6;
  font-style: normal;
  text-shadow: 0 1px 1px rgb(10 7 5 / 0.24);
}

.home-refresh-hero-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
}

.home-refresh-rail-card {
  display: grid;
  min-height: 0;
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 18px 32px rgb(10 7 5 / 0.12);
}

.home-refresh-rail-card img,
.home-refresh-rail-card .image-neutral-fallback {
  width: 100%;
  min-height: 220px;
  object-fit: cover;
}

.home-refresh-rail-card strong {
  font-size: 1.02rem;
  line-height: 1.35;
}

.home-refresh-categories,
.home-refresh-seasonal,
.home-refresh-start,
.home-refresh-discovery,
.home-refresh-theme-shelves,
.home-refresh-spotlight,
.home-refresh-latest,
.home-refresh-ranking,
.home-refresh-special,
.home-refresh-policy {
  margin-top: 1.45rem;
}

.home-refresh-hero-editorial {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 0;
  margin-top: 1.35rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 24px;
  background: rgb(12 8 6 / 0.58);
  backdrop-filter: blur(10px);
}

.home-refresh-hero-editorial-label {
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: 1rem;
  background: linear-gradient(180deg, #cf2f2a 0%, #9d1a19 100%);
  color: #fff;
}

.home-refresh-hero-editorial-label span {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.home-refresh-hero-editorial-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-refresh-hero-editorial-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  min-height: 112px;
  padding: 1rem 1rem 1.05rem;
  border-left: 1px solid rgb(255 255 255 / 0.08);
  color: #fff8f3;
  text-decoration: none;
}

.home-refresh-hero-editorial-card b {
  color: rgb(255 219 212 / 0.95);
  font-size: 1.08rem;
  line-height: 1;
}

.home-refresh-hero-editorial-card span {
  display: grid;
  gap: 0.18rem;
}

.home-refresh-hero-editorial-card small {
  color: rgb(255 197 188 / 0.92);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.home-refresh-hero-editorial-card strong {
  font-size: 0.92rem;
  line-height: 1.45;
}

.home-refresh-hero-editorial-card em {
  color: rgb(255 238 230 / 0.72);
  font-size: 0.74rem;
  line-height: 1.55;
  font-style: normal;
}

.home-refresh-section-head,
.home-refresh-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.95rem;
}

.home-refresh-section-head h2,
.home-refresh-panel-head h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2.1vw, 1.96rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.home-refresh-section-head a {
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.home-refresh-season-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.home-refresh-season-tabs span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid rgb(233 220 214 / 0.96);
  color: var(--ink-muted);
  font-size: 0.76rem;
  font-weight: 700;
  background: #fff;
}

.home-refresh-season-tabs span.is-active {
  border-color: rgb(206 55 51 / 0.34);
  color: var(--brand);
  background: rgb(255 244 241 / 1);
}

.home-refresh-seasonal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) repeat(2, minmax(0, 0.82fr));
  gap: 0.9rem;
}

.home-refresh-seasonal-card {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 220px;
  border-radius: 24px;
  border: 1px solid rgb(229 214 209 / 0.96);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 38px rgb(41 21 10 / 0.07);
}

.home-refresh-seasonal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(31 18 10 / 0.08) 0%, rgb(31 18 10 / 0.78) 100%);
}

.home-refresh-seasonal-card img,
.home-refresh-seasonal-card .image-neutral-fallback {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.home-refresh-seasonal-card.is-lead {
  grid-row: span 2;
}

.home-refresh-seasonal-card.is-lead img,
.home-refresh-seasonal-card.is-lead .image-neutral-fallback {
  min-height: 458px;
}

.home-refresh-seasonal-card span {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1rem 1.1rem;
  background: linear-gradient(180deg, rgb(21 12 7 / 0) 0%, rgb(21 12 7 / 0.24) 22%, rgb(21 12 7 / 0.82) 100%);
}

.home-refresh-seasonal-card small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 0 0.54rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  color: rgb(255 238 233);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-refresh-seasonal-card strong {
  font-size: 1rem;
  line-height: 1.34;
}

.home-refresh-seasonal-card.is-lead strong {
  font-size: 1.88rem;
  line-height: 1.15;
  text-wrap: balance;
}

.home-refresh-seasonal-card em {
  color: rgb(255 242 239 / 0.96);
  font-size: 0.8rem;
  line-height: 1.6;
  font-style: normal;
}

.home-refresh-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-refresh-start-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgb(235 222 217 / 0.96);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
}

.home-refresh-start-step {
  color: var(--brand);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.home-refresh-start-card small {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-refresh-start-card strong {
  font-size: 1rem;
  line-height: 1.42;
  color: var(--ink-strong);
}

.home-refresh-start-card p {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.home-refresh-panel-head {
  display: grid;
  justify-content: start;
}

.home-refresh-panel-head span {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.home-refresh-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-refresh-category-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 1rem 1.05rem;
  border: 1px solid rgb(233 220 214 / 0.96);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
}

.home-refresh-category-icon,
.home-refresh-purpose-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff 0%, #fff3ef 100%);
  border: 1px solid rgb(251 223 217 / 0.96);
}

.home-refresh-category-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

.home-refresh-category-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.home-refresh-category-copy strong {
  display: block;
  font-size: 0.96rem;
  line-height: 1.3;
}

.home-refresh-category-copy small {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.home-refresh-discovery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 1rem;
}

.home-refresh-discovery-panel {
  padding: 1rem;
  border: 1px solid rgb(235 222 217 / 0.96);
  border-radius: 26px;
}

.home-refresh-purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.home-refresh-purpose-card {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  min-height: 116px;
  padding: 0.9rem 0.6rem;
  border: 1px solid rgb(238 225 220 / 0.96);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.home-refresh-purpose-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
}

.home-refresh-purpose-icon img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.home-refresh-purpose-card strong {
  font-size: 0.82rem;
  line-height: 1.42;
}

.home-refresh-value-list,
.home-refresh-guide-links {
  display: grid;
  gap: 0.75rem;
}

.home-refresh-value-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.78rem;
  align-items: center;
  padding: 0.72rem;
  border: 1px solid rgb(237 224 219 / 0.96);
  border-radius: 18px;
}

.home-refresh-value-media {
  display: block;
}

.home-refresh-value-media img,
.home-refresh-value-media .image-neutral-fallback {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  object-fit: cover;
}

.home-refresh-value-copy {
  display: grid;
  gap: 0.18rem;
}

.home-refresh-value-copy small {
  color: var(--brand);
  font-size: 0.66rem;
  font-weight: 900;
}

.home-refresh-value-copy strong {
  font-size: 0.89rem;
  line-height: 1.42;
}

.home-refresh-value-copy em {
  color: var(--ink);
  font-size: 0.74rem;
  line-height: 1.55;
  font-style: normal;
}

.home-refresh-value-copy p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.home-refresh-value-copy b {
  color: var(--brand);
  font-size: 1.18rem;
  line-height: 1.2;
}

.home-refresh-value-cta {
  grid-column: 1 / -1;
  display: inline-flex;
  justify-content: center;
  min-height: 42px;
}

.home-refresh-guide-link {
  display: grid;
  gap: 0.28rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgb(238 225 220 / 0.96);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.home-refresh-guide-link strong {
  font-size: 0.9rem;
  line-height: 1.45;
}

.home-refresh-guide-link small {
  color: var(--ink-muted);
  font-size: 0.73rem;
  line-height: 1.5;
}

.home-refresh-shelf-stack {
  display: grid;
  gap: 1rem;
}

.home-refresh-shelf {
  padding: 1rem;
  border: 1px solid rgb(235 222 217 / 0.96);
  border-radius: 26px;
  background: linear-gradient(180deg, rgb(255 248 245 / 0.95), rgb(255 255 255 / 1));
  box-shadow: 0 16px 34px rgb(41 21 10 / 0.05);
}

.home-refresh-shelf-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.home-refresh-shelf-head span {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-refresh-shelf-head h3 {
  margin-top: 0.15rem;
  font-size: 1.1rem;
  line-height: 1.3;
}

.home-refresh-shelf-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.home-refresh-shelf-card {
  display: grid;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
}

.home-refresh-shelf-card img,
.home-refresh-shelf-card .image-neutral-fallback {
  width: 100%;
  height: 124px;
  border-radius: 18px;
  object-fit: cover;
}

.home-refresh-shelf-card span {
  display: grid;
  gap: 0.12rem;
}

.home-refresh-shelf-card small {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 900;
}

.home-refresh-shelf-card strong {
  font-size: 0.85rem;
  line-height: 1.45;
}

.home-refresh-shelf-card em {
  color: var(--ink-muted);
  font-size: 0.73rem;
  line-height: 1.45;
  font-style: normal;
}

.home-refresh-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 0.95rem;
}

.home-refresh-story-card {
  display: grid;
  min-height: 220px;
  border-radius: 26px;
  border: 1px solid rgb(229 214 209 / 0.96);
  box-shadow: 0 18px 38px rgb(41 21 10 / 0.07);
}

.home-refresh-story-card img,
.home-refresh-story-card .image-neutral-fallback {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.home-refresh-story-card.is-feature {
  grid-row: span 2;
}

.home-refresh-story-card.is-feature img,
.home-refresh-story-card.is-feature .image-neutral-fallback {
  min-height: 470px;
}

.home-refresh-story-card strong {
  font-size: 1.02rem;
  line-height: 1.34;
  text-shadow: 0 2px 10px rgb(10 7 5 / 0.28);
}

.home-refresh-story-card.is-feature strong {
  font-size: 1.9rem;
  line-height: 1.18;
}

.home-refresh-latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.home-refresh-latest-card {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgb(235 222 217 / 0.96);
  border-radius: 20px;
  color: inherit;
  text-decoration: none;
}

.home-refresh-latest-card span {
  display: grid;
  gap: 0.2rem;
}

.home-refresh-latest-card small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 0 0.52rem;
  border-radius: 999px;
  background: rgb(200 16 46 / 0.08);
  color: var(--brand-strong);
  font-size: 0.69rem;
  font-weight: 900;
}

.home-refresh-latest-card strong {
  font-size: 0.94rem;
  line-height: 1.5;
  text-wrap: balance;
}

.home-refresh-latest-card em {
  color: var(--ink-muted);
  font-size: 0.77rem;
  line-height: 1.5;
  font-style: normal;
}

.home-refresh-latest-card time {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.home-refresh-ranking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 0.95rem;
}

.home-refresh-ranking-lead {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgb(235 222 217 / 0.96);
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 38px rgb(41 21 10 / 0.07);
}

.home-refresh-ranking-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(31 18 10 / 0.08) 0%, rgb(31 18 10 / 0.82) 100%);
}

.home-refresh-ranking-lead img,
.home-refresh-ranking-lead .image-neutral-fallback {
  width: 100%;
  min-height: 448px;
  object-fit: cover;
}

.home-refresh-ranking-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.8rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #c22728 0%, #8f1a1d 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-refresh-ranking-lead-copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 0.32rem;
  padding: 1rem 1rem 1.15rem;
}

.home-refresh-ranking-lead-copy small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 0 0.54rem;
  border-radius: 999px;
  background: rgb(36 23 17 / 0.52);
  color: rgb(255 238 233);
  font-size: 0.72rem;
  font-weight: 900;
}

.home-refresh-ranking-lead-copy strong {
  font-size: 1.72rem;
  line-height: 1.18;
  text-wrap: balance;
}

.home-refresh-ranking-lead-copy em {
  color: rgb(255 242 239 / 0.95);
  font-size: 0.84rem;
  line-height: 1.6;
  font-style: normal;
}

.home-refresh-ranking-list {
  display: grid;
  gap: 0.7rem;
}

.home-refresh-ranking-row {
  display: grid;
  grid-template-columns: 42px 126px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.78rem;
  border: 1px solid rgb(235 222 217 / 0.96);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.92);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 14px 32px rgb(41 21 10 / 0.05);
}

.home-refresh-ranking-number {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgb(36 36 36 / 0.92);
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
}

.home-refresh-ranking-row img,
.home-refresh-ranking-row .image-neutral-fallback {
  width: 126px;
  height: 94px;
  border-radius: 16px;
  object-fit: cover;
}

.home-refresh-ranking-row-copy {
  display: grid;
  gap: 0.14rem;
}

.home-refresh-ranking-row small {
  color: var(--brand);
  font-size: 0.66rem;
  font-weight: 900;
}

.home-refresh-ranking-row strong {
  font-size: 0.9rem;
  line-height: 1.46;
  text-wrap: balance;
}

.home-refresh-ranking-row em {
  color: var(--ink-muted);
  font-size: 0.74rem;
  line-height: 1.5;
  font-style: normal;
}

.home-refresh-special-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(290px, 0.78fr);
  gap: 0.95rem;
}

.home-refresh-special-card {
  display: grid;
  grid-template-columns: minmax(165px, 0.84fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgb(235 222 217 / 0.96);
  border-radius: 24px;
  color: inherit;
  text-decoration: none;
}

.home-refresh-special-card.is-main {
  grid-row: span 2;
  grid-template-columns: 1fr;
}

.home-refresh-special-card img,
.home-refresh-special-card .image-neutral-fallback {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

.home-refresh-special-card.is-main img,
.home-refresh-special-card.is-main .image-neutral-fallback {
  min-height: 420px;
}

.home-refresh-special-card span {
  display: grid;
  align-content: center;
  gap: 0.28rem;
  padding: 1rem 1.05rem;
}

.home-refresh-special-card small {
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 900;
}

.home-refresh-special-card strong {
  font-size: 1rem;
  line-height: 1.45;
}

.home-refresh-special-card.is-main strong {
  font-size: 1.72rem;
  line-height: 1.18;
  text-wrap: balance;
}

.home-refresh-special-card em {
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.58;
  font-style: normal;
}

.home-refresh-policy {
  margin-bottom: 1.35rem;
}

.home-refresh-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgb(235 222 217 / 0.96);
  border-bottom: 1px solid rgb(235 222 217 / 0.96);
}

.home-refresh-policy-grid p,
.home-refresh-policy-grid a {
  margin: 0;
  color: var(--ink);
  font-size: 0.83rem;
  line-height: 1.5;
  text-decoration: none;
}

.home-refresh-policy-grid a {
  justify-self: end;
  color: var(--brand);
  font-weight: 800;
}

@keyframes home-refresh-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 0.4rem));
  }
}

@media (max-width: 1100px) {
  .home-refresh-hero-grid,
  .home-refresh-seasonal-grid,
  .home-refresh-start-grid,
  .home-refresh-discovery-grid,
  .home-refresh-story-grid,
  .home-refresh-ranking-layout,
  .home-refresh-special-grid {
    grid-template-columns: 1fr;
  }

  .home-refresh-hero-overlay {
    min-height: auto;
  }

  .home-refresh-hero-points,
  .home-refresh-hero-editorial-list,
  .home-refresh-hero-rail {
    grid-template-columns: 1fr 1fr;
  }

  .home-refresh-hero-ticker-item {
    min-width: 270px;
  }

  .home-refresh-category-grid,
  .home-refresh-ranking-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-refresh-shelf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-refresh-story-card.is-feature {
    grid-row: auto;
  }

  .home-refresh-story-card.is-feature img,
  .home-refresh-story-card.is-feature .image-neutral-fallback {
    min-height: 340px;
  }

  .home-refresh-special-card.is-main {
    grid-row: auto;
  }

  .home-refresh-hero-editorial {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .gateway-page > .home-refresh-trust,
  .gateway-page > .home-refresh-hero,
  .gateway-page > .home-refresh-seasonal,
  .gateway-page > .home-refresh-start,
  .gateway-page > .home-refresh-categories,
  .gateway-page > .home-refresh-discovery,
  .gateway-page > .home-refresh-theme-shelves,
  .gateway-page > .home-refresh-spotlight,
  .gateway-page > .home-refresh-latest,
  .gateway-page > .home-refresh-ranking,
  .gateway-page > .home-refresh-special,
  .gateway-page > .home-refresh-policy {
    width: min(100% - 1.25rem, 560px);
  }

  .home-refresh-hero-copy {
    padding: 0;
  }

  .home-refresh-hero-copy h1 {
    font-size: clamp(2.25rem, 11vw, 3.6rem);
  }

  .home-refresh-hero-lead {
    font-size: 0.93rem;
    line-height: 1.75;
  }

  .home-refresh-fact-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-refresh-search {
    min-height: 56px;
  }

  .home-refresh-category-grid,
  .home-refresh-latest-grid,
  .home-refresh-policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-refresh-shelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-refresh-purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-refresh-season-tabs {
    width: 100%;
  }

  .home-refresh-ranking-row {
    grid-template-columns: 38px 96px minmax(0, 1fr);
    gap: 0.65rem;
  }

  .home-refresh-ranking-row img,
  .home-refresh-ranking-row .image-neutral-fallback {
    width: 96px;
    height: 82px;
  }

  .home-refresh-section-head,
  .home-refresh-panel-head {
    align-items: flex-start;
  }

  .home-refresh-section-head {
    flex-direction: column;
    gap: 0.4rem;
  }

  .home-refresh-category-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.72rem;
    padding: 0.88rem;
  }

  .home-refresh-category-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .home-refresh-category-icon img {
    width: 28px;
    height: 28px;
  }

  .home-refresh-rail-card img,
  .home-refresh-rail-card .image-neutral-fallback,
  .home-refresh-story-card img,
  .home-refresh-story-card .image-neutral-fallback,
  .home-refresh-story-card.is-feature img,
  .home-refresh-story-card.is-feature .image-neutral-fallback,
  .home-refresh-special-card img,
  .home-refresh-special-card .image-neutral-fallback,
  .home-refresh-special-card.is-main img,
  .home-refresh-special-card.is-main .image-neutral-fallback {
    min-height: 240px;
  }

  .home-refresh-hero-main-copy strong,
  .home-refresh-seasonal-card.is-lead strong,
  .home-refresh-ranking-lead-copy strong,
  .home-refresh-story-card.is-feature strong,
  .home-refresh-special-card.is-main strong {
    font-size: 1.34rem;
  }

  .home-refresh-value-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .home-refresh-value-media img,
  .home-refresh-value-media .image-neutral-fallback {
    width: 82px;
    height: 82px;
  }

  .home-refresh-guide-link,
  .home-refresh-latest-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-refresh-hero-band {
    min-height: auto;
    border-radius: 28px;
  }

  .home-refresh-hero-overlay {
    padding: 1rem;
  }

  .home-refresh-hero-background img,
  .home-refresh-hero-background.image-neutral-fallback {
    object-position: 68% center;
  }

  .home-refresh-hero-points,
  .home-refresh-hero-rail,
  .home-refresh-hero-editorial-list,
  .home-refresh-fact-list {
    grid-template-columns: 1fr;
  }

  .home-refresh-hero-ticker-item {
    min-width: 236px;
  }

  .home-refresh-hero-editorial-card {
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.08);
  }

  .home-refresh-hero-editorial-label {
    min-height: 64px;
  }

  .home-refresh-policy-grid a {
    justify-self: start;
  }
}

@media (max-width: 380px) {
  .home-refresh-start-grid,
  .home-refresh-category-grid,
  .home-refresh-policy-grid {
    grid-template-columns: 1fr;
  }

  .home-refresh-shelf-grid {
    grid-template-columns: 1fr;
  }

  .home-refresh-purpose-grid {
    grid-template-columns: 1fr;
  }
}

/* 2026-08-27 publish refresh: サービス記事の見取り図と、トップの契約前ガイド棚を追加 */
.service-guide-page article {
  display: grid;
  gap: var(--s6);
}

.service-guide-quick-checks,
.service-guide-jump-links,
.service-guide-summary-grid,
.home-refresh-service-grid {
  display: grid;
  gap: var(--s3);
}

.service-guide-quick-checks {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}

.service-guide-quick-checks li {
  min-height: 56px;
  padding: var(--s3) var(--s4);
  border: 1px solid rgb(231 218 211 / 0.9);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fff8f4 100%);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
}

.service-guide-jump-links {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--s4);
}

.service-guide-jump-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s4);
  border: 1px solid rgb(226 211 205 / 0.9);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-strong);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.service-guide-jump-links a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.service-guide-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-guide-summary-card {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgb(232 220 214 / 0.92);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff 0%, #fff9f6 100%);
  box-shadow: 0 16px 36px rgb(31 31 31 / 0.05);
}

.service-guide-summary-card small {
  display: block;
  margin-bottom: var(--s2);
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.service-guide-summary-card strong {
  display: block;
  font-size: clamp(1.12rem, 2vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink-strong);
}

.service-guide-summary-card p {
  margin: var(--s2) 0 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ink-muted);
}

.service-guide-compare-visual figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(232 220 214 / 0.92);
  border-radius: 28px;
  background: linear-gradient(180deg, #fff 0%, #fff8f3 100%);
  box-shadow: 0 18px 42px rgb(24 28 35 / 0.07);
}

.service-guide-compare-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.service-guide-compare-visual figcaption {
  padding: var(--s4) var(--s5) var(--s5);
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

.home-refresh-service-highlights {
  width: min(100% - 2rem, 1180px);
  margin: clamp(1.5rem, 4vw, 2.6rem) auto 0;
}

.home-refresh-service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-refresh-service-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(233 219 213 / 0.94);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 38px rgb(24 28 35 / 0.07);
  text-decoration: none;
}

.home-refresh-service-card img,
.home-refresh-service-card .image-neutral-fallback {
  display: block;
  width: 100%;
  min-height: 240px;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.home-refresh-service-card span {
  display: grid;
  gap: var(--s2);
  padding: var(--s4);
}

.home-refresh-service-card small {
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-refresh-service-card strong {
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--ink-strong);
}

.home-refresh-service-card em {
  color: var(--ink-muted);
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .service-guide-summary-grid,
  .home-refresh-service-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .service-guide-hero {
    padding: var(--s5);
  }

  .service-guide-quick-checks,
  .service-guide-jump-links {
    grid-template-columns: 1fr;
  }

  .home-refresh-service-highlights {
    width: min(100% - 1.25rem, 560px);
  }

  .home-refresh-service-card img,
  .home-refresh-service-card .image-neutral-fallback {
    min-height: 210px;
  }
}

/* 2026-08-28 homepage rebuild v9: my-best寄りの整理されたトップ構造 */
.home-refresh-hero-compact,
.home-refresh-daily-strip,
.home-refresh-purpose,
.home-refresh-directory,
.home-refresh-featured,
.home-refresh-guides-grid-wrap,
.home-refresh-latest {
  width: min(100% - 2rem, 1180px);
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
}

.home-refresh-hero-compact {
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
}

.home-refresh-hero-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(225 213 205 / 0.82);
  border-radius: 34px;
  background: #f5efe9;
  box-shadow: 0 24px 60px rgb(28 21 16 / 0.11);
}

.home-refresh-hero-compact .home-refresh-hero-background,
.home-refresh-hero-compact .home-refresh-hero-background.image-neutral-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 640px;
  object-fit: cover;
}

.home-refresh-hero-compact .home-refresh-hero-overlay {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(246 240 234 / 0.96) 0%, rgb(246 240 234 / 0.93) 38%, rgb(246 240 234 / 0.72) 58%, rgb(246 240 234 / 0.3) 100%);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.home-refresh-hero-compact .home-refresh-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 2.4vw, 1.5rem);
  align-items: stretch;
}

.home-refresh-hero-compact .home-refresh-hero-copy {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: clamp(0.35rem, 1vw, 0.7rem);
}

.home-refresh-hero-compact .home-refresh-kicker {
  margin: 0;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.home-refresh-hero-compact h1 {
  margin: 0;
  color: #16110f;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.home-refresh-hero-compact h1 em {
  display: inline;
  margin-top: 0.08em;
  padding: 0 0.04em;
  color: #d61e38;
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: rgb(214 30 56 / 0.28);
  text-decoration-thickness: 0.22em;
  text-underline-offset: 0.06em;
  text-decoration-skip-ink: none;
  text-decoration-style: solid;
}

.home-refresh-hero-compact .home-refresh-hero-lead,
.home-refresh-hero-compact .home-refresh-hero-note {
  margin: 0;
  max-width: 34rem;
  color: rgb(51 43 37 / 0.92);
}

.home-refresh-hero-compact .home-refresh-hero-lead {
  font-size: clamp(1rem, 1.55vw, 1.14rem);
  line-height: 1.9;
}

.home-refresh-hero-compact .home-refresh-hero-note {
  font-size: 0.95rem;
  line-height: 1.85;
}

.home-refresh-search-light {
  max-width: 34rem;
  background: rgb(255 255 255 / 0.95);
  border: 1px solid rgb(225 211 201 / 0.92);
  box-shadow: 0 16px 34px rgb(34 22 17 / 0.08);
}

.home-refresh-search-light input {
  color: #231a16;
}

.home-refresh-search-light input::placeholder {
  color: rgb(102 90 82 / 0.88);
}

.home-refresh-search-chips-light {
  gap: 0.65rem;
  max-width: 40rem;
}

.home-refresh-search-chips-light a {
  border-color: rgb(224 210 201 / 0.92);
  background: rgb(255 255 255 / 0.9);
  color: #352a25;
}

.home-refresh-search-chips-light a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.home-refresh-hero-main-light,
.home-refresh-rail-card-light {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(229 215 206 / 0.86);
  box-shadow: 0 16px 36px rgb(25 18 13 / 0.12);
}

.home-refresh-hero-main-light::after,
.home-refresh-rail-card-light::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(18 13 10 / 0.84) 100%);
  pointer-events: none;
}

.home-refresh-hero-main-light img,
.home-refresh-hero-main-light .image-neutral-fallback {
  min-height: 420px;
}

.home-refresh-hero-main-light .home-refresh-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.home-refresh-hero-main-copy-light,
.home-refresh-rail-card-light span {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 0.4rem;
  max-width: 100%;
  min-width: 0;
  padding: 1.2rem 1.2rem 1.3rem;
}

.home-refresh-hero-main-copy-light small,
.home-refresh-rail-card-light small {
  color: rgb(255 242 235 / 0.88);
}

.home-refresh-hero-main-copy-light strong,
.home-refresh-rail-card-light strong {
  color: #fffdfa;
  font-size: clamp(1.15rem, 1.8vw, 1.9rem);
  line-height: 1.28;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.24);
}

.home-refresh-hero-main-copy-light em,
.home-refresh-rail-card-light em {
  color: rgb(255 242 235 / 0.88);
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.65;
}

.home-refresh-hero-rail-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.home-refresh-rail-card-light img,
.home-refresh-rail-card-light .image-neutral-fallback {
  min-height: 200px;
}

.home-refresh-section-head-tight {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.home-refresh-section-head-tight h2 {
  margin: 0;
  color: #1d1613;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.home-refresh-section-head-tight a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.home-refresh-section-note {
  margin: 0.45rem 0 0;
  color: rgb(91 79 71 / 0.92);
  font-size: 0.95rem;
  line-height: 1.75;
}

.home-refresh-directory,
.home-refresh-featured,
.home-refresh-guides-grid-wrap,
.home-refresh-latest {
  padding: clamp(1.35rem, 3vw, 1.8rem);
  border: 1px solid rgb(231 220 214 / 0.92);
  border-radius: 32px;
  background: linear-gradient(180deg, #fffdfa 0%, #fff8f3 100%);
  box-shadow: 0 18px 40px rgb(31 24 20 / 0.06);
}

.home-refresh-daily-strip,
.home-refresh-purpose {
  padding: clamp(1.15rem, 2.6vw, 1.5rem);
  border: 1px solid rgb(231 220 214 / 0.92);
  border-radius: 32px;
  box-shadow: 0 18px 40px rgb(31 24 20 / 0.06);
}

.home-refresh-daily-strip {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background: linear-gradient(90deg, #cf2f2a 0%, #b91f1f 100%);
  color: #fff;
}

.home-refresh-daily-label {
  display: grid;
  align-content: center;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  margin: -1.15rem 0 -1.15rem -1.15rem;
  background: linear-gradient(180deg, rgb(155 22 20 / 0.95), rgb(121 14 15 / 0.98));
}

.home-refresh-daily-label small {
  color: rgb(255 215 207 / 0.92);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.home-refresh-daily-label strong {
  font-size: 1.3rem;
  line-height: 1.2;
}

.home-refresh-daily-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-refresh-daily-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.7rem;
  min-width: 0;
  min-height: 104px;
  padding: 0.95rem 1rem;
  border-left: 1px solid rgb(255 255 255 / 0.16);
  color: inherit;
  text-decoration: none;
}

.home-refresh-daily-link:hover {
  background: rgb(255 255 255 / 0.06);
}

.home-refresh-daily-link b {
  color: rgb(255 220 214 / 0.94);
  font-size: 1.05rem;
  line-height: 1;
}

.home-refresh-daily-link span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.home-refresh-daily-link small {
  color: rgb(255 214 208 / 0.92);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.home-refresh-daily-link strong {
  color: #fffdfb;
  font-size: 0.96rem;
  line-height: 1.42;
}

.home-refresh-daily-link em {
  color: rgb(255 238 233 / 0.8);
  font-size: 0.77rem;
  line-height: 1.5;
  font-style: normal;
}

.home-refresh-purpose {
  background: linear-gradient(180deg, rgb(255 246 244 / 0.96), rgb(255 252 250 / 0.98));
}

.home-refresh-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-refresh-purpose-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home-refresh-purpose-card {
  min-height: 124px;
}

.home-refresh-purpose-card strong {
  text-align: center;
}

.home-refresh-directory-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 24px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.home-refresh-directory-card:hover {
  transform: translateY(-2px);
  border-color: rgb(213 81 65 / 0.28);
  box-shadow: 0 16px 34px rgb(31 24 20 / 0.08);
}

.home-refresh-directory-icon {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #f7f1eb 0%, #efe4da 100%);
}

.home-refresh-directory-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-refresh-directory-copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.home-refresh-directory-copy small {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-refresh-directory-copy strong {
  color: #1d1613;
  font-size: 1.2rem;
  line-height: 1.3;
}

.home-refresh-directory-copy em {
  color: rgb(98 86 78 / 0.92);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.7;
}

.home-refresh-directory-arrow {
  color: rgb(131 112 101 / 0.9);
  font-size: 1.7rem;
}

.home-refresh-featured-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.88fr);
  gap: 1rem;
}

.home-refresh-featured-lead,
.home-refresh-featured-mini,
.home-refresh-guide-card-v2,
.home-refresh-latest-card-clean {
  color: inherit;
  text-decoration: none;
}

.home-refresh-featured-lead {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 36px rgb(31 24 20 / 0.07);
}

.home-refresh-featured-lead img,
.home-refresh-featured-lead .image-neutral-fallback {
  display: block;
  width: 100%;
  min-height: 360px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.home-refresh-featured-lead span {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 1.2rem 1.2rem 1.3rem;
}

.home-refresh-featured-lead small,
.home-refresh-featured-mini small,
.home-refresh-guide-card-v2 small,
.home-refresh-latest-card-clean small {
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.home-refresh-featured-lead strong {
  color: #1d1613;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.28;
}

.home-refresh-featured-lead em,
.home-refresh-featured-mini em,
.home-refresh-guide-card-v2 em,
.home-refresh-latest-card-clean em {
  color: rgb(97 85 77 / 0.92);
  font-style: normal;
  line-height: 1.7;
}

.home-refresh-featured-list {
  display: grid;
  gap: 0.9rem;
}

.home-refresh-featured-mini {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0.95rem;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(31 24 20 / 0.06);
}

.home-refresh-featured-mini img,
.home-refresh-featured-mini .image-neutral-fallback {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
}

.home-refresh-featured-mini span {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
  align-content: center;
  padding: 0.95rem 1rem 0.95rem 0;
}

.home-refresh-featured-mini strong,
.home-refresh-guide-card-v2 strong,
.home-refresh-latest-card-clean strong {
  color: #1d1613;
  font-size: 1.14rem;
  line-height: 1.45;
}

.home-refresh-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-refresh-guide-card-v2 {
  overflow: hidden;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(31 24 20 / 0.06);
}

.home-refresh-guide-card-v2 img,
.home-refresh-guide-card-v2 .image-neutral-fallback {
  display: block;
  width: 100%;
  min-height: 210px;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.home-refresh-guide-card-v2 span {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
  padding: 1rem 1rem 1.1rem;
}

.home-refresh-latest-grid-clean {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-refresh-latest-card-clean {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: 1rem 1rem 1.05rem;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(31 24 20 / 0.05);
}

.home-refresh-latest-card-clean span {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.home-refresh-hero-main-copy-light strong,
.home-refresh-rail-card-light strong,
.home-refresh-featured-lead strong,
.home-refresh-featured-mini strong,
.home-refresh-guide-card-v2 strong,
.home-refresh-latest-card-clean strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-refresh-hero-main-copy-light em,
.home-refresh-rail-card-light em,
.home-refresh-featured-lead em,
.home-refresh-featured-mini em,
.home-refresh-guide-card-v2 em,
.home-refresh-latest-card-clean em,
.home-refresh-directory-copy em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-refresh-latest-card-clean time {
  flex: 0 0 auto;
  color: rgb(123 108 99 / 0.95);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .home-refresh-hero-compact .home-refresh-hero-grid,
  .home-refresh-daily-strip,
  .home-refresh-featured-layout,
  .home-refresh-guides-grid,
  .home-refresh-latest-grid-clean,
  .home-refresh-directory-grid {
    grid-template-columns: 1fr;
  }

  .home-refresh-daily-links,
  .home-refresh-purpose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-refresh-featured-mini {
    grid-template-columns: 168px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .home-refresh-hero-compact,
  .home-refresh-daily-strip,
  .home-refresh-purpose,
  .home-refresh-directory,
  .home-refresh-featured,
  .home-refresh-guides-grid-wrap,
  .home-refresh-latest {
    width: min(100% - 1.1rem, 640px);
  }

  .home-refresh-hero-compact .home-refresh-hero-overlay,
  .home-refresh-daily-strip,
  .home-refresh-purpose,
  .home-refresh-directory,
  .home-refresh-featured,
  .home-refresh-guides-grid-wrap,
  .home-refresh-latest {
    padding: 1rem;
  }

  .home-refresh-hero-compact .home-refresh-hero-background,
  .home-refresh-hero-compact .home-refresh-hero-background.image-neutral-fallback {
    min-height: 760px;
  }

  .home-refresh-hero-compact .home-refresh-hero-overlay {
    background:
      linear-gradient(180deg, rgb(246 240 234 / 0.97) 0%, rgb(246 240 234 / 0.93) 52%, rgb(246 240 234 / 0.56) 100%);
  }

  .home-refresh-hero-compact h1 {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
    line-height: 1.1;
  }

  .home-refresh-hero-compact h1 em {
    margin-top: 0.02em;
    text-decoration-thickness: 0.18em;
    text-underline-offset: 0.05em;
  }

  .home-refresh-section-head-tight {
    align-items: start;
    flex-direction: column;
  }

  .home-refresh-section-head-tight a {
    align-self: flex-start;
  }

  .home-refresh-hero-main-light img,
  .home-refresh-hero-main-light .image-neutral-fallback {
    min-height: 280px;
  }

  .home-refresh-daily-strip {
    gap: 0.8rem;
  }

  .home-refresh-daily-label {
    padding: 0;
    margin: 0;
    background: transparent;
  }

  .home-refresh-daily-links,
  .home-refresh-purpose-grid,
  .home-refresh-hero-rail-compact,
  .home-refresh-latest-grid-clean {
    grid-template-columns: 1fr;
  }

  .home-refresh-daily-link {
    min-height: 0;
    padding: 0.9rem 0;
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.14);
  }

  .home-refresh-hero-main-light::after,
  .home-refresh-rail-card-light::after {
    display: none;
  }

  .home-refresh-hero-main-copy-light,
  .home-refresh-rail-card-light span {
    position: static;
    inset: auto;
    padding: 0.95rem 1rem 1rem;
    background: #fff;
  }

  .home-refresh-hero-main-copy-light small,
  .home-refresh-rail-card-light small {
    color: var(--brand);
  }

  .home-refresh-hero-main-copy-light strong,
  .home-refresh-rail-card-light strong {
    color: #1d1613;
    text-shadow: none;
  }

  .home-refresh-hero-main-copy-light em,
  .home-refresh-rail-card-light em {
    color: rgb(97 85 77 / 0.92);
  }

  .home-refresh-directory-card,
  .home-refresh-featured-mini {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .home-refresh-directory-card {
    padding-right: 0.85rem;
  }

  .home-refresh-directory-arrow {
    display: none;
  }

  .home-refresh-featured-mini img,
  .home-refresh-featured-mini .image-neutral-fallback {
    min-height: 108px;
  }

  .home-refresh-featured-mini span {
    padding: 0.85rem 0.9rem 0.85rem 0;
  }

  .home-refresh-latest-card-clean {
    flex-direction: column;
    gap: 0.6rem;
  }

  .home-refresh-latest-card-clean time {
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  .home-refresh-purpose-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-refresh-directory-card,
  .home-refresh-featured-mini {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .home-refresh-directory-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }

  .home-refresh-directory-copy strong,
  .home-refresh-featured-mini strong,
  .home-refresh-guide-card-v2 strong,
  .home-refresh-latest-card-clean strong {
    font-size: 1rem;
  }

  .home-refresh-directory-copy em,
  .home-refresh-featured-mini em,
  .home-refresh-guide-card-v2 em,
  .home-refresh-latest-card-clean em {
    font-size: 0.85rem;
    line-height: 1.55;
  }
}

/* 2026-08-28 homepage rebuild v10: isolate the top page from older homepage CSS */
.gateway-page-v10 > .home-v10-trust,
.gateway-page-v10 > .home-v10-hero,
.gateway-page-v10 > .home-v10-daily,
.gateway-page-v10 > .home-v10-purpose,
.gateway-page-v10 > .home-v10-directory,
.gateway-page-v10 > .home-v10-featured,
.gateway-page-v10 > .home-v10-guides,
.gateway-page-v10 > .home-v10-latest,
.gateway-page-v10 > .home-v10-policy {
  width: min(100% - 2rem, 1180px);
  margin: clamp(1rem, 2.8vw, 1.8rem) auto 0;
}

.gateway-page-v10 .home-v10-trust-inner,
.gateway-page-v10 .home-v10-purpose,
.gateway-page-v10 .home-v10-directory,
.gateway-page-v10 .home-v10-featured,
.gateway-page-v10 .home-v10-guides,
.gateway-page-v10 .home-v10-latest,
.gateway-page-v10 .home-v10-policy {
  border: 1px solid rgb(231 220 214 / 0.92);
  border-radius: 30px;
  background: linear-gradient(180deg, #fffdfa 0%, #fff8f3 100%);
  box-shadow: 0 18px 40px rgb(31 24 20 / 0.06);
}

.gateway-page-v10 .home-v10-trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.95rem 1.1rem;
}

.gateway-page-v10 .home-v10-trust-inner p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink);
}

.gateway-page-v10 .home-v10-trust-inner p::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.55rem;
  border-radius: 999px;
  background: var(--brand);
  vertical-align: middle;
}

.gateway-page-v10 .home-v10-hero-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(225 213 205 / 0.82);
  border-radius: 34px;
  background: #f5efe9;
  box-shadow: 0 24px 60px rgb(28 21 16 / 0.11);
}

.gateway-page-v10 .home-v10-hero-background,
.gateway-page-v10 .home-v10-hero-background img,
.gateway-page-v10 .home-v10-hero-background.image-neutral-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gateway-page-v10 .home-v10-hero-background img,
.gateway-page-v10 .home-v10-hero-background.image-neutral-fallback {
  min-height: 640px;
  object-fit: cover;
  object-position: center;
}

.gateway-page-v10 .home-v10-hero-overlay {
  position: relative;
  z-index: 1;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: linear-gradient(90deg, rgb(246 240 234 / 0.97) 0%, rgb(246 240 234 / 0.94) 38%, rgb(246 240 234 / 0.72) 60%, rgb(246 240 234 / 0.28) 100%);
}

.gateway-page-v10 .home-v10-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1.2rem;
  align-items: stretch;
}

.gateway-page-v10 .home-v10-hero-copy {
  display: grid;
  align-content: start;
  gap: 0.95rem;
  min-width: 0;
  padding: 0.35rem;
}

.gateway-page-v10 .home-v10-kicker {
  margin: 0;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.gateway-page-v10 .home-v10-hero h1 {
  margin: 0;
  color: #171210;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.gateway-page-v10 .home-v10-hero h1 em {
  color: #d61e38;
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: rgb(214 30 56 / 0.25);
  text-decoration-thickness: 0.19em;
  text-underline-offset: 0.08em;
  text-decoration-skip-ink: none;
}

.gateway-page-v10 .home-v10-hero-lead,
.gateway-page-v10 .home-v10-hero-note {
  margin: 0;
  max-width: 34rem;
  color: rgb(51 43 37 / 0.92);
}

.gateway-page-v10 .home-v10-hero-lead {
  font-size: clamp(1rem, 1.45vw, 1.1rem);
  line-height: 1.9;
}

.gateway-page-v10 .home-v10-hero-note {
  font-size: 0.93rem;
  line-height: 1.8;
}

.gateway-page-v10 .home-v10-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  max-width: 34rem;
  min-height: 60px;
  overflow: hidden;
  border: 1px solid rgb(225 211 201 / 0.92);
  border-radius: 18px;
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 16px 34px rgb(34 22 17 / 0.08);
}

.gateway-page-v10 .home-v10-search input {
  border: 0;
  padding: 0 1rem;
  color: #231a16;
  font-size: 0.97rem;
  background: transparent;
}

.gateway-page-v10 .home-v10-search input::placeholder {
  color: rgb(102 90 82 / 0.88);
}

.gateway-page-v10 .home-v10-search button {
  border: 0;
  border-left: 1px solid rgb(225 211 201 / 0.92);
  background: #171210;
  color: #fff;
  font-size: 1.05rem;
}

.gateway-page-v10 .home-v10-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.gateway-page-v10 .home-v10-search-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.36rem 0.74rem;
  border: 1px solid rgb(224 210 201 / 0.92);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  color: #352a25;
  font-size: 0.78rem;
  text-decoration: none;
}

.gateway-page-v10 .home-v10-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.gateway-page-v10 .home-v10-fact {
  display: grid;
  gap: 0.14rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgb(233 220 214 / 0.96);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.9);
}

.gateway-page-v10 .home-v10-fact small {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 800;
}

.gateway-page-v10 .home-v10-fact strong {
  color: #1d1613;
  font-size: 1.15rem;
  line-height: 1.2;
}

.gateway-page-v10 .home-v10-fact strong span {
  margin-left: 0.2rem;
  color: rgb(108 94 84 / 0.92);
  font-size: 0.74rem;
}

.gateway-page-v10 .home-v10-hero-side {
  display: grid;
  gap: 0.95rem;
}

.gateway-page-v10 .home-v10-hero-main,
.gateway-page-v10 .home-v10-rail-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(229 215 206 / 0.86);
  border-radius: 28px;
  box-shadow: 0 16px 36px rgb(25 18 13 / 0.12);
  color: #fff;
  text-decoration: none;
}

.gateway-page-v10 .home-v10-hero-main::after,
.gateway-page-v10 .home-v10-rail-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 64%;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(18 13 10 / 0.84) 100%);
}

.gateway-page-v10 .home-v10-hero-main img,
.gateway-page-v10 .home-v10-hero-main .image-neutral-fallback {
  display: block;
  width: 100%;
  min-height: 420px;
  object-fit: cover;
}

.gateway-page-v10 .home-v10-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
}

.gateway-page-v10 .home-v10-hero-main-copy,
.gateway-page-v10 .home-v10-rail-card span {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 0.34rem;
  padding: 1.15rem 1.2rem 1.25rem;
}

.gateway-page-v10 .home-v10-hero-main-copy small,
.gateway-page-v10 .home-v10-rail-card small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 26px;
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  background: rgb(36 23 17 / 0.52);
  border: 1px solid rgb(255 255 255 / 0.15);
  color: rgb(255 238 233);
  font-size: 0.72rem;
  font-weight: 900;
}

.gateway-page-v10 .home-v10-hero-main-copy strong,
.gateway-page-v10 .home-v10-rail-card strong {
  color: #fffdfa;
  font-size: clamp(1.15rem, 1.8vw, 1.9rem);
  line-height: 1.28;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.24);
}

.gateway-page-v10 .home-v10-hero-main-copy em,
.gateway-page-v10 .home-v10-rail-card em {
  color: rgb(255 242 235 / 0.9);
  font-size: 0.88rem;
  line-height: 1.6;
  font-style: normal;
}

.gateway-page-v10 .home-v10-hero-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
}

.gateway-page-v10 .home-v10-rail-card img,
.gateway-page-v10 .home-v10-rail-card .image-neutral-fallback {
  display: block;
  width: 100%;
  min-height: 204px;
  object-fit: cover;
}

.gateway-page-v10 .home-v10-daily {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgb(186 33 30 / 0.94);
  border-radius: 28px;
  background: linear-gradient(90deg, #cf2f2a 0%, #b91f1f 100%);
  box-shadow: 0 18px 40px rgb(31 24 20 / 0.08);
  color: #fff;
}

.gateway-page-v10 .home-v10-daily-label {
  display: grid;
  align-content: center;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, rgb(155 22 20 / 0.95), rgb(121 14 15 / 0.98));
}

.gateway-page-v10 .home-v10-daily-label small {
  color: rgb(255 215 207 / 0.92);
  font-size: 0.74rem;
  font-weight: 900;
}

.gateway-page-v10 .home-v10-daily-label strong {
  font-size: 1.24rem;
  line-height: 1.2;
}

.gateway-page-v10 .home-v10-daily-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gateway-page-v10 .home-v10-daily-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.7rem;
  min-height: 104px;
  padding: 0.95rem 1rem;
  border-left: 1px solid rgb(255 255 255 / 0.16);
  color: inherit;
  text-decoration: none;
}

.gateway-page-v10 .home-v10-daily-link b {
  color: rgb(255 220 214 / 0.94);
  font-size: 1.05rem;
  line-height: 1;
}

.gateway-page-v10 .home-v10-daily-link span {
  display: grid;
  gap: 0.18rem;
}

.gateway-page-v10 .home-v10-daily-link small {
  color: rgb(255 214 208 / 0.92);
  font-size: 0.7rem;
  font-weight: 900;
}

.gateway-page-v10 .home-v10-daily-link strong {
  color: #fffdfb;
  font-size: 0.95rem;
  line-height: 1.42;
}

.gateway-page-v10 .home-v10-daily-link em {
  color: rgb(255 238 233 / 0.8);
  font-size: 0.77rem;
  line-height: 1.5;
  font-style: normal;
}

.gateway-page-v10 .home-v10-purpose,
.gateway-page-v10 .home-v10-directory,
.gateway-page-v10 .home-v10-featured,
.gateway-page-v10 .home-v10-guides,
.gateway-page-v10 .home-v10-latest {
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
}

.gateway-page-v10 .home-v10-purpose {
  background: linear-gradient(180deg, rgb(255 246 244 / 0.96), rgb(255 252 250 / 0.98));
}

.gateway-page-v10 .home-v10-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.gateway-page-v10 .home-v10-section-head h2 {
  margin: 0;
  color: #1d1613;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.gateway-page-v10 .home-v10-section-head a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}

.gateway-page-v10 .home-v10-section-note {
  margin: 0.45rem 0 0;
  color: rgb(91 79 71 / 0.92);
  font-size: 0.95rem;
  line-height: 1.75;
}

.gateway-page-v10 .home-v10-purpose-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.gateway-page-v10 .home-v10-purpose-card {
  display: grid;
  justify-items: center;
  gap: 0.58rem;
  min-height: 124px;
  padding: 0.9rem 0.6rem;
  border: 1px solid rgb(238 225 220 / 0.96);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.gateway-page-v10 .home-v10-purpose-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #fff3ef 100%);
  border: 1px solid rgb(251 223 217 / 0.96);
}

.gateway-page-v10 .home-v10-purpose-icon img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.gateway-page-v10 .home-v10-purpose-card strong {
  font-size: 0.82rem;
  line-height: 1.42;
}

.gateway-page-v10 .home-v10-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.gateway-page-v10 .home-v10-directory-card {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 24px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.gateway-page-v10 .home-v10-directory-icon {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #f7f1eb 0%, #efe4da 100%);
}

.gateway-page-v10 .home-v10-directory-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gateway-page-v10 .home-v10-directory-copy {
  display: grid;
  gap: 0.28rem;
}

.gateway-page-v10 .home-v10-directory-copy small {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.gateway-page-v10 .home-v10-directory-copy strong {
  color: #1d1613;
  font-size: 1.2rem;
  line-height: 1.3;
}

.gateway-page-v10 .home-v10-directory-copy em {
  color: rgb(98 86 78 / 0.92);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.7;
}

.gateway-page-v10 .home-v10-directory-arrow {
  color: rgb(131 112 101 / 0.9);
  font-size: 1.7rem;
}

.gateway-page-v10 .home-v10-featured-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.88fr);
  gap: 1rem;
}

.gateway-page-v10 .home-v10-featured-lead,
.gateway-page-v10 .home-v10-featured-mini,
.gateway-page-v10 .home-v10-guide-card,
.gateway-page-v10 .home-v10-latest-card {
  color: inherit;
  text-decoration: none;
}

.gateway-page-v10 .home-v10-featured-lead {
  display: grid;
  overflow: hidden;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 36px rgb(31 24 20 / 0.07);
}

.gateway-page-v10 .home-v10-featured-lead img,
.gateway-page-v10 .home-v10-featured-lead .image-neutral-fallback {
  display: block;
  width: 100%;
  min-height: 360px;
  object-fit: cover;
}

.gateway-page-v10 .home-v10-featured-lead span {
  display: grid;
  gap: 0.45rem;
  padding: 1.2rem 1.2rem 1.3rem;
}

.gateway-page-v10 .home-v10-featured-list {
  display: grid;
  gap: 0.9rem;
}

.gateway-page-v10 .home-v10-featured-mini {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0.95rem;
  overflow: hidden;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(31 24 20 / 0.06);
}

.gateway-page-v10 .home-v10-featured-mini img,
.gateway-page-v10 .home-v10-featured-mini .image-neutral-fallback {
  display: block;
  width: 100%;
  min-height: 132px;
  object-fit: cover;
}

.gateway-page-v10 .home-v10-featured-mini span,
.gateway-page-v10 .home-v10-guide-card span,
.gateway-page-v10 .home-v10-latest-card span {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.gateway-page-v10 .home-v10-featured-mini span {
  align-content: center;
  padding: 0.95rem 1rem 0.95rem 0;
}

.gateway-page-v10 .home-v10-featured-lead small,
.gateway-page-v10 .home-v10-featured-mini small,
.gateway-page-v10 .home-v10-guide-card small,
.gateway-page-v10 .home-v10-latest-card small {
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.gateway-page-v10 .home-v10-featured-lead strong {
  color: #1d1613;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.28;
}

.gateway-page-v10 .home-v10-featured-mini strong,
.gateway-page-v10 .home-v10-guide-card strong,
.gateway-page-v10 .home-v10-latest-card strong {
  color: #1d1613;
  font-size: 1.08rem;
  line-height: 1.45;
}

.gateway-page-v10 .home-v10-featured-lead em,
.gateway-page-v10 .home-v10-featured-mini em,
.gateway-page-v10 .home-v10-guide-card em,
.gateway-page-v10 .home-v10-latest-card em {
  color: rgb(97 85 77 / 0.92);
  font-style: normal;
  line-height: 1.65;
}

.gateway-page-v10 .home-v10-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gateway-page-v10 .home-v10-guide-card {
  overflow: hidden;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(31 24 20 / 0.06);
}

.gateway-page-v10 .home-v10-guide-card img,
.gateway-page-v10 .home-v10-guide-card .image-neutral-fallback {
  display: block;
  width: 100%;
  min-height: 210px;
  object-fit: cover;
}

.gateway-page-v10 .home-v10-guide-card span {
  padding: 1rem 1rem 1.1rem;
}

.gateway-page-v10 .home-v10-latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.gateway-page-v10 .home-v10-latest-card {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 1.05rem;
  border: 1px solid rgb(232 220 212 / 0.94);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(31 24 20 / 0.05);
}

.gateway-page-v10 .home-v10-latest-card time {
  flex: 0 0 auto;
  color: rgb(123 108 99 / 0.95);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.gateway-page-v10 .home-v10-policy {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
}

.gateway-page-v10 .home-v10-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: center;
}

.gateway-page-v10 .home-v10-policy-grid p,
.gateway-page-v10 .home-v10-policy-grid a {
  margin: 0;
  color: var(--ink);
  font-size: 0.83rem;
  line-height: 1.5;
  text-decoration: none;
}

.gateway-page-v10 .home-v10-policy-grid a {
  justify-self: end;
  color: var(--brand);
  font-weight: 800;
}

.gateway-page-v10 .home-v10-featured-lead strong,
.gateway-page-v10 .home-v10-featured-mini strong,
.gateway-page-v10 .home-v10-guide-card strong,
.gateway-page-v10 .home-v10-latest-card strong,
.gateway-page-v10 .home-v10-directory-copy em,
.gateway-page-v10 .home-v10-featured-lead em,
.gateway-page-v10 .home-v10-featured-mini em,
.gateway-page-v10 .home-v10-guide-card em,
.gateway-page-v10 .home-v10-latest-card em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1100px) {
  .gateway-page-v10 .home-v10-hero-grid,
  .gateway-page-v10 .home-v10-daily,
  .gateway-page-v10 .home-v10-featured-layout,
  .gateway-page-v10 .home-v10-guides-grid,
  .gateway-page-v10 .home-v10-latest-grid,
  .gateway-page-v10 .home-v10-directory-grid {
    grid-template-columns: 1fr;
  }

  .gateway-page-v10 .home-v10-daily-links,
  .gateway-page-v10 .home-v10-purpose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .gateway-page-v10 > .home-v10-trust,
  .gateway-page-v10 > .home-v10-hero,
  .gateway-page-v10 > .home-v10-daily,
  .gateway-page-v10 > .home-v10-purpose,
  .gateway-page-v10 > .home-v10-directory,
  .gateway-page-v10 > .home-v10-featured,
  .gateway-page-v10 > .home-v10-guides,
  .gateway-page-v10 > .home-v10-latest,
  .gateway-page-v10 > .home-v10-policy {
    width: min(100% - 1.1rem, 640px);
  }

  .gateway-page-v10 .home-v10-hero-overlay,
  .gateway-page-v10 .home-v10-purpose,
  .gateway-page-v10 .home-v10-directory,
  .gateway-page-v10 .home-v10-featured,
  .gateway-page-v10 .home-v10-guides,
  .gateway-page-v10 .home-v10-latest,
  .gateway-page-v10 .home-v10-policy {
    padding: 1rem;
  }

  .gateway-page-v10 .home-v10-hero-background img,
  .gateway-page-v10 .home-v10-hero-background.image-neutral-fallback {
    min-height: 760px;
  }

  .gateway-page-v10 .home-v10-hero-overlay {
    background: linear-gradient(180deg, rgb(246 240 234 / 0.98) 0%, rgb(246 240 234 / 0.93) 56%, rgb(246 240 234 / 0.58) 100%);
  }

  .gateway-page-v10 .home-v10-hero h1 {
    font-size: clamp(2.3rem, 12vw, 3.3rem);
  }

  .gateway-page-v10 .home-v10-facts,
  .gateway-page-v10 .home-v10-hero-rail,
  .gateway-page-v10 .home-v10-daily-links,
  .gateway-page-v10 .home-v10-purpose-grid,
  .gateway-page-v10 .home-v10-latest-grid,
  .gateway-page-v10 .home-v10-guides-grid,
  .gateway-page-v10 .home-v10-policy-grid {
    grid-template-columns: 1fr;
  }

  .gateway-page-v10 .home-v10-daily-label {
    background: transparent;
    padding: 0 0 0.5rem;
  }

  .gateway-page-v10 .home-v10-daily-link {
    min-height: 0;
    padding: 0.9rem 0;
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 0.14);
  }

  .gateway-page-v10 .home-v10-hero-main::after,
  .gateway-page-v10 .home-v10-rail-card::after {
    display: none;
  }

  .gateway-page-v10 .home-v10-hero-main-copy,
  .gateway-page-v10 .home-v10-rail-card span {
    position: static;
    padding: 0.95rem 1rem 1rem;
    background: #fff;
  }

  .gateway-page-v10 .home-v10-hero-main-copy small,
  .gateway-page-v10 .home-v10-rail-card small {
    color: var(--brand);
    background: rgb(200 16 46 / 0.08);
    border-color: transparent;
  }

  .gateway-page-v10 .home-v10-hero-main-copy strong,
  .gateway-page-v10 .home-v10-rail-card strong {
    color: #1d1613;
    text-shadow: none;
  }

  .gateway-page-v10 .home-v10-hero-main-copy em,
  .gateway-page-v10 .home-v10-rail-card em {
    color: rgb(97 85 77 / 0.92);
  }

  .gateway-page-v10 .home-v10-directory-card,
  .gateway-page-v10 .home-v10-featured-mini {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .gateway-page-v10 .home-v10-directory-arrow {
    display: none;
  }

  .gateway-page-v10 .home-v10-featured-mini img,
  .gateway-page-v10 .home-v10-featured-mini .image-neutral-fallback {
    min-height: 108px;
  }

  .gateway-page-v10 .home-v10-featured-mini span {
    padding: 0.85rem 0.9rem 0.85rem 0;
  }

  .gateway-page-v10 .home-v10-latest-card {
    flex-direction: column;
    gap: 0.6rem;
  }

  .gateway-page-v10 .home-v10-policy-grid a {
    justify-self: start;
  }
}

@media (max-width: 420px) {
  .gateway-page-v10 .home-v10-purpose-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gateway-page-v10 .home-v10-directory-card,
  .gateway-page-v10 .home-v10-featured-mini {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .gateway-page-v10 .home-v10-directory-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }
}

/* 2026-08-28 homepage rebuild v11: magazine-style top based on the review HTML */
.gateway-page-v11 {
  background: #fff;
  color: #17181c;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

body:has(.gateway-page-v11) .site-guide-banners {
  display: none;
}

.gateway-page-v11 > .home-v10-trust,
.gateway-page-v11 > .home-v10-hero,
.gateway-page-v11 > .home-v10-daily,
.gateway-page-v11 > .home-v10-purpose,
.gateway-page-v11 > .home-v10-directory,
.gateway-page-v11 > .home-v10-featured,
.gateway-page-v11 > .home-v10-guides,
.gateway-page-v11 > .home-v10-latest,
.gateway-page-v11 > .home-v10-policy {
  display: none;
}

.gateway-page-v11 > .home-v11-hero,
.gateway-page-v11 > .home-v11-proof,
.gateway-page-v11 > .home-v11-layout,
.gateway-page-v11 > .home-v11-line-sticker,
.gateway-page-v11 > .home-v11-policy,
.gateway-page-v11 > .home-v11-category-shelf {
  width: min(100% - 52px, 1200px);
  margin-inline: auto;
}


/* 2026-09-12 秋冬のトップバナー。画像内に見出しがあるため、HTML側では重ね文字を置かない。 */
.gateway-page-v11 > .home-season-banner {
  width: min(100% - 32px, 980px);
  margin: 0.55rem auto 0;
}

.gateway-page-v11 .home-season-banner-frame {
  position: relative;
  overflow: hidden;
  padding: 0.45rem;
  border: 1px solid #e3d8ca;
  border-radius: clamp(12px, 1.6vw, 18px);
  background: linear-gradient(90deg, #fbf8f1, #f7f1e8);
  box-shadow: 0 10px 22px rgb(61 43 28 / 0.08);
}

.gateway-page-v11 .home-season-banner-frame::before,
.gateway-page-v11 .home-season-banner-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(18px, 4vw, 42px);
  pointer-events: none;
}

.gateway-page-v11 .home-season-banner-frame::before {
  left: 0;
  background: linear-gradient(90deg, #fbf8f1 0%, rgb(251 248 241 / 0));
}

.gateway-page-v11 .home-season-banner-frame::after {
  right: 0;
  background: linear-gradient(270deg, #f7f1e8 0%, rgb(247 241 232 / 0));
}

.gateway-page-v11 .home-season-banner-track {
  display: flex;
  width: max-content;
  gap: 0.55rem;
  animation: home-season-banner-marquee 46s linear infinite;
  will-change: transform;
}

.gateway-page-v11 .home-season-banner-slide {
  position: relative;
  display: block;
  flex: 0 0 clamp(230px, 30vw, 360px);
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border: 1px solid rgb(227 216 202 / 0.82);
  border-radius: clamp(10px, 1.35vw, 16px);
  background: #f7f1e8;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 7px 16px rgb(61 43 28 / 0.08);
}

.gateway-page-v11 .home-season-banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.gateway-page-v11 .home-season-banner-frame:hover .home-season-banner-track,
.gateway-page-v11 .home-season-banner-frame:focus-within .home-season-banner-track {
  animation-play-state: paused;
}

@keyframes home-season-banner-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - 0.275rem), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .gateway-page-v11 .home-season-banner-track {
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .gateway-page-v11 .home-season-banner-slide {
    scroll-snap-align: start;
  }
}

@media (max-width: 720px) {
  .gateway-page-v11 > .home-season-banner {
    width: min(100% - 20px, 420px);
    margin-top: 0.45rem;
  }

  .gateway-page-v11 .home-season-banner-frame {
    padding: 0.35rem;
  }

  .gateway-page-v11 .home-season-banner-track {
    gap: 0.45rem;
    animation-duration: 40s;
  }

  .gateway-page-v11 .home-season-banner-slide {
    flex-basis: clamp(205px, 72vw, 280px);
  }

}


.gateway-page-v11 .home-v11-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding: 56px 0 46px;
  background:
    linear-gradient(90deg, rgb(250 248 244 / 0.94) 0%, rgb(250 248 244 / 0.92) 48%, rgb(250 248 244 / 0.82) 100%),
    url("/home-v11-comparison-collage.png") center/cover no-repeat;
  text-align: center;
}

.gateway-page-v11 .home-v11-pattern {
  position: absolute;
  inset: -28px 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(64px, 1fr));
  gap: 30px;
  width: min(100% - 48px, 1120px);
  margin-inline: auto;
  opacity: 0.1;
  pointer-events: none;
  filter: grayscale(1) contrast(1.1);
}

.gateway-page-v11 .home-v11-pattern img {
  width: 86px;
  height: 86px;
  align-self: center;
  justify-self: center;
  object-fit: contain;
}

.gateway-page-v11 .home-v11-hero-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 52px, 760px);
  margin-inline: auto;
}

.gateway-page-v11 .home-v11-hero-cap {
  margin: 0 0 12px;
  color: #c71922;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.gateway-page-v11 .home-v11-logo-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}

.gateway-page-v11 .home-v11-logo-lockup span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #dd2118;
  color: #fff;
  font-size: 1.72rem;
  font-weight: 900;
  line-height: 1;
}

.gateway-page-v11 .home-v11-logo-lockup h1 {
  margin: 0;
  color: #17181c;
  font-size: 3.05rem;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}

.gateway-page-v11 .home-v11-hero-sub {
  margin: 0 auto 1.55rem;
  max-width: 48rem;
  color: #38322f;
  font-size: 0.95rem;
  line-height: 1.8;
}

.gateway-page-v11 .home-v11-hero-sub em {
  color: #17181c;
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(transparent 68%, rgb(255 212 0 / 0.72) 68%);
}

.gateway-page-v11 .home-v11-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  min-height: 58px;
  overflow: hidden;
  border: 3px solid #17181c;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 0 rgb(23 24 28 / 0.1);
}

.gateway-page-v11 .home-v11-search input {
  min-width: 0;
  border: 0;
  padding: 0 1.05rem;
  background: transparent;
  color: #17181c;
  font: inherit;
  font-size: 1rem;
}

.gateway-page-v11 .home-v11-search button {
  border: 0;
  background: #dd2118;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
}

.gateway-page-v11 .home-v11-search-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.gateway-page-v11 .home-v11-search-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.32rem 0.86rem;
  border: 1px solid #e2e4e8;
  border-radius: 999px;
  background: #fff;
  color: #17181c;
  font-size: 0.82rem;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-proof {
  width: 100%;
  max-width: none;
  background: #151515;
  color: #fff;
}

.gateway-page-v11 .home-v11-proof > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 2rem;
  width: min(100% - 52px, 1200px);
  margin-inline: auto;
  padding: 0.75rem 0;
}

.gateway-page-v11 .home-v11-proof p {
  margin: 0;
  color: rgb(255 255 255 / 0.84);
  font-size: 0.82rem;
}

.gateway-page-v11 .home-v11-proof b {
  margin-right: 0.25rem;
  color: #ffd400;
  font-size: 1.1rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-proof span {
  margin-right: 0.25rem;
  color: #ffd400;
  font-size: 0.78rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-proof-note {
  color: rgb(255 255 255 / 0.68);
}

.gateway-page-v11 .home-v11-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 276px;
  gap: 40px;
  margin-top: 36px;
}

.gateway-page-v11 .home-v11-section {
  margin-bottom: 46px;
}

.gateway-page-v11 .home-v11-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.gateway-page-v11 .home-v11-section-head h2,
.gateway-page-v11 .home-v11-duels h2,
.gateway-page-v11 .home-v11-rail-box > h2 {
  position: relative;
  isolation: isolate;
  width: fit-content;
  margin: 0;
  color: #17181c;
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
}

.gateway-page-v11 .home-v11-section-head h2::before {
  content: none;
}

.gateway-page-v11 .home-v11-section-head h2::after,
.gateway-page-v11 .home-v11-duels h2::after,
.gateway-page-v11 .home-v11-rail-box > h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  z-index: -1;
  height: 0.46em;
  border-radius: 999px;
  background: rgb(255 212 0 / 0.64);
}

.gateway-page-v11 .home-v11-section-head p,
.gateway-page-v11 .home-v11-duels p {
  margin: 0.24rem 0 0;
  color: #70747e;
  font-size: 0.86rem;
  line-height: 1.65;
}

.gateway-page-v11 .home-v11-section-head a {
  flex: 0 0 auto;
  color: #c71922;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-feature-card {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
  background: #dfe3e8;
  color: #fff;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-feature-card img,
.gateway-page-v11 .home-v11-feature-card .image-neutral-fallback {
  width: 100%;
  min-height: 360px;
  object-fit: cover;
}

.gateway-page-v11 .home-v11-feature-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 66%;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(15 16 18 / 0.82) 100%);
}

.gateway-page-v11 .home-v11-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0.45rem 1rem;
  background: #dd2118;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-feature-copy {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: 0.45rem;
  max-width: 82%;
  padding: 1.55rem 1.7rem;
}

.gateway-page-v11 .home-v11-feature-copy small,
.gateway-page-v11 .home-v11-card-body small,
.gateway-page-v11 .home-v11-guide-card small,
.gateway-page-v11 .home-v11-update-list small {
  width: fit-content;
  padding: 0.16rem 0.62rem;
  border-radius: 4px;
  background: #fde7e5;
  color: #b31a13;
  font-size: 0.68rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-feature-copy strong {
  color: #fff;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.45;
}

.gateway-page-v11 .home-v11-feature-copy em {
  color: rgb(255 255 255 / 0.86);
  font-style: normal;
  line-height: 1.7;
}

.gateway-page-v11 .home-v11-card-grid,
.gateway-page-v11 .home-v11-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gateway-page-v11 .home-v11-article-card,
.gateway-page-v11 .home-v11-guide-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.gateway-page-v11 .home-v11-article-card:hover,
.gateway-page-v11 .home-v11-guide-card:hover {
  transform: translateY(-2px);
  border-color: #17181c;
  box-shadow: 0 12px 24px rgb(23 24 28 / 0.08);
}

.gateway-page-v11 .home-v11-card-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #edf0f4;
}

.gateway-page-v11 .home-v11-card-image img,
.gateway-page-v11 .home-v11-card-image .image-neutral-fallback,
.gateway-page-v11 .home-v11-guide-card img,
.gateway-page-v11 .home-v11-guide-card .image-neutral-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gateway-page-v11 .home-v11-card-image b {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #17181c;
  color: #ffd400;
  font-size: 0.88rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-card-body,
.gateway-page-v11 .home-v11-guide-card span {
  display: grid;
  gap: 0.42rem;
  padding: 0.9rem 1rem 1rem;
}

.gateway-page-v11 .home-v11-card-body strong,
.gateway-page-v11 .home-v11-guide-card strong,
.gateway-page-v11 .home-v11-update-list strong {
  color: #17181c;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5;
}

.gateway-page-v11 .home-v11-card-body em,
.gateway-page-v11 .home-v11-guide-card em,
.gateway-page-v11 .home-v11-update-list em {
  color: #70747e;
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.65;
}

.gateway-page-v11 .home-v11-card-meta {
  margin-top: 0.3rem;
  padding-top: 0.55rem;
  border-top: 1px solid #e2e4e8;
  color: #1b7a4b;
  font-size: 0.72rem;
  font-weight: 800;
}

.gateway-page-v11 .home-v11-purpose-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.gateway-page-v11 .home-v11-purpose-card {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  min-height: 118px;
  padding: 0.85rem 0.5rem;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
  background: #fff;
  color: #17181c;
  text-align: center;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-purpose-card img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: saturate(0.85);
}

.gateway-page-v11 .home-v11-purpose-card strong {
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.45;
}

.gateway-page-v11 .home-v11-guide-card img,
.gateway-page-v11 .home-v11-guide-card .image-neutral-fallback {
  aspect-ratio: 16 / 10;
  min-height: 0;
}

.gateway-page-v11 .home-v11-duels {
  margin-bottom: 46px;
  padding: 1.45rem;
  border-radius: 8px;
  background: #fff6c8;
}

.gateway-page-v11 .home-v11-duel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.gateway-page-v11 .home-v11-duel-grid a {
  display: grid;
  gap: 0.45rem;
  min-height: 118px;
  padding: 0.95rem;
  border: 2px solid #17181c;
  border-radius: 8px;
  background: #fff;
  color: #17181c;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-duel-grid span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.45;
}

.gateway-page-v11 .home-v11-duel-grid i {
  padding: 0.06rem 0.34rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.62rem;
  font-style: normal;
  line-height: 1.3;
}

.gateway-page-v11 .home-v11-duel-grid small {
  color: #5a4c00;
  font-size: 0.76rem;
  line-height: 1.55;
}

.gateway-page-v11 .home-v11-update-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
  overflow: hidden;
}

.gateway-page-v11 .home-v11-update-list li + li {
  border-top: 1px solid #e2e4e8;
}

.gateway-page-v11 .home-v11-update-list a {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0.85rem 1rem;
  color: inherit;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-update-list time {
  color: #1b7a4b;
  font-size: 0.82rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-update-list span {
  display: grid;
  gap: 0.25rem;
}

.gateway-page-v11 .home-v11-rail {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: start;
}

.gateway-page-v11 .home-v11-rail-box {
  overflow: hidden;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
  background: #fff;
}

.gateway-page-v11 .home-v11-rail-box > h2 {
  padding: 0.82rem 1rem;
  border-bottom: 1px solid #e2e4e8;
  background: #f4f5f7;
  font-size: 0.96rem;
}

.gateway-page-v11 .home-v11-category-list a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid #e2e4e8;
  color: inherit;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-category-list a:last-child {
  border-bottom: 0;
}

.gateway-page-v11 .home-v11-category-list img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: saturate(0.85);
}

.gateway-page-v11 .home-v11-category-list span {
  min-width: 0;
}

.gateway-page-v11 .home-v11-category-list strong {
  display: block;
  color: #17181c;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.4;
}

.gateway-page-v11 .home-v11-category-list small {
  display: block;
  overflow: hidden;
  color: #8a8e96;
  font-size: 0.73rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-category-list b {
  color: #9ba0a8;
  font-size: 1.25rem;
}

.gateway-page-v11 .home-v11-verify {
  padding: 1rem;
  border-radius: 8px;
  background: #17181c;
  color: #fff;
}

.gateway-page-v11 .home-v11-verify h2 {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.25rem;
  font-size: 0.96rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-verify h2 span {
  color: #9dbbd8;
  font-size: 0.72rem;
}

.gateway-page-v11 .home-v11-verify p {
  margin: 0 0 0.75rem;
  color: #b7cce0;
  font-size: 0.76rem;
  line-height: 1.6;
}

.gateway-page-v11 .home-v11-verify ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.gateway-page-v11 .home-v11-verify li {
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.gateway-page-v11 .home-v11-verify li a {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0;
  color: inherit;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-verify li span {
  color: #9dbbd8;
  font-size: 0.68rem;
  font-weight: 800;
}

.gateway-page-v11 .home-v11-verify li strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-verify li em {
  color: #7fd8a8;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 800;
}

.gateway-page-v11 .home-v11-verify-more {
  display: inline-flex;
  margin-top: 0.75rem;
  color: #ffd400;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-compact-links div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem;
}

.gateway-page-v11 .home-v11-compact-links a {
  display: inline-flex;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #f4f5f7;
  color: #4a4d55;
  font-size: 0.76rem;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-quick-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem 0.85rem 0.65rem;
}

.gateway-page-v11 .home-v11-rail-link-groups {
  display: grid;
  gap: 0.9rem;
  padding: 0 0.85rem 0.9rem;
}

.gateway-page-v11 .home-v11-rail-link-groups section {
  display: grid;
  gap: 0.32rem;
}

.gateway-page-v11 .home-v11-rail-link-groups h3 {
  margin: 0.1rem 0 0.2rem;
  color: #17181c;
  font-size: 0.78rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-rail-link-groups a {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-height: 38px;
  padding: 0.45rem 0;
  border-top: 1px solid #eee6dd;
  border-radius: 0;
  background: transparent;
}

.gateway-page-v11 .home-v11-rail-link-groups a span {
  color: #c71922;
  font-size: 0.66rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-rail-link-groups a strong {
  overflow: hidden;
  color: #17181c;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-policy {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0;
  padding: 2rem 0;
  border-top: 1px solid #e2e4e8;
}

.gateway-page-v11 .home-v11-policy p {
  margin: 0;
}

.gateway-page-v11 .home-v11-policy strong {
  display: block;
  color: #17181c;
  font-size: 0.88rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-policy span {
  display: block;
  margin-top: 0.3rem;
  color: #70747e;
  font-size: 0.76rem;
  line-height: 1.65;
}

.gateway-page-v11 .home-v11-policy a {
  align-self: center;
  justify-self: end;
  color: #dd2118;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-category-shelf {
  margin-top: 0;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid #e2e4e8;
}

.gateway-page-v11 .home-v11-category-shelf > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.gateway-page-v11 .home-v11-category-shelf a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid #e2e4e8;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-category-shelf img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.gateway-page-v11 .home-v11-category-shelf small {
  display: block;
  color: #dd2118;
  font-size: 0.7rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-category-shelf strong {
  display: block;
  margin-top: 0.15rem;
  color: #17181c;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.35;
}

.gateway-page-v11 .home-v11-card-body strong,
.gateway-page-v11 .home-v11-card-body em,
.gateway-page-v11 .home-v11-guide-card strong,
.gateway-page-v11 .home-v11-guide-card em,
.gateway-page-v11 .home-v11-update-list strong,
.gateway-page-v11 .home-v11-update-list em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.gateway-page-v11 .home-v11-card-body strong,
.gateway-page-v11 .home-v11-guide-card strong,
.gateway-page-v11 .home-v11-update-list strong {
  -webkit-line-clamp: 2;
}

.gateway-page-v11 .home-v11-card-body em,
.gateway-page-v11 .home-v11-guide-card em,
.gateway-page-v11 .home-v11-update-list em {
  -webkit-line-clamp: 2;
}

@media (max-width: 1060px) {
  .gateway-page-v11 .home-v11-layout {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-rail {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .gateway-page-v11 .home-v11-card-grid,
  .gateway-page-v11 .home-v11-guide-grid,
  .gateway-page-v11 .home-v11-purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gateway-page-v11 .home-v11-duel-grid,
  .gateway-page-v11 .home-v11-category-shelf > div,
  .gateway-page-v11 .home-v11-policy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .gateway-page-v11 > .home-v11-layout,
  .gateway-page-v11 > .home-v11-policy,
  .gateway-page-v11 > .home-v11-category-shelf {
    width: min(100% - 32px, 640px);
  }

  .gateway-page-v11 .home-v11-hero {
    padding: 2.2rem 0 2rem;
  }

  .gateway-page-v11 .home-v11-pattern {
    grid-template-columns: repeat(4, minmax(54px, 1fr));
    gap: 1.4rem;
    width: min(100% - 28px, 520px);
  }

  .gateway-page-v11 .home-v11-logo-lockup {
    flex-direction: column;
    gap: 0.65rem;
  }

  .gateway-page-v11 .home-v11-logo-lockup h1 {
    font-size: 2.35rem;
  }

  .gateway-page-v11 .home-v11-search {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-search input {
    min-height: 54px;
  }

  .gateway-page-v11 .home-v11-search button {
    min-height: 46px;
  }

  .gateway-page-v11 .home-v11-proof > div {
    width: min(100% - 32px, 640px);
    justify-content: flex-start;
  }

  .gateway-page-v11 .home-v11-section-head {
    display: grid;
    align-items: start;
  }

  .gateway-page-v11 .home-v11-feature-copy {
    max-width: 100%;
    padding: 1rem;
  }

  .gateway-page-v11 .home-v11-feature-card img,
  .gateway-page-v11 .home-v11-feature-card .image-neutral-fallback {
    min-height: 280px;
  }

  .gateway-page-v11 .home-v11-card-grid,
  .gateway-page-v11 .home-v11-guide-grid,
  .gateway-page-v11 .home-v11-purpose-grid,
  .gateway-page-v11 .home-v11-duel-grid,
  .gateway-page-v11 .home-v11-rail,
  .gateway-page-v11 .home-v11-category-shelf > div,
  .gateway-page-v11 .home-v11-policy {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-policy a {
    justify-self: start;
  }
}

/* 2026-08-28 Stage03 trust polish:
   HTML確認版の「3秒で信頼できる」構造を実サイトへ移植するための最終上書き。 */
.gateway-page-v11 > .home-v11-hero {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.gateway-page-v11 .home-v11-hero {
  padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(2.35rem, 4vw, 4rem);
  background:
    linear-gradient(90deg, rgb(250 246 240 / 0.96) 0%, rgb(250 246 240 / 0.92) 46%, rgb(250 246 240 / 0.38) 78%, rgb(250 246 240 / 0.18) 100%),
    url("/home-stage/stage01-hero-comparison.png") center / cover no-repeat;
  text-align: left;
}

.gateway-page-v11 .home-v11-pattern {
  display: none;
}

.gateway-page-v11 .home-v11-hero-inner {
  width: min(100% - 52px, 1200px);
  max-width: none;
}

.gateway-page-v11 .home-v11-hero-cap {
  margin-bottom: 0.9rem;
  color: #c71922;
  font-size: clamp(0.82rem, 1.3vw, 0.98rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.gateway-page-v11 .home-v11-logo-lockup {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(0.7rem, 1.5vw, 1rem);
  margin-bottom: 1.15rem;
}

.gateway-page-v11 .home-v11-logo-lockup span {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin-top: 0.25rem;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgb(199 25 34 / 0.16);
}

.gateway-page-v11 .home-v11-logo-lockup h1 {
  max-width: 9.8em;
  color: #171412;
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.gateway-page-v11 .home-v11-logo-lockup h1 em {
  position: relative;
  z-index: 1;
  color: #d7202a;
  font-style: normal;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-logo-lockup h1 em::after {
  content: "";
  position: absolute;
  left: 0.04em;
  right: 0.02em;
  bottom: 0.08em;
  z-index: -1;
  height: 0.23em;
  border-radius: 999px;
  background: rgb(255 216 77 / 0.78);
}

.gateway-page-v11 .home-v11-hero-sub {
  max-width: 44rem;
  margin: 0 0 1.2rem;
  color: #3f3832;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 600;
  line-height: 2;
}

.gateway-page-v11 .home-v11-hero-sub em {
  color: #171412;
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(transparent 66%, rgb(255 216 77 / 0.62) 66%);
}

.gateway-page-v11 .home-v11-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  max-width: 45rem;
  margin: 0 0 1.45rem;
}

.gateway-page-v11 .home-v11-trust-badges span {
  display: grid;
  gap: 0.18rem;
  min-height: 68px;
  padding: 0.7rem 0.82rem;
  border: 1px solid rgb(23 20 18 / 0.14);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.84);
  box-shadow: 0 10px 24px rgb(37 28 20 / 0.055);
}

.gateway-page-v11 .home-v11-trust-badges b {
  color: #d7202a;
  font-size: 0.74rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-trust-badges small {
  color: #3f3832;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
}

.gateway-page-v11 .home-v11-search {
  max-width: 38rem;
  border-color: #171412;
  border-radius: 14px;
}

.gateway-page-v11 .home-v11-search-shell {
  max-width: 38rem;
}

.gateway-page-v11 .home-v11-search-suggest {
  display: grid;
  gap: 0.45rem;
  max-width: 38rem;
  margin: -0.55rem 0 1rem;
  padding: 0.72rem;
  border: 1px solid #ded8cf;
  border-radius: 18px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 18px 44px rgb(37 28 20 / 0.11);
}

.gateway-page-v11 .home-v11-search-suggest p {
  margin: 0 0 0.1rem;
  color: #756b62;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.gateway-page-v11 .home-v11-search-suggest button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 0.58rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #171412;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-search-suggest button:hover,
.gateway-page-v11 .home-v11-search-suggest button:focus-visible,
.gateway-page-v11 .home-v11-search-suggest button.is-active {
  border-color: rgb(215 32 42 / 0.22);
  background: #fff8ef;
  text-decoration: none;
  outline: none;
}

.gateway-page-v11 .home-v11-search-suggest span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.gateway-page-v11 .home-v11-search-suggest small {
  color: #d7202a;
  font-size: 0.68rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-search-suggest strong {
  overflow: hidden;
  color: #171412;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-search-suggest em {
  max-width: 15rem;
  overflow: hidden;
  color: #756b62;
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-search-tags {
  justify-content: flex-start;
  max-width: 44rem;
}

.gateway-page-v11 .home-v11-layout {
  gap: 28px;
  margin-top: 30px;
}

.gateway-page-v11 .home-v11-section-head h2,
.gateway-page-v11 .home-v11-duels h2,
.gateway-page-v11 .home-v11-rail-box > h2 {
  letter-spacing: -0.04em;
}

.gateway-page-v11 .home-v11-section-head h2::after,
.gateway-page-v11 .home-v11-duels h2::after,
.gateway-page-v11 .home-v11-rail-box > h2::after {
  bottom: 0.04em;
  height: 0.35em;
  background: rgb(255 216 77 / 0.72);
}

.gateway-page-v11 .home-v11-feature-card,
.gateway-page-v11 .home-v11-article-card,
.gateway-page-v11 .home-v11-guide-card,
.gateway-page-v11 .home-v11-rail-box,
.gateway-page-v11 .home-v11-update-list,
.gateway-page-v11 .home-v11-category-shelf a {
  border-color: #ded8cf;
  border-radius: 18px;
}

.gateway-page-v11 .home-v11-feature-card img,
.gateway-page-v11 .home-v11-feature-card .image-neutral-fallback,
.gateway-page-v11 .home-v11-card-image img,
.gateway-page-v11 .home-v11-card-image .image-neutral-fallback,
.gateway-page-v11 .home-v11-guide-card img,
.gateway-page-v11 .home-v11-guide-card .image-neutral-fallback {
  background: #f4efe8;
  object-fit: cover;
}

.gateway-page-v11 .home-v11-purpose-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.gateway-page-v11 .home-v11-purpose-card {
  grid-template-columns: 104px minmax(0, 1fr);
  justify-items: stretch;
  align-items: center;
  gap: 1rem;
  min-height: 132px;
  padding: 0.62rem 0.88rem 0.62rem 0.62rem;
  border-color: #ded8cf;
  border-radius: 22px;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.98), rgb(255 249 242 / 0.98));
  text-align: left;
  box-shadow: 0 12px 28px rgb(37 28 20 / 0.04);
}

.gateway-page-v11 .home-v11-purpose-card img {
  width: 104px;
  height: 104px;
  border-radius: 18px;
  object-fit: cover;
  filter: none;
  background: #f4efe8;
}

.gateway-page-v11 .home-v11-purpose-card span {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.gateway-page-v11 .home-v11-purpose-card strong {
  color: #171412;
  font-size: 1.05rem;
  line-height: 1.35;
}

.gateway-page-v11 .home-v11-purpose-card small {
  color: #756b62;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.55;
}

.gateway-page-v11 .home-v11-category-list img,
.gateway-page-v11 .home-v11-category-shelf img {
  border-radius: 12px;
  background: #f4efe8;
  object-fit: cover;
  filter: none;
}

@media (max-width: 1060px) {
  .gateway-page-v11 .home-v11-purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .gateway-page-v11 .home-v11-hero {
    padding: 2.25rem 0 2rem;
    background:
      linear-gradient(180deg, rgb(250 246 240 / 0.96) 0%, rgb(250 246 240 / 0.9) 76%, rgb(250 246 240 / 0.72) 100%),
      url("/home-stage/stage01-hero-comparison.png") center / cover no-repeat;
  }

  .gateway-page-v11 .home-v11-hero-inner {
    width: min(100% - 32px, 640px);
  }

  .gateway-page-v11 .home-v11-logo-lockup {
    flex-direction: row;
    align-items: flex-start;
  }

  .gateway-page-v11 .home-v11-logo-lockup span {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .gateway-page-v11 .home-v11-logo-lockup h1 {
    font-size: clamp(2.6rem, 14vw, 4rem);
  }

  .gateway-page-v11 .home-v11-trust-badges,
  .gateway-page-v11 .home-v11-purpose-grid {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-search-suggest {
    max-width: none;
    margin-top: -0.25rem;
  }

  .gateway-page-v11 .home-v11-search-suggest button {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .gateway-page-v11 .home-v11-search-suggest em {
    max-width: none;
  }

  .gateway-page-v11 .home-v11-purpose-card {
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 112px;
  }

  .gateway-page-v11 .home-v11-purpose-card img {
    width: 88px;
    height: 88px;
  }
}

/* 2026-08-28 Stage03 parity:
   確認用HTMLの上段構成へ合わせるため、ヒーロー/今日の導線/カテゴリ棚を再構成。 */
.gateway-page-v11 .home-v11-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  align-items: center;
}

.gateway-page-v11 .home-v11-hero-copy {
  min-width: 0;
  max-width: 39rem;
}

.gateway-page-v11 .home-v11-hero-panel {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.gateway-page-v11 .home-v11-hero-main-card,
.gateway-page-v11 .home-v11-hero-side-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 24px;
  background: #e9dfd4;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 22px 54px rgb(37 28 20 / 0.1);
}

.gateway-page-v11 .home-v11-hero-main-card {
  min-height: 315px;
}

.gateway-page-v11 .home-v11-hero-side-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.gateway-page-v11 .home-v11-hero-side-card {
  min-height: 170px;
}

.gateway-page-v11 .home-v11-hero-main-card img,
.gateway-page-v11 .home-v11-hero-main-card .image-neutral-fallback,
.gateway-page-v11 .home-v11-hero-side-card img,
.gateway-page-v11 .home-v11-hero-side-card .image-neutral-fallback {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

.gateway-page-v11 .home-v11-hero-main-card::after,
.gateway-page-v11 .home-v11-hero-side-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 68%;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / 0.72));
}

.gateway-page-v11 .home-v11-hero-card-copy {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  display: grid;
  gap: 0.22rem;
}

.gateway-page-v11 .home-v11-hero-card-copy small {
  width: fit-content;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #fff;
  color: #d7202a;
  font-size: 0.7rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-hero-card-copy strong {
  color: #fff;
  font-size: clamp(1.08rem, 2vw, 1.55rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.gateway-page-v11 .home-v11-hero-card-copy em {
  color: rgb(255 255 255 / 0.88);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.55;
}
.gateway-page-v11 .home-v11-category-shelf-top {
  width: min(100% - 40px, 1180px);
  margin: 1.2rem auto 0;
  padding: 1.4rem 0 0.6rem;
  border-top: 0;
}

.gateway-page-v11 .home-v11-category-shelf-top h2 {
  margin: 0 0 0.9rem;
  color: #171412;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.gateway-page-v11 .home-v11-category-shelf-top > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gateway-page-v11 .home-v11-category-shelf-top a {
  grid-template-columns: 62px minmax(0, 1fr);
  min-height: 86px;
  border-radius: 14px;
}

.gateway-page-v11 .home-v11-category-shelf-top img {
  width: 62px;
  height: 62px;
  object-fit: cover;
}

.gateway-page-v11 .home-v11-category-shelf-top em {
  display: block;
  overflow: hidden;
  color: #756b62;
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-layout {
  grid-template-columns: minmax(0, 1fr);
}

.gateway-page-v11 .home-v11-rail {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1060px) {
  .gateway-page-v11 .home-v11-hero-inner {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-hero-copy {
    max-width: 44rem;
  }
.gateway-page-v11 .home-v11-category-shelf-top > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .gateway-page-v11 .home-v11-hero-inner {
    width: min(100% - 32px, 640px);
  }

  .gateway-page-v11 .home-v11-hero-side-grid,
  .gateway-page-v11 .home-v11-today-strip > div,
  .gateway-page-v11 .home-v11-category-shelf-top > div,
  .gateway-page-v11 .home-v11-rail {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-hero-main-card {
    min-height: 260px;
  }

  .gateway-page-v11 .home-v11-hero-side-card {
    min-height: 150px;
  }
}

/* 2026-08-28 quiet editorial pass:
   背景写真のノイズと大きすぎる余白を落とし、比較メディアらしい紙面密度へ寄せる。 */
.gateway-page-v11 {
  background:
    linear-gradient(180deg, #fbf8f3 0, #fff 22rem, #fff 100%);
}

.gateway-page-v11 .home-v11-hero {
  padding: clamp(2rem, 4.6vw, 3.8rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid #e5ded5;
  background:
    radial-gradient(circle at 88% 16%, rgb(215 32 42 / 0.08), transparent 22rem),
    linear-gradient(135deg, #fffdf8 0%, #f7f1e9 100%);
}

.gateway-page-v11 .home-v11-hero::after {
  content: "";
  position: absolute;
  right: min(4vw, 3rem);
  bottom: -7rem;
  width: min(42vw, 34rem);
  height: min(42vw, 34rem);
  border: 1px solid rgb(215 32 42 / 0.11);
  border-radius: 50%;
  pointer-events: none;
}

.gateway-page-v11 .home-v11-hero-inner {
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.86fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

.gateway-page-v11 .home-v11-hero-copy {
  max-width: 42rem;
}

.gateway-page-v11 .home-v11-logo-lockup {
  margin-bottom: 1rem;
}

.gateway-page-v11 .home-v11-logo-lockup span {
  width: 42px;
  height: 42px;
  margin-top: 0.38rem;
  border-radius: 9px;
  font-size: 1.45rem;
}

.gateway-page-v11 .home-v11-logo-lockup h1 {
  max-width: 8.6em;
  font-size: clamp(2.9rem, 5.8vw, 4.85rem);
  line-height: 1.03;
}

.gateway-page-v11 .home-v11-logo-lockup h1 em::after {
  bottom: 0.03em;
  height: 0.18em;
  background: rgb(255 216 77 / 0.82);
}

.gateway-page-v11 .home-v11-hero-sub {
  max-width: 39rem;
  margin-bottom: 1rem;
  font-size: clamp(0.96rem, 1.2vw, 1.04rem);
  line-height: 1.9;
}

.gateway-page-v11 .home-v11-trust-badges {
  max-width: 38rem;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
}

.gateway-page-v11 .home-v11-trust-badges span {
  min-height: 60px;
  padding: 0.62rem 0.72rem;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.9);
}

.gateway-page-v11 .home-v11-search {
  max-width: 35rem;
  min-height: 54px;
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 0 4px 0 rgb(23 20 18 / 0.1);
}

.gateway-page-v11 .home-v11-search-tags {
  gap: 0.4rem;
  max-width: 37rem;
  margin-top: 0.82rem;
}

.gateway-page-v11 .home-v11-search-tags a {
  min-height: 30px;
  padding: 0.26rem 0.74rem;
  background: rgb(255 255 255 / 0.76);
}

.gateway-page-v11 .home-v11-hero-panel {
  gap: 0.7rem;
}

.gateway-page-v11 .home-v11-hero-main-card,
.gateway-page-v11 .home-v11-hero-side-card {
  border: 1px solid #ded8cf;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgb(37 28 20 / 0.09);
}

.gateway-page-v11 .home-v11-hero-main-card {
  min-height: 270px;
}

.gateway-page-v11 .home-v11-hero-side-grid {
  gap: 0.7rem;
}

.gateway-page-v11 .home-v11-hero-side-card {
  min-height: 140px;
}

.gateway-page-v11 .home-v11-hero-card-copy {
  right: 0.82rem;
  bottom: 0.82rem;
  left: 0.82rem;
}

.gateway-page-v11 .home-v11-hero-card-copy strong {
  font-size: clamp(1rem, 1.55vw, 1.36rem);
}

.gateway-page-v11 .home-v11-hero-card-copy em {
  font-size: 0.74rem;
}
.gateway-page-v11 .home-v11-proof {
  background: #fff;
  color: #171412;
}

.gateway-page-v11 .home-v11-proof > div {
  justify-content: flex-start;
  padding: 0.78rem 0 0.25rem;
}

.gateway-page-v11 .home-v11-proof p {
  color: #3f3832;
}

.gateway-page-v11 .home-v11-proof b,
.gateway-page-v11 .home-v11-proof span {
  color: #d7202a;
}

.gateway-page-v11 .home-v11-proof-note {
  color: #756b62;
}

.gateway-page-v11 .home-v11-category-shelf-top {
  margin-top: 0;
  padding-top: 0.85rem;
}

.gateway-page-v11 .home-v11-category-shelf-top h2 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.28rem, 2vw, 1.72rem);
}

.gateway-page-v11 .home-v11-category-shelf-top > div {
  gap: 0.62rem;
}

.gateway-page-v11 .home-v11-category-shelf-top a {
  min-height: 76px;
  padding: 0.58rem;
  border-radius: 12px;
}

.gateway-page-v11 .home-v11-category-shelf-top img {
  width: 54px;
  height: 54px;
  border-radius: 10px;
}

.gateway-page-v11 .home-v11-category-shelf-top small {
  font-size: 0.66rem;
}

.gateway-page-v11 .home-v11-category-shelf-top strong {
  font-size: 0.88rem;
}

.gateway-page-v11 .home-v11-layout {
  margin-top: 1.55rem;
}

.gateway-page-v11 .home-v11-section {
  margin-bottom: 2.2rem;
}

.gateway-page-v11 .home-v11-feature-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1fr);
  min-height: 260px;
  background: #fff;
  color: #171412;
}

.gateway-page-v11 .home-v11-feature-card::after {
  content: none;
}

.gateway-page-v11 .home-v11-feature-card img,
.gateway-page-v11 .home-v11-feature-card .image-neutral-fallback {
  min-height: 260px;
  height: 100%;
}

.gateway-page-v11 .home-v11-feature-copy {
  position: static;
  align-self: center;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  color: #171412;
}

.gateway-page-v11 .home-v11-feature-copy small {
  color: #d7202a;
}

.gateway-page-v11 .home-v11-feature-copy strong {
  color: #171412;
}

.gateway-page-v11 .home-v11-feature-copy em {
  color: #756b62;
}

@media (max-width: 1060px) {
  .gateway-page-v11 .home-v11-hero-inner {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-hero-panel {
    max-width: 760px;
  }

  .gateway-page-v11 .home-v11-feature-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .gateway-page-v11 .home-v11-hero {
    background:
      radial-gradient(circle at 95% 0%, rgb(215 32 42 / 0.09), transparent 15rem),
      linear-gradient(135deg, #fffdf8 0%, #f7f1e9 100%);
  }

  .gateway-page-v11 .home-v11-logo-lockup h1 {
    font-size: clamp(2.35rem, 12vw, 3.55rem);
  }

  .gateway-page-v11 .home-v11-trust-badges {
    gap: 0.5rem;
  }

  .gateway-page-v11 .home-v11-hero-main-card {
    min-height: 220px;
  }

  .gateway-page-v11 .home-v11-hero-side-card {
    min-height: 132px;
  }
.gateway-page-v11 .home-v11-feature-card img,
  .gateway-page-v11 .home-v11-feature-card .image-neutral-fallback {
    min-height: 210px;
  }
}

/* 2026-08-28 all-improvements pass:
   トップの主張を整理。大写真カードを注目記事リスト化し、カテゴリ重複と黒帯の圧を下げる。 */
.gateway-page-v11 .home-v11-hero {
  padding: clamp(1.8rem, 4vw, 3.2rem) 0 clamp(1.15rem, 2.5vw, 2rem);
  background:
    linear-gradient(135deg, #fffdf9 0%, #f8f3ec 58%, #fff 100%);
}

.gateway-page-v11 .home-v11-hero::after {
  opacity: 0.36;
}

.gateway-page-v11 .home-v11-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  align-items: start;
}

.gateway-page-v11 .home-v11-logo-lockup h1 {
  font-size: clamp(2.75rem, 5.25vw, 4.35rem);
}

.gateway-page-v11 .home-v11-hero-panel {
  align-self: stretch;
  padding: 1rem;
  border: 1px solid #e3ddd5;
  border-radius: 22px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 18px 44px rgb(37 28 20 / 0.08);
}

.gateway-page-v11 .home-v11-hero-main-card,
.gateway-page-v11 .home-v11-hero-side-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  min-height: 104px;
  border-color: #ebe4dc;
  border-radius: 16px;
  background: #fff;
  color: #171412;
  box-shadow: none;
}

.gateway-page-v11 .home-v11-hero-main-card::after,
.gateway-page-v11 .home-v11-hero-side-card::after {
  content: none;
}

.gateway-page-v11 .home-v11-hero-main-card img,
.gateway-page-v11 .home-v11-hero-main-card .image-neutral-fallback,
.gateway-page-v11 .home-v11-hero-side-card img,
.gateway-page-v11 .home-v11-hero-side-card .image-neutral-fallback {
  width: 112px;
  height: 104px;
  min-height: 104px;
  border-radius: 16px 0 0 16px;
  object-fit: cover;
}

.gateway-page-v11 .home-v11-hero-side-grid {
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.gateway-page-v11 .home-v11-ribbon {
  top: 0.62rem;
  left: 0.62rem;
  padding: 0.22rem 0.56rem;
  border-radius: 999px;
  font-size: 0.68rem;
}

.gateway-page-v11 .home-v11-hero-card-copy {
  position: static;
  padding: 0.74rem 0.85rem;
}

.gateway-page-v11 .home-v11-hero-card-copy small {
  padding: 0;
  background: transparent;
  color: #d7202a;
  font-size: 0.68rem;
}

.gateway-page-v11 .home-v11-hero-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #171412;
  font-size: 0.96rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gateway-page-v11 .home-v11-hero-card-copy em {
  display: -webkit-box;
  overflow: hidden;
  color: #756b62;
  font-size: 0.74rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gateway-page-v11 .home-v11-proof > div {
  padding-top: 0.58rem;
}

.gateway-page-v11 .home-v11-category-shelf-top {
  padding-top: 0.65rem;
  padding-bottom: 0.3rem;
}

.gateway-page-v11 .home-v11-category-shelf-top > div {
  gap: 0.5rem;
}

.gateway-page-v11 .home-v11-category-shelf-top a {
  box-shadow: 0 8px 20px rgb(37 28 20 / 0.035);
}

.gateway-page-v11 .home-v11-section-head h2,
.gateway-page-v11 .home-v11-duels h2,
.gateway-page-v11 .home-v11-rail-box > h2 {
  font-size: clamp(1.24rem, 2vw, 1.55rem);
}

.gateway-page-v11 .home-v11-section-head h2::after,
.gateway-page-v11 .home-v11-duels h2::after,
.gateway-page-v11 .home-v11-rail-box > h2::after {
  height: 0.24em;
  background: rgb(255 216 77 / 0.64);
}

.gateway-page-v11 .home-v11-feature-card {
  min-height: 224px;
  border-radius: 16px;
}

.gateway-page-v11 .home-v11-feature-card img,
.gateway-page-v11 .home-v11-feature-card .image-neutral-fallback {
  min-height: 224px;
}

.gateway-page-v11 .home-v11-card-grid {
  gap: 0.75rem;
}

.gateway-page-v11 .home-v11-rail {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1rem;
}

.gateway-page-v11 .home-v11-compact-links div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gateway-page-v11 .home-v11-compact-links a {
  border: 1px solid #e6ded5;
  background: #fff;
}

.gateway-page-v11 .home-v11-guide-card img,
.gateway-page-v11 .home-v11-guide-card .image-neutral-fallback {
  height: auto;
  max-height: 248px;
  object-fit: cover;
  object-position: center;
}

.gateway-page-v11 .home-v11-compact-links {
  align-self: start;
}

.gateway-page-v11 .home-v11-compact-links .home-v11-quick-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  padding: 0.95rem 1rem 0.75rem;
}

.gateway-page-v11 .home-v11-compact-links .home-v11-rail-link-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0 1rem 1.05rem;
}

.gateway-page-v11 .home-v11-compact-links .home-v11-rail-link-groups section {
  display: grid;
  align-content: start;
  gap: 0.28rem;
  min-width: 0;
}

.gateway-page-v11 .home-v11-compact-links .home-v11-rail-link-groups h3 {
  margin: 0;
  color: #171412;
  font-size: 0.78rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-compact-links .home-v11-rail-link-groups a {
  display: grid;
  grid-template-columns: minmax(4.8rem, 0.38fr) minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-height: 36px;
  padding: 0.42rem 0;
  border: 0;
  border-top: 1px solid #eee6dd;
  border-radius: 0;
  background: transparent;
  color: #171412;
}

.gateway-page-v11 .home-v11-compact-links .home-v11-rail-link-groups a span {
  color: #c71922;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.2;
}

.gateway-page-v11 .home-v11-compact-links .home-v11-rail-link-groups a strong {
  overflow: hidden;
  color: #171412;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1060px) {
  .gateway-page-v11 .home-v11-hero-inner,
  .gateway-page-v11 .home-v11-rail {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-hero-panel {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .gateway-page-v11 .home-v11-hero-main-card,
  .gateway-page-v11 .home-v11-hero-side-card {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 94px;
  }

  .gateway-page-v11 .home-v11-hero-main-card img,
  .gateway-page-v11 .home-v11-hero-main-card .image-neutral-fallback,
  .gateway-page-v11 .home-v11-hero-side-card img,
  .gateway-page-v11 .home-v11-hero-side-card .image-neutral-fallback {
    width: 92px;
    height: 94px;
    min-height: 94px;
  }
.gateway-page-v11 .home-v11-compact-links .home-v11-rail-link-groups {
    grid-template-columns: 1fr;
  }
}

/* 2026-08-28 article motion pass:
   トップ上段の記事だけを穏やかに流し、ページ全体は静かな比較メディアのまま保つ。 */
.gateway-page-v11 .home-v11-logo-lockup {
  grid-template-columns: minmax(0, 1fr);
}

.gateway-page-v11 .home-v11-logo-lockup h1 {
  margin-left: 0;
}

.gateway-page-v11 .home-v11-logo-lockup h1 em::after {
  height: 0.18em;
  bottom: 0.03em;
  opacity: 0.7;
}
@keyframes home-v11-card-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.gateway-page-v11 .home-v11-category-shelf-head {
  display: flex;
  gap: 1rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 0.95rem;
}

.gateway-page-v11 .home-v11-category-shelf-head h2 {
  margin: 0;
}

.gateway-page-v11 .home-v11-category-shelf-head > a {
  flex: 0 0 auto;
  color: #c71922;
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
}

.gateway-page-v11 .home-v11-category-shelf-head > a::after {
  content: ">";
  margin-left: 0.45rem;
}

.gateway-page-v11 .home-v11-category-shelf-top > div {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.62rem;
}

.gateway-page-v11 .home-v11-category-shelf-top a {
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 78px;
  padding: 0.64rem;
}

.gateway-page-v11 .home-v11-category-shelf-top img {
  width: 54px;
  height: 54px;
  border-radius: 13px;
}

.gateway-page-v11 .home-v11-category-shelf-top small {
  font-size: 0.58rem;
  letter-spacing: 0.02em;
}

.gateway-page-v11 .home-v11-category-shelf-top strong {
  font-size: 0.86rem;
}

.gateway-page-v11 .home-v11-category-shelf-top em {
  font-size: 0.66rem;
}

@media (max-width: 1180px) {
  .gateway-page-v11 .home-v11-category-shelf-top > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .gateway-page-v11 .home-v11-category-shelf-top > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .gateway-page-v11 .home-v11-category-shelf-head {
    align-items: start;
  }

  .gateway-page-v11 .home-v11-category-shelf-top > div {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-category-shelf-top a {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 82px;
  }

  .gateway-page-v11 .home-v11-category-shelf-top img {
    width: 58px;
    height: 58px;
  }
}

/* 2026-08-28 visual consistency pass:
   記事画像の質感を揃え、下部を黒い別部品ではなく編集部の確認エリアとして見せる。 */
.gateway-page-v11 .home-v11-article-card img,
.gateway-page-v11 .home-v11-article-card .image-neutral-fallback {
  background: #f7f1e8;
  object-fit: cover;
  object-position: center;
}

.gateway-page-v11 .home-v11-card-image {
  overflow: hidden;
  background: #f7f1e8;
}

.gateway-page-v11 .home-v11-card-image b {
  right: 0.82rem;
  bottom: 0.82rem;
  width: 2.35rem;
  height: 2.35rem;
  border: 2px solid #fff;
  box-shadow: 0 8px 18px rgb(23 20 18 / 0.18);
  font-size: 0.84rem;
}

.gateway-page-v11 .home-v11-rail {
  padding-top: 0.2rem;
}

.gateway-page-v11 .home-v11-verify,
.gateway-page-v11 .home-v11-rail-box {
  border: 1px solid #e3d9ce;
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: 0 16px 34px rgb(45 36 28 / 0.055);
  color: #171412;
}

.gateway-page-v11 .home-v11-verify {
  padding: 1.18rem 1.2rem;
}

.gateway-page-v11 .home-v11-verify h2 {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #eadfd4;
  color: #171412;
}

.gateway-page-v11 .home-v11-verify h2 span {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0 0.62rem;
  border-radius: 999px;
  background: #fff1d3;
  color: #9f1d25;
  font-size: 0.72rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-verify p {
  margin: 0.75rem 0 0.8rem;
  color: #665c52;
}

.gateway-page-v11 .home-v11-verify ul {
  border-top: 0;
}

.gateway-page-v11 .home-v11-verify li {
  border-bottom: 1px solid #eadfd4;
}

.gateway-page-v11 .home-v11-verify li a {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.28rem 0.75rem;
  padding: 0.68rem 0;
}

.gateway-page-v11 .home-v11-verify li span {
  grid-column: 1;
  color: #9f1d25;
}

.gateway-page-v11 .home-v11-verify li strong {
  grid-column: 1;
  color: #171412;
}

.gateway-page-v11 .home-v11-verify li em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #25724f;
  font-size: 0.8rem;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-verify-more {
  color: #c71922;
}

.gateway-page-v11 .home-v11-rail-box {
  overflow: hidden;
}

.gateway-page-v11 .home-v11-rail-box > h2 {
  border-bottom-color: #eadfd4;
  background: linear-gradient(90deg, #fff8ea, #fffdf9);
}

.gateway-page-v11 .home-v11-compact-links .home-v11-quick-chip-list {
  padding-top: 1.05rem;
}

.gateway-page-v11 .home-v11-compact-links a:hover,
.gateway-page-v11 .home-v11-compact-links a:focus-visible,
.gateway-page-v11 .home-v11-verify a:hover,
.gateway-page-v11 .home-v11-verify a:focus-visible {
  background: #fff8ea;
}

.gateway-page-v11 .home-v11-contact-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(280px, 0.42fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: stretch;
  width: min(100% - 40px, 1180px);
  margin: 1.4rem auto 0;
  min-height: 250px;
  padding: clamp(1.1rem, 2.8vw, 1.75rem);
  border: 1px solid #e3d9ce;
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgb(255 253 249 / 0.97) 0%, rgb(255 253 249 / 0.93) 43%, rgb(255 253 249 / 0.44) 65%, rgb(255 253 249 / 0.18) 100%),
    url("/editorial/generated/contact-editorial-desk-banner-v1.jpg") right center / cover no-repeat,
    #fff8ea;
  box-shadow: 0 24px 54px rgb(45 36 28 / 0.09);
  overflow: hidden;
}

.gateway-page-v11 .home-v11-contact-cta::before {
  content: "";
  position: absolute;
  inset: 1rem auto 1rem 1rem;
  width: min(58%, 650px);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.82);
  box-shadow: 0 18px 36px rgb(45 36 28 / 0.08);
  pointer-events: none;
}

.gateway-page-v11 .home-v11-contact-cta > div,
.gateway-page-v11 .home-v11-contact-cta > a {
  position: relative;
  z-index: 1;
}

.gateway-page-v11 .home-v11-contact-copy,
.gateway-page-v11 .home-v11-contact-actions {
  min-width: 0;
  border: 1px solid rgb(234 223 212 / 0.9);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 14px 30px rgb(45 36 28 / 0.08);
}

.gateway-page-v11 .home-v11-contact-copy {
  padding: clamp(1rem, 2.5vw, 1.45rem);
}

.gateway-page-v11 .home-v11-contact-actions {
  display: grid;
  align-content: center;
  gap: 0.8rem;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  background: rgb(255 253 249 / 0.94);
}

.gateway-page-v11 .home-v11-contact-cta small {
  color: #c71922;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.gateway-page-v11 .home-v11-contact-cta h2 {
  margin: 0.22rem 0 0.35rem;
  color: #171412;
  font-size: clamp(1.2rem, 2vw, 1.62rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.gateway-page-v11 .home-v11-contact-cta p {
  max-width: 44rem;
  margin: 0;
  color: #4f463d;
  line-height: 1.75;
}

.gateway-page-v11 .home-v11-contact-cta ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.gateway-page-v11 .home-v11-contact-cta li {
  padding: 0.34rem 0.62rem;
  border: 1px solid #eadfd4;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.88);
  color: #4e453d;
  font-size: 0.76rem;
  font-weight: 800;
}

.gateway-page-v11 .home-v11-contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  border: 1px solid #171412;
  background: #171412;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgb(45 36 28 / 0.08);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.gateway-page-v11 .home-v11-contact-actions a:hover,
.gateway-page-v11 .home-v11-contact-actions a:focus-visible {
  background: #d7202a;
  border-color: #d7202a;
  color: #fff;
  transform: translateY(-1px);
}

.gateway-page-v11 .home-v11-contact-actions a::after {
  content: ">";
  margin-left: 0.5rem;
}

.gateway-page-v11 .home-v11-contact-actions span {
  color: #756b62;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .gateway-page-v11 .home-v11-contact-cta {
    grid-template-columns: 1fr;
    width: min(100% - 32px, 640px);
    min-height: 0;
    padding-top: 7.4rem;
    background:
      linear-gradient(180deg, rgb(255 253 249 / 0.28) 0, rgb(255 253 249 / 0.42) 5.8rem, rgb(255 253 249 / 0.98) 8.2rem, #fffdf9 100%),
      url("/editorial/generated/contact-editorial-desk-banner-v1.jpg") center top / auto 8.8rem no-repeat,
      #fffdf9;
  }

  .gateway-page-v11 .home-v11-contact-cta::before {
    inset: 6.7rem 0.8rem 0.8rem;
    width: auto;
    border-radius: 18px;
  }

  .gateway-page-v11 .home-v11-contact-actions a {
    width: 100%;
  }


  .gateway-page-v11 .home-v11-verify li a {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-verify li em {
    grid-column: 1;
    grid-row: auto;
  }
}

.contact-form-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.7rem);
  align-items: start;
}

.contact-form-guide {
  padding: 1rem;
  border: 1px solid #eadfd4;
  border-radius: var(--r-md);
  background: #fff8ea;
}

.contact-form-guide h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.contact-form-guide p,
.contact-form-guide li {
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.contact-form-guide p {
  margin: 0 0 0.75rem;
}

.contact-form-guide ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.1rem;
}

@media (max-width: 820px) {
  .contact-form-layout {
    grid-template-columns: 1fr;
  }
}

/* 2026-08-28 contact form renewal:
   Keep the page calm, reduce repeated cards, and make each inquiry path clear. */
.contact-page-v2 article {
  max-width: 1040px;
  margin-inline: auto;
}

body:has(main.contact-page-v2) > .site-guide-banners {
  display: none;
}

.contact-hero-v2 {
  position: relative;
  padding: clamp(1.45rem, 3.4vw, 2.45rem);
  border: 1px solid #e7ded4;
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0.96), rgb(255 248 235 / 0.9)),
    radial-gradient(circle at 94% 10%, rgb(216 15 47 / 0.08), transparent 32%);
  box-shadow: 0 12px 36px rgb(42 31 24 / 0.06);
}

.contact-hero-v2 h1 {
  max-width: 15em;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.04em;
}

.contact-hero-v2 p:not(.eyebrow) {
  max-width: 42rem;
  margin-top: 0.8rem;
  color: var(--ink-muted);
  font-size: clamp(0.96rem, 1.35vw, 1.06rem);
  font-weight: 700;
  line-height: 1.75;
}

.contact-form-section-v2 {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  margin-top: clamp(1rem, 2.6vw, 1.6rem);
  padding: clamp(1.1rem, 3vw, 2.1rem);
  border: 1px solid #e3d9ce;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 42px rgb(42 31 24 / 0.06);
}

.contact-form-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  gap: clamp(1rem, 2.4vw, 1.5rem);
  align-items: stretch;
}

.contact-form-section-v2 .contact-form-heading {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  min-width: 0;
}

.contact-form-section-v2 .contact-form-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.035em;
}

.contact-form-section-v2 .contact-form-heading > p:not(.eyebrow) {
  max-width: 42rem;
  margin: 0;
  color: var(--ink-muted);
  font-weight: 700;
  line-height: 1.7;
}

.contact-purpose-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.45rem;
}

.contact-purpose-tabs button {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-height: 4.65rem;
  padding: 0.9rem 1rem 0.95rem;
  border: 1px solid #eadfd4;
  border-radius: 16px;
  background: #fffaf2;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.contact-purpose-tabs button:hover,
.contact-purpose-tabs button:focus-visible {
  transform: translateY(-1px);
  border-color: rgb(216 15 47 / 0.4);
  background: #fff;
  box-shadow: 0 12px 26px rgb(42 31 24 / 0.08);
}

.contact-purpose-tabs button.is-active {
  border-color: rgb(216 15 47 / 0.55);
  background: linear-gradient(180deg, #fff, #fff6f7);
  box-shadow: inset 0 0 0 2px rgb(216 15 47 / 0.08), 0 10px 22px rgb(216 15 47 / 0.08);
}

.contact-purpose-tabs button.is-active::after {
  content: "選択中";
  position: absolute;
  right: 0.8rem;
  top: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.35;
}

.contact-purpose-tabs small {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.contact-form-section-v2 .contact-form-guide {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 1.15rem;
  border: 1px solid #eadfd4;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgb(255 252 246 / 0.98), rgb(255 247 237 / 0.98)),
    radial-gradient(circle at 100% 0, rgb(216 15 47 / 0.08), transparent 36%);
}

.contact-guide-badge {
  width: fit-content;
  margin: 0;
  padding: 0.26rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgb(216 15 47 / 0.14);
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-form-section-v2 .contact-form-guide h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.contact-form-section-v2 .contact-form-guide > p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.75;
}

.contact-trust-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-trust-list li {
  position: relative;
  padding: 0.52rem 0.6rem 0.52rem 1.85rem;
  border: 1px solid #efe5d9;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.55;
}

.contact-trust-list li::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0.88rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--brand);
}

.contact-endpoint-note {
  margin: 0 !important;
  padding: 0.72rem 0.8rem;
  border: 1px solid #eadfd4;
  border-radius: 12px;
  background: #fff;
  color: var(--ink-muted) !important;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.65;
}

.contact-guide-example {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.78);
  border: 1px dashed rgb(216 15 47 / 0.2);
  color: var(--ink-muted);
  font-size: 0.82rem !important;
  font-weight: 700;
}

.contact-support-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.contact-support-strip > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.95rem 1rem;
  border: 1px solid #eee3d9;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fffaf6);
}

.contact-support-strip strong {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
}

.contact-support-strip span {
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.6;
}

.contact-support-mail {
  border-color: rgb(216 15 47 / 0.18) !important;
  background: linear-gradient(180deg, #fff8f8, #fffdfc) !important;
}

.contact-form-section-v2 .contact-form {
  gap: 1.25rem;
  padding-top: clamp(0.95rem, 2vw, 1.35rem);
  border-top: 1px solid #eee5dc;
}

.contact-form-block {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid #ede3d8;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fffdfb);
}

.contact-form-block-heading {
  display: grid;
  gap: 0.28rem;
}

.contact-form-block-heading p {
  margin: 0;
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-form-block-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  line-height: 1.45;
}

.contact-form-block-heading span {
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.7;
}

.contact-form-section-v2 .contact-form-grid {
  gap: 1.1rem 1.25rem;
}

.contact-form-section-v2 .contact-form label > span {
  color: var(--ink);
  font-weight: 800;
}

.contact-form-section-v2 .contact-form label b,
.contact-form-section-v2 .contact-form label i {
  display: inline-flex;
  align-items: center;
  margin-left: 0.42rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.contact-form-section-v2 .contact-form label b {
  color: #fff;
  background: var(--brand);
}

.contact-form-section-v2 .contact-form label i {
  color: var(--ink-muted);
  background: #f2ece5;
}

.contact-form-section-v2 .contact-form input:not([type="checkbox"]),
.contact-form-section-v2 .contact-form select,
.contact-form-section-v2 .contact-form textarea {
  min-height: 3.45rem;
  border-color: #d8dce0;
  border-radius: 14px;
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.contact-form-section-v2 .contact-form textarea {
  min-height: 11rem;
}

.contact-conditional {
  display: grid;
  gap: 1rem;
  border: 1px solid #eadfd4;
  border-top: 4px solid rgb(216 15 47 / 0.7);
  border-radius: 18px;
  background: #fffdfb;
}

.contact-conditional-light {
  background: #fffdf9;
  border-color: #eadfd4;
  border-left-color: #d6c8ba;
}

.contact-conditional-title {
  margin: 0;
  color: var(--brand-strong);
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.45;
}

.contact-counter {
  justify-self: end;
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.contact-form-message-block textarea {
  background: linear-gradient(180deg, #fff, #fffdfa);
}

.contact-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-form-section-v2 .contact-submit-row {
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.15rem;
}

.contact-form-section-v2 .contact-consent {
  padding: 0.95rem 1rem;
  border-radius: 16px;
  background: #faf6f1;
  border: 1px solid #eadfd4;
}

.contact-form-section-v2 .contact-consent span {
  color: var(--ink);
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.7;
}

.contact-form-section-v2 .contact-consent a {
  color: var(--brand-strong);
}

.contact-form-section-v2 .contact-submit {
  min-width: 13.5rem;
  min-height: 3.35rem;
  padding: 0.85rem 1.45rem;
  box-shadow: 0 13px 28px rgb(216 15 47 / 0.22);
}

.contact-form-section-v2 .contact-submit:disabled {
  opacity: 0.58;
  cursor: wait;
  box-shadow: none;
}

.contact-form-section-v2 .contact-submit-row small {
  font-weight: 700;
}

.contact-form-section-v2 .contact-form-status {
  padding: 0.8rem 0.95rem;
  border: 1px solid #f0bcc5;
  border-radius: 14px;
  background: #fff6f7;
  color: var(--brand-strong);
  font-size: 0.9rem;
  line-height: 1.7;
}

.contact-form-done {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid #d8eadf;
  border-radius: 22px;
  background: #f6fff9;
  text-align: center;
}

.contact-form-done > span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.8rem;
  border-radius: 999px;
  background: #16824b;
  color: #fff;
  font-weight: 900;
}

.contact-form-done h3 {
  margin: 0 0 0.45rem;
  color: var(--ink);
}

.contact-form-done p {
  margin: 0;
  color: var(--ink-muted);
  font-weight: 700;
}

.contact-form-done button {
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-strong);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 820px) {
  .contact-form-top,
  .contact-support-strip,
  .contact-purpose-tabs,
  .contact-form-section-v2 .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-purpose-tabs {
    gap: 0.55rem;
  }

  .contact-form-section-v2 .contact-submit {
    width: 100%;
  }
}

/* Privacy policy renewal: make a long legal page readable without feeling dense. */
.privacy-page-v2 article {
  max-width: 1040px;
  margin-inline: auto;
}

.privacy-hero-v2 {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  border: 1px solid #e7ded4;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.98), rgb(255 248 235 / 0.92)),
    radial-gradient(circle at 92% 12%, rgb(216 15 47 / 0.08), transparent 34%);
  box-shadow: 0 12px 36px rgb(42 31 24 / 0.06);
}

.privacy-hero-v2 h1 {
  max-width: 14em;
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  line-height: 1.2;
  letter-spacing: -0.045em;
}

.privacy-hero-v2 p:not(.eyebrow):not(.article-updated) {
  max-width: 48rem;
  margin-top: 0.85rem;
  color: var(--ink-muted);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  font-weight: 700;
  line-height: 1.8;
}

.privacy-summary {
  padding: clamp(1.05rem, 2.6vw, 1.6rem);
  border: 1px solid #eadfd4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(42 31 24 / 0.05);
}

.privacy-summary h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  letter-spacing: -0.035em;
}

.privacy-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.privacy-summary-grid > div {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid #efe4d8;
  border-radius: 18px;
  background: #fffdf9;
}

.privacy-summary-grid span {
  color: var(--brand);
  font-family: var(--font-num);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.privacy-summary-grid p {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.65;
}

.privacy-toc {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--s5);
  padding: 0.85rem;
  border: 1px solid #eadfd4;
  border-radius: 18px;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgb(42 31 24 / 0.05);
}

.privacy-toc a {
  padding: 0.45rem 0.7rem;
  border: 1px solid #eadfd4;
  border-radius: 999px;
  background: #fffaf2;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.privacy-toc a:hover {
  border-color: rgb(216 15 47 / 0.38);
  color: var(--brand-strong);
  background: #fff;
}

.privacy-policy-card {
  padding: clamp(1.15rem, 2.8vw, 1.8rem);
  border: 1px solid #e7ded4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(42 31 24 / 0.045);
}

.privacy-policy-card h2 {
  margin: 0 0 0.85rem;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.35vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.035em;
}

.privacy-policy-card p {
  max-width: 58rem;
  color: var(--ink-muted);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.95;
}

.privacy-policy-card p + p {
  margin-top: 0.8rem;
}

.privacy-table-wrap {
  margin-top: 1rem;
  overflow-x: auto;
  border: 1px solid #eadfd4;
  border-radius: 16px;
}

.privacy-table-wrap table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #fff;
}

.privacy-table-wrap th,
.privacy-table-wrap td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #eadfd4;
  text-align: left;
  vertical-align: top;
}

.privacy-table-wrap tr:last-child th,
.privacy-table-wrap tr:last-child td {
  border-bottom: 0;
}

.privacy-table-wrap thead th,
.privacy-table-wrap tbody th {
  width: 15rem;
  color: var(--ink);
  font-weight: 900;
}

.privacy-table-wrap thead th {
  background: #fff7eb;
}

.privacy-table-wrap td {
  color: var(--ink-muted);
  font-weight: 650;
  line-height: 1.8;
}

.privacy-check-list {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.privacy-check-list li {
  position: relative;
  padding: 0.7rem 0.8rem 0.7rem 2rem;
  border: 1px solid #efe4d8;
  border-radius: 14px;
  background: #fffdf9;
  color: var(--ink-muted);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.7;
}

.privacy-check-list li::before {
  content: "";
  position: absolute;
  left: 0.82rem;
  top: 1.22rem;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 999px;
  background: var(--brand);
}

.privacy-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}

.privacy-service-grid > div {
  padding: 1rem;
  border: 1px solid #efe4d8;
  border-radius: 16px;
  background: #fffdf9;
}

.privacy-service-grid h3 {
  margin: 0 0 0.45rem;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.45;
}

.privacy-service-grid p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
}

.privacy-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid #eadfd4;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff7de, #fffdf9 62%, #fff);
  box-shadow: 0 14px 40px rgb(42 31 24 / 0.06);
}

.privacy-contact-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -0.035em;
}

.privacy-contact-card p:not(.eyebrow) {
  max-width: 44rem;
  margin-top: 0.5rem;
  color: var(--ink-muted);
  font-weight: 700;
  line-height: 1.75;
}

.privacy-contact-card > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 26px rgb(42 31 24 / 0.18);
}

.privacy-contact-card > a::after {
  content: ">";
  margin-left: 0.5rem;
}

@media (max-width: 820px) {
  .privacy-summary-grid,
  .privacy-service-grid,
  .privacy-contact-card {
    grid-template-columns: 1fr;
  }

  .privacy-toc {
    position: static;
  }

  .privacy-contact-card > a {
    width: 100%;
  }
}

/* Disclaimer renewal: explain risks clearly without making the page feel punitive. */
.disclaimer-page-v2 article {
  max-width: 1040px;
  margin-inline: auto;
}

.disclaimer-hero-v2 {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  border: 1px solid #e7ded4;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.98), rgb(255 250 239 / 0.94)),
    radial-gradient(circle at 92% 14%, rgb(216 15 47 / 0.08), transparent 34%);
  box-shadow: 0 12px 36px rgb(42 31 24 / 0.06);
}

.disclaimer-hero-v2 h1 {
  max-width: 13em;
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: -0.045em;
}

.disclaimer-hero-v2 p:not(.eyebrow):not(.article-updated) {
  max-width: 48rem;
  margin-top: 0.85rem;
  color: var(--ink-muted);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  font-weight: 700;
  line-height: 1.8;
}

.disclaimer-summary,
.disclaimer-before-buy,
.disclaimer-policy-card,
.disclaimer-contact-card {
  border: 1px solid #e7ded4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(42 31 24 / 0.045);
}

.disclaimer-summary {
  padding: clamp(1.05rem, 2.6vw, 1.6rem);
}

.disclaimer-summary h2,
.disclaimer-before-buy h2,
.disclaimer-policy-card h2,
.disclaimer-contact-card h2 {
  margin: 0;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.035em;
}

.disclaimer-summary h2,
.disclaimer-before-buy h2,
.disclaimer-policy-card h2 {
  font-size: clamp(1.25rem, 2.35vw, 1.7rem);
}

.disclaimer-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.disclaimer-summary-grid > div {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid #efe4d8;
  border-radius: 18px;
  background: #fffdf9;
}

.disclaimer-summary-grid span {
  color: var(--brand);
  font-family: var(--font-num);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.disclaimer-summary-grid p {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.65;
}

.disclaimer-before-buy {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(1rem, 2.6vw, 1.6rem);
  align-items: start;
  padding: clamp(1.1rem, 2.8vw, 1.8rem);
  background: linear-gradient(135deg, #fff7de, #fffdf9 58%, #fff);
}

.disclaimer-before-buy p:not(.eyebrow) {
  max-width: 32rem;
  margin-top: 0.6rem;
  color: var(--ink-muted);
  font-weight: 700;
  line-height: 1.8;
}

.disclaimer-check-table {
  display: grid;
  border: 1px solid #eadfd4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.disclaimer-check-table dl {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  margin: 0;
  border-bottom: 1px solid #eadfd4;
}

.disclaimer-check-table dl:last-child {
  border-bottom: 0;
}

.disclaimer-check-table dt,
.disclaimer-check-table dd {
  margin: 0;
  padding: 0.8rem 0.9rem;
  line-height: 1.7;
}

.disclaimer-check-table dt {
  color: var(--brand-strong);
  font-weight: 900;
  background: #fff4f4;
}

.disclaimer-check-table dd {
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.disclaimer-toc {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--s5);
  padding: 0.85rem;
  border: 1px solid #eadfd4;
  border-radius: 18px;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgb(42 31 24 / 0.05);
}

.disclaimer-toc a {
  padding: 0.45rem 0.7rem;
  border: 1px solid #eadfd4;
  border-radius: 999px;
  background: #fffaf2;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.disclaimer-toc a:hover {
  border-color: rgb(216 15 47 / 0.38);
  color: var(--brand-strong);
  background: #fff;
}

.disclaimer-policy-card {
  padding: clamp(1.15rem, 2.8vw, 1.8rem);
}

.disclaimer-policy-card h2 {
  margin-bottom: 0.85rem;
}

.disclaimer-policy-card p {
  max-width: 58rem;
  color: var(--ink-muted);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.95;
}

.disclaimer-policy-card p + p {
  margin-top: 0.8rem;
}

.disclaimer-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: linear-gradient(135deg, #fff7de, #fffdf9 62%, #fff);
}

.disclaimer-contact-card h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
}

.disclaimer-contact-card p:not(.eyebrow) {
  max-width: 44rem;
  margin-top: 0.5rem;
  color: var(--ink-muted);
  font-weight: 700;
  line-height: 1.75;
}

.disclaimer-contact-card > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 26px rgb(42 31 24 / 0.18);
}

.disclaimer-contact-card > a::after {
  content: ">";
  margin-left: 0.5rem;
}

@media (max-width: 820px) {
  .disclaimer-summary-grid,
  .disclaimer-before-buy,
  .disclaimer-contact-card {
    grid-template-columns: 1fr;
  }

  .disclaimer-toc {
    position: static;
  }

  .disclaimer-check-table dl {
    grid-template-columns: 1fr;
  }

  .disclaimer-contact-card > a {
    width: 100%;
  }
}

/* 2026-08-28 homepage micro-fixes:
   カテゴリ導線のリンクがカード化して崩れる点と、今日見る導線の文字切れを抑える。 */
.gateway-page-v11 .home-v11-category-shelf-head > a {
  display: inline-flex;
  grid-template-columns: none;
  gap: 0.45rem;
  align-items: center;
  align-self: center;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}

.gateway-page-v11 .home-v11-category-shelf-head > a::after {
  margin-left: 0;
}
@media (max-width: 720px) {
  .gateway-page-v11 .home-v11-category-shelf-head {
    flex-wrap: wrap;
  }

  .gateway-page-v11 .home-v11-category-shelf-head > a {
    align-self: flex-start;
  }
}

/* 2026-08-28 homepage recovery pass:
   上段の横はみ出しと「今日見る」導線の潰れを解消し、紙面として読める密度に戻す。 */
.gateway-page-v11 {
  overflow-x: clip;
}

.gateway-page-v11 .home-v11-hero {
  overflow: hidden;
}

.gateway-page-v11 .home-v11-hero-inner,
.gateway-page-v11 .home-v11-today-strip > div,
.gateway-page-v11 .home-v11-proof > div,
.gateway-page-v11 .home-v11-category-shelf-top,
.gateway-page-v11 .home-v11-layout {
  width: min(100% - 40px, 1180px);
}

.gateway-page-v11 .home-v11-hero-copy,
.gateway-page-v11 .home-v11-hero-panel,
.gateway-page-v11 .home-v11-logo-lockup,
.gateway-page-v11 .home-v11-logo-lockup h1,
.gateway-page-v11 .home-v11-hero-sub {
  min-width: 0;
}

.gateway-page-v11 .home-v11-logo-lockup h1 {
  max-width: 9.5em;
}

.gateway-page-v11 .home-v11-hero-sub {
  max-width: 40rem;
  overflow-wrap: anywhere;
}

.gateway-page-v11 .home-v11-hero-sub em {
  white-space: normal;
}
.gateway-page-v11 .home-v11-category-shelf-top {
  margin-top: 1.25rem;
}

@media (max-width: 720px) {
  .gateway-page-v11 .home-v11-hero-inner,
  .gateway-page-v11 .home-v11-today-strip > div,
  .gateway-page-v11 .home-v11-proof > div,
  .gateway-page-v11 .home-v11-category-shelf-top,
  .gateway-page-v11 .home-v11-layout {
    width: min(100% - 32px, 640px);
  }

  .gateway-page-v11 .home-v11-logo-lockup h1 {
    max-width: 7.6em;
    font-size: clamp(2.25rem, 11.2vw, 3.28rem);
    line-height: 1.02;
  }

  .gateway-page-v11 .home-v11-hero-sub {
    font-size: 0.94rem;
    line-height: 1.85;
  }

  .gateway-page-v11 .home-v11-search {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-search button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .gateway-page-v11 .home-v11-logo-lockup h1 {
    font-size: clamp(2rem, 10.5vw, 2.75rem);
  }
}

/* 2026-08-28 mobile overflow hardening:
   古いトップ案由来の横幅指定をスマホでは完全に無効化する。 */
@media (max-width: 720px) {
  .gateway-page-v11,
  .gateway-page-v11 * {
    box-sizing: border-box;
  }

  .gateway-page-v11 {
    max-width: 100%;
    overflow-x: hidden;
  }

  .gateway-page-v11 .home-v11-hero,
  .gateway-page-v11 .home-v11-proof,
  .gateway-page-v11 .home-v11-today-strip,
  .gateway-page-v11 .home-v11-category-shelf,
  .gateway-page-v11 .home-v11-layout,
  .gateway-page-v11 .home-v11-policy,
  .gateway-page-v11 .home-v11-contact-cta {
    max-width: 100%;
    overflow-x: hidden;
  }

  .gateway-page-v11 .home-v11-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .gateway-page-v11 .home-v11-hero-copy,
  .gateway-page-v11 .home-v11-hero-panel,
  .gateway-page-v11 .home-v11-search-shell,
  .gateway-page-v11 .home-v11-search,
  .gateway-page-v11 .home-v11-search-tags,
  .gateway-page-v11 .home-v11-trust-badges {
    width: 100%;
    max-width: 100%;
  }

  .gateway-page-v11 .home-v11-hero-sub,
  .gateway-page-v11 .home-v11-hero-sub em,
  .gateway-page-v11 .home-v11-proof p,
  .gateway-page-v11 .home-v11-proof-note {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .gateway-page-v11 .home-v11-search-tags {
    justify-content: flex-start;
  }

  .gateway-page-v11 .home-v11-search-tags a {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .gateway-page-v11 .home-v11-proof > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .gateway-page-v11 .home-v11-hero-main-card,
  .gateway-page-v11 .home-v11-hero-side-card {
    width: 100%;
    max-width: 100%;
  }

  .gateway-page-v11 .home-v11-hero-card-copy strong,
  .gateway-page-v11 .home-v11-hero-card-copy em {
    overflow-wrap: anywhere;
  }
}

/* /guides の全件索引（app/guides/page.tsx）。
   上の棚は4本ずつの抜粋なので、ハブから全ガイドへ辿れるようにここで受ける。 */
.guide-index-list {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.guide-index-list a {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.875rem;
  line-height: 1.6;
}
.guide-index-list a:hover { border-color: var(--brand); text-decoration: none; }
.guide-index-list a span {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   サービスガイドのレイアウト（2026-08-30）
   これまでガイドは1カラムで、記事ページにある右レール（目次・1位）が無く、
   本文がページ幅いっぱい（75rem）に伸びて1行が長くなりすぎていた。
   見出しもヒーローの2カラムに閉じ込められ、日本語のタイトルが3行に折り返していた。
   記事ページ（.article-layout / .article-toc-rail）と同じ構造にそろえる。
   -------------------------------------------------------------------------- */

/* 見出しと直答はページ幅いっぱいに出す */
.service-guide-headline {
  margin-top: var(--s5);
}
.service-guide-headline h1 {
  font-size: clamp(1.75rem, 4.4vw, 2.5rem);
  line-height: 1.35;
  color: var(--ink-strong);
  letter-spacing: 0.01em;
}
.service-guide-headline .eyebrow { margin-bottom: var(--s2); }
.service-guide-headline .article-answer {
  margin-top: var(--s4);
  max-width: var(--w-content);
}
/* 見出しを外に出したぶん、ヒーローは補足と画像だけになる */
.service-guide-page .service-guide-hero { margin-top: var(--s5); }

/* 本文の読み幅。レールが付いても、段落と箇条書きは42字/行に寄せる */
.service-guide-page .article-body .article-section > p,
.service-guide-page .article-body .service-checklist,
.service-guide-page .article-body .service-cautions ul,
.service-guide-page .article-body .service-sources ul {
  max-width: var(--w-prose);
}
/* 行間が広すぎて、項目どうしの関係が読み取りにくかった */
.service-guide-page .service-checklist { gap: var(--s1); }
.service-guide-page .service-checklist li,
.service-guide-page .service-cautions li,
.service-guide-page .service-sources li {
  line-height: 1.75;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   ガイドを2カラム化したあとの後始末（2026-08-30）

   1) `.service-guide-page article` などに max-width: var(--w-content)（60rem＝960px）が
      掛かっており、1カラム時代はこれで読み幅が収まっていた。2カラムにすると
      本文652px＋レール260pxで960pxを使い切り、ページ枠1200pxに対して右に240pxの
      空白が残って左寄せに見える。レールを出す幅では枠いっぱいまで使う。
   2) 本文中のインライン目次（.article-jump-nav / .service-guide-jump-links）が
      レールの目次と二重に出ていた。記事ページは `.article-body > .article-toc` を
      同じ理由で隠しているので、ガイドもそれに合わせる。
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .service-guide-page article,
  .intent-guide-page article { max-width: none; }

  .service-guide-page .article-body > .article-jump-nav,
  /* サービスガイドのジャンプリンクはヒーロー内にあり .article-body の外側なので、
     .article-body 配下の指定では当たらない。ページ側から直接指定する。 */
  .service-guide-page .service-guide-jump-links,
  .intent-guide-page .article-body > .article-jump-nav,
  .intent-guide-page .article-body [data-article-slot="toc"] { display: none; }
}

/* quickChecks を持たないサービスガイドのヒーロー。
   2カラムのままだとリード文と日付だけの左カラムに対して画像が高く、
   ヒーロー内に大きな空白ができる。1カラムにして画像を横いっぱいに敷く。 */
@media (min-width: 900px) {
  .service-guide-hero-simple { grid-template-columns: 1fr; gap: var(--s5); }
}
.service-guide-hero-simple .service-guide-visual img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* ========================================================================
   article-layout-v2（2026-08-30 導入 / 2026-08-30 正本で再構築）
   以下は配布された article-layout-v2.css をそのまま貼っている。
   独自の追補・上書きは入れない。直したいことがあれば正本側を直す。
   ======================================================================== */
/* ===========================================================
   article-layout-v2 — 比較記事の共通レイアウト
   app/ui-pages.css の末尾に1回だけ追記する。記事ごとの複製は不要。

   使い方：記事のルート要素に class="article-v2 article-shell" を付ける。
   記事ごとに変えるのは下の3変数だけ（アクセント2色＋蛍光ペン1色）。

     <div class="article-v2 article-shell" style="--a2-accent-strong:#143a40;
          --a2-accent:#2c7f83; --a2-marker:#ffe6a3"> … </div>

   それ以外の色はサイト既存トークンを参照している：
     --surface / --surface-sunken / --brand-soft / --line / --line-strong
     --ink / --ink-strong / --ink-muted / --ink-inverse
     --brand（1位カードの赤）/ --store-amazon* / --store-rakuten*
     --accent-warm（注意）/ --accent-good（最安）/ --r-sm / --r-md / --r-full
     --font-num / --w-prose / --shadow-md

   H1 は app/ui.css の .article-head h1 に
     line-height:1.28; letter-spacing:-0.022em;
   を足す（サイズは既存のまま）。palt は body に既に効いている。

   ■ 実装で必ず踏む2点
   1) .article-v2 .article-grid > * に min-width:0 が要る。
      アンカーナビと比較表が overflow-x:auto なので、これが無いと
      グリッドのトラックが min-content 幅まで広がり、狭い画面で右側が全部切れる。
   2) ルート要素自身を指す .article-shell は複合セレクタで書く
      （.article-v2.article-shell）。子孫セレクタだと一致しない。
   =========================================================== */

/* 記事ごとのアクセント。上書きしなければアクションカメラの深緑になる */
.article-v2 {
  --a2-accent-strong: #143a40;
  --a2-accent: #2c7f83;
  --a2-marker: #ffe6a3;
}

.article-v2 a:focus-visible, .article-v2 summary:focus-visible {outline:2px solid var(--accent-warm);outline-offset:2px}


.article-v2.article-shell,
.article-v2 .article-shell {max-width:1120px;margin:0 auto;padding:0 20px 80px}
.article-v2 .article-grid {display:grid;gap:40px;grid-template-columns:1fr}
/* グリッド／フレックスの子は min-width:auto が既定で、中の overflow-x:auto な
   要素（アンカーナビ・比較表）の min-content 幅までトラックが広がってしまう。
   390px の画面で本文カラムが829pxになり、右側が全部見切れる原因。 */
.article-v2 .article-grid > * {min-width:0}
.article-v2 .article-anchors {min-width:0}

/* --- パンくず --- */
.article-v2 .breadcrumbs {font-size:.78rem;color:var(--ink-muted);padding:18px 0 0;
  display:flex;flex-wrap:wrap;gap:6px}
.article-v2 .breadcrumbs a {color:var(--ink-muted);text-decoration:none}
.article-v2 .breadcrumbs a:hover {text-decoration:underline}

/* --- ヒーロー（layout-spec 2節） --- */
.article-v2 .article-head {padding:18px 0 0}
.article-v2 .article-badge {display:inline-block;padding:3px 10px;border-radius:var(--r-sm);
  background:var(--a2-accent-strong);color:var(--ink-inverse);
  font-size:.72rem;font-weight:700;letter-spacing:.06em}
.article-v2 .article-head h1 {font-weight:900;color:var(--ink-strong);
  max-width:16em;margin:12px 0 0;
  font-size:clamp(1.5rem,6.2vw,2.15rem);line-height:1.28;letter-spacing:-.022em;
  text-wrap:balance;overflow-wrap:normal}
.article-v2 .article-subtitle {margin:8px 0 0;font-size:.95rem;line-height:1.65;
  font-weight:500;color:var(--ink-muted)}
.article-v2 .article-answer {margin:16px 0 0;border:1px solid var(--a2-accent-strong);
  border-radius:var(--r-md);background:var(--surface-sunken);padding:16px 18px}
.article-v2 .article-answer .label {font-family:var(--font-num);font-size:.68rem;letter-spacing:.12em;
  color:var(--a2-accent);display:block;margin-bottom:6px;font-variant-numeric:tabular-nums}
.article-v2 .article-answer p {margin:0;font-size:1rem;line-height:1.75;color:var(--ink-strong);font-weight:700}
.article-v2 .article-answer small {display:block;margin-top:9px;font-size:.83rem;font-weight:400;
  color:var(--accent-warm);line-height:1.7}

/* --- アンカーナビ --- */
.article-v2 .article-anchors {position:sticky;top:0;z-index:20;
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:10px 20px;margin:26px -20px 0;
  background:var(--surface);border-bottom:1px solid var(--line);scrollbar-width:none}
.article-v2 .article-anchors::-webkit-scrollbar {display:none}
.article-v2 .article-anchors a {flex:none;font-size:.78rem;font-weight:500;text-decoration:none;
  color:var(--ink);border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-full);padding:5px 13px;white-space:nowrap}
.article-v2 .article-anchors a:hover {border-color:var(--a2-accent);color:var(--a2-accent)}

/* --- セクション --- */
.article-v2 .article-section {padding-top:56px;scroll-margin-top:64px}
.article-v2 .article-section > h2 {font-weight:900;color:var(--ink-strong);
  font-size:clamp(1.2rem,4.6vw,1.5rem);line-height:1.5;letter-spacing:-.012em;
  font-feature-settings:"palt";margin:0 0 8px;display:flex;gap:11px;align-items:baseline}
.article-v2 .article-section > h2 .step {font-family:var(--font-num);font-size:.82rem;font-weight:500;
  color:var(--a2-accent);border-bottom:2px solid var(--a2-accent);padding-bottom:2px;
  flex:none;font-variant-numeric:tabular-nums}
.article-v2 .section-lead {margin:0 0 24px;font-size:.95rem;color:var(--ink-muted);
  line-height:1.85;max-width:var(--w-prose)}
.article-v2 h3 {font-weight:700;color:var(--ink-strong);
  font-size:1rem;line-height:1.6;margin:0 0 8px}
.article-v2 p {margin:0 0 14px}

/* --- アイキャッチ（my-best 型：H1の上・全幅） --- */
.article-v2 .article-eyecatch {margin:18px -20px 0;overflow:hidden;background:var(--surface-sunken)}
.article-v2 .article-eyecatch img {display:block;width:100%;height:auto}

/* --- ヒーロー本体 --- */
.article-v2 .article-byline {display:grid;grid-template-columns:34px 1fr;gap:10px;
  align-items:center;margin-top:14px}
.article-v2 .byline-mark {width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--a2-accent-strong);color:var(--ink-inverse);
  font-size:.82rem;font-weight:700}
.article-v2 .article-byline b {display:block;font-size:.84rem;color:var(--ink-strong);
  font-weight:700;line-height:1.5}
.article-v2 .article-byline small {display:block;font-family:var(--font-num);font-size:.7rem;
  color:var(--ink-muted);line-height:1.6;font-variant-numeric:tabular-nums}

/* --- 商品写真 --- */
.article-v2 .pcard-thumb {display:grid;gap:5px;justify-items:center}
.article-v2 .pcard-thumb img {width:64px;height:64px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm)}
.article-v2 .prod-cell {display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start}
.article-v2 .prod-cell img {width:48px;height:48px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm)}
.article-v2 .product-head {display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;margin-bottom:14px}
.article-v2 .product-photo {width:96px;height:96px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md)}
/* --- サイドバーの1位カード。サイトの「この記事の1位」カードに合わせる：
       赤のラベル → 商品画像 → 商品名 → 税込価格 → 全幅の購入ボタン --- */
.article-v2 .article-rail .rail-card.rail-best {
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-md);
}
.article-v2 .article-rail .rail-best .rail-best-head { margin: 0 0 14px }
.article-v2 .rail-rank {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-sm);
  background: var(--brand); color: var(--ink-inverse);
  font-size: .95rem; font-weight: 700;
}
/* 画像は横長に切る。正方形を全幅に敷くとカードだけで
   サイドバーの1画面を使い切ってしまう。 */
.article-v2 .rail-best-visual {
  margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; overflow: hidden;
}
.article-v2 .rail-best-visual img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: contain;
}
.article-v2 .article-rail .rail-best .p-name { font-size: 1rem; margin-bottom: 10px }
.article-v2 .article-rail .rail-best .p-price {
  margin: 0; font-size: 1.65rem; font-weight: 700; color: var(--brand);
  font-family: var(--font-num); font-variant-numeric: tabular-nums; line-height: 1.35;
}
.article-v2 .article-rail .rail-best .p-best { margin-bottom: 12px }
.article-v2 .article-rail .rail-best .btn { display: block; width: 100%; text-align: center }

.article-v2 .rail-pick {display:grid;grid-template-columns:64px 1fr;gap:12px;
  align-items:start;margin-bottom:11px}
.article-v2 .rail-photo {width:64px;height:64px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);display:block}

/* --- 見出しの蛍光ペン --- */
/* 背景グラデーションで下半分だけ塗る。text-decoration より線が太く、
   行が折り返しても各行に乗る。印刷・ハイコントラストでも文字は残る。 */
.article-v2 .hl {
  background-image: linear-gradient(transparent 58%, var(--a2-marker) 58%);
  background-repeat: no-repeat;
  padding-inline: 2px;
}
.article-v2 h3 .hl { background-image: linear-gradient(transparent 64%, var(--a2-marker) 64%); }
@media (prefers-contrast: more) {
  .article-v2 .hl { background-image: none; text-decoration: underline; }
}

/* --- 本文中の商品リンク（該当する商品詳細へ飛ぶ） --- */
.article-v2 .prod-link {
  color: var(--ink-strong); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--a2-accent);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.article-v2 .prod-link:hover { color: var(--a2-accent); }
/* 商品名そのものを表示している欄（早見表の候補・比較カード名・価格の目安の注記・
   連続撮影バーのラベル・サイドバー）は、周囲の字面を保ったまま下線だけ細く出す。
   ここまで太字＋濃色にすると、見出しなのかリンクなのか判別がつかなくなる。 */
.article-v2 .pcard-name .prod-link,
.article-v2 .quick-pick .pick .prod-link,
.article-v2 .metric-bar-head .prod-link,
.article-v2 .article-rail .p-name .prod-link,
.article-v2 .price-stat .n .prod-link {
  color: inherit; font-weight: inherit;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.article-v2 .pcard-name .prod-link:hover,
.article-v2 .quick-pick .pick .prod-link:hover,
.article-v2 .metric-bar-head .prod-link:hover,
.article-v2 .article-rail .p-name .prod-link:hover,
.article-v2 .price-stat .n .prod-link:hover {
  color: var(--a2-accent); text-decoration-color: var(--a2-accent);
}

/* --- 1 選び方 --- */
.article-v2 .choose-axes {display:grid;gap:14px;grid-template-columns:1fr}
.article-v2 .choose-axis {border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:18px}
.article-v2 .choose-axis .step {font-family:var(--font-num);font-size:.7rem;color:var(--a2-accent-strong);
  background:color-mix(in srgb, var(--a2-accent) 12%, #fff);width:24px;height:24px;display:grid;place-items:center;
  border-radius:var(--r-sm);margin-bottom:10px;font-variant-numeric:tabular-nums}
.article-v2 .choose-axis p {font-size:.875rem;line-height:1.85;margin:0}
.article-v2 .choose-axis .example {margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-muted)}
.article-v2 .choose-axis .example b {color:var(--ink-strong);font-weight:700}

/* --- 2 早見表 --- */
.article-v2 .quick-picks {border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);overflow:hidden}
.article-v2 .quick-pick {border-bottom:1px solid var(--line)}
.article-v2 .quick-pick:last-child {border-bottom:0}
.article-v2 .quick-pick summary {list-style:none;cursor:pointer;padding:14px 16px;
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.article-v2 .quick-pick summary::-webkit-details-marker {display:none}
.article-v2 .quick-pick .need {font-weight:700;color:var(--a2-accent);
  font-size:.82rem;grid-column:1/-1}
.article-v2 .quick-pick .pick {font-weight:700;color:var(--ink-strong);
  font-size:.95rem;line-height:1.55}
.article-v2 .quick-pick .price {font-family:var(--font-num);font-size:1.2rem;font-weight:700;color:var(--ink-strong);
  white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.article-v2 .quick-pick .price span {display:block;font-size:.66rem;color:var(--accent-good);font-weight:700}
.article-v2 .quick-pick .reason {margin:0;padding:0 16px 16px;font-size:.875rem;
  line-height:1.85;color:var(--ink-muted)}
.article-v2 .quick-pick .reason a {font-weight:700}
.article-v2 .price-asof {margin:10px 0 0;font-size:.72rem;color:var(--ink-muted)}

/* --- 3 買う前に確認する3点 --- */
.article-v2 .pre-checks {display:grid;gap:14px;grid-template-columns:1fr}
.article-v2 .pre-check {border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:18px}
.article-v2 .pre-check .tag {font-family:var(--font-num);font-size:.68rem;letter-spacing:.08em;
  color:var(--a2-accent);display:block;margin-bottom:8px;font-variant-numeric:tabular-nums}
.article-v2 .pre-check p {font-size:.875rem;line-height:1.85;margin:0}
.article-v2 .article-callout {margin:20px 0 0;border-left:3px solid var(--accent-warm);background:var(--accent-warm-soft);
  padding:14px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.875rem;line-height:1.85}
.article-v2 .article-callout b {color:var(--ink-strong)}

/* --- 4 比較一覧：カード（≤767px） --- */
.article-v2 .compare-cards {display:grid;gap:12px}
.article-v2 .pcard {padding:15px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.article-v2 .pcard-head {display:grid;grid-template-columns:64px 1fr;gap:13px;align-items:start}
.article-v2 .pcard-rank {font-family:var(--font-num);font-size:.68rem;color:var(--a2-accent);
  font-variant-numeric:tabular-nums}
.article-v2 .pcard-name {font-weight:700;font-size:.95rem;
  line-height:1.5;color:var(--ink-strong);margin:0}
.article-v2 .pcard-for {margin:3px 0 0;font-size:.8rem;color:var(--a2-accent);font-weight:500}
.article-v2 .pcard-spec {display:grid;grid-template-columns:auto 1fr;gap:7px 16px;
  margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-size:.9375rem}
.article-v2 .pcard-spec dt {color:var(--ink-muted);white-space:nowrap}
.article-v2 .pcard-spec dd {margin:0;color:var(--ink-strong);font-family:var(--font-num);
  font-variant-numeric:tabular-nums}
.article-v2 .pcard-buy {display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.article-v2 .pcard-price {font-family:var(--font-num);font-size:1.35rem;font-weight:700;
  color:var(--ink-strong);font-variant-numeric:tabular-nums}
.article-v2 .pcard-price span {display:block;font-size:.68rem;color:var(--accent-good)}

.article-v2 .btn {font-size:.83rem;font-weight:700;text-decoration:none;padding:11px 15px;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--a2-accent-strong);color:var(--ink-inverse);
  white-space:nowrap}
.article-v2 .btn.is-ghost {background:transparent;color:var(--a2-accent);border:1px solid var(--line);padding:10px 14px}
/* 販売先ごとの色。サイト既存の --store-* をそのまま使う。
   ティール＝サイト内リンク、オレンジ＝Amazon、赤＝楽天で役割が分かれる。 */
.article-v2 .btn.is-amazon {
  background:var(--store-amazon); color:var(--store-amazon-ink); border:0}
.article-v2 .btn.is-amazon:hover {background:var(--store-amazon-strong)}
.article-v2 .btn.is-rakuten {
  background:var(--store-rakuten); color:var(--store-rakuten-ink); border:0}
.article-v2 .btn.is-rakuten:hover {background:var(--store-rakuten-strong)}
/* メーカー公式（A8経由）。Amazon・楽天と区別が付くよう、サイトのアクセント側の色を使う。 */
.article-v2 .btn.is-official {
  background:var(--a2-accent-strong); color:var(--ink-inverse); border:0}
.article-v2 .btn.is-official:hover {background:var(--a2-accent)}

/* --- 4 比較一覧：表（≥768px） --- */
.article-v2 .compare-table-wrap {display:none;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);
  background-image:linear-gradient(to left,var(--surface),rgba(0,0,0,0)),linear-gradient(to left,rgba(15,23,32,.16),rgba(0,0,0,0));
  background-position:right center,right center;background-repeat:no-repeat;
  background-size:28px 100%,12px 100%;background-attachment:local,scroll}
.article-v2 .compare-table-wrap:focus-visible {outline:2px solid var(--a2-accent-strong);outline-offset:2px}
.article-v2 .compare-table-v2 {width:100%;min-width:840px;border-collapse:collapse;font-size:.85rem}
.article-v2 .compare-table-v2 th, .article-v2 .compare-table-v2 td {
  padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.7}
.article-v2 .compare-table-v2 thead th {background:#f6f8f9;color:var(--ink-strong);
  font-size:.78rem;font-weight:700;white-space:nowrap}
.article-v2 .compare-table-v2 tbody th {background:var(--surface-sunken);color:var(--ink-strong);
  font-weight:700;position:sticky;left:0;z-index:1;min-width:220px}
.article-v2 .compare-table-v2 tbody th small {display:block;font-family:var(--font-num);
  font-size:.68rem;color:var(--ink-muted);font-weight:400;font-variant-numeric:tabular-nums}
.article-v2 .compare-table-v2 td.spec {font-family:var(--font-num);font-size:.94rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-strong)}
.article-v2 .compare-table-v2 td.price {font-family:var(--font-num);font-size:1.05rem;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--ink-strong);font-weight:500}
.article-v2 .compare-table-v2 td.price span {display:block;
  font-size:.68rem;color:var(--accent-good);font-weight:700}
.article-v2 .compare-table-v2 thead .prod-cell span,
.article-v2 .compare-table-v2 thead .prod-cell small,
.article-v2 .compare-table-v2 thead a {
  color:var(--ink-strong);
}
.article-v2 .compare-table-v2 tbody tr:last-child th, .article-v2 .compare-table-v2 tbody tr:last-child td {border-bottom:0}

.article-v2 .price-stats {display:grid;gap:12px;grid-template-columns:1fr;margin-top:18px}
.article-v2 .price-stat {border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:14px 16px}
.article-v2 .price-stat .k {font-size:.74rem;color:var(--ink-muted);display:block}
.article-v2 .price-stat .v {font-family:var(--font-num);font-size:1.6rem;font-weight:700;color:var(--ink-strong);
  font-variant-numeric:tabular-nums;display:block;margin:2px 0 3px}
.article-v2 .price-stat .n {font-size:.76rem;color:var(--ink-muted)}

/* --- 5 商品詳細 --- */
.article-v2 .product-entry {border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  padding:20px;margin-bottom:16px;scroll-margin-top:64px}
.article-v2 .product-entry .rank {font-family:var(--font-num);font-size:.7rem;color:var(--a2-accent);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.article-v2 .product-entry h3 {margin:6px 0 4px;font-size:1.08rem}
.article-v2 .product-entry .why {font-size:.8rem;color:var(--a2-accent);font-weight:500;margin:0 0 12px}
.article-v2 .product-entry .body {font-size:.9rem;line-height:1.9;margin:0 0 14px;max-width:var(--w-prose)}
.article-v2 .product-fit {display:grid;gap:10px;grid-template-columns:1fr;margin:0 0 14px}
.article-v2 .product-fit div {border-radius:var(--r-sm);padding:11px 13px;font-size:.84rem;line-height:1.75;
  background:var(--surface-sunken)}
.article-v2 .product-fit .is-for {border-left:3px solid var(--accent-good)}
.article-v2 .product-fit .is-caution {border-left:3px solid var(--accent-warm)}
.article-v2 .product-fit b {display:block;font-size:.72rem;letter-spacing:.04em;margin-bottom:3px;
  color:var(--ink-muted);font-weight:500}
.article-v2 .product-chips {display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.article-v2 .product-chips span {font-family:var(--font-num);font-size:.9375rem;font-weight:500;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:3px 9px;color:var(--ink-strong);background:var(--surface-sunken);font-variant-numeric:tabular-nums}
.article-v2 .product-buys {display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.article-v2 .pr-note {margin:12px 0 0;font-size:.72rem;color:var(--ink-muted);line-height:1.7}

/* --- 6 バー --- */
.article-v2 .metric-bars {border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:18px}
.article-v2 .metric-bar {margin-bottom:16px}
.article-v2 .metric-bar:last-of-type {margin-bottom:0}
.article-v2 .metric-bar-head {display:flex;justify-content:space-between;gap:12px;
  align-items:baseline;font-size:.86rem}
.article-v2 .metric-bar-head b {color:var(--ink-strong);font-weight:700}
.article-v2 .metric-bar-head .v {font-family:var(--font-num);font-size:1.15rem;font-weight:700;color:var(--ink-strong);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.article-v2 .metric-bar-track {height:9px;border-radius:var(--r-full);background:var(--brand-soft);
  margin-top:7px;overflow:hidden}
.article-v2 .metric-bar-track i {display:block;height:100%;background:var(--a2-accent);border-radius:var(--r-full)}
.article-v2 .metric-bar-note {margin:5px 0 0;font-size:.75rem;color:var(--ink-muted)}

/* --- 7 FAQ --- */
.article-v2 .article-faq {border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);overflow:hidden}
.article-v2 .article-faq details {border-bottom:1px solid var(--line)}
.article-v2 .article-faq details:last-child {border-bottom:0}
.article-v2 .article-faq summary {cursor:pointer;list-style:none;padding:15px 16px;
  font-weight:700;color:var(--ink-strong);
  font-size:.92rem;line-height:1.6;display:grid;grid-template-columns:auto 1fr;gap:10px}
.article-v2 .article-faq summary::-webkit-details-marker {display:none}
.article-v2 .article-faq summary::before {content:"Q";font-family:var(--font-num);color:var(--a2-accent);font-size:.8rem;font-variant-numeric:tabular-nums}
.article-v2 .article-faq p {margin:0;padding:0 16px 16px 42px;font-size:.875rem;
  line-height:1.85;color:var(--ink-muted)}

/* --- 8 次に読む --- */
.article-v2 .next-group {margin-bottom:22px}
.article-v2 .next-group h3 {font-size:.78rem;font-family:var(--font-num);font-weight:400;
  letter-spacing:.08em;color:var(--ink-muted);margin:0 0 10px;font-variant-numeric:tabular-nums}
.article-v2 .next-list {list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
.article-v2 .next-list a {display:block;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:12px 14px;text-decoration:none;
  color:var(--ink-strong);font-size:.86rem;line-height:1.6}
.article-v2 .next-list a.has-visual {padding:0;overflow:hidden}
.article-v2 .next-card-visual {
  display:grid;
  place-items:center;
  min-height:260px;
  padding:16px;
  overflow:hidden;
  background:var(--surface-sunken);
  border-bottom:1px solid var(--line)
}
.article-v2 .next-list a.has-visual .next-card-visual img {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:260px;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center
}
.article-v2 .next-card-label {display:block;padding:18px 18px 20px;font-size:clamp(1.06rem,.9rem + .56vw,1.24rem);line-height:1.7;font-weight:700}
.article-v2 .next-list a:hover {border-color:var(--a2-accent)}
.article-v2 .next-list a::after {content:" →";color:var(--a2-accent)}

/* --- サイドバー --- */
.article-v2 .article-rail {display:none}
.article-v2 .article-rail .rail-card {border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:18px;margin-bottom:16px}
.article-v2 .article-rail h4 {margin:0 0 12px;font-family:var(--font-num);font-size:.7rem;
  letter-spacing:.1em;color:var(--ink-muted);font-weight:400;font-variant-numeric:tabular-nums}
.article-v2 .article-toc-v2 {list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.84rem}
.article-v2 .article-toc-v2 a {display:flex;align-items:flex-start;gap:7px;text-decoration:none;color:var(--ink)}
.article-v2 .article-toc-v2 a:hover {color:var(--a2-accent)}
.article-v2 .article-toc-v2 .i {flex:none;font-family:var(--font-num);color:var(--a2-accent);font-size:.76rem;font-variant-numeric:tabular-nums}
.article-v2 .rail-card .p-name {font-weight:700;color:var(--ink-strong);
  font-size:.92rem;line-height:1.5;margin:0 0 4px}
.article-v2 .rail-card .p-note {font-size:.78rem;color:var(--ink-muted);margin:0 0 12px;line-height:1.7}
.article-v2 .rail-card .p-price {font-family:var(--font-num);font-size:1.3rem;font-weight:700;color:var(--ink-strong);
  font-variant-numeric:tabular-nums;display:block;margin-top:4px}
.article-v2 .rail-card .p-best {font-size:.68rem;color:var(--accent-good);display:block;line-height:1.5}
.article-v2 .rail-card .product-buys {flex-direction:column;align-items:stretch}
.article-v2 .rail-card .btn {text-align:center}
.article-v2 .decision-order {list-style:none;margin:0;padding:0;counter-reset:o;
  font-size:.83rem;display:grid;gap:8px}
.article-v2 .decision-order li {counter-increment:o;display:grid;grid-template-columns:auto 1fr;
  gap:9px;line-height:1.65}
.article-v2 .decision-order li::before {content:counter(o);font-family:var(--font-num);font-size:.7rem;
  color:var(--a2-accent);border:1px solid var(--line);border-radius:var(--r-sm);
  width:20px;height:20px;display:grid;place-items:center;margin-top:2px;font-variant-numeric:tabular-nums}

.article-v2 .article-footer {margin-top:56px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-muted);line-height:1.85}

/* ===== ブレークポイント（layout-spec 1節） ===== */
@media (min-width:640px) {
  .article-v2 .choose-axes {grid-template-columns:1fr 1fr}
  .article-v2 .article-eyecatch {margin-inline:0;border:1px solid var(--line);
    border-radius:var(--r-md)}
  .article-v2 .product-head {grid-template-columns:120px 1fr;gap:20px}
  .article-v2 .product-photo {width:120px;height:120px}
  .article-v2 .product-fit {grid-template-columns:1fr 1fr}
  .article-v2 .price-stats {grid-template-columns:repeat(3,1fr)}
  .article-v2 .next-list {grid-template-columns:1fr 1fr}
}
@media (min-width:768px) {
  .article-v2 .compare-cards {display:none}
  .article-v2 .compare-table-wrap {display:block}
  .article-v2 .pre-checks {grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1000px) {
  .article-v2 .article-grid {grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
  .article-v2 .article-rail {display:block;position:sticky;top:64px}
  .article-v2 .choose-axes {grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce) {.article-v2 * {animation:none!important;transition:none!important}}

/* 2026-08-31 top editorial refresh:
   検索と注目記事を第一画面で見つけやすくし、赤一色の印象を弱める。 */
body:has(.gateway-page-v11) {
  background: #f7f8f5;
}

body:has(.gateway-page-v11) .global-site-header {
  background: rgb(247 248 245 / 0.94);
  border-bottom: 1px solid #dfe5dc;
}

.gateway-page-v11 {
  background:
    linear-gradient(180deg, #f7f8f5 0, #ffffff 680px, #ffffff 100%);
  color: #15191a;
}

.gateway-page-v11 .home-v11-hero {
  min-height: 620px;
  padding: 44px 0 34px;
  border-bottom: 1px solid #dfe5dc;
  background:
    linear-gradient(90deg, rgb(247 248 245 / 0.98) 0%, rgb(247 248 245 / 0.94) 42%, rgb(247 248 245 / 0.74) 64%, rgb(247 248 245 / 0.4) 100%),
    url("/home-renewal/home-september-hero-v2.png") right center / min(52vw, 680px) auto no-repeat,
    #f7f8f5;
  text-align: left;
}

.gateway-page-v11 .home-v11-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 8px;
  background: linear-gradient(90deg, #d7202a 0 26%, #0f766e 26% 58%, #f4b000 58% 78%, #15191a 78% 100%);
  opacity: 1;
}

.gateway-page-v11 .home-v11-pattern {
  display: none;
}

.gateway-page-v11 .home-v11-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr);
  gap: 32px;
  align-items: center;
  width: min(100% - 56px, 1180px);
  margin-inline: auto;
}

.gateway-page-v11 .home-v11-hero-copy {
  max-width: 620px;
}

.gateway-page-v11 .home-v11-hero-cap {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 16px;
  padding: 0 12px;
  border: 1px solid #b9d9d3;
  border-radius: 6px;
  background: #eef8f5;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
}

.gateway-page-v11 .home-v11-logo-lockup {
  display: block;
  margin: 0 0 18px;
}

.gateway-page-v11 .home-v11-logo-lockup h1 {
  max-width: 9em;
  margin: 0;
  color: #121416;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.gateway-page-v11 .home-v11-logo-lockup h1 em {
  color: #0f766e;
  font-style: normal;
  background: linear-gradient(transparent 70%, rgb(244 176 0 / 0.36) 70%);
}

.gateway-page-v11 .home-v11-logo-lockup h1 em::after {
  content: none;
}

.gateway-page-v11 .home-v11-hero-sub {
  max-width: 44rem;
  margin: 0 0 20px;
  color: #394240;
  font-size: 1.02rem;
  line-height: 1.95;
}

.gateway-page-v11 .home-v11-hero-sub em {
  color: #15191a;
  background: transparent;
  font-style: normal;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 620px;
  margin: 0 0 18px;
}

.gateway-page-v11 .home-v11-trust-badges span {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid #d9e3de;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.86);
  box-shadow: none;
}

.gateway-page-v11 .home-v11-trust-badges b {
  color: #d7202a;
  font-size: 0.7rem;
  font-weight: 900;
}

.gateway-page-v11 .home-v11-trust-badges small {
  color: #26302e;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45;
}

.gateway-page-v11 .home-v11-search {
  grid-template-columns: minmax(0, 1fr) 104px;
  min-height: 62px;
  border: 2px solid #15191a;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 0 rgb(15 118 110 / 0.12);
}

.gateway-page-v11 .home-v11-search input {
  font-size: 1rem;
}

.gateway-page-v11 .home-v11-search button {
  background: #15191a;
  color: #fff;
}

.gateway-page-v11 .home-v11-search button:hover,
.gateway-page-v11 .home-v11-search button:focus-visible {
  background: #0f766e;
}

.gateway-page-v11 .home-v11-search-tags {
  justify-content: flex-start;
  gap: 7px;
  margin-top: 14px;
}

.gateway-page-v11 .home-v11-search-tags a {
  min-height: 34px;
  border-color: #d9e3de;
  border-radius: 6px;
  background: #fff;
  color: #15191a;
  font-size: 0.82rem;
  font-weight: 800;
}

.gateway-page-v11 .home-v11-search-tags a:hover,
.gateway-page-v11 .home-v11-search-tags a:focus-visible {
  border-color: #0f766e;
  background: #eef8f5;
  color: #0f766e;
}

.gateway-page-v11 .home-v11-hero-panel {
  display: grid;
  gap: 12px;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gateway-page-v11 .home-v11-hero-main-card,
.gateway-page-v11 .home-v11-hero-side-card {
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 126px;
  border: 1px solid #d9e3de;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 16px 34px rgb(21 25 26 / 0.1);
}

.gateway-page-v11 .home-v11-hero-main-card img,
.gateway-page-v11 .home-v11-hero-main-card .image-neutral-fallback,
.gateway-page-v11 .home-v11-hero-side-card img,
.gateway-page-v11 .home-v11-hero-side-card .image-neutral-fallback {
  width: 132px;
  height: 126px;
  min-height: 126px;
  border-radius: 8px 0 0 8px;
  object-fit: cover;
}

.gateway-page-v11 .home-v11-hero-card-copy {
  padding: 14px 15px;
}

.gateway-page-v11 .home-v11-hero-card-copy small {
  color: #0f766e;
}

.gateway-page-v11 .home-v11-hero-card-copy strong {
  color: #15191a;
  font-size: 1.02rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.gateway-page-v11 .home-v11-hero-card-copy em {
  color: #56615f;
  font-size: 0.78rem;
}

.gateway-page-v11 .home-v11-ribbon {
  border-radius: 4px;
  background: #d7202a;
}
.gateway-page-v11 .home-v11-proof {
  background: #ffffff;
  color: #15191a;
}

.gateway-page-v11 .home-v11-proof > div {
  justify-content: flex-start;
  width: min(100% - 56px, 1180px);
  padding: 12px 0;
}

.gateway-page-v11 .home-v11-proof b,
.gateway-page-v11 .home-v11-proof span {
  color: #0f766e;
}

.gateway-page-v11 .home-v11-category-shelf-top {
  margin-top: 18px;
}

.gateway-page-v11 .home-v11-category-shelf-top a {
  border-color: #d9e3de;
  border-radius: 8px;
}

@media (max-width: 1060px) {
  .gateway-page-v11 .home-v11-hero {
    min-height: 0;
    background:
      linear-gradient(180deg, rgb(247 248 245 / 0.96), rgb(247 248 245 / 0.92)),
      url("/home-renewal/home-september-hero-v2.png") center top / cover no-repeat,
      #f7f8f5;
  }

  .gateway-page-v11 .home-v11-hero-inner {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-hero-copy {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .gateway-page-v11 .home-v11-hero {
    padding: 28px 0 28px;
  }

  .gateway-page-v11 .home-v11-hero-inner,
  .gateway-page-v11 .home-v11-today-strip > div,
  .gateway-page-v11 .home-v11-proof > div {
    width: min(100% - 32px, 640px);
  }

  .gateway-page-v11 .home-v11-logo-lockup h1 {
    font-size: 2.45rem;
  }

  .gateway-page-v11 .home-v11-trust-badges {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-search {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-search input {
    min-height: 54px;
  }

  .gateway-page-v11 .home-v11-search button {
    min-height: 48px;
  }

  .gateway-page-v11 .home-v11-hero-main-card,
  .gateway-page-v11 .home-v11-hero-side-card {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 108px;
  }

  .gateway-page-v11 .home-v11-hero-main-card img,
  .gateway-page-v11 .home-v11-hero-main-card .image-neutral-fallback,
  .gateway-page-v11 .home-v11-hero-side-card img,
  .gateway-page-v11 .home-v11-hero-side-card .image-neutral-fallback {
    width: 96px;
    height: 108px;
    min-height: 108px;
  }
}

/* 2026-08-31 top mobile repair:
   直前の刷新でスマホ本文が横へ伸びたため、第一画面だけ幅を厳密に閉じる。 */
@media (max-width: 720px) {
  html,
  body:has(.gateway-page-v11) {
    max-width: 100%;
    overflow-x: hidden;
  }

  .gateway-page-v11,
  .gateway-page-v11 .home-v11-hero,
  .gateway-page-v11 .home-v11-hero-inner,
  .gateway-page-v11 .home-v11-hero-copy,
  .gateway-page-v11 .home-v11-hero-panel,
  .gateway-page-v11 .home-v11-search-shell,
  .gateway-page-v11 .home-v11-search,
  .gateway-page-v11 .home-v11-search-tags {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .gateway-page-v11 .home-v11-hero-inner {
    display: grid;
    gap: 18px;
  }

  .gateway-page-v11 .home-v11-logo-lockup h1 {
    max-width: 100%;
    font-size: 2.25rem;
    line-height: 1.12;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .gateway-page-v11 .home-v11-hero-sub,
  .gateway-page-v11 .home-v11-hero-sub em {
    max-width: 100%;
    white-space: normal;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .gateway-page-v11 .home-v11-hero-sub {
    font-size: 0.86rem;
    line-height: 1.9;
  }

  .gateway-page-v11 .home-v11-search-tags {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .gateway-page-v11 .home-v11-search-tags a {
    flex: 0 0 auto;
  }

  .gateway-page-v11 .home-v11-hero-card-copy strong,
  .gateway-page-v11 .home-v11-hero-card-copy em {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* 2026-08-31 weekly-strip polish:
   「今週見る6本」の見出しを重すぎない紙面トーンへ戻し、
   6枚カードに強弱をつけて視線が流れるようにする。 */
/* 2026-09-04 top upper additions: storm notice, September tasks, and visible FAQ. */
.gateway-page-v11 .home-september-band {
  --home-september-brand: var(--brand, #c8102e);
  --home-september-ink: var(--ink-strong, #1a1a1a);
  --home-september-muted: var(--ink-muted, #6f6f6f);
  --home-september-line: var(--brand-line, #dedede);
  display: flex;
  align-items: center;
  gap: 0.88rem;
  padding: 0.64rem max(1rem, calc((100vw - 1120px) / 2));
  background: var(--home-september-brand);
  color: #fff;
  text-decoration: none;
}

.gateway-page-v11 .home-september-band-thumb,
.gateway-page-v11 .home-september-band .image-neutral-fallback.home-september-band-thumb {
  flex: 0 0 auto;
  display: block;
  width: 52px;
  height: 52px;
  border: 2px solid rgb(255 255 255 / 0.86);
  border-radius: 0;
  background: rgb(255 255 255 / 0.14);
  object-fit: cover;
}

.gateway-page-v11 .home-september-band-tag {
  flex: 0 0 auto;
  padding: 0.24rem 0.5rem;
  background: #fff;
  color: var(--home-september-brand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.gateway-page-v11 .home-september-band-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.05rem;
}

.gateway-page-v11 .home-september-band-text strong {
  font-size: 1.1rem;
  line-height: 1.35;
}

.gateway-page-v11 .home-september-band-text small {
  font-size: 0.79rem;
  line-height: 1.55;
  opacity: 0.92;
}

.gateway-page-v11 .home-september-band-arrow {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.gateway-page-v11 .home-september-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.88rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #1d1713;
}

.gateway-page-v11 .home-september-head small {
  color: #b2643d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.gateway-page-v11 .home-september-head h2 {
  margin: 0;
  color: #201510;
  font-size: 1.25rem;
  line-height: 1.35;
}

.gateway-page-v11 .home-september-head > span {
  padding: 0.18rem 0.5rem;
  background: #201510;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

.gateway-page-v11 .home-september-head > a {
  margin-left: auto;
  color: #b2643d;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.gateway-page-v11 .home-september-todo {
  padding: 1.6rem 0;
  border-block: 1px solid #e8dfd5;
  background: #fff;
}

.gateway-page-v11 .home-september-todo-inner,
.gateway-page-v11 .home-september-faq-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.gateway-page-v11 .home-september-todo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.gateway-page-v11 .home-september-todo-card {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  border: 1px solid #e7ddd2;
  border-top: 4px solid #b2643d;
  background: #fff;
  color: #201510;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.gateway-page-v11 .home-september-todo-card:hover,
.gateway-page-v11 .home-september-todo-card:focus-visible {
  border-color: #d5bea7;
  background: #fffaf4;
  transform: translateY(-1px);
}

.gateway-page-v11 .home-september-todo-no {
  display: flex;
  justify-content: center;
  padding-top: 0.88rem;
  color: #b2643d;
  font-size: 1.38rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gateway-page-v11 .home-september-todo-copy {
  display: block;
  padding: 0.82rem 0.92rem 0.88rem;
}

.gateway-page-v11 .home-september-todo-copy small {
  display: block;
  color: #74685f;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.gateway-page-v11 .home-september-todo-copy strong {
  display: block;
  margin: 0.12rem 0 0.28rem;
  color: #201510;
  font-size: 1.03rem;
  line-height: 1.4;
}

.gateway-page-v11 .home-september-todo-copy em {
  display: block;
  color: #74685f;
  font-size: 0.79rem;
  font-style: normal;
  line-height: 1.7;
}

.gateway-page-v11 .home-september-todo-link {
  display: block;
  margin-top: 0.56rem;
  padding-top: 0.56rem;
  border-top: 1px solid #e7ddd2;
  color: #b2643d;
  font-size: 0.76rem;
  font-weight: 800;
}

.gateway-page-v11 .home-september-todo-deadline {
  display: inline-block;
  margin-top: 0.48rem;
  padding: 0.12rem 0.44rem;
  background: #fff4df;
  color: #8a5b00;
  font-size: 0.69rem;
  font-weight: 800;
}

.gateway-page-v11 .home-september-faq {
  padding: 1.6rem 0 1.85rem;
  border-bottom: 1px solid #e8dfd5;
  background: #faf8f5;
}

.gateway-page-v11 .home-september-faq-list {
  border: 1px solid #e7ddd2;
  background: #fff;
}

.gateway-page-v11 .home-september-faq-item {
  border-bottom: 1px solid #e7ddd2;
}

.gateway-page-v11 .home-september-faq-item:last-child {
  border-bottom: 0;
}

.gateway-page-v11 .home-september-faq-item summary {
  position: relative;
  padding: 0.86rem 2.8rem 0.86rem 1rem;
  color: #201510;
  cursor: pointer;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.6;
  list-style: none;
}

.gateway-page-v11 .home-september-faq-item summary::-webkit-details-marker {
  display: none;
}

.gateway-page-v11 .home-september-faq-item summary::after {
  content: "+";
  position: absolute;
  top: 0.88rem;
  right: 1rem;
  color: #b2643d;
  font-weight: 800;
}

.gateway-page-v11 .home-september-faq-item[open] summary::after {
  content: "-";
}

.gateway-page-v11 .home-september-faq-item p {
  margin: 0;
  padding: 0 1rem 1rem;
  color: #74685f;
  font-size: 0.84rem;
  line-height: 1.85;
}

.gateway-page-v11 .home-september-faq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.52rem;
}

.gateway-page-v11 .home-september-faq-links a {
  color: #b2643d;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 900px) {
  .gateway-page-v11 .home-september-todo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .gateway-page-v11 .home-september-band {
    flex-wrap: wrap;
    gap: 0.62rem;
    padding: 0.62rem 0.88rem;
  }

  .gateway-page-v11 .home-september-band-text strong {
    font-size: 1rem;
  }

  .gateway-page-v11 .home-september-band-arrow {
    display: none;
  }

  .gateway-page-v11 .home-september-head {
    align-items: flex-start;
    gap: 0.45rem 0.62rem;
  }

  .gateway-page-v11 .home-september-head > a {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* 判定表・根拠・チェックリスト（2026-09-05追加）。
   商品を選ばない防災ガイド向け。読者が自分の条件から行動を引くための表。 */
.intent-judgement-scroll { overflow-x: auto; margin: 14px 0 10px; }
.intent-judgement-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.intent-judgement-table th,
.intent-judgement-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: middle; }
.intent-judgement-table thead th { background: var(--surface-sunken); font-size: 13px; font-weight: 700; }
.intent-judgement-table tbody th { background: var(--surface-sunken); font-weight: 700; width: 32%; }
.intent-judgement-note { font-size: 13px; color: var(--muted); line-height: 1.8; margin: 0; }

.intent-basis-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.intent-basis-list li { display: grid; gap: 3px; padding: 12px 14px; background: var(--surface-sunken); border-radius: 6px; }
.intent-basis-list b { font-size: 14px; line-height: 1.7; }
.intent-basis-list a { font-size: 13px; }

.intent-checklist-items { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 7px; }
.intent-checklist-items li { font-size: 14px; line-height: 1.75; }

@media print {
  .intent-checklist { break-inside: avoid; }
}


/* ===== guide v4 imported 2026-09-05: scoped to generated guide pages ===== */
/* くらし選び帖 ガイドv4 共通スタイル
   生成 2026-09-05 ／ クラスは既存CSSと衝突しません（.pick .plate .cite など v4 専用）
*/
.guide-v4-page{
  /* サイト本体のトークン */
  --brand:#c8102e; --brand-strong:#9e0c24; --brand-soft:#f4f4f4; --brand-line:#dedede;
  --ink:#313131; --ink-strong:#1a1a1a; --ink-muted:#6f6f6f;
  --paper:#fff; --surface-sunken:#f6f7f8; --surface-navy:#1e2227;
  --good:#1f7a59; --good-soft:#e6f4f2;
  --warm:#c66a18; --warm-soft:#fff4df;
  --shadow-sm:0 1px 2px rgb(18 20 23 / 6%);
  --shadow-md:0 2px 8px rgb(18 20 23 / 7%);
  --shadow-lg:0 8px 28px rgb(18 20 23 / 10%);
  --jp:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
}
.guide-v4-page *{box-sizing:border-box}
.guide-v4-page{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){.guide-v4-page{scroll-behavior:auto}.guide-v4-page *{transition:none!important;animation:none!important}}
.guide-v4-page{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);
  font-size:16.5px;line-height:1.95;font-feature-settings:"palt"}
.guide-v4-page img{display:block;max-width:100%}
.guide-v4-page svg{display:block;width:100%;height:auto}
.guide-v4-page figure{margin:0}
.guide-v4-page .tab{font-variant-numeric:tabular-nums}
.guide-v4-page :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:2px}
.guide-v4-page .skip{position:absolute;left:-9999px}
.guide-v4-page .skip:focus{left:12px;top:12px;z-index:99;background:var(--ink-strong);color:#fff;padding:10px 16px;border-radius:6px}
.guide-v4-page .w{max-width:1080px;margin:0 auto;padding:0 24px}
.guide-v4-page .col{max-width:700px}
/* 進捗バー */

.guide-v4-page .progress{position:fixed;left:0;top:0;height:3px;background:var(--brand);width:0;z-index:60}

/* パンくず */

.guide-v4-page .crumbs{font-size:12px;color:var(--ink-muted);padding:18px 0 0}
.guide-v4-page .crumbs a{color:var(--ink-muted);text-decoration:none}
.guide-v4-page .crumbs a:hover{color:var(--brand);text-decoration:underline}
.guide-v4-page .crumbs span{margin:0 7px;opacity:.5}
/* 扉 */

.guide-v4-page .hero{padding:26px 0 0}
.guide-v4-page .eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--brand);
  background:#fdeef0;border-radius:99px;padding:5px 13px;margin:0}
.guide-v4-page .hero h1{font-size:clamp(32px,5vw,50px);font-weight:700;line-height:1.3;letter-spacing:-.055em;margin:18px 0 0}
.guide-v4-page .hero .stand{font-size:clamp(17px,2vw,20px);font-weight:500;color:var(--ink);line-height:1.85;
  margin:18px 0 0;max-width:660px;letter-spacing:-.015em}
.guide-v4-page .by{margin:28px 0 0;padding:13px 0;border-top:1px solid var(--brand-line);border-bottom:1px solid var(--brand-line);
  display:flex;flex-wrap:wrap;gap:4px 24px;font-size:12px;color:var(--ink-muted)}
.guide-v4-page .by b{color:var(--ink-strong);font-weight:700}
/* 目次ナビ（sticky・現在地表示） */

.guide-v4-page .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--brand-line);margin-top:32px}
.guide-v4-page .nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 14px,#000 calc(100% - 26px),rgba(0,0,0,.12) 100%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 14px,#000 calc(100% - 26px),rgba(0,0,0,.12) 100%)}
.guide-v4-page .nav ul::-webkit-scrollbar{display:none}
.guide-v4-page .nav a{display:block;white-space:nowrap;text-decoration:none;color:var(--ink-muted);
  font-size:13px;font-weight:600;padding:14px 14px;border-bottom:2.5px solid transparent}
.guide-v4-page .nav a:hover{color:var(--ink-strong)}
.guide-v4-page .nav a[aria-current="true"]{color:var(--brand);border-bottom-color:var(--brand)}
/* 結論 */

.guide-v4-page .split{margin:36px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.guide-v4-page .pick{border:1px solid var(--brand-line);border-radius:14px;overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.guide-v4-page .pick .top{display:grid;grid-template-columns:76px 1fr;gap:15px;align-items:center;padding:18px 20px 0}
.guide-v4-page .pick .top img{width:76px;height:76px;object-fit:cover;border-radius:10px;background:var(--brand-soft)}
/* 画像をまだ用意していない結論カード。76pxの空き列を残すと見出しが右へずれるため詰める */
.guide-v4-page .pick .top.noimg{grid-template-columns:1fr}
/* サービスガイド由来のV4に差し込む旧レイアウト由来のブロック（要約カード・比較図・費用チャート）。
   .service-guide-* 側の見た目はそのまま使い、V4の余白だけそろえる。 */
.guide-v4-page .guide-v4-service-extra{margin:34px auto 0}
.guide-v4-page .guide-v4-service-extra > * + *{margin-top:26px}
.guide-v4-page .service-guide-compare-visual{margin:0}
.guide-v4-page .service-guide-compare-visual img{width:100%;height:auto;border-radius:12px}
.guide-v4-page .service-guide-compare-visual figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-muted);line-height:1.8}
.guide-v4-page .pick .cond{display:inline-block;font-size:11.5px;font-weight:700;color:#fff;border-radius:99px;padding:3px 11px}
.guide-v4-page .pick.dry .cond{background:var(--good)}
.guide-v4-page .pick.wash .cond{background:var(--warm)}
.guide-v4-page .pick .in{padding:14px 20px 20px;display:flex;flex-direction:column;flex:1}
.guide-v4-page .pick h2{margin:7px 0 0;font-size:24px;font-weight:700;letter-spacing:-.05em;line-height:1.4}
.guide-v4-page .pick.dry h2{color:var(--good)}
.guide-v4-page .pick.wash h2{color:var(--warm)}
.guide-v4-page .pick p{margin:10px 0 0;font-size:14.5px;color:var(--ink);line-height:1.9;flex:1}
.guide-v4-page .pick dl{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--brand-line);
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:baseline}
.guide-v4-page .pick dt{font-size:11.5px;font-weight:700;color:var(--ink-muted);letter-spacing:.04em;white-space:nowrap}
.guide-v4-page .pick dd{margin:0;font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.3;color:var(--ink-strong)}
.guide-v4-page .pick dd small{font-size:12px;font-weight:400;color:var(--ink-muted);margin-left:7px;letter-spacing:0}
/* セクション */

.guide-v4-page section{padding:70px 0 0;scroll-margin-top:64px}
.guide-v4-page .label{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--brand);margin:0 0 9px}
.guide-v4-page h3.h{font-size:clamp(23px,3vw,30px);font-weight:700;letter-spacing:-.05em;line-height:1.45;margin:0 0 13px}
.guide-v4-page .lede{font-size:15.5px;color:var(--ink);margin:0 0 30px;max-width:660px;line-height:2}
.guide-v4-page p{margin:0 0 20px}
.guide-v4-page .small{font-size:13px;color:var(--ink-muted);line-height:1.9;margin:14px 0 0}
/* 図版 */

.guide-v4-page .plate{background:var(--surface-sunken);border:1px solid var(--brand-line);border-radius:14px;padding:28px 30px 24px}
.guide-v4-page .plate-t{font-size:13px;font-weight:700;margin:0 0 20px}
.guide-v4-page .plate-t span{color:var(--ink-muted);font-weight:400;margin-left:10px}
.guide-v4-page .plate .cap{font-size:12.5px;color:var(--ink-muted);margin:18px 0 0;line-height:1.85;
  padding-top:14px;border-top:1px solid var(--brand-line)}
.guide-v4-page .plate .cap b{color:var(--ink-strong)}
/* 表 */

.guide-v4-page .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--brand-line);background:var(--paper);
  background-image:linear-gradient(to right,var(--paper),rgba(0,0,0,0)),linear-gradient(to left,var(--paper),rgba(0,0,0,0)),
    linear-gradient(to right,rgba(15,23,32,.16),rgba(0,0,0,0)),linear-gradient(to left,rgba(15,23,32,.16),rgba(0,0,0,0));
  background-position:left center,right center,left center,right center;background-repeat:no-repeat;
  background-size:28px 100%,28px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll}
.guide-v4-page .tw:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 横スクロールの手がかり（表が画面幅に収まらない幅でだけ出す） */
.guide-v4-page .twhint{display:none}
@media(max-width:600px){
  .guide-v4-page .twhint{display:block;margin:0 0 8px;font-size:12px;font-weight:700;color:var(--ink-muted);text-align:right}
}
.guide-v4-page table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:540px}
.guide-v4-page thead th{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-muted);text-align:left;
  background:var(--brand-soft);padding:11px 16px;white-space:nowrap}
.guide-v4-page tbody th{text-align:left;font-weight:700;padding:14px 16px;border-top:1px solid var(--brand-line);vertical-align:top;color:var(--ink-strong)}
.guide-v4-page tbody td{padding:14px 16px;border-top:1px solid var(--brand-line);vertical-align:top}
.guide-v4-page .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-strong)!important;white-space:nowrap}
.guide-v4-page .chip{display:inline-block;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 11px}
.guide-v4-page .chip.d{background:var(--good-soft);color:var(--good)}
.guide-v4-page .chip.w{background:var(--warm-soft);color:var(--warm)}
/* 対象・対象外 */

.guide-v4-page .scope{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.guide-v4-page .scope>div{border:1px solid var(--brand-line);border-radius:14px;padding:20px 22px;background:var(--paper)}
.guide-v4-page .scope .ok{background:var(--good-soft);border-color:#cfe6de}
.guide-v4-page .scope .ng{background:var(--surface-sunken)}
.guide-v4-page .scope h4{margin:0 0 13px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:9px}
.guide-v4-page .scope h4 i{font-style:normal;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff}
.guide-v4-page .scope .ok h4 i{background:var(--good)}
.guide-v4-page .scope .ng h4 i{background:#9aa0a6}
.guide-v4-page .scope ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.guide-v4-page .scope li{font-size:13px;background:var(--paper);border:1px solid var(--brand-line);border-radius:8px;padding:4px 11px}
.guide-v4-page .scope .ng li{color:var(--ink-muted)}
/* 手順 */

.guide-v4-page .orders{counter-reset:o;margin:0;padding:0;list-style:none}
.guide-v4-page .orders li{counter-increment:o;display:grid;grid-template-columns:52px 1fr;
  padding:24px 0;border-top:1px solid var(--brand-line)}
.guide-v4-page .orders li:last-child{border-bottom:1px solid var(--brand-line)}
.guide-v4-page .orders li::before{content:counter(o,decimal-leading-zero);font-size:18px;font-weight:700;
  color:var(--brand);font-variant-numeric:tabular-nums;line-height:1.75}
/* 手順の番号は上の ::before カウンターが出す。guide-v4-data.ts の各 li は
   <span class="n">1</span> という番号もHTMLに持っていて、2つ並ぶと grid の
   アイテムが3つになる。列は2つしかないので本文の <div> が2行目の52px列へ
   落ち、日本語が1文字ずつ改行されて縦書きのように見えていた。番号は
   ::before 側を正（01・ブランド色）とし、HTML側の重複を隠す。 */
.guide-v4-page .orders li > .n{display:none}
.guide-v4-page .orders h4{margin:0 0 5px;font-size:18px;font-weight:600;line-height:1.7;letter-spacing:-.025em;color:var(--ink-strong)}
.guide-v4-page .orders p{margin:0;font-size:14.5px}
/* チェック */

.guide-v4-page .checks{margin:0;padding:0;list-style:none;columns:2;column-gap:30px}
.guide-v4-page .checks li{break-inside:avoid;padding:10px 0 10px 28px;position:relative;font-size:14px;
  line-height:1.8;border-bottom:1px solid var(--brand-line)}
.guide-v4-page .checks li::before{content:"";position:absolute;left:0;top:17px;width:13px;height:13px;
  border:1.5px solid var(--brand);border-radius:3px}
/* 注意 */

.guide-v4-page .cautions{margin:0;padding:0;list-style:none}
.guide-v4-page .cautions li{background:var(--warm-soft);border-left:3px solid var(--warm);border-radius:0 10px 10px 0;
  padding:15px 18px;margin-bottom:10px;font-size:14.5px;line-height:1.9}
.guide-v4-page .cautions b{display:block;color:var(--ink-strong);font-weight:600;margin-bottom:2px}
/* FAQ */

.guide-v4-page .faq{border:1px solid var(--brand-line);border-radius:14px;overflow:hidden}
.guide-v4-page .faq details{border-top:1px solid var(--brand-line)}
.guide-v4-page .faq details:first-child{border-top:none}
.guide-v4-page .faq summary{cursor:pointer;list-style:none;padding:17px 46px 17px 20px;position:relative;
  font-size:16px;font-weight:600;line-height:1.7;letter-spacing:-.025em;color:var(--ink-strong)}
.guide-v4-page .faq summary::-webkit-details-marker{display:none}
.guide-v4-page .faq summary:hover{background:var(--surface-sunken)}
.guide-v4-page .faq summary::after{content:"";position:absolute;right:22px;top:27px;width:13px;height:1.5px;background:var(--brand)}
.guide-v4-page .faq summary::before{content:"";position:absolute;right:27.75px;top:21px;width:1.5px;height:13px;background:var(--brand);transition:.2s}
.guide-v4-page .faq details[open] summary::before{transform:scaleY(0)}
.guide-v4-page .faq p{margin:0;padding:0 20px 20px;font-size:14.5px;max-width:640px}
/* PR */

.guide-v4-page .pr{display:grid;gap:12px}
.guide-v4-page .prrow{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  border:1px solid var(--brand-line);border-radius:14px;padding:20px 22px;background:var(--paper)}
.guide-v4-page .prrow:hover{box-shadow:var(--shadow-md)}
.guide-v4-page .prrow h4{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.035em;color:var(--ink-strong)}
.guide-v4-page .prrow p{margin:0;font-size:13.5px;color:var(--ink-muted);line-height:1.85}
.guide-v4-page .btn{display:inline-block;white-space:nowrap;text-decoration:none;font-size:14px;font-weight:700;
  background:var(--brand);color:#fff;border-radius:99px;padding:12px 24px}
.guide-v4-page .btn:hover{background:var(--brand-strong)}
/* 次に読む */

.guide-v4-page .cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;list-style:none;margin:0;padding:0}
.guide-v4-page .cards a{display:grid;grid-template-columns:84px 1fr;gap:0;text-decoration:none;color:inherit;
  border:1px solid var(--brand-line);border-radius:14px;overflow:hidden;background:var(--paper)}
.guide-v4-page .cards img{width:84px;height:100%;min-height:84px;object-fit:cover;background:var(--brand-soft)}
.guide-v4-page .cards .t{padding:14px 16px}
.guide-v4-page .cards small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--brand)}
.guide-v4-page .cards b{display:block;font-size:15.5px;font-weight:700;line-height:1.5;letter-spacing:-.03em;margin:3px 0 3px;color:var(--ink-strong)}
.guide-v4-page .cards span{display:block;font-size:12.5px;color:var(--ink-muted);line-height:1.7}
.guide-v4-page .cards a:hover{box-shadow:var(--shadow-md)}
.guide-v4-page .cards a:hover b{color:var(--brand)}
.guide-v4-page .sources{margin:0;padding:0;list-style:none;font-size:14px}
.guide-v4-page .sources li{padding:12px 0;border-bottom:1px solid var(--brand-line)}
.guide-v4-page .sources a{color:var(--brand-strong);text-underline-offset:3px}
/* 2026-09-06: URLを特定できない出典（各メーカーの製品仕様など）は、押せないリンクにせず文字で出す。
   href="#" のまま置いていた42件が、押せそうで押せない状態になっていたため。 */
.guide-v4-page .sources .src-plain{color:var(--brand-strong);opacity:.85}
.guide-v4-page .sources a:hover{color:var(--brand)}
.guide-v4-page .foot{margin:50px 0 0;padding:22px 0 90px;border-top:1px solid var(--brand-line);
  font-size:12.5px;color:var(--ink-muted);line-height:2.1}
/* トップへ */

.guide-v4-page .totop{position:fixed;right:20px;bottom:20px;z-index:55;width:46px;height:46px;border-radius:50%;
  background:var(--ink-strong);color:#fff;border:none;cursor:pointer;font-size:17px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .2s}
.guide-v4-page .totop.on{opacity:1;pointer-events:auto}
@media(max-width:860px){
  .guide-v4-page .split, .guide-v4-page .scope, .guide-v4-page .cards{grid-template-columns:1fr}
  .guide-v4-page .checks{columns:1}
  .guide-v4-page .plate{padding:20px 16px 18px}
  .guide-v4-page .orders li{grid-template-columns:40px 1fr}
  .guide-v4-page .prrow{grid-template-columns:1fr}
  .guide-v4-page .btn{text-align:center}
  .guide-v4-page section{padding:52px 0 0}
}
.guide-v4-page .split.three{grid-template-columns:repeat(3,1fr)}
.guide-v4-page .pick.c1 .cond{background:#1f7a59}
.guide-v4-page .pick.c1 h2{color:#1f7a59}
.guide-v4-page .pick.c2 .cond{background:#c66a18}
.guide-v4-page .pick.c2 h2{color:#c66a18}
.guide-v4-page .pick.c3 .cond{background:#9e0c24}
.guide-v4-page .pick.c3 h2{color:#9e0c24}
/* 掲載商品 */

/* 商品カードの特徴と注意点（2026-09-05追加）。旧レイアウトが出していた情報を残す。 */
.guide-v4-page .prod .pts{margin:6px 0 0;padding-left:1.1em;font-size:.82rem;line-height:1.7;color:var(--ink-muted)}
.guide-v4-page .prod .pts li{margin:0}
.guide-v4-page .prod .warn{margin:6px 0 0;font-size:.8rem;line-height:1.7;color:var(--ink-muted)}
.guide-v4-page .prods{display:grid;gap:12px}
.guide-v4-page .prod{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;
  border:1px solid var(--brand-line);border-radius:14px;padding:14px 16px;background:var(--paper)}
.guide-v4-page .prod:hover{box-shadow:var(--shadow-md)}
.guide-v4-page .prod img{width:88px;height:88px;object-fit:contain;background:var(--brand-soft);border-radius:8px}
.guide-v4-page .prod .tag{display:inline-block;font-size:11px;font-weight:700;color:var(--brand);
  background:#fdeef0;border-radius:99px;padding:2px 10px}
.guide-v4-page .prod h4{margin:5px 0 3px;font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--ink-strong)}
.guide-v4-page .prod p{margin:0;font-size:13px;color:var(--ink-muted);line-height:1.75}
.guide-v4-page .prod .buy{display:grid;gap:6px;justify-items:stretch;min-width:170px}
.guide-v4-page .prod .price{font-size:20px;font-weight:700;letter-spacing:-.03em;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink-strong)}
.guide-v4-page .prod .price small{font-size:11.5px;font-weight:400;color:var(--ink-muted);margin-left:5px}
.guide-v4-page .prod .buy a{display:block;text-align:center;text-decoration:none;font-size:12.5px;font-weight:700;
  border-radius:8px;padding:8px 12px;border:1.5px solid var(--brand-line);color:var(--ink-strong)}
.guide-v4-page .prod .buy a.r{background:#bf0000;border-color:#bf0000;color:#fff}
.guide-v4-page .prod .buy a.a{background:#ff9900;border-color:#ff9900;color:#1a1a1a}
.guide-v4-page .prod .buy a:hover{filter:brightness(.94)}
@media(max-width:860px){
  .guide-v4-page .split.three{grid-template-columns:1fr}
  .guide-v4-page .prod{grid-template-columns:64px 1fr;gap:12px}
  .guide-v4-page .prod img{width:64px;height:64px}
  .guide-v4-page .prod .buy{grid-column:1/-1;min-width:0;grid-template-columns:1fr 1fr;gap:8px}
  .guide-v4-page .prod .price{grid-column:1/-1;text-align:left}
}
/* ===== 出典つき図版（公共データ利用規約に基づく利用） ===== */

.guide-v4-page .cited{border-color:#cfd8dd}
.guide-v4-page .cited .plate-t span.src{color:var(--brand-strong);font-weight:700}
.guide-v4-page .cite{margin:16px 0 0;padding:12px 14px;background:var(--paper);border:1px solid var(--brand-line);
  border-radius:10px;font-size:12px;color:var(--ink-muted);line-height:1.85}
.guide-v4-page .cite b{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--brand);margin-bottom:4px}
.guide-v4-page .cite a{color:var(--brand-strong);word-break:break-all;text-underline-offset:3px}
.guide-v4-page .cite a:hover{color:var(--brand)}
.guide-v4-page .cite .edited{display:inline-block;margin-top:6px;font-size:11.5px;background:var(--brand-soft);
  border-radius:6px;padding:3px 9px;color:var(--ink)}
.guide-v4-page .kk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 4px}
.guide-v4-page .kk div{border-radius:8px;padding:11px 12px;color:#fff}
.guide-v4-page .kk b{display:block;font-size:14px;font-weight:700}
.guide-v4-page .kk span{display:block;font-size:11.5px;opacity:.9;margin-top:2px}
.guide-v4-page .kk .k5{background:#0c0018}
.guide-v4-page .kk .k4{background:#aa00aa}
.guide-v4-page .kk .k3{background:#ff2800}
.guide-v4-page .kk .k2{background:#f2e700;color:#1a1a1a}
.guide-v4-page .kk .k2 span{opacity:.75}
@media(max-width:860px){.guide-v4-page .kk{grid-template-columns:1fr 1fr}}
.guide-v4-page .pick.aircon .cond{background:#1f7a59}
.guide-v4-page .pick.aircon h2{color:#1f7a59}
.guide-v4-page .pick.kerosene .cond{background:#c66a18}
.guide-v4-page .pick.kerosene h2{color:#c66a18}
.guide-v4-page .pick.blanket .cond{background:#9e0c24}
.guide-v4-page .pick.blanket h2{color:#9e0c24}
.guide-v4-page .bars text{font-family:"Noto Sans JP",system-ui,sans-serif}
@media(max-width:860px){.guide-v4-page .split.three{grid-template-columns:1fr}}

/* ===== end guide v4 imported 2026-09-05 ===== */

/* ============================================================
   LINEスタンプ枠（C案）2026-09-05
   既存の .home-v11-line-sticker を置き換えます。
   新規画像の追加は不要（既存の /line-sticker-chatotra-2.png のみ使用）
   ============================================================ */
.gateway-page-v11 .home-v11-line-sticker{
  display:block;width:min(100% - 52px,1200px);margin:1.45rem auto 0;
  padding:20px 22px;border:1px solid #e6ded5;border-radius:16px;background:#fff;
}
.gateway-page-v11 .home-v11-line-sticker-head{
  display:flex;align-items:center;gap:14px;
  padding-bottom:14px;border-bottom:1px solid #e6ded5;
}
.gateway-page-v11 .home-v11-line-sticker-head img{
  width:72px;height:72px;border-radius:14px;object-fit:contain;
  background:#faf8f5;border:1px solid #e6ded5;flex:0 0 auto;
}
.gateway-page-v11 .home-v11-line-sticker-copy{flex:1;min-width:0}
.gateway-page-v11 .home-v11-line-sticker-copy small{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;color:#c8102e;
}
.gateway-page-v11 .home-v11-line-sticker-copy h2{
  margin:4px 0 3px;font-size:1.05rem;font-weight:800;color:#171412;letter-spacing:-.03em;line-height:1.4;
}
.gateway-page-v11 .home-v11-line-sticker-copy p{
  margin:0;font-size:.8rem;color:#6f6f6f;font-weight:500;line-height:1.7;
}
.gateway-page-v11 .home-v11-line-sticker-buy{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:44px;padding:0 18px;border-radius:999px;
  background:#06c755;color:#fff;font-size:.85rem;font-weight:800;
  text-decoration:none;white-space:nowrap;
}
.gateway-page-v11 .home-v11-line-sticker-buy:hover{background:#04a648}
.gateway-page-v11 .home-v11-line-sticker-buy:focus-visible{outline:3px solid #c8102e;outline-offset:2px}
.gateway-page-v11 .home-v11-line-sticker-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;
}
.gateway-page-v11 .home-v11-line-sticker-links a{
  display:block;text-decoration:none;color:inherit;
  border:1px solid #e6ded5;border-radius:12px;padding:12px 14px;
  transition:border-color 160ms ease;
}
.gateway-page-v11 .home-v11-line-sticker-links a:hover{border-color:#c8102e}
.gateway-page-v11 .home-v11-line-sticker-links a:focus-visible{outline:3px solid #c8102e;outline-offset:2px}
.gateway-page-v11 .home-v11-line-sticker-links small{
  display:block;font-size:.66rem;font-weight:800;letter-spacing:.06em;color:#c8102e;
}
.gateway-page-v11 .home-v11-line-sticker-links strong{
  display:block;font-size:.92rem;font-weight:800;margin-top:3px;color:#171412;letter-spacing:-.02em;
}
.gateway-page-v11 .home-v11-line-sticker-links em{
  display:block;font-style:normal;font-size:.74rem;color:#6f6f6f;margin-top:2px;
}
@media(max-width:820px){
  .gateway-page-v11 .home-v11-line-sticker{width:min(100% - 32px,640px);padding:16px}
  .gateway-page-v11 .home-v11-line-sticker-head{flex-wrap:wrap}
  .gateway-page-v11 .home-v11-line-sticker-buy{width:100%}
  .gateway-page-v11 .home-v11-line-sticker-links{grid-template-columns:1fr}
}


/* ============================================================
   お問い合わせフォーム（app/components/InquiryForm.tsx）
   トップと /contact で共通。送信先は Worker（kurashi-inquiry）。
   ============================================================ */
.iq{--i-brand:#c8102e;--i-strong:#9e0c24;--i-ink:#171412;--i-ink2:#3f3a35;--i-sub:#75706a;
 --i-line:#e3dbd1;--i-line2:#cdc3b7;--i-sunken:#f5f1ec;--i-ok:#1f7a59;
 font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
 position:relative;width:min(100% - 52px,1200px);margin:0 auto;padding:52px 0 58px;border-top:1px solid var(--i-line)}
.iq__hd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;margin:0 0 28px}
.iq__ttl{border-left:4px solid var(--i-brand);padding-left:18px}
.iq__ttl small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--i-brand)}
.iq__ttl h2{margin:7px 0 9px;font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:800;letter-spacing:-.05em;line-height:1.4}
.iq__ttl p{margin:0;font-size:.94rem;color:var(--i-ink2);line-height:1.9;max-width:620px}
.iq__facts{display:flex;text-align:right;margin:0}
.iq__facts div{padding:0 18px;border-right:1px solid var(--i-line)}
.iq__facts div:last-child{border-right:none;padding-right:0}
.iq__facts dt{font-size:.66rem;color:var(--i-sub);letter-spacing:.04em}
.iq__facts dd{margin:2px 0 0;font-size:1rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}

/* 手順の区切り線は、隣り合う手順のあいだにだけ引く
   （fieldset と div が混在するため :first-of-type は使えない） */
.iq__q{border:none;margin:0;padding:24px 0}
.iq__q + .iq__q{border-top:1px solid var(--i-line)}
.iq__qh{display:flex;align-items:center;gap:11px;margin:0 0 4px}
.iq__no{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
 background:var(--i-ink);color:#fff;font-size:.72rem;font-weight:800}
.iq__qh h3{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.03em;line-height:1.5}
.iq__qh .opt{font-size:.7rem;font-weight:500;color:var(--i-sub);margin-left:8px}
fieldset.iq__q legend{padding:0;float:left}
fieldset.iq__q legend h3{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.03em;line-height:1.5}
.iq__qs{margin:0 0 15px 37px;font-size:.81rem;color:var(--i-sub);line-height:1.75}
.iq__body{margin-left:37px}

.iq__uses{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:820px}
.iq__uses input{position:absolute;width:1px;height:1px;opacity:0}
.iq__uses label{display:block;border:1.5px solid var(--i-line2);border-radius:12px;background:#fff;
 padding:15px 16px;cursor:pointer;min-height:48px;transition:.15s}
.iq__uses label b{display:block;font-size:.98rem;font-weight:800;letter-spacing:-.02em}
.iq__uses label span{display:block;font-size:.76rem;color:var(--i-sub);margin-top:4px;line-height:1.65}
.iq__uses input:checked + label{border-color:var(--i-brand);background:#fdeef0}
.iq__uses input:checked + label b{color:var(--i-strong)}
.iq__uses input:focus-visible + label{outline:3px solid var(--i-brand);outline-offset:2px}
.iq__uses label:hover{border-color:var(--i-ink2)}

.iq__chips{display:flex;flex-wrap:wrap;gap:9px}
.iq__chips input{position:absolute;width:1px;height:1px;opacity:0}
.iq__chips label{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;
 border:1.5px solid var(--i-line2);border-radius:999px;background:#fff;cursor:pointer;
 font-size:.92rem;font-weight:700;color:var(--i-ink2)}
.iq__chips label::before{content:"";width:15px;height:15px;border:1.5px solid var(--i-line2);border-radius:4px;flex:0 0 auto}
.iq__chips input:checked + label{border-color:var(--i-brand);background:#fdeef0;color:var(--i-strong)}
.iq__chips input:checked + label::before{background:var(--i-brand);border-color:var(--i-brand);box-shadow:inset 0 0 0 2px #fdeef0}
.iq__chips input:focus-visible + label{outline:3px solid var(--i-brand);outline-offset:2px}

.iq__in{width:100%;max-width:620px;font-family:inherit;font-size:16px;color:var(--i-ink);background:var(--i-sunken);
 border:none;border-bottom:2px solid var(--i-line2);border-radius:8px 8px 0 0;padding:13px 14px;line-height:1.7}
.iq__in:hover{background:#f0eae3}
.iq__in:focus{outline:none;background:#fff;border-bottom-color:var(--i-ink);box-shadow:0 1px 0 0 var(--i-ink)}
.iq__in[aria-invalid="true"]{background:#fff6f6;border-bottom-color:var(--i-brand)}
textarea.iq__in{min-height:104px;resize:vertical}
.iq__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px}
.iq__row .iq__in{max-width:none}
.iq__lab{display:block;font-size:.84rem;font-weight:800;margin:0 0 6px}
.iq__lab .opt{font-size:.7rem;font-weight:500;color:var(--i-sub);margin-left:7px}
.iq__msg{display:none;margin:8px 0 0;font-size:.78rem;font-weight:700;color:var(--i-brand)}
.iq__msg.on{display:block}
.iq__sub{display:block;margin:9px 0 0;font-size:.76rem;color:var(--i-sub)}
.iq__toggle{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;color:var(--i-ink2);cursor:pointer}
.iq__toggle input{width:20px;height:20px;accent-color:var(--i-brand)}
.iq__count{display:block;text-align:right;max-width:620px;font-size:.72rem;color:var(--i-sub);
 margin-top:6px;font-variant-numeric:tabular-nums}

.iq__consent{display:flex;gap:12px;align-items:flex-start;max-width:620px;background:var(--i-sunken);
 border-radius:12px;padding:15px 17px}
.iq__consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--i-brand);flex:0 0 auto}
.iq__consent span{font-size:.84rem;line-height:1.8;color:var(--i-ink2)}
.iq__consent a{color:var(--i-strong)}
.iq__consent:has(input[aria-invalid="true"]){background:#fff6f6;box-shadow:inset 0 0 0 1.5px var(--i-brand)}
.iq__use{max-width:620px;margin:0 0 14px;font-size:.78rem;color:var(--i-sub);line-height:1.85;
 border-left:3px solid var(--i-line);padding-left:13px}
.iq__use b{color:var(--i-ink)}

.iq__send{border-top:1px solid var(--i-line);padding-top:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.iq__send button{font-family:inherit;font-size:1.02rem;font-weight:800;color:#fff;background:var(--i-ink);
 border:none;border-radius:8px;padding:0 38px;min-height:56px;cursor:pointer}
.iq__send button:hover{background:var(--i-brand)}
.iq__send button[disabled]{background:#c9c2b9;cursor:not-allowed}
.iq__send button.ghost{background:#fff;color:var(--i-ink2);border:1.5px solid var(--i-line2);padding:0 26px}
.iq__send button.ghost:hover{border-color:var(--i-ink);color:var(--i-ink);background:#fff}
.iq__send small{font-size:.76rem;color:var(--i-sub);line-height:1.8}
.iq__deny{margin:24px 0 0;padding:14px 18px;background:var(--i-sunken);border-radius:12px;font-size:.8rem;color:var(--i-ink2);line-height:1.85}
.iq__deny b{color:var(--i-ink)}
.iq__deny a{color:var(--i-strong)}

.iq__errsum{border:2px solid var(--i-brand);border-radius:12px;background:#fff6f6;padding:16px 18px;margin:0 0 26px;max-width:820px}
.iq__errsum h3{margin:0 0 8px;font-size:1rem;font-weight:800;color:var(--i-strong)}
.iq__errsum ul{margin:0;padding-left:1.2em;font-size:.86rem;line-height:1.9}
.iq__errsum a{color:var(--i-strong);font-weight:700;text-underline-offset:3px}
.iq__errsum:focus-visible{outline:3px solid var(--i-brand);outline-offset:3px}
.iq__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.iq__restore{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:820px;margin:0 0 24px;
 padding:13px 16px;background:#fff8e8;border:1px solid #e8d9b0;border-radius:12px;font-size:.86rem;color:var(--i-ink2)}
.iq__restore button{font-family:inherit;font-size:.82rem;font-weight:800;color:#fff;background:var(--i-ink);
 border:none;border-radius:8px;padding:9px 16px;min-height:40px;cursor:pointer}
.iq__restore button:last-of-type{background:#fff;color:var(--i-ink2);border:1px solid var(--i-line2)}

.iq__review{max-width:820px;border:2px solid var(--i-ink);border-radius:14px;background:#fff;padding:24px 26px}
.iq__review:focus-visible{outline:3px solid var(--i-brand);outline-offset:3px}
.iq__review h3{margin:0 0 6px;font-size:1.15rem;font-weight:800;letter-spacing:-.03em}
.iq__reviewlead{margin:0 0 18px;font-size:.85rem;color:var(--i-sub);line-height:1.85}
.iq__review dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:.9rem}
.iq__review dl > div{display:contents}
.iq__review dt{color:var(--i-sub);white-space:nowrap;font-size:.8rem;padding-top:2px}
.iq__review dd{margin:0;font-weight:700;word-break:break-word;white-space:pre-wrap}
.iq__review .iq__send{margin-top:22px}

.iq__done{border-left:4px solid var(--i-ok);background:#f2faf6;padding:26px 28px}
.iq__done b{display:block;font-size:1.12rem;font-weight:800;color:var(--i-ok);letter-spacing:-.02em}
.iq__doneid{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;margin:6px 0 10px}
.iq__done p{margin:10px 0 0;font-size:.9rem;color:var(--i-ink2);line-height:1.9}

@media(max-width:900px){
 .iq__hd{grid-template-columns:1fr;align-items:start;gap:16px}
 .iq__facts{text-align:left}
 .iq__facts div:first-child{padding-left:0}
 .iq__uses{grid-template-columns:1fr}
 .iq__qs,.iq__body{margin-left:0}
 .iq__row{grid-template-columns:1fr}
 .iq__chips label{width:100%}
 .iq__send button{width:100%}
}

/* V4レイアウトに差し込むサービス案件ブロック。
   .service-offers 自体の見た目は記事ページと共通のものを使い、
   V4の本文幅（.w）と余白にだけ合わせる。 */
.guide-v4-page .guide-v4-offers{margin:32px auto 8px}
.guide-v4-page .guide-v4-offers .service-offers{margin-top:0}

/* ---- 折りたたみ（トップのみ。/contact は開いたまま） ---- */
/* トップは `.gateway-page > section` が width を決め、padding-inline:0 !important を当てる。
   そのため .iq 側の width 指定は効かず、スマホで中身が画面端に貼り付いていた。
   横幅はサイト側に従い、内側の余白だけを !important で取り戻す。 */
@media(max-width:920px){
  .gateway-page .iq{padding-inline:22px !important}
}
.iq--fold{padding:44px 0 46px}
.iq__hd--fold{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;margin-bottom:0}
.iq__hd--fold .iq__ttl p{font-size:.9rem}
.iq__fold-btn{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 30px;
 font-family:inherit;font-size:.98rem;font-weight:800;color:#fff;background:var(--i-ink);
 border:none;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .15s}
.iq__fold-btn:hover{background:var(--i-brand)}
.iq__fold-btn::after{content:"";width:11px;height:11px;flex:0 0 auto;
 border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
 transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.iq__fold-btn[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
.iq--fold .iq__panel{margin-top:34px;padding-top:32px;border-top:1px solid var(--i-line)}
.iq__panel[hidden]{display:none}
@media(max-width:920px){
  .iq__hd--fold{grid-template-columns:1fr;gap:20px}
  .iq__hd--fold .iq__facts{text-align:left}
  .iq__hd--fold .iq__facts div:first-child{padding-left:0}
  .iq__fold-btn{width:100%;justify-content:center}
}

/* 2026-09-06 top refresh: LINEスタンプ枠を寄付の文脈が先に伝わるカードへ再整理。 */
.gateway-page-v11 .home-v11-line-sticker{
  display:grid;
  gap:14px;
  width:min(100% - 52px,1200px);
  margin:1.45rem auto 0;
  padding:18px;
  border:1px solid #e6ded5;
  border-radius:20px;
  background:linear-gradient(135deg,#fff 0%,#fffaf6 56%,#f6fff8 100%);
  box-shadow:0 14px 32px rgb(43 31 22 / .06);
}
.gateway-page-v11 .home-v11-line-sticker-main{
  display:grid;
  grid-template-columns:92px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
}
.gateway-page-v11 .home-v11-line-sticker-main img{
  width:92px;
  height:92px;
  border-radius:20px;
  object-fit:contain;
  background:#fff;
  border:1px solid #eadfd5;
  box-shadow:0 10px 22px rgb(43 31 22 / .08);
}
.gateway-page-v11 .home-v11-line-sticker-copy small{
  display:inline-flex;
  width:max-content;
  padding:.18rem .48rem;
  border-radius:999px;
  background:#fdecef;
  color:#c8102e;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
}
.gateway-page-v11 .home-v11-line-sticker-copy h2{
  margin:7px 0 4px;
  color:#171412;
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.35;
}
.gateway-page-v11 .home-v11-line-sticker-copy p{
  margin:0;
  color:#4e4842;
  font-size:.86rem;
  font-weight:650;
  line-height:1.65;
}
.gateway-page-v11 .home-v11-line-sticker-meta{
  display:block;
  margin-top:5px;
  color:#8a7a6d;
  font-size:.75rem;
  font-weight:700;
}
.gateway-page-v11 .home-v11-line-sticker-buy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  background:#06c755;
  color:#fff;
  font-size:.88rem;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 10px 18px rgb(6 199 85 / .18);
}
.gateway-page-v11 .home-v11-line-sticker-buy:hover{background:#04a648}
.gateway-page-v11 .home-v11-line-sticker-buy:focus-visible{outline:3px solid #c8102e;outline-offset:2px}
.gateway-page-v11 .home-v11-line-sticker-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:0;
}
.gateway-page-v11 .home-v11-line-sticker-links a{
  display:grid;
  gap:3px;
  min-height:68px;
  padding:11px 13px;
  border:1px solid #eadfd5;
  border-radius:14px;
  background:rgb(255 255 255 / .78);
  color:inherit;
  text-decoration:none;
  transition:border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.gateway-page-v11 .home-v11-line-sticker-links a:hover{
  border-color:#c8102e;
  background:#fff;
  transform:translateY(-1px);
}
.gateway-page-v11 .home-v11-line-sticker-links a:focus-visible{outline:3px solid #c8102e;outline-offset:2px}
.gateway-page-v11 .home-v11-line-sticker-links small{
  color:#c8102e;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.04em;
}
.gateway-page-v11 .home-v11-line-sticker-links strong{
  color:#201510;
  font-size:.86rem;
  font-weight:850;
  line-height:1.35;
  letter-spacing:-.02em;
}
@media(max-width:820px){
  .gateway-page-v11 .home-v11-line-sticker{
    width:min(100% - 32px,640px);
    padding:15px;
    border-radius:18px;
  }
  .gateway-page-v11 .home-v11-line-sticker-main{
    grid-template-columns:76px minmax(0,1fr);
    align-items:start;
    gap:12px;
  }
  .gateway-page-v11 .home-v11-line-sticker-main img{
    width:76px;
    height:76px;
    border-radius:16px;
  }
  .gateway-page-v11 .home-v11-line-sticker-buy{
    grid-column:1 / -1;
    width:100%;
  }
  .gateway-page-v11 .home-v11-line-sticker-links{grid-template-columns:1fr}
}

/* 2026-09-10 weekly-picks responsive hardening.
   Duplicate historical rules made the cards overlap at intermediate widths.
   This final block fixes the section to a stable grid at every viewport. */

/* ══════════════════════════════════════════════════════════════
   今週見る6本（.home-v11-today-strip の中身）
   2026-09-10 に組み替え。以前は 23 か所・122 ルールに分かれて上書きが
   重なっていたので、1 か所へまとめ直した。増やすときはここに足す。

   骨格: 2 列 × 3 行。1 枚のカードは [56px サムネイル][テキスト] の 2 列。
   以前の「左に見出し箱 260px ＋ 3 列」では、カード 218px のうち
   番号 36px・サムネイル 82px・余白と間隔 48px が占め、テキストに残るのが
   50px しかなく、1280px 幅の実測で 6 本とも見出しが切れていた。
   ══════════════════════════════════════════════════════════════ */
/* 帯そのものは以前のまま（前後のセクションと地続きに見せるため）。
   変えたのは中身だけ。 */
.gateway-page-v11 .home-v11-today-strip {
  padding: 1.1rem 0;
  border-block: 1px solid #e8dfd5;
  background: linear-gradient(180deg, #fff 0%, #fffaf4 100%);
}

.gateway-page-v11 .home-week-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid #eadfd5;
}
.gateway-page-v11 .home-week-eyebrow {
  padding: 2px 9px;
  border-radius: 999px;
  background: #f7efe7;
  color: #b55d3d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.gateway-page-v11 .home-week-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #2c1f18;
}
.gateway-page-v11 .home-week-meta {
  margin-left: auto;
  font-size: 0.78rem;
  color: #6f6f6f;
}

.gateway-page-v11 .home-week-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.gateway-page-v11 .home-week-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}
.gateway-page-v11 .home-week-card:hover {
  box-shadow: 0 4px 12px rgb(44 31 24 / 8%);
}

/* FallbackImage は image-neutral-fallback を足して描画するため、
   その組み合わせでも同じ寸法になるようにしておく。 */
.gateway-page-v11 .home-week-thumb,
.gateway-page-v11 .home-week-card .image-neutral-fallback.home-week-thumb {
  width: 56px;
  height: 56px;
  border-radius: 9px;
  object-fit: cover;
  display: block;
}

/* min-width: 0 が無いと、グリッドの既定 min-width: auto でテキスト列が
   広がり、カードからはみ出す。 */
.gateway-page-v11 .home-week-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.gateway-page-v11 .home-week-text small {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  color: #b55d3d;
}
.gateway-page-v11 .home-week-text strong {
  font-size: 0.97rem;
  line-height: 1.45;
  color: #1a1a1a;
}
/* 説明文は 1 行に留める。2 行にするとカードの高さがばらつく。 */
.gateway-page-v11 .home-week-text em {
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #6f6f6f;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 720px) {
  .gateway-page-v11 .home-week-grid {
    grid-template-columns: 1fr;
  }
  .gateway-page-v11 .home-week-meta {
    margin-left: 0;
    width: 100%;
  }
  .gateway-page-v11 .home-week-title {
    font-size: 1.15rem;
  }
}

/* 2026-09-12 weekly picks redesign: stable editorial cards. */
.gateway-page-v11 .home-weekly-picks {
  padding: 1.7rem 0 1.85rem;
  border-block: 1px solid #e8dfd5;
  background: #fff;
  overflow: clip;
}

.gateway-page-v11 .home-weekly-picks__inner {
  width: min(100% - 48px, 1216px);
  margin-inline: auto;
}

.gateway-page-v11 .home-weekly-picks__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.gateway-page-v11 .home-weekly-picks__head > div {
  min-width: 0;
}

.gateway-page-v11 .home-weekly-picks__title {
  margin: 0;
  color: #171412;
  font-size: clamp(1.45rem, 2.15vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1.22;
}

.gateway-page-v11 .home-weekly-picks__head p {
  margin: 0.35rem 0 0;
  color: #66716c;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.6;
}

.gateway-page-v11 .home-weekly-picks__all {
  flex: 0 0 auto;
  color: #1f6f58;
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.gateway-page-v11 .home-weekly-picks__all::after {
  content: " →";
}

.gateway-page-v11 .home-weekly-picks__all:hover,
.gateway-page-v11 .home-weekly-picks__all:focus-visible {
  color: #c8102e;
}

.gateway-page-v11 .home-weekly-picks__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.7rem, 1vw, 1rem);
}

.gateway-page-v11 .home-weekly-picks__card {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.gateway-page-v11 .home-weekly-picks__card:focus-visible {
  outline: 3px solid #c8102e;
  outline-offset: 5px;
  border-radius: 12px;
}

.gateway-page-v11 .home-weekly-picks__visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: #f3eee8;
}

.gateway-page-v11 .home-weekly-picks__thumb,
.gateway-page-v11 .home-weekly-picks__card .image-neutral-fallback.home-weekly-picks__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.gateway-page-v11 .home-weekly-picks__card:hover .home-weekly-picks__thumb,
.gateway-page-v11 .home-weekly-picks__card:focus-visible .home-weekly-picks__thumb {
  transform: scale(1.025);
}

.gateway-page-v11 .home-weekly-picks__visual > span {
  position: absolute;
  left: 0.46rem;
  bottom: 0.46rem;
  max-width: calc(100% - 0.92rem);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #1f7a59;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.14);
}

.gateway-page-v11 .home-weekly-picks__text {
  display: block;
  min-width: 0;
  padding-top: 0.58rem;
}

.gateway-page-v11 .home-weekly-picks__text strong,
.gateway-page-v11 .home-weekly-picks__text em,
.gateway-page-v11 .home-weekly-picks__text small {
  display: block;
  min-width: 0;
}

.gateway-page-v11 .home-weekly-picks__text strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #171412;
  font-size: clamp(0.86rem, 0.88vw, 0.98rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.42;
}

.gateway-page-v11 .home-weekly-picks__text em {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 0.2rem;
  color: #67726d;
  font-size: clamp(0.72rem, 0.78vw, 0.8rem);
  font-style: normal;
  font-weight: 650;
  line-height: 1.55;
}

.gateway-page-v11 .home-weekly-picks__text small {
  margin-top: 0.32rem;
  color: #8a7a6d;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.gateway-page-v11 .home-v11-ga-recovery {
  padding: 1.35rem 0;
  background: #fbf9f4;
}

.gateway-page-v11 .home-v11-ga-recovery__inner {
  display: grid;
  grid-template-columns: minmax(230px, 0.32fr) minmax(0, 1fr);
  gap: 1rem;
  width: min(100% - 48px, 1216px);
  margin-inline: auto;
}

.gateway-page-v11 .home-v11-ga-recovery__head {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid #e6ddd2;
  border-radius: 12px;
  background: #fffdfa;
}

.gateway-page-v11 .home-v11-ga-recovery__head small,
.gateway-page-v11 .home-v11-ga-recovery__card small {
  color: #2f6d64;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.gateway-page-v11 .home-v11-ga-recovery__head h2 {
  margin: 0;
  color: #21150f;
  font-size: clamp(1.18rem, 1.8vw, 1.48rem);
  line-height: 1.28;
  letter-spacing: 0;
}

.gateway-page-v11 .home-v11-ga-recovery__head p {
  margin: 0;
  color: #67594f;
  font-size: 0.84rem;
  line-height: 1.65;
}

.gateway-page-v11 .home-v11-ga-recovery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.78rem;
}

.gateway-page-v11 .home-v11-ga-recovery__card {
  display: grid;
  min-width: 0;
  min-height: 168px;
  gap: 0.5rem;
  align-content: start;
  padding: 0.95rem;
  border: 1px solid #e5ded5;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f8fbf7 100%);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 22px rgb(36 54 45 / 0.06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.gateway-page-v11 .home-v11-ga-recovery__card:hover,
.gateway-page-v11 .home-v11-ga-recovery__card:focus-visible {
  border-color: #9cc7bb;
  box-shadow: 0 16px 30px rgb(36 54 45 / 0.1);
  transform: translateY(-2px);
}

.gateway-page-v11 .home-v11-ga-recovery__card strong {
  color: #21150f;
  font-size: 1rem;
  line-height: 1.38;
  letter-spacing: 0;
}

.gateway-page-v11 .home-v11-ga-recovery__card em {
  color: #63594f;
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.55;
}

.gateway-page-v11 .home-v11-ga-recovery__card span {
  align-self: end;
  justify-self: start;
  margin-top: 0.25rem;
  color: #1f5d55;
  font-size: 0.8rem;
  font-weight: 850;
}

.gateway-page-v11 .home-v11-buy-decision {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.35rem clamp(1rem, 4vw, 2rem);
}

.gateway-page-v11 .home-v11-buy-decision-head,
.gateway-page-v11 .home-v11-buy-decision-card {
  border: 1px solid #e4ddd5;
  border-radius: 16px;
  background: #fffdfa;
}

.gateway-page-v11 .home-v11-buy-decision-head {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 1rem;
}

.gateway-page-v11 .home-v11-buy-decision-head small,
.gateway-page-v11 .home-v11-buy-decision-copy small {
  color: #9b4f2a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.gateway-page-v11 .home-v11-buy-decision-head h2 { margin: 0; color: #21150f; font-size: 1.35rem; line-height: 1.25; }
.gateway-page-v11 .home-v11-buy-decision-head p { margin: 0; color: #67594f; font-size: 0.84rem; line-height: 1.65; }
.gateway-page-v11 .home-v11-buy-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.gateway-page-v11 .home-v11-buy-decision-card { display: grid; min-width: 0; gap: 0.75rem; padding: 0.85rem; box-shadow: 0 12px 28px rgb(51 32 19 / 0.06); }
.gateway-page-v11 .home-v11-buy-decision-main { display: grid; gap: 0.75rem; color: inherit; text-decoration: none; }
.gateway-page-v11 .home-v11-buy-decision-image { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; background: #f5f2ee; }
.gateway-page-v11 .home-v11-buy-decision-image img,
.gateway-page-v11 .home-v11-buy-decision-image .image-neutral-fallback { width: 100%; height: 100%; object-fit: contain; }
.gateway-page-v11 .home-v11-buy-decision-copy { display: grid; gap: 0.3rem; min-width: 0; }
.gateway-page-v11 .home-v11-buy-decision-copy strong { color: #21150f; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.gateway-page-v11 .home-v11-buy-decision-copy em { color: #67594f; font-size: 0.78rem; line-height: 1.55; }
.gateway-page-v11 .home-v11-buy-decision-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; margin: 0; }
.gateway-page-v11 .home-v11-buy-decision-meta div { display: grid; gap: 0.12rem; min-width: 0; padding: 0.5rem; border-radius: 12px; background: #f7f1ea; }
.gateway-page-v11 .home-v11-buy-decision-meta dt { color: #7a695c; font-size: 0.68rem; font-weight: 700; }
.gateway-page-v11 .home-v11-buy-decision-meta dd { margin: 0; color: #2b1c14; font-size: 0.78rem; font-weight: 800; overflow-wrap: anywhere; }
.gateway-page-v11 .home-v11-buy-decision-actions { display: grid; gap: 0.45rem; }
.gateway-page-v11 .home-v11-buy-decision-actions .store-link { width: 100%; min-width: 0; justify-content: center; padding: 0.72rem 0.75rem; border-radius: 12px; font-size: 0.82rem; line-height: 1.2; white-space: normal; text-align: center; }

@media (max-width: 980px) {
  .gateway-page-v11 .home-v11-buy-decision { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .gateway-page-v11 .home-v11-buy-decision { gap: 0.75rem; padding: 1rem; }
  .gateway-page-v11 .home-v11-buy-decision-grid { grid-template-columns: 1fr; }
  .gateway-page-v11 .home-v11-buy-decision-card { padding: 0.78rem; }
}

@media (max-width: 980px) {
  .gateway-page-v11 .home-weekly-picks__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.05rem 0.9rem;
  }

  .gateway-page-v11 .home-v11-ga-recovery__inner {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-ga-recovery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .gateway-page-v11 .home-weekly-picks {
    padding: 1.35rem 0 1.45rem;
  }

  .gateway-page-v11 .home-weekly-picks__inner {
    width: min(100% - 32px, 620px);
  }

  .gateway-page-v11 .home-v11-ga-recovery__inner {
    width: min(100% - 32px, 620px);
  }

  .gateway-page-v11 .home-weekly-picks__head {
    align-items: start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .gateway-page-v11 .home-weekly-picks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.78rem;
  }

  .gateway-page-v11 .home-weekly-picks__text em {
    -webkit-line-clamp: 1;
  }

  .gateway-page-v11 .home-v11-ga-recovery__grid {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-v11-ga-recovery__card {
    min-height: 136px;
  }
}

@media (max-width: 430px) {
  .gateway-page-v11 .home-weekly-picks__grid {
    grid-template-columns: 1fr;
  }

  .gateway-page-v11 .home-weekly-picks__card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
  }

  .gateway-page-v11 .home-weekly-picks__visual {
    aspect-ratio: 1 / 1;
  }

  .gateway-page-v11 .home-weekly-picks__text {
    padding-top: 0.05rem;
  }

  .gateway-page-v11 .home-weekly-picks__text em {
    -webkit-line-clamp: 2;
  }
}


/* 2026-09-12: /articles lower shelves were using large photo-card rules for small category icons.
   Keep the lower area compact and use contain for icon cards so category artwork is not cropped. */
.library-directory-shell,
.library-guide-tracks,
.library-story-shelf,
.library-guide-callouts,
.library-hub-shelf,
.library-policy-grid {
  max-width: 1200px;
  margin-inline: auto;
}

.library-directory-shell,
.library-guide-tracks,
.library-story-shelf,
.library-guide-callouts,
.library-hub-shelf {
  padding: clamp(1.2rem, 2.6vw, 2rem);
  border: 1px solid rgb(232 220 211 / 0.88);
  border-radius: 28px;
  background: linear-gradient(180deg, rgb(255 252 247 / 0.98), rgb(250 244 236 / 0.92));
  box-shadow: 0 18px 42px rgb(40 24 12 / 0.05);
}

.library-directory-card:nth-child(n + 6) {
  background: rgb(255 253 249 / 0.82);
}

.library-directory-copy small,
.library-hub-card small,
.library-guide-track small,
.library-story-copy small {
  letter-spacing: 0.02em;
}

.library-story-lead,
.library-story-mini,
.library-hub-card {
  border-radius: 20px;
}

.library-story-copy {
  padding: 0.9rem 0.95rem 1rem;
}

.library-story-copy p {
  font-size: 0.78rem;
  line-height: 1.58;
}

@media (max-width: 1180px) {
  .library-directory-grid,
  .library-hub-grid,
  .library-story-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .library-directory-stats,
  .library-directory-grid,
  .library-hub-grid,
  .library-story-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .library-directory-stats,
  .library-directory-grid,
  .library-hub-grid,
  .library-story-layout {
    grid-template-columns: 1fr;
  }
  .library-directory-card {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 116px;
  }
  .library-directory-card > img {
    width: 58px;
    height: 58px;
  }
}


/* Refine /articles category shelf after visual QA: use stable photo tiles instead of oversized transparent icons. */
.library-directory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.library-directory-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.78rem;
  padding: 0.72rem;
  overflow: hidden;
}

.library-directory-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 17px;
  object-fit: cover;
  object-position: center;
  background: #f6efe8;
  box-shadow: inset 0 0 0 1px rgba(111, 79, 50, 0.08);
}

.library-directory-copy {
  min-width: 0;
  padding: 0 0.12rem 0.1rem;
}

.library-directory-copy h3 {
  margin-top: 0.18rem;
  font-size: 1.02rem;
}

.library-directory-copy p {
  display: -webkit-box;
  min-height: 3.1em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.library-directory-copy small {
  min-height: 2.7em;
}

@media (max-width: 1180px) {
  .library-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .library-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .library-directory-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    padding: 0.72rem;
  }
  .library-directory-card > img {
    width: 108px;
    aspect-ratio: 1 / 1;
  }
}

/* /autumn-rain のヒーロー帯（2026-09-12 追加）。
   支給バナーの「秋の雨対策」をこのページの見出し画像として使う。
   トップのバナーは home-season-banner のカルーセルが担当しているので、
   ここでは重ねず、ページ固有の帯として1枚だけ置く。 */
.autumn-rain-hero-banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 225;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

/* 単品出しと点数パックの比較図（/guides/delivery-cleaning-plans）。
   同じ10点でも中身で総額が変わることを見せるため、かごごとに図を2つ並べる。
   2つめの図が1つめの続きに見えないよう、かごの見出しの前で区切る。 */
.cost-basket + .cost-basket { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.cost-basket h3 { margin-top: 0; }

/* ===========================================================
   article-v2「雑誌の比較特集」レイアウト（.a2-type2）— 2026-09-13
   ===========================================================
   既存 .article-v2 の上書きを積むのをやめ、この層だけで組み直したもの。
   適用は app/article-v2-typography.ts の typographyV2Slugs に入れた記事だけ。

   ■ 設計の決め
   1. 枠線のカードを増やさない。区切りはヘアラインと余白でつける。
      箱で囲うのは「商品」（写真を持つ単位）だけ。
      改訂前は選び方・買う前・早見表・FAQ・次に読むが全部 1px の角丸箱で、
      1画面に最大7個の箱が並んでいた。箱が多いほど、どれが主役か分からなくなる。
   2. 見出しは明朝、本文はゴシック。太さで殴らない。
      Noto Sans JP は 400〜700 しか読み込んでいないので、800/900 は
      ブラウザの合成太字になり日本語は線が潰れる。太字は 700 まで。
   3. ベタ塗りは「押せるもの」だけ。番号・ランク・ラベルは明朝の数字と罫に置く。
   4. 本文は 17px・行間2.0・1行34em。読み物として通しで読める密度にする。

   ■ 変数
   色はサイト既存トークンから作る。記事ごとのアクセントは従来どおり
   --a2-accent-strong / --a2-accent / --a2-marker（ArticleV2View が style で渡す）。
   =========================================================== */

.a2-type2 {
  --ed-serif: "Noto Serif JP", ui-serif, "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ed-line: color-mix(in srgb, var(--ink) 14%, transparent);
  --ed-line-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --ed-num: var(--a2-accent);
  --ed-tint: color-mix(in srgb, var(--a2-accent) 6%, #fff);
  --ed-prose: 34em;
  --ed-indent: 0;      /* 狭い画面では本文を字下げしない。1行が短くなりすぎる */
  --ed-fs-body: 1.0625rem;   /* 17px */
  --ed-lh-body: 2;
}

/* ---------- 全体 ---------- */
.a2-type2.article-shell { max-width: 1080px; padding: 0 22px 96px; }
.a2-type2 .article-grid { gap: 56px; }
.a2-type2 p { margin: 0 0 1.15em; }
.a2-type2 p:last-child { margin-bottom: 0; }
.a2-type2 .article-section { padding-top: 64px; }

/* 日本語の折り返し。見出しは文節で、本文は最終行が1文字にならないように */
.a2-type2 .article-section > h2,
.a2-type2 h3,
.a2-type2 .quick-pick .pick,
.a2-type2 .pcard-name { word-break: auto-phrase; text-wrap: balance; line-break: strict; }
/* H1 は balance を使わない。行数が少ないぶん1行目だけ極端に短くなる
   （「ふとん／乾燥機おすすめ4選」で折れていた）。文節送りだけ効かせる。 */
.a2-type2 .article-head h1 { word-break: auto-phrase; text-wrap: pretty; line-break: strict; }
.a2-type2 p, .a2-type2 li { text-wrap: pretty; line-break: strict; }

/* 太字は 700 まで（800/900 は実体が無く合成太字になる） */
.a2-type2 .article-head h1,
.a2-type2 .article-section > h2,
.a2-type2 h3,
.a2-type2 .article-answer p,
.a2-type2 .pcard-name,
.a2-type2 .quick-pick .pick,
.a2-type2 .product-entry h3 { font-weight: 700; }

/* ---------- パンくず ---------- */
.a2-type2 .breadcrumbs { font-size: .76rem; padding: 22px 0 0; letter-spacing: .02em; }

/* ---------- 扉（ヒーロー） ---------- */
.a2-type2 .article-head { padding: 26px 0 0; }
.a2-type2 .article-badge {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--a2-accent);
  font-family: var(--ed-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.a2-type2 .article-head h1 {
  font-family: var(--ed-serif);
  font-size: clamp(1.85rem, 7.6vw, 2.85rem);
  line-height: 1.5;
  letter-spacing: .005em;
  margin: 16px 0 0;
  max-width: 17em;
}
.a2-type2 .article-subtitle {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.9;
  font-weight: 400;
  color: var(--ink-muted);
  max-width: var(--ed-prose);
}
.a2-type2 .article-byline {
  margin: 24px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--ed-line-soft);
  border-bottom: 1px solid var(--ed-line-soft);
  grid-template-columns: 30px 1fr;
  align-items: center;
}
.a2-type2 .byline-mark {
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid var(--a2-accent);
  color: var(--a2-accent);
  font-family: var(--ed-serif);
  font-size: .8rem;
}
.a2-type2 .article-byline b { font-size: .88rem; font-weight: 700; }
.a2-type2 .article-byline small { font-size: .75rem; color: var(--ink-muted); }

/* アイキャッチは紙面の「扉写真」。左右いっぱいに出す */
.a2-type2 .article-eyecatch { margin: 26px -22px 0; background: transparent; }

/* ---------- 結論 ---------- */
/* 箱をやめ、上下のヘアラインだけで囲う。記事でいちばん読ませる一文なので明朝 */
.a2-type2 .article-answer {
  margin: 32px 0 0;
  padding: 26px 0 24px;
  border: 0;
  border-top: 2px solid var(--a2-accent-strong);
  border-bottom: 1px solid var(--ed-line);
  border-radius: 0;
  background: transparent;
}
.a2-type2 .article-answer .label {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--a2-accent);
  font-family: var(--ed-serif);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .22em;
}
.a2-type2 .article-answer p {
  font-family: var(--ed-serif);
  font-size: 1.18rem;
  line-height: 1.95;
  max-width: var(--ed-prose);
}
.a2-type2 .article-answer small {
  display: block;
  margin-top: 18px;
  font-size: .82rem;
  line-height: 1.85;
  color: var(--ink-muted);
  max-width: var(--ed-prose);
}

/* ---------- 目次（追従） ---------- */
.a2-type2 .article-anchors {
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 0;
  padding: 11px 22px;
  margin: 30px -22px 0;
  border-top: 1px solid var(--ed-line-soft);
  border-bottom: 1px solid var(--ed-line);
  background: var(--surface);
}
.a2-type2 .article-anchors a {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 5px 0;
  margin-right: 20px;
  font-size: .78rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
.a2-type2 .article-anchors a:hover { color: var(--a2-accent); text-decoration: underline; }

/* ---------- セクション見出し ---------- */
/* 番号を上に小さく置き、見出しを明朝で大きく。下に全幅のヘアライン */
.a2-type2 .article-section > h2 {
  display: block;
  font-family: var(--ed-serif);
  font-size: clamp(1.45rem, 5.6vw, 1.95rem);
  line-height: 1.55;
  letter-spacing: .01em;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ed-line);
}
.a2-type2 .article-section > h2 .step {
  display: block;
  width: auto; height: auto;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--ed-serif);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ed-num);
}
.a2-type2 .article-section > h2 .step::before { content: "No."; margin-right: 2px; opacity: .7; }
.a2-type2 .section-lead {
  font-size: 1.0625rem;
  line-height: 1.95;
  color: var(--ink);
  margin: 0 0 34px;
  max-width: var(--ed-prose);
}

/* ---------- 小見出し ---------- */
.a2-type2 h3 {
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: .005em;
  margin: 0 0 14px;
}

/* ---------- 本文 ---------- */
.a2-type2 .choose-axis p,
.a2-type2 .pre-check p,
.a2-type2 .quick-pick .reason,
.a2-type2 .product-entry .body,
.a2-type2 .article-faq p,
.a2-type2 .article-basics-block p {
  font-size: var(--ed-fs-body);
  line-height: var(--ed-lh-body);
  color: var(--ink);
  max-width: var(--ed-prose);
}

/* 蛍光ペン（本文の強調。1セクション1〜2か所） */
.a2-type2 .mk {
  font-weight: 700;
  color: var(--ink-strong);
  background-image: linear-gradient(transparent 54%, var(--a2-marker) 54%);
  background-repeat: no-repeat;
  padding-inline: 2px;
}
@media (prefers-contrast: more) { .a2-type2 .mk { background-image: none; text-decoration: underline 2px; } }
@media print { .a2-type2 .mk { background-image: none; text-decoration: underline; } }

/* 見出しの蛍光ペンは使わない（見出しは書体と番号で立てる） */
.a2-type2 .article-section > h2 .hl,
.a2-type2 h3 .hl { background-image: none; padding-inline: 0; }

/* ---------- 1 選び方：箱をやめ、番号をぶら下げた記事本文にする ---------- */
.a2-type2 .choose-axes { counter-reset: a2axis; display: block; }
.a2-type2 .choose-axis {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--ed-line-soft);
}
.a2-type2 .choose-axis:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.a2-type2 .choose-axis .step { display: none; }
.a2-type2 .choose-axis h3 {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 0;
  align-items: baseline;
}
.a2-type2 .choose-axis h3::before {
  counter-increment: a2axis;
  content: counter(a2axis, decimal-leading-zero);
  font-family: var(--ed-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ed-num);
  line-height: 1;
}
.a2-type2 .choose-axis h3 .hl { grid-column: 2; }
.a2-type2 .choose-axis p { margin-left: var(--ed-indent); }
.a2-type2 .choose-axis .example {
  margin: 16px 0 0 var(--ed-indent);
  padding: 12px 0 0;
  border-top: 1px solid var(--ed-line-soft);
  border-radius: 0;
  background: transparent;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--ink-muted);
}
.a2-type2 .choose-axis .example b { color: var(--ink-strong); }

/* ---------- 基礎知識 ---------- */
.a2-type2 .article-section { counter-reset: a2sub; }
.a2-type2 .article-basics-block { margin: 0 0 40px; }
.a2-type2 .article-basics-block > h3 {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  align-items: baseline;
}
.a2-type2 .article-basics-block > h3::before {
  counter-increment: a2sub;
  content: counter(a2sub, decimal-leading-zero);
  font-family: var(--ed-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ed-num);
  line-height: 1;
}
.a2-type2 .article-basics-block > h3 .hl { grid-column: 2; }
.a2-type2 .article-basics-block p { margin-left: var(--ed-indent); }
.a2-type2 .intent-checklist-items { margin-left: var(--ed-indent); font-size: 1rem; }
.a2-type2 .intent-checklist-items li { font-size: 1rem; line-height: 1.9; }

/* ---------- 2 早見表：箱の一覧から、罫だけの紙面の表へ ---------- */
.a2-type2 .quick-picks {
  border: 0;
  border-top: 1px solid var(--ed-line);
  border-radius: 0;
  background: transparent;
}
.a2-type2 .quick-pick { border-bottom: 1px solid var(--ed-line-soft); }
.a2-type2 .quick-pick summary {
  padding: 20px 0;
  grid-template-columns: 1fr auto 18px;
  gap: 10px 16px;
  align-items: center;
}
.a2-type2 .quick-pick .need {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--a2-accent);
  font-family: var(--ed-serif);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.a2-type2 .quick-pick .pick { font-size: 1.05rem; line-height: 1.6; }
.a2-type2 .quick-pick .pick .prod-link,
.a2-type2 .pcard-name .prod-link { text-decoration: none; }
.a2-type2 .quick-pick .pick .prod-link:hover,
.a2-type2 .pcard-name .prod-link:hover { text-decoration: underline; }
.a2-type2 .quick-pick .price { font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em; }
.a2-type2 .quick-pick .price span { font-size: .68rem; }
.a2-type2 .quick-pick summary::after {
  content: "＋"; grid-column: 3; justify-self: end;
  color: var(--a2-accent); font-size: .9rem; line-height: 1;
}
.a2-type2 .quick-pick[open] summary::after { content: "−"; }
.a2-type2 .quick-pick .reason { padding: 0 0 22px; color: var(--ink); }
.a2-type2 .quick-pick .reason .more {
  display: block; margin-top: 14px; text-align: right;
  font-weight: 700; color: var(--a2-accent); text-decoration: none;
}
.a2-type2 .quick-pick .reason .more:hover { text-decoration: underline; }
.a2-type2 .price-asof { margin-top: 16px; font-size: .78rem; color: var(--ink-muted); }

/* ---------- 3 買う前に確認する ---------- */
.a2-type2 .pre-checks { display: block; }
.a2-type2 .pre-check {
  border: 0; border-radius: 0; background: transparent;
  padding: 0 0 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--ed-line-soft);
}
.a2-type2 .pre-check:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.a2-type2 .pre-check .tag {
  display: block; margin-bottom: 8px; padding: 0;
  background: transparent; border: 0; border-radius: 0;
  font-family: var(--ed-serif); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; color: var(--a2-accent);
}
.a2-type2 .article-callout {
  margin: 30px 0 0;
  border-left: 2px solid var(--accent-warm);
  background: transparent;
  padding: 4px 0 4px 18px;
  border-radius: 0;
  font-size: .95rem;
  line-height: 1.95;
  color: var(--ink-muted);
  max-width: var(--ed-prose);
}

/* ---------- 4 比較一覧（カード） ---------- */
.a2-type2 .compare-cards { gap: 0; }
.a2-type2 .pcard {
  border: 0; border-radius: 0; background: transparent;
  padding: 24px 0; border-bottom: 1px solid var(--ed-line-soft);
}
.a2-type2 .pcard:first-child { border-top: 1px solid var(--ed-line); }
.a2-type2 .pcard-head { grid-template-columns: 92px 1fr; gap: 18px; }
.a2-type2 .pcard-thumb img { width: 92px; height: 92px; border: 1px solid var(--ed-line-soft); }
.a2-type2 .pcard-rank {
  display: block; padding: 0; border: 0; border-radius: 0; background: transparent;
  font-family: var(--ed-serif); font-size: .86rem; font-weight: 700;
  letter-spacing: .1em; color: var(--ed-num);
}
.a2-type2 .pcard-name { font-size: 1.1rem; margin-top: 6px; line-height: 1.6; }
.a2-type2 .pcard-for { font-size: .92rem; font-weight: 500; color: var(--ink); margin-top: 8px; line-height: 1.75; }
.a2-type2 .pcard-for::before {
  content: "向いている人";
  display: inline-block; margin-right: 9px;
  font-family: var(--ed-serif); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; color: var(--accent-good);
}
.a2-type2 .pcard-spec {
  font-size: .95rem; gap: 8px 18px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--ed-line-soft);
}
.a2-type2 .pcard-spec dt { font-size: .82rem; color: var(--ink-muted); padding-top: 2px; }
.a2-type2 .pcard-spec dd { font-family: inherit; line-height: 1.7; }
.a2-type2 .pcard-buy { margin-top: 18px; padding-top: 0; border-top: 0; }
.a2-type2 .pcard-price { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.a2-type2 .pcard-buy .btn { padding: 12px 20px; font-size: .88rem; border-radius: 2px; }

.a2-type2 .price-stats { margin-top: 30px; }
.a2-type2 .price-stat {
  border: 0; border-radius: 0; background: transparent;
  padding: 16px 0; border-bottom: 1px solid var(--ed-line-soft);
}
.a2-type2 .price-stat .k { font-size: .8rem; letter-spacing: .06em; }
.a2-type2 .price-stat .v { font-family: var(--ed-serif); font-size: 1.9rem; font-weight: 700; }
.a2-type2 .price-stat .n { font-size: .85rem; line-height: 1.8; }

/* ---------- 5 商品詳細：ここだけ「箱」を残す ---------- */
/* 写真・型番・価格・買う導線が1つの単位なので、紙面でも枠で囲う価値がある */
.a2-type2 .product-entry {
  border: 1px solid var(--ed-line);
  border-radius: 2px;
  background: var(--surface);
  padding: 28px 24px;
  margin-bottom: 22px;
}
.a2-type2 .product-head { display: block; margin-bottom: 20px; }
.a2-type2 .product-photo {
  width: 100%; height: auto; max-height: 320px; aspect-ratio: 4 / 3;
  object-fit: contain; background: var(--ed-tint);
  border: 0; border-radius: 2px; margin-bottom: 20px;
}
.a2-type2 .product-entry .rank {
  display: block; padding: 0; border: 0; border-radius: 0; background: transparent;
  font-family: var(--ed-serif); font-size: .95rem; font-weight: 700;
  letter-spacing: .12em; color: var(--ed-num);
}
.a2-type2 .product-entry h3 {
  font-family: var(--ed-serif); font-size: 1.4rem; line-height: 1.55;
  margin: 8px 0 8px;
}
.a2-type2 .product-entry .why {
  font-size: .95rem; font-weight: 500; color: var(--ink-muted);
  margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ed-line-soft);
}
.a2-type2 .product-entry .body { margin-bottom: 22px; }

.a2-type2 .product-fit { gap: 0; margin: 0 0 22px; }
/* 既存の .article-v2 .product-fit .is-for（クラス3つ）のほうが強いので、
   左の色罫は同じ強さで書き直して意図どおりの太さにする。
   肯定と注意を色で見分けられる利点はそのまま残す。 */
.a2-type2 .product-fit div {
  border-radius: 0; background: transparent; padding: 14px 0 14px 16px;
  font-size: 1rem; line-height: 1.9; color: var(--ink);
}
.a2-type2 .product-fit .is-for { border-left: 2px solid var(--accent-good); }
.a2-type2 .product-fit .is-caution { border-left: 2px solid var(--accent-warm); }
.a2-type2 .product-fit b {
  display: block; margin-bottom: 8px;
  font-family: var(--ed-serif); font-size: .82rem; font-weight: 700; letter-spacing: .12em;
}
.a2-type2 .product-fit .is-for b { color: var(--accent-good); }
.a2-type2 .product-fit .is-caution b { color: var(--accent-warm); }

.a2-type2 .product-chips { gap: 8px 10px; margin: 0 0 22px; }
.a2-type2 .product-chips span {
  border: 0; border-radius: 0; background: transparent; padding: 0;
  font-family: inherit; font-size: .88rem; color: var(--ink-muted);
  border-bottom: 1px solid var(--ed-line);
}
/* .product-buys は本文の商品カードとサイドバーの両方で使われている。
   サイドバーは `.article-v2 .rail-card .product-buys` が flex-direction:column なので、
   flex-basis を素で当てると **横幅ではなく高さ** として効き、購入ボタンが150pxの
   高さに伸びる（サイドバーの「この記事の1位」が壊れていた 2026-09-13）。
   本文の商品カードだけに限定し、サイドバーは既存の作りのままにする。 */
.a2-type2 .product-entry .product-buys { display: flex; flex-wrap: wrap; gap: 10px; }
.a2-type2 .product-entry .product-buys .btn {
  flex: 1 1 150px; min-height: 52px; font-size: .95rem; padding: 12px;
  border-radius: 2px; letter-spacing: .02em;
}
.a2-type2 .product-entry .product-buys .btn.is-ghost {
  flex: 1 1 100%; min-height: 44px; font-size: .86rem;
  border: 1px solid var(--ed-line); background: transparent;
}
.a2-type2 .rail-card .product-buys .btn { flex: none; min-height: 44px; }
.a2-type2 .pr-note { margin-top: 16px; font-size: .75rem; color: var(--ink-muted); }

/* ---------- 6 数値バー ---------- */
.a2-type2 .metric-bars { border: 0; border-radius: 0; background: transparent; padding: 0; }
.a2-type2 .metric-bar { margin-bottom: 22px; }
.a2-type2 .metric-bar-head { font-size: .95rem; }
.a2-type2 .metric-bar-head .v { font-family: var(--ed-serif); font-size: 1.2rem; }
.a2-type2 .metric-bar-track { height: 6px; border-radius: 0; background: var(--ed-line-soft); }
.a2-type2 .metric-bar-track i { border-radius: 0; }
.a2-type2 .metric-bar-note { font-size: .82rem; }

/* ---------- 7 よくある質問 ---------- */
.a2-type2 .article-faq {
  border: 0; border-top: 1px solid var(--ed-line); border-radius: 0; background: transparent;
}
.a2-type2 .article-faq details { border-bottom: 1px solid var(--ed-line-soft); }
.a2-type2 .article-faq summary {
  padding: 20px 0; font-size: 1.05rem; font-weight: 700; line-height: 1.7;
  grid-template-columns: auto 1fr 18px; gap: 12px; align-items: start;
}
.a2-type2 .article-faq summary::before {
  font-family: var(--ed-serif); font-size: 1.05rem; font-weight: 700; color: var(--ed-num);
}
.a2-type2 .article-faq summary::after {
  content: "＋"; color: var(--a2-accent); font-size: .9rem; line-height: 1.7; justify-self: end;
}
.a2-type2 .article-faq details[open] summary::after { content: "−"; }
.a2-type2 .article-faq p { padding: 0 0 22px 34px; color: var(--ink); }

/* ---------- 8 次に読む ---------- */
.a2-type2 .next-group { margin-bottom: 34px; }
.a2-type2 .next-group h3 {
  font-family: var(--ed-serif); font-size: .84rem; font-weight: 700;
  letter-spacing: .14em; color: var(--a2-accent); margin: 0 0 6px;
}
.a2-type2 .next-list { gap: 0; }
.a2-type2 .next-list a {
  border: 0; border-bottom: 1px solid var(--ed-line-soft); border-radius: 0;
  background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.a2-type2 .next-list a.has-visual { display: block; }
.a2-type2 .next-list a::after { content: "→"; flex: none; color: var(--a2-accent); font-size: 1.05rem; }
.a2-type2 .next-list a.has-visual::after { content: none; }
.a2-type2 .next-list a.has-visual .next-card-label::after { content: " →"; color: var(--a2-accent); }
.a2-type2 .next-card-label {
  padding: 18px 0; font-size: 1.05rem; line-height: 1.7; font-weight: 700;
}
.a2-type2 .next-list a:hover { border-color: var(--a2-accent); }
.a2-type2 .next-list a:hover .next-card-label { color: var(--a2-accent); }

/* ---------- サイドバー ---------- */
.a2-type2 .article-rail .rail-card { border: 0; border-top: 2px solid var(--a2-accent-strong); border-radius: 0; padding: 18px 0; background: transparent; }
.a2-type2 .article-rail h4 { font-family: var(--ed-serif); letter-spacing: .16em; color: var(--a2-accent); font-weight: 700; }

/* ---------- 広い画面 ---------- */
@media (min-width: 768px) {
  .a2-type2 { --ed-fs-body: 1.09rem; --ed-indent: 2.4em; }
  .a2-type2 .article-eyecatch { margin-inline: 0; }
  .a2-type2 .product-head { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
  .a2-type2 .product-photo { margin-bottom: 0; aspect-ratio: 1 / 1; max-height: none; }
  .a2-type2 .product-entry { padding: 32px 30px; }
  .a2-type2 .product-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
  .a2-type2 .pcard-head { grid-template-columns: 116px 1fr; }
  .a2-type2 .pcard-thumb img { width: 116px; height: 116px; }
  .a2-type2 .price-stats { grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
}

/* ===========================================================
   .a2-type2 図版レイヤー — 2026-09-13
   罫と余白だけで組むと「整ってはいるが見せ場が無い」紙面になる。
   誌面でいう「柱・ノンブル・扉・ベストバイ」にあたる装置を足す。
   増やすのは装置であって色数ではない。使う色はアクセント1色と地の淡色だけ。
   =========================================================== */

/* ---------- 柱：大きな明朝数字＋英字ラベル ---------- */
.a2-type2 .article-section > h2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 20px;
  align-items: center;
}
.a2-type2 .article-section > h2 .step {
  display: grid;
  justify-items: center;
  margin: 0;
  font-size: 3.1rem;
  line-height: .86;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--a2-accent) 26%, #fff);
}
.a2-type2 .article-section > h2 .step::before { content: none; }
.a2-type2 .article-section > h2 .step::after {
  font-family: var(--font-jp);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--a2-accent);
  margin-top: 8px;
}
/* 節ごとの英字。日本語の見出しと役割が重ならない短い語だけを置く */
.a2-type2 #choose > h2 .step::after { content: "SELECT"; }
.a2-type2 #basics > h2 .step::after { content: "BASICS"; }
.a2-type2 #quick-buy > h2 .step::after { content: "PICKS"; }
.a2-type2 #precheck > h2 .step::after { content: "CHECK"; }
.a2-type2 #compare > h2 .step::after { content: "TABLE"; }
.a2-type2 #products > h2 .step::after { content: "DETAIL"; }
.a2-type2 #metric > h2 .step::after { content: "COST"; }
.a2-type2 #faq > h2 .step::after { content: "Q & A"; }
.a2-type2 #next > h2 .step::after { content: "NEXT"; }

/* ---------- 地の色で節を分ける ---------- */
/* 白一色で最後まで行くと、どこまで読んだかの手がかりが無い。
   「早見表」と「電気代」だけ淡い地に沈めて、紙面にリズムをつける。 */
.a2-type2 #quick-buy,
.a2-type2 #metric {
  background: var(--ed-tint);
  margin-inline: -22px;
  padding: 48px 22px 44px;
  border-top: 1px solid color-mix(in srgb, var(--a2-accent) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--a2-accent) 16%, transparent);
}
.a2-type2 #quick-buy .quick-picks,
.a2-type2 #quick-buy .quick-pick { border-color: color-mix(in srgb, var(--a2-accent) 20%, transparent); }

/* ---------- 扉：結論を紙面の「リード」として立てる ---------- */
.a2-type2 .article-answer {
  position: relative;
  padding-top: 34px;
}
.a2-type2 .article-answer::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 72px; height: 2px;
  background: var(--a2-accent);
}

/* ---------- ベストバイ：1位だけは別格の扱いにする ---------- */
/* ベタ塗りは「押せるもの」だけ、という決めの唯一の例外。
   順位付け記事で1位が他と同じ見た目なのは、記事の主張を捨てている。 */
.a2-type2 .product-entry:first-of-type {
  border: 2px solid var(--a2-accent-strong);
  position: relative;
  padding-top: 34px;
}
.a2-type2 .product-entry:first-of-type::before {
  content: "BEST BUY";
  position: absolute;
  top: 0; left: 0;
  padding: 6px 16px;
  background: var(--a2-accent-strong);
  color: var(--ink-inverse);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
}
.a2-type2 .product-entry .rank { font-size: 1.05rem; }
.a2-type2 .product-entry:first-of-type .rank { color: var(--a2-accent-strong); }

/* ---------- 商品写真を図版として扱う ---------- */
.a2-type2 .product-photo {
  background: linear-gradient(180deg, var(--ed-tint), #fff);
  border: 1px solid var(--ed-line-soft);
}
.a2-type2 .pcard-thumb img { background: var(--ed-tint); }

/* ---------- 比較表（広い画面）---------- */
.a2-type2 .compare-table-wrap { border: 0; border-radius: 0; background: transparent; }
.a2-type2 .compare-table-v2 { font-size: .9rem; }
.a2-type2 .compare-table-v2 thead th {
  background: var(--a2-accent-strong);
  color: var(--ink-inverse);
  font-size: .78rem;
  letter-spacing: .04em;
  border-bottom: 0;
}
.a2-type2 .compare-table-v2 thead .prod-cell span,
.a2-type2 .compare-table-v2 thead .prod-cell small,
.a2-type2 .compare-table-v2 thead a { color: var(--ink-inverse); }
.a2-type2 .compare-table-v2 tbody th { background: var(--ed-tint); font-weight: 700; }
.a2-type2 .compare-table-v2 tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--a2-accent) 3%, #fff); }
.a2-type2 .compare-table-v2 th,
.a2-type2 .compare-table-v2 td { border-bottom: 1px solid var(--ed-line-soft); }

/* ---------- 数値バーを図版にする ---------- */
.a2-type2 .metric-bar-track { height: 10px; background: #fff; border: 1px solid var(--ed-line-soft); }
.a2-type2 .metric-bar-track i { background: var(--a2-accent-strong); }
.a2-type2 .metric-bar-head b { font-family: var(--ed-serif); font-size: 1rem; }

/* ---------- 次に読む：カードに戻す（節の終わりで紙面を締める）---------- */
.a2-type2 .next-list a:not(.has-visual) {
  border: 1px solid var(--ed-line);
  border-radius: 2px;
  padding: 0 18px 0 0;
  margin-bottom: 10px;
  background: var(--surface);
}
.a2-type2 .next-list a:not(.has-visual) .next-card-label { padding: 18px 0 18px 18px; }
.a2-type2 .next-list a:hover { border-color: var(--a2-accent); background: var(--ed-tint); }

@media (min-width: 768px) {
  .a2-type2 .article-section > h2 .step { font-size: 3.8rem; }
  .a2-type2 #quick-buy,
  .a2-type2 #metric { margin-inline: -30px; padding: 56px 30px 52px; }
  .a2-type2 .next-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .a2-type2 .next-list a:not(.has-visual) { margin-bottom: 0; }
}

/* サイト共通の h2 下の見出し罫（app/ui.css の .article-section > h2::after）は
   ink-strong のベタ黒で、明朝見出しの下に黒い棒が入って浮く。
   位置も border 2px 前提なので 1px の罫では1pxずれる。アクセント色で引き直す。 */
.a2-type2 .article-section > h2::after {
  bottom: -1px;
  width: 3.2em;
  height: 3px;
  background: var(--a2-accent-strong);
}

/* 「向いている人」列が1文字ずつ縦積みになるので、最低幅を与える。
   表は overflow-x:auto の中なので、広げたぶんは横スクロールで見る。 */
.a2-type2 .compare-table-v2 { min-width: 980px; }
.a2-type2 .compare-table-v2 td:nth-child(2) { min-width: 190px; }

/* 画像つきの「次に読む」だけ枠が無く、画像の下に見出しが浮いていた
   （枠を戻したのは画像なしのカードだけだった）。同じ枠にそろえる。 */
.a2-type2 .next-list a.has-visual {
  border: 1px solid var(--ed-line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface);
}
.a2-type2 .next-list a.has-visual .next-card-label { padding: 16px 18px; }
.a2-type2 .next-card-visual { min-height: 200px; border-bottom: 1px solid var(--ed-line-soft); }

/* 出典リスト（2本）もグレーのベタ塗り箱のままだったので、罫ベースにそろえる */
.a2-type2 .intent-basis-list { list-style: none; margin: 0; padding: 0; }
.a2-type2 .intent-basis-list li {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ed-line-soft);
  border-radius: 0;
  padding: 18px 0;
  font-size: 1rem;
  line-height: 1.9;
}
.a2-type2 .intent-basis-list li:last-child { border-bottom: 1px solid var(--ed-line-soft); }
.a2-type2 .intent-basis-list b { display: block; font-weight: 700; margin-bottom: 6px; }
.a2-type2 .intent-basis-list a { font-size: .88rem; color: var(--a2-accent); }

/* ---------- 「向いている人」は1行の見出し行にする ---------- */
/* 実測（v2記事196本・1049商品）：
     向いている人 中央値24字（最短9・最長47） / 注意点 中央値102字
     708件（68%）で注意点が3倍以上長い
   左右に同じ大きさの箱で並べても、片方が1行で終わるので対にならない。
   誰向けかは商品名の直後に置くほうが、読む順（名前→誰向け→中身）にも合う。 */
.a2-type2 .product-for-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--ed-line-soft);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink-strong);
}
.a2-type2 .product-for-line b {
  font-family: var(--ed-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent-good);
  white-space: nowrap;
}
/* 注意点だけが残るので、対の2段組をやめる */
.a2-type2 .product-fit { display: block; }
.a2-type2 .product-entry .why { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
@media (min-width: 768px) {
  .a2-type2 .product-fit { display: block; }
}

/* ---------- サイドバーの「この記事の1位」を本文の意匠にそろえる ---------- */
/* 実測（1280px・レール幅300px）：
     赤のベタ塗りバッジ 15.2px／41px高、価格 26.4px の赤、カード全高 574px。
     本文を明朝と罫の静かな面にしたので、右だけ赤く大きく、別のサイトのように見える。
   押せるもの（Amazon／楽天のボタン）はストアの色のまま残し、
   それ以外のベタ塗りと赤字をやめる。 */
/* 枠はサイトのブランド赤のまま残す（1位であることの目印として効いている）。
   やめたのはベタ塗りのバッジと赤い価格で、枠と影の作りだけ意匠にそろえる。 */
.a2-type2 .article-rail .rail-card.rail-best {
  border: 2px solid var(--brand);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 16px;
}
/* 「この記事の1位」は赤のベタ塗りに戻す。1位の目印なので、字だけだと弱い。
   元は 15.2px・高さ41px で本文の見出しより大きかったので、寸法だけ詰める
   （13.6px・高さ30px）。枠の赤とベタの赤で、1位であることが一目で分かる。 */
.a2-type2 .rail-rank {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 2px;
  background: var(--brand);
  color: var(--ink-inverse);
  font-family: var(--font-jp);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.a2-type2 .article-rail .rail-best .rail-best-head { margin: 0 0 12px; }
.a2-type2 .rail-best-visual { border: 0; border-bottom: 1px solid var(--ed-line-soft); border-radius: 0; margin-bottom: 14px; }
.a2-type2 .article-rail .rail-best .p-name { font-size: .98rem; font-weight: 700; margin-bottom: 8px; }
/* 価格も枠・バッジと同じ赤にそろえる。1位カードは赤で1つのまとまりにする
   （本文の商品カードの価格は黒のまま。あちらは比較のための数字なので、
   桁の読みやすさを優先して色を付けない）。 */
.a2-type2 .article-rail .rail-best .p-price {
  font-family: inherit;
  font-size: 1.45rem;
  color: var(--brand);
  letter-spacing: -.01em;
}
.a2-type2 .article-rail .rail-best .btn { border-radius: 2px; }
.a2-type2 .article-rail .rail-best .btn.is-ghost { border: 1px solid var(--ed-line); }