@charset "utf-8";


@import url( 'https://fonts.googleapis.com/css?family=Cinzel' );


/* -- form#login-form -------------------------------------------------------------------------------- */

form#login-form{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	width: 600px;
	height: 400px;
	background : #ffffff;
	border : 1px solid #cccccc;
	border-radius : 7px;
	box-shadow : 0 0 5px rgba( 0, 0, 0, 0.2 );
	padding : 10px 0;
}


form#login-form h1{
	width : 85%;
	margin : 0 auto;
	font-size : 210%;
	text-align : center;
	font-family : 'Cinzel', serif;
	letter-spacing : 0.08em;
	text-shadow : 3px 4px 2px rgba( 0, 0, 0, 0.1 );
}

form#login-form h2{
	width : 85%;
	margin : 0 auto;
	font-size : 160%;
	text-align : center;
	font-family : 'Cinzel', serif;
	letter-spacing : 0.08em;
	text-shadow : 3px 4px 2px rgba( 0, 0, 0, 0.1 );
}


form#login-form input{
	height : 2em;
	padding : 2px 2%;
	border : 1px solid #cccccc;
	border-radius : 3px;
	background : #fafafa;
}

form#login-form input:focus{
	box-shadow : 0px 0px 5px #55ccff;
	border : 1px solid #55ccff;
	background : #ffffff;
}


form#login-form dl{
	width : 80%;
	margin : 15px auto 0;
}

form#login-form dl dt{
	margin-top : 20px;
}

form#login-form dl dt:first-child{
	margin-top : 0;
}

form#login-form dl dd input{
	width : 95%;
	margin-top : 5px;
	-webkit-appearance : none;
	font-size : 100%;
}


form#login-form p.submit{
	width : 80%;
	margin : 30px auto 0;
}

form#login-form p.submit input{
	height : auto;
	padding : 9px 15px;
	vertical-align : middle;
	line-height : 1;
	background : #5cb85c;
	border : 1px solid #4cae4c;
	border-radius : 3px;
	color : #ffffff;
	font-family : inherit;
	-webkit-appearance : none;
	font-size : 100%;
}

form#login-form p.submit input:hover{
	cursor : pointer;
	background : #449d44;
	border : 1px solid #398439;
}


/* -- for JavaScript ここから -------------------- */

form#login-form dl dd span{
	display : block;
	color : #ff0000;
}


/* -- for JavaScript ここまで -------------------- */








/* --responsive----------------------------------------------------------------------------------------------------------------------- */

/* 640pixel start */
@media screen and ( max-width : 640px ){

form#login-form,
form#logout-form{
	width : 95%;
	margin : 40px auto;
	position : static;
	transform : translate( 0, 0 );
}

}
/* 640pixel end */