@charset "UTF-8";

a {
  display: inline-block;
  transition: 0.3s;
}

img {
  width: 100%;
}

.inner {
  max-width: 750px;
  margin: 0 auto;
}

/* --------------------- */
/*    ボタン関連          */
/* --------------------- */

/* ボタンがあるエリアには.ctaを付与 */
.cta {
  position: relative;
}

/* 外側のdiv */
.btn-wrapper {
  width: 94%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ボタンの設置箇所によるポジションの調整 */
.btn-01 {
  bottom: 13%;
}

.btn-02 {
  bottom: 10.7%;
}

.btn-03 {
  top: 15.4%;
}

.btn-04 {
  bottom: 12.2%;
}

/* aタグ */
.btn {
  display: inline-block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.btn-bound{
  animation: bound 2s ease-in-out infinite;
  
}

.btn-fuwafuwa{
  animation: fuwafuwa 2s ease-in-out infinite alternate;
  /* transition: 1.5s ease-in-out; */
}

/* バウンドアニメーション(.btnに指示) */
@keyframes bound {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/* ふわふわアニメーション(.btnに指示) */
@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(0, -7px);
  }
  
  100% {
    transform: translate(0, 0);
  }
}

/*ホバーで明るく*/
.btn:hover {
  filter: brightness(1.1);
}