:root {
--OutBackColorTop: #ffd4e7;
--OutBackColorDown: #fffeeb;
--menuBackColor1: #ffced8;
--menuBackColor2: #ffdde6;
--menuDesPriColor: #593a34;
--menuNameColor: #f7477B;
--menuTopLabelColor: #fd98b2;
--menuLabelColor: #fd98b2;
--menuLabelShadowColor: #fefbfc;
--menuInnerFrameColor: #f9b6bf;
--menuOutFrameColor: #f4b4bc;
--menuItemBorderColor: #fd80bf;
}

body {
    background: linear-gradient(var(--OutBackColorTop), var(--OutBackColorDown));
}

.NenuTopLabel{
    color: var(--menuTopLabelColor);
    text-shadow:
        -2px -2px 0 var(--menuLabelShadowColor), 2px -2px 0 var(--menuLabelShadowColor),
        -2px 2px 0 var(--menuLabelShadowColor), 2px 2px 0 var(--menuLabelShadowColor)
}


.menu {
        background: linear-gradient(
            var(--menuBackColor1) 0%, 
            var(--menuBackColor1) 50%, 
            var(--menuBackColor2) 100%);
}



/* スイーツメニュー */
.Sweets {
    border: 1px solid var(--menuInnerFrameColor);
}

.Sweets::after{
    border: 2px solid var(--menuOutFrameColor);
}

.SweetsItem {
    border-color: var(--menuItemBorderColor);
}

.SweetsItem .SweetsName {
    color: var(--menuNameColor);;
}

.SweetsItem .SweetsDescription {
    color: var(--menuDesPriColor);
}

.SweetsItem .SweetsPrice {
    color: var(--menuDesPriColor);
}

.SweetsLabel {
    color: var(--menuLabelColor);
    text-shadow:
        -2px -2px 0 var(--menuLabelShadowColor), 2px -2px 0 var(--menuLabelShadowColor),
        -2px 2px 0 var(--menuLabelShadowColor), 2px 2px 0 var(--menuLabelShadowColor)
}


/* ドリンクメニュー */
.Drinks {
    border: 1px solid var(--menuInnerFrameColor);
}

.Drinks::after{
    border: 2px solid var(--menuOutFrameColor);
}

.DrinksItem {
    border-color: var(--menuItemBorderColor);
}

.DrinksItem .DrinksName {
    color: var(--menuNameColor);;
}

.DrinksItem .DrinksDescription {
    color: var(--menuDesPriColor);
}

.DrinksItem .DrinksPrice {
    color: var(--menuDesPriColor);
}

.DrinksLabel {
    color: var(--menuLabelColor);
    text-shadow:
        -2px -2px 0 var(--menuLabelShadowColor), 2px -2px 0 var(--menuLabelShadowColor),
        -2px 2px 0 var(--menuLabelShadowColor), 2px 2px 0 var(--menuLabelShadowColor)
}


/* フードメニュー */
.Foods {
    border: 1px solid var(--menuInnerFrameColor);
}

.Foods::after{
    border: 2px solid var(--menuOutFrameColor);
}

.FoodsItem {
    border-color: var(--menuItemBorderColor);
}

.FoodsItem .FoodsName {
    color: var(--menuNameColor);;
}

.FoodsItem .FoodsDescription {
    color: var(--menuDesPriColor);
}

.FoodsItem .FoodsPrice {
    color: var(--menuDesPriColor);
}

.FoodsLabel {
    color: var(--menuLabelColor);
    text-shadow:
        -2px -2px 0 var(--menuLabelShadowColor), 2px -2px 0 var(--menuLabelShadowColor),
        -2px 2px 0 var(--menuLabelShadowColor), 2px 2px 0 var(--menuLabelShadowColor)
}

/* グッズメニュー */
.Goods {
    border: 1px solid var(--menuInnerFrameColor);
}

.Goods::after{
    border: 2px solid var(--menuOutFrameColor);
}

.GoodsItem {
    border-color: var(--menuItemBorderColor);
}

.GoodsItem .GoodsName {
    color: var(--menuNameColor);;
}

.GoodsItem .GoodsDescription {
    color: var(--menuDesPriColor);
}

.GoodsItem .GoodsPrice {
    color: var(--menuDesPriColor);
}

.GoodsLabel {
    color: var(--menuLabelColor);
    text-shadow:
        -2px -2px 0 var(--menuLabelShadowColor), 2px -2px 0 var(--menuLabelShadowColor),
        -2px 2px 0 var(--menuLabelShadowColor), 2px 2px 0 var(--menuLabelShadowColor)
}