.document .body img {
    max-width: calc(100% - 50px);
}

div.body{
    min-width: auto;
}

/* フッターのバナー配置 */

.footer-bannars{
    display: flex;
    flex-wrap: wrap;
}

.footer-img-long{
    flex: 2 2 600px;
    padding: 0.5em;
}

.footer-img-short{
    flex: 1 1 300px;
    padding: 0.5em;
}

.document .body .footer-bannars .footer-img-long img,
.document .body .footer-bannars .footer-img-short img
 {
    max-width: 100%;
}

.footer-bannars a img {
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.2));
    position: relative;
    bottom: 2px;
    right: 2px;
    transition: ease-out .1s;
}

.footer-bannars a img:hover,
.footer-bannars a img:active,
.footer-bannars a img:focus{
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
    right: 0;
    bottom: 0;
    opacity: 0.8;
}

img.img-mobile{
    display: none;
}
img.img-desktop {
    display: block;
}


@media only screen and (max-width: 1024px) {
    .footer-img-short {
        flex: 1 1 100px;
    }
}

@media only screen and (max-width: 450px) {

    img.img-desktop {
         display: none; 
         filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
        }

    img.img-mobile {
         display: block; 
         filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
        }

    .footer-img-short {
        flex: 1 1 300px;
        }
 
}