@charset "utf-8";

#header {
	@media screen and (min-width: 744px), print {
		nav {
			.gnav {
				color: var(--color-base);
			}
		}
	}
}

.form_contents {
	position: relative;
	padding-inline: calc((100% - 100rem) / 2);
	padding-bottom: 20rem;
	@media screen and (max-width: 743px) {
		padding-bottom: 5rem;
	}

	.form_head {
		margin-bottom: 8rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 5rem;
		}
	}

	.form_group {
		&:has(+ .form_group) {
			margin-bottom: 5rem;
			padding-bottom: 4rem;
			border-bottom: 1px solid #808080;
			@media screen and (max-width: 743px) {
				margin-bottom: 2rem;
				padding-bottom: 3rem;
			}
		}
		&.-no-border {
			border-bottom: 0;
		}
	}

	.form_item {
		@media screen and (min-width: 744px), print {
			display: flex;
			align-items: start;
			dt {
				position: relative;
				width: 41rem;
				flex-shrink: 0;
				display: flex;
				min-height: 6rem;
				align-items: center;
				font-size: 1.8rem;
				line-height: 1.5;
			}
			dd {
				flex-grow: 1;
			}
		}
		&:not(:last-child) {
			margin-bottom: 3rem;
			@media screen and (max-width: 743px) {
				margin-bottom: 1.5rem;
			}
		}
		dt {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			@media screen and (max-width: 743px) {
				font-size: 1.5rem;
				margin-bottom: .7rem;
			}
		}
/*
		.hissu {
			display: inline-block;
			padding: 0.3rem 0.8rem;
			background-color: var(--color-base);
			color: #fff;
			font-size: 1.2rem;
			border-radius: 2rem;
			@media screen and (max-width: 743px) {
				font-size: 1rem;
				line-height: 1.2;
			}
		}
*/
		.address {
			dl {
				@media screen and (min-width: 744px), print {
					display: flex;
					align-items: start;
					margin-left: -20rem;
					& > dt {
						width: 20rem;
						justify-content: end;
						padding-right: 3rem;
					}
				}
				&:not(:last-child) {
					margin-bottom: 3rem;
					@media screen and (max-width: 743px) {
						margin-bottom: 1.5rem;
					}
				}
			}
			.zip_notes {
				margin-left: 1rem;
				font-size: 1.4rem;
				@media screen and (max-width: 743px) {
					display: block;
					margin: 0.3rem 0 0;
					font-size: 1.2rem;
				}
			}
		}
		.birth {
			display: flex;
			align-items: center;
			gap: 1rem;
			@media screen and (max-width: 743px) {
				gap: .5rem;
			}
			select {
				@media screen and (min-width: 744px), print {
					width: 10rem;
				}
			}
		}

		.h_checkbox ul {
			display: flex;
			flex-wrap: wrap;
			gap: 2em;
		}
		.radio_text {
			@media screen and (min-width: 744px), print {
				display: flex;
				gap: 2rem;
				margin-bottom: 1rem;
				.text {
					flex-grow: 1;
				}
			}
		}
		.file_box {
			position: relative;
			.btn_line {
				display: flex;
				align-items: center;
				gap: 2rem;
				.uploader__btn {
					width: 23rem;
					height: 4.5rem;
					background-color: var(--color-theme);
					font-size: 1.5rem;
					color: #fff;
				}
				@media screen and (max-width: 743px) {
					flex-direction: column;
					align-items: start;
					gap: .5rem;
					.uploader__btn {
						font-size: 1.4rem;
					}
				}
			}
			&.-max .btn_line {
				display: none;
			}
			.uploader__count {
				position: absolute;
				right: 1rem;
				top: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				font-size: 1.6rem;
				@media screen and (max-width: 743px) {
					top: auto;
					bottom: 1rem;
					font-size: 1.1rem;
				}
			}
			.uploader__list {
				&:not(:has(li)) {
					display: none;
				}
				margin-bottom: 1rem;
				font-size: 1.6rem;
				line-height: 1.5;
				li {
					position: relative;
					display: flex;
					align-items: center;
					gap: 2rem;
					min-height: 6rem;
					padding: .6em 4rem .6em 2rem;
					border: 1px solid #ccc;
					@media screen and (max-width: 743px) {
						min-height: 5rem;
						padding: .7em 3rem .7em 1.5rem;
						background-position: 0.5rem;
						background-size: 2rem;
						font-size: 1.4rem;
					}
					& + li {
						margin-top: .5rem;
					}
					&.uploader__error {
						color: #f00;
					}
					.uploader__thumb {
						flex-shrink: 0;
						max-width: 10rem;
						max-height: 10rem;
						pointer-events: none;
					}
					button {
						position: absolute;
						right: 1rem;
						top: 0;
						bottom: 0;
						margin-block: auto;
						width: 2rem;
						height: 2rem;
						background-color: var(--color-base);
						border-radius: 100%;
						&::before,
						&::after {
							content: "";
							position: absolute;
							top: calc(50% - 1px);
							right: 0.4rem;
							left: 0.4rem;
							border-top: 2px solid #fff;
							transform: rotate(45deg);
						}
						&::after {
							transform: rotate(-45deg);
						}
						@media screen and (max-width: 743px) {
							top: -0.5rem;
							right: -0.5rem;
							bottom: auto;
						}
					}
				}
			}
			&.-max .uploader__list {
				margin-bottom: 0;
				@media screen and (max-width: 743px) {
					padding-bottom: 2rem;
				}
			}
			&.-dragover {
				background-color: #e0effb;
				&::after {
					content: "";
					position: absolute;
					top: -1px;
					right: -1px;
					left: -1px;
					bottom: -1px;
					border: .3rem solid #66afe9;
				}
			}
		}
	}

	.privacy_check {
		margin-top: 15rem;
		label {
			height: auto;
		}
		.notes {
			font-size: 1.4rem;
			line-height: 2;
			p {
				margin-top: 2rem;
			}
		}
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
			label {
				font-size: 1.5rem;
			}
			.notes {
				font-size: 1.2rem;
				p {
					margin-top: 1.5rem;
				}
			}
		}
	}

	.form_btn {
		position: relative;
		margin-top: 6rem;
		text-align: center;
		display: flex;
		justify-content: center;
		gap: 2rem;
		@media screen and (max-width: 743px) {
			gap: 1rem;
		}
	}
	.-confirm {
		.form_item {
			line-height: 2;
			.confirm_text:not(.confirm_text .confirm_text) {
				display: block;
				min-height: 1lh;
				padding: 0.7em 1em;
				background-color: #f3f3f3;
				font-weight: var(--font-weight-bold);
				box-sizing: content-box;
				font-size: 1.8rem;
				@media screen and (max-width: 743px) {
					background-color: rgba(255, 255, 255, .3);
					font-size: 1.5rem;
				}
			}
			.confirm_file  {
				display: flex;
				align-items: center;
				gap: 2rem;
				line-height: 1.6;
				.uploader__thumb {
					flex-shrink: 0;
					max-width: 10rem;
					max-height: 10rem;
					pointer-events: none;
				}
			}
		}
		.form_btn {
			margin-top: 10rem;
			@media screen and (max-width: 743px) {
				margin-top: 6rem;
			}
		}
	}
}
.form_contents {
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=number],
	input[type=date],
	input[type=url],
	textarea,
	select {
		width: 100%;
		height: 6rem;
		padding: 0 1.5em;
		background-color: #fff;
		border: 1px solid #000;
		color: var(--color-base);
		transition: box-shadow .2s, border .2s;
		@media screen and (max-width: 743px) {
			font-size: 16px;
			height: 5rem;
			padding: 0 1em;
		}
		&:focus {
			border-color: #66afe9;
			outline: 0;
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,0.8);
		}
		&:disabled {
			background-color: #ddd;
			opacity: .5;
		}
		&.-size1 {
			width: 28rem;
			@media screen and (max-width: 743px) {
				width: 100%;
			}
		}
	}
	input[type=date] {
		width: auto;
	}
	textarea {
		height: 38rem;
		padding: 1.5em;
		@media screen and (max-width: 743px) {
			height: 26rem;
			padding: 1em;
		}
		&.-height1 {
			height: 20rem;
			@media screen and (max-width: 743px) {
			}
		}
	}
	select {
		width: auto;
		padding: 0 3rem 0 1em;
		background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%226%22%20viewBox%3D%220%200%209%206%22%3E%3Cpath%20d%3D%22M8.995%2C.297L4.5%2C5.704%2C.005%2C.296H8.995Z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem);
	}
	button:disabled {
		opacity: 0.3;
	}
	button[aria-disabled="true"] {
		position: relative;
		pointer-events: none;
	}
	&:has(.uploader__list li) button[aria-disabled="true"] {
		opacity: .3;
	}
	::placeholder {
		color: #9B9B9B;
	}

	input[type=checkbox],
	input[type=radio] {
		position: absolute;
		width: 2rem;
		height: 2rem;
	}
	label {
		position: relative;
		display: flex;
		align-items: center;
		font-size: 1.8rem;
		height: 6rem;
		line-height: 1.6;
		@media screen and (max-width: 743px) {
			font-size: 1.6rem;
			height: auto;
			padding: 0.5rem 0;
		}
		:is(input[type=radio], input[type=checkbox]) {
			& + span {
				position: relative;
				padding-left: 3.4rem;
				@media screen and (max-width: 743px) {
					padding-left: 2.4rem;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -1rem;
					width: 2rem;
					height: 2rem;
					background-color: #fff;
					border: 1px solid #000;
					border-radius: .4rem;
					@media screen and (max-width: 743px) {
						width: 1.8rem;
						height: 1.8rem;
						margin-top: -.9rem;
					}
				}
				&::after {
					content: "";
					position: absolute;
					opacity: 0;
					transition: opacity .1s;
				}
			}
			&:checked + span::after {
				opacity: 1;
			}
		}
		input[type=radio] + span {
			padding-left: 2rem;
			margin-right: 1rem;
			@media screen and (max-width: 743px) {
				padding-left: 1.8rem;
			}
			&::before {
				border-radius: 100%;
			}
			&::after {
				left: 50%;
				top: 50%;
				width: 1rem;
				height: 1rem;
				transform: translate(-50%,-50%);
				background-color: var(--color-base);
				border-radius: 100%;
				@media screen and (max-width: 743px) {
					width: 1rem;
					height: 1rem;
				}
			}
		}
		input[type=checkbox] + span {
			&::before {
				border-radius: 0;
			}
			&::after {
				left: 0.6rem;
				top: calc(50% - 0.9rem);
				width: 0.8rem;
				height: 1.4rem;
				border-right: .3rem solid var(--color-base);
				border-bottom: .3rem solid var(--color-base);
				transform: rotate(45deg);
				@media screen and (max-width: 743px) {
					left: .7rem;
					top: calc(50% - .9rem);
					width: .7rem;
					height: 1.4rem;
				}
			}
		}
	}
}

.form_error {
	text-align: center;
	color: #f00;
	ul {
		margin-top: 2rem;
		padding: 2rem;
		font-weight: var(--font-weight-bold);
		border: 1px solid #f00;
		line-height: 2;
		li::before {
			content: "・";
		}
	}
	@media screen and (max-width: 743px) {
		text-align: left;
	}
}
.field_err {
	margin-top: 0.8rem;
	font-size: 1.6rem;
	line-height: 1.6;
	color: #f00;
	@media screen and (max-width: 743px) {
		font-size: 1.1rem;
	}
}


.form_fin {
	text-align: center;
	.lead {
		margin-bottom: 2rem;
		font-size: 3rem;
		line-height: 2;
		@media screen and (max-width: 743px) {
			font-size: 2rem;
		}
	}
	.btn {
		margin-top: 6rem;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
	}
}