3Dフリップ特徴カード

<div class="d01-04-11-wrap">
          <div class="d01-04-11-card">
            <div class="d01-04-11-inner">
              <div class="d01-04-11-face d01-04-11-front">
                <span class="d01-04-11-ic">
                  <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 9h18"/></svg>
                </span>
                <h4>柔軟な運用</h4>
                <span class="d01-04-11-hint">ホバーで詳細</span>
              </div>
              <div class="d01-04-11-face d01-04-11-back">
                <p>プラグイン不要で管理画面から自由にレイアウトを調整できます。</p>
              </div>
            </div>
          </div>
          <div class="d01-04-11-card">
            <div class="d01-04-11-inner">
              <div class="d01-04-11-face d01-04-11-front">
                <span class="d01-04-11-ic">
                  <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                </span>
                <h4>導入までが早い</h4>
                <span class="d01-04-11-hint">ホバーで詳細</span>
              </div>
              <div class="d01-04-11-face d01-04-11-back">
                <p>最短1週間で公開可能。既存サイトからの移行にも対応します。</p>
              </div>
            </div>
          </div>
        </div>

.prev.d01-04-11{background:#f7f8fb}
        .d01-04-11-wrap{display:flex;gap:16px;width:100%;max-width:420px}
        .d01-04-11-card{flex:1;height:170px;perspective:1000px}
        .d01-04-11-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
        .d01-04-11-card:hover .d01-04-11-inner{transform:rotateY(180deg)}
        .d01-04-11-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
        .d01-04-11-front{background:#fff;border:1px solid #e6e9f0}
        .d01-04-11-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#5b7cfa,#8a5bfa);color:#fff;margin-bottom:10px}
        .d01-04-11-front h4{margin:0 0 6px;font-size:14px;color:#1f2740}
        .d01-04-11-hint{font-size:10.5px;color:#9aa2bd}
        .d01-04-11-back{background:linear-gradient(135deg,#5b7cfa,#8a5bfa);color:#fff;transform:rotateY(180deg)}
        .d01-04-11-back p{margin:0;font-size:12px;line-height:1.6}