@charset "utf-8";
body{font-size:0;padding:0;margin:0;}
#frame{max-width:100%;overflow:hidden;}

*{padding:0;margin:0;box-sizing:border-box;}


#frame{padding:0;background:#f0f0f0;}
.questionlist dd select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}

#frame>section{font:400 3vw / 1 'noto sans jp';font-size:clamp(15px,3vw,18px);margin:0 auto;width:clamp(200px,100%,960px);padding:1em;box-sizing:border-box;}

form .required {background-color: #e02020;color: #fff;display:none;}
.errBox{display:none !important;}
.errBox.err{display:block !important;font-size:0.75em;color:#e02020;position:absolute;bottom:0em;}

.questionlist dd textarea,
.questionlist dd input[type="text"],
.questionlist dd select{background:#fff;font-size:clamp(15px,3vw,18px);font-weight:400;width:100%;outline:unset;border:0;}
.questionlist dd textarea{height:7.5em;}
.questionlist dd .input_check.input-OK{width:1em;}
.questionlist dd .input_check::before{content:'L';width:1em;height:1em;display:flex;justify-content:center;align-items:center;color:#e02020;border-radius:0%;margin-right:-1.5em;z-index:2;position:relative;opacity:0;transition:0.5s;transform:scale(-1,1) rotate(-45deg);}
.questionlist dd .input_check.input-OK::before{opacity:1;transition:0.5s;}


@media screen and (max-width:600px) {
.questionlist dd select,
.questionlist dd input[type="text"]{font-size:15px;}
}

[data-step="input"] .note p{line-height:1.5;font-size:15px;}
[data-step="input"] section:nth-of-type(2){padding:0 1em !important }
/*------------------------------------------*/

[data-step] .formBox dl{display:block;padding:5px 0;background:#fff;margin:10px 0;position:relative;}
[data-step] .formBox dl>dt{display:block;padding:0px;position:absolute;right:0;opacity:0.2;}
[data-step] .formBox dl>dd{display:block;padding:5px;min-height:1em;box-sizing:content-box;}
[data-step] .formBox >dl[data-name="お問い合わせ内容"]>dd{height:7.5em;overflow:auto;}

[data-step] [data-form="sendbutton"]{display:flex;justify-content:center;width:100%;flex-wrap:wrap;align-items:center;gap:2%;padding:1em 0;}
[data-step] section.note{padding:2em 1em 1em !important;}

[data-step="confirm"] [data-form="sendbutton"] form{display:block;width:49%;}

[data-step="input"] .formBox dl>dt{opacity:1;width:50%;text-align:right;display:flex;justify-content:right;align-items:center;height:1em;}
[data-step="input"] .formBox dl>dt>label{opacity:0;display:none;}

[data-step="input"] .formBox dl>dd{display:flex;}

[data-step="input"] [data-form="sendbutton"] button{border:0;outline:unset;display:block;padding:0;margin:0 auto;width:49%;background:unset;padding:0em 1em;}
[data-step="input"] [data-form="sendbutton"] button span{width:100%;display:block;
background:#999;color:#fff;border:0;outline:unset;display:block;padding:1em 0;height:3em;
transition:0.4s;font:600 clamp(15px,3vw,18px) / 1em 'Noto sans jp';letter-spacing:2px;border-radius:2em;
background:#ccc;color:#000;border-radius:2em;}

[data-step="input"] [data-form="sendbutton"] button[data-submit="ready"] span{background:#000;color:#fff;}

[data-step="confirm"] [data-form="sendbutton"] form input[type="submit"]{width:100%;display:block;
background:#999;color:#fff;border:0;outline:unset;display:block;padding:0;height:3em;
transition:0.4s;font:600 clamp(15px,3vw,18px) / 2 'Noto sans jp';letter-spacing:2px;border-radius:2em;}



body [data-step="confirm"] [data-form="sendbutton"] form input[value="finish"]+input{background:#000;color:#fff;}
body [data-step="confirm"] [data-form="sendbutton"] form input[value="input"]+input{background:#faed6d;color:#000;}

[data-step="thanks"]{display:flex;justify-content:center;align-items:stretch;height:100%;}
[data-step="thanks"]>section.note{display:flex;justify-content:center;align-items:center;padding:0 !important;margin:0;flex-direction:column;}
[data-step="thanks"]>section.note p.mltxt{line-height:1.8;padding:1em 0;}

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

[data-step] .formBox div.questionlist{display:block;padding:5px;background:#fff;margin:10px 0;position:relative;}
[data-step] .formBox div.questionlist>p{padding:5px;color:#666}
.checklist{display:flex;padding:5px;justify-content:left;align-items:center;flex-wrap:wrap;gap:2%;}
.checklist>li{display:flex;padding:5px;justify-content:left;align-items:center;}
.checklist>li input+label{color:#999;padding:0 0.5em 0 0.2em;display:block;}
.checklist>li input:checked+label{color:#000;}

[data-device="smp"] .checklist>li{}