/* ベース */
:root{
  --bg-deep:#11114d;              /* 濃いネイビー（スクショの背景） */
  --panel:#cfefff;                /* セクションの水色 */
  --card:#ffffff;                 /* カード */
  --ink:#0e254d;                  /* 見出しの濃紺 */
  --muted:#4b5b77;                /* サブテキスト */
  --pill:#ffffff;                 /* ピルの白 */
  --pill-text:#1f2a44;
  --pill-ring:#00000014;
  --radius-xl:20px;
  --radius-lg:16px;
  --shadow:0 6px 16px rgba(0,0,0,.12);
  --shadow-soft:0 2px 10px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Noto Serif JP',serif;
  color:#222;
  background:var(--bg-deep);
}

/* 既存ヘッダーの調整（色はそのまま） */
.new-header{background:#11114d;color:#fff;padding:6px 10px;display:flex;justify-content:center}
.new-header-container{display:flex;align-items:center;gap:16px;max-width:1100px;width:100%}
.new-logo{width:48px;height:48px;border-radius:50%}
.new-header-title{margin:0;font-size:20px;color:#fff}
.new-header-info p{margin:.2rem 0 0;color:#fff;font-size:12px}
.new-teisai{margin:0 0 0 auto;color:#fff;font-size:34px;letter-spacing:.08em}
.new-nav ul{list-style:none;margin:0;padding:0}
.new-nav li a{color:#fff;text-decoration:none}

/* ヒーロー */
.hero{
  max-width:1100px;margin:32px auto 24px;padding:28px 20px;
  text-align:center;color:#fff;
}
.hero-icon{
  width:58px;height:58px;margin:0 auto 8px;border-radius:50%;
  background:#2ddbd1; /* スクショのシアン丸 */
  box-shadow:0 0 0 8px rgba(255,255,255,.06);
}
.hero-title{
  margin:0 0 14px;font-size:28px;letter-spacing:.12em;
}
.pill-nav{margin:14px auto 10px;max-width:860px}
.pills{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;
  background:var(--pill); color:var(--pill-text);
  text-decoration:none; font-size:14px; font-weight:600;
  box-shadow:inset 0 0 0 1px var(--pill-ring), var(--shadow-soft);
  transition:transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.pill:focus-visible{outline:none;box-shadow:0 0 0 3px #8cbcff}
.pill:hover{transform:translateY(-1px)}
.pill-cta{min-width:140px}
.hero-sub{margin:14px 0 10px;font-size:14px;opacity:.9}
.hero-cta{display:flex;gap:12px;justify-content:center}

/* セクション（淡い水色のパネル＋カード） */
.section-block{
  max-width:1100px;
  margin:0 auto 36px;
  padding:22px 18px 26px;
  border-radius:var(--radius-xl);
  background:#FFFFCC;
  box-shadow:var(--shadow);
}
.section-head{display:flex;flex-direction:column;align-items:center;margin-bottom:16px}
.section-tag{
  display:inline-block;margin-bottom:6px;padding:6px 12px;border-radius:999px;
  background:#e8f4ff;color:#2b4c84;font-size:12px;font-weight:700;letter-spacing:.12em;
}
.section-title{margin:0;color:var(--ink);font-size:22px}

/* カードグリッド */
.cards{
  --cols:3;
  display:grid;gap:16px;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
}
@media (min-width:1100px){ .cards{ --cols:4; } }
@media (max-width:900px){  .cards{ --cols:2; } }
@media (max-width:560px){  .cards{ --cols:1; } }

/* カード */
.card{
  display:flex;flex-direction:column;background:var(--card);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden;
}
.card-media{margin:0;position:relative}
.card-media img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
}
.card-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.card-title{margin:0;color:#16325c;font-size:16px;font-weight:700;line-height:1.3}
.card-meta{margin:0;color:var(--muted);font-size:12px}
.card-text{margin:0;color:#24334f;font-size:14px;line-height:1.6}

/* フッター（既存踏襲） */
.footer{background:#333;color:#fff;padding:24px 0;margin-top:40px}
.footer-link{color:#fff;text-decoration:none}
.footer-link:hover{opacity:.85}

/* スクロール時のアンカー位置ずれ対策（ヘッダー分オフセット） */
:target::before{
  content:""; display:block; height:64px; margin-top:-64px;
}