/* ----------------------------------------
   ベース：バナーコンテナ
   ---------------------------------------- */
.service-banner--animated {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 600;
  overflow: hidden;
}

/* ----------------------------------------
   背景レイヤー
   ---------------------------------------- */
.sb-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sb-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------
   前景レイヤー 共通
   ---------------------------------------- */
.sb-layer {
  position: absolute;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.sb-layer img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* ----------------------------------------
   ① スタッフ（右側：フェードイン）
   ---------------------------------------- */
.sb-staff {
  right: 5%;
  bottom: 0;
  height: 85%;
  z-index: 2;
  animation: sb-fadein 0.9s ease forwards;
  animation-delay: 0.3s;
}

/* ----------------------------------------
   ① スタッフa（スタッフの前面：フェードイン）
   ---------------------------------------- */
.sb-staffa {
  right: 5%;
  bottom: 9%;
  height: 85%;
  z-index: 3;
  animation: sb-fadein 0.9s ease forwards;
  animation-delay: 2.5s;   /* sb-staff より少し遅れてフェードイン */
}

/* ----------------------------------------
   ② 二人組（左からスライド＋スライド中も揺れ、終了後ふわふわ）
   ---------------------------------------- */
.sb-duo {
  left: 8%;
  bottom: 0;
  height: 80%;
  z-index: 2;
  animation:
    sb-walk-in-float 2.2s cubic-bezier(0.25, 0.0, 0.35, 1.0) forwards,
    sb-float         3s ease-in-out infinite;
  animation-delay: 0.8s, 3.0s;
}

/* ----------------------------------------
   ③ テキスト（最初から最前面に表示・アニメーションなし）
   ---------------------------------------- */
.sb-text {
  right: 4%;
  bottom: -3%;
  height: 30%;
  z-index: 10;
  opacity: 1;   /* 最初から表示 */
}

/* ----------------------------------------
   キーフレーム
   ---------------------------------------- */

/* フェードイン（スタッフ・スタッフa用） */
@keyframes sb-fadein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 二人組：スライドしながら細かく揺れる複合アニメーション */
@keyframes sb-walk-in-float {
  0%   { opacity: 0;   transform: translateX(-160px) translateY(0px); }
  8%   { opacity: 1; }
  20%  { transform: translateX(-128px) translateY(-4px); }
  35%  { transform: translateX(-96px)  translateY(0px); }
  50%  { transform: translateX(-64px)  translateY(-4px); }
  65%  { transform: translateX(-32px)  translateY(0px); }
  80%  { transform: translateX(-12px)  translateY(-3px); }
  90%  { transform: translateX(-4px)   translateY(0px); }
  100% { opacity: 1;   transform: translateX(0px)    translateY(0px); }
}

/* スライド後のふわふわ */
@keyframes sb-float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* ----------------------------------------
   レスポンシブ（スマホ）
   ---------------------------------------- */
@media screen and (max-width: 768px) {

  .service-banner--animated {
    aspect-ratio: 375 / 220;
  }

  /* ① スタッフ */
  .sb-staff {
    right: 0;
    bottom: 0;
    height: auto;
    width: 42%;
  }
  .sb-staff img {
    height: auto;
    width: 100%;
  }

  /* ① スタッフa */
  .sb-staffa {
    right: 0;
    bottom: 0;
    height: auto;
    width: 42%;
  }
  .sb-staffa img {
    height: auto;
    width: 100%;
  }

  /* ② 二人組 */
  .sb-duo {
    left: 5%;
    bottom: 0;
    height: auto;
    width: 44%;
  }
  .sb-duo img {
    height: auto;
    width: 100%;
  }

  /* ③ テキスト */
  .sb-text {
    right: 2%;
    bottom: 4%;
    height: auto;
    width: 42%;
  }
  .sb-text img {
    height: auto;
    width: 100%;
  }

  /* SP では移動距離・揺れ幅を小さく */
  @keyframes sb-walk-in-float {
    0%   { opacity: 0;   transform: translateX(-80px) translateY(0px); }
    8%   { opacity: 1; }
    20%  { transform: translateX(-64px) translateY(-2px); }
    35%  { transform: translateX(-48px) translateY(0px); }
    50%  { transform: translateX(-32px) translateY(-2px); }
    65%  { transform: translateX(-16px) translateY(0px); }
    80%  { transform: translateX(-6px)  translateY(-1px); }
    90%  { transform: translateX(-2px)  translateY(0px); }
    100% { opacity: 1;   transform: translateX(0px)   translateY(0px); }
  }

  @keyframes sb-float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-4px); }
    100% { transform: translateY(0px); }
  }
}