/* 入力画面 */
h2 {
	line-height: 1.41;
}

.phone-wrap {
	text-align: center;
	margin: 0 auto;
	max-width: 686px;

	div {
		background: #FAF9E4;
		border-radius: 20px;
		padding: 23px 20px 19px;
		margin: 21px auto 67px;
		;
		max-width: 370px;

		a {
			font-family: "Zen Maru Gothic", sans-serif;
			font-size: 40px;
			font-weight: bold;
			letter-spacing: .05em;
		}

		span {
			font-size: 20px;
		}

		p {
			font-size: 14px;
			font-weight: 500;
			letter-spacing: .05em;
			line-height: 1.57;
			margin-top: 19px;
			color: #4B5D92;
		}
	}
}

.step-img {
	margin: 0 auto 32px;
	display: block;
}

.mail-wrap {
	margin: 0 auto;
	max-width: 686px;

	h2::before {
		content: none;
	}
}

table {

	th,
	td {
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	tr {
		display: flex;
		flex-flow: column;
		gap: 14px;
		text-align: left;
		margin-top: 35px;
	}

	th {
		color: #4B5D92;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: .05em;
		line-height: 1.5;
	}
}

.required {
	background: #F88A95;
	border-radius: 10px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .05em;
	line-height: 1.33;
	padding: 3px 10px;
	margin-right: 6px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
	background-color: #FAF9E4;
	border-radius: 20px;
	border: none;
	font-size: 16px;
	letter-spacing: .05em;
	line-height: 1.5;
	padding: 9px 23px 10px;
	resize: vertical;
	width: 100%;
}

::placeholder {
	color: #B8AB86;
}

input:focus,
textarea:focus {
	background-color: #FFEEF0;
	outline: none;
}

/* プライバシーポリシー */
.privacy-wrap {
	margin-top: 48px;

	h3 {
		color: #4B5D92;
		font-size: 20px;
		text-align: center;
	}

	.privacy-content {
		border: 1px solid #4B5D92;
		border-radius: 5px;
		height: 320px;
		overflow-y: scroll;
		padding: 30px 45px 50px;

		div {
			background: #F2FAFF;
			border-radius: 30px;
			padding: 24px 0 21px;
			text-align: center;
			margin: 20px auto 50px;
			max-width: 236px;

			b {
				color: #4B5D92;
				font-size: 18px;
				letter-spacing: .05em;
				line-height: 2;
			}

			p {
				font-size: 14px;
				margin-top: 10px;
				letter-spacing: .05em;
				line-height: 1.71;
			}

			span {
				display: block;
				font-weight: 500;
			}
		}
	}

	p {
		font-size: 16px;
		letter-spacing: .05em;
		line-height: 2;
	}

	ol {
		counter-reset: counter;
		padding: 0;
		margin: 0;

		li {
			font-size: 16px;
			letter-spacing: .05em;
			line-height: 2;
			counter-increment: counter;
			display: flex;
			gap: 8px;
			margin-top: 10px;

			&::before {
				flex-shrink: 0;
				content: counter(counter);
				color: #fff;
				background: #4B5D92;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 5px;
				width: 28px;
				height: 28px;
			}
		}
	}

	h4 {
		color: #4B5D92;
		display: flex;
		align-items: center;
		gap: 12px;
		font-size: 18px;
		margin: 37px 0 11px;

		&:first-child {
			margin-top: 0;
		}

		span {
			background: #4B5D92;
			border-radius: 5px;
			color: #fff;
			font-size: 20px;
			text-align: center;
			width: 32px;
			height: 32px;
		}
	}
}

#form-confirm-step {
	td {
		background-color: #FAF9E4;
		border-radius: 20px;
		border: none;
		font-size: 16px;
		letter-spacing: .05em;
		line-height: 1.5;
		padding: 9px 23px 10px !important;
		resize: vertical;
		width: 100%;
		text-align: start;
	}

	.btn-area {

		button#btn-back-to-input {
			background-color: #ADADAD !important;
			color: #FFF;
			position: relative;
			text-align: center;
			display: inline-block;
			font-size: 14px;
			font-weight: 500;
			line-height: 2.25;
			font-family: 'Noto Sans JP', sans-serif;
			padding: 8px 25px;
			border: none;
			border-radius: 50px;
			letter-spacing: 0.05em;
			transition:
				background 0.3s ease;
		}

		button#btn-back-to-input::before {
			content: "";
			border-bottom: 2px solid;
			border-left: 2px solid;
			position: relative;
			width: 8px;
			height: 8px;
			transform: rotate(45deg);
			top: 0px;
			left: -14px;
			display: inline-block;
		}

		button#btn-back-to-input:hover {
			background-color: #4B5D92 !important;
		}

		.wpcf7-submit {
			background-color: #E85382;
			color: #FFF;
			position: relative;
			text-align: center;
			display: inline-block;
			font-size: 16px;
			font-weight: 500;
			line-height: 2.25;
			font-family: 'Noto Sans JP', sans-serif;
			padding: 8px 25px;
			border: none;
			border-radius: 50px;
			box-shadow: 0px 4px 0px rgba(88, 131, 255, 0.25);
			letter-spacing: 0.05em;
			transition:
				transform 0.3s ease,
				box-shadow 0.3s ease,
				background-color 0.3s ease,
				color 0.3s ease;
		}

		.wpcf7-submit:hover {
			transform: translateY(4px);
			box-shadow: none;
			background-color: #4B5D92;
			color: #ffffff;
		}

		.submit-wrap {
			position: relative;
			display: inline-block;
		}

		.submit-wrap::after {
			content: "";
			border-top: 2px solid #fff;
			border-right: 2px solid #fff;
			position: absolute;
			width: 8px;
			height: 8px;
			transform: translateY(-40%) rotate(45deg);
			top: 50%;
			right: 10px;
			pointer-events: none;
			transition: transform 0.3s ease;
		}

		/* hover時：ボタンを下に4px */
		.submit-wrap:hover .wpcf7-submit {
			transform: translateY(4px);
		}

		/* hover時：矢印も下に4px */
		.submit-wrap:hover::after {
			transform: translateY(calc(-40% + 4px)) rotate(45deg);
		}


	}
}

.wpcf7-spinner {
	display: none !important;
}

.wpcf7-not-valid-tip {
	text-align: left !important;
}


/* プライバシーポリシーについて */

.privacy-consent {
	margin-top: 37px;
	text-align: center;

	h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		color: #4B5D92;
	}

	p {
		color: #4B5D92;
		font-size: 14px;
		letter-spacing: .05em;
		line-height: 1.71;
		margin: 23px auto 13px;
	}

	.wpcf7-form-control {
		width: 100%;
		background-color: #FAF9E4;
		color: #4B5D92;
		padding: 20px;
		display: block;
		border-radius: 20px;
		font-size: 16px;
		line-height: 1.5;
		font-weight: 500;
	}

}



.btn-area {
	margin-top: 48px !important;

	button#btn-to-confirm {
		background-color: #E85382;
		color: #FFF;
		position: relative;
		text-align: center;
		display: inline-block;
		font-size: 16px;
		font-weight: 500;
		line-height: 2.25;
		font-family: 'Noto Sans JP', sans-serif;
		padding: 8px 25px;
		border: none;
		border-radius: 50px;
		box-shadow: 0px 4px 0px rgba(88, 131, 255, 0.25);
		letter-spacing: 0.05em;
		transition:
			transform 0.3s ease,
			box-shadow 0.3s ease,
			background-color 0.3s ease,
			color 0.3s ease;
	}

	button#btn-to-confirm::after {
		content: "";
		border-top: 2px solid;
		border-right: 2px solid;
		position: relative;
		width: 8px;
		height: 8px;
		transform: rotate(45deg);
		top: -2px;
		right: -15px;
		display: inline-block;
	}

	button#btn-to-confirm:not(:disabled):hover {
		transform: translateY(4px);
		box-shadow: none;
		background-color: #4B5D92;
		color: #ffffff;
	}


}

.contact-inner {
	max-width: 686px;
	margin: 0 auto;

	p {
		font-size: 16px;
		line-height: 1.75;
		letter-spacing: 0.05em;
	}

	.confirmation {
		background-color: #FAF9E4;
		padding: 23px 23px 33px;
		margin-top: 36px;
		border-radius: 20px;

		ul {
			margin-top: 13px;
		}
	}

	.button-white {
		margin-top: 63px;
	}


}

@media screen and (max-width: 767px) {

	table {
		border-bottom: none;
	}

	.step-img {
		margin: 0 auto 42px;
	}

	.phone-wrap {

		div {
			padding: 21px 22px 28px;
			margin: 11px auto 42px;
			max-width: 370px;

			a {
				font-size: 32px;
				letter-spacing: normal;
			}

			p {
				margin-top: 8px;
			}
		}
	}

	.mail-wrap {
		margin: 0 auto;
	}

	/* プライバシーポリシー */
	.privacy-wrap {
		margin-top: 32px;

		h3 {
			color: #4B5D92;
			font-size: 20px;
			text-align: center;
		}

		.privacy-content {
			padding: 24px 18px 32px;

			div {
				background: #F2FAFF;
				border-radius: 30px;
				padding: 24px 0 21px;
				text-align: center;
				margin: 20px auto 50px;
				max-width: 236px;

				b {
					color: #4B5D92;
					font-size: 18px;
					letter-spacing: .05em;
					line-height: 2;
				}

				p {
					font-size: 14px;
					margin-top: 10px;
					letter-spacing: .05em;
					line-height: 1.71;
				}

				span {
					display: block;
					font-weight: 500;
				}
			}
		}

		p {
			font-size: 16px;
			letter-spacing: 0;
			line-height: 2;
		}

		ol {
			counter-reset: counter;
			padding: 0;
			margin: 0;

			li {
				font-size: 16px;
				letter-spacing: .05em;
				line-height: 2;
				counter-increment: counter;
				display: flex;
				gap: 8px;
				margin-top: 10px;

				&::before {
					flex-shrink: 0;
					content: counter(counter);
					color: #fff;
					background: #4B5D92;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 5px;
					width: 28px;
					height: 28px;
				}
			}
		}

		h4 {
			color: #4B5D92;
			display: flex;
			align-items: center;
			gap: 12px;
			font-size: 18px;
			margin: 37px 0 11px;

			&:first-child {
				margin-top: 0;
			}

			span {
				background: #4B5D92;
				border-radius: 5px;
				color: #fff;
				font-size: 20px;
				text-align: center;
				width: 32px;
				height: 32px;
			}
		}
	}

	/* プライバシーポリシーについて */

	.privacy-consent {
		margin-top: 33px;
		text-align: center;

		h3 {
			flex-direction: column;
			gap: 9px;

		}

		p {
			text-align: start;
			margin: 16px auto 15px;
		}

	}

	.contact-inner {
		.button-white {
			margin-top: 32px;
		}
	}
}