.sticky-toc {
    position: sticky;
    top: 80px;
    padding: 0;
    background-color: #F5F7F5;
    z-index: 100;
    transition: top .3s;
}
body.admin-bar .sticky-toc {
    top: calc(32px);
}
body.admin-bar.is-scrolled .sticky-toc {
    top: calc(32px);
}
body.admin-bar.is-scrolling-up .sticky-toc {
    top: calc(32px + 80px);
}
body:not(.admin-bar).is-scrolled .sticky-toc {
    top: 0;
}
body:not(.admin-bar).is-scrolling-up .sticky-toc {
    top: 80px;
}

.sticky-toc > .wp-block-group {
    display: flex;
    align-items: center;
    gap: 120px;
    padding: 0 16px;
}

.sticky-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
}

.sticky-toc li {
    display: inline-flex;
}

.sticky-toc a {
    text-decoration: none;
    padding: 24px 0;
    font-weight: 600;
    line-height: 18px;
    font-size: 18px;
    letter-spacing: .4px;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #1F221F;
}

.sticky-toc a.active {
    font-weight: bold;
}

.sticky-toc .icon_bg {
    background-color: #EBEEEB;
    padding: 4px;
    line-height: 0;
    border-radius: 4px;
    display: inline-block;
    transition: background-color .3s;
}
.sticky-toc .icon {
    color: #2F332E;
}

.sticky-toc a:hover .icon_bg {
    background-color: #C3CDC2;
}

.sticky-toc ul.toc-sublist {
    position: absolute;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background-color: #f5f7f5;
    padding: 24px;
    display: none;
}
.sticky-toc li:hover > ul.toc-sublist {
    display: flex;
}
.toc-sublist a {
    padding: 12px 0;
}

@media (max-width: 768px) {
    .sticky-toc { position: relative; }
    .sticky-toc ul { display: none; }
    .sticky-toc.open ul { display: block; }
}