/* Mobile Menu Fix CSS */

/* 770px以下でモバイルメニューボタンを確実に表示 */
@media (max-width: 770px) {
  /* サイドバーレイアウトを完全に無効化 */
  body header,
  header.absolute,
  header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
  }
  
  header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem !important;
    margin: 0 !important;
    height: auto !important;
    display: block !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* フレックスコンテナを横並びに */
  header .container > div.flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    gap: 0 !important;
    display: flex !important;
  }
  
  /* ロゴ部分を左側に配置 */
  header .container > div.flex.items-center.justify-between > div.flex.items-center.space-x-3:first-child {
    order: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
  }
  
  /* ハンバーガーメニューを右側に配置 */
  header .container > div.flex.items-center.justify-between > div.flex.items-center.py-2:last-child {
    order: 1 !important;
    margin-left: auto !important;
  }
  
  /* モバイルメニューボタンを必ず表示 */
  #mobile-menu-toggle,
  button#mobile-menu-toggle,
  .mobile-menu-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  
  /* デスクトップナビゲーションを非表示 */
  header nav.desktop-nav {
    display: none !important;
  }
  
  /* モバイルメニューの表示位置調整 */
  #mobile-menu {
    position: relative !important;
    z-index: 9998 !important;
    margin-top: 1rem !important;
  }
  
  #mobile-menu:not(.hidden) {
    display: block !important;
  }
}

/* 771px～1023pxでもモバイルメニューを表示 */
@media (min-width: 771px) and (max-width: 1023px) {
  /* サイドバーレイアウトを無効化 */
  body header,
  header.absolute,
  header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
  }
  
  header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 2rem !important;
    margin: 0 !important;
    height: auto !important;
    display: block !important;
  }
  
  /* フレックスコンテナを横並びに */
  header .container > div.flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    gap: 0 !important;
    display: flex !important;
  }
  
  /* ロゴ部分を左側に配置 */
  header .container > div.flex.items-center.justify-between > div.flex.items-center.space-x-3:first-child {
    order: 0 !important;
  }
  
  /* ハンバーガーメニューを右側に配置 */
  header .container > div.flex.items-center.justify-between > div.flex.items-center.py-2:last-child {
    order: 1 !important;
    margin-left: auto !important;
  }
  
  /* モバイルメニューボタンを表示 */
  #mobile-menu-toggle,
  button#mobile-menu-toggle,
  .mobile-menu-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
  }
  
  /* デスクトップナビゲーションを非表示 */
  header nav.desktop-nav {
    display: none !important;
  }
}

/* モバイルメニューボタンのホバー効果 */
#mobile-menu-toggle:hover {
  opacity: 0.8 !important;
}

/* メニューアイコンの切り替えを確実に */
#mobile-menu-toggle .hamburger-icon {
  display: block !important;
}

#mobile-menu-toggle.active .hamburger-icon {
  display: none !important;
}

#mobile-menu-toggle .close-icon {
  display: none !important;
}

#mobile-menu-toggle.active .close-icon {
  display: block !important;
}

/* 本番環境でのモバイルメニュー表示を確実に */
#mobile-menu {
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

#mobile-menu.hidden {
  display: none !important;
  opacity: 0 !important;
}

#mobile-menu:not(.hidden) {
  display: block !important;
  opacity: 1 !important;
}

/* ボタンのポインターイベントを確実に有効化 */
#mobile-menu-toggle {
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}