@charset "utf-8";
#contact_deco {
	width: 100%;
	height: 100vh;
	overflow: clip;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
}
	.contact_deco__images {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
	}
		.contact_deco__images__item {
			height: auto;
			position: absolute;
		}
		.contact_deco__images__item._01 {
			width: 149px;
			top: -158px;
			right: 571px;
		}
		.contact_deco__images__item._02 {
			width: 140px;
			top: -59px;
			right: 394px;
		}
		.contact_deco__images__item._03 {
			width: 140px;
			top: -39px;
			right: 185px;
		}
		.contact_deco__images__item._04 {
			width: 140px;
			top: -78px;
			right: -7px;
		}
		.contact_deco__images__item._05 {
			width: 140px;
			top: 163px;
			right: -60px;
		}

#contact {
	width: 100%;
	height: auto;
	padding: 177px 0 150px;
	background-color: var(--c-blue);
	position: relative;
	z-index: 3;
	overflow-x: clip;
}
	#contact::before,
	#thanks::before {
		content: '';
		display: block;
		width: calc((1740 / var(--vw)) * 100vw);
		height: 100%;
		background-color: var(--c-bg-gray);
		border-radius: 0 0 50% 50% / 0 0 525px 525px;
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 0;
		transform: translateX(-50%);
	}
	#contact::after,
	#thanks::after {
		content: '';
		display: block;
		width: calc((1740 / var(--vw)) * 100vw);
		height: 100%;
		background-image: url(../image/bg@pc.webp);
		background-size: 100% auto;
		background-position: top center;
		background-repeat: repeat;
		border-radius: 0 0 50% 50% / 0 0 525px 525px;
		mix-blend-mode: multiply;
		opacity: .3;
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 1;
		transform: translateX(-50%);
		pointer-events: none;
	}
	.contact__inner {
		width: calc((1032 / var(--vw)) * 100%);
		height: auto;
		margin: 0 auto;
		position: relative;
		z-index: 3;
	}
		.contact__heading {
			width: 100%;
			height: auto;
			margin: 0 auto 70px;
		}
			.contact__heading__main_text {
				width: 250px;
				height: auto;
				margin: 0 auto 10px 0;
			}
				.contact__heading__main_text svg {
					fill: var(--c-black);
				}
			.contact__heading__sub_text {
				color: var(--c-black);
			}
		.contact__form_wrap {
			width: calc((700 / 1032) * 100%);
			height: auto;
			margin: 0 auto 0 0;
		}
			.contact_form {
				width: 100%;
				height: auto;
			}
				.contact_form__list {
					display: flex;
					flex-direction: column;
					gap: 35px;
					width: 100%;
					height: auto;
				}
					.contact_form__row {
						width: 100%;
						height: auto;
					}
						.contact_form__head {
							display: flex;
							justify-content: flex-start;
							align-items: flex-end;
							width: 100%;
							height: auto;
							padding-left: 17px;
							margin: 0 auto 11px;
							font-size: 14px;
							font-weight: 500;
							line-height: 1.8;
							letter-spacing: 0.05em;
							position: relative;
						}
							.contact_form__head::before {
								content: '';
								display: block;
								width: 5px;
								height: 5px;
								border-radius: 9999px;
								background-color: var(--c-light-gray);
								position: absolute;
								top: 11px;
								left: 0;
							}
							._required .contact_form__head::before {
								background-color: var(--c-main-blue);
							}
							.contact_form__head__ja {
								display: block;
								width: fit-content;
								height: auto;
								margin-right: 10px;
								font-size: 14px;
								font-weight: 500;
								line-height: 1.8;
								letter-spacing: 0.05em;
								color: var(--c-black);
							}
							.contact_form__head__en {
								display: block;
								width: fit-content;
								height: auto;
								font-size: 12px;
								font-weight: 300;
								line-height: 1.5;
								letter-spacing: 0.05em;
								color: var(--c-black);
								position: relative;
								top: -2px;
							}
							.contact_form__head__required {
								margin-left: 13px;
								font-size: 12px;
								font-weight: 500;
								line-height: 1.8;
								letter-spacing: 0.05em;
								color: var(--c-main-blue);
							}
							.contact_form__head__note {
								margin: 0 0 0 auto;
								font-size: 12px;
								font-weight: 400;
								line-height: 1.8;
								letter-spacing: 0.05em;
								color: var(--c-black);
							}
						.contact_form__input,
						.contact_form__textarea {
							display: block;
							width: 100%;
							padding: 0 23px;
							border-radius: 5px;
							background-color: var(--c-white);
							border: solid 1px var(--c-black);
							font-size: 16px;
							font-weight: 500;
							line-height: 1.8;
							letter-spacing: 0.05em;
							color: var(--c-black);
						}
						.contact_form__input {
							height: 70px;
						}
						.contact_form__textarea {
							height: 200px;
							padding: 19px 23px;
							resize: vertical;
						}
						.contact_form__input::placeholder,
						.contact_form__textarea::placeholder {
							color: var(--c-light-gray);
						}
				.contact_form__privacy {
					width: 100%;
					height: auto;
					margin-top: 20px;
					font-size: 14px;
					font-weight: 700;
					line-height: 1.6;
					letter-spacing: 0.05em;
					color: var(--c-black);
				}
					.contact_form__privacy a {
						color: var(--c-main-blue);
						text-decoration: underline;
					}
				@media (any-hover: hover) {
					.contact_form__privacy a:hover {
						text-decoration: none;
					}
				}
				.contact_form__submit {
					margin: 90px 0 0 auto;
				}
					.contact_form__submit .cmn_btn {
						padding: 0;
						cursor: pointer;
					}
					.contact_form__submit_input {
						width: 100%;
						height: 100%;
						margin: 0;
						padding: 0;
						border: none;
						outline: none;
						background-color: transparent;
						opacity: 0;
						cursor: pointer;
						position: absolute;
						inset: 0;
					}
			.contact__form_notice {
				width: 100%;
				height: auto;
				font-size: 14px;
				line-height: 1.6;
				letter-spacing: 0.05em;
				color: var(--c-black);
			}
		.contact__character_area {
			width: calc((332 / 1032) * 100%);
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
		}
			.contact__character_wrap {
				width: 100%;
				height: auto;
				position: sticky;
				top: 252px;
				right: 0;
				z-index: 2;
			}
				.contact__character {
					position: absolute;
					top: 0;
					right: max(calc((71 / 332) * 100%), calc((71 / var(--vw)) * 100vw));
					transform: translateX(50%);
				}
					.contact__character__balloon {
						display: flex;
						justify-content: center;
						align-items: center;
						width: fit-content;
						height: auto;
						padding: 22px 30px 26px;
						border-radius: 9999px;
						border: solid 1px var(--c-black);
						position: relative;
					}
						.contact__character__balloon__text {
							font-size: 12px;
							font-weight: 700;
							line-height: 1.5;
							letter-spacing: 0.1em;
							text-align: center;
							white-space: nowrap;
							color: var(--c-black);
						}
						.contact__character__balloon__line {
							display: block;
							width: 1px;
							height: 15px;
							background-color: var(--c-black);
							position: absolute;
							bottom: -7.5px;
							left: 50%;
							transform: translateX(-50%);
						}
					.contact__character__image {
						width: 107px;
						height: auto;
						margin: 21px auto 0;
					}

/* CF7 出力クラスの上書き */
#contact .wpcf7 {
	width: 100%;
	height: auto;
}
	#contact .wpcf7-form-control-wrap {
		display: block;
		width: 100%;
	}
	/* 個別フィールドエラー */
	#contact .wpcf7-not-valid-tip {
		margin-top: 8px;
		font-family: "Roboto", sans-serif;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0.05em;
		color: #CC2727;
	}
	/* 不備のある入力欄は枠を赤に */
	#contact .wpcf7-form-control.wpcf7-not-valid {
		border-color: #CC2727;
	}
	/* フォーム全体メッセージ: 通常は非表示、エラー時のみ表示（[response] タグで送信ボタン直上に配置） */
	#contact .wpcf7-response-output {
		display: none;
		width: 100%;
		height: auto;
		margin: 24px 0 -40px;
		padding: 14px 20px;
		border-radius: 5px;
		border: solid 1px #CC2727;
		background-color: #FBEDED;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0.05em;
		text-align: center;
		color: #CC2727;
	}
	#contact .wpcf7-form.invalid .wpcf7-response-output,
	#contact .wpcf7-form.failed .wpcf7-response-output,
	#contact .wpcf7-form.spam .wpcf7-response-output {
		display: block;
	}
	/* CF7 デフォルトのスピナーは非表示 */
	#contact .wpcf7-spinner {
		display: none;
	}

/* 送信中マスク: submit 押下〜完了ページ遷移までを覆って flicker を隠す */
.contact_form_mask {
	width: 100%;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	position: fixed;
	inset: 0;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease-out, visibility .2s ease-out;
}
.contact_form_mask._show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
	.contact_form_mask__inner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
		.contact_form_mask__contents {
			display: flex;
			justify-content: center;
			align-items: center;
			width: auto;
			height: auto;
			padding-right: max(calc((10 / var(--vw)) * 100vw), 10px);
		}
			.contact_form_mask__character {
				width: max(calc((40 / var(--vw)) * 100vw), 40px);
				height: auto;
				margin-right: max(calc((20 / var(--vw)) * 100vw), 20px);
			}
			.contact_form_mask__text {
				font-size: max(calc((18 / var(--vw)) * 100vw), 18px);
				font-weight: 700;
				letter-spacing: 0.05em;
				color: var(--c-main-blue);
			}

/* thanks */
#thanks {
	width: 100%;
	height: auto;
	padding: 240px 0 150px;
	background-color: var(--c-blue);
	position: relative;
	z-index: 3;
	overflow-x: clip;
}
	.thanks__inner {
		width: calc((1120 / var(--vw)) * 100%);
		height: auto;
		margin: 0 auto;
		position: relative;
		z-index: 3;
	}
		.thanks__heading {
			width: 522px;
			height: auto;
			margin: 0 auto;
		}
			.thanks__heading svg {
				fill: var(--c-black);
			}
		.thanks__text {
			width: 100%;
			height: auto;
			margin: 52px auto 107px;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.8;
			letter-spacing: 0.05em;
			text-align: center;
			color: var(--c-black);
		}
		.thanks__character {
			width: 105px;
			height: auto;
			margin: 0 auto;
			position: relative;
		}
			.thanks__character__balloon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 149px;
				height: 57px;
				position: absolute;
				top: -39px;
				left: 126px;
				z-index: 2;
				opacity: 0;
				transform: scale(0.6);
				transform-origin: 42.5px 65px;
			}
			._run .thanks__character__balloon {
				animation: balloon-appear 1.5s linear forwards;
			}
			@keyframes balloon-appear {
				0%   { opacity: 0; transform: scale(0.6); }
				5%   { transform: scale(0.8); }
				10%  { transform: scale(1); }
				14%  { transform: scale(1.089); }
				17%  { transform: scale(1.11); }
				22%  { opacity: 1; transform: scale(1.083); }
				27%  { transform: scale(1.028); }
				33%  { transform: scale(0.982); }
				37%  { transform: scale(0.973); }
				44%  { transform: scale(0.985); }
				50%  { transform: scale(1); }
				58%  { transform: scale(1.007); }
				100% { opacity: 1; transform: scale(1); }
			}
				.thanks__character__balloon__bg {
					display: block;
					width: 149px;
					height: 65px;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 0;
					transform: scaleX(-1);
				}
				.thanks__character__balloon__text {
					font-size: 14px;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: var(--c-black);
					position: relative;
					z-index: 1;
				}
			.thanks__character__image {
				width: 105px;
				height: auto;
			}
		.thanks__btn {
			margin: 58px auto 0;
		}
			/* 矢印を左に配置（Figma 実測位置・左向きに反転） */
			.thanks__btn .cmn_btn__arrow {
				right: auto;
				left: 19px;
			}
				.thanks__btn .cmn_btn__arrow svg {
					transform: scaleX(-1);
				}
		.curve_character {
			width: 64px;
			height: auto;
			position: absolute;
			bottom: -24px;
			left: 50%;
			z-index: 3;
			transform: translateX(-50%);
		}

/* ================================================== PC */
@media all and (min-width: 1025px) {

}

@media all and (max-width: 1440px) {
	.contact__inner {
		width: 90%;
		max-width: 1032px;
	}
	.thanks__inner {
		width: 90%;
		max-width: 1120px;
	}
}


/* ================================================== SP */
@media all and (max-width: 1024px) {
/* CONTACT_DECO */
		.contact_deco__images__item._01 {
			width: calc((74.39 / var(--vw)) * 100vw);
			top: calc((-84 / var(--vw)) * 100vw);
			right: calc((308.59 / var(--vw)) * 100vw);
		}
		.contact_deco__images__item._02 {
			width: calc((69.87 / var(--vw)) * 100vw);
			top: calc((-34.54 / var(--vw)) * 100vw);
			right: calc((220.35 / var(--vw)) * 100vw);
		}
		.contact_deco__images__item._03 {
			width: calc((69.76 / var(--vw)) * 100vw);
			top: calc((-24.66 / var(--vw)) * 100vw);
			right: calc((116.17 / var(--vw)) * 100vw);
		}
		.contact_deco__images__item._04 {
			width: calc((69.83 / var(--vw)) * 100vw);
			top: calc((-44.1 / var(--vw)) * 100vw);
			right: calc((20.42 / var(--vw)) * 100vw);
		}
		.contact_deco__images__item._05 {
			width: calc((69.78 / var(--vw)) * 100vw);
			top: calc((76.03 / var(--vw)) * 100vw);
			right: calc((-6 / var(--vw)) * 100vw);
		}

/* CONTACT */
#contact {
	width: 100%;
	height: auto;
	padding: 177px 0 150px;
	background-color: var(--c-blue);
	position: relative;
	z-index: 3;
	overflow-x: clip;
}
	#contact::before,
	#contact::after,
	#thanks::before,
	#thanks::after {
		width: calc((487 / var(--vw)) * 100vw);
		height: calc((100% - (32 / var(--vw)) * 100vw));
		border-radius: 0 0 50% 50% / 0 0 calc((166 / var(--vw)) * 100vw) calc((166 / var(--vw)) * 100vw);
	}
	.contact__inner {
		display: flex;
		flex-direction: column;
		width: calc((334 / var(--vw)) * 100%);
	}
		.contact__heading {
			margin: 0 auto calc((57 / var(--vw)) * 100vw);
			order: 1;
		}
			.contact__heading__main_text {
				width: calc((185 / var(--vw)) * 100vw);
				margin: 0 auto calc((10 / var(--vw)) * 100vw);
			}
			.contact__heading__sub_text {
				text-align: center;
			}
		.contact__form_wrap {
			width: 100%;
			margin: 0 auto;
			order: 3;
		}
				.contact_form__list {
					gap: calc((35 / var(--vw)) * 100vw);
				}
						.contact_form__head {
							padding-left: calc((17 / var(--vw)) * 100vw);
							margin: 0 auto calc((11 / var(--vw)) * 100vw);
							font-size: calc((14 / var(--vw)) * 100vw);
						}
							.contact_form__head::before {
								width: calc((5 / var(--vw)) * 100vw);
								height: calc((5 / var(--vw)) * 100vw);
								top: calc((11 / var(--vw)) * 100vw);
							}
							.contact_form__head__ja {
								margin-right: calc((10 / var(--vw)) * 100vw);
								font-size: calc((14 / var(--vw)) * 100vw);
							}
							.contact_form__head__en {
								font-size: calc((12 / var(--vw)) * 100vw);
								top: calc((-2 / var(--vw)) * 100vw);
							}
							.contact_form__head__required {
								margin-left: calc((13 / var(--vw)) * 100vw);
								font-size: calc((12 / var(--vw)) * 100vw);
							}
							.contact_form__head__note {
								font-size: calc((12 / var(--vw)) * 100vw);
							}
						.contact_form__input,
						.contact_form__textarea {
							padding: 0 calc((18 / var(--vw)) * 100vw);
							border-radius: calc((5 / var(--vw)) * 100vw);
							border: solid calc((1 / var(--vw)) * 100vw) var(--c-black);
							font-size: calc((16 / var(--vw)) * 100vw);
						}
						.contact_form__input {
							height: calc((70 / var(--vw)) * 100vw);
						}
						.contact_form__textarea {
							height: calc((200 / var(--vw)) * 100vw);
							padding: calc((14 / var(--vw)) * 100vw) calc((18 / var(--vw)) * 100vw);
						}
				.contact_form__privacy {

					margin-top: 20px;
					font-size: 14px;
					font-weight: 700;
					line-height: 1.6;
					letter-spacing: 0.05em;
					color: var(--c-black);
				}
					.contact_form__privacy a {
						color: var(--c-main-blue);
						text-decoration: underline;
					}
				@media (any-hover: hover) {
					.contact_form__privacy a:hover {
						text-decoration: none;
					}
				}
				.contact_form__submit {
					margin: 90px auto 0;
				}
					.contact_form__submit .cmn_btn {
						padding: 0;
						cursor: pointer;
					}
					.contact_form__submit_input {
						width: 100%;
						height: 100%;
						margin: 0;
						padding: 0;
						border: none;
						outline: none;
						background-color: transparent;
						opacity: 0;
						cursor: pointer;
						position: absolute;
						inset: 0;
					}
			.contact__form_notice {
				width: 100%;
				height: auto;
				font-size: 14px;
				line-height: 1.6;
				letter-spacing: 0.05em;
				color: var(--c-black);
			}
		.contact__character_area {
			width: 100%;
			margin: 0 auto calc((50 / var(--vw)) * 100vw);
			position: initial;
			order: 2;
		}
			.contact__character_wrap {
				position: initial;
			}
				.contact__character {
					width: fit-content;
					height: auto;
					margin: 0 auto;
					position: relative;
					top: 0;
					right: auto;
					left: auto;
					transform: initial;
				}
					.contact__character__balloon {
						width: calc((274 / var(--vw)) * 100vw);
						padding: calc((25 / var(--vw)) * 100vw) 0 calc((24 / var(--vw)) * 100vw);
						border: solid calc((1 / var(--vw)) * 100vw) var(--c-black);
					}
						.contact__character__balloon__text {
							font-size: calc((12 / var(--vw)) * 100vw);
						}
						.contact__character__balloon__line {
							display: none;
						}
					.contact__character__image {
						width: calc((52 / var(--vw)) * 100vw);
						height: auto;
						margin: 0;
						position: absolute;
						top: calc((-18 / var(--vw)) * 100vw);
						right: calc((17 / var(--vw)) * 100vw);
					}

/* CF7 出力クラスの上書き */
	/* 個別フィールドエラー */
	#contact .wpcf7-not-valid-tip {
		margin-top: calc((8 / var(--vw)) * 100vw);
		font-family: "Roboto", sans-serif;
		font-size: calc((12 / var(--vw)) * 100vw);
	}
	/* フォーム全体メッセージ: 通常は非表示、エラー時のみ表示（[response] タグで送信ボタン直上に配置） */
	#contact .wpcf7-response-output {
		width: 100%;
		margin: calc((24 / var(--vw)) * 100vw) 0 calc((-40 / var(--vw)) * 100vw);
		padding: calc((14 / var(--vw)) * 100vw) calc((20 / var(--vw)) * 100vw);
		border-radius: calc((5 / var(--vw)) * 100vw);
		border: solid calc((1 / var(--vw)) * 100vw) #CC2727;
		font-size: calc((14 / var(--vw)) * 100vw);
	}

/* thanks */
#thanks {
	padding: calc((182 / var(--vw)) * 100vw) 0 calc((110 / var(--vw)) * 100vw);
}
	.thanks__inner {
		width: calc((334 / var(--vw)) * 100%);
	}
		.thanks__heading {
			width: calc((192.2 / var(--vw)) * 100vw);
		}
		.thanks__text {
			width: calc((286 / 334) * 100%);
			margin: calc((40 / var(--vw)) * 100vw) auto calc((125 / var(--vw)) * 100vw);
			font-size: calc((14 / var(--vw)) * 100vw);
			text-align: left;
		}
		.thanks__character {
			width: calc((82 / var(--vw)) * 100vw);
		}
			.thanks__character__balloon {
				width: calc((149 / var(--vw)) * 100vw);
				height: calc((57 / var(--vw)) * 100vw);
				top: calc((-85 / var(--vw)) * 100vw);
				left: calc((-33 / var(--vw)) * 100vw);
				transform-origin: calc((42.5 / var(--vw)) * 100vw) calc((65 / var(--vw)) * 100vw);
			}
				.thanks__character__balloon__bg {
					width: calc((149 / var(--vw)) * 100vw);
					height: calc((65 / var(--vw)) * 100vw);
				}
				.thanks__character__balloon__text {
					font-size: calc((14 / var(--vw)) * 100vw);
				}
			.thanks__character__image {
				width: 100%;
			}
		.thanks__btn {
			margin: calc((60 / var(--vw)) * 100vw) auto 0;
		}
			.thanks__btn .cmn_btn__arrow {
				left: calc((17 / var(--vw)) * 100vw);
			}
		.curve_character {
			width: calc((64 / var(--vw)) * 100vw);
			bottom: calc((10 / var(--vw)) * 100vw);
		}

}

@media all and (max-width: 768px) {

}