3Dフリップ式ステップカード

<div class="d04-09-12-wrap">
          <div class="d04-09-12-stage">
            <div class="d04-09-12-card">
              <p class="d04-09-12-step">STEP 1 / 3</p>
              <p class="d04-09-12-q">ご利用目的は?</p>
              <p class="d04-09-12-hint">該当するものをお選びください</p>
            </div>
          </div>
          <div class="d04-09-12-nav">
            <button type="button" class="d04-09-12-prevbtn" disabled>戻る</button>
            <button type="button" class="d04-09-12-nextbtn">次へ</button>
          </div>
        </div>

.d04-09-12-wrap{width:min(280px,100%);display:flex;flex-direction:column;gap:14px}
        .d04-09-12-stage{perspective:700px}
        .d04-09-12-card{
          background:linear-gradient(135deg,#4a6cf7,#7c8cf8);border-radius:14px;padding:20px 18px;
          min-height:100px;box-sizing:border-box;color:#fff;transform-style:preserve-3d;
          backface-visibility:hidden;transition:transform .25s ease;display:flex;flex-direction:column;
          gap:8px;justify-content:center;
        }
        .d04-09-12-step{margin:0;font-size:10px;font-weight:700;letter-spacing:.08em;opacity:.85}
        .d04-09-12-q{margin:0;font-size:14px;font-weight:700}
        .d04-09-12-hint{margin:0;font-size:11px;opacity:.85}
        .d04-09-12-nav{display:flex;justify-content:space-between;gap:10px}
        .d04-09-12-nav button{
          padding:9px 14px;font-size:12px;font-weight:700;border-radius:8px;cursor:pointer;
          border:2px solid #d5d9e0;background:#fff;color:#444;
        }
        .d04-09-12-nextbtn{background:#4a6cf7;border-color:#4a6cf7;color:#fff}
        .d04-09-12-nav button:disabled{opacity:.4;cursor:not-allowed}

(function(){
        var root=document.getElementById('item-04-09-12');if(!root)return;
        var card=root.querySelector('.d04-09-12-card');
        var stepEl=root.querySelector('.d04-09-12-step');
        var qEl=root.querySelector('.d04-09-12-q');
        var hintEl=root.querySelector('.d04-09-12-hint');
        var prevBtn=root.querySelector('.d04-09-12-prevbtn');
        var nextBtn=root.querySelector('.d04-09-12-nextbtn');
        var steps=[
          {q:'ご利用目的は?',hint:'該当するものをお選びください'},
          {q:'ご希望の開始時期は?',hint:'目安で構いません'},
          {q:'ご確認ありがとうございました',hint:'担当者より改めてご連絡します'}
        ];
        var cur=0;
        function paintContent(){
          stepEl.textContent='STEP '+(cur+1)+' / '+steps.length;
          qEl.textContent=steps[cur].q;
          hintEl.textContent=steps[cur].hint;
          prevBtn.disabled=cur===0;
          nextBtn.textContent=cur===steps.length-1?'完了':'次へ';
        }
        function flipTo(newIdx){
          if(newIdx===cur||newIdx<0||newIdx>=steps.length)return;
          card.style.transform='rotateY(90deg)';
          setTimeout(function(){
            cur=newIdx;
            paintContent();
            card.style.transition='none';
            card.style.transform='rotateY(-90deg)';
            void card.offsetWidth;
            card.style.transition='transform .25s ease';
            card.style.transform='rotateY(0deg)';
          },250);
        }
        prevBtn.addEventListener('click',function(){flipTo(cur-1);});
        nextBtn.addEventListener('click',function(){flipTo(cur+1);});
        paintContent();
      })();