/*
 * 既存のスタイルを上書きし、768px未満でトグルボタン (hbm-toggler) を
 * 確実に表示させるためのスタイルです。既存CSSよりも後に読み込んでください。
 */

/* 768px以下の時のみ適用 (モバイル表示) */
@media (max-width: 767.98px) {
  .hbm-toggler {
    /* position: fixed; top: 15px; right: 15px; z-index: 99999; はHTMLのstyle属性で設定済み */

    /* 既存の display: none; などを強制的に上書き */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* サイズが小さすぎて見えない可能性を排除 */
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;

    /* 背景色と枠線を設定して、既存の背景に溶け込むのを防ぐ */
    background-color: #202025 !important; /* 薄いグレー */
    border: 1px solid #ffffff !important; /* 濃いグレーの枠線 */

    /* 角丸などが必要な場合は追加 */
    border-radius: 5px !important;
  }

  /* Offcanvasメニュー本体 (任意：z-indexの再確認) */
  .hbm-menu {
    z-index: 99990;
    background-color: #202025 !important;
    color: #ffffff !important;
    font-size: 2rem;
    font-weight: bold;
  }

  .hbm-toggler .navbar-toggler-icon {
    /* アイコンの色を白 (#FFFFFF) に変更する */
    /* これはBootstrapのSVGアイコンの内部で使われる色を変更するものです */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }

  /* ボタンの背景色も設定して、アイコンが目立つようにする */
  .hbm-toggler {
    background-color: #000000 !important; /* ボタンの背景を黒に */
  }
}

/* 768px以上の時のみ適用 (タブレット・PC表示) */
@media (min-width: 768px) {
  .hbm-toggler {
    /* 768px以上では確実に非表示にする */
    display: none !important;
  }
}