@charset "UTF-8";

/* --------------------------------------------
VIEW TRANSITION
--------------------------------------------- */
@view-transition{
	navigation : auto;
}
::view-transition-old( root ){
	animation : fade .3s ease-out reverse;
}
::view-transition-new( root ){
	animation : fade .3s ease-out;
}
@keyframes fade{
	from{
		opacity : 0;
	}
	to{
		opacity : 1;
	}
}

/* --------------------------------------------
PRINT
--------------------------------------------- */
@media print{
	body{
		width : 100%;
		overflow-x : hidden;
	}
	@page{
		margin : .5cm;
		margin-top : .4cm;
		size : a4 portrait;
	}
	.no-print{
		display : none;
	}
}

/* --------------------------------------------
DIALOG
--------------------------------------------- */
body:has( dialog[open] ){
	overflow : clip;
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
@media ( hover : hover ){
	#header .inquiry:hover{
		color : white;
		background-color : var( --base );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header .inquiry{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#toTop{
	position : absolute;
	top : 0;
	display : grid;
	place-items : center;
	width : auto;
	aspect-ratio : 1;
	background-color : var( --pink03 );
	border-radius : 50%;
	outline : solid 1px var( --pink03 );
	outline-offset : -1px;
	translate : 0 -50%;
	img{
		aspect-ratio : 6/36;
		filter : var( --filterWhite );
	}
	@media screen and ( width <= 750px ){
		right : calc( 15 * var( --viewportBase ) );
		height : calc( 50 * var( --remBase ) );
		img{
			height : calc( 22.5 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		right : max( calc( 50% - 630px ) , calc( 9 * var( --viewportBase ) ) );
		height : calc( 80 * var( --remBase ) );
		img{
			height : calc( 36 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#toTop:hover{
		background-color : white;
		img{
			filter : var( --filterPink03 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#toTop{
		transition : background-color var( --transitionBase );
		img{
			transition : filter var( --transitionBase );
		}
	}
}
#footer{
	position : relative;
	color : white;
	background-color : var( --base );
	&::before{
		position : absolute;
		top : 0;
		left : 0;
		display : block;
		font-size : 0;
		pointer-events : none;
		content : "";
		background-color : color-mix( in sRGB , white 10% , transparent );
		border-radius : 0 100vmax 100vmax 0;
	}
	.logo , li a{
		color : white;
	}
	ruby{
		font-family : var( --fontFamilyEn );
		font-weight : 700;
		ruby-position : under;
	}
	rt{
		width : max-content;
		font-family : var( --fontFamily );
		ruby-align : start;
	}
	li a{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : start;
		font-weight : 700;
		&::before{
			display : block;
			width : auto;
			aspect-ratio : 16 / 6;
			font-size : 0;
			content : "";
			background : url( "../images/ui/arrow/right01.svg" ) left top / contain no-repeat;
			filter : var( --filterWhite );
		}
	}
	p{
		font-weight : 700;
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 30 * var( --remBase ) );
		&::before{
			width : calc( 355 * var( --viewportBase ) );
			height : calc( 134 * var( --remBase ) );
		}
		ruby{
			font-size : calc( 35.75 * var( --remBase ) );
			line-height : calc( 44 / 35.75 );
		}
		rt{
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 17 / 12 );
		}
		ul{
			margin-top : calc( 60 * var( --remBase ) );
		}
		li{
			+ li{
				margin-top : calc( 10 * var( --remBase ) );
			}
			a{
				column-gap : calc( 10 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
				line-height : calc( 17 / 12 );
				&::before{
					height : calc( 6 * var( --remBase ) );
					margin-top : calc( 5.5 * var( --remBase ) );
				}
			}
		}
		p{
			margin-top : calc( 30 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 17 / 12 );
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : auto auto;
		grid-template-columns : calc( 50 * var( --contentBase ) ) auto 1fr auto calc( 50 * var( --contentBase ) );
		row-gap : calc( 30 * var( --remBase ) );
		align-items : center;
		justify-content : space-between;
		padding-block : calc( 40 * var( --remBase ) );
		&::before{
			width : max( calc( 50% - 160px ) , calc( 500 * var( --viewportBase ) ) );
			height : 100%;
		}
		.logo{
			grid-row : 1/-1;
			grid-column : 2;
			align-self : center;
		}
		ruby{
			font-size : calc( 40 * var( --remBase ) );
			line-height : calc( 49 / 40 );
			rt{
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 20 / 14 );
			}
		}
		ul{
			grid-row : 1;
			grid-column : 4;
			li + li{
				margin-top : calc( 10 * var( --remBase ) );
			}
			a{
				column-gap : calc( 10 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 20 / 14 );
				&::before{
					height : calc( 6 * var( --remBase ) );
					margin-top : calc( 7 * var( --remBase ) );
				}
			}
		}
		p{
			grid-row : 2;
			grid-column : 4;
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 20 / 14 );
		}
	}
}