@charset "UTF-8";
/* ==========================================================================
   お知らせ（news-list.html：一覧／news-detail.html：詳細）
   style.css → about.css → info.css の後に読み込む
   デザイン基準幅: PC 1200px（本文エリア 840px）
========================================================================== */

.news-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 30px; }

/* カテゴリーラベル（一覧・詳細共通） */
.news-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; height: 30px; padding: 0 14px; border-radius: 15px; background: #fff; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--c-main); white-space: nowrap; }
a.news-tag:hover { background: var(--c-main); color: #fff; }
.news-date { font-size: 17px; letter-spacing: .06em; color: var(--c-text); }

/* --------------------------------------------------------------------------
   一覧：カテゴリー絞り込み
-------------------------------------------------------------------------- */
.news-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 16px; max-width: 840px; margin: 92px auto 0; padding: 0 10px; }
.news-cats li { display: flex; }
.news-cats a { display: flex; align-items: center; justify-content: center; min-width: 120px; height: 45px; padding: 0 22px; border-radius: 23px; background: #fff; font-size: 16px; font-weight: 500; letter-spacing: .1em; color: var(--c-text); transition: background-color .3s, color .3s; }
.news-cats a:hover { color: var(--c-main); }
.news-cats a[aria-current], .news-cats a.is-current { background: var(--c-main); color: #fff; font-weight: 700; }
.news-cats .is-w140 a { min-width: 140px; }
.news-cats .is-w200 a { min-width: 200px; }

/* --------------------------------------------------------------------------
   一覧：記事リスト
-------------------------------------------------------------------------- */
.news-list { margin-top: 70px; border-top: 1px solid #6c8fd8; }
.news-list li { border-bottom: 1px solid #6c8fd8; }
.news-list a { display: grid; grid-template-columns: 115px 151px 1fr; align-items: center; min-height: 72px; padding: 12px 0; }
.news-list .news-tag { justify-self: start; }
.news-list__ttl { font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; color: #111; transition: color .3s; }
.news-list a:hover .news-list__ttl { color: var(--c-main); }

/* ページ送り（WordPress の paginate_links() の出力に対応） */
.news-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; margin-top: 100px; }
.news-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 52px; border: 1px solid #a9b8e4; border-radius: 50%; font-family: var(--ff-en); font-size: 21px; line-height: 1; color: var(--c-text); transition: background-color .3s, color .3s; }
.news-pager a.page-numbers:hover { border-color: var(--c-main); color: var(--c-main); }
.news-pager .page-numbers.current { border-color: var(--c-main); background: var(--c-main); color: #fff; }
.news-pager .page-numbers.dots { width: auto; border: 0; border-radius: 0; font-size: 22px; letter-spacing: .1em; }
.news-pager .prev.page-numbers, .news-pager .next.page-numbers { width: 34px; border: 0; border-radius: 0; font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h23M17 1l6 6-6 6' fill='none' stroke='%230b3daf' stroke-width='1.2'/%3E%3C/svg%3E") center / 24px auto no-repeat; transition: transform .3s; }
.news-pager .prev.page-numbers { transform: scaleX(-1); }
.news-pager .next.page-numbers:hover { transform: translateX(4px); }
.news-pager .prev.page-numbers:hover { transform: scaleX(-1) translateX(4px); }

/* --------------------------------------------------------------------------
   おすすめ記事（TOP の .news-card を流用）
-------------------------------------------------------------------------- */
.news-reco { margin-top: 130px; }
.news-reco__ttl { display: flex; align-items: center; gap: 56px; font-family: var(--ff-mincho); font-weight: 400; font-size: 27px; line-height: 1.4; letter-spacing: .06em; color: var(--c-main); }
.news-reco__ttl::after { content: ""; flex: 1; height: 1px; background: var(--c-main); }
.news-reco__body { position: relative; width: 710px; max-width: 100%; margin: 52px auto 0; }
.news-reco__body .news__prev, .news-reco__body .news__next { top: 171px; }
.news-reco__body .news__prev { left: -22px; }
.news-reco__body .news__next { right: -22px; }
.news-reco .c-arrow { background: #fff; }

/* バナー帯 */
.news-banner { margin-top: 120px; padding: 62px 0 46px; background: #e8eff7; }
.news-banner .banner { margin-top: 0; }
.news-page { padding-bottom: 88px; }

/* --------------------------------------------------------------------------
   詳細
-------------------------------------------------------------------------- */
.news-article { padding-top: 95px; }
.news-article__meta { display: flex; align-items: center; gap: 26px; }
.news-article__ttl { margin-top: 28px; padding: 0 6px 12px; border-bottom: 1px solid #777; font-family: var(--ff-mincho); font-weight: 400; font-size: 27px; line-height: 1.5; letter-spacing: .06em; color: var(--c-main); }

/* 本文（WordPress の the_content() 出力をそのまま整える） */
.news-body { margin-top: 26px; font-size: 16px; line-height: 2; letter-spacing: .06em; color: var(--c-text); text-align: justify; }
.news-body > * + * { margin-top: 2em; }
.news-body p { margin: 0; }
.news-body > * + p { margin-top: 2em; }
.news-body figure, .news-body .wp-block-image { margin-top: 3.5em; margin-bottom: 3.5em; }
.news-body figure + p, .news-body .wp-block-image + p { margin-top: 0; }
.news-body img { display: block; width: 100%; height: auto; }
.news-body .noimg { aspect-ratio: 837 / 539; }
.news-body figcaption { margin-top: 8px; font-size: 13px; color: var(--c-gray); }
.news-body h2 { margin-top: 2.5em; padding-bottom: 8px; border-bottom: 1px solid var(--c-line); font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--c-main); }
.news-body h3 { margin-top: 2em; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--c-main); }
.news-body ul, .news-body ol { padding-left: 1.4em; }
.news-body ul { list-style: disc; }
.news-body ol { list-style: decimal; }
.news-body a { color: var(--c-main); text-decoration: underline; }
.news-body a:hover { text-decoration: none; }
.news-back { display: flex; justify-content: center; margin-top: 140px; }
.news-back .c-btn-line { min-width: 255px; height: 58px; font-size: 15px; }

/* ==========================================================================
   Tablet（〜1024px）
========================================================================== */
@media (max-width: 1024px) {
  .news-cats { margin-top: 40px; gap: 16px 12px; }
  .news-article { padding-top: 40px; }
  .news-reco__body { width: auto; padding: 0 30px; }
  .news-reco__body .news__prev { left: -8px; }
  .news-reco__body .news__next { right: -8px; }
}

/* ==========================================================================
   Smartphone（〜767px）
========================================================================== */
@media (max-width: 767px) {
  .news-inner { padding: 0 20px; }
  .news-date { font-size: 14px; }
  .news-tag { min-width: 90px; height: 26px; font-size: 12px; }

  .news-cats { justify-content: flex-start; gap: 10px 8px; margin-top: 20px; padding: 0 20px; }
  .news-cats a, .news-cats .is-w140 a, .news-cats .is-w200 a { min-width: 0; height: 36px; padding: 0 14px; font-size: 13px; letter-spacing: .04em; }

  .news-list { margin-top: 40px; }
  .news-list a { grid-template-columns: auto 1fr; gap: 6px 14px; padding: 16px 0; }
  .news-list__ttl { grid-column: 1 / -1; font-size: 15px; }

  .news-pager { gap: 8px; margin-top: 56px; }
  .news-pager .page-numbers { width: 42px; height: 38px; font-size: 17px; }
  .news-pager .prev.page-numbers, .news-pager .next.page-numbers { width: 26px; }

  .news-reco { margin-top: 80px; }
  .news-reco__ttl { gap: 20px; font-size: 21px; }
  .news-reco__body { margin-top: 32px; padding: 0; }
  .news-reco__body .news__prev, .news-reco__body .news__next { display: none; }

  .news-banner { margin-top: 80px; padding: 40px 0 30px; }
  .news-page { padding-bottom: 60px; }

  .news-article { padding-top: 20px; }
  .news-article__meta { gap: 14px; }
  .news-article__ttl { margin-top: 18px; padding: 0 0 10px; font-size: 20px; }
  .news-body { font-size: 15px; line-height: 1.9; letter-spacing: .04em; }
  .news-body figure, .news-body .wp-block-image { margin-top: 2.4em; margin-bottom: 2.4em; }
  .news-back { margin-top: 70px; }
  .news-back .c-btn-line { width: 100%; }
}