/*
 * 下層ページ共通の見出し帯。
 * パンくず＋英字ラベル＋日本語見出し＋全幅罫線を一つの定義にまとめ、
 * ページ固有CSSでは再定義しない。数値差はvariantで表現する。
 */
.page-hero {
	--page-hero-pad-top: 122px;
	--page-hero-pad-bottom: 120px;
	--page-hero-title-gap: 54px;
	--page-hero-en-size: 24px;
	--page-hero-title-size: 42px;

	padding-top: var(--page-hero-pad-top);
	padding-bottom: var(--page-hero-pad-bottom);
	border-bottom: 1px solid rgb(255 255 255 / 45%);
}

.page-hero__title {
	margin-top: var(--page-hero-title-gap);
}

.page-hero__title > p,
.page-hero__title > h1 {
	margin: 0;
}

.page-hero__en {
	color: var(--color-accent);
	font-family: var(--font-en);
	font-size: var(--page-hero-en-size);
	font-weight: 600;
	line-height: 1.4;
}

.page-hero__title > h1 {
	margin-top: 4px;
	font-size: var(--page-hero-title-size);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

/* 一覧ページの説明文（インタビューのみFigmaに存在）。 */
.page-hero__title > .page-hero__lead {
	margin: 12px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

/*
 * お問い合わせはFigmaフレーム側の数値がアバウトページと異なる（罫線y428 / y419、
 * SPの文字サイズ）。原本確認までは検証済みの見た目をvariantで維持する。
 */
.page-hero--contact {
	--page-hero-pad-top: 112px;
	--page-hero-pad-bottom: 140px;
}

/* 資料ダウンロード一覧のみ全幅罫線がy428（他の一覧はy419／y474）。 */
.page-hero--download {
	--page-hero-pad-bottom: 130px;
}

/* お問い合わせ完了画面（Figma PC 15:3743 / SP 15:8950）。PCの全幅罫線はy428。 */
.page-hero--thanks {
	--page-hero-pad-bottom: 130px;
}

@media (max-width: 899px) {
	.page-hero {
		--page-hero-pad-top: 140px;
		--page-hero-pad-bottom: 40px;
		--page-hero-title-gap: 0px;
		--page-hero-en-size: 14px;
		--page-hero-title-size: 24px;
	}

	/* SPデザインにはパンくずがないため非表示。 */
	.page-hero .breadcrumb {
		display: none;
	}

	/* 一覧・インサイトページのSPフレームは上余白が100px（アバウトは140px）。 */
	.page-hero--archive,
	.page-hero--download,
	.page-hero--insights {
		--page-hero-pad-top: 100px;
		--page-hero-pad-bottom: 40px;
	}

	/* 完了画面のSPは上余白100px・下余白は既定の40px。パンくずも出さない。 */
	.page-hero--thanks {
		--page-hero-pad-top: 100px;
	}

	.page-hero__title > .page-hero__lead {
		margin-top: 24px;
		font-size: 16px;
		font-weight: 400;
	}

	.page-hero--contact {
		--page-hero-pad-top: 88px;
		--page-hero-pad-bottom: 56px;
		--page-hero-title-gap: 40px;
		--page-hero-en-size: 16px;
		--page-hero-title-size: 30px;
	}

	.page-hero--contact .breadcrumb {
		display: flex;
		font-size: 12px;
	}
}