@charset "UTF-8";
/* お知らせ（一覧・記事）
   共通：../../top/style.css ＋ ../common/lower.css
   一覧（news）と記事（news-*）で同じ内容のファイルを使う。 */

.n-wrap { max-width: 860px; margin-inline: auto; }

/* ---------- 一覧 ---------- */
.n-section { padding-top: 40px; }
.n-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.n-tab { min-width: 96px; height: 38px; padding: 0 18px; border: 1.5px solid var(--color-line); border-radius: 999px; background: #fff; font: inherit; font-weight: 500; font-size: 14px; color: var(--color-heading); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.n-tab:hover { border-color: var(--color-primary); }
.n-tab.is-active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.n-list { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.n-list li { border-bottom: 1px solid var(--color-line); }
.n-list a { display: grid; grid-template-columns: 1fr 24px; gap: 8px 16px; align-items: center; padding: 18px 4px; color: inherit; text-decoration: none; }
.n-list__meta { display: flex; align-items: center; gap: 12px; }
.n-list time, .n-head__meta time { font-family: var(--font-num); font-size: 14px; line-height: 1; color: #1e6a8d; }
.n-list__title { grid-column: 1; font-size: 15px; line-height: 1.6; color: var(--color-heading); transition: color .25s ease; }
.n-list__arrow { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--color-primary); transition: transform .3s ease; }
.n-list a:hover .n-list__title { color: var(--color-primary); }
.n-list a:hover .n-list__arrow { transform: translateX(4px); }

/* ---------- 記事 ---------- */
.n-article { padding: 96px 0 var(--sec-bottom); }
.n-article .o-breadcrumb { padding-top: 0; }
.n-head { margin-top: 32px; padding-bottom: 20px; border-bottom: 2px solid var(--color-line); }
.n-head__meta { display: flex; align-items: center; gap: 12px; }
.n-head__title { margin-top: 14px; font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.5; letter-spacing: .04em; color: var(--color-heading); }
.n-body { margin-top: 28px; }
.n-body p { margin-top: 16px; font-size: 15px; line-height: 2; }
.n-body p:first-child { margin-top: 0; }
.n-table { margin: 24px 0 0; border: 2px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.n-table div { display: grid; grid-template-columns: 10.5em 1fr; }
.n-table div + div { border-top: 1px solid var(--color-line); }
.n-table dt { padding: 14px 16px; background: var(--color-bg-info); font-weight: 500; font-size: 14px; color: var(--color-heading-accent); }
.n-table dd { margin: 0; padding: 14px 16px; font-size: 14px; }
.n-note { font-size: 13px !important; line-height: 1.8 !important; color: var(--color-text-sub); }
.n-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.n-pn a { display: block; padding: 14px 16px; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; color: var(--color-heading); text-decoration: none; transition: border-color .25s ease; }
.n-pn a:hover { border-color: var(--color-primary); }
.n-pn span { display: block; margin-bottom: 4px; font-size: 11px; color: var(--color-text-sub); }
.n-pn__next { text-align: right; }
.n-back { display: flex; justify-content: center; margin-top: 36px; }

@media (min-width: 768px) and (max-width: 1023.98px) { .n-article { padding-top: 116px; } }
@media (min-width: 768px) {
  .n-list a { grid-template-columns: auto 1fr 24px; padding: 20px 8px; }
  .n-list__meta { grid-column: 1; }
  .n-list__title { grid-column: 2; }
  .n-list__arrow { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1024px) {
  .n-wrap { width: calc(900 * var(--u)); max-width: none; }
  .n-section { padding-top: calc(56 * var(--u)); }
  .n-tab { min-width: calc(110 * var(--u)); height: calc(44 * var(--u)); font-size: max(13px, calc(15 * var(--u))); }
  .n-list { margin-top: calc(36 * var(--u)); }
  .n-list a { gap: calc(28 * var(--u)); padding: calc(26 * var(--u)) calc(12 * var(--u)); }
  .n-list__meta { gap: calc(20 * var(--u)); }
  .n-list time, .n-head__meta time { font-size: max(13px, calc(17 * var(--u))); }
  .n-list__title { font-size: max(14px, calc(17 * var(--u))); }
  .n-article { padding-top: calc(132 * var(--u)); }
  .n-head { margin-top: calc(44 * var(--u)); padding-bottom: calc(26 * var(--u)); }
  .n-head__title { margin-top: calc(18 * var(--u)); font-size: calc(32 * var(--u)); }
  .n-body { margin-top: calc(36 * var(--u)); }
  .n-body p { font-size: max(14px, calc(16 * var(--u))); }
  .n-table { border-radius: calc(20 * var(--u)); }
  .n-table div { grid-template-columns: calc(300 * var(--u)) 1fr; }
  .n-table dt, .n-table dd { padding: calc(18 * var(--u)) calc(24 * var(--u)); font-size: max(13px, calc(15 * var(--u))); }
  .n-pn { gap: calc(20 * var(--u)); margin-top: calc(64 * var(--u)); }
  .n-pn a { padding: calc(18 * var(--u)) calc(22 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
  .n-back { margin-top: calc(44 * var(--u)); }
}