@charset "UTF-8";

/* --------------------------------------------
FIXED CONTACTS
--------------------------------------------- */
#fixedContacts{
	@media screen and ( width < 768px ){
		body:has( & ){
			padding-bottom : calc( 84 * var( --remBase ) );
		}
		position : fixed;
		bottom : calc( 10 * var( --remBase ) );
		left : calc( 20 * var( --viewportBase ) );
		z-index : 5;
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : space-between;
		width : calc( 350 * var( --viewportBase ) );
		height : calc( 64 * var( --remBase ) );
		padding-inline : calc( 20 * var( --viewportBase ) );
		background-color : color-mix( in sRGB , white 85% , transparent );
		border-radius : calc( 8 * var( --remBase ) );
		backdrop-filter : blur( 5px );
		&::before{
			position : absolute;
			top : 50%;
			left : 50%;
			display : block;
			width : 1px;
			height : calc( 21 * var( --remBase ) );
			content : "";
			background-color : #e8e8e8;
			translate : -50% -50%;
		}
		a{
			display : grid;
			grid-template-rows : 1fr auto;
			grid-template-columns : auto auto;
			column-gap : calc( 9 * var( --remBase ) );
			align-items : center;
			justify-content : start;
			&::before{
				display : block;
				grid-row : 1/-1;
				grid-column : 1;
				width : auto;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : 0 0;
				background-size : contain;
			}
			span{
				grid-row : 1;
				grid-column : 2;
			}
			small{
				grid-row : 2;
				grid-column : 2;
				justify-self : center;
				font-size : calc( 8 * var( --remBase ) );
				text-align : center;
				text-indent : .02em;
				letter-spacing : .02em;
			}
		}
		.line{
			a{
				row-gap : calc( 4 * var( --remBase ) );
				&::before{
					height : calc( 18 * var( --remBase ) );
					aspect-ratio : 19/18;
					background-image : url( "../images/ui/sns/line.svg" );
				}
				span{
					font-size : calc( 14 * var( --remBase ) );
				}
			}
		}
		.tel{
			a{
				row-gap : calc( 2.5 * var( --remBase ) );
				&::before{
					height : calc( 16 * var( --remBase ) );
					aspect-ratio : 1;
					background-image : url( "../images/ui/icon/tel.svg" );
				}
				span{
					font-family : Helvetica , Arial , sans-serif;
					font-size : calc( 17 * var( --remBase ) );
					font-weight : 400;
					letter-spacing : .03em;
				}
			}
		}
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	background-color : white;
	@media screen and ( width < 768px ){
		padding-inline : calc( 32 * var( --viewportBase ) );
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 32 * var( --remBase ) );
	}
	@media print , screen and ( width >= 768px ){
		display : grid;
		grid-template-rows : auto calc( 56 * var( --remBase ) ) auto calc( 80 * var( --remBase ) ) auto;
		grid-template-columns : calc( 308 * var( --contentBase ) ) calc( 157 * var( --contentBase ) ) 1fr calc( 72 * var( --contentBase ) );
		align-items : start;
		padding-top : calc( 140 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
	}
}
#footerMe{
	.logo{
		display : block;
		width : fit-content;
	}
	.address{
		line-height : 1.6;
	}
	.map{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		margin-top : calc( 10 * var( --remBase ) );
		&::after{
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : url( "../images/ui/arrow/right_top01.svg" ) left top / contain no-repeat;
		}
	}
	@media screen and ( width < 768px ){
		.logo{
			img{
				height : calc( 50 * var( --remBase ) );
			}
		}
		.address{
			margin-top : calc( 48 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
		.map{
			column-gap : calc( 12 * 100% / 326 );
			margin-top : calc( 10 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			&::after{
				height : calc( 20 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width >= 768px ){
		grid-row : 1;
		grid-column : 1;
		.logo{
			img{
				width : 100%;
				height : auto;
			}
		}
		.address{
			margin-top : calc( 56 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
		.map{
			column-gap : calc( 12 * 100% / 308 );
			font-size : calc( 18 * var( --remBase ) );
			&::after{
				height : calc( 24 * var( --remBase ) );
			}
		}
	}
}
@media ( hover : hover ){
	#footerMe{
		.logo:hover{
			opacity : .75;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footerMe{
		.logo{
			transition : opacity var( --transitionBase );
		}
	}
}
#footerNav{
	a{
		text-decoration : underline;
		text-decoration-color : transparent;
		text-underline-offset : .25em;
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 48 * var( --remBase ) );
		li li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		a{
			font-size : calc( 18 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		grid-row : 1/4;
		grid-column : 3;
		align-self : start;
		padding-top : calc( 44 * var( --remBase ) );
		> ul{
			display : grid;
			grid-template-columns : 1fr auto;
			justify-content : space-between;
			> li{
				> ul{
					margin-top : calc( 56 * var( --remBase ) );
				}
				&:nth-child( 1 ){
					> ul{
						display : grid;
						grid-auto-flow : column;
						column-gap : calc( 72 * var( --remBase ) );
						align-items : start;
						justify-content : start;
						> li{
							padding-left : calc( 20 * var( --remBase ) );
							border-left : solid 1px color-mix( in sRGB , var( --base ) 20% , transparent );
							li + li{
								margin-top : calc( 20 * var( --remBase ) );
							}
						}
					}
				}
				&:nth-child( 2 ){
					li + li{
						margin-top : calc( 20 * var( --remBase ) );
					}
				}
			}
		}
		p{
			font-size : calc( 20 * var( --remBase ) );
		}
		a{
			font-size : calc( 14 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#footerNav a:hover{
		text-decoration-color : currentColor;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footerNav a{
		transition : text-decoration-color var( --transitionBase );
	}
}
#footerTel{
	@media screen and ( width < 768px ){
		column-gap : calc( 14 * 100% / 328 );
		justify-content : center;
		margin-top : calc( 48 * var( --remBase ) );
	}
	@media print , screen and ( width >= 768px ){
		grid-row : 3;
		grid-column : 1;
		column-gap : calc( 14 * 100% / 308 );
	}
}
#footerFooter{
	color : color-mix( in sRGB , var( --base ) 40% , transparent );
	p:nth-of-type( 1 ){
		font-size : calc( 10 * var( --remBase ) );
		line-height : 1.5;
	}
	dl{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : start;
	}
	dt , dd{
		font-size : calc( 12 * var( --remBase ) );
		line-height : 1.5;
	}
	ul{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : start;
	}
	a{
		color : color-mix( in sRGB , var( --base ) 40% , transparent );
		text-decoration : underline;
	}
	@media screen and ( width < 768px ){
		margin-top : calc( 32 * var( --remBase ) );
		ul{
			column-gap : calc( 12 * 100% / 328 );
			margin-top : calc( 32 * var( --remBase ) );
		}
		a{
			font-size : calc( 12 * var( --remBase ) );
		}
		p:nth-of-type( 2 ){
			margin-top : calc( 24 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 768px ){
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : calc( 465 * var( --contentBase ) ) 1fr auto;
		grid-row : 5;
		grid-column : 1/-1;
		align-items : end;
		p:nth-of-type( 1 ){
			grid-row : 1;
			grid-column : 1;
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.5;
		}
		dl{
			grid-row : 2;
			grid-column : 1;
		}
		ul{
			grid-row : 1/-1;
			grid-column : 2;
			column-gap : calc( 32 * var( --remBase ) );
			align-self : end;
			a{
				font-size : calc( 14 * var( --remBase ) );
			}
		}
		p:nth-of-type( 2 ){
			grid-row : 1/-1;
			grid-column : 3;
			font-size : calc( 14 * var( --remBase ) );
			text-align : right;
		}
	}
}
@media ( hover : hover ){
	#footerFooter a:hover{
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#footerFooter a{
		transition : opacity .75 var( --transitionBase );
	}
}