/*
Theme Name: Video Board
*/

/* ======================
   基本
====================== */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:sans-serif;
background:#f5f5f5;
color:#222;
}

/* ======================
   ヘッダー
====================== */

header{
background:#000;
color:#fff;
padding:20px;
}

header h1{
margin:0;
font-size:24px;
}

nav{
margin-top:10px;
}

nav a{
color:#fff;
text-decoration:none;
margin-right:15px;
font-size:14px;
}

/* ======================
   コンテンツ
====================== */

.container{
max-width:1100px;
margin:auto;
padding:20px;
}

/* ======================
   動画一覧
====================== */

.video-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.video-card{
display:block;
background:#fff;
border-radius:10px;
overflow:hidden;
text-decoration:none;
color:#000;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
transition:0.2s;
}

.video-card:hover{
transform:translateY(-3px);
}

/* サムネ */

.video-thumb{
position:relative;
}

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

/* 再生アイコン */

.play-icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:40px;
background:rgba(0,0,0,0.6);
color:#fff;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

/* タイトル */

.video-title{
padding:10px;
font-weight:bold;
font-size:15px;
}

/* ======================
   動画ページ
====================== */

.video-page{
max-width:900px;
margin:auto;
padding:20px;
}

.video-player{
position:relative;
}

/* サムネ動画 */

#thumbVideo{
width:100%;
border-radius:10px;
background:#000;
}

/* 再生動画 */

#mainVideo{
width:100%;
border-radius:10px;
}

/* 再生ボタン */

.play-button{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:70px;
background:rgba(0,0,0,0.6);
color:white;
width:90px;
height:90px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

/* 動画タイトル */

.video-page h2{
margin-top:20px;
}

/* コメント */

.video-content{
margin-top:10px;
}

/* ======================
   投稿ページ
====================== */

.upload-page{
width:100%;
max-width:700px;
margin:40px auto;
padding:25px;
background:#fff;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.upload-page form{
display:flex;
flex-direction:column;
gap:18px;
}

.upload-page label{
font-weight:600;
}

.upload-page input[type="text"],
.upload-page textarea,
.upload-page input[type="file"]{
width:100%;
padding:12px;
font-size:16px;
border:1px solid #ccc;
border-radius:6px;
}

.upload-page textarea{
min-height:140px;
resize:vertical;
}

.upload-page button{
padding:14px;
font-size:16px;
background:#000;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
}

.upload-page button:hover{
background:#333;
}

/* ======================
   フッター
====================== */

footer{
text-align:center;
padding:30px;
color:#777;
}

/* ======================
   スマホ
====================== */

@media(max-width:800px){

.video-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:500px){

.video-grid{
grid-template-columns:1fr;
}

.play-icon{
width:50px;
height:50px;
font-size:30px;
}

.play-button{
width:70px;
height:70px;
font-size:50px;
}

.upload-page{
margin:20px 15px;
}

}
/* 投稿ページ */

.upload-page{
max-width:650px;
margin:40px auto;
padding:20px;
background:white;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.form-group{
display:flex;
flex-direction:column;
margin-bottom:18px;
}

.upload-page input,
.upload-page textarea{
width:100%;
padding:12px;
font-size:16px;
border:1px solid #ccc;
border-radius:6px;
box-sizing:border-box;
}

.upload-page textarea{
min-height:130px;
resize:vertical;
}

.upload-page button{
width:100%;
padding:14px;
background:black;
color:white;
border:none;
border-radius:6px;
font-size:16px;
cursor:pointer;
}

.upload-page button:hover{
background:#333;
}

.upload-page{
padding-bottom:120px;
margin-bottom:120px;
}
/* フォームはみ出し完全修正 */

.upload-page{
width:90%;
max-width:650px;
margin:40px auto;
padding:20px;
background:#fff;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
overflow:hidden;
}

.upload-page input,
.upload-page textarea,
.upload-page input[type="file"]{
width:100%;
max-width:100%;
display:block;
padding:12px;
border:1px solid #ccc;
border-radius:6px;
font-size:16px;
box-sizing:border-box;
}

.upload-page textarea{
min-height:130px;
resize:vertical;
}

.upload-page button{
width:100%;
padding:14px;
background:black;
color:white;
border:none;
border-radius:6px;
font-size:16px;
cursor:pointer;
}
.video-thumb{
position:relative;
}

.video-thumb video{
width:100%;
display:block;
background:#000;
}

.play-icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:40px;
background:rgba(0,0,0,0.6);
color:#fff;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
}
.thumb-img{
width:100%;
height:auto;
display:block;
}