セクション進捗ドット目次

<div class="d06-09-09-wrap">
          <div class="d06-09-09-dots">
            <button data-t="s06-09-09-1" class="is-active" aria-label="はじめに"></button>
            <button data-t="s06-09-09-2" aria-label="課題"></button>
            <button data-t="s06-09-09-3" aria-label="施策"></button>
            <button data-t="s06-09-09-4" aria-label="効果"></button>
            <button data-t="s06-09-09-5" aria-label="まとめ"></button>
          </div>
          <div class="d06-09-09-body">
            <section id="s06-09-09-1"><h4>はじめに</h4><p>右のドットが読み進めたセクション分だけ点灯していきます。</p></section>
            <section id="s06-09-09-2"><h4>課題</h4><p>目次の項目数が多いと圧迫感が出るため、ドット表示は省スペースで有効です。</p></section>
            <section id="s06-09-09-3"><h4>施策</h4><p>各セクションの開始位置を基準に、現在地のドットだけを強調表示します。</p></section>
            <section id="s06-09-09-4"><h4>効果</h4><p>通過済みのドットは薄い色に変わり、進捗が一目で把握できます。</p></section>
            <section id="s06-09-09-5"><h4>まとめ</h4><p>ドットは直接クリックしてジャンプすることもできます。</p></section>
          </div>
        </div>

.prev.d06-09-09{padding:0;display:block}
        .d06-09-09-wrap{display:flex;height:260px}
        .d06-09-09-dots{position:relative;flex:0 0 34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:14px 0}
        .d06-09-09-dots::before{content:"";position:absolute;left:50%;top:26px;bottom:26px;width:2px;background:#e6e8f0;transform:translateX(-50%);z-index:0}
        .d06-09-09-dots button{position:relative;z-index:1;width:10px;height:10px;border-radius:50%;border:none;background:#d6d9e6;
          cursor:pointer;padding:0;transition:background .2s,transform .2s}
        .d06-09-09-dots button.is-done{background:#c7c2f5}
        .d06-09-09-dots button.is-active{background:#5b3df0;transform:scale(1.5)}
        .d06-09-09-body{flex:1;overflow-y:auto;padding:14px 16px;scroll-behavior:smooth}
        .d06-09-09-body section{padding:6px 0 16px;border-bottom:1px dashed #eef0f5}
        .d06-09-09-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-09-body p{margin:0;font-size:12px;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-09-09');if(!root)return;
        var body=root.querySelector('.d06-09-09-body');
        var dots=root.querySelectorAll('.d06-09-09-dots button');
        var secs=root.querySelectorAll('.d06-09-09-body section');
        function upd(){
          var st=body.scrollTop+30,idx=0;
          secs.forEach(function(s,i){if(s.offsetTop-body.offsetTop<=st)idx=i;});
          dots.forEach(function(d,i){
            d.classList.toggle('is-active',i===idx);
            d.classList.toggle('is-done',i<idx);
          });
        }
        dots.forEach(function(d){
          d.addEventListener('click',function(){
            var t=root.querySelector('#'+d.getAttribute('data-t'));
            if(t){body.scrollTop=t.offsetTop-body.offsetTop-6;}
          });
        });
        body.addEventListener('scroll',upd);upd();
      })();