/* Box sizing reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: #000;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display: block;
}

.header-img {
    width: 30%;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -5%);
    z-index: 50;
}

.key-visual-bg {
    width: 100%;
    height: 105%;
    position: relative;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -10%);
    background-image: url("../img/background.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.icon-img {
    width: 13%;
    position: absolute;
    top: 55%;
    left: 63%;
    transform: translate(-63%, -55%);
}

.sub-header-img {
    width: 17%;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -85%);
    filter: drop-shadow(5px 5px 5px #222);
}

.beers-img {
    width: 21%;
    position: relative;
    top: -7%;
    left: 50%;
    transform: translate(-50%, -7%);
}

/* Portrait tablet */
@media screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: portrait) {

    .header-img {
        width: 70%;
    }

    .key-visual-bg {
        width: 100%;
        height: 90%;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0%);
        background-size: cover;
    }

    .icon-img {
        width: 30%;
        top: 55%;
        left: 90%;
        transform: translate(-90%, -55%);
    }

    .sub-header-img {
        width: 33%;
        top: 85%;
        left: 50%;
        transform: translate(-50%, -85%);
    }

    .beers-img {
        width: 40%;
        top: -10%;
        left: 50%;
        transform: translate(-50%, -10%);
    }
}

/* Landscape tablet */
@media screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: landscape) {

    .header-img {
        width: 50%;
    }

    .key-visual-bg {
        width: 100%;
        height: 80%;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .icon-img {
        width: 15%;
        top: 55%;
        left: 65%;
        transform: translate(-65%, -55%);
    }

    .sub-header-img {
        width: 25%;
        top: 85%;
        left: 50%;
        transform: translate(-50%, -85%);
    }

    .beers-img {
        width: 30%;
        top: -10%;
        left: 50%;
        transform: translate(-50%, -10%);
    }
}

/* Portrait mobile */
@media screen
and (max-device-width: 767px)
and (orientation: portrait) {

    .header-img {
        width: 80%;
        top: 7%;
        left: 50%;
        transform: translate(-50%, -7%);
    }

    .key-visual-bg {
        width: 100%;
        height: 85%;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .icon-img {
        width: 30%;
        top: 55%;
        left: 95%;
        transform: translate(-95%, -55%);
    }

    .sub-header-img {
        width: 50%;
        top: 85%;
        left: 50%;
        transform: translate(-50%, -85%);
    }

    .beers-img {
        width: 65%;
        top: -10%;
        left: 50%;
        transform: translate(-50%, -10%);
    }

}

/* Landscape mobile */
@media screen
and (max-device-width: 1024px)
and (max-device-height: 560px)
and (orientation: landscape) {

    .header-img {
        width: 40%;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
    }

    .key-visual-bg {
        width: 100%;
        height: 100%;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -40%);
    }

    .icon-img {
        width: 13%;
        top: 55%;
        left: 63%;
        transform: translate(-63%, -55%);
    }

    .sub-header-img {
        width: 25%;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -90%);
    }

    .beers-img {
        width: 30%;
        top: -5%;
        left: 50%;
        transform: translate(-50%, -5%);
    }

}