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

   レイアウト方針: .intro を position:relative の座標基準とし、
   子要素(写真・縦組みテキスト)を position:absolute で配置する。
   各座標は Figma のページ絶対Y座標から 1080 (introセクション開始位置)
   を引いたセクション内ローカル座標。
   ============================================================= */

/* 背景色 (node 1:25, 長方形157 相当。セクション全面を覆うため
   個別の div ではなくセクション自体の background-color として実装)。
   :root トークンに無い色のためここに直接指定 (用途: Introduction背景のベージュ)。 */
.intro {
	position: relative;
	width: 100%;
	height: 579.3rem;
	background-color: #f0e8d9;
	overflow-x: hidden; /* 画面外にはみ出す写真をクリップする */
}

/* -------------------------------------------------------------
   写真 (共通)
   ------------------------------------------------------------- */
.intro__photo {
	position: absolute;
	display: block;
	overflow: hidden;
}

.intro__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* スライダーは 1:27 villa office056 の位置(座標)に置く。
   高さは intro-slider.js がアクティブ画像の高さに合わせて動的に上書きする
   (下記 height はロード前の初期値)。 */
.intro__slider {
	position: absolute;
	top: 84rem;
	left: 6rem;
	width: 103.9rem;
	height: 69.7rem;
}

/* 1:26 OHA260518003w (583x390, x=1124 y=1330) の静止画。
   画像(583x390)とボックス(58.3x39rem)がほぼ同アスペクトのため、
   共通の .intro__photo img(object-fit:cover)でそのまま収まる。
   ※この位置は元はスライダーだったが、スライダーは上記のとおり --056 の位置へ移した。 */
.intro__photo--003w {
	top: 25rem;
	left: 112.4rem;
	width: 58.3rem;
	height: 39rem;
}

/* 1:29 IMG_5104 (430x643, x=213 y=2977) */
.intro__photo--5104 {
	top: 189.7rem;
	left: 21.3rem;
	width: 43rem;
	height: 64.3rem;
}

/* 1:30 IMG_5105 (587x877, x=1124 y=3770) */
.intro__photo--5105 {
	top: 269rem;
	left: 112.4rem;
	width: 58.7rem;
	height: 87.7rem;
}

/* 1:28 OHA240524085w (583x380, x=212 y=4472) */
.intro__photo--085w {
	top: 339.2rem;
	left: 21.2rem;
	width: 58.3rem;
	height: 38rem;
}

/* 1:31 OHA260518128w (430x643, x=1429 y=5337) */
.intro__photo--128w {
	top: 425.7rem;
	left: 142.9rem;
	width: 43rem;
	height: 64.3rem;
}

/* 1:32 villa office010 (887x593, x=212 y=5980)
   1:27 と同様、偏心クロップを実測の%指定で再現する。 */
.intro__photo--010 {
	top: 490rem;
	left: 21.2rem;
	width: 88.7rem;
	height: 59.3rem;
}

.intro__photo--010 img {
	position: absolute;
	max-width: none;
	width: 109.61%;
	height: 109.33%;
	left: -2.52%;
	top: -9.33%;
	object-fit: fill;
}

/* -------------------------------------------------------------
   縦組みテキスト (共通)
   Figma上ではアウトライン化されたベクターパス(1:178 / 1:324)のため
   テキストデータを持たない。高解像度スクリーンショットを目視で
   読み取り、実テキスト+ writing-mode:vertical-rl で組み直している。

   右端座標を基準に right で配置し、width は指定せず(内容に応じて
   自動的に左へ広がる)、height だけを列の高さとして指定することで、
   改列は <br> の位置だけで行い、自動改列は white-space:nowrap で抑止する
   (語中で勝手に折り返さず、<br> の位置だけで改列させる要件のため。行送りは右→左)。
   font-size は PC でも rem(画面幅連動)にしている。縦組みは折返しで逃がせないので、
   文字を px 固定にすると列高(rem・可変)に対して狭幅ではみ出して崩れるため、
   PCフォントpx固定方針の例外として列高と一緒に比例縮小させている。
   :root トークンに無い色のためインク色をここに直接指定
   (用途: 縦組みテキストの文字色。スクリーンショットの文字色を実測)。
   ------------------------------------------------------------- */
.intro__vtext {
	position: absolute;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: var(--font-ja);
	/* 縦組み(nowrap)は横組みと違い折返しで逃がせないため、列の高さ(rem・画面幅連動)に
	   対して文字が固定pxだと狭幅で列がはみ出して崩れる。PCフォントpx固定方針の意図的な
	   例外として、ここは画面幅連動のremにし、列の高さと一緒に比例縮小させる。 */
	font-size: 2.8rem; /* 23px@1920。base.css の html font-size:calc(100vw/192) に連動 */
	line-height: 1.7;
	letter-spacing: 0.08em;
	color: #542810;
	white-space: nowrap;
}

/* 1:178 マスクグループ1 (304x489, x=1251 y=2977) */
.intro__vtext--1 {
	top: 189.7rem;
	right: 36.5rem;
	height: 50rem;
}

/* 1:324 マスクグループ2 (304x442, x=516 y=5243) */
.intro__vtext--2 {
	top: 416.3rem;
	right: 110rem;
	height: 44.2rem;
}

/* =============================================================
   SP (max-width: 920px)
   Figma: SPトップ全体 (fileKey hq2oZ2NymsckMJQirVNzJJ, node 20:25) の
   intro 部(背景 node 20:27, 390x2620 / ページ絶対 Y 845-3465)。
   PCと同じ「.introを基準に写真7点+縦組みテキスト2点をposition:absoluteで
   散らす」手法のまま、座標だけSP Figmaの値に置き換える。
   各座標はページ絶対Y座標から845(introセクション開始位置)を引いた
   セクション内ローカル座標を rem 換算(÷10)したもの。get_metadataで
   全座標が一致することを確認済み。
   ============================================================= */
@media (max-width: 920px) {

	/* セクション高さ: Figmaのセクション矩形(node 20:27)は2620px(=262rem)だが、
	   villa office010より下は他要素の無い無地の余白(約200px)だけと
	   get_metadataで確認できたため、PCの579.3remを比例縮小するのではなく
	   最後の写真(villa office010)の下端(223.8+18.2)に合わせて242remに詰める。 */
	.intro {
		height: 260rem;
	}

	/* スライダーは villa office056 (354x237, x=0 y=435) の位置に置く。
	   高さは intro-slider.js がアクティブ画像に合わせて動的に上書きする。 */
	.intro__slider {
		top: 43.5rem;
		left: 0;
		width: 35.4rem;
		height: 23.7rem;
	}

	/* OHA260518003w (272x182, x=118 y=140) の静止画。 */
	.intro__photo--003w {
		top: 14rem;
		left: 11.8rem;
		width: 27.2rem;
		height: 18.2rem;
	}

	/* IMG_5104 (166x248, x=-83 y=766)。左に画面外はみ出す配置。
	   base.cssのbody{overflow-x:hidden}(全ブレイクポイント共通)でクリップされる。 */
	.intro__photo--5104 {
		top: 76.6rem;
		left: -2.8rem;
		width: 16.6rem;
		height: 24.8rem;
	}

	/* 縦組みテキスト①(マスクグループ6 node 20:177, 187x301, x=181 y=759)。
	   PC同様 right 基準(widthは内容依存で指定しない)。
	   フォントサイズはアウトライン化されたベクターのためCSS値を直接持たず、
	   スクリーンショットの文字インク高さを実測(最長列で約14px/文字)して
	   1.4remと判断(PCの2.3remから縮小)。font-sizeはファイル末尾のSPフォント
	   ブロック(2段のメディアクエリ)に集約したためここでは指定しない。 */
	.intro__vtext--1 {
		top: 75.9rem;
		right: 6.2rem;
		height: 30.1rem;
	}

	/* IMG_5105 (272x407, x=36 y=1123) */
	.intro__photo--5105 {
		top: 112.3rem;
		left: 3.6rem;
		width: 27.2rem;
		height: 40.7rem;
	}

	/* OHA240524085w (236x154, x=118 y=1632) */
	.intro__photo--085w {
		top: 163.2rem;
		left: 11.8rem;
		width: 23.6rem;
		height: 15.4rem;
	}

	/* 縦組みテキスト②(マスクグループ7 node 20:323, 187x271, x=18 y=1872)。
	   font-sizeはファイル末尾のSPフォントブロックに集約したためここでは指定しない。 */
	.intro__vtext--2 {
		top: 187.2rem;
		right: 18.5rem;
		height: 27.1rem;
	}

	/* OHA260518128w (166x248, x=287 y=1902) */
	.intro__photo--128w {
		top: 190.2rem;
		left: 28.7rem;
		width: 16.6rem;
		height: 24.8rem;
	}

	/* villa office010 (272x182, x=36 y=2238)。056と同様、枠比率がPCと
	   ほぼ同一のため内部imgの偏心クロップは無改修。 */
	.intro__photo--010 {
		top: 223.8rem;
		left: 3.6rem;
		width: 27.2rem;
		height: 18.2rem;
	}
}

/* =============================================================
   SP フォント: タブレット/スマホ2段の固定px化
   理由はlayout.css冒頭の同名コメント参照(remのfont-sizeは920pxに近づくほど
   vwに比例して膨らむため、px指定でこの2段に切り離す。レイアウトのremは
   上のブロックに残したまま)。倍率調整はタブレットブロックの数値のみ。

   縦組みテキスト(.intro__vtext)はFigma上アウトライン化されたベクターで
   元々テキストデータを持たず(ファイル冒頭コメント参照)、このセッションの
   Figma MCP未認証とは無関係に、以前からスクリーンショット実測(1.4rem=14px)
   をそのまま採用する運用だった。スマホ値はその実測値(14px)を流用。
   ============================================================= */

/* SP フォント: タブレット (768–920px)。スマホpx × 約1.35。倍率調整はこのブロックの値のみ。 */
@media (min-width: 768px) and (max-width: 920px) {

	.intro__vtext--1,
	.intro__vtext--2 {
		font-size: 19px; /* 14px × 1.35 = 18.9 */
	}
}

/* SP フォント: スマホ (≤767px)。390pxデザインの実px(アウトライン化により実測不能なため、スクリーンショット実測値を流用)。 */
@media (max-width: 767px) {

	.intro__vtext--1,
	.intro__vtext--2 {
		font-size: 14px;
		letter-spacing: 0.05em;
	}
}