/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #061a40;
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
}
.spinner {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

    
  /*上下に並んでいたローディング画面とコンテンツを position プロパティーで重ねます。全画面に表示されるように、この部分の幅を 100vw 、高さを 100vh にしています。 */ 
    #loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
        background-color: #061a40;
/*  background: linear-gradient(to top right, #0053a5, #2c1e68);*/
 
/* 以下のコードを追加 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
    
  /*jsのloadedクラスにはCSSで、要素を透明にして非表示にする指定をしています。  */
    .loaded {
  opacity: 0;
  visibility: hidden;
}