/* =========================
   Access セクション 修正版
   （PC崩れ修正・レスポンシブ対応）
========================= */
:root{
  --ink:#222;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#111827;
  --paper:#fff;
  --radius:14px;
}

/* ベース */
.access-section{
  color:var(--ink);
  background:var(--paper);
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  line-height:1.9;
  letter-spacing:.02em;
  padding-top: clamp(16px, 3vw, 32px);
  padding-bottom: clamp(40px, 6vw, 100px);
}

/* 中央寄せ & 最大幅 */
.access-content{
  max-width: 1120px;          /* ← PCで広めに */
  width: calc(100% - 40px);   /* ← 画面端との余白 */
  margin:0 auto;
  padding:clamp(8px,1.5vw,16px) 0;
}

/* 見出し */
.access-header{
  text-align:center;
  margin-top: 40px;
  margin-bottom:clamp(14px,2.5vw,22px);
}
.access-title-en{
  margin:0;
  font-size:clamp(26px,2.8vw,32px);
  font-weight: 500; 
  letter-spacing: .08em;
  font-family: "Do Hyeon", sans-serif;
  color: #0B0765;
}
.access-title-ja{
  margin:0 0 0;
  font-size:12px;
  font-weight: 800;
  color: #0B0765;
  line-height: 0;
  letter-spacing:.2em;
}

/* 施設名 */
.facility-name{
  margin: 8px 0 16px;
  font-size: clamp(18px,2vw,22px);
  font-weight:700;
}

/* 情報ブロック全体 */
.access-info{
  border-top:1px solid var(--line);
}

/* 1行のレイアウト：左ラベルは固定幅／右は可変 */
.info-item{
  display:grid;
  grid-template-columns: minmax(140px, 220px) 1fr; /* ← PCで本文が狭くならない */
  gap: 14px clamp(18px,3vw,32px);
  align-items:start;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}

/* ラベル（●） */
.info-label{
  margin:0;
  font-size:clamp(14px,1.6vw,16px);
  font-weight:700;
  position:relative;
  padding-left:22px;
  line-height:1.6;
  white-space:nowrap;          /* ← ラベルの改行抑止 */
}
.info-label::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:10px; height:10px;
  border-radius:50%;
  background:#333;
  box-shadow:0 0 0 3px #00000010 inset;
}

/* 本文側の体裁 */
.info-item p{ margin:.15em 0; }

/* ── 住所行だけ横並びに（住所テキスト＋ボタン同一行） ───────── */
.info-item:has(.map-link) p{display:inline}         /* 住所テキストをインライン化 */
.info-item:has(.map-link) .map-link{
  display:inline-flex;                               /* ボタンもインライン */
  vertical-align:middle;
  margin-left:.8em;                                  /* テキストとの間隔 */
}
/* :has()に未対応のブラウザ向けフォールバック（十分に効きます） */
.map-link{ display:inline-flex; margin-left:.8em; vertical-align:middle; }

/* Google Maps ボタン */
.map-link{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin-top:.4em;
  padding:10px 18px;               /* 適度な横幅 */
  border-radius:999px;
  background:#0033cc;              /* ← 新カラー */
  color:#fff;
  text-decoration:none;
  font-weight:700;
  line-height:1;
  width:auto;                      /* ← 横幅を文字数に合わせる */
  max-width:fit-content;           /* ← コンテンツ幅にフィット */
  transition:transform .06s ease, opacity .2s ease, box-shadow .2s;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  white-space:nowrap;              /* ← 複数行にならない */
}
.map-link:hover{ transform:translateY(-1px); opacity:.94 }
.map-link:active{ transform:translateY(0); opacity:.88 }

/* 経路タイトルの強調 */
.route-title{ font-weight:700; }

/* スマホ：1カラム化 */
@media (max-width: 720px){
  .info-item{
    grid-template-columns: 1fr;
    gap:8px;
    padding:14px 0;
  }
  .info-label{
    color:var(--muted);
    padding-left:18px;
    font-size:14px;
  }
  .info-label::before{
    width:8px; height:8px; top:.55em; background:#4b5563;
  }
  /* モバイルでは住所とボタンを改行して見やすく */
  .info-item:has(.map-link) p{display:block}
  .map-link{ margin-left:0; margin-top:.4em }
}

/* 印刷体裁 */
@media print{
  .map-link{ display:none }
  .access-section{ padding:0 }
  .access-content{ max-width:none; width:auto; margin:0; padding:0 }
}

/* ラベル以外は常に右列へ（長文が左列に落ちないように） */
.info-item > :not(.info-label){
  grid-column: 2 / -1;
}

/* 住所行の“テキスト＋地図ボタン”は横並びのままでOK */
.info-item:has(.map-link) p{ display:inline }
.map-link{ display:inline-flex; margin-left:.8em; vertical-align:middle }

/* スマホ時は1カラム化（再掲：必要に応じて残してください） */
@media (max-width: 720px){
  .info-item{ grid-template-columns: 1fr }
  .info-item > :not(.info-label){ grid-column:auto }
  .info-item:has(.map-link) p{ display:block }
  .map-link{ margin-left:0; margin-top:.4em }
}

/* 施設名（ロゴ表示に変更後） */
.facility-name{
  margin: 12px 0 24px;      /* 上下の余白 */
  text-align: left; 
}

.facility-logo{
  display: inline-block;
  width: clamp(180px, 28vw, 280px);  /* ← ロゴサイズ可変（スマホ〜PC） */
  height: auto;
  vertical-align: middle;
  color: #0B0765;
}

/* Google Maps アイコン */
.map-icon{
  width: 24px;         /* アイコンサイズ（調整可） */
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;   /* テキストとの間隔 */
}