/* ========================================
 * list-pc.css
 * 記事一覧
 * ======================================== */

/* 大枠 */
.list-wrap { width: 100%; background-color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-2); margin-top: 0; }

/* TOPページ1ページ目のみ、最新記事との間隔をあける */
body.home:not(.paged) .list-wrap { margin-top: 10px; }

/* カード */
.list-card { display: flex; gap: var(--padd-2); padding: var(--padd-4) 0; border-bottom: 1px solid var(--colr-1); }

/* 先頭カード上余白リセット */
.list-card:first-child { padding-top: 0; }

/* 最終カード下線削除 */
.list-card:last-child { padding-bottom: 0; border-bottom: none; }

/* サムネイル */
.list-thum { width: 150px; min-width: 150px; height: 120px; overflow: hidden; border-radius: var(--radi-1); border: 1px solid var(--colr-1); background-color: var(--colr-1); position: relative; flex-shrink: 0; display: block; text-decoration: none; transition: border-color 0.3s ease; }

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

/* オーバーレイ */
.list-thum::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--colr-4); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }

/* コメント数 */
.list-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; z-index: 1; transition: background-color 0.3s ease; }

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

/* 右側 */
.list-cont { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* タイトルリンク */
.list-titl-lnk { display: block; text-decoration: none; margin-top: var(--padd-4); }

/* タイトル */
.list-titl { color: var(--colr-1); border-radius: var(--radi-1); line-height: 1.3; font-weight: var(--fwgt-1); margin-top: -10px; font-size: var(--font-5); }

/* メタ */
.list-meta { display: flex; align-items: center; gap: var(--padd-2); margin-top: auto; transform: translateY(-2px); }

/* 日付 */
.list-date { font-size: var(--font-1); text-decoration: none; transition: color 0.3s ease; transform: translateY(7px); }

/* メタ右側 */
.list-meta-rght { margin-left: auto; }

/* カテゴリ */
.list-cate { background-color: var(--colr-1); color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-3); font-size: var(--font-1); text-decoration: none; }

/* カテゴリホバー */
.list-cate:hover { background-color: var(--colr-3); }

/* 記事リンク連動ホバー */
.list-card:has(.list-post:hover) .list-thum::after { opacity: 1; }

/* サムネイル連動ホバー */
.list-card:has(.list-post:hover) .list-thum > img { opacity: 0.8; filter: brightness(0.8); }

/* コメント数連動ホバー */
.list-card:has(.list-post:hover) .list-cmnt { background-color: var(--colr-3); }

/* タイトル連動ホバー */
.list-card:has(.list-post:hover) .list-titl { color: var(--colr-3); }

/* 枠線連動ホバー */
.list-card:has(.list-post:hover) .list-thum { border-color: var(--colr-3); }