:root{--ink:#1a1a1a;--sub:#666;--line:#e5e5e5;--accent:#c93a22;--bg:#fff;--tag-bg:#f4f2ee}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--bg);line-height:1.8;-webkit-font-smoothing:antialiased}
.serif{font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* header */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.96);z-index:10}
.hd{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:1.7rem;font-weight:700;letter-spacing:.35em;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif}
.logo small{font-size:.62rem;letter-spacing:.2em;color:var(--sub);font-weight:400;margin-left:.6em;font-family:inherit}
nav a{margin-left:1.6em;font-size:.85rem;color:var(--sub)}
nav a:hover{color:var(--ink)}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;padding:44px 0 36px;border-bottom:1px solid var(--line)}
.hero-txt .cat{font-size:.75rem;letter-spacing:.25em;color:var(--accent);margin-bottom:.9em}
.hero-txt h1{font-size:1.9rem;line-height:1.55;margin-bottom:.8em;font-weight:700}
.hero-txt .who{font-size:.85rem;color:var(--sub);margin-bottom:1.4em}
.btn{display:inline-block;border:1px solid var(--ink);padding:.55em 2.2em;font-size:.82rem;letter-spacing:.15em}
.btn:hover{background:var(--ink);color:#fff}
.hero-img{border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover;width:100%}
/* section titles */
.sec-head{display:flex;align-items:baseline;gap:14px;padding:40px 0 24px;border-bottom:2px solid var(--ink)}
.sec-head h2{font-size:1.5rem;letter-spacing:.1em}
.sec-head span{font-size:.8rem;color:var(--sub);letter-spacing:.2em}
/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:32px 0 20px}
.card{border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .15s}
.card:hover{box-shadow:0 4px 18px rgba(0,0,0,.08)}
.card .thumb{aspect-ratio:16/10;object-fit:cover;width:100%;border-bottom:1px solid var(--line)}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .title{font-size:.95rem;font-weight:700;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .who{font-size:.78rem;color:var(--sub)}
.card .date{font-size:.72rem;color:#999;letter-spacing:.08em}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.68rem;background:var(--tag-bg);padding:.28em .8em;border-radius:2px;color:#555}
.tag.cat{background:#eee6e0;color:var(--accent)}
/* article page */
.bread{font-size:.75rem;color:#999;padding:24px 0 0}
.art{max-width:860px;margin:0 auto;padding:16px 0 64px}
.art h1{font-size:1.75rem;line-height:1.6;margin:18px 0 20px;font-weight:700}
.art .meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:26px}
.art .meta .who{font-size:.85rem}
.art .meta .date{font-size:.78rem;color:#999}
.art .hero-img{width:100%;border:1px solid var(--line);margin-bottom:30px}
.lead{font-size:.98rem;line-height:2.1;margin-bottom:14px}
.quote{border-left:3px solid var(--accent);padding:10px 0 10px 20px;margin:30px 0;font-size:1.05rem}
/* manga */
.manga-block{margin:44px 0}
.manga-block .mnum{font-size:.72rem;letter-spacing:.3em;color:var(--accent);margin-bottom:6px}
.manga-block h3{font-size:1.15rem;margin-bottom:16px}
.manga-block img{border:1px solid var(--line);width:100%;margin-bottom:18px}
.manga-block p{font-size:.95rem;line-height:2.05;color:#333}
/* profile box */
.profile{margin:48px 0 8px;border:1px solid var(--line);padding:26px 30px}
.profile h3{font-size:.78rem;letter-spacing:.3em;color:var(--sub);margin-bottom:14px}
.profile table{width:100%;font-size:.85rem;border-collapse:collapse}
.profile th{text-align:left;font-weight:400;color:var(--sub);padding:7px 16px 7px 0;width:9em;vertical-align:top;white-space:nowrap}
.profile td{padding:7px 0}
/* related */
.related{border-top:2px solid var(--ink);padding-top:28px;margin-top:52px}
.related h3{font-size:.85rem;letter-spacing:.25em;margin-bottom:18px}
.rel-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rel{font-size:.8rem}
.rel img{aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);margin-bottom:8px}
.rel p{line-height:1.6;font-weight:700}
/* list page filter */
.filters{padding:26px 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.fbtn{border:1px solid var(--line);background:#fff;font-size:.75rem;padding:.4em 1em;cursor:pointer;border-radius:2px;color:#555}
.fbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* about/contact */
.page{max-width:760px;margin:0 auto;padding:40px 0 80px}
.page h1{font-size:1.6rem;margin-bottom:26px;letter-spacing:.08em}
.page p{margin-bottom:16px;font-size:.95rem}
.page .kagi{color:var(--accent)}
form .row{margin-bottom:18px}
form label{display:block;font-size:.8rem;color:var(--sub);margin-bottom:6px}
form input,form textarea{width:100%;border:1px solid var(--line);padding:10px 12px;font-size:.9rem;font-family:inherit}
.note{font-size:.78rem;color:#999;margin-top:8px}
/* footer */
footer{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 44px;font-size:.78rem;color:var(--sub)}
.f-in{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
footer .f-logo{font-size:1.2rem;letter-spacing:.35em;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif;color:var(--ink)}
footer nav a{margin-left:1.2em;font-size:.78rem}
.copy{margin-top:22px;font-size:.72rem;color:#aaa;letter-spacing:.08em}
@media(max-width:860px){
 .hero{grid-template-columns:1fr;gap:20px}
 .cards{grid-template-columns:1fr 1fr}
 .rel-list{grid-template-columns:1fr}
 nav a{margin-left:1em}
 .art h1{font-size:1.4rem}
}
@media(max-width:560px){.cards{grid-template-columns:1fr}}