/* =============================================================
   NEWS SITE (/news/ 配下) — 紙面+白カードのニュースデザイン
   =============================================================
   スコープ: body.is-newsmode(inc/news-setup.php が付与)。
   ニュース面(/news/ 一覧・カテゴリ・個別記事・タグ)にのみ
   条件 enqueue される(functions.php)。既存の株アプリ風デザイン
   (main.css)はマストヘッド/ティッカー/フッターとして残し、
   地色はサイト共通の暖色オフホワイト(--paper)、カード・記事面は
   白サーフェスのニュースメディアにする(2026-07-27 配色決定)。

   カテゴリ配色は scripts/newsbot/eyecatch.mjs の CATEGORY_STYLES と
   同期している。変更時は両方を揃えること。
   ============================================================= */

body.is-newsmode {
    /* ---- ニュース面トークン ----
       地色はサイト共通の暖色オフホワイト(--paper)に合わせ、カード・記事面だけを
       白サーフェスにする(クリーム紙面に白カードが並ぶ新聞的構成。2026-07-27 ユーザー決定)。
       マストヘッド/フッターと地続きになり、色の断絶が出ない。 */
    --nx-canvas: var(--paper);     /* 地色 = 紙色 #f3efe6 */
    --nx-surface: #ffffff;         /* カード・記事本文の白サーフェス */
    --nx-soft: var(--paper-2);     /* 淡い面(出典ブロック・画像下地) */
    --nx-ink: var(--ink);
    --nx-muted: var(--muted);
    --nx-line: rgba(10, 10, 10, 0.12);
    --nx-line-strong: var(--rule);
    --nx-link: #1d4ed8;
    --nx-accent: #c8232c;          /* ブランド赤(--up と同系) */
    --nx-radius: 12px;

    /* カテゴリ配色(白地に白文字チップで AA を満たす濃度) */
    --nx-cat-new-products: #1d4ed8;
    --nx-cat-rumors: #6d28d9;
    --nx-cat-price-changes: #b45309;
    --nx-cat-sale: #15803d;
    --nx-cat-trade-in: #c8232c;
    --nx-cat-apps-os: #0f766e;
    --nx-cat-general: #52525b;

    /* 暗色ウィジェット内の騰落色(日本株慣行: 上昇=赤 / 下落=緑) */
    --nx-dark-up: #ff6b6b;
    --nx-dark-down: #5be39c;
    --nx-dark-flat: #9ca3af;

    background: var(--nx-canvas);
    color: var(--nx-ink);
}
/* 紙目テクスチャ(.page::before)はサイト共通のまま活かす(上下 chrome と同じ質感) */

body.is-newsmode a:focus-visible {
    outline: 2px solid var(--nx-link);
    outline-offset: 2px;
    border-radius: 2px;
}

/* WP コア準拠の視覚非表示テキスト(the_posts_pagination の見出し等が使う。
   テーマ全体に定義が無いため、ニュース面で必要になったここで定義) */
body.is-newsmode .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* -------------------------------------------------------------
   カテゴリ配色ユーティリティ
   ------------------------------------------------------------- */
.nxcat-bg--new-products  { background: var(--nx-cat-new-products); }
.nxcat-bg--rumors        { background: var(--nx-cat-rumors); }
.nxcat-bg--price-changes { background: var(--nx-cat-price-changes); }
.nxcat-bg--sale { background: var(--nx-cat-sale); }
.nxcat-bg--trade-in      { background: var(--nx-cat-trade-in); }
.nxcat-bg--apps-os       { background: var(--nx-cat-apps-os); }
.nxcat-bg--general       { background: var(--nx-cat-general); }

.nxcat-line--new-products  { border-top-color: var(--nx-cat-new-products); }
.nxcat-line--rumors        { border-top-color: var(--nx-cat-rumors); }
.nxcat-line--price-changes { border-top-color: var(--nx-cat-price-changes); }
.nxcat-line--sale { border-top-color: var(--nx-cat-sale); }
.nxcat-line--trade-in      { border-top-color: var(--nx-cat-trade-in); }
.nxcat-line--apps-os       { border-top-color: var(--nx-cat-apps-os); }
.nxcat-line--general       { border-top-color: var(--nx-cat-general); }

/* カテゴリバッジ(チップ) */
.nxbadge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 4px;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: #fff;
    background: var(--nx-cat-general); /* 既定色。下の .nxcat--* が上書きする */
}

/* バッジのカテゴリ色。**必ず .nxbadge の後に置くこと**。
   .nxbadge と詳細度が同じ(0,1,0)なので、前に置くと .nxbadge の既定背景に
   後ろから上書きされ、全カテゴリがグレー(--nx-cat-general)になる。
   2026-08-07 まで実際にそうなっており、カード・記事見出しのカテゴリ色が
   出ていなかった(特価バッジと PR バッジが同色になって発覚)。 */
.nxcat--new-products  { background: var(--nx-cat-new-products); }
.nxcat--rumors        { background: var(--nx-cat-rumors); }
.nxcat--price-changes { background: var(--nx-cat-price-changes); }
.nxcat--sale { background: var(--nx-cat-sale); }
.nxcat--trade-in      { background: var(--nx-cat-trade-in); }
.nxcat--apps-os       { background: var(--nx-cat-apps-os); }
.nxcat--general       { background: var(--nx-cat-general); }

/* バッジを 2 つ以上並べる箱(特価カードの「特価」+「PR」)。
   .newscard__body は flex column なので、横並びにするにはラッパが要る */
.nxbadges {
    display: inline-flex;
    align-self: flex-start;
    gap: 6px;
}

/* PR バッジ。景表法のステマ規制対応で、アフィリエイトリンクを含む記事の
   カード・見出しに必ず添える。カテゴリ色と混同されないよう無彩色にする
   (記事末尾の .nxbuy__pr と同じ見た目に揃えてある) */
.nxbadge--pr {
    background: var(--nx-muted);
    letter-spacing: 0.08em;
}

/* 行(row)バリアント用の小さいバッジ。サイドバー幅では通常サイズだと窮屈になる */
.nxbadge--sm {
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.5;
}

/* -------------------------------------------------------------
   レイアウト骨格
   ------------------------------------------------------------- */
.newsmain {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 22px 72px;
}

/* ヒーロー行(ヒーロー+Trending)と本文行(メイン+サイドバー)は
   同じ 2 カラム比率で、右レールが 1 本に見えるよう揃える */
.newstop,
.newslayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px 36px;
    align-items: start;
}
.newstop {
    margin-bottom: 40px;
}
/* グリッド子要素の min-width:auto による横はみ出しを防ぐ */
.newstop__hero,
.newslayout__main {
    min-width: 0;
}

/* ページヘッダ(カテゴリ面・一覧ページ送り面) */
.newspage-head {
    padding: 6px 0 22px;
    border-bottom: 2px solid var(--nx-line-strong);
    margin-bottom: 28px;
}
.newspage-head__kicker {
    font-family: var(--f-display);
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--nx-accent);
    text-transform: uppercase;
    margin: 0 0 8px;
}
.newspage-head__title {
    font-family: var(--f-body);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.01em;
    margin: 0;
}
.newspage-head__desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--nx-muted);
    max-width: 720px;
}
/* 一覧冒頭の注記。特価一覧のアフィリエイト開示に使う(景表法のステマ規制) */
.newspage-head__note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--nx-muted);
}
.newspage-head__meta {
    margin: 10px 0 0;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--nx-muted);
}

/* -------------------------------------------------------------
   HERO — 最新 1 本を大型で
   ------------------------------------------------------------- */
.newshero {
    display: block;
}
.newshero__link {
    display: block;
}
.newshero__media {
    position: relative;
    aspect-ratio: 1.91 / 1;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    overflow: hidden;
    background: var(--nx-surface);
}
.newshero__media img,
.newshero__media .nxph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.newshero__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 4px 0;
}
.newshero__title {
    margin: 0;
    font-family: var(--f-body);
    font-size: 27px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.newshero__link:hover .newshero__title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.newshero__lead {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--nx-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.newshero__date {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--nx-muted);
}

/* -------------------------------------------------------------
   NEWSCARD — 標準記事カード(グリッド用)
   ------------------------------------------------------------- */
.newsgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 20px;
}
.newscard {
    display: block;
}
.newscard__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    overflow: hidden;
    background: var(--nx-surface);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.newscard__link:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.12);
}
.newscard__media {
    position: relative;
    aspect-ratio: 1.91 / 1;
    background: var(--nx-soft);
}
.newscard__media img,
.newscard__media .nxph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.newscard__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 15px 15px;
    flex: 1;
}
.newscard__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.newscard__date {
    margin-top: auto;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--nx-muted);
}

/* -------------------------------------------------------------
   NEWSROW — 小サムネ横並び(Trending / サイドバー最新 / 関連)
   ------------------------------------------------------------- */
.newsrows {
    display: flex;
    flex-direction: column;
}
.newsrow {
    border-bottom: 1px solid var(--nx-line);
}
.newsrow:last-child {
    border-bottom: 0;
}
.newsrow__link {
    display: grid;
    grid-template-columns: auto 92px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 0;
}
.newsrow__link:hover .newsrow__title {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.newsrow--noindex .newsrow__link {
    grid-template-columns: 92px minmax(0, 1fr);
}
.newsrow__num {
    font-family: var(--f-display);
    font-size: 20px;
    line-height: 1;
    color: var(--nx-accent);
    min-width: 26px;
    text-align: center;
}
.newsrow__thumb {
    position: relative;
    aspect-ratio: 1.91 / 1;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--nx-surface);
}
.newsrow__thumb img,
.newsrow__thumb .nxph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.newsrow__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.newsrow__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.newsrow__date {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--nx-muted);
}
/* 行の下段(日付 + バッジ)。特価の行カードだけが使う */
.newsrow__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* -------------------------------------------------------------
   特価カード(template-parts/deal/card.php)
   ニュース面(/news/)の特価セクションでも使うため、deal.css ではなくここに置く。
   deal.css は /deals/ 配下でしか読み込まれない(functions.php)。
   ------------------------------------------------------------- */
/* カードの本文リード。特価は価格を出せないぶん、何の製品かを一行で見せる */
.dealcard__lead {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--nx-muted);
}

/* -------------------------------------------------------------
   セクション(最新・カテゴリ面・関連記事)
   ------------------------------------------------------------- */
.newssec {
    margin-bottom: 44px;
}
.newssec__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-top: 3px solid var(--nx-line-strong);
    padding-top: 12px;
    margin-bottom: 18px;
}
.newssec__title {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 0.01em;
}
.newssec__slug {
    font-family: var(--f-display);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nx-muted);
}
.newssec__more {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nx-muted);
    white-space: nowrap;
}
.newssec__more:hover {
    color: var(--nx-accent);
}
/* セクション見出し直下の注記。特価セクションのアフィリエイト開示に使う
   (景表法のステマ規制。カード個別の PR バッジと二重で明示する) */
.newssec__note {
    margin: -8px 0 16px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--nx-muted);
}

/* -------------------------------------------------------------
   サイドバー
   ------------------------------------------------------------- */
.newsside {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}
.newsside__block { min-width: 0; }
.newsside__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--f-display);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nx-ink);
}
.newsside__label::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--nx-accent);
}

/* 価格ウォッチリスト(暗色ウィジェット = 本体機能への導線) */
.nxquotes {
    background: #0a0a0a;
    border-radius: var(--nx-radius);
    padding: 14px 14px 6px;
    color: #fff;
}
.nxquotes__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.nxquotes__title {
    font-family: var(--f-display);
    font-size: 13px;
    letter-spacing: 0.14em;
}
.nxquotes__live {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--nx-dark-up);
}
.nxquotes__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 10px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nxquotes__row:last-of-type {
    border-bottom: 0;
}
.nxquotes__sym {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #9ca3af;
}
.nxquotes__px {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    font-weight: 500;
    text-align: right;
    color: #fff;
}
.nxquotes__spark {
    display: flex;
    align-items: center;
    color: var(--nx-dark-flat);
}
.nxquotes__spark .spark {
    width: 72px;
    height: 20px;
}
.nxquotes__dx {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    text-align: right;
    align-self: center;
    color: var(--nx-dark-flat);
}
.nxquotes__row.is-up .nxquotes__dx,
.nxquotes__row.is-up .nxquotes__spark { color: var(--nx-dark-up); }
.nxquotes__row.is-down .nxquotes__dx,
.nxquotes__row.is-down .nxquotes__spark { color: var(--nx-dark-down); }
.nxquotes__row:hover .nxquotes__sym { color: #fff; }
.nxquotes__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px -14px 0;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
}
.nxquotes__cta:hover {
    color: var(--nx-dark-up);
}

/* カテゴリ一覧ブロック */
.nxcats {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--nx-line);
}
.nxcats__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--nx-line);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nx-ink);
}
.nxcats__item:hover {
    color: var(--nx-accent);
}
.nxcats__dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: 0 0 auto;
}
.nxcats__count {
    margin-left: auto;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 400;
    color: var(--nx-muted);
}

/* -------------------------------------------------------------
   記事ページ(single)
   ------------------------------------------------------------- */
/* 記事全体は白パネル(紙面の上の読み物サーフェス) */
.nxarticle {
    min-width: 0;
    background: var(--nx-surface);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    padding: 28px 32px 32px;
}
.nxarticle__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}
.nxarticle__title {
    margin: 0;
    font-family: var(--f-body);
    font-size: 29px;
    font-weight: 900;
    line-height: 1.55;
    letter-spacing: 0.01em;
}
.nxarticle__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--nx-muted);
}
.nxarticle__hero {
    margin: 0 0 26px;
}
.nxarticle__hero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--nx-radius);
}
.nxarticle__body {
    font-size: 16px;
    line-height: 2;
    max-width: 100%;
}
.nxarticle__body > * + * {
    margin-top: 1.4em;
}
.nxarticle__body p {
    margin: 1.4em 0;
}
.nxarticle__body h2 {
    margin: 2.2em 0 1em;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--nx-line-strong);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.6;
}
.nxarticle__body h3 {
    margin: 1.8em 0 0.8em;
    padding-left: 12px;
    border-left: 4px solid var(--nx-accent);
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.6;
}
.nxarticle__body ul,
.nxarticle__body ol {
    padding-left: 1.6em;
}
.nxarticle__body li {
    margin: 0.5em 0;
}
.nxarticle__body a {
    color: var(--nx-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.nxarticle__body a:hover {
    text-decoration-thickness: 2px;
}
.nxarticle__body blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--nx-line-strong);
    color: var(--nx-muted);
}
.nxarticle__body hr {
    margin: 2.4em 0 1.6em;
    border: 0;
    border-top: 1px solid var(--nx-line);
}
.nxarticle__body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.nxarticle__body table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
}
.nxarticle__body th,
.nxarticle__body td {
    border: 1px solid var(--nx-line);
    padding: 8px 12px;
    white-space: nowrap;
}
/* newsbot が本文末尾に付ける出典行(直前に hr が入るので、箱にせず控えめな脚注として馴染ませる) */
.nxarticle__body .news-source {
    margin: 1.2em 0 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--nx-muted);
}
.nxarticle__body .news-source a {
    color: var(--nx-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.nxarticle__body .news-source a:hover {
    color: var(--nx-ink);
}

/* タグ */
.nxtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 0;
}
.nxtags__item {
    display: inline-flex;
    padding: 4px 12px;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--nx-muted);
}

/* ---------- 特価記事の Amazon 商品リンク(PR) ----------
   商品名・価格は出さない(Amazon アソシエイト運営規約により、価格表示は
   Amazon 配信リンクか Creators API 経由に限られ、本サイトは未取得のため)。 */
.nxbuy {
    margin: 32px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--nx-line);
    border-left: 3px solid var(--nx-cat-sale);
    border-radius: var(--nx-radius);
    background: var(--nx-soft);
}
.nxbuy__head {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nx-ink);
}
.nxbuy__pr {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--nx-muted);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.nxbuy__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.nxbuy__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
/* 商品名。これが無いと同じラベルのボタンが並ぶだけでどれが何か分からない */
.nxbuy__name {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--nx-ink);
}
.nxbuy__link {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: var(--nx-radius);
    background: var(--nx-cat-sale);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.nxbuy__link:hover { opacity: 0.88; }
.nxbuy__note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--nx-muted);
}

/* 記事下の関連記事 */
.nxrelated {
    margin-top: 44px;
}

/* -------------------------------------------------------------
   ページネーション
   ------------------------------------------------------------- */
.nxpager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 36px 0 0;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}
/* WP コア the_posts_pagination() の出力(カテゴリ面) */
.nxpager .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nxpager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    color: var(--nx-ink);
}
.nxpager .page-numbers:hover {
    border-color: var(--nx-ink);
}
.nxpager .page-numbers.current {
    background: var(--nx-ink);
    border-color: var(--nx-ink);
    color: #fff;
}
.nxpager .page-numbers.dots {
    border: 0;
    color: var(--nx-muted);
}
/* /news/page/N/ の前後リンク(カスタムページャ) */
.nxpager__link {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    font-weight: 500;
    color: var(--nx-ink);
}
.nxpager__link:hover {
    border-color: var(--nx-ink);
}
.nxpager__pos {
    padding: 0 8px;
    color: var(--nx-muted);
}

/* 「過去の記事へ」フッターリンク(ニューストップ) */
.newsmore {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.newsmore__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1px solid var(--nx-line-strong);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
}
.newsmore__link:hover {
    background: var(--nx-ink);
    color: #fff;
}

/* -------------------------------------------------------------
   アイキャッチ・プレースホルダー(画像未生成でもグリッドを崩さない)
   ------------------------------------------------------------- */
/* 地色の既定。:where() で詳細度 0 にして、必ず .nxcat-bg--*(ファイル前方に
   あるため通常なら後勝ちで負ける)にカテゴリ色を渡す。これが無いと全カテゴリの
   プレースホルダがグレー(--nx-cat-general)になる。.nxbadge と同じ罠。 */
:where(.nxph) {
    background-color: var(--nx-cat-general);
}
.nxph {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px;
    /* NOTE: background-image は .nxcat-bg--* の background 短縮形(= image を none に
       リセットする)より後に来る必要があるので、ここで単独指定している */
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0,
        rgba(255, 255, 255, 0.05) 2px,
        transparent 2px,
        transparent 12px
    );
}
.nxph__brand {
    font-family: var(--f-display);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.92);
}
.nxph__brand b {
    font-weight: 400;
    margin-left: 3px;
    color: rgba(255, 255, 255, 0.6);
}
.nxph__cat {
    align-self: flex-end;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

/* 記事が 1 本も無いときの空表示 */
.newsempty {
    padding: 60px 20px;
    text-align: center;
    border: 1px dashed var(--nx-line);
    border-radius: var(--nx-radius);
}
.newsempty__label {
    font-family: var(--f-display);
    font-size: 14px;
    letter-spacing: 0.2em;
    color: var(--nx-muted);
    margin: 0 0 10px;
}
.newsempty p {
    margin: 0;
    font-size: 14px;
    color: var(--nx-muted);
}
.newsempty a {
    color: var(--nx-link);
    text-decoration: underline;
}

/* -------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .newstop,
    .newslayout {
        grid-template-columns: 1fr;
    }
    .newsside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
        align-items: start;
    }
    /* Trending はモバイルでヒーロー直後に出す(newstop 内の aside) */
    .newstop .newsside {
        display: block;
    }
}

@media (max-width: 768px) {
    .newsmain {
        padding: 16px 16px 56px;
    }
    .newsgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }
    .newshero__title {
        font-size: 21px;
    }
    .newspage-head__title {
        font-size: 24px;
    }
    .nxarticle {
        padding: 18px 14px 22px;
    }
    .nxarticle__title {
        font-size: 22px;
    }
    .nxarticle__body {
        font-size: 15.5px;
    }
    .newsside {
        grid-template-columns: 1fr;
    }
    .newssec {
        margin-bottom: 36px;
    }
}

@media (max-width: 480px) {
    .newsgrid {
        grid-template-columns: 1fr;
    }
    .newscard__title {
        font-size: 14.5px;
    }
}