/* ============================================================
   TALK TALK 韓国語教室 — style_v4.css
   kippo-benchmark pastel aurora + split shell + teacher carousel.
   White base, pastel surfaces, rounded, EN-dominant centred headings.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: inherit; line-height: var(--lh-heading); }
:focus-visible { outline: 2px solid var(--t-teal); outline-offset: 2px; }

/* ---------- Tokens ---------- */
:root {
  /* base */
  --c-white: #FFFFFF;
  --c-text: #4D4D4D;
  --c-heading: #333333;
  --c-faint: #9B9B9B;
  --c-line: #EAE6E4;
  /* pastel surfaces */
  --p-rose:     #F5CBD6;
  --p-blue:     #C7DCEE;
  --p-lavender: #DAD1EC;
  --p-peach:    #FBDFC9;
  --p-green:    #DFE9B9;
  --p-teal:     #BFE3DD;
  /* text-safe (AA on white) */
  --t-rose:     #B14D68;
  --t-blue:     #3F6E96;
  --t-lavender: #6B5AA0;
  --t-peach:    #B06A2F;
  --t-green:    #56701E;
  --t-teal:     #2F6E64;
  /* CTA gradient */
  --grad-cta: linear-gradient(135deg, #D98A9E 0%, #B76E8B 100%);
  --grad-cta-hover: linear-gradient(135deg, #D07E93 0%, #A96280 100%);
  /* type */
  --sans: 'Zen Kaku Gothic New', sans-serif;
  --maru: 'Zen Maru Gothic', sans-serif;
  --hangul-deco: 'Apple SD Gothic Neo', 'Hiragino Sans', 'Zen Maru Gothic', sans-serif;
  --fs-hero: clamp(1.625rem, 1.1rem + 2.2vw, 2.25rem);
  --fs-catch: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
  --fs-h3: 1.125rem;
  --fs-body: 1.0625rem; --fs-sm: .9375rem; --fs-caption: .8125rem;
  --lh-body: 1.9; --lh-heading: 1.5;
  /* space / radius / shadow */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 96px;
  --sp-section: clamp(72px, 7vw + 32px, 120px);
  --r-img: 14px;
  --r-card: 16px;
  --r-pill: 999px;
  --shadow-soft: 0 10px 30px -12px rgba(180,140,160,.25);
  --ease-out: cubic-bezier(.22,1,.36,1); --dur: .6s;
  --container-prose: 720px;
}

/* ---------- Base typography ---------- */
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: transparent;
}

/* ---------- Aurora background ---------- */
.aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 8% 6%,   rgba(245,203,214,.55) 0%, transparent 70%),
    radial-gradient(38% 30% at 96% 12%, rgba(199,220,238,.50) 0%, transparent 70%),
    radial-gradient(40% 32% at 90% 78%, rgba(218,209,236,.45) 0%, transparent 70%),
    radial-gradient(36% 30% at 6% 88%,  rgba(223,233,185,.40) 0%, transparent 70%),
    radial-gradient(30% 26% at 50% 45%, rgba(251,223,201,.30) 0%, transparent 70%),
    #FFFFFF;
}

/* ---------- Layout ---------- */
:root { --container-pad: clamp(20px, 5vw, 48px); }
.container { max-width: 760px; margin-inline: auto; padding-inline: var(--container-pad); }
.container-prose { max-width: var(--container-prose); }
[hidden] { display: none !important; }
.section { padding-block: var(--sp-section); position: relative; overflow: clip; }
.section--paper { background: transparent; }
.section--stone { background: rgba(255,255,255,.6); }

/* Split shell (home only) — base 1-column */
.lp-panel { display: none; }
.lp-home main .container,
.lp-home .footer .container { max-width: 560px; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 16px 28px;
  border-radius: 10px;
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn small { font-weight: 400; font-size: var(--fs-caption); opacity: .9; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background-image: var(--grad-cta); color: var(--c-white); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background-image: var(--grad-cta-hover); transform: translateY(-1px); }
.btn-secondary { background: var(--c-white); color: var(--t-blue); border: 1.5px solid var(--t-blue); }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
/* legacy on-dark buttons now live on light pastel surfaces */
.btn-on-dark { background: var(--c-white); color: var(--t-blue); border: 1.5px solid var(--t-blue); }
.btn-on-dark:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }

/* CTA + ribbon */
.cta-block { position: relative; display: flex; margin-top: 16px; width: 100%; }
.cta-block .btn { width: 100%; }
.lp-panel .cta-block { max-width: 400px; }
.contact-channels .btn { width: 100%; }
.btn-ribbon {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -55%);
  background: var(--c-white);
  color: var(--t-rose);
  border: 1px solid rgba(177,77,104,.3);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 700;
  padding: 4px 16px; white-space: nowrap; z-index: 2;
  box-shadow: var(--shadow-soft);
}

/* ---------- Tag / chip ---------- */
.tag {
  display: inline-block;
  background: var(--p-green);
  color: var(--t-green);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 4px 14px;
}

/* ---------- Card ---------- */
.card {
  background: rgba(255,255,255,.85);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}

/* ---------- Circle badge ---------- */
.badge-circle {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  width: clamp(88px, 8vw, 116px); height: clamp(88px, 8vw, 116px);
  border-radius: 50%;
  color: var(--c-heading);
  font-size: var(--fs-caption); font-weight: 700; line-height: 1.4;
  font-family: var(--maru);
  padding: 8px;
}
.badge-rose     { background: var(--p-rose); }
.badge-blue     { background: var(--p-blue); }
.badge-lavender { background: var(--p-lavender); }
.badge-green    { background: var(--p-green); }
.badge-peach    { background: var(--p-peach); }
.badge-teal     { background: var(--p-teal); }

/* ---------- Section header (centred, EN dominant) ---------- */
.section-header {
  position: relative; text-align: center;
  margin-bottom: var(--sp-5);
  padding-top: clamp(2.4rem, 7vw, 4.5rem);
}
.section-hangul {
  position: absolute; top: -.1em; left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--hangul-deco);
  font-weight: 200;
  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 1;
  opacity: .16;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  color: var(--p-lavender);
}
.section-en, .section-ja, .section-sub, .contact-catch { position: relative; z-index: 1; }
.section-en {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-heading);
}
.section-ja {
  font-family: var(--maru);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--c-text);
  margin-top: var(--sp-2);
}
.section-sub {
  font-size: var(--fs-caption);
  color: var(--c-faint);
  margin-top: var(--sp-1);
  letter-spacing: .04em;
}
.section-lead {
  font-size: var(--fs-body);
  color: var(--c-text);
  max-width: var(--container-prose);
  margin: var(--sp-3) auto 0;
  text-align: center;
}
.section-catch, .contact-catch, .cta-band .cta-catch { text-wrap: balance; }

/* per-section decorative hangul colour rotation */
#foryou .section-hangul     { color: var(--p-rose); }
#about .section-hangul      { color: var(--p-blue); }
#feature .section-hangul    { color: var(--p-lavender); }
#method .section-hangul     { color: var(--p-peach); }
#curriculum .section-hangul { color: var(--p-green); }
#teacher .section-hangul    { color: var(--p-teal); }
#price .section-hangul      { color: var(--p-rose); }
#flow .section-hangul       { color: var(--p-blue); }
#faq .section-hangul        { color: var(--p-lavender); }
#access .section-hangul     { color: var(--p-peach); }

/* ---------- Diary paper motif ---------- */
.diary-paper {
  position: relative;
  background-color: rgba(255,255,255,.85);
  background-image:
    repeating-linear-gradient(transparent, transparent 31px, #E9EEF5 31px, #E9EEF5 32px);
}
.diary-paper::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 32px;
  width: 1px;
  background: var(--p-rose);
}
.method__bg {
  background-image:
    repeating-linear-gradient(transparent, transparent 31px, rgba(233,238,245,.7) 31px, rgba(233,238,245,.7) 32px);
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  max-width: none;
  padding-inline: clamp(20px, 5vw, 48px);
}
.header-logo img { height: 34px; width: auto; }
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--c-heading);
}
.hamburger svg { width: 26px; height: 26px; }

/* Off-canvas nav */
.nav-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(60,50,55,.35);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease-out), visibility .3s var(--ease-out);
}
.nav-overlay.open { opacity: 1; visibility: visible; }
.mobile-nav {
  position: fixed; top: 0; right: 0; z-index: 120;
  width: min(320px, 84vw); height: 100dvh;
  background: var(--c-white);
  border-left: 1px solid var(--c-line);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .35s var(--ease-out), visibility .35s var(--ease-out);
}
.mobile-nav.open { transform: translateX(0); visibility: visible; }
.mobile-nav a {
  font-family: var(--maru); font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-heading);
}
.mobile-nav .btn { margin-top: var(--sp-3); }
.mobile-nav-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-heading);
}
.mobile-nav-close svg { width: 24px; height: 24px; }

/* ---------- LP panel (split shell left column) ---------- */
.panel-hangul {
  font-family: var(--hangul-deco);
  font-weight: 200;
  font-size: clamp(9rem, 13vw, 13rem);
  line-height: .9;
  color: var(--t-rose);
  opacity: .12;
  user-select: none; pointer-events: none;
  display: block;
  /* flexの高さを消費させない（パネルが狭い時にキャッチを圧迫して上端が切れるため） */
  position: absolute;
  top: clamp(24px, 6vh, 72px);
  left: clamp(24px, 4vw, 72px);
  white-space: nowrap;
}
.panel-catch {
  font-family: var(--maru); font-weight: 700;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 1.5;
  color: var(--c-heading);
}
.panel-catch em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--p-rose) 62%);
}
.panel-sub { color: var(--c-text); font-size: var(--fs-body); max-width: 32em; }
.panel-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.panel-cta { display: flex; }

/* ---------- Hero ---------- */
/* キービジュアル先行: 写真がヘッダー直下からカラム幅いっぱいに広がる */
.hero { padding-block: 0 var(--sp-section); }
.hero-grid { display: grid; gap: var(--sp-4); }
.hero-eyebrow { color: var(--t-teal); font-weight: 700; font-size: var(--fs-caption); letter-spacing: .18em; }
.hero h1 {
  font-family: var(--maru); font-weight: 700;
  font-size: var(--fs-hero); line-height: 1.55;
  color: var(--c-heading);
  margin-top: var(--sp-3);
}
.hero h1 .mark {
  background: linear-gradient(transparent 62%, var(--p-rose) 62%);
}
.hero-lead { color: var(--c-text); margin-top: var(--sp-3); }
.hero-badge {
  margin-top: var(--sp-3);
  border-radius: var(--r-card);
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow-soft);
  padding: 14px 18px;
  font-size: var(--fs-sm);
  color: var(--c-heading);
}
.hero-badge strong { color: var(--t-rose); font-family: var(--maru); font-weight: 700; }
.hero-cta { margin-top: var(--sp-4); }
.hero-cta-note { font-size: var(--fs-sm); color: var(--c-text); margin-top: var(--sp-3); }
.hero-cta-note a { color: var(--t-teal); text-decoration: underline; text-underline-offset: 3px; }
.hero-figure {
  position: relative;
  /* カラム端まで全幅ブリード */
  margin-inline: calc(var(--container-pad) * -1);
}
.hero-figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover; object-position: center top;
  border-radius: 0 0 var(--r-img) var(--r-img);
}
.hero-photo-badge {
  position: absolute; right: 16px; bottom: -18px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--grad-cta); color: var(--c-white);
  display: grid; place-content: center; text-align: center;
  font-size: var(--fs-caption); font-weight: 700; line-height: 1.5;
  transform: rotate(6deg);
  box-shadow: var(--shadow-soft);
}
.hero-photo-badge strong { font-family: var(--maru); font-size: 1.25rem; display: block; }
.hero-sticker {
  position: absolute; left: 16px; bottom: 24px;
  background: var(--p-green);
  color: var(--t-green);
  font-family: var(--maru); font-weight: 700;
  font-size: 1.5rem;
  padding: 6px 20px;
  border-radius: var(--r-pill);
  transform: rotate(-6deg);
  box-shadow: var(--shadow-soft);
  user-select: none;
}

/* proof strip */
.proof-strip {
  margin-top: var(--sp-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
}
.proof-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2);
  font-size: var(--fs-sm);
  background: rgba(255,255,255,.85);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
.proof-item svg { width: 22px; height: 22px; color: var(--t-teal); flex: none; }

/* ---------- FOR YOU ---------- */
.foryou-grid { display: grid; gap: var(--sp-3); }
.foryou-item {
  background: rgba(255,255,255,.85);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: var(--sp-4);
}
.foryou-num { font-family: var(--maru); font-weight: 700; font-size: 1.75rem; color: var(--t-rose); }
.foryou-item:nth-child(2) .foryou-num { color: var(--t-blue); }
.foryou-item:nth-child(3) .foryou-num { color: var(--t-lavender); }
.foryou-item h3 { font-family: var(--maru); font-weight: 700; font-size: var(--fs-h3); color: var(--c-heading); margin-top: var(--sp-2); }
.foryou-item p { color: var(--c-text); font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* ---------- ABOUT ---------- */
.about-grid { display: grid; gap: var(--sp-4); }
.about-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-img); }
.about-grid > .reveal {
  background: rgba(255,255,255,.85);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: var(--sp-4);
}
.def-list { margin-top: 0; }
.def-list div { display: grid; grid-template-columns: 6em 1fr; gap: var(--sp-2); padding: 12px 0; border-top: 1px solid var(--c-line); }
.def-list div:first-child { border-top: 0; }
.def-list dt { font-weight: 700; color: var(--c-heading); font-size: var(--fs-sm); }
.def-list dd { font-size: var(--fs-sm); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-4); }
.chip-row .tag:nth-child(1) { background: var(--p-rose); color: var(--t-rose); }
.chip-row .tag:nth-child(2) { background: var(--p-blue); color: var(--t-blue); }
.chip-row .tag:nth-child(3) { background: var(--p-lavender); color: var(--t-lavender); }
.chip-row .tag:nth-child(4) { background: var(--p-peach); color: var(--t-peach); }

/* ---------- FEATURE ---------- */
.feature-list { display: flex; flex-direction: column; gap: var(--sp-5); }
.feature-row {
  display: grid; gap: var(--sp-3); align-items: center;
  background: rgba(255,255,255,.85);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  padding: 0 0 var(--sp-4);
}
.feature-figure { position: relative; }
.feature-figure img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 0;
}
.feature-row > div:last-child { padding: 0 var(--sp-4); }
.feature-point {
  display: inline-block;
  font-family: var(--maru); font-weight: 700;
  color: var(--t-lavender); background: var(--p-lavender);
  font-size: var(--fs-caption); letter-spacing: .1em;
  padding: 3px 14px; border-radius: var(--r-pill);
}
.feature-row h3 { font-family: var(--maru); font-weight: 700; font-size: var(--fs-h3); color: var(--c-heading); margin-top: var(--sp-2); }
.feature-row p { color: var(--c-text); margin-top: var(--sp-2); font-size: var(--fs-sm); }

/* ---------- METHOD ---------- */
.method-cols { display: block; }
.method-timeline { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-4); }
.method-step { position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); border-left: 1px solid var(--p-rose); }
.method-step::before {
  content: attr(data-step);
  position: absolute; left: 0; top: var(--sp-3);
  transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--p-green);
  color: var(--t-green); font-family: var(--maru); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm);
}
.method-step h4 { font-family: var(--maru); font-weight: 700; font-size: var(--fs-h3); color: var(--c-heading); }
.method-step p { color: var(--c-text); font-size: var(--fs-sm); margin-top: 6px; }

.diary-card {
  margin-top: var(--sp-5);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 56px;
  max-width: 560px;
}
.diary-tab {
  display: inline-block;
  background: var(--p-green); color: var(--t-green);
  font-family: var(--maru); font-weight: 700;
  font-size: var(--fs-sm); padding: 3px 14px; border-radius: var(--r-pill);
  margin-bottom: var(--sp-3);
}
.diary-ko { font-family: 'Apple SD Gothic Neo', sans-serif; font-size: 1.0625rem; line-height: 2; color: var(--c-heading); }
.diary-ja { color: var(--c-text); font-size: var(--fs-sm); margin-top: var(--sp-2); line-height: 2; }
.diary-note { font-size: var(--fs-sm); color: var(--t-green); margin-top: var(--sp-3); }
.text-link { color: var(--t-teal); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.method-aside { margin-top: var(--sp-4); }

/* ---------- CURRICULUM ---------- */
.level-grid { display: grid; gap: var(--sp-3); }
.level-card { padding: var(--sp-4); }
.level-tag {
  display: inline-block;
  font-family: var(--maru); font-weight: 700;
  color: var(--t-rose); background: var(--p-rose);
  padding: 2px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm);
}
.level-card:nth-child(2) .level-tag { color: var(--t-blue); background: var(--p-blue); }
.level-card:nth-child(3) .level-tag { color: var(--t-lavender); background: var(--p-lavender); }
.level-card:nth-child(4) .level-tag { color: var(--t-green); background: var(--p-green); }
.level-card h3 { font-family: var(--maru); font-weight: 700; font-size: var(--fs-h3); color: var(--c-heading); margin-top: var(--sp-2); }
.level-card .level-span { font-size: var(--fs-sm); color: var(--c-faint); margin-top: 4px; }
.level-card p { font-size: var(--fs-sm); color: var(--c-text); margin-top: var(--sp-2); }

/* ---------- TEACHER carousel ---------- */
.teacher-stage {
  position: relative;
  --card-w: min(85%, 340px);
  margin-top: var(--sp-5);
}
.teacher-carousel {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--sp-2);
  padding-inline: calc((100% - var(--card-w)) / 2);
  scrollbar-width: none;
}
.teacher-carousel::-webkit-scrollbar { display: none; }
.teacher-card {
  width: var(--card-w); flex: 0 0 auto;
  scroll-snap-align: center;
  background: rgba(255,255,255,.9);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
}
.teacher-card img {
  width: min(60%, 200px);
  aspect-ratio: 1; object-fit: cover; object-position: center top;
  border-radius: 50%;
  margin-inline: auto;
}
.teacher-card .teacher-name,
.teacher-card h3 { font-family: var(--maru); font-weight: 700; font-size: var(--fs-h3); color: var(--c-heading); margin-top: var(--sp-3); }
.teacher-card .tag { margin-top: var(--sp-2); }
.teacher-quote { font-size: var(--fs-sm); color: var(--c-text); margin-top: var(--sp-2); }
.teacher-fav { font-size: var(--fs-caption); color: var(--c-faint); margin-top: var(--sp-2); }
.teacher-fav b { color: var(--t-teal); font-weight: 700; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--p-rose); color: var(--t-rose);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
  z-index: 3;
  transition: transform .2s var(--ease-out);
}
.carousel-btn:hover { transform: translateY(-50%) scale(1.06); }
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-btn.prev { left: -6px; }
.carousel-btn.next { right: -6px; }

/* ---------- PRICE ---------- */
.price-grid { display: grid; gap: var(--sp-4); }
.price-card { padding: 0; overflow: hidden; }
.price-card h3 {
  font-family: var(--maru); font-weight: 700; font-size: var(--fs-h3);
  color: var(--t-rose); background: var(--p-rose);
  padding: var(--sp-3) var(--sp-4);
}
.price-card:has(.group-badge) h3 { color: var(--t-blue); background: var(--p-blue); }
.price-card h3 small { display: block; font-size: var(--fs-sm); color: inherit; opacity: .85; font-weight: 400; margin-top: 4px; }
.price-card > *:not(h3) { margin-inline: var(--sp-4); }
.price-table { width: calc(100% - var(--sp-4) * 2); margin-top: var(--sp-3); border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; padding: 14px 4px; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.price-table thead th { color: var(--c-faint); font-weight: 700; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-num { font-family: var(--maru); font-weight: 700; font-size: 1.5rem; color: var(--c-heading); }
.price-num small { font-size: var(--fs-sm); font-weight: 400; }
.price-row-featured { background: var(--p-peach); }
.price-plan-badge { display: inline-block; font-size: var(--fs-caption); color: var(--t-peach); font-weight: 700; margin-left: 6px; }
.price-pack { margin-top: var(--sp-3); padding: var(--sp-3) 0 var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.price-pack .price-num { font-size: 1.25rem; }
.group-badge { display: inline-block; background: var(--p-blue); color: var(--t-blue); font-size: var(--fs-caption); font-weight: 700; padding: 3px 12px; border-radius: var(--r-pill); margin: var(--sp-3) 0 0; }
.price-card:has(.group-badge) .group-badge { margin-top: var(--sp-3); }
.offer-block { margin-top: var(--sp-4); padding: var(--sp-4); background: var(--p-peach); border-radius: var(--r-card); }
.offer-label { font-weight: 700; color: var(--t-peach); font-size: var(--fs-sm); }
.offer-block p { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-heading); }
.offer-block strong { color: var(--t-rose); font-family: var(--maru); font-weight: 700; }
.price-note { font-size: var(--fs-caption); color: var(--c-faint); margin-top: var(--sp-3); }

/* ---------- FLOW ---------- */
.flow-grid { display: grid; gap: var(--sp-3); }
.flow-step {
  position: relative; padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,.85);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
.flow-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--p-rose); color: var(--t-rose);
  font-family: var(--maru); font-weight: 700; font-size: 1.125rem;
}
.flow-step:nth-child(2) .flow-num { background: var(--p-blue); color: var(--t-blue); }
.flow-step:nth-child(3) .flow-num { background: var(--p-lavender); color: var(--t-lavender); }
.flow-step:nth-child(4) .flow-num { background: var(--p-green); color: var(--t-green); }
.flow-step h4 { font-family: var(--maru); font-weight: 700; font-size: var(--fs-h3); color: var(--c-heading); margin-top: var(--sp-2); }
.flow-step p { color: var(--c-text); font-size: var(--fs-sm); margin-top: 6px; }
.flow-reassurance { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--t-teal); text-align: center; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-item {
  background: rgba(255,255,255,.85);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: 0 var(--sp-4);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) 0;
  font-family: var(--maru); font-weight: 700; font-size: var(--fs-body);
  color: var(--c-heading);
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex: none; width: 22px; height: 22px; color: var(--t-rose); transition: transform .3s var(--ease-out); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { color: var(--c-text); font-size: var(--fs-sm); padding-bottom: var(--sp-3); }

/* ---------- ACCESS ---------- */
.access-grid { display: grid; gap: var(--sp-4); }
.access-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-img); }
.access-grid > .reveal {
  background: rgba(255,255,255,.85);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: var(--sp-4);
}
.access-actions { margin-top: var(--sp-4); }

/* ---------- CONTACT ---------- */
.contact {
  background: linear-gradient(135deg, rgba(245,203,214,.55) 0%, rgba(218,209,236,.55) 100%);
  color: var(--c-heading);
  padding-block: var(--sp-section);
  position: relative; overflow: clip;
}
.contact .section-hangul {
  color: var(--t-lavender);
  opacity: .18;
  font-size: clamp(2.4rem, 2rem + 5vw, 6rem);
  white-space: nowrap;
}
.contact-catch {
  font-family: var(--maru); font-weight: 700;
  font-size: var(--fs-catch); color: var(--c-heading);
  margin-top: var(--sp-2);
}
.contact-sub { color: var(--c-text); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.contact-channels { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); align-items: stretch; }
.contact-note { color: var(--c-text); font-size: var(--fs-sm); margin-top: var(--sp-4); text-align: center; }

/* form */
.form-wrap { margin-top: var(--sp-5); background: var(--c-white); color: var(--c-text); border-radius: var(--r-card); box-shadow: var(--shadow-soft); padding: var(--sp-4); max-width: 560px; margin-inline: auto; }
.form-field { margin-bottom: var(--sp-3); }
.form-field label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 6px; color: var(--c-heading); }
.form-field .req { color: var(--t-rose); font-size: var(--fs-caption); margin-left: 4px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-white);
  font-size: var(--fs-body);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { font-size: var(--fs-caption); color: var(--c-faint); margin-top: var(--sp-2); }
.form-privacy a { color: var(--t-teal); text-decoration: underline; }
.form-error { color: var(--t-rose); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.form-done { font-family: var(--maru); font-weight: 700; }

/* ---------- Footer ---------- */
.footer { background: rgba(255,255,255,.6); border-top: 1px solid var(--c-line); color: var(--c-text); padding-block: var(--sp-5); }
.footer-logo { height: 30px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.footer-nav a:hover { color: var(--c-heading); }
.footer-line { margin-top: var(--sp-4); font-size: var(--fs-sm); }
.footer-line .hangul { font-family: var(--maru); font-weight: 700; font-size: 1.125rem; color: var(--t-teal); display: inline; }
.footer-line span { color: var(--c-faint); margin-left: var(--sp-2); }
.footer-copy { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--c-faint); }

/* ---------- Sticky bottom CTA (mobile) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft);
  padding: 10px clamp(16px, 5vw, 24px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .35s var(--ease-out);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }

/* ---------- Downstream page components (max 760, centred) ---------- */
.breadcrumb { font-size: var(--fs-sm); color: var(--c-faint); padding-top: var(--sp-4); }
.breadcrumb a { color: var(--c-text); }
.breadcrumb a:hover { color: var(--c-heading); }
.breadcrumb span { margin: 0 6px; }
.page-header { padding-block: var(--sp-5) var(--sp-4); position: relative; overflow: clip; text-align: center; }
.page-header .eyebrow, .page-header .section-en { position: relative; z-index: 1; }
.page-header h1 { font-family: var(--maru); font-weight: 700; font-size: var(--fs-hero); color: var(--c-heading); margin-top: var(--sp-2); position: relative; z-index: 1; }
.page-header .page-hangul {
  font-family: var(--hangul-deco); font-weight: 200; color: var(--p-lavender);
  font-size: clamp(4rem, 12vw, 7rem); opacity: .3; user-select: none; line-height: 1;
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;
}
.page-header .page-sub { color: var(--c-text); margin-top: var(--sp-3); position: relative; z-index: 1; }
.page-header .eyebrow { color: var(--t-teal); font-weight: 700; font-size: var(--fs-caption); letter-spacing: .22em; text-transform: uppercase; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--sp-4); background: rgba(255,255,255,.85); border-radius: var(--r-card); box-shadow: var(--shadow-soft); overflow: hidden; }
.data-table th, .data-table td { text-align: left; padding: 14px 16px; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); vertical-align: top; }
.data-table thead th { color: var(--t-lavender); font-weight: 700; background: var(--p-lavender); border-top: 0; }
.data-table caption { text-align: left; color: var(--c-faint); font-size: var(--fs-caption); margin-top: var(--sp-2); caption-side: bottom; }

details.fold { background: rgba(255,255,255,.85); border-radius: var(--r-card); box-shadow: var(--shadow-soft); margin-top: var(--sp-3); }
details.fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--maru); font-weight: 700; color: var(--c-heading); cursor: pointer; list-style: none;
}
details.fold summary::-webkit-details-marker { display: none; }
details.fold .faq-icon { transition: transform .3s var(--ease-out); }
details.fold[open] .faq-icon { transform: rotate(45deg); }
details.fold .fold-body { padding: 0 var(--sp-4) var(--sp-4); }

.cta-band {
  background: linear-gradient(135deg, rgba(245,203,214,.55) 0%, rgba(218,209,236,.55) 100%);
  color: var(--c-heading);
  padding-block: var(--sp-section); overflow: clip;
}
.cta-band .cta-catch { font-family: var(--maru); font-weight: 700; font-size: var(--fs-catch); color: var(--c-heading); text-align: center; }
.cta-band .contact-channels { margin-top: var(--sp-4); }
.cta-band .form-link { color: var(--t-teal); text-decoration: underline; font-size: var(--fs-sm); }

/* ---------- Reveal / motion ---------- */
.reveal, .reveal-img {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--stagger,0) * 90ms);
}
.reveal.visible, .reveal-img.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Split shell — 1120px+ (home only)
   ============================================================ */
@media (min-width: 1120px) {
  .lp-home {
    /* カラムの右余白: 残余スペースの約13%。1440pxで約125px */
    --col-gutter: clamp(24px, calc((100vw - 480px) * .13), 150px);
  }
  .lp-home .lp-panel {
    display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4);
    position: fixed; top: 64px; left: 0; right: calc(480px + var(--col-gutter)); bottom: 0;
    padding: var(--sp-5) clamp(40px, 6vw, 96px);
    z-index: 40;
    overflow: clip;
  }
  .lp-home main, .lp-home .footer { width: 480px; margin-left: auto; margin-right: var(--col-gutter); }
  .lp-home main {
    background: rgba(255,255,255,.72);
    box-shadow: 0 24px 56px -24px rgba(160,130,150,.35);
  }
  .lp-home .sticky-cta { display: none; }
}