/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  background-image: url(Gate1.png);
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: fixed;
  background-repeat: ;
  background-position: center center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  padding: 0;
}


/*ローディング画面を非表示にする*/
.loading.loaded {
  /*0.5秒かけてopacityを0にする*/
  opacity: 0;
  visibility: hidden;
}

/* JSが効かない時のフォールバック（強制非表示） */
@keyframes removeLoader {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#loader {
  animation-name: removeLoader;
  animation-fill-mode: forwards; /* 最後のキーフレームを保持 */
  animation-duration: 1s;
  animation-delay: 3s;
}
/*
 小さい画面（スマートフォンなど）のスタイリング */
@media (max-width: 960px) {
#splash {
/*fixedで全面に固定*/
  background-image: url(Gate2.png);
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: fixed;
  background-repeat: ;
  background-position: center center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  padding: 0;
}