@charset 'utf-8';

/* ------------------------------
 ログイン設定
------------------------------ */

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

@media screen and (min-width: 900px) {
	#login_box {
		background-color: #efefef;
		padding: 20px;
	}
}


/* タイトル（上書き） */

@media screen and (min-width: 900px) {
	.login-left {
		width: 270px;
		float: left;
	}
	.login-right {
		width: 360px;
		float: right;
	}
}


/* ボタン大（上書き） */

@media screen and (min-width: 0) and (max-width: 899px) {
	.btn-large {
		width: 80vw;
	}
}


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

.social-login-google a,
.social-login-twitter a,
.social-login-facebook a,
.social-login-mail a {
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background-repeat: no-repeat;
}

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

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

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

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

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

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

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

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

@media screen and (min-width: 0) and (max-width: 899px) {
	.social-login-google a,
	.social-login-twitter a,
	.social-login-facebook a,
	.social-login-mail a {
		background-size: auto 52.5%;
		line-height: 1.071428571428571;
		padding: 3.90625vw 7.8125vw 3.90625vw 21.875vw;
	}
}

@media screen and (min-width: 900px) {
	.social-login-google,
	.social-login-twitter,
	.social-login-facebook,
	.social-login-mail {
		line-height: 0;
	}
	.social-login-google a,
	.social-login-twitter a,
	.social-login-facebook a,
	.social-login-mail a {
		background-size: auto 22px;
		-webkit-transition: background-color 400ms false;
		-moz-transition: background-color 400ms false false;
		-o-transition: background-color 400ms false false;
		transition: background-color 400ms;
		line-height: 20px;
		padding: 10px 20px 10px 60px;
	}
	.social-login-google a:hover {
		background-color: #e5776e;
	}
	.social-login-twitter a:hover {
		background-color: #80c1f2;
	}
	.social-login-facebook a:hover {
		background-color: #4a65a0;
	}
	.social-login-mail a:hover {
		background-color: #414141;
	}
}


/* 新規登録 */

@media screen and (min-width: 900px) {
	#signup_bar {
		background-color: #f5f5f5;
		line-height: 30px;
		padding: 0 10px;
	}
}


/* 訴求追加 */

@media screen and (min-width: 900px) {
	#t_login {
		background: #e5f4fb url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAMAAABCDMR4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAA5JREFUeNpiYMAEAAEGAAAUAAFoSTJjAAAAAElFTkSuQmCC) repeat-x;
	}
	.login_ex p {
		width: 350px;
	}
	.login_ex figure {
		width: 480px;
	}
	.login_ex:nth-child(even) figure,
	.login_ex:nth-child(odd) p {
		float: left;
	}
	.login_ex:nth-child(odd) figure,
	.login_ex:nth-child(even) p {
		float: right;
	}
}


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