/* 夜の街を思わせる濃紺の地に、各サイトのバッジを大きく並べる。文字は小さく詰めすぎず、バッジを主役に */
:root{color-scheme:dark;--bg:#050912;--fg:#eaf2ff;--dim:#9fb3d3;--edge:rgba(150,195,255,.26);--accent:#8fc8ff;
  --f-disp:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',serif;
  --f-body:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic UI','Meiryo',system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--fg);font-family:var(--f-body);line-height:1.5;-webkit-text-size-adjust:100%;
  background:radial-gradient(ellipse 120% 60% at 50% -10%,rgba(40,90,190,.35),transparent 60%),radial-gradient(ellipse 80% 50% at 90% 110%,rgba(255,120,170,.12),transparent 60%),var(--bg);
  padding:0 max(14px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(14px,env(safe-area-inset-left,0px))}
a{color:var(--accent)}

.hero{max-width:1160px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 22px) 0 10px}
.hcard{position:relative;overflow:hidden;border-radius:20px;padding:18px 24px 16px;
  background:linear-gradient(135deg,rgba(14,34,72,.64),rgba(6,14,32,.52) 45%,rgba(20,52,110,.5));border:1px solid rgba(170,210,255,.42);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(215,235,255,.5),inset 0 0 40px rgba(80,150,255,.14);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hcard::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:60%;pointer-events:none;background:linear-gradient(170deg,rgba(220,238,255,.15),rgba(220,238,255,0) 60%);transform:rotate(-4deg)}
.stag{font-size:11px;letter-spacing:.3em;color:#9fd2ff;font-weight:700}
h1{font-family:var(--f-disp);font-weight:600;font-size:clamp(32px,6vw,54px);line-height:1.1;margin:6px 0 4px;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 26px rgba(95,168,255,.5)}
h1 small{display:block;font-family:var(--f-body);font-size:clamp(13px,1.8vw,16px);font-weight:500;letter-spacing:.14em;color:#bcd9ff;margin-bottom:2px}
.lead{margin:4px 0 0;font-size:clamp(14px,1.9vw,16px);color:#dbe9ff;max-width:52em}

main{max-width:1160px;margin:0 auto}
.grp{margin-top:20px}
.grp h2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-family:var(--f-disp);font-weight:600;font-size:22px;letter-spacing:.08em}
.grp h2 small{font-family:var(--f-body);font-size:13px;font-weight:400;color:var(--dim);letter-spacing:.04em}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.badge{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:16px;overflow:hidden;
  background:rgba(14,26,52,.6);border:1px solid var(--edge);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .18s,box-shadow .18s,border-color .18s}
.badge img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:#0b1428}
.badge .txt{display:flex;flex-direction:column;gap:2px;padding:10px 14px 12px}
.badge b{font-size:17px;font-weight:700;letter-spacing:.02em}
.badge em{font-style:normal;font-size:12px;color:var(--dim)}
.badge .d{font-size:13.5px;color:#d3e2fb;margin-top:2px}
.badge .dom{align-self:flex-start;margin-top:6px;font-size:12px;font-weight:700;color:#1b1400;background:#ffd65c;padding:1px 8px;border-radius:5px}
.badge:hover{transform:translateY(-3px);border-color:rgba(170,215,255,.6);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 24px rgba(90,160,255,.25)}
.badge:focus-visible{outline:3px solid #9fd2ff;outline-offset:3px}

footer{max-width:1160px;margin:26px auto 0;padding:12px 0 22px;border-top:1px solid rgba(150,195,255,.18);font-size:12.5px;color:var(--dim)}
footer p{margin:4px 0}
footer b{color:#ffc4d6;font-weight:700}
footer .org a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:700px){
  .grid{grid-template-columns:1fr;gap:12px}
  .hcard{padding:14px 16px 12px}.stag{font-size:10px;letter-spacing:.16em}
  .grp h2{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.badge{transition:none}.badge:hover{transform:none}}
.badge em.u{align-self:flex-start;font-size:11px;font-weight:700;color:#fff;padding:0 7px;border-radius:4px;background:linear-gradient(rgba(255,170,198,.95),rgba(246,120,160,.92));border:1px solid rgba(255,214,226,.9);text-shadow:0 1px 1px rgba(150,30,70,.45)}

/* 古いブラウザ (Internet Explorer など) への案内 (2026-11-05)。
   入り口のページは IE でも読めるので、上に帯で出すだけ。新しいブラウザでは @supports で消える */
.oldbrowser{position:relative;z-index:10;box-sizing:border-box;padding:16px 20px;background:#fff8d6;color:#111111;border-bottom:2px solid #c9a400;font-family:"Yu Gothic","Meiryo",sans-serif;font-size:17px;line-height:1.7;text-align:center}
.oldbrowser p{margin:0}
.oldbrowser .ob-t{font-weight:bold}
@supports (display:grid){.oldbrowser{display:none !important}}