@charset "utf-8";
/* Loading背景画面設定 */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: transparent;
  overflow: hidden;
}

/* 真っ黒な全画面背景 */
#splash-black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 0;
}

/* 背景画像のスタイル */
#splash-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#splash-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeInImage 1s forwards;
}

/* 背景画像のフェードインアニメーション */
@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}

/* ロゴとボタンの中央揃え */
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

/* Loading アイコンの大きさ設定 */
#splash_logo img {
  width: 260px;
  display: block;
  margin: 0 auto;
  opacity: 0;
  animation: fadeInLogo 2.0s forwards;
  animation-delay: 0.3s;
}

/* fadeInアニメーションの定義 */
@keyframes fadeInLogo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 上下の黄色のライン */
#splash-line-top,
#splash-line-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px; /* ラインの太さ */
  background-color: #ffd200;
  opacity: 0;
  animation: fadeInLine 1s forwards;
  z-index: 2;
}

#splash-line-top {
  top: 0; /* 画面上端に配置 */
}

#splash-line-bottom {
  bottom: 0; /* 画面下端に配置 */
}

/* ラインのフェードイン・フェードアウトアニメーション */
@keyframes fadeInLine {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeOut {
  animation: fadeOutAnimation 1s forwards;
}

@keyframes fadeOutAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}