/* ==========================================================================
   Acti Method Maebashi Aramaki — flat
========================================================================== */
:root {
  --bg: #F5F6F4;
  --paper: #FFFFFF;
  --ink: #121416;
  --ink-2: #5A6066;
  --ink-3: #9AA0A4;
  --line: #E2E5E2;
  --line-2: #EEF0EE;
  --teal: #13B5B8;
  --teal-ink: #0A7B7E;
  --teal-soft: #E3F5F5;
  --orange: #ED724B;
  --line-green: #06C755;
  --r: 20px;
  --r-sm: 12px;
  --wrap: 1160px;
  --font: "Zen Kaku Gothic New", system-ui, sans-serif;
  --latin: "Inter", "Zen Kaku Gothic New", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
sup { font-size: .45em; vertical-align: super; margin-left: .05em; }
.nowrap { white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px;
}
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 14px; line-height: 1;
  padding: 13px 20px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-lg { font-size: 15px; padding: 18px 28px; }
.btn-primary { background: var(--teal-ink); color: #fff; }
.btn-primary:hover { background: var(--ink); }
.btn-ghost { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-line { background: var(--line-green); color: #fff; }
.btn-line:hover { background: #05A648; }
.btn-arrow { transition: transform .2s; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.text-link {
  display: inline-block; font-weight: 700; font-size: 14px; color: var(--teal-ink);
  text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.text-link:hover { color: var(--ink); }

/* ---------- header ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.hd.is-scrolled { background: rgba(245, 246, 244, .92); backdrop-filter: blur(10px); border-color: var(--line); }
.hd-inr { max-width: 1320px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.hd-logo img { height: 34px; width: auto; }
.hd-nav { display: flex; gap: 24px; margin-left: auto; }
.hd-nav a { font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.hd-nav a:hover { color: var(--ink); }
.hd-nav-cta { display: none; }
.hd-toggle { display: none; }

/* ---------- common section parts ---------- */
.sec { padding: 120px 0; }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head.is-row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--teal-ink); margin-bottom: 18px; text-transform: uppercase;
}
.eyebrow-line { width: 32px; height: 1.5px; background: var(--teal); flex: none; }
.sec-title { font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 1.35; letter-spacing: .01em; }
.sec-lead { margin-top: 18px; color: var(--ink-2); font-size: 15px; }

/* frame: the bordered "canvas" with corner meta labels */
.frame {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 28px;
}
.frame::before, .frame::after {
  content: ""; position: absolute; width: 14px; height: 14px; z-index: 3; pointer-events: none;
  border-color: var(--ink-3); border-style: solid;
}
.frame::before { top: 16px; left: 16px; border-width: 1px 0 0 1px; }
.frame::after { right: 16px; bottom: 16px; border-width: 0 1px 1px 0; }
.frame-meta {
  position: absolute; top: 18px; left: 44px; right: 44px; z-index: 3;
  display: flex; justify-content: space-between;
}
.frame-grid { position: absolute; inset: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
.frame-grid i { width: 1px; background: var(--line-2); }
.bignum {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--latin); font-weight: 800; line-height: .8; letter-spacing: -.04em;
  font-size: clamp(180px, 26vw, 380px); color: #F0F2F0;
  left: 34%; bottom: 40px;
}

/* timeline */
.timeline { position: absolute; left: 44px; right: 44px; bottom: 26px; z-index: 3; }
.timeline-track { position: relative; height: 1.5px; background: var(--teal); }
.timeline-dot {
  position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--paper); border: 1.5px solid var(--teal-ink);
  transition: left .5s cubic-bezier(.2, .7, .2, 1);
}
.timeline-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--teal-ink); }
.timeline-ticks { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; }
.timeline-ticks span, .timeline-ticks button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); text-align: center;
}

/* ---------- mock app window ---------- */
.app {
  position: relative; z-index: 2;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(18, 20, 22, .28), 0 2px 0 rgba(18, 20, 22, .02);
  overflow: hidden; width: 100%; max-width: 440px;
}
.app-tilt { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); transform-origin: left center; }
.app-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-2); font-size: 12px; font-weight: 700;
}
.dots { display: flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.app-title { color: var(--ink); }
.app-tag {
  margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  background: var(--teal-soft); color: var(--teal-ink); padding: 3px 9px; border-radius: 999px;
}
.app-body { padding: 26px 26px 28px; }

/* hero typing mock */
.typing-label { margin-bottom: 8px; }
.typing-word {
  font-family: var(--mono); font-weight: 700; font-size: 44px; letter-spacing: .08em;
  min-height: 1.3em; line-height: 1.3; color: var(--ink-3);
}
.typing-word .t { color: var(--teal-ink); }
.typing-word .c { position: relative; color: var(--ink); }
.typing-word .c::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px;
  background: var(--orange); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.typing-ja { font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.typing-bar { height: 6px; border-radius: 6px; background: var(--line-2); margin: 20px 0 22px; overflow: hidden; }
.typing-bar span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 6px; transition: width .25s; }
.typing-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-2); padding-top: 16px; }
.typing-stats > div { display: flex; flex-direction: column; gap: 2px; }
.typing-stats b { font-family: var(--latin); font-size: 22px; font-weight: 800; }
.typing-stats small { font-size: 12px; margin-left: 1px; }
.sound { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.sound i { width: 4px; background: var(--teal); border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.sound i:nth-child(1) { height: 40%; }
.sound i:nth-child(2) { height: 90%; animation-delay: .15s; }
.sound i:nth-child(3) { height: 60%; animation-delay: .3s; }
.sound i:nth-child(4) { height: 75%; animation-delay: .45s; }
@keyframes eq { 50% { transform: scaleY(.4); } }
.sound i { transform-origin: bottom; }

/* ---------- HERO ---------- */
.hero { padding: 88px 16px 0; }
.hero > .frame { max-width: 1320px; margin: 0 auto; min-height: min(760px, calc(100vh - 110px)); }
.hero-body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  padding: 110px 64px 130px; min-height: inherit;
}
.hero-title {
  font-size: clamp(56px, 8.4vw, 118px); font-weight: 900; line-height: 1.08; letter-spacing: -.01em;
}
.hero-sub { margin-top: 26px; font-weight: 700; color: var(--teal-ink); font-size: 15px; }
.hero-lead { margin-top: 14px; max-width: 30em; color: var(--ink-2); font-size: 15px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-visual { position: relative; display: flex; justify-content: center; }
.hero-chara {
  position: absolute; width: 190px; height: auto; right: -10px; bottom: -86px; z-index: 3;
}
.hero .bignum { left: 38%; bottom: 44px; }

.facts {
  max-width: 1320px; margin: 16px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
.facts li { display: flex; flex-direction: column; gap: 4px; padding: 24px 28px; }
.facts li + li { border-left: 1px solid var(--line); }
.facts b { font-family: var(--latin); font-size: 30px; font-weight: 800; line-height: 1.2; }
.facts b small { font-family: var(--font); font-size: 15px; margin-left: 2px; }
.facts li > span:last-child { font-size: 13px; color: var(--ink-2); font-weight: 500; }

/* ---------- METHOD (sticky stepper) ---------- */
.method { padding-top: 120px; }
.method .sec-head { margin-bottom: 40px; }
.stepper { position: relative; height: 500vh; }
.stepper-stage { position: sticky; top: 76px; height: calc(100vh - 92px); padding: 0 16px; }
.stepper-stage > .frame { max-width: 1320px; height: 100%; margin: 0 auto; }
.step {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  padding: 70px 64px 100px;
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s;
}
.step.is-active { opacity: 1; visibility: visible; }
.step-copy, .step-visual { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.step:not(.is-active) .step-copy { transform: translateY(24px); }
.step:not(.is-active) .step-visual { transform: translateX(40px); }
.step-title { font-size: clamp(52px, 7vw, 100px); font-weight: 900; line-height: 1.1; }
.step-sub { margin-top: 20px; font-weight: 700; color: var(--teal-ink); }
.step-text { margin-top: 14px; max-width: 28em; color: var(--ink-2); font-size: 15px; }
.step-visual { display: flex; justify-content: center; }
.stepper .bignum { left: 36%; bottom: 60px; transition: opacity .3s; }
.timeline-steps button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  transition: color .2s;
}
.timeline-steps button:hover, .timeline-steps button.is-active { color: var(--teal-ink); }
.timeline-steps button.is-active { font-weight: 700; }

/* step mocks */
.kb-word { font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); line-height: 1.2; }
.kb-word .done { color: var(--teal-ink); }
.kb-word .cur { color: var(--ink); border-bottom: 3px solid var(--orange); }
.kb-ja { font-weight: 700; color: var(--ink-2); margin: 4px 0 20px; }
.kb { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.kb-row { display: flex; gap: 5px; }
.kb-row:nth-child(2) { margin-left: 14px; }
.kb-row:nth-child(3) { margin-left: 34px; }
.kb i {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--line);
  display: grid; place-items: center; font-style: normal;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
}
.kb i.on { background: var(--teal); border-color: var(--teal); color: #fff; animation: press 1.4s ease-in-out infinite; }
@keyframes press { 50% { transform: translateY(2px); } }

.player {
  position: relative; aspect-ratio: 16/8; border-radius: 12px; background: var(--teal-soft);
  display: grid; place-items: center;
}
.player-play { width: 54px; height: 54px; border-radius: 50%; background: var(--teal-ink); position: relative; }
.player-play::after {
  content: ""; position: absolute; left: 22px; top: 17px;
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff;
}
.player-en { position: absolute; left: 16px; bottom: 12px; font-family: var(--latin); font-weight: 800; font-size: 18px; color: var(--teal-ink); }
.wave { display: flex; align-items: center; gap: 4px; height: 44px; margin: 16px 0 12px; }
.wave i { flex: 1; background: var(--teal); border-radius: 3px; transform-origin: center; animation: eq 1.2s ease-in-out infinite; }
.wave i:nth-child(3n) { height: 70%; animation-delay: .2s; }
.wave i:nth-child(3n+1) { height: 40%; animation-delay: .5s; }
.wave i:nth-child(3n+2) { height: 95%; animation-delay: .1s; }
.player-progress { height: 4px; background: var(--line-2); border-radius: 4px; }
.player-progress span { display: block; height: 100%; width: 40%; background: var(--ink); border-radius: 4px; }
.player-time { margin-top: 8px; text-align: right; }

.quiz { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.ring {
  --p: 90;
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(var(--teal) calc(var(--p) * 1%), var(--line-2) 0);
  display: grid; place-items: center; align-content: center; position: relative;
}
.ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--paper); }
.ring b, .ring span { position: relative; }
.ring b { font-family: var(--latin); font-size: 34px; font-weight: 800; line-height: 1; }
.ring b small { font-size: 14px; color: var(--ink-3); }
.quiz-list { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; font-weight: 700; }
.quiz-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; }
.quiz-list li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.quiz-list li.ng { color: var(--ink-3); }
.quiz-list li.ng::before { background: var(--line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v6M12 16.5v.5' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; }

.read-text { font-family: var(--latin); font-weight: 800; font-size: 26px; line-height: 1.5; color: var(--ink-3); }
.read-text .hl { color: var(--ink); background: linear-gradient(transparent 70%, var(--teal-soft) 70%); }
.mic { width: 64px; height: 64px; margin: 22px auto; border-radius: 50%; background: var(--orange); position: relative; }
.mic::before, .mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--orange); animation: ping 2s ease-out infinite; }
.mic::after { animation-delay: 1s; }
.mic span { position: absolute; left: 50%; top: 16px; width: 16px; height: 24px; margin-left: -8px; border-radius: 8px; background: #fff; }
@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
.read-ok { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; padding: 12px 14px; background: var(--teal-soft); border-radius: 10px; }
.read-ok .mono { color: var(--teal-ink); }

.levels { display: flex; align-items: center; justify-content: space-between; position: relative; margin: 6px 6px 26px; }
.levels::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--line); }
.levels li { position: relative; }
.levels b {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--latin); font-weight: 800; font-size: 20px;
  background: var(--paper); border: 1.5px solid var(--line); color: var(--ink-3);
}
.levels .done b { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-ink); }
.levels .cur b { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; box-shadow: 0 0 0 6px var(--teal-soft); }
.badge { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 12px; background: #FFF1EB; border: 1px solid #F8CDBD; color: var(--ink); }
.badge .mono { color: var(--orange); }
.badge b { color: #C9532E; }
.badge b { font-size: 17px; }
.grow-words { margin-top: 14px; text-align: right; }
.grow-words b { font-family: var(--latin); font-size: 18px; color: var(--ink); margin-left: 6px; letter-spacing: 0; }

/* ---------- SPEED ---------- */
.speed-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
.race { margin-top: 44px; display: flex; flex-direction: column; gap: 20px; }
.race-row { display: grid; grid-template-columns: 92px 1fr 84px; gap: 16px; align-items: center; }
.race-label { font-weight: 700; font-size: 14px; }
.race-track { height: 14px; background: var(--line-2); border-radius: 14px; overflow: hidden; }
.race-bar { display: block; height: 100%; width: 0; background: var(--ink-3); border-radius: 14px; transition: width 1.4s cubic-bezier(.2, .7, .2, 1); }
.race-bar.is-fast { background: var(--teal); transition-duration: .5s; }
.race.is-run .race-bar { width: var(--w); }
.race-num { font-family: var(--latin); font-size: 30px; font-weight: 800; text-align: right; line-height: 1; }
.race-num small { font-family: var(--font); font-size: 13px; margin-left: 2px; }
.race-row:first-child .race-num { color: var(--teal-ink); }
.speed-note { margin-top: 30px; font-size: 15px; color: var(--ink-2); }
.speed-note strong { color: var(--ink); font-size: 20px; margin: 0 2px; }
.speed-video { width: 100%; max-width: 400px; margin: 0 auto; }
.speed-video video,
.speed-video-soon { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 24px; border: 1px solid var(--line); }
.speed-video video { background: var(--ink); }
.speed-video-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: var(--paper) repeating-linear-gradient(45deg, transparent 0 14px, var(--line-2) 14px 15px);
}
.speed-video-soon b { font-size: 18px; line-height: 1.6; }
.speed-caption { margin-top: 12px; text-align: center; }

/* ---------- RESULTS ---------- */
.results { background: var(--paper); border-block: 1px solid var(--line); }
.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.result { padding: 30px 24px 32px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.result + .result { border-left: 1px solid var(--line); }
.result b { font-family: var(--latin); font-weight: 800; font-size: 42px; line-height: 1.1; letter-spacing: -.02em; color: var(--teal-ink); }
.result b small { font-family: var(--font); font-size: 16px; letter-spacing: 0; margin-left: 2px; }
.result p { font-size: 14px; font-weight: 700; line-height: 1.7; }

/* ---------- CLASS ---------- */
.class-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.class-path::before { content: ""; position: absolute; left: 30px; right: 30px; top: 58px; height: 1.5px; background: var(--teal); z-index: 0; }
.class-path li { position: relative; z-index: 1; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; }
.class-letter {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  font-family: var(--latin); font-weight: 800; font-size: 26px;
  background: var(--paper); border: 1.5px solid var(--teal); color: var(--teal-ink); margin-bottom: 16px;
}
.class-path li:first-child .class-letter { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.class-path p { font-size: 14px; font-weight: 700; }
.spec { margin-top: 48px; border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-weight: 700; font-size: 14px; }
.spec dd { color: var(--ink-2); font-size: 15px; }
.spec.is-compact { margin-top: 30px; margin-bottom: 26px; }
.spec.is-compact > div { grid-template-columns: 100px 1fr; padding: 14px 0; }
.tel { font-family: var(--latin); font-weight: 800; font-size: 20px; color: var(--ink); text-decoration: none; }

/* ---------- VOICE ---------- */
.voice { background: var(--paper); border-block: 1px solid var(--line); }
.voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.voice-grid li { border: 1px solid var(--line); border-radius: var(--r); padding: 30px 32px; display: flex; gap: 20px; }
.voice-grid li .mono { color: var(--teal-ink); padding-top: 5px; }
.voice-grid p { font-size: 15.5px; font-weight: 500; }

/* ---------- ROOM ---------- */
.room-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 16px; }
.room-grid figure { position: relative; border-radius: var(--r); overflow: hidden; background: var(--line); }
.room-grid .room-main { grid-row: span 2; }
.room-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.room-grid .room-main img { aspect-ratio: auto; }
.room-grid figcaption {
  position: absolute; left: 12px; bottom: 12px; background: var(--paper); color: var(--ink);
  padding: 5px 10px; border-radius: 999px;
}

/* ---------- FAQ ---------- */
.faq { background: var(--paper); border-block: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq .sec-head { margin-bottom: 0; position: sticky; top: 110px; }
.faq .text-link { margin-top: 24px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 24px; gap: 10px; align-items: center;
  padding: 24px 0; font-weight: 700; font-size: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; width: 20px; height: 20px; justify-self: end;
  background: linear-gradient(var(--ink), var(--ink)) center/14px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 14px no-repeat;
  transition: transform .25s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary .mono { color: var(--teal-ink); }
.faq-list details > p { padding: 0 34px 26px 66px; color: var(--ink-2); font-size: 15px; }

/* ---------- NEWS ---------- */
.news-list { border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a {
  display: grid; grid-template-columns: 120px 1fr 20px; gap: 20px; align-items: center;
  padding: 22px 0; text-decoration: none; font-weight: 700; font-size: 15px;
}
.news-list a::after { content: "→"; color: var(--ink-3); transition: transform .2s, color .2s; }
.news-list a:hover span { color: var(--teal-ink); }
.news-list a:hover::after { transform: translateX(4px); color: var(--teal-ink); }

/* ---------- ACCESS ---------- */
.access { padding-top: 40px; }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.access-map { position: relative; aspect-ratio: 1/1; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.access-map iframe { width: 100%; height: 100%; border: 0; }
/* HPの色に合わせた地図（Google Maps JavaScript API）。使えないときは下の埋め込み地図が見える */
.access-map-js { position: absolute; inset: 0; }
.access-map-label { text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; letter-spacing: .02em; }

/* ---------- CTA ---------- */
.cta { padding: 0 16px 16px; }
.cta-frame { max-width: 1320px; margin: 0 auto; }
.cta-body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center;
  padding: 110px 64px;
}
.cta-title { font-size: clamp(52px, 7.4vw, 104px); font-weight: 900; line-height: 1.1; }
.cta-lead { margin-top: 24px; max-width: 30em; color: var(--ink-2); font-size: 15px; }
.cta-qr { display: flex; gap: 16px; justify-content: flex-end; }
.cta-qr figure { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; text-align: center; }
.cta-qr img { width: 120px; height: 120px; object-fit: contain; }
.cta-qr figcaption { margin-top: 8px; }
.cta .bignum { left: auto; right: 4%; bottom: 30px; }

/* ---------- FOOTER ---------- */
.ft { padding: 64px 0 40px; }
.ft-inr { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ft-brand img { height: 32px; width: auto; margin-bottom: 16px; }
.ft-brand p { font-size: 13px; color: var(--ink-2); }
.ft-brand a { text-decoration: none; font-weight: 700; color: var(--ink); }
.ft-nav { display: flex; flex-wrap: wrap; gap: 12px 26px; align-content: flex-start; max-width: 520px; }
.ft-nav a { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--ink-2); }
.ft-nav a:hover { color: var(--ink); }
.ft-copy { margin-top: 48px; }
.sp-bar { display: none; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
========================================================================== */
@media (max-width: 1100px) {
  .hd-nav { gap: 18px; }
  .result-grid { grid-template-columns: repeat(3, 1fr); }
  .result:nth-child(4) { border-left: 0; }
  .result:nth-child(n+4) { border-top: 1px solid var(--line); }
}

@media (max-width: 1140px) {
  .hd-cta { display: none; }
  .hd-toggle {
    display: block; margin-left: auto; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--paper); cursor: pointer; position: relative;
  }
  .hd-toggle span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .25s, top .25s; }
  .hd-toggle span:first-child { top: 18px; }
  .hd-toggle span:last-child { top: 24px; }
  .hd-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
  .hd-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
  .hd-nav {
    position: fixed; inset: 72px 12px auto; flex-direction: column; gap: 0;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 20px 20px;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .hd-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .hd-nav a { padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; color: var(--ink); }
  .hd-nav .hd-nav-cta { display: block; margin-top: 14px; border: 0; background: var(--teal-ink); color: #fff; text-align: center; border-radius: 999px; }
}

@media (max-width: 960px) {
  .hero-body { grid-template-columns: 1fr; padding: 90px 32px 120px; gap: 56px; }
  .hero-visual { padding-bottom: 60px; }
  .hero-chara { width: 150px; right: 0; bottom: -20px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }

  /* stepper → stacked cards */
  .stepper { height: auto; }
  .stepper-stage { position: static; height: auto; }
  .stepper-stage > .frame { height: auto; background: transparent; border: 0; overflow: visible; }
  .stepper-stage > .frame::before, .stepper-stage > .frame::after,
  .stepper .frame-meta, .stepper .frame-grid, .stepper .bignum, .stepper .timeline { display: none; }
  .step {
    position: relative; inset: auto; opacity: 1; visibility: visible;
    grid-template-columns: 1fr; gap: 36px; padding: 48px 28px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 28px; margin-bottom: 16px;
  }
  .step:not(.is-active) .step-copy, .step:not(.is-active) .step-visual { transform: none; }
  .app-tilt { transform: none; }

  .speed-grid, .faq-grid, .access-grid, .cta-body { grid-template-columns: 1fr; gap: 48px; }
  .faq .sec-head { position: static; }
  .class-path { grid-template-columns: repeat(2, 1fr); }
  .class-path::before { display: none; }
  .room-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .room-grid .room-main { grid-column: span 2; grid-row: auto; }
  .room-grid .room-main img { aspect-ratio: 3/2; }
  .cta-body { padding: 90px 32px; }
  .cta-qr { justify-content: center; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .wrap { padding: 0 20px; }
  .sec { padding: 84px 0; }
  .sec-head { margin-bottom: 40px; }
  .sec-head.is-row { flex-direction: column; align-items: flex-start; }
  .hd-inr { padding: 12px 16px; }
  .hd-logo img { height: 24px; }
  .hero { padding: 76px 10px 0; }
  .frame { border-radius: 22px; }
  .frame-meta { left: 36px; right: 36px; }
  .frame-meta span:last-child { display: none; }
  .hero-body { padding: 72px 22px 110px; }
  .hero-title { font-size: 62px; }
  .hero-cta .btn { width: 100%; }
  .timeline { left: 24px; right: 24px; }
  .app-body { padding: 20px; }
  .typing-word { font-size: 34px; }
  .hero-chara { width: 120px; bottom: -10px; }
  .facts li { padding: 18px 18px; }
  .facts b { font-size: 24px; }
  .method { padding-top: 84px; }
  .stepper-stage { padding: 0 10px; }
  .step { padding: 40px 22px; }
  .step-title { font-size: 52px; }
  .kb i { width: 24px; height: 26px; font-size: 10px; }
  .kb-word { font-size: 32px; }
  .quiz { grid-template-columns: 1fr; justify-items: center; }
  .quiz-list { width: 100%; }
  .race-row { grid-template-columns: 76px 1fr 64px; gap: 10px; }
  .race-num { font-size: 24px; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .result { border-left: 0 !important; border-top: 1px solid var(--line); padding: 24px 18px; }
  .result:nth-child(-n+2) { border-top: 0; }
  .result:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .result b { font-size: 32px; }
  .result:last-child { grid-column: span 2; }
  .class-path { grid-template-columns: 1fr; }
  .spec > div, .spec.is-compact > div { grid-template-columns: 1fr; gap: 4px; }
  .voice-grid { grid-template-columns: 1fr; }
  .voice-grid li { padding: 24px 22px; }
  .room-grid { grid-template-columns: 1fr; }
  .room-grid .room-main { grid-column: auto; }
  .faq-list summary { grid-template-columns: 44px 1fr 20px; font-size: 15px; }
  .faq-list details > p { padding: 0 0 22px 54px; }
  .news-list a { grid-template-columns: 1fr 16px; gap: 4px 12px; }
  .news-list time { grid-column: 1 / -1; }
  .cta { padding: 0 10px 10px; }
  .cta-body { padding: 72px 22px; }
  .cta-title { font-size: 56px; }
  .cta-qr img { width: 96px; height: 96px; }
  /* スマホでは「GO」がQRコードの後ろに隠れて「00」に見えるので、右上に出す */
  .cta .bignum { top: 22px; bottom: auto; right: 5%; font-size: 120px; }
  .sp-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(245, 246, 244, .95); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  }
  .sp-bar .btn { padding: 15px 10px; }
}

/* ==========================================================================
   Subpages
========================================================================== */
.hd-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--teal); }

/* page hero */
.page-hero { padding: 88px 16px 0; }
.page-hero > .frame { max-width: 1320px; margin: 0 auto; }
.page-hero-body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: end;
  padding: 120px 64px 72px;
}
.crumb { display: flex; gap: 8px; margin-bottom: 26px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--teal-ink); }
.page-title {
  font-size: clamp(40px, 5.6vw, 80px); font-weight: 900; line-height: 1.15;
  word-break: keep-all; overflow-wrap: anywhere;
}
.page-lead { margin-top: 22px; max-width: 32em; color: var(--ink-2); font-size: 15px; }
.page-hero-aside { position: relative; justify-self: end; }
.page-hero-aside img { width: 200px; height: auto; }
.page-hero .bignum { left: auto; right: 6%; bottom: 20px; font-size: clamp(140px, 18vw, 260px); }

/* local anchor nav under hero */
.local-nav { max-width: 1320px; margin: 16px auto 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.local-nav a {
  font-size: 13px; font-weight: 700; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
}
.local-nav a:hover { border-color: var(--ink); }

/* numbered text blocks */
.num-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.num-list li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 34px 30px; }
.num-list .num { display: block; font-family: var(--latin); font-weight: 800; font-size: 48px; line-height: 1; color: var(--teal-ink); letter-spacing: -.03em; }
.num-list h3 { font-size: 20px; font-weight: 900; line-height: 1.5; margin: 18px 0 10px; }
.num-list p { font-size: 14.5px; color: var(--ink-2); }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.pillars li { padding: 30px 24px 34px; display: flex; flex-direction: column; gap: 6px; }
.pillars li + li { border-left: 1px solid var(--line); }
.pillars .en { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--teal-ink); }
.pillars h3 { font-size: 18px; font-weight: 900; line-height: 1.5; margin-top: 8px; }
.pillars p { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }

/* 4-step flow */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.flow::before { content: ""; position: absolute; left: 40px; right: 40px; top: 40px; height: 1.5px; background: var(--teal); }
.flow li { position: relative; }
.flow .flow-dot {
  display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--teal); margin-bottom: 20px;
  font-family: var(--latin); font-weight: 800; font-size: 22px; color: var(--teal-ink);
}
.flow li:nth-child(2) .flow-dot { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.flow h3 { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.flow.-x3 { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
.flow.-x3::before { display: block; top: 30px; left: 30px; right: 30px; }
.flow.-x3 .flow-dot { width: 60px; height: 60px; font-size: 18px; margin-bottom: 14px; }
.flow.-x3 h3 { font-size: 15px; }
.flow p { font-size: 14px; color: var(--ink-2); padding-right: 12px; }

/* 60-minute lesson bar */
.lesson-bar { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.lesson-bar > div { padding: 30px 30px 32px; background: var(--paper); }
.lesson-bar > div + div { border-left: 1px solid var(--line); }
.lesson-bar .min { font-family: var(--latin); font-weight: 800; font-size: 44px; line-height: 1; }
.lesson-bar .min small { font-family: var(--font); font-size: 16px; margin-left: 2px; }
.lesson-bar h3 { font-size: 19px; font-weight: 900; margin: 14px 0 8px; }
.lesson-bar p { font-size: 14.5px; color: var(--ink-2); }
.lesson-bar .bar { height: 6px; border-radius: 6px; margin-bottom: 22px; }
.lesson-bar > div:first-child .bar { background: var(--teal); }
.lesson-bar > div:last-child .bar { background: var(--ink); }
.lesson-scale { display: flex; justify-content: space-between; margin-top: 10px; }

/* split (text + image) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-img { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.split-img img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.prose p + p { margin-top: 1.2em; }
.prose p { color: var(--ink-2); font-size: 15.5px; }

/* staff */
.staff { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 40px; }
.staff-photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 1/1; background: var(--line); }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-name { font-size: 26px; font-weight: 900; margin: 8px 0 18px; }
.staff-msg { color: var(--ink-2); font-size: 15px; }

/* timetable */
.tt-wrap { display: grid; grid-template-columns: 5fr 2fr; gap: 16px; }
.tt-scroll { overflow-x: auto; }
.tt-cap { margin-bottom: 10px; }
.tt { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tt th, .tt td { padding: 18px 10px; text-align: center; border-bottom: 1px solid var(--line); font-size: 14px; }
.tt tr:last-child th, .tt tr:last-child td { border-bottom: 0; }
.tt thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; background: var(--bg); }
.tt thead th:not(:first-child) { font-family: var(--font); font-size: 14px; color: var(--ink); letter-spacing: 0; }
.tt tbody th { font-family: var(--latin); font-weight: 700; font-size: 14px; white-space: nowrap; text-align: left; padding-left: 20px; }
.tt td.on::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); vertical-align: middle; }
.tt td.off { color: var(--ink-3); font-size: 12px; }
.tt-legend { display: flex; gap: 20px; margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.tt-legend span { display: flex; align-items: center; gap: 8px; }
.tt-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); }
.tt-legend span.off::before { background: var(--line); }
.note { margin-top: 24px; font-size: 13px; color: var(--ink-2); line-height: 1.9; }

/* blog cards */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; transition: border-color .2s; }
.blog-card:hover { border-color: var(--ink); }
.blog-card figure { aspect-ratio: 16/10; background: var(--line); overflow: hidden; }
.blog-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.blog-card:hover img { transform: scale(1.04); }
.blog-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-meta { display: flex; gap: 12px; align-items: center; }
.blog-card-meta .cate { font-size: 11px; font-weight: 700; color: var(--teal-ink); background: var(--teal-soft); padding: 3px 10px; border-radius: 999px; }
.blog-card h3 { font-size: 16px; font-weight: 700; line-height: 1.65; }
.center { text-align: center; margin-top: 48px; }

.sec.is-paper { background: var(--paper); border-block: 1px solid var(--line); }

@media (max-width: 1100px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillars li:nth-child(4) { border-left: 0; }
  .pillars li:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 960px) {
  .page-hero-body { grid-template-columns: 1fr; padding: 100px 32px 64px; }
  .page-hero-aside { justify-self: start; }
  .page-hero-aside img { width: 150px; }
  .num-list, .blog-grid { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .flow::before { display: none; }
  .split, .tt-wrap { grid-template-columns: 1fr; gap: 40px; }
  .staff { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
  .staff-photo { max-width: 280px; }
}
@media (max-width: 640px) {
  .page-hero { padding: 76px 10px 0; }
  .page-hero-body { padding: 80px 22px 56px; }
  .page-title { font-size: clamp(32px, 9vw, 48px); }
  .page-title.-long { font-size: clamp(26px, 8.2vw, 40px); }
  .page-hero-body { gap: 24px; }
  .page-hero-aside img { width: 110px; }
  .local-nav { padding: 0 10px; }
  .num-list, .blog-grid, .flow, .lesson-bar { grid-template-columns: 1fr; }
  .lesson-bar > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .pillars { grid-template-columns: 1fr; }
  .pillars li + li { border-left: 0 !important; border-top: 1px solid var(--line); }
  .num-list li { padding: 28px 22px; }
  .tt th, .tt td { padding: 14px 4px; }
  .tt tbody th { padding-left: 12px; font-size: 12px; }
  .tt td.on::before { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
.area-note { margin-top: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 22px; font-size: 14.5px; color: var(--ink-2); }
.area-note strong { color: var(--teal-ink); margin-right: 12px; }
/* 比較動画は縦長（上：タイピング・下：手書き） */
.speed-video { max-width: 340px; }
.speed-video video { height: auto; aspect-ratio: 9 / 16; object-fit: contain; }
.speed-note + .speed-note { margin-top: 12px; }
.speed-note + .speed-note strong { font-size: inherit; margin: 0; }

/* ==========================================================================
   ACTI ISLAND（アクティアイランドのページ・トップの紹介）
========================================================================== */
/* --- 島の地図 --- */
.isl-map { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: stretch; }
.isl-map-stage { padding: 0; border-radius: 28px; background: #BFEAEB; }
.isl-map-stage::before, .isl-map-stage::after { display: none; }
.isl-map-svg { position: relative; z-index: 1; }
.isl-map-svg svg { display: block; width: 100%; height: auto; }
.isl-info {
  background: var(--paper); border: 1px solid var(--line); border-radius: 28px;
  padding: 34px 30px; display: flex; flex-direction: column;
}
.isl-info-title { font-size: 28px; font-weight: 900; line-height: 1.35; }
.isl-info-sub { margin-top: 8px; font-weight: 700; color: var(--teal-ink); font-size: 14px; }
.isl-info-text { margin: 14px 0 22px; color: var(--ink-2); font-size: 15px; }
.isl-info .text-link { align-self: flex-start; }
.isl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 26px; }
.isl-chips button {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
  transition: background .2s, color .2s, border-color .2s;
}
.isl-chips button:hover { border-color: var(--ink); color: var(--ink); }
.isl-chips button.is-on { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.isl-info.is-swap > :not(.isl-chips) { animation: islSwap .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes islSwap { from { opacity: 0; transform: translateY(8px); } }

/* --- タイピングの島 --- */
.ty { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.ty-levels { display: flex; flex-direction: column; gap: 10px; }
.ty-level {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: grid; grid-template-columns: 82px 1fr; column-gap: 14px; row-gap: 4px; align-items: baseline;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ty-level b { font-size: 20px; font-weight: 900; }
.ty-level .mono { color: var(--teal-ink); font-weight: 700; }
.ty-level-text { grid-column: 2; font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
.ty-level:hover { border-color: var(--ink-3); }
.ty-level.is-on { border-color: var(--teal-ink); box-shadow: inset 4px 0 0 var(--teal-ink); background: #FBFEFE; }
.ty-visual { display: flex; justify-content: center; }
.ty-app { max-width: 560px; }
.ty-body { padding: 22px 24px 26px; }
.ty-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ty-ribbon { font-size: 12px; font-weight: 900; color: #fff; background: var(--orange); padding: 5px 14px; border-radius: 6px; }
.ty-time { font-size: 13px; font-weight: 700; }
.ty-time b { font-family: var(--latin); font-size: 20px; color: var(--orange); }
.ty-card { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 0 8px; }
.ty-ja { font-size: 30px; font-weight: 900; line-height: 1.5; }
.ty-ja rt { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .1em; }
.ty-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; min-height: 76px; }
.ty-word { font-family: var(--latin); font-size: 58px; font-weight: 700; letter-spacing: .01em; color: var(--ink); line-height: 1.2; }
.ty-word .t { color: var(--teal-ink); }
.ty-word .u { display: inline-block; min-width: .55em; border-bottom: 4px solid var(--ink); color: transparent; }
.ty-word .x { color: var(--orange); display: inline-block; animation: tyShake .3s; }
.ty-word .cur { position: relative; }
.ty-word .cur::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--orange); animation: blink 1s steps(1) infinite; }
@keyframes tyShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ty-spk { display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--teal-soft); }
.ty-spk i { width: 4px; height: 40%; border-radius: 2px; background: var(--teal-ink); transform-origin: center; }
.ty-spk.is-on i { animation: eq .6s ease-in-out infinite; }
.ty-spk.is-on i:nth-child(2) { height: 80%; animation-delay: .12s; }
.ty-spk.is-on i:nth-child(3) { height: 60%; animation-delay: .24s; }
.ty-hint { margin-top: 10px; color: var(--teal-ink); min-height: 1.6em; }
.ty-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.ty-triad li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 4px; }
.ty-triad-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-ink); margin-bottom: 10px; }
.ty-triad-ico svg { width: 24px; height: 24px; }
.ty-triad .mono { color: var(--teal-ink); font-weight: 700; }
.ty-triad b { font-size: 24px; font-weight: 900; }
.ty-triad p { font-size: 14px; color: var(--ink-2); }
.ty-note { margin-top: 28px; text-align: center; color: var(--ink-2); font-size: 15px; }
.ty-note strong { color: var(--teal-ink); font-size: 22px; margin-right: 4px; }

/* --- レッスンの島 --- */
.ls { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; }
.ls-map { padding: 62px 34px 34px; background: #E7F6F6; }
.ls-path { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 10px; }
.ls-node {
  aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--paper); border: 2px solid var(--line); line-height: 1.1; position: relative;
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.ls-node small { font-size: 9.5px; font-weight: 700; color: var(--ink-3); }
.ls-node b { font-family: var(--latin); font-size: clamp(16px, 2vw, 24px); font-weight: 800; }
.ls-node.is-test { background: linear-gradient(var(--paper) 0 42%, #DDF2F2 42%); }
.ls-node.is-test b { color: var(--teal-ink); }
.ls-node.is-done { border-color: var(--teal); background: var(--teal-soft); }
.ls-node.is-done::after {
  content: ""; position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ls-node.is-cur { border-color: var(--orange); transform: scale(1.1); box-shadow: 0 0 0 6px rgba(237, 114, 75, .15); }
.ls-node.is-stage { grid-column: span 2; aspect-ratio: auto; border-radius: 999px; border-style: dashed; border-color: var(--teal); background: transparent; }
.ls-node.is-stage b { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--teal-ink); }
.ls-node.is-goal { background: var(--ink); border-color: var(--ink); color: #fff; }
.ls-node.is-goal small { color: var(--teal); }
.ls-pair { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ls-pair .app { max-width: 420px; }
.ls-player { aspect-ratio: 16/7; overflow: hidden; }
.ls-player-chara { position: absolute; right: 12px; bottom: -10px; width: 64px; height: auto; }
.ls-arrow { color: var(--orange); font-weight: 700; }
.ls-nums { display: flex; gap: 4px; margin-bottom: 12px; }
.ls-nums li {
  flex: 1; text-align: center; font-family: var(--latin); font-size: 11px; font-weight: 700;
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 0; color: var(--ink-3);
}
.ls-nums li.is-done { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-ink); }
.ls-nums li.is-cur { background: var(--orange); border-color: var(--orange); color: #fff; }
.ls-q { font-weight: 900; font-size: 15px; text-align: center; }
.ls-audio { display: flex; align-items: center; gap: 10px; margin: 12px auto 14px; padding: 8px 14px; border-radius: 999px; background: var(--line-2); max-width: 260px; }
.ls-audio-play { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ink); }
.ls-audio-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ls-audio-bar i { display: block; height: 100%; width: 0; background: var(--ink); }
.ls-choices { display: grid; gap: 8px; }
.ls-choices li {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--latin); font-weight: 700; font-size: 15px; transition: border-color .2s, background .2s;
}
.ls-choices li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-3); flex: none; transition: background .2s, border-color .2s; }
.ls-choices li.is-pick { border-color: var(--teal); background: var(--teal-soft); }
.ls-choices li.is-pick::before { border-color: var(--teal-ink); background: var(--teal-ink); box-shadow: inset 0 0 0 4px var(--teal-soft); }
.ls-judge { min-height: 30px; margin-top: 10px; text-align: center; font-weight: 900; font-size: 18px; color: var(--teal-ink); }
.ls-judge.is-on { animation: lsPop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes lsPop { from { transform: scale(.4); opacity: 0; } }
.ls-flow { margin-top: 64px; }

/* --- 音読の島 --- */
.od { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.od-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; }
.od-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.od-steps .num { font-family: var(--latin); font-weight: 800; font-size: 30px; line-height: 1; color: var(--teal-ink); letter-spacing: -.03em; }
.od-steps h3 { font-size: 17px; font-weight: 900; line-height: 1.5; }
.od-steps p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.od-visual { position: relative; display: flex; justify-content: center; }
.od-card { max-width: 480px; }
.od-chara { position: absolute; right: -6px; bottom: -40px; width: 110px; height: auto; z-index: 3; }
.od-rounds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 18px; }
.od-rounds li { text-align: center; font-size: 12px; font-weight: 900; padding: 8px 0; border-radius: 10px; border: 1.5px solid #E7C66A; background: #FFFBEF; color: #8A6A1C; transition: background .3s, color .3s; }
.od-rounds li.is-on { background: #E7B53C; border-color: #E7B53C; color: #fff; }
.od-rounds li.is-done { background: #F5E7BE; }
.od-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.od-key { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.od-key-c {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(#FFFFFF, #F8F0DA); border: 2px solid #B08A3E; display: grid; place-items: center;
}
.od-key-c svg { width: 46%; height: 46%; }
.od-key span { font-size: 10.5px; font-weight: 700; color: #8A6A1C; white-space: nowrap; }
.od-stamp {
  position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--orange); color: var(--orange);
  display: grid; place-items: center; font-weight: 900; font-size: 13px; background: rgba(255, 255, 255, .7);
  transform: rotate(-14deg) scale(1.6); opacity: 0; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), opacity .2s;
}
.od-key.is-stamped .od-stamp { transform: rotate(-14deg) scale(1); opacity: 1; }
.od-chest { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: #FFF7E2; border: 1.5px solid #E7C66A; }
.od-chest svg { width: 76px; height: auto; flex: none; overflow: visible; }
.od-lid { transform-origin: 106px 40px; transition: transform .6s cubic-bezier(.2, 1.4, .4, 1); }
.od-glow { opacity: 0; transition: opacity .4s .2s; }
.od-chest.is-open .od-lid { transform: rotate(32deg) translate(2px, -4px); }
.od-chest.is-open .od-glow { opacity: 1; }
.od-chest p { display: flex; flex-direction: column; }
.od-chest .mono { color: #B08A3E; }
.od-chest b { font-size: 16px; }

/* --- 教室とおうち --- */
.hm { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.hm-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 36px 34px 84px; overflow: hidden; }
.hm-card.is-home { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.hm-card .mono { color: var(--teal-ink); font-weight: 700; }
.hm-card.is-home .mono { color: #9FE4E5; }
.hm-card h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; line-height: 1.4; margin: 10px 0 18px; }
.hm-card ul { display: flex; flex-direction: column; gap: 10px; max-width: 24em; }
.hm-card li { position: relative; padding-left: 26px; font-size: 14.5px; font-weight: 700; }
.hm-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); }
.hm-card.is-home li::before { background: #fff; }
.hm-card img { position: absolute; right: 18px; bottom: -14px; width: 88px; height: auto; }
.hm-plus { align-self: center; font-family: var(--latin); font-weight: 800; font-size: 34px; color: var(--teal-ink); }
.hm-value { margin-top: 16px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 40px; }
.hm-value-title { font-size: clamp(24px, 3vw, 36px); font-weight: 900; line-height: 1.4; margin-bottom: 14px; }
.hm-value p { color: var(--ink-2); font-size: 15px; }
.hm-value-list { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.hm-value-list li { padding: 22px 18px; display: flex; flex-direction: column; gap: 4px; }
.hm-value-list li + li { border-left: 1px solid var(--line); }
.hm-value-list .mono { color: var(--teal-ink); }
.hm-value-list b { font-size: 20px; font-weight: 900; }
.hm-value-list li > span:last-child { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }

/* --- タイピング英語の体験（30秒） --- */
.tg { padding: 64px 40px 40px; }
.tg-levels { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.tg-levels button {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px 18px; line-height: 1.5;
  transition: border-color .2s, background .2s, color .2s;
}
.tg-levels button .mono { font-size: 10px; }
.tg-levels button.is-on { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.tg-levels button.is-on .mono { color: #9FE4E5; }
.tg[data-state="play"] .tg-levels, .tg[data-state="count"] .tg-levels { opacity: .4; pointer-events: none; }
.tg-stage { position: relative; z-index: 2; min-height: 400px; border-radius: 22px; background: linear-gradient(#FBFDFD, #F1F8F8); border: 1px solid var(--line-2); display: grid; cursor: text; }
.tg-pane { grid-area: 1 / 1; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 20px; }
.tg[data-state="ready"] .tg-ready, .tg[data-state="count"] .tg-count, .tg[data-state="play"] .tg-play, .tg[data-state="result"] .tg-result { display: flex; }
.tg-ready { gap: 16px; }
.tg-ready img { width: 96px; height: auto; }
.tg-count b { font-family: var(--latin); font-weight: 800; font-size: 120px; line-height: 1; color: var(--teal-ink); animation: tgCount .8s ease-out; }
@keyframes tgCount { from { transform: scale(1.8); opacity: 0; } }
.tg-play { justify-content: flex-start; gap: 4px; }
.tg-bar { display: flex; gap: 22px; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 18px; }
.tg-bar b { font-family: var(--latin); font-size: 20px; color: var(--ink); }
.tg-bar span:first-child b { color: var(--orange); }
.tg-ja { font-size: 32px; font-weight: 900; line-height: 1.5; min-height: 1.6em; }
.tg-ja rt { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .1em; }
.tg-row { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 84px; }
.tg-word { font-family: var(--latin); font-size: 62px; font-weight: 700; letter-spacing: .02em; line-height: 1.2; color: var(--ink); }
.tg-word .t { color: var(--teal-ink); }
.tg-word .u { display: inline-block; min-width: .55em; border-bottom: 4px solid var(--ink); color: transparent; }
.tg-word .cur { position: relative; }
.tg-word .cur::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--orange); animation: blink 1s steps(1) infinite; }
.tg-word.is-miss { animation: tyShake .25s; }
.tg-word.is-miss .cur { color: var(--orange); }
.tg-word.is-done { animation: tgDone .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tgDone { 40% { transform: scale(1.12); } }
.tg-spk { display: flex; align-items: center; gap: 3px; height: 38px; padding: 0 12px; border-radius: 999px; background: var(--teal-soft); border: 0; cursor: pointer; }
.tg-spk i { width: 4px; height: 40%; border-radius: 2px; background: var(--teal-ink); }
.tg-spk i:nth-child(2) { height: 80%; }
.tg-spk i:nth-child(3) { height: 60%; }
.tg-spk.is-on i { animation: eq .6s ease-in-out infinite; }
.tg-spk.is-on i:nth-child(2) { animation-delay: .12s; }
.tg-spk.is-on i:nth-child(3) { animation-delay: .24s; }
.tg-hint { color: var(--teal-ink); min-height: 1.6em; margin-bottom: 14px; }
.tg-kb i { transition: background .15s, border-color .15s, color .15s; }
.tg-kb i.on { animation: none; }
.tg-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.tg-result { flex-direction: row; gap: 30px; text-align: left; }
.tg-result img { width: 110px; height: auto; }
.tg-result-msg { font-size: 22px; font-weight: 900; line-height: 1.5; margin-bottom: 14px; }
.tg-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; margin-bottom: 18px; }
.tg-stats li { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 4px; }
.tg-stats li .mono { grid-column: 1 / -1; }
.tg-stats .mono { color: var(--teal-ink); }
.tg-stats b { font-family: var(--latin); font-size: 30px; font-weight: 800; line-height: 1.1; }
.tg-stats small { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tg-result-cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .tg { padding: 56px 14px 18px; }
  .tg-stage { min-height: 360px; }
  .tg-word { font-size: 42px; }
  .tg-ja { font-size: 24px; }
  .tg-bar { gap: 14px; }
  .tg-result { flex-direction: column; text-align: center; }
  .tg-stats { grid-template-columns: repeat(3, 1fr); }
  .tg-result-cta { justify-content: center; }
  .tg-kb i { width: 22px; height: 24px; font-size: 9px; }
}

/* --- トップのアクティアイランド紹介 --- */
.isl-teaser { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.isl-teaser-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 28px 0 30px; }
.isl-teaser-list li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; display: flex; flex-direction: column; }
.isl-teaser-list .mono { color: var(--teal-ink); }
.isl-teaser-list b { font-size: 15px; }
.isl-teaser-list li > span:last-child { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 960px) {
  .isl-map, .ty, .ls, .od, .isl-teaser { grid-template-columns: 1fr; }
  .isl-info { padding: 26px 24px; }
  .ty { gap: 32px; }
  .ty-triad { grid-template-columns: 1fr; }
  .od { gap: 48px; }
  .hm { grid-template-columns: 1fr; }
  .hm-plus { justify-self: center; }
  .hm-value { grid-template-columns: 1fr; padding: 30px 26px; }
}
@media (max-width: 640px) {
  .isl-map-stage { border-radius: 20px; }
  /* スマホでも地図は1枚で画面に収める（島の名前の札は main.js で大きくする） */
  .isl-map-svg svg { width: 100%; max-width: 100%; }
  .isl-info-title { font-size: 24px; }
  .ty-level { grid-template-columns: 1fr; padding: 16px 18px; }
  .ty-level-text { grid-column: 1; }
  .ty-word { font-size: 40px; }
  .ty-ja { font-size: 24px; }
  .ty-card { min-height: 190px; }
  .ls-map { padding: 54px 16px 20px; }
  .ls-path { grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
  .od-keys { grid-template-columns: repeat(4, 1fr); }
  .od-chara { width: 80px; bottom: -30px; }
  .hm-card { padding: 28px 24px 76px; }
  .hm-card img { width: 70px; }
  .hm-value-list { grid-template-columns: 1fr; }
  .hm-value-list li + li { border-left: 0; border-top: 1px solid var(--line); }
  .isl-teaser-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Header menu groups (dropdown) / footer contact / courses
========================================================================== */
.hd-logo { flex: none; }
.hd-logo img { display: block; }
.hd-nav { align-items: center; gap: 26px; }
.hd-grp { position: relative; }
.hd-grp-btn {
  display: flex; align-items: center; gap: 7px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap;
}
.hd-grp-btn::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.hd-grp.is-open .hd-grp-btn, .hd-grp-btn:hover { color: var(--ink); }
.hd-grp.is-open .hd-grp-btn::after { transform: translateY(1px) rotate(-135deg); }
.hd-grp:has([aria-current="page"]) > .hd-grp-btn { color: var(--ink); box-shadow: inset 0 -2px 0 var(--teal); }
.hd-sub {
  position: absolute; top: 100%; left: 50%; min-width: 210px; z-index: 5;
  display: flex; flex-direction: column; padding: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: 0 24px 40px -20px rgba(18, 20, 22, .28);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.hd-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.hd-grp.is-open .hd-sub { opacity: 1; visibility: visible; transform: translate(-50%, 4px); }
@media (hover: hover) and (min-width: 1141px) {
  .hd-grp:hover .hd-sub { opacity: 1; visibility: visible; transform: translate(-50%, 4px); }
  .hd-grp:hover .hd-grp-btn { color: var(--ink); }
}
.hd-nav .hd-sub a { padding: 10px 14px; border-radius: 8px; font-size: 13.5px; }
.hd-nav .hd-sub a:hover { background: var(--teal-soft); color: var(--teal-ink); }
.hd-nav .hd-sub a[aria-current="page"] { box-shadow: none; background: var(--teal-soft); color: var(--teal-ink); }

@media (max-width: 1140px) {
  .hd-nav {
    align-items: stretch; gap: 0; max-height: calc(100dvh - 90px); overflow-y: auto; padding: 6px 20px 20px;
  }
  .hd-grp { padding: 12px 0 6px; border-bottom: 1px solid var(--line-2); }
  .hd-grp-btn {
    pointer-events: none; padding: 0 0 2px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--teal-ink);
  }
  .hd-grp-btn::after, .hd-sub::before { display: none; }
  .hd-grp:has([aria-current="page"]) > .hd-grp-btn { box-shadow: none; color: var(--teal-ink); }
  .hd-sub {
    position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; min-width: 0; padding: 0;
    border: 0; box-shadow: none; background: none; opacity: 1; visibility: inherit; transform: none;
  }
  .hd-nav .hd-sub a { padding: 9px 0; border: 0; border-radius: 0; font-size: 15px; color: var(--ink); }
  .hd-nav .hd-sub a:hover { background: none; }
  .hd-nav .hd-sub a[aria-current="page"] { background: none; color: var(--teal-ink); }
  .hd-nav .hd-nav-cta { margin-top: 16px; padding: 14px 0; font-size: 15px; }
}

/* staff photo: portrait, keep the face in view */
.staff-photo { aspect-ratio: 4/5; }
.staff-photo img { object-position: 50% 10%; }

/* footer: classroom TEL + SNS icons */
.ft-brand .ft-tel {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 20px;
  padding: 10px 26px 10px 10px; border-radius: 999px;
  background: var(--teal-ink); color: #fff; text-decoration: none;
  box-shadow: 0 14px 28px -16px rgba(10, 123, 126, .9);
  transition: transform .2s, background .2s;
}
.ft-brand .ft-tel:hover { background: var(--ink); transform: translateY(-2px); }
.ft-tel-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.ft-tel-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ft-tel-txt small { font-size: 12px; font-weight: 700; opacity: .9; }
.ft-tel-txt b { font-family: var(--latin); font-size: 25px; font-weight: 800; letter-spacing: .03em; }
.ft-tel-tap { display: none; }
.ft-brand .ft-tel-hours { margin-top: 10px; font-size: 12px; }
.ft-sns { display: flex; gap: 10px; margin-top: 18px; }
.ft-brand .ft-sns a {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink); transition: transform .2s, border-color .2s;
}
.ft-brand .ft-sns a:hover { transform: translateY(-2px); border-color: var(--ink); }
.ft-brand .ft-sns .ft-sns-ig { color: #C13584; }
.ft-brand .ft-sns .ft-sns-line { color: var(--line-green); }
@media (max-width: 640px) {
  .ft-brand .ft-tel { display: flex; width: 100%; }
  .ft-tel-tap { display: inline; }
}

/* course cards */
.crs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.crs-card > a {
  height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 30px 28px 26px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: var(--ink); transition: transform .25s, border-color .25s, box-shadow .25s;
}
.sec.is-paper .crs-card > a { background: var(--bg); }
.crs-card > a:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 24px 40px -28px rgba(18, 20, 22, .4); }
.crs-card.is-main > a, .sec.is-paper .crs-card.is-main > a { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.crs-card-no { color: var(--teal-ink); }
.crs-card.is-main .crs-card-no { color: #BFEDEE; }
.crs-card-name { font-size: 24px; font-weight: 900; line-height: 1.4; margin-top: 4px; }
.crs-card-who { font-size: 13px; font-weight: 700; color: var(--teal-ink); }
.crs-card.is-main .crs-card-who { color: #BFEDEE; }
.crs-card-txt { font-size: 14px; color: var(--ink-2); line-height: 1.8; margin-top: 6px; flex: 1; }
.crs-card.is-main .crs-card-txt { color: rgba(255, 255, 255, .85); }
.crs-card-meta { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 900; font-size: 16px; }
.crs-card.is-main .crs-card-meta { border-color: rgba(255, 255, 255, .25); }
.crs-card-meta .mono { font-size: 10.5px; color: var(--ink-3); }
.crs-card.is-main .crs-card-meta .mono { color: #BFEDEE; }
.crs-card-more { font-size: 13px; font-weight: 700; margin-top: 10px; }
.crs-path { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.crs-path span { font-size: 13px; font-weight: 700; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.crs-path span.is-main { background: var(--teal-soft); border-color: transparent; color: var(--teal-ink); }
.crs-path i { width: 28px; height: 1.5px; background: var(--teal); position: relative; }
.crs-path i::after { content: ""; position: absolute; right: 0; top: -3.5px; border: 4px solid transparent; border-left: 6px solid var(--teal); border-right: 0; }
.crs-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }

/* course feature blocks */
.crs-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.crs-feature.is-rev > :first-child { order: 2; }
.crs-grades { display: flex; gap: 10px; margin: 28px 0 8px; }
.crs-grades li {
  flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14px 8px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.crs-grades li:last-child { border-color: var(--teal); background: var(--teal-soft); }
.crs-grades b { font-family: var(--latin); font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--teal-ink); }
.crs-grades b small { font-family: var(--font); font-size: 14px; margin-left: 2px; }
.crs-grades span { font-size: 11.5px; color: var(--ink-2); }
.crs-points { display: grid; gap: 4px; margin-top: 20px; }
.crs-points li { display: grid; grid-template-columns: 40px 1fr; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.crs-points .mono { color: var(--teal-ink); padding-top: 3px; }
.crs-points b { font-size: 16px; }
.crs-points p { font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.crs-time { font-family: var(--latin); font-size: 22px; font-weight: 800; color: var(--teal-ink); }

/* app mock (phone) */
.crs-phone-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 24px 30px; background: var(--teal-soft); border-color: transparent; }
.crs-phone {
  position: relative; z-index: 2;
  width: 100%; max-width: 300px; border-radius: 34px; padding: 10px; background: var(--ink);
  box-shadow: 0 40px 60px -30px rgba(18, 20, 22, .45);
}
.crs-phone > * { background: var(--paper); }
.crs-phone-bar { border-radius: 26px 26px 0 0; padding: 16px 16px 10px; text-align: center; }
.crs-phone-app { font-size: 13px; font-weight: 900; color: var(--teal-ink); }
.crs-phone-tabs { display: flex; gap: 6px; padding: 0 16px 10px; }
.crs-phone-tabs span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 5px 0; border-radius: 999px; background: var(--bg); color: var(--ink-2); }
.crs-phone-tabs span.is-on { background: var(--teal-ink); color: #fff; }
.crs-phone-body { border-radius: 0 0 26px 26px; padding: 14px 16px 20px; border-top: 1px solid var(--line-2); }
.crs-q-no { color: var(--ink-3); font-size: 10px; }
.crs-q { font-family: var(--latin); font-weight: 700; font-size: 15px; line-height: 1.5; margin: 6px 0 12px; }
.crs-choices { display: grid; gap: 6px; }
.crs-choices li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--latin); font-weight: 700; font-size: 14px; }
.crs-choices li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-size: 11px; color: var(--ink-2); }
.crs-choices li.is-ok { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-ink); }
.crs-choices li.is-ok span { background: var(--teal-ink); color: #fff; }
.crs-ok { margin-top: 10px; font-size: 13px; font-weight: 900; color: var(--orange); line-height: 1.5; }
.crs-ok small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-2); }
.crs-prog { height: 6px; border-radius: 6px; background: var(--bg); margin-top: 12px; overflow: hidden; }
.crs-prog span { display: block; height: 100%; background: var(--teal); border-radius: 6px; }
.crs-phone-cap { position: relative; z-index: 2; color: var(--teal-ink); font-size: 10.5px; }

/* kids class visual */
.crs-kids { min-height: 380px; background: #FFF6EF; border-color: transparent; }
.crs-clock {
  position: absolute; left: 50%; top: 46px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; color: var(--orange);
}
.crs-clock b { font-family: var(--latin); font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1.1; margin-top: 10px; }
.crs-clock span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--orange); }
.crs-kids-a, .crs-kids-m { position: absolute; bottom: 18px; width: 150px; height: auto; }
.crs-kids-a { left: 8%; }
.crs-kids-m { right: 8%; }
.crs-bubble {
  position: absolute; font-size: 13px; font-weight: 900; background: var(--paper); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 999px;
}
/* ふきだしはキャラの頭の上（顔にかからないように下からの位置で合わせる） */
.crs-bubble.is-1 { left: 7%; bottom: 178px; font-family: var(--latin); color: var(--teal-ink); }
.crs-bubble.is-2 { right: 4%; bottom: 212px; color: var(--orange); }
.crs-trial-btns { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 960px) {
  .crs-cards { grid-template-columns: 1fr; }
  .crs-feature { grid-template-columns: 1fr; gap: 40px; }
  .crs-feature.is-rev > :first-child { order: 0; }
}
@media (max-width: 640px) {
  .crs-kids-a, .crs-kids-m { width: 110px; }
  .crs-kids { min-height: 470px; }
  .crs-bubble.is-1 { bottom: 138px; }
  .crs-bubble.is-2 { bottom: 170px; }
  .crs-trial-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .crs-trial-btns .btn { padding: 15px 8px; }
  .crs-tel-no { display: none; }
  .crs-path i { width: 14px; }
}

/* ==========================================================================
   英検合格コース（eiken.html）の部品 ek-
========================================================================== */

/* スマホの枠 */
.ek-phone {
  position: relative; width: 100%; aspect-ratio: 390 / 844;
  background: var(--ink); border-radius: 30px; padding: 6px;
  box-shadow: 0 24px 48px -24px rgba(18, 20, 22, .35);
}
.ek-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }

/* ヒーロー右側: 2台のスマホ + 3Dのペンタ君 */
.page-hero-aside.ek-hero-aside { width: 360px; height: 420px; align-self: center; }
.ek-hero-aside .ek-phone { position: absolute; width: 180px; }
.ek-hero-aside .ek-phone.-back { left: 0; top: 0; transform: rotate(-6deg); }
.ek-hero-aside .ek-phone.-front { right: 18px; top: 40px; transform: rotate(4deg); }
.page-hero-aside.ek-hero-aside .ek-phone img { width: 100%; }
.page-hero-aside.ek-hero-aside .ek-penta { position: absolute; left: 92px; bottom: -30px; width: 120px; height: auto; z-index: 2; filter: drop-shadow(0 10px 12px rgba(18, 20, 22, .18)); }

/* アプリ紹介(split の左): スマホ + ペンタ君 */
.ek-app-visual { position: relative; display: flex; justify-content: center; padding: 20px 0 30px; }
.ek-app-visual .ek-phone { width: min(260px, 64%); }
.ek-app-visual .ek-penta { position: absolute; right: 6%; bottom: 0; width: min(150px, 30%); height: auto; filter: drop-shadow(0 12px 14px rgba(18, 20, 22, .18)); }
.ek-app-name { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.ek-app-name img { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line); }
.ek-app-name b { display: block; font-size: 16px; font-weight: 900; }
.ek-app-name span { font-size: 13px; color: var(--ink-2); }
.ek-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ek-tags li { font-size: 13px; font-weight: 700; background: var(--teal-soft); color: var(--teal-ink); border-radius: 999px; padding: 7px 14px; }

/* 学習モード: アプリと同じ色のアイコン */
.ek-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ek-mode { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.ek-mode-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c); color: #fff; margin-bottom: 10px; box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 70%, #000); }
.ek-mode-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ek-mode h3 { font-size: 17px; font-weight: 900; line-height: 1.5; }
.ek-mode p { font-size: 13.5px; color: var(--ink-2); }
.ek-mode.-wide { grid-column: span 2; }

/* アプリ画面のならび(スマホは横スクロール) */
.ek-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 72px; }
.ek-shots figure { margin: 0; }
.ek-shots figcaption { margin-top: 16px; font-size: 13.5px; font-weight: 700; text-align: center; }
.ek-shots figcaption .mono { display: block; margin-bottom: 4px; color: var(--teal-ink); }

/* つづけられる工夫 */
.ek-keep { margin-top: 30px; border-top: 1px solid var(--line); }
.ek-keep li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ek-keep .mono { color: var(--teal-ink); padding-top: 4px; }
.ek-keep h3 { font-size: 16px; font-weight: 900; margin-bottom: 4px; }
.ek-keep p { font-size: 14px; color: var(--ink-2); }

/* 見守り: 保護者・先生 */
.ek-roles { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.ek-role { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 34px; position: relative; overflow: hidden; }
.ek-role .en { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--teal-ink); }
.ek-role h3 { font-size: 22px; font-weight: 900; line-height: 1.5; margin: 10px 0 12px; }
.ek-role > p { font-size: 14.5px; color: var(--ink-2); max-width: 30em; }
.ek-role ul { margin-top: 22px; display: grid; gap: 10px; }
.ek-role li { font-size: 14px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
.ek-role li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); transform: translateY(-1px); }
.ek-role.-parent { display: grid; grid-template-columns: 1fr 190px; gap: 28px; align-items: start; }
.ek-role.-parent .ek-phone { margin-bottom: -120px; }
.ek-role.-teacher { background: var(--teal-soft); border-color: transparent; }

/* コース概要 */
.ek-outline { border-top: 1px solid var(--line); }
.ek-outline div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ek-outline dt { font-weight: 900; font-size: 15px; }
.ek-outline dd { margin: 0; font-size: 15px; color: var(--ink-2); }
.ek-outline dd b { color: var(--ink); }

/* 実績は3つ */
.result-grid.ek-results { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1100px) {
  .ek-modes { grid-template-columns: repeat(2, 1fr); }
  .ek-mode.-wide { grid-column: span 2; }
}
@media (max-width: 960px) {
  .page-hero-aside.ek-hero-aside { width: 300px; height: 360px; margin: 8px auto 20px; justify-self: center; }
  .ek-hero-aside .ek-phone { width: 150px; }
  .page-hero-aside.ek-hero-aside .ek-penta { left: 78px; width: 100px; }
  .ek-shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; margin: 56px -24px 0; padding: 0 24px 12px; }
  .ek-shots figure { flex: 0 0 200px; scroll-snap-align: start; }
  .ek-shots-hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 48px 0 -40px; font-size: 12.5px; font-weight: 700; color: var(--teal-ink); }
  .ek-shots-hint span { display: inline-block; animation: ek-hint 1.2s ease-in-out infinite; }
  @keyframes ek-hint { 50% { transform: translateX(4px); } }
  .ek-roles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ek-modes { grid-template-columns: 1fr; }
  .ek-mode.-wide { grid-column: auto; }
  .ek-keep li { grid-template-columns: 1fr; gap: 6px; }
  .ek-shots { margin: 48px -20px 0; padding: 0 20px 12px; }
  .ek-shots figure { flex-basis: 156px; }
  .ek-shots-hint { margin-bottom: -34px; }
  .ek-app-visual .ek-phone { width: 220px; }
  .result-grid.ek-results { grid-template-columns: 1fr; }
  .ek-results .result { border-left: 0 !important; border-top: 1px solid var(--line); }
  .ek-results .result:first-child { border-top: 0; }
  .ek-role { padding: 28px 22px; }
  .ek-role.-parent { grid-template-columns: 1fr; }
  .ek-role.-parent .ek-phone { width: 180px; margin: 0 auto -110px; }
  .ek-outline div { grid-template-columns: 1fr; gap: 6px; }
}

/* タイピング体験：本物の画面ではないことのおことわり */
.tg-notice { position: relative; z-index: 2; margin: 14px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
/* コースページ：英検アプリの実際の画面 */
.crs-phone-stage { position: relative; }
.crs-phone-stage .ek-phone { position: relative; z-index: 2; width: min(250px, 66%); }
.crs-penta { position: absolute; z-index: 3; right: 8%; bottom: 36px; width: min(130px, 28%); height: auto; filter: drop-shadow(0 12px 14px rgba(18, 20, 22, .18)); }

/* 上にもどるボタン */
.to-top {
  position: fixed; right: 20px; bottom: 24px; z-index: 95;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--paper); color: var(--teal-ink); border: 1px solid var(--line);
  box-shadow: 0 14px 28px -16px rgba(18, 20, 22, .45);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s, color .2s;
}
.to-top span { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--teal-ink); color: #fff; border-color: var(--teal-ink); }
.crs-trial { margin: 20px 0 16px; font-size: 14.5px; color: var(--ink-2); }
.crs-trial b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
@media (max-width: 640px) {
  .to-top { right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
}

/* 特長が4つのとき：2列×2段 */
.num-list.-x4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .num-list.-x4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   クラスA→Dのステップアップ（course.html）
========================================================================== */
.cls { margin-top: 72px; padding: 64px 48px 40px; }
.cls-head { max-width: 640px; position: relative; z-index: 2; }
.cls-title { font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.4; }
.cls-lead { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.cls-body { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: stretch; margin-top: 40px; }

/* グラフ */
.cls-chart { position: relative; height: 380px; padding: 70px 0 0 44px; }
.cls-grid { position: absolute; left: 44px; right: 0; top: 70px; bottom: 64px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.cls-grid i { position: relative; height: 1px; background: var(--line-2); }
.cls-grid i::before {
  content: attr(data-v); position: absolute; right: calc(100% + 8px); top: -7px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); white-space: nowrap;
}
.cls-arrow { position: absolute; left: 44px; right: 0; top: 30px; bottom: 64px; width: calc(100% - 44px); height: calc(100% - 94px); overflow: visible; pointer-events: none; }
.cls-arrow { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.3, .7, .2, 1) .5s; }
.cls.is-play .cls-arrow { clip-path: inset(-20px -20px -20px 0); }
.cls-arrow path { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cls-arrow .cls-arrow-line { stroke-dasharray: 1 7; }
.cls-stepup {
  position: absolute; right: 0; top: 4px; font-size: 11px; font-weight: 700; color: var(--orange); letter-spacing: .1em;
  opacity: 0; transform: translate(-10px, 10px); transition: opacity .5s 1.9s, transform .5s 1.9s;
}
.cls.is-play .cls-stepup { opacity: 1; transform: none; }

.cls-bars { position: relative; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.cls-bar {
  height: 100%; display: grid; grid-template-rows: 1fr auto auto; align-items: end; gap: 0;
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); text-align: center;
}
.cls-col { position: relative; display: block; height: calc(var(--h) * 100%); min-height: 64px; }
.cls-col::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px 14px 4px 4px; background: var(--c);
  opacity: .28; transform-origin: bottom; transform: scaleY(0);
  transition: transform .9s cubic-bezier(.3, 1.3, .4, 1), opacity .3s, box-shadow .3s;
}
.cls-bar:nth-child(2) .cls-col::before { transition-delay: .15s, 0s, 0s; }
.cls-bar:nth-child(3) .cls-col::before { transition-delay: .3s, 0s, 0s; }
.cls-bar:nth-child(4) .cls-col::before { transition-delay: .45s, 0s, 0s; }
.cls.is-play .cls-col::before { transform: scaleY(1); }
.cls-bar:hover .cls-col::before { opacity: .5; }
.cls-bar.is-on .cls-col::before { opacity: 1; box-shadow: 0 18px 30px -18px var(--c); }
.cls-num {
  position: absolute; left: 0; right: 0; top: 12px; z-index: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  color: var(--ink); opacity: 0; transition: opacity .4s, color .3s;
}
.cls.is-play .cls-num { opacity: 1; transition-delay: .9s, 0s; }
.cls-bar.is-on .cls-num { color: #fff; }
.cls-num b { font-family: var(--latin); font-size: clamp(16px, 1.9vw, 24px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cls-num small { font-size: 11px; font-weight: 700; }
.cls-letter {
  display: grid; place-items: center; margin: 10px auto 2px; width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--latin); font-size: 17px; font-weight: 800; border: 1.5px solid var(--line); background: var(--paper);
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.cls-bar.is-on .cls-letter { background: var(--c); border-color: var(--c); color: #fff; transform: scale(1.12); }
.cls-goal { font-size: 11.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cls-bar.is-on .cls-goal { color: var(--ink); }
.cls-bar:focus-visible { outline: none; }
.cls-bar:focus-visible .cls-letter { box-shadow: 0 0 0 3px var(--teal-soft), 0 0 0 5px var(--teal); }

/* 棒の上をぴょんと移るキャラ */
.cls-chara {
  position: absolute; left: 0; top: 0; width: 64px; height: auto; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity .4s;
  filter: drop-shadow(0 6px 6px rgba(18, 20, 22, .15));
}
.cls.is-ready .cls-chara { opacity: 1; }

/* 説明 */
.cls-panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 28px 22px;
}
.cls-panel-in { flex: 1; }
.cls-tag { display: flex; align-items: center; gap: 10px; }
.cls-tag-letter {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  font-family: var(--latin); font-size: 26px; font-weight: 800; color: #fff; background: var(--teal);
  transition: background .3s;
}
.cls-tag .mono { color: var(--ink-3); letter-spacing: .14em; }
.cls-name { font-size: 20px; font-weight: 900; margin: 14px 0 12px; line-height: 1.45; }
.cls-spec { border-top: 1px solid var(--line); }
.cls-spec > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cls-spec dt { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.cls-spec dd { font-size: 14.5px; font-weight: 900; }
.cls-text { margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.85; }
.cls-auto { height: 3px; border-radius: 3px; background: var(--line); margin-top: 18px; overflow: hidden; }
.cls-auto span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 3px; }
.cls.is-manual .cls-auto { visibility: hidden; }
.cls-note { position: relative; z-index: 2; margin-top: 26px; font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 960px) {
  .cls { padding: 56px 28px 32px; }
  .cls-body { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .cls { margin-top: 48px; padding: 52px 16px 26px; }
  .cls-chart { height: 320px; padding: 64px 0 0 34px; }
  .cls-grid, .cls-arrow { left: 34px; }
  .cls-grid { top: 64px; bottom: 60px; }
  .cls-arrow { width: calc(100% - 34px); }
  .cls-bars { gap: 8px; }
  .cls-col { min-height: 56px; }
  .cls-num { flex-direction: column; align-items: center; gap: 0; top: 10px; }
  .cls-num b { font-size: 15px; }
  .cls-goal { font-size: 10.5px; }
  .cls-chara { width: 50px; }
  .cls-panel { padding: 22px 18px 18px; }
  .cls-spec > div { grid-template-columns: 92px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cls-col::before, .cls-arrow, .cls-stepup, .cls-num { transition: none !important; }
}

/* ==========================================================================
   入会までの流れ（schedule.html）：線がのびて、めーちゃんが順にぴょんと移る
========================================================================== */
.jn { position: relative; padding-top: 70px; }
.jn-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; z-index: 1; }
.jn-list li { position: relative; }
.jn-list h3 { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.jn-list p { font-size: 14px; color: var(--ink-2); padding-right: 12px; }
.jn-list h3, .jn-list p { opacity: .35; transform: translateY(8px); transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.jn-list li.is-on h3, .jn-list li.is-on p { opacity: 1; transform: none; }
.jn-list li.is-on p { transition-delay: .08s; }

.jn-dot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 80px; height: 80px; border-radius: 50%; margin-bottom: 20px;
  background: var(--paper); border: 1.5px solid var(--line); color: var(--ink-3);
  transform: scale(.82); transition: background .35s, border-color .35s, color .35s, transform .5s cubic-bezier(.3, 1.6, .4, 1), box-shadow .35s;
}
.jn-dot em { font-style: normal; font-family: var(--latin); font-weight: 800; font-size: 11px; letter-spacing: .04em; }
.jn-list li.is-on .jn-dot {
  background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; transform: scale(1);
  box-shadow: 0 14px 26px -14px rgba(10, 123, 126, .9);
}
.jn-list li.is-on .jn-dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--teal);
  animation: jn-ring .9s ease-out forwards;
}
@keyframes jn-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.jn-free {
  position: absolute; top: -6px; right: -12px; padding: 3px 8px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 900; line-height: 1.3;
  transform: rotate(8deg) scale(0); transition: transform .45s cubic-bezier(.3, 1.8, .4, 1) .25s;
}
.jn-list li.is-on .jn-free { transform: rotate(8deg) scale(1); }

/* 線（灰色の下地の上を、ティールがのびる） */
.jn-track { position: absolute; z-index: 0; background: var(--line); border-radius: 2px; pointer-events: none; }
.jn-fill { position: absolute; inset: 0; background: var(--teal); border-radius: 2px; transform-origin: left center; transform: scaleX(0); transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.jn.is-vertical .jn-fill { transform-origin: center top; transform: scaleY(0); }

.jn-chara {
  position: absolute; left: 0; top: 0; z-index: 2; width: 60px; height: auto; pointer-events: none;
  opacity: 0; transition: opacity .3s; filter: drop-shadow(0 6px 6px rgba(18, 20, 22, .15));
}
.jn.is-ready .jn-chara { opacity: 1; }
.jn-go {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  font-family: var(--latin); font-weight: 800; font-size: 15px; letter-spacing: .06em; color: var(--orange);
  background: var(--paper); border: 1.5px solid var(--orange); border-radius: 999px; padding: 4px 12px;
  opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.8, .4, 1);
}
.jn.is-done .jn-go { opacity: 1; transform: scale(1); }

@media (max-width: 960px) {
  .jn { padding-top: 0; }
  .jn-list { grid-template-columns: 1fr; gap: 26px; }
  .jn-list li { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; align-items: start; }
  .jn-dot { width: 64px; height: 64px; margin: 0; grid-row: span 2; }
  .jn-dot svg { width: 22px; height: 22px; }
  .jn-list h3 { margin: 8px 0 2px; }
  .jn-chara, .jn-go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jn-list h3, .jn-list p, .jn-dot, .jn-fill, .jn-free { transition: none !important; }
  .jn-list li.is-on .jn-dot::after { animation: none; }
}

/* ==========================================================================
   実績：学んだ期間の線の上に、生徒の結果が順に出てくる（index・about）
========================================================================== */
.rs-legend { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.rs-legend-line { flex: none; width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--orange)); }
.rs-chart { position: relative; height: 470px; margin: 0 8px; }
.rs-axis { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--line); }
.rs-axis-fill {
  position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--orange));
  transform-origin: left center; transform: scaleX(0);
}
.rs-head {
  position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--orange); opacity: 0;
}
.rs-ticks li {
  position: absolute; left: calc(var(--x) * 100%); top: 50%; transform: translate(-50%, 14px);
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap;
}
.rs-ticks li::before {
  content: ""; position: absolute; left: 50%; top: -18px; width: 1.5px; height: 10px; background: var(--ink-3); opacity: .5;
}
.rs-ticks li:first-child { transform: translate(0, 14px); }
.rs-ticks li:first-child::before { left: 0; }
.rs-ticks li:last-child { transform: translate(-100%, 14px); }
.rs-ticks li:last-child::before { left: auto; right: 0; }

.rs-item { position: absolute; left: calc(var(--x) * 100%); top: 50%; width: 0; height: 0; }
.rs-pin {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal-ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--teal-ink); transform: scale(0);
}
.rs-pin::before { content: ""; position: absolute; left: 50%; width: 1.5px; margin-left: -.75px; background: var(--teal-ink); opacity: .45; }
.rs-item.is-up .rs-pin::before { bottom: 100%; height: 44px; }
.rs-item.is-down .rs-pin::before { top: 100%; height: 44px; }
.rs-card {
  position: absolute; width: 236px; display: flex; gap: 12px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 20px 34px -24px rgba(18, 20, 22, .35);
  left: 0; transform: translateX(-50%); opacity: 0;
}
.rs-item.is-up .rs-card { bottom: 50px; }
.rs-item.is-down .rs-card { top: 50px; }
.rs-item:first-child .rs-card { transform: translateX(-26px); }
.rs-item.is-end .rs-card { transform: translateX(calc(-100% + 26px)); }
.rs-badge {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  font-family: var(--latin); font-size: 22px; font-weight: 800; line-height: 1; color: #fff; text-align: center;
}
.rs-badge small { display: block; font-family: var(--font); font-size: 10px; font-weight: 700; margin-top: -10px; }
.rs-badge.g5 { background: var(--teal); }
.rs-badge.g4 { background: var(--teal-ink); }
.rs-badge.g3 { background: var(--orange); }
.rs-badge.gw { background: var(--ink); }
.rs-badge.gw small { font-size: 12px; margin: 0; }
.rs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-who { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.rs-what { font-size: 16px; font-weight: 900; line-height: 1.45; }
.rs-note { font-size: 12px; font-weight: 700; color: var(--orange); }
.rs-when { margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.rs-when strong { font-family: var(--latin); font-size: 18px; font-weight: 800; color: var(--teal-ink); margin-left: 2px; }

/* 動き：線がのびて、通りすぎたところの結果がぽんと出る */
.rs.is-play .rs-axis-fill { transform: scaleX(1); transition: transform 3.2s linear .3s; }
.rs.is-play .rs-head { left: 100%; opacity: 1; transition: left 3.2s linear .3s, opacity .2s .3s; }
.rs.is-play .rs-pin { transform: scale(1); transition: transform .45s cubic-bezier(.3, 1.8, .4, 1) calc(.3s + var(--x) * 3.2s); }
.rs.is-play .rs-card { opacity: 1; transition: opacity .45s calc(.4s + var(--x) * 3.2s), translate .55s cubic-bezier(.3, 1.5, .4, 1) calc(.4s + var(--x) * 3.2s); }
.rs.is-play .rs-item.is-up .rs-card, .rs.is-play .rs-item.is-down .rs-card { translate: 0 0; }
.rs-item.is-up .rs-card { translate: 0 14px; }
.rs-item.is-down .rs-card { translate: 0 -14px; }
.rs.is-play .rs-badge { animation: rs-pop .6s cubic-bezier(.3, 1.8, .4, 1) both; animation-delay: calc(.5s + var(--x) * 3.2s); }
@keyframes rs-pop { from { transform: scale(.3) rotate(-20deg); } to { transform: none; } }

@media (max-width: 860px) {
  /* スマホ・タブレット：縦の線にして、上から順に */
  .rs-chart { height: auto; margin: 16px 0 0; padding: 4px 0 4px 0; }
  .rs-axis { left: 74px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; margin: 0; background: var(--line); }
  .rs-axis-fill { background: linear-gradient(180deg, var(--teal), var(--orange)); transform-origin: center top; transform: scaleY(0); }
  .rs-head { left: 50%; top: 0; margin: -8px 0 0 -8px; }
  .rs-ticks { display: none; }
  .rs-items { display: grid; gap: 16px; }
  .rs-item { position: relative; left: auto; top: auto; width: auto; height: auto; display: grid; grid-template-columns: 76px 1fr; align-items: center; }
  .rs-pin { left: 67px; top: 50%; margin-top: -9px; }
  .rs-pin::before { display: none; }
  .rs-card, .rs-item:first-child .rs-card, .rs-item.is-end .rs-card {
    position: relative; left: auto; top: auto !important; bottom: auto !important; width: auto; grid-column: 2; margin-left: 20px; transform: none;
  }
  .rs-item.is-up .rs-card, .rs-item.is-down .rs-card { translate: 16px 0; }
  .rs-item::before {
    content: attr(data-when); grid-column: 1; grid-row: 1; justify-self: start;
    font-family: var(--latin); font-size: 13px; font-weight: 800; color: var(--teal-ink); white-space: nowrap;
  }
  .rs.is-play .rs-axis-fill { transform: scaleY(1); transition: transform 2.6s linear .3s; }
  .rs.is-play .rs-head { left: 50%; top: 100%; transition: top 2.6s linear .3s, opacity .2s .3s; }
  .rs.is-play .rs-pin { transition-delay: calc(.3s + var(--i) * .5s); }
  .rs.is-play .rs-card { transition-delay: calc(.4s + var(--i) * .5s), calc(.4s + var(--i) * .5s); }
  .rs.is-play .rs-badge { animation-delay: calc(.5s + var(--i) * .5s); }
}
@media (prefers-reduced-motion: reduce) {
  .rs .rs-axis-fill { transform: none !important; }
  .rs .rs-pin { transform: none; }
  .rs .rs-card { opacity: 1; translate: 0 0 !important; }
  .rs .rs-head { display: none; }
  .rs.is-play .rs-badge { animation: none; }
}

/* ==========================================================================
   きょうだいで同じ時間に（index・lesson・course・schedule）
   ふつうの習いごと（2回に分かれる）と、アクティ（同じ時間に並ぶ）をくらべる
========================================================================== */
.sib {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; margin-top: 56px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 40px;
}
.sec.is-paper .sib { background: var(--bg); }
.sib-title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; line-height: 1.45; }
.sib-lead { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.sib-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sib-col { border-radius: var(--r); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.sib-col.is-normal { background: var(--line-2); }
.sib-col.is-acti { background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal); }
.sib-col-head { font-size: 15px; font-weight: 900; }
.sib-col.is-acti .sib-col-head { color: var(--teal-ink); }
.sib-col-sub { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-top: -8px; }
.sib-slot {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 68px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px;
}
.sib-slot img { width: 44px; height: auto; flex: none; }
.sib-time {
  position: absolute; top: -9px; left: 10px; padding: 1px 8px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.6;
}
.sib-col.is-acti .sib-time { background: var(--teal-ink); }
.sib-who { display: flex; flex-direction: column; font-size: 13px; font-weight: 900; line-height: 1.35; }
.sib-who em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.sib-col.is-acti .sib-who em { color: var(--teal-ink); }
.sib-slot.is-one { flex: 1; padding: 18px 8px 10px; justify-content: center; }
.sib-pair { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; }
.sib-kid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sib-kid img { width: 52px; }
.sib-kid .sib-who { align-items: center; }
.sib-heart { align-self: center; color: var(--orange); font-size: 18px; margin: 0 2px 26px; }
.sib-foot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-top: auto; }
.sib-foot b { font-family: var(--latin); font-size: 18px; font-weight: 800; color: var(--ink); }
.sib-col.is-acti .sib-foot b { color: var(--teal-ink); }

/* 動き：ふつうは2回に分かれて出てくる／アクティは左右から寄ってきて、ハートがぽん */
.sib .sib-slot.s1, .sib .sib-slot.s2 { opacity: 0; transform: translateX(-14px); transition: opacity .45s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.sib .sib-slot.s2 { transition-delay: .35s; }
.sib .sib-kid.k1 { opacity: 0; transform: translateX(-40px); transition: opacity .4s .8s, transform .7s cubic-bezier(.3, 1.4, .4, 1) .8s; }
.sib .sib-kid.k2 { opacity: 0; transform: translateX(40px); transition: opacity .4s .8s, transform .7s cubic-bezier(.3, 1.4, .4, 1) .8s; }
.sib .sib-heart { opacity: 0; transform: scale(.2); transition: opacity .3s 1.45s, transform .5s cubic-bezier(.3, 2, .4, 1) 1.45s; }
.sib.is-in .sib-slot.s1, .sib.is-in .sib-slot.s2, .sib.is-in .sib-kid.k1, .sib.is-in .sib-kid.k2 { opacity: 1; transform: none; }
.sib.is-in .sib-heart { opacity: 1; transform: scale(1); animation: sib-beat 1.6s ease-in-out 2.2s infinite; }
@keyframes sib-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } 60% { transform: scale(1); } }
.sib.is-in .sib-kid.k1 img { animation: sib-bob 2.4s ease-in-out 1.6s infinite; }
.sib.is-in .sib-kid.k2 img { animation: sib-bob 2.4s ease-in-out 2.8s infinite; }
@keyframes sib-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-3deg); } }

@media (max-width: 960px) {
  .sib { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px; }
}
@media (max-width: 640px) {
  .sib { margin-top: 40px; padding: 26px 16px; border-radius: 22px; }
  .sib-compare { gap: 8px; }
  .sib-col { padding: 14px 10px 12px; }
  .sib-slot { gap: 6px; padding: 8px; }
  .sib-slot img { width: 34px; }
  .sib-kid img { width: 40px; }
  .sib-who { font-size: 12px; }
  .sib-col-head { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sib .sib-slot.s1, .sib .sib-slot.s2, .sib .sib-kid, .sib .sib-heart { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .sib .sib-kid img { animation: none !important; }
}

/* スマホ：見出しの最後の行（「見に来てね。」など）が1文字だけ落ちないように少し小さく */
@media (max-width: 640px) {
  .cta-title { font-size: clamp(34px, 12.4vw, 52px); }
}

/* スマホのファーストビュー：見出しのすぐ下にタイピングの画面を出す（パソコンと同じインパクトに）。
   hero-copy を display:contents にして、タイピングの画面 → 無料体験のボタン → 説明文 の順に並べる */
@media (max-width: 640px) {
  .hero-body { gap: 0; padding: 44px 20px 96px; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; }
  /* 「打って、覚える。」を1行に（8文字が幅に収まる大きさ） */
  .hero-title { order: 2; font-size: min(56px, calc((100vw - 66px) / 8)); white-space: nowrap; margin-top: 4px; }
  .hero-title br { display: none; }
  .hero-sub { order: 3; margin-top: 14px; font-size: 14px; }
  .hero-visual { order: 4; margin-top: 22px; padding-bottom: 0; }
  .hero-cta { order: 5; margin-top: 46px; }
  .hero-lead { order: 6; margin-top: 26px; }
  .hero .app-bar { padding: 9px 13px; }
  .hero .app-body { padding: 14px 18px 16px; }
  .hero .typing-word { font-size: 36px; }
  .hero .typing-bar { margin: 12px 0 14px; }
  .hero .typing-stats { padding-top: 10px; }
  .hero .typing-stats b { font-size: 18px; }
  .hero .sound { height: 20px; }
  .hero-chara { width: 104px; right: -8px; bottom: -40px; }
}

/* ---------- 中学卒業までの英単語が約2倍（なぜタイピングで覚えるのか） ---------- */
.vocab-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.vocab-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 30px 24px; position: relative; }
.vocab-card-title { font-weight: 900; font-size: 17px; margin-bottom: 22px; }
.vc-row { display: grid; grid-template-columns: 104px 1fr 112px; gap: 14px; align-items: center; }
.vc-row + .vc-row { margin-top: 18px; }
.vc-label { font-weight: 700; font-size: 15px; line-height: 1.3; }
.vc-label small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; }
.vc-track { display: flex; height: 40px; background: var(--line-2); border-radius: 10px; overflow: hidden; }
.vc-seg { display: flex; align-items: center; justify-content: center; width: 0; overflow: hidden; white-space: nowrap; transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.vocab-card.is-run .vc-seg { width: var(--w); }
.vc-seg em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; padding: 0 6px; }
.vc-seg.is-old { background: var(--ink-3); }
.vc-seg.is-es { background: #6FD3D5; transition-delay: .3s; }
.vc-seg.is-jh { background: var(--teal); transition-delay: .5s; }
.vc-num { font-family: var(--latin); font-size: 28px; font-weight: 800; text-align: right; line-height: 1; color: var(--ink-2); white-space: nowrap; }
.vc-legend { margin: 10px 0 0 118px; font-size: 12.5px; color: var(--ink-2); font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.vc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.vc-legend i.is-es { background: #6FD3D5; }
.vc-legend i.is-jh { background: var(--teal); }
.vc-legend span { color: var(--ink-3); }
.vc-num small { font-family: var(--font); font-size: 13px; margin-left: 2px; }
.vc-num.is-new { color: var(--teal-ink); }
.vocab-x2 {
  position: absolute; right: 22px; top: -26px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--orange); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px -10px rgba(237, 114, 75, .7); transform: rotate(-8deg);
}
.vocab-x2 .mono { font-size: 9.5px; letter-spacing: .1em; color: #fff; }
.vocab-x2 b small.pre { font-size: 14px; margin: 0 1px 0 0; }
.vocab-x2 b { font-family: var(--latin); font-size: 30px; font-weight: 900; line-height: 1; }
.vocab-x2 b small { font-family: var(--font); font-size: 15px; margin-left: 1px; }
.vocab-hs { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--line); }
.vocab-hs dt { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.vocab-hs dd { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-weight: 700; }
.vocab-hs dd span { color: var(--ink-3); font-size: 14px; }
.vocab-hs dd i { font-style: normal; color: var(--ink-3); }
.vocab-hs dd b { color: var(--teal-ink); font-size: 18px; }
.vocab-src { margin-top: 14px; font-size: 11px; color: var(--ink-3); line-height: 1.7; }
.vocab-msg p { margin-top: 14px; color: var(--ink-2); font-size: 15px; }
.vocab-msg p.vocab-msg-lead { margin-top: 0; color: var(--ink); font-size: clamp(22px, 2.6vw, 28px); font-weight: 900; line-height: 1.5; }
.vocab-msg strong { color: var(--ink); font-size: 18px; }
.vocab-msg .text-link { display: inline-block; margin-top: 22px; }
@media (max-width: 960px) {
  .vocab-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .vocab-card { padding: 26px 18px 20px; }
  .vc-row { grid-template-columns: 58px 1fr 84px; gap: 8px; }
  .vc-legend { margin-left: 0; font-size: 12px; }
  .vc-label { font-size: 13.5px; }
  .vc-num { font-size: 22px; }
  .vc-seg em { font-size: 10.5px; padding: 0 3px; }
  .vocab-x2 { width: 76px; height: 76px; right: 12px; top: -30px; }
  .vocab-x2 b { font-size: 24px; }
  .vocab-msg p.vocab-msg-lead { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-seg { transition: none; }
}

/* ---------- 無料体験ページ ---------- */
.tr-spec { margin-top: 40px; }
.tr-spec > div { grid-template-columns: 140px 1fr; }
.tr-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; }
.tr-flow li { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 26px 24px; }
.tr-flow-no { display: inline-block; font-size: 11px; letter-spacing: .1em; color: var(--teal-ink); background: var(--teal-soft); border-radius: 999px; padding: 4px 10px; }
.tr-flow h3 { margin-top: 14px; font-size: 18px; font-weight: 900; line-height: 1.45; }
.tr-flow p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
.tr-flow li.is-gacha { border: 2px solid var(--orange); background: #FFF6F2; }
.tr-flow li.is-gacha .tr-flow-no { background: var(--orange); color: #fff; }
.tr-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tr-tags li { font-size: 13px; font-weight: 700; color: #C9532E; background: #FFF1EB; border: 1px solid #F8CDBD; border-radius: 999px; padding: 6px 14px; }
@media (max-width: 960px) {
  .tr-flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tr-flow { grid-template-columns: 1fr; }
  .tr-spec > div { grid-template-columns: 1fr; gap: 4px; }
}

/* 単語数の欄の、驚いているキャラ */
#vocab .wrap { position: relative; }
.vocab-chara { position: absolute; right: 24px; top: -20px; width: 170px; height: auto; transform: rotate(4deg); }
/* ブログ・お知らせ：スマホは新着3件 */
@media (max-width: 960px) {
  .vocab-chara { width: 130px; top: -10px; }
}
@media (max-width: 640px) {
  .vocab-chara { width: 92px; right: 12px; top: -46px; }
  .news-list li:nth-child(n+4) { display: none; }
}

/* 冒険の島の2つのボタン */
/* 「アクティアイランドを見る」は島の4つの説明の下、まん中に */
.isl-teaser-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
@media (max-width: 640px) {
  .isl-teaser-cta .btn { width: 100%; }
}

/* TOPのクラス欄：A〜Dの動くグラフ（コース一覧と同じもの） */
#class > .wrap > .cls:first-child { margin-top: 0; }

/* きょうだいの図：スマホは「ふつうの習いごと」「アクティメソッド」を上下に置き、中身を横に並べる */
@media (max-width: 640px) {
  .sib-compare { grid-template-columns: 1fr; gap: 12px; }
  .sib-col { padding: 14px 14px 12px; }
  .sib-col.is-normal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; }
  .sib-col.is-normal .sib-col-head, .sib-col.is-normal .sib-col-sub, .sib-col.is-normal .sib-foot { grid-column: 1 / -1; }
  .sib-col.is-normal .sib-col-sub { margin-top: -10px; }
  .sib-slot.is-one { padding: 18px 8px 10px; }
  .sib-kid img { width: 48px; }
  .sib-heart { margin: 0 12px 26px; }
}

/* ==========================================================================
   2026-10 スマホの見直し：余白・強調・動き
========================================================================== */
/* ファーストビュー：無料体験のボタンの上をあけ（キャラと重ならないように）、説明文の下は詰める */
@media (max-width: 640px) {
  .hero-body { padding-bottom: 36px; }
  .hero-cta { margin-top: 76px; }
}

/* 上にもどるボタン：いつもは色つき、マウスを乗せると白 */
.to-top { background: var(--teal-ink); color: #fff; border-color: var(--teal-ink); }
.to-top:hover { background: var(--paper); color: var(--teal-ink); border-color: var(--line); }

/* メニューを開いているあいだは、うしろのページを動かさない */
.hd-nav { overscroll-behavior: contain; }

/* ---- 英単語は約2倍：見出しに蛍光ペン、驚くめーちゃん、弾むバッジ ---- */
.vocab-hl {
  font-style: normal; color: #E0582F;
  background: linear-gradient(transparent 60%, rgba(237, 114, 75, .3) 60%) no-repeat 0 0 / 0% 100%;
  transition: background-size .9s .35s cubic-bezier(.2, .7, .2, 1);
}
.sec-title.is-pop .vocab-hl { background-size: 100% 100%; }
.vocab-chara[data-pop]:not(.is-pop) { opacity: 0; }
.vocab-chara.is-pop { animation: chara-surprise 1s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes chara-surprise {
  0% { opacity: 0; transform: translateY(26px) scale(.6) rotate(0); }
  35% { opacity: 1; transform: translateY(-16px) scale(1.1) rotate(10deg); }
  55% { transform: translateY(0) scale(1) rotate(-7deg); }
  75% { transform: rotate(7deg); }
  100% { transform: rotate(4deg); }
}
/* スマホ：見出しの2〜3行目の右（「約2倍になりました。」に驚いている位置） */
@media (max-width: 640px) {
  .vocab-chara { width: 80px; right: 2px; top: 74px; }
}
.vocab-x2 {
  width: 124px; height: 124px; top: -52px; right: 16px; z-index: 2;
  box-shadow: 0 16px 28px -14px rgba(237, 114, 75, .85);
  transform: rotate(-8deg) scale(0);
}
.vocab-x2::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 2px dashed rgba(237, 114, 75, .55); animation: x2-spin 14s linear infinite;
}
.vocab-x2 b { font-size: 46px; }
.vocab-x2 b small { font-size: 20px; }
.vocab-x2 b small.pre { font-size: 17px; }
.vocab-x2-ex {
  position: absolute; right: -16px; top: -10px; font-size: 26px; font-weight: 900; line-height: 1;
  color: var(--ink); transform: rotate(14deg);
}
.vocab-card.is-run .vocab-x2 {
  animation: x2-pop .8s 1.5s cubic-bezier(.3, 1.6, .5, 1) both, x2-beat 2.2s 2.5s ease-in-out infinite;
}
@keyframes x2-pop {
  0% { transform: rotate(-40deg) scale(0); }
  65% { transform: rotate(6deg) scale(1.22); }
  100% { transform: rotate(-8deg) scale(1); }
}
@keyframes x2-beat {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.07); }
}
@keyframes x2-spin { to { transform: rotate(360deg); } }
.vc-num.is-new { font-size: 32px; }
@media (max-width: 640px) {
  .vocab-x2 { width: 98px; height: 98px; right: 10px; top: -44px; }
  .vocab-x2 b { font-size: 36px; }
  .vocab-x2 b small { font-size: 16px; }
  .vocab-x2 b small.pre { font-size: 14px; }
  .vocab-x2-ex { font-size: 22px; right: -12px; }
  .vc-num.is-new { font-size: 25px; }
}

/* ---- タイピングと手書き：数字も数え上げ、最後に「約3.5倍はやい！」 ---- */
.race-num { font-size: 42px; }
.race-row { grid-template-columns: 92px 1fr 104px; }
.race-win {
  align-self: flex-end; display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--teal-ink); color: #fff; border-radius: 999px; padding: 6px 16px 7px;
  font-size: 15px; font-weight: 900; transform: scale(0) rotate(-6deg);
}
.race-win b { font-family: var(--latin); font-size: 24px; font-weight: 900; }
.race.is-run .race-win { animation: win-pop .7s 1.6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes win-pop {
  0% { transform: scale(0) rotate(-12deg); }
  70% { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(-3deg); }
}
@media (max-width: 640px) {
  .race-row { grid-template-columns: 76px 1fr 82px; }
  .race-num { font-size: 34px; }
}

/* ---- タイピング英語®の特徴 ---- */
.ty-feature {
  margin-top: 28px; padding: 20px 20px 18px; border-radius: var(--r);
  background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal);
}
.ty-feature-head { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; color: var(--teal-ink); }
.ty-feature-head .mono {
  font-size: 10px; letter-spacing: .12em; color: #fff; background: var(--teal-ink); border-radius: 999px; padding: 3px 9px;
}
.ty-feature-list { margin-top: 14px; display: grid; gap: 10px; }
.ty-feature-list li {
  display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center;
  background: var(--paper); border-radius: 14px; padding: 12px 14px;
}
.ty-feature-ic {
  grid-row: span 2; width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center;
}
.ty-feature-list b { font-size: 17px; font-weight: 900; line-height: 1.45; color: var(--ink); }
.ty-feature-list li > span:last-child { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin-top: 2px; }
.ty-feature[data-pop] li { opacity: 0; transform: translateX(-18px); transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.ty-feature[data-pop] li:nth-child(2) { transition-delay: .25s; }
.ty-feature.is-pop li { opacity: 1; transform: none; }
.ty-feature.is-pop .ty-feature-ic { animation: ic-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.ty-feature.is-pop li:nth-child(2) .ty-feature-ic { animation-delay: .25s; }
@keyframes ic-pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }

/* ---- きょうだい：2行目「同じ時間に、仲良くいっしょに。」を1行に ---- */
.sib-lead strong { color: var(--teal-ink); }
.sib-lead + .sib-lead { margin-top: 10px; }
@media (max-width: 640px) {
  .sib-title { font-size: min(22px, calc((100vw - 96px) / 15)); }
}

/* 「覚える単語は2倍。でも、勉強の時間は2倍にできない。」：少し待ってから蛍光イエローのマーカー（文字の下3分の1） */
.vocab-mk {
  background: linear-gradient(transparent 66%, #FFF35A 66%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .9s cubic-bezier(.2, .7, .2, 1);
}
.vocab-msg-lead.is-pop .vocab-mk { background-size: 100% 100%; transition-delay: .8s; }
.vocab-msg-lead.is-pop .vocab-mk + br + .vocab-mk { transition-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .vocab-x2, .race-win { transform: rotate(-6deg); animation: none !important; }
  .vocab-x2::before { animation: none; }
  .vocab-chara.is-pop { animation: none; }
  .vocab-hl, .vocab-mk { transition: none; background-size: 100% 100%; }
  .ty-feature[data-pop] li { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   2026-10-05 スマホの見直し（2回目）
========================================================================== */
/* 単語数の表：スマホで「〜2,500語」が右にはみ出さないように */
@media (max-width: 640px) {
  .vc-row { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 8px; }
  .vc-num { font-size: 20px; }
  .vc-num.is-new { font-size: 22px; }
  .vc-num small { font-size: 11px; }
}

/* 高校卒業までの合計：棒グラフで「大変さ」を見せる */
.vocab-hs { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--line); }
.vh-title { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
.vh-row { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.vh-row + .vh-row { margin-top: 12px; }
.vh-label { grid-row: span 2; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.vh-num { font-family: var(--latin); font-weight: 800; line-height: 1.1; color: var(--ink-3); font-size: 17px; }
.vh-num small { font-family: var(--font); font-size: 12px; margin-left: 2px; }
.vh-row.is-now .vh-label { color: #D4502A; }
.vh-row.is-now .vh-num { color: #D4502A; font-size: 28px; }
.vh-row.is-now .vh-num small { font-size: 15px; }
.vh-track { margin-top: 4px; height: 14px; border-radius: 7px; background: #EEF0EE; overflow: hidden; }
.vh-row.is-now .vh-track { height: 22px; border-radius: 11px; }
.vh-bar { position: relative; display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1.4s cubic-bezier(.2, .7, .2, 1) .9s; }
.vocab-card.is-run .vh-bar { width: var(--w); }
.vh-bar.is-old { background: #B9BEC2; }
.vh-bar.is-new { background: repeating-linear-gradient(-45deg, #ED724B 0 10px, #E05A33 10px 20px); transition-delay: 1.3s; }
.vh-min { position: absolute; top: 0; bottom: 0; left: var(--m); width: 2px; background: rgba(255, 255, 255, .8); }
.vh-shout { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 14px; font-weight: 900; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .5s 2.4s, transform .5s 2.4s; }
.vh-shout b { color: #fff; background: #D4502A; border-radius: 8px; padding: 2px 8px; font-size: 18px; }
.vocab-card.is-run .vh-shout { opacity: 1; transform: none; }
.vocab-card.is-run .vh-row.is-now .vh-num { animation: vh-shake .5s 2.4s 2; }
.vh-sweat { width: 18px; height: 22px; position: relative; flex: none; }
.vh-sweat::before, .vh-sweat::after { content: ""; position: absolute; width: 7px; height: 10px; background: #6FC3E8; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.vh-sweat::before { left: 1px; top: 2px; }
.vh-sweat::after { left: 10px; top: 9px; transform: scale(.8); }
.vocab-card.is-run .vh-sweat::before, .vocab-card.is-run .vh-sweat::after { animation: vh-drip 1.6s 2.6s ease-in infinite; }
.vocab-card.is-run .vh-sweat::after { animation-delay: 3s; }
@keyframes vh-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-3px) rotate(-1deg); } 40% { transform: translateX(3px) rotate(1deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes vh-drip { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }

/* 「覚える単語は2倍。…」のマーカー：その場所まで来てから引く */
.vocab-msg-lead.is-pop .vocab-mk { transition-delay: .15s; }
.vocab-msg-lead.is-pop .vocab-mk + br + .vocab-mk { transition-delay: .85s; }

/* 「備えられます。」の下の余白を詰める */
@media (max-width: 640px) {
  #vocab.sec { padding-bottom: 36px; }
  #speed.sec { padding-top: 48px; }
}

/* タイピング英語®の特徴：見出しの®、動きで説明 */
.ty-feature-head sup { font-size: .55em; vertical-align: super; line-height: 0; }
.ty-demo { grid-column: 1 / -1; margin-top: 10px; border-radius: 12px; background: var(--teal-soft); padding: 10px 12px; }
/* 打った瞬間に正解がわかる */
.tdc { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 4px 10px; position: relative; min-height: 64px; }
.tdc-q { grid-row: span 2; display: flex; flex-direction: column; align-items: center; font-weight: 900; font-size: 15px; color: var(--ink); background: #fff; border-radius: 10px; padding: 6px 10px; }
.tdc-q .mono { font-size: 9px; color: var(--teal-ink); }
.tdc-word { font-family: var(--latin); font-size: 26px; font-weight: 800; letter-spacing: .06em; color: var(--ink); min-height: 32px; display: flex; align-items: center; }
.tdc-word i { font-style: normal; display: inline-block; }
.tdc-word i.is-ng { color: #E5534B; animation: tdc-shake .35s; }
.tdc-word::after { content: ""; width: 2px; height: 24px; background: var(--orange); margin-left: 2px; animation: blink 1s steps(1) infinite; }
.tdc.is-ok .tdc-word { color: var(--teal-ink); }
.tdc.is-ok .tdc-word::after { display: none; }
.tdc-ng, .tdc-ok { font-size: 12.5px; font-weight: 900; border-radius: 999px; padding: 2px 10px; justify-self: start; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .25s cubic-bezier(.3, 1.6, .5, 1); grid-column: 2; grid-row: 2; }
.tdc-ng { color: #fff; background: #E5534B; }
.tdc-ok { color: #fff; background: var(--teal); }
.tdc.is-ng .tdc-ng, .tdc.is-ok .tdc-ok { opacity: 1; transform: none; }
@keyframes tdc-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
/* 聞く → 声に出す → 打つ を順に光らせる */
.tdl { display: flex; align-items: stretch; justify-content: space-between; gap: 4px; }
.tdl-step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 10px; background: #fff; color: var(--ink-3); animation: tdl-on 4.5s infinite; }
.tdl-step.s2 { animation-delay: 1.5s; }
.tdl-step.s3 { animation-delay: 3s; }
.tdl-step b { font-size: 12.5px; font-weight: 900; }
.tdl-ic { line-height: 0; }
.tdl-say { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.tdl-keys { display: flex; gap: 2px; }
.tdl-keys i { font-style: normal; font-family: var(--latin); font-size: 11px; font-weight: 800; width: 15px; height: 17px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid currentColor; }
.tdl-step.s3 .tdl-keys i { animation: tdl-key 4.5s infinite; }
.tdl-step.s3 .tdl-keys i:nth-child(1) { animation-delay: 3.05s; }
.tdl-step.s3 .tdl-keys i:nth-child(2) { animation-delay: 3.25s; }
.tdl-step.s3 .tdl-keys i:nth-child(3) { animation-delay: 3.45s; }
.tdl-step.s3 .tdl-keys i:nth-child(4) { animation-delay: 3.65s; }
.tdl-step.s3 .tdl-keys i:nth-child(5) { animation-delay: 3.85s; }
.tdl-step.s1 .w1, .tdl-step.s1 .w2 { animation: tdl-wave 4.5s infinite; }
.tdl-step.s1 .w2 { animation-delay: .15s; }
.tdl-arrow { align-self: center; font-style: normal; font-weight: 900; color: var(--teal); flex: none; }
@keyframes tdl-on { 0%, 30% { background: var(--teal); color: #fff; transform: scale(1.04); } 34%, 100% { background: #fff; color: var(--ink-3); transform: none; } }
@keyframes tdl-wave { 0%, 30% { opacity: 1; } 8%, 22% { opacity: .2; } 34%, 100% { opacity: 1; } }
@keyframes tdl-key { 0%, 5% { background: var(--orange); color: #fff; border-color: var(--orange); } 8%, 100% { background: transparent; } }

/* アクティアイランド：スマホは島の説明文を出さず、ボタンはイラストの下に */
.isl-map-note { margin-top: 8px; font-size: 12px; color: var(--ink-3); text-align: right; }
.isl-teaser-cta.is-sp { display: none; }
@media (max-width: 960px) {
  .isl-teaser-cta.is-pc { display: none; }
  .isl-teaser-cta.is-sp { display: flex; margin-top: 18px; }
}
@media (max-width: 640px) {
  .isl-teaser-list { grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 24px; }
  .isl-teaser-list li { padding: 10px 12px; }
  .isl-teaser-list li > span:last-child { display: none; }
  .isl-teaser-list b { font-size: 14px; }
}

/* 実績の線：途中でオレンジにしない（ずっとティール） */
.rs-legend-line, .rs-axis-fill { background: var(--teal) !important; }
.rs-head { border-color: var(--teal); }

/* コース：幼児クラス／英検合格コースのタブ */
.crs-tablist { display: flex; gap: 8px; margin-top: 8px; }
.crs-tab {
  flex: 1; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  padding: 12px 10px; border-radius: 14px 14px 0 0; border: 2px solid var(--line); border-bottom: 0;
  background: var(--bg); font: inherit; font-size: 16px; font-weight: 900; color: var(--ink-2);
}
.crs-tab .mono { font-size: 10px; color: var(--ink-3); }
.crs-tab.is-on { background: var(--paper); border-color: var(--teal); color: var(--teal-ink); }
.crs-tab.is-on .mono { color: var(--teal-ink); }
.crs-panel { background: var(--paper); border: 2px solid var(--teal); border-radius: 0 var(--r) var(--r) var(--r); padding: 36px 40px; }
.crs-panel[hidden] { display: none; }
.crs-panel:not([hidden]) { animation: crs-in .35s ease-out; }
.crs-tab-title { font-size: 26px; font-weight: 900; line-height: 1.4; margin-bottom: 10px; }
@keyframes crs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .crs-tablist { gap: 6px; }
  .crs-tab { font-size: 14.5px; padding: 10px 6px; }
  .crs-panel { padding: 24px 18px; border-radius: 0 0 var(--r) var(--r); }
  .crs-tab-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .vh-bar, .vh-shout { transition: none; }
  .vocab-card .vh-bar { width: var(--w); }
  .vh-shout { opacity: 1; transform: none; }
  .tdl-step, .tdl-keys i, .tdl-step .w1, .tdl-step .w2, .vh-sweat::before, .vh-sweat::after, .vh-row .vh-num { animation: none !important; }
  .crs-panel:not([hidden]) { animation: none; }
}
@media (max-width: 960px) {
  .isl-teaser { gap: 8px; }
  .crs-panel .crs-kids { min-height: 360px; }
}
@media (max-width: 640px) {
  .crs-panel .crs-kids-a, .crs-panel .crs-kids-m { width: 88px; }
  .crs-panel .crs-clock { transform: scale(.85); transform-origin: top center; }
}

/* ==========================================================================
   2026-10-05 スマホの見直し（3回目）
========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ファーストビュー：スマホは「打って、覚える」の下に「英語教室」を1文字ずつ */
.ht-sp { display: none; }
@media (max-width: 640px) {
  .hero-title { white-space: normal; font-size: min(54px, calc((100vw - 60px) / 7)); line-height: 1.18; }
  .hero-title br { display: none; }
  .hero-title .ht-dot { display: none; }
  .ht-sp { display: flex; gap: .02em; margin-top: 6px; color: var(--teal-ink); }
  .ht-sp i {
    font-style: normal; position: relative; display: inline-block;
    animation: ht-pop .55s cubic-bezier(.3, 1.5, .5, 1) both;
  }
  .ht-sp i:nth-child(1) { animation-delay: .35s; }
  .ht-sp i:nth-child(2) { animation-delay: .5s; }
  .ht-sp i:nth-child(3) { animation-delay: .65s; }
  .ht-sp i:nth-child(4) { animation-delay: .8s; }
  .ht-sp::after {
    content: ""; align-self: flex-end; width: 3px; height: .9em; margin: 0 0 .1em .08em; background: var(--orange);
    animation: blink 1s steps(1) infinite;
  }
  .ht-sp { background: linear-gradient(transparent 72%, #FFF35A 72%) no-repeat 0 0 / 0% 100%; width: fit-content; animation: ht-mark .7s 1.2s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hero-sub { margin-top: 12px; }
}
@keyframes ht-pop { 0% { opacity: 0; transform: translateY(.4em) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes ht-mark { to { background-size: 100% 100%; } }

/* タイピング英語®の特徴：パソコンは左の列の下、スマホは動画の下 */
.speed-grid { grid-template-areas: "main video" "feat video"; row-gap: 0; }
.speed-grid > div:first-child { grid-area: main; }
.speed-grid > .speed-video { grid-area: video; }
.speed-grid > .ty-feature { grid-area: feat; align-self: start; }
@media (max-width: 960px) {
  .speed-grid { grid-template-areas: "main" "video" "feat"; row-gap: 40px; }
  .speed-grid > .ty-feature { margin-top: 0; }
}

/* 「りんご」→ apple の右に ✕ ちがうよ／◎ 正解！ */
.tdc { grid-template-columns: auto auto 1fr; grid-template-rows: auto; }
.tdc-q { grid-row: 1; }
.tdc-ng, .tdc-ok { grid-column: 3; grid-row: 1; align-self: center; white-space: nowrap; }
.tdc-word { font-size: 24px; }

/* 「打つ」の a p p l e がはみ出さないように */
.tdl-step.s3 { flex: 1.35; }
.tdl-keys { gap: 1px; }
.tdl-keys i { width: 13px; height: 16px; font-size: 10px; border-radius: 3px; }

/* ブログ・お知らせ：すべて見るは記事の下のボタン */
.news-more { margin-top: 28px; text-align: center; }
@media (max-width: 640px) { .news-more .btn { width: 100%; } }

/* 教室へのアクセス：要点を横に並べて、地図はその下 */
.acc-info { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin: 28px 0 20px; }
.acc-info li { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; }
.acc-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-ink); display: flex; align-items: center; justify-content: center; }
.acc-info b { display: block; font-size: 12px; color: var(--teal-ink); }
.acc-info span { font-size: 14px; line-height: 1.6; color: var(--ink); }
.acc-info small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.acc-info .tel { font-family: var(--latin); font-size: 20px; font-weight: 800; color: var(--ink); text-decoration: none; }
.access-map.is-wide { aspect-ratio: 16 / 7; }
@media (max-width: 960px) {
  .acc-info { grid-template-columns: 1fr; gap: 8px; }
  .access-map.is-wide { aspect-ratio: 4 / 3; }
}
/* キーが使えないときの埋め込み地図も、HPの色（ティール）に寄せる */
.access-map iframe { filter: grayscale(1) sepia(.28) hue-rotate(128deg) saturate(1.35) contrast(.95) brightness(1.03); }

/* フッター：メニューを3つのまとまりに */
.ft-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 18px 40px; max-width: none; }
.ft-col { display: flex; flex-direction: column; gap: 8px; }
.ft-col p { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--teal-ink); margin-bottom: 2px; }
.ft-col a { font-size: 13px; }
@media (max-width: 640px) {
  .ft-nav { grid-template-columns: 1fr 1fr; gap: 20px 16px; width: 100%; }
  .ft-col a { font-size: 12.5px; }
}

/* 2026-10-05 幼児クラスの欄：「幼児クラスも、」で改行して大きく、角の印は出さない、「親子でいっしょに」は時計から離す */
.crs-trial-big { font-size: 1.25em; }
.crs-panel .frame::before, .crs-panel .frame::after { display: none; }
@media (max-width: 640px) {
  .crs-panel .crs-kids { min-height: 430px; }
  .crs-panel .crs-bubble.is-2 { bottom: 150px; }
}

/* 2026-10-05 スマホのファーストビュー：「英語教室」はタイピングで打ったように1文字ずつ（右端をそろえる）。
   下の説明は2行で幅いっぱいに */
.hs-br { display: none; }
@media (max-width: 640px) {
  .hero-title { width: fit-content; }
  .ht-sp { margin-left: auto; }
  .ht-sp i { animation: ht-type .01s steps(1) both; visibility: hidden; }
  .ht-sp i:nth-child(1) { animation-delay: .6s; }
  .ht-sp i:nth-child(2) { animation-delay: .85s; }
  .ht-sp i:nth-child(3) { animation-delay: 1.1s; }
  .ht-sp i:nth-child(4) { animation-delay: 1.35s; }
  .ht-sp { animation: ht-mark .7s 1.7s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hs-br { display: block; }
  .hero-sub { font-size: min(20px, calc((100vw - 66px) / 16)); line-height: 1.6; letter-spacing: 0; }
}
@keyframes ht-type { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .ht-sp i { animation: none; visibility: visible; }
}

/* ==========================================================================
   2026-10-05 ファーストビュー：「打って、覚える／子供英語教室」（パソコンもスマホも）
   2行目は1文字ずつタイピングしたように出し、右端を1行目とそろえる（字の間隔も1行目と同じ）
========================================================================== */
.hero-title { white-space: nowrap; width: fit-content; font-size: clamp(44px, 5.4vw, 84px); line-height: 1.14; }
.hero-title br, .hero-title .ht-dot { display: none; }
.ht-l1 { display: block; }
.ht-sp {
  display: flex; gap: 0; width: fit-content; margin: .06em 0 0 auto; position: relative; color: var(--teal-ink);
  background: linear-gradient(transparent 72%, #FFF35A 72%) no-repeat 0 0 / 0% 100%;
  animation: ht-mark .7s 2.3s cubic-bezier(.2, .7, .2, 1) forwards;
}
.ht-sp i { font-style: normal; position: static; visibility: hidden; animation: ht-type .01s steps(1) both; }
.ht-sp i:nth-child(1) { animation-delay: .6s; }
.ht-sp i:nth-child(2) { animation-delay: .85s; }
.ht-sp i:nth-child(3) { animation-delay: 1.1s; }
.ht-sp i:nth-child(4) { animation-delay: 1.35s; }
.ht-sp i:nth-child(5) { animation-delay: 1.6s; }
.ht-sp i:nth-child(6) { animation-delay: 1.85s; }
/* カーソルは字の外に出して、右端の位置を変えない */
.ht-sp::after {
  content: ""; position: absolute; right: -.14em; bottom: .14em; width: .06em; min-width: 3px; height: .82em; margin: 0;
  background: var(--orange); animation: blink 1s steps(1) infinite;
}
.hero-sub { margin-top: 22px; }
.hs-tag {
  display: inline-block; margin-left: 10px; padding: 2px 12px; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal-ink); font-size: .9em; white-space: nowrap;
}
@media (max-width: 640px) {
  .hero-title { font-size: min(54px, calc((100vw - 60px) / 7)); }
  .hero-sub { font-size: min(18px, calc((100vw - 64px) / 21.2)); line-height: 1.6; letter-spacing: 0; }
  .hs-tag { display: table; margin: 8px 0 0; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-sp i { animation: none; visibility: visible; }
  .ht-sp { animation: none; background-size: 100% 100%; }
}

/* ページ内リンク（#kids・#faq など）で飛んだとき、見出しが上の固定ヘッダーに隠れないように */
[id] { scroll-margin-top: 84px; }

/* ==========================================================================
   2026-10-05 見直し（パソコン中心）
========================================================================== */
/* ファーストビュー：パソコンは前と同じ「打って、／覚える。」。「子供英語教室」はスマホだけ */
.hero-title .ht-pcbr, .hero-title .ht-dot { display: none; }
@media (min-width: 641px) {
  .hero-title { font-size: clamp(56px, 8.4vw, 118px); line-height: 1.08; white-space: normal; width: auto; }
  .hero-title br.ht-pcbr { display: inline; }
  .hero-title .ht-dot { display: inline; }
  .ht-sp { display: none; }
}

/* 「約2倍」を大きく */
.vocab-hl { font-size: 1.3em; }

/* 「覚える単語は2倍。」を、2行目の幅いっぱいまで大きく */
.vocab-msg-lead > .vocab-mk:first-child { font-size: 1.88em; line-height: 1.3; letter-spacing: .01em; }

/* めーちゃんは「覚える単語は2倍。」の上に（パソコン） */
.vocab-msg { position: relative; }
.vocab-msg > .vocab-chara { position: static; display: block; width: 150px; height: auto; margin: 0 0 10px auto; transform: rotate(4deg); }
@media (max-width: 960px) {
  .vocab-msg > .vocab-chara { width: 96px; margin: -10px 0 4px auto; }
}

/* 「最大 約1.7倍！」の左端を、上のゲージの左端にそろえる（汗はゲージの左の列に） */
.vh-shout { display: grid; grid-template-columns: 40px auto 1fr; column-gap: 10px; align-items: center; }
.vh-sweat { justify-self: end; }
.vh-shout-t { white-space: nowrap; }
@media (max-width: 400px) { .vh-shout { grid-template-columns: 40px 1fr; } .vh-shout-t { grid-column: 2; } }

/* 「タイピング英語®の特徴」を大きく */
.ty-feature-head { font-size: 24px; }
@media (max-width: 640px) { .ty-feature-head { font-size: 20px; } }

/* 冒険の島：見出しを大きく、地図はパソコンの画面の中に、たて方向まん中 */
#island .sec-title { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.3; }
.isl-teaser { align-items: center; }
.isl-pc { position: relative; display: flex; flex-direction: column; align-items: center; }
.isl-pc-screen {
  width: 100%; padding: 14px; border-radius: 22px; background: #23282b;
  box-shadow: 0 30px 60px -30px rgba(18, 20, 22, .55), inset 0 0 0 2px #3a4145;
}
.isl-pc-screen .isl-map-stage { border-radius: 10px; }
.isl-pc-neck { width: 18%; height: 34px; background: linear-gradient(#cfd4d2, #b9bfbc); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.isl-pc-base { width: 40%; height: 10px; border-radius: 6px; background: #c3c8c6; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .35); }
@media (max-width: 640px) {
  .isl-pc-screen { padding: 8px; border-radius: 16px; }
  .isl-pc-neck { height: 22px; }
}

/* フッターの文字：マウスで色が変わって下線が伸びる */
.ft-col a { position: relative; width: fit-content; transition: color .25s; }
.ft-col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.ft-col a:hover { color: var(--teal-ink); }
.ft-col a:hover::after { transform: scaleX(1); }

/* ==========================================================================
   2026-10-05 スマホのファーストビュー（タイピングの練習画面のように）
========================================================================== */
/* 「子供英語教室」は、はじめ薄いグレーで出ていて、1文字ずつ打つと色が付く。行の間は1行目と同じ */
@media (max-width: 640px) {
  .hero-title { line-height: 1.14; }
  .ht-sp { margin-top: 0; line-height: 1.14; }
  .ht-sp i { visibility: visible; color: #CDD3D0; animation: ht-color .01s steps(1) forwards; }
  .ht-sp i:nth-child(1) { animation-delay: .7s; }
  .ht-sp i:nth-child(2) { animation-delay: .95s; }
  .ht-sp i:nth-child(3) { animation-delay: 1.2s; }
  .ht-sp i:nth-child(4) { animation-delay: 1.45s; }
  .ht-sp i:nth-child(5) { animation-delay: 1.7s; }
  .ht-sp i:nth-child(6) { animation-delay: 1.95s; }
  .ht-sp { animation: ht-mark .7s 2.35s cubic-bezier(.2, .7, .2, 1) forwards; }
}
@keyframes ht-color { to { color: var(--teal-ink); } }
@media (prefers-reduced-motion: reduce) { .ht-sp i { animation: none; color: var(--teal-ink); } }

/* 説明：パソコンは今まで通り、スマホは「タイピングと英語を同時に習得。」＋地域・対象の札 */
.hero-sub.is-sp { display: none; }
@media (max-width: 640px) {
  .hero-sub.is-pc { display: none; }
  .hero-sub.is-sp { display: block; order: 3; margin-top: 14px; }
  .hs-main { font-size: min(22px, calc((100vw - 64px) / 15)); font-weight: 900; color: var(--teal-ink); line-height: 1.5; white-space: nowrap; }
  .hs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .hs-tags .hs-tag { margin: 0; font-size: 14px; display: inline-block; }
}

/* 英検合格コースのタブ：くわしく見る */
.crs-more { margin-top: 22px; }
@media (max-width: 640px) { .crs-more .btn { width: 100%; } }

/* レッスン内容：レッスン前のビジョントレーニング */
.vt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  margin-bottom: 14px; padding: 22px 26px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line);
}
.vt-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: 50%; background: #FFF6EF; color: var(--orange); }
.vt-badge .mono { font-size: 9px; letter-spacing: .08em; }
.vt-badge b { font-family: var(--latin); font-size: 34px; font-weight: 800; line-height: 1.1; }
.vt-badge b small { font-family: var(--font); font-size: 14px; margin-left: 2px; }
.vt-body h3 { font-size: 20px; font-weight: 900; }
.vt-body p { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); line-height: 1.85; }
.vt-body strong { color: var(--ink); }
/* 目が左右に動く */
.vt-eyes { display: flex; gap: 10px; }
.vt-eyes span { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); position: relative; overflow: hidden; }
.vt-eyes i { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ink); animation: vt-look 3.2s ease-in-out infinite; }
@keyframes vt-look { 0%, 100% { transform: translate(-9px, 0); } 25% { transform: translate(9px, 0); } 50% { transform: translate(0, -9px); } 75% { transform: translate(0, 9px); } }
@media (max-width: 640px) {
  .vt { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .vt-badge { flex-direction: row; gap: 8px; width: auto; height: auto; padding: 6px 16px; border-radius: 999px; justify-self: start; }
  .vt-badge b { font-size: 22px; }
  .vt-eyes { display: none; }
  .vt-body h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .vt-eyes i { animation: none; } }

/* ==========================================================================
   2026-10-05 レッスン内容・無料体験の見直し
========================================================================== */
/* ビジョントレーニング：前橋荒牧校オリジナルの札 */
.vt-orig {
  display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.vt-body .vt-orig { margin-top: 0; color: #fff; font-size: 12px; line-height: 1.6; }

/* 1レッスンの内訳：英語トレーニング30分＋タイピング英語学習20分 */
.lesson-bar { grid-template-columns: 3fr 2fr; }
.lesson-scale { display: grid; grid-template-columns: 3fr 2fr; }
.lesson-scale span { grid-row: 1; }
.lesson-scale span:nth-child(2) { grid-column: 2; }
.lesson-scale span:nth-child(3) { grid-column: 2; justify-self: end; }
@media (max-width: 960px) {
  .lesson-bar { grid-template-columns: 1fr; }
  .lesson-scale { display: none; }
}

/* 10秒タイピングは別ページ。レッスン内容にはリンクだけ */
.try-link { margin-top: 30px; text-align: center; }
.try-link a {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 6px; font-weight: 700; color: var(--teal-ink);
  border-bottom: 2px solid currentColor; transition: color .25s, gap .25s;
}
.try-link a .mono { font-size: 11px; letter-spacing: .1em; color: var(--orange); }
.try-link a:hover { color: var(--orange); gap: 16px; }
.page-hero.is-mini .page-hero-aside img { width: 150px; }
.try-back { margin-top: 26px; text-align: center; }

/* 無料体験の流れ：パネルをやめて、たての道すじに */
.tr-flow { display: block; max-width: 860px; }
.tr-flow li {
  display: grid; grid-template-columns: 68px 1fr; column-gap: 24px; align-items: start;
  background: none; border: 0; border-radius: 0; padding: 0 0 36px;
}
.tr-flow li:last-child { padding-bottom: 0; }
.tr-flow li::before {
  content: ""; position: absolute; left: 33px; top: 74px; bottom: 6px; width: 2px;
  background: repeating-linear-gradient(var(--teal) 0 6px, transparent 6px 12px);
}
.tr-flow li:last-child::before { display: none; }
.tr-flow-no {
  grid-row: 1 / span 2; width: 68px; height: 68px; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--teal); color: var(--teal-ink);
  font-family: var(--latin); font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: 0;
}
.tr-flow-no small { font-family: var(--mono, inherit); font-size: 9px; font-weight: 700; letter-spacing: .12em; margin-bottom: 3px; }
.tr-flow h3 { grid-column: 2; margin-top: 10px; font-size: 20px; }
.tr-flow p { grid-column: 2; margin-top: 6px; max-width: 40em; }
/* 最後のお楽しみ：ガチャ */
.tr-flow li.is-gacha { border: 0; background: none; }
.tr-flow li.is-gacha .tr-flow-no { background: var(--orange); border-color: var(--orange); color: #fff; }
.tr-flow li.is-gacha h3 { color: var(--orange); }
.tr-flow-tag {
  display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: 999px; vertical-align: 3px;
  background: #FFF0E8; color: var(--orange); font-size: 12px; font-weight: 700;
}
/* パソコンは横に並べて、丸を点線でつなぐ */
@media (min-width: 961px) {
  .tr-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 22px; max-width: none; }
  .tr-flow li { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; padding: 0; }
  .tr-flow li::before { left: 80px; right: -10px; top: 33px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 12px); }
  .tr-flow-no { grid-row: auto; }
  .tr-flow h3 { grid-column: 1; margin-top: 18px; font-size: 17px; }
  .tr-flow p { grid-column: 1; font-size: 13.5px; line-height: 1.8; }
  .tr-flow-tag { display: table; margin: 0 0 6px; vertical-align: 0; }
}
@media (max-width: 640px) {
  .tr-flow li { grid-template-columns: 52px 1fr; column-gap: 16px; padding-bottom: 28px; }
  .tr-flow li::before { left: 25px; top: 58px; }
  .tr-flow-no { width: 52px; height: 52px; font-size: 19px; }
  .tr-flow-no small { font-size: 8px; margin-bottom: 2px; }
  .tr-flow h3 { margin-top: 4px; font-size: 17px; }
  .tr-flow-tag { display: table; margin: 0 0 4px; vertical-align: 0; }
  .tr-flow p { font-size: 14px; }
}

/* 無料体験のファーストビュー：0円 → Let’s Typing! */
.page-hero .bignum.is-words { font-size: clamp(64px, 8.6vw, 132px); letter-spacing: -.03em; white-space: nowrap; bottom: 26px; }

/* ==========================================================================
   2026-10-05 スマホの見直し（ファーストビュー・地図・流れ・余白）
========================================================================== */
/* 角の印はスマホでは出さない（英字に重なるため） */
@media (max-width: 640px) {
  .frame::before, .frame::after { display: none; }
}
/* ® は小さくなりすぎないように */
.eyebrow sup, .app-title sup { font-size: .72em; vertical-align: .45em; margin-left: 1px; line-height: 0; }

/* ファーストビュー（スマホ）：1行目と「子供英語教室」の間をあける。説明と札は右端にそろえる */
@media (max-width: 640px) {
  .hero-title, .ht-sp { line-height: 1.22; }
  .ht-sp { margin-top: .16em; }
  .hs-main { text-align: right; }
  .hs-tags { justify-content: flex-end; }
}

/* WHY TYPING：見出しの右に、おどろくあっちゃん（スマホ） */
.vocab-head-chara { display: none; }
@media (max-width: 640px) {
  #vocab .sec-head { position: relative; }
  .vocab-head-chara {
    display: block; position: absolute; right: 2px; top: 38px; width: min(96px, 25vw); height: auto;
    transform: rotate(6deg); pointer-events: none;
  }
  #vocab .sec-head:has(.is-pop) .vocab-head-chara { animation: vh-surprise .6s cubic-bezier(.2, 1.6, .4, 1) both; }
}
@keyframes vh-surprise { 0% { transform: translateY(14px) scale(.6) rotate(0); opacity: 0; } 100% { transform: translateY(0) scale(1) rotate(6deg); opacity: 1; } }

/* アクティアイランド・合格実績：上の余白を半分に。島の4つの札はスマホでは出さない */
@media (max-width: 640px) {
  #island.sec, #results.sec { padding-top: 42px; }
  .isl-teaser-list { display: none; }
  .isl-teaser .sec-lead { margin-bottom: 24px; }
}

/* レッスンの島：動画→テスト→答え合わせ（スマホはたてに） */
@media (max-width: 640px) {
  .ls-flow { margin-top: 36px; }
  .flow.-x3 { grid-template-columns: 1fr; row-gap: 20px; }
  .flow.-x3::before { display: block; left: 23px; right: auto; top: 24px; bottom: 30px; width: 1.5px; height: auto; }
  .flow.-x3 li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; }
  .flow.-x3 .flow-dot { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; font-size: 16px; }
  .flow.-x3 h3 { grid-column: 2; margin: 0; font-size: 16px; align-self: end; }
  .flow.-x3 p { grid-column: 2; padding: 0; margin-top: 2px; font-size: 13.5px; align-self: start; }
}

/* レッスンの地図：クリアしたところは恐竜シール。ゴールは黒をやめて明るく */
.ls-node.is-done::after {
  width: 26px; height: 26px; right: -7px; top: -7px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.5' fill='%23fff' stroke='%235DBB86' stroke-width='2.4'/%3E%3Cellipse cx='17' cy='25' rx='10' ry='6.8' fill='%235DBB86'/%3E%3Cpath d='M21 20.5C24 16.5 26 12.5 28.6 10.4c1-.8 4.4-.9 5.2.6.8 1.6-.4 3.2-2.4 3.4l-1.8.3c-1.7 3.2-2.4 6.8-3 10.3z' fill='%235DBB86'/%3E%3Cpath d='M8.4 22.6c-2.6.6-4.2 2.4-4.6 5 2.6.4 5-.3 6.6-1.8z' fill='%235DBB86'/%3E%3Crect x='11' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%235DBB86'/%3E%3Crect x='19.4' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%235DBB86'/%3E%3Ccircle cx='31.6' cy='12.2' r='1.1' fill='%231b1b1b'/%3E%3Ccircle cx='14' cy='23.4' r='1.6' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='19.2' cy='22.4' r='1.1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-10deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .12));
}
.ls-node.is-done:nth-child(4n+2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.5' fill='%23fff' stroke='%23F4A04F' stroke-width='2.4'/%3E%3Cpath d='M10 20l2.2-5.4 2.2 5.2zM14.6 18.6l2.6-6.2 2.6 6zM19.6 19l2.2-5 2.2 5.2z' fill='%23D06B2A'/%3E%3Cellipse cx='17' cy='25' rx='10' ry='6.8' fill='%23F4A04F'/%3E%3Cpath d='M21 20.5C24 16.5 26 12.5 28.6 10.4c1-.8 4.4-.9 5.2.6.8 1.6-.4 3.2-2.4 3.4l-1.8.3c-1.7 3.2-2.4 6.8-3 10.3z' fill='%23F4A04F'/%3E%3Cpath d='M8.4 22.6c-2.6.6-4.2 2.4-4.6 5 2.6.4 5-.3 6.6-1.8z' fill='%23F4A04F'/%3E%3Crect x='11' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%23F4A04F'/%3E%3Crect x='19.4' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%23F4A04F'/%3E%3Ccircle cx='31.6' cy='12.2' r='1.1' fill='%231b1b1b'/%3E%3Ccircle cx='14' cy='23.4' r='1.6' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='19.2' cy='22.4' r='1.1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E"); transform: rotate(8deg); }
.ls-node.is-done:nth-child(4n+3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.5' fill='%23fff' stroke='%239A86DE' stroke-width='2.4'/%3E%3Cellipse cx='17' cy='25' rx='10' ry='6.8' fill='%239A86DE'/%3E%3Cpath d='M21 20.5C24 16.5 26 12.5 28.6 10.4c1-.8 4.4-.9 5.2.6.8 1.6-.4 3.2-2.4 3.4l-1.8.3c-1.7 3.2-2.4 6.8-3 10.3z' fill='%239A86DE'/%3E%3Cpath d='M8.4 22.6c-2.6.6-4.2 2.4-4.6 5 2.6.4 5-.3 6.6-1.8z' fill='%239A86DE'/%3E%3Crect x='11' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%239A86DE'/%3E%3Crect x='19.4' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%239A86DE'/%3E%3Ccircle cx='31.6' cy='12.2' r='1.1' fill='%231b1b1b'/%3E%3Ccircle cx='14' cy='23.4' r='1.6' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='19.2' cy='22.4' r='1.1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E"); transform: rotate(-4deg); }
.ls-node.is-done:nth-child(4n+4)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.5' fill='%23fff' stroke='%23F18AB0' stroke-width='2.4'/%3E%3Cpath d='M10 20l2.2-5.4 2.2 5.2zM14.6 18.6l2.6-6.2 2.6 6zM19.6 19l2.2-5 2.2 5.2z' fill='%23C9547F'/%3E%3Cellipse cx='17' cy='25' rx='10' ry='6.8' fill='%23F18AB0'/%3E%3Cpath d='M21 20.5C24 16.5 26 12.5 28.6 10.4c1-.8 4.4-.9 5.2.6.8 1.6-.4 3.2-2.4 3.4l-1.8.3c-1.7 3.2-2.4 6.8-3 10.3z' fill='%23F18AB0'/%3E%3Cpath d='M8.4 22.6c-2.6.6-4.2 2.4-4.6 5 2.6.4 5-.3 6.6-1.8z' fill='%23F18AB0'/%3E%3Crect x='11' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%23F18AB0'/%3E%3Crect x='19.4' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%23F18AB0'/%3E%3Ccircle cx='31.6' cy='12.2' r='1.1' fill='%231b1b1b'/%3E%3Ccircle cx='14' cy='23.4' r='1.6' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='19.2' cy='22.4' r='1.1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E"); transform: rotate(12deg); }
.ls-node.is-goal { background: #FFF3C4; border: 2px solid #F2C94C; color: var(--orange); }
.ls-node.is-goal small { color: #B7791F; }
.ls-node.is-goal b { color: var(--orange); }
.ls-sticker {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin-top: 22px;
  padding: 12px 16px; border-radius: var(--r-sm); background: #fff; font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
}
.ls-sticker b { color: var(--ink); }
.ls-sticker-ic { flex: none; display: flex; }
.ls-sticker-ic i { width: 30px; height: 30px; margin-left: -6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.5' fill='%23fff' stroke='%235DBB86' stroke-width='2.4'/%3E%3Cellipse cx='17' cy='25' rx='10' ry='6.8' fill='%235DBB86'/%3E%3Cpath d='M21 20.5C24 16.5 26 12.5 28.6 10.4c1-.8 4.4-.9 5.2.6.8 1.6-.4 3.2-2.4 3.4l-1.8.3c-1.7 3.2-2.4 6.8-3 10.3z' fill='%235DBB86'/%3E%3Cpath d='M8.4 22.6c-2.6.6-4.2 2.4-4.6 5 2.6.4 5-.3 6.6-1.8z' fill='%235DBB86'/%3E%3Crect x='11' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%235DBB86'/%3E%3Crect x='19.4' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%235DBB86'/%3E%3Ccircle cx='31.6' cy='12.2' r='1.1' fill='%231b1b1b'/%3E%3Ccircle cx='14' cy='23.4' r='1.6' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='19.2' cy='22.4' r='1.1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat; }
.ls-sticker-ic i:first-child { margin-left: 0; transform: rotate(-10deg); }
.ls-sticker-ic i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.5' fill='%23fff' stroke='%23F4A04F' stroke-width='2.4'/%3E%3Cpath d='M10 20l2.2-5.4 2.2 5.2zM14.6 18.6l2.6-6.2 2.6 6zM19.6 19l2.2-5 2.2 5.2z' fill='%23D06B2A'/%3E%3Cellipse cx='17' cy='25' rx='10' ry='6.8' fill='%23F4A04F'/%3E%3Cpath d='M21 20.5C24 16.5 26 12.5 28.6 10.4c1-.8 4.4-.9 5.2.6.8 1.6-.4 3.2-2.4 3.4l-1.8.3c-1.7 3.2-2.4 6.8-3 10.3z' fill='%23F4A04F'/%3E%3Cpath d='M8.4 22.6c-2.6.6-4.2 2.4-4.6 5 2.6.4 5-.3 6.6-1.8z' fill='%23F4A04F'/%3E%3Crect x='11' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%23F4A04F'/%3E%3Crect x='19.4' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%23F4A04F'/%3E%3Ccircle cx='31.6' cy='12.2' r='1.1' fill='%231b1b1b'/%3E%3Ccircle cx='14' cy='23.4' r='1.6' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='19.2' cy='22.4' r='1.1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E"); transform: rotate(6deg); }
.ls-sticker-ic i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18.5' fill='%23fff' stroke='%23F18AB0' stroke-width='2.4'/%3E%3Cpath d='M10 20l2.2-5.4 2.2 5.2zM14.6 18.6l2.6-6.2 2.6 6zM19.6 19l2.2-5 2.2 5.2z' fill='%23C9547F'/%3E%3Cellipse cx='17' cy='25' rx='10' ry='6.8' fill='%23F18AB0'/%3E%3Cpath d='M21 20.5C24 16.5 26 12.5 28.6 10.4c1-.8 4.4-.9 5.2.6.8 1.6-.4 3.2-2.4 3.4l-1.8.3c-1.7 3.2-2.4 6.8-3 10.3z' fill='%23F18AB0'/%3E%3Cpath d='M8.4 22.6c-2.6.6-4.2 2.4-4.6 5 2.6.4 5-.3 6.6-1.8z' fill='%23F18AB0'/%3E%3Crect x='11' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%23F18AB0'/%3E%3Crect x='19.4' y='28.6' width='3.6' height='5.4' rx='1.6' fill='%23F18AB0'/%3E%3Ccircle cx='31.6' cy='12.2' r='1.1' fill='%231b1b1b'/%3E%3Ccircle cx='14' cy='23.4' r='1.6' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='19.2' cy='22.4' r='1.1' fill='%23fff' opacity='.55'/%3E%3C/svg%3E"); transform: rotate(-4deg); }
@media (max-width: 640px) {
  .ls-node.is-done::after { width: 22px; height: 22px; right: -5px; top: -5px; }
  .ls-sticker { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
}

/* 帰りの会（レッスンの最後の約5分） */
.vt.is-after { margin: 18px 0 0; }
.vt.is-after .vt-badge { background: var(--teal-soft); color: var(--teal-ink); }
.vt-chara { width: 92px; height: auto; }
@media (max-width: 640px) {
  .vt.is-after { position: relative; }
  .vt-chara { position: absolute; right: 12px; top: 10px; width: 64px; }
}

/* ブログ・お知らせのファーストビュー：大きな数字は出さない */
.page-hero .bignum:empty { display: none; }

/* クラスA→D（スマホ）：見出し・グラフ・説明がひと画面に入るように */
@media (max-width: 640px) {
  .cls { padding: 24px 14px 18px; }
  .cls .frame-meta { display: none; }
  .cls-title { font-size: min(22px, calc((100vw - 76px) / 14)); line-height: 1.45; }
  .cls-lead { margin-top: 6px; font-size: 13px; line-height: 1.7; }
  .cls-lead-tap { display: none; }
  .cls-body { margin-top: 8px; gap: 12px; }
  .cls-chart { height: 236px; padding: 38px 0 0 30px; }
  .cls-grid, .cls-arrow { left: 30px; }
  .cls-grid { top: 38px; bottom: 54px; }
  .cls-arrow { top: 14px; width: calc(100% - 30px); height: calc(100% - 68px); }
  .cls-stepup { top: 0; font-size: 10px; }
  .cls-col { min-height: 50px; }
  .cls-letter { width: 28px; height: 28px; margin: 6px auto 2px; font-size: 14px; }
  .cls-chara { width: 40px; }
  .cls-panel { padding: 14px 14px 12px; }
  .cls-tag-letter { width: 34px; height: 34px; border-radius: 10px; font-size: 19px; }
  .cls-name { margin: 8px 0; font-size: 17px; }
  .cls-spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-top: 0; }
  .cls-spec > div { grid-template-columns: 1fr; gap: 2px; padding: 7px 8px; border: 0; border-radius: 10px; background: var(--paper); }
  .cls-spec dt { font-size: 10.5px; }
  .cls-spec dd { font-size: 12.5px; line-height: 1.4; }
  .cls-text { margin-top: 8px; font-size: 13px; line-height: 1.75; }
  .cls-auto { margin-top: 10px; }
  .cls-note { margin-top: 10px; font-size: 11px; line-height: 1.6; }
}
.eyebrow sup { margin-left: 1px; }
.ls-sticker > span:last-child { display: block; }
@media (max-width: 640px) {
  .cls-chart { height: 212px; }
  .cls-panel-in { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
  .cls-panel-in > :not(.cls-tag):not(.cls-name) { grid-column: 1 / -1; }
  .cls-tag .mono { display: none; }
  .cls-name { margin: 0; }
  .cls-spec { margin-top: 10px; }
}

/* ==========================================================================
   2026-10-06
========================================================================== */
/* 動いている飾りが画面の右にはみ出すと、スマホで画面が揺れる（右下のTOPボタンも動いて見える）ので切る */
main { overflow-x: clip; }
@supports not (overflow-x: clip) { main > section:not(.method) { overflow-x: hidden; } }

/* 地図：教室名は2行で、ピンの右に */
.access-map-label { white-space: pre; text-align: left; line-height: 1.35; }

/* 幼児クラス：時計をやめたので、イラストの枠を低く */
.crs-kids { min-height: 300px; }
.crs-panel .crs-kids { min-height: 280px; }
@media (max-width: 640px) {
  .crs-kids, .crs-panel .crs-kids { min-height: 250px; }
}

/* 教室へのアクセス：上の余白を少なく */
#access.sec { padding-top: 64px; }
@media (max-width: 640px) { #access.sec { padding-top: 36px; } }

/* 前橋荒牧校の実績（TOPの RESULTS の下・英検合格コース） */
.ar { margin-top: 56px; }
.ar-title { display: flex; flex-direction: column; gap: 6px; font-size: 22px; font-weight: 900; line-height: 1.4; margin-bottom: 22px; }
.ar-title .mono { font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--teal-ink); }
.ar-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ar-col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px 10px; }
.ar-head { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 900; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.ar-head span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.ar-list { list-style: none; margin: 0; padding: 0; }
.ar-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 14px 0; }
.ar-row + .ar-row { border-top: 1px solid var(--line-2); }
.ar-row .rs-badge { font-size: 19px; }
.ar-row .rs-badge.t1 { background: var(--teal); }
.ar-row .rs-badge.t2 { background: var(--teal-ink); }
.ar-row .rs-badge.t3 { background: var(--orange); }
.ar-row .rs-badge.t1 small, .ar-row .rs-badge.t2 small, .ar-row .rs-badge.t3 small { margin-top: -8px; font-size: 9.5px; }
.ar-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-who { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ar-what { font-size: 15.5px; font-weight: 900; line-height: 1.45; }
.ar-when { text-align: right; font-size: 11px; font-weight: 700; color: var(--ink-2); line-height: 1.3; white-space: nowrap; }
.ar-when strong { display: block; font-family: var(--latin); font-size: 20px; font-weight: 800; color: var(--teal-ink); }
/* 英検合格コースのページ：パソコンでは2列 */
.ar-list-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 24px; }
.ar-list-2 .ar-row:nth-child(2) { border-top: 0; }
@media (max-width: 960px) {
  .ar-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ar { margin-top: 40px; }
  .ar-title { font-size: 19px; }
  .ar-col { padding: 18px 16px 6px; }
  .ar-row { grid-template-columns: 46px 1fr auto; gap: 12px; }
  .ar-row .rs-badge { width: 46px; height: 46px; font-size: 17px; }
  .ar-what { font-size: 14.5px; }
  .ar-who { font-size: 11.5px; }
  .ar-when strong { font-size: 18px; }
  .ar-list-2 { grid-template-columns: 1fr; padding: 4px 16px; }
  .ar-list-2 .ar-row:nth-child(2) { border-top: 1px solid var(--line-2); }
}

/* 先生がすすめる理由（TOPの COURSE と VOICE のあいだ） */
.tch-points { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tch-points > li { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 36px 32px; overflow: hidden; }
.tch-num { position: absolute; top: 18px; right: 26px; font-family: var(--latin); font-size: 64px; font-weight: 800; line-height: 1; color: var(--teal-soft); }
.tch-points .mono { position: relative; color: var(--teal-ink); letter-spacing: .14em; }
.tch-points h3 { position: relative; margin-top: 10px; font-size: 24px; font-weight: 900; line-height: 1.45; }
.tch-points p { margin-top: 14px; color: var(--ink-2); font-size: 15px; }
.tch-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tch-tags li { font-size: 12.5px; font-weight: 700; color: var(--teal-ink); background: var(--teal-soft); border-radius: 999px; padding: 3px 12px; line-height: 1.7; }
.tch-future { display: flex; align-items: center; gap: 28px; margin-top: 20px; background: var(--teal-soft); border-radius: var(--r); padding: 28px 36px; }
.tch-future img { width: 120px; height: auto; flex: none; }
.tch-future-head { display: flex; flex-direction: column; gap: 2px; font-size: 19px; font-weight: 900; line-height: 1.45; }
.tch-future-head .mono { color: var(--teal-ink); letter-spacing: .14em; }
.tch-future-head + p { margin-top: 10px; font-size: 15px; }
.tch-future b { background: linear-gradient(transparent 62%, rgba(19, 181, 184, .28) 62%); }
.tch-sign { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--teal-ink); }
.tch-sign::before { content: "— "; }

/* 保護者の方の声：退会されたご家庭からのメッセージ（便箋ふう） */
.ltrs { margin-top: 56px; max-width: 820px; }
.ltrs .ar-title { margin-bottom: 6px; }
.ltrs-lead { color: var(--ink-2); font-size: 14px; margin-bottom: 20px; }
.ltr { position: relative; margin: 0; background-color: #FFFDF8; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 36px 28px; box-shadow: 0 10px 28px rgba(18, 20, 22, .06); }
.ltr + .ltr { margin-top: 20px; }
.ltr > .mono { display: block; color: var(--teal-ink); letter-spacing: .14em; line-height: 34px; }
.ltr blockquote {
  margin: 0; font-size: 15.5px; line-height: 34px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, #EDE6D6 33px 34px);
}
.ltr blockquote p + p { margin-top: 34px; }
.ltr mark { background: linear-gradient(transparent 60%, rgba(237, 114, 75, .22) 60%); color: inherit; }
.ltr figcaption { margin-top: 10px; text-align: right; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.ltr figcaption::before { content: "— "; }

@media (max-width: 960px) {
  .tch-points { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tch-points > li { padding: 26px 22px 24px; }
  .tch-num { font-size: 48px; top: 14px; right: 18px; }
  .tch-points h3 { font-size: 20px; }
  .tch-future { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 22px 24px; }
  .tch-future img { width: 84px; }
  .tch-future-head { font-size: 17px; }
  .ltrs { margin-top: 40px; }
  .ltr { padding: 20px 20px 22px; }
  .ltr > .mono { line-height: 30px; }
  .ltr blockquote { font-size: 14.5px; line-height: 30px; background-image: repeating-linear-gradient(to bottom, transparent 0 29px, #EDE6D6 29px 30px); }
  .ltr blockquote p + p { margin-top: 30px; }
}

/* コースのページ：幼児クラスのポイントとレッスンの流れ */
.kd-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.kd-point { background: var(--bg); border-radius: var(--r); padding: 24px 26px; }
.kd-point .mono { color: var(--teal-ink); letter-spacing: .14em; }
.kd-point b { display: block; margin-top: 6px; font-size: 20px; font-weight: 900; line-height: 1.45; }
.kd-point p { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.kd-point.is-wide { grid-column: 1 / -1; background: #FFF6EF; }
.kd-point.is-wide .mono { color: #C4552F; text-transform: none; font-family: var(--font); font-size: 14px; font-weight: 900; letter-spacing: .04em; }
.kd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kd-tags li { background: var(--paper); border: 1.5px solid #F4C2AE; border-radius: 999px; padding: 4px 14px; font-size: 14px; font-weight: 700; }
.kd-flow { margin-top: 56px; }
.kd-flow .ar-title { margin-bottom: 6px; }
.kd-flow-lead { font-size: 14.5px; color: var(--ink-2); }
.kd-flow-lead b { color: var(--ink); }
.kf-bar { display: flex; gap: 3px; margin: 20px 0 22px; height: 34px; }
.kf-seg { flex: var(--m) 1 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-style: normal; font-family: var(--latin); font-size: 12px; font-weight: 800; color: #fff; }
.kf-seg span::after { content: "分"; font-family: var(--font); font-size: 10px; margin-left: 1px; }
:is(.kf-seg, .kf-min).s1 { --c: #8FD3D4; } :is(.kf-seg, .kf-min).s2 { --c: #5CC6C8; } :is(.kf-seg, .kf-min).s3 { --c: var(--teal); } :is(.kf-seg, .kf-min).s4 { --c: #F29B7C; }
:is(.kf-seg, .kf-min).s5 { --c: var(--teal-ink); } :is(.kf-seg, .kf-min).s6 { --c: #5CC6C8; } :is(.kf-seg, .kf-min).s7 { --c: var(--orange); } :is(.kf-seg, .kf-min).s8 { --c: #8FD3D4; }
.kf-seg { background: var(--c); }
.kf-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; counter-reset: kf; }
.kf-list li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; background: var(--bg); border-radius: 14px; padding: 14px 16px; }
.kf-min { display: flex; align-items: baseline; justify-content: center; border-radius: 10px; background: var(--c); color: #fff; font-family: var(--latin); font-size: 24px; font-weight: 800; line-height: 1; padding: 10px 0; }
.kf-min small { font-family: var(--font); font-size: 11px; margin-left: 1px; }
.kf-list b { font-size: 15.5px; font-weight: 900; line-height: 1.5; }
.kf-list b::before { counter-increment: kf; content: counter(kf, decimal) ". "; color: var(--ink-3); font-family: var(--latin); }
.kf-list p { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin-top: 2px; }
@media (max-width: 760px) {
  .kd-points, .kf-list { grid-template-columns: 1fr; }
  .kd-point.is-wide { grid-column: auto; }
  .kd-point b { font-size: 18px; }
  .kf-bar { height: 28px; gap: 2px; }
  .kf-seg { font-size: 10px; border-radius: 5px; }
  .kf-seg span::after { display: none; }
  .kf-list li { grid-template-columns: 54px 1fr; gap: 12px; padding: 12px 14px; }
  .kf-min { font-size: 20px; }
}

/* 英検合格コースのページ：級ごとのコース内容・追加補習講座・無料体験 */
.ek-cycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 24px; }
.ek-cycle li { position: relative; background: var(--teal-soft); padding: 18px 20px 18px 34px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); margin-right: -10px; }
.ek-cycle li:first-child { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding-left: 22px; border-radius: 14px 0 0 14px; }
.ek-cycle li:nth-child(2) { background: #C9ECEC; }
.ek-cycle li:nth-child(3) { background: var(--teal); color: #fff; }
.ek-cycle .mono { display: block; color: var(--teal-ink); }
.ek-cycle li:nth-child(3) .mono { color: #fff; }
.ek-cycle b { font-size: 15.5px; font-weight: 900; line-height: 1.5; }
.ek-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ek-plans li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; background: var(--bg); border-radius: var(--r); padding: 22px 22px 20px; }
.ek-plans .rs-badge { grid-row: span 3; width: 56px; height: 56px; font-size: 22px; }
.ek-plans h3 { font-size: 17px; font-weight: 900; line-height: 1.4; }
.ek-plan-what { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-top: 6px; }
.ek-plan-num { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ek-plan-num b { font-family: var(--latin); font-size: 28px; font-weight: 800; color: var(--teal-ink); margin: 0 2px; }
.ek-plan-note { margin-top: 12px; }
.ek-extra { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 26px 32px; border-radius: var(--r); background: #FFF6EF; box-shadow: inset 0 0 0 2px #F4C2AE; }
.ek-extra .mono { color: #C4552F; letter-spacing: .14em; }
.ek-extra h3 { font-size: 22px; font-weight: 900; line-height: 1.4; margin-top: 2px; }
.ek-extra div p { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
.ek-extra-price { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.3; }
.ek-extra-price span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ek-extra-price b { font-family: var(--latin); font-size: 40px; font-weight: 800; color: #C4552F; line-height: 1.1; }
.ek-extra-price b small { font-family: var(--font); font-size: 14px; font-weight: 700; margin-left: 2px; }
.ek-trial { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.ek-trial-spec { background: var(--bg); border-radius: var(--r); padding: 8px 26px; }
.ek-trial-spec > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; }
.ek-trial-spec > div + div { border-top: 1px solid var(--line); }
.ek-trial-spec dt { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.ek-trial-spec dd { font-size: 15px; }
.ek-trial-spec dd b { font-weight: 900; color: var(--teal-ink); }
@media (max-width: 860px) {
  .ek-plans, .ek-trial { grid-template-columns: 1fr; }
  .ek-trial { gap: 24px; }
  .ek-cycle { grid-template-columns: 1fr; gap: 6px; }
  .ek-cycle li, .ek-cycle li:first-child { clip-path: none; margin: 0; padding: 12px 18px; border-radius: 12px; }
  .ek-cycle b br { display: none; }
  .ek-extra { flex-direction: column; align-items: flex-start; padding: 22px 22px; gap: 12px; }
  .ek-extra-price { align-items: flex-start; }
  .ek-extra-price b { font-size: 34px; }
  .ek-trial-spec { padding: 4px 18px; }
  .ek-trial-spec > div { grid-template-columns: 92px 1fr; }
}

/* 「約2倍」の 2 を大きく太い数字に（漢字より小さく見えないように） */
.hl-num { font-family: var(--latin); font-weight: 900; font-size: 1.5em; line-height: .8; letter-spacing: -.02em; margin: 0 .04em; display: inline-block; transform: translateY(.04em) skewX(-6deg); }
.vocab-msg-lead .hl-num { font-size: 1.25em; }

/* タイピングと手書き：パソコンは「説明｜動画」の下に、特徴を横いっぱいに2列で */
@media (min-width: 961px) {
  .speed-grid { grid-template-areas: "main video" "feat feat"; row-gap: 48px; align-items: center; }
  .speed-grid > .ty-feature { margin-top: 0; padding: 24px 26px 22px; }
  .ty-feature-list { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ty-feature-list li { align-content: start; }
}

/* がんばりが、結果になる：前橋荒牧校／アクティメソッドのタブ。荒牧校は入会からの期間ごとにまとめたカード */
.rs-tabs { margin-top: -8px; }
/* タブをやめて荒牧校の実績だけにしたとき：箱の四隅をそろえる */
.rs-tabs.is-single { margin-top: 0; }
.rs-tabs.is-single .rs-panel { border-radius: var(--r); }
.rs-panel { padding: 28px 40px 24px; }
@media (min-width: 861px) {
  .rs.is-aramaki .rs-chart { height: 520px; }
  .rs.is-aramaki .rs-axis, .rs.is-aramaki .rs-ticks li, .rs.is-aramaki .rs-item { top: 60%; }
  .rs.is-aramaki .rs-item.is-l .rs-card { transform: translateX(calc(-100% + 26px)); }
  .rs.is-aramaki .rs-item.is-r .rs-card { transform: translateX(-26px); }
  .rs.is-aramaki .rs-item.is-end .rs-card { transform: translateX(calc(-100% + 26px)); }
}
.rs-group { width: 220px; flex-direction: column; gap: 8px; padding: 12px 14px 12px; }
.rs-gwhen { font-size: 11.5px; font-weight: 700; color: var(--ink-2); line-height: 1.2; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); width: 100%; }
.rs-gwhen strong { font-family: var(--latin); font-size: 19px; font-weight: 800; color: var(--teal-ink); margin-left: 3px; }
.rs-glist { display: grid; gap: 8px; width: 100%; }
.rs-glist li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.rs-glist .rs-badge { width: 36px; height: 36px; font-size: 14px; }
.rs-glist .rs-badge small { font-size: 8px; margin-top: -6px; }
.rs-glist .rs-badge.t1 { background: var(--teal); }
.rs-glist .rs-badge.t2 { background: var(--teal-ink); }
.rs-glist .rs-badge.t3 { background: var(--orange); }
.rs-glist .rs-badge.t0 { background: #5CC6C8; font-size: 13px; }
.rs-glist .rs-badge.t1, .rs-glist .rs-badge.t2, .rs-glist .rs-badge.t3 { font-size: 12px; }
.rs-glist .rs-badge.t0 small { font-size: 7px; }
.rs-glist .rs-who { display: block; font-size: 10px; line-height: 1.3; white-space: nowrap; letter-spacing: -.01em; }
.rs-glist b { display: block; font-size: 13.5px; font-weight: 900; line-height: 1.4; }
@media (max-width: 960px) {
  .rs-panel { padding: 22px 18px 18px; }
}
@media (max-width: 860px) {
  .rs-group { width: auto; }
}
@media (max-width: 640px) {
  .rs-tabs .crs-tab { font-size: 13.5px; padding: 10px 6px; }
  .rs-tabs .crs-tab .mono { font-size: 8.5px; }
  .rs-panel { padding: 18px 12px 14px; border-radius: 0 16px 16px 16px; }
  .rs-tabs.is-single .rs-panel { border-radius: 16px; }
}

/* 見出しをタイピングで表示（main.js が1文字ずつ span にする） */
.tw-c { position: relative; }
.tw .tw-c { visibility: hidden; }
.tw .tw-c.on { visibility: visible; }
.tw-c.tw-cur::after, .tw-c.tw-pre::before {
  content: ""; position: absolute; top: .1em; bottom: .08em; width: .07em; min-width: 2px; border-radius: 1px;
  background: var(--teal); animation: tw-blink .9s steps(1) infinite;
}
.tw-c.tw-cur::after { right: -.1em; }
.tw-c.tw-pre::before { left: -.06em; visibility: visible; }
@keyframes tw-blink { 50% { opacity: 0; } }
.tw:not(.tw-done) .vocab-hl { background-size: 0% 100% !important; }

/* パソコンの画面：見えたらログイン画面 → 入力 → アクティアイランドの地図 */
.isl-pc-screen { position: relative; }
.isl-login {
  position: absolute; inset: 14px; z-index: 3; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #DDF6F6 0%, #BFEAEB 55%, #9FDDDF 100%);
  transition: opacity .6s ease, transform .6s ease;
}
.isl-login.is-done { opacity: 0; transform: scale(1.04); pointer-events: none; }
.isl-login.is-gone { display: none; }
.isl-login-card {
  width: min(330px, 70%); background: #fff; border-radius: 16px; padding: 20px 22px 18px;
  box-shadow: 0 18px 40px -20px rgba(10, 123, 126, .55); text-align: center;
}
.isl-login-logo { display: block; width: 170px; height: auto; margin: 0 auto 8px; }
.isl-login-card .mono { display: block; color: var(--teal-ink); letter-spacing: .16em; font-size: 10px; }
.isl-login-title { font-size: 17px; font-weight: 900; line-height: 1.4; margin: 2px 0 12px; }
.isl-login-field { display: block; text-align: left; margin-top: 8px; }
.isl-login-field span { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-3); line-height: 1.4; }
.isl-login-field i {
  display: flex; align-items: center; height: 34px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--line);
  font-style: normal; font-family: var(--latin); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ink);
}
.isl-login-field.is-on i { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(19, 181, 184, .18); }
.isl-login-field.is-on i::after { content: ""; width: 2px; height: 16px; margin-left: 1px; background: var(--teal); animation: tw-blink .9s steps(1) infinite; }
.isl-login-btn {
  display: block; margin-top: 14px; padding: 9px 0; border-radius: 999px; background: var(--teal); color: #fff;
  font-size: 14px; font-weight: 900; transition: transform .15s, background .15s;
}
.isl-login-btn.is-press { transform: scale(.94); background: var(--teal-ink); }
.isl-login-btn.is-wait::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: isl-spin .7s linear infinite; }
@keyframes isl-spin { to { transform: rotate(360deg); } }
.isl-pc-screen .isl-map-stage { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.isl-pc-screen.is-login .isl-map-stage { transform: scale(.96); }
@media (max-width: 640px) {
  .isl-login { inset: 8px; }
  .isl-login-card { width: 78%; padding: 12px 14px 12px; border-radius: 12px; }
  .isl-login-logo { width: 104px; margin-bottom: 2px; }
  .isl-login-title { font-size: 13px; margin-bottom: 4px; }
  .isl-login-field { margin-top: 4px; }
  .isl-login-field span { font-size: 9px; }
  .isl-login-field i { height: 24px; font-size: 11px; border-radius: 6px; }
  .isl-login-btn { margin-top: 8px; padding: 5px 0; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .isl-login { display: none; }
}

/* 級のバッジは「4級」を横に並べる（中1・単語のバッジは縦のまま） */
.rs-badge.g5, .rs-badge.g4, .rs-badge.g3 { display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: center; }
.rs-badge.g5 small, .rs-badge.g4 small, .rs-badge.g3 small { display: inline; margin: 0 0 0 1px; font-size: .5em; }

/* イベントのページ */
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ev-grid.is-two { grid-template-columns: repeat(2, 1fr); }
.ev-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sec.is-paper .ev-card { background: var(--bg); border-color: transparent; }
.ev-photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line-2); }
.ev-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ev-body { padding: 20px 22px 24px; }
.ev-body .mono { color: var(--teal-ink); letter-spacing: .14em; }
.ev-body h3 { margin-top: 4px; font-size: 20px; font-weight: 900; line-height: 1.45; }
.ev-body h3 small { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.ev-body p { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ev-tags li { font-size: 12px; font-weight: 700; color: var(--teal-ink); background: var(--teal-soft); border-radius: 999px; padding: 2px 11px; line-height: 1.7; }
#original .ev-tags li { color: #C4552F; background: #FFE9DF; }
.ev-report { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; }
.ev-report .ev-photo { aspect-ratio: 1200 / 630; margin: 20px 0 20px 20px; border-radius: 14px; }
.ev-report .ev-body { padding: 30px 36px; }
.ev-report .ev-body .mono { color: #C4552F; }
.ev-list { margin-top: 14px; display: grid; gap: 6px; }
.ev-list li { position: relative; padding-left: 18px; font-size: 14.5px; font-weight: 700; }
.ev-list li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.ev-more { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 900; color: var(--teal-ink); }
.ev-report:hover .ev-photo img { transform: scale(1.04); }
.ev-report:hover .ev-more { text-decoration: underline; }
@media (max-width: 960px) {
  .ev-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ev-grid, .ev-grid.is-two, .ev-report { grid-template-columns: 1fr; }
  .ev-report .ev-photo { margin: 0; border-radius: 0; }
  .ev-report .ev-body { padding: 20px 22px 24px; }
  .ev-body h3 { font-size: 18px; }
}

/* アクティメソッドの実績：タイムラインの下の3つの実績 */
.rs-hl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.rs-hl li { display: flex; align-items: center; gap: 14px; background: var(--bg); border-radius: 16px; padding: 16px 18px; }
.rs-hl-big { flex: none; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; align-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--latin); font-size: 24px; font-weight: 800; line-height: 1; }
.rs-hl-big small { font-family: var(--font); font-size: 12px; font-weight: 900; margin-left: 1px; }
.rs-hl li:nth-child(2) .rs-hl-big { background: var(--teal-ink); }
.rs-hl li:nth-child(2) .rs-hl-big small { font-size: 12.5px; margin: 0; letter-spacing: -.02em; }
.rs-hl li:nth-child(3) .rs-hl-big { background: var(--teal); font-size: 20px; }
.rs-hl b { font-size: 15.5px; font-weight: 900; line-height: 1.5; }
@media (max-width: 860px) {
  .rs-hl { grid-template-columns: 1fr; gap: 8px; }
  .rs-hl li { padding: 12px 14px; }
  .rs-hl-big { width: 52px; height: 52px; font-size: 20px; }
  .rs-hl li:nth-child(3) .rs-hl-big { font-size: 16px; }
  .rs-hl li:nth-child(2) .rs-hl-big small { font-size: 10.5px; }
  .rs-hl b br { display: none; }
}

/* 実績のタブ：パネルの中にキャラクター */
.rs-panel { position: relative; }
.rs-chara { position: absolute; z-index: 1; display: flex; align-items: flex-end; gap: 4px; pointer-events: none; }
.rs-chara img { width: 92px; height: auto; }
.rs-chara-say {
  position: relative; margin-bottom: 52px; padding: 6px 11px; border-radius: 12px; background: var(--paper);
  border: 1.5px solid var(--teal); font-size: 12px; font-weight: 900; line-height: 1.4; color: var(--teal-ink); white-space: nowrap;
}
.rs-chara-say::after { content: ""; position: absolute; right: -7px; bottom: 10px; border: 6px solid transparent; border-left-color: var(--teal); }
.rs-chara.is-a { right: 14px; top: 10px; }
.rs-chara.is-m { left: 41%; bottom: 122px; flex-direction: row-reverse; }
.rs-chara.is-m .rs-chara-say { border-color: var(--orange); color: #C4552F; }
.rs-chara.is-m .rs-chara-say::after { right: auto; left: -7px; border-left-color: transparent; border-right-color: var(--orange); }
.rs-panel:not([hidden]) .rs-chara img { animation: rs-chara-hop 2.4s ease-in-out infinite; }
@keyframes rs-chara-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px) rotate(-4deg); } 90% { transform: translateY(0) rotate(3deg); } }
@media (max-width: 860px) {
  .rs-chara img { width: 58px; }
  .rs-chara-say { margin-bottom: 30px; font-size: 10.5px; padding: 4px 8px; }
  .rs-chara.is-a, .rs-chara.is-m { right: 8px; left: auto; top: 6px; bottom: auto; flex-direction: row; }
  .rs-chara.is-m .rs-chara-say::after { left: auto; right: -7px; border-right-color: transparent; border-left-color: var(--orange); }
  .rs-panel .rs-legend { padding-right: 132px; min-height: 64px; }
  .rs-panel .rs-legend-line { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rs-chara img { animation: none !important; } }

/* 教室へのアクセス：見出しの右で、手をつないだあっちゃんとめーちゃんが教室へ歩く */
.acc-head { display: flex; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.acc-head .sec-head { margin-bottom: 0; flex: none; }
.acc-walk { position: relative; flex: 1; max-width: 520px; height: 128px; margin-left: auto; }
.acc-walk::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; border-bottom: 2px dashed var(--line); }
.acc-walk-pin { position: absolute; right: 0; bottom: 10px; display: flex; flex-direction: column; align-items: center; color: var(--orange); font-size: 11px; font-weight: 900; line-height: 1.2; }
.acc-walk-pair { position: absolute; left: 0; bottom: 8px; width: 200px; animation: acc-walk-x 16s linear infinite; }
.acc-walk-pair img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: acc-walk-bob .42s ease-in-out infinite alternate; }
@keyframes acc-walk-x {
  0% { left: 0; transform: scaleX(1); }
  46% { left: calc(100% - 250px); transform: scaleX(1); }
  50% { left: calc(100% - 250px); transform: scaleX(-1); }
  96% { left: 0; transform: scaleX(-1); }
  100% { left: 0; transform: scaleX(1); }
}
@keyframes acc-walk-bob {
  from { transform: translateY(0) rotate(-2.5deg); }
  to { transform: translateY(-7px) rotate(2.5deg); }
}
@media (max-width: 760px) {
  .acc-head { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 32px; }
  .acc-walk { flex: none; width: 100%; max-width: none; height: 96px; margin: 0; }
  .acc-walk-pair { width: 150px; }
  @keyframes acc-walk-x {
    0% { left: 0; transform: scaleX(1); }
    46% { left: calc(100% - 190px); transform: scaleX(1); }
    50% { left: calc(100% - 190px); transform: scaleX(-1); }
    96% { left: 0; transform: scaleX(-1); }
    100% { left: 0; transform: scaleX(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .acc-walk-pair, .acc-walk-pair img { animation: none; }
}

/* スマホのフッター：まとまりごとに横に並べて短く（トップへのリンクはロゴがあるので出さない） */
@media (max-width: 640px) {
  .ft-nav { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .ft-col { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ft-col p { width: 100%; margin: 0 0 2px; }
  .ft-col a { font-size: 12.5px; }
  .ft-col a + a::before { content: "／"; margin: 0 6px; color: var(--ink-3); font-weight: 400; }
  .ft-col a::after { display: none; }
  .ft-col a[href="index.html"] { display: none; }
}

/* レッスンの地図：クリアしたところは、恐竜シールが丸ごと覆いかぶさってペタッと貼ってある */
.ls-node.is-done { border-color: var(--line); background: var(--paper); }
.ls-node.is-done::after {
  left: -6px; right: -6px; top: -6px; bottom: -6px; width: auto; height: auto; z-index: 1;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 3px 3px rgba(18, 20, 22, .24));
  animation: ls-stick .55s cubic-bezier(.2, .9, .3, 1.15) backwards;
}
@keyframes ls-stick { from { opacity: 0; transform: scale(1.7) rotate(-35deg) translateY(-16px); } 60% { opacity: 1; } }
.ls-node.is-done small { display: none; }
.ls-node.is-done b {
  position: absolute; right: -8px; bottom: -8px; z-index: 3; min-width: 24px; height: 24px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; background: #fff; border: 2px solid var(--teal);
  color: var(--teal-ink); font-size: 12px; line-height: 1; box-shadow: 0 2px 4px rgba(18, 20, 22, .18);
}
.ls-node.is-done.is-test b { border-color: var(--orange); color: #C4552F; }
@media (max-width: 640px) {
  .ls-node.is-done::after { left: -5px; right: -5px; top: -5px; bottom: -5px; }
  .ls-node.is-done b { right: -6px; bottom: -6px; min-width: 20px; height: 20px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .ls-node.is-done::after { animation: none; } }

/* 音読の島：宝箱は各周の最後にパカッと開き、「音読終了！」はチャレンジまでクリアしたときだけ */
.od-chest b { opacity: 0; transform: translateY(0); transition: opacity .5s; }
.od-chest.is-complete b { opacity: 1; }
.od-chest.is-open svg { animation: od-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes od-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14) rotate(-3deg); } 100% { transform: scale(1); } }

/* タイピングの島の練習画面：ふりがなの有無で文字が上下にずれないよう、高さを固定 */
.ty-ja { display: flex; align-items: flex-end; justify-content: center; height: 64px; }
.ty-word { display: block; height: 70px; line-height: 70px; }
.ty-row { height: 76px; align-items: center; }
.ty-hint { height: 1.6em; }
@media (max-width: 640px) { .ty-ja { height: 54px; } .ty-word { height: 52px; line-height: 52px; } .ty-row { height: 60px; min-height: 0; } }

/* 追加補習講座は金額を出さず、小さく添える */
.ek-extra-note { margin-top: 10px; font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }


/* ---- 2025-10-06 スマホの見た目の直し ---- */
/* トップ（スマホ）：「TYPING ENGLISH」の代わりに、地域と対象の札 */
.hero-tags-sp { display: none; }
@media (max-width: 640px) {
  .hero-copy .eyebrow { display: none; }
  .hero-tags-sp { display: flex; flex-wrap: wrap; gap: 8px; order: 1; margin: 0 0 8px; }
  .hero-tags-sp .hs-tag { margin: 0; font-size: 14px; display: inline-block; }
  .hero-sub.is-sp .hs-tags { display: none; }
}
/* ページ上の枠（ページ見出しのカード）：スマホは上の余白をつめる */
@media (max-width: 640px) {
  .page-hero-body { padding: 46px 22px 44px; }
  .page-hero .crumb { margin-bottom: 18px; }
}
/* レッスン期間は1行に */
.cls-spec dd { white-space: nowrap; }
@media (max-width: 640px) { .cls-spec dd { font-size: 12px; letter-spacing: -.02em; } }
/* 実績のタブ：スマホは吹き出しをやめ、キャラクターは説明文に重ならない位置へ */
@media (max-width: 860px) {
  .rs-chara-say { display: none; }
  .rs-chara img { width: 62px; }
  .rs-panel .rs-legend { padding-right: 76px; min-height: 66px; }
}
/* フッター：郵便番号と住所を2列にして、折り返しても「群馬県」の位置にそろえる。3つの見出しは大きく */
.ft-addr { display: grid; grid-template-columns: auto 1fr; column-gap: .6em; }
.ft-col p { font-size: 14px; font-weight: 900; letter-spacing: .06em; margin-bottom: 4px; }
@media (max-width: 640px) { .ft-col p { font-size: 15px; } }
/* コースのCTA見出し：「どのコースも、」が1行に収まる大きさに */
@media (max-width: 640px) { .cta-title.is-fit { font-size: min(42px, 10.4vw); } }
/* パンくず：折り返さない。長い記事名は「…」で省略 */
.crumb { flex-wrap: nowrap; }
.crumb > a, .crumb > span:not(.crumb-current) { flex: none; white-space: nowrap; }
.crumb .crumb-current { flex: 0 1 auto; min-width: 0; }
.page-hero-body > div { min-width: 0; }

/* 実績・保護者の声の直後の「無料体験」ボタン */
.sec-cta { margin-top: 48px; text-align: center; }
.sec-cta p { margin: 0 0 16px; font-size: 17px; font-weight: 800; color: var(--ink); }
@media (max-width: 640px) {
  .sec-cta { margin-top: 36px; }
  .sec-cta p { font-size: 15px; }
  .sec-cta .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   2026-10-07 スマホの見た目の調整・体験ページ・メニュー
========================================================================== */
.tr-min { margin-left: 8px; font-size: 14px; font-weight: 700; color: var(--teal-ink); white-space: nowrap; }
.tr-min-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-2); }
.tr-teacher { margin-top: 28px; padding: 22px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.tr-teacher .mono { display: block; color: var(--teal-ink); font-size: 11px; letter-spacing: .12em; }
.tr-teacher h3 { margin: 6px 0 10px; font-size: 18px; font-weight: 900; }
.tr-teacher ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tr-teacher li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }
.tr-teacher li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
#encourage .num-list .vt-orig { margin: 8px 0 0; font-weight: 700; color: var(--teal-ink); font-size: 12.5px; }
#encourage .num-list h3 { margin-top: 14px; }

/* メニューを開いたとき：うしろのページが透けないよう、ヘッダーと画面全体に背景をしく */
@media (max-width: 1140px) {
  .hd.is-menu { background: #F5F6F4; border-color: var(--line); }
  .hd.is-menu::after { content: ""; position: fixed; inset: 0; z-index: -1; background: #F5F6F4; }
}

@media (max-width: 640px) {
  /* トップ：3行（打って、覚える／子供英語教室／タイピングと英語を同時に習得）を同じ幅にそろえる */
  .hero-title .ht-sp { margin-left: 0; font-size: calc((100vw - 62px) / 5.94); letter-spacing: -.01em; }
  .hs-main { font-size: calc((100vw - 62px) / 15); letter-spacing: 0; text-align: left; }
  /* 枠の上の小さな英字（ACTI METHOD — …）はスマホでは出さない */
  .frame-meta { display: none; }
  .hero-body { padding-top: 52px; }
  .page-hero-body { padding-top: 28px; }
  .crumb { margin-bottom: 8px; }
  /* ページ見出しのすぐ下の最初の欄は、上の余白をつめる */
  .page-hero + .sec { padding-top: 36px; }
  /* 幼児クラスなど、項目名と内容を横に並べて縦に長くしない */
  .spec.is-compact > div { grid-template-columns: 4.6em 1fr; gap: 10px; padding: 11px 0; align-items: baseline; }
  .spec.is-compact dt { font-size: 13px; }
  .spec.is-compact dd { font-size: 14px; }
  /* よくあるご質問まわりの余白 */
  .faq.sec { padding-top: 44px; }
  .faq-grid { gap: 14px; }
  /* 大きな背景文字（Let’s Typing! / LESSON）は、左が切れないよう枠に収める */
  .page-hero .bignum.is-words { left: 15px; right: auto; bottom: 14px; font-size: calc((100vw - 50px) / 6.05); }
  .page-hero .bignum.is-words.is-lesson { font-size: calc((100vw - 50px) / 4.3); }
  .page-hero:has(.bignum.is-words) .page-hero-body { padding-bottom: 64px; }
  /* 文字を大きく */
  .cls-title { font-size: calc((100vw - 108px) / 9.4); line-height: 1.4; }
  .vh-shout b { font-size: 24px; padding: 3px 12px; }
  .vh-shout .vh-shout-t { font-size: 18px; }
}

/* レッスン内容「がんばりが、目に見える教室」：認定証・シートの画像つきカード */
.mv-list li.mv-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mv-photo { margin: 0; aspect-ratio: 4 / 3; background: var(--teal-soft); display: flex; align-items: center; justify-content: center; padding: 22px; }
.mv-photo img { width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 1px 0 rgba(18, 20, 22, .06); }
.mv-photo.is-tall { padding: 0; overflow: hidden; align-items: flex-start; }
.mv-photo.is-tall img { height: 100%; width: auto; max-width: none; border-radius: 0; box-shadow: none; }
.mv-body { padding: 24px 28px 30px; }
.mv-body .num { font-size: 36px; }
.mv-body h3 { margin: 10px 0 6px; }
.mv-body .vt-orig { margin: 0 0 8px; }
.ev-photo.is-sheet { background: var(--teal-soft); }
.ev-photo.is-sheet img { object-fit: cover; object-position: top; }
@media (max-width: 640px) {
  .mv-body { padding: 20px 20px 24px; }
}

/* 無料体験の流れの下：手をつないで歩く → ガチャのところでハイタッチしてジャンプ → 消える → またしばらくして左から */
.tr-walk { position: relative; max-width: 860px; height: 150px; margin-top: 30px; overflow: hidden; }
.tr-walk::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; border-bottom: 2px dashed var(--line); }
.tr-walk-pair { position: absolute; left: -240px; bottom: 8px; width: 220px; animation: tr-walk-x 14s linear infinite; }
.tr-walk-pair img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: acc-walk-bob .42s ease-in-out infinite alternate; }
.tr-walk-hi { position: absolute; right: 0; bottom: 2px; width: 250px; opacity: 0; transform-origin: 50% 100%; animation: tr-walk-hi 14s ease-in-out infinite; }
.tr-walk-hi img { display: block; width: 100%; height: auto; }
@keyframes tr-walk-x {
  0% { left: -240px; opacity: 1; }
  54% { left: calc(100% - 240px); opacity: 1; }
  55% { left: calc(100% - 240px); opacity: 0; }
  100% { left: calc(100% - 240px); opacity: 0; }
}
@keyframes tr-walk-hi {
  0%, 54% { opacity: 0; transform: translateY(0); }
  55% { opacity: 1; transform: translateY(0); }
  59% { transform: translateY(-46px) scale(1.04); }
  63% { transform: translateY(0); }
  67% { transform: translateY(-46px) scale(1.04); }
  71% { transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(0); }
}
@media (min-width: 961px) { .tr-walk { max-width: none; } }
@media (max-width: 640px) {
  .tr-walk { height: 112px; margin-top: 18px; }
  .tr-walk-pair { width: 150px; }
  .tr-walk-hi { width: 170px; }
  @keyframes tr-walk-x {
    0% { left: -170px; opacity: 1; }
    54% { left: calc(100% - 165px); opacity: 1; }
    55% { left: calc(100% - 165px); opacity: 0; }
    100% { left: calc(100% - 165px); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .tr-walk-pair, .tr-walk-pair img, .tr-walk-hi { animation: none; }
  .tr-walk-pair { left: 20px; }
}

/* 無料体験「ご予約の前に」：補足の箇条書き */
.tr-notes { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.num-list .tr-notes li { position: relative; background: none; border: 0; border-radius: 0; padding: 0 0 0 16px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.tr-notes li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.tr-notes b { display: block; color: var(--ink); font-size: 14px; }
.tr-notes-foot { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }

/* 保護者の方からのお手紙：中央に */
.ltrs { margin-left: auto; margin-right: auto; }
.ltrs .ar-title, .ltrs-lead { text-align: center; justify-content: center; }
.ltrs .ar-title { display: flex; flex-direction: column; align-items: center; }


/* 幼児クラスのページ（チラシと出席カードをもとに作り直し） */
.kd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.kd3 li { position: relative; }
.kd3-label { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 900; color: #fff; background: var(--teal); margin-bottom: 14px; }
.kd3-label.is-2 { background: var(--orange); }
.kd3-label.is-3 { background: var(--teal-ink); }
.kd3 .mono { display: block; color: var(--teal-ink); letter-spacing: .14em; font-size: 11px; }
.kd3 h3 { margin-top: 6px; }
.kd-class { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.kd-class .spec { margin-top: 0; }
.kd-class .spec > div { grid-template-columns: 110px 1fr; }
.kd-card { margin: 0; background: var(--teal-soft); border-radius: var(--r); padding: 22px; }
.kd-card img { display: block; width: 100%; height: auto; border-radius: 10px; }
.kd-card figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-2); text-align: center; }
@media (max-width: 860px) {
  .kd-class { grid-template-columns: 1fr; gap: 28px; }
  .kd-card { max-width: 420px; margin: 0 auto; }
}


/* 幼児クラス：見出しの下の札 */
.kd-badges { margin: 16px 0 18px; }
.kd-badges .hs-tag { position: static; display: inline-block; margin: 0; }

/* アクティメソッドで、できるようになること */
.can-list .mono { display: block; color: var(--teal-ink); letter-spacing: .14em; font-size: 11px; margin-top: 14px; }
.can-list h3 { margin-top: 6px; }

/* タイピング英語®で学ぶ単語数 */
.wd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wd-col { background: var(--bg); border-radius: var(--r); padding: 26px 28px; }
.wd-head { display: flex; flex-direction: column; gap: 2px; font-size: 18px; font-weight: 900; }
.wd-head .mono { color: var(--teal-ink); letter-spacing: .14em; font-size: 11px; }
.wd-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wd-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.wd-list span { font-weight: 700; }
.wd-list em { font-style: normal; color: var(--ink-2); font-size: 13px; }
.wd-list b { font-family: var(--latin); font-weight: 800; font-size: 16px; }
.wd-sum { margin-top: 14px; text-align: right; font-family: var(--latin); font-size: 34px; font-weight: 800; color: var(--teal-ink); line-height: 1; }
.wd-sum small { font-family: var(--font); font-size: 14px; margin-left: 2px; }
.wd-total { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 18px; background: var(--teal-ink); color: #fff; border-radius: var(--r); padding: 22px 28px; }
.wd-total .mono { letter-spacing: .14em; opacity: .8; }
.wd-total p { font-size: 18px; font-weight: 900; }
.wd-total b { font-family: var(--latin); font-size: 48px; font-weight: 800; margin: 0 4px 0 10px; line-height: 1; }
@media (max-width: 760px) {
  .wd-grid { grid-template-columns: 1fr; }
  .wd-total { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   2026-10-07 レッスン内容：レッスンの流れ（ビジョントレーニング〜帰りの会）
========================================================================== */
.step-catch { margin-top: 16px; font-size: 15px; font-weight: 900; line-height: 1.6; color: var(--teal-ink); max-width: 30em; }
.step-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; max-width: 32em; }
.step-list li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.step-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 3px; background: var(--teal); }
.step-list b { display: block; color: var(--ink); }
.step.has-list .step-title { font-size: clamp(40px, 4.6vw, 64px); }
.step.has-list .step-sub { margin-top: 14px; }
.step.has-list .step-text { margin-top: 10px; font-size: 14px; }
/* ビジョントレーニングの画面 */
.vision { text-align: center; }
.vision .vt-eyes { display: flex; justify-content: center; gap: 16px; margin: 4px 0 18px; }
.vision .vt-eyes span { width: 64px; height: 64px; }
.vision .vt-eyes i { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.vision-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; list-style: none; margin: 0 auto; padding: 0; max-width: 250px; }
.vision-grid li { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.vision-grid li.on { background: var(--teal); border-color: var(--teal); color: #fff; animation: press 1.4s ease-in-out infinite; }
.vision-grid li.done { background: var(--teal-soft); border-color: transparent; color: var(--teal-ink); }
.vision-cap { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.vision-cap .mono { display: block; margin-bottom: 2px; color: var(--teal-ink); }
/* 動画のあとはすぐテスト */
.player-next { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.player-next .mono { color: var(--teal-ink); }
.player-next b { margin-left: auto; font-family: var(--latin); font-size: 20px; color: var(--ink); }
.player-next b small { font-size: 12px; color: var(--ink-3); }
.kb-say { font-size: 13px; color: var(--teal-ink); }
/* 帰りの会の画面 */
.closing { position: relative; }
.closing-head { margin: 0 0 12px; font-size: 15px; font-weight: 900; }
.closing-head .mono { display: block; margin-bottom: 2px; color: var(--teal-ink); }
.closing-list { padding-right: 70px; }
.closing-reward { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--teal-soft); font-size: 14px; font-weight: 900; max-width: calc(100% - 70px); }
.closing-reward .mono { margin-left: auto; color: var(--teal-ink); }
.closing-star { width: 30px; height: 30px; border-radius: 50%; background: var(--teal-ink); color: #FFD84D; display: grid; place-items: center; font-size: 16px; }
.closing-chara { position: absolute; right: 14px; bottom: 12px; width: 76px; height: auto; }
/* 区切りの帯（ここからアクティアイランド） */
.part-band { background: var(--ink); color: #fff; padding: 64px 0; }
.part-band .mono { color: var(--teal); letter-spacing: .14em; font-size: 12px; }
.part-band h2 { margin-top: 12px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; line-height: 1.3; }
.part-band p:last-child { margin-top: 14px; max-width: 46em; font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .78); }
/* がんばりが目に見える教室：オレンジの札をやめて小さな文字に */
.mv-orig { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--teal-ink); }
.mv-photo img { box-shadow: 0 1px 0 rgba(18, 20, 22, .06), 0 10px 30px rgba(10, 123, 126, .10); }
@media (max-width: 960px) {
  .step.has-list .step-title { font-size: 44px; }
  .closing-chara { width: 64px; }
  .part-band { padding: 48px 0; }
}
@media (max-width: 640px) {
  .step-list li { font-size: 13px; }
  .vision .vt-eyes { display: flex; }
  .closing-list { padding-right: 0; }
  .closing-reward { max-width: none; }
  .closing-chara { display: none; }
}
/* 背の低い画面では、流れの1枚が収まるように詰める */
@media (min-width: 961px) and (max-height: 780px) {
  .step { padding-top: 48px; padding-bottom: 92px; }
  .step-title { font-size: clamp(44px, 5.6vw, 72px); }
  .step.has-list .step-title { font-size: clamp(36px, 4vw, 52px); }
  .step.has-list .step-text { font-size: 13.5px; }
  .step-list li { font-size: 13px; line-height: 1.6; }
}
.ek-shots-hint { display: none; }
@media (max-width: 960px) { .ek-shots-hint { display: flex; } }
@media (max-width: 640px) { .step.has-list .step-title { font-size: 40px; } }

/* ==========================================================================
   2026-10-07 ページの作り直し（アクティタイピング・アクティアイランド・トップ）
========================================================================== */
/* ファーストビュー（スマホ）：上の余白を詰め、「打って、覚える」を枠に収める */
@media (max-width: 640px) {
  .hero-body { padding-top: 22px; }
  .hero-title { font-size: min(52px, calc((100vw - 76px) / 7.2)); }
}
/* どっちが速い → アクティタイピングのボタン */
.speed-more { margin-top: 26px; }
/* 幼児クラス（トップ）：イラストをやめて文章だけ */
.crs-feature.is-solo { grid-template-columns: 1fr; max-width: 760px; }
.crs-feature.is-solo > :first-child { order: 0; }
/* 実績の下：英検合格コースへのボタンと、体験のボタン */
.sec-cta .btn + .sec-cta-sub { margin-top: 30px; }
/* アクセス（スマホ）：地図の下の余白 */
@media (max-width: 640px) {
  .access { padding-bottom: 28px; }
}
/* レッスン内容：アクティアイランドへの案内の帯 */
.part-band-cta { margin-top: 22px; }
@media (max-width: 640px) { .part-band-cta .btn { width: 100%; } }
/* ページの題を1文字ずつタイピングしたように出す */
.page-title.is-typed .pt-anim { display: block; }
.page-title.is-typed .pt-line { position: relative; }
.page-title.is-typed i { font-style: normal; visibility: hidden; animation: ht-type .01s steps(1) both; animation-delay: calc(.35s + var(--i) * .07s); }
.page-title.is-typed .pt-line:last-child::after {
  content: ""; display: inline-block; width: .06em; min-width: 3px; height: .82em; margin-left: .08em; vertical-align: -.06em;
  background: var(--orange); animation: blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-title.is-typed i { animation: none; visibility: visible; }
  .page-title.is-typed .pt-line:last-child::after { animation: none; }
}
/* 幼児クラス：レッスンでやっていること（4つ） */
.kd-menu .mono { display: block; color: var(--teal-ink); letter-spacing: .14em; font-size: 11px; margin-top: 14px; }
.kd-menu h3 { margin-top: 6px; }
.mv-note { margin: -22px 0 32px; font-size: 13px; color: var(--ink-3); }
/* 長い題（ブログなど）は、ふつうの日本語の折り返しにして、1文字ずつの間隔も短く */
.page-title.is-typed { word-break: normal; }
.page-title.-long.is-typed i { animation-delay: calc(.35s + var(--i) * .045s); }
/* 前橋荒牧校の3つの特長：見出しを2行に収める */
.num-list h3.pt-h3 { font-size: 16.5px; letter-spacing: -.01em; }
@media (min-width: 861px) { .pt-list > li { padding-left: 22px; padding-right: 22px; } }
/* 英検の実績：準2級の札 */
.rs-badge.gp2 { background: var(--ink); font-size: 15px; }
.ar-row .rs-badge.gp2 { font-size: 15px; }

/* ==========================================================================
   2026-10-07 アクティタイピングのページ
========================================================================== */
.ty-hero-aside { display: flex; align-items: flex-end; gap: 6px; }
.page-hero-aside.ty-hero-aside img { width: 150px; height: auto; }
.ty-head { display: grid; grid-template-columns: 1.05fr auto 1fr; gap: 28px; align-items: center; }
.ty-head .sec-head.is-tight { margin-bottom: 0; }
.ty-chara { width: 150px; height: auto; }
.ty.is-row { display: block; margin-top: 34px; }
.ty-levels.is-row { flex-direction: row; gap: 14px; }
.ty-levels.is-row li { flex: 1; }
.ty-levels.is-row .ty-level { height: 100%; grid-template-columns: 1fr; }
.ty-levels.is-row .ty-level-text { grid-column: 1; }
.ty-note.is-big { margin-top: 34px; padding: 24px 28px; border-radius: var(--r); background: var(--teal-soft); color: var(--ink); font-size: 18px; font-weight: 800; line-height: 1.7; }
.ty-note.is-big strong { display: block; margin: 0 0 4px; font-size: 32px; font-weight: 900; color: var(--teal-ink); background: linear-gradient(transparent 62%, #FFF35A 62%) no-repeat; width: fit-content; margin-inline: auto; padding: 0 6px; }
.sec-head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sec-chara { width: 140px; height: auto; flex: none; }
.split-img.is-cert { border: 0; background: var(--teal-soft); padding: 22px; }
.split-img.is-cert img { aspect-ratio: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(10, 123, 126, .12); }
.split-img.is-cert figcaption { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); text-align: center; }
.wd-total { padding: 26px 32px; gap: 22px; }
.wd-total-label { font-family: var(--mono); font-size: 14px; letter-spacing: .24em; font-weight: 700; color: #fff; padding: 4px 12px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px; }
.wd-total p { font-size: 22px; }
.wd-total b { font-size: 60px; }
@media (max-width: 960px) {
  .ty-head { grid-template-columns: 1fr; }
  .ty-chara { width: 120px; justify-self: center; }
  .ty-levels.is-row { flex-direction: column; }
}
@media (max-width: 640px) {
  .page-hero-aside.ty-hero-aside img { width: 110px; }
  .sec-chara { width: 96px; }
  .ty-note.is-big { padding: 20px 18px; font-size: 16px; }
  .ty-note.is-big strong { font-size: 26px; }
  .wd-total b { font-size: 44px; }
  .wd-total p { font-size: 18px; }
}

/* キャラクターを見出しの右に（各ページ） */
.sec-head .sec-head-row { margin-bottom: 0; }
.sec-chara.is-two { display: flex; align-items: flex-end; gap: 6px; width: auto; flex: none; }
.sec-chara.is-two img { width: 104px; height: auto; }
.sec-head-row.is-cta .sec-chara.is-pair { width: 230px; }
.crs-kids2 { display: flex; justify-content: center; align-items: flex-end; gap: 24px; }
.crs-kids2 img { width: 40%; max-width: 200px; height: auto; }
.jn-chara { width: 120px; }
/* 無料体験の流れの下：手をつないだ2人は左右反転して小さく、ジャンプも小さく（見切れないように） */
.tr-walk-pair { width: 170px; transform: scaleX(-1); }
.tr-walk-hi { width: 180px; }
@media (max-width: 640px) {
  .sec-chara.is-two img { width: 80px; }
  .sec-head-row.is-cta .sec-chara.is-pair { width: 150px; }
  .crs-kids2 img { max-width: 140px; }
  .tr-walk-pair { width: 120px; }
  .tr-walk-hi { width: 130px; }
}
.sec-head-row > div { flex: 1; min-width: 0; }
.hm-value .sec-chara { width: 104px; }
#kids .sec-title { font-size: clamp(24px, 2.7vw, 34px); }
@media (max-width: 640px) { .hm-value .sec-chara { width: 84px; } }

/* ==========================================================================
   2026-10-07 キャラの位置と動き
========================================================================== */
/* 見出しの右のキャラは、見出しのすぐ横ではなく右端の余白に */
.sec-head:has(> .sec-head-row) { max-width: none; }
.sec-head:has(> .sec-head-row) > :not(.sec-head-row) { max-width: 720px; }
.sec-chara { width: 150px; }

/* CTA：キャラはボタンの右（GOの左下） */
.cta-chara { position: absolute; left: 41%; bottom: 56px; width: 230px; height: auto; z-index: 1; pointer-events: auto; }
@media (max-width: 960px) {
  .cta-chara { position: static; width: 170px; margin: -8px auto 0; display: block; }
}

/* レッスン日程：キャラを小さく */
.page-hero-aside.is-sm img { width: 140px; }
.jn-chara { width: 96px; }

/* よくあるご質問の下：考えるキャラと、ふわふわ浮かぶ「？」 */
.faq-chara { position: relative; width: 150px; margin-top: 40px; }
.faq-chara img { display: block; width: 100%; height: auto; }
.faq-chara i { position: absolute; left: 92%; bottom: 70%; font-family: var(--latin); font-style: normal; font-weight: 800; font-size: 28px; color: var(--teal); opacity: 0; animation: faq-q 3.6s ease-out infinite; }
.faq-chara i:nth-child(3) { animation-delay: 1.2s; font-size: 22px; left: 108%; }
.faq-chara i:nth-child(4) { animation-delay: 2.4s; font-size: 34px; left: 100%; }
.faq-chara.is-orange i { color: var(--orange); }
@keyframes faq-q { 0% { opacity: 0; transform: translateY(10px) rotate(-10deg) scale(.6); } 20% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-44px) rotate(12deg) scale(1.1); } }
@media (max-width: 960px) { .faq-chara { width: 110px; margin-top: 24px; } }

/* キャラの動き：ゆらゆら浮いて、マウスをのせる（タップする）とジャンプ */
.sec-chara:not(.is-two), .sec-chara.is-two img, .ty-chara, .page-hero-aside > img, .jn-chara, .crs-kids2 img, .cta-chara, .faq-chara img, .hm-card img, .tr-walk-hi img, .acc-walk-pair img { will-change: transform; }
.sec-chara:not(.is-two), .sec-chara.is-two img, .ty-chara, .page-hero-aside > img, .jn-chara, .crs-kids2 img, .cta-chara, .faq-chara img, .hm-card img { transform-origin: 50% 100%; animation: chara-float 3.4s ease-in-out infinite; }
.sec-chara.is-two img:nth-child(2), .page-hero-aside > img:nth-child(2), .crs-kids2 img:nth-child(2), .hm-card.is-home img { animation-delay: -1.7s; }
@keyframes chara-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-2.5deg); } }
.sec-chara:not(.is-two):hover, .sec-chara.is-two img:hover, .ty-chara:hover, .page-hero-aside > img:hover, .jn-chara:hover, .crs-kids2 img:hover, .cta-chara:hover, .faq-chara img:hover, .hm-card img:hover { animation: chara-jump .7s cubic-bezier(.3, .9, .4, 1); }
@keyframes chara-jump {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(3px) scale(1.1, .88); }
  50% { transform: translateY(-32px) scale(.94, 1.08) rotate(-8deg); }
  80% { transform: translateY(0) scale(1.06, .94); }
  100% { transform: translateY(0) scale(1, 1); }
}
/* 見た目にも少し動きを：カードにマウスをのせると浮く */
.mv-card, .wd-col, .hm-card, .num-list > li, .faq-list details { transition: transform .3s ease, box-shadow .3s ease; }
.mv-card:hover, .wd-col:hover, .hm-card:hover, .num-list > li:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10, 123, 126, .12); }
.mv-card .mv-photo img { transition: transform .5s ease; }
.mv-card:hover .mv-photo img { transform: scale(1.03); }
.wd-total b { display: inline-block; animation: wd-pop 2.6s ease-in-out infinite; }
@keyframes wd-pop { 0%, 100% { transform: scale(1); } 6% { transform: scale(1.08); } 12% { transform: scale(1); } }

/* レッスン内容：アクティアイランドの帯は、黒ではなく海と島 */
.part-band { position: relative; overflow: hidden; color: var(--ink); background: linear-gradient(180deg, #EAF8F8 0%, #CDEFF0 100%); padding: 72px 0 96px; }
.part-band .mono { color: var(--teal-ink); }
.part-band p:last-child { color: var(--ink-2); }
.part-band-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.part-band-island { display: block; animation: pb-bob 5s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(10, 123, 126, .18)); transition: transform .4s ease; }
.part-band-island img { display: block; width: 100%; height: auto; }
.part-band-island:hover { animation-play-state: paused; transform: scale(1.03) rotate(-1deg); }
@keyframes pb-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(1deg); } }
.part-band-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; }
.part-band-waves i { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M0 50c40-30 80-30 120 0s80 30 120 0v40H0z' fill='%2313B5B8'/%3E%3C/svg%3E") repeat-x; background-size: 240px 90px; opacity: .22; animation: pb-wave 12s linear infinite; }
.part-band-waves i:nth-child(2) { height: 70%; opacity: .32; background-size: 180px 100%; animation-duration: 8s; animation-direction: reverse; }
@keyframes pb-wave { to { transform: translateX(-240px); } }
@media (max-width: 760px) {
  .part-band-grid { grid-template-columns: 1fr; gap: 28px; }
  .part-band-island { max-width: 380px; margin: 0 auto; }
}

/* がんばりが目に見える教室：点数シートの右で、ガチャガチャが回る */
.mv-photo.is-tall.has-gacha { position: relative; justify-content: flex-start; }
.gacha { position: absolute; right: 5%; bottom: 5%; width: 42%; max-width: 230px; }
.gacha svg { display: block; width: 100%; height: auto; overflow: visible; }
.gc-handle { transform-box: fill-box; transform-origin: center; animation: gc-turn 4.8s ease-in-out infinite; }
@keyframes gc-turn { 0%, 12% { transform: rotate(0); } 34%, 100% { transform: rotate(180deg); } }
.gc-balls { animation: gc-jiggle 4.8s ease-in-out infinite; }
@keyframes gc-jiggle { 0%, 12%, 40%, 100% { transform: none; } 17% { transform: translateY(-5px); } 24% { transform: translateY(2px) translateX(2px); } 31% { transform: translateY(-4px) translateX(-2px); } 37% { transform: translateY(1px); } }
.gc-out { transform-box: fill-box; transform-origin: center; animation: gc-drop 4.8s ease-in infinite; }
@keyframes gc-drop {
  0%, 36% { transform: scale(0); opacity: 0; }
  42% { transform: scale(1.15); opacity: 1; }
  46% { transform: scale(1); }
  56% { transform: translate(28px, 46px) rotate(60deg); }
  62% { transform: translate(40px, 36px) rotate(120deg); }
  68% { transform: translate(52px, 46px) rotate(180deg); }
  88% { transform: translate(52px, 46px) rotate(180deg); opacity: 1; }
  100% { transform: translate(52px, 46px) rotate(180deg); opacity: 0; }
}
.gc-get { transform-box: fill-box; transform-origin: center; opacity: 0; animation: gc-get 4.8s ease-out infinite; }
@keyframes gc-get { 0%, 46% { opacity: 0; transform: translateY(8px) scale(.6); } 54% { opacity: 1; transform: translateY(-6px) scale(1.15); } 60% { transform: translateY(-6px) scale(1); } 84% { opacity: 1; transform: translateY(-14px) scale(1); } 90%, 100% { opacity: 0; transform: translateY(-20px); } }
.gc-star { transform-box: fill-box; transform-origin: center; animation: gc-star 4.8s ease-in-out infinite; opacity: 0; }
.gc-star.s2 { animation-delay: .3s; }
@keyframes gc-star { 0%, 44% { opacity: 0; transform: scale(0) rotate(0); } 52% { opacity: 1; transform: scale(1.2) rotate(20deg); } 70% { opacity: 1; transform: scale(1) rotate(40deg); } 82%, 100% { opacity: 0; transform: scale(.4) rotate(60deg); } }

/* アクティタイピング：タイピングボックスの動画 */
.split-img.is-video { border: 0; background: var(--teal-soft); padding: 22px; max-width: 380px; justify-self: center; width: 100%; }
.split-img.is-video video { display: block; width: 100%; height: auto; aspect-ratio: 480 / 854; object-fit: cover; border-radius: 12px; background: var(--ink); box-shadow: 0 10px 30px rgba(10, 123, 126, .12); }
.split-img.is-video figcaption { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .part-band-island, .part-band-waves i, .gacha *, .faq-chara i, .wd-total b { animation: none !important; }
}
.step-list.is-big { gap: 8px; max-width: none; }
.step-list.is-big li { font-size: 15px; font-weight: 700; color: var(--ink); padding-left: 22px; }
.step-list.is-big li::before { width: 12px; height: 12px; border-radius: 4px; }
@media (max-width: 640px) { .sec-chara { width: 92px; } }
@media (max-width: 640px) {
  .sec-head-row .sec-title { font-size: 25px; }
  .mv-note { margin-top: 8px; }
}

/* スマホ：見出しの右のキャラは小さく、見出しも少し小さく（折り返しが変にならないように） */
.br-sp { display: none; }
@media (max-width: 640px) {
  .br-sp { display: inline; }
  .sec-head-row { gap: 12px; }
  .sec-chara { width: 70px; }
  .sec-chara.is-two { gap: 4px; }
  .sec-chara.is-two img { width: 60px; }
  .sec-head-row .sec-title { font-size: 22px; }
  .hm-value .sec-chara { width: 64px; }
  .hm-value-title { font-size: 22px; }
}
@media (max-width: 640px) { #island .sec-head-row .sec-title { font-size: 26px; } }

/* フッター：見えたら左右からキャラが飛び出して、引っ込む */
.ft { position: relative; overflow: hidden; padding-bottom: 130px; }
.ft-peek { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; }
.ft-peek-l, .ft-peek-r { position: absolute; bottom: 0; display: flex; align-items: flex-end; gap: 10px; transform: translateX(-110%); }
.ft-peek-l { left: 24px; }
.ft-peek-r { right: 24px; transform: translateX(110%); }
.ft-peek img { height: 96px; width: auto; transform-origin: 50% 100%; animation: chara-float 2.4s ease-in-out infinite; }
.ft-peek img:nth-child(2) { animation-delay: -1.2s; }
.ft.is-peek .ft-peek-l { animation: ft-peek-l 4.2s cubic-bezier(.3, .9, .3, 1) forwards; }
.ft.is-peek .ft-peek-r { animation: ft-peek-r 4.2s cubic-bezier(.3, .9, .3, 1) .25s forwards; }
@keyframes ft-peek-l { 0% { transform: translateX(-110%); } 20% { transform: translateX(0); } 72% { transform: translateX(0); } 100% { transform: translateX(-110%); } }
@keyframes ft-peek-r { 0% { transform: translateX(110%); } 20% { transform: translateX(0); } 72% { transform: translateX(0); } 100% { transform: translateX(110%); } }
@media (max-width: 640px) {
  .ft { padding-bottom: 100px; }
  .ft-peek { height: 90px; }
  .ft-peek img { height: 68px; }
  .ft-peek-l { left: 10px; } .ft-peek-r { right: 10px; }
}

/* 教室紹介：通える地域の下を、2人を乗せた車が左から右へ走る */
.drive { position: relative; height: 120px; margin-top: 18px; overflow: hidden; }
.drive-road { position: absolute; left: 0; right: 0; bottom: 14px; border-bottom: 3px dashed var(--line-2); }
.drive-car { position: absolute; left: -300px; bottom: 6px; width: 250px; animation: drive-x 9s linear infinite; }
.drive-bob { animation: drive-bob .32s ease-in-out infinite alternate; }
.drive-car svg { display: block; width: 100%; height: auto; overflow: visible; }
.drive-wheel { transform-box: fill-box; transform-origin: center; animation: drive-wheel .7s linear infinite; }
.drive-puff { animation: drive-puff .9s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes drive-x { 0% { left: -300px; } 100% { left: 100%; } }
@keyframes drive-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes drive-wheel { to { transform: rotate(360deg); } }
@keyframes drive-puff { 0% { opacity: .9; transform: translateX(0) scale(.6); } 100% { opacity: 0; transform: translateX(-26px) scale(1.4); } }
@media (max-width: 640px) { .drive { height: 90px; } .drive-car { width: 180px; } }

/* 教室長紹介：カードの右下から、キャラが上に現れる */
.staff { position: relative; overflow: hidden; }
.staff-msg.has-chara { padding-right: 130px; }
.staff-chara { position: absolute; right: 28px; bottom: 0; width: 120px; height: auto; transform: translateY(105%); }
.staff.is-in .staff-chara { animation: staff-rise 1s cubic-bezier(.2, .9, .3, 1.15) .45s forwards; }
@keyframes staff-rise { 0% { transform: translateY(105%); } 100% { transform: translateY(0); } }
@media (max-width: 760px) {
  .staff-msg.has-chara { padding-right: 0; padding-bottom: 84px; }
  .staff-chara { width: 92px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-peek-l, .ft-peek-r, .drive-car, .drive-bob, .drive-wheel, .drive-puff, .staff-chara { animation: none !important; }
  .staff.is-in .staff-chara { transform: none; }
}

/* フッターの右のキャラは、TOPボタンにかからない位置に */
@media (min-width: 641px) { .ft-peek-r { right: 100px; } }

/* 無料体験の流れ：パソコンは 3列×2段のカードに（6つを横一列にすると窮屈なので） */
.tr-flow-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
@media (min-width: 961px) {
  .tr-flow { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .tr-flow li {
    grid-template-rows: auto auto 1fr; padding: 26px 26px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: 0 1px 0 rgba(18, 20, 22, .03); transition: transform .3s ease, box-shadow .3s ease;
  }
  .tr-flow li:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10, 123, 126, .12); }
  .tr-flow li::before { display: none; }
  .tr-flow li:not(:nth-child(3n))::after, .tr-flow li:nth-child(3)::after {
    content: "→"; position: absolute; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--teal); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 4px #fff;
  }
  .tr-flow li:not(:nth-child(3n))::after { right: -24px; top: 44px; }
  .tr-flow li:nth-child(3)::after { content: "↓"; right: auto; left: calc(50% - 13px); top: auto; bottom: -24px; }
  .tr-flow-no { width: 62px; height: 62px; font-size: 22px; background: var(--teal-soft); border-color: var(--teal-soft); }
  .tr-flow h3 { margin-top: 16px; font-size: 18px; }
  .tr-flow p { font-size: 14px; line-height: 1.85; }
  .tr-flow li.is-gacha { background: #FFF6F2; border: 2px solid var(--orange); }
  .tr-flow li.is-gacha .tr-flow-no { background: var(--orange); border-color: var(--orange); }
  .tr-flow li.is-gacha::after { display: none; }
  .tr-flow-tag { display: inline-block; margin: 0 8px 0 0; vertical-align: 3px; }
  .tr-walk { max-width: none; }
}
@media (min-width: 961px) {
  .tr-flow li.is-gacha .tr-flow-tag { display: table; margin: 0 0 8px; vertical-align: 0; }
  /* ご予約の前に：パソコンでは、キャラは3つ目の箱の右下にかぶせる */
  #notes .wrap { position: relative; }
  #notes .sec-chara { position: absolute; right: -14px; bottom: -36px; width: 170px; z-index: 2; }
}
/* よくあるご質問の下のキャラ：少し小さく、少し下に（トップ・無料体験・英検） */
.faq-chara { width: 124px; margin-top: 64px; }
@media (max-width: 960px) { .faq-chara { width: 96px; margin-top: 32px; } }

/* 無料体験のオリジナルガチャ：下から、目がキラキラの2人が現れる */
.gc-rise { display: flex; align-items: flex-end; gap: 18px; height: 150px; margin-top: 28px; overflow: hidden; opacity: 1; transform: none; }
.gc-rise img { width: 120px; height: auto; transform: translateY(110%); transform-origin: 50% 100%; }
.gc-rise.is-in img { animation: staff-rise .9s cubic-bezier(.2, .9, .3, 1.15) .2s forwards, chara-float 3.4s ease-in-out 1.2s infinite; }
.gc-rise.is-in img:nth-child(2) { animation-delay: .45s, 1.5s; }
@media (max-width: 640px) { .gc-rise { height: 120px; } .gc-rise img { width: 96px; } }
@media (prefers-reduced-motion: reduce) { .gc-rise img { transform: none; animation: none !important; } }

/* スマホの見直し（2026-10-07） */
@media (max-width: 640px) {
  .pt-h3 { font-size: 15px; }
  .can-list h3 { font-size: 18px; }
  .ty-feature-list b { font-size: 16px; }
  .step-sub { font-size: 14px; }
  .app-bar { gap: 8px; padding: 10px 12px; }
  .app-title { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-tag { white-space: nowrap; flex: none; }
  .rd-list h3, #ondoku .num-list h3 { font-size: 17px; }
  .od-chara { width: 84px; bottom: -34px; right: -4px; }
  .od-chest p { padding-right: 72px; }
  .rs-legend { padding-right: 96px; }
  .crs-trial b { font-size: 15px; }
}
/* 棒は下を支点にして凹む */
.cls-col { transform-origin: 50% 100%; }
/* トップの幼児クラス：右にウインクの2人 */
.crs-kids2.is-top { justify-content: center; gap: 18px; }
.crs-kids2.is-top img { max-width: 180px; }
@media (max-width: 960px) { .crs-kids2.is-top { order: 3; margin-top: 8px; } .crs-kids2.is-top img { max-width: 130px; } }
/* フッターのキャラ：パソコンでは大きく、長く出ている */
@media (min-width: 641px) {
  .ft { padding-bottom: 170px; }
  .ft-peek { height: 160px; }
  .ft-peek img { height: 140px; }
  /* 出たままにして、フッターが画面から外れたら引っ込む */
  .ft-peek-l, .ft-peek-r { transition: transform .9s cubic-bezier(.3, .9, .3, 1); }
  .ft-peek-r { transition-delay: .2s; }
  .ft.is-peek .ft-peek-l, .ft.is-peek .ft-peek-r { animation: none; transform: translateX(0); }
}
@media (max-width: 640px) {
  .num-list h3.pt-h3 { font-size: 15px; }
  .od-steps h3 { font-size: 17px; }
  .od-chest { margin-right: 80px; }
  .od-chara { right: 0; bottom: -36px; width: 76px; }
  .rs-legend { display: block; padding-right: 0; margin-top: 60px; }
  .rs-chara.is-a { top: 6px; }
}

/* ==========================================================================
   2026-10-08 まとめて見直し
========================================================================== */
.pc-only { display: inline; } .sp-only { display: none; }
.br-pc { display: inline; }
@media (max-width: 640px) { .pc-only { display: none; } .sp-only { display: inline; } .br-pc { display: none; } }

/* レッスン内容 */
.sec-title.is-big { font-size: clamp(34px, 4.8vw, 54px); }
.page-hero .bignum.is-lesson { font-size: clamp(64px, 8.6vw, 132px); }
.page-hero .bignum.is-island { font-size: clamp(64px, 8.6vw, 132px); }
.part-band-cta { text-align: center; }
.part-band-island:hover { animation-play-state: paused; transform: scale(1.05) rotate(-2deg); filter: drop-shadow(0 26px 30px rgba(10, 123, 126, .3)) brightness(1.05); }
.part-band-waves { overflow: visible; }
.sea-whale { position: absolute; bottom: 22px; left: -160px; width: 150px; height: auto; animation: sea-swim 26s linear infinite; }
.sea-spout { animation: sea-spout 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sea-swim { 0% { left: -160px; transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { left: 100%; transform: translateY(0); } }
@keyframes sea-spout { 0%, 30% { opacity: 0; transform: scaleY(.3); } 50%, 80% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; } }
.sea-fish { position: absolute; width: 44px; height: auto; animation: sea-fish 14s linear infinite; }
.sea-fish.f1 { bottom: 48px; animation-delay: -2s; }
.sea-fish.f2 { bottom: 14px; width: 34px; animation-delay: -7s; animation-duration: 11s; }
.sea-fish.f3 { bottom: 34px; width: 28px; animation-delay: -11s; animation-duration: 17s; }
@keyframes sea-fish { 0% { right: -60px; transform: translateY(0) scaleX(1); } 25% { transform: translateY(-8px) scaleX(1); } 50% { transform: translateY(0); } 75% { transform: translateY(6px); } 100% { right: 100%; transform: translateY(0) scaleX(1); } }
.num-list li.has-photo { position: relative; overflow: hidden; isolation: isolate; }
.num-list li.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo) center / cover no-repeat; opacity: .16; transition: opacity .4s, transform .6s; }
.num-list li.has-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25)); }
.num-list li.has-photo:hover::before { opacity: .3; transform: scale(1.04); }

/* アクティアイランド：1つの習い事で */
.hm-value.is-v2 { background: linear-gradient(135deg, var(--teal-ink), #13B5B8); border: 0; color: #fff; padding: 44px 48px; grid-template-columns: 1.05fr 1fr; overflow: hidden; }
.hm-v2-copy { position: relative; padding-right: 120px; }
.hm-value.is-v2 .eyebrow.is-light { color: #9FE4E5; }
.hm-value.is-v2 .eyebrow.is-light .eyebrow-line { background: #9FE4E5; }
.hm-value.is-v2 .hm-value-title { color: #fff; }
.hm-value.is-v2 .hm-v2-copy > p { color: rgba(255, 255, 255, .86); }
.hm-v2-chara { position: absolute; right: 0; bottom: -10px; width: 110px; height: auto; transform-origin: 50% 100%; animation: chara-float 3.4s ease-in-out infinite; }
.hm-value-list.is-v2 { display: grid; grid-template-columns: 1fr; gap: 10px; border: 0; overflow: visible; }
.hm-value-list.is-v2 li { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 0; align-items: center; background: #fff; color: var(--ink); border-radius: 16px; padding: 14px 18px; border: 0; transition: transform .3s; }
.hm-value-list.is-v2 li:hover { transform: translateX(6px); }
.hm-value-list.is-v2 li + li { border-left: 0; }
.hm-v2-ic { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-ink); }
.hm-value-list.is-v2 b { font-size: 18px; }
.hm-value-list.is-v2 li > span:last-child { font-size: 12.5px; color: var(--ink-2); }
.od-steps li { background: #fff; }
.od > * { min-width: 0; }
.od-win { max-width: 100%; }
/* 結果の札にマウスをのせると */
.rs-card { transition: box-shadow .3s, border-color .3s; }
.rs-card:hover { border-color: var(--teal); box-shadow: 0 26px 40px -22px rgba(10, 123, 126, .55); }
.rs-badge { transition: transform .3s; }
.rs-card:hover .rs-badge { transform: scale(1.14) rotate(-8deg); }

/* 幼児クラス：3つの力が伸びていく */
.kd3-wrap { position: relative; }
.kd3-arrow { position: absolute; left: 6%; right: 6%; top: 10px; height: 96px; width: 88%; pointer-events: none; }
.kd3-grow { position: absolute; right: 4%; top: -14px; font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--orange); }
.kd3 { align-items: start; position: relative; }
.kd3 li:nth-child(1) { margin-top: 110px; }
.kd3 li:nth-child(2) { margin-top: 60px; }
.kd3 li:nth-child(3) { margin-top: 10px; }
.kd3 li { transition: transform .3s; }
.kd3 li:hover { transform: translateY(-8px); }
/* 幼児クラス：レッスンでやっていること（イラスト） */
.kd-ic { display: block; width: 84px; height: 84px; margin: 6px 0 2px; }
.kd-menu li { position: relative; }
.kd-menu .num { position: absolute; right: 24px; top: 24px; font-size: 32px; color: var(--teal); opacity: .5; }
.kd-menu li:hover .kd-ic { animation: kd-wig .6s ease-in-out; }
@keyframes kd-wig { 25% { transform: rotate(-6deg) scale(1.06); } 75% { transform: rotate(6deg) scale(1.06); } }

/* 教室紹介：5枚目は横長 */

/* 無料体験の流れ：イラスト。3→6の矢印をやめる */
.tr-ic { width: 72px; height: 72px; margin-top: 14px; }
.tr-flow li:hover .tr-ic { animation: kd-wig .6s ease-in-out; }
@media (min-width: 961px) {
  .tr-flow li { grid-template-rows: auto auto auto 1fr; }
  .tr-flow li:nth-child(3)::after { display: none; }
  .tr-flow-no { position: absolute; right: 22px; top: 22px; }
  .tr-ic { margin-top: 0; }
}
@media (max-width: 960px) { .tr-ic { display: none; } }
/* ガチャのキャラ：写真の下の右に */
.gc-col { min-width: 0; }
.gc-col .gc-rise { justify-content: flex-end; height: 160px; margin-top: 10px; padding-right: 10px; overflow: visible; }
.gc-col .gc-rise img { width: 130px; }

/* タイピングボックスの動画：生徒の名前の札を同じ色で隠す */
.vid-wrap { position: relative; display: block; }
.vid-mask { position: absolute; left: 51%; top: 12.2%; width: 17%; height: 3.4%; border-radius: 6px; background: rgb(44, 194, 214); filter: blur(3px); pointer-events: none; }

/* フッター：左右からのぞいて引っ込み、そのあと下から6人 */
.ft { padding-bottom: 190px; }
.ft-peek { bottom: 26px; height: 170px; }
.ft-peek img { height: 150px; }
.ft-peek-l, .ft-peek-r { transition: none; }
.ft-peek-l { transform: translateX(-110%); }
.ft-peek-r { transform: translateX(110%); transition-delay: 0s; }
.ft.is-peek .ft-peek-l { animation: ft-peek-l 7s cubic-bezier(.3, .9, .3, 1) forwards; transform: translateX(-110%); }
.ft.is-peek .ft-peek-r { animation: ft-peek-r 7s cubic-bezier(.3, .9, .3, 1) .25s forwards; transform: translateX(110%); }
@keyframes ft-peek-l { 0% { transform: translateX(-110%); } 16% { transform: translateX(0); } 70% { transform: translateX(0); } 86%, 100% { transform: translateX(-110%); } }
@keyframes ft-peek-r { 0% { transform: translateX(110%); } 16% { transform: translateX(0); } 70% { transform: translateX(0); } 86%, 100% { transform: translateX(110%); } }
.ft-peek-m { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; }
.ft-peek-m img { height: 128px; transform: translateY(125%); animation: none; }
.ft.is-peek .ft-peek-m img { animation: ft-rise 7s cubic-bezier(.2, .9, .3, 1.1) forwards; animation-delay: calc(5.6s + var(--d) * .18s); }
@keyframes ft-rise { 0% { transform: translateY(125%); } 12% { transform: translateY(0); } 20% { transform: translateY(-10px); } 28% { transform: translateY(0); } 72% { transform: translateY(0); } 86%, 100% { transform: translateY(125%); } }
@media (max-width: 640px) {
  .ft { padding-bottom: 120px; }
  .ft-peek { bottom: 16px; height: 100px; }
  .ft-peek img { height: 72px; }
  .ft-peek-l { left: 6px; } .ft-peek-r { right: 6px; }
  .ft-peek-m { gap: 4px; }
  .ft-peek-m img { height: 54px; }
  /* 住所と受付時間は中央に。電話ボタンは控えめに */
  .ft-brand { text-align: center; }
  .ft-brand img { margin-inline: auto; }
  .ft-addr { display: block; }
  .ft-addr span { display: block; }
  .ft-brand .ft-tel { display: inline-flex; width: auto; margin-inline: auto; padding: 8px 18px 8px 8px; gap: 10px; background: #fff; color: var(--teal-ink); border: 1.5px solid var(--teal); box-shadow: none; }
  .ft-brand .ft-tel:hover { background: var(--teal-soft); transform: none; }
  .ft-tel-ic { width: 36px; height: 36px; background: var(--teal-soft); }
  .ft-tel-txt small { color: var(--ink-2); }
  .ft-tel-txt b { font-size: 20px; }
  .ft-brand .ft-tel-hours { text-align: center; }
}

/* 記事の一覧：ページ送り */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.pager a:hover { border-color: var(--teal); color: var(--teal-ink); }
.pager [aria-current="page"] { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.pager .is-off { opacity: .35; pointer-events: none; }
.blog-more { display: none; }
@media (max-width: 640px) {
  .blog-grid > li.is-sp-hidden { display: none; }
  .blog-more { display: flex; justify-content: center; margin-top: 20px; }
  .page-hero-aside.is-right-sp { justify-self: end; }
}

/* ---------- スマホ ---------- */
@media (max-width: 640px) {
  /* トップのファーストビュー：少し小さく */
  .hero-title { font-size: clamp(44px, 12.4vw, 56px); }
  .hero-title .ht-sp { font-size: calc((100vw - 62px) / 6.4); }
  .hs-main { font-size: calc((100vw - 62px) / 16.5); }
  /* 見出しを1行に */
  .sec-title.is-sp-one { font-size: 24px; white-space: nowrap; }
  .step-title.is-sp-one { font-size: 30px; white-space: nowrap; }
  .ty-chara { display: none; }
  .page-hero-aside.ty-hero-aside img { width: 84px; }
  /* どっちが速い？：見出しは大きく、キャラは札の左に */
  .speed .sec-head-row .sec-chara { display: none; }
  .speed .sec-title { font-size: 27px; }
  .race { position: relative; }
  .race-chara { position: absolute; left: 0; bottom: -6px; width: 84px; height: auto; transform-origin: 50% 100%; animation: chara-float 3.4s ease-in-out infinite; }
  /* タイピング英語の特徴 */
  .ty-feature-list b { font-size: 18px; white-space: nowrap; }
  .ty-feature-list li > span:last-child { display: none; }
  /* 3つの特長・できるようになること・目に見える教室：番号と題を横に */
  .pt-list li, .can-list li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
  .pt-list .num, .can-list .num { font-size: 40px; }
  .can-list .mono { grid-column: 2; margin-top: 0; }
  .pt-list h3, .can-list h3 { grid-column: 2; margin: 0; }
  .num-list h3.pt-h3 { font-size: 17.5px; }
  .can-list h3 { font-size: 18px; }
  .pt-list p, .can-list p { grid-column: 1 / -1; margin-top: 12px; font-size: 14.5px; }
  .mv-body { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .mv-body .num { font-size: 34px; }
  .mv-body h3 { grid-column: 2; margin: 0; font-size: 18px; }
  .mv-body .mv-orig, .mv-body p { grid-column: 1 / -1; }
  .mv-body p { margin-top: 10px; }
  /* 結果 */
  .rs-what { font-size: 17px; }
  .rs-who { font-size: 13px; }
  .rs-legend { margin-top: 0; padding-right: 92px; }
  /* 先生の言葉：キャラは右下に */
  .tch-future { position: relative; flex-direction: column; align-items: stretch; padding-bottom: 80px; }
  .tch-future img { position: absolute; right: 12px; bottom: -14px; width: 96px; }
  /* よくあるご質問：キャラは右上に小さく */
  .faq .sec-head { position: relative; }
  .faq-chara { position: absolute; right: 0; top: -6px; width: 66px; margin: 0; }
  .faq .sec-title, .faq .sec-head .eyebrow { padding-right: 80px; }
  .faq .sec-lead { padding-right: 0; }
  /* メッセージ */
  .ltr blockquote { font-size: 14px; }
  /* トップの幼児クラス：キャラは出さない */
  .crs-kids2.is-top { display: none; }
  /* アクティアイランドの帯の下に余白 */
  .part-band { padding-bottom: 120px; }
  /* 目に見える教室の下とCTAの上 */
  #encourage { padding-bottom: 40px; }
  .cta-body { padding-top: 44px; }
  /* 英検：結果の見出しと流れ */
  .results .sec-head-row .sec-title { font-size: 27px; }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow::before { left: 24px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; }
  .flow li { display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: start; padding-bottom: 26px; }
  .flow .flow-dot { width: 50px; height: 50px; font-size: 16px; margin: 0; grid-row: 1 / span 2; }
  .flow h3 { grid-column: 2; margin: 12px 0 4px; font-size: 17px; }
  .flow p { grid-column: 2; font-size: 14px; }
  /* 幼児クラス：3つの力はふつうに並べる */
  .kd3 li { margin-top: 0 !important; }
  .kd3-arrow, .kd3-grow { display: none; }
  .kd-ic { width: 64px; height: 64px; }
}

@media (max-width: 640px) {
  .page-hero-aside.is-sm-sp img { width: 120px; }
  .page-hero .hero-cta.is-hide-sp { display: none; }
  .access-open { text-align: center; }
  .access-open .text-link { margin-inline: auto; }
  /* 番号の右に題（教室紹介・無料体験の num-list）*/
  .num-list.is-row-sp li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
  .num-list.is-row-sp .num { font-size: 40px; }
  .num-list.is-row-sp h3 { grid-column: 2; margin: 0; font-size: 18px; }
  .num-list.is-row-sp li > *:not(.num):not(h3) { grid-column: 1 / -1; }
  .num-list.is-row-sp li > p { margin-top: 12px; }
  .tr-walk { height: 150px; overflow: visible; }
}

/* ヒーローのキャラはゆっくり小さく浮く（ページ全体が動いて見えないように） */
.page-hero-aside > img { animation-name: chara-float-s; animation-duration: 4.2s; }
@keyframes chara-float-s { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* 2026-10-08 直し */
@media (max-width: 640px) {
  .faq .sec-head { top: auto; }
  .speed-grid > * { min-width: 0; }
  .ty-feature-list b { white-space: normal; font-size: 17px; }
  .ty-feature-list li:nth-child(2) b { font-size: 15px; white-space: nowrap; }
  .ty-feature-list li > b + span { display: none; }
  .hero-title { font-size: 40px; }
  .hero-title .ht-sp { font-size: calc((100vw - 62px) / 7); }
  .hs-main { font-size: calc((100vw - 62px) / 18); }
  .step-title.is-sp-one { font-size: 26px; }
  .step-copy { min-width: 0; }
  .num-list h3.pt-h3 { font-size: 16px; }
  .pt-list .num { font-size: 36px; }
  .hm-value.is-v2 { grid-template-columns: 1fr; padding: 28px 22px; }
  .hm-v2-copy { padding-right: 0; padding-bottom: 0; }
  .hm-v2-chara { position: static; display: block; width: 96px; margin: 12px 0 0 auto; }
  .hm-value-list.is-v2 b { font-size: 16px; }
}
@media (max-width: 640px) { .step-title.is-sp-one { font-size: 24px; } }
/* 2026-10-08 フッターのキャラ・トップのスマホ */
.race-chara { display: none; }
@media (min-width: 641px) {
  /* 右のキャラは完全に引っ込む（右に100px寄せている分も動かす） */
  .ft-peek-r { transform: translateX(calc(100% + 110px)); }
  .ft.is-peek .ft-peek-r { transform: translateX(calc(100% + 110px)); }
  @keyframes ft-peek-r { 0% { transform: translateX(calc(100% + 110px)); } 16% { transform: translateX(0); } 70% { transform: translateX(0); } 86%, 100% { transform: translateX(calc(100% + 110px)); } }
  /* 左右と下は同時に出て、同時に引っ込む。下の6人はもう少し上に */
  .ft.is-peek .ft-peek-r { animation-delay: 0s; }
  .ft-peek-m { bottom: 36px; }
  .ft.is-peek .ft-peek-m img { animation-delay: calc(var(--d) * .12s); }
  @keyframes ft-rise { 0% { transform: translateY(140%); } 12% { transform: translateY(0); } 18% { transform: translateY(-10px); } 24% { transform: translateY(0); } 70% { transform: translateY(0); } 86%, 100% { transform: translateY(140%); } }
}
@media (max-width: 640px) {
  /* スマホではフッターのキャラを出さない */
  .ft-peek { display: none; }
  .ft { padding-bottom: 40px; }
  /* トップのファーストビューは中央そろえ */
  .hero-title, .hero-sub.is-sp { text-align: center; }
  .hero-title .ht-sp { margin-inline: auto; }
  .hs-main { text-align: center; }
  /* どっちが速い？の見出しを大きく。キャラは札の左に */
  .speed .sec-title { font-size: 30px; }
  .race-chara { display: block; }
}

/* パソコン：クラス図の題は1行で大きく */
@media (min-width: 961px) {
  .cls-head { max-width: none; }
  .cls-title { font-size: clamp(30px, 3.2vw, 42px); white-space: nowrap; }
  .cls-title br { display: none; }
}
/* クジラは頭が左なので、右から左へ泳ぐ */
.sea-whale { left: auto; right: -160px; animation-name: sea-swim2; }
@keyframes sea-swim2 { 0% { right: -160px; transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { right: 100%; transform: translateY(0); } }
/* フッターの下の6人は、引っ込んだら完全に見えなくなるまで下げる */
@media (min-width: 641px) {
  .ft-peek-m img { transform: translateY(230%); }
  @keyframes ft-rise { 0% { transform: translateY(230%); } 12% { transform: translateY(0); } 18% { transform: translateY(-10px); } 24% { transform: translateY(0); } 70% { transform: translateY(0); } 86%, 100% { transform: translateY(230%); } }
}
/* フッターの下から出る6人：間をあける */
@media (min-width: 641px) { .ft-peek-m { gap: 54px; } }
@media (min-width: 641px) {
  /* 左右の4人の間に、6人を均等に。重ならない大きさに */
  .ft-peek-m { left: 340px; right: 420px; transform: none; justify-content: space-between; gap: 0; }
  .ft-peek-m img { height: 104px; }
}
@media (min-width: 641px) and (max-width: 1100px) { .ft-peek-m img { height: 80px; } }
/* 入会までの流れのキャラは JS が位置を動かすので、浮く動きは付けない（付けると位置がずれる） */
.jn-chara { animation: none !important; }
@media (min-width: 641px) {
  /* フッター：左右の4人を少し小さくして、まん中の6人は画面の幅に合わせて大きさを決める（重ならないように） */
  .ft-peek-l img, .ft-peek-r img { height: 120px; }
  .ft-peek-m { left: 270px; right: 440px; }
  .ft-peek-m img { height: min(90px, calc((100vw - 710px) / 6.3)); }
}
/* 無料体験の流れの下：ジャンプしても上が見切れないよう、上に余白をとる */
.tr-walk { overflow: visible; height: 180px; padding-top: 60px; box-sizing: content-box; }

/* スマホのファーストビュー：題の箱を幅いっぱいにして、中の文字を中央に */
@media (max-width: 640px) {
  .hero-title { width: 100%; }
  .hero-title .ht-l1 { text-align: center; }
  .hero-title .ht-sp { margin-inline: auto; }
  .hero-sub.is-sp, .hs-main { text-align: center; }
}

/* スマホのトップ：3つの特長の見出しを1行で大きく。02の題が2段で収まるように */
@media (max-width: 640px) {
  #point .sec-title.is-sp-one { font-size: 28px; }
  .pt-list li { column-gap: 10px; }
  .pt-list .num { font-size: 34px; }
  .num-list h3.pt-h3 { font-size: 14.5px; letter-spacing: -.02em; line-height: 1.45; }
  .num-list h3.pt-h3 .nowrap { white-space: nowrap; }
}

@media (max-width: 640px) {
  .pt-list li { column-gap: 8px; padding-left: 20px; padding-right: 16px; }
  .pt-list .num { font-size: 30px; }
  .num-list h3.pt-h3 { font-size: 13px; letter-spacing: -.03em; }
}

/* 2026-10-08 スマホの見直し（つづき） */
.page-title.is-typed .pt-line { white-space: nowrap; }
.gc-col .gc-rise img { width: 96px; }
@media (max-width: 640px) {
  #results .sec-title.is-sp-one { font-size: 28px; }
  /* アクティアイランド：1つの習い事で…のキャラは右上に小さく */
  .hm-v2-copy { position: relative; }
  .hm-v2-copy .hm-value-title { padding-right: 84px; }
  .hm-v2-chara { position: absolute; right: -4px; top: -6px; width: 74px; margin: 0; }
  /* レッスン内容の帯：見出しの下に余白。クジラと魚は水の中に */
  .part-band h2 { margin-bottom: 18px; }
  .part-band-waves i { opacity: .34; }
  .sea-whale { width: 100px; bottom: 2px; }
  .sea-fish.f1 { bottom: 26px; width: 34px; }
  .sea-fish.f2 { bottom: 6px; }
  .sea-fish.f3 { bottom: 14px; }
  /* レッスン日程：題を大きく、キャラは右に小さく */
  .page-title.is-big-sp { font-size: 40px; }
  .page-hero-aside.is-sm img { width: 96px; }
  /* ガチャの2人を小さく */
  .gc-rise img, .gc-col .gc-rise img { width: 72px; }
  .gc-col .gc-rise { height: 110px; }
  /* イベントの題：カーソルが次の行に落ちないように */
  .page-title.-long { font-size: clamp(24px, 7.6vw, 40px); }
}
@media (max-width: 640px) { .hm-value.is-v2 .hm-value-title { font-size: 21px; padding-right: 84px; } }
/* 海のクジラと魚は、波の下（水の中）に */
.part-band-waves i { z-index: 1; }
.sea-whale, .sea-fish { z-index: 0; }
.part-band-waves i:nth-child(2) { opacity: .26; }
@media (max-width: 640px) {
  .hm-value.is-v2 .hm-value-title { font-size: 20px; padding-right: 70px; }
  .hm-v2-chara { width: 64px; top: -2px; }
  .sea-whale { bottom: 8px; }
}

/* イベント：クリスマスの箇条書きは1行ずつ、「ブログで読む」はボタンで中央に */
.ev-list li { font-size: 13px; white-space: nowrap; letter-spacing: -.01em; }
.ev-more.btn { margin-top: 18px; display: inline-flex; }
.ev-report:hover .ev-more { text-decoration: none; }
.ev-report .ev-body { text-align: center; }
.ev-report .ev-body .ev-list, .ev-report .ev-body h3, .ev-report .ev-body p, .ev-report .ev-body .mono { text-align: left; }
@media (max-width: 640px) {
  .ev-list li { font-size: 12px; padding-left: 15px; }
  .ev-body h3.is-one-sp { font-size: 18px; white-space: nowrap; }
}
.ev-more.btn.btn-primary { color: #fff; }

/* アクティタイピング：見出しの横のキャラをやめて、「1度で3つ。」の箱の右下に */
@media (min-width: 961px) { .ty-head { grid-template-columns: 1.05fr 1fr; } }
.ty-note.is-big { position: relative; padding-right: 160px; }
.ty-note.is-big p { margin: 0; }
.ty-note-chara { position: absolute; right: 22px; bottom: -8px; width: 130px; height: auto; transform-origin: 50% 100%; animation: chara-float 3.4s ease-in-out infinite; }
@media (max-width: 960px) { .ty-note.is-big { padding-right: 120px; } .ty-note-chara { width: 96px; right: 12px; } }
@media (max-width: 640px) { .ty-note.is-big { padding-right: 18px; padding-bottom: 70px; } .ty-note-chara { width: 76px; right: 10px; bottom: -6px; } }
/* 新しい動画には名前の札が無いので、隠しは出さない */
.vid-mask { display: none; }
/* スマホのファーストビュー：「打って、覚える。」（幅はそのまま）。黄色の線は「タイピングと英語を同時に習得」に */
@media (max-width: 640px) {
  .hero-title .ht-dot { display: inline; }
  .hero-title .ht-l1 { font-size: 35px; letter-spacing: -.01em; }
  .ht-sp { background: none; animation: none; }
  .hs-main { display: inline-block; width: fit-content; margin-inline: auto; padding: 0 4px; background: linear-gradient(transparent 70%, #FFF35A 70%) no-repeat 0 0 / 0% 100%; animation: ht-mark .7s 2.4s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hero-sub.is-sp { text-align: center; }
}

/* 単語数：キャラは、文字が出てから「文字の後ろから上に」現れる */
.vocab-chara[data-pop-after]:not(.is-pop) { opacity: 0; }
.vocab-chara[data-pop-after].is-pop { animation: chara-rise-up .8s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes chara-rise-up { 0% { opacity: 0; transform: translateY(44px) rotate(4deg); clip-path: inset(100% 0 0 0); } 40% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(4deg); clip-path: inset(-20% 0 0 0); } }
#vocab .sec-head:has(.is-pop) .vocab-head-chara { animation: none; opacity: 0; }
#vocab .sec-head:has(.tw-done) .vocab-head-chara { animation: chara-rise-up2 .8s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes chara-rise-up2 { 0% { opacity: 0; transform: translateY(44px) rotate(6deg); clip-path: inset(100% 0 0 0); } 40% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(6deg); clip-path: inset(-20% 0 0 0); } }
@media (max-width: 640px) {
  .vocab-msg { position: relative; }
  .vocab-msg p.vocab-msg-lead { position: relative; z-index: 1; }
  .vocab-msg > .vocab-chara { position: absolute; right: 0; top: -78px; width: 84px; margin: 0; z-index: 0; }
  .vocab-msg { padding-top: 10px; }
}
/* 「最大 約1.7倍！」は上の「いま」の棒と同じオレンジ */
.vh-shout b { background: var(--orange); }
/* スマホの「どっちが速い？」：見出し → 説明 → 動画 → 17秒 → 特徴 → ボタン */
@media (max-width: 640px) {
  .speed-grid { display: flex; flex-direction: column; gap: 0; }
  .speed-grid > .speed-main { display: contents; }
  .speed-main > .eyebrow { order: 1; }
  .speed-main > .sec-title { order: 2; }
  .speed-main > .sec-lead { order: 3; }
  .speed-grid > .speed-video { order: 4; margin: 28px auto 0; }
  .speed-main > .race { order: 5; margin-top: 36px; }
  .speed-main > .speed-note { order: 6; }
  .speed-grid > .ty-feature { order: 7; margin-top: 32px; }
  .speed-main > .speed-more { order: 8; margin-top: 28px; }
}
/* 英検合格コース：3級→4級→5級と順に色がついて消える。ボタンはアプリの画像の下 */
.crs-grades li:last-child { border-color: var(--line); background: var(--paper); }
.crs-panel:not([hidden]) .crs-grades li { animation: grade-light 1.2s ease-in-out both; }
.crs-panel:not([hidden]) .crs-grades li:nth-child(2) { animation-delay: .6s; }
.crs-panel:not([hidden]) .crs-grades li:nth-child(3) { animation-delay: 1.2s; }
@keyframes grade-light { 0%, 100% { border-color: var(--line); background: var(--paper); transform: none; } 35%, 65% { border-color: var(--teal); background: var(--teal-soft); transform: translateY(-4px); } }
.crs-phone-stage.has-more { padding-bottom: 28px; }
.crs-phone-stage.has-more .crs-more { position: relative; z-index: 4; margin-top: 22px; }
.crs-phone-stage.has-more .crs-penta { bottom: 100px; }
@media (max-width: 640px) { .crs-phone-stage.has-more .crs-penta { bottom: 96px; } }
@media (max-width: 640px) {
  .speed-grid { align-items: stretch; }
  .speed-main > .race { width: 100%; }
  /* 「覚える単語は2倍。」のキャラは、文の真上から出てくる */
  .vocab-msg { padding-top: 84px; }
  .vocab-msg > .vocab-chara { top: 4px; right: 6px; width: 86px; }
}

/* レッスン内容：レッスンでやっていること（旧HPの写真と文章） */
.lw-list { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.lw-item { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; transition: transform .3s, box-shadow .3s; }
.lw-item:nth-child(even) { grid-template-columns: 1fr 340px; }
.lw-item:nth-child(even) .lw-photo { order: 2; }
.lw-item:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10, 123, 126, .12); }
.lw-photo { margin: 0; border-radius: 16px; overflow: hidden; background: var(--line-2); aspect-ratio: 3 / 4; }
.lw-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lw-item:hover .lw-photo img { transform: scale(1.04); }
.lw-body .num { display: inline-block; font-family: var(--latin); font-weight: 800; font-size: 36px; line-height: 1; color: var(--teal); margin-right: 12px; vertical-align: middle; }
.lw-body .mono { color: var(--teal-ink); letter-spacing: .14em; font-size: 11px; vertical-align: middle; }
.lw-body h3 { margin: 10px 0 12px; font-size: 24px; font-weight: 900; line-height: 1.4; }
.lw-body p { color: var(--ink-2); font-size: 15px; line-height: 1.9; }
.lw-body p + p { margin-top: 10px; }
.lw-catch { margin-top: 14px !important; color: var(--teal-ink) !important; font-weight: 900 !important; font-size: 16px !important; }
.lw-body .step-list { margin-top: 10px; }
@media (max-width: 960px) {
  .lw-item, .lw-item:nth-child(even) { grid-template-columns: 260px 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .lw-list { gap: 18px; }
  .lw-item, .lw-item:nth-child(even) { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .lw-item:nth-child(even) .lw-photo { order: 0; }
  .lw-photo { aspect-ratio: 4 / 3; }
  .lw-photo img { object-position: 50% 30%; }
  .lw-body h3 { font-size: 20px; }
  .lw-body .num { font-size: 30px; }
}

/* よくあるご質問：答えが複数の段落 */
.faq-list .faq-a { padding: 0 34px 26px 66px; color: var(--ink-2); font-size: 15px; }
.faq-list .faq-a p + p { margin-top: 10px; }
.faq-list .faq-a b { color: var(--ink); font-weight: 900; }
@media (max-width: 640px) { .faq-list .faq-a { padding: 0 20px 22px 44px; font-size: 14px; } }
/* フッターのキャラはやめる */
.ft-peek { display: none !important; }
.ft { padding-bottom: 40px !important; }

/* レッスン内容の帯：見出しの下に余白。パソコンは海を深く */
.part-band h2 { margin-bottom: 18px; }
@media (min-width: 641px) {
  .part-band { padding-bottom: 170px; }
  .part-band-waves { height: 150px; }
  .part-band-waves i { background-size: 240px 150px; }
  .part-band-waves i:nth-child(2) { background-size: 180px 100%; }
  .sea-whale { bottom: 14px; width: 150px; }
  .sea-fish.f1 { bottom: 70px; }
  .sea-fish.f2 { bottom: 20px; }
  .sea-fish.f3 { bottom: 44px; }
}

/* 記事の題：1文字ずつ出さず、ふつうに表示。長くても折り返して見切れない */
.page-title.is-article { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.4; word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) { .page-title.is-article { font-size: 24px; } }
/* 2026-10-08 スマホ：宝箱の文は折り返さない。3つの特長は先生の言葉と同じカードに */
@media (max-width: 640px) {
  .od-chest p { padding-right: 0; }
  .od-chest b { white-space: nowrap; font-size: 15px; line-height: 1.4; }
  .pt-list li { display: block; position: relative; padding: 30px 22px 26px; }
  .pt-list .num { position: absolute; top: 14px; right: 18px; margin: 0; font-size: 56px; line-height: 1; color: var(--teal-soft); }
  .num-list h3.pt-h3 { position: relative; margin: 0 56px 0 0; font-size: 20px; line-height: 1.45; letter-spacing: 0; }
  .num-list h3.pt-h3 .nowrap { white-space: normal; }
  .pt-list p { margin-top: 14px; font-size: 15px; }
}

.pt-mono { display: none; }
@media (max-width: 640px) {
  .pt-list li { padding: 26px 22px 26px; }
  .pt-mono { display: block; position: relative; color: var(--teal-ink); letter-spacing: .14em; font-size: 11px; }
  .num-list h3.pt-h3 { margin: 10px 0 0; font-size: 21px; }
  .num-list h3.pt-h3 br { display: none; }
}

/* 記事ページの題：上の余白を詰める */
.page-hero.is-article .page-hero-body { padding-top: 48px; padding-bottom: 48px; }
@media (max-width: 640px) { .page-hero.is-article .page-hero-body { padding-top: 32px; padding-bottom: 32px; } }

/* ==========================================================================
   英検合格コース: ヒーローの「パソコン・タブレット・スマホ」+ 3Dペンタ君(v105)
   教室のレッスンと同じパソコンでも使えることを伝える。枠はCSSでかき、中に本物の画面を入れる
========================================================================== */
.page-hero-body.-ek { grid-template-columns: 1fr 1fr; align-items: center; }
.page-hero-aside.ek-hero-aside { width: 100%; max-width: 600px; height: auto; justify-self: end; align-self: center; }
.ek-devices { position: relative; width: 100%; aspect-ratio: 600 / 440; }
.page-hero-aside.ek-hero-aside .ek-devices img { width: 100%; height: auto; }
/* ノートパソコン */
.ek-laptop { position: absolute; left: 2%; top: 2%; width: 76%; filter: drop-shadow(0 26px 30px rgba(18, 20, 22, .22)); }
.ek-laptop-screen { background: var(--ink); border-radius: 14px 14px 3px 3px; padding: 2.4% 2.4% 3%; }
.page-hero-aside.ek-hero-aside .ek-laptop-screen img { display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 3px; }
.ek-laptop-base { position: relative; height: 0; padding-bottom: 3.2%; margin: 0 -7%; background: linear-gradient(180deg, #E6E9ED 0%, #B9BFC6 100%); border-radius: 2px 2px 14px 14px; }
.ek-laptop-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 16%; height: 40%; transform: translateX(-50%); background: #A6ADB5; border-radius: 0 0 8px 8px; }
/* タブレット */
.ek-tablet { position: absolute; right: 0; top: 20%; width: 29%; background: var(--ink); border-radius: 16px; padding: 2.2%; box-shadow: 0 24px 40px -18px rgba(18, 20, 22, .4); transform: rotate(3deg); }
.page-hero-aside.ek-hero-aside .ek-tablet img { display: block; aspect-ratio: 820 / 1180; object-fit: cover; object-position: top; border-radius: 10px; }
/* スマホ */
.ek-hero-aside .ek-devices .ek-phone.-mini { position: absolute; left: auto; top: auto; right: 23%; bottom: -2%; width: 17%; padding: 4px; border-radius: 18px; transform: rotate(-4deg); z-index: 2; }
.page-hero-aside.ek-hero-aside .ek-devices .ek-phone.-mini img { height: 100%; border-radius: 14px; }
/* 3Dのペンタ君 */
.page-hero-aside.ek-hero-aside .ek-devices .ek-penta { position: absolute; left: 3%; bottom: -8%; width: 19%; height: auto; z-index: 3; filter: drop-shadow(0 12px 14px rgba(18, 20, 22, .22)); }
.ek-devices-cap { margin-top: 30px; text-align: center; font-size: 15px; font-weight: 900; color: var(--ink); }
.ek-devices-cap .mono { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .14em; color: var(--teal-ink); }

/* 「毎日、ひらきたくなる。」: きせかえ + アイテムの2台 */
.ek-app-visual.ek-keep-visual { display: block; height: 560px; padding: 0; }
.ek-keep-visual .ek-phone { position: absolute; }
.ek-keep-visual .ek-phone.-back { left: calc(50% - 235px); top: 0; width: 215px; transform: rotate(-7deg); }
.ek-keep-visual .ek-phone.-front { left: calc(50% - 30px); top: 64px; width: 235px; transform: rotate(4deg); z-index: 2; }

@media (max-width: 960px) {
  .page-hero-body.-ek { grid-template-columns: 1fr; }
  .page-hero-aside.ek-hero-aside { width: 100%; max-width: 540px; height: auto; margin: 18px auto 8px; justify-self: center; }
}
@media (max-width: 640px) {
  .ek-laptop-screen { border-radius: 9px 9px 2px 2px; }
  .ek-tablet { border-radius: 10px; }
  .ek-hero-aside .ek-devices .ek-phone.-mini { padding: 3px; border-radius: 11px; }
  .page-hero-aside.ek-hero-aside .ek-devices .ek-phone.-mini img { border-radius: 8px; }
  .ek-devices-cap { margin-top: 22px; font-size: 14px; }
  .ek-app-visual.ek-keep-visual { height: 430px; }
  .ek-keep-visual .ek-phone.-back { left: calc(50% - 168px); width: 158px; }
  .ek-keep-visual .ek-phone.-front { left: calc(50% - 22px); top: 50px; width: 172px; }
}

/* 2026-10-08 海の魚はもっと下（水の中）を泳ぐ */
@media (min-width: 641px) { .sea-fish.f1 { bottom: 34px; } .sea-fish.f3 { bottom: 22px; } .sea-fish.f2 { bottom: 10px; } }
@media (max-width: 640px) { .sea-fish.f1 { bottom: 10px; } .sea-fish.f3 { bottom: 6px; } .sea-fish.f2 { bottom: 2px; } }
/* スマホ：アクティアイランドの「教室では」をティール、「おうちでは」を白に。キャラも入れ替え */
@media (max-width: 640px) {
  .hm-card { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
  .hm-card .mono { color: #9FE4E5; }
  .hm-card li::before { background: #fff; }
  .hm-card.is-home { background: var(--paper); border-color: var(--line); color: var(--ink); }
  .hm-card.is-home .mono { color: var(--teal-ink); }
  .hm-card.is-home li::before { background: var(--teal); }
  .hm-card img.pc-only { display: none; }
  .hm-card img.sp-only { display: block; }
}
@media (min-width: 641px) { .hm-card img.sp-only { display: none; } }

/* フッターのプライバシーポリシーのリンク */
.ft-copy .ft-privacy { margin-left: 18px; font-size: 11px; color: inherit; opacity: .75; text-decoration: underline; text-underline-offset: 3px; }
.ft-copy .ft-privacy:hover { opacity: 1; }
/* プライバシーポリシーのページ */
.pp { max-width: 820px; margin: 0 auto; padding: 56px 0 72px; }
.pp h2 { font-size: 20px; font-weight: 900; margin: 36px 0 12px; padding-left: 14px; border-left: 4px solid var(--teal); }
.pp p, .pp li { font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.pp ul { padding-left: 1.4em; margin: 8px 0; }
.pp li { list-style: disc; margin: 4px 0; }
.pp .pp-date { font-size: 13px; color: var(--ink-3, var(--ink-2)); margin-top: 24px; }
@media (max-width: 640px) { .pp { padding: 32px 0 48px; } .pp h2 { font-size: 18px; } .pp p, .pp li { font-size: 14px; } }

/* レッスン内容：やる気の仕組みの注記が上の説明文に重ならないように */
.mv-note { margin: 8px 0 32px; }

/* 2026-10-08 パソコンも「3つの特長」をスマホと同じカードに（POINT 0n の札・右上に薄い大きな番号・大きな題） */
@media (min-width: 641px) {
  .pt-list > li { display: block; position: relative; padding: 30px 28px 30px; overflow: hidden; }
  .pt-list .num { position: absolute; top: 16px; right: 22px; margin: 0; font-size: 76px; line-height: 1; color: var(--teal-soft); }
  .pt-mono { display: block; position: relative; color: var(--teal-ink); letter-spacing: .14em; font-size: 11.5px; }
  .num-list h3.pt-h3 { position: relative; margin: 14px 0 0; font-size: 22px; line-height: 1.5; letter-spacing: 0; }
  .num-list h3.pt-h3 .nowrap { white-space: normal; }
  .pt-list p { position: relative; margin-top: 14px; font-size: 15px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .num-list h3.pt-h3 { font-size: 19px; }
  .num-list h3.pt-h3 br { display: none; }
}

/* 2026-10-08 先生がすすめる理由：スマホの下のキャラを小さく、箱の中に */
@media (max-width: 640px) {
  .tch-future { padding-bottom: 66px; }
  .tch-future img { width: 66px; right: 16px; bottom: -6px; }
}
/* 画像・動画を保存しにくくする（長押しのメニュー・ドラッグを出さない） */
img, video { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
/* 動きを減らす設定でも、単語数のキャラは見えるように */
@media (prefers-reduced-motion: reduce) { .vocab-chara[data-pop-after] { opacity: 1 !important; } }