/* ▼ 起動画面の全体コンテナ（背景＋鈴） */
#opening-screen {
  position: fixed;
  z-index: 9999;                 /* 最前面に表示 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;                 /* 中央に配置 */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #fffafc;     /* 柔らかい白背景（念のため） */
  transition: opacity 1s ease;   /* フェードアウト効果 */
}

/* ▼ 背景画像（PC版） */
.opening-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;             /* 画面にぴったり敷き詰める */
  z-index: -1;                   /* 鈴の後ろに表示 */
}

/* ▼ 鈴のGIF（中央表示） */
#bell-gif {
  width: 150px;                  /* サイズ調整（必要に応じて変更） */
  z-index: 1;                    /* 背景より前に表示 */
  padding-top: 120px;      /* 上からの距離を調整（例：120px） */
}

/* ▼ フェードアウト時の非表示状態 */
.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ▼ スマホ版：背景画像を差し替えたい場合（例：スマホ用画像に切り替え） */
@media screen and (max-width: 768px) {
  .opening-bg {
    content: url("../top/background-sp-1.png"); /* スマホ用の画像パスに変更 */
  }

  #bell-gif {
    width: 120px; /* スマホでは少し小さめに */
    padding-top: 320px;      /* 上からの距離を調整（例：120px） */
  }
}