/* =========================================================
   ヒーロー（ファーストビュー本体）
   Figma node 115:32280 / firstview を基準。
   レスポンシブ再構築：固定px・絶対配置主体 → ％・flex・可変背景でフルード化。
   構造：hero__bg > hero__inner > .hero__container >（hero__photo, hero__catch）
   ※ 下の写真カルーセル帯は別セクション。
   ========================================================= */

.hero {
	position: relative;
	width: 100%;
	background: var(--bg-hero);
	/* overflow:hidden は解除：縦書きキャッチが .hero__container の左外(left:-28%)に出るため、
	   ここでクリップすると見切れる。線画は hero__bg の background（要素内に自然に収まる）なので不要。 */
}

/* =========================================================
   背景の植物線画（透過WebP）
   経緯：img6点 → SVG(14MB) → ラスター化。firstview_bg.webp は 2560×1808 透過WebP。
   フルード化：background-size を 100% にしてヒーロー幅へ追従（旧 1280px固定をやめる）。
   ※ 地色 #f6eee9 は .hero に敷き、その上に透過WebPが乗る。
   ========================================================= */
.hero__bg {
	width: 100%;
	max-width: 1500px;          /* 据え置き */
	height: 100%;               /* 据え置き */
	margin: 0 auto;
	box-sizing: border-box;
	background-image: url("../img/hero/firstview_bg.webp");
	background-repeat: no-repeat;
	background-position: center 0; /* 全BP共通 */
	background-size: 100%;         /* ヒーロー幅に追従（旧 1280px auto 固定をやめる） */
}

/* 1280px固定キャンバス → フルード（width:100%）。写真がフローで高さを作る */
.hero__inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 48px 0 56px;       /* 写真の上下余白（旧 top:47 相当のゆとり） */
}

/* キャッチの絶対配置基準 */
.hero__container {
	position: relative;
	width: 100%;
}

/* =========================================================
   主役写真（アーチ型マスク）：絶対配置 → フロー中央（flex）
   ========================================================= */
.hero__photo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	margin: 0;
	z-index: 1;
	/* ドロップシャドウは外側(figure)に。内側imgのマスク後の形に沿った影。 */
	filter: drop-shadow(5px 5px 0 rgba(163, 147, 124, 0.5));
}

.hero__photo img {
	display: block;
	width: 100%;
	max-width: 640px;          /* 設計上限。これ以下はビューポートに追従して可変 */
	height: auto;
	aspect-ratio: 640 / 900;   /* 旧 640×900 の比率を維持（フローでも形を保つ） */
	object-fit: cover;
	object-position: center 20%;
	/* 上のみ半円アーチ・下角直角のマスク。100% 100% で要素サイズに伸縮 */
	-webkit-mask: url("../img/hero/arch-mask.svg") no-repeat center / 100% 100%;
	        mask: url("../img/hero/arch-mask.svg") no-repeat center / 100% 100%;
}

/* =========================================================
   縦書きキャッチ（3行・各行を白ボックス＋影に）
   デスクトップ起点：PC/タブレット（≥600px）を基準にし、スマホ(≤599)で上書き。
   基準＝.hero__container。flex行＋margin-topで階段状ずらしを再現。
   ========================================================= */
.hero__catch {
	position: absolute;
	top: 26%;                 /* 写真(高さ900)と縦中央が揃うあたり */
	/* 中央写真(max640)の左端は calc(50% - 320px)。その24px手前にキャッチ右端を固定し、
	   写真に重ねず左隣の余白へ縦書き3行を並べる（Figmaの形）。※ ≤1024px は下の@mediaで写真上に重ねる。 */
	right: calc(50% + 344px);  /* = 50% + 320px(写真半幅) + 24px(隙間) */
	display: flex;
	flex-direction: row-reverse; /* DOM順 1→2→3 を「右(=写真寄り)が1」になるよう右から並べる */
	align-items: flex-start;
	gap: 14px;
	z-index: 3;               /* 写真(z-index:1)より前面 */
	pointer-events: none;     /* 装飾テキスト。リンクではない */
}

.hero__catch-line {
	width: 45px;
	margin: 0;
	display: flex;
	align-items: center;      /* 縦書き時：横方向の中央 */
	justify-content: center;  /* 縦書き時：縦方向の中央 */
	writing-mode: vertical-rl;
	font-family: var(--font-mincho);
	font-weight: 600;         /* W6相当 */
	font-size: 22px;
	line-height: 30px;
	letter-spacing: 8px;      /* 縦書き：文字の上下間隔。広めに */
	color: var(--color-text);
	background: var(--bg-white);
	box-shadow: 4px 5px 0 rgba(163, 147, 124, 0.3); /* Figma実測の右下オフセット影 */
}

/* 階段状ずらし（右ほど上・短く、左ほど下・長く）。高さは旧実装の比率を踏襲 */
.hero__catch-line--1 { height: 249px; margin-top: 0;    } /* 自分史上最高に（右・上） */
.hero__catch-line--2 { height: 266px; margin-top: 40px; } /* かわいいわたしと（中） */
.hero__catch-line--3 { height: 358px; margin-top: 80px; } /* 家族の思い出をカタチに（左・下） */

/* =========================================================
   タブレット（600〜1024px）：PC方式（写真の左隣・重ねない）に揃える
   写真を55%に縮め、左余白にキャッチを置く。写真640中央前提のPC値は使わず、
   写真幅55%（左端＝(100-55)/2＝22.5%）に合わせて right を再計算。
   ※ 写真が小さくなる分、キャッチも少し縮小して短い写真高に収める。
   ========================================================= */
@media (min-width: 600px) and (max-width: 1024px) {
	.hero__photo img {
		width: 55%;           /* max-width:640px は据え置き。768pxで約422px */
	}
	.hero__catch {
		top: 50%;                       /* 写真高に依らず常に縦中央へ */
		transform: translateY(-50%);    /* キャッチ全体の中心を写真中心に合わせる */
		right: calc(77.5% + 16px); /* 写真左端22.5% の 16px 手前にキャッチ右端 */
		left: auto;
		width: auto;
		gap: 10px;
		z-index: 3;
	}
	/* 短くなった写真高に収まるよう縮小（縦書き・白ボックス・影は維持） */
	.hero__catch-line {
		width: auto;
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 6px;
		padding: 6px 4px;
	}
	.hero__catch-line--1 { height: auto; margin-top: 0;    }
	.hero__catch-line--2 { height: auto; margin-top: 28px; }
	.hero__catch-line--3 { height: auto; margin-top: 56px; }
}

/* =========================================================
   スマホ（≤599px）：キャッチを写真の上に重ねる（オーバーレイ）
   ========================================================= */
@media (max-width: 599px) {
	/* アーチ全体を上に詰める（スマホのみ。base は 48px 0 56px） */
	.hero__inner {
		padding-top: 20px;
	}
	/* アーチ写真の左右に各30px余白。写真(=container幅100%)もキャッチ(=container基準の%)も
	   同じ .hero__container を基準にしているため、container を margin で内側へ寄せれば
	   両者が一緒に追従し、写真上のキャッチの重なりがズレない（padding 基準だとキャッチが追従しない）。 */
	.hero__container {
		width: auto;
		margin-left: 30px;
		margin-right: 30px;
	}
	.hero__catch {
		top: 43%;
		right: auto;          /* ベースの right 指定を打ち消し、left基準に戻す */
		left: 4%;
		width: 25%;
		z-index: 2;
		pointer-events: none;
		gap: 8px;
	}
	/* 25%幅に3列が収まるよう文字とボックスを縮小（縦書き・白ボックス・影は維持） */
	.hero__catch-line {
		width: auto;
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 5px;
		padding: 6px 3px;
	}
	.hero__catch-line--1 { height: auto; margin-top: 0;    }
	.hero__catch-line--2 { height: auto; margin-top: 22px; }
	.hero__catch-line--3 { height: auto; margin-top: 44px; }
}