/* =============================================================
   CAMMA theme — hero.css
   Figma: First view (node 1:1497, 1920x1080, Y 0-1080)
   px→rem は全て ÷10 (1920px設計 = 192rem)。PC専用のためメディアクエリなし。
   ============================================================= */

/* -------------------------------------------------------------
   .hero
   ヘッダー(.l-header, position:fixed, 高さ10rem) が Hero に重なる設計。
   本セクション側では上に余白を作らない(height はヘッダー分を差し引かず
   Figma の 1080px = 108rem をそのまま使う)。
   ------------------------------------------------------------- */
.hero {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* -------------------------------------------------------------
   FV-background (node 1:1498, 1920x1080, x0 y0)
   ------------------------------------------------------------- */
.hero__background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero__bg-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma上で FV-background に重なる #e1e1e1 の乗算(mix-blend-mode: multiply)
   オーバーレイ。:root トークンに無い色のためここに直接指定
   (用途: Hero背景写真の乗算オーバーレイ)。 */
.hero__bg-overlay {
	position: absolute;
	inset: 0;
	background-color: #e1e1e1;
	mix-blend-mode: multiply;
}

/* -------------------------------------------------------------
   main-logo (node 1:870, 135x135, x=893 y=472.5)
   Figma のマスクを座標計算で再現する。元画像 1:869 は 159x160 に拡大され、
   フレーム(893, 472.5)に対して (881, 479.5) に置かれている。つまり
   フレーム内オフセットは left:-12px / top:+7px。この状態を 135x135 の
   overflow:hidden で切り抜くと、元画像下部のロゴタイプ("CAMMA"の文字)が
   枠外に出て、Figma と同じ「丸アイコンのみ」の見え方になる。
   (Figma 側のマスク適用書き出しはほぼ空の画像になるため使えず、
    ここでは同じ結果をCSSの座標で再現している)
   ------------------------------------------------------------- */
.hero__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13.5rem;
	height: 13.5rem;
	overflow: hidden;
	transform: translate(-50%, -50%);
}

.hero__logo img {
	position: absolute;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* =============================================================
   SP (max-width: 920px)
   Figma: SPトップ全体 (fileKey hq2oZ2NymsckMJQirVNzJJ, node 20:25) の hero 部。
   背景写真フルスクリーン 390x845、中央に白ロゴマーク 76x76 @ (157, 384.5)。
   ============================================================= */
@media (max-width: 920px) {

	/* SP Figmaフレーム(390x845)をそのままrem化。実機の可視領域(100svh等)に
	   合わせるのではなく、PCと同じ「vwに比例するrem」で高さも扱うことで、
	   base.cssのSPスケーリング前提(html{font-size:calc(100vw/39)}) と
	   一貫させている。デバイスの実アスペクト比によっては実機フルスクリーンと
	   厳密には一致しない場合があるが、ページ全体が同じ縮尺で伸縮する設計を
	   優先した(詳細は報告参照)。 */
	.hero {
		/* height: 84.5rem; */
	}

	/* main-logo (76x76, x=157 y=384.5)。PCの「135x135の枠でoverflow:hiddenして
	   ロゴタイプを枠外に逃がす」トリミング手法はそのままに、内部画像の
	   オフセット/サイズを枠の縮小比率(76/135)で比例縮小している。 */
	.hero__logo {
		width: 7.6rem;
		height: 7.6rem;
	}
}