@media screen and (max-width: 853px) {
    .mainVisual {
        margin: 120px 24px 0;
    }
    .mainVisualCopy {
        grid-column: 1 / 4;
    }
    .copyTitle {
        font-size: 32px;
    }
    .mainVisualCopy h1 {
        font-size: 32px;
    }
    .mainVisualImg {
        margin-top: 40px;
    }
    .aboutLogo {
        width: 75%;
    }
    .aboutTitle h2 {
        font-size: 32px;
    }
    .aboutText p {
        line-height: 40px;
    }
    .worksTitle h3 {
        font-size: 32px;
    }
    .worksListInner a:not(:nth-child(1)) {
        margin-top: 56px;
    }
    .areaTitle h3 {
        font-size: 32px;
    }
    .recruitImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /*====================================WorksList Hover Effect====================================*/

    .worksListInner a {
        transition: opacity 0.3s ease;
    }

    .worksListInner a:hover {
        opacity: 0.7;
    }

    /*====================================Recruit Hover Effect====================================*/

    .recruit a {
        transition: opacity 0.3s ease;
    }

    .recruit a:hover {
        opacity: 0.7;
    }
}