@charset "UTF-8";
/* ==========================================================================
   Niseko Ryugaku — Custom theme prototype
   Designed as a single-page homepage system. Tokens at the top, then
   primitives, then sections. Mobile-first.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (updated to bolder, higher-contrast scheme) */
  --coral: #F25C28;
  --coral-deep: #D14617;
  --coral-soft: #FF9D7A;
  --teal: #B4E83C;
  --teal-deep: #7DBA1A;
  --teal-soft: #D8F087;
  --pink: #E94B7C;
  --pink-deep: #C73268;
  --pink-soft: #FFD9E4;
  --cream: #FFE8DF;
  --cream-deep: #F5D9CC;
  --ink: #0E0E0E;
  --ink-soft: #2A2A2A;
  --ink-muted: #6B6B6B;

  /* Surfaces */
  --bg: #FFFCFA;
  --bg-alt: var(--cream);
  --bg-dark: var(--ink);
  --border: rgba(14, 14, 14, 0.12);
  --border-strong: rgba(14, 14, 14, 0.22);

  /* Type */
  --font-jp: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-display-jp: "Noto Sans JP", system-ui, sans-serif;
  --font-en: "Bebas Neue", system-ui, sans-serif;
  --font-serif: "Noto Sans JP", system-ui, sans-serif;

  /* Scale (fluid) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --fs-2xl: clamp(2rem, 1.6rem + 2vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --fs-display: clamp(2.75rem, 2rem + 4vw, 5rem);

  /* Spacing (8pt) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(14, 14, 14, 0.06), 0 2px 8px rgba(14, 14, 14, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 14, 14, 0.08), 0 12px 32px rgba(14, 14, 14, 0.06);
  --shadow-lg: 0 8px 24px rgba(14, 14, 14, 0.10), 0 24px 64px rgba(14, 14, 14, 0.10);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 600ms;

  /* Layout */
  --container: 1240px;
  --container-narrow: 960px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 80px;
}

/* Shorter header on phones to reclaim vertical space. Because both the
   header min-height and the in-page anchor scroll-padding derive from
   --header-h, redefining it here adjusts both together. */
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  /* Finder heading: shrink just enough so "あなただけのプランを" stays on one line (2 lines total, not 3) */
  .finder .section-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* In-page anchor jumps (#programs, #schedule, #booking, jump-navs) land
     below the sticky 80px header instead of being hidden under it. */
  scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  line-height: 1.75; /* generous for JP */
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
  /* Replace the default grey iOS tap flash with a subtle on-brand tint. */
  -webkit-tap-highlight-color: rgba(14, 14, 14, 0.06);
}
/* ---------- Homepage: subtle cycling pink ↔ cream gradient ---------- */
/* Wraps the entire page in a whisper-pale pink/cream rhythm — paled
   ~70% toward white from the brand tokens so the cycle feels like
   ambient atmosphere rather than a coloured backdrop. Repeats every
   ~900px (≈ one viewport) for a calm, slow wave as the user scrolls. */
.page-home {
  background: repeating-linear-gradient(
    180deg,
    #FFEAF0 0px,    /* soft pink */
    #FFF1EB 450px,  /* soft cream */
    #FFEAF0 900px
  );
}
/* All sections on the homepage become transparent so the body gradient
   shows through end-to-end. The booking/contact section is the ONE
   exception — it keeps its dark ink background for visual contrast and
   to anchor the page's primary call-to-action. */
.page-home > section:not(#contact):not(.stats):not(.rebrand):not(.bilingual),
.page-home > section:not(#contact):not(.stats):not(.rebrand):not(.bilingual)::before,
.page-home > section:not(#contact):not(.stats):not(.rebrand):not(.bilingual)::after {
  background: transparent;
}
/* Hero (now the first section) paints a soft green → coral gradient via
   its .hero__bg child, using the pale "soft" brand tokens so its lightness
   matches the rest of the site. The bottom edge is a uniform coral-soft so
   it hands off seamlessly into the rebrand section's gradient directly
   below. Angle stays vertical (180deg) so that seam colour is constant
   across the full width. */
.page-home .hero__bg {
  background: linear-gradient(180deg, var(--teal-soft) 0%, var(--coral-soft) 100%);
}
/* Rebrand sits directly under the hero and continues the flow: it starts
   on the same coral-soft the hero ends on, then melts into soft pink —
   green → orange → pink as one continuous, light pastel run. The dark
   stats strip below provides the deliberate contrast break. */
.page-home .rebrand {
  background: linear-gradient(180deg, var(--coral-soft) 0%, var(--pink-soft) 100%);
  /* pull up so the group illustration fills the space before the stats strip */
  padding-bottom: 0;
}
/* Group illustration directly under the rebrand picks up its end colour so
   there's no visible seam between the two (it then meets the dark stats). */
.page-home .rebrand + .group-banner {
  background: var(--pink-soft);
}
/* ---------- "Why only SPEAKMORE" bilingual formula (soft green→orange band) ---------- */
/* Section stays transparent so the page's pink/cream body gradient shows
   through its top & bottom edges — identical to the why-speakmore and
   finder sections above/below, so there's no seam between the three. */
.bilingual {
  background: transparent;
  color: var(--ink);
  padding-block: clamp(56px, 9vw, 104px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* The green→orange band is an overlay that fades to transparent at both
   edges (using matching-RGB alpha stops to avoid a muddy fade), so it melts
   into the shared body gradient rather than butting against it. */
.bilingual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(230, 242, 192, 0) 0%,
    rgba(230, 242, 192, 1) 14%,
    rgba(252, 239, 224, 1) 50%,
    rgba(255, 206, 182, 1) 86%,
    rgba(255, 206, 182, 0) 100%);
  pointer-events: none;
}
.bilingual .container { position: relative; z-index: 1; }
.bilingual__title {
  font-family: var(--font-display-jp);
  font-size: clamp(1.55rem, 1.05rem + 2.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.bilingual__title em {
  font-style: normal;
  color: var(--coral-deep);
}
.bilingual__formula {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 14px);
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: 0;
  list-style: none;
}
@media (min-width: 880px) {
  .bilingual__formula { flex-direction: row; flex-wrap: wrap; }
}
.bilingual__pill {
  display: inline-flex;
  align-items: center;
  padding: 11px clamp(18px, 2.4vw, 30px);
  border: 1.5px solid var(--coral);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  color: var(--coral-deep);
  font-weight: 700;
  font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.05rem);
  white-space: nowrap;
}
.bilingual__op {
  color: var(--ink-muted);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
}
.bilingual__lede {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: var(--fs-md);
  line-height: 1.9;
}
/* The hero's decorative bottom curl (SVG) had a hardcoded cream fill
   that broke the gradient. Hide it on the homepage — the body cycle
   already provides the section-to-section continuity. */
.page-home .hero__divider {
  display: none;
}
/* Tighten the why-speakmore → finder join — both sections used to have
   their own coloured backgrounds and needed generous padding to feel
   separate. Now that they share the body gradient, the gap can collapse
   considerably without losing breathing room. */
.page-home .why-speakmore { padding-bottom: var(--sp-5); }
.page-home #programs      { padding-top:    var(--sp-5); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.3; letter-spacing: 0.005em; }

/* Latin runs inside JP text get a different family */
:lang(en) { font-family: var(--font-en); }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* Keep content clear of the rounded/notch edges in landscape on modern
     iPhones; falls back to the normal gutter when insets are 0. */
  padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* ---------- Eyebrow + section heads ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.eyebrow--on-dark { color: var(--coral-soft); }

.section-head {
  max-width: 720px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.section-head--two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  max-width: var(--container);
  text-align: left;
  align-items: end;
}
@media (min-width: 800px) {
  .section-head--two-col {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-7);
  }
}
.section-title {
  font-family: var(--font-display-jp);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: var(--sp-3) 0 var(--sp-4);
  color: var(--ink);
}
.section-title--on-dark { color: var(--cream); }
.section-lede {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  margin: 0;
}
.section-lede--on-dark { color: rgba(255, 232, 223, 0.85); }
.section-lede--on-dark strong { color: var(--coral-soft); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.95em 1.6em;
  border-radius: var(--r-pill);
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  border: 1.5px solid transparent;
}
.btn--sm { padding: 0.65em 1.2em; font-size: var(--fs-xs); }
.btn--lg { padding: 1.1em 2em; font-size: var(--fs-base); }

.btn--primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 6px 16px rgba(242, 92, 40, 0.35);
}
.btn--primary:hover {
  background: var(--coral-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(242, 92, 40, 0.45);
}

/* ---------- Pulsing CTA: attention-grabber on the header counseling button ---------- */
.site-header__actions .btn--primary {
  position: relative;
  isolation: isolate;
}
.site-header__actions .btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  box-shadow: 0 0 0 0 rgba(242, 92, 40, 0.6);
  animation: cta-pulse-ring 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes cta-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 92, 40, 0.55);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(242, 92, 40, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 92, 40, 0);
  }
}
.site-header__actions .btn--primary:hover::before {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .site-header__actions .btn--primary::before {
    animation: none;
  }
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.btn--outline-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(255, 232, 223, 0.4);
}
.btn--outline-light:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--ink);
  color: var(--cream);
  font-size: var(--fs-xs);
  /* Fill the status-bar / Dynamic Island area with the dark bar colour
     (edge-to-edge with viewport-fit=cover; 0 when no inset is present). */
  padding-top: env(safe-area-inset-top);
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  flex-wrap: wrap;
}
.announce__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(242, 92, 40, 0.25);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(242, 92, 40, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(242, 92, 40, 0.05); }
}
.announce__link {
  color: var(--coral-soft);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 157, 122, 0.4);
}
.announce__link:hover { color: var(--coral); border-bottom-color: var(--coral); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 252, 250, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: padding var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
/* SPEAKMORE wordmark logo — image-based black wordmark */
.brand__logo {
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.brand__logo-img {
  display: block;
  height: 30px;
  width: auto;
}
/* On the black footer the wordmark is black-on-black — invert it to white. */
.brand--light .brand__logo-img {
  filter: brightness(0) invert(1);
}
@media (min-width: 640px) {
  .brand__logo-img { height: 44px; }
}

.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-nav ul {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
  }
  .site-nav a {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
    padding: 0.4em 0;
    position: relative;
    transition: color var(--t-fast) var(--ease);
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease);
  }
  .site-nav a:hover { color: var(--coral-deep); }
  .site-nav a:hover::after { transform: scaleX(1); }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.lang-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.5em 0.9em;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (min-width: 640px) { .lang-toggle { display: inline-flex; } }
.lang-toggle:hover { border-color: var(--ink); color: var(--ink); }
.lang-toggle__current { color: var(--ink); }
.lang-toggle__divider { color: var(--border-strong); }
.lang-toggle__alt { color: var(--ink-muted); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 44px; height: 44px;
  padding: 11px;
  border-radius: var(--r-sm);
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-6);
  min-height: clamp(560px, 78vh, 820px);
  display: flex;
  align-items: center;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--coral-soft) 0%, var(--teal-soft) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__copy { max-width: none; }

.hero__photo {
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}
.hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (min-width: 720px) {
  .hero__photo img { aspect-ratio: 21 / 9; }
}
.hero__title {
  font-family: var(--font-display-jp);
  font-size: clamp(1.75rem, 1.3rem + 2.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: var(--sp-4) 0 var(--sp-5);
  color: var(--ink);
}
.hero__title em {
  font-style: normal;
  position: relative;
  display: inline-block;
  color: var(--coral-deep);
}
.hero__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 8px;
  background: var(--coral);
  opacity: 0.22;
  border-radius: 4px;
  z-index: -1;
}
.hero__lede {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  margin: 0 0 var(--sp-6);
  max-width: 520px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) clamp(var(--sp-3), 3vw, var(--sp-5));
  margin-bottom: var(--sp-7);
}
/* Phones: keep both CTAs on a single row (pill sits beside the primary) */
@media (max-width: 640px) {
  .hero__cta { flex-wrap: nowrap; column-gap: 8px; }
  .hero__cta .btn { font-size: 0.78rem; padding-inline: 1.1em; }
  .hero__cta .btn svg { width: 14px; height: 14px; }
}
/* Laurel-wreath credibility badges — two side by side above the CTAs */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 2vw, 20px);
  margin-bottom: var(--sp-5);
}
.hero__stat {
  flex: 0 0 auto;
  display: flex;
  text-align: center;
}
.hero__stat-wreath {
  width: clamp(150px, 42vw, 182px);
  aspect-ratio: 352 / 256;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 clamp(16px, 5vw, 26px);
  background: url("../img/laurel.svg?v=3") center / contain no-repeat;
}
.hero__stat-num {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(1.45rem, 6vw, 2rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: flex-start;
}
.hero__stat-plus {
  font-size: 0.55em;
  color: var(--ink);
  margin-left: 1px;
}
.hero__stat-unit {
  font-size: 0.5em;
  color: var(--ink-muted);
  margin-left: 1px;
  align-self: flex-end;
  padding-bottom: 0.18em;
}
.hero__stat-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hero__meta {
  display: flex;
  align-items: stretch;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  max-width: 480px;
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.hero__meta-num {
  font-family: var(--font-display-jp);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.hero__meta-num sup {
  font-size: 0.5em;
  color: var(--coral-deep);
  vertical-align: super;
}
.hero__meta-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.4;
}
.hero__meta-label small { color: var(--ink-muted); font-size: 0.85em; }
.hero__meta-divider {
  width: 1px;
  background: var(--border);
}

.hero__divider {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 60px;
  z-index: 1;
}

/* ---------- Rebrand announcement (compact card with matted frame) ---------- */
.rebrand {
  background: var(--bg);
  padding-block: var(--sp-5) var(--sp-7);
}
.rebrand__frame {
  background: var(--cream-deep);
  border-radius: calc(var(--r-xl) + 6px);
  padding: clamp(10px, 1.4vw, 16px);
}
.rebrand__card {
  background: var(--cream);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.rebrand__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-6);
}
.rebrand__tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--coral);
  padding: 4px 12px;
  border: 1px solid var(--coral);
  border-radius: 999px;
  margin-bottom: var(--sp-4);
}
.rebrand__transition {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.rebrand__old {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.rebrand__old-img {
  height: 64px;
  width: auto;
  display: block;
}
@media (min-width: 640px) {
  .rebrand__old-img { height: 80px; }
}
.rebrand__arrow {
  width: 32px; height: 16px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.rebrand__new {
  display: inline-flex;
  align-items: center;
}
.rebrand__new-img {
  height: 24px;
  width: auto;
  display: block;
}
@media (min-width: 640px) {
  .rebrand__new-img { height: 30px; }
}
.rebrand__title {
  font-family: var(--font-display-jp);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
}

.rebrand__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 720px) {
  .rebrand__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.rebrand__col {
  background: #fff;
  border-radius: var(--r-md);
  padding: var(--sp-5);
  border: 1px solid rgba(14, 14, 14, 0.06);
}
.rebrand__col--accent {
  background: var(--ink);
  border-color: var(--ink);
}
.rebrand__col-tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
  padding: 3px 9px;
  border: 1px solid var(--coral);
  border-radius: 999px;
  margin-bottom: var(--sp-3);
}
.rebrand__col p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0;
}
/* Accent variant overrides — must come after .rebrand__col p / .rebrand__col-tag to win the cascade */
.rebrand__col--accent .rebrand__col-tag { color: var(--teal); border-color: var(--teal); }
.rebrand__col--accent p { color: #FFFFFF; }

/* ----- Rebrand suite (SPEAKMORE = Niseko + Nozawa + Tokyo) ----- */
.rebrand__nots {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.rebrand__nots li {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  background: rgba(14, 14, 14, 0.05);
  border-radius: 999px;
  padding: 6px 14px;
  line-height: 1.3;
}
.rebrand__eyebrow {
  font-family: var(--font-jp);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 0.02em;
  margin: 0 0 var(--sp-3);
}
.rebrand__suite {
  max-width: 760px;
  margin: var(--sp-7) auto var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rebrand__suite-brand img {
  height: clamp(40px, 6vw, 64px);
  width: auto;
  display: block;
}
.rebrand__suite-label {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  text-align: center;
  margin: 0 0 var(--sp-5);
  padding-top: var(--sp-4);
}
/* Phones: shrink a touch so the academy label stays on one line */
@media (max-width: 640px) {
  .rebrand__suite-label { font-size: clamp(0.72rem, 3.3vw, var(--fs-sm)); white-space: nowrap; }
}
.rebrand__suite-list {
  list-style: none;
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 22px);
  background: #fff;
  border: 1px solid rgba(14, 14, 14, 0.06);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3.5vw, 40px) clamp(14px, 3vw, 32px);
  box-shadow: 0 1px 0 rgba(14, 14, 14, 0.04), 0 18px 36px -26px rgba(14, 14, 14, 0.16);
}
.rebrand__suite-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: clamp(8px, 1.5vw, 16px) 4px;
}
.rebrand__suite-crest img {
  /* Keep the crest's natural proportions on every device. width/height auto
     with max constraints means the browser always scales it to fit the cell
     (width-bound on phones) or the cap (height-bound on desktop) WITHOUT ever
     stretching — fixes the 66x150 squish in the 3-up grid on mobile. */
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(130px, 22vw, 220px);
}
.rebrand__foot {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.85;
  margin: var(--sp-5) auto 0;
  max-width: 640px;
}

/* ---------- Stats ---------- */
/* ---------- Stats / credibility band (combined, dark) ---------- */
.stats {
  background: #14152E;
  color: #fff;
  padding-block: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(180, 232, 60, 0.12), transparent 55%);
  pointer-events: none;
}
.stats .container { position: relative; z-index: 1; }
.stats__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-bottom: 0;
}
.stats__bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-top: var(--sp-6);
}
@media (min-width: 720px) {
  .stats__top { grid-template-columns: repeat(3, 1fr); }
  .stats__bottom { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }
  .stats__top .stats__cell:not(:first-child)::before,
  .stats__bottom .stats__cell:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
  }
}
.stats__cell {
  position: relative;
  text-align: center;
}
.stats__num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-1);
  font-family: var(--font-display-jp);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin-bottom: var(--sp-3);
}
.stats__top .stats__num,
.stats__bottom .stats__num { font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.4rem); }
.stats__unit {
  font-size: 0.42em;
  color: var(--coral);
  font-weight: 700;
}
.stats__label {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-2);
}
.stats__note {
  margin: 0 auto;
  max-width: 340px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}

/* ---------- Program Finder (2-gate wizard) ---------- */
.finder {
  padding-block: var(--sp-10);
  background: var(--bg);
  position: relative;
}
/* Homepage: finder flows straight into the LINE CTA — trim the bottom dead space */
.page-home .finder { padding-bottom: var(--sp-6); }
/* Pink-gradient variant — used on the Courses page so the finder visually
   matches the activity-icon section on the Why page. */
.finder--pink {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--cream) 100%);
  /* the course-suite above fades into this same pink-soft, so trim the top gap */
  padding-top: var(--sp-5);
}

/* SPEAKMORE suite logos strip (Courses page) — bridges the hero into the finder */
.course-suite {
  /* fade cream (matching the hero above) into pink-soft (matching the finder
     below) so the two sections blend with no visible seam */
  background: linear-gradient(180deg, var(--cream) 0%, var(--pink-soft) 100%);
  padding-block: var(--sp-2) var(--sp-5);
}
.course-suite__label {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin: 0 0 var(--sp-5);
}
.course-suite .rebrand__suite-list {
  max-width: 760px;
  margin-inline: auto;
}

/* When the finder hosts a bottom group-banner, give it room and clip overflow.
   Padding-bottom must be tall enough for the illustration so it doesn't
   overlap the finder cards above. */
.finder:has(.group-banner--bottom) {
  /* just tall enough for the illustration (~38vw) plus a small gap, so there's
     no dead space between the finder cards and the figures */
  padding-bottom: clamp(150px, 42vw, 540px);
  overflow: hidden;
}

/* Group illustration positioned absolutely at the bottom of its parent section */
.group-banner--bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.group-banner--bottom img {
  margin-bottom: 0;
}

/* .finder__frame — matted outer wrapper removed; div is now visually inert.
   Markup left in place on homepage + courses page so the wrapper can be re-enabled
   later by adding background/padding/border-radius back here. */
.finder__frame {
  background: transparent;
  padding: 0;
}
.finder__shell {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* Top gradient accent strip on .finder__shell::before removed per design. */
@media (min-width: 720px) {
  .finder__shell { padding: var(--sp-8) var(--sp-9); }
}

/* Progress breadcrumb */
.finder__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-7);
  padding: 0 0 var(--sp-6);
  border-bottom: 1px dashed var(--border);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  list-style: none;
}
@media (min-width: 640px) {
  .finder__progress {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}
/* All progress pills share one look (dark pill, coral numbered circle),
   in every state, with the step numbers always shown. */
.finder__progress li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4em 0.9em 0.4em 0.4em;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  font-weight: 500;
}
.finder__progress li span {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  border: 1px solid var(--coral);
  font-family: var(--font-en);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* Steps */
.finder__step { display: none; }
.finder__step.is-active {
  display: block;
  animation: finderIn 420ms var(--ease);
}
@keyframes finderIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.finder__back {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: var(--sp-3);
  padding: 0.4em 0.8em;
  border-radius: var(--r-pill);
  background: var(--cream);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.finder__back:hover { background: var(--ink); color: var(--cream); }

.finder__q {
  font-family: var(--font-display-jp);
  font-size: var(--fs-xl);
  text-align: center;
  margin: 0 0 var(--sp-6);
  color: var(--ink);
}

/* Choice cards (used in steps 1 & 2) */
.finder__choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.finder__choices--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .finder__choices--3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.finder__choices--4 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .finder__choices--4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (min-width: 1080px) {
  .finder__choices--4 { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .finder__choices--4 .choice { padding: var(--sp-5); }
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
  background: #fff;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--c-fade-1, transparent) 0%, transparent 90%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  z-index: -1;
}
.choice:hover,
.choice:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent, var(--ink));
  background: var(--c-tint, #fff);
}
.choice:hover::before,
.choice:focus-within::before { opacity: 1; }
.choice:focus-visible {
  outline: 3px solid var(--c-accent, var(--coral));
  outline-offset: 3px;
}

.choice__icon {
  display: none;
}
.choice__icon svg { width: 32px; height: 32px; }
.choice__label { display: flex; flex-direction: column; gap: 2px; }
.choice__title {
  font-family: var(--font-display-jp);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.choice__en {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.choice__desc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}
/* Checklist variant — green circle-check icons (matches the counseling perks list) */
.choice__desc--checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  line-height: 1.45;
}
.choice__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.choice__check svg {
  color: var(--teal-deep);
  flex-shrink: 0;
  margin-top: 0.18em;
}
.choice__cta {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent, var(--coral-deep));
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.choice__cta em {
  font-style: normal;
  transition: transform var(--t-fast) var(--ease);
}
.choice:hover .choice__cta em { transform: translateX(4px); }
/* LINE contact variant — corporate choice opens 公式LINE instead of advancing */
.choice__cta--line {
  align-self: flex-start;
  padding: 10px 18px;
  background: #06C755;
  color: #fff;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.choice__cta--line:hover { background: #05A847; }

/* Corporate card is informational — only its LINE pill is interactive. */
.choice--corporate { cursor: default; }
.choice--corporate:hover,
.choice--corporate:focus-within {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
  background: #fff;
}
.choice--corporate:hover::before,
.choice--corporate:focus-within::before { opacity: 0; }

/* Choice color variants */
.choice--intensive { --c-accent: var(--coral); --c-tint: rgba(242, 92, 40, 0.12); --c-fade-1: rgba(242, 92, 40, 0.18); }
.choice--casual    { --c-accent: var(--teal-deep); --c-tint: rgba(180, 232, 60, 0.14); --c-fade-1: rgba(180, 232, 60, 0.2); }
.choice--corporate { --c-accent: var(--coral-deep); --c-tint: rgba(209, 70, 23, 0.14); --c-fade-1: rgba(209, 70, 23, 0.2); }
.choice--any       { --c-accent: var(--ink); --c-tint: var(--cream); --c-fade-1: rgba(255, 232, 223, 0.6); }
.choice--spring    { --c-accent: var(--coral-deep); --c-tint: rgba(255, 157, 122, 0.25); --c-fade-1: rgba(255, 157, 122, 0.3); }
.choice--summer    { --c-accent: var(--coral); --c-tint: rgba(242, 92, 40, 0.14); --c-fade-1: rgba(255, 200, 100, 0.25); }
.choice--winter    { --c-accent: var(--teal-deep); --c-tint: rgba(14, 14, 14, 0.1); --c-fade-1: rgba(180, 232, 60, 0.2); }
.choice--anytime   { --c-accent: var(--ink); --c-tint: var(--cream); --c-fade-1: rgba(255, 232, 223, 0.6); }

/* Step 3 results */
.finder__results-head {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.finder__q--results { margin-bottom: var(--sp-3); }
.finder__summary {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin: 0;
}
.finder__summary strong { color: var(--ink); font-weight: 700; }
.finder__count {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  padding: 0.1em 0.7em;
  border-radius: var(--r-pill);
  margin-left: var(--sp-2);
  font-family: var(--font-en) !important;
}

.finder__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .finder__results { grid-template-columns: repeat(2, 1fr); }
}

.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: #fff;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  isolation: isolate;
  cursor: pointer;
}
.result-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; bottom: 0;
  background: var(--c-accent, var(--coral));
  border-radius: var(--r-md) 0 0 var(--r-md);
  opacity: 0.85;
}
.result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--c-accent, var(--coral));
}
.result-card--coral { --c-accent: var(--coral); }
.result-card--teal  { --c-accent: var(--teal-deep); }
.result-card--ink   { --c-accent: var(--ink); }

.result-card__badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: var(--coral);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25em 0.7em;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.result-card__head {
  display: flex;
  justify-content: flex-start;
  padding-left: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.result-card__location {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.result-card__location--logo { gap: 0; }
.result-card__location-logo {
  height: 84px;
  width: auto;
  display: block;
}
.result-card__location-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-accent, var(--coral));
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(14, 14, 14, 0.12);
}
.result-card__location-icon svg { width: 16px; height: 16px; }
.result-card__location-text {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent, var(--coral-deep));
}
.result-card__title {
  font-family: var(--font-display-jp);
  font-size: var(--fs-md);
  color: var(--ink);
  margin: 0;
  padding-left: var(--sp-2);
  line-height: 1.4;
}
.result-card__en {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin: 0 0 var(--sp-2);
  padding-left: var(--sp-2);
  letter-spacing: 0.04em;
}

/* Feature chips (format, intensity, native teachers) */
.result-card__feats {
  list-style: none;
  padding: 0 0 0 var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.feat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  background: var(--cream);
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.feat__icon {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--c-accent, var(--coral-deep));
  flex-shrink: 0;
}
.feat__icon svg { width: 13px; height: 13px; }
.feat--intensity-intensive .feat__icon { color: var(--coral); }
.feat--intensity-casual    .feat__icon { color: var(--teal-deep); }
.feat--intensity-corporate .feat__icon { color: var(--coral-deep); }
.feat--native .feat__icon  { color: var(--ink); }

.result-card__foot {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
  padding-left: var(--sp-2);
}
.result-card__link {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent, var(--coral-deep));
  transition: transform var(--t-fast) var(--ease);
}
.result-card:hover .result-card__link,
.result-card__link:hover { transform: translateX(3px); }

.finder__none {
  text-align: center;
  padding: var(--sp-7);
  color: var(--ink-muted);
  font-size: var(--fs-md);
  grid-column: 1 / -1;
}
.finder__none button {
  margin-left: var(--sp-2);
  color: var(--coral-deep);
  font-weight: 700;
  text-decoration: underline;
}

.finder__results-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
@media (min-width: 640px) {
  .finder__results-foot { flex-direction: row; justify-content: space-between; }
}
.finder__restart {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0.5em 1em;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: #fff;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.finder__restart:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.finder__cta-link {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--coral-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.finder__cta-link:hover { color: var(--coral); }

/* ---------- Why Niseko (dark section) ---------- */
.why {
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--sp-10);
  position: relative;
  overflow: hidden;
}
.why::before {
  content: "";
  position: absolute;
  bottom: -50%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(180, 232, 60, 0.18), transparent 60%);
  pointer-events: none;
}
.why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  position: relative;
}
@media (min-width: 800px) {
  .why__grid { grid-template-columns: repeat(4, 1fr); }
}

.why-card {
  background: rgba(255, 232, 223, 0.04);
  border: 1px solid rgba(255, 232, 223, 0.1);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.why-card:hover {
  background: rgba(255, 232, 223, 0.07);
  border-color: var(--coral);
  transform: translateY(-3px);
}
.why-card__icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(180, 232, 60, 0.12);
  color: var(--teal);
  margin-bottom: var(--sp-4);
}
.why-card__icon svg { width: 32px; height: 32px; }
.why-card h3 {
  font-family: var(--font-display-jp);
  font-size: var(--fs-lg);
  color: var(--cream);
  margin-bottom: var(--sp-2);
}
.why-card p {
  font-size: var(--fs-sm);
  color: rgba(255, 232, 223, 0.7);
  margin: 0;
  line-height: 1.7;
}

/* Warm variant — Nozawaonsen (coral background) */
.why--warm {
  background: var(--coral);
  color: var(--cream);
}
.why--warm::before {
  background: radial-gradient(circle, rgba(180, 232, 60, 0.28), transparent 60%);
}
.why--warm::after {
  content: "";
  position: absolute;
  top: -30%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(14, 14, 14, 0.18), transparent 60%);
  pointer-events: none;
}
.why--warm .why-card {
  background: rgba(255, 232, 223, 0.10);
  border-color: rgba(255, 232, 223, 0.22);
}
.why--warm .why-card:hover {
  background: rgba(255, 232, 223, 0.16);
  border-color: var(--teal);
}
.why--warm .why-card__icon {
  background: rgba(14, 14, 14, 0.22);
  color: var(--cream);
}
.why--warm .why-card h3 { color: var(--cream); }
.why--warm .why-card p { color: rgba(255, 232, 223, 0.85); }

/* Light variant — Tokyo (cream background) */
.why--light {
  background: var(--cream);
  color: var(--ink);
}
.why--light::before {
  background: radial-gradient(circle, rgba(242, 92, 40, 0.22), transparent 60%);
}
.why--light .why-card {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(14, 14, 14, 0.08);
}
.why--light .why-card:hover {
  background: #fff;
  border-color: var(--coral);
}
.why--light .why-card__icon {
  background: var(--coral);
  color: #fff;
}
.why--light .why-card h3 { color: var(--ink); }
.why--light .why-card p { color: var(--ink-muted); }

/* ---------- Week schedule ---------- */
.week {
  padding-block: var(--sp-7) var(--sp-6);
  background: var(--bg);
}
.week__schedule {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  display: flex;
  gap: var(--sp-3);
  -webkit-overflow-scrolling: touch;
}
.week__times {
  display: grid;
  grid-template-rows: repeat(9, 1fr);
  gap: var(--sp-2);
  padding-top: 44px;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.week__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}
.week__day {
  display: grid;
  grid-template-rows: 36px repeat(9, 1fr);
  gap: var(--sp-2);
}
.week__day-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display-jp);
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-md);
}
.week__day-label span {
  padding: 2px 11px;
  border-radius: var(--r-pill);
  line-height: 1.45;
}
.week__day--featured .week__day-label { color: var(--coral-deep); }
.week__day--featured .week__day-label span { background: var(--coral); color: #fff; }

.week__block {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.week__block small {
  display: block;
  font-size: 0.7em;
  font-family: var(--font-en);
  opacity: 0.7;
  font-weight: 400;
  margin-top: 2px;
}
.week__block--class { background: rgba(242, 92, 40, 0.12); color: var(--coral-deep); border: 1px solid rgba(242, 92, 40, 0.2); }
.week__block--activity { background: rgba(180, 232, 60, 0.12); color: var(--teal-deep); border: 1px solid rgba(180, 232, 60, 0.25); }
.week__block--social { background: rgba(14, 14, 14, 0.08); color: var(--ink); border: 1px solid var(--border); }
.week__block--meal { background: var(--cream); color: var(--ink-soft); border: 1px solid var(--cream-deep); font-style: italic; }
.week__block--off { background: transparent; color: var(--ink-muted); border: 1px dashed var(--border-strong); }
.week__block--span { grid-row: span 7; }
.week__block--afternoon {
  grid-row: span 3;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 4px;
  line-height: 1.3;
  font-size: 0.66rem;
}

.week__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.week__legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.legend-dot--class { background: rgba(242, 92, 40, 0.3); border: 1px solid var(--coral); }
.legend-dot--activity { background: rgba(180, 232, 60, 0.3); border: 1px solid var(--teal); }
.legend-dot--social { background: rgba(14, 14, 14, 0.15); border: 1px solid var(--ink-soft); }
.legend-dot--meal { background: var(--cream); border: 1px solid var(--cream-deep); }
.legend-dot--off { background: transparent; border: 1px dashed var(--border-strong); }
/* Keep all 5 legend items on a single line on phones */
@media (max-width: 640px) {
  .week__legend {
    flex-wrap: nowrap;
    gap: clamp(7px, 2.2vw, 14px);
    font-size: clamp(0.62rem, 2.7vw, 0.75rem);
  }
  .week__legend span { gap: 4px; white-space: nowrap; flex: 0 0 auto; }
  .week__legend .legend-dot { width: 10px; height: 10px; flex-shrink: 0; }
}

/* ---------- Life in Niseko (icon points) ---------- */
.life {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--cream) 100%);
  padding-block: var(--sp-6);
}
.life-points {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .life-points { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (min-width: 900px) {
  .life-points {
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--sp-3);
    row-gap: var(--sp-3);
    align-items: start;
  }
  /* Top row: 3 across — softened translateY for compactness */
  .life-point:nth-child(1) { grid-column: 1 / span 2; transform: translateY(14px); }
  .life-point:nth-child(2) { grid-column: 3 / span 2; transform: translateY(-6px); }
  .life-point:nth-child(3) { grid-column: 5 / span 2; transform: translateY(20px); }
  /* Bottom row: 2 centered between top items */
  .life-point:nth-child(4) { grid-column: 2 / span 2; transform: translateY(0); }
  .life-point:nth-child(5) { grid-column: 4 / span 2; transform: translateY(-11px); }
}

.life-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--sp-3);
}
.life-point__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-3);
  box-shadow: 0 6px 20px rgba(14, 14, 14, 0.06);
  transition: transform var(--t-med) var(--ease);
}
.life-point:hover .life-point__icon {
  transform: rotate(0deg) scale(1.05) !important;
}
.life-point__icon svg {
  width: 36px;
  height: 36px;
}
@media (min-width: 900px) {
  /* Playful size + rotation variation on the icon discs (compact set) */
  .life-point:nth-child(1) .life-point__icon { width: 84px; height: 84px; transform: rotate(-7deg); }
  .life-point:nth-child(2) .life-point__icon { width: 72px; height: 72px; transform: rotate(5deg); }
  .life-point:nth-child(3) .life-point__icon { width: 88px; height: 88px; transform: rotate(-4deg); }
  .life-point:nth-child(4) .life-point__icon { width: 78px; height: 78px; transform: rotate(8deg); }
  .life-point:nth-child(5) .life-point__icon { width: 82px; height: 82px; transform: rotate(-6deg); }
  .life-point:nth-child(1) .life-point__icon svg { width: 40px; height: 40px; }
  .life-point:nth-child(3) .life-point__icon svg { width: 42px; height: 42px; }
  .life-point:nth-child(5) .life-point__icon svg { width: 38px; height: 38px; }
}
.life-point__icon--coral { color: var(--coral); }
.life-point__icon--coral-deep { color: var(--coral-deep); }
.life-point__icon--teal { color: var(--teal-deep); }
.life-point__icon--lime { color: var(--teal-deep); }
.life-point__icon--ink { color: var(--ink); }

.life-point__title {
  font-family: var(--font-display-jp);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}
.life-point__text {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 260px;
}

/* ---------- Voices / Testimonials ---------- */
.voices {
  padding-block: var(--sp-10) var(--sp-6);
  background: var(--bg);
  overflow: hidden;
}
/* Tighten gap between heading and carousel (nav buttons removed) */
.voices .section-head { margin-bottom: var(--sp-3); }
.voices__nav {
  display: flex;
  gap: var(--sp-2);
  justify-self: end;
  align-self: end;
}
.voices__nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.voices__nav button:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.voices__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(85%, 360px);
  gap: var(--sp-5);
  margin-top: var(--sp-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--sp-3) 4px var(--sp-5);
  scrollbar-width: none;
}
.voices__track::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
  .voices__track { grid-auto-columns: minmax(340px, 380px); }
}

.voice {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: relative;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  display: flex;
  flex-direction: column;
}
.voice:hover {
  border-color: var(--coral);
  transform: translateY(-3px);
}
.voice__stamp {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 56px; height: 56px;
  color: var(--coral);
  transform: rotate(-8deg);
  opacity: 0.85;
}
.voice blockquote {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display-jp);
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--ink);
  position: relative;
  padding-right: var(--sp-7);
  flex-grow: 1;
}
.voice footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  gap: var(--sp-3);
}
.voice__who { display: flex; flex-direction: column; }
.voice__who strong {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}
.voice__who span { font-size: var(--fs-xs); color: var(--ink-muted); }
.voice__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--fs-xs);
  color: var(--teal-deep);
  font-weight: 600;
  text-align: right;
  line-height: 1.5;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--sp-9);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -20%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(242, 92, 40, 0.25), transparent 65%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); }
}
.cta-band__copy h2 {
  font-family: var(--font-display-jp);
  font-size: var(--fs-3xl);
  color: var(--cream);
  margin: var(--sp-3) 0 var(--sp-4);
  line-height: 1.25;
}
.cta-band__copy p {
  font-size: var(--fs-md);
  color: rgba(255, 232, 223, 0.8);
  margin: 0;
  line-height: 1.8;
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}
.cta-band__actions .btn { width: 100%; max-width: 360px; }
.cta-band__note {
  font-size: var(--fs-xs);
  color: rgba(255, 232, 223, 0.6);
  margin: var(--sp-3) 0 0;
}
.cta-band__note a {
  color: var(--coral-soft);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* ---------- Booking (Calendly) ---------- */
.booking {
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--sp-9);
  position: relative;
  overflow: hidden;
}
.booking::before {
  content: "";
  position: absolute;
  top: -20%; left: -10%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(242, 92, 40, 0.22), transparent 65%);
  pointer-events: none;
}
.booking::after {
  content: "";
  position: absolute;
  bottom: -30%; right: -15%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(180, 232, 60, 0.18), transparent 65%);
  pointer-events: none;
}
.booking__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 980px) {
  .booking__layout {
    grid-template-columns: 1fr 1.25fr;
    gap: var(--sp-8);
  }
}

/* Left intro column */
.booking__intro { padding-top: var(--sp-3); }
.booking__intro .section-title { margin-block: var(--sp-3) var(--sp-5); }
.booking__lede {
  font-size: var(--fs-md);
  color: rgba(255, 232, 223, 0.8);
  margin: 0 0 var(--sp-6);
  line-height: 1.85;
}
.booking__perks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.booking__perks li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--cream);
}
.booking__perks svg { color: var(--teal); flex-shrink: 0; }

.booking__alt {
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 232, 223, 0.12);
  font-size: var(--fs-sm);
  color: rgba(255, 232, 223, 0.7);
}
.booking__alt p { margin: 0 0 var(--sp-2); }
.booking__alt-head {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-soft);
  margin-bottom: var(--sp-3) !important;
}
.booking__alt a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--cream);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 232, 223, 0.25);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.booking__alt a:hover { color: var(--coral); border-color: var(--coral); }
.booking__brochure {
  margin-top: var(--sp-2);
  color: var(--coral-soft) !important;
  border-color: transparent !important;
}
.booking__brochure:hover { color: var(--coral) !important; }

/* Booking card */
.booking__card {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}

.booking__card-head {
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-bottom: 1px dashed var(--border);
}
.booking__card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.booking__card-pill {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.35em 0.85em;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.booking__card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-deep);
}
.booking__card-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(180, 232, 60, 0.2);
  animation: pulse-teal 2s var(--ease) infinite;
}
@keyframes pulse-teal {
  0%, 100% { box-shadow: 0 0 0 3px rgba(180, 232, 60, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(180, 232, 60, 0.05); }
}
.booking__card-title {
  font-family: var(--font-display-jp);
  font-size: var(--fs-xl);
  margin: var(--sp-2) 0 var(--sp-3);
  color: var(--ink);
}
.booking__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
}
.booking__card-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.booking__card-meta svg { color: var(--teal-deep); }
.booking__card-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.7;
}

/* Calendar */
.booking__calendar {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}
.booking__calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.booking__month {
  font-family: var(--font-display-jp);
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: 700;
}
.booking__tz {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}
.booking__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--cream);
  border-radius: var(--r-pill);
  padding: 4px;
}
.booking__nav button {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.booking__nav-today {
  width: auto !important;
  padding-inline: var(--sp-3) !important;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.booking__nav button:hover { background: var(--ink); color: var(--cream); }

.booking__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.booking__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-block: var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.booking__day:hover:not(.booking__day--closed):not(.booking__day--selected) {
  background: var(--cream);
}
.booking__day-num {
  font-family: var(--font-display-jp);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
}
.booking__day-name {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  font-weight: 500;
}
.booking__day--selected .booking__day-num {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 4px 12px rgba(242, 92, 40, 0.4);
}
.booking__day--selected .booking__day-name { color: var(--coral-deep); font-weight: 700; }
.booking__day--closed { cursor: not-allowed; opacity: 0.4; }
.booking__day--closed .booking__day-num { color: var(--ink-muted); }

.booking__slots {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.slot {
  padding-block: var(--sp-3);
  border-radius: var(--r-md);
  font-family: var(--font-display-jp);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--coral-deep);
  background: #fff;
  border: 1.5px solid rgba(242, 92, 40, 0.4);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.slot:hover {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  transform: translateY(-1px);
}
.slot--disabled,
.slot:disabled {
  background: var(--cream);
  color: var(--ink-muted);
  border-color: transparent;
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.slot--disabled:hover,
.slot:disabled:hover { background: var(--cream); color: var(--ink-muted); transform: none; }

.booking__legend {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.booking__legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend-dot--avail {
  background: #fff;
  border: 1.5px solid var(--coral);
}
.legend-dot--taken {
  background: var(--cream);
  border: 1.5px solid var(--cream-deep);
}

.booking__card-foot {
  padding: var(--sp-3) var(--sp-6);
  background: var(--cream);
  border-top: 1px solid var(--border);
}
.booking__card-foot p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  text-align: center;
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}

/* Calendar mobile: keep grid but compact */
@media (max-width: 540px) {
  .booking__calendar { padding: var(--sp-4); }
  .booking__card-head { padding: var(--sp-5); }
  .booking__day-num { width: 32px; height: 32px; font-size: var(--fs-md); }
  .slot { padding-block: var(--sp-2); font-size: var(--fs-xs); }
  .booking__days, .booking__slots { gap: 4px; }
}

/* ---------- Resources ---------- */
.resources {
  padding-block: var(--sp-6) var(--sp-7);
  background: var(--bg);
  position: relative;
}

.resources__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (min-width: 720px) {
  .resources__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}

/* ---------- Why choose SPEAKMORE? (4 stacked POINT cards) ---------- */
.why-speakmore {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--cream) 100%);
  padding-block: var(--sp-9) var(--sp-10);
  position: relative;
}
.why-speakmore__head {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.why-speakmore__eyebrow {
  display: block;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 var(--sp-3);
}
.why-speakmore__title {
  font-family: var(--font-display-jp);
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.why-speakmore__title em {
  font-style: normal;
  color: var(--coral);
}
.why-speakmore__lede {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.7;
}
.sm-only { display: inline; }
@media (min-width: 640px) {
  .sm-only { display: none; }
}

.why-speakmore__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.point-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
  box-shadow: 0 1px 0 rgba(14, 14, 14, 0.04), 0 14px 30px -22px rgba(14, 14, 14, 0.12);
}
@media (min-width: 800px) {
  .point-card {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-7);
    padding: clamp(2rem, 4vw, 3.25rem);
  }
}

.point-card__tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--coral);
  padding: 4px 11px;
  border: 1px solid var(--coral);
  border-radius: 999px;
  margin-bottom: var(--sp-4);
}
.point-card__eyebrow {
  display: block;
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-2);
}
.point-card__eyebrow--accent {
  color: var(--coral);
}
.point-card__title {
  font-family: var(--font-display-jp);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-4);
}
.point-card__accent {
  color: var(--coral);
}
.point-card__desc {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.85;
  margin: 0;
}
.point-card__desc strong {
  color: var(--ink);
  font-weight: 700;
}

.point-card__media {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  min-height: 200px;
  order: -1;
}
@media (min-width: 800px) {
  .point-card__media { order: 0; min-height: 220px; }
}
.point-card__media svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}
/* Photo variant — fills the media area edge-to-edge instead of sitting in padding.
   All point-card photos are forced to the same 4:3 landscape ratio so the 4
   cards align uniformly even when source images have different aspect ratios. */
.point-card__media--photo {
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
.point-card__media--photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--r-lg);
}

/* Note callout — coral-tinted highlight under a card's description */
.point-card__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(242, 92, 40, 0.08);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-soft);
}
.point-card__note-icon { flex: none; line-height: 1.6; }
.point-card__note strong { color: var(--coral-deep); font-weight: 700; }

/* Photo placeholder — dashed box for an image to be added later */
.point-card__media--placeholder {
  padding: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 2px dashed rgba(14, 14, 14, 0.16);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink-muted);
}
.point-card__placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.point-card__placeholder-label {
  font-family: var(--font-jp);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ---------- Our Campuses (unified 3-up section) ---------- */
.campuses {
  background: var(--bg);
  padding-block: var(--sp-6) var(--sp-7);
  position: relative;
}
.campuses__head {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.campuses__icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(242, 92, 40, 0.12);
  color: var(--coral);
  margin-bottom: var(--sp-4);
}
.campuses__icon svg { width: 30px; height: 30px; }
.campuses__title {
  font-family: var(--font-display-jp);
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.campuses__lede {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  margin: 0 auto;
  line-height: 1.75;
  max-width: 52ch;
}

.campuses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 720px) {
  .campuses__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
@media (min-width: 1024px) {
  .campuses__grid { gap: var(--sp-6); }
}

.campus-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(14, 14, 14, 0.04), 0 18px 40px -25px rgba(14, 14, 14, 0.18);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
  position: relative;
}

/* Diagonal "Coming soon" ribbon — sits in the top-right corner of a card */
.campus-card__ribbon {
  position: absolute;
  top: 22px;
  right: -54px;
  z-index: 5;
  width: 210px;
  padding: 7px 0;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-display-jp);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(14, 14, 14, 0.22);
  pointer-events: none;
}
/* Diagonal launch-date ribbon for course-product cards (Japanese text) */
.course-product__ribbon {
  position: absolute;
  top: 22px;
  right: -54px;
  z-index: 5;
  width: 210px;
  padding: 7px 0;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-display-jp);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(14, 14, 14, 0.22);
  pointer-events: none;
}
.campus-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px -25px rgba(14, 14, 14, 0.32);
}
@media (min-width: 720px) {
  /* Playful staggered baseline — gives the row a hand-placed feel */
  .campus-card--niseko { transform: translateY(0); }
  .campus-card--nozawa { transform: translateY(-18px); }
  .campus-card--tokyo  { transform: translateY(8px); }
  .campus-card--niseko:hover { transform: translateY(-6px); }
  .campus-card--nozawa:hover { transform: translateY(-24px); }
  .campus-card--tokyo:hover  { transform: translateY(2px); }
}

.campus-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.campus-card__media svg,
.campus-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.campus-card:hover .campus-card__media svg,
.campus-card:hover .campus-card__media img { transform: scale(1.05); }

/* Color-coded top stripe for each campus, hinting at the original section bg */
.campus-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 2;
}
.campus-card--niseko::before { background: var(--ink); }
.campus-card--nozawa::before { background: var(--coral); }
.campus-card--tokyo::before  { background: var(--cream-deep); border-bottom: 1px solid rgba(14,14,14,0.06); }
/* Cards that use a real photo (not the SVG illustration) drop the
   coloured top stripe so the image fills the media area edge-to-edge. */
.campus-card:has(.campus-card__media img)::before { display: none; }

.campus-card__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.campus-card__loc {
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--coral);
  display: inline-block;
}
.campus-card__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.campus-card__crest {
  width: clamp(48px, 9vw, 64px);
  height: auto;
  flex-shrink: 0;
}
.campus-card__name {
  font-family: var(--font-display-jp);
  font-style: normal; /* Japanese names: avoid synthesized faux-italic slant */
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.campus-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0;
}
.campus-card__features {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.campus-card__features li {
  font-size: 0.85rem;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.campus-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px; height: 2px;
  background: var(--teal-deep);
  border-radius: 2px;
}
.campus-card__cta {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--coral);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.campus-card__cta span { transition: transform var(--t-fast) var(--ease); }
.campus-card:hover .campus-card__cta { color: var(--coral-deep); }
.campus-card:hover .campus-card__cta span { transform: translateX(4px); }

/* ---------- Us in the media (X / Twitter horizontal rail) ---------- */
.media {
  background: var(--bg);
  padding-block: var(--sp-7) var(--sp-10);
  position: relative;
}
.media .section-head {
  margin-bottom: var(--sp-7);
}
.media__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: var(--sp-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) var(--sp-1) var(--sp-6);
  margin-inline: calc(var(--sp-1) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-muted) transparent;
}
.media__rail::-webkit-scrollbar { height: 8px; }
.media__rail::-webkit-scrollbar-track { background: transparent; }
.media__rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.media__rail::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

.media-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  overflow: hidden; /* clip the image figure to the card's rounded corners */
  box-shadow: 0 1px 0 rgba(14, 14, 14, 0.04);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
/* Optional image slot — when a card has a thumbnail (e.g. TV stills).
   The figure's negative top margin cancels the card's natural top padding,
   so the image bleeds flush to the card's top edge. overflow:hidden on the
   card above ensures the figure is clipped to the card's border-radius. */
.media-card__image {
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--cream);
}
.media-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -20px rgba(14, 14, 14, 0.2);
  border-color: var(--ink);
}
.media-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.media-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.media-card__date {
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.media-card__excerpt {
  font-family: var(--font-display-jp);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.media-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}
.media-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--coral);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.media-card__cta:hover {
  color: var(--coral-deep);
  gap: 10px;
}

/* ---------- Brochure CTA (EF-style standalone) ---------- */
.brochure {
  padding-block: var(--sp-6) var(--sp-6);
  background: var(--bg);
}
.brochure__frame {
  background: #ECC9B7;
  border-radius: calc(var(--r-xl) + 6px);
  padding: clamp(10px, 1.4vw, 16px);
}
.brochure__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: center;
  background: var(--cream-deep);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 3rem);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.brochure__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px -20px rgba(14, 14, 14, 0.25);
}
@media (min-width: 800px) {
  .brochure__card {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    padding: clamp(2rem, 4vw, 3.5rem);
  }
}
.brochure__tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.brochure__title {
  font-family: var(--font-display-jp);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-4);
}
.brochure__desc {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 var(--sp-6);
  max-width: 38ch;
}
.brochure__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 999px;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.brochure__card:hover .brochure__cta {
  background: var(--coral);
}
.brochure__media {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.brochure__media svg {
  width: 100%;
  max-width: 210px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(14, 14, 14, 0.18));
}

.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.resource-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-accent, var(--coral));
  opacity: 0.85;
}
.resource-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--c-fade-1, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  z-index: -1;
}
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent, var(--coral));
}
.resource-card:hover::after { opacity: 1; }

.resource-card--coral { --c-accent: var(--coral); --c-fade-1: rgba(242, 92, 40, 0.18); }
.resource-card--teal  { --c-accent: var(--teal-deep); --c-fade-1: rgba(180, 232, 60, 0.18); }
.resource-card--ink   { --c-accent: var(--ink); --c-fade-1: rgba(14, 14, 14, 0.10); }

.resource-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-fade-1, var(--cream));
  color: var(--c-accent, var(--coral));
  margin-bottom: var(--sp-3);
}
.resource-card__icon svg { width: 26px; height: 26px; }

.resource-card__tag {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent, var(--coral-deep));
  padding: 0.25em 0.7em;
  background: var(--c-fade-1, var(--cream));
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
}

.resource-card__title {
  font-family: var(--font-display-jp);
  font-size: var(--fs-lg);
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.resource-card__en {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-3);
}
.resource-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 var(--sp-5);
  flex-grow: 1;
}

.resource-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent, var(--coral-deep));
  width: 100%;
}
.resource-card__cta svg {
  transition: transform var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.resource-card:hover .resource-card__cta svg { transform: translateX(4px); }

/* Compact, high-intent variant — no icon/tag, tighter rhythm, filled CTA button */
.resource-card--compact {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  gap: 4px;
  text-align: center;
  align-items: center;
}
.resource-card--compact .resource-card__en {
  margin: 0 0 var(--sp-1);
  color: var(--c-accent, var(--coral-deep));
}
.resource-card--compact .resource-card__title {
  font-size: clamp(1.4rem, 5.5vw, 1.7rem);
}
.resource-card--compact .resource-card__desc {
  margin: var(--sp-2) 0 var(--sp-5);
}
.resource-card--compact .resource-card__cta {
  justify-content: center;
  margin-top: 0;
  padding: 0.95em 1.5em;
  border-top: none;
  border-radius: var(--r-pill);
  background: var(--c-accent, var(--coral));
  color: #fff;
  box-shadow: 0 12px 24px -12px var(--c-accent, var(--coral));
}
.resource-card--compact:hover .resource-card__cta { background: var(--coral-deep); }
.resource-card--compact:hover .resource-card__cta svg { transform: translateX(4px); }

/* ---------- Footer ---------- */
.site-footer {
  background: #000000;
  color: var(--cream-deep);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}
@media (min-width: 900px) {
  .site-footer__inner { gap: var(--sp-5); }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.site-footer__addr {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 232, 223, 0.65);
  margin: 0;
}
.site-footer__page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.site-footer__page-link:hover { color: var(--coral-soft); gap: 10px; }
.site-footer__page-link svg { flex-shrink: 0; }
.site-footer__social {
  display: flex;
  gap: var(--sp-3);
  order: 1; /* push below the language selector — lowest in the brand block */
  margin-top: var(--sp-2);
}
.site-footer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 232, 223, 0.08);
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.site-footer__social a:hover { background: var(--coral); color: #fff; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
.site-footer__cols h4 {
  font-family: var(--font-display-jp);
  font-size: var(--fs-sm);
  color: var(--cream);
  margin-bottom: var(--sp-2);
  font-weight: 700;
}
.site-footer__cols ul { display: flex; flex-direction: column; gap: var(--sp-1); }
.site-footer__cols a {
  font-size: var(--fs-sm);
  color: rgba(255, 232, 223, 0.65);
  transition: color var(--t-fast) var(--ease);
}
.site-footer__cols a:hover { color: var(--coral); }

.site-footer__legal {
  border-top: 1px solid rgba(255, 232, 223, 0.08);
  font-size: var(--fs-xs);
  color: rgba(255, 232, 223, 0.5);
}
.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  /* Clear the home indicator on modern iPhones (black footer bleeds in). */
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
}
.site-footer__legal ul { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.site-footer__legal a:hover { color: var(--coral-soft); }

/* ---------- Mobile nav drawer (when toggled) ---------- */
@media (max-width: 1023px) {
  .site-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--border);
    padding: var(--sp-2) var(--gutter) var(--sp-4);
    z-index: 60;
    animation: drawerIn var(--t-med) var(--ease);
  }
  .site-nav.is-open ul {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .site-nav.is-open a {
    font-family: var(--font-display-jp);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--ink);
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--border);
    display: block;
  }
  .site-nav.is-open li:last-child a { border-bottom: none; }
  .site-nav.is-open a[aria-current="page"] { color: var(--coral); }
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Page hero (stub pages: Why / Courses / Campuses / Pricing)
   ========================================================================== */
.page-hero {
  padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 7vw, 96px);
  background: var(--cream);
}
.page-hero__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-4);
  padding: 6px 14px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.page-hero__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 var(--sp-5);
  color: var(--ink);
}
.page-hero__title em {
  color: var(--coral);
  font-style: normal;
}
.page-hero__lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 auto;
  max-width: 640px;
}

/* ===== Company overview ===== */
.company {
  padding-block: clamp(40px, 6vw, 72px) clamp(72px, 11vw, 144px);
}
.company-info {
  max-width: 880px;
  margin: 0 auto;
}
.company-info__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.company-info__row:first-child {
  border-top: 1px solid var(--border);
}
.company-info dt {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.company-info dd {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}
.company-info dd a {
  color: var(--coral-deep);
  text-decoration: none;
}
.company-info dd a:hover { text-decoration: underline; }
.company-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.company-info__list li {
  position: relative;
  padding-left: 1.1em;
}
.company-info__list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ink-muted);
}
.company-info__sub + .company-info__sub { margin-top: var(--sp-4); }
.company-info__sub p { margin: 0; }
.company-info__sub-name { font-weight: 700; color: var(--ink); }
.company-info__note {
  max-width: 880px;
  margin: var(--sp-6) auto 0;
  padding-inline: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
@media (max-width: 640px) {
  .company-info__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-block: var(--sp-4);
  }
  .company-info dt {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
  }
}

/* ===== FAQ page ===== */
.page-faq {
  background: linear-gradient(180deg, var(--pink-soft) 0%, #FFE0D6 45%, #FBC9B6 100%) fixed;
}
.page-faq .page-hero { background: transparent; }

/* ===== Campuses page hero — pink/coral gradient ===== */
.page-campuses .page-hero {
  background: linear-gradient(160deg, var(--pink-soft) 0%, #FFCBB5 55%, var(--coral-soft) 100%);
}

.faq {
  padding-block: var(--sp-4) var(--sp-7);
}
.faq__list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.faq__item {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 22px rgba(209, 70, 23, 0.07);
  overflow: hidden;
}
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display-jp);
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--coral-deep); }
.faq__q-mark {
  flex-shrink: 0;
  width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-en);
  font-size: 0.92em;
  line-height: 1;
}
.faq__q-text { flex: 1; }
.faq__chevron {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 0.5em;
  border-right: 2px solid var(--coral-deep);
  border-bottom: 2px solid var(--coral-deep);
  transform: rotate(45deg);
  transition: transform var(--t-med) var(--ease);
}
.faq__item[open] .faq__chevron { transform: rotate(-135deg); }
.faq__a {
  padding: 0 var(--sp-5) var(--sp-5);
  padding-left: calc(var(--sp-5) + 1.7em + var(--sp-3));
  color: var(--ink-soft);
  line-height: 1.85;
}
.faq__a p { margin: 0; }
.faq__cta {
  margin-top: var(--sp-7);
  text-align: center;
}
.line-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px 12px 12px;
  background: #06C755;
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-display-jp);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 28px -14px rgba(6, 199, 85, 0.7);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.line-pill:hover { background: #05A847; transform: translateY(-2px); }
.line-pill__logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }

@media (max-width: 640px) {
  .faq__q { padding: var(--sp-4); font-size: var(--fs-sm); }
  .faq__a {
    padding: 0 var(--sp-4) var(--sp-4);
    padding-left: calc(var(--sp-4) + 1.7em + var(--sp-3));
  }
}

.page-stub {
  padding: clamp(48px, 7vw, 96px) 0 clamp(80px, 12vw, 160px);
}
.page-stub__panel {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.page-stub__tag {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 4px 10px;
  background: var(--cream-deep);
  border-radius: 999px;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--coral);
  text-transform: uppercase;
}
.page-stub__title {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0 0 var(--sp-3);
  color: var(--ink);
}
.page-stub__body {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-5);
}
.page-stub__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--coral);
  text-decoration: none;
}
.page-stub__back:hover { text-decoration: underline; }

/* Active state in nav */
.site-nav a[aria-current="page"] {
  color: var(--coral);
  font-weight: 600;
}

/* ==========================================================================
   Landing pages (marketing campaigns — stripped, conversion-focused)
   ========================================================================== */

/* Stripped logo-only header */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  background: rgba(255, 252, 250, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.lp-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.lp-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 520px) {
  .lp-header__cta .lp-header__cta-label { display: none; }
}

/* Hero */
.lp-hero {
  position: relative;
  padding: clamp(56px, 9vw, 112px) 0 clamp(64px, 10vw, 128px);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  overflow: hidden;
}
.lp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .lp-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(48px, 6vw, 80px);
  }
}
.lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-4);
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--coral);
  text-transform: uppercase;
  font-weight: 600;
}
.lp-hero__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--sp-5);
  color: var(--ink);
}
.lp-hero__title em {
  color: var(--coral);
  font-style: normal;
}
.lp-hero__lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 0 0 var(--sp-6);
  max-width: 520px;
}
.lp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.lp-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}
.lp-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-hero__trust svg {
  color: var(--coral);
  flex-shrink: 0;
}
.lp-hero__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.25);
}
.lp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-hero__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 20px rgba(242, 92, 40, 0.4);
}

/* Trust strip */
.lp-trust {
  padding: clamp(40px, 6vw, 72px) 0;
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lp-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  text-align: center;
}
@media (min-width: 700px) {
  .lp-trust__grid { grid-template-columns: repeat(4, 1fr); }
}
.lp-trust__num {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--coral);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.lp-trust__label {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Why block (4 points) */
.lp-why {
  padding: clamp(72px, 10vw, 128px) 0;
  background: var(--cream);
}
.lp-why__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
}
.lp-why__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  line-height: 1.2;
}
.lp-why__title em { color: var(--coral); font-style: normal; }
.lp-why__lede {
  font-size: var(--fs-md);
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 0;
}
.lp-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 700px) {
  .lp-why__grid { grid-template-columns: repeat(2, 1fr); }
}
.lp-why__card {
  padding: var(--sp-6);
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.lp-why__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}
.lp-why__card h3 {
  font-size: 1.25rem;
  margin: 0 0 var(--sp-2);
  line-height: 1.3;
}
.lp-why__card p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 0;
}

/* Voice quote */
.lp-voice {
  padding: clamp(64px, 9vw, 112px) 0;
  background: var(--ink);
  color: #fff;
}
.lp-voice__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.lp-voice__quote {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 var(--sp-5);
}
.lp-voice__quote::before { content: "「"; color: var(--coral); }
.lp-voice__quote::after  { content: "」"; color: var(--coral); }
.lp-voice__author {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-sm);
}
.lp-voice__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}

/* CTA block */
.lp-cta {
  padding: clamp(64px, 9vw, 112px) 0;
  background: linear-gradient(180deg, var(--coral) 0%, #d94e1f 100%);
  color: #fff;
  text-align: center;
}
.lp-cta__inner {
  max-width: 720px;
  margin: 0 auto;
}
.lp-cta__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  line-height: 1.2;
  color: #fff;
}
.lp-cta__lede {
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  margin: 0 0 var(--sp-6);
}
.lp-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: #fff;
  color: var(--coral);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
}
.lp-cta__note {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.8);
}

/* FAQ */
.lp-faq {
  padding: clamp(72px, 10vw, 128px) 0;
  background: #fff;
}
.lp-faq__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--sp-7);
}
.lp-faq__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 700;
  margin: 0;
}
.lp-faq__list {
  max-width: 760px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.lp-faq__item {
  border-bottom: 1px solid var(--border);
}
.lp-faq__item:first-child { border-top: 1px solid var(--border); }
.lp-faq__item summary {
  cursor: pointer;
  padding: var(--sp-5) 0;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::after {
  content: "+";
  color: var(--coral);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  transition: transform 0.2s ease;
}
.lp-faq__item[open] summary::after {
  content: "−";
}
.lp-faq__item p {
  padding: 0 0 var(--sp-5);
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.7;
}

/* Minimal footer */
.lp-footer {
  padding: var(--sp-6) 0;
  background: var(--ink);
  color: rgba(255,255,255,0.6);
  text-align: center;
  font-size: var(--fs-xs);
}
.lp-footer a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  margin: 0 var(--sp-3);
}
.lp-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   Why-page deep-dive sections
   (numbered point cards, activity-icon grid, who-is-it-for grid)
   ========================================================================== */

/* ---------- Numbered point cards ---------- */
.why-detail {
  padding: clamp(64px, 9vw, 112px) 0;
  background: #fff;
}
.why-detail__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
}
.why-detail__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  line-height: 1.2;
}
.why-detail__title em { color: var(--coral); font-style: normal; }
.why-detail__lede {
  color: var(--ink-muted);
  font-size: var(--fs-md);
  line-height: 1.7;
  margin: 0;
}
.why-detail__list {
  display: grid;
  gap: var(--sp-7);
  list-style: none;
  padding: 0;
  margin: 0;
}
.why-detail__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding: clamp(24px, 4vw, 40px);
  background: var(--cream);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
@media (min-width: 800px) {
  .why-detail__card {
    grid-template-columns: 120px 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
}
.why-detail__num {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(3.2rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--coral);
  line-height: 1;
  border-right: 2px solid rgba(242, 92, 40, 0.3);
  padding-right: clamp(20px, 3vw, 32px);
}
@media (max-width: 799px) {
  .why-detail__num {
    border-right: none;
    border-bottom: 2px solid rgba(242, 92, 40, 0.3);
    padding-right: 0;
    padding-bottom: var(--sp-3);
  }
}
.why-detail__heading {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: var(--coral);
  line-height: 1.35;
  margin: 0 0 var(--sp-4);
}
.why-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  list-style: none;
  padding: 0;
}
.why-detail__badge {
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--coral);
  border-radius: 6px;
  color: var(--coral);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.why-detail__body {
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.8;
  margin: 0;
  padding: var(--sp-4);
  background: #fff;
  border-radius: var(--r-md);
}

/* Detail card accent variants (green + pink rotation) */
.why-detail__card--teal {
  background: #F2FAD9;
}
.why-detail__card--teal .why-detail__num {
  color: var(--teal-deep);
  border-right-color: rgba(125, 186, 26, 0.35);
}
@media (max-width: 799px) {
  .why-detail__card--teal .why-detail__num {
    border-bottom-color: rgba(125, 186, 26, 0.35);
  }
}
.why-detail__card--teal .why-detail__heading { color: var(--teal-deep); }
.why-detail__card--teal .why-detail__badge {
  border-color: var(--teal-deep);
  color: var(--teal-deep);
}

.why-detail__card--pink {
  background: var(--pink-soft);
}
.why-detail__card--pink .why-detail__num {
  color: var(--pink);
  border-right-color: rgba(233, 75, 124, 0.35);
}
@media (max-width: 799px) {
  .why-detail__card--pink .why-detail__num {
    border-bottom-color: rgba(233, 75, 124, 0.35);
  }
}
.why-detail__card--pink .why-detail__heading { color: var(--pink-deep); }
.why-detail__card--pink .why-detail__badge {
  border-color: var(--pink);
  color: var(--pink-deep);
}

.why-detail__card--blue {
  background: #E7F1FB;
}
.why-detail__card--blue .why-detail__num {
  color: #2E86C1;
  border-right-color: rgba(46, 134, 193, 0.35);
}
@media (max-width: 799px) {
  .why-detail__card--blue .why-detail__num {
    border-bottom-color: rgba(46, 134, 193, 0.35);
  }
}
.why-detail__card--blue .why-detail__heading { color: #1F6298; }
.why-detail__card--blue .why-detail__badge {
  border-color: #2E86C1;
  color: #1F6298;
}

/* ---------- Activity-icon grid ---------- */
.why-activities {
  padding: clamp(64px, 9vw, 112px) 0;
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--cream) 100%);
  position: relative;
}
.why-activities__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
}
.why-activities__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: var(--pink-deep);
}
.why-activities__title em {
  color: var(--teal-deep);
  font-style: normal;
}
.why-activities__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 600px) {
  .why-activities__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .why-activities__grid { grid-template-columns: repeat(6, 1fr); }
}
.why-activities__item {
  text-align: center;
}
.why-activities__circle {
  width: clamp(110px, 18vw, 160px);
  height: clamp(110px, 18vw, 160px);
  margin: 0 auto var(--sp-3);
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(14, 14, 14, 0.06);
  color: var(--coral);
  overflow: hidden;
}
.why-activities__circle svg { width: 50%; height: 50%; }
.why-activities__circle img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}
.why-activities__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Who-is-it-for 2x2 grid ---------- */
.why-audience {
  padding: clamp(64px, 9vw, 112px) 0;
  background: #fff;
}
.why-audience__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-7);
}
.why-audience__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  line-height: 1.3;
}
.why-audience__title em { color: var(--coral); font-style: normal; }
.why-audience__lede {
  color: var(--ink-muted);
  font-size: var(--fs-md);
  line-height: 1.7;
  margin: 0;
}
.why-audience__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 700px) {
  .why-audience__grid { grid-template-columns: repeat(2, 1fr); }
}
.why-audience__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--cream);
  border: 1px solid var(--coral);
  border-radius: var(--r-md);
}
.why-audience__icon {
  width: 56px;
  height: 56px;
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  color: var(--coral);
}
.why-audience__icon svg { width: 60%; height: 60%; }

/* Photo variant — for watercolor illustrations */
.why-audience__icon--photo {
  width: clamp(140px, 24vw, 200px);
  height: clamp(140px, 24vw, 200px);
  background: transparent;
  border-radius: 0;
  margin-bottom: var(--sp-2);
}
.why-audience__icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.why-audience__label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--coral);
  line-height: 1.5;
  margin: 0;
}

/* Audience card accent variants */
.why-audience__card--teal {
  background: #F2FAD9;
  border-color: var(--teal-deep);
}
.why-audience__card--teal .why-audience__icon { color: var(--teal-deep); }
.why-audience__card--teal .why-audience__label { color: var(--teal-deep); }

.why-audience__card--pink {
  background: var(--pink-soft);
  border-color: var(--pink);
}
.why-audience__card--pink .why-audience__icon { color: var(--pink); }
.why-audience__card--pink .why-audience__label { color: var(--pink-deep); }

/* ==========================================================================
   Group illustration banner
   Sits flush at the bottom of its container so the figures' feet
   appear to stand on the top edge of the next (dark) section.
   ========================================================================== */
.group-banner {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin: 0;
  padding: 0 var(--sp-4);
  line-height: 0;
  background: transparent;
}
.group-banner img {
  display: block;
  max-width: min(1100px, 100%);
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}

/* ==========================================================================
   Course-plan matrix (used on /pages/courses.html)
   ========================================================================== */
.course-matrix {
  padding: clamp(56px, 8vw, 96px) 0 clamp(80px, 12vw, 160px);
  background: var(--bg);
}
.course-matrix__head {
  max-width: 880px;
  margin: 0 auto var(--sp-7);
  text-align: left;
}
.course-matrix__eyebrow {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 800;
  color: var(--coral);
  margin: 0 0 var(--sp-3);
  letter-spacing: 0.02em;
}
.course-matrix__subtitle {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  color: var(--coral-deep);
  margin: 0 0 var(--sp-3);
}
.course-matrix__note {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}

/* Scroll wrapper — table goes horizontal-scroll on small screens */
.course-matrix__scroll {
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}

/* Table */
.course-matrix__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Top-left empty corner cell */
.course-matrix__corner {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

/* Plan column headers (top row) */
.course-matrix__plan {
  background: var(--coral);
  color: #fff;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 700;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  letter-spacing: 0.04em;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.course-matrix__plan:first-of-type { border-left: none; }

/* Row headers (left column) */
.course-matrix__table tbody th {
  background: var(--cream-deep);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  line-height: 1.4;
  border-top: 1px solid var(--border);
  width: 22%;
  min-width: 140px;
}
.course-matrix__sub {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Value cells */
.course-matrix__table tbody td {
  background: #fff;
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  vertical-align: middle;
}

/* "計 N コマ" format */
.course-matrix__count {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.course-matrix__count strong {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0.15em;
}
.course-matrix__count-foot {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Helpful scroll hint on mobile */
@media (max-width: 640px) {
  .course-matrix__scroll {
    border-radius: 0;
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}

/* ==========================================================================
   Competitive comparison matrix (Why page)
   ========================================================================== */
.compare-matrix {
  padding: clamp(64px, 9vw, 112px) 0;
  background: var(--cream);
}
.compare-matrix__head {
  max-width: 720px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.compare-matrix__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
}
.compare-matrix__title em { color: var(--coral); font-style: normal; }
.compare-matrix__lede {
  font-size: var(--fs-md);
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 0;
}

/* Scroll wrapper */
.compare-matrix__scroll {
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}

/* Table */
.compare-matrix__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Header columns (top row) */
.compare-matrix__col {
  background: var(--ink-muted);
  color: #fff;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 700;
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  letter-spacing: 0.04em;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  vertical-align: middle;
}
.compare-matrix__col:first-of-type { border-left: none; }

/* SPEAKMORE column header — soft pink, highlighted */
.compare-matrix__col--us {
  background: var(--pink-soft);
  color: var(--pink-deep);
}

/* In-table logo: size the wordmark image for a header cell */
.brand__logo--in-table {
  display: inline-flex;
  justify-content: center;
}
.brand__logo--in-table .brand__logo-img {
  height: clamp(16px, 2.6vw, 24px);
}

/* Cells */
.compare-matrix__table tbody td {
  padding: var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
  text-align: center;
  line-height: 1.6;
  color: var(--ink-muted);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  vertical-align: middle;
}

/* SPEAKMORE column body cells — match the other columns (white background, grey text).
   Class retained on the HTML cells so the column can be visually highlighted again
   in the future by adding styles here. */
.compare-matrix__yes {
  /* intentionally inherits .compare-matrix__table tbody td defaults */
}

/* Mobile scroll padding */
@media (max-width: 640px) {
  .compare-matrix__scroll {
    border-radius: 0;
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}

/* ==========================================================================
   Price matrix — total-cost comparison (Why page)
   ========================================================================== */
.price-matrix {
  padding: clamp(64px, 9vw, 112px) 0;
  background: var(--bg);
}
.price-matrix__head {
  max-width: 720px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.price-matrix__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
}
.price-matrix__title em { color: var(--coral); font-style: normal; }
.price-matrix__lede {
  font-size: var(--fs-md);
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 0;
}
.price-matrix__scroll {
  max-width: 1040px;
  margin: 0 auto;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}
.price-matrix__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Top-left empty corner */
.price-matrix__corner {
  background: #fff;
  border-bottom: 1px solid var(--border);
}
/* Column headers */
.price-matrix__col {
  background: var(--ink-muted);
  color: #fff;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  font-weight: 700;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  letter-spacing: 0.02em;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  vertical-align: middle;
}
.price-matrix__col small {
  display: block;
  margin-top: 3px;
  font-size: 0.72em;
  font-weight: 500;
  opacity: 0.85;
}
/* Featured SPEAKMORE columns — coral, like the brand's primary */
.price-matrix__col--us {
  background: var(--coral);
  color: #fff;
}
/* The black wordmark logo sits on the coral header — invert it to white. */
.price-matrix__col--us .brand__logo-img {
  filter: brightness(0) invert(1);
}
.price-matrix__col--us .brand__logo--in-table { margin-bottom: 4px; }
/* Row label column */
.price-matrix__table tbody th[scope="row"] {
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.price-matrix__table tbody th[scope="row"] small {
  font-weight: 500;
  color: var(--ink-muted);
}
/* Data cells */
.price-matrix__table tbody td {
  padding: var(--sp-4) var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: center;
  line-height: 1.45;
  color: var(--ink);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  vertical-align: middle;
}
.price-matrix__table tbody td small {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-muted);
}
/* Featured ニセコ cells — subtle tint + coral value text */
.price-matrix__us {
  background: var(--pink-soft);
  color: var(--coral-deep) !important;
}
.price-matrix__us small { color: var(--coral-deep); opacity: 0.75; }
/* Total row — emphasized */
.price-matrix__total-row th[scope="row"],
.price-matrix__total-row td {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  border-top: 2px solid var(--border-strong);
}
.price-matrix__total-row th[scope="row"] { background: var(--cream-deep); }
.price-matrix__total-row .price-matrix__us { background: #FFD0DE; }
/* Half-star rating: grey base + coral fill clipped to --pct */
.stars {
  display: inline-block;
  position: relative;
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
}
.stars::before {
  content: "★★★★★";
  letter-spacing: 2px;
  color: var(--border-strong);
}
.stars::after {
  content: "★★★★★";
  letter-spacing: 2px;
  color: var(--coral);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pct, 0%);
  overflow: hidden;
}
.price-matrix__note {
  max-width: 1040px;
  margin: var(--sp-5) auto 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.7;
}
@media (max-width: 640px) {
  .price-matrix__scroll {
    border-radius: 0;
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
}

/* ==========================================================================
   Expanded course product sections (Courses & Fees page)
   ========================================================================== */
.course-products {
  padding: clamp(64px, 9vw, 112px) 0;
  background: var(--cream);
}
.course-products__head {
  max-width: 720px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.course-products__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
}
.course-products__title em { color: var(--coral); font-style: normal; }
.course-products__lede {
  color: var(--ink-muted);
  font-size: var(--fs-md);
  line-height: 1.7;
  margin: 0;
}
.course-products__list {
  display: grid;
  gap: var(--sp-8);
}

/* ----- One expanded course card ----- */
.course-product {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--c-accent, var(--coral));
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 40px -25px rgba(14, 14, 14, 0.18);
}
.course-product--coral { --c-accent: var(--coral); }
.course-product--teal  { --c-accent: var(--teal-deep); }
.course-product--ink   { --c-accent: var(--ink); }

/* Brief highlight pulse when the finder scrolls to this card */
.course-product.is-target {
  animation: course-product-pulse 1.6s ease-out;
}
@keyframes course-product-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(242, 92, 40, 0.55), 0 18px 40px -25px rgba(14, 14, 14, 0.18); }
  60%  { box-shadow: 0 0 0 18px rgba(242, 92, 40, 0),  0 18px 40px -25px rgba(14, 14, 14, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(242, 92, 40, 0),     0 18px 40px -25px rgba(14, 14, 14, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .course-product.is-target { animation: none; }
}

.course-product__body {
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* keep wide children (CTA) from overflowing the card */
  gap: var(--sp-6);
  position: relative;
}

/* Academy crest — centered at the top of every course card */
.course-product__brand-mark {
  display: block;
  /* negative margins pull the crest up and tighten the gap to the title,
     trimming the dead space above and below it */
  margin: calc(-1 * var(--sp-2)) auto calc(-1 * var(--sp-3));
  width: clamp(140px, 24vw, 200px);
  height: auto;
  pointer-events: none;
}
@media (max-width: 700px) {
  .course-product__brand-mark { width: clamp(140px, 38vw, 175px); }
}

/* Header (top of expanded card — mirrors result-card data) */
.course-product__head {
  display: grid;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
}
.course-product__location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-accent, var(--ink));
  text-transform: uppercase;
}
.course-product__location svg { width: 14px; height: 14px; }
.course-product__title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.course-product__en {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-muted);
  margin: 0;
}
.course-product__feats {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.course-product__feats li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

/* Reusable sub-section heading */
.course-product__sub-head {
  font-family: var(--font-jp);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-accent, var(--ink));
  margin: 0 0 var(--sp-3);
  padding-left: 10px;
  border-left: 3px solid var(--c-accent, var(--coral));
}

/* Two-column layout: price calculator + quote summary, side-by-side on desktop */
@media (min-width: 800px) {
  .course-product__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: stretch;
  }
}

/* Weekly price calculator */
.course-product__calc {
  padding: var(--sp-5);
  background: var(--cream);
  border-radius: var(--r-md);
}
.course-product__calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.course-product__calc-row label {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.course-product__calc-row output {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}
.course-product__calc input[type="range"] {
  width: 100%;
  accent-color: var(--c-accent, var(--coral));
  margin-bottom: var(--sp-4);
}
/* Plan selector (combined ニセコ留学 card) */
.course-product__calc-row--plan {
  display: block;
  margin-bottom: var(--sp-4);
}
.course-product__calc-row--plan label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-bottom: var(--sp-2);
}
.course-product__plan-select {
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
  padding: 12px 42px 12px 16px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23555' stroke-width='1.7'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  border: 1.5px solid var(--c-accent, var(--coral));
  border-radius: var(--r-md);
  appearance: none;
  cursor: pointer;
}
.course-product__plan-select:focus {
  outline: 2px solid var(--c-accent, var(--coral));
  outline-offset: 1px;
}
/* 1-week-course exclaimer note shown under the period row */
.course-product__calc-note {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--pink-soft, #FFD9E4);
  border-radius: var(--r-sm);
}
/* Accommodation selector — icon cards */
.course-product__calc-row--acc {
  display: block;
  margin-bottom: var(--sp-4);
}
.course-product__acc-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-bottom: var(--sp-2);
}
.acc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.acc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: var(--sp-3) var(--sp-2);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.acc-card input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.acc-card__icon { font-size: 1.7rem; line-height: 1; }
.acc-card__name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.acc-card__free { color: #2Fa15a; }
.acc-card__en {
  font-family: var(--font-en);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.acc-card:hover { border-color: var(--coral-soft); }
.acc-card:has(input:checked) {
  border-color: var(--c-accent, var(--coral));
  background: rgba(242, 92, 40, 0.06);
  box-shadow: inset 0 0 0 1px var(--c-accent, var(--coral));
}
.acc-card:has(input:focus-visible) {
  outline: 2px solid var(--c-accent, var(--coral));
  outline-offset: 2px;
}
/* Live quote summary (replaces the photo column) */
.course-product__quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(20px, 3vw, 32px);
  background: #1b1b1f;
  color: #fff;
  border-radius: var(--r-md);
}
.course-product__quote-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.quote-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.82);
}
.quote-row__label { line-height: 1.5; }
.quote-row__val {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.quote-row--subtotal {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-base);
  font-weight: 700;
  color: #fff;
}
.quote-row--tax {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}
.course-product__quote-total { margin-top: var(--sp-1); }
.quote-total__label {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
}
.quote-total__label span {
  font-family: var(--font-en);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.quote-total__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 6px;
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  color: #C9A75C;
}
.quote-total__amount small {
  font-family: var(--font-jp);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.course-product__quote-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding: var(--sp-4);
  background: #06C755;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-base);
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.course-product__quote-cta:hover { background: #05A847; }
.course-product__quote-cta-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
/* Phones: shrink slightly so the LINE CTA label stays on one line */
@media (max-width: 700px) {
  .course-product__quote-cta {
    white-space: nowrap;
    font-size: 0.82rem;
    padding-inline: var(--sp-3);
    gap: 6px;
  }
  .course-product__quote-cta-icon { width: 21px; height: 21px; }
}

/* Typical week (compact 7-day grid) */
.course-product__week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.course-product__week-grid li {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  text-align: center;
  font-size: var(--fs-xs);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 80px;
}
.course-product__week-grid li strong {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-accent, var(--ink));
  font-weight: 700;
}
.course-product__week-grid li span {
  font-size: 10px;
  color: var(--ink-muted);
  line-height: 1.3;
}

/* 6-box content matrix (3x2) */
.course-product__contents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 600px) {
  .course-product__contents-grid { grid-template-columns: repeat(3, 1fr); }
}
.course-product__contents-grid li {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: center;
}
.course-product__contents-grid li strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink);
  margin-bottom: 4px;
}
.course-product__contents-grid li span {
  font-size: var(--fs-xs);
  color: var(--c-accent, var(--coral));
  font-weight: 700;
}

/* Payment methods */
.course-product__payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.course-product__payment-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--cream);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.course-product__payment-list li::before {
  content: "✓";
  color: var(--c-accent, var(--coral));
  font-weight: 700;
}

/* Course features — 3 bullet points, each with a 1-sentence body */
.course-product__features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.course-product__features-list li {
  position: relative;
  padding-left: 22px;
}
.course-product__features-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-accent, var(--coral));
}
.course-product__features-list li strong {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.35;
}
.course-product__features-list li p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.55;
}

/* Creator profile (placeholder) */
.course-product__creator-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  background: var(--cream);
  border-radius: var(--r-md);
}
.course-product__creator-photo {
  width: 80px;
  height: 80px;
  background: var(--cream-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 20px;
  overflow: hidden;
}
.course-product__creator-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.course-product__creator-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 4px;
}
.course-product__creator-role {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}

/* Free-consultation CTA banner — circular avatar + copy + button.
   Flex layout so it formats cleanly on mobile (mirrors the コース監修 card). */
.course-product__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2.2vw, 20px);
  background: linear-gradient(135deg, var(--pink-soft) 0%, #FFC1D2 55%, var(--pink) 130%);
  border-radius: var(--r-md);
  padding: clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 26px);
  color: var(--pink-deep);
}
/* Moeko avatar — circular, like the creator photo */
.course-product__cta-avatar {
  flex-shrink: 0;
  width: clamp(60px, 13vw, 76px);
  height: clamp(60px, 13vw, 76px);
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
}
.course-product__cta-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.course-product__cta-body {
  /* basis 0 so the copy always sits beside the avatar (even on iPhone)
     instead of wrapping below it; grows to fill the row. */
  flex: 1 1 0;
  min-width: 0;
}
.course-product__cta-eyebrow {
  font-family: var(--font-en);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 4px;
  line-height: 1.1;
}
.course-product__cta-title {
  font-family: var(--font-serif, "Shippori Mincho", serif);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 700;
  margin: 0;
  color: var(--pink-deep);
  line-height: 1.2;
}
.course-product__cta-note {
  font-size: 0.7rem;
  color: rgba(199, 50, 104, 0.78); /* --pink-deep @ 0.78 */
  margin: 0;
}
.course-product__cta-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 18px;
  background: #fff;
  color: var(--pink-deep);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}
.course-product__cta-button-arrow {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal-deep);
  color: #fff;
  align-items: center;
  justify-content: center;
}
.course-product__cta-button-arrow svg {
  width: 12px;
  height: 12px;
}
/* On narrow screens, let the button span full width below the copy */
@media (max-width: 520px) {
  .course-product__cta-button {
    flex-basis: 100%;
    justify-content: center;
    padding: 11px 16px;
  }
}

/* ---------- LINE contact CTA ---------- */
.line-cta {
  padding-block: var(--sp-5) var(--sp-7);
}
/* When the LINE CTA directly follows the media section, pull the two
   together — the media section's large bottom padding + the CTA's top
   padding otherwise leaves a big empty gap. */
.media:has(+ .line-cta) { padding-bottom: var(--sp-6); }
.media + .line-cta { padding-top: 0; }
.line-cta__card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 660px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px -22px rgba(14, 14, 14, 0.3);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.line-cta__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -22px rgba(6, 199, 85, 0.55);
}
.line-cta__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}
.line-cta__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.line-cta__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.line-cta__head {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
}
.line-cta__sub {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.55;
}
.line-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  background: #06C755;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.line-cta__card:hover .line-cta__btn {
  background: #05A847;
}
@media (max-width: 640px) {
  .line-cta__card {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }
  .line-cta__btn { width: 100%; justify-content: center; padding: 13px 20px; }
}

/* ============================================================
   CAMPUS SHOWCASE (campuses.html) — detailed per-location sections
   ============================================================ */
/* Sticky jump nav */
.campus-jump {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(255, 252, 250, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.campus-jump__inner {
  display: flex;
  gap: clamp(8px, 3vw, 28px);
  justify-content: center;
  flex-wrap: wrap;
}
.campus-jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: clamp(12px, 1.6vw, 18px) 4px;
  color: var(--ink);
  font-weight: 700;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.campus-jump a:hover { color: var(--coral); border-bottom-color: var(--coral); }

/* Per-location accent */
.campus-detail--niseko { --c-accent: var(--coral);     --c-accent-soft: var(--coral-soft); }
.campus-detail--nozawa { --c-accent: var(--teal-deep);  --c-accent-soft: #B4E83C; }
.campus-detail--tokyo  { --c-accent: var(--ink);        --c-accent-soft: var(--ink-muted); }

.campus-detail {
  padding-block: clamp(48px, 7vw, 104px);
  scroll-margin-top: calc(var(--header-h) + 70px);
}
.campus-detail:nth-of-type(even) { background: var(--bg-alt, #FBF4EF); }

/* Header: intro + live weather */
.campus-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: clamp(24px, 3.5vw, 44px);
}
.campus-detail__intro { flex: 1 1 380px; min-width: 0; }
.campus-detail__eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.campus-detail__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.campus-detail__name {
  font-family: var(--font-display-jp);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.campus-detail__crest { height: clamp(108px, 24vw, 156px); width: auto; flex-shrink: 0; margin-left: auto; }
.campus-detail__en {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 6px 0 0;
}
.campus-detail__tagline {
  margin: var(--sp-3) 0 0;
  max-width: 60ch;
  color: var(--ink-soft);
  line-height: 1.85;
}

/* Main hero photo */
.campus-hero-photo {
  position: relative;
  margin: 0 0 clamp(20px, 3vw, 36px);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: color-mix(in srgb, var(--c-accent) 12%, #fff);
}
.campus-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Quick facts row */
.campus-facts {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 52px);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(14,14,14,0.04), 0 16px 34px -28px rgba(14,14,14,0.18);
}
.campus-facts li { display: flex; flex-direction: column; gap: 4px; }
.campus-facts__k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-accent);
  text-transform: uppercase;
}
.campus-facts__v { font-weight: 500; color: var(--ink); line-height: 1.5; }

/* Generic block + section title */
.campus-block { margin-bottom: clamp(32px, 4.5vw, 60px); }
.campus-block:last-of-type { margin-bottom: clamp(24px, 3vw, 40px); }
.campus-section-title {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 var(--sp-5);
  padding-left: 14px;
  border-left: 4px solid var(--c-accent);
  line-height: 1.3;
}
.campus-section-title em { font-style: normal; color: var(--c-accent); }

/* Why-choose cards */
.campus-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.campus-why__card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.4vw, 30px);
}
.campus-why__num {
  font-family: var(--font-en);
  font-size: 1.4rem;
  color: var(--c-accent);
  opacity: 0.5;
}
.campus-why__card h4 { font-size: var(--fs-md); margin: 6px 0 8px; color: var(--ink); }
.campus-why__card p { margin: 0; color: var(--ink-soft); line-height: 1.8; font-size: var(--fs-sm); }

/* Photo galleries */
.campus-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
}
.campus-gallery--two { grid-template-columns: repeat(2, 1fr); }
.campus-photo {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--c-accent) 12%, #fff);
  border: 1px solid var(--border);
}
.campus-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campus-photo__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--c-accent) 60%, #888);
}
.campus-photo__ph svg { width: 30%; max-width: 56px; height: auto; opacity: 0.7; }
.campus-photo__ph--lg { flex-direction: column; gap: 10px; }
.campus-photo__ph--lg span { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; }
.campus-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 12px 9px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(transparent, rgba(14,14,14,0.55));
}

/* Courses offered here */
.campus-courses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(10px, 1.5vw, 16px);
}
.campus-courses a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 700;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.campus-courses a:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.campus-courses img { width: 34px; height: auto; flex-shrink: 0; }
.campus-courses span { flex: 1; min-width: 0; }
.campus-courses em { font-style: normal; color: var(--c-accent); font-size: 1.1rem; }

/* Per-location CTA */
.campus-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.campus-cta:hover { filter: brightness(0.94); transform: translateY(-1px); }

@media (max-width: 860px) {
  .campus-facts { grid-template-columns: repeat(2, 1fr); }
  .campus-why { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .campus-gallery { grid-template-columns: 1fr 1fr; }
  .campus-hero-photo { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Tokyo Seminar page
   ============================================================ */

/* Pink palette — remap the coral tokens to pink for this page only,
   so every accent (hero, buttons, header CTA, point cards, timeline,
   price, booking glow) picks up the pink theme. */
.seminar-page {
  --coral: var(--pink);
  --coral-deep: var(--pink-deep);
  --coral-soft: var(--pink-soft);
}
.seminar-page .btn--primary { box-shadow: 0 6px 16px rgba(233, 75, 124, 0.32); }
.seminar-page .booking::before { background: radial-gradient(circle, rgba(233, 75, 124, 0.22), transparent 65%); }
/* Group illustration sits on the same cream as the schedule section above it. */
.seminar-page .group-banner { background: var(--cream); }
/* Booking has no intro column here — center the Calendly widget on its own. */
.seminar-page .booking__layout { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }

/* Hero — pink gradient */
.seminar-hero {
  padding-block: clamp(32px, 5vw, 64px);
  background: linear-gradient(160deg, var(--pink-soft) 0%, color-mix(in srgb, var(--pink-soft) 50%, var(--cream)) 52%, var(--cream) 100%);
}
.seminar-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 880px) {
  .seminar-hero__inner { grid-template-columns: 1.05fr 1fr; }
}
.seminar-hero__logo {
  display: block;
  width: clamp(118px, 16vw, 168px);
  height: auto;
  margin: 0 auto var(--sp-4);
}
.seminar-hero__title {
  font-family: var(--font-en);
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.seminar-hero__subtitle {
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 0 var(--sp-6);
}
.seminar-hero__subtitle p { margin: 0; }
.seminar-hero__subtitle p + p { margin-top: var(--sp-4); }
.seminar-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.seminar-hero__photo {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg, 0 30px 60px -30px rgba(0, 0, 0, 0.35));
}
.seminar-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Section title em accent (scoped to seminar sections) */
.seminar-points .section-title em,
.seminar-schedule .section-title em { color: var(--coral); font-style: normal; }

/* 4 main points */
.seminar-points { padding-block: clamp(48px, 7vw, 88px); }
.seminar-points__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 600px) { .seminar-points__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .seminar-points__grid { grid-template-columns: repeat(4, 1fr); } }
.seminar-point {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--coral);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
}
.seminar-point__num {
  font-family: var(--font-en);
  font-size: 1.6rem;
  color: var(--coral);
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.seminar-point__title {
  font-family: var(--font-display-jp);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}
.seminar-point__desc {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}

/* Price */
.seminar-price { padding-block: 0 clamp(48px, 7vw, 88px); }
.seminar-price__card {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px);
}
@media (min-width: 780px) {
  .seminar-price__card { grid-template-columns: auto 1fr auto; }
}
.seminar-price__amount {
  font-family: var(--font-en);
  font-size: clamp(3.4rem, 9vw, 5rem);
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.seminar-price__notes {
  list-style: none; margin: 0; padding: 0 0 0 clamp(16px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 8px;
  font-size: var(--fs-sm);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.seminar-price__notes li { position: relative; padding-left: 22px; color: rgba(255, 255, 255, 0.85); }
.seminar-price__notes li::before {
  content: ""; position: absolute; left: 0; top: 0.4em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--coral); border-bottom: 2px solid var(--coral);
  transform: rotate(-45deg);
}
@media (max-width: 779px) {
  .seminar-price__notes { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.15); padding: var(--sp-4) 0 0; }
}
.seminar-price__cashback {
  margin: 12px 0 0;
  font-size: clamp(0.7rem, 3.2vw, 0.9rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--coral-soft);
  white-space: nowrap;
}
.seminar-price__cta { white-space: nowrap; }

/* Schedule — day timeline (keeps the original orange accent, not the page's pink) */
.seminar-schedule {
  --coral: #F25C28;
  --coral-deep: #D14617;
  --coral-soft: #FF9D7A;
  padding-block: clamp(48px, 7vw, 88px);
  background: var(--cream);
}
.seminar-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.seminar-timeline__item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: clamp(14px, 2vw, 22px);
}
.seminar-timeline__time {
  font-family: var(--font-en);
  font-size: 1.15rem;
  color: var(--coral);
  text-align: right;
  padding-top: 1px;
}
.seminar-timeline__body {
  position: relative;
  border-left: 2px solid var(--border);
  padding: 0 0 var(--sp-6) clamp(18px, 2.4vw, 30px);
}
.seminar-timeline__item:last-child .seminar-timeline__body { border-left-color: transparent; padding-bottom: 0; }
.seminar-timeline__body::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--coral);
}
.seminar-timeline__body h3 {
  font-family: var(--font-display-jp);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.seminar-timeline__body p { font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-soft); margin: 0; }
.seminar-timeline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seminar-timeline__dur { font-size: var(--fs-sm); color: var(--ink-soft); }
/* Break row — muted dashed pill so it's clearly a pause, not a session */
.seminar-timeline__item--break .seminar-timeline__time { color: var(--ink-muted); }
.seminar-timeline__item--break .seminar-timeline__body::before {
  border-color: var(--ink-muted);
  background: #fff;
}
.seminar-timeline__break {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--ink) 7%, #fff);
  border: 1px dashed color-mix(in srgb, var(--ink-muted) 55%, #fff);
  padding: 7px 16px;
  border-radius: var(--r-pill);
}

/* ---------- Print fallback ---------- */
@media print {
  .site-header, .announce, .voices__nav, .booking { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   Language selector (Google Translate–powered; JA is source)
   ============================================================ */
.lang-flag {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.lang-switch { position: relative; }
.lang-switch__caret {
  width: 11px;
  height: 11px;
  opacity: 0.55;
  transition: transform 0.2s ease;
}
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }

/* Header dropdown — desktop only (mobile uses the in-drawer row) */
.lang-switch--header { display: none; }
@media (min-width: 1024px) { .lang-switch--header { display: block; } }
.lang-switch--header .lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--ink);
  line-height: 0;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.lang-switch--header .lang-switch__btn:hover { border-color: var(--coral); }
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 14px 36px rgba(14, 14, 14, 0.16);
  z-index: 1200;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.lang-switch.is-open .lang-switch__menu { display: flex; }
.lang-switch__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.lang-switch__item:hover { background: var(--cream); }
.lang-switch__item.is-active {
  background: rgba(242, 92, 40, 0.1);
  color: var(--coral-deep);
  font-weight: 700;
}

/* Mobile nav-drawer row (light) — shown only inside the hamburger menu */
.lang-switch--nav {
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
@media (min-width: 1024px) { .lang-switch--nav { display: none; } }
.lang-switch--nav .lang-switch__label {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lang-switch--nav .lang-switch__row { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-switch--nav .lang-switch__item {
  width: auto;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--fs-sm);
}
.lang-switch--nav .lang-switch__item:hover { background: var(--cream); }
.lang-switch--nav .lang-switch__item.is-active {
  background: rgba(242, 92, 40, 0.1);
  border-color: var(--coral);
  color: var(--coral-deep);
  font-weight: 700;
}

/* Footer row */
.lang-switch--footer { margin-top: var(--sp-4); }
.lang-switch--footer .lang-switch__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.lang-switch--footer .lang-switch__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lang-switch--footer .lang-switch__item {
  width: auto;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  color: var(--cream);
  font-size: var(--fs-xs);
}
.lang-switch--footer .lang-flag {
  width: 18px;
  height: 12px;
}
.lang-switch--footer .lang-switch__item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
}
.lang-switch--footer .lang-switch__item.is-active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  font-weight: 700;
}

/* Keep Google Translate's own chrome hidden — JA stays the source.
   The top banner is an iframe.skiptranslate (class name is obfuscated and
   changes), so target that directly rather than a specific class. */
iframe.skiptranslate,
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }
#google_translate_element { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }