/* ===== 全体 ===== */
.related-archive {
width: 100%;
margin:20px auto;
padding:20px;
background-color: #f7f7f7;
}

.related-archive__title {
text-align:left;
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom:10px;
border-bottom: 3px dotted #888888;
}

.related-archive__list {
list-style: none;
padding: 0;
margin: 0;
}

.related-archive__item + .related-archive__item {
margin-top: 20px;
}

/* ===== カード ===== */
.related-card {
display: flex;
gap:15px;
text-decoration: none;
color: inherit;
background-color: #fff;
padding:20px;
transition: opacity 0.3s ease;
}

.related-card:hover {
opacity: 0.6;
}

/* ===== サムネイル ===== */
.related-card__thumb {
position: relative;
width: 220px;
aspect-ratio: 4 / 3;   /* ← 好きな比率に変更可 */
overflow: hidden;
border-radius: 10px;
}

.related-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;    /* ← 重要 */
display: block;
}

/* カテゴリラベル（サムネ上） */
.related-card__cat {
position: absolute;
left: 10px;
bottom: 10px;
background: #376b71;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 6px 10px;
border-radius: 4px;
}

/* ===== 本文 ===== */
.related-card__body {
flex: 1;
}

.related-card__ttl {
font-size: 18px;
line-height: 1.5;
margin: 0 0 8px;
font-weight: 700;
font-family: 'M PLUS Rounded 1c', sans-serif;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* ← 3行で制限 */
overflow: hidden;
}

/* 抜粋：行数制限（可変テキスト対応） */
.related-card__excerpt {
font-size: 14px;
line-height: 1.5;
color: #444;
margin: 0 0 8px;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* ← 3行で制限 */
overflow: hidden;
}

/* ===== 日付（アイコン付き） ===== */
.related-card__date {
font-size: 13px;
color: #666;
display: inline-flex;
align-items: center;
gap: 6px;

}

.related-card__date::before {
content: "🕒";
font-size: 14px;
}

/* ===== スマホ ===== */
@media (max-width: 768px) {
.related-card {
flex-direction: column;
}

.related-card__thumb {
width: 100%;
}

.related-card__ttl {
font-size: 17px;
}
}