/* ===== フルビューポート＆確実に1画面に収める修正版 ===== */
#newsOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  /* 端末ごとの安全域を考慮した余白（小さめ） */
  --pad-top: max(10px, env(safe-area-inset-top));
  --pad-btm: max(10px, env(safe-area-inset-bottom));
  --pad-x:   max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
  padding: var(--pad-top) var(--pad-x) var(--pad-btm);

  background: rgba(0,0,0,.88);
  z-index: 1200;
  overflow: hidden; /* ← オーバーレイ自体はスクロールさせない */
}
#newsOverlay.is-open{ display:flex; }

.news-modal{
  position: relative;
  box-sizing: border-box;                /* パディングを高さ計算に含める */
  width: min(98vw, 1200px);
  /* どの端末でもビューポートぴったり（dvh/svhにフォールバック付き） */
  height: min(100dvh, 100svh, 100vh);

  background:#0b0b0b; color:#fff;
  border-radius: 18px;
  padding: clamp(10px, 1.8vw, 16px);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  outline: none;
  animation: overlay-in .35s ease-out both;

  display: grid;
  /* ← タイトル・リード・画像・本文の「4行」を明示 */
  grid-template-rows: auto auto 1fr auto;
  row-gap: clamp(6px, 1vw, 12px);
  min-height: 0; /* グリッド内の収まりを良くする */
}

/* 画像は中央の 1fr 行を完全に使う。切り抜かず最大化 */
.news-illustration{
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  height: 100%;          /* ← 画像行の高さをフル使用 */
  object-fit: contain;   /* ← はみ出さず全体を見せる */
  border-radius: 12px;
  min-width: 0;          /* ↓ Gridの既定(min-content)で縮まない問題に対処 */
  min-height: 0;         /* ← これが無いと画像が縮まらず溢れやすい */
}

/* タイトル・リードは自動拡縮（大きめにしつつ圧縮も効く） */
.news-title{
  margin: 0;
  font-weight:700; letter-spacing:.02em;
  font-size: clamp(20px, 2.6vw, 30px);
}
.news-lead{
  margin: 0;
  opacity:.9; line-height:1.5;
  font-size: clamp(14px, 1.9vw, 18px);
}

/* 本文は数行でカット（スクロール無し前提） */
.news-body{
  margin: 0;
  line-height:1.6;
  font-size: clamp(14px, 1.7vw, 17px);
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* ← ここを 0 にすれば本文を消して更に画像を大きくできる */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ×ボタン（そのまま） */
.news-close{
  appearance:none; border:none; cursor:pointer;
  position:absolute; top:8px; right:8px;
  width:40px; height:40px; border-radius:999px;
  background: rgba(255,255,255,.10); color:#fff; font-size:22px;
  display:grid; place-items:center; z-index:2;
}
.news-close:hover{ background: rgba(255,255,255,.16); }

html.is-locked, body.is-locked{ overflow:hidden !important; }

@keyframes overlay-in{
  from{ transform: translateY(12px); opacity:0 }
  to  { transform: translateY(0);   opacity:1 }
}