/* ローカルフォント */
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/Zen_Maru_Gothic/ZenMaruGothic-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/Zen_Maru_Gothic/ZenMaruGothic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/Zen_Maru_Gothic/ZenMaruGothic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/Zen_Maru_Gothic/ZenMaruGothic-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ベーシックリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: auto;
}
body {
  background-color: #e1f8e9;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  position: relative;
  overflow-x: hidden;
}

/* ========== Background Decoration ========== */
.bk-cube {
  position: fixed;
  top: 0;
  right: 0;
  width: 60%;
  height: auto;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
}

/* ========== Header ========== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: transparent;
  text-align: center;
  padding: 0;
  overflow: visible;
}

.header-title {
  background: transparent;
  text-align: left;
  padding: 0;
  color: #333333;
  width: 100%;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0;
}

.header-title h1 {
  font-size: 13px;
  margin: 0 0 2px 0;
  padding: 0;
  display: flex;
  align-items: center;
  color: #333333;
}

.h1-green {
  color: #57b38a;
}

.header-left {
  display: flex;
  align-items: flex-start;
  overflow: visible;
  padding-top: 6px;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 4px;
  margin-left: 10px;
}

.header-logo {
  display: block;
  width: 120px;
  height: auto;
  margin-top: 2px;
}

.header-chara {
  height: 74px;
  width: auto;
  display: block;
  margin-left: -10px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.header-btn {
  display: inline-block;
  padding: 8px 20px;
  color: white;
  text-decoration: none;
  font-size: 13px;
  height: auto;
  line-height: 16px;
  margin: 18px 20px 0;
  border-radius: 20px;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}

.header-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #57b38a;
  border-radius: inherit;
  z-index: -1;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.3s ease;
}

.header-btn:hover::before {
  transform: scale(1.15);
  background-color: #38a577;
}

@media screen and (min-width: 1024px) {
  .sp_br { display: none; }
}

@media (max-width: 767px) {
  .bk-cube {
    width: 90%;
  }
  header {
    background-color: transparent;
  }
  .header-title {
    height: 70px;
  }
  .header-title h1 {
    margin: 0 0 2px 0;
    font-size: 11px;
  }
  .header-chara {
    margin-left: -8px;
    height: 62px;
  }
  .header-logo {
    width: 90px;
  }
  .header-btn {
    margin: 8px 10px;
    padding: 6px 14px;
    font-size: 12px;
  }
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

/* スマホ用 */
@media (max-width: 767px) {
  body {
    padding-bottom: 120px;
  }
}

/* スライドショー全体 */
.slideshow {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
  margin-top: 80px;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 767px) {
  .slideshow {
    height: calc(100vh - 70px);
    margin-top: 70px;
  }
}
/* 各スライド */
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 1;
  justify-content: center;
  align-items: center;
  /* PC: 上下に余白、左右は最小限（ナビ矢印はカード端に重なるデザイン） */
  padding: 20px 20px 175px;
  box-sizing: border-box;
}
.slide.active {
  display: flex;
  opacity: 1;
  z-index: 2;
}

/* スマホ */
@media (max-width: 767px) {
  .slide {
    /* カード下端を画面下から80pxに設定 */
    padding: 0 0 80px 0;
    align-items: flex-start;
    overflow: hidden;
  }
}

/* ========== スライドカード（共通入れ物） ========== */
.slide-card {
  /*
   * PC: 最大 1200×900px、4:3比率を維持
   * 幅 = min( 最大幅1200px, 利用可能幅100%, 利用可能高さ×(4/3) )
   * 利用可能高さ = 100vh - ヘッダー80px - 上padding20px - 下padding175px = 100vh - 275px
   */
  width: min(1000px, 100%, calc((100vh - 275px) * 4 / 3));
  aspect-ratio: 4 / 3;
  background-color: #f0f8f6;
  border: 3px solid #57b38a;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  container-type: inline-size;
}

/* ========== イラストエリア共通 ========== */
@keyframes illustFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes illustFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.slide-illust {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2%;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.illust-item {
  height: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0;
}

/* アクティブスライドのとき再生 */
.slide.active .illust-item--1 {
  animation: illustFadeUp 0.5s ease 0.1s forwards;
}
.slide.active .illust-item--2 {
  animation:
    illustFadeUp 0.5s ease 0.3s forwards,
    illustFloat 4s ease-in-out 1.0s infinite;
}
/* スライド1サイドイラスト専用キーフレーム（translateを維持したままフェードイン） */
@keyframes illustFadeUp-s1-left {
  from { opacity: 0; transform: translate(80%, calc(-70% - 20px)); }
  to   { opacity: 1; transform: translate(40%, calc(-100% - 36px)); }
}
@keyframes illustFadeUp-s1-right {
  from { opacity: 0; transform: translate(-80%, calc(-60% + 16px)); }
  to   { opacity: 1; transform: translate(-30%, -120%); }
}

/* スライド1のillust-item--2・3はカスタムアニメーションで位置を保持 */
.slide.active[data-index="0"] .illust-item--2 {
  animation: illustFadeUp-s1-left 0.5s ease 0.3s forwards;
}
.slide.active[data-index="0"] .illust-item--3 {
  animation: illustFadeUp-s1-right 0.5s ease 0.3s forwards;
}
.slide.active .illust-item--3 {
  animation:
    illustFadeUp 0.5s ease 0.5s forwards,
    illustFloat 4s ease-in-out 1.2s infinite;
}

/* PC/SP 表示切り替え */
@media (max-width: 767px) { .pc-only { display: none; } }
@media (min-width: 768px) { .sp-only { display: none; } }

/* ========== スライド1：イラスト固有設定（PC） ========== */
.slide01-illust {
  align-items: flex-end;
  gap: 2%;
  max-height: 55%;
}

/* イラスト全体を少し上に移動 */
.slide01-illust.pc-only {
  transform: translateY(-18px);
}

/* 両サイドのサブイラスト（slide01_02・slide01_03）サイズ設定：吹き出しの文字サイズを揃えるため同じ高さに統一 */
.slide01-illust .illust-item--2,
.slide01-illust .illust-item--3 {
  height: 45%;
  position: relative;
  z-index: 2;
}


/* 中央イラストはサイドの下に */
.slide01-illust .illust-item--1 {
  position: relative;
  z-index: 1;
}


/* スライド1：ラッパー（吹き出しをカード上にはみ出させるため） */
.slide01-outer {
  position: relative;
  width: min(1000px, 100%, calc((100vh - 275px) * 4 / 3));
  flex-shrink: 0;
}

.slide01-outer .slide-card {
  width: 100%;
}

/* スライド1：吹き出し（PC用・slide01-outer内） */
.fukidashi-slide01 {
  position: absolute;
  top: -18px;
  left: -6px;
  width: 28%;
  pointer-events: none;
  z-index: 10;
}

/* スライド1：吹き出し（スマホ専用・slideshow外） */
.fukidashi-slide01-sp {
  display: none;
}

/* ========== スライド1：コンテンツ ========== */
.slide01-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6% 3% 4%;
  box-sizing: border-box;
}

.titel-slide01 {
  width: 55%;
  max-width: 420px;
}

/* picture要素：全画面共通でコンテナ幅いっぱいに取り中央寄せ */
.slide01-content picture {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (max-width: 767px) {
  .titel-slide01 {
    width: 72%;
    max-width: none;
    margin-top: 24px;
  }
}

@media (min-width: 768px) {
  .titel-slide01 {
    width: 40%;
    max-width: 320px;
  }
}

.slide01-text {
  width: 100%;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
}

/* PCでは非表示、スマホのみ改行 */
.br-sp {
  display: none;
}

@media (max-width: 767px) {
  .br-sp {
    display: block;
  }
}

.slide01-text-sub {
  font-size: clamp(11px, 1.6cqw, 16px);
  color: #1a1a1a;
  margin: 0 0 0.8em;
  line-height: 1.7;
}

.slide01-text-main {
  font-size: clamp(16px, 2.4cqw, 26px);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0;
}

/* 傍点（音声の上の赤い点） */
.sesame {
  color: #f44831;
  ruby-position: over;
}

.sesame rt {
  color: #f44831;
  font-size: 0.4em;
  line-height: 1;
  margin-bottom: 0.15em;
}

.underline-red {
  text-decoration: underline;
  text-decoration-color: #f44831;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* スマホ：ラッパーをスライド全域に */
@media (max-width: 767px) {
  .slide01-outer {
    width: 100%;
    height: 100%;
  }

  /* コンテンツと進捗バーの間にスペースを確保（ナビ矢印との重なり回避） */
  .slide01-content {
    justify-content: flex-start;
    padding-bottom: 90px;
    gap: 2vw;
  }

  /* PC用吹き出しをスマホで非表示 */
  .fukidashi-slide01 {
    display: none;
  }

  /* スマホでは吹き出しを非表示 */
  .fukidashi-slide01-sp {
    display: none;
  }

  .underline-red {
    text-underline-offset: 3px;
  }

  /* スライド1：スマホは専用1枚画像・縦に広げず上つき */
  .slide01-illust.sp-only {
    flex: none;
    min-height: 0;
    max-height: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .slide01-illust.sp-only .illust-item--1 {
    width: auto;
    max-width: 95%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* 説明文もイラスト直下へ上つき */
  .slide01-text {
    flex: none;
    margin-top: 1vw;
  }
}

/* スマホ：全幅・画面高さいっぱい、ラインなし */
@media (max-width: 767px) {
  header {
    border-bottom: 2px solid #57b38a;
    z-index: 150;
  }
  .slide-card {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    overflow-y: auto;
  }
}

/* オーバーレイ共通スタイル */
.overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.overlay-seq {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* 追加：左から右へスライドするオーバーレイ用 */
.overlay-seq.slide-in-left {
  transform: translateX(-20px);
}
/* 追加：右から左へスライドするオーバーレイ用 */
.overlay-seq.slide-in-right {
  transform: translateX(20px);
}
/* スライド1のオーバーレイ画像は常に表示 */
.slide.active[data-index="0"] .overlay-seq {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* ========== 左右サイド矢印ボタン ========== */
.nav-arrow {
  position: fixed;
  /* スライドエリア（ヘッダー80px 〜 ボタン上端162px）の縦中央 */
  top: calc(50vh - 41px);
  transform: translateY(-50%);
  width: clamp(40px, 5vw, 72px);
  height: clamp(40px, 5vw, 72px);
  border-radius: 50%;
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: none;
  padding: 0;
  overflow: visible;
}
.nav-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #93e8bb;
  border: 1.5px solid #000;
  transform: scale(1);
  transition: transform 0.3s ease;
  z-index: 0;
}
.nav-arrow:hover::before {
  transform: scale(1.25);
}
.nav-arrow img {
  width: 75%;
  height: 75%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.nav-arrow:hover {
  transform: translateY(-50%);
}
.nav-arrow.is-hidden {
  display: none;
}
.nav-arrow.is-disabled {
  pointer-events: none;
  cursor: default;
}
.nav-arrow.is-disabled::before {
  background-color: #cccccc;
  border-color: #aaaaaa;
}
.nav-arrow.is-disabled img {
  filter: grayscale(1) opacity(0.45);
}
.nav-arrow--prev { left: 20px; }
.nav-arrow--next { right: 20px; }

/* ========== 下部ナビゲーション ========== */
.bottom-nav {
  position: fixed;
  bottom: 112px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 32px;
  z-index: 500;
}
.bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 28px;
  border: 1.5px solid #000;
  border-radius: 999px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, height 0.2s ease, width 0.2s ease, margin 0.2s ease;
}
.bottom-btn--primary {
  background-color: #93e8bb;
  color: #333;
  width: 140px;
  justify-content: center;
}
.bottom-btn--primary:hover {
  background-color: #6fd4a3;
  width: 164px;
  height: 60px;
  margin: -5px -12px;
}
.bottom-btn--pause {
  width: 140px;
  background-color: #93e8bb;
  color: #333;
}
.bottom-btn--pause:hover {
  background-color: #6fd4a3;
  width: 164px;
  height: 60px;
  margin: -5px -12px;
}
.bottom-btn.is-hidden {
  display: none;
}

/* 音声ON/OFFボタン */
.bottom-btn--audio {
  width: 50px;
  padding: 0;
  font-size: 22px;
  background-color: #93e8bb;
  color: #333;
  flex-shrink: 0;
}
.bottom-btn--audio img {
  width: 26px;
  height: 26px;
  display: block;
  pointer-events: none;
}
.bottom-btn--audio:hover {
  background-color: #6fd4a3;
  width: 60px;
  height: 60px;
  margin: -5px -5px;
}
.bottom-btn--audio.is-muted {
  background-color: #e8e8e8;
  border-color: #aaa;
}
.bottom-btn--audio.is-muted:hover {
  background-color: #d4d4d4;
}

/* 速度コントロール */
.speed-control {
  display: flex;
  align-items: center;
  gap: 4px;
}
.speed-control.is-hidden {
  display: none;
}
.speed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 11px;
  border: 1.5px solid #aaa;
  border-radius: 999px;
  background: #fff;
  color: #666;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.speed-btn.is-active {
  background-color: #4a9e6e;
  border-color: #4a9e6e;
  color: #fff;
}
.speed-btn:hover:not(.is-active) {
  background-color: #f0f0f0;
  border-color: #666;
  color: #333;
}

@media (max-width: 767px) {
  /* ナビ矢印：進捗バー上部にセンター配置 */
  .nav-arrow {
    width: clamp(32px, 8vw, 50px);
    height: clamp(32px, 8vw, 50px);
    font-size: 20px;
    top: auto;
    bottom: 120px; /* 進捗バー(bottom:88px + height:8px)の上に24pxの余白 */
    transform: none;
  }
  /* prev: 中心から左へ（ボタン幅 + 8px gap分） */
  .nav-arrow--prev {
    left: calc(50% - clamp(32px, 8vw, 50px) - 8px);
    right: auto;
  }
  /* next: 中心から右へ（8px gap分） */
  .nav-arrow--next {
    left: calc(50% + 8px);
    right: auto;
  }

  /* スマホではホバー無効 */
  .nav-arrow:hover::before {
    transform: scale(1);
  }
  .nav-arrow:hover {
    transform: none;
  }

  /* タップ時のフィードバック */
  .nav-arrow:active::before {
    background-color: #6fd4a3;
    transform: scale(0.9);
    transition: transform 0.1s ease, background-color 0.1s ease;
  }

  /* 下部ナビゲーション */
  .bottom-nav {
    bottom: 8px;
    gap: 8px;
    width: calc(100% - 16px); /* 左右8pxずつ余白 */
    left: 8px;
    right: 8px;
    transform: none; /* translateX(-50%)を上書き */
  }
  .bottom-btn {
    font-size: 12px;
    padding: 0 8px;
    height: 44px;
    flex: 1;        /* 3ボタンでも均等に幅を分け合う */
    width: auto;    /* 固定幅を解除 */
    min-width: 0;
    /* スマホではhoverアクションを無効化 */
    transition: background-color 0.1s ease;
  }
  .bottom-btn--primary:hover,
  .bottom-btn--pause:hover {
    width: auto;
    height: 44px;
    margin: 0;
    background-color: #93e8bb;
  }
  .bottom-btn--primary:active,
  .bottom-btn--pause:active {
    background-color: #6fd4a3;
    transform: scale(0.95);
    transition: transform 0.1s ease, background-color 0.1s ease;
  }

  .bottom-btn--pause {
    width: 120px;
  }

  /* 速度コントロール：ヘッダー右側に配置 */
  .speed-control {
    position: fixed;
    top: 20px;
    right: 52px;
    z-index: 250;
    gap: 4px;
  }
  .speed-btn {
    font-size: 10px;
    height: 30px;
    padding: 0 6px;
    min-width: 34px;
  }

  /* 音声ボタン：ヘッダー右端に配置 */
  .bottom-btn--audio {
    position: fixed;
    top: 17px;
    right: 8px;
    z-index: 250;
    flex: none;
    width: 36px;
    height: 36px;
    font-size: 16px;
    padding: 0;
  }
  .bottom-btn--audio:hover {
    width: 36px;
    height: 36px;
    margin: 0;
    background-color: #93e8bb;
  }
  .bottom-btn--audio:active {
    background-color: #6fd4a3;
    transform: scale(0.95);
  }
}

/* 進捗バー */
.progress-bar-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 12px;
  background: #ffffff;
  border-radius: 6px;
  overflow: visible;
  z-index: 10;
}
.progress-bar {
  width: 0;
  height: 100%;
  background: #57b38a;
  border-radius: 6px;
  transition: width 0.5s ease;
}
#progressDots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#progressDots .progress-dot {
  pointer-events: auto;
  cursor: pointer;
}
.progress-dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: #57b38a;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  z-index: 2;
}
.progress-dot.is-passed {
  background-color: #57b38a;
}
.progress-dot.is-current {
  background-color: #57b38a;
  width: 14px;
  height: 14px;
}
.progress-dot.is-edge {
  display: none;
}
@keyframes poyoyon {
  0%   { transform: translateX(-50%) scaleX(1)    scaleY(1); }
  10%  { transform: translateX(-50%) scaleX(1.14) scaleY(0.80); }
  25%  { transform: translateX(-50%) scaleX(0.90) scaleY(1.14); }
  40%  { transform: translateX(-50%) scaleX(1.07) scaleY(0.93); }
  55%  { transform: translateX(-50%) scaleX(0.96) scaleY(1.05); }
  70%  { transform: translateX(-50%) scaleX(1.02) scaleY(0.98); }
  85%  { transform: translateX(-50%) scaleX(0.99) scaleY(1.01); }
  100% { transform: translateX(-50%) scaleX(1)    scaleY(1); }
}

#progressCharacter {
  position: absolute;
  bottom: 100%;
  width: 120px;
  height: auto;
  transform-origin: bottom center;
  animation: poyoyon 2.6s ease-in-out infinite;
  transition: left 0.5s ease;
}
#progressCharacter img { width: 100%; height: auto; }
@media (max-width: 767px) {
  .progress-bar-container {
    /* カード下端(80px) + 内側余白(8px) = 88px */
    bottom: 88px;
    width: calc(100% - 32px);
    height: 8px;
  }
  #progressCharacter {
    display: none;
  }
  .progress-dot {
    width: 7px;
    height: 7px;
  }
  .progress-dot.is-current {
    width: 10px;
    height: 10px;
  }
}

/* 浮遊アニメーション（他要素用） */
@keyframes floatUpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.float-animation {
  animation: floatUpDown 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* 吹き出し：カタカタ振動アニメーション（5秒静止→カタカタ→静止ループ） */
@keyframes fukidashiKatakata {
  0%,  70%  { transform: translate(0, 0) rotate(0deg); }
  71%        { transform: translate(-3px,  1px) rotate(-0.6deg); }
  72%        { transform: translate( 3px, -1px) rotate( 0.6deg); }
  73%        { transform: translate(-3px,  1px) rotate(-0.5deg); }
  74%        { transform: translate( 2px, -1px) rotate( 0.5deg); }
  75%        { transform: translate(-3px,  0px) rotate(-0.4deg); }
  76%        { transform: translate( 3px,  1px) rotate( 0.4deg); }
  77%        { transform: translate(-2px, -1px) rotate(-0.3deg); }
  78%        { transform: translate( 2px,  0px) rotate( 0.3deg); }
  79%        { transform: translate(-2px,  1px) rotate(-0.2deg); }
  80%        { transform: translate( 1px,  0px) rotate( 0.1deg); }
  81%        { transform: translate(-1px,  0px) rotate(-0.1deg); }
  82%, 100%  { transform: translate(0, 0) rotate(0deg); }
}

.fukidashi-slide01,
.fukidashi-slide01-sp {
  animation: fukidashiKatakata 7s linear infinite;
}

/* 点滅アニメーション */
@keyframes slowBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.blink-animation {
  animation: slowBlink 3s ease-in-out infinite;
}

/* -------------------------------
   アンケートボタン
------------------------------- */
.questionnaire-btn {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.questionnaire-btn a {
  background: #64866c;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 400px;
  padding: 15px 60px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 100%;
  line-height: 1.8;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: 0.3s ease-in-out;
}
.questionnaire-btn a:hover:after {
  right: 1.4rem;
}
.questionnaire-btn a:hover {
  background: #ffcc02;
  color: #000;
  transform: translateY(-5px);
}

/* -------------------------------
   ホームボタン
------------------------------- */
.home-btn {
  position: absolute;
  top: 88%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.home-btn a {
  color: #64866c;
  text-decoration: none;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s ease-in-out;
}
.home-btn a:hover {
  color: #ffcc02;
  transform: translateY(-2px);
}

/* スマホ用調整 */
@media (max-width: 767px) {
  .questionnaire-btn {
    position: fixed;
    top: auto !important;
    bottom: 25%!important; /* ナビゲーションボタンとの重複を避けるため位置を調整 */
    left: 50%;
    transform: translateX(-50%);
  }
  .questionnaire-btn a {
    width: 120px;
    height: 120px;
    padding: 0;
    border-radius: 50%;
    font-size: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: none;
  }
  
  .home-btn {
    position: fixed;
    top: auto !important;
    bottom: 18%!important; /* ナビゲーションボタンとの重複を避けるため位置を調整 */
    left: 50%;
    transform: translateX(-50%);
  }
  .home-btn a {
    color: #64866c;
    text-decoration: none;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s ease-in-out;
  }
  .home-btn a:hover {
    color: #ffcc02;
    transform: translateY(-2px);
  }
}

/* タブレット用調整 */
@media (min-width: 768px) and (max-width: 1024px) {
  .questionnaire-btn {
    top: 70%;
  }
  .home-btn {
    top: 85%;
  }
}

/* 小さいPC画面用調整 */
@media (min-width: 1025px) and (max-width: 1200px) {
  .questionnaire-btn {
    top: 72%;
  }
  .home-btn {
    top: 87%;
  }
}

/* ========== スライド2 ========== */
.slide02-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* タイトルヘッダー行 */
.slide-title-header {
  display: flex;
  align-items: flex-start;
  padding: 0 6% 0 3%;
  gap: 0;
  flex-shrink: 0;
}

/* アイコン右側：タイトル＋破線をまとめるカラム */
.slide-title-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 4cqw 0 2cqw;
  margin-left: 1cqw;
}

/* アイコン */
.slide-title-icon {
  flex-shrink: 0;
  width: clamp(50px, 13cqw, 130px);
  height: clamp(50px, 13cqw, 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5cqw 0 1cqw -1.5cqw;
  overflow: hidden;
}

/* タイトルアイコン内の画像は親サイズに収める（クラス漏れ防止） */
.slide-title-icon img,
.icon-girl,
.icon-woman,
.icon-employee,
.icon-company {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

/* タイトルテキスト */
.slide-title-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 3.4cqw, 34px);
  color: #57b38a;
  line-height: 1.3;
  margin: 0;
}

/* タイトル内の小さいテキスト（例：ブレスト・アウェアネスの上行） */
.slide-title-text--sub {
  font-size: 0.7em;
  display: block;
  line-height: 1.2;
  margin-bottom: 0.1em;
}

/* サブタイトル */
.slide-title-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 2.4cqw, 24px);
  color: #333;
  line-height: 1.4;
  margin: 0.6cqw 0 0 0;
}

/* 破線セパレーター */
.slide-title-divider {
  width: 100%;
  margin: 1.6cqw 0 0 0;
  border: none;
  border-top: 3px dashed #57b38a;
  flex-shrink: 0;
}

/* コンテンツエリア */
.slide02-body {
  flex: 1;
  min-height: 0;
  padding: 0 4% 4%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ============================================
   スライド2：グラフレイアウト
   ============================================ */

/* 白い角丸ボックス（グラフ全体を囲む）：横幅いっぱいに表示 */
.slide02-graph-box {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  background: #fff;
  border-radius: 16px;
  padding: 3% 3% 3%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* slide02_02.svg：グラフの上に重ねて表示するバッジ（JSでfetchしてインライン展開） */
.slide02-badge-img {
  position: absolute;
  top: 4%;
  right: 4%;
  width: 20%;
  aspect-ratio: 1 / 1;
  z-index: 2;
  overflow: visible;
}

.slide02-badge-img svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ボックス表示 */
.slide02-graph-box.is-box-visible {
  opacity: 1;
}

/* グラフエリア */
.slide02-chart-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide02-chart-wrap svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* スライド2：SVGレイヤーのアニメーションは各SVGファイル内（slide02_01.svg / slide02_02.svg）の
   <style> に記述済み。 */

/* スマホ調整 */
@media (max-width: 767px) {
  .slide-title-icon {
    width: clamp(52px, 14vw, 72px);
    height: clamp(52px, 14vw, 72px);
    margin: 10px 0 8px 8px;
  }
  .slide-title-right {
    margin-left: 8px;
    padding: 25px 0 8px;
  }
  .slide-title-text {
    font-size: clamp(16px, 4.5vw, 24px);
  }
  .slide-title-sub {
    font-size: clamp(12px, 3.5vw, 18px);
    margin: 4px 0 0 0;
  }
  /* 点線をアイコン下まで左に伸ばす（PCは変更なし） */
  .slide-title-divider {
    --title-icon-w: clamp(52px, 14vw, 72px);
    --title-icon-gap: 8px;
    width: calc(100% + var(--title-icon-w) + var(--title-icon-gap));
    margin: 14px 0 0 calc(-1 * (var(--title-icon-w) + var(--title-icon-gap)));
  }
  .slide02-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4% 3%;
    overflow: auto;
  }

  /* SP：グラフ幅いっぱい・縦はコンテンツ高さに合わせる（伸ばさない） */
  .slide02-graph-box {
    width: 100%;
    flex: none;
    height: auto;
    padding: 3% 2%;
  }

  .slide02-chart-wrap {
    height: auto;
  }

  .slide02-chart-wrap svg {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .slide02-badge-img {
    width: 18%;
    top: 3%;
    right: 3%;
  }

  .slide-image-note {
    width: 94%;
    font-size: clamp(8px, 2.4vw, 11px);
    margin-top: clamp(10px, 3vw, 18px);
  }
}

/* ============================================
   スライド3：健康リスクレイアウト
   ============================================ */

/* --- メインラッパー（3カラムを上寄せ） --- */
.slide03-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
}

/* --- 3カラムボディ --- */
.slide03-body {
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0 2%;
  gap: 0.5%;
  overflow: visible;
  box-sizing: border-box;
}

/* --- リスト共通 --- */
.slide03-list {
  flex: 0 0 27%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(6px, 1.4cqw, 20px);
}

/* 左リスト：内側に寄せる */
.slide03-list--left {
  padding-left: 4%;
}

/* --- センターカラム --- */
.slide03-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

/* --- 白い円 --- */
.slide03-white-circle {
  position: relative;
  width: min(430px, 90%);
  aspect-ratio: 1;
  background-color: #fff;
  border-radius: 50%;
  overflow: visible;
}

/* --- 女性イラスト --- */
.slide03-woman {
  position: absolute;
  width: 65%;
  height: 92%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  z-index: 2;
  animation: s3FloatChar 3.5s ease-in-out infinite;
}

@keyframes s3FloatChar {
  0%, 100% { transform: translate(-50%, -50%); }
  50%       { transform: translate(-50%, calc(-50% - 8px)); }
}

/* --- バッジ円 --- */
.s3-circle {
  position: absolute;
  width: clamp(80px, 13cqw, 148px);
  z-index: 3;
  opacity: 0;
}
.s3-circle svg,
.s3-circle img {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* 低体重（青）：左上 */
.s3-circle--taitai {
  top: -2%;
  left: -2%;
}

/* 低栄養（緑）：右下 */
.s3-circle--eiyo {
  bottom: -2%;
  right: -4%;
}

/* --- バッジ背景レイヤーの回転アニメーション --- */
@keyframes rotateCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* #b の回転アニメーションは各SVGファイル内で定義 */

/* --- リストアイテム --- */
.s3-item {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
}
.s3-item-row {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8cqw, 10px);
}
.list-mark {
  width: clamp(20px, 2.8cqw, 32px);
  height: auto;
  flex-shrink: 0;
}
.s3-item-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(12px, 1.9cqw, 22px);
  font-weight: 700;
  color: #333;
  line-height: 1.2;
}
.s3-item-text--bold {
  font-weight: 900;
}
.s3-sub-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(10px, 1.3cqw, 15px);
  font-weight: 400;
  color: #555;
  line-height: 1.45;
  margin-top: 2px;
  padding-left: calc(clamp(20px, 2.8cqw, 32px) + clamp(4px, 0.8cqw, 10px));
}

/* --- リード見出し：音声21秒・29秒・36秒でフェーズ切替 --- */
.slide03-lead-wrap {
  position: relative;
  width: 100%;
  /* 短文〜「10年後…」の2行まで確保（重ね表示のため高さが必要） */
  min-height: clamp(2.8em, 12cqw, 5.5em);
}

.slide03-lead-title--phase1 {
  transition: opacity 0.45s ease;
}

.slide03-lead-title--phase2,
.slide03-lead-title--phase3,
.slide03-lead-title--phase4 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.slide03-lead-wrap.is-phase-2 .slide03-lead-title--phase1 {
  opacity: 0;
}

.slide03-lead-wrap.is-phase-2 .slide03-lead-title--phase2 {
  visibility: visible;
  pointer-events: auto;
}

.slide03-lead-wrap.is-phase-3 .slide03-lead-title--phase2 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.slide03-lead-wrap.is-phase-3 .slide03-lead-title--phase3 {
  visibility: visible;
  pointer-events: auto;
}

.slide03-lead-wrap.is-phase-4 .slide03-lead-title--phase3 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.slide03-lead-wrap.is-phase-4 .slide03-lead-title--phase4 {
  visibility: visible;
  pointer-events: auto;
}

/* ============================================
   スライド3：アニメーション（.anim-s3 で起動）
   ============================================ */

@keyframes s3FadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 白い円：スケールでポワンと登場 */
@keyframes s3PopCircle {
  0%   { opacity: 0; transform: scale(0.75); }
  65%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* キャラクター：ポン（バウンス） */
@keyframes s3PopChar {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  60%  { opacity: 1; transform: translate(-50%, -53%) scale(1.12); }
  80%  { transform: translate(-50%, -49%) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* バッジ：ポン（バウンス） */
@keyframes s3PopBadge {
  0%   { opacity: 0; transform: scale(0); }
  65%  { opacity: 1; transform: scale(1.2); }
  85%  { transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* 左リスト（音声6秒付近からスタート・0.15s間隔） */
.slide[data-index="2"].anim-s3 .slide03-list--left .s3-item:nth-child(1) { animation: s3FadeUp 0.2s ease 6s    both; }
.slide[data-index="2"].anim-s3 .slide03-list--left .s3-item:nth-child(2) { animation: s3FadeUp 0.2s ease 6.15s both; }
.slide[data-index="2"].anim-s3 .slide03-list--left .s3-item:nth-child(3) { animation: s3FadeUp 0.2s ease 6.3s  both; }
.slide[data-index="2"].anim-s3 .slide03-list--left .s3-item:nth-child(4) { animation: s3FadeUp 0.2s ease 6.45s both; }
.slide[data-index="2"].anim-s3 .slide03-list--left .s3-item:nth-child(5) { animation: s3FadeUp 0.2s ease 6.6s  both; }
.slide[data-index="2"].anim-s3 .slide03-list--left .s3-item:nth-child(6) { animation: s3FadeUp 0.2s ease 6.75s both; }

/* 右リスト（音声6秒付近からスタート・0.15s間隔） */
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(1) { animation: s3FadeUp 0.2s ease 6s    both; }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(2) { animation: s3FadeUp 0.2s ease 6.15s both; }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(3) { animation: s3FadeUp 0.2s ease 6.3s  both; }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(4) { animation: s3FadeUp 0.2s ease 6.45s both; }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(5) { animation: s3FadeUp 0.2s ease 6.6s  both; }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(6) { animation: s3FadeUp 0.2s ease 6.75s both; }

/* 低体重バッジ（左上）・低栄養バッジ（右下）同時に4秒後 */
.slide[data-index="2"].anim-s3 .s3-circle--taitai { animation: s3PopBadge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 4.0s both; }
.slide[data-index="2"].anim-s3 .s3-circle--eiyo  { animation: s3PopBadge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 4.0s both; }

/* 女性イラスト2枚目：初期は非表示 */
.slide03-woman--02 {
  opacity: 0;
}

/* --- woman03（高齢者）・baby：初期は非表示 --- */
@keyframes s3FloatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.slide03-woman03 {
  position: absolute;
  width: 35.6%;
  left: 46%;
  top: -1.8%;
  opacity: 0;
  z-index: 2;
  object-fit: contain;
  animation: s3FloatY 3.5s ease-in-out infinite;
}

.slide03-baby {
  position: absolute;
  width: 28%;
  left: 17%;
  top: 53%;
  opacity: 0;
  z-index: 2;
  object-fit: contain;
  animation: s3FloatY 3.5s ease-in-out 0.4s infinite;
}

/* 女性イラスト切り替えアニメーション（10秒後） */
@keyframes s3WomanFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes s3WomanFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.slide[data-index="2"].anim-s3 .slide03-woman--01 {
  animation:
    s3FloatChar 3.5s ease-in-out infinite,
    s3WomanFadeOut 1.2s ease 10s forwards;
}
.slide[data-index="2"].anim-s3 .slide03-woman--02 {
  animation:
    s3FloatChar 3.5s ease-in-out infinite,
    s3WomanFadeIn 1.2s ease 10s forwards;
}

/* --- アイテムアイコン（10秒後に出現） --- */
.s3-items-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.s3-item-icon {
  position: absolute;
  opacity: 0;
  object-fit: contain;
}

/* 配置（500px基準で計算） */
.s3-item-icon--1 { width: 19.2%; top: 35.8%; left: 13.4%; }  /* 体重計    X:67  Y:179 */
.s3-item-icon--2 { width: 19.6%; top: 60%;   left: 17%;   }  /* 骨        X:85  Y:300 */
.s3-item-icon--3 { width: 15%;   top: 51.6%; left: 67.2%; }  /* 薬        X:336 Y:258 */
.s3-item-icon--4 { width: 10.2%; top: 29.8%; left: 69%;   }  /* 生理用品1 X:345 Y:149 */
.s3-item-icon--5 { width: 12.6%; top: 43.4%; left: 80%;   }  /* 生理用品2 X:400 Y:217 */

/* 首振りアニメーション */
@keyframes s3ItemSwing {
  0%   { transform: rotate(-10deg); }
  50%  { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

/* 全アイテム：10秒後にフェードイン → 首振り開始 */
.slide[data-index="2"].anim-s3 .s3-item-icon--1 {
  animation: s3ItemFadeIn 0.8s ease 10s forwards, s3ItemSwing 2.4s ease-in-out 10.8s infinite;
}
.slide[data-index="2"].anim-s3 .s3-item-icon--2 {
  animation: s3ItemFadeIn 0.8s ease 10s forwards, s3ItemSwing 2.7s ease-in-out 10.6s infinite;
}
.slide[data-index="2"].anim-s3 .s3-item-icon--3 {
  animation: s3ItemFadeIn 0.8s ease 10s forwards, s3ItemSwing 2.2s ease-in-out 10.9s infinite;
}
.slide[data-index="2"].anim-s3 .s3-item-icon--4 {
  animation: s3ItemFadeIn 0.8s ease 10s forwards, s3ItemSwing 2.6s ease-in-out 10.7s infinite;
}
.slide[data-index="2"].anim-s3 .s3-item-icon--5 {
  animation: s3ItemFadeIn 0.8s ease 10s forwards, s3ItemSwing 2.5s ease-in-out 11.0s infinite;
}

@keyframes s3ItemFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- テキストフラッシュ（赤く一瞬光る） --- */
@keyframes s3TextFlashRed {
  0%   { color: inherit; }
  15%  { color: #e53e3e; }
  75%  { color: #e53e3e; }
  100% { color: inherit; }
}
.s3-text-flash {
  animation: s3TextFlashRed 1.8s ease forwards;
}

/* ============================================
   スライド3：スマホ調整（案A：イメージ上・リスト2列下）
   ============================================ */
@media (max-width: 767px) {

  /* リード見出しとセンター（白い円）の間隔 */
  .slide03-main {
    margin-top: clamp(14px, 4.5vw, 28px);
  }

  /* ボディをラップさせて縦並びに */
  .slide03-body {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0 2%;
    gap: 0;
  }

  /* センター（円）を1行目・全幅 */
  .slide03-center {
    order: 1;
    flex: 0 0 100%;
    padding: 0.5% 0 3%;
  }

  /* 白い円を左右いっぱいに */
  .slide03-white-circle {
    width: min(300px, 80vw);
  }

  /* バッジも大きく */
  .s3-circle {
    width: clamp(75px, 18vw, 110px);
  }

  /* 左リストを2行目・左半分 */
  .slide03-list--left {
    order: 2;
    flex: 0 0 50%;
    padding-left: 2%;
    justify-content: flex-start;
    gap: clamp(2px, 1vw, 6px);
  }

  /* 右リストを2行目・右半分 */
  .slide03-list--right {
    order: 3;
    flex: 0 0 50%;
    justify-content: flex-start;
    gap: clamp(2px, 1vw, 6px);
  }

  /* リストマークを小さく */
  .slide03-body .list-mark {
    width: clamp(14px, 4vw, 20px);
  }

  /* リストテキストを読みやすいサイズに */
  .slide03-body .s3-item-text {
    font-size: clamp(10px, 2.8vw, 14px);
  }

  /* サブテキスト */
  .slide03-body .s3-sub-text {
    font-size: clamp(8px, 2.2vw, 11px);
  }

}

/* ========== スライド3（子宮頸がん）：コンテンツレイアウト ========== */

.slide03c-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3%;
  padding: 1% 5% 2% 5%;
  margin-top: clamp(8px, 1.5cqw, 20px);
  width: 100%;
  box-sizing: border-box;
}

/* 左：カップルのイラスト */
.slide03c-left {
  flex: 0 0 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: visible;
}

/* 白い円 */
.slide03c-circle {
  position: relative;
  width: min(96%, 96cqh);
  aspect-ratio: 1;
  background-color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
}

/* イラスト：円の中央やや上に配置 */
.slide03c-img01 {
  position: absolute;
  width: 85%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  object-fit: contain;
  opacity: 0;
}

/* 右：カップルイラスト（フェードスワップのため relative） */
.slide03c-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.5cqw, 16px);
  min-height: 0;
  position: relative;
}

/* カップルのイラスト（slide03_01.svg）：初期非表示 */
.slide03c-img02 {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

/* slide03_03.svg：Phase3でフェードイン。Phase2後の中央・拡大状態に合わせて配置 */
/* slide03_01（565×354）と高さを揃えるため width: 35%（縦横比 290×320 の補正値） */
.slide03c-img03 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.22);
  width: 35%;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

/* スマホ対応 */
@media (max-width: 767px) {
  .slide03c-body {
    flex: 0 0 auto;
    align-items: center;
    gap: 2%;
    padding: 0 2% 2%;
    margin-top: 0;
  }

  .slide03c-right {
    order: 1;
    flex: 0 0 38%;
    align-items: center;
  }

  /* SP: イラストを右半分 */
  .slide03c-left {
    order: 2;
    flex: 0 0 58%;
  }

  /* SP: Phase2 — 右カラムを全幅に広げてセンタリング */
  .slide.active[data-index="2"].s3-phase2 .slide03c-right {
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
  }

  /* SP: Phase2 — 中央移動（レイアウト変化）後にスケール → ふわふわ */
  .slide.active[data-index="2"].s3-phase2 .slide03c-img02 {
    animation:
      s3c-img02-center-sp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both,
      s3c-float-centered  2.5s ease-in-out                    1.6s infinite !important;
    flex: none;
    opacity: 1;
    width: 100% !important; /* PC の 42cqw を上書き */
  }

  /* SP: Phase3 — カップルのフェードアウト（SP用toステート） */
  .slide.active[data-index="2"].s3-phase3 .slide03c-img02 {
    animation: s3c-img02-fadeout-sp 0.8s ease both !important;
    opacity: 1;
    flex: none;
    width: 100% !important; /* PC の 42cqw を上書き */
  }

  /* SP: Phase3 — slide03_03のサイズ調整 */
  .slide.active[data-index="2"].s3-phase3 .slide03c-img03 {
    width: 34%;
  }
}

/* SP用Phase2アニメーション（width: 65%） */
@keyframes s3c-img02-center-sp {
  from { transform: scale(1);    width: 100%; }
  to   { transform: scale(0.85); width: 65%;  }
}

/* SP用Phase3フェードアウト（width: 65%・float静止位置から） */
@keyframes s3c-img02-fadeout-sp {
  from { opacity: 1; transform: scale(0.85) translateY(0); width: 65%; }
  to   { opacity: 0; transform: scale(0.85) translateY(0); width: 65%; }
}

/* ========== スライド3：シーケンスアニメーション ========== */

/* ① 白い円：スライド遷移とともに表示（追加アニメーションなし） */

/* ② slide03_02.svg（子宮図）：2秒後に下からスライドイン（#a の鼓動アニメーションはSVG内部で制御） */
.slide.active[data-index="2"] .slide03c-img01 {
  animation: s3c-img01-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2s both;
}
@keyframes s3c-img01-in {
  from { opacity: 0; transform: translate(-50%, calc(-45% + 50px)); }
  to   { opacity: 1; transform: translate(-50%, -45%); }
}


@keyframes s3c-item-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ⑤ slide03_01.svg（左下イラスト）：5秒後に下からスライドイン（登場時はふわふわなし） */
.slide.active[data-index="2"] .slide03c-img02 {
  animation:
    s3c-img02-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 5s both;
}
@keyframes s3c-img02-in {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes s3c-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ========== スライド3：Phase2（JSで s3-phase2 クラス付与・11秒後） ========== */

/* 左カラム（白い円＋子宮図）：フェードアウト＋横幅収縮 */
.slide.active[data-index="2"].s3-phase2 .slide03c-left {
  animation: s3c-left-out 0.8s ease forwards;
  overflow: hidden;
}
@keyframes s3c-left-out {
  from { opacity: 1; max-width: 100vw; }
  to   { opacity: 0; max-width: 0; }
}

/* 右カラム：横に広がったときにイラストを中央寄せ */
.slide.active[data-index="2"].s3-phase2 .slide03c-right {
  align-items: center;
  justify-content: center;
}

/* カップルイラスト：中央移動（レイアウト変化）後にスケールアップ → そのままふわふわ */
.slide.active[data-index="2"].s3-phase2 .slide03c-img02 {
  animation:
    s3c-img02-center      0.8s ease 0.8s  both,
    s3c-float-centered-pc 2.5s ease-in-out 1.6s infinite;
  flex: none;
  opacity: 1;
  width: 42cqw; /* layout幅を固定、sizeはscaleで制御 */
}
@keyframes s3c-img02-center {
  from { transform: scale(1); }
  to   { transform: scale(1.52); }
}
/* SP共有キーフレーム（scale:0.85） */
@keyframes s3c-float-centered {
  0%, 100% { transform: scale(0.85) translateY(0); }
  50%      { transform: scale(0.85) translateY(-10px); }
}
/* PC専用キーフレーム（scale:1.52） */
@keyframes s3c-float-centered-pc {
  0%, 100% { transform: scale(1.52) translateY(0); }
  50%      { transform: scale(1.52) translateY(-10px); }
}

/* ========== スライド3：Phase3（JSで s3-phase3 クラス付与・40秒後） ========== */

/* slide03_01.svg（カップル）：フェードアウト（float静止位置から） */
.slide.active[data-index="2"].s3-phase3 .slide03c-img02 {
  animation: s3c-img02-fadeout 0.8s ease both;
  opacity: 1;
  flex: none;
  width: 42cqw;
}
@keyframes s3c-img02-fadeout {
  from { opacity: 1; transform: scale(1.52) translateY(0); }
  to   { opacity: 0; transform: scale(1.52) translateY(0); }
}

/* slide03_03.svg：フェードイン → そのままふわふわ */
.slide.active[data-index="2"].s3-phase3 .slide03c-img03 {
  animation:
    s3c-img03-fadein 0.8s ease-in-out 0.4s both,
    s3c-float-abs    2.5s ease-in-out 1.2s infinite;
}
@keyframes s3c-img03-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes s3c-float-abs {
  0%, 100% { transform: translate(-50%, -50%) scale(1.22) translateY(0); }
  50%      { transform: translate(-50%, -50%) scale(1.22) translateY(-10px); }
}

/* ========== スライド4：BMIレイアウト + 一文字ずつ見出し + SVG入場 ========== */
.slide04-content.slide02-content {
  min-height: 0;
}

.s4-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 3% 2cqw;
  gap: clamp(4px, 1cqw, 12px);
}

.s4-main-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 3cqw, 28px);
  color: #333;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.04em;
  margin: 0;
  padding: 0.2cqw 2% 0.8cqw;
  line-height: 1.25;
  text-align: center;
}

/* 段落で使うとき（スライド3など）：長文の折り返し用 */
p.s4-main-title {
  display: block;
}

.s4-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(8px, 1.5cqw, 20px);
}

.s4-left-panel {
  flex: 1 1 70%;
  min-width: 0;
  background: #fff;
  border-radius: 16px;
  padding: clamp(8px, 1.5cqw, 18px) clamp(10px, 1.8cqw, 20px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  /* 1つ目SVGと「適正体重の求め方」見出しのあいだ */
  gap: clamp(20px, 3.2cqw, 40px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.s4-formula-block {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8cqw, 10px);
  min-width: 0;
}

.s4-formula-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 3.2cqw, 28px);
  color: #57b38a;
  margin: 0 0 clamp(10px, 1.6cqw, 22px);
  line-height: 1.35;
  width: 100%;
  text-align: center;
}

/* 「BMIの求め方」：音声3.5秒で表示 */
.slide[data-index="3"] .s4-formula-heading--bmi {
  opacity: 0;
  transform: translateY(14px);
}

.slide.active[data-index="3"] .s4-formula-heading--bmi,
.slide[data-index="3"].anim-s4 .s4-formula-heading--bmi {
  animation: s4-illust-in 0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 3.5s forwards;
}

.slide[data-index="3"]:not(.active) .s4-formula-heading--bmi {
  opacity: 0;
  animation: none;
  transform: translateY(14px);
}

/* 「適正体重の求め方」：音声21秒で表示 */
.slide[data-index="3"] .s4-formula-heading--ideal {
  opacity: 0;
  transform: translateY(14px);
}

.slide.active[data-index="3"] .s4-formula-heading--ideal,
.slide[data-index="3"].anim-s4 .s4-formula-heading--ideal {
  animation: s4-illust-in 0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 21s forwards;
}

.slide[data-index="3"]:not(.active) .s4-formula-heading--ideal {
  opacity: 0;
  animation: none;
  transform: translateY(14px);
}

.s4-right-col {
  flex: 0 1 27%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(2px, 0.6cqw, 8px);
}

.s4-svg-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
}

.s4-svg-wrap--01 {
  flex: 0 0 auto;
}

.s4-svg-wrap--02 {
  flex: 0 0 auto;
}

.s4-svg-wrap--03 {
  flex: 0 0 auto;
  max-width: 100%;
}

.s4-svg-wrap--04 {
  flex: 1 1 auto;
  min-height: 0;
  align-items: flex-end;
}

.s4-svg-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.s4-svg-wrap--04 .s4-svg-img {
  max-height: min(38vh, 320px);
  width: auto;
  max-width: 100%;
}

/* slide04_03：PC/SP 差し替え（.s4-svg-img の display:block より詳細度で上書き） */
@media (max-width: 767px) {
  .s4-svg-wrap--03 .s4-svg-img.pc-only {
    display: none;
  }
}

@media (min-width: 768px) {
  .s4-svg-wrap--03 .s4-svg-img.sp-only {
    display: none;
  }
}

/* slide04_01 BMI 図：各ブロックを音声タイミングでふわっとフェードイン（#slide04BmiChartWrap 内SVG） */
@keyframes s4-bmi-block-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#slide04BmiChartWrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.slide[data-index="3"]:not(.anim-s4) #slide04BmiChartWrap [id^="bmi-"] {
  opacity: 0;
  animation: none;
}

.slide[data-index="3"].anim-s4 #slide04BmiChartWrap #bmi-01 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 5s;
}

.slide[data-index="3"].anim-s4 #slide04BmiChartWrap #bmi-02 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 6.5s;
}

.slide[data-index="3"].anim-s4 #slide04BmiChartWrap #bmi-03 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 8.5s;
}

.slide[data-index="3"].anim-s4 #slide04BmiChartWrap #bmi-04 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 10.5s;
}

.slide[data-index="3"].anim-s4 #slide04BmiChartWrap #bmi-05 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 14s;
}

.slide[data-index="3"].anim-s4 #slide04BmiChartWrap #bmi-06 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 15s;
}

.slide[data-index="3"].anim-s4 #slide04BmiChartWrap #bmi-07 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 16s; /* 音声16秒 */
}

/*
 * slide04_01.svg インライン表示：HTML側の color / font-size 継承で fill・字幅が崩れるのを防ぐ
 *（Illustrator の defs と同じ指定を #slide04BmiChartWrap 配下に限定して再宣言）
 */
#slide04BmiChartWrap svg {
  font-family: 'Zen Maru Gothic', ZenMaruGothic-Bold, sans-serif;
  font-weight: 700;
  text-rendering: geometricPrecision;
}

#slide04BmiChartWrap svg text,
#slide04BmiChartWrap svg tspan {
  font-family: inherit;
}

#slide04BmiChartWrap svg .st21,
#slide04BmiChartWrap svg .st22 {
  fill: none !important;
}

#slide04BmiChartWrap svg .st25 {
  fill: #d0ead5 !important;
}

#slide04BmiChartWrap svg .st28 {
  fill: #fff5cc !important;
}

#slide04BmiChartWrap svg .st29 {
  fill: #f0f8f6 !important;
}

#slide04BmiChartWrap svg .st30 {
  fill: #56d2e3 !important;
}

#slide04BmiChartWrap svg .st23,
#slide04BmiChartWrap svg .st26,
#slide04BmiChartWrap svg .st13,
#slide04BmiChartWrap svg .st14,
#slide04BmiChartWrap svg .st15,
#slide04BmiChartWrap svg .st19 {
  fill: #fff !important;
}

#slide04BmiChartWrap svg .st24,
#slide04BmiChartWrap svg .st27,
#slide04BmiChartWrap svg .st5,
#slide04BmiChartWrap svg .st9,
#slide04BmiChartWrap svg .st10,
#slide04BmiChartWrap svg .st11,
#slide04BmiChartWrap svg .st12 {
  fill: #1e9966 !important;
}

#slide04BmiChartWrap svg .st0,
#slide04BmiChartWrap svg .st1,
#slide04BmiChartWrap svg .st2,
#slide04BmiChartWrap svg .st3,
#slide04BmiChartWrap svg .st6,
#slide04BmiChartWrap svg .st7,
#slide04BmiChartWrap svg .st8,
#slide04BmiChartWrap svg .st16,
#slide04BmiChartWrap svg .st17,
#slide04BmiChartWrap svg .st18,
#slide04BmiChartWrap svg .st20 {
  fill: #333 !important;
}

#slide04BmiChartWrap svg .st21,
#slide04BmiChartWrap svg .st23,
#slide04BmiChartWrap svg .st24 {
  stroke: #1e9966 !important;
}

#slide04BmiChartWrap svg .st22 {
  stroke: #c9e6df !important;
}

#slide04BmiChartWrap svg .st23 {
  stroke-miterlimit: 10;
}

#slide04BmiChartWrap svg .st0,
#slide04BmiChartWrap svg .st1,
#slide04BmiChartWrap svg .st2,
#slide04BmiChartWrap svg .st3,
#slide04BmiChartWrap svg .st18 {
  font-size: 25px !important;
}

#slide04BmiChartWrap svg .st5,
#slide04BmiChartWrap svg .st9,
#slide04BmiChartWrap svg .st10,
#slide04BmiChartWrap svg .st11,
#slide04BmiChartWrap svg .st12 {
  font-size: 17px !important;
}

#slide04BmiChartWrap svg .st6,
#slide04BmiChartWrap svg .st17,
#slide04BmiChartWrap svg .st19 {
  font-size: 16px !important;
}

#slide04BmiChartWrap svg .st7,
#slide04BmiChartWrap svg .st8,
#slide04BmiChartWrap svg .st16 {
  font-size: 32px !important;
}

#slide04BmiChartWrap svg .st13,
#slide04BmiChartWrap svg .st14,
#slide04BmiChartWrap svg .st15 {
  font-size: 30px !important;
}

/* slide04_02 適正体重：各ブロックを音声タイミングでふわっとフェードイン */
#slide04WeightChartWrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.slide[data-index="3"]:not(.anim-s4) #slide04WeightChartWrap [id^="weight-"] {
  opacity: 0;
  animation: none;
}

/* slide04_02.svg 適正体重ブロック（音声タイミング） */
.slide[data-index="3"].anim-s4 #slide04WeightChartWrap #weight-01 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 23.5s;
}

.slide[data-index="3"].anim-s4 #slide04WeightChartWrap #weight-02 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 25s;
}

.slide[data-index="3"].anim-s4 #slide04WeightChartWrap #weight-03 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 27.5s;
}

.slide[data-index="3"].anim-s4 #slide04WeightChartWrap #weight-04 {
  opacity: 0;
  animation: s4-bmi-block-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: 29s;
}

@keyframes s4-char-in {
  from {
    opacity: 0;
    transform: translateY(0.25em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* キャッチ内 &#10;（改行）用：どのスライドでも効く共通スタイル */
[class*="catch-break"] {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@keyframes s4-illust-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.s4-char {
  display: inline-block;
  opacity: 0;
}

/* スライド4見出し：音声1秒から一文字ずつ表示 */
.slide.active[data-index="3"] .s4-main-title .s4-char,
.slide[data-index="3"].anim-s4 .s4-main-title .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(1s + 150ms + var(--ci, 0) * 80ms);
}

.slide[data-index="3"]:not(.active) .s4-main-title .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド3・5〜10：キャッチコピー 一文字ずつ表示 */
/* スライド3：キャッチコピーラッパー（2枚を同じ位置に重ねる） */
.s3c-title-wrap {
  display: grid;
}
.s3c-title-wrap > * {
  grid-area: 1 / 1;
}


/* スライド3：キャッチコピー p2〜p15 デフォルト非表示 */
.s4-main-title--s3c-p2 .s4-char,
.s4-main-title--s3c-p3 .s4-char,
.s4-main-title--s3c-p4 .s4-char,
.s4-main-title--s3c-p5 .s4-char,
.s4-main-title--s3c-p6 .s4-char,
.s4-main-title--s3c-p7 .s4-char,
.s4-main-title--s3c-p8 .s4-char,
.s4-main-title--s3c-p9 .s4-char,
.s4-main-title--s3c-p10 .s4-char,
.s4-main-title--s3c-p11 .s4-char,
.s4-main-title--s3c-p12 .s4-char,
.s4-main-title--s3c-p13 .s4-char,
.s4-main-title--s3c-p14 .s4-char,
.s4-main-title--s3c-p15 .s4-char {
  opacity: 0;
}

@keyframes s3c-title1-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* スライド3：p1（0.3s → 4.5s） */
.slide.active[data-index="2"] .s4-main-title--s3c-p1 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .s4-main-title--s3c-p1 {
  animation: s3c-title1-out 0.6s ease 4.5s both;
}

/* スライド3：p2（5s → 13.5s） */
.slide.active[data-index="2"] .s4-main-title--s3c-p2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .s4-main-title--s3c-p2 {
  animation: s3c-title1-out 0.6s ease 13.5s both;
}

/* スライド3：p3（14s → 19.5s） */
.slide.active[data-index="2"] .s4-main-title--s3c-p3 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(14s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .s4-main-title--s3c-p3 {
  animation: s3c-title1-out 0.6s ease 19.5s both;
}

/* スライド3：p4（20s → 22.5s） */
.slide.active[data-index="2"] .s4-main-title--s3c-p4 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(20s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .s4-main-title--s3c-p4 {
  animation: s3c-title1-out 0.6s ease 22.5s both;
}

/* スライド3：p5（23s → 26.5s） */
.slide.active[data-index="2"] .s4-main-title--s3c-p5 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(23s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .s4-main-title--s3c-p5 {
  animation: s3c-title1-out 0.6s ease 26.5s both;
}

/* スライド3：p6（27s → 32.5s） */
.slide.active[data-index="2"] .s4-main-title--s3c-p6 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(27s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .s4-main-title--s3c-p6 {
  animation: s3c-title1-out 0.6s ease 32.5s both;
}

/* スライド3：p7（33s → 40.5s） */
.slide.active[data-index="2"] .s4-main-title--s3c-p7 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(33s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .s4-main-title--s3c-p7 {
  animation: s3c-title1-out 0.6s ease 40.5s both;
}

/* スライド3：p8（41s → 最後まで表示） */
.slide.active[data-index="2"] .s4-main-title--s3c-p8 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(41s + var(--ci, 0) * 80ms);
}

/* スライド3：非アクティブ時リセット */
.slide[data-index="2"]:not(.active) .s4-main-title--s3c-p1,
.slide[data-index="2"]:not(.active) .s4-main-title--s3c-p2,
.slide[data-index="2"]:not(.active) .s4-main-title--s3c-p3,
.slide[data-index="2"]:not(.active) .s4-main-title--s3c-p4,
.slide[data-index="2"]:not(.active) .s4-main-title--s3c-p5,
.slide[data-index="2"]:not(.active) .s4-main-title--s3c-p6,
.slide[data-index="2"]:not(.active) .s4-main-title--s3c-p7,
.slide[data-index="2"]:not(.active) .s4-main-title--s3c-p8 {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド3　キャッチコピー（画像の上に表示・重ねて入れ替え）
   1行目→0.3s／2行目（2行組）→5.5s、各行1文字ずつフェードイン後、
   次の行が始まる前にフェードアウトして入れ替わる
   ============================================================ */
.s3-catch-title {
  display: grid;
  margin: 0 0 clamp(10px, 1.6cqw, 20px);
  padding: 0 2%;
}

.s3-catch-title > * {
  grid-area: 1 / 1;
}

.s3-catch-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.s3-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.s3-catch-char {
  display: inline-block;
  opacity: 0;
}

@keyframes s3-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、5sでフェードアウト（2行目に入れ替わる） */
.slide.active[data-index="2"] .s3-catch-line--1 .s3-catch-char,
.slide[data-index="2"].anim-s3 .s3-catch-line--1 .s3-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .s3-catch-line--1,
.slide[data-index="2"].anim-s3 .s3-catch-line--1 {
  animation: s3-catch-line-out 0.6s ease 5s both;
}

/* 2行目（2行組）：5.5s→文字表示（行をまたいで --ci 連続）、以降は表示したまま */
.slide.active[data-index="2"] .s3-catch-phase--2 .s3-catch-char,
.slide[data-index="2"].anim-s3 .s3-catch-phase--2 .s3-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(5.5s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="2"]:not(.active) .s3-catch-line--1,
.slide[data-index="2"]:not(.active) .s3-catch-phase--2 {
  animation: none;
}

.slide[data-index="2"]:not(.active) .s3-catch-char {
  opacity: 0;
  animation: none;
}

.slide.active[data-index="4"] .s4-main-title .s4-char,
.slide.active[data-index="5"] .s4-main-title .s4-char,
.slide.active[data-index="6"] .s4-main-title .s4-char,
.slide.active[data-index="7"] .s4-main-title .s4-char,
.slide.active[data-index="8"] .s4-main-title .s4-char,
.slide.active[data-index="9"] .s4-main-title .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(1s + 150ms + var(--ci, 0) * 80ms);
}

.slide[data-index="2"]:not(.active) .s4-main-title .s4-char,
.slide[data-index="4"]:not(.active) .s4-main-title .s4-char,
.slide[data-index="5"]:not(.active) .s4-main-title .s4-char,
.slide[data-index="6"]:not(.active) .s4-main-title .s4-char,
.slide[data-index="7"]:not(.active) .s4-main-title .s4-char,
.slide[data-index="8"]:not(.active) .s4-main-title .s4-char,
.slide[data-index="9"]:not(.active) .s4-main-title .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド4 締め文（formula-block 下）：音声35秒から一文字ずつ */
.s4-closing-line {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2.8cqw, 22px);
  color: #333;
  line-height: 1.55;
  text-align: center;
  margin: clamp(12px, 2cqw, 24px) 0 0;
  padding: 0 2%;
}

.slide.active[data-index="3"] .s4-closing-line .s4-char,
.slide[data-index="3"].anim-s4 .s4-closing-line .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(35s + 150ms + var(--ci, 0) * 80ms);
}

.slide[data-index="3"]:not(.active) .s4-closing-line .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド3：リード（フェーズ1）の一文字表示（.active または .anim-s3 時） */
.slide.active[data-index="2"] .slide03-lead-title--phase1 .s4-char,
.slide[data-index="2"].anim-s3 .slide03-lead-title--phase1 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(150ms + var(--ci, 0) * 80ms);
}

/* リードフェーズ2：21秒で .is-phase-2 付与後に一文字表示 */
.slide[data-index="2"].anim-s3 .slide03-lead-wrap.is-phase-2 .slide03-lead-title--phase2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(150ms + var(--ci, 0) * 80ms);
}

/* リードフェーズ3：29秒で .is-phase-3 付与後に一文字表示 */
.slide[data-index="2"].anim-s3 .slide03-lead-wrap.is-phase-3 .slide03-lead-title--phase3 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(150ms + var(--ci, 0) * 80ms);
}

/* リードフェーズ4：36秒で .is-phase-4 付与後に一文字表示 */
.slide[data-index="2"].anim-s3 .slide03-lead-wrap.is-phase-4 .slide03-lead-title--phase4 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(150ms + var(--ci, 0) * 80ms);
}

.slide[data-index="2"]:not(.active) .slide03-lead-title--phase1 .s4-char,
.slide[data-index="2"]:not(.active) .slide03-lead-title--phase2 .s4-char,
.slide[data-index="2"]:not(.active) .slide03-lead-title--phase3 .s4-char,
.slide[data-index="2"]:not(.active) .slide03-lead-title--phase4 .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド4 SVG：1枚目（BMI図）はブロック別アニメーションのためラップは早めに表示 */
.slide[data-index="3"].anim-s4 .s4-svg-wrap--01 {
  animation: s4-illust-in 0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 0.2s forwards;
}
.slide[data-index="3"].anim-s4 .s4-svg-wrap--02 {
  animation: s4-illust-in 0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 0.2s forwards;
}
/* slide04_03：音声32秒で表示 */
.slide[data-index="3"].anim-s4 .s4-svg-wrap--03 {
  animation: s4-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 32s forwards;
}

/* slide04_04：音声0.5秒で右からスライドイン → 到着後は画像のみ上下ふわふわ */
@keyframes s4-04-slide-from-right {
  from {
    opacity: 0;
    transform: translate(clamp(18px, 6vw, 72px), 14px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes s4-04-float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.slide[data-index="3"].anim-s4 .s4-svg-wrap--04 {
  animation: s4-04-slide-from-right 0.65s cubic-bezier(0.33, 1, 0.68, 1) 0.5s forwards;
}

.slide[data-index="3"]:not(.anim-s4) .s4-svg-wrap--03 .s4-svg-img--float,
.slide[data-index="3"]:not(.anim-s4) .s4-svg-wrap--04 .s4-svg-img--float {
  animation: none;
}

/* slide04_03：入場（32s+0.55s）のあとふわふわ */
.slide[data-index="3"].anim-s4 .s4-svg-wrap--03 .s4-svg-img--float {
  animation: s4-04-float-y 2.6s ease-in-out 32.55s infinite;
}

.slide[data-index="3"].anim-s4 .s4-svg-wrap--04 .s4-svg-img--float {
  animation: s4-04-float-y 2.6s ease-in-out 1.2s infinite;
}

@media (max-width: 767px) {
  .s4-body {
    padding: 0 2% 12px;
    overflow-y: auto;
  }

  .s4-main-title {
    font-size: clamp(15px, 4.2vw, 22px);
    padding: 4px 2% 8px;
  }

  .s4-layout {
    flex-direction: column;
    flex: 1 1 auto;
    /* 左パネルと .s4-right-col のあいだを少し広げる（PCの .s4-layout gap は変更しない） */
    gap: clamp(14px, 2.5cqw, 28px);
  }

  .s4-left-panel {
    flex: 0 0 auto;
  }

  .s4-formula-heading {
    font-size: clamp(15px, 4.2vw, 22px);
  }

  /* 右カラム：スマホのみ2カラム（左＝計算・吹き出し系 / 右＝イラスト）。PCは未指定のまま縦積み */
  .s4-right-col {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0px, 1vw, 6px);
    width: 100%;
    min-height: 0;
  }

  .s4-right-col .s4-svg-wrap--03 {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    justify-content: center;
    align-items: flex-start;
  }

  .s4-right-col .s4-svg-wrap--04 {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    justify-content: center;
    align-items: flex-start;
  }

  /* 左セリフ：サイズは据え置き / 右イラストのみやや縮小 */
  .s4-right-col .s4-svg-wrap--03 .s4-svg-img {
    max-height: min(36vh, 260px);
  }

  .s4-right-col .s4-svg-wrap--04 .s4-svg-img {
    max-height: min(28vh, 200px);
  }
}

@media (max-width: 600px) {
  .s4-main-title {
    font-size: clamp(14px, 4vw, 20px);
  }
}

/* ========== スライド5：3カラム + 見出し1文字ずつ + SVG順表示 ========== */
.slide05-content.slide02-content {
  min-height: 0;
}

.s5-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 3% 2cqw;
  gap: clamp(8px, 1.5cqw, 18px);
}

.s5-body--phased {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: start;
  justify-items: stretch;
}

.s5-body--phased > .s5-phase-intro,
.s5-body--phased > .s5-phase-main {
  grid-area: 1 / 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 16px);
}

.s5-phase-main {
  flex: 1;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.slide[data-index="4"].anim-s5-phase2 .s5-phase-intro {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

.slide[data-index="4"].anim-s5-phase2 .s5-phase-main {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.55s ease 0.15s, visibility 0s linear 0s;
}

.s5-idol-title,
.s7-main-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 3.2cqw, 30px);
  color: #333;
  margin: 0;
  padding: 0.2cqw 2% 0;
  line-height: 1.35;
  text-align: center;
}

.s5-idol-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.04em;
}

/* スライド7見出し：2フェーズ（フェード切替・スライド6と同系） */
.s7-main-title {
  display: block;
  width: 100%;
}

.s7-title-stack {
  position: relative;
  display: block;
  width: 100%;
  min-height: min(6rem, 26cqw);
}

.s7-title-phase {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 0.04em;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.s7-title-phase .s7-char {
  display: inline-block;
  opacity: 0;
}

.s7-title-phase--1 {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.s7-title-phase--2 {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s ease 0.12s;
}

.slide[data-index="6"].anim-s7-phase2 .s7-title-phase--1 {
  opacity: 0;
}

.slide[data-index="6"].anim-s7-phase2 .s7-title-phase--2 {
  opacity: 1;
}

/* スライド7：flex 内で確実に改行 */
.s7-title-phase--1 .s7-title-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.s5-intro-stage {
  position: relative;
  width: 100%;
  max-width: min(92cqw, 840px);
  margin: 0 auto;
  aspect-ratio: 825 / 443;
  flex: 0 0 auto;
}

.s5-intro-stage .s5-svg-wrap--street {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: none;
}

.s5-intro-stage .s5-svg-wrap--street .s5-svg-img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.s5-intro-stage .s5-svg-wrap--woman {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 102%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  /* アニメ開始位置（s5-woman-slide-in の from と揃える） */
  transform: translateX(-29%);
}

.s5-intro-stage .s5-svg-wrap--woman .s5-svg-img {
  width: auto;
  height: 100%;
  max-height: min(48cqw, 420px);
  max-width: 38%;
  object-fit: contain;
  object-position: center bottom;
}

.s5-main-title,
.s6-main-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 3.2cqw, 30px);
  color: #333;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.04em;
  margin: 0;
  padding: 0.2cqw 2% 0.5cqw;
  line-height: 1.35;
  text-align: center;
}

/* スライド6見出し：2フェーズ・各フェーズ1文字ずつ（s5-char-in） */
.s6-main-title {
  display: block;
  width: 100%;
}

.s6-title-stack {
  position: relative;
  display: block;
  width: 100%;
  min-height: min(5.5rem, 22cqw);
}

.s6-title-phase {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 0.04em;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.s6-title-phase .s6-char {
  display: inline-block;
  opacity: 0;
}

.s6-title-phase--1 {
  z-index: 1;
}

.s6-title-phase--2 {
  z-index: 2;
}

.s5-cols {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 2cqw, 24px);
}

.s5-phase-main .s5-cols {
  margin-top: clamp(10px, 1.8cqw, 26px);
  padding-bottom: clamp(16px, 3cqw, 40px);
}

/* 左列「バランスの良い食事」：イラストは左右よりコンパクトめ */
.s5-phase-main .s5-cols .s5-col:nth-child(1) .s5-circle .s5-svg-wrap {
  width: 88%;
  height: 88%;
}

.s5-phase-main .s5-cols .s5-col:nth-child(1) .s5-svg-img {
  max-width: 70%;
  max-height: 70%;
  min-width: 0;
}

/* 中央「こまめに歩く」：丸・イラストのみやや大きく（見出しサイズ・列の高さは左右と同じ） */
.s5-phase-main .s5-cols .s5-col:nth-child(2) .s5-circle {
  max-width: min(352px, 41cqw);
}

/* 中央列：イラストサイズ・縦位置（右列とは別調整） */
.s5-phase-main .s5-cols .s5-col:nth-child(2) .s5-circle .s5-svg-wrap {
  width: 120%;
  height: 120%;
  transform: translate(-50%, calc(-50% + clamp(38px, 4.8cqw, 58px)));
}

.s5-phase-main .s5-cols .s5-col:nth-child(2) .s5-svg-img {
  max-width: 98%;
  max-height: 98%;
  min-width: 0;
}

/* 右列「週2〜3回の筋トレ」：同上 */
.s5-phase-main .s5-cols .s5-col:nth-child(3) .s5-circle .s5-svg-wrap {
  width: 102%;
  height: 102%;
  transform: translate(-50%, calc(-50% + clamp(6px, 1.05cqw, 12px)));
}

.s5-phase-main .s5-cols .s5-col:nth-child(3) .s5-svg-img {
  max-width: 83%;
  max-height: 83%;
  min-width: 0;
}

.s5-col {
  flex: 1 1 0;
  min-width: 0;
  max-width: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2cqw, 16px);
}

.s5-col-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2.5cqw, 24px);
  color: #57b38a;
  margin: 0;
  line-height: 1.35;
  text-align: center;
}

/* 本編：見出しはDOM上は円内。デスクトップでは円の上に見えるよう絶対配置 */
@media (min-width: 768px) {
  .s5-phase-main .s5-col {
    padding-top: clamp(36px, 5.5cqw, 56px);
  }

  .s5-phase-main .s5-circle .s5-col-title {
    position: absolute;
    left: 50%;
    bottom: calc(100% + clamp(8px, 1.2cqw, 16px));
    transform: translateX(-50%);
    margin: 0;
    z-index: 2;
    width: max-content;
    max-width: min(220px, 28cqw);
    text-align: center;
  }
}

.s5-circle {
  width: 100%;
  aspect-ratio: 1;
  max-width: min(320px, 36cqw);
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.5cqw, 18px);
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* 本編3カラム：円は背景、イラストを円より大きく手前に重ねる（はみ出しOK） */
.s5-phase-main .s5-cols,
.s5-phase-main .s5-col {
  overflow: visible;
}

.s5-phase-main .s5-circle {
  position: relative;
  overflow: visible;
  padding: 0;
}

.s5-phase-main .s5-circle .s5-svg-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 130%;
  height: 130%;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s5-phase-main .s5-circle .s5-svg-img {
  width: auto;
  height: auto;
  max-width: 110%;
  max-height: 110%;
  min-width: 92%;
  object-fit: contain;
  object-position: center bottom;
}

.s5-svg-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
}

.s5-svg-img {
  display: block;
  width: 94%;
  height: auto;
  max-height: 94%;
  object-fit: contain;
}

@keyframes s5-char-in {
  from {
    opacity: 0;
    transform: translateY(0.22em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s5-illust-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s5-street-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes s5-woman-slide-in {
  from {
    opacity: 0;
    transform: translateX(-29%);
  }
  to {
    opacity: 1;
    /* 中央よりやや左（店先側）に寄せる */
    transform: translateX(-7%);
  }
}

/* 女性SVG：登場後、画像のみ上下にふわふわ（親のスライドイン transform と分離） */
@keyframes s5-woman-soft-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.s5-char {
  display: inline-block;
  opacity: 0;
}

/* アイドル見出し：2秒から1文字ずつ（メイン見出しと同じ s5-char-in） */
.slide[data-index="4"].anim-s5 .s5-idol-title .s5-char {
  animation: s5-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(2s + 0.15s + var(--ci) * 0.08s);
}

.slide[data-index="4"].anim-s5 .s5-svg-wrap--street {
  animation: s5-street-fade-in 0.85s ease-out 0.5s forwards;
}

.slide[data-index="4"].anim-s5 .s5-svg-wrap--woman {
  animation: s5-woman-slide-in 0.65s cubic-bezier(0.22, 0.8, 0.4, 1) 2s forwards;
}

.slide[data-index="4"].anim-s5 .s5-intro-stage .s5-svg-wrap--woman .s5-svg-img {
  transform-origin: center bottom;
  animation: s5-woman-soft-float 2.75s ease-in-out 2.65s infinite;
}

/* 本編：フェーズ2は音声9秒（JS）→ 見出しは9.5秒から1文字ずつ（+0.5s） */
.slide.active[data-index="4"].anim-s5.anim-s5-phase2 .s5-main-title .s5-char {
  animation: s5-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.5s + var(--ci) * 0.08s);
}

/* カラム全体：11秒 / 12秒 / 13秒（フェーズ2から +2s / +3s / +4s） */
.slide[data-index="4"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col {
  opacity: 0;
  transform: translateY(12px);
  animation: s5-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
}

.slide[data-index="4"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(1) {
  animation-delay: 2s;
}

.slide[data-index="4"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(2) {
  animation-delay: 3s;
}

.slide[data-index="4"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(3) {
  animation-delay: 4s;
}

.slide[data-index="4"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-col .s5-svg-wrap {
  opacity: 1;
  animation: none;
}

.slide[data-index="4"]:not(.active) .s5-char {
  opacity: 0;
  animation: none;
}

.slide[data-index="4"]:not(.anim-s5) .s5-phase-intro .s5-svg-wrap--street,
.slide[data-index="4"]:not(.anim-s5) .s5-phase-intro .s5-svg-wrap--woman,
.slide[data-index="4"]:not(.anim-s5) .s5-phase-intro .s5-svg-wrap--woman .s5-svg-img,
.slide[data-index="4"]:not(.anim-s5) .s5-idol-title .s5-char {
  opacity: 0;
  animation: none !important;
}

.slide[data-index="4"]:not(.anim-s5) .s5-phase-intro .s5-svg-wrap--woman .s5-svg-img {
  transform: none;
}

.slide[data-index="4"]:not(.anim-s5) .s5-idol-title {
  opacity: 0;
}

@media (max-width: 767px) {
  .s5-body {
    padding: 0 2% 12px;
    overflow-y: auto;
  }

  .s5-main-title,
  .s5-idol-title,
  .s6-main-title,
  .s7-main-title,
  .s8-main-title {
    font-size: clamp(14px, 3.8vw, 22px);
  }

  .s5-intro-stage .s5-svg-wrap--woman .s5-svg-img {
    max-height: min(42vw, 360px);
    max-width: 44%;
  }

  .s5-cols {
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 3vw, 24px);
  }

  .s5-col {
    max-width: 100%;
    width: 100%;
  }

  .s5-circle {
    max-width: min(300px, 78vw);
  }

  /* スライド5 本編：上段2＋下段1。スマホは角丸四角（テキストはみ出し対策） */
  .s5-phase-main .s5-col {
    padding-top: 0;
  }

  .s5-phase-main .s5-cols {
    --s5-mobile-gap: clamp(10px, 3.5vw, 18px);
    --s5-mobile-card-w: calc((100% - var(--s5-mobile-gap)) / 2);
    --s5-mobile-card-h: calc(var(--s5-mobile-card-w) * 12 / 10);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5-mobile-gap);
    align-items: start;
  }

  /* 下段1枚の幅＝上段1列ぶん（3枚とも同じ幅・同じ高さに揃える） */
  .s5-phase-main .s5-cols .s5-col:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: var(--s5-mobile-card-w);
    max-width: var(--s5-mobile-card-w);
  }

  /* デスクトップの列別 max-width を上書きし、3枚とも同一サイズに */
  .s5-phase-main .s5-cols .s5-col:nth-child(1) .s5-circle,
  .s5-phase-main .s5-cols .s5-col:nth-child(2) .s5-circle,
  .s5-phase-main .s5-cols .s5-col:nth-child(3) .s5-circle {
    width: 100%;
    max-width: 100%;
    height: var(--s5-mobile-card-h);
    min-height: var(--s5-mobile-card-h);
    max-height: var(--s5-mobile-card-h);
    aspect-ratio: 10 / 12;
    flex-shrink: 0;
  }

  .s5-phase-main .s5-circle {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 100%;
    border-radius: clamp(14px, 4vw, 22px);
    overflow: hidden;
    /* 上だけ広め（見出しテキストの上の余白） */
    padding: clamp(14px, 3.4vw, 22px) clamp(8px, 2.8vw, 12px) clamp(8px, 2.2vw, 12px);
    box-sizing: border-box;
    min-height: 0;
  }

  .s5-phase-main .s5-circle .s5-col-title {
    position: static;
    transform: none;
    z-index: auto;
    align-self: stretch;
    flex-shrink: 0;
    max-width: 100%;
    margin: 0 0 clamp(4px, 1.4vw, 8px);
    padding: 0 clamp(2px, 1vw, 6px);
    font-size: clamp(11px, 3.3vw, 14px);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  /* デスクトップの列別イラスト指定を無効化し、3枚とも同じ枠・同じ比率で表示 */
  .s5-phase-main .s5-cols .s5-col:nth-child(1) .s5-circle .s5-svg-wrap,
  .s5-phase-main .s5-cols .s5-col:nth-child(2) .s5-circle .s5-svg-wrap,
  .s5-phase-main .s5-cols .s5-col:nth-child(3) .s5-circle .s5-svg-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    flex: 1 1 0;
    min-height: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .s5-phase-main .s5-cols .s5-col:nth-child(1) .s5-svg-img,
  .s5-phase-main .s5-cols .s5-col:nth-child(2) .s5-svg-img,
  .s5-phase-main .s5-cols .s5-col:nth-child(3) .s5-svg-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    object-fit: contain;
    object-position: center center;
  }

  /* 「バランスの良い食事」だけわずかに小さく */
  .s5-phase-main .s5-cols .s5-col:nth-child(1) .s5-svg-img {
    max-width: 88%;
    max-height: 88%;
  }

  /* 「週2〜3回の筋トレ」も同様にわずかに小さく */
  .s5-phase-main .s5-cols .s5-col:nth-child(3) .s5-svg-img {
    max-width: 88%;
    max-height: 88%;
  }

  .s5-phase-main .s5-circle .s5-svg-img {
    min-width: 0;
  }

  .s5-col-title {
    font-size: clamp(16px, 4.5vw, 22px);
  }
}

/* ========== スライド6：見出し（スライド5同様）→ 中央イラスト重ね順 ========== */
.slide06-content.slide02-content {
  min-height: 0;
}

.s6-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 3% 2cqw;
  gap: clamp(8px, 1.5cqw, 18px);
}

/* スライド5の .s5-phase-intro と同様：見出し → イラスト */
.s6-phase-intro {
  --s6-p1-t0: 0.5s;
  --s6-p2-t0: 2.32s;
  /* フェーズ2最終文字の演出終了 + 余白 → SVG 開始 */
  --s6-after-text: calc(var(--s6-p2-t0) + 17 * 0.08s + 0.45s + 0.3s);
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 16px);
}

.s6-illust-stage {
  position: relative;
  flex: 1;
  min-height: min(40cqw, 46vh);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3レイヤー共通の基準幅（中央＋吹き出しは同じ比率で拡大） */
.s6-illust-stack {
  --s6-base: min(64cqw, min(680px, 92vw));
  position: relative;
  width: 100%;
  height: 100%;
}

.s6-svg-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* ベースイラスト slide06_01：レイヤー内 上下左右センター（画像サイズは max-* を維持） */
.s6-svg-wrap--01 {
  align-items: center;
  justify-content: center;
  padding: 0 3%;
}

.s6-svg-wrap--01 .s6-svg-img {
  width: auto;
  height: auto;
  max-width: var(--s6-base);
  max-height: 78%;
  object-fit: contain;
}

/* slide06_02：右吹き出し（音声5秒で表示・下からフェードイン後、画像がふわふわ）— 中央イラストに寄せる */
.s6-svg-wrap--02 {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 4.5% 1.25% 0 0;
}

.s6-svg-wrap--02 .s6-svg-img {
  width: auto;
  height: auto;
  max-width: calc(var(--s6-base) * 0.4);
  object-fit: contain;
  transform-origin: center center;
}

/* slide06_03：左吹き出し（音声11秒・同上）— 中央イラストに寄せる */
.s6-svg-wrap--03 {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3.5% 0 0 1.25%;
}

.s6-svg-wrap--03 .s6-svg-img {
  width: auto;
  height: auto;
  max-width: calc(var(--s6-base) * 0.42);
  object-fit: contain;
  transform-origin: center center;
}

@keyframes s6-illust-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 右吹き出し（02）：下からふわっとフェードイン → 着地はやや上 */
@keyframes s6-bubble-02-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(-12px);
  }
}

/* 左吹き出し（03）：下からふわっとフェードイン → 着地はやや上（PC） */
@keyframes s6-bubble-03-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(-6px);
  }
}

/* slide06_03_sp 用：SP 幅（中央イラストとの距離を詰めつつやや上） */
@keyframes s6-bubble-03-enter-sp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(calc(-10px - 3.5vmin));
  }
}

/* slide06_01 ベース／吹き出し画像：登場後、その場で上下にふわふわ（親の入りアニメと分離） */
@keyframes s6-bubble-soft-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* フェーズ1ブロック全体をフェーズ2開始前にフェードアウト */
@keyframes s6-phase1-wrap {
  0%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.slide.active[data-index="5"].anim-s6 .s6-title-phase--1 {
  animation: s6-phase1-wrap 2.28s ease-in-out forwards;
}

.slide.active[data-index="5"].anim-s6 .s6-title-phase--2 {
  opacity: 1;
}

.slide.active[data-index="5"].anim-s6 .s6-title-phase--1 .s6-char {
  animation: s5-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(var(--s6-p1-t0, 0.5s) + var(--ci) * 0.08s);
}

.slide.active[data-index="5"].anim-s6 .s6-title-phase--2 .s6-char {
  animation: s5-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(var(--s6-p2-t0, 2.32s) + var(--ci) * 0.08s);
}

.slide[data-index="5"]:not(.active) .s6-title-phase .s6-char,
.slide[data-index="5"]:not(.anim-s6) .s6-title-phase .s6-char {
  opacity: 0;
  animation: none !important;
}

.slide[data-index="5"]:not(.active) .s6-title-phase,
.slide[data-index="5"]:not(.anim-s6) .s6-title-phase {
  opacity: 0;
  animation: none !important;
}

/* 見出しテキスト終了後にベース SVG */
.slide[data-index="5"].anim-s6 .s6-svg-wrap--01 {
  animation: s6-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(var(--s6-after-text, 4.4s) + 0.05s);
}

.slide[data-index="5"].anim-s6 .s6-svg-wrap--01 .s6-svg-img {
  animation: s6-bubble-soft-float 2.75s ease-in-out
    calc(var(--s6-after-text, 4.4s) + 0.6s) infinite;
}

/* 吹き出し：音声同期 5秒 / 11秒で表示 → 1秒かけて下からふわっと入る → 画像がふわふわ */
.slide[data-index="5"].anim-s6 .s6-svg-wrap--02 {
  animation: s6-bubble-02-enter 1s ease-out 5s 1 normal both;
}
.slide[data-index="5"].anim-s6 .s6-svg-wrap--03 {
  animation: s6-bubble-03-enter 1s ease-out 11s 1 normal both;
}
.slide[data-index="5"].anim-s6 .s6-svg-wrap--02 .s6-svg-img {
  animation: s6-bubble-soft-float 2.75s ease-in-out 6s infinite;
}
.slide[data-index="5"].anim-s6 .s6-svg-wrap--03 .s6-svg-img {
  animation: s6-bubble-soft-float 2.75s ease-in-out 12s infinite;
}

.slide[data-index="5"]:not(.anim-s6) .s6-svg-wrap--01 .s6-svg-img,
.slide[data-index="5"]:not(.active) .s6-svg-wrap--01 .s6-svg-img,
.slide[data-index="5"]:not(.anim-s6) .s6-svg-wrap--02 .s6-svg-img,
.slide[data-index="5"]:not(.active) .s6-svg-wrap--02 .s6-svg-img,
.slide[data-index="5"]:not(.anim-s6) .s6-svg-wrap--03 .s6-svg-img,
.slide[data-index="5"]:not(.active) .s6-svg-wrap--03 .s6-svg-img {
  animation: none !important;
}

@media (max-width: 767px) {
  .s6-body {
    padding: 0 2% 12px;
    overflow-y: auto;
  }

  .s6-illust-stage {
    min-height: min(44vw, 36vh);
  }

  .s6-illust-stack {
    --s6-base: min(90vw, min(94cqw, 580px));
  }

  /* slide06_01：SP でベースイラストをやや小さく */
  .s6-svg-wrap--01 .s6-svg-img {
    max-height: 56%;
    max-width: calc(var(--s6-base) * 0.82);
  }

  .s6-svg-wrap--02 {
    padding: 3.5% 0.75% 0 0;
  }

  .s6-svg-wrap--03 {
    padding: 0 0 0 0.75%;
    align-items: flex-start;
  }

  /* SP：吹き出し全体の着地を上へ（margin より親の enter アニメが効く） */
  .slide[data-index="5"].anim-s6 .s6-svg-wrap--03 {
    animation: s6-bubble-03-enter-sp 1s ease-out 11s 1 normal both;
  }

}

/* ========== スライド7：ショッピング場面＋左右吹き出し（同スケール） ========== */
.slide07-content.slide02-content {
  min-height: 0;
}

.s7-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 3% 2cqw;
  gap: clamp(8px, 1.5cqw, 18px);
}

/* スライド6の .s6-phase-intro と同様：見出し → イラスト */
.s7-phase-intro {
  --s7-p1-t0: 0.5s;
  /* 最終文字の演出終了 + 余白 → SVG 開始（31文字・index 0〜30） */
  --s7-after-text: calc(var(--s7-p1-t0) + 30 * 0.08s + 0.45s + 0.3s);
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 16px);
}

.s7-illust-stage {
  position: relative;
  flex: 1;
  min-height: min(40cqw, 46vh);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s7-illust-stack {
  --s7-base: min(64cqw, min(680px, 92vw));
  /* 吹き出し：メインイラストに対して従属するサイズ（参考：高さのおおよそ15〜20%相当） */
  --s7-bubble-max-w: min(calc(var(--s7-base) * 0.32), min(42vw, 300px));
  --s7-bubble-max-h: min(20cqw, 19vh, 168px);
  /* 音声同期：02→10秒、03→14秒で下からフェードイン → その後ふわふわ */
  --s7-voice-bubble02: 10s;
  --s7-voice-bubble03: 14s;
  --s7-bubble-enter: 0.7s;
  position: relative;
  width: 100%;
  height: 100%;
}

.s7-svg-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* ベース slide07_01 ＋ slide07_04 を同一位置に重ねる */
.s7-svg-wrap--01 {
  align-items: stretch;
  justify-content: center;
  padding: 0 3% 2%;
}

/* 親の高さを確定させないと img の max-height: % が効かず表示されない */
.s7-base-pair {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.s7-base-pair .s7-svg-img--under {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--s7-base);
  max-height: 70%;
  object-fit: contain;
  flex-shrink: 0;
}

.s7-base-pair .s7-svg-img--over {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: var(--s7-base);
  max-height: 70%;
  object-fit: contain;
  pointer-events: none;
}

/* slide07_02：左（女性・肩〜頭上のあたり）— 右上寄せ（着地は s7-bubble-in-02） */
.s7-svg-wrap--02 {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.5% 0 0 30%;
}

.s7-svg-wrap--02 .s7-svg-img {
  width: auto;
  height: auto;
  max-width: var(--s7-bubble-max-w);
  max-height: var(--s7-bubble-max-h);
  object-fit: contain;
}

/* slide07_03：右（男性・頭横のスペース） */
.s7-svg-wrap--03 {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 7% 10% 0 0;
  transform: translateY(10px);
}

.s7-svg-wrap--03 .s7-svg-img {
  width: auto;
  height: auto;
  max-width: var(--s7-bubble-max-w);
  max-height: var(--s7-bubble-max-h);
  object-fit: contain;
}

@keyframes s7-illust-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* slide07_03：下からふわっとフェードイン（親ラップ用） */
@keyframes s7-bubble-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(10px);
  }
}

/* slide07_02 専用：下からふわっとフェードイン → 着地は右上寄り */
@keyframes s7-bubble-in-02 {
  from {
    opacity: 0;
    transform: translate(8px, 22px);
  }
  to {
    opacity: 1;
    transform: translate(8px, -8px);
  }
}

/* slide07_02 / 03 吹き出し画像：親の入りアニメ終了後に上下ふわふわ（スライド6の吹き出しと同系） */
@keyframes s7-bubble-soft-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* slide07_04：中央基準のまま上下にふわふわ（親の入りアニメと分離） */
@keyframes s7-over-soft-float {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, calc(-50% - 5px));
  }
}

/* フェーズ1：1文字ずつ（.anim-s7 付与後） */
.slide.active[data-index="6"].anim-s7 .s7-title-phase--1 .s7-char {
  animation: s5-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(var(--s7-p1-t0, 0.5s) + var(--ci) * 0.08s);
}

.slide[data-index="6"]:not(.active) .s7-title-phase--1 .s7-char,
.slide[data-index="6"]:not(.anim-s7) .s7-title-phase--1 .s7-char {
  opacity: 0;
  animation: none !important;
}

/* フェーズ2：音声14秒で .anim-s7-phase2 付与後に1文字ずつ＋フェード切替 */
.slide.active[data-index="6"].anim-s7.anim-s7-phase2 .s7-title-phase--2 .s7-char {
  animation: s5-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.15s + var(--ci) * 0.08s);
}

.slide[data-index="6"]:not(.anim-s7-phase2) .s7-title-phase--2 .s7-char,
.slide[data-index="6"]:not(.active) .s7-title-phase--2 .s7-char {
  opacity: 0;
  animation: none !important;
}

/* 見出しテキスト終了後に SVG（元の 1.55s / 2.1s / 2.65s の相対間隔を維持） */
.slide[data-index="6"].anim-s7 .s7-svg-wrap--01 {
  animation: s7-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(var(--s7-after-text, 3.65s) + 0.05s);
}
.slide[data-index="6"].anim-s7 .s7-svg-wrap--02 {
  animation: s7-bubble-in-02 var(--s7-bubble-enter, 0.7s) cubic-bezier(0.22, 0.85, 0.35, 1) forwards;
  animation-delay: var(--s7-voice-bubble02, 10s);
}
.slide[data-index="6"].anim-s7 .s7-svg-wrap--03 {
  animation: s7-bubble-in var(--s7-bubble-enter, 0.7s) cubic-bezier(0.22, 0.85, 0.35, 1) forwards;
  animation-delay: var(--s7-voice-bubble03, 14s);
}

/* 吹き出し：入場終了直後からその場でふわふわ（img に付与して親の transform と分離） */
.slide[data-index="6"].anim-s7 .s7-svg-wrap--02 .s7-svg-img {
  animation: s7-bubble-soft-float 2.75s ease-in-out
    calc(var(--s7-voice-bubble02, 10s) + var(--s7-bubble-enter, 0.7s) + 0.06s) infinite;
  transform-origin: center center;
}

.slide[data-index="6"].anim-s7 .s7-svg-wrap--03 .s7-svg-img {
  animation: s7-bubble-soft-float 2.75s ease-in-out
    calc(var(--s7-voice-bubble03, 14s) + var(--s7-bubble-enter, 0.7s) + 0.06s) infinite;
  transform-origin: center center;
}

.slide[data-index="6"]:not(.anim-s7) .s7-svg-wrap--02 .s7-svg-img,
.slide[data-index="6"]:not(.active) .s7-svg-wrap--02 .s7-svg-img,
.slide[data-index="6"]:not(.anim-s7) .s7-svg-wrap--03 .s7-svg-img,
.slide[data-index="6"]:not(.active) .s7-svg-wrap--03 .s7-svg-img {
  animation: none !important;
}

/* slide07_04：ベース表示後に無限ループ（遅延は 01 の入り終了 ≒ +0.6s） */
.slide[data-index="6"].anim-s7 .s7-base-pair .s7-svg-img--over {
  animation: s7-over-soft-float 2.75s ease-in-out calc(var(--s7-after-text, 3.65s) + 0.6s) infinite;
}

.slide[data-index="6"]:not(.anim-s7) .s7-base-pair .s7-svg-img--over,
.slide[data-index="6"]:not(.active) .s7-base-pair .s7-svg-img--over {
  animation: none !important;
}

@media (max-width: 767px) {
  .s7-body {
    padding: 0 2% 12px;
    overflow-y: auto;
  }

  .s7-illust-stage {
    min-height: min(44vw, 36vh);
  }

  .s7-illust-stack {
    --s7-base: min(90vw, min(94cqw, 580px));
    --s7-bubble-max-w: min(calc(var(--s7-base) * 0.34), 76vw);
    --s7-bubble-max-h: min(26cqw, 22vh, 150px);
  }

  .s7-base-pair .s7-svg-img--under,
  .s7-base-pair .s7-svg-img--over {
    max-height: 66%;
  }

  .s7-svg-wrap--02 {
    padding: 2% 0 0 18%;
  }

  .s7-svg-wrap--03 {
    padding: 9% 4% 0 0;
  }
}

/* ========== スライド8：オフィス＋右吹き出し1枚 ========== */
.slide08-content.slide02-content {
  min-height: 0;
}

.s8-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 3% 2cqw;
  gap: clamp(8px, 1.5cqw, 18px);
}

/* スライド6/7の .s6-phase-intro / .s7-phase-intro と同様：見出し（h3）→ イラスト */
.s8-phase-intro {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 16px);
}

.s8-illust-stage {
  position: relative;
  flex: 1;
  min-height: min(46cqw, 52vh);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s8-illust-stack {
  --s8-base: min(76cqw, min(820px, 97vw));
  position: relative;
  width: 100%;
  height: 100%;
}

.s8-svg-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.s8-svg-wrap--01 {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 6% 2% 12%;
}

.s8-svg-wrap--01 .s8-svg-img {
  width: auto;
  height: auto;
  max-width: min(100%, calc(var(--s8-base) * 1.15));
  max-height: 94%;
  object-fit: contain;
  transform: translate(3.5%, -3%);
}

/* slide08_02：男性の右側の吹き出し（2行テキスト分やや広め） */
.s8-svg-wrap--02 {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2.5% 3% 0 0;
  transform: translateY(10px);
}

.s8-svg-wrap--02 .s8-svg-img {
  width: auto;
  height: auto;
  max-width: calc(var(--s8-base) * 0.38);
  object-fit: contain;
  transform: translate(-5%, -6%);
}

/* スライド5〜7と同系。2フェーズは .s8-title-stack（スライド7の .s7-title-stack と同系） */
.s8-main-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 3.2cqw, 30px);
  color: #333;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.2cqw 2% 0.5cqw;
  line-height: 1.35;
  text-align: center;
  flex-shrink: 0;
}

.s8-title-stack {
  position: relative;
  display: block;
  width: 100%;
  min-height: min(7rem, 30cqw);
}

.s8-title-phase {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 2%;
  pointer-events: none;
}

.s8-title-phase--1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.s8-title-phase--2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s ease 0.12s;
}

.slide.active[data-index="7"].anim-s8-phase2 .s8-title-phase--1 {
  opacity: 0;
}

.slide.active[data-index="7"].anim-s8-phase2 .s8-title-phase--2 {
  opacity: 1;
}

.s8-title-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.04em;
}

@keyframes s8-char-in {
  from {
    opacity: 0;
    transform: translateY(0.22em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s8-illust-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s8-bubble-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(10px);
  }
}

/* slide08_01 / 02：入場後、画像のみ上下ふわふわ（位置調整の translate はキーフレームに内包・親の入りアニメと分離） */
@keyframes s8-illust01-soft-float {
  0%,
  100% {
    transform: translate(3.5%, -3%) translateY(0);
  }
  50% {
    transform: translate(3.5%, -3%) translateY(-5px);
  }
}

@keyframes s8-bubble02-soft-float {
  0%,
  100% {
    transform: translate(-5%, -6%) translateY(0);
  }
  50% {
    transform: translate(-5%, -6%) translateY(-5px);
  }
}

@keyframes s8-illust01-soft-float-sp {
  0%,
  100% {
    transform: translate(2vw, -2vw) translateY(0);
  }
  50% {
    transform: translate(2vw, -2vw) translateY(-4px);
  }
}

@keyframes s8-bubble02-soft-float-sp {
  0%,
  100% {
    transform: translate(-3vw, -2.5vw) translateY(0);
  }
  50% {
    transform: translate(-3vw, -2.5vw) translateY(-4px);
  }
}

.s8-title-phase .s8-char {
  display: inline-block;
  opacity: 0;
}

/* フェーズ1：音声0.5秒から1文字ずつ（35文字） */
.slide.active[data-index="7"].anim-s8 .s8-title-phase--1 .s8-char {
  animation: s8-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.5s + var(--ci) * 0.08s);
}

.slide[data-index="7"]:not(.active) .s8-title-phase--1 .s8-char,
.slide[data-index="7"]:not(.anim-s8) .s8-title-phase--1 .s8-char {
  opacity: 0;
  animation: none !important;
}

/* フェーズ2：音声7秒でフェード切替後、1文字ずつ（15文字） */
.slide.active[data-index="7"].anim-s8.anim-s8-phase2 .s8-title-phase--2 .s8-char {
  animation: s8-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.15s + var(--ci) * 0.08s);
}

.slide[data-index="7"]:not(.anim-s8-phase2) .s8-title-phase--2 .s8-char,
.slide[data-index="7"]:not(.active) .s8-title-phase--2 .s8-char {
  opacity: 0;
  animation: none !important;
}

/* slide08_01：音声2秒／slide08_02：音声10秒で表示 */
.slide[data-index="7"].anim-s8 .s8-svg-wrap--01 {
  animation: s8-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 2s forwards;
}
.slide[data-index="7"].anim-s8 .s8-svg-wrap--02 {
  animation: s8-bubble-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 10s forwards;
}

.slide[data-index="7"].anim-s8 .s8-svg-wrap--01 .s8-svg-img {
  animation: s8-illust01-soft-float 2.75s ease-in-out calc(2s + 0.55s + 0.06s) infinite;
  transform-origin: center center;
}

.slide[data-index="7"].anim-s8 .s8-svg-wrap--02 .s8-svg-img {
  animation: s8-bubble02-soft-float 2.75s ease-in-out calc(10s + 0.55s + 0.06s) infinite;
  transform-origin: center center;
}

.slide[data-index="7"]:not(.anim-s8) .s8-svg-wrap--01 .s8-svg-img,
.slide[data-index="7"]:not(.active) .s8-svg-wrap--01 .s8-svg-img,
.slide[data-index="7"]:not(.anim-s8) .s8-svg-wrap--02 .s8-svg-img,
.slide[data-index="7"]:not(.active) .s8-svg-wrap--02 .s8-svg-img {
  animation: none !important;
}

@media (max-width: 767px) {
  .s8-body {
    padding: 0 2% 12px;
    overflow-y: auto;
  }

  .s8-illust-stage {
    min-height: min(50vw, 42vh);
  }

  .s8-illust-stack {
    --s8-base: min(96vw, min(98cqw, 640px));
  }

  .s8-svg-wrap--01 {
    padding: 0 4% 2% 10%;
  }

  .s8-svg-wrap--01 .s8-svg-img {
    max-width: min(100%, calc(var(--s8-base) * 1.12));
    max-height: 92%;
    transform: translate(2vw, -2vw);
  }

  .s8-svg-wrap--02 {
    padding: 2% 2% 0 0;
  }

  .s8-svg-wrap--02 .s8-svg-img {
    transform: translate(-3vw, -2.5vw);
  }

  .slide[data-index="7"].anim-s8 .s8-svg-wrap--01 .s8-svg-img {
    animation: s8-illust01-soft-float-sp 2.75s ease-in-out calc(2s + 0.55s + 0.06s) infinite;
    transform-origin: center center;
  }

  .slide[data-index="7"].anim-s8 .s8-svg-wrap--02 .s8-svg-img {
    animation: s8-bubble02-soft-float-sp 2.75s ease-in-out calc(10s + 0.55s + 0.06s) infinite;
    transform-origin: center center;
  }
}

/* ========== スライド9：終了ページ（セリフ＋左右デコ＋イラスト） ========== */
.slide-card.slide-card--finish {
  position: relative;
  background-color: #fffcf1;
}

/* 達成：canvas-confetti Stars（カード内 canvas） */
.slide-finish-celebration {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.slide-finish-confetti-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.slide-finish {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4cqw, 32px) 5%;
  gap: clamp(16px, 2cqw, 28px);
}

.slide-finish-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2cqw, 18px);
  width: 100%;
  flex-shrink: 0;
}

.slide-finish-deco {
  flex: 0 0 auto;
  width: clamp(28px, 8cqw, 78px);
  height: auto;
  object-fit: contain;
  align-self: center;
}

.slide-finish-text {
  flex: 0 1 auto;
  text-align: center;
  min-width: 0;
  padding: 0 2px;
}

.slide-finish-line {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: #333;
  line-height: 1.45;
}

.slide-finish-line--1 {
  font-size: clamp(12px, 2.6cqw, 24px);
}

.slide-finish-line--2 {
  font-size: clamp(14px, 3cqw, 28px);
  margin-top: 0.18em;
}

@keyframes finish-char-in {
  from {
    opacity: 0;
    transform: translateY(0.22em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.finish-char {
  display: inline-block;
  opacity: 0;
}

.slide.active[data-index="15"] .finish-char {
  animation: finish-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.2s + var(--ci) * 0.07s);
}

.slide[data-index="15"]:not(.active) .finish-char {
  opacity: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .slide.active[data-index="15"] .finish-char {
    animation: none;
    opacity: 1;
  }
}

.slide-finish-illust {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 0;
  padding-block: clamp(6px, 1.2cqw, 18px);
}

img.slide-finish-illust {
  display: block;
  width: clamp(160px, 34cqw, 340px);
  height: auto;
  object-fit: contain;
}

.slide-finish-img {
  max-width: min(70%, 480px);
  max-height: min(34vh, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
}

.slide-finish-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8cqw, 20px);
  width: 100%;
  padding-top: clamp(16px, 2.4cqw, 32px);
  margin-top: 0;
}

@keyframes finish-btn-heartbeat {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  }
  12% {
    transform: scale(1.09);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  }
  24% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  }
  38% {
    transform: scale(1.09);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  }
  52% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  }
}

.slide.active[data-index="15"] .slide-finish-test-btn {
  animation: finish-btn-heartbeat 2.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .slide.active[data-index="15"] .slide-finish-test-btn {
    animation: none;
  }
}

.slide-finish-test-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2cqw, 14px);
  min-width: clamp(160px, 24cqw, 240px);
  padding: clamp(16px, 2.4cqw, 28px) clamp(14px, 2cqw, 24px);
  border: none;
  border-radius: clamp(10px, 1.6cqw, 16px);
  box-sizing: border-box;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background-color: #1e9966;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: background-color 0.25s ease, filter 0.12s ease, box-shadow 0.25s ease;
}

.slide-finish-test-btn__icon {
  flex-shrink: 0;
  width: clamp(48px, 7.5cqw, 80px);
  height: clamp(48px, 7.5cqw, 80px);
  object-fit: contain;
}

.slide-finish-test-btn__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.slide-finish-test-btn__title {
  font-size: clamp(14px, 2.4cqw, 18px);
  line-height: 1.2;
}

.slide-finish-test-btn__sub {
  font-size: clamp(10px, 1.6cqw, 13px);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.9;
}

.slide-finish-test-btn:hover {
  background-color: #1a8a5c;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.13);
}

.slide-finish-test-btn:active {
  background-color: #16734e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  filter: brightness(0.92);
}

.slide-finish-note {
  width: 100%;
  margin-top: clamp(10px, 1.4cqw, 16px);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(11px, 1.4vw, 16px);
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 767px) {
  .slide-finish {
    justify-content: center;
    padding: clamp(14px, 4.5vw, 32px) 3%;
    gap: clamp(18px, 5vw, 32px);
  }

  .slide-finish-head {
    gap: 2px;
  }

  /* 台詞・イラスト・ボタンのあいだを広げる（PC の負マージンを打ち消し） */
  .slide-finish-illust {
    margin-top: 0;
    margin-bottom: 0;
    padding-block: clamp(4px, 1.5vw, 14px);
  }

  img.slide-finish-illust {
    width: clamp(180px, 56vw, 300px);
  }

  .slide-finish-deco {
    width: clamp(22px, 12vw, 54px);
  }

  .slide-finish-line--1 {
    font-size: clamp(13px, 4vw, 21px);
  }

  .slide-finish-line--2 {
    font-size: clamp(14px, 4.5vw, 24px);
  }

  .slide-finish-img {
    max-width: min(85%, 420px);
    max-height: min(38vh, 58cqw);
  }

  .slide-finish-actions {
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 2.5vw, 14px);
    padding-top: clamp(12px, 3.5vw, 26px);
    margin-top: 0;
  }

  .slide-finish-test-btn {
    flex-direction: column;
    width: min(90%, 320px);
    min-width: unset;
    padding: clamp(12px, 3vw, 18px) clamp(14px, 3.5vw, 22px);
    border-radius: clamp(8px, 2.5vw, 14px);
    gap: clamp(8px, 2.5vw, 12px);
    justify-content: center;
    align-items: center;
  }

  .slide-finish-test-btn__icon {
    width: clamp(32px, 8vw, 48px);
    height: clamp(32px, 8vw, 48px);
  }

  .slide-finish-test-btn__text {
    align-items: center;
    text-align: center;
  }

  .slide-finish-test-btn__title {
    font-size: clamp(13px, 3.8vw, 16px);
  }

  .slide-finish-test-btn__sub {
    font-size: clamp(10px, 2.8vw, 12px);
  }

  .slide-finish-test-btn:hover {
    background-color: #1a8a5c;
  }

  .slide-finish-test-btn:active {
    background-color: #16734e;
    filter: brightness(0.92);
  }

  .slide-finish-note {
    font-size: clamp(11px, 1.4vw, 16px);
    text-align: left;
    margin-top: clamp(8px, 2vw, 12px);
  }
}

/* ============================================================
   子宮頸がん用：プレースホルダーエリア
   ============================================================ */
.slide-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(4px, 1cqw, 14px);
  min-height: 0;
}

@media (max-width: 767px) {
  .slide-placeholder {
    justify-content: flex-start;
  }
}

/* スライド3：画像の白背景ボックスを解除 */
.slide[data-index="2"] .slide-image-box {
  background: none;
  border-radius: 0;
  padding: 0;
  margin-top: clamp(20px, 4cqw, 50px);
}

/* ============================================================
   乳がん用：スライド4　キャッチコピー（イラストの上に表示・重ねて入れ替え）
   1行目→0.3s／2行目→4.5s／3行目→8s／4行目→11.5s、各行1文字ずつフェードイン後、
   次の行が始まる前にフェードアウトして入れ替わる
   ============================================================ */
.s4-catch-title {
  display: grid;
  margin: 0 0 clamp(10px, 1.6cqw, 20px);
  padding: 0 2%;
}

.s4-catch-title > * {
  grid-area: 1 / 1;
}

.s4-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.s4-catch-char {
  display: inline-block;
  opacity: 0;
}

/* 2行目以降はデフォルト非表示（1文字ずつのアニメーションで表示するまで隠す） */
.s4-catch-line--2 .s4-catch-char,
.s4-catch-line--3 .s4-catch-char,
.s4-catch-line--4 .s4-catch-char {
  opacity: 0;
}

@keyframes s4-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、4sでフェードアウト（2行目に入れ替わる） */
.slide.active[data-index="3"] .s4-catch-line--1 .s4-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .s4-catch-line--1 {
  animation: s4-catch-line-out 0.6s ease 4s both;
}

/* 2行目：4.5s→文字表示、7.5sでフェードアウト（3行目に入れ替わる） */
.slide.active[data-index="3"] .s4-catch-line--2 .s4-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(4.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .s4-catch-line--2 {
  animation: s4-catch-line-out 0.6s ease 7.5s both;
}

/* 3行目：8s→文字表示、11sでフェードアウト（4行目に入れ替わる） */
.slide.active[data-index="3"] .s4-catch-line--3 .s4-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(8s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .s4-catch-line--3 {
  animation: s4-catch-line-out 0.6s ease 11s both;
}

/* 4行目：11.5s→文字表示、以降は表示したまま */
.slide.active[data-index="3"] .s4-catch-line--4 .s4-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(11.5s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="3"]:not(.active) .s4-catch-line--1,
.slide[data-index="3"]:not(.active) .s4-catch-line--2,
.slide[data-index="3"]:not(.active) .s4-catch-line--3,
.slide[data-index="3"]:not(.active) .s4-catch-line--4 {
  animation: none;
}

.slide[data-index="3"]:not(.active) .s4-catch-char {
  opacity: 0;
  animation: none;
}

/* スライド4：画像を左右に並べて配置 */
.slide04-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  width: 100%;
  margin-top: clamp(10px, 2.5cqw, 30px);
}

.slide04-image-box {
  flex: 0 0 auto;
  width: 36cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide04-image-box--left {
  width: 44cqw;
}

.slide04-image-box__img,
.slide04-image-box__svg {
  display: block;
  width: 100%;
  height: auto;
}

.slide04-image-box__svg svg {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ：PCと同じ左右横並びを維持し、幅だけ狭幅向けに縮小 */
@media (max-width: 767px) {
  .slide04-images {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5vw;
    margin-top: 1vw;
    padding: 0 1% 2%;
    min-height: 0;
  }

  .slide04-image-box {
    width: 40%;
  }

  .slide04-image-box--left {
    width: 52%;
  }
}

/* ============================================================
   乳がん用：スライド4　slide04_01.svg 登場アニメーション
   （全体→0sでフェードイン／s04_breast_diagram・s04_anatomy_labelsは追従／
   　s04_cancer_labelのみ4sでフェードイン後、ハートビート）
   ============================================================ */
#slide04SvgWrap01 svg {
  opacity: 0;
}

#slide04SvgWrap01 #s04_x5F_cancer_x5F_label {
  opacity: 0;
}

#slide04SvgWrap01 #s04_x5F_cancer_x5F_label_box {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@keyframes s4-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.12); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  70% { transform: scale(1); }
}

.slide.active[data-index="3"] #slide04SvgWrap01 svg {
  animation: s4-fade-in 0.8s ease 0s forwards;
}

/* 引き出し線を含む全体：4sでフェードイン（以降は引き出し線は固定のまま） */
.slide.active[data-index="3"] #slide04SvgWrap01 #s04_x5F_cancer_x5F_label {
  animation: s4-fade-in 0.8s ease 4s forwards;
}

/* ボックス＋テキストのみ：フェードイン完了後にハートビート */
.slide.active[data-index="3"] #slide04SvgWrap01 #s04_x5F_cancer_x5F_label_box {
  animation: s4-heartbeat 1.2s ease-in-out 4.8s infinite;
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="3"]:not(.active) #slide04SvgWrap01 svg,
.slide[data-index="3"]:not(.active) #slide04SvgWrap01 #s04_x5F_cancer_x5F_label {
  opacity: 0;
  animation: none;
}

.slide[data-index="3"]:not(.active) #slide04SvgWrap01 #s04_x5F_cancer_x5F_label_box {
  animation: none;
  transform: none;
}

/* ============================================================
   乳がん用：スライド4　slide04_02.svg 登場アニメーション
   （全体→11sでフェードイン／s04_circle_middle→11.5s／s04_circle_outer→12s）
   s04_hormone_text・s04_circle_inner は全体のフェードインに追従（固定）
   ============================================================ */
#slide04SvgWrap02 svg {
  opacity: 0;
}

#slide04SvgWrap02 #s04_x5F_circle_x5F_middle,
#slide04SvgWrap02 #s04_x5F_circle_x5F_outer {
  opacity: 0;
}

@keyframes s4-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide.active[data-index="3"] #slide04SvgWrap02 svg {
  animation: s4-fade-in 0.8s ease 11s forwards;
}

.slide.active[data-index="3"] #slide04SvgWrap02 #s04_x5F_circle_x5F_middle {
  animation: s4-fade-in 0.8s ease 11.5s forwards;
}

.slide.active[data-index="3"] #slide04SvgWrap02 #s04_x5F_circle_x5F_outer {
  animation: s4-fade-in 0.8s ease 12s forwards;
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="3"]:not(.active) #slide04SvgWrap02 svg,
.slide[data-index="3"]:not(.active) #slide04SvgWrap02 #s04_x5F_circle_x5F_middle,
.slide[data-index="3"]:not(.active) #slide04SvgWrap02 #s04_x5F_circle_x5F_outer {
  opacity: 0;
  animation: none;
}

.slide-image-box__svg {
  width: 100%;
}

.slide-image-box__svg svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ============================================================
   乳がん用：スライド3　SVGパーツごとの登場アニメーション
   （乳がん→1s／大腸がん→6.6s／肺がん→7.6s／膵臓がん→8.6s、ポンと登場）
   ============================================================ */
#slide03SvgWrap #s03_x5F_breast_x5F_cancer,
#slide03SvgWrap #s03_x5F_pancreatic_x5F_cancer,
#slide03SvgWrap #s03_x5F_lung_x5F_cancer,
#slide03SvgWrap #s03_x5F_colorectal_x5F_cancer {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  transform: scale(0.3);
}

@keyframes s3-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes s3-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 乳がん：1sでポン→そのまま上下にふわふわ */
.slide.active[data-index="2"] #slide03SvgWrap #s03_x5F_breast_x5F_cancer {
  animation:
    s3-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both,
    s3-float 2.6s ease-in-out 1.6s infinite;
}

/* 膵臓がん：8.6sでポン */
.slide.active[data-index="2"] #slide03SvgWrap #s03_x5F_pancreatic_x5F_cancer {
  animation: s3-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 8.6s both;
}

/* 肺がん：7.6sでポン */
.slide.active[data-index="2"] #slide03SvgWrap #s03_x5F_lung_x5F_cancer {
  animation: s3-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 7.6s both;
}

/* 大腸がん：6.6sでポン */
.slide.active[data-index="2"] #slide03SvgWrap #s03_x5F_colorectal_x5F_cancer {
  animation: s3-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 6.6s both;
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="2"]:not(.active) #slide03SvgWrap #s03_x5F_breast_x5F_cancer,
.slide[data-index="2"]:not(.active) #slide03SvgWrap #s03_x5F_pancreatic_x5F_cancer,
.slide[data-index="2"]:not(.active) #slide03SvgWrap #s03_x5F_lung_x5F_cancer,
.slide[data-index="2"]:not(.active) #slide03SvgWrap #s03_x5F_colorectal_x5F_cancer {
  opacity: 0;
  transform: scale(0.3);
  animation: none;
}

.slide-image-box {
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3cqw;
  width: 88%;
  max-width: 100%;
  box-sizing: border-box;
}

.slide-image-box__img {
  display: block;
  width: 100%;
  height: auto;
}

#slide02SvgWrap svg {
  display: block;
  width: 100%;
  height: auto;
}

.slide-image-note {
  width: 88%;
  margin: clamp(10px, 2.5cqw, 24px) 0 0;
  font-size: clamp(8px, 1.4cqw, 13px);
  color: #333;
  text-align: center;
  line-height: 1.4;
}

/* ============================================================
   乳がん用：スライド6　キャッチコピー（コンテンツの上に重ねて表示・入れ替え）
   0.3s→4s→9.5s→15s→18s→22.5s→27.5s→30.5s→34s、各行1文字ずつフェードイン後、
   次の行が始まる前にフェードアウトして入れ替わる
   ============================================================ */
.slide06-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide06-catch-title > * {
  grid-area: 1 / 1;
}

.slide06-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide06-catch-char {
  display: inline-block;
  opacity: 0;
}

@keyframes slide06-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、3.5sでフェードアウト（2行目に入れ替わる） */
.slide.active[data-index="5"] .slide06-catch-line--1 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .slide06-catch-line--1 {
  animation: slide06-catch-line-out 0.6s ease 3.5s both;
}

/* 2行目：4s→文字表示、9sでフェードアウト（3行目に入れ替わる） */
.slide.active[data-index="5"] .slide06-catch-line--2 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(4s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .slide06-catch-line--2 {
  animation: slide06-catch-line-out 0.6s ease 9s both;
}

/* 3行目：9.5s→文字表示、14.5sでフェードアウト（4行目に入れ替わる） */
.slide.active[data-index="5"] .slide06-catch-line--3 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(9.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .slide06-catch-line--3 {
  animation: slide06-catch-line-out 0.6s ease 14.5s both;
}

/* 4行目：15s→文字表示、17.5sでフェードアウト（5行目に入れ替わる） */
.slide.active[data-index="5"] .slide06-catch-line--4 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(15s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .slide06-catch-line--4 {
  animation: slide06-catch-line-out 0.6s ease 17.5s both;
}

/* 5行目：18s→文字表示、22sでフェードアウト（6行目に入れ替わる） */
.slide.active[data-index="5"] .slide06-catch-line--5 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(18s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .slide06-catch-line--5 {
  animation: slide06-catch-line-out 0.6s ease 22s both;
}

/* 6行目：22.5s→文字表示、27sでフェードアウト（7行目に入れ替わる） */
.slide.active[data-index="5"] .slide06-catch-line--6 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(22.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .slide06-catch-line--6 {
  animation: slide06-catch-line-out 0.6s ease 27s both;
}

/* 7行目：27.5s→文字表示、30sでフェードアウト（8行目に入れ替わる） */
.slide.active[data-index="5"] .slide06-catch-line--7 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(27.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .slide06-catch-line--7 {
  animation: slide06-catch-line-out 0.6s ease 30s both;
}

/* 8行目：30.5s→文字表示、33.5sでフェードアウト（9行目に入れ替わる） */
.slide.active[data-index="5"] .slide06-catch-line--8 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(30.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .slide06-catch-line--8 {
  animation: slide06-catch-line-out 0.6s ease 33.5s both;
}

/* 9行目：34s→文字表示、以降は表示したまま */
.slide.active[data-index="5"] .slide06-catch-line--9 .slide06-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(34s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="5"]:not(.active) .slide06-catch-line--1,
.slide[data-index="5"]:not(.active) .slide06-catch-line--2,
.slide[data-index="5"]:not(.active) .slide06-catch-line--3,
.slide[data-index="5"]:not(.active) .slide06-catch-line--4,
.slide[data-index="5"]:not(.active) .slide06-catch-line--5,
.slide[data-index="5"]:not(.active) .slide06-catch-line--6,
.slide[data-index="5"]:not(.active) .slide06-catch-line--7,
.slide[data-index="5"]:not(.active) .slide06-catch-line--8,
.slide[data-index="5"]:not(.active) .slide06-catch-line--9 {
  animation: none;
}

.slide[data-index="5"]:not(.active) .slide06-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド7　キャッチコピー（重ねて入れ替え）
   ============================================================ */
.slide07-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide07-catch-title > * {
  grid-area: 1 / 1;
}

.slide07-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide07-catch-char {
  display: inline-block;
  opacity: 0;
}

@keyframes slide07-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、2.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--1 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--1 {
  animation: slide07-catch-line-out 0.6s ease 2.5s both;
}

/* 2行目：3s→文字表示、6.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--2 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--2 {
  animation: slide07-catch-line-out 0.6s ease 6.5s both;
}

/* 3行目：7s→文字表示、10.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--3 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(7s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--3 {
  animation: slide07-catch-line-out 0.6s ease 10.5s both;
}

/* 4行目：11s→文字表示、15.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--4 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(11s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--4 {
  animation: slide07-catch-line-out 0.6s ease 15.5s both;
}

/* 5行目：16s→文字表示、18.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--5 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(16s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--5 {
  animation: slide07-catch-line-out 0.6s ease 18.5s both;
}

/* 6行目：19s→文字表示、22sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--6 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(19s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--6 {
  animation: slide07-catch-line-out 0.6s ease 22s both;
}

/* 7行目：22.5s→文字表示、24.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--7 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(22.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--7 {
  animation: slide07-catch-line-out 0.6s ease 24.5s both;
}

/* 8行目：25s→文字表示、28sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--8 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(25s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--8 {
  animation: slide07-catch-line-out 0.6s ease 28s both;
}

/* 9行目：28.5s→文字表示、33sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--9 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(28.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--9 {
  animation: slide07-catch-line-out 0.6s ease 33s both;
}

/* 10行目：33.5s→文字表示、36.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--10 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(33.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--10 {
  animation: slide07-catch-line-out 0.6s ease 36.5s both;
}

/* 11行目：37s→文字表示、39.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--11 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(37s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--11 {
  animation: slide07-catch-line-out 0.6s ease 39.5s both;
}

/* 12行目：40s→文字表示、43.5sでフェードアウト */
.slide.active[data-index="6"] .slide07-catch-line--12 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(40s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .slide07-catch-line--12 {
  animation: slide07-catch-line-out 0.6s ease 43.5s both;
}

/* 13行目：44s→文字表示、以降は表示したまま */
.slide.active[data-index="6"] .slide07-catch-line--13 .slide07-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(44s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="6"]:not(.active) .slide07-catch-line--1,
.slide[data-index="6"]:not(.active) .slide07-catch-line--2,
.slide[data-index="6"]:not(.active) .slide07-catch-line--3,
.slide[data-index="6"]:not(.active) .slide07-catch-line--4,
.slide[data-index="6"]:not(.active) .slide07-catch-line--5,
.slide[data-index="6"]:not(.active) .slide07-catch-line--6,
.slide[data-index="6"]:not(.active) .slide07-catch-line--7,
.slide[data-index="6"]:not(.active) .slide07-catch-line--8,
.slide[data-index="6"]:not(.active) .slide07-catch-line--9,
.slide[data-index="6"]:not(.active) .slide07-catch-line--10,
.slide[data-index="6"]:not(.active) .slide07-catch-line--11,
.slide[data-index="6"]:not(.active) .slide07-catch-line--12,
.slide[data-index="6"]:not(.active) .slide07-catch-line--13 {
  animation: none;
}

.slide[data-index="6"]:not(.active) .slide07-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド8　キャッチコピー（重ねて入れ替え）
   ============================================================ */
.slide08-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide08-catch-title > * {
  grid-area: 1 / 1;
}

.slide08-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide08-catch-char {
  display: inline-block;
  opacity: 0;
}

@keyframes slide08-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、4.5sでフェードアウト */
.slide.active[data-index="7"] .slide08-catch-line--1 .slide08-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .slide08-catch-line--1 {
  animation: slide08-catch-line-out 0.6s ease 4.5s both;
}

/* 2行目：5s→文字表示、6.5sでフェードアウト */
.slide.active[data-index="7"] .slide08-catch-line--2 .slide08-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .slide08-catch-line--2 {
  animation: slide08-catch-line-out 0.6s ease 6.5s both;
}

/* 3行目：7s→文字表示、10.5sでフェードアウト */
.slide.active[data-index="7"] .slide08-catch-line--3 .slide08-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(7s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .slide08-catch-line--3 {
  animation: slide08-catch-line-out 0.6s ease 10.5s both;
}

/* 4行目：11s→文字表示、15.5sでフェードアウト */
.slide.active[data-index="7"] .slide08-catch-line--4 .slide08-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(11s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .slide08-catch-line--4 {
  animation: slide08-catch-line-out 0.6s ease 15.5s both;
}

/* 5行目：16s→文字表示、以降は表示したまま */
.slide.active[data-index="7"] .slide08-catch-line--5 .slide08-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(16s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="7"]:not(.active) .slide08-catch-line--1,
.slide[data-index="7"]:not(.active) .slide08-catch-line--2,
.slide[data-index="7"]:not(.active) .slide08-catch-line--3,
.slide[data-index="7"]:not(.active) .slide08-catch-line--4,
.slide[data-index="7"]:not(.active) .slide08-catch-line--5 {
  animation: none;
}

.slide[data-index="7"]:not(.active) .slide08-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド9　キャッチコピー（重ねて入れ替え）
   ============================================================ */
.slide09-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide09-catch-title > * {
  grid-area: 1 / 1;
}

.slide09-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide09-catch-char {
  display: inline-block;
  opacity: 0;
}

@keyframes slide09-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、5.5sでフェードアウト */
.slide.active[data-index="8"] .slide09-catch-line--1 .slide09-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .slide09-catch-line--1 {
  animation: slide09-catch-line-out 0.6s ease 5.5s both;
}

/* 2行目：6s→文字表示、10.5sでフェードアウト */
.slide.active[data-index="8"] .slide09-catch-line--2 .slide09-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(6s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .slide09-catch-line--2 {
  animation: slide09-catch-line-out 0.6s ease 10.5s both;
}

/* 3行目：11s→文字表示、14sでフェードアウト */
.slide.active[data-index="8"] .slide09-catch-line--3 .slide09-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(11s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .slide09-catch-line--3 {
  animation: slide09-catch-line-out 0.6s ease 14s both;
}

/* 4行目：14.5s→文字表示、以降は表示したまま */
.slide.active[data-index="8"] .slide09-catch-line--4 .slide09-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(14.5s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="8"]:not(.active) .slide09-catch-line--1,
.slide[data-index="8"]:not(.active) .slide09-catch-line--2,
.slide[data-index="8"]:not(.active) .slide09-catch-line--3,
.slide[data-index="8"]:not(.active) .slide09-catch-line--4 {
  animation: none;
}

.slide[data-index="8"]:not(.active) .slide09-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド10　キャッチコピー（重ねて入れ替え）
   ============================================================ */
.slide10-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide10-catch-title > * {
  grid-area: 1 / 1;
}

.slide10-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide10-catch-char {
  display: inline-block;
  opacity: 0;
}

/* flex 内で確実に改行 */
.slide10-catch-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@keyframes slide10-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、5.5sでフェードアウト */
.slide.active[data-index="9"] .slide10-catch-line--1 .slide10-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .slide10-catch-line--1 {
  animation: slide10-catch-line-out 0.6s ease 5.5s both;
}

/* 2行目：6s→文字表示、10.5sでフェードアウト */
.slide.active[data-index="9"] .slide10-catch-line--2 .slide10-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(6s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .slide10-catch-line--2 {
  animation: slide10-catch-line-out 0.6s ease 10.5s both;
}

/* 3行目：11s→文字表示、16.5sでフェードアウト */
.slide.active[data-index="9"] .slide10-catch-line--3 .slide10-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(11s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .slide10-catch-line--3 {
  animation: slide10-catch-line-out 0.6s ease 16.5s both;
}

/* 4行目：17s→文字表示、20.5sでフェードアウト */
.slide.active[data-index="9"] .slide10-catch-line--4 .slide10-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(17s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .slide10-catch-line--4 {
  animation: slide10-catch-line-out 0.6s ease 20.5s both;
}

/* 5行目：21s→2行まとめて文字表示、以降は表示したまま */
.slide.active[data-index="9"] .slide10-catch-line--5 .slide10-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(21s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="9"]:not(.active) .slide10-catch-line--1,
.slide[data-index="9"]:not(.active) .slide10-catch-line--2,
.slide[data-index="9"]:not(.active) .slide10-catch-line--3,
.slide[data-index="9"]:not(.active) .slide10-catch-line--4,
.slide[data-index="9"]:not(.active) .slide10-catch-line--5 {
  animation: none;
}

.slide[data-index="9"]:not(.active) .slide10-catch-char {
  opacity: 0;
  animation: none;
}

.slide11-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide11-catch-title > * {
  grid-area: 1 / 1;
}

.slide11-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide11-catch-char {
  display: inline-block;
  opacity: 0;
}

@keyframes slide11-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、4.5sでフェードアウト */
.slide.active[data-index="10"] .slide11-catch-line--1 .slide11-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="10"] .slide11-catch-line--1 {
  animation: slide11-catch-line-out 0.6s ease 4.5s both;
}

/* 2行目：5s→文字表示、7.5sでフェードアウト */
.slide.active[data-index="10"] .slide11-catch-line--2 .slide11-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="10"] .slide11-catch-line--2 {
  animation: slide11-catch-line-out 0.6s ease 7.5s both;
}

/* 3行目：8s→文字表示、以降は表示したまま */
.slide.active[data-index="10"] .slide11-catch-line--3 .slide11-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(8s + var(--ci, 0) * 80ms);
}

.slide[data-index="10"]:not(.active) .slide11-catch-line--1,
.slide[data-index="10"]:not(.active) .slide11-catch-line--2,
.slide[data-index="10"]:not(.active) .slide11-catch-line--3 {
  animation: none;
}

.slide[data-index="10"]:not(.active) .slide11-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド12　キャッチコピー（重ねて入れ替え）
   ============================================================ */
.slide12-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide12-catch-title > * {
  grid-area: 1 / 1;
}

.slide12-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide12-catch-char {
  display: inline-block;
  opacity: 0;
}

/* flex 内で確実に改行 */
.slide12-catch-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@keyframes slide12-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、6.5sでフェードアウト */
.slide.active[data-index="11"] .slide12-catch-line--1 .slide12-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="11"] .slide12-catch-line--1 {
  animation: slide12-catch-line-out 0.6s ease 6.5s both;
}

/* 2行目：7s→文字表示、以降は表示したまま */
.slide.active[data-index="11"] .slide12-catch-line--2 .slide12-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(7s + var(--ci, 0) * 80ms);
}

.slide[data-index="11"]:not(.active) .slide12-catch-line--1,
.slide[data-index="11"]:not(.active) .slide12-catch-line--2 {
  animation: none;
}

.slide[data-index="11"]:not(.active) .slide12-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド13　キャッチコピー（重ねて入れ替え）
   ============================================================ */
.slide13-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide13-catch-title > * {
  grid-area: 1 / 1;
}

.slide13-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide13-catch-char {
  display: inline-block;
  opacity: 0;
}

/* flex 内で確実に改行 */
.slide13-catch-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@keyframes slide13-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、4.5sでフェードアウト */
.slide.active[data-index="12"] .slide13-catch-line--1 .slide13-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="12"] .slide13-catch-line--1 {
  animation: slide13-catch-line-out 0.6s ease 4.5s both;
}

/* 2行目：5s→文字表示、9.5sでフェードアウト */
.slide.active[data-index="12"] .slide13-catch-line--2 .slide13-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="12"] .slide13-catch-line--2 {
  animation: slide13-catch-line-out 0.6s ease 9.5s both;
}

/* 3行目：10s→文字表示、以降は表示したまま */
.slide.active[data-index="12"] .slide13-catch-line--3 .slide13-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(10s + var(--ci, 0) * 80ms);
}

.slide[data-index="12"]:not(.active) .slide13-catch-line--1,
.slide[data-index="12"]:not(.active) .slide13-catch-line--2,
.slide[data-index="12"]:not(.active) .slide13-catch-line--3 {
  animation: none;
}

.slide[data-index="12"]:not(.active) .slide13-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド14　キャッチコピー（重ねて入れ替え）
   ============================================================ */
.slide14-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide14-catch-title > * {
  grid-area: 1 / 1;
}

.slide14-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide14-catch-char {
  display: inline-block;
  opacity: 0;
}

.slide14-catch-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@keyframes slide14-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、4.5sでフェードアウト */
.slide.active[data-index="13"] .slide14-catch-line--1 .slide14-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="13"] .slide14-catch-line--1 {
  animation: slide14-catch-line-out 0.6s ease 4.5s both;
}

/* 2行目：5s→文字表示、9.5sでフェードアウト */
.slide.active[data-index="13"] .slide14-catch-line--2 .slide14-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="13"] .slide14-catch-line--2 {
  animation: slide14-catch-line-out 0.6s ease 9.5s both;
}

/* 3行目：10s→文字表示、14.5sでフェードアウト */
.slide.active[data-index="13"] .slide14-catch-line--3 .slide14-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(10s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="13"] .slide14-catch-line--3 {
  animation: slide14-catch-line-out 0.6s ease 14.5s both;
}

/* 4行目：15s→文字表示、17.5sでフェードアウト */
.slide.active[data-index="13"] .slide14-catch-line--4 .slide14-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(15s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="13"] .slide14-catch-line--4 {
  animation: slide14-catch-line-out 0.6s ease 17.5s both;
}

/* 5行目：18s→文字表示、22.5sでフェードアウト */
.slide.active[data-index="13"] .slide14-catch-line--5 .slide14-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(18s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="13"] .slide14-catch-line--5 {
  animation: slide14-catch-line-out 0.6s ease 22.5s both;
}

/* 6行目：23s→文字表示、以降は表示したまま */
.slide.active[data-index="13"] .slide14-catch-line--6 .slide14-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(23s + var(--ci, 0) * 80ms);
}

.slide[data-index="13"]:not(.active) .slide14-catch-line--1,
.slide[data-index="13"]:not(.active) .slide14-catch-line--2,
.slide[data-index="13"]:not(.active) .slide14-catch-line--3,
.slide[data-index="13"]:not(.active) .slide14-catch-line--4,
.slide[data-index="13"]:not(.active) .slide14-catch-line--5,
.slide[data-index="13"]:not(.active) .slide14-catch-line--6 {
  animation: none;
}

.slide[data-index="13"]:not(.active) .slide14-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド15　キャッチコピー（重ねて入れ替え）
   ============================================================ */
.slide15-catch-title {
  display: grid;
  flex: 0 0 auto;
  margin: 0 0 clamp(8px, 1.4cqw, 18px);
  padding: clamp(0px, 0.3cqw, 4px) 2% 0;
}

.slide15-catch-title > * {
  grid-area: 1 / 1;
}

.slide15-catch-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: 0;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
}

.slide15-catch-char {
  display: inline-block;
  opacity: 0;
}

.slide15-catch-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@keyframes slide15-catch-line-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* 1行目：0.3s→文字表示、3.5sでフェードアウト */
.slide.active[data-index="14"] .slide15-catch-line--1 .slide15-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="14"] .slide15-catch-line--1 {
  animation: slide15-catch-line-out 0.6s ease 3.5s both;
}

/* 2行目：4s→文字表示、8.5sでフェードアウト */
.slide.active[data-index="14"] .slide15-catch-line--2 .slide15-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(4s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="14"] .slide15-catch-line--2 {
  animation: slide15-catch-line-out 0.6s ease 8.5s both;
}

/* 3行目：9s→文字表示、13.5sでフェードアウト */
.slide.active[data-index="14"] .slide15-catch-line--3 .slide15-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(9s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="14"] .slide15-catch-line--3 {
  animation: slide15-catch-line-out 0.6s ease 13.5s both;
}

/* 4行目：14s→文字表示、17.5sでフェードアウト */
.slide.active[data-index="14"] .slide15-catch-line--4 .slide15-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(14s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="14"] .slide15-catch-line--4 {
  animation: slide15-catch-line-out 0.6s ease 17.5s both;
}

/* 5行目：18s→文字表示、21.5sでフェードアウト */
.slide.active[data-index="14"] .slide15-catch-line--5 .slide15-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(18s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="14"] .slide15-catch-line--5 {
  animation: slide15-catch-line-out 0.6s ease 21.5s both;
}

/* 6行目：22s→文字表示、25.5sでフェードアウト */
.slide.active[data-index="14"] .slide15-catch-line--6 .slide15-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(22s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="14"] .slide15-catch-line--6 {
  animation: slide15-catch-line-out 0.6s ease 25.5s both;
}

/* 7行目：26s→文字表示、30.5sでフェードアウト */
.slide.active[data-index="14"] .slide15-catch-line--7 .slide15-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(26s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="14"] .slide15-catch-line--7 {
  animation: slide15-catch-line-out 0.6s ease 30.5s both;
}

/* 8行目：31s→文字表示、以降は表示したまま */
.slide.active[data-index="14"] .slide15-catch-line--8 .slide15-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(31s + var(--ci, 0) * 80ms);
}

.slide[data-index="14"]:not(.active) .slide15-catch-line--1,
.slide[data-index="14"]:not(.active) .slide15-catch-line--2,
.slide[data-index="14"]:not(.active) .slide15-catch-line--3,
.slide[data-index="14"]:not(.active) .slide15-catch-line--4,
.slide[data-index="14"]:not(.active) .slide15-catch-line--5,
.slide[data-index="14"]:not(.active) .slide15-catch-line--6,
.slide[data-index="14"]:not(.active) .slide15-catch-line--7,
.slide[data-index="14"]:not(.active) .slide15-catch-line--8 {
  animation: none;
}

.slide[data-index="14"]:not(.active) .slide15-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド6　イラスト（slide06_01.svg：ピンクリボン／医師／患者）
   0.3s：s06_pink_ribbon フェードイン→静止／
   9s：s06_doctor フェードイン→上下にふわふわ／
   18s：s06_patient フェードイン→上下にふわふわ
   ============================================================ */
.s6img-box {
  flex: 1;
  min-height: 0;
  width: min(88%, 620px);
  max-height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s6img-box__svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s6img-box__svg svg {
  display: block;
  width: 88%;
  height: auto;
  max-width: 88%;
  max-height: 88%;
  overflow: visible;
}

@media (max-width: 767px) {
  .s6img-box {
    width: min(80%, 100%);
    margin-top: clamp(12px, 4vw, 24px);
  }

  .s6img-box__svg svg {
    width: 78%;
    max-width: 78%;
    max-height: 78%;
  }

  .slide[data-index="2"] .slide-image-box {
    width: 94%;
    margin-top: clamp(12px, 3vw, 24px);
  }

  .s3-catch-line,
  .s4-catch-line,
  .slide06-catch-line,
  .slide07-catch-line,
  .slide08-catch-line,
  .slide09-catch-line,
  .slide10-catch-line,
  .slide11-catch-line,
  .slide12-catch-line,
  .slide13-catch-line,
  .slide14-catch-line,
  .slide15-catch-line {
    font-size: clamp(13px, 3.6vw, 18px);
  }

  .slide-title-text--sub {
    font-size: 0.65em;
  }
}

#slide06SvgWrap #s06_x5F_pink_x5F_ribbon,
#slide06SvgWrap #s06_x5F_doctor,
#slide06SvgWrap #s06_x5F_patient {
  opacity: 0;
}

@keyframes s6img-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ピンクリボン：0.3sでフェードイン→静止 */
.slide.active[data-index="5"] #slide06SvgWrap #s06_x5F_pink_x5F_ribbon {
  animation: s4-fade-in 0.8s ease 0.3s forwards;
}

/* 医師：9sでフェードイン→そのまま上下にふわふわ */
.slide.active[data-index="5"] #slide06SvgWrap #s06_x5F_doctor {
  animation:
    s4-fade-in 0.8s ease 9s forwards,
    s6img-float 2.6s ease-in-out 9.8s infinite;
}

/* 患者：18sでフェードイン→そのまま上下にふわふわ */
.slide.active[data-index="5"] #slide06SvgWrap #s06_x5F_patient {
  animation:
    s4-fade-in 0.8s ease 18s forwards,
    s6img-float 2.6s ease-in-out 18.8s infinite;
}

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="5"]:not(.active) #slide06SvgWrap #s06_x5F_pink_x5F_ribbon,
.slide[data-index="5"]:not(.active) #slide06SvgWrap #s06_x5F_doctor,
.slide[data-index="5"]:not(.active) #slide06SvgWrap #s06_x5F_patient {
  opacity: 0;
  animation: none;
  transform: none;
}

/* ============================================================
   乳がん用：スライド5　発生要因／リスク要因（2カラム）
   ============================================================ */
.slide05-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(10px, 2.4cqw, 26px);
  padding: 1% 4% 3%;
  box-sizing: border-box;
}

.slide05-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(14px, 2.6cqw, 28px);
}

.slide05-col-header {
  background-color: #57b38a;
  color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 2cqw, 20px);
  text-align: center;
  margin: 0;
  padding: 0.5em 0.5em;
  border-radius: 999px;
  letter-spacing: 0.03em;
  opacity: 0;
}

/* 要因見出しの上：吹き出し（見出しと同じ横幅） */
.slide05-fukidashi {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center bottom;
}

.slide05-col-main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 1cqw, 10px);
}

.slide05-illust {
  flex: 0 0 auto;
  width: 56%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide05-illust-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform-origin: center center;
}

.slide05-list {
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(6px, 1.3cqw, 16px);
}

.slide05-item {
  opacity: 0;
  transform: translateY(8px);
}

.slide05-item-row {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.9cqw, 10px);
}

.slide05-item-text {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.7cqw, 19px);
  color: #333;
  line-height: 1.3;
}

.slide05-summary {
  flex: 0 0 auto;
  background-color: #f3da82;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 8cqw, 72px);
  padding: 0.4em 0.8em;
  box-sizing: border-box;
  opacity: 0;
}

.slide05-summary-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 2cqw, 20px);
  color: #333;
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

/* スマホ：PCと同じ2カラム横並びを維持し、文字・イラストだけ縮小 */
@media (max-width: 767px) {
  .slide05-body {
    flex-direction: row;
    align-items: stretch;
    gap: 2vw;
    padding: 1% 2% 2%;
    overflow: hidden;
  }

  .slide05-col {
    gap: clamp(8px, 2vw, 14px);
  }

  .slide05-col-header {
    font-size: clamp(11px, 3.2vw, 14px);
    padding: 0.4em 0.4em;
  }

  .slide05-col-main {
    gap: clamp(2px, 1vw, 6px);
  }

  .slide05-illust {
    width: 42%;
  }

  .slide05-list {
    gap: clamp(4px, 1.2vw, 10px);
  }

  .slide05-item-text {
    font-size: clamp(10px, 2.8vw, 13px);
  }

  .slide05-summary {
    min-height: clamp(36px, 10vw, 56px);
    border-radius: 12px;
    padding: 0.3em 0.5em;
  }

  .slide05-summary-text {
    font-size: clamp(10px, 2.9vw, 13px);
  }

  .slide05-item-row .list-mark {
    width: clamp(12px, 3.2vw, 18px);
  }
}

/* ============================================================
   乳がん用：スライド5　コンテンツ演出
   0s：左（発生要因）見出し・イラスト・リストを一括フェードイン
   16s：左吹き出しがポンっと登場しそのまま表示
   26s：右（リスク要因）見出し・イラスト・リストを一括フェードイン
   31.5s：右吹き出しがポンっと登場しそのまま表示
   イラストのみ：フェードイン後に上下ふわふわループ
   リスト文言：表示後に赤＋拡大アピール（1.8s）
   ============================================================ */

@keyframes slide05TextAppeal {
  0%, 100% { color: #333; transform: scale(1); }
  12%, 84% { color: #df4545; transform: scale(1.08); }
}

/* 左：発生要因　見出し・イラスト・リスト　0s */
.slide.active[data-index="4"] .slide05-body .slide05-col:nth-child(1) .slide05-col-header {
  animation: s4-illust-in 0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 0s both;
}
.slide.active[data-index="4"] .slide05-body .slide05-col:nth-child(1) .slide05-illust-img {
  animation:
    s4-illust-in  0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 0s   both,
    s4-04-float-y 2.6s ease-in-out                       0.5s infinite;
}
.slide.active[data-index="4"] .slide05-body .slide05-col:nth-child(1) .slide05-item {
  animation: s3FadeUp 0.5s ease 0s both;
}

/* 左吹き出し：16sでポンっと登場 → そのまま表示 */
.slide.active[data-index="4"] .slide05-fukidashi--1 {
  animation: s3-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 16s both;
}

/* 右：リスク要因　見出し・イラスト・リスト　26s */
.slide.active[data-index="4"] .slide05-body .slide05-col:nth-child(2) .slide05-col-header {
  animation: s4-illust-in 0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 26s both;
}
.slide.active[data-index="4"] .slide05-body .slide05-col:nth-child(2) .slide05-illust-img {
  animation:
    s4-illust-in  0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 26s   both,
    s4-04-float-y 2.6s ease-in-out                       26.5s infinite;
}
.slide.active[data-index="4"] .slide05-body .slide05-col:nth-child(2) .slide05-item {
  animation: s3FadeUp 0.5s ease 26s both;
}

/* 右吹き出し：31.5sでポンっと登場 → そのまま表示 */
.slide.active[data-index="4"] .slide05-fukidashi--2 {
  animation: s3-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 31.5s both;
}

/* リスト文言の一時的な赤色アピール（表示後） */
.slide.active[data-index="4"] .s05-appeal-no-birth     { animation: slide05TextAppeal 1.8s ease 1s both; }
.slide.active[data-index="4"] .s05-appeal-late-first   { animation: slide05TextAppeal 1.8s ease 3s both; }
.slide.active[data-index="4"] .s05-appeal-no-breastfeed { animation: slide05TextAppeal 1.8s ease 5s both; }
.slide.active[data-index="4"] .s05-appeal-early-menarche { animation: slide05TextAppeal 1.8s ease 9s both; }
.slide.active[data-index="4"] .s05-appeal-late-menopause { animation: slide05TextAppeal 1.8s ease 11s both; }
.slide.active[data-index="4"] .s05-appeal-no-exercise  { animation: slide05TextAppeal 1.8s ease 26s both; }
.slide.active[data-index="4"] .s05-appeal-obesity      { animation: slide05TextAppeal 1.8s ease 27.5s both; }
.slide.active[data-index="4"] .s05-appeal-alcohol      { animation: slide05TextAppeal 1.8s ease 29s both; }
.slide.active[data-index="4"] .s05-appeal-diabetes     { animation: slide05TextAppeal 1.8s ease 30.5s both; }

/* 非アクティブ時リセット（再訪時に最初から再生されるように） */
.slide[data-index="4"]:not(.active) .slide05-col-header,
.slide[data-index="4"]:not(.active) .slide05-item {
  opacity: 0;
  animation: none;
}

.slide[data-index="4"]:not(.active) .slide05-item-text[class*="s05-appeal-"] {
  color: #333;
  transform: scale(1);
  animation: none;
}

.slide[data-index="4"]:not(.active) .slide05-illust-img {
  opacity: 0;
  transform: translateY(14px);
  animation: none;
}

.slide[data-index="4"]:not(.active) .slide05-fukidashi {
  opacity: 0;
  transform: scale(0.3);
  animation: none;
}

/* ========== スライド4（子宮頸がん）：イラストレイアウト ========== */
.slide04c-illust {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4%;
}

.slide04c-wrap {
  position: relative;
  width: 100%;
  /* 幅だけでなく高さ（カード比率）に連動して縮小：SVG比率≈1.29、イラストエリア≈カード幅×0.49 */
  max-width: min(560px, 62cqw);
}

.slide04c-img01 {
  display: block;
  width: 100%;
  height: auto;
}

.slide04c-img02 {
  position: absolute;
  width: 28%;
  top: -6%;
  left: 0;
  right: 0;
  margin: auto;
}

@media (max-width: 767px) {
  .slide04c-illust {
    align-items: flex-start;
    justify-content: center;
    padding: 0 2%;
    margin-top: 40px;
  }
  .slide04c-img02 {
    width: 30%;
    top: -5%;
  }
}

/* スライド4：イラスト入場アニメーション */
.slide04c-img01,
.slide04c-img02 {
  opacity: 0;
}
.slide[data-index="3"]:not(.active) .slide04c-img01,
.slide[data-index="3"]:not(.active) .slide04c-img02 {
  opacity: 0;
  animation: none;
}
/* slide04_01.svg：開始0.3秒でフェードイン → 0.85秒後からふわふわ */
.slide.active[data-index="3"] .slide04c-img01 {
  animation:
    s4-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 0.3s forwards,
    s4-04-float-y 2.6s ease-in-out 0.85s infinite;
}
/* slide04_02.svg：開始3秒でフェードイン → 3.55秒後から心音ループ → 7秒でフェードアウト */
.slide04c-img02 {
  transform-origin: center center;
}
.slide.active[data-index="3"] .slide04c-img02 {
  animation:
    s4-illust-in     0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 3s    forwards,
    s5c-heartbeat    2.2s  ease-in-out                      3.55s  infinite,
    s4-img02-fadeout 0.6s  ease                             7s    forwards;
}
@keyframes s4-img02-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* スライド4：キャッチコピーwrap（グリッドで重ね表示） */
.s4c-title-wrap {
  display: grid;
}
.s4c-title-wrap > * {
  grid-area: 1 / 1;
}

/* スライド5（子宮頸がん）：キャッチコピーwrap（グリッドで重ね表示） */
.s5c-title-wrap {
  display: grid;
  margin-bottom: clamp(6px, 1.2cqw, 14px);
}
.s5c-title-wrap > * {
  grid-area: 1 / 1;
}

/* スライド6〜10：キャッチコピーwrap（グリッドで重ね表示・入れ替え対応） */
.s6c-title-wrap,
.s7c-title-wrap,
.s8c-title-wrap,
.s9c-title-wrap,
.s10c-title-wrap {
  display: grid;
}
.s6c-title-wrap > *,
.s7c-title-wrap > *,
.s8c-title-wrap > *,
.s9c-title-wrap > *,
.s10c-title-wrap > * {
  grid-area: 1 / 1;
}

/* キャッチコピー1枚目：文字表示を0.3sから開始（グローバルの1.15sを上書き） */
.slide.active[data-index="4"] .s5c-title-wrap .s4-main-title:not(.s4-main-title--s5c-t2):not(.s4-main-title--s5c-t3):not(.s4-main-title--s5c-t4) .s4-char {
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}

/* キャッチコピー1枚目：7.5秒後にフェードアウト（画像1が8sに表示） */
.slide.active[data-index="4"] .s5c-title-wrap .s4-main-title:not(.s4-main-title--s5c-t2):not(.s4-main-title--s5c-t3):not(.s4-main-title--s5c-t4) {
  animation: s3c-title1-out 0.6s ease 7.5s forwards;
}

/* 画像1（slide05_text01.svg）：初期非表示、8秒後に登場、19.5秒後フェードアウト */
.s5c-text-img01 {
  opacity: 0;
  place-self: center;
  width: 78%;
}
.slide.active[data-index="4"] .s5c-text-img01 {
  animation:
    s4-illust-in 0.6s ease 8s both,
    s3c-title1-out 0.6s ease 19.5s forwards;
}
.slide[data-index="4"]:not(.active) .s5c-text-img01 {
  opacity: 0;
  animation: none;
}

/* キャッチコピー2枚目（s5c-t2）：初期非表示 */
.s4-main-title--s5c-t2 .s4-char {
  opacity: 0;
}
/* 20秒後に1文字ずつ表示 → 25.5秒後フェードアウト */
.slide.active[data-index="4"] .s4-main-title--s5c-t2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(20s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="4"] .s4-main-title--s5c-t2 {
  animation: s3c-title1-out 0.6s ease 25.5s forwards;
}
/* スライドを離れたらリセット */
.slide[data-index="4"]:not(.active) .s4-main-title--s5c-t2 .s4-char {
  opacity: 0;
  animation: none;
}

/* キャッチコピー3枚目（s5c-t3）：初期非表示 */
.s4-main-title--s5c-t3 .s4-char {
  opacity: 0;
}
/* 26秒後に1文字ずつ表示 → 31.5秒後フェードアウト */
.slide.active[data-index="4"] .s4-main-title--s5c-t3 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(26s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="4"] .s4-main-title--s5c-t3 {
  animation: s3c-title1-out 0.6s ease 31.5s forwards;
}
/* スライドを離れたらリセット */
.slide[data-index="4"]:not(.active) .s4-main-title--s5c-t3 .s4-char {
  opacity: 0;
  animation: none;
}

/* キャッチコピー4枚目（s5c-t4）：初期非表示 */
.s4-main-title--s5c-t4 .s4-char {
  opacity: 0;
}
/* 32秒後に1文字ずつ表示 → 40.5秒後フェードアウト */
.slide.active[data-index="4"] .s4-main-title--s5c-t4 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(32s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="4"] .s4-main-title--s5c-t4 {
  animation: s3c-title1-out 0.6s ease 40.5s forwards;
}
/* スライドを離れたらリセット */
.slide[data-index="4"]:not(.active) .s4-main-title--s5c-t4 .s4-char {
  opacity: 0;
  animation: none;
}

/* 画像2（slide05_text02.svg）：初期非表示、41秒後に登場 */
.s5c-text-img02 {
  opacity: 0;
  place-self: center;
  width: 78%;
}
.slide.active[data-index="4"] .s5c-text-img02 {
  animation: s4-illust-in 0.6s ease 41s both;
}
.slide[data-index="4"]:not(.active) .s5c-text-img02 {
  opacity: 0;
  animation: none;
}

@media (max-width: 767px) {
  .s5c-text-img01,
  .s5c-text-img02 {
    width: 92%;
  }
}

/* ============================================================
   スライド6：キャッチコピー入れ替え
   1枚目（既存）→ 0.3s で登場、7.5s でフェードアウト
   2枚目（s6c-late）→ 9s で登場、16.5s でフェードアウト
   3枚目（s6c-text-img01）→ 17s で画像フェードイン
   ============================================================ */

/* 1枚目：7.5秒後にフェードアウト */
.slide.active[data-index="5"] .s6c-title-wrap .s4-main-title:not(.s4-main-title--s6c-late) {
  animation: s3c-title1-out 0.6s ease 7.5s forwards;
}

/* 2枚目：初期非表示 */
.s4-main-title--s6c-late .s4-char {
  opacity: 0;
}
/* 2枚目：9秒後に1文字ずつ表示 → 16.5秒後フェードアウト */
.slide.active[data-index="5"] .s4-main-title--s6c-late .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(9s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .s4-main-title--s6c-late {
  animation: s3c-title1-out 0.6s ease 16.5s forwards;
}
/* スライドを離れたらリセット */
.slide[data-index="5"]:not(.active) .s4-main-title--s6c-late .s4-char {
  opacity: 0;
  animation: none;
}

/* 画像（slide06_text01.svg）：初期非表示、17秒後にポップイン */
.s6c-text-img01 {
  opacity: 0;
  transform: scale(0);
  place-self: center;
  width: 78%;
}
.slide.active[data-index="5"] .s6c-text-img01 {
  animation: s7c-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 17s both;
}
.slide[data-index="5"]:not(.active) .s6c-text-img01 {
  opacity: 0;
  transform: scale(0);
  animation: none;
}

@media (max-width: 767px) {
  .s6c-text-img01 {
    width: 100%;
  }
}

/* スライド4：キャッチコピー5枚目（19秒で一文字ずつ表示） */
.slide.active[data-index="3"] .s4-main-title .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(19s + var(--ci, 0) * 80ms);
}

/* スライド4：キャッチコピー1枚目（0.3秒後表示 → 2.5秒後フェードアウト） */
.s4-main-title--s4-intro .s4-char {
  opacity: 0;
}
.slide.active[data-index="3"] .s4-main-title--s4-intro .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .s4-main-title--s4-intro {
  animation: s3c-title1-out 0.6s ease 2.5s both;
}
.slide[data-index="3"]:not(.active) .s4-main-title--s4-intro .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド4：キャッチコピー2枚目（3秒後表示 → 6.5秒後フェードアウト） */
.s4-main-title--s4-early .s4-char {
  opacity: 0;
}
.slide.active[data-index="3"] .s4-main-title--s4-early .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .s4-main-title--s4-early {
  animation: s3c-title1-out 0.6s ease 6.5s both;
}
.slide[data-index="3"]:not(.active) .s4-main-title--s4-early .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド4：キャッチコピー3枚目（8秒後表示 → 13.5秒後フェードアウト） */
.s4-main-title--s4-mid .s4-char {
  opacity: 0;
}
.slide.active[data-index="3"] .s4-main-title--s4-mid .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(8s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .s4-main-title--s4-mid {
  animation: s3c-title1-out 0.6s ease 13.5s both;
}
.slide[data-index="3"]:not(.active) .s4-main-title--s4-mid .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド4：キャッチコピー4枚目（14秒後表示 → 18秒後フェードアウト） */
.s4-main-title--s4-late .s4-char {
  opacity: 0;
}
.slide.active[data-index="3"] .s4-main-title--s4-late .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(14s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .s4-main-title--s4-late {
  animation: s3c-title1-out 0.6s ease 18s both;
}
.slide[data-index="3"]:not(.active) .s4-main-title--s4-late .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド4：キャッチコピー5枚目（20秒後表示 → 24秒後フェードアウト） */
.s4-main-title--s4-last .s4-char {
  opacity: 0;
}
.slide.active[data-index="3"] .s4-main-title--s4-last .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(20s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .s4-main-title--s4-last {
  animation: s3c-title1-out 0.5s ease 25s both;
}
.slide[data-index="3"]:not(.active) .s4-main-title--s4-last .s4-char {
  opacity: 0;
  animation: none;
}

/* スライド4：テキスト画像（24秒後にぽんっ！登場） */
.s4c-text-img {
  opacity: 0;
  transform: scale(0);
  width: 75%;
  place-self: center;
}
.slide.active[data-index="3"] .s4c-text-img {
  animation: s4c-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 25s both;
}
.slide[data-index="3"]:not(.active) .s4c-text-img {
  opacity: 0;
  transform: scale(0);
}

@keyframes s4c-text-pop {
  0%   { opacity: 0; transform: scale(0); }
  55%  { opacity: 1; transform: scale(1.15); }
  75%  { transform: scale(0.94); }
  90%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
  .s4c-text-img {
    width: 90%;
  }
}


/* ============================================================
   スライド5：子宮頸がん検診
   ============================================================ */

.slide05c-body {
  flex: 1;
  min-height: 0;
  max-height: 60%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(10px, 2cqw, 24px);
  padding: 0.5% 5% 1.5% 5%;
  width: 100%;
  box-sizing: border-box;
}

/* 左：検診イラスト */
.slide05c-left {
  flex: 0 0 52%;
  display: flex;
  align-items: stretch;
}

.slide05c-card {
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 1.2cqw, 16px) clamp(10px, 1.5cqw, 20px) clamp(8px, 1.2cqw, 14px);
  width: 100%;
  gap: clamp(4px, 0.8cqw, 10px);
}

.slide05c-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 2.8cqw, 26px);
  color: #57b38a;
  margin: 0;
  text-align: center;
  letter-spacing: 0.04em;
}

.slide05c-img01 {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.slide05c-caption {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 2cqw, 18px);
  color: #333;
  margin: 0;
  text-align: center;
  line-height: 1.4;
}

/* 右：吹き出し＋メリット */
.slide05c-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3cqw, 32px);
  min-height: 0;
}

.slide05c-fukidashi {
  width: 100%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.slide05c-merit {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 14px);
}

.slide07-right-images {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2cqw, 14px);
}

.slide07-illust-wrap {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.slide07-illust-wrap > * {
  grid-area: 1 / 1;
}

.slide07-left-img {
  width: clamp(88px, 22cqw, 160px);
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  /* イラストより左にはみ出しつつ重ねる */
  align-self: center;
  justify-self: start;
  margin-left: clamp(-11%, -7cqw, -3%);
  margin-top: -8%;
}

.slide[data-index="6"] .slide05c-card,
.slide[data-index="6"] .slide05c-left {
  overflow: visible;
}

.slide07-right-img {
  width: min(100%, 360px);
  height: auto;
  align-self: center;
  opacity: 0;
}

.slide05c-merit-header {
  background-color: #57b38a;
  color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 2cqw, 20px);
  text-align: center;
  padding: 0.25em 1em;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.slide05c-merit-list {
  list-style: none;
  padding: 0 clamp(4px, 0.8cqw, 10px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 16px);
}

.slide05c-merit-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 1cqw, 12px);
}

.slide05c-merit-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 2.2cqw, 20px);
  color: #333;
  line-height: 1.5;
}

/* スライド5：左カード（ボックス＋ラベル）初期非表示 */
.slide05c-left {
  opacity: 0;
}

/* スライド5：左カード 3秒後にフェードイン */
.slide.active[data-index="4"] .slide05c-left {
  animation: s4-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 3s forwards;
}

/* スライド5：画像 初期非表示 */
.slide05c-img01 {
  opacity: 0;
}

/* スライド5：画像 5秒後にフェードイン → 5.55秒後から上下ふわふわ */
.slide.active[data-index="4"] .slide05c-img01 {
  animation:
    s4-illust-in   0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 5s    forwards,
    s4-04-float-y  2.8s  ease-in-out                      5.55s infinite;
}

/* スライド5：スライドを離れたらリセット */
.slide[data-index="4"]:not(.active) .slide05c-left {
  opacity: 0;
  animation: none;
}
.slide[data-index="4"]:not(.active) .slide05c-img01 {
  opacity: 0;
  animation: none;
}

/* スライド5：吹き出し 初期非表示 */
.slide05c-fukidashi {
  opacity: 0;
  transform-origin: center center;
}

/* 心音キーフレーム（ドクドク 2拍 × 繰り返し） */
@keyframes s5c-heartbeat {
  0%        { transform: scale(1);    }
  10%       { transform: scale(1.08); }
  20%       { transform: scale(1);    }
  32%       { transform: scale(1.08); }
  46%, 100% { transform: scale(1);    }
}

/* スライド5：吹き出し 19秒後にフェードイン → 心音ループ */
.slide.active[data-index="4"] .slide05c-fukidashi {
  animation:
    s4-illust-in  0.6s  cubic-bezier(0.22, 0.8, 0.4, 1) 19s    forwards,
    s5c-heartbeat 2.2s  ease-in-out                      19.6s  infinite;
}

/* スライドを離れたらリセット */
.slide[data-index="4"]:not(.active) .slide05c-fukidashi {
  opacity: 0;
  animation: none;
}

/* スライド5：メリットセクション 初期非表示 */
.slide05c-merit-header,
.slide05c-merit-item {
  opacity: 0;
}

/* スライド5：22秒後 ヘッダー → 各項目を時差表示 */
.slide.active[data-index="4"] .slide05c-merit-header {
  animation: s3c-item-in 0.5s ease 22s both;
}
.slide.active[data-index="4"] .slide05c-merit-item:nth-child(1) {
  animation: s3c-item-in 0.5s ease 22.5s both;
}
.slide.active[data-index="4"] .slide05c-merit-item:nth-child(2) {
  animation: s3c-item-in 0.5s ease 23.1s both;
}

/* スライドを離れたらリセット */
.slide[data-index="4"]:not(.active) .slide05c-merit-header,
.slide[data-index="4"]:not(.active) .slide05c-merit-item {
  opacity: 0;
  animation: none;
}

@media (max-width: 767px) {
  /* PCと同じ左右横並びを維持 */
  .slide05c-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 2%;
    padding: 1% 2% 2%;
    max-height: none;
  }

  .slide05c-left {
    flex: 0 0 46%;
  }

  .slide05c-card {
    padding: 8px 8px 6px;
    border-radius: 12px;
  }

  .slide05c-label {
    font-size: clamp(12px, 3.4vw, 16px);
  }

  .slide05c-merit-text {
    font-size: clamp(11px, 3vw, 14px);
    line-height: 1.4;
  }

  .slide05c-merit-list {
    gap: clamp(6px, 1.8vw, 12px);
    padding: 0 2px;
  }

  .slide05c-merit-row .list-mark {
    width: clamp(12px, 3.2vw, 18px);
  }

  /* スライド7（乳がん）：マンモグラフィ2カラムの収まり */
  .slide[data-index="6"] .slide-placeholder {
    padding-top: clamp(6px, 1.5vw, 12px);
  }

  .slide[data-index="6"] .slide07-catch-title {
    margin-bottom: clamp(16px, 4vw, 28px);
  }

  .slide[data-index="6"] .slide05c-body {
    max-height: none;
    align-items: flex-start;
  }

  .slide[data-index="6"] .slide05c-body .slide05c-img01 {
    width: 100%;
    max-height: none;
  }

  .slide[data-index="6"] .slide07-left-img {
    width: clamp(56px, 18vw, 96px);
    margin-left: clamp(-14%, -8vw, -4%);
    margin-top: -6%;
  }

  .slide[data-index="6"] .slide07-right-img {
    width: min(100%, 220px);
  }

  .slide[data-index="6"] .slide07-intro-img {
    width: min(64%, 280px);
  }
}

/* ============================================================
   スライド7：マンモグラフィ検診（slide05c レイアウト）
   ============================================================ */

/* タイトル下の余白を少し確保（キャッチ＋カードを下げて隙間をあける） */
.slide[data-index="6"] .slide-placeholder {
  padding-top: clamp(10px, 2cqw, 22px);
}

/* キャッチとカードの隙間 */
.slide[data-index="6"] .slide07-catch-title {
  margin-bottom: clamp(24px, 4cqw, 40px);
  position: relative;
}

/* 導入イラスト（slide07_04）：配置のみ（アニメはSVG内で制御） */
.slide[data-index="6"] .slide05c-body {
  position: relative;
  overflow: visible;
}

.slide07-intro-img {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: min(72%, 520px);
  height: auto;
  max-height: 92%;
  transform: translateX(-50%);
  pointer-events: none;
  /* ふわふわ上昇で頭が切れないよう余白＋はみ出し許可 */
  padding-top: 10px;
  overflow: visible;
  box-sizing: border-box;
}

.slide07-intro-img svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(92% - 10px);
  object-fit: contain;
  overflow: visible;
}

@keyframes slide07-intro-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.slide.active[data-index="6"] .slide07-intro-img {
  visibility: visible;
  animation: slide07-intro-fadeout 0.6s ease 10.4s forwards;
}

.slide[data-index="6"]:not(.active) .slide07-intro-img {
  visibility: hidden;
  animation: none;
  opacity: 1;
}

/* 左カード 11s後にフェードイン */
.slide.active[data-index="6"] .slide05c-body .slide05c-left {
  animation: s4-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 11s forwards;
}

.slide[data-index="6"] .slide05c-right {
  justify-content: flex-start;
}

/* スライド7：カードを上寄せ・余白を抑える */
.slide[data-index="6"] .slide05c-body {
  max-height: 78%;
  min-height: 0;
  align-items: flex-start;
  padding-top: 0;
}

.slide[data-index="6"] .slide05c-left {
  align-items: flex-start;
}

.slide[data-index="6"] .slide05c-card {
  justify-content: flex-start;
  gap: clamp(6px, 1cqw, 12px);
}

/* スライド7：イラストを大きく */
.slide[data-index="6"] .slide05c-body .slide05c-img01 {
  flex: 0 1 auto;
  width: 92%;
  max-height: 82%;
}

/* イラスト 11s後にフェードイン（ふわふわなし） */
.slide.active[data-index="6"] .slide05c-body .slide05c-img01 {
  animation: s4-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 11s forwards;
}

/* 右上画像 11s後にフェードイン → 上下ふわふわ */
.slide.active[data-index="6"] .slide05c-body .slide07-right-img {
  animation:
    s4-illust-in   0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 11s    forwards,
    s4-04-float-y  2.8s  ease-in-out                      11.55s infinite;
}

/* 左カードイラスト上に重ねるバッジ：44s後に表示 */
@keyframes slide07-badge-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.slide.active[data-index="6"] .slide05c-body .slide07-left-img {
  animation: slide07-badge-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 44s both;
}

.slide[data-index="6"] .slide05c-body .slide07-illust-wrap .slide05c-img01 {
  position: relative;
  z-index: 1;
}

/* リスト 35s登場 → 続けて2行目 */
.slide.active[data-index="6"] .slide05c-body .slide05c-merit-item:nth-child(1) {
  animation: s3c-item-in 0.5s ease 35s both;
}
.slide.active[data-index="6"] .slide05c-body .slide05c-merit-item:nth-child(2) {
  animation: s3c-item-in 0.5s ease 35.6s both;
}

/* 非アクティブ時リセット */
.slide[data-index="6"]:not(.active) .slide05c-body .slide05c-left,
.slide[data-index="6"]:not(.active) .slide05c-body .slide07-left-img,
.slide[data-index="6"]:not(.active) .slide05c-body .slide07-right-img,
.slide[data-index="6"]:not(.active) .slide05c-body .slide05c-img01,
.slide[data-index="6"]:not(.active) .slide05c-body .slide05c-merit-item {
  opacity: 0;
  animation: none;
}

/* ============================================================
   スライド6：ワクチン接種イラスト（白丸＋はみ出し画像）
   ============================================================ */
.slide06-illust {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.slide06-circle {
  position: relative;
  width: min(44%, 44cqh);
  aspect-ratio: 1;
  background-color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: visible;
}

.slide06-img01 {
  position: absolute;
  width: 65%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

/* イラストのみふわふわ浮遊（translate との合成） */
@keyframes slide06-img-float {
  0%,
  100% { transform: translate(-50%, -50%); }
  50%  { transform: translate(-50%, calc(-50% - 6px)); }
}
.slide.active[data-index="5"] .slide06-img01 {
  animation: slide06-img-float 2.75s ease-in-out 2s infinite;
}
.slide[data-index="5"]:not(.active) .slide06-img01 {
  transform: translate(-50%, -50%);
  animation: none;
}

/* slide06_text02.svg：イラスト左側（9秒で登場）*/
.slide06-text-img02 {
  opacity: 0;
  position: absolute;
  width: 55%;
  height: auto;
  object-fit: contain;
  right: 82%;
  top: 12%;
  z-index: 2;
}
.slide.active[data-index="5"] .slide06-text-img02 {
  animation: s4-illust-in 0.6s ease 9s both;
}
.slide[data-index="5"]:not(.active) .slide06-text-img02 {
  opacity: 0;
  animation: none;
}

/* slide06_text03.svg：イラスト右側（17秒で登場） */
.slide06-text-img03 {
  opacity: 0;
  position: absolute;
  width: 52%;
  height: auto;
  object-fit: contain;
  left: 85%;
  top: 40%;
  z-index: 2;
}
.slide.active[data-index="5"] .slide06-text-img03 {
  animation: s4-illust-in 0.6s ease 17s both;
}
.slide[data-index="5"]:not(.active) .slide06-text-img03 {
  opacity: 0;
  animation: none;
}

@media (max-width: 768px) {
  .slide06-illust {
    align-items: flex-start;
    justify-content: center;
    margin-top: 25px;
    padding-bottom: 30%;
  }
  .slide06-circle {
    width: min(240px, 64vw);
  }
  .slide06-text-img02 {
    top: 97%;
    right: auto;
    left: 0;
    width: 48%;
  }
  .slide06-text-img03 {
    top: 97%;
    left: auto;
    right: 0;
    width: 45%;
  }
}

/* ============================================================
   スライド7：症状→婦人科受診（白丸＋3枚重ね＋症状リスト）
   ============================================================ */
.slide07-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6%;
  padding: 1% 4% 2% 2%;
  margin-top: -7%;
  width: 100%;
  box-sizing: border-box;
}

.slide07-left {
  flex: 0 0 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: visible;
}

.slide07-circle {
  position: relative;
  width: min(85%, 85cqh);
  aspect-ratio: 1;
  background-color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: visible;
}

.slide07-img {
  position: absolute;
  width: 110%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  object-fit: contain;
}

.slide07-img--1 { z-index: 1; }
.slide07-img--2 { z-index: 2; }
.slide07-img--3 { z-index: 3; }

.slide07-right {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.slide07-list {
  list-style: none;
  padding: 0 clamp(4px, 0.8cqw, 10px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2cqw, 28px);
}

.slide07-item {
  display: flex;
  flex-direction: column;
}

.slide07-item-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 0.8cqw, 10px);
}

.slide07-list .s3-item-text {
  font-size: clamp(13px, 2cqw, 22px);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .slide07-body {
    align-items: flex-start;
    gap: 3%;
    padding: 1% 2% 2%;
    margin-top: 30px;
  }
}

/* ============================================================
   スライド7：キャッチコピー切り替えアニメーション
   ============================================================ */

/* テキスト2・3：デフォルト非表示 */
.slide[data-index="6"] .s4-main-title--s7c-2 .s4-char,
.slide[data-index="6"] .s4-main-title--s7c-3 .s4-char {
  opacity: 0;
}

/* テキスト1：7.5s後フェードアウト */
.slide.active[data-index="6"] .s4-main-title:not(.s4-main-title--s7c-2):not(.s4-main-title--s7c-3) {
  animation: s3c-title1-out 0.6s ease 7.5s forwards;
}

/* テキスト2：8s後に1文字ずつフェードイン、19s後にフェードアウト */
.slide.active[data-index="6"] .s4-main-title--s7c-2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(8s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .s4-main-title--s7c-2 {
  animation: s3c-title1-out 0.6s ease 19s forwards;
}

/* テキスト3：19.5s後に1文字ずつフェードイン */
.slide.active[data-index="6"] .s4-main-title--s7c-3 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(19.5s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット */
.slide[data-index="6"]:not(.active) .s4-main-title--s7c-2 .s4-char,
.slide[data-index="6"]:not(.active) .s4-main-title--s7c-3 .s4-char {
  opacity: 0;
  animation: none !important;
}
.slide[data-index="6"]:not(.active) .s4-main-title--s7c-2 {
  opacity: 0;
  animation: none;
}

/* スライド7：テキスト画像（19.5s後にぽんっ！登場） */
.s7c-text-img {
  opacity: 0;
  transform: scale(0);
  width: 75%;
  place-self: center;
}
.slide.active[data-index="6"] .s7c-text-img {
  animation: s7c-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 19.5s both;
}
.slide[data-index="6"]:not(.active) .s7c-text-img {
  opacity: 0;
  transform: scale(0);
}

@keyframes s7c-text-pop {
  0%   { opacity: 0; transform: scale(0); }
  55%  { opacity: 1; transform: scale(1.15); }
  75%  { transform: scale(0.94); }
  90%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
  .s7c-text-img {
    width: 95%;
  }
}

/* ============================================================
   スライド7：イラスト・リスト アニメーション
   ============================================================ */

/* フェードイン（translate維持） */
@keyframes s7c-img-fade-in {
  from { opacity: 0; transform: translate(-50%, -45%) scale(0.93); }
  to   { opacity: 1; transform: translate(-50%, -45%); }
}

/* ふわふわ（translate維持） */
@keyframes s7c-img-float {
  0%, 100% { transform: translate(-50%, -45%); }
  50%      { transform: translate(-50%, calc(-45% - 6px)); }
}

/* デフォルト：非表示 */
.slide[data-index="6"] .slide07-img--1,
.slide[data-index="6"] .slide07-img--2,
.slide[data-index="6"] .slide07-img--3 {
  opacity: 0;
}
.slide[data-index="6"] .slide07-item {
  opacity: 0;
}

/* slide07_01：0.3s 後フェードイン */
.slide.active[data-index="6"] .slide07-img--1 {
  animation: s7c-img-fade-in 0.6s ease 0.3s forwards;
}

/* slide07_02：3s 後フェードイン → ふわふわ */
.slide.active[data-index="6"] .slide07-img--2 {
  animation:
    s7c-img-fade-in 0.6s ease 3s forwards,
    s7c-img-float 3s ease-in-out 3.6s infinite;
}

/* slide07_03：23s 後フェードイン → ふわふわ */
.slide.active[data-index="6"] .slide07-img--3 {
  animation:
    s7c-img-fade-in 0.6s ease 23s forwards,
    s7c-img-float 3s ease-in-out 23.6s infinite;
}

/* リスト：12s 後から 1.5s 間隔で順番に表示 */
.slide.active[data-index="6"] .slide07-item:nth-child(1) { animation: s3FadeUp 0.4s ease 12s   both; }
.slide.active[data-index="6"] .slide07-item:nth-child(2) { animation: s3FadeUp 0.4s ease 13.5s both; }
.slide.active[data-index="6"] .slide07-item:nth-child(3) { animation: s3FadeUp 0.4s ease 15s   both; }
.slide.active[data-index="6"] .slide07-item:nth-child(4) { animation: s3FadeUp 0.4s ease 16.5s both; }

/* 非アクティブ時リセット */
.slide[data-index="6"]:not(.active) .slide07-img--1,
.slide[data-index="6"]:not(.active) .slide07-img--2,
.slide[data-index="6"]:not(.active) .slide07-img--3 {
  opacity: 0;
  animation: none;
}
.slide[data-index="6"]:not(.active) .slide07-item {
  opacity: 0;
  animation: none;
}

/* ============================================================
   スライド8：ブレスト・アウェアネス（花背景＋人物イラスト重ね）
   0.3s：slide08_01 フェードイン／
   2s：slide08_02（中央重ね）フェードイン → 上下ふわふわ
   ============================================================ */
.slide[data-index="7"] .slide-placeholder {
  justify-content: flex-start;
  gap: clamp(8px, 1.5cqw, 16px);
}

.slide08-illust {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3% 2%;
  box-sizing: border-box;
  overflow: visible;
}

.slide08-illust-inner {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  width: min(92%, 640px);
  max-height: 100%;
}

.slide08-illust-inner > * {
  grid-area: 1 / 1;
}

.slide08-img {
  display: block;
  height: auto;
  object-fit: contain;
}

.slide08-img-wrap--2 {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* ベース：花の装飾（横長） */
.slide08-img--1 {
  width: 100%;
  max-height: clamp(140px, 28vw, 240px);
  z-index: 1;
  opacity: 0;
}

/* 重ね：人物イラスト（上下左右センター） */
.slide08-img--2 {
  width: clamp(140px, 32cqw, 240px);
  max-height: clamp(180px, 38vw, 320px);
}

@keyframes s8c-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes s8c-img02-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* slide08_01：0.3s後フェードイン */
.slide.active[data-index="7"] .slide08-img--1 {
  animation: s8c-img-fade-in 0.55s ease 0.3s both;
}

/* slide08_02：ラップでフェード、画像でふわふわ（transform と opacity を分離） */
.slide.active[data-index="7"] .slide08-img-wrap--2 {
  animation: s8c-img-fade-in 0.55s ease 2s both;
}

.slide.active[data-index="7"] .slide08-img--2 {
  animation: s8c-img02-float 2.75s ease-in-out 2.55s infinite;
}

/* 非アクティブ時リセット */
.slide[data-index="7"]:not(.active) .slide08-img--1,
.slide[data-index="7"]:not(.active) .slide08-img-wrap--2 {
  opacity: 0;
  animation: none !important;
}

.slide[data-index="7"]:not(.active) .slide08-img--2 {
  animation: none !important;
}

@media (max-width: 767px) {
  .slide08-illust {
    align-items: center;
    padding: 0 3% 2%;
  }

  .slide08-illust-inner {
    width: min(96%, 100%);
  }

  .slide08-img--1 {
    max-height: 28vw;
  }

  .slide08-img--2 {
    width: clamp(100px, 32vw, 160px);
    max-height: 42vw;
  }
}

/* スライド8：キャッチコピー p2〜p7 デフォルト非表示 */
.s4-main-title--s8c-p2 .s4-char,
.s4-main-title--s8c-p3 .s4-char,
.s4-main-title--s8c-p4 .s4-char,
.s4-main-title--s8c-p5 .s4-char,
.s4-main-title--s8c-p6 .s4-char,
.s4-main-title--s8c-p7 .s4-char {
  opacity: 0;
}

/* p1：0.3s後 1文字ずつ → 2.8s後フェードアウト */
.slide.active[data-index="7"] .s4-main-title--s8c-p1 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .s4-main-title--s8c-p1 {
  animation: s3c-title1-out 0.6s ease 2.8s both;
}

/* p2：3s後 1文字ずつ → 5.8s後フェードアウト */
.slide.active[data-index="7"] .s4-main-title--s8c-p2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .s4-main-title--s8c-p2 {
  animation: s3c-title1-out 0.6s ease 5.8s both;
}

/* p3：6s後 1文字ずつ → 8.8s後フェードアウト */
.slide.active[data-index="7"] .s4-main-title--s8c-p3 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(6s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .s4-main-title--s8c-p3 {
  animation: s3c-title1-out 0.6s ease 8.8s both;
}

/* p4：9s後 1文字ずつ → 11.8s後フェードアウト */
.slide.active[data-index="7"] .s4-main-title--s8c-p4 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(9s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .s4-main-title--s8c-p4 {
  animation: s3c-title1-out 0.6s ease 11.8s both;
}

/* p5：12s後 1文字ずつ → 15.8s後フェードアウト */
.slide.active[data-index="7"] .s4-main-title--s8c-p5 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(12s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .s4-main-title--s8c-p5 {
  animation: s3c-title1-out 0.6s ease 15.8s both;
}

/* p6：16s後 1文字ずつ → 19.5s後フェードアウト */
.slide.active[data-index="7"] .s4-main-title--s8c-p6 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(16s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="7"] .s4-main-title--s8c-p6 {
  animation: s3c-title1-out 0.6s ease 19.5s both;
}

/* p7：20s後 1文字ずつ（フェードアウトなし） */
.slide.active[data-index="7"] .s4-main-title--s8c-p7 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(20s + var(--ci, 0) * 80ms);
}

/* 非アクティブ時リセット */
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p1 .s4-char,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p2 .s4-char,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p3 .s4-char,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p4 .s4-char,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p5 .s4-char,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p6 .s4-char,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p7 .s4-char {
  opacity: 0;
  animation: none !important;
}
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p1,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p2,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p3,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p4,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p5,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p6,
.slide[data-index="7"]:not(.active) .s4-main-title--s8c-p7 {
  opacity: 0;
  animation: none;
}

/* ============================================================
   乳がん用：スライド9　イラスト
   6s：slide09_01（左）フェードイン／
   11s：slide09_02（右）フェードイン
   ============================================================ */
.slide[data-index="8"] .slide-placeholder {
  justify-content: flex-start;
  gap: clamp(8px, 1.5cqw, 16px);
}

.slide09-illust {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3% 2%;
  box-sizing: border-box;
  overflow: visible;
}

.slide09-illust-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 3cqw, 36px);
  width: min(96%, 720px);
  max-height: 100%;
}

.slide09-img {
  display: block;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

/* 左：円形装飾 */
.slide09-img--1 {
  width: clamp(180px, 44cqw, 360px);
  max-height: clamp(180px, 44vw, 360px);
  flex: 0 1 auto;
}

/* 右：人物イラスト */
.slide09-img--2 {
  width: clamp(160px, 40cqw, 340px);
  max-height: clamp(200px, 50vw, 400px);
  flex: 0 1 auto;
}

@keyframes s9c-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* slide09_01：6s後フェードイン */
.slide.active[data-index="8"] .slide09-img--1 {
  animation: s9c-img-fade-in 0.55s ease 6s both;
}

/* slide09_02：11s後フェードイン */
.slide.active[data-index="8"] .slide09-img--2 {
  animation: s9c-img-fade-in 0.55s ease 11s both;
}

/* 非アクティブ時リセット */
.slide[data-index="8"]:not(.active) .slide09-img--1,
.slide[data-index="8"]:not(.active) .slide09-img--2 {
  opacity: 0;
  animation: none !important;
}

@media (max-width: 767px) {
  .slide09-illust {
    align-items: center;
    padding: 0 2% 2%;
  }

  .slide09-illust-inner {
    flex-direction: row;
    width: min(98%, 100%);
    gap: clamp(6px, 2vw, 14px);
  }

  .slide09-img--1 {
    width: clamp(120px, 40vw, 200px);
    max-height: 40vw;
  }

  .slide09-img--2 {
    width: clamp(100px, 36vw, 180px);
    max-height: 48vw;
  }
}

/* スライド9：キャッチコピー p2〜p4 デフォルト非表示 */
.s4-main-title--s9c-p2 .s4-char,
.s4-main-title--s9c-p3 .s4-char,
.s4-main-title--s9c-p4 .s4-char {
  opacity: 0;
}

/* p1：0.3s後 1文字ずつ → 3.5sフェードアウト */
.slide.active[data-index="8"] .s4-main-title--s9c-p1 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .s4-main-title--s9c-p1 {
  animation: s3c-title1-out 0.6s ease 3.5s both;
}

/* p2：4s後 1文字ずつ → 10.5sフェードアウト */
.slide.active[data-index="8"] .s4-main-title--s9c-p2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(4s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .s4-main-title--s9c-p2 {
  animation: s3c-title1-out 0.6s ease 10.5s both;
}

/* p3：11s後 1文字ずつ → 19.5sフェードアウト */
.slide.active[data-index="8"] .s4-main-title--s9c-p3 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(11s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .s4-main-title--s9c-p3 {
  animation: s3c-title1-out 0.6s ease 19.5s both;
}

/* p4：20s後 1文字ずつ → 26.5sフェードアウト */
.slide.active[data-index="8"] .s4-main-title--s9c-p4 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(20s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .s4-main-title--s9c-p4 {
  animation: s3c-title1-out 0.6s ease 26.5s both;
}

/* スライド9：テキスト画像（27s後にぽんっ！登場） */
.s9c-text-img {
  opacity: 0;
  transform: scale(0);
  width: 75%;
  place-self: center;
}
.slide.active[data-index="8"] .s9c-text-img {
  animation: s9c-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 27s both;
}
.slide[data-index="8"]:not(.active) .s9c-text-img {
  opacity: 0;
  transform: scale(0);
}

@keyframes s9c-text-pop {
  0%   { opacity: 0; transform: scale(0); }
  55%  { opacity: 1; transform: scale(1.15); }
  75%  { transform: scale(0.94); }
  90%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
  .s9c-text-img {
    width: 95%;
  }
}

/* 非アクティブ時リセット */
.slide[data-index="8"]:not(.active) .s4-main-title--s9c-p1 .s4-char,
.slide[data-index="8"]:not(.active) .s4-main-title--s9c-p2 .s4-char,
.slide[data-index="8"]:not(.active) .s4-main-title--s9c-p3 .s4-char,
.slide[data-index="8"]:not(.active) .s4-main-title--s9c-p4 .s4-char {
  opacity: 0;
  animation: none !important;
}
.slide[data-index="8"]:not(.active) .s4-main-title--s9c-p1,
.slide[data-index="8"]:not(.active) .s4-main-title--s9c-p2,
.slide[data-index="8"]:not(.active) .s4-main-title--s9c-p3,
.slide[data-index="8"]:not(.active) .s4-main-title--s9c-p4 {
  opacity: 0;
  animation: none;
}

/* スライド10：キャッチコピー p2〜p9 デフォルト非表示 */
.s4-main-title--s10c-p2 .s4-char,
.s4-main-title--s10c-p3 .s4-char,
.s4-main-title--s10c-p4 .s4-char,
.s4-main-title--s10c-p5 .s4-char,
.s4-main-title--s10c-p6 .s4-char,
.s4-main-title--s10c-p7 .s4-char {
  opacity: 0;
}

/* p1：0.3s後 1文字ずつ → 4.5sフェードアウト */
.slide.active[data-index="9"] .s4-main-title--s10c-p1 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(0.3s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .s4-main-title--s10c-p1 {
  animation: s3c-title1-out 0.6s ease 4.5s both;
}

/* p2：5s後 1文字ずつ → 12.5sフェードアウト */
.slide.active[data-index="9"] .s4-main-title--s10c-p2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .s4-main-title--s10c-p2 {
  animation: s3c-title1-out 0.6s ease 12.5s both;
}

/* p3：13s後 1文字ずつ → 18.5sフェードアウト */
.slide.active[data-index="9"] .s4-main-title--s10c-p3 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(13s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .s4-main-title--s10c-p3 {
  animation: s3c-title1-out 0.6s ease 18.5s both;
}

/* p4：19s後 1文字ずつ → 22.5sフェードアウト */
.slide.active[data-index="9"] .s4-main-title--s10c-p4 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(19s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .s4-main-title--s10c-p4 {
  animation: s3c-title1-out 0.6s ease 22.5s both;
}

/* p5：23s後 1文字ずつ → 27.5sフェードアウト */
.slide.active[data-index="9"] .s4-main-title--s10c-p5 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(23s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .s4-main-title--s10c-p5 {
  animation: s3c-title1-out 0.6s ease 27.5s both;
}

/* p6：28s後 1文字ずつ → 31.5sフェードアウト */
.slide.active[data-index="9"] .s4-main-title--s10c-p6 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(28s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .s4-main-title--s10c-p6 {
  animation: s3c-title1-out 0.6s ease 31.5s both;
}

/* p7：32s後 1文字ずつ → 35.5sフェードアウト */
.slide.active[data-index="9"] .s4-main-title--s10c-p7 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(32s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="9"] .s4-main-title--s10c-p7 {
  animation: s3c-title1-out 0.6s ease 35.5s both;
}

/* slide10_text.svg：36s後ポップイン */
.s10c-text-img {
  opacity: 0;
  transform: scale(0);
  width: 75%;
  place-self: center;
}
.slide.active[data-index="9"] .s10c-text-img {
  animation: s10c-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 36s both;
}
.slide[data-index="9"]:not(.active) .s10c-text-img {
  opacity: 0;
  transform: scale(0);
}

@keyframes s10c-text-pop {
  0%   { opacity: 0; transform: scale(0); }
  55%  { opacity: 1; transform: scale(1.15); }
  75%  { transform: scale(0.94); }
  90%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
  .s10c-text-img {
    width: 95%;
  }
}

/* 非アクティブ時リセット */
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p1 .s4-char,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p2 .s4-char,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p3 .s4-char,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p4 .s4-char,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p5 .s4-char,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p6 .s4-char,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p7 .s4-char {
  opacity: 0;
  animation: none !important;
}
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p1,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p2,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p3,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p4,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p5,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p6,
.slide[data-index="9"]:not(.active) .s4-main-title--s10c-p7 {
  opacity: 0;
  animation: none;
}

/* ========== slide10 ========== */
.slide10-illust {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3% 2%;
  box-sizing: border-box;
  overflow: visible;
}

.slide10-illust-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 3cqw, 36px);
  width: min(96%, 720px);
  max-height: 100%;
}

.slide10-img {
  display: block;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

/* 左：slide10_01 */
.slide10-img--1 {
  width: clamp(160px, 40cqw, 340px);
  max-height: clamp(160px, 40vw, 340px);
  flex: 0 1 auto;
}

/* 右：slide10_02（インラインSVG） */
.slide10-img--2 {
  width: clamp(180px, 46cqw, 380px);
  max-height: clamp(150px, 38vw, 320px);
  flex: 0 1 auto;
  overflow: visible;
}

.slide10-img--2 svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: inherit;
  overflow: visible;
}

@keyframes s10c-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ラベル：表示したまま一瞬大きくなって戻る */
@keyframes s10-label-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

#slide10SvgWrap .s10-label-pop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* 左 slide10_01：1s後フェードイン */
.slide.active[data-index="9"] .slide10-img--1 {
  animation: s10c-fade-in 0.55s ease 1s both;
}

/* 右 slide10_02：5s後フェードイン */
.slide.active[data-index="9"] .slide10-img--2 {
  animation: s10c-fade-in 0.55s ease 5s both;
}

/* s10_label_01：7sでポン（引き出し線は除く） */
.slide.active[data-index="9"] #slide10SvgWrap #s10_x5F_label_x5F_01 .s10-label-pop {
  animation: s10-label-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 7s both;
}

/* s10_label_02：8sでポン（引き出し線は除く） */
.slide.active[data-index="9"] #slide10SvgWrap #s10_x5F_label_x5F_02 .s10-label-pop {
  animation: s10-label-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 8s both;
}

/* s10_label_03：11sでポン（引き出し線は除く） */
.slide.active[data-index="9"] #slide10SvgWrap #s10_x5F_label_x5F_03 .s10-label-pop {
  animation: s10-label-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 11s both;
}

/* s10_label_04：14sでポン（引き出し線は除く） */
.slide.active[data-index="9"] #slide10SvgWrap #s10_x5F_label_x5F_04 .s10-label-pop {
  animation: s10-label-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 14s both;
}

/* 非アクティブ時リセット */
.slide[data-index="9"]:not(.active) .slide10-img--1,
.slide[data-index="9"]:not(.active) .slide10-img--2 {
  opacity: 0;
  animation: none !important;
}

.slide[data-index="9"]:not(.active) #slide10SvgWrap .s10-label-pop {
  animation: none;
  transform: none;
}

@media (max-width: 767px) {
  .slide10-illust {
    align-items: center;
    padding: 0 2% 2%;
  }

  .slide10-illust-inner {
    flex-direction: row;
    width: min(98%, 100%);
    gap: clamp(6px, 2vw, 14px);
  }

  .slide10-img--1 {
    width: clamp(100px, 36vw, 180px);
    max-height: 36vw;
  }

  .slide10-img--2 {
    width: clamp(120px, 42vw, 200px);
    max-height: 38vw;
  }
}

/* ========== slide11 ========== */
.slide[data-index="10"] .slide-placeholder {
  justify-content: flex-start;
  gap: clamp(8px, 1.5cqw, 16px);
}

.slide11-illust {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 右イラストのふわふわ（-7px）で切れないよう上余白 */
  padding: 12px 3% 2%;
  box-sizing: border-box;
  overflow: visible;
}

.slide11-illust-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 3cqw, 36px);
  width: min(96%, 720px);
  max-height: 100%;
}

.slide11-img {
  display: block;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

/* 左：slide11_01 */
.slide11-img--1 {
  width: clamp(180px, 44cqw, 360px);
  max-height: clamp(180px, 44vw, 360px);
  flex: 0 1 auto;
}

/* 右：slide11_02 */
.slide11-img--2 {
  width: clamp(160px, 40cqw, 340px);
  max-height: clamp(200px, 50vw, 400px);
  flex: 0 1 auto;
}

@keyframes s11c-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes s11c-img-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* 左 slide11_01：1s後フェードイン */
.slide.active[data-index="10"] .slide11-img--1 {
  animation: s11c-img-fade-in 0.55s ease 1s both;
}

/* 右 slide11_02：5s後フェードイン → 登場後は上下ふわふわ */
.slide.active[data-index="10"] .slide11-img--2 {
  animation:
    s11c-img-fade-in 0.55s ease 5s both,
    s11c-img-float 2.8s ease-in-out 5.55s infinite;
}

.slide[data-index="10"]:not(.active) .slide11-img--1,
.slide[data-index="10"]:not(.active) .slide11-img--2 {
  opacity: 0;
  animation: none !important;
}

@media (max-width: 767px) {
  .slide11-illust {
    align-items: center;
    padding: 0 2% 2%;
  }

  .slide11-illust-inner {
    flex-direction: row;
    width: min(98%, 100%);
    gap: clamp(6px, 2vw, 14px);
  }

  .slide11-img--1 {
    width: clamp(120px, 40vw, 200px);
    max-height: 40vw;
  }

  .slide11-img--2 {
    width: clamp(100px, 36vw, 180px);
    max-height: 48vw;
  }
}

/* ========== slide12 ========== */
.slide[data-index="11"] .slide-placeholder {
  justify-content: flex-start;
  gap: clamp(8px, 1.5cqw, 16px);
}

.slide12-illust {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3% 2%;
  box-sizing: border-box;
  overflow: visible;
}

.slide12-illust-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 3cqw, 36px);
  width: min(96%, 720px);
  max-height: 100%;
}

.slide12-img {
  display: block;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

/* 左：slide12_01 */
.slide12-img--1 {
  width: clamp(180px, 44cqw, 360px);
  max-height: clamp(180px, 44vw, 360px);
  flex: 0 1 auto;
}

/* 右：slide12_02 */
.slide12-img--2 {
  width: clamp(160px, 40cqw, 340px);
  max-height: clamp(200px, 50vw, 400px);
  flex: 0 1 auto;
}

@keyframes s12c-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 左 slide12_01：1s後フェードイン */
.slide.active[data-index="11"] .slide12-img--1 {
  animation: s12c-img-fade-in 0.55s ease 1s both;
}

/* 右 slide12_02：5s後フェードイン */
.slide.active[data-index="11"] .slide12-img--2 {
  animation: s12c-img-fade-in 0.55s ease 5s both;
}

.slide[data-index="11"]:not(.active) .slide12-img--1,
.slide[data-index="11"]:not(.active) .slide12-img--2 {
  opacity: 0;
  animation: none !important;
}

@media (max-width: 767px) {
  .slide12-illust {
    align-items: center;
    padding: 0 2% 2%;
  }

  .slide12-illust-inner {
    flex-direction: row;
    width: min(98%, 100%);
    gap: clamp(6px, 2vw, 14px);
  }

  .slide12-img--1 {
    width: clamp(120px, 40vw, 200px);
    max-height: 40vw;
  }

  .slide12-img--2 {
    width: clamp(100px, 36vw, 180px);
    max-height: 48vw;
  }
}

/* ========== slide13 ========== */
.slide[data-index="12"] .slide-placeholder {
  justify-content: flex-start;
  gap: clamp(8px, 1.5cqw, 16px);
}

.slide13-illust {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 2% 2%;
  margin-top: clamp(4px, 1cqw, 12px);
  box-sizing: border-box;
  overflow: visible;
}

.slide13-img {
  display: block;
  width: min(100%, 960px);
  max-height: 100%;
  opacity: 0;
}

.slide13-img svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52cqw, 360px);
  overflow: visible;
}

@keyframes s13c-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* slide13_01：1s後フェードイン */
.slide.active[data-index="12"] .slide13-img {
  animation: s13c-img-fade-in 0.55s ease 1s both;
}

.slide[data-index="12"]:not(.active) .slide13-img {
  opacity: 0;
  animation: none !important;
}

@media (max-width: 767px) {
  .slide13-illust {
    align-items: flex-start;
    padding: 0 1% 2%;
    margin-top: 1vw;
  }

  .slide13-img {
    width: 100%;
  }

  .slide13-img svg {
    max-height: min(48vw, 280px);
  }
}

/* ============================================================
   乳がん用：スライド14　イラスト（入れ替え＋レイヤーごとの登場アニメ）
   slide14_02 → slide14_03 → slide14_01 の順で入れ替え
   ============================================================ */
.slide[data-index="13"] .slide-placeholder {
  justify-content: flex-start;
  gap: clamp(8px, 1.5cqw, 16px);
  min-height: 0;
  overflow: hidden;
}

.slide14-illust {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* ふわふわ上昇分の余白を上部に少し確保しつつ、キャッチ直下へ上つき */
  padding: 12px 3% 2%;
  margin-top: clamp(4px, 1cqw, 12px);
  box-sizing: border-box;
  overflow: hidden;
}

.slide14-illust-inner {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  width: min(100%, 920px);
  height: auto;
  max-height: 100%;
  min-height: 0;
}

.slide14-illust-inner > * {
  grid-area: 1 / 1;
}

.slide14-img {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  opacity: 0;
}

.slide14-img svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(52cqw, 360px);
  overflow: visible;
}

.slide14-img--02 {
  z-index: 1;
}

.slide14-img--03 {
  z-index: 2;
}

.slide14-img--01 {
  z-index: 3;
}

.slide14-img--01 svg {
  max-height: min(60cqw, 420px);
}

/* slide14_01 レイヤー初期状態 */
.slide14-img--01 #s14_x5F_man,
.slide14-img--01 #s14_x5F_woman,
.slide14-img--01 #s14_x5F_label_x5F_01,
.slide14-img--01 #s14_x5F_label_x5F_02,
.slide14-img--01 #s14_x5F_label_x5F_03 {
  opacity: 0;
}

@keyframes s14-img-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes s14-img-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes s14-img-show {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes s14-illust-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes s14-man-in {
  from { opacity: 0; transform: translateX(180px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes s14-woman-in {
  from { opacity: 0; transform: translateX(-180px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes s14-woman-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes s14-label-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* slide14_02：0.3s〜 フェードイン＋ふわふわ → 9.5sでフェードアウト */
.slide.active[data-index="13"] .slide14-img--02 {
  animation:
    s14-img-in 0.8s ease 0.3s both,
    s14-illust-float 3.2s ease-in-out 1.1s infinite,
    s14-img-out 0.6s ease 9.5s forwards;
}

/* slide14_03：10s〜 フェードイン＋ふわふわ → 17.5sでフェードアウト */
.slide.active[data-index="13"] .slide14-img--03 {
  animation:
    s14-img-in 0.8s ease 10s both,
    s14-illust-float 3.2s ease-in-out 10.8s infinite,
    s14-img-out 0.6s ease 17.5s forwards;
}

/* slide14_01：18s〜 表示開始 */
.slide.active[data-index="13"] .slide14-img--01 {
  animation: s14-img-show 0.01s linear 18s both;
}

/* 男性：18s〜 右からフェードイン */
.slide.active[data-index="13"] .slide14-img--01 #s14_x5F_man {
  animation: s14-man-in 0.8s cubic-bezier(0.22, 0.8, 0.4, 1) 18s both;
}

/* 女性：19s〜 左からフェードイン → 以降ふわふわ */
.slide.active[data-index="13"] .slide14-img--01 #s14_x5F_woman {
  animation:
    s14-woman-in 0.8s cubic-bezier(0.22, 0.8, 0.4, 1) 19s both,
    s14-woman-float 3.2s ease-in-out 19.8s infinite;
}

/* ラベル01：19s フェードイン */
.slide.active[data-index="13"] .slide14-img--01 #s14_x5F_label_x5F_01 {
  animation: s14-label-in 0.6s ease 19s both;
}

/* ラベル02：22s フェードイン */
.slide.active[data-index="13"] .slide14-img--01 #s14_x5F_label_x5F_02 {
  animation: s14-label-in 0.6s ease 22s both;
}

/* ラベル03：25s フェードイン */
.slide.active[data-index="13"] .slide14-img--01 #s14_x5F_label_x5F_03 {
  animation: s14-label-in 0.6s ease 25s both;
}

/* 非アクティブ時はリセット */
.slide[data-index="13"]:not(.active) .slide14-img--02,
.slide[data-index="13"]:not(.active) .slide14-img--03,
.slide[data-index="13"]:not(.active) .slide14-img--01 {
  opacity: 0;
  animation: none !important;
  transform: none;
}

.slide[data-index="13"]:not(.active) .slide14-img--01 #s14_x5F_man,
.slide[data-index="13"]:not(.active) .slide14-img--01 #s14_x5F_woman,
.slide[data-index="13"]:not(.active) .slide14-img--01 #s14_x5F_label_x5F_01,
.slide[data-index="13"]:not(.active) .slide14-img--01 #s14_x5F_label_x5F_02,
.slide[data-index="13"]:not(.active) .slide14-img--01 #s14_x5F_label_x5F_03 {
  opacity: 0;
  animation: none !important;
  transform: none;
}

@media (max-width: 767px) {
  /* キャッチ直下へ上つき（縦に伸ばして中央寄せしない） */
  .slide14-illust {
    flex: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 2% 16px;
    margin-top: clamp(8px, 2vw, 16px);
    height: auto;
  }

  .slide14-illust-inner {
    width: min(100%, 100%);
    height: auto;
    max-height: none;
    align-items: flex-start;
  }

  .slide14-img {
    height: auto;
    max-height: none;
    align-items: flex-start;
  }

  .slide14-img svg {
    width: auto;
    max-width: 64%;
    max-height: min(42vw, 240px);
  }

  /* 最初に出る 02 / 03 は他スライドに合わせて小さめ */
  .slide14-img--02 svg,
  .slide14-img--03 svg {
    max-width: 56%;
    max-height: min(38vw, 220px);
  }

  .slide14-img--01 svg {
    max-width: 88%;
    max-height: min(48vw, 280px);
  }
}

/* ============================================================
   乳がん用：スライド15　イラスト
   0.3s：s15_woman_00 フェードイン→上下ふわふわ／
   4s：s15_label_00 フェードイン／
   17.5s：slide15_03 フェードアウト／
   18s：slide15_01 表示、s15_man 右からフェードイン／
   20s：s15_woman 左からフェードイン → 20.8s〜 親ごと男女いっしょに上下ふわふわ
   ============================================================ */
.slide[data-index="14"] .slide-placeholder {
  justify-content: flex-start;
  gap: clamp(8px, 1.5cqw, 16px);
  min-height: 0;
  overflow: hidden;
}

.slide15-illust {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ふわふわ（translateY -12px）で頭が切れないよう上下余白を確保 */
  padding: 20px 3% 22px;
  margin-top: clamp(4px, 1cqw, 12px);
  box-sizing: border-box;
  overflow: hidden;
}

.slide15-illust-inner {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  width: min(100%, 720px);
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

.slide15-illust-inner > * {
  grid-area: 1 / 1;
}

.slide15-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

.slide15-img svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* 親の上下余白内でふわふわできるよう高さに余裕を残す */
  max-height: calc(100% - 28px);
  overflow: visible;
}

.slide15-img--03 {
  z-index: 1;
}

.slide15-img--03 svg {
  max-width: 62%;
  max-height: min(78%, calc(100% - 28px));
}

.slide15-img--01 {
  z-index: 2;
  opacity: 0;
}

/* 男女イラスト：ふわふわ上昇分を見込んでさらに余白を残す */
.slide15-img--01 svg {
  max-height: calc(100% - 28px);
}

/* slide15_03 レイヤー初期状態 */
.slide15-img--03 #s15_x5F_woman_x5F_00,
.slide15-img--03 #s15_x5F_label_x5F_00 {
  opacity: 0;
}

/* slide15_01 レイヤー初期状態 */
.slide15-img--01 #s15_x5F_man,
.slide15-img--01 #s15_x5F_woman {
  opacity: 0;
}

@keyframes s15-woman-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes s15-label-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes s15-img03-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes s15-img01-show {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes s15-man-in {
  from { opacity: 0; transform: translateX(180px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes s15-woman-in {
  from { opacity: 0; transform: translateX(-180px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes s15-person-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* 女性：0.3s〜 フェードイン → 以降ふわふわ */
.slide.active[data-index="14"] .slide15-img--03 #s15_x5F_woman_x5F_00 {
  animation:
    s4-fade-in 0.8s ease 0.3s forwards,
    s15-woman-float 2.8s ease-in-out 1.1s infinite;
}

/* ラベル：4s〜 フェードイン */
.slide.active[data-index="14"] .slide15-img--03 #s15_x5F_label_x5F_00 {
  animation: s15-label-in 0.6s ease 4s both;
}

/* slide15_03：17.5s〜 フェードアウト */
.slide.active[data-index="14"] .slide15-img--03 {
  animation: s15-img03-out 0.6s ease 17.5s both;
}

.slide.active[data-index="14"] .slide15-img--01 {
  animation:
    s15-img01-show 0.01s linear 18s both,
    s15-person-float 2.8s ease-in-out 20.8s infinite;
}

/* 男性：18s〜 右からフェードイン */
.slide.active[data-index="14"] .slide15-img--01 #s15_x5F_man {
  animation: s15-man-in 0.8s cubic-bezier(0.22, 0.8, 0.4, 1) 18s both;
}

/* 女性：20s〜 左からフェードイン（ふわふわは親と共通） */
.slide.active[data-index="14"] .slide15-img--01 #s15_x5F_woman {
  animation: s15-woman-in 0.8s cubic-bezier(0.22, 0.8, 0.4, 1) 20s both;
}

/* 非アクティブ時はリセット */
.slide[data-index="14"]:not(.active) .slide15-img--03 {
  opacity: 1;
  animation: none !important;
  transform: none;
}

.slide[data-index="14"]:not(.active) .slide15-img--01 {
  opacity: 0;
  animation: none !important;
  transform: none;
}

.slide[data-index="14"]:not(.active) .slide15-img--03 #s15_x5F_woman_x5F_00,
.slide[data-index="14"]:not(.active) .slide15-img--03 #s15_x5F_label_x5F_00,
.slide[data-index="14"]:not(.active) .slide15-img--01 #s15_x5F_man,
.slide[data-index="14"]:not(.active) .slide15-img--01 #s15_x5F_woman {
  opacity: 0;
  animation: none !important;
  transform: none;
}

@media (max-width: 767px) {
  /* キャッチ直下へ上つき（縦に伸ばして中央寄せしない） */
  .slide15-illust {
    flex: none;
    align-items: flex-start;
    justify-content: center;
    /* ふわふわ上昇（-12px）で頭が切れないよう上余白を確保 */
    padding: 20px 2% 22px;
    margin-top: clamp(8px, 2vw, 16px);
    height: auto;
  }

  .slide15-illust-inner {
    width: min(100%, 100%);
    height: auto;
    max-height: none;
    align-items: start;
  }

  .slide15-img {
    height: auto;
    max-height: none;
    align-items: flex-start;
  }

  /* 最初に表示される slide15_03 を少し小さめに */
  .slide15-img--03 svg {
    max-width: 50%;
    max-height: none;
  }

  .slide15-img svg {
    max-height: none;
  }
}

/* スマホ：キャッチコピーの字間（PCも gap: 0） */
@media (max-width: 767px) {
  .s4-main-title,
  .s5-idol-title,
  .s7-title-phase,
  .s8-title-line,
  .s3-catch-line,
  .s4-catch-line,
  .slide06-catch-line,
  .slide07-catch-line,
  .slide08-catch-line,
  .slide09-catch-line,
  .slide10-catch-line,
  .slide11-catch-line,
  .slide12-catch-line,
  .slide13-catch-line,
  .slide14-catch-line,
  .slide15-catch-line {
    gap: 0;
  }
}

/* スマホ：画像・図表をキャッチコピー直下に上寄せ */
@media (max-width: 767px) {
  /* スライド2：グラフをタイトル直下へ */
  .slide02-body {
    justify-content: flex-start;
  }

  /* スライド3：キャッチと図の間隔を最小限に */
  .slide[data-index="2"] .slide-image-box {
    margin-top: clamp(4px, 1vw, 8px);
  }

  /* スライド4：左右の図をキャッチ直下へ */
  .slide04-images {
    align-items: flex-start;
    margin-top: 0;
  }

  /* スライド5：左右は高さ揃え・上つき（画面高さいっぱいに伸ばさない） */
  .slide05-body {
    flex: none;
    align-items: stretch;
    align-self: stretch;
  }

  .slide05-col {
    justify-content: flex-start;
  }

  .slide05-col-main {
    flex: 0 0 auto;
  }

  .slide05-summary {
    margin-top: auto;
  }

  /* スライド6：SVGを残り領域の中央ではなく上端に配置 */
  .s6img-box,
  .s6img-box__svg {
    align-items: flex-start;
  }

  /* スライド7：2カラムを上寄せ（キャッチとの間隔は上の指定を維持） */
  .slide[data-index="6"] .slide05c-body,
  .slide[data-index="6"] .slide05c-left {
    align-items: flex-start;
  }

  .slide[data-index="6"] .slide05c-right,
  .slide[data-index="6"] .slide05c-card {
    justify-content: flex-start;
  }

  /* スライド8〜15：イラスト領域をキャッチ直下へ統一 */
  .slide[data-index="7"] .slide-placeholder,
  .slide[data-index="8"] .slide-placeholder,
  .slide[data-index="9"] .slide-placeholder,
  .slide[data-index="10"] .slide-placeholder,
  .slide[data-index="11"] .slide-placeholder,
  .slide[data-index="12"] .slide-placeholder,
  .slide[data-index="13"] .slide-placeholder,
  .slide[data-index="14"] .slide-placeholder {
    gap: 0;
  }

  .slide08-illust,
  .slide09-illust,
  .slide10-illust,
  .slide11-illust,
  .slide12-illust,
  .slide13-illust,
  .slide14-illust,
  .slide15-illust {
    align-items: flex-start;
    margin-top: 0;
  }
}

/* ============================================
   再生速度スケーリング：CSS カスタムプロパティ --sp
   JS から document.documentElement.style.setProperty('--sp', rate) で変更
   各スライドの animation-delay を calc(delay / var(--sp)) で上書き
   ============================================ */
:root { --sp: 1; }
/* 確認テストURL未設定時 */
.test-link--disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
  filter: grayscale(40%);
}