/* ================================================================== */
/* kaname_pop.css — Kaname「ポップ化」層                            */
/*   ▼ 配色 v3（2026-06-25・ポップ大改造／AD・Opus）                    */
/*   背景: オーナーが「和・生成り×墨×藍・明朝・落ち着き」を却下。      */
/*         鮮やかな多色・極太丸見出し・楽しい・若い・SNS的を明示選択。  */
/*   ★最重要: 過去に“派手ポップ”が「子供っぽい・安っぽい」で却下され   */
/*     彩度を落とした経緯あり。今回は再び派手に振るが「安っぽくない・   */
/*     上質で洗練されたポップ」に＝色数を絞り調和させ・余白とタイポ階層 */
/*     を効かせ・形と影を意図的に。クリップアート/絵文字過多/ネオン禁止。*/
/*   方針:                                                            */
/*     ・地は白〜オフホワイト。鮮やかコア3色＋差し色を“絞って”使う。   */
/*       青(信頼/CTA) #2B6CF6 ／ 黄 #FFC53D ／ コーラル #FF7A59、      */
/*       補助に ミント #2BD9C4・ピンク #FF6FB5。                       */
/*     ・見出しは極太・丸ゴシック（M PLUS Rounded 1c 800）で大きく。   */
/*     ・大きな角丸・チャンキーなカード・ぽってりピル・色付き影。      */
/*     ・ステッカー風タグ/吹き出し/マーカー下線を要所に上品な範囲で。  */
/*     ・楽しいマイクロアニメ（弾む/ふわっと/数字が跳ねる）。          */
/*   すべて .kt-pop スコープの中だけ。lively層の上に重ねる別レイヤー。   */
/*   Michi/他ルートには無干渉。prefers-reduced-motion で全停止（末尾）。 */
/* ================================================================== */
.kt-pop {
  /* -------------------------------------------------------------- */
  /* 鮮やかコア＝信頼の青（主役・CTA・構造・見出しの軸）。           */
  --ktp-indigo:    #2B6CF6;   /* ビビッドブルー（主役・CTA・見出し） */
  --ktp-indigo-d:  #1B52CC;   /* 深い青（hover・押下） */
  --ktp-indigo-bg: #E7EFFF;   /* 青のごく薄い面 */

  /* 差し色1＝コーラル（温かい・楽しい。バッジ・点・ハイライト）。 */
  --ktp-coral:     #FF7A59;   /* コーラル（差し色・元気） */
  --ktp-coral-d:   #D8421F;   /* 濃いコーラル（テキスト・AA確保） */
  --ktp-coral-bg:  #FFE9E2;   /* コーラルのごく薄い面 */
  --ktp-peach:     #FF9B7A;   /* やわらかいコーラル（第二の温かさ） */
  --ktp-peach-bg:  #FFF0EA;

  /* 差し色2＝ミント（整う・成功・新鮮さ）。 */
  --ktp-mint:      #18C7AE;   /* ビビッドミント（整う・成功） */
  --ktp-mint-d:    #0E927F;   /* 深いミント（テキスト・AA確保） */
  --ktp-mint-bg:   #DEFAF3;

  /* 差し色3＝サニーイエロー（灯・お祝い・スター）。文字には濃色を使う。 */
  --ktp-sun:       #FFC53D;   /* サニーイエロー（灯・お祝い・点） */
  --ktp-sun-d:     #B97F00;   /* 濃い山吹（黄の上の文字・AA確保） */
  --ktp-sun-bg:    #FFF4D6;

  /* 差し色4＝ピンク（楽しい・SNS的。少量で効かせる）。 */
  --ktp-pink:      #FF6FB5;   /* ポップピンク */
  --ktp-pink-d:    #C72E80;   /* 濃いピンク（テキスト・AA確保） */
  --ktp-pink-bg:   #FFE6F2;

  /* 文字＝濃紺グレー（黒すぎず親しみ・可読性AA）。 */
  --ktp-ink:       #1E2433;   /* 文字 */
  --ktp-ink-soft:  #5B6478;   /* やわらかい文字 */

  /* 弾むイージング（楽しい・上質な範囲のバウンス） */
  --ktp-bounce:    cubic-bezier(.34, 1.56, .64, 1);
  --ktp-bounce-s:  cubic-bezier(.5, 1.4, .55, 1);
  --ktp-ease:      cubic-bezier(.22, .61, .36, 1);

  /* 明るいクリーンな地（2026-07-03 配色案2＝kaname.css と同じ微ニュートラルへ統一。
     ここは後読みのため、旧青み値のままだと基盤のニュートラル化を上書きしてしまう）。 */
  --kt-bg:        #FCFCFA;
  --kt-bg-soft:   #F7F8FA;

  /* 親しみの丸ゴシックを土台フォントへ（見出し）。 */
  --kt-display: 'M PLUS Rounded 1c', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --kt-serif:   'M PLUS Rounded 1c', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
}

/* ================================================================== */
/* 配色をポップに上書き（藍の固さを和らげ・親しみ色を主役に）          */
/*   既存の .kt-* / .ktl-* を .kt-pop スコープ内でのみ温める。         */
/* ================================================================== */
.kt-pop {
  --kt-ink:       var(--ktp-ink);
  --kt-ink-soft:  var(--ktp-ink-soft);
}
/* キッカー・見出しラベルはテラコッタ（--kt-kicker）へ役割分離
   （2026-07-03オーナー決裁「配色案1・最小修正」＝CTA/タブ/wayfindの青は不変、青の多用のみ解消）。
   ※ .kt-pop 内の .kt-brand は直後の規則で「青地・白字のロゴバッジ」化される＝ロゴ相当のため
     ここでは色を上書きしない（--kt-info への変更は非pop文脈の素のテキスト表記＝kaname.cssのみに適用）。 */
.kt-pop .kt-result-kicker,
.kt-pop .kt-rsec-label,
.kt-pop .kt-block-label,
.kt-pop .kt-step-label { color: var(--kt-kicker); }

/* ブランドをチャンキーなピル（青地・白字のロゴバッジ＝ロゴ相当・不変）に。 */
.kt-pop .kt-brand {
  display: inline-block;
  background: linear-gradient(135deg, var(--ktp-indigo), #4F8BFF);
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 7px 20px 8px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(43,108,246,.28);
}
/* .kt-brand は中央寄せ（親が text-align:center）。pill 化のため inline-block。 */
.kt-pop p.kt-brand { text-align: center; }

/* 見出しを極太・大きく（ポップの第一印象）。日本語は語の途中で折らない。 */
.kt-pop .kt-hero {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ktp-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media (max-width: 380px) { .kt-pop .kt-hero { font-size: 33px; } }
/* リード文も少し太く・読みやすく。 */
.kt-pop .kt-lead { color: var(--ktp-ink-soft); line-height: 1.85; }

/* キッカーをステッカー風の親しみバッジに（少し回転＝SNS的・上質に小さく）。 */
.kt-pop .kt-card-kicker,
.kt-pop.kt-lively .kt-card-kicker {
  display: inline-block;
  background: var(--ktp-sun);
  color: #5A3D00;
  border-radius: 999px;
  letter-spacing: .08em;
  font-weight: 800;
  padding: 6px 14px;
  box-shadow: 0 4px 12px rgba(255,197,61,.40);
  transform: rotate(-2deg);
}

/* カードを少し効いた縁＋色付き影でチャンキーに。 */
.kt-pop .kt-card {
  border: 2px solid var(--kt-line);
  box-shadow: 0 12px 30px rgba(43,108,246,.10);
}
.kt-pop .kt-card--accent {
  border-color: #BBD2FF;
  background: var(--ktp-indigo-bg);
}

/* 本文の強調を、青のマーカー風ハイライト下線に（上質なポップの肝）。 */
.kt-pop .kt-card-body strong,
.kt-pop .kt-lead strong {
  color: var(--ktp-ink);
  font-weight: 800;
  background: linear-gradient(transparent 62%, rgba(255,197,61,.55) 0);
  padding: 0 1px;
}

/* ================================================================== */
/* 角丸を大きく・形を丸く優しく（カード／ボタン／入力／図解枠）。      */
/* ================================================================== */
.kt-pop .kt-card { border-radius: 26px; }
.kt-pop .kt-rsec-stepcard { border-radius: 28px; }
.kt-pop .kt-kit-item,
.kt-pop .kt-script { border-radius: 22px; }
.kt-pop .kt-input { border-radius: 16px; }
.kt-pop .kt-rsec-evidence,
.kt-pop .kt-done { border-radius: 999px; }
.kt-pop .ktl-pillar,
.kt-pop .ktl-figure,
.kt-pop .ktl-points,
.kt-pop .ktl-fignote { border-radius: 24px; }
.kt-pop .ktl-lesson-row,
.kt-pop .ktl-tag { border-radius: 16px; }

/* ボタン：丸くぷにっと。押すと気持ちいい手応え。 */
.kt-pop .kt-btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .2s var(--ktp-bounce-s), box-shadow .25s var(--ktp-ease), background .25s var(--ktp-ease);
}
/* 主役 CTA は「信頼の藍」に（お金=安心の土台を主役へ）。コーラルは差し色に降格。 */
/*   温かさは、藍にごく薄いテラコッタを忍ばせたグラデで残す（冷たくしない）。 */
.kt-pop .kt-btn--primary,
.kt-pop.kt-lively .kt-btn--primary {
  background: linear-gradient(135deg, var(--ktp-indigo), var(--ktp-indigo-d));
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(50,75,112,.26);
}
.kt-pop .kt-btn--primary:hover { background: linear-gradient(135deg, var(--ktp-indigo-d), var(--ktp-indigo)); }
/* ghost（控えめCTA）に温かいコーラルを少量効かせる（親しみの差し色）。 */
.kt-pop .kt-btn--ghost {
  color: var(--ktp-coral-d);
  border: 1.5px solid var(--ktp-coral);
  background: #FFFFFF;
}
.kt-pop .kt-btn:active { transform: scale(.95); }

/* lively の藍ボタン pulse は、土台色の藍の静かな呼吸に（落ち着いた灯）。 */
.kt-pop.kt-lively .kt-btn--primary::after,
.kt-pop .ktl .kt-btn--primary::after {
  animation: ktp-pulse 2.8s ease-in-out infinite;
}
@keyframes ktp-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(63,94,140,0); }
  50%     { box-shadow: 0 0 0 6px rgba(63,94,140,.13); }
}

/* ================================================================== */
/* ① ふわっと弾む出現（.kt-pop-rise）。JSが見えたら .is-in を付ける。   */
/*    lively の .kt-rise より一段“楽しい”バウンス。no-js でも見える。  */
/* ================================================================== */
.kt-pop .kt-pop-rise {
  opacity: 0;
  transform: translateY(22px) scale(.96);
  transition: opacity .5s var(--ktp-ease), transform .62s var(--ktp-bounce);
  will-change: opacity, transform;
}
.kt-pop .kt-pop-rise.is-in { opacity: 1; transform: none; }
.kt-pop.kt-nojs .kt-pop-rise { opacity: 1; transform: none; }

/* lively の .kt-rise（藍系）も、pop ではほんのり弾ませる（統一感）。 */
.kt-pop.kt-lively .kt-rise {
  transition: opacity .55s var(--ktp-ease), transform .6s var(--ktp-bounce);
  transform: translateY(20px) scale(.98);
}
.kt-pop.kt-lively .kt-rise.is-in { transform: none; }

/* ================================================================== */
/* ② LP ヒーロー：ブランドマークを明るく・楽しく弾ませる。            */
/*    lively の描画はそのまま活かしつつ、点を弾むコーラルに・          */
/*    まわりに小さな“きらめき”をひとつ。                              */
/* ================================================================== */
/* ヒーローマーク：薄グレーの細い円相を、ぽってり太い鮮やか円相のバッジに。 */
.kt-pop.kt-lively .kt-hero-mark {
  width: 96px; height: 96px;
  background: radial-gradient(circle at 50% 42%, #FFFFFF, var(--ktp-indigo-bg));
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(43,108,246,.18), inset 0 0 0 2px #FFFFFF;
  padding: 8px;
  box-sizing: border-box;
}
.kt-pop.kt-lively .kt-hero-mark .khm-enso { stroke: var(--ktp-indigo); stroke-width: 5; }
.kt-pop.kt-lively .kt-hero-mark .khm-line { stroke: var(--ktp-coral); stroke-width: 5; }
.kt-pop.kt-lively .kt-hero-mark .khm-dot { fill: var(--ktp-sun); }
/* 灯る点を、ぷるんと弾ませる（楽しい着地）。 */
.kt-pop.kt-lively.is-ready .kt-hero-mark .khm-dot {
  animation: ktp-pop-in 1.1s 1.5s var(--ktp-bounce) forwards;
}
@keyframes ktp-pop-in {
  0%   { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.4); }
  80%  { transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}
/* 見出しの一筋を、藍→コーラルの明るいグラデへ。 */
.kt-pop.kt-lively .kt-hero-rule {
  background: linear-gradient(90deg, var(--ktp-indigo), var(--ktp-coral));
}
/* 光のにじみを、コーラル×ミント×黄の明るいオーラへ。 */
.kt-pop.kt-lively .kt-hero-stage::before {
  background:
    radial-gradient(46% 42% at 32% 36%, rgba(255,138,107,.22), transparent 70%),
    radial-gradient(48% 44% at 72% 40%, rgba(88,200,168,.18), transparent 72%),
    radial-gradient(46% 44% at 56% 70%, rgba(255,201,77,.16), transparent 72%);
}

/* ヒーロー見出しを、ふわっと弾んで持ち上げる（pop の第一印象）。 */
.kt-pop.kt-lively.is-ready .kt-hero {
  animation: ktp-hero-rise 1s .3s var(--ktp-bounce) forwards;
}
@keyframes ktp-hero-rise {
  0%   { opacity: 0; transform: translateY(16px) scale(.97); }
  100% { opacity: 1; transform: none; }
}

/* ヒーロー・メディア枠を、明るいポップなグラデ＋大きな丸みに。 */
.kt-pop.kt-lively .kt-hero-media {
  border-radius: 28px;
  background: linear-gradient(135deg, var(--ktp-coral-bg), var(--ktp-mint-bg) 60%, var(--ktp-sun-bg));
}

/* プロミスの点を、3色のカラフルなまる粒に（楽しいリズム）。 */
.kt-pop .kt-promise li .kt-dot,
.kt-pop.kt-lively .kt-promise li .kt-dot {
  width: 10px; height: 10px;
  background: var(--ktp-coral);
  box-shadow: 0 0 0 3px var(--ktp-coral-bg);
}
.kt-pop .kt-promise li:nth-child(2) .kt-dot { background: var(--ktp-mint); box-shadow: 0 0 0 3px var(--ktp-mint-bg); }
.kt-pop .kt-promise li:nth-child(3) .kt-dot { background: var(--ktp-sun); box-shadow: 0 0 0 3px var(--ktp-sun-bg); }
.kt-pop .kt-promise li { border-bottom-color: var(--ktp-peach-bg); }
.kt-pop.kt-lively .kt-promise li:hover { transform: translateX(4px); }
/* プロミス出現時に、点がぽんっと弾む（楽しい）。 */
.kt-pop .kt-promise.is-in li .kt-dot { animation: ktp-dot-pop .5s var(--ktp-bounce) both; }
.kt-pop .kt-promise.is-in li:nth-child(2) .kt-dot { animation-delay: .08s; }
.kt-pop .kt-promise.is-in li:nth-child(3) .kt-dot { animation-delay: .16s; }
@keyframes ktp-dot-pop {
  0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); }
}

/* ================================================================== */
/* ③ 診断：選択肢の“気持ちいいタップ”をポップに（コーラルのさざ波）。 */
/* ================================================================== */
.kt-pop .kt-diagnose .option-item--probe { border-radius: 20px; }
.kt-pop.kt-lively.kt-diagnose .option-item--probe:active { transform: scale(.96); }
.kt-pop.kt-lively.kt-diagnose .option-item--probe.selected,
.kt-pop.kt-lively.kt-diagnose .option-item--probe.tapped {
  border-color: var(--ktp-coral);
  background: var(--ktp-coral-bg);
  box-shadow: 0 8px 22px rgba(255,138,107,.20);
}
.kt-pop .kt-diagnose .option-item--probe.selected .option-label,
.kt-pop .kt-diagnose .option-item--probe.tapped .option-label { color: var(--ktp-coral-d); font-weight: 600; }
/* 進捗の点を、明るいコーラルへ（進むのが楽しい）。 */
.kt-pop .kt-diagnose .entry-dot.done,
.kt-pop .kt-diagnose .entry-dot.current {
  background: var(--ktp-coral);
  box-shadow: 0 0 8px rgba(255,138,107,.5);
}
/* タップで弾ける小さなさざ波（押した場所が楽しく反応）。JSが付与。 */
.kt-pop .kt-tap-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,138,107,.32);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: ktp-ripple .5s var(--ktp-ease) forwards;
  z-index: 3;
}
@keyframes ktp-ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
.kt-pop .kt-diagnose .option-item--probe { position: relative; overflow: hidden; }

/* ================================================================== */
/* ④ 結果：型シンボルの“楽しいお祝い”。lively の祝福をポップに上書き。 */
/*    シンボルがぷるんと弾んで立ち上がり、波紋を3色に・小さな紙吹雪。   */
/* ================================================================== */
.kt-pop.kt-lively.is-ready .kt-type-sym img {
  animation: ktp-sym-bounce 1s .25s var(--ktp-bounce) forwards;
}
@keyframes ktp-sym-bounce {
  0%   { opacity: 0; transform: scale(.5) rotate(-6deg); }
  55%  { opacity: 1; transform: scale(1.14) rotate(3deg); }
  78%  { transform: scale(.96) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.kt-pop.kt-lively .kt-type-sym::before { border-color: var(--ktp-coral); border-width: 2px; }
.kt-pop.kt-lively .kt-type-sym::after  { border-color: var(--ktp-mint); border-width: 2px; }
/* 型名・一言を、続けてふわっと弾ませる。 */
.kt-pop.kt-lively.is-ready .kt-type         { animation: ktp-hero-rise .8s .5s var(--ktp-bounce) forwards; }
.kt-pop.kt-lively.is-ready .kt-type-oneline { animation: ktp-hero-rise .8s .72s var(--ktp-bounce) forwards; }

/* 根拠ピルは静かな藍の面に（土台色＝信頼。loud な黄をやめる）。 */
.kt-pop .kt-rsec-evidence {
  background: var(--ktp-indigo-bg);
  border-color: #CDD8E6;
  color: var(--ktp-indigo-d);
  font-weight: 600;
}
/* 数字だけ温かいテラコッタで一点強調（差し色は最小面積で効かせる）。 */
.kt-pop .kt-count { display: inline-block; font-weight: 700; color: var(--ktp-coral-d); }
.kt-pop .kt-count.is-bumping { animation: ktp-count-bump .28s var(--ktp-bounce-s); }
@keyframes ktp-count-bump {
  0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.18); } 100% { transform: none; }
}

/* 強みセクションを、温かいピーチ×黄のお祝い面へ（必ず良い面から）。 */
.kt-pop .kt-rsec--strength {
  background: linear-gradient(160deg, var(--ktp-peach-bg), var(--ktp-sun-bg));
}
.kt-pop .kt-rsec--strength .kt-rsec-text { color: var(--ktp-coral-d); }
/* 整える一歩カードを、ミントの“整う”縁取りで（行動の背を押す）。 */
.kt-pop .kt-rsec-stepcard {
  border: 2px solid var(--ktp-mint);
  background: linear-gradient(160deg, var(--kt-bg-soft), var(--ktp-mint-bg));
}
/* スクロール誘いを、弾むコーラルの矢印気配に。 */
.kt-pop .kt-scroll-cue {
  background: linear-gradient(var(--ktp-coral), transparent);
  animation: ktp-cue 1.6s ease-in-out infinite;
}
@keyframes ktp-cue {
  0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: .9; }
}
/* セクションの符（点）を、3色めぐるカラフルなまるに。 */
.kt-pop .kt-rsec-mark {
  background: var(--ktp-coral); opacity: .8;
  animation: ktp-mark 3s ease-in-out infinite;
}
@keyframes ktp-mark {
  0%,100% { background: var(--ktp-coral); } 33% { background: var(--ktp-mint); } 66% { background: var(--ktp-sun); }
}

/* 図解（rsec-fig）が見えたら、楽しくふわっと弾んで出る。 */
.kt-pop .kt-rsec-fig { transition: transform .6s var(--ktp-bounce); }
.kt-pop .kt-rise.is-in .kt-rsec-fig { animation: ktp-fig-in .7s var(--ktp-bounce) both; }
@keyframes ktp-fig-in {
  0% { opacity: 0; transform: scale(.6) rotate(-5deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { transform: none; }
}

/* お祝いの小さな紙吹雪（JS が結果トップ／成功時に撒く・装飾）。 */
.kt-pop .kt-confetti {
  position: absolute;
  top: 0; left: 0;
  width: 9px; height: 9px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
  will-change: transform, opacity;
  animation: ktp-confetti var(--ktp-cdur, 1.5s) var(--ktp-ease) forwards;
}
@keyframes ktp-confetti {
  0%   { opacity: 1; transform: translate(0,0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--ktp-cx, 0), var(--ktp-cy, 120px)) rotate(var(--ktp-cr, 360deg)); }
}

/* ================================================================== */
/* ⑤ 学習ハブ／レッスン：道・柱・進捗をポップに（楽しく整う）。        */
/* ================================================================== */
/* 学びの道（進んだ線）を、藍→ミント→コーラルの明るいグラデへ。 */
.kt-pop .ktl-pillars::before,
.kt-pop .ktl-path::after {
  background: linear-gradient(var(--ktp-indigo), var(--ktp-mint) 55%, var(--ktp-coral)) !important;
}
/* 柱の象徴まるを、明るく大きく・完了でミントに満ちる。 */
.kt-pop .ktl-pillar-dot {
  background: #FFFFFF;
  border: 2px solid var(--ktp-coral);
  color: var(--ktp-coral-d);
}
.kt-pop .ktl-pillar.is-done .ktl-pillar-dot {
  background: var(--ktp-mint); border-color: var(--ktp-mint); color: #FFFFFF;
  box-shadow: 0 0 0 5px var(--ktp-mint-bg);
}
/* 柱ホバーで、ぷにっと持ち上がる（楽しい手応え）。 */
.kt-pop .ktl-pillar { transition: transform .25s var(--ktp-bounce-s), box-shadow .3s var(--ktp-ease); }
.kt-pop .ktl-pillar:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(255,138,107,.16); }
/* レッスン行ホバーで、コーラルにふわっと。 */
.kt-pop .ktl-lesson-row { transition: transform .2s var(--ktp-ease), background .2s var(--ktp-ease); }
.kt-pop .ktl-lesson-row:hover { transform: translateX(4px); background: var(--ktp-coral-bg); }
.kt-pop .ktl-lesson-row.is-done .ktl-lesson-no { color: var(--ktp-mint-d); }
/* 「準備中」「本文あり」タグを、親しみのある色に。 */
.kt-pop .ktl-tag--ready { background: var(--ktp-mint-bg); color: var(--ktp-mint-d); }
.kt-pop .ktl-tag--soon  { background: var(--ktp-peach-bg); color: var(--ktp-coral-d); }
/* 全体進捗を、伸びるバーで楽しく見せる（JS が幅を 0→達成% へ）。 */
.kt-pop .ktl-progress { position: relative; }
.kt-pop .ktl-progress-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--ktp-coral-bg);
  margin-top: 10px;
  overflow: hidden;
}
.kt-pop .ktl-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ktp-mint), var(--ktp-coral));
  transition: width 1.1s var(--ktp-ease);
}

/* レッスン：図解枠・本文点をポップに。図解の線が引かれる演出はlivelyのまま。 */
.kt-pop .ktl-points li .kt-dot { background: var(--ktp-coral); box-shadow: 0 0 0 3px var(--ktp-coral-bg); }
.kt-pop .ktl-figure-ph {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--ktp-mint-bg), transparent 60%),
    var(--kt-bg-soft);
}
.kt-pop .ktl-ph-curve, .kt-pop .ktl-ph-line { stroke: var(--ktp-indigo); }
.kt-pop .ktl-ph-dot { fill: var(--ktp-coral); }
/* レッスン進捗ドット（道の点）をポップに。 */
.kt-pop .ktl-pdot.is-current { background: var(--ktp-coral); box-shadow: 0 0 0 4px var(--ktp-coral-bg); }
.kt-pop .ktl-pdot.is-done { background: var(--ktp-mint); }

/* ================================================================== */
/* ⑥ ポップな素材スロット（差し込み口）。素材が来たら出す・無ければ黙る。*/
/*    形は大きな丸み・明るいグラデの台。kaname_pop_art/motion 用。    */
/* ================================================================== */
.kt-pop .kt-pop-media {
  width: 100%;
  max-width: 480px;
  margin: 6px auto 20px;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--ktp-coral-bg), var(--ktp-mint-bg) 60%, var(--ktp-sun-bg));
  box-shadow: 0 12px 34px rgba(242,107,78,.14);
}
.kt-pop .kt-pop-media img,
.kt-pop .kt-pop-media video,
.kt-pop .kt-pop-media object {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (max-width: 380px) {
  .kt-pop .kt-card { border-radius: 22px; }
}

/* ================================================================== */
/* 学習導線（ナビ／二択の扉／学校セクション／橋）の pop 配色             */
/*   藍を主役・土台に、温かいテラコッタ/金は点・縁・バッジの少量だけ。   */
/*   構造色は最適パレット（--ktp-*）へ。子供っぽくならない範囲で温める。 */
/* ================================================================== */
.kt-pop .kt-nav-brand { color: var(--kt-info); }
.kt-pop .kt-door-kicker,
.kt-pop .kt-lp-school-kicker,
.kt-pop .kt-foot-nav-h { color: var(--kt-kicker); }
/* kt-door-cta は次の一歩を促す文言（→つき）＝CTA相当のため青のまま不変。 */
.kt-pop .kt-door-cta { color: var(--ktp-indigo); }

/* ナビ：ブランドは太く青／「お金の学校」は青地ピルの楽しいボタンに。 */
.kt-pop .kt-nav-brand { font-family: var(--kt-display); font-weight: 800; letter-spacing: .12em; }
.kt-pop .kt-nav-link--school {
  color: #FFFFFF;
  font-weight: 800;
  background: var(--ktp-indigo);
  border: none;
  box-shadow: 0 4px 12px rgba(43,108,246,.30);
}
.kt-pop .kt-nav-link--school:hover { background: var(--ktp-indigo-d); color: #FFFFFF; }

/* 二択の扉：左＝藍寄り（楽しい）／右＝温かいテラコッタ縁（学び）。重量は対等。 */
.kt-pop .kt-door { border-radius: 20px; }
.kt-pop .kt-door--diag { border-color: #CBD6E4; }
.kt-pop .kt-door--school { border-color: var(--ktp-coral); }
.kt-pop .kt-door--school .kt-door-cta { color: var(--ktp-coral-d); }

/* 学校セクション：藍の土台＋温かい差し色を点で。 */
.kt-pop .kt-lp-school-section { border-radius: 24px; background: var(--kt-bg-soft); }
.kt-pop .kt-lp-pillar-glyph { color: var(--ktp-indigo); }
.kt-pop .kt-lp-pillar-count { color: var(--ktp-coral-d); }

/* 「これ、無料？」帯：静かな藍面＋温かいテラコッタのタグ（少量の差し色）。 */
.kt-pop .kt-lp-freebadge { background: var(--ktp-indigo-bg); border-radius: 16px; }
.kt-pop .kt-lp-freebadge-tag { background: var(--ktp-coral); color: #FFFDF9; }

/* チラ見せ・橋カード：丸み大きめ・glyph は藍面、所要は温色で一点。 */
.kt-pop .kt-lp-peek-card a,
.kt-pop .kt-bridge-card a { border-radius: 16px; }
.kt-pop .kt-lp-peek-glyph,
.kt-pop .kt-bridge-glyph { background: var(--ktp-indigo-bg); color: var(--ktp-indigo); }
.kt-pop .kt-lp-peek-min,
.kt-pop .kt-bridge-min { color: var(--ktp-coral-d); }
.kt-pop .kt-lp-peek-no,
.kt-pop .kt-bridge-no { color: var(--ktp-indigo); }

.kt-pop .ktl-school-intro-num { color: var(--ktp-indigo-d); }

/* ================================================================== */
/* ⑦ ステッカー/バッジ ユーティリティ（追記・2026-06-25）              */
/*    旗艦2画面に「楽しい賑わい」を足す共通部品。上質さの上限を保つため */
/*    ・小さく・少し回転・色付き影。乱用/点滅/うるさい動きはしない。     */
/*    すべて .kt-pop スコープ内のみ。既存スタイルへは無干渉。            */
/* ================================================================== */

/* 絵文字を見出し等に添える小ヘルパー（少し沈める・滲ませない）。 */
.kt-pop .kt-emoji {
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.06em;
  /* 一部環境で絵文字が単色化しないよう、装飾扱い（読み上げは aria で抑制） */
}
/* 見出し脇の少し大きめ絵文字（賑やかさの主張を一段だけ上げる）。 */
.kt-pop .kt-emoji--lg { font-size: 1.15em; }

/* --- 回転した小タグ（ステッカー：無料/FP監修/60秒/NEW/人気 等） --- */
.kt-pop .kt-sticker {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transform: rotate(-3deg);
  /* 色は色別クラスで指定。既定はサニーイエロー。 */
  background: var(--ktp-sun);
  color: #5A3D00;
  box-shadow: 0 4px 12px rgba(255,197,61,.40);
}
.kt-pop .kt-sticker--r { transform: rotate(3deg); }
.kt-pop .kt-sticker--coral { background: var(--ktp-coral); color: #FFFDF9; box-shadow: 0 4px 12px rgba(255,122,89,.40); }
.kt-pop .kt-sticker--mint  { background: var(--ktp-mint);  color: #04332C; box-shadow: 0 4px 12px rgba(24,199,174,.36); }
.kt-pop .kt-sticker--indigo{ background: var(--ktp-indigo);color: #FFFFFF; box-shadow: 0 4px 12px rgba(43,108,246,.34); }
.kt-pop .kt-sticker--pink  { background: var(--ktp-pink);  color: #FFFFFF; box-shadow: 0 4px 12px rgba(255,111,181,.34); }
/* 縁取りの白フチ版（写真/色面に重ねても映える・上質な“貼った”感）。 */
.kt-pop .kt-sticker--outline { box-shadow: 0 0 0 2px #FFFFFF, 0 5px 14px rgba(30,36,51,.18); }

/* 丸シール（◯い小バッジ。数字や1語・絵文字を1つ）。 */
.kt-pop .kt-seal {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.05;
  text-align: center;
  color: #5A3D00;
  background: var(--ktp-sun);
  box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(255,197,61,.40);
  transform: rotate(-6deg);
}
.kt-pop .kt-seal--coral { color: #FFFDF9; background: var(--ktp-coral); box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(255,122,89,.36); }
.kt-pop .kt-seal--mint  { color: #04332C; background: var(--ktp-mint);  box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(24,199,174,.34); }

/* 吹き出し（小さな一言。少し傾けて貼る）。 */
.kt-pop .kt-bubble {
  position: relative;
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--ktp-indigo-d);
  background: #FFFFFF;
  border: 2px solid var(--ktp-indigo-bg);
  border-radius: 14px;
  padding: 7px 12px;
  box-shadow: 0 6px 16px rgba(43,108,246,.12);
  transform: rotate(-1.5deg);
}
.kt-pop .kt-bubble::after {
  content: "";
  position: absolute;
  left: 22px; bottom: -8px;
  width: 14px; height: 14px;
  background: #FFFFFF;
  border-right: 2px solid var(--ktp-indigo-bg);
  border-bottom: 2px solid var(--ktp-indigo-bg);
  transform: rotate(45deg);
}

/* ステッカーを“見出し脇に浮かべる”ためのラッパ（行内で右に寄せて散らす）。 */
.kt-pop .kt-sticker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}
.kt-pop .kt-sticker-row--center { justify-content: center; }

/* マーカー風ハイライト（テキスト断片を黄/ミントで引く）。既存 strong と別に直接付ける用。 */
.kt-pop .kt-mark   { background: linear-gradient(transparent 60%, rgba(255,197,61,.55) 0); padding: 0 2px; font-weight: 700; }
.kt-pop .kt-mark--mint { background: linear-gradient(transparent 60%, rgba(24,199,174,.40) 0); }
.kt-pop .kt-mark--coral{ background: linear-gradient(transparent 60%, rgba(255,122,89,.36) 0); }

/* ステッカーが出現時に“ぽんっ”と1回だけ弾む（やりすぎない・無限ループ無し）。 */
.kt-pop .kt-rise.is-in .kt-sticker,
.kt-pop .kt-pop-rise.is-in .kt-sticker,
.kt-pop.kt-nojs .kt-sticker,
.kt-pop .kt-rise.is-in .kt-seal,
.kt-pop .kt-pop-rise.is-in .kt-seal,
.kt-pop.kt-nojs .kt-seal {
  animation: ktp-sticker-pop .5s var(--ktp-bounce) both;
}
@keyframes ktp-sticker-pop {
  0%   { opacity: 0; transform: scale(.4) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; }
}
/* seal は固有の回転を保つ（pop後に -6deg へ収束）。 */
.kt-pop .kt-rise.is-in .kt-seal,
.kt-pop .kt-pop-rise.is-in .kt-seal,
.kt-pop.kt-nojs .kt-seal { animation-name: ktp-seal-pop; }
@keyframes ktp-seal-pop {
  0%   { opacity: 0; transform: scale(.4) rotate(6deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(-8deg); }
  100% { opacity: 1; transform: rotate(-6deg); }
}

/* ================================================================== */
/* prefers-reduced-motion: ポップな動きを全停止し、最終状態で静かに。   */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kt-pop .kt-pop-rise,
  .kt-pop.kt-lively .kt-rise {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .kt-pop .kt-promise.is-in li .kt-dot,
  .kt-pop.kt-lively.is-ready .kt-hero,
  .kt-pop.kt-lively.is-ready .kt-type,
  .kt-pop.kt-lively.is-ready .kt-type-oneline,
  .kt-pop.kt-lively.is-ready .kt-type-sym img,
  .kt-pop.kt-lively.is-ready .kt-hero-mark .khm-dot,
  .kt-pop .kt-rise.is-in .kt-rsec-fig,
  .kt-pop .kt-count.is-bumping {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .kt-pop .kt-scroll-cue,
  .kt-pop .kt-rsec-mark,
  .kt-pop.kt-lively .kt-btn--primary::after,
  .kt-pop .ktl .kt-btn--primary::after { animation: none !important; }
  .kt-pop .kt-confetti,
  .kt-pop .kt-tap-ripple { display: none !important; }
  /* 進捗バーは即・達成幅で静止（JS が style を付けるが transition を切る）。 */
  .kt-pop .ktl-progress-fill { transition: none !important; }
  /* ステッカー/シールは最終姿で静止（弾みを止める）。 */
  .kt-pop .kt-sticker,
  .kt-pop .kt-seal {
    animation: none !important;
    opacity: 1 !important;
  }
  .kt-pop .kt-seal { transform: rotate(-6deg) !important; }
}