/* 漫画ユートピア(旧 漫画チップ) 0.3: テーマ(システム/ライト/ダーク)・PC の並べ方・縦スクロールの案内 */
:root{--ink:#111;--sub:#6b6862;--line:#e8e4dc;--page:#f6f4ef;--card:#fff;--soft:#efece5;--chipbg:#fff;--head:rgba(246,244,239,.92);--acc:#ff4a3d;--acc2:#ffb02e;--btn:#111;--btnfg:#fff;--btnsh:#000;--reader:#fff;
--serif:"Shippori Mincho B1","Noto Serif CJK JP","Hiragino Mincho ProN",serif;--dela:"Dela Gothic One","Noto Sans CJK JP",sans-serif;--zen:"Zen Kaku Gothic New","Noto Sans CJK JP","Hiragino Sans",sans-serif;color-scheme:light}
html[data-theme=dark]{--ink:#f2efe8;--sub:#a6a29a;--line:#2e2d2b;--page:#121212;--card:#1c1c1c;--soft:#252525;--chipbg:#1c1c1c;--head:rgba(18,18,18,.9);--btn:#f2efe8;--btnfg:#111;--btnsh:#8a8780;--reader:#161616;color-scheme:dark}
@media (prefers-color-scheme:dark){html:not([data-theme=light]){--ink:#f2efe8;--sub:#a6a29a;--line:#2e2d2b;--page:#121212;--card:#1c1c1c;--soft:#252525;--chipbg:#1c1c1c;--head:rgba(18,18,18,.9);--btn:#f2efe8;--btnfg:#111;--btnsh:#8a8780;--reader:#161616;color-scheme:dark}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--page);color:var(--ink);font-family:var(--zen);font-weight:500;transition:background .2s,color .2s}
a{color:inherit;text-decoration:none}img{max-width:100%}button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1120px;margin:0 auto}
/* ヘッダー */
.top{position:sticky;top:0;z-index:20;background:var(--head);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:58px;padding:0 16px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--dela);font-size:22px;letter-spacing:.04em}
.brand .chipmark{width:30px;height:30px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.brand:hover .chipmark{transform:rotate(200deg)}
.brand.small{font-size:16px}.brand.small .chipmark{width:22px;height:22px}
/* ロゴ(lib/brand.mjs) */
.brand .mk{width:36px;height:36px;flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.brand:hover .mk{transform:rotate(-12deg) scale(1.06)}
.brand .wm{height:37px;width:auto;display:block}
@media (max-width:420px){.brand{gap:5px}.brand .mk{width:30px;height:30px}.brand .wm{height:29px}.top nav{gap:10px}}
.brand.big{gap:10px}.brand.big .mk{width:46px;height:46px}.brand.big .wm{height:44px}
.top nav{margin-left:auto;display:flex;align-items:center;gap:14px;font-weight:900;font-size:14px}
/* テーマ切り替え */
.theme{display:inline-flex;padding:3px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.theme button{display:flex;align-items:center;gap:4px;border:0;background:transparent;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:900;cursor:pointer;color:var(--sub)}
.theme button svg{width:15px;height:15px}
.theme button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.theme .lb{display:none}@media (min-width:900px){.theme .lb{display:inline}}
/* 見出し */
.sec{padding:8px 16px 26px}.sh{font-family:var(--dela);font-weight:400;font-size:20px;letter-spacing:.06em;margin:18px 0 12px;display:flex;align-items:center}
.sh::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc);box-shadow:14px 0 0 var(--acc2);margin-right:24px}
/* 縦スクロールの説明(トップと作品のページ) */
.howto{display:flex;align-items:center;gap:10px;margin:4px 16px 0;padding:10px 14px;border-radius:14px;background:var(--card);border:1px dashed var(--line);font-size:13px;font-weight:700;color:var(--sub)}
.howto svg{flex:none;width:22px;height:30px}
/* おすすめ */
.heros{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 16px 18px;scrollbar-width:none}.heros::-webkit-scrollbar{display:none}
.hero-card{flex:0 0 86%;scroll-snap-align:center;background:var(--card);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);border:2px solid var(--ink);display:flex;flex-direction:column}
.hc-art{aspect-ratio:4/3.4;overflow:hidden;border-bottom:2px solid var(--ink)}.hc-art img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;transition:transform .6s ease}
.hero-card:hover .hc-art img{transform:scale(1.03)}
.hc-body{padding:14px 16px 18px}.hc-logo{display:block;width:80%;height:auto;max-height:150px;object-fit:contain;object-position:left;background:#fff;border-radius:10px;padding:4px 8px}
.hc-body h2{margin:0;font-family:var(--serif);font-weight:800;font-size:26px}
.hc-tag{margin:8px 0 10px;font-family:var(--serif);font-weight:800;font-size:15px;color:var(--sub)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.chips span{font-size:12px;font-weight:900;padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--chipbg)}
.chips .free{background:var(--ink);color:var(--page)}
/* ボタン */
.btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 20px 16px 26px;border-radius:999px;background:var(--btn);color:var(--btnfg);font-family:var(--dela);font-size:19px;letter-spacing:.08em;box-shadow:0 5px 0 var(--btnsh),0 14px 26px rgba(0,0,0,.22);transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.btn i{font-style:normal;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--acc);color:#fff;font-family:var(--zen);font-weight:900;transition:transform .2s}
.btn:hover i{transform:translateX(4px)}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--btnsh),0 5px 10px rgba(0,0,0,.2)}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}@media (prefers-reduced-motion:reduce){.btn::after{animation:none}}
.btn.sm{display:inline-flex;font-size:15px;padding:10px 14px 10px 20px}.btn.sm i{width:28px;height:28px}
.btn.inv{background:#fff;color:#111;box-shadow:0 5px 0 #bbb,0 14px 26px rgba(0,0,0,.4)}
/* 新しく読める話 */
.rows{display:grid;gap:10px}.row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px;background:var(--card);border-radius:14px;border:1px solid var(--line)}
.row img{width:64px;height:64px;border-radius:10px;object-fit:cover}.rs{font-size:12px;color:var(--sub);font-weight:700}.rt{font-family:var(--serif);font-weight:800;font-size:16px;margin-top:2px}
.pill{font-size:12px;font-weight:900;padding:4px 10px;border-radius:999px;background:var(--acc);color:#fff;white-space:nowrap}.pill.lock{background:var(--ink);color:var(--page)}
/* 作品一覧(スマホ・タブレットは縦の一覧。おすすめの横スクロールは PC だけ) */
.sh small{margin-left:auto;font-family:var(--zen);font-weight:700;font-size:13px;letter-spacing:0;color:var(--sub)}
.works{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wk{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:start;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;transition:transform .15s;-webkit-tap-highlight-color:transparent}.wk:active{transform:scale(.985)}
.wk-cv{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--soft)}.wk-cv img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.wk-st{position:absolute;left:6px;top:6px;font-size:11px;font-weight:900;padding:2px 8px;border-radius:999px;background:#111;color:#fff}.wk-st.done{background:#fff;color:#111;box-shadow:0 0 0 1.5px #111}
.wk-b{min-width:0;padding-top:2px}.wk-g{font-size:11px;font-weight:900;color:var(--sub);letter-spacing:.04em}
.wk-t{word-break:auto-phrase;margin:3px 0 0;font-family:var(--serif);font-weight:800;font-size:17px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wk-s{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wk-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:900}
.wk-new{padding:2px 8px;border-radius:999px;background:var(--acc);color:#fff}.wk-n{margin-top:3px;font-size:12px;font-weight:700;color:var(--sub)}
@media (max-width:999px){.home .heros{display:none}.home .twocol{display:flex;flex-direction:column}.home #list{order:-1}}
@media (min-width:640px) and (max-width:999px){.works{grid-template-columns:1fr 1fr}}
/* 作品のページ */
.s-hero{position:relative;background:#000}.s-art{display:block;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 12%}
.s-shade{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.15) 70%,var(--page) 99%)}
.s-head{position:absolute;left:0;right:0;bottom:6px;padding:0 16px}.s-logo{display:block;width:92%;max-height:180px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.s-head h1{margin:0;font-family:var(--serif);font-weight:800;font-size:34px}.s-sub{margin:4px 0 0;font-family:var(--serif);font-weight:800}
.s-info{padding:12px 16px 4px}.s-log{font-size:15px;line-height:1.95;margin:4px 0 18px}.s-meta{text-align:center;font-size:13px;color:var(--sub);font-weight:700;margin:12px 0 0}
.eps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.epi{display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:center;padding:8px;background:var(--card);border-radius:14px;border:1px solid var(--line)}
.epi.read{opacity:.62}.epi.read .en::after{content:" 既読";color:var(--acc)}.epi.soon{opacity:.45}
.et img,.et .ph{width:84px;height:84px;border-radius:10px;object-fit:cover;display:block;background:var(--soft)}
.en{font-family:var(--dela);font-size:12px;letter-spacing:.1em;color:var(--sub)}.ett{font-family:var(--serif);font-weight:800;font-size:17px;margin-top:2px}.ens{font-size:12px;color:var(--sub)}
/* 読む画面 */
body.reader{background:var(--reader)}.prog{position:fixed;top:0;left:0;height:3px;background:var(--acc);width:0;z-index:30}
.bar{position:sticky;top:0;z-index:20;background:var(--head);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .in{display:flex;align-items:center;gap:8px;height:54px;padding:0 10px;max-width:760px;margin:0 auto}
.bar .x{display:grid;place-items:center;width:40px;height:40px;font-size:24px;flex:none}.bar .ttl{display:flex;flex-direction:column;min-width:0;line-height:1.25;flex:1}
.bar .s{font-family:var(--serif);font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar .e{font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip{max-width:760px;margin:0 auto;background:#fff}.strip img{display:block;width:100%;height:auto}
.end{max-width:760px;margin:0 auto;padding:56px 22px 120px;text-align:center}.end.dark{background:#050505;color:#fff}.end.light{background:#fff;color:#111}
.tz{font-family:var(--serif);font-weight:800;font-size:44px;letter-spacing:.42em;padding-left:.42em}.rule{width:46px;height:3px;background:currentColor;margin:22px auto 28px}
.next{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;text-align:left;margin:0 0 20px;padding:12px;border:2px solid currentColor;border-radius:18px}
.next img{width:104px;height:104px;border-radius:12px;object-fit:cover;display:block}.nl{font-family:var(--dela);font-size:13px;letter-spacing:.1em;opacity:.75}
.nn{margin-top:4px;font-family:var(--serif);font-weight:800;font-size:24px;line-height:1.25}.nt{margin-top:6px;font-family:var(--serif);font-weight:800;font-size:14px;line-height:1.6;opacity:.85}
.row2{display:flex;gap:10px;margin-top:16px}.row2 .sm{flex:1;padding:13px 10px;border:2px solid currentColor;border-radius:999px;font-weight:900;font-size:15px}
.fin{font-family:var(--serif);font-weight:800;font-size:104px;line-height:1}.fin-logo{display:block;width:86%;margin:16px auto 0}.soon-n{font-weight:900;opacity:.7}
.nav{position:fixed;left:50%;bottom:0;z-index:20;width:100%;max-width:760px;transform:translate(-50%,0);display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--head);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);transition:transform .25s}
.nav.hide{transform:translate(-50%,110%)}.nav a{padding:14px 0;text-align:center;font-weight:900;font-size:14px}.nav a.off{opacity:.3;pointer-events:none}
/* 縦スクロールの案内(読む画面を開いたとき) */
.guide{white-space:nowrap;position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));z-index:25;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;border-radius:999px;background:rgba(17,17,17,.9);color:#fff;font-weight:900;font-size:15px;letter-spacing:.04em;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:opacity .35s,transform .35s;pointer-events:none}
.guide.gone{opacity:0;transform:translate(-50%,16px)}
.guide .ph{position:relative;width:26px;height:40px;border:2.5px solid #fff;border-radius:7px;flex:none}
.guide .ph::after{content:"";position:absolute;left:50%;top:7px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--acc);animation:sw 1.4s ease-in-out infinite}
.guide .ar{display:block;font-size:20px;line-height:1;animation:bob 1.4s ease-in-out infinite}
@keyframes sw{0%{top:6px;opacity:1}70%{top:24px;opacity:0}100%{top:24px;opacity:0}}@keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.guide .ph::after,.guide .ar{animation:none}}
.foot{padding:30px 16px 60px;text-align:center;color:var(--sub);font-size:13px}.foot .brand{justify-content:center;color:var(--ink)}.foot .cr{font-size:11px}
.nf,.lockv{padding:80px 20px;text-align:center}
/* PC */
@media (min-width:760px){.hero-card{flex-basis:62%}}
@media (min-width:1000px){
 .home .heros{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding:20px 16px 26px}.home .hero-card{flex:none}
 .home .twocol{display:grid;grid-template-columns:1fr 1.25fr;gap:28px;align-items:start}
 .works{grid-template-columns:repeat(3,1fr);gap:14px}
 .wk{grid-template-columns:1fr;gap:0;padding:0;overflow:hidden}.wk-cv{border-radius:0}.wk-b{padding:10px 12px 14px}.wk-t{font-size:16px}
 .series .sgrid{display:grid;grid-template-columns:440px 1fr;gap:36px;align-items:start;padding:24px 16px 0}
 .series .s-hero{position:sticky;top:78px;border-radius:22px;overflow:hidden;border:2px solid var(--ink)}
 .series .s-art{aspect-ratio:3/4}
 .series .s-info,.series .sec{padding-left:0;padding-right:0}
 .series .s-info{padding-top:0}
 .series .eps{grid-template-columns:1fr 1fr}
 .series .howto{margin:0 0 6px}
}
/* ダークでは題字を白抜きに */
html[data-theme=dark] .hc-logo{background:transparent;filter:invert(1)}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .hc-logo{background:transparent;filter:invert(1)}}
.hc-logo.color{background:transparent!important;filter:none!important;padding:0}

/* その話の料理(姉妹サイト 旬と台所へ) */
.dish{display:block;margin:26px 0 8px;padding:16px 20px 15px;border-radius:14px;background:#fbf6ea;color:#3b2a1c;text-align:left;border:2px solid #e6d9be;text-decoration:none}
.dish .dl{display:block;font-size:12px;font-weight:900;letter-spacing:.14em;color:#b07a1c}
.dish .dn{display:block;font-family:var(--serif);font-weight:800;font-size:23px;line-height:1.35;margin:4px 0 3px}
.dish .ds{display:block;font-size:14px;font-weight:700;color:#8a5a2b}
.dish:hover .ds{text-decoration:underline;text-underline-offset:3px}
.s-note{text-align:center;font-size:13px;color:var(--sub);font-weight:700;margin:8px 0 0}.s-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* 0.4 販売: アカウント・鍵の画面・ポイント・読み放題・規約(2026-11-07) */
button.btn{border:0;cursor:pointer;font-family:var(--dela)}
form>button.btn:not(.sm){width:100%}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--ink);font-family:var(--zen);font-weight:900;font-size:15px;letter-spacing:.02em}
.btn.ghost::after{display:none}.btn.ghost i{background:var(--soft);color:var(--ink)}
.acct{display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 8px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:13px;white-space:nowrap}
.acct svg{width:17px;height:17px}.acct small{font-size:10px;margin-left:1px;color:var(--sub)}
@media (max-width:420px){.acct span{max-width:5.5em;overflow:hidden;text-overflow:ellipsis}.top nav>a[href="/#list"]{display:none}}
.notice{background:#fff4d6;color:#5a3d00;font-size:13px;font-weight:700;border-bottom:1px solid #f0d58a}
.notice .wrap{padding:8px 16px}.notice a{text-decoration:underline;text-underline-offset:3px;margin-left:6px}
html[data-theme=dark] .notice{background:#3a2e10;color:#ffe2a0;border-color:#5a4718}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .notice{background:#3a2e10;color:#ffe2a0;border-color:#5a4718}}
.pill.own{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.pill.sub{background:#2e7d5b;color:#fff}
.plan-band{display:flex;align-items:center;gap:12px;margin:12px 16px 0;padding:14px 16px;border-radius:16px;background:var(--ink);color:var(--page)}
.plan-band b{font-family:var(--dela);font-weight:400;font-size:18px;letter-spacing:.06em;flex:none}
.plan-band span{font-size:13px;font-weight:700;flex:1}.plan-band i{font-style:normal;font-weight:900;font-size:20px}
/* 鍵の画面 */
.lockv{padding:28px 16px 60px}
.lk-card{max-width:460px;margin:0 auto;text-align:center;background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:24px 20px 22px;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.lk-th{width:120px;height:120px;object-fit:cover;border-radius:18px;display:block;margin:0 auto 12px}
.lk-s{font-size:13px;font-weight:900;color:var(--sub)}
.lk-card h1{font-family:var(--serif);font-weight:800;font-size:22px;line-height:1.4;margin:4px 0 14px}
.lk-price{margin:0 0 14px;font-weight:900}.lk-price b{font-family:var(--dela);font-weight:400;font-size:38px;margin-right:3px}
.lk-bal{font-size:13px;font-weight:700;color:var(--sub);margin:10px 0 0}.lk-bal.short{color:var(--acc);margin:0 0 12px}
.lk-msg{background:#ffe9e6;color:#9b1c10;border-radius:12px;padding:8px 12px;font-size:14px;font-weight:700}
.lk-sub{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 14px;border-radius:16px;border:2px dashed var(--line);text-align:left}
.lk-sub b{font-family:var(--dela);font-weight:400;flex:none}.lk-sub span{flex:1;font-size:13px;font-weight:700;color:var(--sub)}.lk-sub i{font-style:normal;font-weight:900}
.lk-fine,.ac-fine{font-size:12px;color:var(--sub);font-weight:700;line-height:1.7;margin:14px 0 0}
.lk-fine a,.ac-fine a,.ac-lead a{text-decoration:underline;text-underline-offset:3px}
/* アカウント */
.ac{max-width:560px;padding:20px 16px 50px;display:grid;gap:14px}
.ac-card{background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:20px 18px}
.ac-card h1{font-family:var(--dela);font-weight:400;font-size:22px;letter-spacing:.04em;margin:0 0 10px}
.ac-card h2{font-family:var(--dela);font-weight:400;font-size:17px;letter-spacing:.04em;margin:0 0 10px}
.ac-lead{font-size:14px;font-weight:700;line-height:1.8;margin:0 0 14px}
.ac-mail{margin:0;font-weight:900;word-break:break-all}
.ac-form{display:grid;gap:14px}
.ac-form label{display:grid;gap:6px;font-size:13px;font-weight:900;color:var(--sub)}
.ac-form input{font:inherit;font-size:17px;font-weight:700;padding:13px 14px;border-radius:14px;border:2px solid var(--line);background:var(--page);color:var(--ink)}
.ac-form input:focus{outline:none;border-color:var(--ink)}
.ac-form input.code{font-family:var(--dela);letter-spacing:.3em;font-size:24px;text-align:center}
.ac-err{background:#ffe9e6;color:#9b1c10;border-radius:12px;padding:10px 12px;font-size:14px;font-weight:700;margin:0 0 12px}
.ac-ok{background:#e3f4ea;color:#1d5c3c;border-radius:14px;padding:12px 14px;font-size:14px;font-weight:900;margin:0}
.ac-note{font-size:13px;font-weight:700;color:var(--sub)}
.ac-bal{margin:0 0 10px;font-weight:900}.ac-bal b{font-family:var(--dela);font-weight:400;font-size:40px;margin-right:4px}
.ac-price{margin:0 0 12px;font-weight:900}.ac-price b{font-family:var(--dela);font-weight:400;font-size:40px}
.ac-t{width:100%;border-collapse:collapse;font-size:13px;margin:0 0 12px}.ac-t th,.ac-t td{text-align:left;padding:7px 4px;border-bottom:1px solid var(--line)}.ac-t th{color:var(--sub);font-size:12px}
.ac-li{margin:0 0 16px;padding-left:1.2em;font-size:14px;font-weight:700;line-height:1.8}
.ac-own{list-style:none;margin:0;padding:0;display:grid;gap:10px}.ac-own li{display:grid;gap:4px}.ac-own li>a{font-weight:900}
.ac-own span{display:flex;flex-wrap:wrap;gap:6px}.ac-own span a{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--soft)}
.ac-card form+a.btn,.ac-card form+form{margin-top:10px}
.packs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pk{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:16px;border:2px solid var(--line)}
.pk-pt{flex:1;font-weight:900}.pk-pt b{font-family:var(--dela);font-weight:400;font-size:24px;margin-right:2px}.pk-pt small{display:block;font-size:11px;color:var(--sub)}
.pk .btn.sm{min-width:108px;justify-content:center;padding:10px 16px}.pk .btn::after{display:none}
/* 規約 */
.lg{max-width:760px;padding:24px 18px 60px;line-height:1.9;font-size:14px;font-weight:500}
.lg h1{font-family:var(--dela);font-weight:400;font-size:24px}.lg h2{font-size:16px;font-weight:900;margin:26px 0 6px}
.lg-t{width:100%;border-collapse:collapse}.lg-t th,.lg-t td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--line)}.lg-t th{width:30%;font-weight:900;white-space:nowrap}
@media (max-width:560px){.lg-t th,.lg-t td{display:block;width:auto}.lg-t th{border-bottom:0;padding-bottom:0}}
.lg-d{color:var(--sub);margin-top:30px}
.foot .legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:12px}.foot .legal a{text-decoration:underline;text-underline-offset:3px}
.pvbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#1d4ed8;color:#fff;text-align:center;font-size:12px;font-weight:900;padding:6px}
.next small,.btn small{font-family:var(--zen);font-size:12px;font-weight:900;margin-left:6px;opacity:.8}
/* AI作者(仕様 MC-44)と 4 コマの別枠(MC-46) */
.au-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:5px 12px 5px 5px;border-radius:999px;border:2px solid var(--ink);background:var(--card);font-size:13px}
.au-chip .au-ic{width:30px;height:30px}.au-chip b{font-family:var(--serif);font-weight:800;font-size:15px}.au-by{color:var(--sub);font-weight:900}
.au-ic{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft);border:2px solid var(--ink);display:block}
.au-tag{font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--ink);color:var(--page);white-space:nowrap}
.au-card{display:flex;gap:16px;align-items:flex-start;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;scroll-margin-top:80px}
.au-b{min-width:0}.au-n{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.au-n b{font-family:var(--serif);font-weight:800;font-size:20px}.au-r{font-size:12px;color:var(--sub);font-weight:700;margin-top:1px}
.au-l{margin:10px 0 6px;font-family:var(--serif);font-weight:800;font-size:16px;line-height:1.6}.au-bio{margin:0 0 10px;font-size:14px;line-height:1.85;color:var(--sub)}
.au-st{display:flex;flex-wrap:wrap;gap:6px}.au-st span{font-size:11.5px;font-weight:900;padding:3px 9px;border-radius:999px;border:1.5px solid var(--line)}
.au-w{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--serif);font-weight:800;font-size:15px;text-decoration:underline;text-underline-offset:4px}.au-w i{font-style:normal}
.au-note,.au-lead{font-size:12.5px;line-height:1.8;color:var(--sub);margin:12px 2px 0}.au-note a{margin-left:6px;text-decoration:underline;text-underline-offset:3px;color:var(--ink);font-weight:900}
.au-lead{font-size:14px;margin:0 0 16px}.au-list{display:grid;gap:12px}@media (min-width:900px){.au-list{grid-template-columns:1fr 1fr}}
.au-cr{margin:22px 0 0;font-size:13px;font-weight:900;opacity:.8}.au-cr span{margin-left:6px;font-size:10.5px;padding:2px 7px;border-radius:999px;border:1.5px solid currentColor}
.wk-a{margin-top:6px;font-size:12px;font-weight:900}.wk-a span{margin-left:5px;font-size:10px;padding:1px 6px;border-radius:999px;border:1.5px solid var(--line);color:var(--sub)}
.au-l,.au-bio,.au-lead,.au-note,.ft-ai,.kb-head span,.kp-memo{word-break:auto-phrase}.ft-ai{font-size:12px;line-height:1.8}.ft-ai a{white-space:nowrap;margin-left:6px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:420px){.top nav>a[href="/4koma"]{font-size:13px}.kb-head span{display:none}.au-card{padding:14px;gap:12px}.au-card .au-ic{width:64px;height:64px}}
.kb-head{display:flex;align-items:center;gap:10px;margin:-2px 0 12px;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--card)}.kb-head b{font-family:var(--serif);font-weight:800;font-size:17px;white-space:nowrap}.kb-head span{font-size:12.5px;color:var(--sub);font-weight:700;min-width:0}.kb-head i{margin-left:auto;font-style:normal;font-weight:900}
.kb-row{display:grid;grid-auto-flow:column;grid-auto-columns:42%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
@media (min-width:640px){.kb-row{grid-auto-columns:23%}}@media (min-width:1000px){.kb-row{grid-auto-columns:15%}}
.kb-it{scroll-snap-align:start;display:block}.kb-it img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--line);display:block;background:var(--soft)}.kb-it span{display:block;margin-top:6px;font-size:12px;font-weight:900;line-height:1.45}
.kl{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (min-width:640px){.kl{grid-template-columns:repeat(4,1fr)}}
.kl a{display:block}.kl img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--line);display:block}.kn{display:block;margin-top:6px;font-family:var(--dela);font-size:11px;letter-spacing:.08em;color:var(--sub)}.kt{display:block;font-family:var(--serif);font-weight:800;font-size:15px}
.kp{max-width:640px;padding:12px 16px 40px}.kp-s{font-size:13px;font-weight:900;color:var(--sub)}.kp h1{font-family:var(--serif);font-weight:800;font-size:22px;margin:4px 0 14px}
.kp-img{width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line);background:#fff}
.kp-memo{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:var(--card);border:1px dashed var(--line);font-size:14px;line-height:1.8}.kp-memo b{display:block;font-size:12px;color:var(--sub);margin-bottom:2px}
.kp-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:22px}.kp-nav a:last-child{text-align:right}.kp-x{margin-top:16px;text-align:center;font-size:13px}.kp-x a{text-decoration:underline;text-underline-offset:3px;color:var(--sub)}
@media (max-width:420px){.kb-row{grid-auto-columns:31%}}
/* ===== リニューアル(仕様 MC-47・P-47・2026-11-08): 作品の棚・看板・ランキング・下のタブ ===== */
.v2 main.wrap{padding-bottom:8px}
/* 看板: スマホでも横にめくる */
.hero{margin:14px 0 2px}.hero-track{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.hero-track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:center;display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);border-radius:20px;overflow:hidden;transition:transform .15s}.slide:active{transform:scale(.985)}
.sl-art{display:block;aspect-ratio:4/3.3;overflow:hidden;border-bottom:2px solid var(--ink);background:var(--soft)}.sl-art img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block}
.sl-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}.sl-logo{display:block;width:78%;height:auto;max-height:96px;object-fit:contain;object-position:left;background:#fff;border-radius:8px;padding:3px 6px}.sl-logo.color{background:transparent;padding:0}
.sl-t{font-family:var(--serif);font-weight:800;font-size:19px;line-height:1.35}.sl-tag{font-family:var(--serif);font-weight:800;font-size:14px;color:var(--sub);line-height:1.5;word-break:auto-phrase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.sl-chips i{font-style:normal;font-size:11.5px;font-weight:900;padding:2px 9px;border:1.5px solid var(--ink);border-radius:999px}.sl-chips .cv-b{position:static}
.hero-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}.hero-dots i{width:6px;height:6px;border-radius:999px;background:var(--line);transition:width .25s,background .25s}.hero-dots i.on{width:18px;background:var(--acc)}
@media (min-width:640px){.hero-track{grid-auto-columns:46%}}@media (min-width:1000px){.hero-track{grid-auto-columns:32%}.hero-dots{display:none}}
/* 棚 */
.shelf{padding:34px 16px 4px}.sh-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}.sh-h h2{margin:0;font-family:var(--dela);font-weight:400;font-size:20px;letter-spacing:.05em}
.sh-note,.more{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--sub);white-space:nowrap}.more{color:var(--ink);font-weight:900}.more i{font-style:normal;margin-left:2px}
.sh-row{display:grid;grid-auto-flow:column;grid-auto-columns:41%;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:none}.sh-row::-webkit-scrollbar{display:none}.sh-row>*{scroll-snap-align:start}
@media (min-width:640px){.sh-row{grid-auto-columns:19%}}@media (min-width:1000px){.sh-row{grid-auto-columns:14%}}
.sh-empty{margin:0;padding:16px;border:1px dashed var(--line);border-radius:14px;font-size:13px;font-weight:700;color:var(--sub);text-align:center}
.cv{display:block;min-width:0;-webkit-tap-highlight-color:transparent}.cv-img{position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}.cv-img img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.cv:hover .cv-img img{transform:scale(1.04)}}.cv:active .cv-img{transform:scale(.98)}
.cv-b{position:absolute;left:6px;top:6px;font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:2px 7px;border-radius:6px;line-height:1.4}.cv-b.up{background:var(--acc);color:#fff}.cv-b.new{background:#111;color:#fff}.cv-b.done{background:#fff;color:#111;box-shadow:0 0 0 1.5px #111}
.cv-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:9px;font-weight:900;font-size:14.5px;line-height:1.5;word-break:auto-phrase}.cv-s{display:block;margin-top:3px;font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 14px}@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1000px){.grid{grid-template-columns:repeat(5,1fr);gap:24px 16px}}
/* ランキング */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:12px}@media (min-width:1000px){.rank{grid-template-columns:1fr 1fr}}
.rank a{display:grid;grid-template-columns:34px 72px 1fr;gap:14px;align-items:center;padding:10px 12px 10px 6px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.rk{font-family:var(--dela);font-weight:400;font-size:28px;text-align:center;color:var(--sub)}.rank li:nth-child(-n+3) .rk{color:var(--acc)}
.rank img{width:72px;height:96px;object-fit:cover;object-position:50% 15%;border-radius:8px;display:block}.rk-b{min-width:0;display:flex;flex-direction:column;gap:2px}
.rk-t{font-family:var(--serif);font-weight:800;font-size:15.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:auto-phrase}.rk-s{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rk-g{font-size:11px;font-weight:700;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ジャンルの札 */
.gchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.gchips::-webkit-scrollbar{display:none}.gchips.wrapchips{flex-wrap:wrap;overflow:visible;margin:0 0 18px}
.gchips a,.chips a{flex:none;font-size:13px;font-weight:900;padding:6px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--chipbg);white-space:nowrap}.chips a{font-size:12px;padding:4px 10px}.gchips a[aria-current=page]{background:var(--ink);color:var(--page)}
.pg-h{font-family:var(--dela);font-weight:400;font-size:24px;letter-spacing:.05em;margin:20px 16px 12px}.pg-lead{margin:-4px 16px 16px;font-size:13.5px;color:var(--sub);font-weight:700}
.searchp main.wrap>.grid,.searchp .q-count{margin-left:16px;margin-right:16px}
.sp-head{margin:0 16px 8px}.sp-head .pg-h{margin-left:0;margin-right:0}
.q-box{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:0 16px;height:52px;border-radius:999px;border:2px solid var(--ink);background:var(--card);max-width:620px}.q-box svg{width:20px;height:20px;flex:none;color:var(--sub)}
.q-box input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;font-weight:700;color:var(--ink);outline:none}.q-box input::placeholder{color:var(--sub);font-weight:500}.q-box:focus-within{box-shadow:0 0 0 4px rgba(255,74,61,.18)}
.gchips small{margin-left:6px;font-size:11px;font-weight:700;opacity:.55}
.gmore{margin:-8px 0 12px}.gmore summary{cursor:pointer;display:inline-block;padding:6px 2px;font-size:13px;font-weight:900;color:var(--sub);text-decoration:underline;text-underline-offset:3px;list-style:none}.gmore summary::-webkit-details-marker{display:none}.gmore[open] summary{margin-bottom:10px}
.q-count{margin-top:4px;margin-bottom:14px;display:block}
.grid>[hidden]{display:none}
/* 本棚 */
.bk{display:grid;gap:10px;margin:0 16px}.bk-i{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:14px}.bk-i img{width:62px;height:82px;object-fit:cover;border-radius:8px}
.bk-b{min-width:0;display:flex;flex-direction:column;gap:4px}.bk-t{font-family:var(--serif);font-weight:800;font-size:15px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bk-s{font-size:12px;font-weight:700;color:var(--sub)}
.bk-p{display:block;height:4px;border-radius:999px;background:var(--soft);overflow:hidden}.bk-p i{display:block;height:100%;background:var(--acc)}
@media (max-width:420px){.bk-i{grid-template-columns:56px 1fr}.bk-i .btn{grid-column:1/-1}}
.bk-empty{margin:24px 16px;text-align:center;font-weight:700;color:var(--sub)}
/* 作品のページ */
.sp{display:block}.sp-cover{position:relative;display:block;aspect-ratio:4/4.6;max-height:72vh;overflow:hidden;background:var(--soft)}.sp-cover .s-art{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.sp-cover .s-shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.08) 62%,var(--page) 99%)}
.sp-logo{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:84%;max-height:40%;object-fit:contain;background:#fff;border-radius:10px;padding:4px 8px;box-shadow:0 6px 18px rgba(0,0,0,.18)}.sp-logo.color{background:transparent;box-shadow:none;padding:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.sp-info{padding:14px 16px 6px}.sp-t{font-family:var(--serif);font-weight:800;font-size:24px;line-height:1.4;margin:0 0 6px}.sp-meta{margin:0 0 12px;font-size:13px;font-weight:900;color:var(--sub)}
.sp-log{font-size:15px;line-height:1.9;margin:4px 0 6px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:auto-phrase}.sp-log.open{display:block}
.sp-more{border:0;background:none;padding:0;margin:0 0 14px;font:inherit;font-size:13px;font-weight:900;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sp-info .btn{margin-top:8px}.eph{display:flex;align-items:center;gap:10px}.eph .sh{margin-right:auto}.sort{border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:900;cursor:pointer}
.ep-up{margin-left:6px;font-family:var(--zen);font-size:10px;font-weight:900;letter-spacing:.04em;padding:1px 6px;border-radius:5px;background:var(--acc);color:#fff;vertical-align:1px}
@media (min-width:1000px){.sp{display:grid;grid-template-columns:400px 1fr;gap:36px;padding:26px 16px 0;align-items:start}.sp-cover{position:sticky;top:82px;aspect-ratio:2/3;max-height:none;border-radius:22px;border:2px solid var(--ink)}.sp-cover .s-shade{display:none}.sp-logo{bottom:14px}.sp-info{padding-top:0}.sp-main .shelf,.sp-main .sec{padding-left:0;padding-right:0}}
/* 下のタブとスマホの固定ボタン */
.tabbar{display:none}
@media (max-width:999px){
 .v2{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
 .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--head);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
 .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:900;color:var(--sub);-webkit-tap-highlight-color:transparent}.tabbar svg{width:23px;height:23px}.tabbar a[aria-current=page]{color:var(--acc)}
 .ctabar{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));z-index:29;padding:10px 16px;background:linear-gradient(transparent,var(--page) 30%)}.ctabar[hidden]{display:none}.ctabar .btn{width:100%}
}
@media (min-width:1000px){.ctabar{display:none}}
/* YOBITSUGI AI のバナー(仕様 MC-48) */
.yb{margin:30px 16px 8px}.yb a{display:grid;grid-template-columns:38% 1fr;align-items:stretch;background:#fff6ea;color:#1c1712;border:2px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(255,74,61,.12);transition:transform .15s}.yb a:active{transform:scale(.99)}
.yb-art{display:block;background:#ff8a2b;overflow:hidden}.yb-art img{width:100%;height:100%;object-fit:cover;object-position:28% 30%;display:block}
.yb-b{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;min-width:0}.yb-k{font-family:var(--dela);font-size:11px;letter-spacing:.08em;color:#c2410c}.yb-h{font-family:var(--serif);font-weight:800;font-size:17px;line-height:1.45;word-break:auto-phrase}.yb-p{font-size:12.5px;line-height:1.7;color:#5b5047;word-break:auto-phrase}
.yb .btn{align-self:flex-start;margin-top:4px;background:#1c1712;color:#fff;box-shadow:0 4px 0 #000}
@media (min-width:640px){.yb a{grid-template-columns:300px 1fr}.yb-b{padding:24px 28px;justify-content:center}.yb-h{font-size:22px}.yb-p{font-size:14px}}
html[data-theme=dark] .yb a{background:#2a1f16;color:#f6eee4}html[data-theme=dark] .yb-p{color:#cdbfb0}html[data-theme=dark] .yb .btn{background:#f6eee4;color:#1c1712;box-shadow:0 4px 0 #8a7a6a}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .yb a{background:#2a1f16;color:#f6eee4}html:not([data-theme=light]) .yb-p{color:#cdbfb0}html:not([data-theme=light]) .yb .btn{background:#f6eee4;color:#1c1712;box-shadow:0 4px 0 #8a7a6a}}
/* ダークで題字の札を反転(色付きの題字は反転しない) */
html[data-theme=dark] .sl-logo:not(.color),html[data-theme=dark] .sp-logo:not(.color){background:transparent;filter:invert(1)}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .sl-logo:not(.color),html:not([data-theme=light]) .sp-logo:not(.color){background:transparent;filter:invert(1)}}
.ft-theme{display:flex;justify-content:center;margin:14px 0 6px}
.v2 .kb{padding-top:26px}
@media (prefers-reduced-motion:reduce){.cv-img img,.slide,.hero-dots i{transition:none}}
@media (max-width:639px){.rk-g{display:none}.rk-s{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.55}.sl-tag{font-size:14.5px}}
.nf h1{word-break:auto-phrase}
.v2 .eb .en,.v2 .eb .ett,.v2 .eb .ens{display:block}.v2 .eb .ett{margin-top:3px;line-height:1.45;word-break:auto-phrase}.v2 .epi{padding:10px}.v2 .eps{gap:10px}.eph .sh small{margin-left:10px}
.cv-img.koma{aspect-ratio:2/3}.cv-img.koma img{object-position:top}.kb-lead{margin:-6px 0 14px;font-size:13px;font-weight:700;color:var(--sub);word-break:auto-phrase}
@media (max-width:639px){.yb a{grid-template-columns:1fr}.yb-art{aspect-ratio:16/9}.yb-art img{object-position:30% 34%}.yb-b{padding:16px 18px 20px;gap:8px}.yb-h{font-size:19px}.yb-p{font-size:13.5px}}
.ep-rest{padding:16px;border:1px dashed var(--line);border-radius:14px;text-align:center;font-size:13px;font-weight:700;color:var(--sub)}
.hero{position:relative}.hero-nav{display:none}@media (min-width:1000px) and (hover:hover){.hero-nav{display:grid;place-items:center;position:absolute;top:38%;z-index:2;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-size:24px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 var(--ink)}.hero-nav.prev{left:2px}.hero-nav.next{right:2px}.hero-nav:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}}
.ep-rest{grid-column:1/-1}
/* 作品のバナーの切り替え(仕様 MC-49)。ほかの部品と同じ左右の端(本文の幅)にそろえる(ユーザー 11/08)。PC は 2 枚、スマホは 1 枚ずつ */
.bn{max-width:1120px;margin:22px auto 4px;padding:0 16px}.bn-view{position:relative}
.bn-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:14px}.bn-track::-webkit-scrollbar{display:none}
.bn-s{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;scroll-snap-align:center;background:var(--soft);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
.bn-s img{width:100%;height:100%;object-fit:cover;display:block}
.bn-s .cv-b{left:auto;top:auto;right:10px;bottom:10px;font-size:12px;padding:3px 9px}
.bn-nav{position:absolute;top:var(--mid,50%);transform:translateY(-50%);z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:rgba(20,20,20,.66);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.25)}.bn-nav svg{width:22px;height:22px}
.bn-prev{left:calc(var(--edge,0px) + 10px)}.bn-next{right:calc(var(--edge,0px) + 10px)}.bn-nav:active{transform:translateY(-50%) scale(.94)}
.bn-dots{display:flex;justify-content:center;gap:2px;margin-top:8px}.bn-dots button{width:22px;height:22px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}.bn-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}.bn-dots button.on::before{background:var(--acc);transform:scale(1.15)}
@media (min-width:760px){.bn{margin-top:28px}.bn-track{grid-auto-columns:100%;padding-inline:18%}.bn-s:not(.on){opacity:.5;transform:scale(.94)}}
@media (min-width:1000px){.bn{margin-top:32px}.bn-track{gap:16px;grid-auto-columns:100%;padding-inline:21%}.bn-nav{width:46px;height:46px}.bn-prev{left:calc(var(--edge,0px) + 12px)}.bn-next{right:calc(var(--edge,0px) + 12px)}}
.v2 #list{padding-top:18px}.v2 #list .sh{margin-top:14px}
/* 作品一覧: 文を減らし、箱の底をそろえる */
.v2 .works>li{display:flex}.v2 .works .wk{flex:1;align-content:start}.v2 .wk-t{margin-top:0}.v2 .wk-s{-webkit-line-clamp:2}.v2 .wk-m{margin-top:10px}
@media (min-width:1000px){.v2 .wk{grid-template-rows:auto 1fr}.v2 .wk-b{display:flex;flex-direction:column}.v2 .wk-m{margin-top:auto;padding-top:10px}}
@media (prefers-reduced-motion:reduce){.bn-dots button::before,.bn-s{transition:none}}
/* PC のヘッダーの「ホーム・さがす・本棚」(仕様 MC-50) */
.hnav{display:none}@media (min-width:1000px){.hnav{display:flex;align-items:center;gap:4px;margin-right:6px}.hnav a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:900;color:var(--sub);transition:background .15s,color .15s}.hnav a svg{width:19px;height:19px}.hnav a:hover{background:var(--soft);color:var(--ink)}.hnav a[aria-current=page]{color:var(--ink);background:var(--soft)}}
/* モノの公式 X への導線 */
.xfollow{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 16px;border-radius:14px;background:#111;color:#fff;font-weight:900;font-size:14px;transition:transform .15s}.xfollow:active{transform:scale(.985)}.xfollow svg{width:20px;height:20px;flex:none}.xfollow small{margin-left:auto;font-size:12px;font-weight:700;opacity:.7}
.xfollow.big{margin:16px 0 4px;padding:14px 18px;font-size:15px}
html[data-theme=dark] .xfollow{background:#f2efe8;color:#111}@media (prefers-color-scheme:dark){html:not([data-theme=light]) .xfollow{background:#f2efe8;color:#111}}
@media (max-width:420px){.xfollow small{display:none}}
/* ランキング(トップの 5 位まで・/ranking) */
.rank-sec .sh-h2,.sh-h2{display:flex;align-items:center;gap:10px}.sh-h2 .sh{margin-right:auto}.sh-h2 .more{margin-left:0}
.rank .rk-hi{color:var(--acc)}.rank.full{margin:0 16px}@media (min-width:1000px){.rank.full{grid-template-columns:1fr 1fr}}
.rk-tabs{display:flex;gap:8px;margin:0 16px 12px}.rk-tabs a{padding:7px 18px;border-radius:999px;border:2px solid var(--ink);font-weight:900;font-size:14px}.rk-tabs a[aria-current=page]{background:var(--ink);color:var(--page)}
.ranking .yb2,.authors .yb2{margin-left:16px;margin-right:16px}
/* 作家一覧 */
.ag{list-style:none;margin:0 16px;padding:0;display:grid;gap:14px}@media (min-width:700px){.ag{grid-template-columns:1fr 1fr}}@media (min-width:1100px){.ag{grid-template-columns:1fr 1fr 1fr}}
.ag-c{display:grid;grid-template-columns:72px 1fr;grid-template-areas:"ic n" "ic r" "l l" "st st" "w w";column-gap:14px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;height:100%;transition:transform .15s}.ag-c:active{transform:scale(.985)}
.ag-ic{grid-area:ic;width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);background:var(--soft)}
.ag-n{grid-area:n;display:flex;align-items:center;gap:8px;align-self:end}.ag-n b{font-family:var(--serif);font-weight:800;font-size:19px}.ag-r{grid-area:r;font-size:12px;font-weight:700;color:var(--sub);align-self:start}
.ag-l{grid-area:l;margin:12px 0 8px;font-family:var(--serif);font-weight:800;font-size:15px;line-height:1.6;word-break:auto-phrase}
.ag-st{grid-area:st;display:flex;flex-wrap:wrap;gap:6px}.ag-st i{font-style:normal;font-size:11.5px;font-weight:900;padding:3px 9px;border-radius:999px;border:1.5px solid var(--line)}
.ag-w{grid-area:w;display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-weight:900;font-size:13.5px;line-height:1.45}.ag-w img{width:44px;height:58px;object-fit:cover;object-position:top;border-radius:6px;flex:none}.ag-w small{display:block;font-size:11px;color:var(--sub);font-weight:700}
/* YOBITSUGI AI のバナー(YOBITSUGI AI のサイトの見た目 + モノ) */
.yb2{margin:34px 16px 8px}.yb2 a{display:grid;grid-template-columns:1fr;background:#fff;color:#1b1c1f;border:1px solid #e5e6ea;border-radius:24px;overflow:hidden;box-shadow:0 12px 32px rgba(47,79,216,.10);transition:transform .2s}.yb2 a:active{transform:scale(.99)}
.yb2-b{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px 24px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",var(--zen),sans-serif}
.yb2-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid #e5e6ea;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.05);font-size:12.5px;font-weight:800}.yb2-pill b{padding:3px 9px;border-radius:999px;background:#1b1c1f;color:#fff;font-size:11px;letter-spacing:.02em}.yb2-pill i{font-style:normal;color:#2f4fd8}
.yb2-h{font-family:var(--zen);font-weight:900;font-size:26px;line-height:1.35;letter-spacing:-.01em}.yb2-h em{font-style:normal;display:inline-block;margin:4px 4px 0 0;padding:0 10px 2px;border-radius:10px;background:#2f4fd8;color:#fff;transform:rotate(-3deg);box-shadow:0 4px 0 #1f37a8}
.yb2-p{font-size:14px;line-height:1.8;color:#5f626a;word-break:auto-phrase}
.yb2-btn{display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:12px 22px;border-radius:999px;background:#2f4fd8;color:#fff;font-weight:900;font-size:15px;box-shadow:0 6px 16px rgba(47,79,216,.28)}.yb2-btn svg{width:18px;height:18px}
.yb2-art{order:-1;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#e6eafc,#f1e6fb 60%,#fbe4ec)}.yb2-art img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
@media (min-width:700px){.yb2 a{grid-template-columns:1.15fr 1fr;align-items:stretch}.yb2-art{order:0;aspect-ratio:auto}.yb2-b{padding:32px 34px;justify-content:center}.yb2-h{font-size:32px}.yb2-p{font-size:15px}}
@media (hover:hover){.yb2 a:hover{transform:translateY(-2px)}.yb2 a:hover .yb2-btn{background:#2443c4}}
html[data-theme=dark] .yb2 a{background:#16181d;color:#f2f2ef;border-color:#2a2d36}html[data-theme=dark] .yb2-pill{background:#16181d;border-color:#2a2d36}html[data-theme=dark] .yb2-pill b{background:#f2f2ef;color:#1b1c1f}html[data-theme=dark] .yb2-p{color:#a9abb3}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .yb2 a{background:#16181d;color:#f2f2ef;border-color:#2a2d36}html:not([data-theme=light]) .yb2-pill{background:#16181d;border-color:#2a2d36}html:not([data-theme=light]) .yb2-pill b{background:#f2f2ef;color:#1b1c1f}html:not([data-theme=light]) .yb2-p{color:#a9abb3}}
/* 下のタブが 5 つ */
@media (max-width:999px){.tabbar a{font-size:10px}.tabbar svg{width:22px;height:22px}}
.hnav a{padding:7px 12px}
.yb2-h .nw{white-space:nowrap}@media (max-width:420px){.yb2-h{font-size:22px}}
/* ローディングのアニメーション(初めて開いたときだけ・約 1.2 秒・CSS の時間で必ず消える) */
.intro-ov{display:none}
html.intro .intro-ov{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--page);animation:intro-out .45s cubic-bezier(.7,0,.84,0) 1.05s forwards;pointer-events:none}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:14px}
.intro-mk svg{width:92px;height:92px;display:block;transform-origin:30% 90%;animation:intro-pop .62s cubic-bezier(.34,1.56,.64,1) both}
.intro-mk svg g path{transform-origin:32px 29px;animation:intro-rays .9s ease-out .15s both}
.intro-wm{display:block;overflow:hidden;color:var(--ink)}.intro-wm svg{height:46px;width:auto;display:block;animation:intro-up .55s cubic-bezier(.16,1,.3,1) .22s both}
.intro-bar{width:120px;height:4px;border-radius:999px;background:var(--line);overflow:hidden}.intro-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));transform-origin:left;animation:intro-bar .95s cubic-bezier(.65,0,.35,1) .1s both}
html.intro body>:not(.intro-ov){animation:intro-page .6s cubic-bezier(.16,1,.3,1) 1.15s both}
@keyframes intro-pop{0%{transform:scale(0) rotate(-24deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes intro-rays{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
@keyframes intro-up{0%{transform:translateY(110%)}100%{transform:none}}
@keyframes intro-bar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes intro-out{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px);visibility:hidden}}
/* 本体は透明にしない(幕が全面を覆っているので見た目は同じ。透明から出てきた要素は LCP に数えられず、検索の体感の指標が取れなくなる・2026-11-10) */
@keyframes intro-page{0%{transform:translateY(10px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){html.intro .intro-ov{display:none}}
/* 「どんな漫画が読みたい?」の募集 */
.wish-band{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:30px 16px 0;padding:18px;border-radius:20px;border:2px solid var(--ink);background:var(--card);box-shadow:0 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}.wish-band:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.wb-q{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--acc);color:#fff;font-family:var(--dela);font-size:30px;line-height:1;transform:rotate(-8deg)}
.wb-b{display:flex;flex-direction:column;gap:4px;min-width:0}.wb-b b{font-family:var(--dela);font-weight:400;font-size:19px;letter-spacing:.03em}.wb-b span{font-size:13px;line-height:1.7;color:var(--sub);font-weight:700;word-break:auto-phrase}
.wb-go{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;background:var(--ink);color:var(--page);font-weight:900;font-size:14px}.wb-go i{font-style:normal}
@media (min-width:700px){.wish-band{grid-template-columns:auto 1fr auto;padding:20px 24px}.wb-go{grid-column:auto;justify-self:end}}
.wish{max-width:720px}.wish-f{display:flex;flex-direction:column;gap:10px;margin:6px 16px 0}.wish-f fieldset{border:0;margin:0 0 10px;padding:0}.wish-f legend,.wish-l{font-weight:900;font-size:15px;margin:8px 0 6px}
.wish-g{display:flex;flex-wrap:wrap;gap:8px}.wish-g label{cursor:pointer}.wish-g input{position:absolute;opacity:0;pointer-events:none}.wish-g span{display:inline-block;padding:7px 14px;border-radius:999px;border:2px solid var(--line);font-size:13.5px;font-weight:900;color:var(--sub);background:var(--card);transition:background .15s,color .15s,border-color .15s}
.wish-g input:checked+span{background:var(--ink);color:var(--page);border-color:var(--ink)}.wish-g input:focus-visible+span{outline:3px solid var(--acc);outline-offset:2px}
.wish-f textarea,.wish-f input[name=nick]{width:100%;font:inherit;font-size:16px;line-height:1.7;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink)}.wish-f textarea:focus,.wish-f input[name=nick]:focus{outline:none;border-color:var(--ink)}
.wish-f textarea::placeholder{color:var(--sub);opacity:.8}.wish-help{margin:0 0 6px;font-size:12.5px;line-height:1.7;color:var(--sub)}.wish-f .btn{margin-top:10px}
.wish-err{margin:0 0 6px;padding:12px 14px;border-radius:12px;background:#fff1f0;color:#b42318;font-weight:900;font-size:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wish-done{margin:10px 16px;padding:26px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line);text-align:center}.wd-h{font-family:var(--dela);font-size:20px;margin:0 0 10px}.wish-done p{line-height:1.8}.wd-again{display:inline-block;margin-top:14px;font-weight:900;text-decoration:underline;text-underline-offset:3px}
.ft-wish a{font-weight:900;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
/* スマホのヘッダーの右端: 本のページがめくれ続ける(ユーザー 11/08)。PC では出さない */
.flipbook{display:none}
@media (max-width:999px){
 .top nav{margin-left:auto}.top .flipbook{display:block;position:relative;flex:none;width:46px;height:32px;margin-left:10px;perspective:240px}
 .fb-cv{position:absolute;inset:0;border-radius:4px;background:var(--acc);box-shadow:0 2px 0 rgba(0,0,0,.18)}
 .fb-pg{position:absolute;top:3px;bottom:3px;width:calc(50% - 3px);background:#fffaf0;background-image:linear-gradient(#e9dfcb,#e9dfcb),linear-gradient(#e9dfcb,#e9dfcb),linear-gradient(#e9dfcb,#e9dfcb);background-size:70% 1.5px,45% 1.5px,60% 1.5px;background-position:4px 6px,4px 11px,4px 16px;background-repeat:no-repeat}
 .fb-l{left:3px;border-radius:2px 0 0 2px}.fb-r{left:50%;border-radius:0 2px 2px 0}
 .fb-t{left:50%;border-radius:0 2px 2px 0;transform-origin:left center;animation:fb-flip 30s linear infinite;box-shadow:-1px 0 0 rgba(0,0,0,.06)}
 .fb-t.t1{animation-delay:.6s}.fb-t.t2{animation-delay:.95s}.fb-t.t3{animation-delay:1.3s}
 .fb-cv::after{content:"";position:absolute;left:50%;top:2px;bottom:2px;width:1.5px;margin-left:-.75px;background:rgba(0,0,0,.25)}
}
/* 30 秒に 1 回、3 枚がペラペラとめくれて、あとは止まっている */
@keyframes fb-flip{0%{transform:rotateY(0);opacity:1;filter:none;animation-timing-function:cubic-bezier(.45,.05,.35,1)}1.4%{filter:brightness(.82)}2.8%{transform:rotateY(-180deg);filter:none}97%{transform:rotateY(-180deg);opacity:1}97.5%,100%{transform:rotateY(-180deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.fb-t{animation:none}}
/* モノの 4 コマの箱 */
.kbox{margin:34px 16px 0}.kbox-in{position:relative;padding:20px 0 18px;border-radius:24px;border:2px solid var(--ink);background:linear-gradient(180deg,#fff4e8,var(--card) 46%);box-shadow:0 6px 0 var(--ink);overflow:hidden}
.kbox-h{display:flex;gap:14px;align-items:center;padding:0 18px 14px}.kbox-ic{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--ink);background:#ff8a2b}
.kbox-t{min-width:0}.kbox-k{display:inline-block;padding:2px 10px;border-radius:999px;background:#ff8a2b;color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.06em}.kbox-t h2{margin:4px 0 2px;font-family:var(--dela);font-weight:400;font-size:21px;letter-spacing:.02em;line-height:1.3}.kbox-t p{margin:0;font-size:12.5px;line-height:1.6;color:var(--sub);font-weight:700;word-break:auto-phrase}
.kbox-row{display:grid;grid-auto-flow:column;grid-auto-columns:38%;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:18px;padding:4px 18px 6px;scrollbar-width:none}.kbox-row::-webkit-scrollbar{display:none}
@media (min-width:640px){.kbox-row{grid-auto-columns:21%}}@media (min-width:1000px){.kbox-row{grid-auto-columns:calc((100% - 84px)/8)}}
.kbox-it{scroll-snap-align:start;display:block;min-width:0}.kbox-img{display:block;aspect-ratio:2/3;border-radius:10px;overflow:hidden;border:1.5px solid var(--ink);background:#fff}.kbox-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}@media (hover:hover){.kbox-it:hover .kbox-img img{transform:scale(1.04)}}
.kbox-n{display:block;margin-top:7px;font-family:var(--dela);font-size:10.5px;letter-spacing:.06em;color:#ff8a2b}.kbox-tt{display:block;font-weight:900;font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbox-f{display:grid;grid-template-columns:1fr;gap:10px;padding:14px 18px 0}@media (min-width:700px){.kbox-f{grid-template-columns:1fr 1fr}}
.kbox-all{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:14px;border:2px solid var(--ink);background:var(--card);font-weight:900;font-size:14px}.kbox-all i{font-style:normal}
.xfollow.in-box{margin:0;justify-content:center}
html[data-theme=dark] .kbox-in{background:linear-gradient(180deg,#2a1f16,var(--card) 46%)}@media (prefers-color-scheme:dark){html:not([data-theme=light]) .kbox-in{background:linear-gradient(180deg,#2a1f16,var(--card) 46%)}}
/* ヘッダーと下のタブの X と同じ動き */
.top,.bar,.tabbar,.ctabar{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
html.bars-hidden .top,html.bars-hidden .bar{transform:translateY(-100%)}
html.bars-hidden .tabbar{transform:translateY(105%)}
@media (max-width:999px){html.bars-hidden .ctabar{transform:translateY(calc(62px + env(safe-area-inset-bottom)))}}
@media (prefers-reduced-motion:reduce){.top,.bar,.tabbar,.ctabar{transition:none}}

/* 大学広報部のメンバー募集(PR・大学カタログの仕様 F-207)。YOBITSUGI AI のバナーと同じ形で、色は大学カタログの緑 */
.kb2{margin:18px 16px 8px}.ranking .kb2,.authors .kb2{margin-left:16px;margin-right:16px}.kb2 a{display:grid;grid-template-columns:1fr;background:#fff;color:#1b1c1f;border:1px solid #e5e6ea;border-radius:24px;overflow:hidden;box-shadow:0 12px 32px rgba(15,122,82,.10);transition:transform .2s}.kb2 a:active{transform:scale(.99)}
.kb2-b{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px 24px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",var(--zen),sans-serif}
.kb2-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid #e5e6ea;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.05);font-size:12.5px;font-weight:800}.kb2-pill b{padding:3px 9px;border-radius:999px;background:#1b1c1f;color:#fff;font-size:11px;letter-spacing:.06em}.kb2-pill i{font-style:normal;color:#0f7a52}
.kb2-h{font-family:var(--zen);font-weight:900;font-size:24px;line-height:1.4;letter-spacing:-.01em}.kb2-h em{font-style:normal;display:inline-block;margin:4px 4px 0 0;padding:0 10px 2px;border-radius:10px;background:#ffd84d;color:#13241c;transform:rotate(-3deg);box-shadow:0 4px 0 #d9b21f}.kb2-h .nw{white-space:nowrap}
.kb2-p{font-size:14px;line-height:1.8;color:#5f626a;word-break:auto-phrase}
.kb2-btn{display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:12px 22px;border-radius:999px;background:#0f7a52;color:#fff;font-weight:900;font-size:15px;box-shadow:0 6px 16px rgba(15,122,82,.28)}.kb2-btn svg{width:18px;height:18px}
.kb2-art{order:-1;display:block;aspect-ratio:16/9;overflow:hidden;background:#e7efe9}.kb2-art img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;display:block}
@media (min-width:700px){.kb2 a{grid-template-columns:1.15fr 1fr;align-items:stretch}.kb2-art{order:0;aspect-ratio:auto}.kb2-b{padding:30px 34px;justify-content:center}.kb2-h{font-size:28px}.kb2-p{font-size:15px}}
@media (hover:hover){.kb2 a:hover{transform:translateY(-2px)}.kb2 a:hover .kb2-btn{background:#0b6342}}
@media (max-width:420px){.kb2-h{font-size:21px}}
html[data-theme=dark] .kb2 a{background:#16181d;color:#f2f2ef;border-color:#2a2d36}html[data-theme=dark] .kb2-pill{background:#16181d;border-color:#2a2d36}html[data-theme=dark] .kb2-pill b{background:#f2f2ef;color:#1b1c1f}html[data-theme=dark] .kb2-p{color:#b5b8c0}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .kb2 a{background:#16181d;color:#f2f2ef;border-color:#2a2d36}html:not([data-theme=light]) .kb2-pill{background:#16181d;border-color:#2a2d36}html:not([data-theme=light]) .kb2-pill b{background:#f2f2ef;color:#1b1c1f}html:not([data-theme=light]) .kb2-p{color:#b5b8c0}}

/* 作品へのいいね(仕様 MC-52) */
.sp-acts{display:flex;gap:10px;align-items:stretch;margin-top:8px}.sp-acts .btn{flex:1;margin-top:0}
.lk{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:68px;padding:6px 10px;border-radius:20px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s,border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.lk:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.lk-h{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;transition:fill .15s,stroke .15s}
.lk-l{display:none}.lk-n{font-family:var(--dela);font-weight:400;font-size:14px;line-height:1.2;letter-spacing:.02em}
.lk[aria-pressed=true]{border-color:var(--acc);color:var(--acc);box-shadow:0 5px 0 var(--acc)}.lk[aria-pressed=true] .lk-h{fill:var(--acc);stroke:var(--acc)}
.lk.pop .lk-h{animation:lk-pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes lk-pop{0%{transform:scale(1)}25%{transform:scale(.72)}60%{transform:scale(1.32)}100%{transform:scale(1)}}
.lk.big{flex-direction:row;gap:10px;min-width:0;margin:28px auto 0;padding:12px 22px 12px 18px;border-radius:999px;border-color:currentColor;background:transparent;color:inherit;box-shadow:none;font-size:15px;font-weight:900}
.lk.big .lk-l{display:inline}.lk.big .lk-n{font-size:15px;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--ink)}
.end.dark .lk.big .lk-n{background:#222;color:#fff}.end.light .lk.big .lk-n{background:#f1eee8;color:#111}
.lk.big[aria-pressed=true]{border-color:var(--acc);color:var(--acc);box-shadow:none}.lk.big[aria-pressed=true] .lk-n{background:var(--acc);color:#fff}
.end-like{display:flex;justify-content:center}
@media (hover:hover){.lk:hover{border-color:var(--acc)}.lk:hover .lk-h{stroke:var(--acc)}}
@media (prefers-reduced-motion:reduce){.lk.pop .lk-h{animation:none}}

/* 右下の目安箱(仕様 MC-53)。ユーザー 11/09「もう少し目立つデザインに」→ 赤い地・白い字・募集中の札・ときどき跳ねる・その日の最初に吹き出し */
.mb{position:fixed;right:14px;bottom:calc(62px + 16px + env(safe-area-inset-bottom));z-index:28;display:inline-flex;align-items:center;gap:8px;padding:7px 19px 7px 7px;border-radius:999px;border:2.5px solid var(--ink);background:var(--acc);color:#fff;box-shadow:0 5px 0 var(--ink),0 12px 28px rgba(255,74,61,.38);font-family:var(--dela);font-size:16px;letter-spacing:.08em;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .12s;-webkit-tap-highlight-color:transparent;animation:mb-hop 7s ease-in-out 2.5s infinite}
.mb:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink),0 4px 10px rgba(255,74,61,.3)}
.mb-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--acc);border:2px solid var(--ink);flex:none}.mb-ic svg{width:23px;height:23px}
.mb .mb-ic svg path:nth-child(3),.mb .mb-ic svg path:nth-child(4){animation:mb-paper 7s ease-in-out 2.5s infinite}
.mb-t{text-shadow:0 1.5px 0 rgba(0,0,0,.25)}
.mb-tag{position:absolute;top:-13px;left:-6px;padding:2px 8px 3px;border-radius:8px;border:2px solid var(--ink);background:var(--acc2);color:#111;font-family:var(--zen);font-weight:900;font-size:11px;letter-spacing:.06em;line-height:1.3;transform:rotate(-8deg);box-shadow:0 2px 0 var(--ink)}
@keyframes mb-hop{0%,84%,100%{translate:0 0;rotate:0deg}87%{translate:0 -9px;rotate:-4deg}90%{translate:0 0;rotate:2deg}93%{translate:0 -4px;rotate:-1deg}96%{translate:0 0;rotate:0deg}}
@keyframes mb-paper{0%,84%,100%{translate:0 0}88%{translate:0 -3px}94%{translate:0 2px}}
.mb-tip{position:fixed;right:14px;bottom:calc(62px + 16px + 80px + env(safe-area-inset-bottom));z-index:28;max-width:230px;padding:9px 14px;border-radius:14px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-weight:900;font-size:13.5px;box-shadow:0 4px 0 var(--ink);animation:mb-tip-in .35s cubic-bezier(.2,1.4,.4,1);transition:opacity .3s,transform .3s}
.mb-tip::after{content:"";position:absolute;right:34px;bottom:-9px;width:14px;height:14px;background:var(--card);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.mb-tip[hidden]{display:none}.mb-tip.out{opacity:0;transform:translateY(6px)}
@keyframes mb-tip-in{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.ctabar:not([hidden])~.mb{bottom:calc(62px + 88px + env(safe-area-inset-bottom))}.ctabar:not([hidden])~.mb-tip{bottom:calc(62px + 88px + 80px + env(safe-area-inset-bottom))}
@media (max-width:999px){html.bars-hidden .mb,html.bars-hidden .mb-tip{transform:translateY(calc(62px + env(safe-area-inset-bottom)))}}
@media (min-width:1000px){.mb{right:28px;bottom:28px;padding:8px 22px 8px 8px;font-size:17px}.mb-ic{width:44px;height:44px}.mb-tip{right:28px;bottom:116px}.mb:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--ink),0 16px 32px rgba(255,74,61,.42)}}
@media (prefers-reduced-motion:reduce){.mb,.mb .mb-ic svg path,.mb-tip{animation:none;transition:none}}
.mb-d{width:100%;max-width:100%;margin:auto 0 0;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--card);color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.25);max-height:92dvh;overflow:auto}
.mb-d::backdrop{background:rgba(0,0,0,.42)}
.mb-d[open]{animation:mb-up .3s cubic-bezier(.2,.8,.2,1)}
@keyframes mb-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.mb-in{padding:16px 18px calc(18px + env(safe-area-inset-bottom))}
.mb-top{display:flex;align-items:center;gap:10px;margin:0 0 6px}.mb-top h2{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--dela);font-weight:400;font-size:20px;letter-spacing:.06em}
.mb-x{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);cursor:pointer}.mb-x svg{width:18px;height:18px}
.mb-lead{margin:0 0 12px;font-size:13.5px;line-height:1.7;font-weight:700;color:var(--sub)}
.mb-g{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.mb-g label{cursor:pointer}.mb-g input{position:absolute;opacity:0;pointer-events:none}
.mb-g span{display:inline-block;padding:5px 11px;border-radius:999px;border:1.5px solid var(--line);font-size:12.5px;font-weight:900;color:var(--sub);transition:background .12s,color .12s,border-color .12s}
.mb-g input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--page)}.mb-g input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.mb-f textarea,.mb-f input[name=nick]{display:block;width:100%;font:inherit;font-size:16px;font-weight:700;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--page);color:var(--ink);margin:0 0 10px;resize:vertical}
.mb-f textarea:focus,.mb-f input[name=nick]:focus{outline:none;border-color:var(--ink)}
.mb-f .btn{width:100%;margin-top:4px}.mb-fine{margin:12px 0 0;font-size:11.5px;line-height:1.7;color:var(--sub)}
.mb-err{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#fff0ee;color:#b3261e;font-size:13px;font-weight:900}
.mb-done{padding:18px 4px 4px;text-align:center}.mb-done p{font-size:13.5px;line-height:1.8;color:var(--sub);margin:0 0 16px}.mb-done .mb-dh{font-family:var(--dela);font-size:20px;line-height:1.5;letter-spacing:.04em;color:var(--ink);margin:0 0 8px}.mb-done .btn{width:100%}
@media (min-width:700px){.mb-d{width:400px;max-width:calc(100vw - 48px);margin:auto 24px 24px auto;border-radius:22px;border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink),0 24px 60px rgba(0,0,0,.3)}.mb-in{padding:18px 20px 20px}}
@media (prefers-reduced-motion:reduce){.mb-d[open]{animation:none}}

/* 目安箱の字はゼン角ゴシック 1 つにそろえる(ユーザー 11/09「目安箱のフォントがバラバラ」: 極太の Dela とゼン角が混ざり、半角の ! ( : が別の書体で出ていた) */
.mb,.mb-tip,.mb-d,.mb-d .btn,.mb-top h2,.mb-done .mb-dh{font-family:var(--zen)}
.mb-t{font-weight:900;letter-spacing:.1em;text-shadow:none}
.mb-tag{font-weight:900}.mb-tip{font-weight:900}
.mb-top h2{font-weight:900;font-size:19px;letter-spacing:.08em}
.mb-d .btn{font-weight:900;font-size:17px;letter-spacing:.14em}
.mb-done .mb-dh{font-weight:900;font-size:18px;letter-spacing:.04em}
.mb-f textarea::placeholder,.mb-f input[name=nick]::placeholder{font-weight:500;color:var(--sub);opacity:.75}
.mb-lead,.mb-fine,.mb-done p{word-break:auto-phrase}

/* ログインボーナス(仕様 MC-54)・獲得の演出(11/09 目立たせる): 集中線・コインが回って落ちる・数え上げ・紙吹雪・閉じるとヘッダーのポイントへ飛ぶ */
.lbx{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:64px 20px 24px;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden}
.lbx[hidden]{display:none}
html.intro body>.lbx,html.intro body>.lbx-fly{animation:none}
.lbx::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--page) 84%,transparent);opacity:0;transition:opacity .24s ease-out}
.lbx-rays{position:absolute;left:50%;top:50%;width:max(160vmax,1200px);aspect-ratio:1;margin:calc(max(160vmax,1200px) / -2) 0 0 calc(max(160vmax,1200px) / -2);opacity:0;transform:scale(1.35);transition:opacity .3s ease-out,transform .55s cubic-bezier(.23,1,.32,1);
background:repeating-conic-gradient(from 0deg,transparent 0 2.3deg,var(--ink) 2.3deg 2.75deg,transparent 2.75deg 5.4deg,var(--ink) 5.4deg 5.6deg,transparent 5.6deg 7.5deg),repeating-conic-gradient(from 1.1deg,transparent 0 6.6deg,var(--ink) 6.6deg 7.2deg,transparent 7.2deg 12deg);
-webkit-mask:radial-gradient(closest-side,transparent 0 17%,rgba(0,0,0,.35) 26%,#000 46%);mask:radial-gradient(closest-side,transparent 0 17%,rgba(0,0,0,.35) 26%,#000 46%)}
.lbx-card{position:relative;width:min(300px,100%);padding:60px 22px 18px;border:2.5px solid var(--ink);border-radius:22px;background:var(--card);color:var(--ink);box-shadow:0 6px 0 var(--ink),0 22px 60px rgba(0,0,0,.22);text-align:center;font-family:var(--zen);cursor:default;opacity:0;transform:translateY(18px) scale(.9);transition:opacity .2s ease-out,transform .46s cubic-bezier(.34,1.56,.64,1)}
.lbx-coin,.lbx-fly{display:grid;place-items:center;border-radius:50%;border:3px solid #111;background:radial-gradient(circle at 34% 28%,#fff6cf 0 10%,#ffd85e 30%,#ffb02e 62%,#ec8a17 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.38),inset 0 -7px 0 rgba(150,70,0,.22),0 5px 0 #111;color:#111;font-family:var(--dela);overflow:hidden}
.lbx-coin{position:absolute;left:50%;top:-50px;z-index:2;width:96px;height:96px;margin-left:-48px;font-size:30px;opacity:0}
.lbx-coin::before{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid rgba(17,17,17,.22)}
.lbx-coin::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-160%) skewX(-18deg)}
.lbx-coin span,.lbx-fly span{position:relative;line-height:1;margin-top:-3px}
.lbx-k{display:inline-block;padding:4px 13px 5px;border-radius:999px;background:var(--acc);color:#fff;font-size:12.5px;font-weight:900;letter-spacing:.04em}
.lbx-n{display:flex;justify-content:center;align-items:baseline;gap:3px;margin:10px 0 6px;font-family:var(--dela);line-height:1;color:var(--acc)}
.lbx-n b{display:inline-block;font-weight:400;font-size:54px;text-shadow:3px 3px 0 var(--ink);transform-origin:50% 70%}
.lbx-n small{font-size:22px;text-shadow:2px 2px 0 var(--ink)}
.lbx-s,.lbx-x{margin:0;font-size:12.5px;font-weight:700;line-height:1.7;color:var(--sub);word-break:auto-phrase}
.lbx-s{color:var(--ink)}
.lbx-ok{position:relative;display:block;width:100%;height:46px;margin:14px 0 0;border:2px solid var(--ink);border-radius:999px;background:var(--btn);color:var(--btnfg);font:900 15px var(--zen);letter-spacing:.06em;box-shadow:0 3px 0 var(--btnsh);overflow:hidden;cursor:pointer;transition:transform .14s ease-out,box-shadow .14s ease-out}
.lbx-ok:active{transform:translateY(2px) scale(.98);box-shadow:0 1px 0 var(--btnsh)}
.lbx-ok i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acc2);transform-origin:left;transform:scaleX(1)}
.lbx-k,.lbx-n,.lbx-s,.lbx-x,.lbx-ok{opacity:0;transform:translateY(8px);transition:opacity .26s ease-out,transform .32s cubic-bezier(.23,1,.32,1)}
.lbx-cf{position:absolute;left:50%;top:0;z-index:1;width:9px;height:13px;margin:-6px 0 0 -4.5px;border:1.5px solid #111;border-radius:2px;background:var(--c);opacity:0;animation:lbx-cf 1.05s cubic-bezier(.15,.75,.35,1) var(--d) forwards;pointer-events:none}
.lbx-cf.o{width:11px;height:11px;border-radius:50%}
.lbx.on::before{opacity:1}
.lbx.on .lbx-rays{opacity:.42;transform:none}
.lbx.on .lbx-card{opacity:1;transform:none}
.lbx.on .lbx-coin{animation:lbx-coin .8s cubic-bezier(.23,1,.32,1) .06s both}
.lbx.on .lbx-coin::after{animation:lbx-shine .7s ease-in-out .95s both}
.lbx.on .lbx-k,.lbx.on .lbx-n,.lbx.on .lbx-s,.lbx.on .lbx-x,.lbx.on .lbx-ok{opacity:1;transform:none}
.lbx.on .lbx-k{transition-delay:.3s}.lbx.on .lbx-n{transition-delay:.36s}.lbx.on .lbx-s{transition-delay:.42s}.lbx.on .lbx-x{transition-delay:.46s}.lbx.on .lbx-ok{transition-delay:.52s}
.lbx-n.pop b{animation:lbx-pop .34s cubic-bezier(.34,1.56,.64,1)}
.lbx.off::before,.lbx.off .lbx-rays{opacity:0;transition:opacity .2s ease-out}
.lbx.off .lbx-card{opacity:0;transform:scale(.96);transition:opacity .18s ease-out,transform .18s ease-out}
.lbx.flown .lbx-coin{visibility:hidden}
.lbx-fly{position:fixed;z-index:95;font-size:30px;pointer-events:none;will-change:transform}
.acct.lbx-hit{animation:lbx-hit .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes lbx-coin{0%{opacity:0;transform:perspective(500px) translateY(-110px) rotateY(0) scale(.6)}
40%{opacity:1;transform:perspective(500px) translateY(0) rotateY(720deg) scale(1)}
56%{transform:perspective(500px) translateY(0) rotateY(720deg) scale(1.14,.86)}
74%{transform:perspective(500px) translateY(-8px) rotateY(720deg) scale(.95,1.06)}
100%{opacity:1;transform:perspective(500px) translateY(0) rotateY(720deg) scale(1)}}
@keyframes lbx-shine{to{transform:translateX(420%) skewX(-18deg)}}
@keyframes lbx-pop{0%{transform:scale(1)}40%{transform:scale(1.22) rotate(-3deg)}100%{transform:none}}
@keyframes lbx-cf{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)}65%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 56px)) rotate(calc(var(--r) * 1.6)) scale(.9)}}
@keyframes lbx-hit{0%{transform:none}35%{transform:scale(1.2);border-color:var(--acc2);box-shadow:0 0 0 5px color-mix(in srgb,var(--acc2) 40%,transparent)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.lbx-rays{transform:none;transition:opacity .2s linear}.lbx-card,.lbx-k,.lbx-n,.lbx-s,.lbx-x,.lbx-ok{transform:none;transition:opacity .2s linear}.lbx.on .lbx-coin{animation:none;opacity:1}.lbx.on .lbx-coin::after,.lbx-n.pop b,.acct.lbx-hit{animation:none}.lbx.on .lbx-k,.lbx.on .lbx-n,.lbx.on .lbx-s,.lbx.on .lbx-x,.lbx.on .lbx-ok{transition-delay:0s}}
.lk-bonus{margin:0 0 14px;padding:10px 14px;border-radius:14px;background:#fff4dc;border:2px dashed var(--acc2);color:#5a3b00;font-size:13.5px;font-weight:900;line-height:1.6;word-break:auto-phrase}
html[data-theme=dark] .lk-bonus{background:#2a2210;color:#ffd78a}@media (prefers-color-scheme:dark){html:not([data-theme=light]) .lk-bonus{background:#2a2210;color:#ffd78a}}

/* 表示崩れの直し(ユーザー 11/09「たまに表示崩れる」)
   ① 幅 360px ほどのスマホ: 販売中はヘッダーに「ログイン」が出るので、ロゴ・ログイン・めくれる本が入りきらず横にはみ出していた → 狭い画面では本を小さく、さらに狭ければ隠す
   ② 幅 1000〜1100px(iPad の横・小さいノート): 作品のページの右の列が中身の幅で広がって横にはみ出していた → 列の最小を 0 に */
.top .wrap{min-width:0}.top nav{min-width:0}
@media (max-width:399px){.top .wrap{gap:10px;padding:0 12px}.top .flipbook{width:38px;margin-left:6px}.acct{padding:4px 9px 4px 6px;font-size:12px}}
@media (max-width:359px){.top .flipbook{display:none}}
@media (min-width:1000px){.sp{grid-template-columns:400px minmax(0,1fr)}.sp-main{min-width:0}}
/* ③ 話の一覧と YOBITSUGI AI のバナー: 中身の幅で列が広がらないように(幅 320px・1024px で横にはみ出していた) */
.epi{grid-template-columns:84px minmax(0,1fr) auto}.epi .eb{min-width:0}.yb2 a{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.series .eps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px){.yb2 a{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
@media (max-width:359px){.yb2-h{font-size:19px}.yb2-b{padding:20px 16px 22px}}
@media (min-width:1000px) and (max-width:1199px){.series .eps{grid-template-columns:minmax(0,1fr)}}
/* 連続ログインの 7 日の並び(演出・受け取りの画面・マイページ) */
.lbs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:12px 0 8px;padding:0;list-style:none}
.lbs li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 7px;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--sub) 45%,transparent);color:var(--sub);font-family:var(--zen);line-height:1;min-width:0}
.lbs li span{font-size:9px;font-weight:700;white-space:nowrap}
.lbs li b{font-size:12px;font-weight:900;white-space:nowrap}
.lbs li.big b{color:var(--acc);font-size:13px}
.lbs li.done{border:1.5px solid var(--ink);background:var(--acc2);color:#111}
.lbs li.today{border:2px solid var(--ink);background:var(--acc);color:#fff}
.lbs li.next{border:2px solid var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--card))}
.lbs li.big.done b,.lbs li.big.today b{color:inherit}
.lbx.on .lbs li.today{animation:lbs-stamp .5s cubic-bezier(.34,1.56,.64,1) .8s both}
@keyframes lbs-stamp{0%{opacity:0;transform:scale(1.9) rotate(-14deg)}100%{opacity:1;transform:none}}
.lbx-card .lbs{margin:12px -6px 6px}
.lbx-x b{color:var(--acc);font-weight:900}
.lbx-card .lbs{opacity:0;transform:translateY(8px);transition:opacity .26s ease-out .4s,transform .32s cubic-bezier(.23,1,.32,1) .4s}.lbx.on .lbx-card .lbs{opacity:1;transform:none}
/* ポイントの硬貨(ヘッダー・マイページ・受け取りの画面) */
.pt-coin{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #111;background:radial-gradient(circle at 34% 28%,#fff6cf 0 10%,#ffd85e 32%,#ffb02e 70%,#ec8a17);color:#111;font:400 11px/1 var(--dela);font-style:normal;box-shadow:inset 0 -2px 0 rgba(150,70,0,.25)}
.acct.pts{gap:6px;padding:4px 12px 4px 5px;border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink);font-family:var(--zen);font-weight:900;font-size:15px;line-height:1}
.acct.pts small{font-size:11px;font-weight:900;color:var(--sub);margin-left:2px}
.acct.pts span{max-width:none}
/* ヘッダーの「ボーナス」(11/09 派手に): 色つきの贈り物・受け取れるときは金色の地に光が流れ、まわりがきらめき、箱が時々はねる */
.bnb{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 8px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-family:var(--dela);font-size:13px;letter-spacing:.04em;white-space:nowrap;transition:transform .14s ease-out}
.bnb .bnb-ic{width:24px;height:24px;flex:none;overflow:visible}
.bnb:active{transform:scale(.95)}
.bnb.ready{isolation:isolate;border:2px solid var(--ink);background:linear-gradient(180deg,#ffe486 0%,#ffc23d 55%,#ff9f1c 100%);color:#111;box-shadow:0 3px 0 var(--ink),0 6px 18px rgba(255,159,28,.45)}
.bnb.ready::before{content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:bnb-shine 3.2s ease-in-out 1s infinite;z-index:-1}
.bnb.ready::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid #ffb02e;opacity:0;animation:bnb-ring 3.2s ease-out 1s infinite;pointer-events:none}
.bnb.ready .bnb-ic{animation:bnb-hop 3.2s cubic-bezier(.34,1.56,.64,1) .5s infinite;transform-origin:50% 90%}
.bnb-sp{position:absolute;width:10px;height:10px;background:#ffb02e;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);pointer-events:none;animation:bnb-tw 1.6s ease-in-out infinite}
.bnb-sp.s1{top:-7px;left:-5px}
.bnb-sp.s2{bottom:-6px;left:40%;width:7px;height:7px;background:#ff4a3d;animation-delay:.55s}
.bnb-sp.s3{top:-6px;right:14px;width:8px;height:8px;animation-delay:1.1s}
.bnb i{position:absolute;top:-5px;right:-4px;width:13px;height:13px;border-radius:50%;background:var(--acc);border:2px solid var(--page);animation:bnb-dot 1.6s ease-in-out infinite}
@keyframes bnb-shine{0%,55%{background-position:150% 0}85%,100%{background-position:-50% 0}}
@keyframes bnb-ring{0%,55%{opacity:0;transform:scale(1)}60%{opacity:.9}90%,100%{opacity:0;transform:scale(1.18,1.35)}}
@keyframes bnb-hop{0%,62%,100%{transform:none}68%{transform:translateY(-4px) rotate(-10deg) scale(1.12)}76%{transform:translateY(0) rotate(8deg) scale(1.06)}84%{transform:rotate(-4deg)}92%{transform:none}}
@keyframes bnb-tw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
@keyframes bnb-dot{0%,100%{transform:none}50%{transform:scale(1.18)}}
@media (max-width:420px){.bnb{width:38px;height:38px;padding:0;justify-content:center}.bnb span{display:none}.bnb .bnb-ic{width:25px;height:25px}.acct.pts{font-size:14px;padding:3px 10px 3px 4px}.bnb-sp.s3{right:-4px;top:auto;bottom:4px}}
@media (max-width:359px){.top .wrap{gap:8px;padding:0 10px}.top nav{gap:6px}.brand .wm{height:25px}}
/* ログインボーナスの受け取りの画面(/bonus) */
.bnp .ac{max-width:460px}
.bn{text-align:center;padding:22px 18px 20px}
.bn h1{margin:0 0 6px}
.bn-k{display:inline-block;margin:0;padding:4px 13px 5px;border-radius:999px;background:var(--acc);color:#fff;font-size:12.5px;font-weight:900;letter-spacing:.04em}
.bn-n{display:flex;justify-content:center;align-items:center;gap:8px;margin:14px 0 4px;font-family:var(--dela);font-size:22px;color:var(--acc);line-height:1}
.bn-n b{font-weight:400;font-size:52px;text-shadow:3px 3px 0 var(--ink)}
.bn-n small{font-size:20px}
.bn-n .pt-coin{width:44px;height:44px;font-size:20px;border-width:2.5px;box-shadow:inset 0 -4px 0 rgba(150,70,0,.25),0 3px 0 #111;margin-right:2px}
.bn-n.got{opacity:.55}
.bn-say{margin:6px 0 0;font-size:13px;font-weight:700;line-height:1.7;word-break:auto-phrase}
.bn-say b{color:var(--acc);font-weight:900}
.bn-ep{margin:12px 0 0;font-size:12.5px;font-weight:900;color:var(--ink);word-break:auto-phrase}
.bn .bn-go{margin-top:16px}
.bn-claim{background:var(--acc);color:#fff;box-shadow:0 5px 0 var(--ink),0 14px 26px rgba(255,74,61,.28);animation:bn-breathe 2.2s ease-in-out .8s infinite}
@keyframes bn-breathe{0%,100%{transform:none}50%{transform:scale(1.03)}}
.bn .ac-fine{text-align:left}
.lk-card .bn-lk{margin:0 0 12px;background:var(--acc2);color:#111;box-shadow:0 5px 0 var(--ink);font-size:16px;letter-spacing:.04em}
.lbx-card>:not(.lbx-cf):not(.lbx-coin){position:relative;z-index:1}.lbx-cf{z-index:0}
/* マイページのポイント */
.ac-bal{display:flex;align-items:center;gap:8px}
.ac-bal .pt-coin{width:36px;height:36px;font-size:16px;border-width:2.5px}
.ac-streak{margin:4px 0 14px;padding:12px 12px 10px;border-radius:14px;background:var(--soft)}
.ac-streak p{margin:0;font-size:13px;font-weight:700}
.ac-streak p b{color:var(--acc);font-weight:900}
.ac-streak .bn-go{margin-top:6px;padding-top:12px;padding-bottom:12px;font-size:16px}
/* 作品のページの表紙: 幅に対して高さが足りない画面(タブレットの縦・横長の窓)では、表紙を真ん中に置き、左右をぼかした表紙で埋める(11/09 ユーザー「右横に余白があるよ」) */
@media (max-width:999px) and (min-aspect-ratio:400/639){
.sp-cover{width:100%;aspect-ratio:auto;height:72vh;max-height:none;background:#111}
.sp-cover::before{content:"";position:absolute;inset:-60px;background:var(--cv) 50% 30%/cover no-repeat;filter:blur(30px) saturate(1.15);opacity:.65}
.sp-cover .s-art{position:relative;width:calc(72vh * 4 / 4.6);max-width:100%;margin:0 auto;box-shadow:0 0 50px rgba(0,0,0,.35)}
.sp-cover .s-shade{z-index:1}
.sp-cover .sp-logo{z-index:2;width:min(84%,calc(72vh * 4 / 4.6 * .84))}}
@media (prefers-reduced-motion:reduce){.bnb.ready .bnb-ic,.bnb.ready::before,.bnb.ready::after,.bnb-sp,.bnb i,.bn-claim,.lbx.on .lbs li.today{animation:none}.bnb.ready::after{opacity:0}}
/* 演出の見本(/bonus/preview・検証のサイトと管理者だけ): トップの上に、切り替えの小さな帯 */
.pv-bar{position:fixed;left:0;right:0;margin:0 auto;width:fit-content;max-width:calc(100vw - 16px);top:calc(66px + env(safe-area-inset-top));z-index:80;display:flex;align-items:center;gap:5px;padding:5px;border-radius:999px;border:2px solid var(--ink);background:var(--card);box-shadow:0 3px 0 var(--ink),0 10px 24px rgba(0,0,0,.18);font-family:var(--zen)}
.pv-bar b{padding:0 6px 0 8px;font-size:11px;font-weight:900;color:var(--sub)}
.pv-tab,.pv-again{display:grid;place-items:center;height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:900;white-space:nowrap}
.pv-tab.on{background:var(--acc2);color:#111;border:1.5px solid var(--ink)}
.pv-again{background:var(--btn);color:var(--btnfg)}
/* ポイントの数字を金色に(11/09 ユーザー「ポイント数の数字を金色で光沢をつけて」): 上から明るい金 → 濃い山吹 → また明るく、の金属の帯。墨のふちと影。演出のあいだは光の筋が横に流れる */
.lbx-n b,.lbx-n small,.bn-n b,.bn-n small{color:transparent;background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%),linear-gradient(180deg,#fffbe0 0%,#ffe680 18%,#ffc22e 44%,#d98200 53%,#ffc93f 66%,#ffeaa0 86%,#fff8d6 100%);background-size:280% 100%,100% 100%;background-position:135% 0,0 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1.6px #111;text-shadow:none;filter:drop-shadow(3px 3px 0 #111)}
.lbx-n small,.bn-n small{-webkit-text-stroke:1.2px #111;filter:drop-shadow(2px 2px 0 #111)}
.lbx.on .lbx-n b,.lbx.on .lbx-n small{animation:gold-shine 2.4s ease-in-out 1.2s infinite}
.lbx.on .lbx-n.pop b{animation:lbx-pop .34s cubic-bezier(.34,1.56,.64,1),gold-shine 2.4s ease-in-out .3s infinite}
.bn-n b,.bn-n small{animation:gold-shine 3s ease-in-out .8s infinite}
@keyframes gold-shine{0%{background-position:135% 0,0 0}50%,100%{background-position:-35% 0,0 0}}
@media (prefers-reduced-motion:reduce){.lbx.on .lbx-n b,.lbx.on .lbx-n small,.lbx.on .lbx-n.pop b,.bn-n b,.bn-n small{animation:none}}
.lbx-n b,.lbx-n small,.bn-n b,.bn-n small{padding:.08em .06em .22em;margin:-.08em -.06em -.22em}
.bn-n small{align-self:flex-end;margin-bottom:calc(8px - .22em)}
/* 本棚のタブ(仕様 MC-60): 読んだ作品 / 購入した作品 */
.sh-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 16px 14px;padding:4px;border-radius:999px;background:var(--soft)}
.sh-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border:0;border-radius:999px;background:transparent;color:var(--sub);font:900 14px var(--zen);cursor:pointer;transition:background-color .16s ease-out,color .16s ease-out}
.sh-tabs button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line),0 2px 8px rgba(0,0,0,.08)}
.sh-tabs b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--acc);color:#fff;font-size:11px;line-height:20px;text-align:center}
.sh-tabs b:empty{display:none}
.bk-note{margin:0 16px 12px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--acc2) 18%,var(--card));font-size:13px;font-weight:900}
/* 本棚の購入した作品: 話ごとのボタン(11/10) */
.bk-buy{grid-template-columns:62px minmax(0,1fr);align-items:start}
.bk-buy .bk-cv img{display:block}
.bk-buy a.bk-t{color:inherit}
.bk-eps{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bk-ep{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 15px;border-radius:999px;background:var(--btn);color:var(--btnfg);font:900 13.5px var(--zen);box-shadow:0 3px 0 var(--btnsh);white-space:nowrap;transition:transform .14s ease-out}
.bk-ep:active{transform:translateY(1px) scale(.97)}
.bk-ep small{display:none;font-size:10.5px;font-weight:900}
.bk-ep.read{background:var(--card);color:var(--sub);border:1.5px solid var(--line);box-shadow:none;padding:0 12px}
.bk-ep{gap:0}.bk-ep em{font-style:normal}.bk-ep.read em{display:none}.bk-ep small{margin-left:6px}
.bk-ep.read small{display:inline;padding:1px 6px;border-radius:999px;background:var(--soft);color:var(--sub)}
.bk-ep.more{background:transparent;color:var(--ink);border:1.5px dashed var(--line);box-shadow:none}
.bk-ep.more i{font-style:normal}
@media (max-width:420px){.bk-buy{grid-template-columns:56px minmax(0,1fr)}.bk-ep{height:34px;padding:0 13px;font-size:13px}}

/* Cookie の同意のバナー(株式会社Game のサイト共通・仕様 P-54)。画面の下に小さく。スマホは下のタブの上 */
.mcc{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--ink),0 14px 30px rgba(0,0,0,.16);font-size:12.5px;line-height:1.65}
.mcc p{flex:1 1 250px;margin:0}
.mcc a{margin-left:4px;text-decoration:underline;text-underline-offset:3px}
.mcc-b{display:flex;gap:8px;margin-left:auto}
.mcc-b button{min-height:40px;padding:6px 16px;border:2px solid var(--ink);border-radius:999px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.mcc-ok{background:var(--ink);color:var(--page)}
.mcc-no{background:transparent;color:var(--ink)}
@media (max-width:999px){.v2 .mcc{bottom:calc(62px + 10px + env(safe-area-inset-bottom))}}
@media (min-width:1000px){.mcc{left:24px;right:auto;bottom:24px;margin:0}}
.ck-set{padding:0;border:0;background:none;color:inherit;font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lg p a,.lg td a{text-decoration:underline;text-underline-offset:3px}

/* 読み終えた所の、この話の題(各話の題は読む前には出さない・仕様 MC-62) */
.ep-done{margin:0 auto 26px;font-family:var(--serif);font-weight:800;font-size:19px;line-height:1.6}
.ep-done span{display:block;margin-bottom:2px;font-family:var(--zen);font-size:12px;font-weight:900;letter-spacing:.12em;opacity:.7}
.kp-done{margin:14px 0 6px;text-align:center}
/* スマホの大きい機種(幅 421〜519px)でもヘッダーが横にはみ出さないように、小さい並びにする(2026-11-10 ユーザー「SP で右に余白」) */
@media (min-width:421px) and (max-width:519px){
 .brand{gap:5px}.brand .mk{width:30px;height:30px}.brand .wm{height:29px}.top nav{gap:10px}
 .bnb{width:38px;height:38px;padding:0;justify-content:center}.bnb span{display:none}.bnb .bnb-ic{width:25px;height:25px}.bnb-sp.s3{right:-4px;top:auto;bottom:4px}
 .acct.pts{font-size:14px;padding:3px 10px 3px 4px}.acct span{max-width:5.5em;overflow:hidden;text-overflow:ellipsis}
}
.top .wrap,.top nav{min-width:0}