/* NOTE本文：画像と説明を分ける箱レイアウト（冥界くれぇぷ仕様） */

/* タイトル */
.na-title{
  margin: 10px 0 8px;
  font-size: 20px;
  color: #ff4fa6;
  letter-spacing: 0.5px;
}

/* HERO全体 */
.na-heroGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  justify-items: center;
}

/* カード単位 */
.na-card{
  margin-top: 16px;
}

/* 通常2カラム */
.na-grid{
  display: grid;
  grid-template-columns: minmax(260px, 480px) 1fr;
  gap: 16px;
  align-items: start;
}

/* 画像側（白禁止） */
.na-fig{
  margin: 0;
  border: 2px dashed #ff2a8a;
  padding: 12px;
  background: rgba(0,0,0,0.75);
}

.na-fig img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid rgba(255,42,138,0.55);
}

/* テキスト側 */
.na-text{
  border: 2px solid #ff2a8a;
  padding: 14px 16px;
  background: rgba(0,0,0,0.78);
  color: #f2e9ff;
  line-height: 1.9;
}

/* 見出し */
.na-h2{
  margin: 0 0 10px;
  font-size: 16px;
  color: #ff7fc4;
  font-weight: bold;
}

/* 補足ノート */
.na-note{
  border: 1px dashed #ff2a8a;
  padding: 12px 14px;
  background: rgba(20,0,10,0.55);
  color: #ffd1ea;
  line-height: 1.8;
}

/* タグ・チップ */
.na-chip{
  display: inline-block;
  border: 1px solid #ff2a8a;
  padding: 2px 8px;
  margin: 0 6px 6px 0;
  background: rgba(0,0,0,0.6);
  color: #ff9bd1;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}

/* 参照リンク */
.na-refs ul{
  margin: 8px 0 0 20px;
}
.na-refs a{
  color: #ff4fa6;
}
.na-refs a:visited{
  color: #b07cff;
}

/* HEROタイトル画像だけ制御 */
.na-hero .na-fig img{
  max-width: 720px;   /* ← 命 */
  width: 100%;
}

.na-heroGrid{
  justify-items: center;
}

.na-hero .na-note{
  max-width: 720px;
}

/* レスポンシブ（構造は維持） */
@media (max-width: 900px){
  .na-heroGrid{ grid-template-columns: 1fr; }
  .na-grid{ grid-template-columns: 1fr; }
}