/**
 * CTA Section
 * CTAセクションのスタイル
 */

/* ========================================
   CTA Section
======================================== */
.lp01-cta {
  padding: var(--wp--preset--spacing--4-xl) var(--wp--preset--spacing--xl);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lp01-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 60%;
  height: 200%;
  background-color: var(--wp--custom--overlay--light--1);
  opacity: 0.1;
  z-index: 0;
}

.lp01-cta.lp01-cta--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../../images/lp-01/cta-bg.svg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.lp01-cta__inner {
  position: relative;
  z-index: 1;
}

.lp01-cta__title {
  font-size: clamp(1.25rem, 4vw, 2.5rem);
  font-weight: var(--wp--custom--font-weight--bold);
  margin-bottom: var(--wp--preset--spacing--2-xl);
  line-height: var(--wp--custom--line-height--lg);
}

.lp01-cta__text {
  font-size: var(--wp--preset--font-size--base);
  margin-bottom: var(--wp--preset--spacing--2-xl);
  opacity: var(--wp--custom--opacity--95);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.lp01-cta__buttons {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--xl);
  flex-wrap: wrap;
}

.lp01-cta--primary .c-btn--primary {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--white);
}

.lp01-cta--primary .c-btn--primary:hover {
  background-color: var(--wp--preset--color--gray-lightest);
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--gray-lightest);
}