@charset "UTF-8";

/* common */
main {
    margin: 50rem 0 0;
}

/* MV */
.main-visual {
    width: 100%;
    height: 58rem;
    position: absolute;
    top: 0;
    background: url(../images/mv-sub.png) no-repeat center / cover;
}

.main-visual h2 {
    font-size: max(2.5vw, 4rem);
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    gap: 1vw;
}

.main-visual span {
    font-size: max(1.6vw, 3rem);
    font-family: "Book Antiqua", sans-serif;
    font-style: italic;
}

/* Form */
.formBox {
    padding: 8vw 0;
}

.formBox-inner {
    width: 130rem;
    max-width: 90%;
    margin: auto;
    text-align: center;
}

.formBox-inner h2 {
    font-size: max(1.5vw, 3rem);
    margin: 0 0 3vw;
}

.formBox-inner p {
    font-size: max(1vw, 2rem);
    line-height: 1.8;
    margin: 0 0 3vw;
}

.formBox-inner p span {
    color: #ff0000;
}

.formBox-inner h3 {
    font-size: max(2vw, 4rem);
    margin: 0 0 7vw;
}

.formBox-inner h3 a {
    position: relative;
}

.formBox-inner h3 a::after {
    position: absolute;
    content: "";
    background: url(../images/icon-tel-white.png) no-repeat;
    width: 3.5rem;
    height: 3.5rem;
    background-size: 3.5rem;
    left: -5rem;
    top: 9px;
}

.formBox-inner img {
    width: 6rem;
    margin: 0 0 5vw;
}

.contact-form-table {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.7rem;
    margin: 0 auto 5vw;
    width: 110rem;
    max-width: 100%;
}

.contact-form-table dt {
    width: 35%;
    padding: 1vw;
    border-right: 1px #fff solid;
    border-bottom: 1px #fff solid;
    display: flex;
    font-weight: normal;
    line-height: 1.5;
    flex-direction: row;
}

.contact-form-table dt span {
    color: #ff2424;
    margin: 0 0 0 1vw;
}

.contact-form-table dd {
    width: 65%;
    padding: 1vw;
    display: flex;
    align-items: center;
    border-bottom: 1px #fff solid;
}

.contact-form-table dd input,
.contact-form-table dd textarea {
    width: 100%;
    line-height: 1.5;
    font-size: 1.7rem;
    background-color: #f4f3f3;
    border-radius: 1rem;
    text-align: left;
}

.contact-form-table dt:nth-last-of-type(1),
.contact-form-table dd:nth-last-of-type(1) {
    border-bottom: none;
}

textarea,
input {
    border: 2px #b5b5b5 solid;
    padding: 10px;
    background-color: #ffffff;
    color: #000;
}

.bt-send {
    width: 250px;
    background-color: #82000a;
    padding: 20px;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    margin: 0 auto;
    display: block;
    border: none;
}

@media screen and (max-width: 968px) {
    /* common */
    main {
        margin: 30rem 0 0;
    }

    /* MV */
    .main-visual {
        width: 100%;
        height: 30rem;
        position: absolute;
        top: 0;
        background: url(../images/mv-sub-sp.png) no-repeat center / cover;
        z-index: 0;
    }

    .main-visual h2 {
        font-size: 3.6rem;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        gap: 1vw;
        white-space: nowrap;
    }

    .main-visual span {
        font-size: 2.4rem;
        font-family: "Book Antiqua", sans-serif;
        font-style: italic;
    }

    /* Form */
    .formBox {
        padding: 5rem 0;
    }

    .formBox-inner {
        width: 130rem;
        max-width: 90%;
        margin: auto;
        text-align: center;
    }

    .formBox-inner h2 {
        font-size: 2.8rem;
        margin: 0 0 5rem;
    }

    .formBox-inner p {
        font-size: 1.8rem;
        line-height: 1.5;
        margin: 0 0 5rem;
    }

    .formBox-inner p span {
        color: #ff0000;
    }

    .formBox-inner h3 {
        font-size: 3.5rem;
        margin: 0 0 7rem;
    }

    .formBox-inner h3 a {
        position: relative;
        padding: 0 0 0 4rem;
    }

    .formBox-inner h3 a::after {
        position: absolute;
        content: "";
        background: url(../images/icon-tel-white.png) no-repeat;
        width: 3rem;
        height: 3rem;
        background-size: 3rem;
        left: 0rem;
        top: 1rem;
    }

    .formBox-inner img {
        width: 6rem;
        margin: 0 0 8rem;
    }

    .contact-form-table {
        display: flex;
        flex-wrap: wrap;
        font-size: 1.7rem;
        margin: 0 auto 5vw;
        width: 110rem;
        max-width: 100%;
        flex-direction: column;
    }

    .contact-form-table dt {
        width: 100%;
        padding: 0 0 2rem;
        border-right: none;
        border-bottom: 1px #fff solid;
        display: flex;
        font-weight: normal;
        line-height: 1.5;
        flex-direction: row;
        margin: 0 0 2rem;
    }

    .contact-form-table dt span {
        color: #ff2424;
        margin: 0 0 0 1vw;
    }

    .contact-form-table dd {
        width: 100%;
        padding: 0 0 2rem;
        display: flex;
        align-items: center;
        border-bottom: 1px #fff solid;
        margin: 0 0 2rem;
    }

    .contact-form-table dd input,
    .contact-form-table dd textarea {
        width: 100%;
        line-height: 1.5;
        font-size: 1.7rem;
        background-color: #f4f3f3;
        border-radius: 1rem;
        text-align: left;
    }

    .contact-form-table dd:nth-last-of-type(1) {
        border-bottom: none;
    }

    .contact-form-table dt:nth-last-of-type(1) {
        border-bottom: 1px #fff solid;
    }

    textarea,
    input {
        border: 2px #b5b5b5 solid;
        padding: 10px;
        background-color: #ffffff;
        color: #000;
    }

    .bt-send {
        width: 250px;
        background-color: #82000a;
        padding: 20px;
        color: #fff;
        font-size: 2rem;
        text-align: center;
        margin: 0 auto;
        display: block;
        border: none;
    }

    .contact-select {
        display: flex;
        gap: 1rem;
        flex-direction: column;
    }

    .contact-select li {
        display: flex;
        gap: 10px;
    }

    .contact-select li input {
        width: 18px;
    }
}