@charset "utf-8";

/* login */
/* --- SP ---------- */
@media print, screen and (max-width: 768px) {
	.login {
		background-color: #eaebed;
		font-size: 90%;
		min-height: 100vh;
	}
	.login .login-box {
		max-width: 400px;
		width: 90%;
		margin: 0 auto;
		padding: 20px 0 0;
	}
	.login .login-box .logo {
		text-align: center;
		margin: 30px auto;
	}
	.login .login-box .logo svg{
		width: 240px;
	}

	.login .login-box .logo svg path{
		fill: var(--logo-color);
	}

	.login .login-box .login-form {
	}
	.login .login-box .login-form form{
		width: 100%;
	}
	.login .login-box .login-form input[type="text"], .login .login-box .login-form input[type="password"]{
		display: block;
		width: 100%;
		border: 1px solid #d2d2d2;
		position: relative;
		padding: 20px;
		box-sizing: border-box;
		font-size: 105%;
	}
	.login .login-box .login-form input[type="text"]::placeholder, .login .login-box .login-form input[type="password"]::placeholder{
		color: #949494;
	}
	.login .login-box .login-form #id {
	}
	.login .login-box .login-form #password {
		top: -1px;
	}
	.login .login-box .login-form .alert{
		color: red;
		line-height: 1.5;
		margin: 10px auto;
	}
	.login .login-box .login-form .submit-btn {
		display: block;
		width: 100%;
		margin: 15px auto;
		background-color: var(--logo-color);
		color: #fff;
		font-size: 120%;
		font-weight: bold;
		border: 0;
		padding: 18px 0;
		line-height: 1;
		box-sizing: border-box;
		cursor: pointer;
	}
	.login .login-box .login-form .user-help {
		text-align: right;
	}
	.login .login-box .login-form .user-help a {}
	.login .login-box .login-form .user-help a img {
		margin: 0 5px 0 0;
	}
	.login .login-box .login-form .user-help a span {
		text-decoration: underline;
	}
	.login .login-box .sign-up {
		margin: 80px auto;
	}
	.login .login-box .sign-up .text {
		font-size: 120%;
		font-weight: bold;
		text-align: center;
	}
	.login .login-box .sign-up .btn {
		margin: 15px auto;
	}
	.login .login-box .sign-up .btn a{
		display: block;
		box-sizing: border-box;
		font-size: 120%;
		font-weight: bold;
		text-align: center;
		padding: 18px 0;
	}
	.login .login-box .sign-up .btn .guest {
		border: 1px solid #34353a;
		background-color: #fff;
	}
	.login .login-box .sign-up .btn .register {
		color: #fff;
		background-color: #34353a;
	}
	.login .copyright {}
	.login .copyright p {
		text-align: center;
		font-size: 85%;
		color: #a0a0a2;
	}

	.lost-password{
		margin: 50px auto;
	}
	.lost-password .main-title{
		text-align: center;
		font-size: 140%;
		font-weight: bold;
		color: var(--button-blue);
		line-height: 1.5;
	}
	.lost-password .title-text{
		text-align: center;
		margin: 20px 0 0;
		line-height: 1.5;
		font-size: 88%;
	}
	.lost-password .form-wrap{
		margin: 30px auto;
	}
	.lost-password .form-wrap .box{
		margin-bottom: 30px;
	}
	.lost-password .form-wrap .box > div{
		margin: 0 0 10px;
	}
	.lost-password .form-wrap .box .name{}
	.lost-password .form-wrap .box .name p{
		color: #000;
		font-weight: bold;
	}
	.lost-password .form-wrap .box .desc{}
	.lost-password .form-wrap .box .desc input{
		box-sizing: border-box;
		width: 100%;
		border: 1px solid #fff;
		background-color: #fff;
		border-radius: 2px;
		height: 50px;
		padding: 15px;
		color: #000;
		font-size: 100%;
		font-weight: bold;
		margin: 0 0 10px;
	}
	.lost-password .btn{
		text-align: center;
	}
	.lost-password .btn a{
		display: inline-block;
		max-width: 300px;
		width: 90%;
		color: #fff;
		background-color: var(--button-blue);
		border: 1px solid var(--button-blue);
		box-sizing: border-box;
		padding: 20px 0;
		font-size: 110%;
		text-align: center;
		margin: 0 0 10px;
	}
	.lost-password .btn a:hover{
		background-color: #fff;
		color: var(--button-blue);
	}

	.lost-password .alert{
		color: red;
		line-height: 1.5;
		margin: 10px auto;
	}
	.form-wrap .msg-error{
		display: block;
		margin: 0 0 15px;
		font-size: 65%;
		color: red;
	}
}
@media print, screen and (max-width: 480px) {}
/* --- PC ---------- */
@media print, screen and (min-width: 769px) {
	.login {
		background-color: #eaebed;
		height: 100vh;
	}
	.login .login-box {
		max-width: 400px;
		width: 90%;
		margin: 0 auto;
		padding: 50px 0 0;
	}
	.login .login-box .logo {
		text-align: center;
		margin: 60px auto;
	}
	.login .login-box .logo svg{
		width: 320px;
	}

	.login .login-box .logo svg path{
		fill: var(--logo-color);
	}

	.login .login-box .login-form {
	}
	.login .login-box .login-form form{
		width: 100%;
	}
	.login .login-box .login-form input[type="text"], .login .login-box .login-form input[type="password"]{
		display: block;
		width: 100%;
		border: 1px solid #d2d2d2;
		position: relative;
		padding: 20px;
		box-sizing: border-box;
		font-size: 105%;
	}
	.login .login-box .login-form input[type="text"]::placeholder, .login .login-box .login-form input[type="password"]::placeholder{
		color: #949494;
	}
	.login .login-box .login-form #id {
	}
	.login .login-box .login-form #password {
		top: -1px;
	}
	.login .login-box .login-form .alert{
		font-size: 85%;
		color: red;
		line-height: 1.5;
		margin: 10px auto;
	}
	.login .login-box .login-form .submit-btn {
		display: block;
		width: 100%;
		margin: 15px auto;
		background-color: var(--logo-color);
		color: #fff;
		font-size: 120%;
		font-weight: bold;
		border: 0;
		padding: 18px 0;
		line-height: 1;
		box-sizing: border-box;
		cursor: pointer;
	}
	.login .login-box .login-form .user-help {
		text-align: right;
	}
	.login .login-box .login-form .user-help a {}
	.login .login-box .login-form .user-help a img {
		margin: 0 5px 0 0;
	}
	.login .login-box .login-form .user-help a span {
		text-decoration: underline;
	}
	.login .login-box .sign-up {
		margin: 80px auto;
	}
	.login .login-box .sign-up .text {
		font-size: 120%;
		font-weight: bold;
		text-align: center;
	}
	.login .login-box .sign-up .btn {
		margin: 15px auto;
	}
	.login .login-box .sign-up .btn a{
		display: block;
		box-sizing: border-box;
		font-size: 120%;
		font-weight: bold;
		text-align: center;
		padding: 18px 0;
	}
	.login .login-box .sign-up .btn .guest {
		border: 1px solid #34353a;
		background-color: #fff;
	}
	.login .login-box .sign-up .btn .register {
		color: #fff;
		background-color: #34353a;
	}
	.login .copyright {

	}
	.login .copyright p {
		text-align: center;
		font-size: 85%;
		color: #a0a0a2;
	}

	.lost-password{
		margin: 100px auto;
	}
	.lost-password .main-title{
		text-align: center;
		font-size: 160%;
		font-weight: bold;
		color: var(--button-blue);
	}
	.lost-password .title-text{
		text-align: center;
		margin: 20px 0 0;
		line-height: 2;
		font-size: 100%;
	}
	.lost-password .form-wrap{
		margin: 30px auto;
	}
	.lost-password .form-wrap .box{}
	.lost-password .form-wrap .box > div{
		margin: 0 0 10px;
	}
	.lost-password .form-wrap .box .name{}
	.lost-password .form-wrap .box .name p{
		color: #000;
		font-weight: bold;
	}
	.lost-password .form-wrap .box .desc{}
	.lost-password .form-wrap .box .desc input{
		box-sizing: border-box;
		width: 100%;
		border: 1px solid #fff;
		background-color: #fff;
		border-radius: 2px;
		height: 50px;
		padding: 15px;
		color: #000;
		font-size: 100%;
		font-weight: bold;
		margin: 0 0 10px;
	}
	.lost-password .btn{
		text-align: center;
	}
	.lost-password .btn a{
		display: inline-block;
		max-width: 300px;
		width: 90%;
		color: #fff;
		background-color: var(--button-blue);
		border: 1px solid var(--button-blue);
		box-sizing: border-box;
		padding: 20px 0;
		font-size: 110%;
		text-align: center;
		margin: 0 0 10px;
	}
	.lost-password .btn a:hover{
		background-color: #fff;
		color: var(--button-blue);
	}
	.lost-password .alert {
		font-size: 85%;
		color: red;
		line-height: 1.5;
		margin: 10px auto;
	}
	.form-wrap .msg-error{
		display: block;
		margin: 0 0 15px;
		font-size: 80%;
		color: red;
	}
}