/* public_html/assets/css/style.css */

/* ======================================= */
/* 共通レイアウト調整 */
/* ======================================= */

/* ナビゲーションバーの高さに対応する上部余白 */
/* Bootstrapのデフォルトnavbar-toggler-icon (ハンバーガーメニュー) の高さは
   通常56px程度ですが、正確な高さはデベロッパーツールの計算値を確認してください。
   ここでは安全を見て少し多めに設定しています。 */
body {
    padding-top: 70px; /* ナビゲーションバーの高さ + α */
}

/* メインコンテンツ領域の調整 */
/* サイドバーとメインコンテンツのトップの余白を調整したい場合、必要に応じて設定 */
.main-content-area {
    padding-top: 20px; /* パンくずリストやタイトルなどがナビバーのすぐ下にくっつかないように */
}

/* ======================================= */
/* トップメニューのドロップダウンサブメニュー用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; /* ホバーで表示 */
}

/* サブメニューを持つアイテム（`dropdown-submenu > a`）に右矢印アイコンを追加 */
.navbar-nav .dropdown-submenu > a::after {
    display: inline-block; /* 矢印をインラインブロック要素として表示 */
    content: "\F285"; /* Bootstrap Iconsの右矢印アイコン (bi-chevron-right) のUnicode */
    font-family: "bootstrap-icons" !important; /* Bootstrap Iconsのフォントを指定 */
    font-size: 0.7em;     /* 矢印のサイズ調整 */
    vertical-align: middle; /* 垂直方向の中央揃え */
    margin-left: 0.5em;   /* テキストとの間隔 */
    border: none;         /* Bootstrapデフォルトの矢印のボーダーを上書き */
}

/* レスポンシブ対応: デスクトップビューでのサブメニューのはみ出し調整 */
/* mdブレークポイント (768px) 以上で適用 */
@media (min-width: 768px) { 
    .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ルールはここに追記してください */
/* ======================================= */