/*===============================================================================
共通
================================================================================*/
/* リキャプチャ */
.grecaptcha-badge{
	z-index: 1;
}


.contact__head, 
.contact__body{
	margin-bottom: var(--g-sec--sm);
}
.contact__message{
	display: flex;
	justify-content: center;
}

/* スクロールボタンを含むエリア */
.contact__note{
	max-width: fit-content;
	margin-inline: auto;
	text-align: center;
	font-size: .75em;
}
/* 送信ボタンまでスクロール */
.contact__noteBtn{
	max-width: 30rem;
}

.contact__content{
	display: flex;
	flex-direction: column;
	gap: var(--g-sec--xs);
	margin-bottom: var(--g-sec--xs);
}

.contact__btn{
	--c-current-01: var(--c-main);
	--c-current-02: var(--c-light);
	--circle-size: 2rem;
	position: relative;
	display: inline-block;
	max-width: 480px;
	width: 100%;
	padding: var(--g-20) calc( var(--circle-size) + var(--g-24) ) var(--g-20) var(--g-24);
	border: 2px solid var(--c-main);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	color: var(--c-dark--light);
	background: var(--c-current-02);
	font-size: var(--fz-24);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
/* 〇や＞も同時に色変更可能 */
.contact__btn:is(:focus, :hover){
	--c-current-01: var(--c-light);
	--c-current-02: var(--c-main);
}
/*〇のCSS*/
.contact__btn__icon{
	position: absolute;
	top: 50%;
	right: var(--g-24);
	transform: translate(0, -50%);
	width: var(--circle-size);
	height: var(--circle-size);
	border: 1px solid var(--c-main);
	background: var(--c-current-01);
	border-radius: 50%;
	transition: var(--ani-t--normal) ease-out;
}
/*＞のCSS*/
.contact__btn__icon::after{
	--arrow-size: calc(var(--circle-size) / 3.5);
	--arrow-skew: 0deg;
	--arrow-weight: 2px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-65%, -50%) rotate(0deg) rotate(45deg) skew(var(--arrow-skew), var(--arrow-skew));
	content: "";
	width: var(--arrow-size);
	height: var(--arrow-size);
	border-top: var(--arrow-weight) solid var(--c-current-02);
	border-right: var(--arrow-weight) solid var(--c-current-02);
	transition: var(--ani-t--normal) ease-out;
}

.contact__image{
	max-width: var(--width-sm);
	margin-inline: auto;
}



/*===============================================================================
フォーム全体
================================================================================*/
/*===============================
共通
=================================*/
.wpcf7 {
	--cf-border-color: #898989; /* ボーダー色 */
	--cf-tr-gap: var(--g-12); /* thとtdの間の余白 */
	--cf-tr-mb: var(--g-sec--xs); /* tr下の余白 */
	--cf-cell-vertical-pad: var(--g-4); /* セルの上下のパディング */
	--cf-cell-side-pad: var(--g-16); /* セルの左右のパディング */
	--cf-unit-gap: 0.25rem; /* ｲﾝﾌﾟｯﾄｴﾘｱと単位の余白 */
}
@media (min-width: 768px){
	.wpcf7 {
		--cf-tr-gap: var(--g-24); /* thとtdの間の余白 */
	}
}
/*===============================
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);
	background-color: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	box-shadow: inset 0px 0px 8px rgba(0,0,0,.25);
	vertical-align: middle; /* 要素下の余白削除 */
}



/*===============================================================================
テーブル
================================================================================*/
.cfTable,
.cfTable tbody {
	display: block;
	width: 100%;
}
/* tr */
.cfTable tr {
	display: flex;
	gap: var(--cf-tr-gap);
}
.cfTable tr:not(:last-of-type){
	margin-bottom: var(--cf-tr-mb);
}
/* 1列目のセル */
.cfTable td:first-of-type {
	min-width: 15em;
}
@media (min-width: 768px) {
	.cfTable td:first-of-type {
		width: 20%;
	}
}
/* 2列目のセル */
@media (min-width: 768px) {
	.cfTable td:nth-of-type(2) {
		width: 80%;
	}
}
.cfTable__head {
	display: inline-block;
	vertical-align: sub;
}
.cfTable__body > *:not(:last-child) {
	margin-bottom: var(--g-12);
}
@media (min-width: 768px){
	.cfTable__body > *:not(:last-child) {
		margin-bottom: var(--g-sec--xs);
	}
}

.cfTable__list {
	display: flex;
	flex-direction: column;
	gap: var(--g-4) var(--g-sec--xs);
}
@media (min-width: 768px){
	.cfTable__list{
		align-items: center;
		flex-direction: row;
	}
}
/* 単位有りフォーム */
.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: var(--fz-12);
}

/*===============================
* 常に縦並び
* =================================*/
.cfTable.--pc-column tr{
	flex-direction: column;
}
.cfTable.--pc-column :is(th, td){
	width: 100%;
	padding: 0;
}
/*===============================
* SP時縦並び
* =================================*/
@media not all and (min-width: 768px) {
	.cfTable.--sp-column tr {
		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 td:nth-of-type(1) {
	border-bottom: var(--bd-width) var(--bd-style) var(--bd-color);
}
/* 2列目のセル */
.cfTable.--full-border td:nth-of-type(2) {
	border-right: var(--bd-width) var(--bd-style) var(--bd-color);
	border-bottom: var(--bd-width) var(--bd-style) var(--bd-color);
}

/* 住所 */
.cfTable__body.--address span:nth-of-type(1){
	min-width: 5em;
}
.en-US .cfTable__body.--address span:nth-of-type(1){
	min-width: 7.5em;
}

/*===============================
* 同意ボタン
* =================================*/
.cfAgree{
	display: block;
	max-width: fit-content;
	margin-inline: auto;
	text-align: center;
}
.cfAgree a{
	text-decoration: underline;
}



/*===============================================================================
各フォーム
================================================================================*/
/* CF7のショートコード内のグループ */
.cfGroup {
	margin-bottom: var(--g-sec--md);
}
@media (min-width: 768px){
	.cfGroup {
		margin-bottom: var(--g-sec--xs);
	}
}
.cfGroup.--recaptcha{
	max-width: fit-content;
	margin-inline: auto;
}


/* CF7のショートコード内の行間 */
.cfGroup > *:not(:last-of-type) {
	margin-bottom: var(--g-32);
}
.cfGroup__lead {
	margin-bottom: var(--g-16);
	letter-spacing: 0.12em;
	font-size: var(--fz-20);
	font-weight: var(--fw-lg);
}

/*===============================================================================
ラベル
================================================================================*/
.cfLabel {
	display: flex;
	align-items: center;
	gap: var(--g-16);
}
.cfLabel::before {
	min-width: 5rem;
	padding: var(--g-8);
	text-align: center;
	color: #fff;
	font-weight: normal;
	font-family: inherit;
}
.en-US .cfLabel::before{
	min-width: 6rem;
}

/* 必須 */
.cfLabel.--required::before{
	content: "※必須";
	background: #D42A2A;
}
.en-US .cfLabel.--required::before {
	content: "※required";
}

/* 任意 */
.cfLabel.--any::before {
	content: "任意";
	background: #747373;
}
.en-US .cfLabel.--any::before {
	content: "any";
}

/*===============================================================================
プライバシーポリシー
================================================================================*/
.cfPolicy__container {
	max-height: 15vh;
	min-height: 10rem;
	padding: var(--g-24);
	border: 1px solid var(--cf-border-color);
	overflow: auto;
}
/* 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; */
}
.cfPolicy__btn{
	display: inline-block;
	width: 100%;
	min-width: fit-content;
	padding: var(--g-16);
	text-align: center;
	background: var(--c-main);
	border: 3px solid var(--c-main);
	color: var(--c-light);
	font-size: var(--fz-20);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
/* アニメーション */
.cfPolicy__btn:is(:hover, :focus){
	color: var(--c-main);
	background: var(--c-light);
}

/*===============================================================================
ボタンのスタイル
================================================================================*/
.cfBtn {
	text-align: center;
}
@media not all and (min-width: 768px){
	.cfBtn .c-btn{
		max-width: 100%;
	}
}
.cfBtn .c-btn{
	border: none;
}
.wpcf7-spinner {
	display: none;
}


/*===============================================================================
確認画面
================================================================================*/
/* フォントサイズを上げる */
#body_wrap:is(.myClass-contact-product-confirm, .myClass-contact-other-confirm) .main{
	font-size: 1.5rem;
}
#body_wrap:is(.myClass-contact-product-confirm, .myClass-contact-other-confirm) .contact__head{
	margin-bottom: var(--g-8);
}
.confirmList {
	--gap: 1rem;
	--count: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	max-width: var(--width-sm);
	margin-inline: auto;
	margin-bottom: 3rem;
}
.confirmList__item {
	display: flex;
	width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
	border: 1px solid var(--cf-border-color);
}
.confirmList__item span{
	padding: 0.5em;
}
.confirmList__item span:nth-of-type(1){
	width: 45%;
	background: var(--c-main--light);
}
.confirmList__item span:nth-of-type(2){
	width: 55%;
}

/*===============================
ボタン
=================================*/
.confirmBtn {
	display: block;
}
.confirmBtn.--submit {
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5rem;
}
.confirmBtn input {
	width: 100%;
	padding: 10px 1rem;
	background: #D54200;
	border: 1px solid var(--cf-border-color);
	font-weight: bold;
	color: var(--c-light);
	transition: background var(--ani-t--normal), color var(--ani-t--normal);
}
/*送信ボタンマウスホバー時*/
.confirmBtn input:hover {
	background: var(--cf-border-color);
	color: var(--c-light);
}
.confirmBtn.--back input{
	background: var(--c-light);
	color: var(--c-dark);
}
/*戻るボタンマウスホバー時*/
.confirmBtn.--back 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;
}