/* ==========================================================================
   footmap.css — 分院一覧マップ（top.html の #fm-MapArea 専用）
   ・すべて #fm-MapArea 配下にスコープ済み（既存サイトのCSSに影響しません）
   ・クラス名／変数名は fm- / --fm- 接頭辞
   ========================================================================== */

#footMapArea{

  height:auto;
  margin:0;
  padding:0 0 32px;
  background:#faf7f4;
  font:400 15px/1.8 "Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"メイリオ",sans-serif;
  text-align:left;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
#fm-MapArea{
  --fm-bg:#faf7f4; --fm-surface:#fff; --fm-ink:#007C36; --fm-sub:#46a26e; --fm-line:#c2e0cf;
  --fm-off-fill:#eeeae7; --fm-accent:#016f31; --fm-accent-d:#3e8f61;
  --fm-tint:#ceead1; --fm-tint-h:#5ca464; --fm-gold:#94d69c;
  --fm-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  --fm-sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"メイリオ",sans-serif;
  --fm-nav-h:52px;
  /* サイト側に固定ヘッダーがある場合は、その高さ(例: 60px)をここに指定 */
  --fm-sticky-top:0px;
}

#fm-MapArea *,#fm-MapArea *::before,#fm-MapArea *::after{box-sizing:border-box}
#fm-MapArea a{color:inherit;text-decoration:none}
#fm-MapArea h2,#fm-MapArea h3,#fm-MapArea p,#fm-MapArea ul,#fm-MapArea li{margin:0;padding:0;border:0;background:none}
#fm-MapArea h2::before,#fm-MapArea h2::after,#fm-MapArea h3::before,#fm-MapArea h3::after{content:none}
#fm-MapArea .fm-wrap{max-width:960px;margin:0 auto;padding:0 16px}

/* ===== 見出し ===== */
#fm-MapArea .fm-hero{padding:44px 0 8px;text-align:center}
#fm-MapArea .fm-hero .fm-en{font:500 13px "Cormorant Garamond",serif;letter-spacing:.3em;color:var(--fm-gold);text-transform:uppercase}
#fm-MapArea .fm-hero .fm-title{font:600 clamp(24px,5vw,34px)/1.4 var(--fm-serif);margin:6px 0 10px;letter-spacing:.06em;color:var(--fm-ink)}
#fm-MapArea .fm-hero p{color:var(--fm-sub);font-size:14px}
#fm-MapArea .fm-hero strong{color:var(--fm-accent);font-size:1.25em;font-weight:700}

/* ===== MAP ===== */
/* #fm-MapArea .fm-map-block{max-width:440px;margin:0 auto;padding:20px 0 28px;scroll-margin-top:calc(var(--fm-sticky-top) + 8px)} */
#fm-MapArea .fm-map-block{max-width:640px;margin:0 auto;padding:20px 0 28px;scroll-margin-top:calc(var(--fm-sticky-top) + 8px)}
#fm-MapArea .fm-map-card{background:var(--fm-surface);border:1px solid var(--fm-line);border-radius:20px;padding:12px 8px 8px;position:relative}
#fm-MapArea .fm-map-hint{text-align:center;font-size:12.5px;color:var(--fm-sub);margin-bottom:2px}
#fm-MapArea .fm-map-hint::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fm-accent);margin-right:6px;animation:fm-pulse 2s infinite}
@keyframes fm-pulse{50%{opacity:.25}}
#fm-MapArea .fm-jp{display:block;width:100%;max-width:400px;margin:0 auto;height:auto;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#fm-MapArea .fm-region{cursor:pointer;outline:none;--fm-f:var(--fm-tint)}
#fm-MapArea .fm-region path.fm-shape{fill:var(--fm-f);stroke:var(--fm-f);stroke-width:.6;stroke-linejoin:round;transition:fill .15s,stroke .15s}
#fm-MapArea .fm-region path.fm-hit{fill:transparent;stroke:transparent;stroke-width:10;stroke-linejoin:round}
#fm-MapArea .fm-bd{fill:none;stroke:var(--fm-surface);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#fm-MapArea .fm-lead{stroke:var(--fm-accent);stroke-width:1.3;opacity:.6}
#fm-MapArea .fm-dot{fill:var(--fm-accent);stroke:var(--fm-surface);stroke-width:1.5}
#fm-MapArea .fm-pill{fill:var(--fm-surface);stroke:var(--fm-accent);stroke-width:1.5;filter:drop-shadow(0 2px 3px rgba(120,70,60,.22));transition:.15s}
#fm-MapArea .fm-lab .fm-n{font:700 13px var(--fm-sans);fill:var(--fm-ink);dominant-baseline:middle}
#fm-MapArea .fm-lab .fm-ch{fill:var(--fm-accent);transition:.15s}
#fm-MapArea .fm-lab .fm-chv{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#fm-MapArea .fm-lab .fm-soon{display:none;font:500 10px var(--fm-sans);fill:var(--fm-sub);text-anchor:end;dominant-baseline:middle}
#fm-MapArea .fm-region.is-on{--fm-f:var(--fm-tint-h)}
#fm-MapArea .fm-region.is-press{--fm-f:var(--fm-accent)}
#fm-MapArea .fm-region.is-on .fm-pill,#fm-MapArea .fm-region.is-press .fm-pill{fill:var(--fm-accent)}
#fm-MapArea .fm-region.is-on .fm-lab .fm-n,#fm-MapArea .fm-region.is-press .fm-lab .fm-n{fill:#fff}
#fm-MapArea .fm-region.is-on .fm-ch,#fm-MapArea .fm-region.is-press .fm-ch{fill:#fff}
#fm-MapArea .fm-region.is-on .fm-chv,#fm-MapArea .fm-region.is-press .fm-chv{stroke:var(--fm-accent)}
#fm-MapArea .fm-region:focus-visible .fm-pill{stroke-width:3;stroke:var(--fm-accent-d)}

/* ===== 準備中（分院なし）: HTML側で data-off を付けると押せなくなる。外すと有効 ===== */
#fm-MapArea .fm-region[data-off]{cursor:default;pointer-events:none;--fm-f:var(--fm-off-fill)}
#fm-MapArea .fm-region[data-off] .fm-lead,#fm-MapArea .fm-region[data-off] .fm-dot{opacity:.35}
#fm-MapArea .fm-region[data-off] .fm-pill{fill:var(--fm-bg);stroke:var(--fm-line);stroke-dasharray:4 3;filter:none}
#fm-MapArea .fm-region[data-off] .fm-lab .fm-n{fill:var(--fm-sub)}
#fm-MapArea .fm-region[data-off] .fm-ch,#fm-MapArea .fm-region[data-off] .fm-chv{display:none}
#fm-MapArea .fm-region[data-off] .fm-soon{display:block}
#fm-MapArea .fm-nav a[data-off],#fm-MapArea .fm-area[data-off]{display:none}
#fm-MapArea .fm-top:focus-visible,#fm-MapArea .fm-btn:focus-visible,#fm-MapArea .fm-nav a:focus-visible{outline:2px solid var(--fm-accent);outline-offset:2px}

/* ===== sticky nav（地図をスクロールで通り過ぎると表示） ===== */
#fm-MapArea .fm-nav{
  position:sticky;top:var(--fm-sticky-top);z-index:20;
  height:var(--fm-nav-h);margin-bottom:calc(var(--fm-nav-h) * -1);
  background:rgba(250,247,244,.92);
  background:color-mix(in srgb,var(--fm-bg) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--fm-line);
  transform:translateY(-100%);opacity:0;pointer-events:none;transition:.25s;
}
#fm-MapArea .fm-nav.is-show{transform:none;opacity:1;pointer-events:auto}
#fm-MapArea .fm-nav .fm-wrap{height:100%;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#fm-MapArea .fm-nav .fm-wrap::-webkit-scrollbar{display:none}
#fm-MapArea .fm-nav a{flex:none;padding:0 16px;height:36px;display:flex;align-items:center;border-radius:18px;font-size:13.5px;font-weight:500;line-height:1;color:var(--fm-sub);border:1px solid transparent}
#fm-MapArea .fm-nav a.is-on{background:var(--fm-accent);color:#fff}
#fm-MapArea .fm-nav a.fm-map-link{border-color:var(--fm-line);color:var(--fm-ink)}

/* ===== エリア別リスト ===== */
#fm-MapArea .fm-area{min-height:260px;padding:36px 0 8px;scroll-margin-top:calc(var(--fm-sticky-top) + var(--fm-nav-h) + 8px)}
#fm-MapArea .fm-area-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--fm-line);margin-bottom:16px}
#fm-MapArea .fm-area-h .fm-en{font:500 12px "Cormorant Garamond",serif;letter-spacing:.25em;color:var(--fm-gold);text-transform:uppercase}
#fm-MapArea .fm-area h2{font:600 clamp(22px,4.5vw,28px)/1.3 var(--fm-serif);letter-spacing:.05em;color:var(--fm-ink)}
#fm-MapArea .fm-area h2 em{font:500 13px var(--fm-sans);color:var(--fm-accent);margin-left:10px;letter-spacing:0;font-style:normal}
#fm-MapArea .fm-top{font-size:12.5px;color:var(--fm-sub);padding:10px 4px;white-space:nowrap}
#fm-MapArea .fm-cards{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){#fm-MapArea .fm-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){#fm-MapArea .fm-cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){#fm-MapArea .fm-wrap{max-width:970px;}}
@media (min-width:1400px){#fm-MapArea .fm-wrap{max-width:1200px;}}
@media (min-width:1700px){#fm-MapArea .fm-wrap{max-width:1400px;}}

#fm-MapArea .fm-card{background:var(--fm-surface);border:1px solid var(--fm-line);border-radius:16px;padding:18px}
#fm-MapArea .fm-card h3{font:600 17px/1.4 var(--fm-serif);margin-bottom:6px;color:var(--fm-ink)}
#fm-MapArea .fm-card .fm-ad{font-size:13.5px}
#fm-MapArea .fm-card .fm-st{font-size:12.5px;color:var(--fm-sub);margin-bottom:14px}
#fm-MapArea .fm-btn{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--fm-accent);color:var(--fm-accent-d);border-radius:22px;font-size:13.5px;font-weight:500;transition:.15s}
#fm-MapArea .fm-btn:hover{background:var(--fm-accent);color:#fff}

/* アンカー移動時のハイライト（URLの#指定 = :target / クリック時 = JSが付ける .is-flash） */
@keyframes fm-flash{0%{box-shadow:0 14px 0 -12px var(--fm-accent)}100%{box-shadow:0 14px 0 -12px transparent}}
#fm-MapArea .fm-area:target .fm-area-h,#fm-MapArea .fm-area.is-flash .fm-area-h{animation:fm-flash 1.6s ease-out}
#fm-MapArea .fm-area:target h2{color:var(--fm-accent-d)}

@media (prefers-reduced-motion:reduce){
  #fm-MapArea .fm-map-hint::before,
  #fm-MapArea .fm-area:target .fm-area-h,
  #fm-MapArea .fm-area.is-flash .fm-area-h{animation:none}
  #fm-MapArea .fm-nav{transition:none}
}