*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fdfaf3;color:#222;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
 line-height:1.7;-webkit-text-size-adjust:100%}
a{color:#1b4fa0}
img{max-width:100%;display:block}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
 padding:10px 16px;background:#2b2118;border-bottom:4px solid #f0b429}
.brand{color:#fff;font-weight:900;font-size:20px;text-decoration:none}
.navlinks a{color:#ffe9b8;font-weight:800;text-decoration:none;margin-left:14px;font-size:16px}
.wrap{max-width:920px;margin:0 auto;padding:16px}
.hero{max-width:520px;margin:0 auto;padding:12px 16px 28px;text-align:center}
.poster{border:4px solid #222;border-radius:18px;overflow:hidden;background:#eee;
 box-shadow:0 8px 0 #d8cdb8;margin:0 auto}
.poster img{width:100%;aspect-ratio:2/3;object-fit:cover}
.orig{margin:14px 0 2px;font-size:15px;color:#555;font-weight:700;letter-spacing:.02em}
.jatitle{margin:0 0 14px;font-size:clamp(28px,8vw,44px);font-weight:900;line-height:1.25;color:#222}
.badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 6px}
.badge{background:#fff;border:2px solid #222;border-radius:14px;padding:8px 12px;font-weight:800;
 font-size:15px;box-shadow:0 3px 0 #d8cdb8}
.badge .bi{font-size:20px;margin-right:4px}
.note{color:#444;font-size:14px;margin:6px 0 18px}
.heroeyebrow{margin:0 0 10px;font-size:15px;font-weight:900;color:#6b4d17;letter-spacing:.18em}
.pickwhy{margin:20px 0 0;font-size:13px;color:#333;line-height:1.8;text-align:left;
 background:#fff;border:2px solid #cdbf9f;border-radius:12px;padding:10px 12px}
.btns{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.btn{display:flex;align-items:center;justify-content:center;min-height:64px;border-radius:16px;
 border:3px solid #222;font-size:22px;font-weight:900;text-decoration:none;color:#222;cursor:pointer;
 box-shadow:0 5px 0 #b9a888;background:#fff}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b9a888}
.btn-go{background:#f0b429}
.btn-dice{background:#fff}
.sec{max-width:920px;margin:0 auto;padding:26px 16px;border-top:3px dashed #ded2ba}
.sec h2{font-size:24px;font-weight:900;margin:0 0 14px}
.moodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:520px){.moodgrid{grid-template-columns:repeat(2,1fr)}}
.mood{position:relative;display:block;border:3px solid #222;border-radius:16px;overflow:hidden;
 aspect-ratio:1/1;text-decoration:none;box-shadow:0 5px 0 #b9a888;background:#333}
.mood img{width:100%;height:100%;object-fit:cover;opacity:.5}
.mood span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
 justify-content:center;color:#fff;font-weight:900;font-size:clamp(18px,5vw,26px);
 text-shadow:0 2px 6px #000,0 0 14px #000}
.mood span b{font-size:clamp(34px,10vw,52px);line-height:1;margin-bottom:6px}
.searchbox{display:flex;gap:8px}
.searchbox input{flex:1;min-height:60px;font-size:20px;padding:8px 14px;border:3px solid #222;
 border-radius:14px;background:#fff;color:#222}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:8px}}
.card{display:block;text-decoration:none;color:#222}
.card .ph{border:3px solid #222;border-radius:12px;overflow:hidden;background:#eee}
.card img{width:100%;aspect-ratio:2/3;object-fit:cover}
.card .ct{font-size:13px;font-weight:800;margin-top:6px;line-height:1.35;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fbtn{background:#fff;border:3px solid #222;border-radius:14px;min-height:56px;padding:6px 14px;
 font-size:16px;font-weight:900;color:#222;cursor:pointer;box-shadow:0 4px 0 #b9a888}
.fbtn[aria-pressed=true]{background:#f0b429}
/* 作品ページ */
.showhead{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.showhead .ph{width:150px;flex:0 0 150px;border:3px solid #222;border-radius:14px;overflow:hidden}
.showhead h1{font-size:clamp(24px,6vw,34px);font-weight:900;margin:0 0 4px;line-height:1.25}
.showhead .orig{margin:0 0 10px;text-align:left}
.chartbox{background:#fff;border:3px solid #222;border-radius:16px;padding:12px 8px 8px;margin:14px 0}
.chartscroll{overflow-x:auto}
.legend{font-size:13px;color:#444;padding:0 8px 6px}
.rulerlab{font-size:11px;fill:#666}
.epcard{background:#fff;border:3px solid #222;border-radius:16px;padding:12px;margin:12px 0}
.epcard img{border:2px solid #222;border-radius:10px;margin-bottom:10px}
.blur{filter:blur(6px);cursor:pointer;user-select:none}
.blurwrap{position:relative}
.blurhint{font-size:13px;color:#666;margin-top:4px}
.affi{display:block;text-align:center;min-height:64px;line-height:1.3;padding:14px;border-radius:16px;
 border:3px solid #222;background:#c0392b;color:#fff;font-weight:900;font-size:19px;text-decoration:none;
 box-shadow:0 5px 0 #7d2318;margin:8px 0 4px}
.adlabel{font-size:12px;color:#666;text-align:center;margin:0 0 18px}
.foot{background:#2b2118;color:#f2e8d5;margin-top:40px;padding:22px 16px}
.foot a{color:#ffd97a}
.credit{max-width:920px;margin:0 auto 8px;font-size:13px;line-height:1.8}
.credit.small{opacity:.85}
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.tbl th,.tbl td{border:2px solid #222;padding:8px;text-align:left}
.tbl th{background:#f5ecd8}
.kv{font-size:14px;color:#333}
.hidden{display:none!important}
.pill{display:inline-block;background:#f5ecd8;border:2px solid #222;border-radius:999px;
 padding:2px 10px;font-size:13px;font-weight:800;margin:2px 4px 2px 0}
h1.pt{font-size:clamp(24px,6vw,32px);font-weight:900;margin:0 0 12px}