@charset "UTF-8";
/* ==========================================================================
 * 一覧ページ v13（2026/9/14）　doc 212
 *   対象：カテゴリ・タグなどのアーカイブ／検索結果／固定ページ「新着記事一覧」
 *   読み込み条件は functions.php を参照。child-style.css より後に読みます。
 *
 * ★ マークアップは template-1/archive-parts.php が出しています。
 *   クラス名はすべて nk- で始めているので、既存CSSとぶつかりません。
 * ========================================================================== */

:root{
  --nk-navy:#161A38;
  --nk-ink:#2c2f3a;
  --nk-sub:#5f6472;
  --nk-mute:#8b909c;
  --nk-line:#e4e6eb;
  --nk-line2:#eef0f3;
  --nk-bg2:#f6f7f9;
  --nk-mincho:"Hiragino Mincho ProN","Yu Mincho",serif;
}

/* ========== 1. カラム ──────────────────────────────
   #primary は親テーマで float:left。そのままだと親（850px）の左端に貼りつき、
   左右の余白が食い違います。float を外して左右 auto で中央に置きます。
   幅は記事ページ（article-v13.css）と同じ720px。左端の基準線が1本になります。 */
.archive #primary,
.search #primary,
.page-post-list #primary{float:none;max-width:720px;margin-left:auto;margin-right:auto}

/* ★ .site-main は child-style で display:flex ＋ gap:40px。
   そのままだと見出し・タブ・一覧のあいだが一律40px空いてしまうので、
   一覧ページだけ通常のブロックに戻し、余白はそれぞれの要素で決めます。 */
.archive .site-content .site-main,
.search .site-content .site-main,
.page-post-list .site-content .site-main{display:block}

/* 親テーマが出す空の figure.entry-thumbnail を無害化 */
.archive .site-main .entry-thumbnail:has(> a:empty),
.search .site-main .entry-thumbnail:has(> a:empty),
.page-post-list .site-main .entry-thumbnail:has(> a:empty){display:none}

/* ========== 2. ページ見出し ────────────────────── */
.site-content .site-main .nk-ah{margin:0;padding:0 0 20px;border:0;background:none}
.site-content .site-main .nk-ah h1{
  margin:0;padding:0;font-size:34px;font-weight:700;line-height:1.45;color:var(--nk-navy);
  display:flex;align-items:baseline;gap:0 12px;flex-wrap:wrap;text-align:left;border:0;background:none}
.site-content .site-main .nk-ah h1 .par{font-size:19px;font-weight:700;color:var(--nk-mute)}
.site-content .site-main .nk-ah h1 .par:hover{color:var(--nk-sub);text-decoration:none}
.site-content .site-main .nk-ah h1 .sl{font-size:16px;color:#ccd0d8;margin:0 -2px}
.site-content .site-main .nk-ah h1 .cnt{font-size:13px;font-weight:400;color:var(--nk-mute)}
.site-content .site-main .nk-ah h1 .cnt i{
  font-family:var(--nk-mincho);font-style:italic;font-size:17px;color:var(--nk-sub);margin-right:2px}
.site-content .site-main .nk-ah .lead{margin:11px 0 0;font-size:14.5px;line-height:1.9;color:var(--nk-sub)}
.site-content .site-main .nk-ah .lead p{margin:0;font-size:14.5px;line-height:1.9;color:var(--nk-sub)}

/* ========== 3. 第1段：大分類（下線タブ） ───────────── */
.site-content .site-main .nk-tabs{
  display:flex;flex-wrap:wrap;gap:0 26px;border-bottom:1px solid var(--nk-line)}
.site-content .site-main .nk-tabs a{
  position:relative;display:inline-flex;align-items:baseline;gap:6px;
  padding:0 0 13px;font-size:14.5px;font-weight:700;line-height:1.5;
  color:var(--nk-mute);white-space:nowrap;text-decoration:none}
.site-content .site-main .nk-tabs a i{
  font-family:var(--nk-mincho);font-style:italic;font-size:12.5px;font-weight:400;color:#b5bac4}
.site-content .site-main .nk-tabs a:hover{color:var(--nk-sub);text-decoration:none}
.site-content .site-main .nk-tabs a.on{color:var(--nk-navy)}
.site-content .site-main .nk-tabs a.on:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--nk-navy)}

/* ========== 4. 第2段：小分類（チップ） ───────────── */
.site-content .site-main .nk-subs{
  display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 0;align-items:center}
.site-content .site-main .nk-subs .lb{
  font-size:11.5px;line-height:1.6;color:var(--nk-mute);margin-right:2px;white-space:nowrap}
.site-content .site-main .nk-subs a{
  display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 13px;
  border:1px solid var(--nk-line);border-radius:4px;background:#fff;
  font-size:12.5px;font-weight:700;line-height:1;color:var(--nk-sub);
  white-space:nowrap;text-decoration:none}
.site-content .site-main .nk-subs a i{
  font-family:var(--nk-mincho);font-style:italic;font-size:11.5px;font-weight:400;color:#b5bac4}
.site-content .site-main .nk-subs a:hover{border-color:#c3c8d4;color:var(--nk-navy);text-decoration:none}
.site-content .site-main .nk-subs a.on{background:var(--nk-navy);border-color:var(--nk-navy);color:#fff}
.site-content .site-main .nk-subs a.on i{color:rgba(255,255,255,.65)}

/* ========== 5. 記事リスト ────────────────────── */
.site-content .site-main .nk-plist{list-style:none;margin:8px 0 0;padding:0}
.site-content .site-main .nk-plist > li{
  margin:0;padding:0;border-bottom:1px solid var(--nk-line2);list-style:none}
.site-content .site-main .nk-plist > li:before{content:none}
.site-content .site-main .nk-plist > li > a{
  display:flex;gap:20px;align-items:flex-start;padding:24px 0;text-decoration:none;color:inherit}
.site-content .site-main .nk-plist > li > a:hover{text-decoration:none}
.site-content .site-main .nk-plist > li > a:hover .ttl{color:#3a4068}

/* ★ 2026/9/14（doc 221）4:3 → 16:9。記事ページのアイキャッチと同じ比率にしました。
   これで1枚の画像が切り取られなくなり、アイキャッチ側の左右余白を詰められます。 */
.site-content .site-main .nk-plist .th{
  flex:0 0 240px;width:240px;height:135px;background:var(--nk-bg2);overflow:hidden;display:block}
.site-content .site-main .nk-plist .th img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
/* アイキャッチが無い記事は .nk-fb（site-v12.css）がその場で描きます */

.site-content .site-main .nk-plist .tx{min-width:0;flex:1 1 auto}
.site-content .site-main .nk-plist .tx > span{display:block}
.site-content .site-main .nk-plist .tx > .cat{
  margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;font-size:11px;font-weight:700;line-height:1}
.site-content .site-main .nk-plist .cat span{
  display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:3px;
  background:var(--nk-navy);color:#fff}
.site-content .site-main .nk-plist .cat span.g{
  background:var(--nk-bg2);color:var(--nk-sub);border:1px solid var(--nk-line)}
.site-content .site-main .nk-plist .ttl{
  margin:9px 0 0;font-size:19px;font-weight:700;line-height:1.6;color:var(--nk-navy)}
.site-content .site-main .nk-plist .tx > .ex{
  margin:7px 0 0;font-size:14px;line-height:1.85;color:var(--nk-sub);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.site-content .site-main .nk-plist .dt{margin:9px 0 0;font-size:11.5px;line-height:1;color:var(--nk-mute)}
.site-content .site-main .nk-plist .dt i{
  font-family:var(--nk-mincho);font-style:italic;font-size:13px;color:var(--nk-sub)}

/* ========== 6. ページ送り（親テーマの pagination()） ========== */
.archive .site-main .pagination,
.search .site-main .pagination,
.page-post-list .site-main .pagination{
  display:flex;gap:6px;align-items:center;justify-content:center;padding:34px 0 0;
  border:0;background:none}
.archive .site-main .pagination a,
.archive .site-main .pagination span,
.search .site-main .pagination a,
.search .site-main .pagination span,
.page-post-list .site-main .pagination a,
.page-post-list .site-main .pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;margin:0;
  border:1px solid var(--nk-line);border-radius:4px;background:#fff;
  font-size:13.5px;font-weight:700;color:var(--nk-sub);text-decoration:none}
.archive .site-main .pagination a:hover,
.search .site-main .pagination a:hover,
.page-post-list .site-main .pagination a:hover{border-color:#c3c8d4;color:var(--nk-navy)}
.archive .site-main .pagination .current,
.search .site-main .pagination .current,
.page-post-list .site-main .pagination .current{
  background:var(--nk-navy);border-color:var(--nk-navy);color:#fff}

/* ========== 7. 記事が無いとき ────────────────── */
.site-content .site-main .nk-none{
  margin:24px 0 0;padding:26px 24px;border:1px solid var(--nk-line);background:var(--nk-bg2);
  font-size:14.5px;line-height:1.9;color:var(--nk-sub);border-radius:4px}

/* ========== 8. スマートフォン ─────────────────── */
@media screen and (max-width:767px){
  .site-content .site-main .nk-ah{padding:0 0 16px}
  .site-content .site-main .nk-ah h1{font-size:25px;line-height:1.5}
  .site-content .site-main .nk-ah h1 .par{font-size:15px}
  .site-content .site-main .nk-ah .lead,
  .site-content .site-main .nk-ah .lead p{font-size:13.5px}

  .site-content .site-main .nk-tabs{
    gap:0 18px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:1px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .site-content .site-main .nk-tabs::-webkit-scrollbar{display:none}
  .site-content .site-main .nk-tabs a{font-size:13.5px}

  .site-content .site-main .nk-subs{
    flex-wrap:nowrap;overflow-x:auto;padding:14px 0 2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .site-content .site-main .nk-subs::-webkit-scrollbar{display:none}
  .site-content .site-main .nk-subs .lb{display:none}

  /* ★ 2026/9/14（doc 221）スマホは縦積み。
     横並びのままサムネイルを16:9にすると、文章の幅が180pxまで痩せて
     タイトルが4行に折り返してしまいます。全幅にして16:9を見せます。 */
  .site-content .site-main .nk-plist > li > a{display:block;gap:0;padding:20px 0}
  .site-content .site-main .nk-plist .th{flex:none;width:100%;height:auto;aspect-ratio:16/9}
  .site-content .site-main .nk-plist .tx{margin-top:13px}
  .site-content .site-main .nk-plist .ttl{font-size:16px;line-height:1.6;margin-top:8px}
  .site-content .site-main .nk-plist .tx > .ex{font-size:13px;line-height:1.8;margin-top:6px}

  .archive .site-main .pagination,
  .search .site-main .pagination,
  .page-post-list .site-main .pagination{padding:26px 0 0;flex-wrap:wrap}
}