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

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

.store-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 44px;
}

.store-tab {
  min-width: 148px;
  padding: 13px 26px;
  background: transparent;
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-radius: 4px;
  color: #b9946c;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.05rem;
  font-weight: 700;
  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: 'Noto Sans JP', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #a8865c;
  margin-top: 5px;
}

.store-tab:hover {
  border-color: rgba(212, 165, 116, 0.7);
  color: #d4a574;
}

.store-tab.is-active {
  background: #d4a574;
  border-color: #d4a574;
  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;
  top: 50vh;
  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: 22px;
    padding-right: 22px;
  }

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

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

.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(212, 165, 116, 0.5);
  border-radius: 50%;
  color: #d4a574;
  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: #d4a574;
  color: #0a0e1a;
}

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

.store-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(212, 165, 116, 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: #d4a574;
  transform: scale(1.25);
}

@media (max-width: 600px) {
  .store-tabs {
    gap: 10px;
    margin-bottom: 34px;
  }

  .store-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
    font-size: 0.98rem;
  }

  .store-track {
    gap: 18px;
  }

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

/* ============================================================
   スマホの送り矢印（丸枠を外し、山形記号だけにする）
   .store-arrow の基本指定より後に置くこと。
   前に置くと同じ詳細度のため基本指定に負けて効かない。
   ============================================================ */
@media (max-width: 759px) {
  .store-arrow {
    width: 22px;
    height: 54px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    color: #d4a574;
    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: #d4a574;
  }
}