/* ========================================
   カスタムプロパティ（CSS変数）
   ======================================== */
:root {
	--color-white: #ffffff;
	--color-red: red;
	--color-danger: #dc3545;
	--color-danger-border: #d32535;
	--color-primary: #5fbcdd;
	--color-border-focus: #80bdff;
	--color-secondary: #6c757d;
	--color-text-dark: #353535;
	--color-text-light: #495057;
	--color-border: #a5adbe;
	--color-border-select: #ced4da;
	--color-bg-light: #f8f9fa;
	--color-bg-border: #e9ecef;
	--color-bg-transparent: transparent;
	--border-radius: 0.25rem;
	--border-radius-lg: 5px;
}

/* ========================================
   基本スタイル
   ======================================== */
.required {
	color: var(--color-red);
}

.formContent {
	max-width: 700px;
	margin: 0 auto !important;
	padding-top: 2rem;
}

.contact__th label {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 0.5em;
	display: inline-block;
}

/* ========================================
   日付入力エリア
   ======================================== */
.date_input_area {
	display: flex;
	gap: 5px;
}

.date_input_area > * {
	width: calc(100% / 3);
}

.input-group {
	display: flex;
	align-items: center;
}

.input-group .wpcf7-form-control-wrap {
	width: 100%;
}

/* ========================================
   フォームエリア
   ======================================== */
.formContent .form_item_area__row {
	margin-bottom: 2rem;
}

.formContent .form_item_area .annotation {
	margin-bottom: 0.5em;
}

.formContent .form_item_area p {
	margin-bottom: 0.7em;
	font-size: 0.9rem;
}

.formContent [class*='icheck-'] {
	margin: 3px 0;
}

.formContent [class*='icheck-'] label {
	font-size: 16px;
}

.formContent .row {
	margin-top: 10px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 16px;
}

.formContent .row .label {
	max-width: 100%;
}

/* ========================================
   入力グループとフォームコントロール
   ======================================== */
.formContent .form-control {
	display: block;
	padding: 6px 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text-light);
	background-color: var(--color-white);
	border-radius: 4px;
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
	transition:
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

.formContent .form-control.w-full {
	width: 100%;
}

.formContent .form-control:focus {
	color: var(--color-text-light);
	background-color: var(--color-white);
	border-color: var(--color-border-focus);
	outline: 0;
}

.formContent .custom-select {
	display: inline-block;
	width: 50%;
	height: calc(2.25rem + 2px);
	padding: 0.375rem 1.75rem 0.375rem 0.75rem;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text-light);
	vertical-align: middle;
	background: var(--color-white) url('../img/icon_selectbox.svg') no-repeat right 0.75rem center / 8px 10px;
	border: 1px solid var(--color-border-select);
	border-radius: 0.25rem;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition:
		background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

.formContent .custom-select.text-right {
	text-align: right;
}

.formContent .custom-select.w-full {
	width: 100%;
}

.formContent .form-control,
.formContent .custom-select {
	border: 1px solid var(--color-border);
	box-sizing: border-box;
}

.formContent .input-group-prepend {
	padding-right: 0.7em;
}

.formContent .input-group-append {
	padding-left: 0.7em;
}

.formContent .input-group-text {
	display: flex;
	align-items: center;
	margin-bottom: 0;
	padding: 0;
	color: var(--color-text-dark);
	font-size: 16px;
	line-height: 1.5;
	background-color: var(--color-bg-transparent);
	border: none;
	border-radius: var(--border-radius);
}

.formContent .input-group > .form-control:not(:last-child),
.formContent .input-group > .custom-select:not(:last-child) {
	border-top-right-radius: var(--border-radius-lg);
	border-bottom-right-radius: var(--border-radius-lg);
}

/* ========================================
   ボタンエリア
======================================== */
.form-button-wrap {
	width: 100%;
	position: relative;
	max-width: 300px;
	margin-inline: auto;
}

.form-button-wrap::before {
	content: '';
	display: block;
	background: url('../../../common/images/icon/arrow/btn.png') 0 0 no-repeat var(--color-bg-transparent);
	background-size: 22px 22px;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	position: absolute;
	top: 50%;
	z-index: 10;
}

.form-button-wrap-prev::before {
	left: 25px;
	transform: rotate(-180deg);
}

.form-button-wrap-prev .form-button {
	background-color: var(--color-secondary);
}

.form-button-wrap-next::before {
	right: 25px;
}

.form-button-wrap-next .form-button {
	background-color: var(--color-primary);
}

.form-button-wrap:hover .form-button {
	opacity: 0.8;
}

.form-button {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	color: var(--color-white);
	line-height: 1.3;
	box-sizing: border-box;
	transition: opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1);
	width: 100%;
	border: 1px solid transparent;
	padding: 24px 0.75rem;
	font-size: 16px;
	border-radius: 4px;
}

.form-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ボタン切り替えエリア */
.js-btn-wrap {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

.js-btn-wrap > * {
	grid-area: 1/1;
	visibility: visible;
	opacity: 1;
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
}

.js-btn-wrap > [aria-hidden='true'] {
	opacity: 0;
	visibility: hidden;
	z-index: -1;
	pointer-events: none;
}

.js-secondstep {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

/* 確認画面用フォーム要素スタイル */
.js-readonly {
	background-color: var(--color-bg-light) !important;
	border-color: var(--color-bg-border) !important;
	cursor: default !important;
	color: var(--color-text-dark) !important;
	pointer-events: none !important;
}

.js-readonly:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* ラジオボタン・チェックボックスの確認画面スタイル */
input[type='radio'].js-readonly,
input[type='checkbox'].js-readonly,
.js-readonly input[type='radio'],
.js-readonly input[type='checkbox'] {
	pointer-events: none !important;
	opacity: 0.8;
	cursor: default !important;
}

input[type='radio'].js-readonly + label,
input[type='checkbox'].js-readonly + label,
.js-readonly input[type='radio'] + label,
.js-readonly input[type='checkbox'] + label,
.js-readonly label {
	color: var(--color-text-dark) !important;
	cursor: default !important;
	opacity: 0.9;
	pointer-events: none !important;
}

/* Contact Form 7のラジオボタン特有の構造に対応 */
.js-readonly .wpcf7-list-item {
	pointer-events: none !important;
	opacity: 0.8;
}

.js-readonly .wpcf7-list-item label {
	cursor: default !important;
	color: var(--color-text-dark) !important;
}

.js-readonly .wpcf7-list-item input[type='radio'] {
	pointer-events: none !important;
	cursor: default !important;
}

.js-readonly .wpcf7-list-item-label {
	color: var(--color-text-dark) !important;
	cursor: default !important;
}

/* スクリーンリーダー専用（アクセシビリティ） */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* 確認画面での視覚的強調 */
.js-readonly::before {
	content: '確認: ';
	font-weight: 700;
	color: var(--color-primary);
	font-size: 0.875rem;
	display: none; /* 必要に応じて表示 */
}

/* ========================================
   レスポンシブ対応
   ======================================== */
@media screen and (max-width: 768px) {
	.formContent .form-control,
	.formContent .custom-select {
		border: 1px solid var(--color-border);
		box-sizing: border-box;
		width: 100%;
	}

	.js-secondstep {
		flex-direction: column;
	}
}

/* ========================================
   Contact Form 7 確認画面・エラー処理
   ======================================== */
.wpcf7-response-output {
	display: none;
}

.wpcf7-not-valid-tip {
	margin-top: 0.4em;
	padding: 0.2rem 1.25rem;
	color: var(--color-white);
	background: var(--color-danger);
	border: 1px solid var(--color-danger-border);
	border-radius: var(--border-radius);
}

.wpcf7-not-valid {
	border-color: var(--color-danger);
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.wpcf7-radio .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-radio input:focus,
.wpcf7-radio input:active,
.wpcf7-radio textarea:focus,
.wpcf7-radio textarea:active {
	outline: 0;
}

.wpcf7-spinner {
	display: none;
}