/* ============================================================
   NEWS — お知らせ一覧 (.nlist / .ncard) / お知らせ詳細 (.nsg)
   一覧は Figma node 504-3209（左Categoryカラム + 右3列カードグリッド）
   ============================================================ */

/* ---------- 一覧 ---------- */

/* Figma: subheroタイトル下 88px（common.css の .subhero__title margin-bottom 56px + 32px） */
.nlist { padding-top: 32px; padding-bottom: 128px; }

/* Figmaの内容幅は1040px（1440幅で左右200pxのガター）。
   .page は max-width:1040px + 左右padding 40px＝内容960pxなので、
   この一覧だけ 1120px にして内容を1040pxに合わせる。 */
.nlist .page { max-width: 1120px; }

/* Figma: 1040 = サイド193 + 余白96 + グリッド751 */
.nlist__layout {
  display: grid;
  grid-template-columns: 193px 1fr;
  column-gap: 96px;
  align-items: start;
}

/* ---- Category（左カラム） ---- */

.nlist__side { display: flex; flex-direction: column; gap: 48px; }

.nlist__cat-ttl {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--black);
}

.nlist__cats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 131px;
}

.nlist__cat, .nlist__month {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--black);
  transition: color .2s;
}

.nlist__cat:hover, .nlist__month:hover { color: var(--primary); }

.nlist__cat.is-active, .nlist__month.is-active { color: var(--primary); font-weight: 700; }

/* 期間を選択（details/summary。JSなしで開閉） */

.nlist__period { width: 100%; }

.nlist__period > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--black);
  cursor: pointer;
  list-style: none;
}

.nlist__period > summary::-webkit-details-marker { display: none; }

.nlist__period > summary:hover { color: var(--primary); }

/* Figmaは play-arrow を90°回転（＝下向き）。開いている間は上向き */
.nlist__period-ico {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transform: rotate(90deg);
  transition: transform .2s;
}

.nlist__period[open] .nlist__period-ico { transform: rotate(-90deg); }

.nlist__months {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

/* ---- カードグリッド（右カラム） ---- */

.nlist__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 104px;
}

.ncard__link { display: flex; flex-direction: column; gap: 8px; }

/* Figma: 229×171 のグレー枠。画像未設定でもこの箱は出る */
.ncard__img {
  display: block;
  width: 100%;
  aspect-ratio: 229 / 171;
  background: #d9d9d9;
  overflow: hidden;
}

.ncard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.ncard__link:hover .ncard__img img { transform: scale(1.04); }

.ncard__body { display: flex; flex-direction: column; gap: 8px; }

.ncard__date, .ncard__ttl {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--black);
}

.ncard__ttl {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}

.ncard__link:hover .ncard__ttl { color: var(--primary); }

.nlist__empty { font-size: 14px; line-height: 2; }

/* ---- ページ送り（Figma: グリッド下64px・中央・数字のみ） ---- */

.nlist__pager { margin-top: 64px; }

.nlist__pager ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}

.nlist__pager li .page-numbers {
  font-size: 12px;
  line-height: 1.5;
  color: var(--black);
  transition: color .2s;
}

.nlist__pager li a.page-numbers:hover { color: var(--primary); }

.nlist__pager li .page-numbers.current { color: var(--primary); font-weight: 700; }

/* ---------- 詳細 ---------- */

.nsg { padding-top: 72px; padding-bottom: 128px; }

.nsg__article { max-width: 840px; margin: 0 auto; }

.nsg__head {
  padding-bottom: 22px;
  margin-bottom: 36px;
  border-bottom: 1px solid #d9dfe4;
}

.nsg__head .news__meta { margin-bottom: 12px; }

.nsg__title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--black);
}

.nsg__thumb { margin-bottom: 40px; }

.nsg__thumb img { width: 100%; height: auto; border-radius: 14px; }

/* 本文（ブロックエディタの出力） */

.nsg__body { font-size: 16px; line-height: 2; }

.nsg__body > * + * { margin-top: 1.4em; }

.nsg__body h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  padding-left: 16px;
  border-left: 4px solid var(--primary);
  margin-top: 2em;
}

.nsg__body h3 { font-size: 18px; font-weight: 600; line-height: 1.7; margin-top: 1.8em; }

.nsg__body h4 { font-size: 16px; font-weight: 600; line-height: 1.7; margin-top: 1.6em; }

.nsg__body a { color: var(--primary); text-decoration: underline; }

.nsg__body a:hover { opacity: .7; }

.nsg__body strong { font-weight: 700; }

.nsg__body ul { list-style: disc; padding-left: 1.5em; }

.nsg__body ol { list-style: decimal; padding-left: 1.5em; }

.nsg__body li + li { margin-top: .3em; }

.nsg__body img { height: auto; border-radius: 10px; }

.nsg__body figure img { width: 100%; }

.nsg__body figcaption,
.nsg__body .wp-element-caption { margin-top: 8px; font-size: 13px; line-height: 1.8; color: #6b7280; }

.nsg__body blockquote {
  padding: 20px 24px;
  background: var(--senary);
  border-left: 4px solid #c9d6e0;
  border-radius: 0 8px 8px 0;
}

.nsg__body table { width: 100%; border-collapse: collapse; }

.nsg__body th, .nsg__body td {
  padding: 10px 14px;
  border: 1px solid #d9dfe4;
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}

.nsg__body th { background: var(--senary); font-weight: 600; }

.nsg__body hr { border: 0; border-top: 1px solid #d9dfe4; }

.nsg__linkpages { margin-top: 2em; display: flex; gap: 8px; }

/* 前後ナビ */

.nsg__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 840px;
  margin: 72px auto 0;
}

.nsg__navside { flex: 1; display: flex; min-width: 0; }

.nsg__navside--right { justify-content: flex-end; }

.nsg__navlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
}

.nsg__navlink:hover { color: var(--primary); }

.nsg__navlink .ico-arrow { color: var(--primary); }

.nsg__back { flex-shrink: 0; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 1024px) {
  /* Categoryは横並びにして本文の上に置く */
  .nlist__layout { grid-template-columns: 1fr; row-gap: 36px; }
  .nlist__side { gap: 20px; }
  .nlist__cat-ttl { font-size: 26px; }
  .nlist__cats { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; width: auto; }
  .nlist__period { flex: 1 0 100%; width: auto; }
  .nlist__period > summary { justify-content: flex-start; }
  .nlist__months { flex-direction: row; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; }
  .nlist__grid { row-gap: 56px; }
}

@media (max-width: 768px) {
  .nlist { padding-top: 24px; padding-bottom: 80px; }
  .nlist__grid { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 40px; }
  .nlist__pager { margin-top: 48px; }
  .nlist__pager ul.page-numbers { gap: 20px; }
  .nsg { padding-top: 48px; padding-bottom: 80px; }
  .nsg__thumb { margin-bottom: 28px; }
  .nsg__body { font-size: 15px; line-height: 1.95; }
  .nsg__nav { flex-direction: column; align-items: stretch; margin-top: 56px; }
  .nsg__nav .nsg__back { order: -1; align-self: center; }
  .nsg__navside, .nsg__navside--right { justify-content: center; }
}