@charset "UTF-8";

/* --------------------------------------------
contacts
--------------------------------------------- */
#contacts{
	position : relative;
	overflow : clip;
}
#contacts::before{
	position : absolute;
	z-index : -1;
	display : block;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/parts/contacts/bg.avif" ) type( "image/avif" ) , url( "../images/parts/contacts/bg.webp" ) type( "image/webp" ) ) left top / 100% auto no-repeat;
}
#contacts > p{
	font-weight : 500;
	color : white;
	text-align : center;
}
#contacts li{
	font-weight : 900;
	color : #ffdf00;
	text-align : center;
}
#contacts .link{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : center;
	font-weight : 500;
	color : #595959;
	background-color : #ffdf00;
	border-radius : 100vmax;
}
#contacts .link::after{
	position : absolute;
	top : 50%;
	width : auto;
	aspect-ratio : 16/23;
	clip-path : polygon( 0 0 , 100% 50% , 0 100% );
	font-size : 0;
	content : "";
	background-color : currentColor;
	translate : 0 -50%;
}
#contacts .tel{
	display : block;
	width : fit-content;
}
#contacts .tel > span{
	display : block;
	color : white;
	text-align : center;
}
#contacts .tel > span:nth-of-type( 1 ){
	font-weight : 700;
	text-box : trim-both cap alphabetic;
}
@media screen and ( width <= 750px ){
	#contacts{
		padding-top : calc( ( 190 - ( ( 53 - 31.64 ) / 2 ) ) * var( --remBase ) );
		padding-bottom : calc( 56 * var( --remBase ) );
		margin-top : calc( 23 * var( --remBase ) );
	}
	#contacts::before{
		top : 0;
		left : 0;
		width : 100%;
		height : calc( 1218 * var( --remBase ) );
	}
	#contacts > p , #contacts li{
		font-size : calc( 31.64 * var( --remBase ) );
		line-height : calc( 53 / 31.64 );
	}
	#contacts .links{
		margin-top : calc( ( 61 - ( ( 53 - 31.64 ) / 2 ) ) * var( --remBase ) );
	}
	#contacts .link{
		width : calc( 525 * var( --percentBase ) );
		height : calc( 108 * var( --remBase ) );
		margin-inline : auto;
		font-size : calc( 44.13 * var( --remBase ) );
	}
	#contacts .link::after{
		right : calc( 37 * 100% / 525 );
		height : calc( 23 * var( --remBase ) );
	}
	#contacts .tel{
		margin-inline : auto;
		margin-top : calc( 42 * var( --remBase ) );
	}
	#contacts .tel span:nth-of-type( 1 ){
		font-size : calc( 46.02 * var( --remBase ) );
	}
	#contacts .tel span:nth-of-type( 2 ){
		margin-top : calc( 12 * var( --remBase ) );
		font-size : calc( 26.14 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contacts{
		padding-top : calc( 240 * var( --remBase ) );
		padding-bottom : calc( 120 * var( --remBase ) );
	}
	#contacts::before{
		top : 0;
		left : 0;
		width : 100%;
		height : 200%;
	}
	#contacts > p , #contacts li{
		font-size : calc( 22 * var( --remBase ) );
		line-height : 1.5;
	}
	#contacts .links{
		display : grid;
		grid-template-columns : repeat( 2 , 50% );
		column-gap : calc( 40 * var( --percentBase ) );
		align-items : center;
		justify-content : center;
		margin-top : calc( 32 * var( --remBase ) );
	}
	#contacts .tel{
		grid-row : 1;
		grid-column : 1;
		justify-self : end;
	}
	#contacts .tel span:nth-of-type( 1 ){
		font-size : calc( 52 * var( --remBase ) );
		text-align : center;
		text-indent : .01em;
		letter-spacing : .01em;
	}
	#contacts .tel span:nth-of-type( 2 ){
		margin-top : calc( 8 * var( --remBase ) );
		font-size : calc( 16 * var( --remBase ) );
	}
	#contacts .link{
		grid-row : 1;
		grid-column : 2;
		justify-self : start;
		width : calc( 360 * var( --remBase ) );
		height : calc( 80 * var( --remBase ) );
		font-size : calc( 28 * var( --remBase ) );
	}
	#contacts .link::after{
		right : calc( 24 * 100% / 400 );
		height : calc( 18 * var( --remBase ) );
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	position : relative;
	z-index : 1;
	overflow : clip;
	background-color : var( --blue02 );
}
#footer::before , #footer::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
}
#footer h4{
	text-align : center;
}
#footer :where( .company , address ){
	font-weight : 500;
	color : #535353;
}
#footer .company{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
}
#footer address{
	font-style : normal;
	color : #535353;
}
#footer address dl{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
}
#footer address p{
	text-align : center;
}
#footer address p span:first-of-type{
	padding-right : .5em;
}
#footer ul{
	display : flex;
	flex-wrap : wrap;
	align-items : center;
	justify-content : center;
}
#footer ul li + li::before{
	white-space : pre;
	content : " | ";
}
#footer ul li , #footer ul a{
	font-weight : 400;
	color : #535353;
}
@media screen and ( width <= 750px ){
	#footer{
		padding-bottom : calc( (  85 - ( ( 33.55 - 16.77 ) / 2 ) ) * var( --remBase ) );
	}
	#footer::before{
		bottom : 0;
		left : 0;
		z-index : -2;
		width : 100%;
		height : calc( 297 * var( --remBase ) );
		background-color : #9ccddb;
	}
	#footer::after{
		top : calc( 220 * var( --remBase ) );
		left : 0;
		z-index : -1;
		width : 100%;
		height : calc( 304 * var( --remBase ) );
		background : image-set( url( "../images/parts/footer/bg_sp.avif" ) type( "image/avif" ) , url( "../images/parts/footer/bg_sp.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
	}
	#footer h4 img{
		height : calc( 141 * var( --remBase ) );
	}
	#footer :where( .company , address ){
		font-size : calc( 23.48 * var( --remBase ) );
		line-height : calc( 33.55 / 23.48 );
	}
	#footer .company{
		margin-top : calc( ( 359 - ( ( 33.55 - 23.48 ) / 2 ) ) * var( --remBase ) );
	}
	#footer ul{
		margin-top : calc( ( 84 - ( ( 33.55 - 23.48 ) / 2 ) - ( ( 33.55 - 16.77 ) / 2 ) ) * var( --remBase ) );
	}
	#footer ul li , #footer ul a{
		font-size : calc( 16.77 * var( --remBase ) );
		line-height : calc( 33.55 / 16.77 );
	}
}
@media print , screen and ( width > 750px ){
	#footer{
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 24 * var( --remBase ) );
	}
	#footer::before , #footer::after{
		position : absolute;
		display : block;
		content : "";
	}
	#footer::before{
		bottom : 0;
		left : 50%;
		z-index : -1;
		width : auto;
		height : calc( 361 * var( --remBase ) );
		aspect-ratio : 1276/361;
		background : image-set( url( "../images/parts/footer/bg02_pc.avif" ) type( "image/avif" ) , url( "../images/parts/footer/bg02_pc.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
		translate : -50% 0;
	}
	#footer::after{
		bottom : calc( -164 * var( --remBase ) );
		left : 0;
		z-index : -2;
		width : 100%;
		height : calc( 536 * var( --remBase ) );
		background : url( "../images/parts/footer/bg01_pc.svg" ) center bottom / auto 100% repeat-x;
	}
	#footer h4 img{
		height : calc( 92 * var( --remBase ) );
	}
	#footer :where( .company , address ){
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.5;
	}
	#footer .company{
		margin-top : calc( 160 * var( --remBase ) );
	}
	#footer ul{
		margin-top : calc( 40 * var( --remBase ) );
	}
	#footer ul li , #footer ul a{
		font-size : calc( 12 * var( --remBase ) );
		line-height : 1.5;
	}
}