@media only screen and (min-width:320px) and (max-width:559px) {
    .tab-group {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 520px;
        min-width: 280px;
        margin: 0 auto;
        flex-direction: column;
    }
    .tab {
        padding: 15px 10px;
        list-style: none;
        text-align: center;
        cursor: pointer;
        font-size: 1.4rem;
    }
    .panel {
        display: none;
    }
    .tab.is-active {
        background: #4a220c;
        color: #fcc800;
        transition: all 0.2s ease-out;
    }
    .tab:hover {
        background: rgba(74, 34, 12, 0.5);
        color: #ffffff;
    }
    .panel.is-show {
        display: block;
    }
    .workslist_wrap {
        width: 100%;
        min-width: 280px;
        max-width: 520px;
        margin: 30px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .workslist_wrap>article {
        flex: 45%;
        margin: 5px;
    }
    .workslist_wrap:after {
        content: "";
        flex: 45%;
        margin: 5px;
    }
    .workslist_wrap .list_item {
        border: 1px solid #f2f2f2;
        overflow: hidden;
    }
    .workslist_wrap a.works_item {
        display: block;
        width: 100%;
        padding: 5px;
    }
    .workslist_wrap a:hover {
        background: #e6e6e6;
    }
    .workslist_wrap a.works_item:hover {
        transform: scale(1.2, 1.2);
        transition: 1s all;
    }
    .workslist_wrap a.works_item img {
        width: 100%;
        height: auto;
    }
    .list_item no_disp {
        display: none;
    }
    p.wait {
        font-size: 1.8rem;
        text-align: center;
        margin: 100px 0 600px;
        font-weight: 700;
    }
}

@media only screen and (min-width:560px) and (max-width:959px) {
    .tab-group {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 920px;
        min-width: 520px;
        margin: 0 auto;
    }
    .tab {
        flex-grow: 1;
        padding: 15px 10px;
        list-style: none;
        text-align: center;
        cursor: pointer;
        font-size: 1.4rem;
    }
    .panel {
        display: none;
    }
    .tab.is-active {
        background: #4a220c;
        color: #fcc800;
        transition: all 0.2s ease-out;
    }
    .tab:hover {
        background: rgba(74, 34, 12, 0.5);
        color: #ffffff;
    }
    .panel.is-show {
        display: block;
    }
    .workslist_wrap {
        width: 100%;
        min-width: 520px;
        max-width: 920px;
        margin: 30px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .workslist_wrap .list_item {
        width: 30%;
        border: 1px solid #f2f2f2;
        margin-bottom: 30px;
        margin-left: 1%;
        margin-right: 1%;
        overflow: hidden;
    }
    .workslist_wrap a.works_item {
        display: block;
        width: 100%;
        padding: 15px;
    }
    .workslist_wrap a:hover {
        background: #e6e6e6;
    }
    .workslist_wrap a.works_item:hover {
        transform: scale(1.2, 1.2);
        transition: 1s all;
    }
    .workslist_wrap a.works_item img {
        width: 100%;
        height: auto;
    }
    .list_item no_disp {
        display: none;
    }
    p.wait {
        font-size: 1.8rem;
        text-align: center;
        margin: 100px 0 600px;
        font-weight: 700;
    }
}

@media only screen and (min-width:320px) and (max-width:959px) {}

@media only screen and (min-width:960px) {
    .category_top {
        padding-top: 120px;
        color: #4a220c;
        text-align: center;
    }
    .category_top svg {
        width: 10%;
        fill: #4a220c;
        display: block;
        margin: 0 auto 20px;
    }
    .category_name {
        font-size: 2.4rem;
        letter-spacing: 1px;
        font-weight: 700;
    }
    .tab-group {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 1080px;
        min-width: 920px;
        margin: 0 auto;
    }
    .tab {
        flex-grow: 1;
        padding: 15px 10px;
        list-style: none;
        text-align: center;
        cursor: pointer;
        font-size: 1.4rem;
        transition: 0.5s;
    }
    .panel {
        display: none;
    }
    .tab.is-active {
        background: #4a220c;
        color: #fcc800;
        transition: all 0.2s ease-out;
    }
    .tab:hover {
        background: rgba(74, 34, 12, 0.5);
        color: #ffffff;
    }
    .panel.is-show {
        display: block;
    }
    .workslist_wrap {
        width: 100%;
        min-width: 920px;
        max-width: 1100px;
        margin: 30px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .workslist_wrap .list_item {
        width: 30%;
        border: 1px solid #f2f2f2;
        margin-bottom: 30px;
        margin-left: 15px;
        margin-right: 15px;
        overflow: hidden;
    }
    .workslist_wrap a.works_item {
        display: block;
        width: 100%;
        padding: 15px;
    }
    .workslist_wrap a:hover {
        background: #e6e6e6;
    }
    .workslist_wrap a.works_item:hover {
        transform: scale(1.2, 1.2);
        transition: 1s all;
    }
    .workslist_wrap a.works_item img {
        width: 100%;
        height: auto;
    }
    .list_item no_disp {
        display: none;
    }
    p.wait {
        font-size: 1.8rem;
        text-align: center;
        margin: 100px 0 600px;
        font-weight: 700;
    }
}