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

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

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

.fv1-container {
  position: relative;
  background-color: #F2F2F2;
  padding-bottom: 55.2%;
  overflow: hidden;
  z-index: 2;
}

.fv-img {
  position: absolute;
}

.first-anime {

}

.first-inview {
  opacity: 1;
}

.fv-anime01 {
  bottom: -2%;
  left: 0.3%;
  right: 0;
  width: 85.5%;
  margin: auto;
  transition: 1s;
  animation: fadeIn 0.5s ease-in forwards;
}



/* ==== フェードイン（opacityのみ） ==== */
@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); }
}

/* 対象要素を透明スタート＆フェード適用（既存transitionは保持） */
.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;
}


.fv-anime03,
.fv-anime07,
.fv-anime11,
.fv-anime15 {
  /* 既存の fadeIn を壊さず、2本目として popIn を追加 */
  animation-name: fadeIn, popIn;
  animation-duration: 1s, 0.6s;              /* 不透明度1s & スケール0.6s */
  animation-timing-function: ease, ease-out;  /* 好みで調整可 */
  animation-fill-mode: forwards, forwards;    /* 最終状態を維持 */
  will-change: opacity, transform;
  transform-origin: center;                   /* ど真ん中基準で拡大 */
}


/* 見出しだけリッチに（既存の fadeIn と同時に動かす） */
.fv-anime18 {
  /* 既存の fadeIn はそのまま。2本目として heroPop を追加 */
  animation-name: fadeIn, heroPop1;
  animation-duration: 0.6s, 1400ms;
  animation-timing-function: ease, cubic-bezier(.2,.8,.2,1.1);
  animation-delay: 4s, 4s;          /* 既存の開始タイミングを踏襲 */
  animation-fill-mode: forwards, forwards;
  transform-origin: center bottom;  /* 下基準で持ち上げる感じ */
  will-change: opacity, transform, filter;
}

/* 見出しだけリッチに（既存の fadeIn と同時に動かす） */
.fv2-text,
.focus-lines1,
.focus-lines2{
  /* 既存の fadeIn はそのまま。2本目として heroPop を追加 */
  animation-name: fadeIn, heroPop2;
  animation-duration: 0.6s, 1400ms;
  animation-timing-function: ease, cubic-bezier(.2,.8,.2,1.1);
  animation-delay: 4s, 4s;          /* 既存の開始タイミングを踏襲 */
  animation-fill-mode: forwards, forwards;
  transform-origin: center bottom;  /* 下基準で持ち上げる感じ */
  will-change: opacity, transform, filter;
}


/* 小さい丸＋大きい丸（8要素）だけ、fadeIn と liftIn20 を同時適用 */
.fv-anime05, /* 小さい丸 */
.fv-anime04, /* 大きい丸 */
.fv-anime09, /* 小さい丸 */
.fv-anime08, /* 大きい丸 */
.fv-anime13, /* 小さい丸 */
.fv-anime12, /* 大きい丸 */
.fv-anime17, /* 小さい丸 */
.fv-anime16  /* 大きい丸 */ {
  animation-name: fadeIn, liftIn20;
  animation-duration: 1s, 0.6s;                 /* 透明度1s + 垂直移動0.6s */
  animation-timing-function: ease, ease-out;     /* 好みで調整可 */
  animation-fill-mode: forwards, forwards;
  will-change: opacity, transform;
}



/* 表示順：animation-delay だけで制御 */
.fv-anime05 { animation-delay: 0.6s; } /* 小さい丸 */
.fv-anime04 { animation-delay: 0.8s; } /* 大きい丸 */
.fv-anime03 { animation-delay: 1.3s; } /* 吹き出し */
.fv-anime02 { animation-delay: 1.9s; } /* 吹き出し上の文字 */

.fv-anime09 { animation-delay: 3.6s; } /* 小さい丸 */
.fv-anime08 { animation-delay: 3.8s; } /* 大きい丸 */
.fv-anime07 { animation-delay: 4.3s; } /* 吹き出し */
.fv-anime06 { animation-delay: 4.9s; } /* 吹き出し上の文字 */

.fv-anime13 { animation-delay: 6.6s; } /* 小さい丸 */
.fv-anime12 { animation-delay: 6.8s; } /* 大きい丸 */
.fv-anime11 { animation-delay: 7.3s; } /* 吹き出し */
.fv-anime10 { animation-delay: 7.9s; } /* 吹き出し上の文字 */

.fv-anime17 { animation-delay: 9.6s; } /* 小さい丸 */
.fv-anime16 { animation-delay: 9.8s; } /* 大きい丸 */
.fv-anime15 { animation-delay: 10.3s; } /* 吹き出し */
.fv-anime14 { animation-delay: 10.9s; } /* 吹き出し上の文字 */

.fv-anime18 { animation-delay: 14s; } /* 1つ目のコピー */

.second-view { animation-delay: 16.5s; }
.fv2-hito { animation-delay: 16.8s; }
.fv2-text { animation-delay: 17.5s; }
.focus-lines1 { animation-delay: 17.5s; }
.focus-lines2 { animation-delay: 17.5s; }




/* ==== 元の位置・サイズ・transition（delayだけ除去） ==== */
.fv-anime05 {
  width: 0.9%;
  bottom: 42.5%;
  left: 9.4%;
  transition: 1s;
}

.fv-anime04 {
  width: 1.5%;
  bottom: 44.2%;
  left: 8%;
  transition: 1s;
}

.fv-anime03 {
  width: 19%;
  bottom: 45.6%;
  left: 5.5%;
  transition: 1s;
}

.fv-anime02 {
  width: 15%;
  bottom: 55.5%;
  left: 7.5%;
  z-index: 1;
  transition: 1s;
}

/* 女性2 */
.fv-anime08 {
  width: 1.3%;
  bottom: 38.2%;
  right: 42.7%;
  transition: 1s;
}

.fv-anime09 {
  width: 1%;
  bottom: 36%;
  right: 41.8%;
  transition: 1s;
}

.fv-anime07 {
  width: 19.4%;
  right: 28.5%;
  bottom: 40.5%;
  transition: 1s;
}

.fv-anime06 {
  width: 15.6%;
  right: 29.9%;
  bottom: 50%;
  z-index: 1;
  transition: 1s;
}

/* 男性1 */
.fv-anime13 {
  width: 1%;
  bottom: 46%;
  left: 33.4%;
  transition: 1s;
}

.fv-anime12 {
  width: 1.5%;
  left: 32%;
  bottom: 48%;
  transition: 1s;
}

.fv-anime11 {
  width: 19.1%;
  bottom: 49.8%;
  left: 29.5%;
  transition: 1s;
}

.fv-anime10 {
  width: 14.7%;
  bottom: 59%;
  left: 31.5%;
  z-index: 1;
  transition: 1s;
}

/* 男性2 */
.fv-anime17 {
  width: 1%;
  right: 19.5%;
  bottom: 46.2%;
  transition: 1s;
}

.fv-anime16 {
  width: 1.4%;
  right: 20.4%;
  bottom: 48.5%;
  transition: 1s;
}

.fv-anime15 {
  width: 18.7%;
  right: 6.5%;
  bottom: 51.2%;
  transition: 1s;
}

.fv-anime14 {
  width: 13.9%;
  bottom: 57.5%;
  right: 8.7%;
  z-index: 1;
  transition: 1s;
}

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




/* ビュー */
.second-view {
  padding-bottom: 55.2%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  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: 9%;
  left: 0;
  right: 0;
  margin: auto;
  width: 67.5%;
  transition: 0s;
}


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

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



.kirakira1 {
    position: absolute;
    width: 1.6%;
    bottom: 40.7%;
    left: 7.16%;
}

.kirakira2 {
    position: absolute;
    width: 2.5%;
    bottom: 44.8%;
    left: 20.7%;
}

.kirakira3{
  position: absolute;
  width: 2.5%;
  bottom: 44.8%;
  left: 20.7%;
}

.kirakira4{
  position: absolute;
  width: 2.5%;
  bottom: 44.8%;
  left: 20.7%;
}

.kirakira5{
  position: absolute;
  width: 2.5%;
  bottom: 44.8%;
  left: 20.7%;
}

.kirakira5{
  position: absolute;
  width: 2.5%;
  bottom: 44.8%;
  left: 20.7%;
}

.kirakira6{
  position: absolute;
  width: 2.5%;
  bottom: 44.8%;
  left: 20.7%;
}

.kirakira7{
  position: absolute;
  width: 2.5%;
  bottom: 44.8%;
  left: 20.7%;
}

.kirakira8{
  position: absolute;
  width: 2.5%;
  bottom: 44.8%;
  left: 20.7%;
}

header {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
header img{
  height:90px;
}