@charset "utf-8";

/** ▼▼▼ main ▼▼▼ **/
#main {
    width: 100%;
    background: url(../images/bg_contact-main.png) no-repeat center center / cover;
}

@media (max-width: 860px) {
    #main {
        margin: 70px 0 0 0;
    }
}

#main h2 {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 0;
}
/** ▲▲▲ main ▲▲▲ **/

/** ▼▼▼ foreword ▼▼▼ **/
#foreword {
    width: 90%;
    max-width: 1000px;
    margin: 53px auto 0 auto;
}

#foreword h3 {
    font-size: 2.25em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 133%;
    color: #0071BC;
    margin: 50px 0 20px 0;
}

#foreword p {
    margin: 10px 0 0 0;
}

#foreword a.tel {
    font-size: 3.75em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 100%;
}
/** ▲▲▲ foreword ▲▲▲ **/

/** ▼▼▼ input ▼▼▼ **/
#input {
    width: 90%;
    max-width: 1000px;
    margin: 50px auto 0 auto;
}

::placeholder {
    color: #AAAAAA;
  }

#input h3 {
    font-size: 2.25em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 133%;
    color: #0071BC;
}

#input form {
    margin: 0;
    padding: 0;
}

#input ul {
    width: 100%;
    max-width: 1000px;
    margin: 25px 0 0 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: 1px solid #CBC7C7;
    list-style :none;
}

#input ul li {
    padding: 2.5% 4%;
}

#input ul li:nth-child(odd) {
    width: 22%;
    max-width: 220px;
    background: #EAF6FD;
    border-bottom: 1px solid #CBC7C7;
}

#input ul li:nth-child(even) {
    width: 62%;
    max-width: 620px;
    border-bottom: 1px solid #CBC7C7;
    line-height: 187%;
}

#input ul li:nth-child(21) {
    display: none;
}

#input ul li:nth-child(22) {
    display: none;
}

#input ul li span:after {
    content: "必須";
    width: 60px;
    height: 20px;
    display: block;
    margin: 8px 0 0 0;
    background: #FF0000;
    border-radius: 5px;
    font-size: 0.87em;
    text-align: center;
    line-height: 19px;
    color: #FFFFFF;
}

#input ul li div.error {
    color: #FF0000;
    font-weight: 700;
}

#input ul li input.text {
    width: 95%;
    max-width: 590px;
    height: 40px;
    padding: 0 2.4%;
    border: 1px solid #CBC7C7;
    font-size: 1em;
}

#input ul li p {
    margin: 5px 0 0 0;
    font-size: 0.75em;
}

#input ul li div {
    margin: 0 0 5px 0;
    padding: 0;
    color: #0071BC;
}

#input ul li textarea {
    width: 95%;
    height: 220px;
    padding: 2.4%;
    resize: none;
    border: 1px solid #CBC7C7;
    font-size: 1em;
}

#input p {
    margin: 20px 0 0 0;
}

#input p.check {
    font-size: 1.25em;
    text-align: center;
}

#input input.button {
    width: 500px;
    height: 50px;
    border: 2px solid #0071BC;
    border-radius: 5px;
    color: #0071BC;
    background: #FFFFFF;
}

#input div.button {
    margin: 40px;
    text-align: center;
}
/** ▲▲▲ input ▲▲▲ **/

@media (max-width: 640px) {
    /** ▼▼▼ main ▼▼▼ **/
    #main {
        margin: 70px 0 0 0;
        background: url(../images/bg_contact-main-dp.png) no-repeat center center / cover;
    }
    /** ▲▲▲ main ▲▲▲ **/

    /** ▼▼▼ foreword ▼▼▼ **/
    #foreword h3 {
        font-size: 1.5em;
        line-height: 116%;
    }

    #foreword a.tel {
        font-size: 3.1em;
    }
    /** ▲▲▲ foreword ▲▲▲ **/

    /** ▼▼▼ input ▼▼▼ **/
    #input {
        width: 100%;
    }

    #input h3 {
        font-size: 1.5em;
        line-height: 116%;
        width: 90%;
        margin: 0 auto;
    }

    #input ul {
        border-top: none;
        border-bottom: 1px solid #CBC7C7;
    }

    #input ul li {
        padding: 2.5% 4%;
    }

    #input ul li:nth-child(odd) {
        width: 100%;
        max-width: 640px;
        border-top: 1px solid #CBC7C7;
        border-bottom: none;
    }

    #input ul li:nth-child(even) {
        width: 100%;
        max-width: 640px;
        border-bottom: none;
    }

    #input p {
        margin: 20px auto 0 auto;
        width: 90%;
        font-size: 0.75em;
    }

    #input input.button {
        width: 100%;
        /**height: 50px;
        border: 2px solid #0071BC;
        border-radius: 5px;
        color: #0071BC;**/
        font-size: 1em;
    }
    /** ▲▲▲ input ▲▲▲ **/
}