#lead {
    padding: 15vw 0
}

#lead .group {
    position: relative
}

#lead .group .bg {
    height: 100vw
}

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

#lead .group h2 {
    position: absolute;
    bottom: -23vw;
    right: 4%;
    z-index: 1;
    font-size: 6.67vw;
    line-height: 2.3333333333;
    letter-spacing: .3em;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, .13)
}

#lead .txt {
    margin-top: 30vw;
}

@media screen and (min-width: 768px) {
    #lead {
        padding: 163px 0 229px
    }

    #lead .wrap {
        max-width: 1340px;
        padding: 0 20px
    }

    #lead .group .bg {
        height: 800px
    }

    #lead .group h2 {
        bottom: -98px;
        right: 104px;
        font-size: 30px
    }

    #lead .txt {
        max-width: 988px;
        margin: 121px auto 0;
        letter-spacing: .16em
    }

    #lead .txt p {
        width: 790px
    }
}

#course .set1 {
    position: relative
}

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

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

#course .set1 h2 {
    padding: 30vw 0;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, .5)
}

#course .set1 h2 span {
    display: block;
    text-align: center;
    line-height: 1;
    letter-spacing: .3em
}

#course .set1 h2 span.jp {
    font-size: 6.67vw
}

#course .set1 h2 span.en {
    color: #e2dbc9;
    margin-top: 5vw;
    font-size: 3.2vw
}

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

#course .set2 .slick-slide {
    margin: 0 6.13vw
}
#course .set2 .slick-dots {
    position: absolute;
    bottom: 3vw;
    right: calc(50% - 36px);
    /* left: 5vw; */
}

#course .set2 .box {
    background: url("../img/shared/bg1.jpg") repeat center;
    padding: 10vw 4vw;
    min-height: 90vw;
    text-align: center;
    min-height: 56vh;
}

#course .set2 .box h3 {
    font-size: 6vw;
    line-height: 2;
    letter-spacing: .3em
}

#course .set2 .box .dot {
    margin: 5vw auto 7vw;
    background: #cbc9bd;
    border-radius: 50%;
    width: 8px;
    height: 8px
}

#course .set2 .box .name-price {
    color: #e5c599;
    line-height: 1.5
}

#course .set2 .box .name-price dt {
    font-size: 6.67vw
}

#course .set2 .box .name-price dt small {
    font-size: 4.8vw
}

#course .set2 .box .name-price dd {
    margin-top: 2vw;
    font-size: 5.33vw
}

#course .set3 {
    margin-top: 13vw
}

#course .set3 .box {
    border: 1px solid #cbc9bd;
    padding: 10vw 0
}

#course .set3 .box h3 {
    text-align: center;
    line-height: 2.3333333333;
    font-size: 4.67vw;
    letter-spacing: .3em
}

#course .set3 .box h3 small {
    font-size: 3.33vw;
    letter-spacing: .3em
}

#course .set3 .note {
    margin-top: 8vw
}

#course .set3 .note li {
    display: flex
}

#course .set3 .row {
    margin-top: 10vw
}

#course .set3 .row .box-img {
    display: flex;
    flex-direction: column
}

#course .set3 .row .box-img dd {
    order: 1
}

#course .set3 .row .box-img dt {
    order: 2;
    margin: 7vw auto 0;
    font-size: 6.67vw;
    line-height: 1;
    letter-spacing: .3em
}

#course .set3 .row .box-img:nth-child(1) dd {
    position: relative
}

#course .set3 .row .box-img:nth-child(1) dd::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg1.jpg") repeat center;
    width: 51vw;
    height: 48vw;
    bottom: -10vw;
    left: -20vw;
    z-index: -1
}

#course .set3 .row .box-img:nth-child(2) {
    margin-top: 10vw
}

#course .set3 .txt {
    margin-top: 5vw
}

#course .set4 {
    margin-top: 13vw
}

#course .set4 .wrap {
    padding: 0
}

#course .set4 .row {
    display: flex;
    align-items: center
}

#course .set4 .row .bg {
    flex: 1;
    height: 70vw
}

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

#course .set4 .row h3 {
    margin: 0 9vw;
    font-size: 6.67vw;
    line-height: 1;
    letter-spacing: .3em
}

#course .set4 .txt {
    margin: 7vw 6.13% 0
}

#course .set5 {
    margin-top: 13vw
}

#course .set5 .group-txt {
    margin-top: 6vw
}

#course .set5 .group-txt h3 {
    text-align: center;
    font-size: 6.67vw;
    line-height: 1.5;
    letter-spacing: .3em
}

#course .set5 .group-txt .txt {
    margin-top: 5vw
}

#course .set6 {
    margin-top: 20vw
}

#course .set6 .box-img {
    display: flex;
    align-items: center
}

#course .set6 .box-img dt {
    order: 2;
    margin: 0 4vw 0 9vw;
    font-size: 6.67vw;
    line-height: 1;
    letter-spacing: .3em
}

#course .set6 .box-img dd {
    position: relative;
    order: 1
}

#course .set6 .box-img dd::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg1.jpg") repeat center;
    top: -10vw;
    bottom: -10vw;
    left: -10vw;
    width: 30vw
}

#course .set7 {
    margin-top: 20vw
}

#course .set7 .photo {
    position: relative
}

#course .set7 .photo::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg1.jpg") repeat center;
    bottom: -8vw;
    right: -10vw;
    top: 8vw;
    width: 50vw;
    z-index: -1
}

#course .set7 h3 {
    text-align: center;
    margin-top: 17vw;
    font-size: 6.67vw;
    line-height: 1;
    letter-spacing: .3em
}

#course .set7 .txt {
    margin-top: 8vw
}

#course .set7 .btn-popup {
    margin-top: 8vw
}

@media screen and (min-width: 768px) {
    #course .set1 h2 {
        padding: 334px 0 294px
    }

    #course .set1 h2 span.jp {
        font-size: 30px
    }

    #course .set1 h2 span.en {
        margin-top: 28px;
        font-size: 14px
    }

    #course .set2 {
        display: flex;
        justify-content: space-between;
        max-width: 1340px;
        padding: 0 30px;
        margin: 74px auto 0;
        flex-wrap: wrap;
    }

    #course .set2 .box {
        width: 31.25%;
        padding: 60px 0 0px 0px;
        min-height: 470px;
        margin-bottom: 30px;
    }

    #course .set2 .box h3 {
        font-size: 25px
    }

    #course .set2 .box .dot {
        margin: 30px auto 30px;
    }

    #course .set2 .box .name-price {
        line-height: 38px;
    }

    #course .set2 .box .name-price dt {
        font-size: 30px
    }

    #course .set2 .box .name-price dt small {
        font-size: 16px
    }

    #course .set2 .box .name-price dd {
        margin-top: 4px;
        font-size: 20px
    }

    #course .set2 .box:last-child .name-price dd {
        margin-top: 18px
    }

    #course .set3 {
        margin-top: 159px
    }

    #course .set3 .wrap {
        max-width: 1260px;
        padding: 0 30px
    }

    #course .set3 .box {
        width: 770px;
        margin: 0 auto;
        padding: 63px 0 65px
    }

    #course .set3 .box h3 {
        font-size: 30px
    }

    #course .set3 .box h3 small {
        font-size: 20px
    }

    #course .set3 .note {
        margin-top: 46px
    }

    #course .set3 .note li {
        justify-content: center
    }

    #course .set3 .row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        -moz-column-gap: 30px;
        column-gap: 30px;
        margin-top: 114px
    }

    #course .set3 .row .box-img {
        flex-direction: row;
        align-items: center;
        -moz-column-gap: 50px;
        column-gap: 50px
    }

    #course .set3 .row .box-img dt {
        margin: 0 0 0;
        font-size: 30px
    }

    #course .set3 .row .box-img dd {
        flex: 1
    }

    #course .set3 .row .box-img:nth-child(1) {
        margin: 0 0 0 60px
    }

    #course .set3 .row .box-img:nth-child(1) dd {
        height: 320px
    }

    #course .set3 .row .box-img:nth-child(1) dd::before {
        width: 385px;
        height: 255px;
        bottom: -65px;
        left: -83px
    }

    #course .set3 .row .box-img:nth-child(2) {
        margin: 181px -38px 0 0
    }

    #course .set3 .row .box-img:nth-child(2) dt {
        order: 1
    }

    #course .set3 .row .box-img:nth-child(2) dd {
        order: 2;
        height: 340px
    }

    #course .set3 .txt {
        width: 595px;
        margin: 56px 0 0 auto;
        letter-spacing: .19em
    }

    #course .set4 {
        margin-top: 151px
    }

    #course .set4 .wrap {
        max-width: 1226px
    }

    #course .set4 .row .bg {
        height: 620px
    }

    #course .set4 .row h3 {
        margin: 35px 94px 0 69px;
        font-size: 30px
    }

    #course .set4 .txt {
        margin: 56px 0 0 82px;
        letter-spacing: .19em
    }

    #course .set5 {
        margin-top: 139px
    }

    #course .set5 .wrap {
        max-width: 1200px
    }

    #course .set5 .bg {
        margin: 0 0 0 auto;
        max-width: 953px;
        height: 621px
    }

    #course .set5 .group-txt {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 66px 109px 0 0
    }

    #course .set5 .group-txt h3 {
        text-align: left;
        margin-right: 56px;
        font-size: 30px
    }

    #course .set5 .group-txt .txt {
        flex: 1;
        max-width: 630px;
        margin-top: 0
    }

    #course .set6 {
        margin-top: 229px
    }

    #course .set6 .box-img {
        -moz-column-gap: 50px;
        column-gap: 50px;
        margin-left: 91px
    }

    #course .set6 .box-img dt {
        margin: 0;
        font-size: 30px
    }

    #course .set6 .box-img dd::before {
        top: -107px;
        bottom: -107px;
        left: -185px;
        width: 397px
    }

    #course .set7 {
        margin-top: 129px
    }

    #course .set7 .wrap {
        display: flex;
        flex-direction: column
    }

    #course .set7 .photo {
        position: absolute;
        top: 0;
        right: -10px
    }

    #course .set7 .photo::before {
        bottom: -125px;
        right: -180px;
        top: 42px;
        width: 377px
    }

    #course .set7 h3 {
        order: 2;
        text-align: center;
        margin: 139px 140px 0 0;
        font-size: 30px;
        letter-spacing: .19em
    }

    #course .set7 .txt {
        box-sizing: content-box;
        order: 1;
        width: 450px;
        margin-top: 0;
        padding: 73px 0 0 40px;
        letter-spacing: .19em
    }

    #course .set7 .btn-popup {
        order: 3;
        margin: 173px auto 0
    }
}

#drink {
    position: relative
}

#drink::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg1.jpg") repeat center;
    top: 76vw;
    left: 0;
    width: 50%;
    height: 60vw;
    z-index: -1
}

#drink .set1 .bg {
    margin-right: -30vw;
    height: 86vw
}

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

#drink .set1 .group-txt {
    margin-top: 10vw
}

#drink .set1 .group-txt h2 span {
    display: block;
    text-align: center;
    letter-spacing: .3em
}

#drink .set1 .group-txt h2 span.jp {
    font-size: 6.67vw;
    line-height: 2.3333333333
}

#drink .set1 .group-txt h2 span.en {
    color: #cbc9bd;
    font-size: 3.2vw;
    line-height: 1
}

#drink .set1 .group-txt .txt {
    margin: 9vw 6.13% 0
}

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

#drink .set2 h3 {
    padding-top: 2vw;
    font-size: 6.13vw;
    line-height: 1.5;
    letter-spacing: .3em
}

#drink .set2 .drink-js {
    position: absolute;
    top: 0;
    left: 19%;
    right: 6.13%
}

#drink .set2 .drink-js .slick-dots {
    position: absolute;
    bottom: 3vw;
    right: 3vw;
    z-index: 1
}

#drink .set2 .drink-js .item {
    height: 75vw;
    margin: 0 9vw;
}

#drink .set2 .drink-js .item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#drink .set2 .txt {
    margin-top: 10vw
}

    #drink .set2 .col{
        display: flex;
        margin-top: 10vw;
    }
    #drink .set2 .col .item2 {
    /* height: 75vw; */
    margin: 0vw 3vw 0 0;
}
#drink .set2 .item2 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}
#drink .set2 .btn-popup {
    margin-top: 10vw
}

@media screen and (min-width: 768px) {
    #drink {
        margin-top: 150px
    }

    #drink::before {
        top: -150px;
        width: calc(50% + 302px);
        height: 418px
    }

    #drink .set1 {
        position: relative;
        margin-left: 50px
    }

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

    #drink .set1 .bg img {
        -o-object-position: center;
        object-position: center
    }

    #drink .set1 .group-txt {
        width: 413px;
        padding: 150px 0;
        margin: 0 80px 0 auto;
        text-shadow: 0 0 10px #000
    }

    #drink .set1 .group-txt h2 span {
        text-align: left
    }

    #drink .set1 .group-txt h2 span.jp {
        font-size: 30px
    }

    #drink .set1 .group-txt h2 span.en {
        margin-top: 8px;
        font-size: 16px
    }

    #drink .set1 .group-txt .txt {
        margin: 56px 0 0
    }

    #drink .set2 {
        margin-top: 83px
    }

    #drink .set2 h3 {
        word-break: keep-all;
        padding: 162px 0 0 21px;
        font-size: 30px
    }

    #drink .set2 .drink-js {
        position: absolute;
        top: 0;
        left: 148px;
        right: 22px
    }

    #drink .set2 .drink-js .slick-dots {
        bottom: 20px;
        right: 20px
    }

    #drink .set2 .drink-js .item {
        height: 580px;
        margin: 0;
    }

        #drink .set2 .item2 {
       
        top: 0;
        right: 148px;
        left: 22px;
    }


    #drink .set2 .txt {
        width: 698px;
        margin: 106px 0 0 148px;
        letter-spacing: .19em
    }
    #drink .set2 .txt2 {
        width: 698px;
        margin: 30px 0 0 148px;
        letter-spacing: .19em
    }

    #drink .set2 .btn-popup {
        margin: 118px auto 0
    }
}

#alacarte {
    position: relative;
    padding: 20vw 0
}

#alacarte::before {
    content: "";
    position: absolute;
    background: url("../img/shared/bg1.jpg") repeat center;
    top: 10vw;
    left: 0;
    width: 50%;
    height: 91vw;
    z-index: -1
}

#alacarte .set1 h2 {
    margin-top: 5vw
}

#alacarte .set1 h2 span {
    display: block
}

#alacarte .set1 h2 span.jp {
    font-size: 6vw;
    line-height: 2.3333333333;
    letter-spacing: .15em
}

#alacarte .set1 h2 span.en {
    color: #cbc9bd;
    margin-top: 2vw;
    font-size: 3.2vw;
    line-height: 1;
    letter-spacing: .3em
}

#alacarte .set2 {
    margin-top: 7vw
}

#alacarte .set2 .group-photo li:nth-child(1) {
    margin: 10vw 20% 0 0
}

#alacarte .set2 .group-photo li:nth-child(2) {
    margin: 10vw 0 0 20%
}

#alacarte .set2 .btn-popup {
    margin-top: 10vw
}

@media screen and (min-width: 768px) {
    #alacarte {
        padding: 270px 0 150px
    }

    #alacarte::before {
        top: 145px;
        left: 0;
        width: calc(50% - 35px);
        height: 1019px
    }

    #alacarte .set1 .wrap {
        max-width: 1240px;
        padding: 0 20px
    }

    #alacarte .set1 h2 {
        position: relative;
        z-index: 1;
        margin-top: 0;
        padding-top: 436px
    }

    #alacarte .set1 h2 span {
        display: block
    }

    #alacarte .set1 h2 span.jp {
        font-size: 30px
    }

    #alacarte .set1 h2 span.en {
        margin-top: 9px;
        font-size: 16px
    }

    #alacarte .set1 .photo {
        height: 650px;
        top: 0;
        left: 330px;
        right: -30px
    }

    #alacarte .set2 {
        margin-top: 184px
    }

    #alacarte .set2 .txt {
        width: 448px;
        margin: 0 56px 0 auto;
        letter-spacing: .19em
    }

    #alacarte .set2 .group-photo li:nth-child(1) {
        position: absolute;
        top: 11px;
        left: -200px;
        margin: 0
    }

    #alacarte .set2 .group-photo li:nth-child(2) {
        margin: 110px 20px 0 0;
        text-align: right
    }

    #alacarte .set2 .btn-popup {
        margin: 100px auto 0
    }
}