/* ==============================
   市町村別ニュース（inc/areas/, area.php）
============================== */
.ka-areas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.ka-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fafafa;
    color: #1a1a1a;
    font-size: .88rem;
    font-weight: 700;
}
.ka-area:hover { border-color: #c62828; color: #c62828; background: #fff6f6; }
.ka-area-cnt {
    font-size: .72rem;
    font-weight: 700;
    color: #c62828;
    background: #fff0f0;
    padding: 1px 8px;
    border-radius: 999px;
}
.ka-area.is-empty { color: #999; font-weight: 600; }
.ka-area.is-empty .ka-area-cnt { color: #aaa; background: #f0f0f0; }

/* area.php のニュース一覧（トップの .news-list を流用。single-wrap 内なので外側の余白をなくす） */
.ka-news { margin: 0 0 16px; }

/* 記事ページ「地域：霧島市のニュース」 */
.ka-post-areas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 14px;
    font-size: .82rem;
}
.ka-post-areas-label {
    font-size: .72rem;
    font-weight: 700;
    color: #888;
}
.ka-post-areas a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #f0c8c8;
    border-radius: 999px;
    color: #c62828;
    font-weight: 700;
    background: #fff;
}
.ka-post-areas a:hover { background: #fff0f0; }