/* =========================================================
   GakuMate landing page — built from Figma "LP/Desktop-1280"
   ========================================================= */

:root {
  /* Squirrel */
  --sq50: #fff4e8; --sq300: #ffab73; --sq400: #ff8c4a; --sq500: #ff7733;
  --sq600: #c24e12; --sq700: #a05a2c; --sq800: #8a3206; --sq900: #612702;
  /* Orange */
  --or100: #ffeed5; --or300: #ffcb80; --or500: #ffa82b; --or600: #ff9600;
  --or700: #d98000; --or800: #b36900; --or900: #8c5300; --or1000: #663c00;
  /* Yellow */
  --ye100: #fff6d5; --ye200: #ffedaa; --ye500: #ffd12b; --ye700: #d9aa00;
  --ye800: #b38c00; --ye900: #8c6e00;
  /* Neutral */
  --n0: #fff; --n50: #faf7f4; --n100: #f4efea; --n200: #e8e0d8; --n300: #d4c9be;
  --n400: #a99c90; --n500: #7c6f64; --n700: #40382f; --n800: #2a2420; --n900: #1a1512;
  --white-grey: #fcfcfb;
  --tree: #6b3610;

  --ff: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ff-lat: "Wix Madefor Display", "Noto Sans JP", sans-serif;
  --ff-maru: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --ff-nun: "Nunito", "Noto Sans JP", sans-serif;

  /* horizontal gutters of the page (2 × side padding + 16px safety); used to fit titles */
  --gx: 176px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
  margin: 0;
  background: var(--sq50);
  font-family: var(--ff);
  color: var(--n900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Japanese line breaking: only at phrase boundaries (<wbr> in the markup) and after punctuation,
     kinsoku-strict, and never an orphaned tail. */
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: none; }
p, h1, h2, figure, blockquote { margin: 0; }
p, blockquote, figcaption { text-wrap: pretty; }
a { color: inherit; }

.in { max-width: 1280px; margin: 0 auto; }
.ins { position: absolute; display: block; }
.ins > img { display: block; width: 100%; height: 100%; }
.ta-c { text-align: center; }

/* ---- colour helpers ---- */
.c-or900 { color: var(--or900); } .c-or700 { color: var(--or700); }
.c-sq900 { color: var(--sq900); } .c-sq700 { color: var(--sq700); }
.c-ye900 { color: var(--ye900); } .c-ye700 { color: var(--ye700); }
.c-n800 { color: var(--n800); } .c-n700 { color: var(--n700); }
.c-white { color: #fff; }

/* ---- type ---------------------------------------------------------------
   Titles & subtitles must never wrap mid-phrase. The only soft-wrap points are
   the <wbr> placed right after 、。！？ in the markup, so a line can only end on
   punctuation. To guarantee the longest unbreakable run always fits, the size is
   the design size capped by  (viewport − gutters) / --n,  where --n is that run's
   width in em (set per element in index.html). On desktop the cap never bites. */
.h2, .lead, .lead-lg, .pain-close, .cta-title, .hero-title, .hero-sub, .legal-title {
  font-size: min(var(--fs), calc((100vw - var(--gx)) / var(--n, 12)));
  overflow-wrap: normal;
  text-wrap: balance;
}
.h2 { --fs: 48px; font-weight: 700; line-height: 1.2917; width: 100%; }
.lead { --fs: 20px; font-weight: 500; line-height: 1.7; }
.lead-lg { --fs: 24px; font-weight: 500; line-height: 1.5; text-align: center; width: 100%; }
.lead-lg b { font-weight: 700; }
.lat { font-family: var(--ff-lat); font-weight: 400; line-height: 0; }
.lat-m { font-weight: 500; }
.lat-x { font-weight: 800; }
.nun { font-family: var(--ff-nun); font-weight: 900; }

.sec-head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; text-align: center; }

/* Figma "inside" strokes that don't affect layout */
.stroked { position: relative; }
.stroked::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: var(--sw) solid var(--sc); border-radius: inherit;
}

/* =========================================================
   NAV
   ========================================================= */
.brandbar { background: var(--sq900); padding: 20px 0; }
.brand { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.brand-name { font: 900 36px/normal var(--ff-maru); color: #fff; width: 160px; white-space: nowrap; }
.brand-name--cta { width: auto; }

.logo-mark { position: relative; width: 100px; height: 93.375px; flex: none; display: block; }
.lm-icon { position: absolute; left: 4.74px; top: 0; width: 93.321px; height: 93.321px; display: block; }
.lm-squirrel { position: absolute; left: 0; top: 0; width: 95.322px; height: 87.553px; display: flex; align-items: center; justify-content: center; }
.lm-sq { position: relative; display: block; flex: none; width: 80.152px; height: 69.165px; transform: rotate(-15deg); }
.lm-acorn { position: absolute; left: 54.41px; top: 46.39px; width: 45.593px; height: 46.988px; display: flex; align-items: center; justify-content: center; }
.lm-ac { position: relative; display: block; flex: none; width: 29.163px; height: 36.848px; transform: rotate(37.63deg); }

.links {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: center; gap: 40px;
  padding: 20px 0; background: var(--sq400);
  box-shadow: inset 0 -1px 0 var(--sq600);
  transition: box-shadow .3s ease;
}
.links.is-stuck { box-shadow: inset 0 -1px 0 var(--sq600), 0 8px 20px -10px rgba(97, 39, 2, .45); }
.links a {
  position: relative; font: 700 20px/30px var(--ff); color: #fff; text-decoration: none; white-space: nowrap;
}
.links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px;
  background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.links a:hover::after, .links a.is-active::after { transform: scaleX(1); }

/* =========================================================
   HERO
   ========================================================= */
.hero { background: var(--sq50); }
.hero-in { display: flex; align-items: center; gap: 48px; padding: 80px; }
.hero-copy { flex: 1 1 0; min-width: 0; height: 804px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-main { height: 710px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.hero-title { --fs: 56px; font-weight: 700; line-height: 1.3; color: #000; }
.hero-title span { display: block; }
.hero-sub { --fs: 20px; font-weight: 500; line-height: 1.7; color: var(--n500); }
.hero-note { font: 400 20px/1.5 var(--ff); color: var(--or700); }
.hero-note p + p { margin-top: 10px; }

.stores { display: flex; gap: 24px; align-items: flex-start; }
.badge { position: relative; display: block; flex: none; width: 220px; height: 80.844px; overflow: hidden; }
.b-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.b-text { position: absolute; top: 60%; color: #fff; white-space: nowrap; font: 400 16.169px/normal var(--ff); }
.badge--apple .b-text { left: 31.31%; }
.badge--google .b-text { left: 29.55%; }
.b-logo { position: absolute; left: 20.15px; top: 17.62px; display: block; }
.b-logo > img { display: block; width: 100%; height: 100%; }

/* ---- iPhone mock ---- */
.phone-wrap { position: relative; flex: none; }
.phone-wrap--hero { width: 402px; height: 816.369px; filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .3)); }
.phone-wrap--step { width: 300px; height: 609.231px; filter: drop-shadow(0 7.463px 11.194px rgba(0, 0, 0, .3)); }
.tilt { position: relative; width: 100%; height: 100%; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out; }
.par { position: relative; width: 100%; height: 100%; will-change: transform; }
.phone { position: absolute; left: 0; top: 0; width: 402px; height: 816.369px; }
.phone-wrap--step .phone { transform: scale(.74627); transform-origin: 0 0; }

.pbtn { position: absolute; display: block; width: 3.092px; border-radius: .62px 0 0 .62px;
  background: linear-gradient(#2d2e2a, #dedede 6.8px, #dedede calc(100% - 6.8px), #2d2e2a); }
.pb1 { left: 0; top: 166.37px; height: 29.995px; }
.pb2 { left: 0; top: 224.81px; height: 62.465px; }
.pb3 { left: 0; top: 303.36px; height: 62.465px; }
.pb4 { left: 398.91px; top: 246.77px; height: 97.098px; border-radius: 0 .62px .62px 0; }

.phone-body { position: absolute; left: 3.09px; top: 0; width: 395.815px; height: 816.988px; border-radius: 64.938px; background: #000; overflow: hidden; }
.pf { position: absolute; display: block; }
.pf1 { inset: 1.55px; border: 4.02px solid #f7f7f7; border-radius: 63.392px; }
.pf2 { inset: 0; border: 1.546px solid #9d9d9d; border-radius: 64.938px; }
.pf3 { inset: 1.86px 1.55px 1.55px 1.55px; border: 1.546px solid #dfdedb; border-radius: 63.702px; filter: blur(.464px); }
.pf4 { inset: 7.11px; border: .618px solid #646464; border-radius: 57.826px; opacity: .8; filter: blur(.309px); }
.phone-screen { position: absolute; inset: 17.01px; background: #fff; border-radius: 51.023px; overflow: hidden; }
.shot { position: absolute; left: 50%; top: 50%; width: 361.8px; height: var(--h); object-fit: cover;
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); }

.phone-cam { position: absolute; left: 50%; top: calc(50% - 362.42px); width: 114.415px; height: 33.397px; transform: translate(-50%, -50%); border-radius: 99px; background: #000; overflow: hidden; }
.lens1 { position: absolute; left: 83.49px; top: 8.66px; width: 16.08px; height: 16.08px; border-radius: 50%; background: #121212; border: .618px solid #0e0e0e; opacity: .75; }
.lens2 { position: absolute; left: 5.57px; top: 5.57px; width: 22.265px; height: 22.265px; border-radius: 50%; background: #141414; opacity: .4; }
.lens2 i { position: absolute; left: 3.9px; top: 3.9px; width: 14.472px; height: 14.472px; border-radius: 50%; background: #000; }

/* splash screen (hero phone) */
.splash { position: absolute; left: 0; top: 0; width: 361.8px; height: 782.972px; background: var(--sq400); overflow: hidden; }
.sp-bubble { position: absolute; left: 222.96px; top: 99.12px; width: 122.444px; height: 69.01px; display: block; }
.sp-bubble-text { position: absolute; left: calc(50% + 104.73px); top: 131.87px; transform: translate(-50%, -50%) rotate(-5deg);
  font: 900 15.421px/1.5 var(--ff-maru); color: #fff; white-space: nowrap; text-align: center; }
.sp-logo { position: absolute; left: 82.33px; top: 157.91px; width: 197.462px; height: 197.462px; display: block; }
.sp-title { position: absolute; left: calc(50% + .21px); top: 384.95px; transform: translate(-50%, -50%);
  font: 900 45.024px/27px var(--ff-maru); letter-spacing: .6432px; color: #fff; white-space: nowrap; text-align: center; }
.sp-tag { position: absolute; left: calc(50% + .47px); top: 461.74px; transform: translate(-50%, -50%);
  font: 600 24.738px/1.5 var(--ff-lat); color: #fff; white-space: nowrap; text-align: center; }

/* =========================================================
   PAIN
   ========================================================= */
.pain { background: var(--or100); }
.pain-in { display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 160px 80px; }
.pain-stories { display: flex; align-items: center; gap: 32px; width: 100%; }
.persona-a { flex: 1 1 0; min-width: 0; height: 379px; display: flex; align-items: center; gap: 20px; }
.persona-a .bubbles { flex: 1 1 0; min-width: 0; max-width: 360px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 0; }
.persona-b { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 31px; }
.persona { display: flex; align-items: center; gap: 20px; width: 100%; }
.avatar { position: relative; flex: none; width: 160px; height: 160px; border-radius: 50px; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50px; }
.bubble {
  flex: none; min-width: 0; width: 100%; max-width: 360px; padding: 20px; background: #fff; border-radius: 20px;
  --sw: 2px; --sc: var(--sq600);
  box-shadow: 0 8px 24px -12px rgba(97, 38, 3, .06);
}
.persona .bubble { flex: 1 1 0; width: auto; }   /* beside an avatar: grow sideways, never taller than needed */
.bubble p { font: 400 18px/1.5 var(--ff); color: var(--n800); }
.pain-close { --fs: 24px; font-weight: 500; line-height: 1.5; text-align: center; width: 100%; }

/* =========================================================
   BEFORE / AFTER  (drag the handle: handwriting ⇄ erased)
   ========================================================= */
.ba { background: var(--sq400); }
.ba-in { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 60px 80px 100px; }
/* footnote mark in the title + the note under the description (16px below it: gap 48 − 32) */
.note-mark { position: relative; top: -.75em; margin-left: .05em; font-size: .5em; line-height: 0; vertical-align: baseline; }
.ba-note { margin-top: -32px; width: 100%; font: 400 14px/1.6 var(--ff); text-align: center; opacity: .8; }
.tag-row { align-self: stretch; padding-left: 20px; }
.tag { position: relative; width: 312.495px; height: 77.495px; }
.tag-pill { position: absolute; left: 11px; top: 27.5px; padding: 10px 30px; border-radius: 999px; background: var(--sq800);
  color: #fff; font-weight: 700; line-height: normal; white-space: nowrap; }
.tag-star-s { position: absolute; left: 0; top: 11.5px; width: 38.635px; height: 38.403px; display: flex; align-items: center; justify-content: center; }
.tag-star-s-i { position: relative; display: block; flex: none; width: 28.515px; height: 27.881px; transform: rotate(-30deg); }
.tag-star-b { position: absolute; top: 3.26px; width: 54.495px; height: 54.495px; display: block; }

.ba-card {
  --pos: 35%; --sw: 8px; --sc: var(--sq800);   /* 35% = resting place: left of it erased, right still handwriting */
  position: relative; width: min(560px, 100%); aspect-ratio: 560 / 720; overflow: hidden;
  background: #fff; border-radius: 40px; box-shadow: 0 16px 40px -16px rgba(97, 38, 3, .08);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
/* The two photos are the same page, but the erased one sits ~3.6px right / 0.6px up (+0.08% scale)
   of the photo. This registers it onto the photo so text lines up exactly across the divider. */
.ba-img--after { transform-origin: 0 0; transform: translate(-.2611%, .0483%) scale(.99919, .99983); }
.ba-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }   /* un-transformed wrapper, so the cut sits exactly under the handle */
.ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 6px; margin-left: -3px; background: var(--sq300); pointer-events: none; }
.ba-handle {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: grab; pointer-events: auto; touch-action: none;
}
.ba-handle::before { content: ""; position: absolute; inset: -14px; }
.ba-handle img { display: block; width: 50px; height: 50px; pointer-events: none; transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.ba-card:hover .ba-handle img { transform: scale(1.08); }
.ba-card.is-dragging { cursor: grabbing; }
.ba-card.is-dragging .ba-handle { cursor: grabbing; }
.ba-card.is-dragging .ba-handle img { transform: scale(1.14); }
.ba-handle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- handle breathing (optional) ----------------------------------------------------------------
   After the intro sweep the handle slowly swells and shrinks and sends out a faint ring, until the
   visitor first touches the slider (script.js adds/removes .is-nudging). Paused while the pointer is
   over the handle; off for reduced-motion. To remove: delete this block + the nudge code in script.js. */
@keyframes handle-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes handle-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 140, 74, .55); } 75%, 100% { box-shadow: 0 0 0 18px rgba(255, 140, 74, 0); } }
.ba-handle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.ba-handle.is-nudging { animation: handle-breathe 2.8s ease-in-out infinite; }
.ba-handle.is-nudging::after { animation: handle-ring 2.8s ease-out infinite; }
.ba-handle.is-nudging:hover, .ba-handle.is-nudging:hover::after { animation-play-state: paused; }
.ba-handle.is-nudging:hover::after { opacity: 0; }

/* =========================================================
   FEATURE AI
   ========================================================= */
.ai { background: var(--sq300); }
.ai-in { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 60px 80px 160px; }
.ai-features { display: flex; align-items: center; gap: 100px; }
.gaku-harvest { position: relative; flex: none; width: 409px; height: 419px; }
.ai-list { display: flex; flex-direction: column; gap: 16px; }
.ai-card {
  display: flex; align-items: center; gap: 20px; width: 500px; padding: 24px 20px; overflow: hidden;
  background: var(--ye200); border: 4px solid var(--ye800); border-radius: 20px;
}
.ai-ico { position: relative; flex: none; width: 60px; height: 60px; border-radius: 15px; --sw: 4px; --sc: var(--sq900); }
.ai-ico--bare { border-radius: 0; }
.ai-ico--bare::after { display: none; }
.ai-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-title { font: 700 20px/30px var(--ff); color: var(--n900); }
.ai-desc { font: 400 18px/1.5 var(--ff); color: var(--n500); }

/* =========================================================
   JOURNEY
   ========================================================= */
.journey { background: var(--sq50); }
.journey-in { display: flex; flex-direction: column; align-items: center; gap: 72px; padding: 100px 80px; }
.steps { display: flex; flex-direction: column; gap: 112px; width: 100%; max-width: 960px; }
.step { display: flex; align-items: center; justify-content: center; gap: 72px; width: 100%; }
.step-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.step-copy--a { gap: 20px; }
.step-copy--b { gap: 12px; }
.st-head { display: flex; flex-direction: column; gap: 10px; letter-spacing: 1px; }
.st-num { font: 800 34px/1.5 var(--ff-nun); letter-spacing: 1px; color: var(--sq500); white-space: nowrap; }
.st-title { font: 700 30px/30px var(--ff); color: var(--n900); }
.st-title--b { line-height: 1.3; }
.st-text { font: 400 20px/1.5 var(--ff); color: var(--n800); }
.st-text p + p { margin-top: 10px; }

/* =========================================================
   FEATURE REWARD
   ========================================================= */
.reward { background: var(--ye100); }
.reward-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 160px 80px; }
.reward-card {
  width: 938px; max-width: 100%; padding: 70px 80px; display: flex; flex-direction: column; align-items: center; gap: 50px;
  background: var(--white-grey); border-radius: 40px; box-shadow: 0 12px 32px -16px rgba(97, 38, 3, .06);
}
.rc-block { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.rc-head { font: 700 30px/30px var(--ff); letter-spacing: 1px; color: var(--n900); text-align: center; white-space: nowrap; }
.rc-conv { display: flex; align-items: center; gap: 20px; }
.rc-item { display: flex; flex-direction: column; align-items: center; }
.rc-pic { position: relative; flex: none; display: block; }
.rc-pic > img { display: block; width: 100%; height: 100%; }
.rc-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 225px; padding: 15px;
  border: 6px solid var(--bc); border-radius: 18px;
}
.rc-box-t { font: 700 30px/30px var(--ff); letter-spacing: 1px; color: #000; white-space: nowrap; }
.rc-box-s { font: 500 20px/1.7 var(--ff); white-space: nowrap; }
.rc-arrow { display: flex; flex-direction: column; align-items: center; gap: 25px; }
.rc-tri { position: relative; display: block; width: 24px; height: 48px; }
.rc-arrow p { font: 700 18px/1.5 var(--ff); color: #000; white-space: nowrap; }
.rc-div { display: block; width: 100%; height: 2px; background: var(--n500); flex: none; }

.rc-flow { display: flex; align-items: flex-start; justify-content: center; gap: 12px; height: 173px; }
.rf-step { display: flex; flex-direction: column; align-items: center; gap: 12px; align-self: stretch; }
.rf-step p { font: 400 18px/1.5 var(--ff); color: #000; text-align: center; white-space: nowrap; }
.rf-step p b { font-weight: 700; }
.rf-circle { position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 40px; background: var(--sq300); }
.rf-circle::after { content: ""; position: absolute; inset: 0; border: 4px solid var(--sq900); border-radius: inherit; }
.rf-circle span { font: 700 20px/1.5 var(--ff); color: var(--sq800); white-space: nowrap; }
.rf-circle .rf-master { line-height: 1; text-align: center; }
.rf-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; }
.rf-arrow { display: flex; align-items: flex-start; align-self: stretch; padding-top: 30px; }

.mot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mot-row { display: flex; align-items: center; gap: 40px; }
.mot-mid { display: flex; align-items: center; gap: 30px; }
.streak { position: relative; width: 78px; height: 78px; flex: none; }
.streak-c { position: relative; width: 78px; height: 78px; border-radius: 50%; background: #fff; }
.streak-c::after { content: ""; position: absolute; inset: 0; border: 1.625px solid #e5e5ea; border-radius: 50%; }
.streak-fire { position: absolute; left: 50%; top: 50%; width: 35.75px; height: 35.75px; transform: translate(-50%, -50%); }
.pn { position: relative; flex: none; width: 88.32px; height: 62.25px; }
.pn-r { position: absolute; display: flex; align-items: center; justify-content: center; }
.pn-r > span { position: relative; display: block; flex: none; width: 15.508px; height: 43.852px; transform: rotate(var(--r)); }
.meter { display: flex; gap: 6px; }
.meter i { display: block; width: 40px; height: 16px; border-radius: 999px; }
.rc-block--mot .chips { margin-top: -20px; }
.chips { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chip-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.chip { display: inline-flex; padding: 6px 16px; border-radius: 12px; background: var(--or600); color: #fff;
  font: 400 18px/1.5 var(--ff); white-space: nowrap; --sw: 2px; --sc: var(--sq600); }

.gaku-grad { position: absolute; right: 130px; bottom: 366.4px; width: 200px; height: 216.06px; z-index: 2; pointer-events: none; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing { background: var(--sq300); overflow: hidden; }
.pricing-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 160px 80px 220px; }
.pt-card { position: relative; background: var(--white-grey); border: 8px solid var(--sq900); border-radius: 40px; padding: 40px 80px 50px; }
.pt { --cols: 300px 272px 272px; display: flex; flex-direction: column; gap: 32px; }
.pt-head { display: grid; grid-template-columns: var(--cols); width: 100%; }
.pt-head p { grid-column: 2; text-align: center; font: 700 20px/30px var(--ff); color: var(--sq700); }
.pt-head p + p { grid-column: 3; }
.pt-rows { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.pt-row { display: grid; grid-template-columns: var(--cols); align-items: stretch; }
.pt-label { padding: 0 10px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--sq400); border-radius: 30px 0 0 30px; color: #fff; font: 500 24px/1.5 var(--ff); }
.pt-cell { display: flex; align-items: center; justify-content: center; height: 100px; padding: 20px 10px;
  background: var(--sq50); transition: background .25s ease; }
.pt-cell:last-child { border-radius: 0 30px 30px 0; }
.pt-cell img { display: block; width: 42px; height: 32px; }
.pt-val { font: 700 24px/1.5 var(--ff); text-align: center; }
.pt-row:not(.pt-row--price):hover .pt-cell { background: #ffe9d1; }
.pt-row--price .pt-label { background: none; color: var(--sq800); font-weight: 700; }
.pt-row--price { grid-template-columns: 300px 272px 250px; column-gap: 2px; min-height: 87px; }
.pt-row--price .pt-cell { height: auto; padding: 10px; background: var(--white-grey); color: var(--or800); }
/* premium price: "月額 600円 → 350円" / "年額 5350円 → 3980円" + launch-offer line + sparkles */
.pt-price { --fs: 24px; position: relative; align-self: center; display: flex; flex-direction: column; gap: 10px; width: 250px; }
.pp-line { display: flex; align-items: center; justify-content: space-between; font: 700 var(--fs)/1.5 var(--ff); white-space: nowrap; }
.pp-old { color: var(--n400); font-weight: 500; }
.pp-old b { font-weight: 700; }
.pp-arrow { flex: none; display: block; width: 17px; height: 14.7279px; margin-right: -1px; }
.pp-new { position: relative; color: var(--sq500); }
.pp-spark { position: absolute; max-width: none; pointer-events: none; }
.pp-spark--s { left: -21.75px; top: -.75px; width: 22.5px; height: 27px; }
.pp-spark--l { left: calc(100% - .75px); top: -3.75px; width: 35.0553px; height: 48.0857px; }
.pp-promo { position: absolute; left: 140px; top: calc(100% + 12px); transform: translateX(-50%);
  width: max-content; font: 700 16px/19px var(--ff); color: var(--sq400); text-align: center; white-space: nowrap; }
.pt-note { position: absolute; right: -12px; top: calc(100% + 20px); font: 500 12px/14px var(--ff); color: #000; white-space: nowrap; }
.gaku-peek { position: absolute; left: 50%; margin-left: -125px; bottom: -46.5px; width: 250px; height: 223px; }

/* =========================================================
   VOICES
   ========================================================= */
.voices { background: var(--n100); }
.voices-in { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 160px 80px; }
.voice-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 20px; width: 100%; }
.voice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 346px; min-height: 210px; padding: 24px; overflow: hidden;
  background: var(--white-grey); border-radius: 20px; box-shadow: 0 12px 32px -16px rgba(97, 38, 3, .06);
}
.vq { font: 700 36px/52px var(--ff); color: var(--or500); white-space: nowrap; }
.voice blockquote { font: 400 20px/1.5 var(--ff); color: var(--n900); }
.voice figcaption { font: 400 18px/1.5 var(--ff); color: var(--n500); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--n50); box-shadow: inset 0 -1px 0 var(--sq600); }
.faq-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 160px 0; }
.faq-list { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 648px; max-width: 100%; }
.faq-item { width: 100%; padding: 24px; background: #fff; border-radius: 20px; box-shadow: 0 8px 24px -12px rgba(97, 38, 3, .06); overflow: hidden; }
.faq-q { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  cursor: pointer; font: 700 20px/30px var(--ff); color: var(--n900); word-break: keep-all; line-break: strict; }
.faq-q > span:first-child { flex: 1 1 0; min-width: 0; }
.faq-q:focus-visible { outline: 3px solid var(--sq400); outline-offset: 6px; border-radius: 8px; }
.chev { flex: none; font: 700 20px/normal var(--ff); color: var(--n800); transition: transform .35s ease; display: inline-block; }
.faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s ease; }
.faq-a > div { overflow: hidden; min-height: 0; }
.faq-a p { padding-top: 16px; font: 400 18px/1.5 var(--ff); color: var(--n500); }
.faq-item.is-closed .faq-a { grid-template-rows: 0fr; }
.faq-item.is-closed .faq-a > div { visibility: hidden; transition: visibility 0s .4s; }
.faq-item.is-closed .chev { transform: rotate(180deg); }
.gaku-q { position: absolute; right: 33px; bottom: 126px; width: 250px; height: 201px; pointer-events: none; }

/* =========================================================
   CTA + FOOTER
   ========================================================= */
.cta { position: relative; background: var(--sq900); }
.cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--sq400); }
.cta-in { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 100px 80px; }
.cta-title { --fs: 40px; width: 100%; text-align: center; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.cta-brand { display: flex; align-items: center; justify-content: center; gap: 8px; }

.footer { background: var(--n900); }
.footer-in { display: flex; align-items: center; justify-content: space-between; padding: 48px 80px; font: 400 15px/1.7 var(--ff); white-space: nowrap; }
.f-links { color: #fff; }
.f-links a { text-decoration: none; }
.f-links a:hover { text-decoration: underline; }
.f-copy { color: var(--n300); }

/* =========================================================
   MOTION (gentle, ends exactly on the designed layout)
   ========================================================= */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bob-s { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes wob { 0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); } 50% { transform: translate(-50%, -50%) rotate(-1deg); } }

.bob { animation: bob 4.5s ease-in-out infinite; }
.sway { animation: sway 5s ease-in-out infinite; transform-origin: 50% 90%; }
.phone-wrap--hero .phone { animation: phone-float 6s ease-in-out infinite; }
.sp-logo { animation: bob-s 3.6s ease-in-out infinite; }
.sp-bubble-text { animation: wob 3s ease-in-out infinite; }

/* scroll reveal (only when JS is on) */
html.js [data-r] { opacity: 0; transition: opacity .8s ease var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
html.js [data-r="up"] { transform: translateY(32px); }
html.js [data-r="left"] { transform: translateX(-40px); }
html.js [data-r="right"] { transform: translateX(40px); }
html.js [data-r="zoom"] { transform: scale(.92); }
html.js [data-r].in-view { opacity: 1; transform: none; }
html.js [data-r].r-done { transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease; }

html.js .voice.r-done:hover, html.js .faq-item.r-done:hover, html.js .bubble.r-done:hover, html.js .ai-card.r-done:hover { transform: translateY(-4px); }
html.js .voice.r-done:hover { box-shadow: 0 18px 36px -16px rgba(97, 38, 3, .18); }
html.js .ai-card.r-done:hover { box-shadow: 0 14px 28px -14px rgba(97, 38, 3, .3); }
html.js .avatar.r-done:hover { transform: rotate(-4deg) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-r] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; }
}

/* =========================================================
   RESPONSIVE (inferred from the desktop design — replace with
   dedicated Tablet / Mobile frames when available)
   ========================================================= */
@media (max-width: 1179px) {
  :root { --gx: 96px; }
  .h2 { --fs: 40px; }
  .hero-in, .pain-in, .ba-in, .ai-in, .journey-in, .reward-in, .pricing-in, .voices-in, .cta-in, .footer-in { padding-left: 40px; padding-right: 40px; }

  /* stacked hero order: title → subtitle → phone → store badges → note */
  .hero-in { flex-direction: column; align-items: center; text-align: center; padding-top: 56px; padding-bottom: 72px; gap: 0; }
  .hero-copy, .hero-main { display: contents; }
  .hero-title { order: 1; --fs: 52px; }
  .hero-sub { order: 2; margin-top: 24px; }
  .phone-wrap--hero { order: 3; margin-top: 44px; }
  .hero .stores { order: 4; margin-top: 44px; }
  .hero-note { order: 5; margin-top: 32px; }
  .stores { justify-content: center; flex-wrap: wrap; }

  .pain-in, .voices-in { padding-top: 96px; padding-bottom: 96px; }
  .pain-stories { flex-direction: column; align-items: center; gap: 32px; }
  .persona-a, .persona-b { flex: none; width: 100%; max-width: 540px; }
  .persona-a { height: auto; }
  .persona-a .bubbles { height: auto; gap: 20px; padding: 0; }
  .persona-b { gap: 20px; }

  .tag-row { display: flex; justify-content: center; padding-left: 0; }
  .ai-in { padding-bottom: 96px; }
  .ai-features { flex-direction: column; gap: 32px; }
  .gaku-harvest { width: min(409px, 70vw); height: auto; aspect-ratio: 409 / 419; }
  .ai-list { width: 100%; align-items: center; }
  .ai-card { width: 100%; max-width: 500px; }

  .journey-in { padding-top: 72px; padding-bottom: 72px; }
  .steps { gap: 128px; }
  .step { flex-direction: column; gap: 56px; }
  .par { transform: none !important; }
  .step .phone-wrap { order: 1; }
  .step .step-copy { order: 2; flex: none; width: 100%; max-width: 560px; align-items: center; text-align: center; }
  .st-head { align-items: center; }
  .st-text p { text-wrap: balance; }

  .reward-in { padding-top: 96px; padding-bottom: 96px; }
  .reward-card { padding: 56px 28px; width: 100%; }
  .gaku-grad { position: relative; right: auto; bottom: auto; align-self: flex-end; width: 150px; height: 162px; }

  .pricing-in { padding-top: 96px; padding-bottom: 220px; }
  .pt-card { width: 100%; padding: 32px 24px; border-radius: 32px; }
  .pt { --cols: 1.25fr 1fr 1fr; }
  .pt-label { font-size: 20px; border-radius: 24px 0 0 24px; }
  .pt-cell:last-child { border-radius: 0 24px 24px 0; }
  .pt-val { font-size: 20px; }
  .pt-row--price { grid-template-columns: var(--cols); column-gap: 0; }
  .pt-price { --fs: 20px; width: auto; padding: 10px 0; gap: 6px; container-type: inline-size; }
  .pp-line { justify-content: center; gap: 0 24px; }   /* 24px = the gap in the 1280 design */
  .pp-promo { position: static; transform: none; width: auto; margin-top: 4px; font-size: 14px; line-height: 1.4; white-space: normal; }
  @container (max-width: 250px) {
    /* column too narrow for one line: old price on top, "→ new price" under it */
    .pp-line { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0 8px; }
    .pp-old { grid-column: 1 / -1; justify-self: center; font-size: .78em; }
    .pp-spark--s { left: -50px; top: -2px; }   /* stacked: in the free space left of "→ 350円" */
  }

  .voice { width: calc(50% - 10px); }
  .faq-in { padding: 96px 40px; }
  .gaku-q { position: relative; right: auto; bottom: auto; align-self: flex-end; width: 180px; height: 145px; margin-top: -24px; }
  .cta-in { padding-top: 80px; padding-bottom: 80px; }
}

/* The reward flow (記録 ▶ どんぐり ▶ マスター ▶ 松の実) is 778px wide. Tablet: keep the row and its
   ▶ arrows, scaled to fit. Phone: stack it top-to-bottom and turn every ▶ into a ▼, so the
   direction is always visible. */
@media (min-width: 760px) and (max-width: 913px) {
  .rc-flow { zoom: .8; }
}
@media (max-width: 759px) {
  .rc-flow { flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; height: auto; }
  .rf-step { width: auto !important; align-self: center; }
  .rf-arrow { align-self: center; padding: 6px 0; }
  .rf-arrow > span { transform: rotate(90deg); }
}

@media (max-width: 720px) {
  :root { --gx: 56px; }
  .h2 { --fs: 32px; }
  .lead { --fs: 17px; }
  .lead-lg, .pain-close { --fs: 19px; }
  .hero-in, .pain-in, .ba-in, .ai-in, .journey-in, .reward-in, .pricing-in, .voices-in, .cta-in, .footer-in { padding-left: 20px; padding-right: 20px; }

  .brandbar { padding: 14px 0; }
  .brand-name { font-size: 28px; width: auto; }
  .logo-mark { zoom: .8; }
  .links { gap: 18px; padding: 14px 12px; }
  .links a { font-size: 14px; line-height: 24px; }
  html { scroll-padding-top: 52px; }

  .hero-in { padding-top: 40px; padding-bottom: 56px; }
  .hero-title { --fs: 38px; }
  .hero-sub { --fs: 17px; }
  .hero-note { font-size: 15px; }
  .stores { gap: 12px; }
  .badge { zoom: .86; }
  .phone-wrap--hero { zoom: .78; }

  .pain-in, .voices-in { padding-top: 64px; padding-bottom: 64px; gap: 36px; }
  .persona, .persona-a { gap: 12px; }
  .avatar { width: 88px; height: 88px; border-radius: 28px; }
  .avatar img { border-radius: 28px; }
  .bubble { padding: 14px; }
  .bubble p { font-size: 14px; }

  .ba-in { padding-top: 40px; padding-bottom: 64px; gap: 32px; }
  .ba-note { margin-top: -16px; font-size: 12px; }
  .tag { transform: scale(.8); transform-origin: center top; margin-bottom: -15px; }
  .ba-card { --sw: 6px; border-radius: 28px; }

  .ai-in { padding-top: 40px; padding-bottom: 72px; gap: 40px; }
  .ai-title { font-size: 18px; }
  .ai-desc { font-size: 15px; }
  .ai-card { padding: 18px 14px; gap: 14px; }

  .journey-in { gap: 48px; }
  .steps { gap: 104px; }
  .step { gap: 44px; }
  .st-title { font-size: 26px; }
  .st-text { font-size: 16px; }

  .reward-in { padding-top: 64px; padding-bottom: 64px; gap: 40px; }
  .reward-card { padding: 40px 16px; gap: 36px; border-radius: 28px; }
  .rc-head { font-size: 24px; }
  .rc-conv { flex-direction: column; gap: 16px; }
  .rc-arrow { flex-direction: row; gap: 12px; }
  .rc-tri { transform: rotate(90deg); }
  .rf-step p { font-size: 15px; }
  .mot-row { zoom: .72; gap: 28px; }
  .meter i { width: 32px; }
  .chip { font-size: 15px; padding: 5px 12px; }
  .chip-row { flex-wrap: wrap; }

  .pricing-in { padding-top: 64px; padding-bottom: 180px; gap: 32px; }
  .pt-card { padding: 24px 10px; border-width: 6px; border-radius: 24px; }
  .pt { gap: 20px; }
  .pt-head p { font-size: 14px; line-height: 20px; }
  .pt-rows { gap: 10px; }
  .pt-label { font-size: 13px; padding: 0 6px; border-radius: 16px 0 0 16px; }
  .pt-cell { height: 64px; padding: 6px; }
  .pt-cell:last-child { border-radius: 0 16px 16px 0; }
  .pt-cell img { width: 28px; height: 21px; }
  .pt-val { font-size: 14px; }
  .pt-row--price .pt-cell { height: auto; padding: 8px 2px; }
  .pt-row--price .pt-val { font-size: 12px; white-space: nowrap; letter-spacing: -.02em; }
  .pt-price { --fs: 14px; padding: 8px 0; gap: 4px; }
  .pp-line { gap: 0 4px; }
  .pp-arrow { width: 12px; height: 10.4px; margin-right: 0; }
  .pp-spark--s { left: -31px; top: -1px; width: 13.1px; height: 15.75px; }   /* desktop sparkles × 14/24; left of the arrow */
  .pp-spark--l { left: calc(100% - .4px); top: -2.2px; width: 20.45px; height: 28.05px; }
  .pt { position: relative; }
  .pt-card { padding-bottom: 44px; }
  .pt-price { position: static; }
  .pp-promo { position: absolute; left: auto; right: 0; top: calc(100% + 8px); width: max-content; margin: 0; font-size: 11px; line-height: 15px; white-space: nowrap; }
  .pt-note { right: -6px; top: calc(100% + 16px); font-size: 11px; }
  .gaku-peek { zoom: .8; }

  .voice { width: 100%; min-height: 0; }
  .faq-in { padding: 64px 20px; gap: 32px; }
  .faq-item { padding: 18px; }
  .faq-q { font-size: 16px; line-height: 24px; gap: 12px; }
  .faq-a p { font-size: 15px; }
  .gaku-q { width: 140px; height: 113px; }

  .cta-in { padding-top: 64px; padding-bottom: 64px; gap: 32px; }
  .cta-title { --fs: 28px; }
  .footer-in { flex-direction: column; gap: 8px; padding-top: 32px; padding-bottom: 32px; white-space: normal; text-align: center; font-size: 14px; }
}

@media (max-width: 420px) {
  .pt-head p { font-size: 12px; }
  .pp-spark--l { left: calc(100% - 5px); top: -7px; width: 15px; height: 20.6px; }   /* keep it off the card border */
}

@media (max-width: 380px) {
  .phone-wrap--hero { zoom: .7; }
  .badge { zoom: .78; }
}

@media (max-width: 330px) {
  .pt-head p { font-size: 11px; }
  .pt-card { padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 340px) {
  .pt { --cols: 1fr 1fr 1fr; }
  .phone-wrap--step { zoom: .9; }
  .mot-row { zoom: .66; }
}

/* =========================================================
   LEGAL PAGES  (privacy policy, terms of use, …)
   Cream page, GakuMate header on top, the document sits in one white card.
   ========================================================= */
.legal { background: var(--sq50); }
.legal-in { padding: 72px 40px 128px; }
.legal-card {
  max-width: 880px; margin: 0 auto; padding: 64px 72px 56px;
  background: #fff; border: 4px solid var(--n200); border-radius: 32px;
  box-shadow: 0 12px 32px -16px rgba(97, 38, 3, .08);
  font-family: var(--ff-lat); color: var(--n800);     /* Latin → Wix Madefor Display, Japanese → Noto Sans JP */
}
.legal-title { --fs: 40px; --gx: 170px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--sq900); }
.legal-rule { display: block; width: 56px; height: 5px; margin: 20px auto 0; border-radius: 3px; background: var(--sq400); }

.lg-sec { margin-top: 44px; }
.lg-sec h2 {
  padding-left: 16px; border-left: 5px solid var(--sq400);
  font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--n900); text-wrap: balance;
}
.lg-n { margin-right: .1em; color: var(--sq500); }
.lg-sec p, .lg-sec li, .lg-sec dd { font-size: 16px; line-height: 1.95; text-wrap: pretty; }
.lg-sec p { margin-top: 14px; }
.lg-sec h2 + p { margin-top: 16px; }
.lg-list { margin: 12px 0 0; padding: 0; list-style: none; }
.lg-list li { position: relative; margin-top: 4px; padding-left: 1.35em; }
.lg-list li::before { content: ""; position: absolute; left: .3em; top: .95em; width: .44em; height: .44em; border-radius: 50%; background: var(--sq400); }
.lg-list a { color: var(--sq600); text-underline-offset: 3px; }
.lg-list a:hover { color: var(--sq800); }
.lg-dl { display: grid; gap: 6px; margin: 16px 0 0; }
.lg-dl > div { display: grid; grid-template-columns: 5.5em 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--n200); }
.lg-dl > div:last-child { border-bottom: 0; }
.lg-dl dt { font-weight: 700; color: var(--n900); line-height: 1.95; }
.lg-dl dd { margin: 0; }

.lg-date { margin-top: 52px; padding-top: 22px; border-top: 2px solid var(--n200); text-align: right; font-size: 14px; line-height: 1.6; color: var(--n500); }
.lg-date b { margin-right: 1em; font-weight: 700; color: var(--n800); }
.lg-sec .lb { word-break: normal; }              /* a very long phrase may wrap by character (kinsoku still applies) */
.lg-sec .nb { white-space: nowrap; }          /* keeps a run of full-width numbers/symbols together */
.f-links [aria-current="page"] { color: var(--sq300); }

@media (max-width: 1179px) {
  .legal-in { padding: 56px 24px 96px; }
  .legal-card { padding: 52px 44px 48px; }
  .legal-title { --gx: 160px; }
}
@media (max-width: 720px) {
  .legal-in { padding: 32px 12px 72px; }
  .legal-card { padding: 36px 20px 32px; border-width: 3px; border-radius: 24px; }
  .legal-title { --fs: 30px; --gx: 92px; }
  .legal-rule { width: 44px; height: 4px; margin-top: 16px; }
  .lg-sec { margin-top: 34px; }
  .lg-sec h2 { padding-left: 12px; border-left-width: 4px; font-size: 18px; }
  .lg-sec p, .lg-sec li, .lg-sec dd { font-size: 15px; line-height: 1.9; }
  .lg-dl > div { grid-template-columns: 4.6em 1fr; gap: 12px; }
  .lg-date { margin-top: 40px; font-size: 13px; }
}