/* =========================================================
   access.css ? アクセスページ専用（tickets.css と同トーン）
   ========================================================= */

/* フォールバック変数（base/animals 未読でも最低限保つ） */
:root{
  --page-max: 1100px;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(2,33,73,.08);
  --c-bg: #f5f9ff;
  --c-surface: #ffffff;
  --c-fg: #0f172a;
  --c-muted: #475569;
  --c-border: #e2e8f0;
  --c-primary: #0b63c5;
  --c-primary-dk: #0a55aa;
  --blue-accent: #98c7ff;
}

/* ===== 幅ロック：チケットと同じ感覚で中央寄せ ===== */
/* どちらの書き方でも効くように二重指定（HTML側のclass揺れ対策） */
#main.access > .page,
.access .page{
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ===== 地図カード ===== */
.map-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #dfe8f5;
}
.map-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* 地図下のルートボタン（チケットのボタン挙動に揃える） */
.route-buttons{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:10px;
}
.btn-primary,
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 20px;
  border-radius:999px; font-weight:700; text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  border:1px solid var(--c-primary);
}
.btn-primary{
  background:var(--c-primary); color:#fff;
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:#fff; color:var(--c-primary);
  outline:3px solid rgba(152,199,255,.35); outline-offset:2px;
}
.btn-outline{
  background:#fff; color:var(--c-primary);
}
.btn-outline:hover,
.btn-outline:focus-visible{
  background:var(--c-primary); color:#fff;
  outline:3px solid rgba(152,199,255,.35); outline-offset:2px;
}

/* ===== アクセス方法（cards） ===== */
.access-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(2,1fr);
}
@media (max-width: 900px){
  .access-grid{ grid-template-columns: 1fr; }
}
.access-card{
  background:#fff; border:1px solid var(--c-border); border-radius:14px;
  box-shadow: var(--shadow); padding:14px 16px;
}
.access-card h3{ margin:0 0 8px; font-size:1.05rem; line-height:1.3 }
.badge{
  display:inline-block; margin-left:.4em; padding:.2em .55em; font-size:.78rem;
  border:1px solid var(--c-border); border-radius:999px; color:#334;
}

/* 駐車に関するお願い（5枚目のカード）だけをフル幅にする */
@media (min-width: 800px){
  #main.access .access-grid .access-card:nth-child(5){
    grid-column: 1 / -1;       /* 2カラムをまたいで全幅に */
  }
}




/* ===== バリアフリー ===== */
.facility-grid{
  display:grid; gap:12px; grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 800px){
  .facility-grid{ grid-template-columns: 1fr; }
}
.facility{
  background:#fff; border:1px solid var(--c-border); border-radius:12px;
  box-shadow: var(--shadow); padding:12px 14px;
}
.facility h3{ margin:0 0 6px; font-size:1rem }
.facility p{ margin:.3rem 0 0; color:var(--c-fg) }

/* 備考の文字色 */
.note{ color:var(--c-muted); font-size:.92rem }