/* hero
===============================
ヒーロー領域。.hero_visual の直下に 6 つのレイヤーを同列で配置する:

  - hero_layer--detail    : "Midnight Grand Orchestra / 1st EP" 見出し (テキスト)
  - hero_layer--bg        : 惑星 + 軌道リング (画像)
  - hero_layer--ttl       : "travelogue I" (画像)
  - hero_layer--object    : チケット (画像)
  - hero_layer--release   : "2026.08.19 Release" (テキスト, SP のみ表示)
  - hero_layer--ornament  : mgo ロゴ + 装飾 (SVG)

PC / SP 共通で全レイヤーを absolute で重ね合わせる。
SP では .hero_visual の aspect-ratio を縦長にし、各レイヤーの
top / width を SP 用の値に切り替えるだけでレイアウトが追従する。

レイアウト調整値はすべて .hero の CSS 変数として集約しているので、
位置やサイズを変えたい場合は --visual-* / --detail-* などを書き換える。
*/

.hero {
	/* ---- 調整値 (PC) ---- */
	/* visual 全体 */
	--visual-maxW: 100svh;
	--visual-ratio: 1 / 1.4;

	/* detail (上中央テキスト) */
	--detail-top: 8%;
	--detail-width: 100%;
	--detail-maxW: none;
	--detail-fontSize: clamp(20px, 4vw, 36px);
	--detail-lineHeight: 1.3;
	--detail-letterSpacing: 0.02em;

	/* bg (軌道リング) */
	--bg-top: 2%;
	--bg-width: 75%;

	/* ttl (travelogue) */
	--ttl-top: 15%;
	--ttl-width: 110%;

	/* object (チケット) */
	--object-top: 30%;
	--object-width: 65%;

	/* ornament (mgo + 装飾) */
	--ornament-bottom: 35%;
	--ornament-width: 25%;
	--ornament-maxW: none;

	/* ---- 共通 ---- */
	--layer-color: var(--grayColor);

	position: relative;
	width: 100vw;
	min-height: 100svh;
	max-height: 110svh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 45svh 24px 0;
	overflow: hidden;
}

/* 中央コンポジション (positioning context) */
.hero_visual {
	position: relative;
	width: 100%;
	max-width: var(--visual-maxW);
	aspect-ratio: var(--visual-ratio);
}

.hero_layer {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	pointer-events: none;
}

.hero_layer img,
.hero_layer picture {
	display: block;
	width: 100%;
	height: auto;
}

/* detail (テキスト) */
.hero_layer--detail {
	top: var(--detail-top);
	width: var(--detail-width);
	max-width: var(--detail-maxW);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1em;
	color: var(--layer-color);
	font-family: var(--en);
	font-weight: 400;
	font-size: var(--detail-fontSize);
	line-height: var(--detail-lineHeight);
	letter-spacing: var(--detail-letterSpacing);
	text-align: center;
	z-index: 3;
}

.hero_detailMain,
.hero_detailSub {
	display: block;
}

/* SP のみ表示する「Travelogue I」 */
.hero_detailTtl {
	display: none;
}

/* bg */
.hero_layer--bg {
	top: var(--bg-top);
	width: var(--bg-width);
	z-index: 0;
}

/* ttl */
.hero_layer--ttl {
	top: var(--ttl-top);
	width: var(--ttl-width);
	z-index: 1;
}

/* object */
.hero_layer--object {
	top: var(--object-top);
	width: var(--object-width);
	z-index: 2;
}

/* release (PC では非表示、SP で表示) */
.hero_layer--release {
	bottom: var(--release-bottom);
	width: auto;
	display: none;
	align-items: baseline;
	justify-content: center;
	gap: var(--release-gap);
	color: var(--layer-color);
	font-family: var(--en);
	font-weight: 400;
	font-size: var(--release-fontSize);
	letter-spacing: 0.04em;
	white-space: nowrap;
	z-index: 3;
}

/* ornament */
.hero_layer--ornament {
	top: auto;
	bottom: var(--ornament-bottom);
	width: var(--ornament-width);
	max-width: var(--ornament-maxW);
	height: auto;
	overflow: visible;
	z-index: 2;
}

/* ornament 内部 (独立 block として維持) */
.ornament_glyph,
.ornament_mark {
	fill: var(--layer-color);
}

/* ---------------------------------------------------------------
   SP
   構造は PC と同じ (.hero_visual = absolute コンテナ)。
   aspect-ratio を縦長に変え、各レイヤーの調整値だけを上書きする。
   --------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.hero {
		/* ---- 調整値 (SP) ---- */
		/* visual 全体 */
		--visual-maxW: min(100%, 60svh);

		--visual-ratio: 1 / 1;

		/* detail */
		--detail-top: 0%;
		--detail-width: 90%;
		--detail-maxW: 380px;
		--detail-fontSize: clamp(20px, 5.4vw, 20px);

		/* bg */
		--bg-top: 12%;
		--bg-width: 86%;

		/* ttl */
		--ttl-top: 20%;
		--ttl-width: 90%;

		/* object */
		--object-top: 34%;
		--object-width: 88%;

		/* release */
		--release-bottom: 22%;
		--release-fontSize: clamp(20px, 5.4vw, 24px);

		/* ornament */
		--ornament-bottom: 5%;
		--ornament-width: 35%;
		--ornament-maxW: 220px;

		padding: 80px 16px 0;
	}

	.hero_visual {
		height: calc(100svh - 80px);
	}

	/* SP では「Travelogue I」も表示 */
	.hero_detailTtl {
		display: inline;
	}

	/* SP では release を表示 */
	.hero_layer--release {
		display: flex;
	}
}