/* ============================================================
   共有セクション（KGC意匠を「正」とする自己完結スタイル）
   両ページ(kgc2026 / MCHackathon2026)で共通利用。
   すべて .shd 配下にスコープしているため、各ページ独自CSSと衝突しない。
   フラグメント本体は shared-sections.js。変更はこの2ファイルだけで両ページ同期。
============================================================ */
.shd{
  --shd-sky:#35AECE; --shd-sky-dark:#2A8FAF; --shd-sky-pale:#EAF7FC;
  --shd-ink:#1A3A4A; --shd-muted:#4A7A8A; --shd-surface-tint:#EAF7FC;
  font-family:'Noto Sans JP','M PLUS Rounded 1c',sans-serif;
  color:var(--shd-ink);
}
.shd h2,.shd h3,.shd .font-heading{ font-family:'M PLUS Rounded 1c','Noto Sans JP',sans-serif; }
.shd .section-tag{
  display:inline-flex;align-items:center;gap:8px;color:var(--shd-sky);
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
}
.shd .clay-white{
  background:#fff;border-radius:20px;border:3px solid rgba(255,255,255,.9);
  box-shadow:4px 4px 10px rgba(53,174,206,.12),inset -2px -2px 6px rgba(0,0,0,.04);
}
.shd .btn-charcoal{ background:#383B42;color:#fff;transition:all .2s ease;cursor:pointer; }
.shd .btn-charcoal:hover{ background:#2A2D33;transform:translateY(-2px); }
.shd .shd-ghost{ background:transparent;border:1.5px solid var(--shd-sky);color:var(--shd-sky); }
.shd .shd-line{ background:#06C755;color:#fff; }
.shd a{ text-decoration:none; }
.shd a:focus-visible,.shd button:focus-visible{ outline:3px solid var(--shd-sky);outline-offset:2px;border-radius:6px; }
/* チラシ枠（全貌表示） */
.shd .flyer-frame{ border-radius:16px;overflow:hidden;border:3px solid #fff;box-shadow:3px 3px 8px rgba(53,174,206,.12);background:#fff; }
.shd .flyer-frame img{ width:100%;height:auto;display:block; }
@media (prefers-reduced-motion: reduce){
  .shd *{ transition-duration:.001ms !important; }
}

/* ── Scenes（当日の様子・自動スクロールギャラリー）── */
.shd .kgc-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.shd .kgc-track{display:flex;width:max-content;padding:6px 0;animation:kgcMarquee 46s linear infinite;}
.shd .kgc-marquee:hover .kgc-track{animation-play-state:paused;}
.shd .kgc-shot{flex:0 0 auto;width:clamp(240px,30vw,360px);aspect-ratio:4/3;margin-right:18px;border-radius:22px;overflow:hidden;border:3px solid #fff;box-shadow:4px 6px 18px rgba(53,174,206,.20);background:#EAF7FC;}
.shd .kgc-shot img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes kgcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.shd .kgc-track{animation:none;overflow-x:auto;max-width:100%;}}

/* ── 詳細度の補強（Tailwind CDN の preflight に負けないように）── */
.shd .clay-white,
.shd div.clay-white,
.shd a.clay-white{
  background:#fff !important;
  border-radius:20px !important;
  border:3px solid rgba(255,255,255,.9) !important;
  box-shadow:4px 4px 10px rgba(53,174,206,.12), inset -2px -2px 6px rgba(0,0,0,.04) !important;
}
.shd .btn-charcoal{ background:#383B42 !important; color:#fff !important; }
.shd .shd-ghost{ border:1.5px solid var(--shd-sky) !important; color:var(--shd-sky) !important; background:transparent !important; }
.shd .shd-line{ background:#06C755 !important; color:#fff !important; }