/* ============================================
  News（新着情報）一覧 + カテゴリフィルター セクション CSS
  基準カラー: #8451ab
============================================= */
:root{
  --nf-main:#8451ab;
  --nf-main-dark:#6a3f8a;
  --nf-text:#1a1a1a;
  --nf-sub:#666;
  --nf-line:#dcdcdc;
  --nf-link:#2a63c7;

  /* カテゴリごとのバッジカラー */
  --nf-event:#e22147;     /* イベント情報：赤 */
  --nf-briefing:#05A043;  /* 説明会情報：緑 */
  --nf-notice:#8451AB;    /* お知らせ：藍 */
  --nf-bid:#c97a2e;       /* 入札情報：アンバー */
}

.nf-wrap{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  max-width:1100px;
  margin:0 auto;
  padding:32px 16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* --- タイトル --- */
.nf-head-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:14px;
}
.nf-en{
  font-size:26px;
  font-weight:800;
  color:var(--nf-text);
}
.nf-jp{
  font-size:14px;
  font-weight:700;
  color:var(--nf-main);
}

/* --- フィルタータブ --- */
.nf-tabs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 4px;
  margin-bottom:20px;
}
.nf-tab{
  border:none;
  background:transparent;
  color:var(--nf-main-dark);
  font-size:14px;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.nf-tab:hover{
  background:var(--nf-main-dark);
  color:#fff;
}
.nf-tab.is-active{
  background:var(--nf-main);
  color:#fff;
}
.nf-sep{
  color:var(--nf-line);
  font-size:13px;
}

/* --- 一覧 --- */
.nf-list{
  border-top:1px solid var(--nf-line);
}
.nf-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 4px;
  border-bottom:1px solid var(--nf-line);
  flex-wrap:wrap;
}
.nf-date{
  font-size:14px;
  color:var(--nf-sub);
  flex:0 0 auto;
}
.nf-badge{
  display:inline-block;
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:4px;
  flex:0 0 auto;
  white-space:nowrap;
  width: 88px;
  text-align: center;
}
.badge-event{ background:var(--nf-event); }
.badge-briefing{ background:var(--nf-briefing); }
.badge-notice{ background:var(--nf-notice); }
.badge-bid{ background:var(--nf-bid); }

.nf-row-text{
  font-size:15px;
  color:var(--nf-text);
  line-height:1.6;
}
.nf-row-text a{
  color:var(--nf-link);
  text-decoration:underline;
  font-weight:600;
  margin-right:4px;
}
.nf-row.is-hidden{
  display:none;
}

.nf-list-col{
  min-width:0;
}

/* ============================================
  レスポンシブ対応
  デフォルト（スマホ 〜767px）：
    タイトル → タブ → 一覧 の順に縦積み
============================================= */

/* タブレット */
@media (min-width:768px) and (max-width:1024px){
  .nf-wrap{ padding:40px 32px; }
  .nf-en{ font-size:28px; }
  .nf-tab{ font-size:15px; }
}

/* PC：タイトル＋タブを左列に固定配置、一覧を右列に配置 */
@media (min-width:1025px){
  .nf-wrap{
    padding:48px 0;
    flex-direction:row;
    gap:40px;
    align-items:flex-start;
  }
  .nf-left{
    flex:0 0 220px;
  }
  .nf-en{ font-size: 3rem; }
  .nf-tabs{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .nf-tabs .nf-sep{ display:none; }
  .nf-tab{
    width:100%;
    text-align:left;
    padding:8px 14px;
  }
  .nf-list-col{ flex:1; }
}

/* スマホ（〜480px） */
@media (max-width:480px){
  .nf-en{ font-size: 3rem; }
  .nf-tab{ font-size:13px; padding:7px 11px; }
  .nf-row-text{ font-size:14px; }
  .nf-head-row{
    text-align: center;
    display: block;
    }
}