
.sponsor-section {
  max-width: 1100px;
  margin: 0 auto;
}


/* =========================
  Sponsor Page Base
========================= */

.sponsor-section {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
}

/* =========================
  Sponsor Block
========================= */

.sponsor-block {
  margin: 0 0 56px;
  padding: 0;
  border: none;
}

/* =========================
  Heading
========================= */

.sponsor-heading {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 20px 0;
  padding-left: 14px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  border-left: 4px solid #222;
}

/* 既存テーマのh3装飾を完全無効化 */
.sponsor-section h3::before,
.sponsor-section h3::after {
  content: none !important;
}

/* =========================
  Description
========================= */

.sponsor-description {
  font-size: 20px;
  line-height: 1.9;
  color: #444;
  margin-top: 16px;
}

/* =========================
  Image Common
========================= */

.sponsor-image {
  margin: 0;
}

.sponsor-image img {
  width: 100%;
  height: auto;       /* ← 面を揃えるため固定 */
  object-fit: cover;  /* ← トリミングで揃える */
  display: block;
  border-radius: 2px;
}

/* =========================
  Media Layouts
========================= */

/* 栃木シティ：左右2枚 */

.sponsor-media-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* エイジェック：横2枚 */

.sponsor-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 12px;
}

/* ゴールデンブレーブス：横長1枚（周囲の画像と同じ全幅で大きく見せる） */

.sponsor-media-full img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* 山本ひより：栃木シティと同じ縦横比（1.54:1 と 0.74:1）に画像側で揃えているため
   CSSでの高さ強制は不要。.sponsor-image img の width:100% / height:auto に任せる。 */

/* =========================
  Responsive
========================= */

@media screen and (max-width: 900px) {

  .sponsor-media-split {
    grid-template-columns: 1fr;
  }

  .sponsor-media-grid {
    grid-template-columns: 1fr;
  }

  .sponsor-image img {
    height: 260px;
  }

  .sponsor-heading {
    font-size: 24px;
  }

  .sponsor-description {
    font-size: 16px;
  }
}


@media screen and (min-width: 1920px) {
  .sponsor-section {
    max-width: 1600px;
  }
}




/**地域貢献ブロック**/
/* =====================
  Local Contribution
===================== */

.local-block {
  margin-top: 100px;
  padding-top: 60px;
  border-top: 1px solid #e5e5e5;
}

.local-heading {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 40px;
  letter-spacing: 0.08em;
}

.local-heading span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
  color: #666;
}

.local-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.local-item {
  margin: 0;
}

.local-item img {
  width: 100%;
  height: auto;
  display: block;
}

.local-item figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #555;
}

.local-description {
  font-size: 18px;
  line-height: 1.9;
  color: #444;
}

/* responsive */

@media screen and (max-width: 900px) {
  .local-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .local-heading {
    font-size: 24px;
  }

  .local-description {
    font-size: 16px;
  }
}

.contribution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.contribution-grid figure {
  margin: 0;
}

.contribution-grid img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.contribution-grid figcaption {
  margin-top: 12px;
  font-size: 16px;
  color: #444;
}

.contribution-section h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.contribution-section h3 {
  font-size: 18px;
  font-weight: 500;
  color: #666;
  margin-bottom: 40px;
}


/* ===========================================================
   記事レイアウトのレスポンシブ補正（このページ専用）
   article.css の1カラム化は max-width:430px 限定のため、
   431〜900px の帯でカテゴリ欄が潰れたまま2カラムが残る。
   タブレット縦以下では記事＝全幅・カテゴリを下へ回す
   （sponsor-media／local の縦積み境界 900px とも揃える）。
   =========================================================== */
@media screen and (max-width: 900px) {
  .main-container {
    flex-direction: column;
  }
  .article-content {
    order: 1;
    width: 100%;
  }
  .category-list {
    order: 2;
    width: 100%;
    height: auto;
    margin-top: 36px;
  }
  /* PCで左右の高さを揃えるためのダミー余白は1カラムでは不要 */
  .category-list h2::before { display: none; }
  .article-meta-dummy { display: none; }
}

