@charset 'utf-8';

/* ------------------------------
 新規登録
------------------------------ */

#main {
	background-color: #e5f4fb;
}

@media screen and (min-width: 0) and (max-width: 899px) {
	#main {
		padding: 6.25%;
	}
}

@media screen and (min-width: 900px) {
	#main {
		padding: 40px 50px 40px 80px;
	}
	#main figure {
		float: left;
		width: 316px;
		margin-right: 30px;
	}
	#main p .all-underline:hover {
		text-decoration: underline;
	}
}


/* ソーシャルログイン */

#social-login li a {
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background-repeat: no-repeat;
}

.social-login-google a {
	background-color: #dc4a3d;
	background-image: url(../img/common/google.svg);
	background-position: left center;
}

.social-login-twitter a {
	background-color: #55acee;
	background-image: url(../img/common/twitter.svg);
	background-position: left center;
}

.social-login-facebook a {
	background-color: #0e3280;
	background-image: url(../img/common/facebook.svg);
	background-position: left center;
}

.social-login-google a {
	background-position: 8% center;
}

.social-login-twitter a {
	background-position: 7% center;
}

.social-login-facebook a {
	background-position: 9% center;
}

@media screen and (min-width: 0) and (max-width: 899px) {
	#social-login {
		width: 84.375%;
		margin-right: auto;
		margin-left: auto;
	}
	#social-login li a {
		line-height: 1.071428571428571;
		padding: 3.90625vw 7.8125vw 3.90625vw 21.875vw;
		background-size: auto 52.5%;
	}
}

@media screen and (min-width: 900px) {
	#social-login li {
		line-height: 0;
		float: left;
		width: 250px;
		margin-right: 25px;
	}
	#social-login li:last-child {
		margin-right: 0;
	}
	#social-login li a {
		line-height: 20px;
		padding: 10px 20px 10px 70px;
		-webkit-transition: background-color 400ms false;
		-moz-transition: background-color 400ms false false;
		-o-transition: background-color 400ms false false;
		transition: background-color 400ms;
		background-size: auto 22px;
	}
	.social-login-google a:hover {
		background-color: #e5776e;
	}
	.social-login-twitter a:hover {
		background-color: #80c1f2;
	}
	.social-login-facebook a:hover {
		background-color: #4a65a0;
	}
}

#steps li {
	float: left;
}

#steps li:last-child {
	padding-right: 0;
}

#information {
	border: 1px dotted #b7b7b7;
}

#information dt::before {
	content: '─ ';
}

#information dt::after {
	content: ' ─';
}

@media screen and (min-width: 0) and (max-width: 899px) {
	#steps {
		width: 73.4375%;
	}
	#steps li {
		width: 27.65957446808511%;
		padding-right: 8.51063829787234%;
	}
	#information {
		padding: 3.125vw;
	}
}

@media screen and (min-width: 900px) {
	#signup_box {
		padding: 30px;
		background-color: #f5f5f5;
	}
	#signup {
		padding: 40px 40px 60px;
		background-color: #fff;
		box-shadow: 1px 1px 0 0 #e1e1e1;
	}
	#steps {
		width: 288px;
	}
	#steps li {
		width: 66px;
		padding-right: 45px;
		background: url(../img/common/arrow_next-black.svg) no-repeat right center;
		background-position: 85px center;
		background-size: auto 12px;
	}
	#signup form {
		width: 360px;
	}
	#information {
		padding: 20px;
	}
}


/* エラー文言 */

.error {
	font-weight: bold;
	color: #d00;
	border-radius: 4px;
	background-color: #fbe7e9;
}

@media screen and (min-width: 0) and (max-width: 899px) {
	.error {
		margin-top: 3.125vw;
		padding: 3.125vw;
	}
}

@media screen and (min-width: 900px) {
	.error {
		margin-top: 10px;
		padding: 10px;
	}
}


/*
--------------------------------------------------------------------------------
 END OF CSS
--------------------------------------------------------------------------------
*/