/* youtube/index.html 専用のスタイル。
   このページからしか読み込まないので、セレクタを限定する必要はない。
   全ページ共通の指定は assets/common.css にある。 */

.v-hero{background:var(--bg-sub);position:relative;overflow:hidden;padding:32px 16px 28px;border-bottom:1px solid var(--border);}
.v-hero::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(239,68,48,0.10),rgba(239,68,48,0) 70%);right:-80px;top:-80px;}
.v-hero .inner{position:relative;max-width:var(--maxw);margin:0 auto;}
.v-hero .eyebrow{font-family:var(--font-en);font-weight:700;font-size:var(--text-xs);letter-spacing:0.22em;color:var(--primary);text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;}
.v-hero .eyebrow::before{content:"";width:24px;height:2px;background:var(--primary);}
.v-hero h1{font-size:var(--text-xl);font-weight:900;margin:0 0 8px;line-height:1.3;letter-spacing:-0.01em;}
.v-hero p{font-size:var(--text-sm);color:var(--text-sub);margin:0;line-height:1.85;}
.v-wrap{max-width:var(--maxw);margin:0 auto;padding:28px 16px 56px;}
.v-sec{margin-bottom:36px;}
.v-sec:last-of-type{margin-bottom:0;}
.v-sec h2{display:flex;align-items:center;gap:10px; font-size:var(--text-lg);font-weight:800;margin:0 0 16px;letter-spacing:0.01em;}
.v-sec h2::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--primary);}
.v-grid{display:grid;gap:18px;}
.v-card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.v-frame{position:relative;aspect-ratio:16/9;background:#000;}
.v-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.v-card .meta{padding:14px 16px 16px;}
.v-card .meta h3{font-size:var(--text-sm);font-weight:700;margin:0 0 8px;line-height:1.6;}
.v-card .time{display:inline-flex;align-items:center;gap:5px; font-family:var(--font-en);font-size:var(--text-xs);font-weight:700;color:var(--text-sub); background:var(--bg-sub);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 10px;}
.v-card .time svg{width:12px;height:12px;}
.v-more{margin-top:34px;padding-top:26px;border-top:1px solid var(--border);text-align:center;}
.v-more p{font-size:var(--text-sm);color:var(--text-sub);margin:0 0 14px;}
.v-more .btns{display:flex;flex-direction:column;gap:10px;max-width:360px;margin:0 auto;}
@media (hover:hover) and (pointer:fine){
.v-card{transition:border-color .18s;}
.v-card:hover{border-color:var(--border-strong);}
}
@media (min-width:760px){
.v-hero{padding:48px 24px 40px;}
.v-hero h1{font-size:var(--text-2xl);}
.v-hero p{font-size:var(--text-base);}
.v-wrap{padding:40px 24px 72px;}
.v-sec h2{font-size:var(--text-xl);}
.v-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
.v-card .meta h3{font-size:var(--text-base);}
.v-more .btns{flex-direction:row;justify-content:center;max-width:none;}
.v-more .btns .btn--full{width:auto;display:inline-flex;}
}
@media (min-width:1024px){
.v-grid{grid-template-columns:repeat(3,1fr);}
}