引用リツイート風の入れ子カード

<div class="d06-15-12-outer">
          <div class="d06-15-12-head">
            <span class="d06-15-12-avatar"></span>
            <span class="d06-15-12-name">まちの編集室</span>
          </div>
          <p class="d06-15-12-comment">この特集、取材の裏話も面白いのでぜひ読んでほしいです。</p>
          <div class="d06-15-12-inner">
            <div class="d06-15-12-inner-head">
              <span class="d06-15-12-inner-avatar"></span>
              <span class="d06-15-12-inner-name">地域リノベ協会</span>
            </div>
            <p class="d06-15-12-inner-text">空き家再生プロジェクトの最新事例をまとめました。今年は12件が完成しました。</p>
          </div>
        </div>

.d06-15-12-outer{ width:100%; max-width:250px; background:#fff; border:1px solid #e1e8ed; border-radius:14px; padding:12px; text-align:left; }
        .d06-15-12-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
        .d06-15-12-avatar{ width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#34d399,#059669); flex-shrink:0; }
        .d06-15-12-name{ font-size:11.5px; font-weight:700; color:#0f1419; }
        .d06-15-12-comment{ font-size:11px; color:#0f1419; margin:0 0 8px; line-height:1.5; }
        .d06-15-12-inner{ border:1px solid #e1e8ed; border-radius:10px; padding:8px 10px; }
        .d06-15-12-inner-head{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
        .d06-15-12-inner-avatar{ width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#60a5fa,#3b82f6); flex-shrink:0; }
        .d06-15-12-inner-name{ font-size:10px; font-weight:700; color:#0f1419; }
        .d06-15-12-inner-text{ font-size:10px; color:#536471; line-height:1.4; margin:0; }