/* background.css */

/* 1. body 自体の背景設定（ロゴ固定を邪魔しないよう背景画像は指定しない） */
body.base-bg, body.top, body {
  margin: 0;
  background-color: #1a1a1a;
  color: #ffffff;
  min-height: 100vh; /* 最低でも画面の高さ分を確保 */
  position: relative;
}

/* 2. 背景専用のレイヤー（PC・スマホ共通） */
body::before {
  content: "";
  position: fixed; /* 画面に固定して、スクロールしても背景が逃げないようにする */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  
  /* ノイズ画像の設定 */
  background-image: url("noise.jpg") !important;
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  
  pointer-events: none;
}

/* 3. スマホ用調整（スクロール時に背景が切れる現象を完全に防ぐ） */
@media (max-width: 1024px) {
  body::before {
    /* スマホブラウザのメニューバーの動きによる「切れ目」を防ぐため、高さを少し余分に取る */
    height: 120vh; 
    /* 固定したままでも最新のスマホなら問題ないため fixed を維持 */
    position: fixed;
  }
}