/* ver3 */
input[type="radio"]{
  display:none;
}

.tab_area{
  margin:0 20px 0 0px;
  float:right;
  z-index:1000;
}

.tab_area label{
  width:auto;
  margin:0 -2px;
  display:inline-block;
  padding:3px 15px;
  color:#000000;
  background:#fff;
  text-align:center;
  font-size:13px;
  cursor:pointer;
  border:1px solid #444;
}

.tab_area label:hover{
  opacity:0.5;
}

#tab1:checked ~ .tab_area .tab1_label:hover,#tab2:checked ~ .tab_area .tab2_label:hover {
  opacity:1;
}

.panel_area{
  background:#fff;
  clear:both;
}

.tab_panel{
  width:100%;
  padding:20px 0;
  display:none;
}

.tab_panel p{
  letter-spacing:1px;
  text-align:center;
}

#tab1:checked ~ .tab_area .tab1_label{
  background:#5a5454;
  color:#fff;
  cursor:initial;
}

#tab1:checked ~ .panel_area #panel1{
  display:block;
}

#tab2:checked ~ .tab_area .tab2_label{
  background:#5a5454;
  color:#fff;
  cursor:initial;
}

#tab2:checked ~ .panel_area #panel2{
  display:block;
}

#tab3:checked ~ .tab_area .tab3_label{
  background:#fff;
  color:#000;
}

#tab3:checked ~ .panel_area #panel3{
  display:block;
}

.head_list {
  list-style:none;
  margin:auto;
  width:840px
}

.head_list li {
  float:left;
  padding :0 15px;
  margin:10px;
  min-width:100px;
  text-align:center;
  font-size:14px;
}

.tab_area span {
  width: 70px;
  float: left;
  line-height: 25px;
  font-weight: bold;
  text-align:center;
}