/* Sunny Kids English — 明るいポップ（ブルー×イエロー） */

:root {
  --bg: #fdfcf7;
  --bg-alt: #eaf4fd;
  --ink: #3a4a5a;
  --blue: #3d8bd4;
  --blue-deep: #2a6cab;
  --yellow: #f7c948;
  --coral: #f2766b;
  --green: #62b98a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
}

/* header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 5vw;
  background: #fff;
  box-shadow: 0 2px 10px rgba(58,74,90,0.06);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo { font-family: "Baloo 2", cursive; font-size: 22px; color: var(--blue-deep); }
.sun { color: var(--yellow); }

.nav { display: flex; align-items: center; }

.nav a {
  color: var(--ink);
  text-decoration: none;
  margin-left: 20px;
  font-size: 14px;
  font-weight: 700;
}

.nav a:hover { color: var(--blue); }

.nav-trial {
  background: var(--coral);
  color: #fff !important;
  padding: 9px 22px;
  border-radius: 999px;
}

/* hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 90px 8vw 110px;
  background: linear-gradient(170deg, #d9ecfc, #eaf4fd 60%, #fdf6dd);
}

.hero-text { position: relative; z-index: 2; max-width: 620px; }

.hero-badge {
  display: inline-block;
  background: #fff;
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h2 {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.5;
  margin-bottom: 16px;
}

.marker { background: linear-gradient(transparent 62%, var(--yellow) 62%); }

.hero-lead { margin-bottom: 32px; }

.hero-button {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 16px 44px;
  border-radius: 999px;
  box-shadow: 0 8px 0 #d05a50;
  transition: 0.15s;
}

.hero-button:hover { transform: translateY(4px); box-shadow: 0 4px 0 #d05a50; }

.shape { position: absolute; border-radius: 50%; }
.circle-y { width: 150px; height: 150px; background: var(--yellow); opacity: 0.55; right: 8%; top: 12%; }
.circle-b { width: 70px; height: 70px; background: var(--blue); opacity: 0.35; right: 24%; bottom: 14%; }
.ring { width: 110px; height: 110px; border: 14px solid var(--green); opacity: 0.3; right: 3%; bottom: -30px; }

.abc {
  font-family: "Baloo 2", cursive;
  font-size: 42px;
  color: var(--blue);
  opacity: 0.3;
  right: 16%;
  top: 45%;
  transform: rotate(-12deg);
}

/* sections */
.section { padding: 88px 5vw; max-width: 960px; margin: 0 auto; }
.section-alt { background: var(--bg-alt); max-width: none; }
.section-alt > * { max-width: 960px; margin-left: auto; margin-right: auto; }

.section-title {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 48px;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 6px;
  border-radius: 6px;
  background: var(--yellow);
  margin: 14px auto 0;
}

/* features */
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.feature-card {
  background: #fff;
  border-radius: 22px;
  padding: 34px 26px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(58,74,90,0.08);
}

.feature-num {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Baloo 2", cursive;
  font-size: 26px;
  color: #fff;
}

.n1 { background: var(--blue); }
.n2 { background: var(--coral); }
.n3 { background: var(--green); }

.feature-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.feature-card p { font-size: 14px; text-align: left; }

/* class table */
.class-table-wrap { overflow-x: auto; }

.class-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(58,74,90,0.08);
}

.class-table th, .class-table td { padding: 15px 18px; text-align: left; font-size: 15px; }
.class-table th { background: var(--blue); color: #fff; font-weight: 700; }
.class-table tr:nth-child(even) td { background: #f4f9fe; }
.class-table td:last-child { font-weight: 800; color: var(--blue-deep); }

.class-note { text-align: center; margin-top: 22px; font-size: 13px; }

/* voice */
.voice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.voice-card {
  background: #fff8e5;
  border-radius: 22px;
  padding: 30px 28px;
  position: relative;
}

.voice-card::before {
  content: "“";
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: "Baloo 2", cursive;
  font-size: 60px;
  color: var(--yellow);
  line-height: 1;
}

.voice-head { font-weight: 800; font-size: 14px; color: var(--blue-deep); margin-bottom: 8px; padding-left: 30px; }
.voice-card p:last-child { font-size: 14px; }

/* cta */
.cta {
  text-align: center;
  padding: 90px 5vw;
  background: linear-gradient(170deg, #fdf1cf, #fde5d8);
}

.cta h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }

.cta-buttons { display: flex; justify-content: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }

.cta-button {
  display: inline-block;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 16px 46px;
  border-radius: 999px;
  transition: 0.2s;
}

.cta-button.line { background: #06c755; box-shadow: 0 6px 0 #049e43; }
.cta-button.tel { background: var(--blue); box-shadow: 0 6px 0 var(--blue-deep); }
.cta-button:hover { transform: translateY(3px); box-shadow: none; }

.cta-sub { margin-top: 24px; font-size: 13px; }

/* footer */
.footer { text-align: center; padding: 30px; background: var(--blue-deep); color: #fff; font-weight: 700; }
.footer-copy { font-size: 12px; font-weight: 500; opacity: 0.8; margin-top: 6px; }

/* mobile */
@media (max-width: 760px) {
  .header { flex-direction: column; gap: 10px; }
  .nav a { margin: 0 6px; font-size: 12px; }
  .hero { padding: 60px 6vw 80px; }
  .feature-cards, .voice-cards { grid-template-columns: 1fr; }
  .section { padding: 56px 6vw; }
}