:root {
      --bg: #f5f6f8;
      --cream: #fbf8f3;
      --beige: #f3eee6;
      --beige-deep: #ebe2d5;
      --navy: #263d7a;
      --navy-deep: #1d2f60;
      --blue: #2f84d6;
      --blue-soft: #eaf3fb;
      --teal: #2ea8b6;
      --green: #2c9b63;
      --green-deep: #258553;
      --pink: #ff7f82;
     
      --line: #d9e2ef;
      --text: #31415f;
      --text-soft: #66758f;
      --white: #ffffff;
      --shadow: 0 4px 10px rgba(28, 45, 90, 0.08);
      --radius-lg: 24px;
      --radius-md: 18px;
      --radius-sm: 14px;
      --container-lp: 390px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page {
      max-width: var(--container-lp);
      margin: 0 auto;
      background: var(--bg);
      
    }

    .container-lp {
      padding: 0;
    }

    .section {
      padding: 0
    }

    .section-lg {
      padding: 0;
    }

    .logo-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 16px;
      margin-bottom: 20px;
    }

    .logo {
      color: var(--navy);
      font-weight: 800;
      font-size: 21px;
      line-height: 1.1;
      letter-spacing: 0.01em;
    }

    .logo small {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      margin-top: 4px;
    }

    .menu-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.72);
      display: grid;
      place-items: center;
      box-shadow: var(--shadow);
    }

    .menu-btn span,
    .menu-btn span::before,
    .menu-btn span::after {
      display: block;
      width: 18px;
      height: 2px;
      background: var(--navy);
      border-radius: 999px;
      position: relative;
      content: "";
    }

    .menu-btn span::before { top: -6px; position: absolute; }
    .menu-btn span::after { top: 6px; position: absolute; }

    .hero {
      padding-top: 10px;
    }

    .hero-copy {
      margin-bottom: 22px;
    padding: 0 17px;
    }

    .hero-title {
      margin: 0;
      font-size: clamp(34px, 9vw, 42px);
      line-height: 1.34;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--navy-deep);
    }

    .hero-title .accent {
      color: var(--teal);
    }

    .hero-title .underline {
      display: inline-block;
      position: relative;
      padding-bottom: 4px;
    }

    .hero-title .underline::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 4px;
      background: var(--yellow);
      border-radius: 999px;
    }

    .hero-sub {
      margin: 16px 0 0;
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.9;
    }

    .hero-visual {
      overflow: hidden;
      border-radius: 26px;
      box-shadow: var(--shadow);
      background: linear-gradient(180deg, #dff0ff 0%, #d6ebfb 38%, #ffffff 100%);
      min-height: 300px;
      position: relative;
    }

    .hero-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-badges {
      padding-top:2em;
      padding-bottom: 2em;
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .badge-card {
      background: rgba(255,255,255,0.82);
      border: 1px solid var(--line);
      border-radius: 18px;
     
      padding: 16px 18px;
     
      grid-template-columns: 42px 1fr;
      gap: 12px;
      align-items: center;
    }

    .badge-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 24px;
    }

    .badge-card:nth-child(1) .badge-icon { color: #e3a500; }
    .badge-card:nth-child(2) .badge-icon { color: var(--pink); }
    .badge-card:nth-child(3) .badge-icon { color: var(--blue); }

    .badge-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-soft);
      line-height: 1.2;
    }

    .badge-value {
      font-size: 18px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.35;
    }

    .badge-value .number {
      font-size: 24px;
      color: #ff6b73;
    }

    .hero-cta-stack {
      margin-top: 18px;
      display: grid;
      gap: 12px;
    }

    .cta-button {
      min-height: 58px;
      padding: 0 20px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 800;
      font-size: 15px;
      box-shadow: var(--shadow);
      transition: transform .2s ease;
    }

    .cta-button:active { transform: translateY(1px); }

    .cta-primary {
     background: linear-gradient(90deg, #3f97e2, #3f97e2);
      color: #fff;
    }

    .cta-line {
      background: #fff;
      color: var(--green);
      border: 2px solid #7bd19f;
    }

    .line-pill {
      background: #38c172;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      border-radius: 999px;
      padding: 4px 7px;
      line-height: 1;
    }

    .trouble-box,
    .future-box,
    .testimonials-wrap,
    .footer-box {
      background: rgba(255,255,255,0.62);
      overflow: hidden;
    }

    .trouble-box {
      background: #eef6fd;
      padding: 22px 14px 20px;
    }

    .section-kicker {
      margin: 0 0 6px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.05em;
    }

    .section-title {
      margin: 0;
      color: var(--navy);
    
      line-height: 1.4;
      font-weight: 800;
      letter-spacing: 0.02em;
    
    }

    .section-title {
      text-align: center;
    font-size: 20px;
    }

    .section-desc {
      margin: 10px auto 0;
      font-size: 14px;
      color: var(--text-soft);
      text-align: center;
      max-width: 320px;
    }

    .trouble-title {
      text-align: center;
      margin-bottom: 16px;
      color: var(--navy);
      font-size: 20px;
    font-weight: 800;
    }

    .trouble-list {
      display: grid;
      gap: 12px;
    }

    .trouble-item {
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(38,61,122,0.08);
      border-radius: 18px;
      padding: 16px 14px;
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 12px;
      align-items: start;
    }

    .avatar-illust,
    .step-thumb,
    .voice-photo {
      
      overflow: hidden;
      background: linear-gradient(180deg, #eef4fb, #dbe8f8);
    }

    .avatar-illust {
      width: 80px;
      height: 80px;
    }

    .trouble-item h3 {
      margin: 0 0 4px;
      color: var(--teal);
      font-size: 17px;
      line-height: 1.4;
    }

    .trouble-item p {
      margin: 0;
      color: var(--text);
      font-size: 13px;
      line-height: 1.75;
    }

    .trouble-message {
      text-align: center;
      margin-top: 18px;
      color: var(--navy);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.9;
    }

    .trouble-message .accent-red {
      color: #ff7577;
    }

    .future-box {
      padding: 22px 14px 18px;
      background: #ffffff;
    }

    .story-list {
      margin-top: 18px;
      display: grid;
      gap: 12px;
      position: relative;
    }

    .story-item {
      position: relative;
      background:rgb(251 250 246);
      border-radius: 18px;
      border: 1px solid rgba(47,132,214,0.12);
      padding: 14px;
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 12px;
      align-items: center;
    }

    .story-item::before {
      content: "";
      position: absolute;
      left: 45px;
      top: -12px;
      width: 2px;
      height: 12px;
      background: #bfd4eb;
    }

    .story-item:first-child::before { display: none; }

    .story-item::after {
      content: "";
      position: absolute;
      left: 45px;
      bottom: -12px;
      width: 2px;
      height: 12px;
      background: #bfd4eb;
    }

    .story-item:last-child::after { display: none; }

    .step-thumb {
      width: 64px;
      height: 64px;
      border: 3px solid #fff;
      box-shadow: 0 4px 14px rgba(47,132,214,0.12);
    }

    .step-no {
       font-family: Georgia, serif;
      color: #6ca8dc;
      font-weight: 900;
      font-size: 30px;
      line-height: 1;
      margin-bottom: 5px;
    }

    .story-item h3 {
      margin: 0 0 4px;
      color: var(--navy);
      font-size: 16px;
      line-height: 1.45;
      margin: 1em;
    }

    .story-item p {
      margin: 0;
      font-size: 13px;
      color: var(--text-soft);
      line-height: 1.7;
    }

    .strengths-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 12px;
      margin: 2em;
    }

    .strength-card {
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(47,132,214,0.15);
      border-radius: 18px;
      padding: 14px 12px 16px;
      min-height: 188px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .strength-no {
      font-family: Georgia, serif;
      color: var(--teal);
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
    }

    .strength-card h3 {
      margin: 0;
      font-size: 15px;
      line-height: 1.5;
      color: #263d7a;
      min-height: 44px;
    }

    .strength-card p {
      margin: 0;
      font-size: 12px;
      line-height: 1.7;
      color: var(--text);
    }

    .strength-icon {
      margin-top: auto;
      font-size: 40px;
      text-align: center;
    }

    .program-box {
      background: linear-gradient(180deg, #fbfaf7 0%, #f4efe6 100%);
      border-radius: 24px;
      border: 1px solid rgba(223,211,194,0.9);
      padding: 24px 14px;
      box-shadow: var(--shadow);
    }

    .program-box .section-title {
      font-size: 28px;
    }

    .program-lead {
      margin: 10px auto 0;
      text-align: center;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.85;
      max-width: 320px;
    }

    .program-stack {
      margin-top: 18px;
      display: grid;
      gap: 14px;
    }

    .program-card {
      background: rgba(255,255,255,0.84);
      border-radius: 20px;
      border: 1px solid rgba(38,61,122,0.08);
      padding: 16px 14px;
    }

    .program-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 16px;
      border-radius: 999px;
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 14px;
    }

    .chip-blue { background: #4d89da; }
    .chip-green { background: #52ae74; }

    .lesson-timeline {
      position: relative;
      display: grid;
      gap: 10px;
      padding-left: 14px;
    }

    .lesson-timeline::before {
      content: "";
      position: absolute;
      left: 30px;
      top: 12px;
      bottom: 12px;
      width: 2px;
      background: #c8d8f0;
    }

    .lesson-step {
      position: relative;
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 14px;
      align-items: center;
    }

    .time-circle {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: #e7effc;
      display: grid;
      place-items: center;
      color: var(--navy);
      font-size: 24px;
      font-weight: 800;
      z-index: 1;
      position: relative;
    }

    .time-circle small {
      font-size: 13px;
    }

    .lesson-step h3,
    .coach-item h3 {
      margin: 0 0 4px;
      color: var(--navy);
      font-size: 19px;
      line-height: 1.45;
    }

    .lesson-step p,
    .coach-item p,
    .voice-body,
    .cefr-note,
    .footer-copy {
      margin: 0;
      font-size: 13px;
      color: var(--text-soft);
      line-height: 1.8;
    }

    .coach-list {
      display: grid;
      gap: 12px;
    }

    .coach-item {
      background: #f8fcf9;
      border: 1px solid rgba(82,174,116,0.18);
      border-radius: 16px;
      padding: 14px;
      display: grid;
      grid-template-columns: 50px 1fr;
      gap: 12px;
      align-items: start;
    }

    .coach-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #edf8f1;
      color: var(--green);
      font-size: 24px;
    }

    .coach-item h3 span {
      display: inline-block;
      color: var(--green);
      font-size: 14px;
      margin-left: 8px;
    }

    .cefr-badge {
      margin-top: 14px;
      background: #fff7df;
      border: 1px solid #f3ddb0;
      border-radius: 20px;
      padding: 18px 16px;
      text-align: center;
      box-shadow: 0 8px 20px rgba(236, 196, 93, 0.12);
    }

    .cefr-main {
      font-size: 28px;
      font-weight: 900;
      color: #9e6400;
      line-height: 1.35;
      margin-bottom: 6px;
    }

    .cefr-note {
      text-align: left;
      margin-top: 12px;
      background: rgba(255,255,255,0.75);
      border: 1px solid #eeddb7;
      border-radius: 14px;
      padding: 12px;
    }

    .voice-list {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }

    .voice-card {
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(38,61,122,0.08);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .voice-top {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 12px;
      padding: 14px 14px 0;
      align-items: center;
    }

    .voice-photo {
      width: 96px;
      height: 96px;
      border-radius: 22px;
      background: linear-gradient(180deg, #eef4fb, #dae6f5);
    }

    .voice-tag {
      display: inline-block;
      background: linear-gradient(180deg, #50bfd0, #3ca8bc);
      color: #fff;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      padding: 6px 10px;
      margin-bottom: 8px;
    }

    .voice-title {
      margin: 0;
      color: var(--navy);
      font-size: 20px;
      line-height: 1.5;
      font-weight: 800;
    }

    .voice-content {
      padding: 12px 14px 16px;
    }

    .before-after {
      margin-top: 12px;
      display: grid;
      gap: 8px;
    }

    .ba-item {
      background: #f8fbff;
      border: 1px solid #e0ebf7;
      border-radius: 14px;
      padding: 10px 12px;
    }

    .ba-label {
      display: block;
      font-size: 12px;
      font-weight: 900;
      color: var(--blue);
      margin-bottom: 4px;
      line-height: 1;
    }

    .cta-banner-group {
      display: grid;
      gap: 14px;
    }

    .cta-banner {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 14px 28px rgba(34, 50, 74, 0.12);
      position: relative;
      min-height: 152px;
      padding: 18px 18px 18px 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .cta-banner.line {
      background: linear-gradient(135deg, #2d9f66 0%, #258553 100%);
      color: #fff;
    }

    .cta-banner.trial {
      background: linear-gradient(135deg, #3f97e2 0%, #2a68c6 100%);
      color: #fff;
    }

    .cta-banner::after {
      content: "›";
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.92);
      color: inherit;
      font-size: 34px;
      font-weight: 400;
      line-height: 1;
    }

    .cta-banner .mini {
      font-size: 12px;
      font-weight: 800;
      opacity: 0.95;
      letter-spacing: 0.03em;
      margin-bottom: 8px;
    }

    .cta-banner .main {
      font-size: 20px;
      line-height: 1.45;
      font-weight: 900;
      padding-right: 54px;
    }

    .cta-banner .icon-bubble {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(255,255,255,0.95);
      color: inherit;
      display: grid;
      place-items: center;
      font-size: 22px;
      font-weight: 900;
    }

    .cta-banner .text-wrap {
      padding-left: 86px;
      padding-right: 44px;
    }

    .footer-box {
      padding: 26px 16px 28px;
      text-align: center;
    }

    .footer-logo {
      color: var(--navy);
      font-size: 26px;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .sns-row {
      margin-top: 16px;
      display: flex;
      justify-content: center;
      gap: 14px;
    }

    .sns {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      box-shadow: var(--shadow);
    }

    .sns.ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
    .sns.yt { background: #ff5338; }
    .sns.x { background: #111; }

    .copyright {
      margin-top: 18px;
      font-size: 12px;
      color: #8896af;
    }

    .fixed-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      background: rgb(251 250 246);
      backdrop-filter: blur(10px);
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      box-shadow: 0 -8px 24px rgba(28, 45, 90, 0.06);
    }

    .fixed-cta-inner {
      max-width: var(--container-lp);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 10px;
    }

    .fixed-cta .cta-button {
      min-height: 50px;
      font-size: 14px;
      padding: 0 14px;
    }

    @media (max-width: 359px) {
      .hero-title { font-size: 31px; }
      .section-title { font-size: 26px; }
      .voice-top { grid-template-columns: 84px 1fr; }
      .voice-photo { width: 84px; height: 84px; }
      .cta-banner .text-wrap { padding-left: 78px; }
      .cta-banner .main { font-size: 18px; }
    }
.badge-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.badge-card.is-show {
  opacity: 1;
  transform: translateY(0);
}