@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--red : #a5c13a;
	--gray : #e7e7e7;
}
#login{
	letter-spacing : 0;
}
@media screen and (max-width: 768px){
	#login .wrap{
		padding-top : calc( 34 * 100vw / 768 );
		padding-bottom : calc( 56 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#login .wrap{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
		padding-top : 48px;
		padding-bottom : 37px;
	}
}
#login #loginbox{
	background-color : #efefef;
}
#login #loginbox h2{
	text-align : center;
}
#login #loginbox h2:after{
	content : "";
	display : block;
	margin-left : auto;
	margin-right : auto;
	background-color : var(--red);
}
#login #loginbox form{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
}
#login #loginbox label{
	display : flex;
	align-items : center;
	flex-grow : 1;
}
#login #loginbox label span{
	flex-shrink : 0;
}
#login #loginbox label input{
	flex-grow : 1;
}
#login #loginbox input[type="text"] , #login #loginbox input[type="password"]{
	border : 0;
	background-color : #fff;
}
#login #loginbox input[type="submit"] , #login #loginbox .registration{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	background-color : var(--red);
	color : #fff;
	flex-shrink : 0;
}
#login #loginbox .forget{
	text-decoration : underline;
	display : inline-block;
}
@media screen and (max-width: 768px){
	#login #loginbox{
		margin-top : calc( 60 * 100vw / 768 );
		padding-left : calc( 24 * 100% / 720 );
		padding-right : calc( 24 * 100% / 720 );
		padding-top : calc( 49 * 100vw / 768 );
		padding-bottom : calc( 48 * 100vw / 768 );
	}
	#login #loginbox h2{
		font-size : 3.4rem;
	}
	#login #loginbox h2:after{
		width : calc( 200 * 100vw / 768 );
		height : calc( 6 * 100vw / 768 );
		margin-top : calc( 18 * 100vw / 768 );
	}
	#login #loginbox h2 + .text02{
		margin-top : calc( ( 42 - 7 ) * 100vw / 768 );
	}
	#login #loginbox form{
		margin-top : calc( ( 15 - 7 ) * 100vw / 768 );
	}
	#login #loginbox form > label:first-of-type{
		width : 100%;
		margin-bottom : calc( 20 * 100vw / 768 );
	}
	#login #loginbox form > label:nth-of-type(2){
		width : calc( 475 * 100% / 672 );
	}
	#login #loginbox label span{
		font-size : 2.6rem;
		width : calc( 155 * 100vw / 768 );
	}
	#login #loginbox input[type="text"] , #login #loginbox input[type="password"]{
		height : calc( 60 * 100vw / 768 );
		font-size : 2.6rem;
	}
	#login #loginbox input[type="submit"]{
		width : calc( 197 * 100% / 672 );
		height : calc( 60 * 100vw / 768 );
		font-size : 2.6rem;
	}
	#login #loginbox .forget{
		margin-left : calc( 155 * 100vw / 768 );
		font-size : 2.6rem;
		margin-top : calc( 33 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#login #loginbox{
		padding-left : 20px;
		padding-right : 20px;
		padding-top : 38px;
		padding-bottom : 27px;
		width : 600px;
		flex-shrink : 0;
	}
	#login #loginbox h2{
		font-size : 2.2rem;
	}
	#login #loginbox h2:after{
		width : 200px;
		height : 3px;
		margin-top : 16px;
	}
	#login #loginbox h2 + .text02{
		margin-top : calc( 20px - 4px );
		padding-left : 20px;
		padding-right : 20px;
	}
	#login #loginbox form{
		margin-top : calc( 27px - 4px );
	}
	#login #loginbox form > label:first-of-type{
		width : 100%;
		margin-bottom : 29px;
	}
	#login #loginbox label span{
		font-size : 1.6rem;
		width : 110px;
	}
	#login #loginbox input[type="text"] , #login #loginbox input[type="password"]{
		height : 48px;
		font-size : 1.6rem;
	}
	#login #loginbox input[type="submit"]{
		width : 145px;
		height : 48px;
		font-size : 1.6rem;
		margin-left : 21px;
	}
	#login #loginbox .forget{
		margin-left : 110px;
		font-size : 1.6rem;
		margin-top : 24px;
	}
}
#login #signupbox h2:after{
	content : "";
	display : block;
	background-color : var(--red);
}
#login #signupbox .registration{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	background-color : var(--red);
	color : #fff;
	flex-shrink : 0;
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 768px){
	#login #signupbox{
		padding-top : calc( 60 * 100vw / 768 );
	}
	#login #signupbox h2{
		font-size : 3rem;
	}
	#login #signupbox h2:after{
		width : calc( 240 * 100vw / 768 );
		height : calc( 3 * 100vw / 768 );
		margin-top : calc( 13 * 100vw / 768 );
	}
	#login #signupbox h2 + .text02{
		margin-top : calc( ( 36 - 7 ) * 100vw / 768 );
	}
	#login #signupbox .registration{
		width : calc( 600 * 100vw / 768 );
		height : calc( 80 * 100vw / 768 );
		font-size : 2.6rem;
		margin-top : calc( ( 49 - 7 ) * 100vw / 768 );
	}
	#login #signupbox .link02{
		margin-top : calc( 32 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#login #signupbox{
		width : 432px;
		margin-left : 28px;
		padding-top : 38px;
	}
	#login #signupbox h2{
		font-size : 2.2rem;
	}
	#login #signupbox h2:after{
		width : 200px;
		height : 3px;
		margin-top : 16px;
	}
	#login #signupbox h2 + .text02{
		margin-top : calc( 22px - 4px );
	}
	#login #signupbox .registration{
		width : 200px;
		height : 48px;
		font-size : 1.6rem;
		margin-top : calc( 35px - 4px );
	}
	#login #signupbox .link02{
		margin-top : 32px;
	}
}
/*# sourceMappingURL=../maps/login.css.map */