/* alert */

.error-area p#err-title {font-size: 16px;}
.error-ic {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 15px;
	background-color: #fff;
	color: #f00;
	font-weight: bold;
	text-align: center;
	margin-right: 5px;
	line-height: 15px;
}
input.form-error,
textarea.form-error,
select.form-error,
input.form-error.groups + label {border-color: #ff6666 !important;}

input[type="checkbox"],
input[type="radio"] {position: relative;}
input[type="checkbox"].form-error:after,
input[type="radio"].form-error:after {
	position: absolute;
	content: '';
	border: solid 1px #ff6666;
	box-sizing: border-box;
}


/*pc*/
@media screen and (min-width: 769px) {
	.error-area {
		margin: 20px auto;
		padding: 10px 20px 10px;
		background-color: #ff6666;
		border-radius: 4px;
	}
	.error-area p {
		color: #fff;
		font-size: 13px;
	}
	input[type="checkbox"].form-error:after {
		left: -3px;
		top: -3px;
		width: 20px;
		height: 20px;
	}
	input[type="radio"].form-error:after {
		left: -3px;
		top: -3px;
		width: 18px;
		height: 20px;
	}
}

/*sp*/
@media screen and (max-width: 768px) {
	.error-area {
		margin: 1rem auto 0;
		padding: 1rem;
		background-color: #ff6666;
		border-radius: .4rem;
	}
	.error-area p {
		color: #fff;
		font-size: 1.2rem;
	}
	input[type="checkbox"].form-error:after {
		left: -.4rem;
		top: -.4rem;
		width: 2rem;
		height: 2rem;
	}
	input[type="radio"].form-error:after {
		left: -.3rem;
		top: -.2rem;
		width: 2rem;
		height: 2rem;
	}
}