/* =========================================================================
 * tokens.css — デザイントークン
 * 値はデザインカンプ（PC 1440 / SP 390）からピクセル抽出したものです。
 * 色・余白・角丸・影の変更は原則このファイルだけで行います。
 * ====================================================================== */

.lp-atsumeru {
	/* --- ブランドカラー ------------------------------------------------ */
	--c-navy: #073f8b;          /* メインネイビー */
	--c-navy-deep: #0b2454;     /* 見出し・帯 */
	--c-navy-dark: #012a68;     /* ヘッダー左端 */
	--c-navy-bright: #0050c6;   /* ヘッダー右端 */
	--c-blue: #0052cc;          /* 強調ブルー */
	--c-blue-mid: #1668c4;      /* フロー矢印など */
	--c-blue-light: #ddf2fc;    /* ライトブルー面 */
	--c-blue-pale: #e0f4ff;     /* セクション背景 */
	--c-blue-mist: #f7fbfd;     /* うっすら青い白 */
	--c-blue-hero-1: #e6f0fc;   /* ヒーロー背景（上） */
	--c-blue-hero-2: #d3e7fa;   /* ヒーロー背景（下） */
	--c-orange: #ff6b00;        /* CTA */
	--c-orange-dark: #e05d00;   /* CTA hover */
	--c-orange-darker: #c75200; /* CTA active */
	--c-pink: #dc506e;          /* 強調ピンク */
	--c-yellow: #f2d64b;        /* ヒーローの罫線 */
	--c-gray: #8b95a5;          /* 一般的な広告の流れ */
	--c-gray-light: #b7bfca;
	--c-white: #fff;

	/* --- テキスト ------------------------------------------------------ */
	--c-text: #16233c;
	--c-text-muted: #556789;
	--c-text-inverse: #fff;
	--c-border: #d5e3f2;
	--c-border-soft: #e7eef7;

	/* --- フォント ------------------------------------------------------ */
	--font-gothic:
		"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
		"Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
	--font-mincho:
		"Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho",
		"Noto Serif JP", serif;

	/* --- タイポグラフィ（PC基準・SPは lp.css で上書き） ---------------- */
	--fs-h1: 3.5rem;      /* 56px */
	--fs-h2: 2.5rem;      /* 40px */
	--fs-h3: 1.75rem;     /* 28px */
	--fs-h4: 1.25rem;     /* 20px */
	--fs-lead: 1.125rem;  /* 18px */
	--fs-body: 1rem;      /* 16px */
	--fs-sm: 0.875rem;    /* 14px */
	--fs-xs: 0.75rem;     /* 12px */

	--lh-tight: 1.35;
	--lh-heading: 1.5;
	--lh-body: 1.8;

	/* --- レイアウト ---------------------------------------------------- */
	--container-max: 1200px;
	--container-pad: 24px;

	--section-py: 96px;      /* セクション上下余白（PC） */
	--section-py-sp: 56px;   /* セクション上下余白（SP） */

	/* --- 角丸 ---------------------------------------------------------- */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-pill: 999px;

	/* --- 影 ------------------------------------------------------------ */
	--shadow-card: 0 6px 20px rgb(7 63 139 / 8%);
	--shadow-card-strong: 0 10px 30px rgb(7 63 139 / 14%);
	--shadow-cta: 0 6px 16px rgb(255 107 0 / 30%);

	/* --- モーション ---------------------------------------------------- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.2s;

	/* --- フォーカスリング ---------------------------------------------- */
	--focus-color: #0052cc;
	--focus-width: 3px;
	--focus-offset: 3px;
}

/* 1024〜1279px：3カラムを保ったまま、見出しだけ1段落とす */
@media (1024px <= width <= 1279px) {
	.lp-atsumeru {
		--fs-h1: 2.75rem;
		--fs-h2: 2.125rem;
	}
}

@media (width <= 1023px) {
	.lp-atsumeru {
		--fs-h1: 2.25rem;
		--fs-h2: 2rem;
		--fs-h3: 1.5rem;
		--container-pad: 20px;
	}
}

@media (width <= 767px) {
	.lp-atsumeru {
		--fs-h1: 2rem;      /* 32px */
		--fs-h2: 1.5rem;    /* 24px */
		--fs-h3: 1.25rem;   /* 20px */
		--fs-h4: 1.125rem;  /* 18px */
		--fs-lead: 1rem;
		--fs-body: 0.9375rem;
		--container-pad: 16px;
		--section-py: var(--section-py-sp);
	}
}