@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;.sp-cmp 500;600;700;900&display=swap');
:root {
  --gold:#fdc648;--gold-d:#e6a800;
  --blue:#1d5feb;--blue-d:#1548c9;
  --green:#10b981;--red:#ef4444;--orange:#f97316;
  --gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;
  --gray-500:#64748b;--gray-700:#334155;--gray-900:#0f172a;
  --r:8px;
}
.sp-cmp * {box-sizing:border-box;margin:0;padding:0}
.sp-cmp {font-family:'Noto Sans JP',-apple-system,sans-serif;font-size:13px;line-height:1.6;color:var(--gray-900)}

/* ── 並び替え・絞り込みバー ── */
.sp-cmp .sp-ctrl {background:#fff;border:1px solid var(--gray-200);border-radius:var(--r);padding:10px 5px;margin-bottom:16px}
.sp-cmp .sp-ctrl-row {display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:10px}
.sp-cmp .sp-ctrl-row:last-child {margin-bottom:0}
.sp-cmp .ctrl-label {font-size:11px;font-weight:700;color:var(--gray-700);white-space:nowrap;flex-shrink:0}
.sp-cmp .sort-btns {display:flex;gap:6px;flex-wrap:wrap}
.sp-cmp .sort-btn {padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--gray-200);color:var(--gray-700);background:#fff;cursor:pointer;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:4px}
.sp-cmp .sort-btn:hover, .sp-cmp .sort-btn.active {background:var(--blue);border-color:var(--blue);color:#fff}
.sp-cmp .sort-btn .arr {font-size:9px}
.sp-cmp .filter-chips {display:flex;gap:6px;flex-wrap:wrap}
.sp-cmp .fchip {padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--gray-200);color:var(--gray-700);background:#fff;cursor:pointer;transition:all .15s;font-family:inherit}
.sp-cmp .fchip:hover {border-color:var(--blue);color:var(--blue)}
.sp-cmp .fchip.on {background:var(--blue);border-color:var(--blue);color:#fff}
.sp-cmp .filter-groups {display:none;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:6px;padding:14px;margin-top:10px}
.sp-cmp .filter-groups.open {display:block}
.sp-cmp .fg-row {display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-bottom:10px}
.sp-cmp .fg-row:last-child {margin-bottom:0}
.sp-cmp .fg-label {font-size:11px;font-weight:700;color:var(--gray-500);min-width:100px;padding-top:4px;flex-shrink:0}
.sp-cmp .fg-chips {display:flex;flex-wrap:wrap;gap:5px}
.sp-cmp .fg-chip {padding:3px 10px;border-radius:14px;font-size:11px;font-weight:600;border:1px solid var(--gray-200);color:var(--gray-700);background:#fff;cursor:pointer;transition:all .15s;font-family:inherit}
.sp-cmp .fg-chip:hover {border-color:var(--blue);color:var(--blue)}
.sp-cmp .fg-chip.on {background:var(--blue);border-color:var(--blue);color:#fff}
.sp-cmp .filter-reset {margin-top:10px;font-size:11px;color:var(--blue);cursor:pointer;text-decoration:underline;background:none;border:none;font-family:inherit}
.sp-cmp .ctrl-toggle-btn {padding:5px 14px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid var(--gold);color:#92400e;background:rgba(253,198,72,.1);cursor:pointer;font-family:inherit;transition:all .15s}
.sp-cmp .ctrl-toggle-btn:hover {background:rgba(253,198,72,.2)}
.sp-cmp .result-count {font-size:11px;color:var(--gray-500);margin-left:auto}

/* ── テーブル ── */
.sp-cmp .sp-tbl-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 88vh;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
  background: #fff;
  margin-bottom: 16px;
}
.sp-cmp .sp-tbl-wrap::-webkit-scrollbar {height:3px;width: 3px;}
.sp-cmp .sp-tbl-wrap::-webkit-scrollbar-thumb {background:var(--gray-200);border-radius:3px}
.sp-cmp .sp-tbl {border-collapse:collapse;width:100%;min-width:1000px;margin-bottom: 0 !important;}

/* ヘッダー行（スティッキー） */
.sp-cmp .sp-tbl .th-row {position:sticky;top:0;z-index:40;background:#f8fafc;box-shadow:0 2px 6px rgba(0,0,0,.07)}
.sp-cmp .sp-tbl th {padding:9px 8px;font-size:11px;font-weight:700;color:var(--gray-700);text-align:center;border-bottom:2px solid var(--gray-200);border-right:1px solid var(--gray-100);white-space:nowrap}
.sp-cmp .sp-tbl th:first-child {text-align:left;padding-left:12px}
.sp-cmp .sp-tbl th:last-child {border-right:none}

/* 左カラム（スティッキー） */
.sp-cmp .sp-tbl .svc-col {position:sticky;left:0;z-index:20;background:#fff;min-width:110px;max-width:110px;padding: 5px 2px;border-right:2px solid var(--gray-200) !important;vertical-align:top}
.sp-cmp .sp-tbl tr:hover .svc-col {background:#f0f7ff}
.sp-cmp .svc-img {display:block;width:65px;height:65px;object-fit:contain;background:var(--gray-50);border-radius:4px;padding:0px;margin-bottom:7px}
.sp-cmp .svc-img-ph {width:72px;height:72px;background:var(--gray-100);border-radius:4px;margin-bottom:7px}
.sp-cmp .svc-nm {display:block;font-size:10px;font-weight:800;color:var(--gray-900);line-height:1.35;margin-bottom:4px;white-space:pre-wrap}
.sp-cmp .btn-official {display:inline-block;background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:5px 12px;border-radius:5px;text-decoration:none;transition:background .15s;white-space:nowrap}
.sp-cmp .btn-official:hover {background:var(--blue-d)}

/* データセル */
.sp-cmp .sp-tbl td {padding:8px;border-bottom:1px solid var(--gray-100);border-right:1px solid var(--gray-100);text-align:center;vertical-align:middle;font-size:11px;line-height:1.45}
.sp-cmp .sp-tbl td:last-child {border-right:none}
.sp-cmp .sp-tbl tr:hover td {background:#f8fbff}
.sp-cmp .sp-tbl tr:hover td.svc-col {background:#f0f7ff}
.sp-cmp .sp-tbl tr.hidden-row {display:none}

/* 総合評価 */
.sp-cmp .total-score {text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.sp-cmp .score-num {font-size:18px;font-weight:900;line-height:1}
.sp-cmp .total-stars {font-size:13px;line-height:1}
.sp-cmp .score-of {font-size:9px;color:var(--gray-500)}

/* 星 */
.sp-cmp .sf,.spq-wrap .sf {font-style:normal;line-height:1}
.sp-cmp .se,.spq-wrap .se {color:#e5e7eb;font-style:normal;line-height:1}
.sp-cmp .sp,.spq-wrap .sp {position:relative;color:#e5e7eb;font-style:normal;line-height:1}
.sp-cmp .sp::before,.spq-wrap .sp::before {content:'★';position:absolute;left:0;top:3px;width:var(--pct);overflow:hidden;color:var(--c);display:inline-block}
.sp-cmp .star-na {color:#d1d5db;font-size:11px}

/* 口コミ評点セル */
.sp-cmp .review-cell {background:#fffbf0 !important;min-width:110px}
.sp-cmp .review-stars {font-size:12px;line-height:1;margin-bottom:2px}
.sp-cmp .review-score {font-size:15px;font-weight:900;color:#92400e}
.sp-cmp .review-cnt {font-size:10px;color:var(--gray-500);display:block}
.sp-cmp .review-link {font-size:10px;color:var(--blue);text-decoration:none;display:block;margin-top:2px}
.sp-cmp .review-link:hover {text-decoration:underline}
.sp-cmp .sp-badge {display:inline-block;font-size:9px;font-weight:700;background:#fef3c7;color:#92400e;border:1px solid #fde68a;padding:1px 5px;border-radius:3px;margin-top:3px}

/* キャンペーン */
.sp-cmp .camp-cell {min-width:155px;text-align:left;background:#fff8f8 !important}
.sp-cmp .camp-text {background:#fff1f0;border:1px solid #fecaca;border-radius:5px;padding:6px 8px;font-size:10px;font-weight:600;color:#b91c1c;line-height:1.4;display:block}
.sp-cmp .camp-text a {color:#b91c1c;text-decoration:none}
.sp-cmp .camp-text a:hover {text-decoration:underline}
.sp-cmp .no-camp {color:var(--gray-300);font-size:11px}

/* アイコン */
.sp-cmp .y {color:var(--green);font-size:14px;font-weight:700}
.sp-cmp .n {color:var(--red);font-size:13px}
.sp-cmp .t {color:#f59e0b}
.sp-cmp .ck-note {color:var(--gray-500);font-size:10px;display:block}

/* メリデメ */
.sp-cmp .md-wrap {text-align:left;min-width:180px}
.sp-cmp .md-g {margin-bottom:6px}
.sp-cmp .md-head {font-size:10px;font-weight:700;padding:0px 6px;border-radius:3px;margin-bottom:1px;display:inline-block}
.sp-cmp .md-head.g {background:#dcfce7;color:#15803d}
.sp-cmp .md-head.b {background:#fee2e2;color:#b91c1c}
.sp-cmp .md-list {padding: 0 !important;padding-left:13px!important;font-size:11px!important;margin-bottom: 0 !important;}
.sp-cmp .md-list li {margin-bottom:0px;line-height:1;font-size:10.5px!important;}

/* 凡例・注釈 */
.sp-cmp .sp-legend {display:flex;gap:12px;flex-wrap:wrap;padding:10px 12px;background:var(--gray-50);border-radius:6px;margin-top:12px;font-size:11px;color:var(--gray-500);border:1px solid var(--gray-200)}
.sp-cmp .sp-legend span {display:flex;align-items:center;gap:4px}
.sp-cmp .sp-note {font-size:11px;color:var(--gray-500);margin-top:8px;line-height:1.7}
.sp-cmp .eeat-note {background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:10px 14px;margin-bottom:14px;font-size:12px;color:#92400e;line-height:1.6}
.sp-cmp .eeat-note strong {color:#78350f}

/* テキスト改行 */

/* レスポンシブ */
@media(max-width:600px){
.sp-cmp .sp-tbl {min-width:860px}
.sp-cmp .sp-tbl .svc-col {min-width:100px;max-width:100px}
.sp-cmp .svc-img {width:60px;height:60px;margin-bottom: 0;}
.sp-cmp .ctrl-label {font-size:10px}
.sp-cmp .sort-btn, .sp-cmp .fchip {font-size:10px;padding:4px 7px}
}

.sp-cmp .sp-tbl thead th.svc-col {z-index:50 !important;background:#f8fafc}

/* ── コントロールバー モーダル ── */
.sp-cmp .sp-ctrl-bar {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.sp-cmp .ctrl-open-btn {display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:6px;font-size:12px;font-weight:700;border:1.5px solid var(--gold);color:#92400e;background:rgba(253,198,72,.12);cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.sp-cmp .ctrl-open-btn:hover {background:rgba(253,198,72,.22)}
.sp-cmp .ctrl-badge {background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:0px 6px;border-radius:10px;display:none}
.sp-cmp .ctrl-result-cnt {font-size:11px;color:var(--gray-500);margin-left:6px}
.sp-cmp .ctrl-modal-ov {display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:flex-end;justify-content:center}
.sp-cmp .ctrl-modal-ov.open {display:flex}
@media(min-width:640px){
.sp-cmp .ctrl-modal-ov {align-items:center}
}
.sp-cmp .ctrl-modal-box {background:#fff;border-radius:16px 16px 0 0;padding:20px 18px 30px;width:100%;max-width:580px;max-height:88vh;overflow-y:auto}
@media(min-width:640px){
.sp-cmp .ctrl-modal-box {border-radius:14px}
}
.sp-cmp .ctrl-modal-hd {display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.sp-cmp .ctrl-modal-ttl {font-size:15px;font-weight:800;color:#0f172a}
.sp-cmp .ctrl-modal-cls {background:none;border:none;font-size:22px;cursor:pointer;color:#64748b;padding:2px 6px;line-height:1}
.sp-cmp .ctrl-sec {margin-bottom:15px}
.sp-cmp .ctrl-sec-lbl {font-size:10px;font-weight:700;color:var(--gray-500);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sp-cmp .ctrl-sec-lbl::after {content:'';flex:1;height:1px;background:var(--gray-100)}
.sp-cmp .ctrl-chips {display:flex;flex-wrap:wrap;gap:6px}
.sp-cmp .ctrl-chip {padding:6px 13px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid var(--gray-200);color:var(--gray-700);background:#fff;cursor:pointer;transition:all .15s;font-family:inherit}
.sp-cmp .ctrl-chip:hover {border-color:var(--blue);color:var(--blue)}
.sp-cmp .ctrl-chip.active {background:var(--blue);border-color:var(--blue);color:#fff}
.sp-cmp .ctrl-chip.sort-active {background:var(--blue);border-color:var(--blue);color:#fff}
.sp-cmp .ctrl-reset {margin-top:14px;width:100%;padding:10px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:7px;font-size:12px;font-weight:600;color:var(--gray-700);cursor:pointer;font-family:inherit}
.sp-cmp .ctrl-reset:hover {background:var(--gray-100)}
.sp-cmp .ctrl-done {margin-top:10px;width:100%;padding:12px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.sp-cmp .ctrl-done:hover {background:var(--blue-d)}


/* ── v4 追加修正パッチ ────────────────────────── */
/* 危険なグローバルクラスをsp-cmpスコープに閉じる */
.sp-cmp .sp-pre {white-space:pre-wrap}
.sp-cmp .sp-il {color:var(--blue);text-decoration:none}
.sp-cmp .sp-il:hover {text-decoration:underline}
.sp-cmp .sp-free {color:var(--green);font-weight:700}
.sp-cmp .sp-gray {color:var(--gray-500)}

/* 画像を中央揃え */
.sp-cmp .svc-col {text-align:center}
.sp-cmp .svc-img-wrap {display:flex;justify-content:center;margin-bottom:3px}
.sp-cmp .svc-nm {text-align:center}
.sp-cmp .btn-official {margin:0 auto;display:table}

/* 星の部分塗り修正（top:3px） */
.sp-cmp .sp::before {top:3px !important}

/* 総合評価 /5.00 */
.sp-cmp .score-of {font-size:9px;color:var(--gray-500)}

/* ヘッダー行スティッキー強化 */
.sp-cmp .sp-tbl thead {position:sticky;top:0;z-index:40}
.sp-cmp .sp-tbl .th-row {position:sticky;top:0;z-index:40;background:#f8fafc;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.sp-cmp .sp-tbl thead th {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #f8fafc;
  /* 下線を引いてスクロール時に境目を分かりやすくする */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}
.sp-cmp .sp-tbl thead th.svc-col {position:sticky;top:0;left:0;z-index:50 !important;background:#f8fafc}


/* 絞り込み 横スクロール対応 */
.sp-cmp .filter-row {
  flex-wrap: nowrap;
  align-items: center;
}
.sp-cmp .scroll-chips {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 4px;
  padding-bottom: 4px; /* スクロールバーのスペース */
}
.sp-cmp .scroll-chips::-webkit-scrollbar {
  height: 4px;
}
.sp-cmp .scroll-chips::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 2px;
}
.sp-cmp .scroll-chips .fchip {
  flex-shrink: 0; /* テキストの折り返し・ボタンの縮小を防ぐ */
}
.sp-cmp .sp-tbl a:not([rel~="nofollow"]) {
  color: var(--gray-900);
  text-decoration: underline!important;
  text-decoration-style: dotted!important;
  text-decoration-color: #cbd5e1!important;
  text-decoration-thickness: 1px!important;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.sp-cmp .sp-tbl a:not([rel~="nofollow"]):hover {
  text-decoration-color: var(--gray-500)!important;
}
.sp-cmp .sp-tbl td {
  white-space: pre-line;
}


/* 並び替えボタンの横スクロール対応 */
.sp-cmp .sort-row {
  flex-wrap: nowrap;
  align-items: center;
}
.sp-cmp .scroll-btns {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 4px;
  padding-bottom: 4px;
}
.sp-cmp .scroll-btns::-webkit-scrollbar {
  height: 4px;
}
.sp-cmp .scroll-btns::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 2px;
}
.sp-cmp .scroll-btns .sort-btn {
  flex-shrink: 0; /* ボタンが潰れないように固定 */
  white-space: nowrap;
}


/* =========================================
   口コミセル：ピュアCSS バーグラフUI
========================================= */
.sp-cmp .pure-css-reviews {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 120px;
  margin: 4px 0;
}

/* ヘッダー（点数・星・件数） */
.sp-cmp .pcr-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.sp-cmp .pcr-score {
  font-size: 16px;
  font-weight: 800;
  color: #ea580c; /* 総合評価とは少し違うオレンジ（変更可） */
}
.sp-cmp .pcr-count {
  font-size: 10px;
  color: var(--gray-500);
}
.sp-cmp .pcr-count a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-style: dotted;
}
.sp-cmp .pcr-count a:hover {
  text-decoration-color: var(--blue-d);
}

/* 棒グラフ部分 */
.sp-cmp .pcr-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sp-cmp .pcr-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--gray-500);
  line-height: 1;
}
.sp-cmp .pcr-label {
  width: 14px;
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
}
.sp-cmp .pcr-bar-bg {
  flex: 1;
  height: 6px; /* バーの太さ */
  background: var(--gray-200);
  border-radius: 3px;
  overflow: hidden;
}
.sp-cmp .pcr-bar-fill {
  height: 100%;
  background: #f59e0b; /* バーの色（Amazon風のイエローオレンジ） */
  border-radius: 3px;
}
.sp-cmp .pcr-pct {
  width: 20px;
  text-align: right;
  white-space: nowrap;
}

.sp-survey-note {
  background-color: #f8fafc;
  color: #888;           
  font-size: 9px;          
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 12px;
  margin-bottom: 16px;
  line-height: 1.3;
  text-align: justify;      
  word-break: break-all;
}
.sp-survey-note a {
  color: #888;
  text-decoration: underline;
}
.svc-img-wrap:hover {
  opacity: 0.8;
  transition: opacity 0.2s;
}













/* -------------------------------------
 * StorePro 診断ツール（spq）共通スタイル
 * ------------------------------------- */
 .spq{font-family:'Noto Sans JP',-apple-system,sans-serif;font-size:13px;line-height:1.6;color:#1e293b;--blue:#1d5feb;--gold:#fdc648;margin-top:20px}
 .spq *{box-sizing:border-box;margin:0;padding:0}
 .spq-wrap{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px;max-width:640px;margin: auto;margin-bottom: 16px;}
 .spq-title{font-size:16px;font-weight:800;color:#0f172a;margin-bottom:14px}
 .spq-sub{font-size:13px;color:#64748b;margin-bottom:20px;line-height:1.6}
 .spq-prog-wrap{display:flex;align-items:center;gap:10px;margin-bottom:20px}
 .spq-prog{flex:1;height:5px;background:#e2e8f0;border-radius:3px;overflow:hidden}
 .spq-prog-fill{height:100%;background:var(--blue);border-radius:3px;transition:width .3s}
 .spq-step-txt{font-size:11px;color:#64748b;white-space:nowrap}
 .spq-step{display:none}
 .spq-step.active{display:block}
 .spq-q{font-size:15px;font-weight:700;margin-bottom:16px}
 .spq-opts{display:flex;flex-direction:column;gap:10px}
 .spq-opt{display:flex;align-items:center;padding:10px 14px;background:#fff;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:700;color:#334155}
 .spq-opt:hover{border-color:var(--blue);background:#f0f9ff}
 .spq-opt input{margin-right:12px;width:18px;height:18px;cursor:pointer}
 .spq-nav{display:flex;justify-content:space-between;margin-top:24px}
 .spq-btn{padding:10px 20px;border-radius:6px;font-weight:700;cursor:pointer;border:none;transition:.2s}
 .spq-btn-back{background:#e2e8f0;color:#475569}
 .spq-btn-back:hover{background:#cbd5e1}
 .spq-result{display:none}
 .spq-result.show{display:block}
 .spq-result-title{font-size:18px;font-weight:800;text-align:center;margin-bottom:24px;color:var(--blue)}
 .spq-item{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-bottom:16px;position:relative}
 .spq-rank{position:absolute;top:-12px;left:-12px;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:11px;box-shadow:0 2px 4px rgba(0,0,0,.1);line-height:1.2;text-align:center}
 .spq-item .r1{background:linear-gradient(135deg,#f6d365,#fda085)}
 .spq-item .r2{background:linear-gradient(135deg,#e0c3fc,#8ec5fc)}
 .spq-item .r3{background:linear-gradient(135deg,#f093fb,#f5576c)}
 .spq-head{display:flex;gap:20px}
 .spq-img{width:120px;height:120px;object-fit:contain;border:1px solid #f1f5f9;border-radius:6px;padding:4px}
 .spq-img-ph{width:120px;height:120px;background:#f1f5f9;border-radius:6px}
 .spq-body{flex:1}
 .spq-name{font-size:18px;font-weight:800;margin-bottom:8px}
 .spq-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
 .spq-badge{font-size:10px;padding:2px 8px;background:#fef3c7;color:#b45309;border-radius:10px;font-weight:700}
 .spq-desc{font-size:12px;color:#475569;margin-bottom:16px;line-height:1.5}
 .spq-cost{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f8fafc;padding:12px;border-radius:6px;margin-bottom:16px;font-size:12px}
 .spq-cost-label{color:#64748b}
 .spq-cost-val{font-weight:700;text-align:right}
 .spq-review{font-size:12px;margin-bottom:16px}
 .spq-review strong{color:#ff2600;font-size:16px;margin:0 4px}
 .spq-btns{display:flex;gap:10px}
 .spq-btns a{flex:1;text-align:center;padding:12px;border-radius:6px;font-weight:700;text-decoration:none;font-size:14px;transition:.2s;display:block}
 .spq-btns .btn-official{background:var(--blue);color:#fff;text-decoration: none;}
 .spq-btns .btn-official:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--blue)}
 .spq-btns .btn-review{background:#fff;color:var(--blue);border:2px solid var(--blue)!important;}
 .spq-btns .btn-review:hover{background:#eff6ff}
 .spq-btns{flex-direction:column}
 .spq-opt input{margin: 0px 10px 0px 0px!important;}
 .spq-cost-val a{text-decoration: none!important;color: #1e293b;font-weight: 700;}
 @media(max-width:480px){
 .spq-head{flex-direction:column;align-items:center}
 .spq-img,.spq-img-ph{width:50%;height:160px}
 .spq-cost{grid-template-columns:1fr}
 .spq-cost-val{text-align:left}
}