@charset "UTF-8";

/* --------------------------------------------
COLOR
--------------------------------------------- */
@property --serviceBlue{
	syntax : "<color>";
	inherits : false;
	initial-value : #213489;
}
@property --serviceBlue02{
	syntax : "<color>";
	inherits : false;
	initial-value : #012451;
}
@property --serviceBlue03{
	syntax : "<color>";
	inherits : false;
	initial-value : #064cb3;
}
@property --serviceYellow{
	syntax : "<color>";
	inherits : false;
	initial-value : #f1ff32;
}
@property --serviceRed{
	syntax : "<color>";
	inherits : false;
	initial-value : #ff3c40;
}
@property --serviceOrange{
	syntax : "<color>";
	inherits : false;
	initial-value : #f96519;
}
@property --serviceOrange02{
	syntax : "<color>";
	inherits : false;
	initial-value : #f3823e;
}
@property --serviceLineColor{
	syntax : "<color>";
	inherits : false;
	initial-value : #06c755;
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	z-index : 0;
	overflow : clip;
	&::before{
		position : absolute;
		bottom : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		font-size : 0;
		content : "";
		background-color : var( --serviceBlue );
	}
	> picture{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -2;
		width : 100%;
		img{
			width : 100%;
			height : auto;
		}
	}
	h1{
		> span{
			&:nth-of-type( 1 ){
				display : grid;
				grid-auto-flow : column;
				align-items : start;
				justify-content : start;
				img{
					filter : invert( 100% ) sepia( 1% ) saturate( 6146% ) hue-rotate( 193deg ) brightness( 118% ) contrast( 70% );
				}
				> span{
					display : grid;
					grid-auto-flow : column;
					align-items : baseline;
					justify-content : start;
					span{
						font-weight : 900;
						color : white;
					}
				}
			}
			&:nth-of-type( 2 ){
				display : block;
				font-weight : 900;
				color : var( --serviceYellow );
			}
		}
	}
	.ba{
		> p{
			position : absolute;
			z-index : 1;
			> span{
				> span{
					&:nth-of-type( 1 ){
						display : grid;
						grid-auto-flow : column;
						align-items : baseline;
						justify-content : center;
						> span{
							font-weight : 900;
							color : white;
						}
					}
					&:nth-of-type( 2 ){
						display : block;
						font-weight : 900;
						color : white;
						text-align : center;
					}
				}
			}
			> picture{
				position : absolute;
				inset : 0;
				top : 0;
				left : 0;
				z-index : -1;
				img{
					width : 100%;
					height : auto;
				}
			}
		}
		ol{
			p{
				position : relative;
			}
		}
	}
	> ul{
		display : grid;
		li{
			display : block;
			align-content : center;
			font-weight : 700;
			color : var( --serviceBlue );
			text-align : center;
			text-box : trim-both cap alphabetic;
		}
	}
	.contacts{
		> p{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			font-weight : 500;
			color : white;
			text-align : center;
			text-indent : .08em;
			letter-spacing : .08em;
			&::before , &::after{
				color : var( --serviceYellow );
			}
			&::before{
				content : "\\";
			}
			&::after{
				content : "\/";
			}
		}
	}
	.line{
		display : grid;
		> span{
			border-radius : 100vmax;
			&:nth-of-type( 1 ){
				position : relative;
				z-index : 1;
				display : grid;
				grid-row : 1/3;
				grid-column : 2;
				grid-auto-flow : column;
				align-content : center;
				align-items : baseline;
				justify-content : center;
				font-weight : 700;
				background-color : white;
				&::after{
					position : absolute;
					left : 50%;
					display : block;
					width : auto;
					aspect-ratio : 1;
					clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
					font-size : 0;
					content : "";
					background-color : #fff;
					translate : -50% 0;
				}
				span{
					color : #333;
				}
				.orange{
					color : var( --serviceOrange );
				}
			}
			&:nth-of-type( 2 ){
				position : relative;
				grid-row : 2/4;
				grid-column : 1/-1;
				background-color : var( --serviceLineColor );
				outline : solid calc( 2 * var( --designRemBase ) ) white;
				outline-offset : calc( -2 * var( --designRemBase ) );
				img{
					position : absolute;
					filter : var( --filterWhite );
				}
				> span{
					display : grid;
					grid-auto-flow : column;
					align-content : start;
					align-items : baseline;
					justify-content : start;
					font-weight : 700;
					color : var( --serviceYellow );
					span{
						text-align : center;
						text-indent : .08em;
						letter-spacing : .08em;
					}
				}
			}
		}
	}
	.tel{
		position : relative;
		display : grid;
		align-content : start;
		align-items : start;
		background-color : var( --serviceOrange02 );
		border-radius : 100vmax;
		outline : solid calc( 2 * var( --remBase ) ) white;
		outline-offset : calc( -2 * var( --remBase ) );
		> img{
			position : absolute;
			filter : var( --filterWhite );
		}
		> span{
			&:nth-of-type( 1 ){
				grid-row : 1;
				grid-column : 2;
				font-weight : 800;
				color : var( --serviceYellow );
				letter-spacing : .08em;
			}
			&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
				display : grid;
				grid-row : 1;
				grid-auto-flow : column;
				align-content : center;
				align-items : baseline;
				justify-content : center;
				font-weight : 800;
				color : var( --serviceOrange );
				background-color : white;
			}
			&:nth-of-type( 2 ){
				grid-column : 3;
			}
			&:nth-of-type( 3 ){
				grid-column : 5;
			}
			&:nth-of-type( 4 ){
				display : grid;
				grid-row : 2;
				grid-column : 1/-1;
				grid-auto-flow : column;
				align-items : baseline;
				justify-content : start;
				span{
					font-weight : 600;
					color : white;
					text-align : center;
					text-indent : .08em;
					letter-spacing : .08em;
				}
			}
		}
	}
	@media screen and ( width <= 768px ){
		height : calc( 617.76 * var( --designRemBase ) );
		padding-top : calc( 9.38 * var( --designRemBase ) );
		&::before{
			height : calc( 299.52 * var( --designRemBase ) );
		}
		> p{
			&:nth-of-type( 1 ){
				margin-left : calc( 20.36 * var( --d ) );
				img{
					height : calc( 49.41 * var( --designRemBase ) );
				}
			}
			&:nth-of-type( 2 ){
				margin-top : calc( ( 41.36 - 49.41 ) * var( --designRemBase ) );
				margin-left : calc( 16.52 * var( --designViewportBase ) );
				img{
					height : calc( 89.05 * var( --designRemBase ) );
				}
			}
		}
		h1{
			width : calc( 277.68 * var( --designViewportBase ) );
			padding-top : calc( 9.36 * var( --designRemBase ) );
			padding-bottom : calc( 11.44 * var( --designRemBase ) );
			margin-top : calc( 9.97 * var( --designRemBase ) );
			margin-left : calc( 12.48 * var( --designViewportBase ) );
			background-image : linear-gradient( to right , color-mix( in srgb , #041f4e 100% , transparent ) , color-mix( in srgb , #01468f 0% , transparent ) );
			> span{
				&:nth-of-type( 1 ){
					column-gap : calc( 6.02 * 100% / 264.31 );
					padding-left : calc( 13.37 * 100% / 277.68 );
					img{
						height : calc( 16.13 * var( --designRemBase ) );
						margin-top : calc( 2.59 * var( --designRemBase ) );
					}
					> span{
						span{
							font-size : calc( 18.72 * var( --designRemBase ) );
						}
						.s{
							font-size : calc( 16.64 * var( --designRemBase ) );
						}
					}
				}
				&:nth-of-type( 2 ){
					padding-left : calc( 9.36 * 100% / 277.68 );
					margin-top : calc( 5.96 * var( --designRemBase ) );
					font-size : calc( 35.36 * var( --designRemBase ) );
				}
			}
		}
		.ba{
			position : relative;
			margin-top : calc( -1.34 * var( --designRemBase ) );
			margin-left : calc( 9.36 * var( --designViewportBase ) );
			> p{
				top : calc( 47.1 * var( --designRemBase ) );
				left : calc( 144.56 * 100% / 380.64 );
				width : calc( 79 * 100% / 380.64 );
				height : calc( 59.5 * var( --designRemBase ) );
				padding-top : calc( 16.79 * var( --designRemBase ) );
				> span{
					text-shadow : calc( 4 * var( --designRemBase ) ) calc( 4 * var( --designRemBase ) color-mix( in sRGB , black 30% , transparent ) );
					> span{
						&:nth-of-type( 1 ){
							span{
								font-size : calc( 12.48 * var( --designRemBase ) );
								line-height : calc( 13.5 / 12.48 );
							}
							.s{
								font-size : calc( 10.4 * var( --designRemBase ) );
								line-height : calc( 13.5 / 10.4 );
							}
						}
						&:nth-of-type( 2 ){
							font-size : calc( 12.48 * var( --designRemBase ) );
							line-height : calc( 13.5 / 12.48 );
						}
					}
				}
			}
			ol{
				display : grid;
				grid-template-columns : repeat( 2 , calc( 185.12 * 100% / 380.64 ) );
				column-gap : calc( 1.04 * 100% / 380.64 );
				align-items : end;
				p{
					margin-left : calc( 5.2 * 100% / 185.12 );
					img{
						height : calc( 29.38 * var( --designRemBase ) );
					}
				}
				li > picture{
					img{
						width : 100%;
						height : auto;
					}
				}
				li:nth-child( 1 ){
					> picture{
						margin-top : calc( ( 2.89 - 29.38 ) * var( --remBase ) );
					}
				}
				li:nth-child( 2 ){
					> picture{
						margin-top : calc( ( 3.42 - 29.38 ) * var( --remBase ) );
					}
				}
			}
		}
		> ul{
			grid-template-columns : repeat( 2 , 50% );
			width : calc( 366.08 * var( --designViewportBase ) );
			padding-block : calc( 3.12 * var( --designRemBase ) );
			padding-inline : calc( 6.24 * var( --designViewportBase ) );
			margin-inline : auto;
			margin-top : calc( 9.36 * var( --designRemBase ) );
			background-color : white;
			border-radius : calc( 5.2 * var( --designRemBase ) );
			>li{
				height : calc( 26 * var( --designRemBase ) );
				font-size : calc( 15.6 * var( --designRemBase ) );
				text-align : center;
				text-indent : .08em;
				letter-spacing : .08em;
				&:nth-of-type( even ){
					border-left : dashed 1px #d6d6d6;
				}
				&:nth-of-type( n+3 ){
					border-top : dashed 1px #d6d6d6;
				}
			}
		}
		.contacts{
			width : calc( 338 * var( --designViewportBase ) );
			margin-inline : auto;
			margin-top : calc( 13.13 * var( --designRemBase ) );
			> p{
				justify-content : center;
				font-size : calc( 12.48 * var( --designRemBase ) );
			}
			ul{
				margin-top : calc( 11.83 * var( --designRemBase ) );
			}
			li + li{
				margin-top : calc( 12.48 * var( --designRemBase ) );
			}
		}
		.line{
			grid-template-rows : calc( 11.44 * var( --designRemBase ) ) calc( 11.44 * var( --designRemBase ) ) calc( 49.92 * var( --designRemBase ) );
			grid-template-columns : calc( 53.04 * 100% / 338 ) calc( 241.28 * 100% / 338 ) calc( 43.68 * 100% / 338 );
			> span{
				&:nth-of-type( 1 ){
					&::after{
						bottom : calc( -10.4 * var( --designRemBase ) );
						height : calc( 12.48 * var( --designRemBase ) );
					}
					span{
						font-size : calc( 13.52 * var( --designRemBase ) );
						.s{
							font-size : calc( 12.48 * var( --designRemBase ) );
						}
					}
				}
				&:nth-of-type( 2 ){
					> img{
						&:nth-of-type( 1 ){
							top : calc( 13.52 * var( --designRemBase ) );
							left : calc( 14.56 * 100% / 338 );
							height : calc( 34.68 * var( --designRemBase ) );
						}
						&:nth-of-type( 2 ){
							top : calc( 26 * var( --designRemBase ) );
							right : calc( 13.22 * 100% / 338 );
							height : calc( 14.24 * var( --designRemBase ) );
						}
					}
					> span{
						padding-top : calc( 17.68 * var( --designRemBase ) );
						padding-left : calc( 60.32 * 100% / 338 );
						span{
							font-size : calc( 24.96 * var( --designRemBase ) );
						}
						.s{
							font-size : calc( 20.8 * var( --designRemBase ) );
						}
					}
				}
			}
		}
		.tel{
			grid-template-columns : calc( 60.32 * 100% / 338 ) calc( 148.72 * 100% / 338 ) calc( 41.6 * 100% / 338 ) calc( 4.16 * 100% / 338 ) calc( 41.6 * 100% / 338 ) 1fr;
			row-gap : calc( 5.2 * var( --designRemBase ) );
			height : calc( 61.36 * var( --designRemBase ) );
			padding-top : calc( 9.36 * 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 ) );
				}
				&:nth-of-type( 2 ){
					top : calc( 26 * var( --designRemBase ) );
					right : calc( 13.22 * 100% / 338 );
					height : calc( 14.24 * var( --designRemBase ) );
				}
			}
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 14.56 * var( --designRemBase ) );
				}
				&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
					height : calc( 14.56 * var( --designRemBase ) );
					> span{
						font-size : calc( 12.48 * var( --designRemBase ) );
						&.s{
							font-size : calc( 9.36 * var( --designRemBase ) );
						}
					}
				}
				&:nth-of-type( 4 ){
					padding-left : calc( 77.32 * 100% / 338 );
					> span{
						font-size : calc( 22.88 * var( --designRemBase ) );
						&.s{
							font-size : calc( 18.72 * var( --designRemBase ) );
						}
					}
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : 1fr;
		grid-auto-flow : row;
		height : calc( 475 * var( --designRemBase ) );
		padding-top : calc( 18 * var( --designRemBase ) );
		&::before{
			height : calc( 130 * var( --designRemBase ) );
		}
		> p{
			&:nth-of-type( 1 ){
				margin-left : calc( 9 * var( --contentBase ) );
				img{
					height : calc( 42 * var( --designRemBase ) );
				}
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 17.21 * var( --designRemBase ) );
				margin-left : calc( 8 * var( --contentBase ) );
				img{
					height : calc( 47.01 * var( --designRemBase ) );
				}
			}
		}
		h1{
			width : calc( 541 * var( --contentBase ) );
			padding-top : calc( 28.24 * var( --designRemBase ) );
			padding-bottom : calc( 20 * var( --designRemBase ) );
			margin-top : calc( 11.78 * var( --designRemBase ) );
			margin-left : calc( 9 * var( --contentBase ) );
			background-image : linear-gradient( to right , color-mix( in srgb , #041f4e 100% , transparent ) , color-mix( in srgb , #01468f 0% , transparent ) );
			> span{
				&:nth-of-type( 1 ){
					column-gap : calc( 11.72 * 100% / 514.94 );
					padding-left : calc( 26.06 * 100% / 541 );
					img{
						height : calc( 31.43 * var( --designRemBase ) );
						margin-top : calc( .97 * var( --designRemBase ) );
					}
					> span{
						span{
							font-size : calc( 30 * var( --designRemBase ) );
						}
						.s{
							font-size : calc( 24 * var( --designRemBase ) );
						}
					}
				}
				&:nth-of-type( 2 ){
					padding-left : calc( 18 * 100% / 541 );
					margin-top : calc( 8.29 * var( --designRemBase ) );
					font-size : calc( 60 * var( --designRemBase ) );
					letter-spacing : .08em;
				}
			}
		}
		.ba{
			position : absolute;
			top : calc( 22 * var( --designRemBase ) );
			left : calc( 50% + 247 * var( --designViewportBase ) );
			width : calc( 275.86 * var( --designViewportBase ) );
			> p{
				top : calc( 165 * var( --designRemBase ) );
				left : calc( 59 * 100% / 275.86 );
				width : calc( 165 * 100% / 275.86 );
				height : calc( 67 * var( --designRemBase ) );
				padding-top : calc( 8.83 * var( --designRemBase ) );
				> span{
					text-shadow : calc( 4 * var( --designRemBase ) ) calc( 4 * var( --designRemBase ) color-mix( in sRGB , black 30% , transparent ) );
					> span{
						&:nth-of-type( 1 ){
							span{
								font-size : calc( 20 * var( --designRemBase ) );
								line-height : calc( 25 / 20 );
							}
							.s{
								font-size : calc( 16 * var( --designRemBase ) );
								line-height : calc( 25 / 16 );
							}
						}
						&:nth-of-type( 2 ){
							font-size : calc( 20 * var( --designRemBase ) );
							line-height : calc( 25 / 20 );
						}
					}
				}
			}
			ol{
				li + li{
					margin-top : calc( 80.26 * var( --designRemBase ) );
				}
				p{
					margin-left : calc( 6 * 100% / 275.86 );
					img{
						height : calc( 45.31 * var( --designRemBase ) );
					}
				}
				li > picture{
					margin-top : calc( ( 7.78 - 45.31 ) * var( --designRemBase ) );
					img{
						width : 100%;
						height : auto;
					}
				}
			}
		}
		> ul{
			grid-template-columns : calc( 161 * 100% / 1071 ) calc( 207 * 100% / 1071 ) calc( 128 * 100% / 1071 ) calc( 210 * 100% / 1071 );
			column-gap : calc( 12 * 100% / 1071 );
			justify-content : start;
			margin-top : calc( 13 * var( --designRemBase ) );
			margin-left : calc( 9 * var( --contentBase ) );
			>li{
				height : calc( 35 * var( --designRemBase ) );
				font-size : calc( 20 * var( --designRemBase ) );
				text-align : center;
				text-indent : .08em;
				letter-spacing : .08em;
				background-color : white;
				border-radius : calc( 5 * var( --designRemBase ) );
			}
		}
		.contacts{
			position : relative;
			height : calc( 130 * var( --designRemBase ) );
			padding-top : calc( 12 * var( --designRemBase ) );
			margin-left : calc( 13 * var( --contentBase ) );
			> picture{
				position : absolute;
				bottom : 0;
				left : calc( 642 * 100% / 1067 );
				img{
					height : calc( 138 * var( --designRemBase ) );
				}
			}
			> p{
				justify-content : start;
				margin-left : calc( 147 * 100% / 1067 );
				font-size : calc( 18 * var( --designRemBase ) );
			}
			ul{
				position : relative;
				z-index : 1;
				display : grid;
				grid-template-columns : repeat( 2 , calc( 325 * 100% / 1067 ) );
				column-gap : calc( 17 * 100% / 1067 );
				align-items : end;
				margin-top : calc( 16 * var( --designRemBase ) );
				> li{
					display : contents;
				}
			}
		}
		.line{
			grid-template-rows : calc( 11 * var( --designRemBase ) ) calc( 11 * var( --designRemBase ) ) calc( 48 * var( --designRemBase ) );
			grid-template-columns : calc( 51 * 100% / 325 ) calc( 232 * 100% / 325 ) calc( 42 * 100% / 325 );
			> span{
				&:nth-of-type( 1 ){
					&::after{
						bottom : calc( -10 * var( --designRemBase ) );
						height : calc( 12 * var( --designRemBase ) );
					}
					span{
						font-size : calc( 13 * var( --designRemBase ) );
						.s{
							font-size : calc( 12 * var( --designRemBase ) );
						}
					}
				}
				&:nth-of-type( 2 ){
					> img{
						&:nth-of-type( 1 ){
							top : calc( 13 * var( --designRemBase ) );
							left : calc( 14 * 100% / 325 );
							height : calc( 33.35 * var( --designRemBase ) );
						}
						&:nth-of-type( 2 ){
							top : calc( 25 * var( --designRemBase ) );
							right : calc( 12.71 * 100% / 325 );
							height : calc( 13.69 * var( --designRemBase ) );
						}
					}
					> span{
						padding-top : calc( 18 * var( --designRemBase ) );
						padding-left : calc( 58 * 100% / 325 );
						span{
							font-size : calc( 24 * var( --designRemBase ) );
						}
						.s{
							font-size : calc( 20 * var( --designRemBase ) );
						}
					}
				}
			}
		}
		.tel{
			grid-template-columns : calc( 58 * 100% / 325 ) calc( 143 * 100% / 325 ) calc( 40 * 100% / 325 ) calc( 4 * 100% / 325 ) calc( 40 * 100% / 325 ) 1fr;
			row-gap : calc( 5 * var( --designRemBase ) );
			height : calc( 59 * var( --designRemBase ) );
			padding-top : calc( 9 * var( --designRemBase ) );
			> img{
				&:nth-of-type( 1 ){
					top : calc( 13 * var( --designRemBase ) );
					left : calc( 14 * 100% / 325 );
					height : calc( 35.15 * var( --designRemBase ) );
				}
				&:nth-of-type( 2 ){
					top : calc( 25 * var( --designRemBase ) );
					right : calc( 12.71 * 100% / 325 );
					height : calc( 13.69 * var( --designRemBase ) );
				}
			}
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 14 * var( --designRemBase ) );
				}
				&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
					height : calc( 14 * var( --designRemBase ) );
					> span{
						font-size : calc( 12 * var( --designRemBase ) );
						&.s{
							font-size : calc( 9 * var( --designRemBase ) );
						}
					}
				}
				&:nth-of-type( 4 ){
					padding-left : calc( 74 * 100% / 325 );
					> span{
						font-size : calc( 22 * var( --designRemBase ) );
						&.s{
							font-size : calc( 18 * var( --designRemBase ) );
						}
					}
				}
			}
		}
	}
}