@charset "utf-8";

body,
.wrap {
  overflow-x: hidden;
}

/* ==============================================
   Scroll Animation
   ============================================== */

/* ------------------------------------------
   1. フェードアップ（下から）
   ------------------------------------------ */
.main_k-next h1,
.K-next_read h3,
.K-next_btn_wrapp .point,
.tip_header_wrapp h2 {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.main_k-next h1.is-animated,
.K-next_read h3.is-animated,
.K-next_btn_wrapp .point.is-animated,
.tip_header_wrapp h2.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------
   2. prog_box / flow_box：外から中央へ
   ------------------------------------------ */
.prog_box .prog_text,
.flow_box .flow_text {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.prog_box figure,
.flow_box figure {
  opacity: 0;
  transform: translateX(70px);
  /* 右側をわずかに遅らせて交差感を出す */
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.prog_box.is-animated .prog_text,
.flow_box.is-animated .flow_text,
.prog_box.is-animated figure,
.flow_box.is-animated figure {
  opacity: 1;
  transform: translateX(0);
}

/* ------------------------------------------
   3. #klip 内の p / figure
   ------------------------------------------ */
/* p：右から左へ */
/*
#klip .program > p:not(.bubble) {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
*/

/* figure：左から右へ */
#klip .program > figure.mg_t_1 {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/*
#klip .program > p:not(.bubble).is-animated,
#klip .program > figure.mg_t_1.is-animated {
  opacity: 1;
  transform: translateX(0);
}
  */

/* ------------------------------------------
   4. title_wrapp：黄色バー → テキスト出現
   ------------------------------------------ */
.title_wrapp {
  position: relative;
  overflow: hidden;
}

/* 黄色バー本体（::before） */
.title_wrapp::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #FFDD00; /* バーの色：必要に応じて変更 */
  z-index: 2;
  clip-path: inset(0 100% 0 0); /* 初期状態：非表示 */
  pointer-events: none;
}

/* テキスト要素：初期状態は非表示 */
.title_wrapp > * {
  position: relative;
  z-index: 1;
  opacity: 0;
}

/* バー発火 */
.title_wrapp.bar-active::before {
  animation: titleBarSweep 0.75s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* テキスト出現 */
.title_wrapp.text-show > * {
  opacity: 1;
  transition: opacity 0.4s ease;
}

@keyframes titleBarSweep {
  0%   { clip-path: inset(0 100% 0 0); } /* 右端から隠れている */
  46%  { clip-path: inset(0 0% 0 0);   } /* 全面を覆う         */
  54%  { clip-path: inset(0 0% 0 0);   } /* 一瞬停止           */
  100% { clip-path: inset(0 0 0 100%); } /* 左端へ抜けていく   */
}



/* point：translateYなし（その場フェードイン） */
.K-next_btn_wrapp .point {
  opacity: 0;
  transition: opacity 0.7s ease;
  /* transform は指定しない */
}

.K-next_btn_wrapp .point.is-animated {
  opacity: 1;
}

/* .year：フェードアップ */
.year {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.year.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* #klip figure：mg_b_3 付きのみ対象（klip_main2.jpg は除外） */
#klip .program > figure.mg_t_1.mg_b_3 {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

#klip .program > figure.mg_t_1.mg_b_3.is-animated {
  opacity: 1;
  transform: translateX(0);
}