/*タブ切り替え全体のスタイル*/
.tabs {
text-align:center;
  margin-top: 50px;
  padding-bottom: 40px;
  width:100%;
  margin: 0 auto;
  
  }

/*タブのスタイル*/

.tab_title{
    display: inline-block;
    padding:10px;
    background:#990000;
    color:#FFF;
    font-size:90%;
    font-weight: bold;
    text-align: center;
    
}


.tab_item {

	width:200px;
  height: 40px;
  border-top:1px solid #666;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
  color: #FFF;
display:inline-block;
  font-weight: bold;
  transition: all 0.2s ease;
}




.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}
/*タブ切り替え全体のスタイル*/
.tabs2 {
text-align:center;
  margin-top: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  width:100%;
  margin: 0 auto;
  border-top:1px dotted #333;
    background: #fafafa;
  }


.tab_item2{
	width:200px;
  height: 40px;
  border:1px solid #666;
  line-height: 40px;
  font-size: 100%;
  text-align: center;
  color: #990000;
display:inline-block;
  font-weight: bold;
  transition: all 0.2s ease;
}


.tab_item2:hover {
    background:#FFEEEE;
}

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



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


/*選択されているタブのコンテンツのみを表示*/
#m01:checked ~ #m01_content,
#m02:checked ~ #m02_content,
#m03:checked ~ #m03_content,
#m04:checked ~ #m04_content,
#m05:checked ~ #m05_content,
#m06:checked ~ #m06_content,
#m07:checked ~ #m07_content,
#m08:checked ~ #m08_content,
#m09:checked ~ #m09_content,
#m10:checked ~ #m10_content,
#m11:checked ~ #m11_content,
#m12:checked ~ #m12_content
 {
  display: block;
}

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

/*選択されているタブのスタイルを変える*/
.tabs2 input:checked + .tab_item2 {
  background-color: #FFFFFF;
  color: #990000;
    border-bottom:10px solid #990000;
}