/* =========================================================
   地域切り替え（静岡・富士山 ⇄ 旭川・旭岳）と方位表示
   ---------------------------------------------------------
   ヒーロー末尾の .hero__keywords の直後に差し込まれる追加要素。
   既存の要素には一切触れない。トークンは maebe.css のものを使う。
   ========================================================= */

.mb-region {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2, #6a5848);
}

/* --- 切り替えスイッチ --- */
.mb-region__switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(45, 28, 18, 0.14);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.42);
  /* 背景の絵が透けるので、文字が沈まないよう薄い紙を敷く */
  backdrop-filter: saturate(1.1) blur(2px);
  -webkit-backdrop-filter: saturate(1.1) blur(2px);
}

.mb-region__opt {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2, #6a5848);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 220ms ease, color 220ms ease;
}

.mb-region__opt:hover { color: var(--ink, #1e1712); }

.mb-region__opt.is-on {
  background: var(--orange, #e8732b);
  color: #fff;
  font-weight: 700;
}

.mb-region__opt:focus-visible {
  outline: 2px solid var(--orange-deep, #cf5a1c);
  outline-offset: 2px;
}

/* --- 「あちら」ボタン --- */
.mb-region__find {
  appearance: none;
  border: 1px solid rgba(45, 28, 18, 0.14);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: saturate(1.1) blur(2px);
  -webkit-backdrop-filter: saturate(1.1) blur(2px);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange-deep, #cf5a1c);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 220ms ease, background 220ms ease;
}

.mb-region__find:hover { border-color: rgba(232, 115, 43, 0.45); }
.mb-region__find[disabled] { opacity: 0.55; cursor: default; }

.mb-region__find:focus-visible {
  outline: 2px solid var(--orange-deep, #cf5a1c);
  outline-offset: 2px;
}

/* 方位を指す矢印。方角が取れないあいだは隠しておく */
.mb-region__arrow {
  width: 15px;
  height: 15px;
  display: none;
  transform-origin: 50% 50%;
  /* 端末の向きに追従するので、滑らかにしつつ遅れないぐらいに */
  transition: transform 160ms linear;
}
.mb-region.has-bearing .mb-region__arrow { display: block; }
.mb-region__arrow svg { display: block; width: 100%; height: 100%; }

/* --- 結果・案内の一行 --- */
.mb-region__note {
  margin: 0;
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--ink-2, #6a5848);
  min-height: 1.2em;
}

.mb-region__note b {
  color: var(--orange-deep, #cf5a1c);
  font-weight: 700;
}

/* 「旭岳のほうが近いようです → 切り替える」 */
.mb-region__suggest {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange-deep, #cf5a1c);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 2px 4px;
}

/* --- スマートフォン --- */
@media (max-width: 680px) {
  .mb-region {
    margin-top: 20px;
    gap: 8px 12px;
  }
  .mb-region__switch { padding: 2px; }
  .mb-region__opt { padding: 7px 12px; font-size: 12px; }
  .mb-region__find { padding: 8px 14px; font-size: 12px; }
}

/* --- 動きを減らす設定のときは矢印を動かさない --- */
@media (prefers-reduced-motion: reduce) {
  .mb-region__arrow { transition: none; }
}

@media print {
  .mb-region { display: none !important; }
}