#loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loading-image {
    width: auto; /* 画像の幅を調整 */
    height: auto; /* 画像の高さを自動調整 */
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0; /* 開始と終了は透明 */
    }

    50% {
        opacity: 1; /* 中間で不透明 */
    }
}

/* Loading... テキストのスタイル */
.loading-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2em;
    color: #3498db;
    display: inline-block;
}

    /* ドットのアニメーションスタイル */
    .loading-text .dot1, .loading-text .dot2, .loading-text .dot3 {
        animation: blink 1.5s infinite;
    }

    .loading-text .dot1 {
        animation-delay: 0s;
    }

    .loading-text .dot2 {
        animation-delay: 0.5s;
    }

    .loading-text .dot3 {
        animation-delay: 1s;
    }

/* アニメーション効果 */
@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}