/*.filter-area {
    width: 100%;
    background-color: #f9f9f9;
}*/
/**/
/* フィルター全体を縦並びに */
.filter-area-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 90%;
    /*max-width: 1200px;*/
    margin: 1rem auto;
    padding: 1rem 2rem;
    background-color: #f9f9f9;
    /*border: 1px solid #F4F4F4;*/
}

/* 各ブロック：カテゴリ or タグ */
.filter-block {
    display: flex;
    flex-direction: column;
}

/* 行：見出しとボタンを横並び */
.filter-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* 見出し */
.filter-title {
    min-width: 90px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 1rem;
    line-height: 2rem;
}

/* ボタン群 */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    flex: 1;
}

/* ボタン共通 */
.tag-btn {
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .tag-btn:hover {
        background-color: #444444;
        color: #fff;
    }

    .tag-btn.active {
        background-color: #444444;
        color: #fff;
    }


/* ベースボタン */
.category-btn {
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    border: 1px solid transparent;
    border-radius: 20px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .category-btn i {
        margin-right: 5px;
    }

    .work-all {
        border-color: #ccc;
        color: #333;
    }

    .work-all.active {
        background-color: #444444;
        color: #fff;
    }

/* キャスター - 赤系 */
.work-mc, .work-moderator {
    border-color: #d13631;
    color: #d13631;
}

    .work-mc:hover, .work-mc.active,
    .work-moderator:hover, .work-moderator.active {
        background-color: #d13631;
        color: #fff;
    }

/* モデレーター - 紫系 */
/*.work-moderator {
    border-color: #a54cff;
    color: #a54cff;
}

    .work-moderator:hover, .work-moderator.active {
        background-color: #a54cff;
        color: #fff;
    }
*/

/* ナレーション - オレンジ系 */
.work-narration {
    border-color: #222;
    color: #222;
}

    .work-narration:hover, .work-narration.active {
        background-color: #222;
        color: #fff;
    }

/* コーチング - 青系 */
.work-coaching {
    border-color: #808080;
    color: #808080;
}

    .work-coaching:hover, .work-coaching.active {
        background-color: #808080;
        color: #fff;
    }

@media (hover: none) {
    .tag-btn:hover {
        background-color: inherit;
        color: inherit;
    }
}

@media screen and (max-width: 768px) {
    .tag-btn {
        transform: translateZ(0);
    }

    .filter-area-vertical {
        gap: 2rem;
        max-width: 95%;
       /* margin: 1rem auto;
        padding: 2rem;
        background-color: #f9f9f9;
        border-radius: 6px;*/
    }

    /* 行：見出しとボタンを横並び */
    .filter-row {
        display: block;
    }

    /* ボタン群 */
    .filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        flex: 1;
    }

    /* 見出し */
    .filter-title {
        min-width: 50px;
        font-size: 1.2rem;
        font-weight: bold;
        margin-right: 1rem;
        line-height: 2rem;
    }

}