/* Custom CSS for dark blue sidebar and header with gradient */
.main-sidebar, .main-header {
    background: linear-gradient(135deg, #003366 0%, #002244 100%) !important; /* 濃いブルーのグラデーション */
    color: #ffffff;
}

.main-sidebar .nav-link {
    color: #ffffff !important; /* 白色のリンクテキスト */
}

.main-sidebar .nav-link.active {
    background-color: #004488 !important; /* アクティブなリンクの背景色 */
    color: #ffffff !important; /* アクティブなリンクのテキスト色 */
}

/* Custom CSS for white content background */
.content-wrapper, .main-footer {
    background-color: #ffffff !important; /* 白色の背景 */
}

.content {
    background-color: #ffffff !important; /* 白色の背景 */
}

.card {
    background-color: #f0f8ff !important; /* カードの背景に微妙な色の変化 */
    border: 1px solid #cce7ff; /* カードの境界線を薄いブルーに */
}

/* ヘッダーのテキスト色を白に変更 */
.main-header .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* サイドバーテキストのホバー色を薄いブルーに変更 */
.main-sidebar .nav-link:hover {
    background-color: #004488 !important;
}

/* メインコンテンツの h1 に上マージンを追加 */
.content h1 {
    margin-top: 20px; /* 上マージンを追加 */
}
#loading-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* 背景を維持 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1; /* 初期状態 */
    transition: opacity 0.5s ease-out; /* フェードアウトのアニメーション */
}

#loading-animation.fade-out {
    opacity: 0; /* フェードアウト時の設定 */
    pointer-events: none; /* ユーザー操作を無効化 */
}
/* 各文字のスタイル */
.animated-letter {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff; /* 青色 */
    margin: 0 5px;
    display: inline-block;
    animation: spin 1.5s infinite; /* アニメーションを適用 */
}

/* 各文字の遅延 */
.animated-letter:nth-child(1) { animation-delay: 0s; }
.animated-letter:nth-child(2) { animation-delay: 0.1s; }
.animated-letter:nth-child(3) { animation-delay: 0.2s; }
.animated-letter:nth-child(4) { animation-delay: 0.3s; }
.animated-letter:nth-child(5) { animation-delay: 0.4s; }
.animated-letter:nth-child(6) { animation-delay: 0.5s; }
.animated-letter:nth-child(7) { animation-delay: 0.6s; }
.animated-letter:nth-child(8) { animation-delay: 0.7s; }

/* 回転アニメーション */
@keyframes spin {
    0% {
        transform: rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.5;
    }
}