@charset "UTF-8";
/*
 * slunbers デザイントークン
 *
 * 出典:
 *   claude_code_handoff.md 第3章（色・フォント・角丸・影・イージング）
 *   handoff/TOP-PC-レイアウト仕様書.md 第1〜3章（PC の寸法）
 *   handoff/TOP-SP-レイアウト仕様書.md 第1〜2章（SP の寸法差分）
 *
 * ブレークポイント:
 *   JIN:R 本体は 551/552（SP↔タブレット）、781/782（タブレット↔PC）で切り替わる。
 *   カラムブロックの縦積みなど JIN:R 側のレイアウト変化と揃えるため、
 *   子テーマの「SP 寸法」は max-width: 781px で適用する。
 *   （デザインカンプは SP=375px / PC=1280px で描かれているが、その中間は SP 寸法で扱う）
 */

:root {
	/* ---- 色 ---- */
	--c-text: #2B2B2B;
	--c-muted: #6F6F6F;
	--c-accent: #C4362A;
	--c-accent-hover: #B02F24;
	--c-accent-soft: #FBECE9;
	--c-cream: #F7F3EC;
	--c-line: #E5E0D8;
	--c-photo: #E9E2D8;
	--c-white: #FFFFFF;

	/* ---- フォント ---- */
	--f-ja: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
	--f-en: 'Josefin Sans', 'Zen Kaku Gothic New', sans-serif;

	/* ---- 角丸 ---- */
	--r-pill: 999px;
	--r-card-lg: 28px;   /* こだわりカード */
	--r-card: 24px;      /* 商品・おすすめタイル */
	--r-panel: 20px;     /* 吹き出し・表・写真枠 */
	--r-ig: 16px;
	--r-contact: 48px;
	--r-input: 12px;     /* フォーム部品 */

	/* ---- 影 ---- */
	--shadow: 0 10px 30px rgba(120, 90, 60, .07);
	--shadow-hover: 0 18px 40px rgba(120, 90, 60, .12);
	--shadow-btn: 0 8px 24px rgba(70, 32, 24, .25);

	/* ---- 動き ---- */
	--ease: cubic-bezier(.2, .6, .2, 1);
	--dur: .8s;
	--dur-hover: .3s;

	/* ---- 幅・余白 ---- */
	--w-content: 1080px;     /* デザインの本文幅。JIN:R の .t--main-width は 1120px */
	--gutter: 24px;          /* SP の左右余白 */
	--pad-white: 120px;      /* 白セクション 上下 */
	--pad-cream: 150px;      /* 生成りセクション 上下（波形 64px 分を含む） */

	/* ---- 波形 ---- */
	--wave-h: 64px;          /* 生成り帯の上下 */
	--wave-h-mv: 96px;       /* MV 下端 */

	/* ---- 見出し ---- */
	--fs-h1: 48px;           /* MV */
	--fs-h2: 34px;
	--fs-h3-card: 22px;      /* こだわりカード */
	--fs-chip: 12px;
	--pad-chip: 6px 16px;
	--swash-w: 64px;         /* h2-swash.svg */
	--swash-h: 12px;

	/* ---- 本文 ---- */
	--fs-body: 16px;
	--lh-body: 1.9;
	--fs-small: 13px;

	/* ---- ヘッダー・ロゴ ---- */
	--h-header: 84px;
	--fs-logo: 28px;

	/* ---- ボタン ---- */
	--h-btn-primary: 58px;
	--h-btn-secondary: 56px;
	--w-btn-min: 268px;

	/* ---- その他 ---- */
	--size-num-circle: 42px; /* こだわりの赤い丸番号 */
}

@media (max-width: 781px) {
	:root {
		/* 角丸 */
		--r-card-lg: 24px;
		--r-card: 20px;
		--r-panel: 18px;
		--r-contact: 32px;

		/* 幅・余白 */
		--pad-white: 56px;
		--pad-cream: 96px;

		/* 波形 */
		--wave-h: 48px;
		--wave-h-mv: 64px;

		/* 見出し */
		--fs-h1: 30px;
		--fs-h2: 26px;
		--fs-h3-card: 19px;
		--fs-chip: 11px;
		--pad-chip: 5px 14px;
		--swash-w: 56px;
		--swash-h: 10px;

		/* 本文 */
		--fs-body: 15px;
		--lh-body: 2.1;

		/* ヘッダー・ロゴ */
		--h-header: 60px;
		--fs-logo: 22px;

		/* ボタン（SP は全幅。最小幅は解除） */
		--h-btn-primary: 52px;
		--h-btn-secondary: 50px;
		--w-btn-min: 0px;

		/* その他 */
		--size-num-circle: 36px;
	}
}