@charset "utf-8";

/*****************************************************************/
/* Main Visual – Video Hero
/*****************************************************************/

:root {
	--mv-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

#home_main_visual {
	width: 100%;
}

.mv-hero {
	position: relative;
	width: 100%;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	background-color: #000;
}

/* ── 背景動画（2枚クロスフェードでループ） ── */
.mv-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.6) contrast(1.1);
	z-index: 1;
	opacity: 0;
	transition: opacity 1s linear;
	will-change: opacity;
}
.mv-hero__video--active {
	opacity: 1;
}

/* ── オーバーレイ ── */
.mv-hero__filter {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10;
	pointer-events: none;
}

/* ── テキストレイヤー ── */
.mv-hero__text {
	position: relative;
	z-index: 20;
	text-align: left;
	padding-left: 8vw;
	max-width: 90%;
}

/* ── 見出し ── */
.mv-hero__headline {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.6;
	font-size: clamp(24px, 4.3vw, 56px);
	color: #fff;
	display: inline;
	position: relative;
	white-space: pre-wrap;
	visibility: hidden;
}

/* タイピングアニメーション用の文字単位 span */
.mv-hero__char {
	display: inline-block;
	opacity: 0;
	transform: translateY(2px);
	transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.mv-hero__char.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── カーソル ── */
.mv-hero__cursor {
	display: inline-block;
	width: 3px;
	height: 1.1em;
	background-color: #fff;
	vertical-align: middle;
	margin-left: 4px;
	position: relative;
	top: -2px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.mv-hero__cursor.active {
	opacity: 1;
}
.mv-hero__cursor.blink {
	animation: mvCursorBlink 0.8s step-end infinite;
}
@keyframes mvCursorBlink {
	50% { opacity: 0; }
}

/* ── サブテキスト ── */
.mv-hero__sub {
	margin-top: 30px;
	font-family: "Century", "Georgia", serif;
	font-weight: 400;
	letter-spacing: 0.3em;
	font-size: clamp(16px, 1.8vw, 24px);
	color: rgba(255, 255, 255, 0.85);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 1.5s var(--mv-ease-out-expo), transform 1.5s var(--mv-ease-out-expo);
}
.mv-hero__sub.visible {
	opacity: 1;
	transform: translateY(0);
}