@media (max-width: 768px) {

    /* ================================== */
    /* 1. 作品グリッド (768px以下で2列) */
    /* ================================== */
    .works-grid-container {
        /* 768px以下で2列にする */
        grid-template-columns: repeat(2, 1fr);
        /* 左右のパディングを狭める */
        padding-left: 20px;
        padding-right: 20px;
        /* 左右のギャップを狭める */
        gap: 30px 15px;
    }

    /* ---------------------------------
        全体の見出し（TRAINING, ABOUTなど）
        --------------------------------- */
    h2 {
        font-size: 2.5rem;
    }

    /* ---------------------------------
        タブコンテナ（ulの外側）
        --------------------------------- */
    .work-tabs-menu {
        max-width: 600px;
        margin-bottom: 40px;
    }

    /* ---------------------------------
        各タブアイテム（固定幅を微調整）
        --------------------------------- */
    .tab-item {
        width: 110px;
        font-size: 1.4rem;
        padding: 8px 8px;
    }
}

/* --------------------------------- */
/* さらに小さいスマートフォン向け (480px以下) */
/* --------------------------------- */
@media (max-width: 480px) {

    /* ---------------------------------
        全体の見出し
        --------------------------------- */
    h2 {
        font-size: 2.2rem;
    }

    /* ================================== */
    /* 2. 作品グリッド (480px以下で余白調整) */
    /* ================================== */
    .works-grid-container {
        /* 2列は768pxで既に適用されているため、ここでは余白をさらに調整 */
        gap: 15px;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    /* ---------------------------------
        タブコンテナ
        --------------------------------- */
    .work-tabs-menu {
        max-width: 420px;
    }

    /* ---------------------------------
        各タブアイテム
        --------------------------------- */
    .tab-item {
        width: 90px;
        font-size: 1.3rem;
        padding: 8px 5px;
        margin: 0 4px;
    }
}


/* --------------------------------- */
/* 最小幅スマートフォン向け (350px以下) */
/* --------------------------------- */
@media (max-width: 350px) {

    /* ---------------------------------
        タブコンテナ
        --------------------------------- */
    .work-tabs-menu {
        max-width: 340px;
    }

    /* ---------------------------------
        各タブアイテム（限界まで縮小）
        --------------------------------- */
    .tab-item {
        width: 70px;
        font-size: 1.2rem;
        padding: 7px 3px;
        margin: 0 3px;
    }
}