@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap");

html,body {
    margin: 0;
    padding: 0;
}

img {
    height: auto;
    width: 100%;
}

a:hover {
    opacity: 0.9;
}

html {
    font-size: 16px;
    font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', sans-serif;
}

* {
    box-sizing: border-box
}

body {
    color: #321905;
    margin: 0;
    font-size: 16px;
    line-height: 1.625;
    letter-spacing: 0.8px;
}

.main-visual,
.container {
    position: relative;
}

h1 {
    margin: 0;
}

.cv_top,
.cv_bottom{
    width: 25vw;
    position: absolute;
}
.cv_top {
    bottom: 4vw;
    left: 27vw;
}
.cv_bottom {
    bottom: 3vw;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.footer {
    background-color: rgb(22,153,145);
    padding: 13px 0;
    text-align: center;
    p {
        color: white;
        font-size: 0.8em;
        margin: 6px 0;
        &.inc {
            margin-top: 15px;
            font-size: 0.7em;
        }
    }
    .mycellar {
        max-width: 280px;
        min-width: 220px;
        width: 27vw;
        margin: 10px auto 0;
    }
    a {
        color: white;
        text-decoration: none;
    }
}

@media screen and (min-width: 0em) and (max-width: 59.3125em) {
    body {
        font-size: 14px
    }
    img {
        display: block;
        height: auto;
        margin: 0 auto;
        object-fit: cover;
    }
    .top {
        width: 100%;
        height: 85vw;
        object-position: -4vw;
    }
    .cv_top,
    .cv_bottom{
        width: 50vw;
    }
    .cv_top {
        bottom: 5vw;
        right: 6vw;
        left: auto;
    }
    .cv_bottom {
        bottom: 1vw;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .container {
        img {
            &.size-105 {
                height: 25vw;
                object-position: -23.8vw;
            }
            &.size-160 {
                height: 45vw;
                object-position: -19vw;
            }
            &.size-180 {
                height: 50vw;
                object-position: -17vw;
            }
            &.size-370 {
                height: 95vw;
                object-position: -29vw;
            }
        }
    }
}