/**
 * Growin風アニメーション（Aurant向け調整）
 * 参照: growin-html-source/growin-animations.css
 */

/* ============================================
   @keyframes
   ============================================ */
@keyframes growin-color_in_out {
  0%   { width: 0%; left: 0%; }
  50%  { width: 100%; left: 0%; }
  100% { width: 0%; left: 100%; }
}

@keyframes growin-fade-up {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================
   fade_container（スクロール連動フェード・JSで .is-visible 付与）
   ============================================ */
.fade_container {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1),
              transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.fade_container.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延付き（子要素用） */
.fade_container--delay1 { transition-delay: 0.1s; }
.fade_container--delay2 { transition-delay: 0.2s; }
.fade_container--delay3 { transition-delay: 0.3s; }

/* ============================================
   anim_img_color（画像オーバーレイ・左→右→消）
   ============================================ */
.anim_img_color {
  position: relative;
  overflow: hidden;
}
.anim_img_color::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--flow-step3-bg, #fff7ed);
  pointer-events: none;
}
.anim_img_color.is-visible::after {
  animation: growin-color_in_out 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* ============================================
   anim_img_scale（画像ズーム用・overflow hidden）
   ============================================ */
.anim_img_scale {
  overflow: hidden;
}
.anim_img_scale img {
  transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (hover: hover) {
  .anim_img_scale:hover img {
    transform: scale(1.05);
  }
}

/* ============================================
   汎用: リンクホバー右スライド（Growin nav風）
   ============================================ */
.link-hover-slide {
  transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (hover: hover) {
  .link-hover-slide:hover {
    transform: translateX(8px);
  }
}

/* ============================================
   汎用: 画像ズームホバー（Growin contact風）
   ============================================ */
.img-zoom-hover {
  overflow: hidden;
}
.img-zoom-hover img {
  transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (hover: hover) {
  .img-zoom-hover:hover img {
    transform: scale(1.05);
  }
}

/* ============================================
   セクションCTA・ボタンホバー
   ============================================ */
.section-cta-link,
.hero-cta,
.service-flow-stage a {
  transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}