@charset "UTF-8";

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

	headline

-----------------------------------*/
#headline {
	width: 100%;
	height: 500px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px));
	position: relative;
}
#headline h1 {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #FFF;
	position: absolute;
	bottom: 45px;
	left: 6%;
}
#headline h1::before {
	font-size: 13px;
	font-family: var(--fEN);
	text-box: trim-both cap alphabetic;
	color: var(--mClr1);
	padding-left: 15px;
	display: block;
	margin-bottom: 10px;
}
#headline h1::after {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--mClr1);
	clip-path: polygon(0 0, 0% 100%, 100% 0);
	position: absolute;
	top: -2px;
	left: 0;
}
@media screen and (max-width: 840px) {
	#headline {
		height: 400px;
	}
}
@media screen and (max-width: 640px) {
	#headline {
		height: 250px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px));
	}
	#headline h1 {
		font-size: 24px;
		bottom: 30px;
		left: 5%;
	}
	#headline h1::before {
		font-size: 12px;
		padding-left: 12px;
	}
	#headline h1::after {
		width: 10px;
		height: 10px;
		top: -1px;
	}
}
/*-----------------------------------

	breadcrumbs

-----------------------------------*/
#breadcrumbs {
	padding: 25px 0;
}
#breadcrumbs ul {
	display: flex;
	font-size: 14px;
	letter-spacing: 0.03em;
}
#breadcrumbs ul li:not(:last-child)::after {
	content: "／";
	display: inline-block;
	padding: 0 1em;
}
#breadcrumbs ul li {
	color: #102657;
}
#breadcrumbs ul li a {
	color: #909090;
}
@media screen and (max-width: 640px) {
	#breadcrumbs {
		padding: 15px 0;
	}
	#breadcrumbs ul {
		font-size: 12px;
	}
	#breadcrumbs ul li:not(:last-child)::after {
		padding: 0 0.5em;
	}
}