.login{}
.login__heading{
	color: #28A6E1;
	
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.5em;
	
	margin: 0;
	padding: 0;
	margin-bottom: .5em;
}
@media (min-width: 769px){
.login__heading{
	margin-bottom: 3.75rem;
}
}
@media (max-width: 768px){
.simple_header__logo{
	width: 200px;
}
.login__heading{
	font-size: 2.25rem;
	margin-bottom: 1.875rem;
}
}
.rakunori_logo{
	margin-left: auto;
	margin-right: auto;
}
.login_form{}
.login_form__pw{}
@media (min-width: 769px){
.rakunori_logo{
	max-width: 270px;
}
.login_form__pw{
	width: 50%;
	padding: .5em 1em;
}
.login_form__command{
	width: 50%;
}
}
@media (max-width: 768px){
.rakunori_logo{
	width: 50%;
}
.login_form__pw{
	width: 100%;
}
}
.login_commands{
	margin-top: 1em;
	margin-bottom: 2em;
}



.state__error{
	display: none;
	color: #f00;
}
.js-auth--error .state__error{
	display: block;
}


.state__working{
	display: none;
}
.state__working .state__working{
	display: block;
}

.js-auth--error{
	animation: error .6s ease-out;
}
.js-auth--error .input1{
	border: 1px solid red;
	background-color: #fcc;
}




@keyframes error{
0%{
	transform: translateX(0)
}
20%{
	transform: translateX(-20px)
}
40%{
	transform: translateX(20px)
}
60%{
	transform: translateX(-20px)
}
80%{
	transform: translateX(20px)
}
100%{
	transform: translateX(0)
}
}
@-webkit-keyframes error{
0%{
	-webkit-transform: translateX(0)
}
20%{
	-webkit-transform: translateX(-20px)
}
40%{
	-webkit-transform: translateX(20px)
}
60%{
	-webkit-transform: translateX(-20px)
}
80%{
	-webkit-transform: translateX(20px)
}
100%{
	-webkit-transform: translateX(0)
}
}