@charset "utf-8";
/* =========================================================
   /service_ai/（熊本のAIマーケティング導入支援）の補正CSS

   ⚠️ 紛らわしいので注意：
   `ai-service.css` は **別ページ** `/ai-service/`（page-ai-service.php）のもの。
   このファイルは page-service_ai.php からのみ読み込む。

   ベースは service.css の child-service-page--wp（ダーク写真ヒーロー＋ネイビー系）。
   ここに置くのは lp-production スキルのVisual QAで出た3点の修正だけ。

   1. 文字サイズのジャンプ率（既定 2.5倍 → 約3.1倍）
   2. 見出しの単語割れ防止（word-break: auto-phrase）

   ※ ヒーロー右の実物画像は 2026-08-25 に取り下げ（依頼により削除）。
      --wp の既定どおり、ヒーローは背景写真のみに戻っている。
   ========================================================= */

/* ---------- 1. 文字サイズのジャンプ率 ----------
   既定は 見出し38px / 本文15px＝2.5倍。見出しと本文の差が小さく、
   読む前に「何のページか」が入ってこない。約3.1倍まで広げる。
   本文を小さくして差を作らないこと（読者の年齢層が広い）。 */
.child-service-page--sai .service-hero h1 {
  font-size: clamp(29px, 3.5vw, 44px);
  line-height: 1.36;
}
.child-service-page--sai .service-title,
.child-service-page--sai .service-hero h1 {
  /* 日本語は文字単位で折り返すため、大きい見出しだと
     「アルル制作所」が「アル / ル制作所」に割れる。文節で折り返させる。
     text-wrap: balance は行の長さをそろえるだけで、単語割れは防がない。 */
  word-break: auto-phrase;
}
.child-service-page--sai .service-title {
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.42;
  text-wrap: balance;
}
.child-service-page--sai .service-hero-lead,
.child-service-page--sai .service-section-lead {
  font-size: 16.5px;
  line-height: 1.9;
}
.child-service-page--sai .service-card h3,
.child-service-page--sai .service-service strong,
.child-service-page--sai .service-flow-card h3 { font-size: 20px; line-height: 1.6; }
.child-service-page--sai .service-card p,
.child-service-page--sai .service-service p,
.child-service-page--sai .service-flow-card p { font-size: 15px; line-height: 1.9; }
.child-service-page--sai .service-faq-item h3 { font-size: 19px; }
.child-service-page--sai .service-faq-item p { font-size: 15.5px; line-height: 1.9; }
.child-service-page--sai .service-point-body p { font-size: 15px; line-height: 1.9; }

@media (max-width: 860px) {
  .child-service-page--sai .service-title { font-size: clamp(25px, 6.8vw, 32px); }
  .child-service-page--sai .service-hero-lead,
  .child-service-page--sai .service-section-lead { font-size: 16px; }
  .child-service-page--sai .service-card h3,
  .child-service-page--sai .service-service strong,
  .child-service-page--sai .service-flow-card h3 { font-size: 18px; }
}
@media (max-width: 900px) {
  .child-service-page--sai.child-service-page--wp .service-hero h1 {
    font-size: clamp(25px, 7.2vw, 33px);
  }
}