/*!
 * Menu Breakpoint Extend
 * -------------------------------------------------------------------
 * 既存テーマは ≤768px のみハンバーガーメニュー。
 * タブレット〜狭いPC（769〜1180px）でも本来PC幅前提のメニューが折り返して
 * 崩れるため、このレンジでもハンバーガーメニューを有効化する上書き。
 *
 * ※ style.min.css 本体は触らない（コンパイル済みのため）。
 *   ここで scoped にヘッダー周りだけ SP同等の振る舞いに切り替える。
 *
 * 影響範囲: #header（および .hamburger）のみ。本文コンテンツの font-size 等は
 * 既存の PC ブレイクポイントのまま。
 */

@media (min-width: 769px) and (max-width: 1180px) {

  /* ---------- 1. メニュー全体をスライドアウトパネル化 ---------- */
  #header .header_inner .menu_contact_wrap {
    position: fixed;
    z-index: -1;
    top: 60px;
    right: 0;
    width: 100%;
    max-width: unset;
    max-height: unset;
    height: calc(100dvh - 60px);
    background-color: var(--brown, #231815);
    opacity: 0;
    visibility: hidden;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 56px 48px;
    transition: .3s ease;
  }
  #header .header_inner .menu_contact_wrap.is-opened {
    opacity: 1;
    visibility: visible;
    z-index: 0;
    overflow: auto;
  }

  /* ---------- 2. メインメニューを縦並びに ---------- */
  #header .header_inner .menu_contact_wrap .mainmenu {
    flex: 0 1 auto;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 28px;
    width: 100%;
    padding: 0;
  }
  #header .header_inner .menu_contact_wrap .mainmenu > li {
    width: 100%;
    flex-direction: column;
  }
  #header .header_inner .menu_contact_wrap .mainmenu > li a {
    font-size: 22px;
    display: flex;
    width: 100%;
    align-items: center;
  }

  /* Instagram アイコン（既存はSPのみ表示。769-1180でも表示する） */
  #header .header_inner .menu_contact_wrap .mainmenu > li.instagram_link {
    width: 36px;
    height: 36px;
  }
  #header .header_inner .menu_contact_wrap .mainmenu > li.instagram_link.none--o-sp {
    display: block !important;
  }

  /* ---------- 3. contact_btn_wrap を縦並びに ---------- */
  #header .header_inner .menu_contact_wrap .contact_btn_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  #header .header_inner .menu_contact_wrap .contact_btn_wrap .tel_link {
    width: 100%;
    height: 56px;
    padding: 14px 22px;
    border-radius: 9999px;
    font-size: 22px;
    gap: 12px;
  }
  #header .header_inner .menu_contact_wrap .contact_btn_wrap .tel_link .ico {
    width: 26px;
    height: 26px;
  }

  /* ---------- 4. ハンバーガーボタンを表示 ---------- */
  /* 既存の .none--o-sp 由来 display:none!important を打ち消す */
  #header .container > nav.hamburger.none--o-sp,
  #header nav.hamburger.none--o-sp {
    display: block !important;
  }

  /* ---------- 5. 言語切替UI（this range で full-width LI内の中央配置） ---------- */
  #header .header_inner .menu_contact_wrap .mainmenu li.lang_switcher_menu_item {
    width: auto !important;
    flex-direction: row !important;
    justify-content: center;
  }
  #header .header_inner .menu_contact_wrap .mainmenu li.lang_switcher_menu_item .lang_switcher {
    font-size: 16px;
    gap: 12px;
  }
  #header .header_inner .menu_contact_wrap .mainmenu li.lang_switcher_menu_item .lang_switcher .lang_item a {
    font-size: 16px !important;
    width: auto !important;
    display: inline-flex !important;
  }
}