body {
    transition: color .3s ease, background .3s ease
}

body.active {
    background: url("../img/shared/bg6.jpg") repeat center;
    color: #fff
}

#sec1 {
    position: relative;
    background: url("../img/dinner/sec1_deco.png") no-repeat left top/100%;
    padding: 20vw 0
}

#sec1::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg2.jpg") repeat center;
    width: 30%;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -2
}

#sec1:after {
    content: "";
    position: absolute;
    background: rgba(103, 90, 58, .5);
    width: 100vw;
    height: 1px;
    bottom: 0;
    left: 50%;
    transform-origin: left;
    transform: rotate(-36deg);
    z-index: -1
}

#sec1 .col-l h2 {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    color: #000;
    font-size: 6.4vw;
    font-weight: 300;
    line-height: 1;
    letter-spacing: .15em
}

#sec1 .col-l h2 * {
    letter-spacing: .15em
}

#sec1 .col-l h2 span {
    color: #fff
}

#sec1 .col-l .photo {
    position: relative;
    z-index: 1;
    margin: -15vw 10% 0
}

#sec1 .col-l .photo::before {
    content: "";
    position: absolute;
    border: 1px solid rgba(103, 90, 58, .5);
    top: 10vw;
    bottom: -4vw;
    left: -4vw;
    right: 20vw;
    z-index: -1
}

#sec1 .col-r {
    margin-top: 10vw
}

#sec1 .col-r .txt {
    margin-top: 5vw;
    letter-spacing: .06em
}

@media screen and (min-width: 768px) {
    #sec1 {
        background-size: auto;
        padding: 0 0 193px
    }

    #sec1::before {
        width: 200px
    }

    #sec1:after {
        left: calc(50% + 343px)
    }

    #sec1 .wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 55px;
        max-width: 1260px;
        padding: 0 30px
    }

    #sec1 .col-l {
        margin: 152px 0 0 38px
    }

    #sec1 .col-l h2 {
        font-size: 33px
    }

    #sec1 .col-l .photo {
        margin: -76px 0 0
    }

    #sec1 .col-l .photo::before {
        top: 32px;
        bottom: -21px;
        left: -21px;
        right: 90px
    }

    #sec1 .col-r {
        flex: 1;
        margin-top: 0
    }

    #sec1 .col-r .photo {
        margin-right: calc(-50vw + 50%);
        height: 606px
    }

    #sec1 .col-r .txt {
        width: -moz-fit-content;
        width: fit-content;
        margin: 94px 28px 0 auto
    }
}

#sec2 h3 {
    text-align: center;
    color: #000;
    font-size: 5.87vw;
    font-weight: 300;
    line-height: 1.724137931;
    letter-spacing: .15em
}

#sec2 .set1 .lead {
    position: relative
}

#sec2 .set1 .lead::before,
#sec2 .set1 .lead:after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, .62);
    width: 1px;
    top: 0;
    bottom: 0;
    z-index: 2
}

#sec2 .set1 .lead::before {
    left: 3%
}

#sec2 .set1 .lead:after {
    left: calc(3% + 3px)
}

#sec2 .set1 .lead .bg {
    position: absolute;
    inset: 0
}

#sec2 .set1 .lead .bg::before {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    inset: 0 auto 0 0;
    width: 80%;
    z-index: 1
}

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

#sec2 .set1 .lead h2 {
    position: relative;
    z-index: 2;
    padding: 30vw 0 30vw 8%
}

#sec2 .set1 .lead h2 span {
    display: block;
    color: #fff;
    line-height: 1
}

#sec2 .set1 .lead h2 span.en {
    font-size: 12.53vw;
    font-weight: 400;
    letter-spacing: .11em
}

#sec2 .set1 .lead h2 span.jp {
    font-size: 5.06vw;
    font-weight: 300;
    letter-spacing: .16em
}

#sec2 .set1 .txt {
    padding: 5vw 4% 0
}

#sec2 .set2 {
    position: relative;
    margin-top: 15vw
}

#sec2 .set2::before {
    content: "";
    position: absolute;
    background: rgba(103, 90, 58, .5);
    width: 120vw;
    height: 1px;
    bottom: 80vw;
    left: 0;
    transform-origin: left;
    transform: rotate(35.4deg);
    z-index: -2
}

#sec2 .set2 .wrap {
    padding: 0
}

#sec2 .set2 .col-r {
    position: relative;
    text-align: center;
    padding: 12vw 6vw
}

#sec2 .set2 .col-r::before {
    content: "";
    position: absolute;
    background: url("../img/dinner/sec2_set2_bg.png") no-repeat;
    background-size: cover;
    inset: 0 calc(-50vw + 50%) 0 0;
    z-index: -2
}

#sec2 .set2 .col-r .deco-line {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

#sec2 .set2 .col-r .deco-line::before {
    content: "";
    position: absolute;
    border: 1px solid rgba(0, 0, 0, .15);
    border-right: none;
    inset: 2vw;
    width: calc(100% - 236px)
}

#sec2 .set2 .col-r .deco-line .line {
    content: "";
    position: absolute;
    background: url("../img/dinner/sec2_set2_line.png") no-repeat;
    width: 227px;
    height: 1px;
    background-size: 100%;
    right: calc(-50vw + 50%)
}

#sec2 .set2 .col-r .deco-line .line:nth-child(1) {
    top: 2vw
}

#sec2 .set2 .col-r .deco-line .line:nth-child(2) {
    bottom: 2vw
}

#sec2 .set2 .col-r .name-price {
    color: #000;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: .1em
}

#sec2 .set2 .col-r .name-price dt {
    font-size: 7vw
}

#sec2 .set2 .col-r .name-price dt small {
    position: relative;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 2vw;
    padding: 0 3vw;
    font-size: 4vw;
    line-height: 1.5263157895
}

#sec2 .set2 .col-r .name-price dt small::before {
    content: "";
    position: absolute;
    border: 1px solid rgba(0, 0, 0, .3);
    border-right: none;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2vw
}

#sec2 .set2 .col-r .name-price dt small::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(0, 0, 0, .3);
    border-left: none;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2vw
}

#sec2 .set2 .col-r .name-price dd {
    font-size: 5.2vw
}

#sec2 .set2 .col-r .name-price dd small {
    font-size: 4.53vw
}

#sec2 .set2 .col-r .note {
    margin-top: 5vw;
    letter-spacing: .06em
}

#sec2 .set2 .col-r .list {
    margin-top: 5vw
}

#sec2 .set2 .col-r .list h4 {
    text-align: center;
    background: #352b2a;
    color: #fff
}

#sec2 .set2 .col-r .list ul {
    margin-top: 2vw
}

#sec2 .set2 .col-r .list ul li {
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    text-align: center;
    font-size: 12px;
    letter-spacing: .1em
}

#sec2 .set2 .col-l {
    padding: 5vw 4% 0
}

#sec2 .set2 .col-l .group-txt .txt {
    margin-top: 5vw;
    letter-spacing: .06em
}

#sec2 .set3 {
    position: relative;
    margin-top: 15vw;
    padding-bottom: 15vw
}

#sec2 .set3:after {
    content: "";
    position: absolute;
    background: rgba(103, 90, 58, .5);
    width: 50vw;
    height: 1px;
    bottom: 20vw;
    right: 0;
    transform-origin: right;
    transform: rotate(-29deg);
    z-index: -2
}

#sec2 .set3 .group-txt {
    margin-top: 7vw
}

#sec2 .set3 .group-txt .txt {
    margin-top: 3vw
}

#sec2 .set3 .row1 .photo {
    margin: 0 10%
}

#sec2 .set3 .row2 {
    margin-top: 10vw
}

#sec2 .set3 .row2 .txt {
    letter-spacing: .06em
}

#sec2 .set4 {
    position: relative;
    z-index: 1;
    padding-bottom: 15vw
}

#sec2 .set4 .bg-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    z-index: -1
}

#sec2 .set4 .group-txt {
    margin-top: 7vw
}

#sec2 .set4 .group-txt h3 {
    color: #fff
}

#sec2 .set4 .group-txt .txt {
    margin-top: 3vw
}

#sec2 .set4 .row2 {
    margin-top: 10vw
}

#sec2 .set4 .row3 {
    margin-top: 10vw
}

#sec2 .set4 .row4 {
    position: relative;
    margin-top: 10vw
}

#sec2 .set4 .row4::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, .3);
    width: 120vw;
    height: 1px;
    top: 20vw;
    left: calc(-50vw + 50%);
    z-index: -1;
    transform-origin: left;
    transform: rotate(28deg)
}

#sec2 .set4 .row5 {
    background: url("../img/dinner/sec2_set4_img4.jpg") no-repeat center/cover;
    border: 1px solid rgba(255, 255, 255, .5);
    margin-top: 13vw;
    padding: 10vw 5%
}

#sec2 .set4 .row5 h3 {
    text-align: center;
    color: #fff
}

#sec2 .set4 .row5 .txt {
    margin-top: 5vw
}

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

@media screen and (max-width: 768px) {
    #sec2 .set4 .row3 img {
        width: 85%;
    }

    #sec2 .set4 .row3 {
        text-align: center;
    }
}

@media screen and (min-width: 768px) {
    #sec2 h3 {
        text-align: left;
        font-size: 29px
    }

    #sec2 .set1 {
        position: relative;
        min-height: 670px
    }

    #sec2 .set1 .lead {
        position: unset
    }

    #sec2 .set1 .lead::before {
        left: 210px
    }

    #sec2 .set1 .lead:after {
        left: 214px
    }

    #sec2 .set1 .lead .bg img {
        -o-object-position: right;
        object-position: right
    }

    #sec2 .set1 .lead h2 {
        padding: 138px 0 0 281px
    }

    #sec2 .set1 .lead h2 span.en {
        font-size: 79px
    }

    #sec2 .set1 .lead h2 span.jp {
        margin-top: 6px;
        font-size: 23px
    }

    #sec2 .set1 .txt {
        position: relative;
        z-index: 2;
        box-sizing: content-box;
        color: #fff;
        width: 436px;
        padding: 37px 0 37px 281px
    }

    #sec2 .set2 {
        margin-top: 0
    }

    #sec2 .set2::before {
        width: calc(50% + 344px);
        top: 190px;
        bottom: auto
    }

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

    #sec2 .set2 .col-r {
        position: absolute;
        top: 0;
        left: 600px;
        right: calc(-50vw + 50%);
        padding: 0 0 86px 0
    }

    #sec2 .set2 .col-r .deco-line {
        right: 0
    }

    #sec2 .set2 .col-r .deco-line::before {
        border-top: none;
        inset: 0 0 15px 15px;
        width: calc(100% - 243px)
    }

    #sec2 .set2 .col-r .deco-line .line {
        right: 0
    }

    #sec2 .set2 .col-r .deco-line .line:nth-child(1) {
        display: none
    }

    #sec2 .set2 .col-r .deco-line .line:nth-child(2) {
        bottom: 15px
    }

    #sec2 .set2 .col-r .inner {
        max-width: 320px;
        margin: 95px 0 0 161px
    }

    #sec2 .set2 .col-r .name-price dt {
        font-size: 32px
    }

    #sec2 .set2 .col-r .name-price dt small {
        margin: 0 auto 8px;
        padding: 0 13px;
        font-size: 19px
    }

    #sec2 .set2 .col-r .name-price dt small::before {
        width: 7px
    }

    #sec2 .set2 .col-r .name-price dt small::after {
        width: 7px
    }

    #sec2 .set2 .col-r .name-price dd {
        font-size: 24px
    }

    #sec2 .set2 .col-r .name-price dd small {
        font-size: 19px
    }

    #sec2 .set2 .col-r .note {
        margin-top: 19px;
        line-height: 31px
    }

    #sec2 .set2 .col-r .list {
        margin-top: 28px
    }

    #sec2 .set2 .col-r .list h4 {
        line-height: 33px
    }

    #sec2 .set2 .col-r .list ul {
        margin-top: 3px
    }

    #sec2 .set2 .col-r .list ul li {
        font-size: 16px;
        line-height: 36px
    }

    #sec2 .set2 .col-l {
        position: relative;
        width: 600px;
        padding: 148px 0 0
    }

    #sec2 .set2 .col-l .photo {
        margin: 0 0 0 -52px
    }

    #sec2 .set2 .col-l .group-txt {
        max-width: 404px;
        margin: -8px auto 0
    }

    #sec2 .set2 .col-l .group-txt h3 {
        text-align: center
    }

    #sec2 .set2 .col-l .group-txt .txt {
        margin-top: 9px;
        letter-spacing: .06em
    }

    #sec2 .set3 {
        margin-top: -73px;
        padding-bottom: 132px
    }

    #sec2 .set3:after {
        width: 300px;
        bottom: 144px
    }

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

    #sec2 .set3 .group-txt {
        margin-top: 0
    }

    #sec2 .set3 .group-txt h3 {
        text-align: left
    }

    #sec2 .set3 .group-txt .txt {
        margin-top: 0
    }

    #sec2 .set3 .row1 {
        display: flex;
        justify-content: flex-end;
        margin-right: 33px
    }

    #sec2 .set3 .row1 .group-txt {
        order: 1;
        margin: 53px 31px 0 0
    }

    #sec2 .set3 .row1 .group-txt .txt {
        height: 298px;
        margin: 51px 7px 0 0
    }

    #sec2 .set3 .row1 .photo {
        order: 2;
        margin: 0
    }

    #sec2 .set3 .row2 {
        display: flex;
        margin: -149px 0 0 -5px
    }

    #sec2 .set3 .row2 .group-txt {
        width: 421px;
        margin: 292px 0 0 47px
    }

    #sec2 .set3 .row2 .group-txt h3 {
        letter-spacing: .04em
    }

    #sec2 .set3 .row2 .group-txt .txt {
        margin-top: 23px
    }

    #sec2 .set4 {
        padding-bottom: 197px
    }

    #sec2 .set4 .bg-deco {
        width: auto;
        top: 261px
    }

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

    #sec2 .set4 .group-txt {
        margin-top: 0
    }

    #sec2 .set4 .group-txt .txt {
        margin-top: 0
    }

    #sec2 .set4 .row1 {
        position: relative;
        margin: 0 calc(-50vw + 50%) 0 289px
    }

    #sec2 .set4 .row1 .photo {
        height: 595px
    }

    #sec2 .set4 .row1 .group-txt {
        position: absolute;
        bottom: 40px;
        left: 50px;
        z-index: 2;
        max-width: 481px
    }

    #sec2 .set4 .row1 .group-txt h3 {
        color: #000
    }

    #sec2 .set4 .row1 .group-txt .txt {
        margin-top: 14px;
        color: #000;
        text-shadow: 2px 2px 10px #fff, 2px 2px 10px #fff, -2px -2px 10px #fff, -2px -2px 10px #fff
    }

    #sec2 .set4 .row2 {
        display: flex;
        max-width: 800px;
        margin: 143px auto 0
    }

    #sec2 .set4 .row2 .photo {
        flex: 1;
        margin-left: calc(-50vw + 50%);
        height: 461px
    }

    #sec2 .set4 .row2 .group-txt {
        height: 352px;
        margin: 54px 129px 0 56px
    }

    #sec2 .set4 .row2 .group-txt .txt {
        margin: 0 5px 0 0
    }

    #sec2 .set4 .row3 {
        display: flex;
        justify-content: flex-end;
        margin: 78px 8px 0 0
    }

    #sec2 .set4 .row3 .group-txt {
        max-width: 287px;
        margin: 49px 0 0 43px
    }

    #sec2 .set4 .row3 .group-txt h3 {
        letter-spacing: .06em;
        margin-left: -10px
    }

    #sec2 .set4 .row3 .group-txt .txt {
        margin-top: 15px;
        letter-spacing: .06em
    }

    #sec2 .set4 .row4 {
        margin-top: 142px
    }

    #sec2 .set4 .row4::before {
        top: -238px
    }

    #sec2 .set4 .row4 .btn-shared {
        margin: 0 auto
    }

    #sec2 .set4 .row5 {
        margin: 113px 25px 0;
        padding: 118px 0 98px
    }

    #sec2 .set4 .row5 .txt {
        text-align: center;
        margin-top: 38px
    }

    #sec2 .set4 .row5 .btn-shared {
        width: 315px;
        margin: 39px auto 0
    }
}

#sec4 {
    position: relative;
    z-index: 1;
    background: url("../img/shared/bg1.jpg") repeat center;
    color: #464646;
    padding: 15vw 0
}

#sec4::before {
    content: "";
    position: absolute;
    background: rgba(103, 90, 58, .5);
    width: 45vw;
    height: 1px;
    top: 0;
    left: -6vw;
    transform-origin: right;
    transform: rotate(-32.5deg);
    z-index: -2
}

#sec4 .set1 h2 {
    text-align: center;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    border-bottom: 1px solid rgba(103, 90, 58, .5);
    color: #000;
    font-size: 6.67vw;
    line-height: 1.5;
    letter-spacing: .15em
}

#sec4 .set1 .photo {
    margin-top: 8vw
}

#sec4 .set1 .txt {
    margin-top: 5vw;
    letter-spacing: .06em
}

#sec4 .set1 .txt li+li {
    margin-top: 3vw
}

#sec4 .set2 {
    border-top: 1px solid #938a74;
    border-bottom: 1px solid #938a74;
    padding: 10vw 0;
    margin-top: 15vw
}

#sec4 .set2 h3 {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    color: #000;
    padding: 0 4vw 0 5vw;
    font-size: 5.73vw;
    font-weight: 300;
    line-height: 1.3571428571;
    letter-spacing: .15em
}

#sec4 .set2 h3::before {
    content: "";
    position: absolute;
    border: 1px solid rgba(0, 0, 0, .5);
    border-right: none;
    width: 2vw;
    height: 100%;
    top: 0;
    left: 0
}

#sec4 .set2 h3::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(0, 0, 0, .5);
    border-left: none;
    width: 2vw;
    height: 100%;
    top: 0;
    right: 0
}

#sec4 .set2 .sec4-slider {
    margin-top: 10vw
}

#sec4 .set2 .sec4-slider .main .slick-arrow {
    position: absolute;
    top: 27vw
}

#sec4 .set2 .sec4-slider .main .slick-prev {
    left: 0
}

#sec4 .set2 .sec4-slider .main .slick-next {
    right: 0
}

#sec4 .set2 .sec4-slider .main .item {
    padding: 0 6vw
}

#sec4 .set2 .sec4-slider .main .item .group-txt {
    margin-top: 5vw
}

#sec4 .set2 .sec4-slider .main .item .group-txt .name-price {
    text-align: center;
    color: #000;
    font-size: 5.47vw;
    font-weight: 300;
    line-height: 1.8461538462;
    letter-spacing: .15em
}

#sec4 .set2 .sec4-slider .main .item .group-txt .name-price dd small {
    font-size: 4.8vw
}

#sec4 .set2 .sec4-slider .main .item .group-txt .txt {
    margin-top: 2vw
}

#sec4 .set2 .sec4-slider .thumb {
    margin-top: 5vw
}

#sec4 .set2 .sec4-slider .thumb .slick-track {
    display: flex;
    justify-content: center;
    width: 100% !important;
    transform: none !important
}

#sec4 .set2 .sec4-slider .thumb .slick-slide {
    width: 20vw;
    margin: 0 1.5vw
}

#sec4 .set2 .sec4-slider .thumb .slick-slide img {
    border: 1px solid #7e7670
}

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

@media screen and (min-width: 768px) {
    #sec4 {
        padding: 140px 0
    }

    #sec4::before {
        width: 650px;
        left: -155px
    }

    #sec4 .wrap {
        max-width: 1200px
    }

    #sec4 .set1 .title {
        max-width: 478px;
        padding-top: 126px;
        margin-left: 37px
    }

    #sec4 .set1 .title h2 {
        font-size: 35px;
        line-height: 42px
    }

    #sec4 .set1 .photo {
        margin-top: 0;
        top: 0;
        left: 50%;
        right: calc(-50vw + 50%);
        height: 500px
    }

    #sec4 .set1 .txt {
        max-width: 478px;
        margin: 43px 0 0 37px
    }

    #sec4 .set1 .txt li+li {
        margin-top: 16px
    }

    #sec4 .set2 {
        max-width: 1000px;
        margin: 176px auto 0;
        padding: 68px 0
    }

    #sec4 .set2 h3 {
        padding: 0 17px;
        font-size: 28px
    }

    #sec4 .set2 h3::before {
        width: 9px
    }

    #sec4 .set2 h3::after {
        width: 9px
    }

    #sec4 .set2 .sec4-slider {
        margin-top: 64px
    }

    #sec4 .set2 .sec4-slider .main .slick-arrow {
        top: calc(50% - 18px)
    }

    #sec4 .set2 .sec4-slider .main .slick-prev {
        left: -5px
    }

    #sec4 .set2 .sec4-slider .main .slick-next {
        right: -5px
    }

    #sec4 .set2 .sec4-slider .main .item {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding: 0
    }

    #sec4 .set2 .sec4-slider .main .item .photo {
        order: 2
    }

    #sec4 .set2 .sec4-slider .main .item .group-txt {
        order: 1;
        max-width: 358px;
        margin: 0
    }

    #sec4 .set2 .sec4-slider .main .item .group-txt .name-price {
        font-size: 26px
    }

    #sec4 .set2 .sec4-slider .main .item .group-txt .name-price dd small {
        font-size: 21px
    }

    #sec4 .set2 .sec4-slider .main .item .group-txt .txt {
        margin-top: 13px;
        letter-spacing: .06em
    }

    #sec4 .set2 .sec4-slider .thumb {
        margin: -40px 53px 0 0
    }

    #sec4 .set2 .sec4-slider .thumb .slick-track {
        justify-content: center
    }

    #sec4 .set2 .sec4-slider .thumb .slick-slide {
        cursor: pointer;
        width: auto;
        margin: 0 4px;
        transition: .3s
    }

    #sec4 .set2 .sec4-slider .thumb .slick-slide:hover {
        opacity: .7
    }

    #sec4 .btn-shared {
        margin: 78px auto 0
    }
}