推薦コメント付きプロフィールカード

<div class="card">
          <span class="qmark">"</span>
          <p class="quote">丁寧なヒアリングとスピード感のある対応が魅力です。</p>
          <div class="who">
            <span class="avatar">西</span>
            <div class="text">
              <h4 class="name">西村 悠</h4>
              <p class="role">クライアント企業 広報担当</p>
            </div>
          </div>
        </div>

.d06-06-11 .card{width:100%;max-width:240px;padding:18px;border-radius:10px;background:#fafaf9;border:1px solid #e7e5e4;display:flex;flex-direction:column;gap:10px;position:relative;}
        .d06-06-11 .qmark{position:absolute;top:6px;left:12px;font-size:34px;color:#e7e5e4;font-family:Georgia,serif;line-height:1;}
        .d06-06-11 .quote{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:#57534e;font-family:sans-serif;}
        .d06-06-11 .who{display:flex;align-items:center;gap:10px;}
        .d06-06-11 .avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#78716c,#a8a29e);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:sans-serif;}
        .d06-06-11 .name{margin:0;font-size:12px;font-weight:700;color:#292524;font-family:sans-serif;}
        .d06-06-11 .role{margin:1px 0 0;font-size:10px;color:#a8a29e;font-family:sans-serif;}