/* ヘッダー */
#header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    padding-right: 1rem;
    padding-left: 1rem;
    background: linear-gradient(to right, var(--color-main-start), var(--color-main-end));
}

    #header * {
        color: white;
    }

    #header > div {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    #header .logo {
        align-items: center;
        margin-right: auto;
    }

        #header .logo .header-brand-name {
            cursor: pointer;
            font-size: var(--font-size-header-company);
        }

        #header .logo .header-system-name {
        }

            #header .logo .header-system-name span {
                position: absolute;
                margin-left: 1rem;
                margin-bottom: 0;
                cursor: pointer;
                font-size: var(--font-size-header-system);
            }

    #header .header-container-right > div {
        flex-shrink: 0;
        align-items: center;
        margin-left: 1rem;
        font-size: var(--font-size-header-menu);
    }

        #header .header-container-right > div:not(:has(i.icon)) {
            margin-block: 0.4rem;
            height: 2rem;
            max-height: 2rem;
        }

        #header .header-container-right > div a {
            text-decoration: none;
            border-radius: 0.5rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

            #header .header-container-right > div a:hover {
                background-color: var(--color-header-menu-hover);
            }

    #header .header-container-right .dropdown {
    }

        #header .header-container-right .dropdown .dropdown-toggle {
            align-items: center;
            text-decoration: none;
        }

        #header .header-container-right .dropdown .dropdown-item {
            align-items: center;
            font-size: var(--font-size-header-menu);
        }

        #header .header-container-right .dropdown ul {
            padding-block: 0;
            background: linear-gradient(to bottom, var(--color-main-start), var(--color-main-end));
            border-width: 0;
            border-radius: 0.5rem;
            box-shadow: 0 3px 5px rgb(0 0 0 / 25%);
            overflow: hidden;
        }

            #header .header-container-right .dropdown ul li {
                padding-block: 0.4rem;
            }

                #header .header-container-right .dropdown ul li + li {
                    border-top: 1px solid lightgray;
                }

                #header .header-container-right .dropdown ul li:hover {
                    background-color: var(--color-header-menu-hover);
                }

                #header .header-container-right .dropdown ul li a:hover {
                    background-color: var(--color-header-menu-hover);
                }