/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:12:15 */
/* ==============================================
   ウィジェット目次（PC・スマホ共通）：Apple Style (Gentle Edition)
   修正：
     BUG-1: content を span 要素から削除（擬似要素にのみ有効なプロパティ）
     BUG-2: ドット生成を .navigator__indicator に一本化（::before との二重表示を解消）
     BUG-3: ベンダープレフィックスの記述順を修正（-webkit- を先に）
     BUG-4: transition: all → 具体的なプロパティ名に変更（パフォーマンス改善）
     BUG-5: .navigator__indicator に transition を追加（アクティブ時がスムーズに）
     BUG-6: prefers-reduced-motion 対応を追加
   ============================================== */

/* --- 1. 全体の枠（優しく・目立たないように） --- */
.sgb-toc-menu,
.widget_sango_toc {
    background: rgba(255, 255, 255, 0.7) !important;
    /* ★修正BUG-3：ベンダープレフィックスを先に書く（慣習上の正しい順序） */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    /*
     * ★追加：backdrop-filter はGPU合成が必要。
     * will-change で事前にレイヤー確保し、初回描画時のチラつきを防止。
     */
    will-change: transform;
}

/* --- 2. タイトル（インライン色指定を強制無効化） --- */
.sgb-toc-menu__title,
.widgettitle {
    background: transparent !important;
    color: #1d1d1f !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* もともと入っているリストアイコンを消す */
.sgb-toc-menu__title i,
.widgettitle i {
    display: none !important;
}

/* 📕アイコンを追加 */
.sgb-toc-menu__title::before,
.widgettitle::before {
    content: '📕' !important;
    font-size: 16px !important;
    margin-right: 10px !important;
    background: #F2F2F7 !important;
    padding: 6px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* --- 3. リスト全体の調整 --- */
.toc_widget_list {
    padding: 12px 12px 20px 12px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 過去の装飾をリセット */
.toc_widget_list::before,
.toc_widget_list::after,
.toc_widget_list a::after,
.toc_widget_list a::before,
.navigator-child .navigator__indicator::before,
.navigator-child .navigator__indicator::after {
    display: none !important;
}

/* --- 4. リンク行のベーススタイル --- */
.toc_widget_list a,
.navigator-child {
    display: flex !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    /*
     * ★修正BUG-4：transition: all → 変化する2プロパティのみに限定。
     * 「all」はすべてのCSSプロパティを毎フレーム監視するため
     * スクロール中のパフォーマンスを圧迫する。
     */
    transition: background 0.2s ease !important;
}

.navigator__title {
    color: #6e6e73 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    /* ★修正BUG-4：colorの遷移はここで管理 */
    transition: color 0.2s ease !important;
}

/* PC用ホバーアクション（タッチデバイスでは無視） */
@media (hover: hover) and (pointer: fine) {
    .toc_widget_list a:hover {
        background: rgba(0, 0, 0, 0.02) !important;
    }
    .toc_widget_list a:hover .navigator__title {
        color: #1d1d1f !important;
    }
}

/* --- 5. ドットインジケーター --- */
/*
 * ★修正BUG-1 & BUG-2：
 * 元コードでは以下の2箇所でドットを定義していた:
 *   (A) .toc_widget_list > li > a::before  ← 擬似要素のドット
 *   (B) .navigator-child .navigator__indicator ← スパン要素のドット
 *
 * SANGOテーマは <a><span class="navigator__indicator"></span><span class="navigator__title">...</span></a>
 * という構造のため、AとBが同時に描画され「ドット2個」になっていた。
 *
 * また「content: ''」は span 等のリアル要素には効かない（擬似要素専用）。
 *
 * 修正：
 * - ::before 擬似要素によるドット生成を廃止（セクション3のリセットで非表示済み）
 * - .navigator__indicator スパン要素のみにドットを設定
 * - content プロパティを削除（スパンには不要）
 */
.navigator__indicator {
    display: inline-block !important;
    width: 6px !important;
    min-width: 6px !important;
    height: 6px !important;
    min-height: 6px !important;
    background: #ff2d55 !important;
    border-radius: 50% !important;
    border: none !important;
    margin-right: 10px !important;
    margin-top: 6px !important;
    flex-shrink: 0 !important;
    opacity: 0.6 !important;
    /*
     * ★修正BUG-5：transform と box-shadow の遷移を子要素自身に定義。
     * transition は親要素から継承されないため、ここに書かないと
     * アクティブ状態への切り替えが瞬時（カクつく）になる。
     */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                opacity 0.2s ease !important;
    /* GPU合成ヒント：transformアニメーション対象のためレイヤー昇格 */
    will-change: transform !important;
}

/* 子階層 */
.toc_widget_list ul ul,
.toc_widget_list li li {
    margin-left: 14px !important;
}
.toc_widget_list ul ul a,
.toc_widget_list li li .navigator-child {
    padding: 6px 12px !important;
}
.toc_widget_list li li .navigator__title {
    font-size: 12px !important;
}
.toc_widget_list li li .navigator__indicator {
    background: linear-gradient(135deg, #007aff, #ff2d55) !important;
    width: 4px !important;
    min-width: 4px !important;
    height: 4px !important;
    min-height: 4px !important;
    margin-right: 8px !important;
    margin-top: 7px !important;
    opacity: 0.5 !important;
}

/* --- 6. 今読んでいるセクション（アクティブ） --- */
.toc_widget_list .is-active,
.toc_widget_list .active,
.toc_widget_list li.active,
.toc_widget_list li.is-active {
    background: transparent !important;
}

.toc_widget_list a.is-active,
.toc_widget_list a.active,
.navigator-child.is-active {
    background: rgba(255, 45, 85, 0.04) !important;
}

.is-active .navigator__title,
.active .navigator__title {
    color: #ff2d55 !important;
    font-weight: 600 !important;
}

/* インジケーターのアクティブ状態（transition は .navigator__indicator 自身に定義済み） */
.is-active .navigator__indicator,
.toc_widget_list a.active .navigator__indicator {
    opacity: 1 !important;
    box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.15) !important;
    transform: scale(1.2) !important;
}

/* --- 7. prefers-reduced-motion 対応 --- */
/*
 * ★修正BUG-6：「動きを減らす」設定（iOS省電力モード等）を尊重。
 * すべての transition と transform アニメーションを無効化。
 */
@media (prefers-reduced-motion: reduce) {
    .toc_widget_list a,
    .navigator-child,
    .navigator__title,
    .navigator__indicator {
        transition: none !important;
    }
    .is-active .navigator__indicator,
    .toc_widget_list a.active .navigator__indicator {
        transform: none !important;
    }
}

/* --- 8. スマホ表示時の微調整 --- */
@media screen and (max-width: 480px) {
    .sgb-toc-menu,
    .widget_sango_toc {
        margin: 0 0 20px 0 !important;
        border-radius: 12px !important;
    }
}