/*
  有限会社バイパー ご提案用デモ
  方向: 「黒と赤のガレージ」— 川越で1997年から走り屋文化を支えてきたチューニング専門店の空気を
  白紙から設計。信頼バー→比較カード→FAQの定型は使わない。角丸はほぼ0、罫線と余白で仕切る。
  白紙設計の根拠は design-ref.md を参照。
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root{
  --bg:#0a0c0e;
  --bg-2:#131619;
  --bg-3:#1b1f23;
  --ink:#f3f1ec;
  --ink-soft:#b6bac0;
  --ink-faint:#7d8288;
  --red:#e0132a;
  --red-d:#9c0e1f;
  --amber:#f2a71c;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.24);
  --radius:3px;
  --shadow:0 24px 48px rgba(0,0,0,.5);
  --maxw:1220px;
  --font-head:'Oswald','Noto Sans JP',system-ui,-apple-system,'Hiragino Sans','Yu Gothic',sans-serif;
  --font-body:'Noto Sans JP',system-ui,-apple-system,'Hiragino Sans','Yu Gothic',Meiryo,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.3;margin:0 0 .5em;letter-spacing:.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
.inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ============ デモ帯 ============ */
.demo-bar{background:#3a0b10;color:#ffe2e2;font-size:.86rem;padding:10px 16px}
.demo-bar .inner{display:flex;flex-wrap:wrap;gap:6px 18px;max-width:1300px;align-items:center}
.demo-bar a{color:#ffd7d7;text-decoration:underline}

/* ============ ヘッダー ============ */
.header{
  position:sticky;top:0;z-index:50;
  background:#0a0c0e;border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1300px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:22px;flex-wrap:nowrap;
}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);min-width:0;flex:none}
.brand .logotype{
  font-family:var(--font-head);font-weight:700;font-size:1.5rem;letter-spacing:.06em;
  color:var(--ink);white-space:nowrap;
}
.brand .logotype b{color:var(--red)}
.brand .sub{
  font-size:.76rem;color:var(--ink-soft);white-space:nowrap;letter-spacing:.02em;
}
.gnav{flex:1 1 auto;min-width:0}
.gnav ul{display:flex;gap:26px;flex-wrap:nowrap;justify-content:center}
.gnav a{
  font-size:.94rem;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--ink-soft);
  padding:6px 2px;border-bottom:2px solid transparent;
}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--ink);border-color:var(--red)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.tel-link{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;color:var(--ink);line-height:1.25}
.tel-link b{font-family:var(--font-head);font-size:1.15rem;font-weight:600;white-space:nowrap}
.tel-link small{font-size:.76rem;color:var(--ink-soft);white-space:nowrap}
.btn-head{
  white-space:nowrap;background:var(--red);color:#fff;font-weight:700;font-size:.92rem;
  padding:11px 18px;border-radius:var(--radius);text-decoration:none;border:1px solid var(--red);
}
.btn-head:hover{background:var(--red-d);border-color:var(--red-d)}
.nav-toggle{
  display:none;flex:none;width:42px;height:38px;border:1px solid var(--line-strong);background:transparent;
  border-radius:var(--radius);position:relative;cursor:pointer;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:9px;right:9px;height:2px;background:var(--ink);
}
.nav-toggle span{top:18px}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}

/* 901〜1300px 帯: フルナビのまま詰める（KB-018） */
@media (min-width:961px) and (max-width:1300px){
  .header-inner{gap:14px;padding:12px 16px}
  .brand .sub{display:none}
  .gnav ul{gap:14px}
  .gnav a{font-size:.86rem}
  .tel-link small{display:none}
  .btn-head{padding:9px 13px;font-size:.84rem}
}

/* ハンバーガーへ切替（960px以下） */
@media (max-width:960px){
  .gnav{
    position:fixed;inset:0;top:0;background:#0a0c0eee;
    display:block;overflow-y:auto;padding:88px 26px 40px;
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
    flex:none;
  }
  .gnav.open{opacity:1;visibility:visible}
  .gnav ul{flex-direction:column;gap:0;min-height:100%;justify-content:center;align-items:stretch}
  .gnav li{border-bottom:1px solid var(--line)}
  .gnav a{display:block;padding:16px 4px;font-size:1.1rem;color:var(--ink)}
  .header-actions{gap:10px}
  .btn-head{display:none}
  .tel-link small{display:none}
  .brand .sub{display:none}
  .nav-toggle{display:block}
  body.nav-open{overflow:hidden}
}
@media (max-width:480px){
  .header-inner{padding:11px 14px;gap:10px}
  .brand .logotype{font-size:1.28rem}
  .tel-link b{font-size:1rem}
}

/* ============ ヒーロー ============ */
.hero{position:relative;background:var(--bg-2);overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(6,7,8,.94) 0%,rgba(6,7,8,.82) 38%,rgba(6,7,8,.42) 72%,rgba(6,7,8,.72) 100%);
}
.hero-copy{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:72px 24px 58px;min-height:min(58vh,520px);
  display:flex;flex-direction:column;justify-content:center;
}
.eyebrow{
  display:inline-block;font-family:var(--font-head);font-size:.82rem;font-weight:600;
  letter-spacing:.16em;color:var(--red);margin-bottom:14px;
}
.hero h1{font-size:2.5rem;color:#fff;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lead{font-size:1.08rem;color:#e7e5e0;max-width:52ch;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:var(--radius);
  font-weight:700;font-size:1rem;text-decoration:none;white-space:normal;border:1px solid transparent;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff}
@media (max-width:720px){
  .hero-copy{padding:52px 20px 40px;min-height:56vh}
  .hero h1{font-size:1.86rem}
}

/* 斜めのレーシングストライプ区切り（装飾。CSSのみ） */
.stripe{
  height:10px;
  background:repeating-linear-gradient(-45deg,var(--red) 0 18px,#000 18px 36px);
}

/* ============ 信頼帯 ============ */
.stats{background:var(--bg-2);border-bottom:1px solid var(--line)}
.stats .grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.stat{padding:26px 22px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat dt{font-family:var(--font-head);font-size:.78rem;letter-spacing:.08em;color:var(--red);font-weight:600;margin-bottom:6px}
.stat dd{margin:0;font-size:1.16rem;font-weight:700;color:var(--ink)}
.stat dd small{display:block;font-size:.78rem;font-weight:400;color:var(--ink-soft);margin-top:4px}
@media (max-width:900px){
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:none;border-top:1px solid var(--line)}
  .stat:nth-child(1),.stat:nth-child(2){border-top:none}
  .stat:nth-child(even){border-left:1px solid var(--line)}
}

/* ============ 共通セクション ============ */
.section{padding:64px 0}
.section.soft{background:var(--bg-2)}
.section.dark{background:#000}
.section-head{max-width:640px;margin:0 0 34px}
.section-head .eyebrow{margin-bottom:10px}
.section-head h2{font-size:1.9rem;color:#fff}
.section-head p{color:var(--ink-soft);margin:10px 0 0}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ============ カードグリッド（サービス入口） ============ */
.entry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.entry-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s ease,transform .15s ease;
}
.entry-card:hover{border-color:var(--red);transform:translateY(-2px)}
.entry-card .num{font-family:var(--font-head);color:var(--red);font-weight:700;font-size:.85rem;letter-spacing:.08em}
.entry-card h3{font-size:1.12rem;margin:0}
.entry-card p{color:var(--ink-soft);font-size:.92rem;margin:0}
.entry-card .go{margin-top:auto;font-size:.86rem;color:var(--red);font-weight:700}
@media (max-width:960px){.entry-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.entry-grid{grid-template-columns:1fr}}

/* ============ 実績・メディア ============ */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.media-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--bg-3);
  text-align:center;
}
.media-card .ph{
  aspect-ratio:3/4;background:#0f1215;border:1px dashed var(--line-strong);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:.82rem;
  margin-bottom:12px;padding:10px;
}
.media-card h4{font-size:1rem;margin:0}
@media (max-width:720px){.media-grid{grid-template-columns:1fr}}

/* ============ 写真つき split ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split.rev .photo{order:2}
.split .photo{min-width:0}
.split .photo img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.split h2{font-size:1.7rem;color:#fff}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:22px}
  .split.rev .photo{order:0}
}

/* ============ 汎用カード ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card h3{font-size:1.08rem;color:#fff}
.card p{color:var(--ink-soft);margin:0 0 .6em;font-size:.95rem}
.card p:last-child{margin-bottom:0}
@media (max-width:820px){.cards{grid-template-columns:1fr}}

/* ============ サービス詳細ブロック ============ */
.svc-block{border-top:1px solid var(--line);padding:44px 0}
.svc-block:first-of-type{border-top:none}
.svc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:18px}
.svc-head h2{font-size:1.5rem;color:#fff;margin:0}
.price-chip{
  display:inline-block;background:var(--red);color:#fff;font-family:var(--font-head);font-weight:600;
  font-size:.92rem;padding:6px 14px;border-radius:var(--radius);white-space:nowrap;
}
.svc-body{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:start}
.svc-list{margin:0;padding:0}
.svc-list li{
  position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--line);font-size:.98rem;color:var(--ink);
}
.svc-list li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:2px;background:var(--red)}
.svc-list li small{display:block;color:var(--ink-soft);font-size:.85rem;margin-top:3px}
.svc-photo img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
@media (max-width:820px){.svc-body{grid-template-columns:1fr}}

/* ============ 表 ============ */
.tbl-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border:1px solid var(--line);border-radius:var(--radius);
}
.tbl{width:100%;min-width:520px;border-collapse:collapse;font-size:.94rem}
.tbl caption{caption-side:top;text-align:left;padding:14px 16px;color:var(--ink-soft);font-size:.85rem}
.tbl th,.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl thead th{background:var(--bg-3);color:var(--ink-soft);font-weight:600;font-size:.84rem}
.tbl tbody tr:last-child td{border-bottom:none}
.note{font-size:.86rem;color:var(--ink-soft);margin-top:10px}

/* ============ プレースホルダ ============ */
.ph-box{
  background:#0f1215;border:1px dashed var(--line-strong);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:.9rem;
  text-align:center;padding:20px;min-height:180px;
}

/* ============ 中古車カード ============ */
.car-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.car-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.car-card .ph-box{min-height:190px;border-radius:0;border:none;border-bottom:1px solid var(--line)}
.car-card .body{padding:18px}
.car-card h3{font-size:1.02rem;margin:0 0 8px}
.car-spec{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:.86rem;color:var(--ink-soft);margin:0}
.car-spec dt{color:var(--ink-faint)}
.car-spec dd{margin:0;color:var(--ink)}
@media (max-width:820px){.car-grid{grid-template-columns:1fr}}

/* ============ SNSバー ============ */
.sns-band{background:var(--bg-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.sns-band .inner{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;justify-content:space-between}
.sns-band h3{margin:0;font-size:1.02rem;color:#fff}
.sns-links{display:flex;flex-wrap:wrap;gap:10px}
.sns-links a{
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:9px 16px;text-decoration:none;
  color:var(--ink);font-size:.9rem;white-space:nowrap;
}
.sns-links a:hover{border-color:var(--red);color:#fff}

/* ============ CTA帯 ============ */
.cta-band{background:linear-gradient(120deg,#3a0a12,#150607);text-align:center;padding:58px 0}
.cta-band h2{color:#fff;font-size:1.7rem}
.cta-band p{color:#f1cfd2;max-width:52ch;margin:0 auto 26px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============ フォーム ============ */
.form{max-width:640px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:.94rem}
.field .req{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;color:#fff;background:var(--red);padding:2px 8px;border-radius:var(--radius)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--bg-2);color:var(--ink);font:inherit;font-size:1rem;
}
.field textarea{min-height:140px;resize:vertical}
.form-note{font-size:.85rem;color:var(--ink-soft)}
.btn-submit{
  background:var(--red);color:#fff;border:1px solid var(--red);padding:15px 30px;border-radius:var(--radius);
  font-weight:700;font-size:1.02rem;cursor:pointer;
}
.btn-submit:hover{background:var(--red-d);border-color:var(--red-d)}
.note-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:20px;margin-top:24px}
.note-box h3{margin:0 0 8px;font-size:1rem;color:#fff}
.note-box p{margin:0;color:var(--ink-soft);font-size:.92rem}

/* ============ 地図 ============ */
.map-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2)}
.map-wrap iframe{display:block;width:100%;height:340px;border:0}

/* ============ フッター ============ */
.footer{background:#000;padding:52px 0 30px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px;margin-bottom:30px}
.footer h3{color:#fff;font-size:1.02rem;margin:0 0 12px}
.footer p{color:var(--ink-soft);font-size:.92rem;margin:0 0 8px}
.footer ul li{margin-bottom:8px}
.footer ul a{color:var(--ink-soft);text-decoration:none;font-size:.92rem}
.footer ul a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:20px;color:var(--ink-faint);font-size:.8rem;line-height:1.7;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;gap:26px}}

/* ============ スマホ固定バー ============ */
.sp-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  border-top:1px solid var(--line-strong);background:#0a0c0e;
}
.sp-bar .row{display:grid;grid-template-columns:1fr 1fr}
.sp-bar a{
  display:flex;align-items:center;justify-content:center;padding:14px 8px;text-decoration:none;
  font-weight:700;font-size:.94rem;white-space:nowrap;
}
.sp-bar a:first-child{background:var(--bg-2);color:#fff;border-right:1px solid var(--line-strong)}
.sp-bar a:last-child{background:var(--red);color:#fff}
@media (max-width:720px){
  .sp-bar{display:block}
  body{padding-bottom:64px}
}

/* ============ ページ見出し帯（下層ページ） ============ */
.page-head{position:relative;background:var(--bg-2);overflow:hidden}
.page-head>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.32}
.page-head::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(8,9,10,.82)}
.page-head-copy{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:50px 24px}
.page-head h1{color:#fff;font-size:2rem;margin-bottom:8px}
.page-head p{color:var(--ink-soft);max-width:60ch;margin:0}
@media (max-width:640px){.page-head-copy{padding:38px 20px}.page-head h1{font-size:1.6rem}}

/* ============ アンカー調整（stickyヘッダー分） ============ */
[id]{scroll-margin-top:88px}