@charset "utf-8";
/* ===== News List（NEWS一覧ページ専用：1200px） ===== */

/* ラッパ（上下余白＋中央寄せ） */
main.news-main #newsList.nl-wrap{
  max-width:1200px;
  margin:60px auto;
  padding:0 16px;
  display:block;
}

/* グリッド */
#newsList .nl-grid{
  display:grid;
  grid-template-columns:1fr; /* 初期：1列 */
  gap:14px;
  width:100%;
}
#newsList .nl-grid > *{ min-width:0; }

/* 2カラム（スマホ〜タブレット） */
#newsList .nl-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* 4カラム（PC） */
@media (min-width:960px){
  #newsList .nl-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* カード */
#newsList .nl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background-image:url("../images/background-01.jpg"); /* 既存背景を利用 */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:12px;
  overflow:hidden;
  color:#fff;
  text-decoration:none; /* a全体リンク時の下線抑止 */
}

/* サムネ */
#newsList .nl-thumb{
  width:100%;
  aspect-ratio:1/1;
  background:#eef3ff;
  overflow:hidden;
}
#newsList .nl-thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* 本文 */
#newsList .nl-body{
  padding:10px 12px 12px;
  display:flex; flex-direction:column; gap:4px;
  line-height:1.4;
}
#newsList .nl-title{
  font-weight:700;
  font-size:clamp(14px,1.7vw,16px);
  line-height:1.3;
  margin:0 0 4px;
}
#newsList .nl-meta{
  display:flex; gap:6px; align-items:center;
  font-size:12px; color:rgba(255,255,255,.85);
}
#newsList .nl-dot{
  width:4px; height:4px; border-radius:50%; background:#fff;
}

/* フッタ（ボタン） */
#newsList .nl-actions{
  margin-top:auto;
  padding:10px 12px 12px;
  display:flex; justify-content:flex-end; gap:10px;
}
#newsList .nl-link{
  display:inline-block;
  font-weight:600; font-size:14px;
  padding:8px 10px; border-radius:10px;
  background:#0A31A6; color:#fff; text-decoration:none;
}
#newsList .nl-link:hover{ opacity:.9; }

/* カード全体をクリック可能にしたいときの見た目強化（任意） */
#newsList .nl-card:hover .nl-thumb img{ transform:scale(1.02); transition:transform .3s ease; }

/* === NEWS一覧：SP時の背景上書き === */
@media (max-width: 768px){
  .news-main{
    background-attachment: scroll !important;  /* mobileはfixedオフ */
    background-size: 100% auto !important;     /* 横幅フィット */
    background-repeat: repeat-y !important;    /* 縦リピートで黒帯回避 */
    background-position: center top !important;
    background-color: transparent !important;  /* 念のため黒を消す */
  }
}