/* ========================================
   Sidebar Right
   ======================================== */

.sidebar-right {
    position: sticky;
    gap: 20px;
    width: 300px;
    /* サイドバーの追従位置はここで調整 */
    top: 200px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-self: flex-start;
    padding: 16px 0 16px 0px;
}


.sidebar-right--section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-wrapper {
    position: sticky;
    top: 200px;
    align-self: flex-start;
    display: flex;
    gap: 20px;
}

.sidebar-right--divider {
    height: 1px;
    background: #f1f1f1;
}

.sidebar-right--tags-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #316EA9;
}

.sidebar-right--tags-header svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: #316EA9;
    flex-shrink: 0;
}

.sidebar-right--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ========================================
   中項目ヘッダー
   ======================================== */

.sidebar-right--sub-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #316EA9;
}

.sidebar-right--sub-category-header svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: #316EA9;
    flex-shrink: 0;
}

/* ========================================
   中項目リスト
   ======================================== */

.sidebar-right--sub-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-right--sub-category-list a {
    display: block;
    padding: 0px 0px 0px 28px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: color 0.15s;
}

.sidebar-right--sub-category-list a:hover,
.sidebar-right--sub-category-list a.is-active {
    color: #316EA9;
    text-decoration: none;
}

/* ========================================
   目次ヘッダー
   ======================================== */

.sidebar-right--toc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #316EA9;
}

.sidebar-right--toc-header svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: #316EA9;
    flex-shrink: 0;
}

/* ========================================
   目次（Easy Table of Contents リセット）
   ======================================== */

.sidebar-right--toc #ez-toc-container {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.sidebar-right--toc #ez-toc-container p.ez-toc-title {
    display: none;
}

.sidebar-right--toc .ez-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-right--toc .ez-toc-list li {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 見出し3などのネストされたリストは "ez-toc-list" クラスを持たないため、
   個別に余白を設定する（見出し2の間隔よりは狭いが、詰まりすぎないように） */
.sidebar-right--toc .ez-toc-list li ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-right--toc #ez-toc-container .ez-toc-list a {
    display: block;
    padding: 0px 0px 0px 24px;
    font-size: 13px;
    font-weight: normal;
    color: #999;
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.15s;
}

.sidebar-right--toc #ez-toc-container .ez-toc-list a:hover {
    text-decoration: none;
}

.sidebar-right--toc #ez-toc-container .ez-toc-list a.is-active {
    color: #000;
    font-weight: bold;
}

.sidebar-right--toc .ez-toc-list .ez-toc-heading-level-3 a {
    padding-left: 28px;
    font-size: 12px;
    color: #666;
}

/* ========================================
   閲覧数ランキング カルーセル（デフォルト非表示）
   ======================================== */

.ranking-carousel--prev,
.ranking-carousel--next {
    display: none;
}

.ranking-carousel--spacer {
    display: none;
}

.sidebar-right--ranking-section {
    gap: var(--ranking-content-gap, 32px);
}

/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 1023px) {
    .sidebar-right {
        width: 100%;
        position: static;
    }

    .sidebar-right--divider {
        display: none;
    }

    .sidebar-right.is-other {
        display: none;
    }

    .sidebar-right--sub-section,
    .sidebar-right--toc,
    .sidebar-right--tags-section {
        display: none !important;
    }

    .ranking-carousel {
        position: relative;
        margin-inline: -24px;
    }

    .ranking-carousel--track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 6px;
    }

    .ranking-carousel--track::-webkit-scrollbar {
        display: none;
    }

    .ranking-carousel--track .ranking-article-list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 40px;
    }

    .ranking-carousel--track .ranking-article-item {
        flex: 0 0 50vw;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: none;
    }

    .ranking-carousel--spacer {
        display: block;
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: calc(25vw - 40px);
        width: calc(25vw - 40px);
    }

    .ranking-carousel--track .ranking-article-item--thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .ranking-carousel--track .ranking-article-item--title {
        font-size: 16px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .ranking-carousel--track .ranking-article-item--rank {
        font-size: 16px;
        width: 32px;
        height: 32px;
    }

    /* 矢印: 画像高さ(50vw * 9/16)の中央 = 50vw * 0.28125 */
    .ranking-carousel--prev,
    .ranking-carousel--next {
        display: flex;
        position: absolute;
        top: calc(50vw * 0.28125 + 6px);
        transform: translateY(-50%);
        z-index: 2;
        width: 32px;
        height: 32px;
        background: #316EA9;
        color: #fff;
        border: none;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .ranking-carousel--prev { left: calc(25vw - 16px); }
    .ranking-carousel--next { right: calc(25vw - 16px); }

    .ranking-carousel--prev svg,
    .ranking-carousel--next svg {
        display: block;
        width: 20px;
        height: 20px;
        fill: #fff;
    }


    .ranking-carousel--prev svg {
        transform: scaleX(-1);
    }

    .sidebar-right--ranking-section {
        padding: 0;
        gap: var(--ranking-content-gap, 32px);
    }
}

/* 目次のトグルボタンを非表示にして常時表示 */
.sidebar-right--toc .ez-toc-toggle,
.sidebar-right--toc .ez-toc-js-icon-con,
.sidebar-right--toc .ez-toc-cssicon {
    display: none !important;
}

.sidebar-right--toc #ez-toc-container input[type="checkbox"]:checked + nav,
.sidebar-right--toc #ez-toc-container nav {
    display: block !important;
    opacity: 1 !important;
    max-height: none !important;
}