@charset "UTF-8";

/* ==========================================================================
   スクロールインでのフェードアップ
   page-contact.php の .js-inview / .fadeup と同じ挙動・同じ見た目
   ========================================================================== */

.js-inview.fadeup {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s .2s ease-out, transform .4s .2s ease-out;
}

.js-inview.fadeup.inview {
  opacity: 1;
  transform: translateY(0);
}

/* csr.js が .csr-items の直後に生成するスクロールバーは兄弟要素なので、
   .csr-items と一緒にフェードさせないと単独で先に見えてしまう */
.csr-items.js-inview.fadeup + .csr-scrollbar {
  opacity: 0;
  transition: opacity .4s .2s ease-out;
}

.csr-items.js-inview.fadeup.inview + .csr-scrollbar {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-inview.fadeup,
  .js-inview.fadeup.inview,
  .csr-items.js-inview.fadeup + .csr-scrollbar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}