@charset "utf-8";

.contact #contents .section-area.main .mainInner {
    padding-bottom: 280px;
}

.contact .description {
    margin: 0 auto 60px;
}

.contact .phone-box {
    max-width: 1024px;
    padding: 40px 25px;
    background-color: #8cbbd2;
    color: #FFFFFF;
}

.contact .phone-box {
    max-width: 1024px;
    padding: 25px;
    background-color: #8cbbd2;
    color: #FFFFFF;
    margin: 0 auto;
}

.contact .phone-box dl {
    text-align: center;
}

.contact .phone-box dl a {
    color: #FFFFFF;
    text-decoration: none;
}

.contact .phone-box dl dt {
    margin: 0 auto 5px;
    font-size: 2.25rem;
}

.contact .phone-box dl dd {
    font-size: 4rem;
    font-weight: 600;
}


.contact .phone-box dl dd p {
    font-size: 50%;
    font-weight: 400;
}

.contact #contents .section-area table {
    max-width: 1024px;
}

.contact #contents .section-area table caption,
.contact #contents .article-area .article-head h3 {
    border-bottom: 0.5px solid #8cbbd2;
    padding: 0 0 15px;
    margin: 0 auto 40px;
    text-align: left;
    font-size: 2rem;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    text-orientation: upright;
    -webkit-text-orientation: upright;
    list-style-position: inherit;
    white-space: inherit;
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: 400;
}

.contact #contents .section-area table th {
    width: 270px;
    vertical-align: top;
}

.contact #contents .section-area table tbody th .req {
    font-size: 70%;
    text-align: center;
    background-color: #dc143c;
    color: #FFFFFF;
    padding: 2.5px 15px;
    line-height: 1;
    margin: 0 0 0 15px;
}

.contact .mw_wp_form input[type="text"],
.contact .mw_wp_form input[type="email"],
.contact .mw_wp_form textarea {
    border: 0.5px solid #f2f2f2;
    background-color: #f2f2f2;
    padding: 10px 15px;
    line-height: 1.9;
}

.contact .mw_wp_form input[type="email"] {
    max-width: 480px;
    width: 100%;
}

.contact .mw_wp_form textarea {
    width: 100%;
    height: 200px;
    margin-top: 15px;
}

.contact #contents .section-area table tbody td dl.name {
    display: table;
}

.contact #contents .section-area table tbody td dl.name dt,
.contact #contents .section-area table tbody td dl.name dd {
    display: table-cell;
    vertical-align: middle;
    line-height: 1;
    padding: 0 15px 0 0;
}

.contact.confirm #contents .section-area table tbody td dl.name dt,
.contact.confirm .mw_wp_form .submit-box .caution{
    display: none;
}

.contact #contents .section-area table tbody td dl.name dd input[type="text"] {
    width: 130px;
}

.contact #contents .section-area table tbody td .mwform-tel-field input[type="text"] {
    width: 130px;
}

.contact .mw_wp_form .submit-box {
    text-align: center;
}

.contact .mw_wp_form .submit-box {
    text-align: center;
}

.contact .mw_wp_form .submit-box input[type="submit"] {
    background-color: #2c3e50;
    border: 1px solid #2c3e50;
    text-align: center;
    color: #FFFFFF;
    font-size: 2rem;
    border: none;
    box-shadow: none;
    padding: 15px 20px;
    width: 240px;
    font-weight: 400;
}

.contact .mw_wp_form .submit-box input[type="submit"]:active {
    background-color: #dae3eb;
    border: 1px solid #2c3e50;
    color: #2c3e50;
}

.contact .mw_wp_form .submit-box .caution{
    margin:40px auto 0;
    padding:25px;
    background-color: #fffef0;
    letter-spacing: 0;
    font-size:70%;
    max-width: 640px;
    width: 100%;
    text-align: left;
}

.contact .line-area {
    max-width: 1024px !important;
    margin: 0 auto !important;
}

.contact .line-area img {
    max-width: 750px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.contact #contents:before {
    background-image: url(../images/contact/contents-before.svg);
    width: 11.25vw;
    padding-top: 11.883802083333334vw;
    right: 5.208333333333334vw;
}

.contact #contents .section-area.main .mainInner:after {
    background-image: url(../images/contact/section-after.svg);
    width: 216px;
    height: auto;
    padding-top: 100px;
}

@media screen and (max-width: 1280px) {
    .contact #contents .section-area.main .mainInner {
        /*padding-bottom: 280px;*/
        padding-bottom: 21.875vw;
    }

    .contact #contents .section-area.main .mainInner:after {
        width: 16.875vw;
        padding-top: 7.8125%;
    }

    .contact .description {
        margin: 0 auto 50px;
    }

    .contact #contents .section-area table th {
        width: 275px;
    }

    .contact .phone-box {
        padding: 40px 25px;
    }

    .contact .phone-box dl dt {
        font-size: 2.125rem;
    }

    .contact .phone-box dl dd {
        font-size: 3.5rem;
    }

    .contact #contents:before {
        width: 13.750000000000002vw;
        right: 3.125vw;
    }

}

@media screen and (max-width: 1136px) {}

@media screen and (max-width: 1024px) {

    .contact .description {
        margin: 0 auto 40px;
    }

    .contact .phone-box {
        padding: 30px 20px;
    }

    .contact .phone-box dl dt {
        font-size: 2rem;
    }

    .contact .phone-box dl dd {
        font-size: 3rem;
    }

    .contact #contents .section-area table caption,
    .contact #contents .article-area .article-head h3 {
        margin: 0 auto 30px;
        font-size: 1.8rem;
    }

    .contact #contents .section-area table th {
        width: 24.4140625vw;
    }

    .contact #contents .section-area table tbody th .req {
        padding: 2.5px 7.5px;
        margin: 0 0 0 10px;
    }

    .contact #contents:before {
        width: 13.750000000000002vw;
        right: 3.125vw;
    }
}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 835px) {


    .contact .description {
        margin: 0 auto 30px;
    }

    .contact .phone-box {
        padding: 25px 20px;
    }

    .contact .phone-box dl dt {
        font-size: 1.8rem;
    }

    .contact .phone-box dl dd {
        font-size: 2.5rem;
    }

    .contact #contents .section-area table caption,
    .contact #contents .article-area .article-head h3 {
        margin: 0 auto 25px;
    }

    .contact #contents .section-area table th {
        width: 29.94011976047904vw;
        padding: 20px 5px;
    }

}

@media screen and (max-width: 750px) {
    .contact #contents:before {
        width: 17.333333333333336vw;
        padding-top: 18.266666666666666vw;
        right: 1.3333333333333335vw;
    }

    .contact .description {
        margin: 0 auto 25px;
    }

    .contact .phone-box {
        padding: 20px 15px;
    }

    .contact .phone-box dl dt {
        font-size: 1.7rem;
    }

    .contact .phone-box dl dd {
        font-size: 2.25rem;
    }

    .contact #contents .section-area table th {
        width: 100%;
        padding: 2.5px 0;
        display: block;
        font-weight: 500;
    }

    .contact #contents .section-area table td {
        width: 100%;
        padding: 12.5px 0;
        display: block;
    }

    .contact #contents .section-area table tbody td dl.name dd input[type="text"] {
        width: 100px;
    }

    .contact #contents .section-area table tbody td .mwform-tel-field input[type="text"] {
        width: 100px;
    }
}

@media screen and (max-width: 640px) {
    .contact #contents:before {
        top: 3.90625vw;
    }

    .contact #contents .section-area.main .mainInner {
        /*padding-bottom: 140px;*/
        padding-bottom: 21.875vw;
    }

    .contact #contents .section-area.main .mainInner:after {
        width: 20.15625vw;
        padding-top: 9.375%;
    }

    .contact .phone-box {
        padding: 15px 10px;
    }

    .contact .phone-box dl dt {
        font-size: 1.6rem;
    }

    .contact .phone-box dl dd {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 480px) {
    .contact #contents:before {
        width: 22.083333333333332vw;
        padding-top: 23.333333333333332vw;
        top: 31.25vw;
    }

    .contact #contents .section-area.main .mainInner {
        /* padding-top: 180px; */
        padding-top: 58.333333333333336vw;
    }

    .contact .phone-box {
        padding: 10px;
    }
}

@media screen and (max-width: 350px) {}