レスポンシブ縦積みプラン

<div class="d05-02-10-stack">
          <div class="d05-02-10-card"><div class="d05-02-10-n">フリー</div><div class="d05-02-10-p">¥0<span>/月</span></div><div class="d05-02-10-d">個人でお試し</div></div>
          <div class="d05-02-10-card d05-02-10-pop"><div class="d05-02-10-badge">人気No.1</div><div class="d05-02-10-n">スタンダード</div><div class="d05-02-10-p">¥980<span>/月</span></div><div class="d05-02-10-d">中小規模におすすめ</div></div>
          <div class="d05-02-10-card"><div class="d05-02-10-n">プロ</div><div class="d05-02-10-p">¥2,980<span>/月</span></div><div class="d05-02-10-d">大規模・法人向け</div></div>
        </div>

.d05-02-10-stack{display:flex;flex-direction:column;gap:8px;width:100%;max-width:230px}
        .d05-02-10-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px;position:relative;transition:transform .2s,box-shadow .2s}
        .d05-02-10-card:hover{transform:translateX(4px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
        .d05-02-10-pop{border-color:#6366f1;background:#eef2ff}
        .d05-02-10-badge{position:absolute;top:-8px;right:10px;background:#6366f1;color:#fff;font-size:9px;padding:2px 8px;border-radius:20px}
        .d05-02-10-n{font-size:11px;font-weight:700;color:#374151}
        .d05-02-10-p{font-size:17px;font-weight:800;color:#6366f1;margin:2px 0}
        .d05-02-10-p span{font-size:10px;font-weight:400;color:#9ca3af}
        .d05-02-10-d{font-size:10px;color:#9ca3af}