header {
	background-color: transparent;
}
/* =========================
 *  FV レイアウト
 * ========================= */

.first-view {
    position: relative;
    margin-bottom: 90px;
}

.fv1-container {
  margin: 0 auto;
  position: relative;
  aspect-ratio: 100 / 55.2; /* または 1 / 0.552 */
  max-height: calc(100vh - 95px);
  overflow: hidden;
  z-index: 2;
}

.fv-img {
  position: absolute;
}

.first-anime { /* JS用のフックと思われるので空のまま残す */ }

.first-inview {
  opacity: 1;
}

/* 共通：fv-anime01〜18 はすべて transition:1s */
.fv-anime01,
.fv-anime02,
.fv-anime03,
.fv-anime04,
.fv-anime05,
.fv-anime06,
.fv-anime07,
.fv-anime08,
.fv-anime09,
.fv-anime10,
.fv-anime11,
.fv-anime12,
.fv-anime13,
.fv-anime14,
.fv-anime15,
.fv-anime16,
.fv-anime17,
.fv-anime18 {
  transition: 1s;
}

/* メイン人物（最初の1枚） */
.fv-anime01 {
  bottom: -2%;
  left: 0.3%;
  right: 0;
  width: 85.5%;
  margin: auto;
  animation: fadeIn 0.5s ease-in forwards;
}

/* =========================
 *  Scroll 表示
 * ========================= */

.scroll {
  position: absolute;
  left: 2%;
    bottom: 96px;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  font-size: .10rem;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  z-index: 5;
}
.scroll-bottom-zero {
    bottom: 10px;
}

.scroll::before {
  animation: scroll 2s infinite;
  background-color: #000;
  bottom: -95px;
  content: "";
  height: 90px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* =========================
 *  Keyframes（動きは元のまま）
 * ========================= */

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes popIn {
  0%   { transform: scale(0.7); }
  100% { transform: scale(1); }
}

/* ダイナミック表示用：スケール＆リフトアップ */
@keyframes heroPop1 {
  0%   { transform: translateY(16px) scale(1); }
  50%  { transform: translateY(-32px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes heroPop2 {
  0%   { transform: translateY(16px) scale(0.90); }
  50%  { transform: translateY(-12px) scale(1.2); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes liftIn20 {
  0%   { transform: translateY(40px); }
  100% { transform: translateY(0); }
}

/* =========================
 *  アニメーション共通ベース
 * ========================= */

/* 2人目以降の人物・吹き出し・セカンドビューなど共通のフェードインベース */
.fv-anime02,
.fv-anime03,
.fv-anime04,
.fv-anime05,
.fv-anime06,
.fv-anime07,
.fv-anime08,
.fv-anime09,
.fv-anime10,
.fv-anime11,
.fv-anime12,
.fv-anime13,
.fv-anime14,
.fv-anime15,
.fv-anime16,
.fv-anime17,
.fv-anime18,
.second-view,
.fv2-hito,
.fv2-text,
.focus-lines1,
.focus-lines2 {
  opacity: 0;
  animation: fadeIn 1s forwards;
  will-change: opacity;
}

/* 吹き出し（4つ）：fade + popIn を 0.6倍速に */
.fv-anime03,
.fv-anime07,
.fv-anime11,
.fv-anime15 {
  animation-name: fadeIn, popIn;
  animation-duration: 0.3s, 0.18s;   /* 0.5s, 0.3s の 0.6倍 */
  animation-timing-function: ease, ease-out;
  animation-fill-mode: forwards, forwards;
  will-change: opacity, transform;
  transform-origin: center;
}

/* 小さい丸＋大きい丸（8要素）も 0.6倍速 */
.fv-anime05, /* 小さい丸1 */
.fv-anime04, /* 大きい丸1 */
.fv-anime09, /* 小さい丸2 */
.fv-anime08, /* 大きい丸2 */
.fv-anime13, /* 小さい丸3 */
.fv-anime12, /* 大きい丸3 */
.fv-anime17, /* 小さい丸4 */
.fv-anime16  /* 大きい丸4 */ {
  animation-name: fadeIn, liftIn20;
  animation-duration: 0.3s, 0.18s;   /* 0.5s, 0.3s の 0.6倍 */
  animation-timing-function: ease, ease-out;
  animation-fill-mode: forwards, forwards;
  will-change: opacity, transform;
}

/* 吹き出し上の文字（4つ）：fade を 0.6倍速に */
.fv-anime02,
.fv-anime06,
.fv-anime10,
.fv-anime14 {
  animation-duration: 0.3s;         /* 0.5s → 0.3s（0.6倍） */
}

/* 見出し：fade + heroPop1（動きの質はそのまま、開始タイミングだけ後で調整） */
.fv-anime18 {
  animation-name: fadeIn, heroPop1;
  animation-duration: 0.6s, 1.4s;
  animation-timing-function: ease, cubic-bezier(.2,.8,.2,1.1);
  animation-fill-mode: forwards, forwards;
  transform-origin: center bottom;
  will-change: opacity, transform, filter;
}

/* セカンドビューの見出し・ライン：fade + heroPop2（元通り） */
.fv2-text,
.focus-lines1,
.focus-lines2 {
  animation-name: fadeIn, heroPop2;
  animation-duration: 0.6s, 1.4s;
  animation-timing-function: ease, cubic-bezier(.2,.8,.2,1.1);
  animation-fill-mode: forwards, forwards;
  transform-origin: center bottom;
  will-change: opacity, transform, filter;
}

/* =========================
 *  アニメーション順序（delay）
 *  小さい丸＋大きい丸／吹き出し／テキストは 0.6倍に圧縮
 * ========================= */

/* 1人目（女性1） */
.fv-anime05 { animation-delay: 0.36s; }  /* 小さい丸1（0.6 × 0.6） */
.fv-anime04 { animation-delay: 0.48s; }  /* 大きい丸1（0.8 × 0.6） */
.fv-anime03 { animation-delay: 0.78s; }  /* 吹き出し1（1.3 × 0.6） */
.fv-anime02 { animation-delay: 1.14s; }  /* テキスト1（1.9 × 0.6） */

/* 2人目（女性2） */
.fv-anime09 { animation-delay: 1.65s; }  /* 小さい丸2（2.75 × 0.6） */
.fv-anime08 { animation-delay: 1.77s; }  /* 大きい丸2（2.95 × 0.6） */
.fv-anime07 { animation-delay: 2.07s; }  /* 吹き出し2（3.45 × 0.6） */
.fv-anime06 { animation-delay: 2.43s; }  /* テキスト2（4.05 × 0.6） */

/* 3人目（男性1） */
.fv-anime13 { animation-delay: 2.94s; }  /* 小さい丸3（4.90 × 0.6） */
.fv-anime12 { animation-delay: 3.06s; }  /* 大きい丸3（5.10 × 0.6） */
.fv-anime11 { animation-delay: 3.36s; }  /* 吹き出し3（5.60 × 0.6） */
.fv-anime10 { animation-delay: 3.72s; }  /* テキスト3（6.20 × 0.6） */

/* 4人目（男性2） */
.fv-anime17 { animation-delay: 4.23s; }  /* 小さい丸4（7.05 × 0.6） */
.fv-anime16 { animation-delay: 4.35s; }  /* 大きい丸4（7.25 × 0.6） */
.fv-anime15 { animation-delay: 4.65s; }  /* 吹き出し4（7.75 × 0.6） */
.fv-anime14 { animation-delay: 5.01s; }  /* テキスト4（8.35 × 0.6） */

/* テキスト4が出終わってから見出しが出る「隙間」も 0.6倍に
   元：テキスト4終了 8.85s → 見出し開始 10.95s（間 2.1s）
   新：テキスト4終了 5.31s → 見出し開始 6.57s（間 約1.26s） */
.fv-anime18 {
  animation-delay: 6.57s, 6.57s;   /* fadeIn と heroPop1 の両方に同じdelay */
}

/* =========================
 *  first-view 終了 → second-view 開始の隙間を +2秒
 *
 *  元：
 *    見出し heroPop1 終了 = 10.95 + 1.4 = 12.35s
 *    second-view 開始      = 13.45s（間 約1.1s）
 *
 *  新：
 *    見出し heroPop1 終了 = 6.57 + 1.4 = 7.97s
 *    second-view 開始      = 7.97 + (1.1 + 2.0) = 11.07s
 * ========================= */

.second-view {
  animation-delay: 9.12s;
}

.fv2-hito {
  animation-delay: 9.42s;         /* second-view +0.3s */
}

.fv2-text,
.focus-lines1,
.focus-lines2 {
  animation-delay: 10.12s, 10.12s; /* second-view +1.0s */
}

/* =========================
 *  位置・サイズ（元の数値そのまま）
 * ========================= */

/* 女性1 */
.fv-anime05 {
  width: 0.9%;
  bottom: 42.5%;
  left: 9.4%;
}
.fv-anime04 {
  width: 1.5%;
  bottom: 44.2%;
  left: 8%;
}
.fv-anime03 {
  width: 19%;
  bottom: 45.6%;
  left: 5.5%;
}
.fv-anime02 {
  width: 15%;
  bottom: 55.5%;
  left: 7.5%;
  z-index: 1;
}

/* 女性2 */
.fv-anime08 {
  width: 1.3%;
  bottom: 38.2%;
  right: 42.7%;
}
.fv-anime09 {
  width: 1%;
  bottom: 36%;
  right: 41.8%;
}
.fv-anime07 {
  width: 19.4%;
  right: 28.5%;
  bottom: 40.5%;
}
.fv-anime06 {
  width: 15.6%;
  right: 29.9%;
  bottom: 50%;
  z-index: 1;
}

/* 男性1 */
.fv-anime13 {
  width: 1%;
  bottom: 46%;
  left: 33.4%;
}
.fv-anime12 {
  width: 1.5%;
  left: 32%;
  bottom: 48%;
}
.fv-anime11 {
  width: 19.1%;
  bottom: 49.8%;
  left: 29.5%;
}
.fv-anime10 {
  width: 14.7%;
  bottom: 59%;
  left: 31.5%;
  z-index: 1;
}

/* 男性2 */
.fv-anime17 {
  width: 1%;
  right: 19.5%;
  bottom: 46.2%;
}
.fv-anime16 {
  width: 1.4%;
  right: 20.4%;
  bottom: 48.5%;
}
.fv-anime15 {
  width: 18.7%;
  right: 6.5%;
  bottom: 51.2%;
}
.fv-anime14 {
  width: 13.9%;
  bottom: 57.5%;
  right: 8.7%;
  z-index: 1;
}

/* 見出し */
.fv-anime18 {
  top: 9%;
  left: 0;
  right: 1%;
  margin: auto;
  width: 68%;
  display: block;
  bottom: auto;
}

/* ビュー2枚目 */
.second-view {
  aspect-ratio: 100 / 55.2;
  max-height: calc(100vh - 95px);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  background-color: #fff;
  transition: 1.2s;
  z-index: 2;
}

.fv2-hito {
  width: 88.5%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 1.3%;
  margin: auto;
  transition: 1.5s;
}

.fv2-text {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  margin: auto;
  width: 67.5%;
  transition: 0s;
}

.focus-lines1,
.focus-lines2 {
  position: absolute;
  width: 21.3%;
  top: 29.5%;
  transition: 0.8s;
  transform: translateY(30px);
}

.focus-lines1 { left: 16.6%; }
.focus-lines2 { right: 21.5%; }

/* きらきら */
.kirakira1 {
  position: absolute;
  width: 1.6%;
  bottom: 40.7%;
  left: 7.16%;
}

/* kirakira2〜8 は全て同じ値だったのでまとめ */
.kirakira2,
.kirakira3,
.kirakira4,
.kirakira5,
.kirakira6,
.kirakira7,
.kirakira8 {
  position: absolute;
  width: 2.5%;
  bottom: 44.8%;
  left: 20.7%;
}

/* =========================
 *  オープン時の全画面アニメーション
 * ========================= */

.open-view {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  animation: showAnim 1s ease-out forwards;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}

.open-view div {
  position: absolute;
  width: fit-content;
  height: fit-content;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.open-view p {
  font-size: .36rem;
  text-align: center;
  margin-bottom: 30px;
}

.open-view img {
  width: 492px;
  max-width: 100%;
  opacity: 0;
  animation: open-view-fadeIn 0.3s ease 0.5s forwards;
}

/* ふわっと表示させるアニメーション */
@keyframes open-view-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width:800px) {
  .open-view p {
    font-size: .24rem;
  }
  .open-view img {
    width: 270px;
  }
}



/* ① 最初はアニメーションを止めておく */
[class^="fv-anime"],
.second-view,
.fv2-hito,
.fv2-text,
.focus-lines1,
.focus-lines2,
.scroll::before {
  animation-play-state: paused;
}

/* ② body に .fv-start が付いたら一斉に再生 */
body.fv-start [class^="fv-anime"],
body.fv-start .second-view,
body.fv-start .fv2-hito,
body.fv-start .fv2-text,
body.fv-start .focus-lines1,
body.fv-start .focus-lines2,
body.fv-start .scroll::before {
  animation-play-state: running;
}