/* =========================================================
   競艇ランキング（スカイブルー版）のデザイン（PC・SP共通）
   pc.css / sp.css の後に読み込み、ヘッダー・トップページの見た目を上書きします。
   色はこの先頭の「デザイントークン」を変えると全体に反映されます。
   ========================================================= */
:root{
  --k-sky:#36abe6;        /* 比較表の見出し・ランキングの背景 */
  --k-navy:#232a7c;       /* 評価ボックス・アコーディオン */
  --k-page:#ffffff; --k-surface:#ffffff; --k-text:#222; --k-muted:#666; --k-line:#9a9a9a;
  --k-red:#e8211b; --k-head:#f4f5dc; --k-orange:#f39a1c;
  --k-btn-top-1:#e8441c; --k-btn-top-2:#c42a0c; --k-btn-1:#1f9a3c; --k-btn-2:#0d7a26;
  --k-cta-1:#10c74a; --k-cta-2:#07a63a; --k-cta-sh:#078a30;
  --k-col:600px;           /* PCでのトップページの横幅 */
  --font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ページ全体 ---------- */
body{background:var(--k-page);color:var(--k-text);font-family:var(--font)}
#toTop{width:64px;height:64px;border-radius:10px 0 0 0;background:var(--k-sky);color:#fff;font-size:18px;right:0;bottom:0}
#toTop.show{opacity:1}

/* ---------- ヘッダー（任意） ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--k-sky);border-bottom:0}
.site-header .wrap{max-width:var(--k-col);min-height:0;padding:10px 14px}
.site-header .logo{color:#fff;font-size:20px}
.site-header .logo.has-img{display:block;width:62%;max-width:260px;padding:4px 8px;background:#fff}
.site-header .logo.has-img img{display:block;width:100%;height:auto}
.site-header .updated{color:#fff}
.hmenu-btn{width:auto;height:auto;padding:4px;gap:4px;align-items:center}
.hmenu-btn span{width:30px;height:3px;background:#fff}
.hmenu-txt{display:block;margin-top:2px;color:#fff;font-size:11px;font-weight:700;line-height:1}

main.wrap.k-top{max-width:var(--k-col);margin:0 auto;padding:0;background:var(--k-page);overflow:hidden}
.k-top .sbox-wrap.in{margin:16px 12px 0}
.k-top .topblock{padding:0 14px}
.k-top .cmp-top.page-pr{padding:6px 12px 0;margin:0}
.k-fv img,.k-fv video{display:block;width:100%;height:auto;border-radius:0}
.k-adban{padding:16px 6px 0}
.k-adban a{display:block}
.k-adban img,.k-adban video{display:block;width:100%;height:auto}
.k-admark{margin:4px 10px 0;text-align:right;font-size:13px}

.k-sec-banner{margin:20px 6px 0;padding:12px 10px;background:var(--k-sky);color:#fff;text-align:center;font-weight:900;font-size:clamp(18px,5.4vw,24px);line-height:1.4}
.k-sec-banner.is-img{padding:0;background:none}
.k-sec-banner.is-img img,.k-sec-banner.is-img video{display:block;width:100%;height:auto}

/* ---------- 比較表 ---------- */
.k-cmp-sec{margin:0}
.k-pr{display:flex;justify-content:flex-end;margin:8px 8px 0}
.k-cmp-wrap{margin:8px 4px 10px;border:2px solid var(--k-sky)}
.k-cmp-wrap.is-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.k-cmp{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center;font-weight:700;line-height:1.4}
.k-cmp th,.k-cmp td{border:1px solid var(--k-line);padding:8px 4px;vertical-align:middle;background:var(--k-surface);word-break:break-all}
.k-cmp .k-rh{width:60px;background:var(--k-sky);color:#fff;font-size:clamp(11px,3.4vw,14px);line-height:1.35}
.is-scroll .k-cmp{width:auto;min-width:100%}
.is-scroll .k-cmp td,.is-scroll .k-cmp .k-crown-cell{min-width:112px;width:112px}
.is-scroll .k-cmp .k-rh{position:sticky;left:0;z-index:2}
.k-cmp thead th.k-crown-cell{background:var(--k-sky)}
.k-crown{display:block;width:44px;height:36px;margin:0 auto}
.r-logo td{padding:6px}
.k-logo-link{display:block;text-decoration:none}
.k-logo{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.r-name td{font-weight:500;font-size:clamp(12px,3.6vw,15px)}
.k-score{font-size:clamp(20px,6vw,26px);font-weight:900}
.k-score small{font-size:.8em}
.k-cmp td.is-top .k-score{color:var(--k-red)}
.r-text td,.r-html td{font-size:clamp(11px,3.4vw,14px);font-weight:500;text-align:left}
.k-html em{font-style:normal;color:var(--k-red);font-weight:700}
.k-cstars{display:block;font-size:clamp(11px,3.4vw,14px);letter-spacing:.04em}
.k-cnum{display:block;font-size:clamp(13px,3.8vw,16px);font-weight:500}
.k-cmp td.is-top .k-cstars,.k-cmp td.is-top .k-cnum{color:var(--k-red)}
.k-mark{display:block;font-size:26px;line-height:1}
.k-mark.dbl{color:var(--k-red)} .k-mark.sgl{color:#e8b400} .k-mark.tri{color:#6c9ce6} .k-mark.x{color:#999}
.r-cta td{padding:6px 5px}
.k-cmp .k-cmp-btn{display:block;min-height:0;max-width:none;margin:0;padding:7px 2px;border-radius:4px;box-shadow:0 2px 0 rgba(0,0,0,.25);
  background:linear-gradient(var(--k-btn-1),var(--k-btn-2));color:#fff;text-decoration:none;font-weight:700;font-size:clamp(12px,3.8vw,16px);line-height:1.3}
.k-cmp td.is-top .k-cmp-btn{background:linear-gradient(var(--k-btn-top-1),var(--k-btn-top-2))}
.k-cmp .cta-img img,.k-cmp .cta-img video{display:block;width:100%;height:auto}
.k-scroll-hint{margin:-4px 0 8px;padding:0 10px;text-align:right;font-size:12px;color:var(--k-muted)}
.k-cmp-sec .cmp-note{padding:0 10px}

/* ---------- ランキング（水色の背景に白いカード） ---------- */
.k-rank-sec{padding:12px 8px 1px;background:var(--k-sky)}
.k-rank-title{margin:0 0 12px}
.k-rank{margin-bottom:12px;border-radius:8px;overflow:hidden;background:var(--k-surface)}
.k-rank-head{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--k-head)}
.k-crown-l{width:46px;height:36px;flex:none}
.k-rank-head h3{flex:1;margin:0;font-size:clamp(17px,5vw,22px);font-weight:900;line-height:1.3}
.k-ad{position:absolute;right:4px;bottom:2px;font-size:11px}
.k-rank-body{padding:10px 12px 1px}

/* 画像＋評価ボックス */
.k-top-row{display:grid;grid-template-columns:44% 1fr;gap:12px;align-items:center}
.k-top-row.no-thumb{grid-template-columns:1fr}
.k-thumb{display:block;text-decoration:none}
.k-thumb img,.k-thumb video{display:block;width:100%;height:auto;border-radius:4px}
.k-evbox{background:var(--k-navy);padding:3px;border-radius:3px;color:#fff}
.k-ev-score{text-align:center}
.k-ev-h{padding:4px 0;font-weight:700;font-size:clamp(12px,3.6vw,15px)}
.k-ev-v{background:var(--k-surface);color:var(--k-text);font-weight:900;font-size:clamp(18px,5.4vw,24px);line-height:1.5}
.k-ev-v small{font-size:.75em}
.k-ev-row{display:grid;grid-template-columns:42% 1fr;margin-top:3px;align-items:center}
.k-ev-l{padding:4px 2px;text-align:center;font-weight:700;font-size:clamp(10px,3vw,12px)}
.k-ev-n{background:var(--k-surface);color:var(--k-text);text-align:right;padding:2px 10px;font-weight:900;font-size:clamp(14px,4.2vw,18px)}
.k-ev-n small{font-size:.75em;margin-left:4px;font-weight:500}

/* 評価アイコン */
.k-rates{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:16px 0 0;padding:0;text-align:center}
.k-rates li{display:flex;flex-direction:column;align-items:center;gap:2px}
.k-rate-ic{width:clamp(48px,15vw,68px);height:clamp(48px,15vw,68px);object-fit:contain}
.k-rate-l{font-weight:700;font-size:clamp(11px,3.4vw,14px)}
.k-starrow{font-size:clamp(11px,3.2vw,14px);letter-spacing:-.04em;line-height:1}
.k-starrow .off{color:#ccc}

.k-desc{margin:18px 0 0;font-size:clamp(14px,4vw,16px);line-height:1.7}
.k-desc b{font-weight:900}
.k-desc em{font-style:normal;font-weight:900;color:var(--k-red)}

/* アコーディオン */
.k-acc{margin-top:16px;border-radius:4px;background:var(--k-navy)}
.k-acc-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px 10px 16px;border:0;background:none;color:#fff;
  font:700 clamp(13px,3.8vw,15px) var(--font);text-align:left;cursor:pointer}
.k-acc-btn:focus-visible{outline:3px solid #ffd84a;outline-offset:-3px}
.k-acc-ic{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:#fff}
.k-acc-ic::before,.k-acc-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.6px;margin:-1.3px 0 0 -6px;border-radius:2px;background:var(--k-navy)}
.k-acc-ic::after{transform:rotate(90deg);transition:transform .2s}
.k-acc-btn[aria-expanded="true"] .k-acc-ic::after{transform:rotate(0)}
.k-acc-body{padding:0 8px 8px}

/* 検証パネル */
.k-vf{margin-top:8px;padding:12px 10px 1px;border-radius:6px;background:var(--k-surface)}
.k-vf:first-child{margin-top:0}
.k-vf-t{margin:0 0 10px;color:var(--k-orange);text-align:center;font-size:clamp(14px,4.2vw,17px);font-weight:900}
.k-vf-b{font-size:clamp(13px,3.8vw,15px);line-height:1.7}
.k-vf-b b{font-weight:900}
.k-vf-b em{font-style:normal;font-weight:900;color:var(--k-red)}

/* 口コミ */
.k-rv{margin-top:8px;padding:8px 10px;border-radius:4px;background:var(--k-surface)}
.k-rv:first-child{margin-top:0}
.k-rv-h{margin:0;font-size:clamp(13px,3.8vw,15px)}
.k-rv-ev{white-space:nowrap;font-weight:700}
.k-rv-st{color:var(--k-orange)}
.k-rv-ev{color:var(--k-text)}
.k-rv-t{font-size:clamp(13px,3.8vw,15px);line-height:1.6}
.k-rv-note{margin:6px 0 0;color:#fff;text-align:right;font-size:11px;line-height:1.5}

/* CTA（ボタン／画像・動画） */
.k-cta-area{margin:12px 0 18px;text-align:center}
.k-deco{display:block;width:120px;height:auto;margin:0 auto -6px;position:relative;z-index:1}
.k-cta{position:relative;display:flex;align-items:center;justify-content:center;max-width:460px;margin:0 auto;padding:16px 46px;border-radius:999px;
  background:linear-gradient(var(--k-cta-1),var(--k-cta-2));box-shadow:0 5px 0 var(--k-cta-sh);color:#fff;text-decoration:none;font-weight:900;font-size:clamp(17px,5.2vw,23px);line-height:1.3}
.k-tri{position:absolute;right:22px;top:50%;width:14px;height:18px;margin-top:-9px}
.k-cta:focus-visible,.k-cta-media:focus-visible{outline:3px solid #ffd84a;outline-offset:4px}
.k-cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--k-cta-sh)}
.k-cta-media{display:block;max-width:460px;margin:0 auto}
.k-cta-media img,.k-cta-media video{display:block;width:100%;height:auto;border-radius:6px}
.k-vf .k-cta-area{margin:16px -2px 14px}

.k-camp{margin-top:16px}
.k-camp img,.k-camp video{display:block;width:100%;height:auto}

.k-cmp-bottom{padding-top:12px}
.search-results .k-rank-sec{max-width:var(--k-col);margin:0 auto}
.site-footer{background:var(--k-sky);color:#fff;border-top:0}
.site-footer a{color:#fff}

@media (prefers-reduced-motion:reduce){.k-acc-ic::after{transition:none}}