@charset "UTF-8";
/* ==================================================================
 * 設計トークン
 *
 * 【これは何か】
 * 色・余白・文字サイズ・角丸などの「値」をここに集約する。
 * 各コンポーネントは値を直接書かず、必ずここの変数を使う。
 *
 * 【値の出どころ】
 * 値はすべて既存のCSSから起こしている。
 * 見た目を変えないことが前提のため、丸めや統合も既存の範囲に留めている。
 *
 * 【既存の仕組みをそのまま引き継ぐ】
 * 既存のCSSは **スマホ = vw（375px基準）／PC = px** という書き方をしている。
 * 例: 4.26667vw × 375 ÷ 100 = 16px
 * つまりスマホでは画面幅に比例して全部が伸縮する。**この挙動は変えない。**
 * トークン側で 751px を境に定義を差し替えることで、
 * コンポーネントは `var(--space-16)` と書くだけでよくなる。
 *
 * 【ブレークポイント】
 * 既存のCSSは 751px の1本のみ（min-width が202箇所・max-width が19箇所）。
 * ★増やすかどうかは要検討。ここでは従来どおり1本に留める。
 * ================================================================== */

:root {
	/* --- 色 ---------------------------------------------------------
	 * 内訳: #fff 31回 / #000 18回 / #ccc 9回 / #f00 8回 …
	 * ★ブランドの赤は #f00（.m-btn-red の実値）。#c8102e ではない。
	 */
	--color-bg: #fff;
	--color-text: #000;
	--color-red: #f00;          /* ボタン・強調・タブの選択状態 */
	--color-red-dark: #870505;  /* 1箇所だけ使われている濃い赤 */

	/* グレー: 既存のCSSは #f7f8f9 / #f7f7f7 / #f6f7f8 / #f2f2f2 / #e7e7e7 /
	 * #e5e5e5 / #ddd / #d9d9d9 / #ccc / #bfbfbf / #eee の11種類あった。
	 * ほぼ見分けがつかない差なので6段階に整理する。
	 * 🚨 当初4段階にまとめようとしたが、`.m-card-gray` の #ddd を #ccc に寄せてしまい
	 * **色が変わる**ところだった。
	 * **見た目を変えない**ことが前提なので、実在する値はそのまま段階として持つ。
	 * ★置き換えは1つずつ現物を確認しながら行う（一括置換しない）。 */
	--color-gray-50: #f7f7f7;   /* 背景（薄）   ← #f7f8f9 / #f6f7f8 / #f2f2f2 を集約 */
	--color-gray-100: #e5e5e5;  /* 罫線（薄）   ← #e7e7e7 / #eee を集約 */
	--color-gray-200: #ddd;     /* 面（.m-card-gray）← #d9d9d9 も同系 */
	--color-gray-300: #ccc;     /* 罫線・枠線 */
	--color-gray-400: #bfbfbf;  /* 罫線（濃） */
	--color-gray-500: #808080;  /* 補助テキスト */

	--color-accent-yellow: #ff9; /* マーカー用 */

	/* フォーカスリング。★既存のCSSには focus の指定が無いため新規に設ける。
	   ブランドの赤（#f00）だとリンク色や背景に埋もれるため、少し暗い赤を使う。 */
	--color-focus: #870505;

	/* --- 線幅 -------------------------------------------------------- */
	--border-thin: 1px;
	--border-focus: 2px;

	--color-white-a80: rgba(255, 255, 255, .8);
	--color-white-a85: rgba(255, 255, 255, .85);
	--color-white-a60: rgba(255, 255, 255, .6);
	--color-white-a0: rgba(255, 255, 255, 0);

	/* --- 余白 -------------------------------------------------------
	 * 既存のCSSはすべて 4px の倍数（＋3/5/6/7px の端数）。
	 * 数字は「375px幅のときの px」。スマホでは vw、PCでは px。
	 */
	--space-3: .8vw;
	--space-4: 1.06667vw;
	--space-5: 1.33333vw;
	--space-6: 1.6vw;
	--space-7: 1.86667vw;
	--space-8: 2.13333vw;
	--space-10: 2.66667vw;
	--space-12: 3.2vw;
	--space-16: 4.26667vw;   /* 最頻値（33箇所） */
	--space-20: 5.33333vw;
	--space-24: 6.4vw;
	--space-32: 8.53333vw;

	/* --- 文字サイズ -------------------------------------------------- */
	--font-10: 2.66667vw;
	--font-12: 3.2vw;
	--font-14: 3.73333vw;
	--font-16: 4.26667vw;    /* 本文 */
	--font-18: 4.8vw;
	--font-20: 5.33333vw;
	--font-24: 6.4vw;
	--font-26: 6.93333vw;
	--font-32: 8.53333vw;

	/* --- 行送り ------------------------------------------------------ */
	--leading-tight: 1.2;
	--leading-normal: 1.5;
	--leading-relaxed: 1.8;

	/* --- 角丸 -------------------------------------------------------- */
	--radius-s: 3px;
	--radius-m: 5px;
	--radius-l: 10px;

	/* --- 書体 --------------------------------------------------------
	 * 既存の指定をそのまま引き継ぐ。★Font Awesome 5 Free はアイコン用。
	 */
	--font-family-base: "メイリオ", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック",
		Roboto, "Droid Sans", YuGothic, Meiryo, "Hiragino Kaku Gothic ProN",
		"ＭＳ Ｐゴシック", sans-serif, Helvetica;

	/* --- レイアウト ---------------------------------------------------
	 * 実際の字形の寸法。スマホは 100%、PC で固定幅になる。
	 */
	--wrapper-width: 100%;     /* .l-wrapper   PC: 1280px */
	--container-width: 100%;   /* .l-container PC: 1080px */
	--breakpoint-pc: 751px;    /* 唯一のブレークポイント */
	--tap-min: 44px;           /* タップ領域の下限 */
}

/* ------------------------------------------------------------------
 * PC（751px 以上）: 余白と文字サイズを px に切り替える。
 * ★従来と同じ切り替え方。値も内訳どおり。
 * ---------------------------------------------------------------- */
@media screen and (min-width: 751px) {
	:root {
		--space-3: 3px;
		--space-4: 4px;
		--space-5: 5px;
		--space-6: 6px;
		--space-7: 7px;
		--space-8: 8px;
		--space-10: 10px;
		--space-12: 12px;
		--space-16: 16px;
		--space-20: 20px;
		--space-24: 24px;
		--space-32: 32px;

		--font-10: .625rem;
		--font-12: .75rem;
		--font-14: .875rem;
		--font-16: 1rem;
		--font-18: 1.125rem;
		--font-20: 1.25rem;
		--font-24: 1.5rem;
		--font-26: 1.625rem;
		--font-32: 2rem;

		--wrapper-width: 1280px;
		--container-width: 1080px;
	}
}