/*
GLOBAL
***************************************************************************/
html {
	overflow-y: scroll;
	overflow-x: hidden;
}

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

.base_box {
  width: 100%;             /* ← 750px固定をやめる */
  max-width: 300px;        /* ← PCでは中央寄せで最大幅750px */
  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%);
}

/*
CONTENTS
***************************************************************************/
/* ▼CTA▼ */
.top_btn {
  position: absolute;
  top: 61%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
.cta_btn {
  position: absolute;
  top: 40%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}

/* ▼MOVIE▼ */
.movie01 {
position: absolute;
    top: 52%;
    left: 16%;
    max-width: 100%;
    min-width: 9%;
    z-index: 10;
}
.movie02 {
    position: absolute;
    top: 10%; left: 30%;
    width: 100%;
    z-index: 10;
}
@media screen and (max-width: 400px) {
  .movie01 {
    top: 51%;       /* スマホ用の位置に調整 */
    left: 50%;      /* 横中央に */
    transform: translateX(-50%);
    width: 80%;     /* 横幅を画面に合わせる */
    min-width: auto;
  }
  .movie02 {
    position: absolute;
    top: 10%; left: 30%;
    width: 80%;
    z-index: 10;
}}
@media screen and (max-width: 200px) {
.top_btn {
  position: absolute;
  top: 58%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
.cta_btn {
  position: absolute;
  top: 38.5%;           /* ← 画像の高さに対する割合で調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         /* ボタン幅（必要に応じて調整） */
  z-index: 10;
}
}

.point_movie {
    position: absolute;
    top: 46%;
    left: 3%;
    width: 96%;
    aspect-ratio: 16 / 9;
    outline: none;
    border: none;
    z-index: 1;
}
.howto_movie iframe {
    display: block;
    position: absolute;
    bottom: 6%;
    left: 50%;
    width: 100%;
    aspect-ratio: 16 / 9;
    transform: translateX(-50%);
    outline: none;
    border: none;
    z-index: -10;
}

/* ▼FAQ▼ */
#faq_sec { padding: 0; }
#faq_sec dl { margin-bottom: 2%; }
#faq_sec dl:last-child { margin-bottom:0; }
#faq_sec dt {
    position: relative;
    padding: 1em;
    font-size: clamp(0.5rem, 2vw, 0.8rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.45;
    background: #7A605A;
}
#faq_sec .inner {
    display: none;
    padding: 32px;
	max-width: 600px;
	font-size: clamp(0.5rem, 2vw, 0.8rem);
    margin: 0;
    color: #7A605A;
    line-height: 1.45;
    border-left: solid 1px #7A605A;
    border-right: solid 1px #7A605A;
    border-bottom: solid 1px #7A605A;
}

/* ▼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;
}



/* btn_animation */
.btn_animation { animation: .5s bound-anim ease-in infinite alternate; }
@keyframes bound-anim{
  0%{ transform: translateY(0) scale(1); }
  60%{ transform: translateY(1.734vw) scale(1); }
  100%{ transform: translateY(3.2vw) scale(1.02, 0.95); }
}
@media screen and (min-width: 768px) {
  @keyframes bound-anim{
    0%{ transform: translateY(0) scale(1); }
    60%{ transform: translateY(13px) scale(1); }
    100%{ transform: translateY(24px) scale(1.02, 0.95); }
  }
}

/* --- 以下（secXやFAQなど）は変更せず維持 --- */
/* ※省略せずこのまま全体を差し替え可能 */