/* ===================================================
   楽レン RENT A CAR — 本番用スタイル
   ベース：Claude Design 版（BtoB clean redesign）
   追加：モバイルナビ／固定連絡バー／車両写真枠／料金ページのレスポンシブ
=================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
strong, b { font-weight: 600; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #14293D; outline-offset: 2px; border-radius: 2px; }

:root{
  --navy: #14293D;
  --navy-deep: #0A1826;
  --steel: #5C6B7A;
  --steel-light: #8A97A3;
  --paper: #F6F7F5;
  --white: #FFFFFF;
  --line: #DFE3E2;
  --red: #A8353C;                 /* oklch 非対応ブラウザ向けフォールバック */
  --red: oklch(0.48 0.13 24);
  --red-soft: #F3E1E2;
  --red-soft: oklch(0.94 0.03 24);
  --line-green: #06C755;
  --navy-soft: #EAEFF3;

  --font-display: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-data: "Roboto Mono", "Zen Kaku Gothic New", monospace;

  --radius: 4px;
}

body{
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap{ width: min(1180px, 100% - 80px); margin-inline: auto; }

h1,h2,h3{ font-family: var(--font-display); letter-spacing: -.01em; }
h1{ font-weight: 900; }
h2,h3{ font-weight: 700; }

.section{ padding: 112px 0; }
.section-kicker{
  font-family: var(--font-data);
  color: var(--steel);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-bottom: 16px;
  display: inline-block;
}
.section h2{ font-size: clamp(28px, 3vw, 38px); line-height: 1.4; color: var(--navy); }
.section-heading p{ color: var(--steel); font-size: 15px; margin-top: 14px; max-width: 46em; }
.centered{ text-align: center; margin-inline: auto; }
.centered p{ margin-inline: auto; }

/* ---------- skip link ---------- */
.skip-link{ position:absolute; left:8px; top:-48px; z-index:100; background: var(--navy); color:#fff; padding:10px 14px; border-radius: var(--radius); font-size:13px; font-weight:700; }
.skip-link:focus{ top:8px; }

/* ---------- announce bar ---------- */
.announce{ background: var(--navy-deep); color: #C9D4DC; font-family: var(--font-body); font-weight:500; font-size: 12px; letter-spacing: .04em; }
.announce-inner{ display:flex; justify-content:center; align-items:center; gap:22px; min-height:36px; flex-wrap:wrap; }
.announce-separator{ width:1px; height:11px; background:#3A4A58; }

/* ---------- header ---------- */
.site-header{ position: sticky; top:0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner{ display:flex; align-items:center; gap: 32px; height: 84px; }
.brand{ flex-shrink:0; display:inline-flex; align-items:center; }
.brand-logo{ width:172px; height:56px; object-fit:contain; object-position:left center; }
.main-nav{ display:flex; align-items:center; gap:30px; margin-left:auto; font-size:13.5px; font-weight:500; }
.main-nav a{ position:relative; padding-bottom:4px; transition:color .15s; }
.main-nav a:hover{ color: var(--red); }
.header-phone{ display:flex; flex-direction:column; padding-left:26px; border-left:1px solid var(--line); line-height:1.3; }
.header-phone small{ color: var(--steel); font-size:10.5px; font-weight:500; }
.header-phone strong{ font-family: var(--font-data); font-size:16px; font-weight:700; }
.btn{ display:inline-flex; align-items:center; justify-content:center; font-weight:700; border-radius: var(--radius); transition: background .15s, box-shadow .15s; }
.btn-line{ background: var(--line-green); color:#fff; }
.btn-line:hover{ background:#05b34c; }
.header-line{ flex-direction:row; align-items:center; gap:10px; min-width:176px; height:50px; padding:6px 14px; }
.header-line-icon{ width:30px; height:30px; border-radius:7px; flex-shrink:0; object-fit:contain; }
.header-line-text{ display:flex; flex-direction:column; line-height:1.2; }
.header-line-text small{ font-size:9px; letter-spacing:.06em; opacity:.9; }
.header-line-text strong{ font-size:12.5px; margin-top:2px; }

/* ハンバーガー（980px以下で表示） */
.nav-toggle{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius: var(--radius); flex-direction:column; align-items:center; justify-content:center; gap:5px; flex-shrink:0; background:#fff; }
.nav-toggle span{ display:block; width:18px; height:2px; background: var(--navy); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ background: var(--paper); border-bottom:1px solid var(--line); }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:76px; align-items:center; min-height: 620px; padding-block: 84px; }
.eyebrow{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color: var(--red); letter-spacing:.04em; }
.eyebrow span{ width:26px; height:2px; background: var(--red); display:block; }
.hero h1{ font-size: clamp(40px,4.4vw,58px); line-height:1.3; margin: 20px 0 20px; color: var(--navy); }
.hero h1 em{ font-style:normal; color: var(--red); }
.hero-lead{ font-size:16.5px; color: var(--steel); font-weight:500; line-height:1.9; }
.hero-actions{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.btn-large{ min-height:60px; padding:0 26px; }
.btn-primary{ background: var(--line-green); color:#fff; }
.btn-primary:hover{ background:#05b34c; }
.line-hero-cta{ min-width: 340px; justify-content:flex-start; padding: 10px 20px; }
.line-badge{ width:44px; height:44px; border-radius:10px; object-fit:contain; flex-shrink:0; }
.line-cta-copy{ display:flex; flex-direction:column; margin-left:14px; line-height:1.2; text-align:left; }
.line-cta-copy small{ font-size:10.5px; opacity:.9; letter-spacing:.05em; }
.line-cta-copy strong{ font-size:18px; margin-top:4px; }
.cta-arrow{ margin-left:auto; font-size:20px; }
.btn-ghost{ background:#fff; border:1px solid var(--line); color: var(--navy); }
.btn-ghost:hover{ border-color: var(--navy); }
.hero-points{ display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; font-size:13px; font-weight:500; color: var(--navy); }
.hero-points i{ font-style:normal; color: var(--line-green); font-weight:700; margin-right:5px; }

/* ---------- signature: hero fleet visual ---------- */
.hero-visual{ height:480px; position:relative; }
.visual-sun{ position:absolute; top:6%; right:5%; width:280px; height:280px; border-radius:50%; background: var(--navy); opacity:.06; }
.visual-card{ position:absolute; border-radius:8px; box-shadow: 0 10px 28px rgba(20,41,61,.08); }
.main-card{ inset:28px 32px 44px 48px; background:#fff; border:1px solid var(--line); padding:22px 26px; color: var(--navy); overflow:hidden; }
.visual-head{ display:flex; justify-content:space-between; font-family: var(--font-data); font-size:9px; letter-spacing:.16em; color: var(--steel); font-weight:700; }
.hero-official-logo{ width:86%; height:auto; margin:22px auto 0; display:block; object-fit:contain; }
.fleet-labels{ display:flex; gap:8px; margin-top:20px; }
.fleet-labels span{ font-family: var(--font-data); font-size:9px; letter-spacing:.1em; color: var(--navy); border:1px solid var(--line); border-radius:3px; padding:6px 8px; }
.road-lines{ position:absolute; left:50%; bottom:26px; display:flex; gap:12px; transform: skew(-24deg); }
.road-lines span{ width:70px; height:4px; background: var(--line); display:block; }
.area-card{ width:150px; min-height:136px; padding:18px; top:-6px; right:-8px; background:#fff; border:1px solid var(--line); }
.speed-card{ width:146px; min-height:128px; padding:18px; bottom:-6px; left:-6px; background: var(--navy); color:#fff; }
.mini-label{ display:block; font-size:9px; letter-spacing:.14em; font-weight:700; color: var(--steel); }
.speed-card .mini-label{ color: rgba(255,255,255,.75); }
.visual-card strong{ display:block; margin-top:10px; font-size:20px; line-height:1.3; }
.area-dot{ position:absolute; bottom:16px; right:18px; width:11px; height:11px; border-radius:50%; background: var(--navy); box-shadow: 0 0 0 6px var(--navy-soft); }
.speed-arrow{ position:absolute; bottom:12px; right:16px; font-size:24px; color:#fff; }
.hero-note{ position:absolute; right:20px; bottom:0; writing-mode:vertical-rl; font-size:10px; letter-spacing:.2em; color: var(--steel); font-weight:700; }

/* ---------- trust strip ---------- */
.trust-strip{ background: var(--navy); color:#fff; }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); }
.trust-grid > div{ padding: 24px 30px; min-height: 96px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid rgba(255,255,255,.12); }
.trust-grid > div:first-child{ border-left:1px solid rgba(255,255,255,.12); }
.trust-grid strong{ font-family: var(--font-display); font-size:19px; font-weight:700; letter-spacing:.02em; }
.trust-grid span{ font-size:11.5px; color:#B7C3CD; margin-top:6px; }

/* ---------- problem section ---------- */
.problem-section{ background:#fff; }
.two-column{ display:grid; grid-template-columns: .8fr 1.2fr; gap:100px; align-items:start; }
.problem-list{ border-top:1px solid var(--line); }
.problem-list article{ display:flex; align-items:center; gap:20px; min-height:96px; border-bottom:1px solid var(--line); }
.problem-flag{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background: var(--red-soft); color: var(--red); display:grid; place-items:center; font-size:13px; font-weight:700; }
.problem-list p{ font-size:16px; color: var(--navy); font-weight:500; }
.problem-list strong{ font-weight:600; color: var(--red); }

/* ---------- features ---------- */
.features-section{ background: var(--paper); }
.feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line); margin-top:48px; border:1px solid var(--line); }
.feature-grid article{ background:#fff; padding:34px; position:relative; }
.feature-number{ font-family: var(--font-data); font-size:34px; font-weight:700; color: var(--navy); letter-spacing:.02em; margin-bottom:28px; }
.feature-grid h3{ font-size:19px; margin-bottom:10px; }
.feature-grid p{ font-size:13.5px; color: var(--steel); line-height:1.85; }

/* ---------- car lineup ---------- */
.cars-section{ background:#fff; }
.heading-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.heading-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tax-note{ font-family: var(--font-data); font-weight:500; font-size:11px; color: var(--steel); border:1px solid var(--line); padding:8px 12px; }
.btn-small{ min-height:36px; padding:0 14px; font-size:12.5px; }
.car-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line); border:1px solid var(--line); margin-top:44px; }
.car-card{ background:#fff; transition: background .15s; }
.car-card:hover{ background: var(--paper); }
.car-visual{ height:168px; position:relative; background: var(--paper); border-bottom:1px solid var(--line); overflow:hidden; }
.car-kind{ position:absolute; z-index:2; top:12px; left:14px; font-family: var(--font-data); font-size:10px; font-weight:700; letter-spacing:.1em; color: var(--navy); background:rgba(255,255,255,.9); padding:4px 9px; }
.car-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.car-photo--empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background: var(--paper); color: var(--steel); }
.car-photo--empty[hidden]{ display:none; }
.car-photo--empty .car-icon{ width:84px; height:42px; color: var(--navy); opacity:.55; }
.car-photo--empty span{ font-family: var(--font-data); font-size:10px; letter-spacing:.12em; }
.car-info{ padding:22px; }
.car-info h3{ font-size:16.5px; }
.car-info > p{ font-size:12.5px; color: var(--steel); margin:6px 0 18px; }
.price{ display:flex; align-items:baseline; gap:6px; padding-top:14px; border-top:1px solid var(--line); margin-top:18px; }
.car-info > p + .price{ margin-top:0; }
.price span{ font-size:11px; color: var(--steel); margin-right:auto; font-weight:500; }
.price strong{ font-family: var(--font-data); font-size:21px; color: var(--navy); font-weight:700; }
.price small{ font-size:11px; color: var(--steel); }
.lineup-note{ margin-top:14px; font-size:11.5px; color: var(--steel); }
.long-plan{ display:flex; justify-content:space-between; align-items:center; background: var(--navy); color:#fff; padding:24px 30px; margin-top:1px; gap:20px; flex-wrap:wrap; }
.long-plan div{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.long-plan div span{ font-family: var(--font-body); background: var(--red); padding:6px 10px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.long-plan div strong{ font-size:16px; font-weight:500; }
.long-plan a{ color:#fff; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }

/* ---------- flow ---------- */
.flow-section{ background: var(--navy); color:#fff; }
.light-heading p{ color:#AEBBC5; }
.flow-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: rgba(255,255,255,.14); margin-top:48px; }
.flow-grid article{ background: var(--navy); padding:28px; position:relative; }
.flow-top{ display:flex; align-items:baseline; gap:10px; font-family: var(--font-data); font-weight:500; }
.flow-top span{ font-size:10.5px; color:#9AA9B4; letter-spacing:.1em; }
.flow-top strong{ font-size:26px; color:#fff; font-weight:700; }
.flow-grid h3{ font-size:18px; margin:20px 0 10px; }
.flow-grid p{ font-size:13px; color:#C3CDD6; line-height:1.85; }

/* ---------- area / coverage diagram ---------- */
.area-section{ background:#fff; }
.area-layout{ display:grid; grid-template-columns: .9fr 1.1fr; gap:90px; align-items:center; }
.area-copy p{ color: var(--steel); font-size:14.5px; line-height:1.95; margin:22px 0; max-width:480px; }
.area-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.area-tags span{ background: var(--navy-soft); color: var(--navy); font-size:11.5px; font-weight:500; padding:7px 12px; border-radius:2px; }

.coverage-diagram{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.coverage-rings{ position:relative; width:min(368px, 100%); aspect-ratio:1 / 1; }
.ring{ position:absolute; border-radius:50%; border:1px solid var(--line); top:50%; left:50%; transform:translate(-50%,-50%); }
.ring-1{ width:35%; height:35%; }
.ring-2{ width:64%; height:64%; }
.ring-3{ width:95%; height:95%; border-style:dashed; }
.coverage-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; border-radius:50%; background: var(--navy); color:#fff; display:grid; place-items:center; text-align:center; font-family: var(--font-body); font-size:11px; font-weight:700; line-height:1.4; }
.coverage-point{ position:absolute; font-family: var(--font-body); font-size:11.5px; font-weight:700; color: var(--navy); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.coverage-point::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--red); }
.pt-takamatsu{ top:20%; left:52%; }
.pt-sanuki{ top:38%; left:84%; }
.pt-sakaide{ top:72%; left:20%; }
.pt-marugame{ top:82%; left:58%; }
.coverage-label{ text-align:center; }
.coverage-label strong{ font-family: var(--font-data); font-size:20px; letter-spacing:.06em; color: var(--navy); display:block; }
.coverage-label span{ font-size:10.5px; letter-spacing:.14em; color: var(--steel); }

/* ---------- faq ---------- */
.faq-section{ background: var(--paper); }
.faq-layout{ display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; }
.faq-title{ position:sticky; top:130px; align-self:start; }
.faq-list{ border-top:1px solid var(--line); }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list summary{ display:flex; align-items:center; gap:18px; min-height:84px; padding:12px 0; font-weight:500; cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary span, .answer > span{ font-family: var(--font-data); color: var(--red); font-weight:700; font-size:15px; flex-shrink:0; }
.faq-list summary i{ margin-left:auto; font-style:normal; font-size:20px; color: var(--steel); transition: transform .15s; flex-shrink:0; }
.faq-list details[open] summary i{ transform: rotate(45deg); }
.answer{ display:flex; gap:18px; padding:0 40px 26px 0; }
.answer p{ color: var(--steel); font-size:14px; line-height:1.9; }

/* ---------- contact ---------- */
.contact-section{ background: var(--navy); color:#fff; padding:88px 0; }
.contact-inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; }
.contact-copy .section-kicker{ color:#8FB0C8; }
.contact-copy h2{ font-size:clamp(30px,3.6vw,42px); color:#fff; font-weight:700; }
.contact-copy p{ color:#C3CDD6; font-size:14.5px; margin-top:16px; }
.contact-actions{ display:grid; grid-template-columns:1.08fr .92fr; gap:12px; }
.contact-line, .contact-phone{ display:flex; align-items:center; padding:22px; background:#fff; color: var(--navy); }
.contact-line{ grid-column:1/-1; min-height:120px; transition: box-shadow .15s; }
.contact-line:hover{ box-shadow: 0 0 0 3px rgba(6,199,85,.45); }
.contact-line-icon{ width:56px; height:56px; border-radius:12px; flex-shrink:0; object-fit:contain; }
.contact-line > div{ display:flex; flex-direction:column; margin-left:16px; }
.contact-line small{ color: var(--line-green); font-size:11px; font-weight:700; }
.contact-line strong{ font-size:21px; margin-top:6px; }
.contact-line i{ margin-left:auto; font-style:normal; color: var(--line-green); font-size:24px; }
.contact-phone{ grid-column:1/-1; background: var(--navy-deep); color:#fff; flex-direction:column; align-items:flex-start; gap:14px; min-height:88px; justify-content:center; }
.contact-phone > span{ font-size:10.5px; color:#9AA9B4; font-weight:700; }
.contact-phone strong{ font-family: var(--font-data); font-size:19px; }
.contact-phone small{ font-size:10.5px; color:#9AA9B4; }
.contact-note{ grid-column:1/-1; font-size:11.5px; color:#AEBBC5; }
.contact-note[hidden]{ display:none; }

/* ---------- footer ---------- */
footer{ background: var(--navy-deep); color:#fff; padding: 64px 0 26px; }
.footer-main{ display:grid; grid-template-columns:.8fr 1.1fr 1.1fr; gap:70px; padding-bottom:48px; }
.footer-logo{ display:inline-flex; background:#fff; padding:8px 12px; border-radius:4px; }
.footer-brand-logo{ width:180px; height:60px; }
.footer-brand > p{ font-size:11px; color:#7C8B96; margin-top:16px; letter-spacing:.05em; }
.company-info{ display:flex; flex-direction:column; gap:9px; font-size:12.5px; color:#B7C3CD; }
.company-info strong{ color:#fff; font-size:13.5px; margin-bottom:4px; }
.company-info a:hover{ text-decoration:underline; }
.footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; font-size:12.5px; font-weight:500; }
.footer-links a{ color:#C9D2D8; }
.footer-links a:hover{ color:#fff; }
.footer-links span{ color:#5E6C77; }
.footer-bottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:10.5px; color:#7C8B96; font-family: var(--font-data); font-weight:500; }

/* ---------- mobile fixed contact bar（860px以下で表示） ---------- */
.mobile-contact-bar{ display:none; }

/* ---------- subpages (company / privacy / 404) ---------- */
.subpage-main{ background: var(--paper); min-height:100vh; }
.subpage-header .header-inner{ justify-content:space-between; }
.back-home{ color: var(--red); font-size:13px; font-weight:700; }
.document-hero{ background:#fff; border-bottom:1px solid var(--line); padding:70px 0 48px; }
.document-hero h1{ font-size:clamp(32px,4.4vw,46px); color: var(--navy); }
.document-hero p{ color: var(--steel); margin-top:14px; max-width:60em; }
.document-section{ padding:56px 0 96px; }
.document-card{ background:#fff; border:1px solid var(--line); max-width:900px; padding:44px 50px; }
.document-card h2{ color: var(--navy); font-size:19px; margin:32px 0 12px; }
.document-card h2:first-child{ margin-top:0; }
.document-card p, .document-card li{ color: var(--steel); font-size:14px; line-height:1.95; }
.document-card ul{ list-style: disc; padding-left:1.4em; }
.document-card a{ color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.doc-date{ margin-top:32px; font-size:12px; }
.company-table{ margin-bottom:8px; }
.company-row{ display:grid; grid-template-columns:170px 1fr; border-top:1px solid var(--line); }
.company-row:last-child{ border-bottom:1px solid var(--line); }
.company-table dt, .company-table dd{ padding:18px 20px; }
.company-table dt{ background: var(--paper); font-weight:700; color: var(--navy); }
.company-table dd{ color: var(--steel); }
.company-table dd small{ display:block; font-size:12px; margin-top:4px; }
.simple-footer{ background: var(--navy-deep); color:#8393A0; padding:26px 0; font-size:11px; }
.simple-footer .wrap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.simple-footer a{ color:#fff; font-weight:700; }
.notfound-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* ---------- pricing page ---------- */
.pricing-page{ background:#fff; }
.pricing-hero{ background: var(--navy); color:#fff; padding:72px 0 56px; }
.pricing-hero-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.pricing-hero .section-kicker{ color:#8FB0C8; }
.pricing-hero h1{ font-size:clamp(38px,5vw,54px); color:#fff; }
.pricing-hero p{ color:#C3CDD6; margin-top:16px; }
.pricing-badge{ border:1px solid rgba(255,255,255,.25); padding:14px 20px; display:flex; align-items:center; min-width:200px; }
.pricing-badge strong{ background: var(--red); padding:6px 10px; font-size:12px; margin-right:14px; }
.pricing-badge span{ font-size:13px; font-weight:700; }
.pricing-section{ padding:60px 0 96px; }
.pricing-intro{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; gap:16px; }
.pricing-intro p{ font-size:clamp(17px,2vw,22px); font-weight:700; color: var(--navy); }
.pricing-intro span{ font-family: var(--font-data); font-weight:500; font-size:10.5px; color: var(--steel); letter-spacing:.1em; }
.pricing-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background: var(--line); border:1px solid var(--line); }
.pricing-card{ background:#fff; padding:28px 32px; position:relative; }
.pricing-card-top{ display:flex; justify-content:space-between; align-items:center; }
.pricing-index{ font-family: var(--font-data); font-size:11px; color: var(--red); font-weight:700; letter-spacing:.1em; }
.pricing-unit{ font-family: var(--font-data); font-weight:500; font-size:9px; color: var(--steel); letter-spacing:.1em; }
.pricing-card h2{ font-size:clamp(18px,2vw,22px); color: var(--navy); margin:20px 0 8px; }
.pricing-examples{ font-size:13px; color: var(--steel); }
.pricing-rule{ height:1px; background: var(--line); margin:22px 0 16px; }
.pricing-price{ display:flex; align-items:baseline; flex-wrap:wrap; }
.pricing-price .yen{ font-family: var(--font-data); font-size:15px; font-weight:700; margin-right:2px; }
.pricing-price strong{ font-family: var(--font-data); font-size:clamp(26px,2.8vw,34px); font-weight:700; color: var(--navy); }
.pricing-price .range{ color: var(--steel); margin-inline:8px; font-size:15px; }
.pricing-tax{ font-family: var(--font-data); font-size:10.5px; color: var(--steel); margin-top:10px; }
.pricing-card.premium{ background: var(--navy); }
.pricing-card.premium .pricing-index{ color:#FF9098; }
.pricing-card.premium .pricing-unit, .pricing-card.premium .pricing-examples, .pricing-card.premium .pricing-tax{ color:#AEBBC5; }
.pricing-card.premium h2, .pricing-card.premium .pricing-price strong, .pricing-card.premium .pricing-price .yen{ color:#fff; }
.pricing-card.premium .pricing-rule{ background: rgba(255,255,255,.16); }
.pricing-note{ display:grid; grid-template-columns:150px 1fr; gap:26px; background:#fff; border-left:3px solid var(--red); padding:22px 28px; margin-top:22px; }
.pricing-note strong{ font-size:13.5px; color: var(--navy); }
.pricing-note p{ font-size:12px; color: var(--steel); }
.pricing-contact{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; background: var(--navy); color:#fff; padding:28px 34px; margin-top:44px; }
.pricing-contact-copy{ display:flex; flex-direction:column; gap:4px; }
.pricing-contact-copy span{ font-family: var(--font-data); font-weight:500; font-size:9px; color:#8FB0C8; letter-spacing:.1em; }
.pricing-contact-copy strong{ font-size:18px; }
.pricing-contact-copy p{ font-size:11.5px; color:#C3CDD6; }
.pricing-contact-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pricing-contact-actions a{ display:inline-flex; align-items:center; gap:8px; font-weight:700; padding:12px 18px; font-size:16px; border-radius: var(--radius); }
.pricing-contact-actions .pricing-tel{ background:#fff; color: var(--navy); }
.pricing-contact-actions .pricing-tel small{ color: var(--red); font-size:9.5px; }
.pricing-contact-actions .pricing-line{ background: var(--line-green); color:#fff; font-size:14px; }
.pricing-contact-actions .pricing-line img{ width:24px; height:24px; border-radius:6px; }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .header-inner{ gap:18px; }
  .main-nav{ gap:16px; font-size:12.5px; }
  .header-phone{ display:none; }
}
@media (max-width:980px){
  .nav-toggle{ display:flex; }
  .header-line{ margin-left:auto; }
  .main-nav{ display:none; }
  .main-nav.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0; margin:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(20,41,61,.08);
    padding:6px 20px 14px; font-size:15px;
  }
  .main-nav.is-open a{ padding:14px 0; border-top:1px solid var(--line); }
  .main-nav.is-open a:first-child{ border-top:none; }
}
@media (max-width:860px){
  .wrap{ width:min(1180px, 100% - 40px); }
  .section{ padding:72px 0; }
  .hero-grid{ grid-template-columns:1fr; min-height:auto; padding-block:48px; gap:36px; }
  .hero-visual{ height:400px; }
  .two-column{ grid-template-columns:1fr; gap:36px; }
  .feature-grid{ grid-template-columns:1fr; }
  .car-grid{ grid-template-columns:repeat(2,1fr); }
  .flow-grid{ grid-template-columns:repeat(2,1fr); }
  .area-layout{ grid-template-columns:1fr; gap:36px; }
  .faq-layout{ grid-template-columns:1fr; gap:32px; }
  .faq-title{ position:static; }
  .contact-inner{ grid-template-columns:1fr; gap:36px; }
  .contact-actions{ grid-template-columns:1fr; }
  .footer-main{ grid-template-columns:1fr; gap:36px; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .heading-row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .pricing-grid{ grid-template-columns:1fr; }
  .pricing-hero-inner{ flex-direction:column; align-items:flex-start; }
  .pricing-intro{ flex-direction:column; align-items:flex-start; gap:8px; }
  .pricing-note{ grid-template-columns:1fr; gap:8px; }
  .pricing-contact{ grid-template-columns:1fr; gap:18px; }
  .document-card{ padding:28px 22px; }

  /* 固定連絡バー */
  body{ padding-bottom:64px; }
  .mobile-contact-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background: var(--navy-deep); border-top:1px solid var(--navy-deep);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-contact-bar a{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:62px; font-weight:700; font-size:14px; line-height:1.2; }
  .mobile-contact-bar img{ width:26px; height:26px; border-radius:6px; }
  .mobile-contact-bar .mcb-line{ background: var(--line-green); color:#fff; }
  .mobile-contact-bar .mcb-phone{ background: var(--navy); color:#fff; }
  .mobile-contact-bar .mcb-phone strong{ font-family: var(--font-data); font-size:15px; }
  .mobile-contact-bar small{ display:block; font-size:9.5px; font-weight:500; opacity:.85; }
}
@media (max-width:600px){
  .announce{ display:none; }   /* 3行に折り返して縦に長くなるため。内容は固定バー・ヘッダーで補完 */
  .header-inner{ height:auto; min-height:72px; padding-block:10px; gap:12px; }
  .brand-logo{ width:140px; height:46px; }
  .header-line{ min-width:0; }
  .header-line-text strong{ font-size:11.5px; }
  .hero-visual{ height:340px; }
  .main-card{ inset:20px 20px 34px 30px; padding:16px 18px; }
  .road-lines{ display:none; }
  .hero-note{ display:none; }  /* 縦書きのタグラインがメインカードに重なるため */
  .car-grid{ grid-template-columns:1fr; }
  .flow-grid{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .line-hero-cta{ min-width:0; }
  .footer-links{ grid-template-columns:1fr; }
  .company-row{ grid-template-columns:1fr; }
  .company-table dt{ padding-bottom:6px; }
  .company-table dd{ padding-top:6px; }
  .answer{ padding-right:0; }
}
@media (max-width:420px){
  .header-line-text{ display:none; }
  .header-line{ min-width:0; padding:6px 10px; }
}

/* ---------- print ---------- */
@media print{
  .site-header, .announce, .mobile-contact-bar, .nav-toggle, .contact-section{ display:none !important; }
  body{ padding-bottom:0; }
}