/**====================
///// チェックボックスタイプ /////
====================**/

/* ===== Checkbox_type1 =====
	/**** =input= ****/
		input[type="checkbox"].Checkbox_type1 					{ display             : none; }
	/**** =label= ****/
		input[type="checkbox"].Checkbox_type1 + label 			{ cursor              : pointer;
																  display             : block;
																  padding-left        : 25px;
																  position            : relative; }
	/**** =span= ****/
		input[type="checkbox"].Checkbox_type1 + label > span 	{ -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  width               : auto!important;
																  text-indent         : 0 !important;
																  line-height         : 1.2em;
																  user-select         : none;
																  border-bottom       : 2px solid #fff;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; }
	/**** =before(枠)= ****/
		input[type="checkbox"].Checkbox_type1 + label:before 	{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 14px; 
																  height              : 14px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -7px;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																/* 背景 */
																  background-color    : #fff;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		input[type="checkbox"].Checkbox_type1 + label:after 	{ content             : "";
																  display             : block;
																/* サイズ */
																  width               : 4px;
																  height              : 10px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 9px;
																  margin-top          : -10px;
																/* 初期値非表示 */
																  visibility          : hidden;
																/* マーク */
																  border-color        : #0b2265;
																  border-style        : solid;
																  border-width        : 0 3px 3px 0;
																  transform           : rotate(45deg);
																  -webkit-transform   : rotate(45deg);
																  -o-transform        : rotate(45deg);
																  -ms-transform       : rotate(45deg);
																  -moz-transform      : rotate(45deg); }
	/**** =before(枠)：hover= ****/
		input[type="checkbox"].Checkbox_type1 + label:hover:before 
																{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		input[type="checkbox"].Checkbox_type1[type="checkbox"]:checked + label:after 
																{ visibility          : visible; }
	/**** =before(枠)：hover= ****/
		input[type="checkbox"].Checkbox_type1 + label:hover > span 
																{ border-color        : #f00; }
		input[type="checkbox"].Checkbox_type1:focus + label > span 
																{ border-color        : #f00; }




/**====================
///// ラジオボタンタイプ /////
====================**/
/* ===== radio_type1 =====
	/**** =input= ****/
		input[type="radio"].radio_type1							{ display             : none; }
	/**** =label= ****/
		input[type="radio"].radio_type1 + label					{ cursor              : pointer;
																  display             : table;
																  padding-left        : 25px!important;
																  position            : relative;
																  margin              : 10px; }
	/**** =span= ****/
		input[type="radio"].radio_type1 + label > span			{ -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  line-height         : 1.2em;
																  text-indent         : 0 !important;
																  user-select         : none;
																  border-bottom              : 2px solid #fff;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; } 
	/**** =before(枠)= ****/
		input[type="radio"].radio_type1 + label:before			{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 15px; 
																  height              : 15px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -7px;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		input[type="radio"].radio_type1 + label:after			{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 7px;
																  height              : 7px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 9px;
																  margin-top          : -3px;
																/* マーク */
																  border              : 2px solid #0b2265;
																  background-color    : #0b2265; 
																  border-radius       : 50%; 
																/* 初期非表示 */
																  visibility          : hidden; }

	/**** =before(枠)：hover= ****/
		input[type="radio"].radio_type1 + label:hover:before,
		input[type="radio"].radio_type1:focus + label:before	{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		input[type="radio"].radio_type1:checked + label:after	{ visibility          : visible; }
	/**** =span(内容)：hover= ****/
		input[type="radio"].radio_type1 + label:hover > span,
		input[type="radio"].radio_type1:focus + label > span	{ border-color       : #f00; }



/**====================
///// ラジオボタンタイプ(labelにclassを設定するタイプ) /////
///// 使用例：
/////      <label class="radio_type1"><input type="radio" name="radio1" value="1" /><span>使用例1</span></label>
/////      <label class="radio_type1"><input type="radio" name="radio1" value="2" /><span>使用例2</span></label>
====================**/
/* ===== radio_type1 =====
	/**** =input= ****/
		label.radio_type1 input[type="radio"]					{ display             : none; }
	/**** =label= ****/
		label.radio_type1										{ cursor              : pointer;
																  display             : table;
																  padding             : 0 5px 0 25px;
																  position            : relative; }
	/**** =span= ****/
		label.radio_type1 > span								{ padding             : 0;
																  -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  line-height         : 1.2em;
																  text-indent         : 0 !important;
																  user-select         : none;
																  border-bottom       : 2px solid rgba(255, 0, 0, 0);
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; } 
	/**** =before(枠)= ****/
		label.radio_type1 > span:before								{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 15px; 
																  height              : 15px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -8px;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		label.radio_type1 > span:after							{ content             : ""!important;
																  display             : block!important;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 7px;
																  height              : 7px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 9px;
																  margin-top          : -4px;
																/* マーク */
																  border              : 2px solid #0b2265;
																  background-color    : #0b2265; 
																  border-radius       : 50%; 
																/* 初期非表示 */
																  visibility          : hidden; }

	/**** =before(枠)：hover= ****/
		label.radio_type1 input[type="radio"]:not([disabled]):hover + span:before,
		label.radio_type1 input[type="radio"]:not([disabled]):focus + span:before
																{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		label.radio_type1 input[type="radio"]:checked + span:after
																{ visibility          : visible; }
	/**** =span(内容)：hover= ****/
		label.radio_type1 input[type="radio"]:hover + span,
		label.radio_type1 input[type="radio"]:focus + span	{ border-color            : #f00; }
	/**** =img ****/
		label.radio_type1 img 									{ width               : auto;
																  height              : auto;
																  vertical-align      : middle; }
	/**** =disabled ****/
		label.radio_type1 input[type="radio"][disabled] + span  { color               : #ccc;
																  text-decoration     : none; }


/**====================
///// ラジオボタンタイプ(labelにclassを設定するタイプ) /////
///// 使用例：
/////      <label class="radio_type0"><input type="radio" name="radio1" value="1" /><span>使用例1</span></label>
/////      <label class="radio_type0"><input type="radio" name="radio1" value="2" /><span>使用例2</span></label>
====================**/
/* ===== radio_type0 =====
	/**** =input= ****/
		label.radio_type0 input[type="radio"]					{ display             : none; }
	/**** =label= ****/
		label.radio_type0										{ cursor              : pointer;
																  display             : table;
																  padding             : 0 5px 0 25px;
																  position            : relative; }
	/**** =span= ****/
		label.radio_type0 > span								{ padding             : 0;
																  -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  line-height         : 1.2em;
																  text-indent         : 0 !important;
																  user-select         : none;
																  border-bottom       : 2px solid rgba(255, 0, 0, 0);
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; } 
	/**** =before(枠)= ****/
		label.radio_type0 > span:before							{ content             : "";
																  display             : block;
																/* サイズ */
																  width               : 1em; 
																  height              : 1em;
																/* ポジション */
																  position            : absolute;
																  top                 : 0;
																  bottom              : 0;
																  left                : 0;
																  margin              : auto;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		label.radio_type0 > span:after							{ content             : "";
																  display             : block;
																/* サイズ */
																  width               : 1em; 
																  height              : 1em;
																/* ポジション */
																  position            : absolute;
																  top                 : 0;
																  bottom              : 0;
																  left                : 0;
																  margin              : auto;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%; }
										
										
										

	/**** =before(枠)：hover= ****/
		label.radio_type0 input[type="radio"]:not([disabled]):hover + span:before,
		label.radio_type0 input[type="radio"]:not([disabled]):focus + span:before
																{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		label.radio_type0 input[type="radio"]:checked + span:after
																{ visibility          : visible; }
	/**** =span(内容)：hover= ****/
		label.radio_type0 input[type="radio"]:hover + span,
		label.radio_type0 input[type="radio"]:focus + span	{ border-color            : #f00; }
	/**** =img ****/
		label.radio_type0 img 									{ width               : auto;
																  height              : auto;
																  vertical-align      : middle; }
	/**** =disabled ****/
		label.radio_type0 input[type="radio"][disabled] + span  { color               : #ccc;
																  text-decoration     : none; }

/* ===== radio_type2 =====
	/**** =input= ****/
		label.radio_type2 input[type="radio"]					{ display             : none; }
	/**** =label= ****/
		label.radio_type2										{ cursor              : pointer;
																  display             : table;
																  padding-left        : 25px!important;
																  position            : relative;
																  margin              : 10px; }
	/**** =span= ****/
		label.radio_type2 > span								{ padding             : 0;
																  display             : inline-block;
																  -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  line-height         : 1.2em;
																  text-indent         : 0 !important;
																  user-select         : none;
																  border-bottom       : 2px solid rgba(255, 0, 0, 0);;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; } 
	/**** =before(枠)= ****/
		label.radio_type2 > span:before							{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 15px; 
																  height              : 15px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -9px;
																/* 枠 */
																  border-color        : #ccc;
																  border-style        : solid;
																  border-width        : 2px; 
																  border-radius       : 50%;
																/* アニメーション */
																  transition-property                : border-color,background-color;
																  -webkit-transition-property        : border-color,background-color;
																  -moz-transition-property           : border-color,background-color;
																  -o-transition-property             : border-color,background-color;
																  -ms-transition-property            : border-color,background-color; }
	/**** =after(マーク)= ****/
		label.radio_type2 > span:after									{ content             : "";
																  display             : block;
																  box-sizing          : border-box;
																/* サイズ */
																  width               : 15px;
																  height              : 15px;
																/* ポジション */
																  position            : absolute;
																  top                 : 50%;
																  left                : 5px;
																  margin-top          : -9px;
																/* マーク */
																  border              : 2px solid #ccc;
																  background-color    : #f00; 
																  border-radius       : 50%; 
																/* 初期非表示 */
																  visibility          : hidden; }

	/**** =before(枠)：hover= ****/
		label.radio_type2 span:hover:before,
		label.radio_type2 input[type="radio"]:focus + span:before
																{ background-color    : #eee;
																  border-color        : #89a; }
	/**** =after(マーク)：checked= ****/
		label.radio_type2 input[type="radio"]:checked + span:after
																{ visibility          : visible; }
	/**** =span(内容)：hover= ****/
		label.radio_type2 input[type="radio"]:hover + span,
		label.radio_type2 input[type="radio"]:focus + span	{ border-color        : #f00; }
	/**** =img ****/
		label.radio_type2 img 									{ width               : auto;
																  height              : auto;
																  vertical-align      : middle; }





/**====================
///// チェックボックス(labelにclassを設定するタイプ) ver.2 /////
///// 使用例：
/////      <label class="Checkbox_type1"><input type="checkbox" name="check" value="1" /><span>使用例1</span></label>
====================**/
	/**** =input= ****/
		label.Checkbox_type1 input[type="checkbox"] 			{ display             : none; }
	/**** =label= ****/
		label.Checkbox_type1		 							{ cursor              : pointer;
																  /* padding-left        : 1.2em; */
																  position            : relative; }
	/**** =span= ****/
		label.Checkbox_type1 > span 							{ -moz-user-select    : none;
																  -ms-user-select     : none;
																  -webkit-user-select : none;
																  width               : auto!important;
																  text-indent         : 0 !important;
																  line-height         : 1.2em;
																  user-select         : none;
																/* アニメーション */
																  transition-property                : border-color;
																  -webkit-transition-property        : border-color;
																  -moz-transition-property           : border-color;
																  -o-transition-property             : border-color;
																  -ms-transition-property            : border-color; }
	/**** =before(枠)= ****/
		label.Checkbox_type1 > span:before 						{ content             : "\f0c8";
																  display             : inline-block;
																  font-weight         : normal;
																  font-family         : 'Font Awesome 5 Free';
																  width               : 1.2em; }
	/**** =before：hover= ****/
		label.Checkbox_type1:hover span
																{ color               : #333; }
	/**** =checked= ****/
		label.Checkbox_type1 [type="checkbox"]:checked + span
																{ background          : -moz-linear-gradient(transparent 65%, #ffd700 65%);
																  background          : -webkit-linear-gradient(transparent 65%, #ffd700 65%);
																  background          : linear-gradient(transparent 65%, #ffd700 65%); }
		label.Checkbox_type1 [type="checkbox"]:checked + span:before
																{ content             : "\f14a"; }
	/**** =before(枠)：hover= ****/
		label.Checkbox_type1:hover > span,
		label.Checkbox_type1:focus > span
																{  }
																
	/**** =disabled= ****/
		label.Checkbox_type1 > input[disabled] + span			{ color               : #ccc;
																  border-bottom       : 2px solid rgba(255, 0, 0, 0)!important; }
																  
		label.Checkbox_type1 > input[disabled] + span:before	{ border-color        : #eee;
																  background-color    : rgba(255, 0, 0, 0)!important; }
																  
		label.Checkbox_type1 > input[disabled] + span:after		{ visibility          : hidden!important; }



/**====================
///// 数字inputタイプ(labelにclassを設定するタイプ) /////
///// 使用例：
/////      <label class="numberbox_type1"><input type="text" name="text1" value="1" /><span>使用例1</span></label>
====================**/

	label.numberbox_type1							{ display: inline-block;
													  width : 80px;
													  position: relative; }
	label.numberbox_type1 input[type="text"]		{ display: block;
													  width: 60px; }
	label.numberbox_type1 i.far						{ font-size: 20px;
													  display: block;
													  position: absolute; }
	label.numberbox_type1 i.number_up				{ cursor: pointer;
													  font-size: 20px;
													  display: block;
													  position: absolute;
													  top: 0;
													  right: 0; }
	label.numberbox_type1 i.number_down				{ cursor: pointer;
													  font-size: 20px;
													  display: block;
													  position: absolute;
													  bottom: 0;
													  right: 0; }