@charset "utf-8";

/*------------------------------------------
Loguin--Header
-------------------------------------------*/

/*-Header__Logo-Style-----*/

.l-header .logo,
.l-header .logo * {
	margin-bottom: 1em;
}


/*-Header__greeting-Style-----*/
.l-header p {
	text-align: center;
}


/*------------------------------------------
Loguin--Contents
-------------------------------------------*/

/*-MainWrapper__layout-----*/

.main-wrapper {
	width: 95%;
	max-width: 1024px;
	min-height: 600px;
	margin: 0 auto;
	padding-top: 5.5em;
}


/*-loginForm__layout-----*/

.login-form {
	box-sizing: border-box;
	width: 90%;
	max-width: 600px;
	min-width: 300px;
	margin: 0 auto;
	padding: 2.5em 0 3.5em;
	border-radius: 10px;
	box-shadow: 0px 0px 25px 0px #d1d1d1;
	background: #fff;
}
.login-form.user {
	background:#EBEAE0;
	border: 4px solid #880002;
	box-sizing: border-box;
}

.login-form h2 {
	margin-bottom: 1.2em;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
	color: #a1362c;
}

.login-form p {
	margin-bottom: 2em;
	text-align: center;
}

.login-form form {
	width: 90%;
	max-width: 370px;
	margin: 0 auto;
}

.login-form form ul {
	overflow: hidden;
}

.login-form form ul li {
	margin-bottom: 1.7em;
}

.login-form form ul li label {
	display: block;
	width: 100%;
}

.login-form form ul li span {
	display: inline-block;
	width: 86px;
	font-weight: bold;
}

.login-form form ul li input {
	display: inline-block;
	box-sizing: border-box;
	width: 284px;
	height: 35px;
	border: 1px solid #b4b4b4;
	background: #f2f2f2;
}

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

	.login-form p {
		font-size: 12px;
		font-size: 1.2rem;
	}

	.login-form form ul li span {
		display: block;
		width: 100%;
		padding-bottom: .5em;
		font-size: 12px;
		font-size: 1.2rem;
		text-align: center;
	}

	.login-form form ul li input {
		display: block;
		width: 90%;
		margin: 0 auto;
	}

}

.login-form .login-btn {
	display: block;
	width: 50%;
	max-width: 150px;
	height: 40px;
	margin: 0 auto;
	font-size: 16px;
	font-size: 1.6rem;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border: none;
	border-radius: 10px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a1362c+0,a80000+50,8e0000+100 */
	background: #a1362c; /* Old browsers */
	background: -moz-linear-gradient(top, #a1362c 0%, #a80000 50%, #8e0000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #a1362c 0%,#a80000 50%,#8e0000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #a1362c 0%,#a80000 50%,#8e0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1362c', endColorstr='#8e0000',GradientType=0 ); /* IE6-9 */
}

.login-form .login-btn:hover {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a1362c+0,a80000+51,8e0000+100 */
	background: #8e0000;
}


/*------------------------------------------
Loguin--Footer
-------------------------------------------*/

/*-Footer__Logo-Style-----*/

.footer .copy {
	width: 100%;
	text-align: center;
}