@charset "UTF-8";
/* CSS Document */
/*20190705form css*/

.decoration1{
    background-color: #E0E0E0;
    border-radius:5px
    width: 40px;
}

.decoration2{
    background-color: #E0E0E0;
    border-radius:5px
   
}

.decoration3{
    background-color: #E0E0E0;
    border-radius:5px
   
}

.font-style{
    font-size: 12px;
}


.form_tbl table {
    width: 100%;
    border: none;
}


.form_tbl th {
    display: block;
    width: 100%;
    border: none!important;
    background: #0059d4;
    color: #fff;
    font-size: 16px;
}

.form_tbl td {
    display: block;
    width: 100%;
    max-width: 92vw;
    border: none!important;
    margin-bottom: 13px;
    box-sizing: border-box;
}

.q3 .form_tbl td{
    max-width: 100%;
}



.form_tbl input, select, textarea {
    text-indent: 1em;
    padding: 10px 0;
    width: 100%;
}


.form_tbl .postcode1 {
    width: 20%;
    padding: 10px 0;
}

.form_tbl .postcode2 {
    width: 30%;
    padding: 10px 0;
}

.form_tbl .city{
     width: 40%;
     padding-bottom: 10px;
}

.form_tbl .address{
    width: 100%;
}

.box2{
    padding-bottom: 15px;
}

.box3{
    padding-bottom: 15px;
}

.form_tbl input.prefecture {
    width: 20%;
    padding: 10px 0;
}


.policy{
    height: 300px;
    overflow-y: scroll;
}
.policy>p{
    display: block;
    margin-bottom: 10px;
}


.form_tbl input.tel {
    text-indent: 1em;
    padding: 10px 0;
    width: 27%;
}
.form_tbl input.zip {
    text-indent: 1em;
    padding: 10px 0;
    width: 30%;
}
.form_tbl input[type=date] {
    text-indent: 1em;
    padding: 10px 0;
    width: 25%;
    margin-right: 15px;
}
.form_tbl input[type=date] {
    text-indent: 1em;
}
.form_tbl input[type=time] {
    text-indent: 1em;
    padding: 10px 0;
    width: 25%;
}
.form_tbl input[type=text]#naiyou:invalid {
    border: solid 1px red;
}
.form_tbl input[type=text]#naiyou:invalid + .help_naiyou::before {
    content: 'お問い合わせ内容をご入力ください。'
}
.form_tbl input[type=date]:out-of-range {
    border: solid 1px red;
}
.form_tbl input[type=date]:out-of-range + .help_text::before {
    content: '本日以降の日付を選択してください'
}
.form_tbl input[type=time]:out-of-range {
    border: solid 1px red;
}
.form_tbl input[type=time]:out-of-range + .help_text::before {
    content: '9:00～20:00の間で選択してください'
}
.form_tbl input[type=text]#user_name:invalid + .help_text_name::before {
    content: '全角カタカナのみ使用可能です。'
}
.form_tbl input[type=text]#user_name:invalid {
    border: solid 1px red;
}
.form_tbl input[type=tel].tel:invalid {
    border: solid 1px red;
}
.form_tbl input[type=tel].tel:invalid + .help_text::before {
    content: '半角数字のみでご記入ください。'
}
.form_tbl input[type=text].zip:invalid {
    border: solid 1px red;
}
.form_tbl input[type=text].zip:invalid + .help_text::before {
    content: '半角数字のみでご記入ください。'
}
.form_tbl input[type=email]#user_email:not(:focus-visible):invalid {
    border: solid 1px red;
}
.form_tbl input[type=email]#user_email:not(:focus-visible):invalid + .help_email::before {
    content: 'メールアドレスとして不正です。'
}
.form_tbl input[type=email]#user_email2:not(:focus-visible):invalid {
    border: solid 1px red;
}
.form_tbl input[type=email]#user_email2:not(:focus-visible):invalid + .help_email2::before {
    content: 'メールアドレスとして不正です。'
}

.form_tbl input, select, textarea {
    border: 1px solid #ddd;
}
.form_tbl input.radio {
    width: inherit;
}
label span.must {
    font-size: 70%;
    margin-left: 10px;
    color: #fff;
    background: rgb(255, 110, 0);
    padding: 4px 10px 5px;
    font-size: 13px;
    margin-bottom: 2px;
}
.submitbtn {
    text-align: center;
    margin-top: 20px;
}
input[type=submit] {
    width: auto !important;
    padding: 15px 30px 12px 12px;
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;
    border: solid 1px #0f9ada;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    font-size: 20px;
    font-weight: bold;
}
input[type="submit"]:hover {
    width: auto !important;
    padding: 15px 30px 12px 12px;
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background: #0f9ada;
    border: solid 1px #0f9ada;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    font-size: 20px;
    font-weight: bold;
}
input[type=submit][disabled] {
    width: auto !important;
    padding: 15px 30px 12px 12px;
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background: #ddd;
    border: solid 1px #ddd;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    font-size: 20px;
    font-weight: bold;
}
#submitBtn{
    margin: 0px auto;
    display:block;
}
input[type=radio] {
    width: 30px;
    height: 15px
}

.agree_inactive,
.agree_active{
    transition: all 0.3s;
    color:#fff;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
}
.agree_inactive{
    background-color: #ddd;
}
.agree_active{
    background-color: rgb(255, 110, 0);
}
.backbtn {
    width: 290px;
    font-size: 20px;
    margin: 0 auto;
    margin-top: 40px;
    font-weight: bold;
    padding: 16px 5px 15px 5px;
    text-align: center;
    /* padding: 0.25em 0.5em; */
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;
    border: solid 1px #0f9ada;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    text-align: center;
}
.backbtn a:visited {
    color: #fff;
}
.backbtn a:link {
    color: #fff;
}
.error {
    color: #FF0000;
}
.success {
    color: #5cb85c;
}


.box{
  flex-direction: column;
}

.agree{
    text-align: center;
    margin-top: 20px;
}



.first_radio td input{
    display: none;
}
.first_radio td label{
    display: block;
    width: 100%;
    background-color: #ddd;
    padding: 5px 0;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-left: 35px;
    position: relative;
    transition: all 0.3s;
}
.first_radio td label::before{
    content: '〇';
    color: #333;
    position: absolute;
    top: 15%;
    left: 3%;
}
.first_radio td input:checked + label{
    background-color: rgb(255, 110, 0);
    color: #fff;
    font-weight: bold;
}
.first_radio td input:checked + label::before{
    content: '●';
    color: #fff;
}

.flex_box{
    margin-bottom: 10px;
    align-items: center;
}

.flex_box div{
    margin-right: 10px;
}

.flex_box input.prefecture{
        width: 30%;
        margin-right:10px;
    }
.flex_box input.city{
    width: 60%;
}

.flex_box input.prefecture,
.flex_box input.city{
    margin-left:5px;
}

#checkBtn{
    display: inline;
    width: auto;
    margin-right: 10px;
    vertical-align: text-top;
}

.sp{
    display: none;
}

.postCode_flex{
    display: flex;
    align-items: center;
}
.postCode_flex+span{
    display: block;
    margin: -15px auto 10px;
}
.postCode_flex>span{
    display: block;
    width: 23%;
}
.postCode_flex>div{
    width: 75%;
}

@media screen and (min-width:699px){
    .postCode_flex>span{
        width: 12%;
    }
    .flex_box input.prefecture{
        width: 15%;
        margin-right:20px;
    }
    .flex_box input.city{
        width: 30%;
    }
}

@media screen and (max-width:699px){
    .sp{
        display: block;
    }   
    .form_tbl input[type=date]{
        width: 25%;
    }
    .form_tbl input[type=time]{
        width: 18.5%;
    }
    .fsS{
        font-size: 12px;
    }
    .form_tbl input[type=date]{
        margin-right: 5px;
    }
    .city{
        margin-top: 10px;
    }
    #checkBtn{
    vertical-align: sub;
    }
}

input[type=submit],
input[type=time],
input[type=date],
select,
textarea{
    -webkit-appearance: none !important;
}