@charset "utf-8";

.loading-screen{
  width: 100%;
  height: 100vh;
  display:none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,1.0);
  z-index: 9999!important;  /* #fadeより多い値を入れて下さい */
}

.loading-box{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: fixed;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

.loading-box img{
  width: 60%;
  max-width: 312px;
}


#loader .flex .text-lading{margin-top: 0px; height:30px; font-size:30px; font-weight: bold; color: rgba(31,133,217,1.00);}
#loader .flex .text-lading p1{font-size:60px!important; line-height:0px; animation-name:p1;animation-duration:1s;animation-timing-function:ease-in; animation-iteration-count:infinite;}
#loader .flex .text-lading p2{font-size:60px!important; line-height:0px; animation-name:p2;animation-duration:1s;animation-timing-function:ease-in; animation-iteration-count:infinite;}
#loader .flex .text-lading p3{font-size:60px!important; line-height:0px; animation-name:p3;animation-duration:1s;animation-timing-function:ease-in; animation-iteration-count:infinite;}

.loading-box .text{
  margin-top: 0px;
  height:30px;
  font-size:30px;
  font-weight: bold;
  color: rgba(31,133,217,1.00);
}

.loading-dot1,.loading-dot2,.loading-dot3{
  font-size:60px!important;
  line-height:0px;
}
.loading-dot1{
  animation-name:loading-dot1;
  animation-duration:1s;
  animation-timing-function:ease-in;
  animation-iteration-count:infinite;
}
.loading-dot2{
  animation-name:loading-dot2;
  animation-duration:1s;
  animation-timing-function:ease-in;
  animation-iteration-count:infinite;
}
.loading-dot3{
  animation-name:loading-dot3;
  animation-duration:1s;
  animation-timing-function:ease-in;
  animation-iteration-count:infinite;
}
@keyframes loading-dot１{
  0%{opacity: 0;}
  25%{opacity: 0;}
  26%{opacity: 1;}
  100%{opacity: 1;}
}
@keyframes loading-dot2{
  0%{opacity: 0;}
  50%{opacity: 0;}
  51%{opacity: 1;}
  100%{opacity: 1;}
}
@keyframes loading-dot3{
  0%{opacity: 0;}
  75%{opacity: 0;}
  76%{opacity: 1;}
  100%{opacity: 1;}
}