:root{--bg:#fff;--ink:#111;--ink-weak:#444;--acc:#ff5a8a;--acc-2:#f0e24b;--acc-3:#6fd19e;--acc-4:#9b87ff;--radius:18px}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans JP','Inter',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN','Yu Gothic','メイリオ',sans-serif;line-height:1.7}
a{color:var(--ink);text-decoration:none}
.container{width:min(1100px,90%);margin-inline:auto}
.pad-y{padding:56px 0} .center{text-align:center}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:20}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:900;letter-spacing:.5px}
.menu{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav-toggle{display:none}
.hero{position:relative;padding:96px 0 64px;overflow:hidden}
.hero-title{font-size:clamp(32px,6vw,64px);margin:0 0 8px} .script{font-family:'Pacifico',cursive;font-weight:400}
.hero-sub{font-size:clamp(16px,2.5vw,20px);color:var(--ink-weak);margin-bottom:24px}
.hero-illustrations::before,.hero-illustrations::after{content:'';position:absolute;inset:auto auto -40% -10%;width:600px;height:600px;background:radial-gradient(600px 600px at 60% 40%, rgba(255,90,138,.15), transparent 60%);transform:rotate(-8deg)}
.hero-illustrations::after{left:auto;right:-15%;inset:auto -15% -20% auto;background:radial-gradient(600px 600px at 40% 50%, rgba(155,135,255,.18), transparent 60%)}
.section-title{font-size:28px;margin:0 0 16px}
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.work-card{background:#fff;border:1px solid #eee;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.04);transition:transform .15s ease, box-shadow .2s ease}
.work-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.work-thumb{aspect-ratio:3/2;overflow:hidden;background:#f6f6f6}
.thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-placeholder{width:100%;height:100%;background:repeating-linear-gradient(45deg,#f2f2f2,#f2f2f2 10px,#fff 10px,#fff 20px)}
.work-title{font-size:18px;margin:12px 16px 0}
.work-chipline{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;margin:0;list-style:none}
.chip{background:var(--acc);color:#fff;border-radius:999px;padding:4px 10px;font-size:12px}
.chip-outline{background:transparent;color:var(--ink);border:1px solid #ddd}
.page-title{font-size:36px;margin-bottom:12px}
.entry{padding:12px 0;border-bottom:1px solid #eee}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid #ddd}
.btn-primary{background:var(--acc);color:#fff;border-color:transparent}
.site-footer{padding:40px 0;border-top:1px solid #eee;margin-top:48px}
/* Forms */
.works-filter{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.works-filter .filter-row{display:flex;align-items:center;gap:8px}
select, button{font:inherit}
/* Single work */
.work-single .work-head{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.work-single .work-meta{display:flex;gap:16px;flex-wrap:wrap;list-style:none;padding:0;margin:8px 0}
.work-single .work-terms{display:flex;gap:16px;color:var(--ink-weak)}
.work-single .work-thumb{margin:16px 0;border-radius:var(--radius);overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}
@media (max-width:800px){ .menu{display:none} .nav-toggle{display:inline-flex} }
/* ===== Games list (simple white layout) ===== */
.games-archive .game-row, .games-list-front .game-row{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;padding:16px 0}
.game-thumb{display:block;width:96px;height:96px;border-radius:14px;overflow:hidden;background:#111;color:#fff;display:grid;place-items:center;font-weight:700}
.game-thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.game-thumb-ph{width:100%;height:100%;display:grid;place-items:center;background:#111;color:#fff;border-radius:14px}
.game-body{min-width:0}
.game-title, .game-title-sm{margin:0 0 4px;font-size:clamp(18px,2.6vw,22px);font-weight:700}
.game-year{font-weight:400;color:var(--ink-weak);margin-left:6px}
.game-div{border:0;border-top:1px solid #ddd;margin:6px 0 8px}
.game-excerpt p{margin:0 0 .5em}
.game-row-sep{border:0;border-top:1px solid #eee;margin:12px 0}
@media (max-width:700px){ .games-archive .game-row, .games-list-front .game-row{grid-template-columns:72px 1fr} .game-thumb{width:72px;height:72px;border-radius:12px} }