@charset "UTF-8";
.wpcf7-spinner {
	display: none !important;
}
/* ========================================
	style
======================================== */

/* --------- リセットスタイル --------- */

select,
input,
textarea {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}

input {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
}

/* --------- テキスト --------- */

.contact__copy {
	font-size: 1.4rem;
	font-weight: 700;
	margin-top: 1.2rem;
}

.contact__inner {
	max-inline-size: 800px;
	margin-inline: auto;
}

/* --------- 問い合わせフォーム --------- */

.flow__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 3rem;
}

.flow__list > li {
	font-size: 1.2rem;
	font-weight: 700;
	padding-block: 1.2em;
	text-align: center;
	--col-gap: -6%;
}

.flow__list > li:not(.active) {
	color: var(--gray-300);
	background: var(--gray-200);
}

.flow__list > li.active {
	background: var(--nawa-green);
	color: #fff;
}

.flow__list > li:first-child {
	clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
	margin-right: var(--col-gap);
	padding-inline: 1em 2em;
}

.flow__list > li:nth-child(2) {
	clip-path: polygon(0 0, 86% 0, 100% 100%, 14% 100%);
	margin-inline: calc(var(--col-gap) - 1px);
	padding-inline: 1em;
}

.flow__list > li:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
	margin-left: var(--col-gap);
	padding-inline: 2em 1em;
}

.form__item:nth-child(1 of div) {
	margin-top: 8.4rem;
}

.form__item:not(:nth-child(1 of div)) {
	margin-top: 2.4rem;
}

.form__label {
	display: flex;
	align-items: center;
	gap: 0 1rem;
	font-size: 1.6rem;
	font-weight: 700;
}

.required {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
	padding: 0.1em 0.85em;
	border-radius: 3px;
	background: var(--nawa-green);
}
.switch .required {
	display: none;
}
/* プライバリーポリシーの同意 */
.privacy__text {
	font-size: 1.4rem;
	font-weight: 500;
	margin-top: 4.8rem;
	text-align: center;
}

.privacy__text a {
	color: inherit;
	text-decoration: underline;
	transition: color 0.3s ease;
}

.privacy__text a:hover {
	color: var(--nawa-green);
}

.privacy__check {
	font-size: 1.6rem;
	font-weight: 500;
	text-align: center;
	margin-top: 1.6rem;
	transition: color 0.3s ease;
}
.privacy__check:hover {
	color: var(--nawa-green);
}

.privacy__check input[type="checkbox"] {
	inline-size: 18px;
	block-size: 18px;
	border-radius: 2px;
	margin-right: 8px;
	background: #fff;
	border: 1px solid #d9d9d9;
	vertical-align: middle;
	cursor: pointer;
	position: relative;
}

.privacy__check input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	transform: rotate(50deg);
	inline-size: 5px;
	block-size: 10px;
	border-right: 2px solid var(--black);
	border-bottom: 2px solid var(--black);
}

/* 問い合わせフォーム・ラップ要素 */
.wpcf7-form-control-wrap {
	display: block;
	margin-top: 1.3rem;
}

.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
	font-size: 1.6rem;
}

/* プレースホルダー */
.wpcf7-form-control-wrap ::placeholder {
	color: #9aa3a7;
	font-size: 1.6rem;
	font-weight: 500;
}

:focus::placeholder {
	color: #f7f7f7;
}

/* テキストボックス */
.wpcf7-text {
	padding: 0.65em 1em;
	inline-size: 100%;
	min-block-size: 58px;
	background: #f7f7f7;
	border: 2px solid #e7e5e4;
}

.wpcf7-text:focus {
	border-color: var(--nawa-green);
}

.wpcf7-textarea {
	padding: 0.65em 1em;
	inline-size: 100%;
	field-sizing: content;
	block-size: 180px;
	background: #f7f7f7;
	border: 2px solid #e7e5e4;
}

.wpcf7-textarea:focus {
	border-color: var(--nawa-green);
}

/* ドロップダウンメニュー */
.wpcf7-select {
	padding-inline: 1em;
	inline-size: 100%;
	min-block-size: 50px;
	background: #f7f7f7 url("images/chvron-down-b.svg") no-repeat right 20px center / 10px auto;
	border: 2px solid #e7e5e4;
}

/* バリデートエラーメッセージ */
.wpcf7-not-valid {
	border-color: var(--nawa-red);
}

.wpcf7-response-output .wpcf7-not-valid-tip {
	color: var(--nawa-red);
	font-size: 1.2rem;
	font-weight: 700;
}

/* 入力内容の確認ボタン */
.wpcf7-submit {
	cursor: pointer;
}

.contact .square-button__container {
	margin-top: 6rem;
}

.contact .square-button__elem {
	font-size: 1.4rem;
	min-block-size: 56px;
}

/* 以下は同意ボタンが押される前のスタイル */
.contact .square-button__elem.before {
	background-color: var(--gray-200);
	color: var(--gray-300);
	box-shadow: unset;
}
.contact .square-button__elem.before:hover {
	pointer-events: none;
}
/* --------- 確認画面 --------- */

.confirm {
	margin-top: 5rem;
}

.confirm__item {
	border-bottom: 1px solid #bdbbb6;
	padding: 2rem 1rem;
}

.confirm__item:nth-child(1 of div) {
	border-top: 1px solid #bdbbb6;
}

.confirm__label {
	font-size: 1.4rem;
	font-weight: 500;
	color: #848484;
}

.confirm__text {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.85;
}

/* 入力内容を修正するボタン */
.confirm__back input[type="button"] {
	display: block;
	inline-size: fit-content;
	font-size: 1.4rem;
	font-weight: 700;
	margin: 2.5rem auto 0;
	text-decoration: underline;
	text-underline-offset: 6px;
	cursor: pointer;
	transition: color 0.3s ease;
}

.confirm__back:hover {
	color: var(--nawa-green);
}

/* --------- 問い合わせ完了ページ --------- */

.complete__copy {
	font-size: 1.4rem;
	font-weight: 500;
	margin-top: 4rem;
	line-height: 1.85;
}

/* ========================================
	1024px未満専用スタイル（TAB&SP）
======================================== */
@media screen and (width < 1180px) {
	.page-header {
		margin-bottom: 5vw;
	}
}

/* ========================================
	768px以上専用スタイル（PC）
======================================== */
@media print, screen and (768px <=width) {
	/* --------- テキスト --------- */

	.contact__copy {
		font-size: 1.6rem;
		text-align: center;
		margin-top: 0;
	}

	/* --------- 問い合わせフォーム --------- */

	.flow__list {
		margin-top: 5rem;
	}

	.flow__list > li {
		font-size: 1.6rem;
		font-weight: 500;
		padding: 0.5em 1em;
		--col-gap: -16px;
	}

	/* プライバリーポリシーの同意 */
	.privacy__text {
		margin-top: 6.4rem;
	}

	.privacy__check {
		margin-top: 2rem;
	}

	/* 入力内容の確認ボタン */
	.contact .square-button__container {
		margin-top: 8.8rem;
	}

	.contact .square-button__elem {
		font-size: 2rem;
		min-block-size: 80px;
	}
	.contact .square-button__elem input {
		width: 100%;
		height: 100%;
	}
	/* --------- 確認画面 --------- */

	.confirm {
		margin-top: 8rem;
	}

	.confirm__item {
		display: flex;
		padding: 2rem;
	}

	.confirm__label {
		font-size: 1.6rem;
		inline-size: 200px;
	}

	.confirm__text {
		font-size: 1.6rem;
		flex: 1 0;
	}

	/* 入力内容を修正するボタン */
	.confirm__back input[type="button"] {
		margin-top: 4rem;
	}

	/* --------- 問い合わせ完了ページ --------- */

	.complete__copy {
		font-size: 1.6rem;
		margin-top: 11rem;
		text-align: center;
	}

	.complete .square-button__container {
		margin-top: 11rem;
	}
}