@charset "UTF-8";


/* CSS Document */
div#form .explanation {
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.explanation .must {
    font-size: 70%;
    margin-right: 5px;
    color: #fff;
    background: #f43b4d;
    padding: 4px 10px 5px;
    font-size: 13px;
    margin-bottom: 2px;
}

.form_tbl {
    width: 450px;
    padding: 3%;
    margin: 3% auto;
    text-align: left;
    color: #1d1d1d;
}

.form_tbl table {
    width: 100%;
    border: none;
    padding: 5% 3%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px #ffffff;
}

.form_tbl th {
    display: block;
    width: 100%;
    border: none !important;
    padding: 5px 0px 5px 5px;
    color: #1d1d1d;
    font-size: 16px;
    text-align: left;
    margin-bottom: 5px;
}

.form_tbl td {
    display: block;
    width: 100%;
    border: none !important;
    margin-bottom: 13px;
    color: #1d1d1d;
}

.form_tbl tr .min {
    font-size: 0.7rem;
    margin-bottom: 5px;
    font-weight: normal;
}

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

input[type="radio" i] {
    margin: 3px 3px 0px 25%;
}

input[type="radio" i]:first-child {
    margin: 3px 3px 0px 0px;
}

input[type="checkbox" i] {
    margin: 3px 3px 2% 0;
}

input[type="checkbox" i]:first-child {
    margin: 3px 3px 0px 0px;
}

@media screen and (min-width: 768px) {
    .form_tbl {
        width: 48%;
        min-width: 600px;
        margin: 0 auto;
        padding: 2% 2%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 5px #ffffff;
    }

    .form_tbl table {
        display: table;
        width: 100%;
    }

    .form_tbl tr {
        display: table-row;
    }

    .form_tbl th,
    .form_tbl td {
        display: table-cell;
        vertical-align: center;
        padding: 5px;
    }

    .form_tbl th {
        width: 1%;
        white-space: nowrap;
        text-align: left;
    }

    .form_tbl td {
        width: 70%;
    }

    .form_tbl input[type="text"],
    .form_tbl input[type="tel"],
    .form_tbl input[type="email"],
    .form_tbl select,
    .form_tbl textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .form_tbl input#tel {
        width: 28%;
        min-width: 70px;
    }

    .form_tbl .zip-wrapper {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .form_tbl .zip-wrapper input {
        width: 40% !important;
    }

}

.flow_wrapper {
    background-color: #fff;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 15px;
    padding: 40px 0;
    padding: 40px 0 36px;
}

.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#date1,
#date2 {
    text-indent: 0.6em;
    padding: 10px 0;
    width: 27%;
    margin-bottom: 5px;
}

.form_tbl select#time1,
#time2 {
    text-indent: 0.8em;
    padding: 10px 0;
    width: 22%;
}

.form_tbl input,
select,
textarea {
    border: 1.5px solid #cacaca;
    border-radius: 5px;
}

.form_tbl input.radio {
    width: inherit;
}

label span.must {
    font-size: 70%;
    margin-left: 10px;
    color: #fff;
    background: #df0006;
    padding: 4px 10px 3px;
    font-size: 13px;
    margin-bottom: 2px;
}

.submitbtn {
    text-align: center;
    margin-top: 49px;
    margin-bottom: 28px;
}

input[type=submit] {
    width: auto !important;
    padding: 10px 20px 7px 4px;
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    background: linear-gradient(to bottom, #1260c4, #0e52aa);
    border: 1px solid #1260c4;
    border-radius: 5px;
    box-shadow: 0 6px 0 #053472;
    font-size: 20px;
    font-weight: bold;
    appearance: none;
}

.backbtn {
    width: 290px;
    font-size: 20px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 24%;
    font-weight: bold;
    padding: 16px 5px 15px 5px;
    /* padding: 0.25em 0.5em; */
    text-decoration: none;
    color: #FFF;
    background: linear-gradient(to bottom, #1260c4, #0e52aa);
    border: 1px solid #1260c4;
    box-shadow: 0 6px 0 #053472;
    border-radius: 5px;
    text-align: center;
}

.backbtn a:visited {
    color: #fff;
}

.backbtn a:link {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 767px) {
    .backbtn {
        width: 290px;
        font-size: 20px;
        margin: 0 auto;
        margin-top: 40px;
        font-weight: bold;
        padding: 16px 5px 15px 5px;
        /* padding: 0.25em 0.5em; */
        text-decoration: none;
        color: #FFF;
        background: linear-gradient(to bottom, #1260c4, #0e52aa);
        border: 1px solid #1260c4;
        box-shadow: 0 6px 0 #053472;
        border-radius: 5px;
        text-align: center;
    }

}

/*スクロール*/
.suc {
    height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-color: #d6d6d6;
    border-style: solid;
    border-width: 1px;
    padding: 20px 13px 15px 20px;
    font-size: 12px;
    margin: 2% 0%;
    color: #1d1d1d;
}

/* スクロールの幅の設定 */
.suc::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* スクロールの背景の設定 */
.suc::-webkit-scrollbar-track {
    border-radius: 3px;
    box-shadow: 0 0 3px #fff inset;
}

/* スクロールのつまみ部分の設定 */
.suc::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #d6d6d6;
}

.ds_no_pc {
    display: none;
}

body {
    margin: 0px;
}

#wrapper.step01 {
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
}

#wrapper.step01 h1 {
    background: #0050c7;
    padding: 30px 0;
    margin-top: 0;
    color: #fff;
    text-align: center;
}

#wrapper.step01 th {
    background: #ececec;
}

#wrapper.step01 #content {
    background-color: #fff;
}

#wrapper.step01 .header {
    width: 100%;
    height: auto;
}

#wrapper.step01 .h-bg {
    width: 100%;
    background: #fff;
}

@media (min-width: 1920px) {
    #wrapper.step01 {
        width: 1920px;
    }

    #wrapper.step01 .header {
        width: 1920px;
        height: auto;
    }
}


@media (max-width: 767px) {

    .ds_no_pc {
        display: block;
    }

    div#form h3 {
        width: 100%;
    }

    .form_tbl {
        width: 98%;
        margin: 5% auto;
        box-sizing: border-box;
    }

    input[type="checkbox" i] {
        margin: 5px 3px 0px 0px;
    }

    div#form h3 img {
        width: 12%;
    }

    #wrapper.step01 {
        width: 100%;
    }

    .form_tbl input#tel {
        text-indent: 0.5em;
    }

    .form_tbl input#date1 {
        width: 85%;
        text-indent: 0.2em;
    }

    .form_tbl input#time1 {
        width: 65%;
        text-indent: 0.2em;
    }
}

textarea {
    resize: vertical;
}