body.sub   {
    background-image: url(../images/body_bg_pc.webp);
}

.sub .key   {
    aspect-ratio: 64 / 29;
    overflow-y: visible;
}

.key:before   {
    background-image: url(../images/key_bg_pc.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    top: 0;
    left: 0;
}

.sub .key .key_robot    {
    position: absolute;
    width: 9.11vw;
    height: auto;
    top: 10.41vw;
    left: 46.35vw;
}

.sub .key .keytext  {
    position: absolute;
    top: 30.1vw;
    width: min(31vw,500px);
}

@media screen and (max-width: 834px)    {
    .sub .key   {
        aspect-ratio: 40 / 71;
        overflow-y: visible;
    }
    
    .key:before   {
        background-image: url(../images/key_bg_sp.webp);
    }
    
    .sub .key .key_balloon    {
        width: 55.5vw;
        left: 37.5vw;
        top: 144.5vw;
    }
    
    .sub .key .inner .titlearea {
        top: 36.75vw;
    }

    .sub .key .key_robot    {
        transform: rotate(0);
        width: 24.5vw;
        top: 45.5vw;
        left: 68.75vw;
    }
    
    .sub .key .keytext  {
        top: 78vw;
        left: 15vw;
        width: 78vw;
    }
}