/* voisapo.css — Voisapo紹介ページ専用（2026/08/20 新設・#295）
   共通の色・角丸・影は svc-common.css の変数をそのまま使う。 */

/* ---------- ファーストビューの比較図 ---------- */
.vs-hero{
  margin-top:var(--header-h);            /* 固定ヘッダーの下から始める（.doc-hero と同じ作法） */
  background:var(--g50); border-bottom:1px solid var(--g200);
  padding:clamp(30px,5vw,54px) 0 clamp(30px,5vw,56px);
}
.vs-hero .vs-lead{
  text-align:center; font-size:clamp(18px,3.6vw,28px); font-weight:900;
  line-height:1.6; letter-spacing:.01em; margin:0 0 6px; color:var(--ink);
}
.vs-hero .vs-lead .hl{
  background:linear-gradient(transparent 58%, var(--y500) 58%); padding:0 .12em;
}
.vs-hero .vs-sub{
  text-align:center; font-size:clamp(12.5px,2.1vw,15px); color:var(--g700);
  line-height:1.9; margin:0 auto clamp(22px,4vw,34px); max-width:640px;
}

.vs-compare{
  display:grid; grid-template-columns:minmax(0,1fr); gap:16px;
  max-width:860px; margin:0 auto;
}
@media (min-width:760px){ .vs-compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px;} }

.vs-card{
  background:#fff; border:1.5px solid var(--g200); border-radius:var(--radius);
  padding:clamp(16px,2.6vw,22px); box-shadow:var(--shadow);
}
.vs-card.is-good{ border-color:var(--y600); border-width:2.5px; }
.vs-card .vs-tag{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.06em;
  padding:4px 11px; border-radius:999px; margin-bottom:12px;
  background:var(--g100); color:var(--g700);
}
.vs-card.is-good .vs-tag{ background:var(--y500); color:var(--ink); }
.vs-card svg{ display:block; width:100%; height:auto; }
.vs-card .vs-cap{
  margin:12px 0 0; font-size:clamp(13px,2.2vw,15px); font-weight:800;
  line-height:1.65; color:var(--ink); text-align:center;
}
.vs-card.is-bad .vs-cap{ color:var(--g500); }
.vs-card .vs-note{
  margin:6px 0 0; font-size:12px; color:var(--g500); line-height:1.75; text-align:center;
}

/* ---------- 本文の小さめ部品 ---------- */
.legal-sec .vs-facts{ list-style:none; margin:0; padding:0; }
.legal-sec .vs-facts li{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 0; border-bottom:1px dashed var(--g200); font-size:clamp(13px,2vw,14.5px);
  line-height:1.9; color:var(--g700);
}
.legal-sec .vs-facts li:last-child{ border-bottom:0; }
.legal-sec .vs-facts .k{
  flex:none; min-width:96px; font-weight:800; color:var(--ink); font-size:13px;
}
@media (max-width:520px){
  .legal-sec .vs-facts li{ flex-direction:column; gap:2px; }
  .legal-sec .vs-facts .k{ min-width:0; }
}

.legal-sec .vs-steps{ counter-reset:vs; list-style:none; margin:0; padding:0; }
.legal-sec .vs-steps li{
  position:relative; padding:0 0 18px 44px; font-size:clamp(13px,2vw,14.5px);
  line-height:1.9; color:var(--g700);
}
.legal-sec .vs-steps li:last-child{ padding-bottom:0; }
.legal-sec .vs-steps li::before{
  counter-increment:vs; content:counter(vs);
  position:absolute; left:0; top:2px; width:28px; height:28px; border-radius:50%;
  background:var(--y500); color:var(--ink); font-family:var(--font-en); font-weight:800;
  font-size:14px; display:flex; align-items:center; justify-content:center;
}
.legal-sec .vs-steps li b{ color:var(--ink); }

/* おすすめの一行（電球アイコンつき） */
.legal-sec .vs-tip{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--y50); border:1px solid var(--y300); border-radius:14px;
  padding:14px 16px; margin:0 0 4px;
  font-size:clamp(13px,2vw,14.5px); line-height:1.9; color:var(--g800);
}
.legal-sec .vs-tip .vs-bulb{
  flex:none; width:20px; height:20px; margin-top:3px;
  fill:none; stroke:var(--y800); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

/* 水色のマーカー（黄色の .kw と同じ形・色だけ変える） */
.article .kw-blue{
  background:linear-gradient(transparent 62%, #A8E4F2 62%); font-weight:800; padding:0 1px;
}