body {
    /* 読み込むBootstrapのNavbarの高さによって調整 */
    /* 一般的に56px〜60px程度が多いですが、正確な高さに合わせてください */
    padding-top: 56px; /* 例: ナビバーの高さが56pxの場合 */
}


/* --- ここからトップメニューのドロップダウンサブメニュー用CSS --- */

/* 親ドロップダウンアイテムに相対位置を設定 */
.navbar-nav .dropdown-submenu {
    position: relative;
}

/* サブメニューの初期位置と非表示設定 */
.navbar-nav .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; /* 親メニューの右隣に表示 */
    margin-top: -1px; /* 微調整 */
    display: none; /* デフォルトでは非表示 */
    min-width: 10rem; /* ドロップダウンの最小幅を確保 (Bootstrapデフォルトと同じ) */
}

/* ホバー時にサブメニューを表示 */
.navbar-nav .dropdown-submenu:hover > .dropdown-menu {
    display: block; /* ホバーで表示 */
}

/* サブメニューを持つアイテムに矢印を追加 */
.navbar-nav .dropdown-submenu > a::after {
    display: block;
    content: "\F285"; /* Bootstrap Iconsの右矢印のUnicode (bi-chevron-right) */
    font-family: "bootstrap-icons" !important; /* Bootstrap Iconsのフォントを指定 */
    font-size: 0.7em; /* 矢印のサイズを小さく */
    float: right;
    margin-top: 0.5em; /* 矢印の縦位置調整 */
    margin-left: 0.5em; /* テキストとの間隔 */
    vertical-align: middle;
    border: none; /* デフォルトのborderを上書き */
}

/* ドロップダウンメニューが画面右端からはみ出す場合の調整 (任意) */
/* これは、特に右端のメニューでサブメニューが画面外に出るのを防ぐため */
@media (min-width: 768px) { /* mdブレークポイント以上 */
    .navbar-nav .dropdown-menu .dropdown-submenu .dropdown-menu {
        left: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .navbar-nav .dropdown-menu .dropdown-submenu.dropleft .dropdown-menu {
        left: -100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* --- ここまでトップメニューのドロップダウンサブメニュー用CSS --- */