/* ==========================================================================
   かなさホーム（assets/css/kanasa/）— Layout の土台（本文の基本・かなさだけの値・中身の幅）
   - このフォルダの CSS は かなさホームのページだけで読み込む（inc/setup.php。layout → component → project の順）
   - SP は同じファイルの中で @media (max-width: 767px) に書く
   - ヘッダー・メニュー・フッター・固定バー・相談の帯は layout-*.css
   ========================================================================== */

/* ---------- かなさだけで使う値 ----------
   tokens.css にない値（Figma の角丸 28・32・40、セクションの上下の余白など）。tokens.css に足したら置き換える */
body.is-site-kanasa {
	--kanasa-gutter: 40px; /* 中身の左右の余白（1440px で中身 1200px・左右 120px になる） */
	--kanasa-section-py: 120px; /* セクションの上下。SP は 56px */
	--kanasa-head-gap: 56px; /* 見出しから中身まで。SP は 28px */
	--kanasa-radius-card: 28px; /* カード（Figma の角丸 28） */
	--kanasa-radius-box: 32px; /* 大きい箱（選ばれる理由のカード・支給額チェックの見本の箱） */
	--kanasa-radius-panel: 40px; /* 担当の紹介の板 */
	--kanasa-shadow-bubble: 0 8px 24px rgba(20, 38, 64, 0.08); /* ヒーローの吹き出し（Figma の影） */
	--focus-color: var(--kanasa-border-strong);

	font: var(--text-kanasa-body);
	font-synthesis-weight: none; /* 書体が届くまでの代わり（ヒラギノ丸ゴは1つの太さ）を Safari が太字に作ると字の幅が広がり、ヒーローの札が2行になって、届いたときに下がずれた。Zen Maru Gothic は 500・700・900 があるので、届いたあとの見た目は同じ（2026-10-06） */
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-canvas);
}

@media (max-width: 767px) {
	body.is-site-kanasa {
		--kanasa-gutter: 20px;
		--kanasa-section-py: 56px;
		--kanasa-head-gap: 28px;
	}
}

.l-main-kanasa {
	display: block;
}

/* 押せるもの（リンク・ボタン）の文字は、まわりの書体を引き継ぐ */
body.is-site-kanasa :is(button, input, select, textarea) {
	font-family: var(--font-kanasa);
}

/* ---------- セクションの中身の幅（PC 1200px・左右の余白 → SP 335px・左右 20px） ---------- */
.p-kanasa-section__inner {
	display: flex;
	flex-direction: column;
	gap: var(--kanasa-head-gap);
	align-items: center;
	width: 100%;
	max-width: calc(1200px + var(--kanasa-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--kanasa-gutter);
}