/* article.css — 記事ページ共通スタイル（デザインシステム準拠）
 * 色の意図・使用ルールは content_ops_playbook.html §3 を参照。要点:
 *   白=台紙 / インク#181818=線・文字 / 橙#EA721E=反応・強調(小面積のみ) / 黄#FFD23F=マーカー(下線・タグ)
 *   クリーム#FFF6E3=hover専用(静的背景に敷かない) / グラデ=なめお(IP)要素限定 */
:root{--ink:#181818;--paper:#fff;--yellow:#FFD23F;--orange:#EA721E;--cream:#FFF6E3;--grey:#8A8A8A;--line:#ececec;
  --maru:"Zen Maru Gothic",system-ui,sans-serif;--hand:"Yusei Magic",cursive;--dot:"DotGothic16",monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--maru);color:var(--ink);background:var(--paper)}
/* ---- ヘッダーバー ---- */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(6px)}
.bar img{height:22px;image-rendering:pixelated;display:block}
.bar .back{font-family:var(--dot);font-size:11px;color:#555;text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:1px}
.bar .back:hover{color:var(--orange)}
/* ---- 記事本体 ---- */
main{max-width:720px;margin:0 auto;padding:30px 20px 60px}
.crumb{font-family:var(--dot);font-size:11px;color:var(--grey);margin-bottom:18px}
.crumb a{color:var(--grey);text-decoration:none;border-bottom:1px solid #ddd}
.crumb a:hover{color:var(--orange)}
.meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nt{font-family:var(--dot);font-size:10px;border-radius:6px;padding:3px 8px;white-space:nowrap}
.nt.kiji{background:var(--orange);color:#fff}
.nt.press{background:var(--ink);color:#fff}
.nt.jiji{background:var(--yellow);color:var(--ink)}
.date{font-family:var(--dot);font-size:11px;color:var(--grey)}
h1{font-size:clamp(21px,4.6vw,28px);line-height:1.5;margin-bottom:14px}
.lede{font-size:14px;color:#555;line-height:1.9;margin-bottom:26px}
h2{font-size:17px;margin:34px 0 12px;padding-left:10px;border-left:5px solid var(--yellow)}  /* 黄=マーカー用途 */
p{font-size:14.5px;line-height:2;margin-bottom:14px}
strong{background:linear-gradient(transparent 62%,var(--yellow) 62% 94%,transparent 94%);font-weight:700}
/* ---- 会話（なめお × AI先生） ---- */
.talk{display:flex;gap:12px;margin:16px 0;align-items:flex-start}
.talk .who{flex:0 0 46px;text-align:center}
.talk .who img{width:46px;height:46px;object-fit:contain}
.talk .who .ai{width:46px;height:46px;border-radius:10px;background:var(--ink);color:#fff;font-family:var(--dot);font-size:13px;display:flex;align-items:center;justify-content:center}
.talk .who small{display:block;font-family:var(--dot);font-size:9px;color:var(--grey);margin-top:3px}
.talk .say{flex:1;border:1.5px solid var(--ink);border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.9;background:#fff;box-shadow:2px 3px 0 rgba(24,24,24,.08)}
.talk.nameo .say{background:linear-gradient(180deg,#fff,#FFF6E0)}  /* グラデ=IP(なめお)要素限定ルール */
/* ---- なめおの語彙ノート ---- */
.note{border:2px solid var(--ink);border-radius:14px;padding:16px 18px;margin:28px 0;box-shadow:4px 5px 0 rgba(24,24,24,.1)}
.note b.cap{font-family:var(--dot);font-size:11px;color:var(--orange);letter-spacing:.12em;display:block;margin-bottom:8px}
.note dl{font-size:13.5px;line-height:1.9}
.note dt{font-weight:900;margin-top:6px}
.note dt .st{font-family:var(--dot);font-size:9.5px;color:#fff;background:var(--orange);border-radius:5px;padding:2px 6px;margin-left:8px;vertical-align:2px}
.note dt .st.todo{background:var(--grey)}
.note dd{color:#555}
/* ---- まとめ・FAQ ---- */
.matome{background:#fff;border:1.5px dashed #ccc;border-radius:12px;padding:14px 18px;margin:26px 0;font-size:13.5px;line-height:2.1}
details{border:1.5px solid var(--ink);border-radius:12px;padding:12px 16px;margin:10px 0;background:#fff;transition:background .13s}
details:hover{background:var(--cream)}  /* クリーム=hover専用ルール */
summary{cursor:pointer;font-weight:700;font-size:14px}
details p{margin:10px 0 2px;font-size:13.5px}
/* ---- 動画版プレースホルダ・関連リンク ---- */
.videoph{border:1.5px dashed #ccc;border-radius:12px;padding:18px;text-align:center;font-family:var(--dot);font-size:12px;color:var(--grey);margin:22px 0}
.rel{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:16px 0 0}
.rel a{display:block;border:1.5px solid var(--ink);border-radius:12px;padding:12px 14px;text-decoration:none;color:inherit;background:#fff;box-shadow:3px 4px 0 rgba(24,24,24,.08);transition:.13s}
.rel a:hover{transform:translate(-2px,-3px);background:var(--cream);box-shadow:5px 7px 0 rgba(234,114,30,.18)}
.rel b{font-size:14px}
.rel span{display:block;font-family:var(--dot);font-size:10px;color:var(--grey);margin-top:5px}
/* ---- シリーズ紹介（会社名の露出=認知導線） ---- */
.series{background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:13px 16px;margin:26px 0;font-size:12.5px;color:#555;line-height:1.9}
.series b.cap{font-family:var(--dot);font-size:10px;color:var(--orange);letter-spacing:.1em;display:block;margin-bottom:5px}
/* ---- フッター ---- */
footer{border-top:1px solid var(--line);padding:24px 18px 40px;text-align:center;margin-top:40px}
footer a{font-family:var(--dot);font-size:11px;color:#555;text-decoration:none;margin:0 9px}
footer a:hover{color:var(--orange)}
footer small{display:block;margin-top:10px;color:var(--grey);font-size:11px}