/*********************************************************************
 お問い合わせフォーム 設定
*********************************************************************/

/* レスポンスメッセージ 設定
====================================================================*/
.wpcf7 form .wpcf7-response-output{
 margin: 0!important;
 padding: 8px 16px!important;
} 
.wpcf7 form.sent .wpcf7-response-output {
 color: var(--success-txt-color)!important;
 background: var(--success-bg-color)!important;
 border: var(--success-bor-color) solid 1px!important;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{
 color: var(--danger-txt-color)!important;
 background: var(--danger-bg-color)!important;
 border: var(--danger-bor-color) solid 1px!important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
 color: var(--warning-txt-color)!important;
 background: var(--warning-bg-color)!important;
 border: var(--warning-bor-color) solid 1px!important;
}

/* 入力フォームレイアウト 設定
====================================================================*/
.wpcf7-form > *:not(:first-child){
 margin-top: 16px;
}
@media screen and (min-width: 576px){
}@media screen and (min-width: 768px){
.wpcf7-form > *:not(:first-child){
 margin-top: 24px;
}
}@media screen and (min-width: 992px){
}@media screen and (min-width: 1200px){
.wpcf7-form > *:not(:first-child){
 margin-top: 32px;
}
}@media screen and (min-width: 1400px){
}

.wpcf7-form fieldset{
 padding: 0 8px 24px;
 border-bottom: var(--site-bor-color) solid 1px;
}
.wpcf7-form legend{
 display: flex;
 align-items: center;
 gap: 16px;
 font-weight: bold;
 margin-bottom: 8px;
}
.required-tag{
 display: inline-grid;
 place-items: center;
 padding: 0 8px;
 font-size: 1.4rem;
 font-size: clamp(1.4rem, 1vw, 1.6rem);
 font-weight: bold;
 color: #FFF;
 background: #FC272A;
}

.wpcf7-not-valid-tip{
 margin-top: 8px;
 font-weight: bold;
}


/* 確認レイアウト 設定
====================================================================*/
.confirm-area table{
 width: 100%;
 border-top: var(--site-bor-color) solid 1px;
 border-left: var(--site-bor-color) solid 1px;
}
.confirm-area th,
.confirm-area td{
 display: block;
 width: 100%;
 padding: 8px 16px;
 border-right: var(--site-bor-color) solid 1px;
 border-bottom: var(--site-bor-color) solid 1px;
}
.confirm-area th{
 background-color: var(--site-bg-color);
}
@media screen and (min-width: 768px){
.confirm-area th,
.confirm-area td{
 display: table-cell;
}
.confirm-area th{
 width: 30%;
 background-color: var(--site-bg-color);
}
.confirm-area td{
 width: 70%;
}
}


/* 完了レイアウト 設定
====================================================================*/
.complete-area{
}

.send-status{
 display: inline-grid;
 place-items: center;
 width: 100%;
 margin-bottom: 16px;
 padding: 8px;
 font-weight: bold;
}
.send-status.success{
 color: var(--success-txt-color);
 background: var(--success-bg-color);
}
.send-status.danger{
 color: var(--danger-txt-color);
 background: var(--danger-bg-color);
}


/* ボタン 設定
====================================================================*/
.content-form-btns{
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 8px;
 padding: 16px;
 background-size: auto auto;
 background-color: rgba(236, 236, 236, 1);
 background-image: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(226, 226, 226, 1) 3px, rgba(226, 226, 226, 1) 6px );
}
.content-form-btns .submit{
 width: 150px;
 padding: 0 16px;
 height: 48px;
 font-size: 1.8rem;
 font-size: clamp(1.8rem, 1vw, 2rem);
}
.wpcf7-spinner{
 margin: 0!important;
}