@charset "UTF-8";

:root {
  --loading-parts-base-bg-color: var(--bg-color-primary);
  --mv-parts-title-en-font-color: var(--accent-color-second);
  --mv-parts-title-ja-font-color: var(--font-color-base);
  --mv-parts-news-bg-color: var(--base-color-primary);
  --mv-parts-news-title-color: var(--accent-color-second);
  --mv-parts-news-text-color: var(--accent-color-second);
  --mv-parts-deco-bg-color-01: var(--accent-color-primary);
  --mv-parts-deco-bg-color-02: var(--base-color-primary);
  --mv-parts-deco-color-01: var(--base-color-primary);
  --mv-parts-deco-color-02: #ffceb5;
  --mv-parts-deco-color-03: var(--base-color-primary);
  --mv-parts-deco-color-04: var(--base-color-primary);
  --mv-parts-deco-color-05: var(--accent-color-primary);
  --mv-parts-deco-color-06: #99cc66
}

#loading,
#loading>.container {
  display: flex;
  flex-direction: column;
  align-items: center
}

#loading {
  --loading-progress: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: center top var(--loading-parts-base-bg-color);
  z-index: 999;
  justify-content: center
}

#loading>.container {
  flex: 0 0 auto;
  position: relative
}

#loading>.container>.logo {
  flex: 0 0 auto;
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

#loading.is-start>.container>.logo {
  animation: loadingLogoReveal 2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loadingLogoReveal {
  0% {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
  }

  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@media (min-width:1201px) and (max-width:1300px) {
  #header>.container>.logo {
    display: block
  }

  #header>.container #gNavi {
    margin-left: 2.4vw
  }
}