/* ============================================================
   Website Production Page — Webサイト制作
   shared styles: /style.css
   ============================================================ */

.ws-hero .hero-line:nth-child(3) > span { animation-delay: 0.24s; }

.ws-hero-inner { padding-bottom: 80px; }

.ws-stage {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  opacity: 0;
  animation: hero-fade 1s var(--ease) 0.25s forwards;
}

.ws-visual-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ws-browser { animation: ws-float 7s ease-in-out infinite; }

@keyframes ws-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.ws-ring {
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.4;
  opacity: 0.4;
}

.ws-ring--cyan { stroke: var(--cyan); opacity: 0.35; }

.ws-dot--cyan { fill: var(--cyan); }
.ws-dot--violet { fill: var(--violet); }
.ws-dot--magenta { fill: var(--magenta); }

.ws-pulse { animation: ws-pulse 2.4s ease-in-out infinite; }

@keyframes ws-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.ws-lead { border-top: 1px solid var(--line); }

/* ---------- Pricing ---------- */

.pricing-list {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.pricing-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.pricing-row dt {
  font-size: 14px;
  font-weight: 700;
}

.pricing-amount {
  font-size: 24px;
  font-weight: 700;
}

.pricing-amount span { font-size: 14px; }
.pricing-amount--custom { font-size: 20px; }

.pricing-description {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.9;
}

.pricing-note {
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
}

@media (max-width: 900px) {
  .ws-hero-inner { gap: 24px; padding-bottom: 96px; }
  .pricing-row { grid-template-columns: 1fr; gap: 10px; }
}