.links-section {
  padding: 2rem;
  padding-bottom: 3rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: 1px solid #ccc;
  margin-bottom: 2rem;
}

.links-section h2 {
  margin-top: 0;
}

.hero-right {
  margin-bottom: 2rem;
}


.page-lead:last-of-type { /* ← 同じタグ（page-leadクラス）の中で最後のものだけに適用する */
  margin-bottom: 2rem;
}


.link-list {
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;  /* グリッドレイアウトを使う（行と列で配置） */
  grid-template-columns: repeat(3, 1fr);  /* 3列にして残りのスペースを均等に分ける */
  gap: 1rem;
}

.link-list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;

  padding: 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.6rem;
}

.link-list li a:hover {
  background: #f7f7f7;
  border-color: #ccc;
}

.link-list li a img {
  width: 80%;
  height: auto;
  border-radius: 0.4rem;
}

/* =========================
   タブレット表示用
   ========================= */

@media (max-width: 1024px) {
 .link-list {
 grid-template-columns: repeat(2, 1fr); /* 2列にして残りのスペースを均等に分ける */
 }
}


/* =========================
   スマホ表示用
   ========================= */

@media (max-width: 768px) {
  .links-section {
    padding: 1rem;
    padding-bottom: 2rem;
  }

  .link-list {
    grid-template-columns: 1fr;   /* 1列レイアウト（幅いっぱい使う） */
  }
}