/* ========================================
 * rank-pc.css
 * ランキング
 * ======================================== */

/* ランキング大枠 */
.rank-wrap { width: var(--widt-1); margin: var(--marg-1); background-color: var(--colr-2); border-radius: var(--radi-1); overflow: hidden; border: 1px solid var(--colr-2); border-bottom: none; }

/* タイトルバー */
.rank-titl-bar { width: calc(100% - 20px); margin: var(--padd-2) auto 0; background-color: var(--colr-1); color: var(--colr-2); font-size: var(--font-1); font-weight: var(--fwgt-1); display: flex; align-items: center; justify-content: center; padding: 5px var(--padd-2); border-bottom: 1px solid var(--colr-2); border-radius: var(--radi-1); }

/* コンテンツエリア */
.rank-cont { display: flex; height: 300px; padding: var(--padd-2); gap: var(--padd-2); }

/* 広告スペース */
.rank-advt { width: 200px; height: 100%; flex-shrink: 0; border-radius: var(--radi-1); }

/* 広告画像 */
.rank-advt img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--colr-1); border-radius: var(--radi-1); display: block; }

/* グリッド */
.rank-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--padd-2); }

/* カード */
.rank-card { overflow: hidden; border-radius: var(--radi-1); }

/* カードリンク */
.rank-card-lnk { display: var(--disp-1); width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: var(--radi-1); }

/* サムネイル枠 */
.rank-thum { width: 100%; height: 100%; border: 1px solid var(--colr-1); border-radius: var(--radi-1); overflow: hidden; transition: border-color 0.3s ease; }

/* サムネイル */
.rank-thum img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s ease, filter 0.3s ease; }

/* サムネなし */
.rank-no-img { width: 100%; height: 100%; background-color: var(--colr-1); border-radius: var(--radi-1); }

/* サムネイル枠ホバー */
.rank-card-lnk:hover .rank-thum { border-color: var(--colr-3); }

/* サムネイルホバー */
.rank-card-lnk:hover .rank-thum img { opacity: 0.8; filter: brightness(0.8); }

/* タイトル */
.rank-titl { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: var(--padd-2); background-color: var(--colr-4); color: var(--colr-2); opacity: 0; text-align: center; transition: opacity 0.3s ease; word-break: break-all; font-size: var(--font-2); }

/* タイトルホバー */
.rank-card-lnk:hover .rank-titl { opacity: 1; }

/* コメント数 */
.rank-cmnt { position: absolute; top: 0; left: 0; padding: 2px 5px; background-color: var(--colr-1); color: var(--colr-2); font-size: var(--font-1); display: flex; align-items: center; gap: 3px; border-radius: 0 0 var(--radi-1) 0; }

/* コメントアイコン */
.rank-cmnt-icon { width: 12px; height: 12px; }

/* コメント数ホバー */
.rank-card-lnk:hover .rank-cmnt { background-color: var(--colr-3); }

/* ランキングなし */
.rank-none { padding: var(--padd-2); }

/* ネコ広告 */
.neko-advt { position: relative; }

/* ネコ画像（通常） */
.neko-advt-img { width: 100%; height: auto; display: block; }

/* ネコ画像（ホバー） */
.neko-advt-img-hover { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 0.3s; }

/* ホバー時切り替え */
.neko-advt:hover .neko-advt-img { opacity: 1; }
.neko-advt:hover .neko-advt-img-hover { opacity: 1; }