/* 日本語フォント: 欧文は既存フォント、和文は Noto Sans CJK JP */
:root {
  /*--text-font: "ZedTextFtl", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;*/
  --text-font: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  /*--header-font: "ZedDisplayFtl", "Space Grotesk", "Noto Sans CJK JP", "Noto Sans JP", "Helvetica", sans-serif;*/
  --header-font: "Noto Sans CJK JP", "Noto Sans JP", "Helvetica", sans-serif;
}

.toc {
    font-size: 0.88em;
    line-height: 1.5;
    padding: 0.9em 1em 0.9em 0.4em;
    border-left: 2px solid var(--border-color);

    .heading {
        font-size: 0.8em;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-2);
        margin: 0 0 0.6em 0.8em;
    }

    ul {
        padding-left: 0.9em;
    }
    & > ul,
    ul.toc-list {
        padding-left: 0;
    }

    li {
        position: relative;
        padding: 0;
        margin: 0;
    }

    li a {
        display: block;
        padding: 0.28em 0.8em;
        margin-left: -0.4em;
        border-radius: 6px;
        color: var(--text-2);
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .parent > a {
        margin-top: 0.35em;
        font-weight: 600;
        color: var(--text-1);
    }

    li a:hover {
        color: var(--primary-color) !important;
        background-color: var(--bg-1);
        box-shadow: inset 2px 0 0 var(--primary-color);
    }

    li.selected > a {
        color: var(--text-0);
        background-color: var(--bg-1);
        font-weight: 600;
    }
}

/* ヘッダ (nav) を上に固定 */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg-0);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);

    @media only screen and (max-width: 600px) {
        position: relative;
    }
}