@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--headerHeight : calc( 76 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--headerHeight : calc( 86 * var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	padding-top : var( --headerHeight );
	font-size : calc( 16 * var( --remBase ) );
}

/* --------------------------------------------
WRAPPER , CONTAINER , GRID CONTAINER
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--wrapPaddingInline : max( calc( ( 100% - ( var( --contentWidth ) * 1px ) ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
	}
}
:root{
	--containerWidth : calc( var( --contentBase ) * 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 <= 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.container{
	width : var( --containerWidth );
	margin-inline : auto;
}
.container-sp{
	@media screen and ( width <= 768px ){
		width : var( --containerWidth );
		margin-inline : auto;
	}
}
.container-pc{
	@media print , screen and ( width > 768px ){
		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 > 768px ){
		display : none;
	}
}
.is-pc{
	@media screen and ( width <= 768px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 768px ){
		display : none;
	}
	@media print , screen and ( width >= 1040px ){
		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 <= 768px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 768px ){
		width : 100%;
		height : auto;
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	width : 100%;
	height : var( --headerHeight );
	background-color : white;
	.logo{
		display : block;
	}
	@media screen and ( width <= 768px ){
		display : block;
		align-content : center;
		padding-inline : calc( 16 * var( --viewportBase ) );
		box-shadow : 0 calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent );
		.logo{
			img{
				height : calc( 36 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		align-items : center;
		.logo{
			grid-row : 1;
			grid-column : 2;
			img{
				height : calc( 57 * var( --remBase ) );
			}
		}
	}
	@media screen and ( 768px < width < 1480px ){
		grid-template-columns : calc( 20 * var( --viewportBase ) ) auto 1fr calc( 524 * var( --viewportBase ) ) calc( 24 * var( --viewportBase ) ) calc( 44 * var( --viewportBase ) ) calc( 20 * var( --viewportBase ) );
	}
	@media ( width >= 1480px ){
		grid-template-columns : calc( ( 100% - 1440px ) / 2 ) auto 1fr 524px 24px 44px calc( ( 100% - 1440px ) / 2 );
	}
}
#headerContacts{
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : repeat( 2 , calc( 250 * 100% / 524 ) );
		grid-column : 4;
		align-items : center;
		justify-content : space-between;
		p{
			font-size : calc( 12 * var( --remBase ) );
			text-align : center;
		}
		a{
			display : block;
			height : calc( 48 * var( --remBase ) );
			margin-top : calc( 2 * var( --remBase ) );
			color : white;
			border-radius : calc( 10 * var( --remBase ) );
			box-shadow : 0 calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent );
		}
		.tel{
			display : grid;
			grid-template-rows : 1fr auto auto 1fr;
			row-gap : calc( 2 * var( --remBase ) );
			justify-content : space-between;
			padding-inline : calc( 20 * 100% / 250 );
			background-color : var( --brown );
			img{
				grid-row : 1/-1;
				align-self : center;
				&:nth-of-type( 1 ){
					grid-column : 1;
					height : calc( 20 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					grid-column : 3;
					height : calc( 20 * var( --remBase ) );
				}
			}
			span{
				grid-column : 2;
				&:nth-of-type( 1 ){
					grid-row : 2;
					font-size : calc( 16 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					grid-row : 3;
					font-size : calc( 14 * var( --remBase ) );
				}
			}
		}
		.line{
			display : grid;
			grid-auto-flow : column;
			column-gap : calc( 6 * 100% / 250 );
			align-items : center;
			justify-content : center;
			color : white;
			background-color : var( --lineGreen );
			img{
				height : calc( 20 * var( --remBase ) );
			}
			span{
				font-size : calc( 16 * var( --remBase ) );
				text-box : trim-both cap alphabetic;
			}
		}
	}
}
#menuBtn{
	position : fixed;
	z-index : 12;
	width : auto;
	height : calc( 44 * var( --remBase ) );
	aspect-ratio : 1;
	border-block : solid calc( 10 * var( --remBase ) ) transparent;
	border-inline : solid calc( 6 * var( --remBase ) ) transparent;
	span{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		transition : all .4s;
		&:nth-of-type( 1 ){
			top : 0;
		}
		&:nth-of-type( 4 ){
			bottom : 0;
		}
	}
	&[aria-expanded="true"]{
		span:nth-of-type( 1 ){
			scale : 0;
			translate : calc( $( top ) var( --remBase ) ) 0;
		}
		span:nth-of-type( 2 ){
			rotate : -45deg;
		}
		span:nth-of-type( 3 ){
			rotate : 45deg;
		}
		span:nth-of-type( 4 ){
			scale : 0;
			translate : calc( -$( top ) var( --remBase ) ) 0;
		}
	}
	> span{
		height : calc( 3 * var( --remBase ) );
		background-color : var( --base );
		border-radius : 100vmax;
		&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
			top : calc( 10.5 * var( --remBase ) );
		}
	}
	@media screen and ( width <= 768px ){
		top : calc( 16 * var( --remBase ) );
		right : calc( 16 * var( --viewportBase ) );
	}
	@media print , screen and ( width > 768px ){
		top : calc( 21 * var( --remBase ) );
	}
	@media screen and ( 768px < width < 1480px ){
		left : calc( 1416 * 100% / 1480 );
	}
	@media ( width >= 1480px ){
		left : calc( 50% + 676px );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#menuBtn{
		@media ( prefers-reduced-motion : no-preference ){
			> span{
				transition : all .3s linear;
			}
		}
	}
}

/* --------------------------------------------
NAVIGATION
--------------------------------------------- */
#nav{
	position : fixed;
	top : var( --headerHeight );
	left : 100%;
	z-index : 11;
	height : calc( 100dvh - var( --headerHeight ) );
	overflow-y : auto;
	background-image : linear-gradient( to right , #62a6a9 , #90c0c2 );
	scrollbar-gutter : stable both-edges;
	translate : 0 0;
	body:has( &:not( [inert] ) ){
		overflow : hidden;
	}
	&:not( [inert] ){
		translate : -100% 0;
	}
	&[inert]{
		translate : 0 0;
	}
	.scroll{
		overflow-y : auto;
	}
	@media screen and ( width <= 768px ){
		width : 100%;
		.scroll{
			padding-block : calc( 24 * var( --remBase ) );
			padding-inline : calc( 16 * var( --viewportBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		width : calc( 380 * var( --viewportBase ) );
		.scroll{
			padding-block : calc( 14 * var( --remBase ) );
			padding-inline : calc( 13 * 100% / 350 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#nav{
		@media ( prefers-reduced-motion : no-preference ){
			transition-duration : .4s;
			transition-property : translate;
			&[inert]{
				transition-timing-function : ease-out;
			}
			&:not( [inert] ){
				transition-timing-function : ease-in;
			}
		}
	}
}
#navGlobal{
	> li{
		border-bottom : solid calc( 2 * var( --remBase ) ) white;
		> a{
			display : block;
			padding-block : calc( 24 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.5;
			color : white;
			&[data-en]::after{
				display : block;
				font-size : calc( 12 * var( --remBase ) );
				line-height : calc( 20 / 12 );
				content : attr( data-en );
			}
		}
		&:has( details ){
			display : grid;
			grid-template-rows : auto auto;
			grid-template-columns : 1fr auto;
			align-items : center;
			justify-content : space-between;
		}
	}
	details{
		display : contents;
		summary{
			grid-row : 1;
			grid-column : 2;
			img{
				height : calc( 8 * var( --remBase ) );
				filter : var( --filterWhite );
			}
		}
		.detailsContent{
			grid-row : 2;
			grid-column : 1/-1;
		}
		&[open] summary{
			img{
				rotate : -180deg;
			}
		}
	}
	ul{
		padding-bottom : calc( 24 * var( --remBase ) );
		a{
			display : block;
			padding-block : calc( 6 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 20 / 14 );
			color : white;
			letter-spacing : .1em;
		}
	}
	@media screen and ( width <= 768px ){
		ul{
			padding-left : calc( 20 * var( --contentBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		ul{
			padding-left : calc( 20 * 100% / 324 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navGlobal summary img{
		transition : rotate var( --transitionBase );
	}
}
#navContacts{
	margin-top : calc( 20 * var( --remBase ) );
	li + li{
		margin-top : calc( 20 * var( --remBase ) );
	}
	p{
		font-size : calc( 12 * var( --remBase ) );
		text-align : center;
	}
	a{
		display : block;
		height : calc( 48 * var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 2 * var( --remBase ) );
		color : white;
		border-radius : calc( 10 * var( --remBase ) );
		box-shadow : 0 calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent );
	}
	.tel{
		display : grid;
		grid-template-rows : 1fr auto auto 1fr;
		row-gap : calc( 2 * var( --remBase ) );
		justify-content : space-between;
		padding-inline : calc( 20 * 100% / 250 );
		background-color : var( --brown );
		img{
			grid-row : 1/-1;
			align-self : center;
			&:nth-of-type( 1 ){
				grid-column : 1;
				height : calc( 20 * var( --remBase ) );
			}
			&:nth-of-type( 2 ){
				grid-column : 3;
				height : calc( 20 * var( --remBase ) );
			}
		}
		span{
			grid-column : 2;
			&:nth-of-type( 1 ){
				grid-row : 2;
				font-size : calc( 16 * var( --remBase ) );
				text-align : center;
			}
			&:nth-of-type( 2 ){
				grid-row : 3;
				font-size : calc( 14 * var( --remBase ) );
			}
		}
	}
	.line{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 6 * 100% / 250 );
		align-items : center;
		justify-content : center;
		color : white;
		background-color : var( --lineGreen );
		img{
			height : calc( 20 * var( --remBase ) );
		}
		span{
			font-size : calc( 16 * var( --remBase ) );
			text-box : trim-both cap alphabetic;
		}
	}
	@media screen and ( width <= 768px ){
		a{
			width : calc( 250 * var( --contentBase ) );
		}
		p{
			color : white;
		}
	}
	@media print , screen and ( width > 768px ){
		a{
			width : calc( 250 * 100% / 324 );
		}
	}
}

/* --------------------------------------------
MENU
--------------------------------------------- */
#menu{
	@media print , screen and ( width > 768px ){
		position : relative;
		z-index : 1;
		height : calc( 68 * var( --remBase ) );
		padding-inline : calc( ( 100% - 1440px ) / 2 );
		> ul{
			display : grid;
			grid-template-columns : repeat( 6 , 1fr );
			justify-content : center;
			height : calc( 68 * var( --remBase ) );
			> li{
				+ li{
					> a{
						position : relative;
						&::after{
							position : absolute;
							top : 50%;
							left : 0;
							display : block;
							width : 1px;
							height : calc( 48 * var( --remBase ) );
							content : "";
							background-color : color-mix( in sRGB , black 40% , transparent );
							translate : 0 -50%;
						}
					}
				}
				> a{
					display : block;
					align-content : center;
					height : calc( 68 * var( --remBase ) );
					font-size : calc( 16 * var( --remBase ) );
					line-height : 1.5;
					text-align : center;
					text-indent : .075em;
					letter-spacing : .075em;
					&[data-en]::before{
						display : block;
						content : attr( data-en );
					}
				}
			}
		}
		> ul > li:hover{
			.subMenu{
				grid-template-rows : 1fr;
			}
		}
		.subMenu{
			position : relative;
			display : grid;
			grid-template-rows : 0fr;
			grid-template-columns : 1fr;
			overflow : hidden;
			background-color : var( --ivory );
			box-shadow : 0 calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent );
			> div{
				overflow : hidden;
			}
		}
		ul ul{
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 40 * var( --remBase ) );
			a{
				display : block;
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 24 / 14 );
				letter-spacing : .075em;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media print , screen and ( width > 768px ){
		#menu .subMenu{
			transition : grid-template-rows var( --transitionBase );
		}
	}
}

/* --------------------------------------------
PAGE TITLE
--------------------------------------------- */
#title{
	align-content : center;
	font-size : calc( 36 * var( --remBase ) );
	font-weight : 200;
	line-height : calc( 48 / 36 );
	color : white;
	text-align : center;
	text-indent : .0375em;
	letter-spacing : .0375em;
	background : linear-gradient( to bottom , color-mix( var( --blue ) 100% , transparent ) , color-mix( var( --blue ) 70% , transparent ) );
	@media screen and ( width <= 768px ){
		height : calc( 164 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		height : calc( 182 * var( --remBase ) );
	}
}