#july-hero {
    --red: #ec2130;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/hero/back.webp);
    background-image: -webkit-image-set(url("../images/hero/back.webp") 1x,
            url("../images/hero/back@2x.webp") 2x);
}
#july-hero .july-inner {
    padding-top: 2.291667vw;
    padding-bottom: 3.90625vw;
}
#july-hero .july-main {
    max-width: 64.557292vw;
}
#july-hero .animation {
    max-width: 100%;
    max-height: fit-content;
    aspect-ratio: 2476 / 564;
}
#july-hero .main {
    max-width: 65.21%;
}
#july-hero .july-graphic-box {
    max-width: 47.419355%;
    right: -16%;
}
#july-hero .button {
    width: 235px;
    height: 40px;
    border-radius: 20px;
    font-size: 1.3125em;
    line-height: 1;
    margin-top: 1.5625vw;
    box-shadow: -4px -3px 2.16px 0.84px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 567px) {
    #july-hero {
        z-index: 1;
        background-image: url(../images/hero/back-m.webp);
        background-image: -webkit-image-set(url("../images/hero/back-m.webp") 1x,
                url("../images/hero/back-m@2x.webp") 2x);
    }
    #july-hero .july-inner {
        padding-top: 0;
        padding-bottom: 159px;
    }
    #july-hero .july-main {
        max-width: 100%;
    }
    #july-hero .animation {
        aspect-ratio: 702 / 420;
    }
    #july-hero .main {
        max-width: 100%;
        margin-top: 32px;
    }
    #july-hero .july-graphic-box {
        max-width: 100%;
        right: -33px;
    }
    #july-hero .button {
        width: 169px;
        font-size: 1.0625em;
        margin-top: 25px;
    }
}