/* 店名 サイト共通スタイル
 * レイアウトと見た目は、各ページのインライン style(デザインの書き出しそのまま)が担当します。
 * このファイルは次の4つだけを持ちます。
 *   1. 土台(フォント・リンク色・アニメーション)
 *   2. ホバー時の色(hv-* クラス)
 *   3. メニュー・スマホ用の固定バーなど、共通部品
 *   4. スマホ・タブレット表示(1023px以下)の上書き
 */

/* ---- 1. 土台 ---- */
body { margin: 0; background: #fff; font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #12305C; text-decoration: none; }
a:hover { color: #0B2244; }
[hidden] { display: none !important; }
@keyframes dcMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 1024px) {
  body { min-width: 1024px; }
}

/* ---- 2. ホバー ---- */
.hv-bd-d0121b:hover { border-color: #D0121B !important; }
.hv-bg-b01015:hover { background: #B01015 !important; }
.hv-bd-333:hover { border-color: #333 !important; }
.hv-fg-fff:hover { color: #fff !important; }
.hv-bg-f4f4f4:hover { background: #F4F4F4 !important; }

/* ---- 3. 共通部品 ---- */
/* よくある質問(開閉) */
details > summary::-webkit-details-marker { display: none; }
details > summary:focus-visible { outline: 2px solid #D0121B; outline-offset: 2px; }
details > summary > span[aria-hidden] { transition: transform .2s; }
details[open] > summary > span[aria-hidden] { transform: rotate(45deg); }

.x-menu-btn:focus-visible, .sp-menu a:focus-visible, .sp-menu button:focus-visible { outline: 2px solid #D0121B; outline-offset: 2px; }

/* 全画面メニュー */
.sp-menu { position: fixed; inset: 0; z-index: 1000; background: #222; color: #fff; overflow-y: auto; padding: 0 24px calc(32px + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; flex-direction: column; }
.is-menu-open, .is-menu-open body { overflow: hidden; }
.sp-menu a { color: #fff; }
.sp-menu-head { height: 88px; display: flex; align-items: center; justify-content: space-between; flex: none; }
.sp-menu-logo { display: flex; align-items: center; gap: 14px; font: 900 22px "Zen Kaku Gothic New", sans-serif; letter-spacing: .06em; }
.sp-logo-box { width: 44px; height: 44px; border: 1px dashed rgba(255,255,255,.4); border-radius: 4px; display: flex; align-items: center; justify-content: center; font: 500 9px ui-monospace, Menlo, monospace; color: #aaa; }
.sp-menu-close { width: 64px; height: 64px; border: 0; background: transparent; color: #fff; cursor: pointer; position: relative; margin-right: -12px; }
.sp-menu-close span { position: absolute; left: 50%; top: 24px; width: 28px; height: 1.5px; margin-left: -14px; background: #fff; transform: rotate(45deg); }
.sp-menu-close span + span { transform: rotate(-45deg); }
.sp-menu-close em { position: absolute; left: 0; right: 0; bottom: 10px; font: 500 10px "Zen Kaku Gothic New", sans-serif; font-style: normal; }
.sp-menu-nav { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.15); width: 100%; max-width: 720px; margin: 8px auto 0; }
.sp-menu-nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 4px; border-bottom: 1px solid rgba(255,255,255,.15); font: 700 18px "Zen Kaku Gothic New", sans-serif; letter-spacing: .08em; }
.sp-menu-nav small { font: 500 13px Jost, sans-serif; color: rgba(255,255,255,.55); letter-spacing: .04em; }
.sp-menu-sub { display: flex; flex-wrap: wrap; gap: 4px 24px; width: 100%; max-width: 720px; margin: 24px auto 0; }
.sp-menu-sub a { font: 400 14px/2.4 "Zen Kaku Gothic New", sans-serif; color: rgba(255,255,255,.75); }
.sp-menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 720px; margin: auto auto 0; padding-top: 32px; }
.sp-menu-cta a { min-height: 56px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 16px "Zen Kaku Gothic New", sans-serif; letter-spacing: .06em; text-align: center; }
.sp-menu-cta small { font: 500 11px Jost, sans-serif; opacity: .8; margin-top: 2px; }
.sp-menu-cta .is-tel { grid-column: 1 / -1; background: #5C5C5C; min-height: 64px; }
.sp-menu-cta .is-line { background: #06C755; }
.sp-menu-cta .is-reserve { background: #D0121B; }

/* スマホだけで使う部品(PCでは非表示) */
.sp-tel, .sp-bar, .sp-filter-toggle { display: none; }

/* ---- 4. スマホ・タブレット(1023px以下) ---- */
/* デザインはPC版(1440px)のみのため、ここは DESIGN.md の「スマホ設計の要点」に沿った簡易対応です。
 * インラインの指定を上書きするため !important を使い、[style*="…"] で書き出しの指定値を狙っています。 */
@media (max-width: 1023px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .x-page { width: auto !important; overflow-x: clip; }
  img { max-width: 100%; }

  /* 共通:コンテナ幅・固定幅・余白 */
  [style*="width:1200px"], [style*="width:1300px"] { width: auto !important; margin-left: 24px !important; margin-right: 24px !important; }
  [style*="width:1300px"] { margin-left: 0 !important; margin-right: 0 !important; }
  [style*="width:520px"], [style*="width:560px"], [style*="width:420px"], [style*="width:360px"], [style*="width:380px"], [style*="width:280px"] { width: auto !important; max-width: 100%; }
  [style*="max-width:520px"] { max-width: 100% !important; }
  [style*="padding:120px 0"], [style*="padding:110px 0"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [style*="padding:200px 0 110px"] { padding-top: 140px !important; padding-bottom: 80px !important; }
  [style*="padding:80px 0 120px"], [style*="padding:72px 0 100px"] { padding-top: 48px !important; padding-bottom: 80px !important; }

  /* 共通:グリッドは1列に。小さいタイルは2列に */
  [style*="display:grid"][style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="display:grid"]:is([style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns:repeat(4,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:1fr 1fr;gap:8px"], [style*="grid-template-columns:1fr 1fr;gap:12px"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="display:grid"]:is([style*="grid-template-columns:repeat(3,1fr);gap:6px"], [style*="grid-template-columns:1fr 1fr 1fr;gap:8px"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="gap:88px"], [style*="gap:80px"], [style*="gap:60px"], [style*="gap:56px"], [style*="gap:48px"] { gap: 32px !important; }
  /* 表形式の行(料金表・スペック表)は横スクロールの枠に */
  [style*="display:grid"][style*="grid-template-columns:1.3fr 1fr 1fr"] { grid-template-columns: 1.3fr 1fr 1fr !important; min-width: 480px; }
  [style*="display:grid"][style*="grid-template-columns:1.4fr 1.6fr 1fr 1fr"] { grid-template-columns: 1.4fr 1.6fr 1fr 1fr !important; min-width: 600px; }
  [style*="background:#fff;border-radius:4px"]:has(> [style*="grid-template-columns:1.3fr"]),
  [style*="background:#fff;border-radius:4px"]:has(> [style*="grid-template-columns:1.4fr"]) { overflow-x: auto; }
  /* 見出し行・ラベル+値の行は必要に応じて折り返す */
  [style*="display:flex;align-items:flex-end;justify-content:space-between"], [style*="display:flex;justify-content:space-between;align-items:flex-end"] { flex-direction: column; align-items: flex-start !important; gap: 24px !important; }
  [style*="display:flex;align-items:center;gap:24px;margin-top:40px"] { flex-direction: column; align-items: stretch !important; }
  [style*="display:flex;justify-content:space-between;align-items:center"], [style*="display:flex;align-items:center;justify-content:space-between"],
  [style*="display:flex;gap:10px;align-items:center"], [style*="display:flex;gap:20px;margin-top:14px"] { flex-wrap: wrap; gap: 16px !important; }
  [style*="grid-template-columns:260px 1fr"] label, [style*="grid-template-columns:260px 1fr"] > div:first-child { padding: 14px 20px !important; }
  [style*="grid-template-columns:260px 1fr"] > div:last-child { padding: 16px 20px !important; }

  /* 文字サイズ(DESIGN.md のスマホ用スケール) */
  [style*="font:900 64px"] { font-size: 36px !important; }
  [style*="font:900 44px"] { font-size: 30px !important; }
  [style*="font:700 32px/1.45"] { font-size: 28px !important; }
  [style*="font:900 56px"], [style*="font:900 40px"] { font-size: 32px !important; }
  [style*="font:900 36px"], [style*="font:900 34px"], [style*="font:900 30px"] { font-size: 24px !important; }
  [style*="font:600 56px"] { font-size: 40px !important; }
  [style*="font:600 52px"] { font-size: 36px !important; }
  [style*="font:600 240px"], [style*="font:600 200px"], [style*="font:600 140px"] { font-size: 110px !important; }

  /* 流れる英字 */
  [style*="animation:dcMarq"], [style*="animation: dcMarq"] { font-size: 72px !important; }
  [aria-hidden="true"][style*="padding-top:100px"] { padding-top: 56px !important; }

  /* 横に並ぶ写真の列(サービス写真・選ばれる理由)は横スクロール */
  [style*="display:flex;margin-top:64px;padding-left:120px"], [style*="display:flex;margin:48px 0 0 120px"] { overflow-x: auto; padding-left: 24px !important; margin-left: 0 !important; scroll-snap-type: x mandatory; scrollbar-width: none; }
  [style*="display:flex;margin-top:64px;padding-left:120px"] > *, [style*="display:flex;margin:48px 0 0 120px"] > * { width: 70vw !important; scroll-snap-align: start; }
  [style*="display:flex;margin-top:64px;padding-left:120px"] { transform: translateY(56px) !important; }

  /* 修理前後の比較(修理後の面の中身は幅を固定しない) */
  [data-b~="ba1w"] > div, [data-b~="ba2w"] > div { width: calc(100vw - 48px) !important; }

  /* ヘッダー(下層ページ) */
  .x-band { padding: 0 0 0 24px !important; }
  .x-header { height: 60px !important; margin-left: -24px; }
  .x-header > a { padding: 0 16px !important; gap: 10px !important; }
  .x-header > a > span:first-child { width: 36px !important; height: 36px !important; }
  .x-header > a > span:nth-child(2) { font-size: 18px !important; }
  .x-header > a > span:nth-child(3), .x-header > div > div:first-child { display: none !important; }
  .x-menu-btn { width: 60px !important; }
  /* ページタイトル帯 */
  .x-title { height: 220px !important; }
  .x-title > div:last-child { left: 24px !important; right: 24px !important; top: 44px !important; }
  .x-title > div:last-child > div:first-child { width: auto !important; margin-bottom: 16px !important; }
  .x-title > div:last-child > div:last-child { margin-top: 20px !important; flex-wrap: wrap; }
  .x-title [style*="font:500 18px Jost"] { font-size: 15px !important; }

  /* TOPのヒーロー */
  [style*="background:#C4121A;padding:0 40px;height:900px"] { height: auto !important; }
  [style*="background:#C4121A;padding:0 40px;height:900px"] { padding-top: 60px !important; }
  .x-hero { height: calc(72svh - 60px) !important; min-height: 480px; border-radius: 0 0 0 24px; }
  .x-logo-tab { left: 0 !important; height: 60px !important; border-radius: 0 !important; padding: 0 16px !important; gap: 10px !important; }
  .x-logo-tab > span:first-child { width: 36px !important; height: 36px !important; }
  .x-logo-tab > span:nth-child(2) { font-size: 18px !important; }
  .x-logo-tab > span:nth-child(3) { display: none; }
  .x-hero-nav { right: 0 !important; height: 60px !important; color: #222 !important; left: 0; justify-content: flex-end; background: #fff; z-index: 2 !important; }
  .x-hero-nav > div:first-child { display: none !important; }
  .x-hero-nav .x-menu-btn { width: 60px !important; background: #333; border-left: 0 !important; color: #fff; }
  /* キャッチはヒーロー写真の左下に(ヒーローの高さ = max(480px, 72svh - 60px)、上に60pxのヘッダー) */
  .x-catch { left: 48px !important; right: 24px; bottom: auto !important; top: calc(60px + max(480px, 72svh - 60px) - 32px); transform: translateY(-100%); gap: 12px !important; }
  .x-catch [style*="font:500 20px Jost"] { font-size: 16px !important; }
  .x-catch > div:last-child { flex-wrap: wrap; }
  .x-catch [style*="width:420px;height:2px"] { width: 140px !important; }
  .x-dock { position: relative !important; right: auto !important; width: auto !important; border-radius: 0 !important; margin: 0; padding: 20px 24px 28px 0 !important; background: #fff !important; box-shadow: -24px 0 0 #C4121A; }

  /* TOP:お知らせ帯・採用 */
  [style*="background:#F4F4F4;display:flex;align-items:center;gap:20px;padding:0 80px;height:64px"] { height: auto !important; padding: 16px 24px !important; flex-wrap: wrap; gap: 8px 12px !important; }
  [style*="background:#F4F4F4;display:flex;align-items:center;gap:20px;padding:0 80px;height:64px"] > span:last-child { margin-left: 0 !important; }
  [style*="background:#F4F4F4;padding:100px 80px 180px 120px"] { padding: 72px 24px 96px !important; }
  [style*="margin:120px 0 -160px -40px"] { margin: -48px 0 -80px 48px !important; }
  a[style*="border-radius:9999px;background:#333"] { white-space: nowrap; }

  /* ページ内タブ(私たちについて・会社案内):英字を隠して1行に */
  [style*="border-bottom:1px solid #DDD"] > [style*="margin:0 auto;display:flex"] > a { height: 56px !important; font-size: 13px !important; letter-spacing: 0 !important; padding: 0 4px; text-align: center; }
  [style*="border-bottom:1px solid #DDD"] > [style*="margin:0 auto;display:flex"] > a > span[style*="Jost"] { display: none; }
  [style*="border-bottom:1px solid #DDD"] > [style*="margin:0 auto;display:flex"] { margin: 0 !important; }
  /* 手順(流れ)は縦に並べる */
  [style*="display:grid"][style*="repeat("][style*="background:#fff;border:1px solid #DDD"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="display:grid"][style*="repeat("][style*="background:#fff;border:1px solid #DDD"] > * { border-right: 0 !important; border-bottom: 1px solid #DDD; padding: 24px 24px 28px !important; }
  [style*="display:grid"][style*="repeat("][style*="background:#fff;border:1px solid #DDD"] > :last-child { border-bottom: 0; }
  /* 採用:写真の上の見出し */
  [style*="position:absolute;left:80px;bottom:80px"] { left: 24px !important; right: 24px; bottom: 32px !important; }

  /* 在庫車カード:狭い画面では1列 */
  @media (max-width: 599px) {
    [style*="display:grid"]:is([style*="grid-template-columns:repeat(4,minmax(0,1fr))"], [style*="grid-template-columns:repeat(3,minmax(0,1fr))"]) { grid-template-columns: minmax(0, 1fr) !important; }
  }

  /* お問い合わせ(写真の上に情報を縦積み)とフッター */
  .x-contact { margin-top: 120px !important; }
  .x-contact[style*="margin-top:0"] { margin-top: 0 !important; }
  .x-contact-photo { height: auto !important; margin: 0 16px !important; border-radius: 0 0 0 24px !important; }
  .x-contact-photo > img { position: absolute; inset: 0; }
  .x-contact-photo > img + div { background: rgba(21,24,29,.74) !important; }
  .x-contact-body { position: relative !important; padding: 56px 24px !important; gap: 40px !important; }
  .x-contact-body > div:last-child { padding-left: 0 !important; }
  .x-contact-body [style*="display:flex;gap:56px"] { margin-top: 32px !important; gap: 32px !important; flex-wrap: wrap; }
  .x-footer { margin-top: -160px !important; padding-top: 220px !important; padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important; }
  .x-footer [style*="margin:56px auto 0"] { flex-direction: column; align-items: flex-start !important; gap: 20px; }

  /* 右下の相談ボタンの代わりに、下部固定バーを出す */
  .x-fab { display: none !important; }
  .sp-bar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 12px 32px rgba(18,48,92,.18); }
  .sp-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font: 700 13px "Zen Kaku Gothic New", sans-serif; letter-spacing: .06em; }
  .sp-bar .is-tel { background: #333; }
  .sp-bar .is-line { background: #06C755; }
  .sp-bar .is-reserve { background: #D0121B; }
  .sp-tel { display: flex; position: absolute; top: 10px; right: 72px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: #F4F4F4; color: #D0121B; align-items: center; justify-content: center; }

  /* 在庫車一覧:絞り込みは開閉式 */
  aside[style*="position:sticky"] { position: static !important; display: none !important; }
  aside[style*="position:sticky"].is-open { display: flex !important; }
  .sp-filter-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 1.5px solid #333; border-radius: 8px; background: #fff; color: #222; font: 700 15px "Zen Kaku Gothic New", sans-serif; letter-spacing: .06em; cursor: pointer; }
  .sp-filter-toggle[aria-expanded="true"] { background: #222; color: #fff; }
  [style*="position:sticky"] { position: static !important; }
}
@media (max-width: 767px) {
  [style*="grid-template-columns:repeat(4,1fr)"][style*="gap:32px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}