@charset "utf-8";

.box_header {
    width: 100%;
    margin: 0 auto 0px;
}

#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: 0;
		margin: 0 auto;
	}
		.login__heading {
			width: 100%;
			height: auto;
			padding: 0 0 10px;
			margin: 0 auto 30px;
            font-weight: 700;
            font-size: 16px !important;
            text-align: center;
		}
        
        .login__heading2 {
            margin-top: 50px;
        }
        
			.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%;
                    max-width: 300px;
					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__oneclick {
				width: 100%;
				height: auto;
				margin: 10px auto 0;
				font-size: 12px;
				font-weight: 400;
				line-height: calc(20 / 12);
				letter-spacing: 0.06em;
                color: #666666;
                text-align: center;
			}
				.login__oneclick a {
					color: var(--color--gray1);
					text-decoration: underline;
				}
			@media (any-hover: hover) {
				.login__oneclick 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;
                text-align: center;
			}
			.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%;
                    max-width: 300px;
                    margin: 0 auto 0 auto;
					height: 60px;
				}
					.sign_up__btn_area__btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						background-color: #9B734E;
						font-size: 14px;
						font-weight: 500;
						line-height: calc(20 / 14);
						letter-spacing: 0.05em;
						color: #fff;
						cursor: pointer;
					}
				@media (any-hover: hover) {
					.sign_up__btn_area__btn {
						transition: .4s;
					}
					.sign_up__btn_area__btn:hover {
			background-color: #fff;
			color: #9B734E;
            border: 1px solid #9B734E;
					}
				}
		.login__sub_contents {
			width: 100%;
			height: auto;
			padding: 30px;
			margin: 0 auto 60px auto;
			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){
    .login__contents {
        height: auto;
        width: 50%;
        padding-left: 4%;
    }

    .login__contents.left{
        padding-right: 4%;
        border-right: 1px solid #E5E5E5; 
    }
}

/* Tablet ================================================== */
@media all and (max-width: 719px){
/* login */
	.login__inner {
		gap: 50px;
		padding: 0px 0 0px;
	}
		.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;
				}
                
    .login__contents.left{
        border-bottom: 1px solid #E5E5E5; 
        padding-bottom: 50px;
    }
                
    .box_header {
        margin-bottom: -50px;
    }
}

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

}

#login .text2{
    color: #666666;
    font-size: 12px;
    line-height: 1.5em;
    margin-top: 10px;
    word-break: break-all
}

#login .amazon_login_btn{
    width: 300px;
    margin: 10px auto 0 auto;
    transition: .4s;
}

#login .amazon_login_btn:hover{
    opacity: 0.7;
}