@charset "utf-8";


html,body { width: 100%; height: 100%;}


/* login
------------------------------------------------------------ */

.login_wrap {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	width: 100%; height: 100%;
}

.login_area { width: 300px;}

.logo { margin: 0 0 32px;}
.logo img { width: 300px;}

.form_area {}
.form_area .user { margin: 0 0 4px; position: relative;}
.form_area .user::after {
	content: ''; width: 22px; height: 22px; position: absolute; top: 11px; left: 8px;
	background: url("../img/icon_user.png"); background-size: 22px 22px;
}
.form_area .password { margin: 0 0 18px; position: relative;}
.form_area .password::after {
	content: ''; width: 22px; height: 22px; position: absolute; top: 11px; left: 8px;
	background: url("../img/icon_lock.png"); background-size: 22px 22px;
}
.form_area .error { margin: -5px 10px 10px; color: #F00;}
.form_area .check { padding: 0 10px;}

.btn_area { margin: 50px 0 0;}
.btn_area a,
.btn_area button {
	display: block; width: 200px; height: 40px; margin: 0 auto; padding: 0; line-height: 40px; border: none; border-radius: 100px;
	font-size: 16px; font-weight: bold; color: #FFF; text-decoration: none; text-align: center;
	background: #2D93EA; box-shadow: 0px 5px 10px #67B5F766; position: relative;
}
.btn_area a::after,
.btn_area button::after {
	content: ""; display: block; width: 8px; height: 14px; position: absolute; top: 13px; right: 13px;
	background: url("../img/arrow03.png"); background-size: 8px 14px;
}
.btn_area a:hover,
.btn_area button:hover { opacity: 0.8;}


/*フォーム*/
input[type="text"],
input[type="password"] {
	width: 100%;
	padding: 0 20px 0 45px;
	line-height: 46px;
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-bottom: solid 1px #E2E2E2;
	background: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input::placeholder { color: #C9C9C9;}
input:-ms-input-placeholder { color: #C9C9C9;}
input::-ms-input-placeholder { color: #C9C9C9;}

.checkbox-input { display: none;}
.checkbox-parts { display: block; padding-left: 24px; position: relative;}
.checkbox-parts::before {
	content: ""; display: block; width: 16px; height: 16px;
	background: url("../img/checkbox01_off.png"); background-size: 16px 16px;
	position: absolute; top: 0; left: 0;
}
.checkbox-input:checked + .checkbox-parts {}
.checkbox-input:checked + .checkbox-parts::after {
	content: ""; display: block; width: 16px; height: 16px;
	background: url("../img/checkbox01_on.png"); background-size: 16px 16px;
	position: absolute; top: 0; left: 0;
}