リボン付きCTAカード

<div class="d01-02-05-card">
          <span class="d01-02-05-ribbon">期間限定</span>
          <h4 class="d01-02-05-title">プレミアムプラン</h4>
          <p class="d01-02-05-price"><b>¥980</b>/月</p>
          <p class="d01-02-05-note">通常¥1,980のところ今だけ半額。いつでも解約OK。</p>
          <a href="#" class="d01-02-05-btn" onclick="return false">申し込む</a>
        </div>

.prev.d01-02-05{background:#f1f5f9}
        .d01-02-05-card{position:relative;width:100%;max-width:280px;padding:32px 26px;border-radius:16px;background:#fff;text-align:center;box-shadow:0 8px 24px rgba(15,23,42,.1);overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
        .d01-02-05-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(15,23,42,.2)}
        .d01-02-05-ribbon{position:absolute;top:16px;right:-40px;transform:rotate(45deg);background:linear-gradient(90deg,#ef4444,#f97316);color:#fff;font-size:11px;font-weight:700;padding:5px 46px;box-shadow:0 4px 10px rgba(239,68,68,.35)}
        .d01-02-05-title{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:10px}
        .d01-02-05-price{font-size:14px;color:#64748b;margin-bottom:12px}
        .d01-02-05-price b{font-size:34px;color:#0f172a}
        .d01-02-05-note{font-size:12px;color:#94a3b8;line-height:1.7;margin-bottom:20px}
        .d01-02-05-btn{display:inline-block;width:100%;box-sizing:border-box;padding:12px;border-radius:10px;background:#0f172a;color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:background .2s ease}
        .d01-02-05-btn:hover{background:#334155}