/* =====================================================================
   C案：デザインシステムの再設計（c.html）
   - 面は「明るい（白／淡い灰青）」と「暗い（ヒーロー／最終CTA）」の2系統
   - 見出しは4段階、角丸は8pxに統一、ボタンは主（青）／副（線）の2種類
   - 金・ベージュ・緑などの別系統の色を使わない
   ===================================================================== */
.v-c {
  --ink: #0e1f33;
  --blue: #1d5b86;
  --blue-text: #1d5b86;
  --tint: #f2f6f9;
  --paper: #ffffff;
  --line: #d9e2e9;
  --r: 8px;
  /* 文字の段階（4つだけ） */
  --t-s: 14px;   /* 補足 */
  --t-m: 16px;   /* 本文 */
  --t-l: clamp(22px, 2.4vw, 28px);  /* 見出し */
  --t-xl: clamp(30px, 4vw, 52px);   /* ヒーロー・最終CTA */
}
.v-c body, body.v-c { background: var(--paper); }

/* ---- 面の整理：交互に 白 / 淡い灰青 ---- */
.v-c .sec-tint, .v-c .band-form, .v-c .band-beige { background: var(--tint); }
.v-c .sec, .v-c .check, .v-c .problem { background: var(--paper); }
.v-c .sec.sec-tint { background: var(--tint); }
.v-c .band-beige { background: var(--paper); }
.v-c .band-form { background: var(--tint); }
.v-c .cta-band { display: none; }

/* ---- 見出しの統一 ---- */
.v-c .h-lg, .v-c .h-blue, .v-c .h-blue-md, .v-c .h-black, .v-c .check-title, .v-c .ba-title { font-size: var(--t-l); line-height: 1.55; color: var(--ink); }
.v-c .h-blue { color: var(--ink); }
.v-c .h-blue-md { color: var(--ink); }
.v-c .tab-sub { font-size: 20px; color: var(--ink); }
.v-c .hero h1 { font-size: var(--t-xl); }
.v-c .lead-small, .v-c .check-lead { font-size: var(--t-m); color: #3b4d60; }
.v-c .kicker { display: none; }  /* 見出しの上の小ラベルは、情報にならないので外す */

/* ---- 部品の統一（角丸8px・影は最小） ---- */
.v-c .lineup li, .v-c .flow li, .v-c .cam-col, .v-c .promises li, .v-c .voices li, .v-c .chart,
.v-c .sim, .v-c .ba-card, .v-c .bat-table, .v-c .faq, .v-c .proof, .v-c .donut, .v-c .link-card,
.v-c .company, .v-c .sg-item, .v-c .sg-state { border-radius: var(--r); }
.v-c .company { background: var(--paper); border: 1px solid var(--line); box-shadow: none; }
.v-c .sg-item, .v-c .sg-state { border-radius: var(--r); }
.v-c .btn-main, .v-c .btn-gold, .v-c .sg-cta, .v-c .c-fill, .v-c .c-line { border-radius: var(--r); }
.v-c .company-steps li { border-radius: var(--r); background: var(--tint); }
.v-c .company-steps span { background: var(--blue); }
.v-c .company-tag { background: var(--tint); color: var(--blue-text); }
.v-c .company h2 { color: var(--ink); }
.v-c .c-fill { background: var(--blue); }
.v-c .c-line { color: var(--blue); border-color: var(--blue); }
.v-c .band-navy { background: #0c2140; }
.v-c .link-card.kyorin h3, .v-c .link-card.kyorin .lc-ic { color: var(--blue); }
.v-c .kyorin a { background: var(--blue); }
.v-c .link-card.trial-card h3, .v-c .link-card.trial-card .lc-ic { color: var(--blue); }
.v-c .trial-card a { color: var(--blue); border-color: var(--blue); }
.v-c .band-navy { padding: 48px 24px; }

/* ---- 数字は、強調したい所だけ（ヒーロー・料金・実績）。赤は「警告」だけに使う ---- */
.v-c .proof-tag { background: var(--blue); }
.v-c .proof-title em { color: var(--blue); }
.v-c .proof .total { background: var(--tint); color: var(--blue-text); }
.v-c .proof thead .total { background: var(--blue); color: #fff; }

/* ---- ヒーロー ---- */
.v-c .hero { min-height: min(86vh, 780px); }
.v-c .hero-pill { border-color: rgba(255,255,255,.45); }
.v-c .stats b { font-weight: 600; }

/* ---- 最終CTA（暗い面） ---- */
.closing { background: #0b1a2b; color: #fff; text-align: center; padding: clamp(64px, 9vw, 112px) 24px; position: relative; overflow: hidden; isolation: isolate; }
.closing::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 90% at 50% 120%, #1d5683 0%, rgba(29,86,131,0) 70%); }
.closing h2 { font-size: var(--t-xl); line-height: 1.35; color: #fff; margin-bottom: 18px; }
.closing p { color: rgba(255,255,255,.82); font-size: var(--t-m); }
.closing-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 26px 0 34px; }
.closing-points li { border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px 18px; font-size: var(--t-s); font-weight: 700; }
.closing .btn-hero { padding: 18px 48px; font-size: 20px; }
.closing-tel { margin-top: 22px; font-size: var(--t-s) !important; }
.closing-tel a { color: #fff; font-weight: 700; font-size: 20px; margin-left: 8px; }

/* ---- フォーム ---- */
.v-c .form-wrap { max-width: 600px; }
.v-c .purpose { display: flex; flex-wrap: wrap; gap: 10px; }
.v-c .purpose legend { width: 100%; }
.v-c .chip { display: block; margin: 0 !important; }
.v-c .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v-c .chip span { display: block; padding: 11px 18px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; font-weight: 700; font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.v-c .chip input:checked + span { border-color: var(--blue); background: #eaf3fa; color: var(--blue-text); }
.v-c .chip input:focus-visible + span { outline: 3px solid #2f7fb8; outline-offset: 2px; }
.v-c #contactForm small { display: block; margin-top: 6px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.v-c #contactForm .err { display: block; min-height: 0; margin-top: 6px; font-size: 13px; font-weight: 700; color: #c0391b; }
.v-c #contactForm .err:empty { display: none; }
.v-c #contactForm input.invalid, .v-c #contactForm textarea.invalid { box-shadow: 0 0 0 2px #c0391b; }
.v-c .more { margin-bottom: 22px; }
.v-c .more summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--blue-text); padding: 6px 0; }
.v-c .more textarea { display: block; width: 100%; margin-top: 10px; padding: 14px 16px; border: 0; border-radius: var(--r); background: #fff; box-shadow: 0 1px 4px rgba(16,40,70,.1); font: inherit; font-size: 15px; }
.v-c .btn-gold { background: var(--blue); box-shadow: 0 10px 24px rgba(29,91,134,.22); }
.v-c .btn-gold::after { display: none; }
.reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; font-size: 13px; color: #3b4d60; }
.reassure li::before { content: '✓'; color: var(--blue); font-weight: 900; margin-right: 6px; }
.thanks { text-align: center; padding: 44px 24px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); }
.thanks[hidden] { display: none; }
.thanks svg { color: #fff; background: var(--blue); border-radius: 50%; padding: 10px; width: 56px; height: 56px; margin: 0 auto 14px; display: block; }
.thanks h3 { font-size: 22px; margin-bottom: 10px; }
.thanks a { color: var(--blue-text); font-weight: 700; }

/* ---- 固定ナビ：スマホは「ボタンの段だけ」（高さ約100px→約48px） ---- */
@media (max-width: 768px) {
  .v-c .sg-footer-row-top { display: none; }
  .v-c .sg-footer-tel, .v-c .sg-footer-cta-mobile { padding: 14px 10px; font-size: 14px; }
  .v-c .sg-footer-cta-mobile { background: var(--blue); }
}
.v-c .sg-footer-cta-desktop a { background: var(--blue); box-shadow: none; }

/* ---- 動き：ヒーロー以外の「入場」は控えめに（動きを減らす設定は従来どおり静止） ---- */
.js-motion .v-c [data-reveal]:not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="pop"]):not([data-reveal="wipe"]) { transform: translateY(14px); }
.closing .btn-hero { margin: 0 auto; width: fit-content; }