@charset "UTF-8";
/* ==========================================================================
   05-components.css — コンポーネント
   OTONA MATCH LAB / PHASE 7-B

   目次
     1. ボタン（4バリアント）と PR ラベル
     2. カード
     3. バッジ・番号・帰属ラベル
     4. ステータスフラグ（✓ / — / 確認中）
     5. LastChecked / 未確認の注記
     6. タブ
     7. 比較表 — 共通
     8. 比較表 — SP モードA：カード型
     9. 比較表 — SP モードB：横スクロール型
    10. ヘッダー・ナビゲーション
    11. Trust Bar
    12. フッター
    13. 注記ボックス・Cookie バナー
   ========================================================================== */


/* ==========================================================================
   1. ボタン

   4バリアントのみ。これ以外を作りません。
   グラデーション・光沢・アニメーション付きボタンは禁止です。
   ========================================================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-6);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
  border-radius: var(--radius-sm);
  border: var(--bw) solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

/* 矢印。意味を持たないため aria-hidden 相当（CSS 生成なので読み上げられない） */
.c-btn--arrow::after {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: var(--s-1);
}

/* ホバーは色を変えず透過のみ（派手さの回避） */
@media (hover: hover) {
  .c-btn:hover { opacity: .88; }
}

.c-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* -- バリアント -------------------------------------------------------- */

/* ダーク面の主CTA：Ivory 背景 × Navy 文字（15.78:1） */
.c-btn--primary {
  background: var(--c-ivory);
  color: var(--c-navy);
  min-height: 3.5rem;   /* 56 */
}

/* 明色面の主CTA：Navy 背景 × Warm White 文字（17.05:1） */
.c-btn--primary-dark {
  background: var(--c-navy);
  color: var(--c-warm-white);
  min-height: 3.25rem;  /* 52 */
}

/* ダーク面の副CTA：透過 + Gold 罫線 + Gold Light 文字（8.71:1） */
.c-btn--outline {
  background: transparent;
  color: var(--c-gold-light);
  border-color: var(--c-gold);
  min-height: 3.5rem;
}

/* 明色面の副CTA：透過 + Border Strong 罫線 + Navy 文字 */
.c-btn--outline-light {
  background: transparent;
  color: var(--c-navy);
  border-color: var(--c-border-strong);   /* 3.70:1 */
}

/*
 * 明色面用のバリアントがダーク面に置かれた場合の保険。
 *
 * .c-btn--outline-light は color を Navy で直接指定しているため、
 * .u-on-dark のトークン差し替えでは救われません（濃紺に濃紺の文字＝1.14:1）。
 * コンポーネントは自分が置かれる面の色を知らないため、
 * ここで面側から上書きします。
 */
.u-on-dark .c-btn--outline-light {
  color: var(--c-gold-light);            /* Navy 上 8.71:1 */
  border-color: var(--c-gold);
}


.u-on-dark .c-btn--primary-dark {
  background: var(--c-ivory);            /* Navy 面では主CTAを反転させる */
  color: var(--c-navy);                  /* 15.78:1 */
}

/* SP では全幅 */
.c-btn--full { width: 100%; }

@media (max-width: 37.4375rem) {
  .l-cta-row .c-btn { width: 100%; }
}

/* -- PR ラベル ---------------------------------------------------------
   アフィリエイトリンクであることの明示。
   PHASE 7-A の Omlab_Service::link() が is_pr = true を返したときに出力します。
   -------------------------------------------------------------------- */

.c-btn__pr,
.c-pr {
  flex: none;
  display: inline-block;
  font-family: var(--font-num);
  font-size: 0.625rem;   /* 10 */
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.1em;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
}


/* ==========================================================================
   2. カード

   高級感は「border 1px ＋ 余白」で作ります。
   影は --shadow-card（0 1px 2px rgba(16,25,39,.04)）が上限です。
   ========================================================================== */

.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--c-white);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

@media (min-width: 64rem) {
  .c-card { padding: var(--s-8) var(--s-8); }
  .c-card--roomy { padding: var(--s-10) var(--s-8); }
}

/* ホバーは 2px の移動と罫線色の変更のみ（上限 4px） */
@media (hover: hover) {
  .c-card--link:hover {
    transform: translateY(calc(var(--lift) * -1));
    border-color: var(--c-border-hover);
  }
}

/* カード全体をリンクにする場合、キーボードフォーカスを枠に反映させる */
.c-card:focus-within {
  outline: 2px solid var(--c-focus-light);
  outline-offset: 3px;
}

.c-card--lg { border-radius: var(--radius-lg); }

/* 左端のゴールド縦罫（40代・50代カード、結論ボックス） */
.c-card--accent { border-left: var(--bw-accent) solid var(--c-gold); }

/* ダーク面のカード */
.u-on-dark .c-card {
  background: rgba(255, 255, 255, .05);
  border-color: var(--c-line-dark);
  box-shadow: none;
}

/* Ivory セクション上のカードは純白で浮かせる */
.l-section--ivory .c-card { background: var(--c-white); }

/* カード内で下端に寄せる要素（矢印リンクなど） */
.c-card__foot { margin-top: auto; padding-top: var(--s-4); }

/* 1行レイアウトの小カード */
.c-card--row {
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  min-height: var(--s-16);
}

/* 横組みの Feature Card（ロゴ左 / 本文右） */
.c-card--feature { gap: var(--s-6); }

@media (min-width: 48rem) {
  .c-card--feature {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-8);
  }
  .c-card--feature > .c-card__media { flex: none; width: 5.5rem; }
  .c-card--feature > .c-card__body  { flex: 1 1 auto; min-width: 0; }
}

/* --- 記事カード（サムネイル + テキスト） --- */

.c-article-card { display: grid; gap: var(--s-3); }

.c-article-card__thumb {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-ivory);
  border: var(--bw) solid var(--c-border);
}

.c-article-card__thumb > img { width: 100%; height: 100%; object-fit: cover; }

/* タイトル2行・説明2行でクランプ */
.c-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* --- STEP リスト（SP の初心者ガイド） --- */

.c-steplist {
  background: var(--c-white);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  padding-inline: var(--s-4);
}

.c-steplist__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 4.5rem;   /* 72px */
  padding-block: var(--s-3);
  border-bottom: var(--bw) solid var(--c-border);
}

.c-steplist__item:last-child { border-bottom: 0; }

.c-steplist__no {
  flex: none;
  width: 3.5rem;
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  color: var(--c-gold-deep);
}


/* ==========================================================================
   3. バッジ・番号・帰属ラベル
   ========================================================================== */

/* 「最初に読む」= 読む順序の提示（「おすすめ」「No.1」ではない） */
.c-badge {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: 1.5;
  padding: var(--s-1) var(--s-3);
  background: var(--c-navy);
  color: var(--c-ivory);
  border-radius: 2px;
}

.u-on-dark .c-badge { background: var(--c-ivory); color: var(--c-navy); }

/* カード番号（01 — BEGINNER） */
.c-cardno {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--c-gold-deep);
}

/* 年代ラベル（40s / 50s） */
.c-agelabel {
  font-family: var(--font-num);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--c-gold-deep);
}

/* -- 帰属ラベル -------------------------------------------------------
   「公式が言っていること」と「編集部が整理したこと」を
   表示上も区別するためのラベル。PHASE 7-A の
   Omlab_Service::axis() が返す attribution に対応します。
   色ではなく罫線の形状で区別し、文字だけでも意味が通じます。
   -------------------------------------------------------------------- */

.c-attr {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.6875rem;   /* 11 */
  line-height: 1.5;
  letter-spacing: 0.04em;
  padding: 1px var(--s-2);
  border-radius: 2px;
  white-space: nowrap;
}

.c-attr--official {
  color: var(--c-attr-official);
  border: 1px solid currentColor;
}

.c-attr--derived {
  color: var(--c-attr-derived);
  border: 1px dashed currentColor;
}

.c-attr--editorial {
  color: var(--c-attr-editorial);
  border: 1px dotted currentColor;
  font-style: normal;
}

.u-on-dark .c-attr--official { color: var(--c-gold-light); }
.u-on-dark .c-attr--derived,
.u-on-dark .c-attr--editorial { color: var(--c-text-on-dark-3); }


/* ==========================================================================
   4. ステータスフラグ（✓ / — / 確認中）

   色に依存させません。記号 + テキストで意味が通じます。
   HTML 側で aria-label（実施 / 記載なし / 未確認）を付与します。
   ========================================================================== */

.c-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 1.5rem;
  font-family: var(--font-num);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

.c-flag--yes     { color: var(--c-text); }
.c-flag--no      { color: var(--c-text-sub); }
.c-flag--unknown {
  color: var(--c-text-sub);
  font-size: var(--fs-caption);
  font-weight: var(--fw-normal);
  min-width: auto;
  white-space: nowrap;
}

.u-on-dark .c-flag--yes { color: var(--c-text-on-dark); }

.c-flaglist { display: grid; gap: var(--s-2); }

.c-flaglist > li {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-body-s);
}


/* ==========================================================================
   5. LastChecked / 未確認の注記
   ========================================================================== */

.c-lastchecked {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-sub);
}

.c-lastchecked__icon { flex: none; width: 1rem; height: 1rem; stroke: currentColor; }

.c-lastchecked--block {
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  border-top: var(--bw) solid var(--c-border);
}

/* 公式ソース未確認のためセルを空にする場合の注記 */
.c-unsourced {
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--c-text-sub);
  font-style: normal;
}

.c-unsourced::before {
  content: "—";
  display: inline-block;
  margin-right: var(--s-2);
  font-family: var(--font-num);
}

/* 定義リスト（サービスカードのスペック） */
.c-spec {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
  border-top: var(--bw) solid var(--c-border);
  font-size: var(--fs-body-s);
}

.c-spec > dt {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  color: var(--c-text-sub);
}

.c-spec > dd { font-weight: var(--fw-bold); }
.c-spec > dd > ul > li { font-weight: var(--fw-normal); }
.c-spec > dd > ul > li + li { margin-top: var(--s-1); }


/* ==========================================================================
   6. タブ（料金比較の期間切替）

   role="tablist" / aria-selected / 矢印キー移動は JS 側で担保します。
   active の判別を色だけに頼らず、下辺 2px の罫線でも示します。
   ========================================================================== */

.c-tabs {
  display: flex;
  border-bottom: var(--bw) solid var(--c-border);
  /* タブが多い場合に限り横スクロール。4個なら発生しない */
  overflow-x: auto;
  scrollbar-width: none;
}

.c-tabs::-webkit-scrollbar { display: none; }

.c-tabs__tab {
  flex: 1 1 0;
  min-width: 4.5rem;
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-normal);
  color: var(--c-text-sub);
  text-align: center;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

/*
 * ★PHASE 8-B3 で直した既存不具合（PHASE 7-B から）
 *
 *   タブ1個の最小幅が 4.5rem（72px）で、4個で 288px あります。
 *   320px 幅の端末の内寸は 280px なので 8px 溢れ、
 *   .c-tabs は overflow-x: auto かつ scrollbar-width: none のため、
 *   **スクロールできることが見えない状態で横スクロール**していました。
 *   スクロールバーも案内文もありません（PHASE 8-B2 で発見）。
 *
 *   料金表は記事01・サービス詳細4ページの両方にあります。
 *   PHASE 8-B2 では記事のページ種別スコープだけで直しましたが、
 *   ここで1度だけ直します。
 *   タブの数・文言・情報は変えていません。左右の余白を詰めただけです。
 */
@media (max-width: 23.4375rem) {
  .c-tabs__tab {
    min-width: 4rem;
    padding-inline: var(--s-2);
  }
}

@media (min-width: 48rem) {
  .c-tabs__tab { flex: 0 0 8.75rem; min-height: 3.25rem; font-size: var(--fs-body); }
}

.c-tabs__tab[aria-selected="true"] {
  color: var(--c-text);
  font-weight: var(--fw-bold);
  box-shadow: inset 0 -2px 0 var(--c-gold-deep);
}

.u-on-dark .c-tabs { border-bottom-color: var(--c-line-dark); }
.u-on-dark .c-tabs__tab { color: var(--c-text-on-dark-3); }
.u-on-dark .c-tabs__tab[aria-selected="true"] {
  color: var(--c-text-on-dark);
  box-shadow: inset 0 -2px 0 var(--c-gold);
}

/* パネル切替は opacity のみ。高さは変えない（CLS 対策） */
.c-tabs__panel { animation: omlab-fade var(--dur-fast) var(--ease-out); }


/* ==========================================================================
   7. 比較表 — 共通

   PHASE 7-B 追加条件2：
   SP の表示方法を「カード型（A）」と「横スクロール型（B）」の
   両方から選べるようにします。どちらを使うかは
   ラッパの data-sp-mode 属性だけで切り替わり、
   テーブルのマークアップは共通です（DOM を二重に持ちません）。

     <div class="c-table-wrap" data-sp-mode="cards"> …
     <div class="c-table-wrap" data-sp-mode="scroll" role="region"
          tabindex="0" aria-label="サービス比較表（横にスクロールできます）"> …

   PC（1024px 以上）では、どちらのモードでも通常のテーブル表示になります。
   ========================================================================== */

.c-table-wrap { position: relative; }

.c-table {
  width: 100%;
  font-size: var(--fs-body-s);
  line-height: var(--lh-tight);
}

@media (min-width: 64rem) {
  .c-table { font-size: var(--fs-body); }
}

.c-table caption { text-align: left; }

.c-table thead th {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--c-text-sub);
  padding: var(--s-2) var(--tbl-cell-x);
  vertical-align: bottom;
  white-space: nowrap;
}

.c-table tbody th,
.c-table tbody td {
  padding: var(--tbl-cell-y) var(--tbl-cell-x);
  border-bottom: var(--bw) solid var(--c-border);
  vertical-align: middle;
}

.c-table tbody th {
  font-weight: var(--fw-bold);
  width: var(--tbl-col-first-pc);
}

@media (min-width: 64rem) {
  .c-table tbody tr { height: var(--tbl-row-h); }
}

@media (hover: hover) {
  .c-table tbody tr:hover { background: var(--c-row-hover-light); }
}

/* ダーク面（料金比較セクション） */
.u-on-dark .c-table thead th { color: var(--c-text-on-dark-3); }
.u-on-dark .c-table tbody th,
.u-on-dark .c-table tbody td { border-bottom-color: var(--c-line-dark); }

/* 表の下の注記 */
/* --------------------------------------------------------------------------
   比較表セルの補助表示（PHASE 8-A2 で追加）

   omlab_comparison_cell_html() は PHASE 7-J / 7-K から
   .c-cellnote（必須・任意などの但し書き）と
   .c-cellstatus（「現在の公式情報」）を出力していますが、
   CSS の定義がありませんでした。
   そのため両方が素の inline span になり、
   「必須現在の公式情報」のように文字が連続して読めていました
   （トップページのスクリーンショットで発見）。

   判定は何も変えていません。行を分けて読めるようにするだけです。
   -------------------------------------------------------------------------- */

.c-cellnote,
.c-cellstatus {
  display: block;
  font-size: var(--fs-caption);
  line-height: 1.6;
}

.c-cellnote { color: var(--c-text); }

/* 出典の状態は補助情報なので、値より一段落ち着かせます */
.c-cellstatus { color: var(--c-text-sub); }

.u-on-dark .c-cellnote { color: var(--c-text-on-dark); }
.u-on-dark .c-cellstatus { color: var(--c-text-on-dark-2); }

/*
 * 表の中のボタンは折り返しません（PHASE 8-A）。
 *
 * 「詳細」列は残り幅に押されて狭くなるため、
 * 「詳細を見／る」のように文字が割れていました。
 * 幅の取り合いはボタン側を優先します。
 * 表全体が入らない幅では c-table-wrap が
 * 横スクロール（またはカード表示）に切り替わります。
 */
.c-table .c-btn { white-space: nowrap; }

.c-table__note {
  margin-top: var(--s-5);
  font-size: var(--fs-caption);
  line-height: 1.8;
  color: var(--c-text-sub);
}

/* 「この表で比較している項目」の説明（仕様15：評価項目の公開） */
.c-table__axes {
  margin-top: var(--s-4);
  font-size: var(--fs-caption);
  line-height: 1.8;
  color: var(--c-text-sub);
}

.c-table__axes dt {
  display: inline;
  font-weight: var(--fw-bold);
}

.c-table__axes dd { display: inline; }
.c-table__axes dd::after { content: ""; display: block; }

/* 表内のサービス名セル（ロゴ + 名称） */
.c-table__service {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.c-table__logo {
  flex: none;
  width: 2.25rem;
  height: 1.25rem;
  object-fit: contain;
}


/* ==========================================================================
   8. 比較表 — SP モードA：カード型（data-sp-mode="cards"）

   <table> を CSS Grid で組み替えます。DOM を二重に持たないため、
   スクリーンリーダーでの重複読みも起きません。
   td::before に data-label を出力してラベルを補います。
   ========================================================================== */

@media (max-width: 63.9375rem) {

  .c-table-wrap[data-sp-mode="cards"] .c-table {
    display: block;
    border-collapse: separate;
  }

  .c-table-wrap[data-sp-mode="cards"] .c-table thead {
    /* 視覚的には隠すが、支援技術には残す */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .c-table-wrap[data-sp-mode="cards"] .c-table tbody { display: grid; gap: var(--s-4); }

  .c-table-wrap[data-sp-mode="cards"] .c-table tbody tr {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-5);
    background: var(--c-white);
    border: var(--bw) solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    height: auto;
  }

  .u-on-dark .c-table-wrap[data-sp-mode="cards"] .c-table tbody tr {
    background: rgba(255, 255, 255, .05);
    border-color: var(--c-line-dark);
    box-shadow: none;
  }

  .c-table-wrap[data-sp-mode="cards"] .c-table tbody th {
    width: auto;
    padding: 0 0 var(--s-3);
    border-bottom: var(--bw) solid var(--c-border);
    font-size: var(--fs-h4);
  }

  .c-table-wrap[data-sp-mode="cards"] .c-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-1) 0;
    border-bottom: 0;
  }

  .c-table-wrap[data-sp-mode="cards"] .c-table tbody td::before {
    content: attr(data-label);
    flex: none;
    min-width: 5.5rem;
    font-family: var(--font-num);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-label);
    color: var(--c-text-sub);
  }

  /* 合計金額は SP で最も大きく（最初に確認したい情報） */
  .c-table-wrap[data-sp-mode="cards"] .c-table td[data-emphasis] {
    font-size: 1.375rem;   /* 22 */
    font-weight: var(--fw-bold);
    padding-block: var(--s-2);
  }

  /* セル内のボタンは全幅 */
  .c-table-wrap[data-sp-mode="cards"] .c-table td[data-cell="action"] { display: block; }
  .c-table-wrap[data-sp-mode="cards"] .c-table td[data-cell="action"]::before { content: none; }
  .c-table-wrap[data-sp-mode="cards"] .c-table td[data-cell="action"] .c-btn {
    width: 100%;
    margin-top: var(--s-3);
  }

  /* カード型では横スクロールのヒントを出さない */
  .c-table-wrap[data-sp-mode="cards"] .c-table__scrollhint { display: none; }
}


/* ==========================================================================
   9. 比較表 — SP モードB：横スクロール型（data-sp-mode="scroll"）

   4サービス以上を横方向に見比べたい場合に使います。
   ページ全体には横スクロールを発生させず、このラッパの内側だけが
   スクロールします（02-reset.css の overflow-x: clip と組み合わせ）。

   アクセシビリティ：
     - ラッパに role="region" tabindex="0" aria-label を付与（HTML側）
       → キーボードだけで矢印キーでスクロールできる
     - 1列目を position: sticky で固定し、何の行かを見失わない
     - スクロール可能であることを視覚（影）と文言の両方で示す
     - スクロールバーを消さない（操作可能であることの手がかり）
   ========================================================================== */

.c-table-wrap[data-sp-mode="scroll"] {
  /* スクロール領域であることを示す枠 */
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-white);
}

.u-on-dark .c-table-wrap[data-sp-mode="scroll"] {
  border-color: var(--c-line-dark);
  background: transparent;
}

.c-table-wrap[data-sp-mode="scroll"] > .c-table__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) transparent;
  border-radius: inherit;

  /* スクロール可能であることを示す影（純CSS・JS不要）
     左右端に到達すると影が消える */
  background-image:
    linear-gradient(to right, rgba(16, 25, 39, .10), rgba(16, 25, 39, 0)),
    linear-gradient(to left,  rgba(16, 25, 39, .10), rgba(16, 25, 39, 0));
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 1.25rem 100%, 1.25rem 100%;
  background-attachment: local, local;
}

.u-on-dark .c-table-wrap[data-sp-mode="scroll"] > .c-table__scroller {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)),
    linear-gradient(to left,  rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
}

.c-table-wrap[data-sp-mode="scroll"] > .c-table__scroller::-webkit-scrollbar {
  height: 0.625rem;
}
.c-table-wrap[data-sp-mode="scroll"] > .c-table__scroller::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: 999px;
}

/*
 * フォーカスリングは「実際にスクロールする要素」に付けます。
 * axe-core の scrollable-region-focusable が要求するのは
 * ラッパではなくスクロールする要素自身のキーボード到達性です。
 * したがって role="region" tabindex="0" aria-label は
 * .c-table__scroller に付与します（マークアップ契約）。
 */
.c-table-wrap[data-sp-mode="scroll"] > .c-table__scroller:focus-visible {
  outline: 2px solid var(--c-focus-light);
  outline-offset: -2px;
}

/* 表本体：列幅の最小値を確保して意図的に溢れさせる */
.c-table-wrap[data-sp-mode="scroll"] .c-table {
  width: max-content;
  min-width: 100%;
}

/*
 * width: max-content は「折り返さない幅」で列を作るため、
 * 長文セルがあると列が極端に広がり、見出し行が画面外へ流れます。
 * max-width を併記して、長文は折り返させます。
 */
.c-table-wrap[data-sp-mode="scroll"] .c-table :is(th, td) {
  min-width: var(--tbl-col-min);
  max-width: var(--tbl-col-max);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 1列目（比較軸名 or サービス名）を固定する */
.c-table-wrap[data-sp-mode="scroll"] .c-table :is(thead th, tbody th):first-child,
.c-table-wrap[data-sp-mode="scroll"] .c-table td[data-cell="axis"] {
  position: sticky;
  left: 0;
  z-index: var(--z-sticky-col);
  min-width: var(--tbl-col-first);
  max-width: var(--tbl-col-first);
  background: var(--c-white);
  /* 固定列と本体の境界。border では sticky 時に消えることがあるため box-shadow */
  box-shadow: 1px 0 0 var(--c-border);
}

.u-on-dark .c-table-wrap[data-sp-mode="scroll"] .c-table :is(thead th, tbody th):first-child,
.u-on-dark .c-table-wrap[data-sp-mode="scroll"] .c-table td[data-cell="axis"] {
  background: var(--c-navy);
  box-shadow: 1px 0 0 var(--c-line-dark);
}

/* 見出し行も固定する（縦に長い比較表向け） */
.c-table--sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-head);
  background: var(--c-white);
}

.c-table--sticky-head thead th:first-child { z-index: calc(var(--z-sticky-head) + 1); }

.u-on-dark .c-table--sticky-head thead th { background: var(--c-navy); }

/* スクロールのヒント文（文字だけでも意味が通じるようにする） */
/*
 * ★PHASE 8-B3：flex から block へ変更しました。
 *
 *   flex だと、案内文が折り返したときに矢印だけが次の行に落ちます
 *  （案内文に「1列目は固定されています」を足して長くなったため。
 *    PHASE 8-B2 のスクリーンショットで発見）。
 *   block にして矢印を文末のインライン要素として置きます。
 *
 *   PHASE 8-B2 では比較記事・記事のページ種別スコープで同じ修正を
 *   当てていましたが、サービス詳細にも同じ表があるため、
 *   ここで1度だけ直します（重複の削減も兼ねます）。
 */
.c-table__scrollhint {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--c-text-sub);
  border-bottom: var(--bw) solid var(--c-border);
}

.u-on-dark .c-table__scrollhint { border-bottom-color: var(--c-line-dark); }

.c-table__scrollhint::after {
  content: "";
  /* 文末に置くのでインライン。回転ぶんの余白を左に取ります */
  display: inline-block;
  margin-inline-start: 0.5em;
  vertical-align: 0.05em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* PC ではスクロールを解除して通常の表に戻す */
@media (min-width: 64rem) {
  .c-table-wrap[data-sp-mode="scroll"] {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .c-table-wrap[data-sp-mode="scroll"] > .c-table__scroller {
    overflow-x: visible;
    background-image: none;
  }
  .c-table-wrap[data-sp-mode="scroll"] .c-table { width: 100%; min-width: 0; }
  .c-table-wrap[data-sp-mode="scroll"] .c-table :is(thead th, tbody th):first-child,
  .c-table-wrap[data-sp-mode="scroll"] .c-table td[data-cell="axis"] {
    position: static;
    max-width: none;
    min-width: var(--tbl-col-first-pc);
    box-shadow: none;
  }
  .c-table__scrollhint { display: none; }
}

/* --- サービスを列に置く比較表（ComparisonTable / 縦持ち） --- */

.c-table--axes tbody th {
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  font-size: var(--fs-body-s);
  color: var(--c-text-sub);
  vertical-align: top;
}

.c-table--axes tbody td { vertical-align: top; }


/* ==========================================================================
   10. ヘッダー・ナビゲーション
   ========================================================================== */

.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/*
 * 濃紺セクションに重ねるヘッダー（--on-dark）。
 *
 * ヘッダーを通常フローに置くと、濃紺ヒーローの上に
 * 高さ 76px の白帯が乗ってしまいます。負のマージンで次のセクションへ
 * 重ね、重ねられる側（.l-section--hero）が上余白でヘッダー分を確保します。
 *
 * 重なっている間は文字色をダーク面用に差し替えます。
 * これを書かないと、濃紺の上に Charcoal のナビ文字が乗って読めません。
 *
 * ★制約：この修飾子は「直後が濃紺セクション（.l-section--navy）」の
 *   ページでのみ使用します。明色セクションに重ねると
 *   ライト文字が白背景に乗って読めなくなります。
 *   背後の色は CSS では保証できないため、テンプレート側の責務です。
 */
.c-header--on-dark { margin-bottom: calc(var(--header-h) * -1); }

.c-header--on-dark[data-scrolled="false"] {
  color: var(--c-text-on-dark);
  --c-text: var(--c-text-on-dark);
  --c-text-sub: var(--c-text-on-dark-2);
  --c-border-strong: rgba(255, 255, 255, .38);
  --c-focus-light: var(--c-focus-dark);
}

/* ヒーローが Navy のため、透過スタート → スクロールで白へ */
.c-header[data-scrolled="true"] {
  background: rgba(252, 251, 248, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 var(--c-border);
  color: var(--c-text);
}

/* backdrop-filter 非対応環境では不透明にする */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .c-header[data-scrolled="true"] { background: var(--c-warm-white); }
}

.c-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
}

/* ロゴ（2段組。クリック領域は 48px 確保） */
.c-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-min);
  margin-right: auto;
}

.c-logo__ja {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

@media (min-width: 64rem) {
  .c-logo__ja { font-size: 1.25rem; }
}

.c-logo__en {
  font-family: var(--font-num);
  font-size: 0.5625rem;   /* 9 */
  letter-spacing: 0.18em;
  color: var(--c-gold-deep);
  line-height: 1.2;
}

@media (min-width: 64rem) {
  .c-logo__en { font-size: 0.625rem; }
}

.c-header[data-scrolled="false"] .c-logo__en { color: var(--c-gold); }

/* PC ナビ */
.c-nav { display: none; }

@media (min-width: 64rem) {
  .c-nav { display: flex; align-items: center; }
}

.c-nav__link {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--tap-min);
  padding-inline: var(--s-4);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
}

/* ホバーは文字下 2px のゴールド下線が左から伸びる（色は変えない） */
.c-nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: calc(50% - 0.95em);
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .c-nav__link:hover::after { transform: scaleX(1); }
}

.c-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* アイコンボタン（検索・メニュー） */
.c-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  border: var(--bw) solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .c-iconbtn:hover { border-color: var(--c-border-strong); }
}

.c-iconbtn > svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.5; }

@media (min-width: 64rem) {
  .c-iconbtn--menu { display: none; }
}

/* ヘッダー直下にスライドダウンする検索バー（モーダルにしない） */
.c-searchbar {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  background: var(--c-warm-white);
  box-shadow: inset 0 -1px 0 var(--c-border);
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.c-searchbar[data-open="true"] { grid-template-rows: 1fr; }

.c-searchbar__inner {
  min-height: 0;
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-3);
  transition: padding-block var(--dur-base) var(--ease-out);
}

/*
 * 閉じているときは padding も 0 にする。
 * grid-template-rows: 0fr は「内容の高さ」を 0 にするだけで
 * padding は残るため、これを書かないと閉じた状態でも帯が見えます。
 * あわせて visibility: hidden にし、閉じている検索欄が
 * キーボードのタブ順に入らないようにします。
 */
.c-searchbar[data-open="false"] .c-searchbar__inner {
  padding-block: 0;
  visibility: hidden;
}

/* モバイルメニュー（上から降りるシート。階層を作らない） */
.c-navsheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav-sheet);
  background: var(--c-warm-white);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  /*
   * visibility は「遷移させない」。
   * 遷移対象にすると離散プロパティとして duration の途中で切り替わり、
   * 開いた直後の focus() が visibility:hidden の要素に対して無視されます
   * （＝フォーカストラップが効かない）。
   * 開くときは即座に visible、閉じるときはスライド完了後に hidden にします。
   */
  transition:
    transform var(--dur-slow) var(--ease-sheet),
    visibility 0s linear var(--dur-slow);
}

.c-navsheet[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform var(--dur-slow) var(--ease-sheet),
    visibility 0s linear 0s;
}

.c-navsheet__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--header-h);
  box-shadow: inset 0 -1px 0 var(--c-border);
}

.c-navsheet__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 3.75rem;   /* 60px */
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  border-bottom: var(--bw) solid var(--c-border);
}

.c-navsheet__item::after {
  content: "";
  margin-left: auto;
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid var(--c-text-sub);
  border-top: 1.5px solid var(--c-text-sub);
  transform: rotate(45deg);
}

.c-navsheet__search {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.25rem;
  color: var(--c-text-sub);
  border-bottom: var(--bw) solid var(--c-border);
}

/*
 * モバイルメニューの運営情報リンク（PHASE 8-C §13）
 *
 * PHASE 7-C から CSS が1行もなく、素のリンク（高さ24px）でした。
 * すぐ上のメニュー項目（.c-navsheet__item）は60pxです。
 * 44px を確保しつつ、主要導線より弱く見えるように
 * 文字サイズと色は補助のままにします。
 */
.c-navsheet__policy { margin-block-start: var(--s-6); }

.c-navsheet__policylink {
  display: flex;
  align-items: center;
  min-height: 2.75rem;   /* 44px */
  font-size: var(--fs-body-s);
  color: var(--c-text-sub);
  border-bottom: var(--bw) solid var(--c-border);
}

.c-navsheet__policylink:focus-visible {
  outline: 2px solid var(--c-focus-light);
  outline-offset: 2px;
}

@media (hover: hover) {
  .c-navsheet__policylink:hover { color: var(--c-gold-deep); }
}

@media (min-width: 64rem) {
  .c-navsheet { display: none; }
}


/* ==========================================================================
   11. Trust Bar
   ========================================================================== */

.c-trust {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
}

.c-trust__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.5rem;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--bw) solid var(--c-line-dark);
}

.c-trust__item:nth-child(odd) { border-right: var(--bw) solid var(--c-line-dark); }
.c-trust__item:nth-last-child(-n+2) { border-bottom: 0; }

.c-trust__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  stroke: var(--c-gold);
  fill: none;
  stroke-width: 1.5;
}

@media (min-width: 64rem) {
  .c-trust__item {
    justify-content: center;
    min-height: 4.5rem;   /* 72px */
    border-bottom: 0;
    border-right: var(--bw) solid var(--c-line-dark);
  }
  .c-trust__item:last-child { border-right: 0; }
  .c-trust__item:nth-child(odd) { border-right: var(--bw) solid var(--c-line-dark); }
}


/* ==========================================================================
   12. フッター
   ========================================================================== */

.c-footer { background: var(--c-navy-2); padding-block: var(--s-12) var(--s-8); }

@media (min-width: 64rem) {
  .c-footer { padding-block: var(--s-16) var(--s-8); }
}

.c-footer__grid { display: grid; gap: var(--s-8); }

@media (min-width: 64rem) {
  .c-footer__grid {
    grid-template-columns: minmax(0, 22.5rem) repeat(3, minmax(0, 1fr));
    gap: var(--s-10);
  }
}

.c-footer__links { line-height: var(--lh-link); font-size: var(--fs-body-s); }

/* タップ領域は設計基準どおり 48px を確保する（line-height 2.2 と併用） */
.c-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.c-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: var(--bw) solid var(--c-line-dark);
}

@media (min-width: 48rem) {
  .c-footer__bottom { flex-direction: row; justify-content: space-between; }
}

/* SP のフッターアコーディオン（details/summary・JS 不要） */
.c-accordion { border-bottom: var(--bw) solid var(--c-line-dark); }

.c-accordion__summary {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.c-accordion__summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-num);
}

.c-accordion[open] > .c-accordion__summary::after { content: "−"; }

.c-accordion__body { padding-bottom: var(--s-4); }

@media (min-width: 64rem) {
  .c-accordion { border-bottom: 0; }
  .c-accordion__summary { pointer-events: none; min-height: auto; margin-bottom: var(--s-4); }
  /*
   * PC では開閉記号を出しません。
   *
   * .c-accordion__summary::after { content: none } だけでは効きませんでした。
   * open 時の指定 .c-accordion[open] > .c-accordion__summary::after のほうが
   * 詳細度が高く（0,3,1 対 0,1,1）、メディアクエリの中でも勝ってしまいます。
   * 同じ形のセレクタで打ち消します（実測で検出）。
   */
  .c-accordion__summary::after,
  .c-accordion[open] > .c-accordion__summary::after { content: none; }
  .c-accordion__body { display: block !important; padding-bottom: 0; }
}


/* ==========================================================================
   13. 注記ボックス・Cookie バナー
   ========================================================================== */

.c-notice {
  padding: var(--s-5) var(--s-6);
  font-size: var(--fs-body-s);
  line-height: 1.8;
  border-radius: var(--radius);
}

/* 補足（Ivory 背景 + 左 3px ゴールド罫） */
.c-notice--info {
  background: var(--c-ivory);
  border-left: var(--bw-accent) solid var(--c-gold-deep);
}

/* 注意点（全周 1px の Border Strong ＋ ! アイコン）
   赤・黄の警告色は使いません（肩越し安全性 S1） */
.c-notice--caution {
  background: var(--c-warm-white);
  border: var(--bw) solid var(--c-border-strong);
}

/* 広告表示（記事冒頭に自動挿入） */
.c-notice--ad {
  background: var(--c-ivory);
  border: 0;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-caption);
  color: var(--c-text-sub);
}

/* 「この記事の結論」 */
.c-summary {
  padding: var(--s-6) var(--s-6);
  background: var(--c-ivory);
  border-left: var(--bw-accent) solid var(--c-gold);
  border-radius: var(--radius);
}

.c-summary__list { display: grid; gap: var(--s-3); }

.c-summary__list > li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.c-summary__list > li::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.7em;
  background: var(--c-gold-deep);
  border-radius: 50%;
}

/* メリット / 注意点（緑・赤を使わない。左罫線と記号で区別） */
.c-proscons { display: grid; gap: var(--s-6); }

@media (min-width: 48rem) {
  .c-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.c-proscons__col { padding-left: var(--s-4); border-left: var(--bw-accent) solid var(--c-border-strong); }
.c-proscons__col--pro { border-left-color: var(--c-gold-deep); }

/* ------------------------------------------------------------------------
   Cookie 同意バナーの領域確保（PHASE 8-B4 §18）

   バナーを表示している間（html[data-consent="unknown"]）だけ、
   本文（.l-shell）をスクロール領域にして、
   バナーの高さぶんを画面下部に確保します。

   ・高さは flex が実測します。161px のような固定値は書きません。
   ・JavaScript は1行も増やしていません。data-consent は
     PHASE 7-C から既に <html> に付いている属性です。
   ・同意・拒否が済むと属性が granted / denied に変わり、
     この指定は全て無効になります（通常のドキュメントスクロールに戻ります）。
   ・JavaScript が動かない環境ではバナー自体が hidden のままなので、
     属性も付かず、この指定は働きません。

   なぜ body の padding では駄目なのかは header.php のコメントに
   書いています（padding はバナーより後ろに入るため、
   画面下端に貼り付いている間の重なりを1pxも減らしません）。
   ------------------------------------------------------------------------ */

html[data-consent="unknown"],
html[data-consent="unknown"] body {
  block-size: 100dvh;
}

html[data-consent="unknown"] body {
  display: flex;
  flex-direction: column;
}

html[data-consent="unknown"] .l-shell {
  flex: 1 1 auto;
  min-block-size: 0;
  /*
   * position: relative が必要な理由（実測で判明）
   *
   * .u-visually-hidden は position: absolute で top / left を持ちません。
   * 位置指定のある祖先が無いと包含ブロックが初期包含ブロック（＝ビューポート）
   * になるため、.l-shell の overflow で切り取られず、
   * ページ奥の静的位置のまま <html> のスクロール領域を伸ばします。
   * 実測では service-sugardaddy PC で <html> が 2,092px 余分に
   * スクロールできる（＝二重スクロール）状態になりました。
   * .l-shell を包含ブロックにすると、この要素も .l-shell 内に収まります。
   */
  position: relative;
  overflow-y: auto;
  /*
   * overflow-x を指定しないと、overflow-y: auto の相手側は
   * visible → auto に計算され、横スクロールバーが出ます。
   * html 側と同じ clip にします（clip と auto は併用できます）。
   */
  overflow-x: clip;
  /* html の scroll-padding-top はスクロール領域が変わると効きません */
  scroll-padding-block-start: calc(var(--header-h) + var(--s-4));
  overscroll-behavior-block: contain;
}

html[data-consent="unknown"] .c-consent { flex: 0 0 auto; }

/*
 * モバイルメニューを開いている間の背面スクロール止め。
 *
 * omlab.js は body に position: fixed を当てて背面を止めています。
 * スクロール領域が .l-shell に移ると、その方法では止まりません。
 * JS を書き換えず、CSS だけで同じ状態にします。
 */
html[data-consent="unknown"] body:has([data-omlab="nav-sheet"][data-open="true"]) .l-shell {
  overflow: hidden;
}

/*
 * 印刷では領域確保をしません。
 * 高さを固定したままだと1ページ目しか印刷されません。
 */
@media print {
  html[data-consent="unknown"],
  html[data-consent="unknown"] body { block-size: auto; display: block; }
  html[data-consent="unknown"] .l-shell { overflow: visible; }
}

/* Cookie 同意バナー（モーダルにしない。画面下部のインライン帯）
 *
 * ダーク面のため、.u-on-dark と同じトークンの差し替えをここでも行います。
 * マークアップ側で .u-on-dark を付け忘れても、
 * 補助文が濃いグレーのまま濃紺に乗る（コントラスト不足）事故が起きません。
 */
.c-consent {
  position: sticky;
  bottom: 0;
  z-index: var(--z-header);
  background: var(--c-navy-2);
  color: var(--c-text-on-dark);
  box-shadow: inset 0 1px 0 var(--c-line-dark);

  --c-text: var(--c-text-on-dark);
  --c-text-sub: var(--c-text-on-dark-2);
  --c-border: var(--c-line-dark);
  --c-border-strong: rgba(255, 255, 255, .38);
  --c-focus-light: var(--c-focus-dark);
  --c-gold-deep: var(--c-gold-light);
}

.c-consent a { color: var(--c-gold-light); }

/*
 * SP をコンパクト化（PHASE 7-C 要件2）
 *
 *   ・説明文は 2〜3行に収まる長さ（文言側で担保）＋ 行間をやや詰める
 *   ・上下余白を 16px → 12px、gap を 16px → 10px に縮小
 *   ・ボタン高さは 48px（--tap-min）を維持。アクセシビリティ基準は下げない
 *   ・「プライバシーポリシー」が単独改行しないよう nowrap にし、
 *     直前に不可視の余白を入れて本文と自然に繋げる
 *
 * PC の基本設計（横並び・2ボタン右寄せ）は変更していません。
 */
.c-consent__inner {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-3);
}

.c-consent__text {
  font-size: var(--fs-body-s);
  line-height: 1.7;
}

/*
 * リンクは文中に置かれるため、単独行に取り残されません。
 * 語の途中で折り返さないよう nowrap のみ指定し、
 * 前後に余計な余白を入れません（括弧の直後に来るため）。
 */
.c-consent__link {
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.2em;

  /*
   * 操作領域 48×48px の確保（STEP 3 で修正）
   *
   * このリンクは文中に置かれているため、リンク自身に padding や
   * min-height を与えると行送りが変わり、SP のコンパクト化
   * （7-C 要件2）が崩れます。文字サイズを大きくするのも
   * 「本文中の1語だけが目立つ」ことになり、デザイン上不自然です。
   *
   * そこで、見た目を一切変えずに当たり判定だけを広げます。
   * 疑似要素を絶対配置し、リンクの上下中央から 48px の高さ・
   * 48px 以上の幅を確保します。行の高さには影響しません。
   *
   * WCAG 2.5.8 は文中のインラインリンクを対象外としていますが、
   * 当サイトは独自基準として 48px を満たす方針のため実装します。
   */
  position: relative;
}

.c-consent__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--tap-min);        /* 48px */
  min-width: var(--tap-min);
  z-index: 0;
}

/*
 * 疑似要素がボタンの上に乗らないようにします。
 * リンクの当たり判定は上下に約13px ずつ広がるため、
 * ボタン側を必ず前面に置きます。
 */
.c-consent__actions { position: relative; z-index: 1; }

/* 2つのボタンを同じ視覚重量にする（ダークパターンの回避） */
.c-consent__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: nowrap;
}

.c-consent__actions .c-btn {
  min-height: var(--tap-min);   /* 48px を維持 */
  flex: 1 1 0;
  padding-inline: var(--s-4);
  font-size: var(--fs-body-s);
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .c-consent__inner {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--s-8);
    padding-block: var(--s-4);
  }
  .c-consent__text { font-size: var(--fs-body); line-height: var(--lh-body); }
  .c-consent__actions { flex-wrap: wrap; }
  .c-consent__actions .c-btn { flex: 0 0 auto; padding-inline: var(--s-6); font-size: var(--fs-body); }
}

/* ==================================================================
   Contact form — お問い合わせフォーム（PHASE 7-O）

   1つだけ重要な点があります。
   ハニーポット（.c-field--hp）は必ず見えない状態にしてください。
   見えていると読者が入力してしまい、その送信が
   自動投稿として弾かれます（本人にはエラーも出ません）。

   display:none にしていないのは、
   一部の自動投稿がその指定を見てフィールドを避けるためです。
   画面外へ出す方法をとっています。
   ================================================================== */

.c-contact__form {
  display: grid;
  gap: var(--s-6);
}

/* ---- ハニーポット（読者には見せない） ---- */
.c-field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* ---- 各項目 ---- */
.c-field {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}

.c-field__label {
  font-size: var(--fs-body-s);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-text);
}

.c-field__req,
.c-field__opt {
  display: inline-block;
  margin-inline-start: var(--s-2);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  vertical-align: 0.05em;
}

/* 「必須」は 4.51:1（Ivory 上）を満たす配色にします */
.c-field__req {
  background: var(--c-ivory);
  color: var(--c-gold-deep);
  border: 1px solid var(--c-border-strong);
}

.c-field__opt {
  background: transparent;
  color: var(--c-text-sub);
  border: 1px solid var(--c-border);
  font-weight: 400;
}

.c-field__input {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-text);
  /*
   * 16px 未満にしません。
   * iOS Safari は 16px 未満の入力欄にフォーカスすると
   * ページを自動で拡大します。拡大されると読者は
   * 手でズームを戻すことになります。
   */
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.6;
}

.c-field__textarea {
  min-height: 12rem;
  resize: vertical;
}

.c-field__input:focus-visible {
  outline: 2px solid var(--c-gold-deep);
  outline-offset: 2px;
  border-color: var(--c-gold-deep);
}

/* ---- エラー ---- */
.c-field__input[aria-invalid="true"] {
  border-color: #A3312B;
  border-width: 2px;
}

.c-field__error {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.7;
  /* 文字色だけで伝えません。記号を併記します（1.4.1 色だけに依存しない） */
  color: #8C2A24;
}

.c-field__error::before {
  content: "⚠ ";
}

/* ---- 送信完了 ---- */
.c-contact__done {
  border-left: 4px solid var(--c-gold-deep);
}

/* ---- PC ---- */
@media (min-width: 48rem) {
  .c-contact__form { gap: var(--s-8); }
  .c-field__textarea { min-height: 14rem; }
}