/* 非公式 Acacia まとめ
   ─────────────────────────────────────────────
   意匠: 公式の「魔女因子 調査対象報告書」を下敷きにした、記録・書類の見た目。
   公式の画像・ロゴ・意匠そのものは使っていない。借りたのは書式だけ。
     まのさば ◆ ／ まのむら § ／ はのうら ♡
   配色は各公式サイトの実測値:
     まのさば 背景 #14314A / 赤 #FB2626、まのむら #B21408、はのうら #7301B1
   フォント:
     本文は BIZ UDPGothic（Windows の UD 設計。可読性優先）
     見出しは BIZ UDPMincho（游明朝や MS P明朝と違い、画面で痩せない明朝）
   ───────────────────────────────────────────── */

:root{
  --bg:#0c1e2d;
  --bg2:#081726;
  --panel:#12293b;
  --panel2:#173248;
  --line:#26506e;
  --line2:#3a7099;
  --fg:#f4f7f9;
  --fg2:#d5e0e8;
  --mute:#8fa7b9;
  --accent:#ff5a5a;
  --accent-d:#c41f1f;
  --link:#ff8f8f;
  --w-manosaba:#ff5a5a;
  --w-manomura:#f5a340;
  --w-hanoura:#c08cff;
  --jp:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --display:"BIZ UDPMincho","Hiragino Mincho ProN",serif;
  --max:1180px;
  --side:262px;   /* 左メニュー。サイト名が1行に収まる幅 */
  --measure:34em;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3efe7;
  --bg2:#ebe5da;
  --panel:#fffdf9;
  --panel2:#f7f2e9;
  --line:#c8bda9;
  --line2:#a8997f;
  --fg:#17242e;
  --fg2:#2f3f4c;
  --mute:#6e7a84;
  --accent:#b81c1c;
  --accent-d:#8d1212;
  --link:#a81818;
  --w-manosaba:#b81c1c;
  --w-manomura:#8f5410;
  --w-hanoura:#5f2f9c;
  color-scheme:light;
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* 縦スクロールバーの場所を常に空けておく。短いページと長いページを行き来したとき、
     バーが出たり消えたりして横幅がずれるのを防ぐ */
  scrollbar-gutter:stable;
  overflow-y:scroll;
}
body{
  margin:0; color:var(--fg2);
  font-family:var(--jp); font-size:16px; line-height:1.95;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,90,90,.055), transparent 60%),
    radial-gradient(100% 70% at 50% 110%, rgba(0,0,0,.35), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

.shell{max-width:var(--max); margin:0 auto}
@media (min-width:920px){
  .shell{display:grid; grid-template-columns:var(--side) 1fr; align-items:start}
}

/* ───── 角の飾り（自作。黒薔薇と茨） ───── */
.frame{position:relative}
.frame::before,.frame::after{
  content:""; position:absolute; pointer-events:none; opacity:.85;
  background-repeat:no-repeat; background-size:contain;
}
.frame::before{
  top:-6px; left:-6px; width:52px; height:70px;
  background-image:url("motif/corner_tl_d.png"); background-position:left top;
}
.frame::after{
  bottom:-6px; right:-6px; width:96px; height:70px;
  background-image:url("motif/corner_br_d.png"); background-position:right bottom;
}
:root[data-theme="light"] .frame::before{background-image:url("motif/corner_tl.png"); opacity:.7}
:root[data-theme="light"] .frame::after{background-image:url("motif/corner_br.png"); opacity:.7}
@media (max-width:620px){ .frame::before,.frame::after{display:none} }

/* ───── サイドバー ───── */
.side{
  background:var(--bg2); border-right:1px solid var(--line);
  padding:18px 22px 16px; scrollbar-width:thin;
}
@media (min-width:920px){ .side{position:sticky; top:0; height:100vh; overflow-y:auto} }

.brand{display:block; margin:0 0 12px; padding:12px 12px 12px; text-decoration:none}
.brand .row{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.brand .logo{width:34px; height:34px; flex:none; border-radius:50%; border:1px solid var(--line2)}
.brand .lbl{
  font-size:10.5px; color:var(--accent); letter-spacing:.2em;
  border:1px solid var(--accent); padding:1px 7px;
}
.brand .name{
  display:block; font-family:var(--display); font-size:23px; font-weight:700;
  color:var(--fg); line-height:1.45;
}
.brand .en{display:block; font-size:9.5px; color:var(--mute); letter-spacing:.24em; margin-top:3px}
.brand:hover .name{color:var(--accent)}

.navgrp{margin:0 0 9px}
.navgrp h4{
  margin:0 0 6px; font-size:10.5px; color:var(--mute); font-weight:400;
  letter-spacing:.14em; border-bottom:1px solid var(--line); padding-bottom:4px;
}
.navgrp ul{list-style:none; margin:0; padding:0}
.navgrp a{
  display:block; padding:3px 8px; margin-left:-8px; color:var(--fg2); font-size:14px;
  border-left:2px solid transparent;
}
.navgrp a:hover{background:var(--panel2); color:var(--accent); border-left-color:var(--accent); text-decoration:none}
.mk{display:inline-block; width:1.1em; text-align:center; margin-right:6px; font-size:.9em}
.mk-manosaba{color:var(--w-manosaba)}
.mk-manomura{color:var(--w-manomura)}
.mk-hanoura{color:var(--w-hanoura)}

.themebtn{
  margin-top:6px; background:none; border:1px solid var(--line2); color:var(--mute);
  padding:4px 11px; font-size:12px; cursor:pointer; font-family:inherit;
}
.themebtn:hover{color:var(--accent); border-color:var(--accent)}

/* ───── 本体 ───── */
.main{padding:34px 32px 24px; min-width:0}
@media (max-width:919px){ .main{padding:24px 16px 16px} }

/* 見出し部＝報告書のヘッダ */
.masthead{
  margin:0 0 30px; padding:24px 24px 22px;
  border:1px solid var(--line); background:var(--panel);
}
.masthead .kicker{font-size:11px; color:var(--accent); margin:0 0 10px; letter-spacing:.18em}
.masthead h1{
  font-family:var(--display); font-size:27px; line-height:1.6; margin:0 0 14px;
  font-weight:700; color:var(--fg);
}
.masthead p{margin:0 0 8px; color:var(--fg2); font-size:14.5px; max-width:var(--measure)}
.masthead .note{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:13px; color:var(--mute); max-width:var(--measure);
}
.masthead .note strong{color:var(--fg2)}

/* 呼びかけ */
.hail{
  margin:0 0 30px; padding:15px 20px; font-size:13.5px; color:var(--mute);
  border-left:3px solid var(--accent-d); background:var(--panel); line-height:2;
}
.hail b{color:var(--fg); font-weight:700}

section{margin:0 0 38px}
.sechead{
  display:flex; align-items:baseline; gap:11px; margin:0 0 20px; padding-bottom:16px;
  border-bottom:0; position:relative;
}
.sechead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:11px;
  background:url("motif/thorn_line_d.png") no-repeat left bottom/auto 11px;
  opacity:.9;
}
:root[data-theme="light"] .sechead::after{
  background-image:url("motif/thorn_line.png"); opacity:.6;
}
.sechead h2{
  font-family:var(--display); font-size:17px; margin:0; font-weight:700; color:var(--fg);
  letter-spacing:.04em;
}
.sechead h2::before{content:"◆ "; color:var(--accent); font-size:.8em; vertical-align:1px}
.sechead span{font-size:12px; color:var(--mute); letter-spacing:.06em}

/* ───── 一覧 ───── */
.cards{border-top:1px solid var(--line)}
.card{display:flex; gap:16px; align-items:flex-start; border-bottom:1px solid var(--line); padding:17px 4px}
.card:hover{background:rgba(255,255,255,.02)}
.card .th{flex:none; width:108px; display:block; line-height:0}
.card .th img{
  width:108px; height:81px; object-fit:cover; border:1px solid var(--line); background:var(--panel);
}
.card .th:hover img{border-color:var(--accent)}
.cbody{min-width:0; flex:1}
.card h3{margin:2px 0 6px; font-size:16.5px; line-height:1.65; font-weight:700}
.card h3 a{color:var(--fg)}
.card h3 a:hover{color:var(--accent)}
.sum{margin:0; font-size:13.5px; color:var(--mute); line-height:1.85}

.meta{display:flex; flex-wrap:wrap; gap:11px; align-items:baseline; font-size:12px; margin-top:8px}
.date{color:var(--mute); font-variant-numeric:tabular-nums; letter-spacing:.05em}
.chip{color:var(--mute); font-size:12px}
.chip::before{content:"／ "; color:var(--line)}
.chip.w-manosaba{color:var(--w-manosaba)}
.chip.w-manomura{color:var(--w-manomura)}
.chip.w-hanoura{color:var(--w-hanoura)}
.chip.w-manosaba::after{content:" ◆"; font-size:.85em}
.chip.w-manomura::after{content:" §"; font-size:.85em}
.chip.w-hanoura::after{content:" ♡"; font-size:.85em}

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.tile{display:block; background:var(--bg); padding:14px 15px}
.tile b{display:block; color:var(--fg); font-size:14.5px; margin-bottom:3px; font-weight:700}
.tile span{font-size:12px; color:var(--mute); line-height:1.7}
.tile:hover{background:var(--panel2); text-decoration:none}
.tile:hover b{color:var(--accent)}

/* ───── 記事 ───── */
.post{margin-bottom:10px}
.post .doc{
  border:1px solid var(--line); background:var(--panel); padding:22px 24px 20px; margin:0 0 30px;
}
.post .meta{margin:0 0 12px}
.post h1{
  font-family:var(--display); font-size:25px; line-height:1.62; margin:0 0 10px;
  font-weight:700; color:var(--fg);
}
.period{
  margin:12px 0 0; padding-top:11px; border-top:1px dashed var(--line);
  font-size:12.5px; color:var(--mute); letter-spacing:.05em;
}

.body{font-size:16px; max-width:var(--measure)}
.body h2{
  font-family:var(--display); font-size:20px; margin:46px 0 16px; padding:0 0 10px 0;
  color:var(--fg); font-weight:700; line-height:1.6; position:relative;
  border-bottom:1px solid var(--line);
}
.body h2{border-bottom:0; padding-bottom:16px}
.body h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:url("motif/thorn_line_d.png") no-repeat left bottom/auto 10px;
  opacity:.85;
}
:root[data-theme="light"] .body h2::after{
  background-image:url("motif/thorn_line.png"); opacity:.55;
}
.body h3{font-size:16.5px; margin:42px 0 12px; color:var(--fg); font-weight:700; line-height:1.65}
.body h3::before{content:"◆ "; color:var(--accent); font-size:.78em; vertical-align:1.5px}
.body h4{font-size:15px; margin:22px 0 8px; color:var(--fg); font-weight:700}
.body p{margin:0 0 17px}
.body ul,.body ol{margin:0 0 17px; padding-left:1.5em}
.body li{margin:0 0 9px}
.body li::marker{color:var(--accent-d)}
.body a{word-break:break-all}
.body strong{color:var(--fg); font-weight:700}
.body code{background:var(--panel2); border:1px solid var(--line); padding:1px 6px; font-size:13.5px}
.body hr{border:0; border-top:1px solid var(--line); margin:34px 0}
.body blockquote{
  margin:0 0 20px; padding:14px 18px; border:1px solid var(--line); border-left:3px solid var(--accent-d);
  background:var(--panel); color:var(--mute); font-size:14.5px;
}
.body blockquote p:last-child{margin-bottom:0}
.body blockquote strong{color:var(--fg2)}

.tw{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line)}
.body table{border-collapse:collapse; width:100%; font-size:14px}
.body th,.body td{border-bottom:1px solid var(--line); padding:9px 14px; text-align:left; vertical-align:top}
.body th{
  background:var(--panel2); color:var(--mute); white-space:nowrap; font-weight:400;
  font-size:12px; letter-spacing:.08em;
}
.body tr:last-child td{border-bottom:0}
.body td a{word-break:normal}   /* 長い題名も折り返す。nowrap だと表が横に伸びる */

.embed{margin:0 0 22px; max-width:500px}
.embed .twitter-tweet{margin:0 !important}
.embed-fb{border:1px solid var(--line); border-left:3px solid var(--accent); padding:11px 16px; font-size:14.5px}
.embed-fb .lbl{display:block; font-size:12px; color:var(--mute); margin-bottom:2px}

/* ───── 紹介カード ───── */
.pcard{
  border:1px solid var(--line); border-left:2px solid var(--line2);
  padding:12px 15px; margin:0 0 9px; background:var(--panel);
}
.pcard:hover{border-left-color:var(--accent)}
.pc-head{display:flex; align-items:baseline; gap:12px; justify-content:space-between}
.pc-who{font-size:14px; font-weight:700}
.pc-who a{color:var(--link)}
.pc-num{font-size:12.5px; color:var(--mute); font-variant-numeric:tabular-nums; white-space:nowrap}
.pc-num::before{content:"♥ "; color:var(--accent)}
.pc-txt{margin:5px 0 0; font-size:14.5px; color:var(--fg2); line-height:1.8}

.back{margin:42px 0 0; font-size:14px}
.empty{color:var(--mute); font-size:14px}

.ft{
  border-top:1px solid var(--line); margin-top:52px; padding:24px 32px 32px; background:var(--bg2);
}
.ft p{margin:0 0 6px; font-size:12.5px; color:var(--mute); max-width:var(--measure)}
.ft .mini{font-size:11.5px; margin-top:12px; letter-spacing:.06em}

@media (max-width:919px){
  .side{border-right:0; border-bottom:1px solid var(--line); padding:18px 16px 14px}
  .brand{margin-bottom:14px; padding:10px 10px 12px}
  .brand .name{font-size:20px}
  .navgrp{margin:0 0 12px}
  .navgrp ul{display:flex; flex-wrap:wrap; gap:3px 5px}
  .navgrp a{padding:3px 10px; margin-left:0; border:1px solid var(--line); border-left-width:2px; font-size:13.5px}
  .masthead{padding:18px 16px 16px}
  .masthead h1{font-size:21px}
  .post .doc{padding:16px 16px 14px}
  .post h1{font-size:21px}
  .body h2{font-size:18.5px; margin-top:38px}
  .tiles{grid-template-columns:1fr 1fr}
  .ft{padding:20px 16px 26px}
}
@media (max-width:520px){
  .card{gap:12px}
  .card .th, .card .th img{width:78px}
  .card .th img{height:59px}
  .card h3{font-size:15.5px}
  .sum{display:none}
}

/* ═══════════════════════════════════════════
   自作モチーフ（fan/sozai_1.png より切り出し）
   鉄格子・蝶・薔薇・ろうそく。公式素材は使っていない。
   ═══════════════════════════════════════════ */

/* 鉄格子をページの左右の縁に薄く敷く */
body::before,body::after{
  content:""; position:fixed; top:0; bottom:0; width:74px; z-index:0;
  background:url("motif/fence_1.png") repeat-y left top;
  background-size:74px auto; opacity:.16; pointer-events:none;
}
body::before{left:0}
body::after{right:0; transform:scaleX(-1)}
:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after{opacity:.1}
@media (max-width:1320px){ body::before,body::after{display:none} }
.shell,.ft{position:relative; z-index:1}

/* 見出しの蝶 */
.sechead h2::before{
  content:""; display:inline-block; width:19px; height:14px; margin-right:9px;
  background:url("motif/butterfly_s.png") no-repeat center/contain;
  vertical-align:-1px;
}
.body h3::before{
  content:""; display:inline-block; width:16px; height:12px; margin-right:8px;
  background:url("motif/butterfly_s.png") no-repeat center/contain;
  vertical-align:-1px;
}

/* 記事ヘッダに蝶を大きく置く */
.post .doc{position:relative; overflow:hidden}
.post .doc::after{
  content:""; position:absolute; right:-18px; top:-14px; width:132px; height:100px;
  background:url("motif/butterfly_l.png") no-repeat center/contain;
  opacity:.14; pointer-events:none; transform:rotate(-12deg);
}

/* 記事の区切りを薔薇に */
:root[data-theme="light"] .body hr{background-image:url("motif/thorn_line_r.png")}
.body hr{
  border:0; height:16px; margin:40px 0;
  background:url("motif/thorn_line_r_d.png") no-repeat center/auto 16px;
  opacity:.8;
}

/* トップの呼びかけに薔薇 */
.hail{position:relative; padding-right:74px}
.hail::after{
  content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:44px; height:74px;
  background:url("motif/rose_m.png") no-repeat center/contain; opacity:.55;
}

/* 記事がないときのろうそく */
.empty{
  text-align:center; padding:34px 0 10px; color:var(--mute);
}
.empty::before{
  content:""; display:block; width:40px; height:130px; margin:0 auto 14px;
  background:url("motif/candle.png") no-repeat center/contain; opacity:.8;
}

/* 箇条書きの点を小さくして、蝶と喧嘩させない */
.body li::marker{color:var(--accent-d)}

/* ───── 大喜利ハンナさん ───── */
.ogiri{display:grid; gap:26px}
@media (min-width:1000px){ .ogiri{grid-template-columns:1fr 1fr; align-items:start} }
.og-pane{min-width:0}

.og-picks{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-bottom:8px}
.og-pick{
  padding:0; background:var(--panel); border:1px solid var(--line); cursor:pointer;
  aspect-ratio:1; overflow:hidden; display:block;
}
.og-pick img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.og-pick:hover{border-color:var(--line2)}
.og-pick.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}

#line{
  width:100%; background:var(--panel); color:var(--fg); border:1px solid var(--line);
  padding:12px 14px; font-family:inherit; font-size:16px; line-height:1.8; resize:vertical;
}
#line:focus{outline:none; border-color:var(--accent)}
.og-hint{margin:7px 0 0; font-size:12.5px; color:var(--mute)}
.og-hint strong{color:var(--fg2)}

.og-opts{display:flex; flex-wrap:wrap; gap:7px; margin:6px 0 18px}
.og-bg{
  font:inherit; font-size:12.5px; cursor:pointer; display:flex; align-items:center; gap:7px;
  padding:5px 11px 5px 6px; background:var(--panel); color:var(--fg2); border:1px solid var(--line);
}
.og-bg span{
  width:18px; height:18px; display:block; border:1px solid var(--line2); flex:none;
}
.og-bg:hover{border-color:var(--accent); color:var(--accent)}
.og-bg.on{border-color:var(--accent); background:var(--panel2); color:var(--fg); font-weight:700}
.og-btns{display:flex; flex-wrap:wrap; gap:10px}
.og-btn{
  font-family:inherit; font-size:14.5px; padding:10px 20px; cursor:pointer;
  background:var(--panel); color:var(--fg2); border:1px solid var(--line2);
}
.og-btn:hover{border-color:var(--accent); color:var(--accent)}
.og-btn.primary{background:var(--accent-d); border-color:var(--accent-d); color:#fff; font-weight:700}
.og-btn.primary:hover{background:var(--accent); border-color:var(--accent); color:#fff}

#cv{width:100%; height:auto; border:1px solid var(--line); background:#fff; display:block}

.og-pick{position:relative}
.og-lb{
  position:absolute; left:0; right:0; bottom:0; padding:3px 4px;
  font-size:10.5px; line-height:1.4; text-align:center; color:#fff;
  background:rgba(8,20,32,.82); pointer-events:none;
}
.og-pick.on .og-lb{background:var(--accent-d)}

.og-ch{
  margin:14px 0 6px; font-size:11px; color:var(--mute); letter-spacing:.12em;
  border-bottom:1px solid var(--line); padding-bottom:4px;
}
.og-ch:first-child{margin-top:0}

/* ───── 2コマ漫画まとめ ───── */
.mg{display:grid; gap:26px}
@media (min-width:900px){ .mg{grid-template-columns:250px 1fr; align-items:start} }
@media (min-width:900px){ .mg-side{position:sticky; top:18px} }

.mg-works{display:grid; gap:6px; margin-bottom:6px}
.mg-w{
  font:inherit; font-size:14px; text-align:left; cursor:pointer; padding:9px 12px;
  background:var(--panel); color:var(--fg2); border:1px solid var(--line); border-left:3px solid var(--line2);
}
.mg-w em{display:block; font-style:normal; font-size:11.5px; color:var(--mute); margin-top:2px}
.mg-w:hover{border-left-color:var(--accent)}
.mg-w.on{border-left-color:var(--accent); background:var(--panel2); color:var(--fg)}
.mg-w.on em{color:var(--fg2)}

.mg-chars{display:flex; flex-wrap:wrap; gap:5px}
.mg-c{
  font:inherit; font-size:12.5px; cursor:pointer; padding:3px 9px;
  background:transparent; color:var(--fg2); border:1px solid var(--line);
}
.mg-c em{font-style:normal; color:var(--mute); margin-left:6px; font-size:11px}
.mg-c:hover{border-color:var(--accent); color:var(--accent)}
.mg-c.on{background:var(--accent-d); border-color:var(--accent-d); color:#fff}
.mg-c.on em{color:rgba(255,255,255,.75)}
.mg-clear{
  margin-top:12px; font:inherit; font-size:12px; cursor:pointer; padding:4px 12px;
  background:none; color:var(--mute); border:1px solid var(--line2);
}
.mg-clear:hover{color:var(--accent); border-color:var(--accent)}

.mg-ep{display:flex; gap:14px; padding:14px 2px; border-bottom:1px solid var(--line)}
.mg-no{
  flex:none; width:64px; font-size:14px; color:var(--mute);
  font-variant-numeric:tabular-nums; padding-top:2px;
}
.mg-body{min-width:0; flex:1}
.mg-body h3{margin:0 0 7px; font-size:16px; color:var(--fg); font-weight:700; line-height:1.55}
.mg-body h3::before{content:none}
.mg-body h3.nosub{color:var(--fg2); font-weight:400; font-size:14.5px}
.mg-cast{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 9px}
.mg-ch{
  font-size:12.5px; color:var(--fg2); border:1px solid var(--line);
  padding:2px 9px; cursor:pointer;
}
.mg-ch em{font-style:normal; color:var(--mute); margin-left:6px; font-size:11px}
.mg-ch:hover{border-color:var(--accent)}
.mg-ch.on{background:var(--accent-d); border-color:var(--accent-d); color:#fff}
.mg-ch.on em{color:rgba(255,255,255,.75)}
.mg-none{font-size:12.5px; color:var(--mute)}
.mg-ep .meta{margin-top:0}

/* 2コマ漫画：投稿の埋め込み */
.mg-read{
  font:inherit; font-size:12px; cursor:pointer; padding:2px 11px;
  background:var(--accent-d); border:1px solid var(--accent-d); color:#fff;
}
.mg-read:hover{background:var(--accent); border-color:var(--accent)}
.mg-embed:empty{display:none}
.mg-embed{margin:12px 0 4px; max-width:560px; overflow:hidden}  /* overflow: X が float を付けるので高さを保つ */
.mg-embed .twitter-tweet{margin:0 !important; float:none !important}
.mg-loading{margin:0; padding:10px 0; font-size:13px; color:var(--mute)}

/* 作品の切り替えタブ */
.mg-tabs{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px}
.mg-tab{
  font-size:13.5px; padding:7px 14px; text-decoration:none; color:var(--fg2);
  background:var(--panel); border:1px solid var(--line); border-bottom:2px solid var(--line2);
}
.mg-tab .mk{margin-right:5px}
.mg-tab:hover{color:var(--fg); border-bottom-color:var(--accent)}
.mg-tab.on{background:var(--panel2); color:var(--fg); border-bottom-color:var(--accent); font-weight:700}

/* 作品を選ぶカード */
.mg-pick{display:grid; gap:10px; margin-bottom:26px}
@media (min-width:760px){ .mg-pick{grid-template-columns:repeat(3,1fr)} }
.mg-pick-c{
  display:block; text-decoration:none; padding:16px 16px 14px;
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line2);
}
.mg-pick-c:hover{border-left-color:var(--accent); background:var(--panel2)}
.mg-pick-m{display:block; font-size:18px; line-height:1}
.mg-pick-t{display:block; margin-top:8px; font-size:19px; font-weight:700; color:var(--fg)}
.mg-pick-s{display:block; margin-top:3px; font-size:12px; color:var(--mute)}
.mg-pick-n{display:block; margin-top:10px; font-size:12.5px; color:var(--fg2)}
.mg-pick-c.k-manosaba:hover{border-left-color:var(--w-manosaba)}
.mg-pick-c.k-manomura:hover{border-left-color:var(--w-manomura)}
.mg-pick-c.k-hanoura:hover{border-left-color:var(--w-hanoura)}

/* 回の並び替え */
.mg-sort{margin-left:auto; display:inline-flex; border:1px solid var(--line)}
.mg-sort button{
  font:inherit; font-size:12px; cursor:pointer; padding:4px 11px; letter-spacing:.04em;
  background:transparent; color:var(--mute); border:0;
}
.mg-sort button+button{border-left:1px solid var(--line)}
.mg-sort button:hover{color:var(--accent)}
.mg-sort button.on{background:var(--panel2); color:var(--fg); font-weight:700}

/* ───── 掛け合い（記事の終わりの一言） ───── */
.kake{
  margin:30px 0 26px; padding:20px 20px 12px;
  border:1px solid var(--line); background:var(--panel);
  max-width:none;
}
.kk{display:flex; gap:13px; margin:0 0 16px; align-items:flex-start}
.kk-r{flex-direction:row-reverse}
.kk-f{
  flex:none; width:62px; height:62px; border-radius:50%;
  border:1px solid var(--line2); background:#fff;
}
.kk-b{min-width:0; flex:0 1 auto; position:relative}
.kk-n{
  display:block; font-size:11px; color:var(--mute); letter-spacing:.1em;
  margin:0 0 4px; padding:0 2px;
}
.kk-r .kk-n{text-align:right}
.kk-b p{
  margin:0; padding:10px 15px; font-size:14.5px; line-height:1.85;
  background:var(--panel2); border:1px solid var(--line); color:var(--fg2);
  position:relative;
}
/* 吹き出しの角 */
.kk-b p::before{
  content:""; position:absolute; top:13px; width:0; height:0;
  border:6px solid transparent;
}
.kk-l .kk-b p::before{left:-13px; border-right-color:var(--line)}
.kk-r .kk-b p::before{right:-13px; border-left-color:var(--line)}
.kake-note{
  margin:14px 0 4px; padding-top:10px; border-top:1px dashed var(--line);
  font-size:11.5px; color:var(--mute); line-height:1.7;
}
@media (max-width:560px){
  .kake{padding:15px 14px 10px}
  .kk-f{width:48px; height:48px}
  .kk-b p{font-size:14px; padding:9px 12px}
}

/* ───── 記事の目次 ───── */
.toc{
  margin:0 0 34px; padding:16px 20px 14px;
  border:1px solid var(--line); border-left:3px solid var(--accent-d); background:var(--panel);
  max-width:var(--measure);
}
.toc-h{
  margin:0 0 9px; font-size:11px; color:var(--mute); letter-spacing:.14em;
}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.toc li{margin:0; line-height:1.75}
.toc li a{
  display:block; padding:4px 0 4px 20px; font-size:14px; color:var(--fg2);
  position:relative; border-bottom:1px solid transparent;
}
.toc li a::before{
  content:"▸"; position:absolute; left:2px; color:var(--accent-d); font-size:11px; top:6px;
}
.toc li a:hover{color:var(--accent); text-decoration:none; border-bottom-color:var(--line)}
.toc li.s a{padding-left:36px; font-size:13px; color:var(--mute)}
.toc li.s a::before{content:"・"; left:20px; color:var(--line2)}

/* 見出しに飛んだとき、上にくっつかないように */
.body h2,.body h3{scroll-margin-top:16px}

/* 記事の書き出し。最初の段落だけ少し大きく */
.body > p:first-child{font-size:16.5px; color:var(--fg2); margin-bottom:22px}

/* 埋め込みで画像が切れることの断り */
.mg-cut{
  margin:6px 0 0; font-size:12px; color:var(--mute); line-height:1.7;
  max-width:550px;
}
.mg-cut a{margin-left:4px}

/* 数字・日付だけのセルは折り返さない */
.body td.nw{white-space:nowrap}