/**
 * c-breadcrumb
 * 共通パンくずリスト（コラム機能で新規追加）。
 *
 * 手書き。既存ページの p-job-archive__sec1 等（自動変換由来のパンくず）と
 * 見た目のトンマナを揃えつつ、コラム系ページで使い回せる独立部品にした。
 */
.c-breadcrumb {
	/*
	 * ★ base.css の .an-box は既定で `flex-direction: column` を持つ
	 * （Studioの共通「box」プリミティブの初期値）。この要素は class="an-box c-breadcrumb"
	 * と併用しているため、ここで flex-direction を明示的に上書きしないと
	 * an-box 側の column が生き残り、パンくずの各項目が横並びにならず
	 * 縦に積み上がって表示される（実際にこの不具合が発生した）。
	 * 同じ理由で align-items も明示し直している。
	 */
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	width: 1280px;
	max-width: 100%;
	margin: 0 auto;
	padding: 16px 40px;
}
.c-breadcrumb__home,
.c-breadcrumb__sep {
	font-size: 18px;
	color: var(--an-color-text);
	opacity: 0.55;
}
.c-breadcrumb__home {
	display: flex;
}
.c-breadcrumb__link {
	font-family: var(--an-font-base);
	font-size: 14px;
	color: var(--an-color-text);
	opacity: 0.7;
	transition: opacity 0.2s, color 0.2s;
}
.c-breadcrumb__link:hover {
	opacity: 1;
	color: var(--an-color-brand);
}
.c-breadcrumb__current {
	font-family: var(--an-font-base);
	font-size: 14px;
	color: var(--an-color-brand);
	font-weight: 500;
}

@media (max-width: 840px) {
	.c-breadcrumb {
		padding: 16px 24px;
	}
}

@media (max-width: 540px) {
	.c-breadcrumb {
		padding: 14px 24px;
		gap: 6px 10px;
	}
	.c-breadcrumb__link,
	.c-breadcrumb__current {
		font-size: 13px;
	}
}