@charset "utf-8";
/**
 * bootstrap-bridge.css
 * Bootstrap 4から5への移行をサポートするスタイル
 * ハンバーガーメニューのアニメーションを復活させた修正版
 */

/* コラプス状態の基本スタイル */
.collapse {
  display: none;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.collapse.show,
.collapse.in {
  display: block;
}

/* トランジション - アニメーションを復活 */
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

/* ナビゲーションバーとトグルボタン */
@media (max-width: 767px) {
  /* ナビゲーションバーの基本スタイル */
  .navbar-collapse {
    overflow-x: hidden !important; /* 横スクロールを防止 */
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-overflow-scrolling: touch;
    max-height: 75vh; /* ビューポートの高さの75%を最大高さに */
    overflow-y: auto !important; /* 縦スクロールを許可 */
    padding-bottom: 15px; /* スクロール時の下部余白 */
    transition: height 0.35s ease;
  }

  /* 通常時は隠す */
  .navbar-collapse.collapse:not(.in):not(.show) {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 表示時のスタイル */
  .navbar-collapse.collapse.in,
  .navbar-collapse.collapse.show {
    display: block !important;
    height: auto !important;
    overflow-y: auto !important;
    z-index: 99999 !important; /* 最前面に表示 */
  }

  /* アニメーションを復活 */
  .navbar-collapse.collapsing {
    display: block !important;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease !important;
  }

  /* トグルボタンのスタイル */
  .navbar-toggle,
  .navbar-toggler {
    display: block !important;
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
  }

  /* トグルボタンのアイコン */
  .navbar-toggle .icon-bar,
  .navbar-toggler .icon-bar,
  .navbar-toggler-icon {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #888;
    margin-top: 4px;
  }

  .navbar-toggle .icon-bar:first-child,
  .navbar-toggler .icon-bar:first-child {
    margin-top: 0;
  }

  /* ナビゲーションアイテムのスタイル */
  .navbar-nav {
    margin: 7.5px -15px;
    float: none !important;
  }

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

  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }
}

/* デスクトップ表示時のスタイル */
@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }

  .navbar-toggle,
  .navbar-toggler {
    display: none !important;
  }

  .navbar-nav {
    float: left;
    margin: 0;
  }

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

  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* Bootstrap 5の新しいクラス構造と互換性を持たせるためのユーティリティ */
.navbar-expand-lg .navbar-collapse,
.navbar-expand-md .navbar-collapse,
.navbar-expand-sm .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}

@media (max-width: 767px) {
  .navbar-expand-lg .navbar-collapse,
  .navbar-expand-md .navbar-collapse,
  .navbar-expand-sm .navbar-collapse {
    display: none !important;
  }

  .navbar-expand-lg .navbar-collapse.show,
  .navbar-expand-md .navbar-collapse.show,
  .navbar-expand-sm .navbar-collapse.show,
  .navbar-expand-lg .navbar-collapse.in,
  .navbar-expand-md .navbar-collapse.in,
  .navbar-expand-sm .navbar-collapse.in {
    display: block !important;
  }

  .navbar-expand-lg .navbar-toggler,
  .navbar-expand-md .navbar-toggler,
  .navbar-expand-sm .navbar-toggler {
    display: block !important;
  }
}

/* ナビゲーションバー内のブランド */
.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px;
  font-size: 18px;
  line-height: 20px;
}

/* ナビゲーションバー内のボタンのアクティブ状態 */
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}

/* ドロップダウンメニュー */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99999 !important; /* 最前面に表示 */
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown-menu.show {
  display: block;
}

/* ドロップダウン関連のz-index調整 */
.navbar-nav > li.dropdown {
  position: relative;
  z-index: 99999 !important;
}

.navbar-nav > li.dropdown.open > .dropdown-menu,
.dropdown.open > .dropdown-menu,
.dropdown.show > .dropdown-menu {
  display: block !important;
  z-index: 99999 !important;
}

/* ヘッダー全体を高いz-indexに */
#header, .header, header {
  position: relative;
  z-index: 9998 !important;
}

/* サイドメニューのz-index調整 */
.right-menu, 
.sidenavi, 
.panel, 
.left-content {
  position: relative;
  z-index: 1000 !important; /* ヘッダーのドロップダウンより低く */
}

/* モーダルダイアログなどとの競合を避けるため */
.modal, .modal-backdrop {
  z-index: 100000 !important;
}

/* メニュー表示時に背景コンテンツがスクロールするのを防止 */
body.menu-open {
  overflow: hidden;
}

/* スクロールバーのカスタマイズ */
.navbar-collapse::-webkit-scrollbar {
  width: 6px;
}
.navbar-collapse::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.navbar-collapse::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
.navbar-collapse::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ハンバーガーメニューボタンの強調表示 */
.navbar-toggle:focus,
.navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,123,255,.25);
}

/* アニメーション中はポインターイベントを無効化（誤クリック防止） */
[data-animating="true"] {
  pointer-events: none;
}

/* レスポンシブ時の検索バー位置修正 */
@media (max-width: 767px) {
  /* 検索フォームのコンテナ */
  .search-form-container,
  form[action*="google"],
  .header-search,
  #header .search-box {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    z-index: 1000 !important;
  }