/* ========================================================================== 
   header.css - Ver 18.7 SP-UD Icon Edition
   - PC表示：Ver 18.5/18.6 の大型UDデザインを完全継承
   - SP表示：外観を維持しつつ「店舗一覧」「メニュー」の操作系を大型化
   - 操作性：指の大きな方やお年寄りでも確実にタップできるようサイズを拡張
   - 追加修正：メインコンテンツの被り防止（padding-top自動調整）
   ========================================================================== */

/* --- 0. コンテンツ被り防止設定 (追加) --- */
/* ヘッダーが position: fixed のため、その高さ分bodyを押し下げます */
body {
  padding-top: 100px; /* PC用ヘッダー高さ */
}

@media (max-width: 768px) {
  body {
    padding-top: 90px; /* SP用ヘッダー高さ */
  }
}

/* --- 1. 全体共通設定 --- */
.site-header {
  width: 100%;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-bottom: 3px solid #e60012; 
  height: 100px; 
  transition: all 0.3s ease;
}

.header-inner {
  max-width: 1340px; 
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  position: relative;
}

/* --- 2. ロゴエリア (PC) --- */
.header-brand {
  flex-shrink: 0;
  z-index: 10001;
}

.brand-link {
  display: block;
  text-decoration: none !important;
}

.brand-logo-wrapper {
  display: flex;
  align-items: center;
  height: 70px; 
}

.brand-logo-wrapper img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* --- 3. PCナビゲーション --- */
.header-right-box {
  display: flex;
  align-items: center;
  gap: 45px;
}

/* 【完全安定版修正】：ドロップダウンの絶対配置の基準とするため relative を付与 */
.header-nav.pc-only {
  position: relative;
}

.header-nav.pc-only ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav.pc-only li {
  position: relative;
  display: flex;
  align-items: center;
}

.header-nav.pc-only li:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 35px; 
  background: #d0d0d0; 
  margin: 0 30px; 
}

.header-nav.pc-only a {
  color: #1a1a1a;
  text-decoration: none !important;
  font-weight: 900; 
  font-size: 18px;  
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s;
}

.header-nav.pc-only a span {
  font-size: 11px;
  color: #c5a059;
  font-weight: 800;
  margin-top: 4px;
}

/* --- PC: 店舗一覧ドロップダウンメニュー設定（店舗増減対応・4列自動並び版） --- */
@media (min-width: 769px) {
  .header-nav.pc-only li.has-sub {
    position: relative;
  }

  /* 初期状態：非表示（親の幅に完全同期させる設定） */
  .header-nav.pc-only .dropdown-menu {
    position: absolute;
    /* 【位置設定維持】：ご指定いただいた手動微調整数値をそのまま適用 */
    top: 155%;
    
    /* 【親幅同期への変更】：中央配置(left:50%)から、親の左端(left:0)を基準に100%幅で均等展開 */
    left: 0;
    width: 100%;
    
    transform: translateX(-30px) translateY(0);/* 左に10px動かしたい場合はマイナスにします */
    
    margin-top: 0; 

    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-top: 3px solid #e60012;
    padding: 8px 0;

    list-style: none;
    margin: 0;

    /* ★縦積みブロック配置 */
    display: block;

    /* 巨大化の原因となっていた max-content・固定最小幅（min-width）を完全に撤廃 */
    min-width: 0;     

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10100;
    box-sizing: border-box; /* 境界線を含めた幅計算の狂いを防止 */
  }

  /* ホバー時：表示 */
  .header-nav.pc-only li.has-sub:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    /* 【位置設定維持】：手動微調整数値に完全密着 */
    transform: translateX(-30px) translateY(0);/* 左に10px動かしたい場合はマイナスにします */
  }

  /* 各liを「親メニューの幅に等しく追従する1つの行」として振る舞わせる設定 */
  .header-nav.pc-only .dropdown-menu li {
    display: block !important;
    flex: none !important;      /* 不必要なflexプロパティの影響を完全に排除 */
    width: 100% !important;     /* 親の幅いっぱいに統一することでホバー背景のガタつきを防止 */
    white-space: nowrap;        /* 文字の自動的な縦潰れ・改行を強力に禁止 */
    box-sizing: border-box;
  }

  /* 通常ナビ用の縦区切り線をドロップダウン内のみ非表示化 */
  .header-nav.pc-only .dropdown-menu li::after {
    display: none !important;
  }

  /* ドロップダウン内リンクのスタイル（狭い親幅の中で文字を綺麗にセンタリング） */
  .header-nav.pc-only .dropdown-menu a {
    display: block !important;
    /* 【横幅制限への対応】：左右の固定余白をリreset（0）し、文字が親幅の内側で中央に美しく収まるように調整 */
    padding: 14px 0; 
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center !important;
    transition: background 0.2s ease, color 0.2s ease;
    flex-direction: row !important; /* グローバルナビの上下並び設定をリセット */
    justify-content: center;
    letter-spacing: 0.02em;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }

  .header-nav.pc-only .dropdown-menu a:hover {
    background: #f5f5f5;
    color: #e60012 !important;
  }
}

/* --- CONTACTボタン（PC） --- */
.header-info.pc-only .button-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1a1a1a !important; 
  font-size: 16px; 
  font-weight: 900;
  padding: 14px 40px;
  border: 2px solid #e60012; 
  text-decoration: none !important;
  transition: all 0.4s ease;
  line-height: 1.2;
}

.header-info.pc-only .button-link span {
  font-size: 11px;
  color: #c5a059;
  font-weight: 900;
  margin-top: 2px;
}

.header-info.pc-only .button-link:hover {
  background: #e60012;
  color: #ffffff !important;
}

.header-info.pc-only .button-link:hover span {
  color: #ffffff;
}

/* --- 4. レスポンシブ (SP表示) --- */

@media (min-width: 769px) {
  .sp-menu { display: none !important; }
  .header-sp-controls { display: none !important; }
}

@media (max-width: 768px) {
  /* 【二重スクロールバー完全抑止修正】
      スマホ用ナビゲーション（.sp-menu）が展開（.is-open）した時、
      背面にある全体の背景（body）の縦スクロールバーを一時的に消去して固定し、
      スクロールバーが二重に出現することによる画面幅減少・左ズレバグを完全にシャットアウトします */
  body:has(.sp-menu.is-open) {
    overflow: hidden !important;
  }

  .site-header {
    height: 90px; /* 操作系拡大に伴い80px→90pxへ微調整 */
    border-bottom: 2px solid #e60012; 
  }
  
  .header-inner {
    padding: 0 12px;
    display: block; 
  }

  .header-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .brand-logo-wrapper {
    height: 52px; /* ロゴも微拡大 */
    width: auto;
  }

  .brand-logo-wrapper img {
    max-width: 190px; 
  }

  /* 右側ボタン群 */
  .header-sp-controls {
    display: flex;
    gap: 10px; /* ボタン同士の間隔を広げて誤操作防止 */
    align-items: center;
    z-index: 10005;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  .pc-only { display: none !important; }

  /* --- SP: 新設店舗一覧ドロップダウン構造用設定 --- */
  .sp-store-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 54px;
  }

  /* 【SP店舗ボタン：大型化】 */
  .sp-btn.sp-reserve-accent {
    background: #ffffff;
    color: #1a1a1a !important;
    font-weight: 900;
    font-size: 13px; /* 11px→13px */
    text-decoration: none !important;
    height: 54px;   /* 44px→54pxへ大幅拡大 */
    min-width: 85px; /* 75px→85px */
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid #e60012; /* 境界線を太くして視認性UP */
    transition: 0.3s;
    line-height: 1.1;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }

  /* ハンバーガーメニューが開いている時は、店舗ボタンエリアを非表示化（既存ロジックをコンテナに継承） */
  .header-sp-controls:has(.sp-menu-btn.is-active) .sp-store-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-10px);
    pointer-events: none;
    transition: 0.3s;
  }

  .sp-btn.sp-reserve-accent span {
    font-size: 9px; /* 8px→9px */
    color: #c5a059;
    font-weight: 800;
    margin-top: 2px;
  }

  /* SP用トップレイヤー・ドロップダウンメニュー本体 */
  .sp-store-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    
    right: -60px; /* 右に15pxずらす場合（数値を大きくするほど右にずれます） */
    
    width: 200px;
    background: #ffffff;
    border-top: 3px solid #e60012;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 10010;
    border-radius: 0 0 4px 4px;
    
    /* アニメーション用設定 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-sizing: border-box;
  }

  /* ドロップダウンアクティブ時 */
  .sp-store-dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .sp-store-dropdown-menu li {
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    margin: 0;
    padding: 0;
  }

  .sp-store-dropdown-menu li:last-child {
    border-bottom: none;
  }

  /* ドロップダウン内部リンク (UD基準：誤タップを防ぐ十分なサイズ設定) */
  .sp-store-dropdown-menu a {
    display: block !important;
    padding: 14px 16px !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    
    text-align: center !important;/* left から center に変更し、右側の不自然な大余白を解消します */
    
    line-height: 1.4 !important;
    box-sizing: border-box;
    width: 100%;
    transition: background 0.2s ease;
  }

  .sp-store-dropdown-menu a:active {
    background: #f5f5f5;
    color: #e60012 !important;
  }

  /* 全店舗一覧へ戻る特別導線 */
  .sp-store-dropdown-menu a.all-stores-link {
    background: #f9f9f9;
    text-align: center !important;
    font-size: 13px !important;
    color: #c5a059 !important;
  }

  /* 【ハンバーガーメニュー：大型化】 */
  .sp-menu-btn {
    width: 54px;  /* 44px→54px */
    height: 54px; /* 44px→54px */
    background: #ffffff;
    border: 2px solid #e0e0e0; /* 太く */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px; /* 線同士の間隔を広げる */
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
  }

  .sp-menu-btn .line {
    width: 28px;  /* 20px→28pxへ長く */
    height: 3px;  /* 2px→3pxへ太く：三本線がハッキリ見える */
    background: #1a1a1a;
    transition: 0.4s;
  }

  @media (max-width: 410px) {
    .header-brand {
      left: 15px;
      transform: translateY(-50%);
    }
  }

  /* 【左ズレ・ガタつき完全解消修正】：
      アコーディオン展開時に発生するスクロールバーやはみ出し挙動による横幅の微小なブレを防ぐため、
      overflow-x: hidden; を追加し、メニュー全体の横幅計算が100%に完全ロックされるよう最適化しました */
  .sp-menu {
    display: block;
    position: fixed;
    top: 90px; /* headerの高さに合わせる */
    left: 0;
    width: 100%;
    height: calc(100vh - 90px);
    background: #ffffff;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    overflow-y: scroll; /* autoからscrollへ変更：メニュー開閉時のスクロールバー表示・非表示による画面の「横揺れガタつき」を完全抑制 */
    -webkit-overflow-scrolling: touch; /* iOS Safariでのスクロールの追従性を向上させ、カクつきを排除 */
    overflow-x: hidden; /* スクロールバー生成などによる展開時の全体的な左ズレを強力に防止 */
    box-sizing: border-box;
  }

  .sp-menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* 【ガタつき抑止】：各メニューのaタグ自体の横幅を100%・box-sizing保証とし、外枠の計算を完全に統制 */
  .sp-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px; 
    color: #1a1a1a;
    text-decoration: none !important;
    font-weight: 900;
    font-size: 20px; 
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;
    width: 100%;
  }

  .sp-menu a span {
    font-size: 12px;
    color: #c5a059;
    margin-top: 6px;
    font-weight: 800;
  }

  /* --- SP: アコーディオンメニュー設定（追加修正箇所） --- */
  .sp-has-sub {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  /* 【位置調整修正】：開閉トグルを絶対配置にするための基準点(relative)を付与 */
  .sp-menu-parent {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    box-sizing: border-box;
  }

  /* 【位置調整修正】：右側の独立したボタン領域(80px)と完全に対称になるよう、
      左側にも同一の余白(padding-left: 80px)を設けることで、テキストの完全な画面中央配置を実現 */
  .sp-menu .sp-has-sub .sp-menu-parent a {
    flex-grow: 1;
    border-bottom: none !important; /* コンテナ側で線を引くためクリア */
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
    width: 100%;
  }

  /* 【位置調整修正】：右端に絶対配置(position: absolute)で固定し、
      親のflexbox（中央揃えの挙動）に影響を及ぼさない独立構造へと変更 */
  .sp-submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%; /* 親メニューの高さ（aタグの領域）に完全連動 */
    background: #f9f9f9;
    border: none;
    border-left: 1px solid #f5f5f5;
    cursor: pointer;
    padding: 0;
    z-index: 2; /* タップ操作を確実に最前面に引き出す設定 */
  }

  /* 視認性の高い、太めの開閉矢印アイコン（＞） */
  .sp-submenu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 3px solid #1a1a1a;
    border-right: 3px solid #1a1a1a;
    transform: translate(-50%, -70%) rotate(135deg); /* 初期状態：下向き */
    transition: transform 0.3s ease;
  }

  /* アクティブ（展開時）の矢印反転制御 */
  .sp-submenu-toggle.is-active::after {
    transform: translate(-50%, -30%) rotate(-45deg); /* 展開時：上向き */
  }

  /* 【スクロールバーB完全排除のための修正】：
      初期格納状態（閉じたとき）は overflow: hidden でアニメーションさせつつ、
      展開状態（is-open）の時は overflow: visible !important; へ切り替えることで、
      下層子リスト内部に「スクロールバーB」が絶対に発生しない構造に制御し、
      スクロール処理を外枠の「スクロールバーA（.sp-menu）」へ100%一本化します。 */
  .sp-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f7f7f7;
    max-height: 0;
    overflow: hidden; /* 格納時および展開アニメーション中の切り取り保証 */
    transition: max-height 0.3s ease-out;
    width: 100%;
    box-sizing: border-box;
  }

  /* 【二重スクロールバー根絶修正】
      JSトリガー連動：展開状態。
      高さを400pxなどの固定値で制限するのをやめ、十分な最大高（100vh等、またはJS動的高さ）を許容。
      また、内部のスクロール機構のバグを誘発していた overflow: visible !important を廃止し、
      常に overflow: hidden !important を維持することで、子メニュー内部に第二のスクロールバーが
      発生するのを物理的に100%シャットアウトします。 */
  .sp-submenu.is-open {
    max-height: 100vh; /* 中身の店舗リストが確実にすべて収まる高さを確保し、親要素自体の高さを自然に広げます */
    overflow: hidden !important; /* はみ出しによる多重スクロールのバグを防ぎ、外枠の正規スクロールバー（.sp-menu）1本に完全統合 */
  }

  /* 下層店舗リンクのUD最適化（誤タップを完全に防ぐ縦幅44px以上のレイアウト） */
  .sp-menu .sp-submenu a {
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 700;
    background: transparent;
    border-bottom: 1px solid #eef0f2;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
  }
  
  .sp-menu .sp-submenu li:last-child a {
    border-bottom: none;
  }

  /* アニメーション：大型化に合わせて移動距離を調整 */
  .sp-menu-btn.is-active .line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .sp-menu-btn.is-active .line:nth-child(2) { opacity: 0; }
  .sp-menu-btn.is-active .line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
}