.thanks-area {
	background-color: #fff;
	border: 1px solid #e5e7eb;
	text-align: center;
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.5s, transform 0.5s;
	&.-fadeIn {
		opacity: 1;
		transform: translateY(0);
	}
}
.thanks-title {
	display: grid;
	grid-template-rows: auto auto;
	color: #0088cc;
	font-weight: bold;
}
.thanks-title-icon {
	color: #2ecc71;
	font-size: 4rem;
}
.thanks-message {
	line-height: 2;
	font-size: 95%;
}
.thanks-email {
	color: #0088cc;
	font-weight: bold;
	text-decoration: underline;
	display: inline-block;
	margin-block-start: 0.5em;
}
.receiveNum-box {
	background-color: #fbfbfb;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	max-inline-size: 340px;
	margin-inline: auto;
	padding-block: 1.8rem;
}
.receiveNum-text {
	font-size: 90%;
	color: #6b7280;
}
.receiveNum-value {
	color: #0088cc;
	font-weight: bold;
	font-size: 150%;
	letter-spacing: 0.05em;
	margin-block-start: 1rem;
}
.thanks-top {
	display: block;
	inline-size: fit-content;
	margin-inline: auto;
	border-radius: 2em;
	padding: 1em 2.5em;
	background-color: #0088cc;
	color: #fff;
	font-size: 95%;
	font-weight: bold;
	transition: background-color 0.2s;
	&:hover {
		background-color: #006699;
	}
}
@media (width < 768px) {
	.thanks-area {
		margin-block-start: 1rem;
		padding-block-start: 2em;
		padding-block-end: 3em;
		padding-inline: 1em;
	}
	.thanks-title {
		gap: 1rem;
		font-size: 130%;
		line-height: 1.3;
	}
	.thanks-message {
		margin-block-start: 2rem;
	}
	.receiveNum-box {
		margin-block-start: 2rem;
	}
	.thanks-top {
		margin-block-start: 2.5rem;
	}
}
@media (width >= 768px) {
	.thanks-area {
		margin-block-start: 1.5rem;
		padding-block: 3em;
	}
	.thanks-title {
		gap: 2rem;
		font-size: 150%;
	}
	.thanks-message {
		margin-block-start: 2.5rem;
	}
	.receiveNum-box {
		margin-block-start: 3rem;
	}
	.thanks-top {
		margin-block-start: 3rem;
	}
}