/* =============================
    お知らせページ専用CSS
============================= */

/* 記事一覧ページヘッダー */
#postlist__head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-light);
}

.postlist__title {
  font-size: 20px;
  font-weight: var(--font-strong-weight);
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: 0.05em;
}

.postlist__count {
  font-size: 13px;
  color: var(--color-second);
  margin: 0;
}

/* 記事一覧 */
#article-listblock {
  margin-bottom: 40px;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-card {
  display: flex;
  width: 100%;
}

.article-card a {
  display: flex;
  flex-direction: row;
  gap: 15px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.article-card__thumb {
  flex: 0 0 135px;
  width: 135px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-thumbnail);
}

.article-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.article-card__date {
  font-size: 12px;
  color: var(--color-second);
  display: block;
}

.article-card__title {
  font-size: 13px;
  font-weight: var(--font-sub-weight);
  color: var(--color-text);
  line-height: var(--line-height-base);
  letter-spacing: 0.1em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  word-break: break-word;
  margin: 0;
}

.article-card__desc {
  font-size: 12px;
  color: var(--color-second);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-space-normal);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  margin: 0;
}

/* もっと見るボタン */
.article-list__btn-more {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 40px auto 0;
  padding: 14px 24px;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-8);
  font-size: 14px;
  font-weight: var(--font-sub-weight);
  cursor: pointer;
  transition: background-color 0.3s, opacity 0.3s;
}

.article-list__btn-more:hover {
  background-color: var(--color-primary-dark);
}

.article-list__btn-more[hidden] {
  display: none;
}

.article-list__btn-more[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =============================
    Tablet styles
============================= */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .postlist__title {
    font-size: 22px;
  }

  .article-card__thumb {
    flex: 0 0 160px;
    width: 160px;
  }

  .article-card__title {
    font-size: 14px;
  }

  .article-card__desc {
    font-size: 13px;
  }
}

/* =============================
    PC styles
============================= */
@media screen and (min-width: 1024px) {
  .postlist__title {
    font-size: 24px;
  }

  .postlist__count {
    font-size: 14px;
  }

  .article-card__thumb {
    flex: 0 0 200px;
    width: 200px;
  }

  .article-card a {
    gap: 20px;
  }

  .article-card__title {
    font-size: 15px;
    -webkit-line-clamp: 3;
  }

  .article-card__desc {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
}