/* ------------------------------------------------------------
 * 共通スタイル（CSS変数・共通ユーティリティ）
 * ------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	/* カラー */
	--color-primary: #009cd1;
    --color-primary-rgb: 0 156 209;
    --color-primary-grad: #80C9D3;
	--color-primary-hover: #0087b5;
	--color-text: #222222;
	--color-white: #ffffff;
    --color-gold: #AE874B;

	/* フォント */
	--font-family-base: "Noto Sans JP", sans-serif;
	--font-family-en: "Poppins", "Noto Sans JP", sans-serif;
	--font-family-serif: "Crimson Text", "Times New Roman", serif;
    --font-family-script: "Qwitcher Grypen", cursive;

	/* レイアウト */
	--content-max-width: 1080px;
	--max-width-narrow: 960px;

	/* 背景グラデーション（共通） */
	--bg-gradient: linear-gradient(135deg, rgba(224, 230, 232, 0.8) 0%, rgba(250, 249, 232, 0.8) 50%, rgba(223, 239, 243, 0.8) 100%);
}

body {
	font-family: var(--font-family-base);
	color: var(--color-text);
}

/* 本文 p 共通 */
p {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}

@media (max-width: 767px) {
	p {
		font-size: 14px;
	}
}

/* ------------------------------------------------------------
 * 共通レイアウトラッパー
 * ------------------------------------------------------------ */
.l-content {
	width: 90%;
	max-width: var(--content-max-width);
	margin: 0 auto;
}

.l-content--narrow {
	max-width: var(--max-width-narrow);
}