#loading-screen {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      z-index: 99999;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                  visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #loading-screen.is-hidden {
      opacity: 0;
      visibility: hidden;
    }

    /* Hello テキスト */
    .loading-hello {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(3rem, 8vw, 5.5rem);
      font-weight: 700;
      color: #4a9fd9;
      letter-spacing: 0.08em;
      opacity: 0;
      animation: helloBounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                 helloFadeOut 0.3s ease 0.6s forwards;
      margin: 0;
    }
    @keyframes helloBounceIn {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
      50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
      70%  { transform: translate(-50%, -50%) scale(0.95); }
      85%  { transform: translate(-50%, -50%) scale(1.05); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes helloFadeOut {
      from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      to   { opacity: 0; transform: translate(-50%, -50%) scale(0.9) translateY(-10px); }
    }

    /* SVGコンテナ */
    .loading-svg-wrap {
      width: clamp(220px, 55vw, 500px);
      opacity: 0;
      visibility: hidden;
    }
    .loading-svg-wrap.is-visible {
      opacity: 1;
      visibility: visible;
    }
    .loading-svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* ストロークドローイング → 塗りつぶしアニメーション */
    .svg-letter path {
      fill-opacity: 0;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation:
        svgDraw 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards,
        svgFill 0.3s ease forwards;
      animation-delay:
        calc(var(--d) * 0.06s + 0.15s),
        calc(var(--d) * 0.06s + 0.5s);
      animation-play-state: paused;
    }
    .loading-svg-wrap.is-visible .svg-letter path {
      animation-play-state: running;
    }

    @keyframes svgDraw {
      to { stroke-dashoffset: 0; }
    }
    @keyframes svgFill {
      to { fill-opacity: 1; }
    }

    /* 完成後のバウンス＋グロー */
    .loading-svg-wrap.is-complete .loading-svg {
      animation: svgComplete 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes svgComplete {
      0%   { transform: scale(1);    filter: brightness(1) drop-shadow(0 0 0 transparent); }
      50%  { transform: scale(1.06); filter: brightness(1.15) drop-shadow(0 4px 20px rgba(15,48,104,0.15)); }
      100% { transform: scale(1);    filter: brightness(1) drop-shadow(0 2px 12px rgba(15,48,104,0.08)); }
    }