@charset "utf-8";

/*==================================================================== login
*/

.login #header { border-bottom: 2px solid #F4C9C9; }

.loginForm {
	position: relative;
	width:460px; margin: 80px auto 0; border: solid 2px #D53030;
	border-radius: 5px; -webkit-border-radius: 5px;
}
.loginForm .titleLabel {
	margin-bottom:10px; margin: -2px -2px 0; padding: 10px 15px 8px 70px; font-size:14px; font-weight:bold; color:#FFF;
	background:#D53030;
	border-radius:5px 5px 0 0; -webkit-radius:5px 5px 0 0;
}
.loginForm .titleLabel:before {
	position: absolute; top: -20px; left: 8px;
	display: block; width: 52px; height: 52px; content: "";
	background: url(../img/login_icon.png) no-repeat;
}
.loginForm .box { padding: 15px 70px 0; }
.loginForm .box span { display:inline-block; width:80px; }
.loginForm .box input[type="text"],
.loginForm .box input[type="password"] { width:220px; padding: 2px 5px; }
.loginForm .box input[type="checkbox"] { margin-right:4px; }

.loginForm .loginBtn {
	display:block; width:160px; height:32px; margin: 20px auto;
	line-height:30px; color:#FFF; font-size:14px; font-weight:bold; text-decoration:none; text-align:center;
	border-radius: 4px; -webkit-border-radius: 4px; border: none; border-bottom: 2px solid #C85000;
	background: #f80;
	background: linear-gradient(top, #ffa316, #f80);
	background: -ms-linear-gradient(top, #ffa316, #f80);
	background: -moz-linear-gradient(top, #ffa316, #f80);
	background: -webkit-linear-gradient(top, #ffa316, #f80);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffa316), to(#f80));
}
.loginForm .loginBtn:hover {
	background: #ffa316;
	background: linear-gradient(top, #f80, #ffa316);
	background: -ms-linear-gradient(top, #f80, #ffa316);
	background: -moz-linear-gradient(top, #f80, #ffa316);
	background: -webkit-linear-gradient(top, #f80, #ffa316);
	background: -webkit-gradient(linear, left top, left bottom, from(#f80), to(#ffa316));
}

.msg_error { width:444px; margin: 40px auto -60px; color:#ea5531; padding: 5px 10px; border: 1px solid #ea5531; }


@media screen and (max-width: 999px){
}
@media screen and (max-width: 768px){
}
@media screen and (max-width: 480px){
.login #header { border-bottom:none; }
.login .hOtherNav { padding: 10px 10px 5px; border-top: 2px solid #7dcdf4; }

.loginForm { width:auto; margin: 30px 20px 0; border: }
.loginForm .titleLabel:before {
	background-image: url(../img/login_sp_icon.png);
	background-size: 52px auto; -webkit-background-size: 52px auto;
}
.loginForm .box { padding: 10px 15px 0; }
.loginForm .box span { display:block; width:auto; margin-bottom:5px; }
.loginForm .box input[type="text"],
.loginForm .box input[type="password"] { width:90%; }

.loginForm .box.autoLogin span { display:none; }

.msg_error { width:auto; margin: 10px 20px -10px; }
}