/* checkbox */
.input-check {
	display: inline-block; margin-right: 10px; position: relative;
	&.inline {
		display: inline-block;
	}
	input[type=checkbox] {
		display: none;
		&+label {
			letter-spacing: 0; font-size: 1.6rem; padding-left: 23px; position: relative;
			&.type-1 {
				padding-left: 23px;
			}
			&:before {
				width: 17px; height: 17px; position: absolute; content: ''; display: block; background: url('../img/common/check.png') no-repeat; background-size: 17px; top: 2px; left: 0;
			}
			.imp {
				font-weight: 700;
			}
		}
		&:checked+label:before {
			background: url('../img/common/check.png') no-repeat; background-size: 17px; height: 17px; background-position: 0 -17px;
		}
		&:disabled {
			&+label {
				color: #999; cursor: no-drop;
			} 
		}
	}
}

/* radio */
.input-radio {
	display: inline-block; margin-right: 10px; position: relative;
	&.box-radio {
		margin: 6px 0 0 0;
		input[type=radio] {
			display: none;
			& + label {
				display: flex; align-items: center; justify-content: center; min-width: 80px; padding: 12px 16px; font-size: 1.6rem; color: #666; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; background: #fff;
				&:before {
					display: none;
				}
			}
			&:checked + label {
				color: var(--theme); border: 1px solid var(--theme); background: #fff; font-weight: 700;
			}
			&:disabled + label {
				color: #aaa; border-color: #ddd; background: #f9f9f9; cursor: not-allowed;
			}
		}
	}
	input[type=radio] {
		display: none;
		&+label {
			letter-spacing: 0; font-size: 1.6rem; padding-left: 23px; position: relative;
			&:before {
				width: 17px; height: 17px; position: absolute; content: ''; display: block; background: url('../img/common/radio.png') no-repeat; background-size: 17px; top: 2px; left: 0;
			}
		}
		&:checked+label:before {
			background: url('../img/common/radio.png') no-repeat; background-size: 17px; height: 17px; background-position: 0 -17px;
		}
		&:disabled {
			&+label {
				color: #999; cursor: no-drop;
			}
		}
	}
}

@media (max-width: 1024px) {
	.input-check,
	.input-radio {
		input + label {
			font-size: 1.4rem !important;
		}
	}
}

@media (max-width: 680px) {
	.input-check,
	.input-radio {
		margin: 1px 10px 1px 1px;
		input + label {
			font-size: 1.3rem !important;
		}
	}
}