@charset "UTF-8";
/* =====================================================
 * ホーム ヒーロービジュアル：背景動画 + サイネージクリック領域 + 実績ポップアップ
 * ---------------------------------------------------
 * .l-hero-loader__...          ... ローディング画面
 * .l-main-img.is-hero-video ... 既存 MV への上書き
 * .l-hero-video__...           ... 新規追加要素（動画・ホットスポット）
 * .l-hero-popup__...           ... 実績リールポップアップ
 * ===================================================== */

/* html 側で scrollbar-gutter を常時予約し、popup で overflow:hidden にしても
 * scrollbar が消えて右方向にレイアウトがガクッと寄らないようにする。
 * さらに、popup overlay 越しに右端 gutter がグレーの帯として浮き上がるのを防ぐため
 * html の背景を popup と同じダークカラーに揃える（body が html を完全に覆う通常時は不可視）。 */
html {
	scrollbar-gutter: stable;
	background: #0f0f10;
}

/* =====================================================
 * ローディング画面（動画・アイコン読み込み完了までフルスクリーン表示）
 * JS で body 直下へ移動し、既存のスタッキングコンテキストの影響を受けないようにする
 * ===================================================== */
.l-hero-loader {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: #0f0f10;
	opacity: 1;
	visibility: visible;
	isolation: isolate;
	transition:
		opacity 0.6s ease,
		visibility 0s linear 0s;
}

.l-hero-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.6s ease,
		visibility 0s linear 0.6s;
}

.l-hero-loader__center {
	position: relative;
	width: min(440px, 82vw);
	text-align: center;
}

/* ---- タイトル文字 (LOADING . . .) ---- */
.l-hero-loader__title {
	margin: 0 0 22px;
	font-family: var(--mh--font-family--en, "Consolas", "Menlo", monospace);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.48em;
	text-align: center;
	color: rgba(255, 138, 0, 0.85);
	text-transform: uppercase;
	text-shadow:
		0 0 6px rgba(255, 138, 0, 0.6),
		0 0 18px rgba(255, 138, 0, 0.35);
}

.l-hero-loader__title-txt {
	display: inline-block;
	vertical-align: middle;
	padding-left: 0.48em; /* letter-spacing 分の右余白を左に補正 */
}

.l-hero-loader__title-dots {
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	letter-spacing: 0;
}

.l-hero-loader__title-dots span {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 2px;
	background: currentColor;
	border-radius: 50%;
	opacity: 0.3;
	box-shadow: 0 0 6px rgba(255, 138, 0, 0.7);
	animation: hero-loader-dot 1.2s ease-in-out infinite;
}
.l-hero-loader__title-dots span:nth-child(2) { animation-delay: 0.18s; }
.l-hero-loader__title-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes hero-loader-dot {
	0%, 100% { opacity: 0.25; transform: scale(0.85); }
	50%      { opacity: 1;    transform: scale(1.15); }
}

/* ---- バー囲み（コーナー装飾のためのラッパー） ---- */
.l-hero-loader__bar-wrap {
	position: relative;
	padding: 10px 14px;
}

.l-hero-loader__corner {
	position: absolute;
	width: 12px;
	height: 12px;
	border: 1.5px solid #ff8a00;
	filter: drop-shadow(0 0 5px rgba(255, 138, 0, 0.9));
}
.l-hero-loader__corner--tl { top: 0; left: 0;    border-right: 0; border-bottom: 0; }
.l-hero-loader__corner--tr { top: 0; right: 0;   border-left: 0;  border-bottom: 0; }
.l-hero-loader__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.l-hero-loader__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---- プログレストラック（外側の器） ---- */
.l-hero-loader__track {
	position: relative;
	width: 100%;
	height: 8px;
	background: rgba(255, 138, 0, 0.06);
	border: 1px solid rgba(255, 138, 0, 0.28);
	box-shadow: inset 0 0 12px rgba(255, 138, 0, 0.12);
	/* overflow は外す：fill の box-shadow を漏らして発光感を出す */
}

/* ---- 発光する fill ---- */
.l-hero-loader__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 40%),
		linear-gradient(90deg, #ff5c00 0%, #ff8a00 45%, #ffb340 85%, #ffe6b3 100%);
	box-shadow:
		0 0 6px rgba(255, 138, 0, 1),
		0 0 14px rgba(255, 138, 0, 0.7),
		0 0 28px rgba(255, 138, 0, 0.35);
	/* 実ロード進捗イベントは連続で来ないので、隣接値を滑らかに補間 */
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- パーセント表示 ---- */
.l-hero-loader__label {
	margin: 22px 0 0;
	font-family: var(--mh--font-family--en, "Consolas", "Menlo", monospace);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	color: #ffb340;
	text-shadow:
		0 0 8px rgba(255, 138, 0, 1),
		0 0 22px rgba(255, 138, 0, 0.55),
		0 0 44px rgba(255, 138, 0, 0.2);
}

.l-hero-loader__percent {
	display: inline-block;
	min-width: 2.6em;
	text-align: right;
}

.l-hero-loader__percent-sign {
	margin-left: 4px;
	font-size: 0.55em;
	color: rgba(255, 138, 0, 0.7);
	text-shadow: 0 0 8px rgba(255, 138, 0, 0.6);
	letter-spacing: 0;
	vertical-align: 0.28em;
}

/* ---- 100% 到達時：パワーサージ ＋ 全体フラッシュ ---- */
.l-hero-loader.is-complete .l-hero-loader__fill {
	animation: hero-loader-surge 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.l-hero-loader.is-complete .l-hero-loader__label {
	animation: hero-loader-label-flash 0.55s ease forwards;
}
.l-hero-loader.is-complete .l-hero-loader__title {
	animation: hero-loader-label-flash 0.55s ease forwards;
}

@keyframes hero-loader-surge {
	0% {
		box-shadow:
			0 0 6px rgba(255, 138, 0, 1),
			0 0 14px rgba(255, 138, 0, 0.7),
			0 0 28px rgba(255, 138, 0, 0.35);
	}
	50% {
		box-shadow:
			0 0 12px rgba(255, 255, 240, 1),
			0 0 36px rgba(255, 200, 100, 1),
			0 0 80px rgba(255, 138, 0, 0.85);
	}
	100% {
		box-shadow:
			0 0 6px rgba(255, 138, 0, 1),
			0 0 14px rgba(255, 138, 0, 0.7),
			0 0 28px rgba(255, 138, 0, 0.35);
	}
}

@keyframes hero-loader-label-flash {
	0%   { color: currentColor; }
	40%  { color: #fff8e8; text-shadow: 0 0 14px rgba(255, 255, 240, 1), 0 0 30px rgba(255, 200, 100, 0.8); }
	100% { }
}

/* スクロールロック */
html.is-hero-loading,
body.is-hero-loading {
	overflow: hidden;
}

/* 動きを減らす設定に配慮 */
@media (prefers-reduced-motion: reduce) {
	.l-hero-loader__chara-inner {
		animation: none;
	}
	.l-hero-loader__fill,
	.l-hero-loader__chara {
		transition: none;
	}
}


/* ---------- 動画ステージ ---------- */
.l-main-img.is-hero-video .l-main-img__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* ステージ：
 * PC → width:100% ＋ アスペクト比で高さ自動。動画は常に横幅いっぱいに表示され、
 *      画面のアスペクト比が動画と異なる場合は上下に余白（レターボックス）が入る。
 * モバイル → 高さ 100% で幅は自動（アスペクト比を保つ）＋ 親を横スクロール可能に。 */
.l-hero-video__stage {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: var(--hero-native-w, 1920) / var(--hero-native-h, 1080);
	width: 100%;
}

/* 動画の後ろに敷く静止画（低電力モード等で動画が再生されないときのフォールバック）。
 * ステージと同じアスペクト比に絶対配置で敷き、動画と同じ拡縮を追従。 */
.l-hero-video__bg-still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	z-index: 0;
}

.l-main-img.is-hero-video .l-main-img__bg-vid {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill; /* ステージ自体がアスペクト比を保つので fill で歪みなし */
	pointer-events: none;
	position: relative;
	z-index: 1;
	/* 再生開始まで透過にして、後ろの静止画を見せておく。
	 * playing イベントで .is-playing が付いたときだけ表示に切り替わる。 */
	opacity: 0;
	transition: opacity 0.4s ease;
}

.l-main-img.is-hero-video .l-main-img__bg-vid.is-playing {
	opacity: 1;
}

/* オーバーレイを既定より薄くしてサイネージを視認しやすくする（コピー文言の可読性は維持） */
.l-main-img.is-hero-video .l-main-img__overlay {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.15) 50%,
		rgba(0, 0, 0, 0.45) 100%
	);
}

/* ---------- モバイル：中心トリミング＋横スクロール ---------- */
@media (max-width: 767px) {
	.l-main-img.is-hero-video .l-main-img__bg {
		justify-content: flex-start; /* JS で中央にスクロールする */
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.l-main-img.is-hero-video .l-main-img__bg::-webkit-scrollbar {
		display: none;
	}
	.l-main-img.is-hero-video .l-main-img__overlay {
		background: rgba(0, 0, 0, 0.25);
	}
	/* モバイルは cover 動作：高さ 100%、幅は auto（アスペクト比で決まる） */
	.l-hero-video__stage {
		width: auto;
		height: 100%;
		min-width: 100%;
	}
}

/* 既存 __inner (copy/cards) はヒーロー領域全体に広がりホットスポットを覆うため、
   __inner 自体はクリック透過にして、中の <a>/<button> だけクリックを受け付けさせる */
.l-main-img.is-hero-video .l-main-img__inner {
	pointer-events: none;
}
.l-main-img.is-hero-video .l-main-img__inner a,
.l-main-img.is-hero-video .l-main-img__inner button {
	pointer-events: auto;
}

/* ---------- ホットスポット（SVG polygon 方式） ----------
 * SVG の polygon 自体がクリック領域。fill: transparent でも pointer-events: fill で判定可能。
 * アイコンは別レイヤーの HTML 要素で、JS で対応 polygon の hover に応じて表示切替する。 */
.l-hero-video__hotspots-svg {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none; /* svg 全体はスルー、polygon 個別だけ受ける */
	overflow: visible;
}

.l-hero-video__hotspot {
	fill: transparent;
	pointer-events: fill; /* 塗り領域 = polygon 内側のみヒット */
	cursor: pointer;
	outline: none;
	transition: fill 0.2s ease;
}

/* --- イントロリップル：ローディング完了後 1 度だけ、各領域の中心から
       白い水の波紋が広がってフェードアウトする（二重リング） --- */
.l-hero-video__hotspot-icon-slot::before,
.l-hero-video__hotspot-icon-slot::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
	opacity: 0;
	transform: scale(0);
	pointer-events: none;
}

.l-hero-video__hotspot-icon-slot.is-intro-ripple::before {
	animation: hotspot-ripple 1.8s cubic-bezier(0, 0.55, 0.4, 1) forwards;
	animation-delay: var(--intro-delay, 0s);
}

.l-hero-video__hotspot-icon-slot.is-intro-ripple::after {
	animation: hotspot-ripple 1.8s cubic-bezier(0, 0.55, 0.4, 1) forwards;
	animation-delay: calc(var(--intro-delay, 0s) + 0.35s);
}

@keyframes hotspot-ripple {
	0% {
		opacity: 0;
		transform: scale(0.15);
		border-width: 3px;
	}
	12% {
		opacity: 0.85;
	}
	100% {
		opacity: 0;
		transform: scale(4.5);
		border-width: 0.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.l-hero-video__hotspot-icon-slot.is-intro-ripple::before,
	.l-hero-video__hotspot-icon-slot.is-intro-ripple::after {
		animation: none;
	}
}

.l-hero-video__hotspot:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 2px;
}

/* アイコンレイヤー（元位置：stage の中） */
.l-hero-video__hotspot-icons {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

/* アイコンレイヤー（引き上げ後：.l-main-img の直下）
 * PC では __bg/__overlay/__inner の上に来るように z-index を高くする。
 * stage と同じ 100vw × 100vw*9/16 のサイズを、中央に垂直配置する。 */
.l-main-img.is-hero-video > .l-hero-video__hotspot-icons.is-elevated {
	position: absolute;
	top: 50%;
	right: 0;
	bottom: auto;
	left: 0;
	width: 100%;
	aspect-ratio: var(--hero-native-w, 1920) / var(--hero-native-h, 1080);
	transform: translateY(-50%);
	z-index: 10;
	pointer-events: none;
}

.l-hero-video__hotspot-icon-slot {
	position: absolute;
	/* left, top は inline style（centroid） */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* アイコン画像が読み込めなかった場合の視認フォールバック（発光する丸）:
   img.src / video.src が壊れているときに hover 位置が分かるように、
   slot に .is-hover が付いたら slot 自体に発光を出す */
.l-hero-video__hotspot-icon-slot::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	box-shadow: 0 0 22px 6px rgba(255, 255, 255, 0.4);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	.l-hero-video__hotspot-icon-slot.is-hover::before {
		opacity: 1;
		transform: scale(1);
	}
	/* アイコン画像が読み込めた場合はフォールバックの発光は不要 */
	.l-hero-video__hotspot-icon-slot.has-icon.is-hover::before {
		opacity: 0;
	}
}
@media (hover: none) {
	.l-hero-video__hotspot-icon-slot::before {
		opacity: 1;
		transform: scale(1);
	}
	.l-hero-video__hotspot-icon-slot.has-icon::before {
		opacity: 0;
	}
}

.l-hero-video__hotspot-icon,
.l-hero-video__hotspot-icon-video {
	display: block;
	width: 130px;
	min-width: 130px; /* flex 親が 0 幅なので min で確実に確保 */
	aspect-ratio: 1 / 1;
	height: auto;
	flex-shrink: 0; /* flex 親が width:0 のため縮まないよう固定 */
	object-fit: contain;
	pointer-events: none;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
	transition:
		opacity 0.25s ease,
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 既定はどの環境でも非表示（タッチ端末では出さない） */
.l-hero-video__hotspot-icon,
.l-hero-video__hotspot-icon-video {
	opacity: 0;
	transform: scale(0.9);
}

/* ホバー可能環境のみ、slot に .is-hover が付いたときに表示（JS が付与） */
@media (hover: hover) and (pointer: fine) {
	.l-hero-video__hotspot-icon-slot.is-hover .l-hero-video__hotspot-icon,
	.l-hero-video__hotspot-icon-slot.is-hover .l-hero-video__hotspot-icon-video {
		opacity: 1;
		transform: scale(1);
	}
}

/* 縦幅の狭い画面向けにアイコンサイズを縮小 */
@media (max-width: 767px) {
	.l-hero-video__hotspot-icon,
	.l-hero-video__hotspot-icon-video {
		width: 90px;
	}
}

/* =====================================================
 * SP 版：左右スワイプ誘導の矢印
 *   JS で .l-main-img 直下へ移動されるので、動画スクロールに追従しない
 * ===================================================== */
.l-hero-video__scroll-hints {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	display: none;
}

/* SP のみ表示 */
@media (max-width: 767px) {
	.l-hero-video__scroll-hints {
		display: block;
	}
}

.l-hero-video__scroll-hints.is-hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.l-hero-video__scroll-hint {
	position: absolute;
	top: 50%;
	color: #ffb340;
	filter: drop-shadow(0 0 6px rgba(255, 138, 0, 0.9)) drop-shadow(0 0 14px rgba(255, 138, 0, 0.5));
}

.l-hero-video__scroll-hint svg {
	display: block;
}

.l-hero-video__scroll-hint--left {
	left: 10px;
	animation: hero-scroll-hint-left 1.5s ease-in-out infinite;
}

.l-hero-video__scroll-hint--right {
	right: 10px;
	animation: hero-scroll-hint-right 1.5s ease-in-out infinite;
}

@keyframes hero-scroll-hint-left {
	0%, 100% { transform: translateY(-50%) translateX(0);    opacity: 0.55; }
	50%      { transform: translateY(-50%) translateX(-8px); opacity: 1; }
}

@keyframes hero-scroll-hint-right {
	0%, 100% { transform: translateY(-50%) translateX(0);   opacity: 0.55; }
	50%      { transform: translateY(-50%) translateX(8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.l-hero-video__scroll-hint--left,
	.l-hero-video__scroll-hint--right {
		animation: none;
		opacity: 0.85;
	}
}

/* デバッグモード（body に is-hero-hotspot-debug）：polygon を可視化 */
body.is-hero-hotspot-debug .l-hero-video__hotspot {
	fill: rgba(255, 200, 0, 0.28);
	stroke: rgba(255, 200, 0, 0.9);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}
body.is-hero-hotspot-debug .l-hero-video__hotspot.is-popup {
	fill: rgba(0, 200, 255, 0.28);
	stroke: rgba(0, 200, 255, 0.9);
}

/* =====================================================
 * 実績リールポップアップ（添付画像デザイン踏襲）
 * ダークテーマ / 左：メイン画像+説明+タイトル / 右：4件リスト
 * ===================================================== */

/* テーマ変数（既存 CSS 変数が無い場合のフォールバックカラー） */
.l-hero-popup-root {
	--hp-bg: #0f0f10;
	--hp-panel-bg: #1a1a1c;
	--hp-item-bg: #232326;
	--hp-item-bg-hover: #2a2a2e;
	--hp-item-bg-active: #2f2f34;
	--hp-text: #f2f2f2;
	--hp-text-sub: #a7a7ab;
	--hp-line: #303035;
	--hp-accent: #ff8a00;
	--hp-accent-hover: #ffa738;
}

.l-hero-popup-root {
	position: relative;
	z-index: 1000;
}

.l-hero-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.l-hero-popup.is-open {
	display: flex;
}

.l-hero-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
	will-change: transform;
}

.l-hero-popup__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(1240px, 100%);
	max-height: min(90svh, 780px);
	padding: 24px 36px 32px;
	overflow: hidden;
	color: var(--hp-text);
	background: var(--hp-panel-bg);
	border-radius: 16px;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
	opacity: 0;
	will-change: transform, opacity, filter;
}

/* ---------- 登場アニメーション ----------
 * ① オーバーレイが左からスライドインしつつ、ほんの少しシアーで動きに勢い
 * ② パネルは 250ms 遅れて、下からリフト＋フェード＋わずかにブラー解除
 * 閉じるときは JS で is-closing クラスを付けて逆再生 */
.l-hero-popup.is-open .l-hero-popup__overlay {
	animation: hero-popup-overlay-in 0.55s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.l-hero-popup.is-open .l-hero-popup__panel {
	animation: hero-popup-panel-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* 閉じるとき（.is-closing）：オーバーレイが左にスライドアウト、パネルは先に落ちて消える */
.l-hero-popup.is-closing .l-hero-popup__overlay {
	animation: hero-popup-overlay-out 0.4s cubic-bezier(0.76, 0, 0.24, 1) 0.12s both;
}

.l-hero-popup.is-closing .l-hero-popup__panel {
	animation: hero-popup-panel-out 0.25s cubic-bezier(0.55, 0, 1, 0.45) both;
}

@keyframes hero-popup-overlay-in {
	from {
		transform: translateX(-100%) skewX(-6deg);
	}
	60% {
		transform: translateX(0) skewX(-2deg);
	}
	to {
		transform: translateX(0) skewX(0);
	}
}

@keyframes hero-popup-overlay-out {
	from {
		transform: translateX(0) skewX(0);
	}
	to {
		transform: translateX(-100%) skewX(-6deg);
	}
}

@keyframes hero-popup-panel-in {
	from {
		transform: translateY(28px) scale(0.97);
		opacity: 0;
		filter: blur(6px);
	}
	60% {
		opacity: 1;
		filter: blur(0);
	}
	to {
		transform: translateY(0) scale(1);
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes hero-popup-panel-out {
	from {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	to {
		transform: translateY(16px) scale(0.98);
		opacity: 0;
	}
}

/* prefers-reduced-motion：アニメーションを最小化 */
@media (prefers-reduced-motion: reduce) {
	.l-hero-popup.is-open .l-hero-popup__overlay,
	.l-hero-popup.is-open .l-hero-popup__panel,
	.l-hero-popup.is-closing .l-hero-popup__overlay,
	.l-hero-popup.is-closing .l-hero-popup__panel {
		animation-duration: 0.01ms;
		animation-delay: 0ms;
	}
}

/* ---------- header（REEL WORKS + × ボタン） ---------- */
.l-hero-popup__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	padding-bottom: 20px;
}

.l-hero-popup__eyebrow {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-family: var(--mh--font-family--en, inherit);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--hp-text);
}

.l-hero-popup__eyebrow-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--hp-accent);
	border-radius: 50%;
}

.l-hero-popup__close {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--hp-text);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.25s ease;
}

.l-hero-popup__close:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
	transform: rotate(90deg);
}

.l-hero-popup__close-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transform-origin: center;
}

.l-hero-popup__close-bar:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.l-hero-popup__close-bar:nth-child(2) {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- body（左メイン + 右リストの 2 カラム） ---------- */
.l-hero-popup__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 28px;
	flex: 1 1 auto;
	min-height: 0;
}

/* ===== 左：メイン ===== */
.l-hero-popup__main {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 0;
}

.l-hero-popup__main-visual {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #fff;
	border-radius: 4px;
}

.l-hero-popup__main-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform, opacity, filter;
}

/* =====================================================
 * リスト項目クリック時の左メイン切り替えアニメーション
 * 　is-swapping-out: 現在の内容を薄れさせつつ画像は軽くズーム＆ブラー
 * 　is-swapping-in : 内容差し替え後、画像は緩やかに寄って戻り、テキストは stagger でリフト＆フェード
 * ===================================================== */
.l-hero-popup.is-swapping-out .js-hero-popup-main-img {
	opacity: 0;
	transform: scale(1.05);
	filter: blur(4px);
	transition:
		opacity 0.32s ease,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.32s ease;
}
.l-hero-popup.is-swapping-out .js-hero-popup-main-num,
.l-hero-popup.is-swapping-out .js-hero-popup-main-title,
.l-hero-popup.is-swapping-out .js-hero-popup-main-desc {
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 0.26s ease,
		transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.l-hero-popup.is-swapping .js-hero-popup-main-btn {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.l-hero-popup.is-swapping-in .js-hero-popup-main-img {
	animation: hero-popup-swap-img-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.l-hero-popup.is-swapping-in .js-hero-popup-main-desc {
	animation: hero-popup-swap-text-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.l-hero-popup.is-swapping-in .js-hero-popup-main-num {
	animation: hero-popup-swap-num-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
.l-hero-popup.is-swapping-in .js-hero-popup-main-title {
	animation: hero-popup-swap-text-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}
.l-hero-popup.is-swapping-in .js-hero-popup-main-btn {
	animation: hero-popup-swap-btn-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes hero-popup-swap-img-in {
	0% {
		opacity: 0;
		transform: scale(1.08);
		filter: blur(6px);
	}
	60% {
		opacity: 1;
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}
@keyframes hero-popup-swap-text-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes hero-popup-swap-num-in {
	/* 番号は「カウンター的にすっと差し込まれる」印象で少し大きい振れ幅＋ letter-spacing でぐっと締める */
	from {
		opacity: 0;
		transform: translateY(14px);
		letter-spacing: 0.15em;
	}
	to {
		opacity: 1;
		transform: translateY(0);
		letter-spacing: 0.02em;
	}
}
@keyframes hero-popup-swap-btn-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* prefers-reduced-motion：切替アニメも最小化 */
@media (prefers-reduced-motion: reduce) {
	.l-hero-popup.is-swapping-out .js-hero-popup-main-img,
	.l-hero-popup.is-swapping-out .js-hero-popup-main-num,
	.l-hero-popup.is-swapping-out .js-hero-popup-main-title,
	.l-hero-popup.is-swapping-out .js-hero-popup-main-desc,
	.l-hero-popup.is-swapping-in .js-hero-popup-main-img,
	.l-hero-popup.is-swapping-in .js-hero-popup-main-num,
	.l-hero-popup.is-swapping-in .js-hero-popup-main-title,
	.l-hero-popup.is-swapping-in .js-hero-popup-main-desc,
	.l-hero-popup.is-swapping-in .js-hero-popup-main-btn {
		animation: none;
		transition: none;
	}
}

.l-hero-popup__main-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--hp-text-sub);
}

.l-hero-popup__main-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 8px;
}

.l-hero-popup__main-heading {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
}

.l-hero-popup__main-num {
	flex-shrink: 0;
	margin: 0;
	font-family: var(--mh--font-family--en, inherit);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--hp-accent);
	letter-spacing: 0.02em;
}

.l-hero-popup__main-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hp-text);
	letter-spacing: 0.02em;
}

.l-hero-popup__main-btn[hidden] {
	display: none !important;
}

.l-hero-popup__main-btn {
	display: inline-flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 14px 28px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: var(--hp-accent);
	border-radius: 999px;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}

.l-hero-popup__main-btn:hover {
	background: var(--hp-accent-hover);
	transform: translateY(-2px);
}

.l-hero-popup__main-btn-arw {
	display: inline-block;
	font-size: 16px;
	transition: transform 0.25s ease;
}

.l-hero-popup__main-btn:hover .l-hero-popup__main-btn-arw {
	transform: translateX(4px);
}

/* ===== 右：リスト ===== */
.l-hero-popup__side {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.l-hero-popup__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	margin: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.l-hero-popup__list::-webkit-scrollbar {
	width: 6px;
}

.l-hero-popup__list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 100vw;
}

.l-hero-popup__item {
	margin: 0;
}

.l-hero-popup__item-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 10px 14px 10px 18px;
	color: var(--hp-text);
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		padding-left 0.25s ease;
}

/* 選択中インジケータ（左端のオレンジ縦線） */
.l-hero-popup__item-btn::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 0;
	width: 3px;
	background: var(--hp-accent);
	opacity: 0;
	transform: scaleY(0.4);
	transform-origin: center;
	transition:
		opacity 0.25s ease,
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.l-hero-popup__item-btn.is-active {
	background: var(--hp-item-bg-active);
}

.l-hero-popup__item-btn.is-active::before {
	opacity: 1;
	transform: scaleY(1);
}

.l-hero-popup__item-btn:hover:not(.is-active) {
	background: var(--hp-item-bg-hover);
}

.l-hero-popup__item-btn:focus-visible {
	outline: 2px solid var(--hp-accent);
	outline-offset: 2px;
}

.l-hero-popup__item-thumb {
	position: relative;
	flex-shrink: 0;
	display: block;
	overflow: hidden;
	width: 96px;
	aspect-ratio: 16 / 9;
	background: #fff;
	border-radius: 2px;
}

.l-hero-popup__item-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.l-hero-popup__item-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--hp-text);
}

.l-hero-popup__item-btn.is-active .l-hero-popup__item-label {
	font-weight: 700;
}

/* 実績が 1 件しかない reel の場合：切替の必要がないので操作 UI を無効化 */
.l-hero-popup__item:only-child .l-hero-popup__item-btn {
	cursor: default;
}
.l-hero-popup__item:only-child .l-hero-popup__item-btn:hover {
	background: var(--hp-item-bg-active);
}
.l-hero-popup__item:only-child .l-hero-popup__item-btn:focus-visible {
	outline: none;
}

/* body スクロールロック */
body.is-hero-popup-open {
	overflow: hidden;
}

/* scrollbar-gutter が使えない古いブラウザ向けフォールバック。
 * padding-right で scrollbar が消えた分の横方向シフトを打ち消す（グレーの帯は残るが最低限のシフト回避を優先）。 */
@supports not (scrollbar-gutter: stable) {
	body.is-hero-popup-open {
		padding-right: var(--ga2026-sbw, 0px);
	}
	body.is-hero-popup-open .l-header {
		padding-right: var(--ga2026-sbw, 0px);
	}
}

/* ---------- タブレット ---------- */
@media (max-width: 1024px) {
	.l-hero-popup__panel {
		padding: 20px 24px 24px;
	}
	.l-hero-popup__body {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 20px;
	}
	.l-hero-popup__item-thumb {
		width: 84px;
	}
}

/* ---------- モバイル：1 カラム、上に main、下にリスト ---------- */
@media (max-width: 767px) {
	.l-hero-popup {
		padding: 0;
		align-items: stretch;
	}
	.l-hero-popup__panel {
		width: 100vw;
		height: 100svh;
		max-height: 100svh;
		padding: 16px 16px 20px;
		border-radius: 0;
		opacity: 1;
	}
	/* モバイルは panel が全画面なのでオーバーレイのスライドが見えない。
	   代わりに panel 自体が下からスライドインし、オーバーレイは軽くフェード */
	.l-hero-popup.is-open .l-hero-popup__overlay {
		animation: hero-popup-overlay-fade-in 0.3s ease both;
	}
	.l-hero-popup.is-open .l-hero-popup__panel {
		animation: hero-popup-panel-slide-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
	}
	.l-hero-popup.is-closing .l-hero-popup__overlay {
		animation: hero-popup-overlay-fade-out 0.3s ease 0.1s both;
	}
	.l-hero-popup.is-closing .l-hero-popup__panel {
		animation: hero-popup-panel-slide-down 0.3s cubic-bezier(0.55, 0, 1, 0.45) both;
	}
	@keyframes hero-popup-overlay-fade-in {
		from { opacity: 0; transform: none; }
		to   { opacity: 1; transform: none; }
	}
	@keyframes hero-popup-overlay-fade-out {
		from { opacity: 1; transform: none; }
		to   { opacity: 0; transform: none; }
	}
	@keyframes hero-popup-panel-slide-up {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}
	@keyframes hero-popup-panel-slide-down {
		from { transform: translateY(0); }
		to   { transform: translateY(100%); }
	}
	.l-hero-popup__header {
		padding-bottom: 12px;
	}
	.l-hero-popup__eyebrow {
		font-size: 12px;
	}
	.l-hero-popup__close {
		width: 36px;
		height: 36px;
	}
	.l-hero-popup__body {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		gap: 16px;
		overflow-y: auto;
	}
	.l-hero-popup__main {
		gap: 12px;
	}
	.l-hero-popup__main-desc {
		font-size: 12px;
		line-height: 1.7;
	}
	.l-hero-popup__main-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.l-hero-popup__main-heading {
		gap: 14px;
		width: 100%;
	}
	.l-hero-popup__main-num {
		font-size: 32px;
	}
	.l-hero-popup__main-title {
		font-size: 14px;
	}
	.l-hero-popup__main-btn {
		width: 100%;
		padding: 12px 20px;
	}
	.l-hero-popup__side {
		border-top: 1px solid var(--hp-line);
		padding-top: 12px;
	}
	.l-hero-popup__item-btn {
		padding: 8px 10px 8px 14px;
	}
	.l-hero-popup__item-thumb {
		width: 72px;
	}
	.l-hero-popup__item-label {
		font-size: 12px;
	}
}