/**
 * CONTACT ページ（タブ + CF7フォーム）
 * デザイン: デザインデータpng/6/8_1_1〜8_3_1（PC/SP）
 * 配色: 橙 #F5A313 / 青緑 #10A9AC / 文字 #493B3B / 濃 #2B2525 / クリーム #FFF8EA
 */

.p-contact {
	padding: 64px 0 160px;
}
.p-contact .l-content__inner,
.p-contact__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 40px;
}

/* =========================================================
 * タブ（ピル型・中央寄せ）
 * ========================================================= */
/* タブは2カラム（2×2）。文字数の差でボタン幅がばらつかないようグリッドで等幅にする */
.c-tabs__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: 720px;
	margin: 0 auto 56px;
}
.c-tabs__tab {
	appearance: none;
	border: none;
	cursor: pointer;
	border-radius: 999px;
	background: #E9E4DA;
	color: #493B3B;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.1em;
	padding: 16px 24px;
	/* letter-spacing の分だけ右に余白が残り中心がずれるため、
	 * flex中央寄せ + 末尾スペース相殺で光学的に真ん中に揃える */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-indent: 0.1em;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.c-tabs__tab:hover {
	background: #d9d2c4;
}
.c-tabs__tab:focus-visible {
	outline: 2px solid #10A9AC;
	outline-offset: 2px;
}
.c-tabs__tab.is-active {
	background: #10A9AC;
	color: #fff;
}
.c-tabs__panel[hidden] {
	display: none;
}
/* 確認画面表示中は JS が hidden を付与 → display:flex に負けないよう明示 */
.c-tabs__nav[hidden] {
	display: none;
}
.c-tabs__missing {
	color: #b00020;
	text-align: center;
}

/* =========================================================
 * フォーム（CF7 / dl.c-form）
 * ========================================================= */
.c-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 920px;
	margin: 0 auto;
}
/* 条件付き表示の行（希望職種のその他など）。grid指定が hidden より強いので明示的に消す */
.c-form__row[hidden] {
	display: none;
}
.c-form__row {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 18px;
	align-items: start;
}
.c-form__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.5;
	padding-top: 12px;
}
.c-form__badge {
	flex-shrink: 0;
	display: inline-block;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 12px;
}
.c-form__badge--req {
	background: #F5A313;
	color: #fff;
}
.c-form__badge--opt {
	background: #2B2525;
	color: #fff;
}

/* 入力 */
.c-form__field input[type="text"],
.c-form__field input[type="tel"],
.c-form__field input[type="email"],
.c-form__field input[type="url"],
.c-form__field input[type="date"],
.c-form__field textarea {
	width: 100%;
	background: #fff;
	border: none;
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #493B3B;
	box-shadow: none;
}
/* セレクト: reset.css の appearance:none で無地になるため入力欄と同じ見た目にし、
 * 右端に自前の矢印（背景SVG）を描く */
.c-form__field select {
	width: 100%;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23493B3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	border: none;
	border-radius: 10px;
	padding: 14px 44px 14px 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #493B3B;
	cursor: pointer;
}
.c-form__field select:focus-visible {
	outline: 2px solid #10A9AC;
	outline-offset: 1px;
}
/* 未選択（プレースホルダー相当）は薄く */
.c-form__field select:has(option[value=""]:checked) {
	color: #B5AFA5;
}
.c-form__field select option {
	color: #493B3B;
}
/* CF7 は select を span.wpcf7-form-control-wrap で包むので幅を通す */
.c-form__field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.c-form__field input::placeholder,
.c-form__field textarea::placeholder {
	color: #B5AFA5;
}
.c-form__field input:focus-visible,
.c-form__field textarea:focus-visible {
	outline: 2px solid #10A9AC;
	outline-offset: 1px;
}
/* 短めフィールド（担当者名・役職・営業種別など） */
.c-form__field .is-short {
	max-width: 320px;
}
.c-form__row--textarea textarea {
	min-height: 160px;
	resize: vertical;
}
.c-form__row--radio {
    align-items: center;
}
/* ラジオ（カジュアル面談） */
.c-form__row--radio .c-form__field {
	padding-top: 12px;
}
.c-form__field .wpcf7-radio {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}
.c-form__field .wpcf7-radio .wpcf7-list-item {
	margin: 0;
}
.c-form__field .wpcf7-radio label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
/* reset.css 対策: ラジオも自前描画 */
.c-form__field .wpcf7-radio input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid #493B3B;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.c-form__field .wpcf7-radio input[type="radio"]:checked {
	border-color: #676767;
	background: radial-gradient(#676767 0 42%, transparent 48%);
}
.c-form__field .wpcf7-radio input[type="radio"]:focus-visible {
	outline: 2px solid #10A9AC;
	outline-offset: 2px;
}

/* ファイル添付: 「ファイルを選択」ボタン + グレーの状態テキスト（デザイン準拠） */
.c-form__field input[type="file"] {
	width: 100%; /* 幅不足で「選択されていません」が…省略されるのを防ぐ */
	padding-top: 8px;
	font-size: 16px;
	color: #B5AFA5; /* 「選択されていません」/ ファイル名のテキスト色 */
	cursor: pointer;
}
.c-form__field input[type="file"]::file-selector-button {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: 1px solid #493B3B;
	border-radius: 6px;
	color: #493B3B;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	padding: 8px 14px;
	margin-right: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.c-form__field input[type="file"]::file-selector-button:hover {
	background: #F5F0E4;
}
.c-form__field input[type="file"]:focus-visible::file-selector-button {
	outline: 2px solid #10A9AC;
	outline-offset: 2px;
}

/* 同意・プライバシー・送信 */
.c-form__privacy {
	margin-top: 48px;
	text-align: center;
	font-size: 15px;
}
.c-form__privacy a {
	color: #10A9AC;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.c-form__agree {
	margin-top: 16px;
	text-align: center;
	font-size: 15px;
}
/* reset.css が input を appearance:none で透明化するため、チェックボックスを自前描画（14px四方） */
.c-form__agree input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1.5px solid #493B3B;
	border-radius: 3px;
	background: #fff;
	vertical-align: -2px;
	margin-right: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.c-form__agree input[type="checkbox"]:checked {
	background-color: #10A9AC;
	border-color: #10A9AC;
	background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"%3E%3Cpath d="M1 4l3 3 5-6" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 9px 7px;
}
.c-form__agree input[type="checkbox"]:focus-visible {
	outline: 2px solid #10A9AC;
	outline-offset: 2px;
}
.c-form__submit {
	margin-top: 32px;
	text-align: center;
}
.c-form__submit-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	display: inline-block;
	min-width: 280px;
	background: #493B3B;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.15em;
	border-radius: 999px;
	padding: 18px 48px;
	transition: background-color 0.3s ease, transform 0.3s ease;
}
.c-form__submit-btn:hover {
	background: #2B2525;
	transform: translateY(-2px);
}
.c-form__submit-btn:focus-visible {
	outline: 2px solid #10A9AC;
	outline-offset: 2px;
}

/* =========================================================
 * 確認画面（JSで生成 / デザイン 8_x_2）
 * ========================================================= */
.c-form-confirm__lead {
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.1em;
	margin-bottom: 40px;
	line-height: 2;
}
.c-form-confirm__list {
	display: flex;
	flex-direction: column;
	gap: 36px;
	max-width: 920px;
	margin: 0 auto;
}
.c-form-confirm__row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 16px;
	align-items: start;
}
.c-form-confirm__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 700;
	font-size: 15px;
}
.c-form-confirm__value {
	font-size: 15px;
	line-height: 1.8;
	word-break: break-word;
	white-space: pre-wrap;
	padding-top: 2px;
}
.c-form-confirm__buttons {
	margin-top: 72px;
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}
.c-form-confirm__btn {
	appearance: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 260px;
	background: #493B3B;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.15em;
	border-radius: 999px;
	padding: 18px 48px;
	transition: background-color 0.3s ease, transform 0.3s ease;
}
.c-form-confirm__btn:hover {
	background: #2B2525;
	transform: translateY(-2px);
}
.c-form-confirm__btn:focus-visible {
	outline: 2px solid #10A9AC;
	outline-offset: 2px;
}
.c-form-confirm__btn:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* CF7 バリデーション表示の馴染ませ */
.wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	color: #d43c3c;
}
.wpcf7 form .wpcf7-response-output {
	margin: 32px auto 0;
	max-width: 800px;
	border: 1.5px solid #F5A313;
	border-radius: 10px;
	padding: 14px 20px;
	text-align: center;
	font-size: 14px;
}
.wpcf7-spinner {
	display: block;
	margin: 8px auto 0;
}

/* =========================================
 * date input（Safari対応）
 * ========================================= */
.c-form__field input[type="date"] {
	display: flex;
	align-items: center;

	height: 52px;
	padding: 0 18px;

	line-height: normal;
	text-align: left;

	-webkit-appearance: none;
	appearance: none;
}

/* Safari / Chrome */
.c-form__field input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
}

/* 入力エリア */
.c-form__field input[type="date"]::-webkit-datetime-edit {
	padding: 0;
	text-align: left;
}

/* 年月日全体 */
.c-form__field input[type="date"]::-webkit-datetime-edit-fields-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* 年・月・日 */
.c-form__field input[type="date"]::-webkit-datetime-edit-year-field,
.c-form__field input[type="date"]::-webkit-datetime-edit-month-field,
.c-form__field input[type="date"]::-webkit-datetime-edit-day-field,
.c-form__field input[type="date"]::-webkit-datetime-edit-text {
	padding: 0;
	text-align: left;
}

/* カレンダーアイコン */
.c-form__field input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .8;
}

/* =========================================================
 * レスポンシブ
 * ========================================================= */
@media screen and (max-width: 768px) {
	.p-contact {
		padding: 40px 0 96px;
	}
	.p-contact .l-content__inner,
	.p-contact__inner {
		padding: 0 20px;
	}

	/* SP: 文言が長く2カラムだと折り返して崩れるため1カラムに */
	.c-tabs__nav {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		max-width: none;
		margin-bottom: 40px;
	}
	.c-tabs__nav[hidden] {
		display: none;
	}
	.c-tabs__tab {
		width: 100%;
		padding: 14px 12px;
		font-size: 14px;
		text-align: center;
	}

	.c-form {
		gap: 24px;
	}
	.c-form__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.c-form__label {
		justify-content: flex-start;
		padding-top: 0;
	}
	.c-form__field .is-short {
		max-width: none;
	}
	.c-form__row--textarea textarea {
		min-height: 160px;
	}
	.c-form__privacy {
	        margin-top: 32px;
        font-size: 16px;
        text-align: left;
        line-height: 1.8;
	}
	.c-form__submit-btn {
		width: 100%;
		min-width: 0;
	}

	/* 確認画面 SP */
	.c-form-confirm__lead {
		margin-bottom: 40px;
		text-align: left;
	}
	.c-form-confirm__list {
		gap: 28px;
	}
	.c-form-confirm__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.c-form-confirm__label {
		justify-content: flex-start;
	}
	.c-form-confirm__buttons {
		margin-top: 48px;
		gap: 16px;
	}
	.c-form-confirm__btn {
		width: 100%;
	}
}

/* フッター共通CONTACTの上波色（このページの直前セクション背景に馴染ませる） */
:root {
	--contact-wave-color: #FFF8EA;
}