/* -----------------------
   共通設定
------------------------ */
.animate {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* -----------------------
   アニメーション定義
------------------------ */

/* じわっと表示 */
@keyframes softFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
.soft-fade.show {
  animation-name: softFadeIn;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* フェードイン＋ズーム */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.zoom-in.show {
  animation-name: zoomIn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* 下からスライドイン */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-up.show {
  animation-name: slideUp;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* 左からスライドイン */
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-left.show {
  animation-name: slideLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* 右からスライドイン */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-right.show {
  animation-name: slideRight;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* 軽い回転イン */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(0.95);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}
.rotate-in.show {
  animation-name: rotateIn;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* 弾むように表示 */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.bounce-in.show {
  animation-name: bounceIn;
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* -----------------------
   ディレイクラス（0～20）
------------------------ */
.delay-0  { animation-delay: 0s !important; }
.delay-1  { animation-delay: 0.1s !important; }
.delay-2  { animation-delay: 0.2s !important; }
.delay-3  { animation-delay: 0.3s !important; }
.delay-4  { animation-delay: 0.4s !important; }
.delay-5  { animation-delay: 0.5s !important; }
.delay-6  { animation-delay: 0.6s !important; }
.delay-7  { animation-delay: 0.7s !important; }
.delay-8  { animation-delay: 0.8s !important; }
.delay-9  { animation-delay: 0.9s !important; }
.delay-10 { animation-delay: 1.0s !important; }
.delay-11 { animation-delay: 1.1s !important; }
.delay-12 { animation-delay: 1.2s !important; }
.delay-13 { animation-delay: 1.3s !important; }
.delay-14 { animation-delay: 1.4s !important; }
.delay-15 { animation-delay: 1.5s !important; }
.delay-16 { animation-delay: 1.6s !important; }
.delay-17 { animation-delay: 1.7s !important; }
.delay-18 { animation-delay: 1.8s !important; }
.delay-19 { animation-delay: 1.9s !important; }
.delay-20 { animation-delay: 2.0s !important; }
.delay-24 { animation-delay: 2.4s !important; }


html.loading,
body.loading {
  overflow: hidden;
  height: 100%;
  touch-action: none;
  overscroll-behavior: none;
}

.loading-page {
  background-image: linear-gradient(90deg, #ffe896, #fbc400);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999999999;
}
.loading-page .counter {
  text-align: center;
}
.loading-page .counter p {
  font-size: 40px;
  font-weight: 100;
  color: #FFFFFF;
}
.loading-page .counter span {
  color: white;
  font-size: 60px;
  margin-top: -10px;
}
.loading-page .counter hr {
  background: #ffe896;
  border: none;
  height: 1px;
}
.loading-page .counter {
  position: relative;
  width: 200px;
}
.loading-page .counter h1.abs {
  position: absolute;
  top: 0;
  width: 100%;
}
.loading-page .counter .color {
  width: 0px;
  overflow: hidden;
  color: #FFFFFF
}

body.loading {
  overflow: hidden;
}
html.loading .js-toggle-gnav,
html.loading .cta-container,
html.loading .site-logo,
html.loading .sns-link-wrap,
html.loading .scroll-anchor-wrap,
html.loading #global-navi {
  display: none !important;
}