@charset "utf-8";

/*========================

form.css

========================*/

/*---------------------------------------------
form
---------------------------------------------*/

/*---------------------------------------------
reset
---------------------------------------------*/
input,
button,
textarea,
select {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 margin: 0;
 margin-right: 0;
 padding: 0;
 background-color: var(--white);
 border: none;
 border-radius: 0;
 font-size: 1em;
 letter-spacing: normal;
 line-height: 1;
 outline: none;
 position: relative;
 max-width: 100%;
 vertical-align: middle;
}

select::-ms-expand {
 display: none;
}

input[type="text"],
input[type="checkbox"],
textarea,
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="submit"] {
 -webkit-appearance: none;
}

select {
 position: relative;
 max-width: 100%;
 outline: none;
 text-overflow:ellipsis;
 background: none transparent;
 vertical-align: middle;
 font-size: inherit;
 color: inherit;
 margin: 0 !important;
 padding: 0;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"] {
 border: none;
 border-radius: 0;
 font-size: 1.6rem;
 outline: none;
 background: none;
 border: 1px solid var(--gray_cc);
 border-radius: 3px;
 box-shadow: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 padding: 10px 20px;
 width: 100%;
}

select:hover {
 cursor: pointer;
 /*background-color: var(--white) !important;*/
}

fieldset {
 visibility:hidden;
}

/*---------------------------------------------
select
---------------------------------------------*/
select {
 position: relative;
 max-width: 100%;
 outline: none;
 text-overflow:ellipsis;
 background: none transparent;
 vertical-align: middle;
 font-size: inherit;
 color: inherit;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 margin: 0 !important;
 padding: 0;
 background-color:var(--white);
 border: 1px solid var(--gray_cc);
 border-radius: 6px;
 font-size: 1.5rem;
 line-height: 1.6;
 padding: 11px 31px 11px 16px;
 width: 100%;
 position: relative;
 z-index:2;
}

.select:after {
 position: absolute;
 top: 50%;
 right: 10px;
 margin-top: -7px;
 content: '\f107';
 color: var(--gray_dd);
 font-size: 1.3rem;
 font-family: var(--icon);
}

.select_group {
 align-items:center;
 display:flex;
 position: relative;
 z-index: 1;
 width:auto;
}

/*
.select_group:before {
 background-color: var(--gray_51);
 border-radius: 0 6px 6px 0;
 content: " ";
 height: 100%;
 right: 0;
 top: 0;
 position: absolute;
 z-index: 2;
 width: 45px;
}
*/

.select_group:hover:before {
 cursor:pointer;
}

.select_group:after {
 content: "\f078";
 color: var(--gray_cc);
 font-family: var(--icon);
 right: 18px;
 top: 50%;
 margin-top: -6px;
 position: absolute;
 font-size: 1.0rem;
 z-index: 3;
 font-weight: 900;
}

.select_box {
 font-size: 1.6rem;
 padding: 20px 25px 20px 20px;
 border: 1px solid var(--gray_cc);
 border-radius: 4px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 text-overflow:ellipsis;
 background-color: transparent;
 margin: 0;
 overflow-x: hidden;
 position: relative;
 width: 100%;
 z-index: 4;
}

option:hover {
 background-color: var(--selectHoverCol);
 color: var(--white);
}

option:checked {
 box-shadow: 0 0 1em 100px var(--selectedCol) inset;
}

.select_group:hover:before {
  background-color: var(--gray_51);
}

.select_group select {
 font-size:1.5rem;
 width:200px;
 z-index:2;
}

/*---------------------------------------------
checkbox
---------------------------------------------*/
.checkbox-input {
 display: none;
}

.checkbox-parts {
 padding-left: 18px;
 position: relative;
 font-size: 1rem;
 display: inline-block;
 text-align: left;
}

.checkbox-parts::before {
 background-color: var(--white);
 border-radius: 2px;
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 15px;
 margin-top: -6px;
 width: 16px;
 height: 16px;
 border: 1px solid var(--gray_cc);
}

.checkbox-parts.left::before {
 left: 0;
}

.checkbox-input:checked+.checkbox-parts {
 background-color: var(--light_blue);
}

.checkbox-input:checked+.checkbox-parts::after {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 20px;
 margin-top: -7px;
 margin-left: 0;
 width: 8px;
 height: 14px;
 transform: rotate(40deg);
 -webkit-transform: rotate(40deg);
 -moz-transform: rotate(40deg);
 border-bottom: 4px solid var(--blue_green);
 border-right: 4px solid var(--blue_green);
}

.checkbox-input:checked+.checkbox-parts.left::after {
 left: 0;
}

/*---------------------------------------------
textarea
---------------------------------------------*/
textarea {
 background-color: var(--white);
 border: 1px solid var(--gray_cc);
 font-size:1.6rem;
 min-height:200px;
 line-height:1.6;
 padding: 5px;
 width: 100%;
}

textarea:disabled {
 background-color: var(--gray_f2);
 border: 1px solid var(--gray_9f);
}

/*---------------------------------------------
text
---------------------------------------------*/
input[type="text"][disabled] {
 background-color: var(--gray_f2);
 border: 1px solid var(--gray_9f);
}

/*---------------------------------------------
radio
---------------------------------------------*/
.radio-input {
 display: none;
}

.radio-parts {
 background-color: var(--white);
 padding-left: 24px;
 position: relative;
 margin-right: 0;
 vertical-align: middle;
 line-height: 1;
 display: inline-block;
}

.radio-parts::before {
 background-color: var(--white);
 content: " ";
 display: block;
 position: absolute;
 top: 50%;
 left: 12px;
 width: 18px;
 height: 18px;
 border: 1px solid var(--gray_cc);
 border-radius: 50%;
 margin-top: -9px;
}

.radio-input:checked + .radio-parts {
 background-color: var(--light_yellow);
 background-color:rgb(254,229,6,0.5);
 font-weight: 600;
}

.radio-input:checked + .radio-parts::after {
 content: " ";
 display: block;
 position: absolute;
 top: 50%;
 left: 16px;
 width: 10px;
 height: 10px;
 background: var(--green);
 border-radius: 50%;
 margin-top: -5px;
}

/*---------------------------------------------
checkbox
---------------------------------------------*/
input[type="checkbox"] + label {
 display:block;
 width:100%;
}

input[type="checkbox"] + label + span {
 padding:20px 30px 20px 60px;
 position:relative;
 width:100%;
}

input[type="checkbox"] + span:before,
input[type="checkbox"] + label:before {
 border: 1px solid var(--gray_cc);
 border-radius: 3px;
 background-color: var(--white);
 content:" ";
 width:18px;
 position:absolute;
 left:20px;
 top:50%;
 margin-top:-9px;
 height:18px;
}

input[type="checkbox"]:checked + span:after,
input[type="checkbox"]:checked + label:after {
 content: "\f00c";
 font-size:1.6rem;
 font-weight:600;
 font-family: var(--icon);
 position: absolute;
 left: 22px;
 top: 50%;
 margin-top:-8px;
 color: var(--green);
 font-style: normal;
}

/*---------------------------------------------
form_table
---------------------------------------------*/
#form_table {
 display:flex;
 flex:1;
 justify-content:center;
 padding:0;
}

#form_table #form_table_cont {
 border-radius:6px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:0;
}

#form_table #form_table_cont form {
 width:100%;
}

#form_table #form_table_cont ul.form_list{
 display:flex;
 flex-direction:column;
}

#form_table #form_table_cont ul.form_list > li {
 border-top:1px solid var(--gray_cc);
 display:flex;
 flex:0 1 100%;
 flex-direction:column;
 padding:20px 0;
 row-gap:15px;
}

#form_table #form_table_cont ul.form_list > li > dl {
 align-items:start;
 display:flex;
 flex:0 1 100%;
 flex-wrap:wrap;
 justify-content:start;
 row-gap:20px;
 }

#form_table #form_table_cont ul.form_list > li > dl > dt {
 align-items:center;
 display:flex;
 flex:0 0 200px;
 padding-top:15px;
 justify-content:start;
 min-width:180px;
}

#form_table #form_table_cont ul.form_list > li > dl > dt > span:first-child {
 background-color:var(--gray_99);
 border-radius:3px;
 color:var(--white);
 font-size:1.3rem;
 margin-right:10px;
 padding:5px;
}

#form_table #form_table_cont ul.form_list > li > dl > dt > span.nessesary {
 background-color:var(--red);
 flex:0 0 40px;
 text-align:center;
}

#form_table #form_table_cont ul.form_list > li > dl > dt > span.any {
 background-color:var(--green);
}

#form_table #form_table_cont ul.form_list > li > dl > dt > label {
 flex:1;
 font-size:1.5rem;
 font-weight:600;
 line-height:1.6;
 justify-content:start;
}

#form_table #form_table_cont ul.form_list > li > dl > dd {
 align-items:start;
 display:flex;
 flex:1;
 flex-direction:column;
 justify-content:start;
 row-gap:20px;
 padding:0;
 min-width:500px;
 width:100%;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > span {
 display:flex;
 flex-direction:column;
 row-gap:15px;
 width:100%;
}

#form_table #form_table_cont ul.form_list > li > dl > dd .inline_group {
 align-items:center;
 column-gap:10px;
 display:flex;
 position:relative;
 width:100%;m,
}

#form_table #form_table_cont ul.form_list > li > dl > dd .inline_group > span:last-child {
 font-size:1.5rem;
 z-index:2;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol {
 border-top:1px solid var(--gray_cc);
 border-radius: 6px;
 display:flex;
 flex-direction:column;
 width:100%;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li {
 display:flex;
 flex-direction:column;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li > label {
 align-items:center;

 border-right:1px solid var(--gray_cc); 
 border-bottom:1px solid var(--gray_cc);
 border-left:1px solid var(--gray_cc);
 display:flex;
 min-height:58px;
 justify-content:space-between;
 padding:15px 20px 15px 50px;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:first-child:not(:first-child),
#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:first-child > label {
 border-radius: 6px;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:last-child,
#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:last-child > label {
 /*border-top:none;*/
 border-radius:6px;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:first-child:last-child,
#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:first-child:last-child > label {
 border-radius: 6px;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li > label > span:first-child {
 font-size:1.6rem;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li > label > span:nth-child(2) {
 align-items:flex-end;
 display:flex;
 flex-direction:column;
 font-size:1.1rem;
 row-gap:5px;
 justify-content:center;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li > label span:nth-child(2) span {
 font-size:1.1rem;
}

#form_table #form_table_cont ul.form_list > li > dl > dd .pref_auto_input_button a {
 background-color:var(--blue);
 border-radius:6px;
 color:var(--white);
 display:block;
 font-size:1.1rem;
 font-weight:600;
 padding:10px 15px;
}

#form_table #form_table_cont ul.form_list > li > dl > dd .pref_auto_input_button a:hover {
 opacity:0.7;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li input[type="checkbox"]:checked + span,
#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li input[type="checkbox"]:checked + label,
input[type="checkbox"]:checked + label {
 background-color:rgb(254,229,6,0.5);
 border-radius: 6px 6px 0 0;
 font-weight:600;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:last-child input[type="checkbox"]:checked + span,
#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:last-child input[type="checkbox"]:checked + label {
 border-radius: 0;
}

#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:first-child input[type="checkbox"]:checked + span,
#form_table #form_table_cont ul.form_list > li > dl > dd > ol > li:first-child input[type="checkbox"]:checked + label {
 border-radius: 6px 6px 0 0;
}

#form_table #form_table_cont ul.form_list > li > dl dd input.w15 { width:15%; }
#form_table #form_table_cont ul.form_list > li > dl dd input.w20 { width:20%; }
#form_table #form_table_cont ul.form_list > li > dl dd input.w30 { width:30%; }
#form_table #form_table_cont ul.form_list > li > dl dd input.short { width:60%; }
#form_table #form_table_cont ul.form_list > li > dl dd input.middle { width:80%; }
#form_table #form_table_cont ul.form_list > li > dl dd input.long { width:100%; }

/*---------------------------------------------

wpcf7-style

---------------------------------------------*/
.wpcf7-spinner {
 position:absolute;
 top:50%;
 right:0;
 margin-top:-12px;
}

.wpcf7-form-control-wrap {
 display: flex;
 flex-direction: column;
 row-gap:20px;
}

.date-select span {
 width:auto;
}

.wpcf7-form-control-wrap {
 width:100%;
}

.wpcf7-checkbox,
.wpcf7-radio {
 display:flex;
 flex-direction:column;
 width:100%;
}

.wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-radio .wpcf7-list-item label {
 background-color:var(--white);
 border-right: 1px solid var(--gray_cc);
 border-bottom: 1px solid var(--gray_cc);
 border-left: 1px solid var(--gray_cc);
 display:flex;
 position:relative;
}

.wpcf7-checkbox .wpcf7-list-item label input,
.wpcf7-radio .wpcf7-list-item label input {
 display: none;
}

.wpcf7-checkbox .wpcf7-list-item label span,
.wpcf7-radio .wpcf7-list-item label span {
 position:relative;
 margin-right:0;
 vertical-align:middle;
 line-height:1.4;
 display:inline-block;
 padding: 10px 10px 10px 42px;
 position:relative;
}

.wpcf7-checkbox .wpcf7-list-item label span:before,
.wpcf7-radio .wpcf7-list-item label span:before {
 background-color:var(--white);
 content: " ";
 display: block;
 position: absolute;
 top: 50%;
 left: 12px;
 width: 18px;
 height: 18px;
 border: 1px solid var(--gray_cc);
 border-radius: 2px;
 margin-top: -9px;
}

.wpcf7-checkbox .wpcf7-list-item label input:checked + span,
.wpcf7-radio .wpcf7-list-item label input:checked + span {
 background-color:var(--light_yellow);
 font-weight:600;
}

.wpcf7-checkbox .wpcf7-list-item label input:checked + span::after,
.wpcf7-radio .wpcf7-list-item label input:checked + span::after {
 content: "\f00c";
 font-size: 1.6rem;
 font-weight: 600;
 font-family: var(--icon);
 position: absolute;
 left:15px;
 top: 50%;
 margin-top: -10px;
 color: var(--green);
 font-style: normal;
}

.wpcf7-checkbox .wpcf7-list-item.first,
.wpcf7-radio .wpcf7-list-item.first {
 border-radius: 6px 6px 0 0;
 border-top: 1px solid var(--gray_cc);
}

.wpcf7-checkbox .wpcf7-list-item.first label,
.wpcf7-radio .wpcf7-list-item.first label,
.wpcf7-checkbox .wpcf7-list-item.first label span,
.wpcf7-radio .wpcf7-list-item.first label span {
 border-radius: 6px 6px 0 0;
}

.wpcf7-checkbox .wpcf7-list-item.last,
.wpcf7-radio .wpcf7-list-item.last {
 border-radius: 0 0 6px 6px;
}

.wpcf7-checkbox .wpcf7-list-item.last label,
.wpcf7-checkbox .wpcf7-list-item.last label span,
.wpcf7-radio .wpcf7-list-item.last label,
.wpcf7-radio .wpcf7-list-item.last label span {
 border-radius: 0 0 6px 6px;
}

.form_table dl dd.list .wpcf7-list-item {
 margin:0;
 padding:0;
 width:100%;
}

.form_table dl dd.list .wpcf7-list-item label {
 width:100%;
}

.wpcf7-radio .wpcf7-list-item label span {
 width:100%;
}

.form_table dl dd.list .wpcf7-list-item label:hover {
 background-color:var(--light_yellow);
 cursor:pointer;
}

.wpcf7-not-valid-tip {
 background-color: #f2dede;
 border-color: #eed3d7;
 color: #b94a48;
 display: flex;
 font-size:1.4rem;
 padding: 15px 20px;
 gap: 5px;
 flex-wrap: wrap;
 margin: 0;
 border: 1px solid transparent;
 border-radius: 4px;
 line-height: 1.6;
 min-width: 200px;
 text-align:center;
 position: relative;
 width: 100%;
}

/*---------------------------------------------
termscheck
---------------------------------------------*/
.termscheck {
 align-items:center;
 display:flex;
 flex-direction:column;
 justify-content: center;
 row-gap:20px;
 margin-top:20px;
 margin-bottom:20px;
 overflow:hidden;
 padding:0;
 width:100%;
}

.termscheck dl {
 background-color:var(--gray_f2);
 border-radius:6px;
 display:flex;
 flex-direction:column;
 padding:35px 20px 20px;
 row-gap:20px;
 width:100%;
}

.termscheck dl dt {
 font-size:1.5rem;
 font-weight:600;
 padding:0;
 text-align:center;
}

.termscheck dl dd {
 align-items:center;
 display:flex;
 justify-content: center;
 flex-direction:column;
 padding:0;
 row-gap:15px;
 text-align:center;
}

.termscheck dl dd p {
 text-align:center;
}

.termscheck dl dd label {
 display:inline-block;
 padding:0;
 width:100%;
}

.termscheck dl dd label input[type="checkbox"]:checked + span {
 background-color: var(--green); 
 border-radius:6px;
 color:var(--white);
}

.termscheck dl dd > span {
 display:block;
 font-size:1.3rem;
 margin-bottom:10px;
}

.termscheck dl dd > span a {
 color:var(--link);
}

.termscheck .alert {
 width:100%;
}

.termscheck .wpcf7-checkbox .wpcf7-list-item.first,
.termscheck .wpcf7-radio .wpcf7-list-item.first {
 border-top:none;
 margin:0;
}

.termscheck .wpcf7-checkbox .wpcf7-list-item.last label span,
.termscheck dl dd > span {
 border:none;
 display:flex;
 flex-direction:column;
 row-gap:15px;
 margin:0;
}

.termscheck .wpcf7-checkbox .wpcf7-list-item.last label,
.termscheck dl dd span label {
 border:none;
 border-radius:6px;
}

.agree_btn {
 align-items:center;
 /*background-color:var(--white);*/
 border:1px solid var(--gray-dd);
 border-radius:3px;
 display:flex;
 justify-content: center;
 margin:0;
 padding:0;
 text-align:center;
 min-width:200px;
 width:100%;
}

.agree_btn span {
 margin:0;
 width:100%;
}

.agree_btn label span {
 display:inline-block;
 font-size:1.6rem;
 padding:15px 30px;
 line-height:1.4;
 vertical-align:middle;
 position:relative;
}

.agree_btn label input[type="checkbox"] + span:after {
 margin-top:-11px;
}

.agree_btn .wpcf7-checkbox .wpcf7-list-item label {
 border:none;
}

.agree_btn .wpcf7-checkbox .wpcf7-list-item label span {
 border-radius:6px;
}

ul.btn_link_area {
 align-items: center;
 border:none;
 column-gap:30px;
 display:flex;
 flex-direction:unset;
 justify-content:center;
}

ul.btn_link_area > li {
 border-top:none !important;
 max-width: 250px;
 position:relative;
 width:100%;
}

ul.btn_link_area > li.send_btn input,
ul.btn_link_area > li.send_btn button {
 background-color: var(--blue);
 border: 1px solid var(--blue);
 border-radius: 30px;
 color: var(--white);
 display: inline-block;
 text-align: center;
 font-size: 1.6rem;
 min-width: 250px;
 padding: 20px 45px;
 position: relative;
}

ul.btn_link_area > li.send_btn input:after,
ul.btn_link_area > li.send_btn button:after {
 content: "\f054";
 color: var(--white);
 font-family: var(--icon);
 right: 13px;
 top: 50%;
 margin-top: -6px;
 position: absolute;
 font-size: 1.0rem;
 z-index: 3;
 font-weight: 400;
}

ul.btn_link_area > li.back_btn input,
ul.btn_link_area > li.back_btn button {
 background-color:var(--white);
 border:1px solid var(--blue);
 color:var(--blue);
 border-radius: 30px;
 display: inline-block;
 text-align: center;
 font-size: 1.6rem;
 max-width: 250px;
 padding: 20px 45px;
 position: relative;
}

ul.btn_link_area > li.back_btn input:after,
ul.btn_link_area > li.back_btn button:after {
 content: "\f053";
 color: var(--blue);
 font-family: var(--icon);
 left:13px;
 top: 50%;
 margin-top: -6px;
 position: absolute;
 font-size: 1.0rem;
 z-index: 3;
 font-weight: 400;
}

.btn_link_area li input:hover,
.btn_link_area li button:hover {
 opacity:0.7;
}

.recaptcha {
 align-items:center;
 display:flex; 
 justify-content:center;
 flex-direction:column;
 row-gap:15px;
 margin-top:15px;
}

.recaptcha .alert {
 width:100%;
}

/*------------------------------------------------------------
send-popup
------------------------------------------------------------*/
#popup_window {
 /*background-color:var(--black);*/
 /*opacity:0.7;*/
 position:fixed;
 height:100%;
 width:100%;
 top: 0;
 left: 0;
 z-index: 1010;
}

#popup_window:before {
 background-color:var(--black);
 content: '';
 position: absolute;
 opacity:0.2;
 top: 0;
 left: 0;
 height:100%;
 width:100%;
 z-index: 1011;
}

#popup_window .sending-popup {
 align-items:center;
 background-color:var(--white);
 border-radius:10px;
 display:flex;
 flex-direction:column;
 height:200px;
 justify-content:center;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 row-gap:15px;
 width:200px;
 z-index: 1012;
}

#popup_window .sending-popup .loader {
 /*visibility: hidden;*/
 display: inline-block;
 background-color: var(--blue);
 opacity: .75;
 width: 24px;
 height: 24px;
 border: none;
 border-radius: 100%;
 padding: 0;
 margin: 0;
 position:relative;
}

#popup_window .sending-popup .loader:before {
 content: '';
 position: absolute;
 background-color: #fbfbfc;
 top: 4px;
 left: 4px;
 width: 6px;
 height: 6px;
 border: none;
 border-radius: 100%;
 transform-origin: 8px 8px;
 animation-name: spin;
 animation-duration: 1s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

#popup_window .sending-popup .loader:after {
 content: none;
 color: var(--white);
 font-family: var(--icon);
 font-size: 1rem;
 margin-top: -8px;
 right: 20px;
 position: absolute;
 top: 50%;
 opacity: .5;
}

#popup_window .sending-popup p {
 color:var(--gray_33);
 font-size:1.6rem;
}

/*------------------------------------------------------------
alert-box
------------------------------------------------------------*/
.wpcf7 form .wpcf7-response-output {
 border: 2px solid #eed3d7;
 margin: 0 auto;
 padding: 15px 30px 15px 45px;
 border-radius:6px;
 position: fixed;
 bottom:20px;
 width:calc(100% - 80px);
 left: calc(40px);
 display: flex;
 justify-content: center;
 font-size: 1.6rem;
 z-index:101;
 opacity:0;
}

.wpcf7 form.invalid .wpcf7-response-output {
 -moz-animation: fadeOut 1s ease-out 5s forwards;
 -webkit-animation: fadeOut 1s ease-out 5s forwards;
 -o-animation: fadeOut 1s ease-out 5s forwards;
 animation: fadeOut 1s ease-out 5s forwards;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 opacity:1;
}

.wpcf7 form .wpcf7-response-output:before {
 content:"\f071";
 color:#b94a48;
 font-family: var(--icon);
 font-weight:700;
 left:20px;
 top:50%;
 margin-top:-12px;
 position:absolute;
}

.wpcf7 form.sent .wpcf7-response-output {
 background-color: #dff0d8;
 border-color: #d6e9c6;
 color: #468847;
}

.wpcf7 form.sent .wpcf7-response-output:before {
 color: #468847;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
 background-color: #f2dede;
 border-color: #eed3d7;
 color: #b94a48;
}

.wpcf7 form.failed .wpcf7-response-output:before {
 color:#b94a48;
}

.wpcf7 form.spam .wpcf7-response-output {
 background-color: #fcf8e3;
 border-color: #fbeed5;
 color: #c09853;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
 background-color: #f2dede;
 border-color: #eed3d7;
 color: #b94a48;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
 border-color: #eed3d7;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*--- 確認ボタン押下時にエラー表示（表示はjs制御） --*/
.wpcf7-form-control-wrap > .wpcf7-not-valid-tip {
 /*display: none;*/
}

.wpcf7-form-control-wrap.is-show > .wpcf7-not-valid-tip {
 display: block;
 text-align:left;
}