/* ===================================================================
   Kaname LP 専用スタイル（.kt-lp-*）
   目的：退屈・文字過多を解消し、「お金の学校＝6分野」を象徴SVGの
         ビジュアルカードで一望、無料の価値を一目で、上品に出現させる。
   方針：トークンは kaname.css の --kt-* を再利用（色は和トーン厳守）。
         既存 kaname.css / kaname_learn.css / kaname_hub.css は不変。
         本ファイルは後読みなので、必要箇所のみ既存規則を上書きする。
   制約：390px幅で横スクロールを出さない（固定widthを使わない）。
   =================================================================== */

/* ---------- (b) 6分野ビジュアルカード（象徴SVG） ---------- */
/* 旧：明朝の漢字グリフ1文字 → 新：pop_art の象徴SVG。 */
.kt-lp-pillars {
  /* 既存の3列グリッドは活かしつつ、間隔をわずかに広げて呼吸を与える */
  gap: 10px;
}

.kt-lp-pillar a {
  gap: 6px;
  padding: 14px 7px 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kt-lp-pillar a:hover,
.kt-lp-pillar a:focus-visible {
  transform: translateY(-2px);
  border-color: #CDD8E6;
  box-shadow: var(--kt-shadow);
}

/* 象徴SVGの器（藍のごく薄い面に円で抜く＝学校らしい静けさ） */
.kt-lp-pillar-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--kt-accent-bg);
  margin-bottom: 2px;
}
.kt-lp-pillar-symbol img {
  width: 40px;
  height: 40px;
  display: block;
}

/* タイトル等は既存トーンを尊重しつつ僅かに整える */
.kt-lp-pillar-title { letter-spacing: .02em; }
.kt-lp-pillar-count { color: var(--kt-gold); }

/* 出現：カードが順に上品に立ち上がる（reduce-motion で無効化） */
.kt-lively .kt-lp-pillar {
  opacity: 0;
  transform: translateY(10px);
}
.kt-lively .kt-rise.is-in .kt-lp-pillar,
.kt-lively.kt-nojs .kt-lp-pillar {
  animation: kt-lp-pill-in .5s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(var(--ktl-i, 0) * 70ms);
  opacity: 1;
}
@keyframes kt-lp-pill-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- (b2) 価値の可視化：無料でここまで ---------- */
.kt-lp-value {
  margin: 4px 0 22px;
  padding: 16px 14px 14px;
  border: 1px solid var(--kt-line);
  border-radius: 18px;
  background: var(--kt-card);
  text-align: center;
}
.kt-lp-value-label {
  margin: 0 0 12px;
  font-family: var(--kt-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--kt-accent-d);
  letter-spacing: .04em;
}
.kt-lp-value-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: stretch;
}
.kt-lp-value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border-radius: 14px;
  background: var(--kt-accent-bg);
}
.kt-lp-value-num {
  font-family: var(--kt-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--kt-accent);
}
.kt-lp-value-num--mark {
  font-size: 24px;
  color: var(--kt-gold);
}
.kt-lp-value-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--kt-ink);
}
.kt-lp-value-sub {
  font-size: 10px;
  line-height: 1.4;
  color: var(--kt-ink-soft);
}

/* 数字が静かに立ち上がる（上品に・主張しすぎない） */
.kt-lively .kt-lp-value-item {
  opacity: 0;
  transform: translateY(8px);
}
.kt-lively .kt-rise.is-in .kt-lp-value-item,
.kt-lively.kt-nojs .kt-lp-value-item {
  animation: kt-lp-val-in .55s cubic-bezier(.22,.7,.3,1) both;
  opacity: 1;
}
.kt-lp-value-item:nth-child(1) { animation-delay: .05s; }
.kt-lp-value-item:nth-child(2) { animation-delay: .15s; }
.kt-lp-value-item:nth-child(3) { animation-delay: .25s; }
@keyframes kt-lp-val-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- (e) 学校CTA：テキストリンク化（主CTA＝FVのまず診断を奪わない） ---------- */
.kt-lp-school-cta {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
}

/* ---------- アクセシビリティ：動きを抑える設定を尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  .kt-lively .kt-rise.is-in .kt-lp-pillar,
  .kt-lively.kt-nojs .kt-lp-pillar,
  .kt-lively .kt-rise.is-in .kt-lp-value-item,
  .kt-lively.kt-nojs .kt-lp-value-item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- 狭幅（〜360px）でも横スクロールを出さない保険 ---------- */
@media (max-width: 360px) {
  .kt-lp-value-num { font-size: 24px; }
  .kt-lp-pillar-symbol { width: 46px; height: 46px; }
  .kt-lp-pillar-symbol img { width: 34px; height: 34px; }
}

/* ===================================================================
   ▼ ポップ大改造 v3（2026-06-25）：.kt-pop スコープで LP を派手×上質に。
     ・鮮やかコア（青/黄/コーラル/ミント/ピンク）を絞って調和。
     ・チャンキーなカード・ぽってり・色付き影・ステッカー風タグ。
     ・極太丸見出し（base/pop の --kt-display 継承）。
   =================================================================== */

/* --- ヒーロー直下のリード：太く・読みやすく --- */
.kt-pop .kt-lp .kt-lead { font-size: 15.5px; }

/* --- ② 二択の扉：左=青・右=コーラルのチャンキーなカード --- */
.kt-pop .kt-doors-label {
  font-weight: 800; letter-spacing: .1em; color: var(--ktp-ink-soft);
}
.kt-pop .kt-door {
  border-width: 2.5px;
  border-radius: 22px;
  box-shadow: 0 8px 20px rgba(43,108,246,.08);
  transition: transform .2s var(--ktp-bounce-s), box-shadow .25s var(--ktp-ease);
}
.kt-pop .kt-door:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43,108,246,.16); }
.kt-pop .kt-door--diag {
  border-color: #BBD2FF;
  background: linear-gradient(165deg, #FFFFFF, var(--ktp-indigo-bg));
}
.kt-pop .kt-door--diag .kt-door-kicker,
.kt-pop .kt-door--diag .kt-door-cta { color: var(--ktp-indigo-d); }
.kt-pop .kt-door--school {
  border-color: var(--ktp-coral);
  background: linear-gradient(165deg, #FFFFFF, var(--ktp-coral-bg));
}
.kt-pop .kt-door--school .kt-door-kicker,
.kt-pop .kt-door--school .kt-door-cta { color: var(--ktp-coral-d); }
.kt-pop .kt-door-title { font-family: var(--kt-display); font-weight: 800; font-size: 17px; }
.kt-pop .kt-door-kicker { font-weight: 800; letter-spacing: .08em; }
.kt-pop .kt-door-cta { font-weight: 800; }

/* --- 6本柱：丸い色面の器＋色付き縁。完了感より「楽しく網羅」。 --- */
.kt-pop .kt-lp-pillar a {
  border-width: 2px;
  border-radius: 18px;
  border-color: var(--kt-line);
}
.kt-pop .kt-lp-pillar a:hover { border-color: #BBD2FF; box-shadow: 0 10px 22px rgba(43,108,246,.14); }
.kt-pop .kt-lp-pillar-symbol {
  width: 56px; height: 56px;
  background: var(--ktp-indigo-bg);
  box-shadow: inset 0 0 0 2px #FFFFFF, 0 4px 10px rgba(43,108,246,.10);
}
.kt-pop .kt-lp-pillar-title { font-weight: 800; }
.kt-pop .kt-lp-pillar-count { color: var(--ktp-coral-d); font-weight: 700; }

/* --- 価値の可視化：跳ねる数字・カラフルな3枠 --- */
.kt-pop .kt-lp-value {
  border-width: 2px;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(43,108,246,.10);
}
.kt-pop .kt-lp-value-label { font-family: var(--kt-display); font-weight: 800; color: var(--ktp-indigo-d); }
.kt-pop .kt-lp-value-item { border-radius: 16px; }
.kt-pop .kt-lp-value-item:nth-child(1) { background: var(--ktp-indigo-bg); }
.kt-pop .kt-lp-value-item:nth-child(2) { background: var(--ktp-mint-bg); }
.kt-pop .kt-lp-value-item:nth-child(3) { background: var(--ktp-sun-bg); }
.kt-pop .kt-lp-value-num {
  font-family: var(--kt-display); font-weight: 800; font-size: 32px;
  color: var(--ktp-indigo);
}
.kt-pop .kt-lp-value-item:nth-child(2) .kt-lp-value-num { color: var(--ktp-mint-d); }
.kt-pop .kt-lp-value-item:nth-child(3) .kt-lp-value-num { color: var(--ktp-sun-d); }
.kt-pop .kt-lp-value-num--mark { color: var(--ktp-sun-d); }
.kt-pop .kt-lp-value-name { font-weight: 800; }

/* --- 学校セクション：明るい青み土台＋極太タイトル --- */
.kt-pop .kt-lp-school-section {
  border-width: 2px;
  border-color: #DCE7FF;
  background: linear-gradient(180deg, #FFFFFF, var(--ktp-indigo-bg));
  box-shadow: 0 14px 34px rgba(43,108,246,.08);
}
.kt-pop .kt-lp-school-kicker { font-weight: 800; letter-spacing: .12em; }
.kt-pop .kt-lp-school-title { font-family: var(--kt-display); font-weight: 800; font-size: 26px; }

/* --- 「これ、無料？」帯：黄のステッカー風タグ＋青面 --- */
.kt-pop .kt-lp-freebadge {
  align-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--ktp-indigo-bg), var(--ktp-mint-bg));
  border: 2px solid #CFE3FF;
}
.kt-pop .kt-lp-freebadge-tag {
  background: var(--ktp-sun);
  color: #5A3D00;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(255,197,61,.45);
  transform: rotate(-3deg);
}
.kt-pop .kt-lp-freebadge-body { font-weight: 500; }

/* --- チラ見せ：丸グリフ＋チャンキーカード --- */
.kt-pop .kt-lp-peek-label { font-family: var(--kt-display); font-weight: 800; font-size: 16px; }
.kt-pop .kt-lp-peek-card a {
  border-width: 2px;
  border-radius: 18px;
  transition: transform .18s var(--ktp-bounce-s), border-color .2s, box-shadow .2s;
}
.kt-pop .kt-lp-peek-card a:hover {
  transform: translateX(3px);
  border-color: #BBD2FF;
  box-shadow: 0 8px 18px rgba(43,108,246,.12);
}
.kt-pop .kt-lp-peek-card:nth-child(1) .kt-lp-peek-glyph { background: var(--ktp-indigo-bg); color: var(--ktp-indigo); }
.kt-pop .kt-lp-peek-card:nth-child(2) .kt-lp-peek-glyph { background: var(--ktp-mint-bg); color: var(--ktp-mint-d); }
.kt-pop .kt-lp-peek-card:nth-child(3) .kt-lp-peek-glyph { background: var(--ktp-pink-bg); color: var(--ktp-pink-d); }
.kt-pop .kt-lp-peek-title { font-weight: 800; }

/* チラ見せ1枚目の「人気」ステッカーを右上角に貼る（カードからはみ出させ賑やかに）。 */
.kt-pop .kt-lp-peek-card { position: relative; }
.kt-pop .kt-lp-peek-sticker {
  position: absolute;
  top: -9px; right: 8px;
  z-index: 2;
  font-size: 11px;
  padding: 5px 10px;
  transform: rotate(5deg);
  pointer-events: none;
}

/* --- 続ける器（クラブ帯）：控えめだが新baseに合わせる --- */
.kt-pop .kt-club-band { border-radius: 20px; }

/* ===================================================================
   ▼ 無料価値の前面化（2026-06-25）：上質ポップで「無料でもこんなに役立つ」。
     ・今日のお金のひとこと（吹き出しステッカー）
     ・無料でできること（チャンキー色カード5枚）
     ・はじめての3ステップ（番号付きカード）
     390px幅で横スクロールを出さない（固定widthなし）。
   =================================================================== */

/* ---------- 今日のお金のひとこと（上品な吹き出しステッカー） ---------- */
.kt-lp-daily {
  position: relative;
  margin: 14px 0 4px;
  padding: 16px 16px 14px;
  border: 2px solid #DCE7FF;
  border-radius: 18px;
  background: linear-gradient(165deg, #FFFFFF, var(--ktp-sun-bg));
  box-shadow: 0 8px 20px rgba(255,197,61,.14);
  text-align: center;
}
.kt-lp-daily-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ktp-sun);
  color: #5A3D00;
  font-family: var(--kt-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(255,197,61,.4);
  transform: rotate(-2deg);
}
.kt-lp-daily-word {
  margin: 0;
  font-family: var(--kt-serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--kt-ink);
}

/* ---------- 無料でできること（色カード一望） ---------- */
.kt-lp-free {
  margin: 22px 0;
  padding: 20px 14px 18px;
  border: 2px solid #DCE7FF;
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF, var(--ktp-mint-bg));
  box-shadow: 0 14px 34px rgba(24,199,174,.10);
  text-align: center;
}
.kt-lp-free-kicker {
  margin: 0 0 4px;
  font-family: var(--kt-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--ktp-mint-d);
}
.kt-lp-free-title {
  margin: 0 0 10px;
  font-family: var(--kt-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--kt-ink);
}

.kt-lp-free-grid {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}
/* 5枚目（今日のひとこと）は1段使って横長に＝賑やかな締め */
.kt-lp-free-card:nth-child(5) { grid-column: 1 / -1; }

.kt-lp-free-card {
  position: relative;
  border-radius: 18px;
  border: 2px solid var(--kt-line);
  background: #FFFFFF;
  overflow: hidden;
}
.kt-lp-free-card a,
.kt-lp-free-card:nth-child(5) {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px 13px;
  text-decoration: none;
  color: inherit;
}
.kt-lp-free-card:nth-child(5) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.kt-lp-free-card a { transition: transform .18s var(--ktp-bounce-s), box-shadow .2s var(--ktp-ease); }
.kt-lp-free-card a:hover,
.kt-lp-free-card a:focus-visible { transform: translateY(-3px); }

.kt-lp-free-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
}
.kt-lp-free-name {
  font-family: var(--kt-display);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--kt-ink);
}
.kt-lp-free-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--kt-ink-soft);
}
.kt-lp-free-meta {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
/* 5枚目（横長）の中で説明・メタを並べる */
.kt-lp-free-card:nth-child(5) .kt-lp-free-name { flex: 1 1 auto; }
.kt-lp-free-card:nth-child(5) .kt-lp-free-desc { flex: 1 1 100%; }
.kt-lp-free-card:nth-child(5) .kt-lp-free-meta { flex: 0 0 auto; }

/* 色分け（各カードに性格を与える・上質ポップ） */
.kt-lp-free-card--indigo { border-color: #BBD2FF; background: linear-gradient(165deg,#FFFFFF,var(--ktp-indigo-bg)); }
.kt-lp-free-card--indigo .kt-lp-free-ico { background: var(--ktp-indigo-bg); }
.kt-lp-free-card--indigo .kt-lp-free-meta { color: var(--ktp-indigo-d); }
.kt-lp-free-card--mint { border-color: #A9EEDF; background: linear-gradient(165deg,#FFFFFF,var(--ktp-mint-bg)); }
.kt-lp-free-card--mint .kt-lp-free-ico { background: var(--ktp-mint-bg); }
.kt-lp-free-card--mint .kt-lp-free-meta { color: var(--ktp-mint-d); }
.kt-lp-free-card--sun { border-color: #FFE08A; background: linear-gradient(165deg,#FFFFFF,var(--ktp-sun-bg)); }
.kt-lp-free-card--sun .kt-lp-free-ico { background: var(--ktp-sun-bg); }
.kt-lp-free-card--sun .kt-lp-free-meta { color: var(--ktp-sun-d); }
.kt-lp-free-card--pink { border-color: #FFC2DE; background: linear-gradient(165deg,#FFFFFF,var(--ktp-pink-bg)); }
.kt-lp-free-card--pink .kt-lp-free-ico { background: var(--ktp-pink-bg); }
.kt-lp-free-card--pink .kt-lp-free-meta { color: var(--ktp-pink-d); }
.kt-lp-free-card--coral { border-color: var(--ktp-coral); background: linear-gradient(165deg,#FFFFFF,var(--ktp-coral-bg)); }
.kt-lp-free-card--coral .kt-lp-free-ico { background: var(--ktp-coral-bg); }
.kt-lp-free-card--coral .kt-lp-free-meta { color: var(--ktp-coral-d); }
.kt-lp-free-card--indigo a:hover { box-shadow: 0 10px 22px rgba(43,108,246,.16); }
.kt-lp-free-card--mint a:hover { box-shadow: 0 10px 22px rgba(24,199,174,.18); }
.kt-lp-free-card--sun a:hover { box-shadow: 0 10px 22px rgba(255,197,61,.22); }
.kt-lp-free-card--pink a:hover { box-shadow: 0 10px 22px rgba(255,111,181,.18); }

/* 出現（順に立ち上がる・reduce-motionで無効化） */
.kt-lively .kt-lp-free-card,
.kt-lively .kt-lp-step { opacity: 0; transform: translateY(10px); }
.kt-lively .kt-rise.is-in .kt-lp-free-card,
.kt-lively.kt-nojs .kt-lp-free-card,
.kt-lively .kt-rise.is-in .kt-lp-step,
.kt-lively.kt-nojs .kt-lp-step {
  animation: kt-lp-free-in .5s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(var(--ktf-i, 0) * 70ms);
  opacity: 1;
}
@keyframes kt-lp-free-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- はじめての3ステップ（番号付きカード） ---------- */
.kt-lp-steps {
  margin: 22px 0;
  padding: 20px 14px 18px;
  border: 2px solid #DCE7FF;
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF, var(--ktp-indigo-bg));
  box-shadow: 0 14px 34px rgba(43,108,246,.08);
  text-align: center;
}
.kt-lp-steps-kicker {
  margin: 0 0 4px;
  font-family: var(--kt-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--kt-kicker);
}
.kt-lp-steps-title {
  margin: 0 0 14px;
  font-family: var(--kt-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--kt-ink);
}
.kt-lp-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  counter-reset: ktstep;
}
.kt-lp-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 13px;
  border: 2px solid #DCE7FF;
  border-radius: 18px;
  background: #FFFFFF;
}
.kt-lp-step-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ktp-indigo), #4F8BFF);
  color: #FFFFFF;
  font-family: var(--kt-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(43,108,246,.28);
}
.kt-lp-step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.kt-lp-step-name {
  font-family: var(--kt-display);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--kt-ink);
}
.kt-lp-step-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--kt-ink-soft);
}
.kt-lp-step-link {
  margin-top: 3px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ktp-indigo-d);
  text-decoration: none;
}
.kt-lp-step-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .kt-lively .kt-rise.is-in .kt-lp-free-card,
  .kt-lively.kt-nojs .kt-lp-free-card,
  .kt-lively .kt-rise.is-in .kt-lp-step,
  .kt-lively.kt-nojs .kt-lp-step {
    animation: none; opacity: 1; transform: none;
  }
}

/* 狭幅（〜360px）保険：はみ出し0 */
@media (max-width: 360px) {
  .kt-lp-free-title,
  .kt-lp-steps-title { font-size: 20px; }
  .kt-lp-free-grid { gap: 8px; }
  .kt-lp-free-name { font-size: 13.5px; }
}

/* ===================================================================
   ▼ 変化のストーリー（三幕・2026-06-26）：今→整える→変わっていく未来。
     機能の羅列でなく「あなたがどう変わるか」を情景で。
     くもり→夜明け→晴れ、を色で。矢印で時間軸。上質ポップを保つ。
     390px幅で横スクロールを出さない（固定widthなし）。
   =================================================================== */
.kt-lp-story {
  margin: 26px 0;
  padding: 24px 14px 22px;
  border: 2px solid #DCE7FF;
  border-radius: 26px;
  /* 夜明けのグラデ：薄青 → 薄ミント → 薄イエロー（くもりから晴れへ） */
  background: linear-gradient(180deg, var(--ktp-indigo-bg) 0%, #FFFFFF 38%, var(--ktp-sun-bg) 100%);
  box-shadow: 0 14px 34px rgba(43, 108, 246, .08);
  text-align: center;
}
.kt-lp-story-kicker {
  margin: 0 0 6px;
  font-family: var(--kt-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--ktp-mint-d);
}
.kt-lp-story-title {
  margin: 0 0 10px;
  font-family: var(--kt-display);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--kt-ink);
}
.kt-lp-story-lead {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--kt-ink-soft);
}

/* ── 三幕のトラック（縦に流れる） ── */
.kt-lp-story-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
}

/* ── 各シーン（情景カード） ── */
.kt-lp-scene {
  position: relative;
  overflow: hidden;
  padding: 18px 16px 17px;
  border: 2px solid var(--kt-line);
  border-radius: 20px;
  background: #FFFFFF;
}
/* 上端に「空」の帯（情景の色＝そのシーンの気分） */
.kt-lp-scene-sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  border-radius: 20px 20px 0 0;
}
.kt-lp-scene-stage {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--kt-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.kt-lp-scene-head {
  margin: 0 0 6px;
  font-family: var(--kt-display);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--kt-ink);
}
.kt-lp-scene-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--kt-ink-soft);
}
.kt-lp-scene-soft {
  color: var(--ktp-ink-soft);
  font-weight: 600;
}

/* 第一幕：いまの毎日（くもり・少しグレーがかった青） */
.kt-lp-scene--now { border-color: #D7DEE8; background: linear-gradient(165deg, #FFFFFF, #F2F5F9); }
.kt-lp-scene--now .kt-lp-scene-sky { background: linear-gradient(90deg, #C4CDD9, #DCE3EC); }
.kt-lp-scene--now .kt-lp-scene-stage { background: #EAEEF3; color: #5B6478; }

/* 第二幕：整える（夜明けのミント） */
.kt-lp-scene--tune { border-color: #A9EEDF; background: linear-gradient(165deg, #FFFFFF, var(--ktp-mint-bg)); }
.kt-lp-scene--tune .kt-lp-scene-sky { background: linear-gradient(90deg, var(--ktp-mint), #6FE0CD); }
.kt-lp-scene--tune .kt-lp-scene-stage { background: var(--ktp-mint-bg); color: var(--ktp-mint-d); }

/* 第三幕：変わっていく未来（晴れ・朝のひかり） */
.kt-lp-scene--future { border-color: #FFE08A; background: linear-gradient(165deg, #FFFFFF, var(--ktp-sun-bg)); }
.kt-lp-scene--future .kt-lp-scene-sky { background: linear-gradient(90deg, var(--ktp-sun), #FF9F6B); }
.kt-lp-scene--future .kt-lp-scene-stage { background: var(--ktp-sun-bg); color: var(--ktp-sun-d); }

/* 第二幕の小さなチップ（知る→見える→続く） */
.kt-lp-scene-chips {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.kt-lp-chip {
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--kt-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.kt-lp-chip--indigo { background: var(--ktp-indigo-bg); color: var(--ktp-indigo-d); }
.kt-lp-chip--mint   { background: var(--ktp-mint-bg);   color: var(--ktp-mint-d); }
.kt-lp-chip--sun    { background: var(--ktp-sun-bg);    color: var(--ktp-sun-d); }

/* ── 矢印（時間が進む・色が変わる） ── */
.kt-lp-arrow {
  display: grid;
  place-items: center;
  height: 30px;
}
.kt-lp-arrow-mark {
  font-family: var(--kt-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #B8C4D6;
}
.kt-lp-arrow:nth-of-type(2) .kt-lp-arrow-mark { color: var(--ktp-mint); }
.kt-lp-arrow:nth-of-type(4) .kt-lp-arrow-mark { color: var(--ktp-sun-d); }

/* ── 締めのCTA ── */
.kt-lp-story-cta {
  margin-top: 20px;
  text-align: center;
}
.kt-lp-story-cta-line {
  margin: 0 0 12px;
  font-family: var(--kt-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--kt-ink);
}
.kt-lp-story-btn { margin: 0 auto; }
.kt-lp-story .kt-note { margin-top: 8px; }

/* 出現：シーンが順に立ち上がる（reduce-motionで無効化） */
.kt-lively .kt-lp-scene { opacity: 0; transform: translateY(10px); }
.kt-lively .kt-rise.is-in .kt-lp-scene,
.kt-lively.kt-nojs .kt-lp-scene {
  animation: kt-lp-scene-in .55s cubic-bezier(.22, .7, .3, 1) both;
  animation-delay: calc(var(--kts-i, 0) * 110ms);
  opacity: 1;
}
@keyframes kt-lp-scene-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kt-lively .kt-rise.is-in .kt-lp-scene,
  .kt-lively.kt-nojs .kt-lp-scene {
    animation: none; opacity: 1; transform: none;
  }
}

/* 狭幅（〜360px）保険：はみ出し0 */
@media (max-width: 360px) {
  .kt-lp-story-title { font-size: 21px; }
  .kt-lp-scene-head { font-size: 15.5px; }
  .kt-lp-scene-chips { gap: 6px; }
}

/* ===================================================================
   ▼ Kanameと歩む、これからの景色（before → 時系列after）
     いま(くもり) → 1ヶ月 → 3ヶ月 → 半年 → 1年 と、空が晴れていく時間軸。
     具体的かつ情緒的に。だが視覚重量は主CTAより下げる（下流の希望提示）。
     幅は固定しない（min()/clamp()のみ）。新規"100%"リテラルは書かない。
     390px幅で横スクロールを出さない。
   =================================================================== */
.kt-lp-vista {
  /* 他セクションと横幅を揃える：独自width(92vw)をやめ親(.kt-inner)の幅に従う */
  box-sizing: border-box;
  margin: 26px 0;
  padding: 24px 14px 22px;
  border: 2px solid #DCE7FF;
  border-radius: 26px;
  /* くもり(薄青) → 朝(白) → 晴れ(薄イエロー) の縦グラデ */
  background: linear-gradient(180deg, #EEF3FB, #FFFFFF 42%, var(--ktp-sun-bg));
  box-shadow: 0 14px 34px rgba(43, 108, 246, .08);
  text-align: center;
}
.kt-lp-vista-kicker {
  margin: 0 0 6px;
  font-family: var(--kt-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--kt-kicker);
}
.kt-lp-vista-title {
  margin: 0 0 10px;
  font-family: var(--kt-display);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--kt-ink);
}
.kt-lp-vista-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--kt-ink-soft);
}

/* ── 時系列トラック（縦に流れる） ── */
.kt-lp-vista-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
}

/* ── 各景色カード（before/after 共通の土台） ── */
.kt-lp-vista-now,
.kt-lp-vista-step {
  position: relative;
  overflow: hidden;
  padding: 17px 16px 16px;
  border: 2px solid var(--kt-line);
  border-radius: 20px;
  background: #FFFFFF;
}
/* 上端の「空」の帯（その時点の気分の色） */
.kt-lp-vista-sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  border-radius: 20px 20px 0 0;
}
.kt-lp-vista-when {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--kt-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.kt-lp-vista-head {
  margin: 0 0 6px;
  font-family: var(--kt-display);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--kt-ink);
}
.kt-lp-vista-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--kt-ink-soft);
}
.kt-lp-vista-soft {
  color: var(--ktp-ink-soft);
  font-weight: 600;
}

/* before：いま（くもり・グレーがかった青） */
.kt-lp-vista-now { border-color: #D7DEE8; background: linear-gradient(165deg, #FFFFFF, #F2F5F9); }
.kt-lp-vista-now .kt-lp-vista-sky { background: linear-gradient(90deg, #C4CDD9, #DCE3EC); }
.kt-lp-vista-when--now { background: #EAEEF3; color: #5B6478; }

/* 1ヶ月後：見えはじめる（青・夜明け前の光） */
.kt-lp-vista-step--m1 { border-color: #BFD4FF; background: linear-gradient(165deg, #FFFFFF, var(--ktp-indigo-bg)); }
.kt-lp-vista-step--m1 .kt-lp-vista-sky { background: linear-gradient(90deg, var(--ktp-indigo), #6E9BFF); }
.kt-lp-vista-when--m1 { background: var(--ktp-indigo-bg); color: var(--ktp-indigo-d); }

/* 3ヶ月後：整う（ミント） */
.kt-lp-vista-step--m3 { border-color: #A9EEDF; background: linear-gradient(165deg, #FFFFFF, var(--ktp-mint-bg)); }
.kt-lp-vista-step--m3 .kt-lp-vista-sky { background: linear-gradient(90deg, var(--ktp-mint), #6FE0CD); }
.kt-lp-vista-when--m3 { background: var(--ktp-mint-bg); color: var(--ktp-mint-d); }

/* 半年後：積み上がる（コーラル・朝の暖かさ） */
.kt-lp-vista-step--m6 { border-color: #FFC9B8; background: linear-gradient(165deg, #FFFFFF, var(--ktp-coral-bg)); }
.kt-lp-vista-step--m6 .kt-lp-vista-sky { background: linear-gradient(90deg, var(--ktp-coral), #FF8E6B); }
.kt-lp-vista-when--m6 { background: var(--ktp-coral-bg); color: var(--ktp-coral-d); }

/* 1年後：晴れ（朝のひかり・山吹） */
.kt-lp-vista-step--y1 { border-color: #FFE08A; background: linear-gradient(165deg, #FFFFFF, var(--ktp-sun-bg)); }
.kt-lp-vista-step--y1 .kt-lp-vista-sky { background: linear-gradient(90deg, var(--ktp-sun), #FFB04D); }
.kt-lp-vista-when--y1 { background: var(--ktp-sun-bg); color: var(--ktp-sun-d); }

/* ── 流れの矢印（時間が進む・色が温まっていく） ── */
.kt-lp-vista-flow {
  display: grid;
  place-items: center;
  height: 28px;
}
.kt-lp-vista-flow-mark {
  font-family: var(--kt-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #B8C4D6;
}
.kt-lp-vista-flow:nth-of-type(2) .kt-lp-vista-flow-mark { color: var(--ktp-indigo); }
.kt-lp-vista-flow:nth-of-type(4) .kt-lp-vista-flow-mark { color: var(--ktp-mint); }
.kt-lp-vista-flow:nth-of-type(6) .kt-lp-vista-flow-mark { color: var(--ktp-coral); }
.kt-lp-vista-flow:nth-of-type(8) .kt-lp-vista-flow-mark { color: var(--ktp-sun-d); }

/* ── 締め（非断定の念押し＋控えめCTA。主CTAは奪わない） ── */
.kt-lp-vista-foot {
  margin: 18px auto 12px;
  max-width: min(92vw, 34em);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--kt-ink-soft);
  text-align: center;
}
.kt-lp-vista-cta {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
}

/* 出現：景色が順に立ち上がる（reduce-motionで無効化） */
.kt-lively .kt-lp-vista-now,
.kt-lively .kt-lp-vista-step { opacity: 0; transform: translateY(10px); }
.kt-lively .kt-rise.is-in .kt-lp-vista-now,
.kt-lively .kt-rise.is-in .kt-lp-vista-step,
.kt-lively.kt-nojs .kt-lp-vista-now,
.kt-lively.kt-nojs .kt-lp-vista-step {
  animation: kt-lp-vista-in .55s cubic-bezier(.22, .7, .3, 1) both;
  animation-delay: calc(var(--ktv-i, 0) * 100ms);
  opacity: 1;
}
@keyframes kt-lp-vista-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kt-lively .kt-rise.is-in .kt-lp-vista-now,
  .kt-lively .kt-rise.is-in .kt-lp-vista-step,
  .kt-lively.kt-nojs .kt-lp-vista-now,
  .kt-lively.kt-nojs .kt-lp-vista-step {
    animation: none; opacity: 1; transform: none;
  }
}

/* 狭幅（〜360px）保険：はみ出し0 */
@media (max-width: 360px) {
  .kt-lp-vista-title { font-size: 21px; }
  .kt-lp-vista-head { font-size: 15.5px; }
}

/* ===================================================================
   ▼ 情報整理（2026-06-28）：一本の道筋＝診断→学ぶ→ツール→続ける。
     FVは「主CTA＝まず診断」ひとつに集中。競合CTAは下流＋視覚重量を下げる。
     冗長/重複を削減し、視線が「まず診断」に集まる構成へ。
     390px幅で横スクロールを出さない（固定widthなし）。
   =================================================================== */

/* --- ① FVの主CTAカード：このページで最も強い1枚に（主従を明確化） --- */
.kt-pop .kt-lp-fvcta {
  border-width: 2.5px;
  border-radius: 24px;
  box-shadow: 0 16px 38px rgba(43,108,246,.16);
}
/* 主CTAボタン：FVで最も目立つ。下流の二択・学校リンクより常に強い。 */
.kt-lp-cta-main { font-size: 16px; }
.kt-pop .kt-lp-cta-main {
  box-shadow: 0 10px 24px rgba(43,108,246,.30);
}

/* --- ② Kanameとは（1行）：1文で要点。深追いさせない静かな1行。 --- */
.kt-lp-oneline {
  margin: 16px auto 6px;
  max-width: 540px;
  text-align: center;
  font-size: 14px;
  line-height: 1.85;
  color: var(--kt-ink-soft);
}
.kt-lp-oneline strong { color: var(--kt-ink); font-weight: 800; }

/* --- ⑤ 末尾の二択（控えめ）：FVの主CTAを食わない視覚重量に。 --- */
.kt-doors--quiet { margin-top: 14px; }
/* 縦長カードを薄く・小さく：副CTAであることを視覚で示す。 */
.kt-pop .kt-doors--quiet .kt-door {
  border-width: 2px;
  box-shadow: 0 4px 12px rgba(43,108,246,.05);
}
.kt-doors--quiet .kt-door { padding-top: 12px; padding-bottom: 12px; }
.kt-pop .kt-doors--quiet .kt-door-title { font-size: 15.5px; }

/* --- 学校セクションを「静かな深掘り」に：主役（FV/3ステップ）の下の補足。 --- */
.kt-pop .kt-lp-school-section--quiet {
  box-shadow: 0 8px 22px rgba(43,108,246,.06);
}