/* ============================================================
   sub-cta-base.css — サブページ共通CTA
   about-cta / projects-cta / service-cta の共通スタイル
   Dark section: navy-deep background + radial gradient orb
   シンプルな1行CTA — Recruit CTAのスリム版
   ============================================================ */

/* --- Section Container --- */
.sub-cta {
  position: relative;
  padding: 96px 0 80px;
  background: var(--c-navy-deep);
  overflow: hidden;
  z-index: var(--z-content, 10);
  text-align: center;
}

/* --- Radial Gradient Orb (decoration) --- */
.sub-cta__orb {
  position: absolute;
  width: 560px;
  height: 560px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    circle,
    rgba(232, 103, 42, 0.14) 0%,
    rgba(201, 168, 76, 0.08) 40%,
    transparent 70%
  );
  animation: sub-cta-orb-pulse 9s ease-in-out infinite;
}

@keyframes sub-cta-orb-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* --- Inner --- */
.sub-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--s-gutter);
}

/* --- Eyebrow --- */
.sub-cta__eyebrow {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 20px;
}

/* --- Main Title --- */
.sub-cta__title {
  font-family: var(--f-heading-ja);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin: 0 0 44px;
}

/* --- CTA Button Wrapper --- */
.sub-cta__btn-wrap {
  display: flex;
  justify-content: center;
}

/* --- CTA Button (gold) --- */
.sub-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 16px 40px;
  border-radius: 4px;
  background: var(--c-gold);
  color: var(--c-navy-deep);
  border: 2px solid var(--c-gold);
  text-decoration: none;
  transition: transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              background-color 0.3s ease,
              border-color 0.3s ease;
  cursor: pointer;
}

.sub-cta__btn:hover {
  background: var(--c-gold-light, #D4B96A);
  border-color: var(--c-gold-light, #D4B96A);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(201, 168, 76, 0.35);
}

.sub-cta__btn-arrow {
  transition: transform 0.3s var(--ease-out);
}

.sub-cta__btn:hover .sub-cta__btn-arrow {
  transform: translateX(5px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .sub-cta {
    padding: 80px 0 64px;
  }
}

@media (max-width: 768px) {
  .sub-cta {
    padding: 64px 0 56px;
  }

  .sub-cta__title {
    font-size: clamp(1.25rem, 4vw, 1.7rem);
    margin-bottom: 36px;
  }

  .sub-cta__orb {
    width: 340px;
    height: 340px;
  }
}

@media (max-width: 480px) {
  .sub-cta {
    padding: 52px 0 44px;
  }

  .sub-cta__btn {
    width: 100%;
    justify-content: center;
    padding: 15px 28px;
    font-size: 14px;
  }

  .sub-cta__btn-wrap {
    display: block;
  }
}