:root{
  --bg:#ffffff;
  --ink:#333333;
  --muted:#55595f;
  --accent:#16a34a;
  --link:#2563eb;
  --card:#ffffff;
  --border:#e5e7eb;
  --h2:#0b57d0;
}

html,body{
  background:var(--bg);
  color:var(--ink);
  margin:0;
  font-family:"Meiryo", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", Arial, sans-serif;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

header{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}

.wrap{max-width:980px;margin:0 auto;padding:20px;}

.logo{display:block}
.logo img{display:block;width:200px;height:auto}

.title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}

.badge{
  font-size:.8rem;
  padding:.25rem .5rem;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:#fff;
}

nav.toc{margin-top:10px;display:flex;flex-wrap:wrap;gap:.5rem}
nav.toc a{
  border:1px solid var(--border);
  padding:.35rem .6rem;
  border-radius:8px;
  color:var(--muted);
  background:#fff
}
nav.toc a:hover{border-color:#cbd5e1}

main{padding-bottom:64px}
section{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  margin:16px 0
}

h1{font-size:clamp(1.4rem,3.5vw,2rem);margin:.2rem 0 0}
h2{
  font-size:clamp(1.15rem,2.8vw,1.5rem);
  margin:.2rem 0 .6rem;
  color:var(--h2);
}
h3 {
  font-size:1.05rem;
  margin:1rem 0 .25rem;
  color:var(--muted);
}

.hint {
  padding-left:.8rem;
  margin:.6rem 0;
}

.note {
  padding-left:.8rem;
  margin:.6rem 0;
}

.top{
  position:fixed;right:14px;bottom:14px;
  background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:.6rem .8rem;
  box-shadow:0 2px 8px rgba(0,0,0,.06)
}

@media (max-width:640px){
  .wrap{padding:14px}
  nav.toc{gap:.35rem}
  nav.toc a{padding:.3rem .5rem}
  section{padding:14px}
  .logo img{width:160px}
}