/* =============================================================
   CAMMA theme — price-access.css
   Price / Access セクション共用CSS
   Figma: Price  1:1504 (1920x1103, ページ絶対 Y 19311-20414)
          Access 1:1505 (1920x1081, ページ絶対 Y 20414-21495)
   px→rem は全て ÷10 (1920px設計 = 192rem)。
   各セクションは position:relative + 固定高さ、子要素は
   position:absolute でセクション先頭からのローカルY座標を使用。
   ============================================================= */

/* -------------------------------------------------------------
   Price (.price)

   背景色 #572a13 / 本文色 #f0e8d9 / 中央罫線色 #fcf7e0 は
   base.css の :root トークンに無い色のため、ここで直接 hex 指定
   している(いずれも Figma の実データ・実画像からサンプリングした値。
   詳細は実装報告を参照)。

   このセクションには「Price」等の見出しテキストノードが Figma 上に
   存在しないため、見出し無しで実装している(price.php 冒頭コメント参照)。
   ------------------------------------------------------------- */
.price {
	position: relative;
	width: 100%;
	min-height: 110.3rem; /* 旧:固定height。幅を狭めるとpx固定本文が折返して伸びるためmin-heightにして内容で伸ばす(絶対配置を廃止) */
	background-color: #572a13;
	overflow: hidden;
	/* 左右2カラムを中央寄せで並べる。旧実装は各列をposition:absoluteの固定left(rem)で
	   置いていたが、px固定の本文と組み合わさり幅可変で崩れたためFlexに変更。
	   gap=左列右端(64.3rem)→右列左端(127.6rem)の63.3rem。 */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 63.3rem;
	padding: 43.9rem 0; /* 旧:各列のtop:43.9rem */
	box-sizing: border-box;
}

.price__col {
	width: 43.1rem;
	display: flex;
	flex-direction: column;
}

.price__heading {
	width: 42.1rem;
	font-family: var(--font-ja);
	font-weight: 500; /* Shippori Mincho: Medium */
	font-size: 20px;
	line-height: 36px;
	letter-spacing: 2px;
	color: #f0e8d9;
}

.price__body {
	width: 43.1rem;
	margin-top: 5.3rem; /* 旧:top:8.9rem。見出し行高3.6rem分を差し引いた見出し→本文ギャップ */
	font-family: var(--font-ja);
	font-weight: 500; /* Shippori Mincho: Medium */
	font-size: 16px;
	line-height: 28px;
	color: #f0e8d9;
}

/* 中央の縦罫線。Figma上は幅0の線を90°回転させて表現したもの
   (footer .l-footer__divider と同じパターン)。ここでも同じ方針を
   踏襲し、単純な1px罫線のdivとして実装する。色 #fcf7e0 は元の線
   画像アセットからサンプリングした値。 */
.price__divider {
	/* 装飾の中央縦罫線。列フローと独立したY範囲(top25.05rem/高60.2rem)を持つため
	   絶対配置のまま残す。ただし固定left(96rem)ではなくleft:50%+translateで中央固定にし、
	   幅可変でも常にセクション中央(=左右列の中間)に来るようにする。 */
	position: absolute;
	top: 25.05rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0.1rem; /* 1px罫線。極細のため0への丸めは行わない */
	height: 60.2rem;
	background-color: #fcf7e0;
}

/* -------------------------------------------------------------
   Access (.access)

   背景色は base.css の --color-gray (#c8c8c8) を使用。
   ヘッダーが position:fixed / 高さ10rem のため、#access への
   アンカー遷移時に見出しが隠れないよう scroll-margin-top を付与。
   ------------------------------------------------------------- */
.access {
	position: relative;
	width: 100%;
	min-height: 108.1rem; /* 旧:固定height。内容で伸びるようmin-heightに(絶対配置を廃止) */
	background-color: var(--color-gray);
	scroll-margin-top: 10rem;
	/* 左に見出し+本文(.access__info)、右に地図の2カラム。旧実装はposition:absoluteの
	   固定left(rem)だったが、px固定テキストと組み合わさり幅可変で崩れたためFlexに変更。
	   gap=97.3rem−(21.3+43.1)=32.9rem。地図は左カラムと独立しているので、
	   地図の高さが見出し→本文の間隔に影響しない。 */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 32.9rem;
	padding: 25rem 0; /* 旧:見出し/地図のtop:25rem */
	box-sizing: border-box;
}

/* 見出し+本文の左カラム。地図と分離するためのグループ化div(access.php)。 */
.access__info {
	width: 43.1rem;
}

.access__heading {
	width: 26.2rem;
	font-family: var(--font-ja);
	font-weight: 500; /* Shippori Mincho: Medium */
	font-size: 26px;
	line-height: 28px;
	letter-spacing: 2.6px;
	color: var(--color-text);
}

.access__text {
	width: 43.1rem;
	margin-top: 6.9rem; /* 見出し(行高2.8rem)末尾→本文の設計ギャップ。本文top34.7−見出しtop25−2.8 */
	font-family: var(--font-ja);
	font-weight: 500; /* Shippori Mincho: Medium */
	font-style: normal; /* <address> のブラウザ既定(italic)を打ち消す */
	font-size: 16px;
	line-height: 28px;
	color: var(--color-text);
}

.access__map {
	align-self: flex-start; /* 地図は自然な高さ(aspect-ratio)を保ち、左カラムと独立 */
	width: 73.5rem;
	aspect-ratio: 735 / 581; /* 実画像(map.png)の縦横比を維持して歪みを防ぐ(Figma実測の306pxは         採用せず、実アセットの比率を優先した) */
	filter:grayscale(1)
}
.access__map iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* =============================================================
   SP (max-width: 920px)
   Figma: SPトップ全体 (fileKey hq2oZ2NymsckMJQirVNzJJ) のシンボル 20:384 の
   うち Price (20:387+20:406) / Access (20:388+20:395) を担当。
   px→rem は PC 同様 ÷10 (SPは1rem=10px@390px)。

   PC は「中央縦罫線で2カラム」だが、SP は両セクションとも単一カラムに縦積みする。
   price.php / access.php のマークアップは変更せず、position:absolute → static に
   切り替えて DOM 順(price: left列→区切り線→right列 / access: 見出し→本文→地図)を
   そのまま縦のフローとして使う(Figma実測の並び順と一致)。

   Price の見出し・本文、Access の見出し・本文は、details.css 側と同じ理由
   (「見出し」「コンポーネント13-N」相当のコンポーネントインスタンスで
   get_design_context / get_screenshot ともテキストが描画されない) により
   font-size を実測できていない。line-heightのみ実測bboxに合わせ、font-sizeは
   PCの値を維持する方針はdetails.cssと統一している。font-size/line-height
   自体はファイル末尾のSPフォントブロック(2段のメディアクエリ)にpx化して
   集約した(このレイアウトブロックにはlayoutのremのみ残す)。
   ============================================================= */
@media (max-width: 920px) {

	/* -------------------------------------------------------------
	   Price
	   Figma実測: 背景高828px、上端から1つ目の見出しまで120px、下端の余白160px。
	   ------------------------------------------------------------- */
	.price {
		display: block; /* PCのflexを解除して単一カラム縦積みに戻す */
		min-height: 0; /* PCのmin-height:110.3remを解除 */
		height: auto;
		padding: 12rem 3.6rem 16rem;
	}

	.price__col {
		position: static;
		width: 100%;
	}

	.price__heading {
		position: static;
		width: 100%;
		/* font-size/line-heightはファイル末尾のSPフォントブロックに集約 */
	}

	.price__body {
		position: static;
		width: 100%;
		margin-top: 4rem; /* 見出し末尾から本文開始までの実測ギャップ */
	}

	/* PCでは中央の縦罫線だが、SPでは2ブロックの間の横罫線として使う。
	   実測: 直前ブロック末尾から60px、次ブロック開始まで60pxの対称な余白。 */
	.price__divider {
		position: static;
		transform: none; /* PCのtranslateX(-50%)を解除(SPは横罫線) */
		width: 100%;
		height: 0.1rem;
		margin: 6rem 0;
	}

	/* -------------------------------------------------------------
	   Access
	   Figma実測: 背景高868px、上端から見出しまで120px、下端の余白104px。
	   見出し→本文→地図の順はPCのDOM順とも一致するため、静的フローに切り替えるだけでよい。
	   ------------------------------------------------------------- */
	.access {
		display: block; /* PCのgridを解除して単一カラム縦積みに戻す */
		min-height: 0; /* PCのmin-height:108.1remを解除 */
		height: auto;
		padding: 12rem 3.6rem 10.4rem;
		scroll-margin-top: 9rem; /* SPヘッダー高さ 9rem (layout.css .l-header 参照)に合わせて実測値化 */
	}

		/* PCの左カラム幅(43.1rem)を解除。SPは単一カラム全幅。 */
		.access__info {
			width: auto;
		}

	.access__heading {
		position: static;
		width: 100%;
		/* font-size/line-heightはファイル末尾のSPフォントブロックに集約 */
	}

	.access__text {
		position: static;
		width: 100%;
		margin-top: 4rem; /* 見出し末尾から本文開始までの実測ギャップ */
		/* font-size/line-heightはファイル末尾のSPフォントブロックに集約 */
	}

	.access__map {
		position: static;
		width: 100%;
		height: auto;
		margin-top: 4rem; /* 本文末尾から地図開始までの実測ギャップ */
		aspect-ratio: 735 / 581; /* 実画像(map.png)の縦横比を維持して歪みを防ぐ(Figma実測の306pxは
		                            採用せず、実アセットの比率を優先した) */
	}
}

/* =============================================================
   SP フォント: タブレット/スマホ2段の固定px化
   理由はlayout.css冒頭の同名コメント参照。倍率調整はタブレットブロックの
   数値のみ。上のブロックのコメントの通り、Price/Access の見出し・本文は
   コンポーネントインスタンスのレンダリング不具合でFigma実データから
   font-sizeを取得できない(このセッションもFigma MCP未認証で再計測不可)。
   details.cssの同種の要素と同じ方針で、PCのfont-sizeをそのままpx化して
   採用し、line-heightのみ既存のSP実測bbox値(上のブロックに元々あった値)を使う。
   ============================================================= */

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

	.price__heading {
		font-size: 27px; /* 20px(PC値を維持) × 1.35 = 27 */
		line-height: 39px; /* 29px × 1.35 = 39.15 */
		letter-spacing: 2.5px; /* 2px × 1.35 = 2.7 */
	}

	.price__body {
		font-size: 21.5px; /* 16px(PC値を維持) × 1.35 = 21.6 */
		line-height: 38px; /* 28px × 1.35 = 37.8 */
	}

	.access__heading {
		font-size: 35px; /* 26px(PC値を維持) × 1.35 = 35.1 */
		line-height: 39px; /* 29px × 1.35 = 39.15 */
		letter-spacing: 3.5px; /* 2.6px × 1.35 = 3.51 */
	}

	.access__text {
		font-size: 21.5px; /* 16px(PC値を維持) × 1.35 = 21.6 */
		line-height: 29.5px; /* 22px × 1.35 = 29.7 */
	}
}

/* SP フォント: スマホ (≤767px)。390pxデザインの実px。 */
@media (max-width: 767px) {

	.price__heading {
		font-size: 20px; /* PC(2rem)を維持(コンポーネント側のテキスト取得不可のため。上のブロックのコメント参照) */
		line-height: 29px; /* 実測bbox */
		letter-spacing: 2px;
	}

	.price__body {
		font-size: 13px; /* PC(1.6rem)を維持(同上) */
		line-height: 28px;
	}

	.access__heading {
		font-size: 26px; /* PC(2.6rem)を維持(同上) */
		line-height: 29px; /* 実測bbox */
		letter-spacing: 2.6px;
	}

	.access__text {
		font-size: 13px; /* PC(1.6rem)を維持(同上) */
		line-height: 22px; /* 住所ブロックが長いためモバイル向けに詰めた実測値 */
	}
}