/* nicop-db ポータル共通スタイル。ページを増やしてもここだけ直せば揃う */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  background: linear-gradient(180deg, #0f172a, #020617 60%);
  background-attachment: fixed;
  color: #e2e8f0;
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
}

a { color: #38bdf8; }

/* ヘッダー: 全ページ共通のナビ */
header.site {
  border-bottom: 1px solid #1e293b;
  background: rgba(15, 23, 42, 0.8);
}
header.site nav {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
header.site .brand {
  font-size: 1.15rem;
  font-weight: bold;
  color: #f8fafc;
  text-decoration: none;
}
header.site nav a:not(.brand) {
  font-size: 0.88rem;
  color: #94a3b8;
  text-decoration: none;
}
header.site nav a:not(.brand):hover { color: #f8fafc; }

main {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

/* トップの見出しまわり */
.hero { text-align: center; padding: 24px 0 8px; }
.accent-bar {
  width: 72px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  margin: 0 auto 28px;
}
.hero h1 { font-size: 2.6rem; color: #f8fafc; letter-spacing: 0.02em; }
.tagline { margin-top: 14px; color: #94a3b8; font-size: 1.05rem; }

/* 下層ページの見出し */
h1.page { font-size: 1.9rem; color: #f8fafc; }
h2 { font-size: 1.25rem; color: #f8fafc; margin-top: 40px; }
h1.page + .updated { margin-top: 8px; color: #64748b; font-size: 0.85rem; }
p { margin-top: 14px; color: #cbd5e1; }
ul { margin-top: 14px; padding-left: 24px; color: #cbd5e1; }
li { margin-top: 6px; }
.lead { color: #94a3b8; }

/* サイト一覧のカード */
.sites { margin-top: 44px; display: grid; gap: 16px; }
.card {
  display: block; text-decoration: none;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid #334155; border-radius: 12px;
  padding: 22px 24px;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: #38bdf8; transform: translateY(-2px); }
.card h2 { font-size: 1.25rem; color: #f8fafc; margin-top: 0; }
.card p { margin-top: 8px; color: #94a3b8; font-size: 0.92rem; }
.card .url { margin-top: 10px; color: #38bdf8; font-size: 0.85rem; }

/* 数字を並べる小さな一覧 (トップの規模紹介) */
.stats {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  color: #94a3b8; font-size: 0.9rem;
}
.stats b { color: #e2e8f0; font-size: 1.05rem; }

.btn {
  display: inline-block; margin-top: 20px;
  background: #38bdf8; color: #020617;
  font-weight: bold; text-decoration: none;
  border-radius: 8px; padding: 12px 24px;
}
.btn:hover { background: #7dd3fc; }

/* 英語併記の補足 */
.en { color: #64748b; font-size: 0.88rem; margin-top: 8px; }

footer.site {
  border-top: 1px solid #1e293b;
  padding: 28px 20px 36px;
  color: #475569; font-size: 0.8rem; text-align: center;
}
footer.site a { color: #64748b; text-decoration: none; }
footer.site a:hover { color: #94a3b8; }
footer.site .links { margin-bottom: 10px; }
footer.site .sep { margin: 0 8px; }

@media (max-width: 600px) {
  .hero h1 { font-size: 2rem; }
  main { padding: 32px 20px 48px; }
}