/* ============================================================
   CV比較テーブル - フロントエンドCSS v2.1.1
   card モード + table モード（クリーン・PC幅修正）
   ============================================================ */

.cvt-table,.cvt-table *{box-sizing:border-box}
.cvt-table{margin:24px auto 16px;max-width:780px}

.cvt-hint{text-align:right;font-size:11px;color:#bbb;margin:0 0 6px;padding-right:4px}
.cvt-note{font-size:10px;color:#999;text-align:center;margin:8px 0 0;line-height:1.6}

/* ── CTA共通 ── */
.cvt-table .cvt-cta{display:block;text-align:center;font-size:12px;color:#fff!important;text-decoration:none!important;padding:10px 6px;background:#ff4444;border-radius:6px;font-weight:700;cursor:pointer;transition:opacity .2s;min-height:40px;line-height:1.5;-webkit-tap-highlight-color:rgba(255,68,68,0.3);touch-action:manipulation}
.cvt-table .cvt-cta:hover{opacity:.85}

/* ============================================================
   card モード
   ============================================================ */

.cvt-table .cvt-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch;padding:8px 0 4px}
.cvt-table .cvt-grid{display:flex;gap:8px;padding:6px 10px 10px;min-width:max-content;align-items:stretch}

.cvt-card{min-width:145px;flex:1;border:1.5px solid #e0e0e0;border-radius:10px;overflow:visible;background:#fff;position:relative;display:flex;flex-direction:column}
.cvt-card--featured{border:2px solid #0A9298;box-shadow:0 6px 20px rgba(10,146,152,.15);z-index:2}

.cvt-card__head{padding:12px 8px 8px;text-align:center;background:#fafafa;border-bottom:1px solid #eee;border-radius:10px 10px 0 0}
.cvt-card--featured .cvt-card__head{border-radius:8px 8px 0 0}
.cvt-card__logo{width:80px;height:80px;object-fit:contain;border-radius:8px;margin:0 auto 6px;display:block}
.cvt-card__name{font-size:12px;font-weight:700;line-height:1.3;color:#333}

.cvt-card__body{padding:10px 10px;flex:1;display:flex;flex-direction:column;gap:2px;text-align:center}
.cvt-plan-label{font-size:10px;color:#888;font-weight:600;margin-bottom:2px}
.cvt-price{color:#d61a5e;font-size:18px;font-weight:800;line-height:1.3}
.cvt-price-tax{font-size:9px;color:#888;margin-bottom:4px}

.cvt-points{list-style:none;margin:6px 0 0;padding:0;text-align:left;display:flex;flex-direction:column;gap:2px}
.cvt-points li{font-size:10px;line-height:1.5;color:#333;padding:2px 0 2px 18px;position:relative}
.cvt-points li::before{content:"\2713";position:absolute;left:0;top:1px;color:#0A9298;font-size:12px;font-weight:700}

.cvt-card__foot{padding:8px 10px 10px;margin-top:auto}

/* ============================================================
   table モード（tealヘッダー・クリーン）
   ============================================================ */

.cvt-table--tbl .cvt-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch;padding:0;position:relative}

.cvt-table .cvt-tbl{width:100%;border-collapse:collapse;font-size:12px}

/* ヘッダー */
.cvt-table .cvt-tbl thead th{padding:10px 12px;font-weight:500;text-align:center;font-size:11px;white-space:nowrap;background:#0A9298;color:#fff;border:none}
.cvt-table .cvt-tbl .cvt-tbl__th-clinic{text-align:center;width:130px;position:sticky;left:0;z-index:3;background:#0A9298}

/* ボディ */
.cvt-table .cvt-tbl tbody td{padding:12px 14px;border-bottom:1px solid #f0f0f0;text-align:center;vertical-align:middle;font-size:12px;color:#333}

/* 左列固定 */
.cvt-table .cvt-tbl .cvt-tbl__clinic{position:sticky;left:0;z-index:2;background:#fff;width:130px}

/* 先頭行: 他と同じ（テーブルモードでは差別化なし） */

/* クリニックセル内 */
.cvt-tbl__clinic-inner{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0}
.cvt-tbl__logo{width:48px;height:48px;object-fit:contain;border-radius:6px;display:block}
.cvt-tbl__name{font-size:10px;font-weight:700;color:#333;text-align:center;line-height:1.3}
.cvt-tbl__cta{width:100%;margin-top:2px}
.cvt-tbl__cta .cvt-cta{font-size:9px;padding:5px 4px;min-height:0;border-radius:4px}

/* 値セル */
.cvt-table .cvt-tbl .cvt-tbl__val--free{color:#0A9298!important;font-weight:700}
.cvt-tbl__sub{display:block;font-size:9px;color:#888;font-weight:400;margin-top:1px}
.cvt-tbl__dash{color:#ccc}

/* ── PC: stickyとボーダー解除、列幅均等 ── */
@media(min-width:768px){
.cvt-hint{display:none}
.cvt-card{min-width:0}

/* テーブル: PC時はstickyを解除して通常フロー */
.cvt-table .cvt-tbl .cvt-tbl__th-clinic,
.cvt-table .cvt-tbl .cvt-tbl__clinic{position:static;width:auto}

/* データ列を均等幅に */
.cvt-table .cvt-tbl{table-layout:fixed}
.cvt-table .cvt-tbl .cvt-tbl__th-clinic{width:140px}

/* 先頭行: 左ボーダーなし、背景のみで差別化 */
/* 左列の右ボーダーも不要 */
.cvt-table .cvt-tbl .cvt-tbl__clinic{border-right:none}
}

/* ── SP ── */
@media(max-width:767px){
/* SP: stickyとボーダー有効、min-widthでスクロール強制、列幅均等 */
.cvt-table .cvt-tbl{min-width:680px;table-layout:fixed}
.cvt-table .cvt-tbl .cvt-tbl__th-clinic{width:120px}
.cvt-table .cvt-tbl .cvt-tbl__clinic{border-right:1px solid #eee}
}

@media(max-width:480px){
.cvt-grid{gap:4px}
.cvt-card__head{padding:8px 4px 6px}
.cvt-card__logo{width:56px;height:56px}
.cvt-card__name{font-size:10px}
.cvt-card__body{padding:6px 6px}
.cvt-plan-label{font-size:9px}
.cvt-price{font-size:14px}
.cvt-price-tax{font-size:8px}
.cvt-points li{font-size:9px;padding-left:16px}
.cvt-points li::before{font-size:11px}
.cvt-card__foot .cvt-cta{font-size:10px;padding:8px 4px;min-height:36px}

.cvt-table .cvt-tbl{font-size:10px;min-width:600px;table-layout:fixed}
.cvt-table .cvt-tbl thead th{padding:8px 6px;font-size:9px}
.cvt-table .cvt-tbl tbody td{padding:8px 6px;font-size:10px}
.cvt-table .cvt-tbl .cvt-tbl__th-clinic{width:95px;min-width:95px}
.cvt-table .cvt-tbl .cvt-tbl__clinic{width:95px;min-width:95px}
.cvt-tbl__logo{width:36px;height:36px}
.cvt-tbl__name{font-size:8px}
.cvt-tbl__sub{font-size:8px}
}