/* ---------- テーブル（PC用） ---------- */
.news-table {
    width: 100%;
    border-collapse: collapse;
}
.news-table th,
.news-table td {
    border-bottom: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
/* ← ここを追加！カテゴリだけ中央揃え */
.news-table td.news-category {
    text-align: center;
}

.news-category.category-important { color: rgb(255, 0, 0); }
.news-category.category-update   { color: rgb(6, 119, 232); }
.news-category.category-release     { color: rgb(72, 204, 248); }
.news-category.category-info     { color: rgb(3, 199, 3); }


/* ---------- カード（スマホ用） ---------- */
.news-cards {
    display: none; /* ← デフォルトでは非表示（PC） */
}

@media screen and (max-width: 768px) {
    .news-table {
        display: none;
    }

    .news-cards {
        display: block;
    }

    .news-card {
        border-bottom: 1px solid #ccc;
        padding: 12px 8px;
    }

    .news-card .meta {
        font-weight: bold;
        margin-bottom: 4px;
    }

     /* 既存のスタイルに追加または修正 */
     .news-card .content1 {
        margin: 0px 0;
        text-align: left !important; /* ← ここを強制！ */
        display: block;
    }

    .news-card {
        text-align: left !important; /* ← 念のため親にも！ */
    }

    /* カテゴリ色を明示的に定義（スマホ用） */
    .category-important { color: rgb(255, 0, 0); }
    .category-update   { color: rgb(6, 119, 232); }
    .category-release     { color: rgb(72, 204, 248); }
    .category-info     { color: rgb(3, 199, 3); }

    .news-card .content1 {
        margin-top:5px;
        margin-bottom:5px;
        margin: 4px 0;
        text-align: left; /* ← これで中央揃えを防ぐ！ */
    }

    .news-card .link {
        margin-top: 4px;
        text-align: left;
    }
}