/* =========================================
/ 動画① /
   ========================================= */
.video-cover-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px; /* 好みの幅で */
    margin: 0 auto;
    border-radius: 12px; /* 角丸 */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* 影で浮かせる */
}

/* 画像を暗くして文字やボタンを目立たせる */
.video-thumb {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.video-cover-wrapper:hover .video-thumb {
    transform: scale(1.05); /* ホバーで少しズーム */
}

/* 再生ボタンの円 */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

/* ホバー時のボタンの動き */
.video-cover-wrapper:hover .play-btn {
    background: #0073e6; /* ブランドカラーに */
    transform: translate(-50%, -50%) scale(1.1);
}

/* 三角形 */
.play-btn .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #333; /* 三角の色 */
    margin-left: 5px; /* 真ん中調整 */
    transition: border-color 0.3s ease;
}

.video-cover-wrapper:hover .triangle {
    border-color: transparent transparent transparent #fff; /* ホバーで白に */
}

/* =========================================
/ 動画② /
   ========================================= */
/* PCっぽい枠組み */
.mockup-device {
    max-width: 700px;
    margin: 40px auto;
}

/* 画面部分 */
.mockup-device .screen {
    background: #000;
    border: 12px solid #333; /* ベゼル（枠） */
    border-radius: 10px 10px 0 0;
    position: relative;
    overflow: hidden;
}

.mockup-device video {
    width: 100%;
    display: block;
}

/* PCの土台部分 */
.mockup-device .base {
    height: 20px;
    background: #e0e0e0;
    border-radius: 0 0 10px 10px;
    position: relative;
    width: 110%; /* 画面より少し広く */
    left: -5%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 土台のくぼみ（MacBook風） */
.mockup-device .base::before {
    content: "";
    display: block;
    width: 15%;
    height: 4px;
    background: #ccc;
    margin: 0 auto;
    border-radius: 0 0 4px 4px;
}