/* ===========================
   Page: お知らせ一覧（/news/）
=========================== */

/* --------------------------------
   News Hero
-------------------------------- */
.page-hero--news .page-hero-inner {
   height: 380px;
}

.page-hero--news .page-hero-content {
   max-width: none;
   height: 280px;
   display: flex;
   align-items: center;
}

.page-hero--news .page-hero-heading {
   font-size: 40px;
   font-weight: 500;
   color: var(--color-white);
   line-height: 130%;
   margin-bottom: 0;
}

@media (max-width: 767px) {
   .page-hero--news .page-hero-inner {
      height: 180px;
      padding-top: 0;
   }

   .page-hero--news .page-hero-content {
      height: 215px;
   }

   .page-hero--news .page-hero-heading {
      font-size: 29px;
   }
}

/* --------------------------------
   Page Body
-------------------------------- */
.news-body {
   padding-bottom: 144px;
}

@media (max-width: 767px) {
   .news-body {
      padding-bottom: 80px;
   }
}

/* --------------------------------
   Archive Inner
-------------------------------- */
.news-archive-inner {
   max-width: 960px;
   margin: 0 auto;
   padding: 0 40px;
}

@media (max-width: 767px) {
   .news-archive-inner {
      padding: 0 15px;
   }
}

/* --------------------------------
   Filter Tabs
-------------------------------- */
.news-filter {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin: 60px 0;
}

.news-filter__tab {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 3px 10px;
   border-radius: 3px;
   border: 1px solid var(--color-border);
   background: var(--color-white);
   font-size: 13px;
   color: var(--color-text);
   white-space: nowrap;
   transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.news-filter__tab:hover {
   opacity: 1;
   background: var(--color-text);
   color: var(--color-white);
   border-color: var(--color-text);
}

.news-filter__tab.is-active {
   background: var(--color-text);
   color: var(--color-white);
   border-color: var(--color-text);
}

@media (max-width: 767px) {
   .news-filter {
      gap: 11px;
      margin: 40px 0;
   }

   .news-filter__tab {
      padding: 3px 11px;
      font-size: 14px;
   }
}

/* --------------------------------
   News List
-------------------------------- */
.news-archive-list {
   margin-bottom: 60px;
}

/* --------------------------------
   News Item
-------------------------------- */
.news-archive-item {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 20px;
   border-bottom: 1px solid var(--color-border);
   color: inherit;
   text-decoration: none;
}

.news-archive-item:hover {
   opacity: 1;
}

.news-archive-item:hover {
   opacity: 0.6;
}

/* メタ（日付＋カテゴリ） */
.news-archive-meta {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-shrink: 0;
}

.news-archive-date {
   font-size: 16px;
   font-weight: 700;
   color: var(--color-text);
   white-space: nowrap;
   min-width: 90px;
}

.news-archive-cat {
   display: inline-block;
   font-size: 12px;
   font-weight: 500;
   padding: 4px 14px;
   border-radius: var(--radius-pill);
   background: #E4EDEB;
   color: #545756;
   white-space: nowrap;
   min-width: 100px;
   text-align: center;
}

/* タイトル＋アイコン行 */
.news-archive-title-row {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 20px;
   min-width: 0;
}

/* タイトル */
.news-archive-title {
   font-size: 16px;
   line-height: 175%;
   color: var(--color-text);
   transition: opacity 0.3s;
   min-width: 0;
}

/* アイコン */
.news-archive-icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* --------------------------------
   Empty State
-------------------------------- */
.news-archive-empty {
   text-align: center;
   padding: 60px 0;
   color: var(--color-text-muted);
   font-size: 16px;
}

/* --------------------------------
   Responsive: SP（< 768px）
-------------------------------- */
@media (max-width: 767px) {
   .news-archive-item {
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 10px;
      padding: 17px 0;
   }

   /* SPではメタが1行目を占める */
   .news-archive-meta {
      flex: 0 0 100%;
      gap: 10px;
   }

   .news-archive-date {
      font-size: 14px;
      min-width: auto;
   }

   .news-archive-cat {
      font-size: 10px;
      padding: 0 8px;
      min-width: auto;
   }

   /* タイトルとアイコンが2行目 */
   .news-archive-title-row {
      flex: 0 0 100%;
      gap: 5px;
   }
}

/* --------------------------------
   Pagination
   → スタイルは components.css の .news-pagination に移動済み
-------------------------------- */