.tbl {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
}
.tbl th {
 padding: 10px;
 background: #e9faf9;
 border: solid 1px #778ca3;
}
.tbl td {
 padding: 10px;
 border: solid 1px #778ca3;
} 

.tbl02 {
 width: 100%;
 border-collapse: collapse;
 border-spacing: 0;
}
.tbl02 th {
 padding: 5px;
 text-align: center;
 background: #e9faf9;
 border: solid 1px #778ca3;
}
.tbl02 td {
 padding: 5px;
 border: solid 1px #778ca3;
} 

.text-center {
	text-align: center;
}

.tab-4 {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.tab-4 > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
	margin-right: 0.3em;
    background-color: #f2f2f2;
    color: #999;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab-4 > label:hover,
.tab-4 label:has(:checked) {
    background-color: #25d086;
    color: #fff;
}

.tab-4 label:has(:checked)::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    background-color: #25d086;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab-4 input {
    display: none;
}

.tab-4 > div {
    display: none;
    width: 100%;
    padding: 1.5em 0;
}

.tab-4 label:has(:checked) + div {
    display: block;
}