@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* IPAMORI-CSS-START */
/* ==========================================================================
   IPA資格の森 — サイトの版面設計（2026-08-13 全面改訂）

   経緯：初版（2026-07-31）は深緑グラデーションのヘッダー、角丸12px、
   影付きカード、ホバーでの浮き上がりで組んでいた。色の面と影で「それっぽく」
   見せる作りで、テンプレートに色を流した見え方になっていた。

   ねらい：このサイトの立ち位置は「IPA公式シラバスだけを根拠にした体系解説」。
   だから画面も**印刷された技術書**の作りに寄せる。SITE8（Azure資格の森）と
   同じ設計言語を、緑で実装したもの。

   ルール
   - グラデーションのベタ帯を使わない。ブランド色は**紙面の天に引く細い線**で示す
   - 角丸は最小（0〜3px）、影は使わない。区切りはヘアラインと余白で作る
   - 見出しは「線で飾る」のではなく、余白と字送りで階層を作る
   - 色は1つに絞る。強調が2色以上に散ると、どれが大事か伝わらなくなる
   - ロゴ・ナビ・本文の**左の起点をそろえる**。中央寄せは版面との関係が切れる

   ⚠️ このCSSは「器」だけを担当する。記事本文は各記事が持つ .ipasol の
      内蔵CSSが担当するので、干渉させない（.entry-content>h2 のように直下で書く）。
   ========================================================================== */

:root{
  --mori-ink:#1A2733;
  --mori-soft:#4c5d56;
  --mori-mute:#7b8b84;
  --mori-accent:#137333;
  --mori-deep:#0B4A2A;
  --mori-link:#0f7a45;
  --mori-rule:#dde5e0;
  --mori-rule-strong:#bccbc3;
  --mori-tint:#f5f8f6;
  --mori-tint-deep:#e9f1ec;
  --mori-flag:#9a4a17;
  --mori-flag-tint:#faf4ef;
  --mori-mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Times New Roman",serif;
}

/* ── 地 ─────────────────────────────────────────────────
   全面をうっすら色で塗ると本文の白が浮いて見える。地は白。
   ブランド色は天の細い線だけで示す（本の花布のような役割）。 */
body{
  background:#fff;
  color:var(--mori-ink);
  border-top:3px solid var(--mori-deep);
}
.wrap,#main,.main,.content{background:#fff}

/* ── 版面の幅 ────────────────────────────────────────────
   Cocoon既定の .wrap は 1256px。サイドバーがある記事ページは本文が約830pxに
   収まるが、**サイドバーを消しているトップページは本文が1180pxまで広がり、
   1行が長すぎて読めない**（2026-08-13に指摘された）。
   読み物のサイトなので器を 1120px に締める。記事本文は約700〜750pxに収まる。 */
.wrap{max-width:1120px !important; width:auto !important; margin-left:auto; margin-right:auto}

/* ── 版面の左の起点 ──────────────────────────────────────
   ⚠️ Cocoonの .wrap は `width:1256px; margin:0 auto` で**左右パディングを持たない**。
   ロゴのpadding-leftを0にすると、本文（#main.main のパディングぶん内側）と
   起点がずれて「ロゴだけ左に飛び出す」（2026-08-13に実際に指摘された）。
   ヘッダー・ナビ・本文の3つに**同じ左右パディング**を与えて起点をそろえる。 */
#header .header-in,#header #header-in,
#navi .navi-in,#navi #navi-in{padding-left:38px;padding-right:38px}
#main.main{
  background:#fff;border:none;border-radius:0;box-shadow:none;
  padding:34px 38px 60px;
}
.content{box-shadow:none;border:none}

/* ==========================================================================
   ヘッダーとグローバルナビ
   ========================================================================== */

/* 本の柱（running head）の構成。ロゴを左、説明文を右に張り、下に双罫を引く。 */
#header{
  background:#fff;
  box-shadow:none;
  border-bottom:1px solid var(--mori-rule-strong);
}
#header .header-in,#header #header-in{
  flex-direction:row; align-items:baseline; justify-content:space-between;
  gap:20px 28px; flex-wrap:wrap;
  padding-top:20px; padding-bottom:16px;
}
/* ⚠️ この器には clearfix の .cf が付いていて ::before / ::after を持つ。
   flexコンテナでは擬似要素も**アイテムとして数えられる**ため、
   space-between が4要素で分配され、ロゴが左端から内側に押し込まれる。
   幅0で見えないので見た目からは原因が分からない。必ず打ち消す。
   （SITE8で実際に発生した事故） */
#header .header-in::before,#header .header-in::after,
#header #header-in::before,#header #header-in::after{content:none}

/* 説明文は右へ。DOM上はロゴより前にあるので order で入れ替える */
#header .tagline{
  order:2; flex:0 1 auto; margin:0; text-align:right;
  color:var(--mori-mute); font-weight:600; font-size:11.5px;
  letter-spacing:.13em; line-height:1.75; max-width:34em;
}
#header .logo-header{order:1; text-align:left; margin:0; line-height:1.2}
#header .logo-header .site-name-text-link,
#header .site-name-text-link,
#header .logo-header a{
  color:var(--mori-ink) !important; text-shadow:none;
  padding-left:0; margin-left:0;
}
/* ゴシックの太字は画面の顔、明朝は本の顔。このサイトは後者に寄せる。 */
#header .site-name-text{
  font-family:var(--mori-mincho);
  font-size:29px; font-weight:600; letter-spacing:.16em;
  color:var(--mori-ink);
}

/* ナビもロゴと同じ左の起点にそろえる。 */
#navi{
  background:#fff; box-shadow:none;
  border-top:none; border-bottom:1px solid var(--mori-rule);
}
#navi .menu-top.menu-pc{justify-content:flex-start; gap:0}
#navi .menu-top>li>a{padding-left:0; padding-right:0; margin-right:2.1em; position:relative}
#navi .menu-top>li:last-child>a{margin-right:0}
/* 柱の下の双罫（細い線＋間＋細い線）。1本の太線より紙面に近い */
#navi::after{
  content:""; display:block; height:2px; margin-top:-1px;
  background:linear-gradient(#fff 0,#fff 1px,var(--mori-tint-deep) 1px,var(--mori-tint-deep) 2px);
}
#navi .menu-top a,#navi ul li a{
  color:var(--mori-soft); font-weight:700; font-size:14px;
  letter-spacing:.04em; transition:color .15s;
}
#navi .menu-top>li>a:hover{background:none; color:var(--mori-accent)}
#navi .menu-top>li>a::after{
  content:""; position:absolute; left:0; right:0; bottom:12px;
  height:2px; background:var(--mori-accent); border-radius:0;
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
#navi .menu-top>li>a:hover::after,
#navi .current-menu-item>a::after,
#navi .current_page_item>a::after{transform:scaleX(1)}
#navi .current-menu-item>a,#navi .current_page_item>a{color:var(--mori-accent)}
#navi .sub-menu{border:1px solid var(--mori-rule); box-shadow:none; background:#fff}
#navi .sub-menu li a{background:#fff; font-weight:600}
#navi .sub-menu li a:hover{background:var(--mori-tint); color:var(--mori-accent)}

/* ── パンくず ──────────────────────────────────────────── */
.breadcrumb{
  font-size:11.5px; letter-spacing:.06em; color:var(--mori-mute);
  margin:1.6em 0 1.2em; padding:0;
}
.breadcrumb a{color:var(--mori-soft); text-decoration:none}
.breadcrumb a:hover{color:var(--mori-accent); text-decoration:underline}

/* ==========================================================================
   記事の頭
   ========================================================================== */

/* 記事名も明朝。ヘッダーのロゴと同じ顔にして、紙面の連続性を作る。 */
.article .entry-title,.entry-title,.archive-title{
  font-family:var(--mori-mincho);
  color:var(--mori-ink); font-weight:600;
  font-size:1.85em; line-height:1.5; letter-spacing:.03em;
  border:none; background:none; padding:0;
  margin:.3em 0 .6em; text-wrap:balance;
}
.article .entry-title::after,.entry-title::after{content:none}
.article-header .date-tags,.entry-date,.post-update,.date-tags{
  color:var(--mori-mute); font-size:11.5px; letter-spacing:.06em;
}
/* 2026-09-20 記事の中でアイキャッチを再掲しない（ユーザー指示「アイキャッチを記事内で
   再度表示する必要ないよね」）。アイキャッチは og:image と一覧カードのための画像で、
   記事を開いた人には本文の前に同じ絵をもう一度見せるだけになる。
   ⚠️ 消すのは **記事本文の上（article-header の中）だけ**。
      関連記事カード（.related-entry-card-thumb）と前後記事（.prev-post-thumb / .next-post-thumb）、
      一覧のカード（.entry-card-thumb）は別のクラスなので残る。og:image も meta なので影響しない。 */
.single .article-header .eye-catch-wrap,
.page .article-header .eye-catch-wrap{display:none}

/* アイキャッチの角丸と影をやめる。写真は紙に貼った図版として置く。 */
.eye-catch,.eye-catch-wrap{
  border-radius:0; overflow:hidden; box-shadow:none;
  border:1px solid var(--mori-rule);
}
.eye-catch img{border-radius:0; display:block}
.eye-catch .cat-label{border-radius:0}

/* カテゴリラベルは小さく、字を送り、色を落とす。装飾ではなく分類だと分かる形。 */
.cat-label{
  background:#fff; color:var(--mori-accent);
  border:1px solid var(--mori-accent); border-radius:0;
  font-size:10.5px; font-weight:800; letter-spacing:.14em;
  padding:.28em .7em; line-height:1;
}

/* ==========================================================================
   本文の素の要素
   ⚠️ .ipasol を持つ記事には当てない。直下セレクタで限定する。
   ========================================================================== */

.entry-content{line-height:1.95; letter-spacing:.012em}
.entry-content>p{margin:0 0 1.5em}

/* 章の切れ目は「上の罫線と、その上の広い余白」で示す。紙の本と同じ。 */
.entry-content>h2{
  margin:3.2em 0 1.1em; padding:1.1em 0 0;
  border:none; border-top:1px solid var(--mori-rule-strong); background:none;
  color:var(--mori-ink); font-size:1.5em; font-weight:800;
  line-height:1.5; letter-spacing:.02em; text-wrap:balance;
}
.entry-content>h2::before,.entry-content>h2::after{content:none}
.entry-content>h3{
  margin:2.4em 0 .7em; padding:0 0 0 .72em;
  border:none; border-left:3px solid var(--mori-accent); background:none;
  color:var(--mori-ink); font-size:1.16em; font-weight:800;
  line-height:1.6; letter-spacing:.02em;
}
.entry-content>h3::before,.entry-content>h3::after{content:none}
.entry-content>h4{
  margin:1.9em 0 .5em; color:var(--mori-accent);
  font-size:1.02em; font-weight:800; letter-spacing:.03em;
  border:none; background:none; padding:0;
}

/* 既定の青＋密着した下線は「素のHTML」に見える。下線を離して細くする。 */
.entry-content>p a,.entry-content>ul a,.entry-content>ol a{
  color:var(--mori-link);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.22em; text-decoration-color:rgba(19,115,51,.32);
  transition:color .12s,text-decoration-color .12s;
}
.entry-content>p a:hover{text-decoration-color:currentColor}

.entry-content>ul,.entry-content>ol{margin:0 0 1.6em; padding-left:1.35em}
.entry-content>ul>li,.entry-content>ol>li{margin:0 0 .45em; line-height:1.95}
.entry-content>ul>li::marker{color:var(--mori-rule-strong)}
.entry-content>ol>li::marker{color:var(--mori-mute); font-weight:700; font-size:.92em}

.entry-content>table{
  border-collapse:collapse; width:100%; font-size:.94em;
  margin:0 0 1.8em; border:none; border-top:1px solid var(--mori-rule-strong);
  border-bottom:1px solid var(--mori-rule-strong);
}
.entry-content>table th{
  background:none; color:var(--mori-mute); font-weight:800;
  font-size:11.5px; letter-spacing:.08em; text-align:left;
  border:none; border-bottom:1px solid var(--mori-rule); padding:.7em .9em;
}
.entry-content>table td{
  border:none; border-bottom:1px solid var(--mori-rule);
  padding:.7em .9em; vertical-align:top;
}
.entry-content>table tr:last-child td{border-bottom:none}

.entry-content>blockquote{
  margin:2.2em 0; padding:1.15em 1.3em; background:var(--mori-tint);
  border:none; border-left:2px solid var(--mori-rule-strong); border-radius:0;
  color:var(--mori-soft); font-size:.95em;
}
.entry-content>blockquote::before{content:none}

/* ==========================================================================
   目次
   Cocoon既定は枠付きの箱。上下のヘアラインだけにして本文の流れを切らない。
   ========================================================================== */
.toc{
  background:none; border:none;
  border-top:1px solid var(--mori-rule-strong);
  border-bottom:1px solid var(--mori-rule);
  border-radius:0; box-shadow:none;
  padding:1.1em 0 1.2em; margin:2.4em 0; width:100%; max-width:none;
}
.toc-title{
  color:var(--mori-mute); font-weight:800;
  font-size:11px; letter-spacing:.18em; text-align:left;
  margin:0 0 .7em; line-height:1;
}
.toc-title::before{content:none}
.toc .toc-content{font-size:.93em}
.toc a{color:var(--mori-soft); text-decoration:none; line-height:1.85}
.toc a:hover{color:var(--mori-accent); text-decoration:underline}
.toc ol,.toc ul{padding-left:1.2em}
.toc li::marker{color:var(--mori-rule-strong)}

/* ==========================================================================
   記事カード（一覧・関連記事）
   影とホバーの浮き上がりをやめる。カードではなく**目次の一行**として組む。
   ========================================================================== */
.entry-card-wrap,.related-entry-card-wrap{
  background:#fff; border:none; border-radius:0; box-shadow:none;
  border-bottom:1px solid var(--mori-rule);
  padding:1.25em 0; margin:0; transition:none;
}
.entry-card-wrap:hover,.related-entry-card-wrap:hover{
  background:var(--mori-tint); box-shadow:none; transform:none;
}
.entry-card-thumb img,.related-entry-card-thumb img{
  border-radius:0; border:1px solid var(--mori-rule);
}
.entry-card-title,.related-entry-card-title{
  color:var(--mori-ink); font-weight:700; font-size:1.02em;
  line-height:1.6; letter-spacing:.01em;
}
.entry-card-wrap:hover .entry-card-title{color:var(--mori-accent)}
.entry-card-snippet,.related-entry-card-snippet{
  color:var(--mori-soft); font-size:.86em; line-height:1.85;
}
.entry-card-meta,.e-card-info,.card-meta{
  color:var(--mori-mute); font-size:11px; letter-spacing:.05em;
}
.related-entry-heading,.related-entry-main-heading{
  color:var(--mori-mute); font-size:11px; font-weight:800;
  letter-spacing:.18em; border:none; background:none;
  padding:0; margin:3em 0 .8em; line-height:1;
}
.related-entry-heading::after,.related-entry-main-heading::after{content:none}

/* ==========================================================================
   サイドバー
   白いカードに載せるのをやめ、見出しの小ラベル＋ヘアラインで区切る。
   ========================================================================== */
.sidebar{background:none; padding:0; font-size:.93em}
.sidebar .widget{
  background:none; border:none; border-radius:0; box-shadow:none;
  padding:0; margin:0 0 2.6em;
}
.sidebar .widget h2,.sidebar .widget h3,
.sidebar .widget-sidebar-standard-title{
  background:none; border:none; border-radius:0;
  border-bottom:1px solid var(--mori-rule-strong);
  color:var(--mori-mute); font-size:11px; font-weight:800;
  letter-spacing:.18em; text-align:left;
  padding:0 0 .6em; margin:0 0 .9em; line-height:1;
}
.sidebar .widget h2::after,.sidebar .widget h3::after,
.sidebar .widget-sidebar-standard-title::after,
.sidebar .widget h2::before,.sidebar .widget h3::before{content:none}
.sidebar a{color:var(--mori-soft); text-decoration:none}
.sidebar a:hover{color:var(--mori-accent); text-decoration:underline}
.sidebar li{line-height:1.9; margin:0 0 .3em}
.sidebar input[type="search"],.sidebar input[type="text"]{
  border:1px solid var(--mori-rule-strong); border-radius:0;
  padding:.6em .8em; background:#fff;
}

/* ==========================================================================
   ページャ・前後リンク
   ========================================================================== */
.pagination .page-numbers{
  border:1px solid var(--mori-rule); border-radius:0;
  color:var(--mori-soft); background:#fff;
  min-width:2.4em; padding:.45em .7em; font-weight:700; font-size:.9em;
}
.pagination .page-numbers:hover{background:var(--mori-tint); border-color:var(--mori-accent); color:var(--mori-accent)}
.pagination .current{
  background:var(--mori-accent); border-color:var(--mori-accent); color:#fff;
}
.pagination-next-link,.pager-post-navi a{
  border:1px solid var(--mori-rule); border-radius:0; box-shadow:none;
  background:#fff; color:var(--mori-soft);
}
.pagination-next-link:hover,.pager-post-navi a:hover{
  background:var(--mori-tint); border-color:var(--mori-accent);
}
.pager-post-navi .prev-post-title,.pager-post-navi .next-post-title{
  color:var(--mori-ink); font-weight:700;
}

/* ==========================================================================
   フッター
   ========================================================================== */
#footer,.footer{
  background:#fff; color:var(--mori-soft);
  border-top:1px solid var(--mori-rule-strong); box-shadow:none;
  margin-top:4em;
}
#footer a,.footer a{color:var(--mori-soft); text-decoration:none}
#footer a:hover,.footer a:hover{color:var(--mori-accent); text-decoration:underline}
.footer-bottom{
  background:none; color:var(--mori-mute);
  font-size:11px; letter-spacing:.06em;
  border-top:1px solid var(--mori-rule);
}
.copyright{color:var(--mori-mute); font-size:11px; letter-spacing:.06em}

/* ==========================================================================
   トップページ（静的フロントページ page 248）専用
   トップは自前のデザイン（.ipatop）で完結するので、Cocoonの器を全部どける。

   ⚠️⚠️ このブロックを消してはいけない。
   Cocoonの目次は本文の先頭付近に自動挿入され、**緑のヒーロー（.ipatop .hero）の
   中に入り込む**。器のCSSで .toc を「背景なし＋濃い文字色」にしているため、
   隠さないと**緑の上に緑の文字**になって何も見えなくなる。
   （2026-08-13、CSS全面改訂のときにこのブロックを落として実際に発生させた）
   ========================================================================== */
body.home.page #sidebar.sidebar{display:none !important}
body.home.page #main.main{
  width:100% !important; max-width:100% !important;
  background:transparent; border:none; box-shadow:none; padding:0;
}
body.home.page .entry-title,
body.home.page .article-header,
body.home.page .breadcrumb,
body.home.page .toc,
body.home.page .date-tags,
body.home.page .sns-share-buttons,
body.home.page .article-footer,
body.home.page .author-box,
body.home.page .pager-post-navi{display:none !important}
body.home.page #content.content{padding-top:20px}
/* トップ本文（.ipatop）は自前で max-width:1080px / margin:0 auto を持つ。
   .wrap は1256pxなので、そのままだと左端が (1256-1080)/2 = 88px になり、
   ヘッダーのロゴ（左38px）と50px ずれる。器側の起点にそろえる。 */
body.home.page .ipatop{
  max-width:none !important;
  padding-left:38px !important; padding-right:38px !important;
}
@media screen and (max-width:1023px){
  body.home.page .ipatop{padding-left:24px !important; padding-right:24px !important}
}
@media screen and (max-width:834px){
  body.home.page .ipatop{padding-left:16px !important; padding-right:16px !important}
}

/* ==========================================================================
   スマホ
   横に張れないので縦に積むが、中央寄せには戻さない。左の起点は保つ。
   ========================================================================== */
@media screen and (max-width:1023px){
  #header .header-in,#header #header-in,
  #navi .navi-in,#navi #navi-in{padding-left:24px;padding-right:24px}
  #main.main{padding:28px 24px 48px}
}
@media screen and (max-width:834px){
  #header .header-in,#header #header-in,
  #navi .navi-in,#navi #navi-in{padding-left:16px;padding-right:16px}
  #main.main{padding:22px 16px 40px}
  #header .header-in,#header #header-in{
    flex-direction:column; align-items:flex-start; gap:6px;
    padding-top:14px; padding-bottom:12px;
  }
  #header .tagline{order:2; text-align:left; font-size:10.5px; letter-spacing:.09em; max-width:100%}
  #header .site-name-text{font-size:23px; letter-spacing:.12em}
  #navi .menu-top>li>a{margin-right:1.2em}
  .article .entry-title,.entry-title{font-size:1.5em}
  .entry-content>h2{margin-top:2.6em; font-size:1.32em}
}

/* ==========================================================================
   IPA資格の森 — 記事本文の版面設計（.ipasol）2026-08-13 新設

   これまで記事本文のCSSは**1記事ごとに <style> で内蔵**していた（平均5,400字）。
   そのため全記事が旧デザイン（グラデ見出し・角丸12px・影・ピル型バッジ）のまま
   取り残され、器だけを直しても「まだダサい」状態が残っていた。

   ここに**全記事共通の1本**として置き、各記事からは <style> を撤去する。
   以後、記事はHTMLだけを書けばよい。

   設計言語は器（ipa-mori.css）と同じ＝**印刷された技術書**。
   グラデーション／角丸6px以上／影は使わない。区切りはヘアラインと余白。
   ========================================================================== */

/* 擬似言語の記号（○ ← ＋ － × ÷ ≠ ≦ ≧ ＜ ＞ ＝ ，）だけを日本語フォントから取る。
   欧文等幅フォントだと ○ が小さな o のように出て、宣言の行を見落とす（2026-08-20 実測）。 */
@font-face{
  font-family:"PgmSym";
  src:local("Yu Gothic Medium"),local("Yu Gothic"),local("YuGothic"),
      local("Hiragino Kaku Gothic ProN"),local("Meiryo"),local("Noto Sans JP"),
      local("MS Gothic"),local("sans-serif");
  unicode-range:U+25CB,U+2190,U+2260,U+2266,U+2267,U+00D7,U+00F7,
                U+FF0B,U+FF0D,U+FF1C,U+FF1D,U+FF1E,U+FF0C,U+3001,U+3002;
  font-display:swap;
}

.ipasol{
  --ink:#1A2733;--soft:#4c5d56;--mute:#7b8b84;
  --accent:#137333;--deep:#0B4A2A;--link:#0f7a45;
  --rule:#dde5e0;--rule2:#bccbc3;--tint:#f5f8f6;--tint2:#e9f1ec;
  --flag:#9a4a17;--flag-tint:#faf4ef;--read:#B4711A;--read-tint:#fbf1e2;
  --ok:#0f7a45;--bad:#b3261e;--bad-tint:#fbeae8;
  --cb:#0e1a15;--ci:#dde9e2;--cd:#6f8a7e;--ch:#1d3a2c;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Times New Roman",serif;
  --mono:"PgmSym",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,"Hiragino Kaku Gothic ProN","Yu Gothic",monospace;
  color:var(--ink);font-size:16px;line-height:1.95;letter-spacing:.012em;
  word-break:normal;overflow-wrap:anywhere;
}
.ipasol *{box-sizing:border-box}
.ipasol p{margin:0 0 1.4em}

/* wpautop が残す空段落を消す。
   `<div class="note"><span class="lbl">…</span>` のように div直下の最初の子が
   インライン要素だと、wpautop が閉じ側の </p> だけを注入する。ブラウザはこれを
   **空の <p> 要素**として組み立てるので、余白が1行分よけいに空く。
   属性の無い空段落だけを対象にする（.narr など「空で待機する」段落は残す）。 */
.ipasol p:empty:not([class]){display:none}
.ipasol>p,.ipasol>ul,.ipasol>ol{max-width:40em}
.ipasol code{font-family:var(--mono);font-size:.93em}
.ipasol strong,.ipasol b{font-weight:700}

/* ── 見出し：線で飾らず、余白と字送りで階層を作る ────────── */
.ipasol h2{
  margin:3.2em 0 1.1em;padding:1.1em 0 0;
  border:none;border-top:1px solid var(--rule2);background:none;border-radius:0;
  color:var(--ink);font-size:1.5em;font-weight:800;
  line-height:1.5;letter-spacing:.02em;text-wrap:balance;
}
.ipasol h2::before,.ipasol h2::after{content:none}
.ipasol h3{
  margin:2.4em 0 .7em;padding:0 0 0 .72em;
  border:none;border-left:3px solid var(--accent);background:none;border-radius:0;
  color:var(--ink);font-size:1.16em;font-weight:800;line-height:1.6;letter-spacing:.02em;
}
.ipasol h3::before,.ipasol h3::after{content:none}
/* シミュレータ内の見出しは <h4> ではなく .simh を使う。
   Cocoon の目次は本文冒頭に自動挿入されるので、h4 にすると
   「配列」「変数の状態」「トレース表」まで目次に並んでしまう（2026-08-18）。 */
.ipasol h4,.ipasol .simh{
  margin:1.9em 0 .5em;color:var(--accent);
  font-size:1.02em;font-weight:800;letter-spacing:.03em;
  border:none;background:none;padding:0;max-width:none;
}

/* ── リンク：下線を離して細くする ────────────────────── */
.ipasol a{
  color:var(--link);font-weight:400;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:rgba(15,122,69,.32);transition:text-decoration-color .12s;
}
.ipasol a:hover{text-decoration-color:currentColor}
.ipasol a:focus-visible{outline:2px solid var(--link);outline-offset:2px}

.ipasol ul,.ipasol ol{margin:0 0 1.6em;padding-left:1.35em}
.ipasol li{margin:0 0 .45em;line-height:1.9}
.ipasol ul>li::marker{color:var(--rule2)}
.ipasol ol>li::marker{color:var(--mute);font-weight:700;font-size:.92em}

/* ── 冒頭バナー・リード ─────────────────────────────── */
.ipasol .fe-banner,.ipasol .banner{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;margin:0 0 1.8em}
.ipasol .fe-banner span,.ipasol .banner span{
  background:none;border:1px solid var(--rule2);color:var(--mute);
  padding:.25em .7em;border-radius:0;font-weight:700;letter-spacing:.06em;
}
.ipasol .lead{
  background:none;border:none;border-radius:0;
  border-left:3px solid var(--rule2);padding:.1em 0 .1em 1.1em;
  font-size:1.02em;color:var(--soft);margin:0 0 2em;max-width:40em;
}
.ipasol .lead strong{color:var(--ink)}
.ipasol .lead p:last-child{margin:0}

/* ── 面ブロック：角丸と影をやめ、上下のヘアラインとごく薄い地で示す ── */
.ipasol .note,.ipasol .def,.ipasol .skill{
  margin:2em 0;padding:1.15em 1.3em;background:var(--tint);
  border:none;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  border-radius:0;box-shadow:none;font-size:.95em;line-height:1.9;
}
.ipasol .note>:last-child,.ipasol .def>:last-child,.ipasol .skill>:last-child{margin-bottom:0}
.ipasol .def{background:#fff;border-top:2px solid var(--accent);padding-top:1em}
.ipasol .def b{color:var(--accent)}
.ipasol .warn{
  margin:2em 0;padding:1.15em 1.3em;background:var(--flag-tint);
  border:none;border-top:1px solid rgba(154,74,23,.3);border-bottom:1px solid rgba(154,74,23,.3);
  border-radius:0;box-shadow:none;font-size:.95em;line-height:1.9;
}
.ipasol .warn>:last-child{margin-bottom:0}
.ipasol .warn strong{color:var(--flag)}

/* ラベルは絵文字の代わり。小さく、字を送り、色を落とす。 */
.ipasol .lbl,.ipasol .skill .sk,.ipasol .fig .cap,.ipasol .note .lbl{
  display:block;margin:0 0 .55em;background:none;border-radius:0;padding:0;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--mute);line-height:1;
}
.ipasol .skill .sk{color:var(--accent)}
.ipasol .warn .lbl{color:var(--flag)}
.ipasol .skill q{font-weight:700;color:var(--ink);quotes:"「" "」"}

/* ── 試験目線／実務イメージ ─────────────────────────── */
.ipasol .why,.ipasol .ex{
  font-size:.92em;color:var(--soft);background:none;border:none;border-radius:0;
  border-left:2px solid var(--rule2);padding:.15em 0 .15em 1em;margin:1.2em 0;line-height:1.9;
}
.ipasol .why::before{content:"試験目線 ";font-weight:800;font-size:.86em;letter-spacing:.14em;color:var(--accent)}
.ipasol .ex::before{content:"実務イメージ ";font-weight:800;font-size:.86em;letter-spacing:.14em;color:var(--mute)}

/* ── 対応マップ（.map）：カードではなく索引の行として組む ── */
.ipasol .map{display:flex;flex-direction:column;gap:0;margin:1.6em 0}
.ipasol .map .it{
  display:flex;gap:1em;align-items:flex-start;background:none;
  border:none;border-top:1px solid var(--rule);border-radius:0;padding:.85em 0;
}
.ipasol .map .k{
  flex:0 0 5em;background:none;color:var(--accent);font-family:var(--mono);
  border:1px solid var(--accent);border-radius:0;text-align:center;
  padding:.15em 0;font-size:10.5px;font-weight:700;letter-spacing:.1em;line-height:1.9;
}
.ipasol .map .t{flex:1 1 auto;min-width:0;font-size:.94em;line-height:1.9}
.ipasol .map .t b{color:var(--ink)}

/* ── 図 ───────────────────────────────────────────── */
.ipasol .fig,.ipasol .figwrap{
  border:none;border-top:1px solid var(--rule);border-radius:0;
  padding:1.1em 0 0;margin:2.2em 0;background:none;box-shadow:none;
}
.ipasol .fig img,.ipasol .figwrap img{
  display:block;width:100%;height:auto;border-radius:0;border:1px solid var(--rule);
}
.ipasol .figcap{font-size:11.5px;color:var(--mute);letter-spacing:.04em;margin:.7em 0 0;line-height:1.8}

/* 動画（2026-08-28）。図と同じ扱いで、上のヘアラインだけで区切る。
   ⚠️ 中身は <video> 1つだけにする。wpautop は video も source も block と見なさないので、
      子要素や改行があると <p> を差し込まれて壊れる（09_ipa-cert/CLAUDE.md の実障害と同じ罠）。 */
.ipasol .figvideo{
  border:none;border-top:1px solid var(--rule);border-radius:0;
  padding:1.1em 0 0;margin:2.2em 0;background:none;box-shadow:none;
}
.ipasol .figvideo video{
  display:block;width:100%;height:auto;border:1px solid var(--rule);
  background:var(--tint);border-radius:0;
}
.ipasol .vidfb{font-size:11.5px;color:var(--mute);letter-spacing:.04em;margin:.35em 0 0;line-height:1.8}

/* ── 表：罫線を減らし、上下だけで締める ──────────────── */
.ipasol table,.ipasol table.cmp{
  width:100%;border-collapse:collapse;margin:0 0 1.8em;font-size:.93em;background:none;
  border:none;border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);
}
.ipasol table th,.ipasol table.cmp th{
  background:none;color:var(--mute);font-weight:800;font-size:11.5px;
  letter-spacing:.08em;text-align:left;border:none;
  border-bottom:1px solid var(--rule);padding:.7em .9em;white-space:nowrap;
}
.ipasol table td,.ipasol table.cmp td{
  border:none;border-bottom:1px solid var(--rule);padding:.7em .9em;vertical-align:top;
}
.ipasol table tr:last-child td{border-bottom:none}
.ipasol table.cmp tr:nth-child(even) td{background:none}
.ipasol .tbl{overflow-x:auto;margin:0 0 1.8em}
.ipasol .tbl table{margin:0}

/* ── 数値の強調（FE：44問中19問 など） ────────────────── */
.ipasol .stat{
  display:flex;flex-wrap:wrap;margin:0 0 2em;background:none;
  border:none;border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule);
  border-radius:0;overflow:visible;
}
.ipasol .stat div{flex:1 1 130px;padding:1em 1.4em 1em 0;border:none}
.ipasol .stat b{
  display:block;font-size:26px;line-height:1.2;font-weight:800;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.ipasol .stat span{display:block;font-size:11.5px;color:var(--mute);margin-top:.2em;letter-spacing:.04em}

/* ── 正典の引用（FE） ───────────────────────────────── */
.ipasol .canon{
  background:var(--tint);border:none;border-left:3px solid var(--accent);
  border-radius:0;padding:1.2em 1.4em;margin:0 0 1.8em;
}
.ipasol .canon .src{
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent);
  margin:0 0 .8em;line-height:1;
}
.ipasol .canon dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 22px;align-items:start}
.ipasol .canon dt{font-family:var(--mono);font-size:13.5px;white-space:pre;color:var(--ink);line-height:1.75;margin:0}
.ipasol .canon dd{margin:0;font-size:.93em;color:var(--soft);line-height:1.85}
/* 複数行の記述形式は <dt> の中に <pre> を入れて字下げごと出す。
   compact() が改行を潰さないのは <pre> だけなので、ここは pre でなければならない。 */
.ipasol .canon dt pre.pgm{border:none;background:none;padding:0;font-size:13px;line-height:1.75}
.ipasol .canon dt i,.ipasol .canon dd i{font-style:italic;color:var(--soft)}
.ipasol .canon p:last-child{margin:0}
.ipasol .canon>p{max-width:44em}
.ipasol .src{font-size:.86em;color:var(--mute)}

/* 出題の引用は「試験の紙面」に見せる。シミュレータ（黒地）とは別物だと
   ひと目で分かるよう、白地＋ヘアラインで印刷物側に寄せる。 */
.ipasol .canon .lbl2{
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--mute);
  margin:1.4em 0 .5em;line-height:1;
}
.ipasol pre.pgm{
  font-family:var(--mono);font-size:13.5px;line-height:1.9;
  background:#fff;border:none;border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);
  border-radius:0;margin:0;padding:1em 1.1em;overflow-x:auto;color:var(--ink);
  white-space:pre;tab-size:2;
}
/* ベン図（2026-09-25・科目A 1-4）。SVGは使わない（WAF 403）ので、
   円は border-radius の div、重なりは mix-blend-mode で出す。
   ⚠️ 全体集合の枠（四角）を必ず描く。補集合が「どこの外側か」は枠が無いと言えない。 */
.ipasol .venn{margin:1.5em 0 .4em;border:1px solid var(--rule2);background:#fff;padding:14px 10px 10px;position:relative}
.ipasol .venn .u{position:absolute;top:6px;left:10px;font-size:11px;color:var(--mute);letter-spacing:.08em}
.ipasol .venn .circles{display:flex;justify-content:center;align-items:center;height:150px}
.ipasol .venn .c{width:150px;height:150px;border-radius:50%;border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent)}
.ipasol .venn .c.a{margin-right:-46px;background:rgba(15,157,88,.10)}
.ipasol .venn .c.b{margin-left:-46px;background:rgba(15,157,88,.10)}
.ipasol .venn .c{position:relative}
.ipasol .venn .c span{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px}
.ipasol .venn .c.a span{left:22px;font-size:15px}
.ipasol .venn .c.b span{right:22px;font-size:15px}
.ipasol .venn .mid{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);
  font-size:12px;font-weight:700;color:#0B4A2A;background:#fff;border:1px solid var(--rule2);padding:1px 6px;border-radius:2px}
@media(max-width:600px){.ipasol .venn .c{width:124px;height:124px}
  .ipasol .venn .c.a{margin-right:-38px}.ipasol .venn .c.b{margin-left:-38px}
  .ipasol .venn .circles{height:130px}}
/* 教科書の全体像（2026-09-25・科目Aピラー）。未公開も含めた全章を1章1行で並べる。
   ⚠️ 「準備中」を23行並べると空の本棚に見える（レビュー指摘）。
   行の中に**その章で扱う項目**を出すことで、未公開でも情報のある行にする。 */
.ipasol .chlist{list-style:none;padding:0;margin:1.1em 0 1.8em;display:grid;gap:0}
.ipasol .chlist li{border-top:1px solid var(--rule);padding:.72em 0;margin:0;background:none}
.ipasol .chlist li:last-child{border-bottom:1px solid var(--rule)}
.ipasol p.chh{margin:0;display:flex;gap:12px;align-items:baseline;font-size:.97em;line-height:1.6}
.ipasol p.chh .cnt{margin-left:auto;font-size:11.5px;color:var(--mute);white-space:nowrap;font-weight:700}
.ipasol p.chh .cnt.soon2{font-weight:400}
.ipasol p.chs{margin:.3em 0 0;font-size:12.5px;color:var(--mute);line-height:1.75}
.ipasol p.chl{margin:.45em 0 0;font-size:13px}
.ipasol p.chl a{margin-right:.6em}
.ipasol p.chl .no{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--mute);border:1px solid var(--rule);border-radius:2px;padding:0 5px;margin-right:.45em;vertical-align:.08em}

.ipasol p.sh .cnt{font-size:11.5px;color:var(--mute);font-weight:400;margin-left:.4em}
/* 紙に書く筆算（2026-09-23 新設・科目Aの計算回）。
   ⚠️ 同じ数字を**表**で並べると、装置のトレース表と見分けが付かない
   （ユーザー指摘「なんかトレース表残ってそう」）。筆算は**紙の形のまま**出す。
   pre.pgm（プログラムの箱）には入れない。CSSが「プログラム」のラベルを付けてしまう。 */
.ipasol pre.hissan{
  font-family:var(--mono);font-size:14px;line-height:2;white-space:pre;
  background:#fff;border:none;border-left:3px solid var(--rule2);
  border-radius:0;margin:1.4em 0 .6em;padding:.9em 0 .9em 1.2em;overflow-x:auto;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ipasol pre.hissan b{color:var(--accent);font-weight:700}
.ipasol p.hissan-cap{font-size:12.5px;color:var(--mute);margin:0 0 1.4em;padding-left:1.2em}
/* 算数の式を1行で見せる場所（2026-08-26 A4-1）。
   擬似言語ではないので pre.pgm（コード箱）に入れてはいけない。
   入れると「プログラムの1行」に見え、canon_check も存在しない構文として拾う。 */
.ipasol p.eqn{
  margin:1.2em 0;text-align:center;font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}
.ipasol p.eqn code{
  background:none;border:none;padding:0;font-size:17px;color:var(--ink);letter-spacing:.02em;
}
.ipasol .grp{display:flex;flex-wrap:wrap;gap:.35em 1.6em;margin:0;font-family:var(--mono);font-size:14px}
.ipasol .grp span{font-variant-numeric:tabular-nums;white-space:nowrap}
/* ⚠️ .grp は「解答群のような短いラベルを横に並べる」ための箱で、既定は折り返さない。
   長い文（規程やルールの箇条書き）を入れると、はみ出して**ページに横スクロールが出る**
   （2026-08-25 問6で発生）。長文を入れるときは .grp.txt を使う。 */
.ipasol .grp.txt{display:block;font-family:inherit;font-size:15px;line-height:1.85;text-indent:-1em;padding-left:1em;margin:.15em 0}
.ipasol .grp.txt span{white-space:normal}
/* 等幅のまま折り返したいとき（正典の図をそのまま引く行など）。.grp.txt は本文フォントに
   替わってしまうので、引用の見た目を保つ必要がある行はこちらを使う。2026-09-03 追加。 */
.ipasol .grp.wrap span{white-space:normal}
/* 正典の箇条書きが入れ子になっている回（2026-09-07・r06-b6 の図1）。
   「・」の項目の下に「1．」「2．」がぶら下がる形を、原文どおりの段差で見せる。 */
.ipasol .grp.txt.sub{padding-left:2.6em}
/* 正典が枠で囲っている図（図1「A社のシステム環境」など）。2026-09-08 ユーザー指摘
   「問題文の図のところが、ぜんぜん図っぽくないから簡単な枠でもいいからつけて」。 */
.ipasol .canonfig{border:1px solid var(--rule2);background:#fff;padding:.9em 1.1em .8em;
  margin:.5em 0 .35em}
.ipasol .canonfig .grp.txt{margin:.1em 0}

/* ── 経路図（2026-09-08・r06-b6）────────────────────────────
   ユーザー指示「だいぶカットしたから代わりにここに簡単な図解をいくつかいれて」。
   ネットワークの「通り道」を、箱と矢印だけで描く。**SVGは使わない**（WAF 403）。
   守り（関所）は二重線の箱にして、外れたら破線＋赤＋取り消し線にする。
   ⚠️ スマホでは横に並べきれないので**縦積みに切り替え、矢印を90度回す**
      （flex-wrap で折り返すと、矢印の向きと段の対応が読めなくなる）。 */
/* プログラムに実行の移り先を矢印で重ねる図（2026-09-08 新設・r05-b2）。
   ユーザー指摘「このあたりがみずらい、コードに直接矢印で遷移を表現する形でできない？」
   ⚠ 入れ子の div を作らない（レビュー用パックが cjmp を1段の div として開く）。
   ⚠ 位置は行の高さ --clh だけで決める。px で焼き込むとスマホで行を外す。 */
.ipasol .cjmp{--clh:26px;--top0:9px;position:relative;margin:.2em 0;
  padding:8px 76px 8px 0;background:#10201A;border:1px solid #24382F;overflow:hidden}
.ipasol .cj-l{display:flex;gap:12px;align-items:center;height:var(--clh);margin:0;
  padding:0 1em;white-space:pre;font-family:var(--mono);font-size:12.5px;
  color:#C4D3CC;border-left:3px solid transparent}
.ipasol .cj-l i{flex:none;width:1.4em;text-align:right;font-style:normal;color:#6E8078;
  font-variant-numeric:tabular-nums;user-select:none}
.ipasol .cj-l b{font-weight:400}
.ipasol .cj-l.on{background:#1B3D30;border-left-color:#7CC79E;color:#fff}
.ipasol .cj-l.on b{font-weight:700}
.ipasol .cj-l.dim{opacity:.42}
/* 帰り着いたが、そこから先が無い行（手続の最後の行に帰ってきた場合）。
   実行が移った行（.on の実線＋塗り）と**見た目で分ける** */
.ipasol .cj-l.back{background:#152A22;border-left:3px dashed #7CC79E;color:#DCE9E3}
/* 出どころの行。矢印の上端は右のほうに出るので、印が無いとどの行から出た線か読めない */
.ipasol .cj-l.from{background:#162C24;border-left-color:#3E7A5F}
/* 矢印＝コの字の枠。左が開いていて、矢じりが行を指す */
.ipasol .cj-arr{position:absolute;right:22px;width:42px;margin:0;
  top:calc(var(--top0) + (var(--t) + .5) * var(--clh));
  height:calc(var(--h) * var(--clh));
  border:2px solid #7CC79E;border-left:0}
.ipasol .cj-arr::after{content:"";position:absolute;left:-2px;
  border:5px solid transparent;border-right-color:#7CC79E}
/* ●＝出どころ（矢じりの反対の端に置く） */
.ipasol .cj-arr::before{content:"";position:absolute;left:-4px;width:7px;height:7px;
  background:#7CC79E;border-radius:50%}
.ipasol .cj-arr.down::before{top:-4px}
.ipasol .cj-arr.up::before{bottom:-4px}
.ipasol .cj-arr.down::after{bottom:-7px}
.ipasol .cj-arr.up::after{top:-7px}
.ipasol .cj-cap{position:absolute;right:0;margin:0;width:20px;
  top:calc(var(--top0) + (var(--m) + .5) * var(--clh));transform:translateY(-50%);
  font-size:10.5px;line-height:1.2;color:#9FB5AC;text-align:center;letter-spacing:0}
/* 矢印を何本も1枚に重ねる版（2026-09-11・r05-b2）。ユーザー要望「この一連の流れを一枚の図に表せる？」
   1本ずつ別の桁（--l）に立てる。●＝出どころ、矢じり＝行き先、丸数字＝実行の順。
   ⚠ 行の区切りは box-shadow で引く（border だと行の高さが1px増え、矢印が下の行ほどずれる） */
.ipasol .cjmp.lanes{--lw:26px;padding-right:calc(30px + var(--n) * var(--lw));width:fit-content;max-width:100%}
/* ①がコードのいちばん近く。桁は --n-1-l で右から数える（0番の桁を右端にすると ⑥ が手前に来て読む順と逆になる） */
.ipasol .cjmp.lanes .cj-l{box-shadow:inset 0 -1px #1A2C25}
.ipasol .cj-l.start{background:#1B3D30;border-left-color:#7CC79E;color:#fff}
.ipasol .cj-l.start b{font-weight:700}
.ipasol .cj-v{position:absolute;width:2px;margin:0;background:#7CC79E;
  right:calc(18px + (var(--n) - 1 - var(--l)) * var(--lw));
  top:calc(var(--top0) + (var(--t) + .5) * var(--clh));
  height:calc(var(--h) * var(--clh))}
.ipasol .cj-v::before{content:"";position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:#7CC79E}
.ipasol .cj-v::after{content:"";position:absolute;left:-4px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent}
.ipasol .cj-v.down::before{top:-4px}
.ipasol .cj-v.down::after{bottom:-4px;border-top:9px solid #7CC79E}
.ipasol .cj-v.up::before{bottom:-4px}
.ipasol .cj-v.up::after{top:-4px;border-bottom:9px solid #7CC79E}
.ipasol .cj-v.ret{background:repeating-linear-gradient(to bottom,#9FB5AC 0 4px,transparent 4px 7px)}
.ipasol .cj-v.ret::before{background:#9FB5AC}
.ipasol .cj-v.ret.down::after{border-top-color:#9FB5AC}
.ipasol .cj-v.ret.up::after{border-bottom-color:#9FB5AC}
.ipasol .cj-n{position:absolute;margin:0;width:17px;height:17px;line-height:15px;border-radius:50%;
  right:calc(18px + (var(--n) - 1 - var(--l)) * var(--lw) - 7.5px);
  top:calc(var(--top0) + (var(--m) + .5) * var(--clh));transform:translateY(-50%);
  background:#10201A;border:1.5px solid #7CC79E;color:#DCE9E3;font-size:10.5px;text-align:center;
  font-weight:700;font-family:var(--mono);box-sizing:border-box}
.ipasol .cj-n.ret{border-color:#9FB5AC;color:#9FB5AC}
@media(max-width:600px){
  .ipasol .cjmp{--clh:24px;padding-right:58px}
  .ipasol .cj-l{font-size:11.5px;padding:0 .6em;gap:8px}
  .ipasol .cj-arr{right:16px;width:30px}
  .ipasol .cj-cap{width:16px;font-size:10px}
  .ipasol .cjmp.lanes{--lw:20px;padding-right:calc(22px + var(--n) * var(--lw))}
  .ipasol .cj-v{right:calc(12px + (var(--n) - 1 - var(--l)) * var(--lw))}
  .ipasol .cj-n{right:calc(12px + (var(--n) - 1 - var(--l)) * var(--lw) - 7.5px);width:15px;height:15px;line-height:13px;font-size:9.5px}
}
.ipasol .flow{display:flex;align-items:stretch;flex-wrap:wrap;margin:.25em 0}
.ipasol .flow p{margin:0}
.ipasol .fnode{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:46px;min-width:64px;padding:.35em .7em;border:1px solid var(--rule2);background:#fff;
  font-size:12.5px;line-height:1.35;font-weight:700;color:var(--ink)}
.ipasol .fnode.dim{background:#eef1ef;border-color:var(--rule);color:var(--mute);font-weight:400}
.ipasol .fnode.hi{border-color:var(--read);color:var(--read)}
.ipasol .fnode.ok{border-color:var(--accent);background:var(--tint2);color:var(--accent)}
.ipasol .fnode.ng{border-color:var(--bad);color:var(--bad)}
/* 関所＝守り。二重線で「ここを通れるかどうかを決める」ことを見せる */
.ipasol .fnode.gate{border:3px double var(--deep);color:var(--deep);background:var(--tint)}
.ipasol .fnode.gate.off{border-style:dashed;border-width:2px;border-color:var(--bad);
  color:var(--bad);background:#fff;text-decoration:line-through;
  text-decoration-thickness:2px}
/* 守りを厚くしたところ（二重線のまま緑にする）。.gate が .ok より後ろにあるので、
   組み合わせたときの色をここで決め直す。 */
.ipasol .fnode.gate.ok{border-color:var(--accent);color:var(--accent);background:var(--tint2)}
/* 図の段に「正解」の印を付ける（2026-09-08 ユーザー指示「ウには『正解』と目立たせて」） */
.ipasol .afig .ansmark,.ipasol .goal .ansmark{display:inline-block;margin-left:.7em;padding:.12em .8em;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.16em;
  vertical-align:.15em}
/* 矢印。線は border、矢じりは三角（border trick） */
.ipasol .farr{position:relative;flex:0 0 auto;width:60px;min-height:46px}
.ipasol .farr::before{content:"";position:absolute;left:2px;right:9px;top:50%;
  border-top:2px solid var(--accent)}
.ipasol .farr::after{content:"";position:absolute;right:0;top:50%;
  border:5px solid transparent;border-left-color:var(--accent);transform:translateY(-50%)}
.ipasol .farr span{position:absolute;left:0;right:0;bottom:calc(50% + 6px);
  text-align:center;font-size:10.5px;line-height:1.25;color:var(--mute);letter-spacing:.01em}
.ipasol .farr.dim::before{border-top-color:var(--rule)}
.ipasol .farr.dim::after{border-left-color:var(--rule)}
.ipasol .farr.ng::before{border-top-color:var(--bad);border-top-style:dashed}
.ipasol .farr.ng::after{border-left-color:var(--bad)}
.ipasol .farr.ng span{color:var(--bad)}
@media(max-width:600px){
  .ipasol .flow{flex-direction:column;align-items:stretch}
  .ipasol .fnode{min-height:38px;font-size:12px}
  .ipasol .farr{width:auto;min-height:36px}
  .ipasol .farr::before{left:50%;right:auto;top:2px;bottom:9px;
    border-top:none;border-left:2px solid var(--accent)}
  .ipasol .farr::after{right:auto;left:50%;top:auto;bottom:0;
    border-left-color:transparent;border-top-color:var(--accent);
    transform:translateX(-50%)}
  .ipasol .farr.dim::before{border-left-color:var(--rule);border-top-color:transparent}
  .ipasol .farr.dim::after{border-left-color:transparent;border-top-color:var(--rule)}
  .ipasol .farr.ng::before{border-left-color:var(--bad);border-left-style:dashed;
    border-top-color:transparent}
  .ipasol .farr.ng::after{border-left-color:transparent;border-top-color:var(--bad)}
  .ipasol .farr span{left:calc(50% + 10px);right:auto;bottom:auto;top:7px;text-align:left}
}
/* 選択肢ごとに「なぜその回数になるのか」を並べる箱（2026-09-05・r06-b4）。
   ユーザー指摘「ここは見ずらいからちゃんと箇条書きとか見やすくして」。
   .grp.txt を続けて置くと行間が詰まって1つの塊に見えるので、**この箱の中でだけ**間を空ける。
   （他の記事にも連続した .grp.txt はあるので、素の隣接セレクタで広げない） */
.ipasol .whylist{margin:0 0 1.6em}
.ipasol .whylist p.grp.txt{margin:0}
.ipasol .whylist p.grp.txt + p.grp.txt{margin-top:.75em}
/* 正解の先出し（折りたたみ）。
   引用した出題の直後に置く。解説を最後まで読まないと正解が分からないのは不便だが、
   出しっぱなしにすると予想クイズが成立しない。開くかどうかを読者に選ばせる。 */
.ipasol details.peek{
  border:none;border-bottom:1px solid var(--rule);border-radius:0;background:none;
  margin:0 0 1.8em;padding:0 0 1em;
}
.ipasol details.peek>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:.5em;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent);
  padding:.2em 0;line-height:1.4;
}
.ipasol details.peek>summary::-webkit-details-marker{display:none}
.ipasol details.peek>summary::before{content:"＋";font-weight:700;font-size:12px}
.ipasol details.peek[open]>summary::before{content:"－"}
.ipasol details.peek>summary:hover{color:var(--deep)}
.ipasol details.peek>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ipasol details.peek>p{margin:.8em 0 0;max-width:40em}

/* 出題の空欄（IPAの紙面では罫線の箱）。答えを書き込む場所だと分かればよい。 */
.ipasol .blank{
  display:inline-block;min-width:4.2em;height:1.35em;vertical-align:-.25em;
  border:1px solid var(--ink);background:#fff;margin:0 .25em;
  /* 空欄が a・b・c と記号付きで示される出題があるので、中身を置けるようにする */
  text-align:center;line-height:1.3em;font-family:var(--mono);
  font-size:.86em;color:var(--soft);font-style:normal;font-weight:400;
}

/* ── ゴール提示・予想（FE） ─────────────────────────── */
.ipasol .goal{
  border:none;border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);
  border-radius:0;background:#fff;box-shadow:none;padding:1.1em 0 1.3em;margin:0 0 1.8em;
}
.ipasol .goal .cap{display:block;font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.1em;margin:0 0 .5em}
.ipasol .goal .down{font-size:18px;color:var(--accent);font-weight:700;margin:.6em 0}
.ipasol .goal .rule{
  background:var(--tint2);border-radius:0;padding:.85em 1.1em;
  font-size:1em;font-weight:700;color:var(--ink);margin:0 0 1em;
}
.ipasol .goal p{margin:0 0 .9em;max-width:40em}
/* 正解の案の判定（2026-09-22 ユーザー指示「正解ってわかりやすいようにしてよ」）。
   だから行は緑で塗りつぶさない（同日「緑の大きいブロックは品がない」）。印は .ansmark だけ */
.ipasol .goal.win{border-top:3px solid var(--accent);background:var(--tint2);padding:1.1em 1.1em 1.3em}
.ipasol .goal.win .rule{background:#fff}
.ipasol .goal .ansline{margin:0 0 .6em}
.ipasol .goal .ansmark{margin-left:0}
.ipasol .goal p:last-child{margin:0}
.ipasol .predict{
  border:none;border-top:1px dashed var(--rule2);border-bottom:1px dashed var(--rule2);
  border-radius:0;padding:1.2em 0 1.3em;margin:0 0 1.8em;background:none;
}
.ipasol .predict .lbl{color:var(--read)}
.ipasol .predict .q{margin:0 0 1em;font-size:1em;font-weight:700;max-width:40em}
.ipasol .pbtns{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 1em}

/* ── トレースシミュレータ（FE） ─────────────────────── */
.ipasol .sim{
  border:none;border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);
  border-radius:0;background:#fff;box-shadow:none;margin:0 0 2.2em;overflow:hidden;
}
.ipasol .sim-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:.9em 0;background:none;border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.ipasol .sim-head p{margin:0}
.ipasol .sim-title{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--mute)}
.ipasol .sim-src{font-size:11px;color:var(--mute);letter-spacing:.04em}
/* 2026-09-20：既定の stretch だと、コード枠が右の欄（配列の表など）の高さまで引き伸ばされ、
   11行のプログラムの下に**1,000px近い黒い空白**ができていた。自然な高さで止める。 */
/* 2026-09-20：1.05fr だと PC 1100px で コード枠 339px に対し最長行 338px。
   **1文字でも増えると右端が切れて「壊れている」ように見える**ので、左を広げる。 */
.ipasol .sim-grid{display:grid;grid-template-columns:1.32fr 1fr;gap:0;align-items:start}
/* 2026-09-20：PC では **説明文（.narr）を、コードの真下＝左の列**に入れる。
   外（グリッドの下）に置くと、右の欄のほうが背が高いぶん**左下が数百px空く**うえ、
   光っている行と説明が遠い。`.sim` 自体をグリッドにし、`.sim-grid` は display:contents で透かす
   （スマホで同じ手を使っているのと同じやり方）。 */
@media screen and (min-width:901px){
  .ipasol .sim{display:grid;grid-template-columns:1.32fr 1fr;align-items:start}
  .ipasol .sim .sim-grid{display:contents}
  .ipasol .sim .sim-head{grid-column:1/-1}
  .ipasol .sim .code{grid-column:1;grid-row:2;position:sticky;top:8px}
  .ipasol .sim .state{grid-column:2;grid-row:2/span 2}
  .ipasol .sim .narr{grid-column:1;grid-row:3;border-top:none;padding:.9em 1.2em .9em 0}
  .ipasol .sim .ctrl,.ipasol .sim .trace-wrap{grid-column:1/-1}
}
.ipasol .code{
  background:var(--cb);padding:1.1em 0;margin:0;overflow-x:auto;border-radius:0;
  font-family:var(--mono);font-size:13.5px;line-height:1.95;
}
/* 2026-09-20 white-space:pre → pre-wrap。PCのコード枠は444px固定で、正典の行が長い回（サンプル問14 の rankDataの末尾 に … 537px）は末尾が黙って切れていた。pre-wrap は収まる行では何も変えず、あふれる行だけ折り返す。行番号の i は別のflexアイテムなので、折り返しはぶら下げインデントになる（スマホは以前から pre-wrap）*/
.ipasol .code .ln{display:flex;gap:14px;padding:1px 1.1em;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ci);border-left:3px solid transparent}
.ipasol .code .ln i{flex:none;width:1.4em;text-align:right;color:var(--cd);font-style:normal;font-variant-numeric:tabular-nums;user-select:none}
.ipasol .code .ln.on{background:var(--ch);border-left-color:var(--accent)}
.ipasol .code .ln.on i{color:#7CC79E}
.ipasol .state{padding:1.1em 0 1.2em 1.4em;border-left:1px solid var(--rule);background:none;display:flex;flex-direction:column;gap:1.1em}
.ipasol .state h4,.ipasol .state .simh{margin:0 0 .5em;font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--mute);border:none;padding:0;background:none}
.ipasol .loopbadge{
  align-self:flex-start;margin:0;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  background:none;color:var(--accent);border:1px solid var(--accent);
  padding:.2em .7em;border-radius:0;
}
.ipasol .loopbadge.off{color:var(--mute);border-color:var(--rule2)}
.ipasol .arr{margin:0 0 .7em}
.ipasol .arr .an{font-family:var(--mono);font-size:11px;color:var(--mute);display:block;margin-bottom:.35em;letter-spacing:.06em}
.ipasol .cells{display:flex;gap:3px;flex-wrap:wrap}
/* すでに並んでいる範囲（挿入ソートの「左は小さい順」）。地色を敷いて境目を見せる。 */
.ipasol .cell.srt{background:var(--tint2);border-color:var(--rule2)}
/* ずらして重ねるときの、場所取りだけの透明な枡（文字列照合の key）。 */
.ipasol .cell.gap{border-color:transparent;background:none}
.ipasol .cell.gap u,.ipasol .cell.gap b,.ipasol .cell.gap s{visibility:hidden}
.ipasol .cell{min-width:42px;border:1px solid var(--rule2);border-radius:0;background:#fff;text-align:center;padding:2px 4px 0}
.ipasol .cell.w{background:var(--tint2);border-color:var(--accent)}
/* まだ決まっていない要素。答えを先に見せないための伏せ札。 */
.ipasol .cell.q{border-style:dashed}
.ipasol .cell.q b{color:var(--mute)}
.ipasol .cell.r{background:var(--read-tint);border-color:var(--read)}
.ipasol .cell.src{background:#fff;border-color:var(--read)}
.ipasol .cell.src b,.ipasol .cell.src u{color:var(--read)}
.ipasol .cell.nxt{background:#fff;border-color:var(--read);border-style:dashed}
.ipasol .cell.nxt b,.ipasol .cell.nxt u{color:var(--read)}
.ipasol .cell.new{background:var(--tint2);border-color:var(--accent)}
.ipasol .cell.new b{color:var(--accent);font-weight:700}
.ipasol p.cap{margin:.3em 0 0;font-size:11.5px;color:var(--mute)}
/* 未定義（IPAの図の網掛け）。値そのものが無い場所を示す。
   .q（伏せ札）と違い、こちらは**問題文が「未定義」と定めている**状態。 */
.ipasol .cell.undef{background:repeating-linear-gradient(45deg,#eceff1,#eceff1 3px,#dfe4e7 3px,#dfe4e7 6px);border-color:var(--rule2)}
/* 正典の表が「網掛け＝表示していない」で示すマス。引用した表の td にそのまま当てる（2026-09-04・r07-b5） */
.ipasol .tbl td.undef,.ipasol .afig table.af-tbl td.undef{background:repeating-linear-gradient(45deg,#eceff1,#eceff1 3px,#dfe4e7 3px,#dfe4e7 6px)}
.ipasol .cell.undef b{color:var(--mute);font-size:10.5px;letter-spacing:-.03em}
.ipasol .cell u{display:block;font-size:9.5px;color:var(--mute);text-decoration:none;font-variant-numeric:tabular-nums}
.ipasol .cell b{display:block;font-family:var(--mono);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.35}
.ipasol .cell.w b{color:var(--accent)}
.ipasol .cell.r b{color:var(--read)}
.ipasol .cell s{display:block;height:14px;font-size:11px;line-height:14px;text-decoration:none;color:transparent}
.ipasol .cell.w s{color:var(--accent)}
.ipasol .cell.r s{color:var(--read)}
/* ⚠️ シミュレータの中の配列は折り返させない（2026-08-24）。
   状態パネルは PC 幅で 300〜360px しかなく、9マスの配列（42px×9＝402px）が
   2行に割れて「1行＝配列」の見え方が壊れていた。縮めて収め、入り切らなければ横スクロール。
   本文中の .cells（G4 など）は本文幅いっぱい使えるので、この指定はシミュレータ内だけに効かせる。 */
.ipasol .sim .cells{flex-wrap:nowrap;overflow-x:auto}
.ipasol .sim .cell{flex:0 1 auto;min-width:28px}
.ipasol p.cells-lbl{margin:.9em 0 .25em;font-family:var(--mono);font-size:11.5px;color:var(--mute);letter-spacing:.06em}
.ipasol .cells.empty::after{content:"（要素数0）";font-size:11.5px;color:var(--mute);align-self:center}
/* 2026-09-20：行の多い二次元配列（問9の tree は14行）を表で描くと縦700px超になり、
   PC でもスマホでもシミュレータが画面に収まらない。compact2d のときは札を並べて折り返す。 */
.ipasol .arrc{display:flex;flex-wrap:wrap;gap:5px 9px;font-family:var(--mono);font-size:13.5px;line-height:1.6}
.ipasol .arrc .ac{color:var(--ink);white-space:nowrap;border:1px solid transparent;padding:0 2px;border-radius:2px}
.ipasol .arrc .ac.on{border-color:var(--rule2);background:#fff}
.ipasol .arrc .ac u{color:var(--mute);font-size:11px;text-decoration:none;margin-right:1px}
.ipasol .arrc .ac i{color:var(--mute);font-style:normal;margin:0 1px}
.ipasol .arrc .ac b{font-weight:400}
.ipasol .arrc .ac b.r{color:var(--read);background:var(--read-tint);font-weight:700;padding:0 3px;border-radius:2px}
.ipasol .arrc .ac b.w{color:var(--accent);background:var(--tint2);font-weight:700;padding:0 3px;border-radius:2px}
.ipasol .grid2{overflow-x:auto}
.ipasol .grid2 table{width:auto;border-collapse:collapse;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ipasol .grid2 th{font-weight:400;font-size:9.5px;color:var(--mute);padding:1px 6px;text-align:center;border:0}
.ipasol .grid2 td{min-width:42px;border:1px solid var(--rule2);background:#fff;text-align:center;padding:3px 6px;font-size:15px;color:var(--ink)}
.ipasol .grid2 td.w{background:var(--tint2);border-color:var(--accent);color:var(--accent)}
.ipasol .grid2 td.r{background:var(--read-tint);border-color:var(--read);color:var(--read)}
/* 正典の表が「網掛け＝表示していない」で示すマス／もう見ないマス（2026-09-04・r07-b5） */
.ipasol .grid2 td.undef{background:repeating-linear-gradient(45deg,#eceff1,#eceff1 3px,#dfe4e7 3px,#dfe4e7 6px);color:var(--mute)}
.ipasol .grid2 td.dim{background:#eef1ef;color:var(--mute)}
/* box＝「いま使うところ」。太枠で囲うだけ（2026-09-04 ユーザー指摘
   「局所的すぎる。前作った表の全体を見せながら太枠で囲ったりしてやったほうがいい」）。
   ⚠️ border ではなく outline を使う。border だと枠の太さぶん表の桁がずれる。 */
.ipasol .grid2 td.box,.ipasol .afig table.af-tbl td.box{outline:2.5px solid var(--accent);outline-offset:-2.5px;color:var(--accent);font-weight:700}
.ipasol .grid2 td b{display:block;font-weight:400;line-height:1.35}
.ipasol .grid2 td s{display:block;height:13px;font-size:10px;line-height:13px;text-decoration:none;color:transparent}
.ipasol .grid2 td.w s{color:var(--accent)}
.ipasol .grid2 td.r s{color:var(--read)}
.ipasol .ptrkey{display:flex;gap:14px;font-size:10.5px;color:var(--mute);margin-top:.4em;letter-spacing:.04em}
.ipasol .ptrkey .kr b{color:var(--read)}
.ipasol .ptrkey .kw b{color:var(--accent)}
.ipasol .calc{border:none;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;background:var(--tint);padding:.9em 1em;text-align:center}
.ipasol .calc.idle{color:var(--mute);font-size:12.5px;padding:1.2em 1em}
.ipasol .calc .row{font-family:var(--mono);font-variant-numeric:tabular-nums;display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.ipasol .calc .r1{font-size:13px;color:var(--mute);margin-bottom:2px}
.ipasol .calc .r2{font-size:19px;font-weight:700;color:var(--ink)}
.ipasol .calc .eq{font-size:14px;color:var(--accent);line-height:1.1;margin:2px 0}
.ipasol .calc .r3{font-size:23px;font-weight:800;color:var(--accent)}
.ipasol .vars{display:flex;flex-wrap:wrap;gap:8px}
.ipasol .var{border:1px solid var(--rule2);border-radius:0;padding:.25em .7em;background:#fff;min-width:70px}
.ipasol .var.chg{background:var(--tint2);border-color:var(--accent)}
.ipasol .var b{display:block;font-family:var(--mono);font-size:10.5px;color:var(--mute);font-weight:600;letter-spacing:.06em}
.ipasol .var span{display:block;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.35}
.ipasol .var.chg span{color:var(--accent)}
.ipasol .var span.undef{color:var(--mute);font-size:12px;font-weight:500}
.ipasol .outbox{font-family:var(--mono);font-size:15px;font-weight:700;background:var(--cb);color:#7CC79E;padding:.5em .8em;border-radius:0}
.ipasol .narr{padding:.9em 0;background:none;border-top:1px solid var(--rule);font-size:.93em;color:var(--ink);line-height:1.85;min-height:3.4em;margin:0}
.ipasol .narr b{color:var(--accent)}
.ipasol .ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:.9em 0;border-top:1px solid var(--rule);background:none;margin:0}
.ipasol .prog{margin-left:auto;font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.ipasol .trace-wrap{border-top:1px solid var(--rule);background:none}
.ipasol .trace-wrap h4,.ipasol .trace-wrap .simh{margin:0;padding:.9em 0 .5em}
.ipasol .trace-scroll{overflow-x:auto;padding:0 0 1em}
.ipasol table.trace{font-size:13px;border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}
.ipasol table.trace th,.ipasol table.trace td{padding:.45em .9em;white-space:nowrap}
.ipasol table.trace td{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ipasol table.trace tbody tr:last-child{background:var(--tint2)}
.ipasol table.trace tbody tr:last-child td{font-weight:700;color:var(--accent)}
.ipasol .trace-empty{padding:0 0 1em;font-size:12.5px;color:var(--mute);margin:0}

/* ── ボタン：主要導線1つだけを塗り、残りは枠線で序列を作る ── */
.ipasol button{
  font-family:inherit;font-size:13.5px;font-weight:700;padding:.6em 1.15em;
  border-radius:2px;cursor:pointer;border:1px solid var(--rule2);
  background:#fff;color:var(--ink);line-height:1.6;transition:background .15s,border-color .15s;
}
.ipasol button:hover:not(:disabled){background:var(--tint2);border-color:var(--accent)}
.ipasol button:disabled{opacity:.4;cursor:not-allowed}
.ipasol button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.ipasol button.pri:hover:not(:disabled){background:var(--deep);border-color:var(--deep)}
.ipasol button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 確認クイズ（FE .quiz ／ 既存 .aq-quiz の両方） ────── */
.ipasol .quiz,.aq-quiz{
  border:none;border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);
  border-radius:0;background:#fff;box-shadow:none;padding:1.2em 0 1.4em;margin:0 0 2em;
  font-size:15px;line-height:1.85;
}
.ipasol .quiz .q,.aq-quiz .aq-q{font-weight:700;margin:0 0 1em;font-size:1.02em;max-width:40em;color:var(--ink)}
.ipasol .quiz .q em{font-family:var(--mono);font-style:normal;background:var(--tint);padding:.1em .4em;border-radius:0}
.aq-quiz .aq-badge{
  display:block;background:none;color:var(--accent);font-weight:800;
  font-size:11px;letter-spacing:.18em;border-radius:0;padding:0;margin:0 0 .7em;line-height:1;
}
.ipasol .opts,.aq-quiz .aq-opts{display:flex;flex-direction:column;gap:.5em;margin:0 0 1em}
.ipasol .opt,.aq-quiz .aq-opt{
  display:flex;align-items:flex-start;gap:.8em;width:100%;text-align:left;
  background:#fff;border:1px solid var(--rule2);border-radius:2px;
  padding:.75em 1em;cursor:pointer;font-size:.95em;color:var(--ink);
  font-family:inherit;line-height:1.7;font-weight:500;white-space:normal;
}
.ipasol .opt:hover:not(:disabled),.aq-quiz .aq-opt:hover:not(.aq-locked){border-color:var(--accent);background:var(--tint)}
.aq-quiz .aq-opt .aq-k{
  flex:none;width:1.6rem;height:1.6rem;border-radius:0;background:none;
  border:1px solid var(--rule2);color:var(--mute);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
}
.aq-quiz .aq-opt .aq-t{padding-top:.05rem}
.aq-quiz .aq-opt.aq-locked{cursor:default}
.ipasol .opt.ok,.aq-quiz .aq-opt.is-correct{border-color:var(--ok);background:var(--tint2);color:var(--ok);font-weight:700}
.aq-quiz .aq-opt.is-correct .aq-k{background:var(--ok);border-color:var(--ok);color:#fff}
.aq-quiz .aq-opt.is-correct .aq-t::after{content:"　✓ 正解";color:var(--ok);font-weight:700;white-space:nowrap}
.ipasol .opt.ng,.aq-quiz .aq-opt.is-wrong{border-color:var(--bad);background:var(--bad-tint);color:var(--bad)}
.aq-quiz .aq-opt.is-wrong .aq-k{background:var(--bad);border-color:var(--bad);color:#fff}
.aq-quiz .aq-msg{margin:1em 0 0;font-weight:700;min-height:1.2em}
.aq-quiz .aq-msg.aq-ok{color:var(--ok)}
.aq-quiz .aq-msg.aq-ng{color:var(--bad)}
.ipasol .ans,.aq-quiz .aq-exp{
  font-size:.93em;padding:.9em 1.1em;border-radius:0;background:var(--tint);
  border:none;border-left:3px solid var(--accent);line-height:1.85;
  margin:0;color:var(--soft);display:none;
}
.ipasol .ans.show,.aq-quiz .aq-exp.show{display:block}
.ipasol .ans b{color:var(--accent)}
.ipasol .ans.try{border-left-color:var(--bad)}
.ipasol .ans.try b{color:var(--bad)}
.ipasol .ans .again{color:var(--mute)}

.aq-quiz .aq-reset{
  display:none;margin-top:1em;background:none;border:1px solid var(--accent);
  color:var(--accent);border-radius:2px;padding:.5em 1.1em;font-size:.85rem;
  cursor:pointer;font-family:inherit;
}
.aq-quiz .aq-reset.show{display:inline-block}

/* ── 記事ごとの少数派クラス（旧CSSから移設・2026-08-13） ──
   .tags（用語チップ）／.glossary .g（用語集）／.done（章の締め）／
   .qcap（公式PDFのキャプチャ）／.mark（強調記号）／.lb（ラベル） */
.ipasol .tags{display:flex;flex-wrap:wrap;gap:.45em;margin:.8em 0 1.4em}
.ipasol .tags span{
  background:none;color:var(--mute);border:1px solid var(--rule2);border-radius:0;
  padding:.18em .7em;font-size:11px;font-weight:700;letter-spacing:.06em;
}
.ipasol .glossary{display:grid;gap:0;margin:1.4em 0}
.ipasol .glossary .g{
  border:none;border-top:1px solid var(--rule);border-radius:0;
  padding:.8em 0;background:none;font-size:.93em;line-height:1.9;
}
.ipasol .glossary .g b{color:var(--accent)}
.ipasol .done{
  background:var(--tint2);border:none;border-radius:0;
  border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);
  padding:1.05em 1.3em;margin:2.2em 0;font-weight:700;color:var(--ink);
}
.ipasol .qcap{
  border:none;border-top:1px solid var(--rule);border-radius:0;
  padding:1.1em 0 0;margin:2.2em 0;background:none;
}
.ipasol .qcap img{width:100%;height:auto;border-radius:0;border:1px solid var(--rule);display:block}
.ipasol .qcap .src{font-size:11.5px;color:var(--mute);margin:.7em 0 0;letter-spacing:.04em}
.ipasol .mark{font-weight:800;margin-right:.3em;color:var(--accent)}

/* ── 緑の蛍光ペン .hl（2026-09-03 ユーザー要望）───────────────────
   > 「とくに重要な、解くうえで大事な考え方を、緑の蛍光ペンでラインを引いてほしい」

   <strong> の太字は1つの節に何度も出るので、**その節から持ち帰る一文**が埋もれる。
   蛍光ペンは「ここだけ覚えて帰れ」の印なので、**1つの節に1本まで**。
   増やすと引いていないのと同じになる（見出しごとに1本＝全体で4〜5本を上限とする）。

   ⚠️ 器の設計（ipa-mori.css）では「グラデーションのベタ帯」を禁じている。
      ここで linear-gradient を使うのは**ペンの筆跡**を出すためで、装飾の帯ではない。
      背景をベタで塗ると行間まで埋まって字が沈むので、**下 2/3 だけ**を塗る。
   ⚠️ 印刷・強制カラーモードでは背景が落ちるので、下線も併せて引く（印が消えない）。 */
.ipasol .hl{
  background-image:linear-gradient(transparent 55%,#b7e3c6 55%,#b7e3c6 92%,transparent 92%);
  font-weight:700;padding:0 .08em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
@media print,(forced-colors:active){
  .ipasol .hl{background:none;border-bottom:2px solid var(--accent)}
}
.ipasol .lb{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  color:var(--accent);border:1px solid var(--accent);border-radius:0;
  padding:.15em .6em;background:none;line-height:1.7;
}

/* ── 導線（.navlist ／ .next ／ .backhub） ─────────────── */
.ipasol .navlist{list-style:none;padding:0;margin:1.4em 0;display:grid;gap:0}
.ipasol .navlist li{border:none;border-top:1px solid var(--rule);border-radius:0;background:none}
.ipasol .navlist a{
  display:block;padding:.85em 0;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:.97em;
}
.ipasol .navlist a:hover{color:var(--accent)}
.ipasol .navlist .soon{display:block;padding:.85em 0;color:var(--mute);font-weight:700;font-size:.97em}
.ipasol .navlist .soon::after{
  content:"準備中";float:right;background:none;color:var(--mute);
  font-size:10.5px;letter-spacing:.14em;padding:0;border:none;border-radius:0;font-weight:800;
}
.ipasol .next{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin:1.4em 0 1.8em}
.ipasol .next a{
  display:block;padding:1em 0;border:none;border-top:1px solid var(--rule);
  border-radius:0;text-decoration:none;background:none;transition:none;
}
.ipasol .next a:hover{background:var(--tint)}
.ipasol .next a:hover .t{color:var(--accent)}
.ipasol .next .k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--mute);margin-bottom:.35em}
.ipasol .next .t{display:block;font-size:.97em;font-weight:700;color:var(--ink);line-height:1.6}
.ipasol .backhub{
  display:inline-block;margin:2em 0 .4em;background:none;border:none;
  border-radius:0;padding:0;font-weight:700;font-size:.93em;color:var(--link);
}
/* 記事末の出典一覧（2026-08-19）。本文中のラベルは短縮し、正式名称・版・リンクはここへ集約する。
   ⚠️ リンクは利便であって出所明示の代替ではない。**文字の出典表記を消してリンクだけにしない。** */
.ipasol .cite{
  font-size:12px;color:var(--mute);border-top:1px solid var(--rule);
  padding-top:1.2em;margin-top:2.6em;max-width:44em;line-height:1.85;
}
.ipasol .cite .lbl{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.18em;
  color:var(--mute);margin:0 0 .8em;
}
.ipasol .cite ul{margin:0 0 1em;padding:0;list-style:none}
.ipasol .cite li{
  margin:0;padding:.45em 0 .45em .95em;border-top:1px solid var(--rule2);
  text-indent:-.95em;line-height:1.75;
}
.ipasol .cite li::before{content:"—　";color:var(--rule)}
.ipasol .cite li:first-child{border-top:none}
.ipasol .cite li a{color:var(--ink);font-weight:700}
.ipasol .cite li span{display:block;font-size:11px;color:var(--mute);text-indent:0;margin-top:.15em}
.ipasol .cite p{margin:0 0 .7em;max-width:none}
.ipasol .cite>p:last-child{margin:0}

/* ==========================================================================
   ハブ／ランディング専用クラス（2026-08-13 移設）

   グローバルハブ(48)・DM区分ハブ(68)・PD-S区分ハブ(83)は独自レイアウトを持ち、
   `.ipahub` という別スコープ＋**post 48だけ紺/臙脂/金の別配色**で組まれていた。
   スコープを `.ipasol` に統一し、固有クラスだけをここに集約して緑基調にそろえる。
   ========================================================================== */

/* 番号付きの要点（.sum） */
.ipasol .sum{display:flex;flex-direction:column;gap:0;margin:1.6em 0}
.ipasol .sum .it{
  display:flex;gap:1em;align-items:flex-start;background:none;
  border:none;border-top:1px solid var(--rule);border-radius:0;padding:.9em 0;
}
.ipasol .sum .n{
  flex:0 0 auto;background:none;color:var(--accent);border:1px solid var(--accent);
  font-family:var(--mono);font-weight:700;border-radius:0;width:1.9em;height:1.9em;
  display:flex;align-items:center;justify-content:center;font-size:.85em;
}
.ipasol .sum .it>div{flex:1 1 auto;min-width:0}

/* 年表（.tl）：日付を等幅で左に固定した2段組にする */
.ipasol .tl{display:grid;grid-template-columns:1fr;gap:0;margin:1.4em 0}
.ipasol .tl .row{
  display:grid;grid-template-columns:9em 1fr;gap:0 24px;align-items:baseline;
  border-top:1px solid var(--rule);padding:.85em 0;
}
.ipasol .tl .yr{
  background:none;color:var(--mute);font-family:var(--mono);font-weight:700;
  border-radius:0;text-align:left;padding:0;font-size:11.5px;
  letter-spacing:.06em;line-height:1.9;font-variant-numeric:tabular-nums;
}
.ipasol .tl .ev{
  background:none;border:none;border-radius:0;padding:0;font-size:.93em;line-height:1.9;
}
.ipasol .tl .ev.end{background:none;color:var(--mute)}
.ipasol .tl .ev b{color:var(--ink)}

/* 章カード（.chapters / .ch） */
.ipasol .chapters{display:grid;grid-template-columns:1fr;gap:0;margin:1.4em 0}
.ipasol .ch{
  border:none;border-top:1px solid var(--rule2);border-radius:0;
  overflow:visible;background:none;padding:0 0 1.1em;
}
.ipasol .ch .ch-h{
  display:flex;align-items:baseline;gap:.8em;background:none;color:var(--ink);
  padding:1em 0 .5em;font-weight:800;font-size:1.02em;
}
.ipasol .ch .ch-h .cn{
  flex:0 0 auto;width:1.8em;height:1.8em;background:none;color:var(--accent);
  border:1px solid var(--accent);border-radius:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-weight:700;font-size:.8em;
}
.ipasol .ch .ch-b{padding:0;font-size:.92em}
.ipasol .ch .ch-b ul{margin:.2em 0 .6em;padding-left:1.25em}
.ipasol .ch .ch-b li{margin:.2em 0}
.ipasol .ch .ch-f{border-top:1px solid var(--rule);padding:.7em 0 0;margin-top:.6em}
.ipasol .ch .ch-f a{color:var(--link);font-weight:700}
.ipasol .ch .ch-f .soon,.ipasol .soon{color:var(--mute);font-weight:700}
.ipasol .ch .ch-f .soon::after{
  content:"準備中";float:right;background:none;color:var(--mute);
  font-size:10.5px;letter-spacing:.14em;padding:0;border:none;border-radius:0;font-weight:800;
}

/* 対比2段組（.vs） */
.ipasol .vs{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin:1.6em 0}
.ipasol .vs .col{border:none;border-top:2px solid var(--rule2);border-radius:0;overflow:visible;background:none}
.ipasol .vs .col .hd{
  color:var(--mute);font-weight:800;padding:.8em 0 .5em;text-align:left;
  background:none;font-size:11px;letter-spacing:.18em;line-height:1;
}
.ipasol .vs .col.dm{border-top-color:var(--accent)}
.ipasol .vs .col.dm .hd{color:var(--accent)}
.ipasol .vs .col.pdd{border-top-color:var(--deep)}
.ipasol .vs .col.pdd .hd{color:var(--deep)}
.ipasol .vs .col .bd{padding:0;font-size:.9em;line-height:1.9}
.ipasol .vs .col .bd b{color:var(--ink)}

/* 出題範囲カード（.scope / .scard） */
.ipasol .scope{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 30px;margin:1.4em 0}
.ipasol .scard{border:none;border-top:1px solid var(--rule);border-radius:0;padding:.9em 0 1.1em;background:none}
.ipasol .scard .sh{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.6em;margin-bottom:.45em}
.ipasol .scard .sh .sn{
  background:none;color:var(--accent);border:1px solid var(--accent);
  min-width:1.7em;height:1.7em;border-radius:0;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:.8em;font-weight:700;
}
.ipasol .scard ul{margin:.3em 0 0;padding-left:1.25em;font-size:.87em;color:var(--soft)}
.ipasol .scard li{margin:.2em 0}

/* 状態バッジ（.badge）：ピルをやめ、字を送った小ラベルにする */
.ipasol .badge{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  padding:.15em .6em;border-radius:0;vertical-align:middle;margin-left:.4em;
  background:none;border:1px solid currentColor;
}
.ipasol .b-new{color:var(--accent)}
.ipasol .b-keep{color:var(--mute)}
.ipasol .b-soon{color:var(--flag)}

/* スキルレベルのはしご（.ladder / .lv） */
.ipasol .ladder{display:grid;gap:0;margin:1.4em 0}
.ipasol .lv{
  display:grid;grid-template-columns:8em 1fr;gap:0 20px;align-items:center;
  background:none;border:none;border-top:1px solid var(--rule);border-radius:0;padding:.85em 0;
}
.ipasol .lv .tag{
  background:none;color:var(--mute);border:1px solid var(--rule2);font-family:var(--mono);
  font-weight:700;border-radius:0;text-align:center;padding:.25em .3em;
  font-size:10.5px;letter-spacing:.08em;line-height:1.8;
}
.ipasol .lv .exs{display:flex;flex-wrap:wrap;gap:.45em}
.ipasol .lv .ex{
  background:#fff;border:1px solid var(--accent);color:var(--accent);
  font-weight:700;border-radius:0;padding:.25em .7em;font-size:11.5px;
  letter-spacing:.04em;margin:0;line-height:1.7;
}
.ipasol .lv .ex::before{content:none}
.ipasol .lv .ex.keep{border-color:var(--rule2);color:var(--mute)}

/* 新旧対応（.reorg） */
.ipasol .reorg{display:grid;grid-template-columns:1fr;gap:0;margin:1.4em 0}
.ipasol .reorg .grp{border:none;border-top:1px solid var(--rule);border-radius:0;overflow:visible;padding:.9em 0 1em}
.ipasol .reorg .grp .old{background:none;padding:0;font-size:.9em;color:var(--soft);line-height:1.9}
.ipasol .reorg .grp .old b{color:var(--ink)}
.ipasol .reorg .grp .arw{text-align:left;color:var(--accent);font-weight:700;font-size:1em;line-height:1.4;margin:.25em 0}
.ipasol .reorg .grp .new{background:none;padding:0;font-weight:700;color:var(--ink)}

/* 区分カード（.cards / .card） */
.ipasol .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 30px;margin:1.4em 0}
.ipasol .card{
  border:none;border-top:1px solid var(--rule);border-radius:0;padding:1em 0 1.2em;
  background:none;display:flex;flex-direction:column;
}
.ipasol .card .code{
  font-family:var(--mono);font-weight:700;color:var(--accent);font-size:11px;
  letter-spacing:.12em;background:none;padding:0;border-radius:0;
}
.ipasol .card .nm{font-weight:700;margin:.3em 0 .5em;color:var(--ink);line-height:1.6}
.ipasol .card .ds{font-size:.88em;color:var(--soft);flex:1;line-height:1.9}
.ipasol .card .ft{margin-top:.7em;font-size:11.5px;color:var(--mute)}

/* 科目構成マップ（.komap / .kob） */
.ipasol .komap{display:grid;gap:0;margin:1.4em 0}
.ipasol .korow{
  display:grid;grid-template-columns:8em 1fr;gap:0 20px;align-items:center;
  background:none;border:none;border-top:1px solid var(--rule);border-radius:0;padding:.85em 0;
}
.ipasol .koname{font-weight:700;color:var(--ink);font-size:.9em;line-height:1.5}
.ipasol .koblocks{display:flex;flex-wrap:wrap;gap:.5em;align-items:stretch}
.ipasol .kob{
  flex:1 1 120px;border-radius:0;padding:.5em .7em;font-weight:700;font-size:.88em;
  text-align:center;line-height:1.4;border:1px solid var(--rule2);background:none;color:var(--soft);
}
.ipasol .kob small{display:block;font-weight:500;font-size:.8em;opacity:.85;margin-top:.15em}
.ipasol .kob.a{background:var(--tint);color:var(--soft)}
.ipasol .kob.a2{background:var(--tint2);color:var(--accent);border-color:var(--accent)}
.ipasol .kob.b{background:var(--accent);color:#fff;border-color:var(--accent)}
.ipasol .kob.wide{flex-basis:100%}

/* 分野カード（.fields / .fcard） */
.ipasol .fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:0 30px;margin:1.4em 0}
.ipasol .fcard{border:none;border-top:1px solid var(--rule);border-radius:0;overflow:visible;background:none;padding:0 0 1em}
.ipasol .fcard .fh{
  background:none;color:var(--ink);font-weight:700;padding:.9em 0 .4em;
  font-size:.94em;display:flex;align-items:center;gap:.6em;
}
.ipasol .fcard .fh .fn{
  background:none;color:var(--accent);border:1px solid var(--accent);
  min-width:1.6em;height:1.6em;border-radius:0;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:.78em;font-weight:700;
}
.ipasol .fcard .fb{padding:0;font-size:.87em;color:var(--soft);line-height:1.85}

@media screen and (max-width:620px){
  .ipasol .tl .row,.ipasol .lv,.ipasol .korow{grid-template-columns:1fr;gap:.4em}
  .ipasol .tl .yr,.ipasol .lv .tag{justify-self:start;padding:.2em .7em}
  .ipasol .vs,.ipasol .scope,.ipasol .cards,.ipasol .fields{grid-template-columns:1fr;gap:0}
}

/* スマホでは、シミュレータの操作ボタンが **コードから遠く離れる**（2026-08-27 ユーザー指摘）。
   1カラムになると コード → 配列 → 計算 → 変数 → 説明 → ボタン の順に縦積みされるため、
   コードを見ながら「次へ」を押せない。画面下に貼り付けて、どこを見ていても押せるようにする。
   ⚠️ 影は使わない（デザイン方針）。地色＋上の罫線だけで浮かせる。
   ⚠️ .ctrl のあとに来る トレース表 を隠さないよう、下に逃げしろを取る。 */
@media screen and (max-width:900px){
  .ipasol .sim .ctrl{
    position:sticky;bottom:0;z-index:5;
    background:#fff;border-top:1px solid var(--rule2);
    margin:0 -14px;padding:.7em 14px;
  }
  .ipasol .sim .trace-wrap{padding-bottom:4.6em}
}
@media screen and (max-width:900px){
  .ipasol .sim-grid{grid-template-columns:1fr}
  .ipasol .state{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .ipasol .next{grid-template-columns:1fr;gap:0}
}
@media screen and (max-width:620px){
  .ipasol{font-size:15.5px}
  .ipasol h2{margin-top:2.6em;font-size:1.32em}
  .ipasol .canon dl{grid-template-columns:1fr;gap:4px}
  .ipasol .canon dd{margin:0 0 10px;padding-left:12px;border-left:2px solid var(--rule2)}
  .ipasol .map .it{flex-direction:column;gap:.4em}
  .ipasol .map .k{flex:none;align-self:flex-start;padding:.15em .7em}
}
@media (prefers-reduced-motion:reduce){.ipasol *{transition:none !important;animation:none !important}}

/* 引用したプログラムの上に注釈を重ねる（第3部・設計書 7.13）。
   抽象図を別に描くと「図を読む → 実物に戻して対応づける」一手間を読者に押しつける。
   grid を .annocode 側に置くのが肝。行ごとに grid を張ると max-content が行ごとに変わって桁がずれる。
   子は必ずブロック要素（p）にする。div 直下に裸のインラインを置くと wpautop が段落化して崩す。 */
.ipasol .annocode{
  display:grid;grid-template-columns:max-content 1fr;gap:0 1.6em;
  background:#fff;border-radius:0;
  border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);
  padding:1em 1.1em;margin:0 0 .7em;overflow-x:auto;
}
.ipasol .annocode .ac-c{
  margin:0;padding:0;font-family:var(--mono);font-size:13.5px;line-height:2.0;
  white-space:pre;color:var(--ink);max-width:none;
}
/* 行番号（当サイト付与）。本文が「6行目」と書くので、その場で数えられるようにする（2026-08-24） */
.ipasol .annocode .ac-c i{
  display:inline-block;width:1.6em;margin-right:.9em;text-align:right;
  color:var(--mute);font-style:normal;font-variant-numeric:tabular-nums;user-select:none;
}
.ipasol .annocode .ac-n{
  margin:0;padding:0;font-size:12px;line-height:2.0;color:var(--accent);
  font-weight:700;white-space:nowrap;max-width:none;
}
.ipasol .annocode .ac-n.dim{color:var(--mute);font-weight:400}
.ipasol .annocode .ac-c.hd{color:var(--deep);font-weight:700}
@media (max-width:600px){
  .ipasol .annocode{grid-template-columns:1fr;gap:0;padding:1em .8em}
  .ipasol .annocode .ac-c{font-size:12.5px;line-height:1.75}
  .ipasol .annocode .ac-n{white-space:normal;line-height:1.55;padding:.1em 0 .5em 1.1em}
  .ipasol .annocode .ac-n:empty{display:none}
}

/* 連載ナビ（第1部 G1〜G12）。記事末の「次に読む」だけだと隣の回へ移るのに
   最後までスクロールが要る、というユーザー指摘への対応（2026-08-19）。
   初版は横並びのチップにしたが「縦に並んでるほうがいい／文字はもう少し大きく」との指摘で
   縦のリストに変更。生成は build.py の series_nav()。 */
.ipasol .serialnav{
  border:none;border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);
  border-radius:0;background:none;padding:.9em 0 .2em;margin:0 0 2.2em;
}
.ipasol .serialnav .sn-h{
  margin:0 0 .7em;padding:0;max-width:none;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--mute);
}
.ipasol .serialnav .sn-list{
  display:flex;flex-direction:column;gap:0;margin:0;padding:0;max-width:none;
}
.ipasol .serialnav a,.ipasol .serialnav .sn-list span{
  display:flex;align-items:baseline;gap:.9em;
  border:none;border-top:1px solid var(--rule2);border-radius:0;background:none;
  padding:.62em .5em .62em .6em;font-size:15px;line-height:1.5;
  color:var(--ink);text-decoration:none;
}
.ipasol .serialnav .sn-list>:first-child{border-top:none}
.ipasol .serialnav a:hover{background:var(--tint);color:var(--accent)}
.ipasol .serialnav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ipasol .serialnav b{
  flex:0 0 3.8em;font-family:var(--mono);font-size:13px;font-weight:800;
  letter-spacing:.03em;color:var(--accent);
}
/* 現在地は塗らずに、左の太い罫と地色で示す（「印刷された技術書」の設計言語） */
.ipasol .serialnav .on{
  background:var(--tint2);font-weight:800;
  box-shadow:inset 3px 0 0 var(--accent);
}
.ipasol .serialnav .on::after{
  content:"いま読んでいる回";margin-left:auto;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--accent);white-space:nowrap;
}
.ipasol .serialnav .soon{color:var(--mute)}
.ipasol .serialnav .soon b{color:var(--mute)}
.ipasol .serialnav .soon::after{
  content:"準備中";margin-left:auto;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--mute);white-space:nowrap;
}
@media (max-width:600px){
  .ipasol .serialnav a,.ipasol .serialnav .sn-list span{font-size:14px;gap:.7em;padding:.6em .3em}
  .ipasol .serialnav b{flex:0 0 2.6em;font-size:12px}
  .ipasol .serialnav .on::after,.ipasol .serialnav .soon::after{font-size:9.5px;letter-spacing:.08em}
}

/* ══════════════════════════════════════════════════════════════
   ブロックの弁別（2026-08-20）
   「区切り・塊が分かりにくい」への対応。役割ごとに見た目を割り当てる。
     節の始まり  h2      … 上に太い罫＋大きな余白
     出題の引用  .canon  … 白い「紙面」＋左に濃い罫
     要点        .goal   … 白地＋上2px accent（据え置き）
     補足        .note   … 淡い地色
     設問        .quiz   … 淡い地色＋左4px＋「練習 n」の番号ラベル
   ══════════════════════════════════════════════════════════════ */

/* 節の始まりを立てる。1pxの細罫だと塊の境目が見えない */
.ipasol h2{
  border-top:2px solid var(--rule2);
  margin-top:3.6em;padding-top:1.3em;
}
.ipasol h2:first-child{margin-top:0;border-top:none;padding-top:0}

/* 引用は「試験の紙面」。白地にして、左に濃い罫を1本。補足（淡い地色）と混ざらないようにする */
.ipasol .canon{
  background:#fff;
  border-left:4px solid var(--deep);
}

/* 設問は「ここから問題」と一目で分かるようにする。
   ⚠️ 直前まで .goal（要点）とまったく同じ見た目だった。 */
.ipasol{counter-reset:quizno predno}
.ipasol .quiz{
  counter-increment:quizno;
  background:var(--tint2);
  border-top:none;border-bottom:none;border-left:4px solid var(--accent);
  padding:1.1em 1.3em 1.3em;
}
.ipasol .quiz::before{
  content:"練習 " counter(quizno);
  display:block;margin:0 0 .8em;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--accent);
}
.ipasol .predict{
  counter-increment:predno;
  background:var(--read-tint);
  border:none;border-left:4px dashed var(--read);
  padding:1.1em 1.3em 1.3em;
}
.ipasol .predict::before{
  content:"予想 " counter(predno);
  display:block;margin:0 0 .8em;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--read);
}
.ipasol .predict .lbl{display:none}

/* 答え合わせの欄が、設問の中のものだと分かるようにする */
.ipasol .quiz .ans.show,.ipasol .predict .ans.show{
  border-top:1px solid var(--rule2);margin-top:1.1em;padding-top:1em;
}

/* 説明用のプログラムと、引用したプログラムを見分ける。
   引用（.canon の中）は紙面なので枠を主張させない */
.ipasol .canon pre.pgm{border-color:var(--rule)}
.ipasol .quiz pre.pgm,.ipasol .predict pre.pgm{
  background:#fff;border:1px solid var(--rule2);margin:0 0 1.1em;
}

/* ── 目視で見つかった弱点の修正（2026-08-20）────────────── */

/* ① 節の頭に、印刷物の章標にあたる短い濃線を重ねる。全幅を太くすると重い */
.ipasol h2{position:relative}
.ipasol h2::before{
  content:"";position:absolute;left:0;top:-2px;
  width:3.2em;height:2px;background:var(--deep);
}

/* ② 表を「塊」として囲う。外枠が無いと、どこで終わったのか分からない */
.ipasol .tbl{border:1px solid var(--rule);background:#fff}
.ipasol .tbl>table{margin:0}
.ipasol .tbl table th{background:var(--tint2);color:var(--soft)}

/* ③ 予想クイズの左罫は実線に。4px の破線は点の粒が見えて紙面から浮く */
.ipasol .predict{border-left:4px solid var(--read)}

/* 本文直下のプログラムは、次のブロックとくっついて見えるので余白をとる。
   （引用ブロックの中の pre は紙面の一部なので margin:0 のまま） */
.ipasol>pre.pgm{margin:0 0 1.8em}
.ipasol .fig .figcap{color:var(--soft);font-size:12px}

/* ══════════════════════════════════════════════════════════════
   設問の中の「問題」と「選択肢」を見分けられるようにする（2026-08-21）

   > 「これ選択肢なのか問題なのか見分けがつかない」

   設問の中のプログラム（pre.pgm）が、白地・1px罫・全幅で、
   選択肢ボタン（.opt）とまったく同じ見た目になっていた。
   しかも選択肢の1つ目より上に置かれるので、5択の先頭に見える。
   ══════════════════════════════════════════════════════════════ */

/* 問題の側のプログラムは「読む対象」。左に濃い罫を立て、幅を内容に合わせて
   全幅の選択肢と並ばないようにする */
.ipasol .quiz pre.pgm,.ipasol .predict pre.pgm{
  background:#fff;
  border:1px solid var(--rule);
  border-left:3px solid var(--deep);
  width:fit-content;max-width:100%;
  margin:0 0 1.5em;
}
.ipasol .quiz pre.pgm::before,.ipasol .predict pre.pgm::before{
  content:"プログラム";
  display:block;
  font-family:inherit;font-size:10.5px;font-weight:800;letter-spacing:.18em;
  color:var(--mute);margin:0 0 .6em;
}

/* 選択肢の始まりを名指しする。無いと、上のプログラムとの境目が読み取れない */
.ipasol .opts::before,.ipasol .pbtns::before{
  content:"選択肢";
  display:block;width:100%;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;
  color:var(--mute);margin:0 0 .2em;
}

/* ══════════════════════════════════════════════════════════════
   解き方の箱 .tech（2026-08-21）

   > 「トレース表は結構役に立ちそうだけど、さらっと書かれててもったいない。
   > 　もうちょい、テクニックとして使えそうなので目立つようにする？」

   これまでの箱は 引用(.canon)／要点(.goal)／補足(.note)／設問(.quiz) の4種類で、
   **「本番でそのまま使う手順」を置く場所が無かった**ため、.note に紛れていた。
   ページでいちばん強い箱として、二重の枠と見出しチップを与える。
   ══════════════════════════════════════════════════════════════ */
.ipasol .tech{
  background:#fff;
  border:2px solid var(--deep);
  padding:1.4em 1.4em 1.3em;
  margin:1.8em 0;
  position:relative;
}
.ipasol .tech::before{
  content:"解き方";
  position:absolute;top:-.85em;left:1.2em;
  background:var(--deep);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.2em;
  padding:.35em .9em;
}
.ipasol .tech>.ttl{
  font-family:var(--mincho,"Hiragino Mincho ProN","Yu Mincho",serif);
  font-size:1.16em;font-weight:600;margin:.2em 0 .9em;color:var(--deep);
}
.ipasol .tech>ol{margin:0 0 .2em;padding:0;list-style:none;counter-reset:techno}
.ipasol .tech>ol>li{
  counter-increment:techno;
  position:relative;padding:0 0 0 2.4em;margin:0 0 1em;
}
.ipasol .tech>ol>li::before{
  content:counter(techno);
  position:absolute;left:0;top:.1em;
  width:1.7em;height:1.7em;line-height:1.7em;text-align:center;
  background:var(--deep);color:#fff;font-weight:800;font-size:.86em;
}
.ipasol .tech>ol>li>b{display:block;color:var(--deep);margin:0 0 .15em}
.ipasol .tech>ol>li>span{display:block;font-size:.95em;color:var(--soft)}
.ipasol .tech .tnote{
  border-top:1px solid var(--rule);margin:1.2em 0 0;padding:.9em 0 0;
  font-size:.93em;color:var(--soft);
}
.ipasol .tech .tnote b{color:var(--ink)}

/* 解き方の箱の中に、プログラムの該当行をその場に置く（2026-08-30 A2-2）
   ユーザー指摘「上のコードとの見比べで上下にスクロールしないと見えない」。
   pre なので build.py の compact() が改行と字下げを温存する。
   説明は <div class="dsc">。wpautop は中身を <p> で包むので、直下セレクタでは書かない
   （<span> にすると閉じない <p> が li の中に残る＝2026-08-30 に実際に出た）。 */
.ipasol .tech ol li pre.ln{
  font-family:var(--mono);font-size:13px;line-height:1.85;
  background:var(--tint);border:none;border-left:3px solid var(--rule2);
  border-radius:0;margin:.15em 0 .5em;padding:.5em .9em;
  overflow-x:auto;white-space:pre;tab-size:2;color:var(--ink);
}
.ipasol .tech ol li .dsc{display:block}
.ipasol .tech ol li p{margin:0}

/* 配列の手順図を、画像ではなくHTMLで描く（2026-08-30 A2-4 から）
   ユーザー指摘「処理のときに緑の色にちょっと変わってるだけで分かりづらい。
   矢印を使ってもっと視覚的に」。画像は本文幅で字がつぶれ、直すたびに
   再生成→アップロード→WAF回避の往復が要る。枡と矢印だけならHTMLが向く。
   枡の見た目はシミュレータ（.cell）と共通にして紙面をそろえる。
   ⚠️ wpautop 対策：枡は <p class="cell">（div だと中身が <p> で包まれる）。
   ⚠️ 矢印は枡と同じ幅の桁を並べて作る。SVGは使わない（WAF 403 を避ける）。
   ⚠️ クラス名には必ず af- を付ける。最初 .step / .stl.warn / .note で書いたら
      既存の補足ブロック .warn / .note の地色を拾い、見出しに帯が出た。 */
.ipasol .afig{margin:1.7em 0;padding:1.15em 1.25em;background:var(--tint);border:1px solid var(--rule2)}
.ipasol .afig .af-ttl{margin:0 0 .15em;font-family:var(--mincho);font-size:1.12em;font-weight:600;color:var(--deep)}
.ipasol .afig .af-sub{margin:0;font-size:.85em;color:var(--mute);font-family:var(--mono)}
.ipasol .afig .af-step{margin:0;padding:.85em 0 0}
.ipasol .afig .af-step+.af-step{margin-top:.85em;border-top:1px solid var(--rule)}
.ipasol .afig .af-stl{margin:0 0 .5em;font-size:.88em;font-weight:700;color:var(--deep)}
.ipasol .afig .af-stl.ng{color:var(--flag)}
.ipasol .afig .af-stl code{font-size:.95em;color:inherit;background:none}
.ipasol .afig .cells{gap:4px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.ipasol .afig p.cell{margin:0;flex:0 0 52px;width:52px;min-width:52px;padding:2px 2px 1px}
.ipasol .afig p.cell b{font-size:16px}
.ipasol .afig p.cell u{font-size:10px}
/* 文字列が入る枡。52px の枡に `"Green"` は 16px では収まらず折り返す（2026-09-04・r08-b5） */
.ipasol .afig p.cell.str b{font-size:11px;letter-spacing:-.02em;line-height:1.5}
/* 未定義の枡も同じ理由で折り返していた（「未定/義」の2行になる。r08-b4 でも起きていた） */
.ipasol .afig p.cell.undef b{font-size:11px;letter-spacing:-.02em;line-height:1.5}
/* ▲（ptr）の既定色。2026-09-05 まで transparent だったので、**印の付いていない枡を
   ptr で指すと ▲ が見えなかった**（r06-b4 で data1 に i の ▲ が出ず、
   fe-algo-02-5-futatsu でも2枡が同じ状態だった）。<s> は ptr / order が無いと空なので、
   既定を灰にしても、指していない枡の見た目は変わらない。 */
.ipasol .afig p.cell s{height:14px;font-size:11px;line-height:14px;color:var(--mute)}
.ipasol .afig p.cell.src s{color:var(--read)}
.ipasol .afig p.cell.new s{color:var(--accent)}
/* 網掛け（未定義）の枡を「いま見ている欄」として指すときの ▲。値が無いので灰にする。 */
.ipasol .afig p.cell.undef s{color:var(--mute)}
.ipasol .afig p.cell s i{color:var(--deep);font-weight:700;font-style:normal;font-size:12px}
.ipasol .afig p.cell.dim{background:#eef1ef;border-color:var(--rule)}
.ipasol .afig p.cell.dim b,.ipasol .afig p.cell.dim u{color:var(--mute)}
.ipasol .afig p.cell.lost{background:#fff;border-color:var(--bad);border-style:dashed}
.ipasol .afig p.cell.lost b{color:var(--bad);text-decoration:line-through;text-decoration-thickness:2px}
.ipasol .afig p.cell.lost u{color:var(--bad)}
.ipasol .afig p.cell.new{background:var(--tint2);border-color:var(--accent)}
.ipasol .afig p.cell.new b{color:var(--accent);font-weight:700}
.ipasol .afig p.cell.src{background:#fff;border-color:var(--read)}
.ipasol .afig p.cell.src b,.ipasol .afig p.cell.src u{color:var(--read)}
.ipasol .afig p.cell.tgt{background:#fff;border-color:var(--accent);border-style:dashed}
.ipasol .afig p.cell.tgt u{color:var(--accent)}
.ipasol .afig p.cell.nxt{background:#fff;border-color:var(--read);border-style:dashed}
.ipasol .afig p.cell.nxt b,.ipasol .afig p.cell.nxt u{color:var(--read)}
.ipasol .afig p.cell.hi{background:#fff;border-color:var(--read)}
.ipasol .afig p.cell.hi b,.ipasol .afig p.cell.hi u{color:var(--read)}
.ipasol .afig p.cell.eq{background:var(--tint2);border-color:var(--accent)}
.ipasol .afig p.cell.eq b,.ipasol .afig p.cell.eq u{color:var(--accent);font-weight:700}
.ipasol .afig p.cell.ne{background:var(--bad-tint);border-color:var(--bad)}
.ipasol .afig p.cell.ne b,.ipasol .afig p.cell.ne u{color:var(--bad);font-weight:700}
.ipasol .afig p.cell.bad{background:var(--bad-tint);border-color:var(--bad)}
.ipasol .afig p.cell.bad b{color:var(--bad);font-weight:700}
.ipasol .afig .af-mvrow{display:flex;gap:4px;align-items:center;height:20px;margin:0 0 .2em}
.ipasol .afig .af-mvrow .af-sp{flex:0 0 52px;margin:0}
.ipasol .afig .af-mvrow .af-hsp{flex:0 0 24px;margin:0}
.ipasol .afig .af-mvrow .af-mv{position:relative;flex:0 0 calc(var(--afsp,1) * 56px);height:2px;background:var(--accent);margin:0}
.ipasol .afig .af-mvrow .af-mv::after{content:"";position:absolute;top:-5px;right:-2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--accent)}
.ipasol .afig .af-mvrow .af-mv.l::after{right:auto;left:-2px;border-left:0;border-right:9px solid var(--accent)}
.ipasol .afig .af-mvrow .af-mv.b::before{content:"";position:absolute;top:-5px;left:-2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:9px solid var(--accent)}
.ipasol .afig .af-mvrow .af-mv.rng{background:var(--rule2)}
.ipasol .afig .af-mvrow .af-mv.rng::after{border-left-color:var(--rule2)}
.ipasol .afig .af-mvrow .af-mv.rng.b::before{border-right-color:var(--rule2)}
.ipasol .afig .af-mvrow .af-mv.ng{background:var(--bad)}
.ipasol .afig .af-mvrow .af-mv.ng::after{border-left-color:var(--bad)}
.ipasol .afig .af-mvrow .af-mv.ng.l::after{border-right-color:var(--bad)}
/* 矢印の追加（2026-09-03 r08-b1 の「できあがり」図）
   ・長さは px で焼き込まず --afsp（枡いくつぶんか）× 画面幅ごとの実寸で出す。
     afig.py の mv(span=) が style="--afsp:8" を書く。PC 56 / スマホ 48 / dense 35。
   ・.chain＝隣どうしの矢印をすきま無しで n 本並べる行（全部が1つずつ寄る図）。
     gap を 0 にして、桁を「枡＋すきま」の幅にそろえないと1本ごとに4pxずれる。
   ・.alt＝写しもとと同じ琥珀の矢印。1枚の中に性質のちがう動きが2つあるとき、
     緑（席を1つ右へ）と琥珀（押し出された値が先頭へ回り込む）で見分ける。 */
.ipasol .afig .af-mvrow .af-mv.alt{background:var(--read)}
.ipasol .afig .af-mvrow .af-mv.alt::after{border-left-color:var(--read)}
.ipasol .afig .af-mvrow .af-mv.alt.l::after{border-right-color:var(--read)}
/* 斜めの矢印で「1つずつ右の席へ」を見せる（2026-09-03）
   ユーザー要望「矢印でひとつずつシフトする感じをすべての配列に対して」。
   前後2段のあいだに引く。1マスぶん右下＝縦横が同じ長さ＝**つねに45°**なので、
   帯の高さを枡のピッチ(--pt)にそろえておけば skewX(45deg) 1つで足り、
   枡の幅が変わっても角度がずれない。SVGは使わない（WAF 403）。 */
.ipasol .afig{--pt:56px;--cw:52px;--lb:104px}
.ipasol .afig .shrow{display:flex;align-items:center;gap:12px;margin:0}
.ipasol .afig p.shl{flex:0 0 var(--lb);margin:0;font-family:var(--mono);font-size:11.5px;
  color:var(--mute);letter-spacing:.04em;line-height:1.5;text-align:right}
.ipasol .afig .shift{position:relative;flex:1 1 auto;height:calc(var(--pt) + 8px);margin:0}
.ipasol .afig .shift p{position:absolute;margin:0}
.ipasol .afig .shift .dgl{left:calc(var(--cw) / 2 + var(--k) * var(--pt));top:3px;
  width:2px;height:var(--pt);background:var(--accent);
  transform-origin:top center;transform:skewX(var(--ang,45deg))}
.ipasol .afig .shift .dgh{left:calc(var(--cw) / 2 + (var(--k) + var(--d,1)) * var(--pt) + var(--hx,-9px));
  top:calc(var(--hb,1) * var(--pt) + var(--hy,-6px));width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:10px solid var(--accent);transform:rotate(var(--ang,-45deg))}
.ipasol .afig .shift .dgl.ng{background:var(--bad)}
.ipasol .afig .shift .dgh.ng{border-top-color:var(--bad)}
.ipasol .afig .shift .dgl.alt{background:var(--read)}
.ipasol .afig .shift .dgh.alt{border-top-color:var(--read)}
.ipasol .afig .shift .dgt{left:calc(var(--cw) / 2 + var(--kt) * var(--pt) + 9px);
  top:calc(var(--pt) / 2 - 9px);font-family:var(--mono);font-size:11.5px;font-weight:700;
  line-height:1.5;color:var(--accent);background:var(--tint);padding:0 .3em;white-space:nowrap}
.ipasol .afig .shift .dgt.ng{color:var(--bad)}
.ipasol .afig .shift .dgt.alt{color:var(--read)}
.ipasol .lchain{margin:1.7em 0;padding:1.15em 1.25em;background:var(--tint);border:1px solid var(--rule2)}
.ipasol .lchain .af-ttl{margin:0 0 .15em;font-family:var(--mincho);font-size:1.12em;font-weight:600;color:var(--deep)}
.ipasol .lchain .af-sub{margin:0 0 .9em;font-size:.85em;color:var(--mute);font-family:var(--mono)}
.ipasol .lchain .lnode{display:flex;align-items:center;gap:10px;margin:0}
.ipasol .lchain p.ln-no{flex:0 0 1.9em;margin:0;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--accent);text-align:right}
.ipasol .lchain .ln-box{flex:0 1 auto;display:flex;flex-wrap:wrap;align-items:stretch;background:#fff;border:1px solid var(--rule2);border-left:3px solid var(--accent)}
.ipasol .lchain.end .ln-box,.ipasol .lchain .lnode.end .ln-box{border-left-color:var(--mute)}
.ipasol .lchain p.ln-at{flex:0 0 auto;margin:0;padding:.5em .9em;font-size:13px;color:var(--soft);background:var(--tint2);display:flex;align-items:center}
.ipasol .lchain p.ln-at b{font-family:var(--mono);font-size:16px;color:var(--deep);margin-left:.3em}
.ipasol .lchain p.ln-f{flex:0 0 auto;min-width:11em;margin:0;padding:.42em .9em;border-left:1px solid var(--rule)}
.ipasol .lchain p.ln-f u{display:block;font-family:var(--mono);font-size:10px;color:var(--mute);text-decoration:none;letter-spacing:.02em}
.ipasol .lchain p.ln-f b{display:block;font-family:var(--mono);font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}
.ipasol .lchain p.ln-f.undef{background:repeating-linear-gradient(45deg,#eceff1,#eceff1 3px,#dfe4e7 3px,#dfe4e7 6px)}
.ipasol .lchain p.ln-f.undef b{font-size:13px;color:var(--mute)}
.ipasol .lchain p.lgap{position:relative;margin:0;padding:.55em 0 .55em 3.9em;min-height:2.5em;font-size:12.5px;color:var(--soft);display:flex;align-items:center}
.ipasol .lchain p.lgap::before{content:"";position:absolute;left:1.85em;top:0;bottom:9px;width:2px;background:var(--accent)}
.ipasol .lchain p.lgap::after{content:"";position:absolute;left:calc(1.85em - 4px);bottom:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid var(--accent)}
.ipasol .lchain p.lgap span{background:var(--tint);padding:0 .1em}
.ipasol .lchain p.lend{margin:.5em 0 0;padding:.5em .8em .5em 3.9em;font-size:12.5px;color:var(--soft);border-top:1px solid var(--rule)}
.ipasol .lchain p.lfoot{margin:1.05em 0 0;padding:.8em 0 0;border-top:1px solid var(--rule2);font-size:.95em;color:var(--ink)}
.ipasol .afig .af-mvrow.chain{gap:0}
.ipasol .afig .af-mvrow.chain .af-sp{flex:0 0 56px}
.ipasol .afig .af-mvrow.chain .af-hsp{flex:0 0 26px}
.ipasol .afig pre.ln{font-family:var(--mono);font-size:13px;line-height:1.85;background:#fff;border:none;border-left:3px solid var(--rule2);border-radius:0;margin:0;padding:.55em .9em;overflow-x:auto;white-space:pre;tab-size:2;color:var(--ink)}
.ipasol .afig pre.ln b{color:var(--read);font-weight:700}
.ipasol .afig .grid2 td s{color:var(--accent);font-weight:700}
.ipasol .afig .grid2 td.w s,.ipasol .afig .grid2 td.r s{color:inherit}
/* 2026-09-23：afig の外に単体で置いた表（afig.table() を本文に直接置く使い方。
   科目Aの教科書で多用する）にも同じ体裁を当てる。これが無いと**素の表**になり、
   スマホでは器が無いぶん画面からはみ出す（fe-a-kisuu の16進対応表で発生）。 */
.ipasol .af-tblwrap{overflow-x:auto;margin:1.5em 0;-webkit-overflow-scrolling:touch}
.ipasol table.af-tbl{width:auto;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--rule2)}
.ipasol table.af-tbl th{font-weight:700;font-size:11.5px;color:var(--mute);padding:.42em .85em;white-space:nowrap;text-align:center;background:var(--tint2);border:1px solid var(--rule2)}
.ipasol table.af-tbl td{font-family:var(--mono);font-variant-numeric:tabular-nums;padding:.42em .85em;white-space:nowrap;text-align:center;border:1px solid var(--rule2);color:var(--ink);min-width:2.6em}
.ipasol table.af-tbl td.hd{font-family:inherit;color:var(--mute);font-size:12px;text-align:left}
.ipasol .afig .af-tblwrap{overflow-x:auto;margin:0}
.ipasol .afig table.af-tbl{width:auto;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--rule2)}
.ipasol .afig table.af-tbl th{font-weight:700;font-size:11.5px;color:var(--mute);padding:.42em .85em;white-space:nowrap;text-align:center;background:var(--tint2);border:1px solid var(--rule2)}
.ipasol .afig table.af-tbl td{font-family:var(--mono);font-variant-numeric:tabular-nums;padding:.42em .85em;white-space:nowrap;text-align:center;border:1px solid var(--rule2);color:var(--ink);min-width:2.6em}
.ipasol .afig table.af-tbl td.hd{font-family:inherit;color:var(--mute);font-size:12px;text-align:left}
.ipasol .afig table.af-tbl td.l{text-align:left}
.ipasol .afig table.af-tbl td.txt.w9{min-width:9em}
.ipasol .afig table.af-tbl td.txt{white-space:normal;text-align:left;font-family:inherit;font-size:12.5px;color:var(--soft);min-width:0;max-width:17em;line-height:1.7}
.ipasol .afig table.af-tbl td.new{background:var(--tint2);color:var(--accent);font-weight:700}
.ipasol .afig table.af-tbl td.dim{color:var(--mute)}
/* 読んだ行（2026-09-03）。枡の .cell.src と同じ琥珀にして、
   「読む」の印を図の種類（枡／表）で変えないようにする。 */
.ipasol .afig table.af-tbl td.src{background:var(--read-tint);color:var(--read);font-weight:700}
.ipasol .afig table.af-tbl td.bad{background:var(--bad-tint);color:var(--bad);font-weight:700}
/* 変数の箱（2026-09-03）。配列の枡と見た目を必ず変える。
   名前を左・値を右に置いた横長の箱にして、「1マスの配列」に見えないようにする。 */
.ipasol .afig .af-vars{display:flex;gap:8px;flex-wrap:wrap;margin:.25em 0 0}
.ipasol .afig p.vbox{margin:0;display:inline-flex;align-items:baseline;gap:.5em;background:#fff;border:1px solid var(--rule2);border-left:3px solid var(--accent);padding:.3em .8em}
.ipasol .afig p.vbox u{font-family:var(--mono);font-size:12px;color:var(--mute);text-decoration:none}
.ipasol .afig p.vbox b{font-family:var(--mono);font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums}
.ipasol .afig p.vbox.hi{border-color:var(--read);border-left-color:var(--read);background:var(--read-tint)}
.ipasol .afig p.vbox.hi b,.ipasol .afig p.vbox.hi u{color:var(--read)}
.ipasol .afig .af-note{margin:.45em 0 0;font-size:.85em;color:var(--soft)}
.ipasol .afig .af-note.ng{color:var(--flag)}
.ipasol .afig .af-foot{margin:1.05em 0 0;padding:.8em 0 0;border-top:1px solid var(--rule2);font-size:.95em;font-weight:700;color:var(--ink);text-align:center}
@media (max-width:600px){
  .ipasol .afig{padding:1em .9em}
  .ipasol .afig p.cell{flex:0 0 44px;width:44px;min-width:44px}
  .ipasol .afig p.cell b{font-size:15px}
  .ipasol .afig p.cell.str b,.ipasol .afig p.cell.undef b{font-size:9.5px}
  .ipasol .afig{--pt:48px;--cw:44px}
  .ipasol .afig.dense{--pt:35px;--cw:32px}
  .ipasol .afig .shrow{flex-direction:column;align-items:flex-start;gap:2px}
  .ipasol .afig p.shl{flex:none;text-align:left}
  .ipasol .afig p.shl:empty{display:none}
  .ipasol .afig .af-mvrow .af-sp{flex:0 0 44px}
  .ipasol .afig .af-mvrow .af-hsp{flex:0 0 20px}
  .ipasol .afig .af-mvrow .af-mv{flex:0 0 calc(var(--afsp,1) * 48px)}
  .ipasol .afig .af-mvrow.chain .af-sp{flex:0 0 48px}
  .ipasol .afig .af-mvrow.chain .af-hsp{flex:0 0 24px}
  .ipasol .afig .af-foot{font-size:.9em}
  /* ⚠️ スマホの af-tbl は横スクロールになるが、**数える列が主役の表**では
     肝心の列が画面外に出る（2026-09-07・r06-b5 のトレース表）。
     字送りと余白をもう一段詰めて、5列が 360px 幅に収まるようにする。 */
  .ipasol .afig table.af-tbl th,.ipasol .afig table.af-tbl td{padding:.34em .26em;font-size:11.5px}
  .ipasol .afig table.af-tbl td{min-width:2em}
  .ipasol .afig table.af-tbl th{font-size:10.5px}
  /* ⚠️ 図の中のプログラムは、スマホでは**折り返す**（2026-09-08・r05-b1）。
     overflow-x:auto のままだと、長い行（`for (j を 2 から iの正の平方根の整数部分 …)`）が
     箱の中で横スクロールになり、**読者が図の一部を見ないまま通り過ぎる**。
     verify_article はこれを「HTMLの図が横にはみ出している」で止める。
     短い行には何の影響も無い（折り返さないので）。 */
  .ipasol .afig pre.ln{font-size:11.5px;padding:.5em .6em;white-space:pre-wrap;overflow-wrap:anywhere}
  .ipasol .afig.dense p.cell{flex:0 0 32px;width:32px;min-width:32px;padding:1px 1px 0}
  .ipasol .afig.dense p.cell b{font-size:13px}
  .ipasol .afig.dense p.cell u{font-size:9px}
  .ipasol .afig.dense .cells{gap:3px}
  .ipasol .afig.dense .af-mvrow .af-sp{flex:0 0 32px}
  .ipasol .afig.dense .af-mvrow{gap:3px}
  .ipasol .afig.dense .af-mvrow.chain{gap:0}
  .ipasol .afig.dense .af-mvrow .af-hsp{flex:0 0 13px}
  .ipasol .afig.dense .af-mvrow .af-mv{flex:0 0 calc(var(--afsp,1) * 35px)}
  .ipasol .afig.dense .af-mvrow.chain .af-sp{flex:0 0 35px}
  .ipasol .afig.dense .af-mvrow.chain .af-hsp{flex:0 0 16px}
  .ipasol .tech ol li pre.ln{font-size:11.5px;padding:.45em .6em}
  .ipasol .lchain{padding:1em .8em}
  .ipasol .lchain p.ln-at{flex:1 1 100%;border-bottom:1px solid var(--rule)}
  .ipasol .lchain p.ln-f{flex:1 1 45%;border-left:none;border-right:1px solid var(--rule)}
  .ipasol .afig .shift .dgt{font-size:10.5px;left:calc(var(--cw) / 2 + var(--kt) * var(--pt) + 7px)}
}

/* 表の「行き先」列（2026-08-21）
   §5-2「表の各行に行き先を持たせる」を全記号に広げたとき、
   G2-1 のような番号が「G2-」「1」に折り返して読めなくなった。 */
.ipasol .tbl th.go,.ipasol .tbl td.go{white-space:nowrap;text-align:center}
.ipasol .tbl td.go a{font-family:var(--mono);font-size:.92em;font-weight:700}

/* 手順図の紙芝居（2026-09-04）。ユーザー指摘「相当スクロールしないとわからない、
   「つぎへ」ボタンで紙芝居風にうまく簡潔にみせる？」
   .afig[data-paged] は1段だけ出す。JSが動かなければ全段そのまま＝内容は失われない。
   ⚠️ ボタンの見た目は **既存の .ipasol button / .pri を使う**（独自に塗らない）。
      自前で background:var(--brand) と書いたら、その変数が無くて
      **緑地のはずが白地＋白文字＝「次へ」が消えた**（2026-09-04）。 */
.ipasol .afig.paged{padding-bottom:.2em}
.ipasol .afig.paged > .af-step{border-top:none;padding-top:.2em;min-height:1px}
.ipasol p.afpg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:1em 0 0;
  padding-top:.9em;border-top:1px solid var(--rule)}
.ipasol p.afpg .afpg-n{margin-left:auto;font-size:11.5px;color:var(--mute);
  font-variant-numeric:tabular-nums}

.ipasol .gph{position:relative;width:330px;height:225px;margin:.7em auto .3em;max-width:100%}
.ipasol .gph .ged{position:absolute;height:1.5px;background:var(--rule2);transform-origin:0 50%;margin:0;padding:0}
.ipasol .gph .gnd{position:absolute;width:32px;height:32px;margin:0;padding:0;
  border:1.5px solid var(--ink);border-radius:50%;background:#fff;
  font-family:var(--mono);font-size:15px;line-height:29px;text-align:center;color:var(--ink)}
@media (max-width:430px){
  .ipasol .gph{transform:scale(.88);transform-origin:top center;height:200px}
}

.ipasol .mirw{position:relative;display:inline-block;max-width:100%}
.ipasol .mirw .grid2 table{table-layout:fixed}
.ipasol .mirw .grid2 th{width:26px;height:18px;padding:0}
.ipasol .mirw .grid2 tr:first-child th{width:44px;height:18px}
.ipasol .mirw .grid2 td{width:44px;height:44px;min-width:0;padding:0;vertical-align:middle}
.ipasol .mirw .mirl{position:absolute;height:2px;margin:0;padding:0;background:var(--ink);
  transform-origin:0 50%;border-radius:2px;pointer-events:none}
.ipasol .mirw .mirl::after{content:"";position:absolute;right:-1px;top:-4px;
  border-left:9px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ipasol .mirw .mirf{position:absolute;margin:0;padding:0;background:var(--rule2);height:2px;
  transform-origin:0 50%;opacity:.85}
@media (max-width:430px){
  .ipasol .mirw{transform:scale(.82);transform-origin:top left}
}

/* ── 重ね図 .ovl（2026-09-06 新設・令和6年度 問5）─────────────────
   問題文の式と、プログラムの1行を**上下に並べ、同じ席を同じ色**で示す図。
   ユーザー案（fe-r06-b5-kaisetsu-simple.html）から取り入れた。
   「位置で重ねる」を4段落の地の文で説明するより、1枚で伝わる。

   ⚠️ 子は必ずブロック要素（<p>）にする ── div直下にインラインを裸で置くと
      wpautop が勝手に段落化して </p> がずれる。
   ⚠️ 色は「席」の番号（s1〜s4）で付ける。**意味の名前で付けない** ──
      この図が言っているのは「同じ席」だけで、その席が何かは本文が言う。
   ⚠️ SVGは使わない（WAF 403）。 */
.ipasol .ovl{
  margin:1.9em 0;padding:1.15em 1.2em;background:var(--tint);
  border:1px solid var(--rule2);overflow-x:auto;
}
.ipasol .ovl p.ovr{
  display:flex;align-items:baseline;gap:.9em;margin:0 0 .7em;
  font-family:var(--mono);font-size:15px;white-space:nowrap;
}
.ipasol .ovl p.ovr:last-of-type{margin-bottom:0}
.ipasol .ovl p.ovr u{
  flex:0 0 6.2em;text-align:right;text-decoration:none;
  font-family:inherit;font-size:11.5px;letter-spacing:.06em;color:var(--mute);
}
.ipasol .ovl p.ovr b{font-weight:400}
.ipasol .ovl p.ovr i{
  font-style:normal;font-weight:700;padding:.12em .45em;margin:0 .08em;
  border:1px solid transparent;
}
/* 4つの席。緑系＝わるほう（K系）、琥珀系＝かけるほう（M系）にそろえてある */
.ipasol .ovl i.s1{background:var(--read-tint);color:var(--read);border-color:var(--read)}
.ipasol .ovl i.s2{background:#fff7d6;color:#8a6a00;border-color:#c9a227}
.ipasol .ovl i.s3{background:#eceff1;color:#4a5b54;border-color:var(--rule2)}
.ipasol .ovl i.s4{background:var(--tint2);color:var(--accent);border-color:var(--accent)}
.ipasol .ovl p.ovf{
  margin:.95em 0 0;padding:.75em 0 0;border-top:1px solid var(--rule2);
  font-family:inherit;font-size:13.5px;line-height:1.8;color:var(--soft);white-space:normal;
}
@media (max-width:600px){
  .ipasol .ovl{padding:.9em .8em}
  /* ⚠️ スマホでは横スクロールにしない ── 4つの席が上下で対応していることを
     **一目で**見せる図なので、横に振らせたら意味が消える。折り返して2行にする。
     チップ自体は nowrap のまま（項の途中で割れないように）。 */
  .ipasol .ovl p.ovr{display:block;font-size:12.5px;white-space:normal;line-height:2.3}
  .ipasol .ovl p.ovr u{display:block;flex:none;text-align:left;margin-bottom:.1em}
  .ipasol .ovl p.ovr i{white-space:nowrap;padding:.1em .3em;margin:0 .04em}
}

/* ══════════════════════════════════════════════════════════════
   ハブの道案内（.facts ／ .route）2026-09-19
   fe-shiken-guide が「文字だけで、どこから始めるかが見えない」と指摘された。
   同じ行き先へのリンクが本文に2〜3回ずつ散っていたのを、1枚の道順図に集める。
     .facts … 数字の一覧（大きな数字＋何の数か）
     .route … 左＝教科書（上から順に）／中＝往復の矢印／右＝過去問、下＝いつでも読む回
   カードは <a> の中に <span> だけを置く（wpautop が <a> を割らないように）。
   ══════════════════════════════════════════════════════════════ */
.ipasol .facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule2);border-bottom:1px solid var(--rule2);margin:1.2em 0 2.2em;
}
.ipasol .facts p{margin:0;padding:.9em 1em 1em;border-left:1px solid var(--rule)}
.ipasol .facts p:first-child{border-left:none;padding-left:0}
.ipasol .facts b{display:block;font-family:var(--mincho);font-size:34px;font-weight:700;color:var(--deep);line-height:1.15;letter-spacing:0}
.ipasol .facts b small{font-size:15px;margin-left:.1em}
.ipasol .facts span{display:block;font-size:12.5px;color:var(--soft);line-height:1.6;margin-top:.35em}

.ipasol .route{
  display:grid;grid-template-columns:minmax(0,1.1fr) 8.5em minmax(0,1fr);
  margin:1.4em 0 1.2em;align-items:stretch;
}
.ipasol .route .rcol{display:flex;flex-direction:column;min-width:0}
.ipasol .route p.rlbl{margin:0 0 .6em;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--mute)}
.ipasol .route a.rcard{
  display:block;background:#fff;border:1px solid var(--rule2);border-top:3px solid var(--accent);
  border-radius:2px;padding:.85em 1.1em 1em;text-decoration:none;color:var(--ink);
}
.ipasol .route a.rcard:hover{background:var(--tint)}
.ipasol .route a.rcard.start{border:2px solid var(--accent);border-top-width:4px}
.ipasol .route .rk{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
.ipasol .route .rt{display:block;font-size:1.12em;font-weight:800;line-height:1.5;margin:.25em 0 .35em;color:var(--ink)}
.ipasol .route .rd{display:block;font-size:.87em;color:var(--soft);line-height:1.75}
.ipasol .route .rgo{display:block;margin-top:.7em;font-size:.85em;font-weight:800;color:var(--link)}
.ipasol .route a.rcard.start .rgo{display:inline-block;background:var(--accent);color:#fff;padding:.25em .8em;border-radius:2px}
.ipasol .route p.rdown{margin:.3em 0;text-align:center;font-size:12px;font-weight:800;color:var(--accent);line-height:1.5}
.ipasol .route p.rdown b{display:block;font-size:20px;line-height:1.1}
.ipasol .route .rcol.q a.rcard{flex:1 1 auto}
.ipasol .route .rmid{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:1.6em .5em 0}
.ipasol .route .rmid p{margin:0}
.ipasol .route .rmid p.ar{font-size:30px;line-height:1;color:var(--accent)}
.ipasol .route .rmid p.al{margin-top:.4em;font-size:12px;font-weight:800;line-height:1.6;color:var(--accent)}
.ipasol .route .rfull{grid-column:1 / -1;margin-top:1.3em}
.ipasol .route .rfull a.rcard{border-top-color:var(--rule2)}
.ipasol .route .rfull .rk{color:var(--mute)}
@media (max-width:600px){
  .ipasol .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ipasol .facts p:nth-child(3){border-left:none;padding-left:0}
  .ipasol .facts p:nth-child(n+3){border-top:1px solid var(--rule)}
  .ipasol .facts b{font-size:28px}
  .ipasol .route{grid-template-columns:1fr}
  .ipasol .route .rmid{flex-direction:row;gap:.6em;padding:.9em 0}
  .ipasol .route .rmid p.al{margin-top:0}
  .ipasol .route .rmid p.al br{display:none}
}

/* ── 学ぶ順番（ol.steps）2026-09-19 ────────────────────────
   ピラーページの「合格までの段階」。番号は本当に順番があるときだけ使う。
   各段に「次へ進む目安」と「よくあるつまずき」を必ず置く（無い段は書き足りていない）。 */
.ipasol ol.steps{list-style:none;counter-reset:st;padding:0;margin:1.8em 0 2.2em}
.ipasol ol.steps>li{counter-increment:st;position:relative;margin:0;padding:0 0 1.9em 3.6em}
.ipasol ol.steps>li::before{
  content:counter(st);position:absolute;left:0;top:.1em;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;
  font-family:var(--mincho);font-size:19px;font-weight:700;border-radius:2px;
}
.ipasol ol.steps>li::after{content:"";position:absolute;left:18px;top:46px;bottom:6px;border-left:2px solid var(--rule2)}
.ipasol ol.steps>li:last-child{padding-bottom:0}
.ipasol ol.steps>li:last-child::after{display:none}
.ipasol ol.steps p{margin:0 0 .6em}
.ipasol ol.steps p.sh{font-size:1.14em;font-weight:800;line-height:1.55;margin:.3em 0 .45em}
.ipasol ol.steps p.ok,.ipasol ol.steps p.ng{font-size:.92em;line-height:1.8;padding:.45em .8em;margin:0 0 .45em}
.ipasol ol.steps p.ok{background:var(--tint2)}
.ipasol ol.steps p.ng{background:var(--flag-tint)}
.ipasol ol.steps p.ok::before,.ipasol ol.steps p.ng::before{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em}
.ipasol ol.steps p.ok::before{content:"次へ進む目安";color:var(--accent)}
.ipasol ol.steps p.ng::before{content:"よくあるつまずき";color:var(--flag)}
.ipasol ol.steps p.lk{margin:.6em 0 0;font-weight:700;font-size:.93em}
.ipasol ol.steps p.lk a{color:var(--link)}
.ipasol .faq h3{font-size:1.02em}
.ipasol .faq h3::before{content:"Q. ";color:var(--accent)}

/* ══════════════════════════════════════════════════════════════
   シミュレータのスマホ表示（2026-09-19・r05-b4）
   ユーザー指摘「次へのボタンとコード見るときにスクロール必要だったりスマホへの最適化」。
   実測（390×844）：コード枠が681pxあり、光っている行と説明文（.narr）が同じ画面に入らない。
   長い行は右で切れていた（return ((value ＋ 3) mod …）。
     ① コード枠の高さを画面の4割に抑え、枠の中だけスクロール（光っている行は JS が枠の中央へ送る）
     ② 説明文をコードの直下へ（.sim-grid を display:contents にして order で並べ替える）
     ③ 長い行は折り返す（行番号の右で折れるので字下げは崩れない）
     ④ .sim の overflow:hidden は sticky の「次へ」を効かなくするので clip にする
   ⚠️ PC（901px〜）は触らない。コード（左）と状態（右）が横に並んでいて困っていない。
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width:900px){
  .ipasol .sim{display:flex;flex-direction:column;overflow:clip}
  .ipasol .sim .sim-grid{display:contents}
  .ipasol .sim .sim-head{order:0}
  .ipasol .sim .code{order:1;max-height:40vh;overflow-y:auto;font-size:12.5px;line-height:1.8;padding:.6em 0}
  .ipasol .sim .code .ln{white-space:pre-wrap;word-break:break-all;gap:10px;padding:1px .8em}
  .ipasol .sim .narr{order:2;border-top:none;padding:.8em 0 .6em}
  .ipasol .sim .state{order:3;padding-top:.8em}
  /* 「いる場所」などの変数を配列より上へ。呼び出しを追う回では、いまどの関数の中にいるかが
     コードの次に見たいもの（実測：配列・計算の下だと画面の外に落ちていた） */
  .ipasol .sim .state>div:has(>.vars){order:-1}
  .ipasol .sim .ctrl{order:4;gap:6px}
  .ipasol .sim .trace-wrap{order:5}
}
@media screen and (max-width:620px){
  .ipasol .sim .ctrl button{padding:.45em .75em;font-size:13px}
  .ipasol .sim .ctrl button.pri{padding:.45em 1.3em}
}

/* ══════════════════════════════════════════════════════════════
   数式 .fml（2026-09-19・r05-b5 コサイン類似度）
   問題文の分数と √ を、画像にせず HTML で組む。画像にすると
   「式のこの部品 ↔ コードのこの行」の対応に番号札を足せない。
     <p class="fml"><span class="fr"><span class="nu">分子</span><span class="de">分母</span></span></p>
     √ は <span class="rt">中身</span>（上の横棒は border、記号は ::before）
     番号札は <i class="tg">①</i>、部品の地色は <span class="pt">…</span>
   ⚠️ <p> 1つに収める（中はすべて span）。div にすると wpautop が中身を <p> で包む。
   ⚠️ レビュー用パックは review_pack.py の _expand_fml() が「(分子) ÷ (分母)」「√(…)」に開く。
   ══════════════════════════════════════════════════════════════ */
.ipasol .fml{margin:1em 0;text-align:center;font-size:15.5px;line-height:1.5;overflow-x:auto;color:var(--ink)}
.ipasol .fml .fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle}
.ipasol .fml .nu{padding:0 .4em .3em;border-bottom:1.5px solid var(--ink);white-space:nowrap}
.ipasol .fml .de{padding:.35em .4em 0;display:flex;gap:.5em;align-items:flex-end;white-space:nowrap}
.ipasol .fml .rt{display:inline-block;position:relative;margin-left:.95em;padding:.15em .2em 0;border-top:1.5px solid var(--ink)}
.ipasol .fml .rt::before{content:"√";position:absolute;left:-.95em;top:-.05em;font-size:1.2em;line-height:1}
.ipasol .fml sub,.ipasol .fml sup{font-size:.68em;line-height:0}
.ipasol .fml .pt{background:var(--tint2);padding:.1em .25em}
.ipasol .fml .tg{display:inline-block;font-style:normal;font-size:11px;font-weight:800;line-height:1.5;color:#fff;background:var(--accent);padding:0 .35em;margin-right:.35em;border-radius:2px;vertical-align:.2em}
@media screen and (max-width:620px){
  .ipasol .fml{font-size:11.5px}
  .ipasol .fml .de{gap:.3em;padding-left:.2em;padding-right:.2em}
  .ipasol .fml .pt{padding:.1em .15em}
  .ipasol .fml .tg{font-size:9.5px;margin-right:.25em;padding:0 .3em}
}
.ipasol .afig .ltree{max-width:34em;margin:.5em auto .2em}
.ipasol .afig .lt-n{display:flex;flex-direction:column;align-items:center;min-width:0}
.ipasol .afig .ltree>.lt-n{width:100%}
.ipasol .afig .lt-kids{display:flex;align-self:stretch;position:relative;padding-top:24px}
.ipasol .afig .lt-kids::before{content:"";position:absolute;top:4px;left:calc(50% - 1px);height:20px;border-left:2px solid var(--mute)}
.ipasol .afig .lt-kids::after{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--mute)}
.ipasol .afig .lt-kids>.lt-n{flex:1 1 0;position:relative;padding:14px 4px 0}
.ipasol .afig .lt-kids>.lt-n::before{content:"";position:absolute;top:0;left:calc(50% - 1px);height:14px;border-left:2px solid var(--mute)}
.ipasol .afig .lt-kids>.lt-n::after{content:"";position:absolute;top:0;left:0;right:0;border-top:2px solid var(--mute)}
.ipasol .afig .lt-kids>.lt-n:first-child::after{left:50%}
.ipasol .afig .lt-kids>.lt-n:last-child::after{right:50%}
.ipasol .afig .lt-kids>.lt-n:only-child::after{display:none}
.ipasol .afig p.lt-box{margin:0;width:100%;max-width:14em;box-sizing:border-box;background:#fff;border:1px solid var(--rule2);padding:.4em .6em .45em;text-align:center;line-height:1.4}
.ipasol .afig p.lt-box.leaf{background:#f4f6f5;border-style:dashed}
.ipasol .afig p.lt-box.hi{border:2px solid var(--read);background:var(--read-tint)}
.ipasol .afig p.lt-box u{display:block;text-decoration:none;font-weight:700;font-size:13px;color:var(--ink)}
.ipasol .afig p.lt-box em{display:block;font-style:normal;font-size:12px;color:var(--soft)}
.ipasol .afig p.lt-box b{display:block;font-family:var(--mono);font-size:20px;color:var(--accent);font-variant-numeric:tabular-nums;margin:.1em 0}
.ipasol .afig p.lt-box.hi b{color:var(--read)}
.ipasol .afig p.lt-box small{display:block;font-size:11.5px;color:var(--soft);border-top:1px dotted var(--rule2);padding-top:.25em;margin-top:.1em}
@media (max-width:600px){
  .ipasol .afig p.lt-box{padding:.35em .35em .4em}
  .ipasol .afig p.lt-box em,.ipasol .afig p.lt-box small{font-size:11px}
  .ipasol .afig .lt-kids>.lt-n{padding-left:2px;padding-right:2px}
}

/* IPAMORI-CSS-END */