/* ===============================
   page-breadcrumb: 下層ページ共通パンくず
   =============================== */

.page-breadcrumb__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	color: var(--color-sub);
	font-size: var(--fs-caption);
	line-height: var(--lh-body);
	letter-spacing: 0.08em;
}

.page-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.page-breadcrumb__item + .page-breadcrumb__item::before {
	content: "";
	width: var(--space-2);
	height: var(--space-2);
	border-top: 1px solid var(--color-main);
	border-right: 1px solid var(--color-main);
	transform: rotate(45deg);
}

.page-breadcrumb__link {
	color: inherit;
	text-decoration: none;
	text-underline-offset: var(--space-1);
}

.page-breadcrumb__link:hover {
	text-decoration: underline;
}

.page-breadcrumb--hero {
	position: absolute;
	z-index: 5;
	top: var(--space-3);
	left: 0;
	width: 100%;
	padding-inline: var(--photo-fv-inline-padding, var(--container-gutter-mobile));
}

.page-breadcrumb--hero .page-breadcrumb__list {
	max-width: 100%;
}

@media (min-width: 768px) {
	.page-breadcrumb__list {
		gap: var(--space-3);
		font-size: var(--fs-body-sm);
	}

	.page-breadcrumb__item {
		gap: var(--space-3);
	}

	.page-breadcrumb--hero {
		top: calc(var(--space-10) - var(--space-2));
		padding-inline: calc(
			var(--photo-fv-inline-padding, var(--container-gutter)) + var(--space-8)
		);
	}

	.page-breadcrumb--hero::after {
		display: block;
		width: var(--space-9);
		margin-top: var(--space-4);
		border-top: 1px solid var(--color-main);
		content: "";
	}
}