/* --- 全体の背景とフォント --- */
body {
    background-color: #f0f0f0; /* 少しグレーがかった背景 */
    color: #333;
}

/* --- ヘッダー部分：紺色のグラデーション --- */
header.header {
    background: linear-gradient(to bottom, #001a4d, #003399); /* 濃紺のグラデーション */
    border-bottom: 3px solid #ff9900; /* オレンジのライン */
    padding: 20px 0;
}

.navbar-brand img {
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); /* ロゴを少し浮かす */
}

/* --- サイドバーモジュール：オレンジのタイトル --- */
.card {
    border: 1px solid #ccc;
    border-radius: 0; /* カチッと四角く */
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.card-header {
    background-color: #ff9900 !important; /* 特徴的なオレンジ */
    color: #ffffff !important;
    font-weight: bold;
    border-radius: 0;
}

.card-title, .card-title a {
    color: #ffffff !important;
}

/* --- メインコンテンツエリア --- */
main.content {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ccc;
    min-height: 600px;
}

/* --- リンクの色 --- */
a {
    color: #0044cc;
    text-decoration: none;
}

a:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* --- 3カラムの幅調整 (デスクトップ時) --- */
@media (min-width: 800px) {
    .site-grid {
        grid-template-columns: 0.1fr 250px 0.8fr  0.1fr 250px  0.1fr; /* 左:中央:右 の比率 */
        gap: 20px;
    }
}