@charset "UTF-8";

.pg_loading{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 10000000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,1);
}
.pg_loading.on{
  animation: pageFadeIn 1s; /*keyframesで命名したものを使う。2秒間で消える*/
  animation-fill-mode: both; /*0%の時と100%の時の状態を保つ*/
  pointer-events: none;
}
.pg_loading.off{
  animation: pageFadeOut 2s; /*keyframesで命名したものを使う。2秒間で消える*/
  animation-fill-mode: both; /*0%の時と100%の時の状態を保つ*/
  pointer-events: none;
}


@keyframes pageFadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1; 
  }
}
@keyframes pageFadeOut {
  0% {
      opacity: 1; /*初めに存在する*/
  }
  100% {
      opacity: 0; /*最後に消える*/
  }
}