/* ========================================
 * single-rltd-pc.css
 * 関連記事
 * ======================================== */

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

/* タイトル */
.rltd-titl { color: var(--colr-1); font-weight: var(--fwgt-1); font-size: var(--font-5); margin-bottom: var(--padd-2); }

/* リスト（2カラムグリッド） */
.rltd-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padd-2); list-style: none; }

/* カード */
.rltd-item { border-bottom: 1px solid var(--colr-1); padding-bottom: var(--padd-3); }

/* リンク全体 */
.rltd-link { display: flex; flex-direction: column; text-decoration: none; }

/* サムネイル */
.rltd-thmb { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radi-1); border: 1px solid var(--colr-1); background-color: var(--colr-1); position: relative; display: block; }

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

/* オーバーレイ */
.rltd-thmb::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; }

/* タイトル文字 */
.rltd-text { color: var(--colr-1); font-size: var(--font-3); line-height: 1.3; font-weight: var(--fwgt-1); margin: 5px 0; transition: color 0.3s ease; }

/* 記事リンク連動ホバー：オーバーレイ */
.rltd-link:hover .rltd-thmb::after { opacity: 1; }

/* 記事リンク連動ホバー：サムネイル */
.rltd-link:hover .rltd-thmb > img { opacity: 0.8; filter: brightness(0.8); }

/* 記事リンク連動ホバー：枠線 */
.rltd-link:hover .rltd-thmb { border-color: var(--colr-3); }

/* 記事リンク連動ホバー：タイトル */
.rltd-link:hover .rltd-text { color: var(--colr-3); }