@charset "UTF-8";

:root{
    --light-gray: #919191;
    --gray: #3A3A3A;
    --brown: #603813;
}
input, select, textarea, button{
all:unset;
display: inline-block;
position: relative;
border: var(--light-gray) solid 1px;
border-radius: 4px;
font-size: 2rem;
}

form *{ box-sizing: border-box; }

form *:focus {
outline: rgba(96,56,19,0.5) solid 3px;
/* border: rgba(145,145,145,0) solid 1px; */
}


label > span{
display: inline-block;
}

span:has(input){
display: inline-block;
}

select{
padding: 8px 35px 8px 12px;
}

/* 下向き矢印 */
label{
display: block;
position: relative;
}
label:has(span select)::after{
content: "";
display: block;
position: absolute;
pointer-events: none;
top: 40%;
right: 13px;
background-color: var(--gray);
height: calc(tan(60deg) * 9px / 2);
width: 11px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
/* transform: translateY(-50%); */
}


dd:has(select){
display: flex;
}

[type="text"],
[type="email"],
[type="tel"]{
padding: 8px 12px;
width: 100%;
}

span:has([type="text"]),
span:has([type="email"]),
span:has([type="tel"]){
position: relative;
width: calc(100% - 65px);
}

label:has(select) + span,
span:has(input) + span:not(.item_notes){
font-size: 1.8rem;
vertical-align: bottom;
margin: auto 15px 0 10px;
}

.item_notes{
display: block;
margin-top: 5px;
}

/* バリデーション動作 */
.wpcf7-not-valid-tip{
display: none;
}

.wpcf7-list-item-label{
font-size: 1.6rem;
}

/* チェックボックス */
input[type="checkbox"]{
width: 20px;
height: 20px;
border: var(--light-gray) solid 1px;
border-radius: 4px;
margin-right: 12px;

}

span:has(.wpcf7-checkbox){
margin: 15px auto 0 0;
}
span.wpcf7-list-item{
margin: 0;
}
label:has(> input[type="checkbox"]){
display: flex;
align-items: center;
cursor: pointer;
}
 
.wpcf7-checkbox > span{
display: block;
}
span:has(span:nth-child(2)) > span:not(.wpcf7-list-item.first.last):not(.wpcf7-acceptance){
margin: auto 0 10px 0;

}
span:has(span:nth-child(2)) > span:not( > span.wpcf7-list-item.first.last){
margin: auto 0 0 0;
}


label:has(> input[type="checkbox"]:checked)::after{
position: absolute;
content: '';
width: 19px;
height: 11px;
top: -2px;
left: 0;
border-left: 5px solid var(--gray);
border-bottom:  5px solid var(--gray);
transform: rotate(-45deg);
}

/* textarea */
textarea{
width: 100%;
padding: 13px;
}

/* 確認しましたチェックボックス */

[data-name="acceptance"]{
display: block;
width: 100%;
}
[data-name="acceptance"] span{
display: block;
}
.wpcf7-acceptance{
width: 360px;
margin: 30px auto 30px 210px;
}

/* 入力内容を確認しました。ボタン */
/*はじめはチェックできないようにしておく */
/*
label:has(input[name="acceptance"]){
opacity:0.5;
cursor: not-allowed;
}
input[name="acceptance"]{
pointer-events: none;
}
label.ready:has(input[name="acceptance"]){
opacity:1;
cursor: pointer;
}
label.ready input[name="acceptance"]{
pointer-events: auto;
}
*/

p.form_submit{ margin-bottom: 70px; }
/* Submit Button */
[type="submit"],
.confirm{
display: block;
margin: auto;
padding: 12px;
width: 100%;
max-width: 500px;
text-align: center;
font-size: 2rem;
border: var(--light-gray) solid 2px;
background-color: var(--brown);
color:#fff;
opacity: 0.3;
border-radius: 5px;
}
/* div:has(label.ready input[name="acceptance"]:checked) + p [type="submit"]{ */
div:has(input[name="acceptance"]:checked) [type="submit"]{
opacity: 1;
cursor: pointer;
pointer-events: auto!important;
}

form dd div{
margin-bottom: 15px;
}

form.validcheckd .wpcf7-validates-as-required:not(.valid){
/* box-shadow: 0 0 0 3px #FF86A2 inset; */
box-shadow: 0 0 0 9999px rgba(222,63,63,0.25) inset;
}

.form_error_message{
background-color: rgba(222,63,63, 0.8);
color:#fff;
width: 100%;
font-size: 1.6rem;
padding: 12px;
border-radius: 5px;
text-align: center;
margin-bottom: 30px;
height: auto;
}
.form_error_message_wrapper{
height: 0;
opacity: 0;
overflow: hidden;
transition: height 0.3s;
}
.validcheckd .form_error_message_wrapper.appear{
height: 70px;
opacity: 1;
}


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

/* エラー時のメッセージ表示 */
/*
.wpcf7 .screen-reader-response{
position: relative;
clip:inherit;
clip-path:none;
word-wrap: normal !important;
box-sizing: border-box;
}
.wpcf7 .screen-reader-response p{
font-size: 1.8rem;
}
.wpcf7 .screen-reader-response.error{
width: 100%;
max-width: 800px;
position: relative;
padding: 15px;
background-color: #FF7192;
color:#fff;
border-radius: 5px;
text-align: center;
margin: 30px auto 0;
height: auto;
}
*/

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

/* spinner */
#loading_spinner_wrapper{
position: fixed;
z-index:10000;

/* display: flex; */
display:none;
opacity: 0;

justify-content: center;
align-items: center;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.30);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
width: 0;
height: 0;
pointer-events: all;
/* cursor: not-allowed; */
}
#loading_spinner_wrapper.now_submit,
#loading_spinner_wrapper.submit_error{
display: flex;
opacity: 1;
animation-name: modalback_on;
animation-duration: 0.3s;
animation-timing-function:ease;
animation-fill-mode:forwards;
width: 100%;
height: 100svh;
}
#loading_spinner_wrapper.now_submit > #loading_spinner{ display: inline-block; }

#loading_spinner_wrapper.submit_error{
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
}

#loading_spinner_wrapper.submit_error > #loading_spinner{
display: none;
}

@keyframes modalback_on {
    0%{
        display:none;
        opacity: 0;
        width: 0;
        height: 0;
    }
    0% {
        display: flex;
        width: 100%;
        height: 100svh;
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

#loading_spinner{
display: inline-block;
vertical-align: middle;
color: #ffffff;
line-height: 1;
width: 5em;
height: 5em;
border: 0.7em solid rgba(255,255,255,0.40);
border-top-color: currentColor;
border-radius: 50%;
box-sizing: border-box;
animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.now_submit{ pointer-events: none; }

.cf7-cf-turnstile{
display: flex;
justify-content: flex-end;
margin-bottom: 0!important;
}