/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 700px;
  margin: 0 auto;
 }

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  _border-bottom: 3px solid #5ab4bd;
  border-bottom: 3px solid ffff66;
  /*グレー*/
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  border-radius:8px 8px 0 0;-moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0;border:1px solid #d9d9d9;
}
.tab_item:hover {
  opacity: 0.75;
}

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

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

/*選択されているタブのコンテンツのみを表示*/
#special_price:checked ~ #special_price,
#regular_price:checked ~ #regular_price
{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  _background-color: #5ab4bd;
  background-color: ffff66;
  border-bottom: 3px solid ffff66;
  _color: #fff;
  color:black;
}
@media screen and (max-width:800px) {
	.tabs {
	  margin-top: 50px;
	  padding-bottom: 40px;
	  background-color: #fff;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	  width: 350px;
	  margin: 0 auto;
	 }	
	.tab_item {
	  width: 150px;
	  height: 50px;
	  _border-bottom: 3px solid #5ab4bd;
	  border-bottom: 3px solid ffff66;
	  /*グレー*/
	  background-color: #d9d9d9;
	  line-height: 50px;
	  font-size: 16px;
	  text-align: center;
	  color: #565656;
	  display: block;
	  float: left;
	  text-align: center;
	  font-weight: bold;
	  transition: all 0.2s ease;
	  border-radius:8px 8px 0 0;-moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0;border:1px solid #d8d8d8;
	}
}

.plan {
	float:left;
	width: 900px;
	color: black;
}
@media screen and (max-width:480px) {
	.plan {
		float:left;
		width:auto;
		color: black;
	}
}
.thstyle1 {
width:120px;
background-color:#ffffff;
text-align:center;
color:black;
border: 2px solid #d5cfcb;
border-collapse: collapse;
font-size:80%;
}
.thstyle2 {
width:600px;
background-color:#ffffff;
text-align:center;
color:black;
border: 2px solid #d5cfcb;
border-collapse: collapse;
}
.thstyle3 {
width:600px;
background-color:#ffff66;
text-align:center;
color:black;
border: 2px solid #d5cfcb;
border-collapse: collapse;
}
.tdstyle1 {
width:120px;
background-color:#ffffff;
text-align:center;
color:black;
border: 2px solid #d5cfcb;
font-size:80%;
border-collapse: collapse;
}
.tdstyle2 {
width:600px;
background-color:#ffffff;
text-align:center;
color:black;
border: 2px solid #d5cfcb;
border-collapse: collapse;
}
.tdstyle3 {
width:600px;
background-color:#ffffaa;
text-align:center;
color:black;
border: 2px solid #d5cfcb;
border-collapse: collapse;
}
@media screen and (max-width:800px) {
	table{
		width:auto;
		height:auto;
	}
	.thstyle1 {
		width:150px;
		background-color:#ffffff;
		text-align:center;
		color:black;
		border: 2px solid #d5cfcb;
		border-collapse: collapse;
	}
	.thstyle2 {
		width:200px;
		background-color:#ffffff;
		text-align:center;
		color:black;
		border: 2px solid #d5cfcb;
		border-collapse: collapse;
	}
	.thstyle3 {
	width:200px;
		background-color:#ffff66;
		text-align:center;
		color:black;
		border: 2px solid #d5cfcb;
		border-collapse: collapse;
	}
	.tdstyle1 {
		width:150px;
		background-color:#ffffff;
		text-align: left;
		color: black;
		border: 2px solid #d5cfcb;
		border-collapse: collapse;
	}
	.tdstyle2 {
		width: 200px;
		background-color: #ffffff;
		text-align: left;
		color: black;
		border: 2px solid #d5cfcb;
		border-collapse: collapse;
	}
	.tdstyle3 {
		width: 200px;
		background-color: #ffffaa;
		text-align: left;
		color: black;
		border: 2px solid #d5cfcb;
		border-collapse: collapse;
	}
}
.inputform{
	width:800px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color:#eefeee;
	padding:10px;
}

@media screen and (max-width:800px) {
	.inputform{
		width:auto;
		display: block;
		_margin-left: auto;
		_margin-right: auto;
		padding:10px;
	}
	.inputform img{
		width:350px;
	}
}
.grecaptcha-badge { visibility: hidden; }
