/* =====================================================
   news.css — news.html 固有スタイル
   ===================================================== */

/* ===== FADE-UP ANIMATION ===== */
/* news.htmlの.news-itemはanimation版 (common.cssのtransition版を上書き) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.news-item {
  opacity: 0;
  animation: fadeUp 0.5s ease forwards;
  transform: none;
  transition: none;
}
.news-item:first-child  { border-top: 1px solid var(--sand-dark); }
.news-item:nth-child(1) { animation-delay: 0.10s; }
.news-item:nth-child(2) { animation-delay: 0.18s; }
.news-item:nth-child(3) { animation-delay: 0.26s; }
.news-item:nth-child(4) { animation-delay: 0.34s; }
.news-item:nth-child(5) { animation-delay: 0.42s; }
.news-item:nth-child(6) { animation-delay: 0.50s; }

/* 日付バッジ */
.news-item__date {
  font-family: var(--font-en);
  font-size: .65rem; letter-spacing: .06em;
  border: 1px solid var(--text);
  border-radius: 5px 5px 5px 0;
  background-color: var(--white);
  padding: 1px 7px; display: inline-block;
}

.news-item__body {
  font-size: clamp(.8rem, 1.5vw, .88rem);
  font-weight: 500; line-height: 1.85; color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== MAIN ===== */
main {
  flex: 1;
  padding: 0 clamp(16px, 4vw, 48px) clamp(60px, 8vw, 100px);
}

/* section-titleのfadeUpアニメーション */
.section-title { animation: fadeUp 0.7s ease both; }

/* ニュースリスト */
.news-list {
  max-width: 760px;
  margin: 0 auto;
}

/* ===== PAGINATION ===== */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 56px);
  animation: fadeUp 0.6s ease 0.55s both;
}
.pagination__btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--gold); font-size: 1rem;
  transition: transform 0.2s, color 0.2s;
}
.pagination__arrow {
  width: 14px;
  height: 10px;
  display: block;
}
.pagination__btn:hover   { color: var(--gold); }
.pagination__btn:disabled { opacity: 0.3; cursor: default; transform: none; }
.pagination__num {
  font-family: var(--font-en);
  font-size: 0.9rem; letter-spacing: 0.12em;
  color: var(--text-light);
  padding: 2px 8px; cursor: pointer;
  transition: color 0.2s;
}
.pagination__num--active {
  color: var(--gold);
  border-bottom: 1.5px solid var(--gold);
  font-weight: 700;
}
.pagination__num:hover { color: var(--gold); }

/* ===== ZIGZAG BORDERS (装飾: ページ両端の縦断ジグザグ線) ===== */
.zigzag-border {
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 10;
  pointer-events: none; overflow: hidden;
}
.zigzag-border--left  { left: 0;  margin-left:  3vw; }
.zigzag-border--right { right: 0; margin-right: 3vw; }
.zigzag-border svg {
  position: absolute; top: 0; left: 0;
  width: 32px; overflow: visible;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px) {
  .news-list { margin: 0 15vw; }
}

/* タブレット (≤700px) */
@media (max-width: 700px) {
  .zigzag-border        { width: 40px; }
  .zigzag-border--left  { margin-left:  1.5vw; }
  .zigzag-border--right { margin-right: 1.5vw; }
  .zigzag-border svg    { width: 22px; }
  .news-list            { margin: 0 10vw; }
  .news-item__body {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

/* スマホ (≤480px) */
@media (max-width: 480px) {
  .zigzag-border     { width: 32px; }
  .zigzag-border svg { width: 16px; }
}