/* header/load.css
  - ファイル: ローディング画面用スタイル
  - 説明: ローディングスピナーのレイアウトとアニメーション
*/

/* ==================================================
   LOADING SCREEN：ページ読み込み中の白背景・回転スピナー
   ================================================== */
#loadings {
  height: 100vh;
  width: 100vw;
  background-color: white;
  margin: 0;
  position: fixed;/*スクロールしてもついてくる*/
  z-index: 9999;/*最上部配置*/
}

#loadings .spinner-box {
  margin: auto;
  width: 300px;
  height: 300px;
  display: flex;
  padding-top: 100pxR;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

#loadings .leo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

#loadings .blue-orbit {
  width: 165px;
  height: 165px;
  border: 2px solid #0ba29af2;
  animation: spin3D 3s linear .2s infinite;
}

#loadings .green-orbit {
  width: 120px;
  height: 120px;
  border: 2px solid #0ba29af2;
  animation: spin3D 2s linear 0s infinite;
}

#loadings .red-orbit {
  width: 90px;
  height: 90px;
  border: 2px solid #0ba29af2;
  animation: spin3D 1s linear 0s infinite;
}

#loadings .white-orbit {
  width: 60px;
  height: 60px;
  border: 1px solid lightgray;
  animation: spin3D 10s linear 0s infinite;
}

#loadings .w1 {
  transform: rotate3D(1, 1, 1, 90deg);
}

#loadings .w2 {
  transform: rotate3D(1, 2, .5, 90deg);
}

#loadings .w3 {
  transform: rotate3D(.5, 1, 2, 90deg);
}

@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}

/* ==================================================
   LOADING TARGET：読み込み完了まで本文を非表示にする
   ================================================== */
.contentspage{
    opacity: 0;
}