@charset "UTF-8";


/* Wrapper全体のスタイル */
.Wrapper {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
}

/* スマートフォン表示時のスタイル */
@media screen and (max-width: 700px) {
    .Wrapper {
        width: 100%;
    }
}

.scblock{
    width: 100%;
}

.relative{
    position: relative;
}

.absoluteblock{
    position: absolute;
    top:0;
    z-index: 0;
}


video{
    width: 100%;
    vertical-align: bottom;
}

.bgvideo{
    z-index: -99;
}

/* CTAセクション２分割横並び */
.ctabox{
    display: flex;
    justify-content: space-around;
}

/* CTAボタン */
.cta_btn_box {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin: 0;
  z-index: 99;
  bottom: 23%;
}

/* ボタンスタイル */
#cta_btn_animation .cta_btn {
  display: block;
  position: relative;
  width: 170px;
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  border-radius: 24px;
  text-decoration: none;
  background-color: #d4005c;
  color: #fff;
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  animation: jelly 1.5s ease-in-out infinite; /* ループするゼリーアニメーション */
}

/* ゼリーのようなプルプルアニメーション */
@keyframes jelly {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.05, 0.95); /* 初速の揺れ幅を小さく */
  }
  30% {
    transform: scale(0.95, 1.05); /* 反発も控えめに */
  }
  50% {
    transform: scale(1.03, 0.97); /* 徐々に小さくなる */
  }
  65% {
    transform: scale(0.98, 1.02); /* 徐々に揺れが小さくなる */
  }
  80% {
    transform: scale(1.02, 0.98); /* 小さな揺れ */
  }
  100% {
    transform: scale(1); /* 元のサイズに戻る */
  }
}
/* ボタン内部に通る輝きのアニメーション */
.btnkiran {
  position: relative;
  display: block;
  overflow: hidden;
}

.btnkiran:before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 150%;
  height: 300%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(45deg);
  opacity: 0;
  z-index: 2;
  animation: shine 3s ease-in-out infinite;
}

/* 輝きアニメーション */
@keyframes shine {
  0% {
    transform: translateX(-150%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(150%) rotate(45deg);
    opacity: 0;
  }
}