.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: #000000; /* 黒背景を保険で残す */
    background-image: url(../image/loading.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 背景画像を全体に広げる */

    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
}

/* ローディングスピナー */
.spinner {
    border: 8px solid #f3f3f3; /* 軽いグレー */
    border-top: 8px solid #3498db; /* 青色のトップ */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite; /* スピンアニメーション */

    /* 超強力なネオン効果 */
    box-shadow: 
        0 0 30px rgba(52, 152, 219, 1),  /* 強い輝き */
        0 0 60px rgba(52, 152, 219, 0.9), /* より広い範囲で強調 */
        0 0 90px rgba(52, 152, 219, 0.7), /* さらに広がり */
        0 0 120px rgba(52, 152, 219, 0.5); /* 最大の広がり */
}

/* スピナーの回転アニメーション */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}