@charset "UTF-8";
/* ===================
main visual
====================== */
.main__visual-pc {
    display: none;
}

.main {
    background-color: #f4f4f4;
}

/* main visual pc */
@media screen and (min-width: 1024px) {
    .main__visual-sp {
        display: none;
    }

    .main__visual-pc {
        display: block;
    }
}


/* ===================
contact
====================== */
.section--contact {
    padding: 50px 7.4% 0;
}

.contact__inner {
    max-width: 719px;
    margin: 0 auto;
}

.section__title {
    font-size: 2.2rem;
    font-weight: 600;
    border-bottom: 1px solid #A8A8A8;
    padding-bottom: 20px;
}

.contact__txt {
    font-size: 1.6rem;
    line-height: 2;
    margin-top: 30px;
}

.contact__txt--red {
    font-size: 1.5rem;
    line-height: 2;
    color: #D25F69;
}

/* contact pc */
@media screen and (min-width: 1024px) {
    .section--contact {
        padding: 90px 15% 20px;
    }

    .section__title {
        font-size: 3.2rem;
    }

    .contact__txt {
        margin-top: 60px;
    }
}/* pc 1024px */


/* ===================
form
====================== */
.section--form {
    padding: 50px 7.4% 100px;
}

.form__inner {
    max-width: 719px;
    margin: 0 auto;
}


.contact__item {
    margin-top: 21px;
}


.category__name {
    font-size: 1.6rem;
    font-weight: 600;
    display: inline-block;
    margin-right: 11px;
}

.required {
    display: inline-block;
    background-color: #D25F69;
    width: 40px;
    height: 20px;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 1.3rem;
    text-align: center;
    font-weight: 500;
}

::placeholder {
    font-size: 1.5rem;
    font-weight: 400;
}

.form-nama {
    display: flex;
    gap: 0 11px;
}

.contact__item input, .contact__item textarea {
    background-color: #ffffff;
    border: 1px solid #AC7E82;
    border-radius: 5px;
    padding: 7px;
    width: 83vw;
    max-width: 700px;
    margin-top: 11px;
    font-size: 1.6rem;
}

.contact__item textarea {
    height: 200px;
}

.form-nama input, .form-phone input {
    width: 40vw;
    max-width: 176px;
}

button {
    display: block;
    margin: 50px auto 0;
}

.contact__btn {
    display: block;
    background-color: #D25F69;
    width: 300px;
    height: 60px;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 1.8rem;
    line-height: 2.8;
    text-align: center;
    font-weight: 500;
    transition: 0.4s;
}

.contact__btn:hover {
    opacity: 0.6;
}



/* form pc */
@media screen and (min-width: 1024px) {
    .section--form {
        padding: 30px 15% 130px;
    }

    .form-nama input, .form-phone input {
        max-width: 216px;
    }
}/* pc 1024px */