#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #1f1f1f;
  z-index: 9999;

  opacity: 1;
  animation: overlayFadeOut 3s forwards;
}


.overlay p {
  margin-top: 20px;
  font-size: 1.2rem;
  color: var(--color-white);
}

#overlay p::after {
  content: "";
  animation: dots 1.2s steps(3, end) infinite;
}

@keyframes dots {
  0%   { content: ""; }
  33%  { content: "."; }
  66%  { content: ".."; }
  100% { content: "..."; }
}


/* ロゴ */
.loading {
  width: 20vh;
  max-width: 180px;
  display: block;  
}

@keyframes logoFloat {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}


/* 全体が消える */
@keyframes overlayFadeOut {
  0% { opacity: 1; }
  85% { opacity: 1; }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* 本文は最初非表示 */
main {
  opacity: 0;
  animation: mainFadeIn 1.5s ease-in-out forwards;
  animation-delay: 3s;
}

@keyframes mainFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}