@charset "utf-8";

/* 全体のコンテナ */
.article-list {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 15px;
}

/* 記事1つ分の箱 */
.article-card {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 25px 0;
    text-decoration: none !important;
    border-bottom: 1px solid #ddd;
    transition: 0.2s;
}

.article-card:hover {
    background-color: #f9f9ff;
}

/* 画像部分 */
.card-image {
    flex: 0 0 200px;
}

.card-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* テキスト部分：ここでは余計な装飾をせず、main.cssに任せる */
.card-body {
    flex: 1;
}

/* タイトルの上の余計な余白だけ削る（位置調整のため） */
.card-body h2 {
    margin-top: 0 !important;
    text-decoration: none; /* リンクの下線を消す */
}

/* スマホ表示の調整 */
@media (max-width: 600px) {
    .article-card {
        flex-direction: column;
        gap: 15px;
    }
    .card-image {
        flex: 0 0 auto;
        width: 100%;
    }
}