/*
 * Items Page Styles（メニュー一覧ページレイアウト）
 * グリッド・カード・フィルタは c-item-list.css で定義
 */

.menu-wrapper {
    padding-top: var(--f-space-huge-xxxl);
    padding-bottom: var(--f-space-huge-xxl);
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.menu-header {
    text-align: center;
    margin-bottom: var(--f-space-huge);
    padding: 0 var(--f-space-l);
}

.menu-title {
    font-family: var(--f-font-accent);
    font-size: var(--f-font-size-huge-xxxxl);
    color: var(--f-color-accent);
    letter-spacing: var(--f-letter-spacing-normal);
    margin-bottom: var(--f-space-s);
}

.menu-subtitle {
    font-size: var(--f-font-size-base);
    color: var(--f-color-sub);
    letter-spacing: var(--f-letter-spacing-normal);
    font-family: var(--f-font-serif);
}

/* 罫線ブロックの横幅を index / service と同様に（テンプレでは削除予定） */
.menu-wrapper .food-sample-message {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .menu-wrapper {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        padding-left: 0;
        padding-right: 0;
    }

    .menu-header {
        padding: 0 var(--f-space-m);
        width: 100%;
        box-sizing: border-box;
    }

    /* スマホのみ：罫線ブロックだけ幅90%に（他要素に影響なし・テンプレでは削除予定） */
    .menu-wrapper .food-sample-message {
        width: 90%;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}