.BodyContainer {
    display: grid;
    grid-template-rows: auto 1fr;
}

.BodyContainer--appShell {
    display: grid;
    grid-template-rows: auto 1fr;
}

.BodyContainer--documentFlow {
    display: block;
}

.BodyContainer--fullWidth {
    display: block;
}

.MainContainer {
    display: grid;
    gap: 30px;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto;
    overflow: visible;
    
    width: 100%;
    max-width: var(--ContentAreaMaxWidth);
    margin: 0 auto;

    .NavContainer {
        background-color: var(--LightPrimaryColor);
        overflow: visible;
        position: relative;
    }

    .NavContainer::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .NavContainer::before,
    .NavContainer::after {
        content: '';
        position: sticky;
        left: 0;
        right: 0;
        height: 30px;
        display: block;
        pointer-events: none;
        z-index: 2;
    }

    .NavContainer::after {
        height: 50px;
    }

    .NavContainer::before {
        top: 0;
        background: linear-gradient(to bottom, var(--LightPrimaryColor), rgba(0, 0, 0, 0));
    }

    .NavContainer::after {
        bottom: 0;
        background: linear-gradient(to top, var(--LightPrimaryColor), rgba(0, 0, 0, 0));
    }
    
    .MainContentContainer {
        padding: 30px 20px;
        overflow: visible;
    }
}

.MainContainer.MainContainer--appShell {
    height: 100%;
    grid-template-rows: 1fr;
    overflow: hidden;  /* 全体のスクロールを防ぐ */
}

.MainContainer.MainContainer--appShell .NavContainer {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.MainContainer.MainContainer--appShell .MainContentContainer {
    overflow-y: auto;
}

.MainContainer.MainContainer--fullWidth {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0;
    height: auto;
    max-width: 100%;
    overflow: visible;
}

.MainContainer .MainContentContainer.MainContentContainer--fullWidth {
    padding: 0;
    overflow: visible;
}

@media screen and (max-width: 900px) {
    .MainContainer {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 100%;
    }

    .MainContainer .NavContainer {
        display: none;
    }

    .MainContainer .MainContentContainer {
        padding: 20px 16px;
    }

    .MainContainer.MainContainer--appShell {
        height: auto;
        overflow: visible;
    }

    .MainContainer.MainContainer--appShell .NavContainer,
    .MainContainer.MainContainer--appShell .MainContentContainer {
        overflow: visible;
    }
}

@media screen and (max-width: 768px) {
    .MainContainer .MainContentContainer {
        padding: 14px 10px;
    }
}