: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), #0b6f5c);
}

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

.modern-method .paper-cta .btn-primary,
.modern-price .btn-primary,
.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 52px;
  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(40px, 5.2vw, 68px);
  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);
}

.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 .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:
    radial-gradient(circle at 12% 2%, #dff5ec 0 8%, transparent 26%),
    linear-gradient(180deg, #fff 0%, #f5fbf8 100%);
}

.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-weight: 700;
  letter-spacing: -.035em;
}

.modern-faq .faq-page-heading i {
  width: 68px;
  height: 5px;
  border-radius: 99px;
  background: var(--modern-coral);
  transform: none;
}

.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: #9bd6c2;
  background: var(--modern-mint-soft);
  box-shadow: 0 14px 38px rgba(23, 112, 87, .08);
}

.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-item:nth-child(3n + 2) .faq-q::before {
  color: #397ba7;
  background: var(--modern-blue);
}

.modern-faq .faq-item:nth-child(3n) .faq-q::before {
  color: #bd4a44;
  background: #ffebe9;
}

.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: #0d6f57;
  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: linear-gradient(135deg, var(--modern-navy), #0d7660);
}

.modern-area .area-scenes-heading h2 {
  color: #fff !important;
}

.modern-area .area-scenes-heading > span {
  color: #8ee1c6;
}

.modern-area .area-scene-grid article {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
}

.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;
  }
}

/* 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: #06765d;
  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); }

.teach-with-modern {
  background: linear-gradient(180deg, var(--modern-mint-soft), #fff);
  color: var(--modern-ink);
}

.teach-with-heading {
  max-width: 830px;
  margin-bottom: 38px;
}

.teach-with-heading .page-kicker { color: var(--modern-green); }
.teach-with-heading h2 { margin: 10px 0 15px; color: var(--modern-navy); font-size: clamp(38px, 5vw, 70px); line-height: 1.18; }
.teach-with-heading h2 em { color: var(--modern-green); font-style: normal; }
.teach-with-heading p { color: #587083; font-size: 17px; }

.teach-with-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: stretch;
}

.teach-with-photo {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  margin: 0;
  border-radius: 28px;
  background: var(--modern-mint);
}

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

.teach-benefits { display: grid; gap: 16px; }
.teach-benefits article { display: grid; grid-template-columns: 55px 1fr; gap: 17px; align-items: start; padding: 25px 27px; border: 1px solid var(--modern-line); border-left: 5px solid var(--modern-green); border-radius: 22px; background: #fff; box-shadow: 0 12px 32px rgba(23,65,53,.06); }
.teach-benefits article:nth-child(2) { border-left-color: #57a8de; background: #fff; }
.teach-benefits article:nth-child(3) { border-left-color: var(--modern-green); background: #fff; }
.teach-benefits article > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--modern-navy); background: #8ee1c6; font-family: "Manrope", sans-serif; font-weight: 800; }
.teach-benefits article:nth-child(2) > span { background: #aee4ff; }
.teach-benefits article:nth-child(3) > span { color: #fff; background: var(--modern-green); }
.teach-benefits h3 { margin: 0 0 7px; color: var(--modern-navy); font-size: 21px; }
.teach-benefits p { margin: 0; color: #607583; font-size: 14px; line-height: 1.9; }
.teach-with-cta { margin-top: 30px; text-align: center; }
.teach-with-cta .btn-primary { padding: 17px 34px; color: #fff !important; background: var(--modern-green) !important; }

.modern-area .area-discovery { display:grid; grid-template-columns:.88fr 1.12fr; gap:40px; align-items:center; margin:45px 0 32px; padding:44px; border:1px solid var(--modern-line); border-radius:30px; background:linear-gradient(135deg,var(--modern-mint-soft),var(--modern-blue)); 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:#0d6f57; 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; }
.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; }
.teach-with-cta .btn span { margin-left: 20px; }

@media (max-width: 900px) {
  .teach-with-grid { grid-template-columns: 1fr; }
  .teach-with-photo { min-height: 430px; }
  .modern-area .area-discovery { grid-template-columns:1fr; padding:28px; }
}

@media (max-width: 640px) {
  .modern-teachers .badge-grid article { min-height: 0; }
  .teach-with-heading h2 { font-size: 39px; }
  .teach-with-photo { min-height: 390px; }
  .teach-benefits article { grid-template-columns: 46px 1fr; padding: 21px 18px; }
  .teach-benefits article > span { width: 42px; height: 42px; }
}