@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
#login .h1 + .login-body, #login .h2 + .login-body, #login .ex + .login-body,
#login .h1 + .element, #login .h2 + .element, #login .ex + .element {
	margin-top: 20px;
}
*/
/*~~*/

#login .log-in dl {
	width: 100%; padding: 10px;
}

#login .log-in dt {
	border: 1px solid #000; color: #000;
}

#login .log-in dd.error input {
	border: solid 1px #cc0000;
}

#login .log-in div.error {
	margin-top: 5px; padding: 10px; border: 1px solid #000; text-align: center;
}

/*~~*/

#login .log-out dl {
	width: 100%; padding: 10px; display: flex;
}

#login .log-out dt {
	margin-right: 5px; border: 1px solid #000; color: #000; display: flex; justify-content: center; align-items: center;
}

@media screen and (max-width: 768px) {
/************************************************************************************************************************/

#login .log-in dt {
	padding: 5px 10px;
}

#login .log-in dd {
	margin-top: 10px;
}

#login .log-in dd.but {
	padding-top: 10px; border-top: 1px solid #000;
}

#login .log-out dt {
	flex: 1;
}

#login .log-out dd {
	width: 85px;
}

/************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 769px) {
/************************************************************************************************************************/
/*
#login .h1 + .login-body, #login .h2 + .login-body, #login .ex + .login-body,
#login .h1 + .element, #login .h2 + .element, #login .ex + .element {
	margin-top: 25px;
}
*/
/*~~*/

#login .login-body {
	width: 70%; margin: 0 auto; text-align: center;
}

#login .log-in {
	width: 100%;
}

#login .log-in dl {
	width: 100%; display: flex;
}

#login .log-in dt {
	width: 25%; margin-right: 5px; display: flex; justify-content: center; align-items: center;
}

#login .log-in dd.usr, #login .log-in dd.pwd {
	width: 30%; margin-right: 5px;
}

#login .log-in dd.but {
	width: 15%;
}

#login .log-in dd.but button {
	width: 100%;
}

/*~~*/

#login .log-out {
	display: inline-block;
}

#login .log-out dt {
	padding: 0 25px;
}

#login .log-out dd {
	width: 85px;
}

/************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/