.sub .key   {
    aspect-ratio: 96 / 55;
    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;
}

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

.sub .key .key_balloon    {
    position: absolute;
    width: 25vw;
    height: auto;
    top: 29.84vw;
    left: 19.27vw;
    animation: sec3img1 2s ease-in-out infinite alternate;
}

.sub .key .robotarea    {
    position: absolute;
    width: 8.9vw;
    height: auto;
    top: 29.83vw;
    left: 59.86vw;
}

.sub .key .key_robot    {
    position: absolute;
    width: 8.9vw;
    height: auto;
    top: 0;
    left: 0;
    transform: rotate(-25deg);
}

.sub main section .inner .box .titlearea > .roboto-condensed:after  {
    background-color: #F00;
}

.sub main section .inner .box .titlearea > .roboto-condensed.noline:after  {
    display: none;
}

@media screen and (max-width: 834px)    {
    .sub .key   {
        aspect-ratio: 40 / 49;
        overflow-y: visible;
    }
    
    .key:before   {
        background-image: url(../images/key_bg_sp.webp);
    }
    
    .sub .key .key_balloon    {
        width: 40vw;
        left: 12.5vw;
        top: 70.89vw;
    }
    
    .sub .key .key_robot    {
        width: 18.6vw;
        top: 36.5vw;
        left: 75vw;
    }
    
    .sub .key .key_robot    {
        transform: rotate(0);
        width: 18.6vw;
        top: 0;
        left: 0;
    }
}