/* =========================================================
   「富士山まで何km？」と地域切り替え
   ---------------------------------------------------------
   置き場所の考え方
     ボタン行（.btn-row）の中に入れ、「実績を見る」の右の空きに置く。
       PC   … ボタンが横並びなので、行の右端に寄せるだけで収まる
       スマホ… ボタンが縦積みになるため絶対配置にする。
               そうしないと折り返して1行増え、ページが長くなる。
     いずれもファーストビュー内に入り、高さは1pxも増えない。

   実測（375x812）
     「実績を見る」は x20〜137。右側の x137〜355・y693〜753 が空き。
     結果を出す注記は、その下の y753〜797 の隙間に絶対配置する。
   ========================================================= */

.mb-region {
  position: relative;
  margin-left: auto;          /* PC：ボタン行の右端へ寄せる */
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}

/* --- 押すところ --- */
.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: 9px 15px;
  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; }

/* --- 補足。PCのみ。ボタンの下の隙間に浮かせるので行は増えない --- */
.mb-region__note {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  margin: 0;
  z-index: 3;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-2, #6a5848);
  text-align: right;
  max-width: 20em;
  background: rgba(255, 247, 237, 0.86);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 8px;
  padding: 3px 7px;
}
.mb-region__note:empty { display: none; }
.mb-region__note b { color: var(--orange-deep, #cf5a1c); font-weight: 700; }

/* --- 地域切り替え --- */
.mb-region__switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(45, 28, 18, 0.14);
  border-radius: 999px;
  padding: 2px;
  background: rgba(255, 247, 237, 0.86);
  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: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.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) {
  /* 位置の基準にするだけ。見た目は変えない */
  .hero .btn-row { position: relative; }

  /*
   * 小さい端末ではボタン行そのものがファーストビューから外れる
   * （375x667 では「実績を見る」が y693〜753 で画面外）。
   * そのため本文とCTAの間の空き（y508〜546）へ上げる。
   * 絶対配置なので行は増えない。
   */
  .mb-region {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    margin-left: 0;
    gap: 6px;
  }
  /* 補足を置く余白が無いので、状態はボタン自身の文字で伝える */
  .mb-region__note { display: none; }
  .mb-region__find {
    /* 本文とCTAの隙間は38px。上下に余裕を残すため高さを33px前後に抑える */
    padding: 6px 12px;
    font-size: 11.5px;
    gap: 6px;
  }
  .mb-region__ico { width: 13px; height: 13px; }
  .mb-region__note {
    font-size: 11px;
    /* 「実績を見る」(x20-137)に掛からない範囲でできるだけ広く取り、
       2行に収めてファーストビュー(812px)からはみ出さないようにする */
    max-width: 18em;
  }
  .mb-region__opt { font-size: 11px; padding: 5px 9px; }
}

/* 320px級では文字を一段小さくして収める */
@media (max-width: 360px) {
  .mb-region__find { padding: 7px 10px; font-size: 11px; }
}

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

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