/*
toc.css
functions.phpで生成される目次用のスタイル
*/

.outline {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px 25px;
    margin: 30px 0;
}

.outline__title {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    display: block;
}

/* 開閉ボタンのチェックボックス（非表示にする） */
.outline__toggle {
    display: none;
}

/* [開く/閉じる]のラベル */
.outline__switch {
    display: block;
    text-align: right;
    cursor: pointer;
    color: #0073aa;
    margin-top: -35px; /* タイトルの右上に配置 */
    margin-bottom: 10px;
}
.outline__switch::before {
    content: "[閉じる]";
}
.outline__toggle:not(:checked) + .outline__switch::before {
    content: "[開く]";
}

/* 目次リスト全体 */
.outline__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    overflow: hidden; /* 開閉アニメーションのため */
    transition: max-height 0.5s ease-in-out;
    max-height: 1000px; /* 十分な高さを確保 */
}
/* チェックボックスがオフの時にリストを隠す */
.outline__toggle:not(:checked) ~ .outline__list {
    max-height: 0;
    margin-top: 0;
}


/* ネストされたリストのスタイル */
.outline__list .outline__list {
    padding-left: 20px;
    margin-top: 8px;
}

.outline__item {
    margin-bottom: 8px;
}
.outline__item:last-child {
    margin-bottom: 0;
}

.outline__link {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 4px 0;
}

.outline__link:hover {
    text-decoration: underline;
    color: #de3cc3;
}