/* =========================================================================
   インタラクティブ・ウィジェット用スタイル
   比較表 / 横並び比較 / タイプ診断 / ランキングカード
   ========================================================================= */

/* ===== ウィジェットの外枠 ===== */
.cho-kss .tool{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  margin:26px 0;overflow:hidden;}
.cho-kss .tool__bar{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,var(--bg-tint));}
.cho-kss .tool__bar .ic{width:40px;height:40px;border-radius:11px;background:var(--green-700);color:#fff;display:grid;place-items:center;flex:none;}
.cho-kss .tool__bar .ic svg{width:22px;height:22px;}
.cho-kss .tool__bar h4{margin:0;font-family:var(--serif);font-size:18px;color:var(--green-900);}
.cho-kss .tool__bar p{margin:2px 0 0;font-size:12.5px;color:var(--ink-3);}
.cho-kss .tool__body{padding:20px 22px;}
.cho-kss .tool__note{font-size:11.5px;color:var(--ink-3);padding:12px 22px;background:var(--bg-tint);border-top:1px solid var(--line-2);line-height:1.6;}

/* ===== タブ（料金/割引/プラン/成婚率） ===== */
.cho-kss .metrictabs{display:flex;gap:6px;background:var(--green-50);padding:5px;border-radius:12px;flex-wrap:wrap;}
.cho-kss .metrictab{flex:1 1 auto;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 8px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--green-800);transition:.15s;white-space:nowrap;}
.cho-kss .metrictab svg{width:18px;height:18px;opacity:.85;}
.cho-kss .metrictab.active{background:#fff;color:var(--green-900);box-shadow:var(--shadow-sm);}
.cho-kss .metrictab.active svg{color:var(--green-600);opacity:1;}

/* ===== フィルター行 ===== */
.cho-kss .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 6px;}
.cho-kss .filters__group{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.cho-kss .filters__label{font-size:12px;font-weight:700;color:var(--ink-3);margin-right:2px;}
.cho-kss .fbtn{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink-2);transition:.13s;}
.cho-kss .fbtn:hover{border-color:var(--green-400);}
.cho-kss .fbtn.active{background:var(--green-700);color:#fff;border-color:var(--green-700);}
.cho-kss .filters__right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.cho-kss .sortsel{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:9px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;}
.cho-kss .clearbtn{font-size:12px;color:var(--ink-3);font-weight:600;text-decoration:underline;}

/* ===== 比較表（メイン） ===== */
.cho-kss .ctable-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);}
.cho-kss .ctable{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;min-width:680px;}
.cho-kss .ctable thead th{position:sticky;top:0;background:var(--green-800);color:#fff;font-weight:700;font-size:12.5px;
  padding:13px 14px;text-align:left;white-space:nowrap;z-index:2;}
.cho-kss .ctable thead th.sortable{cursor:pointer;user-select:none;}
.cho-kss .ctable thead th .arr{opacity:.5;font-size:10px;margin-left:3px;}
.cho-kss .ctable thead th.sorted .arr{opacity:1;color:var(--gold-soft);}
.cho-kss .ctable td{padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;}
.cho-kss .ctable tbody tr{transition:background .12s;}
.cho-kss .ctable tbody tr:hover{background:var(--green-50);}
.cho-kss .ctable tbody tr.picked{background:var(--gold-soft);}
.cho-kss .ctable tbody tr.picked:hover{background:#f1e6c8;}
.cho-kss .ctable .col-rank{width:42px;text-align:center;}
.cho-kss .rankbadge{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;font-family:var(--serif);
  font-weight:800;font-size:13px;color:#fff;background:var(--green-600);}
.cho-kss .rankbadge.top1{background:linear-gradient(135deg,#e7c057,#c79a45);color:#5a4410;}
.cho-kss .rankbadge.top2{background:linear-gradient(135deg,#cdd4d8,#aab4ba);color:#3a4146;}
.cho-kss .rankbadge.top3{background:linear-gradient(135deg,#e0a877,#c98a52);color:#4a2f12;}
.cho-kss .cname{display:flex;align-items:center;gap:9px;min-width:150px;}
.cho-kss .cdot{width:9px;height:30px;border-radius:4px;flex:none;background:var(--cc,var(--green-500));}
.cho-kss .cname b{font-weight:700;color:var(--green-900);font-size:14px;line-height:1.3;}
.cho-kss .cname small{display:block;font-size:11px;color:var(--ink-3);font-weight:500;}
.cho-kss .typetag{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}

/* metric value cells */
.cho-kss .mval{font-weight:700;color:var(--green-900);white-space:nowrap;}
.cho-kss .mval .yen{font-size:11px;color:var(--ink-3);font-weight:600;}
.cho-kss .msub{font-size:11px;color:var(--ink-3);}
.cho-kss .bar{height:7px;border-radius:4px;background:var(--green-100);overflow:hidden;margin-top:5px;min-width:60px;}
.cho-kss .bar > i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green-500),var(--green-700));}
.cho-kss .bar.warm > i{background:linear-gradient(90deg,#e0b85a,var(--gold));}
.cho-kss .bar.rose > i{background:linear-gradient(90deg,#e9a0b4,#d06b86);}
.cho-kss .disc-dots{display:inline-flex;gap:3px;}
.cho-kss .disc-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);}
.cho-kss .disc-dots i.on{background:var(--gold);}
.cho-kss .discwrap{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.cho-kss .disctag{font-size:10.5px;font-weight:700;color:var(--gold);background:var(--gold-soft);border:1px solid #ecdcb4;padding:2px 7px;border-radius:6px;white-space:nowrap;}
.cho-kss .na{color:var(--ink-3);font-size:12px;font-style:italic;}

/* pick checkbox */
.cho-kss .pickbox{width:24px;height:24px;border-radius:7px;border:2px solid var(--line);background:#fff;display:grid;place-items:center;
  color:transparent;transition:.13s;flex:none;}
.cho-kss .pickbox:hover{border-color:var(--green-400);}
.cho-kss .pickbox.on{background:var(--green-700);border-color:var(--green-700);color:#fff;}
.cho-kss .pickbox svg{width:14px;height:14px;}
.cho-kss .col-pick{width:54px;text-align:center;}

/* ===== 横並び比較トレイ ===== */
.cho-kss .tray{position:fixed;bottom:0;left:0;right:0;z-index:99998;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:2px solid var(--green-200,#cfe6da);box-shadow:0 -8px 24px rgba(20,58,43,.1);
  transform:translateY(110%);transition:transform .3s ease;}
.cho-kss .tray.show{transform:translateY(0);}
.cho-kss .tray__in{max-width:1100px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px;}
.cho-kss .tray__count{font-size:13px;font-weight:700;color:var(--green-900);flex:none;}
.cho-kss .tray__count b{color:var(--green-600);font-size:18px;font-family:var(--serif);}
.cho-kss .tray__chips{display:flex;gap:7px;overflow-x:auto;flex:1;padding:2px 0;}
.cho-kss .traychip{display:inline-flex;align-items:center;gap:6px;background:var(--green-50);border:1px solid var(--green-100);
  border-radius:999px;padding:5px 7px 5px 11px;font-size:12.5px;font-weight:600;color:var(--green-900);white-space:nowrap;flex:none;}
.cho-kss .traychip .x{width:18px;height:18px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink-3);}
.cho-kss .traychip .x:hover{background:var(--green-700);color:#fff;}
.cho-kss .tray__btn{flex:none;background:var(--green-700);color:#fff;font-weight:800;font-size:14px;padding:11px 22px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm);transition:.15s;}
.cho-kss .tray__btn:hover{background:var(--green-800);}
.cho-kss .tray__btn:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed;}
@media(max-width:560px){.cho-kss .tray__chips{display:none;}}

/* ===== 横並び比較モーダル ===== */
.cho-kss .modal{position:fixed;inset:0;z-index:100000;display:none;}
.cho-kss .modal.show{display:block;}
.cho-kss .modal__bg{position:absolute;inset:0;background:rgba(20,40,30,.55);backdrop-filter:blur(3px);animation:cho-fade .2s;}
.cho-kss .modal__panel{position:absolute;inset:3% 50% auto auto;transform:translateX(50%);width:min(1080px,94vw);
  max-height:94vh;background:var(--bg-tint);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;animation:cho-pop .25s cubic-bezier(.2,.8,.3,1);}
@keyframes cho-pop{from{opacity:0;transform:translateX(50%) translateY(14px) scale(.98);}to{opacity:1;}}
.cho-kss .modal__head{display:flex;align-items:center;gap:12px;padding:18px 22px;background:#fff;border-bottom:1px solid var(--line);}
.cho-kss .modal__head h3{margin:0;font-family:var(--serif);font-size:19px;color:var(--green-900);}
.cho-kss .modal__head .close{margin-left:auto;width:38px;height:38px;border-radius:10px;background:var(--bg-tint);display:grid;place-items:center;color:var(--ink-2);}
.cho-kss .modal__head .close:hover{background:var(--green-100);color:var(--green-800);}
.cho-kss .modal__metrictabs{padding:14px 22px 0;background:#fff;}
.cho-kss .modal__body{overflow:auto;padding:20px 22px 28px;}

/* compare columns */
.cho-kss .vsgrid{display:grid;gap:14px;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);}
.cho-kss .vscard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;}
.cho-kss .vscard__top{padding:16px;color:#fff;position:relative;}
.cho-kss .vscard__top .vrank{font-family:var(--serif);font-weight:800;font-size:13px;opacity:.9;}
.cho-kss .vscard__top h4{margin:3px 0 6px;font-size:18px;font-weight:800;line-height:1.3;}
.cho-kss .vscard__top .vtype{display:inline-block;background:rgba(255,255,255,.22);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;}
.cho-kss .vscard__rows{padding:6px 14px 14px;display:flex;flex-direction:column;}
.cho-kss .vsrow{padding:11px 0;border-bottom:1px dashed var(--line);}
.cho-kss .vsrow:last-child{border-bottom:none;}
.cho-kss .vsrow .k{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:5px;}
.cho-kss .vsrow .v{font-size:16px;font-weight:800;color:var(--green-900);margin-top:3px;}
.cho-kss .vsrow .v small{font-size:11px;color:var(--ink-3);font-weight:600;}
.cho-kss .vsrow.hot .v{color:var(--gold);}
.cho-kss .vsrow.best{background:var(--green-50);margin:0 -14px;padding:11px 14px;border-radius:8px;border:none;}
.cho-kss .vsrow.best .v::after{content:"◎ 最安/最良";font-size:10px;color:var(--green-600);font-weight:700;margin-left:7px;}
.cho-kss .vsrow .vbar{height:8px;border-radius:5px;background:var(--green-100);margin-top:7px;overflow:hidden;}
.cho-kss .vsrow .vbar > i{display:block;height:100%;border-radius:5px;}
.cho-kss .vscard__cta{margin:auto 14px 14px;text-align:center;background:var(--green-700);color:#fff;font-weight:700;font-size:13px;
  padding:10px;border-radius:9px;}
.cho-kss .vscard__cta:hover{background:var(--green-800);}
.cho-kss .vsempty{padding:50px 20px;text-align:center;color:var(--ink-3);}

/* ===== タイプ診断 ===== */
.cho-kss .quiz{background:linear-gradient(160deg,var(--green-800),var(--green-900));border-radius:var(--radius-lg);
  padding:30px 26px;color:#fff;margin:30px 0;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;}
.cho-kss .quiz::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);}
.cho-kss .quiz__head{display:flex;align-items:center;gap:13px;margin-bottom:6px;position:relative;}
.cho-kss .quiz__head .qi{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.15);display:grid;place-items:center;flex:none;}
.cho-kss .quiz__head .qi svg{width:25px;height:25px;}
.cho-kss .quiz__head h4{margin:0;font-family:var(--serif);font-size:21px;}
.cho-kss .quiz__head p{margin:2px 0 0;font-size:13px;color:#cfe6da;}
.cho-kss .quiz__prog{height:6px;background:rgba(255,255,255,.18);border-radius:5px;margin:20px 0;overflow:hidden;position:relative;}
.cho-kss .quiz__prog > i{display:block;height:100%;background:linear-gradient(90deg,var(--green-300),#fff);border-radius:5px;transition:width .35s;}
.cho-kss .quiz__step{font-size:12px;color:#cfe6da;font-weight:700;margin-bottom:10px;}
.cho-kss .quiz__q{font-family:var(--serif);font-size:clamp(19px,3vw,24px);font-weight:800;margin:0 0 20px;line-height:1.5;position:relative;}
.cho-kss .quiz__opts{display:grid;gap:11px;position:relative;}
.cho-kss .quiz__opt{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.18);
  border-radius:13px;padding:15px 18px;text-align:left;color:#fff;font-weight:600;font-size:15px;transition:.15s;}
.cho-kss .quiz__opt:hover{background:rgba(255,255,255,.2);border-color:#fff;transform:translateX(3px);}
.cho-kss .quiz__opt .oi{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none;}
.cho-kss .quiz__opt .oi svg{width:19px;height:19px;}
.cho-kss .quiz__back{margin-top:18px;font-size:13px;color:#cfe6da;font-weight:600;position:relative;}
.cho-kss .quiz__back:hover{color:#fff;text-decoration:underline;}

/* quiz result */
.cho-kss .qresult{position:relative;animation:cho-fade .4s;}
.cho-kss .qresult__label{font-size:13px;color:#cfe6da;font-weight:700;letter-spacing:.05em;}
.cho-kss .qresult h4{font-family:var(--serif);font-size:clamp(22px,4vw,30px);margin:6px 0 4px;}
.cho-kss .qresult__type{display:inline-block;background:rgba(255,255,255,.16);font-size:13px;font-weight:700;padding:5px 14px;border-radius:999px;margin-bottom:18px;}
.cho-kss .qresult__cards{display:grid;gap:12px;grid-template-columns:1fr;}
@media(min-width:560px){.cho-kss .qresult__cards{grid-template-columns:1fr 1fr;}}
.cho-kss .qrcard{background:#fff;border-radius:14px;padding:16px;color:var(--ink);display:flex;gap:13px;align-items:flex-start;box-shadow:var(--shadow);}
.cho-kss .qrcard .qr-rank{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-family:var(--serif);font-weight:800;
  color:#fff;flex:none;font-size:16px;}
.cho-kss .qrcard h5{margin:0 0 3px;font-size:16px;font-weight:800;color:var(--green-900);}
.cho-kss .qrcard .qr-type{font-size:11.5px;font-weight:700;color:var(--ink-3);}
.cho-kss .qrcard .qr-meta{font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.6;}
.cho-kss .qrcard .qr-go{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--green-700);}
.cho-kss .qresult__again{margin-top:20px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--green-800);
  font-weight:800;font-size:14px;padding:11px 22px;border-radius:999px;}

/* ===== ランキング詳細カード ===== */
.cho-kss .rankcards{display:flex;flex-direction:column;gap:20px;margin:26px 0;}
.cho-kss .rcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:118px 1fr;transition:box-shadow .2s,transform .2s;}
.cho-kss .rcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.cho-kss .rcard__rail{background:var(--rc,var(--green-700));color:#fff;padding:20px 14px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:8px;position:relative;}
.cho-kss .rcard__rail .rno{font-family:var(--serif);font-weight:800;line-height:1;}
.cho-kss .rcard__rail .rno small{display:block;font-size:11px;font-weight:700;opacity:.85;letter-spacing:.1em;margin-bottom:2px;}
.cho-kss .rcard__rail .rno b{font-size:44px;}
.cho-kss .rcard__crown{position:absolute;top:10px;right:10px;color:rgba(255,255,255,.55);}
.cho-kss .rcard__rail .rlogo{width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;
  font-weight:800;font-size:13px;font-family:var(--serif);margin-top:4px;letter-spacing:.02em;}
.cho-kss .rcard__main{padding:20px 22px;}
.cho-kss .rcard__main h3{margin:0 0 3px;font-family:var(--serif);font-size:clamp(19px,2.6vw,23px);font-weight:800;color:var(--green-900);}
.cho-kss .rcard__hl{font-size:13.5px;font-weight:700;color:var(--rc,var(--green-700));margin-bottom:12px;}
.cho-kss .rcard__badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.cho-kss .rcard__badges span{font-size:11px;font-weight:700;background:var(--bg-tint);border:1px solid var(--line);color:var(--ink-2);padding:3px 9px;border-radius:7px;}
.cho-kss .rcard__desc{font-size:14px;color:var(--ink-2);margin:0 0 14px;line-height:1.85;}
.cho-kss .rcard__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line);
  border-radius:11px;overflow:hidden;margin-bottom:14px;}
.cho-kss .rstat{background:#fff;padding:11px 8px;text-align:center;}
.cho-kss .rstat .k{font-size:10.5px;color:var(--ink-3);font-weight:700;}
.cho-kss .rstat .v{font-size:15px;font-weight:800;color:var(--green-900);margin-top:2px;line-height:1.2;}
.cho-kss .rstat .v small{font-size:10px;color:var(--ink-3);font-weight:600;}
.cho-kss .rcard__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.cho-kss .rcard__tags{display:flex;flex-wrap:wrap;gap:6px;flex:1;}
.cho-kss .rcard__tags .chip{font-size:11px;padding:3px 9px;}
.cho-kss .rcard__cta{display:inline-flex;align-items:center;gap:7px;background:var(--rc,var(--green-700));color:#fff;font-weight:800;
  font-size:13.5px;padding:10px 18px;border-radius:999px;white-space:nowrap;transition:filter .15s,transform .15s;}
.cho-kss .rcard__cta:hover{filter:brightness(1.08);transform:translateX(2px);}
.cho-kss .rcard__pick{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-2);
  border:1.5px solid var(--line);background:#fff;padding:9px 14px;border-radius:999px;transition:.13s;}
.cho-kss .rcard__pick:hover{border-color:var(--green-400);}
.cho-kss .rcard__pick.on{background:var(--gold-soft);border-color:var(--gold);color:#8a6a1a;}
.cho-kss .rcard__pick .pb{width:18px;height:18px;border-radius:5px;border:2px solid currentColor;display:grid;place-items:center;}
.cho-kss .rcard__pick.on .pb{background:var(--gold);border-color:var(--gold);color:#fff;}
.cho-kss .rcard__pick .pb svg{width:11px;height:11px;}

@media(max-width:640px){
  .cho-kss .rcard{grid-template-columns:84px 1fr;}
  .cho-kss .rcard__rail{padding:14px 8px;}
  .cho-kss .rcard__rail .rno b{font-size:32px;}
  .cho-kss .rcard__rail .rlogo{width:46px;height:46px;font-size:11px;}
  .cho-kss .rcard__stats{grid-template-columns:repeat(2,1fr);}
  .cho-kss .rcard__main{padding:16px;}
}

/* sticky compare hint */
.cho-kss .pickhint{display:flex;align-items:center;gap:10px;background:var(--gold-soft);border:1px solid #ecdcb4;border-radius:12px;
  padding:12px 16px;font-size:13px;color:#7a5d18;font-weight:600;margin:18px 0;}
.cho-kss .pickhint svg{width:20px;height:20px;flex:none;color:var(--gold);}