html {
	overflow-y: scroll;
	overflow-x: hidden;
}

body {
  width: 100%;
  min-width: auto;         /* ← 固定幅を解除 */
  max-width: 100%;         /* ← 画面幅いっぱいに */
  margin: 0;
  line-height: 2;
  background: #fff;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
}

.base_box {
  width: 100%; 
  max-width: 300px;       
  margin: 0 auto;
}

.posit_r {
  position: relative;
  width: 100%;
  max-width: 750px;   /* LP全体の横幅 */
  margin: 0 auto;
}
.sec_inner {
	position: relative;
	z-index: 5;
}

/* ▼IMG▼ */
img, input[type="image"]{
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-size: 0;
	line-height: 0;
	border: 0;
}

.img { position: relative; z-index: 5; }
.img_frame { position: relative; overflow: hidden; }
.img_frame img {
	position: absolute;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* ▼CTA▼ */
.top_btn {
  position: absolute;
  top: 30.5%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
.cta_btn {
  position: absolute;
  top: 27%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
.cta_btn2 {
  position: absolute;
  top: 60.5%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
/* ▼BUTTON ANIMATION▼ */
.btn_bound img {
	animation: bomb 3s linear 0s infinite normal;
	transition: .3s;
}
@keyframes bomb {
	0% { transform:scale(1); }
	7% { transform:scale(0.98); }
	14% { transform:scale(0.94); }
	21% { transform:scale(1); }
	28% { transform:scale(0.94); }
	35% { transform:scale(0.98); }
	42% { transform:scale(0.95); }
	49% { transform:scale(1); }
	100% { transform:scale(1); }
}
.sec_inner {
  position: relative;
  z-index: 5;
}
/*animation*/
.anime_gif {
  position: absolute;
  top: 60.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 65%; 
  z-index: 10;
}
.movie{
    display: block;
    position: absolute;
    top: 15.4%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    outline: none;
    border: none;
}

@media screen and (max-width: 200px) {
.top_btn {
  position: absolute;
  top: 30%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
.cta_btn {
  position: absolute;
  top: 25%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
.cta_btn2 {
  position: absolute;
  top: 59.5%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
/*animation*/
.anime_gif {
  position: absolute;
  top: 59.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 65%; 
  z-index: 10;
}
.movie{
    display: block;
    position: absolute;
    top: 15.4%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    outline: none;
    border: none;
}
}
.footer {
  padding: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .1rem;
  font-size: 12px;
  text-align: center;
  color: #ffffff;
  background: #344575;
  border-top: 1px solid #e5e7eb;
}