@charset "utf-8";

/* ===== COLLECTION: ANIMATIONS ===== */

/* --- KV reveal: 擬似要素が退いてKVが現れる --- */
.collection_kv_frame {
  position: relative;
}
.collection_kv_frame.no-reveal-anim::before {
  transition: none !important;
}
.collection_kv_frame::before {
  content: "";
  position: absolute;
  inset: var(--checker-pad, 0);
  background: #bb8dc0;
  z-index: 2;
  /* SP: 上から下へ消える */
  transform-origin: bottom center;
  transition: transform 1s cubic-bezier(0.25, 0.25, 0.47, 1) 0.3s;
  will-change: transform;
}
.collection_kv {
  z-index: 1;
}
.collection_kv_frame.show::before {
  transform: scaleY(0);
}
/* PC用はscaleXに上書き */

/* --- scroll-in: スクロールフェードイン --- */
.scroll-in-left {
  opacity: 0;
  transform: translate(calc(-50% - 3rem), -50%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-in-right {
  opacity: 0;
  transform: translate(calc(-50% + 3rem), -50%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-in-bottom {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 3rem));
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-in-left.show,
.scroll-in-right.show,
.scroll-in-bottom.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}
/* collection_ac でない要素: 個別にベースtransformを指定 */
.collection_knapsack_dots.scroll-in-left {
  opacity: 0;
  transform: translateX(-50%) translateX(-3rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.collection_knapsack_dots.scroll-in-left.show {
  opacity: 1;
  transform: translateX(-50%);
}
.collection_bottom_funny.scroll-in-bottom {
  opacity: 0;
  transform: translateX(-50%) translateY(3rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.collection_bottom_funny.scroll-in-bottom.show {
  opacity: 1;
  transform: translateX(-50%);
}
.collection_coincase_dot_circle.scroll-in-bottom {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.collection_coincase_dot_circle.scroll-in-bottom.show {
  opacity: 1;
  transform: none;
}
.collection_tshirt_pink.scroll-in-right {
  opacity: 0;
  transform: translateX(3rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.collection_tshirt_pink.scroll-in-right.show {
  opacity: 1;
  transform: none;
}
.collection_shoulder_knapsack_wrap.scroll-in-bottom {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.collection_shoulder_knapsack_wrap.scroll-in-bottom.show {
  opacity: 1;
  transform: none;
}
/* delay variations */
.scroll-in-left.delay-1.show,
.scroll-in-right.delay-1.show,
.scroll-in-bottom.delay-1.show { transition-delay: 0.15s; }
.scroll-in-left.delay-2.show,
.scroll-in-right.delay-2.show,
.scroll-in-bottom.delay-2.show { transition-delay: 0.3s; }
.scroll-in-left.delay-3.show,
.scroll-in-right.delay-3.show,
.scroll-in-bottom.delay-3.show { transition-delay: 0.45s; }

/* --- scroll-in-stagger: 親がshowになったら中の要素が順番に表示 --- */
.scroll-in-stagger [data-stagger] {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.scroll-in-stagger.show [data-stagger] {
  opacity: 1;
}

/* --- 星キラキラ: 左右カクカク回転 --- */
@keyframes star_rock {
  0%, 100% { transform: translate(-50%, -50%) rotateZ(15deg); }
  50%      { transform: translate(-50%, -50%) rotateZ(-15deg); }
}
.collection_kv_star,
.collection_tshirt_pink_star,
.collection_knapsack_star {
  animation: star_rock steps(1) infinite;
}
.collection_kv_star--1,
.collection_tshirt_pink_star--1 { animation-duration: 3s; }
.collection_kv_star--2,
.collection_tshirt_pink_star--2 { animation-duration: 2.5s; }
.collection_kv_star--3,
.collection_tshirt_pink_star--3 { animation-duration: 4s; }
.collection_kv_star--4,
.collection_tshirt_pink_star--4 { animation-duration: 3.5s; }
.collection_knapsack_star { animation-duration: 3s; }

/* 星サイズ修正 SP */
.collection_kv_star picture,
.collection_kv_star img,
.collection_tshirt_pink_star picture,
.collection_tshirt_pink_star img,
.collection_knapsack_star picture,
.collection_knapsack_star img {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- 雲ふわふわ SP base --- */
@keyframes cloud_float_y {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-.25rem); }
}
@keyframes cloud_float_x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(0.12rem); }
}
/* 雲 */
.collection_kv_cloud--1 { animation: cloud_float_y 5s ease-in-out infinite; }
.collection_kv_cloud--1 picture,
.collection_kv_cloud--1 img { animation: cloud_float_x 7s ease-in-out infinite; }

.collection_kv_cloud--2 { animation: cloud_float_y 6s ease-in-out 1s infinite; }
.collection_kv_cloud--2 img { animation: cloud_float_x 8s ease-in-out 0.5s infinite; }

.collection_intro_cloud { animation: cloud_float_y 7s ease-in-out infinite; }
.collection_intro_cloud picture,
.collection_intro_cloud img { animation: cloud_float_x 9s ease-in-out infinite; }

.collection_tshirt_clouds { animation: cloud_float_y 5.5s ease-in-out 0.5s infinite; }
.collection_tshirt_clouds picture,
.collection_tshirt_clouds img { animation: cloud_float_x 7.5s ease-in-out infinite; }

.collection_tshirt_pink_cloud--1 { animation: cloud_float_y 6s ease-in-out 0.3s infinite; }
.collection_tshirt_pink_cloud--1 picture,
.collection_tshirt_pink_cloud--1 img { animation: cloud_float_x 8s ease-in-out 1s infinite; }

.collection_tshirt_pink_cloud--2 { animation: cloud_float_y 5s ease-in-out 1.5s infinite; }
.collection_tshirt_pink_cloud--2 picture,
.collection_tshirt_pink_cloud--2 img { animation: cloud_float_x 7s ease-in-out 0.8s infinite; }

.collection_coincase_photo_cloud--1 { animation: cloud_float_y 6.5s ease-in-out infinite; }
.collection_coincase_photo_cloud--1 picture,
.collection_coincase_photo_cloud--1 img { animation: cloud_float_x 8.5s ease-in-out infinite; }

/* --- 飛行機・キャラクター SP base --- */
@keyframes float_y {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-.35rem); }
}
@keyframes float_x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(0.18rem); }
}

.collection_intro_brave { animation: float_y 4s ease-in-out infinite; }
.collection_intro_brave picture,
.collection_intro_brave img { animation: float_x 5.5s ease-in-out infinite; }

.collection_tshirt_twins { animation: float_y 4.5s ease-in-out 0.5s infinite; }
.collection_tshirt_twins picture,
.collection_tshirt_twins img { animation: float_x 6s ease-in-out infinite; }

.collection_kv_twins { animation: float_y 3.5s ease-in-out infinite; }
.collection_kv_twins img { animation: float_x 5s ease-in-out infinite; }

/* ===== PC (DESKTOP) ===== */
@media (min-width: 769px) {
  /* KV clip-path: PC (左→右) */
  /* PC: 擬似要素を左から右へ消える */
  .collection_kv_frame::before {
    transform-origin: right center;
    transition: transform 1.2s cubic-bezier(0.25, 0.25, 0.47, 1) 0.3s;
  }
  .collection_kv_frame.show::before {
    transform: scaleX(0);
  }

  /* 星サイズ修正不要 PC */
  .collection_kv_star picture,
  .collection_kv_star img,
  .collection_tshirt_pink_star picture,
  .collection_tshirt_pink_star img,
  .collection_knapsack_star picture,
  .collection_knapsack_star img {
    width: auto;
    height: auto;
    display: block;
  }

  /* 雲ふわふわ PC (振れ幅大きめ) */
  @keyframes cloud_float_y_pc {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-.4rem); }
  }
  @keyframes cloud_float_x_pc {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(0.2rem); }
  }
  .collection_kv_cloud--1 { animation: cloud_float_y_pc 5s ease-in-out infinite; }
  .collection_kv_cloud--1 picture,
  .collection_kv_cloud--1 img { animation: cloud_float_x_pc 7s ease-in-out infinite; }

  .collection_kv_cloud--2 { animation: cloud_float_y_pc 6s ease-in-out 1s infinite; }
  .collection_kv_cloud--2 img { animation: cloud_float_x_pc 8s ease-in-out 0.5s infinite; }

  .collection_intro_cloud { animation: cloud_float_y_pc 7s ease-in-out infinite; }
  .collection_intro_cloud picture,
  .collection_intro_cloud img { animation: cloud_float_x_pc 9s ease-in-out infinite; }

  .collection_tshirt_clouds { animation: cloud_float_y_pc 5.5s ease-in-out 0.5s infinite; }
  .collection_tshirt_clouds picture,
  .collection_tshirt_clouds img { animation: cloud_float_x_pc 7.5s ease-in-out infinite; }

  .collection_tshirt_pink_cloud--1 { animation: cloud_float_y_pc 6s ease-in-out 0.3s infinite; }
  .collection_tshirt_pink_cloud--1 picture,
  .collection_tshirt_pink_cloud--1 img { animation: cloud_float_x_pc 8s ease-in-out 1s infinite; }

  .collection_tshirt_pink_cloud--2 { animation: cloud_float_y_pc 5s ease-in-out 1.5s infinite; }
  .collection_tshirt_pink_cloud--2 picture,
  .collection_tshirt_pink_cloud--2 img { animation: cloud_float_x_pc 7s ease-in-out 0.8s infinite; }

  .collection_coincase_photo_cloud--1 { animation: cloud_float_y_pc 6.5s ease-in-out infinite; }
  .collection_coincase_photo_cloud--1 picture,
  .collection_coincase_photo_cloud--1 img { animation: cloud_float_x_pc 8.5s ease-in-out infinite; }

  /* 飛行機・キャラクター PC (振れ幅大きめ) */
  @keyframes float_y_pc {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-.6rem); }
  }
  @keyframes float_x_pc {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(0.3rem); }
  }

  .collection_intro_brave { animation: float_y_pc 4s ease-in-out infinite; }
  .collection_intro_brave picture,
  .collection_intro_brave img { animation: float_x_pc 5.5s ease-in-out infinite; }

  .collection_tshirt_twins { animation: float_y_pc 4.5s ease-in-out 0.5s infinite; }
  .collection_tshirt_twins picture,
  .collection_tshirt_twins img { animation: float_x_pc 6s ease-in-out infinite; }

  .collection_kv_twins { animation: float_y_pc 3.5s ease-in-out infinite; }
  .collection_kv_twins img { animation: float_x_pc 5s ease-in-out infinite; }
}