@charset "UTF-8";

/*--------------------------------------------
BREAD CRUMBS
---------------------------------------------*/

#breadcrumbs{
	display : flex;
	flex-wrap : wrap;
}

#breadcrumbs a:after{
	content : "　＞　";
	white-space : pre;
}

@media screen and (max-width: 750px){
	#breadcrumbs{
		background-color : #e5e5e5;
		padding-top : calc( ( 20 - 2 ) * 100vw / 750 );
		padding-bottom : calc( ( 20 - 2 ) * 100vw / 750 );
		padding-left : calc( 40 * 100% / 750 );
		padding-right : calc( 40 * 100% / 750 );
	}
	#breadcrumbs li{
		font-size : 2rem;
		line-height : 1.2;
	}
}

@media print,screen and (min-width: 751px){
	#breadcrumbs{
		padding-left : calc( ( 100% - 1160px ) / 2 );
		padding-right : calc( ( 100% - 1160px ) / 2 );
		padding-top : calc( 22px - 1.6px );
		padding-bottom : calc( 20px - 1.6px );
	}
	#breadcrumbs li{
		font-size : 1.6rem;
		line-height : 1.2;
	}
}

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

#title{
	background-color : var(--primary);
	color : #e5e5e5;
	display : flex;
	flex-direction : column;
}

#title h1 , #title h2{
	font-weight : 700;
}

@media screen and (max-width: 750px){
	#title{
		height : calc( 150 * 100vw / 750 );
		padding-left : calc( 32 * 100% / 750 );
		padding-right : calc( 32 * 100% / 750 );
		justify-content : center;
	}
	#title h1 , #title h2{
		font-size : 4rem;
		line-height : 1.2;
	}
}

@media print,screen and (min-width: 751px){
	#title{
        justify-content: center;
		width : 1200px;
		margin-left : auto;
		margin-right : auto;
		height : 150px;
		padding-left : 32px;
		padding-right : 32px;
		row-gap : 5px;
        padding-top: 5px;
	}
	#title h1 , #title h2{
		font-size : 2.8rem;
		line-height : 1.2;
	}
	#title p{
		font-size : 1.4rem;
		line-height : 1.2;
	}
}

@media screen and (max-width: 750px){
	#title + #columns{
		margin-top : calc( 24 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#title + #columns{
		margin-top : 20px;
	}
}

#title02{
	background-color : var(--primary);
	color : #e5e5e5;
	display : grid;
	place-items : center start;
}

@media screen and (max-width: 750px){
	#title02{
		height : calc( 150 * 100vw / 750 );
	}
	#title02{
		font-size : 4rem;
		line-height : 1.2;
	}
	#title02{
		padding-left : calc( 28 * 100% / 750 );
		padding-right : calc( 28 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#title02{
		padding-left : 18px;
		padding-right : 18px;
		height : 150px;
	}
	#title02{
		font-size : 2.8rem;
		line-height : 1.2;
	}
	#title02{
		width : 1200px;
		margin-left : auto;
		margin-right : auto;
	}
}