@layer components {
    .anchorlink {
        position: sticky;
        top: 24px;
        z-index: 10;
    }
    .anchorlink-list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 16px 16px; 
    }
    .anchorlink-item {
        white-space: nowrap;
        flex-shrink: 0; 
        width: auto; 
        max-width: 300px;
    }
    .anchorlink-item .anchorlink-link {
        text-decoration: none;
        padding: 8px 16px;
        background-color: color-mix(in srgb, var(--semantic-base-background) 70%, transparent);
        backdrop-filter: blur(8px);
        border: 1px solid var(--semantic-primary-background);
        border-radius: 100px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
        color: var(--semantic-relux-brand-primary);
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: var(--line-height-100) !important;
    }
    .anchorlink-item.active .anchorlink-link {
        background-color: var(--semantic-relux-brand-primary);
        color: var(--semantic-base-background);
        border: 1px solid var(--semantic-relux-brand-primary);
    }
    .scroll-top {
        scroll-margin-top: 64px;
    }
    @media screen and (max-width: 767px) {
        .anchorlink-list.anchorlink-sp-scroll {
            justify-content: flex-start;
        }
        .anchorlink-list.anchorlink-sp-center {
            justify-content: center;
        }
        .anchorlink-item .anchorlink-link {
            padding: 4px 12px;
            height: 32px;
        }
    }
    @media (hover: hover) {
        .anchorlink-item .anchorlink-link:hover {
            background-color: var(--semantic-brand-hover);
            color: var(--semantic-base-background);
            border: 1px solid var(--semantic-brand-hover);
        }    
    }    
}