/* ============================================================
   Restaurant Service Page
   shared styles: /style.css
   ============================================================ */

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

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

.rp-hero-cta {
  margin-top: 40px;
  opacity: 0;
  animation: hero-fade 0.9s ease 0.55s forwards;
}

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

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

.rp-browser {
  filter: drop-shadow(0 24px 40px rgba(21, 38, 50, 0.10));
}

.rp-phone {
  filter: drop-shadow(0 32px 48px rgba(21, 38, 50, 0.16));
  animation: rp-float 7s ease-in-out infinite;
}

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

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

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

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

.rp-badge-dot { animation: rp-pulse 2.4s ease-in-out infinite; }

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

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

@media (max-width: 900px) {
  .rp-hero-inner { gap: 24px; padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-phone, .rp-badge-dot { animation: none; }
}

/* ============================================================
   Live Demo section
   ============================================================ */

.rp-demo-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.rp-demo-list li { border-bottom: 1px solid var(--line); }

.rp-demo-link {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 8px;
  transition: background 0.2s, padding-left 0.25s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.rp-demo-link:hover { background: var(--panel); padding-left: 18px; }

.rp-demo-no {
  font-size: 13px;
  font-weight: 700;
  color: var(--violet);
  letter-spacing: 0.12em;
}

.rp-demo-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.rp-demo-title { font-size: 18px; font-weight: 900; color: var(--navy); }

.rp-demo-desc { font-size: 13.5px; color: var(--text-2); }

.rp-demo-arrow {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.rp-demo-link:hover .rp-demo-arrow {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
}

.rp-demo-note { margin-top: 14px; font-size: 12.5px; color: var(--muted, #9ca3af); }

@media (max-width: 640px) {
  .rp-demo-link { gap: 16px; padding: 22px 4px; }
}

/* パンくず（omise-os 配下であることを示す） */
.rp-crumb {
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted, #9ca3af);
}
.rp-crumb a {
  color: var(--violet);
  text-decoration: none;
}
.rp-crumb a:hover { text-decoration: underline; }

/* パンくず（omise-os 配下であることを示す） */
.rp-crumb {
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted, #9ca3af);
}
.rp-crumb a {
  color: var(--violet);
  text-decoration: none;
}
.rp-crumb a:hover { text-decoration: underline; }