@charset "utf-8";


#contents {
	width: 100%;
	margin: 0;
	background: var(--white);
	padding-bottom: 70px;
}

.l-wrapper {
	background: #FFF;
}

.org-page * {
	font-size: 14px;
    font-weight: 400;
    color: var(--txt-color);
    font-family: var(--default-font);
}
.breadcrumbs {
	width: fit-content;
	padding: 0;
	margin: 0;
}

.page__inner {
	width: 1000px;
	margin: 0 auto;
}
select {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	padding-right: 22px;
}
.page__top {
	background: #D9EEF8;
	padding: 50px 0 50px;
}
	.page__title {
		font-size: 30px;
		font-weight: 700;
		letter-spacing: 0.05em;
		color: var(--main-color);
		text-align: center;
	}

.main__contents {
	margin: 60px 0 80px;
}
	.form__contents-title {
		width: 100%;
		height: 60px;
		border-radius: 5px 5px 0 0;
		background-image: linear-gradient(180deg, rgba(1, 139, 206, 1), rgba(0, 103, 186, 1));
		padding: 11px 20px;
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0.05em;
		color: var(--white);
	}

	.form__error-message {
		background: #FFF0F0;
		border: 1px solid #E74C3C;
		color: #E74C3C;
		padding: 12px 18px;
		border-radius: 5px;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 20px;
	}

	[class*="form__item"] {
		display: flex;
		gap: 18px;
		padding: 10px 22px;
		position: relative;
	}
	[class*="form__item"]:has(.error-text) {
		padding: 10px 22px 32px;
	}
	.form__item--mail:has(.error-text) {
		padding: 10px 22px;
	}
	[class*="form__item"]:nth-child(even) {
		background: #F7F7F7;
	}
	.form__wrap--mail .form__item--mail {
		background: none;
	}
		.form__group {
			display: contents;
		}
			.form__title {
				display: flex;
				align-items: center;
				gap: 13px;
				font-weight: 500;
				min-width: 237px;
			}
				.required-label {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 32px;
					height: 20px;
					background: #E00001;
					border-radius: 3px;
					font-size: 11px;
					font-weight: 500;
					color: #FFF;
				}
			[class*="form__input-wrap"] {
				width: 100%;
				position: relative;
			}
			.error-text {
				position: absolute;
			}
			.form__item .error-text {
				bottom: 9px;
				left: 282px;
			}
			.form__item .form__input-wrap--two .error-text {
				bottom: -22px;
				left: 0;
			}
			.form__item--mail .error-text {
				bottom: -15px;
				left: 278px;
			}
			.form__input-wrap--two {
				display: flex;
				gap: 10px;
			}
			.form__input-wrap--two .error-text:nth-of-type(2) {
				left: 358px;
			}
			.form__item .form__input-wrap-select--three .error-text {
				bottom: -23px;
				left: 5px;
			}
				[class*="form__input-wrap"] .form__input {
					height: 40px;
					background: #FFF;
					border-radius: 5px;
					border: 1px solid #DBDBDB;
					font-weight: 500;
					padding: 0 15px;
				}
				[class*="form__input-wrap"] .form__input#emailConfirm {
					font-weight: 400;
					padding-left: 10px;
				}
					[class*="form__input-wrap"] input[type="text"]::placeholder {
						color: #A5A5A5;
					}
			.form__address-wrap {
				width: 100%;
			}
				.form__address-wrap > .error-text {
					position: static;
					margin-bottom: 10px;
				}
				.form__assets-wrap .error-text:nth-of-type(2) {
					display: none;
				}
				.form__address-top {
					display: flex;
					align-items: center;
					gap: 5px;
					font-weight: 500;
					margin-bottom: 10px;
				}
					.form__address-top .form__input {
						width: 120px;
					}
					.zip-submit {
						display: flex;
						align-items: center;
						width: 144px;
						height: 33px;
						background-image: linear-gradient(180deg, rgba(253, 253, 253, 1), rgba(239, 239, 239, 1));
						border-top: 1px solid #CBCBCB;
						border-left: 1px solid #CBCBCB;
						border-right: 1px solid #CBCBCB;
						border-bottom: 3px solid #CBCBCB;
						border-radius: 4px;
						padding-left: 8px;
						font-size: 14px;
					}
				.form__input-wrap--four {
					display: flex;
					align-items: center;
					gap: 10px;
					margin-bottom: 10px;
				}
					.form__input-wrap--four select {
						font-weight: 500;
						background: url(/images/member/bg_arrow.webp) no-repeat 147px 15px / 11px 6px;
					}
					.form__input-wrap-select--three select {
						background: #FFF url(/images/member/bg_arrow.webp) no-repeat 139px 16px / 11px 6px;
					}
					.form__input-wrap-select--two select {
						background: #FFF url(/images/member/bg_arrow.webp) no-repeat 139px 15px / 11px 6px;
					}
					.form__time-wrap select {
						background: #FFF url(/images/member/bg_arrow.webp) no-repeat 105px 15px / 11px 6px;
					}
					.form__buy-flex select {
						background: #FFF url(/images/member/bg_arrow.webp) no-repeat 105px 15px / 11px 6px;
					}
					.eki__select-wrap select {
						background: #FFF url(/images/member/bg_arrow.webp) no-repeat 139px 15px / 11px 6px;
					}
					.form__input-wrap-select--one select {
						background: #FFF url(/images/member/bg_arrow.webp) no-repeat 139px 16px / 11px 6px;
					}
			.form__input-wrap--contact {
				display: flex;
				align-items: center;
				gap: 20px;
			}
				.form__time-wrap {
					display: flex;
					align-items: center;
					gap: 5px;
				}
					.form__time-wrap select {
						width: 124px;
					}
			.form__textarea {
				background: #FFF;
				height: 150px;
			}
		.contact__notes {
			text-align: center;
			margin: 15px 0;
		}
			.contact__notes a {
				text-decoration: underline;
			}
		.form__submit {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			width: 320px;
			height: 64px;
			margin: 0 auto;
			background-image: linear-gradient(180deg, rgba(1, 139, 206, 1), rgba(0, 103, 186, 1));
			border-bottom: 3px solid #004C88;
			border-radius: 8px;
			font-size: 22px;
			font-weight: 700;
			color: #FFF;
			padding-bottom: 14px;
			position: relative;
		}
			.form__submit svg {
				width: 8px;
				height: 14px;
				fill: none;
				stroke: var(--white);
				position: absolute;
				top: 50%;
				right: 9px;
				transform: translateY(-50%);
			}

			[class*="form__wrap"]:not(:last-child) {
				margin-bottom: 40px;
			}
.form__input-wrap--radio {
  display: flex;
  width: fit-content;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

/* inputを隠す */
.form__input-wrap--radio input[type="radio"] {
  display: none;
}

/* labelをボタン風に */
.form__input-wrap--radio label {
  text-align: center;
  padding: 8px 65px;
  cursor: pointer;
  font-size: 16px;
  background: #fff;
  transition: 0.3s;
}

/* labelの境界線（右側だけ） */
.form__input-wrap--radio label + label {
  border-left: 1px solid #ccc;
}

/* 選択されているラジオボタンのlabelにスタイル */
.form__input-wrap--radio label:has(input:checked) {
  background: linear-gradient(to bottom, #e6f3fb, #cfe8f7);
}

.form__input-wrap-select--three {
	display: flex;
	gap: 10px;

	select {
		width: 160px;
		height: 40px;
	}
}
.form__input-wrap-select--one {

	select {
		width: 200px;
	}
}
.form__input-wrap--one {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 16px;
	font-weight: 500;

	.form__input {
		width: 200px;
	}
}
.form__assets-wrap {
	display: flex;
	align-items: center;
	gap: 5px;

	.form__input {
		width: 126px;
	}
}
.form__area-wrap {
	select {
		width: 200px;
	}
}
.form__buy-date {
	display: flex;
	align-items: center;
	gap: 15px;
}
	.form__buy-flex {
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: 16px;

		select {
			width: 126px;
		}
	}

.mail__notes {
	border: 1px solid #008CCE;
	border-radius: 5px;
	background: #D9EEF8;
	padding: 10px 0 10px 57px;
	font-size: 16px;
	font-weight: 500;
	margin-top: 15px;
	position: relative;
}
.form__check-wrap--three {
	display: flex;
	align-items: center;
	gap: 10px;
}
.form__input-wrap-select--two {
	display: flex;
	gap: 10px;

	select {
		width: 160px;
	}
}
.eki__wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.eki__select-wrap {
	display: flex;
	align-items: center;
	gap: 5px;

	select {
		width: 160px;
	}
}
.form__input-wrap-select--one {
	select {
		width: 160px;
	}
}

.withdrawal__contents {
	margin-top: 52px;
}
	.withdrawal__text {
		font-size: 16px;
		font-weight: 500;
		margin: 17px 0 12px;
	}
	.withdrawal__link a {
		font-size: 16px;
		font-weight: 500;
		color: #1879A7;
		text-decoration: underline;
	}

/*--------------------- 確認画面 ---------------------*/

.confirm__bottom {
	margin-top: 20px;
	display: flex;
	align-items: center;
	position: relative;
}
	.confirm__button {
		display: flex;
		align-items: center;
		width: 170px;
		height: 50px;
		background-image: linear-gradient(180deg, rgba(253, 253, 253, 1), rgba(239, 239, 239, 1));
		border-top: 1px solid #CBCBCB;
		border-left: 1px solid #CBCBCB;
		border-right: 1px solid #CBCBCB;
		border-bottom: 3px solid #CBCBCB;
		border-radius: 4px;
		padding-left: 33px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
		.confirm__button svg {
			width: 8px;
			height: 14px;
			fill: none;
			stroke: #333;
			position: absolute;
			top: 17px;
			left: 9px;
			transform: rotate(-180deg);
		}

/*------------------------- 完了画面  -------------------------*/

.thankyou__text--top {
	margin-bottom: 20px;
}
.thankyou__text {
	margin-bottom: 30px;
} 
.thankyou__button-flex {
	display: flex;
	justify-content: center;
	gap: 15px;
}
.thankyou__more {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 170px;
	height: 50px;
	background-image: linear-gradient(180deg, rgba(253, 253, 253, 1), rgba(239, 239, 239, 1));
	border-top: 1px solid #CBCBCB;
	border-left: 1px solid #CBCBCB;
	border-right: 1px solid #CBCBCB;
	border-bottom: 3px solid #CBCBCB;
	border-radius: 4px;
	font-size: 15px;
	position: relative;
}
	.thankyou__more svg {
		width: 8px;
		height: 14px;
		fill: none;
		stroke: #333;
		position: absolute;
		top: 50%;
		right: 8px;
		transform: translateY(-50%);
	}