SNSで人気の動画

About

.video-thumbs-container { display: flex; flex-wrap: nowrap; gap: 10px; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .video-thumb-wrap { position: relative; cursor: pointer; display: inline-block; width: 300px; flex-shrink: 0; } @media (max-width: 768px) { .video-thumb-wrap { width: 45vw; } } .video-thumb-wrap img { width: 100%; display: block; border-radius: 8px; } .video-thumb-wrap::after { content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; color: white; text-shadow: 0 0 20px rgba(0,0,0,0.8); pointer-events: none; } .modal-overlay-v2 { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 999999; justify-content: center; align-items: center; padding: 180px 20px 40px !important; } @media (max-width: 768px) { .modal-overlay-v2 { padding: 100px 10px 40px !important; overflow-y: visible; align-items: flex-start; } } .modal-overlay-v2.active { display: flex !important; } .modal-container-v2 { position: relative; width: 100%; max-width: 790px !important; height: 715px !important; background: #fff; border-radius: 12px; display: flex; flex-direction: row; overflow: hidden; } @media (max-width: 768px) { .modal-container-v2 { flex-direction: column; height: 70vh !important; max-height: 70vh !important; width: 90% !important; border-radius: 12px; margin: 0 auto 40px; overflow: hidden; } } .modal-video-v2 { flex-shrink: 0; background: #fff; width: 360px !important; height: 100% !important; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .modal-video-v2 { width: 100% !important; height: auto !important; aspect-ratio: 9 / 16 !important; max-height: 50vh !important; flex-shrink: 0; } } .modal-video-v2 video { width: 100%; height: 100%; object-fit: contain; } .modal-products-v2 { flex: 1; padding: 20px; overflow-y: auto; height: