@charset "UTF-8";
/*
Theme Name: AI・WEBリスキリングナビ
Theme URI: https://pc-ikebukuro.jp/
Description: AI・WEB系オンラインスクール比較メディア「AI・WEBリスキリングナビ」専用テーマ。ペールターコイズ→ピンクのグラデを敷いた明るい面に、差し色のターコイズ(#00CED1)。トップは診断コンソール＋比較マトリクス(1スクール=1行)。セマンティック命名(pattern_c)・カード型記事(layout_e)・1行ヘッダー・画面下の固定絞り込みバー。PC/SP を1ファイルにまとめてある(style_sp.css は廃止)。
Author: 株式会社クロワッサン
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pc-ikebukuro
*/

/*
============================================
クラス命名規則: セマンティック形式（pattern_c）
- site-*     : サイト全体のレイアウト
- <名詞>__  : ブロック内の要素（content-article__title 等）
- is-*       : 状態
- u-*        : ユーティリティ
※ 記事本文でエディタが出力するクラス（waku_*, summary, bt_site, fuki_*, faq,
  list_maru/list_batsu, u-rating, bg_maru 等）は名称変更禁止。見た目のみ差別化する。
============================================
*/

/* ==========================================================================
   Base - 変数・リセット
   ========================================================================== */

/* --------------------------------------------------------------------------
   パレット（明るい：ペールターコイズ→ピンクのグラデ＋差し色ターコイズ）
   指定 2026-07-28 → 2026-09-04 にダーク×ネオンへ全面改修 → 2026-09-10 に
   ユーザー判断で 07-28 の指定へ戻した（経緯＝docs/dark-redesign.md 冒頭）。
   一次情報＝tools/wp-theme/config/wp_pcikebukuro_config.json の colors。

   役割分担:
     ターコイズ #00CED1 … 差し色。**面と光にだけ**使う（CTA・帯・チップ・発光）。
                        ⚠ 白背景で 1.95:1 しかないので、文字・線には絶対に使わない。
                          面に使うときの文字は必ず --nx-on-accent（#08343A・6.9:1）。
     ターコイズの濃色 #097578 … 文字・リンク・罫・小さな印はすべてこちら（--nx-accent-ink）。
     ピンク #FFADD6 … 第2の差し色。ベースのグラデと、濃文字を乗せるラベル面だけ。
                     線・文字にはピンクの濃色 #B03A72（--nx-pink-ink）を使う。

   ⚠ 背景は2枚ある。**原色のグラデ**（body::before・viewport に固定）と、その上の
     **本文の列に敷く淡いグラデ** --nx-grad-wash（.site-body）。文字は淡いほうに乗る。
     **原色のグラデの上に直接置いてよい文字は --nx-text だけ**。--nx-text-2 はピンク側
     #FFADD6 の上で 3.40:1 しかない（2026-09-04 に .ad-notice で踏んだのと同じ穴）。
     原色は本文の列の外側＝左右の余白・ヘッダーとフッターの裏にだけ見える。

   実測（AA=4.5 / 大きい文字とUI部品=3.0。surface #FFFFFF / surface-2 #F2FBFB /
        panel #E9F6F6 / surface-pink #FFF5FA の4面すべてで測った最悪値）:
     本文        #143036  最悪 12.60
     補助        #4A6A70  最悪  5.29
     最小の補助   #557278  最悪  4.67   ← これ以下は作らない
     リンク      #097578  最悪  4.96
     hover      #076265  最悪  6.41
     訪問済み    #8E2F5C  最悪  7.00
     ピンクの文字・線 #B03A72 最悪 5.14
     構造の罫    #519093  最悪  3.29
     注意 #A8590A 4.63 ／ × #C62742 5.03 ／ 星 #856400 4.97
     ターコイズ面 #00CED1 に濃文字 #08343A ＝ 6.88
     ⚠ 白文字をターコイズ面に乗せない＝1.95:1。
   -------------------------------------------------------------------------- */
:root {
  /* 面（白を最上位に、下へ行くほどターコイズ寄りの淡い面にする） */
  --nx-bg: #f2fbfb;
  --nx-surface: #ffffff;
  --nx-surface-2: #f2fbfb;
  --nx-panel: #e9f6f6;
  --nx-surface-pink: #fff5fa;

  /* 罫 */
  --nx-line: #d8ecec;        /* 装飾的な仕切り（1.2:1・構造には使わない） */
  --nx-line-hi: #519093;     /* 構造を示す罫（表の格子・入力枠）＝3.3:1 */
  --nx-line-pink: #f0c8dc;

  /* ------------------------------------------------------------------
     ターコイズ（差し色）。指定の accent #00CED1 が基準。
     ★ --nx-accent-rgb / --nx-accent-ink / --nx-on-accent の3行を差し替えれば
       差し色をまるごと振り替えられる。生の rgba を個別に書かないこと。
     ------------------------------------------------------------------ */
  --nx-accent-rgb: 0 206 209;               /* ターコイズ #00CED1 */
  --nx-accent: rgb(var(--nx-accent-rgb));   /* 面と光だけ。文字・線には使わない */
  --nx-accent-ink: #097578;                 /* 文字・リンク・罫・小さな印 */
  --nx-accent-hi: #076265;                  /* hover はさらに濃く */
  --nx-accent-soft: rgb(var(--nx-accent-rgb) / 0.16);
  --nx-accent-line: rgb(var(--nx-accent-rgb) / 0.55);
  --nx-on-accent: #08343a;                  /* ターコイズ面の上の文字（白は使わない） */

  /* ------------------------------------------------------------------
     ピンク（第2の差し色・ベースのグラデ側）。指定の #FFADD6。
     ★ --nx-pink-rgb / --nx-pink-ink の2行で振り替えられる。
     ------------------------------------------------------------------ */
  --nx-pink-rgb: 255 173 214;               /* ピンク #FFADD6 */
  --nx-pink: rgb(var(--nx-pink-rgb));       /* 面だけ。文字・線には使わない */
  --nx-pink-ink: #b03a72;                   /* ピンク側の文字・線 */
  --nx-pink-soft: rgb(var(--nx-pink-rgb) / 0.35);
  --nx-on-pink: #143036;                    /* ピンク面の上の文字 8.1:1 */

  /* 訪問済みリンク */
  --nx-link-visited: #8e2f5c;

  /* 意味を持つ色（記事本文の装飾用・4面すべてで 4.5:1 以上） */
  --nx-warn: #a8590a;        /* 注意・警告   面に使うときの文字は白（5.1:1） */
  --nx-danger: #c62742;      /* × 記号用（枠の色には使わない。DEMERIT枠はピンク側＝2026-09-17 決定） */
  --nx-star: #856400;        /* 星 */

  /* テキスト */
  --nx-text: #143036;
  --nx-text-2: #4a6a70;
  --nx-text-3: #557278;

  /* グラデ（ベース＝ペールターコイズ→ピンク。指定の base_gradient そのもの） */
  --nx-grad: linear-gradient(135deg, #afeeee 0%, #ffd6ea 55%, #ffadd6 100%);
  /* 本文の列に敷く淡い版。**文字が乗る面はこちら**（原色のグラデの上では補助色が
     4.5:1 に届かないため。ピンク #FFADD6 の上で --nx-text-2 は 3.40:1）。 */
  --nx-grad-wash: linear-gradient(150deg, #ecfbfb 0%, #fff6fa 55%, #ffeef6 100%);
  --nx-grad-bar: linear-gradient(90deg, var(--nx-accent) 0%, var(--nx-pink) 100%);

  /* 影は淡く（明るい面なので「発光」ではなく薄い落ち影に戻す） */
  --nx-shadow: 0 0 0 1px var(--nx-line), 0 8px 24px rgba(20, 48, 54, 0.10);
  --nx-glow: 0 0 0 1px var(--nx-accent-line), 0 0 18px rgb(var(--nx-accent-rgb) / 0.30);

  /* フォント（既存3サイトの Noto Sans JP 一本から外す） */
  --nx-font-head: 'Space Grotesk', 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --nx-font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --nx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* レイアウト（角丸は浅く・幅は既存より狭く） */
  --nx-max: 1320px;
  --nx-radius: 0.4rem;
  --nx-radius-sm: 0.2rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* 背景は body::before の1枚に任せる（下地は html 側に置く） */
html {
  background: var(--nx-bg);
}

body {
  font-family: var(--nx-font-body);
  font-size: 1.6rem;
  line-height: 1.85;
  color: var(--nx-text);
  background: none;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

/* ページ全体の背景。viewport に固定した1枚なので、ページが長くても見え方が変わらない。
   ⚠ background-attachment: fixed は iOS Safari で無視される／描画が跳ねるので使わない。
   指定どおりベースはペールターコイズ→ピンクの1枚。文字は必ず白か tint の面の上に置く。 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(150deg, #afeeee 0%, #ffd6ea 52%, #ffadd6 100%);
  pointer-events: none;
}

a {
  color: var(--nx-accent-ink);
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

a:visited {
  color: var(--nx-link-visited);
}

a:hover {
  color: var(--nx-accent-hi);
}

/* フォーカスはシアンのリングで示す（面には塗らない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nx-accent-ink);
  outline-offset: 2px;
  border-radius: var(--nx-radius-sm);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--nx-font-head);
  font-weight: 800;
  line-height: 1.45;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Layout - 全体構造
   ========================================================================== */

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 下層ページ: メイン + 右サイドバーの2カラム（sidebar_c: TOPのみ1カラム） */
.site-body {
  width: 100%;
  max-width: var(--nx-max);
  margin: 0 auto;
  padding: 3rem 4rem 5rem;
  /* ⚠ ここに面を敷くのは意匠ではなく可読性のため。本文・補助文字・リンクは
     原色のグラデ（特にピンク #FFADD6）の上では AA に届かない。原色は
     この列の外側（左右の余白・ヘッダーとフッターの裏）に見える。 */
  background: var(--nx-grad-wash);
  box-shadow: 0 0 0 1px var(--nx-line);
}

.home .site-body {
  display: block;
  max-width: var(--nx-max);
  padding: 0 4rem 5rem;
}

.site-main {
  min-width: 0;
}

.site-aside {
  min-width: 0;
}

/* ==========================================================================
   Layout - ヘッダー（1行: ロゴ左・ナビ右・右端にCTA）
   既存3サイトはどれも「ロゴの下にグローバルナビ」の2段。ここは1行に収める。
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.80);
  border-bottom: 1px solid var(--nx-line);
  backdrop-filter: blur(10px);
}

/* 2026-09-25 ユーザー指示: ロゴとサイト名をもっと左へ。
   本文の幅（--nx-max）に合わせず、ヘッダーだけ画面の端まで使う。
   2026-09-25 ユーザー指示「ヘッダーをもう少し幅広く・のっている情報も大きく」: 高さ 約65px → 約88px。
   ⚠ 高さを変えたら .nx-matrix の scroll-margin-top と .nx-rail__panel--follow の top も合わせる（ヘッダーの下に隠れるため） */
.site-header__bar {
  max-width: none;
  margin: 0 auto;
  padding: 1.8rem 3.2rem;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 0 0 auto;
}

/* ロゴはマークのみなので、サイト名をテキストで併記する */
.brand__link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--nx-text);
}

.brand__link:hover,
.brand__link:visited {
  color: var(--nx-text);
}

.brand__mark {
  height: 46px;
  width: auto;
}

.brand__name {
  font-family: var(--nx-font-head);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* キャッチフレーズはサイト名の上に小さく積む（2026-09-25 ユーザー指示）。
   横に並べないので、狭いPCでも落とさずに済む */
.brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.2;
}

.brand__tagline {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nx-text-3);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* サイト名（日本語）のフォント＝しんばしごちっく（2026-09-29 ユーザー指定）。
   Typingart & Co.・SIL OFL 1.1（Web 埋め込み可）。ライセンスは fonts/OFL-ShimbashiGothic.txt。
   ASCII と「AI・WEBリスキリングナビ」の文字だけに絞った woff2（約11KB）。サイト名を変えたら作り直す（fonts/README の手順）。
   太さは Regular の1つだけなので、当てる要素は font-weight: 400（700 だとブラウザが太字を擬似的に作ってにじむ） */
@font-face {
  font-family: 'Shimbashi Gothic Site';
  src: url('fonts/shimbashi-gothic-title.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.brand__name {
  font-family: 'Shimbashi Gothic Site', var(--nx-font-head);
  font-weight: 400;
}

/* ナビ: 下線タブをやめ、小さめの文字を等間隔に並べる */
.navbar {
  flex: 1 1 auto;
  min-width: 0;
}

.navbar__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.6rem;
  flex-wrap: nowrap;
}

.navbar__link {
  display: block;
  padding: 0.4rem 0;
  font-size: 1.5rem;
  white-space: nowrap;
  font-weight: 500;
  color: var(--nx-text-2);
  border-bottom: 1px solid transparent;
}

.navbar__link:hover {
  color: var(--nx-accent-hi);
  border-bottom-color: var(--nx-accent-ink);
}

.current-menu-item > .navbar__link,
.navbar__item.is-current .navbar__link {
  color: var(--nx-accent-ink);
  border-bottom-color: var(--nx-accent-ink);
}

.site-header__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 1.2rem 2.4rem;
  font-family: var(--nx-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nx-accent-ink);
  border: 1px solid var(--nx-accent-ink);
  border-radius: var(--nx-radius-sm);
}

.site-header__cta:hover {
  color: var(--nx-on-accent);
  background: var(--nx-accent);
  border-color: var(--nx-accent-ink);
  box-shadow: var(--nx-glow);
}

/* SPメニューボタン */
.menu-toggle {
  margin-left: auto;
  width: 42px;
  height: 38px;
  background: none;
  border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-toggle__bar {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--nx-accent-ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* SPドロワー */
.drawer {
  display: none;
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-line-hi);
}

.drawer.is-open {
  display: block;
}

.drawer__list li {
  border-bottom: 1px solid var(--nx-line);
}

.drawer__list li:last-child {
  border-bottom: none;
}

.drawer__list a {
  display: block;
  padding: 1.4rem 2rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--nx-text);
}

.drawer__list a:hover {
  background: var(--nx-surface-2);
  color: var(--nx-accent-hi);
}

/* ==========================================================================
   Components - パンくず・広告表記
   ========================================================================== */

.crumbs {
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-line);
  padding: 0.9rem 2rem;
}

.crumbs__list {
  max-width: var(--nx-max);
  margin: 0 auto;
  padding: 0 4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--nx-font-mono);
  font-size: 1.15rem;
  color: var(--nx-text-3);
  overflow-x: auto;
  white-space: nowrap;
}

.crumbs__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.crumbs__item::after {
  content: '›';
  color: var(--nx-accent-ink);
}

.crumbs__item:last-child::after {
  display: none;
}

.crumbs__link {
  color: var(--nx-text-2);
}


.crumbs__link:hover {
  color: var(--nx-accent-ink);
}

/* ⚠ .site-shell が flex column なので、直下の要素は幅が中身ぶんに縮む。
   block 指定を足さないと本文の左端と揃わず中央寄せに見える（2026-09-04 修正）。 */
.ad-notice {
  display: block;
  width: 100%;
  max-width: var(--nx-max);
  margin: 0 auto;
  padding: 0.8rem 4rem 0;
  font-family: var(--nx-font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--nx-text);
}

.ad-notice--hero {
  position: absolute;
  top: 1.2rem;
  left: 4rem;
  z-index: 2;
  width: auto;
  max-width: none;
  padding: 0.3rem 0.9rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-radius-sm);
  color: var(--nx-text-2);
  pointer-events: none;
}

/* ==========================================================================
   Components - 診断コンソール（ファーストビュー）
   条件チップを押すと、下のマトリクスの行がその場で絞り込まれる。
   既存3サイトの「人気記事スライダー」は置かない（ここが最大の差異化点）。
   ========================================================================== */

.nx-console {
  position: relative;
  margin: 0 -4rem 3.2rem;
  padding: 5.6rem 4rem 4rem;
  border-bottom: 1px solid var(--nx-line);
  overflow: hidden;
}

.nx-console::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 380px at 22% 0%, rgb(var(--nx-accent-rgb) / 0.16), transparent 66%),
    radial-gradient(560px 340px at 88% 18%, rgb(var(--nx-pink-rgb) / 0.13), transparent 62%);
  pointer-events: none;
}

/* 背景の格子（プロダクトらしさを罫だけで出す・装飾なので薄くてよい） */
.nx-console::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(9, 117, 120, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(9, 117, 120, 0.10) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(720px 420px at 30% 20%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(720px 420px at 30% 20%, #000 0%, transparent 78%);
  pointer-events: none;
}

.nx-console__inner {
  position: relative;
  z-index: 1;
  max-width: var(--nx-max);
  margin: 0 auto;
}

.nx-console__eyebrow {
  font-family: var(--nx-font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--nx-pink-ink);
  margin-bottom: 1.4rem;
}

.nx-console__title {
  font-family: var(--nx-font-head);
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--nx-text);
  margin-bottom: 1.4rem;
}

.nx-console__title em {
  font-style: normal;
  color: var(--nx-accent-ink);
}

.nx-console__lead {
  max-width: 62rem;
  font-size: 1.5rem;
  color: var(--nx-text-2);
  margin-bottom: 3.2rem;
}

/* 条件グループ＝1グループ1枚のカード。幅と並びをそろえる（2026-09-25 ユーザー指示）。
   PC は横一列（グループが減っても幅はそろう）、スマホは1列 */
.nx-console__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2.8rem 1.6rem;   /* カードの面が無いので、上下の間をあけて「写真＋ボタン」のまとまりを見せる */
  align-items: stretch;
}

.nx-filter {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  /* 白い面も影も敷かない。ページの背景の上に、写真・帯・ボタンがそのまま乗る（2026-09-25 ユーザー指示） */
  background: none;
  border: none;
  box-shadow: none;
}

/* カードの上＝写真（幅いっぱいの横長）、その下＝見出し。legend の中に両方入れる */
.nx-filter__legend {
  display: block;
  position: relative;     /* 見出しを写真の下端の帯に重ねる基準 */
  float: left;            /* fieldset の枠線上に乗る legend の既定配置を外して、カードの中に置く */
  width: 100%;
  padding: 0;
  margin: 0 0 1.4rem;
}

.nx-filter__legend + * {
  clear: both;
}

.nx-filter__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--nx-surface-2);
  border-radius: var(--nx-radius);   /* カードの面が無くなったので、角の丸みは写真に付ける */
}

/* 写真の縦の中央に半透明の帯を敷き、見出しを白の太いゴシックで重ねる（2026-09-25 ユーザー指示） */
.nx-filter__label {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 1rem 1.2rem;
  background: rgb(8 52 58 / 0.68);
  /* 見出しだけ OS のふつうのゴシックにする（2026-09-25 ユーザー指示。本文の Zen Kaku Gothic New だとゴシックに見えない） */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;   /* 帯の見出しは中央揃え（2026-09-25 ユーザー指示） */
  text-wrap: balance;   /* 見出しが文になったので、折り返しで1文字だけ次の行に残らないようにする */
  word-break: auto-phrase;   /* 折り返すときは文節の切れ目で（対応ブラウザのみ） */
  letter-spacing: 0.02em;
  color: #fff;
}

/* 見出しの下の1行の説明（カード同士の違いが分かるように・2026-09-25 ユーザー指示） */
.nx-filter__note {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.3rem;
  /* Windows の「Yu Gothic」は 400/500 だと細い Regular が当たるので、Medium を名前で先に当てる。Mac はヒラギノ角ゴの W5。
     600 にすると Medium に疑似の太字がかかってにじむので 500 */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* カード群が何なのかを示す見出し */
.nx-console__filters-head {
  margin: 0 0 1.4rem;
  font-family: var(--nx-font-body);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--nx-text);
}

/* TOP の「リスキリングとは」（2026-09-30 ユーザー決定・写真の下／①条件を選ぶの上）。
   ユーザーのイメージ図（トップページイメージ図.png）にできるだけ寄せる＝左に緑の丸い札（しっぽ付き）と指をさすあいちゃん、
   右に丸みの大きい吹き出し（左に曲がったしっぽ）、まわりにキラキラの線・右下に開いた本・下に雲のようなふくらみ。
   飾りはすべて CSS の中の SVG（画像ファイルを増やさない）。札の字はしんばしごちっく（fonts/ の woff2 に「とは？」を足した）。
   札は濃いターコイズの面に白い字＝4.5:1 以上（明るいターコイズ面ではないので白でよい）。
   あいちゃんの絵は胴の下で切れているので、欄の下端にぴったり付けて切れ目を見せない */
.nx-about {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 2.8rem;
  padding: 2.4rem 5.2rem 0 2.4rem;
  background:
    radial-gradient(ellipse 26rem 6rem at 14% 104%, #d7f1ec 0 62%, transparent 72%),
    radial-gradient(ellipse 20rem 5rem at 96% 106%, #d9f2ee 0 62%, transparent 72%),
    linear-gradient(90deg, #eaf8f6 0%, #f4fbfb 55%, #eaf7f6 100%);
  border-radius: 1.6rem;
  overflow: hidden;
}

/* 吹き出しの右の外側のキラキラ */
.nx-about::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.4rem;
  width: 3.6rem;
  height: 7.2rem;
  margin-top: -2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 120'%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M30 10l-8 30' stroke='%23ffe082' stroke-width='5'/%3E%3Cpath d='M50 50l-24 16' stroke='%23ffc1d9' stroke-width='5'/%3E%3C/g%3E%3Ccircle cx='26' cy='94' r='4' fill='%23ffe082'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

.nx-about__who {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding-left: 13rem;
}

/* 札は吹き出しの高さの真ん中にそろえる（2026-09-30 ユーザー指示）。
   この枠は欄の上下いっぱいに伸ばし、吹き出しは下に 3.2rem の余白を持つので、その半分だけ上へずらす */

/* あいちゃんのまわりのキラキラ */
.nx-about__who::after {
  content: "";
  position: absolute;
  right: -3.6rem;
  bottom: 2rem;
  width: 24rem;
  height: 22rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 220'%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M76 22l8 12' stroke='%23ffb3cf' stroke-width='5'/%3E%3Cpath d='M102 4l-2 16' stroke='%23ffe082' stroke-width='5'/%3E%3Cpath d='M206 70l16-12M212 88l20-2M208 104l16 8' stroke='%23ffd54f' stroke-width='5'/%3E%3Cpath d='M186 30l10-10' stroke='%23b8ecdf' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / contain;
  pointer-events: none;
}

.nx-about__badge {
  position: absolute;
  top: calc(50% - 1.6rem);
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17rem;
  height: 14.4rem;
  margin: 0;
  padding: 0 0.8rem 1.6rem 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 170'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2317a3a3'/%3E%3Cstop offset='.55' stop-color='%230b7f86'/%3E%3Cstop offset='1' stop-color='%230a6d8c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M100 6C152 6 194 38 194 80c0 20-9 38-24 51l26 30-40-17c-17 8-36 12-56 12C48 156 6 124 6 81S48 6 100 6z' fill='url(%23g)'/%3E%3Cpath d='M34 118l3 9 9 3-9 3-3 9-3-9-9-3 9-3z' fill='%23fff'/%3E%3Cpath d='M22 104l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z' fill='%23fff' opacity='.8'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  border: 0;
  font-family: 'Shimbashi Gothic Site', var(--nx-font-body);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
}

.nx-about__badge span {
  display: block;
  transform: rotate(-9deg);
}

.nx-about__chara {
  position: relative;
  display: block;
  width: auto;
  height: 20rem;
}

.nx-about__bubble {
  position: relative;
  flex: 1 1 auto;
  margin: 0 0 3.2rem 2.4rem;
  padding: 2.8rem 4.4rem 3rem 4.4rem;
  background: var(--nx-surface);
  border: 2px solid #a8e2e4;
  border-radius: 8rem;
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.55), 0 8px 24px rgb(var(--nx-accent-rgb) / 0.16);
}

/* 吹き出しのしっぽ（左・下向きに曲がる）。右の端を枠の内側まで入れて、枠の線を白で消してつなぐ */
.nx-about__bubble::before {
  content: "";
  position: absolute;
  top: 54%;
  left: -3.8rem;
  width: 4.4rem;
  height: 4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M44 3C34 12 20 20 2 25C18 30 30 33 44 36' fill='%23fff' stroke='%23a8e2e4' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 右下の開いた本と、その左の葉 */
.nx-about__bubble::after {
  content: "";
  position: absolute;
  right: 2.4rem;
  bottom: -1.6rem;
  width: 9.6rem;
  height: 7.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 76'%3E%3Cpath d='M6 20l42 8 42-8v44l-42 8-42-8z' fill='%234fd3d0'/%3E%3Cpath d='M10 14c14-4 28-2 38 6v46c-10-8-24-10-38-6z' fill='%23fff' stroke='%23143036' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M86 14c-14-4-28-2-38 6v46c10-8 24-10 38-6z' fill='%23fff' stroke='%23143036' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M48 20v46' stroke='%23b9c4c6' stroke-width='2'/%3E%3C/svg%3E") no-repeat right bottom / 7.2rem auto, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M2 6c10 2 20 10 26 22C16 26 6 18 2 6z' fill='%23c5ecd2'/%3E%3C/svg%3E") no-repeat left 0.4rem bottom 0.6rem / 2.4rem auto;
  transform: rotate(-8deg);
  pointer-events: none;
}

.nx-about__lead,
.nx-about__sub {
  margin: 0;
  word-break: auto-phrase;
}

.nx-about__lead {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--nx-text);
}

.nx-about__lead em {
  font-style: normal;
  font-weight: 700;
  color: var(--nx-accent-ink);
}

.nx-about__sub {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--nx-text-2);
}

/* 2026-10-01 ユーザー決定「出し分けで」: PC はイメージ図から切り出した1枚の画像、スマホは上の作り（v5）。
   区切りはテーマ共通の 1023 / 1024px。画像1枚にするとスマホでは字が4〜5pxになり読めないため */
.nx-about-pic {
  margin: 0 0 2.8rem;
}

.nx-about-pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.6rem;
}

@media screen and (min-width: 1024px) {
  .nx-about {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .nx-about-pic {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  /* スマホは縦に積む＝上に札とあいちゃん、下に吹き出し（しっぽは 10-01 から出さない）。
     あいちゃんの胴の切れ目は吹き出しの上端に少し重ねて隠す。吹き出しの右の外側のキラキラは置き場が無いので出さない */
  .nx-about {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 2.2rem;
    padding: 1.6rem 1.2rem 2.4rem;
  }

  .nx-about::after {
    display: none;
  }

  .nx-about__who {
    align-self: center;
    padding-left: 9.6rem;
  }

  .nx-about__who::after {
    right: -2.6rem;
    bottom: 1.6rem;
    width: 16rem;
    height: 14.6rem;
  }

  .nx-about__badge {
    top: 0;
    transform: none;
    width: 12rem;
    height: 10.2rem;
    padding: 0 0.6rem 1.2rem 0;
    font-size: 1.55rem;
  }

  .nx-about__chara {
    height: 13.6rem;
    margin-bottom: -1.4rem;
  }

  .nx-about__bubble {
    z-index: 1;
    margin: 0;
    padding: 2.2rem 2rem 3.2rem;
    border-radius: 3.2rem;
  }

  /* 2026-10-01 ユーザー指示: スマホは吹き出しのしっぽ（ツノ）を出さない（PC は画像なので関係なし） */
  .nx-about__bubble::before {
    display: none;
  }

  .nx-about__bubble::after {
    right: 1.2rem;
    bottom: -1.4rem;
    width: 7.2rem;
    height: 5.6rem;
    background-size: 5.4rem auto, 1.8rem auto;
  }

  .nx-about__lead {
    font-size: 1.55rem;
    line-height: 1.8;
  }

  .nx-about__sub {
    margin-top: 0.8rem;
    font-size: 1.35rem;
    line-height: 1.8;
  }
}

/* ファーストビューの写真（オンラインで学び直すイメージ） */
.nx-hero {
  /* 写真の不透明度（ユーザー指示「ちょっと透過」2026-09-28）。写真だけに効き、カードと英字ラベルは不透明のまま */
  --nx-hero-opacity: 0.7;
  position: relative;
  margin-bottom: 2.4rem;
  border-radius: 1.2rem;
  overflow: hidden;
  /* 1600/560 → 1600/632（09-29 ユーザー決定「カードをもう少し大きく」の案A）。1440px で434→490px。
     写真は左右が少し切れるだけ（object-fit: cover）。カードの背はこの高さで決まるので、変えたら .nx-picks の枚数も測り直す */
  aspect-ratio: 1600 / 632;
  background: var(--nx-surface-2);
}

.nx-hero__img {
  display: block;
  opacity: var(--nx-hero-opacity);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真の左下のサイト名（2026-09-29 ユーザー決定・英字ラベル「AI / WEB RESKILLING」の置き換え）。
   ヘッダーと同じロゴマーク＋サイト名（しんばしごちっく）の右に、あいちゃん（images/common/brand_icon.png＝
   mc_a01.png の透過をそのまま縮めたもの）を置く。帯・枠・丸い背景は付けず、文字もキャラも白い縁取りで写真から浮かせる。
   2026-09-30 ユーザー指示: 縁取りは「ふんわり（ぼかしの光彩）」から「細くくっきり（ぼかし無し・2px）」へ。3つとも同じ太さ。
   文字は8方向の影、画像は上下左右の drop-shadow を重ねて作る（-webkit-text-stroke は字の内側に食い込むので使わない） */
.nx-hero__brand {
  position: absolute;
  left: 2.4rem;
  bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.nx-hero__brand-mark {
  height: 40px;
  width: auto;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}

.nx-hero__brand-name {
  font-family: 'Shimbashi Gothic Site', var(--nx-font-head);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--nx-text);
  white-space: nowrap;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
    1.4px 1.4px 0 #fff, -1.4px 1.4px 0 #fff, 1.4px -1.4px 0 #fff, -1.4px -1.4px 0 #fff;
}

.nx-hero__brand-face {
  height: 72px;
  width: auto;
  flex: 0 0 auto;
  /* サイト名より少しだけ上へ（キャラの高さの12%・どの幅でも同じ比率。並びの位置は動かさない・2026-09-29 ユーザー希望） */
  transform: translateY(-12%);
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}

/* 写真の上のおすすめ記事カード（popular_no01〜05・公開済みだけ・2026-09-28 → 09-29 に大きく＋自動スライド）
   PC は写真の上端寄りに、左端から右端まで全幅で重ねる（09-29 ユーザー指示「左まで全部使って・写真の上のタイトルと重ならないように上へ」）。
   09-29 夕「もう少しカード大きく」で写真を高くし、窓に見えるのを2.5枚（3枚目の端が見える＝送りあり）にした。
   1024〜1250px は写真の背が低いので3枚（3枚なら全部見えて送らない）。
   矢印とドットは写真の右下＝左下のサイト名と同じ段に置く。スマホは写真の下（下の max-width: 1023px）。
   送りの JS は js/nx-picks.js（4秒ごと・最後まで行ったら先頭へ・マウス／タッチ／フォーカス中とタブが裏の間は止める。
   全部が窓に収まるときは送らず、矢印とドットも隠す＝.is-fit）。
   1枚だけのときは .nx-picks--single（送らない・矢印とドットも出さない・右上に1枚） */
.nx-hero-wrap {
  position: relative;
}

.nx-picks {
  --nx-pick-k: 2.5;
  --nx-pick-gap: 1.2rem;
  --nx-pick-w: calc((100% - (var(--nx-pick-k) - 1) * var(--nx-pick-gap)) / var(--nx-pick-k));
  position: absolute;
  top: 1.6rem;
  left: 2rem;
  right: 2rem;
  bottom: 1.6rem;
  /* 箱は写真の下端まで伸ばす（矢印とドットを右下に置くため）。空いたところは写真・サイト名のまま触れるように */
  pointer-events: none;
}

.nx-picks > * {
  pointer-events: auto;
}

.nx-picks--single {
  left: auto;
  width: 36rem;
}

/* 1024〜1250px は写真の背が低く、2.5枚だとカードの背が左下のサイト名に届くので3枚にする */
@media screen and (min-width: 1024px) and (max-width: 1250px) {
  .nx-picks {
    --nx-pick-k: 3;
  }
}

.nx-picks.is-fit .nx-picks__nav {
  display: none;
}

/* 全部が収まるときは、余りを間に配って左端から右端まで並べる */
.nx-picks.is-fit .nx-picks__track {
  justify-content: space-between;
}

.nx-picks__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 0.8rem;
}

.nx-picks__viewport::-webkit-scrollbar {
  display: none;
}

.nx-picks__viewport:focus-visible {
  outline: 3px solid var(--nx-accent-ink);
  outline-offset: 3px;
}

.nx-picks__track {
  display: flex;
  gap: var(--nx-pick-gap, 1.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-picks__item {
  flex: 0 0 var(--nx-pick-w);
  scroll-snap-align: start;
}

.nx-picks--single .nx-picks__item {
  flex-basis: 100%;
}

.nx-picks__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--nx-text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0.8rem;
  box-shadow: 0 0.4rem 1.6rem rgba(20, 48, 54, 0.18);
}

.nx-picks__link:hover .nx-picks__title {
  text-decoration: underline;
}

.nx-picks__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.nx-picks__body {
  display: block;
  padding: 1rem 1.2rem 1.2rem;
}

.nx-picks__cat {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--nx-pink-ink);
}

/* タイトルは2行まで（3行目は …）。2行ぶんの高さを確保してカードの背をそろえる */
.nx-picks__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 3em;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 矢印とドット。写真の上でも読めるように白い帯に載せる。矢印は CSS の線で描く（arrow_ 画像は使わない） */
.nx-picks__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: absolute;
  right: 0;
  bottom: 0;
  width: fit-content;
  margin: 0;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  box-shadow: 0 0.2rem 0.8rem rgba(20, 48, 54, 0.12);
}

.nx-picks__arrow {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--nx-line-hi);
  border-radius: 50%;
}

.nx-picks__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 2px solid var(--nx-accent-ink);
  border-right: 2px solid var(--nx-accent-ink);
  transform: translate(-65%, -50%) rotate(45deg);
}

.nx-picks__arrow--prev::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.nx-picks__arrow:hover {
  background: var(--nx-accent-soft);
}

.nx-picks__dots {
  display: flex;
  gap: 0.2rem;
}

/* 押せる範囲は 2.4rem 四方、見える丸は 0.9rem */
.nx-picks__dot {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 0;
}

.nx-picks__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--nx-line-hi);
  transform: translate(-50%, -50%);
}

.nx-picks__dot[aria-current="true"]::before {
  width: 2rem;
  border-radius: 999px;
  background: var(--nx-accent-ink);
}

.nx-picks__arrow:focus-visible,
.nx-picks__dot:focus-visible {
  outline: 3px solid var(--nx-accent-ink);
  outline-offset: 2px;
}

/* 選択肢はカードの中で縦に積み、幅をそろえる（横に流すとカードごとに段がバラつく） */
.nx-filter__set {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0;             /* 面が無いので、ボタンの左右は写真の端にそろえる */
}

/* 長い選択肢（副業・フリーランスで稼ぎたい 等）は2行に折れるので、丸い端を控えめにして崩れて見えないようにする */
.nx-filter__set .nx-chip {
  width: 100%;
  white-space: normal;
  text-align: left;
  padding: 0.8rem 1.2rem;
  border-radius: 0.8rem;
  line-height: 1.5;
}

/* カードの選択肢はターコイズ→青のグラデーション＋白文字（2026-09-25 ユーザー指示）。
   白 × #097578 ＝ 5.4:1、白 × #1d5aa6 ＝ 6.6:1（どちらの端でも 4.5:1 を超える）。
   3つの状態を色だけに頼らず見分けられるようにする:
   ふだん＝ターコイズ→青／合わせた＝さらに濃いグラデーション＋明るい枠／押した＝明るいターコイズ面＋濃い文字＋✓ */
.nx-filter__set .nx-chip {
  background: linear-gradient(90deg, var(--nx-accent-ink) 0%, #1d5aa6 100%);
  border-color: transparent;
  color: #fff;
}

.nx-filter__set .nx-chip::before {
  color: rgb(255 255 255 / 0.85);
}

.nx-filter__set .nx-chip:hover {
  background: linear-gradient(90deg, var(--nx-on-accent) 0%, #133d73 100%);
  border-color: var(--nx-accent);
  box-shadow: 0 0 0 1px var(--nx-accent);
  color: #fff;
}

.nx-filter__set .nx-chip:hover::before {
  color: var(--nx-accent);
}

.nx-filter__set .nx-chip[aria-pressed="true"],
.nx-filter__set .nx-chip[aria-pressed="true"]:hover {
  background: var(--nx-accent);
  border-color: var(--nx-on-accent);
  color: var(--nx-on-accent);
  box-shadow: var(--nx-glow);
}

.nx-filter__set .nx-chip[aria-pressed="true"]::before {
  color: var(--nx-on-accent);
}

/* 条件チップ。押下状態は色だけでなく枠と ✓ でも示す（色覚に依存させない） */
.nx-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--nx-font-body);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--nx-text);
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line-hi);
  border-radius: 3rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nx-chip::before {
  content: '+';
  font-family: var(--nx-font-mono);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--nx-text-3);
}

/* カーソルを合わせたら面の色も変える（2026-09-25 ユーザー指示・以前は枠と文字だけで気づきにくかった）。
   押下中（ターコイズの面）より薄くして、「選んだ」と「合わせただけ」を見分けられるようにする */
.nx-chip:hover {
  background: var(--nx-accent-soft);
  border-color: var(--nx-accent-ink);
  color: var(--nx-accent-hi);
}

.nx-chip:hover::before {
  color: var(--nx-accent-ink);
}

.nx-chip[aria-pressed="true"]:hover {
  background: var(--nx-accent);
  color: var(--nx-on-accent);
}

.nx-chip[aria-pressed="true"] {
  background: var(--nx-accent);
  border-color: var(--nx-accent-ink);
  color: var(--nx-on-accent);
  box-shadow: var(--nx-glow);
}

.nx-chip[aria-pressed="true"]::before {
  content: '✓';
  color: var(--nx-on-accent);
}

.nx-console__status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2rem;
}

.nx-console__count {
  font-family: var(--nx-font-mono);
  font-size: 1.4rem;
  color: var(--nx-text-2);
}

.nx-console__count b {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--nx-accent-ink);
  margin-right: 0.4rem;
}

.nx-console__reset {
  font-size: 1.3rem;
  color: var(--nx-text-2);
  background: none;
  border: none;
  border-bottom: 1px solid var(--nx-line-hi);
  padding: 0 0 0.2rem;
}

.nx-console__reset:hover {
  color: var(--nx-accent-hi);
  border-color: var(--nx-accent-ink);
}

.nx-console__note {
  margin-top: 1.6rem;
  font-size: 1.15rem;
  color: var(--nx-text-3);
}

/* 2026-09-25 ユーザー選択（案x）: 「① 条件を選ぶ → 帯 → ② 比較表」で、カードと表がつながって動くと見せる。
   番号の丸はチップと同じターコイズ→青。② は .nx-sect-head__title span の指定を避けて i / b で組む */
.nx-step {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.nx-step__no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nx-accent-ink) 0%, #1d5aa6 100%);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  font-style: normal;
}

.nx-step--t {
  font-style: normal;
}

.nx-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 2.4rem 0 0;
  padding: 1.4rem 1.6rem;
  border-radius: 1rem;
  background: rgb(9 117 120 / 0.08);
  color: #0b4f55;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 帯は表へ飛ぶリンク（a）。ふつうのリンクの色・下線は当てない */
a.nx-flow,
a.nx-flow:visited {
  color: #0b4f55;
  text-decoration: none;
}

a.nx-flow:hover {
  color: #0b4f55;
  background: rgb(9 117 120 / 0.14);
}

.nx-flow__arrow {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--nx-accent-ink);
}

.nx-flow b {
  font-size: 2.2rem;
  color: var(--nx-accent-ink);
}

/* ==========================================================================
   Components - 比較マトリクス（一覧と比較表を1つに統合）
   既存3サイトは「カード列」と「横スクロール比較表」で同じ社を2度出していた。
   ここでは 1スクール = 1行 とし、左端の校名列だけを固定して横に読ませる。
   ========================================================================== */

.nx-matrix {
  margin-bottom: 4.8rem;
  scroll-margin-top: 10.4rem;
}

.nx-sect-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--nx-line);
}

.nx-sect-head__title {
  font-family: var(--nx-font-head);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--nx-text);
}

.nx-sect-head__title span {
  font-family: var(--nx-font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--nx-pink-ink);
  display: block;
  margin-bottom: 0.6rem;
}

.nx-sect-head__note {
  font-size: 1.3rem;
  color: var(--nx-text-2);
}

/* position: relative は、表の中の .u-visually-hidden（absolute）を横スクロールの枠の内側に留めるため。
   無いとスマホで枠の外（x≈700px）に置かれ、ページ全体が横にずれる（2026-09-17） */
.nx-matrix__scroll {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-radius);
  background: var(--nx-surface);
}

.nx-matrix__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.3rem;
  /* 2026-09-29 に「分割」列を足して 96rem → 108rem（列1本ぶん） */
  min-width: 108rem;
}

.nx-matrix__table th,
.nx-matrix__table td {
  padding: 1.3rem 1.4rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--nx-line);
}

/* 見出しは折り返さない。値は折り返す（費用の欄が長く、nowrap だと表がはみ出す） */
.nx-matrix__table thead th {
  white-space: nowrap;
}

.nx-matrix__table td[data-col] {
  min-width: 11rem;
  line-height: 1.55;
}

/* 金額の3列。月額は短く、一括は注記が長いので広め（2026-09-18 に費用1列を2列へ分割）。
   分割（install）は「月々の額〜」＋回数の注記なので月額と同じ幅（2026-09-29 追加）。
   ⚠ 列の最小幅の合計が表の箱（PC で約1,218〜1,238px）を超えると PC でも横スクロールになる。
     分割を足したときに 月額 13→12・一括 16→15rem に詰めて合計 約1,200px に収めた。
     一括の金額を折らなくした（2026-09-29）ら「99,800〜137,500円」で一括が約166px に広がり
     1280px で 9px はみ出したので、月額・分割を 12→11rem に詰めた */
.nx-matrix__table td[data-col="monthly"],
.nx-matrix__table td[data-col="install"] {
  min-width: 11rem;
}

.nx-matrix__table td[data-col="lump"] {
  min-width: 15rem;
}

/* ⚠ top は 0 のまま。.nx-matrix__scroll は overflow-x: auto なので overflow-y も auto に
   格上げされ、この thead の sticky は「ページ」ではなく表自身のスクロール枠を基準にする。
   top に値を入れるとヘッダー行がその値ぶん下へずれて、1行目のスクールを覆い隠す
   （2026-09-11 に top: 6.2rem でメイカラの行が見えなくなっていたのを修正）。 */
.nx-matrix__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--nx-panel);
  font-family: var(--nx-font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--nx-text-2);
  border-bottom: 1px solid var(--nx-line-hi);
}

/* 校名の列だけ左に固定して、横スクロールしても何の行か分かるようにする */
.nx-matrix__school {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 25rem;
  min-width: 25rem;
  background: var(--nx-surface-2);
  border-right: 1px solid var(--nx-line-hi);
  border-left: 3px solid var(--nx-accent);
}

.nx-row:hover .nx-matrix__school {
  border-left-color: var(--nx-accent-ink);
}

.nx-row--unverified .nx-matrix__school {
  border-left-color: var(--nx-line-hi);
}

.nx-matrix__table thead .nx-matrix__school {
  z-index: 4;
  background: var(--nx-panel);
}

/* 上段ロゴ・下段校名（2026-09-17 ユーザー決定: 横並びではロゴが細かすぎるので約1.7倍にして縦積み） */
.nx-school {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  color: var(--nx-text);
}

.nx-school__mark {
  flex: 0 0 auto;
  /* 2026-09-17 横長の小ロゴから正方形のマーク（images/common/mark_*.png）へ変更 */
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  object-position: center;
}

.nx-school__name {
  font-size: 1.45rem;
  font-weight: 700;
  white-space: normal;
  line-height: 1.35;
}

a.nx-school:hover .nx-school__name {
  color: var(--nx-accent-hi);
}

/* スクールのロゴは各社のブランド色のまま出す。
   ⚠ 2026-09-04〜09-10 のダーク期は filter: brightness(0) invert(1) で白の単色に
     していた。明るい面へ戻したのでこれを外す（白のままだと全社のロゴが消える）。
   .nx-mark--keep は「元の色のまま」を明示する別名として残す（HTML 側で使用中）。 */
.nx-mark {
  filter: none;
  opacity: 1;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.nx-mark--keep {
  filter: none;
  opacity: 1;
}

.nx-row:hover .nx-mark,
a:hover .nx-mark {
  opacity: 1;
}

.nx-row {
  transition: background-color 0.2s ease;
}

.nx-row td {
  color: var(--nx-text-2);
}

.nx-row:hover td,
.nx-row:hover .nx-matrix__school {
  background: var(--nx-surface-2);
}

.nx-row:hover .nx-matrix__school {
  background: var(--nx-panel);
}

/* 値の質を1文字で示す（○＝あり／×＝なし／—＝公式に記載なし） */
/* セルの値は ○ / △ / × / — の4状態を色で見分けられるようにしてある。
   ⚠ 2値（○×）前提で組まないこと。「別売りで買える」「一部のコースだけ」のような
     条件付きが実際にあるので、△ を使って条件をセルの文言に書く。 */
.nx-val--yes { color: var(--nx-accent-ink); font-weight: 700; }
.nx-val--partial { color: var(--nx-warn); font-weight: 700; }
.nx-val--no { color: var(--nx-danger); }
.nx-val--none { color: var(--nx-text-3); font-family: var(--nx-font-mono); }
.nx-val--cost { font-family: var(--nx-font-mono); color: var(--nx-text); }

/* 比較表のセル。**結論を先に太字で出して、条件・コース名・内訳は下に小さく落とす**。
   全列で同じ作り（2026-09-18 に金額の2列から給付金・転職・無料相談へ広げた）。
   色は親の .nx-val--* が決めるので、ここでは大きさと太さだけを扱う。
   ⚠ 注記は捨てない。給付金の実質負担額はこのサイトの差別化点なので、
     小さくしても必ず出す（消すと「最大80%」だけが残って誤読になる）。 */
.nx-cell {
  display: block;
}

.nx-cell__head {
  display: block;
  font-weight: inherit;
  line-height: 1.4;
}

/* 注記は親の色・太さを引き継がない（○の緑や△の橙のまま小さくすると読みにくい） */
.nx-cell__note {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--nx-font-body);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--nx-text-3);
}

/* 金額の3列だけ、結論（＝金額）を大きい等幅にする */
.nx-matrix__table td[data-col="monthly"] .nx-cell__head,
.nx-matrix__table td[data-col="lump"] .nx-cell__head,
.nx-matrix__table td[data-col="install"] .nx-cell__head {
  font-family: var(--nx-font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  /* 金額の途中で折らない（「99,800〜137,500円」の「円」だけが2行目に落ちていた・2026-09-29） */
  white-space: nowrap;
}

/* 選ばれた条件の列を光らせる */
.nx-matrix__table td[data-col].is-lit {
  background: var(--nx-accent-soft);
  box-shadow: inset 1px 0 0 var(--nx-accent-ink), inset -1px 0 0 var(--nx-accent-ink);
}

/* ⚠ thead は sticky なので不透明のままにする。半透明の背景で上書きすると
   下をスクロールしていく行が透けて重なって見える（2026-09-04 に実際に発生）。 */
.nx-matrix__table thead th[data-col].is-lit {
  background:
    linear-gradient(var(--nx-accent-soft), var(--nx-accent-soft)),
    var(--nx-panel);
  box-shadow: inset 1px 0 0 var(--nx-accent-ink), inset -1px 0 0 var(--nx-accent-ink);
  color: var(--nx-accent-ink);
}

/* 絞り込みで外れた行 */
.nx-row.is-out {
  display: none;
}

.nx-matrix__cta {
  width: 13rem;
  min-width: 13rem;
  text-align: right;
}

.nx-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--nx-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nx-on-accent);
  background: var(--nx-accent);
  border: 1px solid var(--nx-accent);
  border-radius: var(--nx-radius-sm);
  white-space: nowrap;
}

.nx-go:hover,
.nx-go:visited {
  color: var(--nx-on-accent);
}

.nx-go:hover {
  border-color: var(--nx-accent-ink);
  box-shadow: var(--nx-glow);
}

.nx-go--ghost {
  color: var(--nx-accent-ink);
  background: transparent;
  border: 1px solid var(--nx-line-hi);
}

.nx-go--ghost:hover {
  color: var(--nx-accent-hi);
  background: var(--nx-accent-soft);
  border-color: var(--nx-accent-ink);
}

/* 記事へ進む「詳しく見る→」（公開済みの記事がある校だけ）。色は条件チップと同じターコイズ→青に白文字。
   PC は右端のボタン列、スマホは表が横に流れて右端が見えないので校名の下（.nx-detail--sp）に出す */
.nx-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}

.nx-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--nx-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--nx-accent-ink) 0%, #1d5aa6 100%);
  border-radius: var(--nx-radius-sm);
  white-space: nowrap;
}

.nx-detail:hover,
.nx-detail:visited {
  color: #fff;
}

.nx-detail:hover {
  background: linear-gradient(90deg, var(--nx-on-accent) 0%, #133d73 100%);
}

.nx-detail--sp {
  display: none;
}

/* データ未確認の行は「まだ確認していない」と明示して下に置く */
.nx-row--unverified .nx-school__name {
  color: var(--nx-text-2);
}

.nx-tag-unverified {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.6rem;
  font-family: var(--nx-font-mono);
  font-size: 1rem;
  color: var(--nx-text-3);
  border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-radius-sm);
  vertical-align: middle;
}

.nx-matrix__empty {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--nx-text-2);
}

.nx-matrix__note {
  margin-top: 1.4rem;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--nx-text-3);
}

/* ==========================================================================
   Components - 読みもの（人気・新着を1ブロックにまとめた2カラムのリスト）
   既存3サイトの「サムネ付き3カラムのカードグリッド」から離す。
   ========================================================================== */

.nx-reads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4.8rem;
}

.nx-reads__col {
  min-width: 0;
}

.nx-list {
  border-top: 1px solid var(--nx-line);
}

.nx-list__item {
  border-bottom: 1px solid var(--nx-line);
}

.nx-list__link {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  padding: 1.6rem 0.8rem;
  color: var(--nx-text);
}

.nx-list__link:hover {
  background: var(--nx-surface);
  color: var(--nx-accent-hi);
}

.nx-list__num {
  font-family: var(--nx-font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nx-accent-ink);
  line-height: 1.5;
}

.nx-list__item:nth-child(n+4) .nx-list__num {
  color: var(--nx-text-3);
}

/* 日付は 26.09.02 の8文字ぶんが要る（3.4rem だと本文に重なる） */
.nx-list--dated .nx-list__link {
  grid-template-columns: 7.2rem minmax(0, 1fr);
}

.nx-list__date {
  font-family: var(--nx-font-mono);
  font-size: 1.2rem;
  color: var(--nx-text-3);
  line-height: 1.5;
  white-space: nowrap;
}

.nx-list__body {
  min-width: 0;
}

.nx-list__title {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
}

.nx-list__cat {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--nx-font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--nx-pink-ink);
}

.nx-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
  padding: 1rem 2.2rem;
  font-family: var(--nx-font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nx-accent-ink);
  border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-radius-sm);
}

.nx-more:hover {
  color: var(--nx-accent-hi);
  border-color: var(--nx-accent-ink);
  background: var(--nx-accent-soft);
}

/* ==========================================================================
   Components - 画面下端に固定した絞り込みバー（サイドバーの代わり）
   PC・SP とも同じものが出る。TOPでは条件チップ、それ以外のページでは導線。
   ========================================================================== */

.nx-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--nx-line-hi);
  backdrop-filter: blur(10px);
}

.nx-dock__inner {
  max-width: var(--nx-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.nx-dock__count {
  font-family: var(--nx-font-mono);
  font-size: 1.3rem;
  color: var(--nx-text-2);
  white-space: nowrap;
}

.nx-dock__count b {
  color: var(--nx-accent-ink);
  font-size: 1.7rem;
  margin-right: 0.3rem;
}

.nx-dock__chips {
  display: flex;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nx-dock__chips::-webkit-scrollbar {
  display: none;
}

.nx-dock .nx-chip {
  padding: 0.6rem 1.2rem;
  font-size: 1.2rem;
}

.nx-dock__cta {
  flex: 0 0 auto;
}

.nx-dock__lead {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.3rem;
  color: var(--nx-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* dock のぶんだけページ末尾に余白を足す（フッターが隠れないように） */
.site-shell {
  padding-bottom: 7rem;
}

/* ==========================================================================
   Components - 記事ページの右レール
   ⚠ 記事ページを2カラムにするのは tools/wp-theme の規定（sidebar_c でも single は
     サイドバーを出す）。TOP は1カラムのまま。
   既存3サイトの「バナー → 順位付きランキング（詳細/公式の2ボタン）→ カテゴリ」
   という3段構成からは外し、バナー枠を持たず・順位を出さず・ボタンを1つにする。
   ========================================================================== */

/* サイドバナー（2026-09-29）。.nx-rail の外に置き、追従させない。リンク先は sidebar.php の $side_banner_url */
.nx-rail-banner {
  display: block;
  margin-bottom: 2rem;
  border-radius: var(--nx-radius);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.nx-rail-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.nx-rail-banner:hover {
  box-shadow: var(--nx-glow);
}

.nx-rail {
  min-width: 0;
}

.nx-rail__panel {
  padding: 2rem 1.8rem;
  margin-bottom: 2rem;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
}

.nx-rail__title {
  font-family: var(--nx-font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--nx-pink-ink);
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--nx-line-hi);
}

.nx-rail__schools {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nx-rail__school {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0.4rem;
  color: var(--nx-text);
  border-bottom: 1px solid var(--nx-line);
}

.nx-rail__school:last-child {
  border-bottom: none;
}

a.nx-rail__school:hover {
  color: var(--nx-accent-hi);
}

.nx-rail__mark {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
}

/* 記事内の比較表で、校名の上に正方形のマークを出すとき（2026-09-17）。
   書き方: <th class="th_fixed"><img src="[imgurl]mark_{画像slug}.png" alt="">校名</th>（class は無くてよい）
   並びは縦（マークの下に校名）・32px。ユーザーが承認した見本（Desktop\pcikebukuro_logo_mark\確認.html）と同じ。
   上の .article-body table th img（高さ40px・横長ロゴ用）より優先させる。 */
.article-body table th img.school_mark,
.article-body table th img[src*="/mark_"] {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  max-width: none;
  object-fit: contain;
  margin: 0 auto 0.4rem;
}

.nx-rail__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.4;
}

.nx-rail__arrow {
  flex: 0 0 auto;
  font-family: var(--nx-font-mono);
  color: var(--nx-text-3);
}

a.nx-rail__school:hover .nx-rail__arrow {
  color: var(--nx-accent-ink);
}

.nx-rail__cta {
  display: block;
  margin-top: 1.6rem;
  padding: 1.1rem;
  text-align: center;
  font-family: var(--nx-font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--nx-on-accent);
  background: var(--nx-accent);
  border: 1px solid var(--nx-accent);
  border-radius: var(--nx-radius-sm);
}

.nx-rail__cta:hover,
.nx-rail__cta:visited {
  color: var(--nx-on-accent);
}

.nx-rail__cta:hover {
  border-color: var(--nx-accent-ink);
  box-shadow: var(--nx-glow);
}

.nx-rail__links li {
  border-bottom: 1px solid var(--nx-line);
}

.nx-rail__links li:last-child {
  border-bottom: none;
}

.nx-rail__links a {
  display: block;
  padding: 0.9rem 0.4rem;
  font-size: 1.3rem;
  color: var(--nx-text-2);
}

.nx-rail__links a:visited {
  color: var(--nx-link-visited);
}

a:hover {
  color: var(--nx-accent-hi);
}

/* フォーカスはシアンのリングで示す（面には塗らない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nx-accent-ink);
  outline-offset: 2px;
  border-radius: var(--nx-radius-sm);
}

/* ==========================================================================
   Components - 記事ページ（layout_e: カード型）
   ========================================================================== */

.content-article {
  margin-bottom: 3rem;
}

.content-wrapper {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  overflow: visible;
}

.content-article__head {
  padding: 3rem 3.4rem 2rem;
  background: var(--nx-panel);
  border-bottom: 1px solid var(--nx-line);
  border-radius: var(--nx-radius) var(--nx-radius) 0 0;
}

.content-article__label {
  display: inline-block;
  font-family: var(--nx-font-head);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--nx-accent-ink);
  margin-bottom: 0.8rem;
}

.content-article__title {
  font-size: 3rem;
  color: var(--nx-text);
  line-height: 1.45;
}

.content-article__note {
  margin-top: 1rem;
  color: var(--nx-text-2);
}

/* メタ: 1カテゴリ＝1ピル。日付は専用ラッパーでまとめる */
.content-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.6rem;
  font-size: 1.25rem;
  color: var(--nx-text-2);
}

.content-meta__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.content-meta__cat {
  display: inline-block;
  padding: 0.35rem 1.1rem;
  background: var(--nx-accent);
  color: var(--nx-on-accent);
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.content-meta__cat:hover {
  background: var(--nx-accent-soft);
  color: var(--nx-on-accent);
}

.content-meta__dates {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.2rem;
}

.content-meta__date--mod {
  color: var(--nx-accent-ink);
  font-weight: 700;
}

.content-article__media {
  padding: 2.4rem 3.4rem 0;
}

.content-article__media img {
  width: 100%;
  border-radius: var(--nx-radius);
}

.content-article__body {
  padding: 2.4rem 3.4rem 1rem;
}

.content-article__foot {
  padding: 0 3.4rem 3.4rem;
}

/* 目次（開閉トグルはボックスの内側） */
.content-index {
  margin: 3rem 0;
}

.content-index__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.content-index__ttl {
  font-family: var(--nx-font-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--nx-text);
  margin-bottom: 0.8rem;
}

.content-index__ttl::before {
  content: '≡';
  color: var(--nx-accent-ink);
  margin-right: 0.6rem;
}

.content-index__box {
  position: relative;
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 1.6rem 2rem;
}

/* 折りたたみはボックスではなくリスト側に当てる（ボタンを常にボックス内に残す） */
.content-index__list {
  position: relative;
  padding-left: 1.8rem;
  list-style-type: decimal;
  list-style-position: outside;
  max-height: 120px;
  overflow: hidden;
}

.content-index__list::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4rem;
  background: linear-gradient(to bottom, rgba(242, 251, 251, 0), var(--nx-surface-2));
  pointer-events: none;
}

#toc_toggle:checked ~ #toc .content-index__list {
  max-height: none;
  overflow: visible;
}

#toc_toggle:checked ~ #toc .content-index__list::after {
  display: none;
}

.content-index__list li {
  margin-bottom: 0.6rem;
  padding-left: 0.3rem;
}

.content-index__list li::before {
  display: none;
}

.content-index__list ol {
  margin: 0.4rem 0 0.6rem;
  padding-left: 1.8rem;
  list-style-type: decimal;
  list-style-position: outside;
}

.content-index__list a {
  color: var(--nx-text);
  font-size: 1.4rem;
}

.content-index__list a:hover {
  color: var(--nx-accent-ink);
}

.content-index__toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 1.2rem auto 0;
  padding: 0.5rem 1.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--nx-accent-ink);
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--nx-line);
  border-radius: 2rem;
  background: var(--nx-surface);
}

.content-index__toggle:hover {
  border-color: var(--nx-accent-ink);
}

.content-index__toggle-close {
  display: none;
}

#toc_toggle:checked ~ #toc .content-index__toggle .content-index__toggle-open { display: none; }
#toc_toggle:checked ~ #toc .content-index__toggle .content-index__toggle-close { display: inline; }

.content-index__toggle-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.5rem solid currentColor;
  transition: transform 0.25s ease;
  vertical-align: middle;
}

#toc_toggle:checked ~ #toc .content-index__toggle .content-index__toggle-arrow {
  transform: rotate(180deg);
}

/* ==========================================================================
   記事本文（article-body）
   ========================================================================== */

.article-body {
  font-size: 1.6rem;
  line-height: 2;
  color: var(--nx-text);
  overflow: visible;
}

.content-intro {
  overflow: visible;
}

/* h2: 上帯グラデ＋薄地（左太線ではない） */
.article-body h2 {
  position: relative;
  font-size: 2.2rem;
  color: var(--nx-text);
  margin: 5rem 0 2rem;
  padding: 1.8rem 2rem 1.6rem;
  background: var(--nx-panel);
  border: none;
  border-radius: var(--nx-radius);
  overflow: hidden;
}

.article-body h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--nx-grad-bar);
}

/* h3: 下線 + 先頭の小さな四角（h2 と装飾を変える） */
.article-body h3 {
  font-size: 1.9rem;
  color: var(--nx-text);
  margin: 4rem 0 1.5rem;
  padding: 0 0 0.9rem 1.8rem;
  border-bottom: 2px solid var(--nx-line);
  position: relative;
}

.article-body h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 1rem;
  height: 1rem;
  background: var(--nx-accent-ink);
  border-radius: 0.2rem;
}

/* h4: ピンク寄りの文字色＋点線下線（h2/h3 と色もウェイトも変える） */
.article-body h4 {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--nx-pink-ink);
  margin: 3rem 0 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--nx-line-pink);
}

.article-body p {
  margin-bottom: 2rem;
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 0.4rem;
}

.article-body ul,
.article-body ol {
  margin: 2rem 0;
  padding-left: 2rem;
}

.article-body li {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 2rem;
}

.article-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--nx-accent-ink);
  border-radius: 0.2rem;
  box-sizing: border-box;
}

.article-body ol {
  counter-reset: ol-counter;
}

.article-body ol li {
  counter-increment: ol-counter;
}

.article-body ol li::before {
  content: counter(ol-counter);
  position: absolute;
  left: -0.5rem;
  top: 0.1rem;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--nx-accent);
  color: var(--nx-on-accent);
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* テーブル */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1.4rem;
}

.article-body table th,
.article-body table td {
  padding: 1.2rem;
  border: 1px solid var(--nx-line);
  text-align: center;
}

.article-body table th {
  background: var(--nx-surface-2);
  font-weight: 700;
  color: var(--nx-text);
}

.article-body table thead th {
  background: var(--nx-surface-2);
}

.article-body table th a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
}

.article-body table th img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 120px;
  margin: 0 auto;
}

/* 記事本文テーブルの順位アイコン: 角バッジ */
.article-body table th .ico_rank01,
.article-body table th .ico_rank02,
.article-body table th .ico_rank03,
.article-body table th .ico_rank04,
.article-body table th .ico_rank05 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.4;
  color: var(--nx-text);
}

.article-body table th .ico_rank01::before,
.article-body table th .ico_rank02::before,
.article-body table th .ico_rank03::before,
.article-body table th .ico_rank04::before,
.article-body table th .ico_rank05::before {
  width: 2rem;
  height: 2rem;
  border-radius: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nx-font-head);
  font-size: 1.15rem;
  font-weight: 800;
}

.article-body table th .ico_rank01::before { content: "1"; background: var(--nx-accent); color: var(--nx-on-accent); }
.article-body table th .ico_rank02::before { content: "2"; background: var(--nx-accent-soft); color: var(--nx-on-accent); }
.article-body table th .ico_rank03::before { content: "3"; background: var(--nx-pink); color: var(--nx-text); }
.article-body table th .ico_rank04::before { content: "4"; background: var(--nx-surface-2); color: var(--nx-text-2); border: 1px solid var(--nx-line); }
.article-body table th .ico_rank05::before { content: "5"; background: var(--nx-surface-2); color: var(--nx-text-2); border: 1px solid var(--nx-line); }

/* セル背景の評価アイコン */
.article-body table td.bg_nijumaru {
  background: url('images/common/ico_nijumaru.svg') var(--nx-surface) no-repeat center;
  background-size: auto 70%;
}

.article-body table td.bg_maru {
  background: url('images/common/ico_maru.svg') var(--nx-surface) no-repeat center;
  background-size: auto 70%;
}

.article-body table td.bg_sankaku {
  background: url('images/common/ico_sankaku.svg') var(--nx-surface) no-repeat center;
  background-size: auto 70%;
}

.article-body table td.bg_batsu {
  background: url('images/common/ico_batsu.svg') var(--nx-surface) no-repeat center;
  background-size: auto 70%;
}

/* 記号だけのセル（中身が空）は記号が意味を運ぶので濃い色にする（白地で5:1以上）。
   文字の入ったセルは文字が読めるよう淡い記号のまま。 */
.article-body table td.bg_nijumaru:empty { background-image: url('images/common/ico_nijumaru_strong.svg'); }
.article-body table td.bg_maru:empty { background-image: url('images/common/ico_maru_strong.svg'); }
.article-body table td.bg_sankaku:empty { background-image: url('images/common/ico_sankaku_strong.svg'); }
.article-body table td.bg_batsu:empty { background-image: url('images/common/ico_batsu_strong.svg'); }

/* 引用 */
.article-body blockquote {
  margin: 2rem 0;
  padding: 2rem 2rem 2rem 5.2rem;
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line);
  border-left: 4px solid var(--nx-accent-ink);
  border-radius: 0 var(--nx-radius) var(--nx-radius) 0;
  font-style: normal;
  color: var(--nx-text-2);
  position: relative;
}

.article-body blockquote::before {
  content: '”';
  position: absolute;
  left: 2rem;
  top: 1.4rem;
  font-size: 3rem;
  line-height: 1;
  color: var(--nx-accent-ink);
  font-weight: 700;
}

.article-body blockquote .waku_st {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nx-text);
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed var(--nx-line);
}

.article-body blockquote .caption {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--nx-line);
  display: block;
}

/* ==========================================================================
   記事装飾 - テキスト
   ========================================================================== */

.txt_red {
  color: var(--nx-danger);
  font-weight: 700;
}

.txt_b {
  color: var(--nx-text);
  font-weight: 700;
}

.txt_small {
  font-size: 0.85em;
  color: var(--nx-text-2);
}

/* 黄色マーカー（strong） */
.article-body strong {
  background: linear-gradient(transparent 58%, rgb(var(--nx-accent-rgb) / 0.30) 58%);
  font-weight: 700;
  padding: 0 0.2em;
}

/* 赤マーカー（mark） */
.article-body mark {
  background: linear-gradient(transparent 58%, rgb(var(--nx-pink-rgb) / 0.65) 58%);
  color: var(--nx-text);
  font-weight: 700;
  padding: 0 0.2em;
}

/* 重要度（星） */
.st_star {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--nx-text-2);
  margin-top: 0.5rem;
}

.st_star span {
  color: var(--nx-star);
  letter-spacing: 0.1em;
}

/* キャプション */
.caption {
  font-size: 1.3rem;
  color: var(--nx-text-2);
  display: inline-block;
  margin-top: 0.5rem;
}

.caption a {
  color: var(--nx-text-2);
  text-decoration: underline;
}

.caption a:hover {
  color: var(--nx-accent-ink);
}

/* ==========================================================================
   記事装飾 - この記事の要点（summary）
   ========================================================================== */

.summary {
  position: relative;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 2.8rem 2.5rem 2.2rem;
  margin: 3rem 0;
  overflow: hidden;
}

/* 上端のグラデ帯（丸バッジ＋点線の意匠にしない） */
.summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--nx-grad-bar);
}

.summary h2 {
  font-family: var(--nx-font-head);
  font-size: 1.8rem !important;
  font-weight: 800;
  color: var(--nx-accent-ink);
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.summary h2::before {
  content: 'POINT';
  /* ⚠ .article-body h2::before（上端のグラデ帯）が absolute なので明示的に戻す。
     戻さないと POINT が見出しの文字に重なる（2026-09-04 に発生）。 */
  position: static;
  height: auto;
  flex: 0 0 auto;
  font-family: var(--nx-font-head);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--nx-on-accent);
  background: var(--nx-accent);
  padding: 0.25rem 0.8rem;
  border-radius: 0.3rem;
}

.summary ul {
  margin: 0;
  padding: 0;
}

.summary ul li {
  position: relative;
  padding-left: 2.8rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 1.75;
  color: var(--nx-text);
}

.summary ul li:last-child {
  margin-bottom: 0;
}

.summary ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid var(--nx-accent-ink);
  color: var(--nx-accent-ink);
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   記事装飾 - CTA
   ========================================================================== */

.article-body .cta_text,
.cta_catch {
  position: relative;
  width: fit-content;
  margin: 3rem auto 0;
  padding: 0 3.2rem;
  font-family: var(--nx-font-head);
  font-size: 1.7rem;
  line-height: 2.2rem;
  font-weight: 800;
  color: var(--nx-text);
  text-align: center;
}

.article-body .cta_text::before,
.article-body .cta_text::after,
.cta_catch::before,
.cta_catch::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.article-body .cta_text::before,
.cta_catch::before {
  left: 0;
  background-image: url('images/common/ico_fukiline_l.svg');
}

.article-body .cta_text::after,
.cta_catch::after {
  right: 0;
  background-image: url('images/common/ico_fukiline_r.svg');
}

/* CVボタン（bt_site）: ピル型＋影＋CSSの外部リンク記号 */
.article-body .bt_site,
.article-body [class^="bt_site_"] {
  display: block;
  width: fit-content;
  min-width: 260px;
  margin: 1.6rem auto 2.4rem;
  border-radius: 3rem;
  background: var(--nx-accent);
  box-shadow: 0 0 0 1px var(--nx-accent-hi), 0 6px 20px rgb(var(--nx-accent-rgb) / 0.30);
  text-align: center;
  transition: box-shadow 0.2s ease;
}

.article-body .bt_site:hover,
.article-body [class^="bt_site_"]:hover {
  box-shadow: var(--nx-glow), 0 6px 22px rgb(var(--nx-accent-rgb) / 0.30);
}

.article-body .bt_site:hover,
.article-body [class^="bt_site_"]:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--nx-accent-hi);
}

.article-body .bt_site a,
.article-body [class^="bt_site_"] a {
  display: block;
  color: var(--nx-on-accent);
  font-family: var(--nx-font-head);
  font-size: 1.55rem;
  font-weight: 800;
  text-decoration: none;
  padding: 1.4rem 3rem;
  text-align: center;
}

.article-body .bt_site a::after,
.article-body [class^="bt_site_"] a::after {
  content: '↗';
  margin-left: 0.6rem;
  font-weight: 700;
}

/* サイト内リンクボタン（bt_link） */
.bt_link {
  margin: 2rem 0;
  text-align: center;
}

.bt_link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 220px;
  padding: 1.2rem 2.6rem;
  background: var(--nx-surface);
  border: 2px solid var(--nx-accent-ink);
  color: var(--nx-accent-ink);
  font-family: var(--nx-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 3rem;
}

.bt_link a::after {
  content: '→';
}

.bt_link a:hover {
  background: var(--nx-accent-ink);
  border-color: var(--nx-accent-ink);
  color: var(--nx-on-accent);
}

/* ページ内リンク（下矢印） */
.bt_link_bottom {
  margin: 2rem 0;
  text-align: center;
}

.bt_link_bottom a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 280px;
  padding: 1.2rem 2.6rem;
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line);
  color: var(--nx-accent-ink);
  font-family: var(--nx-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 3rem;
}

.bt_link_bottom a::after {
  content: '↓';
}

.bt_link_bottom a:hover {
  background: var(--nx-accent-soft);
  color: var(--nx-on-accent);
}

/* あわせて読みたい（link_box） */
.link_box {
  background: var(--nx-surface-pink);
  border: 1px solid var(--nx-line-pink);
  border-radius: var(--nx-radius);
  padding: 2rem 2rem 1.6rem;
  margin: 2.4rem 0;
  position: relative;
}

.link_box::before {
  content: 'あわせて読みたい';
  position: absolute;
  top: -1rem;
  left: 1.4rem;
  background: var(--nx-pink);
  color: var(--nx-text);
  font-family: var(--nx-font-head);
  font-size: 1.15rem;
  font-weight: 800;
  padding: 0.3rem 1.1rem;
  border-radius: 0.3rem;
}

.link_box p {
  margin: 0;
}

.link_box p a,
.link_box ul li a {
  color: var(--nx-text);
  font-weight: 700;
  display: block;
  padding-left: 1.8rem;
  position: relative;
}

.link_box p a::before,
.link_box ul li a::before {
  content: '›';
  position: absolute;
  left: 0.4rem;
  color: var(--nx-pink-ink);
  font-weight: 800;
}

.link_box p a:hover,
.link_box ul li a:hover {
  color: var(--nx-pink-ink);
}

.link_box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.link_box ul li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--nx-line-pink);
}

.link_box ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.link_box ul li::before {
  display: none;
}

/* ==========================================================================
   記事装飾 - テーブル（スクロール対応）
   ========================================================================== */

.tbl_hikaku_caption,
.article-body table caption {
  display: block;
  text-align: left;
  margin-bottom: 0.5rem;
  font-family: var(--nx-font-head);
  font-weight: 700;
  color: var(--nx-text);
}

/* PC は通常の全幅テーブル。横スクロールは SP のみ（style_sp.css） */
.tbl_scroll {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}

.tbl_scroll table {
  min-width: 100%;
}

.th_fixed {
  position: sticky;
  left: 0;
  background: var(--nx-surface-2) !important;
  z-index: 1;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   記事装飾 - 枠（waku）
   ========================================================================== */

.waku {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 2rem 2.4rem;
  margin: 2.4rem 0;
}

.waku_st {
  font-family: var(--nx-font-head);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--nx-text);
  margin-bottom: 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--nx-line);
}

.waku p:not(.waku_st) {
  margin-bottom: 1rem;
}

.waku p:last-child {
  margin-bottom: 0;
}

.waku ul,
.waku ol {
  margin: 1rem 0;
}

.waku ul:last-child,
.waku ol:last-child {
  margin-bottom: 0;
}

/* メリット枠: 左太線＋角ラベル（丸バッジは使わない） */
.waku_merit {
  position: relative;
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line);
  border-left: 5px solid var(--nx-accent-ink);
  border-radius: 0 var(--nx-radius) var(--nx-radius) 0;
  padding: 2.4rem 2.4rem 2rem;
  margin: 2.4rem 0;
}

.waku_merit::before {
  content: 'MERIT';
  position: absolute;
  top: -1rem;
  left: 1.6rem;
  font-family: var(--nx-font-head);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--nx-accent-ink);
  background: var(--nx-bg);
  border: 1px solid var(--nx-accent-ink);
  padding: 0.25rem 0.9rem;
  border-radius: 0.3rem;
}

.waku_merit .waku_st {
  color: var(--nx-accent-ink);
  border-color: var(--nx-line);
}

/* デメリット枠: 左太線＋角ラベル（色をピンク側に） */
.waku_demerit {
  position: relative;
  background: var(--nx-surface-pink);
  border: 1px solid var(--nx-line-pink);
  border-left: 5px solid var(--nx-pink-ink);
  border-radius: 0 var(--nx-radius) var(--nx-radius) 0;
  padding: 2.4rem 2.4rem 2rem;
  margin: 2.4rem 0;
}

.waku_demerit::before {
  content: 'DEMERIT';
  position: absolute;
  top: -1rem;
  left: 1.6rem;
  font-family: var(--nx-font-head);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--nx-pink-ink);
  background: var(--nx-bg);
  border: 1px solid var(--nx-pink-ink);
  padding: 0.25rem 0.9rem;
  border-radius: 0.3rem;
}

.waku_demerit .waku_st {
  color: var(--nx-pink-ink);
  border-color: var(--nx-line-pink);
}

.waku_merit a { color: var(--nx-accent-ink); }
.waku_merit a:hover { color: var(--nx-accent-hi); }
.waku_demerit a { color: var(--nx-pink-ink); }
.waku_demerit a:hover { color: var(--nx-accent-hi); }

/* 必要情報枠: 上帯グラデ＋角ラベル */
.waku_info {
  position: relative;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 2.6rem 2.4rem 2rem;
  margin: 2.4rem 0;
  overflow: hidden;
}

.waku_info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--nx-grad-bar);
}

.waku_info .waku_st {
  color: var(--nx-accent-ink);
  border-color: var(--nx-line);
}

.waku_info .waku_st::before {
  content: 'INFO';
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--nx-accent-ink);
  background: transparent;
  border: 1px solid var(--nx-accent-ink);
  padding: 0.2rem 0.8rem;
  border-radius: 0.3rem;
  margin-right: 0.8rem;
  vertical-align: 0.15em;
}

/* ピックアップ枠 */
.waku_pickup {
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 0.5rem 0 2.6rem;
  margin: 2.4rem 0;
}

.waku_pickup .waku_st {
  color: var(--nx-pink-ink);
  padding: 2rem 1rem 1rem;
  margin: 0 2rem;
  border-bottom: 1px solid var(--nx-line-pink);
  font-size: 1.8rem;
}

.waku_pickup p,
.waku_pickup ul,
.waku_pickup ol {
  margin: 1.8rem 3rem 0;
}

.waku_pickup ul li {
  position: relative;
  padding-left: 2.4rem;
  line-height: 2.4rem;
  margin: 0.5rem 0 0;
}

.waku_pickup ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--nx-pink-ink);
  border-radius: 0.25rem;
  box-sizing: border-box;
}

.waku_pickup ol {
  counter-reset: custom-ol-counter;
  padding-left: 0;
}

.waku_pickup ol li {
  line-height: 2.4rem;
  margin: 0.5rem 0 0;
  padding: 0 0 0 3rem;
  counter-increment: custom-ol-counter;
  position: relative;
}

.waku_pickup ol li::before {
  content: counter(custom-ol-counter);
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 700;
  color: var(--nx-text);
  background: var(--nx-pink);
  border-radius: 0.3rem;
  position: absolute;
  top: 0.2rem;
  left: 0;
}

/* アナウンス枠 */
.waku_speaker {
  background: var(--nx-surface-pink);
  border: 1px solid var(--nx-line-pink);
  border-radius: var(--nx-radius);
  margin: 2.4rem 0;
  padding: 2rem 2rem 2rem 7.4rem;
  position: relative;
}

.waku_speaker::before {
  content: "📢";
  position: absolute;
  left: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  line-height: 1;
}

.waku_speaker p {
  margin: 0 0 1rem;
}

.waku_speaker p:last-child {
  margin: 0;
}

/* 注意枠 */
.waku_attention {
  background: var(--nx-surface);
  border: 1px solid var(--nx-warn);
  border-left: 3px solid var(--nx-warn);
  border-radius: var(--nx-radius);
  margin: 2.4rem 0;
  padding: 2rem 2rem 2rem 7.4rem;
  position: relative;
}

.waku_attention::before {
  content: "⚠️";
  position: absolute;
  left: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.2rem;
  line-height: 1;
}

.waku_attention p {
  margin: 0 0 1rem;
}

.waku_attention p:last-child {
  margin: 0;
}

/* 枠内共通のリスト */
.waku_merit ul, .waku_merit ol,
.waku_demerit ul, .waku_demerit ol,
.waku_info ul, .waku_info ol {
  margin: 1rem 0;
}

.article-body .waku ul li,
.article-body .waku_merit ul li,
.article-body .waku_demerit ul li,
.article-body .waku_info ul li {
  padding-left: 3.2rem;
}

.article-body .waku ul li::before {
  background: var(--nx-line);
  border-radius: 0.2rem;
}

.article-body .waku_merit ul li::before {
  background: var(--nx-accent-ink);
  border-radius: 0.2rem;
}

.article-body .waku_demerit ul li::before {
  background: var(--nx-pink-ink);
  border-radius: 0.2rem;
}

.article-body .waku_info ul li::before {
  background: var(--nx-accent-soft);
  border-radius: 0.2rem;
}

.article-body .waku ol,
.article-body .waku_merit ol,
.article-body .waku_demerit ol,
.article-body .waku_info ol,
.article-body .waku_speaker ol,
.article-body .waku_attention ol {
  counter-reset: waku-ol-counter;
  padding-left: 0;
}

.article-body .waku ol li,
.article-body .waku_merit ol li,
.article-body .waku_demerit ol li,
.article-body .waku_info ol li,
.article-body .waku_speaker ol li,
.article-body .waku_attention ol li {
  counter-increment: waku-ol-counter;
  position: relative;
  padding-left: 3rem;
}

.article-body .waku ol li::before,
.article-body .waku_merit ol li::before,
.article-body .waku_demerit ol li::before,
.article-body .waku_info ol li::before,
.article-body .waku_speaker ol li::before,
.article-body .waku_attention ol li::before {
  content: counter(waku-ol-counter);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 700;
  border-radius: 0.3rem;
}

.article-body .waku ol li::before          { background: var(--nx-line); color: var(--nx-text); }
.article-body .waku_merit ol li::before    { background: var(--nx-accent); color: var(--nx-on-accent); }
.article-body .waku_demerit ol li::before  { background: var(--nx-accent); color: var(--nx-on-accent); }
.article-body .waku_info ol li::before     { background: var(--nx-accent); color: var(--nx-on-accent); }
.article-body .waku_speaker ol li::before  { background: var(--nx-accent); color: var(--nx-on-accent); }
.article-body .waku_attention ol li::before{ background: var(--nx-warn); color: #ffffff; }

.waku_merit p:not(.waku_st),
.waku_demerit p:not(.waku_st),
.waku_info p:not(.waku_st) {
  margin-bottom: 1rem;
}

/* ==========================================================================
   記事装飾 - リストマーク（○ ×：CSS のみで描画・画像不使用）
   ========================================================================== */

.list_maru {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.list_maru li {
  position: relative;
  padding-left: 3.4rem;
  margin-bottom: 0.8rem;
  line-height: 1.8;
}

.list_maru li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 2.2rem;
  height: 2.2rem;
  background: none;
  border: 2px solid var(--nx-accent-ink);
  border-radius: 50%;
  box-sizing: border-box;
}

.list_batsu {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.list_batsu li {
  position: relative;
  padding-left: 3.4rem;
  margin-bottom: 0.8rem;
  line-height: 1.8;
}

.list_batsu li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 2.2rem;
  height: 2.2rem;
  background:
    linear-gradient(45deg, transparent 46%, var(--nx-danger) 46%, var(--nx-danger) 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--nx-danger) 46%, var(--nx-danger) 54%, transparent 54%);
  border: none;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74% 74%;
}

/* メリット枠内は○、デメリット枠内は× */
.article-body ul.list_maru li,
.article-body ul.list_batsu li,
.article-body .waku_merit ul.list_maru li,
.article-body .waku_demerit ul.list_batsu li,
.article-body .waku ul.list_maru li,
.article-body .waku ul.list_batsu li {
  padding-left: 4rem;
}

.article-body ul.list_maru li::before,
.article-body .waku_merit ul.list_maru li::before,
.article-body .waku ul.list_maru li::before {
  width: 2.6rem;
  height: 2.6rem;
  top: 0.2em;
  background: none;
  border: 2px solid var(--nx-accent-ink);
  border-radius: 50%;
  box-sizing: border-box;
}

.article-body ul.list_batsu li::before,
.article-body .waku_demerit ul.list_batsu li::before,
.article-body .waku ul.list_batsu li::before {
  width: 2.6rem;
  height: 2.6rem;
  top: 0.2em;
  background:
    linear-gradient(45deg, transparent 46%, var(--nx-danger) 46%, var(--nx-danger) 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--nx-danger) 46%, var(--nx-danger) 54%, transparent 54%);
  border: none;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74% 74%;
}

/* コード・整形済みテキスト */
.article-body pre {
  overflow-x: auto;
  margin: 2rem 0;
  padding: 1.6rem 1.8rem;
  background: var(--nx-bg);
  border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-radius);
  font-family: var(--nx-font-mono);
  font-size: 1.35rem;
  line-height: 1.7;
  color: var(--nx-text);
}

.article-body code {
  font-family: var(--nx-font-mono);
  font-size: 0.92em;
  padding: 0.15em 0.45em;
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-sm);
  color: var(--nx-accent-ink);
}

.article-body pre code {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
}

/* ==========================================================================
   記事装飾 - 吹き出し（キャラクター対話）

   ⚠ クラス名（fuki_a01〜04 / fuki_b01〜04）と DOM の入れ子
     （<div class="fuki_xNN"><p>…</p></div>）は記事生成ツールが吐く形なので変えない。
     表情は末尾の 01〜04 で mc_*.png のファイル名が決まる仕組みも変えない。

   ⚠ b（質問役）は使わない＝1人運用（2026-09-18 ユーザー決定）。
     記事生成ツールは fuki_a** だけを出力し、必要な画像も mc_a01〜04.png だけ。
     fuki_b01〜04 の定義は「戻すときに要る」ので消さずに残してある（出力されないだけ）。

   既存3サイトとの違い:
     - 左右に振り分ける「会話の吹き出し」をやめ、全部を左の1本の軸に揃えたログ形式にした
     - しっぽの三角を出さない。枠は左の1本線＋角丸ごく浅め
   この形にした理由（人数・表情数が未確定のため）:
     - 役が1人でも2人でも、左右のバランスが崩れない（全部が同じ軸に乗るため）
     - 表情が1種類しかなくても、同じ枠が並ぶだけなので不自然にならない
     - キャラ画像がまだ無い間は、下のレイヤーに敷いた A / Q の文字が透けて出る
       （背景を2枚重ねてあり、mc_*.png が 404 のときだけ下が見える）
   ========================================================================== */

:root {
  /* キャラ画像が用意できるまでの仮置き（回答役 A / 質問役 Q） */
  --nx-avatar-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='54' font-family='monospace' font-size='46' font-weight='700' fill='%23b03a72' text-anchor='middle' dominant-baseline='middle'%3EA%3C/text%3E%3C/svg%3E");
  --nx-avatar-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='54' font-family='monospace' font-size='46' font-weight='700' fill='%23097578' text-anchor='middle' dominant-baseline='middle'%3EQ%3C/text%3E%3C/svg%3E");
}

.article-body [class^="fuki_"] {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  padding: 0 0 0 8.6rem;
  margin: 2.4rem 0 0;
  min-height: 6.4rem;
  overflow: visible;
}

/* キャラの枠。画像が無ければ下に敷いた A / Q が出る */
.article-body [class^="fuki_"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6.4rem;
  height: 6.4rem;
  background-color: var(--nx-surface);
  background-repeat: no-repeat;
  background-position: center bottom, center;
  background-size: contain, 3.4rem 3.4rem;
  border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-radius);
}

.article-body [class^="fuki_"] p {
  position: relative;
  margin: 0;
  padding: 1.4rem 1.8rem;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-left: 3px solid var(--nx-line-hi);
  border-radius: var(--nx-radius);
  font-size: 1.5rem;
  line-height: 1.85;
  color: var(--nx-text);
}

/* 回答役 a = 紫 */
.article-body .fuki_a01::before,
.article-body .fuki_a02::before,
.article-body .fuki_a03::before,
.article-body .fuki_a04::before {
  border-color: var(--nx-pink-ink);
  box-shadow: 0 0 14px rgb(var(--nx-pink-rgb) / 0.45);
}

.article-body .fuki_a01 p,
.article-body .fuki_a02 p,
.article-body .fuki_a03 p,
.article-body .fuki_a04 p {
  border-left-color: var(--nx-pink-ink);
}

/* 質問役 b = シアン。面には使わず線だけ */
.article-body .fuki_b01::before,
.article-body .fuki_b02::before,
.article-body .fuki_b03::before,
.article-body .fuki_b04::before {
  border-color: var(--nx-accent-ink);
  box-shadow: 0 0 14px rgb(var(--nx-accent-rgb) / 0.28);
}

.article-body .fuki_b01 p,
.article-body .fuki_b02 p,
.article-body .fuki_b03 p,
.article-body .fuki_b04 p {
  background: var(--nx-surface-2);
  border-left-color: var(--nx-accent-ink);
}

/* キャラ画像（PC・SP で同一ファイルを参照すること）。
   2枚目は画像が用意できるまでの仮置きで、1枚目が読めたら隠れる。 */
.article-body .fuki_a01::before { background-image: url('images/common/mc_a01.png'), var(--nx-avatar-a); }
.article-body .fuki_a02::before { background-image: url('images/common/mc_a02.png'), var(--nx-avatar-a); }
.article-body .fuki_a03::before { background-image: url('images/common/mc_a03.png'), var(--nx-avatar-a); }
.article-body .fuki_a04::before { background-image: url('images/common/mc_a04.png'), var(--nx-avatar-a); }
.article-body .fuki_b01::before { background-image: url('images/common/mc_b01.png'), var(--nx-avatar-b); }
.article-body .fuki_b02::before { background-image: url('images/common/mc_b02.png'), var(--nx-avatar-b); }
.article-body .fuki_b03::before { background-image: url('images/common/mc_b03.png'), var(--nx-avatar-b); }
.article-body .fuki_b04::before { background-image: url('images/common/mc_b04.png'), var(--nx-avatar-b); }

/* ==========================================================================
   記事装飾 - よくある質問（FAQ）
   ========================================================================== */

.faq {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  margin: 1.6rem 0;
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  font-family: var(--nx-font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--nx-text);
  cursor: pointer;
  list-style: none;
  background: var(--nx-surface-2);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: 'Q';
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  background: var(--nx-accent);
  color: var(--nx-on-accent);
  font-size: 1.4rem;
  font-weight: 800;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 開閉の矢印は CSS の三角（arrow_ 画像は使わない） */
.faq summary::after {
  content: '';
  margin-left: auto;
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-top: 0.7rem solid var(--nx-accent-ink);
  transition: transform 0.25s ease;
}

.faq[open] summary::after {
  transform: rotate(180deg);
}

.faq summary:hover {
  background: var(--nx-accent-soft);
}

.faq > div {
  padding: 1.6rem 2rem 2rem;
  position: relative;
}

.faq > div::before {
  content: 'A';
  position: absolute;
  top: 1.6rem;
  left: 2rem;
  width: 2.8rem;
  height: 2.8rem;
  background: var(--nx-pink);
  color: var(--nx-text);
  font-family: var(--nx-font-head);
  font-size: 1.4rem;
  font-weight: 800;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq > div p {
  margin-left: 4rem;
  margin-bottom: 1rem;
  line-height: 1.85;
}

.faq > div p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Components - 記事フッター（シェア・前後・関連・人気）
   ========================================================================== */

.content-article__foot {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--nx-line);
}

/* シェアブロック全体を中央寄せ */
.share {
  margin-bottom: 3rem;
  text-align: center;
}

.share__title {
  font-family: var(--nx-font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--nx-text-2);
  margin-bottom: 1.2rem;
}

.share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 0 0 1.6rem;
  padding: 0;
}

.share__list li {
  margin: 0;
  padding: 0;
}

.share__list li::before {
  display: none;
}

.share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: 50%;
}

.share__link:hover {
  border-color: var(--nx-accent-ink);
  background: var(--nx-surface-2);
}

.share__link img {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0;
}

.copy-url {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 2.2rem;
  background: var(--nx-surface);
  border: 2px solid var(--nx-line);
  border-radius: 2rem;
  font-family: var(--nx-font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--nx-text-2);
}

.copy-url:hover {
  border-color: var(--nx-accent-ink);
  color: var(--nx-accent-ink);
  background: var(--nx-surface-2);
}

.copy-url.is-copied {
  border-color: var(--nx-accent-ink);
  background: var(--nx-accent);
  color: var(--nx-on-accent);
}

/* 前後の記事 */
.post-nav {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.6rem;
}

.post-nav__item {
  flex: 1;
}

.post-nav__item a {
  display: flex;
  gap: 1.4rem;
  height: 100%;
  padding: 1.4rem;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
}

.post-nav__item a:hover {
  border-color: var(--nx-accent-ink);
  background: var(--nx-surface-2);
}

.post-nav__item img {
  width: 110px;
  min-width: 110px;
  height: 74px;
  object-fit: cover;
  border-radius: 0.4rem;
  margin: 0;
}

.post-nav__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.post-nav__label {
  display: block;
  font-size: 1.15rem;
  color: var(--nx-accent-ink);
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.post-nav__title {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--nx-text);
  line-height: 1.45;
}

/* カテゴリ一覧へ（中央寄せ・ボタン） */
.cat-link {
  margin-bottom: 2.6rem;
  text-align: center;
}

.cat-link__btn {
  display: inline-block;
  margin: 0.4rem;
  padding: 1.1rem 2.4rem;
  background: var(--nx-surface);
  border: 2px solid var(--nx-accent-ink);
  color: var(--nx-accent-ink);
  border-radius: 2.4rem;
  font-family: var(--nx-font-head);
  font-size: 1.35rem;
  font-weight: 700;
}

.cat-link__btn:hover {
  background: var(--nx-accent-ink);
  border-color: var(--nx-accent-ink);
  color: var(--nx-on-accent);
}

/* 関連キーワード */
.tag-line {
  margin-bottom: 2.6rem;
  font-size: 1.3rem;
  color: var(--nx-text-2);
}

.tag-line__label {
  font-weight: 700;
}

.tag-line__links a {
  display: inline-block;
  margin: 0.3rem;
  padding: 0.4rem 1.2rem;
  background: var(--nx-surface-pink);
  border-radius: 2rem;
  color: var(--nx-pink-ink);
  font-weight: 700;
}

.tag-line__links a:hover {
  background: var(--nx-pink);
  color: var(--nx-text);
}

/* 関連記事 */
.related {
  margin-bottom: 3rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--nx-line);
}

.related__title,
.popular__title {
  font-size: 1.9rem;
  color: var(--nx-text);
  margin-bottom: 1.8rem;
  padding-left: 1.4rem;
  border-left: 4px solid var(--nx-accent-ink);
}

.related__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
  padding: 0;
}

.related__item {
  margin: 0;
  padding: 0;
}

.related__item::before {
  display: none;
}

.related__item a {
  display: block;
  height: 100%;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  overflow: hidden;
}

.related__item a:hover {
  border-color: var(--nx-accent-ink);
  box-shadow: var(--nx-shadow);
}

.related__item img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

.related__body {
  display: block;
  padding: 1.1rem 1.3rem 1.4rem;
}

.related__cat {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nx-pink-ink);
  margin-bottom: 0.3rem;
}

.related__item-title {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--nx-text);
  line-height: 1.5;
}

/* 人気記事 */
.popular {
  padding-top: 2.6rem;
  border-top: 1px solid var(--nx-line);
}

.popular__list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0;
}

.popular__item {
  margin: 0;
  padding: 0;
}

.popular__item::before {
  display: none;
}

.popular__item a {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
}

.popular__item a:hover {
  border-color: var(--nx-accent-ink);
  background: var(--nx-surface-2);
}

.popular__rank {
  flex-shrink: 0;
  width: 2.4rem;
  font-family: var(--nx-font-head);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--nx-accent-ink);
  text-align: center;
  padding-bottom: 0.2rem;
  border-bottom: 3px solid var(--nx-accent-ink);
}

.popular__item img {
  width: 110px;
  min-width: 110px;
  height: auto;
  border-radius: 0.4rem;
  margin: 0;
}

.popular__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popular__cat {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nx-pink-ink);
  margin-bottom: 0.3rem;
}

.popular__item-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--nx-text);
  line-height: 1.5;
}

/* ==========================================================================
   Components - アーカイブ・一覧
   ========================================================================== */

.archive-head {
  padding: 2.6rem 3rem;
  background: var(--nx-panel);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  margin-bottom: 2.6rem;
}

.archive-head__label {
  display: inline-block;
  font-family: var(--nx-font-head);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--nx-accent-ink);
  padding-bottom: 0.3rem;
  border-bottom: 3px solid var(--nx-accent-ink);
  margin-bottom: 1rem;
}

.archive-head__title {
  font-size: 2.6rem;
  color: var(--nx-text);
}

.archive-head__desc {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: var(--nx-text-2);
}

/* リスト型の記事一覧（grid_d） */
.post-index__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.post-index__item a {
  display: flex;
  gap: 1.8rem;
  padding: 1.6rem;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
}

.post-index__item a:hover {
  border-color: var(--nx-accent-ink);
  box-shadow: var(--nx-shadow);
}

.post-index__thumb {
  flex-shrink: 0;
  width: 220px;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--nx-surface-2);
}

.post-index__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.post-index__body {
  flex: 1;
  min-width: 0;
}

.post-index__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  color: var(--nx-text-2);
  margin-bottom: 0.6rem;
}

.post-index__cat {
  background: var(--nx-surface-pink);
  color: var(--nx-pink-ink);
  padding: 0.2rem 0.9rem;
  border-radius: 0.3rem;
  font-weight: 700;
}

.post-index__title {
  display: block;
  font-family: var(--nx-font-head);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--nx-text);
  line-height: 1.55;
  margin-bottom: 0.6rem;
}

.post-index__excerpt {
  display: block;
  font-size: 1.3rem;
  color: var(--nx-text-2);
  line-height: 1.8;
}

/* レビュー一覧のタイル */
.tiles__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.tiles__item a {
  display: block;
  height: 100%;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  overflow: hidden;
}

.tiles__item a:hover {
  border-color: var(--nx-accent-ink);
  box-shadow: var(--nx-shadow);
}

.tiles__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--nx-surface-2);
}

.tiles__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.tiles__body {
  display: block;
  padding: 1.3rem 1.5rem 1.6rem;
}

.tiles__label {
  display: inline-block;
  font-family: var(--nx-font-head);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--nx-on-accent);
  background: var(--nx-accent);
  padding: 0.2rem 0.8rem;
  border-radius: 0.3rem;
  margin-bottom: 0.8rem;
}

.tiles__title {
  display: block;
  font-family: var(--nx-font-head);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--nx-text);
  line-height: 1.55;
}

.tiles__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.2rem;
  font-size: 1.2rem;
  color: var(--nx-text-2);
}

.tiles__more {
  color: var(--nx-accent-ink);
  font-weight: 700;
}

.tiles__more::after {
  content: ' →';
}

/* スクール別フィルタ（svc-index） */
.svc-index {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 2.2rem 2.4rem;
  margin-bottom: 2.6rem;
}

.svc-index__title {
  font-size: 1.7rem;
  color: var(--nx-text);
  margin-bottom: 1.4rem;
  padding-left: 1.2rem;
  border-left: 4px solid var(--nx-accent-ink);
}

.svc-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.svc-index__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  padding: 1rem 0.8rem;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  text-align: center;
}

.svc-index__link:hover {
  border-color: var(--nx-accent-ink);
  background: var(--nx-surface-2);
}

.svc-index__link.is-active {
  border-color: var(--nx-accent-ink);
  background: var(--nx-accent-ink);
}

.svc-index__link.is-active .svc-index__name,
.svc-index__link.is-active .svc-index__kana {
  color: var(--nx-on-accent);
}

.svc-index__link--all {
  justify-content: center;
  font-family: var(--nx-font-head);
  font-weight: 800;
}

.svc-index__logo {
  /* 2026-09-17 横長の小ロゴから正方形のマーク（サイドバーと同じ images/common/mark_*.png）へ */
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.svc-index__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nx-text);
  line-height: 1.35;
}

.svc-index__kana {
  font-size: 1rem;
  color: var(--nx-text-2);
}

/* ページャ */
.pager {
  margin-top: 2.6rem;
  text-align: center;
}

.pager a {
  display: inline-block;
  padding: 1.2rem 3rem;
  background: var(--nx-surface);
  border: 2px solid var(--nx-accent-ink);
  border-radius: 3rem;
  font-family: var(--nx-font-head);
  font-weight: 700;
  color: var(--nx-accent-ink);
}

.pager a:hover {
  background: var(--nx-accent);
  color: var(--nx-on-accent);
}

.pager--numbers .page-numbers {
  display: inline-block;
  min-width: 4rem;
  margin: 0 0.3rem;
  padding: 0.8rem 1.2rem;
  border-radius: 0.5rem;
  /* a 以外（… の span）もグラデの上に裸で置かない */
  background: var(--nx-surface);
}

.pager--numbers .current {
  background: var(--nx-accent);
  color: var(--nx-on-accent);
  border: 2px solid var(--nx-accent-ink);
}

.no-posts {
  padding: 3rem;
  text-align: center;
  color: var(--nx-text-2);
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
}

/* 404 */
.notfound {
  text-align: center;
}

.notfound__title {
  font-size: 1.9rem;
  margin-bottom: 1.6rem;
}

.notfound__subtitle {
  font-size: 1.6rem;
  margin: 2.4rem 0 1.2rem;
}

.notfound__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
  padding: 0;
}

.notfound__list li {
  padding-left: 0;
}

.notfound__list li::before {
  content: none;
  display: none;
}

.notfound__list a {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--nx-accent);
  color: var(--nx-on-accent);
  border-radius: 2rem;
  font-family: var(--nx-font-head);
  font-weight: 700;
  font-size: 1.35rem;
}

.notfound__list a:hover {
  background: var(--nx-accent-soft);
  color: var(--nx-on-accent);
}

.notfound__list--sub a {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  color: var(--nx-accent-ink);
}

.notfound__list--sub a:hover {
  background: var(--nx-surface-2);
  border-color: var(--nx-accent-ink);
}

/* ==========================================================================
   Layout - カテゴリ・キーワードの帯 ＋ フッター
   ========================================================================== */

.nx-tagband {
  border-top: 1px solid var(--nx-line);
  background: var(--nx-surface);
}

.nx-tagband__inner {
  max-width: var(--nx-max);
  margin: 0 auto;
  padding: 2.4rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.nx-tagband__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.2rem;
  align-items: start;
}

.nx-tagband__label {
  font-family: var(--nx-font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--nx-text-3);
  padding-top: 0.6rem;
}

.nx-tagband__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.nx-tagband__list a {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 1.25rem;
  color: var(--nx-text-2);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-sm);
}

.nx-tagband__list a:hover {
  color: var(--nx-accent-hi);
  border-color: var(--nx-accent-ink);
  background: var(--nx-accent-soft);
}

.nx-tagband__list--tag a {
  border-radius: 3rem;
}

.nx-tagband__list--tag a::before {
  content: '#';
  color: var(--nx-pink-ink);
  margin-right: 0.3rem;
}

.site-footer {
  margin-top: auto;
  background: var(--nx-bg);
  border-top: 1px solid var(--nx-line-hi);
  padding: 4rem 4rem 2.4rem;
}

.site-footer__inner {
  max-width: var(--nx-max);
  margin: 0 auto;
}

.nx-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--nx-line);
}

.nx-foot__brandline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.nx-foot__mark {
  height: 30px;
  width: auto;
}

.nx-foot__name {
  font-family: var(--nx-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nx-text);
}

.nx-foot__risk {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--nx-text-2);
}

.nx-foot__links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 3.2rem;
}

.nx-foot__head {
  font-family: var(--nx-font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--nx-pink-ink);
  padding-bottom: 0.8rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--nx-line);
}

.nx-foot__col li {
  margin-bottom: 0.7rem;
}

.nx-foot__col a,
.nx-foot__schools span {
  font-size: 1.3rem;
  color: var(--nx-text-2);
}

.nx-foot__col a:visited {
  color: var(--nx-link-visited);
}

a:hover {
  color: var(--nx-accent-hi);
}

/* フォーカスはシアンのリングで示す（面には塗らない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nx-accent-ink);
  outline-offset: 2px;
  border-radius: var(--nx-radius-sm);
}

/* 掲載スクールは縦に並べず、2列に流して高さを詰める */
.nx-foot__schools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
}

.nx-foot__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding-top: 1.8rem;
}

.nx-foot__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.nx-foot__legal-links a {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--nx-text-2);
}

.nx-foot__legal-links a:visited {
  color: var(--nx-link-visited);
}

a:hover {
  color: var(--nx-accent-hi);
}

/* フォーカスはシアンのリングで示す（面には塗らない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nx-accent-ink);
  outline-offset: 2px;
  border-radius: var(--nx-radius-sm);
}

.nx-foot__copyright {
  padding-right: 5.4rem;
  font-family: var(--nx-font-mono);
  font-size: 1.15rem;
  color: var(--nx-text-3);
}

.nx-foot__copyright a {
  color: var(--nx-text-3);
}

.nx-foot__copyright a:visited {
  color: var(--nx-link-visited);
}

a:hover {
  color: var(--nx-accent-hi);
}

/* フォーカスはシアンのリングで示す（面には塗らない） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nx-accent-ink);
  outline-offset: 2px;
  border-radius: var(--nx-radius-sm);
}

/* ==========================================================================
   Components - ページトップ（上矢印は CSS 描画）
   ========================================================================== */

.to-top {
  position: fixed;
  right: 2rem;
  bottom: 8.4rem;
  width: 4.2rem;
  height: 4.2rem;
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(9, 117, 120, 0.28);
  cursor: pointer;
  z-index: 100;
}

.to-top:hover {
  border-color: var(--nx-accent-ink);
  background: var(--nx-accent-soft);
}

.to-top__arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  border-bottom: 0.9rem solid var(--nx-pink-ink);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.u-sp-only { display: none; }
.u-pc-only { display: block; }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

.u-mt-0 { margin-top: 0; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-2 { margin-top: 2rem; }
.u-mt-3 { margin-top: 3rem; }
.u-mt-4 { margin-top: 4rem; }

.u-mb-0 { margin-bottom: 0; }
.u-mb-1 { margin-bottom: 1rem; }
.u-mb-2 { margin-bottom: 2rem; }
.u-mb-3 { margin-bottom: 3rem; }
.u-mb-4 { margin-bottom: 4rem; }

/* ==========================================================================
   Responsive - PC（1024px〜）
   ========================================================================== */

/* 2026-09-25 ユーザー指示: サイト内を移動するボタンは、条件チップ・「詳しく見る→」と同じターコイズ→青のグラデに白文字でそろえる。
   公式サイトへ出る「無料相談→」「公式サイト→」（.nx-go）だけは平らなターコイズのまま残す（外へ出るボタンと見分けるため）。
   ⚠ a:visited（0,1,1）が .nx-more 等（0,1,0）に勝つので、:visited も並べて書く */
.site-header__cta,
.site-header__cta:visited,
.nx-rail__cta,
.nx-rail__cta:visited,
.nx-go.nx-dock__cta,
.nx-go.nx-dock__cta:visited,
.nx-more,
.nx-more:visited,
.cat-link__btn,
.cat-link__btn:visited,
.notfound__list:not(.notfound__list--sub) a,
.notfound__list:not(.notfound__list--sub) a:visited {
  color: #fff;
  background: linear-gradient(90deg, var(--nx-accent-ink) 0%, #1d5aa6 100%);
  border-color: transparent;
}

.site-header__cta:hover,
.nx-rail__cta:hover,
.nx-go.nx-dock__cta:hover,
.nx-more:hover,
.cat-link__btn:hover,
.notfound__list:not(.notfound__list--sub) a:hover {
  color: #fff;
  background: linear-gradient(90deg, var(--nx-on-accent) 0%, #133d73 100%);
  border-color: transparent;
}

@media screen and (min-width: 1024px) {
  .u-sp-only { display: none; }
  .u-pc-only { display: block; }

  /* 下層ページ: 本文 + 右レール（TOPは1カラム） */
  .site-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 4rem;
  }

  .home .site-body {
    display: block;
  }

  .site-main { order: 1; }
  .site-aside { order: 2; }

  /* 右レールの追従（2026-09-30）。SCHOOLS 欄（--follow）だけを止め、バナーと CATEGORY は普通に流す。
     ⚠ 追従する欄の親まで本文と同じ高さに伸ばさないと sticky は動けない（09-29 まで効いていなかった原因）。
     ⚠ 追従する欄は画面の高さに収める（SCHOOLS は13校で約730px。CATEGORY まで入れると約1000pxで下が切れた） */
  .site-aside {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .nx-rail {
    flex: 1 1 auto;
  }

  /* 2026-09-30 ユーザー承認: 高さ720pxの画面で欄の下が約40px（ボタンも19px）切れたので詰める。
     ボタンの下の余白（内側20px・外側20px）と、校名の行の上下（9px→7px・13行で約40px）。
     実測で 1024〜1440×720 の切れ0・画面の下に14〜24px の余裕。スマホは今のまま */
  .nx-rail__panel--follow {
    padding-bottom: 0.6rem;
    margin-bottom: 0;
  }

  .nx-rail__panel--follow .nx-rail__school {
    padding: 0.7rem 0.4rem;
  }
}

/* 2026-09-30 ユーザー承認: SCHOOLS を13校すべて出したら欄が約730pxになり、高さ720pxの画面で下が約120px切れた。
   画面の高さが足りるとき（860px以上＝ヘッダー下112px＋欄730px＋余裕）だけ追従させ、足りない画面では普通に流す */
@media screen and (min-width: 1024px) and (min-height: 860px) {
  .nx-rail__panel--follow {
    position: sticky;
    top: 11.2rem;
  }
}

/* ==========================================================================
   Responsive - タブレット（1024px〜1400px）
   ========================================================================== */

@media screen and (min-width: 1024px) and (max-width: 1400px) {
  .site-header__bar {
    padding-left: 3rem;
    padding-right: 3rem;
    gap: 2rem;
  }

  /* 大きくした文字のままだと 1024〜1400px でナビが1行に収まらないので、この幅だけ控えめにする */
  .brand__mark {
    height: 40px;
  }

  .brand__name {
    font-size: 1.8rem;
  }

  .navbar__list {
    gap: 1.6rem;
  }

  .navbar__link {
    font-size: 1.35rem;
  }

  .site-header__cta {
    padding: 1rem 1.8rem;
    font-size: 1.35rem;
  }

  .site-body {
    padding: 2.4rem 3rem 4rem;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 3rem;
  }

  .home .site-body {
    padding: 0 3rem 4rem;
  }

  .nx-console {
    margin: 0 -3rem 3rem;
    padding: 4.4rem 3rem 3.2rem;
  }

  .nx-console__title {
    font-size: 3.6rem;
  }

  .nx-reads {
    gap: 3rem;
  }

  .tiles__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .nx-tagband__inner,
  .site-footer {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .content-article__head,
  .content-article__media,
  .content-article__body,
  .content-article__foot {
    padding-left: 2.6rem;
    padding-right: 2.6rem;
  }
}

/* 1024〜1200px はさらに詰める（大きくしたヘッダーでメニューがサイト名に重なるため・2026-09-25） */
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  /* 写真の背が低いので、写真の上のサイト名も小さくしてカードとぶつからないようにする */
  .nx-hero__brand-name {
    font-size: 2.4rem;
  }

  .nx-hero__brand-mark {
    height: 32px;
  }

  .nx-hero__brand-face {
    height: 56px;
  }


  /* 写真の背が低くなるので、おすすめ記事カードを写真の上端に少し寄せ、左下のサイト名と重ならないようにする（2026-09-29） */
  .nx-picks {
    top: 1.4rem;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 1.2rem;
  }

  .nx-picks--single {
    left: auto;
  }

  .site-header__bar {
    padding-left: 2rem;
    padding-right: 2rem;
    gap: 1.6rem;
  }

  .brand__mark {
    height: 36px;
  }

  .brand__name {
    font-size: 1.6rem;
  }

  .brand__tagline {
    font-size: 1.15rem;
  }

  .navbar__list {
    gap: 1.2rem;
  }

  .navbar__link {
    font-size: 1.25rem;
  }

  .site-header__cta {
    padding: 0.9rem 1.4rem;
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Responsive - スマホ・タブレット縦（〜1023px）
   ⚠ 吹き出しの ::before が参照する mc_*.png は PC と同じファイルにすること。
     SP だけ別拡張子に差し替えると、本番でスマホだけアイコンが消える。
   ========================================================================== */

@media screen and (max-width: 1023px) {

  .u-sp-only { display: block; }
  .u-pc-only { display: none; }

  /* ⚠ .u-sp-only より後に置くこと。先に書くと打ち消されてドロワーが開きっぱなしになる */
  .drawer { display: none; }
  .drawer.is-open { display: block; }

  /* ------------------------------------------------------------------
     レイアウト・ヘッダー
     ------------------------------------------------------------------ */
  .site-body {
    display: block;
    padding: 2rem 1.6rem 3.5rem;
  }

  .home .site-body {
    padding: 0 1.6rem 3.5rem;
  }

  .site-aside {
    margin-top: 3rem;
  }

  .site-header__bar {
    padding: 1.2rem 1.6rem;
    gap: 1rem;
  }

  .brand__mark {
    height: 32px;
  }

  .brand__name {
    font-size: 1.55rem;
    white-space: normal;
  }

  .brand__tagline {
    font-size: 1.15rem;
  }

  .navbar {
    display: none;
  }

  .crumbs {
    padding: 0.7rem 0;
  }

  .crumbs__list {
    padding: 0 1.6rem;
  }

  .ad-notice {
    padding: 0.6rem 1.6rem 0;
  }

  /* ------------------------------------------------------------------
     診断コンソール
     ------------------------------------------------------------------ */
  .nx-console {
    margin: 0 -1.6rem 2.4rem;
    padding: 3.2rem 1.6rem 2.4rem;
  }

  .ad-notice--hero {
    position: static;
    display: inline-block;
    margin-bottom: 1.6rem;
    padding: 0.3rem 0.9rem;
  }

  .nx-console__title {
    font-size: 2.6rem;
    line-height: 1.4;
  }

  .nx-console__lead {
    font-size: 1.4rem;
    margin-bottom: 2.4rem;
  }

  .nx-console__filters {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  /* 横長のままだとスマホで細い帯になるので、少し背を高くして人物側を見せる */
  .nx-hero {
    aspect-ratio: 16 / 9;
    border-radius: 0.8rem;
    margin-bottom: 1.8rem;
  }

  .nx-hero__img {
    object-position: 30% 50%;
  }

  /* スマホは写真に重ねると読めないので、写真のすぐ下に置く。カード1枚が幅の85%で、次のカードが少し見える */
  .nx-hero-wrap--picks {
    margin-bottom: 1.8rem;
  }

  .nx-hero-wrap--picks .nx-hero {
    margin-bottom: 1rem;
  }

  .nx-picks,
  .nx-picks--single {
    position: static;
    width: auto;
  }

  .nx-picks__track {
    gap: 1rem;
  }

  /* 09-29 夕「もう少しカード大きく」で 85% → 92%（次のカードの端はまだ見える） */
  .nx-picks__item {
    flex-basis: 92%;
  }

  .nx-picks__nav {
    position: static;
    margin: 0.8rem auto 0;
    box-shadow: none;
    background: none;
  }

  .nx-hero__brand {
    left: 1.2rem;
    bottom: 0.8rem;
    gap: 0.6rem;
  }

  .nx-hero__brand-mark {
    height: 24px;
  }

  .nx-hero__brand-name {
    font-size: 1.7rem;
  }

  .nx-hero__brand-face {
    height: 44px;
  }

  /* スマホは1列で縦に長くなるので、写真の背を低くする */
  .nx-filter__img {
    aspect-ratio: 2 / 1;
  }

  .nx-filter__label {
    font-size: 1.8rem;
    padding: 0.8rem 1.4rem;
  }

  .nx-console__filters-head {
    font-size: 1.9rem;
  }

  .nx-chip {
    padding: 0.8rem 1.3rem;
    font-size: 1.3rem;
  }

  .nx-console__count b {
    font-size: 2.4rem;
  }

  /* ------------------------------------------------------------------
     比較マトリクス
     ------------------------------------------------------------------ */
  .nx-sect-head {
    display: block;
  }

  .nx-sect-head__title {
    font-size: 2rem;
  }

  .nx-sect-head__note {
    margin-top: 0.8rem;
    font-size: 1.2rem;
  }

  .nx-matrix__table {
    font-size: 1.25rem;
    min-width: 95rem;
  }

  /* 校名の列はスマホでは固定しない（画面幅の半分近くを占めてしまうため） */
  .nx-matrix__school {
    position: static;
    width: 16rem;
    min-width: 16rem;
  }

  .nx-matrix__table thead th {
    position: static;
  }

  .nx-school__mark {
    width: 3.2rem;
    height: 3.2rem;
  }

  .nx-school__name {
    font-size: 1.3rem;
  }

  .nx-matrix__table th,
  .nx-matrix__table td {
    padding: 1rem 1.1rem;
  }

  .nx-matrix__table td[data-col] {
    min-width: 9.5rem;
  }

  .nx-matrix__table td[data-col="monthly"],
  .nx-matrix__table td[data-col="install"] {
    min-width: 11rem;
  }

  .nx-matrix__table td[data-col="lump"] {
    min-width: 14rem;
  }

  .nx-matrix__table td[data-col="monthly"] .nx-cell__head,
  .nx-matrix__table td[data-col="lump"] .nx-cell__head,
  .nx-matrix__table td[data-col="install"] .nx-cell__head {
    font-size: 1.4rem;
  }

  .nx-cell__note {
    font-size: 1.05rem;
  }

  .nx-matrix__cta {
    width: 11rem;
    min-width: 11rem;
  }

  .nx-cta-stack .nx-detail {
    display: none;
  }

  .nx-detail--sp {
    display: flex;
    width: fit-content;
    margin: 0.6rem auto 0;
    padding: 0.5rem 0.9rem;
    font-size: 1.15rem;
  }

  .nx-flow {
    gap: 0.8rem;
    padding: 1.2rem;
    font-size: 1.4rem;
  }

  .nx-flow__arrow {
    font-size: 2.2rem;
  }

  .nx-step__no {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.4rem;
  }

  /* ------------------------------------------------------------------
     読みもの
     ------------------------------------------------------------------ */
  .nx-reads {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }

  .nx-list__link {
    padding: 1.4rem 0.4rem;
    gap: 1.2rem;
  }

  .nx-list__title {
    font-size: 1.4rem;
  }

  /* ------------------------------------------------------------------
     画面下の絞り込みバー
     ------------------------------------------------------------------ */
  .nx-dock {
    padding: 0.8rem 1.2rem;
  }

  .nx-dock__inner {
    gap: 1rem;
  }

  .nx-dock__count {
    font-size: 1.15rem;
  }

  .nx-dock__count b {
    font-size: 1.5rem;
  }

  .nx-dock .nx-chip {
    padding: 0.5rem 1rem;
    font-size: 1.15rem;
  }

  .nx-dock__cta {
    padding: 0.7rem 1.2rem;
    font-size: 1.15rem;
  }

  .to-top {
    right: 1.2rem;
    bottom: 7.2rem;
    width: 4rem;
    height: 4rem;
  }

  /* ------------------------------------------------------------------
     記事ページ
     ------------------------------------------------------------------ */
  body.single .site-body,
  body.page .site-body {
    padding-top: 1.2rem;
  }

  body.single .ad-notice,
  body.page .ad-notice {
    padding-bottom: 0;
  }

  .content-article__head {
    padding: 1.8rem 1.6rem 1.6rem;
  }

  .content-article__title {
    font-size: 2.1rem;
  }

  .content-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: 1.2rem;
  }

  /* 公開日・更新日はスマホでも1行に収める */
  .content-meta__dates {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    font-size: 1.15rem;
  }

  .content-article__media {
    padding: 1.6rem 1.6rem 0;
  }

  /* アイキャッチはカード内フルブリード（親の左右パディングを打ち消す） */
  .content-article__media img {
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    width: calc(100% + 3.2rem);
    max-width: none;
    border-radius: 0;
  }

  .content-article__body {
    padding: 1.6rem 1.6rem 0.5rem;
  }

  .content-article__foot {
    padding: 0 1.6rem 2.4rem;
    margin-top: 2.6rem;
  }

  /* 本文 */
  .article-body {
    font-size: 1.55rem;
  }

  .article-body h2 {
    font-size: 1.85rem;
    margin: 3.6rem 0 1.6rem;
    padding: 1.4rem 1.4rem 1.2rem;
  }

  .article-body h3 {
    font-size: 1.65rem;
    margin: 2.8rem 0 1.2rem;
  }

  .article-body h4 {
    font-size: 1.5rem;
    margin: 2.2rem 0 1rem;
  }

  .article-body ul,
  .article-body ol {
    padding-left: 0.5rem;
  }

  /* 記事内テーブルは横スクロール */
  .article-body table,
  .tbl_scroll {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .article-body table th,
  .article-body table td {
    padding: 0.9rem;
    font-size: 1.25rem;
  }

  /* 横に長い比較表（tbl_scroll）だけは、セルの中で折り返す。
     上の nowrap のままだと、左の固定列が一番長い校名（例「テラキャン プログラミング(旧DMM WEBCAMP)」）の
     1行ぶんまで広がり、スマホでは固定列だけで画面が埋まって右の列が見えなくなる（2026-09-17）。
     横スクロールと左列の固定（th_fixed）はそのまま。 */
  .article-body table.tbl_scroll th,
  .article-body table.tbl_scroll td {
    white-space: normal;
    min-width: 8em;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .article-body table.tbl_scroll .th_fixed {
    min-width: 8.5em;
    width: 8.5em;
  }

  /* 各校の比較ポイント表（縦2列の tbl_spec）は横スクロールにせず、枠の幅いっぱいに広げる。
     上の display: block のままだと表が中身の幅に縮み、右に余白が残る（2026-09-17） */
  .article-body table.tbl_spec {
    display: table;
    width: 100%;
    white-space: normal;
  }

  /* 枠 */
  .waku,
  .waku_merit,
  .waku_demerit,
  .waku_info {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .waku_speaker,
  .waku_attention {
    padding: 1.8rem 1.6rem 1.8rem 5.6rem;
  }

  .waku_speaker::before,
  .waku_attention::before {
    left: 1.4rem;
    font-size: 2rem;
  }

  .waku_pickup p,
  .waku_pickup ul,
  .waku_pickup ol {
    margin-left: 1.6rem;
    margin-right: 1.6rem;
  }

  .waku_pickup .waku_st {
    margin: 0 1.6rem;
    padding: 1.6rem 0.4rem 0.9rem;
    font-size: 1.6rem;
  }

  .summary {
    padding: 2.4rem 1.6rem 1.8rem;
  }

  .summary h2 {
    font-size: 1.6rem !important;
  }

  .summary ul li {
    font-size: 1.4rem;
  }

  /* 吹き出し: キャラ枠を小さくして本文の幅を確保する。
     左の1本軸に揃える形は PC と同じなので、役が1人でも2人でも崩れない。 */
  .article-body [class^="fuki_"] {
    padding-left: 6.2rem;
    min-height: 4.8rem;
    margin-top: 2rem;
  }

  .article-body [class^="fuki_"]::before {
    width: 4.8rem;
    height: 4.8rem;
    background-size: contain, 2.6rem 2.6rem;
  }

  .article-body [class^="fuki_"] p {
    padding: 1.2rem 1.4rem;
    font-size: 1.4rem;
  }

  /* CVボタン */
  .article-body .bt_site,
  .article-body [class^="bt_site_"] {
    min-width: 0;
    width: 100%;
  }

  .article-body .bt_site a,
  .article-body [class^="bt_site_"] a {
    padding: 1.3rem 1.6rem;
    font-size: 1.45rem;
    white-space: normal;
  }

  .bt_link a,
  .bt_link_bottom a {
    min-width: 0;
    width: 100%;
  }

  .article-body .cta_text,
  .cta_catch {
    font-size: 1.5rem;
    padding: 0 2.6rem;
  }

  /* 記事フッター */
  .post-nav {
    flex-direction: column;
    gap: 1.2rem;
  }

  .post-nav__item img {
    width: 92px;
    min-width: 92px;
    height: 62px;
  }

  .related__list {
    grid-template-columns: 1fr;
  }

  .related__item a {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  .related__item img {
    width: 118px;
    min-width: 118px;
    height: 78px;
    object-fit: cover;
  }

  .popular__item img {
    width: 92px;
    min-width: 92px;
  }

  .cat-link__btn {
    display: block;
    width: 100%;
    margin: 0.6rem 0;
  }

  /* 目次 */
  .content-index__box {
    padding: 1.4rem 1.6rem;
  }

  .content-index__list a {
    font-size: 1.35rem;
  }

  /* ------------------------------------------------------------------
     右レール（スマホでは本文の下に回る）
     ------------------------------------------------------------------ */
  .nx-rail-banner {
    max-width: 360px;
    margin: 0 auto 2rem;
  }

  .nx-rail__panel {
    padding: 1.6rem 1.4rem;
  }

  /* ------------------------------------------------------------------
     アーカイブ・一覧
     ------------------------------------------------------------------ */
  .archive-head {
    padding: 1.8rem 1.6rem;
  }

  .archive-head__title {
    font-size: 2.05rem;
  }

  .post-index__item a {
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.2rem;
  }

  .post-index__thumb {
    width: 100%;
  }

  .post-index__title {
    font-size: 1.55rem;
  }

  .post-index__excerpt {
    display: none;
  }

  .tiles__list {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .svc-index {
    padding: 1.6rem 1.4rem;
  }

  .svc-index__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ------------------------------------------------------------------
     カテゴリ帯・フッター
     ------------------------------------------------------------------ */
  .nx-tagband__inner {
    padding: 2rem 1.6rem;
  }

  .nx-tagband__row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .nx-tagband__label {
    padding-top: 0;
  }

  .site-footer {
    padding: 3rem 1.6rem 2.4rem;
  }

  .nx-foot {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .nx-foot__links {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .nx-foot__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .nx-foot__legal-links {
    gap: 1.2rem;
  }

  .nx-foot__copyright {
    padding-right: 0;
  }
}

/* 小さめのスマートフォン（〜480px） */
@media screen and (max-width: 480px) {
  .nx-console__title {
    font-size: 2.2rem;
  }

  .brand__name {
    font-size: 1.3rem;
  }

  .nx-sect-head__title,
  .archive-head__title {
    font-size: 1.85rem;
  }

  .content-article__title {
    font-size: 1.95rem;
  }

  .nx-foot__schools {
    grid-template-columns: 1fr;
  }

  .svc-index__grid {
    grid-template-columns: 1fr;
  }
}