@charset "utf-8";

/* ===== 色 ===== */
:root { --brand: #00C3C5; }

/* ===== スプラッシュ全体 ===== */
#splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--brand);
  z-index: 9999999;
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility 0s .6s;
}

#splash.is-hide {
  opacity: 0;
  visibility: hidden;
}

/* ===== ロゴ（文字） ===== */
.splash-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
}

.splash-letters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  /* ★ scale 完全撤廃（比率そのまま） */
  transform-origin: center center;
}

.splash-letters .line {
  display: flex;
  justify-content: center;
  /*gap: 20px;*/
  margin-bottom: 45px;
}

/* ===== 文字アニメ（拡大しない跳ねるだけ） ===== */
.char-img {
  width: 100%; /* PCサイズ */
  height: auto;
  display: block;

  /* 1回だけその場で跳ねる */
  animation: splashWave 0.8s ease-out 1;
  animation-delay: calc(var(--char-index) * 0.12s);

  transform-origin: center bottom;
}

/* 波 → 戻る（拡大なし） */
@keyframes splashWave {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12%); } /* ← 跳ねる高さ（自然） */
  100% { transform: translateY(0); }
}

/* ============================================
   スマホ用（max-width: 767px）
============================================ */
@media (max-width: 767px) {

  .splash-letters {
    /* 比率調整のscaleは使わない */
    gap: 0.1rem;
    transform-origin: center center;
  }

  .splash-letters .line {
    /*gap: 10px;*/
    margin-bottom: 16px; /* 縦方向も少し詰める */
  }

  .char-img {
    width: 56px;   /* ← 計算上ギリギリ安全な最大値 */
    height: auto;
    animation: splashWave 0.7s ease-out 1;
    animation-delay: calc(var(--char-index) * 0.10s);
  }
}