@charset "UTF-8";
section.center picture{
	display : inline-block;
}
@media print , screen and ( width > 768px ){
	section.center picture img{
		width : 400px;
		height : auto;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	position : relative;
	color : white;
}
#footer::before , #footer::after{
	position : absolute;
	inset : 0;
	display : block;
	font-size : 0;
	content : "";
}
#footer::before{
	z-index : -2;
	background : linear-gradient( to bottom , #cfae67 0% , #b08a37 100% );
}
#footer::after{
	z-index : -1;
	background : image-set( url( "../images/footer/bg.avif" ) type( "image/avif" ) , url( "../images/footer/bg.webp" ) type( "image/webp" ) ) center top  repeat;
}
#footer .logo{
	display : block;
	width : fit-content;
	filter : var( --filterWhite );
}
#footer p{
	line-height : 1.2;
	text-align : center;
}
@media screen and ( width <= 768px ){
	#footer{
		padding-top : calc( 64 var( --remBase ) );
		padding-bottom : calc( ( 90 + 64 ) var( --remBase ) );
	}
	#footer .logo{
		margin-inline : auto;
	}
	#footer .logo img{
		height : calc( 160 var( --remBase ) );
	}
	#footer p{
		margin-top : calc( 48 var( --remBase ) );
		font-size : 2rem;
	}
}
@media print , screen and ( width > 768px ){
	#footer{
		display : grid;
		grid-template-rows : auto auto auto;
		grid-template-columns : auto auto;
		justify-content : space-between;
		padding-block : calc( 24 var( --remBase ) );
	}
	#footer .logo{
		grid-row : 1;
		grid-column : 1;
	}
	#footer .logo img{
		height : calc( 80 var( --remBase ) );
	}
	#footer .contacts{
		display : grid;
		grid-row : 1;
		grid-column : 2;
		grid-auto-flow : column;
		column-gap : calc( 20 var( --remBase ) );
		align-items : center;
		justify-content : end;
	}
	#footer dl{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 8 var( --remBase ) );
		align-items : center;
		justify-content : end;
	}
	#footer dt{
		padding-block : calc( 8 var( --remBase ) );
		padding-inline : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
		font-weight : 500;
		line-height : 1.2;
		color : transparent;
		color : var( --gold );
		background-color : color-mix( in sRGB , white 95% , transparent );
		border-radius : calc( 8 var( --remBase ) );
	}
	#footer dd a{
		font-size : 3.2rem;
		font-weight : 600;
		color : white;
		letter-spacing : .1em;
	}
	#footer .contact{
		position : relative;
		display : grid;
		align-items : center;
		width : calc( 120 var( --remBase ) );
		height : calc( 72 var( --remBase ) );
		padding-left : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
		color : white;
		background-color : var( --red );
		border-radius : calc( 8 var( --remBase ) );
		outline : solid 1px var( --red );
		outline-offset : -1px;
	}
	#footer .contact::before{
		position : absolute;
		bottom : calc( 12 var( --remBase ) );
		right : calc( 8 * 100% / 112 );
		display : block;
		width : auto;
		height : calc( 24 var( --remBase ) );
		aspect-ratio : 41/30;
		font-size : 0;
		content : "";
		background-image : url( "../images/ui/icon/email01.svg" );
		filter : var( --filterWhite );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
		rotate : -25deg;
	}
	#footer .contact::after{
		position : absolute;
		top : calc( 4 var( --remBase ) );
		left : calc( 4 * 100% / 112 );
		z-index : -1;
		width : calc( 104 var( --percentBase ) );
		width : calc( 104 * 100% / 112 );
		height : calc( 64 var( --remBase ) );

		/* content:""; */
		font-size : 0;
		border : solid 1px white;
		border-radius : calc( 8 var( --remBase ) );
	}
	#footer ul{
		display : grid;
		grid-row : 2;
		grid-column : 1/-1;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		margin-top : calc( 28 var( --remBase ) );
	}
	#footer ul li + li::before{
		font-size : 1.6rem;
		line-height : 1.2;
		content : "|";
	}
	#footer ul a{
		padding-inline : 1em;
		font-size : 1.6rem;
		line-height : 1.2;
		color : white;
		-webkit-text-decoration : underline;
		text-decoration : underline;
		text-decoration-color : transparent;
		text-underline-offset : .4em;
	}
	#footer p{
		grid-row : 3;
		grid-column : 1/-1;
		margin-top : calc( 32 var( --remBase ) );
		font-size : 1.6rem;
	}
}
@media ( hover : hover ){
	#footer ul a:hover{
		text-decoration-color : color-mix( in sRGB , white 80% , transparent );
	}
	#footer .contact:hover{
		color : var( --red );
		background-color : color-mix( in sRGB , white 80% , transparent );
	}
	#footer .contact:hover::before{
		filter : var( --filterRed );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footer ul a{
		transition : text-decoration var( --transitionBase );
	}
	#footer .contact{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
	}
	#footer .contact::before{
		transition : filter var( --transitionBase );
	}
}