@charset "utf-8";

body {
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
}

#contents {
	width: 100%;
	padding-bottom: 0;
}

.l-main *{
	font-family: 'Noto Sans JP', sans-serif;
	color: #474747;
}

.l-main {
	padding-block: 20px 60px;
	width: 100%;
	background-color: #FFFFFF;
}
	.page__inner {
		width: 1140px;
		margin: 0 auto;
	}
		.freeform-header {
			margin: 0 0 39px;
		}
			.page__headline {
				font-size: 30px;
				color: var(--font-color-blue);
				text-align: center;
				margin-bottom: 20px;
			}
		.page__form-wrapper,
		.page__confirm-wrapper {
			border: 1px solid #EEEEEE;
			border-radius: 25px;
			padding: 59px 59px 59px;
		}
			.page__headbkn {
				display: flex;
				align-items: center;
				gap: 31px;
				position: relative;
				margin-bottom: 41px;
			}
				.page__headbkn-img {
					width: 258px;
					height: 172px;
					flex-shrink: 0;
				}
					.page__headbkn-img img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						vertical-align: bottom;
					}
					.page__headbkn-name {
						font-size: 20px;
						font-weight: 600;
						line-height: 1.6;
						margin-bottom: 13px;
					}
					.page__headbkn-text {
						font-size: 18px;
						display: flex;
						gap: 7px;
					}
					.page__headbkn-text:not(:last-child) {
						margin-bottom: 6px;
					}
						.page__headbkn-label {
							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 80px;
							height: 26px;
							border: 1px solid #E5E5E5;
							font-size: 16px;
						}

		.page__form-title {
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 19px;
		}
		.page__form-block,
		.page__confirm-block {
			display: flex;
			align-items: flex-start;
			gap: 52px;
		}
		.page__confirm-block--viewing,
		.page__confirm-block--name,
		.page__confirm-block--tel,
		.page__confirm-block--mail {
			align-items: center;
		}
		.page__form-block:not(:last-child),
		.page__confirm-block:not(:last-child) {
			border-bottom: 1px solid #E5E5E5;
			padding-bottom: 21px;
			margin-bottom: 20px;
		}
		.page__form-block--viewing {
			display: block;
		}
		.page__form-block--name,
		.page__form-block--tel,
		.page__form-block--mail {
			align-items: center;
		}
		.page__form-block--viewing .page__form-block-inner,
		.page__form-block--number,
		.page__form-block--residence {
			display: flex;
			align-items: center;
			gap: 52px;
		}
		.page__confirm-block--viewing .page__confirm-block-inner {
			align-items: center;
		}
		.page__form-block--number .page__form-block-inner,
		.page__confirm-block--number .page__confirm-block-inner {
			display: flex;
			flex-direction: column;
			gap: 7px;
		}
		.page__form-block-inner:not(:last-child) {
			margin-bottom: 11px;
		}
		.page__form-block--request {
			flex-direction: column;
			gap: 21px;
		}
			.viewing-wrap {
				display: flex;
				align-items: flex-start;
				gap: 52px;
			}
			.page__form-term {
				font-size: 16px;
				font-weight: 500;
				display: flex;
				align-items: center;
				gap: 8px;
				width: 220px;
			}
			.page__form-term--request {
				padding-top: 8px;
			}
				.page__form-definition {
					position: relative;
				}
				.page__form-definition textarea {
					width: 748px;
					height: 130px;
					border: 1px solid #D8D8D8;
					border-radius: 4px;
					font-size: 16px;
					padding: 6px 9px;
					vertical-align: bottom;
				}
					.page__form-definition input::placeholder,
					.page__form-definition textarea::placeholder {
						color: #9B9B9B;
					}
					.page__form-required {
						font-size: 14px;
						background-color: #EE2424;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40px;
						height: 22px;
					}
					.page__form-optional {
						font-size: 14px;
						background-color: #EEEEEE;
						color: #9B9B9B;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40px;
						height: 22px;
					}
				.page__form-definition--request {
					display: flex;
					flex-direction: column;
					gap: 0;
					position: relative;
					border: 1px solid #D8D8D8;
					border-radius: 4px;
				}
				.page__form-definition--viewing {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					gap: 12px;
				}
					.page__form-definition--request .requestGroup-1formError {
						position: absolute;
						top: -28px;
						right: 240px;
					}
					.page__form-definition--number .formError,
					.page__form-definition--residence .formError {
						position: absolute;
						right: auto;
						left: -8px;
						top: -23px;
					}
					.l-main .formError .formErrorContent {
						font-size: 16px;
						white-space: nowrap;
					}
					.page__form-definition--request label {
						display: flex;
						align-items: center;
						gap: 8px;
						width: 367px;
						height: 43px;
						font-size: 16px;
						padding: 0 13px;
					}
					.page__form-definition--request label:not(:last-child) {
						border-bottom: 1px solid #D8D8D8;
					}
					.page__form-definition--request br {
						display: none;
					}
					.page__form-definition--request input[type="checkbox"] {
						border: 1px solid #DCDCDC;
						appearance: none;
						width: 17px !important;
						height: 17px;
						border-radius: 2px;
						margin: 0;
					}
					.page__form-definition--request input[type="checkbox"]:checked {
						background: url(../images/icn_check.webp) no-repeat center / contain;
						border: none;
					}
				.page__form-day,
				.page__form-time {
					position: relative;
				}
					.page__form-day input[type="text"],
					.page__form-time select,
					.page__confirm-day input[type="text"],
					.page__confirm-time select {
						width: 178px;
						height: 44px;
						border: 1px solid #D8D8D8;
						border-radius: 4px;
						font-size: 16px;
						font-weight: 400;
						color: #474747;
						padding: 0 13px;
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						background-color: #fff;
					}
						.page__form-day input[type="text"]::placeholder {
							color: #474747;
						}
						.page__form-day::after,
						.page__form-time::after {
							content: '';
							display: block;
							width: 9px;
							height: 9px;
							border: 2px solid var(--background-color-blue);
							border-left: 0;
							border-bottom: 0;
							box-sizing: border-box;
							transform: translateY(-25%) rotate(135deg);
							position: absolute;
							bottom: 16px;
							right: 12px;
						}
				.page__form-definition--number,
				.page__confirm-definition--number {
					display: flex;
					align-items: center;
					gap: 10px;
				}
					.page__form-definition--number-inline,
					.page__form-definition--residence-inline {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						gap: 8px 16px;
					}
					.page__form-definition--number-inline label,
					.page__form-definition--residence-inline label {
						display: inline-flex;
						align-items: center;
						gap: 4px;
					}
				.page__form-viewing-label {
					font-size: 14px;
					font-weight: 600;
					margin: 12px 0 4px;
				}
				.page__form-viewing-label:first-of-type {
					margin-top: 0;
				}
				.page__form-definition--residence label {
					display: inline-flex;
					align-items: center;
					gap: 4px;
				}
					.page__form-definition-title {
						margin-bottom: 3px;
					}
					.page__form-definition--number .page__form-definition-title,
					.page__confirm-definition--number .page__confirm-definition-title {
						font-size: 16px;
						margin-bottom: 0;
						width: 50px;
					}
					.page__form-definition-block {
						display: flex;
						flex-wrap: wrap;
						gap: 6px 9px;
					}
					.page__form-definition--number .page__form-definition-block,
					.page__form-definition--residence .page__form-definition-block {
						gap: 0;
						border: 1px solid #D8D8D8;
						border-radius: 4px;
						overflow: hidden;
					}
					.page__form-definition--number label,
					.page__form-definition--residence label {
						display: flex;
						align-items: center;
						gap: 4px;
						width: 122px;
						height: 43px;
						font-size: 16px;
						padding: 0 11px;
					}
					.page__form-definition--number label:not(:last-child),
					.page__form-definition--residence label:not(:last-child) {
						border-right: 1px solid #D8D8D8;
					}
						.page__form-definition-block br {
							display: none;
						}
						.page__form-definition input[type="radio"] {
							appearance: none;
							width: 17px !important;
							height: 17px;
							border: 1px solid #DCDCDC;
							border-radius: 50%;
						}
						.page__form-definition input[type="radio"]:checked {
							background: url(../images/icn_radio.webp) no-repeat center / contain;
							border: none;
						}
				.page__form-definition--name input,
				.page__form-definition--tel input,
				.page__form-definition--mail input {
					border: 1px solid #D8D8D8;
					display: block;
					width: 370px;
					height: 43px;
					border-radius: 4px;
					font-size: 16px;
					padding: 0 9px;
				}
					.page__form-definition--name input::placeholder,
					.page__form-definition--tel input::placeholder,
					.page__form-definition--mail input::placeholder {
						color: #9B9B9B;
					}
			.page__form-note,
			.page__form-note a {
				font-size: 14px;
				line-height: 1.6;
				text-align: center;
			}
			.page__form-note a {
				border-bottom: 1px solid #474747;
			}
			.page__form-note {
				margin-block: 40px 28px;
			}
			button.fix_contact {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 355px;
				height: 70px;
				background-color: #FFFFFF !important;
				border-radius: 8px;
				font-size: 18px;
				font-weight: 600;
				color: var(--font-color-blue);
				border: 1px solid var(--background-color-blue);
				box-shadow: none;
				transition: 0.4s;
				opacity: 1;
			}
			button.fix_contact:hover {
				background-color: var(--background-color-blue) !important;
				color: #FFFFFF !important;
			}
			.page__form-submit span,
			button.page__confirm-submit {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 355px;
				height: 70px;
				background-color: var(--background-color-blue);
				border-radius: 8px;
				font-size: 18px;
				font-weight: 600;
				color: #FFFFFF;
				border: 1px solid var(--background-color-blue);
				margin: 0 auto;
				transition: 0.4s;
				opacity: 1;
				cursor: pointer;
			}
			.page__form-submit span:hover,
			button.page__confirm-submit:hover {
				background-color: #fff;
				border: 1px solid var(--background-color-blue);
				color: var(--font-color-blue);
			}

		.page__confirm {
			margin-bottom: 40px;
		}
			.page__confirm-title {
				font-size: 16px;
				font-weight: 700;
				margin-bottom: 20px;
			}
				.page__confirm-term {
					font-size: 16px;
					font-weight: 500;
					width: 220px;
					flex-shrink: 0;
				}
				.page__confirm-definition--message {
					width: 100%;
					border-radius: 4px;
					font-size: 16px;
					padding: 9px;
				}
						.page__confirm-definition input::placeholder,
						.page__confirm-definition textarea::placeholder {
							color: #9B9B9B;
						}
						.page__confirm-required {
							font-size: 10px;
							background-color: #EE2424;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 32px;
							height: 16px;
						}
						.page__confirm-optional {
							font-size: 10px;
							background-color: #EEEEEE;
							color: #9B9B9B;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 32px;
							height: 16px;
						}
					.page__confirm-definition--request {
						width: 100%;
						display: flex;
						flex-direction: column;
						gap: 6px;
					}
						.page__confirm-definition--request label {
							display: flex;
							align-items: center;
							gap: 8px;
							width: 100%;
							height: 40px;
							font-size: 12px;
							padding: 0 7px;
							border-radius: 4px;
						}
						.page__confirm-definition--request br {
							display: none;
						}
						.page__confirm-definition--request input {
							border: 1px solid #DCDCDC;
						}
						.page__confirm-definition--request li {
							display: flex;
							align-items: center;
							gap: 8px;
							width: 367px;
							height: 43px;
							font-size: 16px;
							padding: 0 7px;
							border-radius: 4px;
						}
					.page__confirm-definition--viewing {
						display: flex;
						justify-content: space-between;
						gap: 12px;
					}
						.page__confirm-day,
						.page__confirm-time {
							display: flex;
							align-items: center;
							height: 40px;
							border-radius: 4px;
							font-size: 16px;
						}
						.page__confirm-definition-title {
							margin-bottom: 3px;
						}
						.page__confirm-definition-block {
							display: flex;
							flex-wrap: wrap;
							gap: 6px 9px;
						}
							.page__confirm-definition--number .page__confirm-definition-block {
								display: flex;
								align-items: center;
								gap: 8px;
								width: 163px;
								height: 43px;
								border-radius: 4px;
								font-size: 16px;
								padding: 0 9px;
							}
							.page__confirm-definition-block br {
								display: none;
							}
					.page__confirm-definition {
						font-size: 16px;
					}
					.page__confirm-definition--name,
					.page__confirm-definition--tel,
					.page__confirm-definition--mail {
						display: flex;
						align-items: center;
						width: 370px;
						height: 43px;
						border-radius: 4px;
						font-size: 16px;
					}
				.page__confirm-note,
				.page__confirm-note a {
					font-size: 12px;
					line-height: 1.6;
				}
				.page__confirm-note {
					margin-block: 40px 9px;
				}
				.page__confirm-submit-wrapper {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 12px;
				}

#contact-form {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
}
	.page__thankyou-post {
		text-align: center;
	}
		.page__thankyou-return a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 50px;
			background-color: var(--background-color-blue);
			border-radius: 8px;
			font-size: 15px;
			font-weight: 600;
			color: #FFFFFF;
		}

.formErrorArrow {
	display: none;
}

/*-------------------------------------------------------------------------
完了画面
-------------------------------------------------------------------------*/
.thankyou-page {
	padding: 20px 0 60px;
}

.thankyou-page .page__header {
	margin: 0 0 30px;
}

.thankyou-page .page__headline {
    font-size: 30px;
    color: var(--font-color-blue);
    text-align: center;
    margin-bottom: 20px;
}

.thankyou-page .completion {
	margin-bottom: 40px;
}

.thankyou-page .completion__text {
    line-height: 1.5;
    font-size: 16px;
	text-align: center;
}

.thankyou-page .completion__text:not(:last-child) {
	margin-bottom: 10px;
}

.thankyou-page .companyInformation {
	background-color: #FAFAFA;
    padding-block: 26px;
    width: 600px;
    margin: 0 auto 30px;
	text-align: center;
}

.thankyou-page .companyInformation * {
	line-height: 1.5;
    font-size: 16px;
}

.thankyou-page .ui-section-btn {
	border-radius: 3px;
    line-height: 1;
	border: 1px solid var(--background-color-blue);
    color: var(--font-color-blue);
}

.md-form-flow {
	margin-block: 0 13px;
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
	justify-content: center;
	pointer-events: none;
}
.md-form-flow__items {
	display: flex;
	gap: 2px;
	align-items: center;
	flex-direction: column;
	position: relative;
	counter-increment: num;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 400;
	color: #C2C2C2;
	width: fit-content;
	position: relative;
}
.md-form-flow__items.is-active {
	color: #C2C2C2;
}
.md-form-flow__items.is-checked {
	color: #C2C2C2;
}
.md-form-flow__items:before {
	content: counter(num);
	width: 22px;
	height: 22px;
	background-color: #B0BEC5;
	border-radius: 50%;
	display        : flex;
	align-items    : center;
	justify-content: center;
	font-size  : 12px;
	font-weight: bold;
	color      : #fff;
}
.md-form-flow__items:before {
	font-size: 16px;
	font-weight: 700;
	width: 34px;
	height: 34px;
	color: #BEBEBE;
	background-color: #F5F5F5;
}
.md-form-flow__items.is-active:before {
	color: #fff;
	background-color: var(--background-color-blue);
	border: none;
	padding-bottom: 3px;
}
.md-form-flow__items.is-checked:before {
	color: #FFFFFF;
	background-color: #BEBEBE;
}
.md-form-flow__items:not(:last-child):after {
	content: "";
	background-color: #B0BEC5;
	position: absolute;
	left: 100%;
	top: 16px;
	width: 20px;
	height: 1px;
	background-color: #F5F5F5;
}