/* ===========================================================
   Object / Project / Access Map
   [clinic_access_map] ショートコード（inc/shortcodes.php）の出力スタイル。
   /access/ の本文に置かれた「住所＋駅情報」＋地図セットを装飾する。

   親（page.php 側）が .l-page__inner--narrow（max 800px）を担い、さらに
   /access/ では body の .is-narrow スコープで内枠 padding を0にしているので、
   ここでは .p-access-map 自体に max-width / padding は付けない（親幅を埋める）。

   レイアウト:
   ・SP（〜767px・モバイルファースト）: 縦積み。
     ★地図（__map）を住所＋駅情報（__info）より【上】に表示する。
     DOM 順は __info → __map のまま保ち、CSS の order で SP のみ視覚順を入れ替える。
   ・PC（768px以上）: 左に __info（40%）、右に __map（60%）の 2 カラム。
     gap 24px、上揃え。order は DOM 順に戻す。

   ・モバイルファースト（SP = base、PC = @media (min-width:768px) で上書き）
   ・「Googleマップで開く」テキストリンクは旧仕様で廃止済み
   ・order の制御のため SP も flex コンテナ化（block 不使用）。
     gap で SP（20px）/ PC（24px）の余白を一元管理し、子要素の margin で
     上下スペーシングしない（順序入替時に余白が反転して詰まる事故を防ぐ）。
   ・!important 不使用
   =========================================================== */

.p-access-map {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 768px) {
	.p-access-map {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
	}
}

/* ===========================================================
   住所・駅情報
   SP: 下に積まれる（地図の下）／PC: 左カラム
   =========================================================== */
.p-access-map__info {
	color: var(--color-text);
	font-size: 15px;
	line-height: var(--lh-base);
}

@media (min-width: 768px) {
	.p-access-map__info {
		flex: 0 0 40%;
		max-width: 40%;
		font-size: 16px;
	}
}

.p-access-map__address {
	margin: 0;
	font-style: normal;
}

.p-access-map__route {
	margin: 12px 0 0;
}

@media (min-width: 768px) {
	.p-access-map__route {
		margin-top: 16px;
	}
}

/* ===========================================================
   Google Maps iframe
   width 100% / 角丸 16px / SP 200px・PC 300px（旧 SP300・PC450 から約1/3カット）。
   SP では DOM 順より前に出すため order: -1。PC では DOM 順に戻す。
   上下スペーシングは親の gap が担うので margin-top は使わない。
   =========================================================== */
.p-access-map__map {
	width: 100%;
	order: -1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-gray-200);
}

@media (min-width: 768px) {
	.p-access-map__map {
		flex: 0 0 60%;
		max-width: 60%;
		order: 0;
	}
}

.p-access-map__map iframe {
	display: block;
	width: 100%;
	height: 200px;
	border: 0;
}

@media (min-width: 768px) {
	.p-access-map__map iframe {
		height: 300px;
	}
}