/*タブ切り替え全体のスタイル*/
.tabs {
 margin-top: 50px;
 padding-bottom: 10px;
 background-color: #b9ffff;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
 width: 50%;
 height: 50px;
 border-bottom: 3px solid #0277bd;
 background-color: #f3e5f5;
 line-height: 50px;
 font-size: 16px;
 text-align: center;
 color: #565656;
 display: block;
 float: left;
 text-align: center;
 font-weight: bold;
 transition: all 0.2s ease;
}

/*タブホバー時*/
.tab_item:hover {
 opacity: 0.75;
}

/*ラジオボタンをすべて消す*/
input[name="tab_item"] {
 display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
 display: none;
 padding: 40px 40px 0;
 clear: both;
 overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked ~ #tab1_content,
#tab_2:checked ~ #tab2_content {
 display:block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
 background-color: #0277bd;
 color: #fff;