/* 店舗紹介：地域タブ + 横スライド
   縦に延々とスクロールしていた6店舗を、地域ごとに1画面へ収める。 */


/* 見出し「Our Stores」とタブの間が空きすぎていたため、この節だけ詰める
   （.section-title は他の節でも使うので、#stores に限定して上書きする） */
#stores .section-title {
  margin-bottom: 34px;
}

/* --- 地域タブ --- */

/* 🔗 **管理画面から動かせる**（PM 指摘 2026-08-08「余白調整やサイズ調整が出来ません」）。
      元の値はここ。足し引きは --tf-gap（ボタンどうし）／--tf-pad-t・--tf-pad-b（上下）／
      --tf-scale（文字の大きさ）。正本＝`_worker.js` の LAYOUT_PARTS（store-tabs）。
   💥 ★25：**下の @media (max-width: 600px) が gap と margin-bottom を書き直している。**
      あちらにも同じ式を入れてある。**片方だけ直さないこと**（狭い画面で黙って効かなくなる）。 */
.store-tabs {
  display: flex;
  justify-content: center;
  gap: calc(var(--tf-gap, var(--tf-gap-base, 12px)));
  margin: calc(var(--tf-pad-t, var(--tf-pad-t-base, 0px))) 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 44px)));
}

/* ⚠️ 大きさのつまみは囲み（.store-tabs）に付き、ここが**受け継いで**拡がる（★26）。
      ⛔ `.store-tab` を「パソコン用／スマホ用の振り分け」に入れないこと（受け継ぎが切れる）。 */
.store-tab {
  min-width: 148px;
  padding: 13px 26px;
  background: transparent;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 4px;
  color: #b9946c;
  font-family: var(--font-serif);
  --tf-fs-base: 1.05rem;
  font-size: calc(var(--tf-fs-base, 1rem) * var(--tf-scale, 1));
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.store-tab small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #a8865c;
  margin-top: 5px;
}

.store-tab:hover {
  border-color: rgba(245, 166, 35, 0.7);
  color: #F5A623;
}

.store-tab.is-active {
  background: #F5A623;
  border-color: #F5A623;
  color: #0a0e1a;
}

.store-tab.is-active small {
  color: rgba(10, 14, 26, 0.82);
}

/* --- スライダー --- */

.store-area {
  position: relative;
}

.store-area[hidden] {
  display: none;
}

/* 左右の送りボタン。
   画面の縦中央に貼り付いて追従するので、カードのどこを見ていても届く。
   （下端に置くと、背の高いカードでは画面外に消えてしまうため） */
.store-sidearrows {
  position: sticky;
  /* ⚠️ 拡大率で割り戻す（2026-08-10）。ここは**本物の画面の縦中央**に居てほしい所なので、
        設計上の画布ではなく `svh` を使い、`zoom` のぶんだけ割り戻す。
        💥 割り戻さないと、広い画面ほど矢印が下へ行く（2560px では画面の 89% の位置になる）。 */
  top: calc(50svh / var(--tf-zoom, 1));
  height: 0;
  z-index: 5;
  /* 帯そのものはクリックを奪わない（カードの操作を邪魔しない） */
  pointer-events: none;
}

/* PC・タブレット：カードの外側に余白を作り、その中に矢印を置く。
   カードに重ならないので、店名や本文が隠れない。 */
@media (min-width: 760px) {
  .store-area {
    padding-left: 64px;
    padding-right: 64px;
  }

  /* 帯だけは余白ぶん外へ広げ、矢印が余白の中に収まるようにする */
  .store-sidearrows {
    margin-left: -64px;
    margin-right: -64px;
  }
}

/* スマホ：カードの横幅を最優先する。
   矢印は丸い枠をやめ、山形の記号だけにして余白を22pxまで詰める。
   （矢印を消すと、指のスワイプでは末尾から先頭へ回れなくなるため残す） */
@media (max-width: 759px) {
  .store-area {
    padding-left: 5px;
    padding-right: 5px;
  }

  .store-sidearrows {
    margin-left: -5px;
    margin-right: -5px;
  }

  /* ※矢印そのものの見た目は、基本指定より後で上書きするため
     このファイルの最後にまとめている（順序が逆だと効かない） */
}

.store-slider {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* scroll-behavior はここで指定しない。
     「視差効果を減らす」設定の端末では CSS の smooth 指定があると
     プログラムからのスクロールが無効化されるため、JS 側で制御する。 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* カード端の影が切れないよう、上下に少し逃がす */
  padding-bottom: 4px;
}

.store-slider::-webkit-scrollbar {
  display: none;
}

.store-track {
  display: flex;
  gap: 30px;
  align-items: stretch;
}

/* .store-card の見た目は既存 index.html の <style> をそのまま使う。
   ここでは横並びのための幅指定だけを足す。 */
.store-track>.store-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* 画像の縦横比を画面幅によらず一定にする。
   高さを 320px で固定していたため、カードが細いスマホでは
   ほぼ正方形に切り取られ、PCと見え方が変わっていた。 */
.store-track>.store-card .store-img-box img {
  height: auto;
  aspect-ratio: 16 / 10;
}

@media (min-width: 900px) {
  .store-track>.store-card {
    /* PCでは2枚ずつ見せる */
    flex: 0 0 calc(50% - 15px);
  }
}

/* --- 送り操作（矢印とドット） --- */

.store-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

.store-arrow {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 48px;
  height: 48px;
  background: rgba(10, 14, 26, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(245, 166, 35, 0.5);
  border-radius: 50%;
  color: #F5A623;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.store-arrow[data-dir="-1"] {
  left: 8px;
}

.store-arrow[data-dir="1"] {
  right: 8px;
}

.store-arrow:hover {
  background: #F5A623;
  color: #0a0e1a;
}

.store-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.store-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(245, 166, 35, 0.5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.store-dot.is-active {
  background: #F5A623;
  transform: scale(1.25);
}

@media (max-width: 600px) {
  .store-tabs {
    /* ★25 上の式と同じ足し引きを、こちらにも入れる（元の値だけが違う） */
    gap: calc(var(--tf-gap, var(--tf-gap-base, 10px)));
    /* ⛔ **元の値は「親から降ってきていた分」を含む**（2026-08-08 修復・教訓201）。
          💥 焼き込み前は 34px ＋ 親（`.section.stores`）の `--tf-pad-b-sp: -80px` の継承＝ −46px。
             親を焼いた瞬間に継承元が 0 になり、**ここだけ 80px 空いた**（実測）。 */
    margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, -46px)));
  }

  .store-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
    --tf-fs-base: 0.98rem;
    font-size: calc(var(--tf-fs-base, 1rem) * var(--tf-scale, 1));
  }

  .store-track {
    gap: 18px;
  }

  .store-nav {
    gap: 14px;
    margin-top: 22px;
  }
}

/* 💥 **601〜640px の帯**（どちらとも言えない幅・設計3-2・2026-08-08）
      焼き込み前、この帯では **タブ自身の元の値はパソコン用（44px）／
      親（`.section.stores`）のつまみはスマホ用（−80px）**が効いていた ＝ 44 − 80 = **−36px**。
      ⛔ この帯を落とすと、狭いノートだけ 80px ずれる（幅の切り替えが 600 と 640 で食い違うため）。
      ⚠️ 上の `(max-width: 600px)` より後に置くこと（同じ強さなので後が勝つ）。 */
@media (min-width: 601px) and (max-width: 640px) {
  .store-tabs {
    margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, -36px)));
  }
}

/* ============================================================
   スマホの送り矢印（丸枠を外し、山形記号だけにする）
   .store-arrow の基本指定より後に置くこと。
   前に置くと同じ詳細度のため基本指定に負けて効かない。
   ============================================================ */
@media (max-width: 759px) {
  .store-arrow {
    width: 18px;
    height: 54px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    color: #F5A623;
    font-size: 1.75rem;
    /* 写真の明るい部分に重なっても見えるよう輪郭を落とす */
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
  }

  .store-arrow[data-dir="-1"] {
    left: 0;
  }

  .store-arrow[data-dir="1"] {
    right: 0;
  }

  .store-arrow:hover {
    background: transparent;
    color: #F5A623;
  }
}

/* ============================================================
   店舗カードの余白と文字（index.html の <style> より後に読み込む本ファイルで上書き）
   ============================================================ */

/* 画像と店名の間が空きすぎていたため、上だけ詰める
   （左右と下は 30px のまま＝本文まわりの余裕は保つ） */
.store-track>.store-card .store-body {
  padding-top: 18px;
}

/* 読み仮名を 12.8px(9.6pt) → 14.8px(11.1pt) へ。約 +1.5pt */
.store-track>.store-card .store-name small {
  font-size: 0.925rem;
  margin-top: 8px;
}

/* 店名の行間が広く(1.8倍)、文字の下に余白が生まれて
   読み仮名との間が空いて見えていたため、行間を詰める */
.store-track>.store-card .store-name {
  line-height: 1.25;
}