@charset "UTF-8";

/* --------------------------------------------
FOOTER CONTACT
--------------------------------------------- */
#footerContact{
	position : relative;
	height : auto;
}
#footerContact .title01::before{
	color : color-mix( in sRGB , var( --primary ) 20% , transparent );
}
#footerContact video{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	width : 100%;
	height : 100%;
	pointer-events : none;
	filter : blur( 4 var( --remBase ) );
	opacity : .25;
	object-fit : cover;
}
#footerContact p{
	filter : blur( 4 var( --remBase ) );
}
#footerContact a{
	display : grid;
	place-items : center;
	font-weight : 600;
	color : white;
	background-color : color-mix( in sRGB , var( --primary ) 80% , transparent );
	border : solid calc( 2 var( --remBase ) ) color-mix( in sRGB , var( --primary ) 80% , transparent );
}
@media screen and ( width <= 750px ){
	#footerContact{
		padding-top : calc( 160 var( --remBase ) );
		padding-bottom : calc( 100 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
	}
	#footerContact video{
		opacity : .1;
	}
	#footerContact p{
		display : grid;
		align-items : start;
		justify-content : center;
		width : fit-content;
		margin-inline : auto;
		margin-top : calc( 40 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
		text-shadow : 0 0 calc( 4 var( --remBase ) ) rgb( 255 255 255 / .5 );
	}
	#footerContact a{
		width : fit-content;
		height : calc( 100 var( --remBase ) );
		padding-inline : 3.2em;
		margin-inline : auto;
		margin-top : calc( 64 var( --remBase ) );
		font-size : 2.4rem;
		border-radius : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#footerContact{
		height : calc( 400 var( --remBase ) );
		padding-top : calc( 100 var( --remBase ) );
		margin-top : calc( 120 var( --remBase ) );
	}
	#footerContact video{
		clip-path : inset( 0 0 0 0 round 33.3% 33.3% 0 0 );
	}
	#footerContact .box{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 80 var( --percentBase ) );
		align-items : center;
		justify-content : center;
		margin-top : calc( 64 var( --remBase ) );
	}
	#footerContact p{
		font-size : 2.4rem;
		line-height : 1.5;
	}
	#footerContact a{
		height : calc( 100 var( --remBase ) );
		padding-inline : 3.2em;
		font-size : 2.4rem;
		border-radius : calc( 24 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#footerContact a:hover{
		color : color-mix( in sRGB , var( --primary ) 80% , transparent );
		background-color : color-mix( in sRGB , white 60% , transparent );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footerContact a{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	--base : white;
	color : var( --base ) ! important;
	background-color : var( --secondary );
}
#footer a{
	color : var( --base ) ! important;
}
#footer .logo{
	display : block;
}
#footer .logo img{
	width : 100%;
	height : auto;
}
#footer .address{
	letter-spacing : .1em;
}
#footer .tel{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
}
#footer .tel dt , #footer .tel dd{
	line-height : 1.5;
	letter-spacing : .1em;
}
#footer .tel a{
	font-weight : 700;
}
#footer .map{
	display : block;
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-underline-offset : .5lh;
}
#footer ul{
	list-style : none;
}
#footer table{
	margin-bottom : 0;
}
#footer table th , #footer table td{
	text-align : center;
	background-color : transparent;
}
#footer table{
	width : 100%;
}
#footer table th , #footer table td{
	font-weight : 400;
	border : solid 1px var( --base );
}
#footer table thead th{
	text-align : center;
}
#footer table thead th , #footer table thead td{
	font-weight : 500;
	line-height : 1.5;
}
#footer table thead th{
	width : calc( 120 * 100% / 360 );
}
#footer table tbody th , #footer table tbody td{
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	#footer{
		padding-block : calc( 48 var( --remBase ) );
		padding-top : calc( 64 var( --remBase ) );
	}
	#footer .logo{
		width : fit-content;
		margin-inline : auto;
	}
	#footer .logo img{
		height : calc( 64 var( --remBase ) );
		margin-left : calc( -25 var( --remBase ) );
	}
	#footer .address{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
		text-align : center;
	}
	#footer .box{
		margin-top : calc( 12 var( --remBase ) );
	}
	#footer .map{
		display : block;
		width : fit-content;
		margin-inline : auto;
		font-size : 2.2rem;
		line-height : 1.5;
	}
	#footer .tel{
		justify-content : center;
		margin-top : calc( 32 var( --remBase ) );
	}
	#footer .tel dt{
		font-size : 2.4rem;
	}
	#footer .tel dd{
		font-size : 3.2rem;
	}
	#footer nav{
		margin-top : calc( 64 var( --remBase ) );
	}
	#footer nav ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 24 var( --percentBase ) );
		justify-content : center;
	}
	#footer nav a{
		font-size : 2.4rem;
		font-weight : 500;
		line-height : 1.5;
	}
	#footer table{
		width : calc( 640 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 48 var( --remBase ) );
	}
	#footer table thead th , #footer table thead td{
		padding-block : calc( 20 var( --remBase ) );
		font-size : 2.2rem;
	}
	#footer table thead th{
		width : calc( 200 * 100% / 640 );
	}
	#footer table tbody th , #footer table tbody td{
		padding-block : calc( 20 var( --remBase ) );
		font-size : 2.2rem;
	}
	#footer #copyright{
		margin-top : calc( 48 var( --remBase ) );
		font-size : 2.2rem;
		font-weight : 300;
		line-height : 1.4;
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	#footer{
		display : grid;
		grid-template-columns : calc( 360 var( --percentBase ) ) calc( 320 var( --percentBase ) ) auto;
		column-gap : calc( 48 var( --percentBase ) );
		align-items : center;
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#footer .address{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.5rem;
		line-height : 1.5;
	}
	#footer .box{
		display : grid;
		grid-template-columns : auto auto;
		align-items : baseline;
		justify-content : space-between;
		margin-top : calc( 16 var( --remBase ) );
	}
	#footer .tel{
		justify-content : end;
	}
	#footer .tel dt{
		font-size : 1.6rem;
	}
	#footer .tel dd{
		font-size : 2rem;
	}
	#footer .map{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#footer nav ul{
		columns : 2;
	}
	#footer nav li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
	#footer nav a{
		font-size : 1.5rem;
		font-weight : 500;
		line-height : 1.5;
	}
	#footer table thead th , #footer table thead td{
		padding-block : calc( 16 var( --remBase ) );
		font-size : 1.4rem;
	}
	#footer table thead th{
		width : calc( 120 * 100% / 464 );
	}
	#footer table tbody th , #footer table tbody td{
		padding-block : calc( 16 var( --remBase ) );
		font-size : 1.4rem;
	}
}