.f-banner {
    position: fixed;
    z-index: 10;
    bottom: 50px;
    right: 50px;
    width: 100%;
    max-width: 640px;
}
.f-banner.hidden {
    display: none;
}
.f-banner__close {
    position: absolute;
    z-index: 13;
    top: 37px;
    right: 40px;
    font-size: 42px;
    color: #ffffff;
    font-weight: 400;
    cursor: pointer;
    transition: color .13s linear;
    width: 18px;
    height: 18px;
}
.f-banner__close > span {
    display: block;
    line-height: 18px;
}
.f-banner__close:hover {
    color: red;
}
.f-banner__img {
    position: relative;
    z-index: 12;
    display: block;
}
.f-banner__img img {
    display: block;
    width: 100%;
    height: auto;
}
.f-banner__img img.pc {
    display: block;
}
.f-banner__img img.mob {
    display: none;
}
@media screen and (max-width: 776px) {
    .f-banner {
        right: 2%;
        max-width: 90%;
        z-index: 100;
    }
}
@media screen and (max-width: 480px) {
    .f-banner__img img.pc {
        display: none;
    }
    .f-banner__img img.mob {
        display: block;
    }
}
@media screen and (max-width: 400px) {
    .f-banner__close {
        top: 20px;
        right: 20px;
    }
}