/*
Theme Name:rsotheme
*/

body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
 background-color: #f4f4f4;
}

header {
 background-color: #333;
 color: #fff;
 padding: 10px 0;
 text-align: center;
}

main {
 padding: 20px;
}

h2 {
 color: #333;
}

.video-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px;
}

.video-item {
 flex: 1 1 300px; /* 幅は300px、1行に収まる数は画面幅に応じて調整 */
 max-width: 560px;
 margin-bottom: 20px;
 position: relative;
 overflow: hidden; /* 画像がはみ出さないように */
}

/* 動画を100%にしてレスポンシブ対応 */
.video-item video {
 width: 100%;
 height: auto;
}


.thumbnail {
 width: 100%;
 height: auto;
 display: block;
 transition: 0.3s ease-in-out;
}

.video-item a {
 position: relative;
 display: block;
}

.video-item a .overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease-in-out;
 text-align: center;
 font-size: 18px;
 padding: 10px;
}

.video-item:hover .thumbnail {
 filter: brightness(0.6); /* 画像を暗くする */
}

.video-item:hover .overlay {
 opacity: 1; /* hover時にタイトルを表示 */
}