@charset "UTF-8";
/*-----------------------------------
	headline
-----------------------------------*/
#headline {
	width: 100vw;
	height: 480px;
	background: url(../img/common/headline_bg.webp) no-repeat calc(50% + 235px) bottom/1160px;
	position: relative;
}
#headline h1 {
	font: 600 5rem/1 var(--fJA);
	letter-spacing: 0.05em;
	color: var(--tClr2);
	position: absolute;
	top: 50%;
	left: calc(50vw - min(650px,47.5%));
	transform: translateY(-50%);
}
@media screen and (max-width: 840px) {
	#headline {
		height: 360px;
		background: url(../img/common/headline_bg.webp) no-repeat calc(50% + 193px) bottom/951px;
	}
	#headline h1 {
		font-size: 3.8rem;
	}
}
@media screen and (max-width: 640px) {
	#headline {
		height: 200px;
		background: url(../img/common/headline_bg.webp) no-repeat calc(50% + 99px) bottom/487px;
	}
	#headline h1 {
		font-size: 2.3rem;
		letter-spacing: 0.03em;
	}
}
/*-----------------------------------
	breadcrumb
-----------------------------------*/
#breadcrumb {
	padding: 20px 0;
	margin-bottom: 100px;
}
#breadcrumb ul {
	display: flex;
	justify-content: right;
	gap: 0 30px;
}
#breadcrumb ul li {
	color: var(--mClr1);
	font: 400 1.4rem/1 var(--fJA);
	position: relative;
}
#breadcrumb ul li:not(:last-child)::after {
	content: "";
	width: 7px;
	height: 8px;
	background: var(--mClr1);
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	position: absolute;
	left: calc(100% + 12px);
	top: calc(50% - 4px);
}
#breadcrumb ul li a {
	color: var(--tClr2);
}
@media screen and (max-width: 640px) {
	#breadcrumb {
		padding: 10px 0;
		margin-bottom: 50px;
	}
	#breadcrumb ul {
		gap: 0 26px;
	}
	#breadcrumb ul li {
		font-size: 1.2rem;
	}
	#breadcrumb ul li:not(:last-child)::after {
		width: 6px;
		height: 6px;
		left: calc(100% + 10px);
		top: calc(50% - 3px);
	}
}