サイドスティッキー目次カードのレイアウト枠

<div class="card06-10-09">
          <span class="pin06-10-09">TOC</span>
          <p class="ti06-10-09">この記事の目次</p>
          <div class="lst06-10-09">
            <p class="ac06-10-09">・記事の目的</p>
            <p>・調査方法</p>
            <p>・結果と考察</p>
            <p>・今後の展望</p>
          </div>
        </div>

.d06-10-09{width:100%;display:flex;justify-content:flex-start;}
        .d06-10-09 .card06-10-09{position:relative;width:78%;background:#fff;border:1px solid #e3e6f0;border-left:4px solid #4a6fd8;border-radius:8px;padding:16px 16px 14px;box-shadow:0 2px 8px rgba(30,40,80,.06);}
        .d06-10-09 .pin06-10-09{position:absolute;top:-9px;right:12px;background:#4a6fd8;color:#fff;font-size:9px;font-weight:bold;padding:3px 9px;border-radius:99px;letter-spacing:.05em;}
        .d06-10-09 .ti06-10-09{margin:0 0 10px;font-size:12px;font-weight:bold;color:#222;}
        .d06-10-09 .lst06-10-09{display:flex;flex-direction:column;gap:6px;}
        .d06-10-09 .lst06-10-09 p{margin:0;font-size:11px;color:#777;}
        .d06-10-09 .ac06-10-09{color:#2c3e6b !important;font-weight:bold;}