ピン留めベストコメント付きリスト

<div class="d06-12-04-wrap">
          <div class="d06-12-04-pinned">
            <div class="d06-12-04-pin-label"><span class="d06-12-04-pin-icon">📌</span>ベストコメント</div>
            <div class="d06-12-04-top"><span class="d06-12-04-avatar">高</span><span class="d06-12-04-name">高橋 直樹</span></div>
            <p class="d06-12-04-text">実際に試してみたところ、想像以上の効果がありました！</p>
          </div>
          <div class="d06-12-04-normal">
            <span class="d06-12-04-avatar d06-12-04-avatar-sm">伊</span>
            <div class="d06-12-04-body"><div class="d06-12-04-name">伊藤 舞</div><p class="d06-12-04-text">私も同感です。</p></div>
          </div>
        </div>

.d06-12-04-wrap{ width:100%; display:flex; flex-direction:column; gap:10px; }
        .d06-12-04-pinned{ background:#fff8e8; border:1px solid #f5d98a; border-radius:10px; padding:10px 12px; }
        .d06-12-04-pin-label{ font-size:9px; font-weight:700; color:#b8860b; display:flex; align-items:center; gap:4px; margin-bottom:6px; }
        .d06-12-04-pin-icon{ font-size:10px; }
        .d06-12-04-top{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
        .d06-12-04-avatar{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#ffb86b,#ff7e5f); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .d06-12-04-avatar-sm{ width:22px; height:22px; font-size:9px; background:linear-gradient(135deg,#6a93ff,#8f6aff); }
        .d06-12-04-name{ font-size:11px; font-weight:700; color:#221f33; }
        .d06-12-04-text{ margin:0; font-size:10.5px; line-height:1.5; color:#5c5977; }
        .d06-12-04-normal{ display:flex; gap:8px; padding-left:2px; }