@charset "UTF-8";

/* --------------------------------------------
COLOR
--------------------------------------------- */
@property --servicePink{
	syntax : "<color>";
	inherits : false;
	initial-value : #ee7a83;
}
@property --servicePink02{
	syntax : "<color>";
	inherits : false;
	initial-value : #fef0ed;
}
@property --serviceBrown{
	syntax : "<color>";
	inherits : false;
	initial-value : #8c5849;
}
@property --serviceYellow{
	syntax : "<color>";
	inherits : false;
	initial-value : #f1ff32;
}
@property --serviceOrange{
	syntax : "<color>";
	inherits : false;
	initial-value : #f3823e;
}
@property --serviceLineColor{
	syntax : "<color>";
	inherits : false;
	initial-value : #06c755;
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
@media ( prefers-contrast : no-preference ){
	#mv{
		hgroup{
			h1{
				> span:nth-of-type( 2 ){
					width : fit-content;
					span{
						background : linear-gradient( to right , #f3823e , #ee6a72 );
						-webkit-background-clip : text;
						-webkit-text-fill-color : transparent;
					}
				}
			}
		}
	}
}
@media ( prefers-contrast : more ){
	#mv{
		hgroup{
			h1{
				> span:nth-of-type( 2 ) span{
					color : var( --servicePink );
				}
			}
		}
	}
}
#mv{
	position : relative;
	z-index : 0;
	overflow : clip;
	> picture{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -2;
		width : 100%;
		img{
			width : 100%;
			height : auto;
		}
	}
	hgroup{
		p{
			img{
				filter : invert( 50% ) sepia( 88% ) saturate( 333% ) hue-rotate( 307deg ) brightness( 94% ) contrast( 95% );
			}
			span span{
				color : var( --serviceBrown );
			}
			.pink{
				font-weight : 600;
				color : var( --servicePink );
			}
			> span{
				> span{
					&:nth-of-type( 1 ){
						span{
							font-weight : 800;
						}
						.s{
							font-weight : 600;
						}
					}
					&:nth-of-type( 2 ){
						span{
							font-weight : 600;
						}
					}
				}
			}
		}
		h1{
			> span{
				&:nth-of-type( 1 ){
					display : grid;
					grid-auto-flow : column;
					align-items : baseline;
					justify-content : start;
					span{
						font-weight : 800;
						color : var( --serviceBrown );
						letter-spacing : .08em;
					}
					[data-before]{
						position : relative;
						z-index : 0;
						&::before{
							position : absolute;
							top : 50%;
							left : 50%;
							z-index : -1;
							color : white;
							filter : blur( calc( 4.16 * var( --designRemBase ) ) );
							translate : -50% -50%;
							-webkit-text-stroke : calc( 4.16 * var( --designRemBase ) ) #fff;
						}
					}
				}
				&:nth-of-type( 2 ){
					position : relative;
					z-index : 0;
					display : block;
					letter-spacing : .1em;
					span{
						position : relative;
						z-index : 0;
						display : block;
						font-weight : 800;
					}
					&::before{
						position : absolute;
						top : 50%;
						left : 50%;
						z-index : -1;
						color : white;
						filter : blur( calc( 4.16 * var( --designRemBase ) ) );
						translate : -50% -50%;
						-webkit-text-stroke : calc( 4.16 * var( --designRemBase ) ) #fff;
					}
				}
			}
		}
	}
	> ul{
		&:nth-of-type( 1 ){
			li{
				display : grid;
				grid-auto-flow : column;
				align-items : center;
				background-color : color-mix( in sRGB , white 90% , transparent );
				span{
					font-weight : 700;
					color : var( --serviceBrown );
					letter-spacing : .08em;
					text-box : trim-both cap alphabetic;
				}
			}
		}
		&:nth-of-type( 2 ){
			li{
				span{
					font-weight : 800;
					color : var( --serviceBrown );
					letter-spacing : .08em;
				}
			}
		}
	}
	@media screen and ( width <= 768px ){
		height : calc( 617.76 * var( --designRemBase ) );
		padding-top : calc( 12.48 * var( --designRemBase ) );
		hgroup{
			p{
				position : relative;
				width : calc( 345.28 * var( --designViewportBase ) );
				height : calc( 52 * var( --designRemBase ) );
				padding-top : calc( 8.32 * var( --designRemBase ) );
				margin-left : calc( 22.88 * var( --designViewportBase ) );
				background-color : color-mix( in srgb , #fceadd 53% , transparent );
				border-radius : 100vmax;
				outline : solid 1px var( --servicePink );
				outline-offset : -1px;
				&::after{
					position : absolute;
					bottom : calc( -8.32 * var( --designRemBase ) );
					left : 50%;
					display : block;
					width : auto;
					height : calc( 8.32 * var( --designRemBase ) );
					aspect-ratio : 12.48/8.32;
					clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
					font-size : 0;
					content : "";
					background-color : var( --servicePink );
					translate : -50% 0;
				}
				img{
					height : calc( 24 * var( --designRemBase ) );
				}
				> span{
					display : block;
					> span{
						&:nth-of-type( 1 ){
							display : grid;
							grid-auto-flow : column;
							column-gap : calc( 5.34 * 100% / 345.28 );
							align-items : center;
							justify-content : center;
							img{
								height : calc( 16.64 * var( --designRemBase ) );
							}
							> span{
								> span{
									font-size : calc( 14.56 * var( --designRemBase ) );
								}
								.s{
									font-size : calc( 12.48 * var( --designRemBase ) );
								}
							}
						}
						&:nth-of-type( 2 ){
							display : block;
							text-align : center;
							span{
								font-size : calc( 16.64 * var( --designRemBase ) );
								letter-spacing : .01em;
							}
							.s{
								font-size : calc( 14.56 * var( --designRemBase ) );
							}
						}
					}
				}
			}
			h1{
				margin-top : calc( 22.88 * var( --designRemBase ) );
				> span{
					&:nth-of-type( 1 ){
						margin-left : calc( 19.76 * var( --designViewportBase ) );
						span{
							font-size : calc( 18.73 * var( --designRemBase ) );
						}
						.s{
							font-size : calc( 14.56 * var( --designRemBase ) );
						}
					}
					&:nth-of-type( 2 ){
						margin-top : calc( 10.4 * var( --designRemBase ) );
						margin-left : calc( 19.76 * var( --designViewportBase ) );
						font-size : calc( 52 * var( --designRemBase ) );
					}
				}
			}
		}
		> ul{
			&:nth-of-type( 1 ){
				margin-top : calc( 21.84 * var( --designRemBase ) );
				margin-left : calc( 19.76 * var( --designViewportBase ) );
				> li{
					column-gap : calc( 10.26 * var( --designRemBase ) );
					width : fit-content;
					height : calc( 22.88 * var( --designRemBase ) );
					padding-left : calc( 11.44 * var( --designRemBase ) );
					padding-right : calc( 17.68 * var( --designRemBase ) );
					border-radius : 0 calc( 10.4 * var( --designRemBase ) ) 0 0;
					+ li{
						margin-top : calc( 8.32 * var( --designRemBase ) );
					}
					img{
						height : calc( 15.96 * var( --designRemBase ) );
					}
					span{
						font-size : calc( 12.48 * var( --designRemBase ) );
					}
				}
			}
			&:nth-of-type( 2 ){
				display : grid;
				grid-template-columns : repeat( 3 , calc( 114.4 * 100% / 366.08 ) );
				justify-content : space-between;
				width : calc( 366.08 * var( --designViewportBase ) );
				margin-inline : auto;
				margin-top : calc( 13.52 * var( --designRemBase ) );
				li + li{
					position : relative;
				}
				li + li::before{
					position : absolute;
					top : calc( 23.92 * var( --designRemBase ) );
					left : -.5px;
					display : block;
					width : 1px;
					height : calc( 72.8 * var( --designRemBase ) );
					font-size : 0;
					content : "";
					background-color : #d9d9d9;
				}
				img{
					display : block;
					width : auto;
					height : calc( 44.72 * var( --designRemBase ) );
					aspect-ratio : 1;
					margin-inline : auto;
					margin-bottom : calc( 6.24 * var( --designRemBase ) );
					background-color : #fceadd;
					border-radius : 50%;
				}
				span{
					display : block;
					font-size : calc( 12.48 * var( --designRemBase ) );
					line-height : calc( 14.6 / 12.48 );
					text-align : center;
					text-indent : .08em;
					letter-spacing : .08em;
				}
				li:nth-child( 1 ){
					img{
						padding-block : calc( ( 44.72 - 23.3 ) / 2 * var( --designRemBase ) );
					}
				}
				li:nth-child( 2 ){
					img{
						padding-block : calc( ( 44.72 - 28.08 ) / 2 * var( --designRemBase ) );
					}
				}
				li:nth-child( 3 ){
					img{
						padding-block : calc( ( 44.72 - 26.61 ) / 2 * var( --designRemBase ) );
					}
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : auto  calc( 24 * var( --designRemBase ) ) calc( 80 * var( --designRemBase ) ) calc( 18 * var( --designRemBase ) ) calc( 129 * var( --designRemBase ) );
		grid-template-columns : calc( 707 * var( --contentBase ) ) calc( 373 * var( --contentBase ) );
		height : calc( 473 * var( --designRemBase ) );
		padding-top : calc( 30 * var( --designRemBase ) );
		&::before{
			position : absolute;
			bottom : 0;
			left : 0;
			z-index : -1;
			display : block;
			width : 100%;
			height : calc( 112 * var( --designRemBase ) );
			font-size : 0;
			content : "";
			background-color : var( --servicePink02 );
		}
		hgroup{
			grid-row : 1;
			grid-column : 1;
			p{
				position : relative;
				padding-left : calc( 24.42 * 100% / 707 );
				margin-left : calc( 15.58 * 100% / 707 );
				img{
					position : absolute;
					top : calc( .1 * var( --designRemBase ) );
					left : 0;
					height : calc( 24 * var( --designRemBase ) );
				}
				> span{
					display : grid;
					grid-auto-flow : column;
					align-items : baseline;
					justify-content : start;
					width : fit-content;
					padding-bottom : calc( 7 * var( --designRemBase ) );
					border-bottom : solid 1px #d6d6d6;
					> span{
						&:nth-of-type( 1 ){
							span{
								font-size : calc( 20 * var( --designRemBase ) );
								letter-spacing : .01em;
							}
							.s{
								font-size : calc( 18 * var( --designRemBase ) );
							}
						}
						&:nth-of-type( 2 ){
							span{
								font-size : calc( 20 * var( --designRemBase ) );
								letter-spacing : .01em;
							}
							.s{
								font-size : calc( 18 * var( --designRemBase ) );
							}
						}
					}
				}
			}
			h1{
				margin-top : calc( 24 * var( --designRemBase ) );
				> span{
					&:nth-of-type( 1 ){
						margin-left : calc( 13 * 100% / 707 );
						span{
							font-size : calc( 26 * var( --designRemBase ) );
						}
						.s{
							font-size : calc( 20 * var( --designRemBase ) );
						}
					}
					&:nth-of-type( 2 ){
						margin-top : calc( 14.86 * var( --designRemBase ) );
						margin-left : calc( 25 * 100% / 707 );
						font-size : calc( 100 * var( --designRemBase ) );
					}
				}
			}
		}
		> ul{
			&:nth-of-type( 1 ){
				grid-row : 1/4;
				grid-column : 2;
				align-self : end;
				> li{
					column-gap : calc( 16 * var( --designRemBase ) );
					width : fit-content;
					height : calc( 36 * var( --designRemBase ) );
					padding-left : calc( 21 * var( --designRemBase ) );
					padding-right : calc( 16 * var( --designRemBase ) );
					margin-left : auto;
					border-radius : calc( 10 * var( --designRemBase ) ) 0 0 0;
					+ li{
						margin-top : calc( 10 * var( --designRemBase ) );
					}
					img{
						height : calc( 24 * var( --designRemBase ) );
					}
					span{
						font-size : calc( 16 * var( --designRemBase ) );
					}
				}
			}
			&:nth-of-type( 2 ){
				display : grid;
				grid-row : 3;
				grid-column : 1;
				grid-auto-flow : column;
				column-gap : calc( 30 * 100% / 620.48 );
				justify-content : space-between;
				width : calc( 646 * 100% / 707 );
				padding-block : calc( 12 * var( --designRemBase ) );
				padding-left : calc( 11 * 100% / 646 );
				padding-right : calc( 14.52 * 100% / 646 );
				margin-left : calc( 13 * 100% / 707 );
				background-color : white;
				border-radius : calc( 10 * var( --designRemBase ) );
				> li{
					display : grid;
					grid-auto-flow : column;
					align-items : center;
					justify-content : start;
					height : 100%;
					+ li{
						position : relative;
						&::before{
							top : 0;
							display : block;
							width : 1px;
							height : 100%;
							font-size : 0;
							content : "";
							background-color : #d9d9d9;
						}
					}
				}
				span{
					font-size : calc( 17 * var( --designRemBase ) );
					line-height : calc( 24 / 17 );
				}
				li:nth-child( 1 ){
					column-gap : calc( 18.67 * var( --designRemBase ) );
					img{
						height : calc( 26.61 * var( --designRemBase ) );
					}
				}
				li:nth-child( 2 ){
					column-gap : calc( 15.96 * var( --designRemBase ) );
					&::before{
						left : calc( -21.09 * var( --designRemBase ) );
					}
					img{
						height : calc( 28.69 * var( --designRemBase ) );
					}
				}
				li:nth-child( 3 ){
					column-gap : calc( 11.86 * var( --designRemBase ) );
					&::before{
						left : calc( -8.8 * var( --designRemBase ) );
					}
					img{
						height : calc( 28.72 * var( --designRemBase ) );
					}
				}
			}
		}
	}
}
#mvContacts{
	h2{
		align-content : center;
		font-weight : 800;
		color : white;
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
		background-color : var( --servicePink );
		border-radius : 100vmax;
		text-box : trim-both cap alphabetic;
	}
	> p{
		font-weight : 500;
		color : #333;
		letter-spacing : .1em;
	}
	.tel , .line{
		position : relative;
		outline-style : solid;
		outline-color : white;
		> img{
			position : absolute;
			filter : var( --filterWhite );
		}
	}
	.tel{
		background-color : var( --serviceOrange );
		> span{
			> span{
				color : white;
			}
			&:nth-of-type( 1 ){
				display : grid;
				grid-auto-flow : column;
				align-items : baseline;
				justify-content : start;
				span{
					font-weight : 600;
					letter-spacing : .08em;
				}
			}
			&:nth-of-type( 2 ){
				display : block;
				font-weight : 500;
				color : white;
			}
		}
	}
	.line{
		background-color : var( --serviceLineColor );
		> span{
			> span{
				font-weight : 700;
				color : var( --serviceYellow );
				letter-spacing : .08em;
			}
		}
	}
	@media screen and ( width <= 768px ){
		position : relative;
		z-index : 0;
		padding-bottom : calc( 16.64 * var( --designRemBase ) );
		margin-top : calc( 26.16 * var( --designRemBase ) );
		&::before{
			position : absolute;
			top : calc( 11.44 * var( --designRemBase ) );
			left : 50%;
			z-index : -1;
			display : block;
			width : calc( 364 * var( --designViewportBase ) );
			height : calc( 100% - 11.44 * var( --designRemBase ) );
			font-size : 0;
			content : "";
			background-color : var( --servicePink02 );
			border-radius : calc( 10.4 * var( --designRemBase ) );
			translate : -50% 0;
		}
		h2{
			width : calc( 260 * var( --designViewportBase ) );
			height : calc( 21.35 * var( --designRemBase ) );
			margin-inline : auto;
			font-size : calc( 14.56 * var( --designRemBase ) );
		}
		> p{
			display : grid;
			grid-auto-flow : column;
			justify-content : center;
			margin-top : calc( 12.97 * var( --designRemBase ) );
			font-size : calc( 12.48 * var( --designRemBase ) );
			&::before , &::after{
				color : var( --servicePink );
			}
			&::before{
				content : "\\";
			}
			&::after{
				content : "\/";
			}
		}
		ul{
			width : calc( 338 * var( --designViewportBase ) );
			margin-inline : auto;
			margin-top : calc( 9.36 * var( --designRemBase ) );
		}
		li + li{
			margin-top : calc( 9.36 * var( --designRemBase ) );
		}
		.tel , .line{
			display : block;
			height : calc( 61.36 * var( --designRemBase ) );
			border-radius : calc( 20.8 * var( --designRemBase ) );
			outline-width : calc( 2 * var( --designRemBase ) );
			outline-offset : calc( -2 * var( --designRemBase ) );
			box-shadow : 0 calc( 4.16 * var( --designRemBase ) ) calc( 4.16 * var( --designRemBase ) ) color-mix( in srgb , #333 60% , transparent );
			> img{
				&:nth-of-type( 2 ){
					top : calc( 26 * var( --designRemBase ) );
					right : calc( 13.22 * 100% / 338 );
					height : calc( 14.24 * var( --designRemBase ) );
				}
			}
		}
		.tel{
			padding-top : calc( 10.4 * var( --designRemBase ) );
			> img{
				&:nth-of-type( 1 ){
					top : calc( 13.52 * var( --designRemBase ) );
					left : calc( 14.56 * 100% / 338 );
					height : calc( 36.55 * var( --designRemBase ) );
				}
			}
			> span{
				&:nth-of-type( 1 ){
					margin-left : calc( 77.32 * 100% / 338 );
					> span{
						font-size : calc( 22.88 * var( --designRemBase ) );
					}
					.s{
						font-size : calc( 18.72 * var( --designRemBase ) );
					}
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 4.16 * var( --designRemBase ) );
					margin-left : calc( 125.6 * 100% / 338 );
					font-size : calc( 12.48 * var( --designRemBase ) );
				}
			}
		}
		.line{
			padding-top : calc( 17.68 * var( --designRemBase ) );
			> img{
				&:nth-of-type( 1 ){
					top : calc( 13.52 * var( --designRemBase ) );
					left : calc( 14.56 * 100% / 338 );
					height : calc( 34.68 * var( --designRemBase ) );
				}
			}
			> span{
				margin-left : calc( 60.32 * 100% / 338 );
				> span{
					font-size : calc( 24.96 * var( --designRemBase ) );
				}
				.s{
					font-size : calc( 20.8 * var( --designRemBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		position : relative;
		display : grid;
		grid-template-columns : calc( 232 * 100% / 1067 ) calc( 439 * 100% / 1067 ) calc( 36 * 100% / 1067 ) calc( 113 * 100% / 1067 ) 1fr;
		grid-row : 5;
		grid-column : 1/-1;
		row-gap : calc( 22 * var( --designRemBase ) );
		align-content : start;
		align-items : start;
		margin-left : calc( 13 * var( --contentBase ) );
		h2{
			grid-row : 1;
			grid-column : 2/5;
			height : calc( 34 * var( --designRemBase ) );
			font-size : calc( 20 * var( --designRemBase ) );
		}
		> picture{
			position : absolute;
			bottom : 0;
			left : calc( 924 * 100% / 1067 );
			img{
				height : calc( 120 * var( --designRemBase ) );
			}
		}
		> p{
			grid-row : 2;
			grid-column : 4/6;
			padding-top : calc( 9 * var( --designRemBase ) );
			font-size : calc( 15 * var( --designRemBase ) );
			line-height : calc( 20 / 15 );
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 325 * 100% / 661 ) );
			grid-row : 2;
			grid-column : 1/3;
			align-items : start;
			justify-content : space-between;
		}
		li{
			display : contents;
		}
		.tel , .line{
			height : calc( 59 * var( --designRemBase ) );
			border-radius : calc( 20 * var( --designRemBase ) );
			outline-width : calc( 2 * var( --designRemBase ) );
			outline-offset : calc( -2 * var( --designRemBase ) );
			box-shadow : 0 calc( 4 * var( --designRemBase ) ) calc( 4 * var( --designRemBase ) ) color-mix( in srgb , #333 60% , transparent );
			> img{
				&:nth-of-type( 2 ){
					top : calc( 25 * var( --designRemBase ) );
					right : calc( 12.71 * 100% / 325 );
					height : calc( 13.69 * var( --designRemBase ) );
				}
			}
		}
		.tel{
			padding-top : calc( 10 * var( --designRemBase ) );
			> img{
				&:nth-of-type( 1 ){
					top : calc( 13 * var( --designRemBase ) );
					left : calc( 14 * 100% / 325 );
					height : calc( 35.15 * var( --designRemBase ) );
				}
			}
			> span{
				&:nth-of-type( 1 ){
					margin-left : calc( 74 * 100% / 325 );
					> span{
						font-size : calc( 22 * var( --designRemBase ) );
					}
					.s{
						font-size : calc( 18 * var( --designRemBase ) );
					}
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 4 * var( --designRemBase ) );
					margin-left : calc( 121 * 100% / 325 );
					font-size : calc( 12 * var( --designRemBase ) );
				}
			}
		}
		.line{
			padding-top : calc( 18 * var( --designRemBase ) );
			> img{
				&:nth-of-type( 1 ){
					top : calc( 13 * var( --designRemBase ) );
					left : calc( 14 * 100% / 325 );
					height : calc( 33.35 * var( --designRemBase ) );
				}
			}
			> span{
				margin-left : calc( 59 * 100% / 325 );
				> span{
					font-size : calc( 24 * var( --designRemBase ) );
				}
				.s{
					font-size : calc( 20 * var( --designRemBase ) );
				}
			}
		}
	}
}