/* ==========================================================
   service-ses.css — SES固有のセクション（coverage / flow / support）
   common.css + service-page.css を読み込んだ上で適用
   ========================================================== */

/* ── COVERAGE — セクション全体に画像ホバーシステム ── */
.sd-coverage{position:relative;overflow:hidden}
.coverage-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.coverage-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease}
.coverage-bg-img::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55)}
.coverage-bg-img.show{opacity:1}
.sd-coverage > .s-chip,
.sd-coverage > .s-title,
.sd-coverage > .s-sub,
.sd-coverage > .coverage-grid{position:relative;z-index:2}

.coverage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.5rem;margin-top:3.5rem}
.coverage-card{position:relative;overflow:hidden;min-height:340px;background:var(--white);border:1px solid var(--border);border-radius:20px;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .4s,opacity .5s,background .5s;will-change:transform}
.coverage-card-img{display:block;width:100%;height:180px;object-fit:cover;object-position:center;flex:0 0 auto}
.coverage-card-body{padding:24px 20px;flex:1}
.coverage-card-title{font-family:'Noto Sans JP',sans-serif;font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.7rem;letter-spacing:.01em;transition:color .4s}
.coverage-card-desc{font-size:.85rem;color:var(--muted);line-height:1.7;transition:color .4s}

.sd-coverage.hovering .s-title,
.sd-coverage.hovering .s-sub,
.sd-coverage.hovering .coverage-card-title,
.sd-coverage.hovering .coverage-card-desc{color:#ffffff}
.coverage-card.active{transform:translateY(-10px);background:transparent;box-shadow:0 20px 50px rgba(0,0,0,.4);border-color:rgba(255,255,255,.3)}
.coverage-card.dimmed{opacity:.3;transform:scale(.95)}

@media (hover:none){
  .coverage-bg-img{opacity:0!important}
  .coverage-card.active,.coverage-card.dimmed{transform:none;opacity:1;background:var(--white);box-shadow:none;border-color:var(--border)}
  .sd-coverage.hovering .s-title,
  .sd-coverage.hovering .s-sub,
  .sd-coverage.hovering .coverage-card-title,
  .sd-coverage.hovering .coverage-card-desc{color:inherit}
}

/* ── FLOW（依頼から参画までの流れ） ── */
.sd-flow{background:var(--white)}
.s-title .ac{color:var(--orange)}
.flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.flow-card{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:34px 28px 30px;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .3s}
.flow-card:hover{transform:translateY(-6px);border-color:var(--orange);box-shadow:0 18px 40px rgba(0,0,0,.06)}
.flow-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange)}
.flow-num{font-family:'Syne',sans-serif;font-size:2.8rem;font-weight:800;color:rgba(217,95,26,.18);line-height:1;margin-bottom:.6rem;letter-spacing:-.04em}
.flow-label{font-family:'Noto Sans JP',sans-serif;font-size:1rem;font-weight:800;color:var(--ink);letter-spacing:.02em;margin-bottom:.7rem}
.flow-desc{font-size:.85rem;color:var(--muted);line-height:1.85}

/* ── SUPPORT（エンジニアサポート体制） ── */
.sd-support{background:var(--bg)}
.support-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3.5rem}
.support-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:36px 32px 34px 38px;transition:transform .25s,border-color .25s,box-shadow .3s;position:relative;overflow:hidden}
.support-card:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 18px 40px rgba(0,0,0,.06)}
.support-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--orange)}
.support-card:nth-child(even)::before{background:var(--teal)}
.support-num{font-family:'Syne',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--orange);margin-bottom:.7rem}
.support-card:nth-child(even) .support-num{color:var(--teal)}
.support-title{font-family:'Noto Sans JP',sans-serif;font-size:1.1rem;font-weight:800;color:var(--ink);margin-bottom:.9rem;line-height:1.4;letter-spacing:-.01em}
.support-body{font-size:.88rem;color:var(--muted);line-height:1.85}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .flow-grid{grid-template-columns:1fr 1fr}
  .support-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .flow-grid{grid-template-columns:1fr}
}