.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;
    height: 78.125vw;
}

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

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

.sub .key .key_robot    {
    position: absolute;
    width: 8.64vw;
    height: auto;
    top: 11.25vw;
    left: 50.02vw;
}

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


.sub.environment .key .keytext    {
    width: 700px;
}

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

.subbox {
    background: #FFFFFF;
    border: 1px solid #007A4C;
}

.subbox.gray {
    border: 1px solid #CCCCCC;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.05);
}

.labeltitle {
    border-left: 6px solid #007A4C;
}

@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);
        height: 199vw;
    }
    
    .sub .key .key_balloon    {
        width: 32.75vw;
        left: 62.5vw;
        top: 74.5vw;
    }
    
    .sub .key .key_robot    {
        transform: rotate(0);
        width: 26.5vw;
        top: 36.75vw;
        left: 66.75vw;
    }
    
    .sub .key .keytext  {
        top: 85.5vw;
        left: 12.5vw;
        width: 62.5vw;
    }
    
    .sub.environment .key .keytext  {
        width: 62.5vw;
        top: 78vw;
    }
    
    .subbox.gray.sp_subbox {
        border: 0;
        box-shadow: none;
    }

}