/* ==========================================================================
   S2 Offer Section (Makuake Advance Notice)
   ========================================================================== */

.s2-offer {
  padding: var(--space-4xl, 80px) var(--space-m, 24px);
  background-color: var(--color-bg-base, #171716);
  color: var(--color-text-main, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.s2-offer__inner {
  max-width: var(--layout-width-content, 1200px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s2-offer__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s2-offer__status {
  display: inline-block;
  font-size: var(--font-size-s, 14px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.05em;
  color: var(--color-text-light, #a3a3a3);
  margin-bottom: var(--space-xs, 8px);
}

.s2-offer__title {
  margin-top: var(--space-m, 24px);
  margin-bottom: var(--space-m, 24px);
}

.s2-offer__headline-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-s, 16px);
}

.s2-offer__limited {
  font-size: var(--font-size-l, 24px);
  font-weight: var(--font-weight-bold, 700);
}

.s2-offer__divider {
  font-size: var(--font-size-l, 24px);
  color: var(--color-text-light, #a3a3a3);
}

.s2-offer__discount-block {
  display: inline-flex;
  align-items: baseline;
}

.s2-offer__max {
  font-size: var(--font-size-m, 18px);
  font-weight: var(--font-weight-bold, 700);
  margin-right: 4px;
}

.s2-offer__discount-number {
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  font-family: var(--font-family-en, 'Inter', sans-serif);
}

.s2-offer__discount-unit {
  font-size: var(--font-size-xl, 32px);
  font-weight: var(--font-weight-bold, 700);
  margin-left: 4px;
}

.s2-offer__body {
  font-size: var(--font-size-m, 18px);
  margin-bottom: var(--space-2xl, 48px);
  line-height: 1.8;
  color: var(--color-text-light, #a3a3a3);
}

.s2-offer__coupon-highlight {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-main, #ffffff);
}

.s2-offer__note {
  margin-top: var(--space-l, 32px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .s2-offer {
    padding: var(--space-3xl, 64px) var(--space-s, 16px);
  }

  .s2-offer__headline-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs, 8px);
  }

  .s2-offer__divider {
    display: none;
  }
}