.pc {
    display: block;
}
.mobile {
    display: none;
}

@media (max-width: 1250px) {
    article #img {
        width: 285px;
    }
    
    #banner {
        overflow-x: hidden;
    }
    
    #banner img{
        /* width: 120%; */
        width: calc(100% + (1250px - 100vw) * 1);
        /* margin-left: -10%; */
        margin-left: calc((1250px - 100vw) * 1 / (-2));
    }
}

@media (max-width: 767px) {
    article {
        padding-left: 8%;
        padding-right: 8%;
        width: 84%;

        flex-direction: column;
        justify-content:flex-start;
        align-items: center;
    }
    article #img {
        width: 100%;
        margin-bottom: 20px;
    }
    article section {
        width: 100%;
    }
    footer {
        padding-bottom: 90px;
        
        display: flex;
        gap: 4rem;
        flex-direction: column;
        justify-content:flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    footer h4, footer li {
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }
    p {
        font-size: 13.6px;
        line-height: 21.75px;
    }
    h1 {
        font-size: 40px;
        line-height: 52px;
    }
    h2 {
        font-size: 22.63px;
        line-height: 29.419px;
    }

    #overlay p {
        font-size: 17.68px;
        line-height: 28.288px;
    }
    
    .pc {
        display: none;
    }
    .mobile {
        display: block;
    }

    .vh {
        height: auto;
        padding-top: 100px;
    }

    #overlay {
        color: var(--text);
    }
    #banner img {
        /* width: 100%; */
        width: calc(100% + (767px - 100vw) * 1);
        /* margin-left: 0; */
        margin-left: calc((767px - 100vw) * 1 / (-2));
        margin-top: calc((767px - 100vw) * .8 / (-2));
    }
    #phone img {
        animation: none;
    }
    #phone video {
        animation: none;
    }
    #google {
        max-width: 50%;
    }
}