/* ------------------------------------------------------------
   AI OTAKU LABO — 記事内に差し込むDBブロック
   本文中でだけ効くよう .aol- 接頭辞に閉じている。
   AFFINGER 側のCSSと衝突しないよう、汎用セレクタは書かない。
   サイト本体が明るい配色に固定されているため、単一テーマで作る。
------------------------------------------------------------ */

/* ★ 2026-08-28 発見: FAQ は aol_section で包まれないので .aol-sec の外にある。
   変数がどれも解決せず、Qのバッジも枠線も色が付いていなかった。
   変数を持つセレクタに .aol-faq を足す。 */
.aol-tool,
.aol-sec,
.aol-faq{
  --aol-ink:#1c1f24;
  --aol-ink-2:#4b5159;
  --aol-muted:#767d87;
  --aol-line:#dfe3e8;
  --aol-line-2:#eef1f4;
  --aol-head:#f4f6f8;
  --aol-accent:#b32468;
  --aol-yes:#1f7a4d;
  --aol-no:#b3382e;
}

.aol-sec{
  margin:2em 0;
  color:var(--aol-ink);
  font-size:15px;
  line-height:1.8;
}

.aol-sec-h{
  font-size:17px;
  font-weight:700;
  margin:0 0 .8em;
  padding:0 0 .5em;
  border-bottom:2px solid var(--aol-accent);
  letter-spacing:.02em;
}

.aol-sec h4{
  font-size:14px;
  font-weight:700;
  margin:0 0 .4em;
}

/* 横スクロールは表の外側だけに閉じる（本文を横に伸ばさない）
   ★スマホ最優先★ 列を狭く詰めて折り返すより、横に流して1行を読ませる。
   端に薄いグラデーションを出して「まだ右がある」ことを見せる。 */
.aol-scroll{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--aol-line);
  border-radius:2px;
  background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left / 28px 100% no-repeat,
    linear-gradient(to left, #fff 30%,rgba(255,255,255,0)) right / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0   50%, rgba(28,31,36,.14), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(28,31,36,.14), transparent) right / 12px 100% no-repeat,
    #fff;
  background-attachment:local, local, scroll, scroll, local;
}
.aol-scroll::-webkit-scrollbar{height:9px;}
.aol-scroll::-webkit-scrollbar-thumb{background:#c9cfd6;border-radius:9px;}
.aol-scroll::-webkit-scrollbar-track{background:#f1f3f5;}

/* スクロールできる表の上に出す案内。スマホでだけ出す */
.aol-swipe{
  display:none;
  font-size:11.5px;
  color:var(--aol-muted);
  margin:0 0 6px;
  letter-spacing:.04em;
}
@media (max-width:700px){ .aol-swipe{display:block;} }

.aol-tbl{
  width:100%;
  border-collapse:collapse;
  /* ★ AFFINGER 既定の table{margin-bottom:20px} が効いていて、
     器の下に 20px の空白が残っていた（2026-08-28 実測。器329px / 表309px）。
     器の中に表しか無いので、外側の余白は器が持つ。
     ★ 左右は auto。器より狭い表は**中央に置く**（0 にすると左に寄る） */
  /* ★ 2026-08-28 本人指摘「表を小さくして中央寄せする必要はない。基本フル幅」。
     margin:0 auto をやめる。器いっぱいに広げるので中央寄せの出番が無い */
  margin:0!important;
  font-size:14px;
  line-height:1.7;
  background:#fff;
}
/* 器いっぱいに広げる。器より広いときだけ、表の inline min-width が効いて横スクロールになる */
.aol-scroll .aol-tbl{border:none;width:100%;}

/* ★比較表は table-layout:fixed で列幅を確定させる★
   以前 min-width:max-content と width:100% を併用していたところ、
   Chrome で表の幅が 47,835px まで膨張して1列しか見えなくなっていた（実測）。
   固定レイアウトなら列幅は thead の指定どおりになり、暴走しない。
   固定レイアウトでは **先頭行（thead）の幅指定だけ** が効く。 */
.aol-scroll .aol-compare{
  table-layout:fixed;
  width:100%;   /* 器いっぱい。狭い表を縮めて中央に置かない */
}
.aol-sec > .aol-tbl{border:1px solid var(--aol-line);border-radius:2px;}

.aol-tbl th,
.aol-tbl td{
  padding:12px 16px;
  border-bottom:1px solid var(--aol-line-2);
  text-align:left;
  vertical-align:top;
  /* 単語の途中で切らない。日本語の禁則を効かせる */
  word-break:normal;
  overflow-wrap:break-word;
  line-break:strict;
}
.aol-tbl tbody tr:last-child th,
.aol-tbl tbody tr:last-child td{border-bottom:none;}

.aol-tbl thead th{
  background:var(--aol-head);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--aol-ink-2);
  border-bottom:1px solid var(--aol-line);
  white-space:nowrap;
}

.aol-tbl tbody th[scope="row"]{
  font-weight:500;
  color:var(--aol-ink-2);
  background:#fbfcfd;
  white-space:nowrap;
  width:1%;
}
/* ★ 比較表は table-layout:fixed なので width:1% が効かず、
   colgroup の幅で切られる。そこに nowrap が乗ると**列からはみ出して
   隣のセルの文字に重なる**（2026-08-28 実測:「利用規約に成人向けの可否が
   明記されている」が次の列に重なっていた）。
   固定レイアウトの表では折り返しを許す。**詰めるのではなく、折り返す** */
.aol-compare tbody th[scope="row"]{
  white-space:normal;
  width:auto;
  line-height:1.6;
}

.aol-c{text-align:center;width:1%;white-space:nowrap;}
.aol-num{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.aol-yes{color:var(--aol-yes);font-weight:700;}
.aol-no{color:var(--aol-no);font-weight:700;}
.aol-na{color:var(--aol-muted);}

.aol-src{
  font-size:11.5px;
  color:var(--aol-muted);
  margin-left:.4em;
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
}
.aol-src:hover{color:var(--aol-accent);}

.aol-note{
  font-size:12.5px;
  line-height:1.75;
  color:var(--aol-muted);
  margin:.6em 0 0;
}

.aol-verified{
  font-size:13px;
  color:var(--aol-ink-2);
  margin:.6em 0 0;
}
.aol-verified time{font-weight:700;}

/* 料金の変遷 */
.aol-hist{margin:0 0 1.2em;}
.aol-badge{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  padding:1px 7px;
  border-radius:2px;
  background:#fbe7ef;
  color:var(--aol-accent);
  vertical-align:middle;
}
.aol-hist-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.aol-hist-list li{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:7px 12px;
  border:1px solid var(--aol-line);
  border-left:3px solid var(--aol-accent);
  border-radius:2px;
  background:#fff;
  min-width:118px;
}
.aol-hist-list time{font-size:11.5px;color:var(--aol-muted);}
.aol-hist-list .aol-num{font-size:16px;font-weight:700;}

/* 実測 */
.aol-test{
  border:1px solid var(--aol-line);
  border-radius:2px;
  padding:14px 16px;
  margin:0 0 1em;
  background:#fff;
}
.aol-test-meta{
  font-size:12px;
  color:var(--aol-muted);
  margin:0 0 .4em;
  letter-spacing:.02em;
}
.aol-test-note{font-size:13.5px;margin:0 0 .7em;color:var(--aol-ink-2);}
.aol-test .aol-tbl{border:1px solid var(--aol-line-2);}

/* 規約 */
.aol-p-allowed{color:var(--aol-yes);font-weight:700;}
.aol-p-prohibited{color:var(--aol-no);font-weight:700;}
.aol-p-limited{color:#8a5d0c;font-weight:700;}
.aol-p-unknown{color:var(--aol-muted);}

/* 変更履歴 */
.aol-changes{
  list-style:none;
  margin:0;
  padding:0;
  border-left:2px solid var(--aol-line);
}
.aol-changes li{
  position:relative;
  padding:0 0 1em 18px;
  font-size:14px;
}
.aol-changes li::before{
  content:"";
  position:absolute;
  left:-5px;top:.65em;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--aol-line);
}
.aol-changes li.aol-high::before{background:var(--aol-accent);}
.aol-changes time{
  font-size:12px;
  color:var(--aol-muted);
  margin-right:.7em;
}
.aol-chg-type{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  padding:1px 7px;
  border-radius:2px;
  background:var(--aol-head);
  color:var(--aol-ink-2);
  margin-right:.6em;
}
.aol-chg-body{display:block;margin-top:.15em;}

/* 出典 */
.aol-sources{list-style:none;margin:0;padding:0;font-size:13px;}
.aol-sources li{
  display:flex;
  flex-wrap:wrap;
  gap:.5em .8em;
  align-items:baseline;
  padding:8px 0;
  border-bottom:1px solid var(--aol-line-2);
}
.aol-sources li:last-child{border-bottom:none;}
.aol-s-type{
  font-size:11.5px;
  font-weight:700;
  padding:1px 7px;
  border-radius:2px;
  background:var(--aol-head);
  color:var(--aol-ink-2);
  white-space:nowrap;
}
.aol-sources a{word-break:break-all;}
.aol-sources time{font-size:11.5px;color:var(--aol-muted);white-space:nowrap;}

/* 比較表 */
.aol-compare thead th{text-align:center;}
.aol-compare thead th.aol-corner{text-align:left;background:var(--aol-head);}
/* 長い説明が入るセルは左寄せ。中央寄せは ○ × 金額のような短い値だけ */
.aol-compare tbody td{text-align:left;font-size:13.5px;line-height:1.75;}
.aol-compare tbody td.aol-c,
.aol-compare tbody td.aol-num{text-align:center;}
/* ★左端の列はスクロールしても残す★
   ・行見出し(th[scope=row])と、その上の角セル、そして領域の見出し行まで
     すべて同じ left:0 に貼る。1つでも外すと段差ができて崩れて見える
   ・背景は必ず不透明にする。透明だと下の行が透けて読めなくなる */
.aol-scroll .aol-tbl th[scope="row"]{
  position:sticky; left:0; z-index:2;
  background:#fbfcfd;
  box-shadow:1px 0 0 var(--aol-line-2);
}
.aol-scroll .aol-tbl thead th:first-child{
  position:sticky; left:0; z-index:4;
  background:var(--aol-head);
  box-shadow:1px 0 0 var(--aol-line);
}
/* 領域の見出し行は colspan なので left に貼らない（貼ると横に滑る）。
   代わりに行全体を色で塗って、スクロールしても区切りが分かるようにする */
.aol-scroll .aol-tbl tbody tr.aol-grp th{position:static;box-shadow:none;}
.aol-compare .aol-cmp-foot th,
.aol-compare .aol-cmp-foot td{
  font-size:12px;
  color:var(--aol-muted);
  background:#fbfcfd;
}

@media (max-width:600px){
  .aol-sec{font-size:14px;}
  .aol-sec-h{font-size:16px;}
  .aol-tbl{font-size:13.5px;}
  .aol-tbl th,.aol-tbl td{padding:10px 12px;}
  .aol-hist-list li{min-width:104px;}
  /* 基本情報の表は縦2列のままだと項目名が潰れるので、幅を決め打つ */
  .aol-facts tbody th[scope="row"]{width:34%;min-width:88px;}
  /* SP では列を少し詰める。幅は colgroup が持っているので上書きする */
  .aol-compare colgroup col:first-child{width:150px!important;}
  .aol-compare colgroup col:not(:first-child){width:170px!important;}
}

/* 領域の見出し行（漫画・音楽・小説・アダルト・実測…） */
.aol-tbl tbody tr.aol-grp th{
  background:var(--aol-accent);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  padding:6px 14px;
  text-align:left;
  white-space:nowrap;
  width:auto;
  border-bottom:none;
}

/* 図版（スクリーンショット・KV） */
.aol-fig{
  margin:14px 0 0;
  padding:0;
  border:1px solid var(--aol-line);
  border-radius:3px;
  overflow:hidden;
  background:#fff;
}
.aol-fig img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}
.aol-fig figcaption{
  display:flex;
  flex-wrap:wrap;
  gap:2px 10px;
  padding:9px 13px;
  border-top:1px solid var(--aol-line-2);
  background:#fbfcfd;
  font-size:12px;
  line-height:1.7;
  color:var(--aol-muted);
}
.aol-fig-cap{color:var(--aol-ink-2);}
.aol-fig-src{margin-left:auto;}
.aol-fig-src a{color:var(--aol-muted);text-decoration:underline;text-underline-offset:2px;}
.aol-fig-src a:hover{color:var(--aol-accent);}
/* 仮置き画像は一目で分かるようにする */
.aol-fig-ph{border-style:dashed;border-color:var(--aol-line);}
.aol-fig-ph figcaption::before{
  content:"仮置き";
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#8a5d0c;background:#fbf0da;
  padding:1px 7px;border-radius:2px;
  align-self:center;
}
@media (max-width:600px){
  .aol-fig figcaption{font-size:11.5px;padding:8px 11px;}
  .aol-fig-src{margin-left:0;}
}

/* チーム記入待ちの枠（編集権限のある人にだけ見える） */
.aol-pending{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  margin:14px 0;padding:12px 16px;
  border:1px dashed #c9a227;border-radius:3px;
  background:repeating-linear-gradient(45deg,#fdf9ee,#fdf9ee 8px,#fbf5e3 8px,#fbf5e3 16px);
}
.aol-pending-l{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:#8a5d0c;}
.aol-pending-l::before{content:"記入待ち：";font-weight:400;}
.aol-pending-n{font-size:12.5px;color:#7a6a45;line-height:1.7;}

/* FAQ */
.aol-faq{display:flex;flex-direction:column;gap:0;border:1px solid var(--aol-line);border-radius:3px;background:#fff;overflow:hidden;}
.aol-faq-item{padding:20px 22px;border-bottom:1px solid var(--aol-line-2);}
.aol-faq-item:last-child{border-bottom:none;}
.aol-faq-q{
  /* ★ 2026-08-28 本人指摘「なんで質問のH3が小さくなってるんですか」。
     font-size:15px!important で潰していた。本文の H3 は 20px（実測）。
     見出しのレベルと見た目を食い違わせない。20px に揃える */
  font-size:20px!important;font-weight:700;margin:0 0 .5em!important;padding:0 0 0 1.45em!important;
  position:relative;line-height:1.6;border:none!important;background:none!important;color:var(--aol-ink);
}
/* ★ AFFINGER の h3::before / ::after（黒い縦棒）を、この見出しでだけ消す。
   取り合いにすると content だけ相手が勝ってバッジが空になる（2026-08-28 実測）。
   競わずに消して、Q は実要素（.aol-faq-mark）で出す。 */
.entry-content .aol-faq .aol-faq-q::before,
.entry-content .aol-faq .aol-faq-q::after,
.aol-faq .aol-faq-q::before,
.aol-faq .aol-faq-q::after{content:none!important;display:none!important;}

/* ★ 見出しの余白。h3 には st-css-no を付けてあるので、
   AFFINGER 本体の見出しCSSはそもそも当たらない（PHP側のコメント参照）。
   ここは素直に指定するだけでよい。 */
.aol-faq-q{
  padding:0 0 0 1.45em;
  margin:0 0 .5em;
}
@media (max-width:600px){
  .aol-faq-q{padding-left:1.5em;}
}

.aol-faq-mark{
  position:absolute; left:0; top:.28em;
  width:1.1em; height:1.1em; line-height:1.1em; text-align:center;
  font-size:13px; font-weight:700; color:#fff;
  background:var(--aol-accent,#b32468); border-radius:2px;
}
/* ★ 2026-08-27 本人指摘「回答に A 表記はいらない」。
   Q だけ残す。質問と答えは並びで分かる */
.aol-faq-a{
  margin:0!important;padding:0;
  font-size:14px;line-height:1.85;color:var(--aol-ink-2);
}
@media (max-width:600px){
  .aol-faq-item{padding:16px 14px;}
  .aol-faq-q{font-size:17px!important;padding-left:1.5em!important;}
}

/* 現地通貨の併記 */
.aol-local{display:block;font-size:11.5px;color:var(--aol-muted);font-weight:400;margin-top:1px;}

/* 表の中身を1文でテキストにも出す（2026-08-28）。
   表が読めない場所（テキスト抽出・引用・要約）で主張が消えないようにするため。
   値はDB由来なので取り込みが増えれば自動で動く。**凡例より前に、本文と同じ大きさで置く。** */
.aol-lead-num{
  margin:.7em 0 .2em; font-size:1em; line-height:1.9;
}

/* 比較表の凡例。記号の意味を読者に示す（「—」を「×」と読ませない） */
.aol-legend{
  margin:.5em 0 0; font-size:.85em; line-height:1.9; color:#555;
}
.aol-legend .aol-yes,.aol-legend .aol-no,.aol-legend .aol-na{ font-weight:700; }

/* ── 集計表（レジストリの在庫を数えた表） ──────────────
   比較表と同じ扱いにする。**table-layout:fixed を必ず当てる。**
   当てないと colgroup の px 指定が効かず、中身の長さで列幅が決まる。
   比較表で幅 47,835px まで膨張した事故と同じ形になる。 */
/* ★ 2026-08-28 本人指摘「表を小さくして中央寄せする必要はない。基本フル幅でOK」。
   縮めて中央に置くのは取り消し。器いっぱいに広げる。
   間延びは幅ではなく**列の配分**で防ぐ —— PHP が先頭列だけ幅を指定しないので、
   table-layout:fixed の規則で**余りは全部その列に行く**。数値の列は px のまま動かない */
.aol-scroll .aol-stats{
  table-layout:fixed;
  width:100%;
  margin:0;
}
.aol-stats thead th{text-align:right;}
.aol-stats thead th.aol-corner{text-align:left;}
.aol-stats tbody td{text-align:right;font-size:13.5px;line-height:1.75;}
/* 行見出しは長くなる（"Image / Rent / RentCivit / Sell" など）。
   既定の nowrap / width:1% を打ち消して、確保した列幅の中で折り返させる。
   RULES §4「詰めるのではなく横に伸ばす」の裏返しで、
   ここは**列幅を先に確保してある**ので折り返してよい。 */
.aol-stats tbody th[scope="row"]{
  white-space:normal;
  width:auto;
  font-weight:500;
}
/* API が返す識別子はそのまま出す。訳さないと決めた値なので等幅で見せる */
.aol-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;
  font-size:12.5px;
  letter-spacing:0;
}
/* 注意を引く行（許可なし・70年先の日付など）。色で断定しない。薄い地色だけ */
.aol-stats tbody tr.aol-row-mark th[scope="row"],
.aol-stats tbody tr.aol-row-mark td{background:#fbf7ec;}
.aol-stats tbody tr.aol-row-mark th[scope="row"]{background:#faf4e6;}
.aol-flag{color:var(--aol-muted);font-size:11px;margin-left:.3em;vertical-align:super;}

/* いつ時点のデータか。**これが無い表は出さない** */
.aol-asof{
  margin:.5em 0 0;
  font-size:11.5px;
  color:var(--aol-muted);
  letter-spacing:.02em;
}
.aol-na{color:var(--aol-muted);font-weight:400;}


/* ── 記事内の図版と表（2026-08-27 本人指摘）──────────────
   ・画像がデカすぎて記事に馴染んでいなかった。**本文幅いっぱいに広げない。**
     本文幅は 916px（実測）。図版は 720px までにして中央に置く
   ・画像も表も**センタリング**する
------------------------------------------------------------ */
.aol-fig{ margin:32px auto!important; max-width:720px; text-align:center; }
.aol-fig img{
  display:block; width:100%; height:auto; margin:0 auto;
  border:1px solid var(--aol-line); border-radius:3px;
}
.aol-fig figcaption{
  margin-top:8px; font-size:12.5px; line-height:1.7;
  color:var(--aol-muted); text-align:center;
}
/* ★ 表は本文幅いっぱい（2026-08-28 本人指摘）。中央寄せの指定を外す */
.entry-content figure.wp-block-table{ margin-left:0; margin-right:0; }
.entry-content figure.wp-block-table table{ margin-left:0; margin-right:0; width:100%; }
/* ★ AFFINGER 既定のキャプションが #ccc で、白地にほぼ見えなかった（実測）。
   「いつ時点のデータか」を出す場所なので、読める濃さにする */
.entry-content figure.wp-block-table figcaption{
  /* --aol-muted は .aol-sec の中でしか定義されていない。ここは外なので実値で置く */
  margin-top:8px!important; font-size:12.5px; line-height:1.7;
  color:#767d87; text-align:left;
}
.aol-table-wrap, .aol-scroll{ margin-left:0; margin-right:0; }

@media (max-width:600px){
  .aol-fig{ margin:24px auto!important; }
  .aol-fig figcaption{ font-size:12px; }
}


/* ══════════════════════════════════════════════════════════════
   スマホの比較表（2026-08-28 本人指摘「SPの表示がとてもキモい。崩れてます」）

   何が起きていたか（390px で実測）:
     ・器 356px に対し、左端の固定列が 150px = 42% を占めていた。
       残り 206px にツールの列（170px）が1つ入るだけで、
       2つめの列は**帯状の切れ端**になって隣に見えていた
     ・領域の見出し行（colspan・マゼンタの帯）は left に貼っていないので、
       右にスクロールすると文字が左に流れて**帯だけが残る**（空の色帯に見える）
     ・角のセル「比較項目」は thead th の white-space:nowrap で
       150px の列からはみ出し、**「比」だけ見えて後ろが切れていた**

   直し方: **SPでは横に流さない。**ツールごとに積み上げる。
   固定列もスクロールも使わないので、上の3つが同時に消える。
   どの値がどのツールのものかは td の data-label（PHPが出す）で示す。
   ────────────────────────────────────────────────────────────── */
@media (max-width:600px){

  .aol-compare-sec .aol-swipe{display:none;}
  .aol-compare-sec .aol-scroll{
    overflow:visible;
    border:none;
    background:none;
  }
  .aol-compare,
  .aol-compare thead,
  .aol-compare tbody,
  .aol-compare tr,
  .aol-compare th,
  .aol-compare td{display:block;width:auto!important;}
  .aol-compare{min-width:0!important;table-layout:auto;}
  .aol-compare colgroup,
  .aol-compare thead{display:none;}

  /* 1行 = 1つの比較軸。枠で囲って、隣の軸と混ざらないようにする */
  .aol-compare tbody tr{
    border:1px solid var(--aol-line);
    border-radius:3px;
    background:#fff;
    margin:0 0 10px;
    overflow:hidden;
  }
  /* 固定列をやめる。SPでは滑らせるものが無い */
  .aol-compare tbody th[scope="row"]{
    position:static!important;
    box-shadow:none!important;
    white-space:normal;
    background:var(--aol-head);
    border-bottom:1px solid var(--aol-line);
    color:var(--aol-ink);
    font-weight:700;
    font-size:13.5px;
    line-height:1.6;
    padding:9px 12px;
  }
  .aol-compare tbody td{
    display:flex;
    gap:10px;
    align-items:baseline;
    text-align:left!important;
    font-size:13.5px;
    line-height:1.75;
    padding:9px 12px;
    border-bottom:1px solid var(--aol-line-2);
  }
  .aol-compare tbody tr td:last-child{border-bottom:none;}
  /* どのツールの値かを左に出す。PHP が data-label にツール名を入れている */
  .aol-compare tbody td::before{
    content:attr(data-label);
    flex:0 0 88px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.04em;
    line-height:1.95;
    color:var(--aol-muted);
  }
  /* 領域の見出し（漫画・音楽・アダルト…）は帯のまま、文字ごと出す */
  .aol-compare tbody tr.aol-grp{
    border:none;
    background:none;
    margin:18px 0 8px;
  }
  .aol-compare tbody tr.aol-grp th{
    position:static!important;
    white-space:normal;
    border-radius:3px;
    padding:7px 12px;
  }
  .aol-compare .aol-cmp-foot th,
  .aol-compare .aol-cmp-foot td{background:#fbfcfd;}

  /* 集計表は数字なので表のまま横に流す（並べて比べる意味がある）。
     ただし先頭列が広すぎると数字が1列も入らないので、SPでだけ詰める */
  .aol-scroll .aol-stats{width:auto;}
  .aol-stats colgroup col:first-child{width:120px!important;}
  .aol-stats tbody th[scope="row"]{font-size:12.5px;line-height:1.55;}
  .aol-stats thead th,.aol-stats tbody td{padding-left:9px;padding-right:9px;}
  /* 角のセルも折り返す。nowrap のままだと列からはみ出して切れて見える */
  .aol-tbl thead th{white-space:normal;}

  /* ★ 2〜3列の表は縮めれば画面に入る。スクロールさせない。
     470px の2列表を 356px の器で横に流していたのは、ただの手抜き */
  .aol-scroll.aol-cols-2,
  .aol-scroll.aol-cols-3{overflow-x:visible;}
  /* 横に流れない表に「← 横にスクロールできます」を出さない */
  .aol-sec:has(.aol-cols-2) .aol-swipe,
  .aol-sec:has(.aol-cols-3) .aol-swipe{display:none;}
  .aol-stats.aol-cols-2,
  .aol-stats.aol-cols-3{min-width:0!important;width:100%!important;table-layout:auto;}
  .aol-stats.aol-cols-2 colgroup,
  .aol-stats.aol-cols-3 colgroup{display:none;}
  .aol-stats.aol-cols-2 th[scope="row"],
  .aol-stats.aol-cols-3 th[scope="row"]{position:static!important;box-shadow:none!important;}
}


/* ══════════════════════════════════════════════════════════════
   2026-08-28（2回目の指摘）
   ────────────────────────────────────────────────────────────── */

/* ── 1. 横スクロールする表のヘッダが本文とズレる ───────────────
   AFFINGER 本体に **thead th{position:sticky; z-index:99998}** がある（style.css）。
   縦方向の固定を狙った指定だが、z-index が全ヘッダに乗る。
   こちらは左端の1列だけ z-index:4 で貼っていたので、
   **右にスクロールすると2列目以降のヘッダが左端のヘッダの上を通過する。**
   実測: ヘッダが「件数」から始まり、本文は「Illustrious」から始まる —— 1列ぶんズレて見えた。
   左端のヘッダを 99999 に上げて、必ずいちばん上に来るようにする。 */
.aol-scroll .aol-tbl thead th:first-child{
  position:sticky!important;
  left:0!important;
  z-index:99999!important;
  background:var(--aol-head,#f4f6f8)!important;
  box-shadow:1px 0 0 var(--aol-line,#dfe3e8);
}
/* 行見出しも、通り過ぎるセルより上に置く */
.aol-scroll .aol-tbl tbody th[scope="row"]{
  z-index:99997;
  background:#fbfcfd;
}

/* ── 2. 表が薄くて読みにくい（本人指摘）───────────────────────
   行見出しと数値を太くして、地の色も濃くする。 */
.aol-tbl thead th{font-weight:700;color:var(--aol-ink,#1c1f24);}
.aol-tbl tbody th[scope="row"]{font-weight:700;color:var(--aol-ink,#1c1f24);}
.aol-tbl tbody td{font-weight:500;color:var(--aol-ink,#1c1f24);}
.aol-tbl .aol-num{font-weight:700;}
/* 本文に直接置いた表（wp-block-table）も同じ濃さにそろえる */
.entry-content figure.wp-block-table th{font-weight:700;}
.entry-content figure.wp-block-table td:first-child{font-weight:700;}
.entry-content figure.wp-block-table td{font-weight:500;}

/* ── 3. H2 の上に間を取る（本人指摘「セクションの区別がつきにくい」）──
   既定は margin-top:20px しか無く、H3 と見分けが付かなかった。 */
.entry-content h2{margin-top:76px!important;}
.entry-content h2:first-child{margin-top:0!important;}
.entry-content h3{margin-top:44px!important;}
@media (max-width:600px){
  .entry-content h2{margin-top:56px!important;}
  .entry-content h3{margin-top:34px!important;}
}

/* ── 4. 箇条書きは必ず囲む（本人指摘「いきなりリストだけポンと出ると浮く」）──
   本文の <ul> を裸で置かない。.aol-box で囲んでから置く。 */
.aol-box{
  margin:26px 0;
  padding:20px 24px;
  background:#f8fafc;
  border:1px solid #dfe3e8;
  border-left:3px solid var(--aol-accent,#b32468);
  border-radius:3px;
}
.aol-box > :first-child{margin-top:0;}
.aol-box > :last-child{margin-bottom:0;}
.aol-box-t{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--aol-accent,#b32468);
  margin:0 0 10px;
}
.aol-box ul{
  margin:0!important;
  padding-left:1.35em!important;
  list-style:disc;
}
.aol-box li{
  margin:0 0 8px;
  line-height:1.85;
  font-size:14.5px;
}
.aol-box li:last-child{margin-bottom:0;}
@media (max-width:600px){
  .aol-box{padding:16px 16px;margin:20px 0;}
  .aol-box li{font-size:14px;}
}

/* ── 5. FAQ の囲みを外す（本人指摘「なんでそれぞれボックスで囲んでるのか謎」）──
   外枠と地色をやめて、項目の間の細い罫線だけ残す。 */
.aol-faq{
  border:none;
  border-radius:0;
  background:none;
  overflow:visible;
}
.aol-faq-item{
  padding:22px 0;
  border-bottom:1px solid var(--aol-line,#dfe3e8);
}
.aol-faq-item:first-child{padding-top:6px;}
@media (max-width:600px){
  .aol-faq-item{padding:18px 0;}
}

/* 割合の下に添える実件数。主従をはっきりさせる */
.aol-sub{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--aol-muted,#767d87);
  letter-spacing:.02em;
  margin-top:1px;
}

/* ── ライセンス比較の表は、SPでも横スクロールさせない ────────────
   この表の用は**商用の記載なしと改変不可を左右で見比べること**なので、
   比べる2列が同時に画面に入らないと意味が無い。
   ★ 列を display:none で隠すのは**やってはいけない**（実測）。
     table-layout:fixed では、隠したぶんだけ**残りのセルが colgroup の
     次の列にずれて割り当てられる**。実際に2つの割合が1セルに重なった。
     隠さずに、幅を % で詰める。 */
@media (max-width:600px){
  .aol-image-bases-lic{min-width:0!important;width:100%!important;}
  .aol-scroll:has(.aol-image-bases-lic){overflow-x:visible;}
  .aol-sec:has(.aol-image-bases-lic) .aol-swipe{display:none;}
  .aol-image-bases-lic colgroup col:nth-child(1){width:29%!important;}
  .aol-image-bases-lic colgroup col:nth-child(2){width:21%!important;}
  .aol-image-bases-lic colgroup col:nth-child(3){width:25%!important;}
  .aol-image-bases-lic colgroup col:nth-child(4){width:25%!important;}
  .aol-image-bases-lic th,.aol-image-bases-lic td{padding-left:6px!important;padding-right:6px!important;}
  .aol-image-bases-lic thead th{font-size:10.5px;letter-spacing:0;}
  .aol-image-bases-lic tbody th[scope="row"]{font-size:11.5px;}
  .aol-image-bases-lic tbody td{font-size:13px;}
  .aol-image-bases-lic .aol-sub{font-size:10px;}
}

/* ── プロンプトの見本 ────────────────────────────────────────
   <blockquote> で出すのは誤り（引用ではない）。
   AFFINGER の引用装飾（大きな引用符・薄紫の地）が付いて、
   **コピーする対象に見えなかった。**専用の枠にする。 */
.aol-prompt{
  margin:20px 0;
  padding:14px 16px;
  background:#1f2430;
  border-radius:4px;
  overflow-x:auto;
}
.aol-prompt-t{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  color:#8fa0bd;
  margin:0 0 8px;
}
.aol-prompt code{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;
  font-size:13px;
  line-height:1.85;
  color:#e6ecf5;
  background:none;
  padding:0;
  white-space:pre-wrap;
  word-break:break-word;
}
@media (max-width:600px){
  .aol-prompt{padding:12px 12px;}
  .aol-prompt code{font-size:12px;}
}

/* Civitai の原文説明。訳していないことが見て分かるように、地の文と質感を変える */
.aol-says{
  text-align:left!important;
  font-size:12.5px!important;
  font-weight:400!important;
  line-height:1.7;
  color:var(--aol-ink-2,#4b5159)!important;
}
@media (max-width:600px){ .aol-says{font-size:11.5px!important;} }

/* 本文に直接置いた表の1列目が狭すぎて、短い固有名詞まで途中で折り返していた
   （実測「Illustriou / s」）。最低幅を持たせる。 */
.entry-content figure.wp-block-table th:first-child,
.entry-content figure.wp-block-table td:first-child{ min-width:7.5em; }
@media (max-width:600px){
  .entry-content figure.wp-block-table th:first-child,
  .entry-content figure.wp-block-table td:first-child{ min-width:5.5em; }
}


/* ══════════════════════════════════════════════════════════════
   2026-08-28（3回目・4人のレビューで出た穴）
   ────────────────────────────────────────────────────────────── */

/* ── 1. 固有名詞が語の途中で割れる ──────────────────────────
   実測（390px）: 「Illu / stri / ous」「Novel / AI」「rating_questi / onable」。
   **コピーして使う文字列が途中で改行されるのは、内容の信用に直接効く。**
   日本語の禁則は残したまま、ラテン文字だけ割れないようにする。 */
/* ★ 2026-08-28 やり直し。
   `word-break:keep-all` を**セル全体**に当てたのが誤りだった。
   これは CJK の行内改行まで禁止する指定なので、読点の無い日本語の文が
   ひと塊になり、はみ出した末尾が消えた。
   実測で「公式に用意さ▮」「AI生成の写真と文▮」——**否定と可否が消えていた。**
   日本語は普通に折る。守るのはラテン文字（固有名詞とタグ）だけにする。 */
.aol-tbl th,.aol-tbl td,
.entry-content figure.wp-block-table th,
.entry-content figure.wp-block-table td{
  word-break:normal;
  overflow-wrap:break-word;
  line-break:strict;
}
/* コードとタグは語中で折らない。折れると貼り付けられない */
.aol-tbl code,
.entry-content figure.wp-block-table code{white-space:nowrap;overflow-wrap:normal;}

/* ── 2. 本文に直接置いた表も、スマホでは積み上げる ────────────
   `WRITING.md` に「SPで比較表を横に流さない」と書いておきながら、
   ショートコードの表にしか当てていなかった。**素の表で同じ穴を踏み直した。**
   PHP を通らない表なので、HTML 側で `data-label` を書いて、ここで組み替える。 */
@media (max-width:600px){
  .entry-content figure.wp-block-table table,
  .entry-content figure.wp-block-table thead,
  .entry-content figure.wp-block-table tbody,
  .entry-content figure.wp-block-table tr,
  .entry-content figure.wp-block-table th,
  .entry-content figure.wp-block-table td{display:block;width:auto!important;}
  .entry-content figure.wp-block-table thead{display:none;}
  .entry-content figure.wp-block-table table{border:none;}
  /* ★ overflow:hidden を外す（2026-08-28）。
     これが付いていたせいで、はみ出した値が**音もなく切り捨てられて**いた。
     実測: 「公式に用意されていない」→「公式に用意さ」／
     「AI生成の写真と文章は出品できる」→「AI生成の写真と文」。
     **否定と可否が消える切れ方**で、体裁ではなく事実の問題だった。 */
  .entry-content figure.wp-block-table tbody tr{
    border:1px solid #dfe3e8;
    border-radius:3px;
    background:#fff;
    margin:0 0 10px;
  }
  /* 1つめのセルが、その行の見出しになる */
  .entry-content figure.wp-block-table tbody td:first-child{
    background:#f4f6f8;
    border-bottom:1px solid #dfe3e8;
    font-weight:700;
    font-size:14px;
    padding:9px 12px;
    color:#1c1f24;
  }
  /* ★ flex をやめて縦積みにする。
     flex だと値のテキストが匿名アイテムになり min-width:auto のまま縮まないので、
     枠からはみ出したぶんが切れていた。ラベルを上、値を下に置けば起きない。 */
  .entry-content figure.wp-block-table tbody td{
    display:block;
    text-align:left;
    font-size:13.5px;
    line-height:1.75;
    padding:9px 12px;
    border-bottom:1px solid #eef1f4;
    min-width:0!important;
    overflow-wrap:anywhere;
  }
  .entry-content figure.wp-block-table tbody tr td:last-child{border-bottom:none;}
  .entry-content figure.wp-block-table tbody td:not(:first-child)::before{
    content:attr(data-label);
    display:block;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.04em;
    line-height:1.6;
    color:#767d87;
    margin-bottom:3px;
  }
  /* コードだけは、そのセルの中で横に流す。**記事全体は流さない。**
     折り返すと貼り付けたときに壊れるので、切らずにスクロールさせる。 */
  .entry-content figure.wp-block-table tbody td:has(code){overflow-x:auto;}
  .entry-content figure.wp-block-table code,
  .aol-tbl code{white-space:nowrap;overflow-wrap:normal;}
}

/* ── 3. 許可の値の表が、スマホで件数と割合を画面外に出していた ──
   実測: 4列で 670px、器は 356px。「← 横にスクロールできます」が出て、
   **この記事でいちばん効く数字（94.2%）が初期表示に1つも入らなかった。**
   Civitai の原文説明は列から外し、値の下へ回す（PHP が両方出している）。 */
.aol-says-sp{display:none;}
@media (max-width:600px){
  .aol-scroll:has(.aol-image-flags){overflow-x:visible;}
  .aol-sec:has(.aol-image-flags) .aol-swipe{display:none;}
  .aol-image-flags{min-width:0!important;width:100%!important;}
  .aol-image-flags colgroup col:nth-child(1){width:44%!important;}
  .aol-image-flags colgroup col:nth-child(2){width:0!important;}
  .aol-image-flags colgroup col:nth-child(3){width:31%!important;}
  .aol-image-flags colgroup col:nth-child(4){width:25%!important;}
  /* 2列目は幅0にしたうえで、中身も畳む。※ table-layout:auto にしないので列はずれない */
  .aol-image-flags .aol-says{
    display:block!important;
    width:0!important;
    padding:0!important;
    overflow:hidden;
    text-indent:-9999px;
    border-bottom:none!important;
  }
  .aol-image-flags th,.aol-image-flags td{padding-left:8px!important;padding-right:8px!important;}
  .aol-image-flags thead th{font-size:10.5px;}
  .aol-image-flags thead th:nth-child(2){text-indent:-9999px;overflow:hidden;}
  .aol-says-sp{
    display:block;
    font-size:10.5px;
    font-weight:400;
    line-height:1.6;
    color:#767d87;
    margin-top:3px;
    word-break:keep-all;
    overflow-wrap:break-word;
  }
}

/* 列見出しの下に添える補足（「改変不可 / マージの共有」など）。
   列名がこちらの解釈を事実として出さないための注記。 */
.aol-hd-sub{
  display:block;
  font-size:10px;
  font-weight:400;
  letter-spacing:0;
  color:var(--aol-muted,#767d87);
  margin-top:2px;
}

/* ── 4. 目次が長すぎる ──────────────────────────────────────
   実測: H2 13本 + H3 33本 で PC 約1,100px、SP 約2,300px。
   **リード直後にこれを見せると、そこが最大の離脱点になる。**
   H3 は畳む。H2 だけで流れは分かる。 */
/* 親が <ol>、子が <ul class="level-2"> という入れ子（実測）。
   `ul ul` では当たらない。レベルで指定する。 */
#rtoc-mokuji-wrapper .rtoc-mokuji.level-2,
#rtoc-mokuji-wrapper .rtoc-mokuji.level-3{display:none;}

/* ── 5. 参照リストのリンクが詰まっていて誤タップしやすい ────── */
@media (max-width:600px){
  .aol-box li{margin-bottom:12px;line-height:1.9;}
}

/* 記事末の名乗り。63万件を数えた主体を名乗らないと、引用も指名検索も生まれない */
.aol-byline{
  margin:48px 0 0;
  padding:20px 22px;
  border-top:2px solid #1c1f24;
  background:#f8fafc;
  font-size:13.5px;
  line-height:1.9;
  color:#4b5159;
}
.aol-byline p{margin:0 0 8px!important;}
.aol-byline p:last-child{margin:0!important;font-size:12.5px;color:#767d87;}
@media (max-width:600px){ .aol-byline{padding:16px 14px;font-size:13px;} }

/* 参照は20件ある。SPで2,500px を占めていたので畳む。
   <details> なので JS 無しで開ける。閉じていても本文には残る */
.aol-refs > summary{
  cursor:pointer;
  list-style:none;
  display:block;
}
.aol-refs > summary::-webkit-details-marker{display:none;}
.aol-refs > summary::after{content:" ▸";font-size:11px;}
.aol-refs[open] > summary::after{content:" ▾";}
.aol-refs[open] > summary{margin-bottom:12px;}

/* AFFINGER が summary::before で点を出しているので消す（実測で「・」が残っていた） */
.aol-refs > summary::before{content:none!important;display:none!important;}
.aol-refs > summary{padding-left:0!important;}

/* 表の中の <strong> に、テーマ側の余白が付いて句点が浮いていた
   （実測「必須 。」「禁止 。」）。表の中では余白を持たせない */
.entry-content figure.wp-block-table strong,
.aol-tbl strong{margin:0!important;padding:0!important;letter-spacing:inherit;}

/* <details> の marker が ::marker 側で残っていた（実測で「・」「▸」が二重に出る）。
   閉じているときの下の余白も落とす */
.aol-refs > summary::marker{content:"";}
.aol-refs:not([open]){padding-bottom:14px;}
.aol-refs > summary{margin:0;}

/* SPで数値表2本だけ文字が小さすぎた（実測で補足の件数が7〜8px相当）。
   独自集計がいちばん小さいのは本末転倒なので上げる。 */
@media (max-width:600px){
  .aol-image-bases-lic thead th{font-size:11.5px;}
  .aol-image-bases-lic tbody th[scope="row"]{font-size:12.5px;}
  .aol-image-bases-lic tbody td{font-size:14px;}
  .aol-image-bases-lic .aol-sub{font-size:11px;}
  .aol-image-flags thead th{font-size:11.5px;}
  .aol-image-flags tbody td{font-size:14px;}
  .aol-says-sp{font-size:11.5px;}
}

/* ──────────────────────────────────────────────────────────────
   横断の料金表 [aol_pricing_compare]
   ★ SP は §14 の直し方に合わせる（display:flex を使わない）。
     .aol-compare は古い flex 版のままなので、ここでは踏襲しない。
     flex にすると値が min-width:auto で縮まず、右端で黙って切れる。
   ────────────────────────────────────────────────────────────── */
.aol-pricecmp th,
.aol-pricecmp td{
  word-break:normal;
  overflow-wrap:break-word;
  line-break:strict;
  vertical-align:top;
}
.aol-pricecmp tbody th[scope="row"]{font-weight:700;}
.aol-pricecmp .aol-per{font-size:11.5px;color:var(--aol-muted);margin-left:2px;}
.aol-pricecmp .aol-planname{
  display:block;font-size:11.5px;font-weight:400;color:var(--aol-muted);margin-top:1px;
}
.aol-pricecmp .aol-na{color:var(--aol-muted);}
/* 「未取得」は、値が無いことではなく取れなかったことを示す。灰色で出す */
.aol-pricecmp .aol-na-badge{
  display:inline-block;
  background:var(--aol-line-2);
  color:var(--aol-muted);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  padding:1px 7px;
  border-radius:2px;
  white-space:nowrap;
}
.aol-pricecmp .aol-gap{color:var(--aol-ink-2);font-size:13px;}

@media (max-width:600px){
  .aol-pricecmp-sec .aol-swipe{display:none;}
  .aol-pricecmp-sec .aol-scroll{overflow:visible;border:none;background:none;}
  .aol-pricecmp,
  .aol-pricecmp thead,
  .aol-pricecmp tbody,
  .aol-pricecmp tr,
  .aol-pricecmp th,
  .aol-pricecmp td{display:block;width:auto!important;}
  .aol-pricecmp{min-width:0!important;table-layout:auto;}
  .aol-pricecmp colgroup,
  .aol-pricecmp thead{display:none;}

  /* 1行 = 1サービス。overflow:hidden は使わない（はみ出しを黙って捨てるため） */
  .aol-pricecmp tbody tr{
    border:1px solid var(--aol-line);
    border-radius:3px;
    background:#fff;
    margin:0 0 10px;
  }
  .aol-pricecmp tbody th[scope="row"]{
    position:static!important;
    box-shadow:none!important;
    white-space:normal;
    background:var(--aol-head);
    border-bottom:1px solid var(--aol-line);
    color:var(--aol-ink);
    font-weight:700;
    font-size:13.5px;
    padding:9px 12px;
  }
  .aol-pricecmp tbody td{
    overflow-wrap:anywhere;
    text-align:left!important;
    font-size:13.5px;
    line-height:1.75;
    padding:9px 12px;
    border-bottom:1px solid var(--aol-line-2);
  }
  .aol-pricecmp tbody tr td:last-child{border-bottom:none;}
  /* 見出しは値の上に置く。横に並べると値の幅が足りなくなる */
  .aol-pricecmp tbody td::before{
    content:attr(data-label);
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--aol-muted);
    margin-bottom:1px;
  }
  .aol-pricecmp .aol-planname{display:inline;margin-left:6px;}
}

/* ── 題材ごとのベースモデル表（[aol_image_topic]）────────────
   この表の用は「その題材に偏って多いか少ないか」を一目で見ることなので、
   全体との差に向きの色を付ける。★ 色だけに意味を持たせない。
   数値の側に必ず + / − の符号を出してあるので、色は補助。 */
.aol-up{ color:var(--aol-up,#1f7a4d); }
.aol-down{ color:var(--aol-down,#9a4a2f); }

/* この表もSPで横スクロールさせない。
   「この題材での割合」と「画像を売ってよい」が同時に見えないと主張が読めない。
   ★ 列は隠さない（aol-image-bases-lic と同じ理由。ずれる）。幅を % で詰める。 */
@media (max-width:600px){
  .aol-image-topic{min-width:0!important;width:100%!important;}
  .aol-scroll:has(.aol-image-topic){overflow-x:visible;}
  .aol-sec:has(.aol-image-topic) .aol-swipe{display:none;}
  .aol-image-topic colgroup col:nth-child(1){width:26%!important;}
  .aol-image-topic colgroup col:nth-child(2){width:18%!important;}
  .aol-image-topic colgroup col:nth-child(3){width:29%!important;}
  .aol-image-topic colgroup col:nth-child(4){width:27%!important;}
  .aol-image-topic th,.aol-image-topic td{padding-left:6px!important;padding-right:6px!important;}
  .aol-image-topic thead th{font-size:10.5px;letter-spacing:0;}
  .aol-image-topic tbody th[scope="row"]{font-size:11.5px;}
  .aol-image-topic tbody td{font-size:13px;}
  .aol-image-topic .aol-sub{font-size:10px;}
}

/* ★ 390px 実測で9セルが黙って切れていた。原因は2つ。
   (1) 「全体 46%（+18.6pt）」が1行で列幅を超えた → PHP側で2行に分けた
   (2) タグ名の <code> が white-space:nowrap のまま列幅を超えた
       → この表のタグ名だけは語の切れ目で折る。**語の途中では折らない**
         （配布サイトの検索窓にコピーして使う語なので、読めなくなると用を成さない） */
.aol-image-topic tbody th[scope="row"] code{
  white-space:normal;
  overflow-wrap:normal;
  word-break:keep-all;
}
@media (max-width:600px){
  .aol-image-topic tbody th[scope="row"] code{ font-size:10.5px; }
  .aol-image-topic .aol-sub{ line-height:1.25; }
}


/* ★ 2026-08-29 本人指示。英語の原文を引いたら訳も出す。
   原文が一次情報で、訳は読むための補助。**見た目で区別する。**
   訳を原文と同じ強さで置くと、どちらが引用なのか分からなくなる。 */
blockquote .aol-tr,
.aol-tr{
  margin:.7em 0 0;
  padding-top:.7em;
  border-top:1px dashed var(--aol-line, #dfe3e8);
  color:var(--aol-ink-2, #4b5159);
  font-size:.94em;
}
.aol-tr::before{
  content:"訳";
  display:inline-block;
  margin-right:.6em;
  padding:.05em .5em;
  border:1px solid var(--aol-line, #dfe3e8);
  border-radius:3px;
  font-size:.82em;
  color:var(--aol-muted, #767d87);
  vertical-align:.08em;
}


/* ══════════════════════════════════════════════════════════════
   図版を2枚横に並べる（系統の比較・タグ有無の比較）
   2026-08-29（14回目）に追加。単体の .aol-fig と同じ枠に収める。
   ────────────────────────────────────────────────────────────── */
.aol-fig-2{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.aol-fig-2 > figcaption{grid-column:1 / -1;}
.aol-fig-2 .aol-fig-i{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.aol-fig-2 .aol-fig-i + .aol-fig-i{border-left:1px solid var(--aol-line-2);}
.aol-fig-2 .aol-fig-i img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}
.aol-fig-2 .aol-fig-l{
  padding:8px 12px;
  border-top:1px solid var(--aol-line-2);
  background:#fbfcfd;
  font-size:12.5px;
  font-weight:700;
  line-height:1.6;
  color:var(--aol-ink-2);
}
.aol-fig-2 .aol-fig-l small{
  display:block;
  font-weight:400;
  font-size:11.5px;
  color:var(--aol-muted);
}
@media (max-width:520px){
  .aol-fig-2{grid-template-columns:1fr;}
  .aol-fig-2 .aol-fig-i + .aol-fig-i{
    border-left:none;
    border-top:1px solid var(--aol-line-2);
  }
}

/* ★ 2026-09-01 本人指示: 図はPCとSPで別のものを出す。
   SP で横長の図を縮めると文字が読めなくなるため、SP用は縦積み・大きい文字で別に作る。 */
.aol-fig-pc{display:block;}
.aol-fig-sp{display:none;}
@media (max-width:600px){
  .aol-fig-pc{display:none;}
  .aol-fig-sp{display:block;}
}

/* ══════════════════════════════════════════════════════════════
   規約の軸（2026-09-01）
   [aol_tool_policy] の読み先を v_tool_policy_axis に変えたときに足した。
   根拠（規約での書かれ方）を軸名の下に敷く。**3列にすると 375px で
   判定の列が 48px まで痩せて縦一列に潰れる**（実測）。
   ────────────────────────────────────────────────────────────── */
.aol-policy th[scope="row"] .aol-ax-basis{
  display:block;
  margin-top:.35em;
  font-size:.84em;
  font-weight:400;
  line-height:1.65;
  color:var(--aol-muted);
  white-space:normal;
}
.aol-policy td{vertical-align:top;}