@charset "utf-8";

html, body {height:100%;}
.index {display:flex; justify-content:space-between; align-items:center; height:100%; background-repeat:no-repeat;}
.index>div {flex-basis:45%;}

.indexL {text-align:right;}
.logo {color:#fff; font-size:83px; line-height:90%;}
.logo_name {font-size:37px;}

.indexR form {width:385px;}
.indexR input {width:100%;}
.indexR input[type=text], .indexR input[type=password] {padding:0 20px; margin-bottom:5px; line-height:60px; color:#999; border:1px solid #ccc;}
.indexR input[type=submit] {line-height:62px; font-size:16px; color:#fff; border:0; border-radius:3px;}

.indexR .passwordInfo {width:385px; margin-top:20px; padding:20px; background:rgb(232, 240, 254); border:1px solid #1d51b8;}
.indexR .passwordInfo p {position: relative; padding-left:9px; line-height:24px; }
.indexR .passwordInfo p::before {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width:4px; 
	height:4px;
	border-radius: 3px;
	background: #1d51b8;
}

@media screen and (max-width:800px){
	.index {display:block;}
	.indexL {text-align:center;  padding:5% 5% 10%;}

	.indexR form {margin:5% auto; max-width:90%;}
}