@charset "utf-8";

/**
 * ***************************************
 * ページ全体に関わるCSSの設定
 * ***************************************
 */
html *,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-size: 14px;
}
body {
  color: #333;
  background-color: #fff;
  font-family: Hiragino Kaku Gothic ProN,  sans-serif;

}
/* 標準的なリンクのテキスト色 */
a {
  color: #f30;
}
/* レスポンシブイメージと画像下スペース防止 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}

.top-image {
  width: 100%; /* 画像の幅 */
  height: auto; /* 自動で高さを調整 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影をつける（オプション） */
}

.body-image {
  width: 100%; /* 画像の幅 */
  height: auto; /* 自動で高さを調整 */
/*  border: #333;
  border-style: solid; */
/*  border-radius: 15px; /* 角を丸くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影をつける（オプション） */
}

.button-image {
  width: 80%;
  margin: 0 auto;
  padding: 10px 0px;
}

img.btn_animate1 {
  margin: 0 auto;
  animation: fuwafuwa 1s ease 0s infinite alternate;
  transform-origin:center;
  cursor: pointer;
  }
  @keyframes fuwafuwa {
  from {transform: scale(0.9,0.9);}
  to {transform: scale(1,1);}
  }

img.btn_animate2 {
  margin: 0 auto;
  animation: skew 2.3s linear infinite;
  transform-origin:center;
  cursor: pointer;
}
  /* skewの動きをここで設定 */
@keyframes skew {
  0% {transform: skew(0deg, 0deg);}
  5% {transform: skew(2deg, 2.2deg);}
  10% {transform: skew(-1deg, -1deg);}
  15% {transform: skew(0.5deg, 1.2deg);}
  20% {transform: skew(-2deg, -1.5deg);}
  25% {transform: skew(0.9deg, 0.9deg);}
  30% {transform: skew(-0.6deg, -0.6deg);}
  35% {transform: skew(0.3deg, 0.3deg);}
  40% {transform: skew(-0.2deg, -0.2deg);}
  45% {transform: skew(0.1deg, 0.1deg);}
  50% {transform: skew(0deg, 0deg);}
}