@charset "UTF-8";
/* CHILIT 記事内CV導線（B2 注釈型 / C1 流れ型）v1.0 2026-09-21
   正本設計: seo-army/output/chilit-banner-check/design-spec-v2.md
   トークン: 墨#0B1120（記事H2/H3・LPの紺） 本文#334155 補足#64748B 罫#E2E8F0 金#C9A227/#D9B23A/#8F7318
   書体はサイト継承（游ゴシック 400/500/700のみ）。影は極薄。ボタンは追従フッターと同文法（金ピル＋矢印チップ） */
.ccv{--ccv-ink:#0B1120;--ccv-body:#334155;--ccv-muted:#64748B;--ccv-line:#E2E8F0;--ccv-gold:#C9A227;--ccv-gold2:#D9B23A;--ccv-goldd:#8F7318;
  margin:36px 0;color:var(--ccv-body);letter-spacing:.02em;}
.ccv p{margin:0;}
.ccv-btn{display:flex;align-items:center;justify-content:center;gap:10px;max-width:400px;margin:0 auto;height:48px;padding:0 26px 0 28px;border-radius:999px;
  background:linear-gradient(180deg,var(--ccv-gold2),var(--ccv-gold));color:var(--ccv-ink);font-size:16px;font-weight:700;line-height:1;
  text-decoration:none;box-shadow:0 2px 0 var(--ccv-goldd),0 4px 10px rgba(11,17,32,.10);cursor:pointer;touch-action:manipulation;
  transition:transform .12s ease-out,box-shadow .12s ease-out;}
.ccv-btn:visited{color:var(--ccv-ink);}
.ccv-btn:hover{color:var(--ccv-ink);box-shadow:0 2px 0 var(--ccv-goldd),0 6px 14px rgba(11,17,32,.14);}
.ccv-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--ccv-goldd),0 2px 6px rgba(11,17,32,.10);}
/* 白ボタン（2択の副CTA用・2026-09-22 中里さん「色は白くしたら」）: 形・高さ・チップは金と同じ、地を白＋紺の細枠に */
.ccv-btn--white{background:#fff;border:1px solid var(--ccv-ink);box-shadow:0 2px 0 #B8C0CC,0 4px 10px rgba(11,17,32,.08);}
.ccv-btn--white:hover{box-shadow:0 2px 0 #B8C0CC,0 6px 14px rgba(11,17,32,.12);}
.ccv-btn--white:active{box-shadow:0 0 0 #B8C0CC,0 2px 6px rgba(11,17,32,.08);}
.ccv-chip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ccv-ink);flex:none;}
.ccv-chip svg{width:12px;height:12px;stroke:#E8C95C;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ccv-rule{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--ccv-ink);font-size:15px;font-weight:700;margin:0 0 16px;}
.ccv-rule:before,.ccv-rule:after{content:"";height:1px;width:28px;background:var(--ccv-gold);}
.ccv-mc{text-align:center;font-size:15px;font-weight:700;color:var(--ccv-ink);margin:16px 0 10px;}
.ccv-note{text-align:center;font-size:12px;color:var(--ccv-muted);margin:-8px 0 14px !important;letter-spacing:0;}
/* C1 は余白を広めに（2026-09-21 中里さん「もうちょい余白」→ ゆったり案を採用） */
.ccv-c1{margin:48px 0;}
.ccv-c1 .ccv-rule{margin:0 0 28px;}
.ccv-c1 .ccv-mc{margin:24px 0 14px;}

/* B2 センター文字組の注釈 */
.ccv-b2{text-align:center;padding:0 8px;}
.ccv-b2 .ccv-body{font-size:15px;line-height:1.9;max-width:34em;margin:0 auto 18px;text-align:left;}
.ccv-b2 .ccv-body b,.ccv-b2 .ccv-body strong{color:var(--ccv-ink);font-weight:700;}
/* PC幅は文字とボタンを一回り大きく（2026-09-22 中里さん「スマホはちょうどいいがPCで小さい」→ 中案を採用） */
@media (min-width:600px){
  .ccv-b2{padding:0 16px;}
  .ccv-b2 .ccv-rule{font-size:17px;margin:0 0 20px;}
  .ccv-b2 .ccv-body{font-size:17px;line-height:2;max-width:38em;margin-bottom:22px;}
  .ccv-b2 .ccv-btn{height:54px;font-size:17px;max-width:440px;}
}

/* C1 流れ（4段） */
.ccv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin:0 0 20px;}
.ccv-steps:before{content:"";position:absolute;left:12.5%;right:12.5%;top:24px;height:1px;background:var(--ccv-line);}
.ccv-st{position:relative;text-align:center;padding:0 10px;}
.ccv-ic{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ccv-gold);background:#fff;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;position:relative;}
.ccv-ic svg{width:22px;height:22px;stroke:var(--ccv-ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ccv-n{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--ccv-ink);color:#E8C95C;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.ccv-t{font-size:14px;font-weight:700;color:var(--ccv-ink);line-height:1.4;}
.ccv-d{font-size:12.5px;color:var(--ccv-muted);line-height:1.6;margin-top:6px;}
@media (max-width:599px){
  .ccv-steps{grid-template-columns:1fr;gap:22px;}
  .ccv-steps:before{left:23px;right:auto;top:8px;bottom:8px;width:1px;height:auto;}
  .ccv-st{display:grid;grid-template-columns:48px 1fr;column-gap:18px;text-align:left;align-items:center;padding:0;}
  .ccv-ic{margin:0;}
  .ccv-t{font-size:15px;}
  .ccv-d{font-size:13px;}
}
@media (prefers-reduced-motion:reduce){.ccv-btn{transition:none;}}

/* 2択CV導線（比較表直下）: 吹き出し＋ボタン密着（2026-09-22 中里さん「吹き出し形式に・ボタンとの距離が遠すぎる」） */
.ccv-pick{margin:24px 0 4px;text-align:center;}
/* ボタン上の文言は記事既存の「＼ 文言 ／」型（2026-09-22 中里さん「これまでと同じ形＝＼ ーーーー ／」）: 地なし・太字・＼／はCSSで付与 */
.ccv-pick .ccv-bubble{display:block;background:none;color:var(--ccv-ink);font-size:14px;font-weight:700;line-height:1.5;padding:0;border-radius:0;margin:0 0 8px;}
.ccv-pick .ccv-bubble:before{content:"＼ ";}
.ccv-pick .ccv-bubble:after{content:" ／";position:static;border:0;transform:none;}
.ccv-pick .ccv-s{display:none;}
/* スマホでも2列横並び（中里さん「スマホで見たときにも横に並ぶように」）: 狭幅は文字と余白を詰め、ボタンは2行折返し可 */
@media (max-width:781px){
  .wp-block-columns.cmp-pick{gap:10px;}
  .ccv-pick{margin:20px 0 0;}
  /* SPは短い文言（.ccv-s）に切替えて1行に（2026-09-22 中里さん 案1承認） */
  .ccv-pick .ccv-l{display:none;}.ccv-pick .ccv-s{display:inline;}
  .ccv-pick .ccv-bubble{font-size:12.5px;margin-bottom:8px;white-space:nowrap;}
  .ccv-pick .ccv-btn{height:44px;padding:0 8px 0 10px;font-size:12.5px;line-height:1;gap:5px;white-space:nowrap;}
  .ccv-pick .ccv-chip{width:16px;height:16px;}
  .ccv-pick .ccv-chip svg{width:9px;height:9px;}
}