:root{
  --bg1:#35d3ff;
  --bg2:#2cc7f2;
  --ink:#0b0f14;
  --muted: rgba(11,15,20,.72);
  --paper:#ffffff;
  --line: rgba(11,15,20,.12);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; } /* JSでも制御するので保険 */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 18% 14%, rgba(255,255,255,.24), transparent 62%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}

/* ===== Header ===== */
.siteHeader{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.headerInner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration:none;
  color: var(--ink);
  font-size: 18px;
}

.nav{
  display:flex;
  gap: 16px;
}

.navLink{
  text-decoration:none;
  color: rgba(11,15,20,.88);
  font-weight: 800;
  letter-spacing: .14em;
  font-size: 12px;
  padding: 10px 10px;
  border-radius: 999px;
  transition: transform .2s ease, background .2s ease;
}
.navLink:hover{
  background: rgba(255,255,255,.35);
  transform: translateY(-1px);
}

/* ===== Hero ===== */
.hero{
  min-height: calc(100vh - 56px);
  display:grid;
  place-items:center;
  padding: 44px 16px 26px;
}

.heroInner{
  width: min(720px, 92vw);
  text-align:center;
  position:relative;
}

.mascotStage{
  width: min(420px, 78vw);
  margin: 0 auto;
  opacity: 0;
  transform: translateY(18px) scale(.92);
  animation: mascotIn .9s cubic-bezier(.2,.9,.2,1) .20s forwards;
  will-change: transform, opacity;
}

.mascotImg{
  width: 100%;
  height: auto;
  display:block;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.14));
  transform-origin: 50% 60%;
  animation: float 2.2s ease-in-out 1.05s infinite;
}

/* JSで「ちょい揺れ」付与 */
.mascotImg.is-nod{
  animation:
    float 2.2s ease-in-out infinite,
    nod 520ms ease-in-out 1;
}

.heroText{ margin-top: 16px; }
.tagline{
  margin: 0;
  font-weight: 900;
  letter-spacing: .16em;
  font-size: 12px;
  color: rgba(11,15,20,.86);
}

/* ===== Sections ===== */
.section{
  padding: 92px 16px;
  background: rgba(255,255,255,.84);
  border-top: 1px solid rgba(255,255,255,.35);
}

.container{
  max-width: 980px;
  margin: 0 auto;
}

h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: .12em;
}

p{
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  font-size: 15px;
}

.link{ color: var(--ink); font-weight: 800; }

.footer{
  padding: 26px 16px;
  background: rgba(255,255,255,.84);
  border-top: 1px solid var(--line);
}

small{ color: rgba(11,15,20,.7); }

/* ===== Animations ===== */
@keyframes mascotIn{
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes float{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}

@keyframes nod{
  0%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-2px) rotate(-1.2deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

/* ===== Responsive ===== */
@media (max-width: 520px){
  .nav{ gap: 8px; }
  .navLink{ padding: 10px 8px; font-size: 11px; }
}