/*
 * 支払いを分ける方法の比較LP（/compare/、page-compare.php）v3「初心者向けの図鑑」。2026-11-12
 * v2（紺の比較表が主役）→ 本人「初心者向けにもっとオシャレでわかりやすく」。明るいクリーム地・角丸・たとえ話・◎○△・絵つきの図鑑。
 * 色：地はクリーム、文字は紺。タイプの色＝立て替え 青（#2456D6）／借りて使う 金茶（#B07A1F）／売り手が待つ 青緑（#0E8A73）。PDは金。
 * how.css の「.hw a{ color:inherit }」が強いので、リンクの色は .hw を頭に付けて指定する。
 */
.cp{ --cream:#fbf7ee; --paper:#fffdf8; --nv:#14254a; --ink:#1f2a37; --muted:#5d6874; --faint:#8c95a0; --line:#ece4d3;
  --gold:#b8913a; --mark:#f2d78f; --t1:#2456d6; --t1s:#eaf0fd; --t2:#b07a1f; --t2s:#fbf1dc; --t3:#0e8a73; --t3s:#e3f4ef;
  --r:22px; background:var(--cream); color:var(--ink); }
.cp-t--tatekae{ --c:var(--t1); --cs:var(--t1s); } .cp-t--lease{ --c:var(--t2); --cs:var(--t2s); } .cp-t--matsu{ --c:var(--t3); --cs:var(--t3s); }
.cp-wrap{ max-width:1120px; width:calc(100% - 48px); margin-inline:auto; }
.cp-sec{ padding:104px 0; }
.cp-sec--soft{ background:var(--paper); border-block:1px solid var(--line); }

/* 見出し：番号の丸＋英字、明朝の大見出し、説明（中央寄せ） */
.cp-h{ text-align:center; margin-bottom:52px; }
.cp-h__en{ display:inline-flex; align-items:center; gap:10px; font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.28em; color:var(--gold); }
.cp-h__en span{ display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 8px; border-radius:99px; background:var(--nv); color:var(--mark); font-size:13px; letter-spacing:.04em; }
.cp-h h2{ margin-top:14px; font-family:var(--min); font-weight:600; font-size:clamp(28px,3.6vw,44px); line-height:1.45; letter-spacing:.04em; color:var(--nv); }
.cp-h__d{ margin-top:12px !important; font-size:15px; color:var(--muted); line-height:1.9; }

/* ボタン */
.cp-btn{ display:inline-flex; align-items:center; gap:12px; padding:17px 30px; border-radius:99px; background:var(--nv); font-weight:700; font-size:15px; box-shadow:0 14px 30px -14px rgba(20,37,74,.6); transition:transform .2s; }
.hw .cp-btn{ color:#fff; }
.cp-btn i{ font-style:normal; color:var(--mark); }
.cp-btn:hover{ transform:translateY(-2px); }
.cp-btn--gold{ background:var(--mark); box-shadow:none; }
.hw .cp-btn--gold{ color:var(--nv); }
.cp-btn--gold i{ color:var(--nv); }
.cp-link{ font-weight:700; font-size:15px; border-bottom:2px solid var(--mark); padding-bottom:2px; }
.hw .cp-link{ color:var(--nv); }
.hw .cp-link--light{ color:#fff; }

/* ===== 最初の画面 ===== */
.cp-hero{ position:relative; overflow:hidden; padding:88px 0 96px; background:radial-gradient(60% 70% at 85% 30%,#fdf0cf 0%,transparent 70%),radial-gradient(50% 60% at 0% 100%,#e9f0fd 0%,transparent 70%),var(--cream); }
.cp-hero::after{ content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; border:1px dashed rgba(184,145,58,.35); pointer-events:none; }
.cp-hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
.cp-tag{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:99px; background:#fff; border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--gold); }
.cp-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--mark); }
.cp-hero h1{ margin-top:18px; font-family:var(--min); font-weight:600; font-size:clamp(34px,4.6vw,58px); line-height:1.38; letter-spacing:.03em; color:var(--nv); }
.cp-hero h1 span{ font-size:.62em; color:var(--ink); }
.cp-hero__d{ max-width:30em; margin-top:22px !important; font-size:16px; line-height:2; color:var(--muted); }
.cp-hero__d b{ font-family:var(--min); font-size:26px; color:var(--gold); margin:0 2px; }
.cp-hero__acts{ margin-top:30px !important; display:flex; align-items:center; flex-wrap:wrap; gap:16px 26px; }

/* 会話 */
.cp-chat{ position:relative; display:grid; gap:16px; padding:30px 28px 0; background:#fff; border-radius:28px; box-shadow:0 40px 80px -50px rgba(20,37,74,.45); }
.cp-chat__row{ display:flex; align-items:flex-end; gap:12px; }
.cp-chat__row.is-a{ justify-content:flex-end; }
.cp-chat__face{ flex:none; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--t1s); overflow:hidden; padding:6px; }
.cp-chat__face img{ width:100%; height:100%; object-fit:contain; }
.cp-chat__face.is-pd{ background:var(--gold); padding:14px; }
.cp-chat__bubble{ position:relative; max-width:20em; padding:14px 18px; border-radius:18px; font-size:15px; line-height:1.8; }
.cp-chat__bubble small{ display:block; font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.06em; }
.cp-chat__row.is-q .cp-chat__bubble{ background:var(--cream); border-bottom-left-radius:4px; }
.cp-chat__row.is-a .cp-chat__bubble{ background:var(--nv); color:#fff; border-bottom-right-radius:4px; }
.cp-chat__row.is-a .cp-chat__bubble small{ color:var(--mark); }
.cp-chat__row.is-a .cp-chat__bubble b{ color:var(--mark); }
.cp-chat__ill{ width:78%; margin:6px auto 0; }

/* ===== 3つのタイプ ===== */
.cp-types{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.cp-type{ display:flex; flex-direction:column; padding:20px 22px 24px; background:#fff; border-radius:var(--r); border:1px solid var(--line); }
.cp-type__art{ position:relative; display:grid; place-items:center; height:200px; border-radius:16px; background:var(--cs); }
.cp-type__art img{ height:150px; width:auto; }
.cp-type__n{ position:absolute; left:14px; top:12px; padding:4px 10px; border-radius:99px; background:#fff; font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--c); }
.cp-type__t{ margin:20px 0 0; font-family:var(--min); font-size:26px; font-weight:600; color:var(--c); letter-spacing:.04em; }
.cp-type__like{ margin-top:12px !important; padding:14px 16px; border-radius:14px; background:var(--cs); font-size:14.5px; line-height:1.8; font-weight:700; color:var(--ink); }
.cp-type__like span{ display:block; margin-bottom:2px; font-size:11.5px; color:var(--c); letter-spacing:.08em; }
.cp-type__d{ margin-top:12px !important; font-size:14.5px; line-height:1.9; color:var(--muted); }
.cp-type__flow{ display:flex; align-items:center; gap:6px; margin-top:auto !important; padding-top:16px; font-size:12px; font-weight:700; }
.cp-type__flow span{ padding:6px 10px; border-radius:99px; background:var(--cream); white-space:nowrap; }
.cp-type__flow .is-mid{ background:var(--c); color:#fff; }
.cp-type__flow i{ flex:1; min-width:10px; height:2px; background:var(--c); opacity:.4; }

/* ===== 図鑑 ===== */
.cp-zukan + .cp-zukan{ margin-top:40px; }
.cp-zukan__h{ display:flex; align-items:center; gap:10px; margin-bottom:16px !important; font-family:var(--min); font-size:20px; font-weight:600; color:var(--c); }
.cp-zukan__h span{ width:14px; height:14px; border-radius:50%; background:var(--c); }
.cp-zukan__g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.cp-card{ display:flex; flex-direction:column; border-radius:var(--r); background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .2s,box-shadow .2s; }
.cp-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(20,37,74,.45); }
.cp-card__art{ display:grid; place-items:center; height:150px; background:var(--cs); }
.cp-card__art img{ height:112px; width:auto; }
.cp-card__seal{ display:grid; place-items:center; width:96px; height:96px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 10px rgba(184,145,58,.18); }
.cp-card__seal img{ width:52px; height:auto; }
.cp-card.is-pd{ border-color:var(--mark); }
.cp-card.is-pd .cp-card__art{ background:linear-gradient(135deg,#fdf3d8,#fbe9b8); }
.cp-card__b{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1; }
.cp-card__t{ font-family:var(--min); font-size:21px; font-weight:600; line-height:1.4; color:var(--nv); }
.cp-card__t small{ margin-left:8px; font-family:var(--sans); font-size:11.5px; font-weight:700; color:var(--faint); }
.cp-card__d{ font-size:14px; line-height:1.85; color:var(--muted); }
.cp-card__fee{ align-self:flex-start; padding:5px 12px; border-radius:99px; background:var(--cs); color:var(--c); font-size:12.5px; font-weight:700; }
.cp-card__go{ margin-top:auto; padding-top:6px; font-size:13px; font-weight:700; color:var(--c); }

/* ===== ◎○△の表 ===== */
.cp-scroll{ display:none; }
.cp-chart{ overflow-x:auto; border-radius:var(--r); background:#fff; border:1px solid var(--line); }
.cp-chart table{ width:100%; border-collapse:collapse; min-width:820px; }
.cp-chart thead th{ padding:18px 14px; font-size:13px; font-weight:700; color:var(--muted); text-align:center; border-bottom:2px solid var(--line); background:var(--paper); }
.cp-chart thead th:first-child{ text-align:left; padding-left:24px; }
.cp-chart tbody th{ padding:16px 14px 16px 24px; text-align:left; font-weight:400; border-bottom:1px solid var(--line); }
.cp-chart tbody th a{ display:inline-flex; align-items:center; gap:10px; font-family:var(--min); font-size:17px; font-weight:600; }
.hw .cp-chart tbody th a{ color:var(--nv); }
.cp-chart tbody th a::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--c); }
.cp-chart td{ padding:12px 14px; text-align:center; border-bottom:1px solid var(--line); }
.cp-chart__use{ text-align:left !important; font-size:13.5px; font-weight:700; color:var(--ink); }
.cp-chart tr.is-pd > *{ background:#fdf6e3; }
.cp-mark{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; font-size:20px; font-weight:700; line-height:1; }
.cp-mark.is-best{ background:var(--nv); color:var(--mark); }
.cp-mark.is-good{ background:var(--t1s); color:var(--t1); }
.cp-mark.is-mid{ background:#f3efe6; color:var(--muted); }
.cp-mark.is-no{ background:#fbe9e7; color:#c0392b; }
.cp-mark.is-na{ color:var(--faint); }

/* ===== 3つの質問 ===== */
.cp-q{ list-style:none; margin:0 auto; padding:0; max-width:900px; display:grid; gap:18px; counter-reset:q; }
.cp-q__i{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:24px; align-items:center; margin:0; padding:24px 26px; background:#fff; border-radius:var(--r); border:1px solid var(--line); scroll-margin-top:96px; }
.cp-q__t{ font-family:var(--min); font-size:21px; font-weight:600; line-height:1.5; color:var(--nv); }
.cp-q__t span{ display:inline-grid; place-items:center; width:40px; height:40px; margin-right:12px; border-radius:50%; background:var(--mark); font-family:var(--en); font-size:14px; color:var(--nv); vertical-align:middle; }
.cp-q__a{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cp-q__b{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; padding:14px 16px; border-radius:16px; background:var(--nv); transition:transform .2s; }
.hw .cp-q__b{ color:#fff; }
.cp-q__b:hover{ transform:translateY(-2px); }
.cp-q__b.is-next{ background:var(--cream); border:1px dashed #d7cbb0; }
.hw .cp-q__b.is-next{ color:var(--nv); }
.cp-q__yn{ font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--mark); }
.cp-q__b.is-next .cp-q__yn{ color:var(--gold); }
.cp-q__b b{ grid-column:1; font-size:15px; line-height:1.5; }
.cp-q__b i{ grid-column:2; grid-row:1 / 3; font-style:normal; color:var(--mark); font-size:18px; }
.cp-q__b.is-next i{ color:var(--gold); }

/* ===== VS ===== */
.cp-vs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.cp-vs__b{ padding:24px 26px 18px; background:#fff; border-radius:var(--r); border:1px solid var(--line); }
.cp-vs__top{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; margin-bottom:10px; }
.cp-vs__top b{ padding:12px 10px; border-radius:14px; font-family:var(--min); font-size:18px; font-weight:600; text-align:center; }
.cp-vs__top b.is-l{ background:var(--t2s); color:var(--t2); }
.cp-vs__top b.is-r{ background:var(--t1s); color:var(--t1); }
.cp-vs__top span{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--nv); color:var(--mark); font-family:var(--en); font-size:12px; font-weight:700; }
.cp-vs__row{ display:grid; grid-template-columns:minmax(0,1fr) 7em minmax(0,1fr); align-items:center; gap:10px; padding:12px 0; border-top:1px dashed var(--line); font-size:14px; font-weight:700; }
.cp-vs__row small{ text-align:center; font-size:11.5px; color:var(--faint); }
.cp-vs__row .is-l{ text-align:center; color:var(--t2); }
.cp-vs__row .is-r{ text-align:center; color:var(--t1); }

/* ===== 数字 ===== */
.cp-num{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:center; }
.cp-num .cp-h{ text-align:left; margin-bottom:16px; }
.cp-num__big{ display:flex; align-items:baseline; gap:8px; font-weight:700; color:var(--muted); }
.cp-num__big b{ font-family:var(--min); font-weight:600; font-size:84px; line-height:1; color:var(--gold); }
.cp-bar{ display:grid; grid-template-columns:10.5em minmax(0,1fr) 6.5em; align-items:center; gap:14px; padding:12px 0; }
.cp-bar__l{ font-weight:700; font-size:15px; line-height:1.4; }
.cp-bar__l small{ display:block; font-size:11.5px; font-weight:400; color:var(--faint); }
.cp-bar__t{ height:34px; border-radius:99px; background:#f1ebde; overflow:hidden; }
.cp-bar__t i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--t3),#3db69c); transform-origin:left; animation:cp-bar .9s var(--d,0s) both cubic-bezier(.2,.8,.2,1); }
.cp-bar:last-of-type .cp-bar__t i{ background:linear-gradient(90deg,var(--t2),#d9a441); }
.cp-bar.is-base .cp-bar__t i{ background:#cfd6e2; }
.cp-bar__v{ text-align:right; font-weight:700; color:var(--muted); white-space:nowrap; }
.cp-bar__v b{ font-family:var(--min); font-size:26px; font-weight:600; color:var(--nv); margin:0 2px; }
@keyframes cp-bar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.cp-note{ margin-top:16px !important; font-size:12.5px; line-height:1.9; color:var(--faint); }
.cp-note a{ text-decoration:underline; }

/* ===== 用語 ===== */
.cp-words{ margin:0 auto; max-width:960px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cp-words div{ display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:14px; align-items:baseline; padding:18px 22px; background:#fff; border-radius:18px; border:1px solid var(--line); }
.cp-words dt{ font-family:var(--min); font-size:19px; font-weight:600; color:var(--nv); line-height:1.3; }
.cp-words dt small{ display:block; margin-top:2px; font-family:var(--sans); font-size:11px; font-weight:700; color:var(--gold); }
.cp-words dd{ margin:0; font-size:14px; line-height:1.85; color:var(--muted); }

/* ===== PD ===== */
.cp-pd{ position:relative; overflow:hidden; padding:88px 0; background:var(--nv); color:#fff; }
.cp-pd::before{ content:""; position:absolute; left:-80px; top:50%; width:360px; height:360px; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle,rgba(242,215,143,.22),transparent 70%); }
.cp-pd__in{ position:relative; display:grid; grid-template-columns:150px minmax(0,1fr); gap:48px; align-items:center; }
.cp-pd__seal{ display:grid; place-items:center; width:150px; height:150px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 14px rgba(184,145,58,.2); }
.cp-pd__seal img{ width:76px; height:auto; }
.cp-pd__k{ font-size:13px; font-weight:700; color:var(--mark); letter-spacing:.1em; }
.cp-pd__t{ margin-top:10px !important; font-family:var(--min); font-size:clamp(24px,2.8vw,34px); font-weight:600; line-height:1.5; }
.cp-pd__d{ margin-top:12px !important; max-width:44em; font-size:14.5px; line-height:2; color:rgba(255,255,255,.82); }
.cp-pd__acts{ margin-top:24px !important; display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; }
.cp-pd .cp-link{ border-color:rgba(255,255,255,.5); }

/* ===== よくある質問 ===== */
.cp-faq{ max-width:860px; }
.cp-faq__i{ margin-bottom:12px; background:#fff; border-radius:18px; border:1px solid var(--line); }
.cp-faq__i summary{ cursor:pointer; list-style:none; position:relative; padding:20px 54px 20px 22px; font-family:var(--min); font-size:18px; font-weight:600; color:var(--nv); line-height:1.6; }
.cp-faq__i summary::-webkit-details-marker{ display:none; }
.cp-faq__i summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--mark); font-family:var(--en); font-size:18px; color:var(--nv); }
.cp-faq__i[open] summary::after{ content:"−"; }
.cp-faq__i p{ padding:0 22px 22px; font-size:15px; line-height:2; color:var(--muted); }
.cp-more{ margin-top:26px !important; font-weight:700; text-align:center; }
.hw .cp-more a{ color:var(--t1); text-decoration:underline; }
.cp-src{ margin-top:18px; font-size:13px; color:var(--faint); text-align:center; }
.cp-src summary{ cursor:pointer; }
.cp-src ol{ margin:10px auto 0; padding-left:1.4em; line-height:1.9; text-align:left; max-width:640px; }
.cp-src a{ text-decoration:underline; }

/* ===== 幅ごとの調整 ===== */
@media (max-width:1000px){
  .cp-hero__in{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .cp-types, .cp-zukan__g{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-num{ grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media (max-width:760px){
  .cp-wrap{ width:calc(100% - 32px); }
  .cp-sec{ padding:68px 0; }
  .cp-h{ margin-bottom:34px; }
  .cp-hero{ padding:52px 0 64px; }
  .cp-hero__d{ font-size:15px; }
  .cp-chat{ padding:22px 16px 0; border-radius:22px; }
  .cp-chat__face{ width:46px; height:46px; }
  .cp-chat__bubble{ font-size:14px; padding:12px 14px; }
  .cp-types, .cp-zukan__g{ grid-template-columns:minmax(0,1fr); }
  .cp-type__art{ height:170px; }
  .cp-card{ flex-direction:row; }
  .cp-card__art{ flex:none; width:108px; height:auto; min-height:100%; }
  .cp-card__art img{ height:70px; }
  .cp-card__seal{ width:66px; height:66px; } .cp-card__seal img{ width:36px; }
  .cp-card__b{ padding:16px; }
  .cp-card__t{ font-size:18px; }
  .cp-scroll{ display:block; margin-bottom:10px !important; font-size:12px; color:var(--faint); }
  .cp-chart table{ min-width:640px; }
  .cp-chart tbody th, .cp-chart thead th:first-child{ position:sticky; left:0; z-index:1; background:#fff; padding-left:16px; }
  .cp-chart thead th:first-child{ background:var(--paper); }
  .cp-chart tr.is-pd th{ background:#fdf6e3; }
  .cp-chart tbody th a{ font-size:15px; }
  .cp-mark{ width:34px; height:34px; font-size:17px; }
  .cp-q__i{ grid-template-columns:minmax(0,1fr); gap:14px; padding:20px 18px; }
  .cp-q__t{ font-size:18px; }
  .cp-vs{ grid-template-columns:minmax(0,1fr); }
  .cp-vs__b{ padding:20px 16px 12px; }
  .cp-vs__top b{ font-size:15px; }
  .cp-vs__row{ grid-template-columns:minmax(0,1fr) 5.5em minmax(0,1fr); font-size:13px; }
  .cp-num__big b{ font-size:64px; }
  .cp-bar{ grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
  .cp-bar__t{ grid-column:1 / -1; grid-row:2; height:24px; }
  .cp-words{ grid-template-columns:minmax(0,1fr); }
  .cp-words div{ grid-template-columns:6.5em minmax(0,1fr); padding:16px 18px; }
  .cp-pd{ padding:64px 0; }
  .cp-pd__in{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .cp-pd__seal{ width:110px; height:110px; } .cp-pd__seal img{ width:56px; }
  .cp-faq__i summary{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){ .cp-bar__t i{ animation:none; } .cp-btn, .cp-card, .cp-q__b{ transition:none; } }
/* 1枚だけのタイプ（借りて使う）は横長のカードにして空きを作らない */
.cp-zukan__g:has(> .cp-card:only-child){ grid-template-columns:minmax(0,1fr); max-width:760px; }
.cp-zukan__g > .cp-card:only-child{ flex-direction:row; }
.cp-zukan__g > .cp-card:only-child .cp-card__art{ flex:none; width:260px; height:auto; }
.cp-hero h1 span{ display:inline-block; line-height:1.55; }
@media (max-width:760px){ .cp-zukan__g > .cp-card:only-child .cp-card__art{ width:108px; } }
.cp-hero__d b{ white-space:nowrap; }
@media (max-width:760px){ .cp-hero__d b{ font-size:21px; } }

/* PDの帯の流れ図：受け取る会社 ← PROTOCOL ← 払う会社（BNPL型。2026-11-12 本人「契約書を買い取るから、債権者は早期資金化、債務者は分割」） */
.cp-pd__flow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:26px; padding:22px 22px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); }
.cp-pd__node{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:112px; height:112px; border-radius:50%; background:#fff; color:var(--nv); text-align:center; }
.cp-pd__node b{ font-family:var(--min); font-size:15px; line-height:1.35; }
.cp-pd__node small{ font-size:11px; font-weight:700; color:var(--muted); }
.cp-pd__node.is-pd{ background:var(--gold); color:#fff; box-shadow:0 0 0 8px rgba(184,145,58,.22); }
.cp-pd__node.is-pd small{ color:#fff; opacity:.85; }
.cp-pd__arrow{ display:flex; flex-direction:column; align-items:stretch; gap:6px; text-align:center; }
.cp-pd__arrow span{ font-family:var(--min); font-size:15px; font-weight:600; color:var(--mark); }
.cp-pd__arrow small{ font-size:11.5px; color:rgba(255,255,255,.65); }
.cp-pd__arrow i{ position:relative; display:block; height:2px; margin:0 6px; background:linear-gradient(90deg,var(--mark),rgba(242,215,143,.35)); }
.cp-pd__arrow.is-l i::after{ content:""; position:absolute; left:-4px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-right:10px solid var(--mark); border-left:0; }
@media (max-width:760px){
  .cp-pd__flow{ grid-template-columns:minmax(0,1fr); justify-items:center; gap:6px; padding:18px 14px; }
  .cp-pd__node{ width:auto; height:auto; padding:10px 18px; border-radius:14px; flex-direction:row; gap:8px; }
  .cp-pd__arrow{ width:100%; flex-direction:row; justify-content:center; align-items:center; gap:10px; }
  .cp-pd__arrow i{ width:2px; height:22px; margin:0; background:var(--mark); }
  .cp-pd__arrow.is-l i::after{ left:50%; top:-4px; transform:translateX(-50%); border:5px solid transparent; border-bottom:9px solid var(--mark); border-top:0; }
}

/* ===== v3b（2026-11-12）：入口を「何を払いたいか」に。PDは業界を問わず物もサービスも（本人） ===== */
.cp-t--mono{ --c:var(--t2); --cs:var(--t2s); } .cp-t--service{ --c:var(--t1); --cs:var(--t1s); } .cp-t--direct{ --c:var(--t3); --cs:var(--t3s); } .cp-t--pd{ --c:var(--gold); --cs:#fbf1d6; }
.cp-needs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.cp-need{ display:flex; flex-direction:column; padding:20px 22px 24px; background:#fff; border-radius:var(--r); border:1px solid var(--line); border-top:5px solid var(--c); }
.cp-need__art{ display:grid; place-items:center; height:170px; border-radius:16px; background:var(--cs); }
.cp-need__art img{ height:128px; width:auto; }
.cp-need__t{ margin:20px 0 0; font-family:var(--min); font-size:24px; font-weight:600; line-height:1.4; color:var(--c); }
.cp-need__ex{ margin-top:6px !important; font-size:14px; color:var(--muted); }
.cp-need__k{ margin-top:18px !important; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--faint); }
.cp-need__m{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.cp-need__m li{ margin:0; }
.cp-need__m a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:12px; background:var(--cs); font-weight:700; font-size:15px; }
.hw .cp-need__m a{ color:var(--nv); }
.cp-need__m a::after{ content:"↓"; color:var(--c); font-weight:700; }
.cp-need__m li.is-pd a{ background:linear-gradient(90deg,#fbefc9,#fdf6e1); border:1px solid var(--mark); }
.cp-need__m li.is-pd small{ margin-left:auto; font-size:11px; color:var(--gold); }
.cp-need__m li.is-pd a::after{ color:var(--gold); margin-left:8px; }

/* 図鑑の先頭：PDの横長カード */
.cp-pdcard{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:center; gap:28px; margin-bottom:44px; padding:28px 32px; border-radius:26px; background:linear-gradient(120deg,#14254a 0%,#1d3566 100%); color:#fff; box-shadow:0 30px 60px -36px rgba(20,37,74,.7); transition:transform .2s; scroll-margin-top:96px; }
.hw .cp-pdcard{ color:#fff; }
.cp-pdcard:hover{ transform:translateY(-3px); }
.cp-pdcard__seal{ display:grid; place-items:center; width:130px; height:130px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 12px rgba(184,145,58,.22); }
.cp-pdcard__seal img{ width:66px; height:auto; }
.cp-pdcard__b{ display:flex; flex-direction:column; gap:8px; }
.cp-pdcard__k{ font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--mark); }
.cp-pdcard__t{ font-family:var(--min); font-size:28px; font-weight:600; }
.cp-pdcard__t small{ margin-left:10px; font-family:var(--sans); font-size:12px; color:var(--mark); }
.cp-pdcard__d{ font-size:14.5px; line-height:1.9; color:rgba(255,255,255,.85); }
.cp-pdcard__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.cp-pdcard__chips span{ padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.12); border:1px solid rgba(242,215,143,.4); font-size:12.5px; font-weight:700; color:var(--mark); }
.cp-pdcard__go{ font-weight:700; color:var(--mark); white-space:nowrap; }
.cp-chart tr.cp-t--pd > *{ background:#fdf6e3; }
@media (max-width:1000px){ .cp-needs{ grid-template-columns:minmax(0,1fr); max-width:620px; margin:0 auto; } }
@media (max-width:760px){
  .cp-need__art{ height:140px; } .cp-need__art img{ height:100px; }
  .cp-pdcard{ grid-template-columns:minmax(0,1fr); gap:16px; padding:24px 20px; }
  .cp-pdcard__seal{ width:84px; height:84px; } .cp-pdcard__seal img{ width:44px; }
  .cp-pdcard__t{ font-size:23px; }
}

/* ===== 絵を「文字と図形」に（2026-11-12 本人「イラストがダサい、かっこよく」）。写真案は ?cpv=photo ===== */
.cp-glyph{ position:relative; display:grid; place-items:center; width:100%; height:100%; }
.cp-glyph i{ position:absolute; width:118px; height:118px; border-radius:50%; border:1px solid var(--gold); opacity:.55; transform:translate(22px,-10px); }
.cp-glyph i::after{ content:""; position:absolute; left:-9px; top:50%; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.cp-glyph b{ position:relative; font-family:var(--min); font-weight:600; font-size:88px; line-height:1; color:var(--c); letter-spacing:0; }
.cp-glyph small{ position:absolute; right:18px; bottom:14px; font-family:var(--en); font-size:10px; font-weight:700; letter-spacing:.32em; color:var(--c); opacity:.75; }
.cp-card__art{ position:relative; background:var(--cs); background-image:linear-gradient(135deg,rgba(255,255,255,.55) 0 50%,transparent 50%); }
.cp-need__art{ position:relative; overflow:hidden; background-image:linear-gradient(135deg,rgba(255,255,255,.55) 0 50%,transparent 50%); }
.cp-need__art .cp-glyph b{ font-size:104px; }
.cp-need__art .cp-glyph i{ width:140px; height:140px; }

/* 写真案：入口の絵を2色に染めた写真に、文字は白で重ねる */
.cp-need__art.is-photo{ background:var(--c); }
.cp-need__art.is-photo img{ position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(1.1); mix-blend-mode:multiply; opacity:.9; }
.cp-need__art.is-photo .cp-glyph b, .cp-need__art.is-photo .cp-glyph small{ color:#fff; }
.cp-need__art.is-photo .cp-glyph i{ border-color:var(--mark); opacity:.8; }
.cp-chat__photo{ position:relative; display:block; height:190px; margin:6px -28px 0; border-radius:0 0 28px 28px; overflow:hidden; background:var(--nv); }
.cp-chat__photo img{ width:100%; height:100% !important; object-fit:cover; filter:grayscale(1) contrast(1.05); mix-blend-mode:luminosity; opacity:.75; }

/* 最初の画面：一括600万円 → 月50万円×12（数字と棒） */
.cp-chat__fig{ display:flex; align-items:flex-end; justify-content:center; gap:16px; margin:10px -28px 0; padding:24px 24px 22px; border-radius:0 0 28px 28px; background:linear-gradient(180deg,#f7f2e6,#efe6d1); }
.cp-chat__one, .cp-chat__split{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cp-chat__one span, .cp-chat__split > span:first-child{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--muted); }
.cp-chat__one i{ display:block; width:46px; height:120px; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#9aa6bd,#c9d0dc); }
.cp-chat__bars{ display:flex; align-items:flex-end; gap:4px; height:120px; }
.cp-chat__bars i{ display:block; width:11px; height:10px; border-radius:3px 3px 0 0; background:var(--gold); transform-origin:bottom; animation:cp-grow .5s var(--d) both cubic-bezier(.2,.8,.2,1); }
@keyframes cp-grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.cp-chat__fig b{ font-family:var(--min); font-size:26px; font-weight:600; line-height:1; color:var(--nv); }
.cp-chat__split b{ color:var(--gold); }
.cp-chat__fig b small{ font-size:12px; margin-left:2px; }
.cp-chat__arw{ align-self:center; font-size:22px; color:var(--gold); }
@media (prefers-reduced-motion:reduce){ .cp-chat__bars i{ animation:none; } }
@media (max-width:760px){
  .cp-glyph b{ font-size:52px; } .cp-glyph i{ width:72px; height:72px; transform:translate(12px,-6px); } .cp-glyph small{ right:8px; bottom:8px; font-size:8px; letter-spacing:.2em; }
  .cp-need__art .cp-glyph b{ font-size:80px; } .cp-need__art .cp-glyph i{ width:110px; height:110px; }
  .cp-chat__fig{ margin:8px -16px 0; padding:18px 12px; gap:10px; }
  .cp-chat__bars i{ width:8px; } .cp-chat__fig b{ font-size:22px; }
  .cp-chat__photo{ margin:6px -16px 0; height:150px; }
}

/* ===== 選び方の流れ図（2026-11-12 本人「もっとオシャレに」）：紺の地に写真をうすく、金の線でつなぐ ===== */
.cp-flowsec{ position:relative; overflow:hidden; background:var(--nv); color:#fff; }
.cp-flowsec__ph{ position:absolute; inset:0; }
.cp-flowsec__ph img{ width:100%; height:100% !important; object-fit:cover; filter:grayscale(1); opacity:.16; mix-blend-mode:luminosity; }
.cp-flowsec__ph::after{ content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 80% 20%,rgba(36,86,214,.35),transparent 70%),linear-gradient(180deg,rgba(20,37,74,.6),var(--nv)); }
.cp-flowsec .cp-wrap{ position:relative; }
.cp-flowsec .cp-h h2{ color:#fff; }
.cp-flowsec .cp-h__d{ color:rgba(255,255,255,.7); }
.cp-flowsec .cp-h__en span{ background:var(--mark); color:var(--nv); }
.cp-flow2{ max-width:940px; margin:0 auto; }
.cp-flow2__row{ display:grid; grid-template-columns:minmax(0,1.1fr) 120px minmax(0,1fr); align-items:center; }
.cp-flow2__q{ display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(3px); }
.cp-flow2__q p{ font-family:var(--min); font-size:19px; font-weight:600; line-height:1.55; }
.cp-flow2__n{ flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:1px solid var(--mark); color:var(--mark); font-family:var(--en); font-size:15px; font-weight:600; }
.cp-flow2__q.is-end{ background:transparent; border-style:dashed; }
.cp-flow2__br{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; }
.cp-flow2__br span{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--mark); }
.cp-flow2__br i{ position:relative; display:block; width:100%; height:2px; background:linear-gradient(90deg,rgba(242,215,143,.3),var(--mark)); }
.cp-flow2__br i::after{ content:""; position:absolute; right:-2px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left:10px solid var(--mark); border-right:0; }
.cp-flow2__ans{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 18px 14px 14px; border-radius:18px; background:#fff; box-shadow:0 20px 40px -24px rgba(0,0,0,.6); transition:transform .2s; }
.hw .cp-flow2__ans{ color:var(--nv); }
.cp-flow2__ans:hover{ transform:translateX(4px); }
.cp-flow2__ans b{ font-family:var(--min); font-size:17px; font-weight:600; line-height:1.45; }
.cp-flow2__ans > i{ font-style:normal; color:var(--gold); font-size:18px; }
.cp-flow2__g{ display:grid; place-items:center; width:54px; height:54px; border-radius:14px; background:var(--cream); font-family:var(--min); font-size:28px; font-weight:600; color:var(--nv); }
.cp-flow2__g.is-pd{ background:var(--gold); border-radius:50%; }
.cp-flow2__g img{ width:34px; height:auto; }
.cp-flow2__down{ position:relative; width:52px; height:58px; margin-left:22px; }
.cp-flow2__down::before{ content:""; position:absolute; left:25px; top:0; bottom:8px; width:2px; background:linear-gradient(180deg,rgba(242,215,143,.3),var(--mark)); }
.cp-flow2__down::after{ content:""; position:absolute; left:20px; bottom:0; border:6px solid transparent; border-top:10px solid var(--mark); border-bottom:0; }
.cp-flow2__down span{ position:absolute; left:42px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--mark); white-space:nowrap; }

/* ===== 迷いやすい2組：左右を2色に染めた写真＋金の VS ===== */
.cp-vs2{ margin-top:36px; border-radius:26px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -44px rgba(20,37,74,.45); }
.cp-vs2:first-of-type{ margin-top:0; }
.cp-vs2__top{ position:relative; display:grid; grid-template-columns:1fr 1fr; }
.cp-vs2__side{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:200px; padding:24px 30px; color:#fff; overflow:hidden; }
.cp-vs2__side.is-l{ background:#7a5414; }
.cp-vs2__side.is-r{ background:#1b3f9e; text-align:right; align-items:flex-end; }
.cp-vs2__ph{ position:absolute; inset:0; }
.cp-vs2__ph img{ width:100%; height:100% !important; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(1.15); mix-blend-mode:multiply; opacity:.85; }
.cp-vs2__ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 65%); }
.cp-vs2__k, .cp-vs2__name{ position:relative; }
.cp-vs2__k{ font-family:var(--en); font-size:12px; font-weight:700; letter-spacing:.3em; color:var(--mark); }
.cp-vs2__name{ margin-top:4px !important; font-family:var(--min); font-size:clamp(20px,2.4vw,28px); font-weight:600; line-height:1.4; }
.cp-vs2__seal{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--mark); color:var(--nv); font-family:var(--en); font-weight:700; font-size:16px; letter-spacing:.06em; box-shadow:0 0 0 8px rgba(255,255,255,.85),0 18px 30px -10px rgba(0,0,0,.5); }
.cp-vs2__rows{ margin:0; padding:8px 30px; }
.cp-vs2__rows div{ display:grid; grid-template-columns:minmax(0,1fr) 9em minmax(0,1fr); align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.cp-vs2__rows dt{ order:2; text-align:center; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--faint); }
.cp-vs2__rows dd{ margin:0; font-family:var(--min); font-size:17px; font-weight:600; line-height:1.5; }
.cp-vs2__rows dd.is-l{ order:1; color:#8a5f12; }
.cp-vs2__rows dd.is-r{ order:3; text-align:right; color:#1b3f9e; }
.cp-vs2__sum{ display:flex; align-items:baseline; gap:14px; margin:0 !important; padding:18px 30px 22px; background:var(--cream); font-size:15px; font-weight:700; color:var(--nv); }
.cp-vs2__sum span{ flex:none; font-size:11px; letter-spacing:.14em; color:var(--gold); }

@media (max-width:760px){
  .cp-flow2__row{ grid-template-columns:minmax(0,1fr); gap:0; }
  .cp-flow2__q{ padding:16px; gap:12px; } .cp-flow2__q p{ font-size:16.5px; }
  .cp-flow2__n{ width:42px; height:42px; font-size:13px; }
  .cp-flow2__br{ flex-direction:row; justify-content:flex-start; height:46px; padding-left:20px; }
  .cp-flow2__br i{ width:2px; height:100%; order:-1; background:linear-gradient(180deg,rgba(242,215,143,.3),var(--mark)); }
  .cp-flow2__br i::after{ right:auto; left:50%; top:auto; bottom:-2px; transform:translateX(-50%); border:6px solid transparent; border-top:10px solid var(--mark); border-bottom:0; }
  .cp-flow2__ans{ padding:12px 14px 12px 12px; } .cp-flow2__ans b{ font-size:15.5px; }
  .cp-flow2__g{ width:46px; height:46px; font-size:24px; }
  .cp-flow2__down{ margin-left:0; height:64px; }
  .cp-flow2__down::before{ left:20px; } .cp-flow2__down::after{ left:15px; } .cp-flow2__down span{ left:34px; }
  .cp-vs2__side{ min-height:150px; padding:18px 16px; }
  .cp-vs2__seal{ width:52px; height:52px; font-size:12px; box-shadow:0 0 0 5px rgba(255,255,255,.85); }
  .cp-vs2__rows{ padding:4px 16px; }
  .cp-vs2__rows div{ grid-template-columns:minmax(0,1fr) 5.5em minmax(0,1fr); gap:8px; padding:12px 0; }
  .cp-vs2__rows dd{ font-size:14px; }
  .cp-vs2__sum{ flex-direction:column; gap:4px; padding:16px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce){ .cp-flow2__ans{ transition:none; } }
@media (max-width:760px){
  /* 流れ図：答えは右に下げて枝分かれに。左の縦線は質問から次の質問まで通す */
  .cp-flow2__row{ position:relative; }
  .cp-flow2__row:not(.is-end)::before{ content:""; position:absolute; left:20px; top:40px; bottom:0; width:2px; background:rgba(242,215,143,.45); }
  .cp-flow2__q{ position:relative; z-index:1; background:#1f3260; }
  .cp-flow2__br, .cp-flow2__ans{ position:relative; z-index:1; margin-left:44px; }
  .cp-flow2__br{ padding-left:0; height:40px; }
  .cp-flow2__row.is-end .cp-flow2__br, .cp-flow2__row.is-end .cp-flow2__ans{ margin-left:0; }
  .cp-flow2__down{ height:44px; }
  .cp-flow2__down::before{ top:0; }
  /* VS：丸は上に、名前は小さく */
  .cp-vs2__seal{ top:16px; transform:translateX(-50%); width:44px; height:44px; font-size:11px; }
  .cp-vs2__side{ min-height:160px; padding:72px 14px 16px; }
  .cp-vs2__name{ font-size:16px; }
}

/* ===== 比較表を広げた（金額・回数・費用を足した）2026-11-12 ===== */
.cp-legend{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px; margin:-18px 0 28px; padding:0; font-size:13px; font-weight:700; color:var(--muted); }
.cp-legend li{ display:inline-flex; align-items:center; gap:8px; margin:0; }
.cp-legend .cp-mark{ width:30px; height:30px; font-size:15px; }
.cp-legend__n{ font-weight:400; color:var(--faint); }
.cp-chart--wide table{ min-width:1040px; }
.cp-chart--wide thead th{ white-space:nowrap; font-size:12.5px; }
.cp-chart--wide td{ vertical-align:top; padding-top:16px; padding-bottom:14px; }
.cp-chart--wide tbody th{ vertical-align:middle; white-space:nowrap; }
.cp-chart__why{ display:block; margin-top:6px; font-size:11.5px; font-weight:700; line-height:1.45; color:var(--muted); }
.cp-chart__fee{ text-align:left !important; font-size:13px; font-weight:700; color:var(--ink); line-height:1.6; vertical-align:middle !important; }
.cp-chart--wide .cp-chart__use{ vertical-align:middle; }
.cp-chart--wide thead th:nth-child(2), .cp-chart--wide thead th:nth-child(3){ color:var(--nv); background:#f6eedb; }
.cp-chart--wide tbody td:nth-child(2), .cp-chart--wide tbody td:nth-child(3){ background:#fffaf0; }
.cp-chart--wide tr.is-pd > *{ background:#fdf3d8 !important; }
#chart .cp-note{ max-width:900px; margin:18px auto 0 !important; text-align:center; }
@media (max-width:760px){
  .cp-legend{ margin:-10px 0 18px; gap:8px 12px; font-size:12px; }
  .cp-chart--wide table{ min-width:900px; }
  .cp-chart__why{ font-size:10.5px; }
  #chart .cp-note{ text-align:left; }
}

/* ===== 知りたいことで比べる（記号の表をやめた。2026-11-12 本人「◎○△わかりづらい」） ===== */
.cp-ask{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:-14px 0 28px; }
.cp-ask button{ padding:12px 20px; border-radius:99px; border:1px solid var(--line); background:#fff; font:inherit; font-size:15px; font-weight:700; color:var(--nv); cursor:pointer; transition:all .15s; }
.cp-ask button:hover{ border-color:var(--gold); }
.cp-ask button[aria-selected=true]{ background:var(--nv); border-color:var(--nv); color:#fff; box-shadow:0 12px 24px -14px rgba(20,37,74,.7); }
.cp-rank{ max-width:900px; margin:0 auto; padding:26px 28px 14px; border-radius:var(--r); background:#fff; border:1px solid var(--line); }
.cp-rank__q{ margin-bottom:10px !important; font-family:var(--min); font-size:24px; font-weight:600; color:var(--nv); }
.cp-rank__q small{ display:block; margin-top:4px; font-family:var(--sans); font-size:13px; font-weight:400; color:var(--faint); }
.cp-rank ol{ list-style:none; margin:0; padding:0; counter-reset:rk; }
.cp-rank li{ margin:0; border-top:1px solid var(--line); counter-increment:rk; }
.cp-rank li a{ display:grid; grid-template-columns:2.2em minmax(0,1.1fr) minmax(0,1fr) 92px; align-items:center; gap:14px; padding:16px 8px; border-radius:12px; transition:background .15s; }
.cp-rank li a::before{ content:counter(rk); font-family:var(--en); font-weight:300; font-size:22px; color:var(--faint); text-align:center; }
.cp-rank[data-ask="fee"] li a::before{ content:"・"; }
.cp-rank li a:hover{ background:var(--cream); }
.cp-rank__name{ display:flex; align-items:center; gap:10px; font-family:var(--min); font-size:18px; font-weight:600; color:var(--nv); }
.cp-rank__name i{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--c); }
.cp-rank__ans{ font-size:15px; font-weight:700; color:var(--ink); }
.cp-rank li.is-pd a{ background:linear-gradient(90deg,#fbefc9,#fffaf0); }
.cp-rank li.is-pd .cp-rank__name{ color:#8a6a1e; }
.cp-meter{ display:flex; gap:5px; justify-content:flex-end; }
.cp-meter b{ width:24px; height:10px; border-radius:99px; background:#ece6d8; }
.cp-meter b.on{ background:var(--nv); }
.cp-rank li.is-pd .cp-meter b.on{ background:var(--gold); }
.cp-meter.is-none{ visibility:hidden; }
#chart .cp-note{ max-width:900px; margin:18px auto 0 !important; text-align:center; }
@media (max-width:760px){
  .cp-ask{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; margin:-6px -16px 18px; padding:2px 16px 6px; }
  .cp-ask button{ flex:none; padding:10px 16px; font-size:14px; }
  .cp-rank{ padding:20px 14px 8px; }
  .cp-rank__q{ font-size:20px; }
  .cp-rank li a{ grid-template-columns:1.6em minmax(0,1fr) auto; grid-template-rows:auto auto; gap:2px 10px; padding:14px 4px; }
  .cp-rank li a::before{ grid-row:1 / 3; font-size:18px; }
  .cp-rank__name{ font-size:16px; }
  .cp-rank__ans{ grid-column:2; grid-row:2; font-size:13.5px; color:var(--muted); }
  .cp-meter{ grid-column:3; grid-row:1 / 3; }
  .cp-meter b{ width:16px; height:8px; }
  #chart .cp-note{ text-align:left; }
}
.cp-rank li a::before{ content:attr(data-rk); }