:root{
  --ink:#121417;
  --bg:#f7fafc;
  --card:#ffffff;
  --line:#e7eef5;
  --accent:#0f6ccf;
  --accent2:#ff9b2f;
  --accent3:#0f1724;
  --muted:#5f6470;
  --radius:18px;
  --shadow:0 10px 28px rgba(10,20,40,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Hiragino Kaku Gothic ProN','Noto Sans JP','M PLUS Rounded 1c',sans-serif;color:var(--ink);background:var(--bg);}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px,92%);margin:0 auto}
.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);z-index:50}
.header .nav{display:flex;align-items:center;gap:24px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:.6px;color:var(--accent3)}
.logo-badge{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:white;font-weight:900}
.navlinks{display:flex;flex-wrap:wrap;gap:14px;margin-left:auto}
.navlinks a{padding:8px 12px;border-radius:10px}
.navlinks a.cta{background:var(--accent);color:#fff}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:36px 0 24px}
.hero-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.kicker{font-weight:700;color:var(--accent);font-size:14px;letter-spacing:.3px}
h1{font-size:38px;line-height:1.18;margin:8px 0 6px}
.sub{color:var(--muted);font-size:15px;margin-bottom:14px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 14px;border-radius:12px;font-weight:700}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:#f1f6ff;border:1px solid #d9e8ff;color:#0a4aa3}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.section{padding:24px 0}
.section h2{font-size:24px;margin:0 0 10px}
.section .desc{color:var(--muted);margin:0 0 14px}
.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.vehicle{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.vehicle img{width:100%;height:150px;object-fit:cover;background:#eef3f9}
.vehicle .meta{padding:12px}
.price{font-weight:900;font-size:18px}
.meta small{color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.filter{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
.filter.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.footer{margin-top:36px;background:#0f1724;color:#dfe8ff}
.footer a{color:#dfe8ff}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px;padding:24px 0}
.copy{border-top:1px solid rgba(255,255,255,.08);padding:10px 0;color:#9fb3d9;font-size:12px}
.alert{padding:10px 12px;border-radius:10px;background:#fff7e6;border:1px solid #ffe0b3;color:#8a5200;margin:10px 0}
.notice-list{display:grid;gap:8px}
.notice{padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;gap:10px;align-items:center}
.notice time{color:var(--muted);font-size:12px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.calendar .cell{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center}
.calendar .off{background:#ffeaea;border-color:#ffdcdc;color:#8a0000;font-weight:700}
.kv{width:100%;height:340px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(120deg,rgba(15,108,207,.15),rgba(255,155,47,.18)),url('./assets/img/hero-ev.svg') center/cover no-repeat;box-shadow:var(--shadow)}
@media (max-width:920px){
  .hero{grid-template-columns:1fr;gap:16px}
  h1{font-size:32px}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .navlinks{display:none}
  .footer .cols{grid-template-columns:1fr}
}

/* PMVV blocks */
.pmvv{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.pmvv .p{grid-column:span 12;background:linear-gradient(135deg,rgba(15,108,207,.08),rgba(255,155,47,.08));border:1px dashed var(--line);padding:18px;border-radius:var(--radius)}
.pmvv .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#0f172410;color:#0f1724;font-weight:700;font-size:12px}
.pmvv .k{font-size:12px;color:var(--muted);letter-spacing:.2px}
.pmvv .card h3{display:flex;align-items:center;gap:8px;margin-top:0}
.pmvv .icon{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:#fff;font-weight:900}
.values{display:grid;gap:10px}
.value{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.value b{white-space:nowrap}

.brand-copy{margin:8px 0 6px;font-weight:900;letter-spacing:.02em;color:#0f1724;
  font-size:clamp(18px,3.8vw,26px);}
.brand-copy.subtle{color:#5f6470;font-weight:800;font-size:clamp(16px,3.2vw,22px)}

/* PCレイアウト（横並び） */
.section-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

/* スマホ（768px以下）のとき縦並びに切り替え */
@media (max-width: 768px) {
  .section-container {
    flex-direction: column;
  }
  .section-container > div {
    width: 100%;
  }
}
.menu-close {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-close::before,
.menu-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #333;
  transform-origin: center;
}
.menu-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 共通で縦並びにする場合 */
.grid {
  display: flex;
  flex-direction: column;
  gap: 16px; /* カード間の余白 */
}

/* PCでは横並びに戻したい場合 */
@media (min-width: 992px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* calendar */
.calendar table.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal caption{text-align:left;font-weight:700;margin:0 0 8px}
.cal th,.cal td{border:1px solid var(--line);padding:10px;text-align:center;vertical-align:middle}
.cal thead th{background:#f1f5fb}
.cal .sun{color:#c03636}
.cal .sat{color:#2a57a8}
.cal .closed{background:#ffecec;color:#c00;font-weight:700}
.cal .pad{background:#fafafa;color:#9aa6b2}
.calendar{ display:block; }