@charset "utf-8";
/* CSS Document */

body,p,form,input{margin: 0}
body,html{
	height:100%;
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
body{
	background-image:url(../img/login_img4.jpg);
	background-position: center center;
	background-repeat: no-repeat;
}
#header{
	background-color:#fff;
	height:60px;
	width:auto;
}
#header img{
	height:55px;
	margin-left:5%;
	margin-top:5px;
}

#header_moji{
	text-decoration:none; 
	float:right; 
	font-size:16px; 
	color:#000; 
	margin-top:20px; 
	margin-right:5%;
	font-weight:bold;
}
#form{
	max-width:400px;
	position:absolute;
	top:40%;
	left:35%;
	padding: 30px;
	padding-bottom:20px;
	font-size:14px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background-color:#fff;
  }
.mail,.pass{
	margin-bottom: 20px;
  }

input[type="text"],
input[type="password"] {
	width: 300px;
	padding: 4px;
	font-size: 14px;
  }
    
#form p{
	font-weight: bold;
	font-size:16px;
  }

#form .form-title{
	font-family: Arial;
	font-size: 20px;
  }
#form .form-title{
	padding-bottom: 6px;
	border-bottom: 2px solid #00a0f0;
	margin-bottom: 20px;
	text-align: center;
  }
.submit{
	text-align:center;
  }
.submit input{
	font-family: Arial;
	color: #ffffff;
	width:100px;
	font-size: 16px;
	font-weight:bold;
	margin:10px auto;
	padding:10px 20px;
	background:#71d0ff;
	border:none;
	-webkit-appearance: none;
	-webkit-border-radius : 5px;
	   -moz-border-radius : 5px;
	        border-radius : 5px;
  }
.submit input:hover{
  background: #00a0f0;
 }
@media only screen and (max-width:768px){
#form{
	position:absolute;
	top:30%;
	left:20%;
}
}
@media only screen and (max-width:480px){
#header img{
	height:40px;
}	
#form{
  	max-width: 300px;
	position:absolute;
	top:30%;
	left:10%;
	padding:30px 20px;
}
#login_form{
	width:80%;
}
input[type="text"],
input[type="password"] {
  width:100%;
  }

}