@charset "utf-8";

/* +++++++++++++++++++++++++++++++

 style_loading.css

+++++++++++++++++++++++++++++++ */


/* loading
-----------------------------------*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--gray-light);
  z-index: 10000;
  opacity: 1;
  visibility: visible;
}
.loading.is-active {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}
.loading-animation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: var(--gray-light);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}
.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}
.loading-animation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--gray);
  transition: 3s;
}
.loading-animation.is-active::before {
  width: 100%;
}
.loading-animation img {
  max-width: 160px;
}
@media screen and (max-width: 480px) {
  .loading-animation img {
    max-width: 120px;
  }
}