@charset "utf-8";
::placeholder {
	color: var(--color--gray2);
}

.mypage__form {
	width: 100%;
	height: auto;
}
	.mypage__form__text {
		width: 100%;
		height: auto;
		margin: 0 auto 20px;
		font-size: 14px;
		font-weight: 400;
		line-height: calc(22 / 14);
		letter-spacing: 0.05em;
		color: var(--color--black);
	}
		.mypage__form__text a {
			color: var(--color--black);
			text-decoration: underline;
		}
	@media (any-hover: hover) {
		.mypage__form__text a:hover {
			text-decoration: none;
		}
	}
	.mypage__form__list {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		column-gap: 10px;
		row-gap: 30px;
		width: 100%;
		height: auto;
	}
		.mypage__form__list__item {
			width: 100%;
			height: auto;
		}
		.mypage__form__list__item._haft_width {
			width: calc(50% - 5px);
		}
			.mypage__form__list__item__title {
				width: 100%;
				height: auto;
				margin: 0 auto 10px;
				font-size: 14px;
				font-weight: 400;
				line-height: calc(17 / 14);
				letter-spacing: 0.05em;
				color: var(--color--black);
			}
				.mypage__form__list__item__title__required {
					display: inline-block;
					margin-left: 10px;
					padding: 0px 5px 1px;
					background-color: var(--color--black);
					border-radius: 2px;
					font-size: 10px;
					line-height: calc(17 / 10);
					letter-spacing: 0.05em;
					color: var(--color--white);
				}
			.mypage__form__list__item__content {
				display: grid;
				grid-template-columns: 1fr;
				width: 100%;
				height: auto;
				position: relative;
			}
			.mypage__form__list__item__content._2column {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 10px;
			}
			.mypage__form__list__item__content._3column {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				gap: 10px;
			}
			.mypage__form__list__item__content._type_select {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				gap: 15px;
			}
			.mypage__form__list__item__content + .mypage__form__list__item__content {
				margin-top: 10px;
			}
				.column_item {
					display: flex;
					flex-direction: column;
				}
				.mypage__form__list__item__content .formError {
					order: 2;
					margin: 5px 0 0 !important;
					opacity: 1 !important;
					position: initial !important;
					top: initialauto !important;
					right: initial !important;
					bottom: initial !important;
					left: initial !important;
				}
					.mypage__form__list__item__content .formError .formErrorContent {
						font-size: 12px !important;
						color: var(--color--red) !important;
					}
				.form_input {
					width: 100%;
					padding: 0 10px;
					background-color: var(--color--white);
					border: solid 1px var(--color--lightgray1);
					font-size: 14px;
					font-weight: 400;
					line-height: calc(21 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
				.form_input:focus {
					border: solid 1px var(--color--black);
				}
				._no_edit .form_input {
					background-color: var(--color--lightgray1);
					color: var(--color--gray1);
					pointer-events: none;
				}
				.form_input._input_text {
					height: 45px;
				}
				.form_input._textarea {
					height: 180px;
				}
				.form_input._un_active {
					pointer-events: none;
					background-color: var(--color--lightgray1);
					color: var(--color--gray1);
				}
				.mypage__form__list__item__content__radio {
					display: none;
				}
				.mypage__form__list__item__content__label {
					width: auto;
					height: auto;
					padding: 0 0 0 24px;
					font-size: 14px;
					font-weight: 400;
					line-height: calc(22 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
					cursor: pointer;
					position: relative;
				}
					.mypage__form__list__item__content__label::before,
					.mypage__form__list__item__content__label::after {
						content: '';
						display: block;
						border-radius: 50%;
						position: absolute;
						top: 12px;
						left: 8px;
						transform: translate(-50%, -50%);
					}
					.mypage__form__list__item__content__label::before {
						width: 16px;
						height: 16px;
						border: solid 1px var(--color--black);
					}
					.mypage__form__list__item__content__label::after {
						width: 10px;
						height: 10px;
						background-color: var(--color--black);
						opacity: 0;
						transition: .4s;
					}
					.mypage__form__list__item__content__radio:checked + .mypage__form__list__item__content__label::after {
						opacity: 1;
					}
				.mypage__form__list__item__content__select_label {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: auto;
					position: relative;
				}
				._no_edit .mypage__form__list__item__content__select_label {
					cursor: not-allowed;
				}
					.mypage__form__list__item__content__select_label::after {
						content: '';
						display: block;
						width: 9px;
						height: 9px;
						border-left: solid 1px var(--color--black);
						border-bottom: solid 1px var(--color--black);
						position: absolute;
						top: 16px;
						right: 13px;
						transform: rotate(-45deg);
					}
				.mypage__form__list__item__content__eye_icon {
					width: 18px;
					height: auto;
					position: absolute;
					top: 15px;
					right: 12px;
					cursor: pointer;
					z-index: 2;
				}
			@media (any-hover: hover) {
				.mypage__form__list__item__content__eye_icon {
					transition: .4s;
				}
				.mypage__form__list__item__content__eye_icon:hover {
					opacity: .8;
				}
			}
					.mypage__form__list__item__content__eye_icon svg {
						fill: var(--color--gray1);
					}
					.mypage__form__list__item__content__eye_icon::after {
						content: '';
						display: block;
						width: 2px;
						height: 20px;
						border-right: solid 1px var(--color--gray1);
						border-left: solid 1px var(--color--white);
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%) rotate(-45deg);
						z-index: 1;
						opacity: 0;
					}
					.mypage__form__list__item__content__eye_icon._active::after {
						opacity: 1;
					}
				#amazon_payment_method {
					width: 100%;
					height: 45px;
					background-color: var(--color--white);
					font-size: 14px;
					font-weight: 400;
					line-height: 45px;
					letter-spacing: 0.05em;
					color: var(--color--black);
					position: relative;
					z-index: 10;
				}
				.coupon__list {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 10px;
					width: 100%;
					height: auto;
					margin: 0 auto 20px;
				}
					.coupon__list__item {
						width: 100%;
						height: auto;
						padding: 20px;
						border-radius: 3px;
						border: solid 2px var(--color--black);
						background-color: var(--color--white);
						position: relative;
					}
						.coupon__list__item__discount_amount {
							width: 100%;
							height: auto;
							margin: 0 auto 10px;
							font-size: 16px;
							font-weight: 500;
							line-height: 29px;
							letter-spacing: 0.05em;
							color: var(--color--black);
						}
						.first_line_wrapper {
							position: absolute;
							top: 20px;
							right: 20px;
							z-index: 2;
						}
							.btn_apply_coupon {
								display: flex;
								justify-content: center;
								align-items: center;
								width: auto;
								height: 29px;
								padding: 0 5px 0 calc(5px + 0.05em);
								border-radius: 2px;
								border: solid 1px var(--color--black);
								background-color: var(--color--black);
								outline: none;
								font-size: 12px;
								font-weight: 400;
								line-height: 1;
								letter-spacing: 0.05em;
								color: var(--color--white);
								cursor: pointer;
							}
							.btn_apply_coupon.btn_applied_coupon {
								background-color: var(--color--white);
								color: var(--color--black);
							}
						.coupon__list__item__expiration_date {
							width: 100%;
							height: auto;
							margin: 0 auto 10px;
							font-size: 14px;
							font-weight: 400;
							line-height: 1;
							letter-spacing: 0.05em;
							color: var(--color--gray1);
						}
						.coupon__list__item__name {
							width: 100%;
							height: auto;
							font-size: 14px;
							font-weight: 400;
							line-height: 1;
							letter-spacing: 0.05em;
							color: var(--color--gray1);
						}
			.mypage__form__list__item__content__note {
				width: 100%;
				height: auto;
				margin: 10px auto 0;
				font-size: 12px;
				font-weight: 400;
				line-height: calc(20 / 12);
				letter-spacing: 0.05em;
				color: var(--color--gray1);
			}
			.mypage__form__list__item__content__note._red {
				color: var(--color--red);
			}
	.mypage__form__agree_wrap {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 20px;
		width: 100%;
		height: auto;
		margin: 70px auto;
	}
	.mypage__customer_information .mypage__form__agree_wrap,
	.mypage__add_address .mypage__form__agree_wrap,
	.mypage__address_edit .mypage__form__agree_wrap {
		margin: 40px auto 10px;
	}
	.mypage__card__add_card .mypage__form__agree_wrap {
		margin: 10px auto 10px;
	}
		.mypage__form__agree {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			gap: 10px;
			width: 100%;
			max-width: 550px;
			height: auto;
			margin: 0 auto;
			cursor: pointer;
		}
		.mypage__customer_information .mypage__form__agree,
		.mypage__add_address .mypage__form__agree,
		.mypage__address_edit .mypage__form__agree,
		.mypage__card__add_card .mypage__form__agree {
			max-width: initial;
		}
			.mypage__form__agree input {
				display: none;
			}
			.mypage__form__agree__frame {
				width: 20px;
				height: 20px;
				border: solid 1px var(--color--black);
				position: relative;
				top: 1.5px;
			}
				.mypage__form__agree__frame::before {
					content: '';
					display: block;
					width: 12px;
					height: 6px;
					border-left: solid 2px var(--color--black);
					border-bottom: solid 2px var(--color--black);
					position: absolute;
					top: 8px;
					left: 50%;
					transform: translate(-50%, -50%) rotate(-45deg);
					opacity: 0;
					transition: .4s;
				}
				input:checked + .mypage__form__agree__frame::before {
					opacity: 1;
				}
				.mypage__form__agree__txt {
					flex: 1;
					font-size: 14px;
					font-weight: 400;
					line-height: calc(22 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
					.mypage__form__agree__txt__link {
						color: var(--color--black);
						text-decoration: underline;
					}
					@media (any-hover: hover) {
					.mypage__form__agree__txt__link:hover {
						text-decoration: none;
					}
				}
	.mypage__form__btn_wrap {
		width: 100%;
		height: 60px;
		margin: 60px auto 0;
	}
	.mypage__customer_information .mypage__form__btn_wrap,
	.mypage__card__add_card .mypage__form__btn_wrap {
		margin: 25px auto 0;
	}
		.mypage__form__btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			max-width: 398px;
			height: 100%;
			margin: 0 auto;
			background-color: var(--color--black);
			border: solid 1px var(--color--black);
			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) {
		.mypage__form__btn {
			transition: .4s;
		}
		.mypage__form__btn:hover {
			background-color: var(--color--white);
			color: var(--color--black);
		}
	}
	.mypage__form__back {
		width: 100%;
		height: auto;
		margin: 15px auto 0;
		font-size: 12px;
		font-weight: 400;
		line-height: calc(14 / 12);
		letter-spacing: 0.05em;
		text-align: center;
	}
		.mypage__form__back__link {
			color: var(--color--gray2);
			text-decoration: underline;
		}
	@media (any-hover: hover) {
		.mypage__form__back__link:hover {
			text-decoration: none;
		}
	}
	#AmazonPayButton {
		width: 400px !important;
		height: 68px !important;
	}

/* PC ================================================== */
@media all and (min-width: 720px){
			.mypage__form__list__item._min_width .mypage__form__list__item__content {
				width: 49.5%;
			}
			.mypage__form__list__item._medium_width .mypage__form__list__item__content {
				width: calc((495 / 600) * 100%);
			}
}

/* Tablet ================================================== */
@media all and (max-width: 719px){
		.mypage__form__list__item._haft_width {
			width: 100%;
		}
			.mypage__form__list__item__title {
				margin: 0 auto 13px;
			}

	.mypage__form__agree_wrap {
		gap: 15px;
		margin: 50px auto;
	}
	.mypage__add_address .mypage__form__agree_wrap,
	.mypage__address_edit .mypage__form__agree_wrap {
		margin: 40px auto 10px;
	}
	.mypage__card__add_card .mypage__form__agree_wrap {
		margin: 10px auto 10px;
	}
	#AmazonPayButton {
		width: 320px !important;
		height: 64px !important;
	}
				.coupon__list {
					grid-template-columns: 1fr;
				}
}

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

}