.tab-sub {
  width: 100%;
  margin: 0 0 auto auto; /* 上下左右 */
}
/*タブのスタイル*/
.tab_menu {
  width: calc(100%/4);
  height: 40px;
  line-height: 40px;
  font-size: 1.0em;
  text-align: center;
  opacity: 0.9;
  color: #fff;
  border-bottom: 2px solid #1f71b5;
  background-color: #B0D0F0;
  display: block;
  float: left;
  text-align: center;
  transition: all 0.2s ease;
}
.tab_menu:hover {
  opacity: 1.0;
  background-color: #2589d0;
}
/*ラジオボタンを全て消す*/
input[name="tab_menu"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_contents {
  display: none;
  padding: 10px;
  clear: both;
  overflow: hidden;
  transition: .5s opacity;
}
/*選択されているタブを表示*/
#menu01:checked ~ #menu01,
#menu02:checked ~ #menu02,
#menu03:checked ~ #menu03,
#menu04:checked ~ #menu04,

#menu05:checked ~ #menu05,
#menu06:checked ~ #menu06,
#menu07:checked ~ #menu07,
#menu08:checked ~ #menu08,

#menu09:checked ~ #menu09,
#menu10:checked ~ #menu10,
#menu11:checked ~ #menu11,
#menu12:checked ~ #menu12,

#menu13:checked ~ #menu13,
#menu14:checked ~ #menu14,
#menu15:checked ~ #menu15,
#menu16:checked ~ #menu16,

#menu17:checked ~ #menu17,
#menu18:checked ~ #menu18,
#menu19:checked ~ #menu19,
#menu20:checked ~ #menu20,

#menu21:checked ~ #menu21,
#menu22:checked ~ #menu22,
#menu23:checked ~ #menu23,
#menu24:checked ~ #menu24,

#menu25:checked ~ #menu25,
#menu26:checked ~ #menu26,
#menu27:checked ~ #menu27,
#menu28:checked ~ #menu28  {
  display: block;
}
/*選択されているタブのスタイル*/
.tab-sub input:checked + .tab_menu {
  background-color: #2589d0;
  color: #fff;
}