:root {
  --modern-navy: #17324d;
  --modern-ink: #17352f;
  --modern-green: #078568;
  --modern-mint: #dff5ec;
  --modern-mint-soft: #f3fbf8;
  --modern-blue: #e8f5ff;
  --modern-coral: #ff6d64;
  --modern-line: #d9e8e2;
}

.modern-method,
.modern-price,
.modern-faq,
.modern-area {
  color: var(--modern-ink);
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}

.modern-method h1,
.modern-method h2,
.modern-method h3,
.modern-price h1,
.modern-price h2,
.modern-price h3,
.modern-method .logo,
.modern-price .logo {
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  letter-spacing: -.035em;
}

.modern-method .paper-section,
.modern-price #price {
  background: #fff;
}

.modern-method .paper-section:nth-of-type(even) {
  background: var(--modern-mint-soft);
}

.modern-method .method-intro {
  background:
    radial-gradient(circle at 10% 5%, #e5f8f1 0 17%, transparent 40%),
    linear-gradient(180deg, #fff 0%, #f8fcfa 100%);
}

.modern-method .paper-heading h1,
.modern-method .paper-heading h2 {
  color: var(--modern-navy);
  font-weight: 700;
}

.modern-method .paper-heading h1 {
  font-size: clamp(42px, 5vw, 68px);
}

.modern-method .paper-heading p {
  color: #60756f;
}

.modern-method .learning-steps {
  gap: 18px;
}

.modern-method .learning-steps article {
  min-height: 350px;
  border-color: var(--modern-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(24, 74, 60, .07);
}

.modern-method .learning-steps article:nth-child(3n + 1) {
  border-top: 4px solid var(--modern-green);
}

.modern-method .learning-steps article:nth-child(3n + 2) {
  border-top: 4px solid #57a8de;
}

.modern-method .learning-steps article:nth-child(3n) {
  border-top: 4px solid var(--modern-coral);
}

.modern-method .learning-steps article > span,
.modern-method .page-kicker {
  color: var(--modern-green);
}

.modern-method .learning-steps h2 {
  color: var(--modern-navy);
  font-weight: 700;
}

.modern-method .drawn-icon {
  border-radius: 18px;
  background-color: #f4fbf8;
}

.modern-method .reasons-section {
  background: #eff8f4 !important;
}

.modern-method .reason-grid article {
  border: 1px solid var(--modern-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(24, 74, 60, .06);
}

.modern-method .reason-grid article:nth-child(1) .reason-symbol {
  color: #168467;
  background: var(--modern-mint);
}

.modern-method .reason-grid article:nth-child(2) .reason-symbol {
  color: #407ca7;
  background: var(--modern-blue);
}

.modern-method .reason-grid article:nth-child(3) .reason-symbol {
  color: #c85049;
  background: #fff0ef;
}

.modern-method .use-list li,
.modern-method .learner-grid article,
.modern-method .start-flow li {
  border-color: var(--modern-line);
  border-radius: 17px;
  background: #fff;
}

.modern-method .use-list span,
.modern-method .start-flow li > span {
  color: #fff;
  background: var(--modern-green);
}

.modern-method .paper-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--modern-navy), #00875f);
}

.modern-method .paper-cta p {
  color: #d9eee8;
}

.modern-method .paper-cta .btn-primary,
.modern-price .btn-primary:not(.site-login-button),
.modern-price .fixed-cta {
  color: #fff !important;
  background: var(--modern-coral) !important;
}

.modern-price #price {
  padding-top: 70px;
  background:
    radial-gradient(circle at 88% 4%, #dff5ec 0 12%, transparent 30%),
    #fff;
}

.modern-price-hero {
  max-width: 850px;
  margin: 0 auto 32px;
  padding: 0;
  text-align: center;
}

.modern-price-hero > span {
  color: var(--modern-green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
}

.modern-price-hero h1 {
  margin: 13px 0 18px;
  color: var(--modern-navy);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.28;
}

.modern-price-hero h1 em {
  color: var(--modern-green);
  font-style: normal;
}

.modern-price-hero p {
  font-size: 15px;
  line-height: 2;
}

.modern-price-table {
  max-width: 990px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--modern-line);
  border-radius: 23px;
  background: #fff;
  box-shadow: 0 22px 65px rgba(22, 68, 55, .09);
}

.modern-price-table > div {
  display: grid;
  grid-template-columns: .75fr 1fr 1fr;
  align-items: center;
  border-top: 1px solid var(--modern-line);
}

.modern-price-table > div:first-child {
  border: 0;
}

.modern-price-table > div > * {
  padding: 22px 27px;
}

.modern-price-table .price-table-head {
  color: #fff;
  background: var(--modern-navy);
  font-size: 12px;
  font-weight: 800;
}

.modern-price-table b {
  color: var(--modern-navy);
  font-size: 17px;
}

.modern-price-table b small {
  display: block;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 99px;
  color: #b83f39;
  background: #ffe6e3;
  font-size: 8px;
}

.modern-price-table p {
  color: #5d716b;
  text-align: right;
}

.modern-price-table strong {
  color: var(--modern-green);
  font-family: "Manrope", sans-serif;
  font-size: 28px;
}

.modern-price-table .recommended {
  background: var(--modern-mint-soft);
}

.weekly-value-block {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 42px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
  padding: 46px;
  border: 1px solid var(--modern-line);
  border-radius: 28px;
  background: var(--modern-mint-soft);
}

.weekly-value-copy > span,
.weekly-plan-heading > span,
.weekly-compare-copy > span {
  color: var(--modern-green);
  font: 800 10px "Manrope", sans-serif;
  letter-spacing: .16em;
}

.weekly-value-copy h2,
.weekly-plan-heading h2,
.weekly-compare-copy h2 {
  margin: 12px 0 16px;
  color: var(--modern-navy);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.42;
}

.weekly-value-copy p {
  color: #60756f;
  font-size: 13px;
  line-height: 1.95;
}

.weekly-value-copy ul {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.weekly-value-copy li {
  position: relative;
  padding-left: 24px;
  color: var(--modern-navy);
  font-size: 12px;
  font-weight: 700;
}

.weekly-value-copy li::before {
  position: absolute;
  left: 0;
  content: "✓";
  color: var(--modern-green);
}

.weekly-value-price {
  padding: 34px;
  border-radius: 23px;
  background: var(--modern-navy);
  color: #fff;
}

.weekly-value-price > span {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 99px;
  background: var(--modern-mint);
  color: var(--modern-green);
  font-size: 9px;
  font-weight: 800;
}

.weekly-value-price h3 {
  margin: 17px 0 5px;
  color: #fff;
  font-size: 20px;
}

.weekly-value-price > p b {
  color: #fff;
  font: 800 48px "Manrope", sans-serif;
  letter-spacing: -.04em;
}

.weekly-value-price > p small {
  margin-left: 5px;
  color: #d5e7e1;
  font-size: 12px;
}

.weekly-value-price dl {
  margin: 23px 0 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.weekly-value-price dl div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: 11px;
}

.weekly-value-price dt { color: #b9d0c8; }
.weekly-value-price dd { font-weight: 800; }
.weekly-value-price > small { color: #9eb8af; font-size: 9px; }

.weekly-plan-section {
  max-width: 1040px;
  margin: 46px auto 0;
}

.weekly-plan-heading {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.weekly-plan-heading p {
  color: #60756f;
  font-size: 12px;
  line-height: 1.8;
}

.weekly-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.weekly-plan-grid article {
  padding: 28px;
  border: 1px solid var(--modern-line);
  border-radius: 21px;
  background: #fff;
}

.weekly-plan-grid article.is-standard {
  border-color: #9fd2c1;
  background: var(--modern-mint-soft);
}

.weekly-plan-grid article > span {
  color: var(--modern-green);
  font: 800 9px "Manrope", sans-serif;
  letter-spacing: .13em;
}

.weekly-plan-grid h3 {
  margin: 8px 0 24px;
  color: var(--modern-navy);
  font-size: 19px;
}

.weekly-price-options {
  display: grid;
  gap: 8px;
}

.weekly-price-options > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 12px 13px;
  border: 1px solid var(--modern-line);
  border-radius: 12px;
  background: #fff;
}

.weekly-price-options span,
.weekly-price-options span small,
.weekly-price-options b small {
  display: block;
}

.weekly-price-options span {
  color: var(--modern-navy);
  font-size: 12px;
  font-weight: 800;
}

.weekly-price-options span small {
  margin-top: 2px;
  color: #788b84;
  font-size: 8px;
  font-weight: 600;
}

.weekly-price-options span em {
  display: block;
  width: fit-content;
  margin-bottom: 4px;
  padding: 3px 6px;
  border-radius: 99px;
  background: var(--modern-green);
  color: #fff;
  font-size: 7px;
  font-style: normal;
  line-height: 1;
}

.weekly-price-options b {
  color: var(--modern-navy);
  font: 800 18px "Manrope", "Noto Sans JP", sans-serif;
  letter-spacing: -.035em;
  text-align: right;
  white-space: nowrap;
}

.weekly-price-options b small {
  margin-top: 1px;
  color: #788b84;
  font: 600 7px "Noto Sans JP", sans-serif;
}

.weekly-price-options .is-recommended {
  min-height: 82px;
  border: 2px solid var(--modern-green);
  background: var(--modern-mint-soft);
}

.weekly-price-options .is-recommended b {
  color: var(--modern-green);
  font-size: 23px;
}

.weekly-main-price {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--modern-line);
}

.weekly-main-price small {
  color: var(--modern-green);
  font-size: 10px;
  font-weight: 800;
}

.weekly-main-price p {
  margin-top: 5px;
  color: var(--modern-navy);
  white-space: nowrap;
}

.weekly-main-price p b {
  margin-right: 3px;
  color: var(--modern-green);
  font: 800 31px "Manrope", sans-serif;
  letter-spacing: -.04em;
}

.weekly-sub-price {
  padding-top: 18px;
}

.weekly-sub-price span,
.weekly-sub-price b {
  display: block;
}

.weekly-sub-price span {
  color: #70827c;
  font-size: 9px;
}

.weekly-sub-price b {
  margin-top: 4px;
  color: var(--modern-navy);
  font-size: 13px;
}

.weekly-plan-note {
  max-width: 1040px;
  margin: 16px auto 0;
  font-size: 12px;
  line-height: 1.9;
}

.weekly-price-compare {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 42px;
  max-width: 1040px;
  margin: 76px auto 24px;
  padding: 43px;
  border: 1px solid var(--modern-line);
  border-radius: 26px;
  background: #fff;
}

.weekly-compare-copy p {
  color: #60756f;
  font-size: 12px;
  line-height: 1.85;
}

.weekly-compare-list {
  display: grid;
  gap: 17px;
  align-content: center;
}

.weekly-compare-list > div {
  display: grid;
  grid-template-columns: 140px 1fr 76px;
  gap: 11px;
  align-items: center;
}

.weekly-compare-list span {
  color: #60756f;
  font-size: 10px;
}

.weekly-compare-list i {
  height: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: #edf4f1;
}

.weekly-compare-list i::before {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: #a9c4ba;
  content: "";
}

.weekly-compare-list b {
  color: var(--modern-navy);
  font: 800 13px "Manrope", "Noto Sans JP", sans-serif;
  text-align: right;
}

.weekly-compare-list .is-lumera span,
.weekly-compare-list .is-lumera b {
  color: var(--modern-green);
  font-weight: 800;
}

.weekly-compare-list .is-lumera i::before {
  background: var(--modern-green);
}

.weekly-compare-list .weekly-compare-difference {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin-top: 4px;
  padding: 15px 17px;
  border-radius: 13px;
  background: var(--modern-mint-soft);
}

.weekly-compare-list .weekly-compare-difference span {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--modern-green);
  font-size: 9px;
  font-weight: 800;
}

.weekly-compare-difference strong {
  color: var(--modern-green);
  font: 800 24px "Manrope", "Noto Sans JP", sans-serif;
  letter-spacing: -.04em;
}

.weekly-compare-difference small {
  color: #60756f;
  font-size: 8px;
}

.weekly-compare-note {
  grid-column: 1/3;
  margin-top: -8px;
  padding-top: 17px;
  border-top: 1px solid var(--modern-line);
  color: #788b84;
  font-size: 9px;
  line-height: 1.8;
}

.weekly-compare-note a {
  color: #00875f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.price-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 990px;
  margin: 20px auto 70px;
}

.price-facts article {
  padding: 23px;
  border: 1px solid var(--modern-line);
  border-radius: 17px;
  background: #fff;
}

.price-facts span {
  color: var(--modern-green);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.price-facts b {
  display: block;
  margin: 6px 0;
  color: var(--modern-navy);
  font-size: 17px;
}

.price-facts p {
  font-size: 11px;
  line-height: 1.7;
}

.modern-price .payment-policy,
.modern-price .feature-card,
.modern-price .flow-step,
.modern-price .app-feature-card {
  border-color: var(--modern-line);
  background: #fff;
  box-shadow: 0 10px 32px rgba(22, 68, 55, .05);
}

.modern-price .payment-policy {
  border-radius: 22px;
}

.modern-price .payment-policy li::before,
.modern-price .flow-num {
  color: #fff;
  background: var(--modern-green) !important;
}

.modern-price .compare-title {
  color: var(--modern-navy);
  font-family: "Manrope", "Noto Sans JP", sans-serif;
}

.modern-price .feature-card.recommended {
  border-color: var(--modern-green);
  box-shadow: inset 0 4px 0 var(--modern-green), 0 10px 32px rgba(22, 68, 55, .05);
}

.modern-price .learning-way {
  border-color: #cfe5dc;
  background: linear-gradient(135deg, #effaf6, #eaf6ff);
}

.modern-price .learning-way h3 {
  color: var(--modern-navy);
  font-family: "Manrope", "Noto Sans JP", sans-serif;
}

.modern-price .learning-way h3 em,
.modern-price .learning-way-label {
  color: var(--modern-green);
}

.modern-faq .faq-page {
  background: #fff;
}

.modern-faq .faq-page-heading > span {
  color: var(--modern-green);
  font-family: "Manrope", sans-serif;
  letter-spacing: .18em;
}

.modern-faq .faq-page-heading h1 {
  color: var(--modern-navy);
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -.035em;
}

.modern-faq .faq-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 58px;
  color: var(--modern-navy);
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.modern-faq .faq-group-title::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--modern-green);
}

.modern-faq .faq-item {
  padding: 0 24px;
  border-color: var(--modern-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(23, 65, 53, .045);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.modern-faq .faq-item:hover {
  border-color: #afd8ca;
  transform: translateY(-1px);
}

.modern-faq .faq-item.open {
  border-color: #9bc5b5;
  background: #fafcfb;
  box-shadow: none;
}

.modern-faq .faq-q {
  color: var(--modern-navy);
  font-weight: 700;
}

.modern-faq .faq-q::before {
  border: 0;
  border-radius: 11px;
  color: var(--modern-green);
  background: var(--modern-mint);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}





.modern-faq .faq-q .icon {
  background: var(--modern-green);
}

.modern-faq .faq-item.open .faq-q {
  border-bottom-color: #c7e5da;
}

.modern-faq .faq-a {
  color: #536b64;
}

.modern-faq .faq-a a {
  color: var(--modern-green);
}

.modern-area {
  background: #fff;
}

.modern-area #areas {
  background:
    radial-gradient(circle at 88% 1%, #dff5ec 0 10%, transparent 28%),
    #fff;
}

.modern-area .area-page-kicker,
.modern-area .area-list-heading span,
.modern-area .area-expansion span {
  color: var(--modern-green);
  font-family: "Manrope", sans-serif;
}

.modern-area .sec-title,
.modern-area .area-list-heading h2,
.modern-area .area-expansion h2,
.modern-area .area-service-grid h2,
.modern-area .area-scenes h2,
.modern-area .area-scenes h3 {
  color: var(--modern-navy);
  font-family: "Manrope", "Noto Sans JP", sans-serif !important;
  letter-spacing: -.035em;
}

.modern-area .area-service-grid article,
.modern-area .area-card {
  border-color: var(--modern-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 11px 34px rgba(23, 65, 53, .055);
}

.modern-area .area-service-grid article:nth-child(1) {
  border-top: 4px solid var(--modern-green);
}

.modern-area .area-service-grid article:nth-child(2) {
  border-top: 4px solid #57a8de;
}

.modern-area .area-service-grid article:nth-child(3) {
  border-top: 4px solid var(--modern-coral);
}

.modern-area .area-service-grid article > span,
.modern-area .area-pref {
  color: var(--modern-green);
}

.modern-area .area-service-grid small,
.modern-area .area-cities span {
  color: #00875f;
  background: var(--modern-mint);
}

.modern-area .area-card:nth-child(even) .area-cities span {
  color: #397ba7;
  background: var(--modern-blue);
}

.modern-area .area-scenes {
  background: #fff;
}

.modern-area .area-scenes-heading h2 {
  color: var(--modern-navy) !important;
}

.modern-area .area-scenes-heading > span {
  color: var(--modern-green);
}

.modern-area .area-scene-grid article {
  border: 1px solid var(--modern-line);
  border-radius: 12px;
}

.modern-area .area-expansion {
  border: 1px solid var(--modern-line);
  background: linear-gradient(135deg, var(--modern-mint-soft), var(--modern-blue));
}

.modern-area .area-expansion li {
  border: 1px solid #dbe9e4;
  color: var(--modern-navy);
  background: rgba(255,255,255,.85);
}

.modern-area .btn-primary,
.modern-area .fixed-cta,
.modern-faq .fixed-cta {
  color: #fff !important;
  background: var(--modern-green) !important;
}

@media (max-width: 700px) {
  .modern-price-table {
    overflow-x: auto;
  }

  .modern-price-table > div {
    min-width: 650px;
  }

  .price-facts {
    grid-template-columns: 1fr;
  }

  .modern-price #price {
    padding-top: 45px;
  }

  .modern-price-hero {
    margin-bottom: 20px;
    text-align: left;
  }

  .modern-price-hero h1 {
    font-size: 34px;
  }

  .modern-faq .faq-page-heading h1 {
    font-size: 32px;
  }

  .weekly-value-block {
    grid-template-columns: 1fr;
    gap: 27px;
    padding: 24px;
    border-radius: 20px;
  }

  .weekly-value-copy h2,
  .weekly-plan-heading h2,
  .weekly-compare-copy h2 {
    font-size: 28px;
  }

  .weekly-value-price {
    padding: 27px 23px;
  }

  .weekly-value-price > p b {
    font-size: 42px;
  }

  .weekly-plan-section {
    margin-top: 30px;
  }

  .weekly-plan-heading {
    text-align: left;
  }

  .weekly-plan-grid {
    grid-template-columns: 1fr;
  }

  .weekly-plan-grid article {
    padding: 24px;
  }

  .weekly-main-price p b {
    font-size: 33px;
  }

  .weekly-price-options .is-recommended b {
    font-size: 25px;
  }

  .weekly-plan-note br {
    display: none;
  }

  .weekly-price-compare {
    grid-template-columns: 1fr;
    gap: 27px;
    margin-top: 58px;
    padding: 24px;
    border-radius: 20px;
  }

  .weekly-compare-list > div {
    grid-template-columns: 1fr auto;
    gap: 5px 10px;
  }

  .weekly-compare-list i {
    grid-column: 1/3;
    grid-row: 2;
  }

  .weekly-compare-list b {
    grid-column: 2;
    grid-row: 1;
  }

  .weekly-compare-note {
    grid-column: auto;
  }

  .weekly-compare-list .weekly-compare-difference {
    grid-template-columns: auto 1fr;
  }
}

/* Teacher page: matching-app visual language */
.modern-teachers {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--modern-ink);
  background: #fff;
}

.modern-teachers h1,
.modern-teachers h2,
.modern-teachers h3,
.modern-teachers h4,
.modern-teachers .page-kicker {
  font-family: "Manrope", "Noto Sans JP", sans-serif;
}

.modern-teachers .badge-system-section {
  background: linear-gradient(180deg, var(--modern-mint-soft), #fff 38%, #f7fbff) !important;
}

.modern-teachers .badge-system-section .paper-heading h2,
.modern-teachers .badge-system-section .paper-heading h3 {
  color: var(--modern-navy);
}

.modern-teachers .badge-flow article {
  border: 1px solid var(--modern-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(23, 65, 53, .06);
}

.modern-teachers .badge-flow article:nth-child(2),
.modern-teachers .badge-flow article:nth-child(4) {
  background: var(--modern-blue);
}

.modern-teachers .badge-flow span {
  background: var(--modern-green);
}

.modern-teachers .badge-flow article:not(:last-child)::after {
  color: var(--modern-coral);
}

.modern-teachers .badge-meaning {
  border: 1px solid #cfe9df;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--modern-mint), #fff);
}

.modern-teachers .badge-meaning li,
.modern-teachers .profile-info li {
  border-color: #cfe3dc;
}

.modern-teachers .badge-meaning li::before,
.modern-teachers .profile-info li::before {
  color: var(--modern-green);
}

.modern-teachers .badge-grid {
  gap: 16px;
}

.modern-teachers .badge-grid article {
  min-height: 270px;
  padding: 22px 15px;
  border: 1px solid var(--modern-line);
  border-top: 4px solid var(--modern-green);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(23, 65, 53, .06);
}

.modern-teachers .badge-grid article:nth-child(2) { border-top-color: #57a8de; }
.modern-teachers .badge-grid article:nth-child(3) { border-top-color: var(--modern-coral); }
.modern-teachers .badge-grid article:nth-child(4) { border-top-color: #f1b74d; }
.modern-teachers .badge-grid article:nth-child(5) { border-top-color: #8d79d8; }

.modern-teachers .badge-grid .drawn-icon {
  width: 132px;
  height: 105px;
  margin: 0 auto;
  border-radius: 18px;
  background-color: var(--modern-mint);
}

.modern-teachers .badge-grid article:nth-child(2) .drawn-icon { background-color: var(--modern-blue); }
.modern-teachers .badge-grid article:nth-child(3) .drawn-icon { background-color: #fff0ed; }
.modern-teachers .badge-grid article:nth-child(4) .drawn-icon { background-color: #fff7db; }
.modern-teachers .badge-grid article:nth-child(5) .drawn-icon { background-color: #f2efff; }

.modern-teachers .badge-grid h4 {
  color: var(--modern-navy);
  font-size: 15px;
}

.modern-teachers .badge-grid article > span {
  padding: 5px 14px;
  color: #00875f;
  background: var(--modern-mint);
}

.modern-teachers .badge-caution {
  border: 1px solid #cce6f6;
  border-radius: 20px;
  background: var(--modern-blue);
}

.modern-teachers .badge-caution b { color: var(--modern-navy); }
.modern-teachers .badge-caution p { color: #496578; }

.modern-teachers .profile-info {
  border: 1px solid var(--modern-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(23, 65, 53, .06);
}

.modern-teachers .badge-faq details {
  border-color: var(--modern-line);
}

.modern-teachers .badge-faq summary::after { color: var(--modern-coral); }

.family-choice-section {
  background: var(--modern-mint-soft);
  color: var(--modern-ink);
}

.family-choice-heading {
  max-width: 830px;
  margin-bottom: 38px;
}

.family-choice-heading .page-kicker { color: var(--modern-green); }
.family-choice-heading h2 { margin: 10px 0 15px; color: var(--modern-navy); font-size: clamp(34px, 4.4vw, 58px); line-height: 1.28; }
.family-choice-heading h2 em { color: var(--modern-green); font-style: normal; }
.family-choice-heading p { max-width: 720px; color: #587083; font-size: 16px; line-height: 1.9; }

.family-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 28px;
  align-items: stretch;
}

.family-choice-photo {
  position: relative;
  overflow: hidden;
  min-height: clamp(390px, 42vw, 520px);
  margin: 0;
  border: 1px solid var(--modern-line);
  border-radius: 24px;
  background: var(--modern-mint);
}

.family-choice-photo img { width: 100%; height: 100%; object-fit: cover; }
.family-choice-photo figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.72); border-radius: 15px; color: var(--modern-navy); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.family-choice-photo figcaption b, .family-choice-photo figcaption span { display: block; }
.family-choice-photo figcaption b { margin-bottom: 4px; font-size: 17px; }
.family-choice-photo figcaption span { color: #597083; font-size: 12px; }

.family-choice-points { display: grid; gap: 14px; }
.family-choice-points article { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 17px; align-items: start; min-width: 0; padding: 25px 27px; border: 1px solid var(--modern-line); border-left: 4px solid var(--modern-green); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(23,65,53,.05); }
.family-choice-points article > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--modern-green); background: var(--modern-mint); font-family: "Manrope", sans-serif; font-weight: 800; }
.family-choice-points article > div { min-width: 0; }
.family-choice-points h3 { margin: 0 0 7px; color: var(--modern-navy); font-size: 20px; overflow-wrap: anywhere; }
.family-choice-points p { margin: 0; color: #607583; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.family-choice-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 13px 20px; margin-top: 30px; text-align: center; }
.family-choice-cta .btn-primary { min-height: 52px; padding: 15px 30px; color: #fff !important; background: var(--modern-green) !important; }
.family-choice-cta p { color: #607583; font-size: 12px; }

.modern-area .area-discovery { display:grid; grid-template-columns:.88fr 1.12fr; gap:40px; align-items:center; margin:45px 0 32px; padding:24px 0 0; border:0; border-radius:0; background:transparent; overflow:hidden; }
.area-discovery-copy h2 { margin:10px 0 16px; color:var(--modern-navy); font-size:clamp(30px,3.2vw,44px); line-height:1.25; }
.area-discovery-copy h2 em { color:var(--modern-green); font-style:normal; }
.area-discovery-copy p { color:#587083; line-height:1.9; }
.area-choice-pills { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.area-choice-pills span { padding:8px 11px; border:1px solid #cfe3dc; border-radius:99px; color:#00875f; background:#fff; font-size:11px; font-weight:800; }
.area-discovery-visual { position:relative; min-height:430px; }
.area-discovery-visual>img { width:100%; height:430px; object-fit:cover; border-radius:24px; box-shadow:0 18px 48px rgba(23,50,77,.14); }
.area-match-card { position:absolute; right:-18px; bottom:28px; width:260px; padding:18px; border:1px solid var(--modern-line); border-radius:18px; background:rgba(255,255,255,.95); box-shadow:0 16px 42px rgba(23,50,77,.16); }
.area-match-card small,.area-match-card div>* { display:block; }
.area-match-card small { color:var(--modern-green); font-weight:800; }
.area-match-card b { margin-top:10px; color:var(--modern-navy); font-size:18px; }

/* Keep the complete area introduction visible in a common desktop first view. */
@media (min-width: 901px) {
  body.modern-area #areas {
    padding: clamp(32px, 4.5dvh, 52px) 0 44px;
  }

  .modern-area #areas > .wrap > .area-page-kicker {
    margin-bottom: 8px;
  }

  .modern-area #areas > .wrap > .sec-title {
    margin: 0;
    font-size: clamp(34px, 3vw, 48px);
    line-height: 1.25;
  }

  .modern-area #areas > .wrap > .sec-sub {
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.7;
  }

  .modern-area .area-discovery {
    min-height: 0;
    margin: clamp(22px, 3dvh, 30px) 0 0;
    padding: clamp(16px, 2dvh, 22px) 0 0;
  }

  .modern-area .area-discovery-copy h2 {
    margin: 8px 0 12px;
    font-size: clamp(30px, 2.6vw, 40px);
  }

  .modern-area .area-discovery-copy p {
    line-height: 1.75;
  }

  .modern-area .area-choice-pills {
    margin: 16px 0;
  }

  .modern-area .area-discovery-visual {
    min-height: 0;
  }

  .modern-area .area-discovery-visual > img {
    height: clamp(280px, 35dvh, 330px);
  }
}
.area-match-card span { color:#587083; font-size:12px; }
.area-match-card strong { display:inline-block; margin-top:11px; color:var(--modern-green); font-size:20px; }
.area-match-card em { float:right; margin-top:13px; padding:5px 8px; border-radius:99px; color:#397ba7; background:var(--modern-blue); font-size:10px; font-style:normal; font-weight:800; }
.area-local-chip { position:absolute; top:18px; left:-18px; padding:10px 14px; border-radius:12px; color:#fff; background:var(--modern-navy); font-size:11px; font-weight:800; }
.family-choice-cta .btn span { margin-left: 16px; }

/* Payment flow — responsive recreation of the lumera payment guide */
.payment-flow-showcase{position:relative;overflow:hidden;max-width:1180px;margin:22px auto 64px;padding:48px 50px 34px;border:1px solid #d9ece6;border-radius:28px;background:radial-gradient(circle at 12% 16%,rgba(221,244,237,.7),transparent 23%),linear-gradient(145deg,#fff 0%,#fbfefd 54%,#f3fbf8 100%);box-shadow:0 18px 55px rgba(0,135,95,.08)}
.payment-flow-showcase::before,.payment-flow-showcase::after{content:"";position:absolute;z-index:0;width:720px;height:220px;border:2px solid rgba(25,166,128,.12);border-radius:50%;pointer-events:none}
.payment-flow-showcase::before{top:-112px;right:-230px;transform:rotate(-18deg)}.payment-flow-showcase::after{bottom:-175px;left:-280px;transform:rotate(8deg)}
.payment-flow-heading,.payment-flow-grid,.payment-flow-support{position:relative;z-index:1}.payment-flow-heading{margin-bottom:30px}
.payment-flow-heading>span{display:block;color:var(--modern-green);font-family:"Manrope",sans-serif;font-size:12px;font-weight:800;letter-spacing:.28em}
.payment-flow-heading>b{position:absolute;top:-4px;right:4px;color:#a8d4c7;font-family:Georgia,serif;font-size:34px;font-weight:400;letter-spacing:.12em}
.payment-flow-heading h2{margin:14px 0 18px;color:var(--modern-navy);font-family:"Noto Sans JP",sans-serif;font-size:clamp(28px,3.4vw,46px);line-height:1.35}
.payment-flow-heading>i{display:block;width:104px;height:2px;margin-bottom:17px;background:var(--modern-green)}
.payment-flow-heading>p{display:flex;gap:15px;align-items:center;max-width:820px;margin:0;padding:12px 16px;border:1px solid #d7ebe4;border-radius:12px;color:#667a73;background:rgba(255,255,255,.76);font-size:12px;line-height:1.8}
.payment-flow-heading>p strong{flex:0 0 auto;color:var(--modern-green);font-size:13px}.payment-flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}
.payment-flow-grid article{position:relative;display:grid;grid-template-columns:108px 1fr;gap:20px;align-items:center;min-height:175px;padding:26px 28px 24px 22px;border:1px solid #e5efeb;border-radius:19px;background:rgba(255,255,255,.94);box-shadow:0 10px 28px rgba(0,135,95,.07)}
.payment-flow-grid article>em{position:absolute;top:13px;left:14px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;background:var(--modern-green);font-family:Georgia,serif;font-size:17px;font-style:normal;box-shadow:0 5px 14px rgba(0,139,105,.22)}
.payment-flow-icon{display:grid;place-items:center;width:78px;height:78px;margin-left:10px;border-radius:50%;color:var(--modern-green);background:#eaf6f2}
.payment-flow-icon svg,.payment-flow-support svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.payment-flow-grid article>div:last-child{min-height:106px;padding-left:24px;border-left:1px solid #dceae5}.payment-flow-grid h3{margin:0 0 9px;color:var(--modern-green);font-size:17px;line-height:1.55}.payment-flow-grid p{margin:0;color:#5f6f69;font-size:12px;line-height:1.95}
.payment-flow-support{display:flex;gap:19px;align-items:center;margin-top:22px;padding:18px 25px;border:1px solid #dcece7;border-radius:16px;background:linear-gradient(90deg,rgba(235,247,243,.92),rgba(250,253,252,.92))}
.payment-flow-support>span{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:50%;color:var(--modern-green);background:#fff;box-shadow:0 7px 18px rgba(0,135,95,.1)}.payment-flow-support svg{width:34px;height:34px}.payment-flow-support b{display:block;margin-bottom:4px;color:var(--modern-green);font-size:15px}.payment-flow-support p{margin:0;color:#64756f;font-size:12px}

@media (max-width: 900px) {
  .payment-flow-showcase { padding:38px 30px 28px; }
  .payment-flow-grid { grid-template-columns:1fr; }
  .modern-area .area-discovery { grid-template-columns:1fr; padding:18px 0 0; }
}

@media (max-width: 640px) {
  .modern-area #areas > .wrap > .sec-title { font-size:clamp(20px,6.8vw,27px); line-height:1.3; white-space:nowrap; }
  .modern-area .area-discovery-visual { order:-1; }
  .payment-flow-showcase{margin:18px -8px 48px;padding:29px 16px 20px;border-radius:20px}.payment-flow-heading>b{display:none}.payment-flow-heading h2{margin-top:11px;font-size:27px}.payment-flow-heading>p{display:block;padding:12px 13px}.payment-flow-heading>p strong{display:block;margin-bottom:3px}.payment-flow-grid{gap:12px}.payment-flow-grid article{grid-template-columns:70px 1fr;gap:10px;min-height:0;padding:22px 15px 20px 13px;border-radius:16px}.payment-flow-grid article>em{top:10px;left:10px;width:34px;height:34px;font-size:14px}.payment-flow-icon{width:58px;height:58px;margin-left:4px}.payment-flow-icon svg{width:35px;height:35px}.payment-flow-grid article>div:last-child{min-height:0;padding-left:14px}.payment-flow-grid h3{font-size:14px}.payment-flow-grid p{font-size:11px;line-height:1.8}.payment-flow-support{padding:15px}.payment-flow-support>span{flex-basis:44px;width:44px;height:44px}
  .family-choice-heading h2 { font-size: 32px; }
  .family-choice-heading p { font-size: 14px; }
  .family-choice-photo { min-height: 360px; }
  .family-choice-points article { grid-template-columns: 44px minmax(0, 1fr); gap: 13px; padding: 21px 18px; }
  .family-choice-points article > span { width: 40px; height: 40px; }
  .family-choice-points h3 { font-size: 17px; }
  .family-choice-cta { align-items: stretch; flex-direction: column; }
  .family-choice-cta .btn { width: 100%; }
}