@charset "utf-8";
/*-------anime------*/

/* 【仕組み】
   js/scroll-animation.js が .js-anime を IntersectionObserver で監視し、
   画面に入ったら .is-visible を付ける。見た目はここで定義する。
   → 動かしたい要素には「効果クラス + js-anime」の2つを付ける。
     例: class="fade-up js-anime"

   初期状態（opacity:0 など）は必ず .js を付けた中に書くこと。
   header.php の先頭で <html> に .js を付けているので、
   JS無効・JSエラー時は初期状態が適用されず、中身がそのまま見える。

   遅延は --a-delay で指定する（.a-d1〜.a-d5）。カードの連続表示などに使う。 */

:root {
  /* 減速が強めのイージング。ふわっと出て静かに止まる。 */
  --a-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.a-d1 {
  --a-delay: 0.12s;
}
.a-d2 {
  --a-delay: 0.24s;
}
.a-d3 {
  --a-delay: 0.36s;
}
.a-d4 {
  --a-delay: 0.48s;
}
.a-d5 {
  --a-delay: 0.6s;
}

/* ===== fade-up : 下から浮き上がる（テキスト・ブロック向け） ===== */
.js .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--a-ease),
    transform 0.8s var(--a-ease);
  transition-delay: var(--a-delay, 0s);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== a-fade : 透過のみ（動かしたくない大きい要素向け） ===== */
.js .a-fade {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: var(--a-delay, 0s);
}
.a-fade.is-visible {
  opacity: 1;
}

/* ===== a-reveal : 画像向け。下から開きつつ、中の画像が引いて止まる ===== */
.js .a-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--a-ease);
  transition-delay: var(--a-delay, 0s);
}
.a-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}
.js .a-reveal img {
  transform: scale(1.12);
  transition: transform 1.3s var(--a-ease);
  transition-delay: var(--a-delay, 0s);
}
.a-reveal.is-visible img {
  transform: scale(1);
}

/* ===== js-split : 1文字ずつ順に浮き上がる（キャッチコピー・英字見出し） ===== */
/* span は JS が生成するので .js ガードは不要 */
.js-split span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
}
.js-split.is-active span {
  animation: fadeUp 0.6s var(--a-ease) forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== a-ct : カーテンワイプ（既存互換 / 明るい背景の上で使う） ===== */
.js .a-ct {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.js .a-ct::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  display: inline-block;
  background: #fff;
  top: 0;
  z-index: 5;
  transition: 0.8s;
  transition-delay: 0.4s;
}
.js .a-left::after {
  left: 0;
}
.a-left.is-visible::after {
  left: -100vw;
}
.js .a-right::after {
  right: 0;
}
.a-right.is-visible::after {
  right: -100vw;
}

/* ===== 動きを減らす設定の環境では、すべて最終状態で即表示する ===== */
@media (prefers-reduced-motion: reduce) {
  .js .fade-up,
  .js .a-fade,
  .js .a-reveal,
  .js .a-reveal img {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .js-split span {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .js .a-ct::after {
    display: none;
  }
}