:root {
  --surface:#ffffff; --fg:#111111; --sub:#666666; --line:#dddddd; --soft:#eeeeee; --inv:#e2e2e2; --inv-fg:#111111;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--fg); line-height:1.7;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  background:#b3b3b3; }
/* iPhoneはfixed背景が効かないので、画面に固定した1枚絵のレイヤーにする */
body::before { content:""; position:fixed; top:0; left:0; width:100%; height:100vh; height:100lvh; z-index:-1;
  background:#b3b3b3 url("bg.jpg") center / cover no-repeat; pointer-events:none; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--fg); outline-offset:3px; }

header { max-width:760px; margin:0 auto; padding:16px 16px 0; display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700;
  background:var(--surface); padding:6px 16px 6px 8px; border-radius:999px; }
.brand img { width:36px; height:36px; object-fit:contain; }
nav { display:flex; gap:6px; background:var(--surface); padding:5px; border-radius:999px; }
nav a { text-decoration:none; font-size:.85rem; font-weight:700; padding:6px 14px; border-radius:999px; }
nav a[aria-current="page"] { background:var(--inv); color:var(--inv-fg); }

main { max-width:760px; margin:0 auto; padding:24px 16px 56px; }
h1 { display:inline-block; font-size:1.2rem; margin:0 0 20px; padding:6px 20px; letter-spacing:.04em;
  background:var(--surface); border-radius:999px; }

.grid { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.card { display:block; background:var(--surface); border:2px solid var(--line); border-radius:20px;
  overflow:hidden; text-decoration:none; box-shadow:0 3px 0 var(--line); transition:transform .12s, border-color .12s, box-shadow .12s; }
@media (hover:hover) { .card:hover { border-color:var(--fg); box-shadow:0 3px 0 var(--fg); transform:translateY(-2px); } }
.card img { display:block; width:calc(100% - 24px); margin:12px 12px 0; border-radius:12px; aspect-ratio:1200 / 630; object-fit:cover; background:var(--soft); }
.card .body { display:block; padding:16px 20px 20px; }
.card .name { display:block; font-weight:700; }
.tag { display:inline-block; margin-top:6px; font-size:.72rem; font-weight:700; padding:1px 10px;
  border:1.5px solid var(--fg); border-radius:999px; }
.card .desc { display:block; margin-top:6px; color:var(--sub); font-size:.85rem; }

.panel { background:var(--surface); border-radius:20px; padding:20px 20px 22px; }
.intro { margin-bottom:28px; }
.panel p { margin:0 0 12px; }
.panel p:last-child { margin-bottom:0; }
.links { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.btn { display:inline-block; text-decoration:none; font-weight:700; font-size:.9rem; padding:11px 22px; border-radius:999px;
  background:var(--surface); color:var(--fg); border:2px solid var(--fg); box-shadow:0 3px 0 var(--line); }
.btn:hover { transform:translateY(-1px); }
.btn.ghost { background:var(--surface); color:var(--fg); border:2px solid var(--fg); box-shadow:none; }

footer { text-align:center; padding:0 16px 40px; font-size:.75rem; }
footer span { background:var(--surface); padding:4px 12px; border-radius:999px; color:var(--sub); }

.snsBox { margin:0 0 16px; line-height:1.4; }
.snsCat { display:inline-block; }
.snsCat img { display:block; height:auto; }
.snsLink { display:inline-block; font-size:.85rem; color:var(--fg); text-decoration:none; background:var(--surface); padding:4px 12px; border-radius:999px; }
.snsLink:hover { text-decoration:underline; }
footer p { margin:0 0 16px; }
.snsCat:focus-visible, .snsLink:focus-visible { outline:3px solid var(--fg); outline-offset:2px; }