/* =====================================================================
 * tokens.css — デザイントークン
 * ---------------------------------------------------------------------
 * ★ このファイルの値だけを差し替えれば、サイト全体のスキンが切り替わる
 *   （構造CSSはトークンを参照するだけ）。
 *
 * 2026-09-04 デザイン確定版に更新。
 *   出典: Figma「sakaguchi」サービスページ / 交換サービス（1440×11086）
 *   色は Figma Variables のコレクション `sakaguchi`（15色）をそのまま持ち込んだ。
 *   変数名は Figma 側の名前を併記してある。デザイナーと同じ言葉で話せるようにするため。
 * ===================================================================== */

:root {
	/* --- Figma Variables `sakaguchi` の生の値 ------------------------
	 * ここは Figma と1対1で対応させる。用途では名付けない。
	 * 用途ごとの名前は下の「意味づけ」で付ける。 */
	--fig-blue-80: #153e65;
	--fig-blue-60: #0b56a2;
	--fig-blue-40: #259ef5;
	--fig-blue-30: #c3e1ff;
	--fig-blue-20: #e9f4fc;
	--fig-black: #15233e;
	--fig-white: #ffffff;
	--fig-gray-70: #364259;
	--fig-gray-50: #5e5e5e;
	--fig-gray-40: #929292;
	--fig-gray-30: #bdbdbd;
	--fig-gray-10: #ebebeb;
	--fig-orange: #ff6600;
	--fig-yellow: #f6ff00;
	--fig-red: #e4011d;

	/* --- 意味づけ（既存の構造CSSはこちらを参照している） ------------- */

	/* ブランドカラー */
	--c-brand: var(--fig-blue-40); /* 基調。アイコン円・リンク */
	--c-brand-deep: var(--fig-blue-80); /* 見出しバー・濃色の面 */
	--c-brand-mid: var(--fig-blue-60); /* FVグラデーションの濃い側 */
	--c-brand-bright: var(--fig-blue-30); /* 明るい面・区切り */
	--c-brand-pale: var(--fig-blue-20); /* 淡い背景面 */

	/* アクセント */
	--c-warm: var(--fig-orange); /* 電話CTA */
	--c-warm-deep: #d95500;           /* 電話CTAの押下・影（orange の暗色。Figma に定義なし） */
	--c-badge: var(--fig-red);    /* 赤バッジ（受付中 等） */
	--c-ok: #2f9e5b;           /* 緑バッジ（Figma に定義なし。暫定） */
	/* 緊急度の3色（エラーコード・症状のページだけで使う。ワイヤー 2a-D「3色は他用途に使わない」）。
	 * 2026-10-14 に山吹色（#f5a700）を試したが、ワイヤーの「橙」に合わせて JIS 慣用色の橙にした。
	 * 電話ボタンのオレンジ（#ff6600）とは別の色として持つ。 */
	--c-urgency-stop: var(--fig-red); /* × 使用を止めてご連絡ください */
	--c-urgency-check: #ee7800;       /* ▲ 解除を試して、ダメなら点検（JIS 慣用色「橙」） */
	--c-urgency-self: #1e8a52;        /* ○ ご自身で解除できます */
	--c-line: #06c755;           /* LINE ブランド緑（LINE の指定色） */
	--c-highlight: var(--fig-yellow); /* 価格の強調・黄色帯 */

	/* テキスト・罫線・面 */
	--c-ink: var(--fig-black);   /* 本文 */
	--c-ink-weak: var(--fig-gray-70); /* 副次テキスト */
	--c-gray: var(--fig-gray-50); /* 補足 */
	--c-gray-mid: var(--fig-gray-40);
	--c-border: var(--fig-gray-10);
	--c-bg: var(--fig-white);
	/* ページの地の色。Figma の Desktop フレームの塗り（#F5FAFD）。 */
	--c-bg-page: #f5fafd;
	--c-bg-soft: #f5f5f5;

	/* --- タイポグラフィ ---------------------------------------------
	 * Figma のテキストスタイルは Noto Sans JP / Barlow Condensed / DM Sans の3種。
	 * 日本語は Noto Sans JP、数字（価格・電話番号）は Barlow Condensed が使われている。
	 * 端末に無いので Google Fonts から読む（functions.php で読み込み）。 */
	--font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--font-en: "DM Sans", "Arial", "Helvetica", sans-serif;
	/* 電話番号・価格の数字。Figma API で確認したところ Geist だった（2026-09-04 訂正）。 */
	--font-num: "Geist", "Helvetica Neue", "Arial", sans-serif;
	--fs-body: 15px;
	--lh-body: 1.85;
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-black: 800;

	/* --- 余白・レイアウト --- */
	--wrap: 1200px;   /* Figma の内容幅（1440 − 左右120） */
	--gutter: 20px;     /* 左右余白（SP基準） */
	--sec-y: 64px;     /* セクション上下余白（SP） */
	--sec-y-pc: 96px;     /* セクション上下余白（PC） */
	--gap: 16px;

	/* --- 角丸・影 --- */
	--radius: 12px;
	--radius-sm: 8px;
	--radius-lg: 20px;     /* カード・見出しバーの大きい角丸 */
	--radius-pill: 40px;
	--shadow: 0 8px 24px rgba(21, 62, 101, .12);
	--shadow-cta: 0 8px 22px rgba(37, 158, 245, .28);
	/* Figma の見積りボタン（ヘッダー・CTA帯）に付く影。ぼかし0・下3pxの帯 */
	--shadow-btn: 0 3px 0 rgba(0, 0, 0, .1);

	/* --- SP固定バーの高さ（本文末尾の余白確保に使用） --- */
	--spbar-h: 62px;
	--header-h: 60px;
}

/* =====================================================================
 * 画面幅の3段階（2026-10-12。コーポレートサイトと同じ）
 *   〜599     スマホ。メディアクエリの外に書く
 *   600〜1023 狭めの PC。PC の配置のまま比例して縮め、文字には下限を付ける
 *   1024〜    Figma（1440幅）どおりの PC。1440 未満は比例して縮み、1440 以上は Figma の値で止まる
 * 寸法は「Figma の値 × var(--u)」で書く。--u は 1424 以上で 1px、それより狭いと画面幅に比例する
 * （1440 でなく 1424 なのは、100vw がスクロールバーの幅を除いた値になるため）。
 * 文字は max(下限 × var(--ff), 値 × var(--u))。下限は値の 2/3（14 未満にしない）。
 * 1024 以上は --u が 0.72 を下回らないので、大きい文字（21px 以上）では下限は働かず Figma の比率のまま。
 * 小さい文字（本文15px など）だけ 14px で止まる。以前は 1024 以上で --ff を 0 にしていたが、
 * 本文が 1024 幅で 10.8px まで縮んで読めなかったので、全幅で下限を残す（2026-10-12）。
 * 2px 以下の値（線の太さ）と字間は縮めない。もとは exchange.css にあった仕組みを、全ページに広げた。 */
:root { --u: min(1px, 100vw / 1424); --ff: 1px; }