/*===============================================================================
既存HTML
================================================================================*/
/*===============================
共通
=================================*/
.wpcf7 {
	--cf-border-color: var(--c-gray); /* ボーダー色 */
	--cf-cell-gap: 0rem; /* ﾍｯﾄﾞとｲﾝﾌﾟｯﾄｴﾘｱの余白 */
	--cf-unit-gap: 0.75rem; /* ｲﾝﾌﾟｯﾄｴﾘｱと単位の余白 */
}

/*===============================
input要素
=================================*/
/* input要素の親 */
.wpcf7-form-control-wrap {
	display: block;
}
/* 各input要素 */
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select,
.wpcf7-number,
.wpcf7-date {
	width: 100%;
	padding: 1.5rem;
	vertical-align: middle;
	border: 1px solid var(--cf-border-color);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	background-color: var(--c-light);
}
:is(input, textarea)::placeholder{
	color: var(--c-gray);
}

/*===============================
* チェックボックス＆ラジオボタン＆同意ボタン
* =================================*/
:is(.wpcf7-radio, .wpcf7-checkbox) .wpcf7-list-item{
	margin: 0;
}
/* ラベル, テキスト部分 */
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) label, 
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) input{
	cursor: pointer;
}

/*===============================
* チェックボックス
* =================================*/
.cfJob .wpcf7-checkbox{
	--count: 1;
	--gap: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 600px){
	.cfJob .wpcf7-checkbox{
		--count: 3;
	}
}

/* 各チェックボックス */
.cfJob label {
	position: relative;
	display: inline-block;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	max-width: 15em;
	min-width: 15em;
	padding: 1em 1.5em;
	text-align: center;
	border: 2px solid var(--c-dark);
	background: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	font-weight: var(--fw-lg);
}
/* チェックボックス：アニメーション */
.cfJob label:has(input[type="checkbox"]:checked){
	background: var(--c-dark);
	color: var(--c-light);
}

/* チェックボックス：チェックアイコン */
.cfJob label input[type="checkbox"] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	content: "";
	width: 100%;
	height: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*===============================
ラジオボタン
=================================*/
.wpcf7-radio{
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-sec--xs);
}
.wpcf7-radio label {
	display: flex;
	gap: var(--cf-unit-gap);
}
.wpcf7-radio .wpcf7-list-item-label {
	min-width: fit-content;
}



/*===============================================================================
自作レイアウト：テーブル
================================================================================*/
.cfTable{
	display: flex;
	flex-direction: column;
	gap: var(--g-sec--xs);
}
.cfGroup:not(:last-of-type){
	margin-bottom: var(--g-sec--md);
}
.cfTable__head{
	margin-bottom: 1.25rem;
	font-weight: var(--fw-lg);
}

/*===============================
* 生年月日
* =================================*/
.cfTable__birthday{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem var(--g-sec--xs);
}
.cfTable__birthday-item{
	display: flex;
	align-items: center;
	gap: var(--cf-unit-gap);
	max-width: 6em;
}
.cfTable__birthday-item.--year{
	max-width: 7.25em;
}

/*===============================
* プライバシーポリシー
* =================================*/
.cfTable__pp a{
	color: var(--c-dark);
	text-decoration: underline;
}



/*===============================================================================
ラベル
================================================================================*/
.cfLabel {
	display: flex;
	align-items: center;
	gap: var(--cf-unit-gap);
}
.cfLabel::before {
	min-width: fit-content;
	padding: 0 .75rem;
	border: 1px solid var(--c-dark);
	border-radius: 99999px;
	overflow: hidden;
}
.cfLabel.--required::before {
	content: "必須";
	background: var(--c-dark);
	color: var(--c-light);
}
.cfLabel.--any::before {
	content: "任意";
	background: var(--c-light);
	color: var(--c-dark);
}



/*===============================================================================
送信ボタン
================================================================================*/
.cfBtn, .cfBtn input{
	padding-right: calc(var(--arrow-posi-x) * 1);
	text-align: center;
}