@charset "UTF-8";

/* --------------------------------------------
CONTENT FAQ
--------------------------------------------- */
.contentFaq{
	padding-top : calc( 165 * var( --remBase ) );
	padding-bottom : calc( 90 * var( --remBase ) );
	background-color : #f2f2f2;
	> h2{
		position : relative;
		width : fit-content;
		margin-inline : auto;
		margin-bottom : calc( 45 * var( --remBase ) );
		font-size : calc( 40 * var( --remBase ) );
		font-weight : 700;
		&::before , &::after{
			position : absolute;
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			background-repeat : no-repeat;
			background-position : 0 0;
			background-size : contain;
		}
		&::before{
			top : calc( -75 * var( --remBase ) );
			left : 50%;
			height : calc( 60 * var( --remBase ) );
			aspect-ratio : 159/60;
			background-image : image-set( url( "../images/ui/title/faq.avif" ) type( "image/avif" ) , url( "../images/ui/title/faq.webp" ) type( "image/webp" ) );
			translate : -50% 0;
		}
		&::after{
			height : calc( 146 * var( --remBase ) );
			aspect-ratio : 117/146;
			background-image : image-set( url( "../images/ui/parts/char07.avif" ) type( "image/avif" ) , url( "../images/ui/parts/char07.webp" ) type( "image/webp" ) );
		}
	}
	details{
		cursor : pointer;
		&::details-content{
			interpolate-size : allow-keywords;
			height : 0;
			overflow : clip;
		}
		&[open]::details-content{
			height : auto;
		}
	}
	details + details{
		margin-top : calc( 30 * var( --remBase ) );
	}
	summary{
		position : relative;
		padding-block : calc( 20 * var( --remBase ) );
		font-weight : 700;
		color : #707070;
		background-color : white;
		outline : solid 1px #cfcfcf;
		outline-offset : -1px;
		&::before , &::after{
			position : absolute;
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			background-repeat : no-repeat;
			background-position : 0 0;
			background-size : contain;
		}
		&::before{
			aspect-ratio : 1;
			background-image : image-set( url( "../images/ui/title/q.avif" ) type( "image/avif" ) , url( "../images/ui/title/q.webp" ) type( "image/webp" ) );
		}
		&::after{
			top : 50%;
			aspect-ratio : 21/14;
			background-image : url( "../images/ui/arrow/up01.svg" );
			filter : invert( 26% ) sepia( 0% ) saturate( 801% ) hue-rotate( 160deg ) brightness( 93% ) contrast( 81% );
			translate : 0 -50%;
		}
	}
	details[open]{
		summary::after{
			rotate : 0;
		}
	}
	details:not( [open] ){
		summary::after{
			rotate : -180deg;
		}
	}
	.details-content{
		position : relative;
		padding-bottom : calc( 40 * var( --remBase ) );
		font-weight : 500;
		&::before{
			position : absolute;
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background : image-set( url( "../images/ui/title/a.avif" ) type( "image/avif" ) , url( "../images/ui/title/a.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
		}
	}
	button{
		display : block;
		align-content : center;
		margin-inline : auto;
		margin-top : calc( 30 * var( --remBase ) );
		font-weight : 700;
		color : #707070;
		text-align : center;
		background-color : white;
		border-radius : 100vmax;
		outline-width : calc( 5 * var( --remBase ) );
		outline-style : solid;
		outline-color : #6dbfe3;
		outline-offset : calc( -5 * var( --remBase ) );
	}
	@media screen and ( width <= 768px ){
		overflow-x : clip;
		h2{
			line-height : calc( 68 / 40 );
			&::after{
				top : calc( ( -75 - 1.5 ) * var( --remBase ) );
				right : calc( -150 * var( --remBase ) );
			}
		}
		summary{
			padding-inline : calc( 56 * var( --contentBase ) );
			padding-left : calc( 66 * var( --contentBase ) );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 33 / 22 );
			border-radius : calc( 10 * var( --remBase ) );
			&::before{
				top : calc( 19.5 * var( --remBase ) );
				left : calc( 20 * var( --contentBase ) );
				height : calc( 31 * var( --remBase ) );
			}
			&::after{
				right : calc( 20 * var( --contentBase ) );
				height : calc( 14 * var( --remBase ) );
			}
		}
		.details-content{
			padding-top : calc( 20 * var( --remBase ) );
			padding-left : calc( 66 * var( --contentBase ) );
			padding-right : calc( 10 * var( --contentBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 36 / 20 );
			&::before{
				left : calc( 20 * var( --contentBase ) );
				height : calc( 31 * var( --remBase ) );
			}
		}
		button{
			width : calc( 318 * var( --contentBase ) );
			height : calc( 60 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		h2{
			line-height : calc( 60 / 40 );
			&::after{
				top : calc( ( -75 - 5.5 ) * var( --remBase ) );
				right : calc( -150 * var( --remBase ) );
			}
		}
		summary{
			padding-inline : calc( 56 * 100% / 1080 );
			padding-left : calc( 66 * 100% / 1080 );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 30 / 20 );
			border-radius : calc( 10 * var( --remBase ) );
			&::before{
				top : calc( 19.5 * var( --remBase ) );
				left : calc( 20 * 100% / 1080 );
				height : calc( 31 * var( --remBase ) );
			}
			&::after{
				right : calc( 20 * 100% / 1080 );
				height : calc( 14 * var( --remBase ) );
			}
		}
		.details-content{
			padding-top : calc( 30 * var( --remBase ) );
			padding-left : calc( 66 * 100% / 1080 );
			padding-right : calc( 10 * 100% / 1080 );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 32.4 / 18 );
			&::before{
				left : calc( 20 * 100% / 1080 );
				height : calc( 31 * var( --remBase ) );
			}
		}
		button{
			width : calc( 318 * 100% / 1080 );
			height : calc( 56 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.contentFaq summary::after{
		transition : rotate .3s linear;
	}
	.contentFaq details::details-content{
		transition : height .3s linear , content-visibility .3s linear allow-discrete;
	}
}

/* --------------------------------------------
CONTENT CONTACTS
--------------------------------------------- */
.contentContacts{
	overflow : hidden;
	background : repeating-linear-gradient( 135deg , color-mix( in sRGB , white 11% , transparent ) , color-mix( in sRGB , white 11% , transparent ) calc( 10 * var( --remBase ) ) , transparent calc( 10 * var( --remBase ) ) , transparent calc( 20 * var( --remBase ) ) );
	background-color : var( --blue02 );
	> p{
		&:nth-of-type( 1 ){
			align-content : center;
			width : 100%;
			font-weight : 500;
			color : white;
			text-align : center;
			background-color : var( --blue02 );
		}
		&:nth-of-type( 2 ){
			display : grid;
			grid-template-columns : repeat( 3 , auto );
			&::before , &::after{
				width : auto;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : 0 0;
				background-size : contain;
			}
			&::before{
				aspect-ratio : 292/312;
				background-image : url( "../images/ui/parts/char04.webp" );
			}
			&::after{
				aspect-ratio : 292/312;
				background-image : url( "../images/ui/parts/char03.webp" ) type( "image/webp" );
			}
			span{
				display : block;
				align-content : center;
				width : 100%;
				margin-inline : auto;
				font-weight : 500;
				color : var( --blue02 );
				text-align : center;
				background-color : white;
				border-radius : 100vmax;
			}
			img{
				margin-inline : auto;
				filter : var( --filterWhite );
			}
		}
	}
	ul{
		background-color : white;
	}
	.tel{
		display : grid;
		>span{
			&:nth-of-type( 1 ) , &:nth-of-type( 2 ){
				align-content : center;
				font-weight : 600;
				line-height : 1.5;
				color : var( --blue03 );
				text-align : center;
				background-color : #ffea80;
				border-radius : 100vmax;
			}
			&:nth-of-type( 3 ){
				display : grid;
				grid-auto-flow : column;
				align-items : center;
				font-family : Roboto , sans-serif;
				font-weight : 700;
				line-height : 1;
				&::before{
					display : block;
					grid-row : 1/-1;
					grid-column : 1;
					width : auto;
					height : calc( 44 * var( --remBase ) );
					aspect-ratio : 24/32;
					margin-right : calc( 8 * var( --remBase ) );
					font-size : 0;
					content : "";
					background : url( "../images/ui/icon/tel.svg" ) left top / contain no-repeat;
				}
			}
		}
	}
	.line{
		--color : #5ec45e;
		box-shadow : 0 calc( 6 * var( --remBase ) ) 0 #3a8b3a;
	}
	.web{
		--color : #f55a5a;
		box-shadow : 0 calc( 6 * var( --remBase ) ) 0 #a24040;
	}
	:where( .line , .web ){
		display : grid;
		align-content : center;
		justify-content : space-between;
		background-color : var( --color );
		img{
			grid-row : 2/5;
			grid-column : 1;
			align-self : center;
		}
		span{
			font-weight : 700;
		}
		span:nth-of-type( 1 ){
			grid-row : 2;
			grid-column : 2;
			align-content : center;
			color : var( --color );
			text-align : center;
			background-color : white;
			border-radius : 100vmax;
		}
		span:nth-of-type( 2 ){
			grid-row : 4;
			grid-column : 2;
			color : white;
			text-align : center;
		}
	}
	.line{
		span:nth-of-type( 1 ){
			color : #3a8b3a;
		}
	}
	@media screen and ( width <= 768px ){
		width : calc( 456 * var( --viewportBase ) );
		padding-bottom : calc( 60 * var( --remBase ) );
		margin-inline : auto;
		border-radius : calc( 48 * var( --remBase ) );
		> p{
			&:nth-of-type( 1 ){
				padding-block : calc( 60 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
			}
			&:nth-of-type( 2 ){
				grid-template-rows : repeat( 3 , auto );
				grid-template-columns : 1fr auto 1fr;
				padding-inline : calc( 24 * var( --contentBase ) );
				margin-top : calc( -40 * var( --remBase ) );
				&::before , &::after{
					grid-row : 1;
					grid-column : 1/-1;
					height : calc( 86 * var( --remBase ) );
				}
				&::before{
					justify-self : start;
				}
				&::after{
					justify-self : end;
				}
			}
			span{
				grid-row : 2;
				grid-column : 2;
				height : calc( 27 * var( --remBase ) );
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
			img{
				grid-row : 3;
				grid-column : 2;
				height : calc( 42 * var( --remBase ) );
				margin-top : calc( 10 * var( --remBase ) );
			}
		}
		ul{
			width : calc( 436 * var( --contentBase ) );
			padding-inline : calc( 12 * var( --contentBase ) );
			padding-top : calc( 24 * var( --remBase ) );
			padding-bottom : calc( 20 * var( --remBase ) );
			margin-inline : auto;
			margin-top : calc( 36 * var( --remBase ) );
			border-radius : calc( 20 * var( --remBase ) );
		}
		.tel{
			grid-template-rows : calc( 34 * var( --remBase ) ) auto;
			grid-template-columns : 1fr calc( 156 * 100% / 412 ) calc( 18 * 100% / 412 ) calc( 156 * 100% / 412 ) 1fr;
			row-gap : calc( 4 * var( --remBase ) );
			justify-content : center;
			> span{
				&:nth-of-type( 1 ) , &:nth-of-type( 2 ){
					grid-row : 1;
					font-size : calc( 17 * var( --remBase ) );
					line-height : calc( 26 / 17 );
				}
				&:nth-of-type( 1 ){
					grid-column : 2;
				}
				&:nth-of-type( 2 ){
					grid-column : 4;
				}
				&:nth-of-type( 3 ){
					grid-row : 2;
					grid-column : 1/-1;
					column-gap : calc( 8 * var( --remBase ) );
					justify-content : center;
					font-size : calc( 48 * var( --remBase ) );
					line-height : calc( 72 / 48 );
					&::before{
						height : calc( 44 * var( --remBase ) );
					}
				}
			}
		}
		:where( .line , .web ){
			grid-template-rows : 1fr calc( 28 * var( --remBase ) ) calc( 10 * var( --remBase ) ) auto 1fr;
			grid-template-columns : auto 1fr;
			column-gap : calc( 20 * 100% / 362 );
			height : calc( 102 * var( --remBase ) );
			padding-inline : calc( 24 * 100% / 412 );
			background-color : var( --color );
			border-radius : calc( 12 * var( --remBase ) );
			img{
				grid-row : 2/5;
				grid-column : 1;
				align-self : center;
				height : calc( 56 * var( --remBase ) );
			}
			span:nth-of-type( 1 ){
				font-size : calc( 17 * var( --remBase ) );
				color : var( --color );
			}
			span:nth-of-type( 2 ){
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 34 / 24 );
			}
		}
		li:nth-child( 2 ){
			margin-top : calc( 12 * var( --remBase ) );
		}
		li:nth-child( 3 ){
			margin-top : calc( 18 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 52 * var( --remBase ) );
		margin-inline : calc( 40 * var( --viewportBase ) );
		border-radius : calc( 70 * var( --remBase ) );
		> p{
			&:nth-of-type( 1 ){
				height : calc( 188 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 36 / 24 );
			}
			&:nth-of-type( 2 ){
				grid-template-rows : 1fr auto auto 1fr;
				column-gap : calc( 70 * var( --remBase ) );
				justify-content : center;
				margin-top : calc( 52 * var( --remBase ) );
				&::before , &::after{
					grid-row : 1/-1;
					height : calc( 156 * var( --remBase ) );
				}
				&::before{
					grid-column : 1;
				}
				&::after{
					grid-column : 3;
				}
			}
			span{
				grid-row : 2;
				grid-column : 2;
				height : calc( 27 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
			img{
				grid-row : 3;
				grid-column : 2;
				height : calc( 70 * var( --remBase ) );
				margin-top : calc( 16 * var( --remBase ) );
			}
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 410 * 100% / 1080 ) );
			row-gap : calc( 12 * var( --remBase ) );
			column-gap : calc( 16 * 100% / 1080 );
			align-items : start;
			justify-content : center;
			padding-top : calc( 36 * var( --remBase ) );
			padding-bottom : calc( 60 * var( --remBase ) );
			margin-inline : auto;
			margin-top : calc( 40 * var( --remBase ) );
			border-radius : calc( 20 * var( --remBase ) );
		}
		li:nth-child( 1 ){
			grid-row : 1;
			grid-column : 1/-1;
		}
		.tel{
			grid-auto-flow : column;
			column-gap : calc( 24 * var( --remBase ) );
			align-items : center;
			justify-content : center;
			> span{
				&:nth-of-type( 3 ){
					grid-column : 1;
					column-gap : calc( 20 * var( --remBase ) );
					justify-content : center;
					font-size : calc( 77 * var( --remBase ) );
					line-height : calc( 116 / 77 );
					&::before{
						height : calc( 70 * var( --remBase ) );
					}
				}
				&:nth-of-type( 1 ) , &:nth-of-type( 2 ){
					width : auto;
					height : calc( 96 * var( --remBase ) );
					aspect-ratio : 1;
					font-size : calc( 17 * var( --remBase ) );
					line-height : calc( 26 / 17 );
				}
				&:nth-of-type( 1 ){
					grid-column : 2;
				}
				&:nth-of-type( 2 ){
					grid-column : 3;
				}
			}
		}
		li:nth-child( 2 ) , li:nth-child( 3 ){
			grid-row : 2;
		}
		:where( .line , .web ){
			grid-template-rows : 1fr calc( 28 * var( --remBase ) ) calc( 10 * var( --remBase ) ) auto 1fr;
			grid-template-columns : auto 1fr;
			column-gap : calc( 18 * 100% / 330 );
			height : calc( 98 * var( --remBase ) );
			padding-inline : calc( 20 * 100% / 370 );
			background-color : var( --color );
			border-radius : calc( 12 * var( --remBase ) );
			img{
				grid-row : 2/5;
				grid-column : 1;
				align-self : center;
				height : calc( 50 * var( --remBase ) );
			}
			span:nth-of-type( 1 ){
				font-size : calc( 17 * var( --remBase ) );
				color : var( --color );
			}
			span:nth-of-type( 2 ){
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 34 / 24 );
			}
		}
		li:nth-child( 2 ){
			grid-column : 1;
		}
		li:nth-child( 3 ){
			grid-column : 2;
		}
	}
	@media screen and ( 768px < width < 1320px ){
		ul{
			margin-inline : calc( 40 * var( --remBase ) );
		}
	}
	@media print , screen and ( width >= 1320px ){
		ul{
			max-width : 1080px;
		}
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	background-color : #f1f1f1;
	.logo{
		display : block;
		width : fit-content;
		span{
			display : block;
			align-content : center;
			font-weight : 700;
			color : white;
			text-align : center;
			background-color : #2ea7e0;
			border-radius : 100vmax;
		}
	}
	address{
		font-style : normal;
		font-weight : 500;
		.name{
			display : block;
		}
		.addresses{
			font-size : 0;
			> span{
				display : inline;
			}
		}
		dl{
			display : grid;
			grid-auto-flow : column;
			align-items : baseline;
			justify-content : start;
		}
	}
	nav{
		a{
			display : grid;
			grid-auto-flow : column;
			align-items : start;
			justify-content : start;
			font-weight : 500;
			&::before{
				display : block;
				width : auto;
				aspect-ratio : 14/21;
				font-size : 0;
				content : "";
				background : url( "../images/ui/arrow/right01.svg" ) left top / contain no-repeat;
				filter : invert( 45% ) sepia( 60% ) saturate( 3711% ) hue-rotate( 175deg ) brightness( 100% ) contrast( 88% );
			}
		}
	}
	.copyright{
		font-weight : 500;
		text-align : center;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 100 * var( --remBase ) );
		padding-bottom : calc( 32 * var( --remBase ) );
		.logo{
			span{
				height : calc( 27 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
			img{
				height : calc( 52 * var( --remBase ) );
				margin-top : calc( 4 * var( --remBase ) );
			}
		}
		address{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
			.addresses{
				> span{
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 27 / 18 );
				}
			}
			dl{
				margin-top : calc( 12 * var( --remBase ) );
			}
		}
		nav{
			margin-top : calc( 28 * var( --remBase ) );
			li + li{
				margin-top : calc( 16 * var( --remBase ) );
			}
			a{
				column-gap : calc( 16 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
				&::before{
					height : calc( 14 * var( --remBase ) );
					margin-top : calc( 9 * var( --remBase ) );
				}
			}
		}
		.copyright{
			margin-top : calc( 100 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 20 / 14 );
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : auto 1fr auto;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : space-between;
		padding-block : calc( 90 * var( --remBase ) );
		margin-top : calc( 60 * var( --remBase ) );
		.logo{
			grid-row : 1;
			grid-column : 1;
			span{
				height : calc( 24 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
			}
			img{
				height : calc( 64 * var( --remBase ) );
				margin-top : calc( 4 * var( --remBase ) );
			}
		}
		address{
			grid-row : 2;
			grid-column : 1;
			margin-top : calc( 10 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
			.addresses{
				> span{
					font-size : calc( 16 * var( --remBase ) );
					line-height : calc( 24 / 16 );
				}
			}
			dl{
				margin-top : calc( 10 * var( --remBase ) );
			}
		}
		nav{
			grid-row : 1/3;
			grid-column : 2;
			columns : 2;
			ul{
				display : flex;
				flex-direction : column;
				row-gap : calc( 24 * var( --remBase ) );
				column-gap : calc( 64 * var( --remBase ) );
				height : calc( ( 27 * 6 + 24 * 5 ) * var( --remBase ) );
			}
			a{
				column-gap : calc( 8 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
				&::before{
					height : calc( 14 * var( --remBase ) );
					margin-top : calc( 6.5 * var( --remBase ) );
				}
			}
		}
		.copyright{
			grid-row : 4;
			grid-column : 1/-1;
			margin-top : calc( 128 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 18 / 12 );
		}
	}
}