/* ==========================================================================
   買取大吉 横浜麦田町店 — デザイントークン（CSS変数）
   DESIGN.md v1.1 の YAML から作成。
   デザインを差し替えるときは、このファイルの値だけを変更してください。
   ========================================================================== */
:root {
  /* ---- Colors ---- */
  /* 買取大吉 VIガイドライン ver3.04／独自広告用ロゴデータ集 RGB版 の規定色 */
  --c-brand-navy: #100169;      /* ロゴの紺。ロゴを載せてよい背景は 白 か この紺 だけ */
  --c-brand-red: #FF0001;       /* ロゴの「買取専門」印の赤。ロゴ以外には使わない */
  --c-brand-light: #D2D5EC;     /* ロゴ（紺背景用）の淡い藤色 */
  --c-primary: #100169;         /* ブランド紺：見出し・電話ボタン・帯・フッター（2026-10-04 規定色に変更。旧 #1E167F） */
  --c-primary-strong: #0B0150;  /* 濃紺：ホバー（旧 #140E66） */
  --c-secondary: #EB046A;       /* ピンク：店舗サイトのメインCTAのみ */
  --c-accent: #FFD400;          /* 黄色：細い下線・ラベルなど小面積の飾り */
  --c-line: #06C755;            /* LINEボタン専用（変更禁止） */
  --line-text-shadow: none;     /* LINEボタン白文字の縁取り（なし）。戻す場合: -1px 0 #333, 1px 0 #333, 0 -1px #333, 0 1px #333 */
  --c-on-primary: #FFFFFF;
  --c-text: #444444;            /* 本文 */
  --c-heading: #1A1A1A;         /* 見出し */
  --c-surface: #FFFFFF;         /* 地色 */
  --c-bg: #F8F8F8;              /* 交互背景 */
  --c-border: #E5E7EB;
  --c-muted: #CCCCCC;
  --c-error: #FF3B30;           /* 「必須」チップ */
  --c-lavender: #E8E9F2;        /* 淡ラベンダー：CTA帯・アイコン円・チップ（本部公式サイト準拠） */
  --c-gold: #8A6D1F;            /* 金色：特長バッジ（白地で読める濃さ） */
  --c-tel: #FFE500;             /* 電話ボタンの黄色 */
  --c-heading-sec: #444444;     /* セクション見出しの色（本部公式サイト準拠） */
  --c-sticky-bg: #C0C0C0;       /* 追従メニューの余白の色（シルバー） */
  --c-mock-bg: #FFF6BF;         /* （仮）マーカー */
  --c-mock-line: #B59B00;

  /* ---- Typography ---- */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-catch: "Hannari Mincho Web", "HannariMincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-num: Georgia, "Times New Roman", serif;
  --fs-display: 56px;
  --fs-display-sp: 30px;
  --fs-h1: 42px;
  --fs-h2: 32px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --lh-body: 1.8;
  --fw-heading: 500;            /* セクション見出しの太さ */
  --catch-weight: 400;          /* はんなり明朝の太さ。400＝加工なし（通常）／700＝疑似ボールド */
  --catch-stroke: 0em;          /* 太らせる縁取り。0em＝なし／0.028em＝少し太字 */

  /* ---- Shape ---- */
  --r-btn: 9999px;              /* ボタンはピル型（本部公式サイト準拠）。四角に戻す場合は 0px */
  --r-card: 0px;                /* カードは角丸なし（本部公式サイト準拠）。戻す場合は 8px */
  --r-input: 4px;
  --r-chip: 9999px;

  /* ---- Spacing / Layout ---- */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 92px;
  --w-content: 1080px;
  --gutter: 24px;
  --section-y: var(--sp-xl);
  --header-h: 132px;
  --sticky-h: 60px;             /* 追従メニューの高さ（ボタン56px＋上下余白2px） */

  /* ---- Elevation ---- */
  --shadow-sticky: 0 -2px 8px rgba(0, 0, 0, 0.12);
  --shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.16);
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 24px;
    --gutter: 16px;
    --section-y: var(--sp-lg);
    --header-h: 64px;
    --sticky-h: 60px;
  }
}