/* =====================================================
   INTERESTING INNOVATION - NEWS（お知らせ一覧）
   style.css → sub.css の後に読み込む
   基準幅: PC 1920 / TB 768 / SP 393（1rem = 基準幅で 10px）
   ===================================================== */

/* 共通の見出し帯・パンくずは css/sub.css。ヘッダー・フッターはホームと同じ（style.css） */

/* 見出し帯: お知らせに合う写真がないため、募集要項と同じくタイトルを中央に置く（写真なし） */
@media (max-width: 1199px) { .page-news .page-head { --band0: calc(var(--m) * 250); height: var(--band0); --band: calc(var(--band0) - 5.6rem); } }
@media (min-width: 768px) and (max-width: 1199px) { .page-news .page-head { --band0: calc(var(--m) * 330); --band: calc(var(--band0) - 3.2rem); } }

/* ---------- カテゴリタブ（Figma Frame 244: 778x48 中央、区切り線 20% 黒） ---------- */
.news-archive { margin-top: 37.8rem; }
.ntabs { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; list-style: none; }
.ntabs li { position: relative; flex: none; }
.ntabs li + li { margin-left: 1.6rem; padding-left: 1.7rem; }
.ntabs li + li::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: rgba(0,0,0,.2); }
.ntabs button { display: block; height: 4.8rem; padding: 0 3rem; background: transparent; border-radius: .5rem; font-size: 1.6rem; font-weight: 500; line-height: 4.8rem; white-space: nowrap; color: var(--black); transition: background-color .3s, color .3s; }
.ntabs button:hover { background: rgba(255,255,255,.5); }
.ntabs button.is-active { background: #fff; }

/* ---------- 一覧（白カード 1520x80 / 角丸 3 / 16 間隔） ---------- */
.news-archive__body { width: 102.5rem; margin: 12rem auto 0; padding: 0; } /* お知らせ詳細の本文幅（.nd 102.5rem）と同じ */
.news-cards { display: flex; flex-direction: column; gap: 1.6rem; width: auto; margin: 0; padding: 0; list-style: none; border-bottom: 0; }
.news-cards .news-item { border-top: 0; background: #fff; border-radius: .3rem; }
.news-cards .news-item[hidden] { display: none; }
.news-cards .news-item a { height: 8rem; padding: 0 2.4rem 0 3.2rem; gap: 3.2rem; }
.news-cards .news-item__cat { width: auto; min-width: 6rem; } /* 「プレスリリース」など長いカテゴリ名も切れないように */
.news-cards .news-item__title { font-size: 1.6rem; }
.news-cards .news-item__arrow { width: 3.2rem; height: 3.2rem; }
/* カードはグループが見えた時点でまとめて発火し、上から順に入ってくる */
.news-cards.reveal { opacity: 1; transform: none; filter: none; }
.news-cards.reveal .news-item { opacity: 0; transform: translateY(3rem); filter: blur(.4rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; transition-delay: var(--d, 0s); }
.news-cards.reveal.is-visible .news-item { opacity: 1; transform: none; filter: none; }
.news-archive .news-empty { width: auto; padding: 6rem 0; }

/* =====================================================
   TB / SP 共通（〜1199px）
   ===================================================== */
@media (max-width: 1199px) {

  .news-archive { margin-top: 3.2rem; }
  .ntabs { justify-content: flex-start; margin: 0 var(--pad-x); padding-bottom: .4rem; overflow-x: auto; scrollbar-width: none; }
  .ntabs::-webkit-scrollbar { display: none; }
  .ntabs li + li { margin-left: 1rem; padding-left: 1.1rem; }
  .ntabs button { height: 4rem; padding: 0 1.6rem; font-size: 1.3rem; line-height: 4rem; }

  .news-archive__body { width: auto; margin-top: 3.2rem; padding: 0 var(--pad-x); }
  .news-cards { gap: 1.2rem; }
  .news-cards .news-item a { height: auto; padding: 1.6rem 5.2rem 1.6rem 1.6rem; gap: .8rem 1.6rem; }
  .news-cards .news-item__arrow { right: 1.6rem; width: 2.8rem; height: 2.8rem; }
  .news-archive .news-empty { padding: 3.2rem 0; }
}

/* =====================================================
   TB のみ（768〜1199px）
   ===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  .news-archive { margin-top: 6.4rem; }
  .ntabs { justify-content: center; }
  .ntabs li + li { margin-left: 1.4rem; padding-left: 1.5rem; }
  .ntabs button { height: 4.4rem; padding: 0 2.4rem; font-size: 1.5rem; line-height: 4.4rem; }

  .news-archive__body { margin-top: 4.8rem; }
  .news-cards { gap: 1.6rem; }
  .news-cards .news-item a { padding: 2.4rem 6.4rem 2.4rem 2.4rem; }
  .news-cards .news-item__arrow { right: 2.4rem; width: 3.2rem; height: 3.2rem; }
}
@media (max-width: 767px) { .pager { margin-bottom: 4.8rem; } } /* SP: ページ送りと下の波（フッター）のあいだに余白 */