@charset "UTF-8";

/* -----------------------------------------------------------------------
	base
----------------------------------------------------------------------- */
:root {
	--w-design: 430;
}

a {
	display: block;
	
	@media (width > 768px) {
		transition: opacity 300ms ease;
		
		&:hover {
			opacity: 0.7;
		}
	}
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}


/* -----------------------------------------------------------------------
	style
----------------------------------------------------------------------- */
main {
	width: 100%;
	max-width: calc(var(--w-design) * 1px);
	margin: 0 auto;
	box-shadow: 0 0 20px 0 rgb(from #004EA2 r g b / 0.2);
}

[id^="sec"] {
	position: relative;
	aspect-ratio: var(--w-design) / var(--h);
}

.x,
.reserve {
	position: absolute;
	width: min(calc(var(--w-btn) * 1px), calc(var(--w-btn) / var(--w-design) * 100%));
	left: 50%;
	translate: -50% 0;
	
	&:is(.reserve) {
		--w-btn: 322;
		
		aspect-ratio: var(--w-btn) / 50;
	}
	
	&:is(.x) {
		--w-btn: 319;
		
		aspect-ratio: var(--w-btn) / 47;
	}
}


#sec01 {
	--h: 616;
}


#sec02 {
	--h: 962;
}


#sec03 {
	--h: 1681;
}


#sec04 {
	--h: 1333;
	
	.x {
		top: calc(300 / var(--h) * 100%);
	}
	
	.reserve {
		top: calc(542 / var(--h) * 100%);
	}
}


#sec05 {
	--h: 303;
}