/*===============================================================================
フォーム全体
================================================================================*/
/*===============================
共通
=================================*/
.wpcf7 {
	--cf-border-color: #707070;
	/* ボーダー色 */
	--cf-cell-gap: 0rem;
	/* ﾍｯﾄﾞとｲﾝﾌﾟｯﾄｴﾘｱの余白 */
	--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%;
	padding: var(--g-8);
	border: 1px solid var(--cf-border-color);
	border-radius: var(--bd-r--xs);
	overflow: hidden;
	background-color: transparent;
	/* 	box-shadow: inset 0px 3px 6px #00000029; */
}

/* inputに色付け */
/* class:has-bgcを記述する */
.has-bgc {
	background-color: #fffef2;
}

/*===============================
ラジオボタン
=================================*/
.wpcf7-radio label {
	display: flex;
	gap: var(--cf-unit-gap);
}

.wpcf7-radio .wpcf7-list-item-label {
	min-width: fit-content;
}



/*===============================================================================
テーブル
================================================================================*/
.cfTable,
.cfTable tbody {
	display: block;
	width: 100%;
}

.cfTable tbody {
	background: var(--c-light);
	padding: var(--g-28) var(--g-20);
}

.cfTable tr {
	display: flex;
	flex-direction: column;
}

.cfTable tr:not(:last-child) {
	margin-bottom: var(--g-16);
}

.cftable_first-td {
	margin-bottom: var(--g-8);
}

.cfTable__yajirushi {
	background: var(--c-act02);
	height: calc(1rem / 2* tan(60deg));
	width: 20px;
	margin: -1px auto 0;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.cfTable__head {
	position: relative;
	color: var(--c-light);
	background: var(--c-act02);
	border-radius: var(--g-4);
	font-weight: var(--fw-lg);
	text-align: center;
	padding: var(--g-8);
}

.cfTable__body>*:not(:last-child) {
	margin-bottom: var(--g-12);
}

.cfTable__body.--syozai .cfTable__list>span:not(:last-of-type) {
	min-width: 4em;
	font-weight: var(--fw-lg);
}
/* 単位有りフォーム */
.cfList__unit {
	display: flex;
	gap: var(--cf-unit-gap);
	align-items: flex-end;
}

/* ファイル注釈 */
.cfTable__note {
	font-size: var(--fz-12);
	padding-top: var(--g-8);
}

@media (min-width: 600px) {
	.cfTable tbody {
		padding: var(--g-40) var(--g-24) var(--g-32);
	}

	.cfTable__body>*:not(:last-child) {
		margin-bottom: var(--g-8);
	}
}



/*===============================================================================
各フォーム
================================================================================*/
/* CF7のショートコード内のグループ */
.cfGroup {
	margin: var(--g-28) auto;
	padding: var(--g-28) var(--g-8);
	background: #32C787;
}

/* CF7のショートコード内の行間 */
.cfGroup>*:not(:last-of-type) {
	margin-bottom: var(--g-28);
}

.cfGroup__ttl {
	text-align: center;
	font-family: var(--ff-maru);
	font-size: var(--fz-24);
	font-weight: var(--fw-lg);
	color: var(--c-light);
	padding-bottom: var(--g-24);
}

.cfGroup__lead {
	letter-spacing: 0.12em;
	font-size: var(--fz-16);
	font-weight: var(--fw-lg);
	color: var(--c-light);
	margin-bottom: var(--g-4);
}

.cfGroup__okyakusamajyouhou {
	margin-top: var(--g-28);
}

@media (min-width: 600px) {
	.cfGroup {
		max-width: var(--width-xs);
		margin: var(--g-40) auto var(--g-sec--md);
		padding: var(--g-32) var(--g-24);
	}

	.cfGroup>*:not(:last-of-type) {
		margin-bottom: var(--g-24);
	}

	.cfGroup__okyakusamajyouhou {
		margin-top: var(--g-24);
	}
}

/*===============================================================================
ラベル
================================================================================*/
.cfLabel {
	position: relative;
}

.cfLabel::before {
	position: absolute;
	min-width: fit-content;
	padding: var(--g-4) var(--g-8);
	border-radius: 3px;
	line-height: 1;
	color: #E05C5C;
	background: var(--c-light);
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

.cfLabel.--required::before {
	content: "必須";
}

.cfLabel.--any::before {
	content: "任意";
	color: #909090;
}



/*===============================================================================
プライバシーポリシー
================================================================================*/
.cfPolicy {
	max-width: 40rem;
	margin: 0 auto;
}

.cfPolicy__container {
	max-height: 35vh;
	min-height: 10rem;
	padding: var(--g-12);
	border: 1px solid #909090;
	overflow: auto;
	background: var(--c-light);
}

/* box */
.cfPolicy__box:not(:last-of-type) {
	margin-bottom: var(--g-24);
}

/* content */
.cfPolicy__content:not(:last-of-type) {
	margin-bottom: var(--g-8);
}

/* 小見出し */
.cfPolicy__title {
	font-weight: var(--fw-lg);
}

/* リンク */
.cfPolicy__link {
	display: flex;
	justify-content: center;
}

input[type="file"] {
	width: 100%;
	border-radius: var(--g-4);
}

@media (min-width: 600px) {

	.cf-sp__br {
		display: none;
	}

	.--cfPolicy__lead {
		text-align: 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 {
	margin: 0 auto;
	max-width: 326px;
}

.confirmBtn__inner {
	display: inline-block;
	position: relative;
	width: 100%;
}

.confirmBtn__inner::after {
	--arrow-size: calc(1rem / 1.5);
    --arrow-skew: 0deg;
    --arrow-weight: 2px;
	position: absolute;
	top: 50%;
    right: 2.5rem;
    transform: translate(0%, -50%) rotate(0deg) rotate(45deg) skew(var(--arrow-skew), var(--arrow-skew));
    content: "";
    display: inline-block;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-top: var(--arrow-weight) solid var(--c-light);
    border-right: var(--arrow-weight) solid var(--c-light);
    transition: var(--ani-t--normal) ease-out;
}

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