/* =========================================================================
 * Make it — パンくず（フェーズ2）
 *
 * TOP・LP（/lp-line/）・404 を除く全ページに表示（HANDOFF §4）。
 * 視覚的には控えめに（キャプション相当の小さな文字・区切りは「/」）。
 * ====================================================================== */

.mk-breadcrumbs {
	margin: 20px 0;
}

/* ヘッダー直下のパンくずバー（page.php 以外の専用テンプレート向け）。
   他セクション同様「全幅・背景色を持つ外枠」＋「中央寄せ・paddingを持つ
   .mk-container」の二重構造にする（HTML: .mk-breadcrumb-bar > .mk-container
   .mk-container--no-rail）。理由：
   - 背景を .mk-container 自身に付けると max-width で頭打ちになり、
     ビューポートが最大幅を超えた瞬間に左右の余白だけ地色（bg-hero＝
     ヘッダーと同色）が透けて見える。→ 背景は全幅の外枠側に持たせる。
   - 左右paddingを外枠側で計算し直すと、.mk-container の
     margin-inline:auto中央寄せとズレて本文（rail含む）と左端が合わない。
     → 中央寄せ・最大幅・左右paddingは .mk-container 側にそのまま委ねる。 */
.mk-breadcrumb-bar {
	background: var(--bg-alt);
}

.mk-breadcrumb-bar .mk-container {
	padding-block: 16px 0;
}

.mk-breadcrumb-bar .mk-breadcrumbs {
	margin: 0;
}

@media (min-width: 1024px) {
	.mk-breadcrumb-bar .mk-container {
		padding-block-start: 22px;
	}
}

.mk-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--c-text-caption);
}

.mk-breadcrumbs__item {
	display: flex;
	align-items: center;
}

.mk-breadcrumbs__item:not(:last-child)::after {
	content: "/";
	margin: 0 8px;
	color: var(--c-border);
}

.mk-breadcrumbs__item a {
	color: var(--c-text-caption);
	text-decoration: none;
}

.mk-breadcrumbs__item a:hover {
	color: var(--c-primary);
	text-decoration: underline;
}

.mk-breadcrumbs__item [aria-current="page"] {
	color: var(--c-text);
}