/***********************************************
アニメーション
***********************************************/
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);
}

.p_fade-l::before,
.p_fade-l::after {
    opacity: 0;
    transform: translateY(-23vw);
    
}

/*.p_fade-l::before {
    transform: translateY(-23vw);
}*/

/*.p_fade-l::after {
    transform: translateY(23vw);
}*/

.p_fade-l.move::before,
.p_fade-l.move::after {
    opacity: 1;
    /*transform: translate(0, 0) rotate(0deg);*/
}

/* 左上から */
.p_fade-l.move::before,
.p_fade-l.move::after{
    animation: featherDrop 1.5s ease-in forwards;
   
}

.p_fade-l.move::afte {
    animation-delay: 1s;
}

/* 右上から */
/*.p_fade-l.move::after {
    animation: featherDrop 4s ease-in .3s forwards;
}*/


/* 左上 */
@keyframes featherDrop {
    0% {
        transform: translateY(-23vw);
        opacity: 0;
    }
    
    25% {
        opacity: .25;  
    }
    
    50% {
        opacity: .5;
    }
    
    75% {
        opacity: .75;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 右上 */
/*@keyframes featherDropRight {
    0% {
        transform: translate(23vw, -20vh) rotate(30deg);
        opacity: 0;
    }

    60% {
        transform: translate(-10px, 10px) rotate(-10deg);
        opacity: 1;
    }

    80% {
        transform: translate(5px, -5px) rotate(5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}*/

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   共通設定: 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;
    }
}