.simple-navi {
    border: 3px solid $micDeepOrange;
    @include sp {
        display: none;
    }
    &__upper {
        background-color: $micOrange;
        color: white;
        display: flex;
    }
    &__area {
        @include navilink;
        color: white;
        &.selected {
            position: relative;
            color: $micDeepOrange;
            z-index: 10;
            &::after {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                content: "";
                background-color: white;
                width: calc(100% - 6px);
                height: calc(100% - 6px);
                border-radius: 5px;
                z-index: -1;
            }
            & i {
                transform: rotate(90deg);
            }
        }
    }
    &__lower {
        display: flex;
        background-color: white;
    }
    &__type {
        @include navilink;
        &.selected {
            font-weight: bold;
            & i {
                transform: rotate(90deg);
            }
        }
    }
}
