@charset "utf-8";
/* CSS Document */


/*タブ切り替え全体のスタイル*/
.tabs,
.tabs02  {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #1d120f;
  box-shadow: 0 0 10px rgba(26,16,14,0.3);
  width: 1000px;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item,
.tab_item02 {
  width: 19%;
  height: 50px;
  border-bottom: none;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 15px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
   border-top-left-radius:20px;
   border-top-right-radius:20px;
   vertical-align:bottom;
   margin:5px 5px 0;
    opacity: 0.4;
}



.tab_item:hover,
.tab_item02:hover {
  opacity: 0.75;

}

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

input[name="tab_item02"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content,
.tab_content02 {
  display: none;
  padding: 0 0 0;
  clear: both;
  overflow: hidden;
  border:#000 solid;
}


/*選択されているタブのコンテンツのみを表示*/
#kansai001:checked ~ #kansai001_content,
#kansai002:checked ~ #kansai002_content,
#kansai003:checked ~ #kansai003_content
 {
  display: block;
}

#kannto001:checked ~ #kannto001_content,
#kannto002:checked ~ #kannto002_content,
#kannto003:checked ~ #kannto003_content
 {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #000;
  color: #fff;
  border-top:#FF0 solid;
  border-left:#FF0 solid;
  border-right:#FF0 solid;
 
}


.tabs02 input:checked + .tab_item02 {
  background-color: #000;
  color: #fff;
  border-top:#FF0 solid;
  border-left:#FF0 solid;
  border-right:#FF0 solid;
 
}



@media screen and (max-width: 600px) {


/*タブ切り替え全体のスタイル*/

.tabs,
.tabs02 {
	width: 100%;
	 }
	
.tab_item,
.tab_item02 {
		width:22%;
		 height: 90px;
		font-size: 12px;
		line-height: 2em;
	}
	



	
}