/* ===== 2026-10-05 事例カードの動画化（投稿ページと固定ページ32・34の共通）の見た目 =====
   挿入は assets/js/card-video.js（岡田さんの原文もそちら）。同日昼に single.css に足したブロックをここへ移した。
   top.css 409〜468行（トップのカード動画）の写し。top.css は投稿・固定ページでは読まれないため。
   **直すときは top.css の同じブロックも直す。**
   画像は残したまま上に動画を被せる＝レイアウトは画像が保持し、読めない環境では画像のまま。
   読み込み＝投稿ページと固定ページ32・34（functions.php gasp_customize_assets）。戻すときは読み込みを消す */
.gasp-card-movie {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--gasp-r-12);
}
.gasp-card-movie > .gasp-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--gasp-r-12);
    opacity: 0;
    transition: opacity 0.4s, transform 0.8s;
    filter: brightness(0.6) saturate(0.85);
    pointer-events: none;
}
.gasp-card-movie.gasp-card-playing > .gasp-card-video {
    opacity: 1;
}
.gasp-card-movie.gasp-card-playing img {
    visibility: hidden;
}
.gasp-card-movie.gasp-card-playing:hover > .gasp-card-video {
    transform: scale(1.1);
}
.gasp-card-movie > .gasp-card-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gasp-sp-8) var(--gasp-sp-16);
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: var(--gasp-fs-20);
    line-height: var(--gasp-lh-tight);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 1;
}
.gasp-card-movie.gasp-card-playing > .gasp-card-title {
    opacity: 1;
}
/* ===== 2026-10-05 事例カードの動画化 ここまで ===== */