.sample-video{display:block;width:100%;max-height:54vh;object-fit:contain;background:#161616}
.video-settings{position:absolute;left:14px;top:14px;z-index:1;border-radius:20px;padding:5px 11px;background:rgba(18,18,18,.78);color:#fff;font-size:11px;pointer-events:none}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(20,20,20,.48);color:white;box-shadow:0 3px 18px #0003;pointer-events:none}
.video-play svg{margin-left:3px}
.video-duration{position:absolute;top:11px;right:11px;border-radius:5px;padding:4px 8px;background:#f5cd38;color:#161616;font-size:11px;font-weight:700;pointer-events:none}
.cat-video-meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.cat-video-meta>span{border-radius:6px;background:#fff;padding:5px 10px;font-size:12px;font-weight:700}
.cat-video-meta>span.c-free-label{background:#e8f6ed;color:#16834b}
.hs-cat-videos .c-media{aspect-ratio:16/9!important}
.cat-video-grid .c-media{aspect-ratio:16/9!important;background:#e9e5dc}
.cat-video-grid .c-media img{object-fit:contain}
.hs-cat-videos .c-tool,.cat-video-grid .c-tool{display:none}
@media(min-width:900px){.sample-video{max-height:calc(100vh - 64px)}}
@media(max-width:760px){.video-play{width:38px;height:38px}.video-duration{top:8px;right:8px;font-size:10px;padding:3px 6px}.video-settings{left:9px;top:9px;font-size:10px}.cat-video-hero h1{font-size:30px}.cat-video-hero p{font-size:13px}.cat-video-meta{margin-top:14px;gap:6px}.cat-video-meta>span{font-size:10px}}

.video-preview{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;background:#eee9de}
.c-media .video-preview{position:absolute;inset:0}
.c-media:has(.video-preview.is-playing) .video-play{opacity:0}
.cat-video-grid .video-preview{object-fit:contain;background:#e9e5dc}
.cv-img:has(.video-preview:not(.feature-motion))::after{content:'▶ AI動画';position:absolute;left:8px;bottom:8px;padding:3px 7px;border-radius:4px;background:#f5cd38;color:#171717;font-size:10px;font-weight:700}
.cv-img:has(.video-preview){position:relative}
.ai-video-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:32px;margin:24px 0 28px;padding:34px;background:#fff9e7;border:1px solid #eee3c3;border-radius:20px}
.ai-video-hero h1{margin:12px 0 18px;font-size:48px;line-height:1.2;letter-spacing:-.045em;color:#171717}
.ai-video-hero p:not(.hx-kick){font-size:15px;line-height:1.85;color:#514c3e}
.ai-video-free{display:inline-block;margin-top:12px;color:#16734a;font-size:12px;line-height:1.7;text-underline-offset:4px}
.ai-video-hero-visual{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:13px;background:#ddd6c6}
.ai-video-hero-visual>span{position:absolute;bottom:0;left:0;right:0;padding:26px 16px 12px;background:linear-gradient(transparent,#0009);font-size:12px;color:white;pointer-events:none}
.ai-video-list-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 22px}
.ai-video-list-head>div{display:flex;align-items:baseline;gap:12px}.ai-video-list-head h2{font-size:21px;margin:0}.ai-video-list-head span{font-size:12px;color:#797365}
.video-preview-toggle{flex:none;border:1px solid #dbd5c7;border-radius:7px;background:#fffdf6;padding:9px 12px;color:#504b3e;font:600 11px var(--sans);cursor:pointer}
.video-preview-toggle:hover{background:#fff0b2}
@media(max-width:760px){.ai-video-hero{grid-template-columns:1fr;gap:20px;padding:23px 20px;margin:16px 0 23px;border-radius:15px}.ai-video-hero h1{font-size:34px;margin:8px 0 12px}.ai-video-hero p:not(.hx-kick){font-size:13px}.ai-video-free{font-size:11px;margin-top:8px}.ai-video-hero-visual{border-radius:9px}.ai-video-list-head{gap:12px;align-items:flex-start;margin-bottom:17px}.ai-video-list-head>div{display:block}.ai-video-list-head h2{font-size:17px;margin-bottom:5px}.ai-video-list-head span{font-size:10px}.video-preview-toggle{font-size:10px;padding:8px 9px}.cv-img:has(.video-preview:not(.feature-motion))::after{font-size:8px;left:5px;bottom:5px;padding:2px 4px}}

/* Keep membership labels readable without covering the moving scene. */
.c-media:has(.video-preview) .c-lock{top:auto;bottom:8px;left:8px;padding:4px 7px;border-radius:5px;box-shadow:none;align-items:center}
.c-media:has(.video-preview) .c-lock small{display:none}
.c-media:has(.video-preview) .c-lock b{font-size:10px;line-height:1.3}
.c-media:has(.video-preview) .c-lock .ico{width:10px;height:10px;margin:0}
@media(max-width:719px){.c-media:has(.video-preview) .c-lock b{font-size:8px}.c-media:has(.video-preview) .c-lock{left:6px;bottom:6px;padding:3px 5px}}