.tab01 {
    width: 100%;
    margin: 0 auto 50px;
}

/*タブのスタイル*/
.tab_menus {
    width: calc(100%/4);
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
    color: #000;
    border-right: 2px solid #fff;
    /* border-left: 2px solid #fff; */

    background-color: #eee;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
}

.tab_menus:hover {
    /* opacity: 0.75; */
}
/*ラジオボタンを全て消す*/
input[name="tab_menus"] {
    display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_contents {
    display: none;
    /* padding: 40px; */
    border-top: 3px solid #3b82f6;
    clear: both;
    overflow: hidden;
    transition: .5s opacity;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}

/*選択されているタブを表示*/
#tab_menu01:checked~#tab_menu01,
#tab_menu02:checked~#tab_menu02,
#tab_menu03:checked~#tab_menu03,
#tab_menu04:checked~#tab_menu04 {
    display: block;
}

/*選択されているタブのスタイル*/
.tab01 input:checked+.tab_menus {
    background-color: #3b82f6;
    color: #fff;
}