@charset "utf-8";

/*======================================================
	ペコっと君
======================================================*/
/* ダウンロードボタン全体のレイアウト設定 */
.pekot-download-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333; /* 文字の色（お好みに合わせて変更してください） */
  font-weight: bold;
  cursor: pointer;
}

/* ペコット君の画像設定とアニメーションの紐付け */
.pekot-img {
  width: 150px; /* 画像の表示サイズ（ホームページに合わせて調整してください） */
  height: auto;
  /* アニメーション名「peko-peko」、4秒周期、無限ループ、滑らかな動きを設定 */
  animation: peko-peko 4s ease-in-out infinite;
  /* お辞儀の軸を「画像の底辺（中央）」に設定することで、リアルなお辞儀になります */
  transform-origin: bottom center;
}

/* マウスを乗せたときに少し明るくする演出（クリックしやすさの向上） */
.pekot-download-btn:hover .pekot-img {
  filter: brightness(1.05);
}

.pekot-text {
  margin-top: 8px;
  font-size: 14px;
}

/* --- お辞儀アニメーションの具体的な動き（4秒間のタイムライン） --- */
@keyframes peko-peko {
  0%   { transform: scaleY(1) translateY(0); }
  /* 1回目のお辞儀（少し縦に縮みながら前に傾くイメージ） */
  10%  { transform: scaleY(0.85) translateY(5px) rotateX(10deg); }
  20%  { transform: scaleY(1) translateY(0); }
  /* 2回目のお辞儀 */
  30%  { transform: scaleY(0.85) translateY(5px) rotateX(10deg); }
  40%  { transform: scaleY(1) translateY(0); }
  /* 40%から100%の間（約2.4秒間）は動かずに静止（ユーザーの目を休めるため） */
  100% { transform: scaleY(1) translateY(0); }
}






.image-container {
  /* 奥行きを感じさせるための視点設定 */
  perspective: 180px;
}

.image-container img {
  /* 回転の基準点を「画像の底辺」に設定 */
  transform-origin: bottom center;
  
  /* 3D変形を有効化 */
  transform-style: preserve-3d;
  
  /* お辞儀アニメーションの適用 */
  animation: rotatex 15s linear infinite;
}

@keyframes rotatex {
  0%, 100% {
    transform: rotatex(0deg);
  }
  50% {
    /* 前方に深くお辞儀する（マイナスの角度） */
    transform: rotatex(30deg); 
  }
}