@charset "UTF-8";

/*******************************************************************************
	デフォルトセッティング
--------------------------------------------------------------------------------
	適応：お問い合わせ
*******************************************************************************/
.contact_container {
	display: block;
	margin: 0 auto;
	background-color: #eef2f6;
}

.contact_title {
	color: #1d3969;
	font-weight: 900;
	font-size: clamp(1.625rem, -1.238rem + 5.96vw, 2.688rem);
	text-align: center;
	letter-spacing: 0.01em;
}


.contact_form-content {
	max-width: 950px;
	margin: 0 auto;
	border-radius: 10px;
	background-color: #ffffff;
}

/* ---- CF7 ---- */
.contact_table-container {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

.contact_table-body {
	display: table-row-group;
}

.contact_table-row {
	display: table-row;
}


.contact_table-th {
	font-weight: 500;
	font-size: clamp(0.938rem, 0.432rem + 1.05vw, 1.125rem);
}

.contact_table-status {
	font-weight: normal;
	font-size: clamp(0.813rem, 0.644rem + 0.35vw, 0.875rem);
}

.contact_table-label {
	display: flex;
	column-gap: 10px;
	align-items: baseline;
}

.contact_table-required {
	color: #d80c18;
}

.contact_table-td input[type="text"] , .contact_table-td input[type="tel"] , .contact_table-td input[type="email"] , .contact_table-td textarea {
	display: flex;
	width: 100%;
	height: 60px;
	padding: 0.2em 0.5em;
	border: 1px solid #d5d5d5;
	border-radius: 5px;
	color: var(--c-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
	align-items: center;
	transition: all 0.3s;
}

.contact_table-td input:focus , .contact_table-tdtextarea:focus {
	border-color: var(--c-navy);
	box-shadow: 0 0 0 3px rgba(8, 64, 138, 0.12);
	outline: none;
}

.contact_table-td textarea {
	min-height: 120px;
	resize: vertical;
}

/* ラジオ・チェックボックスは縦並び */
.wpcf7-radio {
	display: flex;
	font-size: 16px;
	column-gap: 10px;
	flex-wrap: wrap;

	row-gap: 10px;
}

.table_flex-column .wpcf7-radio {
	flex-direction: column;
}

.wpcf7-list-item {
	margin: 0 !important;
}

.contact_table-privacy {
	margin-bottom: 30px;
	font-size: 15px;
}

.contact_table-privacy label {
	display: flex;
	column-gap: 5px;
	align-items: baseline;
}
.contact_table-privacy a {
	color: #373ef9;
}

.cf7_privacy a {
	color: var(--c-blue);
	text-decoration: underline;
}

@media screen and (min-width: 768px) {
	.contact_container {
		width: 100%;
		padding: 55px 0 120px;
	}

	.contact_title {
		margin-bottom: 55px;
	}

	.contact_form-content {
		width: 95%;
		padding: 60px 3.9063%;
	}

	.contact_table-cell {
		display: table-cell;
	}

	.contact_table-th {
		width: clamp(13.438rem, 7.543rem + 12.28vw, 15.625rem);
		padding-top: 15px;
	}

	.contact_table-td {
		width: calc(100% - clamp(13.438rem, 7.543rem + 12.28vw, 15.625rem));
	}

	.contact_table-th , .contact_table-td {
		padding-bottom: 30px;
	}

	.contact_table-td input[type="text"] , .contact_table-td input[type="tel"] , .contact_table-td input[type="email"] , .contact_table-td textarea {
		height: 60px;
	}
}

@media screen and (max-width: 767px) {
	.contact_container {
		width: calc(100% - 30px);
		padding: 30px 15px 50px;
		border-radius: 10px;
	}

	.contact_title {
		margin-bottom: 20px;
	}

	.contact_form-content {
		width: 100%;
		padding: 30px 15px 40px;
	}

	.contact_table-cell {
		display: block;
	}

	.contact_table-th , .contact_table-td {
		width: 100%;
	}

	.contact_table-th {
		margin-bottom: 5px;
	}

	.contact_table-td {
		width: 100%;
		margin-bottom: 15px;
	}

	.contact_table-td input[type="text"] , .contact_table-td input[type="tel"] , .contact_table-td input[type="email"] , .contact_table-td textarea {
		height: 50px;
	}
}






.cf7_submit {
	display: flex;
	text-align: center;
	column-gap: clamp(0.625rem, -1.059rem + 3.51vw, 1.25rem);
	flex-wrap: wrap;
	justify-content: center;

	row-gap: 10px;
}

/* CF7 の検証メッセージ */
.wpcf7-not-valid-tip {
	margin-top: 4px;
	color: var(--c-red);
	font-weight: var(--Bold);
	font-size: 0.82rem;
}

/*.wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	border-width: 2px !important;
	border-radius: var(--radius-s);
	font-size: 0.88rem;
	line-height: 1.7;
}*/

.cf7_submit p {
	display: flex;
	justify-content: center;
	align-items: center;

	gap: 10px;
}


.contact_btn {
	position: relative;
	overflow: hidden;
	max-width: 200px;
	min-width: 150px;
	width: 100%;
}

.contact_btn input {
	display: inline-flex;
	max-width: 200px;
	width: 100%;
	height: 50px;
	border-width: 2px;
	border-style: solid;
	border-radius: 10px;
	font-weight: bold;
	font-size: 1rem;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s;
}

#contact_send input {
	border-color: #1b3a6b;
	background-color: #1b3a6b;
	color: #ffffff;
}

#contact_back input {
	border-color: #cdcdcd;
	background-color: #cdcdcd;
	color: #2c3841;
}

#contact_send input:hover , #contact_send input:focus-visible {
	background-color: #ffffff;
	color: #1b3a6b;
}

#contact_back input:hover , #contact_back input:focus-visible {
	background-color: #ffffff;
}

.wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

.wpcf7 form .wpcf7-response-output {
	display: none;
}

/*.wpcf7-spinner {
	margin-left: 10px;
}*/

/*.p-contact__fallback {
	display: flex;
	font-size: 0.95rem;
	flex-direction: column;
	align-items: center;

	row-gap: 8px;
}

.p-contact__fallback-tel {
	color: var(--c-navy);
	font-size: 2rem;
}*/

.contact_complete-title {
	font-size: clamp(1.125rem, -0.054rem + 2.46vw, 1.563rem);
	text-align: center;
}

.contact_complete-text {
	font-size: clamp(0.875rem, 0.538rem + 0.7vw, 1rem);
	text-align: justify;
}


@media screen and (min-width: 768px) {
	body.confirm .contact_container , body.complete .contact_container {
		padding-top: 140px;
	}


	.contact_complete-title {
		margin-bottom: 30px;
	}

	.contact_complete-text:not(:nth-last-of-type(1)) {
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 767px) {
	body.confirm .contact_container , body.complete .contact_container {
		width: 100%;
		padding-top: 75px;
	}


	.contact_complete-title {
		margin-bottom: 20px;
	}

	.contact_complete-text:not(:nth-last-of-type(1)) {
		margin-bottom: 10px;
	}
}