/* ==========================================================================
   かなさホーム — 下層ページの見出し（template-parts/kanasa/page-header.php）
   - PC: Figma お問い合わせ 179:13154 の頭（上 48px・パンくずは左 → 40px → h1（Kanasa/PC/H1 40px 緑・中央）→ 16px → リード（Body 17px・中央））
         パンくずなし（--no-breadcrumb）は支給額チェック 65:2593 の頭（上 56px・あいだ 12px・下 40px）
         コラム一覧（48px ずつ）は project-column.css で上書き
   - SP: Figma c-page-header-kanasa-sp 234:694（クリーム地・左ぞろえ。上 4px・下 32px・あいだ 12px。h1 は Kanasa/SP/H1 26px）
   - --lead-l: リードを Kanasa/PC/Lead 20px（SP 16px）に（支給額チェック）
   ========================================================================== */

.c-page-header-kanasa {
	background: var(--kanasa-bg-canvas);
}

.c-page-header-kanasa__inner {
	width: 100%;
	max-width: calc(1200px + var(--kanasa-gutter) * 2);
	margin-inline: auto;
	padding: var(--space-3xl) var(--kanasa-gutter) 0;
}

.c-page-header-kanasa__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
	margin-top: var(--space-2xl);
	text-align: center;
}

.c-page-header-kanasa--no-breadcrumb .c-page-header-kanasa__inner {
	padding: 56px var(--kanasa-gutter) var(--space-2xl); /* Figma 65:2593 の上の余白（トークンにない値） */
}

.c-page-header-kanasa--no-breadcrumb .c-page-header-kanasa__body {
	gap: var(--space-sm);
	margin-top: 0;
}

.c-page-header-kanasa__tag {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	padding: 6px var(--space-md);
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	text-align: left;
	background: var(--kanasa-bg-yellow);
	border-radius: var(--radius-full);
}

.c-page-header-kanasa__tag-icon {
	width: 16px;
	height: 16px;
}

.c-page-header-kanasa__title {
	font: var(--text-kanasa-h1);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.c-page-header-kanasa__lead {
	font: var(--text-kanasa-body);
	letter-spacing: var(--ls-kanasa);
}

.c-page-header-kanasa--lead-l .c-page-header-kanasa__lead {
	font: var(--text-kanasa-lead);
}

@media (max-width: 767px) {
	.c-page-header-kanasa__inner {
		padding: var(--space-2xs) var(--kanasa-gutter) var(--space-2xl);
	}

	.c-page-header-kanasa__body {
		gap: var(--space-sm);
		align-items: flex-start;
		margin-top: var(--space-sm);
		text-align: left;
	}

	.c-page-header-kanasa--no-breadcrumb .c-page-header-kanasa__inner {
		padding: var(--space-xs) var(--kanasa-gutter) var(--space-2xl);
	}

	.c-page-header-kanasa--no-breadcrumb .c-page-header-kanasa__body {
		margin-top: 0;
	}

	/* リード：書体が届いたときに行の数が変わらないように、字詰め（カーニング）をしない（2026-10-06）。
	   SP のリードは改行を外して詰める（common/text-wrap.js の is-text-fill）。書体が届くまでの代わりのヒラギノ丸ゴは、かなを少し詰めるので、
	   320px のコラムの一覧で「…まとめています。」が2行に入り、Zen Maru Gothic が届くと3行になって、下の絞り込みとカードが 30px 下がっていた。
	   Zen Maru Gothic はかなの字詰めがないので、届いたあとの見た目は変わらない */
	.c-page-header-kanasa__lead {
		font-kerning: none;
	}

	.c-page-header-kanasa__tag {
		padding: var(--space-xs) var(--space-md) var(--space-xs) 14px;
		font: var(--text-kanasa-body-s);
		border-radius: var(--radius-lg);
	}
}