@media (max-width: 1100px){
    *{
        box-sizing: border-box;
    }
    body{
        min-width: unset;
        width: 100%;
    }
    img{
        max-width: 100%;
        height: auto;
    }
    #hpb-headerLogo{
        width: 60%;
    }
    #hpb-headerExtra1{
        width: 100%;
    }
    #hpb-inner{
        width: 100%;
    }
    #hpb-nav{
        width: 100%;
    }
    .hpb-layoutset-01 #hpb-main,
    .hpb-layoutset-02 #hpb-main {
        width: 65%;
    }
    #hpb-aside{
        width: 30%;
    }
    #banner ul {
        width: 100%;
    }
    #banner a#banner-access, #banner a#banner-netshop {
        width: 100%;
        height: 5vw;
        background-size: contain;
    }
}

@media (max-width: 768px){
    .hpb-layoutset-01 #hpb-main,
    .hpb-layoutset-02 #hpb-main,
    #hpb-aside{
        width: 100%;
        padding: 0 1.5vw;
    }
    .hpb-layoutset-01 #hpb-main,
    .hpb-layoutset-02 #hpb-main {
        padding-top: 20px;
    }
    .hpb-layoutset-01 #hpb-title,
    .hpb-layoutset-02 #hpb-title{
        width: 100%;
        padding-top: 18vw;
    }
    #hpb-nav li a {
        width: 14vw;
        height: 14vw;
        background-size: contain;
    }
    #item .itemlist{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 1.5vw;
    }
    #item .itemlist .item{
        width: 40%;
    }
    #item .itemlist .item .itemdata{
        width: 100%;
    }
    #hpb-nav li {
        line-height: 14vw;
        font-size: 10px;
        white-space: nowrap;
    }
    #banner a#banner-access, #banner a#banner-netshop{
        height: 12vw;
    }
    #hpb-footerExtra1,
    #hpb-footerMain{
        width: 100%;
    }
    #hpb-footerMain p{
        text-align: center;
    }
}