/* style.css */

/* 基本設定 */
body {
  margin: 0;
  overflow: hidden; /* オープニング中はスクロール禁止 */
}

/* オープニング画面のコンテナ */
.opening-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 9999;
  transition: opacity 1s ease; /* 最後に画面全体をフェードアウトするため */
}

/* 各スライドの共通設定 */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初期状態は見えないようにする */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 1枚4秒 × 3枚 = 12秒で1周するアニメーション */
  animation: fadeSequence 4s linear forwards;
}

/* 画像を背景いっぱいに広げる */
.slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の比率を保ちながら全画面に */
  opacity: 0.6; /* テキストを読みやすくするため画像を少し暗くする */
}

/* テキストのデザイン */
.slide-text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* 各スライドの開始タイミングをずらす */
.slide1 { animation-delay: 0s; } /* すぐ開始 */
.slide2 { animation-delay: 1s; } /* 4秒後に開始 */
.slide3 { animation-delay: 2s; } /* 8秒後に開始 */

/* アニメーションの動き（12秒の中での変化） */
@keyframes fadeSequence {
  0%   { opacity: 0; }
  8%   { opacity: 1; }  /* 約1秒でフェードイン */
  25%  { opacity: 1; }  /* そのまま表示 */
  33%  { opacity: 0; }  /* 約1秒でフェードアウト */
  100% { opacity: 0; }  /* 残りの時間は見えないまま */
}