@charset "utf-8";

html {
    font-size: 100%;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
}


/* ↓ からメインコーディング */

#menu {
    background-color: #19180E;
    color: #FDD75C;
}
#menu_nav_container , #grid-container {
    font-family: "游明朝体", "Yu Mincho", YuMincho,
    "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝",
    "MS PMincho", serif;
}

#menu_image {
    padding-top: 10vh;
    width: 100%;
}

#menu_nav_container {
    width: 100%;
}

#menu_nav {
    display: flex;
    justify-content: space-around;
    text-align: center;
    border: 1px solid #FDD75C;
    height: clamp(7.813rem, 6.856rem + 4.78vw, 10.938rem);
    /* 125px ～ 175px*/
    margin: 5% 5% 10% 5%;
}

#menu_nav li p {
    color: #FDD75C;
    font-size: clamp(0.5rem, 0.118rem + 1.91vw, 1.75rem);
    /* 8px ～ 28px */
}

.menu_sprite {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    border-right: 1px solid #FDD75C;
    cursor: pointer;
}

#menu_iconAll_1 {
    width: 100%;
    /* 表示する領域の幅 */
    height: 86px;
    /* 表示する領域の高さ */
    background-image: url('../images/menu_iconAll_1.png');
    /* スプライト画像 */
    background-repeat: no-repeat;
    background-position: center top;
    /* デフォルトの背景位置 */
}

#menu_iconAll_1:hover {
    background-position: center bottom;
    /* デフォルトの背景位置 */
}

#menu_iconHam_1 {
    width: 100%;
    /* 表示する領域の幅 */
    height: 86px;
    /* 表示する領域の高さ */
    background-image: url('../images/menu_iconHam_1.png');
    /* スプライト画像 */
    background-repeat: no-repeat;
    background-position: center top;
    /* デフォルトの背景位置 */
}

#menu_iconHam_1:hover {
    background-position: center bottom;
    /* デフォルトの背景位置 */
}

#menu_iconSide_1 {
    width: 100%;
    /* 表示する領域の幅 */
    height: 95px;
    /* 表示する領域の高さ */
    background-image: url('../images/menu_iconSide_1.png');
    /* スプライト画像 */
    background-repeat: no-repeat;
    background-position: center top;
    /* デフォルトの背景位置 */
}

#menu_iconSide_1:hover {
    background-position: center bottom;
    /* デフォルトの背景位置 */
}

#menu_iconDrink_1 {
    width: 100%;
    /* 表示する領域の幅 */
    height: 88px;
    /* 表示する領域の高さ */
    background-image: url('../images/menu_iconDrink_1.png');
    /* スプライト画像 */
    background-repeat: no-repeat;
    background-position: center top;
    /* デフォルトの背景位置 */
}

#menu_iconDrink_1:hover {
    background-position: center bottom;
    /* デフォルトの背景位置 */
}

#menu_iconSet_1 {
    width: 100%;
    /* 表示する領域の幅 */
    height: 86px;
    /* 表示する領域の高さ */
    background-image: url('../images/menu_iconSet_1.png');
    /* スプライト画像 */
    background-repeat: no-repeat;
    background-position: center top;
    /* デフォルトの背景位置 */
}

#menu_iconSet_1:hover {
    background-position: center bottom;
    /* デフォルトの背景位置 */
}

#grid-container {
    margin: 0 12%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 3px;
    gap: 0;
}

.item {
    text-align: center;
}

.item:hover {
    border: 1px solid #fdd75c;
}

.item img {
    width: 100%;
    display: block;
}

.item2,
.item3,
.item4,
.item5,
.item6,
.item7,
.item9,
.item10,
.item11,
.item12,
.item14,
.item15,
.item16,
.item17,
.item18 {
    grid-column: span 2;
    grid-row: span 2;
}

.item2 p,
.item3 p,
.item4 p,
.item5 p,
.item6 p,
.item7 p,
.item9 p,
.item10 p,
.item11 p,
.item12 p,
.item14 p,
.item15 p,
.item16 p,
.item17 p,
.item18 p,
.item19 p,
.item20 p {
    height: 8vh;
    line-height: 8vh;
    font-size: clamp(0.5rem, 0.118rem + 1.91vw, 1.75rem);
    /* 8px ～ 28px */
}

.item1,
.item8,
.item13 {
    grid-column: span 4;
    /* 1列目から2列目をまたぐ */
    grid-row: span 4;
    /* 1行目から2行目をまたぐ */
    font-size: clamp(1.125rem, 0.551rem + 2.87vw, 3rem);
    /* 24px ～ 60px */
}

.item1 p,
.item8 p,
.item13 p {
    line-height: 16vh;
}

.item19,
.item20 {
    grid-column: span 3;
}

.menu_ham {
    background-color: #685D12;
}

.menu_side {
    background-color: #424033;
}

.menu_drink {
    background-color: #1c1a0a;
}

.menu_drink_nonAlcohol {
    background-color: #2b260a;
}

.image_x1 {
    height: clamp(5rem, 1rem + 20vw, 25rem);
    /* 80px　～ 400px */
}

.image_x4 {
    height: clamp(10rem, 2rem + 40vw, 50rem);
    /* 160px ～ 800px */
}

/* ↓ から商品一覧のスマホメディアクエリ */

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

    .item1 p,
    .item8 p,
    .item13 p {
        line-height: 6vh;
    }

    .item2 p,
    .item3 p,
    .item4 p,
    .item5 p,
    .item6 p,
    .item7 p,
    .item9 p,
    .item10 p,
    .item11 p,
    .item12 p,
    .item14 p,
    .item15 p,
    .item16 p,
    .item17 p,
    .item18 p {
        height: 3vh;
        line-height: 3vh;
    }

    .item19 p,
    .item20 p {
        height: 3vh;
        line-height: 3vh;
    }

    /* #menu_nav {
        position: fixed;
        bottom: 0;
        right: 0;
        flex-direction: column;
        z-index: 100;
    } */

    #menu_iconAll_1 {
        width: 100%;
        /* 表示する領域の幅 */
        height: 86px;
        /* 表示する領域の高さ */
        background-image: url('../images/menu-icon-s_03.png');
        /* スプライト画像 */
        background-repeat: no-repeat;
        background-position: center;
        /* デフォルトの背景位置 */
        background-size: 75%;
    }

    #menu_iconAll_1:hover {
        background-position: center;
        /* デフォルトの背景位置 */
    }

    #menu_iconHam_1 {
        width: 100%;
        /* 表示する領域の幅 */
        height: 86px;
        /* 表示する領域の高さ */
        background-image: url('../images/menu-icon-s_14.png');
        /* スプライト画像 */
        background-repeat: no-repeat;
        background-position: center;
        /* デフォルトの背景位置 */
        background-size: 75%;
    }

    #menu_iconHam_1:hover {
        background-position: center;
        /* デフォルトの背景位置 */
    }

    #menu_iconSide_1 {
        width: 100%;
        /* 表示する領域の幅 */
        height: 95px;
        /* 表示する領域の高さ */
        background-image: url('../images/menu-icon-s_06.png');
        /* スプライト画像 */
        background-repeat: no-repeat;
        background-position: center;
        /* デフォルトの背景位置 */
        background-size: 75%;
    }

    #menu_iconSide_1:hover {
        background-position: center;
        /* デフォルトの背景位置 */
    }

    #menu_iconDrink_1 {
        width: 100%;
        /* 表示する領域の幅 */
        height: 88px;
        /* 表示する領域の高さ */
        background-image: url('../images/menu-icon-s_11.png');
        /* スプライト画像 */
        background-repeat: no-repeat;
        background-position: center;
        /* デフォルトの背景位置 */
        background-size: 75%;
    }

    #menu_iconDrink_1:hover {
        background-position: center;
        /* デフォルトの背景位置 */
    }

    #menu_iconSet_1 {
        width: 100%;
        /* 表示する領域の幅 */
        height: 86px;
        /* 表示する領域の高さ */
        background-image: url('../images/menu-icon-s_99.png');
        /* スプライト画像 */
        background-repeat: no-repeat;
        background-position: center;
        /* デフォルトの背景位置 */
        background-size: 75%;
    }

    #menu_iconSet_1:hover {
        background-position: center;
        /* デフォルトの背景位置 */
    }
}