html,body{margin:0px;padding:0px;}
body {background-color:#999;}
* {box-sizing:border-box;}

#snslogin {text-align:center;position:relative;}
h1 {font-size:1.5rem;font-weight:normal;text-align:center; }
p {font-size:1.0rem;font-weight:normal;text-align:center;margin-bottom:2em; }

.loginbtn {width:68%;margin:0px auto 0.5em auto;cursor:pointer;}
.loginbtn:hover {opacity:0.9;}
.close {position:absolute;top:0.5em;right:0.5em;width:3.7em;}
.prev {position:absolute;top:0.5em;left:0.5em;width:3.7em;}
#googlelogin {}

form {text-align:center;}
label {display:block;font-size:0.7rem;text-align:left;margin:0px auto;padding:0px; }
input {padding:0.6em 10px;font-size:16px;margin-bottom:0.4em;}
input.checkbox {width:auto;}
input.submit {background:#68d;color:#fff;padding:1.2em 0em;margin-top:1em; }
.recaptchawrap {margin:0px auto;padding:0.3em 0px;}

.snsregister {display:inline-block;cursor:pointer;}
#snsbtnarea {position:absolute;top:0px;left:0px;height:100%;width:100%;background-color:#fff;z-index:1000;margin-top:100vh;transition:0.2s;padding-top:150px;}
#snsbtnarea.on {margin-top:0vh;}
#snsbtnarea .loginbtn {margin-bottom:1em;}

.hide {display:none;}
.hide.on {display:block;}

/*PC*/
@media (min-width: 897px){
	#snsloginwrap {position:fixed;top:calc((100vh - 530px) / 3);left:calc((100vw - 450px) / 2);width:450px;height:530px;background-color:#fff;padding:0px;}
	#snsloginwrap h1 {padding-top:1.5em;}
	label {width:304px;}
	input {width:304px;}
	input.submit {width:304px;}
	.recaptchawrap {width:304px;}
}

/*SP*/
@media (max-width: 896px){
	#snsloginwrap {width:100%;height:100vh;background-color:#fff;}
	h1 {margin:0px;padding-top:2.5em;}
	input {border:solid #ddd 1px;}
	label {width:304px;}
	input {width:304px;}
	input.submit {width:304px;}
	.recaptchawrap {width:304px;}
}