:root{
  --bg:#0a2540;
  --panel:#103457;
  --text:#ffffff;
  --muted:#c9d6e8;
  --accent:#ffcc00;
  --ok:#39d98a;
  --focus:#9ad0ff;
  --maxw: 960px;
}

/* ベース */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--text);
  font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  line-height:1.75;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

main{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline: clamp(16px, 4vw, 24px);
  padding-block: clamp(16px, 4vw, 28px);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  hyphens: auto;
}

header{
  max-width:var(--maxw);
  margin-inline:auto;
  padding: clamp(18px, 3vw, 28px) clamp(16px, 4vw, 24px) 0;
}

h1{
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  line-height:1.25;
  margin:0 0 .25em;
}
.sub{
  color:var(--muted);
  font-size: clamp(.92rem, 1.8vw, .98rem);
  margin:0 0 .75em;
}

a{
  color:#fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.45);
  text-underline-offset:3px;
}
a:hover{opacity:.92}

.panel{
  background: var(--panel);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding: clamp(14px, 2.8vw, 18px);
  margin: clamp(14px, 2.8vw, 18px) 0 clamp(18px, 3.4vw, 24px);
}
.panel.warn{
  border:1px solid var(--accent);
  box-shadow:0 0 0 3px rgba(255,204,0,.18) inset;
}

h2{
  display:flex;align-items:center;gap:.6em;
  font-size: clamp(1.05rem, 2.2vw, 1.15rem);
  line-height:1.35;
  margin:0 0 .6em;
  font-weight:800;
}
.num{
  flex:0 0 auto;
  display:inline-grid;place-items:center;
  width:1.8em;height:1.8em;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  font-size:.95em;font-weight:800;
}

.eyecatch{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:800;letter-spacing:.02em;
}
.eyecatch .dot{width:.75em;height:.75em;border-radius:50%;background:var(--accent)}
.lead{font-size: clamp(1rem, 2.3vw, 1.06rem)}

ul{margin:.4em 0 1em 1.2em;padding:0}
li{margin:.28em 0}

.note{color:var(--muted);font-size: clamp(.88rem, 1.8vw, .92rem)}

.close-btn{
  margin: clamp(22px, 4vw, 28px) auto clamp(28px, 5vw, 40px);
  display:block;
  min-width: clamp(240px, 50vw, 360px);
  background:var(--ok);
  color:#002b18;
  font-weight:800;
  border:none;
  padding: clamp(12px, 2.6vw, 16px) clamp(14px, 3vw, 18px);
  font-size: clamp(1rem, 2.6vw, 1.06rem);
  cursor:pointer;
  border-radius:10px;
  letter-spacing:.02em;
}
.close-btn:hover{filter:brightness(1.05)}
.close-btn:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:8px;
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}