/* アニメーション共通（最初は透明＋オフセット） */
.anm {
  opacity: 0;
  /* transform: translateY(0px);  */
  /* transform: translateY(-50%); */
  transition: opacity 0.8s ease, transform 0.8s ease;
}
/* 左から入る場合 */
.anm-left {
  transform: translateX(-40px);
}

/* 右から入る場合 */
.anm-right {
  transform: translateX(40px);
}

/* 下から入る場合 */
.anm-up {
  transform: translateY(40px);
}

/* 表示時（IntersectionObserverで付与） */
.anm-visible {
  opacity: 1;
  transform: translate(0,0);
}

.anm.anm-fade {
  opacity: 0;
  /* transform: translateY(20px); */
  transition: all 0.8s ease-out;
}
.anm.anm-fade.anm-visible {
  opacity: 1;
}

@media screen and (max-width: 925px),
  only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 
    .anm.anm-fade-sp {
        opacity: 0;
        transition: all 0.8s ease-out;
        transform: translate(0,0) !important;
    }
       .anm.anm-fade-sp.anm-visible {
        opacity: 1;
    }




  }