/*////////////////////////////////////////////////////////////////////////////*/

/*! breadcrumbs.css */

/*////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	ぱんくず

------------------------------------------------------------------------------*/

.breadcrumbs-box {
	--text-color-rgb: var(--site-footer-text-color-rgb, var(--text-color-p-rgb, 51 51 51));
	--text-color: rgb(var(--text-color-rgb) / var(--text-color-a, 1));
	--current-text-color-rgb: rgb(var(--site-footer-text-color-rgb, var(--text-color-h-rgb, 0 0 0)));
	--current-text-color: rgb(var(--current-text-color-rgb) / var(--current-text-color-a, 1));
	--separator-color-rgb: var(--text-color-rgb);
	--separator-color: rgb(var(--separator-color-rgb) / var(--separator-color-a, .5));
	/**/
	overflow: hidden;
	max-width: 100%;
	max-height: 3.5em;
	height: 1.5em;
	margin: 1em 0 1em 1.5em;
}

.breadcrumbs {
	display: flex;
	align-items: center;
	/**/
	list-style: none;
	height: 5em;/* ※ピッタリだとスクロールバーの上端が少し見えてしまう */
	margin: 0;
	padding: 0;
	font-size: 75%;
	color: var(--text-color);
	/**/
	font-feature-settings: "palt";
	/**/
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.breadcrumb {
	display: flex;
	align-items: center;
	/**/
	align-self: flex-start;
	position: relative;
	margin: 0;
	padding: 0;
}

.breadcrumb::after {
	content: '';
	width: .4em;
	height: .4em;
	margin: .1em .2em 0 0;
	border-top: 1px solid var(--separator-color);
	border-right: 1px solid var(--separator-color);
	transform: rotate(45deg);
}

.breadcrumb-inner {
	display: flex;
	align-items: center;
	/**/
	position: relative;
	padding: 0 .5em;/* 下線を出すため、上下余白をアンカーテキストの行高さに充てた */
	line-height: 2;/* 下線を出すため 2 に変更 */
	/**/
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.breadcrumb-inner > .breadcrumb-link:first-child {
	margin-left: -.5em !important;
}

.breadcrumb-inner > .breadcrumb-link:last-child {
	margin-right: -.5em !important;
}

.breadcrumb-link {
	display: flex;
	align-items: center;
	/**/
	padding: 0 .5em;
	color: var(--text-color);
	fill: var(--text-color);
	/**/
	text-underline-offset: .2em;
	text-decoration: none;
	transition: color .2s ease-out;
}

.breadcrumb.current {
	padding-right: 0;
}

.breadcrumb.current::after {
	display: none;
}

.breadcrumb.current .breadcrumb-link {
	cursor: default;
	color: var(--current-text-color);
	fill: var(--current-text-color);
}

.breadcrumb .icon {
	flex: none;
	margin-right: .3em;
}

.breadcrumb svg {
	display: block;
	aspect-ratio: var(--w, 1) / var(--h, 1);
	width: auto;
	height: 1em;
}

.breadcrumb .sep {
	margin: 0 .3em;
}

/**/

@media (any-hover: hover) {

	.breadcrumb:not(.current) .breadcrumb-link:hover {
		text-decoration: underline;
		color: var(--text-color);
	}

/**/}
@media (any-hover: none) {

	.breadcrumb:not(.current) .breadcrumb-link:active {
		text-decoration: underline;
		color: var(--text-color);
	}

/**/}