@charset "UTF-8";
/* ==========================================================================
   Mobility Park  /  Top page
   --------------------------------------------------------------------------
   ピンの配色は施設ごとに1色（data.js の color）。
   その1色が「縁・文字・丸アイコン・しっぽ・MORE VIEW」すべてに使われ、
   背景は常に白。PDFデザインから色を抽出して再現しています。
   ========================================================================== */

/* ---------- 変数 ---------- */
:root{
  --c-text:      #333a41;
  --c-text-weak: #8b949c;
  --c-line:      #e3e6e9;
  --c-bg:        #ffffff;
  --c-primary:   #7296b7;            /* サイト共通のアクセント（＝ショールーム棟の青） */

  --sidebar-w:    clamp(200px, 15vw, 264px);
  --sidebar-w-sm: 96px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --morph: .46s;                      /* ボタン→ウィンドウ変形の速さ */

  --font-ja: "Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-ja);
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.8;
  font-size:14px;
  overscroll-behavior-y:none;
}
img{ max-width:100%; height:auto; vertical-align:bottom; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,p{ margin:0; }

.u-visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   レイアウト
   ========================================================================== */
.layout{ display:flex; height:100dvh; min-height:100dvh; overflow:hidden; }

/* ==========================================================================
   サイドバー
   ========================================================================== */
.sidebar{
  position:relative; z-index:40;
  flex:0 0 var(--sidebar-w);
  width:var(--sidebar-w);
  background:var(--c-bg);
  border-right:1px solid var(--c-line);
  transition:flex-basis .45s var(--ease), width .45s var(--ease);
}
.layout.is-collapsed .sidebar{ flex-basis:var(--sidebar-w-sm); width:var(--sidebar-w-sm); }

.sidebar__inner{
  display:flex; flex-direction:column; height:100%;
  padding:32px 0 24px;
  overflow-y:auto; overscroll-behavior:contain;
}

.sidebar__logo{ display:flex; flex-direction:column; align-items:center; gap:0; padding:0 16px 22px; }
.sidebar__logo img{
  width:clamp(64px, 7vw, 116px); height:auto;
  mix-blend-mode:multiply;              /* 白背景JPGの白フチを馴染ませる */
  transition:width .45s var(--ease);
}
.layout.is-collapsed .sidebar__logo img{ width:52px; }

/* ---- ナビ ---- */
.nav{ flex:1 1 auto; }
.nav__list{
  border-top:1px solid var(--c-line);
  transition:opacity .3s var(--ease), visibility .3s;
}
.layout.is-collapsed .nav__list{ opacity:0; visibility:hidden; pointer-events:none; }
.nav__item{ border-bottom:1px solid var(--c-line); }
.nav__link{
  display:block;
  padding:14px 16px;
  font-size:11.5px; letter-spacing:0; line-height:1.5;
  color:#4a545e;
  transition:background-color .25s, color .25s;
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__item.is-active .nav__link{ background:#f4f7f9; color:var(--c-primary); }

/* ---- 補助メニュー（会社概要・お問い合わせ・プライバシーポリシー）----
   施設メニューより優先度を下げた別グループ。
   区切り線を持たせず、文字も小さく淡くして控えめに見せる。 */
.nav-sub{
  padding:22px 16px 4px;
  transition:opacity .3s var(--ease), visibility .3s;
}
.layout.is-collapsed .nav-sub{ opacity:0; visibility:hidden; pointer-events:none; }
.nav-sub__list{ display:flex; flex-direction:column; gap:10px; }
.nav-sub__link{
  display:inline-block;
  font-size:10.5px;
  letter-spacing:.02em;
  line-height:1.4;
  color:#8a939b;          /* 施設メニュー(#4a545e)より淡く、ただし読める濃さ */
  transition:color .25s;
}
.nav-sub__link:hover,
.nav-sub__link:focus-visible{ color:var(--c-primary); }

/* ---- 公式SNS（サイドバー下部・下層ページのフッター 共用）---- */
.sns{
  display:flex; flex-wrap:wrap; gap:4px;      /* SNS6件がサイドバー最小幅(200px)に収まる間隔 */
  padding:18px 14px 4px;
  transition:opacity .3s var(--ease), visibility .3s;
}
.layout.is-collapsed .sns{ opacity:0; visibility:hidden; pointer-events:none; }
.sns__link{
  display:grid; place-items:center;
  width:25px; height:25px;
  border:1px solid #dfe3e6;
  border-radius:50%;
  color:#8a939b;
  transition:color .25s, border-color .25s, background-color .25s, transform .25s var(--ease);
}
.sns__link:hover,
.sns__link:focus-visible{
  color:#fff;
  background:var(--c-primary);
  border-color:var(--c-primary);
  transform:translateY(-2px);
}
.sns__icon{ display:block; width:12px; height:12px; }

/* ==========================================================================
   マップ
   ========================================================================== */
.map{
  position:relative;
  flex:1 1 auto; min-width:0;
  overflow:hidden;
  background:#dfe6ea;
  touch-action:none;
  cursor:grab;
  user-select:none; -webkit-user-select:none;
}
.map.is-dragging{ cursor:grabbing; }

/* ---- ステージ：イラストとピンを内包する“1枚の箱” ----------------------
   JS が transform を掛けるのはこの要素だけ。ピンは中に % 座標で置かれて
   いるため、拡大率・画面幅がどう変わってもイラストとの相対位置はズレない。
   ---------------------------------------------------------------------- */
.map__stage{
  position:absolute; top:0; left:0;
  width:1448px; height:906px;
  transform-origin:0 0;
  /* will-change:transform は付けない。
     付けると要素が合成レイヤーとして固定され、中の文字が
     「一度ビットマップ化されてから拡大」されるためボケてしまう。 */
}
.map:not(.is-ready) .map__stage{
  width:auto; height:auto; inset:0; margin:auto;
  max-width:100%; max-height:100%;
  aspect-ratio:1448 / 906;
}
.map__stage picture{ display:block; width:100%; height:100%; }
.map__img{ display:block; width:100%; height:100%; pointer-events:none; -webkit-user-drag:none; }

/* ==========================================================================
   ピン ＝ ボタンであり、ウィンドウでもある
   --------------------------------------------------------------------------
   .pin        … 大きさ0の「点」。アンカー座標そのもの。
                 scale(1/拡大率) で逆補正するので、拡大してもUIの大きさは一定。
   .pin__card  … 閉じると丸いボタン／開くと白いウィンドウ。同じ要素が変形する。
                 下端（しっぽ）を固定したまま上へ伸びる。
   .pin__tail  … 三角形の先端がちょうどアンカー点に刺さる。
   ========================================================================== */
.pin{
  --head-h:38px;      /* 閉じたボタンの高さ */
  --gap:13px;         /* しっぽの高さ分の余白 */
  position:absolute;
  left:var(--x); top:var(--y);
  width:0; height:0;
  z-index:5;
  /* 通常は transform を掛けない。掛けると文字のアンチエイリアスが
     劣化してボケた印象になるため。 */
}
/* ピンチ操作中だけ、見た目の大きさを保つために逆倍率を掛ける */
.map.is-pinching .pin{
  transform:scale(var(--inv,1));
  transform-origin:0 0;
}
.pin.is-hover{ z-index:10; }
.pin.is-active{ z-index:30; }

/* ---- カード本体 ---- */
.pin__card{
  position:absolute;
  left:0; bottom:var(--gap);
  width:var(--w);
  /* transform ではなく margin で中央に寄せる。
     幅は偶数px に丸めてあるので、半端な小数位置にならず文字がクッキリする。 */
  margin-left:calc(var(--w) / -2);
  background:#fff;
  border:1.5px solid var(--key);
  border-radius:999px;
  box-shadow:0 3px 12px rgba(30,50,70,.16);
  overflow:hidden;
  text-align:left;
  transition:width var(--morph) var(--ease),
             margin-left var(--morph) var(--ease),
             border-radius var(--morph) var(--ease),
             box-shadow var(--morph) var(--ease),
             transform .3s var(--ease);
}
.pin.is-active .pin__card{
  width:var(--w-open);
  margin-left:calc(var(--w-open) / -2);
  border-radius:14px;
  box-shadow:0 12px 34px rgba(25,45,65,.26);
}
/* 画面端で内側へずらすときだけ transform を使う（通常は無変形のまま） */
.pin.is-shifted .pin__card{ transform:translateX(var(--shift, 0px)); }
/* ドラッグ／ピンチ中はずらし量が毎フレーム変わる。
   アニメーションを効かせたままだとカードだけが遅れて付いてきて
   ふらついて見えるので、操作中は即座に追従させる。 */
.map.is-dragging .pin:not(.is-active) .pin__card,
.map.is-pinching .pin:not(.is-active) .pin__card{ transition:none; }

/* 上に余白が足りないピンは、ヘッダーを動かさず下へ伸ばす。
   閉じた状態のボックスは上方向と完全に一致するので、切り替えても飛ばない。 */
.pin.is-down .pin__card{
  bottom:auto;
  top:calc(-1 * (var(--gap) + var(--head-h) + 3px));
}
/* 幅の実測中はアニメーションを止める */
.pin.is-measuring .pin__card,
.pin.is-measuring .pin__body,
.pin.is-measuring .pin__label,
.pin.is-measuring .pin__head{ transition:none !important; }

/* ---- ヘッダー（＝閉じているときのボタン部分） ---- */
.pin__head{
  display:flex; align-items:center; gap:10px;
  width:100%; height:var(--head-h);
  padding:0 6px 0 18px;
  transition:height var(--morph) var(--ease), padding var(--morph) var(--ease);
}
.pin.is-active .pin__head{ height:54px; padding:0 12px 0 16px; }

.pin__no{ display:none; font-size:13px; font-weight:700; color:var(--key); }

.pin__label{
  flex:1 1 auto; min-width:0; overflow:hidden;
  font-size:14px; font-weight:500; letter-spacing:.02em;
  white-space:nowrap;
  color:var(--key);
  transition:font-size var(--morph) var(--ease), font-weight var(--morph);
}
.pin.is-active .pin__label{ font-size:16px; font-weight:600; }

.pin__icon{
  flex:0 0 auto;
  position:relative;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--key);
  transition:width var(--morph) var(--ease), height var(--morph) var(--ease);
}
.pin.is-active .pin__icon{ width:30px; height:30px; }
.pin__icon::before{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:8px; height:8px;
  border-right:1.8px solid #fff;
  border-bottom:1.8px solid #fff;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--morph) var(--ease);
}
.pin.is-active .pin__icon::before{ transform:translateY(2px) rotate(225deg); }

/* ---- 中身（閉じているときは高さ0で畳まれている） ---- */
.pin__body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--morph) var(--ease);
}
.pin.is-active .pin__body{ grid-template-rows:1fr; }
.pin__body-in{ overflow:hidden; min-height:0; }
.pin__body-in > *{
  opacity:0; transform:translateY(5px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.pin.is-active .pin__body-in > *{ opacity:1; transform:none; transition-delay:.18s; }

.pin__desc{ margin:0 16px 11px; font-size:12px; line-height:1.8; color:#5d666f; }
.pin__thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 16px 12px; }
.pin__thumbs img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px; background:#eceff1; }
/* data.js の images を [] にした施設は、写真の枠ごと畳んで余白を残さない */
.pin__thumbs:empty{ display:none; }

.pin__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 16px 14px; }
.pin__hours{ font-size:10.5px; color:var(--c-text-weak); white-space:nowrap; }
.pin__more{
  display:inline-flex; align-items:center; gap:10px;
  height:30px; padding:0 13px;
  border-radius:4px;
  background:var(--key); color:#fff;
  font-size:11px; letter-spacing:.14em; white-space:nowrap;
  transition:opacity .25s, gap .25s var(--ease);
}
.pin__more:hover{ opacity:.86; gap:13px; }
.pin__more-arrow{
  width:6px; height:6px;
  border-right:1.6px solid #fff; border-bottom:1.6px solid #fff;
  transform:translateX(-1px) rotate(-45deg);
}

/* 外部サイトへのリンクは「別タブで開く」ことが分かる斜め矢印にする */
.pin__more-arrow.is-external{
  position:relative;
  width:11px; height:11px;
  border:0;
  transform:none;
}
.pin__more-arrow.is-external::before{
  content:"";
  position:absolute; left:0; bottom:1px;
  width:13px; height:1.6px;
  background:#fff;
  transform-origin:0 50%;
  transform:rotate(-45deg);
}
.pin__more-arrow.is-external::after{
  content:"";
  position:absolute; right:0; top:0;
  width:6px; height:6px;
  border-top:1.6px solid #fff; border-right:1.6px solid #fff;
}

/* 準備中の施設は、リンクではなく「COMING SOON」を出す */
.pin__soon{
  display:inline-flex; align-items:center;
  height:30px; padding:0 13px;
  border-radius:4px;
  background:#f0f2f4;
  color:#9aa3ab;
  font-size:11px; letter-spacing:.14em; white-space:nowrap;
  cursor:default;
}

/* ---- しっぽ（白い三角＋色の縁） ---- */
.pin__tail{
  position:absolute; left:0; bottom:0;
  width:20px; height:14px;
  margin-left:-10px;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}
.pin__tail::before,
.pin__tail::after{
  content:""; position:absolute; left:0; top:0;
  width:0; height:0;
  border-left:10px solid transparent; border-right:10px solid transparent;
}
.pin__tail::before{ border-top:14px solid var(--key); }        /* 外側＝縁の色 */
.pin__tail::after{                                              /* 内側＝白 */
  /* 外側の三角と「辺どうしの間隔」が 1.5px（＝カードの枠線と同じ太さ）に
     なるように、外側と同じ傾き(10:14)を保ったまま内側へオフセットした寸法。
     先端は -2 + 13.4 = 11.4px の位置に来る。 */
  top:-2px; left:0.4px;
  border-left-width:9.6px; border-right-width:9.6px;
  border-top:13.4px solid #fff;
}
/* 下方向に開いたときはカードがアンカーを覆うのでしっぽを消す */
.pin.is-down.is-active .pin__tail{ opacity:0; }

/* ---- 開いているウィンドウの上では、マップのドラッグを無効にして
        文字を選択・コピーできるようにする ---- */
.pin.is-active .pin__card{
  cursor:default;
  user-select:text;
  -webkit-user-select:text;
}
.pin.is-active .pin__head{ cursor:pointer; }
.pin.is-active .pin__desc,
.pin.is-active .pin__hours{ cursor:text; }
.pin.is-active .pin__more{ cursor:pointer; }

/* ---- ホバー ---- */
.pin__card:hover,
.pin.is-hover .pin__card{ box-shadow:0 6px 20px rgba(30,50,70,.26); }
.pin:not(.is-active) .pin__head:hover .pin__icon{ transform:scale(1.08); }

/* ---- コンパクト表示（狭い画面・縮小時）---- */
.map[data-pins="compact"] .pin__card{
  width:34px !important;
  /* 幅を34pxに固定するので、中央寄せの margin も34px基準に上書きする。
     これを入れないと開閉のたびに --w / --w-open で左右にずれ、
     さらに丸としっぽ（三角）の中心も合わなくなる。 */
  margin-left:-17px !important;
  border-radius:999px !important;
  box-shadow:0 2px 8px rgba(30,50,70,.24);
}
.map[data-pins="compact"] .pin__head{ height:34px; padding:0; justify-content:center; }
.map[data-pins="compact"] .pin__label,
.map[data-pins="compact"] .pin__icon,
.map[data-pins="compact"] .pin__body{ display:none; }
.map[data-pins="compact"] .pin__no{ display:block; }
.map[data-pins="compact"] .pin.is-active .pin__card{ background:var(--key); }
.map[data-pins="compact"] .pin.is-active .pin__no{ color:#fff; }

/* ==========================================================================
   サイドバー開閉ボタン
   ========================================================================== */
.map__toggle{
  position:absolute; z-index:25; top:0; left:0;
  width:26px; height:28px;
  display:grid; place-items:center;
  background:#fff;
  border-bottom-right-radius:4px;
  box-shadow:0 1px 6px rgba(30,50,70,.14);
  transition:background-color .25s;
}
.map__toggle:hover{ background:#f2f6f8; }
.map__toggle-icon{
  width:7px; height:7px;
  border-left:1.6px solid #66727d; border-bottom:1.6px solid #66727d;
  transform:translateX(1px) rotate(45deg);
  transition:transform .4s var(--ease);
}
.layout.is-collapsed .map__toggle-icon{ transform:translateX(-1px) rotate(225deg); }

/* ==========================================================================
   ボトムシート（スマホ専用。PCでは使わない）
   ========================================================================== */
.map__ui{ position:absolute; inset:0; z-index:35; pointer-events:none; }
.panel{ display:none; }

/* ==========================================================================
   マップ内 補助表示
   ========================================================================== */
.map__copy{
  position:absolute; right:14px; bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:15;
  font-size:10px; letter-spacing:.04em; color:#5c6b78;
  text-shadow:0 1px 3px rgba(255,255,255,.8);
  pointer-events:none;
}
.map__hint{
  position:absolute; left:50%; bottom:16px; z-index:15;
  transform:translateX(-50%);
  padding:6px 14px; border-radius:999px;
  background:rgba(47,64,80,.78); color:#fff;
  font-size:11px; letter-spacing:.04em; white-space:nowrap;
  pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease);
}
.map__hint.is-visible{ opacity:1; }

/* ==========================================================================
   SP用 施設一覧（PCでは非表示）
   ========================================================================== */
.sp-list{ display:none; }

@media (max-width:900px){ :root{ --sidebar-w:210px; } }

/* ==========================================================================
   スマートフォン／縦長タブレット
   --------------------------------------------------------------------------
   画面が狭くカードが収まらないため、ピンは番号だけの丸ピンにし、
   情報は画面下から出るシートで見せます（カードの変形はPC専用）。
   ========================================================================== */
@media (max-width:767px), (max-width:1023px) and (orientation:portrait){
  body{ overflow-y:auto; }
  .layout{ display:block; height:auto; min-height:0; overflow:visible; }

  /* ---- サイドバー＝ドロワー ---- */
  .sidebar{
    position:fixed; z-index:60; top:0; left:0;
    width:min(78vw, 300px); height:100dvh;
    box-shadow:8px 0 28px rgba(20,40,60,.16);
    transform:translateX(-102%);
    transition:transform .4s var(--ease);
  }
  .layout.is-drawer-open .sidebar{ transform:translateX(0); }
  .layout.is-collapsed .sidebar{ width:min(78vw,300px); }
  .layout.is-collapsed .nav__list,
  .layout.is-collapsed .nav-sub,
  .layout.is-collapsed .sns{ opacity:1; visibility:visible; pointer-events:auto; }
  .nav-sub{ padding:24px 16px 8px; }
  .nav-sub__link{ font-size:11.5px; }
  .sns{ padding:18px 16px 8px; gap:8px; }
  .sns__link{ width:34px; height:34px; }
  .sns__icon{ width:15px; height:15px; }
  .sidebar__inner{ padding-top:max(28px, env(safe-area-inset-top)); }
  .sidebar__logo img,
  .layout.is-collapsed .sidebar__logo img{ width:96px; }

  .layout::after{
    content:""; position:fixed; inset:0; z-index:55;
    background:rgba(20,35,50,.42);
    opacity:0; visibility:hidden;
    transition:opacity .4s var(--ease), visibility .4s;
  }
  .layout.is-drawer-open::after{ opacity:1; visibility:visible; }

  /* ---- マップ ---- */
  /* イラストが横長（1448:906）になったぶん、マップの高さを抑えて
     左右いっぱいの施設（ガソリンスタンド〜レンタカー）が初期表示で
     すべて画面に入るようにしている。 */
  .map{ height:46dvh; min-height:300px; }
  .map__toggle{ top:10px; left:10px; width:40px; height:40px; border-radius:6px; }
  .map__toggle-icon{
    width:17px; height:1.6px; border:0; background:#66727d;
    transform:none; box-shadow:0 -5px 0 #66727d, 0 5px 0 #66727d;
  }
  .layout.is-collapsed .map__toggle-icon{ transform:none; }
  .map__hint{ bottom:38px; }
  .map__copy{ font-size:9px; }

  /* SPではカードを広げない（情報はシートで見せる）。
     幅を閉じたまま(--w)にするので、中央寄せの margin も --w 基準に戻す。
     （--w-open のままだと、タップのたびにボタンが左右へ動いてしまう） */
  .pin.is-active .pin__card{
    width:var(--w);
    margin-left:calc(var(--w) / -2);
    border-radius:999px;
  }
  .pin__body{ display:none; }

  /* ---- SPはしっぽ（三角の装飾）を使わず、丸いボタンだけにする ----
     もともと「三角の先端」が施設の座標そのものだったので、三角を消すと
     ボタンが座標より上に浮いてしまう。そこで丸の“中心”が元の先端と
     同じ位置に来るよう、カードを下げて座標にぴったり重ねる。
       ずらす量 ＝ カードの高さ ÷ 2
       カードの高さ ＝ ボタンの高さ ＋ 上下の枠線(1.5px × 2 ＝ 3px)
     あわせて is-down（上に余白が無いとき下へ開く指定）も無効化する。
     SPはカードが広がらない＝上下に開く概念が無いため、
     残しておくと位置だけがずれてしまうため。 */
  .pin__tail{ display:none; }
  .pin__card,
  .pin.is-down .pin__card{
    top:auto;
    bottom:calc((var(--head-h) + 3px) / -2);   /* 38 + 3 → -20.5px */
  }
  /* 数字だけの丸ピンはボタンの高さが 34px なので (34 + 3) ÷ 2 = 18.5px */
  .map[data-pins="compact"] .pin__card,
  .map[data-pins="compact"] .pin.is-down .pin__card{ bottom:-18.5px; }

  /* ---- ボトムシート ---- */
  .panel{
    display:block;
    position:fixed; z-index:70;
    left:0; right:0; bottom:0; top:auto;
    padding:20px 20px calc(22px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:2px solid var(--key);
    border-radius:16px 16px 0 0;
    box-shadow:0 -8px 30px rgba(25,45,65,.2);
    pointer-events:auto;
    user-select:text;
    -webkit-user-select:text;
    transform:translateY(100%);
    transition:transform .38s var(--ease);
  }
  .panel.is-open{ transform:translateY(0); }
  .panel[hidden]{ display:none; }

  .panel__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .panel__title{ font-size:17px; font-weight:600; letter-spacing:.03em; line-height:1.4; color:var(--key); }
  .panel__close{
    flex:0 0 auto; position:relative;
    width:30px; height:30px; border-radius:50%;
    background:var(--key);
  }
  /* SPのシートは「下へ向かって」閉じるので、矢印も下向き（∨）にする。
     PCの吹き出しは上へ畳まれるため、そちらは上向き（∧）のままでよい。
     ＝この指定はSP用メディアクエリの中だけに置いている。 */
  .panel__close-icon{
    position:absolute; inset:0; margin:auto;
    width:8px; height:8px;
    border-right:1.8px solid #fff; border-bottom:1.8px solid #fff;
    transform:translateY(-2px) rotate(45deg);
  }
  .panel__desc{ font-size:13px; line-height:1.85; color:#5d666f; margin-bottom:14px; }
  .panel__thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
  .panel__thumbs:empty{ display:none; }
  .panel__thumbs img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; background:#eceff1; }
  .panel__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .panel__hours{ font-size:11px; color:var(--c-text-weak); }
  .panel__more{ height:36px; padding:0 16px; font-size:12px; }
  .panel__action{ display:flex; align-items:center; }
  .panel .pin__soon{ height:36px; padding:0 16px; font-size:12px; }
  .panel__tail{ display:none; }

  /* ---- 施設一覧 ---- */
  .sp-list{ display:block; padding:36px 20px calc(40px + env(safe-area-inset-bottom)); background:#f7f9fa; }
  .sp-list__title{ font-size:18px; letter-spacing:.16em; color:var(--c-primary); margin-bottom:18px; }
  .sp-list__title span{ display:block; font-size:11px; letter-spacing:.08em; color:var(--c-text-weak); margin-top:2px; }
  .sp-list__item{ border-bottom:1px solid var(--c-line); }
  .sp-list__item:first-child{ border-top:1px solid var(--c-line); }
  .sp-list__link{ display:flex; align-items:center; gap:12px; padding:15px 4px; font-size:13.5px; }
  .sp-list__no{
    flex:0 0 auto; width:26px; height:26px;
    display:grid; place-items:center; border-radius:50%;
    background:#fff; border:1.5px solid var(--key); color:var(--key);
    font-size:12px; font-weight:700;
  }
  .sp-list__arrow{
    margin-left:auto; width:6px; height:6px;
    border-right:1.5px solid #9aa5ae; border-bottom:1.5px solid #9aa5ae;
    transform:rotate(-45deg);
  }
  .sp-list__copy{ margin-top:28px; text-align:center; font-size:10px; color:var(--c-text-weak); }
}

/* ==========================================================================
   フォーカス・座標調整モード・アニメーション配慮
   ========================================================================== */
.pin__head:focus-visible,
.nav__link:focus-visible,
.nav-sub__link:focus-visible,
.sns__link:focus-visible,
.pin__more:focus-visible,
.panel__more:focus-visible,
.map__toggle:focus-visible,
.panel__close:focus-visible{
  outline:2px solid var(--key, var(--c-primary));
  outline-offset:2px;
}

.map:not(.is-ready) .pin,
.map:not(.is-measured) .pin{ opacity:0; }
.pin{ transition:opacity .3s var(--ease); }

.coord{
  position:fixed; z-index:200; left:12px; bottom:12px;
  padding:10px 14px; border-radius:6px;
  background:rgba(25,35,45,.9); color:#fff;
  font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre;
}
.coord b{ color:#8fd0ff; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}