連絡先カード(名刺風)

<div class="d06-03-11-card">
          <div class="d06-03-11-top">
            <div class="d06-03-11-ava">NK</div>
            <div><div class="d06-03-11-name">中村 賢一</div><div class="d06-03-11-role">営業部 マネージャー</div></div>
          </div>
          <ul class="d06-03-11-info">
            <li><span class="d06-03-11-ic">☎</span>03-1234-5678</li>
            <li><span class="d06-03-11-ic">✉</span>nakamura@example.com</li>
            <li><span class="d06-03-11-ic">🌐</span>example.com</li>
          </ul>
        </div>

.d06-03-11{background:#f4f6fb}
        .d06-03-11-card{width:230px;background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 22px rgba(40,60,110,.12);transition:transform .3s,box-shadow .3s}
        .d06-03-11-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(40,60,110,.18)}
        .d06-03-11-top{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid #eef0f6}
        .d06-03-11-ava{width:48px;height:48px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;background:linear-gradient(135deg,#6a8dff,#9b6bff)}
        .d06-03-11-name{font-weight:700;color:#243053;font-size:14px}
        .d06-03-11-role{font-size:11px;color:#8590ad;margin-top:2px}
        .d06-03-11-info{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
        .d06-03-11-info li{display:flex;align-items:center;gap:8px;font-size:12px;color:#3a4666}
        .d06-03-11-ic{width:22px;height:22px;border-radius:50%;background:#eef1fb;display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}