@charset "utf-8";
::placeholder {
	color: var(--color--gray2);
}
#contact {
	width: 100%;
	height: auto;
}
	.contact__inner {
		width: 90%;
		max-width: 1000px;
		height: auto;
		padding: 50px 0 120px;
		margin: 0 auto;
	}
		.contact__wrap {
			width: 100%;
			max-width: 600px;
			height: auto;
			padding: 50px 0 0;
			margin: 0 auto;
		}
			.contact__support {
				width: 100%;
				height: auto;
				padding: 20px 30px;
				margin: 0 auto 15px;
				background-color: var(--color--lightgray2);
			}
				.contact__support__txt {
					width: 100%;
					height: auto;
					font-size: 14px;
					font-weight: 400;
					line-height: calc(23 / 14);
					letter-spacing: 0.05em;
					color: var(--color--black);
				}
			.contact__txt {
				width: 100%;
				height: auto;
				margin: 0 auto 48px;
				font-size: 14px;
				font-weight: 400;
				line-height: calc(23 / 14);
				letter-spacing: 0.05em;
				color: var(--color--black);
			}
				.contact__txt span {
					color: var(--color--red);
				}
			.contact__form_wrap {
				width: 100%;
				height: auto;
				padding: 0;
				margin: 0 auto;
			}
				.contact__form {
					width: 100%;
					height: auto;
				}
					.contact__form__list {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: stretch;
						gap: 20px;
						width: 100%;
						height: auto;
					}
						.contact__form__list__item {
							width: 100%;
							height: auto;
						}
							.contact__form__list__item__title {
								width: 100%;
								height: auto;
								margin: 0 auto 10px;
								font-size: 14px;
								font-weight: 400;
								line-height: calc(22 / 14);
								letter-spacing: 0.05em;
								color: var(--color--black);
							}
								.contact__form__list__item__title__required {
									display: inline-block;
									margin-left: 2px;
									color: var(--color--red);
								}
							.contact__form__list__item__content {
								width: 100%;
								height: auto;
							}
							.contact__form__list__item__content._2column {
								display: flex;
								justify-content: space-between;
								align-items: center;
								gap: 10px;
							}
							.contact__form__list__item__content._type_select {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								flex-wrap: wrap;
								gap: 15px;
							}
								.form_input {
									width: 100%;
									padding: 0 10px;
									background-color: var(--color--white);
									border: solid 1px var(--color--lightgray1);
									font-size: 14px;
									font-weight: 400;
									line-height: calc(21 / 14);
									letter-spacing: 0.05em;
									color: var(--color--black);
								}
								.form_input:focus {
									border: solid 1px var(--color--black);
								}
								.form_input._input_text {
									height: 50px;
								}
								.form_input._textarea {
									padding: 8px 10px;
									height: 180px;
								}
								.contact__form__list__item__content__radio {
									display: none;
								}
								.contact__form__list__item__content__label {
									width: auto;
									height: auto;
									padding: 0 0 0 24px;
									font-size: 14px;
									font-weight: 400;
									line-height: calc(22 / 14);
									letter-spacing: 0.05em;
									color: var(--color--black);
									cursor: pointer;
									position: relative;
								}
									.contact__form__list__item__content__label::before,
									.contact__form__list__item__content__label::after {
										content: '';
										display: block;
										border-radius: 50%;
										position: absolute;
										top: 12px;
										left: 8px;
										transform: translate(-50%, -50%);
									}
									.contact__form__list__item__content__label::before {
										width: 16px;
										height: 16px;
										border: solid 1px var(--color--black);
									}
									.contact__form__list__item__content__label::after {
										width: 10px;
										height: 10px;
										background-color: var(--color--black);
										opacity: 0;
										transition: .4s;
									}
									.contact__form__list__item__content__radio:checked + .contact__form__list__item__content__label::after {
										opacity: 1;
									}
					.contact__form__agree_wrap {
						width: 100%;
						height: auto;
						margin: 45px auto 0;
					}
						.contact__form__agree {
							display: flex;
							justify-content: center;
							align-items: center;
							gap: 10px;
							width: 100%;
							height: auto;
							cursor: pointer;
						}
							.contact__form__agree input {
								display: none;
							}
							.contact__form__agree__frame {
								width: 20px;
								height: 20px;
								border: solid 1px var(--color--black);
								position: relative;
							}
								.contact__form__agree__frame::before {
									content: '';
									display: block;
									width: 12px;
									height: 6px;
									border-left: solid 2px var(--color--black);
									border-bottom: solid 2px var(--color--black);
									position: absolute;
									top: 8px;
									left: 50%;
									transform: translate(-50%, -50%) rotate(-45deg);
									opacity: 0;
									transition: .4s;
								}
								input:checked + .contact__form__agree__frame::before {
									opacity: 1;	
								}
								.contact__form__agree__txt {
									font-size: 14px;
									font-weight: 400;
									line-height: calc(22 / 14);
									letter-spacing: 0.05em;
									color: var(--color--black);
								}
									.contact__form__agree__txt__link {
										color: var(--color--black);
										text-decoration: underline;
									}
									@media (any-hover: hover) {
									.contact__form__agree__txt__link:hover {
										text-decoration: none;
									}
								}
					.contact__form__btn_wrap {
						width: 100%;
						height: 70px;
						margin: 20px auto 0;
					}
						.contact__form__btn {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100%;
							background-color: var(--color--black);
							border: solid 1px var(--color--black);
							font-size: 14px;
							font-weight: 500;
							line-height: calc(21 / 14);
							letter-spacing: 0.05em;
							color: var(--color--white);
							cursor: pointer;
						}
					@media (any-hover: hover) {
						.contact__form__btn {
							transition: .4s;
						}
						.contact__form__btn:hover {
							background-color: var(--color--white);
							color: var(--color--black);
						}
					}
			.contact__conf_wrap {
				width: 100%;
				height: auto;
				padding: 0;
				margin: 0 auto;
			}
				.contact__conf__list {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: stretch;
					gap: 20px;
					width: 100%;
					height: auto;
					padding: 0;
					margin: 0 auto;
				}
					.contact__conf__list__item {
						width: 100%;
						height: auto;
						border-bottom: solid 1px var(--color--lightgray1);
					}
						.contact__conf__list__item__title {
							width: 100%;
							height: auto;
							font-size: 14px;
							font-weight: 400;
							line-height: calc(20 / 14);
							letter-spacing: 0.05em;
							color: var(--color--black);
						}
							.contact__conf__list__item__title__required {
								display: inline-block;
								margin-left: 2px;
								color: var(--color--red);
							}
						.contact__conf__list__item__content {
							width: 100%;
							height: auto;
							padding: 10px 0 20px;
						}
							.contact__conf__list__item__content__txt {
								width: 100%;
								height: auto;
								font-size: 14px;
								font-weight: 400;
								line-height: calc(20 / 14);
								letter-spacing: 0.05em;
								color: var(--color--gray2);
							}
			.contact__conf_btn_area {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 10px;
				width: 100%;
				height: auto;
				margin: 50px auto 0;
			}
				.contact__conf_btn_wrap {
					flex: 1;
					height: 70px;
				}
					.contact__conf_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						background-color: var(--color--black);
						border: solid 1px var(--color--black);
						font-size: 14px;
						font-weight: 500;
						line-height: calc(20 / 14);
						letter-spacing: 0.05em;
						color: var(--color--white);
						cursor: pointer;
					}
				@media (any-hover: hover) {
					.contact__conf_btn {
						transition: .4s;
					}
					.contact__conf_btn:hover {
						background-color: var(--color--white);
						color: var(--color--black);
					}
				}
				.contact__back_btn_wrap {
					width: 128px;
					height: 70px;
				}
					.contact__back_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						background-color: var(--color--white);
						border: solid 1px var(--color--black);
						font-size: 14px;
						font-weight: 500;
						line-height: calc(20 / 14);
						letter-spacing: 0.05em;
						color: var(--color--black);
						cursor: pointer;
					}
				@media (any-hover: hover) {
					.contact__back_btn {
						transition: .4s;
					}
					.contact__back_btn:hover {
						background-color: var(--color--gray2);
						border: solid 1px var(--color--gray2);
						color: var(--color--white);
					}
				}
			.thanks__support {
				width: 100%;
				height: auto;
				padding: 20px 30px;
				margin: 30px auto 0;
				background-color: var(--color--lightgray2);
			}
				.thanks__support__txt {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: auto;
					font-size: 14px;
					font-weight: 400;
					line-height: calc(23 / 14);
					letter-spacing: 0.05em;
					text-align: left;
					color: var(--color--black);
				}
			.thanks__btn_wrap {
				width: 172px;
				height: 44px;
				margin: 50px auto 0;
			}

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

}

/* Tablet ================================================== */
@media all and (max-width: 719px){
/* contact */
	.contact__inner {
		width: calc((400 / 440) * 100%);
		padding: 50px 0 80px;
	}
		.contact__wrap {
			max-width: initial;
			padding: 0;
		}
							.contact__form__list__item__title {
								margin: 0 auto 13px;
							}
			.contact__conf_btn_area {
				margin: 40px auto 0;
			}
			.thanks__support {
				margin: 25px auto 0;
			}
				.thanks__support__txt {
					display: block;
				}
}

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

}