:root{
  --bg1:#070A1A;
  --bg2:#1A0F2E;
  --bg3:#0E1C3A;
  --text:#EAF0FF;
  --muted:#B9C3E6;
  --border:rgba(255,255,255,0.15);
  --radius:18px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:var(--text);

  /* 🌙 ラメ入りラベンダー背景 */
  background:
    radial-gradient(
      1px 1px at 20% 30%,
      rgba(255,255,255,0.6),
      transparent 40%
    ),
    radial-gradient(
      1px 1px at 70% 60%,
      rgba(255,255,255,0.4),
      transparent 40%
    ),
    radial-gradient(
      1px 1px at 40% 80%,
      rgba(255,255,255,0.5),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #3a2a5e,
      #5b4a8a,
      #7a6bb3,
      #a89adf
    );

  background-attachment: fixed;
}

a{ color:inherit; text-decoration:none; }

header{
  position:sticky;
  top:0;
  background:rgba(10,12,26,0.8);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

nav{
  max-width:960px;
  margin:auto;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

nav a{
  margin-left:14px;
  color:var(--muted);
}

.container{
  max-width:960px;
  margin:auto;
  padding:28px 16px 60px;
}

h1{ font-size:32px; margin:18px 0; }
p{
  font-size: 17px;
  line-height: 2.0;
  color: var(--muted);
}


.figure{
  margin:20px 0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.06);
}

.figure img{
  width:100%;
  display:block;
}

.figcap{
  padding:8px 12px;
  font-size:13px;
  color:rgba(234,240,255,0.7);
  border-top:1px solid var(--border);
}

footer{
  text-align:center;
  font-size:13px;
  color:rgba(234,240,255,0.6);
  margin-top:40px;
}
.figure-small{
  max-width: 520px;
  margin: 30px auto;
  opacity: 0.9;
}

hr {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin: 48px 0;
}