/* ==========================================================
   Design tokens（色・余白・フォントサイズなどの共通変数）
   色は依頼者の指定（2026-11-10）。文字に使う色は、白・クリームの上で読みやすさ（コントラスト 4.5 以上）が足りるよう、
   濃い版（--c-primary-dark・--c-text-2）を足した。
   WPシンクロコアは連携するときに --c-primary・--c-secondary・--c-accent を読み、記事の色をサイトに合わせる（#hex で書く）。
   ========================================================== */
:root {
	/* Color（依頼者の指定） */
	--c-primary: #F07A18;       /* メイン（オレンジ） */
	--c-secondary: #182A52;     /* ベース（紺） */
	--c-accent: #FFD6AA;        /* 薄いオレンジ */
	--c-white: #FFFFFF;
	--c-cream: #FFF6EA;         /* クリーム（背景のうすい地） */
	--c-line: #E2D6C8;          /* 区切り線 */
	--c-gray: #70788A;          /* 補助の灰色（線・飾り） */
	--c-success: #269656;       /* 緑（良い・安全） */
	--c-warning: #E2A000;       /* 黄（注意） */
	--c-error: #D64030;         /* 赤（警告） */

	/* 文字に使う濃い版（白の上でコントラスト 4.5 以上） */
	--c-primary-dark: #B5560A;  /* オレンジの文字・リンク（白 4.88・クリーム 4.56） */
	--c-text: #182A52;          /* 本文（紺。白 14.1） */
	--c-text-2: #5E6577;        /* 補足の文字（白 5.83） */

	--c-surface: #FFFFFF;
	--c-surface-2: #FFF6EA;
	--c-border-light: #E2D6C8;
	--c-border: #D3C3AF;

	/* Shadow / Ring */
	--shadow-low: 0 1px 3px rgba(24, 42, 82, 0.06);
	--shadow-mid: 0 4px 12px rgba(24, 42, 82, 0.1);
	--shadow-high: 0 12px 32px rgba(24, 42, 82, 0.14);
	--ring: 0 0 0 2px #fff, 0 0 0 4px rgba(240, 122, 24, 0.8);

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 50px;

	/* Space（8px 基準） */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 40px;
	--space-6: 48px;
	--space-8: 64px;
	--space-12: 96px;

	/* Font */
	/* 端末の標準の日本語フォント（Web フォントは読み込まない。2026-11-10 依頼者の指示）。Mac・iPhone: ヒラギノ／Android: Noto Sans CJK／Windows: Yu Gothic UI・Meiryo */
	--font: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic UI', 'Yu Gothic', Meiryo, sans-serif;
	--fz-xs: 0.75rem;
	--fz-sm: 0.875rem;
	--fz-base: 1rem;
	--fz-lg: 1.25rem;
	--fz-xl: 1.75rem;
	--fz-2xl: 2.25rem;
	--fz-3xl: 3rem;

	/* Layout */
	--container: 1200px;
	--article: 880px;
	--header-pad: 10px;
	--logo-h: 44px;             /* ロゴは横長（3:1） */
	--c-footer-line: rgba(255, 255, 255, 0.35);
	--z-header: 100;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.35s;
}

@media (min-width: 1024px) {
	:root {
		--logo-h: 52px;
	}
}