
:root{--bg:#FAF8F4;--ink:#141414;--sub:#6b6660;--line:#e6e1d8;--accent:#FF6B00;--card:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"Noto Sans JP",-apple-system,"Hiragino Sans",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.serif{font-family:"Noto Serif JP","Hiragino Mincho ProN",serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:900;letter-spacing:.14em;font-size:15px}.logo b{color:var(--accent)}
nav{display:flex;gap:22px;font-size:13px;color:var(--sub)}
/* TOP */
.hero{position:relative;margin-top:28px;border-radius:4px;overflow:hidden}
.hero img{width:100%;height:520px;object-fit:cover;display:block;filter:saturate(.9)}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:120px 40px 36px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff}
.kicker{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--accent);text-transform:uppercase}
.hero .kicker{color:#ffb27a}
.hero h1{font-size:40px;line-height:1.35;font-weight:900;margin:10px 0 12px}
.hero p{font-size:14px;opacity:.9}
.series{display:flex;align-items:flex-end;justify-content:space-between;margin:56px 0 20px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.series h2{font-size:26px;font-weight:900}.series span{font-size:12px;color:var(--sub)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block}
.card .meta{font-size:11px;color:var(--sub);margin:12px 0 6px;letter-spacing:.05em}
.card h3{font-size:18px;line-height:1.55;font-weight:700}
.card .who{font-size:12px;color:var(--sub);margin-top:8px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:12px 0 0}
.cat{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:18px}
.cat b{display:block;font-size:12px;letter-spacing:.18em;color:var(--accent)}.cat span{display:block;font-size:15px;font-weight:700;margin-top:6px}.cat small{display:block;font-size:12px;color:var(--sub);margin-top:6px;line-height:1.6}
.cat.soon{opacity:.55}
/* BUDDY本体（アプリ・LP）と同じ見た目の帯：オレンジ地・白マーク・白ボタン */
.band{margin:64px 0 0;background:#FF6B00;color:#fff;border-radius:16px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif}
.band-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:18px;letter-spacing:.04em;margin-bottom:10px}.band-logo img{width:28px;height:28px}
.band p{font-size:20px;font-weight:800;line-height:1.6}.band small{display:block;font-size:13px;opacity:.9;font-weight:500;margin-top:4px}
.band .btn-w{background:#fff;color:#FF6B00;font-weight:800;font-size:15px;padding:15px 28px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:14px;padding:13px 22px;border-radius:999px;white-space:nowrap}
footer{margin-top:72px;border-top:1px solid var(--line);padding:28px 0 48px;font-size:12px;color:var(--sub)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* ARTICLE */
.art-hero img{width:100%;height:560px;object-fit:cover;display:block}
.art{max-width:680px;margin:0 auto;padding:0 20px}
.art .kicker{margin-top:40px}
.art h1{font-size:34px;line-height:1.5;font-weight:900;margin:14px 0 18px}
.byline{display:flex;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:var(--sub)}
.byline .av{width:44px;height:44px;border-radius:50%;background:#d9d3c8 none center/cover}
.byline b{color:var(--ink);font-size:14px;display:block}
.profile{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:20px 22px;margin:28px 0;font-size:13px;line-height:1.9}
.profile dt{font-weight:700;float:left;width:6em;color:var(--sub)}.profile dd{margin-left:6em}
.chap{font-size:12px;letter-spacing:.2em;color:var(--accent);font-weight:700;margin:44px 0 6px}
.art h2{font-size:24px;font-weight:900;line-height:1.5;margin-bottom:18px}
.art p.body{font-size:16.5px;line-height:2.05;margin-bottom:22px}
.ph{height:14px;background:#e9e4da;border-radius:3px;margin:12px 0}.ph.s{width:70%}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0}
.pair figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;display:block}
.pair figcaption{font-size:11px;color:var(--sub);margin-top:6px}
.quote{font-size:24px;line-height:1.7;font-weight:700;border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:36px 0}
.toyou{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0}
.toyou div{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:20px}
.toyou b{display:block;font-size:12px;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}
.toyou p{font-size:15px;line-height:1.85}
.exit{background:var(--accent);color:#fff;border-radius:4px;padding:28px;margin:36px 0;text-align:center}
.exit p{font-size:18px;font-weight:700;line-height:1.7}.exit small{display:block;opacity:.85;margin:6px 0 16px;font-size:12px}
.exit a{display:inline-block;background:#fff;color:var(--accent);font-weight:700;padding:12px 22px;border-radius:999px;font-size:14px}
.next{border-top:1px solid var(--line);padding-top:24px}
/* CATEGORY */
.cat-head{padding:56px 0 28px;border-bottom:2px solid var(--ink)}
.cat-head h1{font-size:44px;font-weight:900}.cat-head p{margin-top:12px;color:var(--sub);font-size:14px;line-height:1.9;max-width:560px}
.list .row{display:grid;grid-template-columns:280px 1fr;gap:28px;padding:28px 0;border-bottom:1px solid var(--line)}
.list img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.list h3{font-size:22px;line-height:1.55;font-weight:900;margin:8px 0}.list p{font-size:14px;color:var(--sub);line-height:1.8}
.draft-badge{position:fixed;right:12px;bottom:12px;background:#141414;color:#fff;font-size:11px;padding:6px 10px;border-radius:4px;opacity:.85;z-index:9}
@media (max-width:720px){
 nav{display:none}.hero img{height:440px}.hero .cap{padding:90px 20px 24px}.hero h1{font-size:28px}
 .grid,.cats{grid-template-columns:1fr}.cats{grid-template-columns:1fr 1fr}
 .band{flex-direction:column;align-items:flex-start;padding:28px 22px}
 .art-hero img{height:420px}.art h1{font-size:26px}.toyou{grid-template-columns:1fr}
 .list .row{grid-template-columns:1fr;gap:12px}.cat-head h1{font-size:34px}
}

.byline .av{background-size:cover;background-position:center}
.empty{padding:80px 0;text-align:center;color:var(--sub);line-height:2}
.empty b{display:block;font-size:22px;color:var(--ink);margin-bottom:8px}
.about{max-width:680px;margin:0 auto;padding:56px 20px 0}
.about h1{font-size:34px;font-weight:900;margin-bottom:24px}
.about h2{font-size:20px;font-weight:900;margin:36px 0 12px}
.about p{font-size:15.5px;line-height:2;margin-bottom:16px}
.art figure.one{margin:28px 0}.art figure.one img{width:100%;border-radius:3px;display:block}
.art figure.one figcaption{font-size:11px;color:var(--sub);margin-top:6px}
.art h3.sub{font-size:18px;font-weight:700;margin:28px 0 12px}
.credit{font-size:11px;color:var(--sub);margin-top:24px}
.hero,.cat{display:block}
