/* Navbar-sub の背景 */
.navbar-sub {
    background: linear-gradient(45deg, #f8f9fa, #e9ecef); /* 薄い灰色のグラデーション */
    border-bottom: 1px solid #ddd;
}

/* Navbar リンクの基本スタイル */
.navbar-nav .nav-link {
    position: relative; /* 疑似要素を使用するために必要 */
    padding: 10px 15px;
    color: #2e88e2 !important; /* テキスト色の変更 */
    font-weight: 500;
    text-decoration: none;
    margin-right: 8px; /* 右側の間隔 */
    transition: all 0.3s ease-in-out;
}

/* 疑似要素での下線スタイル */
.navbar-nav .nav-link::after {
    content: ""; /* 疑似要素を作成 */
    position: absolute;
    bottom: 3px; /* 下線の位置調整（上に詰める） */
    left: 0;
    right: 0;
    height: 2px; /* 下線の太さ */
    background-color: #ddd; /* デフォルトの下線色 */
    transition: all 0.3s ease-in-out;
}

/* ホバー時の効果 */
.navbar-nav .nav-link:hover::after {
    background-color: #495057; /* ホバー時の下線色 */
}

.navbar-nav .nav-link:hover {
    color: #1e77cf !important; /* テキスト色の変更 */
}

/* アクティブリンク */
.navbar-nav .nav-link.active::after {
    background-color: #343a40; /* アクティブ時の下線色 */
}

.navbar-nav .nav-link.active {
    color: #2e88e2 !important; /* テキスト色の変更 */
}

/* ドロップダウンリンク用のスタイル */
.navbar-nav .dropdown .nav-link {
    position: static; /* 疑似要素の影響を受けないように修正 */
}

.navbar-nav .dropdown .nav-link::after {
    display: none; /* ドロップダウンのメインリンクには下線を表示しない */
}

/* ドロップダウンメニューの項目 */
.dropdown-menu {
    border: none;
    background: #f8f9fa; /* メニュー背景 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-menu .dropdown-item {
    color: #2e88e2 !important; /* テキスト色の変更 */
    transition: all 0.3s ease-in-out;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #dee2e6;
    color: #1e77cf !important; /* テキスト色の変更 */
}

/* トグルボタン */
.navbar-toggler {
    border: none;
    background-color: #ced4da; /* 灰色ボタン */
}

.navbar-toggler-icon {
    filter: invert(1);
}