/* =========================
   0) Base / Reset
========================= */
* { box-sizing: border-box; }

:root{
  --bg: #fffbe6;
  --bg-strong: #fff3b0;
  --bg-hero: #fff9cc;
  --text: #111827;
  --text-sub: #374151;
  --accent: #b91c1c;
  --accent-2: #dc2626;
  --border: #e5e7eb;
  --yellow-frame: #fde047;

  /* unified components */
  --card-radius: 20px;
  --card-pad: 32px;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}

/* =========================
   1) Body / Typography
========================= */
body{
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
}

/* Tailwindの white 系を黒に戻す */
.text-white,
.text-white\/90{
  color: var(--text) !important;
}

/* =========================
   2) Site Header (nav bar)
========================= */
.site-header{
  background: var(--bg-strong);
  border-bottom: 3px solid var(--accent-2);
  font-family: "Poppins", sans-serif;
}

/* =========================
   3) Page Hero (title area)
========================= */
section.text-center{
  background: var(--bg-hero);
}

section.text-center h1{
  color: var(--accent);
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

section.text-center p{
  font-size: 1.1rem;
  color: var(--text-sub);
}

/* =========================
   4) Unified Layout Components
   - ここが「協賛ページのかっこよさ」を両ページに適用する本体
========================= */
.page-card{
  background: #fff;
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow);
}

.section-block{
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.section-block:first-child{ padding-top: 0; }
.section-block:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

/* “アニガる！とは”みたいなセクション見出しを統一 */
.section-title{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 6px solid var(--accent);
  color: var(--accent);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
}

/* セクションの導入文（薄い説明文） */
.section-lead{
  color: var(--text-sub);
  margin: 0 0 14px;
}

/* =========================
   5) Main Card / Content
========================= */
/* Tailwind bg-white/20 を白カードに置換（旧構造の互換用） */
.bg-white\/20{
  background: #fff;
  color: var(--text);
  backdrop-filter: none;
}

/* Section rhythm（読みやすい行間・余白） */
main h2{
  margin-top: 48px;
  margin-bottom: 16px;
}
main h2:first-of-type{ margin-top: 0; }

main p{ margin-bottom: 16px; }

main ul{
  margin-top: 8px;
  margin-bottom: 24px;
  padding-left: 1.2em;
}
main li{ margin-bottom: 8px; }

main h3{
  margin-top: 28px;
  margin-bottom: 12px;
}

/* =========================
   6) Headings / Emphasis
   - 既存の h2/h3 は残す（旧ページ用）
   - 新ページは section-title を使う想定
========================= */
h2{
  font-size: 1.6rem;
  font-weight: 700;
  padding-left: 12px;
  color: var(--accent);
  border-left: 6px solid var(--accent);
}

h3{
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-2);
}

/* 強調は赤 */
strong{ color: var(--accent); }

/* 強調ブロック（協賛ページ風に統一） */
.emphasis,
.notice,
.important{
  margin: 16px 0 24px;
  border-radius: 14px;
  padding: 16px 18px;
}

.emphasis{
  background: #fff7cc;
  border: 1px solid #fde68a;
}
.notice{
  background: #fff1f2;
  border: 1px solid #fecdd3;
}
.important{
  background: #fee2e2;
  border: 1px solid #fecaca;
  font-weight: 700;
}

/* CTAブロック */
.cta-row{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* =========================
   7) Tables
========================= */
.table-wrap{
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.schedule-table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
  font-size: 0.95rem;
}

.table-wrap .schedule-table{ margin-bottom: 0; }

.schedule-table th{
  background: var(--yellow-frame);
  color: var(--text);
  padding: 12px;
  text-align: left;
  font-weight: 700;
}

.schedule-table td{
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 12px;
}

/* =========================
   8) Images
========================= */
.center-img{
  display: block;
  margin: 40px auto;
  max-width: 70%;
  height: auto;
  border-radius: 16px;
  border: 4px solid var(--yellow-frame);
}

/* 予算画像：中央寄せ＋サイズ調整 */
.budget-image{
  display: flex;
  justify-content: center;
  margin: 24px 0 40px;
}

.budget-image img{
  width: 100%;
  max-width: 720px; /* ← 基本はここだけ触る */
  height: auto;
  border-radius: 12px;
}

/* =========================
   9) Links / Buttons
========================= */
.cf-link{
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}
.cf-link:hover{ opacity: 0.85; }

/* Tailwindの白ボタンを赤に統一 */
a.inline-block.bg-white{
  background: var(--accent-2) !important;
  color: #fff !important;
}
a.inline-block.bg-white:hover{
  background: var(--accent) !important;
}

/* =========================
   10) Footer
========================= */
footer{
  background: var(--bg-strong);
  border-top: 3px solid var(--accent-2);
  color: var(--text-sub);
  text-align: center;
  padding: 32px 16px;
}

/* =========================
   11) Responsive
========================= */
@media (max-width: 640px){
  section.text-center h1{ font-size: 2.4rem; }
  section.text-center p{ font-size: 1rem; }

  .center-img{ max-width: 90%; }

  h2{ font-size: 1.4rem; }
  .section-title{ font-size: 1.45rem; }

  .budget-image img{ max-width: 95%; }

  .page-card{ padding: 22px; }
  .section-block{ padding: 22px 0; }
}

/* テーブルの列幅を固定して、日ごとのズレを消す */
.table-wrap { width: 100%; }

.schedule-table {
  width: 100%;
  table-layout: fixed; /* ←これが効く */
}

/* 1列目（プログラム）は幅を固定 */
.schedule-table th:first-child,
.schedule-table td:first-child {
  width: 10%;
  white-space: nowrap; /* 行を増やしたくなければ */
}

/* 2列目（内容）は残り全部。長文は折り返す */
.schedule-table th:last-child,
.schedule-table td:last-child {
  width: 72%;
  word-break: break-word;
}

/* =========================
   Mobile: widen first column
========================= */
@media (max-width: 640px) {
  .schedule-table th:first-child,
  .schedule-table td:first-child {
    width: 50%;          /* ← スマホでは広く */
    white-space: normal; /* ← 折り返し許可（重要） */
  }

  .schedule-table th:last-child,
  .schedule-table td:last-child {
    width: 50%;
  }
}