@charset "utf-8";
.p-login {
	width: 100%;
	height: auto;
}
	.p-login__inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
	}
		.p-login__password_reset {
			width: 100%;
			height: auto;
			margin: 0 auto 60px;
			background-color: var(--color--white);
		}
			.p-login__password_reset__heading {
				width: 100%;
				height: auto;
				padding: 28px 0;
				position: relative;
				cursor: pointer;
			}
				.p-login__password_reset__heading__text {
					width: 100%;
					height: auto;
					font-size: 16px;
					font-weight: 500;
					line-height: 1.2;
					letter-spacing: 0.05em;
					text-align: center;
					color: var(--color--red);
				}
				.p-login__password_reset__heading__arrow {
					width: 17px;
					height: auto;
					position: absolute;
					top: 50%;
					right: 28px;
					transform: translateY(-50%);
					transition: .4s;
				}
				._close .p-login__password_reset__heading__arrow {
					transform: translateY(-50%) rotateX(180deg);
				}
					.p-login__password_reset__heading__arrow svg {
						width: 100%;
						height: auto;
						fill: var(--color--black);
					}
			.p-login__password_reset__details {
				width: 100%;
				height: auto;
				padding: 0 40px 30px;
			}
				.p-login__password_reset__details__text {
					width: 100%;
					height: auto;
					font-size: 14px;
					font-weight: 400;
					line-height: 1.8;
					letter-spacing: 0.05em;
					text-align: center;
					color: var(--color--black);
				}
					.p-login__password_reset__details__text a {
						color: var(--color--black);
						text-decoration: underline;
					}
				@media (any-hover: hover) {
					.p-login__password_reset__details__text a:hover {
						text-decoration: none;
					}
				}
				.p-login__password_reset__details__forget {
					width: 100%;
					height: auto;
					margin: 20px auto 0;
					font-size: 12px;
					font-weight: 400;
					line-height: 1.2;
					letter-spacing: 0.05em;
					text-align: center;
					color: var(--color--gray);
				}
					.p-login__password_reset__details__forget a {
						color: var(--color--gray);
						text-decoration: underline;
					}
				@media (any-hover: hover) {
					.p-login__password_reset__details__forget a:hover {
						text-decoration: none;
					}
				}
		.p-login__inner__login,
		.p-login__inner__registration {
			width: 50%;
			height: auto;
		}
		.p-login__inner__login {
			padding: 0 60px 0 0;
			position: relative;
		}
			.p-login__inner__login::before {
				content: '';
				display: block;
				width: 0px;
				height: 100%;
				border-right: dashed 1px #EAEAEA;
				position: absolute;
				top: 0;
				right: 0;
			}
		.p-login__inner__registration {
			padding: 0 0 0 60px;
		}
			.p-login__inner__heading {
				width: 100%;
				height: auto;
				margin: 0 auto 30px;
				font-size: 16px;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0.05em;
				text-align: center;
				color: var(--color--black);
			}
			.p-login__inner__login__bottom {
				width: 100%;
				height: auto;
				margin: 40px auto 0;
			}
				.p-login__inner__login__bottom__submit {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					max-width: 300px;
					height: 50px;
					padding: 0;
					margin: 0 auto;
					outline: none;
					border: solid 1px var(--color--black);
					background-color: var(--color--black);
					font-size: 14px;
					font-weight: 500;
					line-height: 1;
					letter-spacing: 0.05em;
					color: var(--color--white);
					cursor: pointer;
				}
				@media (any-hover: hover) {
					.p-login__inner__login__bottom__submit {
						transition: .4s;
					}
					.p-login__inner__login__bottom__submit:hover {
						background-color: var(--color--white);
						color: var(--color--black);
					}
				}
			.line_new_ec {
				margin: 10px auto 0;
			}
			.line_note {
				width: 100%;
				height: auto;
				margin: 10px auto 0;
				font-size: 12px;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
				text-align: center;
				color: var(--color--dark-gray);
			}
			.amazon_pay_v2_ec {
				width: 100%;
				height: auto;
				margin: 70px auto 0;
			}
				.amazon_pay_v2_ec__text {
					width: 100%;
					height: auto;
					margin: 0 auto 40px;
					font-size: 14px;
					font-weight: 400;
					line-height: 1.8;
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.amazon_pay_v2_ec .button-container {
					width: 100%;
					max-width: 300px;
					height: auto;
					margin: 0 auto;
				}
			.p-login__inner__registration__text {
				width: 100%;
				height: auto;
				font-size: 14px;
				font-weight: 400;
				line-height: 1.8;
				letter-spacing: 0.05em;
				color: var(--color--black);
			}
			.p-login__inner__registration__bottom {
				width: 100%;
				height: auto;
				margin: 40px auto 0;
			}
				.p-login__inner__registration__bottom__btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					max-width: 300px;
					height: 50px;
					padding: 0;
					margin: 0 auto;
					outline: none;
					border: solid 1px var(--color--red);
					background-color: var(--color--red);
					font-size: 14px;
					font-weight: 500;
					line-height: 1;
					letter-spacing: 0.05em;
					color: var(--color--white);
					cursor: pointer;
                    overflow: hidden;
                    position: relative;
                    padding-left: 30px;
				}
                .p-login__inner__registration__bottom__btn::before{
                    content: "60秒で\Aカンタン!!";
                    white-space: pre;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    width: 75px;
                    height: 75px;
                    background-color: #af0400;
                    color: #fff;
                    font-size: 12px;
                    line-height: 1.2;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    border-radius: 0 9999px 9999px 0;
                }
			@media (any-hover: hover) {
				.p-login__inner__registration__bottom__btn {
					transition: .4s;
				}
				.p-login__inner__registration__bottom__btn:hover {
					background-color: var(--color--white);
					color: var(--color--red);
				}
			}
			.p-login__inner__registration__bonus {
				width: 100%;
				height: auto;
				padding: 50px;
				margin: 40px auto 0;
				background-color: var(--color--white);
			}
				.p-login__inner__registration__bonus__title {
					width: 100%;
					height: auto;
					margin: 0 auto 30px;
					font-size: 16px;
					font-weight: 500;
					line-height: 1;
					letter-spacing: 0.05em;
					text-align: center;
					color: var(--color--black);
				}
					.p-login__inner__registration__bonus__title strong {
						font-size: 20px;
					}
				.p-login__inner__registration__bonus_list {
					display: flex;
					flex-direction: column;
					gap: 10px;
					width: 100%;
					height: auto;
				}
					.p-login__inner__registration__bonus_list__item {
						display: flex;
						justify-content: space-between;
						align-items: stretch;
						width: 100%;
						height: auto;
					}
						.p-login__inner__registration__bonus_list__item__heading {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 64px;
							height: 69px;
							padding: 3px 0 0;
							background-color: var(--color--dark-gray);
						}
							.p-login__inner__registration__bonus_list__item__heading p {
								font-size: 14px;
								font-weight: 200;
								line-height: 1.2;
								letter-spacing: 0.05em;
								text-align: center;
								color: var(--color--white);
							}
								.p-login__inner__registration__bonus_list__item__heading p strong {
									font-size: 20px;
									font-weight: 200;
								}
						.p-login__inner__registration__bonus_list__item__details {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							flex: 1;
							height: auto;
							padding: 2px 20px 0 20px;
							background-color: #ffffff;
						}
							.p-login__inner__registration__bonus_list__item__details p {
								width: 100%;
								height: auto;
								font-size: 14px;
								font-weight: 400;
								line-height: 1.45;
								letter-spacing: 0.05em;
								color: var(--color--black);
							}
								.p-login__inner__registration__bonus_list__item__details p strong {
									font-family: Inter, sans-serif;
									font-size: 18px;
									font-weight: 700;
                                    color: #cc0000;
								}

/* パスワード再設定 */
			.p-account_form__inner__bottom__mailbtn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				max-width: 300px;
				height: 50px;
				padding: 0;
				margin: 0 auto;
				outline: none;
				border: solid 1px var(--color--black);
				background-color: var(--color--black);
				font-size: 14px;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0.05em;
				color: var(--color--white);
				cursor: pointer;
			}
		@media (any-hover: hover) {
			.p-account_form__inner__bottom__mailbtn {
				transition: .4s;
			}
			.p-account_form__inner__bottom__mailbtn:hover {
				background-color: var(--color--white);
				color: var(--color--black);
			}
		}
			.p-account_form__inner__bottom__link {
				display: inline-block;
				margin: 16px auto 0;
				font-size: 12px;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
				text-align: center;
				color: var(--color--dark-gray);
				text-decoration: underline;
			}
		@media (any-hover: hover) {
			.p-account_form__inner__bottom__link:hover {
				text-decoration: none;
			}
		}

/* PC ================================================== */
@media all and (min-width: 769px){
	#customers-registrations-sign-up-view .p-account_form__inner {
		max-width: 800px;
	}
	#new_customer .p-account_form__inner,
	#customer_reset_password_token .p-account_form__inner {
		max-width: 500px;
	}
}

/* Tablet ================================================== */
@media all and (max-width: 768px){
	.p-login__inner {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}
		.p-login__password_reset {
			margin: 0 auto 50px;
		}
			.p-login__password_reset__heading {
				padding: 18px 20px;
			}
				.p-login__password_reset__heading__text {
					font-size: 14px;
					text-align: left;
				}
				.p-login__password_reset__heading__arrow {
					right: 20px;
				}
			.p-login__password_reset__details {
				padding: 0 20px 20px;
			}
				.p-login__password_reset__details__text {
					font-size: 12px;
					text-align: left;
				}
				.p-login__password_reset__details__forget {
					text-align: left;
				}
		.p-login__inner__login,
		.p-login__inner__registration {
			width: 100%;
		}
		.p-login__inner__login {
			padding: 0 0 60px;
		}
			.p-login__inner__login::before {
				width: 100%;
				height: 0px;
				border-right: none;
				border-bottom: dashed 1px #EAEAEA;
				top: 100%;
			}
		.p-login__inner__registration {
			padding: 60px 0 0;
		}
			.p-login__inner__heading {
				margin: 0 auto 30px;
			}
			.line_new_ec {
				margin: 15px auto 0;
			}
			.line_note {
				margin: 12px auto 0;
			}
			.amazon_pay_v2_ec {
				margin: 60px auto 0;
			}
			.p-login__inner__registration__bonus {
				padding: 50px 30px;
				margin: 30px auto 0;
			}
}

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

}