/* ローカルフォント */
@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;
}

/* ========== スライド4：キャッチコピー下の参考図 ========== */
.slide[data-index="3"] .slide-placeholder {
  padding: 0 2.5% 2.5%;
}

.slide04-reference-layout {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2cqw 0 0;
}

.slide04-reference-visual {
  position: relative;
  width: 94%;
  max-height: 94%;
  min-height: 0;
  aspect-ratio: 1021 / 511.49;
  overflow: visible;
}

.slide04-reference-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

@media (max-width: 767px) {
  .slide[data-index="3"] .slide-placeholder {
    padding: 0 3% 3%;
  }
  .slide04-reference-layout {
    flex: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(4px, 1.5vw, 10px);
    min-height: 0;
  }

  .slide04-reference-visual {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .slide04-reference-img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1021 / 511.49;
  }
}

/* ========== 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(72%, calc(-70% + 16px)); }
  to   { opacity: 1; transform: translate(32%, -100%); }
}
@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_02・slide01_03）サイズ設定 */
.slide01-illust .illust-item--2,
.slide01-illust .illust-item--3 {
  height: 48.5%;
  position: relative;
  z-index: 2;
}

/* 左の吹き出しは中央イラストの背面に配置 */
.slide01-illust .illust-item--2 {
  z-index: 0;
}

/* slide01_03（右）のサイズ個別調整 */
.slide01-illust .illust-item--3 {
  height: 40.5%;
}


/* 中央イラストは左の吹き出しより前、右の吹き出しより後ろ */
.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-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：グラフレイアウト
   ============================================ */

/* PC：グラフ（左）+ 右パネル（右）横並び
   justify-content: center → 右パネルが0幅のとき中央寄り、26%になったとき自然に左寄り */
.slide02-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
}

/* 白い角丸ボックス（グラフ全体を囲む）
   flex: 0 0 71% で幅を固定 → SVGが一切リサイズされないためカクカクなし */
.slide02-graph-box {
  flex: 0 0 74%;
  min-width: 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-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;
}

/* 右パネル：初期は flex-basis:0 で幅なし → is-visible で 26% に広がりグラフが左へ動く */
.slide02-side {
  flex: 0 0 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: flex-basis 0.8s ease, opacity 0.6s ease 0.3s;
}

/* 右パネル表示：flex-basis を 26% へ広げる（グラフボックスが押し出されて左へ移動） */
.slide02-side.is-visible {
  flex: 0 0 26%;
  opacity: 1;
}

.slide02-side-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SP：下パネル */
.slide02-sp-panel {
  width: 100%;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide02-sp-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.slide02-sp-img {
  max-width: 90%;
  height: auto;
}

/* ============================================
   スライド2：SVG アニメーション
   JS タイマー不要。.anim-s2 クラスを .slide[data-index="1"] に
   追加するだけでアニメーション全体が起動する。
   ============================================ */

/* --- 初期状態：バッジ・ドット・ベースを非表示 --- */
#slide02ChartWrap #a,
#slide02ChartWrap #i,
#slide02ChartWrap #e,
#slide02ChartWrap #j,
#slide02ChartWrap #h {
  opacity: 0;
}

/* --- 初期状態：ポリライン(折れ線)を非表示 --- */
#slide02ChartWrap #c,
#slide02ChartWrap #d { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
#slide02ChartWrap #g  { stroke-dasharray: 1000; stroke-dashoffset: 1000; }

/* --- キーフレーム定義 --- */
@keyframes s2FadeIn   { from { opacity: 0; }              to { opacity: 1; } }
@keyframes s2DrawLine { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes s2ShowSide { from { flex-basis: 0%;  opacity: 0; } to { flex-basis: 26%; opacity: 1; } }
@keyframes s2ShowSp   { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* --- .anim-s2 が付いたら順番にアニメーション開始 --- */
.slide[data-index="1"].anim-s2 #a  { animation: s2FadeIn   0.6s ease         0s    both; }
.slide[data-index="1"].anim-s2 #i  { animation: s2FadeIn   0.5s ease          3.0s  both; }
.slide[data-index="1"].anim-s2 #c,
.slide[data-index="1"].anim-s2 #d  { animation: s2DrawLine 1.5s ease-in-out   3.3s  both; }
.slide[data-index="1"].anim-s2 #e  { animation: s2FadeIn   0.5s ease           5.0s  both; }
.slide[data-index="1"].anim-s2 #j  { animation: s2FadeIn   0.5s ease           9.0s  both; }
.slide[data-index="1"].anim-s2 #g  { animation: s2DrawLine 1.5s ease-in-out   9.3s  both; }
.slide[data-index="1"].anim-s2 #h  { animation: s2FadeIn   0.5s ease          11.0s  both; }

/* パネル (PC 右パネル) */
.slide[data-index="1"].anim-s2 .slide02-side {
  animation: s2ShowSide 0.8s ease-in-out 15.0s both;
}
/* パネル (SP 下パネル) */
.slide[data-index="1"].anim-s2 .slide02-sp-panel {
  animation: s2ShowSp 0.6s ease 15.0s both;
}

/* スマホ調整 */
@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：PC右パネルを確実に非表示（.slide02-sideのdisplay:flexより後に記述して詳細度で勝つ） */
  .slide02-side.pc-only {
    display: none;
  }

  /* SP：グラフ幅いっぱい + 縦積みレイアウト */
  .slide02-row {
    height: auto;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .slide02-graph-box {
    flex: 0 0 100%;
    width: 100%;
    padding: 2% 2%;
  }

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

  .slide02-sp-panel {
    display: flex;
    justify-content: center;
    margin-top: 2１0px;
  }

  .slide02-sp-img {
    width: 80%;
    max-width: 80%;
    height: auto;
  }
}

/* ============================================
   スライド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: 78%;
  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);
  }
}

@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;
}

.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="9"] .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="9"]:not(.active) .finish-char {
  opacity: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .slide.active[data-index="9"] .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="9"] .slide-finish-test-btn {
  animation: finish-btn-heartbeat 2.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .slide.active[data-index="9"] .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;
  min-height: 0;
}

@media (max-width: 767px) {
  .slide-placeholder {
    justify-content: flex-start;
    gap: clamp(4px, 1.2vw, 10px);
  }

  .anemia-catch {
    flex: 0 0 auto;
  }
}

.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: 1cqw 0 0;
  font-size: clamp(8px, 1.4cqw, 13px);
  color: #333;
  text-align: center;
  line-height: 1.4;
}

/* スライド4出典：#s04_x5F_copy02（バナー下端≈95%）の直下に重ねる */
.slide[data-index="3"] .slide-image-note {
  position: absolute;
  left: 0;
  right: 0;
  top: 98%;
  width: 100%;
  margin: 0;
  opacity: 0;
  transform: translateY(18px);
}

.slide.active[data-index="3"] .slide-image-note {
  animation: s04NoteFromBottom .6s ease 21s both;
}

.slide[data-index="3"]:not(.active) .slide-image-note {
  opacity: 0;
  animation: none;
  transform: translateY(18px);
}

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

/* ========== スライド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);
}

.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) {
  .slide05c-body {
    align-items: flex-start;
    gap: 3%;
    padding: 1% 2% 2%;
  }

  .slide05c-card {
    padding: 10px 12px 8px;
  }
}

/* ============================================================
   スライド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：男性の対処法（横長イラスト3枚重ね）
   ============================================================ */
.slide08-illust {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2% 2%;
  overflow: visible;
}

.slide08-illust-inner {
  position: relative;
  width: 85%;
}

.slide08-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 845.26 / 406.21;
  object-fit: contain;
}

.slide08-img--1 {
  position: relative;
  z-index: 1;
}

.slide08-img--2 {
  z-index: 2;
}

.slide08-img--3 {
  z-index: 3;
}

.slide08-img--4 {
  z-index: 4;
  transform-origin: center center;
}

/* スライド8：イラスト初期非表示 */
.slide08-img--1,
.slide08-img--2,
.slide08-img--3,
.slide08-img--4 {
  opacity: 0;
}

/* キーフレーム */
@keyframes s8c-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes s8c-img03-slide-in {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes s8c-img03-float {
  0%, 100% { transform: translateY(0);   }
  50%      { transform: translateY(-5px); }
}

@keyframes s8c-img04-pop-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1);   }
}

/* 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：3s後フェードイン → ふわふわ */
.slide.active[data-index="7"] .slide08-img--2 {
  animation:
    s8c-img-fade-in 0.55s ease               3s    both,
    s8c-img02-float 2.75s ease-in-out         3.55s infinite;
}

/* slide08_03：9s後右の画面外からスライドイン → ふわふわ */
.slide.active[data-index="7"] .slide08-img--3 {
  animation:
    s8c-img03-slide-in 0.65s cubic-bezier(0.22, 0.8, 0.35, 1) 9s    both,
    s8c-img03-float    2.75s ease-in-out                        9.65s infinite;
}

/* slide08_04：5s後ぽんっとフェードイン → 心音ループ */
.slide.active[data-index="7"] .slide08-img--4 {
  animation:
    s8c-img04-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 5s   both,
    s5c-heartbeat    2.2s ease-in-out                         5.5s infinite;
}

/* 非アクティブ時リセット */
.slide[data-index="7"]:not(.active) .slide08-img--1,
.slide[data-index="7"]:not(.active) .slide08-img--2,
.slide[data-index="7"]:not(.active) .slide08-img--3,
.slide[data-index="7"]:not(.active) .slide08-img--4 {
  opacity: 0;
  animation: none !important;
}

@media (max-width: 767px) {
  .slide08-illust {
    flex: none;
    align-items: flex-start;
    justify-content: center;
    padding: 0 2% 3%;
    margin-top: 0;
  }
}

/* スライド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;
}

/* ========== slide09 ========== */
.slide09-illust {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2% 2%;
  overflow: visible;
  box-sizing: border-box;
}

.slide09-illust-inner {
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: visible;
}

.slide09-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.slide09-img--1 {
  position: relative;
  z-index: 4;
  overflow: visible;
}

/* 右吹き出し：上右に配置 */
.slide09-img--2 {
  left: auto;
  right: -25%;
  top: -10%;
  width: 45%;
  z-index: 2;
}

/* 左吹き出し：上左に配置 */
.slide09-img--3 {
  left: -20%;
  top: -10%;
  width: 43%;
  z-index: 3;
}

/* スライド9：イラスト・吹き出し 初期非表示 */
.slide09-img--2,
.slide09-img--3 {
  opacity: 0;
}

/* キーフレーム */
@keyframes s9c-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* slide09_02：27s後フェードイン */
.slide.active[data-index="8"] .slide09-img--2 {
  animation: s9c-fade-in 0.55s ease 27s both;
}

/* slide09_03：31s後フェードイン */
.slide.active[data-index="8"] .slide09-img--3 {
  animation: s9c-fade-in 0.55s ease 31s both;
}

/* 非アクティブ時リセット */
.slide[data-index="8"]:not(.active) .slide09-img--2,
.slide[data-index="8"]:not(.active) .slide09-img--3 {
  opacity: 0;
  animation: none !important;
}

/* スライド9出典：card01_d（7.5sバンイン）に合わせてフェードイン */
.slide[data-index="8"] .anemia-slide05-source {
  opacity: 0;
}

.slide.active[data-index="8"] .anemia-slide05-source {
  animation: s9c-fade-in 0.65s ease 7.5s both;
}

.slide[data-index="8"]:not(.active) .anemia-slide05-source {
  opacity: 0;
  animation: none !important;
}

@media (max-width: 767px) {
  .slide09-illust {
    flex: none;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 2% 3%;
    margin-top: 0;
  }
  .slide09-img--2 {
    width: 67%;
    right: -40%;
    top: -30%;
    transform-origin: left bottom;
  }
  .slide09-img--3 {
    width: 55%;
    left: -35%;
    top: -30%;
    transform-origin: right bottom;
  }
}

/* スライド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;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2% 2%;
  overflow: visible;
}

.slide10-illust-inner {
  position: relative;
  width: 60%;
  margin: 0 auto;
}

.slide10-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.slide10-img--1 {
  position: relative;
  z-index: 1;
}

.slide10-img--2 {
  z-index: 2;
}

.slide10-img--3 {
  z-index: 3;
}

.slide10-img--4 {
  z-index: 4;
}

/* スライド10：イラスト初期非表示 */
.slide10-img--1,
.slide10-img--2,
.slide10-img--3,
.slide10-img--4 {
  opacity: 0;
}

/* slide10 フェードイン／ふわふわ キーフレーム */
@keyframes s10c-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* slide10_02：5s後フェードイン → ふわふわ */
.slide.active[data-index="9"] .slide10-img--2 {
  animation:
    s10c-fade-in 0.55s ease        5s    both,
    s10c-float   2.8s  ease-in-out 5.55s infinite;
}

/* slide10_01：19s後フェードイン */
.slide.active[data-index="9"] .slide10-img--1 {
  animation: s10c-fade-in 0.55s ease 19s both;
}

/* slide10_03：28s後フェードイン */
.slide.active[data-index="9"] .slide10-img--3 {
  animation: s10c-fade-in 0.55s ease 28s both;
}

/* slide10_04：32s後フェードイン */
.slide.active[data-index="9"] .slide10-img--4 {
  animation: s10c-fade-in 0.55s ease 32s both;
}

/* 非アクティブ時リセット */
.slide[data-index="9"]:not(.active) .slide10-img--1,
.slide[data-index="9"]:not(.active) .slide10-img--2,
.slide[data-index="9"]:not(.active) .slide10-img--3,
.slide[data-index="9"]:not(.active) .slide10-img--4 {
  opacity: 0;
  animation: none !important;
}

@media (max-width: 767px) {
  .slide10-illust {
    align-items: flex-start;
    justify-content: center;
    padding: 0 2% 3%;
  }
  .slide10-illust-inner {
    width: 88%;
  }
}

/* ============================================
   再生速度スケーリング：CSS カスタムプロパティ --sp
   JS から document.documentElement.style.setProperty('--sp', rate) で変更
   各スライドの animation-delay を calc(delay / var(--sp)) で上書き
   ============================================ */
:root { --sp: 1; }
/* ============================================================
   貧血用：キャッチコピー共通スタイル（各スライドの音声に同期）
   1行ずつ文字送りで表示し、次の行の開始でフェードアウトして入れ替わる
   ============================================================ */
.anemia-catch {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0 2%;
  place-content: center;
  box-sizing: border-box;
}
.anemia-catch > * {
  grid-area: 1 / 1;
}
.anemia-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.5;
  text-align: center;
}
@media (max-width: 767px) {
  .anemia-catch-line {
    font-size: clamp(13px, 3.6vw, 18px);
  }
}
.anemia-catch-char {
  display: inline-block;
  opacity: 0;
}

/* 貧血・スライド2：メイン図解 */
.anemia-slide02-visual {
  flex: 1;
  min-height: 0;
  width: 92%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.anemia-slide02-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.anemia-slide02-layer {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.anemia-slide02-layer--graph,
.anemia-slide02-layer--cards {
  left: 0;
  top: 5%;
  width: 76%;
  height: 90%;
}

.anemia-slide02-layer--graph {
  z-index: 2;
  opacity: 1;
}

.anemia-slide02-layer--graph.is-audio-hidden {
  opacity: 0 !important;
  visibility: hidden;
}

.anemia-slide02-layer--cards {
  z-index: 1;
  overflow: visible;
  left: -2.5%;
  top: 2%;
  width: 81%;
  height: 96%;
}

.anemia-slide02-layer--woman {
  z-index: 3;
  right: 1%;
  top: 0;
  width: 21%;
  height: 100%;
}

@media (min-width: 768px) {
  .anemia-slide02-visual {
    width: 76%;
  }
}

@media (max-width: 767px) {
  .anemia-slide02-visual {
    flex: none;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    /* 絶対配置レイヤー用の高さ（縦に伸ばして中央寄せしない） */
    height: 58cqw;
    min-height: 0;
    max-height: none;
  }
}

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

/* ============================================================
   貧血用：スライド2　キャッチコピー（音声に合わせて1行ずつ入れ替え）
   ============================================================ */
.slide.active[data-index="1"] .anemia-catch-line--1 .anemia-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="1"] .anemia-catch-line--1 {
  animation: anemia-catch-line-out 0.6s ease 4s both;
}
.slide.active[data-index="1"] .anemia-catch-line--2 .anemia-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="1"] .anemia-catch-line--2 {
  animation: anemia-catch-line-out 0.6s ease 7.5s both;
}
.slide.active[data-index="1"] .anemia-catch-line--3 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(7.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="1"] .anemia-catch-line--3 {
  animation: anemia-catch-line-out 0.6s ease 13s both;
}
.slide.active[data-index="1"] .anemia-catch-line--4 .anemia-catch-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="1"] .anemia-catch-line--4 {
  animation: anemia-catch-line-out 0.6s ease 20s both;
}
.slide.active[data-index="1"] .anemia-catch-line--5 .anemia-catch-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="1"] .anemia-catch-line--5 {
  animation: anemia-catch-line-out 0.6s ease 22.5s both;
}
.slide.active[data-index="1"] .anemia-catch-line--6 .anemia-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="1"] .anemia-catch-line--6 {
  animation: anemia-catch-line-out 0.6s ease 25.5s both;
}
.slide.active[data-index="1"] .anemia-catch-line--7 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(25.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="1"] .anemia-catch-line--7 {
  animation: anemia-catch-line-out 0.6s ease 29.5s both;
}
.slide.active[data-index="1"] .anemia-catch-line--8 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(29.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="1"] .anemia-catch-line--8 {
  animation: anemia-catch-line-out 0.6s ease 32s both;
}
.slide.active[data-index="1"] .anemia-catch-line--9 .anemia-catch-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="1"] .anemia-catch-line--9 {
  animation: anemia-catch-line-out 0.6s ease 34s both;
}
.slide.active[data-index="1"] .anemia-catch-line--10 .anemia-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.active[data-index="1"] .anemia-catch-line--10 {
  animation: anemia-catch-line-out 0.6s ease 37.5s both;
}
.slide.active[data-index="1"] .anemia-catch-line--11 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(37.5s + var(--ci, 0) * 80ms);
}
.slide[data-index="1"]:not(.active) .anemia-catch-line {
  animation: none;
}
.slide[data-index="1"]:not(.active) .anemia-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   貧血用：スライド3　キャッチコピー（音声に合わせて1行ずつ入れ替え）
   ============================================================ */
.slide.active[data-index="2"] .anemia-catch-line--1 .anemia-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"] .anemia-catch-line--1 {
  animation: anemia-catch-line-out 0.6s ease 3.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--2 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(3.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--2 {
  animation: anemia-catch-line-out 0.6s ease 7s both;
}
.slide.active[data-index="2"] .anemia-catch-line--3 .anemia-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="2"] .anemia-catch-line--3 {
  animation: anemia-catch-line-out 0.6s ease 10.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--4 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(10.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--4 {
  animation: anemia-catch-line-out 0.6s ease 14s both;
}
.slide.active[data-index="2"] .anemia-catch-line--5 .anemia-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="2"] .anemia-catch-line--5 {
  animation: anemia-catch-line-out 0.6s ease 16.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--6 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(16.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--6 {
  animation: anemia-catch-line-out 0.6s ease 18.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--7 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(18.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--7 {
  animation: anemia-catch-line-out 0.6s ease 21.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--8 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(21.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--8 {
  animation: anemia-catch-line-out 0.6s ease 26s both;
}
.slide.active[data-index="2"] .anemia-catch-line--9 .anemia-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="2"] .anemia-catch-line--9 {
  animation: anemia-catch-line-out 0.6s ease 28.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--10 .anemia-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="2"] .anemia-catch-line--10 {
  animation: anemia-catch-line-out 0.6s ease 31.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--11 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(31.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--11 {
  animation: anemia-catch-line-out 0.6s ease 34.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--12 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(34.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--12 {
  animation: anemia-catch-line-out 0.6s ease 38.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--13 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(38.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--13 {
  animation: anemia-catch-line-out 0.6s ease 42s both;
}
.slide.active[data-index="2"] .anemia-catch-line--14 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(42s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--14 {
  animation: anemia-catch-line-out 0.6s ease 44.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--15 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(44.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--15 {
  animation: anemia-catch-line-out 0.6s ease 48.5s both;
}
.slide.active[data-index="2"] .anemia-catch-line--16 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(48.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="2"] .anemia-catch-line--16 {
  animation: anemia-catch-line-out 0.6s ease 53s both;
}
.slide.active[data-index="2"] .anemia-catch-line--17 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(53s + var(--ci, 0) * 80ms);
}
.slide[data-index="2"]:not(.active) .anemia-catch-line {
  animation: none;
}
.slide[data-index="2"]:not(.active) .anemia-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   貧血用：スライド4　キャッチコピー（音声に合わせて1行ずつ入れ替え）
   ============================================================ */
.slide.active[data-index="3"] .anemia-catch-line--1 .anemia-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"] .anemia-catch-line--1 {
  animation: anemia-catch-line-out 0.6s ease 4s both;
}
.slide.active[data-index="3"] .anemia-catch-line--2 .anemia-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="3"] .anemia-catch-line--2 {
  animation: anemia-catch-line-out 0.6s ease 7s both;
}
.slide.active[data-index="3"] .anemia-catch-line--3 .anemia-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="3"] .anemia-catch-line--3 {
  animation: anemia-catch-line-out 0.6s ease 10s both;
}
.slide.active[data-index="3"] .anemia-catch-line--4 .anemia-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="3"] .anemia-catch-line--4 {
  animation: anemia-catch-line-out 0.6s ease 12s both;
}
.slide.active[data-index="3"] .anemia-catch-line--5 .anemia-catch-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="3"] .anemia-catch-line--5 {
  animation: anemia-catch-line-out 0.6s ease 16s both;
}
.slide.active[data-index="3"] .anemia-catch-line--6 .anemia-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="3"] .anemia-catch-line--6 {
  animation: anemia-catch-line-out 0.6s ease 21s both;
}
.slide.active[data-index="3"] .anemia-catch-line--7 .anemia-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.active[data-index="3"] .anemia-catch-line--7 {
  animation: anemia-catch-line-out 0.6s ease 25.5s both;
}
.slide.active[data-index="3"] .anemia-catch-line--8 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(25.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .anemia-catch-line--8 {
  animation: anemia-catch-line-out 0.6s ease 30.5s both;
}
.slide.active[data-index="3"] .anemia-catch-line--9 .anemia-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="3"] .anemia-catch-line--9 {
  animation: anemia-catch-line-out 0.6s ease 35.5s both;
}
.slide.active[data-index="3"] .anemia-catch-line--10 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(35.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .anemia-catch-line--10 {
  animation: anemia-catch-line-out 0.6s ease 39s both;
}
.slide.active[data-index="3"] .anemia-catch-line--11 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(39s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .anemia-catch-line--11 {
  animation: anemia-catch-line-out 0.6s ease 41s both;
}
.slide.active[data-index="3"] .anemia-catch-line--12 .anemia-catch-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);
}
.slide.active[data-index="3"] .anemia-catch-line--12 {
  animation: anemia-catch-line-out 0.6s ease 45s both;
}
.slide.active[data-index="3"] .anemia-catch-line--13 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(45s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="3"] .anemia-catch-line--13 {
  animation: anemia-catch-line-out 0.6s ease 46.5s both;
}
.slide.active[data-index="3"] .anemia-catch-line--14 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(46.5s + var(--ci, 0) * 80ms);
}
.slide[data-index="3"]:not(.active) .anemia-catch-line {
  animation: none;
}
.slide[data-index="3"]:not(.active) .anemia-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   貧血用：スライド5　キャッチコピー（音声に合わせて1行ずつ入れ替え）
   ============================================================ */
.anemia-slide05-figure {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 1% 5% 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.anemia-slide05-visual {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100% - clamp(20px, 3cqw, 32px));
  object-fit: contain;
}

.anemia-slide05-source {
  width: 100%;
  margin-top: clamp(3px, 0.6cqw, 7px);
  color: #333;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: clamp(9px, 1.45cqw, 14px);
  line-height: 1.4;
  text-align: center;
}

/* 貧血・スライド6：キャッチコピー下の食材図解 */
.anemia-slide06-figure {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 1% 5% 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.anemia-slide06-visual {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* 貧血・スライド7：キャッチコピー下の図解を33秒で入れ替え */
.anemia-slide07-figure {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 1% 5% 2%;
  box-sizing: border-box;
}

.anemia-slide07-visual {
  position: absolute;
  inset: 1% 5% 2%;
  display: block;
  width: 90%;
  height: 97%;
  object-fit: contain;
}

.anemia-slide07-visual--1 {
  opacity: 1;
}

.anemia-slide07-visual--2 {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center;
}

@keyframes anemia-slide07-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

.slide.active[data-index="6"] .anemia-slide07-visual--1 {
  animation: anemia-slide07-fade-out 0.6s ease 33s both;
}

.slide.active[data-index="6"] .anemia-slide07-visual--2 {
  animation: anemia-slide07-fade-in 0.6s ease 33s both;
}

.slide[data-index="6"]:not(.active) .anemia-slide07-visual {
  animation: none;
}

.slide[data-index="6"]:not(.active) .anemia-slide07-visual--1 {
  opacity: 1;
}

.slide[data-index="6"]:not(.active) .anemia-slide07-visual--2 {
  opacity: 0;
}

@media (max-width: 767px) {
  .anemia-slide05-figure {
    flex: none;
    align-items: center;
    justify-content: flex-start;
    padding: 2% 3% 3%;
    margin-top: 0;
  }

  .anemia-slide05-visual {
    max-height: none;
    width: 100%;
  }

  .anemia-slide06-figure {
    flex: none;
    align-items: flex-start;
    justify-content: center;
    padding: 2% 3% 3%;
    margin-top: 0;
  }

  .anemia-slide06-visual {
    max-height: none;
    width: 100%;
  }

  .anemia-slide07-figure {
    flex: none;
    height: 58cqw;
    min-height: 0;
    padding: 2% 3% 3%;
    margin-top: 0;
  }

  .anemia-slide07-visual {
    inset: 2% 3% 3%;
    width: 94%;
    height: 95%;
    object-position: center top;
  }
}

.slide.active[data-index="4"] .anemia-catch-line--1 .anemia-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="4"] .anemia-catch-line--1 {
  animation: anemia-catch-line-out 0.6s ease 3.5s both;
}
.slide.active[data-index="4"] .anemia-catch-line--2 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(3.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="4"] .anemia-catch-line--2 {
  animation: anemia-catch-line-out 0.6s ease 9.5s both;
}
.slide.active[data-index="4"] .anemia-catch-line--3 .anemia-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="4"] .anemia-catch-line--3 {
  animation: anemia-catch-line-out 0.6s ease 17s both;
}
.slide.active[data-index="4"] .anemia-catch-line--4 .anemia-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="4"] .anemia-catch-line--4 {
  animation: anemia-catch-line-out 0.6s ease 23.5s both;
}
.slide.active[data-index="4"] .anemia-catch-line--5 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(23.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="4"] .anemia-catch-line--5 {
  animation: anemia-catch-line-out 0.6s ease 29.5s both;
}
.slide.active[data-index="4"] .anemia-catch-line--6 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(29.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="4"] .anemia-catch-line--6 {
  animation: anemia-catch-line-out 0.6s ease 36.5s both;
}
.slide.active[data-index="4"] .anemia-catch-line--7 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(36.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="4"] .anemia-catch-line--7 {
  animation: anemia-catch-line-out 0.6s ease 39.5s both;
}
.slide.active[data-index="4"] .anemia-catch-line--8 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(39.5s + var(--ci, 0) * 80ms);
}
.slide[data-index="4"]:not(.active) .anemia-catch-line {
  animation: none;
}
.slide[data-index="4"]:not(.active) .anemia-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   貧血用：スライド6　キャッチコピー（音声に合わせて1行ずつ入れ替え）
   ============================================================ */
.slide.active[data-index="5"] .anemia-catch-line--1 .anemia-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"] .anemia-catch-line--1 {
  animation: anemia-catch-line-out 0.6s ease 5s both;
}
.slide.active[data-index="5"] .anemia-catch-line--2 .anemia-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="5"] .anemia-catch-line--2 {
  animation: anemia-catch-line-out 0.6s ease 8s both;
}
.slide.active[data-index="5"] .anemia-catch-line--3 .anemia-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="5"] .anemia-catch-line--3 {
  animation: anemia-catch-line-out 0.6s ease 12s both;
}
.slide.active[data-index="5"] .anemia-catch-line--4 .anemia-catch-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="5"] .anemia-catch-line--4 {
  animation: anemia-catch-line-out 0.6s ease 16s both;
}
.slide.active[data-index="5"] .anemia-catch-line--5 .anemia-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="5"] .anemia-catch-line--5 {
  animation: anemia-catch-line-out 0.6s ease 18.5s both;
}
.slide.active[data-index="5"] .anemia-catch-line--6 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(18.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .anemia-catch-line--6 {
  animation: anemia-catch-line-out 0.6s ease 23.5s both;
}
.slide.active[data-index="5"] .anemia-catch-line--7 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(23.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .anemia-catch-line--7 {
  animation: anemia-catch-line-out 0.6s ease 28.5s both;
}
.slide.active[data-index="5"] .anemia-catch-line--8 .anemia-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="5"] .anemia-catch-line--8 {
  animation: anemia-catch-line-out 0.6s ease 32s both;
}
.slide.active[data-index="5"] .anemia-catch-line--9 .anemia-catch-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="5"] .anemia-catch-line--9 {
  animation: anemia-catch-line-out 0.6s ease 36.5s both;
}
.slide.active[data-index="5"] .anemia-catch-line--10 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(36.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="5"] .anemia-catch-line--10 {
  animation: anemia-catch-line-out 0.6s ease 41s both;
}
.slide.active[data-index="5"] .anemia-catch-line--11 .anemia-catch-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);
}
.slide[data-index="5"]:not(.active) .anemia-catch-line {
  animation: none;
}
.slide[data-index="5"]:not(.active) .anemia-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   貧血用：スライド7　キャッチコピー（音声に合わせて1行ずつ入れ替え）
   ============================================================ */
.slide.active[data-index="6"] .anemia-catch-line--1 .anemia-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"] .anemia-catch-line--1 {
  animation: anemia-catch-line-out 0.6s ease 5s both;
}
.slide.active[data-index="6"] .anemia-catch-line--2 .anemia-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="6"] .anemia-catch-line--2 {
  animation: anemia-catch-line-out 0.6s ease 7.5s both;
}
.slide.active[data-index="6"] .anemia-catch-line--3 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(7.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .anemia-catch-line--3 {
  animation: anemia-catch-line-out 0.6s ease 10.5s both;
}
.slide.active[data-index="6"] .anemia-catch-line--4 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(10.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .anemia-catch-line--4 {
  animation: anemia-catch-line-out 0.6s ease 14.5s both;
}
.slide.active[data-index="6"] .anemia-catch-line--5 .anemia-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.active[data-index="6"] .anemia-catch-line--5 {
  animation: anemia-catch-line-out 0.6s ease 19s both;
}
.slide.active[data-index="6"] .anemia-catch-line--6 .anemia-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"] .anemia-catch-line--6 {
  animation: anemia-catch-line-out 0.6s ease 22.5s both;
}
.slide.active[data-index="6"] .anemia-catch-line--7 .anemia-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"] .anemia-catch-line--7 {
  animation: anemia-catch-line-out 0.6s ease 26.5s both;
}
.slide.active[data-index="6"] .anemia-catch-line--8 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(26.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .anemia-catch-line--8 {
  animation: anemia-catch-line-out 0.6s ease 29.5s both;
}
.slide.active[data-index="6"] .anemia-catch-line--9 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(29.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .anemia-catch-line--9 {
  animation: anemia-catch-line-out 0.6s ease 33s both;
}
.slide.active[data-index="6"] .anemia-catch-line--10 .anemia-catch-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="6"] .anemia-catch-line--10 {
  animation: anemia-catch-line-out 0.6s ease 38s both;
}
.slide.active[data-index="6"] .anemia-catch-line--11 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(38s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .anemia-catch-line--11 {
  animation: anemia-catch-line-out 0.6s ease 41s both;
}
.slide.active[data-index="6"] .anemia-catch-line--12 .anemia-catch-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);
}
.slide.active[data-index="6"] .anemia-catch-line--12 {
  animation: anemia-catch-line-out 0.6s ease 45.5s both;
}
.slide.active[data-index="6"] .anemia-catch-line--13 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(45.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="6"] .anemia-catch-line--13 {
  animation: anemia-catch-line-out 0.6s ease 49s both;
}
.slide.active[data-index="6"] .anemia-catch-line--14 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(49s + var(--ci, 0) * 80ms);
}
.slide[data-index="6"]:not(.active) .anemia-catch-line {
  animation: none;
}
.slide[data-index="6"]:not(.active) .anemia-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   貧血用：スライド8　キャッチコピー（音声に合わせて1行ずつ入れ替え）
   ============================================================ */
.slide.active[data-index="7"] .anemia-catch-line--1 .anemia-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"] .anemia-catch-line--1 {
  animation: anemia-catch-line-out 0.6s ease 3s both;
}
.slide.active[data-index="7"] .anemia-catch-line--2 .anemia-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="7"] .anemia-catch-line--2 {
  animation: anemia-catch-line-out 0.6s ease 7s both;
}
.slide.active[data-index="7"] .anemia-catch-line--3 .anemia-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"] .anemia-catch-line--3 {
  animation: anemia-catch-line-out 0.6s ease 11.5s both;
}
.slide.active[data-index="7"] .anemia-catch-line--4 .anemia-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.active[data-index="7"] .anemia-catch-line--4 {
  animation: anemia-catch-line-out 0.6s ease 15s both;
}
.slide.active[data-index="7"] .anemia-catch-line--5 .anemia-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="7"] .anemia-catch-line--5 {
  animation: anemia-catch-line-out 0.6s ease 18s both;
}
.slide.active[data-index="7"] .anemia-catch-line--6 .anemia-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[data-index="7"]:not(.active) .anemia-catch-line {
  animation: none;
}
.slide[data-index="7"]:not(.active) .anemia-catch-char {
  opacity: 0;
  animation: none;
}

/* ============================================================
   貧血用：スライド9　キャッチコピー（音声に合わせて1行ずつ入れ替え）
   ============================================================ */
.slide.active[data-index="8"] .anemia-catch-line--1 .anemia-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"] .anemia-catch-line--1 {
  animation: anemia-catch-line-out 0.6s ease 4s both;
}
.slide.active[data-index="8"] .anemia-catch-line--2 .anemia-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="8"] .anemia-catch-line--2 {
  animation: anemia-catch-line-out 0.6s ease 7.5s both;
}
.slide.active[data-index="8"] .anemia-catch-line--3 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(7.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .anemia-catch-line--3 {
  animation: anemia-catch-line-out 0.6s ease 13s both;
}
.slide.active[data-index="8"] .anemia-catch-line--4 .anemia-catch-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="8"] .anemia-catch-line--4 {
  animation: anemia-catch-line-out 0.6s ease 17s both;
}
.slide.active[data-index="8"] .anemia-catch-line--5 .anemia-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="8"] .anemia-catch-line--5 {
  animation: anemia-catch-line-out 0.6s ease 21s both;
}
.slide.active[data-index="8"] .anemia-catch-line--6 .anemia-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.active[data-index="8"] .anemia-catch-line--6 {
  animation: anemia-catch-line-out 0.6s ease 25s both;
}
.slide.active[data-index="8"] .anemia-catch-line--7 .anemia-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="8"] .anemia-catch-line--7 {
  animation: anemia-catch-line-out 0.6s ease 28s both;
}
.slide.active[data-index="8"] .anemia-catch-line--8 .anemia-catch-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="8"] .anemia-catch-line--8 {
  animation: anemia-catch-line-out 0.6s ease 32s both;
}
.slide.active[data-index="8"] .anemia-catch-line--9 .anemia-catch-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="8"] .anemia-catch-line--9 {
  animation: anemia-catch-line-out 0.6s ease 34s both;
}
.slide.active[data-index="8"] .anemia-catch-line--10 .anemia-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.active[data-index="8"] .anemia-catch-line--10 {
  animation: anemia-catch-line-out 0.6s ease 37.5s both;
}
.slide.active[data-index="8"] .anemia-catch-line--11 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(37.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .anemia-catch-line--11 {
  animation: anemia-catch-line-out 0.6s ease 42.5s both;
}
.slide.active[data-index="8"] .anemia-catch-line--12 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(42.5s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .anemia-catch-line--12 {
  animation: anemia-catch-line-out 0.6s ease 45s both;
}
.slide.active[data-index="8"] .anemia-catch-line--13 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(45s + var(--ci, 0) * 80ms);
}
.slide.active[data-index="8"] .anemia-catch-line--13 {
  animation: anemia-catch-line-out 0.6s ease 48.5s both;
}
.slide.active[data-index="8"] .anemia-catch-line--14 .anemia-catch-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) both;
  animation-delay: calc(48.5s + var(--ci, 0) * 80ms);
}
.slide[data-index="8"]:not(.active) .anemia-catch-line {
  animation: none;
}
.slide[data-index="8"]:not(.active) .anemia-catch-char {
  opacity: 0;
  animation: none;
}
/* 確認テストURL未設定時 */
.test-link--disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
  filter: grayscale(40%);
}

/* ============================================================
   貧血・スライド3：症状とヘモグロビン値
   ============================================================ */
.slide03-placeholder {
  position: relative;
  padding: 0 3.5% 3.2%;
}

.slide03-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  row-gap: 1cqw;
  padding-top: 7cqw;
  box-sizing: border-box;
}

.slide03-visual {
  grid-row: 1 / 3;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-right: 4%;
}

.slide03-visual-img {
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.slide03-symptoms {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: 4%;
  align-items: start;
  padding: 5% 0 2%;
}

.slide03-symptom-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.35cqw, 14px);
}

.slide03-symptom-list li {
  display: flex;
  align-items: center;
  gap: clamp(5px, .8cqw, 9px);
  color: #3d3d3d;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(12px, 2.05cqw, 21px);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.slide03-symptom-list img {
  width: clamp(19px, 2.8cqw, 28px);
  height: auto;
  flex: 0 0 auto;
}

.slide03-symptom-list li {
  opacity: 0;
}

.slide03-symptom-list li > span {
  display: inline-block;
}

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

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

/* 26秒：左列を上から表示し、その後に右列を上から表示 */
.slide.active[data-index="2"] .slide03-symptom-list--left li:nth-child(1)  { animation: s03ListFadeIn .35s ease 26s both; }
.slide.active[data-index="2"] .slide03-symptom-list--left li:nth-child(2)  { animation: s03ListFadeIn .35s ease 26.18s both; }
.slide.active[data-index="2"] .slide03-symptom-list--left li:nth-child(3)  { animation: s03ListFadeIn .35s ease 26.36s both; }
.slide.active[data-index="2"] .slide03-symptom-list--left li:nth-child(4)  { animation: s03ListFadeIn .35s ease 26.54s both; }
.slide.active[data-index="2"] .slide03-symptom-list--left li:nth-child(5)  { animation: s03ListFadeIn .35s ease 26.72s both; }
.slide.active[data-index="2"] .slide03-symptom-list--left li:nth-child(6)  { animation: s03ListFadeIn .35s ease 26.9s both; }
.slide.active[data-index="2"] .slide03-symptom-list--right li:nth-child(1) { animation: s03ListFadeIn .35s ease 27.08s both; }
.slide.active[data-index="2"] .slide03-symptom-list--right li:nth-child(2) { animation: s03ListFadeIn .35s ease 27.26s both; }
.slide.active[data-index="2"] .slide03-symptom-list--right li:nth-child(3) { animation: s03ListFadeIn .35s ease 27.44s both; }
.slide.active[data-index="2"] .slide03-symptom-list--right li:nth-child(4) { animation: s03ListFadeIn .35s ease 27.62s both; }
.slide.active[data-index="2"] .slide03-symptom-list--right li:nth-child(5) { animation: s03ListFadeIn .35s ease 27.8s both; }

/* 症状名の一時的な赤色アピール */
.slide.active[data-index="2"] .s03-appeal-dizziness { animation: s03TextAppeal 1.8s ease 28.5s both; }
.slide.active[data-index="2"] .s03-appeal-fatigue   { animation: s03TextAppeal 1.8s ease 31.5s both; }
.slide.active[data-index="2"] .s03-appeal-focus     { animation: s03TextAppeal 1.8s ease 34.5s both; }
.slide.active[data-index="2"] .s03-appeal-skin      { animation: s03TextAppeal 1.8s ease 38.5s both; }

.slide03-criteria {
  display: block;
  width: 100%;
  height: auto;
  align-self: start;
  opacity: 1;
}

/* ナレーション同期のキャッチコピーを図解の上に重ねて表示 */
.slide03-narration {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: auto;
  padding: 0 7%;
  pointer-events: none;
}

@media (max-width: 767px) {
  .slide03-placeholder {
    padding: 0 3% 3%;
    overflow-y: auto;
    justify-content: flex-start;
  }

  /* PCと同じ2カラム構成を維持し、タイトル直下へ上つき */
  .slide03-layout {
    height: auto;
    grid-template-columns: 45% 55%;
    grid-template-rows: auto auto;
    align-content: start;
    align-items: start;
    gap: 0;
    row-gap: 1.5cqw;
    padding-top: clamp(8px, 3vw, 16px);
  }

  .slide03-visual {
    grid-row: 1 / 3;
    width: 100%;
    height: auto;
    max-height: none;
    align-items: flex-start;
    justify-content: center;
    justify-self: stretch;
    padding: 0 2% 0 0;
  }

  .slide03-visual-img {
    max-height: none;
  }

  .slide03-symptoms {
    width: 100%;
    grid-template-columns: 1fr 1.18fr;
    gap: 3%;
    padding: 2% 0 0;
  }

  .slide03-symptom-list {
    gap: 1.5cqw;
  }

  .slide03-symptom-list li {
    gap: 1cqw;
    font-size: clamp(9px, 2.6vw, 13px);
    white-space: normal;
  }

  .slide03-symptom-list img {
    width: clamp(12px, 3.6vw, 18px);
  }
}