/* ============================================================
   sdp-home-hero.css — TOP（フロントページ）限定
   2026-08-03「TOPヒーロー続編B：TOP限定CSS仕様」に基づく。

   規律（続編B §1）
   - 新規指定は必ず .sdp-home-hero 配下に限定する。
   - .hero / .button / .shell / p / dl / dt / dd を単独セレクタで上書きしない。
   - JSは新規・変更とも無し。
   - 色は既存トークン（--ink / --muted / --line / --brand-dark）のみ再利用し、
     dark-mode.css のトークン反転（--paper/--soft/--ink/--muted/--line/--brand-dark）に
     そのまま追従させる＝ダーク用の別指定を持たない。
   - :focus-visible は書かない（既存の明暗2色フォーカスリングを上書きしない）。
   - レイアウトの display は base では触らない。SP（≤620px）で既存の
     .hero-actions{display:grid;grid-template-columns:1fr} が効く構造を壊さないため。
   ============================================================ */

/* ---------- 強調文（H1直下・leadより強く／見出しには見せない） ---------- */
.sdp-home-hero .hero-emph {
  margin: 16px 0 0;
  color: var(--ink);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;          /* 見出し化を避ける。強さは内側の <strong> が担う */
  line-height: 1.75;
  letter-spacing: normal;
}
.sdp-home-hero .hero-emph strong {
  font-weight: 800;          /* 強調色に依存せず、太さと文字量で意味を伝える */
}
/* 強調文とleadが離れすぎないよう lead の上余白のみ詰める（既定 24px） */
.sdp-home-hero .hero-lead {
  margin-top: 14px;
}

/* ---------- 4つの即答（PC/SPとも 2列×2段） ---------- */
.sdp-home-hero .sdp-home-hero__answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;                 /* 仕様: 8〜12px */
  margin: 18px 0 0;          /* dl 既定 margin を明示 */
  padding: 0;
}
.sdp-home-hero .sdp-home-hero__answer {
  min-width: 0;              /* grid item の overflow 防止 */
  padding: 10px 12px;        /* 仕様: 8〜12px */
  border: 1px solid var(--line);   /* 装飾は「枠」1つに絞る（面・左線は重ねない） */
  border-radius: 8px;
  background: transparent;
}

/* ---------- 4つの即答：マウスオン時の反応 ----------
   4項目はリンクではないため、押せると誤解させない範囲に留める
   （下線・カーソル変更・強い影は付けない）。
   - hover 可能なポインタ環境だけに限定（タッチでの hover 固着を避ける）
   - 動きは -2px の浮き上がりのみ。transform なので周囲のレイアウトは動かない＝CLSを増やさない
   - 色は既存トークンのみ。ダークは dark-mode.css のトークン反転にそのまま追従する */
@media (hover: hover) and (pointer: fine) {
  .sdp-home-hero .sdp-home-hero__answer {
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
  }
  .sdp-home-hero .sdp-home-hero__answer:hover {
    border-color: var(--brand-dark);
    background: var(--soft);
    transform: translateY(-2px);
  }
}
/* 動きを減らす設定では移動しない（色の変化だけ残す） */
@media (prefers-reduced-motion: reduce) {
  .sdp-home-hero .sdp-home-hero__answer { transition: none; }
  .sdp-home-hero .sdp-home-hero__answer:hover { transform: none; }
}
.sdp-home-hero .sdp-home-hero__answer dt {
  margin: 0;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
}
.sdp-home-hero .sdp-home-hero__answer dd {
  margin: 4px 0 0 0;         /* dd 既定の左 margin(40px) を 0 に */
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

/* ---------- 条件注記（4項目の直後・CTAの直前・常時可視） ---------- */
.sdp-home-hero .sdp-home-hero__condition {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;           /* 11px 未満にしない */
  line-height: 1.75;
}

/* ---------- CTA ----------
   既存 styles.css / top-slider-home.css は `.hero.sdp-home-hero .hero-actions`（クラス3つ）で
   ブレークポイントごとに列数を指定している（≤430px は 1fr）。同じ詳細度に揃えないと効かない。 */
.hero.sdp-home-hero .hero-actions {
  gap: 10px;
  margin-top: 20px;
}
.sdp-home-hero .hero-actions .button {
  min-height: 48px;          /* 操作領域44px以上（.button-outline 既定42pxの底上げ） */
  padding: 0 20px;
}

/* ---------- 狭幅（≤620px：既存ブレークポイントに合わせる） ---------- */
@media (max-width: 620px) {
  .sdp-home-hero .sdp-home-hero__answers { gap: 8px; }
  .sdp-home-hero .sdp-home-hero__answer  { padding: 9px 10px; }
  .sdp-home-hero .sdp-home-hero__answer dd { font-size: 13px; }

  /* CTAを2段に整理する（3段縦積みをやめる）
     1段目 = 主CTA（/kiban/）を横幅いっぱい ／ 2段目 = 心斎橋店・全国郵送を2列
     既存は ≤430px で `.hero.sdp-home-hero .hero-actions{grid-template-columns:1fr}`（クラス3つ）。
     display は grid のまま列数だけ変えるので、レイアウト方式そのものは競合しない。 */
  .hero.sdp-home-hero .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .sdp-home-hero .hero-actions .button-primary {
    grid-column: 1 / -1;
  }
  /* 副CTAは狭い枠に入るため、折り返しても文字が切れないようにする */
  .sdp-home-hero .hero-actions .button-outline {
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }
}

/* ---------- PC 1024〜1365px：初期画面の密度を上げる ----------
   目的＝1280×720・scrollY=0・固定dock表示の状態で、
   eyebrow / H1 / 強調文 / 4つの即答 / 条件注記 / 主CTA を可能な限り上に収める。
   下限は守る: 4即答 padding ≥8px ／ 注記 ≥12px かつ 4.5:1 ／ 主CTA ≥48px。 */
@media (min-width: 1024px) and (max-width: 1365px) {
  /* 上下の余白を詰める。min-height:690px と align-items:center は
     コピー列が短くなったとき上に無駄な空きを作るため解除する。 */
  /* 既存 styles.css / top-slider-home.css の
     `.hero.sdp-home-hero .sdp-home-hero__grid`（クラス3つ）に負けないよう詳細度を合わせる。
     .hero を単独セレクタで上書きしているわけではない（複合セレクタの一部）。 */
  .hero.sdp-home-hero .sdp-home-hero__grid {
    min-height: 0;
    align-items: start;
    padding-top: 24px;
    padding-bottom: 32px;
  }
  /* H1は最大サイズと行間を1段階だけ下げる（訴求力を落とさない範囲） */
  .sdp-home-hero h1 {
    font-size: clamp(36px, 3.5vw, 46px);
    line-height: 1.14;
  }
  .sdp-home-hero .eyebrow { margin-bottom: 8px; }
  .sdp-home-hero .hero-emph {
    margin-top: 10px;
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.6;
  }
  .sdp-home-hero .hero-lead {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.7;
  }
  .hero.sdp-home-hero .sdp-home-hero__answers { margin-top: 12px; gap: 8px; }
  .sdp-home-hero .sdp-home-hero__answer  { padding: 8px 10px; }   /* 下限8px */
  .sdp-home-hero .sdp-home-hero__answer dt { line-height: 1.35; }
  .sdp-home-hero .sdp-home-hero__answer dd { font-size: 13px; line-height: 1.4; margin-top: 3px; }
  .sdp-home-hero .sdp-home-hero__condition {
    margin-top: 10px;
    font-size: 12px;                 /* 下限12px */
    line-height: 1.5;
  }
  .hero.sdp-home-hero .hero-actions { margin-top: 14px; gap: 10px; }
  .sdp-home-hero .hero-actions .button { min-height: 48px; }        /* 下限48px */
}

/* 2カラムが成立する幅では、左カラムをわずかに広げてH1を2行に寄せる。
   右カルーセルの最小幅は 620px → 560px までに留める（画像・見出し・タブを壊さない範囲）。 */
@media (min-width: 1181px) and (max-width: 1365px) {
  .hero.sdp-home-hero .sdp-home-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(560px, 1fr);
    gap: 44px;
  }
  .hero.sdp-home-hero .hero-copy { max-width: 700px; }
}