ホバー展開メニュー(アイコン→ラベル)

<nav class="d03-02-07-bar">
          <a href="#">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            <span>ホーム</span>
          </a>
          <a href="#">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
            <span>サービス</span>
          </a>
          <a href="#">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            <span>実績紹介</span>
          </a>
          <a href="#">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span>お問合せ</span>
          </a>
        </nav>

.d03-02-07-bar{display:flex;flex-direction:column;gap:8px}
        .d03-02-07-bar a{display:flex;align-items:center;gap:0;width:52px;height:52px;padding:0;color:#475569;background:#f1f5f9;border-radius:14px;text-decoration:none;overflow:hidden;white-space:nowrap;transition:width .28s cubic-bezier(.4,0,.2,1),background .2s,color .2s}
        .d03-02-07-bar a svg{flex:0 0 52px;padding:16px 0;box-sizing:content-box;width:20px}
        .d03-02-07-bar a span{font-size:14px;font-weight:600;opacity:0;transition:opacity .2s;padding-right:20px}
        .d03-02-07-bar a:hover{width:172px;background:#4f46e5;color:#fff}
        .d03-02-07-bar a:hover span{opacity:1}