@charset "utf-8";
/* CSS Document */

/* re-setting {  */
.main-contents { padding-bottom: 0; }
/* } re-setting   */

.diff-bg-login { background-color: #f2f5f8; }
.login { margin: 0 auto 2em; max-width: 700px; }
.login input { display: block; appearance: none; width: 100%; margin-bottom: 5px; padding: 10px; border: 1px solid #d2dce6; font-size: 16px; }
.login input[type="text"]:read-only  { color: #666666; background-color: #b3b3b3; }
#panel_area { margin: 15px auto 0; padding: 55px 50px 45px; border: 1px solid #d2dce6; background: #ffffff; }
.login-ttl { color: #5f6b78; text-align: center; padding-top: 0;}
.text_area { margin-bottom: 5px; font-size: 1.8rem; }
.text_area ~ .text_area { margin-top: 16px; }
.login-transition { margin-bottom: 10px; text-align: right; }
.login-link:link { position: relative; padding-right: 8px; color: #363e47; font-size: 14px; text-decoration: none; }
.login-link:visited { color: #363e47; }
.login-link:hover { text-decoration: underline; }
.login-link::after { content: ""; display: inline-block; position: relative; top: 3px; left: 5px; width: 8px; height: 8px; border-top: 2px solid #5f6b78; border-right: 2px solid #5f6b78; transform: translateY(-50%) rotate(45deg); }
.loginButton { appearance: none; display: block; position: relative; margin: 30px auto 0; width: 300px; height: 55px; border: none; color: #ffffff; font-size: 20px; background-color: #ac2330; border-radius: 5px; outline: none; cursor: pointer; }
.loginButton::before { content: ""; display: inline-block; position: relative; top: 5px; left: 0; width: 25px; height: 27px; margin-right: 10px; background: url(/login/images/login_ic_001.png) no-repeat 0 0; background-size: contain; }
.UserRegistration { margin: 30px auto 0; font-size: 14px; text-align: center; }
.UserRegistration-btn:link { display: block; position: relative; margin: 5px auto 0; width: 300px; height: 45px; color: #fff; font-size: 18px; line-height: 45px; background-color: #5f6b78; border-radius: 5px; text-decoration: none;}
.UserRegistration-btn:visited { color: #ffffff; }
.loginButton:hover,
.UserRegistration-btn:hover { opacity: 0.7; }
.login-lead { margin-bottom: 2px;	font-size: 18px; }
::placeholder { color: transparent; }
.message { max-width: 700px; margin: 15px auto 0; color: #ac2330; font-size: 14px; }

@media screen and (max-width: 768px) {
	.login-ttl { font-size: 20px; }
	#panel_area { width: 100%; max-width: 100%; margin-top: 15px; padding: 40px 20px; }
	.login input { padding: 8px 12px; font-size: 13px; }
	.login-transition { margin-bottom: 25px; }
	.login-link:link { padding-right: 10px; font-size: 12px; }
	.login-link::after { top: 4px; }
	.loginButton { margin-top: 25px; width: 230px; height: 40px; font-size: 14px; }
	.loginButton::before { top: 3px; width: 17px; height: 19px; margin-right: 12px; }
	.UserRegistration { margin-top: 25px; font-size: 12px; }
	.UserRegistration-btn:link { margin-top: 10px; width: 230px; height: 35px; font-size: 14px; line-height: 35px; }
	.login-lead { display: none; }
	::placeholder { color: #b2bbc3; }
	.message { width: 100%; max-width: 100%; font-size: 10px; }
	}