/* ============================================================
   食材宅配ナビ デザインシステム
   世界観: 「丁寧な暮らし」「キッチンの朝の光」
   ============================================================ */

:root {
  /* --- カラートークン --- */
  --color-bg: #FBF8F3;           /* 生成りのベース */
  --color-bg-warm: #F5EFE4;      /* セクション背景の陰影用 */
  --color-surface: #FFFFFF;      /* カード面 */
  --color-ink: #2B2A28;          /* 墨色の本文 */
  --color-ink-soft: #5A5754;     /* 補足テキスト */
  --color-border: #C7BAA3;       /* 装飾ヘアライン専用（1.81:1・カード枠/toc枠/faq枠/区切りバー等、3:1未達でも実害の小さい箇所） */
  --color-border-strong: #9C8F76; /* 機能的境界専用（3.00:1・表罫線/区切り線/h2下罫線など、構造の伝達に罫線自体が要る箇所） */
  --color-sage: #7A9E7E;         /* アクセント: セージグリーン（装飾用。イラスト・タグ・区切り線のみ） */
  --color-sage-deep: #4A6B50;    /* セージの濃色（文字・ボタンでAAコントラスト確保） */
  --color-sage-hover: #3E5A44;   /* ホバー時: 同一色相の暗色（色相反転させない） */
  --color-sage-tint: #EEF3EC;    /* セージの淡色背景 */
  --color-sage-quote: #5F8265;   /* 引用の左罫線専用（装飾セージ#7A9E7Eの2.82:1では非text-contrast基準未達のため3.6:1相当に強めた色） */
  --color-terracotta: #D08C60;   /* アクセント: テラコッタ（装飾用） */
  --color-terracotta-deep: #8E4E2C; /* テラコッタの濃色（文字・ボタンでAAコントラスト確保） */
  --color-terracotta-tint: #FBEEE4; /* テラコッタの淡色背景 */
  --color-focus: #2B2A28;

  /* --- タイポグラフィ --- */
  --font-heading: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  /* --- 余白・角丸・影 --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --radius-card: 16px;
  --radius-sm: 8px;
  --shadow-soft: 0 1px 3px rgba(43, 42, 40, 0.06), 0 6px 20px rgba(43, 42, 40, 0.05);
  --content-width: 38em;
  --page-width: 1120px;
}

/* --- リセット・基本 --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; max-width: 100%; }
/* overflow-x:hidden は html のみに付与する。body にも付けると position:sticky（ヘッダー・比較表の
   thead/先頭列固定）が壊れる（body が独立スクロールコンテナ扱いになり、実際のスクロールはhtml側で
   起きるため、sticky要素がビューポートでなくstaticなbodyボックスに固定されてしまう）。 */
html { overflow-x: hidden; }
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.8;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}
.url { overflow-wrap: anywhere; }
/* target="_blank" の告知など、視覚的には不要だがスクリーンリーダーには読ませたいテキスト（WCAG 3.2.5 / G201対応）。 */
.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; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--color-sage-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-sage-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 3px;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  margin: 1.6em 0 0.7em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.38; letter-spacing: 0.03em; margin-top: 0.4em; }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); border-bottom: 1px solid var(--color-border-strong); padding-bottom: 0.5em; margin-top: 2.4em; }
h3 { font-size: 1.15rem; }
p { margin: 0.9em 0; }
ul, ol { padding-left: 1.4em; line-height: 1.8; }
strong { color: var(--color-ink); }

@media (max-width: 600px) {
  h1 { letter-spacing: 0.02em; }
}

.header-inner, .footer-inner, .page-inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--space-2); }

/* --- ヘッダー・ナビ --- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: rgba(251, 248, 243, 0.92);
  backdrop-filter: saturate(140%) blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: var(--space-2); }
.logo { display: inline-flex; align-items: center; color: var(--color-ink); text-decoration: none; }
.logo-mark { color: var(--color-sage-deep); display: block; }
.nav-toggle { display: none; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px; color: var(--color-ink); cursor: pointer; }
.site-nav { display: flex; gap: var(--space-3); }
.site-nav a { text-decoration: none; color: var(--color-ink); font-size: 0.92rem; letter-spacing: 0.02em; padding: 4px 2px; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-sage-deep); border-bottom-color: var(--color-sage); }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column; gap: 0; padding: var(--space-1) var(--space-2) var(--space-2);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 10px 4px; border-bottom: 1px solid var(--color-border); }
}

/* --- PR/AI開示帯 --- */
.pr-disclosure-bar {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  font-size: 0.8rem;
  padding: 12px 0;
  border-radius: 0;
  margin: 16px 0 32px;
}
.pr-disclosure-bar p { margin: 4px 0; line-height: 1.7; }
.ai-disclosure { color: var(--color-ink-soft); margin: 6px 0 0; }
.ai-disclosure-details { margin-top: 2px; }
.ai-disclosure-details summary {
  cursor: pointer; color: var(--color-ink-soft); font-size: 0.8rem;
  list-style: none; display: inline-flex; align-items: center; gap: 4px;
}
.ai-disclosure-details summary::-webkit-details-marker { display: none; }
.ai-disclosure-details summary::before {
  content: ''; width: 9px; height: 9px; flex: none;
  background-color: var(--color-ink-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 8l8 8 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 8l8 8 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease;
}
.ai-disclosure-details[open] summary::before { transform: rotate(-180deg); }
/* 再採点対応: .link-pr-note は linkPrNote() が approved(提携済み)案件にのみ出力する仕様のため、
   提携済み案件が0件の現データでは全ページで使用回数0になる（デッドCSSではなく「仕様どおり未使用」）。
   提携が発生し affiliateStatus:"approved" の案件が1件でもできた時点でHTMLに出力され始める。 */
.link-pr-note { font-size: 0.82rem; color: var(--color-terracotta-deep); margin: var(--space-1) 0 2px; letter-spacing: 0.02em; }
/* 法務ゲートR-PR-H1対応: ヒーローH1直後の簡潔なPR表記1行。.pr-disclosure-barと違いヘアライン(罫線)は付けない。 */
.pr-inline { font-size: 0.8rem; color: var(--color-ink-soft); line-height: 1.7; margin: 8px 0 0; }
/* 法務H-12対応: サイト単位でPR帯は出るが当該ページに提携済みリンクが無いことを添える注記。 */
.page-offer-note { font-size: 0.8rem; color: var(--color-ink-soft); margin: 0 0 24px; }

/* --- archived（公式サイト到達不可）注意帯：pr-disclosure-bar と同じヘアライン様式、罫線色のみアクセントで強調 --- */
.archived-notice-bar {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-terracotta-deep);
  border-bottom: 1px solid var(--color-terracotta-deep);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  padding: 12px 0;
  border-radius: 0;
  margin: 16px 0 24px;
}
.archived-notice-bar p { margin: 0; line-height: 1.7; }
.compare-table td.price-archived, .card-service p.price-archived-note { color: var(--color-ink-soft); font-style: italic; font-size: 0.86rem; }

/* --- Cookie同意バナー --- */
.cookie-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  padding: var(--space-2); box-shadow: 0 -4px 16px rgba(43,42,40,0.08);
}
.cookie-consent p { margin: 0 0 var(--space-1); font-size: 0.85rem; max-width: var(--page-width); margin-left: auto; margin-right: auto; }
.cookie-consent-actions { display: flex; gap: var(--space-1); justify-content: center; }
.cookie-consent-actions button { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font-size: 0.85rem; font-family: var(--font-body); }
#cookie-consent-accept { background: var(--color-sage-deep); color: #fff; border-color: var(--color-sage-deep); }

/* --- ヒーロー --- */
.hero {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
}
.hero-copy .eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; color: var(--color-sage-deep); text-transform: uppercase; margin: 0 0 var(--space-1); }
.hero-copy h1 { margin-top: 0.2em; }
.hero-copy .hero-lead { font-size: 1.02rem; color: var(--color-ink-soft); max-width: 34em; }
.hero-illustration { display: block; margin: 0 auto; width: min(100%, 360px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 860px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; padding: var(--space-5) 0 var(--space-4); }
  .hero-illustration { width: 100%; }
}

/* --- ボタン --- */
.btn-standard, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  padding: 12px 24px; border-radius: 999px; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-standard { background: var(--color-sage-deep); color: #fff; border: 1px solid var(--color-sage-deep); margin-top: var(--space-1); }
.btn-standard:hover { background: var(--color-sage-hover); border-color: var(--color-sage-hover); color: #fff; }
.btn-outline { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-bg); }
.btn-standard:active, .btn-outline:active { transform: translateY(1px); }

/* --- テキストリンク型CTA（カード内など、塗りピルを乱発しないための控えめな導線） --- */
.link-official {
  color: var(--color-sage-deep); font-weight: 500; font-size: 0.94rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  display: inline-block; margin-top: auto; padding-top: 4px;
}
.link-official:hover { color: var(--color-sage-hover); }
.link-official::after { content: '\3000 \2192'; }

/* --- 区切り --- */
.section-divider { display: block; margin: var(--space-3) auto; }

/* --- 比較表（先頭列固定・横スクロール・タッチ前提でホバー無し） ---
   再採点(CRITIQUE2.md)対応: 「文章をセルに詰めたまま white-space:normal にした」ことで
   モバイル表高4222px・行高差8.3倍という巨大化が起きていたため、以下の方針に変更した。
     1) 短縮フィールド（priceShort/deliveryAreaShort、いずれもdata担当がservices.jsonに追加）が
        あれば .cell-strong で1行表示、無ければ .cell-clamp で3行に切って .cell-detail-link を出す。
        いずれの場合も元の全文は .sr-only で保持し、スクリーンリーダー・旧テスト双方から参照可能にする。
     2) 再採点(CRITIQUE4)対応で見直し: 縦方向の内部スクロール化(max-height)はCRITIQUE3時点では
        モバイル(899px以下)限定で残していたが、可視684pxの箱に918pxの表が入ったままページスクロールと
        操作モデルが分岐していたため撤廃した。.table-scroll は幅を問わず max-height を持たず、横方向
        (overflow-x)だけがスクロールし縦はページと一緒に流れる（横スクロールが必要無いPCは実質何も
        起こらない）。thead の position:sticky はPC(900px以上、固定ヘッダー実測高65pxぶんtopをずらす)の
        ページ本体スクロール追随のみ維持し、モバイルはページ最上部に張り付いてサイトヘッダーと衝突する
        ため position:static に戻して諦める（実害はスクロール中に列見出しが見えなくなるだけで、
        列見出し自体は初期表示のFVに写る）。
     3) 右端フェード(::after)は「詳細を見る」列を隠してしまうため削除し、.table-scroll-hint（横に
        実際にスクロールできる時だけJSが表示・一度スクロールしたら消す）に一本化した。再採点(CRITIQUE4)
        対応でヒントは表の直後に通常のドキュメントフローで置く（絶対配置をやめる）ことで、モバイルで
        表の下端行「詳細を見る」セルに重なっていた問題を解消した。 */
.table-scroll {
  overflow-x: auto; overflow-y: visible; max-height: none; width: 100%; margin: var(--space-2) 0 var(--space-3);
  -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
}
@media (min-width: 900px) {
  /* .table-scroll 自身を「スクロールコンテナ」から外す(overflow:visible)ことで、内部の
     thead の position:sticky がページ本体のスクロールに追随するようにする。overflow-x:auto を
     残したままだとCSS Overflow仕様の相互作用規則で縦軸も自動的にauto扱いになり、theadの
     sticky が(実際にはスクロールしない).table-scroll自身を基準に計算されてしまい無効化される。 */
  .table-scroll { overflow: visible; }
}
.table-scroll-hint {
  display: none; margin: 8px 0 0;
  background: var(--color-bg-warm); color: var(--color-ink-soft);
  font-size: 0.72rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--color-border);
  pointer-events: none; transition: opacity .15s ease;
  /* 再採点(CRITIQUE4)対応: 表の下に通常フローで置く。既定は非表示。
     site.js が scrollWidth>clientWidth の時だけ .is-visible を付与する */
}
.table-scroll-hint.is-visible { display: inline-block; }
table.md-table, table.compare-table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--color-surface); }
table.md-table th, table.md-table td { border-bottom: 1px solid var(--color-border-strong); padding: 12px 14px; text-align: left; white-space: normal; overflow-wrap: break-word; font-size: 0.92rem; line-height: 1.5; }
table.md-table th { background: var(--color-bg-warm); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.03em; }
table.md-table th:first-child { width: 7em; white-space: nowrap; }
table.compare-table { min-width: 640px; }
table.compare-table th, table.compare-table td { border-bottom: 1px solid var(--color-border-strong); padding: 14px 16px; text-align: left; white-space: normal; font-size: 0.92rem; line-height: 1.5; }
table.compare-table thead th {
  background: var(--color-bg-warm); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
@media (min-width: 900px) {
  /* .site-header の実測高(約64.7px)ぶんだけ下げてページスクロール時に潜り込まないようにする。 */
  table.compare-table thead th { top: 65px; }
}
@media (max-width: 899px) {
  /* 再採点(CRITIQUE4)対応: モバイルのthead stickyはページ本体スクロール基準になるとサイトヘッダーに
     重なるため、固定を諦めて解除する（「新たな問題」#2対応。sticky解除であって内部スクロールの復活ではない）。
     このルールは上の「table.compare-table thead th { position:sticky }」より後ろに置く必要がある
     （同じ詳細度のセレクタはCSS上で後に書いた方が勝つため、前に置くと無条件sticky指定に上書きされて
     モバイルでも解除されなかった＝実装時に実測して気づいた不具合）。 */
  table.compare-table thead th { position: static; top: auto; }
}
table.compare-table thead th:first-child { z-index: 4; }
/* 価格セルは tabular-nums で数字の桁を揃える。右揃えは1行に収まる短いセル（.price-short）のみに限定する。
   再採点(CRITIQUE3)対応: 幅の上限が無いまま休止2社の55字注記が入ると価格列が表幅の51%まで膨れ、
   見出しと数値の対応が読めなくなっていたため上限を明示する。
   再採点(CRITIQUE4)対応: table-layout:auto のテーブルでは max-width だけを指定した列は、他の列に
   余った横幅を「上限を無視して」配分されてしまうことを実測で確認した（カテゴリ列がmax-width:140px
   指定でも実際は204pxになっていた）。width(固定)を指定した列だけが正しく上限で止まり、width指定の
   無い列（本テーブルではリンク列）だけに余った幅が流れる。そのため価格・配送エリア・カテゴリ・
   先頭列(サービス名)の4列は max-width ではなく width で固定し、リンク列だけを可変のままにする。 */
table.compare-table td.price, table.compare-table th.price { font-variant-numeric: tabular-nums; width: 260px; }
table.compare-table th.price { text-align: right; }
table.compare-table td.price.price-short { text-align: right; }
table.compare-table td:last-child a.affiliate-link { white-space: nowrap; }
/* 先頭列（サービス名）: 再採点(CRITIQUE4)対応で 9em 固定を緩めた。最長の社名「パルシステム（出資金制）」の
   文字幅を実測すると約176px（左右padding 32pxを足すと約208px）あり、CRITIQUE4が例示した目標「190px前後」
   では実際には足りず2行に折れてしまったため、実測に基づき 16em（実測約236px、内側でも28px弱の余裕）に
   width固定した。上のコメントのとおり width指定が無いと他列に上限超過で幅を奪われるため、
   min-width/max-widthではなく width を指定する（9em固定時は「生活クラブ（出資金制）」「nosh（ナッシュ）」
   「パルシステム（出資金制）」が2行に折れていた）。固定幅時代の重なり対策（cell-strong/cell-clampでの
   セル内容短縮）は変わらず有効。なお overflow:auto の scrollWidth 側に固定列ぶんの余白を足して重なりを
   完全ゼロにする案も検証したが、狭い画面幅では列の実効幅を大きく圧迫し行高が跳ね上がる副作用の方が
   大きいため採用していない。 */
table.compare-table th:first-child, table.compare-table td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--color-surface);
  box-shadow: 6px 0 8px -6px rgba(43,42,40,.18);
  white-space: normal; overflow-wrap: normal; word-break: normal;
  width: 16em;
}
table.compare-table thead th:first-child { background: var(--color-bg-warm); }
table.compare-table tbody tr:last-child td { border-bottom: none; }
/* 配送エリア列: PCで表の46%(501px)を占めていた反省から上限を明示する（上のコメントのとおり width固定）。 */
table.compare-table th.delivery-area, table.compare-table td.delivery-area { width: 240px; }
/* カテゴリ列: 上限が無かったため「野菜宅配」等の4〜6字に対し305px(サービス名列132pxの2.3倍)まで
   膨れ、余った幅の大半(約250px)が空白になっていた（再採点CRITIQUE4対応。上のコメントのとおり width固定）。 */
table.compare-table th.category, table.compare-table td.category { width: 140px; }
/* セル内の値(短縮フィールド優先)・補足・詳細リンクの表示 */
.cell-strong { font-weight: 700; }
.cell-sub { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 400; color: var(--color-ink-soft); }
.cell-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem; line-height: 1.45; }
.cell-clamp.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cell-detail-link { display: inline-block; margin-top: 4px; font-size: 0.8rem; color: var(--color-sage-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); }
.cell-detail-link:hover { color: var(--color-sage-hover); }
.table-note { font-size: 0.8rem; color: var(--color-ink-soft); margin-top: 12px; }

/* --- カード --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.card-service {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px 22px;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
}
.card-service.featured { border-color: var(--color-terracotta); box-shadow: 0 0 0 1px var(--color-terracotta), var(--shadow-soft); }
.leaf-badge { width: 30px; height: 30px; margin-bottom: 6px; }
.card-service h3 { margin: 0.2em 0 0.3em; font-size: 1.08rem; }
.card-service h3 a { text-decoration: none; color: var(--color-ink); }
.card-service h3 a:hover { color: var(--color-sage-deep); }
.card-service p { margin: 0.35em 0; font-size: 0.92rem; color: var(--color-ink-soft); }
.card-service p strong { color: var(--color-terracotta-deep); font-family: var(--font-heading); font-size: 1.02rem; }
/* 再採点対応: .pr-tag は s.featured:true の案件にのみ出力する仕様のため、featured案件が0件の
   現データでは全ページで使用回数0になる（デッドCSSではなく「仕様どおり未使用」）。案件が featured
   になった時点でカード・比較表・各社ページにPRバッジとして出力され始める。 */
.pr-tag { display: inline-block; background: var(--color-terracotta-deep); color: #fff; font-size: 0.75rem; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; align-self: flex-start; }

/* --- Shorts導線・動画カード（YouTube、任意機能。site.youtubeUrl未設定時はDOM自体が出ない） --- */
.youtube-shorts-link { margin-top: var(--space-2); font-size: 0.92rem; }
.card-grid-video { grid-template-columns: repeat(3, 1fr); }
.card-video {
  display: block; border: 1px solid var(--color-border); border-radius: var(--radius-card);
  overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-soft);
  text-decoration: none; color: var(--color-ink);
}
.card-video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-bg-warm); }
.card-video p { margin: 0; padding: 10px 14px; font-size: 0.88rem; line-height: 1.5; color: var(--color-ink); }
.card-video:hover p { color: var(--color-sage-deep); }
.video-see-all { margin-top: var(--space-2); font-size: 0.92rem; }

/* --- 記事一覧（トップの「記事」セクション） --- */
.article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; list-style: none; padding: 0; }
.article-list li { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.article-list a { display: block; padding: 14px 16px; text-decoration: none; color: var(--color-ink); font-size: 0.94rem; line-height: 1.6; }
.article-list a:hover { color: var(--color-sage-deep); background: var(--color-sage-tint); border-radius: var(--radius-sm); }

/* --- セクション見出し --- */
.section-title { display: flex; align-items: baseline; gap: 10px; }
.section-title .section-en { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--color-sage-deep); text-transform: uppercase; }

/* --- 本文（記事・about・privacy・terms） --- */
.prose { max-width: var(--content-width); margin: 0 auto; }
.prose blockquote {
  margin: var(--space-2) 0; padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--color-sage-quote); background: var(--color-sage-tint);
  color: var(--color-ink-soft); font-size: 0.92rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose h1 + .pr-disclosure-bar { margin-top: var(--space-2); }
/* 記事末尾の最終更新日（content-registry相当が無い間はビルド日で代替） */
.article-updated { font-size: 0.82rem; color: var(--color-ink-soft); margin-top: var(--space-3); }

/* 再採点(CRITIQUE3)対応:「誰が書いたか」の帯。記事末尾・各社ページ末尾に追加のみ行う
   （既存の法務要素 .pr-disclosure-bar 等の文言・位置は変更しない）。 */
.byline-bar { border-top: 1px solid var(--color-border); margin-top: var(--space-3); padding-top: var(--space-2); font-size: 0.85rem; color: var(--color-ink-soft); }
.byline-bar p { margin: 3px 0; }

/* --- 目次（details/summary）。既定はモバイル閉のみを想定した上下ヘアライン。
   PC(960px以上)は assets/site.js が open 属性を付与し、右カラムに position:fixed で固定する
   （再採点対応: 既定閉のままだと記事の地図が消えるため）。JS無効時は常に既定閉のまま安全側に倒す。 --- */
.toc { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 10px 0; margin: var(--space-3) 0; }
.toc-title {
  margin: 0; cursor: pointer; list-style: none; position: relative;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.18em;
  font-size: 0.78rem; color: var(--color-ink-soft); text-transform: uppercase;
  padding-right: 26px;
}
.toc-title::-webkit-details-marker { display: none; }
/* 再採点(CRITIQUE3)対応: モバイルで「目次」の2文字だけの空帯に見えていたため、開閉状態を示す
   シェブロンマーカーを付ける（.faq-item summary::afterと同じmaskアイコンの使い回し）。 */
.toc-title::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px;
  margin-top: -6px; transition: transform .18s ease;
  background-color: var(--color-ink-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 8l8 8 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 8l8 8 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.toc[open] .toc-title::after { transform: rotate(-180deg); }
.toc[open] .toc-title { margin-bottom: 8px; }
.toc ol { list-style: decimal; padding-left: 1.4em; margin: 0; }
.toc a { text-decoration: none; font-size: 0.9rem; }
.toc a:hover { color: var(--color-sage-hover); }
/* 再採点(CRITIQUE3)対応: 960pxでは right のフォールバックが16pxに張り付き、viewport 960〜1099pxの
   帯で .prose と最大57px重なっていたため、右カラムに収まりきる幅(1140px)まで閾値を引き上げる。
   それ未満は通常のドキュメントフロー内(閉じたアコーディオン)のまま表示し、本文と重ならないようにする。 */
@media (min-width: 1140px) {
  .toc {
    position: fixed;
    top: 88px;
    right: max(16px, calc((100vw - 608px) / 2 - 250px));
    width: 230px;
    max-height: calc(100vh - 112px);
    overflow: auto;
    margin: 0;
    padding: 12px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    z-index: 5;
  }
}

/* --- パンくず --- */
.breadcrumb { font-size: 0.82rem; color: var(--color-ink-soft); margin: 0 0 var(--space-2); }
.breadcrumb a { color: var(--color-ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-sage-deep); text-decoration: underline; }

/* --- 関連する記事 --- */
.related-articles { margin-top: var(--space-4); }
.related-articles h2 { font-size: 1.05rem; }

/* --- FAQ（details/summary） --- */
.faq-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0 var(--space-2); margin: 12px 0; background: var(--color-surface);
  transition: background-color .18s ease, border-color .18s ease;
}
.faq-item summary {
  cursor: pointer; padding: 14px 0; font-family: var(--font-heading); font-weight: 600;
  letter-spacing: 0.02em; color: var(--color-ink); list-style: none; position: relative;
  padding-right: 36px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px;
  margin-top: -6px; transition: transform .18s ease;
  background-color: var(--color-sage-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 8l8 8 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 8l8 8 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq-item[open] summary::after { transform: rotate(-180deg); }
.faq-item p { padding-bottom: var(--space-2); }
.faq-item[open] { background: #FDFBF7; border-color: var(--color-border-strong); }
.faq-item[open] summary { border-bottom: 1px solid var(--color-border); }
.prose h2 + .faq-item, .prose h2 + p + .faq-item { margin-top: var(--space-2); }

/* --- フッター --- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-warm); margin-top: var(--space-5); }
.footer-inner { padding-top: var(--space-3); padding-bottom: var(--space-3); font-size: 0.85rem; color: var(--color-ink-soft); }
.footer-brand { margin: 0 0 var(--space-1); }
.footer-brand .logo-mark { color: var(--color-sage-deep); }
.footer-nav a { margin-right: var(--space-2); color: var(--color-ink-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--color-sage-deep); }

.page-inner { padding-top: var(--space-3); padding-bottom: var(--space-5); }

@media (max-width: 600px) {
  .card-grid, .article-list, .magazine-grid { grid-template-columns: 1fr; }
  .card-grid-video { grid-template-columns: repeat(2, 1fr); gap: var(--space-1); }
}

/* ============================================================
   Design v3: 30〜40代女性(共働き・子育て・時短志向)向けビジュアル強化
   雑誌的な余白・手書き風の見出し装飾・深みのある野菜色アクセント
   ============================================================ */
:root {
  --color-carrot: #D97B29;      /* 深みのあるにんじん色（装飾アクセント、パステルにしない） */
  --color-carrot-deep: #A85A16;
}

/* --- 手書き風の一筆下線（見出しの装飾用） --- */
.hand-underline { display: block; margin-top: 2px; width: 84px; height: 10px; color: var(--color-terracotta); }
.hero-copy .hand-underline { margin-top: 6px; }

/* --- ヒーロー直下の3つの入口カード --- */
/* min-width:0 が無いと入れ子グリッドの content-based最小幅が親(.hero-copy)に伝播し、
   3カード分(560px超)を確保しようとしてページ全体が横に溢れる（実測で発見・モバイル横スクロール対策）。 */
.hero-entry-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); max-width: 640px; min-width: 0; }
.hero-copy { min-width: 0; }
.entry-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 16px 16px 18px; text-decoration: none; color: var(--color-ink);
  box-shadow: var(--shadow-soft); transition: transform .15s ease, border-color .15s ease;
}
.entry-card:hover { transform: translateY(-3px); border-color: var(--color-sage-deep); color: var(--color-ink); }
.entry-card .brand-icon { width: 40px; height: 40px; }
.entry-card .entry-card-title { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.entry-card .entry-card-sub { font-size: 0.8rem; color: var(--color-ink-soft); }

/* --- マガジン風 記事カード（トップの記事一覧） --- */
.magazine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.card-article {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 20px 20px 22px; box-shadow: var(--shadow-soft); text-decoration: none; color: var(--color-ink);
}
.card-article:hover { border-color: var(--color-sage-deep); color: var(--color-ink); }
.card-article-head { display: flex; align-items: center; gap: 10px; }
.card-article-head .brand-icon { width: 34px; height: 34px; flex: none; }
.card-article h3 { margin: 0; font-size: 1.02rem; line-height: 1.5; font-weight: 600; }
.card-article-summary { margin: 0; font-size: 0.86rem; color: var(--color-ink-soft); line-height: 1.6; }
.card-article-meta { margin-top: auto; padding-top: 6px; font-size: 0.76rem; color: var(--color-sage-deep); letter-spacing: 0.02em; }

/* --- 記事: この記事でわかること --- */
.learn-box {
  background: var(--color-sage-tint); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 18px 20px; margin: var(--space-2) 0 var(--space-3);
}
.learn-box-title { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 600; font-size: 0.98rem; color: var(--color-sage-deep); }
.learn-box ul { margin: 0; padding-left: 1.3em; }
.learn-box li { margin: 3px 0; font-size: 0.92rem; }

/* --- 記事: 結論カード --- */
.conclusion-card {
  background: var(--color-terracotta-tint); border-left: 4px solid var(--color-terracotta-deep);
  border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: 16px 20px; margin: var(--space-3) 0;
}
.conclusion-label { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-terracotta-deep); font-weight: 700; }
.conclusion-text { margin: 0; font-size: 0.98rem; line-height: 1.75; }

/* --- 比較表: あなた向けの選び方チップ --- */
.persona-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-2) 0 var(--space-1); }
.persona-chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body);
  font-size: 0.85rem; padding: 7px 16px 7px 12px; border-radius: 999px; border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-ink); cursor: pointer;
}
.persona-chip .brand-icon { width: 18px; height: 18px; }
.persona-chip:hover { border-color: var(--color-sage-deep); }
.persona-chip.is-active { background: var(--color-sage-deep); border-color: var(--color-sage-deep); color: #fff; }
.persona-chip.is-active .brand-icon { filter: brightness(0) invert(1); }
.compare-table tbody tr { transition: opacity .15s ease; }
.compare-table tbody tr.persona-dim { opacity: 0.35; }
.compare-table tbody tr.persona-match td:first-child,
.compare-table tbody tr.persona-match th:first-child,
.compare-table tbody tr.persona-match td,
.compare-table tbody tr.persona-match th { background: var(--color-sage-tint); }

/* --- 各社ページ: 抽象パターン背景ヘッダー（社ごとに色相が変わる） --- */
.service-hero { border-radius: var(--radius-card); padding: 28px 24px 20px; margin: 0 0 var(--space-2); background-repeat: repeat; background-color: var(--color-bg-warm); border: 1px solid var(--color-border); }
.service-hero h1 { margin-top: 0.1em; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}