@charset "UTF-8";

.login {
	position: 			absolute;
	top: 						50%;
	left: 					50%;
	transform: 			translateY(-50%) translateX(-50%);
	padding: 				40px 40px 30px;
	border-radius: 	4px;
	padding: 				50px;
	border: 				1px solid white;
	box-sizing: 		border-box;
}

.login a {
	color: 						white;
	text-decoration: 	none;
}
.login a:link {
	color: white;
}
.login a:visited {
	color: white;
}
.login a:hover {
	color: 						white;
	text-decoration: 	none;
}
.login a:active {
	color: 						white;
	text-decoration: 	none;
}

.login .logo {
	padding: 10px 5px 10px;
}
.login .logo img {
	max-width: 65%;
}

.login .loginBox .left,
.login .loginBox .left2 {
	float: 	left;
	width: 	15%;
	margin: 20px 0 0;
}

.login .loginBox .right,
.login .loginBox .right_top,
.login .loginBox .right_bottom {
	float: 					left;
	width: 					85%;
	border-radius: 	4px;
	font-size: 			12px;
	line-height: 		18px;
}
.login .loginBox .right {
	margin: 20px 0 0;
}

.login .loginBox .right_top {
	margin: 20px 0 0;
}

.login .loginBox .right_bottom {
	margin: 0 0 20px;
}

.login input {
	width: 95%;
}

.login .loginBox img {
	width: 					22px;
	padding: 				6px;
	vertical-align: bottom;
}

.login .loginBox .left2 img {
	padding: 				23px 0;
}

.login .alert {
	display: 					none;
	margin: 					20px 0;
	padding: 					10px 0;
	color:						#ff3939;
	font-size: 				16px;
	background-color: #ffD0D0;
	border-radius: 		4px;
}

.login button {
	width: 					75%;
	margin: 				20px 0;
	padding: 				10px 50px;
	border-radius: 	25px;
}
.login button span {
	font-size: 			18px;
}

/*************** メディアクエリ *************** /
/* スマホ */
@media screen and (max-width:600px) {
	.login {
		width: 90%
	}
	.login button span {
		font-size: 14px;
	}
}