@charset "UTF-8";

/* --------------------------------------------
BREAD CRUMB
--------------------------------------------- */
#breadcrumb ol{
	display : flex;
	flex-wrap : wrap;
}
#breadcrumb li:not( :last-child )::after{
	margin-inline : calc( 8 var( --remBase ) );
	content : ">";
}
#breadcrumb li , #breadcrumb a{
	color : #888;
}
@media screen and ( width <= 750px ){
	#breadcrumb{
		padding-block : calc( 24 var( --remBase ) );
	}
	#breadcrumb li{
		font-size : 1rem;
	}
}
@media screen and ( width > 750px ) , print{
	#breadcrumb{
		padding-bottom : calc( 48 var( --remBase ) );
	}
	#breadcrumb li{
		font-size : 1.1rem;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	background-color : #dee4ed;
}
#footer dl{
	display : grid;
	grid-auto-flow : column;
}
#footer dd + dt{
	margin-left : 1em;
}
#footer ul{
	display : grid;
	row-gap : calc( 16 var( --remBase ) );
}
#footer a{
	display : grid ! important;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	font-weight : 500;
}
#footer a::before{
	display : block;
	width : 100%;
	aspect-ratio : 5/9;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	filter : var( --filterBase );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	#footer{
		padding-inline : calc( 47.5 var( --viewportBase ) );
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
	}
	#footer > a{
		display : block;
		width : fit-content;
		margin-inline : auto;
	}
	#footer > a img{
		height : calc( 99 var( --remBase ) );
	}
	#footer .address{
		margin-top : calc( 32 var( --remBase ) );
		font-size : 1.3rem;
		line-height : 1.6;
		text-align : center;
	}
	#footer dl{
		justify-content : center;
	}
	#footer dt , #footer dd{
		font-size : 1.3rem;
		line-height : 1.6;
	}
	#footer ul{
		grid-template-columns : repeat( 2 , 50% );
		margin-top : calc( 32 var( --remBase ) );
	}
	#footer ul a{
		column-gap : calc( 6 * 100% / 145 );
		width : 100%;
		font-size : 1.3rem;
		line-height : 1.6;
	}
	#footer ul a::before{
		height : calc( 9 var( --remBase ) );
	}
	#footer .copyright{
		margin-top : calc( 32 var( --remBase ) );
		font-size : 1rem;
		line-height : 1.6;
		text-align : center;
	}
}
@media screen and ( width > 750px ) , print{
	#footer{
		display : grid;
		align-items : start;
	}
	#footer > a{
		grid-row : 1/3;
		grid-column : 2;
	}
	#footer .address{
		grid-row : 1;
		grid-column : 4;
		align-self : end;
		line-height : 1.6;
	}
	#footer dl{
		grid-row : 2;
		grid-column : 4;
		align-self : start;
	}
	#footer dt , #footer dd{
		line-height : 1.6;
	}
	#footer ul{
		grid-row : 1/3;
		grid-column : 6;
		align-self : center;
	}
	#footer ul a{
		line-height : 1.6;
	}
	#footer .copyright{
		grid-row : 6;
		grid-column : 2/7;
		line-height : 1.6;
		text-align : center;
	}
}
@media print , screen and ( 750px < width < 1440px ){
	#footer{
		grid-template-rows : auto auto calc( 32 * 100vw / 1440 ) auto;
		grid-template-columns : calc( 80 * 100% / 1440 ) auto calc( 58 * 100% / 1440 ) auto 1fr auto calc( 80 * 100% / 1440 );
		padding-block : calc( 40 * 100vw / 1440 );
	}
	#footer > a img{
		height : calc( 99 * 100vw / 1440 );
	}
	#footer .address{
		padding-top : calc( 13.5 * 100vw / 1440 );
		font-size : calc( 15 * 100vw / 1440 );
	}
	#footer dt , #footer dd{
		font-size : calc( 15 * 100vw / 1440 );
	}
	#footer ul{
		grid-template-columns : repeat( 3 , calc( 130 * 100vw / 1440 ) );
		column-gap : calc( 24 * 100vw / 1440 );
	}
	#footer ul a{
		column-gap : calc( 2 * 100vw / 1440 );
		font-size : calc( 15 * 100vw / 1440 );
	}
	#footer ul a::before{
		height : calc( 9 * 100vw / 1440 );
		margin-inline : calc( 5 * 100vw / 1440 );
	}
	#footer .copyright{
		font-size : calc( 15 * 100vw / 1440 );
	}
}
@media screen and ( width >= 1440px ){
	#footer{
		grid-template-rows : auto auto 32px auto;
		grid-template-columns : 80px auto 58px auto 1fr auto 80px;
		padding-block : 40px;
		padding-inline : calc( ( 100% - 1440px ) / 2 );
	}
	#footer > a img{
		height : 99px;
	}
	#footer .address{
		padding-top : 13.5px;
		font-size : 15px;
	}
	#footer dt , #footer dd{
		font-size : 15px;
	}
	#footer ul{
		grid-template-columns : repeat( 3 , 130px );
		column-gap : 24px;
	}
	#footer ul a{
		column-gap : 2px;
		font-size : 15px;
	}
	#footer ul a::before{
		height : 9px;
		margin-inline : 5px;
	}
	#footer .copyright{
		font-size : 15px;
	}
}
@media ( hover : hover ){
	#footer ul a:hover{
		color : var( --perple );
	}
	#footer ul a:hover::before{
		filter : var( --filterPerple );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footer ul a{
		transition : color var( --transitionBase );
	}
	#footer ul a::before{
		transition : filter var( --transitionBase );
	}
}