/* /news（一覧・詳細）の専用。/about と同トーンを踏襲 */

/* 2カラム */
.news-2col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
}
.news-main { min-width: 0; }
.news-side { position: relative; }

.news-listing {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-item { border-bottom: 1px solid #ddd; }
.news-link {
  display: grid;
  grid-template-columns: 110px 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  color: #000;
}
.news-date { font-weight: 700; text-align: right; }
.news-category {
  display: inline-block;
  text-align: center;
  background: #3366cc;
  color: #fff;
  padding: 2px 8px;
  font-size: .85rem;
  border-radius: 4px;
}
.news-title { overflow-wrap: anywhere; }

.news-empty { color: #333; padding: 8px 0; }

/* 本文（一覧用） */
.news-body {
  margin: 8px 0 18px;
  color: #333;
  line-height: 1.8;
}
.news-body p { margin: 0 0 1em; }
.news-body img,
.news-body figure img{
  max-width: 100%;
  height: auto;
  display: block;
}
.news-body figure{
  margin: 10px 0 16px;
}
.news-body .wp-caption,
.news-body figure.wp-block-image{
  text-align: center;
}
.news-body .wp-caption-text{
  font-size: .9rem;
  color: #666;
  margin-top: 6px;
}

/* meta（詳細） */
.news-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 8px 0 18px;
}
.news-meta__date { font-weight: 700; }
.news-meta__cat {
  background: #3366cc;
  color: #fff; border-radius: 4px;
  padding: 2px 8px; font-size: .85rem;
}

/* ページャ（一覧） */
.news-pagination { margin-top: 18px; text-align: center; }
.news-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin: 0 4px;
  padding: 0 10px;
  border: 1px solid #000;     /* □で囲む */
  background: #fff;           /* バック白 */
  color: #000;                /* 文字黒 */
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.news-pagination .page-numbers.current{
  background: #000;           /* 反転：黒背景 */
  color: #fff;                /* 反転：白文字 */
  border-color: #000;
  cursor: default;
}
.news-pagination a.page-numbers:hover{ opacity: .85; }
.news-pagination .page-numbers.dots{
  border: none; background: transparent; color: #555;
  min-width: auto; height: auto; padding: 0 6px;
}

/* ---- 前後ナビ（詳細ページ）左右配置＆見た目＝ページャと統一 ---- */
.post-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}
.post-nav__prev, .post-nav__next{ flex: 1 1 50%; }
.post-nav__prev{ text-align: left; }
.post-nav__next{ text-align: right; }

/* ボタン体裁：黒文字・白背景・黒枠（ページャと同トーン） */
.post-nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}
.post-nav a:hover{ opacity: .85; }

/* 文字が長い場合も折り返して崩れないように */
.post-nav__prev a, .post-nav__next a{ word-break: break-word; }

/* ===== 右サイドバーの装飾（最近／カテゴリ／月別）===== */
.news-side .news-widget{
  background: linear-gradient(180deg, #f8f8f8 0%, #eeeeee 100%);
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.news-side .news-widget__title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

/* クリックできる項目：濃い灰色＋点線アンダーライン */
.news-side .news-recent li a,
.news-side .news-categories li a,
.news-side .news-archives li a{
  display: block;
  color: #555;
  text-decoration: none;
  padding: 6px 2px 8px;
  border-bottom: 1px dotted #999;
  transition: color .15s ease, border-color .15s ease;
}
.news-side .news-recent li a:hover,
.news-side .news-categories li a:hover,
.news-side .news-archives li a:hover,
.news-side .news-recent li a:focus-visible,
.news-side .news-categories li a:focus-visible,
.news-side .news-archives li a:focus-visible{
  color: #222;
  border-bottom-color: #666;
  outline: none;
}
.news-side .news-recent, .news-side .news-categories, .news-side .news-archives{
  margin: 0; padding: 0;
}
.news-side .news-recent li, .news-side .news-categories li, .news-side .news-archives li{
  margin: 0;
}

/* サイドバーのリストマーカーを完全に無効化（箇条書きの点を消す） */
.news-side ul,
.news-side ol{
  list-style: none !important;   /* discなどのマーカーを無効化 */
  padding-left: 0;               /* 左のインデントも詰める */
  margin-left: 0;
}
.news-side li{
  list-style: none !important;   /* 念のため */
}
.news-side li::marker{
  content: "" !important;        /* ::marker で付く点も消す（Safari等対策） */
}

/* 念のため、対象のクラス付きULにも明示（どれか使っていれば有効） */
.news-side .news-recent,
.news-side .news-categories,
.news-side .news-archives{
  list-style: none !important;
  padding-left: 0;
  margin-left: 0;
}

/* ===== パンくずリスト 横並び表示 ===== */
.breadcrumb {
  font-size: 0.85rem;
  margin: 0 0 12px;
  color: #666;
}

.breadcrumb ol,
.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;           /* 横並びに */
  flex-wrap: wrap;         /* 折返し可 */
  gap: 6px;                /* 各要素の間隔 */
}

.breadcrumb li {
  display: inline;         /* インライン要素化 */
}

.breadcrumb li::after {
  content: "›";            /* 区切り記号 */
  margin: 0 6px;
  color: #999;
}

.breadcrumb li:last-child::after {
  content: "";             /* 最後は区切り消す */
}

.breadcrumb a {
  color: #3366cc;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}


/* =========================================================
   レスポンシブ（モバイル設定は下部へ集約）
   - ≤880px：レイアウト1カラム（サイドバー下）
   - ≤768px：リスト内を 1行目=日付+カテゴリ、2行目=タイトル に再整列
   ========================================================= */

/* タブレット：レイアウトのみ（挙動は従来どおり） */
@media (max-width: 880px) {
  .news-2col { grid-template-columns: 1fr; }
  /* 一覧のカラム幅はこの段階では据え置き（従来表示を維持） */
}

/* スマホ：日付+カテゴリ → タイトル（2段） */
@media (max-width: 768px) {
  /* グリッド → フレックス（2段に組み替える） */
  .news-link{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;      /* 1行目の間隔を少し確保 */
    padding: 12px 0;   /* 既存値のまま */
  }
  /* 1行目：日付＋カテゴリ（左寄せ） */
  .news-date,
  .news-category{
    order: 1;
  }
  .news-date{
    text-align: left;  /* 右寄せ→左寄せに */
    min-width: auto;   /* グリッド幅の名残を打ち消し */
  }
  /* 2行目：タイトル（行全体を占有） */
  .news-title{
    order: 2;
    flex-basis: 100%;
    margin-top: 2px;
  }
    /* --- ページネーション（スマホ最小化 v2：さらに小さく＆隙間を狭く） --- */
  .page-news .nav-links,
  .category .nav-links,
  .page-news .pagination,
  .category .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;                 /* 4px → 2px */
    flex-wrap: nowrap;        /* 折り返させない */
    overflow-x: auto;         /* はみ出し時は横スクロール */
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;           /* 6px → 4px */
    scrollbar-width: none;
  }
  .page-news .nav-links::-webkit-scrollbar,
  .category .nav-links::-webkit-scrollbar,
  .page-news .pagination::-webkit-scrollbar,
  .category .pagination::-webkit-scrollbar { display: none; }

  .page-news .page-numbers,
  .category .page-numbers,
  .page-news .pagination a,
  .category .pagination a,
  .page-news .pagination span,
  .category .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;          /* 30px → 26px */
    height: 24px;             /* 28px → 24px */
    padding: 0 4px;           /* 6px → 4px */
    font-size: 11px;          /* 12px → 11px */
    line-height: 1;
    border: 1px solid #000;
    background: #fff;
    white-space: nowrap;
  }
  .page-news .page-numbers.current,
  .category .page-numbers.current { background:#000; color:#fff; }

  /* Prev / Next も小さめに */
  .page-news .pagination .prev,
  .category .pagination .prev,
  .page-news .pagination .next,
  .category .pagination .next {
    min-width: 40px;          /* 44px → 40px */
    padding: 0 6px;           /* 8px → 6px */
  }

  /* 省略記号 (…) はさらにコンパクトに */
  .page-news .page-numbers.dots,
  .category .page-numbers.dots {
    min-width: auto;
    padding: 0 2px;
  }

}