@charset "UTF-8";

/*--------------------------------------------
MAIN TITLE
---------------------------------------------*/

.maintitle{
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : column;
	font-weight : 500;
	border-bottom : 1px solid var(--border);
}

@media screen and (max-width: 768px){
	.maintitle{
		font-size : 3.6rem;
		height : calc( 200 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	.maintitle{
		font-size : 2.8rem;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	.maintitle{
		height : calc( 240 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	.maintitle{
		height : 240px;
	}
}

/*--------------------------------------------
BREADCRUMBS
---------------------------------------------*/

#breadcrumbs{
	background-color : #efebe3;
	border-top : 1px solid var(--border);
	border-bottom : 1px solid var(--border);
}

#breadcrumbs ol{
	display : grid;
	grid-auto-flow : column;
	justify-content : start;
}

#breadcrumbs li{
	display : grid;
	align-items : center;
	grid-auto-flow : column;
	justify-content : start;
}

#breadcrumbs li + li:before{
	content : "/";
	margin-left : .5em;
	margin-right : .5em;
}

@media screen and (max-width: 768px){
	#breadcrumbs ol{
		padding-top : calc( 16 * 100vw / 768 );
		padding-bottom : calc( 16 * 100vw / 768 );
	}
	#breadcrumbs li{
		font-size : 2.2rem;
	}
}

@media print,screen and (min-width: 769px){
	#breadcrumbs li{
		font-size : 1.6rem;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#breadcrumbs ol{
		padding-top : calc( 16 * 100vw / 1280 );
		padding-bottom : calc( 16 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	#breadcrumbs{
		padding-left : 20px;
		padding-right : 20px;
	}
	#breadcrumbs ol{
		padding-top : 16px;
		padding-bottom : 16px;
	}
}