/* =========================================
XvieyHUB style.css 最終完全版
全ページカード対応
スマホ2列
========================================= */


/* ===== Reset ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}


/* ===== Base ===== */

body{
background:#000;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
line-height:1.6;
}

img, iframe, video{
max-width:100%;
height:auto;
display:block;
}


/* ===== Header ===== */

.site-header{
padding:18px 16px 12px;
border-bottom:1px solid #222;
text-align:center;
}

.brand-title{
font-size:30px;
font-weight:900;
}

.brand-sub{
margin-top:4px;
font-size:14px;
color:#aaa;
}


/* ===== Navigation ===== */

.categories{
margin-top:12px;
display:flex;
justify-content:center;
gap:22px;
flex-wrap:wrap;
}

.categories a{
color:#fff;
text-decoration:none;
font-weight:800;
font-size:18px;
padding:6px 8px;
border-bottom:2px solid transparent;
}

.categories a:hover{
border-bottom-color:#fff;
}


/* ===== Main ===== */

.site-main{
padding:16px;
max-width:1100px;
margin:0 auto;
}


/* ===== Section Title ===== */

.latest-videos h2{
text-align:center;
font-size:34px;
font-weight:900;
margin:18px 0 16px;
}


/* ===== Video Grid ===== */

.video-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:14px;
}


/* =========================================
カード枠（全構造対応）
========================================= */

.video,
.video-card-link{
display:block;
background:#111;
border:1px solid #333;
border-radius:10px;
padding:14px;
text-decoration:none;
color:#fff;
transition:0.2s;
}

.video-card-link:hover{
border-color:#ff2a6d;
transform:translateY(-2px);
}

.video{
display:flex;
flex-direction:column;
gap:6px;
}


/* ===== Card Text ===== */

.video-title{
font-size:15px;
line-height:1.35;
margin-bottom:6px;
font-weight:700;
}

.video-meta{
font-size:12px;
color:#aaa;
margin-bottom:10px;
}

.video-footnote{
margin-top:10px;
font-size:12px;
color:#bbb;
line-height:1.35;
}


/* ===== CTA Button ===== */

.cta{
display:inline-block;
width:100%;
text-align:center;
padding:10px 12px;
border-radius:8px;
border:1px solid #444;
background:#000;
color:#fff;
font-weight:700;
font-size:14px;
}


/* ===== Notice ===== */

.notice{
margin-top:18px;
padding:12px;
border:1px solid #222;
color:#bbb;
font-size:13px;
}


/* ===== Footer ===== */

.site-footer{
border-top:1px solid #222;
text-align:center;
padding:18px 0 22px;
color:#bbb;
font-size:14px;
margin-top:24px;
}


/* ===== Responsive ===== */

@media (max-width:768px){

.brand-title{
font-size:26px;
}

.latest-videos h2{
font-size:28px;
}

.categories a{
font-size:16px;
}

}


/* =========================================
Age Gate
========================================= */

#age-gate{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.96);
z-index:2147483647;
display:none;
align-items:center;
justify-content:center;
}

body.age-lock{
overflow:hidden;
}

.age-gate-inner{
background:#111;
border:1px solid #333;
padding:24px;
width:90%;
max-width:420px;
text-align:center;
color:#fff;
}

.age-gate-inner h2{
font-size:20px;
margin-bottom:12px;
}

.age-gate-inner p{
font-size:15px;
color:#ddd;
line-height:1.7;
}

.age-buttons{
margin-top:20px;
display:flex;
flex-direction:column;
gap:12px;
}

#age-yes{
width:100%;
padding:14px;
font-size:16px;
font-weight:900;
background:#c00;
color:#fff;
border:none;
border-radius:8px;
cursor:pointer;
}

.age-no{
display:block;
color:#aaa;
font-size:14px;
text-decoration:underline;
}