:root {
    --c-menu-padding: 16px;
}

.c-menu__container {
    position: fixed;
    top: var(--header-hight-pc);
    left: 0;
    z-index: var(--z-index-menu-container-pc);
    width: var(--left-menu-width);
    height: calc(100% - var(--header-hight-pc));
    transition: left 0.2s ease;

    @media (max-width: 960px) {
        top: 0;
        left: calc(-1 * var(--left-menu-width));
        z-index: var(--z-index-menu-container-sp);
        height: 100%;

        &.visible {
            left: 0;

            .c-menu__overlay {
                display: block;
            }

            .c-menu__content{
                box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
            }
        }
    }
}

.c-menu__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-index-menu-overlay);
    display: none;
    background-color: #212121;
    opacity: 0.5;
}

.c-menu__content{
    position: relative;
    z-index: var(--z-index-menu-content-pc);
    width: calc(100% - 2 * var(--c-menu-padding));
    height: calc(100% - 2 * var(--c-menu-padding));
    padding: var(--c-menu-padding);
    background-color: #ffffff;
    transition: var(--base-transition);

    @media (max-width: 960px) {
        z-index: var(--z-index-menu-content-sp);
    }
}

.c-menu__item-list {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.c-menu__item-group {
    padding: 8px;
}

.c-menu__item-group-label {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 8px;
    font-size: .75rem;
    color: #00000099;
}

.c-menu__item-link {
    display: flex;
    height: 40px;
    padding: 0 32px;
    margin-bottom: 4px;
    border-radius: 32px;

    &:hover {
        background-color: #f6f6f6;
    }

    &.active {
        background-color: #e4e4e4;
    }
}

.c-menu__item-label {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: .8125rem;
}

.c-menu__border {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: var(--border-color);
}