@charset "utf-8";

/*タブ切り替え全体のスタイル*/
.tabs {
  padding-bottom: 30px;
  
  margin: 0 auto;
}
/*タブのスタイル*/
.tab_item {
	padding: 6px 6px;
  width: 25%;
  /*height: 50px;*/
  background-color: #4eae60;
  line-height: 1.3;
  font-size: 18px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
	border-radius: 10px 10px 0 0;
}
.tab_item span{
	font-size: 12px;
	display: block;
}
.tab_item.info {background-color: #f1afc9;}
.tab_item.new {background-color: #bfc0c0;}
.tab_item.kaki {background-color: #94d4a0;}
.tab_item:hover {
  opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 40px;
  clear: both;
  overflow: hidden;
	background-color: #fff;
}
/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content, 
#kaki:checked ~ #kaki_content {
  display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  /*background-color: #4eae60;*/
  color: #fff;
}
/*.tabs input#programming:checked ~ .tab_item {
	border-bottom: 25px solid #f1afc9;
}*/
#all_content{
	border-top: 25px solid #4eae60;
}
#programming_content{
	border-top: 25px solid #f1afc9;
}
#design_content{
	border-top: 25px solid #bfc0c0;
}
#kaki_content{
	border-top: 25px solid #94d4a0;
}

@media screen and (max-width: 768px){
	.tab_item {font-size: 16px;}
	.tab_content {padding: 30px 20px 20px;}
}
@media screen and (max-width: 640px){
	.tab_content {padding: 30px 10px 20px;}
	.tab_item {width: 50%;}
}