/* =====================================================
   サービス詳細ページ共通スタイル
   (page-service-shokai.php / page-service-shien.php / page-service-kaigai.php)
   ※3ページのプロトタイプ <style> は完全一致のため共有化。
   ※image-slot 対象ルールは img.slot 対象へ書き換え済み。
   ===================================================== */

.svc-hero { background: var(--primary-deep); color: #fff; padding: 64px 0 0; overflow: hidden; }
.svc-hero .sh-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: end; }
.svc-hero .sh-tag { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; border-radius: 4px; padding: 5px 14px; margin-bottom: 18px; }
.svc-hero h1 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.35; }
.svc-hero p.lede { color: rgba(255,255,255,0.82); margin: 18px 0 36px; max-width: 560px; }
.svc-hero .sh-visual img.slot { width: 100%; height: 300px; object-fit: cover; display: block; border-radius: 14px 14px 0 0; }
.svc-hero .sh-text { padding-bottom: 56px; }
@media (max-width: 900px){ .svc-hero .sh-grid{ grid-template-columns:1fr; gap:0; } .svc-hero .sh-text{ padding-bottom:40px; } .svc-hero .sh-visual img.slot{ height:220px; } }

.ov-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ov-grid img.slot { width:100%; height:320px; object-fit:cover; display:block; border-radius:14px; }
@media (max-width:860px){ .ov-grid{ grid-template-columns:1fr; gap:28px; } .ov-grid img.slot{ height:220px; } }

.num-card .n-num { font-family:var(--heading-font); font-weight:900; font-size:26px; color:var(--accent); }
.scope-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.scope-grid .chip { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; font-weight:700; font-size:15px; color:var(--primary); display:flex; align-items:center; gap:10px; }
.scope-grid .chip::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
@media (max-width:760px){ .scope-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .scope-grid{ grid-template-columns:1fr; } }

/* 直営校カード内の画像 (海外日本語教育ページ・shape=rect) */
.card img.slot { width:100%; height:auto; object-fit:cover; display:block; }

/* ---------- 義務的支援10項目チェックリスト ---------- */
.duty-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
  margin-top: 32px;
  list-style: none;
  padding: 0;
}
.duty-list li {
  position: relative;
  padding: 14px 16px 14px 46px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.8;
}
.duty-list li::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary-deep);
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px) { .duty-list { grid-template-columns: 1fr; } }

/* ライトブルー地に白文字はコントラスト不足のため濃紺に。サイズも底上げ */
.svc-hero .sh-tag { background: var(--accent); color: var(--primary-deep); font-size: 14px; }