@charset "utf-8";

/* ============================================
   ▼ 泡ふわふわアニメーション（上下）
   ============================================ */
@keyframes float_type1 {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-3.5556vw); }
}
@keyframes float_type2 {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-3.4722vw); }
}
@keyframes float_type3 {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-3.8889vw); }
}
@keyframes float_type4 {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-2.8639vw); }
}

/* 幅小・ゆっくり */
.type1 {
  animation: float_type1 1.8s ease-in-out infinite alternate;
}
/* 幅中・標準 */
.type2 {
  animation: float_type2 2s ease-in-out infinite alternate;
}
/* 幅大・ゆったり */
.type3 {
  animation: float_type3 2.1s ease-in-out infinite alternate;
}
/* 幅小・速め */
.type4 {
  animation: float_type4 1.6s ease-in-out infinite alternate;
}

/* ============================================
   ▼ 下スクロール誘導ライン（上から下へ流れる）
   .concept_kv::before / .campaign_icon::before の
   縦線上を、明るいセグメントが上→下へ繰り返し流れる
   ============================================ */
.concept_kv::before,
.campaign_icon::before {
  background-color: #d5d5d5; /* 薄いトラック（線の下地） */
  background-image: linear-gradient(to bottom, rgba(60,60,60,0) 0%, #3c3c3c 50%, rgba(60,60,60,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 4.1667vw; /* 流れるセグメントの高さ */
}
.concept_kv::before {
  animation: scroll_line_flow 1.8s linear infinite;
}
.campaign_icon::before {
  animation: scroll_line_flow 3s linear infinite;
}
@keyframes scroll_line_flow {
  0%   { background-position: 0 -4.1667vw; }
  100% { background-position: 0 calc(100% + 4.1667vw); }
}

/* 矢印：黒い線(セグメント)が到達した時だけ黒、それ以外は灰色（線と同期） */
.concept_kv::after,
.campaign_icon::after {
  opacity: 0.35; /* 通常＝灰色 */
}
.concept_kv::after {
  animation: arrow_flash_concept 1.8s linear infinite;
}
.campaign_icon::after {
  animation: arrow_flash 3s linear infinite;
}
@keyframes arrow_flash {
  0%   { opacity: 0.35; }
  85%  { opacity: 0.35; }
  95%  { opacity: 1; }   /* 黒セグメント到達 */
  100% { opacity: 0.35; }
}
@keyframes arrow_flash_concept {
  0%   { opacity: 0.35; }
  68%  { opacity: 0.35; }
  78%  { opacity: 1; }   /* 黒セグメント到達（conceptは短いので早め） */
  100% { opacity: 0.35; }
}

/* ============================================
   ▼ pickup_img 重なり入れ替え（ゆっくり前に出る奥行きクロスフェード）
   scale と opacity をease-in-outで変化させ、手前へ迫るように交代
   ※適用は下部の open アニメ完了後（.active時）にまとめて指定
   ============================================ */
@keyframes pickup_depth_A { /* 先に手前 → ゆっくり奥へ → また手前 */
  0%   { z-index: 2; transform: scale(1);    opacity: 1;   }
  43%  { z-index: 2; transform: scale(1);    opacity: 1;   }
  50%  { z-index: 1; transform: scale(0.96); opacity: 0.7; }
  93%  { z-index: 1; transform: scale(0.96); opacity: 0.7; }
  100% { z-index: 2; transform: scale(1);    opacity: 1;   }
}
@keyframes pickup_depth_B { /* 先に奥 → ゆっくり手前へ → また奥 */
  0%   { z-index: 1; transform: scale(0.96); opacity: 0.7; }
  43%  { z-index: 1; transform: scale(0.96); opacity: 0.7; }
  50%  { z-index: 2; transform: scale(1);    opacity: 1;   }
  93%  { z-index: 2; transform: scale(1);    opacity: 1;   }
  100% { z-index: 1; transform: scale(0.96); opacity: 0.7; }
}


.title_item.ani_target {
  opacity: 0;
  transform: translateY(1.3889vw);
  transition: 0.8s ease-in-out;
}
.title_item.ani_target.active {
  opacity: 1;
  transform: translateY(0);
}

.concept_txt .ani_target {
  opacity: 0;
  transform: translateY(1.3889vw);
  transition: 0.8s ease-in-out;
}
.concept_txt .ani_target.active {
  opacity: 1;
  transform: translateY(0);
}

.sec_campaign.ani_target .campaign_title,
.sec_campaign.ani_target .campaign_lineup_title,
.sec_campaign.ani_target .campaign_lineup {
  opacity: 0;
  transform: translateY(1.3889vw);
  transition: 0.8s ease-in-out;
}
.sec_campaign.ani_target.active .campaign_title,
.sec_campaign.ani_target.active .campaign_lineup_title,
.sec_campaign.ani_target.active .campaign_lineup {
  opacity: 1;
  transform: translateY(0);
}

.sec_product_kv.ani_target {
  opacity: 0;
  transform: translateY(1.3889vw);
  transition: 0.8s ease-in-out;
}
.sec_product_kv.ani_target.active {
  opacity: 1;
  transform: translateY(0);
}

.pickup_list.ani_target .product_main,
.pickup_list.ani_target .pickup_line {
  opacity: 0;
  transform: translateY(1.3889vw);
  transition: 0.8s ease-in-out;
}
.pickup_list.ani_target.active .product_main,
.pickup_list.ani_target.active .pickup_line {
  opacity: 1;
  transform: translateY(0);
}

/*----------------------------*/

.item_jin.active .pickup_item_title {
  animation: title_show1 0.4s ease-in-out 1.5s 1 forwards;
}
.item_sakai.active .pickup_item_title {
  animation: title_show2 0.4s ease-in-out 1.5s 1 forwards;
}
.item_oyone.active .pickup_item_title {
  animation: title_show3 0.4s ease-in-out 1.5s 1 forwards;
}
.item_kenken.active .pickup_item_title {
  animation: title_show4 0.4s ease-in-out 1.5s 1 forwards;
}
.pickup_item.active .pickup_item_title .pickup_item_title_icon {
  animation: opacity1 0.4s ease-in-out 1.5s 1 forwards;
}
@keyframes title_show1 {
  0%   { top: 37.2222vw;left: 50%;transform: translateX(-50%); }
  100% { top: 16.3889vw;left: 11.1111vw;transform: translateX(0); }
}
@keyframes title_show2 {
  0%   { top: 37.2222vw;left: 50%;transform: translateX(-50%); }
  100% { top: 9.8611vw;left: 32.0833vw;transform: translateX(0); }
}
@keyframes title_show3 {
  0%   { top: 37.2222vw;left: 50%;transform: translateX(-50%); }
  100% { top: 11.1111vw;left: 6.5278vw;transform: translateX(0); }
}
@keyframes title_show4 {
  0%   { top: 37.2222vw;left: 50%;transform: translateX(-50%); }
  100% { top: 12.7778vw;left: 31.4583vw;transform: translateX(0); }
}
@keyframes opacity1 {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.item_jin.active .pickup_item_pkg {
  animation: pkg1 0.4s ease-in-out 1.5s 1 forwards;
}
.item_sakai.active .pickup_item_pkg {
  animation: pkg2 0.4s ease-in-out 1.5s 1 forwards;
}
.item_oyone.active .pickup_item_pkg {
  animation: pkg3 0.4s ease-in-out 1.5s 1 forwards;
}
.item_kenken.active .pickup_item_pkg {
  animation: pkg4 0.4s ease-in-out 1.5s 1 forwards;
}
@keyframes pkg1 {
  0%   { top: 66.1111vw;left: 50%;transform: translateX(-50%); }
  100% { top: 83.75vw;left: 63.6806vw;transform: translateX(0); }
}
@keyframes pkg2 {
  0%   { top: 66.1111vw;left: 50%;transform: translateX(-50%); }
  100% { top: 82.7778vw;left: 9.7222vw;transform: translateX(0); }
}
@keyframes pkg3 {
  0%   { top: 66.1111vw;left: 50%;transform: translateX(-50%); }
  100% { top: 83.3333vw;left: 63.6806vw;transform: translateX(0); }
}
@keyframes pkg4 {
  0%   { top: 66.1111vw;left: 50%;transform: translateX(-50%); }
  100% { top: 82.6389vw;left: 9.7222vw;transform: translateX(0); }
}

.pickup_item.active .pickup_imgs {
  animation: opacity2 1.4s ease-in-out 1 forwards;
}
@keyframes opacity2 {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* open アイコンも img2 の奥行きに合わせて拡縮（img2 が奥のとき小さく） */
.item_jin.active .pickup_img_open,
.item_oyone.active .pickup_img_open {
  animation: opacity2 0.4s ease-in-out 1.5s 1 forwards,
             open_scale_B 7s ease-in-out 1.4s infinite;
}
.item_sakai.active .pickup_img_open,
.item_kenken.active .pickup_img_open {
  animation: opacity2 0.4s ease-in-out 1.5s 1 forwards,
             open_scale_A 7s ease-in-out 1.4s infinite;
}
@keyframes open_scale_A { /* img2=depth_A（奥は50%）と同位相 */
  0%   { transform: scale(1);    }
  43%  { transform: scale(1);    }
  50%  { transform: scale(0.76); }
  93%  { transform: scale(0.76); }
  100% { transform: scale(1);    }
}
@keyframes open_scale_B { /* img2=depth_B（奥は0/100%）と同位相 */
  0%   { transform: scale(0.76); }
  43%  { transform: scale(0.76); }
  50%  { transform: scale(1);    }
  93%  { transform: scale(1);    }
  100% { transform: scale(0.76); }
}
/* open（1回表示：0.4s後に1sで完了＝1.4sで終了）→ その後 z-index入れ替え（3秒ごと）を開始 */
/* jin / oyone … img1 が先に手前 */
.item_jin.active .pickup_img.img1,
.item_oyone.active .pickup_img.img1 {
  animation: open1 1s ease-in-out 1.5s 1 both,
             pickup_depth_A 7s ease-in-out 2.4s infinite;
}
.item_jin.active .pickup_img.img2,
.item_oyone.active .pickup_img.img2 {
  animation: open2 1s ease-in-out 1.5s 1 both,
             pickup_depth_B 7s ease-in-out 2.4s infinite;
}
/* sakai / kenken … img2 が先に手前 */
.item_sakai.active .pickup_img.img2,
.item_kenken.active .pickup_img.img2 {
  animation: open2 1s ease-in-out 1.5s 1 both,
             pickup_depth_A 7s ease-in-out 2.4s infinite;
}
.item_sakai.active .pickup_img.img1,
.item_kenken.active .pickup_img.img1 {
  animation: open1 1s ease-in-out 1.5s 1 both,
             pickup_depth_B 7s ease-in-out 2.4s infinite;
}
.pickup_item.active .pickup_img img {
/*  animation: open3 1s ease-in-out 1.5s 1 forwards;*/
}
@keyframes open1 {
  0%   { clip-path: inset(25% 0 25% 50%); }
  30%  { clip-path: inset(25% 0 25% 50%); }
  100% { clip-path: inset(0); }
}
@keyframes open2 {
  0%   { clip-path: inset(25% 50% 25% 0); }
  30%  { clip-path: inset(25% 50% 25% 0); }
  100% { clip-path: inset(0); }
}
@keyframes open3 {
  0%   { transform: scale(3); }
  30%  { transform: scale(3);opacity: 1; }
  100% { transform: scale(1);opacity: 1; }
}

.pickup_item.active .pickup_item_name {
  animation: opacity2 0.4s ease-in-out 1.6s 1 forwards;
}
.pickup_item.active .pickup_item_info {
  animation: opacity2 0.4s ease-in-out 1.6s 1 forwards;
}

/* awa：出現フェードは1回だけ（awa_show）＋位置ループは透過なしで繰り返し。速度は個別 */
@keyframes awa_show {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.item_jin.active .pickup_pkg_awa.awa1 {
  animation: awa_show 0.6s ease-out 2.4s 1 forwards,
             pop1 2s ease-in-out 2.4s infinite alternate;
}
.item_jin.active .pickup_pkg_awa.awa2 {
  animation: awa_show 0.6s ease-out 2.7s 1 forwards,
             pop2 2.15s ease-in-out 2.7s infinite alternate;
}
.item_jin.active .pickup_pkg_awa.awa3 {
  animation: awa_show 0.6s ease-out 2.5s 1 forwards,
             pop3 1.85s ease-in-out 2.5s infinite alternate;
}
.item_sakai.active .pickup_pkg_awa.awa1 {
  animation: awa_show 0.6s ease-out 2.4s 1 forwards,
             pop4 2s ease-in-out 2.4s infinite alternate;
}
.item_sakai.active .pickup_pkg_awa.awa2 {
  animation: awa_show 0.6s ease-out 2.7s 1 forwards,
             pop5 2.1s ease-in-out 2.7s infinite alternate;
}
.item_sakai.active .pickup_pkg_awa.awa3 {
  animation: awa_show 0.6s ease-out 2.6s 1 forwards,
             pop6 1.9s ease-in-out 2.6s infinite alternate;
}
.item_oyone.active .pickup_pkg_awa.awa1 {
  animation: awa_show 0.6s ease-out 2.8s 1 forwards,
             pop7 2.05s ease-in-out 2.8s infinite alternate;
}
.item_oyone.active .pickup_pkg_awa.awa2 {
  animation: awa_show 0.6s ease-out 2.4s 1 forwards,
             pop8 1.85s ease-in-out 2.4s infinite alternate;
}
.item_oyone.active .pickup_pkg_awa.awa3 {
  animation: awa_show 0.6s ease-out 2.6s 1 forwards,
             pop9 2.2s ease-in-out 2.6s infinite alternate;
}
.item_kenken.active .pickup_pkg_awa.awa1 {
  animation: awa_show 0.6s ease-out 2.5s 1 forwards,
             pop10 1.95s ease-in-out 2.5s infinite alternate;
}
.item_kenken.active .pickup_pkg_awa.awa2 {
  animation: awa_show 0.6s ease-out 2.7s 1 forwards,
             pop11 2.15s ease-in-out 2.7s infinite alternate;
}
.item_kenken.active .pickup_pkg_awa.awa3 {
  animation: awa_show 0.6s ease-out 2.4s 1 forwards,
             pop12 1.8s ease-in-out 2.4s infinite alternate;
}
@keyframes pop1 {
  0%   { top: -10.5556vw;left: -8.8889vw }
  100% { top: -12.2917vw;left: -10.625vw }
}
@keyframes pop2 {
  0%   { top: -3.75vw;left: -6.1806vw }
  100% { top: -4.4444vw;left: -6.875vw }
}
@keyframes pop3 {
  0%   { top: -9.0278vw;left: 18.4028vw }
  100% { top: -10.0694vw;left: 19.4444vw }
}
@keyframes pop4 {
  0%   { top: -4.4444vw;left: -1.6666vw }
  100% { top: -5.1389vw;left: -2.3611vw }
}
@keyframes pop5 {
  0%   { bottom: -3.75vw;left: -4.5834vw }
  100% { bottom: -4.4444vw;left: -5.2778vw }
}
@keyframes pop6 {
  0%   { top: -4.375vw;right: -4.8611vw }
  100% { top: -5.4167vw;right: -5.9028vw }
}
@keyframes pop7 {
  0%   { top: -6.3194vw;left: -3.1944vw }
  100% { top: -7.0139vw;left: -3.8889vw }
}
@keyframes pop8 {
  0%   { top: -8.2638vw;right: -4.8612vw }
  100% { top: -8.9583vw;right: -5.5556vw }
}
@keyframes pop9 {
  0%   { bottom: 3.4028vw;right: -2.0139vw }
  100% { bottom: 4.4444vw;right: -3.0556vw }
}
@keyframes pop10 {
  0%   { top: -7.1528vw;left: -4.8612vw }
  100% { top: -7.8472vw;left: -5.5556vw }
}
@keyframes pop11 {
  0%   { bottom: -0.2083vw;left: -2.6389vw }
  100% { bottom: -0.5556vw;left: -2.9861vw }
}
@keyframes pop12 {
  0%   { top: -5.4862vw;right: -6.0417vw }
  100% { top: -6.1806vw;right: -6.7361vw }
}

@media screen and (max-width: 767px) {

  .concept_kv::before,
  .campaign_icon::before {
    background-size: 100% 16vw;
  }

  .title_item.ani_target,
  .concept_txt .ani_target,
  .sec_campaign.ani_target .campaign_title,
  .sec_campaign.ani_target .campaign_lineup_title,
  .sec_campaign.ani_target .campaign_lineup,
  .sec_product_kv.ani_target,
  .pickup_list.ani_target .product_main,
  .pickup_list.ani_target .pickup_line {
    transform: translateY(2.6889vw);
  }

  @keyframes float_type1 {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-4.5556vw); }
  }

  @keyframes float_type2 {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-4.9722vw); }
  }

  @keyframes float_type3 {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-5.3889vw); }
  }

  @keyframes float_type4 {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-4.7639vw); }
  }

  @keyframes scroll_line_flow {
    0%   { background-position: 0 -4.1667vw; }
    100% { background-position: 0 calc(100% + 4.1667vw); }
  }

  @keyframes title_show1 {
    0%   { top: 42vw;left: 50%;transform: translateX(-50%); }
    100% { top: 16.5vw;left: 10.375vw;transform: translateX(0); }
  }

  @keyframes title_show2 {
    0%   { top: 42vw;left: 50%;transform: translateX(-50%); }
    100% { top: 10.875vw;left: 32vw;transform: translateX(0); }
  }

  @keyframes title_show3 {
    0%   { top: 42vw;left: 50%;transform: translateX(-50%); }
    100% { top: 13vw;left: 6vw;transform: translateX(0); }
  }

  @keyframes title_show4 {
    0%   { top: 42vw;left: 50%;transform: translateX(-50%); }
    100% { top: 15.875vw;left: 30.75vw;transform: translateX(0); }
  }

  @keyframes pkg1 {
    0%   { top: 70vw;left: 50%;transform: translateX(-50%); }
    100% { top: 88.125vw;left: 50%;transform: translateX(-50%); }
  }

  @keyframes pkg2 {
    0%   { top: 70vw;left: 50%;transform: translateX(-50%); }
    100% { top: 84.375vw;left: 50%;transform: translateX(-50%); }
  }

  @keyframes pkg3 {
    0%   { top: 70vw;left: 50%;transform: translateX(-50%); }
    100% { top: 87.875vw;left: 50%;transform: translateX(-50%); }
  }

  @keyframes pkg4 {
    0%   { top: 70vw;left: 50%;transform: translateX(-50%); }
    100% { top: 86.375vw;left: 50%;transform: translateX(-50%); }
  }

  @keyframes open1 {
    0%   { clip-path: inset(25% 0 25% 50%); }
    100% { clip-path: inset(0); }
  }

  @keyframes open2 {
    0%   { clip-path: inset(25% 50% 25% 0); }
    100% { clip-path: inset(0); }
  }

  @keyframes pop1 {
    0%   { top: -10.5556vw;left: -8.8889vw }
    100% { top: -12.2917vw;left: -10.625vw }
  }

  @keyframes pop2 {
    0%   { top: -3.75vw;left: -6.1806vw }
    100% { top: -4.4444vw;left: -6.875vw }
  }

  @keyframes pop3 {
    0%   { top: -9.0278vw;left: 18.4028vw }
    100% { top: -10.0694vw;left: 19.4444vw }
  }

  @keyframes pop4 {
    0%   { top: -4.4444vw;left: -1.6666vw }
    100% { top: -5.1389vw;left: -2.3611vw }
  }

  @keyframes pop5 {
    0%   { bottom: -3.0556vw;left: -4.5834vw }
    100% { bottom: -4.4444vw;left: -5.2778vw }
  }

  @keyframes pop6 {
    0%   { top: -4.375vw;right: -4.8611vw }
    100% { top: -5.4167vw;right: -5.9028vw }
  }

  @keyframes pop7 {
    0%   { top: -6.3194vw;left: -3.1944vw }
    100% { top: -7.0139vw;left: -3.8889vw }
  }

  @keyframes pop8 {
    0%   { top: -8.2638vw;right: -4.8612vw }
    100% { top: -8.9583vw;right: -5.5556vw }
  }

  @keyframes pop9 {
    0%   { bottom: 3.4028vw;right: -2.0139vw }
    100% { bottom: 4.4444vw;right: -3.0556vw }
  }

  @keyframes pop10 {
    0%   { top: -7.1528vw;left: -4.8612vw }
    100% { top: -7.8472vw;left: -5.5556vw }
  }

  @keyframes pop11 {
    0%   { bottom: -0.2083vw;left: -2.6389vw }
    100% { bottom: -0.5556vw;left: -2.9861vw }
  }

  @keyframes pop12 {
    0%   { top: -5.4862vw;right: -6.0417vw }
    100% { top: -6.1806vw;right: -6.7361vw }
  }

}