/* スマホ・タブレット（959px以下）のヘッダーとメニュー（2026-10-28。PC のグローバルナビ gnav.css と同じ考え方）
   以前：右から幅250pxの紺の帯が出て、ページ全体が左へ押し出される。ハンバーガーは Font Awesome＋「MENU」の文字
   変更：
   - ヘッダー：紺の帯にロゴ・右端に3本線のボタン（開くと×に変わる）
   - メニュー：ヘッダーの下に画面いっぱいの白い面で重ねる（ページは動かさない）
     大項目は 16px 太字・行の高さ 56px、サブメニューは薄いグレーの面に 15px で字下げ。開いている項目はオレンジの印
   - メニューの一番下に「まずは無料で相談してみる」（/assets/sp-nav.js が追加。押すとメニューを閉じてフォームへ）
   - 開いている間は画面下部の固定ボタンを隠す
   HTML（header_sp.html・トップ等の本文内ヘッダー）は変えず、CSS と小さな JS だけ。 */

@media only screen and (max-width: 959px) {
  /* ── ヘッダーの帯 ── */
  #s-navi dl.acordion { left: 0 !important; background: #172330; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
  #s-navi dt.trigger { height: 56px !important; padding: 0 4px 0 14px; box-sizing: border-box; }
  #st-mobile-logo { padding: 0 !important; display: flex; align-items: center; }
  #st-mobile-logo img { display: block; height: 34px; width: auto; max-width: none; }
  /* ヘッダーの帯（fixed）の高さ 56px ぶんをページ上部に空ける */
  #headbox-bg { height: 56px; min-height: 0; overflow: visible; }
  #headbox { height: 56px; min-height: 0; padding: 0 !important; }

  /* ── 3本線のボタン（開くと×） ── */
  #s-navi .acordion_button { margin: 0 !important; padding: 0 !important; }
  #s-navi .acordion_button .op {
    position: relative;
    display: block !important;
    width: 48px;
    height: 48px;
    padding: 0 !important;
    background: none !important;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #s-navi .acordion_button .op > * { display: none !important; }
  #s-navi .acordion_button .op::before,
  #s-navi .acordion_button .op::after {
    content: '' !important;
    position: absolute;
    left: 13px;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transition: transform .2s, top .2s;
    font-family: inherit !important;
  }
  #s-navi .acordion_button .op::before { top: 16px; box-shadow: 0 7px 0 #fff; }
  #s-navi .acordion_button .op::after { top: 30px; }
  .s-navi-active #s-navi .acordion_button .op::before { top: 23px; transform: rotate(45deg); box-shadow: none; }
  .s-navi-active #s-navi .acordion_button .op::after { top: 23px; transform: rotate(-45deg); }
  #s-navi .acordion_button .op:focus-visible { outline: 2px solid #ff7702; outline-offset: -4px; }

  /* ── メニューの面：ヘッダーの下に画面いっぱい・ページは押し出さない ── */
  .s-navi-active #st-ami { left: 0 !important; }
  #s-navi dd.acordion_tree {
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    max-height: none !important;
    background: #fff !important;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s !important;
    overflow-y: auto;
  }
  .s-navi-active #s-navi dd.acordion_tree {
    transform: none;
    visibility: visible;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s !important;
  }
  #s-navi dd.acordion_tree .acordion_tree_content { height: auto !important; padding: 8px 0 calc(32px + env(safe-area-inset-bottom)) !important; background: none !important; }

  /* ── 項目 ── */
  .acordion_tree ul.menu { margin: 0 !important; padding: 0 !important; background: none !important; }
  .acordion_tree ul.menu li { border: 0 !important; background: none !important; margin: 0 !important; list-style: none; }
  .acordion_tree ul.menu > li { border-bottom: 1px solid #e6e9ee !important; }
  .acordion_tree ul.menu li a,
  .s-navi-active .acordion_tree ul.menu li a {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 56px;
    padding: 0 52px 0 20px !important;
    box-sizing: border-box;
    border: 0 !important;
    background: none !important;
    color: #172330 !important;
    font-family: 'Noto Sans JP', 'Noto Sans JP Fallback', sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.45;
    text-decoration: none;
  }
  .acordion_tree ul.menu li a:active { background: #f2f4f7 !important; }
  /* サブメニュー */
  .acordion_tree ul.menu .sub-menu { margin: 0 !important; padding: 4px 0 !important; background: #f5f7fa !important; border-top: 1px solid #e6e9ee; }
  .acordion_tree ul.menu .sub-menu a,
  .s-navi-active .acordion_tree ul.menu li .sub-menu a {
    min-height: 48px;
    padding-left: 32px !important;
    font-size: 15px !important;
    font-weight: 400;
  }
  .acordion_tree ul.menu .sub-menu .sub-menu { background: #eef1f5 !important; border-top: 0; }
  .acordion_tree ul.menu .sub-menu .sub-menu a,
  .s-navi-active .acordion_tree ul.menu li .sub-menu .sub-menu a { padding-left: 46px !important; font-size: 14px !important; min-height: 44px; }

  /* 矢印：テーマの JS が付けるアイコンは使わず、右端に小さな印（サブメニューのある項目は下向き → 開くとオレンジで上向き） */
  .acordion_tree ul.menu li a .menu-item-icon { display: none !important; }
  .acordion_tree ul.menu li a::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid #9aa3b0;
    border-top: 2px solid #9aa3b0;
    transform: rotate(45deg);
    transition: transform .2s;
  }
  .acordion_tree ul.menu li.menu-item-has-children > a::after { margin-top: -6px; transform: rotate(135deg); }
  .acordion_tree ul.menu li.menu-item-has-children.menu-item-expanded > a::after { margin-top: -2px; transform: rotate(-45deg); border-color: #ff7702; }
  .acordion_tree ul.menu li.menu-item-expanded > a { color: #172330 !important; }

  /* 相談ボタン（sp-nav.js が追加） */
  .spnav-cta { padding: 28px 20px 0; }
  .spnav-cta a.arrow_btn { display: flex !important; align-items: center; justify-content: center; width: 100% !important; box-sizing: border-box; min-height: 60px; margin: 0 !important; padding: 0 16px !important; font-size: 17px !important; text-decoration: none; }
  .spnav-cta p { margin: 12px 0 0 !important; color: #5b6573; font-size: 12px; text-align: center; line-height: 1.6; }

  /* 開いている間は画面下部の固定ボタンを隠す */
  .s-navi-active .followCta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #s-navi dd.acordion_tree, .s-navi-active #s-navi dd.acordion_tree { transition: none !important; }
}