/* ========================================
 * cmnt-rank-pc.css
 * PCコメントランキング
 * ======================================== */

/* ========================================
 * ランキング大枠
 * ======================================== */

/* ランキング大枠 */
.cmnt-rank-wrap { padding: 0 var(--padd-2) var(--padd-2); }

/* ========================================
 * タイトル
 * ======================================== */

/* タイトル */
.cmnt-rank-titl { background-color: var(--colr-1); color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-3); font-weight: var(--fwgt-1); margin-bottom: var(--padd-2); text-align: center; }

/* ========================================
 * ランキングリスト
 * ======================================== */

/* リスト */
.cmnt-rank-list { display: flex; flex-direction: column; gap: var(--padd-2); }

/* リストアイテム */
.cmnt-rank-item { border: 1px solid var(--colr-1); border-radius: var(--radi-1); overflow: hidden; }

/* ========================================
 * ランキングカード
 * ======================================== */

/* カードリンク */
.cmnt-rank-lnk { display: flex; align-items: flex-start; padding: 0 var(--padd-2) 5px; color: inherit; }

/* カードリンクホバー */
.cmnt-rank-lnk:hover { background-color: var(--colr-3); color: var(--colr-2); }

/* 順位（アイコン） */
.cmnt-rank-num { flex-shrink: 0; margin-left: -20px; align-self: center; }

/* メダルアイコン */
.cmnt-rank-medal { width: 120px; height: auto; display: var(--disp-1); }

/* コンテンツ（名前・本文・スコアの縦並び） */
.cmnt-rank-cont { display: flex; flex-direction: column; gap: var(--padd-4); }

/* 名前 */
.cmnt-rank-name { font-weight: var(--fwgt-1); padding-top: 5px; }

/* 本文 */
.cmnt-rank-body { line-height: 1.6; white-space: pre-wrap; }

/* スコア（いいね・悪いね） */
.cmnt-rank-score { display: flex; align-items: center; gap: var(--padd-3); font-weight: var(--fwgt-1); white-space: nowrap; }