@charset "UTF-8";

/*--------------------------------------------
情報タイトル　アイコンと見出し情報並列
----------------------------------------------*/
.common_title_flex {
  display: flex;
  flex-diretion: row;
	padding: 4px;
	font-size: 18px;
  align-items: center;
  border: solid 0px;
  margin-bottom: 20px;
	/*background-color: #ffffff;*/
}
/*情報 アイコン*/
.common_title_flex img{
	width: 26px;
	margin-right: 5px;
	vertical-align: middle;
}
/*-*************************************

ボタン　オープン　クローズ 
検索で使用

*****************************************/
/*----html-------------------
<!--- - オープン- --->
<div class="commn_open_close_box">
<input type="checkbox" id="switch" class="on-off" />
<label for="switch" class="common_open_label_btn"></label>
 <!--- --------------------------------------
 表示する内容
--------------------------------------- --->
<div class="open">
表示する内容
</div>
</div>
----------------------------*/
.commn_open_close_box{
	text-align: center;
	border: solid 0px;

	
}
/*inputを非表示*/
.commn_open_close_box input[type="checkbox"].on-off{
	 opacity: 0;
  /*opacity: 1; */ /*テスト用で表示*/
}
/*ラベル（「開く閉じる 」ボタン）*/
.commn_open_close_box .common_open_label_btn{
  margin-top: 20px;
  padding: .6em 1em;
  border-radius: 4px;
	margin: 0 auto 1em auto;
  /*margin: 0 0 1em;*/
	  display: inline-block;
  background-image: none;
  /*background-color: #4CAF50;*/
  border: solid 1px #54BF66;
  /*border: none;*/
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: 0.5s; /*hover処理の時間*/
}
.commn_open_close_box .common_open_label_btn:hover{
	  color: #ffffff;
  background-color: #5AB4BD;
}

/*ラベルボタンに表示するテキスト*/
.commn_open_close_box .common_open_label_btn::after{
  content:'検索条件　+'; 
}
.commn_open_close_box .on-off:checked ~ .common_open_label_btn::after{
  content: '検索条件　-';
}

/*表示エリア（個別）検索用
------------------------------------*/
.commn_open_close_box .open_area{
	width: 100%;
	border: solid 1px #5AB4BD;
	padding: 10px 60px 10px 60px;
	height: 0;
	box-sizing: border-box;
	text-align: left;
  opacity: 0;
  transition: 0.2s;
	
}
/*「ボタン」をタップで表示*/
.commn_open_close_box .on-off:checked  ~ .open_area{
	margin-bottom: 30px;
	height: auto;
  opacity: 1;
}
/* ディバイスサイズ設定
============================================= */
@media (max-width: 749px) {
/*表示エリア（個別）検索用
------------------------------------*/
.commn_open_close_box .open_area{
	padding: 10px ;
}
}

/* タブレット用 */
@media (min-width: 750px) and (max-width: 1023px) {
	}
/* Desktop View------------------------------- */
@media (min-width: 1024px) {
	}