コーナーリボン

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「コーナーリボン」の効果を追加してください。

# 追加してほしい効果
コーナーリボン（バッジ & アバター）
カードの右上角に「NEW」「SALE」「限定」の斜めリボンを重ねたコーナーバッジ。リボンには定期的に光が走り、商品一覧の目印として自然に目を引きます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- コーナーリボン: カード右上に斜めリボンを重ね、overflow:hiddenで角に沿わせる -->
<div class="cards" role="list" aria-label="コーナーリボン付きカードの例">
  <article class="product-card" role="listitem">
    <span class="ribbon ribbon--new" aria-label="新着商品">NEW</span>
    <div class="product-card__thumb" aria-hidden="true"></div>
    <h3 class="product-card__title">クラウドノートアプリ</h3>
    <p class="product-card__desc">新機能を今週リリース。</p>
  </article>
  <article class="product-card" role="listitem">
    <span class="ribbon ribbon--sale" aria-label="セール中">SALE</span>
    <div class="product-card__thumb" aria-hidden="true"></div>
    <h3 class="product-card__title">デスクライト Pro</h3>
    <p class="product-card__desc">今だけ特別価格でご提供。</p>
  </article>
  <article class="product-card" role="listitem">
    <span class="ribbon ribbon--limited" aria-label="数量限定">限定</span>
    <div class="product-card__thumb" aria-hidden="true"></div>
    <h3 class="product-card__title">ハンドメイド陶器</h3>
    <p class="product-card__desc">数量限定の一点もの。</p>
  </article>
</div>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 8%, #f6f8fc 0%, #e9edf7 55%, #dbe2f2 100%);
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.product-card {
  position: relative;
  overflow: hidden; /* リボンの端をカード角に沿わせる */
  width: 188px;
  border-radius: 16px;
  background: #ffffff;
  padding: 16px 16px 18px;
  box-shadow: 0 18px 38px -18px rgba(30, 41, 59, .28), 0 2px 6px rgba(30, 41, 59, .06);
}

.product-card__thumb {
  width: 100%;
  height: 96px;
  border-radius: 10px;
  margin-bottom: 12px;
  background: linear-gradient(150deg, #dbeafe, #a5c9f5);
}
.product-card:nth-of-type(2) .product-card__thumb { background: linear-gradient(150deg, #ffe4d6, #ffb199); }
.product-card:nth-of-type(3) .product-card__thumb { background: linear-gradient(150deg, #ede1ff, #c9a8f5); }

.product-card__title {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
}
.product-card__desc {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

/* リボン本体: 斜め45度でカード右上角に重ねる */
.ribbon {
  position: absolute;
  top: 16px;
  right: -46px;
  width: 150px;
  padding: 5px 0;
  overflow: hidden;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #fff;
  transform: rotate(45deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}

.ribbon--new    { background: linear-gradient(100deg, #2563eb, #38bdf8); animation-delay: 0s; }
.ribbon--sale   { background: linear-gradient(100deg, #dc2626, #f97316); animation-delay: .6s; }
.ribbon--limited{ background: linear-gradient(100deg, #7c3aed, #f59e0b); animation-delay: 1.2s; }

/* リボンに定期的な光の反射(シャイン)を走らせて"生きて見える"演出にする */
.ribbon::after {
  content: '';
  position: absolute;
  top: 0;
  left: -160%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: ribbon-shine 3.4s ease-in-out infinite;
  animation-delay: inherit;
}

@keyframes ribbon-shine {
  0%       { left: -160%; }
  35%, 100%{ left: 160%; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon::after { animation: none !important; }
}

@media (max-width: 640px) {
  .cards { gap: 16px; }
}

【JavaScript】
// コーナーリボン: CSSのみの静的な演出のため、JSでの操作は不要。

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。