@charset "UTF-8";

/* --------------------------------------------
CONTACTS
--------------------------------------------- */
#contacts{
	color : white;
	background-image : linear-gradient( 173deg , #c2eeeb 0% , #80d9d5 40% , #3bc5bb 98% );
	a{
		color : white;
	}
	h3{
		font-weight : 900;
		text-align : center;
		text-indent : .04em;
		text-shadow : 0 0 calc( 5 * var( --remBase ) ) #80d9d5;
		letter-spacing : .04em;
	}
	.link{
		display : block;
		align-content : center;
		font-weight : 900;
		text-align : center;
		background-image : linear-gradient( to right , #f8bb44 0% , #fe6d25 100% );
	}
	.tel{
		display : grid;
		grid-template-rows : repeat( 3 , auto );
		grid-template-columns : auto auto;
		align-items : baseline;
		justify-content : center;
		font-weight : 900;
		&::before{
			grid-row : 2;
			grid-column : 1;
			width : auto;
			aspect-ratio : 30/45;
			font-size : 0;
			content : "";
			background : image-set( url( "../images/ui/icon/tel.avif" ) type( "image/avif" ) , url( "../images/ui/icon/tel.webp" ) type( "image/webp" ) ) left center / contain no-repeat;
		}
		> span{
			&:nth-of-type( 1 ){
				display : flex;
				grid-row : 1;
				grid-column : 2;
				column-gap : 1em;
				align-items : center;
				justify-content : center;
				span{
					text-shadow : 0 0 calc( 5 * var( --remBase ) ) #80d9d5;
				}
			}
			&:nth-of-type( 2 ){
				grid-row : 2;
				grid-column : 2;
				font-family : Roboto;
				text-shadow : 0 0 calc( 5 * var( --remBase ) ) #80d9d5;
			}
			&:nth-of-type( 3 ){
				grid-row : 3;
				grid-column : 2;
				justify-self : end;
				text-shadow : 0 0 calc( 5 * var( --remBase ) ) #80d9d5;
			}
		}
	}
	@media screen and ( width <= 730px ){
		padding-block : calc( 40 * var( --remBase ) );
		h3{
			font-size : 2.4rem;
			line-height : 1.2;
		}
		.link{
			width : 100%;
			height : calc( 64 * var( --remBase ) );
			margin-top : calc( 24 * var( --remBase ) );
			font-size : 2.4rem;
			text-align : center;
			text-indent : .1em;
			letter-spacing : .1em;
			border-radius : calc( 10 * var( --remBase ) );
		}
		.tel{
			column-gap : calc( 6 * var( --percentBase ) );
			margin-top : calc( 28 * var( --remBase ) );
			&::before{
				height : calc( 32 * var( --remBase ) );
			}
			> span:nth-of-type( 1 ){
				font-size : 1.6rem;
				line-height : 1.4;
			}
			> span:nth-of-type( 2 ){
				font-size : 3.6rem;
			}
			> span:nth-of-type( 3 ){
				font-size : 1.4rem;
				line-height : 1.4;
			}
		}
	}
	@media print , screen and ( width > 730px ){
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 435 * var( --percentBase ) ) auto;
		row-gap : calc( 9 * var( --remBase ) );
		column-gap : calc( 43 * var( --percentBase ) );
		justify-content : center;
		padding-top : calc( 24 * var( --remBase ) );
		padding-bottom : calc( 24 * var( --remBase ) );
		h3{
			grid-row : 1;
			grid-column : 1;
			text-align : center;
		}
		.link{
			grid-row : 2;
			grid-column : 1;
			height : calc( 64 * var( --remBase ) );
			font-size : 3.2rem;
			border-radius : calc( 10 * var( --remBase ) );
		}
		.tel{
			grid-row : 1/-1;
			grid-column : 2;
			column-gap : calc( 6 * var( --remBase ) );
			&::before{
				height : calc( 45 * var( --remBase ) );
			}
			> span:nth-of-type( 1 ){
				font-size : 2rem;
				line-height : 1.2;
			}
			> span:nth-of-type( 2 ){
				font-size : 5.6rem;
			}
			> span:nth-of-type( 3 ){
				font-size : 1.3rem;
				line-height : calc( 16 / 13 );
			}
		}
	}
}
@media ( hover : hover ){
	#contacts .link:hover{
		filter : brightness( 1.1 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#contacts .link{
		transition : filter .3s ease-in-out;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	a{
		display : flex;
		align-items : start;
		span{
			display : block;
			font-family : Roboto;
			font-weight : 900;
		}
	}
	p{
		font-weight : 700;
		letter-spacing : .04em;
	}
	@media screen and ( width <= 730px ){
		padding-block : calc( 24 * var( --remBase ) );
		a{
			column-gap : calc( 4 * var( --percentBase ) );
			justify-content : center;
			img{
				height : calc( 52 * var( --remBase ) );
			}
			span{
				margin-top : calc( 26 * var( --remBase ) );
				font-size : 2.4rem;
			}
		}
		p{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : 2rem;
			line-height : 1.4;
			text-align : center;
		}
	}
	@media print , screen and ( width > 730px ){
		display : flex;
		column-gap : calc( 15 * var( --percentBase ) );
		align-items : start;
		justify-content : center;
		padding-top : calc( 6 * var( --remBase ) );
		padding-bottom : calc( 17 * var( --remBase ) );
		a{
			justify-content : start;
			img{
				height : calc( 54 * var( --remBase ) );
				margin-top : calc( 6 * var( --remBase ) );
				margin-bottom : calc( 8 * var( --remBase ) );
				margin-left : calc( 5 * var( --remBase ) );
				margin-right : calc( 12 * var( --remBase ) );
			}
			span{
				margin-top : calc( 34 * var( --remBase ) );
				font-size : 2.5rem;
			}
		}
		p{
			margin-top : calc( 41 * var( --remBase ) );
			font-size : 1.5rem;
			line-height : 1.2;
		}
	}
}