:root{
  --bg:#050505;
  --text:#eaeaea;
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
  --pill:rgba(255,255,255,.06);
  --pill2:rgba(255,255,255,.10);
  --focus:rgba(255,255,255,.30);
  --max:980px;
  --radius:14px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:radial-gradient(1200px 800px at 50% -200px, rgba(255,255,255,.06), transparent 60%), var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", Segoe UI, Roboto, Arial;
  letter-spacing:.2px;
}

.wrap{max-width:var(--max); margin:0 auto; padding:40px 18px 80px}

.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:18px;
}

.brand{min-width:240px}
.brandlink{
  display:flex; align-items:center; gap:12px;
  color:inherit; text-decoration:none;
}
.brandlink:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:12px}

.brandlogo{
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.02);
  object-fit:contain;
}
.logoFallback{
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.04);
  place-items:center;
  font-size:12px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.8);
}

.brandname{
  font-size:12px; color:rgba(255,255,255,.70);
  text-transform:uppercase; letter-spacing:.18em;
  white-space:nowrap;
}

.lang{display:flex; gap:10px; align-items:center}
.lang button{
  appearance:none; border:1px solid var(--line2);
  background:transparent; color:var(--text);
  padding:10px 14px; border-radius:999px;
  font-size:13px; cursor:pointer;
  transition:transform .05s ease, background .2s ease, border-color .2s ease;
}
.lang button[aria-pressed="true"]{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}
.lang button:active{transform:scale(.98)}
.lang button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

h1{margin:12px 0 6px; font-size:44px; letter-spacing:.06em}
.sub{margin:0 0 18px; color:var(--muted2); font-size:13px; line-height:1.7}

.notice{
  border:1px solid var(--line2);
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  padding:14px 14px;
  margin:14px 0 18px;
}
.noticeTitle{
  font-size:12px;
  color:rgba(255,255,255,.70);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 8px;
}
.noticeBody{
  color:rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.85;
}

.searchbar{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:10px 12px;
  background:rgba(255,255,255,.02);
  margin:16px 0 12px;
}
.searchbar .glass{
  width:18px; height:18px; opacity:.85;
  display:grid; place-items:center;
  color:rgba(255,255,255,.7);
  flex:0 0 auto;
}
.searchbar input{
  width:100%;
  border:none; outline:none;
  background:transparent;
  color:var(--text);
  font-size:14px;
}
.searchbar input::placeholder{color:rgba(255,255,255,.45)}
.searchbar button{
  appearance:none;
  border:1px solid var(--line2);
  background:transparent;
  color:rgba(255,255,255,.85);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease;
  font-size:13px;
  flex:0 0 auto;
}
.searchbar button:hover{background:rgba(255,255,255,.06)}
.searchbar button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.hintrow{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:0 0 10px;
  color:rgba(255,255,255,.55);
  font-size:12px;
}
.pill{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--pill);
}

.empty{
  margin:14px 0 0;
  border:1px solid var(--line2);
  border-radius:var(--radius);
  padding:14px 14px;
  color:rgba(255,255,255,.70);
  background:rgba(255,255,255,.03);
  display:none;
}

.section{
  margin-top:26px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.section-title{
  font-size:12px;
  color:rgba(255,255,255,.65);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 10px;
}

details{
  border-bottom:1px solid var(--line);
  background:transparent;
}
summary{
  list-style:none;
  cursor:pointer;
  padding:16px 4px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
summary::-webkit-details-marker{display:none}

.qleft{
  display:flex; align-items:flex-start; gap:10px; min-width:0;
}
.qbadge{
  width:22px; height:22px; border-radius:999px;
  border:1px solid var(--line2);
  display:grid; place-items:center;
  color:rgba(255,255,255,.65);
  flex:0 0 auto;
  font-size:12px;
}
.qtext{
  font-size:15px;
  line-height:1.5;
  margin-top:1px;
}
.tags{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:8px;
}
.tag{
  font-size:11px;
  color:rgba(255,255,255,.65);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:4px 8px;
  border-radius:999px;
}

.icon{
  width:18px; height:18px; opacity:.85;
  flex:0 0 auto;
  border:1px solid var(--line2);
  border-radius:8px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.02);
  transition:transform .15s ease, background .2s ease;
}
details[open] .icon{transform:rotate(45deg); background:rgba(255,255,255,.06)}

.ans{
  padding:0 4px 16px 36px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}
.ans b{color:var(--text)}
.ans ul, .ans ol{margin:10px 0 0 18px; padding:0}
.ans li{margin:6px 0}

.match{
  background:rgba(255,255,255,.08);
  border-radius:10px;
  padding:2px 4px;
  margin:0 -4px;
}

footer{
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center;
  color:rgba(255,255,255,.60);
  font-size:12px;
  letter-spacing:.08em;
}

@media (max-width:640px){
  h1{font-size:34px}
  .brandname{display:none}
  summary{padding:14px 0}
  .ans{padding-left:32px}
}