/* ---------------
 フォーム 基本設定
--------------- */ 
button,
input,
select,
textarea {
	margin: 0;
	.box-sizing(border-box);
}

// ボタン
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}
input[type="checkbox"],
input[type="radio"],
select {
	cursor: pointer;
}
// テキストエリア
textarea {
	overflow: auto;
	vertical-align: top;
}
// ラベル
label {
	display: inline-block;
}

// --------------- 
// フォーム 見栄え
// ---------------
.acms-form{
	input[type="text"],
	input[type="password"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input[type="number"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input[type="color"]{
		.font-size(13);
		padding: 5px 5px 4px ;
		border: 1px solid #A7A7AA;
		border-radius: 3px;
		color: #333333;
		line-height: 1;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
		&:focus {
			outline: none;
			border-color: #137AF3;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
		}
		&:disabled {
			border-color: #dddddd;
			background-color: #f5f5f5;
			color: #999999;
			cursor: not-allowed;
		}
		&::-webkit-input-placeholder {
			.font-size(11);
			padding-top: 2px;
		}
		&:-moz-input-placeholder {
			.font-size(11);
			padding-top: 2px;
		}
		// --------------- 
		// サイズ
		// ---------------
		// フォームサイズ 大
		&.acms-form-large{
			height: 48px;
			.font-size(20);
		}

		// フォームサイズ 小
		&.acms-form-small{
			.font-size(11);
		}
		// .acms-filter &{
		// 	margin-bottom: 10px;
		// }
	}


	textarea{
		.font-size(13);
		padding: 5px 5px 4px ;
		border: 1px solid #A7A7AA;
		border-radius: 3px;
		color: #333333;
		line-height: 1;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
		&:focus {
			outline: none;
			border-color: #137AF3;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
		}
		&:disabled {
			border-color: #DDDDDD;
			background-color: #F5F5F5;
			color: #999999;
			cursor: not-allowed;
		}
		line-height: 1.7;
		&.acms-form-large{
			height: 48px;
			.font-size(20);
			vertical-align: middle;
		}
		&.acms-form-small{
			height: 20px;
			.font-size(10);
		}
		&::-webkit-input-placeholder {
			.font-size(11);
			padding-top: 2px;
		}
		&:-moz-input-placeholder {
			.font-size(11);
			padding-top: 2px;
		}
	}
	select{
		.btn;
		.btn-color;
		text-align: left;
		&:hover,
		&.hover {
			border: 1px solid #868688;
			.btn-color-hover;
			text-decoration: none;
		}
		&:focus {
			outline: none;
			border-color: #137AF3;
		}
		&:disabled {
			border-color: #dddddd;
			background-color: #f5f5f5;
			color: #999999;
			cursor: not-allowed;
		}
	}

	select[multiple="multiple"] {
		padding: 7px 10px;
		background: #FFF;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;

		&:hover,
		&.hover {
			padding: 7px 10px;
		}

		&:focus {
				outline: none;
				border-color: #137AF3;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
			}
			&:disabled {
				border-color: #DDDDDD;
				background-color: #F5F5F5;
				color: #999999;
				cursor: not-allowed;
			}
	}
		// webkitのみ
	@media screen and (-webkit-min-device-pixel-ratio:0){
		// プルダウン
		select{
			-webkit-appearance: button;
			background-color: #F0F0F0;
			padding-left: 10px;
			padding-right: 30px;
			background:url(../images/marker/arrow_black03.png), -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E1E1E1)); 
			background:url(../images/marker/arrow_black03.png),linear-gradient(top, #F9F9F9, #E1E1E1);
			background-repeat: no-repeat;
			background-position:  right center;
			&:hover,
			&.hover {
				border: 1px solid #868688;
				-webkit-appearance: button;
				background-color: #F0F0F0;
				padding-left: 10px;
				padding-right: 30px;
				background:url(../images/marker/arrow_black03.png), -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#E1E1E1)); 
			    background:url(../images/marker/arrow_black03.png),linear-gradient(top, #FCFCFC, #E1E1E1);
				background-repeat: no-repeat;
				background-position:  right center;
				text-decoration: none;
			}
		}

		select[multiple="multiple"] {
			-webkit-appearance: none;
			background: #FFF;
		}
	}
}
// --------------- 
// ブロック
// ---------------
// フォーム ブロック
.acms-form-block {
	display: block;
}

// フォーム インライン
.acms-form-inline,
.acms-form-inline label{
	display: inline;
}

// フォームグループ
.acms-form-group {
	.clearfix();
	margin-bottom: 10px;
}

// エラー
.acms-form-error{
	border-color: #dc8d99;
	background: #fff7f8;
	color: #c91032;
}
.acms-text-error{
	display: block;
	color: #FF0000;
}



// --------------- 
// 幅
// ---------------
// フォーム幅  100%
.acms-form-width-full{
	width: 100%;
}
// フォーム幅  750%
.acms-form-width-3quarters{
	width: 75%;
}
// フォーム幅  50%
.acms-form-width-half{
	width: 50%;
}
// フォーム幅  250%
.acms-form-width-quarter{
	width: 25%;
}
// フォーム幅 大
.acms-form-width-large{
	width: 540px;
}
// フォーム幅 中
.acms-form-width-medium{
	width: 380px;
}
// フォーム幅 小
.acms-form-width-small{
	width: 220px;
}
// フォーム幅 ミニ
.acms-form-width-mini{
	width: 140px;
}

// --------------- 
// チェックボックスとラジオボタン 画像
// ---------------
.acms-ico-checkbox,
.acms-ico-radio {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 5px 0 0;
	vertical-align: middle;
	// IE6-IE8 
	width: auto\9;
	height: auto\9;
	*width: auto;
	*height: auto;
	_width: auto;
	_height: auto;
}
// チェックボックス
.acms-ico-checkbox {
	background: url('@{acms-path-marker}ico_input.png') no-repeat left top;
	background-size: 40px 60px;
	// IE6-IE8 
	background-image: none\9;
	*background-image: none;
	_background-image: none;

}
.acms-form-checkbox input:checked + .acms-ico-checkbox {
	background: url('@{acms-path-marker}ico_input.png') no-repeat left -20px;
	background-size: 40px 60px;
}

.acms-form-checkbox input:disabled + .acms-ico-checkbox {
	background: url('@{acms-path-marker}ico_input.png') no-repeat left -40px;
	background-size: 40px 60px;
	cursor: not-allowed;
}

.acms-ico-radio {
	background: url('@{acms-path-marker}ico_input.png') no-repeat -20px top;
	background-size: 40px 60px;
	// IE6-IE8 
	background-image: none\9;
	*background-image: none;
	_background-image: none;
}
.acms-form-radio input:checked + .acms-ico-radio {
	background: url('@{acms-path-marker}ico_input.png') no-repeat -20px -20px;
	background-size: 40px 60px;
}

.acms-form-radio input:disabled + .acms-ico-radio {
	background: url('@{acms-path-marker}ico_input.png') no-repeat -20px -40px;
	background-size: 40px 60px;
	cursor: not-allowed;
}

// --------------- 
// チェックボックスとラジオボタン ボタン
// ---------------
// ボタン全体
.acms-form-checkbox,
.acms-form-radio {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-right: 15px;
	// IE6-IE8 
	position: static\9;
	*position: static;
	_position: static;
	input {
		position: absolute;
		opacity: 0;
		filter: alpha(opacity=100);
		// IE6-IE8 
		position: static\9;
		*position: static;
		_position: static;
		opacity: 1\9;
	}
}

.acms-form-radio {
	padding: 3px 0 0 4px;
	&:before,
	&::before {
		width: 16px;
		height: 16px;
		border-radius: 10px;
	}
}

.acms-btn-checkbox label,
.acms-btn-radio label{
	width: auto;
}

// チェックボックス
.acms-btn-checkbox {
	display: none;
	+ label {
		display: inline-block;
		position: relative;
		padding: 9px;
		border: 1px solid #CACECE;
		border-radius: 3px;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
		background-color: #FAFAFA;
	}
	+ label:active,
	&:checked + label:active {
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
	}
	&:checked + label {
		border: 1px solid #adb8c0;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
		background-color: #BBBBBB;
		color: #FFFFFF;
	}
	&:checked + label:after {
		content: '';
		position: absolute;
			top: 0px;
			left: 3px;
		color: #99a1a7;
		.font-size(14);
	}
}

// ラジオボタン
.acms-btn-radio {
	display: none;
	 + label {
		-webkit-appearance: none;
		display: inline-block;
		position: relative;
		padding: 9px;
		border: 1px solid #CACECE;
		border-radius: 50px;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
		background-color: #FAFAFA;
	}
	&:checked + label:after {
		content: '';
		position: absolute;
			top: 3px;
			left: 3px;
		width: 12px;
		height: 12px;
		text-shadow: 0px;
		.font-size(32);
	}
	&:checked + label {
		border: 1px solid #adb8c0;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
		background-color: #BBBBBB;
		color: #FFFFFF;
	}
	+ label:active,
	.acms-btn-radio:checked + label:active {
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
	}
}

// スマホ対応
@media screen and (max-width: 768px) {
	.acms-form{
		input[type="text"],
		input[type="password"],
		input[type="datetime"],
		input[type="datetime-local"],
		input[type="date"],
		input[type="month"],
		input[type="time"],
		input[type="week"],
		input[type="number"],
		input[type="email"],
		input[type="url"],
		input[type="search"],
		input[type="tel"],
		input[type="color"]{
			.font-size(15);
			padding-top: 14px;
			padding-bottom: 11px;
		}
		textarea{
			.font-size(15);
		}
		select {
			padding-top: 17px;
			padding-bottom: 15px;
		}
	}
}