/*タブを並べる設定*/
.tab-postit {
    display: flex;
    flex-wrap: wrap;
    max-width: 720px;
}
/*タブ見出しの設定*/
.tab-postit > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #f5f5f5;
    color: #a9a9a9;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}
/*ホバーされた時*/
.tab-postit > label:hover {
    opacity: 0.8;
}
/*表示しない*/
.tab-postit input {
    display: none;
}
/*デフォルトでは表示しない*/
.tab-postit > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}
/*クリックされた時*/
.tab-postit label:has(:checked) {
    background-color: #fcd5b5;
    border-color: #d3d3d3 #d3d3d3 #d3d3d3 #f7a518;
    border-style: solid;
    border-width: 1px 1px 1px 7px;
    border-radius: 5px 0 0 5px;
    color: #000000;
}
/*クリックされたら表示*/
.tab-postit label:has(:checked) + div {
    display: block;
}