カード→詳細のモーフ
一覧のカードを押すと、その位置と大きさを計測して枠いっぱいの詳細へ拡大する（FLIP）。閉じると同じ経路で元のカードへ戻るので、どこから来たかを見失わない。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 拡大は「新しい画面を出す」のでなく「同じ要素が大きくなる」。位置の連続性が、戻る場所の記憶になる
- transform-origin を左上に固定し、translate と scale を同時に補間する。中心基準だと途中で位置がずれて見える
- 拡大 400ms に対して縮小は 300ms。行きは見せ場、帰りは片付けなので短くする
- 詳細の本文は拡大が終わってからフェードで出す。拡大中に文字が引き伸ばされるのを見せない
コード（コピーして使えます）
<div class="lm-stage" id="lmStage">
<button class="lm-close" id="lmClose" type="button" aria-label="閉じる">×</button>
<div class="lm-grid">
<div class="lm-card" role="button" tabindex="0" style="--lm-c:#2b50c7" data-title="予約管理" data-body="店舗の予約台帳をクラウド化。空き枠の自動提案で、電話対応が月 40 時間減りました。">
<span class="lm-thumb"></span><span class="lm-name">予約管理</span>
</div>
<div class="lm-card" role="button" tabindex="0" style="--lm-c:#c7692b" data-title="在庫アラート" data-body="発注点を下回った品目だけを毎朝通知。欠品による機会損失を四半期で 12% 減らしました。">
<span class="lm-thumb"></span><span class="lm-name">在庫アラート</span>
</div>
<div class="lm-card" role="button" tabindex="0" style="--lm-c:#2b8a5c" data-title="請求書の自動化" data-body="納品データから請求書を生成し、期日にメール送付。手作業の転記ミスがゼロになりました。">
<span class="lm-thumb"></span><span class="lm-name">請求書の自動化</span>
</div>
<div class="lm-card" role="button" tabindex="0" style="--lm-c:#8a2b6e" data-title="シフト調整" data-body="希望シフトの収集から確定までをアプリ内で完結。店長の調整時間が週 5 時間から 1 時間に。">
<span class="lm-thumb"></span><span class="lm-name">シフト調整</span>
</div>
</div>
<div class="lm-detail" id="lmDetail" aria-live="polite">
<h3 class="lm-title" id="lmTitle"></h3>
<p class="lm-body" id="lmBody"></p>
</div>
</div>