/* ヘッダー */
#header {
    position: fixed;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: var(--header-height);
    padding: var(--space-small);
    background-color: var(--color-header);
    border-bottom: solid 1px var(--color-black);
    z-index: 1;
}

    #header .header {
        height: 100%;
        display: flex;
        justify-content: space-between;
    }

    #header .header-left {
        align-items: center;
        display: inline-flex;
    }

    #header .header-right {
        align-items: center;
        display: inline-flex;
        gap: var(--space-medium);
    }

    #header .header-image-wrapper {
        height: 100%;
    }

    #header .header-image {
        height: 100%;
    }

    #header .header-system-name {
        margin-left: 10px;
        font-size: var(--font-size-title);
        font-weight: bold;
        color: var(--color-primary);
    }

    #header .header-user-wrapper {
        height: 100%;
        display: inline-flex;
        align-items: center;
        gap: var(--space-small);
    }

    #header .header-user-type {
        font-size: var(--font-size-label-small);
        color: black;
        width: 5rem;
        text-align: center;
    }

/* サイドメニュー */
.sidenav {
    background-color: var(--color-light-gray);
    width: var(--sidenav-width);
    height: calc(100vh - var(--header-height));
    font-size: var(--font-size-label-small);
    padding: var(--space-small);
    position: fixed;
    top: var(--header-height);
    box-sizing: border-box;
}

    .sidenav .icon {
        height: 5rem;
        width: 5rem;
        margin-bottom: 0.5rem;
    }

    .sidenav hr {
        margin: 1rem calc(var(--space-small) * -1);
    }

    .sidenav ul {
        padding-left: var(--space-small);
        margin-top: 0.5rem;
    }

    .sidenav li {
        list-style: none;
    }

        .sidenav li a {
            color: var(--color-black);
            text-decoration: none;
        }

    .sidenav .display-target-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 4rem;
    }

    .sidenav .button-group {
        box-sizing: border-box;
        width: 100%;
        padding: 0 var(--space-small);
        position: absolute;
        left: 0;
        bottom: var(--space-small);
        text-align: center;
    }

        .sidenav .button-group button {
            margin-top: var(--space-small);
            width: 100%;
        }

.float-right {
    float: right;
}

.float-left {
    float: left;
}