@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
/* =========================================================================
   nl-base v1  —  ネットログ／モバチェン 記事デザインのベースCSS
   出典：articles/_test-au-to-rakuten/06_article_test.html の <style>（2026-08-18時点）
   =========================================================================

   【これは何か】
   .nl- 接頭辞の部品カタログ本体。記事デザインの土台。
   nl-typo-patch_v1.css は「これ」への上書きなので、必ず先にこちらを入れる。

   【貼る場所】
   SWELL 外観 → カスタマイズ → 追加CSS
   このファイルを貼ってから、その下に nl-typo-patch_v1.css を貼る。順番厳守。

   【前提】
   記事HTMLの一番外側が <div class="nl-wrap"> で包まれていること。
   これが無いと、このCSSもパッチも1行も効かない。

   【注意】
   ・雛形/装飾パーツ見本_プロトタイプ.html のCSSは古い（主色が青・h2が下線）。
     そちらではなくこのファイルを使う。
   ・.nl-balloon 系（キャラ吹き出し）は2026-08-16に廃止・未使用だが、
     既存記事が使っている可能性があるため残してある。
   ・.nl-sim / .nl-tool-* （シミュレーター）は手順書§M4-1では「記事固有＝記事内に置く」
     分類。当面は追加CSSに入れておき、整理は後日でよい。
   ========================================================================= */

/* =========================================================
   スコープ方針：全スタイルを .nl- 接頭辞のクラスに閉じ込め、
   入稿先テーマのCSSに一切依存しない（雛形/装飾パーツ見本_プロトタイプ.html 準拠）
   ========================================================= */
:root{
  --nl-surface:#ffffff;
  --nl-surface-2:#f4f8f7;
  --nl-ink:#1b1b1a;
  --nl-ink-2:#4a4a46;
  --nl-ink-3:#6f6f69;
  --nl-line:#dfe7e5;
  --nl-series-1:#0e8f84;   /* メイン：ティールグリーン（節約・安心。キャリア各社の色と被らない中立色） */
  --nl-accent:#e8811c;     /* アクセント：アンバー（お得・注意喚起） */
  --nl-good:#1baf7a;
  --nl-radius:12px;
  --nl-maxw:720px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --nl-surface:#1a1a19;
    --nl-surface-2:#212726;
    --nl-ink:#f6f6f4;
    --nl-ink-2:#c3c2b7;
    --nl-ink-3:#a3a29a;
    --nl-line:#39413f;
    --nl-series-1:#22a89b;
    --nl-accent:#e08a33;
    --nl-good:#199e70;
  }
}
.nl-wrap *{box-sizing:border-box}
.nl-wrap{
  -webkit-text-size-adjust:100%;
  margin:0 auto;
  background:var(--nl-surface);
  color:var(--nl-ink);
  font-family:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  font-size:17px;
  line-height:1.9;
  letter-spacing:.01em;
  max-width:var(--nl-maxw);
  padding:0 16px 64px;
}
.nl-wrap p{margin:0 0 1.1em}
.nl-wrap h1{font-size:1.55rem;line-height:1.5;margin:.6em 0 .5em;letter-spacing:-.01em}
/* 見出し2：SWELL風の帯＋左アクセント（下線のみ→箱型に変更） */
.nl-wrap h2{
  font-size:1.28rem;line-height:1.55;margin:2.2em 0 .9em;
  padding:12px 14px;background:var(--nl-surface-2);
  border-left:5px solid var(--nl-series-1);border-radius:6px;
}
.nl-wrap h3{font-size:1.08rem;line-height:1.6;margin:1.8em 0 .6em}
.nl-wrap small{font-size:14px;color:var(--nl-ink-3);line-height:1.7;display:inline-block}

.nl-mockbar{background:#3a2f00;color:#ffe9a3;font-size:.8rem;line-height:1.6;padding:10px 14px;text-align:center}
.nl-mockbar b{color:#fff}

.nl-prbar{font-size:14px;line-height:1.7;padding:10px 12px;margin:0 0 16px;background:var(--nl-surface-2);border:1px solid var(--nl-line);border-radius:6px;color:var(--nl-ink-2)}

.nl-conclusion{
  background:var(--nl-surface-2);
  border-left:5px solid var(--nl-series-1);
  border-radius:0 var(--nl-radius) var(--nl-radius) 0;
  padding:16px 16px 4px;margin:0 0 20px;
}
.nl-conclusion .nl-label{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:#fff;background:var(--nl-series-1);border-radius:999px;padding:3px 10px;margin:0 0 8px;
}
.nl-conclusion p{font-weight:700;margin:0 0 12px}

.nl-survey{
  border:1px solid var(--nl-line);border-radius:var(--nl-radius);
  padding:14px 16px 6px;margin:0 0 20px;background:var(--nl-surface);
}
.nl-survey h3{margin:0 0 10px;font-size:.98rem;display:flex;align-items:center;gap:8px}
.nl-survey h3::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--nl-series-1);flex:none}
.nl-dl{display:grid;grid-template-columns:6.5em 1fr;gap:6px 12px;margin:0 0 10px;font-size:.92rem}
.nl-dl dt{color:var(--nl-ink-3);font-weight:600}
.nl-dl dd{margin:0}
@media (min-width:600px){ .nl-dl{grid-template-columns:7em 1fr 7em 1fr} }

.nl-toc{background:var(--nl-surface-2);border-radius:var(--nl-radius);padding:14px 16px;margin:0 0 24px}
.nl-toc h3{margin:0 0 8px;font-size:.98rem}
.nl-toc ol{margin:0;padding-left:1.25em}
.nl-toc li{margin:0 0 6px;font-size:.95rem}
.nl-toc a{color:var(--nl-ink);text-decoration:underline;text-underline-offset:3px}

.nl-figure{margin:0 0 12px}
.nl-figure-title{font-weight:700;font-size:1rem;margin:0 0 2px}
.nl-figure-sub{font-size:.8rem;color:var(--nl-ink-3);margin:0 0 14px}
.nl-bars{display:flex;flex-direction:column;gap:14px;margin:0 0 10px}
.nl-bar-row{display:block}
.nl-bar-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 5px}
.nl-bar-name{font-size:.92rem;line-height:1.55;font-weight:600}
.nl-bar-val{font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.nl-bar-track{background:var(--nl-surface-2);border-radius:4px;height:14px;overflow:hidden}
.nl-bar-fill{height:100%;background:var(--nl-series-1);border-radius:4px}
.nl-tag-q5{
  display:inline-block;font-size:.68rem;font-weight:700;vertical-align:.15em;
  color:var(--nl-accent);border:1px solid var(--nl-accent);border-radius:4px;
  padding:0 5px;margin-left:6px;line-height:1.6;
}
.nl-legend{font-size:.78rem;color:var(--nl-ink-3);margin:0 0 8px}

details.nl-acc{border:1px solid var(--nl-line);border-radius:var(--nl-radius);padding:0;margin:0 0 22px;overflow:hidden}
details.nl-acc>summary{
  cursor:pointer;list-style:none;padding:12px 14px;font-size:.9rem;font-weight:600;
  background:var(--nl-surface-2);display:flex;align-items:center;gap:8px;
}
details.nl-acc>summary::-webkit-details-marker{display:none}
details.nl-acc>summary::after{content:"＋";margin-left:auto;color:var(--nl-ink-3);font-weight:700}
details.nl-acc[open]>summary::after{content:"−"}
.nl-acc-body{padding:12px 14px}

.nl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--nl-line);border-radius:var(--nl-radius)}
.nl-scroll table{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem;line-height:1.65}
.nl-scroll th,.nl-scroll td{border-bottom:1px solid var(--nl-line);padding:10px 12px;text-align:left;vertical-align:top}
.nl-scroll thead th{background:var(--nl-surface-2);font-size:.82rem;white-space:nowrap;position:sticky;top:0}
.nl-scroll tbody th{font-weight:600;white-space:nowrap}
.nl-scroll td.nl-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nl-scroll-hint{font-size:.78rem;color:var(--nl-ink-3);margin:6px 0 0}

.nl-cost-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 14px}
@media (min-width:600px){ .nl-cost-grid{grid-template-columns:1fr 1fr} }
.nl-cost{
  border:1px solid var(--nl-line);border-radius:var(--nl-radius);
  padding:14px;background:var(--nl-surface);display:flex;flex-direction:column;gap:6px;
}
.nl-cost-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.nl-cost-name{font-size:.95rem;font-weight:700;line-height:1.5;flex:1 1 9em;min-width:0}
.nl-cost-amt{font-size:1.18rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.nl-cost-amt.nl-is-zero{color:var(--nl-good)}
.nl-cost-amt.nl-is-var{color:var(--nl-accent)}
.nl-cost-note{font-size:.84rem;color:var(--nl-ink-2);line-height:1.75;margin:0}
.nl-cost-src{font-size:.75rem;color:var(--nl-ink-3);line-height:1.6;margin:0}
.nl-cost-badge{
  align-self:flex-start;font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 8px;
  background:var(--nl-surface-2);color:var(--nl-ink-2);
}
.nl-cost-total{
  border:2px solid var(--nl-series-1);border-radius:var(--nl-radius);
  padding:14px;margin:0 0 8px;background:var(--nl-surface);
}
.nl-cost-total .nl-cost-head{margin:0 0 4px}
.nl-cost-total .nl-cost-amt{font-size:1.35rem;color:var(--nl-series-1)}

.nl-steps{list-style:none;margin:0 0 14px;padding:0 0 0 34px;position:relative}
.nl-steps::before{content:"";position:absolute;left:11px;top:6px;bottom:10px;width:2px;background:var(--nl-line)}
.nl-step{position:relative;padding:0 0 22px}
.nl-step:last-child{padding-bottom:0}
.nl-step-num{
  position:absolute;left:-34px;top:0;width:24px;height:24px;border-radius:50%;
  background:var(--nl-series-1);color:#fff;font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.nl-step-title{font-size:1rem;font-weight:700;margin:0 0 2px;line-height:1.55}
.nl-step-meta{font-size:.78rem;color:var(--nl-ink-3);margin:0 0 6px}
.nl-step p{font-size:.93rem;margin:0 0 8px;line-height:1.85}
.nl-step-warn{
  border-left:3px solid var(--nl-accent);background:var(--nl-surface-2);
  border-radius:0 8px 8px 0;padding:8px 12px;font-size:.87rem;line-height:1.8;margin:0;
}

.nl-voices{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 12px}
@media (min-width:600px){ .nl-voices{grid-template-columns:1fr 1fr} }
.nl-voice{
  border:1px solid var(--nl-line);border-left:4px solid var(--nl-series-1);
  border-radius:0 var(--nl-radius) var(--nl-radius) 0;padding:12px 14px;background:var(--nl-surface);
}
.nl-voice-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px}
.nl-voice-id{
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--nl-surface-2);color:var(--nl-ink-2);border-radius:4px;padding:2px 7px;
}
.nl-voice-attr{font-size:.78rem;color:var(--nl-ink-3)}
.nl-voice blockquote{margin:0;font-size:.94rem;line-height:1.85}
.nl-voice blockquote::before{content:"「"}
.nl-voice blockquote::after{content:"」"}

.nl-honest{
  border:1px solid var(--nl-accent);border-radius:var(--nl-radius);
  padding:14px 16px 6px;margin:0 0 20px;background:var(--nl-surface);
}
.nl-honest h3{
  margin:0 0 10px;font-size:.98rem;display:flex;align-items:center;gap:8px;color:var(--nl-accent);
}
.nl-honest h3::before{
  content:"!";flex:none;width:20px;height:20px;border-radius:50%;background:var(--nl-accent);color:#fff;
  font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;
}
.nl-honest ul{margin:0 0 10px;padding-left:1.15em}
.nl-honest li{margin:0 0 8px;font-size:.93rem;line-height:1.8}
.nl-honest li b{color:var(--nl-ink)}

.nl-src{border-top:1px solid var(--nl-line);margin:32px 0 0;padding:14px 0 0;font-size:.8rem;color:var(--nl-ink-3);line-height:1.8}

/* ---- H2直下の見出し画像 ---- */
.nl-h2img{margin:0 0 18px}
.nl-h2img img{width:100%;height:auto;display:block;border-radius:var(--nl-radius);border:1px solid var(--nl-line)}

/* ---- FAQ（入稿時はSWELLの「FAQブロック」で実装。ここではその見た目を再現） ---- */
.nl-faq{margin:0 0 24px}
.nl-faq-item{border-bottom:1px solid var(--nl-line);padding:16px 0}
.nl-faq-q,.nl-faq-a{display:flex;gap:12px;align-items:flex-start}
.nl-faq-q{margin:0 0 10px}
.nl-faq-q .nl-faq-icon{background:var(--nl-series-1);color:#fff}
.nl-faq-a .nl-faq-icon{background:var(--nl-accent);color:#fff}
.nl-faq-icon{flex:0 0 28px;height:28px;border-radius:50%;font-size:.9rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.nl-faq-q p{font-weight:700;margin:0;line-height:1.7}
.nl-faq-a p{margin:0;font-size:.95rem;line-height:1.85}

/* ---- 監修者コメント枠（キャラ吹き出しとは分離・M2(c)） ---- */
.nl-svc{border:1px solid var(--nl-line);border-left:4px solid #8a7b52;border-radius:0 var(--nl-radius) var(--nl-radius) 0;padding:12px 16px;margin:0 0 20px;background:var(--nl-surface)}
.nl-svc-head{font-size:.78rem;font-weight:700;color:#8a7b52;margin:0 0 4px}
.nl-svc-name{font-size:.88rem;font-weight:700;margin:0 0 6px}
.nl-svc p{font-size:.93rem;line-height:1.85;margin:0}

/* ---- 書き出しの紹介カード（目次前CV導線・ショッピング対策） ---- */
.nl-cvcard{border:2px solid var(--nl-accent);border-radius:var(--nl-radius);margin:0 0 22px;overflow:hidden}
.nl-cvcard-head{background:var(--nl-accent);color:#fff;font-size:.9rem;font-weight:700;padding:8px 16px}
.nl-cvcard-body{padding:14px 16px 6px}
.nl-cvcard-name{font-size:1.05rem;font-weight:800;margin:0 0 8px}
.nl-cvcard ul{list-style:none;margin:0 0 12px;padding:0}
.nl-cvcard li{position:relative;padding:0 0 0 1.6em;margin:0 0 6px;font-size:.93rem;line-height:1.7}
.nl-cvcard li::before{content:"✓";position:absolute;left:.2em;color:var(--nl-good);font-weight:800}
.nl-cvcard .nl-cta{margin:6px 0 10px}

/* ---- CTA（申込ボタン。リンク先はK-4確定後に設定） ---- */
.nl-cta{margin:8px 0 24px;text-align:center}
.nl-cta-micro{font-size:.85rem;font-weight:700;color:var(--nl-accent);margin:0 0 8px}
.nl-cta a{
  display:block;max-width:420px;margin:0 auto;padding:16px 20px;
  background:var(--nl-accent);color:#fff;font-size:1.05rem;font-weight:700;
  border-radius:999px;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.nl-cta-note{font-size:.75rem;color:var(--nl-ink-3);margin:8px 0 0}

/* ---- 内部リンク（記事タイトルリンク型） ---- */
.nl-linkbox{border:2px solid var(--nl-series-1);border-radius:var(--nl-radius);padding:12px 16px;margin:8px 0 22px;font-size:.95rem;line-height:1.7}
.nl-linkbox-label{display:inline-block;font-size:.72rem;font-weight:700;background:var(--nl-series-1);color:#fff;border-radius:4px;padding:2px 8px;margin-right:8px;vertical-align:.1em}
.nl-linkbox a{color:var(--nl-series-1);font-weight:700;text-underline-offset:3px}

/* ---- ポイントボックス（編集部名義・モバチェンロゴアイコン） ---- */
.nl-point{display:flex;gap:14px;align-items:flex-start;border:2px solid var(--nl-series-1);
  border-radius:var(--nl-radius);background:var(--nl-surface);padding:14px 16px;margin:0 0 22px}
.nl-point-icon{flex:0 0 44px;width:44px;height:44px;border-radius:10px;overflow:hidden}
.nl-point-icon img{width:100%;height:100%;display:block}
.nl-point-body{flex:1;min-width:0}
.nl-point-label{display:block;font-size:.72rem;font-weight:700;color:var(--nl-series-1);
  letter-spacing:.08em;margin:0 0 4px}
.nl-point-body p{margin:0;font-size:.95rem;line-height:1.85}
.nl-point-body b{color:var(--nl-series-1)}
.nl-point--warn{border-color:var(--nl-accent)}
.nl-point--warn .nl-point-label{color:var(--nl-accent)}
.nl-point--warn .nl-point-body b{color:var(--nl-accent)}

/* ---- （旧）キャラ吹き出し：2026-08-16廃止・未使用 ---- */
.nl-balloon{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px}
.nl-balloon-avatar{flex:0 0 auto;width:56px;text-align:center}
.nl-balloon-face{
  width:52px;height:52px;border-radius:50%;margin:0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;
  background:#fff;border:2px solid var(--nl-line);
}
.nl-balloon-face img{width:100%;height:100%;object-fit:cover;display:block}
.nl-balloon--guide .nl-balloon-face img{transform:scale(1.28) translateY(2px)}
.nl-balloon-name{display:block;font-size:.68rem;color:var(--nl-ink-3);font-weight:700;margin:4px 0 0;line-height:1.4}
.nl-balloon-body{
  position:relative;flex:1 1 auto;min-width:0;
  border:1px solid var(--nl-line);border-radius:var(--nl-radius);
  background:var(--nl-surface-2);padding:12px 14px;font-size:.95rem;line-height:1.8;
}
.nl-balloon-body::before{
  content:"";position:absolute;top:18px;left:-8px;
  border-style:solid;border-width:8px 8px 8px 0;
  border-color:transparent var(--nl-surface-2) transparent transparent;
}
.nl-balloon-body p{margin:0}
.nl-balloon--guide .nl-balloon-face{background:#fff;border-color:var(--nl-series-1)}
.nl-balloon--guide .nl-balloon-body{background:var(--nl-surface);border-color:var(--nl-series-1)}
.nl-balloon--guide .nl-balloon-body::before{border-right-color:var(--nl-surface)}
.nl-balloon--guide .nl-balloon-body b{color:var(--nl-series-1)}
/* 右側配置（案内役はこちらを使う）：アバターが右・しっぽも右向き */
.nl-balloon--r{flex-direction:row-reverse}
.nl-balloon--r .nl-balloon-body::before{
  left:auto;right:-8px;
  border-width:8px 0 8px 8px;
  border-color:transparent transparent transparent var(--nl-surface-2);
}
.nl-balloon--guide.nl-balloon--r .nl-balloon-body::before{
  border-color:transparent transparent transparent var(--nl-surface);
}

.nl-author,.nl-supervisor{border:1px solid var(--nl-line);border-radius:8px;padding:16px;margin:24px 0 12px;background:var(--nl-surface)}
.nl-author a,.nl-supervisor a{color:var(--nl-series-1)}

.nl-sim{border:1px solid var(--nl-line);border-radius:var(--nl-radius);padding:18px 16px;margin:0 0 26px;background:var(--nl-surface)}
.nl-sim h3{margin:0 0 6px;font-size:1.05rem}
.nl-tool-note{font-size:14px;color:var(--nl-ink-3);margin:0 0 14px}
.nl-tool-btn{display:block;width:100%;min-height:48px;border:0;border-radius:999px;background:var(--nl-series-1);color:#fff;font-size:16px;font-weight:700;cursor:pointer;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.nl-tool-result{display:none;border:2px solid var(--nl-series-1);border-radius:8px;padding:14px;margin:14px 0 0;font-size:15px}
.nl-tool-result h4{margin:0 0 8px;font-size:16px}
.nl-tool-result ul{margin:0 0 10px;padding-left:20px}
.nl-sim label{display:block;font-size:14px;font-weight:700;margin:10px 0 4px}
.nl-sim input[type=number]{width:100%;box-sizing:border-box;border:1px solid var(--nl-line);border-radius:8px;padding:11px 10px;font-size:16px;min-height:44px;background:var(--nl-surface);color:var(--nl-ink)}
.nl-sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:430px){.nl-sim-grid{grid-template-columns:1fr}}
.nl-sim-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--nl-line);padding:7px 0;font-size:15px}
.nl-sim-total{font-weight:700;font-size:17px;border-bottom:0}

/* =========================================================================
   nl-typo-patch v1  —  見出しの階層と余白（2026-08-21 確定）
   =========================================================================

   【置き場所】
   ・本番：SWELL「追加CSS」の一番下に貼る
   ・ローカル検証用の自己完結HTML（テスト記事／装飾パーツ見本_プロトタイプ.html）：
     その中の <style> の一番下（</style> の直前）に貼る

   【必ず末尾に置くこと】
   既存の .nl- CSS を書き換えるのではなく、後ろから上書きする方式。
   前に置くと詳細度が同じルールで負けて効かない。消せば元に戻る。

   【2回貼らないこと】
   --sp-para などの変数が重複定義される。貼る前に "nl-typo-patch" で検索する。

   【HTMLは1行も変更しない】

   【何を直しているか】
   「文字がぎっしりして見える」原因は装飾不足ではなく〈階層のなさ〉。
   ・h3が本文の1.02倍しかなく、小見出しが小見出しに見えていない
   ・行間32.3pxに対し段落間の追加余白が19px。段落が段落に見えていない
   ・文字サイズが25種類あり、大小の意味が読み取れない
   ・枠線のある箱が縦に76個並び、どれが重要か分からない
   新しい色・新しいパーツは追加していない。
   ========================================================================= */

.nl-wrap{
  /* --- タイポスケール（1.18倍ずつ。すべてpx直指定でremとの混在を断つ） --- */
  --fs-xs:13px;    /* 出典・注記・キャプション */
  --fs-s:15px;     /* パーツ内の本文・表 */
  --fs-base:17px;  /* 本文 */
  --fs-h3:19.5px;
  --fs-h2:23px;
  --fs-h1:28px;

  /* --- 余白スケール（段落 < 小見出し < 大見出し が明確に分かれる） --- */
  --sp-para:2em;   /* 段落間：行間(31px)を明確に上回る34px */
  --sp-h3:52px;
  --sp-h2:88px;

  font-size:var(--fs-base);
  line-height:1.85;      /* 1.9 → 1.85。段落間を広げるぶん行間はわずかに締める */

	font-weight:400;
}

/* -------------------------------------------------------------------------
   1. 見出しに階層を作る
      before: h1 24.8 / h2 20.5 / h3 17.3 / 本文 17.0（h3は本文の1.02倍）
      after : h1 28   / h2 23   / h3 19.5 / 本文 17  （h3は本文の1.15倍）
   ------------------------------------------------------------------------- */
.nl-wrap h1{
  font-size:var(--fs-h1);line-height:1.42;letter-spacing:-.02em;
  margin:.5em 0 .6em;
}
.nl-wrap h2{
  font-size:var(--fs-h2);line-height:1.45;letter-spacing:-.01em;
  /* グレーの塗りをやめて軽くし、そのぶん前の余白で章を区切る */
  background:transparent;
  border-left:4px solid var(--nl-series-1);
  border-radius:0;
  padding:2px 0 2px 14px;
  margin:var(--sp-h2) 0 24px;
}
.nl-wrap h3{
  font-size:var(--fs-h3);line-height:1.5;
  margin:var(--sp-h3) 0 12px;
}

/* --- h3の装飾：段違い2本罫 ------------------------------------------------
   見出しの下に「全幅の細い罫（1px）」を敷き、その左端に「短い太罫（56×3px・
   ティール）」を重ねる。h2が「左の縦線」なので、h3は軸をずらして「下の横線」で
   差をつける。

   ・見出しに"土台"ができるので、サイズだけの強調と違って独立して見える
   ・箱でも背景でもないので、枠線を減らす方針（下の4）と矛盾しない
   ・色はブランドのティール1色のみ
   ・2行・3行に折り返しても崩れない

   ※ セレクタは .nl-wrap > h3（直下のみ）。.nl-wrap h3 に緩めないこと。
     パーツ内（.nl-survey / .nl-toc / .nl-honest / .nl-sim）のh3は
     それぞれ固有のマーカー（■ や ! の丸）を持っているので二重になる。
   ------------------------------------------------------------------------ */
.nl-wrap > h3{
  position:relative;
  padding-bottom:14px;
}
.nl-wrap > h3::before{           /* 全幅のベース罫 */
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--nl-line);
}
.nl-wrap > h3::after{            /* 左端に重ねる短い太罫 */
  content:"";
  position:absolute;left:0;bottom:0;
  width:56px;height:3px;border-radius:2px;
  background:var(--nl-series-1);
}

/* h2の直後にくる見出し画像／パーツは、上の余白を詰める */
.nl-wrap h2 + .nl-h2img,
.nl-wrap h2 + p,
.nl-wrap h3 + p{margin-top:0}

/* -------------------------------------------------------------------------
   2. 段落を分離する（最重要）
      before: 行間32.3px / 段落間の追加余白19px → 差が1.6倍しかなく溶ける
      after : 行間31.5px / 段落間の追加余白34px → 差が2.1倍。段落が段落に見える
   ------------------------------------------------------------------------- */
.nl-wrap > p{margin:0 0 var(--sp-para)}

/* -------------------------------------------------------------------------
   3. 文字サイズを25種類 → 6種類に統合
      「本文より小さい文字」が10段階あったものを2段階（15px / 13px）へ
   ------------------------------------------------------------------------- */
.nl-wrap .nl-point-body p,
.nl-wrap .nl-faq-a p,
.nl-wrap .nl-voice blockquote,
.nl-wrap .nl-step p,
.nl-wrap .nl-step-warn,
.nl-wrap .nl-honest li,
.nl-wrap .nl-cvcard li,
.nl-wrap .nl-toc li,
.nl-wrap .nl-linkbox,
.nl-wrap .nl-svc p,
.nl-wrap .nl-acc-body,
.nl-wrap .nl-scroll table,
.nl-wrap .nl-scroll thead th,
.nl-wrap .nl-sim-row,
.nl-wrap .nl-tool-result{
  font-size:var(--fs-s);line-height:1.8;
}
.nl-wrap small,
.nl-wrap .nl-cost-note,
.nl-wrap .nl-cost-src,
.nl-wrap .nl-figure-sub,
.nl-wrap .nl-legend,
.nl-wrap .nl-src,
.nl-wrap .nl-scroll-hint,
.nl-wrap .nl-tool-note,
.nl-wrap .nl-step-meta,
.nl-wrap .nl-voice-attr,
.nl-wrap .nl-cta-note,
.nl-wrap .nl-prbar{
  font-size:var(--fs-xs);line-height:1.75;
}
/* パーツ見出し・ボタンは本文と同じ17pxに揃える（14〜16.8pxがバラバラだった） */
.nl-wrap .nl-survey h3,
.nl-wrap .nl-toc h3,
.nl-wrap .nl-honest h3,
.nl-wrap .nl-sim h3,
.nl-wrap .nl-figure-title,
.nl-wrap .nl-step-title,
.nl-wrap .nl-cost-name,
.nl-wrap .nl-cvcard-name,
.nl-wrap .nl-cta a,
.nl-wrap .nl-tool-btn,
.nl-wrap .nl-tool-result h4{
  font-size:var(--fs-base);margin-top:0;
}
/* 極小ラベルは 11.5px の1段階に統合（10.9 / 11.2 / 11.5 の3種あった） */
.nl-wrap .nl-tag-q5,
.nl-wrap .nl-cost-badge,
.nl-wrap .nl-point-label,
.nl-wrap .nl-voice-id,
.nl-wrap .nl-linkbox-label,
.nl-wrap .nl-label,
.nl-wrap .nl-svc-head,
.nl-wrap .nl-cvcard-head{font-size:11.5px;letter-spacing:.08em}
/* 13px に寄せる */
.nl-wrap .nl-step-num,
.nl-wrap .nl-cta-micro{font-size:var(--fs-xs)}
/* 15px に寄せる（表・図のラベル類） */
.nl-wrap .nl-bar-name,
.nl-wrap .nl-bar-val,
.nl-wrap .nl-dl,
.nl-wrap .nl-faq-icon,
.nl-wrap details.nl-acc > summary,
.nl-wrap .nl-sim label,
.nl-wrap .nl-svc-name{font-size:var(--fs-s)}
/* 数値の強調は 19.5 / 23（見出しスケールと共有する） */
.nl-wrap .nl-cost-amt{font-size:var(--fs-h3)}
.nl-wrap .nl-cost-total .nl-cost-amt{font-size:var(--fs-h2)}
/* 著者・監修者ボックスはHTML側にインラインstyle（14px/16px）が残っている。
   本来はHTML側から font-size を消すのが正しい。ここでは暫定的に上書きしている */
.nl-wrap .nl-author p,
.nl-wrap .nl-supervisor p{font-size:var(--fs-s) !important;line-height:1.8}
/* ※ input[type=number] の16pxは変更しない（iOSの自動ズーム防止のため必須） */

/* -------------------------------------------------------------------------
   4. 枠線のある箱を減らす（before: 縦に76個）
      強い枠線は「結論」「注意」「CTA」だけに残し、
      それ以外は背景色だけで区切る
   ------------------------------------------------------------------------- */
.nl-wrap .nl-point{
  border:0;
  background:var(--nl-surface-2);
  padding:16px 18px;
  margin:0 0 var(--sp-para);
}
.nl-wrap .nl-point--warn{
  background:transparent;
  border-left:4px solid var(--nl-accent);
  border-radius:0 var(--nl-radius) var(--nl-radius) 0;
  padding-left:16px;
}
.nl-wrap .nl-voice,
.nl-wrap .nl-svc{border-top:0;border-right:0;border-bottom:0}
.nl-wrap .nl-cost{border:0;background:var(--nl-surface-2)}
.nl-wrap .nl-survey,
.nl-wrap .nl-sim{border:0;background:var(--nl-surface-2)}
.nl-wrap .nl-linkbox{
  border:0;border-left:4px solid var(--nl-series-1);border-radius:0;
  background:var(--nl-surface-2);
}
/* 見出し画像の枠線を外す（画像自体に枠があるので二重になっていた） */
.nl-wrap .nl-h2img img{border:0}
.nl-wrap .nl-h2img{margin:0 0 26px}

/* -------------------------------------------------------------------------
   5. パーツ同士の間隔を、段落間と揃える
      （バラバラだった 20/22/24/26px を一本化）
   ------------------------------------------------------------------------- */
.nl-wrap .nl-conclusion,
.nl-wrap .nl-cvcard,
.nl-wrap .nl-honest,
.nl-wrap .nl-survey,
.nl-wrap .nl-toc,
.nl-wrap .nl-scroll,
.nl-wrap details.nl-acc,
.nl-wrap .nl-faq,
.nl-wrap .nl-sim,
.nl-wrap .nl-figure,
.nl-wrap .nl-cost-grid,
.nl-wrap .nl-steps,
.nl-wrap .nl-voices{margin-bottom:var(--sp-para)}

/* -------------------------------------------------------------------------
   6. 表がモバイルで見切れないようにする
      before: min-width:520px（コンテナは342px）→ 5つの表すべてが常に途切れる
   ------------------------------------------------------------------------- */
.nl-wrap .nl-scroll table{min-width:0}
.nl-wrap .nl-scroll th,
.nl-wrap .nl-scroll td{padding:11px 12px}
.nl-wrap .nl-scroll thead th{white-space:normal}
.nl-wrap .nl-scroll tbody th{white-space:normal}
/* 長い数式が入る表だけ折り返せず残るので、単語区切りを許可する */
.nl-wrap .nl-scroll th,
.nl-wrap .nl-scroll td{overflow-wrap:anywhere;word-break:normal}
/* それでも横スクロールが必要な表は、右端が切れていることが分かるように影を出す */
.nl-wrap .nl-scroll{
  background-image:
    linear-gradient(to right,  var(--nl-surface) 40%, rgba(255,255,255,0)),
    linear-gradient(to left,   var(--nl-surface) 40%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0    50%, rgba(0,0,0,.13), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.13), rgba(0,0,0,0));
  background-position:left center,right center,left center,right center;
  background-size:28px 100%,28px 100%,12px 100%,12px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll;
}
/* HTML側に style="min-width:520px" がインラインで残っている表への暫定対応。
   本来はHTML側から消すのが正しい（そのぶん !important を書かずに済む） */
.nl-wrap .nl-scroll table[style]{min-width:0 !important}

/* -------------------------------------------------------------------------
   7. リンク色（本文中の素のリンクがブラウザ標準の青のままだった）
   ------------------------------------------------------------------------- */
.nl-wrap a:not([class]){
  color:var(--nl-series-1);text-underline-offset:3px;
}
/* ただし、独自のリンク色を持つパーツはそちらを優先する。
   上のルールは詳細度(0,2,1)で .nl-toc a / .nl-cta a (0,1,1) に勝ってしまい、
   目次リンクがティールに、CTAボタンの白文字がティールになっていた（実測・修正済み）。 */
.nl-wrap .nl-toc a{color:var(--nl-ink)}
.nl-wrap .nl-cta a{color:#fff}

/* -------------------------------------------------------------------------
   8. 強調を落ち着かせる
      色つき太字は「結論」「注意」の2用途に限定し、
      本文中の strong は素の太字に戻す
   ------------------------------------------------------------------------- */
.nl-wrap > p strong,
.nl-wrap > p b{color:inherit;font-weight:700}

/* -------------------------------------------------------------------------
   10. SWELLテーマ補正（2026-08-21 実機検証で追加・SWELL入稿時は必須）
       ローカルの自己完結HTMLでは出ないが、SWELLに入稿すると壊れる箇所。
       testsite01 の下書き（?p=16）で実測し、修正後に0件を確認済み。

       SWELLは .post_content の h2 / h3 / th に独自デザインを当てている：
         ・h2  → 濃い背景＋color:#fff＋上下2px罫＋::beforeの帯
         ・h3  → 左右10.5pxのパディング＋::beforeの2色下線バー
         ・th  → 濃い背景＋color:#fff
       このパッチは「背景」だけを透明・淡色に変えて color を指定していなかったため、
       白文字だけが残り「白地に白」で見えなくなっていた。

       ※ SWELL以外のテーマでも無害。詳細度は .nl-wrap 側が同点以上で、
         読み込み順が後なので !important は不要。
   ------------------------------------------------------------------------- */

/* --- h2：白文字・上下罫・帯を打ち消す（h2×15が消えていた） --- */
.nl-wrap h2{
  color:var(--nl-ink);        /* これが無いと白地に白で見えない */
  border-top:0;               /* SWELLのh2上下2px罫 */
  border-bottom:0;
  border-right:0;
}
.nl-wrap h2::before,          /* SWELLがh2に敷く帯（position:absolute） */
.nl-wrap h2::after{display:none}

/* --- h3/h4：SWELLの左右パディングを外す（本文より11pxずれていた） --- */
.nl-wrap h3,
.nl-wrap h4{padding-top:0;padding-left:0;padding-right:0}
/* パーツ内の見出しは下パディングも不要（.nl-wrap > h3 の14pxは残す） */
.nl-wrap .nl-survey h3,
.nl-wrap .nl-toc h3,
.nl-wrap .nl-honest h3,
.nl-wrap .nl-sim h3{padding-bottom:0}

/* --- SWELLの見出し下線バー（2色のグラデーション）を消す ---
   独自マーカーを持つパーツ（.nl-survey ■ / .nl-honest !）は自前の ::before で
   上書きされるので残るのはこの2つだけ。実測で確認済み。 */
.nl-wrap .nl-toc h3::before,
.nl-wrap .nl-sim h3::before{display:none}

/* --- パーツ内マーカーが SWELL の position:absolute を継承して飛ぶ ---
   .nl-survey の■と .nl-honest の！が見出しの下にずれ落ちていた */
.nl-wrap .nl-survey h3::before,
.nl-wrap .nl-honest h3::before{position:static;flex:none}

/* --- 表ヘッダー：h2と同じ理由で白文字になっていた（th×15） --- */
.nl-wrap .nl-scroll th{color:var(--nl-ink)}

/* -------------------------------------------------------------------------
   9. デスクトップでは本文をもう少し広く・大きく
   ------------------------------------------------------------------------- */
@media (min-width:768px){
  .nl-wrap{--fs-base:17.5px;--fs-h1:34px;--fs-h2:26px;--fs-h3:21px;max-width:740px}
}
/* =========================================================================
   nl-case v1  —  ラベル付きブロック（P007／2026-08-21）
   hタグを立てるほどではない区切りに、ラベルを付けてひとまとまりにする部品。
   中身は自由（1文でも、段落でも、箇条書きでもよい）。主役はラベル。
   ・見出し(h3)にするか迷ったらP007 §3の3問で判定する。迷ったらh3にする
   ・1記事につき3回まで
   ・nl-case-grid（2枚並べ）を使ったら 06_table_ux.md に判定を書く（N-12）
   ========================================================================= */

/* 2〜3個を並べて見比べるときだけ被せる枠（単体で使うときは不要） */
.nl-case-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px}
@media (min-width:600px){ .nl-case-grid{grid-template-columns:1fr 1fr} }

/* ラベル付きブロック本体。単体で置いてよい */
.nl-case{
  border:1px solid var(--nl-line);
  border-radius:var(--nl-radius);
  padding:12px 14px;
  margin:0 0 14px;
  background:var(--nl-surface);
}
.nl-case-grid>.nl-case{margin:0}

/* ラベル。.nl-point-label / .nl-linkbox-label と同じ命名系列 */
.nl-case-label{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  background:var(--nl-series-1);
  border-radius:999px;
  padding:2px 10px;
  margin:0 0 8px;
}

/* 中身：段落 */
.nl-case>p{font-size:.93rem;line-height:1.8;margin:0 0 8px}
.nl-case>p:last-child{margin-bottom:0}

/* 中身：箇条書き。インデントは .nl-honest ul と同じ 1.15em に揃える
   （素の ul はブラウザ既定の 40px になり、記事内で不揃いになるため） */
.nl-case ul{margin:0;padding-left:1.15em}
.nl-case li{margin:0 0 6px;font-size:.93rem;line-height:1.8}
.nl-case li:last-child{margin-bottom:0}
.nl-case li b{color:var(--nl-ink)}

/* =========================================================================
   swell_child/style.css への追記案（2026-08-27）
   記事 /switch/rakuten-to-uq/ を入稿する前に貼る必要があります。
   貼るのは人間の作業です（P002・P007：CCは子テーマCSSを触らない）。

   既存の記述は一切書き換えません。ファイルの末尾に追記してください。
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 強調マーカー（手順書 V-03／合格ライン V-10）
      手順書は「<b class="nl-mk"> を1記事8〜12個」と定めていますが、
      子テーマ style.css に .nl-mk の定義がありません（2026-08-27 実取得で確認）。
      このままだと素の <b>（太字）と同じ見た目になり、マーカーが引かれません。
      色は既存トークン --nl-accent（アンバー）をそのまま使います。
   ------------------------------------------------------------------------- */
.nl-wrap b.nl-mk{
  font-weight:700;
  background:linear-gradient(transparent 62%, rgba(232,129,28,.30) 62%);
  padding:0 .06em;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])) .nl-wrap b.nl-mk{
    background:linear-gradient(transparent 62%, rgba(224,138,51,.36) 62%);
  }
}

/* -------------------------------------------------------------------------
   2. 更新日の表示（合格ライン C-08）
      「記事上部に更新日を表示し、JSON-LDの dateModified と一致させる」ため、
      本文の先頭に <p class="nl-updated"><small>更新日：…</small></p> を置いています。
      文字サイズ・色は既存の .nl-wrap small（14px）をそのまま使うので、
      ここでは余白だけ指定します。
   ------------------------------------------------------------------------- */
.nl-wrap .nl-updated{margin:0 0 10px}

/* -------------------------------------------------------------------------
   3. 打消し表示の文字サイズ（合格ライン §2-3-D の D-2・D-4／V-14）
      いずれも【一発NG判定項目】です。

      実測（2026-08-27・390px・実描画）：
        .nl-prbar      13px … V-14「PR表記は14px以上」に違反
        .nl-cost-note  13px … 割引の適用条件・解約事務手数料の条件・端末残債の扱い
                              ＝打消し表示そのもの。D-2「13px以下は不可」に違反
        .nl-tool-note  13px … 記事内ツールの注意点（打消し条件）。同上
        small          13px … 同上
      原因は .nl-wrap の --fs-xs:13px です（子テーマ style.css 380行目）。
      この変数を14pxに上げ、打消し表示そのものは本文寄りの15pxにします。

      ※ 3件とも既存の3記事（ID 48・32・16）にも同じ値が入っています。
         この記事だけの問題ではありません（パッチのドラフトを別途出しています）。
   ------------------------------------------------------------------------- */
.nl-wrap{
  --fs-xs:14px;   /* 13px → 14px（D-2の下限）。出典・注記・キャプションもこの値 */
}

/* 打消し表示は「注釈」ではなく本文扱いにする（D-4）。パーツ内本文と同じ15px */
.nl-wrap .nl-cost-note,
.nl-wrap .nl-tool-note{
  font-size:var(--fs-s);
}

/* 価格に付く条件バッジ（「条件つき・税込」など）も打消し表示の一部として扱う */
.nl-wrap .nl-cost-badge{
  font-size:14px;
}

/* -------------------------------------------------------------------------
   4. 記事内ツールのプルダウン（§M4-5：タップ領域44px以上・JSエラー0）
      .nl-sim input[type=number] には指定がありますが、select には
      指定が無く、ブラウザ既定の13.33pxで表示されていました（実測）。
      16px未満だと iOS Safari がフォーカス時にページを自動拡大します。
   ------------------------------------------------------------------------- */
.nl-wrap .nl-sim select{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--nl-line);
  border-radius:8px;
  padding:11px 10px;
  font-size:16px;
  min-height:44px;
  background:var(--nl-surface);
  color:var(--nl-ink);
}

/* -------------------------------------------------------------------------
   5. 実地取材のスクショ（.nl-figure の中の画像）
      子テーマには .nl-h2img img{width:100%} はありますが、
      .nl-figure img には何の指定もありません（2026-08-27 実取得で確認）。
      スマホの実画面は 1080×2520 のような縦長なので、指定が無いと
      390px幅で横に大きくはみ出します（実測 scrollWidth 1104px）。

      幅は 320px で止めています。原寸幅まで広げると1枚で1画面を占有し、
      本文が読み進められなくなるためです。
   ------------------------------------------------------------------------- */
.nl-wrap .nl-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:320px;
  margin:0 auto 8px;
  border:1px solid var(--nl-line);
  border-radius:var(--nl-radius);
}
.nl-wrap .nl-figure figcaption{
  text-align:center;
}

/* =========================================================================
   子テーマ style.css の【末尾に追記】するCSS
   作成日: 2026-09-02 ／ 対象: mobile.xn--ipv6-yn4cxgwe959zqrkp58g.com の swell_child/style.css

   ■ なぜ要るか
   雛形 `雛形/監修者ボックス.html` は、クラス名とインラインstyleがセットでした。
   記事に入れるとき P011/P002（CSSは子テーマで管理する）に従ってインラインstyleを
   外したため、枠だけを描く .nl-supervisor しか効かず、中身のクラスが素通しに
   なっています。結果として **顔写真と経歴が横に並ばず、縦積みで表示** されます。
   ここは雛形のインラインstyleを、そのまま子テーマの規則に写したものです。

   ■ 対象クラス（中身検査 C-13 が「子テーマCSSに定義がない」と出したもの）
     .nl-supervisor-head / .nl-supervisor-body   … 監修者ボックスの中身
     .nl-supervisor-note / .nl-supervisor-name   … 本文中に置く監修者コメント
     .nl-tool-lead / .nl-tool-select             … 記事内ツール

   ■ 貼る場所
   既存のCSSは消さず、**ファイルの一番うしろに足す**（記事デザイン更新v1と同じやり方。
   消せば元に戻る）。既存の `.nl-wrap .nl-supervisor p{font-size:var(--fs-s)!important}`
   より後ろに置く必要があるため、必ず末尾に置いてください。

   ■ 使っている変数はすべて既存のもの
     --nl-ink / --nl-ink-3 / --nl-line / --nl-surface / --nl-surface-2
     --nl-series-1 / --nl-radius / --fs-s
   ライト・ダークの切り替えは既存の変数定義がそのまま効きます。
   ========================================================================= */

/* -------------------------------------------------------------------------
   6-1. 監修者ボックスの中身
   ------------------------------------------------------------------------- */

/* 「この記事の監修者」の行。
   既存の `.nl-wrap .nl-supervisor p` に負けないよう p を含めた形で書く */
.nl-wrap .nl-supervisor p.nl-supervisor-head{
  margin:0 0 12px;
  font-size:15px !important;
  font-weight:700;
  line-height:1.6;
  color:var(--nl-ink);
}

/* 顔写真と経歴を横に並べる（雛形の display:flex を写したもの）。
   顔写真がまだ入っていない記事では、この指定があっても見た目は変わらない */
.nl-wrap .nl-supervisor-body{
  display:flex;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.nl-wrap .nl-supervisor-body > img{
  width:72px;
  height:72px;
  flex:0 0 auto;
  border-radius:50%;
  object-fit:cover;
}
.nl-wrap .nl-supervisor-body > div{
  flex:1 1 220px;
  min-width:220px;
}

/* 氏名の行だけ少し大きく（雛形の 17px） */
.nl-wrap .nl-supervisor .nl-supervisor-body > div > p:first-child{
  margin:0 0 4px;
  font-size:17px !important;
  font-weight:700;
  line-height:1.5;
}

/* -------------------------------------------------------------------------
   6-2. 本文の途中に置く監修者コメント（.nl-supervisor とは別の部品）
        記事末の監修者ボックスと見分けがつくよう、枠ではなく左の線で示す
   ------------------------------------------------------------------------- */
.nl-wrap .nl-supervisor-note{
  margin:0 0 22px;
  padding:12px 14px;
  border-left:3px solid var(--nl-series-1);
  border-radius:0 var(--nl-radius) var(--nl-radius) 0;
  background:var(--nl-surface-2);
  color:var(--nl-ink);
}
.nl-wrap .nl-supervisor-note p{
  margin:0 0 6px;
  font-size:var(--fs-s);
  line-height:1.8;
  color:var(--nl-ink);
}
.nl-wrap .nl-supervisor-note p:last-child{
  margin-bottom:0;
}
.nl-wrap .nl-supervisor-note p.nl-supervisor-name{
  font-size:13px;
  font-weight:700;
  color:var(--nl-series-1);
}

/* -------------------------------------------------------------------------
   6-3. 記事内ツール
        .nl-tool-select は、上の §4 `.nl-wrap .nl-sim select` と同じ見た目に
        そろえるための別名。16px未満だと iOS Safari がフォーカス時に
        ページを自動拡大するため、font-size は16pxから下げない
   ------------------------------------------------------------------------- */
.nl-wrap .nl-tool-lead{
  margin:0 0 8px;
  font-size:var(--fs-s);
  line-height:1.7;
  color:var(--nl-ink);
}
.nl-wrap .nl-tool-select{
  width:100%;
  box-sizing:border-box;
  padding:11px 10px;
  min-height:44px;
  border:1px solid var(--nl-line);
  border-radius:8px;
  font-size:16px;
  background:var(--nl-surface);
  color:var(--nl-ink);
}

/* ===== 表の横スクロールを手順書どおりに戻す（P055／2026-09-04） ===== */
.nl-wrap .nl-scroll table[style]{ min-width:520px !important; }
.nl-wrap .nl-scroll table{ min-width:520px; }


/* 声カードのアバター（mobachen_voice_av_*.png）2026-09-05 */
.nl-voice-avatar{display:inline-block;width:36px;height:36px;border-radius:50%;background:#e9eef2 center/cover no-repeat;flex:0 0 auto;vertical-align:middle}
.nl-voice-avatar[data-av="na"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_na.png)}
.nl-voice-avatar[data-av="f10"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f10.png)}
.nl-voice-avatar[data-av="f10a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f10a.png)}
.nl-voice-avatar[data-av="f10b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f10b.png)}
.nl-voice-avatar[data-av="f10c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f10c.png)}
.nl-voice-avatar[data-av="f10d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f10d.png)}
.nl-voice-avatar[data-av="f20"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f20.png)}
.nl-voice-avatar[data-av="f20a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f20a.png)}
.nl-voice-avatar[data-av="f20b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f20b.png)}
.nl-voice-avatar[data-av="f20c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f20c.png)}
.nl-voice-avatar[data-av="f20d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f20d.png)}
.nl-voice-avatar[data-av="f30"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f30.png)}
.nl-voice-avatar[data-av="f30a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f30a.png)}
.nl-voice-avatar[data-av="f30b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f30b.png)}
.nl-voice-avatar[data-av="f30c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f30c.png)}
.nl-voice-avatar[data-av="f30d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f30d.png)}
.nl-voice-avatar[data-av="f40"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f40.png)}
.nl-voice-avatar[data-av="f40a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f40a.png)}
.nl-voice-avatar[data-av="f40b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f40b.png)}
.nl-voice-avatar[data-av="f40c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f40c.png)}
.nl-voice-avatar[data-av="f40d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f40d.png)}
.nl-voice-avatar[data-av="f50"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f50.png)}
.nl-voice-avatar[data-av="f50a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f50a.png)}
.nl-voice-avatar[data-av="f50b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f50b.png)}
.nl-voice-avatar[data-av="f50c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f50c.png)}
.nl-voice-avatar[data-av="f50d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f50d.png)}
.nl-voice-avatar[data-av="f60"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f60.png)}
.nl-voice-avatar[data-av="f60a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f60a.png)}
.nl-voice-avatar[data-av="f60b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f60b.png)}
.nl-voice-avatar[data-av="f60c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f60c.png)}
.nl-voice-avatar[data-av="f60d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_f60d.png)}
.nl-voice-avatar[data-av="m10"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m10.png)}
.nl-voice-avatar[data-av="m10a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m10a.png)}
.nl-voice-avatar[data-av="m10b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m10b.png)}
.nl-voice-avatar[data-av="m10c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m10c.png)}
.nl-voice-avatar[data-av="m10d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m10d.png)}
.nl-voice-avatar[data-av="m20"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m20.png)}
.nl-voice-avatar[data-av="m20a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m20a.png)}
.nl-voice-avatar[data-av="m20b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m20b.png)}
.nl-voice-avatar[data-av="m20c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m20c.png)}
.nl-voice-avatar[data-av="m20d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m20d.png)}
.nl-voice-avatar[data-av="m30"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m30.png)}
.nl-voice-avatar[data-av="m30a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m30a.png)}
.nl-voice-avatar[data-av="m30b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m30b.png)}
.nl-voice-avatar[data-av="m30c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m30c.png)}
.nl-voice-avatar[data-av="m30d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m30d.png)}
.nl-voice-avatar[data-av="m40"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m40.png)}
.nl-voice-avatar[data-av="m40a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m40a.png)}
.nl-voice-avatar[data-av="m40b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m40b.png)}
.nl-voice-avatar[data-av="m40c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m40c.png)}
.nl-voice-avatar[data-av="m40d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m40d.png)}
.nl-voice-avatar[data-av="m50"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m50.png)}
.nl-voice-avatar[data-av="m50a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m50a.png)}
.nl-voice-avatar[data-av="m50b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m50b.png)}
.nl-voice-avatar[data-av="m50c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m50c.png)}
.nl-voice-avatar[data-av="m50d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m50d.png)}
.nl-voice-avatar[data-av="m60"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m60.png)}
.nl-voice-avatar[data-av="m60a"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m60a.png)}
.nl-voice-avatar[data-av="m60b"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m60b.png)}
.nl-voice-avatar[data-av="m60c"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m60c.png)}
.nl-voice-avatar[data-av="m60d"]{background-image:url(/wp-content/uploads/2026/09/mobachen_voice_av_m60d.png)}


/* トップのメインビジュアルを本文幅（900px）に揃える 2026-09-06 */
.p-mainVisual .p-mainVisual__inner{max-width:var(--article_size,900px);margin-left:auto;margin-right:auto;}
.p-mainVisual .p-mainVisual__img{border-radius:8px;}
@media (max-width:959px){.p-mainVisual .p-mainVisual__inner{padding:0 16px;}}

.nl-wrap .nl-cta ul{list-style:none;margin:0;padding:0}
.nl-wrap .nl-cta li{margin:0 0 10px;padding:0}
.nl-wrap .nl-cta li:last-child{margin-bottom:0}
.nl-wrap .nl-cta li::before{content:none}

/* -------------------------------------------------------------------------
   P120 声カードの閉じかっこ「」」が行の中で上に浮く
   SWELL本体の .post_content blockquote:after{line-height:1;position:absolute}
   を子テーマが上書きしていないため、本文（line-height 27.8px）に対して
   ::after だけが line-height 15px で描かれ、実測 5.7px 上にずれる。
   位置そのものは静止位置で正しいので、下方向に 8px 送って行に載せる。
   右の 10px は見た目の余韻（2026-09-10・青山さん指定）。句点との間が空くのと、
   最終行が長い回答では右パディング30pxを食う点は了解のうえで採用している。
   ※ ::before（＝SWELLの左の縦罫に化けている）は意図的に触らない。
   ------------------------------------------------------------------------- */
.nl-wrap .nl-voice blockquote::after{ top:auto; margin-top:8px; margin-left:10px }

/* =========================================================================
   子テーマ style.css の【末尾に追記】するCSS
   作成日: 2026-09-12 ／ 対象: mobile.xn--ipv6-yn4cxgwe959zqrkp58g.com の swell_child/style.css

   ■ なぜ要るか
   FAQの回答が2段落以上あると、段落が横に並んで列に割れます。
   読者は左→右に読むことになり、出典行（.nl-src）が右端の細い列に押し込まれます。

   原因は既存CSS 244行目です。

       .nl-faq-q,.nl-faq-a{display:flex;gap:12px;align-items:flex-start}

   .nl-faq-a の中身は次の形になっています。

       <div class="nl-faq-a">
         <span class="nl-faq-icon">A</span>
         <p>1段落目</p>
         <p>2段落目</p>
         <p class="nl-src">出典：…</p>
       </div>

   display:flex なので、アイコンと <p> が全部 flex の子として横一列に並びます。
   つまりこの部品は「アイコン1個＋段落1個」しか想定していませんでした。
   回答が1段落だけなら正常に見えるため、気づきにくい形です。

   ■ 影響範囲（2026-09-12 実測・WordPressの公開中の投稿を全数走査）
     FAQ回答が列に割れている記事 … 29本
     崩れている回答             … 82件

     7件 softbank-coupon / rakuten-to-uq / rakuten-1yen / docomo-coupon
     5件 uq-model-change / rakuten-coupon / mineo-campaign
     4件 uq-to-ymobile
     3件 ymobile-to-uq / pixel-cheap / nuro
     2件 ymobile-yametoke / ymobile-campaign / rakuten-speed / rakuten-model-change
          kouza-furikae / hikaku-unlimited / hikaku-10gb / genkin-soku
     1件 zimutesuryou / ymobile-demerit / tanmatsu-only / rakuten-to-ymobile
          rakuten-campaign / linemo-campaign / iijmio-campaign / au-coupon
          ahamo-demerit / ahamo-campaign

   ※ CSSで直すので、記事のHTMLは1文字も変えずに29本が同時に直ります。

   ■ 直し方
   .nl-faq-a を flex から grid に変えます。
   アイコンを1列目に固定し、残り（段落・出典・リストなど何でも）は2列目に縦に積みます。

   ■ 貼る場所
   既存のCSSは消さず、ファイルの一番うしろに足してください
   （記事デザイン更新v1と同じやり方。消せば元に戻ります）。
   既存の 244行目・469行目（.nl-wrap .nl-faq-a p の文字サイズ）より後ろに
   置く必要があるため、必ず末尾に置いてください。

   ■ 影響しない範囲（実測で確認済み・2026-09-12）
   ローカルの記事のうち、複数段落のFAQ回答を持つ9本（10gb / beginner / kouza-furikae /
   rakuten-to-uq / rakuten-to-ymobile / rakuten-yametoke / uq-to-ymobile / ymobile-to-uq /
   zimutesuryou）を、子テーマCSSを当てて 390px と 1280px で丸ごと実描画し、
   当てる前後を突き合わせました。

     ・列に割れていた回答 22件 → 0件（390px・1280pxとも）
     ・アイコン（.nl-faq-icon）の大きさ・位置  … 変化なし（親からの相対で計測）
       flex:0 0 28px は grid では無視されますが、grid-template-columns:28px が
       同じ28px幅の列を作ります
     ・本文の左端の位置                         … 変化なし
     ・質問行（.nl-faq-q）                      … 触っていないので変化なし
     ・ほかの部品（.nl-point / .nl-voice / .nl-cost / .nl-toc / .nl-survey）… 変化なし
     ・ページの横スクロール                     … 発生しない（390＝390／1280＝1280）
     ・469行目の文字サイズ、529行目のアイコンの文字サイズ … そのまま効きます

   ■ 1か所だけ変わるところ（見た目は変わりません）
   1段落しかない回答のうち、文が短くて1行に収まらないほどでもないものは、
   <p> の「箱の幅」が内容幅から列幅いっぱいに変わります
   （flex は内容に合わせて縮み、grid の 1fr は列いっぱいに広がるため）。
   1280px で 1件だけ出ました（rakuten-to-ymobile）。

     before 492x27 → after 700x27

   高さが同じ（27px）＝改行位置も文字の見え方も変わりません。背景も罫線も無い要素なので、
   描画上の差は出ません。実際に前後のスクリーンショットを見比べて同じであることを確認しています。

   ■ 使っている変数
   ありません（既存の値をそのまま写しただけです）。
   28px = .nl-faq-icon の flex-basis ／ 12px = 244行目の gap
   ========================================================================= */


/* -------------------------------------------------------------------------
   FAQの回答：アイコンを1列目、本文を2列目に置いて、段落を縦に積む
   ------------------------------------------------------------------------- */
.nl-wrap .nl-faq-a{
  display:grid;
  grid-template-columns:28px 1fr;
  column-gap:12px;
  align-items:start;
}

/* アイコンは1列目の1行目に固定する（2段落目以降に押し下げられないように） */
.nl-wrap .nl-faq-a > .nl-faq-icon{
  grid-column:1;
  grid-row:1;
}

/* アイコン以外は全部2列目。<p> でも <ul> でも <div> でも同じように積む */
.nl-wrap .nl-faq-a > :not(.nl-faq-icon){
  grid-column:2;
}

/* 2つ目以降の要素に段落の間隔を付ける。
   既存の .nl-faq-a p{margin:0}（250行目）を打ち消さずに、間だけ空ける */
.nl-wrap .nl-faq-a > :not(.nl-faq-icon) + :not(.nl-faq-icon){
  margin-top:10px;
}

.nl-cta-btn{
  display:block; max-width:420px; margin:0 auto; padding:16px 20px;
  background:var(--nl-accent); color:#fff; font-size:1.05rem; font-weight:700;
  border-radius:999px; text-decoration:none; box-shadow:0 3px 10px rgba(0,0,0,.18);
  text-align:center;
}