/* ヘッダーのロゴを大きく表示 */
.p-header__logo > img {
  max-height: 45px;
}

/* ▼▼▼ オープニングアニメーション用CSS ▼▼▼ */

/* ローディング画面の背景設定 */
#opening-loader {
  position: fixed;
  inset: 0;             /* 画面全体を覆う設定 (top:0; left:0; width:100%; height:100%; と同じ) */
  background-color: #ffffff; /* 背景色：白 */
  z-index: 9999;        /* 他のすべての要素より上に表示 */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* クリック判定を無効化（透明になった後に邪魔にならないようにする必須設定） */
  pointer-events: none;

  /* アニメーション設定 */
  /* 名前: fadeOut, 時間: 2.0秒かけて消える, 遅延: 1.5秒待ってから開始, 最後: 消えた状態を維持 */
  animation: fadeOut 2.0s ease-out 1.0s forwards;
}

/* ロゴ画像のサイズ調整 */
#opening-loader img {
  max-width: 500px; /* ロゴの最大幅（適宜調整してください） */
  width: 70%;       /* スマホ表示時に大きくなりすぎないようにする */
  height: auto;
}

/* ふわっと消えるアニメーションの動き定義 */
@keyframes fadeOut {
  0% {
    opacity: 1;         /* 不透明（見えている） */
    visibility: visible;
  }
  100% {
    opacity: 0;         /* 透明（見えない） */
    visibility: hidden; /* システム的にも非表示にする */
  }
}

/* ページ内の追従バナー */
.banner {
  position: fixed;
  bottom: 0;
  width: 80%;
  max-width: 800px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: block;
  text-decoration: none;
  
  /* --- ここから追加・変更 --- */
  
  /* 最初は非表示にしておく設定 */
  opacity: 0;             /* 透明にする */
  pointer-events: none;   /* 透明なときにクリックできないようにする */

  /* アニメーションの設定 */
  /* 名前: fade-in-banner, 時間: 0.5秒かけて表示, 遅延: 10秒待つ, 最後: 表示状態を維持(forwards) */
  animation: fade-in-banner 0.5s ease 10s forwards;
}

/* アニメーションの動きを定義 */
@keyframes fade-in-banner {
  to {
    opacity: 1;           /* 不透明（見える状態）にする */
    pointer-events: auto; /* クリックできるように戻す */
  }
}


}