@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 55 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 90 * var( --remBase ) );
	}
}
html{
	/* scroll-padding-top: var(--headerHeight); */
}
body{
	position : relative;

	/* padding-top : var(--headerHeight); */
	font-size : calc( 16 * var( --remBase ) );
	&::before{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : left top;
		background-size : 100% 100%;
	}
	@media screen and ( width <= 750px ){
		&::before{
			height : calc( 834 * var( --remBase ) );
			background-image : image-set( url( "../images/ui/bg/bg_sp@1x.avif" ) type( "image/avif" ) 1x , url( "../images/ui/bg/bg_sp@2x.avif" ) type( "image/avif" ) 2x );
		}
	}
	@media print , screen and ( width > 750px ){
		&::before{
			height : calc( 1117 * var( --remBase ) );
			background-image : image-set( url( "../images/ui/bg/bg_pc@1x.avif" ) type( "image/avif" ) 1x , url( "../images/ui/bg/bg_pc@2x.avif" ) type( "image/avif" ) 2x );
		}
	}
}

/* --------------------------------------------
WRAPPER , CONTAINER , GRID CONTAINER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--wrapPaddingInline : max( calc( ( 100% - ( var( --contentWidth ) * 1px ) ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
	}
}
:root{
	--containerWidth : calc( var( --contentWidth ) * var( --viewportBase ) );
	--gridContainerGutter : calc( var( --gutter ) * var( --viewportBase ) );
	--gridContainerGridTemplateColumns : var( --gridContainerGutter ) var( --containerWidth ) var( --gridContainerGutter );
	--gridContainerColumnCenter : 2;
	--gridContainerLeftStartEnd : 3;
	--gridContainerRightEndStart : 2;
}
.wrap{
	padding-inline : var( --wrapPaddingInline );
}
.wrap-sp{
	@media screen and ( width <= 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap02{
	@media screen and ( width <= 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
	@media print , screen and ( width > 750px ){
		padding-inline : max( calc( ( 100% - 800px ) / 2 ) , calc( 160 * var( --viewportBase ) ) );
	}
}
.container{
	width : var( --containerWidth );
	margin-inline : auto;
}
.container-sp{
	@media screen and ( width <= 750px ){
		width : var( --containerWidth );
		margin-inline : auto;
	}
}
.container-pc{
	@media print , screen and ( width > 750px ){
		width : var( --containerWidth );
		margin-inline : auto;
	}
}
.gridContainer{
	display : grid;
	grid-template-columns : var( --gridContainerGridTemplateColumns );
	grid-auto-flow : column;
	row-gap : 0;
	>*:not( .fluid , .left-start , .right-end ){
		grid-column : var( --gridContainerColumnCenter );
	}
	.fluid{
		grid-column : 1/-1;
	}
	.left-start{
		grid-column : 1 / 3;
	}
	.right-end{
		grid-column : 2 / 4;
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
.is-sp{
	@media print , screen and ( width > 750px ){
		display : none;
	}
}
.is-pc{
	@media screen and ( width <= 750px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 750px ){
		display : none;
	}
	@media print , screen and ( width >= 1180px ){
		display : none;
	}
}

/* --------------------------------------------
ACCESSIBILITY
--------------------------------------------- */
.visually-hidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}
.visually-hidden-text{
	overflow : hidden;
	color : transparent;
}
[hidden]{
	display : none;
}

/* --------------------------------------------
IMAGE RENDERING
--------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
.full-sp{
	@media screen and ( width <= 750px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 750px ){
		width : 100%;
		height : auto;
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	height : var( --headerHeight );
	.logo{
		display : block;
		width : fit-content;
		font-family : Montserrat , sans-serif;
		font-weight : 700;
	}
	@media screen and ( width <= 750px ){
		align-content : center;
		.logo{
			font-size : calc( 24.49 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : space-between;
		padding-inline : max( calc( ( 100% - 1560px ) / 2 ) , calc( 20 * var( --viewportBase ) ) );
		.logo{
			font-size : calc( 40 * var( --remBase ) );
		}
		.inquiry{
			display : grid;
			place-items : center;
			width : calc( 250 * var( --remBase ) );
			height : calc( 36 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			font-weight : 500;
			background-color : white;
			border-radius : 100vmax;
			outline : solid 1px var( --base );
			outline-offset : -1px;
		}
	}
}

/* --------------------------------------------
FIXED FOOTER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--fixedFooterHeight : calc( 148 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--fixedFooterHeight : calc( 110 * var( --remBase ) );
	}
}
body:has( #fixedFooter ){
	padding-bottom : var( --fixedFooterHeight );
}
#fixedFooter{
	position : fixed;
	bottom : 0;
	left : 0;
	z-index : 5;
	width : 100%;
	height : var( --fixedFooterHeight );
	background-color : var( --pink02 );
	> p{
		font-weight : 700;
		em{
			color : var( --pink );
		}
	}
	> div{
		display : grid;
		p{
			width : fit-content;
			font-weight : 700;
			border-bottom : solid 1px currentColor;
			&::after{
				position : absolute;
				left : 50%;
				display : block;
				width : auto;
				aspect-ratio : 8.8/18.78;
				content : "";
				background : url( "../images/parts/fixedFooter/parts.svg" ) left top / contain no-repeat;
				background-color : var( --pink02 );
				translate : -50% 0;
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 20 * var( --remBase ) );
		> p{
			font-size : calc( * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
			text-align : center;
			em{
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		> div{
			grid-template-columns : auto auto;
			row-gap : calc( 15 * var( --remBase ) );
			justify-content : space-between;
			margin-top : calc( 5 * var( --remBase ) );
			p{
				position : relative;
				grid-row : 1;
				grid-column : 1/-1;
				justify-self : center;
				padding-bottom : calc( 5 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 20 / 14 );
				&::after{
					bottom : calc( -8.72 * var( --remBase ) );
					height : calc( 13.52 * var( --remBase ) );
				}
			}
		}
		.link01{
			column-gap : calc( 5 * var( --remBase ) );
			height : calc( 34 * var( --remBase ) );
			padding-left : calc( 15 * var( --remBase ) );
			padding-right : calc( 10 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			&::after{
				height : calc( 3.6 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		column-gap : calc( 10 * var( --contentBase ) );
		align-items : center;
		justify-content : center;
		padding-block : calc( 20 * var( --remBase ) );
		> p{
			grid-row : 1;
			grid-column : 1;
			font-size : calc( 30 * var( --remBase ) );
			line-height : 1.6;
		}
		div{
			position : relative;
			grid-row : 1;
			grid-column : 2;
			grid-auto-flow : column;
			column-gap : calc( 10 * var( --remBase ) );
			align-items : center;
			justify-content : center;
			p{
				position : absolute;
				top : calc( ( -21 - 20 ) * var( --remBase ) );
				left : 50%;
				padding-bottom : calc( 6 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 23 / 16 );
				translate : -50% 0;
				&::after{
					bottom : calc( -14.18 * var( --remBase ) );
					height : calc( 18.78 * var( --remBase ) );
				}
			}
		}
		.link01{
			column-gap : calc( 16 * var( --remBase ) );
			height : calc( 70 * var( --remBase ) );
			padding-inline : calc( 30 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			&::after{
				height : calc( 6 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title{
	position : relative;
	z-index : 0;
	align-content : center;
	margin-inline : auto;
	font-weight : 700;
	line-height : 1.4;
	background-repeat : no-repeat;
	&::before , &::after{
		position : absolute;
		left : 0;
		display : block;
		height : 100%;
		font-size : 0;
		content : "";
	}
	&::before{
		top : 0;
		z-index : -2;
		width : 100%;
		background-position : right top;
		background-size : contain;
	}
	&::after{
		z-index : -1;
		background-color : white;
		border-radius : 0 100vmax 100vmax 0;
	}
	@media screen and ( width <= 750px ){
		display : grid;
		grid-template-rows : calc( 74 * var( --remBase ) );
		align-content : end;
		align-items : center;
		justify-content : start;
		width : calc( 335 * var( --viewportBase ) );
		height : calc( 160 * var( --remBase ) );
		padding-left : calc( 14 * var( --viewportBase ) );
		font-size : calc( 22 * var( --remBase ) );
		&::after{
			bottom : 0;
			width : calc( 315 * var( --contentBase ) );
			height : calc( 74 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		max-width : 1440px;
		height : calc( 200 * var( --remBase ) );
		padding-left : calc( 67 * var( --viewportBase ) );
		font-size : calc( 40 * var( --remBase ) );
		&::after{
			top : 0;
			width : calc( 640 * var( --viewportBase ) );
		}
	}
}
.title01{
	font-weight : 700;
	line-height : 1.6;
	text-align : center;
	&[data-en]::before{
		display : block;
		font-family : var( --fontFamilyEn );
		font-weight : 600;
		color : color-mix( in sRGB , var( --pink03 ) 30% , transparent );
		text-align : center;
		content : attr( data-en );
	}
	@media screen and ( width <= 750px ){
		font-size : calc( 22 * var( --remBase ) );
		&[data-en]::before{
			margin-bottom : calc( -32 * var( --remBase ) );
			font-size : calc( 50 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		font-size : calc( 36 * var( --remBase ) );
		&[data-en]::before{
			margin-bottom : calc( -68 * var( --remBase ) );
			font-size : calc( 100 * var( --remBase ) );
		}
	}
}