.lp-h2--cta {
  color:#ffffff;
  font-size:1.8rem;
  text-align:center;
}

.cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #0E5DAB; /* 例: 青色の背景 */
  padding: 0px 0px 20px 0px;  /* 上下の余白 */
  margin: 30px 0px;
}

.cta-content {
  text-align: center;
  max-width: 960px; /* 中央のコンテンツの最大幅 */
}

.cta-description {
  font-size: 16px; /* 説明文のフォントサイズ */
  color: #FFFFFF; /* 説明文の文字色 */
  margin-bottom: 20px; /* 説明文とボタンの間の余白 */
}

.cta-btn a {
  display: inline-block;
  background-color: #ff6600; /* 例: 黄色のボタン背景 */
  color: #FFFFFF; /* ボタンの文字色 */
  border: 1.5px solid #ff6600; /* 1ピクセル幅のオレンジ色の実線でボーダーを設定 */
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 5px; /* ボタンの角を丸く */
  font-weight:600;
  font-size: 18px; /* ボタンのフォントサイズ */
  transition: background-color 0.3s; /* 背景色のホバー効果のためのトランジション */
  border-bottom: 2px solid #b84c00;
}

.cta-btn a:hover {
  background: #FFFFFF !important;
  color: #ff6600 !important;
  border: 1.5px solid #ff6600; /* 1ピクセル幅のオレンジ色の実線でボーダーを設定 */
}
@media (max-width: 600px) {
  .lp-h2--cta {
    font-size: 1.2rem; /* Font size adjusted for mobile */
    text-align: center;
  }

  .cta-container {
    flex-direction: column; /* Stack elements vertically for mobile */
    padding: 10px 0px 15px 0px; /* Adjusted padding for mobile */
    margin: 20px 0px; /* Adjusted margin for mobile */
  }

  .cta-content {
    max-width: 100%; /* Full width for mobile */
    padding: 0 10px; /* Added padding for mobile */
  }

  .cta-description {
    font-size: 14px; /* Font size adjusted for mobile */
    margin-bottom: 15px; /* Adjusted margin for mobile */
  }

  .cta-btn a {
    padding: 10px 30px; /* Adjusted padding for mobile */
    font-size: 16px; /* Font size adjusted for mobile */
  }