/* ========================================
 * side-pc.css
 * PCサイドバー
 * ======================================== */

/* ========================================
 * サイドバー共通
 * ======================================== */

/* サイドバー */
.side { display: flex; flex-direction: column; width: 240px; flex-shrink: 0; background-color: var(--colr-2); border-radius: var(--radi-1); }

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

/* ========================================
 * 最新記事
 * ======================================== */

/* 最新記事セクション */
.side-new { background-color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-4) var(--padd-2) 0; }

/* 最新記事タイトル */
.side-new .side-titl { margin: 5px 0 10px; }

/* カードリンク */
.side-new-lnk { display: flex; flex-direction: column; position: relative; border: 1px solid var(--colr-1); border-radius: var(--radi-1); margin-bottom: var(--padd-2); overflow: hidden; background-color: var(--colr-1); min-height: 140px; }

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

/* サムネイル */
.side-new-lnk > img { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: var(--radi-1) var(--radi-1) 0 0; transition: opacity 0.3s ease, filter 0.3s ease; }

/* サムネなし */
.side-new-nimg { width: 100%; height: 140px; }

/* オーバーレイ */
.side-new-lnk::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 140px; background-color: var(--colr-4); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; border-radius: var(--radi-1) var(--radi-1) 0 0; }

/* オーバーレイホバー */
.side-new-lnk:hover::after { opacity: 1; }

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

/* コメント数 */
.side-new-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: 3; }

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

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

/* タイトル */
.side-new-titl { display: block; background-color: var(--colr-1); color: var(--colr-2); font-weight: var(--fwgt-1); padding: var(--padd-3); position: relative; z-index: 2; }

/* タイトルホバー */
.side-new-lnk:hover .side-new-titl { background-color: var(--colr-3); }

/* ========================================
 * アーカイブ
 * ======================================== */

/* アーカイブセクション */
.side-arch { background-color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-2); }

/* アーカイブリスト項目 */
.side-arch-list li { color: var(--colr-1); font-weight: var(--fwgt-1); }

/* アーカイブリスト項目ホバー */
.side-arch-list li:hover { color: var(--colr-3); }

/* アーカイブリンクホバー */
.side-arch-list li:hover a { color: var(--colr-3); }

/* ========================================
 * カテゴリ
 * ======================================== */

/* カテゴリセクション */
.side-cate { background-color: var(--colr-2); border-radius: var(--radi-1); padding: var(--padd-2); }

/* 区切り線 */
.side-arch::before, .side-cate::before { content: ""; display: block; border-top: 1px solid var(--colr-1); margin: 0 0 var(--padd-2); }

/* カテゴリリンク */
.side-cate-lnk { color: var(--colr-1); font-weight: var(--fwgt-1); }

/* カテゴリリンクホバー */
.side-cate-lnk:hover { color: var(--colr-3); }