#top #key {
    height: 70vw;
    background: url(../img/onlineshop/kv.jpg) no-repeat 72% 0%/cover
}

#sec1 {
    margin-top: 45vw
}

#sec1 .js-slider1 {
    width: 60vw
}

#sec1 .ttl {
    position: absolute;
    top: 0;
    right: 5vw;
    width: 25vw;
    margin-top: -30vw;
}

#sec1 .gr {
    margin-top: 34vw
}

#sec1 .photo {
    margin-top: 10vw;
    margin-right: -5vw
}

#sec2 {
    margin-top: 20vw
}

#sec2 .set1 {
    position: relative;
    height: 70vw
}

#sec2 .set1::before {
    content: "";
    background: url("../img/onlineshop/sec2_deco.jpg") no-repeat top center/100%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    width: 80vw;
    height: 50vw
}

#sec2 .set1 .ttl {
    padding: 10vw 10vw 0 0
}

#sec2 .set1 .bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1
}

#sec2 .set1 .bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#sec2 .ttl2 {
    margin: 15vw 15vw 0
}

#sec2 .txt {
    text-align: center;
    margin-top: 7vw
}

#sec2 .set2 {
    margin-top: 10vw
}

#sec2 .gr {
    margin-top: 10vw
}

#sec2 .ttl3 {
    height: 18vw;
    position: relative;
    display: inline-block;
    margin-left: -2vw
}

#sec2 .ttl3::before {
    content: "";
    background: #000;
    height: 1px;
    width: 1000vw;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2
}

#sec2 .ttl3 img {
    height: 100%;
    width: auto
}

#sec2 .price {
    font-weight: 400;
    letter-spacing: .02em;
    margin-top: 5vw
}

#sec2 .price dt {
    font-size: 5vw
}

#sec2 .price dt .price-l {
    font-size: 6vw
}

#sec2 .price dd {
    margin-left: 1vw;
    font-size: 4.5vw
}

#sec2 .price dd .unit {
    font-size: 4vw
}

#sec2 .txt2 {
    margin-top: 5vw
}

#sec2 .btn-shared {
    margin-top: 5vw
}

#sec2 .slider {
    margin-top: 10vw
}

#sec2 .set3 {
    position: relative
}

#sec2 .set3::before {
    content: "";
    position: absolute;
    bottom: -20vw;
    left: -10vw;
    background: url("../img/shared/deco2.jpg") no-repeat top center/100%;
    width: 50vw;
    height: 50vw
}

#sec3 {
    position: relative;
    margin-top: 30vw
}

#sec3 .ttl {
    position: absolute;
    top: -25vw;
    left: 5vw;
    width: 21vw
}

#sec3 .photo1 {
    width: 65vw;
    margin-left: auto;
    margin-right: -5vw
}

#sec3 .photo1::before {
    content: "";
    position: absolute;
    bottom: -30vw;
    right: -20vw;
    background: url("../img/shared/deco2.jpg") no-repeat top center/100%;
    width: 50vw;
    height: 50vw
}

#sec3 .gr {
    margin-top: 30vw
}

#sec3 .photo2 {
    margin-top: 10vw
}

#sec4 {
    margin-top: 20vw
}

#sec4 .set1 {
    width: 100%;
    height: 70vw;
    position: relative
}

#sec4 .photo1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

#sec4 .photo1 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#sec4 .set2 {
    margin-top: 14vw
}

#sec4 .txt {
    margin-top: 10vw
}

#sec4 .btn-shared {
    margin-top: 10vw
}

#sec4 .photo2 {
    margin-top: 10vw;
    width: 85vw
}

#sec5 {
    margin-top: 20vw;
    padding-bottom: 20vw
}

#sec5 .set1 .ttl {
    padding-right: 24vw
}

#sec5 .set1 .txt {
    margin-top: 9vw
}

#sec5 .set1 .btn-shared {
    margin-top: 10vw
}

#sec5 .set1 .photo {
    margin-top: 10vw;
    position: relative;
    margin-left: -5vw
}

#sec5 .set1 .photo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/onlineshop/sec5_deco.jpg") no-repeat bottom center/100%;
    width: 80vw;
    height: 50vw;
    transform: translateY(-100%);
    z-index: -1
}

#sec5 .set2 {
    margin-top: 10vw
}

#sec5 .set2 .set2-ttl {
    font-size: 6vw;
    font-weight: 400;
    letter-spacing: .08em;
    margin-left: 3vw
}

#sec5 .set2 .row {
    margin-top: 10vw
}

#sec5 .set2 .col:not(:last-child) {
    margin-bottom: 10vw
}

#sec5 .set2 .item-ttl {
    font-size: 5vw;
    font-weight: 400;
    text-align: center;
    letter-spacing: .02em;
    margin-top: 5vw
}

#sec5 .set2 .item-txt {
    margin-top: 3vw
}

#sec5 .set2 .btn-shared {
    margin-top: 5vw
}

@media(min-width: 1000px) {
    #top #key {
        background: url("../img/onlineshop/kv.jpg") no-repeat top center/cover;
		height:45vw;
    }

    #sec1 {
        margin-top: 120px
    }

    #sec1 .wrap {
        max-width: 1500px
    }

    #sec1 .js-slider1 {
        width: auto;
        margin-left: 101px;
        width: 420px
    }

    #sec1 .ttl {
        right: calc(50% - 493px);
        top: 176px;
        width: auto;
        margin: 0;

    }

    #sec1 .gr {
        margin-top: 85px;
        display: flex
    }

    #sec1 .txt {
        max-width: 457px;
        margin: 116px 72px 0 auto
    }

    #sec1 .photo {
        margin: 0
    }

    #sec2 {
        margin-top: 208px
    }

    #sec2 .set1 {
        height: 700px
    }

    #sec2 .set1 .wrap {
        max-width: 1200px
    }

    #sec2 .set1::before {
        background: url("../img/onlineshop/sec2_deco.jpg") no-repeat top center/100%;
        width: 671px;
        height: 206px
    }

    #sec2 .set1 .ttl {
        padding: 92px 0 0 6px
    }

    #sec2 .ttl2 {
        margin: 149px 0 0;
        text-align: center
    }

    #sec2 .txt {
        margin-top: 40px
    }

    #sec2 .ttl3 {
        height: auto;
        display: inline-block;
        margin-left: 0
    }

    #sec2 .ttl3::before {
        bottom: 0
    }

    #sec2 .price {
        line-height: 50px;
        margin-top: 33px
    }

    #sec2 .price dt {
        font-size: 25px
    }

    #sec2 .price dt .price-l {
        font-size: 35px
    }

    #sec2 .price dd {
        font-size: 20px;
        margin: -15px 0 0 10px
    }

    #sec2 .price dd .unit {
        font-size: 16px
    }

    #sec2 .txt2 {
        margin: 5px 0 0 10px
    }

    #sec2 .btn-shared {
        margin: 52px 0 0 9px
    }

    #sec2 .slider {
        width: 550px;
        margin-top: 20px
    }

    #sec2 .wrap {
        display: flex;
        flex-direction: row-reverse;
        max-width: 1100px;
        justify-content: flex-end
    }

    #sec2 .gr {
        margin: 50px 0 0 57px
    }

    #sec2 .set2 {
        margin-top: 76px
    }

    #sec2 .set3 {
        margin-top: 52px
    }

    #sec2 .set3::before {
        bottom: -339px;
        left: -123px;
        width: 579px;
        height: 579px
    }

    #sec2 .set3 .slider {
        margin-top: 29px
    }

    #sec3 {
        margin-top: 211px
    }

    #sec3 .set1 .wrap {
        max-width: 1500px;
        display: flex
    }

    #sec3 .ttl {
        top: 0;
        left: 0;
        margin: 247px 63px 0 auto;
        width: auto;
        position: relative
    }

    #sec3 .photo1 {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        text-align: right
    }

    #sec3 .photo1::before {
        bottom: -254px;
        right: -169px;
        width: 387px;
        height: 387px
    }

    #sec3 .set2 {
        margin-top: -3px
    }

    #sec3 .set2 .wrap {
        display: flex;
        flex-direction: row-reverse
    }

    #sec3 .gr {
        margin-top: 0
    }

    #sec3 .photo2 {
        margin-top: 0
    }

    #sec3 .txt {
        margin: 53px 0 0 69px
    }

    #sec4 {
        margin-top: 150px
    }

    #sec4 .set1 {
        width: 100%;
        height: 650px
    }

    #sec4 .set2 {
        margin-top: 123px
    }

    #sec4 .set2 .wrap {
        display: flex;
        max-width: 1291px;
        justify-content: flex-end
    }

    #sec4 .gr {
        margin-right: 91px
    }

    #sec4 .txt {
        margin-top: 37px
    }

    #sec4 .btn-shared {
        margin-top: 53px
    }

    #sec4 .photo2 {
        margin-top: -20px;
        width: auto
    }

    #sec5 {
        margin-top: 258px;
        padding-bottom: 182px
    }

    #sec5 .set1 .wrap {
        display: flex;
        flex-direction: row-reverse;
        max-width: 1500px;
        justify-content: flex-end
    }

    #sec5 .set1 .gr {
        margin: 98px 0 0 66px
    }

    #sec5 .set1 .ttl {
        padding-right: 0
    }

    #sec5 .set1 .txt {
        margin: 57px 0 0 5px;
        max-width: 362px
    }

    #sec5 .set1 .btn-shared {
        margin-top: 40px
    }

    #sec5 .set1 .photo {
        margin: 0
    }

    #sec5 .set1 .photo::before {
        width: 808px;
        height: 306px;
        max-width: 100%
    }

    #sec5 .set2 {
        margin-top: 99px
    }

    #sec5 .set2 .set2-ttl {
        font-size: 36px;
        margin-left: 53px
    }

    #sec5 .set2 .row {
        margin-top: 36px
    }

    #sec5 .set2 .col:not(:last-child) {
        margin-bottom: 0
    }

    #sec5 .set2 .item {
        display: flex;
        flex-direction: column;
        height: 100%
    }

    #sec5 .set2 .info {
        flex: 1;
        max-width: 100%;
        display: flex;
        flex-direction: column
    }

    #sec5 .set2 .item-ttl {
        font-size: 20px;
        margin-top: 22px
    }

    #sec5 .set2 .item-txt {
        margin-top: 5px;
        padding: 0 15px 23px;
        box-sizing: border-box
    }

    #sec5 .set2 .btn-shared {
        margin-top: 5vw;
        margin-top: auto
    }

    #sec5 .set2 .btn-shared a {
        min-width: unset;
        display: block
    }
}

@media(min-width: 1000px)and (max-width: 1500px) {
    #sec3 .photo1 {
        width: calc(50% - 67px);
        min-width: 500px
    }

    #sec3 .photo1 img {
        width: 100%;
        height: auto
    }
}

@media(min-width: 1000px)and (max-width: 1400px) {
    #sec1 .ttl {
        right: calc(50% - 570px)
    }

    #sec5 .set1 .photo img {
        width: 100%;
        height: auto
    }

    #sec5 .set1 .gr {
        margin-left: 20px;
        margin-right: 50px
    }
}

@media(min-width: 1000px)and (max-width: 1300px) {
    #sec1 .ttl {
        right: 20px;
        width: calc(40vw + 123px)
    }

    #sec1 .ttl img {
        width: 100%;
        height: auto
    }

    #sec1 .js-slider1 {
        margin-left: 20px
    }

    #sec1 .txt {
        margin-left: 20px;
        width: 450px
    }

    #sec1 .photo img {
        width: 100%;
        height: auto
    }
}

@media(min-width: 1000px)and (max-width: 1200px) {
    #sec3 .ttl {
        width: 480px;
        margin-right: 30px
    }

    #sec3 .ttl img {
        width: 100%;
        height: auto
    }

    #sec3 .photo2 {
        width: 440px;
        flex-shrink: 0
    }

    #sec3 .photo2 img {
        width: 100%;
        height: auto
    }

    #sec2 .gr {
        margin-right: 20px;
        margin-left: 20px
    }

    #sec4 .gr {
        margin-left: 20px;
        margin-right: 20px
    }

    #sec4 .ttl img {
        width: 100%;
        height: auto
    }
}