/*
** Components
1. screen reader text
2. breadcrumb
*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal;
}

.breadcrumb {
	padding-block: 10px;
}

.breadcrumb > ol {
	margin-block: 0;
	padding-inline-start: 0;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}

.breadcrumb > ol > li > a,
.breadcrumb > ol > li > span {
	color: #767676;
}

.breadcrumb > ol > li + li::before {
	content: '/';
	padding-inline: 4px;
}

@media screen and (min-width: 980px) {

	.screen-reader-text-pc {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
		word-break: normal;
	}

	.breadcrumb > ol > li {
		line-height: 1.8333333333;
		font-size: 0.75rem;
	}
}

@media screen and (max-width: 979px) {

	.screen-reader-text-sp {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
		word-break: normal;
	}

	.breadcrumb > ol > li {
		line-height: 1.8;
		font-size: 0.625rem;
	}
}