/**
 * Merits Section
 * 受講後のメリットセクションのスタイル
 */

/* ========================================
   Merits Section
======================================== */
.lp01-merits {
  position: relative;
  isolation: isolate;
  padding: var(--wp--preset--spacing--4-xl) var(--wp--preset--spacing--base);
  background: linear-gradient(
    160deg,
    var(--wp--preset--color--gray-lightest) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
}

.lp01-merits__background {
  position: absolute;
  inset: var(--wp--preset--spacing--xl);
  width: 100%;
  left: 0;
  right: 0;
  border-radius: 0;
  background: radial-gradient(
      circle at 18% 22%,
      rgba(200, 131, 159, 0.22),
      rgba(200, 131, 159, 0) 58%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(132, 76, 102, 0.18),
      rgba(132, 76, 102, 0) 60%
    ),
    linear-gradient(
      135deg,
      rgba(200, 131, 159, 0.08) 0%,
      rgba(200, 131, 159, 0) 65%
    );
  z-index: 0;
  pointer-events: none;
}

.lp01-merits__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--3-xl);
}

.lp01-merits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--base);
  counter-reset: lp01-merits-counter;
}

.lp01-merit-card {
  position: relative;
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border-radius--lg);
  border: 1px solid var(--wp--custom--overlay--primary--2);
  overflow: hidden;
  transition: border-color 0.4s var(--wp--custom--transition--timing--ease),
    background-color 0.4s var(--wp--custom--transition--timing--ease);
}

.lp01-merit-card::before {
  counter-increment: lp01-merits-counter;
  content: counter(lp01-merits-counter, decimal-leading-zero);
  position: absolute;
  top: var(--wp--preset--spacing--sm);
  left: var(--wp--preset--spacing--lg);
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: var(--wp--custom--font-weight--bold);
  color: rgba(200, 131, 159, 0.18);
  letter-spacing: 0.08em;
}

.lp01-merit-card::after {
  content: "";
  position: absolute;
  inset: var(--wp--preset--spacing--xs);
  border-radius: inherit;
  border: 1px solid var(--wp--custom--overlay--primary--2);
  pointer-events: none;
}

.lp01-merit-card__title {
  position: relative;
  margin: 0;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  font-weight: var(--wp--custom--font-weight--semibold);
  color: var(--wp--preset--color--text);
  line-height: var(--wp--custom--line-height--lg);
  text-align: center;
}

/* ========================================
   Responsive Adjustments
======================================== */
@media (max-width: 599px) {
  .lp01-merit-card {
    padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--base);
  }

  .lp01-merit-card::before {
    top: var(--wp--preset--spacing--xs);
    left: var(--wp--preset--spacing--xs);
  }
}

@media (min-width: 600px) {
  .lp01-merits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--lg);
  }
}

@media (min-width: 1024px) {
  .lp01-merits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp01-merit-card {
    padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--xl);
  }
}

@media (min-width: 1280px) {
  .lp01-merits {
    padding: var(--wp--preset--spacing--5-xl) 0;
  }

  .lp01-merits__background {
    inset: var(--wp--preset--spacing--2-xl);
  }

  .lp01-merits__inner {
    gap: var(--wp--preset--spacing--4-xl);
  }

  .lp01-merit-card__title {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
  }
}