@charset "UTF-8";
/* -----------------------------------------------------------
	.p-form
----------------------------------------------------------- */
.p-sky__form__wrapper {
	position: relative;
	&::before {
		content: "";
		background: url(../images/common/bg-sky.avif) center 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 1136px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
.p-form {
	max-width: 960px;
	border-radius: 8px;
	border-top: 1px solid #FFF;
	border-left: 1px solid #FFF;
	background: rgba(255, 255, 255, 0.60);
	backdrop-filter: blur(20px);
	padding: 80px;
	margin-top: 120px;
	@media (min-width: 768px) and (max-width: 1024px) {
		padding: 64px;
		margin-top: 80px;
	}
	@media (max-width: 767px) {
		padding: 40px 24px;
		margin-top: 40px;
	}
	table {
		width: 100%;
		tr {
			th,td {
				padding-top: 22px;
				padding-bottom: 22px;
				@media (max-width: 767px) {
					display: block;
					width: 100%;
					padding: 0;
				}
			}
			th {
				line-height: 1.43;
				font-weight: 500;
				@media (min-width: 768px) {
					width: 30%;
				}
				@media (max-width: 767px) {
					font-size: 15px;
					margin-bottom: 8px;
				}
				.required {
					display: inline-block;
					color: #D85543;
					font-size: 81.3%;
					margin-left: 0.25em;
				}
			}
			td {
				@media (min-width: 768px) {
					width: 70%;
				}
				@media (max-width: 767px) {
					padding-bottom: 24px;
				}
				input,
				textarea {
					margin: 0;
					padding: 0;
					background: #fff;
					border: 1px solid var(--color-border);
					outline: none;
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					border-radius: 8px;
					padding: 24px 32px;
					width: 100%;
					display: block;
					line-height: 1.43;
					font-weight: 500;
					@media (max-width: 767px) {
						padding: 16px 24px;
					}
					&::placeholder {
						color: #bbb;
					}
					&:focus {
						border-color: var(--color-blue)
					}
				}
				.wpcf7-list-item {
					margin: 0;
				}
				&.box-checkbox {
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 24px 32px;
					@media (max-width: 767px) {
						padding-top: 16px;
						gap: 16px 24px;
					}
					.wpcf7-checkbox {
						display: flex;
						flex-wrap: wrap;
						gap: 16px 32px;
						@media (max-width: 767px) {
							gap: 16px 24px;
						}
					}
					.wpcf7-jobtype_list {
						display: flex;
						flex-wrap: wrap;
						gap: 16px 32px;
						@media (max-width: 767px) {
							gap: 16px 24px;
						}
					}
					span {
						display: block;
						position: relative;
						label {
							display: flex;
							gap:0 8px;
						}
						input[type="checkbox"] {
							margin: 0;
							padding: 0;
							background: none;
							border: none;
							border-radius: 4px;
							outline: none;
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							cursor: pointer;
							vertical-align: middle;
							position: relative;
							width: 24px;
							aspect-ratio: 1;
						}
						input[type="checkbox"]::before,
						input[type="checkbox"]::after {
							content: "";
							display: block;
							position: absolute;
						}
						input[type="checkbox"]::before {
							border: 1px solid var(--color-border);
							background-color: #fff;
							width: 24px;
							aspect-ratio: 1;
							border-radius: 4px;
							transform: translateY(-50%);
							top: 50%;
							left: 0;
							@media (max-width: 767px) {
								width: 17px;
								height: 17px;
								top: 12px;
							}
						}
						input[type="checkbox"]::after {
							border-bottom: 2px solid var(--color-base);
							border-left: 2px solid var(--color-base);
							opacity: 0;
							height: 0.4rem;
							width: 0.8rem;
							transform: rotate(-45deg);
							top: -0.2rem;
							bottom: 0;
							margin: auto;
							left: 0.4rem;
							@media (max-width: 767px) {
								height: 0.4rem;
								width: 0.7rem;
								left: 0.5rem;
								top: 0.4rem;
							}
						}
						input[type="checkbox"]:checked::after {
							opacity: 1;
						}
						.mwform-checkbox-field-text {
							cursor: pointer;
							display: inline-block;
							line-height: 1.643;
							font-weight: 500;
							@media (max-width: 767px) {
								position: static;
								padding-left: 0;
							}
						}
					}
					}
			}
		}
	}
	.box-privacy {
		@media (min-width: 768px) {
			display: grid;
			grid-template-columns: 30% 70%;
			margin-top: 22px;
		}
		dt {
			line-height: 1.43;
			font-weight: 500;
			margin-bottom: 16px;
			@media (max-width: 767px) {
				font-size: 15px;
				margin-bottom: 8px;
			}
			.required {
				display: inline-block;
				color: #D85543;
				font-size: 81.3%;
				margin-left: 0.25em;
			}
		}
		dd {
			input {
				margin: 0;
				padding: 0;
				background: none;
				outline: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
			}
			.wpcf7-list-item {
				margin: 0;
			}
			.wpcf7-checkbox {
				@media (min-width: 768px) {
					display: flex;
					flex-wrap: wrap;
				}
				.wpcf7-list-item {
					display: block;
					position: relative;
					margin: 0 0 24px;
					@media (min-width: 768px) {
						width: 50%;
					}
					@media (max-width: 767px) {
						margin-bottom: 8px;
					}
				}
			}
			label {
				position: relative;
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: center;
				gap: 0 12px;
				@media (max-width: 767px) {
					gap: 0 8px;
				}
				.mwform-checkbox-field-text {
					font-size: 125%;
					@media (min-width: 1025px) {
						margin-top: -0.25em;
					}
					@media (max-width: 767px) {
						font-size: 100%;
					}
				}
				a {
					text-decoration: underline;
					@media (hover: hover) {
						transition: 0.3s;
						&:hover {
							text-decoration: none;
						}
					}
				}
			}
			input[type="checkbox"] {
				cursor: pointer;
				padding-bottom: 0;
				vertical-align: middle;
				background: none;
				border: none;
				width: 32px;
				aspect-ratio: 1;
				@media (max-width: 767px) {
					width: 24px;
				}
			}
			input[type="checkbox"]::before,
			input[type="checkbox"]::after {
				content: "";
				display: block;
				position: absolute;
			}
			input[type="checkbox"]::before {
				background-color: #fff;
				border: 1px solid var(--color-border);
				width: 32px;
				height: 32px;
				transform: translateY(-50%);
				top: 50%;
				left: 0;
				border-radius: 4px;
			}
			input[type="checkbox"]::after {
				border-bottom: 2px solid var(--color-base);
				border-left: 2px solid var(--color-base);
				opacity: 0;
				height: 0.8rem;
				width: 1.4rem;
				transform: rotate(-45deg);
				top: -0.7rem;
				bottom: 0;
				margin: auto;
				left: 0.5rem;
			}
			input[type="checkbox"]:checked::before {
				background: none;
			}
			input[type="checkbox"]:checked::after {
				opacity: 1;
			}
			@media (max-width: 767px) {
				input[type="checkbox"] {
					&::before {
						width: 24px;
						height: 24px;
						top: 12px;
					}
					&::after {
						height: 0.4rem;
						width: 0.7rem;
						left: 0.5rem;
						top: -0.3rem;
					}
				}
			}
			.wpcf7-list-item-label {
				cursor: pointer;
				display: block;
			}
			.txt-notice {
				font-size: 87.5%;
				padding-left: 46px;
				@media (min-width: 768px) and (max-width: 1024px) {
					width: 100%;
					padding-left: 50px;
				}
				@media (max-width: 767px) {
					padding-left: 32px;
				}
				a {
					text-decoration: underline;
					@media (hover: hover) {
						&:hover {
							text-decoration: none;
						}
					}
				}
			}
		}
	}
	.c-button-basic {
		margin-top: 80px;
		margin-inline: auto;
		position: relative;
		input {
			margin: 0;
			padding: 0;
			background: none;
			border: none;
			border-radius: 0;
			outline: none;
			-webkit-appearance: none;
			appearance: none;
			color: #fff;
			font-weight: 700;
			font-size: calc(18 * var(--rem));
			width: 100%;
			line-height: 1;
			background-color: var(--color-blue);
			border-radius: 999px;
			color: #fff;
			font-weight: 700;
			line-height: 1;
			padding: 26px 24px 26px 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap:16px;
			cursor: pointer;
			text-align: left;
			@media (max-width: 767px) {
				margin-top: 40px;
				padding: 20px 16px 20px 24px;
				font-size: calc(16 * var(--rem));
			}
			&:disabled {
				opacity: 0.3;
				pointer-events: none;
			}
		}
		.wpcf7-spinner {
			display: none;
		}
		.icon {
			position: absolute;
			top: 50%;
			right: 24px;
			transform: translateY(-50%);
			width: 24px;
			aspect-ratio: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			img {
				position: relative;
				z-index: 1;
				width: 14px;
				aspect-ratio: 1;
			}
			&::before {
				content: "";
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				inset: 0;
				margin: auto;
				transition: transform .3s ease;
			}
		}
		@media (hover: hover) {
			&:not(:has(input:disabled)):hover {
				.icon {
					&::before {
						transform: scale(1.2);
					}
				}
			}
		}
		&:has(input:disabled) {
			.icon {
				pointer-events: none;
				img {
					opacity: 0.3;
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-thanks
----------------------------------------------------------- */
.p-thanks {
	max-width: 960px;
	margin-top: 80px;
	@media (max-width: 767px) {
		margin-top: 40px;
	}
	.txt-intro {
		margin-bottom: 40px;
		line-height: 2;
		@media (max-width: 767px) {
			margin-bottom: 24px;
			br {
				display: none;
			}
		}
	}
}