@charset "utf-8";
/* CSS Document */

.delay01 { animation-delay:0.1s; }
.delay02 { animation-delay:0.2s; }
.delay03 { animation-delay:0.3s; }
.delay04 { animation-delay:0.4s; }
.delay05 { animation-delay:0.5s; }
.delay06 { animation-delay:0.6s; }
.delay07 { animation-delay:0.7s; }
.delay08 { animation-delay:0.8s; }
.delay09 { animation-delay:0.9s; }
.delay10 { animation-delay:1.0s; }

.delay11 { animation-delay:1.1s; }
.delay12 { animation-delay:1.2s; }
.delay13 { animation-delay:1.3s; }
.delay14 { animation-delay:1.4s; }
.delay15 { animation-delay:1.5s; }
.delay16 { animation-delay:1.6s; }
.delay17 { animation-delay:1.7s; }
.delay18 { animation-delay:1.8s; }
.delay19 { animation-delay:1.9s; }
.delay20 { animation-delay:2.0s; }

/*フワッと表示*/
.fadeup { opacity: 0; }
.fadeup.add-show { animation-name: fadeupAnime; animation-duration:.8s; animation-fill-mode:forwards; }
@keyframes fadeupAnime{
  from {
	  opacity: 0;
	  transform: translateY(100px);
  }
  to {
	  opacity: 1;
	  transform: translateY(0);
  }
}

/* 画像ふわっとスケール表示 */
.fadeup-scale { opacity: 0; transform: scale(0.8); }
.fadeup-scale.add-show { animation-name: fadeupScaleAnime; animation-duration: .8s; animation-fill-mode: forwards; }
@keyframes fadeupScaleAnime {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* じんわり縮小フェードイン */
.fadeup-scale-down { opacity: 0; transform: scale(1.05);}
.fadeup-scale-down.add-show { animation-name: fadeupScaleDownAnime; animation-duration: .8s; animation-fill-mode: forwards;}
@keyframes fadeupScaleDownAnime {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* テキストスライドイン */
.text-slide { width: fit-content; overflow: hidden; transform: translateX(-120%); }
.text-slide span { display: block; transform: translateX(100%); }
.text-slide.add-show { transform: translateX(0); transition: transform cubic-bezier(0.74, 0, 0.24, 0.99) 1.1s; }
.text-slide.add-show span { transform: translateX(0); transition: transform cubic-bezier(0.74, 0, 0.24, 0.99) 1.1s; }

/* テキストアップ */
.textUp { position: relative; overflow: hidden; display: inline-block; color: transparent; opacity: 0; transform: translateY(40px); /* 下から */ transition: opacity 0.6s ease-out, color 0s 0.6s; padding-bottom: 0.2em; /* 調整可能 */}
/* マスク */
.textUp::after { content: ""; position: absolute; inset: 0; background: #000; transform: translateY(100%); }
/* --- 表示時 --- */
.textUp.in-view { color: #000; opacity: 1; transform: translateY(0); transition: opacity 0.6s ease-out, transform 0.9s cubic-bezier(0.20, 0.65, 0.25, 1), color 0s 0.6s; }
/* マスクアニメーション */
.textUp.in-view::after {
  animation: maskSlide 0.9s cubic-bezier(0.70, 0, 0.20, 1) forwards;
}

/* --- Keyframes --- */
@keyframes maskSlide {
  0% {
    transform: translateY(100%);
  }
  60% {
    transform: translateY(-5%); /* 少しオーバーしてスピード感 */
  }
  100% {
    transform: translateY(-105%); /* 上に抜ける */
  }
}

.view-anch.view { position: relative; overflow: hidden; }
.view-anch.view:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #fff; z-index: 10; pointer-events: none; }
.view-anch.view.in-view::after { animation: maskReveal 1s ease forwards;  }
@keyframes maskReveal {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}