/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f0f0f0; /* 背景色は任意で調整してください */
  display: flex;
  justify-content: center;
}

.lp-container {
  max-width: 750px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

img,
video {
  width: 100%;
  height: auto;
  display: block; /* 画像下の謎の隙間を消す */
  vertical-align: bottom;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}
.absolute.cta_btn {
  top: 15%;
  left: 7.5%;
}
.absolute.video {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 77%;
}

img.cta_btn {
  cursor: pointer;
  width: 85%;
}

/* アニメーションを定義（キーフレーム） */
@keyframes shake-horizontal {
  0% {
    transform: translate(8px, 0px);
  }
  5% {
    transform: translate(-8px, 0px);
  }
  10% {
    transform: translate(8px, 0px);
  }
  15% {
    transform: translate(-8px, 0px);
  }
  20% {
    transform: translate(8px, 0px);
  }
  25% {
    transform: translate(-8px, 0px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}

/* アニメーションを適用するクラス */
.shakable {
  animation-name: shake-horizontal;
  animation-duration: 4s; /* アニメーション1周期の時間（4秒かけて1回揺れて静止） */
  animation-iteration-count: infinite; /* 無限に繰り返す */
  animation-timing-function: ease-in-out;
}