body.sub    {
    background-position: center top 67.1875vw;
}

.key:before {
    height: 92.708vw;
}

.detailinner    {
    width: 81.4%;
    clear: both;
}

.detailinner:nth-of-type(2n)    {
    margin-left: auto;
    margin-right: 0;
}
.detailinner .imgarea    {
    float: left;
    width: 25%;
}

.detailinner > h4,
.detailinner > p  {
    margin-left: 28.57%;
}

.detailinner > h4   {
    width: 66%;
}

@media screen and (max-width: 834px)    {
    .key:before {
        height: 199vw;
    }
    
    .detailinner    {
        width: 100%;
        clear: both;
        margin-left: 0;
        margin-right: 0;
    }
    
    .detailinner > *    {
        display: inline-block;
        margin-left: 0;
    }
    
    .detailinner .imgarea   {
        width: 25vw;
        margin-right: 5vw;
    }
    
    .detailinner > h4   {
        width: calc(100% - 30vw);
        margin-left: 0;
    }
    .detailinner > p    {
        clear: both;
        margin-left: 0;
    }
}