/* アニ名人 解説記事（/lp/guide/）用の追加スタイル。
   kw.css を読み込んだ上で重ねる＝トーンは下層LPと同じまま、記事に要る部品だけ足す。
   ⚠️kw.css の既存クラス（.hero .steps .step .faq .related .closing .cta .note）とは名前を分けてある。 */

/* 更新日・出典の明示＝「最新情報が売り」の記事なので目立つ位置に置く */
.g-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:"DotGothic16",monospace;
  font-size:.88rem;color:var(--ink-soft);margin:10px 0 0}
.g-meta .g-badge{background:var(--teal-soft);border:2px solid var(--ink);border-radius:999px;padding:2px 10px;
  font-weight:700;color:var(--ink)}
.g-meta .g-badge.new{background:var(--yellow)}

/* 目次 */
.g-toc{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:16px 18px;margin:26px 0}
.g-toc h2{font-size:.95rem;margin:0 0 10px}
.g-toc ol{margin:0;padding-left:1.2em}
.g-toc li{font-weight:700;font-size:.9rem;margin:6px 0}
.g-toc a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink-soft)}
.g-toc a:hover{border-bottom-color:var(--pink)}

/* 本文の段落・小見出し（記事は文章量が多いので行間を広めに） */
.g-body p{margin:14px 0;line-height:2}
.g-body h3{font-size:1.02rem;font-weight:900;margin:26px 0 8px;padding-left:12px;border-left:6px solid var(--teal)}
.g-body ul{margin:12px 0 12px 1.2em}
.g-body li{margin:7px 0;line-height:1.9;font-weight:700}
.g-body strong{background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%)}

/* 比較表（スマホでは横スクロール） */
.g-tablewrap{overflow-x:auto;margin:18px 0;border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);background:var(--card)}
table.g-table{border-collapse:collapse;width:100%;min-width:380px;font-size:.94rem}
table.g-table th,table.g-table td{padding:10px 12px;border-bottom:2px solid rgba(43,36,64,.12);text-align:left;
  vertical-align:top;line-height:1.7}
table.g-table thead th{background:var(--purple-soft);font-weight:900;white-space:nowrap;
  border-bottom:2.5px solid var(--ink)}
table.g-table tbody tr:last-child td{border-bottom:0}
table.g-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.g-table .pick{background:var(--teal-soft)}

/* 要点ボックス・注意ボックス */
.g-point{background:var(--teal-soft);border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px 16px;margin:20px 0}
.g-point>b:first-child{display:block;margin-bottom:6px}
.g-warn>b:first-child{display:block;margin-bottom:6px}
.g-warn{background:var(--pink-soft);border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px 16px;margin:20px 0}

/* 出典（一次情報のURLを必ず添える＝記事の信頼性の担保） */
.g-src{font-size:.88rem;color:var(--ink-soft);font-weight:700;margin:8px 0 0}
.g-src a{color:var(--pink)}
.g-refs{margin-top:30px;padding-top:18px;border-top:3px dashed var(--ink)}
.g-refs h2{font-size:1rem}
.g-refs ol{margin:10px 0 0 1.2em;font-size:.8rem;color:var(--ink-soft)}
.g-refs li{margin:6px 0;word-break:break-all}

/* 記事一覧（/lp/guide/）のカード */
.g-list{display:grid;gap:14px;margin:22px 0}
.g-card{display:block;background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px 18px;text-decoration:none;transition:transform .08s}
.g-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.g-card b{display:block;font-size:1rem;line-height:1.6}
.g-card span{display:block;font-size:.9rem;color:var(--ink-soft);font-weight:700;margin-top:6px;line-height:1.8}
.g-card .g-date{font-family:"DotGothic16",monospace;font-size:.85rem;margin-top:8px}

/* 動画へのリンクカード（YouTubeの埋め込みではなくサムネ＋リンク＝外部スクリプトを読まない） */
.g-embed{margin:20px 0}
.g-video{display:block;background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:12px;text-decoration:none;transition:transform .08s}
.g-video:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.g-video img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:10px}
.g-video-t{display:block;font-weight:900;font-size:.95rem;line-height:1.6;margin-top:10px;color:var(--ink)}
.g-video-s{display:block;font-family:"DotGothic16",monospace;font-size:.85rem;color:var(--ink-soft);margin-top:4px}

/* 要点ボックスの中に置くCTA */
.g-cta-in{margin-top:12px}
.g-cta-in .cta{display:inline-block;font-size:.9rem;padding:10px 18px}

/* h3の下の階層（対処法1／対処法2など） */
.g-body h4{font-size:.95rem;font-weight:900;margin:20px 0 6px;padding:4px 12px;
  background:var(--purple-soft);border-radius:8px;display:inline-block}

/* 締めのブロック内のリード文（.note は白カードなので暗背景では使えない） */
.closing-lead{color:var(--paper);font-weight:700;font-size:.88rem;line-height:1.9;
  max-width:34em;margin:10px auto 18px;opacity:.9}

/* ===== 図（2026-09-21 新設）=====
   設計の根拠＝02.再利用ノウハウ\図解・ビジュアル設計\
   ①図のタイトルはラベルでなく言い切る文 ②Web記事は口頭説明が付かないので図だけで自己完結
   ③実物 ＞ 概念図 ④要素は5個まで */
.g-fig{margin:24px 0}
.g-fig-t{display:block;font-weight:900;font-size:.94rem;line-height:1.7;margin-bottom:10px;
  padding-left:12px;border-left:6px solid var(--pink)}
.g-fig-c{display:block;font-size:.88rem;color:var(--ink-soft);font-weight:700;margin-top:8px;line-height:1.8}

/* モデル比較カード（⚠️他社ロゴは載せない＝商標。名称はテキストで書く） */
.g-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.g-model{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px}
.g-model.pick{background:var(--teal-soft)}
.g-model-n{display:block;font-weight:900;font-size:1.05rem;letter-spacing:.01em}
.g-model-m{display:block;font-family:"DotGothic16",monospace;font-size:.88rem;color:var(--ink-soft);margin-top:2px}
.g-model-r{display:block;font-size:.96rem;font-weight:700;margin-top:8px;line-height:1.7}
.g-model-b{display:inline-block;font-family:"DotGothic16",monospace;font-size:.88rem;
  border:2px solid var(--ink);border-radius:999px;padding:1px 8px;margin-top:8px;background:var(--paper)}
.g-model.pick .g-model-b{background:var(--ink);color:#fff;border-color:var(--ink)}

/* キャラバンクの実物グリッド */
.g-bank{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--card);
  border:2.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:12px}
.g-bank img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border:2px solid var(--ink);border-radius:8px;background:var(--paper)}
@media(max-width:480px){.g-bank{grid-template-columns:repeat(4,1fr);gap:5px;padding:8px}}

/* 概念図（SVG）の外枠 */
.g-svg{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px}
.g-svg svg{display:block;width:100%;height:auto}

/* ===== 流れ図（2026-09-21・5巡目レビューで作り直し）=====
   ⚠️横長SVGの中に文字を置くと、幅375pxでは文字が5px前後まで潰れる（Codex指摘・実害）。
      → 絵だけをSVGにし、文字はHTML側に出してCSSでサイズを保つ。スマホでは縦に積む。 */
.g-flow{display:flex;flex-direction:column;gap:12px}
.g-flow-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.g-flow-box{flex:1 1 150px;min-width:130px;background:var(--card);border:2.5px solid var(--ink);
  border-radius:12px;padding:12px 14px}
.g-flow-box.bad{background:var(--pink-soft)}
.g-flow-box.good{background:var(--teal-soft)}
.g-flow-box b{display:block;font-size:1rem;line-height:1.6}
.g-flow-box span{display:block;font-family:"DotGothic16",monospace;font-size:.88rem;color:var(--ink-soft);margin-top:4px}
.g-flow-ar{flex:0 0 auto;font-weight:900;font-size:1.2rem;color:var(--ink)}
.g-flow-note{flex:1 1 100%;font-size:.92rem;font-weight:700;padding-left:2px}
.g-flow-note.bad{color:#c2185b}
.g-flow-note.good{color:#00796b}
@media(max-width:560px){.g-flow-ar{width:100%;text-align:center;transform:rotate(90deg);margin:-4px 0}}

/* 構図の対比（絵はSVG・ラベルはHTML） */
.g-compo{display:flex;gap:12px;flex-wrap:wrap}
.g-compo>div{flex:1 1 200px;background:var(--card);border:2.5px solid var(--ink);border-radius:12px;padding:12px}
.g-compo h5{margin:0 0 8px;font-size:.95rem;font-weight:900;text-align:center;color:var(--ink-soft)}
.g-compo svg{display:block;width:100%;height:auto;max-height:150px}
.g-compo p{margin:8px 0 0;font-size:.95rem;font-weight:700;text-align:center;line-height:1.6}
.g-compo .bad{color:#c2185b}
.g-compo .good{color:#00796b}