:root{
  --ink:#1f2328; --muted:#5b6670; --line:#e3e6ea; --bg:#fbfcfd;
  --card:#ffffff; --accent:#1f6f6b; --accent-ink:#0f4a47;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.75;
  font-size:16px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
header.hero{padding:48px 0 28px; border-bottom:1px solid var(--line)}
.brand{font-size:26px; font-weight:800; letter-spacing:.5px}
.brand small{display:block; font-size:13px; color:var(--muted); font-weight:600; margin-top:4px}
.tagline{font-size:17px; font-weight:700; margin-top:14px}
.lead{color:var(--muted); margin-top:8px; font-size:15px}
section{padding:28px 0; border-bottom:1px solid var(--line)}
h2{font-size:19px; font-weight:800; margin-bottom:4px}
h2 .en{font-weight:600; color:var(--muted); font-size:14px; margin-left:6px}
.note{color:var(--muted); font-size:14px; margin-bottom:16px}
.grp{margin:16px 0}
.grp h3{font-size:14px; font-weight:700; color:var(--accent-ink); margin-bottom:8px}
ul.links{list-style:none; display:flex; flex-wrap:wrap; gap:8px}
ul.links li{flex:0 0 auto}
ul.links a{
  display:inline-block; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; font-size:14px; line-height:1.3;
}
ul.links a:hover{border-color:var(--accent); color:var(--accent-ink)}
.soon{color:var(--muted); font-size:14px}
.en-block p{color:var(--muted); font-size:14px; margin-bottom:14px}
footer{padding:28px 0 56px; color:var(--muted); font-size:13px}
footer a{color:var(--accent-ink)}
footer p{margin-bottom:8px}
a.allt{display:inline-block; margin-top:6px; font-size:13px; color:var(--accent-ink)}
@media(max-width:480px){
  header.hero{padding:34px 0 22px}
  .brand{font-size:22px}
}
