@charset "utf-8";

body {
  height: 2000px;
  margin: 0;
}
/* 電話をかけるボタン */
#cta {
  position: fixed;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(#cf0941, #9b0b1f);
  background-color: #cf0941;
  color: #ffffff;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}
/* 「>」マーク */
#cta::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  -webkit-transform : rotate(45deg) translateY(-50%);
  transform : rotate(45deg) translateY(-50%);
}
/* 電話をかけるボタン（表示時） */
#cta.show {
  -webkit-animation: fadeInUp 0.5s ease-in-out forwards;
  animation: fadeInUp 0.5s ease-in-out forwards;
}
/* 電話をかけるボタン（非表示時） */
#cta.hide {
  -webkit-animation: fadeOutDown 0.5s ease-in-out forwards;
  animation: fadeOutDown 0.5s ease-in-out forwards;
}
/* アニメーションの定義（フェードインしながら上に移動） */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/* アニメーションの定義（フェードアウトしながら下に移動） */
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

/* 画面幅768px以上の場合 */
@media screen and (min-width: 768px) {
  /* 電話をかけるボタン */
  #cta {
    display: none;
  }
}