/* =========================================================
   アニメーション定義
   ========================================================= */
/* 1. スクロール時に下からフェードインするアニメーション */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. 矢印が上下にゆっくり繰り返すアニメーション */
@keyframes bounceDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px); 
  }
}

/* 最初はテキスト・矢印・画像をすべて非表示にしておく */
.sysai-block p.sysai-text,
.sysai-block .sysai-arrow,
.sysai-block .sysai-img {
  opacity: 0;
}

/* 1. テキストのアニメーション表示 */
.sysai-block.is-animated p.sysai-text {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  animation: fadeInUp 0.8s ease forwards;
  margin: 60px auto 20px;
}

/* 2. 矢印アイコンのスタイル（PCサイズ） */
.sysai-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  margin: 1.5rem auto 1rem;
}

.sysai-arrow img {
  width: 40px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 画面に入った時：フェードイン（0.8s）と、その後の無限ループ上下移動（1.5s間隔）を同時に指定 */
.sysai-block.is-animated .sysai-arrow {
  animation: 
    fadeInUp 0.8s ease 0.15s forwards,
    bounceDown 1.5s ease-in-out 0.95s infinite; /* フェードインが終わる0.95秒後からループ開始 */
}

/* 3. 画像エリアのアニメーション */
.sysai-block.is-animated .sysai-img {
  text-align: center;
  margin-top: 1.5rem;
  animation: fadeInUp 0.8s ease 0.3s forwards; 
}

/* 画像ホバー時のズームイン */
.sysai-img a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}

.sysai-img img {
  transition: transform 0.4s ease;
  width: 100%;
}

.sysai-img a:hover img {
  transform: scale(1.03);
}

/* 区切り線 */
.sysai-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 100px auto;
  width: 100%;
}

/* =========================================================
   レスポンシブ・スマホ用調整（768px以下）
   ========================================================= */
@media (max-width: 768px) {
  /* スマホの画面幅ではPC用の不自然な改行を消す */
  .sysai-text br {
    display: none;
  }

  .sysai-block.is-animated p.sysai-text {
    font-size: 18px;
    margin: 30px auto 10px;
  }

  /* スマホでの矢印の余白調整 */
  .sysai-arrow {
    margin: 0.8rem auto 0.4rem;
  }

  /* スマホ用の矢印サイズ */
  .sysai-block .sysai-arrow img {
    width: 18px !important;
    height: auto;
  }

  .sysai-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 60px auto;
  width: 100%;
}
}