/* ネタ帳の1語のページ・スマホ版（assets/neta-sp.js が描く。幅760px以下で、main に .nsp が付いたときだけ効く）
   2026-10-10 利用者が採用した Claude Design の改善案（「く、くる」）の寸法・色。PC には効かない。
   色：白・黒・#0E0E10、紫 #9146FF #772CE8 #C9A8FF #D2B8FF #F6F0FF #E4DAFF、黄 #FFD24D（「有力な説」と山場の日付だけ）。角は丸めない（丸は人のアイコンだけ） */
@media (max-width:760px){
html.nsp-on body{background:#fff}
main.nsp{--d1:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;--t1:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  max-width:none;padding:0!important;margin:0;color:#000;font-family:var(--t1);overflow-x:clip}
main.nsp h1,main.nsp h2,main.nsp h3{text-wrap-style:balance}
main.nsp p,main.nsp li{text-wrap-style:pretty}
main.nsp h2{font:400 22px/1.3 var(--d1);margin:0 0 12px;letter-spacing:0}
main.nsp h2::before{display:none}
main.nsp a{color:inherit}
main.nsp iframe{border:0;display:block}
.nsp-pad{padding:26px 16px 6px}
.nsp .sub{margin:-8px 0 14px;font:700 13px/1.6 var(--t1);color:#6E6E73}

/* ② 表紙 */
.nsp-hero{position:relative;height:150px;background:#000 center 40%/cover no-repeat;overflow:hidden;color:#fff}
.nsp-hero.two{height:auto;min-height:150px}
.nsp-hero.noimg{background:#0E0E10}
.nsp-hero .nsp-pre{display:none}
.nsp-hero .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,.15) 100%)}
.nsp-hero .pu{position:absolute;inset:0;background:#9146FF;mix-blend-mode:multiply;opacity:0;animation:nspPulse 2.4s ease-in-out infinite}
@keyframes nspPulse{0%,100%{opacity:0}50%{opacity:.35}}
.nsp-hero .chat{position:absolute;right:0;top:0;bottom:0;width:132px;background:linear-gradient(90deg,rgba(14,14,16,0),rgba(14,14,16,.82) 22%);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:0 6px 10px 16px;box-sizing:border-box}
.nsp-hero .cl{font:700 12px/1.35 var(--t1);white-space:nowrap;overflow:hidden;text-overflow:clip;flex:none}
.nsp-hero .cl i{display:inline-block;width:7px;height:7px;border-radius:50%!important;margin-right:6px;vertical-align:1px}
.nsp-hero .cl.in{animation:nspChat .3s ease-out both}
@keyframes nspChat{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.nsp-hero .tx{position:absolute;left:16px;right:140px;bottom:14px}
.nsp-hero.two .tx{position:relative;left:auto;right:auto;padding:46px 140px 14px 16px}
.nsp-hero h1{margin:0;font-family:var(--d1);font-weight:400;line-height:1.05;white-space:nowrap;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.nsp-hero.two h1{white-space:normal;text-wrap-mode:wrap}
.nsp-hero h1 span{background:linear-gradient(transparent 62%,#9146FF 62%);padding:0 4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nsp-hero .now{margin-top:8px;display:flex;align-items:center;gap:6px;font:700 12px var(--t1);color:#E4DAFF}
.nsp-hero .now i{width:8px;height:8px;border-radius:50%!important;background:#9146FF;flex:none}

/* ③ 答え */
.nsp-ans{padding:16px 16px 0}
.nsp-ans .a1{margin:0;font:900 19px/1.6 var(--t1);text-wrap-style:balance}
.nsp-ans .a2{margin:6px 0 0;font:500 14px/1.8 var(--t1);color:#333}
.nsp-acts{display:flex;gap:8px;margin-top:14px}
.nsp .nsp-copy{appearance:none;border-radius:0;cursor:pointer;transition:background .2s,color .2s;background:#fff;color:#000}
.nsp-acts .nsp-copy{flex:1;min-width:0;height:48px;border:3px solid #000;font:900 14px var(--t1);padding:0 8px}
.nsp .nsp-copy.on{background:#9146FF;color:#fff;border-color:#9146FF}
.nsp .nsp-post{display:flex;align-items:center;justify-content:center;gap:8px;background:#000;color:#fff!important;text-decoration:none;font:900 14px var(--t1)}
.nsp .nsp-post svg{width:15px;height:15px;flex:none}
.nsp-acts .nsp-post{flex:none;width:118px;height:48px}
.nsp .nsp-post:hover,.nsp .nsp-post:active{background:#9146FF}
.nsp-veil{margin:16px 16px 0}.nsp-veil img{display:block;width:100%;height:auto}.nsp-veil figcaption{font:500 12px/1.7 var(--t1);color:#555;margin-top:6px}
.nsp-bhead .bhead{margin:0}

/* ④ 30秒でわかる3枚 */
.nsp-dg{padding:26px 0 0}
.nsp-dg h2{margin:0 16px 12px!important}
.nsp-dg .rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 4px;scroll-padding:0 16px;scrollbar-width:none}
.nsp-dg .rail::-webkit-scrollbar{display:none}
.nsp-dg a{flex:0 0 74%;scroll-snap-align:start;display:flex;flex-direction:column;border:3px solid #000;background:#000;color:#fff!important;text-decoration:none;transition:border-color .2s}
.nsp-dg a:hover,.nsp-dg a:active{border-color:#9146FF}
.nsp-dg .im{position:relative;aspect-ratio:16/9;background:#222 center/cover no-repeat}
.nsp-dg .y{position:absolute;left:0;top:0;background:#9146FF;font:400 18px/1 var(--d1);padding:7px 10px;color:#fff}
.nsp-dg .bd{padding:10px 12px 12px}
.nsp-dg .bd b{display:block;font:400 19px/1.25 var(--d1)}
.nsp-dg .bd span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:700 12px/1.6 var(--t1);color:#C9C9D0;margin-top:4px}

/* ⑤ 元の場面（黒い地） */
.nsp-dark{margin-top:28px;background:#0E0E10;color:#fff;padding:22px 16px}
.nsp-dark+.nsp-dark{margin-top:0;border-top:3px solid #2E2E36}
.nsp-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.nsp-h h2{margin:0!important;color:#fff}
.nsp-h .tg{flex:none;font:900 11px var(--t1);padding:3px 8px}
.nsp-h .tg.c{background:#FFD24D;color:#0E0E10}
.nsp-h .tg.ok{background:#9146FF;color:#fff}
.nsp-dark .ds{margin:8px 0 12px;font:700 13px/1.7 var(--t1);color:#C9C9D0}
.nsp-pl{position:relative;aspect-ratio:16/9;background:#111;border:3px solid #fff}
.nsp-pl iframe{position:absolute;inset:0;width:100%;height:100%}
.nsp-note iframe{width:100%;height:420px;background:#fff}
.nsp-dark .cap{margin-top:6px;font:700 11px/1.6 var(--t1);color:#8A8A96}
.nsp-bh{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.nsp-bh b{font:900 14px var(--t1)}
.nsp-replay{appearance:none;border:0;background:none;color:#C9A8FF;font:900 13px var(--t1);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 0}
.nsp-beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.nsp-beats li{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1)}
.nsp-beats li.on{opacity:1;transform:none}
.nsp-beats button{appearance:none;border:0;background:none;color:inherit;padding:2px 0;margin:0;display:flex;align-items:baseline;gap:10px;text-align:left;cursor:pointer;width:100%;border-radius:0}
.nsp-beats .tm{flex:none;width:38px;font:800 12px Inter,var(--t1);color:#8A8A96}
.nsp-beats .ln{font:900 16px/1.3 var(--t1);color:#BDBDC4;min-width:0}
.nsp-beats .ln small{display:block;font:700 11px var(--t1);color:#8A8A96}
.nsp-beats .lv-m .ln{font-size:19px;color:#fff}
.nsp-beats .lv-k .ln{font-size:24px;color:#C9A8FF}
.nsp-beats button:active .ln{color:#C9A8FF}
.nsp-beats .nsp-boom{margin-top:6px;font-family:var(--d1);font-weight:400;line-height:1.05;color:#fff;background:#9146FF;padding:12px 14px;align-self:flex-start;max-width:100%;box-sizing:border-box;transform:scale(.4) rotate(-6deg)}
.nsp-beats .nsp-boom.on{transform:rotate(-2deg);animation:nspBoom .55s cubic-bezier(.2,.8,.2,1) both,nspShake .4s .55s 2}
@keyframes nspBoom{0%{transform:scale(.4) rotate(-6deg);opacity:0}55%{transform:scale(1.12) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(-2deg);opacity:1}}
@keyframes nspShake{0%,100%{transform:rotate(-2deg)}20%{transform:translate(-3px,1px) rotate(-2deg)}40%{transform:translate(3px,-1px) rotate(-2deg)}60%{transform:translate(-2px,0) rotate(-2deg)}80%{transform:translate(2px,1px) rotate(-2deg)}}
.nsp-dark .ln2{margin:12px 0 0;font:500 12px/1.7 var(--t1);color:#8A8A96}
.nsp-cw{padding:12px 16px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nsp-cw small{font:700 12px var(--t1);color:#6E6E73;width:100%}
.nsp-cw span{font:400 15px/1.2 var(--d1);border:2px solid #000;padding:4px 8px}
/* 固有の欄（戦績・写真・詠唱・階段）は neta.html の部品のまま、余白だけ合わせる */
.nsp-x{padding:22px 16px 0}
.nsp-x>.sec{margin:0}

/* ⑥ いつ打つの？ */
.nsp-vibe .v1{margin:0 0 14px;font:900 17px/1.7 var(--t1)}
.nsp-vibe .v1>span{background:linear-gradient(transparent 60%,#D2B8FF 60%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nsp-vibe .bx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.nsp-vibe .bx>div{border:3px solid #000;padding:10px 10px 12px;display:flex;flex-direction:column;gap:3px;font:400 17px/1.2 var(--d1);min-width:0}
.nsp-vibe .bx b{display:block;font:900 12px var(--t1);color:#772CE8;margin-bottom:5px}
.nsp-vibe .bx span{overflow-wrap:anywhere}
.nsp-vibe .v2{margin:10px 0 0;font:500 13px/1.7 var(--t1);color:#555}

/* ⑦ どう広まった？（縦の年表） */
.nsp-tl{padding-top:28px}
.nsp-tl ol{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.nsp-tl .ln0,.nsp-tl .ln1{position:absolute;left:8px;top:6px;width:4px}
.nsp-tl .ln0{bottom:6px;background:#EEEEF2}
.nsp-tl .ln1{height:0;background:#9146FF;transition:height 2.4s cubic-bezier(.4,.1,.2,1)}
.nsp-tl ol.on .ln1{height:calc(100% - 12px)}
.nsp-tl li{position:relative;padding:0 0 18px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.nsp-tl li.on{opacity:1;transform:none}
.nsp-tl .yy{font:400 30px/1 var(--d1);margin:0 0 8px}
.nsp-tl .dot{position:absolute;left:-24px;top:4px;width:16px;height:16px;background:#fff;border:3px solid #000;box-sizing:border-box;border-radius:0!important}
.nsp-tl .yy+.dot{top:42px}
.nsp-tl .k-chat .dot,.nsp-tl .k-origin .dot{background:#9146FF}
.nsp-tl .k-clip .dot{background:#D2B8FF}
.nsp-tl .big .dot{background:#FFD24D}
.nsp-tl .wh{display:block;font:900 12px/1.5 var(--t1);color:#772CE8}
.nsp-tl .wh span{font-weight:700}
.nsp-tl .w{display:block;font:500 14px/1.7 var(--t1);margin-top:3px}
.nsp-tl .k-origin .cd{border:3px solid #9146FF;background:#F6F0FF;padding:10px 12px 12px}
.nsp-tl .k-origin .w{font:900 15px/1.6 var(--t1)}
.nsp-tl .big .cd{border:3px solid #000;background:#000;color:#fff;padding:10px 12px 12px}
.nsp-tl .big .wh{color:#FFD24D}
.nsp-tl .big .w{font:400 19px/1.4 var(--d1)}
.nsp-tl .em{position:relative;width:100%;aspect-ratio:16/9;background:#111;margin-bottom:8px}
.nsp-tl .em.sh{width:62%;aspect-ratio:9/16}
.nsp-tl .em iframe{position:absolute;inset:0;width:100%;height:100%;background:#fff}
.nsp-tl .em.x{aspect-ratio:auto;background:none;min-height:0}
.nsp-tl .em.x .twitter-tweet{margin:0!important}
.nsp-tl .em.x blockquote{margin:0;border:2px solid #DADADF;padding:10px 12px;font:700 13px var(--t1)}
.nsp-tl .big .em.x blockquote{border-color:#444}

/* ⑧ 誰の配信で流れる？ */
.nsp-who{border-top:3px solid #000;margin-top:10px;padding-top:22px}
.nsp-who .r{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;margin-bottom:10px}
.nsp-who .r>img,.nsp-who .r>.ph{width:38px;height:38px;border-radius:50%!important;border:2px solid #DADADF;box-sizing:border-box;object-fit:cover;display:grid;place-items:center;font:900 15px var(--t1);background:#EEE;font-style:normal}
.nsp-who .r.live>img,.nsp-who .r.live>.ph{border:3px solid #9146FF}
.nsp-who .nm{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:900 13px var(--t1)}
.nsp-who .nm span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsp-who .nm b{font:400 15px var(--d1);flex:none}
.nsp-who .no1 .nm b{color:#9146FF}
.nsp-who .br{height:10px;background:#EEEEF2;margin-top:4px}
.nsp-who .br i{display:block;height:100%;width:0;background:#000;transition:width 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--j) * .08s)}
.nsp-who .top .br i{background:#9146FF}
.nsp-who.on .br i{width:var(--w)}

/* ⑨ まだ分かっていないこと */
.nsp-q{border:3px solid #000;background:#F6F0FF;padding:16px 14px;position:relative}
.nsp-q .qm{position:absolute;right:-3px;top:-3px;background:#000;color:#fff;font:400 26px/1 var(--d1);padding:6px 10px}
.nsp-q h2{font-size:20px!important;margin:0 0 8px!important;padding-right:40px}
.nsp-q p{margin:0;font:500 14px/1.8 var(--t1)}
.nsp-q a{display:inline-flex;align-items:center;margin-top:12px;height:44px;padding:0 16px;background:#000;color:#fff!important;text-decoration:none;font:900 14px var(--t1)}
.nsp-q a:hover,.nsp-q a:active{background:#9146FF}

/* ⑩ 次はこのネタ */
.nsp-next{padding-bottom:10px}
.nsp-next .g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.nsp-next .g a{display:flex;flex-direction:column;text-decoration:none;border:3px solid #000;background:#000;color:#fff!important;transition:background .2s,border-color .2s,transform .2s;min-width:0}
.nsp-next .g a:hover,.nsp-next .g a:active{background:#9146FF;border-color:#9146FF;transform:translateY(-3px)}
.nsp-next .im{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#111 center/cover no-repeat;border-bottom:3px solid #000;font:400 18px var(--d1)}
.nsp-next .nm{padding:8px 9px 10px;container-type:inline-size}
.nsp-next .nm b{display:block;font-family:var(--d1);font-weight:400;line-height:1.2;white-space:nowrap;overflow:hidden}
.nsp-next .all{display:flex;align-items:center;justify-content:center;margin-top:12px;height:50px;border:3px solid #000;text-decoration:none;font:900 15px var(--t1);background:#fff}
.nsp-next .all:hover,.nsp-next .all:active{background:#000;color:#fff}

/* ⑪ 出典・集計のしかた */
.nsp-fine{margin:14px 16px 0;border-top:2px solid #000;padding:12px 0 24px}
.nsp-fine summary{cursor:pointer;font:900 14px var(--t1);padding:6px 0}
.nsp-fine ul{margin:8px 0 0;padding-left:18px;font:500 12px/1.8 var(--t1);color:#6E6E73}
.nsp-fine li{overflow-wrap:anywhere}
.nsp-fine a{color:#772CE8!important}
.nsp-fine p{font:500 12px var(--t1);color:#6E6E73}

/* ⑫ 下に固定の帯 */
.nsp-bar{position:fixed;left:0;right:0;bottom:60px;z-index:1000;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;background:#fff;border-top:3px solid #000;
  transform:translateY(calc(100% + 70px));transition:transform .3s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.nsp-bar.on{transform:none;visibility:visible}
.nsp-bar b{flex:1;min-width:0;font:400 20px/1 var(--d1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsp-bar .nsp-copy{height:38px;padding:0 12px;border:2px solid #000;font:900 12px var(--t1);flex:none}
.nsp-bar .nsp-post{height:38px;padding:0 12px;font-size:12px;gap:6px;flex:none}
.nsp-bar .nsp-post svg{width:13px;height:13px}
html.nsp-on .gf{padding-bottom:90px}
}
/* 「動きを減らす」設定の人には動かさず、最後の形をそのまま出す */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .nsp-hero .pu{display:none}
  .nsp-beats li,.nsp-tl li,.nsp-tl .ln1,.nsp-who .br i,.nsp-bar,.nsp-dg a,.nsp-next .g a{transition:none!important;animation:none!important}
  .nsp-beats .nsp-boom.on{animation:none!important;transform:rotate(-2deg)}
  .nsp-next .g a:hover{transform:none}
}