/*===============================================================================
フォーム全体
================================================================================*/
/*===============================
共通
=================================*/
.wpcf7 {
	--cf-border-color: #707070; /* ボーダー色 */
	--cf-tr-gap: 0.5rem; /* thとtdの間の余白 */
	--cf-tr-mb: 1rem; /* tr下の余白 */
	--cf-cell-vertical-pad: 0.25rem; /* セルの上下のパディング */
	--cf-cell-side-pad: 1rem; /* セルの左右のパディング */
	--cf-unit-gap: 0.25rem; /* ｲﾝﾌﾟｯﾄｴﾘｱと単位の余白 */
}
/*===============================
input要素
=================================*/
/* input要素の親 */
.wpcf7-form-control-wrap {
	display: inline-block;
	width: 100%;
}
/* 各input要素 */
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select,
.wpcf7-number,
.wpcf7-date {
	width: 100%;
}

/* プレースホルダー内のテキストカラー */
:is(input, textarea)::placeholder {
	color: var(--c-gray);
}

/*===============================
ラジオボタン＆チェックボックス
=================================*/
.wpcf7-radio,
.wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}
/* 縦積み */
.wpcf7-radio.--column,
.wpcf7-checkbox.--column {
	flex-direction: column;
}
:is(.wpcf7-radio, .wpcf7-checkbox) .wpcf7-list-item {
	margin: 0;
}
/* use_label_elementを設定した場合 */
:is(.wpcf7-radio, .wpcf7-checkbox) label {
	display: flex;
	gap: var(--cf-unit-gap);
	accent-color: #2a918b; /* ボタンの色 */
}
/* ラベル, テキスト部分 */
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) label,
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) input {
	cursor: pointer;
}
/* 円 */
.wpcf7-radio input {
	width: 1.25rem;
	aspect-ratio: 1;
}
/* 文字関連 */
.wpcf7 :is(.wpcf7-radio, .wpcf7-checkbox) .wpcf7-list-item label span {
	font-weight: bold;
	font-size: 1rem;
	color: var(--c-light);
	opacity: 1;
}

/*===============================================================================
テーブル
================================================================================*/
.cfTable,
.cfTable tbody {
	display: block;
	width: 100%;
}
/* tr */
.cfTable__row {
	display: flex;
	gap: 0 var(--cf-tr-gap);
}

.cfTable__row:not(:last-of-type) {
	margin-bottom: var(--cf-tr-mb);
}
/* 各セル */
.cfTable__head,
.cfTable__body {
	flex-grow: 1;
}
/* 1列目のセル */
.cfTable__head {
	min-width: 9em;
}
@media (min-width: 600px) {
	.cfTable__head {
		max-width: 9em;
	}
}

/* 1つのセルに複数の要素が入った場合 */
.cfTable__body > *:not(:last-child) {
	margin-bottom: 0.25rem;
}

/* .cfTable__bodyの中身 */
.cfTable__list {
	display: flex;
	gap: 1rem;
}
.cfTable__list.--ninzu{
	align-items: baseline;
	max-width: fit-content;
}
/* 単位有りフォーム */
.cfList__unit {
	display: flex;
	gap: var(--cf-unit-gap);
	align-items: flex-end;
}
/* 単位有りフォーム */
.cfList__unit .wpcf7-form-control-wrap {
	max-width: fit-content;
}
/* 注釈 */
.cfTable__note {
	font-size: 0.75rem;
}

/*===============================
* 常に縦並び
* =================================*/
.cfTable.--pc-column .cfTable__row {
	flex-direction: column;
}
.cfTable.--pc-column :is(.cfTable__head, .cfTable__body) {
	width: 100%;
	padding: 0;
}
/*===============================
* SP時縦並び
* =================================*/
@media not all and (min-width: 600px) {
	.cfTable.--sp-column .cfTable__row {
		flex-direction: column;
	}
}
/*===============================
* 全方位ボーダー
* =================================*/
.cfTable.--full-border {
	--bd-width: 1px;
	--bd-style: solid;
	--bd-color: var(--cf-border-color);
	border-top: var(--bd-width) var(--bd-style) var(--bd-color);
	border-left: var(--bd-width) var(--bd-style) var(--bd-color);
}
/* 1列目のセル */
.cfTable.--full-border .cfTable__head {
	border-bottom: var(--bd-width) var(--bd-style) var(--bd-color);
}
/* 2列目のセル */
.cfTable.--full-border .cfTable__body {
	border-right: var(--bd-width) var(--bd-style) var(--bd-color);
	border-bottom: var(--bd-width) var(--bd-style) var(--bd-color);
}

/*===============================================================================
各フォーム
================================================================================*/
/* CF7のショートコード内のグループ */
.cfGroup {
	margin-bottom: var(--g-sec--sm);
}
/* CF7のショートコード内の行間 */
.cfGroup > *:not(:last-of-type) {
	margin-bottom: 2rem;
}
.cfGroup__lead {
	margin-bottom: 1rem;
	letter-spacing: 0.12em;
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
}

/*===============================================================================
ラベル
================================================================================*/
.cfLabel {
	display: flex;
	align-items: center;
}
.cfLabel::after {
	min-width: fit-content;
	line-height: 1;
	font-weight: normal;
	font-family: inherit;
}
.cfLabel.--required::after {
	content: "*";
	color: var(--c-required);
}

/*===============================================================================
プライバシーポリシー
================================================================================*/
.cfPolicy__container {
	max-height: 15vh;
	min-height: 10rem;
	padding: 1.5rem;
	border: 1px solid var(--cf-border-color);
	overflow: auto;
}
/* box */
.cfPolicy__box:not(:last-of-type) {
	margin-bottom: 1.5rem;
}
/* content */
.cfPolicy__content:not(:last-of-type) {
	margin-bottom: 0.5rem;
}
/* 小見出し */
.cfPolicy__title {
	font-weight: var(--fw-lg);
}
/* リンク */
.cfPolicy__link {
	display: flex;
	justify-content: center;
}

/*===============================================================================
ボタンのスタイル
================================================================================*/
.cfBtn {
	text-align: center;
}
.wpcf7-spinner {
	display: none;
}

/*===============================================================================
確認画面
================================================================================*/
.confirmList {
	--gap: 1rem;
	--count: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	margin-bottom: 3rem;
}
@media (min-width: 601px) {
	.confirmList {
		--count: 2;
	}
}
.confirmList__item {
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
	padding: 0 0.5rem;
	border-bottom: 1px solid var(--cf-border-color);
}
/*===============================
ボタン
=================================*/
.confirmBtn {
	display: block;
}
.confirmBtn.--submit {
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5rem;
}
.confirmBtn input {
	width: 100%;
	padding: 10px 1rem;
	background: var(--c-light);
	border: 1px solid var(--cf-border-color);
	font-weight: bold;
	color: var(--c-dark);
	transition: background var(--ani-t--normal), color var(--ani-t--normal);
}
/*送信ボタンマウスホバー時*/
.confirmBtn input:hover {
	background: var(--cf-border-color);
	color: var(--c-light);
}

/*===============================================================================
完了メッセージ
================================================================================*/
.thanksMessage {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #00a0d2;
}