ホバー展開特徴タイル

<div class="d01-04-10-grid">
          <div class="d01-04-10-tile">
            <span class="d01-04-10-ic">
              <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>
            </span>
            <div class="d01-04-10-body"><b>高速化</b><p>表示速度を徹底改善。</p></div>
          </div>
          <div class="d01-04-10-tile">
            <span class="d01-04-10-ic">
              <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            </span>
            <div class="d01-04-10-body"><b>セキュリティ</b><p>堅牢に守ります。</p></div>
          </div>
          <div class="d01-04-10-tile">
            <span class="d01-04-10-ic">
              <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H4z"/><path d="M8 20h8M12 16v4"/></svg>
            </span>
            <div class="d01-04-10-body"><b>レスポンシブ</b><p>全端末に対応。</p></div>
          </div>
        </div>

.prev.d01-04-10{background:#f7f8fb}
        .d01-04-10-grid{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px}
        .d01-04-10-tile{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e6e9f0;border-radius:14px;padding:16px 18px;cursor:default;transition:box-shadow .3s ease}
        .d01-04-10-tile:hover{box-shadow:0 12px 26px rgba(40,60,120,.12)}
        .d01-04-10-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#eef2ff;color:#5b7cfa;flex:none;transition:background .3s ease,color .3s ease}
        .d01-04-10-tile:hover .d01-04-10-ic{background:#5b7cfa;color:#fff}
        .d01-04-10-body{overflow:hidden;max-width:0;opacity:0;transform:translateX(-8px);transition:max-width .4s ease,opacity .4s ease,transform .4s ease}
        .d01-04-10-tile:hover .d01-04-10-body{max-width:260px;opacity:1;transform:none}
        .d01-04-10-body b{display:block;font-size:14px;color:#20263c;margin-bottom:2px;white-space:nowrap}
        .d01-04-10-body p{margin:0;font-size:12px;color:#6a7288;white-space:nowrap}