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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* アクティブスライドのとき再生 */
.slide.active .illust-item--1 {
  animation: illustFadeUp 0.5s ease 0.1s forwards;
}
.slide.active .illust-item--2 {
  animation:
    illustFadeUp 0.5s ease 0.3s forwards,
    illustFloat 4s ease-in-out 1.0s infinite;
}
/* スライド1のillust-item--2はふわふわなし（フェードインのみ） */
.slide.active[data-index="0"] .illust-item--2 {
  animation: illustFadeUp 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: 65%;
}

/* slide01_01を中央に見せるため、slide01_02と同幅のスペーサーを左端に配置 */
.slide01-illust.pc-only::before {
  content: '';
  height: 53.9%;
  aspect-ratio: 256 / 272;
  flex-shrink: 0;
}

/* 高さ比率: slide01_01=505px基準 → slide01_02=272px → 53.9% */
.slide01-illust .illust-item--2 {
  height: 53.9%;
  margin-bottom: 10%;
}


/* スライド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% 8% 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: 0px;
  }
}

@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.4vw, 16px);
  color: #1a1a1a;
  margin: 0 0 0.8em;
  line-height: 1.7;
}

.slide01-text-main {
  font-size: clamp(16px, 2.2vw, 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;
}

/* 音声トグルスイッチ */
.audio-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0.7em;
}

.audio-toggle-lbl {
  font-size: clamp(13px, 1.5vw, 18px);
  font-weight: 700;
  transition: color 0.25s;
  user-select: none;
}

.audio-toggle-lbl--on  { color: #57b38a; }
.audio-toggle-lbl--off { color: #bbb; }

.audio-toggle-wrap.is-muted .audio-toggle-lbl--on  { color: #bbb; }
.audio-toggle-wrap.is-muted .audio-toggle-lbl--off { color: #1a1a1a; }

.audio-toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.audio-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.audio-toggle-track {
  position: absolute;
  inset: 0;
  background: #57b38a;
  border-radius: 14px;
  transition: background 0.25s;
}

.audio-toggle-switch input:checked ~ .audio-toggle-track {
  background: #ccc;
}

.audio-toggle-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s;
}

.audio-toggle-switch input:checked ~ .audio-toggle-track .audio-toggle-knob {
  transform: translateX(24px);
}

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

.icon-woman {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.icon-employee {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.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% 2%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.slide02-citation {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  font-size: clamp(9px, 1.1cqw, 12px);
  color: #333;
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}

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

/* グラフエリア */
.slide02-chart-wrap {
  width: 100%;
  flex: 1;
  min-height: 0;
  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 クラス名衝突修正
   slide02_01.svg と slide04_01.svg が同じ .st0-.st11 を使用。
   両方インライン化されると定義が衝突するため、
   #slide02ChartWrap 配下でスコープして上書きする。
   ============================================ */

/* フォント/テキスト系プロパティのリセット（slide04 の設定を除去） */
#slide02ChartWrap svg .st0,
#slide02ChartWrap svg .st1,
#slide02ChartWrap svg .st2,
#slide02ChartWrap svg .st3,
#slide02ChartWrap svg .st4,
#slide02ChartWrap svg .st5,
#slide02ChartWrap svg .st6,
#slide02ChartWrap svg .st7,
#slide02ChartWrap svg .st8,
#slide02ChartWrap svg .st9,
#slide02ChartWrap svg .st10,
#slide02ChartWrap svg .st11 {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  isolation: auto;
}

/* 各クラスの正しいスタイルを上書き */
/* .st0 = 黄色折れ線（メイン）  stroke-dasharray はアニメーション側で制御するため省略 */
#slide02ChartWrap svg .st0 { fill: none !important; stroke: #f2da6e !important; stroke-linecap: round !important; stroke-miterlimit: 10 !important; stroke-width: 3px !important; }
/* .st1 = グリッド破線 */
#slide02ChartWrap svg .st1 { fill: none !important; stroke: #ccc !important; stroke-width: 1.9px !important; stroke-dasharray: 0 5.7 !important; stroke-linejoin: round !important; stroke-linecap: round !important; }
/* .st2 = 黄色データポイント（円） */
#slide02ChartWrap svg .st2 { fill: #fff !important; stroke: #f2da6e !important; stroke-linecap: round !important; stroke-miterlimit: 10 !important; stroke-width: 3px !important; }
/* .st3 = 緑色データポイント（円） */
#slide02ChartWrap svg .st3 { fill: #fff !important; stroke: #abdb75 !important; stroke-linecap: round !important; stroke-miterlimit: 10 !important; stroke-width: 3px !important; }
/* .st4 = 緑色折れ線（メイン）  stroke-dasharray はアニメーション側で制御するため省略 */
#slide02ChartWrap svg .st4 { fill: none !important; stroke: #abdb75 !important; stroke-linecap: round !important; stroke-miterlimit: 10 !important; stroke-width: 3px !important; }
/* .st5 = 軸線（solid） */
#slide02ChartWrap svg .st5 { fill: none !important; stroke: #ccc !important; stroke-width: 1.9px !important; stroke-miterlimit: 10 !important; }
/* .st6 = 濃緑テキスト */
#slide02ChartWrap svg .st6 { fill: #1e9966 !important; }
/* .st7 = 白テキスト（バッジ内文字） */
#slide02ChartWrap svg .st7 { fill: #fff !important; }
/* .st8 = 薄緑バッジ背景 */
#slide02ChartWrap svg .st8 { fill: #abdb75 !important; }
/* .st9 = 黄色バッジ背景 */
#slide02ChartWrap svg .st9 { fill: #f2da6e !important; }
/* .st10 = ダークグレーテキスト */
#slide02ChartWrap svg .st10 { fill: #333 !important; }
/* .st11 = シアンバッジ背景 */
#slide02ChartWrap svg .st11 { fill: #56d2e3 !important; }

/* ============================================
   スライド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 18.0s both;
}
/* パネル (SP 下パネル) */
.slide[data-index="1"].anim-s2 .slide02-sp-panel {
  animation: s2ShowSp 0.6s ease 18.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: flex-start;
    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;
    align-items: flex-start;
  }

  .slide02-graph-box {
    flex: none;
    width: 100%;
    height: auto;
    padding: 2% 2%;
  }

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

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

  .slide02-sp-panel {
    display: flex;
    justify-content: center;
    margin-top: clamp(12px, 4vw, 24px);
  }

  .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;
  margin-top: clamp(1.4em, 5cqw, 2.5em);
}

/* --- 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 {
  display: inline-block;
  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;
}

.slide03-lead-wrap.is-phase-4 {
  padding-bottom: clamp(1.2em, 4cqw, 2em);
}

/* ============================================
   Phase4 強調：下線ドロー＋ポップ＋パルス
   ============================================ */

/* テキスト幅に合わせる内包ラッパー */
.phase4-underline {
  display: inline-block;
  position: relative;
}

/* 下線の初期状態（左から伸びる準備） */
.slide03-lead-wrap.is-phase-4 .phase4-underline::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: #e53e3e;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
}

/* 下線：左から右へ伸びる */
@keyframes phase4-underline-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 下線：パルス（透明度で呼吸） */
@keyframes phase4-underline-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* コンテナ：全文字出現後にポン！と3回弾む */
@keyframes phase4-pop {
  0%        { transform: scale(1); }
  10%       { transform: scale(1.06); }
  20%       { transform: scale(0.97); }
  33%       { transform: scale(1.05); }
  43%       { transform: scale(0.98); }
  56%       { transform: scale(1.04); }
  66%       { transform: scale(0.99); }
  80%, 100% { transform: scale(1); }
}

/* コンテナ：3回弾む → 1拍休止 → もう3回弾む（計2.9s） */
@keyframes phase4-pop-double {
  /* 1セット目（0〜1.2s ≈ 0〜41%） */
  0%         { transform: scale(1); }
  4%         { transform: scale(1.06); }
  8%         { transform: scale(0.97); }
  14%        { transform: scale(1.05); }
  18%        { transform: scale(0.98); }
  23%        { transform: scale(1.04); }
  27%        { transform: scale(0.99); }
  33%, 58%   { transform: scale(1); }
  /* 2セット目（1.7〜2.9s ≈ 59〜100%） */
  63%        { transform: scale(1.06); }
  67%        { transform: scale(0.97); }
  73%        { transform: scale(1.05); }
  77%        { transform: scale(0.98); }
  82%        { transform: scale(1.04); }
  86%        { transform: scale(0.99); }
  92%, 100%  { transform: scale(1); }
}

/* テキスト全体：下からフェードイン（文字アニメーションの代わり） */
.slide[data-index="2"].anim-s3
  .slide03-lead-wrap.is-phase-4
  .slide03-lead-title--phase4
  .phase4-underline {
  animation: s3FadeUp 0.6s cubic-bezier(0.22, 0.8, 0.4, 1) 0.15s both;
}

/* 下線：テキスト登場直後（0.8s）に引き始め */
.slide[data-index="2"].anim-s3
  .slide03-lead-wrap.is-phase-4
  .phase4-underline::after {
  animation:
    phase4-underline-draw  0.6s ease-out 0.8s forwards;
}

/* コンテナ：下線が引き終わった後（1.4s）に3回×2セット弾む */
.slide[data-index="2"].anim-s3
  .slide03-lead-wrap.is-phase-4
  .slide03-lead-title--phase4 {
  animation: phase4-pop-double 2.9s cubic-bezier(0.22, 0.8, 0.4, 1) 1.4s both;
}

/* ============================================
   Phase4 SVG テキスト画像（slide03_text2.svg）
   ============================================ */

img.s3-lead-text-img {
  display: block;
  margin: auto;
  width: 75%;
  max-width: 680px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}

/* アクティブ時：ポップイン（s7c-text-img と同スタイル） */
.slide[data-index="2"].anim-s3
  .slide03-lead-wrap.is-phase-4
  .slide03-lead-title--phase4.s3-lead-text-img {
  animation: s3-lead-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 0.1s both;
}

/* 非アクティブ時：スケールゼロにリセット */
.slide[data-index="2"]:not(.active) .s3-lead-text-img {
  opacity: 0;
  transform: scale(0);
  animation: none;
}

@keyframes s3-lead-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); }
}

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

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

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

/* 低体重バッジ（左上）・低栄養バッジ（右下）同時に5秒後 */
.slide[data-index="2"].anim-s3 .s3-circle--taitai { animation: s3PopBadge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 5.0s both; }
.slide[data-index="2"].anim-s3 .s3-circle--eiyo  { animation: s3PopBadge 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 5.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 13s forwards;
}
.slide[data-index="2"].anim-s3 .slide03-woman--02 {
  animation:
    s3FloatChar 3.5s ease-in-out infinite,
    s3WomanFadeIn 1.2s ease 13s 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); }
}

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

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

/* --- テキストアピール（赤＋少し拡大） --- */
@keyframes s3TextFlashRed {
  0%, 100% { color: #333; transform: scale(1); }
  12%, 84% { color: #df4545; transform: scale(1.08); }
}
.s3-text-flash {
  animation: s3TextFlashRed 1.8s ease both;
}

/* ============================================
   スライド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%;
    margin-top: -18px;
  }

  /* 白い円：スマホでは小さく */
  .slide03-white-circle {
    width: min(220px, 58vw);
  }

  /* バッジを円サイズに合わせて縮小 */
  .s3-circle {
    width: clamp(68px, 17vw, 95px);
  }

  /* 左リストを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);
  }

}

/* ========== スライド4（data-index="3"）：FUSレイアウト ========== */
/* ステージ：flex:1 を持ち、両フェーズを重ねるコンテナ */
.fus-stage {
  flex: 1;
  min-height: 0;
  position: relative;
}

.fus-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 1cqw 4cqw 3cqw;
  gap: 2cqw;
  box-sizing: border-box;
}

/* Phase2：人物 + 吹き出し */
.fus-body2 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 1cqw 4cqw 3cqw;
  gap: 2cqw;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
}

.fus2-left {
  flex: 1 1 65%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fus2-img--05 {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
}

.fus2-right {
  flex: 1 1 35%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5cqw;
}

.fus2-bubble {
  display: block;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

/* 各吹き出し：幅78%統一・位置をずらしてランダム感を演出 */
.fus2-bubble--06 {
  width: 60%;
  align-self: flex-start;
  margin-left: 2%;
}

.fus2-bubble--07 {
  width: 60%;
  align-self: flex-end;
  margin-right: 4%;
}

.fus2-bubble--08 {
  width: 70%;
  align-self: flex-start;
  margin-left: 8%;
}

.fus-left {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fus-circle {
  background: #fff;
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6cqw;
  box-sizing: border-box;
  gap: 1cqw;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

.fus-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 18%;
  height: auto;
  display: block;
}

.fus-logo {
  width: 72%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.fus-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4cqw;
  text-align: center;
}

.fus-caption-en {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.4cqw;
  color: #333;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0;
}

.fus-caption-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.5cqw;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.fus-right {
  flex: 1 1 50%;
  align-self: stretch;
  display: grid;
  place-items: center;
  place-content: start center;
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* fus-right内イラスト共通：縦横ともにコンテナに追従 */
.fus-illust {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  height: auto;
}

/* 女性のイラスト */
.fus-illust--02 {
  width: 14cqw;
}

/* 子宮：女性の左上に絶対配置 */
.fus-illust--03 {
  position: absolute;
  width: 15cqw;
  height: auto;
  top: 12%;
  left: 0%;
  z-index: 2;
  pointer-events: none;
}

/* 骨：女性の右下に絶対配置 */
.fus-illust--04 {
  position: absolute;
  width: 12cqw;
  height: auto;
  bottom: 15%;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 767px) {
  /* スマホはカードが縦に伸びるため高さを固定して両フェーズの基準を統一 */
  .fus-stage {
    flex: none;
    height: 55cqw;
  }

  .fus-caption-en {
    font-size: 2.2cqw;
  }

  .fus-caption-ja {
    font-size: 2.4cqw;
  }

  /* Phase1：キャッチ直下へ上つき */
  .fus-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* Phase2：Phase1に合わせて上揃えに統一 */
  .fus2-left {
    align-items: flex-start;
  }

  .fus2-right {
    justify-content: flex-start;
  }

  .fus-catchcopy {
    margin-bottom: clamp(4px, 1.5vw, 10px);
  }
}

/* ========== スライド4（data-index="3"）：FUSアニメーション ========== */

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

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

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

/* 鼓動：ドクン・ドク…（間）を繰り返す */
@keyframes fus-heartbeat {
  0%   { transform: scale(1); }
  7%   { transform: scale(1.08); }
  14%  { transform: scale(1); }
  21%  { transform: scale(1.05); }
  28%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ポン！スケールで登場しながらフェードイン */
@keyframes fus-pop {
  0%   { opacity: 0; transform: scale(0); }
  55%  { opacity: 1; transform: scale(1.18); }
  75%  { transform: scale(0.93); }
  90%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* キャッチコピー配置 */
.fus-catchcopy {
  margin: 0;
  padding: 1cqw 2cqw 1.5cqw;
  flex-shrink: 0;
}

/* 初期状態：すべて非表示 */
.slide[data-index="3"] .fus-illust--02,
.slide[data-index="3"] .fus-illust--03,
.slide[data-index="3"] .fus-illust--04,
.slide[data-index="3"] .fus-circle,
.slide[data-index="3"] .fus-logo,
.slide[data-index="3"] .fus-arrow,
.slide[data-index="3"] .fus-caption {
  opacity: 0;
}

/* スライドが非アクティブになったらリセット */
.slide[data-index="3"]:not(.active) .fus-illust--02,
.slide[data-index="3"]:not(.active) .fus-illust--03,
.slide[data-index="3"]:not(.active) .fus-illust--04,
.slide[data-index="3"]:not(.active) .fus-circle,
.slide[data-index="3"]:not(.active) .fus-logo,
.slide[data-index="3"]:not(.active) .fus-arrow,
.slide[data-index="3"]:not(.active) .fus-caption {
  opacity: 0;
  animation: none;
}
.slide[data-index="3"]:not(.active) .fus-catchcopy .s4-char {
  opacity: 0;
  animation: none;
}

/* 女性イラスト：0.3s フェードイン → ふわふわ */
.slide[data-index="3"].active .fus-illust--02 {
  animation:
    fus-fade-in 0.7s ease-out 0.3s forwards,
    fus-float   3s  ease-in-out 1.0s infinite;
}

/* 子宮イラスト：5s ポン！→ ふわふわ */
.slide[data-index="3"].active .fus-illust--03 {
  animation:
    fus-pop   0.6s cubic-bezier(0.34,1.56,0.64,1) 5s   forwards,
    fus-float 3.5s ease-in-out                    5.6s infinite;
}

/* 骨イラスト：7s ポン！→ ふわふわ */
.slide[data-index="3"].active .fus-illust--04 {
  animation:
    fus-pop   0.6s cubic-bezier(0.34,1.56,0.64,1) 7s   forwards,
    fus-float 4s   ease-in-out                     7.6s infinite;
}

/* 白い円：16s フェードイン */
.slide[data-index="3"].active .fus-circle {
  animation: fus-fade-in 0.8s ease-out 16s forwards;
}

/* FUSロゴ：16.8s フェードイン */
.slide[data-index="3"].active .fus-logo {
  animation: fus-fade-in 0.6s ease-out 16.8s forwards;
}

/* 矢印：FUSロゴと同タイミング 16.8s フェードイン */
.slide[data-index="3"].active .fus-arrow {
  animation: fus-fade-in 0.6s ease-out 16.8s forwards;
}

/* キャプションテキスト：17.6s フェードイン */
.slide[data-index="3"].active .fus-caption {
  animation: fus-fade-in 0.6s ease-out 17.6s forwards;
}

/* キャッチコピー：12s から一文字ずつスライドアップ */
.slide[data-index="3"].active .fus-catchcopy .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(12s + var(--ci, 0) * 80ms);
}

/* ========== Phase1 → Phase2 切り替え（28s） ========== */

/* Phase1（fus-body）：28s でフェードアウト */
.slide[data-index="3"].active .fus-body {
  animation: fus-fade-out 0.4s ease-in 28s forwards;
}

/* Phase2（fus-body2）：28.3s で表示開始 */
.slide[data-index="3"].active .fus-body2 {
  animation: fus-fade-in 0.01s linear 28.3s forwards;
}

/* 人物（05）：28.3s ポップイン */
.slide[data-index="3"].active .fus2-img--05 {
  animation: fus-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) 28.3s forwards;
}

/* 吹き出し06：29.0s ポップイン → 鼓動 */
.slide[data-index="3"].active .fus2-bubble--06 {
  animation:
    fus-pop       0.5s cubic-bezier(0.34,1.56,0.64,1) 29.0s forwards,
    fus-heartbeat 3.5s ease-in-out                    29.5s infinite;
}

/* 吹き出し07：29.6s ポップイン → 鼓動 */
.slide[data-index="3"].active .fus2-bubble--07 {
  animation:
    fus-pop       0.5s cubic-bezier(0.34,1.56,0.64,1) 29.6s forwards,
    fus-heartbeat 3.5s ease-in-out                    30.1s infinite;
}

/* 吹き出し08：30.2s ポップイン → 鼓動 */
.slide[data-index="3"].active .fus2-bubble--08 {
  animation:
    fus-pop       0.5s cubic-bezier(0.34,1.56,0.64,1) 30.2s forwards,
    fus-heartbeat 3.5s ease-in-out                    30.7s infinite;
}

/* 非アクティブ時リセット */
.slide[data-index="3"]:not(.active) .fus-body {
  opacity: 1;
  animation: none;
}
.slide[data-index="3"]:not(.active) .fus-body2 {
  opacity: 0;
  animation: none;
}
.slide[data-index="3"]:not(.active) .fus2-img--05,
.slide[data-index="3"]:not(.active) .fus2-bubble--06,
.slide[data-index="3"]:not(.active) .fus2-bubble--07,
.slide[data-index="3"]:not(.active) .fus2-bubble--08 {
  opacity: 0;
  animation: none;
}

/* ========== スライド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(16px, 3.2cqw, 30px);
  color: #333;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  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(8px, 1.4cqw, 18px);
  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-left-panel .s4-formula-block:nth-child(2) {
  margin-top: clamp(10px, 1.8cqw, 22px);
}

.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(4px, 0.8cqw, 10px);
  line-height: 1.35;
  width: 100%;
  text-align: center;
}

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

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

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

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

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

.slide[data-index="4"]: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 {
  height: 85%;
  max-height: 85%;
  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="4"]:not(.anim-s4) #slide04BmiChartWrap [id^="bmi-"] {
  opacity: 0;
  animation: none;
}

.slide[data-index="4"].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: 14s;
}

.slide[data-index="4"].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: 16s;
}

.slide[data-index="4"].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: 17.5s;
}

.slide[data-index="4"].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: 19s;
}

.slide[data-index="4"].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: 24s;
}

.slide[data-index="4"].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: 25s;
}

.slide[data-index="4"].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: 26s;
}

/*
 * 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%;
}

/* slide04_02.svg クラス名（.c〜.g）が slide02_01.svg と衝突するため上書きリセット */
#slide04WeightChartWrap svg .c { fill: #57b38a !important; stroke: none !important; }
#slide04WeightChartWrap svg .d { fill: #d0ead5 !important; stroke: none !important; }
#slide04WeightChartWrap svg .e { fill: #fff    !important; stroke: none !important; }
#slide04WeightChartWrap svg .f { fill: #d7f5f7 !important; stroke: none !important; }
#slide04WeightChartWrap svg .g { fill: #333    !important; stroke: none !important; }

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

/* slide04_02.svg 適正体重ブロック（音声タイミング） */
.slide[data-index="4"].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: 31s;
}

.slide[data-index="4"].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: 34s;
}

.slide[data-index="4"].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: 36s;
}

.slide[data-index="4"].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: 37s;
}

@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="4"] .s4-main-title .s4-char,
.slide[data-index="4"].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="4"]: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(12px, 2.4cqw, 20px);
  color: #333;
  line-height: 1.55;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  padding: 0 2%;
}

.slide.active[data-index="4"] .s4-closing-line .s4-char,
.slide[data-index="4"].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(40s + 150ms + var(--ci, 0) * 80ms);
}

.slide[data-index="4"]: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：全文字を即座に表示（phase4-underlineでまとめてフェードアップ） */
.slide[data-index="2"].anim-s3 .slide03-lead-wrap.is-phase-4 .slide03-lead-title--phase4 .s4-char {
  opacity: 1;
  animation: none;
}

.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="4"].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="4"].anim-s4 .s4-svg-wrap--02 {
  animation: s4-illust-in 0.5s cubic-bezier(0.22, 0.8, 0.4, 1) 31s forwards;
}
/* slide04_03：音声39秒で表示 */
.slide[data-index="4"].anim-s4 .s4-svg-wrap--03 {
  animation: s4-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 39s 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="4"].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="4"]:not(.anim-s4) .s4-svg-wrap--03 .s4-svg-img--float,
.slide[data-index="4"]:not(.anim-s4) .s4-svg-wrap--04 .s4-svg-img--float {
  animation: none;
}

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

.slide[data-index="4"].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(13px, 3.6vw, 18px);
    padding: 4px 2% 8px;
  }

  .s4-layout {
    flex-direction: column;
    flex: none;
    /* 左パネルと .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;
    /* float（±7px）で頭が切れないよう上余白 */
    padding-top: 10px;
    box-sizing: border-box;
    overflow: visible;
  }

  /* 左セリフ：サイズは据え置き / 右イラストのみやや縮小 */
  .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 {
    height: auto;
    max-height: 22vh;
  }
}


/* ========== スライド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="5"].anim-s5-phase2 .s5-phase-intro {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

.slide[data-index="5"].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;
}

/* ── スライド7 見出し：slide03-lead-wrap / s8-lead-wrap と同系パターン ── */
.s7-lead-wrap {
  position: relative;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
  min-height: clamp(2.8em, 12cqw, 5.5em);
}

.s7-lead-title--phase0 {
  transition: opacity 0.45s ease;
}

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

.s7-lead-wrap.is-phase-1 .s7-lead-title--phase0 { opacity: 0; }
.s7-lead-wrap.is-phase-1 .s7-lead-title--phase1 { visibility: visible; pointer-events: auto; }

.s7-lead-wrap.is-phase-2 .s7-lead-title--phase1 { opacity: 0; visibility: hidden; pointer-events: none; }
.s7-lead-wrap.is-phase-2 .s7-lead-title--phase2 { visibility: visible; pointer-events: auto; }

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

.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;
  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;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.s6-title-phase .s4-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;
}

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

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

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

.slide[data-index="5"].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 3.65s infinite;
}

/* ── スライド5 見出し：s7-lead-wrap / s8-lead-wrap と同系パターン ── */
.s5-lead-wrap {
  position: relative;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
  min-height: clamp(2.8em, 12cqw, 5.5em);
}

.s5-lead-title--phase0 {
  transition: opacity 0.45s ease;
}

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

.s5-lead-wrap.is-phase-1 .s5-lead-title--phase1 { visibility: visible; pointer-events: auto; }

.s5-lead-wrap.is-phase-2 .s5-lead-title--phase0 { opacity: 0; }
.s5-lead-wrap.is-phase-2 .s5-lead-title--phase1 { opacity: 0; visibility: hidden; pointer-events: none; }
.s5-lead-wrap.is-phase-2 .s5-lead-title--phase2 { visibility: visible; pointer-events: auto; }

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

/* フェーズ0：anim-s5 付与直後に1文字ずつ登場 */
.slide.active[data-index="5"].anim-s5 .s5-lead-title--phase0 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.3s + var(--ci) * 0.08s);
}

/* フェーズ1〜2：is-phase-N 付与直後に1文字ずつ登場 */
.slide[data-index="5"].anim-s5 .s5-lead-wrap.is-phase-1 .s5-lead-title--phase1 .s4-char,
.slide[data-index="5"].anim-s5 .s5-lead-wrap.is-phase-2 .s5-lead-title--phase2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.15s + var(--ci) * 0.08s);
}

/* フェーズ3 SVG テキスト画像 */
img.s5-lead-title--phase3.s5-text-img {
  display: block;
  margin: auto;
  width: 90%;
  max-width: 740px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}

.slide[data-index="5"].anim-s5 .s5-lead-wrap.is-phase-3 .s5-lead-title--phase3.s5-text-img {
  animation: s7-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 0.1s both;
}

/* リセット */
.slide[data-index="5"]:not(.active) .s5-lead-wrap .s4-char,
.slide[data-index="5"]:not(.anim-s5) .s5-lead-wrap .s4-char {
  opacity: 0;
  animation: none !important;
}

.slide[data-index="5"]:not(.active) .s5-text-img,
.slide[data-index="5"]:not(.anim-s5) .s5-text-img {
  opacity: 0;
  transform: scale(0);
  animation: none !important;
}

/* カラム全体：col2=0.3s / col1=5s / col3=9s の順で登場 */
.slide[data-index="5"].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="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(1) {
  animation-delay: 5s;
}

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

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

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

/* スライド6：イラスト登場後に上下ふわふわ */
@keyframes s5-illust-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* col2（こまめに歩く）: 0.3s登場 → 0.9sからふわふわ */
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(2) .s5-svg-img {
  animation: s5-illust-float 3s ease-in-out 0.9s infinite;
}

/* col1（バランスの良い食事）: 5s登場 → 5.6sからふわふわ */
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(1) .s5-svg-img {
  animation: s5-illust-float 3s ease-in-out 5.6s infinite;
}

/* col3（週2〜3回の筋トレ）: 9s登場 → 9.6sからふわふわ */
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(3) .s5-svg-img {
  animation: s5-illust-float 3s ease-in-out 9.6s infinite;
}

/* 緑テキスト（.s5-col-title）：13.5sでふわっと登場（transform非干渉のfadeのみ） */
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-col-title {
  opacity: 0;
  animation: s5-street-fade-in 0.55s ease 13.5s forwards;
}

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

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

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

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

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

  /* カード群をキャッチ直下へ上つき（縦に伸ばさない） */
  .s5-phase-main {
    flex: none;
    justify-content: flex-start;
  }

  .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: none;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(6px, 2vw, 12px);
  }

  .s5-col {
    max-width: none;
    width: auto;
  }

  .s5-circle {
    max-width: none;
  }

  /* スライド6 本編：角丸カードのまま3枚横並び */
  .s5-phase-main .s5-col {
    padding-top: 0;
  }

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

  /* 3枚とも同一サイズ */
  .s5-phase-main .s5-cols .s5-col:nth-child(1),
  .s5-phase-main .s5-cols .s5-col:nth-child(2),
  .s5-phase-main .s5-cols .s5-col:nth-child(3) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
    max-width: none;
  }

  .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);
    /* float分の余白を残しつつクリップしすぎない */
    overflow: hidden;
    /* 上だけ広め（見出し＋float用） */
    padding: clamp(10px, 2.8vw, 16px) clamp(4px, 1.6vw, 8px) clamp(6px, 1.8vw, 10px);
    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.2vw, 8px);
    padding: 0 1px;
    font-size: clamp(9px, 2.5vw, 12px);
    line-height: 1.3;
    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(9px, 2.5vw, 12px);
  }
}

/* ========== スライド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.3s;
  --s6-p2-t0: 3s;
  /* フェーズ2最終文字の演出終了 + 余白 → SVG 開始（slide06_01 delay = +0.05s → 6.0s） */
  --s6-after-text: 5.95s;
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 16px);
}

.s6-main-title-img {
  width: 100%;
  max-width: 740px;
  height: auto;
  display: block;
  margin-inline: auto;
}

.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;
  pointer-events: none;
}

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

.s6-svg-wrap--01 .s6-svg-img {
  width: auto;
  height: auto;
  max-width: min(90cqw, 95vw);
  max-height: 95%;
  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;
}

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

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

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

.slide.active[data-index="6"].anim-s6 .s6-title-phase--1 .s4-char {
  animation: s4-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="6"].anim-s6 .s6-title-phase--2 .s4-char {
  animation: s4-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="6"]:not(.active) .s6-title-phase .s4-char,
.slide[data-index="6"]:not(.anim-s6) .s6-title-phase .s4-char {
  opacity: 0;
  animation: none !important;
}

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

/* slide06_01.svg / slide06_02.svg：非アクティブ時に隠す
   ページロード後にSVG内アニメーションが完了した「完成状態」が
   スライドイン遷移中（.activeが付く前の0〜500ms）に見えるのを防ぐ */
.slide[data-index="6"]:not(.active) .s6-svg-wrap--01,
.slide[data-index="6"]:not(.active) .s6-main-title-img {
  visibility: hidden;
}

@media (max-width: 767px) {
  .s6-body {
    padding: 0 2% 8px;
    overflow-y: visible;
    justify-content: flex-start;
  }

  .s6-phase-intro {
    flex: 0 0 auto;
  }

  .s6-lead-wrap {
    font-size: clamp(13px, 4vw, 18px);
    min-height: clamp(2.5em, 10vw, 4em);
  }

  .s6-title-stack {
    min-height: 3rem;
  }

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

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

  .s6-svg-wrap--01 {
    align-items: flex-start;
  }

  .s6-svg-wrap--01 .s6-svg-img {
    max-height: 90%;
    max-width: min(92vw, 94cqw);
  }

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

}

/* ========== スライド7（data-index=6）テキストフェーズ ========== */
.s6-lead-wrap {
  position: relative;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
  min-height: clamp(2.8em, 12cqw, 5.5em);
}

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

/* フェーズ切替 */
.s6-body.is-phase-1 .s6-lead-title--phase1 { visibility: visible; pointer-events: auto; }

.s6-body.is-phase-2 .s6-lead-title--phase1 { opacity: 0; visibility: hidden; pointer-events: none; }
.s6-body.is-phase-2 .s6-lead-title--phase2 { visibility: visible; pointer-events: auto; }

.s6-body.is-phase-3 .s6-lead-title--phase2 { opacity: 0; visibility: hidden; pointer-events: none; }
.s6-body.is-phase-3 .s6-lead-title--phase3 { visibility: visible; pointer-events: auto; }

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

/* 文字アニメーション */
.slide[data-index="6"].anim-s6 .s6-body.is-phase-1 .s6-lead-title--phase1 .s4-char,
.slide[data-index="6"].anim-s6 .s6-body.is-phase-2 .s6-lead-title--phase2 .s4-char,
.slide[data-index="6"].anim-s6 .s6-body.is-phase-3 .s6-lead-title--phase3 .s4-char {
  animation: s4-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(.active) .s6-lead-wrap .s4-char,
.slide[data-index="6"]:not(.anim-s6) .s6-lead-wrap .s4-char {
  opacity: 0;
  animation: none !important;
}

/* ========== スライド7（data-index=6）新イラストレイアウト ========== */
.s6-new-stage {
  position: relative;
  flex: 1;
  min-height: min(40cqw, 46vh);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s6-new-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.s6-new-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.s6-new-img {
  width: 100%;
  max-width: min(90cqw, 95vw);
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* il02 / il01 を 80% に縮小・少し下に移動（padding-top でセンター位置をずらす） */
.s6-new-wrap--il02,
.s6-new-wrap--il01 {
  padding-top: 12%;
  box-sizing: border-box;
}

.s6-new-wrap--il02 .s6-new-img,
.s6-new-wrap--il01 .s6-new-img {
  transform: scale(1.1);
  transform-origin: center center;
}

/* fukidashi を上に移動・拡大 */
.s6-new-wrap--fuki01 {
  padding-bottom: 25%;
  box-sizing: border-box;
  transform: scale(1.4);
  transform-origin: center center;
}

/* slide06_fukidashi ふわふわ（PC：ラッパーに scale(1.4) を保持して上下） */
@keyframes s6-fuki-float {
  0%, 100% { transform: scale(1.4) translateY(0);    }
  50%       { transform: scale(1.4) translateY(-6px); }
}

/* slide06_fukidashi ふわふわ（スマホ：上寄せ位置を維持） */
@keyframes s6-fuki-float-sp {
  0%, 100% { transform: translateY(-18%); }
  50%       { transform: translateY(calc(-18% - 6px)); }
}

/* slide06_il02 / il01 ふわふわアニメーション（スマホ用） */
@keyframes s6-il-float-sp {
  0%, 100% { transform: scale(0.8) translateY(0);    }
  50%       { transform: scale(0.8) translateY(-5px); }
}

/* slide06_il02 / il01 ふわふわアニメーション */
@keyframes s6-il-float {
  0%, 100% { transform: scale(1.1) translateY(0);    }
  50%       { transform: scale(1.1) translateY(-5px); }
}

.slide[data-index="6"].anim-s6 .s6-body.is-phase-1 .s6-new-wrap--il02 .s6-new-img {
  animation: s6-il-float 2.75s ease-in-out 0.6s infinite;
}

.slide[data-index="6"]:not(.anim-s6) .s6-new-wrap--il02 .s6-new-img,
.slide[data-index="6"]:not(.active) .s6-new-wrap--il02 .s6-new-img {
  animation: none !important;
}

/* fukidashi ふわふわ（PC） */
.slide[data-index="6"].anim-s6 .s6-body.is-phase-3 .s6-new-wrap--fuki01 {
  animation: s6-fuki-float 3s ease-in-out 0.5s infinite;
}

.slide[data-index="6"]:not(.anim-s6) .s6-new-wrap--fuki01,
.slide[data-index="6"]:not(.active) .s6-new-wrap--fuki01 {
  animation: none !important;
}

/* 音声タイミングで追加されるフェーズクラスに応じて表示 */
.s6-body.is-phase-1 .s6-new-wrap--il02 { opacity: 1; }
.s6-body.is-phase-2 .s6-new-wrap--il01 { opacity: 1; }
.s6-body.is-phase-3 .s6-new-wrap--fuki01 { opacity: 1; }
/* is-phase-4: s6-text-img は img 自体のアニメーションで制御（ラッパー不要） */

/* slide06_text.svg: s5-text-img と同様の構造・ポップアニメーション */
img.s6-text-img {
  position: absolute;
  top: -0.5em;
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  width: 75%;
  max-width: 600px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}

.slide[data-index="6"].anim-s6 .s6-body.is-phase-4 .s6-text-img {
  animation: s7-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 0.1s both;
}

.slide[data-index="6"]:not(.active) .s6-text-img,
.slide[data-index="6"]:not(.anim-s6) .s6-text-img {
  opacity: 0 !important;
  transform: scale(0) !important;
  animation: none !important;
}

/* 非アクティブ時はすべて即時非表示 */
.slide[data-index="6"]:not(.active) .s6-new-wrap {
  opacity: 0 !important;
  transition: none;
}

@media (max-width: 767px) {
  /* キャッチ直下へ上つき（縦に伸ばして中央寄せしない） */
  .s6-new-stage {
    flex: none;
    min-height: 0;
    height: 55cqw;
    max-height: 55cqw;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    /* 上のキャッチコピー画像と重ならないようブロック全体を少し下へ */
    margin-top: clamp(16px, 5vw, 28px);
    box-sizing: border-box;
  }

  .s6-new-wrap--il02,
  .s6-new-wrap--il01 {
    padding-top: 12%;
    align-items: flex-start;
  }

  .s6-new-wrap--il02 .s6-new-img,
  .s6-new-wrap--il01 .s6-new-img {
    transform: scale(0.8);
    transform-origin: center top;
  }

  .slide[data-index="6"].anim-s6 .s6-body.is-phase-1 .s6-new-wrap--il02 .s6-new-img {
    animation: s6-il-float-sp 2.75s ease-in-out 0.6s infinite;
  }

  /* fukidashi：PCの scale(1.4) ふわふわを止め、画像側だけで上下ふわふわ */
  .slide[data-index="6"].anim-s6 .s6-body.is-phase-3 .s6-new-wrap--fuki01 {
    animation: none !important;
    transform: none !important;
  }

  .slide[data-index="6"].anim-s6 .s6-body.is-phase-3 .s6-new-wrap--fuki01 .s6-new-img {
    animation: s6-fuki-float-sp 3s ease-in-out 0.5s infinite;
  }

  img.s6-text-img {
    top: 0;
  }

  /* 吹き出し：ステージ内に収めつつ、下の人物イラストと重ならないよう上へ */
  .s6-new-wrap--fuki01 {
    padding-bottom: 0;
    padding-top: 0;
    transform: none !important;
    overflow: visible;
    align-items: flex-start;
    justify-content: center;
  }

  .s6-new-wrap--fuki01 .s6-new-img {
    position: relative;
    width: 96%;
    height: auto;
    max-width: 100%;
    max-height: 90%;
    object-fit: contain;
    left: auto;
    /* 人物イラストの上に見えるよう少し上げる */
    transform: translateY(-18%);
  }
}

/* ========== スライド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: 4s;
  /* 最終文字の演出終了 + 余白 → 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(96cqw, min(1060px, 98vw));
  /* 吹き出し：メインイラストに対して従属するサイズ（参考：高さのおおよそ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: min(var(--s7-base), 100%);
  height: auto;
  max-height: 98%;
  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: min(var(--s7-base), 100%);
  height: auto;
  max-height: 98%;
  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 0 0 28%;
  margin-top: -4%;
}

.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% 0 0 0;
  margin-right: -5%;
  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-phase0-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

/* ── スライド7 フェーズ0：anim-s7 付与直後に1文字ずつ登場 ── */
.slide.active[data-index="7"].anim-s7 .s7-lead-title--phase0 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.3s + var(--ci) * 0.08s);
}

/* ── フェーズ1〜2：is-phase-N 付与直後に1文字ずつ登場 ── */
.slide[data-index="7"].anim-s7 .s7-lead-wrap.is-phase-1 .s7-lead-title--phase1 .s4-char,
.slide[data-index="7"].anim-s7 .s7-lead-wrap.is-phase-2 .s7-lead-title--phase2 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.15s + var(--ci) * 0.08s);
}

/* ── フェーズ3 SVG テキスト画像 ── */
img.s7-lead-title--phase3.s7-text-img {
  display: block;
  margin: auto;
  width: 90%;
  max-width: 740px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}

.slide[data-index="7"].anim-s7 .s7-lead-wrap.is-phase-3 .s7-lead-title--phase3.s7-text-img {
  animation: s7-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 0.1s both;
}

@keyframes s7-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); }
}

/* ── リセット：スライド離脱 or アニメ未開始時 ── */
.slide[data-index="7"]:not(.active) .s7-lead-wrap .s4-char,
.slide[data-index="7"]:not(.anim-s7) .s7-lead-wrap .s4-char {
  opacity: 0;
  animation: none !important;
}

.slide[data-index="7"]:not(.active) .s7-text-img,
.slide[data-index="7"]:not(.anim-s7) .s7-text-img {
  opacity: 0;
  transform: scale(0);
  animation: none !important;
}

/* メインイラスト：スライド表示直後（0.3s）に登場 */
.slide[data-index="7"].anim-s7 .s7-svg-wrap--01 {
  animation: s7-illust-in 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: 0s;
}
.slide[data-index="7"].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="7"].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);
}

/* 吹き出し：ふわふわ無効 */
.slide[data-index="7"].anim-s7 .s7-svg-wrap--02 .s7-svg-img {
  animation: none;
}

.slide[data-index="7"].anim-s7 .s7-svg-wrap--03 .s7-svg-img {
  animation: none;
}

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

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

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

@media (min-width: 768px) {
  .s7-illust-stack {
    transform: translateX(-10%);
  }
}

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

  /* PCと同比率を保つよう高さを固定（flex:1での伸びを防止） */
  .s7-illust-stage {
    flex: none;
    height: 55cqw;
    min-height: unset;
  }

  .s7-illust-stack {
    --s7-base: min(78cqw, 820px);
    --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: 90%;
  }

  .s7-svg-wrap--01 {
    justify-content: flex-start;
    padding-left: 0;
  }

  .s7-base-pair {
    justify-content: flex-start;
  }

  /* --over（slide07_04）の位置調整 */
  .s7-base-pair .s7-svg-img--over {
    left: 40%;
    transform: translateY(-50%);
  }

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

  .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%);
}

/* ── スライド8 見出し：slide03-lead-wrap と同系パターン ── */
.s8-lead-wrap {
  position: relative;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 3.2cqw, 30px);
  color: #333;
  line-height: 1.35;
  text-align: center;
  min-height: clamp(2.8em, 12cqw, 5.5em);
}

.s8-lead-title--phase0 {
  transition: opacity 0.45s ease;
}

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

.s8-lead-wrap.is-phase-1 .s8-lead-title--phase0 { opacity: 0; }
.s8-lead-wrap.is-phase-1 .s8-lead-title--phase1 { visibility: visible; pointer-events: auto; }

.s8-lead-wrap.is-phase-2 .s8-lead-title--phase1 { opacity: 0; visibility: hidden; pointer-events: none; }
.s8-lead-wrap.is-phase-2 .s8-lead-title--phase2 { visibility: visible; pointer-events: auto; }

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

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

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

@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 .s4-char {
  display: inline-block;
  opacity: 0;
}

/* ── フェーズ0：anim-s8 付与直後に1文字ずつ登場 ── */
.slide.active[data-index="8"].anim-s8 .s8-lead-title--phase0 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.3s + var(--ci) * 0.08s);
}

/* ── フェーズ1〜3：is-phase-N 付与直後に1文字ずつ登場 ── */
.slide[data-index="8"].anim-s8 .s8-lead-wrap.is-phase-1 .s8-lead-title--phase1 .s4-char,
.slide[data-index="8"].anim-s8 .s8-lead-wrap.is-phase-2 .s8-lead-title--phase2 .s4-char,
.slide[data-index="8"].anim-s8 .s8-lead-wrap.is-phase-3 .s8-lead-title--phase3 .s4-char {
  animation: s4-char-in 0.45s cubic-bezier(0.22, 0.8, 0.4, 1) forwards;
  animation-delay: calc(0.15s + var(--ci) * 0.08s);
}

/* ── フェーズ4 SVG テキスト画像 ── */
img.s8-lead-title--phase4.s8-text-img {
  display: block;
  margin: auto;
  width: 90%;
  max-width: 740px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}

.slide[data-index="8"].anim-s8 .s8-lead-wrap.is-phase-4 .s8-lead-title--phase4.s8-text-img {
  animation: s7-text-pop 0.55s cubic-bezier(0.22, 0.8, 0.4, 1) 0.1s both;
}

/* ── リセット：スライド離脱 or アニメ未開始時 ── */
.slide[data-index="8"]:not(.active) .s8-lead-wrap .s4-char,
.slide[data-index="8"]:not(.anim-s8) .s8-lead-wrap .s4-char {
  opacity: 0;
  animation: none !important;
}

.slide[data-index="8"]:not(.active) .s8-text-img,
.slide[data-index="8"]:not(.anim-s8) .s8-text-img {
  opacity: 0;
  transform: scale(0);
  animation: none !important;
}

/* slide08_01：音声2秒／slide08_02：音声10秒で表示 */
.slide[data-index="8"].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="8"].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="8"].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="8"].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="8"]:not(.anim-s8) .s8-svg-wrap--01 .s8-svg-img,
.slide[data-index="8"]:not(.active) .s8-svg-wrap--01 .s8-svg-img,
.slide[data-index="8"]:not(.anim-s8) .s8-svg-wrap--02 .s8-svg-img,
.slide[data-index="8"]: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;
  }

  /* PCと同比率を保つよう高さを固定（flex:1での伸びを防止） */
  .s8-illust-stage {
    flex: none;
    height: 55cqw;
    min-height: unset;
  }

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

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

  .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% 0 0 0;
  }

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

  .slide[data-index="8"].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="8"].anim-s8 .s8-svg-wrap--02 .s8-svg-img {
    animation: none;
  }
}

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

.slide-finish-img {
  max-width: min(50%, 340px);
  max-height: min(24vh, 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;
}

.slide-finish-illust {
  width: clamp(140px, 28cqw, 280px);
  height: auto;
  object-fit: contain;
}

@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 {
    width: clamp(160px, 48vw, 260px);
    margin-top: 0;
    margin-bottom: 0;
    padding-block: clamp(4px, 1.5vw, 14px);
  }

  .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(68%, 310px);
    max-height: min(28vh, 42cqw);
  }

  .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: flex-start;
    text-align: left;
  }

  .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 {
    text-align: left;
    margin-top: clamp(8px, 2vw, 12px);
  }
}

/* ====================================================================
   再生速度スケーリング：CSS カスタムプロパティ --sp
   JS から document.documentElement.style.setProperty('--sp', rate) で変更
   各スライドの animation-delay を calc(delay / var(--sp)) で上書き
   ==================================================================== */

:root { --sp: 1; }

/* ── Slide 2（data-index="1"）折れ線グラフ ── */
.slide[data-index="1"].anim-s2 #i                         { animation-delay: calc(3.0s  / var(--sp)); }
.slide[data-index="1"].anim-s2 #c,
.slide[data-index="1"].anim-s2 #d                         { animation-delay: calc(3.3s  / var(--sp)); }
.slide[data-index="1"].anim-s2 #e                         { animation-delay: calc(5.0s  / var(--sp)); }
.slide[data-index="1"].anim-s2 #j                         { animation-delay: calc(9.0s  / var(--sp)); }
.slide[data-index="1"].anim-s2 #g                         { animation-delay: calc(9.3s  / var(--sp)); }
.slide[data-index="1"].anim-s2 #h                         { animation-delay: calc(11.0s / var(--sp)); }
.slide[data-index="1"].anim-s2 .slide02-side              { animation-delay: calc(18.0s / var(--sp)); }
.slide[data-index="1"].anim-s2 .slide02-sp-panel          { animation-delay: calc(18.0s / var(--sp)); }

/* ── Slide 3（data-index="2"）健康リスク ── */
.slide[data-index="2"].anim-s3 .slide03-list--left  .s3-item:nth-child(1) { animation-delay: calc(7.0s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--left  .s3-item:nth-child(2) { animation-delay: calc(7.2s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--left  .s3-item:nth-child(3) { animation-delay: calc(7.4s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--left  .s3-item:nth-child(4) { animation-delay: calc(7.6s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--left  .s3-item:nth-child(5) { animation-delay: calc(7.8s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--left  .s3-item:nth-child(6) { animation-delay: calc(8.0s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(1) { animation-delay: calc(7.0s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(2) { animation-delay: calc(7.2s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(3) { animation-delay: calc(7.4s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(4) { animation-delay: calc(7.6s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(5) { animation-delay: calc(7.8s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-list--right .s3-item:nth-child(6) { animation-delay: calc(8.0s / var(--sp)); }
.slide[data-index="2"].anim-s3 .s3-circle--taitai         { animation-delay: calc(5.0s / var(--sp)); }
.slide[data-index="2"].anim-s3 .s3-circle--eiyo           { animation-delay: calc(5.0s / var(--sp)); }
/* 女性イラスト：infinite float（0s）+ 13s でフェード */
.slide[data-index="2"].anim-s3 .slide03-woman--01         { animation-delay: 0s, calc(13s / var(--sp)); }
.slide[data-index="2"].anim-s3 .slide03-woman--02         { animation-delay: 0s, calc(13s / var(--sp)); }
/* アイテムアイコン：fade-in + swing */
.slide[data-index="2"].anim-s3 .s3-item-icon--1           { animation-delay: calc(13s  / var(--sp)), calc(13.8s / var(--sp)); }
.slide[data-index="2"].anim-s3 .s3-item-icon--2           { animation-delay: calc(13s  / var(--sp)), calc(13.6s / var(--sp)); }
.slide[data-index="2"].anim-s3 .s3-item-icon--3           { animation-delay: calc(13s  / var(--sp)), calc(13.9s / var(--sp)); }
.slide[data-index="2"].anim-s3 .s3-item-icon--4           { animation-delay: calc(13s  / var(--sp)), calc(13.7s / var(--sp)); }
.slide[data-index="2"].anim-s3 .s3-item-icon--5           { animation-delay: calc(13s  / var(--sp)), calc(14.0s / var(--sp)); }

/* ── Slide 4（data-index="3"）FUS ── */
.slide[data-index="3"].active .fus-illust--02             { animation-delay: calc(0.3s  / var(--sp)), calc(1.0s  / var(--sp)); }
.slide[data-index="3"].active .fus-illust--03             { animation-delay: calc(5s    / var(--sp)), calc(5.6s  / var(--sp)); }
.slide[data-index="3"].active .fus-illust--04             { animation-delay: calc(7s    / var(--sp)), calc(7.6s  / var(--sp)); }
.slide[data-index="3"].active .fus-circle                 { animation-delay: calc(16s   / var(--sp)); }
.slide[data-index="3"].active .fus-logo                   { animation-delay: calc(16.8s / var(--sp)); }
.slide[data-index="3"].active .fus-arrow                  { animation-delay: calc(16.8s / var(--sp)); }
.slide[data-index="3"].active .fus-caption                { animation-delay: calc(17.6s / var(--sp)); }
.slide[data-index="3"].active .fus-catchcopy .s4-char     { animation-delay: calc((12s + var(--ci, 0) * 80ms) / var(--sp)); }
.slide[data-index="3"].active .fus-body                   { animation-delay: calc(28s   / var(--sp)); }
.slide[data-index="3"].active .fus-body2                  { animation-delay: calc(28.3s / var(--sp)); }
.slide[data-index="3"].active .fus2-img--05               { animation-delay: calc(28.3s / var(--sp)); }
.slide[data-index="3"].active .fus2-bubble--06            { animation-delay: calc(29.0s / var(--sp)), calc(29.5s / var(--sp)); }
.slide[data-index="3"].active .fus2-bubble--07            { animation-delay: calc(29.6s / var(--sp)), calc(30.1s / var(--sp)); }
.slide[data-index="3"].active .fus2-bubble--08            { animation-delay: calc(30.2s / var(--sp)), calc(30.7s / var(--sp)); }

/* ── Slide 5（data-index="4"）BMI ── */
.slide.active[data-index="4"] .s4-main-title .s4-char,
.slide[data-index="4"].anim-s4 .s4-main-title .s4-char    { animation-delay: calc((1.15s  + var(--ci, 0) * 80ms) / var(--sp)); }
.slide.active[data-index="4"] .s4-closing-line .s4-char,
.slide[data-index="4"].anim-s4 .s4-closing-line .s4-char  { animation-delay: calc((40.15s + var(--ci, 0) * 80ms) / var(--sp)); }
.slide.active[data-index="4"] .s4-formula-heading--bmi,
.slide[data-index="4"].anim-s4 .s4-formula-heading--bmi   { animation-delay: calc(12s   / var(--sp)); }
.slide.active[data-index="4"] .s4-formula-heading--ideal,
.slide[data-index="4"].anim-s4 .s4-formula-heading--ideal { animation-delay: calc(31s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04BmiChartWrap    #bmi-01    { animation-delay: calc(14s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04BmiChartWrap    #bmi-02    { animation-delay: calc(16s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04BmiChartWrap    #bmi-03    { animation-delay: calc(17.5s / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04BmiChartWrap    #bmi-04    { animation-delay: calc(19s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04BmiChartWrap    #bmi-05    { animation-delay: calc(24s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04BmiChartWrap    #bmi-06    { animation-delay: calc(25s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04BmiChartWrap    #bmi-07    { animation-delay: calc(26s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04WeightChartWrap #weight-01 { animation-delay: calc(31s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04WeightChartWrap #weight-02 { animation-delay: calc(34s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04WeightChartWrap #weight-03 { animation-delay: calc(36s   / var(--sp)); }
.slide[data-index="4"].anim-s4 #slide04WeightChartWrap #weight-04 { animation-delay: calc(37s   / var(--sp)); }
.slide[data-index="4"].anim-s4 .s4-svg-wrap--02                    { animation-delay: calc(31s   / var(--sp)); }
.slide[data-index="4"].anim-s4 .s4-svg-wrap--03                    { animation-delay: calc(39s   / var(--sp)); }
.slide[data-index="4"].anim-s4 .s4-svg-wrap--03 .s4-svg-img--float { animation-delay: calc(39.55s / var(--sp)); }

/* ── Slide 6（data-index="5"）食事運動 ── */
.slide[data-index="5"].anim-s5 .s5-idol-title .s4-char              { animation-delay: calc((3.15s + var(--ci, 0) * 0.08s) / var(--sp)); }
.slide[data-index="5"].anim-s5 .s5-svg-wrap--woman                  { animation-delay: calc(3s    / var(--sp)); }
.slide[data-index="5"].anim-s5 .s5-intro-stage .s5-svg-wrap--woman .s5-svg-img { animation-delay: calc(3.65s / var(--sp)); }
/* col2(こまめに歩く)=0.3s, col1(バランス食事)=5s, col3(筋トレ)=9s */
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(1) { animation-delay: calc(5s   / var(--sp)); }
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(2) { animation-delay: calc(0.3s / var(--sp)); }
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(3) { animation-delay: calc(9s   / var(--sp)); }
/* 登場後のふわふわ開始タイミング */
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(2) .s5-svg-img { animation-delay: calc(0.9s  / var(--sp)); }
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(1) .s5-svg-img { animation-delay: calc(5.6s  / var(--sp)); }
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-cols .s5-col:nth-child(3) .s5-svg-img { animation-delay: calc(9.6s  / var(--sp)); }
/* 緑テキスト13.5s・h3見出し18s */
.slide[data-index="5"].anim-s5.anim-s5-phase2 .s5-phase-main .s5-col-title                  { animation-delay: calc(13.5s / var(--sp)); }

/* ── Slide 8（data-index="7"）周囲2 ── */
.slide[data-index="7"].anim-s7 .s7-svg-wrap--02                    { animation-delay: calc(10s    / var(--sp)); }
.slide[data-index="7"].anim-s7 .s7-svg-wrap--03                    { animation-delay: calc(14s    / var(--sp)); }
.slide[data-index="7"].anim-s7 .s7-svg-wrap--02 .s7-svg-img        { animation-delay: calc(10.76s / var(--sp)); }
.slide[data-index="7"].anim-s7 .s7-svg-wrap--03 .s7-svg-img        { animation-delay: calc(14.76s / var(--sp)); }

/* ── Slide 9（data-index="8"）職場 ── */
.slide[data-index="8"].anim-s8 .s8-svg-wrap--01              { animation-delay: calc(2s     / var(--sp)); }
.slide[data-index="8"].anim-s8 .s8-svg-wrap--02              { animation-delay: calc(10s    / var(--sp)); }
.slide[data-index="8"].anim-s8 .s8-svg-wrap--01 .s8-svg-img  { animation-delay: calc(2.61s  / var(--sp)); }
.slide[data-index="8"].anim-s8 .s8-svg-wrap--02 .s8-svg-img  { animation-delay: calc(10.61s / var(--sp)); }
@media (max-width: 767px) {
  .slide[data-index="8"].anim-s8 .s8-svg-wrap--01 .s8-svg-img { animation-delay: calc(2.61s  / var(--sp)); }
  .slide[data-index="8"].anim-s8 .s8-svg-wrap--02 .s8-svg-img { animation-delay: calc(10.61s / var(--sp)); }
}
/* 確認テストURL未設定時 */
.test-link--disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
  filter: grayscale(40%);
}