/*
 * Design Tokens - realfine-uniteque
 * 唯一の正となる CSS 変数。値の追加・変更は design.md に反映してから行う。
 *
 * ブレークポイント（メディアクエリのみ／CSS変数は @media で使えないため定数化不可）
 *   sm: 540px / md: 768px / lg: 1024px / xl: 1280px
 * PC/SP の切り替えは md（768px）で行う。
 */

:root {
	/* Color */
	--color-text: #222222;
	--color-bg: #ffffff;
	--color-border: #dddddd;
	--color-primary: #0059a5;
	--color-primary-hover: rgba(0, 89, 165, 0.1);
	--color-primary-dark: #005095;   /* 区切り線などのプライマリ暗色 */
	--color-primary-light: #a3d4ff;  /* プライマリ背景上のアクセント見出し */
	--color-divider-on-primary: rgba(255, 255, 255, 0.5);
	--color-primary-bg: #f2f7fa;   /* プライマリ系の薄い塗り背景（ポイントカード等） */
	--color-bg-muted: #f5f5f5;   /* 淡いグレー面（テーブルラベル背景など） */
	--color-office: #008e3e;
	--color-office-hover: rgba(0, 142, 62, 0.1);
	--color-office-bg: #e5f4ec;   /* オフィス系の薄い塗り背景（ポイントカード等） */
	--color-navy: #182d48;
	--color-overlay: rgba(0, 89, 165, 0.7);
	--color-overlay-dim: rgba(0, 0, 0, 0.3);   /* メガメニュー表示中にページ側を暗くする幕 */
	--color-white-alpha: rgba(255, 255, 255, 0.2);

	/* Typography */
	--font-family-base: "Noto Sans JP", sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;
	--line-height-body: 1.7;
	--line-height-heading: 1.4;

	/* Font sizes（SPが既定、lg以上でPC値に上書き） */
	--fs-xs: 10px;
	--fs-sm: 12px;
	--fs-base: 14px;
	--fs-md: 16px;
	--fs-lg: 18px;
	--fs-2xl: 20px;
	--fs-display: 32px;

	/* Component-fixed sizes（ビューポート非依存。ボタン等コンポーネント固定） */
	--fs-button-sm: 14px;

	/* Layout */
	--container-max: 1080px;
	--container-max-wide: 1280px;   /* フッターなど、通常より広く取りたい箇所用 */
	--section-pad: 80px;
	--page-top-pad: 80px;   /* ページ最上部（ヘッダー直下）の余白。PC/SP 共通 */
	--hero-image-gap: 64px;   /* FV タイトル → ヒーロー画像の余白（SP。PC は @media で 100px） */
	--content-gap: 32px;   /* セクション内のコンテンツ間（見出し→本文/画像 等）SP。PC は @media で 64px */
}

@media (min-width: 768px) {
	:root {
		--fs-base: 16px;
		--fs-md: 20px;
		--fs-lg: 24px;
		--fs-2xl: 32px;
		--fs-display: 48px;

		--section-pad: 160px;
		--hero-image-gap: 100px;
		--content-gap: 64px;
	}
}