/* =========================================================
   株式会社Unity — /service/ 専用スタイル
   style.css は編集せず :root 変数のみ再利用（衝突回避）
   トップの .svc-row は1行サマリ用。本ページは各サービスを
   「番号 + 名称 + 本文 + こだわり」のスペックシート調で詳述する
   ため、専用の .svc-detail 系を追加する。
   ========================================================= */

/* 冒頭リード（事業内容の総論） */
.svc-intro{
  border-left:3px solid var(--accent);
  padding-left:clamp(20px,3vw,34px);
  max-width:64ch;
  margin-bottom:clamp(48px,6vw,80px);
}
.svc-intro .lead{
  font-family:var(--disp);
  font-size:clamp(1.7rem,4.5vw,3rem);
  line-height:1.1;letter-spacing:.02em;
  margin-bottom:22px;
}
.svc-intro .lead .accent{display:block}
.svc-intro p{
  font-size:1rem;line-height:2.15;color:var(--ink-2);
}

/* サービス詳細リスト */
.svc-details{border-top:2px solid var(--ink)}
.svc-detail{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(18px,2.4vw,30px);
  padding:clamp(34px,4.5vw,56px) 0;
  border-bottom:1px solid var(--line-strong);
}

/* 見出し行：番号 + 名称(和文/英字) */
.svc-detail .svc-head{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:clamp(16px,2.6vw,30px);
}
.svc-detail .svc-no{
  font-family:var(--disp);
  font-size:clamp(2.2rem,6vw,3.6rem);
  color:transparent;-webkit-text-stroke:1.4px var(--ink-3);
  line-height:.9;
}
.svc-detail .svc-name{
  font-weight:900;
  font-size:clamp(1.35rem,3vw,2rem);
  letter-spacing:.04em;line-height:1.35;
}
.svc-detail .svc-name .en{
  display:block;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.18em;color:var(--ink-3);font-weight:500;
  margin-top:8px;text-transform:uppercase;
}

/* 本文 + こだわり：2カラム（広い画面） */
.svc-detail .svc-grid{display:grid;gap:clamp(20px,3vw,40px)}
.svc-detail .svc-desc{
  font-size:.98rem;line-height:2.1;color:var(--ink-2);max-width:60ch;
}

/* 【こだわり】ブロック：mono ラベル + 箇条 */
.svc-point{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  padding:clamp(20px,2.6vw,28px);
}
.svc-point .pk{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  color:var(--accent-dk);font-weight:700;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;margin-bottom:14px;
}
.svc-point .pk::before{content:"";width:24px;height:2px;background:var(--accent);display:inline-block}
.svc-point ul{display:grid;gap:10px}
.svc-point li{
  position:relative;padding-left:1.5em;
  font-size:.92rem;line-height:1.9;color:var(--ink);
}
.svc-point li::before{
  content:"／";position:absolute;left:0;top:0;
  font-family:var(--mono);color:var(--accent);font-size:.8rem;
}

/* 下部 CTA：施工実績 / お問い合わせ */
.svc-cta{
  display:grid;gap:16px;
  border:1px solid var(--line-light);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255,77,0,.1), transparent 55%),
    var(--ink-2);
  color:var(--concrete);
  padding:clamp(32px,5vw,56px);
}
.svc-cta h2{
  font-family:var(--disp);
  font-size:clamp(1.8rem,5vw,3.2rem);line-height:1.02;letter-spacing:.02em;
}
.svc-cta h2 .jp{
  display:block;font-family:var(--sans);font-weight:900;
  font-size:clamp(1rem,2.2vw,1.3rem);line-height:1.5;
  margin-top:14px;color:var(--concrete-3);
}
.svc-cta .svc-cta-actions{
  display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;
}
/* ダークセクション上で .btn-dark を可視化（既定は ink 地） */
.svc-cta .btn-dark{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.svc-cta .btn-dark:hover{background:transparent;color:var(--concrete);border-color:var(--concrete)}
.svc-cta .btn-line{
  display:inline-flex;align-items:center;gap:14px;
  background:transparent;color:var(--concrete);
  font-family:var(--mono);font-weight:700;font-size:.92rem;letter-spacing:.08em;
  padding:18px 30px;border:1px solid var(--line-light);transition:.25s;
}
.svc-cta .btn-line:hover{border-color:var(--accent);color:var(--accent)}

@media (min-width:768px){
  .svc-detail{grid-template-columns:1fr;gap:clamp(24px,3vw,38px)}
  .svc-detail .svc-grid{grid-template-columns:1.1fr .9fr;align-items:start}
}