/*
 * 新デザインの基準値（#175）
 *
 * **色・フォント・寸法をここに 1 箇所だけ持つ。** 同じ階層の
 * `blocks.css` / `cta.css` / `phone.css`（ページを問わず使える汎用パーツ）と
 * `hero.css` / `intro.css`（市区町村ページ専用）が、すべてこの変数を参照する。
 *
 * すべて先方支給の .fig から実測した値。推定値は入れていない。
 *   - 2026-09-10 以降は `.fig` を完全にデコードした結果（全 2,762 レイヤーの
 *     座標・サイズ・色・フォント・余白）が正。目視や画素の読み取りより優先する
 *   - Figma のテキストは**文字単位でスタイルを持てる**。レイヤーの fontSize・fill
 *     だけを見ると取りこぼす（大見出しが実際は 44px だった例あり）
 *   - 出典と手順: vault `資料/受領資料/リニューアル用/デザイン/解析/canvas.fig 完全解析.md`
 *     全レイヤーの値は同フォルダ `レイヤー詳細ダンプ.txt`
 *
 * **数値を変えるときは解析ドキュメントの実測値も直すこと。** 片方だけ変えると、
 * 次に照合する人がどちらが正しいか判断できなくなる。
 *
 * 中間色（--kau-gray-*）は Tailwind のデフォルト値と一致していた。未計測の箇所は
 * 同じスケールから選ぶと外れにくい。
 */

/*
 * ------------------------------------------------------------------
 * ブレイクポイント（3 段階・2026-09-14 決定）
 *
 * **先方から支給された Figma は「PC 版」と「タブレット版」の 2 つ**で、
 * 767px のフレームは SP ではなくタブレット版（同日ユーザー確認）。
 * SP 版のデザインは無いため、タブレット版を狭い画面向けに詰めて作る。
 *
 *   PC         1200px 以上   … 基本のスタイル（Figma 1440px 基準）
 *   タブレット   768〜1199px   … @media (max-width: 1199px)（Figma 767px 基準）
 *   SP         767px 以下    … @media (max-width: 767px)（タブレットを継承して詰める）
 *
 * タブレットの指定は SP にも効く（カスケード）。SP 側には**差分だけ**書く。
 *
 * **各段階は固定幅のキャンバス**（2026-09-15 ユーザー決定）。
 *   PC 1440px（1200〜1439 の窓は縮小表示）／ タブレット 768px ／ SP 440px（`--kau-canvas-w`）
 * 画面幅に合わせて流動で伸縮させない。窓を狭めても段階の切り替わりまでは
 * 同じ組みのまま中央に置き、切り替わった瞬間に次の段階の組みへ移る。
 * 流動にすると PC（1440）とタブレット（767）の間、タブレットと SP の間で
 * デザインの無い幅が生まれ、そこで崩れる（2026-09-15 指摘）。
 * タブレットと SP の切り替え位置（768）はキャンバスがちょうど入る幅。PC は 1440 の
 * 組みを 1200 まで縮小して見せ、1200 未満でタブレットへ切り替える。どの窓幅でも横スクロールは出ない。
 * 背景の帯だけは画面幅いっぱいに広げる（`blocks.css` の `.kau-page > *`）。
 * スマホ・タブレット実機は inc/kaitori-area-viewport.php がビューポートを
 * 440 / 768 に固定するので、キャンバスが画面にちょうど収まる。
 * ------------------------------------------------------------------
 */

:root {
  /* ------------------------------------------------------------------
   * 色
   * ------------------------------------------------------------------ */

  /* 地域名の見出し・バッジ・罫線。すべて同じ緑 */
  --kau-green: #2b8e28;
  /* 実績アイコンの円。見出しの緑とは別の色 */
  --kau-green-icon: #14ae5c;
  /* LINE ボタン（LINE 公式グリーン） */
  --kau-line: #00b900;

  /* ヘッダーの「メールで相談」 */
  --kau-orange: #f48d1c;
  /* 大見出しの「高額買い取り」だけ使うオレンジ */
  --kau-orange-accent: #e2600a;
  /* 大きい CTA ボタンのグラデーション（左→右） */
  --kau-cta-from: #f39800;
  --kau-cta-to: #ff6600;
  /* 「30 分以内」の強調 */
  --kau-accent-yellow: #fde047;

  /* 文字色。Tailwind の gray スケールと一致 */
  --kau-gray-900: #1f2937; /* 「関西エリアの出張買取」など小見出し */
  --kau-gray-700: #374151; /* 本文 */
  --kau-gray-600: #333333; /* 実績アイコンの見出し */
  --kau-gray-500: #6b7280; /* 実績アイコンの補足・パンくず */
  --kau-gray-500b: #4b5563; /* ヒーロー CTA の「買取価格を調べる！」 */

  --kau-black: #000000;    /* 最上部の帯 */
  --kau-white: #ffffff;

  /* ---- 本文セクション（02）で使う色 ---- */

  /* 大見出しの文字。ヒーローの緑とは別系統の濃紺 */
  --kau-navy: #06154b;
  /* 「都道府県＋郡」のラベル背景・メーカーチップの背景 */
  --kau-navy-label: #01387c;
  --kau-navy-chip: #013b7f;
  /* 小見出しに添える山・海のアイコン */
  --kau-navy-icon: #053c87;
  /*
   * 本文セクションと締めの帯にある実績バッジのアイコン。
   * **ヒーローの緑（--kau-green-icon）とは別で、濃紺。**
   * 実測はトラック #004088／¥ と握手 #1e3a8a で 2 色に分かれているが、
   * 肉眼で区別できない差なので #004088 に寄せている。
   */
  --kau-navy-badge: #004088;

  /* チェック印の線。山側の品目タイルの枠と同じ黄緑 */
  --kau-check: #bcda46;
  /*
   * 品目タイルの枠。**デザインは海側 #c7d9e5 と山側 #bcda46 で塗り分けている**が、
   * 「どのタイル群が海側か」は原稿の内容依存で自動化できないため、
   * 1 カラム化と同じ理由で青系に統一している（2026-09-10 判断）。
   */
  --kau-tile-border: #c7d9e5;
  /* 吹き出しの枠線 */
  --kau-bubble-border: #f1ce9d;
  /* 本文セクションの小さい CTA 2 つ */
  --kau-mini-cta-web: #fba011;
  --kau-mini-cta-line: #4cad24;
  /* 1 つめのタイル群を囲む薄緑のボックス */
  --kau-box-bg: #f2f5e3;
  /* 本文セクションの締めの帯 */
  --kau-navy-band: #00377c;

  /* ---- 選ばれる理由（04）で使う色 ---- */

  /* セクションの背景。カードの白と差を付けるためのごく薄い灰 */
  --kau-strength-bg: #fcfcfc;
  /* 番号のバッジ・チェック印 */
  --kau-strength-accent: #fe7303;
  /* お客様の声の前置きの左右にある斜線の飾り（実測 29×30） */
  --kau-voice-slash: #9ca3af;
  /* 見出しの強調（バッジより少しだけ明るい） */
  --kau-strength-accent-text: #fe7208;
  /* 見出しの上の点 */
  --kau-strength-dot: #eb6100;
  --kau-strength-border: #eb6100;    /* カードの枠 2px */
  --kau-strength-box-border: #fb860d; /* 「そのため、」の小箱の枠 */
  /* 見出しとカードを分ける線 */
  --kau-strength-divider: #fcd3a8;
  /* カードの中の強い文字（チェックの項目など） */
  --kau-strength-text: #111827;

  /* ---- フリマアプリとの比較（03）で使う色 ---- */

  /* 列の見出し。買取UP が緑、フリマアプリがグレー */
  --kau-compare-kau: #3c8f32;
  --kau-compare-flea: #777778;
  /* 行見出しと下部の帯の背景 */
  --kau-compare-rowhead: #f0fdf4;
  /* セルの背景 */
  --kau-compare-cell: #fbfbfb;
  /* 番号の円とアイコン */
  --kau-compare-number: #3b8849;
  /* 「¥」の文字と枠 */
  --kau-compare-yen: #16a34a;
  /* 買取UP 側のセルの文字 */
  --kau-compare-kau-text: #1e8735;
  /* 見出しの左右の飾り */
  --kau-compare-mark: #37902d;
  --kau-compare-line: #acacac; /* 表の罫線 */

  /* ---- よくある質問（05）・お客様の声（06）・片付けと買取（07） ---- */

  /* FAQ の見出しと Q の印 */
  --kau-faq-navy: #0a1d4a;
  /* A の印。同じ濃紺の淡い版 */
  --kau-faq-light: #93c5fd;
  --kau-faq-bg: #f5f8ff;
  --kau-faq-border: #c7d2fe; /* カードの枠と Q の下の罫線（実測） */
  --kau-faq-answer: #3b82f6; /* 「A」の文字 */

  /* お客様の声 */
  --kau-voice-navy: #0b2352;
  --kau-voice-star: #f5a623;
  --kau-voice-divider: #e5e7eb;
  --kau-voice-dash: #cbd5e1;   /* 見出し下の破線 */
  --kau-voice-hr: #d1d5db;     /* カード内の罫線 */

  /* 片付けと買取 */
  --kau-summary-navy: #1a365d;
  --kau-kotsu-navy: #283661;    /* 「高額買取にはコツがあります」の帯（支給画像の紺と同じ値） */
  --kau-summary-bg: #f0f7f7;
  --kau-summary-accent: #639b9b;
  /* 見出しの背景（うすい黄色） */
  --kau-summary-mark: #fefcbf;
  --kau-summary-divider: #d1d5db; /* カード見出し下・締めの罫線 */
  /* 締めの帯の強い文字 */
  --kau-summary-strong: #ed8936;
  --kau-summary-highlight-bg: #fef8f1; /* 「これって売れるのかな？」の箱 */

  /* ---- 3 つの買取方法（08） ---- */

  --kau-method-heading: #0a1d4a;
  /* 買取方法ごとの色。ブロック側で --kau-method-accent などに入れる */
  --kau-method-teal: #009688;
  --kau-method-teal-bg: #e0f2f1;
  --kau-method-teal-border: #acdddd; /* 面の外枠・丸枠 */
  --kau-method-teal-line: #99f6e4;   /* 店頭だけステップのカード枠が別の色 */
  --kau-method-pink: #e91f64;
  --kau-method-pink-bg: #fff7fa;
  --kau-method-pink-line: #f3d1d2;   /* 出張は外枠もカード枠も同じ */
  --kau-method-orange: #ff9800;      /* pill とステップの丸（以前 #f39800 としていたのは誤読） */
  --kau-method-orange-bg: #fffcf6;   /* 同上（以前 #fff8ec） */
  --kau-method-orange-line: #f9e8cf;
  /* 宅配のキャッチ「送料無料！」と「宅配買取のここが〜」の強調だけ pill より濃い */
  --kau-method-orange-deep: #fe7303;
  /* 「〇〇買取のここがメリット！」の白い帯。枠は出張・宅配とも同じ色（実測） */
  --kau-method-merit-border: #f3d1d2;
  /* 「さらに！」の帯（店頭だけ） */
  --kau-method-bonus-bg: #fefce8;
  --kau-method-bonus-border: #fef08a;
  --kau-method-bonus-badge: #38afb4;
  --kau-method-bubble: #12a0a1;      /* 「買取は、もう店内で待たなくていい！」の吹き出し */
  /* 初めての方でも安心！の帯 */
  --kau-method-reassure-bg: #f4f9f9;
  --kau-method-reassure-border: #8ecfd0;

  /* ------------------------------------------------------------------
   * フォント
   * ------------------------------------------------------------------ */

  /* 現行テーマ（小塚ゴシック系）とは別。市区町村ページのみで読み込む */
  --kau-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* 地域名の大見出し。PC 72px → SP 32px（実測比 0.44） */
  --kau-heading-size: 64px;
  --kau-heading-weight: 700;
  --kau-heading-leading: 1;
  --kau-heading-tracking: -0.05em; /* 72px に対して -3.6px */

  /* ヒーローの説明文。行間 1.625 は Tailwind の leading-relaxed と一致 */
  --kau-body-size: 18px;
  --kau-body-weight: 500;
  --kau-body-leading: 1.625;

  /*
   * 本文セクション以降の本文。ヒーローより小さい（14px / 行間 23px）。
   * 字間 4% はデザイン全体の本文に一律で入っている。
   */
  --kau-text-size: 14px;
  --kau-text-leading: 23px;
  --kau-text-tracking: 0.04em;

  /*
   * 本文セクションの大見出し。**実測は 44px。**
   *
   * レイヤーの fontSize は 50px だが、それが効いているのは「買取UP」の 4 文字だけで、
   * **本文は文字単位のスタイルで 44px** になっている（2026-09-10 に文字単位の
   * スタイルを読んで判明）。50px で組んだため 2 行目が枠 860px に収まらず
   * 3 行になっていた。44px なら 834px で収まる。
   *
   * 「買取UP」の 50px は `.kau-intro__heading-brand` で足している。
   */
  --kau-intro-heading-size: 44px;
  /* 小見出し（アイコン付き）。PC 24px → SP 20px */
  --kau-section-heading-size: 24px;

  /*
   * 見出しの前に取る余白（＝セクションの区切り）。
   * **デザインの実測は 38px だが、それでは本文の中で見出しが埋もれる**ため
   * 広く取っている（2026-09-10 ユーザー指摘で 40px → 64px）。
   */
  --kau-section-gap: 48px;

  /*
   * 余白の統一ルール（2026-09-30 先方指摘）
   * メインセクション（各 section の __inner）の上下 padding は 20〜40px、
   * サブセクション（白い箱・カード）の padding は 30px、コンテンツ間は 60〜80px。
   * 隣り合うセクションの間隔は main-pad × 2（PC 80px／タブレット以下 60px）になる。
   * SP のサブは 30px だと本文幅が 350px を割るので 20px に落とす。
   */
  --kau-main-pad: 40px;
  --kau-sub-pad: 30px;

  /* ------------------------------------------------------------------
   * 形状
   * ------------------------------------------------------------------ */

  /* ヒーローの白カード・大きい CTA ボタンともに 40px */
  --kau-radius-lg: 40px;

  /*
   * ヒーローの白カード。
   * **写真が透け、さらに背景がぼける**（Figma の BACKGROUND_BLUR 4）。
   * 影は DROP_SHADOW offset(0,25) ぼかし 50 広がり −12 黒 25%
   * ＝ Tailwind の shadow-2xl と同値だった。
   */
  --kau-card-bg: rgba(255, 255, 255, 0.9);
  --kau-card-border: 1px solid rgba(255, 255, 255, 0.5);
  --kau-card-blur: 4px;
  --kau-card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --kau-card-w: 660px;
  --kau-card-h: 450px;
  /* カードの内側。上 25 / 下 18 は実測。左右 36 は実績バッジ（628px）が収まる幅 */
  --kau-card-pad: 20px 28px 16px;

  /* CTA 行の要素間（Figma の auto-layout の間隔） */
  --kau-cta-gap: 16px;

  /* PC の基準幅 */
  --kau-page-w: 1440px;
  /*
   * 段階ごとの固定キャンバス幅（PC は Figma 原寸の 1440）。タブレット・SP は下の @media で上書き。
   * 窓幅 1200〜1439 では inc/kaitori-area-viewport.php の JS が `--kau-zoom` を窓幅/1440 にして
   * キャンバスごと縮小する。`--kau-vw` は JS が入れる「キャンバス座標系での窓幅」で、
   * JS が無いときは 100vw に落ちる（その場合 1200〜1439 は横スクロール）。
   */
  --kau-canvas-w: 1440px;
  --kau-zoom: 1;
  --kau-vw: 100vw;
}

/*
 * タブレット（1024px 以下）
 *
 * SP のフレーム幅が 767px だったため、切り替えは 768px。
 * **CTA は SP でも横並びのまま**（縦積みにしない）。ボタン内の文字が 2 行に折り返す。
 */
@media (max-width: 1199px) {
  :root {
    --kau-heading-size: 28px;
    --kau-card-w: auto;
    --kau-card-h: auto;
    --kau-page-w: 767px;
    --kau-canvas-w: 768px;
    /* 2 行目「買取UPは〜します！」（17 文字）が 375px で 1 行に収まる大きさ */
    --kau-intro-heading-size: 18px;
    /* 15 文字の小見出し＋アイコン列が 375px で 1 行に収まる大きさ（2026-09-14） */
    --kau-section-heading-size: 18px;
    --kau-section-gap: 36px;
    --kau-main-pad: 30px;
    --kau-sub-pad: 20px;
  }
}

/* SP（767px 以下）: キャンバス幅だけ。他の値はタブレットを継承する */
@media (max-width: 767px) {
  :root {
    /* 2026-08 時点で最も広いスマホ（iPhone 17 Pro Max）の CSS 幅 */
    --kau-canvas-w: 440px;
  }
}

/* 読み上げ専用テキスト（見出しの補足など）。表示には出さない */
.kau-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}