/* =========================================================
   「富士山まで ?km」と地域切り替え（静岡 ⇄ 旭川）
   ---------------------------------------------------------
   置き場所の考え方

   ヒーローには空きがほとんど無い。実測した縦の隙間は
     見出しの上 26px ／ 見出しの下 28px ／ 本文とCTAの間 38px
   だけで、ボタン行より下はどの端末でもファーストビューから外れる
   （375x667 では「実績を見る」が y693〜753 ＝ 画面外）。

   そこで **本文とCTAボタンの間の 38px** に絶対配置する。
     ・行が増えないのでページが伸びない
     ・PC・スマホとも同じ位置になり、挙動が揃う
     ・PCで次行に折り返してヒーローが伸びる問題も起きない

   補足文（「端末を平らに持つと…」など）は置く余白が無いため、
   状態はボタン自身の文字で伝え、詳しい説明は title 属性に入れる。
   ========================================================= */

/* 位置の基準にするだけ。見た目は変えない */
.hero .btn-row { position: relative; }

.mb-region {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
  z-index: 2;
}

/* --- 押すところ --- */
.mb-region__find {
  appearance: none;
  border: 1px solid rgba(232, 115, 43, 0.38);
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: saturate(1.15) blur(3px);
  -webkit-backdrop-filter: saturate(1.15) blur(3px);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange-deep, #cf5a1c);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.mb-region__find:hover {
  border-color: rgba(232, 115, 43, 0.72);
  background: rgba(255, 255, 255, 0.82);
}
.mb-region__find:active { transform: translateY(1px); }
.mb-region__find[disabled] { opacity: 0.6; cursor: default; }
.mb-region__find:focus-visible {
  outline: 2px solid var(--orange-deep, #cf5a1c);
  outline-offset: 2px;
}

/* 「?」を目立たせて、押せば分かることを示す */
.mb-region__q {
  display: inline-block;
  min-width: 1em;
  text-align: center;
  color: var(--orange, #e8732b);
}

/* --- アイコン：測る前は方位磁針、測った後は方角を指す矢印 --- */
.mb-region__ico {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}
.mb-region__ico svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mb-region__ico .ico-arrow {
  display: none;
  transform-origin: 50% 50%;
  transition: transform 160ms linear;
}
.mb-region.has-bearing .ico-compass { display: none; }
.mb-region.has-bearing .ico-arrow { display: block; }

/* --- 地域切り替え --- */
.mb-region__switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(45, 28, 18, 0.16);
  border-radius: 999px;
  padding: 2px;
  background: rgba(255, 247, 237, 0.88);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mb-region__opt {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-2, #6a5848);
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms 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__opt.is-suggested:not(.is-on) {
  box-shadow: inset 0 0 0 1px rgba(232, 115, 43, 0.55);
  color: var(--orange-deep, #cf5a1c);
  font-weight: 700;
}

/* --- スマートフォン --- */
@media (max-width: 680px) {
  .mb-region { gap: 6px; }
  .mb-region__find { padding: 6px 12px; font-size: 11.5px; gap: 6px; }
  .mb-region__ico { width: 13px; height: 13px; }
  .mb-region__opt { font-size: 11px; padding: 4px 9px; }
}

/* 320px級では一段小さくして、隙間と横幅の両方に収める */
@media (max-width: 360px) {
  .mb-region { gap: 5px; }
  .mb-region__find { padding: 5px 10px; font-size: 11px; }
  .mb-region__opt { font-size: 10.5px; padding: 4px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-region__ico .ico-arrow { transition: none; }
  .mb-region__find { transition: none; }
}

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