@charset 'utf-8';
	
/* common */

.login .contents {
	position: relative;
	padding-top: 120px;
}
.login .contents section .inner {
	max-width: 990px;
	margin: 0 auto;
}

.login .contents section.bg-block {
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	padding: 34px 0;
}
.login .contents section.bg-block.bg-graylight {
	background: #F4F4F4;}
.login .contents section.bg-block.bg-greenlight {
	background: #d9edee;}

.login .contents section.entry-block {}
	.login .contents section.entry-block .inner {
		position: relative;
	}
		.login .contents section.entry-block .inner .flex {
			overflow: hidden;
			border-radius: 10px;
			position: relative;
			box-shadow: 0 0 10px rgb(0 0 0 / 20%);
		}
			.login .contents section.entry-block .inner .flex > * {
				width: 50%;
			}
			.login .contents section.entry-block .inner .flex .img-content {
				position: relative;
			}
				.login .contents section.entry-block .inner .flex .img-content figure {
					/* overflow: hidden; */
					margin: 0;
					background: #74acaa;
				}
					.login .contents section.entry-block .inner .flex .img-content figure img {
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 100%;
						height: auto;
					}

			.login .contents section.entry-block .inner .flex .entry-content {}
				.login .contents section.entry-block .inner .flex .entry-content .form {
					background: #ecf6f6;
					padding: 40px 60px;
					position: relative;
					overflow: hidden;
				}
					.login .contents section.entry-block .inner .flex .entry-content .form input {
						width: calc(100% - 80px);
						padding: 10px 10px 10px 50px;
						margin: 10px;
						border: none;
						border-radius: 5px;
						box-shadow: 0 0 10px rgb(0 0 0 / 20%);
					}
					.login .contents section.entry-block .inner .flex .entry-content .form input#user-email {
						background-image: url(../img/login/icon_login_email.png);
						background-position: 15px center;
						background-repeat: no-repeat;
						background-size: auto 80%;
					}
					.login .contents section.entry-block .inner .flex .entry-content .form input#user-pass {
						background-image: url(../img/login/icon_login_pass.png);
						background-position: 15px center;
						background-repeat: no-repeat;
						background-size: auto 60%;
					}
					.login .contents section.entry-block .inner .flex .entry-content .form input#submit {
						background-color: #44a3a8;
						padding: 10px;
						color: #FFFFFF;
						margin: 10px auto;
						display: block;
					}
					.login .contents section.entry-block .inner .flex .entry-content a.txt-green {
						display: flex;
						justify-content: center;
						gap: 0.5em;
						align-items: center;
						position: relative;
					}
						.login .contents section.entry-block .inner .flex .entry-content a.txt-green img {
							width: 1.4em;
							transform: rotate(180deg);
						}
				.login .contents section.entry-block .inner .flex .entry-content .sns-sso {
					padding: 24px 60px;
					position: relative;
					overflow: hidden;
					background: #FFFFFF;
				}
					.login .contents section.entry-block .inner .flex .entry-content .sns-sso a {
						width: calc(100% - 60px);
						display: block;
						margin-bottom: 10px;
						border: 1px solid #cccccc;
						text-align: center;
						padding: 10px 10px 10px 50px;
						border-radius: 5px;
						position: relative;
					}
						.login .contents section.entry-block .inner .flex .entry-content .sns-sso a img {
							position: absolute;
							top: 50%;
							left: 15px;
							transform: translateY(-50%);
							height: 70%;
						}
					.login .contents section.entry-block .inner .flex .entry-content .sns-sso a.sso-link.link-fb {
						background: #395590;
						color: #FFFFFF;
					}
						.login .contents section.entry-block .inner .flex .entry-content .sns-sso a.sso-link.link-fb img {
							left: 22px;
						}
					.login .contents section.entry-block .inner .flex .entry-content .sns-sso a.sso-link.link-ln {
						background: #70c55e;
						color: #FFFFFF;
					}
					.login .contents section.entry-block .inner .flex .entry-content .sns-sso p.txt-center {
						font-size: 1.4rem;
						font-weight: normal;
					}

.login .contents section.register-head {}
.login.register .contents section.register-head {
	margin-bottom: -100px;
}
	.login .contents section.register-head h2 {
		max-width: 205px;
		margin: 40px auto;
	}
		.login .contents section.register-head h2 img {
			width: 100%;
		}
	.login .contents section.register-head .flex figure {
		width: 100%;
		margin: 0;
		text-align: center;
	}
		.login .contents section.register-head img {
			width: 100%;
/* 			max-width: 360px; */
			margin: 0 auto;
		}
	.login .contents section.register-head .flex p {
		text-align: center;
		width: 50%;
		color: #44a3a8;
		font-size: 2.4rem;
	}

	.login .contents section.entry-block .inner .flex .entry-content .form h3.txt-green.txt-center {
		font-size: 2.4rem;
		margin-bottom: 0;
	}
	.login .contents section.entry-block .inner .flex .entry-content .form p a.txt-green {
		display: inline-block;
		font-size: 1.4rem;
	}

.login .contents section.login-bottom { padding: 0; margin-top: -20px; }
	.login .contents section.login-bottom figure { margin: 0 0 60px; }
		.login .contents section.login-bottom img { width: 100%; }

@media screen and (min-width:1025px) {
	.login nav.global-nav ul.global-nav-links.pc {
		display: flex !important;
	}
}
@media screen and (max-width:1024px) {
	.login .contents { padding-top: 80px; }
	.login .contents section.register-head h2 {
		max-width: 165px;
		margin: 0px auto 40px;
	}
	.login.register .contents section.register-head {
		margin-bottom: -40px;
	}
	.login .contents section.register-head .flex > * {
		width: 100% !important;
	}
	.login .contents section.entry-block .inner .flex > * {
		width: 100%;
	}
	.login .contents section.entry-block .inner .flex .entry-content .form,
	.login .contents section.entry-block .inner .flex .entry-content .sns-sso {
		padding: 40px 20px;
	}
	.login .contents section.entry-block .inner .flex .img-content figure img {
		display: block;
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		width: 100%;
		height: auto;
	}
}


/* custom */

.login .contents section.entry-block {
	padding: 40px 20px;
}

.login .contents section.bg-block.bg-graylight {
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(244,244,244,1) 40%);
}
	.login .contents section.entry-block .inner .flex .entry-content .form form > p {
		text-align: center;
		margin-bottom: 0;
	}
		.login .contents section.entry-block .inner .flex .entry-content .form form > p a.txt-green {
			padding: 15px 10px 0;
		}
			.login .contents section.entry-block .inner .flex .entry-content a.txt-green img {
				padding-right: 0.4em;
			}
	.login .contents section.entry-block .inner .flex .entry-content .form input#user-email {
		background-image: url(../img/login/icon_login_email.png);
		background-position: 10px center;
		background-repeat: no-repeat;
		background-size: auto 70%;
	}

.login.register .contents section.entry-block .inner .flex .entry-content {

}

.login.register .contents section.register-head .flex figure {
	max-width: 480px;
	margin: 0 auto;
}
	.login.register .contents section.register-head img {
		max-width: 360px;
	}
.login.register .contents section.entry-block .inner .flex .entry-content .form input#user-email {
	background-image: url(../img/login/icon_login_email.png);
	background-position: 10px center;
	background-repeat: no-repeat;
	background-size: auto 60%;
}

.login .contents section.entry-block .inner .flex .register-head {
	width: calc(90% - 80px);
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.6);
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 40px;
}
.login .contents section.entry-block .inner .flex .register-head h2 {
	position: relative;
	text-align: center;
	margin: 0 0 1em;
}
.login .contents section.entry-block .inner .flex .register-head h2 img {
	width: 100%;
	max-width: 200px;
}
.login .contents section.entry-block .inner .flex .register-head .flex {
	display: block;
	box-shadow: none;
}
.login .contents section.entry-block .inner .flex .img-content .register-head figure,
.login .contents section.entry-block .inner .flex .img-content .register-head p {
	width: 100%;
	background: none;
}
.login .contents section.entry-block .inner .flex .img-content .register-head p {
	color: #2f7275;
	font-size: 1.8rem;
}
.login .contents section.entry-block .inner .flex .img-content .register-head figure img {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	transform: none;
	width: 100%;
	height: auto;
	max-width: 260px;
	margin: 0 auto;
}


@media screen and (max-width:1024px) {
	.login .contents section.entry-block .inner .flex .img-content {
		height: 400px;
	}
	.login .contents section.entry-block .inner .flex .img-content figure img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}
}
@media screen and (max-width:768px) {
	.login .contents section.entry-block {
		padding: 0px 20px 20px;
	}
	.login .contents section.entry-block .inner .flex .entry-content .form,
	.login .contents section.entry-block .inner .flex .entry-content .sns-sso {
		padding: 20px;
	}
	.login .contents section.entry-block .inner .flex .img-content {
		height: 300px;
	}
	.login.register .contents section.entry-block .inner .flex .img-content {
		height: 420px;
		display: none;
	}
	.login.register .contents section.register-head img {
		max-width: 200px;
	}
	.login .contents section.entry-block .inner .flex .entry-content .form h3.txt-green.txt-center {
		font-size: 2.4rem;
		margin: 0 10px 10px;
	}
	.login.register .contents section.register-head {
		margin-bottom: -10px;
		padding: 10px 20px 20px;
	}
	.login.register .contents section.entry-block .inner .flex .entry-content {
		display: block;
		width: 100%;
	}
	.login .contents section.register-head .flex p {
		margin: 10px 0;
		font-size: 1.8rem;
	}
}
@media screen and (max-width:500px) {
	.login .contents section.entry-block .inner .flex .img-content {
		height: 200px;
	}
	.login.register .contents section.entry-block .inner .flex .img-content {
		height: 420px;
		display: none;
	}
	.login .contents section.entry-block {
		padding: 20px;
	}
	.login .contents section.entry-block .inner .flex .register-head {
		padding: 40px 20px;
		width: calc(90% - 40px);
	}
	.login .contents section.entry-block .inner .flex .register-head h2 img {
		width: 100%;
		max-width: 140px;
	}
}



/* register */

.login.login.register .contents section.bg-block.bg-greenlight {
	background: #d9edee;
	overflow: hidden;
	display: block;
	height: calc(100% - 68px);
}

.login.register form > section {
	padding: 20px;
}

.login.register .separater div#formwrap > div {
	position: relative;
	margin-bottom: 1em;
}
.login.register .separater div#formwrap > div:last-child {
	margin: 40px auto;
	max-width: 280px;
}
.login.register .separater div#formwrap > div .controls span {
	position: absolute;
	top: 0;
	left: 0;
}

.login.register .separater h2.title-default {
	position: relative;
	padding: 1em 0;
	color: #707070;
	font-size: 2.4rem;
	margin-top: 0;
	border-bottom: 1px solid #BBBBBB;
}

.login.register .separater input,
.login.register .separater select,
.login.register .separater textarea {
	font-size: 1.6rem;
	display: block;
	width: calc(100% - 2em - 2px);
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	padding: 0.5em 1em;
}

.login.register .separater #formwrap > div:nth-child(8) .controls,
.login.register .separater #formwrap > div:nth-child(9) .controls {
	display: flex;
	gap: 20px;
	text-align: center;
	align-items: center;
	justify-content: flex-start !important;
}
.login.register .separater #formwrap > div:nth-child(8) select,
.login.register .separater #formwrap > div:nth-child(9) select {
	width: 33.333%;
	max-width: 200px;
}
.login.register .separater #formwrap > div label {
	padding-left: 1.5em;
	margin-bottom: 0.5em;
	display: block;
}
.login.register .separater h3 {
	font-weight: normal;
	font-size: 1.4rem;
	margin: 0;
}


.login.register p.err_fields {
	/*color: #44a3a8 !important;*/
	color: red !important;
	line-height: 1.7em;
	/*font-size: 2.5rem !important;*/
	font-size: 17px !important;
	margin: 80px auto;
	text-align: center;
}

@media screen and (max-width:1024px) {

}
@media screen and (max-width:768px) {

}
@media screen and (max-width:500px) {
	.login.register .separater #formwrap > div:nth-child(8) .controls {
		flex-wrap: wrap;
	}
	.login.register .separater #formwrap > div:nth-child(8) select:first-child {
		width: 100%;
		max-width: 100%;
	}
	.login.register .separater #formwrap > div:nth-child(8) select:nth-child(2),
	.login.register .separater #formwrap > div:nth-child(8) select:nth-child(3) {
		width: calc(50% - 10px);
	}
}