/* ====================================
   基本設定
   ==================================== */
body {
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #333;
    background-color: #f8f9fa; /* 薄いグレーの背景 */
}

/* リンクのデフォルトスタイル */
a {
    color: #007bff; /* BootstrapのPrimaryカラーに合わせる */
    text-decoration: none;
    transition: color 0.3s ease; /* ホバー時のアニメーション */
}

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

/* ====================================
   ヘッダー (ナビゲーションバー)
   ==================================== */
.navbar {
    border-bottom: 3px solid #007bff; /* ブランドカラーで下線を引く */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影で立体感を出す */
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem; /* ロゴの文字サイズを少し大きく */
    color: #ffffff !important; /* ロゴの色を白に固定 */
    display: flex; /* アイコンとテキストを縦方向中央揃え */
    align-items: center;
}

.navbar-brand img, .navbar-brand .fas {
    margin-right: 0.5rem; /* ロゴアイコンとテキストの間隔 */
}

.nav-link {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8) !important; /* リンクの色を少し明るく */
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #fff !important; /* ホバーで白に */
}

.dropdown-menu {
    background-color: #343a40; /* ドロップダウンメニューの背景色をナビバーに合わせる */
    border: none;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important; /* ドロップダウンアイテムの文字色 */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #007bff; /* ホバーでブランドカラー */
    color: #fff !important;
}

/* ====================================
   メインコンテンツ
   ==================================== */
main .container {
    background-color: #ffffff; /* メインコンテンツの背景を白に */
    border-radius: 8px; /* 角を丸く */
    box-shadow: 0 0 15px rgba(0,0,0,0.05); /* 軽い影 */
    padding: 2.5rem; /* 内側の余白 */
}

.jumbotron {
    background: linear-gradient(45deg, #007bff, #0056b3); /* グラデーション背景 */
    color: #fff;
    border-radius: 0.5rem;
    padding: 3rem 2rem;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.jumbotron h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.jumbotron p.lead {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.jumbotron .btn {
    background-color: #28a745; /* 強調ボタンの色 */
    border-color: #28a745;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.jumbotron .btn:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.card {
    border: none; /* カードのボーダーをなくす */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* カードに影をつける */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}

.card:hover {
    transform: translateY(-5px); /* カードを少し上に持ち上げる */
}

.card-img-top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    object-fit: cover; /* 画像がはみ出さないように調整 */
}

.card-title {
    font-weight: bold;
    color: #007bff;
}

/* ====================================
   サイドバー
   ==================================== */
.sidebar .card-header {
    background-color: #007bff; /* サイドバーヘッダーの背景色をブランドカラーに */
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
}

.accordion-item {
    border: none; /* アコーディオンのボーダーをなくす */
}

.accordion-button {
    background-color: #f8f9fa !important; /* アコーディオンボタンの背景色 */
    color: #333 !important;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.125);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.accordion-button:hover {
    background-color: #e2e6ea !important; /* ホバーで少し暗く */
}

.accordion-button:not(.collapsed) {
    background-color: #e9ecef !important; /* 開いている時の背景色 */
    color: #007bff !important; /* 開いている時の文字色 */
    box-shadow: inset 0 -1px 0 rgba(0, 123, 255, 0.1);
}

.accordion-body .list-group-item {
    padding-left: 2.5rem; /* 子要素のインデント */
    border-left: 3px solid transparent;
    transition: border-left 0.2s ease;
}

.accordion-body .list-group-item:hover {
    background-color: #f1f1f1;
    border-left-color: #007bff; /* ホバーでブランドカラーの線を出す */
}


/* ====================================
   フッター
   ==================================== */
footer {
    border-top: 3px solid #007bff; /* ブランドカラーで上線を引く */
    background: #212529; /* ダークグレーの背景 */
    color: rgba(255, 255, 255, 0.6); /* 文字色を少し薄く */
}