@charset "UTF-8";
/* =============================================================
   有限会社三共製作所 — お知らせ一覧／個別ページ専用スタイル (news.css)
   対応テンプレート: page-news.php（Template Name: お知らせ一覧）／ single.php（投稿全体）

   共通パーツ（ヘッダー／パンくず／フッター／ベースリセット）は
   assets/sankyo-global.css の「サブページ共通パーツ」セクションを利用
   （body.skss-subpage スコープ）。ページタイトル帯は写真素材が無いため
   本ファイル内で単色バーとして独自実装（他ページの page-title とは別マークアップ）。
   ============================================================= */

:root {
  --panel: #efece9;
  --white: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }

.en {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: .08em;
}

/* 14px下限ルールの safety net */
.nw-page small { font-size: 14px; }

/* =============================================================
   ページタイトル帯（単色。写真ヒーローの代わり）
   ============================================================= */
.nw-title {
  background: linear-gradient(135deg, var(--teal), var(--navy));
  padding: 72px 20px 56px;
  text-align: center;
}
.nw-title__jp {
  color: #fff; font-size: clamp(28px, 5vw, 40px); font-weight: 700; letter-spacing: .08em; margin: 0;
}
/* single.php では <p class="nw-title__jp"> を使うため、.nw-page p の14px下限セーフティネット
   （詳細度 .nw-page p = 0,1,1）に負けないよう、.nw-page .nw-title__jp（0,2,0）で明示的に上書きする */
.nw-page .nw-title__jp {
  font-size: clamp(28px, 5vw, 40px);
}

/* =============================================================
   2カラムレイアウト（本文＋サイドバー）
   ============================================================= */
.nw-layout { padding: 56px 0 88px; }
.nw-layout__inner {
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: flex-start; gap: clamp(32px, 5vw, 64px);
}
.nw-main { flex: 1 1 70%; min-width: 0; }

/* =============================================================
   お知らせ一覧（リスト）
   ============================================================= */
.nw-list { border-top: 1px solid #d9d4cf; }
.nw-list__item { border-bottom: 1px solid #d9d4cf; }
.nw-list__link {
  display: flex; align-items: flex-start; gap: 20px; padding: 24px 4px;
  color: inherit; text-decoration: none;
}
.nw-list__link:hover { opacity: .8; }
.nw-list__thumb {
  flex: none; width: 96px; height: 72px; border-radius: 4px; overflow: hidden;
  background: var(--navy); display: flex; align-items: center; justify-content: center;
}
.nw-list__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* サムネイル未設定時のロゴ画像は縦長のため、object-fit:coverだと上下が切れてしまう。
   .nw-list__thumb img（詳細度0,1,1）に確実に勝つよう .nw-list__thumb img.nw-list__thumb-fallback（0,2,1）で上書きし、
   contain＋余白で切れずに収まるようにする */
.nw-list__thumb img.nw-list__thumb-fallback {
  width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box;
}
.nw-list__thumb-mark { width: 40px; height: 40px; color: #fff; }
.nw-list__thumb-mark svg { width: 100%; height: 100%; }
.nw-list__body { flex: 1 1 auto; min-width: 0; }
.nw-list__meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gray); margin-bottom: 6px; }
.nw-list__cat {
  display: inline-flex; padding: 2px 10px; background: var(--panel); color: var(--navy);
  border-radius: 999px; font-weight: 700; font-size: 14px;
}
.nw-list__title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.5; }
.nw-list__excerpt {
  font-size: 15px; color: var(--gray); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-empty { padding: 40px 4px; color: var(--gray); text-align: center; }

/* =============================================================
   ページネーション
   ============================================================= */
.nw-pager { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.nw-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 8px; border-radius: 4px;
  background: var(--panel); color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none;
}
.nw-pager .page-numbers.current { background: var(--teal); color: #fff; }
.nw-pager .page-numbers.dots { background: transparent; }
.nw-pager a.page-numbers:hover { background: var(--teal-light); color: #fff; }

/* =============================================================
   個別お知らせ記事
   ============================================================= */
.nw-article { border-top: 1px solid #d9d4cf; padding-top: 32px; }
.nw-article__meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gray); margin-bottom: 12px; }
.nw-article__cat {
  display: inline-flex; padding: 2px 10px; background: var(--panel); color: var(--navy);
  border-radius: 999px; font-weight: 700; font-size: 14px;
}
/* body.skss-subpage h1{margin:0}（詳細度: 1クラス+2要素）に、.nw-article__title（1クラスのみ）
   だと負けてしまうため、body.skss-subpageを前置して詳細度を引き上げ確実に効かせる */
body.skss-subpage .nw-article__title { font-size: clamp(21px, 3vw, 28px); font-weight: 700; color: var(--ink); line-height: 1.5; margin: 0 0 24px; }
.nw-article__thumb { margin-bottom: 28px; border-radius: 6px; overflow: hidden; }
.nw-article__thumb img { width: 100%; height: auto; display: block; }
.nw-article__body { font-size: 16px; line-height: 2; color: #3a312d; }
/* body.skss-subpage p{margin:0}（詳細度: 1クラス+2要素）に、.nw-article__body p（1クラス+1要素）
   だと負けてしまうため、body.skss-subpageを前置して詳細度を引き上げ確実に効かせる */
body.skss-subpage .nw-article__body p { margin-bottom: 1.6em; }
.nw-article__body a { color: var(--teal); text-decoration: underline; }
.nw-article__body img { max-width: 100%; height: auto; }

.nw-back { margin-top: 40px; padding-top: 24px; border-top: 1px solid #d9d4cf; }
.nw-back a { color: var(--teal); font-weight: 700; text-decoration: none; }
.nw-back a:hover { text-decoration: underline; }

/* =============================================================
   カテゴリーサイドバー
   ============================================================= */
.news-side { flex: 1 1 28%; min-width: 220px; max-width: 300px; }
.news-side__box { background: var(--panel); border-radius: 6px; padding: 24px 22px; }
.news-side__heading {
  font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--ink);
  padding-bottom: 12px; margin-bottom: 12px !important; border-bottom: 2px solid var(--teal);
}
.news-side__list { list-style: none; margin: 0; padding: 0; }
.news-side__list li + li { margin-top: 4px; }
.news-side__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 8px; border-radius: 4px; color: #3a312d; text-decoration: none; font-size: 15px;
}
.news-side__list a:hover { background: rgba(255,255,255,.6); }
.news-side__list a.is-current { background: var(--teal); color: #fff; font-weight: 700; }
.news-side__count { font-size: 14px; color: inherit; opacity: .7; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 860px) {
  .nw-layout__inner { flex-direction: column; }
  .news-side { max-width: none; width: 100%; }
}

@media (max-width: 560px) {
  .nw-title { padding: 56px 20px 40px; }
  .nw-layout { padding: 40px 0 56px; }
  .nw-list__link { gap: 14px; padding: 18px 4px; }
  .nw-list__thumb { width: 72px; height: 54px; }
  .nw-list__title { font-size: 16px; }
}