/* ============================================================
   共有セクション（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;
  --shd-sky-deep:#1F6F8A;   /* 白背景の小さめ文字でAAを満たすスカイ（#2A8FAF は 3.7:1 で不足） */
  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; }

/* ── お知らせ ── */
.shd .news-item{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;}
.shd .news-meta{display:flex;flex-direction:column;gap:7px;flex:0 0 auto;min-width:96px;}
.shd .news-date{font-size:13px;font-weight:700;color:var(--shd-muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.shd .news-tag{display:inline-block;align-self:flex-start;white-space:nowrap;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--shd-sky-pale);color:var(--shd-sky-deep);border:1px solid rgba(53,174,206,.32);}
.shd .news-title{font-size:16px;font-weight:700;line-height:1.6;color:var(--shd-ink);margin-bottom:6px;}
.shd .news-body{font-size:13.5px;line-height:1.85;color:var(--shd-muted);margin-bottom:10px;}
.shd .news-source{font-size:12px;color:var(--shd-muted);margin-bottom:10px;}
.shd .news-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--shd-sky-deep);}
.shd .news-link:hover{text-decoration:underline;}
@media (max-width:560px){
  .shd .news-item{flex-direction:column;gap:10px;padding:18px;}
  .shd .news-meta{flex-direction:row;align-items:center;gap:10px;}
}