/* doujinshelf.com — 1枚だけのスタイルシート。外部フォント・外部スクリプトは読まない。 */
:root{
  --surface:#ffffff; --ink:#1e201d; --hero:#654848; --sub:#312b2e; --fog:#5f555c;
  --rose:#d81b60; --rule:#c3c1c1; --hd-border:#eccad8; --radius:2px; --maxw:860px;
  --font:system-ui,-apple-system,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{margin:0;background:var(--surface);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}

.hd{height:48px;border-bottom:1px solid var(--hd-border);display:flex;align-items:center;gap:18px;
    padding:0 20px;max-width:1100px;margin:0 auto}
.brand{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--hero);text-decoration:none}
.hd nav{margin-left:auto;display:flex;gap:16px;align-items:center}
.hd nav a{font-size:13px;color:#1d1b1c;text-decoration:none}
.hd nav a:hover{color:var(--rose)}
.hd nav a.lang{color:var(--fog);border-left:1px solid #e6e3e2;padding-left:16px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px 56px}
h1{font-size:clamp(1.55rem,1.1rem + 2vw,2.25rem);line-height:1.22;letter-spacing:-.015em;
   color:var(--hero);margin:30px 0 14px;font-weight:650}
h2{font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);letter-spacing:-.01em;margin:34px 0 10px;font-weight:650}
p,li{font-size:15px;line-height:1.85;color:var(--sub);margin:0 0 14px}
.disc{font-size:12.5px;color:var(--fog);line-height:1.7;margin:0 0 20px}
.upd{font-size:12.5px;color:var(--fog);margin:-6px 0 18px}
.note{font-size:12.5px;color:var(--fog);margin-top:30px}
a.inline{color:var(--rose);text-decoration:none;font-weight:600}
a.inline:hover{text-decoration:underline}
ol,ul.plain{padding-left:1.3em;margin:0 0 16px}
ol li,ul.plain li{margin-bottom:8px}

.work{margin-top:6px}
.wrow{display:flex;gap:18px;align-items:flex-start;margin-bottom:8px}
.rhead{margin:18px 0 8px}
.jk{flex:0 0 250px;display:block}
.jk.big{flex:0 0 330px}
.jk img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.wbody{flex:1;min-width:0}
.spec{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0 0 12px}
.spec dt{font-size:12px;color:#403b3d;white-space:nowrap}
.spec dd{font-size:13px;color:#3a3638;margin:0}
.usd{color:var(--fog);font-size:12px}
.buy{display:inline-block;font-size:13.5px;font-weight:650;color:#fff;background:var(--hero);
     padding:9px 16px;border-radius:var(--radius);text-decoration:none;margin-top:4px}
.buy:hover{background:var(--rose)}
/* 作品ブロックから自サイトのレビューへ。DLsiteへのCTAと見た目で区別する */
a.inline.rev{display:inline-block;margin:10px 0 0 14px;font-size:13px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 14px;margin:6px 0 10px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:5px}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);display:block}
.cttl{font-size:13px;color:#080808;line-height:1.4}
.cmeta{font-size:11.5px;color:#171617}

ul.arts{list-style:none;padding:0;margin:4px 0 8px}
ul.arts li{margin:0}
ul.arts a{display:block;text-decoration:none;padding:13px 0;border-top:1px solid #e6e3e2}
ul.arts li:last-child a{border-bottom:1px solid #e6e3e2}
ul.arts b{display:block;font-size:15px;color:var(--ink);font-weight:650;margin-bottom:3px}
ul.arts span{font-size:13px;color:var(--fog)}
ul.arts a:hover b{color:var(--rose)}

.ft{border-top:2px solid var(--rule);max-width:var(--maxw);margin:0 auto;
    padding:18px 20px 40px;font-size:12px;color:var(--fog);line-height:1.8}

#ag{position:fixed;inset:0;background:#fff;z-index:99;display:flex;align-items:center;justify-content:center;padding:20px}
#ag[hidden]{display:none}
.agbox{max-width:420px;text-align:center}
.agbox h2{margin:0 0 10px;color:var(--hero)}
.agbox p{font-size:14px}
.agbox button{font:inherit;font-size:14px;font-weight:650;color:#fff;background:var(--hero);
              border:0;border-radius:var(--radius);padding:11px 20px;cursor:pointer}
.agbox a{font-size:13px;color:var(--fog);margin-left:14px}

@media (max-width:760px){
  .wrap{padding:0 16px 40px} .hd{padding:0 16px} .hd nav{gap:12px} .hd nav a{font-size:12px}
  .hd nav a.lang{padding-left:12px}
  .wrow{display:block} .jk,.jk.big{width:100%;max-width:330px;margin-bottom:12px}
  .grid{grid-template-columns:repeat(2,1fr)}
}