/*===============================================================================
フォーム全体
================================================================================*/
/*===============================
共通
=================================*/
.wpcf7 {
	--cf-tr-gap: 1rem; /* thとtdの間の余白 */
	--cf-tr-mb: 2rem; /* tr下の余白 */
	--cf-cell-pad-y: 0.875rem; /* セルの上下のパディング */
	--cf-cell-pad-x: 1rem; /* セルの左右のパディング */
	--cf-unit-gap: 1rem; /* ｲﾝﾌﾟｯﾄｴﾘｱと単位&&ラジオ･チェックの余白 */
	--cf-label-gap: 0.25rem; /* 必須の余白 */
}
/*===============================
input要素
=================================*/
/* input要素の親 */
.wpcf7-form-control-wrap {
	display: inline-block;
	width: 100%;
}
/* 各input要素 */
#main :is(.wpcf7-text, .wpcf7-textarea, .wpcf7-select, .wpcf7-number, .wpcf7-date) {
	width: 100%;
	padding: var(--cf-cell-pad-y) var(--cf-cell-pad-x);
	margin-bottom: 0;
}

/* プレースホルダー内のテキストカラー */
#main :is(input, textarea)::placeholder, 
#main input.wpcf7-date{
	color: #bbb;
}

/* 日付 */
input[type="date"] {
	cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: none;
}

/*===============================
ラジオボタン＆チェックボックス
=================================*/
.wpcf7-radio,
.wpcf7-checkbox,
.wpcf7-acceptance {
	--label-size: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.5rem;
}
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) .wpcf7-list-item {
	margin: 0;
	min-width: 7em;
}
/* use_label_elementを設定した場合 */
#main :is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) label {
	display: flex;
	align-items: center;
	gap: var(--cf-unit-gap);
	width: fit-content;
	margin-bottom: 0;
}
/* ラベル, テキスト部分 */
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) label,
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) input {
	cursor: pointer;
}
/* ラベル */
#main :is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) input {
	flex: 1;
	width: var(--label-size);
	min-width: var(--label-size);
	height: var(--label-size);
	margin: 0;
	border: 1px solid var(--cf-bdc);
}
/* テキスト */
#main .wpcf7
	:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance)
	.wpcf7-list-item
	label
	span {
	font-weight: var(--fw-lg);
	font-size: 1rem;
	opacity: 1;
}

/*===============================================================================
テーブル
================================================================================*/
.cfTable,
.cfTable tbody {
	display: block;
	width: 100%;
}
/* tr */
.cfTable__row {
	display: flex;
	flex-direction: column;
	gap: var(--cf-tr-gap);
}
.cfTable__row:not(:last-of-type) {
	margin-bottom: var(--cf-tr-mb);
}
/* 各セル */
.cfTable__head,
.cfTable__body {
	flex-grow: 1;
}
.cfTable__head{
	font-weight: bold;
}

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

/* .cfTable__bodyの中身 */
.cfTable__list {
	display: flex;
	gap: 1rem;
}

/*===============================================================================
各フォーム
================================================================================*/
/* CF7のショートコード内のグループ */
.cfGroup:not(:last-child) {
	margin-bottom: 2.5rem;
}


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


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