@charset "UTF-8";


/*================================================
 *	ヘッダのbackground-color変更
 ================================================*/
.header{
	background-color: #F087A8;
}
/*================================================
 *	login
 ================================================*/
.login{
	width:100%;
	height:auto;
	margin-top:95px;
	margin-bottom:150px;
}
.login .logo{
	width:100%;
	height:209px;
	background-image: url('../../img/login_logo.png');
	background-repeat: no-repeat;
	background-position: center;
}

.login .login_txt{
	width: 100%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: bold;
	font-size: 30px;
}
/*================================================
 *	Form
 ================================================*/
.login .login_form{
	width:473px;
	height:200px;
	margin-left: 10%;
}
.login_form .u_name{
	width: 100%;
	margin-top: 40px;
}
.login_form .u_name .name,
.login_form .u_pass .pass{
	width: 150px;
	height: 52px;
	line-height: 52px;
	margin-right: 22px;
	font-size: 18px;
}
.login_form .u_name .input_text,
.login_form .u_pass .input_pass{
	width: 258px;
	height: 10px;
	padding: 20px;
	color: black;
}
.login_form .u_pass{
	width: 100%;
	margin-top: 20px;
}

/*================================================
 *	ボタン
 ================================================*/

.button{
	border:4px solid #F087A8;
	color:#F087A8;
	background-image: url('../../img/log_arrow.png');
}
.button:hover{
	color:white;
	background-color: #F087A8;
	background-image: url('../../img/arrow_hover.png');
}

/*================================================
 *	スマホ
 ================================================*/
@media screen and (max-width: 639px) {
	.header {
		position: unset;
	}

	.user_sys {
		display: none;
	}

	.login .login_form {
		width: 80%;
		margin: 0 auto;
	}

	.login_form .u_name, .login_form .u_pass {
		display: flex;
		justify-content: space-between;
	}

	.login_form .u_name .name, .login_form .u_pass .pass {
		width: 20%;
		font-size: 3vw;
		margin: 0;
		margin-left: 3%;
		line-height: unset;
	}

	.login_form .u_name .input_text, .login_form .u_pass .input_pass {
		width: 50%;
		height: 20px;
		padding: 15px 5px;
	}

}

@media screen and (max-width: 456px) {
	.login_form .u_name .name, .login_form .u_pass .pass {
		width: 25%;
		font-size: 4vw;
		margin-left: 0;
	}

}

@media screen and (max-width: 320px) {
	.login .logo {
		height: 220px;
		background-size: 100%;
	}

	.login .login_form {
		height: 280px;
	}

	.login_form .u_name, .login_form .u_pass {
		display: block;
	}

	.login_form .u_name .name, .login_form .u_pass .pass {
		width: 100%;
		height: auto;
		font-size: 5vw;
		text-align: start;
	}

	.login_form .u_name .input_text, .login_form .u_pass .input_pass {
		width: 90%;
		margin-top: 5px;
	}

}