:root{
  --pink:#ff4f9a; --blue:#2fb7ff; --ink:#23324a; --sub:#5b6b85;
  --bg1:#eaf6ff; --bg2:#ffffff; --card:#ffffffea; --line:#cfe6f7;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Meiryo",sans-serif;
  font-size:16px; line-height:1.85; overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 8%, #ffe3f0 0, transparent 30%),
    radial-gradient(circle at 90% 4%, #d8f1ff 0, transparent 32%),
    linear-gradient(180deg,var(--bg1),var(--bg2) 60%);
  background-attachment:fixed;
}
/* 雪の結晶っぽい粒（CSSのみ） */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.7;
  background-image:
    radial-gradient(circle,#fff 2px,transparent 3px),
    radial-gradient(circle,#fff 3px,transparent 4px),
    radial-gradient(circle,#dff1ff 2px,transparent 3px);
  background-size:130px 130px,210px 210px,170px 170px;
  background-position:0 0,60px 90px,110px 30px;
  animation:snow 40s linear infinite;
}
@keyframes snow{to{background-position:0 400px,60px 690px,110px 500px}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

.wrap{position:relative; z-index:1; max-width:860px; margin:0 auto; padding:0 16px 32px}
.site-header{padding:20px 0 8px; text-align:center}
.back{display:inline-block; font-weight:700; color:var(--blue); text-decoration:none; font-size:14px;
  background:#fff; border:2px solid var(--line); border-radius:999px; padding:4px 14px}
.back:hover{border-color:var(--blue)}
.site-title{margin:10px 0 0; font-family:"Dela Gothic One",sans-serif; font-weight:400;
  font-size:clamp(28px,8vw,48px); line-height:1.2; letter-spacing:.02em; color:var(--pink);
  text-shadow:3px 3px 0 #fff, 5px 5px 0 var(--blue)}
.site-title a{color:inherit; text-decoration:none}
h1.page-title{font-family:"Dela Gothic One",sans-serif; font-weight:400; font-size:clamp(22px,6vw,32px);
  text-align:center; margin:8px 0 20px}

section.card{background:var(--card); border:2px solid var(--line); border-radius:20px;
  padding:16px 18px; margin:0 0 18px; box-shadow:0 4px 0 #d6ebf8}
h2{font-family:"Dela Gothic One",sans-serif; font-weight:400; font-size:20px; line-height:1.4;
  margin:0 0 10px; padding-left:14px; position:relative}
h2::before{content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:6px; border-radius:6px;
  background:linear-gradient(var(--pink),var(--blue))}
h3{font-size:17px; margin:16px 0 4px; font-weight:800}
p{margin:.4em 0 .8em} ul,ol{padding-left:1.4em; margin:.4em 0 .8em} li{margin:.2em 0}
a{color:#1a86c8; overflow-wrap:anywhere}
code,kbd{font-family:Consolas,monospace}
kbd{background:#fff; border:2px solid var(--line); border-bottom-width:3px; border-radius:6px; padding:0 6px; font-size:.9em}
.note{background:#fff7d9; border-radius:12px; padding:8px 12px; font-size:15px}
.pink{color:var(--pink); font-weight:800} .blue{color:#1a9be0; font-weight:800}

.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:15px; line-height:1.6}
th,td{border:1px solid var(--line); padding:6px 10px; text-align:left; vertical-align:top}
th{background:#eaf6ff; white-space:nowrap}

.weapons{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:640px){.weapons{grid-template-columns:1fr 1fr}}
.weapon{border:2px solid var(--line); border-radius:16px; padding:10px 14px; background:#fff}
.weapon h3{margin-top:0; color:var(--pink); font-family:"Dela Gothic One",sans-serif; font-weight:400}
.weapon:nth-child(even) h3{color:#1a9be0}
.weapon dl{margin:6px 0 0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:14.5px; line-height:1.6}
.weapon dt{color:var(--sub)} .weapon dd{margin:0}

svg.diagram{display:block; width:100%; height:auto; max-width:640px; margin:8px auto}
pre.license{background:#f3f9fe; border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; font-family:Consolas,monospace}

.site-footer{position:relative; z-index:1; text-align:center; padding:16px 16px 36px; font-size:14px; color:var(--sub)}
.site-footer nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-bottom:6px}
.site-footer a{font-weight:700; text-decoration:none}
.site-footer a[aria-current="page"]{color:var(--pink)}