@charset "utf-8";
/* font
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

/* reset
================================================== */
*:where(:not(iframe,img,svg):not(svg *)){all:unset;display:revert;}
*,*::before,*::after{box-sizing:border-box;}
body{font-size:16px;line-height:1.5;color:#000;font-family:'Roboto Flex',sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;  font-variation-settings:'slnt' 0,'wdth' 100,'GRAD' 0,'XOPQ' 88,'XTRA' 400,'YOPQ' 79,'YTAS' 750,'YTDE' -250,'YTFI' 600,'YTLC' 500,'YTUC' 725;-webkit-text-size-adjust:100%;}
footer,header,main,picture{display:block;}
ul{list-style:none;}
img{width:100%;height:auto;vertical-align:top;}
a{margin:0;padding:0;color:#000;vertical-align:bottom;background:transparent;cursor:pointer;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}

html,
body{
	position:relative;
	height:100dvh;
}
header{
	position:fixed;
	display:grid;
	place-items:end center;
	width:100%;
	height:calc(((100dvh - 480px) / 3) * 1.45);
	min-height:140px;
}
header h1{
	width:fit-content;
	padding-block:0 38px;
}
header h1 img{
	width:auto;
	height:clamp(40px,4.2vw,42px);
}
footer{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
}
footer .copyright{
	width:fit-content;
	margin-inline:auto;
	padding-block:0 21px;
	font-size:11px;
	line-height:1;
	color:#888;
	text-align:center;
}
main{
	width:724px;
	margin-inline:auto;
}
#container{
	position:relative;
	width:fit-content;
	padding-inline:42px;
}
.swiper{
	width:100%;
	height:100dvh;
}
.swiper-slide{
	width:100%;
	height:100%;
	padding-block:calc(((100dvh - 480px) / 3) * 1.45) calc(((100dvh - 480px) / 3) * 1.55);
}
.image{
	width:100%;
	aspect-ratio:4/3;
}
.fancybox-slide--image{
	padding-inline:12px !important;
}
#navigation{
	position:absolute;
	top:calc(((100dvh - 480px) / 3) * 1.45);
	right:0;
	display:grid;
	grid-template-rows:repeat(2,1fr);
	gap:6px;
	width:30px;
	height:480px;
}
#navigation li:has(.swiper-button-prev){
	order:2;
	align-self:start;
}
#navigation li:has(.swiper-button-next){
	order:1;
	align-self:end;
}
.swiper-button-prev,
.swiper-button-next{
	position:static;
	width:30px;
	height:30px;
	margin:0;
	border-radius:50%;
	border:2px solid #c5d0e4;
	background:#FFF;
}
.swiper-button-prev::after,
.swiper-button-next::after{
	display:block;
	width:8px;
	height:8px;
	transform:rotate(45deg) skew(5deg,5deg);
}
.swiper-button-prev::after{
	margin-block-start:-4px;
	border-block-end:2px solid #8ea0c8;
	border-inline-end:2px solid #8ea0c8;
	content:'';
}
.swiper-button-next::after{
	margin-block-start:4px;
	border-block-start:2px solid #8ea0c8;
	border-inline-start:2px solid #8ea0c8;
	content:'';
}
@media screen and (orientation:landscape) and (max-height:770px){
	main{
		width:calc(100dvh - 130px);
	}
	.swiper-slide{
		padding-block:140px 150px;
	}
}
@media screen and (max-width:800px){
	header{
		height:calc(((100dvh - 480px) / 3) * 1.38);
		min-height:175px;
	}
	header h1{
		padding-block:0 min(6.3075vw,48px);
	}
	header h1 img{
		height:clamp(33px,5.2562vw,40px);
	}
	footer .copyright{
		padding-block:0 34px;
		font-size:10px;
	}
	main{
		width:640px;
	}
	#container{
		padding-inline:0;
	}
	.swiper-slide{
		padding-block:calc(((100dvh - 480px) / 3) * 1.38) calc(((100dvh - 480px) / 3) * 1.62);
	}
	#navigation{
		top:calc(((100dvh - 480px) / 3) * 1.38);
		right:-42px;
	}
}
@media screen and (max-width:761px){
	header{
		height:calc(((100dvh - 63vw) / 3) * 1.38);
	}
	main{
		width:100%;
		margin-inline:0;
		padding-inline:8vw;
	}
	.swiper-slide{
		padding-block:calc(((100dvh - 63vw) / 3) * 1.38) calc(((100dvh - 63vw) / 3) * 1.62);
	}
	#navigation{
		top:calc(((100dvh - 63vw) / 3) * 1.38);
		right:-40px;
		height:calc((84vw / 4) * 3);
	}
}
@media screen and (max-width:599px){
	header{
		height:calc(((100dvh - 63vw) / 3) * 1.22);
		min-height:150px;
	}
	header h1{
		padding-block:0 min(39px,9vw);
	}
	header h1 img{
		height:clamp(27px,7.75vw,33px);
	}
	main{
		padding-inline:0;
	}
	#container{
		padding-inline:8vw;
	}
	footer .copyright{
		padding-block:0 min(7.5vw,34px);
		font-size:9px;
	}
	.swiper-slide{
		padding-block:calc(((100dvh - 63vw) / 3) * 1.22) calc(((100dvh - 63vw) / 3) * 1.78);
	}
	.fancybox-slide--image{
		padding-inline:5px !important;
	}
	#navigation{
		top:auto;
		right:12px;
		bottom:min(7.5vw,34px);
		height:fit-content;
	}
}