/* ── SERVICE DETAIL PAGE ── */
.s-hero { margin-top: var(--nav-h); padding: clamp(40px,6vw,72px) 0 clamp(32px,4vw,48px);
  background: radial-gradient(900px 360px at 85% -10%, var(--blue-pale), transparent), var(--blue-mist);
  border-bottom: 1px solid var(--line); }
.s-hero .ic { width: 64px; height: 64px; border-radius: 18px; background: #fff; box-shadow: var(--sh-md);
  display: grid; place-items: center; font-size: 32px; margin-bottom: 20px; }
.s-hero h1 { font-family: var(--font-display); font-size: clamp(28px,4.2vw,46px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin-bottom: 14px; max-width: 760px; }
.s-hero .s-short { font-size: 17px; color: var(--ink-soft); max-width: 680px; line-height: 1.6; }

.s-body { max-width: 800px; margin: 0 auto; padding: clamp(40px,6vw,72px) 24px; }
.s-block { margin-bottom: 38px; }
.s-block-title { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--ink);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--blue-pale); }
.s-block p { font-size: 16px; color: var(--ink-soft); line-height: 1.8; }
.svc-points { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.svc-points li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }
.svc-points li::before { content: ''; position: absolute; left: 8px; top: 10px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--blue); }

.s-note { display: none; gap: 14px; background: #FFF7E8; border: 1px solid #F0D98C;
  border-radius: var(--r-md); padding: 20px 22px; margin: 8px 0 38px; }
.s-note .ic { font-size: 22px; flex-shrink: 0; }
.s-note p { font-size: 15px; color: #6b5410; line-height: 1.7; margin: 0; }

.s-photos { display: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 38px; }
.s-photos figure { margin: 0; }
.s-photos img { width: 100%; border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.s-photos figcaption { font-size: 13px; color: var(--ink-faint); text-align: center; margin-top: 8px; font-style: italic; }

.s-cta { background: var(--blue-pale); border-radius: var(--r-lg); padding: 32px; text-align: center; margin-top: 12px; }
.s-cta h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.s-cta p { color: var(--ink-soft); margin-bottom: 18px; }

.s-nav { display: flex; justify-content: space-between; gap: 16px; max-width: 800px;
  margin: 0 auto; padding: 0 24px clamp(48px,7vw,80px); }
.s-nav-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px;
  max-width: 46%; transition: border-color 0.2s, box-shadow 0.2s; }
.s-nav-link:hover { border-color: var(--blue); box-shadow: var(--sh-sm); }
.s-nav-link.end { text-align: right; }
.s-nav-link .dir { font-size: 12.5px; color: var(--blue); font-weight: 600; }
.s-nav-link .ttl { font-size: 14px; color: var(--ink); font-weight: 600; }

#s-loading, #s-notfound { text-align: center; padding: 80px 24px; color: var(--ink-faint); }
#s-notfound { display: none; }
#s-notfound h2 { font-family: var(--font-display); color: var(--ink); margin: 12px 0 6px; }

@media (max-width: 560px) {
  .s-nav { flex-direction: column; }
  .s-nav-link { max-width: 100%; }
  .s-nav-link.end { text-align: left; }
}