/* --- 基本構造 --- */
.mel25-articles { margin-bottom: 100px; }
.mel25-articles__filters { margin-bottom: 85px; }
@media (max-width: 767px) {
  .mel25-articles__filters { margin-bottom: 60px; }
}
.mel25-articles__filter-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px 10px;
}
.mel25-articles__filter-btn,
.mel25-article__tag-btn {
  font-size: 0.666rem; color: #000; background: #fff; border: 1px solid #000;
  font-weight: 700; line-height: 1; padding: 4px 8px;
}
/* pc hover */
@media (hover: hover) and (pointer: fine) {
  .mel25-articles__filter-btn:hover,
  .mel25-article__tag-btn:hover { color: #c00; border-color: #c00; cursor: pointer;}
}
.mel25-articles__filter-btn.is-active,
.mel25-article__tag-btn.is-active { color: #c00; border-color: #c00; }

/* --- グリッド --- */
.mel25-articles__grid {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: start; gap: 24px; max-width: 1380px;
}
@media (max-width: 767px) {
  .mel25-articles__grid { grid-template-columns: 1fr; }
}

/* --- カード --- */
.mel25-article__link { display: block; color: #000; text-decoration: none; }
.mel25-article__figure { margin: 0; }
.mel25-article__figure img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
}
.mel25-article__date {
  display: block; margin: 15px 0 0 0; color: #4d4d4d; line-height: 1; font-size: 1rem;
}
.mel25-article__title { margin-top: 8px; font-size: 1rem; line-height: 1.4; height: 75px}
@media (max-width: 767px) {
  .mel25-article__title { height:auto; }
}
/*.mel25-article__link:hover .mel25-article__title { color: #c00; text-decoration: none; }*/
.mel25-article__link .mel25-article__title:hover,
.mel25-article__link .mel25-article__figure{ color: #c00; text-decoration: none; }


/* タグ */
.mel25-article__tags {
  list-style: none; margin: 10px 0 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px 10px;
}

/* --- ローディング状態 --- */
.mel25-articles.is-loading { position: relative; cursor: progress; }
.mel25-articles.is-loading::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.04); pointer-events: none;
}
.mel25-articles.is-loading [data-js-grid],
.mel25-articles.is-loading [data-js-more] { pointer-events: none; }
.mel25-articles__more-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- もっと見る --- */
.mel25-articles__more { text-align: center; margin: 100px 0; }
.mel25-articles__more-btn {
  font-size: 1rem; color: #000; background: #fff; border: 2px solid #000;
  font-weight: 700; padding: 10px 20px;
}
@media (hover: hover) and (pointer: fine) {
  .mel25-articles__more-btn:hover { color: #c00; border-color: #c00; }
}

/* --- エラーメッセージ --- */
.mel25-articles__error {
  text-align: center; color: #000; font-size: 1rem; line-height: 1.6; padding: 0 0 100px;
}

/* --- 非表示領域（SR向け） --- */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* --- フェード（重複定義を統合） --- */
@media (prefers-reduced-motion: no-preference) {
  .u-fade-in { animation: mel-fade-in 0.22s ease-out both; }
  @keyframes mel-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .u-fade-out { animation: mel-fade-out 0.16s ease-in both; }
  @keyframes mel-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
}