@charset "UTF-8";

/* --------------------------------------------
CONSULTATIONS
--------------------------------------------- */
#consultations{
	background-color : white;
	@media screen and ( width <= 750px ){
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 20 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		padding-block : calc( 80 * var( --remBase ) );
	}
}
#consultation{
	position : relative;
	background-repeat : no-repeat;
	background-position : center top;
	background-size : auto 100%;
	&::after{
		position : absolute;
		display : block;
		width : auto;
		aspect-ratio : 152/255;
		font-size : 0;
		content : "";
		background : url( "../images/parts/consultation/char.svg" ) left top / contain no-repeat;
	}
	h3{
		> span{
			display : grid;
			grid-auto-flow : column;
			align-items : baseline;
			color : white;
		}
	}
	.box{
		position : relative;
		margin-inline : auto;
		background-color : white;
		p{
			font-weight : 700;
			color : #284b66;
			text-align : center;
		}
		a{
			position : relative;
			display : block;
			margin-inline : auto;
			&::after{
				position : absolute;
				display : block;
				width : 100%;
				height : 100%;
				font-size : 0;
				content : "";
				background-color : var( --blue );
			}
			span{
				position : relative;
				z-index : 1;
				display : grid;
				grid-template-columns : auto auto auto;
				align-items : center;
				justify-content : start;
				justify-content : center;
				width : 100%;
				height : 100%;
				font-weight : 700;
				color : var( --blue );
				background-color : var( --cyan03 );
				outline : solid calc( 2 * var( --remBase ) ) var( --cyan01 );
				outline-offset : calc( -2 * var( --remBase ) );
				&::before , &::after{
					display : block;
					width : auto;
					font-size : 0;
					content : "";
					background-repeat : no-repeat;
					background-position : 0 0;
					background-size : contain;
				}
				&::before{
					aspect-ratio : 36/35;
					background-image : url( "../images/parts/consultation/mail.svg" );
				}
				&::after{
					aspect-ratio : 1;
					background-image : url( "../images/parts/consultation/arrow.svg" );
				}
			}
		}
	}
	@media screen and ( width <= 750px ){
		width : 100%;
		height : calc( 254 * var( --remBase ) );
		padding-inline : calc( 20 * var( --viewportBase ) );
		padding-top : calc( 20 * var( --remBase ) );
		background-image : image-set( url( "../images/parts/consultation/bg_pc.avif" ) type( "image/avif" ) , url( "../images/parts/consultation/bg_pc.webp" ) type( "image/webp" ) );
		&::after{
			top : calc( 10 * var( --remBase ) );
			right : calc( 10 * var( --viewportBase ) );
			height : calc( 91.37 * var( --remBase ) );
		}
		h3{
			> span{
				justify-content : start;
				&:nth-of-type( 1 ){
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 20 * var( --remBase ) );
							line-height : 1.4;
						}
						&:nth-of-type( 2 ){
							font-size : calc( 15 * var( --remBase ) );
							line-height : 1.4;
						}
					}
				}
				&:nth-of-type( 2 ){
					font-size : calc( 15 * var( --remBase ) );
					line-height : 1.4;
				}
			}
		}
		.box{
			padding-block : calc( 15 * var( --remBase ) );
			margin-top : calc( 10 * var( --remBase ) );
			border-radius : calc( 15 * var( --remBase ) );
			p{
				font-size : calc( 15 * var( --remBase ) );
				line-height : 1.2;
			}
			a{
				width : calc( 315 * 100% / 335 );
				height : calc( 62 * var( --remBase ) );
				margin-top : calc( 10 * var( --remBase ) );
				&::after{
					bottom : calc( -3 * var( --remBase ) );
					height : 50%;
					border-radius : 0 0 calc( 8 * var( --remBase ) ) calc( 8 * var( --remBase ) );
				}
				span{
					column-gap : calc( 20 * 100% / 315 );
					font-size : calc( 19 * var( --remBase ) );
					line-height : 1.1;
					text-align : center;
					border-radius : calc( 8 * var( --remBase ) );
					&::before{
						height : calc( 27.29 * var( --remBase ) );
					}
					&::after{
						height : calc( 20 * var( --remBase ) );
					}
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
		height : calc( 340 * var( --remBase ) );
		padding-top : calc( 22 * var( --remBase ) );
		margin-inline : auto;
		overflow : hidden;
		background-image : image-set( url( "../images/parts/consultation/bg_pc.avif" ) type( "image/avif" ) , url( "../images/parts/consultation/bg_pc.webp" ) type( "image/webp" ) );
		border-radius : calc( 20 * var( --remBase ) );
		&::after{
			bottom : 0;
			right : 0;
			height : calc( 255 * var( --remBase ) );
		}
		h3{
			> span{
				justify-content : center;
				&:nth-of-type( 1 ){
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 35 * var( --remBase ) );
							line-height : 1.5;
						}
						&:nth-of-type( 2 ){
							font-size : calc( 25 * var( --remBase ) );
							line-height : 1.5;
						}
					}
				}
				&:nth-of-type( 2 ){
					font-size : calc( 25 * var( --remBase ) );
					line-height : 1.5;
				}
			}
		}
		.box{
			width : calc( 900 * 100% / 1000 );
			padding-top : calc( 35 * var( --remBase ) );
			padding-bottom : calc( 40 * var( --remBase ) );
			margin-top : calc( 10 * var( --remBase ) );
			border-radius : calc( 5 * var( --remBase ) );
			p{
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 26 / 16 );
			}
			a{
				width : calc( 625 * 100% / 900 );
				height : calc( 75 * var( --remBase ) );
				margin-top : calc( 6 * var( --remBase ) );
				&::after{
					bottom : calc( -8 * var( --remBase ) );
					height : calc( 44 * var( --remBase ) );
					border-radius : 0 0 calc( 7 * var( --remBase ) ) calc( 7 * var( --remBase ) );
				}
				span{
					column-gap : calc( 20 * 100% / 625 );
					font-size : calc( 30 * var( --remBase ) );
					line-height : calc( 41 / 30 );
					border-radius : calc( 7 * var( --remBase ) );
					&::before{
						height : calc( 34.11 * var( --remBase ) );
					}
					&::after{
						height : calc( 26 * var( --remBase ) );
					}
				}
			}
		}
	}
}
@media ( hover : hover ){
	#consultation a:hover{
		translate : 0 calc( 8 * var( --remBase ) );
		&::after{
			translate : 0 calc( -8 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#consultation a{
		transition : translate var( --hoverDuration ) var( --hoverTimingFunction );
		&::after{
			transition : translate var( --hoverDuration ) var( --hoverTimingFunction );
		}
	}
}
#searchLinks{
	margin-inline : auto;
	background-color : var( --cyan03 );
	border-radius : calc( 20 * var( --remBase ) );
	.box{
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 20 * var( --remBase ) );
		background-color : white;
		outline : solid calc( 2 * var( --remBase ) ) var( --cyan02 );
		outline-offset : calc( -2 * var( --remBase ) );
	}
	h3{
		position : relative;
		z-index : 0;
		font-size : calc( 16 * var( --remBase ) );
		font-weight : 600;
		line-height : calc( 26 / 16 );
		color : #284b66;
		text-align : center;
		&::before{
			position : absolute;
			top : 50%;
			left : 50%;
			z-index : -1;
			display : block;
			width : auto;
			height : calc( 45 * var( --remBase ) );
			aspect-ratio : 230/45;
			font-size : 0;
			content : "";
			background : url( "../images/parts/searchLinks/bg_title.svg" ) center / contain no-repeat;
			translate : -50% -50%;
		}
	}
	p{
		margin-top : calc( 20 * var( --remBase ) );
		font-family : "Zen Kaku Gothic New" , sans-serif;
		font-size : calc( 14 * var( --remBase ) );
		font-weight : 500;
	}
	.list-searches{
		margin-top : calc( 20 * var( --remBase ) );
		> li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		h4{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : start;
			width : fit-content;
			clip-path : polygon( 0 0 , 100% 0 , calc( 100% - ( 5 * var( --remBase ) ) ) 50% , 100% 100% , 0 100% );
			font-family : "Zen Kaku Gothic New" , sans-serif;
			font-weight : 500;
			color : white;
			background-color : var( --cyan01 );
			&::before{
				display : block;
				width : auto;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : left center;
				background-size : contain;
			}
			&.type{
				&::before{
					aspect-ratio : 26/24;
					background-image : url( "../images/parts/searchLinks/bag.svg" );
				}
			}
			&.environment{
				&::before{
					aspect-ratio : 26/24;
					background-image : url( "../images/parts/searchLinks/building.svg" );
				}
			}
			&.feature{
				&::before{
					aspect-ratio : 26/24;
					background-image : url( "../images/parts/searchLinks/light.svg" );
				}
			}
		}
		ul{
			display : flex;
			flex-wrap : wrap;
			li{
				display : grid;
				grid-auto-flow : column;
				align-items : start;
				justify-content : start;
			}
			> li:not( :last-child ){
				&::after{
					font-weight : 700;
					color : #a9ccd0;
					white-space : pre;
					content : "  |  ";
				}
			}
		}
		li li , a{
			font-size : calc( 16 * var( --remBase ) );
		}
		a{
			font-family : "Zen Kaku Gothic New" , sans-serif;
			font-weight : 700;
			-webkit-text-decoration : underline;
			text-decoration : underline;
			text-decoration-thickness : .5px;
			text-decoration-style : dashed;
			text-decoration-color : #707070;
			text-underline-offset : calc( ( 1lh - 1em ) / 2 );
		}
	}
	@media screen and ( width <= 750px ){
		width : calc( 335 * var( --viewportBase ) );
		padding-block : calc( 20 * var( --remBase ) );
		padding-inline : calc( 20 * var( --viewportBase ) );
		margin-top : calc( 20 * var( --remBase ) );
		.box{
			padding-inline : calc( 30 * 100% / 295 );
			border-radius : calc( 20 * var( --remBase ) );
		}
		p{
			line-height : 1.6;
		}
		h4{
			column-gap : calc( 5 * var( --remBase ) );
			height : calc( 33 * var( --remBase ) );
			padding-left : calc( 15 * var( --remBase ) );
			padding-right : calc( 22 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 33 / 16 );
			&.type{
				&::before{
					height : calc( 20 * var( --remBase ) );
				}
			}
			&.environment{
				&::before{
					height : calc( 19 * var( --remBase ) );
				}
			}
			&.feature{
				&::before{
					height : calc( 20 * var( --remBase ) );
				}
			}
		}
		.list-searches{
			ul{
				margin-top : calc( 10 * var( --remBase ) );
			}
			li li , a{
				line-height : 1.6;
			}
		}
	}
	@media print , screen and ( width > 750px ){
		width : min( 1000px , calc( 1000 * var( --viewportBase ) ) );
		padding-block : calc( 30 * var( --remBase ) );
		padding-inline : calc( 30 * var( --viewportBase ) );
		margin-top : calc( 80 * var( --remBase ) );
		.box{
			padding-inline : calc( 30 * 100% / 940 );
			border-radius : calc( 20 * var( --remBase ) );
		}
		p{
			line-height : calc( 24 / 14 );
		}
		h4{
			column-gap : calc( 10 * var( --remBase ) );
			min-width : calc( 170 * var( --remBase ) );
			height : calc( 43 * var( --remBase ) );
			padding-inline : calc( 15 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 33 / 18 );
			&::before{
				height : calc( 24 * var( --remBase ) );
			}
		}
		.list-searches{
			ul{
				margin-top : calc( 20 * var( --remBase ) );
			}
			li li , a{
				line-height : calc( 26 / 16 );
			}
		}
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	position : relative;
	overflow : clip;
	background-color : var( --blue );
	&::before{
		position : absolute;
		z-index : 1;
		display : block;
		font-size : 0;
		pointer-events : none;
		content : "";
		background-color : color-mix( in sRGB , white 10% , transparent );
	}
	.logo{
		img{
			height : calc( 51 * var( --remBase ) );
		}
	}
	li + li{
		margin-top : calc( 10 * var( --remBase ) );
	}
	li a{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 5 * var( --remBase ) );
		align-items : start;
		justify-content : start;
		font-size : calc( 14 * var( --remBase ) );
		font-weight : 700;
		line-height : calc( 17 / 14 );
		color : white;
		&::before{
			display : block;
			width : auto;
			height : calc( 10 * var( --remBase ) );
			aspect-ratio : 1;
			margin-top : calc( 3.5 * var( --remBase ) );
			clip-path : polygon( 0 0 , 100% 50% , 0 100% );
			font-size : 0;
			content : "";
			background-color : white;
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		&::before{
			top : calc( 91.18 * var( --remBase ) );
			left : calc( -115.19 * var( --viewportBase ) );
			width : calc( 745.02 * var( --viewportBase ) );
			height : calc( 226.27 * var( --remBase ) );
			rotate : -135deg;
		}
		ul{
			margin-top : calc( 20 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : space-between;
		padding-top : calc( 30 * var( --remBase ) );
		padding-bottom : calc( 39 * var( --remBase ) );
		&::before{
			top : calc( ( -6.64 ) * var( --remBase ) );
			left : calc( 50% - ( 623.19 * var( --viewportBase ) ) );
			width : calc( 745.02 * var( --viewportBase ) );
			height : calc( 293.91 * var( --remBase ) );
			rotate : -135deg;
		}
	}
}