/* =========================================================
   VOICE
========================================================= */
@supports (-moz-appearance: none) {
  .timeline__track {
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
}

.voice {
  padding: 180px 0 0px;
  background: #fff;
  /* reveal.js で is-revealed が付くまで隠す（voice-reveal.css が無い場合の保険） */
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  will-change: opacity, transform;
}

.voice.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.voice__inner {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

/* Staged reveal (title -> marquee -> quote) */
.voice__title,
.voice-marquee,
.voice__quote {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 650ms ease,
    transform 650ms cubic-bezier(0.2, 0.85, 0.2, 1);
  will-change: opacity, transform;
}
.voice.is-step-1 .voice__title,
.voice.is-step-2 .voice__title,
.voice.is-step-3 .voice__title {
  opacity: 1;
  transform: translateY(0);
}
.voice.is-step-2 .voice-marquee,
.voice.is-step-3 .voice-marquee {
  opacity: 1;
  transform: translateY(0);
}
.voice.is-step-3 .voice__quote {
  opacity: 1;
  transform: translateY(0);
}
.voice__title {
  font-size: clamp(28px, 2.2vw, 36px);
  letter-spacing: 0.05em;
  margin: 0 0 83px;
  font-weight: 300;
}
.voice__quote {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 384px) auto;
  align-items: center;
  column-gap: 10px; /* “ ” を近づける */
  justify-content: center;
  margin: 0 auto;
  width: max-content; /* 中央寄せが効きやすい */
  max-width: 100%;
}
.voice__mark {
  font-size: 80px;
  line-height: 1;
  color: #e67a2e;
  font-weight: 600;
  user-select: none;
}
.voice__mark--l {
  justify-self: end;
  transform: translateY(-6px);
}
.voice__mark--r {
  justify-self: start;
  transform: translateY(-6px);
}

.voice__qtext {
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: 24px;
  line-height: 1.7;
  color: #333;
  font-weight: 600;
  margin-top: -25px;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}
.voice__qtext.is-show {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.voice__qtext.is-hide {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* collage */
.voice-collage {
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  overflow: hidden;
}
.voice-collage__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(60px, 6vw, 120px);
  will-change: transform;
}
.voice-collage__group {
  position: relative;
  width: min(1400px, 92vw);
  height: clamp(260px, 32vw, 420px);
}

/* image card */
.vimg {
  position: absolute;
  margin: 0;
  border-radius: 10px;
  background: #f3f3f3;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}
.vimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vimg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Layout A */
.vimg--a1 {
  left: 0%;
  top: 22%;
  width: clamp(140px, 12vw, 190px);
  height: clamp(180px, 18vw, 260px);
}
.vimg--a2 {
  left: 12%;
  top: 12%;
  width: clamp(180px, 16vw, 240px);
  height: clamp(220px, 20vw, 300px);
}
.vimg--a3 {
  left: 34%;
  top: 18%;
  width: clamp(220px, 20vw, 320px);
  height: clamp(140px, 13vw, 190px);
}
.vimg--a4 {
  left: 40%;
  top: 58%;
  width: clamp(160px, 14vw, 220px);
  height: clamp(90px, 8vw, 120px);
}
.vimg--a5 {
  left: 56%;
  top: 26%;
  width: clamp(260px, 24vw, 360px);
  height: clamp(150px, 14vw, 210px);
}
.vimg--a6 {
  left: 76%;
  top: 44%;
  width: clamp(220px, 20vw, 300px);
  height: clamp(140px, 13vw, 190px);
}
.vimg--a7 {
  left: 90%;
  top: 12%;
  width: clamp(160px, 14vw, 220px);
  height: clamp(110px, 10vw, 150px);
}

/* Layout B */
.vimg--b1 {
  left: 2%;
  top: 18%;
  width: clamp(140px, 12vw, 190px);
  height: clamp(180px, 18vw, 260px);
}
.vimg--b2 {
  left: 16%;
  top: 16%;
  width: clamp(180px, 16vw, 240px);
  height: clamp(220px, 20vw, 300px);
}
.vimg--b3 {
  left: 38%;
  top: 14%;
  width: clamp(240px, 22vw, 340px);
  height: clamp(150px, 14vw, 210px);
}
.vimg--b4 {
  left: 44%;
  top: 60%;
  width: clamp(160px, 14vw, 220px);
  height: clamp(90px, 8vw, 120px);
}
.vimg--b5 {
  left: 58%;
  top: 30%;
  width: clamp(260px, 24vw, 360px);
  height: clamp(150px, 14vw, 210px);
}
.vimg--b6 {
  left: 78%;
  top: 48%;
  width: clamp(220px, 20vw, 300px);
  height: clamp(140px, 13vw, 190px);
}
.vimg--b7 {
  left: 92%;
  top: 14%;
  width: clamp(160px, 14vw, 220px);
  height: clamp(110px, 10vw, 150px);
}

/* ===============================
   Voice Loop Section (COMPLETE)
   - Loop gap end->start: 40px
   - Loop width: 2646.8px
   - Height base: 340px
   - Scroll-in motion (no position shift)
   =============================== */

/* Voice marquee */
.voice-marquee {
  margin-top: 50px;
  position: relative;
  width: 100%;
  padding-bottom: 10px;
  overflow: hidden;
}

/* 横に流れる全体 */
.voice-strip {
  display: flex;
  width: max-content;
  animation: voice-slide var(--voiceSpeed) linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* 1ループ分の塊 */
.voice-group {
  position: relative;
  width: var(--voiceW);
  height: var(--voiceH);
  flex: 0 0 auto;
}

/* 共通画像 */
.voice-group .v {
  position: absolute;
  width: auto;
  border-radius: 12px;
  background: #f9f9f9;

  /* シャドウ本体 */
  box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.15);
}

/* 無限ループ */
@keyframes voice-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--voiceW)));
  }
}

/* ===============================
   Scroll-in motion (no position shift)
   =============================== */

.voice-group .v {
  opacity: 0;
  transform: scale(0.985);
  filter: blur(6px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.7s ease;
  will-change: opacity, transform, filter;
}

.voice-marquee.is-inview .voice-group .v {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* stagger */
.voice-marquee.is-inview .v01 {
  transition-delay: 0ms;
}
.voice-marquee.is-inview .v02 {
  transition-delay: 70ms;
}
.voice-marquee.is-inview .v03 {
  transition-delay: 140ms;
}
.voice-marquee.is-inview .v04 {
  transition-delay: 210ms;
}
.voice-marquee.is-inview .v05 {
  transition-delay: 280ms;
}
.voice-marquee.is-inview .v06 {
  transition-delay: 350ms;
}
.voice-marquee.is-inview .v07 {
  transition-delay: 420ms;
}
.voice-marquee.is-inview .v08 {
  transition-delay: 490ms;
}
.voice-marquee.is-inview .v09 {
  transition-delay: 560ms;
}
.voice-marquee.is-inview .v10 {
  transition-delay: 630ms;
}
.voice-marquee.is-inview .v11 {
  transition-delay: 700ms;
}
.voice-marquee.is-inview .v12 {
  transition-delay: 770ms;
}

/* motion配慮 */
@media (prefers-reduced-motion: reduce) {
  .voice-strip {
    animation: none;
  }
  .voice-group .v {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .voice__title,
  .voice-marquee,
  .voice__quote {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===============================
   Vertical alignment rules
   - 1・7：上下センター（算数で確実に中央）
   - 2・5・9・12：上揃え
   - 3・6・8・11：下揃え
   =============================== */

/* 1・7：高さを変数化（中央計算に使う） */
.v01 {
  --h: 226.8px;
}
.v07 {
  --h: 227px;
}

/* Center: top を算数で固定（transform/translate不使用） */
.v01,
.v07 {
  top: calc((var(--voiceH) - var(--h)) / 2);
  bottom: auto;
}

/* Top */
.v02,
.v05,
.v09,
.v12 {
  top: var(--edgePad);
}

/* Bottom */
.v03,
.v06,
.v08,
.v11 {
  bottom: var(--edgePad);
  top: auto;
}

/* ===============================
   Layout (left) + sizes
   - base gaps: 40px
   - overlap 2&3: 164px (2 on top)
   - overlap 8&9: 26.2389px (8 on top)
   - gap 9->10: remainder (16.2389px)
   - loop end gap: 40px (via --voiceW)
   =============================== */

/* 1 */
.v01 {
  left: 0px;
  height: 226.8px;
}

/* 2 & 3（重なり164px：2が上、3が下） */
.v02 {
  left: 342.4px;
  height: 175px;
  z-index: 2;
}
.v03 {
  left: 382.4px;
  height: 190px;
  z-index: 1;
}

/* 4 */
.v04 {
  left: 666.4px;
  height: 340px;
}

/* 5 & 6（上下2列、6の右端＝5の右端） */
.v05 {
  left: 950.4px;
  height: 178px;
}
.v06 {
  left: 1032.4px;
  height: 132px;
}

/* 7 */
.v07 {
  left: 1270.4px;
  height: 227px;
}

/* 8 & 9（重なり26.2389px：8が上） */
.v08 {
  left: 1612.8px;
  height: 206px;
  z-index: 2;
}
.v09 {
  left: 1806.5611px;
  height: 206px;
  z-index: 1;
}

/* 10（9→10は余り：16.2389px） */
.v10 {
  left: 2042.8px;
  height: 340px;
}

/* 11 & 12（上下2列、12の右端＝11の右端） */
.v11 {
  left: 2326.8px;
  height: 178px;
}
.v12 {
  left: 2408.8px;
  height: 132px;
}

/* =========================
   VOICE (SP)
   ========================= */
@media (max-width: 767px) {
  /* セクション全体の余白（まずここで整う） */
  .voice {
    padding: 56px 0 64px;
    overflow: hidden; /* 横はみ出し事故防止 */
  }

  .voice__inner {
    padding-inline: 0px;
  }

  /* タイトル：行間とサイズをスマホ最適に */
  .voice__title {
    font-size: clamp(20px, 5.6vw, 26px);
    line-height: 1.45;
    letter-spacing: 0.02em;
    margin-bottom: 32px;
  }

  /* 引用ブロック：左右の“ ” と本文の当たりを調整 */
  .voice__quote {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* “ ” をさらに近づける */
    padding: 18px 16px;
    border-radius: 18px;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
  }

  .voice__mark {
    font-size: 42px; /* 大きすぎるなら 34〜42 */
    line-height: 1;
  }

  .voice__mark--l {
    transform: translateY(-2px);
  }
  .voice__mark--r {
    transform: translateY(-2px);
  }

  /* 引用本文：スマホは読みやすさ優先 */
  .voice__qtext {
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.55;
    letter-spacing: 0.02em;
    margin: 0;
  }

  /* ====== ループ画像サイズ（SP） ======
     1枚ずつの高さを固定で潰すと小さくなりすぎるので、
     ループ全体をスケールして見た目の大きさを調整する。
     ※必要なら --voiceScale だけ触ればOK。
  */
  .voice-marquee {
    --voiceScale: 0.6; /* 大きくしたい: 0.92〜0.98 / 小さく: 0.78〜0.84 */
    margin-top: 20px;
  }

  /* scaleは wrapper に付与（.voice-strip はアニメで transform を使うため） */
  .voice-strip-wrap {
    transform: scale(var(--voiceScale));
    transform-origin: left top;
    will-change: transform;
  }

  /* スケール時に角が潰れて見えないよう、角丸だけSP最適化 */
  .voice-group .v {
    border-radius: 14px;
  }
}