@charset "UTF-8";

.section--contact {
    padding: 72px 4.2% 104px;
} 

.title::after {
    content: 'CONTACT';
    font-family: 'Wittgenstein';
    color: #e6e6e6;
    opacity: 40%;
    font-size: 5.6rem;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    top: -16px;
    left: -7%;
    z-index: -10;
    white-space: nowrap;
}

.contact__list {
    margin-top: 56px;
}

.item__title {
    font-size: 1.6rem;
    letter-spacing: 0.03em;
}

.contact__box {
    display: block;
    width: auto;
    margin-top: 4px;
}

.contact__box input {
    display: block;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    font-size: 1.6rem;
    color: #3f3f3f;
    letter-spacing: 0.05em;
    border-radius: 4px;
    border: solid 1px #ccc;
}

textarea {
    display: block;
    width: 100%;
    padding: 8px;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    color: #3f3f3f;
    border-radius: 4px;
    border: solid 1px #ccc;
}

.contact__item:last-of-type div {
    height: 256px;
}

.contact__item {
    max-width: 640px;
    margin: 24px auto 0;
}

.contact__item:first-of-type {
    margin-top: 0;
}

.btn {
    text-align: center;
    border-radius: 8px;
}

@media screen and (min-width: 425px) {
    .section--contact {
        padding: 72px 4.2% 120px;
    }
}

/* pc 600px */
@media screen and (min-width: 600px) {
    .section--contact {
        padding: 120px 9.7% 180px;
    }

    .title::after {
        left: -13%;
    }

    .contact__list {
        margin-top: 80px;
    }

    .btn {
        margin-top: 72px;
    }
}

/* pc 1024px */
@media screen and (min-width: 1024px) {
    .section--contact {
        padding: 120px 9.7% 216px;
    }

    .title::after {
        font-size: 9.6rem;
        top: -33px;
        left: -13%;
    }

    .contact__list {
        margin-top: 112px;
    }

    .contact__item {
        max-width: 800px;
        margin-top: 40px;
    }

    .contact__box input {
        height: 40px;
    }
    
}

/* pc 1440px */
@media screen and (min-width: 1440px) {
    .section--contact {
        padding: 160px 9.7% 320px;
    }
}

/* pc 2000px */
@media screen and (min-width: 2000px) {
    .section--contact {
        padding: 200px 9.7% 400px;
    }

    .title {
        text-align: center;
    }

    .title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}