.genreSection {
    .title {
        background-color: var(--black);
        width: 100%;
        padding: 12px 24px;
        color: var(--white);
        font-size: var(--fontsize-large);
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .genreSection {

        .title {
        }

        .text {
        }
    }
    
}

section {
    /* padding: 6%; */
}

.grid-col2 {
    column-gap: 40px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .media--body {
        width: 100%;
    }
}

.pairingW2,
.pairingW3,
.pairingR1,
.pairingR2,
.pairingR3,
.pairingS1,
.pairingS2 {
    position: absolute;
    background-color: var(--white);
    padding: 12px;
    height: 64px;
}

.pairingW2--img,
.pairingW3--img,
.pairingR1--img,
.pairingR2--img,
.pairingR3--img,
.pairingS1--img,
.pairingS2--img {
    height: 40px;
}

/* .pairingW2::after,
.pairingW3::after,
.pairingR1::after,
.pairingR2::after,
.pairingR3::after,
.pairingS1::after,
.pairingS2::after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;

    height: 54px;
} */

.genreBox {
    width: 100%;
    display: grid;
    row-gap: 20px;
}

.genre {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    max-width: 480px;
    margin-right: auto;

    .title {
        width: fit-content;
        flex-shrink: 0;
    }

    .subTitle {
        width: fit-content;
        flex-shrink: 0;
    }

    .text {
        width: fit-content;
        flex-shrink: 0;
    }

    .border-inline {
        text-align: center;
    }
    
}

@media screen and (max-width: 599px) {
    /* 599の値pxまでの幅の場合に適応される */
    .genre {
        flex-direction: column;
        max-width: 100%;
        align-items: start;
    
        .title {
            font-size: var(--fontsize-large);
        }

        .subTitle {
            width: 100%;
            font-size: var(--fontsize-xmedium);
            text-align: left;
        }

        .border-inline {
            display: none;
        }
    }
}

.menu-textOnly {
    display: flex;
    align-items: end;
    justify-content: space-between;
    border-bottom: 1px dotted var(--primary-bg-color);
    padding-bottom: 6px;
    line-height: 1.5;
    

    .menu-textOnly--title {
        font-size: var(--fontsize-xmedium);
        font-weight: 400;
        line-height: 1;
    }

    .menu-textOnly--text {
        line-height: 1;
    }

}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .menu-textOnly {
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px dotted var(--primary-bg-color);
        

        .menu-textOnly--title {
            font-size: var(--fontsize-small);
        }

        .menu-textOnly--text {
            font-size: var(--fontsize-small);
        }

    }

}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .grid-col2 {
        column-gap: 32px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .grid-col2 {
        row-gap: 32px;
    }
}

.specialiteSection {

    background-color: var(--secondary-bg-color);

    .header {
        width: 100%;
        display: grid;
        row-gap: 16px;

        .text {
            line-height: 1;
        }
    }

    .media--imgBox {
        width: 540px;
    }

    .media--body {
        row-gap: 0;
    }

    .media--title {
        font-size: var(--fontsize-xmedium);
    }

    .media--foodBox {
        
        position: relative;
        display: grid;
        row-gap: 12px;
        padding: 16px 20px 40px;
        background-color: var(--primary-bland-color);
        color: var(--white);

        .media--title {
            color: var(--white);
        }

        .media--text {
            color: var(--white);
        }
    }

    .media--foodBox::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        color: var(--primary-bland-color);
        background-color: var(--lightgray-bright);
        border-radius: 50%;
        padding: 8px 10px 12px;
        /* width: 60px;
        height: 60px; */
        font-size: 32px;
        font-weight: bold;
        line-height: 1;
        border: 1px dotted var(--lightgray);
        content: "＋";
    }

    .media--drinkBox {
        display: grid;
        row-gap: 12px;
        padding: 40px 20px 16px;
        background-color: var(--white);
        /* background-image: url(/img/bg-recommend-margherita.png); */
        background-repeat: no-repeat;
        background-position: 97% 95%;
        background-size: 160px;
    }

    .media--drinkBox-margherita {
        background-image: url(/img/bg-recommend-margherita.png);
    }

    .media--drinkBox-quattroFormaggi {
        background-image: url(/img/bg-recommend-quatro-formaggi.png);
    }

    .media--drinkBox-lobsterPasta {
        background-size: 40px;
        background-position: 95% 80%;
        background-image: url(/img/bg-recommend-domode-chardonnay.png);
    }

    .media--drinkBox-prosciuttoArugula {
        background-size: 40px;
        background-position: 95% 80%;
        background-image: url(/img/bg-recommend-prosciutto-arugula.png);
    }

    .media--drinkBox-whitebaitPeperoncino {
        background-size: 40px;
        background-position: 95% 80%;
        background-image: url(/img/bg-recommend-whitebait-peperoncino.png);
    }

    .media--drinkBox-a4sirloin {
        background-size: 40px;
        background-position: 95% 80%;
        background-image: url(/img/bg-recommend-a4sirloin.png);
    }

    .media--menuBox {
        display: grid;
        row-gap: 12px;
        padding-bottom: 8px;
    }

}

@media screen and (max-width: 1024px) {

    .specialiteSection {

        .media {
            flex-direction: column;
            row-gap: 0;
        }

        .media--imgBox {
            width: 100%;
        }
    }
}

@media screen and (max-width: 599px) {
    
    .specialiteSection {
        .media--foodBox::after {
            padding: 6px 8px 10px;
            font-size: 24px;
            border: 1px dotted var(--lightgray);
            content: "＋";
        }

        .media--title {
            font-size: var(--fontsize-medium);
        }

        .media--text {
            font-size: var(--fontsize-small);
        }
    }
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .pizzaSection {

        .media {
            flex-direction: column;
        }

        .media--imgBox {
            width: 100%;
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .pizzaSection {

        .media {
            row-gap: 12px;
        }

        .media--body {
            row-gap: 24px;
        }

        .media--title {
            line-height: 1;
        }
    }
}

.antipastSection {
    /* background-color: var(--secondary-bg-color); */
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    
    .antipastSection {
        /* .grid-col3 {
            grid-template-columns: repeat(2, 1fr);
        } */
        
    }
}

.pastaSection {

    background-color: var(--secondary-bg-color);

}

.pizzaSection {

    .media--imgBox {
        width: 540px;
    }

    .media--title {
        font-size: var(--fontsize-xmedium);
    }

    .media--menuBox {
        display: grid;
        row-gap: 12px;
        border-bottom: 1px dotted var(--primary-bg-color);
        padding-bottom: 8px;
    }


}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .pizzaSection {

        .media {
            flex-direction: column;
        }

        .media--imgBox {
            width: 100%;
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .pizzaSection {

        .media {
            row-gap: 12px;
        }

        .media--body {
            row-gap: 24px;
        }

        .media--title {
            line-height: 1;
        }
    }
}

.meatSection {

    background-color: var(--secondary-bg-color);

}


.tapasSection {

}

.fromageSection {

    background-color: var(--secondary-bg-color);

}

.dolceSection {

    .media--imgBox {
        width: 540px;
    }

    .media--title {
        font-size: var(--fontsize-xmedium);
    }

    .media--menuBox {
        display: grid;
        border-bottom: 1px dotted var(--primary-bg-color);
        padding-bottom: 8px;
    }

}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .dolceSection {

        .media {
            flex-direction: column;
        }

        .media--imgBox {
            width: 100%;
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .dolceSection {

        .media {
            row-gap: 12px;
        }

        .media--body {
            row-gap: 24px;
        }

        .media--title {
            font-size: var(--fontsize-medium);
        }
    }
}

.aperitivoSection,
.wineSection {

    .media {
        column-gap: 24px;
    }

    .media--imgBox {
        width: 56px;
    }

    .media--img {
        height: 200px;
    }

    .media--body {
        row-gap: 12px;
    }

    .media--body--header {
        border-bottom: 1px solid var(--darkgray);
        padding-bottom: 4px;
    }

    .media--body--bottom {
        display: grid;
        row-gap: 6px;
    }

    .media--title {
        font-size: var(--fontsize-xmedium);
    }
}

.aperitivoSection {

    background-color: var(--secondary-bg-color);

}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .aperitivoSection {

        .grid-col2 {
            grid-template-columns: repeat(1, 1fr);
        }

        .media {
            flex-direction: row;
            column-gap: 20px;
        }

        .media--subTitle {
            font-size: var(--fontsize-small);
        }

        .media--title {
            font-size: var(--fontsize-medium);
        }

        .media--text {
            font-size: var(--fontsize-small);
        }
    }
}

.wineSection {
    .title {
        /* line-height: 1.5; */
        padding-bottom: 8px;
        border-bottom: 1px dotted var(--gray);
    }

    .text {
        /* border-top: 1px dotted var(--gray); */
    }
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .wineSection {
        .grid-col2 {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .wineSection {

        .subTitle {
            font-size: var(--fontsize-xmedium);
        }

        .grid-col2 {
            grid-template-columns: repeat(1, 1fr);

            .media {
                flex-direction: row;
                column-gap: 20px;
            }

            .media--subTitle {
                font-size: var(--fontsize-small);
            }

            .media--title {
                font-size: var(--fontsize-medium);
            }

            .media--text {
                font-size: var(--fontsize-small);
            }
        }
    }
}

.alcoholSection {

    background-color: var(--secondary-bg-color);

    
    .highballArrange {
        background-color: var(--white);
        /* border: 1px solid var(--white); */
        padding: 16px;
    }

    .otherAlcoholBox,
    .beerBox,
    .highballBox,
    .cocktailBox {
        width: 100%;
        display: grid;
        row-gap: 16px;
    }

    .otherAlcoholMenuList,
    .beerMenuList,
    .highballMenuList,
    .cocktailMenuList {
        width: 100%;
        display: grid;
        column-gap: 24px;
        row-gap: 16px;
    }

    .otherAlcoholMenuList,
    .beerMenuList,
    .highballMenuList {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cocktailMenuList {
        grid-template-columns: repeat(4, 1fr);
    }

    .cocktailMenuItem {
        list-style: none;
        font-size: var(--fontsize-small);
        /* line-height: 1.5; */
    }
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .alcoholSection {

        .highballArrange {
            .text {
                font-size: var(--fontsize-small);
            }
        }

        .cocktailMenuList {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .alcoholSection {

        .otherAlcoholMenuList,
        .beerMenuList,
        .highballMenuList,
        .cocktailMenuList {
            grid-template-columns: repeat(1, 1fr);
        }

        .highballArrange {
            padding: 8px;
        }
    }
}

.nonalcoholSection {

    .yogaBox,
    .specialNonAlcoholBox,
    .softdrinkBox {
        width: 100%;
        display: grid;
        row-gap: 16px;
    }

    .yogaBox {
        width: 100%;
        display: grid;
        row-gap: 24px;
    }

    .yogaBox,
    .specialNonAlcoholBox {

        .media {
            width: 100%;
            column-gap: 24px;
        }

        .media--imgBox {
            width: 56px;
        }

        .media--img {
            height: 200px;
        }

        .media--body {
            row-gap: 12px;
        }

        .media--body--header {
            border-bottom: 1px solid var(--darkgray);
            padding-bottom: 4px;
        }

        .media--body--bottom {
            display: grid;
            row-gap: 6px;
        }

        .media--title {
            font-size: var(--fontsize-xmedium);
        }

        .media--imgBox {
            width: 96px;
        }
    }

    .yogaMenu,
    .specialNonAlcoholMenu,
    .softdrinkMenuList {
        width: 100%;
        display: grid;
        column-gap: 24px;
        row-gap: 16px;
    }

    .yogaMenu {
        width: 100%;
        display: grid;
        column-gap: 40px;
        row-gap: 24px;
    }
    
    .yogaMenu,
    .specialNonAlcoholMenu {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .softdrinkMenuList {
        grid-template-columns: repeat(4, 1fr);
    }

    .softdrinkMenuItem {
        list-style: none;
        font-size: var(--fontsize-small);
        /* line-height: 1.5; */
    }

}

@media screen and (max-width: 599px) {
    .nonalcoholSection {

        .media {
            flex-direction: row;
        }

        .softdrinkMenuList {
            grid-template-columns: repeat(2, 1fr);
        }

        .softdrinkMenuItem {
            font-size: var(--fontsize-small);
        }

        .specialNonAlcoholMenu,
        .yogaMenu {
            grid-template-columns: repeat(1, 1fr);
            /* row-gap: 40px; */

            .media--imgBox {
                width: 72px;
            }
        }
    }
}

.caffeSection {

    background-color: var(--secondary-bg-color);

    .titleBox {
        width: 100%;
        display: grid;
        row-gap: 8px;
    }

    .coldDrinkBox,
    .hotDrinkBox {
        width: 100%;
        display: grid;
        row-gap: 16px;
    }

    .coldDrinkMenu,
    .hotDrinkMenu {
        width: 100%;
        display: grid;
        column-gap: 40px;
        row-gap: 16px;
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width: 599px) {

    .caffeSection {
        .hotDrinkMenu,
        .coldDrinkMenu {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}

.allYouCanDrinkSection {
    
    .img {
        width: auto;
        height: 560px;
    }
}

@media screen and (max-width: 599px) {
    
    .allYouCanDrinkSection {

        .inner-medium {
            row-gap: 24px;
        }

        .img {
            width: 100%;
            height: auto;
        }
    }
}