header {
    display: block;
    width: 100%;
    height: fit-content;
    background-color: #ffffffcc;
    padding: 10px 0px;
    margin: 0;
    border-bottom: 1px solid #ddd;
    /* position: sticky; */
    /* top: 0; */
    /* left: 0; */
    /* z-index: 999; */
}

/* ヘッダー内セクション */
.HeaderBar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 20px 20px;

    width: 100%;
    max-width: var(--ContentAreaMaxWidth);
    margin: 0 auto;

    .LogoContainer {
        /* ロゴのサイズの基準値を指定 */
        --LogoSize: 40px;
    }
    
    .CenterTextContainer {
        text-align: left;
        font-weight: 300;
        color: var(--MainText2);
    }

    .CenterMenuContainer {
        text-align: center;

        .MenuButton {
            text-decoration: none;
            color: var(--MainText2);
            font-weight: 300;
            font-size: 1em;
            padding: 5px 10px;

            &.CartButton {
                font-weight: 500;
                color: var(--PrimaryColor);
            }
        }
    }

    .UserContainer {
        display: grid;
        grid-template-columns: auto auto;
        gap: 10px;
        justify-items: end;
        align-items: center;
        color: var(--MainText1);

        .UserButton {
            border: 0;
            outline: 0;
            background-color: transparent;
            padding: 5px 7px;
            color: var(--MainText);
            font-size: 1.2em;
            transition: color 0.2s;
            cursor: pointer;
            text-decoration: none;
        }
    
        .UserButton:hover {
            color: #555;
        }
    
        .LogoutButton {
            color: #999;
        }
    }

    .SidePanelButtonContainer {
        display: none;
    }
}

/* スマホ・タブレット用 */
@media screen and ( max-width: 768px ) {
    .HeaderBar {
        grid-template-columns: auto auto;
        gap: 10px;
        justify-content: space-between;
        padding: 0px 15px;

        
        .LogoContainer {
            /* ロゴのサイズの基準値を指定 */
            --LogoSize: 20px;
        }

        .CenterMenuContainer {
            display: none;
        }

        .UserContainer {
            display: none;
        }

        .SidePanelButtonContainer {
            display: block;
        }
    }
}

.SidePanelContentContainer {
    .SidePanelUserContainer {
        display: grid;
        grid-template-columns: auto auto;
        gap: 10px;
        justify-items: end;
        align-items: center;
        color: var(--MainText1);

        .UserButton {
            border: 0;
            outline: 0;
            background-color: transparent;
            padding: 5px 7px;
            color: var(--MainText);
            font-size: 1.2em;
            transition: color 0.2s;
            cursor: pointer;
            text-decoration: none;
        }
    
        .UserButton:hover {
            color: #555;
        }
    
        .LogoutButton {
            color: #999;
        }
    }
    
    .SidePanelMenuContainer {
        display: grid;
        gap: 0px;
    
        .MenuButton {
            text-decoration: none;
            padding: 10px 10px;
            color: var(--MainText2);
            font-size: 1em;
            font-weight: 300;
            border-bottom: 1px solid var(--LightPrimaryColor);

            &.CartButton {
                font-weight: 500;
                color: var(--PrimaryColor);
            }
        }
    }
}