.donation-section {
  max-width: 850px;
  margin: 4rem auto;
  padding: 1rem;
  color: var(--color-text);
}

.donation-section h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

/* === 支援画像エリア（スマホ：縦／PC：横3列） === */
.support-image-grid{
  /* ── スマホ基準 ───────────────────────── */
  display:block;               /* 1列用 */
  margin-bottom:3rem;
  padding:0 1rem;
  text-align:center;           /* 中央寄せ */
}
.support-image-grid .support-item{
  max-width:280px;
  margin:0 auto 2rem;          /* 画像間隔：縦 */
}
.support-image-grid img{
  width:100%;
  border-radius:8px;
  object-fit:contain;
  box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.support-label{
  margin-top:.8rem;
  font-weight:bold;
  font-size:1rem;
  color:var(--color-text);
}

.donation-title-left {
  display: block;
  text-align: left;
}

.donation-title-center {
  display: block;
  text-align: center;
}

/* ── PC 幅（768px 以上）で 3 列固定＆順番変更 ── */
@media (min-width:768px){
  .support-image-grid{
    display:flex;              /* 横並び */
    justify-content:center;
    gap:2rem;                  /* 画像間隔：横 */
  }
  .support-image-grid .support-item{
    flex:0 0 calc((100% - 4rem)/3); /* 常に 3 列で折返さない */
    margin:0;                   /* 上の “縦用余白” を打ち消し */
  }
  /* ─ 順序指定（物品｜寄付｜広報） ─ */
  .support-item.goods{  order:1; }
  .support-item.donate{ order:2; }
  .support-item.spread{ order:3; }
}
/* PC時は3列並び */
@media screen and (min-width: 768px) {
  .support-image-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .support-item {
    width: 100%;
    max-width: none;
  }

  .support-item.donate { order: 2; }
  .support-item.goods { order: 1; }
  .support-item.spread { order: 3; }
}

/* === 以下は既存構造 === */
.donation-block {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.philosophy-sub-img {
  flex: 1 1 300px;
  max-width: 320px;
  width: 100%;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}

.donation-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 300px;
  font-size: 1rem;
  line-height: 1.8;
}

.donation-text h3 {
  margin: 0 0 1rem 0;
  padding: 0;
  line-height: 1.2;
}

.custom-list2 {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.list-item {
  display: flex;
  align-items: flex-start;
}

.list-body {
  flex: 1;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .donation-block {
    flex-direction: column;
    text-align: center;
  }

  .donation-text {
    text-align: left;
    margin-bottom: 0;
  }

  .service-links-wrapper {
    justify-content: center;
  }
}