/* アラートボックス */
#customAlert {
    display: none;
    position: fixed;
    top: 20px; /* 余白を広めに */
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    max-width: 320px;
    padding: 40px 20px; /* 余白を増やす */
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    z-index: 1000;
    font-family: Arial, sans-serif;
    text-align: left; /* メッセージは左寄せ */
    opacity: 0;
    animation: slideDown 0.2s ease-out forwards;
    border: 3px solid #1A73E8;
}

/* メッセージ部分 */
#alertMessage {
    font-size: 16px;
    word-wrap: break-word;
    margin-bottom: 20px; /* 下の余白を増やす */
}

/* OKボタン */
#alertButton {
    position: absolute;
    right: 15px;
    bottom: 15px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px !important;
    background: #1A73E8; 
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

/* ボタンのホバー時 */
#alertButton:hover {
    background: #1765CC;
}

/* スライドダウンアニメーション */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -30px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* スライドアップアニメーション */
@keyframes slideUp {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -30px);
    }
}

/* レスポンシブ対応 */
@media screen and (max-width: 600px) {
    #customAlert {
        width: 95%; /* 小さい画面では幅を広げる */
        padding: 30px 15px; /* 余白を減らしてバランス調整 */
    }
    
    #alertMessage {
        font-size: 18px; /* スマホではフォントサイズを小さく */
    }

    #alertButton {
        font-size: 18px;
        padding: 6px 12px; /* ボタンサイズを小さく */
        right: 10px;
        bottom: 10px;
    }
}
/* ローダーの背景（全画面を覆う） */
#loader-container {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    top: 0; /* 画面の上部から開始 */
    left: 0;
    width: 100%; /* 横幅を100%に設定 */
    height: 100%; /* 高さを100%に設定して画面全体を覆う */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* ローダーとテキストを10%上に配置 */
#loader-container > .loader,
#loader-container > .loading-text {
    margin-top: -10%; /* 上に10%移動 */
}

/* ローダーのスピナー */
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/* ローダーのテキスト */
.loading-text {
    color: white;
    font-size: 16px;
    margin-top: 10px;
}

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

/* 📱 スマホ向け（画面幅が600px以下のとき） */
@media screen and (max-width: 600px) {
    .loader {
        width: 30px;
        height: 30px;
        border-width: 3px;
    }
    .loading-text {
        font-size: 14px;
    }
}