/* ================================================================== */
/* kaname_slides.css — Kaname 学習レッスンの「横スワイプ要約スライド」 */
/*   1枚1メッセージ・図解が主役・最小テキスト。横トラック＋scroll-snap。  */
/*                                                                      */
/*   ▼ ポップ化 v2（2026-06-25）：白地＋鮮やかコアの「上質なポップ」へ。  */
/*     スライドごとにアクセント色を巡回（1=青/2=コーラル/3=黄/4=ミント/  */
/*     5=ピンク…）＝nth-child で --kts-acc 系を差し替え、図枠の地・見出し */
/*     の差し色・大きな数字・進捗ドットに反映。色数は5色に絞り調和。     */
/*     見出しは極太丸ゴシック（M PLUS Rounded 1c 800）で大きく。         */
/*                                                                      */
/*   .kts スコープのみ塗る。.kt-pop 配下なので --ktp-* を参照可、         */
/*   未定義環境向けに var(.., フォールバック) で二重化。                  */
/*   reduced-motion / JS無効では .kts-nojs により最終状態で全表示。       */
/* ================================================================== */
.kts {
  --kts-bg:       var(--kt-bg, #FBFCFF);
  --kts-card:     var(--kt-card, #FFFFFF);
  --kts-ink:      var(--kt-ink, #1E2433);
  --kts-soft:     var(--kt-ink-soft, #5B6478);
  --kts-line:     var(--kt-line, #E3E9F2);
  --kts-display:  var(--kt-display, 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif);
  --kts-ease:     var(--ktp-ease, cubic-bezier(.22, .61, .36, 1));
  --kts-bounce:   var(--ktp-bounce, cubic-bezier(.34, 1.56, .64, 1));

  /* スライド1枚ごとに差し替わるアクセント（既定は青）。nth-child で巡回。 */
  --kts-acc:    var(--ktp-indigo,   #2B6CF6);  /* 主役色（見出し差し色・ドット） */
  --kts-acc-d:  var(--ktp-indigo-d, #1B52CC);  /* 濃色（数字・線・AA確保） */
  --kts-acc-bg: var(--ktp-indigo-bg,#E7EFFF);  /* ごく薄い面（図枠の地） */

  margin: 0 0 30px;
}

.kts-intro {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--kts-soft);
  margin: 0 0 14px;
}

/* ---- 横トラック（指で送れる・JS不要でも堅牢） ---- */
.kts-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  border-radius: 28px;
  background: var(--kts-card);
  box-shadow: 0 14px 36px rgba(43,108,246,.12), 0 2px 8px rgba(30,36,51,.05);
}
.kts-track::-webkit-scrollbar { display: none; }
.kts-track:focus-visible { outline: 3px solid var(--kts-acc); outline-offset: 3px; }

.kts-slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  scroll-snap-align: center;
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ================================================================== */
/* ★ スライドごとのアクセント色を巡回（5色・nth-child）。                */
/*   過剰にせず5色に絞って調和。図枠の地・見出し差し色・数字・ドットへ。  */
/* ================================================================== */
.kts-slide:nth-child(5n+1) {        /* 青（信頼・主役） */
  --kts-acc:    var(--ktp-indigo,   #2B6CF6);
  --kts-acc-d:  var(--ktp-indigo-d, #1B52CC);
  --kts-acc-bg: var(--ktp-indigo-bg,#E7EFFF);
}
.kts-slide:nth-child(5n+2) {        /* コーラル（温かい・元気） */
  --kts-acc:    var(--ktp-coral,    #FF7A59);
  --kts-acc-d:  var(--ktp-coral-d,  #D8421F);
  --kts-acc-bg: var(--ktp-coral-bg, #FFE9E2);
}
.kts-slide:nth-child(5n+3) {        /* イエロー（灯・お祝い／文字は濃色） */
  --kts-acc:    var(--ktp-sun,      #FFC53D);
  --kts-acc-d:  var(--ktp-sun-d,    #B97F00);
  --kts-acc-bg: var(--ktp-sun-bg,   #FFF4D6);
}
.kts-slide:nth-child(5n+4) {        /* ミント（整う・新鮮） */
  --kts-acc:    var(--ktp-mint,     #18C7AE);
  --kts-acc-d:  var(--ktp-mint-d,   #0E927F);
  --kts-acc-bg: var(--ktp-mint-bg,  #DEFAF3);
}
.kts-slide:nth-child(5n+5) {        /* ピンク（楽しい・SNS的） */
  --kts-acc:    var(--ktp-pink,     #FF6FB5);
  --kts-acc-d:  var(--ktp-pink-d,   #C72E80);
  --kts-acc-bg: var(--ktp-pink-bg,  #FFE6F2);
}

/* ---- 図解（主役・大きく・色付きの丸い枠に乗せる） ---- */
.kts-fig {
  position: relative;
  margin: 0 0 20px;
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 168px;
  /* ★ 強化：地tintをやや濃く＋上下グラデで奥行き。縁は太く・色影を効かせる。 */
  background:
    linear-gradient(170deg,
      color-mix(in srgb, var(--kts-acc-bg) 62%, #FFFFFF),
      var(--kts-acc-bg));
  border: 2.5px solid var(--kts-acc);
  border-radius: 24px;
  padding: 16px 14px;
  box-sizing: border-box;
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--kts-acc) 24%, transparent),
    0 2px 6px rgba(30,36,51,.06);
}
/* 図の右上に小さな装飾の色玉＝賑やかさを上品に添える（中身を邪魔しない）。 */
.kts-fig::after {
  content: "";
  position: absolute;
  top: -7px; right: -7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--kts-acc);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--kts-acc) 45%, transparent);
}
.kts-fig-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 188px;
}
.kts-ph { display: block; width: 100%; max-width: 300px; height: auto; }

/* プレースホルダSVG：スライドのアクセント色で意味を塗り直す。 */
.kts-ph-line2 {
  fill: none; stroke: var(--kts-acc); stroke-width: 3;
  stroke-linecap: round; opacity: .9;
}
.kts-ph-curve {
  fill: none; stroke: var(--kts-acc-d); stroke-width: 3.5;
  stroke-linecap: round; opacity: 1;
}
.kts-ph-dot { fill: var(--kts-acc-d); }
.kts-ph-line { stroke: var(--kts-acc); stroke-width: 2.5; opacity: .55; }
.kts-ph-water { fill: var(--kts-acc); opacity: .55; }
.kts-ph-band { fill: var(--kts-acc); opacity: .85; }
.kts-ph-fill { fill: var(--kts-acc-d); opacity: .9; }
.kts-ph-fill2 { fill: var(--kts-acc); opacity: .75; }

/* ---- テキスト（短く・極太丸ゴシック見出し） ---- */
.kts-heading {
  font-family: var(--kts-display);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--kts-ink);
  margin: 0 0 12px;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 見出しに差し色の下線（スライド色）＝賑やかさを上品に添える。★太く・色グラデ。 */
.kts-heading::after {
  content: "";
  display: block;
  width: 56px; height: 6px;
  margin: 11px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kts-acc), var(--kts-acc-d));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--kts-acc) 40%, transparent);
}

/* ★ 装飾絵文字バッジ（スライド色のピル）。1スライド1個・見出しの上に置く。 */
.kts-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kts-acc-bg) 70%, #FFFFFF);
  border: 2px solid var(--kts-acc);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--kts-acc) 28%, transparent);
}
.kts-body {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--kts-soft);
  margin: 0;
  max-width: 28em;
}
/* ★ count＝目立つ大きな色付き数字（スライド色）。グラデ文字でさらに強く。 */
.kts-count {
  font-family: var(--kts-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  display: block;
  margin: 2px 0 8px;
  letter-spacing: 0;
  color: var(--kts-acc-d);              /* フォールバック（クリップ非対応時） */
  background: linear-gradient(120deg, var(--kts-acc-d), var(--kts-acc));
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .kts-count { -webkit-text-fill-color: transparent; }
}
.kts-note {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--kts-soft);
  margin: 14px 0 0;
  opacity: .9;
}
.kts-tobody {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--kts-acc-d);
  margin: 18px 0 0;
}

/* ---- 進捗ドット（スライド色で巡回・現在が伸びるピル） ---- */
.kts-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
}
.kts-dot {
  width: 10px; height: 10px; padding: 0;
  border: none; border-radius: 999px;
  background: var(--kts-line);
  cursor: pointer;
  transition: background .4s var(--kts-ease),
              width .45s var(--kts-bounce),
              transform .35s var(--kts-bounce);
}
/* ドットごとの色＝スライド色巡回（消灯時は薄く、点灯時は鮮やか）。 */
.kts-dot:nth-child(5n+1) { --kts-dot-c: var(--ktp-indigo, #2B6CF6); }
.kts-dot:nth-child(5n+2) { --kts-dot-c: var(--ktp-coral,  #FF7A59); }
.kts-dot:nth-child(5n+3) { --kts-dot-c: var(--ktp-sun,    #FFC53D); }
.kts-dot:nth-child(5n+4) { --kts-dot-c: var(--ktp-mint,   #18C7AE); }
.kts-dot:nth-child(5n+5) { --kts-dot-c: var(--ktp-pink,   #FF6FB5); }
.kts-dot.is-done {
  background: var(--kts-dot-c, var(--kts-acc));
  opacity: .45;
}
.kts-dot.is-current {
  width: 28px;
  background: var(--kts-dot-c, var(--kts-acc));
  box-shadow:
    0 3px 10px rgba(30,36,51,.18),
    0 0 0 4px color-mix(in srgb, var(--kts-dot-c, var(--kts-acc)) 22%, transparent);
}
/* 現在ドットになった瞬間だけ気持ちよく弾む（点滅しない・一度きり）。 */
.kts:not(.kts-nojs) .kts-dot.is-current {
  animation: kts-dotpop .5s var(--kts-bounce);
}
@keyframes kts-dotpop {
  0%   { transform: scale(.8); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.kts-dot:focus-visible { outline: 2px solid var(--kts-acc-d); outline-offset: 3px; }

/* ---- 送りナビ ---- */
.kts-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
}
.kts-prev, .kts-next {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--ktp-indigo, #2B6CF6);
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(43,108,246,.30);
  transition: transform .25s var(--kts-bounce),
              box-shadow .25s var(--kts-ease),
              opacity .25s var(--kts-ease);
}
.kts-prev:hover, .kts-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(43,108,246,.36);
}
.kts-prev:active, .kts-next:active { transform: translateY(0) scale(.94); }
.kts-prev:disabled, .kts-next:disabled {
  opacity: .28; cursor: default; box-shadow: none; transform: none;
}
.kts-skip {
  flex: 1 1 auto;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--kts-soft);
  text-decoration: none;
}
.kts-skip:hover { color: var(--ktp-indigo-d, #1B52CC); }

/* ================================================================== */
/* アニメ（JS が .is-in を付けたとき・1スライド1アニメ・一度だけ）       */
/* ================================================================== */
/* スライド出現：ふわっと上がる（図→絵文字→見出し→本文が順に立ち上がる） */
.kts:not(.kts-nojs) .kts-slide .kts-fig,
.kts:not(.kts-nojs) .kts-slide .kts-emoji,
.kts:not(.kts-nojs) .kts-slide .kts-heading,
.kts:not(.kts-nojs) .kts-slide .kts-body {
  opacity: 0;
  transform: translateY(16px);
}
/* 図は少し弾んで現れ、軽く一度だけ揺れて落ち着く（上質な遊び・無限ループしない）。 */
.kts:not(.kts-nojs) .kts-slide.is-in .kts-fig {
  animation: kts-rise-fig .72s var(--kts-bounce) forwards;
}
@keyframes kts-rise-fig {
  0%   { opacity: 0; transform: translateY(20px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.012); }
  100% { opacity: 1; transform: none; }
}
/* 絵文字バッジは弾んでポンと出る（少し遅らせて主役感）。 */
.kts:not(.kts-nojs) .kts-slide.is-in .kts-emoji {
  animation: kts-emoji-pop .6s .12s var(--kts-bounce) forwards;
}
@keyframes kts-emoji-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(.4) rotate(-12deg); }
  60%  { opacity: 1; transform: translateY(0) scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}
.kts:not(.kts-nojs) .kts-slide.is-in .kts-heading {
  animation: kts-rise .6s .2s var(--kts-ease) forwards;
}
.kts:not(.kts-nojs) .kts-slide.is-in .kts-body {
  animation: kts-rise .6s .3s var(--kts-ease) forwards;
}
@keyframes kts-rise { to { opacity: 1; transform: none; } }

/* 見出しの差し色下線が、見出しに続いて横にすっと伸びる（一度だけ・上品）。 */
.kts:not(.kts-nojs) .kts-slide .kts-heading::after {
  transform: scaleX(0);
  transform-origin: center;
}
.kts:not(.kts-nojs) .kts-slide.is-in .kts-heading::after {
  animation: kts-underline .55s .42s var(--kts-ease) forwards;
}
@keyframes kts-underline { to { transform: scaleX(1); } }

/* ② 線が引かれる（draw） */
.kts-slide .kts-ph-line2,
.kts-slide .kts-ph-curve {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
}
.kts:not(.kts-nojs) .kts-slide.is-in[data-anim="draw"] .kts-ph-line2 {
  animation: kts-draw 1.1s var(--kts-ease) forwards;
}
.kts:not(.kts-nojs) .kts-slide.is-in[data-anim="draw"] .kts-ph-curve {
  animation: kts-draw 1.4s .3s var(--kts-ease) forwards;
}
.kts:not(.kts-nojs) .kts-slide.is-in[data-anim="draw"] .kts-ph-dot {
  animation: kts-pop .55s 1.5s var(--kts-bounce) forwards; opacity: 0;
}
@keyframes kts-draw { to { stroke-dashoffset: 0; } }
@keyframes kts-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

/* ④ 箱が満ちる（fill）＝下から満ちる。JS で --fill% を高さに反映 */
.kts-slide[data-anim="fill"] .kts-ph-water { transform-box: fill-box; }
.kts:not(.kts-nojs) .kts-slide[data-anim="fill"] .kts-ph-water {
  transform-origin: bottom;
  transform: scaleY(0);
}
.kts:not(.kts-nojs) .kts-slide.is-in[data-anim="fill"] .kts-ph-water {
  transition: transform 1s var(--kts-ease);
  transform: scaleY(var(--kts-fill, .5));
}

/* ⑤ 差し引きの流れ（flow）＝段階的にふわり */
.kts:not(.kts-nojs) .kts-slide[data-anim="flow"] .kts-ph-band,
.kts:not(.kts-nojs) .kts-slide[data-anim="flow"] .kts-ph-fill2 {
  opacity: 0; transform: translateY(-8px);
}
.kts:not(.kts-nojs) .kts-slide.is-in[data-anim="flow"] .kts-ph-band {
  animation: kts-flow .8s var(--kts-ease) forwards;
}
.kts:not(.kts-nojs) .kts-slide.is-in[data-anim="flow"] .kts-ph-fill2 {
  animation: kts-flow .8s .3s var(--kts-ease) forwards;
}
@keyframes kts-flow { to { opacity: 1; transform: none; } }

/* ⑥ 強調の灯し（highlight）＝一度だけすっと灯る（点滅しない） */
/*   ※ 出現アニメと両立させるため figure 自体の transform は触らない。 */

/* ③ count-up：JS が数値を 0→to へ。CSS は気持ちよく跳ねて現れる。 */
.kts:not(.kts-nojs) .kts-slide.is-in[data-anim="count"] .kts-count {
  animation: kts-countpop .7s .2s var(--kts-bounce) forwards;
}
@keyframes kts-countpop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ================================================================== */
/* フォールバック：JS無効（.kts-nojs のまま）＝最終状態で全表示          */
/* ================================================================== */
.kts.kts-nojs .kts-ph-line2,
.kts.kts-nojs .kts-ph-curve { stroke-dashoffset: 0; }
.kts.kts-nojs .kts-ph-dot { opacity: 1; }
.kts.kts-nojs .kts-fig,
.kts.kts-nojs .kts-emoji,
.kts.kts-nojs .kts-heading,
.kts.kts-nojs .kts-body { opacity: 1; transform: none; }
.kts.kts-nojs .kts-heading::after { transform: none; }

@media (max-width: 380px) {
  .kts-heading { font-size: 22px; }
  .kts-count { font-size: 34px; }
  .kts-slide { padding: 22px 18px 24px; }
}

/* ================================================================== */
/* prefers-reduced-motion: 全停止＋静止で意味が通る（最終状態を表示）     */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kts .kts-slide,
  .kts .kts-fig,
  .kts .kts-emoji,
  .kts .kts-heading,
  .kts .kts-body,
  .kts .kts-ph-line2,
  .kts .kts-ph-curve,
  .kts .kts-ph-dot,
  .kts .kts-ph-water,
  .kts .kts-ph-band,
  .kts .kts-ph-fill2,
  .kts .kts-count,
  .kts .kts-dot {
    animation: none !important;
    transition: none !important;
  }
  .kts .kts-ph-line2,
  .kts .kts-ph-curve { stroke-dashoffset: 0 !important; }
  .kts .kts-ph-dot { opacity: 1 !important; }
  .kts .kts-ph-water { transform: scaleY(var(--kts-fill, .5)) !important; }
  .kts .kts-ph-band,
  .kts .kts-ph-fill2 { opacity: 1 !important; transform: none !important; }
  .kts .kts-fig,
  .kts .kts-emoji,
  .kts .kts-heading,
  .kts .kts-body,
  .kts .kts-count { opacity: 1 !important; transform: none !important; }
  .kts .kts-heading::after { animation: none !important; transform: none !important; }
  .kts .kts-track { scroll-behavior: auto !important; }
}