/* MARK:HERO */
.hero-m8k {
	background-color: #000;
}

.hero-m8k_inner {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	overflow: hidden;
	position: relative;
}

@media (min-width: 768px) {
	.hero-m8k_inner {
		aspect-ratio: 2000 / 960;
		max-height: 750px;
	}
}

.hero-m8k_item {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (min-width: 768px) {
	.hero-m8k_item {
		max-height: 750px;
	}
}

.hero-m8k__figure {
	width: min(100%, 1500px);
	margin-inline: auto;
	position: relative;
}

.hero-m8k__figure figcaption {
	position: absolute;
	bottom: 2px;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	color: #FFF;
	padding: 0 0.5em;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-align: right;
	white-space: nowrap;
	line-height: 1.0;
}

.hero-m8k__body {
	z-index: 6;
	position: absolute;
	color: #FFF;
	font-family: var(--ff-serif);
	letter-spacing: 0.1em;
	top: 23%;
	font-size: 3.9cqw;
	line-height: 1.4;
}

.hero-m8k__body i {
	font-style: normal;
}

.hero-m8k__body.word-1,
.hero-m8k__body.word-2,
.hero-m8k__body.word-3 {
	display: grid;
	align-items: center;
	min-height: 7em;
	top: 17%;
	gap: 1em;
	left: 5%;
}

@media (min-width: 768px) {

	.hero-m8k__body.word-1,
	.hero-m8k__body.word-2,
	.hero-m8k__body.word-3 {
		font-size: 2.2cqw;
		display: grid;
		align-items: center;
		top: 14%;
		gap: 1em;
		left: 19%;
	}
}

.hero-m8k__body span {
	display: inline-block;
	white-space: nowrap;
	opacity: 0;
}

/* キャッチコピー、ロゴ */
.hero-m8k__catch {
	z-index: 6;
	position: absolute;
	width: 67%;
	left: 50%;
	top: 11%;
	margin-left: -33.5%;
	opacity: 0;
}

.hero-m8k__logo {
	z-index: 6;
	position: absolute;
	width: 80%;
	left: 50%;
	top: 21%;
	margin-left: -40%;
	opacity: 0;
}

@media (min-width: 768px) {
	.hero-m8k__catch {
		width: 30%;
		top: 16%;
		margin-left: -15%;
	}

	.hero-m8k__logo {
		width: 40%;
		top: 24%;
		left: 50%;
		margin-left: -20%;
	}
}

@media (min-width: 768px) {
	.hero-m8k__container {
		max-width: 1500px;
		max-height: 750px;
		margin-inline: auto;
		container-type: inline-size;
	}
}