@charset "utf-8";

/* ====== 設定（将来変更しやすいよう変数化） ====== */
:root{ --nt-max: 1400px; }   /* 上限幅：1400px */

/* ====== ラッパ（#newsTop 配下に完全スコープ） ====== */
#newsTop,
#newsTop.nt-wrap{
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:var(--nt-max);
  margin:0 auto;
  padding:0 16px;                 /* 端末左右のゆとり */
  flex:0 0 auto;                  /* 親がflexでも縮まない */
}

/* 内側ラッパ（任意：外部で .nt-inner を出力する場合用） */
#newsTop .nt-inner{
  box-sizing:border-box;
  width:100%;
  max-width:var(--nt-max);
  margin:0 auto;
  padding:0 16px;
  /* 幅を安全に抑える書き方にしたい場合は下記でもOK
     width:min(var(--nt-max), calc(100% - 32px)); */
}

/* ====== グリッド ====== */
#newsTop .nt-grid{
  display:grid;
  width:100%;
  gap:14px;
  grid-template-columns:1fr;      /* 初期：1列 */
}
@media (max-width:959px){
  #newsTop .nt-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }
}
@media (min-width:960px){
  #newsTop .nt-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
}

/* 子要素のはみ出し防止 */
#newsTop .nt-grid > *{ min-width:0; }

/* タイトル行は使わない（必要なければ表示） */
#newsTop .nt-head{ display:none; }

/* ====== カード ====== */
#newsTop .nt-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  overflow:hidden;
  color:#fff;
  background-image:url("../images/background-01.jpg"); /* 共通背景 */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

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

/* バッジ */
#newsTop .nt-badges{
  position:absolute; left:8px; top:8px;
  display:flex; gap:6px; flex-wrap:wrap;
}
#newsTop .nt-badge{
  font:700 11px/1.2 system-ui, -apple-system, "Noto Sans JP", sans-serif;
  color:#fff; background:#111; opacity:.9;
  padding:4px 8px; border-radius:9999px;
}
#newsTop .nt-badge--new{ background:#FC5F00; }

/* 本文部 */
#newsTop .nt-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.4;
  padding:10px 12px 12px;
}
#newsTop .nt-title2{
  margin:0 0 4px 0;
  font-weight:700;
  line-height:1.3;
  font-size:clamp(14px, 1.7vw, 16px);
  color:#fff;
}
#newsTop .nt-meta{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:rgba(255,255,255,.85);
}
#newsTop .nt-dot{
  display:inline-block;
  width:4px; height:4px; border-radius:50%;
  background:#fff;
}
#newsTop .nt-summary{
  color:#fff;
  font-size:14px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* アクション */
#newsTop .nt-actions{
  margin-top:auto;
  padding:10px 12px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid rgba(255,255,255,.25);
}

/* テーマ色（リンクなど） */
:root{ --nt-brand:#0A31A6; }
#newsTop .nt-link{
  display:inline-block;
  text-decoration:none;
  font-weight:600; font-size:14px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--nt-brand); color:#fff;
}
#newsTop .nt-link:hover{ opacity:.92; }
#newsTop .nt-more{ color:var(--nt-brand); }