/* --- ローディング画面のコンテナ --- */
    #loading-screen {
      position: fixed;
      inset: 0; /* 全画面表示 */
      width: 100%;
      height: 100svh;
  background: linear-gradient(180deg,#d29ed8,#fff);
  background-size: 120% 120%;
  animation: gradient-animation 0.5s ease infinite;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      overflow: hidden; /* 広がる円が画面外にはみ出さないように */

      /* 消える時の設定：
         白い円が広がりきった後（約1.2秒後）に、
         コンテナ全体をフワッとフェードアウトさせるタイムラグを設定
      */
      transition: opacity 0.5s ease 1s, visibility 0s linear 1.2s;
    }


.gradient-background {

}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


    /* JSでクラスが付与されたらコンテナ全体を隠す */
    #loading-screen.fade-out {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* --- 新規：ワイプ効果用の白い円 --- */
    .wipe-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      /* 画面の対角線を確実に覆える十分な大きさ */
      width: 250vmax; 
      height: 250vmax;
      background-color: #fff; /* 白 */
      border-radius: 50%;
      z-index: 10; /* 煙より前面に配置 */
      
      /* 初期状態：中心に極小サイズで配置 */
      transform: translate(-50%, -50%) scale(0);
      filter: blur(100px);
      /* 拡大アニメーション：後半に加速するイージングで勢いを出す */
      transition: transform 1s cubic-bezier(0.7, 0, 0.3, 1);
    }

    /* クラスが付与されたら円を拡大させる */
    #loading-screen.fade-out .wipe-circle {
      transform: translate(-50%, -50%) scale(1);
    }

    /* --- 既存：煙（ローディング画像） --- */
    .smoke-loader {
      width: 80px;
      height: 80px;
      position: relative;
      z-index: 5; /* 白い円より背面 */
      filter: blur(12px) contrast(1.2);
      
      /* 白い円が広がる前に、煙はスッと消す */
      transition: opacity 0.3s ease;
    }
    
    /* クラスが付与されたら煙を直ちに透明にする */
    #loading-screen.fade-out .smoke-loader {
      opacity: 0;
    }

    /* 煙の各層のスタイル（前回と同じ） */
    .smoke-layer {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      mix-blend-mode: overlay;
    }
    .layer-1 { animation: morph 3s ease-in-out infinite; }
    .layer-2 { background: rgba(255, 255, 255, 0.6); animation: morph 3s ease-in-out infinite 0.5s reverse; }
    .layer-3 { width: 60%; height: 60%; top: 20%; left: 20%; background: rgba(255, 255, 255, 0.9); filter: blur(5px); animation: float-up 2s ease-in-out infinite alternate; }

    /* アニメーション定義（前回と同じ） */
    @keyframes morph {
      0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); }
      50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
      100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg); }
    }
    @keyframes float-up {
      0% { transform: translateY(5px) scale(0.9); opacity: 0.7; }
      100% { transform: translateY(-5px) scale(1.1); opacity: 1; }
    }