@charset "UTF-8";
/* --------------------------------
  Loading overlay（サイト訪問時1回のみ表示）
--------------------------------*/
/* 読み込み中はメインコンテンツ非表示＋スクロール禁止（index.htmlのみ body.is-loading を使用） */
body.is-loading {
  overflow: hidden;
}
body.is-loading #header,
body.is-loading main,
body.is-loading #footer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.loading.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading.is-skip {
  display: none !important;
}

.loading__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading__logo {
  max-width: 262px;
  width: 100%;
  height: auto;
  object-fit: contain;
  animation: loadingLogoFade 1s ease-out forwards;
  opacity: 0;
}

@keyframes loadingLogoFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width: 960px) {
  .loading__logo {
    max-width: 160px;
  }
}
@media screen and (max-width: 600px) {
  .loading__logo {
    max-width: 120px;
  }
}