:root{
  --bg:#f6f7fb;           /* ページ全体の背景を明るく */
  --panel:#ffffff;        /* パネルも白 */
  --ink:#111319;          /* 文字は濃いグレー */
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#3757ff;
  --accent-2:#2e7c67;
  --radius:12px;
  --shadow:0 8px 24px rgba(16,24,40,.08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font:16px/1.7 var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:960px; margin:0 auto; padding:24px}

/* ヘッダーだけ濃いグレー背景＋白文字 */
.header{
  position:sticky; top:0; z-index:50;
  background:#2a2f3a;   /* 濃いめのグレー */
  color:#fff;
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.header .brand,
.header a,
.header .btn {
  color: #fff !important;
}
.header a:hover {
  color: var(--accent);
}

.nav{display:flex; align-items:center; gap:16px; padding:14px 24px}
.nav .brand{font-weight:700; letter-spacing:.3px}
.nav .spacer{flex:1}
.nav a{opacity:.9}
.nav a.active{color:var(--accent)}

.btn{
  border:1px solid var(--line); background:transparent;
  padding:8px 12px; border-radius:10px; cursor:pointer; color:inherit;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}

.main{padding:28px 24px}
.hero{
  background:linear-gradient(160deg, rgba(122,162,255,.06), rgba(139,184,168,.06));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px; margin-bottom:24px;
}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; margin:16px 0;
}
h1{font-size:28px; line-height:1.3; letter-spacing:.2px; margin:0 0 8px}
h2{font-size:22px; margin:28px 0 8px}
h3{font-size:18px; margin:20px 0 8px; color:var(--muted)}
small, .muted{color:var(--muted)}
hr{border:none; border-top:1px solid var(--line); margin:24px 0}
.toc{
  border:1px dashed var(--line); border-radius:10px; padding:16px; background:transparent;
}
.toc a{display:block; padding:4px 0; color:var(--ink)}
.notice{
  padding:12px 14px; border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:10px; background:rgba(122,162,255,.06);
}
.footer{border-top:1px solid var(--line); padding:24px; color:var(--muted)}
kbd{background:rgba(255,255,255,.08); border:1px solid var(--line); border-radius:6px; padding:2px 6px}
details{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel)}
details+details{margin-top:10px}
details summary{cursor:pointer; color:var(--muted)}
.badge{display:inline-block; padding:2px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; background:var(--panel); padding:8px 10px; border-radius:8px; z-index:100}
/* site.css などに追記 */
.gray-link {
  color: #777; /* グレー */
  text-decoration: underline; /* 下線は任意 */
}
.gray-link:hover {
  color: #555; /* ホバー時の少し濃いグレー */
}

@media (max-width:720px){
  .container{padding:18px}
  .nav{gap:10px}
}
@media print{
  :root{--bg:#fff; --panel:#fff; --ink:#000; --line:#ddd}
  .header, .footer, .btn, .nav .spacer{display:none !important}
  .card, .hero{box-shadow:none}
}