/*
    更新日：2019年2月13日 水曜日
    作成者：小林
    ログイン画面（PC版、モバイル版）
*/

html{
	height: 100%;
}

body{
	margin: 0;
	padding: 0;
	position: relative;
}

/* ヘッダー、フッターを除く領域 */
#loginBody{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
}

/* 画面幅750px以下（モバイル） */
@media screen and ( min-width: 750px )
{
	/* ログインフォーム */
	#loginForm{
		background: #fafafa;
		border: solid #4eb4c2 1px;

		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;

		-webkit-box-shadow: 0px 0px 3px #488a9e;
		-moz-box-shadow: 0px 0px 3px #488a9e;
		box-shadow: 0px 0px 3px #488a9e;
		margin: 3% 10% 3% 10%;
		padding: 1% 3% 1% 3%;
		width: 35%;
	}

	/* 中央『ログイン』 */
	.formTitle{
		border-bottom: 2px solid #4eb4c2;
		color: #4eb4c2;
		font-size: 200%;
		font-weight: bold;
		
		margin: 5% 0 10% 0;
		padding: 0 0 3% 0;
		text-align: center;
	}

	/* 『パスワード』ラベル */
	.passLabel{
		color: #077685;
		font-size: 90%;
		font-weight: bold;
		position: relative;
		text-align: right;
		width: 48%;
	}

	/* テキストボックス */
	input[type="password"]{
		border: solid 0.5px;
		border-color: #488a9e;
		margin: 1% 3% 3% 3%;
	}
}

/* 画面幅450px以上、750px以下 */
@media screen and ( max-width: 750px) and ( min-width: 450px )
{
	/* ログインフォーム */
	#loginForm{
		background: #fafafa;
		border: solid #4eb4c2 1px;

		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;

		-webkit-box-shadow: 0px 0px 3px #488a9e;
		-moz-box-shadow: 0px 0px 3px #488a9e;
		box-shadow: 0px 0px 3px #488a9e;

		margin: 8% 10% 8% 10%;
		padding: 1% 3% 1% 3%;
		width: 50%;
	}

	/* 中央『ログイン』 */
	.formTitle{
		border-bottom: 2px solid #4eb4c2;
		color: #4eb4c2;
		font-size: 200%;
		font-weight: bold;
		
		margin: 5% 0 10% 0;
		padding: 0 0 3% 0;
		text-align: center;
	}

	/* 『パスワード』ラベル */
	.passLabel{
		color: #077685;
		font-size: 90%;
		font-weight: bold;
		position: relative;
		text-align: right;
		width: 47%;
	}

	/* safari用『パスワード』ラベル */
	_::-webkit-full-page-media, _:future, :root .passLabel {
		width: 50%;
	}

	/* テキストボックス */
	input[type="password"]{
		border: solid 0.5px;
		border-color: #488a9e;
		margin: 1% 3% 3% 3%;
	}
}

/* 画面幅450px以下（モバイル） */
@media screen and ( max-width: 450px )
{
	/* ログインフォーム */
	#loginForm{
		background: #fafafa;
		border: solid #4eb4c2 1px;

		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;

		-webkit-box-shadow: 0px 0px 3px #488a9e;
		-moz-box-shadow: 0px 0px 3px #488a9e;
		box-shadow: 0px 0px 3px #488a9e;

		margin: 10% 5% 10% 5%;
		padding: 1% 3% 1% 3%;
		width: 95%;
	}

	/* 中央『ログイン』 */
	.formTitle{
		border-bottom: 2px solid #4eb4c2;
		color: #4eb4c2;
		font-size: 200%;
		font-weight: bold;
		
		margin: 5% 0 10% 0;
		padding: 0 0 3% 0;
		text-align: center;
	}

	/* 『パスワード』ラベル */
	.passLabel{
		color: #077685;
		font-size: 90%;
		font-weight: bold;
		position: relative;
		text-align: right;
		width: 47%;
	}

	_::-webkit-full-page-media, _:future, :root .className {
		color: #ff0000;
	}

	/* safari用『パスワード』ラベル */
	_::-webkit-full-page-media, _:future, :root .passLabel {
		width: 51%;
	}
	/* テキストボックス */
	input[type="password"]{
		border: solid 0.5px;
		border-color: #488a9e;
		margin: 1% 3% 3% 3%;
	}
}

/* パスワードラベル＋入力テキストボックス */
.loginPass{
	bottom: 10px;
	position: relative;
	width: 100%;
}

/* パスワード入力テキストボックス */
.passText{
	margin-bottom: 10px;
	position: relative;
	text-align: center;
}

/* メッセージ領域 */
#messageLabe{
	color: #ff5656;
	font-size: 14px;
	margin-bottom: 20px;
	padding-left: 10px;
	position: relative;
	text-align: center;
}

/* ログインボタン */
input[type="button"]{
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#61c7e0), to(#418da8));
	background: -moz-linear-gradient(top, #61c7e0, #418da8);
	border: solid #f5fdff 4px;
	border-style: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
	display:block;
	margin: 0 auto;
	padding: 10px 20px 10px 20px;
	position: relative;	
}