@charset "utf-8";
#login {
	width: 100%;
	height: auto;
}
	.login__inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 90%;
		max-width: 1000px;
		height: auto;
		padding: 100px 0 120px;
		margin: 0 auto;
	}
		.login__heading {
			width: 100%;
			height: auto;
			padding: 0 0 10px;
			margin: 0 auto 30px;
			position: relative;
		}
			.login__heading::after {
				content: '';
				display: block;
				width: 100%;
				height: 1px;
				background-color: var(--color--lightgray1);
				position: absolute;
				bottom: 0;
				left: 0;
			}
			.login__heading__en {
				width: 100%;
				height: auto;
				margin: 0 auto 5px;
				font-family: "Josefin Sans";
				font-size: 18px;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0.05em;
				color: var(--color--black);
			}
			.login__heading__ja {
				width: 100%;
				height: auto;
				font-size: 12px;
				font-weight: 400;
				line-height: calc(18 / 12);
				letter-spacing: 0.05em;
				color: var(--color--black)
			}
		.login__contents {
			width: 48.5%;
			max-width: 458px;
			height: auto;
		}
			.login__form_wrap {
				width: 100%;
				height: auto;
			}
				.mypage__form__agree_wrap {
					margin: 25px auto 10px;
				}
					.mypage__form__btn {
						max-width: initial;
					}
				.line_new_ec {
					width: 100%;
					height: auto;
					margin: 10px auto 0;
				}
					.button-container {
						width: 100%;
						height: 60px;
					}
						.login__line_btn {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: var(--color--line_green);
							border: solid 1px var(--color--line_green);
							font-size: 14px;
							font-weight: 500;
							line-height: calc(20 / 14);
							letter-spacing: 0.05em;
							color: var(--color--white);
							cursor: pointer;
						}
					@media (any-hover: hover) {
						.login__line_btn {
							transition: .4s;
						}
						.login__line_btn:hover {
							background-color: var(--color--white);
							color: var(--color--line_green);
						}
					}
			.login__forget {
				width: 100%;
				height: auto;
				margin: 30px auto 0;
				font-size: 12px;
				font-weight: 400;
				line-height: calc(20 / 12);
				letter-spacing: 0.06em;
			}
				.login__forget a {
					color: var(--color--gray1);
					text-decoration: underline;
				}
			@media (any-hover: hover) {
				.login__forget a:hover {
					text-decoration: none;
				}
			}
			.sign_up__txt {
				width: 100%;
				height: auto;
				font-size: 14px;
				font-weight: 400;
				line-height: calc(24 / 14);
				letter-spacing: 0.05em;
				color: var(--color--black);
			}
			.sign_up__btn_area {
				width: 100%;
				height: auto;
				margin: 30px auto 0;
			}
				.sign_up__btn_area__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 10px;
					font-size: 14px;
					font-weight: 500;
					line-height: calc(21 / 14);
					letter-spacing: 0.05em;
					text-align: center;
					color: var(--color--black);
				}
				.sign_up__btn_area__btn_wrap {
					width: 100%;
					height: 60px;
				}
					.sign_up__btn_area__btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						background-color: var(--color--white);
						border: solid 1px var(--color--black);
						font-size: 14px;
						font-weight: 500;
						line-height: calc(20 / 14);
						letter-spacing: 0.05em;
						color: var(--color--black);
						cursor: pointer;
					}
				@media (any-hover: hover) {
					.sign_up__btn_area__btn {
						transition: .4s;
					}
					.sign_up__btn_area__btn:hover {
						background-color: var(--color--black);
						color: var(--color--white);
					}
				}
		.login__sub_contents {
			width: 100%;
			height: auto;
			padding: 30px;
			margin: 0 auto 100px;
			background-color: var(--color--lightgray2);
		}
			.login__sub_contents dl {
				width: 100%;
				height: auto;
				margin: 0 auto 20px;
			}
				.login__sub_contents dl dt {
					width: 100%;
					height: auto;
					padding: 10px 0;
					margin: 0 auto 20px;
					background-color: var(--color--gray1);
					font-size: 14px;
					font-weight: 500;
					line-height: calc(16 / 14);
					letter-spacing: 0.05em;
					text-align: center;
					color: var(--color--white);
				}
				.login__sub_contents dl dd {
					width: 100%;
					height: auto;
					font-size: 14px;
					font-weight: 400;
					line-height: calc(24 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
					.login__sub_contents dl dd a {
						color: var(--color--black);
						text-decoration: underline;
					}
				@media (any-hover: hover) {
					.login__sub_contents dl dd a:hover {
						text-decoration: none;
					}
				}
			.login__sub_contents__forget {
				width: 100%;
				height: auto;
				font-size: 14px;
				font-weight: 400;
				line-height: calc(24 / 14);
				letter-spacing: 0.05em;
				text-align: center;
			}
				.login__sub_contents__forget a {
					color: var(--color--black);
					text-decoration: underline;
				}
				@media (any-hover: hover) {
					.login__sub_contents__forget a:hover {
						text-decoration: none;
					}
				}

/* PC ================================================== */
@media all and (min-width: 720px){

}

/* Tablet ================================================== */
@media all and (max-width: 719px){
/* login */
	.login__inner {
		gap: 50px;
		padding: 50px 0 80px;
	}
		.login__contents {
			width: 100%;
			max-width: initial;
		}
		.login__sub_contents {
			padding: 30px calc((20 / 400) * 100%);
			margin: 0;
		}
			.login__sub_contents dl {
				width: 100%;
				height: auto;
				margin: 0 auto 20px;
			}
				.login__sub_contents dl dt {
					font-size: 14px;
				}
}

/* SP ================================================== */
@media all and (max-width: 575px){

}