/* =========================================================
   競艇ランキングのデザイン（PC・SP共通）
   pc.css / sp.css の後に読み込み、ヘッダー・トップページの見た目を上書きします。
   色はこの先頭の「デザイントークン」を変えると全体に反映されます。
   ========================================================= */
:root{
  --k-navy:#ee774c;        /* 帯の色（比較表の項目・順位の帯・タブ）。変数名は共通部品のため k-navy のまま */
  --k-page:#ffffff; --k-surface:#ffffff; --k-text:#222; --k-muted:#777; --k-line:#d6d6d6;
  --k-red:#e8382c; --k-pale:#fffbe3; --k-pink:#ffffff; --k-orange:#ee774c; --k-tab-off:#a9a6a4;
  --k-green-1:#6fd84a; --k-green-2:#2fae2a; --k-green-3:#1f8c1e; --k-cmp-btn-1:#5cd43c; --k-cmp-btn-2:#2a9c1f;
  --k-dark-bar:#333; --k-hl:#ffe3b0; --k-micro-hl:#fff36b; --k-blue-1:#3d78ef; --k-blue-2:#79c2f0; --k-star:#f5a700;
  --k-metal-1:#d9d9d9; --k-metal-2:#efefef;
  --k-radar-fill:rgba(64,214,240,.65); --k-radar-line:#1b3cff;
  --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:12px;background:rgba(130,112,104,.88);color:#fff;font-size:20px}
#toTop.show{opacity:1}

/* ---------- ヘッダー（紺・ロゴ・MENU） ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--k-navy);border-bottom:0}
.site-header .wrap{max-width:var(--k-col);min-height:0;padding:12px 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:var(--k-pink)}
.hmenu-btn:hover,.hmenu.open .hmenu-btn{background:rgba(255,255,255,.08)}
.hmenu-txt{display:block;margin-top:2px;color:var(--k-pink);font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1}

/* トップページは中央の1カラム（スマホは画面幅いっぱい） */
main.wrap.k-top{max-width:var(--k-col);margin:0 auto;padding:0 0 8px;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:20px 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:24px 10px 0;padding:12px 10px;background:var(--k-navy);color:#fff;text-align:center;font-weight:700;font-size:clamp(18px,5.4vw,24px);line-height:1.4}
.k-sec-banner b{color:#ffd84a}
.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 0 8px}
.k-cmp-bottom{margin-top:48px}
.k-pr{display:flex;justify-content:flex-end;margin:8px 10px 0}
.k-cmp-scroll{margin:20px 8px 6px}
.k-cmp-scroll.is-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.k-cmp{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:2px;border:2px solid var(--k-navy);background:var(--k-navy)}
.is-scroll .k-cmp{grid-template-columns:repeat(var(--cols),minmax(118px,1fr));width:max-content;min-width:100%}
.k-cmp-head{position:relative;padding:12px 4px 8px;background:var(--k-surface);text-align:center}
.k-cmp-head .k-crown{display:block;width:62px;height:50px;margin:0 auto 4px}
.k-logo-link{display:block;text-decoration:none}
.k-logo{display:block;width:100%;max-height:96px;object-fit:contain;margin:0 auto}
.k-site{margin-top:8px;font-weight:700;font-size:clamp(13px,3.8vw,18px);line-height:1.3}
.k-cmp-label{grid-column:1/-1;padding:4px 6px;background:var(--k-navy);color:#fff;text-align:center;font-weight:700;font-size:clamp(15px,4.4vw,20px);letter-spacing:.06em;line-height:1.35}
.k-cmp-cell{display:grid;place-content:center;min-height:56px;padding:8px 4px;background:var(--k-surface);text-align:center;font-weight:700;line-height:1.45}
.k-cmp .is-top{background:var(--k-pale)}
.k-score{font-size:clamp(20px,6vw,28px);font-weight:700}
.k-score small{font-size:.75em;margin-left:4px}
.k-cmp .is-top .k-score,.k-cmp .is-top .k-val{color:var(--k-red)}
.k-mk{display:block;width:32px;height:32px;margin:0 auto 2px}
.k-val{font-size:clamp(14px,4.2vw,19px)}
.k-html{font-size:clamp(12px,3.6vw,16px)}
.k-html em{font-style:normal;color:var(--k-red)}
.k-reg-ic{display:block;width:40px;height:40px;object-fit:contain;margin:0 auto 4px}
.k-reg{font-size:14px}
.k-cmp-cell.t-cta{display:block;padding:3px}
.k-cmp .k-cmp-btn{display:block;min-height:0;max-width:none;margin:0;padding:8px 4px;border:1px solid #1d7a14;border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);background:linear-gradient(var(--k-cmp-btn-1),var(--k-cmp-btn-2));color:#fff;text-decoration:none;
  font-weight:700;font-size:clamp(13px,3.9vw,17px);line-height:1.4}
.k-cmp .cta-img img{display:block;width:100%;height:auto}
.k-scroll-hint{margin:0;padding:0 12px;text-align:right;font-size:12px;color:var(--k-muted)}
.k-cmp-sec .cmp-note{padding:0 12px}

/* ---------- 比較表：4件以上（横スクロール）のとき ---------- */
/* 1. 項目名（オレンジの帯）は横スクロールしても表示枠の中央に固定 */
.k-cmp-wrap{position:relative}
.k-cmp-scroll.is-scroll{container-type:inline-size}
.k-cmp-label-in{display:block}
.is-scroll .k-cmp-label-in{position:sticky;left:8px;width:calc(100vw - 32px);width:calc(100cqw - 16px);max-width:100%;text-align:center}
/* 2. 5件以上：4位までが表示枠に収まる幅にし、全角7文字が1枠に収まる文字サイズに */
.is-fit4 .k-cmp{--k-colw:calc((100cqw - 8px) / 4);--k-cmp-fs:min(18px, calc((var(--k-colw) - 8px) / 7.4));
  grid-template-columns:repeat(var(--cols),var(--k-colw));width:max-content;min-width:0}
.is-fit4 .k-cmp-head,.is-fit4 .k-cmp-cell{min-width:0;padding-left:4px;padding-right:4px}
.is-fit4 .k-cmp-cell.t-cta{padding:3px}
.is-fit4 .k-site,.is-fit4 .k-val,.is-fit4 .k-html,.is-fit4 .k-reg,.is-fit4 .k-cmp .k-cmp-btn{font-size:var(--k-cmp-fs);letter-spacing:0}
.is-fit4 .k-cmp .k-cmp-btn{padding:8px 1px;border-width:0}
.is-fit4 .k-score{font-size:calc(var(--k-cmp-fs) * 1.4)}
.is-fit4 .k-mk{width:calc(var(--k-cmp-fs) * 1.7);height:calc(var(--k-cmp-fs) * 1.7)}
/* 3. スクロールできることを知らせるポップアップ（1秒間） */
.k-scroll-pop{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%) scale(.92);padding:14px 22px;border-radius:999px;
  background:rgba(0,0,0,.72);color:#fff;font-weight:700;font-size:16px;line-height:1.3;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
.k-scroll-pop::before{content:"⇔";margin-right:8px}
.k-scroll-pop.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);transition:opacity .2s,transform .2s}
@media (prefers-reduced-motion:reduce){.k-scroll-pop,.k-scroll-pop.show{transition:none}}

/* ---------- ランキング ---------- */
.k-rank-sec{margin-top:44px}
.k-rank{margin-top:0}
.k-rank-head{position:relative;display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--k-navy);color:#fff}
.k-crown-l{width:54px;height:42px;flex:none}
/* 順位の画像（システム設定で差し替えた場合）：枠内に収めて縦横比を保つ */
img.k-crown,img.k-crown-l{object-fit:contain}
.k-rank-head h3{flex:1;margin:0;font-size:clamp(22px,6.6vw,32px);font-weight:700;line-height:1.3}
.k-ad{position:absolute;right:10px;bottom:6px;font-size:13px;opacity:.9}
.k-rank-body{padding:20px 22px 0}
.k-banner{display:block;text-decoration:none}
.k-banner img,.k-banner video{display:block;width:100%;height:auto}

.k-scorebox{margin-top:40px}
.k-score-box{padding:10px 0 12px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),linear-gradient(100deg,var(--k-metal-1),var(--k-metal-2) 45%,var(--k-metal-1) 70%,var(--k-metal-2))}
.k-score-bar{padding:10px;background:var(--k-dark-bar);color:#fff;text-align:center;font-weight:700;font-size:clamp(17px,5vw,22px)}
.k-score-num{margin:4px 0 0;text-align:center;font-weight:700}
.k-score-num strong{color:var(--k-red);font-size:clamp(40px,12vw,56px);line-height:1.2}
.k-score-num span{margin-left:10px;font-size:clamp(20px,6vw,28px)}
.k-radar{display:block;width:100%;max-width:380px;margin:0 auto}
.k-radar text{fill:var(--k-text);font-size:16px;font-family:var(--font)}
.k-radar-area{fill:var(--k-radar-fill);stroke:var(--k-radar-line)}
.k-radar-dot{fill:var(--k-radar-line)}

.k-strength{margin-top:22px;padding:0 12px 14px;border-radius:10px;background:linear-gradient(90deg,var(--k-blue-1),var(--k-blue-2));box-shadow:0 2px 6px rgba(0,0,0,.15)}
.k-strength h4{margin:0;padding:14px 4px;color:#fff;text-align:center;font-size:clamp(19px,5.6vw,26px);font-weight:700;letter-spacing:.04em;line-height:1.35}
.k-strength ul{list-style:none;margin:0;padding:6px 14px;background:var(--k-surface);box-shadow:inset 0 0 12px rgba(59,127,242,.25)}
.k-strength li{display:flex;align-items:center;gap:14px;padding:14px 0;font-weight:700;font-size:clamp(14px,4.2vw,18px);line-height:1.45}
.k-strength li em{font-style:normal;color:var(--k-red)}
.k-chk{flex:none;width:32px;height:32px}

.k-cta-area{margin:22px -8px 22px;text-align:center}           /* 上下の余白をそろえる */
.k-reviews + .k-cta-area{margin-top:34px;margin-bottom:34px}  /* 口コミ下のCTAは上下34px */
.k-rank-body{padding-bottom:1px}                                /* CTA下の余白が順位の帯まで確保されるように */
.k-micro{margin:0 0 4px;color:var(--k-text);font-weight:500;font-size:clamp(14px,4.3vw,18px)}
.k-micro mark{background:linear-gradient(transparent 45%,var(--k-micro-hl) 45%);color:inherit;font-weight:900}
.k-cta{display:block;margin:0 auto;padding:14px 12px;border-radius:999px;background:linear-gradient(var(--k-green-1),var(--k-green-2) 55%,var(--k-green-3));
  box-shadow:0 3px 8px rgba(0,0,0,.25);color:#fff;text-decoration:none;font-weight:900;font-size:clamp(20px,6vw,28px);line-height:1.3;letter-spacing:.06em;text-shadow:0 2px 2px rgba(0,0,0,.45)}
.k-cta:focus-visible{outline:3px solid var(--k-blue-1);outline-offset:4px}
.k-cta:active{transform:translateY(2px)}
.k-cta-img{display:block;margin:0 auto}
.k-cta-img img{display:block;width:100%;height:auto}

.k-results-sec{margin-top:30px}
.k-res-head{display:flex;align-items:center;gap:6px;padding:10px 12px;background:repeating-linear-gradient(-45deg,#e00 0 6px,#c00 6px 12px);color:#fff}
.k-res-head.is-img{display:block;padding:0;background:none}
.k-res-head.is-img img,.k-res-head.is-img video{display:block;width:100%;height:auto}
.k-trophy{width:60px;height:56px;flex:none}
.k-res-head .t1{display:inline-block;padding:0 14px;border-radius:999px;background:#fff;color:#222;font-weight:900;font-size:clamp(12px,3.7vw,16px)}
.k-res-head .t1 b{font-size:1.2em}
.k-res-head .t2{display:block;margin-top:2px;font-weight:900;font-size:clamp(20px,6vw,28px);letter-spacing:.04em;line-height:1.3}
.k-results{padding:12px;background:#ead6d6}
.k-res-card+.k-res-card{margin-top:16px}
.k-res-card img,.k-res-card video{display:block;width:100%;height:auto}

/* 口コミ（タブ＋表） */
.k-reviews{margin-top:6px}
.k-tabs{display:grid;grid-template-columns:1fr 1fr}
.k-tab{padding:14px 4px;border:0;background:var(--k-tab-off);color:#fff;font:700 clamp(16px,4.6vw,20px) var(--font);cursor:pointer}
.k-tab[aria-selected="true"]{background:var(--k-orange)}
.k-tab:focus-visible{outline:3px solid var(--k-blue-1);outline-offset:-4px}
.k-rv-table{border:2px solid #222;border-top:0;background:var(--k-surface)}
.k-rv-table.no-tabs{border-top:2px solid #222}
.k-rv-row{display:grid;grid-template-columns:27% 1fr}
.k-rv-row.head{background:var(--k-orange);color:#fff;font-weight:700;text-align:center;font-size:clamp(14px,4vw,17px)}
.k-rv-row.head div{padding:10px 2px}
.k-rv-row.head div+div,.k-rv-row:not(.head) .k-rv-text{border-left:2px solid #222}
.k-rv-row:not(.head){border-top:2px solid #222}
.k-rv-who{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 6px;text-align:center}
.k-avatar{width:clamp(72px,21vw,112px);aspect-ratio:1;overflow:hidden;border:1.5px solid #222;border-radius:50%;background:#e7e5ef}
.k-avatar img{width:100%;height:100%;object-fit:cover}
.k-stars{color:var(--k-star);font-size:clamp(14px,4vw,18px);letter-spacing:-.03em}
.k-stars .off{color:#ddd}
.k-who{font-weight:700;font-size:clamp(13px,3.8vw,16px)}
.k-rv-text{display:flex;flex-direction:column;justify-content:center;padding:14px 8px;font-size:clamp(14px,4vw,17px);line-height:1.6}
.k-rv-text mark{background:linear-gradient(transparent 55%,var(--k-hl) 55%);color:inherit;font-weight:700}
.k-rv-more{display:none}
.k-rv-more.open{display:block}
.k-rv-empty{padding:20px;text-align:center;color:var(--k-muted)}
.k-rv-toggle{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:10px;border:0;background:var(--k-orange);color:#fff;font:700 clamp(16px,4.6vw,20px) var(--font);cursor:pointer}
.k-rv-toggle svg{width:16px;height:10px;transition:transform .2s}
.k-rv-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.k-rv-toggle:focus-visible{outline:3px solid var(--k-blue-1);outline-offset:-4px}
.k-rv-foot{height:12px;background:var(--k-orange)}
.k-rv-note{margin:10px 0 0;text-align:center;font-size:12px;color:var(--k-muted)}

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

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

@media (prefers-reduced-motion:reduce){.k-rv-toggle svg{transition:none}}