.container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    /* 上部は固定ヘッダー(56px) + 余白、左右下は流動的。拡大設定対策で左右を最小限に */
    padding: 56px clamp(6px, 2vw, 12px) clamp(10px, 2vw, 16px);
    box-sizing: border-box;
}



.content-wrapper {
    margin-top: 0;
    padding-top: 8px;
    /* デフォルト: 1カラム（スマホ〜iPad mini 縦） */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* レスポンシブ対応 */

/* スライドメニューのコンテンツ位置を調整 */
.slide-menu-content {
    padding-top: 76px;
    /* ヘッダー高さ(56px) + 余白(20px) */
}

/* メニューセクションの上部マージンを調整 */
.menu-section {
    margin-top: 16px;
}

/* 最初のセクションの上部マージンをゼロ */
.menu-section:first-child {
    margin-top: 0;
}

/* メインコンテンツの margin-top はゼロ */
main {
    margin-top: 0;
}

/* セクションヘッダーの上部マージン */
.section-header {
    margin-top: 0;
}

/* iPad 11インチ縦（834px）以上: メニュー左・明細右の2カラム */
@media (min-width: 834px) {
    .content-wrapper {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 28px;
        align-items: start;
    }

    /* デスクトップ: ご利用明細は内容の高さのみ（縦に伸びすぎない） */
    .receipt {
        height: auto !important;
        min-height: 0 !important;
    }
}

main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}