/* =========================================================
   Krimo ランディングページ スタイル
   テーマ: NHK「おとうさんといっしょ」風
     - クリーム白基調 + パステルマルチカラー
     - 丸ゴシック (M PLUS Rounded 1c)
     - 大きい角丸、ふんわり影、ポップなアクセント
   ========================================================= */

/* ─── カラーパレット (CSS Variables) ─────────────────────── */
:root {
  --bg:            #FFF6E8;          /* クリーム白 (基本背景) */
  --bg-alt:        #FFFFFF;          /* 白 */
  --bg-cream:      #FFFAEC;          /* やや淡いクリーム */
  --ink:           #4A3A2A;          /* メインテキスト (ぬくもりブラウン) */
  --ink-soft:      #7B6856;          /* 補足テキスト */
  --ink-light:     #B8A48F;          /* 弱いテキスト */
  --c-orange:      #FF9C2A;          /* メインカラー (温かいオレンジ) */
  --c-orange-d:    #ED7E0E;
  --c-yellow:      #FFD43B;
  --c-pink:        #FF8FA3;
  --c-blue:        #4DABF7;
  --c-green:       #94D82D;
  --c-purple:      #C0A8F0;
  --shadow-card:   0 6px 0 rgba(74, 58, 42, 0.08), 0 12px 24px rgba(74, 58, 42, 0.07);
  --shadow-press:  0 3px 0 rgba(74, 58, 42, 0.15);
  --radius-lg:     28px;
  --radius-md:     20px;
  --radius-sm:     14px;
  --radius-pill:   999px;
}

/* ─── Reset / 共通 ─────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'M PLUS Rounded 1c', "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* 共通コンテナ */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* セクション見出し */
.section-title {
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 900;
  text-align: center;
  margin: 0 0 40px;
  letter-spacing: 0.02em;
  color: var(--ink);
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 80px; height: 8px;
  background: var(--c-orange);
  border-radius: 4px;
  margin: 16px auto 0;
}
.section-title--left { text-align: left; }
.section-title--left::after { margin: 16px 0 0; }

/* 子供向けポップな飾り (装飾用クラス) */
.deco-cloud {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  filter: blur(0.5px);
  opacity: .8;
  pointer-events: none;
}

/* ─── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 16px;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.btn--primary {
  background: var(--c-orange);
  color: #fff;
  box-shadow: var(--shadow-press);
}
.btn--primary:hover {
  background: var(--c-orange-d);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(74,58,42,0.18);
}
.btn--primary:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0); }

.btn--ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink-light);
  box-shadow: var(--shadow-press);
}
.btn--ghost:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
  transform: translateY(-2px);
}

.btn--lg    { padding: 18px 36px; font-size: 18px; }
.btn--small { padding: 8px 18px; font-size: 14px; }
.btn--block { width: 100%; }

/* ─── Logo / Nav ───────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 246, 232, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(74, 58, 42, 0.06);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav__logo { display: inline-flex; align-items: center; gap: 4px; }

.logo-mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--c-orange);
  color: #fff;
  font-weight: 900;
  border-radius: 14px;
  font-size: 22px;
  box-shadow: 0 3px 0 var(--c-orange-d);
  transform: rotate(-4deg);
}
/* K マークの常時アニメ: ふわっと弾む (固定の rotate を上書きするため特異性を上げる) */
.logo-mark.logo-mark--anim {
  transform: rotate(-4deg);            /* 初期姿勢 */
  transform-origin: bottom center;
  animation: logo-bounce 2.4s cubic-bezier(.4,1.4,.6,1) infinite;
}
@keyframes logo-bounce {
  0%, 100% { transform: rotate(-4deg) translateY(0)    scale(1); }
  35%      { transform: rotate(4deg)  translateY(-6px) scale(1.06); }
  50%      { transform: rotate(-2deg) translateY(-2px) scale(1.02); }
  65%      { transform: rotate(2deg)  translateY(-4px) scale(1.04); }
}

.logo-name {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
/* "rimo" の各文字を順に揺らす */
.logo-name--anim { display: inline-flex; }
.logo-name--anim span {
  display: inline-block;
  animation: logo-letter 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s + 0.6s);
}
@keyframes logo-letter {
  0%, 80%, 100% { transform: translateY(0); color: var(--ink); }
  85%, 90%      { transform: translateY(-3px); color: var(--c-orange); }
}

.nav__links { display: flex; gap: 28px; }
.nav__links a {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  transition: color .15s;
}
.nav__links a:hover { color: var(--c-orange); }

.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__sublink {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 700;
  border-bottom: 2px dotted var(--ink-light);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.nav__sublink:hover { color: var(--c-orange); border-color: var(--c-orange); }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__sublink { display: none; }
}

/* ─── Hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 96px 0 120px;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(255, 212, 59, .35) 0%, transparent 40%),
    radial-gradient(ellipse at 88% 18%, rgba(255, 143, 163, .35) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(77, 171, 247, .25) 0%, transparent 50%),
    var(--bg);
  background-size: 200% 200%;
  animation: hero-bg-shift 18s ease-in-out infinite;
  overflow: hidden;
}
@keyframes hero-bg-shift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

/* 雲の装飾: 横にゆっくり流れる */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, .85);
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  top: 14%; left: -10%;
  width: 120px; height: 60px;
  box-shadow: 60px -12px 0 -8px rgba(255,255,255,.85), -50px 4px 0 -10px rgba(255,255,255,.85);
  animation: cloud-drift-r 28s linear infinite;
}
.hero::after {
  top: 22%; right: -8%;
  width: 100px; height: 50px;
  box-shadow: 50px 8px 0 -10px rgba(255,255,255,.85);
  animation: cloud-drift-l 32s linear infinite;
}
@keyframes cloud-drift-r {
  0%   { transform: translateX(0); }
  100% { transform: translateX(120vw); }
}
@keyframes cloud-drift-l {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-120vw); }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
  position: relative;
  z-index: 1;
}
.hero__title {
  font-size: clamp(34px, 6.4vw, 64px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.02em;
  margin: 0 0 24px;
  color: var(--ink);
}
.hero__title em {
  display: inline-block;
  color: var(--c-orange);
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--c-yellow) 60%);
  padding: 0 4px;
  animation: title-bounce 3.6s ease-in-out infinite;
  transform-origin: center bottom;
}
.hero__title em:nth-of-type(2) { animation-delay: 1.2s; }
@keyframes title-bounce {
  0%, 70%, 100% { transform: translateY(0) rotate(0); }
  78%           { transform: translateY(-6px) rotate(-2deg); }
  86%           { transform: translateY(0) rotate(2deg); }
  92%           { transform: translateY(-3px) rotate(0); }
}
.hero__sub {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 32px;
  font-weight: 500;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.hero__note { color: var(--ink-soft); font-size: 14px; margin: 0; font-weight: 700; }

.hero__badge {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.85);
  border: 2px dashed var(--c-orange);
  border-radius: var(--radius-pill);
  color: var(--c-orange-d);
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 20px;
  transform: rotate(-1deg);
}

@media (max-width: 768px) {
  .hero { padding: 64px 0 80px; }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .hero__ctas { justify-content: center; }
}

/* ─── Lottie / Fallback ビジュアル ───────────────────── */
.lottie-frame {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 360px;
  min-height: 240px;       /* 万一 width が 0 になっても潰れない */
  margin: 0 auto;
  border-radius: var(--radius-lg);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.lottie-frame--hero {
  max-width: 460px;
  background: linear-gradient(135deg, #FFFAEC 0%, #FFE9C7 100%);
  box-shadow: 0 12px 0 rgba(74,58,42,0.08), 0 24px 48px rgba(74,58,42,0.10);
}
.lottie-frame--teacher {
  max-width: 480px;
  aspect-ratio: 16/9;
  min-height: 200px;
}

/* Lottie 読込成功時のみフォールバック非表示 */
.lottie-frame.has-lottie .visual-fallback { display: none; }

.visual-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  z-index: 1;
}

/* Hero ビジュアル: 再生ディスク + 拍動リング */
.visual-fallback--player {
  position: absolute; inset: 0;
}
/* 中央の回転ディスク (色相も動かして虹色気分) */
.visual-fallback--player .vf-disc {
  position: absolute;
  top: 50%; left: 50%;
  margin: -100px 0 0 -100px;
  width: 200px; height: 200px;
  background: conic-gradient(from 0deg,
    var(--c-orange), var(--c-yellow), var(--c-green),
    var(--c-blue), var(--c-purple), var(--c-pink), var(--c-orange));
  border-radius: 50%;
  box-shadow: 0 16px 48px rgba(255, 156, 42, .35);
  animation: vf-disc-rot 18s linear infinite;
}
/* ディスク中央の白い円 (穴) */
.visual-fallback--player .vf-disc::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  background: #fff;
  border-radius: 50%;
}
.visual-fallback--player .vf-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: var(--c-orange);
  z-index: 3;
  animation: vf-play-tap 2.4s ease-in-out infinite;
}
@keyframes vf-play-tap {
  0%, 70%, 100% { transform: translate(-50%, -50%) scale(1); }
  80%           { transform: translate(-50%, -50%) scale(1.25); }
}
.visual-fallback--player .vf-ring {
  position: absolute;
  top: 50%; left: 50%;
  margin: -110px 0 0 -110px;
  width: 220px; height: 220px;
  border: 3px solid var(--c-orange);
  border-radius: 50%;
  animation: vf-ring-pulse 3s ease-out infinite;
}
.visual-fallback--player .vf-ring--2 { animation-delay: 1.5s; border-color: var(--c-pink); }
@keyframes vf-disc-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes vf-ring-pulse {
  0%   { opacity: .8; transform: scale(0.7); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* 機能カード: 大ボタン+ルビ */
.visual-fallback--bigbutton {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.visual-fallback--bigbutton .vf-bigbtn {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  box-shadow: 0 6px 0 var(--c-orange-d);
  animation: vf-button-press 2.4s ease-in-out infinite;
}
@keyframes vf-button-press {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 0 var(--c-orange-d); }
  20%      { transform: scale(1.1); }
  35%      { transform: translateY(3px) scale(0.95); box-shadow: 0 2px 0 var(--c-orange-d); }
  50%      { transform: scale(1.05); box-shadow: 0 6px 0 var(--c-orange-d); }
}
.visual-fallback--bigbutton .vf-ruby {
  margin-top: 12px;
  font-size: 13px; color: var(--c-orange-d); font-weight: 800;
  animation: vf-ruby-blink 2.4s ease-in-out infinite;
}
@keyframes vf-ruby-blink {
  0%, 30%, 100% { opacity: 0.5; }
  40%, 70%      { opacity: 1; transform: translateY(-2px); }
}
@keyframes vf-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* 機能カード: ループ・スロー・ミラー */
.visual-fallback--loop {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
}
.visual-fallback--loop .vf-bar {
  position: relative; width: 220px; height: 10px;
  background: #FFE9C7; border-radius: 5px;
}
/* 区間の脈動 (A-B 範囲) */
.visual-fallback--loop .vf-range {
  position: absolute; left: 30%; width: 40%; height: 100%;
  background: var(--c-yellow); border-radius: 5px;
  animation: vf-range-glow 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,212,59,.6);
}
@keyframes vf-range-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,212,59,.6); }
  50%      { box-shadow: 0 0 0 6px rgba(255,212,59,0); }
}
.visual-fallback--loop .vf-cursor {
  position: absolute; top: -5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-orange);
  box-shadow: 0 2px 0 var(--c-orange-d);
  animation: vf-cursor-loop 3s ease-in-out infinite;
}
/* 左右反転を表現する記号: 左右に回転 */
.visual-fallback--loop .vf-mirror {
  font-size: 40px; color: var(--c-blue);
  font-weight: 900;
  animation: vf-mirror-flip 2.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes vf-cursor-loop {
  0%, 100% { left: 30%; }
  50%      { left: 64%; }
}
@keyframes vf-mirror-flip {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(-1); }
}

/* 機能カード: 音声操作 (上に吹き出し / 下にマイク + 音波) */
.visual-fallback--voice {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 16px 12px;
}

/* 吹き出し: 3 種類を順次表示 (位置は上部固定) */
.visual-fallback--voice .vf-bubbles {
  position: relative;
  width: 100%;
  height: 36px;
  display: flex; justify-content: center;
}
.visual-fallback--voice .vf-bubble {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 18px;
  font-size: 12px; font-weight: 800;
  white-space: nowrap;
  color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.12);
  opacity: 0;
  animation: vf-bubble-cycle 6s ease-in-out infinite;
}
.visual-fallback--voice .vf-bubble::after {
  /* 吹き出しの三角しっぽ (下向き) */
  content: "";
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: inherit;
}
.visual-fallback--voice .vf-bubble--1 {
  background: var(--c-pink);
  border-top-color: var(--c-pink);
  animation-delay: 0s;
}
.visual-fallback--voice .vf-bubble--2 {
  background: var(--c-orange);
  border-top-color: var(--c-orange);
  animation-delay: 2s;
}
.visual-fallback--voice .vf-bubble--3 {
  background: var(--c-blue);
  border-top-color: var(--c-blue);
  animation-delay: 4s;
}
@keyframes vf-bubble-cycle {
  0%, 4%    { opacity: 0; transform: translate(-50%, 8px) scale(.92); }
  10%, 28%  { opacity: 1; transform: translate(-50%, 0)   scale(1); }
  34%, 100% { opacity: 0; transform: translate(-50%, -4px) scale(.96); }
}

/* マイクと音波の領域 (下半分) */
.visual-fallback--voice .vf-mic-area {
  position: relative;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.visual-fallback--voice .vf-mic {
  font-size: 48px;
  z-index: 2;
  animation: vf-pulse 1.6s ease-in-out infinite;
}
.visual-fallback--voice .vf-wave {
  position: absolute;
  top: 50%; left: 50%;
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  border: 3px solid var(--c-pink);
  border-radius: 50%;
  opacity: 0;
  animation: vf-mic-wave 2.4s ease-out infinite;
}
.visual-fallback--voice .vf-wave--2 { animation-delay: 0.8s; border-color: var(--c-orange); }
.visual-fallback--voice .vf-wave--3 { animation-delay: 1.6s; border-color: var(--c-yellow); }
@keyframes vf-mic-wave {
  0%   { opacity: .9; transform: scale(0.5); }
  100% { opacity: 0;  transform: scale(2.6); }
}

/* 機能カード: ストップウォッチ (時計盤 + 針) */
.visual-fallback--timer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
}
.vf-clock-face {
  position: relative;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--c-blue);
  box-shadow: 0 6px 0 rgba(74,58,42,.1);
  /* 時計盤がほんのり呼吸する程度 (時計自体の回転は不自然なので NG) */
  animation: vf-clock-breathe 4s ease-in-out infinite;
}
@keyframes vf-clock-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
/* 12/3/6/9 の目盛 */
.vf-tick {
  position: absolute;
  background: var(--ink);
  border-radius: 2px;
}
.vf-tick--12 { top: 6px;    left: 50%; transform: translateX(-50%); width: 4px; height: 10px; }
.vf-tick--6  { bottom: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 10px; }
.vf-tick--3  { top: 50%; right: 6px;   transform: translateY(-50%); width: 10px; height: 4px; }
.vf-tick--9  { top: 50%; left: 6px;    transform: translateY(-50%); width: 10px; height: 4px; }
/* 針 */
.vf-clock-hand {
  position: absolute;
  bottom: 50%; left: 50%;
  border-radius: 3px;
  transform-origin: center bottom;
}
.vf-clock-hand--minute {
  width: 5px; height: 40px;
  margin-left: -2.5px;
  background: var(--ink);
  animation: vf-spin 30s linear infinite;
}
.vf-clock-hand--second {
  width: 3px; height: 50px;
  margin-left: -1.5px;
  background: var(--c-orange);
  animation: vf-spin 6s linear infinite;
  z-index: 2;
}
.vf-clock-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  background: var(--c-orange);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 0 0 2px #fff;
}
@keyframes vf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.visual-fallback--timer .vf-trophy {
  font-size: 40px;
  animation: vf-pulse 2s ease-in-out infinite;
}

/* 機能カード: 子供モード */
.visual-fallback--safe {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.visual-fallback--safe .vf-shield {
  font-size: 96px;
  color: var(--c-green);
  animation: vf-shield-sway 3s ease-in-out infinite;
  display: inline-block;
  transform-origin: center bottom;
}
@keyframes vf-shield-sway {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%      { transform: rotate(4deg) scale(1.05); }
}
.visual-fallback--safe .vf-lock {
  position: absolute; bottom: 24%; right: 26%;
  font-size: 32px;
  animation: vf-lock-jiggle 1.4s ease-in-out infinite;
}
@keyframes vf-lock-jiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-15deg); }
  75%      { transform: rotate(12deg); }
}

/* 先生モード: QR フロー */
.visual-fallback--qrflow {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 24px;
}
.visual-fallback--qrflow .vf-qr {
  width: 110px; height: 110px;
  background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
  border: 3px solid var(--ink); border-radius: 14px;
  animation: vf-qr-tilt 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes vf-qr-tilt {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(3deg) scale(1.04); }
}
.visual-fallback--qrflow .vf-arrow {
  font-size: 36px; color: var(--c-orange); font-weight: 900;
  animation: vf-slide-x 1.6s ease-in-out infinite;
}
.visual-fallback--qrflow .vf-tablet {
  font-size: 88px;
  animation: vf-tablet-pop 3s ease-in-out infinite;
  animation-delay: 0.6s;
}
@keyframes vf-slide-x {
  0%, 100% { transform: translateX(-6px); opacity: .4; }
  50%      { transform: translateX(8px); opacity: 1; }
}
@keyframes vf-tablet-pop {
  0%, 60%, 100% { transform: scale(1); }
  70%, 80%      { transform: scale(1.12) rotate(-3deg); }
}

/* 安心: 鍵付き盾 */
.visual-fallback--shield {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.visual-fallback--shield .vf-shield-big {
  font-size: 160px;
  color: var(--c-blue);
  animation: vf-shield-protect 3.6s ease-in-out infinite;
  display: inline-block;
  transform-origin: center center;
  filter: drop-shadow(0 4px 0 rgba(74,58,42,.1));
}
@keyframes vf-shield-protect {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  40%      { transform: scale(1.08) rotate(2deg); }
  60%      { transform: scale(1.04) rotate(-1deg); }
}
.visual-fallback--shield .vf-keylock {
  position: absolute; bottom: 24%; right: 28%;
  font-size: 56px;
  animation: vf-key-spin 4s ease-in-out infinite;
}
@keyframes vf-key-spin {
  0%, 60%, 100% { transform: rotate(0); }
  70%           { transform: rotate(-20deg) scale(1.1); }
  85%           { transform: rotate(20deg) scale(1.1); }
}

/* ─── ずっと無料バナー ────────────────────────────────── */
.free-banner {
  padding: 32px 0;
  background: linear-gradient(135deg, var(--c-yellow), var(--c-orange));
  color: #fff;
}
.free-banner__inner {
  display: flex; align-items: center; gap: 24px;
  justify-content: center;
  text-align: left;
}
.free-banner__star {
  font-size: 56px;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.15));
}
.free-banner h2 {
  margin: 0 0 4px;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(74,58,42,.15);
}
.free-banner p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.95);
}
@media (max-width: 540px) {
  .free-banner__inner { flex-direction: column; text-align: center; gap: 12px; }
}

/* ─── 教室・企業向け 控えめ案内 ───────────────────────── */
.biz-hint {
  padding: 64px 0;
  background: var(--bg-cream);
  border-top: 4px dashed rgba(74, 58, 42, .12);
}
.biz-hint__inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.biz-hint__lead {
  font-size: 18px;
  font-weight: 900;
  color: var(--c-orange-d);
  margin: 0 0 8px;
}
.biz-hint__body {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.biz-hint__links {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
}

/* ─── Scenes (1つに絞った大きいレイアウト) ───────────── */
.scenes__single {
  max-width: 780px; margin-inline: auto;
}
.scene--big {
  padding: 48px 36px;
  font-size: 16px;
}
.scene--big h3 {
  font-size: 22px;
  margin: 16px 0 16px;
}
.scene--big p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
}

/* CTA 内の「ずっと無料」テキスト */
.cta-final__free {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: 0.04em;
}

/* ─── Pain ───────────────────────────────────────────── */
.pain {
  padding: 96px 0;
  background: #FFE9C7;
  position: relative;
  overflow: hidden;
}
/* 背景に音符が浮遊 */
.pain::before, .pain::after {
  content: "♪";
  position: absolute;
  font-size: 80px;
  color: rgba(255,156,42,.15);
  pointer-events: none;
  font-weight: 900;
}
.pain::before {
  top: 12%; left: 6%;
  animation: float-up 7s ease-in-out infinite;
}
.pain::after {
  bottom: 10%; right: 8%;
  font-size: 100px;
  animation: float-up 9s ease-in-out infinite reverse;
}
@keyframes float-up {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-20px) rotate(6deg); }
}
.pain__list {
  list-style: none; padding: 0; margin: 0;
  max-width: 760px; margin-inline: auto;
}
.pain__item {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 28px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-size: 16px;
  font-weight: 500;
  transform: rotate(-0.5deg);
}
.pain__item:nth-child(even) { transform: rotate(0.5deg); }
.pain__item p { margin: 0; }
.pain__icon { font-size: 38px; flex-shrink: 0; }

/* ─── Features ───────────────────────────────────────── */
.features {
  padding: 112px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
/* 背景の星 */
.features::before, .features::after {
  content: "★";
  position: absolute;
  font-size: 70px;
  color: rgba(255,212,59,.25);
  pointer-events: none;
}
.features::before { top: 8%; left: 4%;  animation: float-up 8s ease-in-out infinite; }
.features::after  { top: 14%; right: 5%; font-size: 56px; color: rgba(255,143,163,.3); animation: float-up 6s ease-in-out infinite reverse; }
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}
.feature {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease;
  position: relative;
}
.feature:hover { transform: translateY(-6px); }
.feature .lottie-frame {
  aspect-ratio: 1;
  max-width: 200px;
  min-height: 180px;
  margin-bottom: 20px;
  background: var(--bg-cream);
  box-shadow: none;
}
.feature h3 {
  font-size: 20px;
  margin: 0 0 12px;
  font-weight: 900;
  color: var(--ink);
}
.feature p {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 0;
}
/* 機能ごとのアクセント色 (左上に丸い印) */
.feature::before {
  content: "";
  position: absolute;
  top: -10px; left: 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-orange);
}
.feature:nth-child(2)::before { background: var(--c-blue); }
.feature:nth-child(3)::before { background: var(--c-pink); }
.feature:nth-child(4)::before { background: var(--c-yellow); }
.feature:nth-child(5)::before { background: var(--c-green); }

/* ─── 対象別 ────────────────────────────────────────── */
.audience {
  padding: 112px 0;
  background: #FFFAEC;
}
.audience__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.audience__card {
  display: block;
  padding: 36px 28px;
  background: #fff;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s;
  border: 3px solid transparent;
}
.audience__card:hover {
  transform: translateY(-6px);
  border-color: var(--c-orange);
}
.audience__icon {
  font-size: 64px;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 0 rgba(74, 58, 42, .1));
}
.audience__card h3 {
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 900;
}
.audience__card p {
  color: var(--ink-soft);
  margin: 0 0 20px;
  font-size: 14px;
}
.audience__cta {
  display: inline-block;
  padding: 8px 16px;
  background: var(--c-yellow);
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  border-radius: var(--radius-pill);
}

/* ─── 先生モード ────────────────────────────────────── */
.teacher {
  padding: 112px 0;
  background: #FFF7C2;
  position: relative;
}
.teacher::before {
  content: "★";
  position: absolute; top: 32px; left: 8%;
  font-size: 48px; color: var(--c-orange);
  opacity: .4;
}
.teacher::after {
  content: "♪";
  position: absolute; bottom: 32px; right: 10%;
  font-size: 56px; color: var(--c-pink);
  opacity: .4;
}

.teacher__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 56px;
}
.teacher__bullets {
  list-style: none; padding: 0; margin: 0 0 28px;
}
.teacher__bullets li {
  padding: 14px 0;
  border-bottom: 2px dashed rgba(74, 58, 42, .15);
  font-size: 16px;
  font-weight: 500;
}
.teacher__bullets li::before {
  content: "🌟 ";
  margin-right: 6px;
}
.teacher__bullets strong { color: var(--c-orange-d); font-weight: 900; }
@media (max-width: 768px) {
  .teacher__grid { grid-template-columns: 1fr; }
}

/* ─── プラン ────────────────────────────────────────── */
.plans {
  padding: 112px 0;
  background: var(--bg);
}
.plans__sub {
  text-align: center;
  color: var(--ink-soft);
  margin: 0 0 48px;
  font-size: 16px;
}
.plans__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.plans__grid--2 {
  max-width: 720px; margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.plans__grid--single {
  max-width: 480px; margin-inline: auto;
  grid-template-columns: 1fr;
}
.plan-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  border: 3px solid transparent;
  transition: transform .2s;
}
.plan-card:hover { transform: translateY(-4px); }
.plan-card--featured {
  border-color: var(--c-orange);
  background: linear-gradient(180deg, #FFF7C2 0%, #fff 100%);
  transform: scale(1.04);
}
.plan-card--featured:hover { transform: scale(1.06) translateY(-4px); }
.plan-card__badge {
  position: absolute;
  top: -16px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  background: var(--c-pink);
  color: #fff;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 rgba(0,0,0,.1);
}
.plan-card__name {
  font-size: 24px; font-weight: 900;
  margin: 0 0 12px;
  color: var(--c-orange);
}
.plan-card__price { margin: 0 0 4px; }
.price-num  { font-size: 40px; font-weight: 900; color: var(--ink); }
.price-unit { font-size: 14px; color: var(--ink-soft); margin-left: 4px; }
.plan-card__target {
  color: var(--c-blue); font-size: 13px;
  font-weight: 800; margin: 0 0 24px;
}
.plan-card__features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.plan-card__features li {
  padding: 10px 0;
  border-bottom: 2px dashed rgba(74, 58, 42, .1);
  font-size: 14px;
  color: var(--ink);
}
.plan-card__features li::before {
  content: "✓ ";
  color: var(--c-green);
  font-weight: 900;
  font-size: 16px;
}
.plans__note {
  text-align: center; color: var(--ink-light);
  font-size: 13px; margin-top: 32px;
}

/* ─── 利用シーン ────────────────────────────────────── */
.scenes {
  padding: 112px 0;
  background: #E5F7DA;
}
.scenes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.scene {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  box-shadow: var(--shadow-card);
}
.scene__no {
  position: absolute; top: -20px; left: 28px;
  width: 48px; height: 48px;
  background: var(--c-green);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 22px;
  box-shadow: 0 3px 0 rgba(0,0,0,.1);
  transform: rotate(-6deg);
}
.scene h3 { margin: 16px 0 12px; font-size: 20px; color: var(--ink); }
.scene p  { color: var(--ink-soft); font-size: 14px; margin: 0; }

/* ─── 安全 ───────────────────────────────────────────── */
.safety {
  padding: 112px 0;
  background: #DCEEFA;
}
.safety__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 56px;
}
.safety__bullets { list-style: none; padding: 0; margin: 0; }
.safety__bullets li {
  padding: 14px 0;
  border-bottom: 2px dashed rgba(74, 58, 42, .15);
  font-size: 15px;
  font-weight: 500;
}
.safety__bullets li::before {
  content: "🔒 ";
  margin-right: 6px;
}
.safety__bullets strong { color: var(--c-blue); font-weight: 900; }
@media (max-width: 768px) {
  .safety__grid { grid-template-columns: 1fr; }
}

/* ─── FAQ ────────────────────────────────────────────── */
.faq {
  padding: 112px 0;
  background: var(--bg);
}
.faq__list { max-width: 760px; margin-inline: auto; }
.faq__list details {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  border: 2px solid transparent;
  transition: border-color .15s;
}
.faq__list details[open] { border-color: var(--c-orange); }
.faq__list summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 16px;
  list-style: none;
  position: relative;
  padding-right: 32px;
  color: var(--ink);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "+";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: var(--c-orange);
  font-weight: 900;
  transition: transform .2s;
}
.faq__list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq__list details p {
  color: var(--ink-soft);
  margin: 14px 0 0;
  font-size: 15px;
}

/* ─── 最終 CTA ────────────────────────────────────────── */
.cta-final {
  padding: 112px 0;
  background:
    linear-gradient(135deg, var(--c-yellow) 0%, var(--c-orange) 50%, var(--c-pink) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "★";
  position: absolute; top: 8%; right: 10%;
  font-size: 80px; color: rgba(255,255,255,.4);
}
.cta-final::after {
  content: "♪";
  position: absolute; bottom: 10%; left: 8%;
  font-size: 100px; color: rgba(255,255,255,.4);
}

.cta-final__inner {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  position: relative; z-index: 1;
}
.cta-final h2 {
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 900;
  margin: 0 0 40px;
  text-shadow: 0 2px 0 rgba(74,58,42,.1);
}
.cta-final__buttons {
  display: flex; flex-wrap: wrap;
  gap: 14px; justify-content: center;
  margin-bottom: 56px;
}
.cta-final .btn--ghost {
  background: rgba(255,255,255,.95);
}
.cta-final__form label {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}
.form-row { display: flex; gap: 8px; }
.form-row input {
  flex: 1;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  border: 0;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
}
.form-row input::placeholder { color: var(--ink-light); }
.form-row input:focus { outline: 3px solid var(--ink); outline-offset: 1px; }
.form-row .btn { background: var(--ink); color: #fff; }
.form-row .btn:hover { background: var(--c-orange-d); }
.form-note {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  margin: 12px 0 0;
}

/* ─── Footer ────────────────────────────────────────── */
.footer {
  padding: 56px 0;
  background: #FFF6E8;
  border-top: 4px dashed rgba(74, 58, 42, .15);
}
.footer__grid {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 24px;
}
.footer__brand {
  display: flex; align-items: center; gap: 8px;
}
.footer__brand p {
  margin: 0 0 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
}
.footer__links {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-size: 14px; color: var(--ink-soft);
}
.footer__links a { font-weight: 700; }
.footer__links a:hover { color: var(--c-orange); }
.footer__social {
  display: flex; gap: 16px;
  font-size: 24px;
  color: var(--ink-soft);
}
.footer__social a:hover { color: var(--c-orange); }

/* ─── スクロールインアニメ ────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── アクセシビリティ ─────────────────────────────────── */
/* OS の "動きを減らす" 設定でも装飾アニメは止めない (Krimo はモーションが体験の一部)。
   スクロール挙動だけ瞬間遷移にする。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}