/* services-archive.css
   Version: v3.6
   - セクション背景を 白／黒 で交互に切り替え
   - 1段目: 白, 2段目: 黒, 3段目: 白 ...
   - 既存の灰色トーンは廃止
*/

:root{
  --bg-black:#000;
  --bg-white:#fff;
  --panel:#0b0b0b;
  --line:#2b2b2b;
  --text-light:#e8e8e8;
  --text-dark:#111;
  --muted-light:#bdbdbd;
  --muted-dark:#666;
  --radius:6px;
  --shadow: 0 10px 30px rgba(0,0,0,.24);
}

/* SECTION BACKGROUNDS */
.page-service-archive .svc-section{padding: clamp(56px,8vw,96px) 0; position:relative}
.page-service-archive .svc-section--a{background:var(--bg-white); color:var(--text-dark)}
.page-service-archive .svc-section--b{background:var(--bg-black); color:var(--text-light)}
.page-service-archive .svc-section--c{background:var(--bg-white); color:var(--text-dark)}
.page-service-archive .svc-section .svc-hr{height:1px;background:var(--line);margin: clamp(32px,6vw,48px) 0 clamp(24px,4vw,36px);opacity:.8}

/* HERO/LEAD */
.page-service-archive .svc-hero{padding-bottom: clamp(20px,3.5vw,36px)}
.page-service-archive .svc-title{margin:0 0 10px; font-size: clamp(24px,2.4vw,34px); font-weight:700}
.page-service-archive .svc-sub{margin:0;}

/* GRID */
.page-service-archive .svc-grid{display:grid;gap:24px}
.page-service-archive .svc-grid--2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:680px){ .page-service-archive .svc-grid--2{grid-template-columns:1fr} }

/* CARD */
.page-service-archive .svc-card{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration:none;color:inherit;
}
.page-service-archive .svc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.34);
  border-color:#3a3a3a;
}

.page-service-archive .svc-thumb{position:relative;background:#000}
.page-service-archive .svc-thumb img,
.page-service-archive .svc-thumb--ph{aspect-ratio:16/9;width:100%;height:auto;display:block;object-fit:cover}
.page-service-archive .svc-thumb--ph{background:#111;color:#777;display:grid;place-items:center}

.page-service-archive .svc-body{padding:16px 16px 18px}
.page-service-archive .svc-card-title{margin:0 0 8px;font-size:18px;font-weight:700;color:#fff}
.page-service-archive .svc-card-desc{margin:0;color:#c7c7c7;line-height:1.8}

/* CTA */
.page-service-archive .svc-cta{padding: clamp(72px,8vw,110px) 0; background:#000; text-align:center; border-top:1px solid var(--line)}
.page-service-archive .svc-cta-title{font-size: clamp(22px,2.2vw,32px);margin:0 0 14px;font-weight:700;color:#fff}
.page-service-archive .svc-cta-text{margin:0 auto 26px; color:#bdbdbd; max-width:760px}
.page-service-archive .svc-cta-btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none}
.page-service-archive .svc-cta-btn--white{background:#fff;color:#000;border:1px solid #fff}
.page-service-archive .svc-cta-btn--white:hover{filter:brightness(0.95)}
/* ---- Hero section white background & black text ---- */
.page-service-archive .svc-section--a .svc-hero {
  background:#fff;
  padding: clamp(40px,6vw,60px) clamp(16px,3vw,32px);
  border-radius: 8px;
}
.page-service-archive .svc-section--a .svc-title,
.page-service-archive .svc-section--a .svc-sub {
  color:#111;
}