.mobile-nav .sub-menu {
    display: none !important;
}
.mobile-nav .sub-menu.is-open {
    display: block !important;
}

.sm-item {
    width: 90%;
    margin-left: auto;
}
.ssm-item {
    width: 80%;
    margin-left: auto;
}

/* ===================================
   PC画面用CSS（ここから追加）
=================================== */

/* PC画面のみに適用（768px以上） */
@media screen and (min-width: 768px) {
    
    /* メインナビゲーション */
    #main {
        background-color: #f5dfc4;
        padding: 0;
        position: relative;
        z-index: 1000;
    }

    #main .menu {
        list-style: none;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    #main .menu > li {
        position: relative;
        margin: 0;
        padding: 0;
    }

    #main .menu > li > a {
        display: block;
        padding: 0 calc(25/1440*100vw);
        color: #333;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s;
        white-space: nowrap;
    }

    #main .menu > li > a:hover {
        background-color: #8b7355;
        color: #fff;
    }

    /* サブメニュー（ドロップダウン） */
    #main .menu li ul.sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        list-style: none;
        margin: 0;
        padding: 0;
        z-index: 9999;
        flex-direction: column;
        height: auto;
        width: 100px;
    }

    #main .menu li ul.sub-menu li {
        display: flex;
        width: 10%;
        border-bottom: 1px solid #eee;
        margin: 0;
    }

    #main .menu li ul.sub-menu li:last-child {
        border-bottom: none;
    }

    #main .menu li ul.sub-menu li a {
        display: block;
        padding: 12px 20px;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.3s;
    }

    #main .menu li ul.sub-menu li a:hover {
        background-color: #f5f5f5;
        color: #8b7355;
    }

    /* ホバー時にサブメニューを表示 */
    #main .menu li:hover > ul.sub-menu {
        display: flex;
    }

    /* グルメメニューが選択されている場合の背景色 */
    #main .menu > li.current-menu-item > a,
    #main .menu > li.current-menu-ancestor > a {
        background-color: #8b7355;
        color: #fff;
    }

    /* サブメニューの三角マーク（オプション） */
    #main .menu > li.menu-item-has-children > a::after {
        content: " ▼";
        font-size: 10px;
        margin-left: 5px;
    }

    nav#main ul {
        overflow: visible !important;
        
    }
}