/* ===== ローディング画面 ===== */
#js-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: all;
  background: #fff;
}

/* 青い水面（LOADING文字のすぐ上から上昇） */
.loading-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;             /* 波のヘリがLOADING文字(top:72%)の少し下 */
  background: #1343E4;
  transition: height 6.0s cubic-bezier(0.4, 0, 0.15, 1);
}

.loading-fill.is-rising {
  height: 110%;
}

/* 波SVGラッパー */
.loading-wave-wrap {
  position: absolute;
  top: -118px;
  left: 0;
  width: 100%;
  height: 120px;
  line-height: 0;
}

/* 波はJS(loading.js)でSVGパスを直接アニメーション */

.loading-wave-svg {
  width: 100%;
  height: 100%;
}

/* Fulfillロゴ：波が背景として通過することで白ロゴが浮かび上がる */
.loading-logo-wrap {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.loading-logo {
  width: 468px;
  max-width: 80vw;
}

.loading-logo img {
  width: 100%;
  height: auto;
}

/* LOADINGテキスト＋%：最初から波の青い部分に表示 */
.loading-text-wrap {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 2;
  white-space: nowrap;
}

/* LOADING 文字アニメーション（参考サイトの move アニメーション） */
.loading-text {
  position: relative;
  width: 420px;
  height: 40px;
  margin: 0 auto 14px;
  overflow: visible;
  user-select: none;
  cursor: default;
}

.loading-text div {
  position: absolute;
  width: 30px;
  height: 40px;
  opacity: 0;
  font-family: 'Google Sans', sans-serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 1.6em;
  color: #fff;
  line-height: 36px;
  text-align: center;
  animation: loadMove 2s linear infinite;
  transform: rotate(180deg);
}

.loading-text div:nth-child(2) { animation-delay: 0.2s; }
.loading-text div:nth-child(3) { animation-delay: 0.4s; }
.loading-text div:nth-child(4) { animation-delay: 0.6s; }
.loading-text div:nth-child(5) { animation-delay: 0.8s; }
.loading-text div:nth-child(6) { animation-delay: 1.0s; }
.loading-text div:nth-child(7) { animation-delay: 1.2s; }

@keyframes loadMove {
  0%   { left: 0;    opacity: 0; transform: rotate(180deg);  }
  35%  { left: 38%;  opacity: 1; transform: rotate(0deg);    }
  65%  { left: 62%;  opacity: 1; transform: rotate(0deg);    }
  100% { left: 100%; opacity: 0; transform: rotate(-180deg); }
}

.loading-percent {
  display: block;
  font-size: 24px;
  font-family: 'Google Sans', sans-serif;
  font-weight: 200;
  letter-spacing: 0;
  opacity: 0.85;
}

/* 完了後：フワッとフェードアウト */
#js-loading.is-done {
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}