/* CCNこども文化祭（試作 2026-09-23）— hub.css の上に重ねる */
.fest-hero{position:relative;min-height:720px;padding:150px 6vw 90px;background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;overflow:hidden}
.fest-hero .kicker{color:var(--accent)}
.fest-hero h1{margin:22px 0 0;font-family:var(--serif);font-size:clamp(2rem,3.5vw,3.3rem);font-weight:500;line-height:1.4;letter-spacing:.025em}
.fest-hero .fest-name{display:block;margin:0 0 14px;font-family:var(--serif);font-size:1.05rem;letter-spacing:.12em;color:rgba(255,255,255,.8)}
.fest-hero .hero-lead{max-width:540px;margin:26px 0 36px;font-family:var(--serif);line-height:2.05;color:rgba(255,255,255,.86)}
.fest-actions{display:flex;flex-wrap:wrap;gap:14px 30px}
.fest-actions a{color:#fff}
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0;list-style:none}
.mosaic li{aspect-ratio:16/9;overflow:hidden;background:#1c2521}
.mosaic li:first-child{grid-column:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover}
.fest-note{margin:0;font-size:.72rem;color:rgba(255,255,255,.55)}

.origin{display:grid;grid-template-columns:.72fr 1.28fr;gap:8vw}
.origin .prose p{font-family:var(--serif);font-size:1.06rem}
.origin-facts{margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.origin-facts li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.95rem}

.theme-nav{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.theme-nav a{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--line);border-radius:99px;background:#fff;text-decoration:none;font-family:var(--serif)}
.theme-nav a:hover{background:var(--soft)}
.theme-nav small{font-family:var(--sans);font-size:.7rem;color:var(--muted)}

.works{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.work{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line)}
.work-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.work-thumb img{width:100%;height:100%;object-fit:cover}
.work-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px}
.work-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.7rem;letter-spacing:.08em;color:var(--muted)}
.work-meta span+span::before{content:"／";margin-right:14px;color:var(--line)}
.work h3{margin:14px 0 8px;font-family:var(--serif);font-size:1.22rem;font-weight:500;line-height:1.55}
.work p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.85}
.work-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:auto;padding-top:22px}
.work-links a{font-size:.86rem;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.work-links a::after{content:" →";color:var(--accent)}
.work-links a:hover{border-bottom-color:var(--ink)}
.work-group{margin-top:64px}
.work-group:first-child{margin-top:0}
.work-group>h3{margin:0 0 22px;font-family:var(--serif);font-size:1.3rem;font-weight:500}

.try-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.try-list li{padding:28px 30px;background:#fff;display:flex;flex-direction:column}
.try-list small{font-size:.66rem;letter-spacing:.14em;color:var(--muted)}
.try-list strong{display:block;margin:14px 0 8px;font-family:var(--serif);font-size:1.12rem;font-weight:500;line-height:1.6}
.try-list p{margin:0;color:var(--muted);font-size:.88rem}
.try-list li:last-child:nth-child(odd){grid-column:span 2}
.try-list a{align-self:flex-start;margin-top:16px;font-size:.84rem;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.try-list a::after{content:" →";color:var(--accent)}

.next-principles{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.next-principles li{padding:26px 28px;border:1px solid rgba(255,255,255,.22);font-family:var(--serif);font-size:1.05rem;line-height:1.7}
.next-notice{margin:44px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.75)}

/* 作品の詳細 */
.detail-head{padding:150px 6vw 60px;background:var(--ink);color:#fff}
.detail-head .kicker{color:var(--accent)}
.detail-head h1{margin:18px 0 0;font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.8rem);font-weight:500;line-height:1.45}
.detail-head .work-meta{margin-top:20px;color:rgba(255,255,255,.65)}
.crumbs{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:.74rem;color:rgba(255,255,255,.65)}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{text-decoration:none}
.video{max-width:960px;margin:0 auto;aspect-ratio:16/9;background:#000;position:relative}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-alt{max-width:960px;margin:16px auto 0;color:var(--muted);font-size:.86rem}
.detail-grid{max-width:960px;margin:0 auto}
.detail-block{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:34px 0;border-bottom:1px solid var(--line)}
.detail-block:first-child{border-top:1px solid var(--line)}
.detail-block h2{margin:0;font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;font-weight:500;color:var(--muted)}
.detail-block p{margin:0 0 .8em;line-height:2}
.detail-block p:last-child{margin-bottom:0}
.detail-block ul{margin:0;padding-left:1.2em;line-height:2}
.quote{margin:0;padding:22px 26px;background:var(--soft);font-family:var(--serif);font-size:1.12rem;line-height:2.1}
.quote+.quote{margin-top:14px}
.source{display:block;margin-top:12px;font-size:.78rem;color:var(--muted)}
.question{font-family:var(--serif);font-size:1.3rem;line-height:1.8}
.detail-block a{text-underline-offset:4px}

@media(max-width:900px){.try-list li:last-child:nth-child(odd){grid-column:auto}.fest-hero{grid-template-columns:1fr;padding-top:130px}.origin{grid-template-columns:1fr;gap:30px}.works{grid-template-columns:repeat(2,1fr)}.try-list,.next-principles{grid-template-columns:1fr}.detail-block{grid-template-columns:1fr;gap:12px}}
@media(max-width:560px){.fest-hero{min-height:0;padding:120px 22px 64px}.works{grid-template-columns:1fr}.detail-head{padding:120px 22px 44px}.try-list li{padding:24px 22px}}

/* 再生前は作品の静止画（押すまで YouTube を読み込まない） */
.video-facade{position:absolute;inset:0;display:block;cursor:pointer;background:#000}
.video-facade img{width:100%;height:100%;object-fit:contain}
.video-facade .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(17,23,20,.78);border:2px solid #fff;transition:transform .2s,background .2s}
.video-facade .play::after{content:"";position:absolute;left:34px;top:26px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff}
.video-facade:hover .play,.video-facade:focus-visible .play{transform:scale(1.08);background:rgba(17,23,20,.92)}

/* 入口の作り直し（2026-09-23 井本様のご指摘） */
.fest-hero-text{min-height:640px}
.fest-kinds{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;align-content:center}
.fest-kinds li{padding:10px 18px;border:1px solid rgba(255,255,255,.3);border-radius:99px;font-family:var(--serif);font-size:1rem;color:rgba(255,255,255,.9)}
.ideas .room small{color:var(--accent)}
.ideas .idea-meta{margin-top:12px;font-size:.78rem;line-height:1.8;color:var(--muted)}
#join .status{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.35)}
/* 画像（09-23 井本様「ヒーロー画像と各パートの画像」） */
.fest-hero-media{position:absolute;inset:0;background:url(/terakoya/bunkasai/assets/ideas/hero.jpg) center/cover no-repeat}
.fest-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,14,12,.9),rgba(8,14,12,.66) 42%,rgba(8,14,12,.32))}
.fest-hero>div:not(.fest-hero-media),.fest-hero .fest-kinds{position:relative;z-index:1}
.ideas .room{padding-top:0;overflow:hidden}
.ideas .idea-img{display:block;margin:0 -24px 20px;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.ideas .idea-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ideas .room:hover .idea-img img{transform:scale(1.03)}
@media(max-width:560px){.fest-hero-media:after{background:linear-gradient(0deg,rgba(8,14,12,.9),rgba(8,14,12,.62))}}
