:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line: rgba(229,231,235,.85);
  --blue:#1d4ed8;
  --blue2:#0b3aa6;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --radius:18px;
  --max:980px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
  background: linear-gradient(180deg, #eef3ff 0%, var(--bg) 34%, var(--bg) 100%);
  color:var(--text);
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:22px 18px 70px;}
.section{margin-top:26px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}
.simpleCard{padding:16px}
.muted{color:var(--muted); font-weight:850; line-height:1.7}

h1{
  margin:0;
  font-size:32px;
  font-weight:950;
  color:#0f2a5a;
  text-align:center;
}
h2{
  margin:0 0 12px;
  font-size:22px;
  font-weight:950;
  color:#0f2a5a;
  text-align:center;
}
h3{
  margin:18px 0 8px;
  font-size:16px;
  font-weight:950;
  color:#0f2a5a;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  cursor:pointer;
  text-decoration:none;
  font-weight:900;
  transition:.15s transform ease, .15s background ease, .15s border ease, .15s box-shadow ease;
  user-select:none;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue2) 100%);
  color:#fff;
  border-color: rgba(29,78,216,.55);
  box-shadow: 0 10px 24px rgba(29,78,216,.18);
}

/* ✅ basics画像：枠16:9固定 + cover（空白なし） */
.heroWrap{
  overflow:hidden;
  background:#fff;
  border-radius:18px;
}

.heroImg{
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  object-fit:cover;
  display:block;
}

.tableWrap{overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
}
th, td{
  text-align:left;
  padding:10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
tbody tr:last-child td{border-bottom:none}

.footer{
  margin-top:28px;
  text-align:center;
  color:#6b7280;
  font-weight:900;
}

@media (max-width: 720px){
  h1{font-size:26px}
  .heroImg{ aspect-ratio: 16 / 10; }
  table{min-width:520px}
}