/* ============================================================
   全国版（simple info map japan）専用スタイル
   - 基本は css/style.css を流用。ここでは差分のみ。
   ============================================================ */

/* ロゴ：導入地域範囲の案内文（小さく） */
#logo.national .logo-note {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
  opacity: 0.85;
  max-width: 200px;
}

/* ロゴ：japan のサブ表記 */
#logo.national .logo-jp {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* ============================================================
   地域の大アイコン（導入地域へ誘導 / 名所の2.5倍を意識した主張）
   ============================================================ */
/* マーカー root には transform を当てない（Mapbox の位置決め transform と競合するため）。
   見た目・アニメ・ホバーはすべて内側の .rp-inner に当てる。 */
.region-pin { cursor: pointer; user-select: none; }
.region-pin .rp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.15s ease;
  animation: regionPop 0.45s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.region-pin:hover .rp-inner { transform: translateY(-2px) scale(1.04); }

.region-pin .rp-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50% 50% 50% 4px;
  background: #fff;
  border: 3px solid var(--logo-blue, #1769e0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}
.region-pin .rp-emoji {
  font-size: 30px;
  line-height: 1;
  transform: rotate(45deg);
}
.region-pin .rp-label {
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--logo-blue, #1769e0);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* 準備中（scaffold）の地域は少し控えめに */
.region-pin.scaffold .rp-bubble { border-color: #9aa7b8; opacity: 0.92; }
.region-pin.scaffold .rp-label { background: #9aa7b8; }

/* 出現アニメ（内側要素のみ。root には適用しない） */
@keyframes regionPop {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   地域アイコンを押した時の遷移演出
   - 押したアイコン＋地名が 0.3秒で 1.3倍に拡大
   - それ以外の全体が 0.3秒で白くフェード
   ============================================================ */
#page-fade {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.5s ease;   /* 0.5秒で白くなる */
  z-index: 9000;
  pointer-events: none;
}
#page-fade.show { opacity: 1; }

/* 「押したアイコン」の複製。白オーバーレイ(#page-fade=z9000)より上に置き、
   中央へ移動して待機する間もはっきり見えるようにする。
   ページが切り替わると（地域版にはアイコンを出さないので）そのまま消える。
   .region-pin クラスを付けるので、枠(rp-bubble)・グレーのラベル等のスタイルがそのまま効く。 */
.pin-clone {
  position: fixed;
  transform-origin: center center;
  transition: transform 0.3s ease;  /* 0.3秒で中央へ移動＋拡大 */
  z-index: 9001;                     /* #page-fade(9000) の上 */
  pointer-events: none;
}
/* 複製内では出現アニメ(regionPop)を止める */
.pin-clone .rp-inner { animation: none; }