:root {
  --s-section: 72px;
  --s-group: 32px;
  --s-item: 16px;
  --s-tight: 8px;
  --gutter: 20px;
  --canvas: 480px;
  --cta-h: 60px;
  --yellow: #f2c230;
  --yellow-deep: #d9a714;
  --ink: #1d2a4a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--page-bg, #111);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-weight: 500;
  line-height: 1.8;
  font-size: 16px;
  word-break: auto-phrase;
  line-break: strict;
}
main, .footer { max-width: var(--canvas); margin: 0 auto; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cta-h);
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd955, var(--yellow));
  box-shadow: 0 4px 0 var(--yellow-deep), 0 10px 24px rgba(0, 0, 0, .22);
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-deep), 0 4px 12px rgba(0, 0, 0, .22); }
.cta:focus-visible, .clip-play:focus-visible, .skip:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }

.clip { position: relative; overflow: hidden; background: #000; border-radius: 12px; }
.clip.wide { aspect-ratio: 16 / 9; }
.clip.tall { aspect-ratio: 9 / 16; }
.clip video, .clip iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.clip.playing video { object-fit: contain; }
.clip-play {
  position: absolute;
  left: 50%;
  bottom: var(--s-item);
  transform: translateX(-50%);
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #111;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.yt-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.6;
}

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: var(--s-tight) var(--gutter) calc(var(--s-tight) + env(safe-area-inset-bottom));
  max-width: var(--canvas);
  margin: 0 auto;
  transform: translateY(120%);
  transition: transform .25s ease;
  pointer-events: none;
}
.sticky.on { transform: none; pointer-events: auto; }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .sticky { transition: none; }
}

.footer {
  padding: var(--s-group) var(--gutter) calc(var(--s-group) + var(--cta-h) + var(--s-item));
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* 講師5名の重なり（現行LPで調整済みの位置を共通化） */
.group { position: relative; width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 1; isolation: isolate; }
.group figure { position: absolute; bottom: 0; margin: 0; transform-origin: 50% 100%; }
.group img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .22)); }
.group figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.group .yoshiken { width: 85%; left: 8%; z-index: 3; --fx: 0; --fy: 72px; --d: 160ms; }
.group .note { width: 37%; right: -1%; bottom: 1%; z-index: 4; --fx: 72px; --fy: 16px; --d: 80ms; }
.group .minami { width: 36%; left: -1%; bottom: 1%; z-index: 2; --fx: -72px; --fy: 16px; --d: 240ms; }
.group .inaka_male { width: 26%; left: 18%; bottom: 34%; z-index: 1; --fx: -48px; --fy: -64px; --d: 0ms; }
.group .inaka_female { width: 30%; right: 13%; bottom: 28%; z-index: 1; --fx: 48px; --fy: -64px; --d: 320ms; }
.group.gather figure { animation: gather 900ms cubic-bezier(.16, 1, .3, 1) var(--d) both; }
@keyframes gather {
  from { transform: translate(var(--fx), var(--fy)) rotate(-6deg); opacity: 0; }
  30% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .group.gather figure { animation: none; } }