@charset "UTF-8";
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;line-height:1.75;overflow-wrap:anywhere}
a{color:inherit}
img{max-width:100%;height:auto}
ul{margin:0;padding:0;list-style:none}
.share ul{display:flex;flex-wrap:wrap;gap:8px}
.share a,.share button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font:inherit;font-size:.85rem;line-height:1.2;text-decoration:none;cursor:pointer;color:var(--sfg);background:var(--sbg);border:var(--sbd);border-radius:var(--sr)}
.share a:hover,.share button:hover{filter:brightness(1.12)}
.share svg{width:15px;height:15px;fill:currentColor}
.share h2{margin:0 0 12px}

:root{--bg:#121316;--fg:#ececf0;--mute:#9a9ba3;--acc:#ffc93c;--card:#1c1d22;--line:#2c2d33;--sfg:var(--fg);--sbg:var(--card);--sbd:1px solid var(--line);--sr:999px}
body{background:var(--bg);color:var(--fg);font-family:"Noto Sans JP",system-ui,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.top{border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap}
.logo{font-weight:700;font-size:1.15rem;text-decoration:none} .logo span{color:var(--acc)}
.nav ul{display:flex;gap:4px;flex-wrap:wrap} .nav a{text-decoration:none;padding:6px 10px;border-radius:8px;font-size:.9rem;color:var(--mute)} .nav a:hover{background:var(--bg);color:var(--fg)}
.hero{padding:72px 0 40px} .eyebrow{color:var(--acc);font-weight:700;letter-spacing:.12em;font-size:.78rem;margin:0}
h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.3;margin:.3em 0} .lead{color:var(--mute);max-width:640px;margin:0}
section{margin:0 0 56px} h2{font-size:1.25rem;margin:0 0 18px;display:flex;align-items:baseline;gap:10px} h2 small{color:var(--mute);font-weight:400;font-size:.75rem;letter-spacing:.1em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cards a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:.2s}
.cards a:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tag{align-self:flex-start;font-size:.7rem;font-weight:700;color:var(--acc);border:1px solid currentColor;border-radius:4px;padding:1px 6px}
.ttl{font-size:1.05rem} .desc{color:var(--mute);font-size:.88rem;flex:1} .dom{font-size:.75rem;color:var(--mute)}
.notice{background:var(--card);border-left:4px solid var(--acc);padding:16px 20px;border-radius:0 10px 10px 0;color:var(--mute);font-size:.92rem}
.links{display:flex;flex-wrap:wrap;gap:8px 18px} .links a{color:var(--mute);font-size:.9rem}
.site-foot{border-top:1px solid var(--line);padding:28px 20px;text-align:center;color:var(--mute)} .upd{font-size:.8rem;margin:0}
/* card thumbnails: [tag] title / image / text */
.cards a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr auto;align-content:start;column-gap:10px;row-gap:10px;overflow:hidden}
.cards .tag{align-self:center}
.cards .ttl{align-self:center;line-height:1.4}
.thumb,.cards .desc,.cards .dom{grid-column:1/-1}
.thumb{display:block;width:calc(100% + 40px);max-width:none;height:auto;aspect-ratio:16/10;object-fit:cover;margin:2px -20px 2px;background:#1a1b20;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:transform .35s}
.cards a:hover .thumb{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.thumb,.cards a:hover .thumb{transition:none;transform:none}}