/* ------------------------------------------------------------
   variables — デザイントークン
   コンセプト「森と余白」
     ・深い森の緑を基調に、余白の多い生成りの紙面
     ・アクセントはロゴの若草色 #98C213（既存のブランドマークから採色）
     ・写真を主役にし、文字は静かに
   ------------------------------------------------------------ */
:root {
	/* --- 色 --- */
	--forest-900: #16201a;   /* 最も濃い森。フッター・ヒーローの陰 */
	--forest-800: #1e2c22;   /* 濃色セクションの背景 */
	--forest-700: #2b3d2f;   /* 濃色セクションの面 */
	--moss:       #98c213;   /* ブランドの若草色（ロゴのマークと同色） */
	--moss-deep:  #7ba00f;   /* ホバー・線 */
	--moss-pale:  #eef4dc;   /* ごく淡い面 */

	--paper:      #faf9f4;   /* 基本の背景（生成り） */
	--paper-2:    #f2f0e6;   /* 交互に敷く面 */
	--white:      #ffffff;

	--ink:        #242821;   /* 本文 */
	--ink-soft:   #5d6359;   /* 補助テキスト */
	--ink-faint:  #8b9083;   /* キャプション */
	--line:       #e0ded2;   /* 罫線 */
	--line-dark:  rgba(255,255,255,.16);

	/* --- フォント --- */
	--font-sans:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--font-serif:   "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-display: "Cormorant Garamond", "Noto Serif JP", serif;

	/* --- 余白（「余白」がこのデザインの主役なので大きめに取る） --- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 88px;
	--sp-10: 120px;

	/* セクションの上下余白（SP → PC） */
	--section-y: 72px;

	/* --- 幅 --- */
	--container: 1140px;
	--narrow: 760px;
	--header-h: 64px;

	/* --- その他 --- */
	--radius: 2px;
	--shadow: 0 18px 50px rgba(22, 32, 26, .10);
	--ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
	:root {
		--section-y: 104px;
		--header-h: 80px;
	}
}

@media (min-width: 1024px) {
	:root {
		--section-y: 130px;
	}
}