/*
 * breadcrumbs.css
 * template-parts/breadcrumbs.php がラップする Slim SEO のパンくず出力用。
 * 内側のクラス（.breadcrumb 等）はプラグインが固定で出しリネームできないため、c-
 * 接頭辞規約はラッパー（.c-breadcrumbs）にだけ適用し、内側はそのまま対象にする。
 */
.c-breadcrumbs {
	margin-block: 1em 2em;
	font-size: 0.8125rem;
	max-width: var(--width-container);
	margin-inline: auto;


	.breadcrumbs {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4em;
		justify-content: flex-end;
	}

	.breadcrumb {
		color: #A9A9A9;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.c-breadcrumbs .breadcrumbs__separator {
	display: inline-flex;
	align-items: center;

	&::before {
		content: '';
		display: inline-block;
		width: 1.9375rem;
		height: 1.125px;
		background-color: #b1b1b1;
	}
}

.c-breadcrumbs .breadcrumb--last {
	display: inline-block;
	max-width: 16em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: bottom;
}

@media (max-width: 768px) {
	.c-breadcrumbs .breadcrumb--last {
		max-width: 9em;
	}
}