@charset "utf-8";

div.login{
	width:calc(100% - 20px);
	max-width:1080px;
	margin:100px auto;
	background-color:#e7fbff;
	padding:40px;
	box-sizing:border-box;
}

	div.login > div{
		background-color:#fff;
		margin:0 auto;
		padding:70px 20px;
		box-sizing:border-box;
	}
	
h1.login{
	background-image:url('../img/h1_login.svg');
	background-size:280px auto;
	background-position:center top;
	background-repeat:no-repeat;
	text-align:center;
	margin:0 auto 60px auto;
	padding:50px 0 0 0;
	font-size:2em;
	font-weight:bold;
	color:#006494;
	line-height: 1.5em;
}

	h1.login span{
		display:none;
	}
	
	div.login p{
		text-align:center;
		font-weight:500;
		color:#006494;
		line-height:1.5em;
		margin:5px auto;
	}
	
		div.login p a,
		div.login p.error{
			color:#b34937;
			font-weight:bold;
		}
		
		div.login p.error{
			margin:40px auto;
			font-size:1.2em;
		}
	
	
	div.login table{
		width:calc(100% - 20px);
		max-width:700px;
		margin:40px auto;
		box-sizing:border-box;
		border-collapse:collapse;
		font-size:1.2em;
	}
	
		div.login table th{
			width:210px;
			color:#808080;
			text-align:center;
			font-weight:500;
		}
		
		div.login table td{
			text-align:center;
			padding:15px 0;
		}
		
	div.login input[type=mail],
	div.login input[type=password]{
		padding:10px;
		background-color:#f2f2f2;
		border:1px #006494 solid;
		width:calc(100% - 20px);
		box-sizing:border-box;
	}

	div.login input[type=submit]{
		display:block;
		height:60px;
		line-height:60px;
		background-color:#006494;
		border-radius:30px;
		border:none;
		color:#fff;
		cursor:pointer;
		width:calc(100% - 40px);
		max-width:290px;
		background-image:url('../img/login_1.svg');
		background-position:calc(50% - 60px) center;
		background-size:28px auto;
		background-repeat:no-repeat;
		font-size:1.5em;
		text-indent:30px;
		margin:40px auto;
	}
	
	div.login input[type=submit]:hover{
		color:#006494;
		background-color:#85e9ff;
		background-image:url('../img/login_2.svg');
	}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
smf
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
@media screen and (max-width:800px){
div.login{
	margin:40px auto;
	padding:20px;
}
}
@media screen and (max-width:600px){
	div.login table,
	div.login table tbody,
	div.login table tr,
	div.login table th,
	div.login table td{
		display:block;
		width:100%;
		box-sizing:border-box;
	}
}

@media screen and (max-width:400px){
h1.login{
	background-size:200px auto;
	font-size:1.5em;
	padding:45px 0 0 0;
}

	div.login input[type=submit]{
		height:46px;
		line-height:46px;
		border-radius:23px;
		font-size:1.2em;
		background-position:calc(50% - 45px) center;
		background-size:20px auto;
		
	}
}