/* PC向けのスタイル */
.store-locator {
  position: fixed;
  bottom: 6px;
  right: 10px;
  width: 150px;
  height: 150px;
  z-index: 9999;
  /* ホバーアニメーションを滑らかにする設定を追加 */
  transition: opacity 0.3s ease;
}

/* ★PCでマウスを乗せると少し半透明になるように追加 */
.store-locator:hover {
  opacity: 0.8;
}

/* コンテナ内のaタグとimgタグをコンテナいっぱいに広げる */
.store-locator a,
.store-locator img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ★画面幅が640px以下のスマホ向けスタイルに変更 */
/* ※この値は store-locator.js 内の定数「BREAKPOINT」と連動しています。変更する際は両方の値を一致させてください。 */
@media screen and (max-width: 640px) {
  .store-locator {
    /* 画面幅の1/4のサイズになるように変更 */
    width: 25vw;
    height: 25vw;

    /* ↓↓ スマホ表示の時だけ適用する余白を追記 ↓↓ */
    bottom: 3px;
    right: 5px;
  }
}

/* バナーを非表示にするためのクラス */
.store-locator.is-hidden {
  opacity: 0;
  visibility: hidden;
  /* 少し遅れて非表示にすることで、クリックなどを防ぐ */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}