@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;}


.questionlist dd select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}

#frame>section{font:20px / 1 'noto sans jp';max-width:680px;margin:0 auto;
background:transparent;padding:1em;}
form .required {background-color: #e02020;color: #fff;}
.errBox{display:none;}
.errBox.err{display:block;font-size:0.75em;color:#e02020;}
.questionlist dt{display:flex;justify-content:left;align-items:center;}
.questionlist dt>label{display:flex;justify-content:left;align-items:center;padding:0.25em;}
.questionlist dt>label>span{padding:0.25em;border-radius:0.25em;font-size:0.875em;margin-right:0.5em;}
.questionlist dd{display:flex;justify-content:left;align-items:center;padding:0.5em 0;}
.questionlist dd input[type="text"],
.questionlist dd select{border:2px solid #000;padding:0.5em;background:#fff;font-size:0.875em;width:100%;outline:unset;border-radius:0.5em;}
.questionlist dd select{background:#fff no-repeat 98% 65% / 0.8em 0.8em;background-image:linear-gradient(45deg,#fff 50% ,transparent 50%),linear-gradient(315deg,transparent 50% ,#999 50%);}


.questionlist dd .input_check.input-OK{width:2em;}

.questionlist dd .input_check::before{content:'OK';width:2em;height:2em;color:#fff;
display:flex;justify-content:center;align-items:center;background:#e02020;border-radius:100%;
margin-right:-1.5em;z-index:2;position:relative;opacity:0;transition:0.5s;
transform:rotate(-15deg);box-shadow:0 0 0 2px inset;font-weight:bold;}
.questionlist dd .input_check.input-OK::before{opacity:01;transition:0.5s;}

.questionlist>section{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;}
.questionlist>section>div{width:48%;}

#mailForm01 .form-input-outer{background:#eee;padding:0.5em;}
#mailForm01 .form-input{background:#eee;padding:1em;box-shadow:0 0 0 0.1em #e02020;}
#mailForm01 button{border:0;outline:unset;padding:2em 0 1em;margin:0 auto;background:transparent;}
#mailForm01 button picture{display:block;border:0;}
#mailForm01 button picture>img{max-width:100%;border:0;}

.infoSSL{color:#fff;padding:1em 0.5em;}
.infoSSL dl{display:block;}
.infoSSL dl>*{font:0.8em / 1.2 'noto sans jp';}

@media screen and (max-width:600px) {
#frame>section{font-size:4vw}
.questionlist dt{flex-wrap:wrap;}
.questionlist dt>label{width:100%;}
.questionlist dt .errBox{display:block;width:100%;opacity:0;font-size:0.75em;}
.questionlist dt .errBox.err{opacity:1;}


.questionlist dd select,
.questionlist dd input[type="text"]{font-size:16px;padding:0.75em;}

}