/* ============================================================
   4つの事業ページ（/service/*）のスマホ調整
   既存の service-figure.css は触らず、あとから読み込んで上書きする
   ・詰まりすぎていた余白をゆるめる
   ・図の横スクロールをやめ、左右比較を縦に積む
   ・背景アニメーションはスマホでは動かさない
   ・日本語の改行（字間・禁則）を整える
   ============================================================ */

/* スマホでだけ効く改行。PCでは1行に収まるので出さない */
.svc-page .sp-br{display:none;}
@media (max-width:820px){ .svc-page .sp-br{display:inline;} }

@media (max-width:820px){

  /* ── 背景のアニメーションはスマホでは邪魔になるので出さない ── */
  .svc-page .proposal-motion-stage{display:none !important;}

  /* ── 見出しと導入文の改行 ──
     字間が効いて行末に1〜2文字だけ残る箇所が出ていた。
     gb-lead の <br> は、狭い画面ではさらに折り返されて行が割れるので無効にする */
  .svc-page main h1,
  .svc-page main h2,
  .svc-page main h3{letter-spacing:0;line-break:strict;text-wrap:balance;}
  /* h1 が 32.8px だと12字の行がはみ出していたので少し下げる */
  .svc-page .gb-cover h1{font-size:clamp(25px,7vw,30px);}
  .svc-page .gb-lead{letter-spacing:0;line-height:2;}

  /* ── 日本語の改行 ──
     サイト共通の letter-spacing:.02em で1行に入る文字数が減り、
     行末に1〜2文字だけ残る箇所が出ていた */
  .svc-page main p,
  .svc-page main li,
  .svc-page main .sec-lead,
  .svc-page main .gb-lead{
    letter-spacing:0;
    word-break:auto-phrase;
    line-break:strict;
    text-wrap:pretty;
  }

  /* ── 余白：全体に窮屈だったのでゆるめる ── */
  .svc-page main > section{padding:64px 0;}
  .svc-page main > section.statement-band{padding:72px 0;}
  .svc-page main section > .container > .sec-lead{margin-top:18px;line-height:2;}

  .svc-page .bene li{padding:22px 0;gap:8px;}
  .svc-page .bene p{line-height:1.95;}
  .svc-page .gb-flow{row-gap:16px;}
  .svc-page .gb-flow li{padding:16px 0 14px 12px;}
  .svc-page .gb-flow p{line-height:1.85;margin-top:4px;}
  .svc-page .gb-steps > div{padding:18px 0;gap:6px;}
  .svc-page .deliver-grid li{padding:18px 16px;}
  .svc-page .case-brief{gap:14px;}
  .svc-page .stat-band{padding:32px 22px;}
  .svc-page .gb-contents{padding:52px 0;}
  .svc-page .gb-toc a{padding:16px 0;}

  /* ── 図：横スクロールをやめる ──
     左右で比較している図は JS が2枚に分けるので、幅いっぱいで縦に積む */
  .svc-page .gb-fig{overflow-x:visible;margin-top:26px;}
  .svc-page .gb-fig svg{min-width:0;width:100%;height:auto;max-height:none;}
  .svc-page .gb-fig figcaption{margin-top:14px;font-size:12.5px;line-height:1.85;letter-spacing:0;}

  /* 分割した2枚目との間隔 */
  .svc-page .gb-fig.is-split svg + svg{margin-top:14px;}

  /* 分割できない図（2軸のマトリクスなど）は横スクロールのまま。
     スクロールできることが分かるよう、右端に淡いフェードを出す */
  .svc-page .gb-fig.is-scroll{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .svc-page .gb-fig.is-scroll svg{min-width:600px;width:600px;}
  .svc-page .gb-fig.is-scroll::-webkit-scrollbar{height:3px;}
}