@charset "utf-8";
#contact_form {
	width: 100%;
	height: auto;
	padding: 0 0 190px;
}
	.contact_form__inner {
		width: 83%;
		max-width: 1126px;
		height: auto;
		margin: 0 auto;
	}
		.contact_form__top {
			width: 100%;
			height: auto;
			padding: 144px 0 0;
			margin: 0 auto 80px;
		}
			.page_top__heading {
				width: 100%;
				margin: 0 auto 20px;
			}
			.page_top__txt {
				width: 100%;
				height: auto;
				font-size: 20px;
				font-weight: 700;
				line-height: calc(29 / 20);
				letter-spacing: 0em;
				color: var(--color--black);
				opacity: 0;
				transform: translate(-10px,0%);
				transition: .8s;
				transition-delay: .5s;
			}
			.loaded .page_top__txt {
				opacity: 1;
				transform: translate(0px,0%);
			}
		.contact_form__contents {
			width: 100%;
			height: auto;
			opacity: 0;
			transform: translate(0%,10px);
			transition: .8s;
			transition-delay: .62s;
		}
		.loaded .contact_form__contents {
			opacity: 1;
			transform: translate(0%,0px);
		}
			.contact_form__contents form {
				width: 100%;
				height: auto;
			}
				.form__wrap {
					width: 100%;
					height: auto;
					margin: 0 auto 92px;
				}
					.form__list {
						width: 100%;
						height: auto;
					}
						.form__item {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							width: 100%;
							height: auto;
						}
						.form__item:not(:last-of-type) {
							margin-bottom: 80px;
						}
							.form__item_heading {
								width: calc((426 / 1126) * 100%);
								min-width: 240px;
								height: auto;
							}
								.form__item_heading p {
									display: flex;
									justify-content: space-between;
									align-items: flex-start;
									width: 100%;
									height: auto;
									font-size: 16px;
									font-weight: 700;
									line-height: calc(24 / 16);
									letter-spacing: 0em;
									color: var(--color--black);
								}
									.mandatory {
										display: flex;
										justify-content: center;
										align-items: center;
										width: 80px;
										height: 24px;
										padding-bottom: 1px;
										border-radius: 4px;
										background-color: #FF8884;
										font-size: 12px;
										font-weight: 400;
										line-height: calc(17 / 12);
										letter-spacing: 0em;
										color: var(--color--white);
									}
							.form__item_inputbox {
								flex: 1;
								height: auto;
								padding-left: 20px;
								position: relative;
							}
								.form__item_inputbox__radiobox_wrap {
									width: 100%;
									height: auto;
								}
									.form__item_inputbox__radiobox_wrap .wpcf7-radio {
										display: flex;
										justify-content: flex-start;
										align-items: flex-start;
										flex-wrap: wrap;
										gap: 16px;
										width: 100%;
										height: auto;
										margin: 0 auto;
									}
									.form__item_inputbox__radiobox_wrap p label {
										display: block;
										width: auto;
										height: auto;
										position: relative;
									}
									.wpcf7-list-item {
										margin: 0 !important;
									}
										.form__item_inputbox__radiobox_wrap p label input[name="contact-type"] {
											width: 0;
											height: 0;
											position: absolute;
											top: 0;
											left: 0;
											pointer-events: none;
											opacity: 0;
										}
										.form__item_inputbox__radiobox_wrap .wpcf7-form-control-wrap label span {
											display: block;
											padding-left: 20px;
											position: relative;
											font-size: 16px;
											font-weight: 400;
											line-height: calc(24 / 16);
											letter-spacing: 0em;
											color: var(--color--black);
											cursor: pointer;
										}
											.form__item_inputbox__radiobox_wrap .wpcf7-form-control-wrap label span::before,
											.form__item_inputbox__radiobox_wrap .wpcf7-form-control-wrap label span::after {
												content: '';
												display: block;
												border-radius: 9999px;
												position: absolute;
												top: 13px;
												left: 8px;
												transform: translate(-50%,-50%);
											}
											.form__item_inputbox__radiobox_wrap .wpcf7-form-control-wrap label span::before {
												width: 16px;
												height: 16px;
												background-color: var(--color--white);
												border: solid 1px var(--color--gray);
												z-index: 1;
											}
											.form__item_inputbox__radiobox_wrap .wpcf7-form-control-wrap label span::after {
												width: 8px;
												height: 8px;
												background-color: #FF8884;
												z-index: 2;
												opacity: 0;
												transition: .4s;
											}
											.form__item_inputbox__radiobox_wrap .wpcf7-form-control-wrap label input[name="contact-type"]:checked + span::after {
												opacity: 1;
											}
								.form__item_inputbox input[type="text"],
								.form__item_inputbox input[type="email"],
								.form__item_inputbox textarea {
									width: 100%;
									height: auto;
									background-color: var(--color--white);
									border: solid 1px var(--color--white);
									font-size: 16px;
									font-weight: 400;
									line-height: calc(24 / 16);
									letter-spacing: 0em;
								}
								.form__item_inputbox input[type="text"],
								.form__item_inputbox input[type="email"] {
									padding: 7px 23px;
									border-radius: 9999px;
								}
								.form__item_inputbox textarea {
									min-height: 300px;
									padding: 12px 23px;
									border-radius: 20px;
								}
								.form__item_inputbox__note {
									width: 100%;
									height: auto;
									margin: 14px auto 0;
									font-size: 14px;
									font-weight: 400;
									line-height: calc(24 / 14);
									letter-spacing: 0em;
									color: var(--color--black);
								}
								.form__item_inputbox__error_txt,
								.wpcf7-not-valid-tip {
									display: none;
									width: 100%;
									height: auto;
									margin: 14px auto 0;
									font-size: 16px !important;
									font-weight: 400 !important;
									line-height: calc(24 / 16);
									letter-spacing: 0em;
									color: var(--color--red) !important;
								}
				.policy__container {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: auto;
					margin: 0 auto 40px;
				}
					.policy__wrap {
						width: auto;
						height: auto;
						position: relative;
					}
						.policy__wrap input[name="contact-privacy_policy"] {
							position: absolute;
							top: 0;
							left: 0;
							pointer-events: none;
							opacity: 0;
						}
						.policy__wrap label span {
							padding-left: 20px;
							font-size: 16px;
							font-weight: 400;
							line-height: calc(24 / 16);
							letter-spacing: 0em;
							color: var(--color--black);
							position: relative;
							cursor: pointer;
						}
							.policy__wrap label span::before,
							.policy__wrap label span::after {
								content: '';
								display: block;
								position: absolute;
							}
							.policy__wrap label span::before {
								width: 16px;
								height: 16px;
								border-radius: 2px;
								background-color: var(--color--white);
								border: solid 1px var(--color--gray);
								top: 5px;
								left: 0;
								z-index: 1;
							}
							.policy__wrap label span::after {
								width: 14px;
								height: 8px;
								border-bottom: solid 2px var(--color--red);
								border-left: solid 2px var(--color--red);
								top: 6px;
								left: 3px;
								transform: rotate(-45deg);
								z-index: 2;
								opacity: 0;
								transition: .4s;
							}
							.policy__wrap label input[name="contact-privacy_policy"]:checked + span::after {
								opacity: 1;
							}
							.policy__wrap label span a {
								color: var(--color--red);
								position: relative;
							}
								.policy__wrap label span a::after {
									content: '';
									display: block;
									width: 100%;
									height: 1px;
									background-color: var(--color--red);
									position: absolute;
									bottom: 1px;
									left: 0;
									opacity: 1;
								}
							@media (any-hover: hover) {
								.policy__wrap label span a::after {
									transition: .4s;
								}
								.policy__wrap label span a:hover::after {
									opacity: 0;
								}
							}
				.submit__container {
					width: 100%;
					height: auto;
				}
					.contact__btn_wrap {
						width: 200px;
						height: 52px;
						margin: 0 auto;
					}
						.contact__btn_wrap p,
						input.wpcf7-submit {
							width: 100%;
							height: 100%;
						}
						input.wpcf7-submit {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							padding-bottom: 1px;
							border-radius: 9999px;
							background-color: var(--color--black);
							border-color: #434343;
							border: solid 2px;
							font-size: 20px;
							font-weight: 700;
							line-height: 1;
							letter-spacing: 0em;
							color: var(--color--white);
							position: relative;
							cursor: pointer;
						}
					@media (any-hover: hover) {
						input.wpcf7-submit:hover {
							background-color: var(--color--white);
							color: var(--color--black);
							transition: background .3s , color .3s , border .3s;
						}
					}
						input.wpcf7-submit:disabled {
							pointer-events: none;
							border-color: var(--color--gray);
							background-color: var(--color--gray);
						}
						.wpcf7-spinner {
							display: none !important;
						}
			.contact_form__thanks_wrap {
				width: 100%;
				margin: 0 auto;
			}
				.thanks__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 20px;
					font-size: 28px;
					font-weight: 700;
					line-height: calc(40 / 28);
					letter-spacing: 0em;
					color: var(--color--black);
				}
				.thanks__txt {
					width: 100%;
					height: auto;
					font-size: 16px;
					font-weight: 400;
					line-height: calc(32 / 18);
					letter-spacing: 0em;
					color: var(--color--black);
				}
				.thanks__btn_area {
					width: 100%;
					height: auto;
					margin: 60px auto 0;
				}
					.thanks__btn_wrap {
						width: 280px;
						height: 52px;
						margin: 0 auto;
					}

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

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
/* contact_form */
#contact_form {
	padding: 0 0 140px;
}
	.contact_form__inner {
		width: calc((314 / 390) * 100%);
	}
		.contact_form__top {
			display: block;
			padding: 105px 0 0;
			margin: 0 auto 60px;
		}
			.page_top__heading {
				margin: 0 auto 8px;
			}
			.page_top__txt {
				font-size: 16px;
				line-height: calc(24 / 16);
			}
		.contact_form__contents {
			display: block;
		}
			.contact_form__contents__heading {
				width: 100%;
				margin: 0 auto 62px;
			}
				.contact_form__contents__heading__txt {
					font-size: 16px;
					line-height: calc(24 / 16);
				}
				.form__wrap {
					margin: 0 auto 60px;
				}
						.form__item {
							display: block;
						}
						.form__item:not(:last-of-type) {
							margin-bottom: 60px;
						}
							.form__item_heading {
								width: 100%;
								min-width: initial;
								margin: 0 auto 16px;
							}
								.form__item_heading p {
									justify-content: flex-start;
									align-items: center;
									width: 100%;
								}
									.mandatory {
										width: 32px;
										margin-left: 8px;
									}
							.form__item_inputbox {
								flex: initial;
								width: 100%;
								padding-left: 0;
							}
									.form__item_inputbox__radiobox_wrap .wpcf7-radio {
										flex-direction: column;
									}
										.wpcf7-form-control-wrap label {
											padding-left: 21px;
										}
								.form__item_inputbox input[type="text"],
								.form__item_inputbox input[type="email"],
								.form__item_inputbox textarea {
									padding: 7px 16px;
								}
								.form__item_inputbox textarea {
									min-height: 145px;
								}
								.form__item_inputbox__note {
									line-height: calc(28 / 16);
								}
				.thanks__heading {
					margin: 0 auto 16px;
					font-size: 20px;
					line-height: calc(29 / 20);
				}
				.thanks__txt {
					font-size: 14px;
					line-height: calc(28 / 16);
				}
}

/* SP ================================================== */
@media all and (max-width: 575px){

}