/* =====================================================================
 * 共通部品の正本 css-access（2026-11-10・欧日が作り日伊と使う。site-renewal/shared）: トップの地図の欄と /access/ のページの見た目。
 * src/theme/access.ts（正本 theme-access）と、/access/ の本文の下書き（日伊 K-01・欧日 access_draft.json）のクラス名と組み。
 * オーナー（2026-11-10）「シンプルネスを好みます」: 枠・色・飾りは足さず余白で区切る。スマホは縦に 1 列、PC はトップだけ地図と住所を横に並べる。
 * 色は modern.css の :root の変数（サイトごとの値）だけを使う。読み込みは modern.css・fit.css の後ろ（トップと /access/ だけ）。文字は変えない
 * ===================================================================== */

/* ---------- トップの地図の欄（section#access.sn_top_block。見出しの形はほかのトップの区画と同じ＝modern.css の .sn_top_block > .sn_title_4） ---------- */
.sg-top-access__body{
	display:grid;
	grid-template-columns:minmax(0, 3fr) minmax(0, 2fr);
	gap:32px;
	align-items:start;
}
/* 地図の箱は高さを先に決める（最初は「地図を表示」だけの枠。押すと中を iframe に替えるので、替える前と後で下の段がずれない＝CLS を出さない）。
   2026-11-10（6 回目）: ページを開いただけでは Google マップを読まない形に（access.ts の MAP_SCRIPT）。枠は背景の色だけ（外部の読み込み・地図の静止画は使わない） */
.sg-top-access__map{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	aspect-ratio:4 / 3;
	border-radius:var(--sg-radius, 12px);
	overflow:hidden;
	background:var(--sg-surface, #f4f4f4);
}
.sg-top-access__map iframe{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	border:0;
}
/* 地図を開いた後は iframe の中に Google 自身の「マップで開く」が出るので、欄の下の「Google マップで開く」は隠す（同じ役目を 2 つ見せない）。
   JS が無いときは「地図を表示」が Google マップへの普通のリンクになり行き先が同じなので、これも隠す */
.sg-top-access--open .sg-top-access__open{ display:none; }
@media (scripting:none){
	.sg-top-access__open{ display:none; }
}
.sg-top-access__info > *{ margin:0 0 .8em; }
.sg-top-access__info address{ font-style:normal; line-height:1.7; }
.sg-top-access__name{ font-family:var(--sg-font-head); font-weight:700; font-size:114.29%; }
.sg-top-access__lead{ font-weight:700; }
.sg-top-access__note{ color:var(--sg-muted, #666); font-size:92.86%; }
.sg-top-access__open{ margin-top:1.4em !important; }
@media screen and (max-width:768px){
	.sg-top-access__body{ grid-template-columns:minmax(0, 1fr); gap:20px; }
}

/* ---------- 「Google マップで開く」・/access/ の申込のボタン（本文の a.sg-btn。形は modern.css の .sg-btn） ---------- */
/* 地図を開くボタン = 2 番手（白地に主色の枠）。申込のボタン = 1 番手（申込の色の塗り）。
   main a:link（modern.css・詳しさ 0,1,2）に負けないよう、a と :link・:visited を付ける */
.sg-top-access__open a.sg-btn:link,
.sg-top-access__open a.sg-btn:visited,
.sg-top-access__map a.sg-btn:link,
.sg-top-access__map a.sg-btn:visited,
.sg-access-map a.sg-btn:link,
.sg-access-map a.sg-btn:visited{
	background:#fff;
	color:var(--sg-main-dark);
	box-shadow:inset 0 0 0 2px var(--sg-main);
	text-decoration:none;
}
.sg-access-cta a.sg-btn:link,
.sg-access-cta a.sg-btn:visited{
	background:var(--sg-accent);
	color:#fff;
	text-decoration:none;
	min-width:260px;
	box-sizing:border-box;
}
.sg-access-cta a.sg-btn:hover{ background:var(--sg-accent-dark); }
@media screen and (max-width:480px){
	.sg-access-cta a.sg-btn{ display:block; min-width:0; }
}

/* ---------- /access/ のページ（本文の並び: 1 行の結論 → 地図 1 つ → 住所の表 → 道順 5 行 → 申込 1 つ） ---------- */
.sg-access-lead{
	font-family:var(--sg-font-head);
	font-weight:700;
	font-size:121.43%;
	line-height:1.6;
	margin:0 0 1.2em;
}
.sg-access-map{ margin:0 0 3em; }
.sg-access-map img{
	display:block;
	max-width:100%;
	height:auto;
	border-radius:var(--sg-radius, 12px);
}
.sg-access-map figcaption{ margin-top:1em; }
.sg-access-info,
.sg-route{ margin:0 0 3em; }
/* 住所の表: PC は「欄の名前｜中身」の 2 列、スマホは縦に 1 列（欄の名前の下に中身） */
.sg-access-info dl{
	display:grid;
	grid-template-columns:6em minmax(0, 1fr);
	gap:.7em 1.2em;
	margin:0;
}
.sg-access-info dt{ font-weight:700; }
.sg-access-info dd{ margin:0; }
.sg-access-info address{ font-style:normal; }
@media screen and (max-width:480px){
	.sg-access-info dl{ grid-template-columns:minmax(0, 1fr); gap:0; }
	.sg-access-info dd{ margin-bottom:.9em; }
}
/* 道順: 番号つきの 5 行（飾りの丸は付けない。番号と余白だけ） */
.sg-route__steps{
	list-style:decimal;
	margin:0 0 1.5em;
	padding-left:1.8em;
}
.sg-route__steps li{
	margin:0 0 .8em;
	padding-left:.3em;
}
/* 道順の最後の段落の単独のリンク（「写真付きの道順を見る」）: 1 行だけのリンクは押せる高さが 24px だった → 段落の幅ごと押せる形にして高さ 44px 以上（文字の位置は同じ左寄せ）
   （:only-child は文字を数えないので、文の後ろにリンクがある段落には使わないこと＝今の下書きは日伊・欧日ともリンクだけの段落） */
.sg-route > p:last-child > a:only-child{
	display:flex;
	align-items:center;
	min-height:44px;
	box-sizing:border-box;
}
.sg-access-cta{
	text-align:center;
	margin:0 0 1em;
}