#key {
    background: url("../img/lunch/kv.jpg") no-repeat center top/cover
}

#key .kv-ttl {
    bottom: 20vw;
    top: unset;
    width: 80vw
}

#sec1 {
    background: url("../img/lunch/sec1_bg.jpg") no-repeat center top/cover
}

#sec1 .ttl {
    width: 50vw;
    margin: 0 auto;
    left: -5vw;
    position: relative
}

#sec1 .txt {
    margin-top: 5vw;
    background: url("../img/shared/bg6.jpg") repeat center top;
    padding: 5vw;
    position: relative;
    z-index: 2
}

#sec2 {
    padding: 10vw 0 10vw;
    position: relative;
    z-index: 1
}

#sec2 .ttl {
    position: relative;
    z-index: 3
}

#sec2 .photo-wrap {
    position: relative;
    z-index: 1
}

#sec2 .photo-wrap::before {
    content: "";
    position: absolute;
    top: 10vw;
    right: calc(50% - 50vw);
    bottom: 0;
    left: calc(50% - 50vw);
    z-index: -1;
    background: #000
}

#sec2 .photo-wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -30vw;
    background: url("../img/lunch/sec2_deco.png") no-repeat center bottom/100%;
    width: 80vw;
    height: 300vw;
    z-index: -1
}

#sec2 .photo1 {
    position: relative;
    z-index: 1;
    margin-left: -20vw
}

#sec2 .img-gr {
    margin-top: 5vw;
    position: relative
}

#sec2 .ttl2 {
    position: absolute;
    top: 2vw;
    left: 5vw;
    width: 10vw
}

#sec2 .ttl3 {
    font-size: 7vw;
    font-weight: 600
}

#sec2 .ttl3>span {
    min-width: 50vw;
    border-bottom: 1px solid currentColor;
    display: inline-block;
    text-align: left;
    position: relative
}

#sec2 .ttl3 .mid {
    left: 15vw
}

#sec2 .ttl3 .bottom {
    left: 6vw
}

#sec2 .price {
    font-size: 8vw;
    margin-top: 5vw;
    font-weight: 500;
    line-height: 1.8
}

#sec2 .price small {
    font-size: 7vw
}

#sec2 .txt {
    margin-top: 0
}

#sec3 .set1 {
    position: relative;
    padding: 10vw 0 20vw;
    z-index: 1;
    color: #fff;
    position: relative
}

#sec3 .set1::before {
    content: "";
    position: absolute;
    top: 61vw;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("../img/lunch/sec3_bg.jpg") no-repeat center center/cover
}

#sec3 .set1::after {
    content: "";
    position: absolute;
    bottom: -10vw;
    left: 0;
    background: url("../img/lunch/sec3_deco.png") no-repeat center bottom/100%;
    width: 50vw;
    height: 30vw
}

#sec3 .set1 .ttl {
    position: absolute;
    top: 0;
    left: 4vw;
    width: 25vw
}

#sec3 .set1 .photo1 {
    padding-top: 30vw;
    width: 80vw;
    margin: 0 0 0 20vw
}

#sec3 .set1 .price {
    font-size: 8vw;
    margin-top: 5vw;
    font-weight: 500;
    line-height: 1.8
}

#sec3 .set1 .price small {
    font-size: 7vw
}

#sec3 .set2 {
    padding: 20vw 0 10vw
}

#sec3 .set2 .ttl2 {
    line-height: 1.5;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    text-align: center;
    white-space: nowrap;
    font-size: 8vw;
    font-weight: bold;
    padding: 2vw 0
}

#sec3 .set2 .ttl2 small {
    font-size: 6vw
}

#sec3 .set2 .ttl2 .red {
    color: #a22121
}

#sec3 .set2 .btn-shared {
    margin-top: 5vw;
    --bg: url("../img/shared/bg5.jpg") repeat center top
}

#sec4 {
    padding: 10vw 0 15vw;
    position: relative;
    z-index: 1
}

#sec4::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background: url("../img/lunch/sec4_deco.png") no-repeat center bottom/100%;
    width: 60vw;
    height: 80vw
}

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

#sec4 .ttl {
    width: 80vw
}

#sec4 .btn-shared {
    margin-top: 5vw;
    --bg: url("../img/shared/bg8.jpg") repeat center top
}

#sec5 {
    padding: 10vw 0 15vw;
    background: url("../img/shared/bg6.jpg") repeat center top;
    position: relative;
    z-index: 1
}

#sec5::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: url("../img/lunch/sec5_deco.png") no-repeat center bottom/100%;
    width: 100%;
    height: 100vw;
    z-index: -1
}

#sec5 .txt-deco1 {
    width: 40vw
}

#sec5 .txt-deco2 {
    position: absolute;
    top: 0;
    right: 5vw;
    width: 31vw
}

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

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

#sec5 .list {
    margin-top: 5vw;
    display: flex;
    flex-direction: column;
    gap: 5vw
}

#sec5 .btn-shared {
    margin-top: 5vw;
    --bg: url("../img/shared/bg9.jpg") repeat center top
}

@media(min-width: 768px) {
    #top #key .kv-ttl {
        top: unset;
        bottom: 100px;
        left: 50px;
        transform: none
    }

    #sec1 {
        background: url("../img/lunch/sec1_bg.jpg") no-repeat center center/cover
    }

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

    #sec1 .ttl {
        width: auto;
        text-align: right;
        margin: 0;
        left: 0;
        position: relative
    }

    #sec1 .txt {
        margin-top: -239px;
        background: none;
        padding: 40px 58px 69px 19px;
        max-width: 881px;
        box-sizing: border-box
    }

    #sec1 .txt::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(50% - 50vw);
        bottom: 0;
        right: 0;
        background: url("../img/shared/bg6.jpg");
        z-index: -1
    }

    #sec2 {
        padding: 30px 0 100px;
        position: relative;
        z-index: 1
    }

    #sec2 .wrap {
        max-width: 1200px;
        padding-bottom: 450px
    }

    #sec2 .ttl {
        position: relative;
        z-index: 3;
        text-align: right;
        margin-right: -40px
    }

    #sec2 .photo-wrap {
        position: absolute;
        top: 63px;
        left: 0;
        z-index: 1;
        margin: 0;
        width: 100%
    }

    #sec2 .photo-wrap::before {
        top: 267px;
        right: calc(50% - 50vw + 50px)
    }

    #sec2 .photo-wrap::after {
        right: calc(50% - 50vw);
        width: 620px;
        height: 942px
    }

    #sec2 .photo1 {
        margin: 0;
        position: relative;
        left: -273px
    }

    #sec2 .img-gr {
        margin-top: 0;
        z-index: 3;
        position: absolute;
        bottom: 0;
        right: -102px;
        display: inline-block
    }

    #sec2 .img-gr::before {
        content: "";
        position: absolute;
        top: -30px;
        right: -30px;
        bottom: -30px;
        left: -30px;
        z-index: -1;
        background: url("../img/shared/bg_bd.jpg") repeat center top
    }

    #sec2 .photo2 {
        position: relative
    }

    #sec2 .ttl2 {
        top: 22px;
        left: 26px;
        width: auto
    }

    #sec2 .gr {
        padding: 50px 0 0 calc(50% + 133px);
        color: #fff;
        z-index: 3;
        position: relative
    }

    #sec2 .ttl3 {
        font-size: 30px;
        font-weight: 600;
        padding-left: 10px
    }

    #sec2 .ttl3>span {
        min-width: 210px;
        border-bottom: 1px solid currentColor;
        display: inline-block;
        text-align: left;
        position: relative;
        padding-bottom: 4px
    }

    #sec2 .ttl3 .mid {
        left: 77px;
        margin-top: 22px
    }

    #sec2 .ttl3 .bottom {
        margin-top: 21px;
        left: 31px
    }

    #sec2 .price {
        font-size: 40px;
        margin-top: 39px
    }

    #sec2 .price small {
        font-size: 30px
    }

    #sec2 .txt {
        margin-top: 0;
        max-width: 430px
    }

    #sec3 {
        margin-top: -330px
    }

    #sec3 .set1 {
        padding: 0 0 120px
    }

    #sec3 .set1 .wrap {
        max-width: 1074px
    }

    #sec3 .set1::before {
        top: 384px;
        right: 0;
        bottom: 0;
        left: 0
    }

    #sec3 .set1::after {
        bottom: -100px;
        left: 0;
        width: 541px;
        height: 323px
    }

    #sec3 .set1 .ttl {
        position: relative;
        top: 0;
        left: 56px;
        width: auto;
        z-index: 3
    }

    #sec3 .set1 .photo1 {
        padding-top: 0;
        width: auto;
        margin: 0;
        position: absolute;
        top: 212px;
        left: 164px
    }

    #sec3 .set1 .gr {
        margin: -126px 0 0 calc(50% + 192px);
        position: relative;
        z-index: 2
    }

    #sec3 .set1 .price {
        font-size: 40px;
        margin-top: 0
    }

    #sec3 .set1 .price small {
        font-size: 30px
    }

    #sec3 .set1 .txt {
        margin-top: 10px
    }

    #sec3 .set2 {
        padding: 114px 0 80px
    }

    #sec3 .set2 .ttl2 {
        text-align: center;
        white-space: nowrap;
        font-size: 50px;
        font-weight: bold;
        padding: 10px 0 24px;
        letter-spacing: -0.04em
    }

    #sec3 .set2 .ttl2 small {
        font-size: 40px
    }

    #sec3 .set2 .btn-shared {
        margin-top: 40px
    }

    #sec4 {
        padding: 0 0 98px
    }

    #sec4::before {
        background: url("../img/lunch/sec4_deco.png") no-repeat center bottom/100%;
        width: 568px;
        height: 399px
    }

    #sec4 img {
        max-width: 100%;
        height: auto
    }

    #sec4 .wrap {
        display: flex;
        max-width: 1300px;
        align-items: center
    }

    #sec4 .photo {
        width: 50%
    }

    #sec4 .gr {
        margin-top: 0;
        padding: 0 0 0 57px;
        box-sizing: border-box;
        width: 50%
    }

    #sec4 .ttl {
        width: auto
    }

    #sec4 .btn-shared {
        margin-top: 41px;
        text-align: left
    }

    #sec5 {
        padding: 100px 20px 82px;
        position: relative;
        z-index: 1
    }

    #sec5::after {
        height: 1000px
    }

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

    #sec5 .txt-deco1 {
        left: calc(50% - 629px);
        width: auto;
        position: absolute;
        top: -19px
    }

    #sec5 .txt-deco2 {
        top: -19px;
        right: calc(50% - 574px);
        width: auto
    }

    #sec5 .ttl {
        margin-top: 0;
        text-align: center
    }

    #sec5 .txt {
        margin-top: 20px;
        text-align: center
    }

    #sec5 .list {
        margin-top: 41px;
        flex-direction: row;
        gap: 30px
    }

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

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

@media(min-width: 768px)and (max-width: 1500px) {
    #sec4::before {
        width: 350px
    }
}

@media(min-width: 768px)and (max-width: 1300px) {
    #sec5 .txt-deco1 {
        left: 0;
        width: 160px
    }

    #sec5 .txt-deco1 img {
        max-width: 100%;
        height: auto
    }

    #sec5 .txt-deco2 {
        width: 140px;
        right: 0
    }

    #sec5 .txt-deco2 img {
        max-width: 100%;
        height: auto
    }

    #sec5 .ttl {
        padding: 0 170px
    }

    #sec5 .ttl img {
        max-width: 100%;
        height: auto
    }
}

@media(min-width: 768px)and (max-width: 1200px) {
    #sec4 .gr {
        padding-left: 30px
    }

    #sec3 .set1 .ttl {
        left: 10px
    }

    #sec3 .set1 .photo1 {
        left: 130px
    }

    #sec3 .set1 .gr {
        margin-left: 630px;
        margin-right: 20px
    }

    #sec3 .set1 .photo1 {
        width: 550px
    }

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

    #sec2 .gr {
        padding-left: calc(50% + 83px);
        padding-right: 20px
    }

    #sec2 .photo1 {
        width: 950px
    }

    #sec2 .photo1 img {
        max-width: 100%;
        height: auto
    }

    #sec2 .photo-wrap::after {
        width: 450px
    }

    #sec1 .ttl {
        width: 300px;
        padding-right: 20px;
        margin-left: auto
    }

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

    #sec1 .txt {
        margin-right: 300px
    }
}

.sec2-p{
    text-align: center;
    margin-top:-20px;

}