@charset "utf-8N";
.tab_unit { height:360px;
  width: 800px; margin: auto;
  display: flex; flex-wrap: wrap;
}
 
.tab_class {
  width: calc(100% / 5 - 6px); margin-right:6px; border-radius:8px 8px 0 0;
  border-bottom:2px #333 solid;
  height: 36px;
  background-color: #ccd;
  line-height: 36px;
  font-size: 15px;
  text-align: center;
  display: block;
  order: -1;
}
.tab_class:hover { background-color: #ddd; }
 
input[name="tab1_name"], input[name="tab2_name"], input[name="tab3_name"], input[name="tab4_name"], input[name="tab5_name"]{ display: none; }
 
.tab_unit input:checked + .tab_class { background-color: #eee; border-bottom:3px #eee solid; 1color: #def; }
 
.content_class { background:#eee; height:calc(100% - 40px); overflow:auto;
  display: none; width: 100%; padding-left: 6px; 
}
 
.tab_unit input:checked + .tab_class + .content_class { display: block; }