body {
  font-family: sans-serif;
  background-color: #fff;
  color: #333;
  line-height: 1.6;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  max-width: 500px;
}
.cta-header {
    position: absolute;
    top: 0px;
    right: 0px;
    background: #11b732;
    padding: 10px 13px;
	text-align: center;
}
.ai-demo-section {
			padding: 0 5%;
			background: #ff6b00;
			margin-top: -1px;
			margin-bottom: -1px;
		}
.ai-demo-section iframe {
    border-radius: 15px;
}
@media (min-width: 500px) {
  .cta-header {
    display: none;
  }
}
a.cta-header-button {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 2px;
}
.cta-header p {
    margin: 0;
    line-height: 1.3;
}
/* 共通設定 */
img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  width: 100%;
  overflow-x: hidden;
}

.lp-image {
  display: block;
  width: 100%;
  height: auto;
}

/* カルーセル */
.carousel-section {
 overflow: hidden;
    background: #00000000;
  position: absolute;
  top: 117vw; /* 画面幅に比例する位置（高さ） */
  left: 0;
  width: 100%;
  z-index: 10;
}

  .carousel-track {
    display: flex;
    animation: scroll 20s linear infinite;
  }

  .carousel-track img {
    width: 70vw;
    height: auto;
    border-radius: 12px;
  }

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* CTAセクション */
.cta-wrapper {
  position: relative;
  width: 100%;
    margin-top: -1px;
}

.cta-button {
  width: 90%;
  position: absolute;
  bottom: 41%;/* 画像位置に合わせて調整 */
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
}

.cta-button img {
  width: 100%; /* 画像サイズに合わせて調整 */
  height: auto;
}

.btn1 {
  bottom: 28%;
}
.btn2 {
  bottom: 40%;
}
.btn3 {
  bottom: 26%;
}
.btn4 {
  bottom: 33%;
}
.btn5 {
  bottom: 41%;
}

    .yureru-j {
    animation: yureru-j 2s infinite;
}
@keyframes yureru-j {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}
    @media (max-width: 480px) {
  .carousel-track img {
    width: 280px;
  }
  .cta-button {
    bottom: 41%; /* モバイル時の表示位置（必要に応じて調整） */
  }
  .cta-button img {
    width: 100%; /* モバイル用画像サイズ */
    height: auto;
  }
  /* 個別のボタン位置調整 */
  .btn1 { bottom: 28%; }
  .btn2 { bottom: 40%; }
  .btn3 { bottom: 26%; }
  .btn4 { bottom: 32%; }
  .btn5 { bottom: 39%; 
  }

}

/* ドットの色設定 */
.slick-dots li button:before {
  font-size: 15px;
  color: #999;  /* 通常：グレー */
}
.slick-dots li.slick-active button:before {
  color: #f15a24; /* アクティブ時：オレンジ */
}

/* 矢印の色設定 */
.slick-prev::before,
.slick-next::before {
  color: #f15a24;
}

    #footer {
        text-align: center;
        font-size: 0.6em;
        padding: 1em;
        margin-bottom: 0px;
    }
#footer a {
    color: #000000;
    text-decoration: none;
}