/* ==============================================
   OET LP v2 — Pixel-accurate implementation
   ============================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;600&display=swap');

:root {
  /* ── Core Palette ── */
  --navy:        #0F1D44;
  --navy-dark:   #08132E;
  --teal:        #1D7A8A;
  --teal-dark:   #165F6C;
  --gold:        #C9A661;
  --gold-light:  #D9BC82;
  --gold-pale:   rgba(201,166,97,0.18);
  --cream:       #F5F2EA;
  --cream-2:     #FAF8F3;
  --white:       #FFFFFF;
  --gray-50:     #F6F7F9;
  --gray-100:    #ECEEF2;
  --gray-200:    #D8DCE6;
  --gray-400:    #8A93A8;
  --gray-600:    #4E5870;
  --text-dark:   #1A2340;
  --text-mid:    #48526B;
  --text-light:  #7A849A;
  --red-price:   #CC2222;
  --border:      rgba(14,30,68,0.08);

  /* ── Typography ── */
  --f-serif:   'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --f-sans:    'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --f-display: 'Manrope', sans-serif;
  --f-script:  'Cormorant Garamond', serif;

  /* ── Layout ── */
  --inner: 986px;
  --pad-x: 34px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 15px;
  scroll-behavior: smooth;
}
#top,
#concerns,
#courses,
#speaking,
#writing,
#set,
#instructors,
#features,
#steps,
#faq,
#contact {
  scroll-margin-top: 72px;
}
body {
  font-family: var(--f-sans);
  color: var(--text-dark);
  background: var(--white);
  /* 可読性リバランス: 本文型を上げる 12.5px → 14px */
  font-size: 13px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ────────────────────────────────────────────
   HEADER
   ──────────────────────────────────────────── */
.hdr {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  z-index: 200;
}
.hdr-inner {
  max-width: 1224px;
  margin: 0 auto;
  padding: 0 41px;
  height: 54.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ── Logo image ── */
.logo-img {
  height: 60px;
  width: auto;
  display: block;
}
.ftr-logo-img {
  height: 41px;
  width: auto;
  display: block;
  margin-bottom: 10px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8.5px;
}
.logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
.logo-text { font-family: var(--f-sans); line-height: 1.1; }
.logo-text .ja { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: 0.05em; display: block; }
.logo-text .en { font-size: 10px; font-weight: 600; color: var(--gold); letter-spacing: 0.3em; display: block; }

.gnav ul { display: flex; gap: 36px; }
.gnav a {
  font-family: var(--f-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0.05em;
  padding: 3.5px 0;
  position: relative;
}
.gnav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--teal);
  transition: width .22s;
}
.gnav a:hover::after { width: 100%; }

/* ────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────── */
.hero {
  background: var(--white);
  position: relative;
  overflow: hidden;
  padding: 47.5px 0 0;
}
.hero-inner {
  max-width: 1224px;
  margin: 0 auto;
  padding: 0 41px;
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 459px;
  align-items: center;
}
.hero-content { padding-right: 32px; padding-bottom: 56px; }

.hero-badge {
  display: inline-block;
  border: 1px solid var(--gold);
  padding: 5px 15.5px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 15.5px;
}
.hero-h1 {
  font-family: var(--f-serif);
  /* 見出しと本文の落差調整: 58px → 50px */
  font-size: 42.5px;
  font-weight: 500;
  line-height: 1.18;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 17px;
}
.hero-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0.04em;
  margin-bottom: 13.5px;
}
.hero-sub::before {
  content: '';
  display: block;
  width: 2.5px;
  height: 15.5px;
  background: var(--teal);
  border-radius: 2px;
  flex-shrink: 0;
}
.hero-desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-mid);
  margin-bottom: 18.5px;
}
.hero-checks { margin-bottom: 32px; }
.hero-checks li {
  display: flex;
  align-items: center;
  gap: 8.5px;
  padding: 4.5px 0;
  font-size: 13px;
}
.hero-checks .ck {
  width: 15.5px; height: 15.5px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-checks .ck svg { width: 10px; height: 10px; }
.hero-checks .kw { font-weight: 700; color: var(--text-dark); min-width: 130px; }
.hero-checks .kd { color: var(--text-mid); font-size: 12.5px; }

/* Hero CTA */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--teal);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13.5px 27px;
  border-radius: 3px;
  box-shadow: 0 3.5px 12px rgba(29,122,138,.28);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-hero:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,122,138,.35); }
.btn-hero .arr { font-size: 16px; }

/* Hero visual */
.hero-visual {
  position: relative;
  height: 100%;
  min-height: 459px;
  overflow: hidden;
}
.hero-bg-circle {
  position: absolute;
  top: -51px; right: -68px;
  width: 510px; height: 510px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef4f6 0%, #f8fbfc 100%);
  pointer-events: none;
}
.hero-arc-svg {
  position: absolute;
  top: -17px; left: -17px;
  width: 120%; height: 120%;
  pointer-events: none;
}
.hero-photo {
  position: absolute;
  top: 0; right: -17px;
  width: 105%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  mask-image: linear-gradient(to right, transparent 0%, black 18%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 100%);
}
.hero-hex {
  position: absolute;
  pointer-events: none;
}
.hero-hex.tr { top: 32px; right: 20px; }
.hero-hex.bl { bottom: 20px; right: 240px; }

/* ────────────────────────────────────────────
   SHARED: SECTION WRAPPER
   ──────────────────────────────────────────── */
.sec { padding: 80px var(--pad-x); }
.sec-inner { max-width: var(--inner); margin: 0 auto; }

/* ── Section title with ornaments ── */
.sec-title-wrap { text-align: center; margin-bottom: 40px; }
.sec-title {
  display: inline-flex;
  align-items: center;
  gap: 15.5px;
  font-family: var(--f-serif);
  font-size: 25.5px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.1em;
}
.sec-title::before,
.sec-title::after {
  content: none;
}
/* 区切り線: PNG画像版に置換(左右で反転) */
.sec-title .sec-div {
  display: block;
  width: 195.5px;
  height: auto;
  flex-shrink: 0;
}
.sec-title .sec-div--left {
  transform: scaleX(-1);
}
.sec-title .orn-svg {
  display: none;
}
.sec-title .orn-svg {
  width: 54.5px;
  height: 30.5px;
  flex-shrink: 0;
  color: var(--gold);
}
/* Hide the legacy .orn span if it's still present */
.sec-title .orn { display: none; }

.sec-sub {
  text-align: center;
  font-size: 13px;
  color: var(--text-mid);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
/* .line variant — same design as default now (kept for backwards-compat) */
.sec-title.line::before,
.sec-title.line::after {
  width: 110.5px;
}

/* ────────────────────────────────────────────
   CONCERNS
   ──────────────────────────────────────────── */
.concerns { background: var(--cream); }
.concerns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin-bottom: 24px;
}
.concern-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  padding: 24px 24px 20.5px;
  box-shadow: 0 1.5px 13.5px rgba(15,29,68,.05);
}
.concern-card-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15.5px;
  margin-bottom: 15.5px;
  border-bottom: 1px solid var(--gray-100);
}
.concern-card-hd .ic { width: 40px; height: 40px; flex-shrink: 0; }
.concern-card-hd h3 {
  font-family: var(--f-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.04em;
}
.concern-list li {
  display: flex;
  align-items: flex-start;
  gap: 8.5px;
  padding: 4.5px 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-dark);
}
.concern-list .ck {
  width: 13.5px; height: 13.5px;
  flex-shrink: 0;
  margin-top: 2.5px;
}

/* Pull quote */
.pull-quote {
  background: var(--navy);
  border-radius: 5px;
  padding: 25.5px 51px;
  text-align: center;
  color: var(--white);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  position: relative;
}
.pull-quote .qq-open {
  position: absolute;
  top: 8.5px; left: 17px;
  font-family: var(--f-script);
  font-size: 54.5px;
  color: var(--gold);
  line-height: 1;
  font-style: italic;
}
.pull-quote .qq-close {
  position: absolute;
  bottom: -7px; right: 17px;
  font-family: var(--f-script);
  font-size: 54.5px;
  color: var(--gold);
  line-height: 1;
  font-style: italic;
}

/* ────────────────────────────────────────────
   COMPARISON TABLE
   ──────────────────────────────────────────── */
.comparison { background: var(--white); }
.cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  font-size: 13px;
}
.cmp-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 13px;
  padding: 11px 15.5px;
  text-align: left;
  letter-spacing: 0.04em;
  border-right: 1px solid rgba(255,255,255,.1);
}
.cmp-table thead th:last-child { border-right: none; }
.cmp-table tbody td {
  padding: 13.5px 15.5px;
  border-bottom: 1px solid var(--gray-100);
  border-right: 1px solid var(--gray-100);
  vertical-align: middle;
  line-height: 1.55;
}
.cmp-table tbody td:last-child { border-right: none; }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table .cname { color: var(--teal); font-weight: 600; }
.cmp-table .cnt { text-align: center; }
.cmp-table .cprice { text-align: right; font-family: var(--f-display); font-weight: 600; }

.cmp-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 17px;
  margin-top: 20.5px;
}
.cmp-btn-col { text-align: center; }
.cmp-lead { font-size: 12.5px; color: var(--text-light); margin-bottom: 8px; }
.btn-teal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8.5px;
  background: var(--teal);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 20.5px;
  border-radius: 3px;
  width: 100%;
  transition: background .2s;
}
.btn-teal:hover { background: var(--teal-dark); }
.btn-teal .arr { font-size: 15px; }

/* ────────────────────────────────────────────
   COURSE SECTIONS (Speaking / Writing)
   ──────────────────────────────────────────── */
.course-sec { background: var(--white); position: relative; overflow: hidden; }
.course-sec.alt { background: var(--white); }
.course-sec-bg {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M50 34v32M34 50h32' stroke='%231d7a8a' stroke-width='.8' fill='none' opacity='.07'/%3E%3Ccircle cx='50' cy='50' r='12' stroke='%231d7a8a' stroke-width='.7' fill='none' opacity='.06'/%3E%3C/svg%3E");
  background-size: 85px 85px;
  pointer-events: none;
}
.course-hd { margin-bottom: 28px; }
.course-hd-title {
  font-family: var(--f-serif);
  /* 見出し調整: 38px → 32px */
  font-size: 27px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin-bottom: 5px;
  display: flex;
  align-items: baseline;
  gap: 0;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 8px;
  width: fit-content;
}
.course-hd-title .arr-icon { display: none; }
.course-hd-sub { font-size: 13.5px; color: var(--text-mid); }

.course-layout {
  display: grid;
  grid-template-columns: 1fr 231px;
  gap: 20.5px;
  align-items: start;
}
.course-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ccard {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  padding: 18.5px 17px;
  box-shadow: 0 1.5px 12px rgba(15,29,68,.05);
  display: flex;
  flex-direction: column;
}
.ccard-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.ccard-badge {
  background: var(--navy);
  color: var(--white);
  border-radius: 3px;
  padding: 6px 8.5px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
  min-width: 56px;
  letter-spacing: 0.02em;
}
.ccard-badge .bp { color: var(--gold-light); font-size: 12.5px; display: block; margin-top: 2px; font-family: var(--f-display); }
.ccard-title {
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.ccard-lead {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}
.ccard-body { font-size: 12.5px; color: var(--text-mid); line-height: 1.75; margin-bottom: 10px; }
.ccard h5 { font-size: 12px; font-weight: 700; color: var(--text-dark); margin: 8px 0 5px; letter-spacing: 0.04em; }
.ccard ul { padding: 0; }
.ccard ul li {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.65;
  padding-left: 10px;
  position: relative;
}
.ccard ul li::before {
  content: '';
  position: absolute;
  left: 1px; top: 7px;
  width: 3.5px; height: 3.5px;
  background: var(--teal);
  border-radius: 50%;
}

/* Picker (どちらを選ぶ?) */
.picker {
  background: var(--navy);
  border-radius: 6px;
  padding: 17px 15.5px 18.5px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 3.5px 20.5px rgba(15,29,68,.18);
}
.picker-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-family: var(--f-serif);
  font-size: 13.5px;
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201,166,97,.25);
  letter-spacing: 0.04em;
}
.picker-hd svg { width: 16px; height: 16px; }
.picker-row {}
.picker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
}
.picker-label svg { width: 14px; height: 14px; opacity: .8; }
.picker-box {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  padding: 8.5px 10px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.picker-down { text-align: center; font-size: 14px; color: var(--gold); line-height: 1; }
.btn-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--teal);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: 3px;
  margin-top: 5px;
  transition: background .2s;
  letter-spacing: 0.03em;
}
.btn-picker:hover { background: var(--teal-dark); }

/* ────────────────────────────────────────────
   SET PLANS
   ──────────────────────────────────────────── */
.set-plans { background: var(--navy); color: var(--white); }
.set-plans .sec-title { color: var(--white); }
.set-plans .sec-sub { color: rgba(255,255,255,.75); }
.set-grid {
  display: grid;
  grid-template-columns: 1fr 1.04fr 1fr;
  gap: 18.5px;
  align-items: center;
  margin-top: 34px;
}
.set-card {
  background: var(--white);
  border-radius: 6px;
  padding: 22px 18.5px;
  color: var(--text-dark);
  box-shadow: 0 5px 24px rgba(0,0,0,.22);
  position: relative;
}
.set-card.feat {
  border: 1.5px solid var(--gold);
  padding-top: 29px;
  transform: translateY(-8.5px);
}
.set-ribbon {
  position: absolute;
  top: -9.5px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  padding: 3.5px 15.5px;
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: 0.1em;
}
.set-card-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.set-card-ic { width: 38px; height: 38px; color: var(--teal); flex-shrink: 0; }
.set-card.feat .set-card-ic { color: var(--gold); }
.set-card-name {
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: normal;
}
.set-price {
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 10px;
  font-family: var(--f-display);
}
.set-price .np { color: var(--red-price); font-weight: 700; font-size: 15px; }
.set-card.feat .set-price .np { color: var(--gold); }
.set-price .op { color: var(--gray-400); text-decoration: line-through; font-size: 12px; margin-left: 6px; }
.set-desc { font-size: 12.5px; color: var(--text-mid); line-height: 1.7; margin-bottom: 10px; }
.set-card h5 { font-size: 12.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; }
.set-card p { font-size: 12.5px; color: var(--text-mid); line-height: 1.65; }
.set-cta-row { text-align: center; margin-top: 32px; }
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8.5px;
  border: 1.5px solid var(--gold);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  transition: background .2s;
}
.btn-outline-white:hover { background: rgba(201,166,97,.12); }

/* ══════════════ SET PLAN TABLE (new comparison-table style) ══════════════ */
/* SP accordion: hidden on desktop */
.set-acc-sp { display: none; }

.set-table-wrap {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  margin-top: 56px;
  overflow: visible;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}
.set-recommend-tab {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background: var(--gold);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 22px;
  border-radius: 4px 4px 0 0;
  letter-spacing: 0.08em;
  white-space: nowrap;
  z-index: 2;
}
.set-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--f-sans);
  position: relative;
}
.set-table th,
.set-table td {
  padding: 18px 16px;
  text-align: center;
  border-bottom: 1px solid #e5e7ec;
  vertical-align: middle;
  background: var(--white);
}
.set-table tr:last-child th,
.set-table tr:last-child td { border-bottom: none; }
/* Row label column (leftmost) */
.set-table .st-row-label {
  width: 210px;
  background: var(--white);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  padding-left: 24px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #e5e7ec;
  border-right: 1px solid #e5e7ec;
}
.set-table tr:last-child .st-row-label { border-bottom: none; }
.set-table .st-rl-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--navy);
  margin-left: 4px;
}
/* Header row (course names) - top row with navy color name on white */
.set-table thead th.st-col {
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
  padding: 24px 8px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--white);
  border-bottom: 1px solid #e5e7ec;
}
.set-table thead .st-row-label {
  background: var(--white);
}
.set-table thead .st-row-label,
.set-table thead th.st-col {
  border-top: none;
}
/* Prevent price from wrapping awkwardly */
.set-table .st-price { white-space: nowrap; }
/* Featured column highlight (cream background) */
.set-table .st-col--feat {
  background: #faf5e8 !important;
}
/* Price row */
.set-table .st-price {
  padding: 16px 12px;
}
.set-table .st-np {
  font-family: var(--f-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--red-price);
  letter-spacing: 0.01em;
}
.set-table .st-op {
  font-size: 11.5px;
  color: var(--gray-400);
  text-decoration: line-through;
  margin-left: 6px;
  font-family: var(--f-sans);
  font-weight: 400;
}
/* Count row */
.set-table .st-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  font-family: var(--f-sans);
}
/* Check / dash cells */
.set-table .st-cell { padding: 14px 12px; }
.set-table .st-check svg {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
}
.set-table .st-dash {
  display: inline-block;
  color: var(--gray-400);
  font-size: 18px;
  line-height: 1;
}
/* Target ("こんな方に" values) */
.set-table .st-target {
  font-size: 13px;
  color: var(--navy);
  background: var(--white);
  line-height: 1.5;
  padding: 16px 14px;
}
/* Button row */
.set-table .st-btn-row .st-btn-cell { padding: 18px 14px; border-bottom: none; }
.set-table .st-btn-row .st-row-label { background: var(--white); border-bottom: none; }
.set-table .st-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  width: 100%;
  transition: background .2s, transform .15s;
}
.set-table .st-btn:hover { background: var(--teal-dark); transform: translateY(-1px); }
.set-table .st-btn--feat { background: var(--gold); }
.set-table .st-btn--feat:hover { background: #b8964e; }
.set-table .st-arr { font-size: 16px; line-height: 1; }
/* Featured column outline */
.set-table .st-col--feat {
  position: relative;
}
/* Featured column gold border (overlay using box-shadow on a pseudo wrapper).
   Use inset borders on the column cells. */
.set-table thead .st-col--feat { border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.set-table tbody tr:not(.st-btn-row) .st-col--feat { border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.set-table .st-btn-row .st-col--feat { border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }

/* Bottom CTA: teal-bordered pill on navy */
.set-bottom-cta {
  border-color: var(--teal);
  color: var(--white);
  white-space: nowrap;
  padding: 14px 36px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: transparent;
}
.set-bottom-cta:hover { background: rgba(29,122,138,.18); }

/* ════════════════════════════════════════════
   SET PLANS — 0.8x SIZE SCALE OVERRIDES
   ════════════════════════════════════════════ */
.set-plans { padding: 64px var(--pad-x); }
.set-plans .sec-title { font-size: 24px; gap: 14px; }
.set-plans .sec-sub   { font-size: 11px; margin-top: 10px; }
.set-plans .sec-title .orn::before,
.set-plans .sec-title .orn::after { width: 32px; }

/* Ribbon */
.set-plans .set-ribbon {
  font-size: 9px;
  padding: 3px 11px;
  top: -9px;
}

/* Wrap */
.set-plans .set-table-wrap {
  padding: 16px;
  margin-top: 45px;
}
.set-plans .set-table {
  overflow: visible;
}

/* Table cells base */
.set-plans .set-table th,
.set-plans .set-table td { padding: 14px 13px; }

/* Row label column */
.set-plans .set-table .st-row-label {
  width: 168px;
  font-size: 11px;
  padding-left: 19px;
}
.set-plans .set-table .st-rl-sub { font-size: 10px; }

/* Header row course names */
.set-plans .set-table thead th.st-col {
  font-size: 14px;
  padding: 19px 6px;
}

/* Price row */
.set-plans .set-table .st-price { padding: 13px 10px; }
.set-plans .set-table .st-np   { font-size: 19px; }
.set-plans .set-table .st-op   { font-size: 9px; }

/* Count row */
.set-plans .set-table .st-count { font-size: 11px; }

/* Check/dash cells */
.set-plans .set-table .st-cell { padding: 11px 10px; }
.set-plans .set-table .st-check svg { width: 18px; height: 18px; }

/* Target "こんな方に" */
.set-plans .set-table .st-target { font-size: 10px; }

/* Button row */
.set-plans .set-table .st-btn-row .st-btn-cell { padding: 14px 11px; }
.set-plans .set-table .st-btn {
  font-size: 14px;
  padding: 11px 19px;
}
.set-plans .set-table .st-arr { font-size: 13px; }

/* Bottom CTA */
.set-plans .set-bottom-cta {
  padding: 11px 29px;
  font-size: 11px;
}


/* ────────────────────────────────────────────
   PRICING TABLES
   ──────────────────────────────────────────── */
.pricing { background: var(--white); }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr;
  gap: 25.5px;
  align-items: start;
}
.ptbl-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8.5px;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.04em;
}
.ptbl-label .tri { font-size: 10px; }
.ptbl-label .note { font-weight: 400; font-size: 11.5px; color: var(--text-light); }
.ptbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  border: 1px solid var(--gray-200);
}
.ptbl th {
  background: var(--gray-50);
  font-weight: 600;
  font-size: 12px;
  padding: 7.5px 8.5px;
  border-bottom: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  text-align: left;
  letter-spacing: 0.03em;
  color: var(--text-dark);
}
.ptbl th:last-child { border-right: none; }
.ptbl td {
  padding: 8.5px 8.5px;
  border-bottom: 1px solid var(--gray-100);
  border-right: 1px solid var(--gray-100);
  font-size: 12.5px;
}
.ptbl td:last-child { border-right: none; }
.ptbl tr:last-child td { border-bottom: none; }
.ptbl .c { text-align: center; }
.ptbl .r { text-align: right; font-family: var(--f-display); font-weight: 600; }
.ptbl .hi { color: var(--red-price); font-weight: 700; }
.pricing-cta { text-align: center; margin-top: 24px; }
.btn-outline-teal {
  display: inline-flex;
  align-items: center;
  gap: 8.5px;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 30.5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  transition: all .2s;
}
.btn-outline-teal:hover { background: var(--teal); color: var(--white); }

/* ────────────────────────────────────────────
   FEATURES (5-up)
   ──────────────────────────────────────────── */
.features { background: var(--white); }
.features-frame {
  border: 1px solid var(--gold-pale);
  border-top: 1.5px solid var(--gold);
  border-radius: 4px;
  padding: 25.5px 13.5px 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  margin-top: 30.5px;
}
.feat-item {
  text-align: center;
  padding: 0 12px;
  position: relative;
}
.feat-item + .feat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 1px;
  background: rgba(201,166,97,.25);
}
.feat-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: var(--f-display);
}
.feat-icon { width: 60px; height: 60px; margin: 0 auto 14px; color: var(--teal); }
.feat-title {
  font-family: var(--f-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 8.5px;
  letter-spacing: 0.02em;
}
.feat-desc { font-size: 12px; color: var(--text-mid); line-height: 1.75; text-align: left; }

/* ────────────────────────────────────────────
   STEPS
   ──────────────────────────────────────────── */
.steps-sec { background: var(--white); border-top: 1px solid var(--gray-100); }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 30.5px;
}
.step-item {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 17px 13.5px;
  margin-right: 24px;
  display: flex;
  flex-direction: column;
}
.step-item:last-child { margin-right: 0; }
.step-item::after {
  content: '';
  position: absolute;
  right: -18.5px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 12px solid var(--navy);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  z-index: 2;
}
.step-item:last-child::after { display: none; }
.step-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.step-hd svg { width: 24px; height: 24px; color: var(--teal); flex-shrink: 0; }
.step-hd span { font-family: var(--f-serif); font-size: 15px; font-weight: 500; color: var(--navy); }
.step-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1.5px solid var(--gold-light);
  line-height: 1.4;
}
.step-desc { font-size: 11.5px; color: var(--text-mid); line-height: 1.72; }

/* ────────────────────────────────────────────
   FAQ
   ──────────────────────────────────────────── */
.faq-sec { background: var(--gray-50); }
.faq-title-pc { display: block; }
.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}
.faq-left { display: none; }
.faq-left h2 {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.06em;
  margin-bottom: 8.5px;
}
.faq-left .sub { font-size: 12px; color: var(--text-light); line-height: 1.7; margin-bottom: 20px; }
.qa-big {
  position: relative;
  font-family: var(--f-script);
  font-size: 119px;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
}
.qa-bubbles {
  position: absolute;
  bottom: -25.5px; right: 8.5px;
  width: 68px;
}
.faq-right {}
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18.5px 34px;
}
.faq-item {}
.faq-q {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.55;
}
.faq-q .qmark { color: var(--teal); font-weight: 700; flex-shrink: 0; font-family: var(--f-display); }
.faq-a {
  /* FAQ回答の可読性調整: 12.5px → 14px */
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.75;
  padding-left: 13.5px;
  border-left: 2px solid var(--teal);
  margin-left: 17px;
}

/* ────────────────────────────────────────────
   CTA SECTION
   ──────────────────────────────────────────── */
.cta-sec {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .07;
}
.cta-sec .sec-title { color: var(--white); }
.cta-sec .sec-title .orn { color: var(--gold); }
.cta-sec .sec-title .orn::before,
.cta-sec .sec-title .orn::after { background: var(--gold); }
.cta-lead {
  text-align: center;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin: 13.5px auto 20.5px;
  max-width: 578px;
}
.cta-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 54.5px;
  max-width: 442px;
  margin: 0 auto 18.5px;
}
.cta-checks li {
  display: flex;
  align-items: center;
  gap: 8.5px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.cta-checks li::before { content: '✓'; color: var(--gold); font-weight: 700; }
.cta-tagline { text-align: center; font-size: 13.5px; margin-bottom: 26px; letter-spacing: 0.04em; }
.cta-btn-row { text-align: center; }
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--teal);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 600;
  padding: 15.5px 54.5px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  box-shadow: 0 3.5px 17px rgba(29,122,138,.35);
  transition: background .2s, transform .2s;
}
.btn-pill:hover { background: var(--teal-dark); transform: translateY(-1px); }

/* ────────────────────────────────────────────
   ABOUT
   ──────────────────────────────────────────── */
.about-sec { background: var(--white); }
.about-hd-title {
  font-family: var(--f-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15.5px;
  letter-spacing: 0.08em;
}
.about-hd-title::before, .about-hd-title::after {
  content: none;
}
.about-hd-title .sec-div {
  display: block;
  width: 195.5px;
  height: auto;
  flex-shrink: 0;
}
.about-hd-title .sec-div--left {
  transform: scaleX(-1);
}
.about-hd-title .orn-svg {
  display: none;
}
.about-hd-title .orn-svg {
  width: 54.5px;
  height: 30.5px;
  flex-shrink: 0;
  color: var(--gold);
}
.about-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 34px;
  align-items: end;
  margin-top: 24px;
}
.about-text p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-mid);
  margin-bottom: 13.5px;
  letter-spacing: 0.02em;
}
.about-img {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 3.5px 20.5px rgba(15,29,68,.08);
}
.about-img img { width: 100%; height: 100%; object-fit: cover; }
/* 2枚目画像はデスクトップでは非表示 */

/* ────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────── */
.ftr {
  background: var(--navy);
  padding: 0;
}
.ftr-top-divider {
  height: 3.5px;
  background: var(--gold);
}
.ftr-main {
  padding: 58px 34px 0;
  text-align: center;
  max-width: 1224px;
  margin: 0 auto;
}
.ftr-logo-section {
  margin-bottom: 47.5px;
}
.ftr-logo {
  height: 136px;
  width: auto;
  display: inline-block;
}
.ftr-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 41px;
  font-size: 13px;
  font-family: var(--f-sans);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.ftr-nav a {
  color: #fff;
  text-decoration: none;
  padding: 0 15.5px;
  transition: opacity 0.3s;
}
.ftr-nav a:hover {
  opacity: 0.6;
}
.ftr-nav .divider {
  color: rgba(255,255,255,0.4);
  margin: 0 -1.5px;
  font-weight: 300;
}
.ftr-divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 5%, var(--gold) 95%, transparent);
  margin: 30.5px 0;
}
.ftr-legal-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  margin-bottom: 18px;
}
.ftr-legal-nav a {
  color: rgba(255,255,255,0.7);
  font-size: 12.5px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}
.ftr-legal-nav a:hover { color: var(--white); }
.ftr-legal-nav .divider {
  color: rgba(255,255,255,0.25);
  font-weight: 300;
  font-size: 12px;
}
.ftr-copy {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-family: var(--f-sans);
  padding: 27px 34px;
  text-align: center;
  letter-spacing: 0.03em;
}

/* ========== COURSE COMPARISON (NEW) ========== */
.cmp-rows {
  display: flex;
  flex-direction: column;
  gap: 13.5px;
  margin-bottom: 41px;
}
.cmp-row {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #dde3ea;
  border-radius: 2px;
  overflow: hidden;
  /* 間延び解消: 90px → 72px */
  min-height: 61px;
}
.cmp-teal .cmp-bar { background: #1f7a8c; }
.cmp-navy .cmp-bar { background: #0a1e3a; }
.cmp-gold .cmp-bar { background: #c9a961; }
.cmp-recommend .cmp-bar { background: #c9a961; }

/* ── おすすめセットプラン row ── */
.cmp-recommend {
  background: #faf5e8;
  border: 1px solid #e6d9b4;
  position: relative;
}
.cmp-recommend .cmp-name {
  color: #0a1e3a;
  position: relative;
  /* Clear 52px ribbon (row starts after 8.5px bar) */
  padding-left: 56px;
}

.cmp-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 60px;
  background: #c9a961;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  z-index: 5;
  font-family: var(--f-sans);
  line-height: 1.1;
}
.cmp-ribbon-star {
  font-size: 11px;
  margin-bottom: 2px;
}
.cmp-ribbon-text {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cmp-bar {
  width: 8.5px;
  flex-shrink: 0;
}
.cmp-name {
  width: 238px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 20.5px 24px 20.5px 24px;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  /* 見出し調整: 26px → 22px */
  font-size: 18.5px;
  font-weight: 500;
  color: #0a1e3a;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.cmp-vsep {
  width: 1px;
  background: #dde3ea;
  flex-shrink: 0;
  align-self: stretch;
  margin: 13.5px 0;
}
.cmp-cells {
  flex: 1;
  display: flex;
  align-items: stretch;
}
.cmp-cell {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* 縦方向詰め: padding 20px 24px → 14px 24px */
  padding: 12px 20.5px;
}
.cmp-cellsep {
  width: 1px;
  background: #dde3ea;
  align-self: stretch;
  margin: 10px 0;
}
.cmp-ico {
  width: 30.5px;
  height: 30.5px;
  flex-shrink: 0;
  display: block;
}
.cmp-cell-text {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
}
.cmp-clabel {
  /* ラベル調整: 11px → 12px */
  font-size: 12px;
  font-weight: 700;
  color: #0a1e3a;
  letter-spacing: 0.08em;
  font-family: var(--f-sans);
}
.cmp-cval {
  /* 本文調整: 13px → 14px / 行間微調整 */
  font-size: 13px;
  color: #333;
  line-height: 1.65;
  font-family: var(--f-sans);
}
.cmp-price-col {
  width: 127.5px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 17px 27px 17px 13.5px;
  gap: 3.5px;
}
.cmp-plabel {
  font-size: 11px;
  font-weight: 700;
  color: #0a1e3a;
  letter-spacing: 0.08em;
  font-family: var(--f-sans);
}
.cmp-pval {
  /* フォント変更: 'Cormorant Garamond' → Noto Serif JP (画像参照) */
  font-family: var(--f-serif);
  /* サイズ拡大: 24px → 32px */
  font-size: 27px;
  /* ウェイト調整: 600 → 500 (セリフ体に合わせる) */
  font-weight: 500;
  color: #0a1e3a;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.1;
}

/* 下部フッター */
.cmp-help-note {
  text-align: center;
  font-size: 14px;
  color: #4E5870;
  margin: 28px 0 8px;
  letter-spacing: 0.02em;
}
.cmp-tax-note {
  text-align: right;
  font-size: 12px;
  color: #8A93A8;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.cmp-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cmp-footer-divider {
  display: flex;
  align-items: center;
  gap: 13.5px;
  width: 100%;
  font-family: var(--f-sans);
  font-size: 13px;
}
.cmp-fdline {
  flex: 1;
  height: 1px;
  background: #c9a961;
  display: block;
}
.cmp-fdcenter {
  color: #0a1e3a;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.cmp-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  width: 100%;
  max-width: 850px;
}
.cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8.5px;
  background: #1f7a8c;
  color: #ffffff;
  text-decoration: none;
  padding: 13.5px 24px;
  border-radius: 6px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: background 0.3s, transform 0.2s;
}
.cmp-btn:hover {
  background: #155f6d;
  transform: translateY(-1.5px);
}
.cmp-arrow {
  font-size: 15.5px;
  font-weight: 400;
}

/* セットプラン用 (gold outline + sparkle) */
.cmp-btn--set {
  background: transparent;
  color: #1f7a8c;
  border: 1.5px solid #c9a961;
  position: relative;
}
.cmp-btn--set:hover {
  background: rgba(201,166,97,0.08);
  color: #155f6d;
}
.cmp-btn-sparkle {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: #c9a961;
  font-size: 18px;
  line-height: 1;
}

/* ════════════════════════════════════════════
   COURSE SECTIONS v2 (Speaking / Writing redesign)
   ════════════════════════════════════════════ */
.course-sec-v2 {
  background: var(--white);
  padding: 68px var(--pad-x);
}

/* ── Section header with filled square ── */
.course-hd-v2 {
  margin-bottom: 24px;
}
.course-hd-v2-title {
  font-family: var(--f-serif);
  /* 見出し抑制(統一): 36px → 32px (course-hd-title と同じ意図) */
  font-size: 27px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.04em;
  margin-bottom: 8.5px;
  display: flex;
  align-items: center;
}
.title-sq {
  display: inline-block;
  width: 15.5px;
  height: 15.5px;
  background: var(--navy);
  margin-right: 12px;
  flex-shrink: 0;
}
.title-sq--gold {
  background: var(--gold);
}
.course-hd-v2-sub {
  font-size: 13px;
  color: var(--text-mid);
  letter-spacing: 0.02em;
  padding-left: 3.5px;
}

/* ── Cards row ── */
.ccards-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 22px;
  row-gap: 0;
  margin-bottom: 27px;
}
.ccard-v2 {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 2px solid var(--teal);
  border-radius: 4px;
  /* 縦余白詰め: 32px 32px 28px → 19px 32px 17px (上下のぢ0.6倍 / 横不変) */
  padding: 16px 27px 14.5px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 3;
  gap: 0;
  align-self: stretch;
}
.ccard-v2:nth-child(1) { grid-column: 1; }
.ccard-v2:nth-child(2) { grid-column: 2; }

/* Intro block: title, lead, body (equal row height via parent subgrid) */
.ccard-v2-intro {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Top row: title + price box */
.ccard-v2-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 13.5px;
  margin-bottom: 8.5px;
}
.ccard-v2-title {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.01em;
  line-height: 1.25;
  flex: 1;
  white-space: nowrap;
}
.ccard-v2-jp {
  display: block;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.04em;
  margin-top: 4px;
  white-space: nowrap;
}
.ccard-v2-price {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.ccard-v2-price--gold {
  border-color: var(--gold);
  color: var(--gold);
}
.ccard-v2-price--navy {
  border-color: var(--navy);
  color: var(--navy);
}

/* Lead + body */
.ccard-v2-lead {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal);
  /* セクション間margin縮小: 14px → 10px (×0.7) */
  margin-bottom: 8.5px;
  letter-spacing: 0.02em;
}
.ccard-v2-body {
  font-size: 13px;
  color: var(--text-dark);
  /* 行間縮小: 1.85 → 1.5 */
  line-height: 1.5;
  /* セクション間margin縮小: 22px → 15px (×0.7) */
  margin-bottom: 13px;
}

/* Section in card */
.ccard-v2-sec {
  /* 見出し間margin縮小: 18px → 11px (×0.6) */
  margin-bottom: 9.5px;
}
.ccard-v2-sec:last-child {
  margin-bottom: 0;
}
.ccard-v2-h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--teal);
  /* 見出し下マージン縮小: 12px → 7px (×0.6) */
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.ccard-v2-h4 .ic-h4 {
  width: 18.5px;
  height: 18.5px;
  flex-shrink: 0;
  color: var(--teal);
}
.ccard-v2-h4 .h4-line {
  flex: 1;
  height: 1px;
  background: var(--gold);
  margin-left: 5px;
}

/* List with check circles */
.ccard-v2-list {
  padding: 0;
  list-style: none;
}
.ccard-v2-list--check li {
  display: flex;
  align-items: flex-start;
  gap: 8.5px;
  /* 項目間スペース縮小: 4px 0 → 2px 0 (×0.5) */
  padding: 1.5px 0;
  font-size: 13px;
  /* 行間縮小: 1.7 → 1.5 */
  line-height: 1.5;
  color: var(--text-dark);
  letter-spacing: 0.01em;
}
.ccard-v2-list--check .ck {
  width: 13.5px;
  height: 13.5px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* line-height変更に伴う位置調整: 5px → 3px */
  margin-top: 2.5px;
}
.ccard-v2-list--check .ck svg {
  width: 8.5px;
  height: 8.5px;
}

/* List with simple black dots */
.ccard-v2-list--dot li {
  /* 項目間スペース縮小: 4px 0 → 2px 0 (×0.5) */
  padding: 1.5px 0;
  font-size: 13px;
  /* 行間縮小: 1.7 → 1.5 */
  line-height: 1.5;
  color: var(--text-dark);
  letter-spacing: 0.01em;
  display: flex;
  align-items: flex-start;
  gap: 8.5px;
}
.ccard-v2-list--dot li .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-dark);
  flex-shrink: 0;
  /* line-height変更に伴う位置調整: 9px → 7px */
  margin-top: 6px;
}
.ccard-v2-note {
  font-size: 13px;
  color: var(--text-mid);
  /* ノート上マージン縮小: 12px → 6px (×0.5) */
  margin-top: 5px;
  padding-left: 15.5px;
  letter-spacing: 0.02em;
}

/* ── "どちらを選ぶ?" choose box (navy bar) ── */
.choose-box {
  background: var(--navy);
  color: var(--white);
  padding: 22px 34px;
  display: flex;
  align-items: center;
  gap: 27px;
  margin-bottom: 34px;
}
.choose-box-hd {
  display: flex;
  align-items: center;
  font-family: var(--f-serif);
  font-size: 18.5px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.choose-box-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(201, 166, 97, 0.4);
}
.choose-box-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.choose-row {
  display: flex;
  align-items: center;
  gap: 18.5px;
  font-size: 13.5px;
  font-family: var(--f-serif);
  letter-spacing: 0.04em;
}
.choose-label {
  color: var(--white);
  min-width: 204px;
}
.choose-arr {
  color: var(--gold);
  font-size: 15.5px;
  font-weight: 400;
}
.choose-course {
  color: var(--white);
  font-weight: 400;
}

/* ── CTA button row ── */
.course-cta-row {
  text-align: center;
  margin-top: 7px;
}
.btn-course-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13.5px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--f-serif);
  font-size: 15.5px;
  font-weight: 500;
  padding: 15.5px 54.5px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  transition: background .25s, transform .15s;
  box-shadow: 0 2.5px 10px rgba(29,122,138,.25);
}
.btn-course-cta:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}
.btn-course-cta .arr {
  font-size: 15.5px;
}

/* ════════════════════════════════════════════
   WRITING SECTION (single card v2)
   ════════════════════════════════════════════ */
.writing-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 2px solid var(--teal);
  border-radius: 4px;
  padding: 16px 27px 28px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
}
.writing-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.writing-card-title {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: 0;
}
.writing-card-badges {
  display: flex;
  gap: 10px;
  align-items: center;
}
.writing-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2px;
  border: 1px solid;
  background: var(--white);
  white-space: nowrap;
}
.writing-badge--navy {
  border-color: var(--navy);
  color: var(--navy);
}
.writing-badge--gold {
  border-color: var(--gold);
  color: var(--gold);
}
.writing-card-body {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.75;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.writing-card-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.writing-card-col {
  min-width: 0;
}
.writing-card-col .ccard-v2-h4 {
  margin-bottom: 8px;
}

/* ── 追加添削 row ── */
.writing-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--text-dark);
  margin-bottom: 18px;
  padding: 0 20px;
}
.writing-addon-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 2px;
  background: var(--white);
  white-space: nowrap;
  margin-right: 6px;
}
.writing-addon-item {
  font-size: 13.5px;
  color: var(--text-dark);
  letter-spacing: 0.02em;
}
.writing-addon-divider {
  color: var(--gray-200);
  font-weight: 300;
}

/* ── このコースの特長 (navy dark box) ── */
.writing-features {
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--navy);
  color: var(--white);
  padding: 22px 34px;
  margin-bottom: 28px;
}
.writing-features-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.writing-features-star {
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
}
.writing-features-title {
  font-family: var(--f-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.writing-features-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(201,166,97,0.45);
  flex-shrink: 0;
}
.writing-features-list {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.writing-features-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-family: var(--f-sans);
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.writing-features-list li svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════
   HAMBURGER (hidden on desktop)
   ════════════════════════════════════════════ */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4.5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 18.5px;
  height: 1.5px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════════
   SWIPE UI (Mobile carousel hints) - desktop hidden by default
   ════════════════════════════════════════════ */
.swipe-banner-sp,
.swipe-dots-sp,
.swipe-bottom-sp {
  display: none;
}

/* ════════════════════════════════════════════
   INSTRUCTORS
   ════════════════════════════════════════════ */
.instructors {
  background: var(--navy);
  color: var(--white);
  padding: 80px var(--pad-x);
  position: relative;
  overflow: hidden;
}
.instructors::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,166,97,.35) 30%, rgba(201,166,97,.35) 70%, transparent);
  pointer-events: none;
}
.inst-head {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.inst-badge {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--white);
  background: rgba(201,166,97,.10);
  border: 1px solid rgba(201,166,97,.55);
  padding: 7px 18px;
  border-radius: 3px;
}
.inst-title {
  font-family: var(--f-serif);
  font-size: 38px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin: 0;
}
.inst-title-em {
  color: rgba(201,166,97,.85);
  margin-left: 6px;
}
.inst-divider {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.inst-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
.inst-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 24px 16px 20px;
  text-align: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(201, 166, 97, .2);
  border-radius: 8px;
  transition: border-color .25s, background .25s;
}
.inst-card:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(201, 166, 97, .38);
}
.inst-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3a4660 0%, #1a2440 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(201,166,97,.18);
  filter: grayscale(100%) contrast(1.02);
  transition: filter 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .inst-card:hover .inst-photo {
    filter: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(201,166,97,.35);
  }
}
@media (hover: none), (pointer: coarse) {
  .inst-photo {
    filter: none;
  }
}
.inst-photo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.inst-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inst-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  text-align: left;
}
.inst-name {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  line-height: 1.3;
  text-align: center;
}
.inst-specialty {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(201, 166, 97, .9);
  text-align: center;
}
.inst-lead {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  letter-spacing: 0.02em;
}
.inst-points {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  flex: 1;
}
.inst-points li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}
.inst-points li:last-child {
  margin-bottom: 0;
}
.inst-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .85;
}
.inst-more {
  margin-top: auto;
  border-top: 1px solid rgba(201, 166, 97, .22);
  padding-top: 12px;
}
.inst-more summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(201, 166, 97, .92);
  text-align: center;
  user-select: none;
}
.inst-more summary::-webkit-details-marker {
  display: none;
}
.inst-more summary::after {
  content: ' ›';
  display: inline-block;
  transition: transform .2s;
}
.inst-more[open] summary::after {
  transform: rotate(90deg);
}
.inst-more-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inst-more-body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .65);
}
.inst-foot {
  margin: 40px 0 0;
  text-align: center;
}
.inst-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 14px 28px;
}
.inst-foot-cta .arr {
  font-size: 16px;
}

/* ════════════════════════════════════════════
   RESPONSIVE — Tablet  ≤ 1023px
   ════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* ── Base ── */
  :root { --pad-x: 28px; }
  body { min-width: unset; }

  /* ── Header ── */
  .hdr-inner { padding: 0 20px; }
  .gnav ul { gap: 18px; }
  .gnav a { font-size: 12px; }
  .logo-img { height: 56px; }

  /* ── Hero ── */
  .hero-inner {
    padding: 0 20px;
    grid-template-columns: 54% 46%;
    min-height: 460px;
  }
  .hero-h1 { font-size: 42px; }
  .hero-badge { font-size: 11px; }

  /* ── Sections ── */
  .sec { padding: 60px var(--pad-x); }
  .sec-title { font-size: 26px; }

  /* ── Comparison rows ── */
  .cmp-name { width: 190px; font-size: 19px; padding: 18px 16px; }
  .cmp-cell { padding: 14px 12px; gap: 8px; }
  .cmp-ico { width: 28px; height: 28px; }
  .cmp-price-col { width: 120px; padding: 18px 16px 18px 10px; }
  .cmp-pval { font-size: 18px; }
  .cmp-btns { gap: 12px; }

  /* ── Course layout ── */
  .course-layout { grid-template-columns: 1fr; }
  .picker { width: 100%; max-width: 560px; }

  /* ── Course v2 ── */
  .course-sec-v2 { padding: 60px var(--pad-x); }
  .course-hd-v2-title { font-size: 28px; }
  .ccard-v2 { padding: 24px 22px 22px; }
  .ccard-v2-title { font-size: 24px; }
  .ccard-v2-top { flex-direction: column; gap: 10px; }
  .ccard-v2-price { align-self: flex-start; }
  .choose-box { padding: 20px 24px; gap: 20px; }
  .choose-box-hd { font-size: 18px; }
  .choose-row { font-size: 14px; gap: 14px; }
  .choose-label { min-width: 200px; }
  .btn-course-cta { font-size: 16px; padding: 16px 40px; }

  /* ── Set plans ── */
  .set-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .set-card.feat { grid-column: span 2; transform: none; }

  /* ── Pricing ── */
  .pricing-grid { grid-template-columns: 1fr; gap: 20px; }

  /* ── Features ── */
  .features-frame { grid-template-columns: repeat(3, 1fr); }
  /* 4th item: suppress the left-border divider (it's first in row 2) */
  .feat-item:nth-child(4)::before { display: none; }

  /* ── Steps ── */
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
  .step-item { margin-right: 0; }
  /* Remove arrows on tablet — complex multi-row layout makes them misleading */
  .step-item::after { display: none; }

  /* ── FAQ ── */
  /* (FAQ uses sec-title-wrap at top; faq-left only shows on SP) */

  /* ── CTA ── */
  .cta-checks { gap: 6px 40px; }

  /* ── About ── */
  .about-body { gap: 28px; }

  /* ── Footer ── */
  .ftr-logo { height: 120px; }

  /* ── Instructors ── */
  .inst-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 640px; }
  .inst-title { font-size: 30px; }
  .inst-photo { width: 120px; height: 120px; }
}

/* ════════════════════════════════════════════
   RESPONSIVE — Mobile  ≤ 767px
   ════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Base ── */
  :root { --pad-x: 16px; }

  /* ── Header ── */
  .hdr-inner { padding: 0 16px; height: 56px; }
  .logo-img { height: 52px; }

  /* Nav: hide desktop nav, show hamburger */
  .gnav {
    display: none;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    padding: 8px 16px 20px;
    z-index: 199;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }
  .gnav.open { display: block; }
  .gnav ul { flex-direction: column; gap: 0; }
  .gnav a {
    display: block;
    padding: 13px 4px;
    font-size: 15px;
    border-bottom: 1px solid var(--gray-100);
  }
  .gnav ul li:last-child a { border-bottom: none; }
  .nav-toggle { display: flex; }

  /* ── Hero ── */
  .hero { padding: 0; }
  .hero-inner {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    padding: 0;
    min-height: unset;
  }

  /* Visual: 上部に画像をフルブリードで表示 */
  .hero-visual {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3.1;
    overflow: hidden;
    order: 1;
    margin-bottom: 0;
  }
  /* 画像下部を白にフェード (画像が下に向かって透過) */
  .hero-visual::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.4) 35%,
      rgba(255,255,255,0.85) 75%,
      rgba(255,255,255,1) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  .hero-bg-circle,
  .hero-arc-svg,
  .hero-hex { display: none; }
  .hero-photo {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* Content: 画像の下 */
  .hero-content {
    order: 2;
    padding: 0 16px 18px;
    padding-right: 16px;
    padding-bottom: 18px;
    position: relative;
    z-index: 2;
  }
  .hero-badge {
    font-size: 12px;
    padding: 9px 18px;
    margin-top: -42px;
    margin-bottom: 18px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 2px;
    position: relative;
    z-index: 3;
    box-shadow: 0 2px 12px rgba(15,29,68,0.10);
    color: var(--text-dark);
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  .hero-h1 { font-size: 27px; line-height: 1.25; margin-bottom: 12px; }
  .hero-sub { font-size: 13px; margin-bottom: 10px; }
  .hero-desc { font-size: 12px; line-height: 1.65; margin-bottom: 14px; }
  .hero-desc br { display: inline; }

  .hero-checks { margin-bottom: 16px; }
  .hero-checks li {
    padding: 7px 0;
    border-bottom: 1px solid #e5e7ec;
    gap: 12px;
    font-size: 12.5px;
  }
  .hero-checks li:first-child { border-top: 1px solid #e5e7ec; }
  .hero-checks .ck { width: 18px; height: 18px; flex-shrink: 0; }
  .hero-checks .ck svg { width: 11px; height: 11px; }
  .hero-checks .kd { display: inline; color: var(--text-mid); font-size: 12px; }
  .hero-checks .kw {
    min-width: 100px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
  }
  .btn-hero {
    width: 100%;
    justify-content: center;
    font-size: 13.5px;
    padding: 14px 18px;
    letter-spacing: 0.04em;
  }

  /* ── Sections ── */
  .sec { padding: 48px var(--pad-x); }
  .sec-inner { max-width: 100%; }
  .sec-title { font-size: 20px; gap: 10px; letter-spacing: 0.06em; }
  .sec-title .orn::before, .sec-title .orn::after { width: 20px; }
  .sec-sub { font-size: 12.5px; }

  /* ── Concerns ── */
  .concerns-grid { grid-template-columns: 1fr; gap: 14px; }
  .concern-card { padding: 20px 16px; }
  .pull-quote {
    padding: 24px 20px 24px 28px;
    font-size: 13.5px;
    line-height: 1.85;
  }
  .pull-quote br { display: none; }

  /* ── Comparison rows: 画像準拠のSPレイアウト ── */
  .cmp-rows { gap: 18px; }
  .cmp-row {
    display: grid;
    grid-template-columns: 7px 1fr auto;
    grid-template-areas:
      "bar name  name"
      "bar tgt   tgt"
      "bar pur   pur"
      "bar div   div"
      "bar cnt   prc";
    min-height: unset;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(15,29,68,0.08);
    border: none;
  }
  .cmp-bar {
    grid-area: bar;
    width: 100%;
    height: auto;
    align-self: stretch;
  }
  .cmp-name {
    grid-area: name;
    width: auto;
    padding: 20px 18px 4px;
    font-family: var(--f-serif);
    font-size: 22px;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .cmp-recommend .cmp-name {
    padding-left: 60px;
  }
  .cmp-vsep { display: none; }

  /* display: contents で cmp-cells の子要素を親グリッドに直接配置 */
  .cmp-cells { display: contents; }
  .cmp-cells > .cmp-cell {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 3px 18px;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  /* 1st cell = 対象 */
  .cmp-cells > .cmp-cell:nth-child(1) { grid-area: tgt; padding-top: 10px; }
  /* 3rd cell = 目的 */
  .cmp-cells > .cmp-cell:nth-child(3) { grid-area: pur; padding-bottom: 12px; }
  /* 5th cell = 回数 (大きな値表示・右にボーダー) */
  .cmp-cells > .cmp-cell:nth-child(5) {
    grid-area: cnt;
    padding: 14px 14px 18px 18px;
    border-right: 1px solid #dde3ea;
    align-items: center;
  }
  /* セパレーター: 2nd hidden, 4th = 横ライン */
  .cmp-cells > .cmp-cellsep:nth-child(2) { display: none; }
  .cmp-cells > .cmp-cellsep:nth-child(4) {
    display: block;
    grid-area: div;
    height: 1px;
    width: auto;
    background: #dde3ea;
    margin: 0 18px;
    align-self: auto;
  }

  /* 対象・目的 のアイコンサイズ */
  .cmp-cells > .cmp-cell:nth-child(1) .cmp-ico,
  .cmp-cells > .cmp-cell:nth-child(3) .cmp-ico {
    width: 20px;
    height: 20px;
    margin-top: 0;
    flex-shrink: 0;
  }
  /* 回数 アイコンは非表示 */
  .cmp-cells > .cmp-cell:nth-child(5) .cmp-ico { display: none; }

  /* セルテキスト: ラベル + ":" + 値 を横並びに (改行禁止) */
  .cmp-cells > .cmp-cell:nth-child(1) .cmp-cell-text,
  .cmp-cells > .cmp-cell:nth-child(3) .cmp-cell-text {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  .cmp-cells > .cmp-cell:nth-child(1) .cmp-clabel,
  .cmp-cells > .cmp-cell:nth-child(3) .cmp-clabel {
    flex-shrink: 0;
    font-size: 13px;
  }
  .cmp-cells > .cmp-cell:nth-child(1) .cmp-clabel::after,
  .cmp-cells > .cmp-cell:nth-child(3) .cmp-clabel::after {
    content: '：';
  }
  .cmp-cells > .cmp-cell:nth-child(1) .cmp-cval,
  .cmp-cells > .cmp-cell:nth-child(3) .cmp-cval {
    font-size: 13px;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* 回数セル: 料金と同じ大きなセリフフォント */
  .cmp-cells > .cmp-cell:nth-child(5) .cmp-cell-text {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .cmp-cells > .cmp-cell:nth-child(5) .cmp-clabel { flex-shrink: 0; }
  .cmp-cells > .cmp-cell:nth-child(5) .cmp-cval {
    font-family: var(--f-serif);
    font-size: 22px;
    font-weight: 500;
    color: #0a1e3a;
    line-height: 1.1;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  /* 料金カラム: 横並び bottom-right */
  .cmp-price-col {
    grid-area: prc;
    flex-direction: row;
    width: auto;
    align-items: baseline;
    justify-content: flex-start;
    padding: 14px 18px 18px 14px;
    gap: 10px;
    border-top: none;
  }
  .cmp-plabel { white-space: nowrap; }
  .cmp-pval { font-size: 22px; white-space: nowrap; }

  /* 下部ボタン群 */
  .cmp-btns { grid-template-columns: 1fr; gap: 10px; }
  .cmp-fdcenter { font-size: 14px; }

  /* ── Course sections ── */
  .course-hd-title { font-size: 26px; }
  .course-layout { grid-template-columns: 1fr; gap: 16px; }
  .course-cards { grid-template-columns: 1fr; gap: 14px; }
  .picker { width: 100%; }

  /* ── Course v2 mobile: SWIPE CAROUSEL ── */
  .course-sec-v2 { padding: 48px var(--pad-x); }
  .course-hd-v2-title { font-size: 22px; }

  /* Show swipe UI on SP */
  .swipe-banner-sp {
    display: block;
    margin: 0;
    text-align: center;
  }
  .swipe-banner-sp img {
    width: 100%;
    max-width: 420px;
    display: block;
    margin: 0 auto;
    height: auto;
  }

  /* Horizontal scroll carousel for cards: break out of section padding for peek */
  .ccards-v2 {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 14px;
    margin: 0 calc(var(--pad-x) * -1) 14px;
    padding: 4px var(--pad-x) 18px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ccards-v2::-webkit-scrollbar { display: none; }

  .ccard-v2 {
    display: flex;
    flex-direction: column;
    grid-column: auto;
    grid-row: auto;
    grid-template-rows: none;
    flex: 0 0 calc(100% - 48px);
    scroll-snap-align: center;
    padding: 22px 22px 26px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(15,29,68,.06);
  }

  /* Pagination dots */
  .swipe-dots-sp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 28px;
  }
  .swipe-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9d0d8;
    transition: background .2s;
  }
  .swipe-dot.active {
    background: var(--teal);
  }

  /* Bottom swipe reminder */
  .swipe-bottom-sp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
    padding: 4px 0 0;
  }
  .swipe-bottom-ic {
    width: 44px;
    height: 40px;
    flex-shrink: 0;
  }
  .swipe-bottom-text {
    font-size: 13px;
    color: var(--teal);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  .ccard-v2-title { white-space: normal; line-height: 1.3; font-size: 22px; }
  .ccard-v2-jp { white-space: normal; }
  .ccard-v2-top { flex-direction: row; gap: 10px; align-items: flex-start; justify-content: space-between; }
  .ccard-v2-lead { font-size: 13.5px; }
  .ccard-v2-body { font-size: 13px; line-height: 1.65; }
  .ccard-v2-body br { display: none; }
  .ccard-v2-h4 { font-size: 14px; }

  .choose-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 22px;
    gap: 14px;
  }
  .choose-box-divider { display: none; }
  .choose-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
  }
  .choose-label { min-width: unset; }
  .choose-arr { display: none; }
  .choose-course { padding-left: 16px; color: var(--gold); }
  .btn-course-cta { font-size: 14px; padding: 14px 24px; width: 100%; }

  /* ── Set plans ── */
  .set-grid { grid-template-columns: 1fr; gap: 16px; }
  .set-card.feat { grid-column: unset; transform: none; padding-top: 34px; }

  /* ── Pricing ── */
  .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .ptbl { font-size: 12px; }
  .ptbl td, .ptbl th { padding: 8px 8px; }

  /* ── Features ── */
  .features-frame {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px 10px;
    gap: 0;
  }
  /* Suppress dividers for left-column items in 2-col layout */
  .feat-item:nth-child(odd)::before { display: none; }

  /* ── Steps ── */
  .steps-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .step-item { margin-right: 0; }
  .step-item::after { display: none; }

  /* ── FAQ ── */
  .faq-sec { padding: 48px var(--pad-x); }
  .faq-title-pc { display: none; }
  .faq-layout { grid-template-columns: 1fr; gap: 0; }

  /* Restore faq-left on SP, but as centered header above */
  .faq-left {
    display: block;
    text-align: center;
    margin-bottom: 8px;
  }
  .faq-left h2,
  .faq-left .faq-left-title {
    font-family: var(--f-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--navy);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .faq-left-title .sec-div {
    flex: 0 0 auto;
    width: 64px;
    height: 20px;
    object-fit: contain;
  }
  .faq-left-title .sec-div--left { transform: scaleX(-1); }
  .faq-left .sub {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.75;
    margin-bottom: 4px;
    text-align: center;
  }
  /* Big Q&A display + decorative bubbles container */
  .faq-left > div[style*="position:relative"] {
    height: 130px !important;
    position: relative;
    text-align: center;
    margin-top: 6px;
  }
  .qa-big {
    position: relative;
    display: inline-block;
    font-family: var(--f-script);
    font-size: 108px;
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -0.04em;
    user-select: none;
  }
  .qa-bubbles {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(50px);
    width: 78px;
    height: auto;
    z-index: 0;
  }

  .faq-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  /* Reorder items: current HTML is column-first (Q1,Q6,Q2,Q7,Q3,Q8,Q4,Q9,Q5),
     SP needs sequential 1→9 */
  .faq-item:nth-child(1) { order: 1; }
  .faq-item:nth-child(2) { order: 6; }
  .faq-item:nth-child(3) { order: 2; }
  .faq-item:nth-child(4) { order: 7; }
  .faq-item:nth-child(5) { order: 3; }
  .faq-item:nth-child(6) { order: 8; }
  .faq-item:nth-child(7) { order: 4; }
  .faq-item:nth-child(8) { order: 9; }
  .faq-item:nth-child(9) { order: 5; }

  .faq-q {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
    line-height: 1.5;
    gap: 4px;
  }
  .faq-q .qmark {
    color: var(--teal);
    font-weight: 700;
    font-family: var(--f-display);
    font-size: 14.5px;
  }
  .faq-q .qmark sub {
    font-size: 0.7em;
    font-weight: 600;
  }
  .faq-a {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.7;
    padding-left: 14px;
    border-left: 2px solid var(--teal);
    margin-left: 22px;
    letter-spacing: 0.01em;
  }

  /* ── CTA ── */
  .cta-checks { grid-template-columns: 1fr; gap: 8px; }
  .cta-lead { font-size: 13px; }
  .cta-tagline { font-size: 13px; }
  .btn-pill { padding: 16px 28px; font-size: 14px; width: 100%; justify-content: center; }

  /* ── About: SP 交互レイアウト (テキスト→画像→テキスト→テキスト) ── */
  .about-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .about-text {
    display: contents;
  }
  .about-p {
    margin: 0 0 18px;
  }
  .about-img {
    display: block !important;
    margin: 0 0 22px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(15,29,68,.08);
  }
  .about-img img {
    width: 100%;
    height: auto;
    min-height: 0 !important;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  /* 並び順: p1 → img1 → p2 → p3 */
  .about-p--1 { order: 1; }
  .about-img--1 { order: 2; }
  .about-p--2 { order: 3; }
  .about-p--3 { order: 4; margin-bottom: 0; }

  .about-hd-title { font-size: 22px; }
  .about-hd-title::before, .about-hd-title::after { width: 28px; }

  /* ── Footer ── */
  .ftr-main { padding: 36px 16px 0; }
  .ftr-logo { height: 90px; }
  .ftr-logo-section { margin-bottom: 32px; }
  .ftr-nav {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 13px;
  }
  .ftr-nav .divider { display: none; }
  .ftr-nav a { padding: 0; }

  /* Legal nav: SP */
  .ftr-legal-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    padding: 0 16px;
    margin-bottom: 12px;
  }
  .ftr-legal-nav a { font-size: 11.5px; }
  .ftr-legal-nav .divider { display: inline; font-size: 11px; }
  .ftr-copy { font-size: 11px; padding: 24px 16px; }

  /* ── Buttons ── */
  .btn-outline-white,
  .btn-outline-teal { width: 100%; justify-content: center; }
  .set-cta-row { text-align: center; }

  /* ── Section title decorative dividers: shrink for SP ── */
  .sec-title {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-align: center;
  }
  .sec-title .sec-div {
    flex: 0 0 auto;
    width: 64px;
    height: 20px;
    object-fit: contain;
  }
  .about-hd-title {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
  }
  .about-hd-title .sec-div {
    flex: 0 0 auto;
    width: 64px;
    height: 20px;
    object-fit: contain;
  }

  /* ── Hero hex decorations: hide on SP (visual is hidden) ── */
  .hero-hex { display: none; }

  /* ── Pull quote ── */
  .pull-quote .qq-open,
  .pull-quote .qq-close { font-size: 38px; }
  .pull-quote .qq-open { top: 4px; left: 10px; }
  .pull-quote .qq-close { bottom: -4px; right: 10px; }

  /* ── Comparison: cmp-help-note & cmp-footer ── */
  .cmp-help-note { font-size: 13px; line-height: 1.7; padding: 0 4px; }
  .cmp-tax-note { font-size: 11px; }
  .cmp-footer-divider { gap: 8px; font-size: 12px; }
  .cmp-fdcenter { font-size: 12px; letter-spacing: 0.08em; }
  .cmp-btn { font-size: 13px; padding: 14px 18px; }

  /* ── Course v2: ccard title 改行禁止解除 ── */
  .ccard-v2-h4 { font-size: 14px; }

  /* ── Set Plans: SP - hide table, show accordion ── */
  .set-plans { padding: 48px var(--pad-x); }
  .set-plans .sec-title { font-size: 20px; }
  .set-plans .sec-sub { font-size: 12px; }
  .set-plans .sec-title .sec-div { max-width: 70px; }

  .set-table-wrap {
    display: none;
  }

  .set-acc-sp {
    display: block;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .set-acc {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    color: var(--text-dark);
  }
  .set-acc[open] {
    /* keeps card style consistent */
  }
  .set-acc-sum {
    list-style: none;
    padding: 18px 44px 14px;
    cursor: pointer;
    position: relative;
    display: block;
    text-align: center;
  }
  .set-acc-sum::-webkit-details-marker { display: none; }
  .set-acc-name {
    font-family: var(--f-serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--navy);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    line-height: 1.2;
  }
  .set-acc-price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .set-acc-np {
    font-family: var(--f-num);
    font-size: 24px;
    font-weight: 600;
    color: #c1272d;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .set-acc-op {
    font-size: 11px;
    color: var(--gray-300);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .set-acc-op s {
    text-decoration: line-through;
    color: var(--gray-300);
  }
  .set-acc-arr {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--navy);
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .set-acc-arr svg { width: 14px; height: 14px; }
  .set-acc[open] .set-acc-arr {
    transform: translateY(-50%) rotate(180deg);
  }

  .set-acc-body {
    padding: 0 22px 18px;
  }
  .set-acc-count {
    text-align: center;
    font-family: var(--f-sans);
    font-size: 14px;
    color: var(--navy);
    font-weight: 600;
    padding: 8px 0 14px;
    border-bottom: 1px solid rgba(15,29,68,.12);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
  }
  .set-acc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
  }
  .set-acc-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid rgba(15,29,68,.10);
    font-size: 13px;
    color: var(--navy);
    letter-spacing: 0.02em;
  }
  .set-acc-check {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .set-acc-check svg { width: 20px; height: 20px; display: block; }
  .set-acc-dash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--gray-400);
    font-size: 18px;
    line-height: 1;
  }
  .set-acc-target {
    padding: 8px 0 16px;
  }
  .set-acc-target-lbl {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
  }
  .set-acc-target-val {
    font-size: 12.5px;
    color: var(--text-dark);
    line-height: 1.5;
  }
  .set-acc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #c9a661;
    color: var(--white);
    font-family: var(--f-serif);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding: 14px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    transition: opacity 0.2s ease;
  }
  .set-acc-btn:hover { opacity: 0.9; }
  .set-acc-arrow { font-size: 18px; line-height: 1; }

  /* Featured card (OET完全対策) */
  .set-acc--feat {
    background: #f7eed8;
    border: 1.5px solid #c9a661;
  }
  .set-acc--feat .set-acc-name { color: var(--navy); }
  .set-recommend-tab { display: none; }

  /* hide table head, restructure rows as cards */
  .set-table,
  .set-table thead,
  .set-table tbody,
  .set-table tr,
  .set-table th,
  .set-table td {
    display: block;
    width: 100%;
    text-align: left;
    border: none !important;
    padding: 0;
    background: transparent;
  }
  .set-table thead { display: none; }
  .set-table tbody { display: grid; gap: 16px; }

  /* Each row becomes a single card column, but we need to flip orientation
     so plans group across the row. Use a different approach: keep table
     as scrollable wrapper. */
  .set-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
  .set-table thead { display: table-header-group; }
  .set-table tbody { display: table-row-group; }
  .set-table tr { display: table-row; }
  .set-table th, .set-table td {
    display: table-cell;
    border: 1px solid #e5e7ec !important;
    padding: 10px 6px !important;
    text-align: center;
  }
  .set-table thead th.st-col {
    font-size: 11px;
    padding: 12px 4px !important;
    line-height: 1.3;
    white-space: normal;
    word-break: keep-all;
    background: var(--gray-50);
  }
  .set-table .st-row-label {
    width: 88px !important;
    font-size: 10.5px;
    padding: 10px 6px !important;
    text-align: left;
    background: var(--gray-50);
    border-right: 1px solid #e5e7ec !important;
  }
  .set-table .st-rl-sub { font-size: 9px; display: block; margin-left: 0; }
  .set-table .st-np { font-size: 14px; }
  .set-table .st-op { font-size: 9px; margin-left: 0; display: block; }
  .set-table .st-count { font-size: 12px; }
  .set-table .st-check svg { width: 16px; height: 16px; }
  .set-table .st-target { font-size: 10.5px; padding: 8px 6px !important; line-height: 1.4; }
  .set-table .st-btn-row .st-btn-cell { padding: 10px 4px !important; }
  .set-table .st-btn {
    font-size: 11px;
    padding: 10px 6px;
    gap: 4px;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  .set-table .st-arr { font-size: 12px; }
  .set-bottom-cta { width: 100%; justify-content: center; padding: 14px 16px; font-size: 13px; }

  /* ── Features: 1列に変更 (2列だと最後孤立) ── */
  .features-frame {
    grid-template-columns: 1fr;
    padding: 16px 16px 12px;
  }
  .feat-item {
    padding: 18px 8px;
    border-bottom: 1px solid rgba(201,166,97,.25);
  }
  .feat-item:last-child { border-bottom: none; }
  .feat-item + .feat-item::before { display: none; }
  .feat-item:nth-child(odd)::before { display: none; }
  .feat-icon { width: 48px; height: 48px; margin: 0 auto 10px; }
  .feat-title { font-size: 14px; }
  .feat-desc { font-size: 12.5px; text-align: center; }

  /* ── Choose course label: gold accent on SP ── */
  .choose-course { font-size: 14px; font-weight: 600; }

  /* ── Concern card titles ── */
  .concern-card-hd h3 { font-size: 16px; }
  .concern-list li { font-size: 12.5px; }

  /* ── Writing single card (SP) ── */
  .writing-card {
    flex-direction: column;
    gap: 0;
    padding: 16px 18px 22px;
  }
  .writing-card-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .writing-card-title { font-size: 22px; }
  .writing-card-badges { flex-wrap: wrap; gap: 8px; }
  .writing-badge { font-size: 12px; padding: 6px 12px; }
  .writing-card-body { font-size: 13px; line-height: 1.7; }
  .writing-card-body br { display: none; }
  .writing-card-cols { grid-template-columns: 1fr; gap: 20px; }

  .writing-addon {
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }
  .writing-addon-tag { margin-right: 0; align-self: flex-start; }
  .writing-addon-divider { display: none; }
  .writing-addon-item { font-size: 13px; }

  .writing-features {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px 22px;
  }
  .writing-features-sep { display: none; }
  .writing-features-hd { padding-bottom: 10px; border-bottom: 1px solid rgba(201,166,97,0.45); }
  .writing-features-list li { font-size: 13px; }

  /* ── Instructors ── */
  .instructors { padding: 48px var(--pad-x); }
  .inst-head { margin-bottom: 36px; gap: 16px; }
  .inst-title { font-size: 22px; line-height: 1.45; }
  .inst-badge { font-size: 10px; padding: 6px 14px; letter-spacing: 0.24em; }
  .inst-divider { width: 44px; }
  .inst-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  .inst-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 16px;
    text-align: left;
  }
  .inst-photo {
    width: 88px;
    height: 88px;
    margin-bottom: 0;
  }
  .inst-body {
    min-width: 0;
  }
  .inst-name,
  .inst-specialty {
    text-align: left;
  }
  .inst-name { font-size: 18px; margin-bottom: 4px; }
  .inst-specialty { font-size: 10px; margin-bottom: 8px; }
  .inst-lead { font-size: 12px; margin-bottom: 10px; }
  .inst-points li { font-size: 12px; margin-bottom: 6px; }
  .inst-more summary { text-align: left; }
  .inst-foot { margin-top: 28px; }
  .inst-foot-cta { font-size: 13px; padding: 12px 22px; width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════
   RESPONSIVE — Small Mobile  ≤ 380px
   ════════════════════════════════════════════ */
@media (max-width: 380px) {
  :root { --pad-x: 12px; }
  .hero-h1 { font-size: 26px; }
  .sec-title { font-size: 16px; gap: 6px; }
  .sec-title .sec-div { width: 44px; height: 16px; }
  .about-hd-title { font-size: 17px; gap: 6px; }
  .about-hd-title .sec-div { width: 44px; height: 16px; }
  .faq-left .faq-left-title { font-size: 19px; gap: 6px; }
  .faq-left-title .sec-div { width: 44px; height: 16px; }
  .cmp-name { font-size: 18px; padding: 16px 14px 4px; }
  .cmp-cells > .cmp-cell:nth-child(5) .cmp-cval,
  .cmp-pval { font-size: 18px; }
  .ccard-v2-title { font-size: 19px; }
  .set-table th, .set-table td { padding: 8px 3px !important; }
  .set-table .st-row-label { width: 74px !important; font-size: 10px; }
  .set-table thead th.st-col { font-size: 10px; }
  .set-table .st-btn { font-size: 10px; padding: 8px 4px; }
}