/* ------------------------------------------------------
	variables.css ｜サイト全体で使うCSS変数（カスタムプロパティ）
------------------------------------------------------ */

:root {
	/* カラー（色） */
	--color-txt: #000016;
    --color-white: #fff;
    --color-primary: #375899;
	--color-accent: #ff6600;
    --color-accent-2nd: #918062;
    --color-accent-2nd-light: #ddd8d1;
    --color-section: #eff0eb;
	--color-gray-100: #fffdf3;
    --color-gray-200: #c5c2bd;
    --color-gray-300: #87888f;
    --color-gray-400: #585858;
    --color-gray-500: #3d485d;

    /* カラー（背景） */
    --color-bg: #fffdf9;

	/* フォントファミリー */
	--font-family-main: 'Inter', 'Zen Kaku Gothic Antique', sans-serif;

	/* フォントサイズ */
	--font-size-xs: 1.1rem;
	--font-size-sm: 1.4rem;
	--font-size-base: 1.6rem; /* = 16px */
	--font-size-md: 1.8rem;
	--font-size-lg: 2.4rem;
	--font-size-xl: 3.2rem;

	/* フォントウェイト */
	--font-weight-normal: 500;	/* 通常（本文など） */
	--font-weight-bold: 700;	/* やや強調 */
	--font-weight-heavy: 900;	/* 強い強調 */

	/* 余白 */
    --spacing-xs: 1rem;
	--spacing-sm: 2rem;
	--spacing-md: 4rem;
	--spacing-lg: 8rem;

    /* 角丸（ボーダー半径） */
    --radius-sm: 4px;     /* 小 */
	--radius-default: 10px;     /* 標準 */
    --radius-btn: 80px;     /* btn */
    --radius-icon: 50%;     /* 丸のあしらい */
    --radius-hover: 10px;     /* ホバーした時 */
}

/* ダークモード対応（任意） */
/* @media (prefers-color-scheme: dark) {
	:root {
		--color-text: #ffffff;
		--color-bg: #121212;
		--color-border: #444;
	}
} */