@charset "UTF-8";

/********************************************************************************
 * ログイン画面用
 ********************************************************************************/
/***********************************************************
 * 背景など
 ***********************************************************/
.wrap-login {
    display:				flex;
    align-items:			center;
	flex-grow:				1;
    justify-content:		center;
	background:				url( '../images/mainimage.png' ) 50% 50%;
	background-size:		cover;
}
.inner-contents {
	width:					100%;
	background:				rgba(255, 255, 255, .8);
	border:					solid #fff;
	border-width:			1px 0 1px 0;
	padding:				40px 0;
	margin:					0 auto;
}

/***********************************************************
 * アンカータグ
 ***********************************************************/
.inner-contents a {
	color:					#333;
	line-height:			1;
	text-decoration:		underline;
}
.inner-contents a:hover {
	text-decoration:		none;
}

/***********************************************************
 * 表示エリア(入力フォーム)
 ***********************************************************/
.area-form {
	width:					600px;
	display:				flex;
	justify-content:		space-between;
	align-items:			center;
	margin:					0 auto;
}
.area-form > figure {
	flex-shrink:			0;
	width:					250px;
}
.area-form > div {
	flex-grow:				1;
	padding-left:			30px;
}
.area-form input[type="text"],
.area-form input[type="email"],
.area-form input[type="password"] {
	width:					100%;
	height:					36px;
	background:				#fff;
	border:					solid 1px rgba(0, 0, 0, .2);
	border-radius:			3px;
	padding:				0 10px;
}

/***********************************************************
 * ログインボタン
 ***********************************************************/
.btn-login {
	display:				inline-block;
	border-radius:			5px;
	box-shadow:				0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-login input {
	font-family:			"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	color:					#fff;
	font-weight:			bold;
	padding:				8px 30px;
	cursor:					pointer;
}

/***********************************************************
 * 表示エリア(パスワードを忘れた方用)
 ***********************************************************/
.area-form2 {
	width:					800px;
	display:				flex;
	justify-content:		space-between;
	align-items:			center;
	margin:					0 auto;
}
.area-form2 > figure {
	flex-shrink:			0;
	width:					250px;
}
.area-form2 > div {
	flex-grow:				1;
	padding-left:			30px;
}
.area-form2 input[type="text"],
.area-form2 input[type="email"],
.area-form2 input[type="password"] {
	width:					90%;
	height:					36px;
	background:				#fff;
	border:					solid 1px rgba(0, 0, 0, .2);
	border-radius:			3px;
	padding:				0 10px;
}

@media only screen and (max-width:800px){
	.inner-contents {
		width:				100%;
		border:				none;
		border-radius:		10px;
		padding:			30px;
		margin:				0 30px;
	}
	.area-form {
		width:				100%;
		display:			block;
	}
	.area-form > figure {
		width:				250px;
		margin:				0 auto 20px auto;
	}
	.area-form > div {
		padding-left:		0;
	}
	.area-form2 {
		width:				100%;
		display:			block;
	}
	.area-form2 > figure {
		width:				250px;
		margin:				0 auto 20px auto;
	}
	.area-form2 > div {
		padding-left:		0;
	}
}