@charset "utf-8";
::placeholder {
	color: var(--color--light_gray);
}
#page_top {
	background-image: url(../image/contact/contact-page_top@pc.webp);
}

#contact_page {
	width: 100%;
	height: auto;
}
	.contact_page__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.contact_page__top {
			width: 100%;
			height: auto;
			padding: 85px 0 56px;
			background-color: var(--color--beige);
		}
		._confirmation .contact_page__top {
			background-color: var(--color--white);
		}
		._thanks .contact_page__top {
			padding: 85px 0 100px;
		}
			.contact_page__top__inner {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90%;
				max-width: 800px;
				height: auto;
				margin: 0 auto;
			}
			._thanks .contact_page__top__inner {
				max-width: 700px;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
			}
				.contact_page__top__txt {
					font-size: 24px;
					font-weight: 600;
					line-height: 2;
					letter-spacing: 0.02em;
					color: var(--color--navy-3);
				}
				.contact_page__top__thanks__ttl {
					width: 100%;
					height: auto;
					margin-bottom: 46px;
					font-size: 24px;
					font-weight: 600;
					line-height: 1;
					letter-spacing: 0.02em;
					color: var(--color--navy-3);
				}
				.contact_page__top__thanks__txt {
					width: 100%;
					height: auto;
					font-size: 19px;
					font-weight: 600;
					line-height: 1.7;
					letter-spacing: 0.1em;
					color: var(--color--navy-3);
				}
				.contact_page__top__thanks__btn_wrap {
					width: 158px;
					height: auto;
					margin: 50px auto 0;
					font-size: 15px;
					font-weight: 600;
					line-height: 1.7;
					letter-spacing: 0.02em;
					text-align: center;
					color: var(--color--navy-3);
				}
		.contact_page__belt {
			width: 100%;
			height: auto;
			padding: 60px 0 70px;
			background-color: var(--color--navy-3);
		}
			.contact_page__belt__inner {
				width: 90%;
				max-width: 800px;
				height: auto;
				margin: 0 auto;
			}
				.contact_page__belt__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 36px;
				}
					.contact_page__belt__heading__txt {
						font-size: 28px;
						font-weight: 600;
						line-height: calc(33 / 28);
						letter-spacing: 0.02em;
						color: var(--color--white);
					}
						.contact_page__belt__heading__txt span {
							display: inline-block;
							font-weight: 500;
							margin-right: 0.4em;
							letter-spacing: 0.12em;
						}
						.contact__txt {
							margin: 0 auto 16px;
							font-size: 16px;
							font-weight: 600;
							line-height: calc(18 / 16);
							letter-spacing: 0.02em;
							color: var(--color--white);
						}
				.contact_page__belt__list {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					width: 100%;
					height: auto;
					margin: 0 auto;
				}
					.contact_page__belt__list__item {
						width: auto;
						height: auto;
					}
						.contact_page__belt__list__item__ttl {
							margin: 0 auto 12px;
							font-size: 12px;
							font-weight: 600;
							line-height: calc(14 / 12);
							letter-spacing: 0.02em;
							color: var(--color--white);
						}
						.contact_page__belt__list__item__tel_number {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin: 0 auto 12px;
							font-size: 36px;
							font-weight: 600;
							line-height: 1;
							letter-spacing: 0.02em;
							color: var(--color--white);
						}
							.contact_page__belt__list__item__tel_number dt {
								margin-right: 13px;
							}
								.contact_page__belt__list__item__tel_number dd a {
									display: inline-block;
									color: var(--color--white);
									position: relative;
								}
									.contact_page__belt__list__item__tel_number dd a::after {
										content: "";
										display: block;
										width: 100%;
										height: 1px;
										background-color: var(--color--navy-3);
										position: absolute;
										bottom: -3px;
										left: 0;
										opacity: 0;
										pointer-events: none;
									}
								@media (any-hover: hover) {
									.contact_page__belt__list__item__tel_number dd a::after {
										transition: .3s;
									}
									.contact_page__belt__list__item__tel_number dd a:hover::after {
										opacity: 1;
									}
								}
						.contact_page__belt__list__item__txt {
							font-size: 12px;
							font-weight: 600;
							line-height: calc(14 / 12);
							letter-spacing: 0.02em;
							color: var(--color--white);
						}
		.contact_page__form {
			width: 100%;
			height: auto;
			padding: 155px 0 165px;
			background-color: var(--color--beige);
		}
		._confirmation .contact_page__form {
			padding: 88px 0 150px;
		}
			.contact_page__form__inner {
				width: 90%;
				max-width: 784px;
				height: auto;
				margin: 0 auto;
			}
			._confirmation .contact_page__form__inner {
				max-width: 880px;
			}
				.contact_page__form__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 56px;
				}
				._confirmation .contact_page__form__heading {
					max-width: 784px;
					margin: 0 auto 94px;
				}
					.contact_page__form__heading__txt {
						font-size: 28px;
						font-weight: 600;
						line-height: calc(33 / 28);
						letter-spacing: 0.02em;
						color: var(--color--navy-3);
					}
						.contact_page__form__heading__txt span {
							display: inline-block;
							font-weight: 500;
							margin-right: 0.4em;
							letter-spacing: 0.12em;
						}
				.contact_page__form__wrap {
					width: 100%;
					max-width: 565px;
					height: auto;
					margin: 0 auto;
				}
					.contact_page__form__wrap from {
						width: 100%;
						height: auto;
					}
						.form__wrap {
							width: 100%;
							height: auto;
							margin: 0 auto 36px;
						}
							.form__list {
								display: flex;
								flex-direction: column;
								gap: 30px;
								width: 100%;
								height: auto;
							}
								.form__list__item {
									width: 100%;
									height: auto;
								}
									.form__list__item_heading {
										width: 100%;
										height: auto;
										margin: 0 auto 6px;
									}
										.form__list__item_heading label {
											display: block;
											font-size: 15px;
											font-weight: 600;
											line-height: 1;
											letter-spacing: 0.1em;
											color: var(--color--navy-3);
										}
									.form__list__item_inputbox {
										width: 100%;
										height: auto;
										padding-left: 64px;
										margin: 0 auto;
										position: relative;
									}
									.form__list__item_inputbox._flex {
										display: flex;
										justify-content: space-between;
										align-items: center;
										gap: 15px;
									}
										.form__list__item_inputbox .mandatory {
											display: flex;
											justify-content: center;
											align-items: center;
											width: 64px;
											height: 30px;
											padding-bottom: 2px;
											background-color: #c70b31;
											font-size: 15px;
											font-weight: 600;
											line-height: 1;
											letter-spacing: 0.1em;
											text-align: center;
											color: var(--color--white);
											position: absolute;
											top: 0;
											left: 0;
										}
										.optional {
											display: flex;
											justify-content: center;
											align-items: center;
											width: 64px;
											height: 30px;
											padding-bottom: 2px;
											background-color: var(--color--navy-3);
											font-size: 15px;
											font-weight: 600;
											line-height: 1;
											letter-spacing: 0.1em;
											text-align: center;
											color: var(--color--white);
											position: absolute;
											top: 0;
											left: 0;
										}
										.form__list__item_inputbox > input {
											display: block;
											width: 100%;
											height: 30px;
											padding: 0 12px;
											border: solid 1px #999999;
											background-color: var(--color--white);
											font-size: 15px;
											font-weight: 600;
											line-height: 1;
											letter-spacing: 0.1em;
											color: var(--color--navy-3);
										}
										.form__list__item_inputbox._flex > input {
											flex: 1;
										}
										.form__list__item_inputbox__checkbox_wrap {
											display: grid;
											grid-template-columns: repeat(3, 1fr);
											gap: 8px;
											width: 100%;
											height: auto;
										}
											.form__list__item_inputbox__checkbox_wrap .checkbox_item {
												padding-left: 8px;
											}
											.form__list__item_inputbox__checkbox_wrap .checkbox_item:nth-of-type(8) {
												grid-column: 2 / 4;
											}
											.form__list__item_inputbox__checkbox_wrap .checkbox_item:nth-of-type(9) {
												grid-column: 1 / 4;
											}
												.form__list__item_inputbox__checkbox_wrap .checkbox_item input {
													display: none;
												}
												.form__list__item_inputbox__checkbox_wrap .checkbox_item label {
													display: flex;
													justify-content: flex-start;
													align-items: center;
													font-size: 15px;
													font-weight: 500;
													line-height: 30px;
													letter-spacing: 0.1em;
													color: var(--color--navy-3);
													cursor: pointer;
												}
												.form__list__item_inputbox__checkbox_wrap .checkbox_item .checkbox_item__frame {
													display: block;
													width: 16px;
													height: 16px;
													border: 1px solid var(--color--navy-3);
													background-color: var(--color--white);
													margin-right: 6px;
													position: relative;
												}
													.form__list__item_inputbox__checkbox_wrap .checkbox_item .checkbox_item__frame::before {
														content: '';
														display: block;
														width: 15px;
														height: 7px;
														border-left: 2px solid var(--color--navy-3);
														border-bottom: 2px solid var(--color--navy-3);
														transform: rotate(-45deg);
														position: absolute;
														top: 3px;
														left: 9px;
														transform: translate(-50%, -50%) rotate(-45deg);
														opacity: 0;
														transition: .3s;
													}
													.form__list__item_inputbox__checkbox_wrap .checkbox_item input:checked + label .checkbox_item__frame::before {
														opacity: 1;
													}
									._textarea .form__list__item_inputbox {
										padding-left: 0;
									}
										.form__list__item_inputbox textarea {
											display: block;
											width: 100%;
											height: 210px;
											padding: 6px 12px;
											background-color: var(--color--white);
											border: solid 1px #999999;
											font-size: 15px;
											font-weight: 600;
											line-height: 1.8;
											letter-spacing: 0.1em;
											color: var(--color--navy-3);
										}
				.contact_page__confirmation__wrap {
					width: 100%;
					height: auto;
				}
					.contact_page__confirmation__wrap form {
						width: 100%;
						height: auto;
						margin: 0 auto;
					}
						.confirmation__wrap {
							width: 100%;
							height: auto;
							padding: 52px 0 100px;
							margin: 0 auto 42px;
							border-radius: 38px;
							background-color: var(--color--white);
						}
							.confirmation__list {
								display: flex;
								flex-direction: column;
								gap: 46px;
								width: 90%;
								max-width: 695px;
								height: auto;
								margin: 0 auto;
							}
								.confirmation__list__item {
									display: flex;
									justify-content: space-between;
									align-items: flex-start;
									width: 100%;
									height: auto;
								}
									.confirmation__list__item_heading {
										width: 200px;
										height: auto;
									}
										.confirmation__list__item_heading label {
											display: block;
											font-size: 15px;
											font-weight: 600;
											line-height: 1.8;
											letter-spacing: 0.1em;
											color: var(--color--navy-3);
										}
									.confirmation__list__item_result {
										width: calc(100% - 200px);
										height: auto;
										margin: 0 auto;
										position: relative;
									}
										.confirmation__txt {
											width: 100%;
											height: auto;
											font-size: 15px;
											font-weight: 600;
											line-height: 1.8;
											letter-spacing: 0.1em;
											color: var(--color--navy-3);
										}
										.confirmation__list__item_result ul {
											font-size: 15px;
											font-weight: 600;
											line-height: 1.8;
											letter-spacing: 0.1em;
											color: var(--color--navy-3);
										}
											.confirmation__list__item_result ul li {
												padding-left: 1em;
												position: relative;
											}
												.confirmation__list__item_result ul li::before {
													content: '・';
													display: block;
													position: absolute;
													left: 0;
												}

						.form__agree {
							width: 100%;
							height: auto;
							margin: 0 auto 42px;
						}
							.form__agree input {
								display: none;
							}
							.form__agree__label {
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 15px;
								font-weight: 400;
								line-height: calc(18 / 15);
								letter-spacing: 0.1em;
								color: var(--color--navy-3);
								cursor: pointer;
							}
								.form__agree__label__frame {
									display: block;
									width: 16px;
									height: 16px;
									border: 1px solid var(--color--navy-3);
									background-color: var(--color--white);
									margin-right: 6px;
									position: relative;
								}
									.form__agree__label__frame::before {
										content: '';
										display: block;
										width: 15px;
										height: 7px;
										border-left: 2px solid #c70b31;
										border-bottom: 2px solid #c70b31;
										transform: rotate(-45deg);
										position: absolute;
										top: 3px;
										left: 9px;
										transform: translate(-50%, -50%) rotate(-45deg);
										opacity: 0;
										transition: .3s;
									}
									.form__agree input:checked + .form__agree__label__frame::before {
										opacity: 1;
									}
								.form__agree__label a {
									color: var(--color--navy-3);
									position: relative;
								}
									.form__agree__label a::after {
										content: "";
										display: block;
										width: 100%;
										height: 1px;
										background-color: var(--color--navy-3);
										position: absolute;
										bottom: -1px;
										left: 0;
										opacity: 1;
										pointer-events: none;
									}
								@media (any-hover: hover) {
									.form__agree__label a::after {
										transition: .3s;
									}
									.form__agree__label a:hover::after {
										opacity: 0;
									}
								}
						.form__submit__container {
							width: 100%;
							height: auto;
							margin: 0 auto;
						}
							.form__submit__btn {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 142px;
								height: 30px;
								padding-bottom: 2px;
								margin: 0 auto;
								border: solid 1px #c70b31;
								background-color: #c70b31;
								font-size: 15px;
								font-weight: 500;
								line-height: 1;
								letter-spacing: 0.1em;
								color: var(--color--white);
								cursor: pointer;
							}
							.form__submit__btn._disabled {
								border: solid 1px var(--color--light_gray);
								background-color: var(--color--light_gray);
								pointer-events: none;
								transition: 0s;
							}
						@media (any-hover: hover) {
							.form__submit__btn {
								transition: .3s;
							}
							.form__submit__btn:hover {
								background-color: var(--color--white);
								color: #c70b31;
							}
						}
						.form__back {
							width: 100%;
							height: auto;
							margin: 16px auto 0;
							font-size: 15px;
							font-weight: 500;
							line-height: 1.8;
							letter-spacing: 0.1em;
							text-align: center;
						}
							.form__back__txt {
								position: relative;
							}
								.form__back__txt::after {
									content: '';
									display: block;
									width: 100%;
									height: 1px;
									background-color: var(--color--navy-4);
									position: absolute;
									bottom: -1px;
									left: 0;
									opacity: 1;
								}
							@media (any-hover: hover) {
								.form__back__txt::after {
									transition: .3s;
								}
								.form__back__txt:hover::after {
									opacity: 0;
								}
							}
								.form__back__txt input {
									padding: 0;
									color: var(--color--navy-4);
									cursor: pointer;
									position: relative;
								}

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

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#page_top {
	background-image: url(../image/contact/contact-page_top@sp.webp);
}

/* contact_page */
		.contact_page__top {
			padding: 55px 0 30px;
		}
		._thanks .contact_page__top {
			padding: 55px 0 40px;
		}
			.contact_page__top__inner {
				flex-direction: column;
				width: calc((314 / 390) * 100vw);
				max-width: initial;
			}
			._thanks .contact_page__top__inner {
				max-width: initial;
			}
				.contact_page__top__txt {
					font-size: 20px;
					font-weight: 700;
					line-height: 1.8;
					letter-spacing: 0.05em;
				}
				.contact_page__top__thanks__ttl {
					margin-bottom: 30px;
					font-size: 20px;
					font-weight: 700;
					letter-spacing: 0.05em;
					white-space: nowrap;
				}
				.contact_page__top__thanks__txt {
					font-size: 18px;
					font-weight: 700;
					line-height: 2.3;
					letter-spacing: 0.05em;
				}
		.contact_page__belt {
			width: 100%;
			height: auto;
			padding: 60px 0 70px;
			background-color: var(--color--navy-3);
		}
			.contact_page__belt__inner {
				width: 90%;
				max-width: 800px;
				height: auto;
				margin: 0 auto;
			}
				.contact_page__belt__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 28px;
				}
					#contact_page .section__heading{
						margin: 0 auto 24px;
					}
					#contact_page .contact__txt{
						font-size: 14px;
						color: var(--color--white);
					}
					.section__heading__en.__contact {
						font-size: 28px;
						font-weight: 700;
						line-height: calc(30 / 28);
						letter-spacing: 0.02em;
						color: var(--color--white);
					}
					.section__heading__ja.__contact {
						display: inline-block;
						font-size: 12px;
						font-weight: 500;
						margin-right: 0.4em;
						letter-spacing: 0.12em;
						line-height: 1;
						color: var(--color--white);
					}
				.contact_page__belt__list {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
					width: 100%;
					height: auto;
					row-gap: 50px;
					margin: 34px auto 0;
				}
					.contact_page__belt__list__item {
						width: auto;
						height: auto;
					}
						.contact_page__belt__list__item__ttl {
							margin: 0 auto 5px;
							font-size: 12px;
							font-weight: 600;
							line-height: calc(14 / 12);
							letter-spacing: 0.02em;
							color: var(--color--white);
						}
						.contact_page__belt__list__item__tel_number {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin: 0 auto 12px;
							font-size: 36px;
							font-weight: 600;
							line-height: 1;
							letter-spacing: 0.02em;
							color: var(--color--white);
						}
							.contact_page__belt__list__item__tel_number dt {
								margin-right: 13px;
								font-size: 32px;
							}
								.contact_page__belt__list__item__tel_number dd a {
									display: inline-block;
									font-size: 32px;
									color: var(--color--white);
									position: relative;
								}
									.contact_page__belt__list__item__tel_number dd a::after {
										content: "";
										display: block;
										width: 100%;
										height: 1px;
										background-color: var(--color--navy-3);
										position: absolute;
										bottom: -3px;
										left: 0;
										opacity: 0;
										pointer-events: none;
									}
								@media (any-hover: hover) {
									.contact_page__belt__list__item__tel_number dd a::after {
										transition: .3s;
									}
									.contact_page__belt__list__item__tel_number dd a:hover::after {
										opacity: 1;
									}
								}
						.contact_page__belt__list__item__txt {
							line-height: calc(18 / 12);
						}
		.contact_page__form {
			padding: 45px 0 60px;
			background-color: var(--color--white);
		}
		._confirmation .contact_page__form {
			padding: 45px 0 60px;
		}
			.contact_page__form__inner {
				width: 100%;
				max-width: initial;
			}
			._confirmation .contact_page__form__inner {
				max-width: initial;
			}
				.contact_page__form__heading {
					margin: 0 auto 60px;
				}
				._confirmation .contact_page__form__heading {
					max-width: initial;
					margin: 0 auto 60px;
				}
					.contact_page__form__heading__txt {
						font-size: 20px;
						font-weight: 700;
						line-height: 1.8;
						letter-spacing: 0.05em;
						text-align: center;
					}
				.contact_page__form__wrap {
					max-width: initial;
				}
						.form__wrap {
							width: calc((358 / 390) * 100%);
							margin: 0 auto 32px;
						}
							.form__list {
								gap: 48px;
							}
									.form__list__item_heading {
										padding-left: 52px;
										margin: 0 auto 4px;
									}
									._checkbox .form__list__item_heading,
									._textarea .form__list__item_heading {
										padding-left: 0;
									}
										.form__list__item_heading label {
											font-size: 14px;
											letter-spacing: 0.16em;
										}
									.form__list__item_inputbox {
										padding-left: 0;
									}
									.form__list__item_inputbox._flex {
										flex-direction: column;
										justify-content: flex-start;
										align-items: stretch;
										gap: 20px;
									}
										.form__list__item_inputbox .mandatory {
											width: 40px;
											height: 20px;
											padding-bottom: 1px;
											font-size: 12px;
											font-weight: 500;
											top: 0;
											left: 0;
											transform: translateY(-100%);
										}
										._checkbox .mandatory {
											top: -3px;
										}
										.optional {
											width: 40px;
											height: 20px;
											padding-bottom: 1px;
											font-size: 12px;
											font-weight: 500;
											top: 0;
											left: 0;
											transform: translateY(-100%);
										}
										.form__list__item_inputbox > input {
											height: 48px;
											padding: 0 16px;
											font-size: 14px;
										}
										.form__list__item_inputbox._flex > input {
											flex: initial;
											width: 100%;
										}
										.form__list__item_inputbox__checkbox_wrap {
											margin: 34px auto 0;
											grid-template-columns: repeat(2, 1fr);
											gap: 22px 0px;
										}
											.form__list__item_inputbox__checkbox_wrap .checkbox_item {
												padding-left: 8px;
											}
											.form__list__item_inputbox__checkbox_wrap .checkbox_item:nth-of-type(7) {
												grid-column: 1 / 3;
											}
											.form__list__item_inputbox__checkbox_wrap .checkbox_item:nth-of-type(8) {
												grid-column: 1 / 3;
											}
											.form__list__item_inputbox__checkbox_wrap .checkbox_item:nth-of-type(9) {
												grid-column: 1 / 3;
											}
												.form__list__item_inputbox__checkbox_wrap .checkbox_item input {
													display: none;
												}
												.form__list__item_inputbox__checkbox_wrap .checkbox_item label {
													letter-spacing: 0.05em;
													white-space: nowrap;
												}
												.form__list__item_inputbox__checkbox_wrap .checkbox_item .checkbox_item__frame {
													flex-shrink: 0;
												}
										.form__list__item_inputbox textarea {
											height: 135px;
											letter-spacing: 0.05em;
										}
				.contact_page__confirmation__wrap {
					padding: 74px 0 60px;
					background-color: var(--color--beige);
				}
						.confirmation__wrap {
							width: calc((358 / 390) * 100vw);
							margin: 0 auto 66px;
							border-radius: 20px;
							background-color: var(--color--white);
						}
							.confirmation__list {
								width: calc((292 / 358) * 100%);
								max-width: initial;
							}
								.confirmation__list__item {
									flex-direction: column;
									justify-content: flex-start;
								}
									.confirmation__list__item_heading {
										width: 100%;
									}
										.confirmation__list__item_heading label {
											display: block;
											font-size: 16px;
											font-weight: 600;
										}
									.confirmation__list__item_result {
										width: 100%;
									}
										.confirmation__txt {
											letter-spacing: 0.05em;
										}

						.form__agree {
							margin: 0 auto 28px;
						}
							.form__submit__btn {
								width: 280px;
								height: 50px;
								font-size: 16px;
							}
}

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

}