html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* 他の要素の上に表示するための設定 */
}

    .navbar .dropdown-menu {
        background-color: #ffffff; /* プルダウンメニューの背景色 */
        border: 1px solid #dddddd; /* 境界線の色 */
        padding: 10px;
        margin-top: 5px; /* メニューとボタンの間の余白 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加して浮き上がるように見せる */
    }

    .navbar .dropdown-item {
        color: #333333; /* テキストの色 */
        padding: 8px 16px;
    }

        .navbar .dropdown-item:hover {
            background-color: #f1f1f1; /* ホバー時の背景色 */
            color: #000000; /* ホバー時のテキストの色 */
        }

    .navbar li {
        margin-right: 15px; /* ボタン同士の間に適切な余白を追加 */
    }

        .navbar li:last-child {
            margin-right: 0; /* 最後のボタンの余白を削除 */
        }

.dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:active {
    outline: none;
    background-color: #007bff; /* フォーカス時の背景色 */
    color: white; /* フォーカス時のテキストの色 */
}

/* ネストされたドロップダウンメニューのスタイル */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
        display: none; /* 初期状態で非表示にする */
    }

    .dropdown-submenu.show .dropdown-menu {
        display: block; /* 表示状態にする */
    }