/* フェードアップ アニメーション */
/* 右からフェードイン */
.js-fadein-right {
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1), transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fadein-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 背景のみ右から展開（コンテンツはそのまま） */
.js-bg-slide-right {
  position: relative;
  background: transparent !important;
}
.js-bg-slide-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f7f7f7;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-bg-slide-right.is-visible::before {
  transform: scaleX(1);
}
.js-bg-slide-right > * {
  position: relative;
}

/* 背景のみ下から展開（コンテンツはそのまま） */
.js-bg-slide-up {
  position: relative;
  background: transparent !important;
}
.js-bg-slide-up::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f7f7f7;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-bg-slide-up.is-visible::before {
  transform: scaleY(1);
}
.js-bg-slide-up > * {
  position: relative;
}
.js-bg-slide-up .js-fadein {
  transition-delay: 0.45s;
}

/* 下層ページFV：ページロード時にコンテナ全体（写真＋テキスト）を下からフェードイン */
@keyframes fvFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.js-fv-fadein {
  animation: fvFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.15s;
}

/* 左からフェードイン */
.js-fadein-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.js-fadein-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}


.js-fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.js-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 代表メッセージ：テキストを写真より少し遅らせて下から */
.js-fadein--message {
  transition-delay: 0.25s;
}

/* SP/TB: js-bg-slide-up のグレー背景アニメーションを無効化 */
@media (max-width: 999px) {
  .js-bg-slide-up {
    background: unset !important;
  }
  .js-bg-slide-up::before {
    display: none;
  }
}

/* SP: サービスカードのペアアニメーションを無効化（常に表示） */
@media (max-width: 999px) {
  .-service_top-area-list.js-fadein {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}