.tab-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.tab-button {
    flex: 1 1 calc(25% - 5px);
    max-width: calc(25% - 5px);
    padding: 10px;
    background-color: #F4FFDF;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-button img{
    width: clamp(10px, 2vw, 36px);
    height: clamp(10px, 2vw, 36px);
    margin-right:clamp(3px, 1vw, 10px);;
}
.tab-button.active img{
   /* filter: brightness(50) saturate(0) contrast(10); */
   filter: invert(1);
}


.tab-button:hover {
    background-color: #d6f3a1;
}


.tab-button.active {
    background-color: #81a937;
    color: white;
    font-weight: bold;
}

.table-container {
    display: block;
    width: 100%;
    max-width: 880px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
}

.table-container.show {
    opacity: 1;
    height: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 6px;
}

th, td {
    border: 1px solid #ccc;
    padding: 7px;
    text-align: left;
}

.shiryo{
    width: 28%;
}

.category {
    font-weight: bold;
    color: white;
    writing-mode: vertical-rl;
    text-align: center;
    padding: 15px;
    width:4vw;
}

.category.kozo { background-color: #4BACC6; vertical-align: middle;}
.category.sogo { background-color: #9BBB59; vertical-align: middle;}
.category.kokka { background-color: #F79646; vertical-align: middle;}