@charset "utf-8";

/* レイアウト */
.live-hero { display: grid; place-items: center; margin: 8px 0 16px; }

/* 画像 */
.map-wrap { position: relative; max-width: 520px; width: min(92vw, 520px); }
.map-img  { width: 100%; height: auto; display: block; margin-inline: auto; }

/* マーカー */
.mark{
  position: absolute;               /* 親 .map-wrap を基準に%配置（left/topはinlineで指定） */
  transform: translate(-50%, -50%); /* 原点＝中心 */
  text-decoration: none;
  display: inline-block;            /* 中身の幅をレイアウトに影響させない */
}
.mark:focus-visible{
  outline: 3px solid color-mix(in srgb, #d60000 60%, white);
  outline-offset: 2px; border-radius: 6px;
}
.mark::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: #d60000;             /* 赤 */
  border: 2px solid #fff;          /* 白縁で視認性UP */
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d60000, 0 1px 6px rgba(0,0,0,.25);
  /* 擬似要素は a の内部なので赤丸上のクリックもリンクに届く */
}

/* ラベル */
.label{
  position: absolute;
  left: 14px;            /* 赤丸中心からの右方向オフセット */
  top: 0;
  transform: translateY(-50%);
  font-size: 13px; line-height: 1.2; color: #222;
  background: rgba(255,255,255,.9);
  border: 1px solid #ddd; border-radius: 6px;
  padding: 2px 6px; white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0,0,0,.10);
}
.label--left{ left: auto; right: 14px; transform: translateY(-50%); }

/* スマホ表示 */
@media (max-width: 420px){
  .label{ font-size: 12px; }
}