/* =========================================================
   navbar-responsive-final-complete.css

   この CSS が解決すること：
   ---------------------------------------------------------
   1. 992px 未満
      - hamburger を右端に表示
      - メニューは縦展開

   2. 992px 以上
      - hamburger は一切表示しない（最重要）
      - ロゴ＋社名＋メニューを横並び表示
      - メニューは常に右端

   3. 992px〜1199px（md サイズ）
      - 社名とメニューが重ならない
      - メニュー幅は可変（文字サイズ・余白が縮小）
      - 社名は必要に応じて省略（…）

   4. ドロップダウンメニューは必ず下方向に展開

   前提：
   ---------------------------------------------------------
   - Bootstrap v3
   - Power Pages / Portal テーマ CSS が混在
   - Bootstrap / テーマ CSS の上書きのみで制御
   ========================================================= */


/* =========================================================
   【1】ロゴ＋社名は「絶対に縮まない」
   ---------------------------------------------------------
   ・社名とメニューの重なりを防ぐため
   ・flex-shrink: 0 が最重要ポイント
   ========================================================= */
.navbar-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.navbar-header .navbar-brand {
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1.2;
  padding-top: 0;
  padding-bottom: 0;
}


/* =========================================================
   【2】992px 以上：navbar 全体を横並びに構成
   ========================================================= */
@media (min-width: 992px) {

  /* navbar 全体を 1 行に揃える */
  .navbar .container {
    display: flex;
    align-items: center;

    /* 社名とメニューの最低間隔（潰れない緩衝帯） */
    gap: 24px;
  }

  /* メニュー領域：右寄せ + 縮小可能 */
  .navbar-collapse {
    display: flex !important;
    align-items: center;
    margin-left: auto;
    min-width: 0;
    flex-shrink: 1;
    height: auto !important;
    overflow: visible !important;
  }

  .navbar-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .navbar-nav > li > a {
    white-space: nowrap;
  }

  /* Bootstrap / テーマの float を完全無効化 */
  .navbar-header,
  .navbar-nav,
  .navbar-right {
    float: none !important;
  }
}


/* =========================================================
   【3】md サイズ（992px〜1199px）
   ---------------------------------------------------------
   ・メニューを可変サイズに
   ・社名は省略表示
   ========================================================= */
@media (min-width: 992px) and (max-width: 1199px) {

  /* 社名が長い場合は省略 */
  .navbar-header .navbar-brand {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* メニュー文字・余白を自動縮小 */
  .navbar-nav > li > a {
    font-size: clamp(0.82rem, 1.1vw, 0.95rem);
    padding-left: clamp(6px, 0.8vw, 12px);
    padding-right: clamp(6px, 0.8vw, 12px);
  }
}


/* =========================================================
   【4】992px 未満：hamburger を右端に固定
   ========================================================= */
@media (max-width: 991px) {

  .navbar-header {
    position: relative;
    width: 100%;
  }

  /* hamburger を右上固定 */
  .navbar-toggle {
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* メニューは collapse */
  .navbar-collapse {
    display: none !important;
    width: 100%;
  }

  .navbar-collapse.in {
    display: block !important;
  }

  .navbar-nav,
  .navbar-right {
    float: none !important;
  }

  .navbar-nav > li {
    float: none;
  }
}


/* =========================================================
   【5】ドロップダウンを必ず下方向に展開
   ========================================================= */
.navbar-nav .dropdown-menu {
  top: 100%;
  bottom: auto;
  left: 0;
  margin-top: 0;
}

.navbar-nav .dropdown.open > .dropdown-menu {
  display: block;
}


/* =========================================================
   【6】最終保険（超重要）
   ---------------------------------------------------------
   992px 以上で hamburger が
   絶対に表示されないよう強制
   ========================================================= */
@media (min-width: 992px) {
  .navbar .navbar-toggle {
    display: none !important;
  }
}