// サブメニューの展開
.c-submenuToggleBtn {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    color: inherit;
    line-height: 2;
    text-align: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: translateY(-50%);
    cursor: pointer;

    &:focus {
        outline-width: 2px;
        outline-style: solid;
    }

    @include tab {
        width: 24px;
        height: 24px;
        line-height: 24px;
        transition: background-color .25s;
    }

    &::before {
        display: block;
        font-size: 12px;
        line-height: 1;
        transform: rotate(0deg);
        transition: transform .25s;

        @extend %arkheIcon;
        @extend .arkhe-icon-chevron-down::before;
    }

    &::after {
        box-shadow: inset 0 0 0 1px currentColor;
        opacity: .15;
        transition: background-color .25s;

        @extend %absLayer;

    }

    @include pc {

        &:hover::after {
            background-color: currentColor;
        }
    }


    &.is-opened {

        &::before {
            transform: rotate(-180deg);
        }
    }
}