/* =====================================================================
   にぎわいマップ 共通CSS  v2「紙面」（2026-10-01）  正本＝DESIGN_SPEC_v2.md
   白地・墨・朱1色／角0（操作部品だけ2px）／罫線で組む／影なし／動きは150msのフェードだけ
   フォントはシステムのゴシックだけ（Webフォント・明朝は使わない）

   ── 部品の使い方（新しく作るのは pp-* だけ。既存の nw-* は見た目だけ差し替え済み）──
   ■ ヘッダー（C1/C2）
     <header class="nw-hero">
       <a class="back" href="/select.html">‹ にぎわいマップ</a>          … about/business のみ
       <div class="mast"><h1 class="nw-title">題字</h1><span class="mast-date nw-num" id="mastDate"></span></div>
       <div class="mast-rule" aria-hidden="true"></div>                  … 題字下の二重罫
       <nav class="nw-switch"><a class="on" aria-current="page">日本のにぎわい</a><a>世界のお金</a></nav>
     </header>
     ページ本体は <main class="wrap">（中央680px）。.nw-eyebrow（── ○○ ──）は使わない。
   ■ 見出し・本文（C3）  .nw-h2（上に2pxの墨罫）／.nw-h3／.nw-kicker（朱13px）／.nw-p（15px・PC16px）／.nw-note（13px #444。12pxは「イメージ」・出典・法務注記だけ）
     節の間は .sec（上32px）。番号の飾り「01/02」は付けない。
   ■ ボタン（C4）  主 .nw-btn.is-primary（朱ベタ52px・1画面に1つ）／副 .nw-btn（白地・墨枠48px）
     小 .nw-btn.is-sm（36px）／全幅 .is-block／文字リンク .nw-link（朱・下線・末尾に→が自動で付く）
     LINEの目印は <span class="nw-line-dot"></span>（8px角の緑の四角。緑は文字や面に使わない）
   ■ タグ（C5）  .nw-badge（既定＝灰）/.is-ok or .live（公開中）/.is-wait（準備中・点線）/.is-shu/.is-ink/.is-mute
   ■ 検索（C6）  <div class="search"><label><svg class="nw-ico">…</svg><input id="q" type="search"></label></div>
   ■ 行リスト（C7）  <ul class="pp-rows"><li><a href>…<span class="ti">題</span><span class="de">説明</span>…<i class="go"></i></a></li></ul>
     ボタン入りの行は <li><div class="row">…</div></li>。左端の番号は .no、56pxサムネは img.th
   ■ カード（C8）  .nw-card は「まとまっていて、それ自体を押せるもの」だけ。節の区切りに使わない。
   ■ データ帯（C9）  <dl class="pp-stats"><div class="pp-stat"><dt class="l">見出し</dt><dd class="v"><span id>数</span><span class="u">件</span></dd></div>…</dl>
   ■ 折りたたみ（C10）  <details class="pp-acc"><summary>中身が分かる文</summary><div class="acc-body">…</div></details>
     小さい注記用は .pp-acc.is-sm。ページ末尾に nwOpen()/nwHash()（約10行）を置くと #id で自動で開く。
     畳まないもの：広告ラベル・価格と条件・無料/有料の注記・Anthropic注記・準備中バッジ。
   ■ 流れ図（C11）  <ol class="pp-steps" style="--n:3"><li class="pp-step"><img src="img/use-1.webp" width="480" height="480" alt="" loading="lazy" decoding="async">
       <b class="t"><span class="n">1</span>ラベル</b><span class="d">補足</span></li>…</ol><p class="pp-imgnote">イメージ</p>
     --n は 2/3/4。画像なしの番号ステップは .pp-steps.is-text、縦型（価格つき）は .pp-steps.is-v。
     番号と文字は画像に焼き込まず HTML で付ける。alt="" と width/height と loading="lazy" は必須。
     画像つきの流れ図では、番号 .n はコマの左上に重ねて出る（ラベルは1行）。
     画像が未着でも崩れないよう、<head> に次の1行を置く：
     <script>document.addEventListener("error",function(e){var t=e.target;if(t&&t.tagName==="IMG")t.classList.add("is-missing")},true)</script>
   ■ 図版（C12）  AI画像：<figure class="pp-fig"><img …><figcaption>イメージ</figcaption></figure>
     実写：<figure class="pp-fig"><img …><span class="lab">作例（自主撮影・施設の許可済み）</span></figure>
     写真＋文：<div class="pp-media"><figure class="pp-fig">…</figure><div>文</div></div>（112px角。ラベルは写真の下に帯で出る）
     画像が届く前は --pp-paper-3 の灰色の枠が同じ大きさで出る（レイアウトはずれない）。
   ■ 広告（C13）  <section class="nw-ad"><span class="nw-adtag">広告｜ヨセカ（本マップ運営者）</span><h2 class="nw-h2">…</h2>…
       <div class="nw-ad-item">…</div></section>  ラベルは必ず枠の最初。本文と同じ大きさ以上・墨ベタに白。
   ■ 準備中（C14）  <div class="pp-prep"><figure class="pp-fig">…</figure><div>…<span class="nw-badge is-wait">準備中</span></div><p class="nw-note full">…</p></div>
   ■ フッター（C15）  partials/footer.html を <!--NW-FOOTER--> で差し込む（build.sh）。
   ===================================================================== */

/* ===== 紙面トークン v2 ===== */
:root{
  color-scheme:light;
  /* 面 */
  --pp-paper:#FFFFFF;
  --pp-paper-2:#F5F5F3;   /* 区切りの面：広告枠・表の見出し行・注意ボックス */
  --pp-paper-3:#EDEDEB;   /* 掲載なし／画像の読み込み前／棒グラフの地 */
  /* 文字（白地でのコントラスト比） */
  --pp-ink:#1A1A1A;       /* 本文・見出し・太罫 17.4:1 */
  --pp-ink-2:#222222;     /* 本文・説明文 15.9:1（yoseca と同じ値） */
  --pp-ink-3:#444444;     /* 注記・キャプション 9.7:1。これより薄い文字色は禁止 */
  /* 線 */
  --pp-rule:#D6D6D6;      /* 区切り罫 1px（装飾線） */
  --pp-rule-2:#8C8C8C;    /* 操作部品の枠 3.4:1 */
  /* アクセント（この1色だけ） */
  --pp-shu:#C23A22;       /* 白地の文字 5.35:1／白抜き文字 5.35:1 */
  --pp-shu-press:#A93119;
  --pp-shu-tint:#FCEDE9;
  /* 地図の濃淡（朱の単色4段＋選択は墨） */
  --pp-ramp-0:#EDEDEB; --pp-ramp-1:#F9D9CF; --pp-ramp-2:#F4B8A6; --pp-ramp-3:#E57F63; --pp-ramp-4:#C23A22; --pp-ramp-sel:#1A1A1A;
  /* 状態色（必ず文字ラベルと一緒に使う） */
  --pp-ok:#1B7A43;
  --pp-wait:#555555;
  --pp-warn:#8A5A00;
  --pp-line-green:#06C755; /* LINEの目印＝8px角の四角だけ */
  /* 催しのカテゴリ（index.html の const COLORS と同じ値） */
  --cat-matsuri:#B8321E; --cat-market:#B5561A; --cat-sale:#8A6A12; --cat-live:#5B3FA8; --cat-sports:#1F5FA8; --cat-buzz:#1E7A6E;
  /* 罫・角・影 */
  --pp-bw:1px; --pp-bw-h:2px; --pp-bw-mast:3px;
  --pp-r:0; --pp-r-ctl:2px;
  --pp-float:0 8px 24px rgba(0,0,0,.16);   /* モーダル・シート・ドック・ポップアップのみ */
  --pp-scrim:rgba(0,0,0,.5);
  /* 文字 */
  --pp-f:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;
  --pp-fs-mast:22px; --pp-fs-h1:24px; --pp-fs-h2:20px; --pp-fs-h3:16px;
  --pp-fs-b:15px; --pp-fs-s:14px; --pp-fs-n:13px; --pp-fs-legal:12px; --pp-fs-num:26px;   /* 本文15（PC16）・説明14・注記13。12pxは「イメージ」・出典・法務注記・フッター法務文だけ */
  --pp-lh-h:1.4; --pp-lh-b:1.75; --pp-lh-s:1.7; --pp-lh-n:1.6;
  /* 間隔（4の倍数） */
  --pp-s1:4px; --pp-s2:8px; --pp-s3:12px; --pp-s4:16px; --pp-s5:24px; --pp-s6:32px; --pp-s7:48px;
  --pp-gutter:16px; --pp-max:680px; --pp-max-ys:1040px;
  --pp-tap:44px; --pp-btn-h:48px; --pp-btn-h-lg:52px;
  --pp-fade:.15s ease;

  /* ── 互換レイヤ：旧トークン → 新しい値（既存ページのCSSをそのまま紙面にする） ── */
  --nw-sumi:var(--pp-ink); --nw-sumi-2:#333333;
  --nw-sumi-ink:var(--pp-ink); --nw-sumi-sub:var(--pp-ink-3); --nw-sumi-line:var(--pp-rule);
  --nw-kinari:var(--pp-paper); --nw-kinari-2:var(--pp-paper-2); --nw-surface:var(--pp-paper);
  --nw-ink:var(--pp-ink); --nw-ink-2:var(--pp-ink-2); --nw-ink-3:var(--pp-ink-3);
  --nw-line:var(--pp-rule); --nw-line-2:var(--pp-rule-2);
  --nw-gold:var(--pp-shu); --nw-gold-lt:var(--pp-shu); --nw-gold-ink:var(--pp-shu);
  --nw-gold-tint:var(--pp-shu-tint); --nw-gold-line:var(--pp-rule-2);
  --nw-ad-bg:var(--pp-paper-2); --nw-ad-line:var(--pp-rule-2); --nw-ad-ink:var(--pp-ink);
  --nw-line-green:var(--pp-line-green);
  --nw-r:0px; --nw-r-pill:2px;
  --nw-sh:none; --nw-sh-float:var(--pp-float);
  --nw-gutter:var(--pp-gutter);
  --nw-f-sans:var(--pp-f); --nw-f-serif:var(--pp-f);
  --nw-fs-h:20px; --nw-lh-h:1.4; --nw-fs-s:16px; --nw-lh-s:1.5; --nw-fs-b:15px; --nw-lh-b:1.75; --nw-fs-n:13px;
  --nw-fade:var(--pp-fade);
  --nw-paper:none;
  /* ヨセカ側（nw-yoseca.css と同じ値） */
  --ys-fs-h:clamp(22px,1vw + 18px,30px); --ys-lh-h:1.4; --ys-fs-s:17px; --ys-lh-s:1.5;
  --ys-fs-b:15px; --ys-lh-b:1.8; --ys-fs-n:13px; --ys-max:var(--pp-max-ys);
}
@media (min-width:720px){:root{--pp-gutter:24px}}
@media (min-width:960px){:root{--pp-fs-b:16px;--nw-fs-b:16px;--ys-fs-b:16px}}   /* PCは本文16px（yoseca と同じ） */

/* ===== ベース ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF;background-image:none;color:var(--pp-ink);font-family:var(--pp-f);font-size:var(--pp-fs-b);line-height:var(--pp-lh-b);letter-spacing:0;-webkit-font-smoothing:antialiased;line-break:strict}   /* 「ー」「っ」などを行の頭に置かない（nw-yoseca.css と同じ） */
.nw-paper{background:#FFFFFF;background-image:none}
h1,h2,h3,h4{letter-spacing:0}
img,video{max-width:100%;height:auto}
picture{display:contents}picture>source{display:none}   /* <picture>（WebP＋JPEG）は箱を作らず、中の <img> だけをそのまま並べる（グリッドの列がずれない） */
.nw-num,.ys-price,.pp-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.nw-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-4px}
a{color:var(--pp-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--pp-shu)}
a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--pp-shu);outline-offset:2px;border-radius:0}
::selection{background:var(--pp-shu-tint)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:calc(var(--pp-max) + 2*var(--pp-gutter));margin:0 auto;padding:0 var(--pp-gutter)}
@keyframes nwFade{from{opacity:0}to{opacity:1}}
/* 装飾の動きを止める（キャラクター #pchar #mface #hello は機能なので対象外） */
.ilx .sway,.ilx .fl,.ilx .fr,.ilx .spin,.js-reveal .reveal.in .pin,#wmap .toppin,#wmap .toppin .pulse{animation:none!important}
.js-reveal .reveal,.js-reveal .reveal .pin{opacity:1}
#fx{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== C1 ヘッダー（題字帯） ===== */
.nw-hero{max-width:calc(var(--pp-max) + 2*var(--pp-gutter));margin:0 auto;background:#fff;color:var(--pp-ink);text-align:left;padding:8px var(--pp-gutter) 0;border:0;position:static}
.nw-hero::after,.nw-eyebrow{display:none}
.mast{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0 8px}
.nw-title{margin:0;font:800 var(--pp-fs-mast)/1.25 var(--pp-f);letter-spacing:.02em;color:var(--pp-ink)}
.mast-date{font:500 13px/1.4 var(--pp-f);color:var(--pp-ink-3);white-space:nowrap}
.mast-rule{height:6px;border-top:3px solid var(--pp-ink);border-bottom:1px solid var(--pp-ink)}
.back{display:inline-flex;align-items:center;min-height:36px;font:600 13px/1 var(--pp-f);color:var(--pp-ink);text-decoration:none}
.nw-lead{margin:8px 0 0;max-width:none;font:400 var(--pp-fs-b)/1.7 var(--pp-f);color:var(--pp-ink-2);text-align:left}

/* ===== C2 切替（日本のにぎわい｜世界のお金） ===== */
.nw-switch{display:grid;grid-template-columns:1fr 1fr;margin:0 calc(-1*var(--pp-gutter));max-width:none;padding:0;gap:0;border:0;border-bottom:1px solid var(--pp-rule);border-radius:0;background:#fff}
.nw-switch a{height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:-1px;padding:0;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;box-shadow:none;font:700 15px/1 var(--pp-f);letter-spacing:0;color:var(--pp-ink-3);text-decoration:none;transition:color var(--pp-fade)}
.nw-switch a:hover{color:var(--pp-ink)}
.nw-switch a.on,.nw-switch a[aria-current="page"]{color:var(--pp-ink);border-bottom-color:var(--pp-shu);background:none;box-shadow:none}

/* ===== C3 見出し・本文 ===== */
.nw-h2,.ys-h2{margin:0 0 12px;padding-top:10px;border-top:2px solid var(--pp-ink);font:800 var(--pp-fs-h2)/var(--pp-lh-h) var(--pp-f);letter-spacing:0;color:var(--pp-ink)}
.ys-h2{font-size:var(--ys-fs-h)}
.nw-h2 .sub{margin-left:8px;font:500 13px/1 var(--pp-f);color:var(--pp-ink-3)}
.nw-h3,.ys-h3{margin:0;font:700 var(--pp-fs-h3)/1.5 var(--pp-f);color:var(--pp-ink)}
.nw-kicker,.ys-eyebrow{display:block;margin:0 0 4px;font:700 13px/1.4 var(--pp-f);letter-spacing:0;color:var(--pp-shu)}
.nw-kicker::before{display:none}
.nw-p{margin:6px 0 0;font:400 var(--pp-fs-b)/var(--pp-lh-b) var(--pp-f);color:var(--pp-ink-2)}
.nw-note{margin:6px 0 0;font:400 var(--pp-fs-n)/var(--pp-lh-n) var(--pp-f);color:var(--pp-ink-3)}
.sec{margin-top:32px}
.nw-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}

/* ===== C4 ボタン（すべて四角） ===== */
.nw-btn,.ys-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--pp-btn-h);max-width:100%;padding:0 16px;border:1.5px solid var(--pp-ink);border-radius:var(--pp-r-ctl);background:#fff;color:var(--pp-ink);font:700 15px/1.3 var(--pp-f);letter-spacing:0;text-align:center;text-decoration:none;box-shadow:none;cursor:pointer;transition:background var(--pp-fade)}
.nw-btn:hover{color:var(--pp-ink)}
.nw-btn:active,.nw-btn:hover,.ys-btn:hover{background:var(--pp-paper-2)}
.nw-btn.is-primary,.ys-btn.is-ink,.ys-btn.is-light{min-height:var(--pp-btn-h-lg);background:var(--pp-shu);border-color:var(--pp-shu);color:#fff}
.nw-btn.is-primary:active,.nw-btn.is-primary:hover,.ys-btn.is-ink:hover,.ys-btn.is-light:hover{background:var(--pp-shu-press);border-color:var(--pp-shu-press);color:#fff}
.ys-btn.is-ghost-d{background:#fff;color:var(--pp-ink);border-color:var(--pp-ink)}
.nw-btn.is-sm{min-height:36px;padding:0 12px;border-width:1px;border-color:var(--pp-rule-2);font-size:13px}
.nw-btn.is-block{display:flex;width:100%}
.nw-line-dot{display:inline-block;width:8px;height:8px;border-radius:0;background:var(--pp-line-green);flex:none}
.nw-btn.is-primary .nw-line-dot{box-shadow:0 0 0 1px #fff}
.ys-btn .arw{transition:none;transform:none}
@media (max-width:479px){.nw-ad .nw-row>.nw-btn,.ys-plan .ys-btn,.ys-final .ys-btn,.ys-hero-cta .ys-btn{flex:1 1 100%;width:100%}}
/* 文字リンク（ボタンにしない移動）。文言に「→」を含むものには .no-arw を付ける */
.nw-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;border:0;padding:0;font:700 14px/1.4 var(--pp-f);color:var(--pp-shu);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.nw-link:hover{color:var(--pp-shu-press)}
.nw-link::after{content:"→";display:inline-block;text-decoration:none}
.nw-link.no-arw::after{content:none}

/* ===== C5 タグ・ラベル（ピル廃止） ===== */
.nw-badge{display:inline-flex;align-items:center;padding:3px 6px;border:1px solid currentColor;border-radius:0;background:#fff;font:700 13px/1.2 var(--pp-f);letter-spacing:0;color:var(--pp-wait);white-space:nowrap;vertical-align:1px}
.nw-badge.live,.nw-badge.is-ok{color:var(--pp-ok)}
.nw-badge.is-wait{color:var(--pp-wait);border-style:dashed}
.nw-badge.is-shu{background:var(--pp-shu);border-color:var(--pp-shu);color:#fff}
.nw-badge.is-ink{background:var(--pp-ink);border-color:var(--pp-ink);color:#fff}
.nw-badge.is-mute{color:var(--pp-ink-3);border-color:var(--pp-rule-2)}

/* ===== C6 検索（select／money） ===== */
.search{position:sticky;top:0;z-index:3;padding:8px 0;background:#fff;background-image:none}
.search.is-stuck{box-shadow:0 1px 0 var(--pp-rule)}
.search label{position:relative;display:block}
.search input{width:100%;height:48px;margin:0;padding:0 12px 0 40px;border:1.5px solid var(--pp-ink);border-radius:var(--pp-r-ctl);background:#fff;box-shadow:none;font:400 16px/1 var(--pp-f);color:var(--pp-ink);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--pp-ink-3);font-size:14px}
.search input:focus{outline:2px solid var(--pp-shu);outline-offset:1px;border-color:var(--pp-ink)}
.search .nw-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--pp-ink);pointer-events:none}

/* ===== C7 行リスト（目次・ほかのコーナー） ===== */
.pp-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--pp-ink)}
.pp-rows>li>a,.pp-rows>li>.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:56px;padding:12px 0;border-bottom:1px solid var(--pp-rule);color:var(--pp-ink);text-decoration:none}
.pp-rows>li>a:active,.pp-rows>li>a:hover{background:var(--pp-paper-2);color:var(--pp-ink)}
.pp-rows .no{font:800 13px/1 var(--pp-f);font-variant-numeric:tabular-nums;color:var(--pp-shu)}
.pp-rows .th{width:56px;height:56px;object-fit:contain;border:1px solid var(--pp-rule);background:var(--pp-paper-3)}
.pp-rows .ti{font:700 15px/1.4 var(--pp-f)}
.pp-rows .de{display:block;margin-top:2px;font:400 14px/1.55 var(--pp-f);color:var(--pp-ink-2)}
.pp-rows .go{width:8px;height:8px;margin-right:4px;border-top:2px solid var(--pp-ink);border-right:2px solid var(--pp-ink);transform:rotate(45deg)}

/* ===== C8 カード ===== */
.nw-card{background:#fff;border:1px solid var(--pp-rule);border-radius:0;box-shadow:none;padding:16px}
a.nw-card{color:var(--pp-ink);text-decoration:none}
a.nw-card:active{background:var(--pp-paper-2)}

/* ===== C9 データ帯 ===== */
.pp-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0 0;border-top:1px solid var(--pp-ink);border-bottom:1px solid var(--pp-rule)}
.pp-stat{margin:0;padding:8px 8px 10px;border-left:1px solid var(--pp-rule)}
.pp-stat:first-child{border-left:0;padding-left:0}
.pp-stat .l{display:block;font:500 13px/1.4 var(--pp-f);color:var(--pp-ink-3)}
.pp-stat .v{display:block;margin:2px 0 0;font:800 var(--pp-fs-num)/1.15 var(--pp-f);font-variant-numeric:tabular-nums;color:var(--pp-ink);white-space:nowrap}
.pp-stat:first-child .v{color:var(--pp-shu)}
.pp-stat .u{margin-left:2px;font:700 13px/1 var(--pp-f);color:var(--pp-ink-2)}

/* ===== C10 折りたたみ（JSなしで開閉） ===== */
details.pp-acc{border-top:1px solid var(--pp-rule)}
details.pp-acc:last-of-type{border-bottom:1px solid var(--pp-rule)}
.pp-acc>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 0;list-style:none;cursor:pointer;font:700 16px/1.4 var(--pp-f);color:var(--pp-ink)}
.pp-acc>summary::-webkit-details-marker{display:none}
.pp-acc>summary::after{content:"";flex:none;margin-left:auto;margin-right:4px;width:9px;height:9px;border-right:2px solid var(--pp-ink);border-bottom:2px solid var(--pp-ink);transform:translateY(-3px) rotate(45deg)}
.pp-acc[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.pp-acc>summary:hover{color:var(--pp-shu)}
.pp-acc>.acc-body{padding:0 0 16px}
.pp-acc.is-sm>summary{min-height:44px;font:600 14px/1.4 var(--pp-f);color:var(--pp-ink-2)}
.pp-acc.is-sm>summary::after{width:7px;height:7px;border-width:0 1.5px 1.5px 0}
.pp-acc.is-sm>.acc-body{font:400 12px/1.6 var(--pp-f);color:var(--pp-ink-3)}
.pp-acc .rn{flex:none}
.pp-acc .rbar{display:block;height:6px;background:var(--pp-shu)}
.pp-acc .rt{font:800 15px/1 var(--pp-f);font-variant-numeric:tabular-nums;color:var(--pp-shu)}
.nw-ad details.pp-acc,.nw-ad .pp-acc>summary{padding-left:0}
.nw-ad details.pp-acc{margin-top:16px;border-color:var(--pp-rule-2)}

/* ===== C11 流れ図（GPT Image の画像＋HTMLの番号・文字） ===== */
.pp-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--pp-ink);border-bottom:1px solid var(--pp-rule);background:#fff}
.pp-step{position:relative;padding:12px 4px;text-align:center;border-left:1px solid var(--pp-rule)}
.pp-step:first-child{border-left:0}
.pp-step:not(:last-child)::after{content:"";position:absolute;right:-6px;top:52px;z-index:1;border-style:solid;border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--pp-ink)}
.pp-step img{display:block;width:100%;max-width:88px;aspect-ratio:1/1;height:auto;margin:0 auto 8px;object-fit:contain;background:var(--pp-paper-3)}   /* 灰色は読み込み前だけ見える（画像は白地の正方形） */
.pp-step .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;background:var(--pp-shu);color:#fff;font:800 12px/1 var(--pp-f);vertical-align:1px}
.pp-steps:not(.is-text):not(.is-v) .pp-step .n{position:absolute;left:4px;top:8px;z-index:1;margin:0}   /* 画像つきの流れ図は、番号をコマの左上に置く（ラベルを1行に収める） */
.pp-step .t{display:block;font:700 14px/1.4 var(--pp-f);color:var(--pp-ink)}
.pp-step .d{display:block;margin-top:4px;font:400 13px/1.5 var(--pp-f);color:var(--pp-ink-2)}   /* 3列のスマホは13px（yoseca と同じ）。PCは14px */
.pp-step .t,.pp-step .d{word-break:keep-all;overflow-wrap:anywhere}   /* 文節で改行：区切りたい所に <wbr> を入れる */
.pp-steps[style*="--n:4"] .pp-step{padding:12px 4px}
.pp-steps[style*="--n:4"] .pp-step img{max-width:64px}
.pp-steps[style*="--n:4"] .pp-step .t{font-size:13px}
.pp-steps[style*="--n:4"] .pp-step:not(:last-child)::after{top:40px}
.pp-steps[style*="--n:2"] .pp-step img{max-width:96px}
/* 画像が無い・読み込めないときは壊れた画像アイコンや alt 文字を出さず、灰色の枠だけにする（<head> の1行スクリプトが .is-missing を付ける） */
img.is-missing{content:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");background:var(--pp-paper-3)}
.pp-imgnote{margin:4px 0 0;font:400 12px/1.5 var(--pp-f);color:var(--pp-ink-3);text-align:right}
@media (min-width:720px){
  .pp-step img{max-width:120px}
  .pp-steps[style*="--n:4"] .pp-step img{max-width:104px}
  .pp-step:not(:last-child)::after{top:68px}
  .pp-steps[style*="--n:4"] .pp-step:not(:last-child)::after{top:60px}
  .pp-step .t{font-size:15px}
  .pp-step .d{font-size:14px}
  .pp-steps[style*="--n:4"] .pp-step .t{font-size:14px}
}
/* 画像なしの番号ステップ */
.pp-steps.is-text .pp-step{padding:12px 8px;text-align:left}
.pp-steps.is-text .pp-step:not(:last-child)::after{top:18px}
.pp-steps.is-text .n{display:flex;margin:0 0 6px}
/* 縦型（価格つき） */
.pp-steps.is-v{grid-template-columns:1fr}
.pp-steps.is-v .pp-step{display:grid;grid-template-columns:72px 1fr;gap:12px;text-align:left;border-left:0;border-top:1px solid var(--pp-rule);padding:12px 0}
.pp-steps.is-v .pp-step:first-child{border-top:0}
.pp-steps.is-v .pp-step::after{display:none}
.pp-steps.is-v img{max-width:72px;margin:0}
.pp-step .pr{font:800 18px/1.3 var(--pp-f);font-variant-numeric:tabular-nums;color:var(--pp-ink)}
.pp-step .when{font:500 13px/1.4 var(--pp-f);color:var(--pp-ink-3)}

/* ===== C12 図版と「イメージ」「作例」 ===== */
figure.pp-fig{position:relative;margin:0}
.pp-fig>a{display:block;color:inherit;text-decoration:none}   /* 図版を包むリンク（押せる写真・動画） */
.pp-fig img,.pp-fig video{display:block;width:100%;height:auto;border:1px solid var(--pp-rule);background:var(--pp-paper-3)}
.pp-fig .lab{position:absolute;left:0;top:0;padding:4px 8px;background:rgba(26,26,26,.88);color:#fff;font:700 12px/1.4 var(--pp-f)}
.pp-fig figcaption{margin-top:4px;font:400 12px/1.5 var(--pp-f);color:var(--pp-ink-3);text-align:right}
.pp-fig.is-wide img{aspect-ratio:12/5;object-fit:cover}
.pp-media{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:start}
.pp-media>img,.pp-media>picture>img,.pp-media>.pp-fig img,.pp-media>.pp-fig video{width:112px;height:112px;object-fit:cover}
.pp-media .pp-fig .lab{position:static;display:block;padding:3px 6px;background:var(--pp-ink)}   /* 112px角では写真の下に帯で出す */
.pp-media .nw-h3{margin-top:-2px}
.pp-media .nw-p{margin-top:4px;font-size:14px;line-height:1.7}
@media (min-width:960px){.pp-media .nw-p{font-size:15px}}

/* ===== C13 広告ブロック ===== */
.nw-ad{position:relative;margin-top:48px;padding:0 16px 16px;background:var(--pp-paper-2);border:1px solid var(--pp-rule-2);border-radius:0;color:var(--pp-ink)}
.nw-adtag{position:static;display:block;margin:0 -16px 16px;padding:8px 16px;border-radius:0;background:var(--pp-ink);color:#fff;font:700 15px/1.4 var(--pp-f);letter-spacing:0}
.nw-ad .nw-h2{border-top:0;padding-top:0}
.nw-ad-item{margin-top:16px;padding-top:16px;border-top:1px solid var(--pp-rule-2)}
.nw-ad .nw-p{font-size:15px;line-height:1.75;color:var(--pp-ink-2)}
.nw-ad .nw-note{color:var(--pp-ink-3)}
.nw-ad .pp-steps{background:#fff}
.nw-ad .pp-fig figcaption,.nw-ad .pp-imgnote{color:var(--pp-ink-3)}

/* ===== C14 準備中ブロック ===== */
.pp-prep{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0 12px 12px;border:0;border-left:3px solid var(--pp-wait);background:#fff}
.pp-prep .pp-fig img{width:96px;height:96px;object-fit:cover}
.pp-prep .pp-fig figcaption{text-align:left}
.pp-prep .nw-p{margin-top:4px;font-size:14px;line-height:1.7}
@media (min-width:960px){.pp-prep .nw-p{font-size:15px}}
.pp-prep .full{grid-column:1/-1;margin-top:0}
@media (min-width:720px){.pp-prep{grid-template-columns:160px 1fr}.pp-prep .pp-fig img{width:160px;height:160px}}

/* ===== C15 フッター（partials/footer.html） ===== */
.nw-foot{max-width:calc(var(--pp-max) + 2*var(--pp-gutter));margin:48px auto 0;padding:16px var(--pp-gutter) calc(24px + env(safe-area-inset-bottom));background:#fff;border-top:2px solid var(--pp-ink);font:400 12px/1.6 var(--pp-f);color:var(--pp-ink-2);text-align:left}
.nw-foot-op{margin:0 0 8px;font:500 13px/1.6 var(--pp-f);color:var(--pp-ink)}
.nw-foot-op a{color:inherit}
.nw-foot-links{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:8px 0 12px;border-top:1px solid var(--pp-rule)}
.nw-foot-links a{display:flex;align-items:center;min-height:44px;border:0;border-bottom:1px solid var(--pp-rule);font:500 13px/1.4 var(--pp-f);color:var(--pp-ink);text-decoration:none}
.nw-foot-links a:hover{color:var(--pp-shu)}
.nw-foot p{margin:0 0 6px}
.nw-foot details.pp-acc{margin-top:8px}
.nw-foot .acc-body p{margin:0 0 6px}
.nw-foot .nw-attr{margin-top:12px;font-size:12px;color:var(--pp-ink-3)}
.nw-foot .nw-attr a{color:inherit}

/* ===== 移行用（各ページから線画SVG .il/.ilx を外したら、このブロックごと削除する） ===== */
.il{display:block;width:100%;height:auto;aspect-ratio:2/1;background:#fff;border-bottom:1px solid var(--pp-rule)}
.ilx *{fill:none;stroke:var(--pp-ink);stroke-width:1.1;stroke-linecap:square;stroke-linejoin:miter}
.ilx .g{stroke:var(--pp-shu)} .ilx .t{stroke-width:.7} .ilx .l2{stroke:var(--pp-rule)} .ilx .d{stroke-dasharray:3 4}
.ilx .fw{fill:#fff} .ilx .ft{fill:var(--pp-paper-3)} .ilx .fg{fill:var(--pp-shu);stroke:none} .ilx .fk{fill:var(--pp-ink);stroke:none} .ilx .ns{stroke:none}
.ilx text{fill:var(--pp-ink);stroke:none;font:600 10px var(--pp-f)}