/**
========================
side-bar
========================
*/
.side_bar {
    display: none;
}

@media screen and (min-width: 1280px) {
    .side_bar {
        display: block;
        height: 100%;
        z-index: 100;
    }

    .side_bar_wrapper {
        height: 100%;
        width: 240px;
        padding: 16px;
        box-sizing: border-box;
        background: var(--wp--custom--color--gray--50);
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .side_bar_menu {
        height: fit-content;
        overflow-y: auto;
        position: sticky;
    }

    /* パーツ化 */
    .side_bar_item {
        position: relative;
        width: 100%;
    }

    .side_bar_item>a {
        display: block;
        text-decoration: none;
        color: var(--color-font-black, #232936);
        font-family: "Noto Sans JP";
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        padding: 12px 28px 12px 16px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 12px;
    }

    .side_bar_item_2>a {
        padding-left: 40px;
        box-sizing: border-box;
    }

    .side_bar_item_3>a {
        padding-left: 52px;
        box-sizing: border-box;
    }

    /* ホバー効果と最深階層のチェック済みアイテムにのみ適用 */
    .side_bar_item > a:hover,
    .side_bar_item_active > a {
        color: var(--wp--custom--color--blue--400);
        background-color: var(--wp--custom--color--blue--200);
    }

    /* 親階層のチェック済みアイテムは通常の色のまま */
    .side_bar_item_checked:not(.side_bar_item_active) > a {
        color: inherit;
        background-color: transparent;
    }

    .side_bar_icon {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
    }

    .side_bar_icon svg {
        transition: transform 0.3s ease;
        fill: var(--wp--custom--color--gray--600);
        width: 16px;
        height: 16px;
    }

    .side_bar_children[aria-expanded="false"] {
        display: none;
        height: 0;
    }

    /* 本当は<ul class="side_bar_children" aria-expanded="true">を使用して兄弟要素にあるside_bar_icon > svgを設定 */
    .side_bar_item_checked>.side_bar_icon>svg {
        transform: rotate(90deg);
    }
}