/* ================================================================== */
/* kaname_learn.css — Kaname「学んで整える」学習UI                 */
/*   無料カリキュラム（M1家計/M2税/M3投資/M4心理）のハブ＋レッスン。    */
/*   kaname.css の変数（--kt-*）を継承し、.ktl の中だけを塗る。        */
/*   世界観: 明朝×余白×静か。アニメは上質で禅・過剰でない。            */
/*   prefers-reduced-motion を尊重（末尾でモーションを無効化）。         */
/* ================================================================== */

/* kaname.css が読まれない経路でも壊れないよう、変数の保険を持つ。 */
.ktl {
  --ktl-bg:     var(--kt-bg, #F6F3EC);
  --ktl-card:   var(--kt-card, #FFFFFF);
  --ktl-ink:    var(--kt-ink, #2E2A24);
  --ktl-soft:   var(--kt-ink-soft, #6E685E);
  --ktl-line:   var(--kt-line, #E7E1D5);
  --ktl-accent: var(--kt-accent, #3A5A82);
  --ktl-accent-d: var(--kt-accent-d, #2E4A6B);
  --ktl-accent-bg: var(--kt-accent-bg, #EAEEF4);
  --ktl-serif: var(--kt-serif, 'Shippori Mincho', 'Noto Serif JP', serif);
  --ktl-sans:  var(--kt-sans, 'Noto Sans JP', sans-serif);
  --ktl-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ================================================================== */
/* 出現アニメ（上質・ゆっくり・前に出すぎない）                         */
/*   JS が .is-in を付けると、ふわりと浮かび上がる。順番に少し遅らせる。 */
/* ================================================================== */
.ktl .ktl-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ktl-ease), transform .9s var(--ktl-ease);
  will-change: opacity, transform;
}
.ktl .ktl-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* JS 無効でも内容は必ず見える（フォールバック・no-jsクラスで即表示） */
.ktl.ktl-nojs .ktl-reveal { opacity: 1; transform: none; }

/* ================================================================== */
/* 学習ハブ                                                            */
/* ================================================================== */
.ktl-hero {
  font-size: 30px;
  margin: 6px 0 18px;
}
.ktl-hub .kt-lead { margin-bottom: 24px; }

/* 進捗の帯 */
.ktl-progress {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--ktl-line);
  border-bottom: 1px solid var(--ktl-line);
  padding: 12px 2px;
  margin: 0 0 28px;
}
.ktl-progress-label {
  font-family: var(--ktl-serif);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ktl-accent-d);
}
.ktl-progress-count {
  font-family: var(--ktl-serif);
  font-size: 15px;
  color: var(--ktl-ink);
  letter-spacing: .06em;
}

/* 学びの道：縦の一筋に沿って講座が並ぶ。線が「伸びる」。 */
.ktl-path {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  position: relative;
}
/* 道の縦線（背景＝薄い罫） */
.ktl-path::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--ktl-line);
  border-radius: 2px;
}
/* 道の縦線（進んだぶん＝藍が上から下へ引かれる） */
.ktl-path::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--ktl-accent), var(--ktl-accent-d));
  height: 0;
  transition: height 1.4s var(--ktl-ease);
}
.ktl-path.is-drawn::after { height: var(--ktl-draw, 0px); }

.ktl-node {
  position: relative;
  padding-left: 38px;
  margin: 0 0 16px;
}
.ktl-node:last-child { margin-bottom: 0; }

/* 道の上の点（節）。読み終えた講座は藍で満ちる。 */
.ktl-node-dot {
  position: absolute;
  left: 6px;
  top: 22px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ktl-bg);
  border: 2px solid var(--ktl-line);
  box-sizing: border-box;
  transition: border-color .6s var(--ktl-ease), background .6s var(--ktl-ease), box-shadow .6s var(--ktl-ease);
}
.ktl-node.is-done .ktl-node-dot {
  background: var(--ktl-accent);
  border-color: var(--ktl-accent);
  box-shadow: 0 0 0 4px var(--ktl-accent-bg);
}

/* 講座カード */
.ktl-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ktl-card);
  border: 1px solid var(--ktl-line);
  border-radius: 16px;
  box-shadow: var(--kt-shadow, 0 1px 24px rgba(70,62,48,.08));
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ktl-ink);
  transition: transform .35s var(--ktl-ease), border-color .35s var(--ktl-ease), box-shadow .35s var(--ktl-ease);
}
.ktl-card:hover {
  border-color: var(--ktl-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(46,74,107,.14);
}
.ktl-card-no {
  font-family: var(--ktl-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ktl-accent);
  letter-spacing: .04em;
  flex: 0 0 auto;
  min-width: 34px;
  opacity: .85;
}
.ktl-card-main { flex: 1 1 auto; min-width: 0; }
.ktl-card-title {
  display: block;
  font-family: var(--ktl-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ktl-ink);
}
.ktl-card-sub {
  display: block;
  font-size: 12.5px;
  color: var(--ktl-soft);
  margin: 3px 0 8px;
  line-height: 1.6;
}
.ktl-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ktl-min {
  font-size: 11.5px;
  color: var(--ktl-soft);
  letter-spacing: .06em;
}
.ktl-state {
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--ktl-accent-d);
  border: 1px solid var(--ktl-line);
  border-radius: 999px;
  padding: 2px 12px;
}
.ktl-state--done {
  color: var(--ktl-soft);
  border-color: var(--ktl-line);
}
.ktl-card-go {
  flex: 0 0 auto;
  color: var(--ktl-accent);
  font-size: 18px;
  opacity: .6;
  transition: transform .35s var(--ktl-ease), opacity .35s var(--ktl-ease);
}
.ktl-card:hover .ktl-card-go { transform: translateX(3px); opacity: 1; }

/* ================================================================== */
/* お金の学校ハブ（6本柱）                                             */
/*   開いた瞬間「網羅的なお金の学校」。各柱に章・レッスン一覧・サムネ。 */
/* ================================================================== */
.ktl-school .kt-lead { margin-bottom: 22px; }

/* この学校について（網羅と、やさしさの宣言） */
.ktl-school-intro {
  background: var(--kt-bg-soft, #FBF9F4);
  border: 1px solid var(--ktl-line);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 26px;
}
.ktl-school-intro-k {
  font-size: 11.5px; letter-spacing: .14em;
  color: var(--ktl-accent-d); margin: 0 0 8px;
}
.ktl-school-intro-b {
  font-size: 13.5px; line-height: 1.95; color: var(--ktl-soft); margin: 0;
}

/* 6本柱の道：縦の一筋に沿って柱が並ぶ（道が伸びる気配を CSS で常設）。 */
.ktl-pillars {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  position: relative;
}
.ktl-pillars::before {
  content: "";
  position: absolute;
  left: 19px; top: 26px; bottom: 26px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(var(--ktl-accent), var(--kt-gold, #B89B6A));
  opacity: .35;
}

.ktl-pillar {
  position: relative;
  padding: 0 0 0 50px;
  margin: 0 0 26px;
}
.ktl-pillar:last-child { margin-bottom: 0; }

/* 柱の節＝象徴の一文字（整/貯/稼/増/守/使）。 */
.ktl-pillar-dot {
  position: absolute;
  left: 0; top: 4px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ktl-serif);
  font-size: 19px;
  color: var(--ktl-accent-d);
  background: var(--ktl-card);
  border: 2px solid var(--ktl-line);
  box-sizing: border-box;
  z-index: 1;
}
.ktl-pillar.is-done .ktl-pillar-dot {
  color: #FFFDF7;
  background: var(--ktl-accent);
  border-color: var(--ktl-accent);
  box-shadow: 0 0 0 4px var(--ktl-accent-bg);
}

.ktl-pillar-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 8px;
}
.ktl-pillar-no {
  font-family: var(--ktl-serif);
  font-size: 13px; color: var(--ktl-soft);
  letter-spacing: .1em; flex: 0 0 auto;
}
.ktl-pillar-titles { flex: 1 1 auto; min-width: 0; }
.ktl-pillar-title {
  display: block;
  font-family: var(--ktl-serif);
  font-size: 20px; font-weight: 600; color: var(--ktl-ink);
  line-height: 1.4;
}
.ktl-pillar-sub {
  display: block;
  font-size: 12px; color: var(--ktl-soft); margin-top: 2px;
}
.ktl-pillar-thumb {
  flex: 0 0 auto; width: 44px; height: 44px;
  opacity: .9;
}
.ktl-pillar-thumb img { width: 100%; height: 100%; object-fit: contain; }

.ktl-pillar-lead {
  font-size: 13px; line-height: 1.85; color: var(--ktl-soft);
  margin: 0 0 12px;
}
.ktl-pillar-meta {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
}
.ktl-pillar-count {
  font-size: 11.5px; letter-spacing: .08em;
  color: var(--ktl-accent-d);
  border: 1px solid var(--ktl-line);
  border-radius: 999px; padding: 2px 12px;
}
.ktl-pillar-progress {
  font-size: 11px; color: var(--ktl-soft); letter-spacing: .06em;
}

/* 柱内のレッスン一覧（折りたたまず全部見せる＝網羅感） */
.ktl-lesson-list { list-style: none; padding: 0; margin: 0; }
.ktl-lesson-row { margin: 0 0 8px; }
.ktl-lesson-row:last-child { margin-bottom: 0; }
.ktl-lesson-link {
  display: flex; align-items: center; gap: 12px;
  background: var(--ktl-card);
  border: 1px solid var(--ktl-line);
  border-radius: 13px;
  padding: 12px 14px;
  text-decoration: none; color: var(--ktl-ink);
  transition: transform .3s var(--ktl-ease), border-color .3s var(--ktl-ease), box-shadow .3s var(--ktl-ease);
}
.ktl-lesson-link:hover {
  border-color: var(--ktl-accent);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(46,74,107,.12);
}
.ktl-lesson-row.is-done .ktl-lesson-link { background: var(--kt-bg-soft, #FBF9F4); }
.ktl-lesson-no {
  flex: 0 0 auto;
  font-family: var(--ktl-serif);
  font-size: 12px; color: var(--ktl-accent); letter-spacing: .04em;
  min-width: 34px;
}
.ktl-lesson-main { flex: 1 1 auto; min-width: 0; }
.ktl-lesson-title {
  display: block; font-size: 14.5px; font-weight: 500;
  color: var(--ktl-ink); line-height: 1.45;
}
.ktl-lesson-sub {
  display: block; font-size: 11.5px; color: var(--ktl-soft);
  margin-top: 2px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ktl-lesson-tail {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.ktl-lesson-min { font-size: 11px; color: var(--ktl-soft); letter-spacing: .04em; }
.ktl-tag {
  font-size: 10px; letter-spacing: .08em;
  border-radius: 999px; padding: 1px 9px;
}
.ktl-tag--ready { color: var(--ktl-accent-d); background: var(--ktl-accent-bg); }
.ktl-tag--soon { color: var(--ktl-soft); border: 1px solid var(--ktl-line); }

/* ================================================================== */
/* レッスン画面                                                        */
/* ================================================================== */
.ktl-lessonbar {
  margin: 0 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ktl-crumb {
  font-family: var(--ktl-serif);
  font-size: 12px; letter-spacing: .1em; color: var(--ktl-accent-d);
}

/* 要点プレビュー（本文準備中の正直な一言） */
.ktl-preview-soon {
  font-size: 12px; line-height: 1.8; color: var(--ktl-soft);
  text-align: center; margin: 4px 0 22px;
}

/* この柱の、ほかのレッスン（横の回遊） */
.ktl-inpillar {
  border-top: 1px solid var(--ktl-line);
  padding-top: 22px; margin: 8px 0 22px;
}
.ktl-inpillar-label {
  font-size: 11.5px; letter-spacing: .12em; color: var(--ktl-accent-d);
  margin: 0 0 12px;
}
.ktl-inpillar-list { list-style: none; padding: 0; margin: 0; }
.ktl-inpillar-list li { margin: 0 0 8px; }
.ktl-inpillar-list a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ktl-ink);
  padding: 10px 12px;
  border: 1px solid var(--ktl-line); border-radius: 12px;
  background: var(--ktl-card);
  transition: border-color .3s var(--ktl-ease), transform .3s var(--ktl-ease);
}
.ktl-inpillar-list a:hover { border-color: var(--ktl-accent); transform: translateX(2px); }
.ktl-inpillar-list .is-done a { background: var(--kt-bg-soft, #FBF9F4); }
.ktl-inpillar-no {
  font-family: var(--ktl-serif); font-size: 11px;
  color: var(--ktl-accent); min-width: 32px;
}
.ktl-inpillar-title { flex: 1 1 auto; font-size: 13.5px; }
.ktl-inpillar-go { color: var(--ktl-accent); opacity: .6; }

.ktl-back {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ktl-soft);
  text-decoration: none;
}
.ktl-back:hover { color: var(--ktl-accent-d); }

/* 進捗の点（道の縮図） */
.ktl-lesson-progress {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 0 0 22px;
}
.ktl-pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ktl-line);
  transition: background .5s var(--ktl-ease), transform .5s var(--ktl-ease);
}
.ktl-pdot.is-done { background: var(--ktl-accent); opacity: .55; }
.ktl-pdot.is-current {
  background: var(--ktl-accent);
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(46,74,107,.4);
}

.ktl-lesson-title {
  font-size: 26px;
  margin: 4px 0 8px;
}
.ktl-lesson-sub {
  text-align: center;
  font-family: var(--ktl-serif);
  font-size: 14px;
  color: var(--ktl-soft);
  margin: 0 0 6px;
  letter-spacing: .04em;
}
/* 見出し直下のサブタイトル（<p>）は1行切り詰めせず、折り返して全文を見せる。
   上方の .ktl-lesson-sub（nowrap/ellipsis）は一覧行の <span> 用で、
   390px幅でレッスン見出し下の長いサブタイトルが「…」で見切れていた（2026-07-03 QA根治）。 */
p.ktl-lesson-sub {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.ktl-lesson-min {
  text-align: center;
  font-size: 11.5px;
  color: var(--ktl-soft);
  letter-spacing: .08em;
  margin: 0 0 26px;
}

/* ヒーロー挿絵（リード直下・手描き風フラット。図解=因果説明とは別担当＝世界観/情緒）。 */
.ktl-illus {
  margin: 4px 0 22px;
}
.ktl-illus-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(40, 40, 60, .08);
}

/* 図解の置き場 */
.ktl-figure {
  margin: 0 0 30px;
}
.ktl-figure-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
/* プレースホルダ枠（art 差し込み前） */
.ktl-figure-ph {
  background: var(--kt-bg-soft, #FBF9F4);
  border: 1px solid var(--ktl-line);
  border-radius: 16px;
  padding: 22px 20px 16px;
  text-align: center;
}
.ktl-ph-svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 8px;
}
.ktl-ph-line, .ktl-ph-curve {
  fill: none;
  stroke: var(--ktl-accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .55;
}
.ktl-ph-curve { stroke: var(--ktl-accent-d); opacity: .7; }
.ktl-ph-dot { fill: var(--ktl-accent-d); }
.ktl-figure-ph-cap {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ktl-soft);
  margin: 0;
}

/* 線が「引かれる」アニメ（JS が .is-in を付けたとき）。 */
.ktl-figure .ktl-ph-line,
.ktl-figure .ktl-ph-curve {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
}
.ktl-figure.is-in .ktl-ph-line { animation: ktl-draw 1.1s var(--ktl-ease) forwards; }
.ktl-figure.is-in .ktl-ph-curve { animation: ktl-draw 1.4s .3s var(--ktl-ease) forwards; }
.ktl-figure.is-in .ktl-ph-dot { animation: ktl-pop .5s 1.5s var(--ktl-ease) forwards; opacity: 0; }
@keyframes ktl-draw { to { stroke-dashoffset: 0; } }
@keyframes ktl-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* ================================================================== */
/* 本文の図解が「画面に入ったら段階的に出る」（diagram/compare/steps）  */
/*   親 .ktl-reveal に JS が .is-in を付けるのを合図に、中身が順に立つ。 */
/*   JS参照クラスは増やさない（CSSの子セレクタのみ・追加だけ）。       */
/*   点滅・無限ループはしない。reduced-motion / no-js では即・最終状態。 */
/* ================================================================== */

/* 図解（diagram）：箱が現れたあと、中の図がふわっと＋ごく軽いズームで立つ。 */
.ktl .ktl-diagram .ktl-diagram-svg {
  opacity: 0;
  transform: scale(.965);
  transform-origin: center;
  transition: opacity .7s var(--ktl-ease), transform .8s var(--ktl-ease);
  transition-delay: .12s;
  will-change: opacity, transform;
}
.ktl .ktl-diagram.is-in .ktl-diagram-svg { opacity: 1; transform: none; }
.ktl .ktl-diagram .ktl-diagram-cap {
  opacity: 0;
  transition: opacity .6s var(--ktl-ease);
  transition-delay: .5s;
}
.ktl .ktl-diagram.is-in .ktl-diagram-cap { opacity: 1; }

/* 対比カード（compare）：左→（⇄）→右 の順に滑り込んで「見比べ」が伝わる。 */
.ktl .ktl-compare .ktl-compare-cell,
.ktl .ktl-compare .ktl-compare-vs {
  opacity: 0;
  transition: opacity .6s var(--ktl-ease), transform .6s var(--ktl-ease);
  will-change: opacity, transform;
}
.ktl .ktl-compare .ktl-compare-cell:first-child { transform: translateX(-16px); }
.ktl .ktl-compare .ktl-compare-cell--alt { transform: translateX(16px); }
.ktl .ktl-compare .ktl-compare-vs { transform: scale(.5); }
.ktl .ktl-compare.is-in .ktl-compare-cell:first-child { opacity: 1; transform: none; transition-delay: .08s; }
.ktl .ktl-compare.is-in .ktl-compare-vs { opacity: .85; transform: none; transition-delay: .32s; transition-timing-function: cubic-bezier(.34,1.56,.64,1); }
.ktl .ktl-compare.is-in .ktl-compare-cell--alt { opacity: 1; transform: none; transition-delay: .42s; }

/* 手順（steps）：丸番号が順に「立ち」、本文が続いて灯る（番号→本文の対）。 */
.ktl .ktl-steps .ktl-step-no {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .5s var(--ktl-ease),
              transform .5s cubic-bezier(.34,1.56,.64,1);
  will-change: opacity, transform;
}
.ktl .ktl-steps .ktl-step-body {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ktl-ease), transform .5s var(--ktl-ease);
}
.ktl .ktl-steps.is-in .ktl-step-no,
.ktl .ktl-steps.is-in .ktl-step-body { opacity: 1; transform: none; }
/* 各ステップを順番に（番号が先・本文が一拍おくれて）。上限内の段階差。 */
.ktl .ktl-steps.is-in .ktl-step:nth-child(1) .ktl-step-no { transition-delay: .06s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(2) .ktl-step-no { transition-delay: .18s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(3) .ktl-step-no { transition-delay: .30s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(4) .ktl-step-no { transition-delay: .42s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(5) .ktl-step-no { transition-delay: .54s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(n+6) .ktl-step-no { transition-delay: .60s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(1) .ktl-step-body { transition-delay: .14s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(2) .ktl-step-body { transition-delay: .26s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(3) .ktl-step-body { transition-delay: .38s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(4) .ktl-step-body { transition-delay: .50s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(5) .ktl-step-body { transition-delay: .62s; }
.ktl .ktl-steps.is-in .ktl-step:nth-child(n+6) .ktl-step-body { transition-delay: .68s; }

/* JS無効（no-js）：段階出現は使わず最終状態で表示（内容が必ず見える）。 */
.ktl.ktl-nojs .ktl-diagram-svg,
.ktl.ktl-nojs .ktl-diagram-cap,
.ktl.ktl-nojs .ktl-compare-cell,
.ktl.ktl-nojs .ktl-compare-vs,
.ktl.ktl-nojs .ktl-step-no,
.ktl.ktl-nojs .ktl-step-body { opacity: 1 !important; transform: none !important; }

/* 本文 */
.ktl-body { margin: 0 0 8px; }
.ktl-lead {
  font-family: var(--ktl-serif);
  font-size: 19px;
  line-height: 1.95;
  color: var(--ktl-ink);
  margin: 0 0 18px;
  letter-spacing: .02em;
}
.ktl-para {
  font-size: 14.5px;
  line-height: 2.05;
  color: var(--ktl-soft);
  margin: 0 0 24px;
}
.ktl-fignote {
  background: var(--ktl-accent-bg);
  border-left: 3px solid var(--ktl-accent);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 0 0 24px;
}
.ktl-fignote-label {
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--ktl-accent-d);
  margin: 0 0 6px;
}
.ktl-fignote-body {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ktl-accent-d);
  margin: 0;
}
.ktl-points {
  background: var(--kt-bg-soft, #FBF9F4);
  border: 1px solid var(--ktl-line);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 26px;
}
.ktl-points-label {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ktl-accent-d);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.ktl-points-label::before {
  content: ""; width: 18px; height: 1px; background: var(--ktl-accent);
}
.ktl-points ul { list-style: none; padding: 0; margin: 0; }
.ktl-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ktl-ink);
  padding: 6px 0;
}
.ktl-points li .kt-dot { margin-top: 8px; }
.ktl-closing {
  font-family: var(--ktl-serif);
  font-size: 16px;
  line-height: 1.95;
  text-align: center;
  color: var(--ktl-ink);
  margin: 6px 0 26px;
  letter-spacing: .04em;
}

.ktl-done-note {
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ktl-soft);
  margin: 0 0 16px;
}
.ktl-next { margin: 0 0 22px; }

@media (max-width: 380px) {
  .ktl-hero { font-size: 26px; }
  .ktl-lesson-title { font-size: 23px; }
  .ktl-lead { font-size: 17px; }
}

/* ================================================================== */
/* 「くわしく読む」折りたたみ（文字の壁を畳む・深い価値は残す）         */
/*   既定は畳む → クリックで開く。高さは grid-rows で滑らかに開閉。     */
/* ================================================================== */
.ktl-more {
  margin: 0 0 26px;
  border: 1px solid var(--ktl-line);
  border-radius: 14px;
  background: var(--kt-bg-soft, #FBF9F4);
  overflow: hidden;
}
.ktl-more-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  user-select: none;
}
.ktl-more-sum::-webkit-details-marker { display: none; }
.ktl-more-label {
  font-family: var(--ktl-serif);
  font-size: 13.5px;
  letter-spacing: .1em;
  color: var(--ktl-accent-d);
}
.ktl-more-mark {
  position: relative;
  width: 13px; height: 13px;
  flex: 0 0 auto;
}
.ktl-more-mark::before,
.ktl-more-mark::after {
  content: "";
  position: absolute;
  background: var(--ktl-accent);
  border-radius: 2px;
  transition: transform .35s var(--ktl-ease), opacity .35s var(--ktl-ease);
}
.ktl-more-mark::before { left: 0; top: 5.5px; width: 13px; height: 2px; }   /* 横棒 */
.ktl-more-mark::after  { left: 5.5px; top: 0; width: 2px; height: 13px; }   /* 縦棒（＋→－） */
.ktl-more[open] .ktl-more-mark::after { transform: scaleY(0); opacity: 0; }
/* 本文ぶんの開閉は grid-template-rows で滑らかに（details の中身を包む） */
.ktl-more-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ktl-ease);
}
.ktl-more-body > * { min-height: 0; overflow: hidden; }
.ktl-more[open] .ktl-more-body { grid-template-rows: 1fr; }
.ktl-more-body .ktl-para {
  margin: 0;
  padding: 0 18px;
}
.ktl-more-body .ktl-para:first-child { padding-top: 2px; }
.ktl-more-body .ktl-para:last-child { padding-bottom: 18px; }
/* details が開いた直後の中身は出現アニメ不要（高さtransitionに任せる） */

/* ================================================================== */
/* 本文に差し込む図解（既存 SVG art を活用）                            */
/* ================================================================== */
.ktl-diagram {
  margin: 0 0 26px;
  background: var(--ktl-card);
  border: 1px solid var(--ktl-line);
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: var(--kt-shadow, 0 1px 24px rgba(70,62,48,.08));
}
.ktl-diagram-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.ktl-diagram-cap {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ktl-soft);
  text-align: center;
  margin: 10px 0 2px;
  line-height: 1.7;
}

/* ================================================================== */
/* 対比カード（2項目を左右で見比べる）                                  */
/* ================================================================== */
.ktl-compare { margin: 0 0 26px; }
.ktl-compare-label {
  font-size: 12px; letter-spacing: .12em;
  color: var(--ktl-accent-d); margin: 0 0 12px;
}
.ktl-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 8px;
}
.ktl-compare-cell {
  background: var(--kt-bg-soft, #FBF9F4);
  border: 1px solid var(--ktl-line);
  border-radius: 14px;
  padding: 14px 13px;
  min-width: 0;
}
.ktl-compare-cell--alt {
  background: var(--ktl-accent-bg);
  border-color: #CDD8E6;
}
.ktl-compare-t {
  font-family: var(--ktl-serif);
  font-size: 14.5px; font-weight: 600;
  color: var(--ktl-ink);
  margin: 0 0 6px; line-height: 1.5;
}
.ktl-compare-cell--alt .ktl-compare-t { color: var(--ktl-accent-d); }
.ktl-compare-b {
  font-size: 12.5px; line-height: 1.8;
  color: var(--ktl-soft); margin: 0;
}
.ktl-compare-vs {
  align-self: center;
  font-size: 15px;
  color: var(--ktl-accent);
  opacity: .7;
}

/* ================================================================== */
/* 手順（番号付き・丸数字）                                             */
/* ================================================================== */
.ktl-steps { margin: 0 0 26px; }
.ktl-steps-label {
  font-size: 12px; letter-spacing: .12em;
  color: var(--ktl-accent-d); margin: 0 0 12px;
}
.ktl-steps-list { list-style: none; padding: 0; margin: 0; }
.ktl-step {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ktl-line);
}
.ktl-step:last-child { border-bottom: 0; }
.ktl-step-no {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ktl-serif);
  font-size: 13px; font-weight: 600;
  color: #FFFDF7;
  background: var(--ktl-accent);
  box-shadow: 0 0 0 4px var(--ktl-accent-bg);
}
.ktl-step-body {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; line-height: 1.8;
  color: var(--ktl-ink);
  padding-top: 2px;
}

/* ================================================================== */
/* 数字のカウントアップ（本文・要点の金額や数字に・やりすぎない）       */
/* ================================================================== */
.kt-count {
  font-family: var(--ktl-serif);
  font-weight: 600;
  color: var(--ktl-accent-d);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* ================================================================== */
/* 「今日の小さな一歩」アクションカード（明朝＋和トーン・上品に）       */
/* ================================================================== */
.ktl-action {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--ktl-card);
  border: 1px solid #CDD8E6;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 6px 0 26px;
  box-shadow: var(--kt-shadow, 0 1px 24px rgba(70,62,48,.08));
  position: relative;
}
.ktl-action::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--ktl-accent), var(--kt-gold, #B89B6A));
}
.ktl-action-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #FFFDF7;
  background: var(--ktl-accent);
  box-shadow: 0 0 0 4px var(--ktl-accent-bg);
}
.ktl-action-main { flex: 1 1 auto; min-width: 0; }
.ktl-action-k {
  font-size: 11.5px; letter-spacing: .14em;
  color: var(--ktl-accent-d);
  margin: 2px 0 6px;
}
.ktl-action-body {
  font-family: var(--ktl-serif);
  font-size: 15.5px; line-height: 1.85;
  color: var(--ktl-ink);
  margin: 0; letter-spacing: .02em;
}

@media (max-width: 380px) {
  .ktl-action-body { font-size: 14.5px; }
  .ktl-compare-grid { gap: 6px; }
  .ktl-compare-cell { padding: 12px 10px; }
}

/* ================================================================== */
/* prefers-reduced-motion: 動きを止める（出現も線引きも即・静かに）     */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ktl-more-body,
  .ktl-more-mark::before,
  .ktl-more-mark::after { transition: none !important; }
  .ktl .ktl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ktl-path::after { transition: none !important; }
  .ktl-card, .ktl-card-go, .ktl-node-dot, .ktl-pdot { transition: none !important; }
  .ktl-figure .ktl-ph-line,
  .ktl-figure .ktl-ph-curve { stroke-dashoffset: 0 !important; animation: none !important; }
  .ktl-figure .ktl-ph-dot { opacity: 1 !important; animation: none !important; }
  /* 本文図解の段階出現も全停止＝即・最終状態で意味が通る。 */
  .ktl .ktl-diagram-svg,
  .ktl .ktl-diagram-cap,
  .ktl .ktl-compare-cell,
  .ktl .ktl-compare-vs,
  .ktl .ktl-steps .ktl-step-no,
  .ktl .ktl-steps .ktl-step-body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================================== */
/* ★ ポップ層（.kt-pop の中だけ）                                       */
/*   確立済み「上質ポップ」へレッスン本文を統一。kaname_pop.css の    */
/*   --ktp-* を使う。Michi/非popルートには無干渉。会員ページの本文      */
/*   (_kaname_sections.html の .ktl-*) もここで自動的に揃う。         */
/*   可読性・落ち着きは保ちつつ、明るく楽しく・安っぽくしない。        */
/* ================================================================== */

/* レッスン画面の --ktl-* をポップ配色へ寄せる（accent=信頼の青）。 */
.kt-pop.ktl,
.kt-pop .ktl {
  --ktl-accent:    var(--ktp-indigo);
  --ktl-accent-d:  var(--ktp-indigo-d);
  --ktl-accent-bg: var(--ktp-indigo-bg);
  --ktl-line:      #E3EBFA;
}

/* 柱色トークン（--kc=メイン, --kcb=薄面, --kcd=文字用の濃色）を、レッスン画面へ注入。
   2026-07-03 配色案2 次波：kaname_hub.css の data-pillar="p0".."p5" 注入と同一パターン
   （--kcd は AA 4.5:1 未達の柱＝整える/稼ぐ のみ -text 変種。テンプレ側は data-pillar を
   注入するだけ・色の定義値はこのファイルと kaname.css の --kt-p-* トークンのみで完結）。 */
.kt-pop .ktl[data-pillar="p0"] { --kc: var(--kt-p-totonoeru); --kcb: var(--kt-p-totonoeru-bg); --kcd: var(--kt-p-totonoeru-text); }
.kt-pop .ktl[data-pillar="p1"] { --kc: var(--kt-p-tameru);   --kcb: var(--kt-p-tameru-bg);   --kcd: var(--kt-p-tameru); }
.kt-pop .ktl[data-pillar="p2"] { --kc: var(--kt-p-kasegu);   --kcb: var(--kt-p-kasegu-bg);   --kcd: var(--kt-p-kasegu-text); }
.kt-pop .ktl[data-pillar="p3"] { --kc: var(--kt-p-fuyasu);   --kcb: var(--kt-p-fuyasu-bg);   --kcd: var(--kt-p-fuyasu); }
.kt-pop .ktl[data-pillar="p4"] { --kc: var(--kt-p-mamoru);   --kcb: var(--kt-p-mamoru-bg);   --kcd: var(--kt-p-mamoru); }
.kt-pop .ktl[data-pillar="p5"] { --kc: var(--kt-p-tsukau);   --kcb: var(--kt-p-tsukau-bg);   --kcd: var(--kt-p-tsukau); }

/* ---- 見出し：丸ゴシック極太・大きめ・楽しく ---- */
.kt-pop .ktl-hero { font-family: var(--kt-display); font-weight: 800; }
.kt-pop .ktl-lesson-title {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.32;
  color: var(--ktp-ink);
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media (max-width: 380px) { .kt-pop .ktl-lesson-title { font-size: 26px; } }
.kt-pop .ktl-lesson-sub {
  font-family: var(--kt-display);
  font-weight: 700;
  color: var(--ktp-coral-d);
}
.kt-pop .ktl-crumb { font-family: var(--kt-display); font-weight: 700; color: var(--kcd, var(--ktp-indigo)); }
.kt-pop .kt-result-kicker { font-family: var(--kt-display); font-weight: 800; }

/* ---- リード文：少し太く・読みやすく ---- */
.kt-pop .ktl-lead {
  font-family: var(--kt-display);
  font-weight: 700;
  color: var(--ktp-ink);
  font-size: 19px;
  line-height: 1.85;
}
.kt-pop .ktl-para { color: var(--ktp-ink-soft); }
/* 本文中の強調はマーカー風ハイライト（黄）に。 */
.kt-pop .ktl-lead strong,
.kt-pop .ktl-para strong {
  color: var(--ktp-ink);
  font-weight: 800;
  background: linear-gradient(transparent 62%, rgba(255,197,61,.55) 0);
  padding: 0 1px;
}

/* ---- 進捗の点：柱色（2026-07-03 配色案2 次波・現在地=柱色濃いめ / 済=柱色を薄め透過） ---- */
.kt-pop .ktl-pdot.is-current { background: var(--kc, var(--ktp-coral)); box-shadow: 0 0 0 4px var(--kcb, var(--ktp-coral-bg)); }
.kt-pop .ktl-pdot.is-done { background: var(--kc, var(--ktp-mint)); opacity: .8; }

/* ---- 図解枠：薄tint＋色縁＋色付き影でチャンキーに（SVGは色替え済） ---- */
.kt-pop .ktl-figure-svg { border-radius: 18px; }
.kt-pop .ktl-figure-ph {
  background: var(--ktp-indigo-bg);
  border: 2px solid #CFE0FF;
  border-radius: 24px;
}
.kt-pop .ktl-ph-line, .kt-pop .ktl-ph-curve { stroke: var(--ktp-indigo); }
.kt-pop .ktl-ph-dot { fill: var(--ktp-coral); }
.kt-pop .ktl-diagram {
  background: var(--ktp-indigo-bg);
  border: 2px solid #CFE0FF;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(43,108,246,.10);
}
.kt-pop .ktl-diagram-svg { border-radius: 16px; background: #FFFFFF; }
.kt-pop .ktl-diagram-cap { color: var(--ktp-ink-soft); }

/* ---- 図の読み方メモ：コーラルの面＋太い色縁 ---- */
.kt-pop .ktl-fignote {
  background: var(--ktp-coral-bg);
  border-left: 4px solid var(--ktp-coral);
  border-radius: 0 18px 18px 0;
}
.kt-pop .ktl-fignote-label { color: var(--ktp-coral-d); font-family: var(--kt-display); font-weight: 800; }
.kt-pop .ktl-fignote-body { color: var(--ktp-coral-d); }

/* ---- 要点カード：白地・太縁・色付き影・丸ゴシックの見出し ---- */
.kt-pop .ktl-points {
  background: #FFFFFF;
  border: 2px solid var(--ktl-line);
  box-shadow: 0 12px 30px rgba(43,108,246,.10);
}
.kt-pop .ktl-points-label {
  font-family: var(--kt-display);
  font-weight: 800;
  color: var(--ktp-indigo-d);
}
.kt-pop .ktl-points-label::before {
  width: 22px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ktp-coral), var(--ktp-sun));
}
.kt-pop .ktl-points li .kt-dot { background: var(--ktp-coral); box-shadow: 0 0 0 3px var(--ktp-coral-bg); }
.kt-pop .ktl-points li { color: var(--ktp-ink); }

/* ---- 「くわしく読む」折りたたみ：ぽってり・青のしるし ---- */
.kt-pop .ktl-more {
  background: var(--ktp-indigo-bg);
  border: 2px solid #CFE0FF;
  border-radius: 22px;
}
/* キッカー類は役割トークン --kt-kicker（配色案1/2・2026-07-03。CTA青との役割分離） */
.kt-pop .ktl-more-label { font-family: var(--kt-display); font-weight: 800; color: var(--kt-kicker, #A64B35); }
.kt-pop .ktl-more-mark::before,
.kt-pop .ktl-more-mark::after { background: var(--ktp-indigo); }

/* ---- 対比カード：左右で色違い（コーラル⇄ミント）・チャンキー ---- */
.kt-pop .ktl-compare-label { font-family: var(--kt-display); font-weight: 800; color: var(--kt-kicker, #A64B35); }
.kt-pop .ktl-compare-cell {
  background: var(--ktp-coral-bg);
  border: 2px solid #FFD3C6;
  border-radius: 20px;
}
.kt-pop .ktl-compare-cell .ktl-compare-t { font-family: var(--kt-display); font-weight: 800; color: var(--ktp-coral-d); }
.kt-pop .ktl-compare-cell--alt {
  background: var(--ktp-mint-bg);
  border-color: #B4ECE0;
}
.kt-pop .ktl-compare-cell--alt .ktl-compare-t { color: var(--ktp-mint-d); }
.kt-pop .ktl-compare-vs {
  font-weight: 800;
  color: var(--ktp-indigo);
  opacity: 1;
}

/* ---- 手順：丸番号を色付きで（青→コーラル→ミントで循環） ---- */
.kt-pop .ktl-steps-label { font-family: var(--kt-display); font-weight: 800; color: var(--kt-kicker, #A64B35); }
.kt-pop .ktl-step { border-bottom-color: var(--ktl-line); }
.kt-pop .ktl-step-no {
  font-family: var(--kt-display);
  font-weight: 800;
  color: #FFFFFF;
  background: var(--ktp-indigo);
  box-shadow: 0 0 0 4px var(--ktp-indigo-bg);
}
.kt-pop .ktl-step:nth-child(3n+2) .ktl-step-no { background: var(--ktp-coral); box-shadow: 0 0 0 4px var(--ktp-coral-bg); }
.kt-pop .ktl-step:nth-child(3n) .ktl-step-no { background: var(--ktp-mint); box-shadow: 0 0 0 4px var(--ktp-mint-bg); color: #04332C; }
.kt-pop .ktl-step-body { color: var(--ktp-ink); }

/* ---- 「今日の小さな一歩」アクションカード：明るいミントの地・楽しく ---- */
.kt-pop .ktl-action {
  background: var(--ktp-mint-bg);
  border: 2px solid #B4ECE0;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(24,199,174,.14);
}
.kt-pop .ktl-action::before {
  background: linear-gradient(var(--ktp-mint), var(--ktp-sun));
  width: 4px;
}
.kt-pop .ktl-action-icon {
  background: var(--ktp-mint);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px #FFFFFF;
}
.kt-pop .ktl-action-k { font-family: var(--kt-display); font-weight: 800; color: var(--ktp-mint-d); }
.kt-pop .ktl-action-body { font-family: var(--kt-display); font-weight: 700; color: var(--ktp-ink); }

/* ---- closing 一文（会員ページ本文の閉じ）：丸ゴシックで明るく ---- */
.kt-pop .ktl-closing { font-family: var(--kt-display); font-weight: 700; color: var(--ktp-ink); }

/* ---- ワーク（会員ページ）：白地・太縁・丸ゴシック ---- */
.kt-pop .kt-work {
  border-radius: 22px;
}
.kt-pop .kt-work-label { font-family: var(--kt-display); font-weight: 800; color: var(--kt-kicker, #A64B35); }

/* ---- この柱のほかのレッスン / 次へ：丸ゴシックの見出し ---- */
.kt-pop .ktl-inpillar-label { font-family: var(--kt-display); font-weight: 800; color: var(--kt-kicker, #A64B35); }
.kt-pop .ktl-inpillar-list a { border: 2px solid var(--ktl-line); border-radius: 16px; }
.kt-pop .ktl-inpillar-list a:hover { background: var(--ktp-indigo-bg); }
.kt-pop .ktl-inpillar-no { font-family: var(--kt-display); font-weight: 800; color: var(--ktp-indigo); }
.kt-pop .ktl-inpillar-go { color: var(--ktp-coral); opacity: 1; }
.kt-pop .ktl-done-note { color: var(--kcd, var(--ktp-mint-d)); font-weight: 700; }

/* ============================================================
   次の一歩（行き止まりゼロ）— レッスン末の道しるべ
   既存トークン（--kt-* / --ktp-*）を再利用。CSSは追記のみ。
   ============================================================ */
.ktl-nextstep {
  margin: 40px 0 8px;
  padding: 24px 20px 26px;
  border: 1px solid var(--ktl-line);
  border-radius: 20px;
  background: var(--kt-bg, #FFFFFF);
}
.ktl-nextstep-kicker {
  margin: 0 0 4px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--kt-ink-soft, #6B6357);
}
.ktl-nextstep-here {
  margin: 0 0 16px;
  font-size: .9rem;
  color: var(--kt-ink-soft, #6B6357);
}
/* 柱名バッジ（2026-07-03 配色案2 次波）：--kc未定義時は従来どおり地色に溶け込む素のテキスト。
   地は白（--kcbで塗ると柱=稼ぐでAA機械検査4.47:1と僅かに届かないため、文字色のみ柱色にして
   縁取りで柱色を示す＝全柱でAA 4.47〜6.83:1を確保）。 */
.ktl-nextstep-pillar {
  font-weight: 700;
  color: var(--kcd, inherit);
  background: var(--kt-bg, #FCFCFA);
  border: 1px solid var(--kc, transparent);
  padding: .1em .55em;
  border-radius: 999px;
}
.ktl-nextstep-pos { font-weight: 800; }
.ktl-nextstep-of { font-weight: 700; opacity: .9; }
.ktl-nextstep-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ktl-nextstep-card a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border: 1px solid var(--ktl-line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background: var(--kt-bg, #FFFFFF);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ktl-nextstep-card a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(40, 36, 28, .08);
}
.ktl-nextstep-ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  border-radius: 14px;
  background: var(--kt-bg-soft, #F2F6FF);
}
.ktl-nextstep-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ktl-nextstep-lead {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--kt-ink-soft, #6B6357);
}
.ktl-nextstep-name {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--kt-ink, #2B2620);
}
.ktl-nextstep-desc {
  font-size: .86rem;
  color: var(--kt-ink-soft, #6B6357);
}
.ktl-nextstep-go {
  flex: 0 0 auto;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--kt-accent, #2E6FB7);
}

/* ---- ポップ配色（白地＋チャンキー縁・各カードに色のアクセント） ---- */
.kt-pop .ktl-nextstep {
  border: 2px solid var(--ktl-line);
  border-radius: 24px;
}
.kt-pop .ktl-nextstep-kicker { font-family: var(--kt-display); font-weight: 800; color: var(--kt-kicker, #A64B35); }
.kt-pop .ktl-nextstep-here { color: var(--ktp-ink-soft); }
.kt-pop .ktl-nextstep-name { font-family: var(--kt-display); color: var(--ktp-ink); }
.kt-pop .ktl-nextstep-card a { border: 2px solid var(--ktl-line); border-radius: 18px; }

.kt-pop .ktl-nextstep-card--lesson a:hover { border-color: var(--ktp-indigo); background: var(--ktp-indigo-bg); }
.kt-pop .ktl-nextstep-card--lesson .ktl-nextstep-ico { background: var(--ktp-indigo-bg); }
.kt-pop .ktl-nextstep-card--lesson .ktl-nextstep-go { color: var(--ktp-indigo); }

.kt-pop .ktl-nextstep-card--tools a:hover { border-color: var(--ktp-mint); background: var(--ktp-mint-bg); }
.kt-pop .ktl-nextstep-card--tools .ktl-nextstep-ico { background: var(--ktp-mint-bg); }
.kt-pop .ktl-nextstep-card--tools .ktl-nextstep-go { color: var(--ktp-mint-d); }

.kt-pop .ktl-nextstep-card--sheet a:hover { border-color: var(--ktp-coral); background: var(--ktp-coral-bg); }
.kt-pop .ktl-nextstep-card--sheet .ktl-nextstep-ico { background: var(--ktp-coral-bg); }
.kt-pop .ktl-nextstep-card--sheet .ktl-nextstep-go { color: var(--ktp-coral); }

/* ================================================================== */
/* 2026-07-03 QA: メールロック内の価値交換カード（kt_email.css の .kt-ec）は
   幅が min(92vw,520px) と vw 基準のため、入れ子の .ktl-emaillock-form
   （kt-inner の内側・約305px）を突き抜けて右が画面外に見切れていた。
   ロック内ではコンテナ幅に従わせる（レイアウトで根治・文字サイズは不変）。 */
/* ================================================================== */
.ktl-emaillock-form .kt-ec,
.ktl-emaillock-form .kt-ec-card,
.ktl-emaillock-form .kt-ec-input,
.ktl-emaillock-form .kt-ec-submit {
  width: 100%;
  max-width: 100%;
}
.ktl-emaillock-form .kt-ec-lead,
.ktl-emaillock-form .kt-ec-perks,
.ktl-emaillock-form .kt-ec-form {
  max-width: 100%;
}

/* ================================================================== */
/* 2026-07-05 PC最適化QA: レッスンの「動画教材」<figure>（poster付き・     */
/* kaname_learn_lesson.html 直書きstyle）は display:flex;flex-direction:   */
/* column のみで align-items が無く、固定幅の<video>（width:560px）が     */
/* 左詰めのまま器の右へはみ出していた（列幅が480pxのモバイルでは          */
/* max-width:92vwで隠れて目立たないが、列が広がるPCでは黒枠帯に見えたり   */
/* 中央からズレて見える）。動画を含む figure だけを中央寄せする           */
/* （他の図解figure=ktl-diagram/ktl-figure/ktl-illusは別クラスを持つため  */
/* 無干渉。テンプレ本体・モバイル側は変更しない＝768px以上でだけ効かせる）。*/
/* ================================================================== */
@media (min-width: 768px) {
  .ktl-lesson figure.ktl-reveal:has(video) {
    align-items: center;
  }
}