/***********************************************
アニメーション
***********************************************/
img.lazyload {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
img.lazyloaded {
    opacity: 1;
}

:root {
    --mask-duration: 0.5s;
    
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Left: 左から右へ出現 (元のコード)
   右側を100%カットして隠す → 0%にする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.maskLeft {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--mask-duration) ease-in;
}

.maskLeft.move {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Right: 右から左へ出現
   左側を100%カットして隠す → 0%にする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.maskRight {
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--mask-duration) ease-in;
}

.maskRight.move {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Top: 上から下へ出現
   下側を100%カットして隠す → 0%にする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.maskTop {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--mask-duration) ease-in;
}

.maskTop.move {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Bottom: 下から上へ出現
   上側を100%カットして隠す → 0%にする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.maskBottom {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--mask-duration) ease-in;
}

.maskBottom.move {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   共通設定: Pseudo Mask (pm)
   Transitionや初期opacityをまとめて設定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pm-l::before, .pm-l::after,
.pm-r::before, .pm-r::after,
.pm-t::before, .pm-t::after,
.pm-b::before, .pm-b::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2;
  opacity: 0;
  transition: clip-path 1s ease-in, opacity 0.3s; /* opacityも少しアニメーションさせると自然 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   発火時 (.moveがついた時)
   全方向共通でマスクを解除
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pm-l.move::before, .pm-l.move::after,
.pm-r.move::before, .pm-r.move::after,
.pm-t.move::before, .pm-t.move::after,
.pm-b.move::before, .pm-b.move::after {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   各方向の初期状態（隠し方）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Left: 左から右へ */
.pm-l::before, .pm-l::after {
  clip-path: inset(0 100% 0 0);
}

/* Right: 右から左へ */
.pm-r::before, .pm-r::after {
  clip-path: inset(0 0 0 100%);
}

/* Top: 上から下へ */
.pm-t::before, .pm-t::after {
  clip-path: inset(0 0 100% 0);
}

/* Bottom: 下から上へ */
.pm-b::before, .pm-b::after {
  clip-path: inset(100% 0 0 0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   共通設定: Move Animation (mv)
   初期状態は透明
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mv-u, .mv-d, .mv-l, .mv-r {
  opacity: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   発火時 (.moveがついた時)
   全方向共通で元の位置(0,0)に戻して表示
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mv-u.move, .mv-d.move, .mv-l.move, .mv-r.move {
  opacity: 1;
  transform: translate(0, 0);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   各方向の初期位置（どこから動くか）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Up: 下から上へ (Y軸 15% → 0) */
.mv-u {
  transform: translate(0, 15%);
}

/* Down: 上から下へ (Y軸 -15% → 0) */
.mv-d {
  transform: translate(0, -15%);
}

/* Left: 右から左へ (X軸 15% → 0) */
.mv-l {
  transform: translate(15%, 0);
}

/* Right: 左から右へ (X軸 -15% → 0) */
.mv-r {
  transform: translate(-15%, 0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   フェードイン (fadeIn)
   透明 → 不透明
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fadeIn {
    opacity: 0; 
    transition: 1s ease-in;
}

.fadeIn.move {
    opacity: 1; 
}

@keyframes fadeIn {
    to {
		opacity: 1;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   フェードイン（疑似要素）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.p_fadeIn::before,
.p_fadeIn::after {
    opacity: 0; 
    transition: 1s ease-in;
}

.p_fadeIn.move::before,
.p_fadeIn.move::after {
    opacity: 1
}

/* 初期状態 */
.stagger-pseudo::before,
.stagger-pseudo::after {
  content: "";
  opacity: 0;
  transition: opacity var(--pseudo-duration, 1s) ease;
}

/* before用の設定 */
.stagger-pseudo::before {
  transition-delay: var(--b-delay, 0s);
}

/* after用の設定 */
.stagger-pseudo::after {
  transition-delay: var(--a-delay, 0.5s);
}

/* moveがついたら出現 */
.stagger-pseudo.move::before,
.stagger-pseudo.move::after {
  opacity: 1;
}