/* ▼ 起動画面：初期は見せない（チラ見え防止） */
#opening-screen {
  position: fixed;
  z-index: 9999;
  inset: 0;                      /* top/left/width/height をまとめて指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #fffafc;

  /* 初期状態（非表示） */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 1s ease;
}

/* ▼ 「表示する日」だけ有効 */
#opening-screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ▼ 閉じる（フェードアウト用）：visibilityは触らず opacityだけ0にする */
#opening-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ▼ 背景画像（PC版） */
.opening-bg {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

/* ▼ 鈴GIF（中央 → 少し下へ） */
#bell-gif {
  width: 150px;
  z-index: 1;
  transform: translateY(150px); /* ←ここを増やすほど下へ */
}

/* ▼ スマホ版：背景差し替え
   注意：style.css が index.html と同階層なら、../ は基本的に不要。
   HTMLが ./top_page_materials/... なので、同じパスに合わせるなら下みたいにするのが安全。
*/
@media screen and (max-width: 768px) {
  .opening-bg {
    content: url("./top_page_materials/top/background-sp.png"); /* ←実在ファイルに合わせて変更 */
  }
  #bell-gif {
    width: 120px;
  }
}