フリップカード

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

# 追加してほしい効果
フリップカード（カード & テーブル）
ホバーまたはクリックで3Dに回転し、裏面に詳細情報と申し込みボタンが現れるフリップカード。カード全体がゆっくり浮遊し、縁取りの光彩が回転し続けます。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- フリップカード: hover/クリックで3D反転、裏面に詳細とCTA -->
<div class="stage">
  <div class="fc-scene">
    <div class="fc-card" role="button" tabindex="0" aria-pressed="false" aria-label="カードをめくって詳細を見る">
      <div class="fc-card__inner">
        <div class="fc-card__face fc-card__face--front">
          <span class="fc-card__icon" aria-hidden="true">◈</span>
          <h2 class="fc-card__title">AI活用 実践講座</h2>
          <p class="fc-card__teaser">現場で使えるプロンプト設計を、4週間で身につける。</p>
          <span class="fc-card__hint">タップ / ホバーでめくる ↻</span>
        </div>
        <div class="fc-card__face fc-card__face--back">
          <h3 class="fc-card__back-title">コース詳細</h3>
          <ul class="fc-card__list">
            <li>全8回・アーカイブ視聴つき</li>
            <li>実務課題への個別フィードバック</li>
            <li>修了者コミュニティ招待</li>
          </ul>
          <p class="fc-card__price">¥28,000<span>/ 4週間</span></p>
          <button type="button" class="fc-card__cta">今すぐ申し込む</button>
        </div>
      </div>
    </div>
  </div>
</div>

【CSS】
/* フリップカード */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 20px;
  display: grid;
  place-items: center;
  font-family: "Hiragino Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 18% 20%, #372e6e 0%, transparent 50%),
    radial-gradient(circle at 84% 82%, #5b2172 0%, transparent 55%),
    #14122c;
  color: #fff;
}

.stage { display: grid; place-items: center; }

.fc-scene {
  width: min(280px, 86vw);
  height: 360px;
  perspective: 1200px;
}

.fc-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 20px;
  outline-offset: 6px;
}
/* 円形にしておくことで回転しても角が飛び出さず、なめらかな後光になる */
.fc-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #a78bfa, #f472b6, #60a5fa, #a78bfa);
  opacity: .45;
  filter: blur(28px);
  z-index: -1;
  animation: fc-spin 7s linear infinite;
}
@keyframes fc-spin { to { rotate: 360deg; } }

.fc-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
  animation: fc-float 4.5s ease-in-out infinite;
}
.fc-card:hover .fc-card__inner,
.fc-card.is-flipped .fc-card__inner { transform: rotateY(180deg); }

@keyframes fc-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.fc-card__face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

.fc-card__face--front {
  background: linear-gradient(160deg, #201c3f, #2c2555);
  border: 1px solid rgba(255, 255, 255, .1);
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}
.fc-card__icon { font-size: 30px; color: #c4b5fd; }
.fc-card__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; }
.fc-card__teaser { margin: 0; font-size: 13px; line-height: 1.7; color: #c9c6dd; }
.fc-card__hint { margin-top: auto; font-size: 11px; color: #9089c0; letter-spacing: .03em; }

.fc-card__face--back {
  background: linear-gradient(160deg, #fdf2ff, #fff);
  color: #241f38;
  transform: rotateY(180deg);
  justify-content: center;
  gap: 10px;
}
.fc-card__back-title { margin: 0 0 2px; font-size: 16px; font-weight: 800; }
.fc-card__list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.fc-card__list li { font-size: 12.5px; line-height: 1.5; padding-left: 20px; position: relative; color: #4a4560; }
.fc-card__list li::before { content: "✓"; position: absolute; left: 0; color: #8b5cf6; font-weight: 800; }
.fc-card__price { margin: 0 0 14px; font-size: 22px; font-weight: 900; color: #241f38; }
.fc-card__price span { font-size: 11.5px; font-weight: 500; color: #8a849c; margin-left: 4px; }

.fc-card__cta {
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  padding: 12px 0;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fc-card__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(139, 92, 246, .4); }

@media (prefers-reduced-motion: reduce) {
  .fc-card__inner { transition: none; animation: none; }
  .fc-card::before { animation: none; }
}

【JavaScript】
// クリック / Enter・Spaceキーで裏返しを固定トグル（hoverが効かないタッチ端末向け）
(() => {
  const card = document.querySelector('.fc-card');
  const cta = card ? card.querySelector('.fc-card__cta') : null;
  if (!card) return;

  const toggle = () => {
    const flipped = card.classList.toggle('is-flipped');
    card.setAttribute('aria-pressed', String(flipped));
  };

  card.addEventListener('click', toggle);
  card.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggle();
    }
  });

  // CTAボタンはデモなので遷移させず、裏返しの切り替えだけ止める
  if (cta) {
    cta.addEventListener('click', (e) => { e.stopPropagation(); });
  }
})();

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

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