@charset "UTF-8";

#formWrapper {
	select, input[type="text"], input[type="email"], textarea {
		box-sizing: border-box;
		border: 1px solid #d2d2d2;
		appearance: none;
		&:focus { border-color: var(--text-blue); }
	}
	.selectBox {
		position: relative;
		&::after {
			content: "▼";
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0.5em;
			bottom: 0;
			pointer-events: none;
		}
	}
	textarea { resize: vertical; }
	dl {
		border-top: 1px solid #d2d2d2;
		dt { color: var(--text-blue); }
	}
	.required {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: var(--text-blue);
	}
	.options {
		color: var(--text-blue);
		display: flex;
	}
	.boxWrap {
		display: flex;
		cursor: pointer;
		align-items: center;
		input[type="radio"], input[type="checkbox"] {
			width: 0;
			height: 0;
			opacity: 0;
			border: none;
			padding: 0;
			& + span {
				border: 1px solid #d2d2d2;
				aspect-ratio: 1 / 1;
				background-color: #fff;
				&.radio {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					&::after {
						content: "";
						display: none;
						position: absolute;
						border-radius: 50%;
						aspect-ratio: 1 / 1;
						background-color: var(--text-blue);
					}
				}
				&.checkbox {
					position: relative;
					&::after {
						content: "";
						display: none;
						position: absolute;
						aspect-ratio: 2 / 3;
						border-right: 2px solid var(--text-blue);
						border-bottom: 2px solid var(--text-blue);
						transform: rotate(45deg);
					}
				}
			}
			&:checked + span::after {
				display: block;
			}
		}
	}
	.formBottom {
		border-top: 1px solid #d2d2d2;
		.privacy{
			.agree { color: var(--text-blue); }
			.link a { text-decoration: underline; }
		}
		.buttons {
			a, input:not([type="hidden"]), button {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				border: none;
				appearance: none;
				cursor: pointer;
				color: #fff;
				background-color: #000;
				transition-duration: .3s;
				transition-property: color, background-color;
				&:is(.submit &) {
					color: #fff;
					background-color: var(--bg-blue);
				}
				&:not([disabled]):hover { background-color: #005bab !important; }
				&[disabled] {
					cursor: default;
					background-color: #a0a0a0 !important;
				}
			}
		}
	}

	&.confirm {
		dt { flex-shrink: 0; }
	}
	&.error {
		.text .blue { color: var(--text-blue); }
	}
	&.thanks {
		.formBottom { border-top: none; }
	}
}
@media screen and (min-width:769px), print{
	#formWrapper {
		line-height: 22px;
		select, input[type="text"], input[type="email"], textarea {
			height: 36px;
			width: 560px;
			padding: 5px 7px;
			border-radius: 7px;
			&[type="email"] { width: 270px; }
		}
		select { padding-right: 28px; }
		textarea {
			height: 232px;
			padding: 14px 22px;
		}
		.required {
			width: 70px;
			height: 36px;
			margin-left: 10px;
			border-radius: 7px;
		}
		.choose, .formBottom {
			padding-left: 160px;
		}
		.choose {
			display: flex;
			padding-block: 70px;
		}
		.options {
			height: 36px;
			align-items: center;
			li + li { margin-left: 20px; }
		}
		.boxWrap {
			input[type="radio"], input[type="checkbox"] {
				& + span {
					margin-right: 0.7em;
					&.radio { width: 22px; }
					&.checkbox { width: 18px; }
				}
				&:checked + .radio::after { width: 10px; }
				&:checked + .checkbox::after {
					top: 0;
					left: 5px;
					width: 7px;
				}
			}
		}
		dl {
			display: flex;
			align-items: flex-start;
			dt {
				width: 160px;
				height: 44px;
				display: flex;
				align-items: center;
				padding-block: 25px;
			}
			dd {
				display: flex;
				padding-block: 30px;
			}
		}
		.formBottom {
			padding-top: 45px;
			.privacy {
				display: flex;
				font-size: 14px;
				& > * + * { margin-left: 35px; }
				.link a:hover { text-decoration: none; }
			}
			.buttons {
				width: 500px;
				font-size: 18px;
				margin-top: 30px;
				& > * + * { margin-top: 30px; }
				a, input:not([type="hidden"]), button {
					height: 80px;
					border-radius: 7px;
				}
			}
		}
		.attention {
			font-size: 12px;
			margin-top: 28px;
			li {
				padding-left: 1em;
				text-indent: -1em;
			}
		}

		&.confirm {
			margin-top: 90px;
			dd { padding-block: 36px; }
		}
		&.error {
			.text {
				padding-block: 100px;
				.error_messe + .error_messe { margin-top: 15px; }
			}
		}
	}
}
@media screen and (max-width:768px){
	#formWrapper {
		select, input[type="text"], input[type="email"], textarea {
			width: 100%;
			height: 30px;
			border-radius: 5px;
			padding-inline: 8px;
		}
		select { font-size: 12px; }
		textarea {
			height: 200px;
			padding-block: 5px;
		}
		.options li + li { margin-left: 16px; }
		.boxWrap {
			input[type="radio"], input[type="checkbox"] {
				& + span {
					margin-right: 0.7em;
					&.radio { width: 18px; }
					&.checkbox { width: 16px; }
				}
				&:checked + .radio::after { width: 7px; }
				&:checked + .checkbox::after {
					top: 0;
					left: 5px;
					width: 7px;
				}
			}
		}
		dl {
			position: relative;
			padding-block: 18px 25px;
			/*&:not(.reply) dt { margin-bottom: 20px; }*/
			&.reply {
				/*display: flex;*/
				/*justify-content: space-between;*/
			}
			dt { margin-bottom: 20px; }
		}
		.choose {
			display: flex;
			align-items: flex-end;
			flex-direction: column-reverse;
			margin-top: 45px;
			padding-bottom: 25px;
			.selectBox {
				width: 100%;
				margin-top: 15px;
			}
		}
		.required {
			width: 50px;
			height: 27px;
			font-size: 13px;
			border-radius: 5px;
			&:is(dl &) {
				position: absolute;
				top: 18px;
				right: 0;
			}
		}
		.formBottom {
			padding-block: 45px;
			.privacy {
				.link {
					margin-top: 2px;
					padding-left: 25px;
				}
			}
			.buttons {
				margin-top: 20px;
				& > * + * { margin-top: 15px; }
				a, input:not([type="hidden"]), button {
					height: 60px;
					border-radius: 5px;
				}
			}
		}
		.attention {
			font-size: 10px;
			margin-top: 20px;
			li { display: inline; }
		}

		&.confirm {
			margin-top: 45px;
		}
		&.error {
			.text {
				padding-block: 50px;
				.error_messe + .error_messe { margin-top: 10px; }
			}
		}
	}
	}
}