/* -- 下層 contact
-------------------------------------------------- */
.common-wrapper.__contact {
	background-image: url('../images/contact/contact-image.jpg');
	background-position: center;
}

.common-wrapper.__contact:before {
	content: url("../images/contact/contact-title_ol.svg");
	width: 450px;
}

.common-wrapper.wave:after {
	background-image: url('../images/common/pattern_wave-white.svg');
	background-position: bottom;
}


.form-container {
	display: none;
}

.form-switcher {
	margin-bottom: 8em;
	display: flex;
	flex-flow: column;
	justify-content: center;
	text-align: center;
	gap: 1.5em;
}

.form-switcher label {
	margin-right: 15px;
	cursor: pointer;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-Black);
	text-decoration: underline;
}

/* .form-switcher label input {
	display: none;
} */

/* --- フォーム切り替えタブのデザイン --- */

/* ラジオボタン本体は画面から隠す */
.form-switcher input[type="radio"] {
	display: none;
}

/* タブ全体のコンテナ */
/* .form-switcher {
	border: 1px solid var(--accent-color, #ccc);
	border-radius: 8px;
	overflow: hidden;
} */

/* 各タブ（ラベル）の基本スタイル */
.form-switcher label {
	display: block;
	padding: var(--space-sm, 16px) var(--space-md, 32px);
	color: var(--main-color);
	font-weight: var(--font-weight-Medium, 500);
	cursor: pointer;
	transition: background-color 0.3s ease;
	position: relative;
	/* border-bottom: 1px solid var(--accent-color, #ccc); */
}

/* 最後のタブの下線を消す */
/* .form-switcher label:last-of-type {
	border-bottom: none;
} */

/* マウスを乗せた時のスタイル */
.form-switcher label:hover {
	background-color: #f5f5f5;
}


/* ★★★ ここが一番重要 ★★★ */
/* 選択されているタブ（ラベル）のスタイル */
.form-switcher label:has(input[type="radio"]:checked) {
	background-color: var(--main-color, #010042);
	color: var(--white-color, white);
	text-decoration: none;
}

/* ★変更★ アイコンの表示方法 */
.form-switcher label::before {
	content: '▶';
	font-size: 0.8em;

	/* ★追加★ 絶対配置でpaddingの領域に配置 */
	position: absolute;
	left: var(--space-sm, 16px);
	top: 50%;
	transform: translateY(-50%);

	/* ★追加★ 通常は透明にしておく */
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* 選択されているタブの前にアイコンを表示 */
.form-switcher label:has(input[type="radio"]:checked)::before {
	opacity: 1;
	/* 透明を解除 */
}

@media (min-width: 769px) {

	/* PCでは横並びに変更 */
	.form-switcher {
		flex-direction: row;
	}

	/* PC用のタブスタイル */
	.form-switcher label {
		flex-grow: 1;
		/* 親要素の幅に合わせて均等に広がる */
	}
}

/* --- フォーム切り替えタブのデザイン --- */


form p {
	margin-bottom: 1em;
}

.form-container h2 {
	margin-bottom: 0.25em;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-Black);
}

fieldset {
	display: none;
}

.entry-content {
	max-width: 1200px;
	margin: 0 auto;
	color: var(--main-color);
}

.form-title {
	margin-bottom: .5em;
	font-size: var(--font-size-lg);
	font-weight: 700;
}

.form-required {
	background-color: red;
	margin-left: 1.5em;
	padding: 0 .5em;
	border-radius: 8px;
	color: #fff;
	font-size: var(--font-size-sm);
	font-weight: normal;
}

.wpcf7-checkbox {
	display: flex;
	flex-flow: column;
	gap: .25em;
	/* margin-bottom: 1.5em; */
}

.form-class-date {
	display: inline-block;
	min-width: 3em;
}

.wpcf7-date,
.wpcf7-textarea,
.wpcf7-text {
	padding: .5em 2px;
}

input.wpcf7-form-control.wpcf7-date {
	margin-bottom: 0.5em;
}

.wpcf7-form .wpcf7-submit {
  cursor: pointer; /* カーソルを指マークに変更 */
  transition: background-color 0.3s ease; /* 色の変化をなめらかにする */
}


.wpcf7-form .wpcf7-submit:hover {
  background-color: var(--main-color); /* 背景色をメインカラーに変更 */
  color: var(--white-color); /* 文字色を白に変更 */
}

.wpcf7-form .wpcf7-checkbox label {
  cursor: pointer; /* カーソルを指マークに変更 */
  transition: color 0.3s ease; /* 色の変化をなめらかにする */
}

.wpcf7-form .wpcf7-checkbox label:hover {
  color: var(--sub-color); /* テキスト色をサブカラーに変更 */
}

.wpcf7-form .wpcf7-radio label {
  cursor: pointer; /* カーソルを指マークに変更 */
  transition: color 0.3s ease; /* 色の変化をなめらかにする */
}

.wpcf7-form .wpcf7-radio label:hover {
  color: var(--sub-color); /* テキスト色をサブカラーに変更 */
}


.wpcf7-radio {
	display: flex;
	flex-flow: column;
}

.wpcf7-textarea {
	width: 100%;
}

.form-send-btn {
	margin-top: 2em;
	text-align: center;
}

.form-send-btn button {
	background-color: var(--main-color);
	color: #fff;
	width: calc(100% / 5);
	padding: 1.5em 2em;
	border-radius: 10px;
	font-size: var(--font-size-sm);
	font-weight: 700;
	border: none; /* ボタンのデフォルトの枠線を消す */

	/* --- ここから追加 --- */
	cursor: pointer; /* カーソルを指マークに変更 */
	transition: opacity 0.3s ease; /* 変化をなめらかにする */
}
.form-send-btn button:hover {
	opacity: 0.6; /* 少し透明にする */
}
/* ラジオボタンの各選択肢（li要素のようなもの）の基本スタイル */
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
  cursor: pointer; /* カーソルを指マークに変更 */
}

/* ラジオボタンの隣のテキスト部分 */
.wpcf7-form .wpcf7-radio .wpcf7-list-item-label {
  transition: color 0.3s ease; /* 色の変化をなめらかにする */
}

/* ★マウスが選択肢の上に乗った時に、テキストの色を変更 */
.wpcf7-form .wpcf7-radio .wpcf7-list-item:hover .wpcf7-list-item-label {
  color: var(--sub-color); /* テキスト色をサブカラーに変更 */
}


@media (max-width: 768px) {
	.common-wrapper.__contact:before {
		width: 300px;
		left: 3rem;
	}

	.entry-content {
		margin: 0 .75em;
	}

	.wpcf7-textarea {
		width: calc(100% - .75em * 2);
	}

	.form-send-btn button {
		min-width: calc(100% / 2);
	}
}

@media (max-width: 468px) {
	.common-wrapper.__contact:before {
		width: 220px;
		left: 1rem;
		bottom: 4rem;
	}
}