#top {
    position: relative
}

#top::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -30vw;
    background: url("../img/unagi/hd_deco.png") no-repeat bottom center/100%;
    width: 90vw;
    height: 160vw;
    z-index: -1
}

#top .wrap {
    padding: 0
}

#top h1 {
    display: none
}

#top #key {
    background: url("../img/menu/kv.jpg") no-repeat bottom center/cover;
    margin: 0;
    height: 70vw
}

#top .ttl {
    width: 80vw;
    margin: 5vw auto 0
}

#top .txt {
    padding: 5vw 4vw 0
}

#sec1 {
    margin-top: 15vw;
    position: relative
}

#sec1 .ttl {
    width: 90vw;
    margin: 0 auto
}

#sec1 .txt1 {
    margin-top: 5vw;
    text-align: center
}

#sec1 .photo1 {
    margin-top: 5vw
}

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

#sec1 .js-slider1 {
    margin-top: 5vw
}

#sec1 .js-slider1 .slick-dots {
    --color: #000;
    justify-content: flex-start;
    margin-left: -4vw
}

#sec2 {
    margin-top: 15vw;
    position: relative;
    color: #fff;
    padding-top: 10vw
}

#sec2::before {
    content: "";
    position: absolute;
    top: 64vw;
    left: 0;
    right: 0;
    bottom: 0;
    width: 110vw;
    background: url("../img/shared/bg3.jpg") repeat top center;
    z-index: -1
}

#sec2:after {
    content: "";
    position: absolute;
    top: -35vw;
    left: 0;
    background: url(../img/menu/sec1_deco.png) no-repeat bottom center/100%;
    width: 50vw;
    height: 100vw;
    z-index: -2
}

#sec2 .wrap::before {
    content: "";
    position: absolute;
    top: 14vw;
    right: 0;
    background: url("../img/menu/sec2_deco.png") no-repeat bottom center/100%;
    width: 60vw;
    height: 40vw;
    z-index: -1
}

#sec2 .ttl {
    width: 50vw;
    margin: 0 auto
}

#sec2 .js-slider2 {
    margin-top: 5vw
}

#sec2 dl.price {
    text-align: left;
    color: #fff;
    padding: 5vw 0 2vw 4vw;
    position: relative;
    font-weight: 400
}

#sec2 dl.price::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1vw;
    width: 1px;
    height: 150%;
    background: #fff
}

#sec2 .sec2-js-thumb {
    flex-wrap: wrap;
    width: 45vw;
    position: absolute !important;
    top: 140vw;
    right: 14vw;
    position: relative
}

#sec2 .sec2-js-thumb .slick-list {
    overflow: visible
}

#sec2 .sec2-js-thumb .slick-track {
    transform: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

#sec2 .sec2-js-thumb .slick-slide {
    width: 15vw !important;
    height: 15vw;
    padding: 1vw
}

#sec2 .sec2-js-thumb .slick-slide:last-child {
    margin-right: -10vw
}

#sec2 .sec2-js-thumb .slick-slide * {
    width: 100% !important;
    height: 100% !important
}

#sec2 .sec2-js-thumb .slick-current .thumb-photo::before {
    opacity: 0
}

#sec2 .sec2-js-thumb .thumb-photo {
    border: 1px solid #fff;
    position: relative
}

#sec2 .sec2-js-thumb .thumb-photo::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    background: rgba(0, 0, 0, .6);
    z-index: 2;
    transition: opacity .3s
}

#sec2 .sec2-js-thumb .thumb-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#sec2 .txt {
    margin-top: 4vw
}

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

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

#sec3 .wrap::before {
    content: "";
    position: absolute;
    top: 8vw;
    left: 0;
    background: url("../img/menu/sec3_deco.png") no-repeat top center/100%;
    width: 100vw;
    height: 60vw;
    z-index: -1
}

#sec3 .ttl {
    width: 50vw;
    position: absolute;
    top: 12vw;
    right: 4vw
}

#sec3 .photo {
    width: 40vw
}

#sec4 {
    margin-top: 15vw;
    position: relative
}

#sec4::before {
    content: "";
    position: absolute;
    top: 75vw;
    left: 0;
    background: url("../img/menu/sec4_deco.png") no-repeat top center/100%;
    width: 116vw;
    height: 59vw;
    z-index: -1
}

#sec4 .photo {
    width: 80vw;
    margin: 0 -4vw 0 auto
}

#sec4 .ttl {
    margin-top: 5vw;
    width: 80vw
}

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

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

#sec5 {
    margin-top: 20vw;
    position: relative
}

#sec5::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    background: url("../img/menu/sec5_deco.png") no-repeat bottom center/100%;
    width: 70vw;
    height: 40vw
}

#sec5 .ttl {
    position: absolute;
    top: -18vw;
    left: 4vw;
    width: 70vw;
    z-index: 2
}

#sec5 .txt {
    margin-top: 5vw
}

#sec5 .photo {
    margin-top: 5vw
}

#sec6 {
    margin-top: 15vw;
    padding: 4vw;
    margin-bottom: 15vw
}

#sec6 .wrap {
    border: 2px solid #717171;
    box-sizing: border-box;
    padding: 10vw 4vw
}

#sec6 .ttl {
    width: 30vw;
    margin: 0 auto
}

#sec6 .btn-list {
    margin-top: 6vw
}

#sec6 .btn-list .btn-shared:not(:last-child) {
    margin-bottom: 3vw
}

#sec6 .btn-list .btn-shared a {
    padding-right: 5vw
}

#sec6 .btn-list .btn-shared a::before {
    background: url("../img/shared/icon_open.png") no-repeat top center/100%;
    width: 4vw;
    height: 4vw;
    right: 20vw
}

@media(min-width: 1000px) {
    #top::before {
        bottom: -294px;
        right: -204px;
        width: 600px;
        height: 765px
    }

    #top h1 {
        display: none
    }

    #top .wrap {
        max-width: 1230px
    }

    #top #key {
        margin: 0 !important;
        position: absolute;
        top: 100px;
        left: calc(-50vw + 50%);
        height: 867px;
        right: 480px
    }

    #top .hd-gr {
        padding: 221px 0 0 calc(50% + 171px);
        z-index: 2;
        position: relative
    }

    #top .hd-gr .ttl {
        margin: 0
    }

    #top .hd-gr .txt {
        padding: 71px 0 0 11px;
        margin: 0 -84px 0 0;
        letter-spacing: 0
    }

    #sec1 {
        margin-top: 221px
    }

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

    #sec1 .ttl-gr {
        position: absolute;
        top: 58px;
        left: 0;
        z-index: 2
    }

    #sec1 .ttl {
        width: auto;
        margin: 0
    }

    #sec1 .txt1 {
        margin: 12px 0 0 45px;
        text-align: left
    }

    #sec1 .photo1 {
        margin: 0 calc(50% - 50vw) 0 calc(50% - 159px);
        height: 572px
    }

    #sec1 .txt2 {
        margin: 36px 41px 0 calc(50% - 1px)
    }

    #sec1 .js-slider1 {
        margin-top: 0;
        position: absolute;
        top: 442px;
        left: 52px;
        max-width: 500px
    }

    #sec1 .js-slider1 .slick-dots {
        margin-left: 0
    }

    #sec1 .js-slider1 .slick-dots li {
        margin-right: 10px
    }

    #sec2 {
        margin-top: 158px;
        padding: 0 0 181px
    }

    #sec2::before {
        top: 277px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 110vw;
        z-index: -1
    }

    #sec2:after {
        top: -398px;
        left: 0;
        width: 573px;
        height: 676px;
        z-index: -2
    }

    #sec2 .wrap {
        max-width: 1093px
    }

    #sec2 .wrap::before {
        top: 96px;
        right: -131px;
        background: url("../img/menu/sec2_deco.png") no-repeat bottom center/100%;
        width: 509px;
        height: 189px;
        z-index: -2
    }

    #sec2 .ttl {
        width: auto;
        margin: 0;
        position: absolute;
        top: 12px;
        right: 3px
    }

    #sec2 .js-slider2 {
        margin: 0 0 0 22px;
        max-width: 778px
    }

    #sec2 dl.price {
        padding: 20px 0 0 88px;
        position: relative;
        font-weight: 400
    }

    #sec2 dl.price::before {
        left: 64px;
        width: 1px;
        height: 100%
    }

    #sec2 .sec2-js-thumb {
        flex-wrap: wrap;
        width: 300px;
        position: absolute !important;
        top: 490px;
        right: 390px;
        position: relative
    }

    #sec2 .sec2-js-thumb .slick-list {
        overflow: visible
    }

    #sec2 .sec2-js-thumb .slick-slide {
        width: 110px !important;
        height: 110px;
        padding: 5px
    }

    #sec2 .sec2-js-thumb .slick-slide:last-child {
        margin-right: -65px
    }

    #sec2 .sec2-js-thumb .thumb-photo {
        cursor: pointer
    }

    #sec2 .txt {
        margin: 60px 0 0 86px
    }

    #sec2 .photo {
        margin: 0;
        position: absolute;
        top: 677px;
        right: calc(50% - 50vw);
        left: calc(50% + 274px);
        height: 284px
    }

    #sec3 {
        margin-top: -85px
    }

    #sec3 .wrap {
        max-width: 861px
    }

    #sec3 .wrap::before {
        top: 85px;
        left: -169px;
        width: 850px;
        height: 169px;
        z-index: -1
    }

    #sec3 .ttl {
        width: auto;
        top: 119px;
        right: 14px
    }

    #sec3 .photo {
        width: 40vw
    }

    #sec4 {
        margin-top: 116px
    }

    #sec4::before {
        top: 70px;
        width: 1226px;
        height: 379px
    }

    #sec4 .photo {
        width: auto;
        margin: 0;
        position: absolute;
        top: 0;
        left: calc(50% + 65px);
        right: calc(50% - 50vw);
        height: 512px
    }

    #sec4 .gr {
        padding: 58px calc(50% - 40px) 0 0
    }

    #sec4 .ttl {
        margin-top: 0;
        width: auto
    }

    #sec4 .txt {
        margin: 12px 0 0px 7px
    }

    #sec4 .btn-shared {
        margin: 34px 0 0px 12px
    }

    #sec8 {
        margin-top: 192px
    }

    #sec8::before {
        display: none
    }

    #sec5 {
        margin-top: 180px;
        position: relative
    }

    #sec5::before {
        top: 0;
        left: 0;
        transform: translateY(-100%);
        width: 867px;
        height: 253px
    }

    #sec5 .ttl {
        top: -125px;
        left: calc(50% - 501px);
        width: auto
    }

    #sec5 .bg {
        height: 664px
    }

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

    #sec5 .wrap {
        max-width: 900px
    }

    #sec5 .txt {
        margin: 69px calc(50% - 61px) 0 0;
        letter-spacing: 0
    }

    #sec5 .photo {
        margin-top: 0;
        position: absolute;
        top: -60px;
        right: 0
    }

    #sec6 {
        margin: 184px 0 60px;
        padding: 0 20px 0;
        box-sizing: border-box
    }

    #sec6 .wrap {
        padding: 59px 99px
    }

    #sec6 .ttl {
        width: auto;
        margin: 0;
        text-align: center
    }

    #sec6 .btn-list {
        margin-top: 77px;
        justify-content: space-between;
        display: flex
    }

    #sec6 .btn-list .btn-shared:not(:last-child) {
        margin-bottom: 0
    }

    #sec6 .btn-list .btn-shared a {
        padding-right: 40px
    }

    #sec6 .btn-list .btn-shared a::before {
        background: url("../img/shared/icon_open.png") no-repeat top center/100%;
        width: 18px;
        height: 16px;
        right: 137px;
        top: 52%
    }
}

@media(min-width: 1000px)and (max-width: 1300px) {
    #top .hd-gr {
        padding-right: 20px
    }

    #top .hd-gr .ttl {
        width: auto
    }

    #top .hd-gr .ttl img {
        width: 100%;
        height: auto
    }

    #top .hd-gr .txt {
        margin-right: 0
    }

    #top #key {
        right: calc(50% - 156px)
    }
}

@media(min-width: 1000px)and (max-width: 1100px) {
    #sec2 .js-slider2 {
        margin-left: -40px
    }

    #sec2 .photo {
        left: calc(50% + 212px)
    }
}




.botan1 a {
   width: 380px;
   margin: 2px auto 30px auto;
   padding: 7px 0;
   display: block;
   color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   background-color: #2e1810;
   border-bottom: 2px solid #4A4A4A;
   box-sizing: border-box;
   font-weight: bold;
}


@media (max-width: 768px) {
.botan1 a {
   width: 90%;
   margin: 2px auto 30px auto;
   padding: 7px 0;
   display: block;
   color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   text-align: center;
   text-decoration: none;
   font-size: 15px;
   background-color: #2e1810;
   border-bottom: 2px solid #4A4A4A;
   box-sizing: border-box;
   font-weight: bold;
}
}