/* list.css v2 案 M80 = T2＋S80（390px 未満だけ枠 80px）＋P1＋H1＋F2（F1 は外した）。base = 0.9 ⑥ の list.css（sha256 02623478…）。P・H・T・S・F は ---- X ---- ... ---- /X ---- の塊ごとに差し替えられる */
@import url('/assets/product.css');
/* style guide 0.9 ⑥（案）: 一覧のページ（/ranking/・/category/<slug>/）。product.css の部品（.cta-btn・.prl・.pr・.mc-j・[data-v]→--vc・.btn.main）を @import で得て、一覧の規則だけ足す。表紙の画像は無い。 */
/* 判定の無い行の札（--vc は --un） */
.mc-j.v-none{--vc:var(--un)}
.list{position:relative;z-index:1;padding-top:16px;padding-bottom:32px}

/* ---- 頭（h1・取得時刻・並びの断り・PR の断り・判定つきへの道） ---- */
/* h1 は「{分類}の<wbr>人気順ランキング」（総合は「Brain の<wbr>人気順ランキング」）。keep-all で「の」の後だけで折る（b1 の測りで 320 の「ランキン／グ」の 1 字落ちを直す） */
.lh h1{display:block;overflow:visible;margin:0 0 8px;font-size:clamp(22px,6vw,32px);line-height:1.3;word-break:keep-all;overflow-wrap:anywhere;-webkit-line-clamp:unset;line-clamp:unset}
.lh p{margin:0}
.lh .nw{white-space:nowrap}
.asof{font-size:14px;line-height:1.5;font-weight:700;color:var(--ink)}
.lnote{margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink)}
.tj{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--acc);text-decoration:none}
.tj:hover{text-decoration:underline}
.tj:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}
/* 取得が 48 時間より古い時の札（置き場所 = 取得時刻の直下・出す時は hidden を外し、紹介ボタンは普通のリンクに落とす） */
.stale{margin-top:8px;padding:8px 12px;border-left:4px solid var(--amber);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--amber) 14%,transparent);font-size:13px;line-height:1.5;color:var(--ink)}
.stale[hidden]{display:none}

/* 案 D: /ranking/ だけ、帯の下に閉じた details（summary「分類を選ぶ {今いる所}」・開くと 16 分類＋総合のチップ）。JS なしで全分類へ 1 タップ。分類のページには置かない */
.cn{margin-top:8px}
.cn a{display:inline-flex;flex:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:22px;background:var(--glass);color:var(--ink);font-size:13px;font-weight:700;line-height:1.3;text-decoration:none;white-space:nowrap}
.cn a:hover{background:var(--glass-2)}
.cn a:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.cn a[aria-current="page"]{background:var(--acc);border-color:transparent;color:var(--ink-dark)}
.cn-w{display:flex;flex-wrap:wrap;gap:8px}
.cn-d summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--glass);color:var(--ink);font-size:14px;font-weight:700;line-height:1.3;cursor:pointer;list-style:none}
.cn-d summary::-webkit-details-marker{display:none}
.cn-d summary b{color:var(--acc)}
.cn-d summary::after{content:"▾";margin-left:auto;color:var(--acc)}
.cn-d[open] summary::after{content:"▴"}
.cn-d summary:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.cn-d .cn-w{margin-top:8px}

/* 案 X: 上の帯（.tabs）が分類の道。今の kasege の帯は 600px 以下で高さ約 40.5px（padding 8px）なので、一覧のページだけ 44px に */
.tabs a{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:44px}

/* ---- PRB 行ごと・先頭の PR の札は撤去（owner 10/14）---- */
/* ---- /PRB ---- */
/* ---- 行（順位・サムネイル・題名・作者の表示名・価格・判定の札・Brain へのボタン）
   v2: 行ごとの広告 2 行（.pn の .prl と .rnote）は無い。1 行 = 題名／作者 と 価格／[判定の札 ←→ ボタン]。格子（.rw の列と面）は T の塊、ボタンの外の包み .cb と PR の札は P の塊 ---- */
.rows{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.rw:last-child{border-bottom:0}
.rk{grid-area:rk;font-size:16px;font-weight:900;line-height:1.5;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.nm{grid-area:nm;margin:0;min-width:0;font-size:14px;font-weight:700;line-height:1.5;line-break:strict;overflow-wrap:anywhere}
@supports (word-break:auto-phrase){.nm{word-break:auto-phrase}}
.au{grid-area:au;margin:0;min-width:0;font-size:13px;line-height:1.5;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc{grid-area:pc;margin:0;font-size:15px;font-weight:900;line-height:1.5;white-space:nowrap}
.pc small{margin-left:2px;font-size:12px;font-weight:700;color:var(--mut)}
.bar{grid-area:bar;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;margin-top:2px}
.jd{min-width:0}
.jd .mc-j{margin-top:0;padding:5px 8px;line-height:1.3}
.jd .mc-j b{line-height:1.3}
.jl{display:flex;align-items:center;min-height:44px;border-radius:8px;color:inherit;text-decoration:none}
.jl .mc-j{flex:1}
.jl .go2{margin-left:4px;font-size:12px;font-weight:700;color:var(--acc)}
.jl:hover .go2{text-decoration:underline}
.jl:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
/* ボタン: 紹介の行も普通の行も同じ（幅は字に合わせる・高さ 44px）。右寄せは外の包み .cb（P の塊）がする */
.rw .cta-btn{flex:none;width:auto;min-height:44px;font-size:14px;letter-spacing:0;padding:8px 8px 8px 14px;gap:8px}
.rw .cta-btn .go{width:24px;height:24px;font-size:16px}
/* ---- T2 サムネイル: 600px 以下は左に幅 112px（高さ約 59px）・601px 以上は幅 160px（約 84px）。順位はサムネイルの左上の角に重ねる小さな札（14px・地は --ink-dark 88%・字は --ink）---- */
.rw{display:grid;grid-template-columns:112px minmax(0,1fr) auto;grid-template-areas:"th nm nm" "th au pc" "bar bar bar";gap:2px 8px;align-items:start;padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.th{grid-area:th;width:112px}
.th{--thbg:linear-gradient(135deg,color-mix(in srgb,var(--ink) 14%,var(--bg1)),color-mix(in srgb,var(--ink) 5%,var(--bg1)));position:relative;display:block;aspect-ratio:800/419;border-radius:8px;overflow:hidden;background:var(--thbg)}
.th::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.th img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.rk{grid-area:th;z-index:1;justify-self:start;align-self:start;min-width:26px;padding:0 7px;border-radius:8px 0 8px 0;background:color-mix(in srgb,var(--ink-dark) 88%,transparent);font-size:14px;line-height:22px}
@media (min-width:601px){
  .rw{grid-template-columns:160px minmax(0,1fr) auto;grid-template-areas:"th nm nm" "th au pc" "th bar bar";gap:2px 16px;padding:10px 16px}
  .th{width:160px}
}
@media (min-width:1100px){
  .rw{grid-template-columns:160px minmax(0,1fr) 104px 176px auto;grid-template-areas:"th nm pc jd bt" "th au pc jd bt";gap:2px 16px;align-items:center}
  .bar{display:contents}
  .th{align-self:start}
  .rk{align-self:start}
  .nm{align-self:end;font-size:15px}
  .au{align-self:start}
  .pc{text-align:right}
  .jd{grid-area:jd;align-self:center}
}
/* ---- /T2 ---- */
/* ---- S80 390px 未満だけ小さいサムネイル（幅 80px・高さ約 42px）。T2 の 600px 以下の規則（112px）を 389px 以下だけ上書きする。M80 と M96 の違いはこの塊だけ ---- */
@media (max-width:389px){
  .rw{grid-template-columns:80px minmax(0,1fr) auto}
  .th{width:80px}
}
/* ---- /S80 ---- */
/* ---- P1 紹介でも普通でも同じボタンの包み。行ごとの PR の札は置かない ---- */
.cb{position:relative;display:flex;flex:none;margin-left:auto}
@media (min-width:1100px){.cb{grid-area:bt;justify-self:end;margin-left:0}}
/* ---- /P1 ---- */
/* ---- H1 頭の PR は本文と同じ 16px・通常の色と太さ。地・枠・札なし（359px 以下の13pxは維持）---- */
.lh .prl{display:block;margin-top:8px;padding:0;border:0;border-radius:0;background:none;font-size:16px;font-weight:400;line-height:1.5;color:var(--ink)}
@media (max-width:359px){.lh .prl{font-size:13px}}
/* ---- /H1 ---- */
/* ---- F2 読めない時（onerror="this.hidden=true"）: 画像だけを隠し、枠の背景が残る。.th img の display を上書きしているので [hidden] を明示 ---- */
.th img[hidden]{display:none}
/* ---- /F2 ---- */

@media (min-width:1100px){
  /* 帯は 1100px 以上で折り返して 19 本を全部見せる（0.9 ⑥ のまま） */
  .tabs{overflow-x:visible}
  .tabs .wrap{flex-wrap:wrap}
}