:root{
  --bg: #0b1736;         /* ヘッダー・ヒーロー：濃紺 */
  --bg-weak: #f7f9fc;    /* セクションの薄い背景 */
  --text: #1a1a1a;       /* 本文 */
  --muted: #55657e;      /* 補助テキスト */
  --primary: #A6A6A6;    /* アクセント */
  --border: #e3e8ef;     /* 枠線 */
}

body{
  margin:0;
  color:var(--text);
  font-family:"Meiryo UI","Meiryo",system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  line-height:1.7;
  background:#fff;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container{ width:min(1100px,92%); margin-inline:auto; }

.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--bg); color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-container{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand-name{ font-weight:700; font-size:1.2rem; letter-spacing:.5px; }
.nav .nav-list{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.nav .nav-list a{ color:#fff; text-decoration:none; font-weight:600; }

.hero{ color:#fff; background:var(--bg); }
.hero-content{ padding:64px 0; text-align:center; }
.hero h1{ margin:0 0 12px; font-size:clamp(28px,4.5vw,44px); }
.hero a{ text-decoration:none; color:#fff;}
.hero .lead{ color:#d6deff; margin:0; }
.hero-bg{
  position:absolute; inset:0; 
  background: radial-gradient(1200px 400px at 50% -10%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}

.section{ padding:40px 0; }
.section-title{ font-size:1.6rem; margin:0 0 20px; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  border:1px solid var(--border); border-radius:12px; padding:18px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04);
  display:flex; align-items:center; justify-content:center; min-height:60px;
  font-size:1.05rem;
}
.card a{ text-decoration:none; color:#1a1a1a; font-weight:600; }
.card a:hover{ color:var(--primary); }

.site-footer{ background:#0f1d44; color:#dbe3ff; padding:26px 0; margin-top: auto;}
.footer-grid{ display:grid; grid-template-columns:1fr; gap:12px; align-items:center; }
.footer-grid a{ text-decoration:none; color:#dbe3ff; }
.footer-grid a:hover{ color:#afb5cc; }

@media (max-width: 960px){
  .cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .cards{ grid-template-columns:1fr; }
}