.heropage {
	display: flex;
	flex-direction: column;
	padding-top: 564px;
}
.hero-bg,
.hero-bgm {
	position: absolute !important;
	left: 0;
	top: 0;
	width: 100%;
	height: 664px;
	max-height: 46vw;
	overflow: hidden;
	z-index: 1;
}
.hero-bgm {
	height: 0;
	padding-bottom: 117%;
}
.hero-bg img,
.hero-bgm img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
}
.herop-content {
	background: #000;
	color: #fff;
	padding: 32px;
	z-index: 9;
}
.herop-content h1 {
	margin-bottom: 32px;
	max-width: 657px;
}
@media only screen and (max-width: 1280px) {
	.heropage { padding-top: calc(46.11vw - 64px); }
}
@media only screen and (max-width: 820px) {
	.heropage { padding-top: calc(117vw - 64px); }
	.hero-bg { display: none; }
	.hero-bgm { display: block !important; }
}