@charset "UTF-8";
/* ==========================================================
   page-access.css — アクセス（2026-08-12 新規）

   内容は https://okuhida.or.jp/access/ の本文を一字一句そのまま。
   変えたのは配色・書体・レイアウトだけ。
   ・経路図SVGは公式の濃紺 #000f23 → 冬物語の基調青 #0159b3 に再着色（図の内容は不変）
   ・見出し／本文はTOPのデザイン言語（Zen Old Mincho・青H2・インク本文18px）
   ・タブは公式と同じ2区分。JSが無い時は両方そのまま表示される（内容が欠けない）
   ========================================================== */

/* ---- タブ ---- */
.p-access__tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: var(--l-col);
  margin: 76px auto 0;
}
.p-access__tab {
  min-width: 300px;
  height: 60px;
  padding: 0 28px;
  border: 1px solid var(--color-blue);
  border-radius: 999px;
  background: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: var(--color-blue);
  cursor: pointer;
  transition: background-color 0.4s var(--ease-sig, ease), color 0.4s var(--ease-sig, ease);
}
.p-access__tab.is-active {
  background: var(--color-blue);
  color: var(--color-white);
}
@media (hover: hover) {
  .p-access__tab:not(.is-active):hover { background: var(--color-pale); }
}
.p-access__tab:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }

/* ---- パネル（JS有効時は選択中だけ表示。無効時は両方表示） ---- */
.js .p-access__panel { display: none; }
.js .p-access__panel.is-active { display: block; }

/* ---- 見出し・本文 ---- */
.p-access__heading {
  width: var(--l-col);
  margin: 88px auto 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  text-align: center;
  color: var(--color-blue);
}
.p-access__body {
  width: var(--l-col);
  margin: 44px auto 0;
}
.p-access__body p {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 18px;
  line-height: 36px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-align: justify;
}
.p-access__body p + p { margin-top: 28px; }

/* ---- 凡例（公式2026-08-15版で追加。経路図の右肩に置く） ---- */
.p-access__legend {
  display: block;
  margin: 64px 0 0 auto;
  height: 24px;
}

/* ---- 周辺観光地へのアクセス（公式2026-08-15版で追加） ---- */
.p-access__around { margin-top: 120px; }
.p-access__bus {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.p-access__map--around { margin-top: 64px; }

/* ---- 図版（広域マップ＋経路図） ---- */
.p-access__figures { width: var(--l-col); margin: 0 auto; }

.p-access__map {
  margin: 64px 0 0;
  text-align: center;
}

.p-access__map img {
  display: block;
  width: var(--l-col);
  height: auto;
}
/* 広域イラストマップの帯（公式実測: 1140×428・object-fit:cover 中央＝
   正方形の原図を「少しだけ見せて」クリックで全体。2026-08-16 市岡さん指示）。
   帯の幅は本文カラムよりひと回り広い1253px（ページ端 --l-edge 基準・公式の見え方） */
.p-access__map--band {
  width: 1253px;
  margin-left: -146.5px;   /* (1253-960)/2 ＝ カラム中央合わせ */
}
.p-access__map--band img {
  width: 100%;
  aspect-ratio: 1140 / 428;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.p-access__map-note {
  margin-top: 14px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgba(55, 57, 60, 0.75);
}

/* ---- 冬季閉鎖の案内（2026-09-10 定例・周辺観光地の下）----
   既存の .p-access__map-note と同じ語彙。2文で折り返すので行送りだけ持たせる */
.p-access__closure {
  margin-top: 24px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: rgba(55, 57, 60, 0.75);
}

.p-access__route { margin-top: 72px; }
.p-access__route-title {
  margin: 0;
  padding-left: 16px;
  border-left: 4px solid var(--color-blue);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-blue);
}
/* 経路図SVGは 1015.64×324.65（viewBox）。カラム幅に合わせて等比で置く */
.p-access__chart {
  display: block;
  width: var(--l-col);
  height: auto;
  margin-top: 28px;
}

/* ==========================================================
   SP（393px設計）
   ========================================================== */
@media (max-width: 767px) {

  .p-access__tabs {
    width: var(--l-col);
    flex-direction: column;
    gap: 10px;
    margin-top: 44px;
  }
  .p-access__tab { min-width: 0; width: 100%; height: 52px; font-size: 15px; }

  .p-access__heading { width: var(--l-col); margin-top: 52px; font-size: 22px; }
  .p-access__body { width: var(--l-col); margin-top: 26px; }
  .p-access__body p { font-size: 16px; line-height: 30px; }
  .p-access__body p + p { margin-top: 20px; }

  .p-access__figures { width: var(--l-col); }
  .p-access__map { margin-top: 36px; }
  .p-access__map img { width: var(--l-col); }
  /* SPも同じ縦横比の帯（公式のレスポンシブ挙動と同じ）。カラム幅に戻す */
  .p-access__map--band { width: var(--l-col); margin-left: 0; }
  .p-access__map--band img { width: 100%; }
  .p-access__map-note { margin-top: 10px; font-size: 14px; }

  .p-access__route { margin-top: 40px; }
  .p-access__legend { margin-top: 36px; height: 20px; }
  .p-access__around { margin-top: 64px; }
  .p-access__bus { margin-top: 28px; }
  .p-access__map--around { margin-top: 36px; }
  .p-access__route-title { padding-left: 12px; font-size: 17px; }
  /* 経路図は横長（3.1:1）。SP幅では細かすぎるので横スクロールで原寸に近い大きさを保つ */
  .p-access__chart {
    width: 680px;
    max-width: none;
    margin-top: 18px;
  }
  .p-access__route {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- 2026-09-24 定例: 周辺観光地へのアクセス ---- */
/* 冬季閉鎖の案内を見出しのすぐ下に青字で */
.p-access__closure--lead {
  margin: 32px 0 0;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-blue);
}
/* 周辺マップ（Googleマップ埋め込み） */
.p-access__gmap { margin-top: 64px; }
.p-access__gmap-frame {
  margin-top: 20px;
  height: 440px;
  border: 1px solid rgba(55, 57, 60, 0.32);
}
.p-access__gmap-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) {
  .p-access__closure--lead { margin-top: 20px; font-size: 14px; text-align: left; }
  .p-access__gmap { margin-top: 36px; }
  .p-access__gmap-frame { margin-top: 14px; height: 300px; }
}

/* ==========================================================
   【2026-10-11 横山さん指摘（冬物語ルーム 10/10 14:52）「アクセスのマップ部分が異常にガタガタ」】
   原因: Googleマップの iframe の上でホイールを回すとホイールが iframe に取られ、ページの慣性スクロール（Lenis）が
   追従できずにカクつく（スクショは「⌘キーを押しながらスクロール」の表示が出た状態）。
   対応: クリック（タップ）するまで地図はポインター操作を受けない。操作中はカーソルが枠から出たら元に戻る
   （SP は「地図の操作を終える」）。戻す時はこのブロックを消し、access.html の .p-access__gmap-guard／--done と
   lower.js の該当節を外す
   ========================================================== */
.p-access__gmap-frame { position: relative; }
.p-access__gmap-frame iframe { pointer-events: none; }
.p-access__gmap-frame.is-live iframe { pointer-events: auto; }
.p-access__gmap-guard {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-jp);
}
.p-access__gmap-guard-label {
  display: inline-flex;
  align-items: center;
  height: 46px;   /* SP はキャンバス倍率 0.992 で縮むので 44px を割らない値 */
  padding: 0 20px;
  border: 1px solid var(--color-blue);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-blue);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.p-access__gmap-guard-label--sp { display: none; }
@media (hover: hover) {
  .p-access__gmap-guard:hover .p-access__gmap-guard-label,
  .p-access__gmap-guard:focus-visible .p-access__gmap-guard-label { background: var(--color-blue); color: var(--color-white); }
}
@media (hover: none) {
  .p-access__gmap-guard-label--pc { display: none; }
  .p-access__gmap-guard-label--sp { display: inline-flex; }
}
.p-access__gmap-frame.is-live .p-access__gmap-guard { display: none; }
.p-access__gmap-done {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-blue);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-blue);
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.p-access__gmap-done[hidden] { display: none; }