@charset "UTF-8";

.bl_drawerMenu {
    cursor: pointer;
    height: 1.6rem;
    margin-left: auto;
    position: relative;
    width: 2.8rem;
    z-index: 10000;

    @media screen and (min-width: 768px) {
        display: none;
    }

    &:hover {
        opacity: 0.5;
        transition: 0.3s;
    }

    .bl_drawerMenu_line {
        background-color: rgba(var(--recruit-color-text1-rgb), 0.9);
        height: 2px;
        pointer-events: none;
        position: absolute;
        transform: translate(0, 0);
        transition: transform 0.3s;
        width: 100%;

        &.bl_drawerMenu_line__top {
            top: clamp(0rem, 0rem, 0rem);
        }

        &.bl_drawerMenu_line__center {
            top: clamp(0.65rem, 0.8rem, 0.85rem);
        }

        &.bl_drawerMenu_line__bottom {
            top: clamp(1.3rem, 1.6rem, 1.7rem);
        }
    }

    &.active {

        .bl_drawerMenu_line__top,
        .bl_drawerMenu_line__bottom {
            background-color: var(--recruit-color-base);
            top: clamp(0.6rem, 0.7rem, 0.8rem);
        }

        .bl_drawerMenu_line__top {
            transform: rotate(135deg);
        }

        .bl_drawerMenu_line__center {
            transform: scaleY(0);
        }

        .bl_drawerMenu_line__bottom {
            transform: rotate(-135deg);
        }
    }
}