フェードクロス診断カード

<div class="d04-09-04-wrap">
          <div class="d04-09-04-stack">
            <div class="d04-09-04-card is-active">
              <span class="d04-09-04-qnum">Q1</span>
              <p class="d04-09-04-qtext">好きな作業スタイルは?</p>
              <div class="d04-09-04-opts">
                <button type="button" class="d04-09-04-opt">集中して一人で</button>
                <button type="button" class="d04-09-04-opt">チームで相談しながら</button>
              </div>
            </div>
            <div class="d04-09-04-card">
              <span class="d04-09-04-qnum">Q2</span>
              <p class="d04-09-04-qtext">得意な分野は?</p>
              <div class="d04-09-04-opts">
                <button type="button" class="d04-09-04-opt">企画・戦略</button>
                <button type="button" class="d04-09-04-opt">デザイン・制作</button>
              </div>
            </div>
            <div class="d04-09-04-card">
              <span class="d04-09-04-qnum">RESULT</span>
              <p class="d04-09-04-qtext">診断結果</p>
              <p class="d04-09-04-result">あなたは「戦略デザイナー」タイプです。</p>
            </div>
          </div>
          <div class="d04-09-04-dots">
            <span class="d04-09-04-dot is-active"></span><span class="d04-09-04-dot"></span><span class="d04-09-04-dot"></span>
          </div>
        </div>

.d04-09-04-wrap{width:min(280px,100%)}
        .d04-09-04-stack{position:relative;min-height:160px}
        .d04-09-04-card{
          position:absolute;inset:0;opacity:0;transform:translateY(8px);
          transition:opacity .35s ease,transform .35s ease;pointer-events:none;
          display:flex;flex-direction:column;align-items:center;text-align:center;
          justify-content:center;gap:8px;
        }
        .d04-09-04-card.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
        .d04-09-04-qnum{
          font-size:10px;font-weight:700;color:#4a6cf7;background:#eef2ff;
          padding:2px 10px;border-radius:99px;
        }
        .d04-09-04-qtext{margin:0;font-size:14px;color:#333;font-weight:700}
        .d04-09-04-opts{display:flex;flex-direction:column;gap:8px;width:min(220px,100%)}
        .d04-09-04-opt{
          padding:10px 12px;font-size:13px;color:#444;background:#fff;
          border:2px solid #d5d9e0;border-radius:8px;cursor:pointer;transition:border-color .2s,color .2s;
        }
        .d04-09-04-opt:hover{border-color:#4a6cf7;color:#4a6cf7}
        .d04-09-04-result{margin:0;font-size:14px;font-weight:700;color:#1c7c4e}
        .d04-09-04-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
        .d04-09-04-dot{width:6px;height:6px;border-radius:50%;background:#e4e8ef;transition:background .3s,transform .3s}
        .d04-09-04-dot.is-active{background:#4a6cf7;transform:scale(1.3)}

(function(){
        var wrap=document.querySelector('.d04-09-04-wrap');
        if(!wrap)return;
        var cards=wrap.querySelectorAll('.d04-09-04-card');
        var dots=wrap.querySelectorAll('.d04-09-04-dot');
        var cur=0;
        function paint(){
          cards.forEach(function(c,i){c.classList.toggle('is-active',i===cur);});
          dots.forEach(function(d,i){d.classList.toggle('is-active',i===cur);});
        }
        wrap.querySelectorAll('.d04-09-04-opt').forEach(function(btn){
          btn.addEventListener('click',function(){
            if(cur<cards.length-1){cur++;paint();}
          });
        });
      })();