/* ==========================================================
   service-page.css — SES / 品質保証 / DX 共通レイアウト
   各ページは <style> で `--page-accent` / `--page-accent-rgb` を
   上書きすることでアクセント色を切替える
     例 (SES):  --page-accent:#d95f1a; --page-accent-rgb:217,95,26;
     例 (QA):   --page-accent:#1e8fa0; --page-accent-rgb:30,143,160;
     例 (DX):   --page-accent:#1d3557; --page-accent-rgb:29,53,87;
   ========================================================== */

:root{
  --page-accent: var(--orange);
  --page-accent-rgb: 217,95,26;
}

/* ── PAGE HERO ── */
.sd-hero{min-height:78vh;padding:140px 5vw 80px;display:flex;align-items:center;justify-content:center;background:var(--white);position:relative;overflow:hidden}
.sd-hero::before{content:'';position:absolute;top:-180px;right:-160px;width:520px;height:520px;background:radial-gradient(circle,rgba(var(--page-accent-rgb),.08) 0%,transparent 60%);pointer-events:none}
.sd-hero::after{content:'';position:absolute;bottom:-160px;left:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(217,95,26,.07) 0%,transparent 60%);pointer-events:none}
.sd-hero-inner{max-width:880px;text-align:center;position:relative;z-index:1}
.sd-hero h1{font-family:'Syne',sans-serif;font-size:clamp(2rem,3.5vw,3.2rem);font-weight:800;line-height:1.3;letter-spacing:-.03em;color:var(--ink);margin:1rem 0 1.75rem;word-break:keep-all;overflow-wrap:break-word}
.sd-hero h1 .hl-o{color:var(--orange)}
.sd-hero h1 .hl-t{color:var(--teal)}
.sd-hero-lead{font-size:1rem;color:var(--muted);line-height:1.95;max-width:640px;margin:0 auto}

/* ── OVERVIEW ── */
.sd-overview{background:var(--white)}
.sd-overview .sd-section-head{max-width:680px;margin-bottom:2.5rem}
.sd-overview-text{max-width:780px;font-size:.95rem;line-height:1.95;color:var(--ink2);margin-top:1.5rem}
.sd-overview-text p{margin-bottom:1.5rem}

/* ── STRENGTHS ── */
.sd-strengths{background:var(--bg)}
.sd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.sd-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:38px 28px;transition:transform .25s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden}
.sd-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.08);border-color:var(--page-accent)}
.sd-card-num{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;color:var(--page-accent);letter-spacing:.04em;display:inline-block;margin-bottom:1rem}
.sd-card h3{font-family:'Noto Sans JP',sans-serif;font-size:1.05rem;font-weight:700;margin-bottom:.7rem;color:var(--ink);letter-spacing:.01em}
.sd-card p{font-size:.85rem;color:var(--muted);line-height:1.8}

/* ── COVERAGE TAGS ── */
.sd-coverage{background:var(--white)}
.sd-tags{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:3rem}
.sd-tag{display:inline-flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:100px;padding:10px 22px;font-size:.85rem;font-weight:600;color:var(--ink2);transition:background .2s,color .2s,border-color .2s}
.sd-tag:hover{background:var(--page-accent);color:var(--white);border-color:var(--page-accent)}
.sd-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--page-accent);margin-right:10px;transition:background .2s}
.sd-tag:hover::before{background:var(--white)}

/* ── COVERAGE TAB UI (タグをタブ化 + 画像 + 詳細説明切替) ── */
/* ① タグはサブ説明の下、横並び */
.sd-coverage .sd-tags{margin-top:2.5rem;justify-content:flex-start}
.sd-coverage .sd-tag{cursor:pointer;user-select:none}
.sd-coverage .sd-tag.is-active{
  background:var(--page-accent);color:var(--white);border-color:var(--page-accent);
  box-shadow:0 8px 22px rgba(217,95,26,.22);
}
.sd-coverage .sd-tag.is-active::before{background:var(--white)}

/* ② 2カラム: 左=画像 / 右=詳細説明 (切替) */
.sd-coverage-panels{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:stretch;margin-top:3rem;
}
.sd-coverage-imgwrap{
  position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 16px 48px rgba(15,18,36,.12);
}
.sd-coverage-imgwrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(217,95,26,0) 50%,rgba(0,0,0,.18) 100%);
  pointer-events:none;
}
.sd-coverage-imgwrap .sd-cov-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;transition:opacity .5s ease,transform 1s ease;
}
.sd-coverage-imgwrap .sd-cov-img.is-active{opacity:1}
.sd-coverage-imgwrap:hover .sd-cov-img.is-active{transform:scale(1.04)}

.sd-coverage-descwrap{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:.5rem 0;
}
.sd-coverage-desc{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.sd-coverage-desc.is-active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative}
.sd-coverage-desc h3{
  font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;
  color:var(--ink);margin-bottom:1.2rem;letter-spacing:-.02em;
  position:relative;padding-bottom:.8rem;
}
.sd-coverage-desc h3::after{
  content:'';position:absolute;bottom:0;left:0;
  width:48px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--page-accent),var(--teal));
}
.sd-coverage-desc p{
  font-size:.95rem;color:var(--ink2);line-height:1.95;
  margin-bottom:.9rem;
}
.sd-coverage-desc ul{
  list-style:none;padding:0;margin-top:.5rem;
  display:flex;flex-direction:column;gap:.45rem;
}
.sd-coverage-desc ul li{
  font-size:.88rem;color:var(--ink2);line-height:1.7;
  padding-left:1.4rem;position:relative;
}
.sd-coverage-desc ul li::before{
  content:'▸';position:absolute;left:0;top:0;
  color:var(--page-accent);font-weight:700;
}

@media(max-width:860px){
  .sd-coverage-panels{grid-template-columns:1fr;gap:2rem}
  .sd-coverage-imgwrap{aspect-ratio:16/9;max-width:560px}
  .sd-coverage-descwrap{padding:0}
}

/* ── STATS ── */
.sd-stats-sec{background:var(--bg)}
.sd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3.5rem}
/* 2段組: 上段 2列(取引先・案件数) + 下段 4列 */
.sd-stats-top{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.sd-stats-bottom{margin-top:1.25rem}
.sd-stats-top .sd-stat{padding:50px 24px}
.sd-stats-top .sd-stat-num{font-size:clamp(2rem,4vw,3.4rem)}
.sd-stat-num .u-sub{font-size:.32em;color:var(--muted);font-weight:600;margin-left:4px;letter-spacing:.04em}
.sd-stat{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:42px 24px;text-align:center;transition:transform .25s,border-color .25s,box-shadow .25s}
.sd-stat:hover{transform:translateY(-6px);border-color:var(--page-accent);box-shadow:0 18px 40px rgba(0,0,0,.06)}
.sd-stat-num{font-family:'Syne',sans-serif;font-size:clamp(1.7rem,3.4vw,2.8rem);font-weight:800;line-height:1.05;margin-bottom:.7rem;color:var(--page-accent);letter-spacing:-.03em;display:flex;align-items:baseline;justify-content:center;gap:2px}
.sd-stat-num .u{font-size:.42em;color:var(--page-accent);font-weight:700;margin-left:4px}
.sd-stat-num.alt{color:var(--teal)}
.sd-stat-num.alt .u{color:var(--teal)}
.sd-stat-label{font-size:.82rem;color:var(--muted);letter-spacing:.04em;font-weight:500}

/* ── CTA ── */
.sd-cta{background:var(--white);text-align:center;overflow:hidden}
.sd-cta::after{content:'';position:absolute;bottom:-100px;right:-100px;width:380px;height:380px;background:radial-gradient(circle,rgba(217,95,26,.14) 0%,transparent 60%);pointer-events:none;animation:ctaFloat 6s ease-in-out infinite alternate}
@keyframes ctaFloat{from{transform:translate(0,0)}to{transform:translate(-30px,-25px)}}
.sd-cta-inner{position:relative;z-index:1;max-width:680px;margin:0 auto}
.sd-cta h2{font-family:'Syne',sans-serif;font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-bottom:1rem;color:var(--ink)}
.sd-cta p{font-size:.95rem;color:var(--muted);line-height:1.85;margin-bottom:2.5rem}
.sd-cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.sd-cta-btn{display:inline-block;padding:14px 36px;font-family:'Noto Sans JP',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.06em;text-decoration:none;border-radius:100px;transition:background .25s,color .25s,box-shadow .3s,transform .18s;border:2px solid transparent}
.sd-cta-btn.primary{background:var(--orange);color:var(--white);box-shadow:0 6px 20px rgba(217,95,26,.32)}
.sd-cta-btn.primary:hover{background:#c0521a;transform:translateY(-2px);box-shadow:0 10px 28px rgba(217,95,26,.45)}
.sd-cta-btn.secondary{border-color:var(--border2);color:var(--ink2);background:transparent}
.sd-cta-btn.secondary:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .sd-cards{grid-template-columns:1fr}
  .sd-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .sd-stats{grid-template-columns:1fr}
  .sd-hero{padding:120px 5vw 60px;min-height:auto}
  .sd-hero h1{font-size:clamp(1.45rem,5.5vw,1.9rem);line-height:1.4;word-break:auto-phrase;overflow-wrap:anywhere}
  .sd-hero-lead{font-size:.92rem;line-height:1.85}
}