/* ==================================================================
   店の場所の地図（トップ、ACCESS の前）
   スクロールに合わせて「九州 → 熊本県 → 熊本市 → 西区島崎」と寄っていく。
   地図は斜めに倒した板の上に描き、寄るときは SVG の viewBox を動かす
   （CSS の scale で拡大すると、ぼやけた画像が引き伸ばされるため）。
   色：ほかの県 #e5e5e5 ／ 熊本県 黒 ／ 熊本市 白 ／ 西区 薄い赤 #dc8f95 ／ 板の厚み #9b9b9b
================================================================== */
.zmap{position:relative;height:340vh;margin-top:150px}
.zmap__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* 今どこまで寄っているか（左上） */
/* 地図が赤や黒になっても読めるよう、白い台に載せる */
.zmap__steps{position:absolute;left:calc(9% - 36px);top:17%;z-index:3;margin:0;padding:14px 22px 14px 36px;list-style:none;background:var(--white)}
.zmap__steps li{display:flex;align-items:baseline;column-gap:12px;padding:5px 0;
  font-family:var(--jp);font-weight:700;font-size:15px;line-height:1.4;color:var(--cat);transition:color .4s ease}
.zmap__steps span{position:relative;width:34px;font-family:var(--cond);font-weight:500;font-size:14px;letter-spacing:.06em}
.zmap__steps span::before{content:"";position:absolute;left:-22px;top:50%;width:0;height:2px;background:var(--accent);transition:width .4s ease}
.zmap__steps .is-on{color:var(--black)}
.zmap__steps .is-on span::before{width:14px}

/* 地図の板 */
.zmap__stage{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 0}
.zmap__scene{position:absolute;left:-10%;top:-12%;width:120%;height:150%;
  transform-style:preserve-3d;transform:rotateX(52deg) rotateZ(-10deg)}
.zmap__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zmap__svg--side{transform:translateZ(-14px);fill:var(--date)}
.zmap__svg--top .zmap__pf{fill:#e5e5e5;stroke:var(--white);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;fill-rule:evenodd}
.zmap__svg--top .zmap__pf--kumamoto{fill:var(--black);stroke:var(--black)}
.zmap__svg--top .zmap__wd{fill:var(--white);stroke:var(--ph);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;fill-rule:evenodd}
/* 西区は赤を白と半々に混ぜた色。下に熊本県の黒があるので透明度では塗れない */
.zmap__svg--top .zmap__wd--nishi{fill:#dc8f95;stroke:var(--white)}
.zmap pattern path{fill:none;stroke:var(--tile);stroke-width:1;vector-effect:non-scaling-stroke}

/* 地名 */
.zmap__lb{font-family:var(--jp);font-weight:700;fill:var(--cat);letter-spacing:.04em}
.zmap__lb--kuma{fill:var(--white)}
.zmap__lb--ward text{fill:var(--black)}
.zmap__lb--mark text{fill:var(--black)}
.zmap__lb--mark circle{fill:var(--black)}
.zmap__dot{fill:var(--black);stroke:var(--white);stroke-width:2;vector-effect:non-scaling-stroke}

/* 店から立つ線と名札（位置は JS が点に合わせる） */
.zmap__pin{position:absolute;left:0;top:0;width:0;height:0;z-index:2;pointer-events:none}
.zmap__line{position:absolute;left:-1px;bottom:0;width:2px;height:22vh;background:var(--black);transform-origin:bottom;transform:scaleY(0)}
.zmap__tag{position:absolute;left:0;bottom:22vh;transform:translate(-50%,-12px);white-space:nowrap;padding:12px 20px;
  background:var(--black);color:var(--white);font-family:var(--jp);font-weight:700;font-size:18px;line-height:1;letter-spacing:.08em;opacity:0}

.zmap__credit{position:absolute;right:7%;bottom:24px;z-index:3;margin:0;padding:4px 8px;background:var(--white);font-family:var(--jp);font-size:12px;color:var(--cat)}

/* 動きを減らす設定：寄った後の1画面だけ出す */
@media (prefers-reduced-motion:reduce){
  .zmap{height:auto}
  .zmap__stick{position:relative}
  .zmap__steps li,.zmap__steps span::before{transition:none}
}

@media screen and (max-width:768px){
  .zmap{height:300vh;margin-top:65px}
  /* 下の電話の帯（63px）にかからないように */
  .zmap__stick{height:calc(100vh - 63px);height:calc(100svh - 63px)}
  /* 上は店から立つ線と名札が通るので、スマホでは下に置く */
  .zmap__steps{left:calc(11.5% - 26px);top:auto;bottom:52px;padding:10px 16px 10px 26px}
  .zmap__steps li{padding:3px 0;font-size:13px;column-gap:10px}
  .zmap__steps span{width:26px;font-size:13px}
  .zmap__steps span::before{left:-16px}
  .zmap__steps .is-on span::before{width:10px}
  .zmap__stage{perspective:900px}
  .zmap__scene{left:-30%;top:-8%;width:160%;height:130%;transform:rotateX(46deg) rotateZ(-10deg)}
  .zmap__line{height:16vh}
  .zmap__tag{bottom:16vh;padding:10px 16px;font-size:15px}
  .zmap__credit{left:11.5%;right:auto;bottom:14px}
}