/* ============================================================
   service-aeo-llmo.css — /service/aeo-llmo/ 専用の差分スタイル
   読み込み: inc/enqueue.php（is_page( 'aeo-llmo' ) のときのみ）
   セクションの骨格・カード・フロー・FAQ・関連実績は本番の既存クラス
   （.features / .strengths / .overview / .flow / .info-table / .related-cases / .service-faq）
   をそのまま使うため、ここにはページ固有の差分だけを置く。
   ============================================================ */

/* ---------- セクション背景の白/グレー交互配置 ----------
   既存クラスの標準背景（.strengths=グレー、.overview=白 等）のままだと同色が連続するため、
   本ページの並び順に合わせて明示する（body.page-leaf .features=グレー は既存ルールのまま）。 */
body.page-leaf .azm-aeo-bg-white{background:var(--bg-white)}
body.page-leaf .azm-aeo-bg-gray{background:var(--bg-dark)}

/* ---------- HERO ---------- */
/* H1は2層：1行目＝サービス名（.page-hero-ja の大見出し）、2行目＝サブライン */
.azm-aeo-h1-sub{
  display:block;margin-top:14px;
  font-size:clamp(15px,1.5vw,22px);font-weight:700;line-height:1.6;
  letter-spacing:0;color:var(--text-secondary);text-shadow:none;text-wrap:balance;
}

/* ---------- CTAボタン（ヒーロー・最下部で共通） ----------
   主CTA（.btn-contact＝オレンジ塗りつぶし）と副CTA（.btn-ghost＝白地＋枠線）は、
   サイズを完全に揃え、区別は背景色・枠線だけで表現する。
   既存の .btn-contact / .btn-ghost は padding・font-size・border・display が異なるため、
   .azm-aeo-btn で寸法を上書きして統一する（色・ホバーは既存クラスのまま）。 */
.azm-aeo-btn{
  box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:min(100%,320px);min-height:56px;padding:0 24px;
  font-size:14px;font-weight:700;line-height:1.4;letter-spacing:0.05em;text-align:center;
  border:1.5px solid transparent;border-radius:3px;
}
.btn-contact.azm-aeo-btn{border-color:var(--accent)}
.btn-contact.azm-aeo-btn:hover{border-color:var(--accent-dark)}
.btn-ghost.azm-aeo-btn{border-color:var(--border)}
.btn-ghost.azm-aeo-btn:hover{border-color:var(--brand)}
.azm-aeo-cta-row{display:flex;flex-wrap:wrap;gap:16px}
/* ヒーローでは2カラムの下に全幅・中央寄せ */
.azm-aeo-hero-cta{
  grid-column:1/-1;
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
  padding:0 0 72px;
}

/* ---------- 本文中の inline code（8施策カード・FAQ回答） ---------- */
.strength-desc code,.faq-answer-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.9em;background:rgba(0,0,0,0.06);padding:2px 6px;border-radius:3px;
}

/* ---------- お問い合わせ（汎用 .secw 枠） ---------- */
/* grid item の自動最小幅が内容に引っ張られて横スクロールになるのを防ぐ */
.azm-aeo-sec .secw-meta,.azm-aeo-sec .secw-body{min-width:0}

/* 最下部CTA：2カラム時のみ、右カラム（ボタン）を左カラム高さの垂直中央に揃える
   （1024px以下は .secw-2col が1カラム縦積みになるため適用しない） */
@media(min-width:1025px){
  .azm-aeo-cta-sec .secw-2col{align-items:center}
}

/* ---------- マイルストーン表（既存 .info-table の見出し行対応） ----------
   .info-table は th に幅160px・nowrap を持つ（行見出し用）。見出し行の2列目まで同幅になり、
   列幅が均等割りになるのを防ぐ。 */
.overview-body .info-table thead th:last-child{width:auto}

/* 幅が足りなければ flex-wrap でボタンが縦に折り返す（小画面用の上書きは不要） */
@media(max-width:768px){
  .azm-aeo-hero-cta{padding-bottom:48px}
}