/* =========================
   Spring Plan - Hero Module
   Scoped, no external libs
   ========================= */

/* ✅ まずはこのモジュール配下を border-box に統一（はみ出し事故を根絶） */
.sp-hero,
.sp-hero *{
  box-sizing: border-box;
}

/* Container (safe even if theme already has one) */
.sp-hero .sp-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Section */
.sp-hero{
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 15% 10%, rgba(255, 228, 230, .65), transparent 60%),
              radial-gradient(900px 520px at 85% 5%, rgba(254, 240, 138, .35), transparent 55%),
              linear-gradient(135deg, #fff7f8 0%, #fff6ed 45%, #fff7fb 100%);
  padding: 56px 0 44px;
  color: #0f172a;
  font-family: inherit;
}

/* Background blobs */
.sp-hero__bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sp-hero__blob{
  position: absolute;
  border-radius: 999px;
  filter: blur(48px);
  opacity: .65;
  mix-blend-mode: multiply;
  animation: sp-blob 12s ease-in-out infinite;
}

.sp-hero__blob--a{
  width: 360px;
  height: 360px;
  top: -120px;
  right: -120px;
  background: #fde68a;
  animation-delay: 0s;
}

.sp-hero__blob--b{
  width: 420px;
  height: 420px;
  bottom: -160px;
  left: -160px;
  background: #fbcfe8;
  animation-delay: 1.6s;
}

.sp-hero__blob--c{
  width: 300px;
  height: 300px;
  top: 12%;
  left: 55%;
  background: #fecaca;
  opacity: .45;
  animation-delay: 3.2s;
}

@keyframes sp-blob{
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33% { transform: translate3d(18px, -10px, 0) scale(1.06); }
  66% { transform: translate3d(-14px, 12px, 0) scale(0.98); }
}

/* Layout */
.sp-hero__container{
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Kicker */
.sp-hero__kicker{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(236, 72, 153, .16);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
  color: #be185d;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
}

/* Title */
.sp-hero__title{
  margin: 0 0 12px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 3.6vw, 46px);
}

.sp-hero__title strong{
  font-weight: 900;
}

.sp-hero__title .sp-hero__accent{
  color: #ec4899;
}

/* Subtitle */
.sp-hero__subtitle{
  margin: 0 auto 18px;
  max-width: 42rem;
  color: #334155;
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 18px);
}

/* Badges */
.sp-hero__badges{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
  backdrop-filter: blur(10px);
  margin: 8px auto 18px;
}

.sp-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, .9);
  color: #334155;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

.sp-hero__badge-text{
  white-space: nowrap;
}

/* Icons (inline SVG) */
.sp-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sp-icon--check{
  color: #22c55e;
}

.sp-icon--arrow{
  color: currentColor;
}

/* CTA */
.sp-hero__cta{
  margin-top: 10px;
  /* ✅ スマホで端に当たらない保険（PCには影響ほぼなし） */
  padding: 0 12px;
}

.sp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
}

.sp-btn__text{
  display: inline-block;
}

/* ✅ ここが本丸：はみ出し防止 + 丸みクリップ */
.sp-btn--primary{
  width: 100%;
  max-width: 360px;          /* ←今までの min(360px,100%) と同等 */
  margin: 0 auto;            /* ←中央寄せ */

  padding: 16px 22px;
  border-radius: 999px;
  overflow: hidden;          /* ←右端が欠けて見えるのを防ぐ */
  transform: translateZ(0);  /* ←Safariの描画保険 */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* iOS丸み保険 */

  font-weight: 900;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(90deg, #ec4899 0%, #fb923c 100%);
  box-shadow: 0 14px 34px rgba(236, 72, 153, .25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* clip-path が使える環境ならさらに保険 */
@supports (clip-path: inset(0 round 999px)){
  .sp-btn--primary{
    clip-path: inset(0 round 999px);
  }
}

.sp-btn--primary:hover{
  filter: brightness(1.02);
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .16);
}

/* Notes */
.sp-hero__note{
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.sp-hero__subnote{
  margin: 6px 0 0;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 700;
}

/* Nav links */
.sp-hero__nav{
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
  flex-wrap: wrap;
}

.sp-hero__navlink{
  color: #64748b;
  text-decoration: none;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sp-hero__navlink:hover{
  color: #ec4899;
}

.sp-hero__navsep{
  color: rgba(100, 116, 139, .45);
}

/* Responsive */
@media (max-width: 640px){
  .sp-hero{ padding: 44px 0 36px; }
  .sp-hero__badges{ padding: 12px; }
  .sp-hero__badge{ padding: 9px 12px; font-size: 12px; }
  .sp-btn--primary{ font-size: 17px; padding: 15px 20px; }
}