@charset "utf-8";
/* CSS Document */

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
    gap:10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* 保険: loading.js が読み込めない・動かない場合でも10秒後に必ず非表示にする（2026-10-26 追加） */
  animation: loadingFailsafe 0.01s linear 10s forwards;
}

/* ローディング強制非表示用（通常は loading.js が先に消すため発動しない）
   0%と100%を同じ値にして、途中経過なしで即座に非表示へ切り替える */
@keyframes loadingFailsafe {
  0%, 100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.loading-text {
  display: inline-block;
  white-space: nowrap;
    line-height: 1;
}

.loading-text span {
    display: inline-block;
    font-size: 2.2rem;
    font-weight: 900;
    animation: lift 1.5s ease-in-out infinite;
    color: #003894;
}

/* 一文字ずつ遅らせる（ゆっくりリズム） */
.loading-text span:nth-child(1) { animation-delay: 0s; }
.loading-text span:nth-child(2) { animation-delay: 0.15s; }
.loading-text span:nth-child(3) { animation-delay: 0.3s; }
.loading-text span:nth-child(4) { animation-delay: 0.45s; }
.loading-text span:nth-child(5) { animation-delay: 0.6s; }
.loading-text span:nth-child(6) { animation-delay: 0.75s; }
.loading-text span:nth-child(7) { animation-delay: 0.9s; }
.loading-text span:nth-child(8) { animation-delay: 1.05s; }
.loading-text span:nth-child(9) { animation-delay: 1.20s; }
.loading-text span:nth-child(10){ animation-delay: 1.35s; }

/* 持ち上がって戻る */
@keyframes lift {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-10px); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* 波のアニメーションは以前と同じ */
.wave-wrapper {
  width: 120px;
  height: 20px;
  overflow: hidden;
  position: relative;
  transform:skew(30deg, 0deg);
}

.wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 460%;
  height: 100%;
  background-image: url(https://caviar.itembox.design/item/images/parts/loading.svg?2);
  background-repeat: repeat-x;
  background-size: calc(100% / 1);
  animation: waveMove 16s linear infinite;
}

@keyframes waveMove {
  0%   { transform: translateX(-50%) skew(-30deg, 0deg); }
  100% { transform: translateX(0) skew(-30deg, 0deg); } /* ちょうど半分だけ動かす（3.5個分） */
}