@charset "UTF-8";
/*CSSのみでで作るタブ
---------------------------------------------------------------------------*/
.tab_container {
  padding-bottom: 1em;
  background-color: #fff;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
  box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.2);	/*影。右へ、下へ、ぼかす範囲、広げる範囲。0,0,0は黒の事で0.2は透明度20%の事*/
  margin: 0 auto;}
.tab_item {
  width: calc(100%/2);    /*100%/4を100%/2に変更*/
  padding:15px 0;
  border-bottom: 3px solid #446d04 ;
  background-color: #ececec;
  text-align: center;
  color: #446d04 ;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  font-size: 14px;
}

.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  padding: 1em 1em 0;
  clear: both;
  overflow: hidden;
}
.tab_content_description{
	width: 95%;
}
.tab_content_description p{
	font-size: 90%;
}
/*h4(見出し)タグ*/
.tab_content_description h4 {
	color: #529306;		/*文字色*/
	font-size: 18px;	/*文字サイズ*/
	border-bottom: 2px dotted #529306;	/*下線の幅、線種、色*/
	margin-bottom: 5px;	/*下に空けるスペース*/
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content {
  display: block;
}
.tab_container input:checked + .tab_item {
  background-color: #446d04 ;
  color: #fff;
  border-radius: 5px 5px 0px 0px;	/*上、右、下、左への角丸の指定*/

	border-radius: 5px 5px 0px 0px;	/*上、右、下、左への角丸の指定*/
}
.plr3p {padding-left: 3% !important;padding-right: 3% !important;}


/*画面幅700px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){
.tab_item {
  font-size: 11px;

}
}