@charset "utf-8";
/* page-access.css — アクセス(access.html)専用。site.css の後に読む
   1. ページの頭: 写真の枠(.page-head__photo)に周辺地図を置き、文字の列に所在地と「地図アプリで開く」
   2. 行き方: 電車と車を台紙 2 枚に。要点(所要時間など)→路線図の順。路線図(.route)は site.css の部品をそのまま使う
   色は site.css の変数だけを使う */

/* ---------------------------------------------------------------- 1. ページの頭 */
/* 地図: キー不要の埋め込み。読み込み中も枠の大きさが決まっているようにする */
.ac-map iframe{display:block;width:100%;height:auto;aspect-ratio:3/2;border:0;background:var(--paper-2)}

/* 所在地: 社名(明朝)+郵便番号+住所 */
.ac-place{margin-top:28px}
.ac-place dt{font-size:13.5px;font-weight:500;color:var(--ink-2);letter-spacing:.1em}
.ac-place dd{margin-top:6px;font-size:17px;font-weight:500;line-height:1.75}
.ac-place strong{display:block;margin-bottom:2px;font-family:var(--mincho);font-size:clamp(1.15rem,1.5vw,1.3rem);font-weight:700;letter-spacing:.05em;font-feature-settings:"palt"}
.ac-place__act{margin-top:26px}

/* ---------------------------------------------------------------- 2. 行き方 */
/* 台紙 2 枚。並べる幅が無い時(右の列が狭い 961〜1179px を含む)は自動で 1 列になる */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.way{background:var(--sheet);padding:30px 32px 32px}
.way__title{font-size:clamp(1.25rem,1.6vw,1.45rem);line-height:1.5}
.way .route{margin-top:26px}
/* 路線図の丸は台紙の色で抜く(終点の四角は紺のまま) */
.way .route__stop::before{background:var(--sheet)}
.way .route__stop--goal::before{background:var(--navy)}
/* 車: 東浦IC から工場までを、線の長さで 1 区間に見せる */
.route--car .route__stop--key + .route__stop{margin-top:22px}

/* 所要時間・駐車場など: 見出しのすぐ下に要点を 2 行。項目名(左)と値(右)。2 枚とも同じ行数にして罫線の高さをそろえる */
.way__facts{margin-top:18px;border-bottom:1px solid var(--rule)}
.way__facts>div{display:grid;grid-template-columns:6.6em minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:11px 0;border-top:1px solid var(--rule)}
.way__facts dt{font-size:13.5px;font-weight:500;color:var(--ink-2);letter-spacing:.08em}
.way__facts b{font-family:var(--mincho);font-size:21px;font-weight:600;line-height:1.4;letter-spacing:.03em;font-feature-settings:"palt";white-space:nowrap}
.way__facts small{margin-left:.8em;font-size:13.5px;color:var(--ink-2);letter-spacing:.04em;white-space:nowrap}

/* ---------------------------------------------------------------- 3. レスポンシブ */
/* 地図はタブレットまで 3:2、スマホは縦を少し足して 4:3 */
@media (max-width:599.98px){
  .ac-map iframe{aspect-ratio:4/3}
  .way{padding:24px 20px 26px}
}