body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 20px;
        }
        .header {
    background-color: #6c757d; /* ヘッダーの背景色 */
    color: white; /* テキストの色 */
    padding: 20px; /* ヘッダー内の余白 */
    text-align: center; /* 中央寄せ */
    width: 100%; /* ヘッダーを全幅に設定 */
    position: relative; /* ヘッダーの位置を相対的に設定 */
    margin: 0; /* マージンをゼロに設定 */
    box-sizing: border-box; /* パディングやボーダーの幅を含める */
}
.header h1 {
    font-size: 1.7em; /* タイトルのサイズ */
}

 .explanation {
    font-size: 1.2em; /* 説明のサイズ */
}
        .container {
            display: flex;
            flex-direction: column; /* 縦方向に並べる */
            align-items: center; /* 横方向の中央寄せ */
            text-align: center; /* テキストの中央寄せ */
        }
        .ad-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 1200px;
            margin-bottom: 10px;
        }
        .explanation2 {
            font-size: 0.8em; /* 文字サイズを小さくする（例えば80%の大きさ） */
        }
        .ad {
            width: 48%;
            height: 60px;
            background-color: #ccc;
            text-align: center;
            line-height: 60px;
        }
        .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    width: 100%;
}
    .video-container {
    position: relative; /* 親要素を基準に絶対配置するために必要 */
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    }
        video {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            flex-grow: 1;
        }
        .video-player {
        display: none;
        width: 100%;
        height: auto;
        object-fit: cover;
        }
        footer {
            margin-top: 20px;
            text-align: center;
        }

.thumbnail {
    width: 100%;
    height: 100%;
}

.play-icon {
    width: 0;
    height: 0;
    border-left: 40px solid black; /* 三角形の再生マーク */
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    cursor: pointer;
}

.video-player {
    width: 100%;
    height: auto;
}