.AdminHeader {
    /* 上下にだけ余白を設定、左右の余白は内部コンテナに任せる */
    padding: 20px 0px; 
    border-bottom: 1px solid #ddd;

    .AdminHeaderContainer {
        max-width: var(--ContentAreaMaxWidth);
        margin: 0 auto;
        width: 100%;
        
        padding: 0px 20px;

        display: grid;
        grid-template-columns: auto 1fr auto;
        justify-content: space-between;

        .Logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
        }

        .LinkButtonBox {
            display: flex;
            gap: 30px;
            align-items: center;
            justify-content: center;
            
            .LinkButton {
                display: grid;
                gap: 5px;
                justify-items: center;
                align-items: center;
       
                text-decoration: none;

                .Label {
                    font-size: 0.8rem;
                    font-weight: 300;
                    color: #999;
                }

                .Icon {
                    font-size: 1.8rem;
                    color: #555;
                }
            }
        }

        .LogoutButtonBox {
            display: grid;
            font-size: 20px;
            align-items: center;
    
            .LogoutButton {
                color: #777;
            }
        }
    }
}

/* スマホ対応 */
@media (max-width: 600px) {
    .AdminHeader {
        .AdminHeaderContainer {
            grid-template-columns: 1fr auto;
        }

        .Logo {
            display: none;
        }
    }
}