/* 企業向けAI導入・活用支援 — Cloud Assist（/ai/）ページ専用スタイル
   ファイル配置: /includes/ai/ai-style.css
   ai.html 内の <link rel="stylesheet" href="..."> から参照される。

   デザイナー制作のデザインカンプ（2026-07 受領）準拠の全面リスタイル版。
   ・見出し: 黒・太字・左揃え（eyebrow英字ラベルは廃止）
   ・背景: 白 と ライトグレー(#F6F6F6) の交互バンド
   ・ボタン: 赤塗り(.btn-fill) / 白地赤枠アウトライン(.btn-outline)、角丸4px
   ・カード: 白背景・角丸8px・ごく薄いシャドウ（事例カードのみ薄赤1px枠）
   ・アイコン/イラストは assets/ の生成画像（.sec-img / .icon-problem / .icon-svc / .step-img）

   すべてのセレクタを .ai-lp 配下にスコープし、WordPressテーマ(denettm)へ
   スタイルが漏れないようにしている。デザイントークン(CSS変数)も .ai-lp 配下に
   限定して定義しているため、テーマ側の変数とは衝突しない。 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Inter:wght@400;500;600;700&display=swap');

/* ================================================================
   DESIGN TOKENS（.ai-lp 配下に限定）
   ================================================================ */
.ai-lp {
  /* 正式なコーポレートレッド（cloudassist.jp/aws/deployment/ の実装値 --red: #ab010b に確定）。
     dark/line/50 はこの値からの派生トーン。 */
  --ai-red: #ab010b;
  --ai-red-dark: #890109;
  --ai-red-line: #EAC0C2;   /* 事例カードの薄赤枠 */
  --ai-red-50: #F8EBEB;

  --ink: #1A1A1A;
  --fg-1: #1A1A1A;
  --fg-2: #424242;
  --fg-3: #6E6E6E;
  --bg-0: #FFFFFF;
  --bg-soft: #F6F6F6;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-body: 18px;
  --fs-body-lg: 21px;

  --fw-bold: 700;
  /* cloudassist.jp本体（denettmテーマ）の実測値に合わせる:
     line-height 本文1.66・見出し1.5、letter-spacing 0.1em（本文・見出しとも） */
  --lh-heading: 1.5;
  --lh-body: 1.66;
  /* 見出しは大きいサイズで字間を効かせると間延びするため、
     本文の0.1emより詰めた値にする（サイズが上がるほどトラッキングを締める） */
  --ls-heading: 0.02em;

  --radius-btn: 12px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  --container-max: 1350px; /* mspに合わせる: WPテーマ本文コンテナ幅 */
  --container-pad: 24px;

  /* ラッパー自体の基本スタイル（旧 body 相当） */
  font-family: var(--font-jp);
  color: var(--fg-1);
  line-height: var(--lh-body);
  letter-spacing: 0.1em;
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  /* iOS Safari等で横向き時などに本文が勝手に拡大されるのを防ぐ */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* == フルブリード ==
     各セクションを画面幅(100vw)へ拡張する(下の .ai-lp>section)。
     ラッパー自体は通常フローのままにし、overflow-x:clip でセクション由来の
     はみ出し(スクロールバー幅など)による横スクロールだけを抑止する。
     ※azure/msp実装と同じくセクション単位でブレイクアウトする。 */
  overflow-x: clip;
}

/* リセット（.ai-lp 配下のみ） */
.ai-lp *,
.ai-lp *::before,
.ai-lp *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* セクションはフルブリード化したラッパー内で 100% 幅。
   背景色(.bg-soft)はラッパー全幅まで広がる。 */
.ai-lp>section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  padding: 96px 0;
  /* ページ内アンカー(#cases等)着地時にテーマの固定ヘッダーと重ならないよう余白を確保 */
  scroll-margin-top: 90px;
}

.ai-lp .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.ai-lp .bg-soft {
  background: var(--bg-soft);
}

/* ===== セクション見出し（黒・太字・左揃え） ===== */
.ai-lp .sec-head {
  margin-bottom: 56px;
}

.ai-lp .sec-title {
  font-size: 44px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-align: left;
}

/* PRODUCTSサブブロック用のやや小さい見出し */
.ai-lp .sec-title-sm {
  font-size: 27px;
}

.ai-lp .sec-lead {
  margin-top: 20px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* 日本語の不自然な改行（語中・末尾分割）を抑制し、文節単位で折り返す。
   未対応ブラウザでは無視され従来の改行にフォールバック */
.ai-lp .hero-sub,
.ai-lp .problem-label,
.ai-lp .btn-fill,
.ai-lp .btn-outline,
.ai-lp .sec-lead,
.ai-lp .card-desc,
.ai-lp .hero-cta-note,
.ai-lp .problem-bridge,
.ai-lp .step-sub,
.ai-lp .faq-q,
.ai-lp .faq-a,
.ai-lp .cta-sub,
.ai-lp .cta-dl-lead {
  word-break: auto-phrase;
  line-break: strict;
}

/* ===== ボタン（カンプ準拠の2種＋サイズ違い） ===== */
.ai-lp .btn-fill,
.ai-lp .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--radius-btn);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-standard);
}

.ai-lp .btn-fill svg,
.ai-lp .btn-outline svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* (a) 赤塗り＋白文字 */
.ai-lp .btn-fill {
  background: var(--ai-red);
  color: #fff;
}

.ai-lp .btn-fill:hover {
  background: var(--ai-red-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* (b) 白地＋赤枠＋赤文字のアウトライン */
.ai-lp .btn-outline {
  background: var(--bg-0);
  border: 2px solid var(--ai-red);
  color: var(--ai-red);
}

.ai-lp .btn-outline:hover {
  background: var(--ai-red-50);
  color: var(--ai-red-dark);
  border-color: var(--ai-red-dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* カード内の小ボタン（テキストが長いため折り返し許容） */
.ai-lp .btn-sm {
  padding: 12px 20px;
  font-size: 18px;
  gap: 6px;
  white-space: normal;
  text-align: left;
  line-height: 1.5;
}

.ai-lp .btn-sm svg {
  width: 16px;
  height: 16px;
}

/* CTA用の大ボタン */
.ai-lp .btn-lg {
  padding: 16px 40px;
  font-size: 18px;
}

/* ===== セクション内のアイコン・イラスト（assets/ の生成画像） ===== */
.ai-lp .sec-img {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
}

/* ステップ横のイラストのみ角丸（アイコンは白背景のため枠なし） */
.ai-lp .step-img {
  border-radius: var(--radius-card);
}

/* ===== 改行ユーティリティ ===== */
/* .br-pc はPC専用（SPで display:none）／.br-sp はSP専用（PCでは非表示）。
   SERVICEのタイトルはSPでイラストの右に並ぶため使える幅が狭く、
   「基盤構築・保守運用」が末尾1文字だけ折れるのを .br-sp で防いでいる */
.ai-lp .br-sp {
  display: none;
}

/* ※旧 .txt-pc / .txt-sp（PC・SPで長いリンク文言を差し替える対）は、
   リンク文言を全カード「詳しく見る」に統一して不要になったため削除（2026-08-04）。 */

/* ===== グリッド ===== */
.ai-lp .grid-3 {
  display: grid;
  /* 幅に応じて 3→2→1 列へ自動で折り返す（明示ブレイクポイント不要）。
     上限426pxは3枚並びのときの実寸。カードが1〜2枚でも横に伸びず同じ幅になる */
  grid-template-columns: repeat(auto-fit, minmax(260px, 426px));
  gap: 28px 12px;
  align-items: stretch;
}

/* PACKAGEはパッケージ名が長くなりがち（「AIマーケティングレポート」等）で、
   PRODUCTSと同じ1/3幅（426px上限）だとタイトルが折れる。PCでは親の1/2幅にする
   （列gap 12pxの半分を引く）。
   ※max() で426pxを下限にしているのは、769px付近だと 1/2 が354pxとなり
     従来（426px）より狭くなってしまうため。SPは1カラム全幅（下の指定）へ戻す */
.ai-lp #package .grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, max(426px, calc(50% - 6px))));
}

.ai-lp .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* margin-top は .icon-svc の飛び出し量と連動（最大高166px − 下端70px ＝ 96px ＋逃げ16px）。
   イラスト差し替え時は要再計算。カード幅はカンプ指定の318pxが上限 */
.ai-lp .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 318px));
  justify-content: center;
  gap: 12px;
  align-items: stretch;
  margin-top: 112px;
}

/* 標準カード（白背景・角丸8px・薄いシャドウ）
   position:relative は「カード全体をリンクの当たり判定にする」ための基準
   （下の .svc-link::after / .case-link::after ＝ stretched link 方式）。
   ※カード内の絶対配置要素は .icon-svc だけで、その親 .svc-card は元から
     position:relative を持つ。STEPのイラスト(.step-img)は .step-card の子ではなく
     .step-row(position:relative) の子なので、この追加で配置基準が変わる要素はない。 */
.ai-lp .card {
  position: relative;
  background: var(--bg-0);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 36px 32px;
  transition: box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}

/* 浮き上がり＋影の変化は「下層ページへのリンクを持つカード」だけに限定する。
   リンクのないカード（CASEの展示会名刺・STRENGTHの .step-card 4枚）まで
   押せそうに見えてデッドクリックになるのを防ぐ（2026-08-04 修正）。
   :has() 非対応の旧ブラウザではホバー演出が出ないだけで、機能には影響しない。 */
.ai-lp .card:has(.svc-link, .case-link):hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* リンクを持つカードはカード全体がクリック領域なのでポインタを出す */
.ai-lp .card:has(.svc-link, .case-link) {
  cursor: pointer;
}

/* ===== カード全体をクリック領域にする（stretched link） =====
   カードを <a> で包む書き換えはせず、カード内リンクの ::after をカード全面へ
   広げて当たり判定だけを拡張する（リンクの読み上げラベルは a 要素のまま維持）。
   inset:0 の基準は position:relative な祖先のパディングボックス＝カード内側全面。
   ※副作用としてカード内テキストは選択しにくくなる（stretched link 共通の性質）。 */
.ai-lp .svc-link::after,
.ai-lp .case-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* カードのどこをホバーしてもリンク側の表現（色・下線・矢印の動き）を発火させ、
   「カード全体が押せる」ことを視覚的に伝える */
.ai-lp .card:hover .svc-link,
.ai-lp .card:hover .case-link {
  color: var(--ai-red-dark);
  text-decoration: underline;
}

.ai-lp .card:hover .case-link svg {
  transform: translateX(3px);
}

/* キーボード操作: リンクにフォーカスが当たったらカード全体にリングを出し、
   フォーカスの見える範囲と実際の当たり判定（カード全面）を一致させる。
   色・太さは cloudassist.jp トップ（top-style.css）のフォーカスリングに合わせる */
.ai-lp .card:has(.svc-link:focus-visible),
.ai-lp .card:has(.case-link:focus-visible) {
  outline: 3px solid var(--ai-red);
  outline-offset: 3px;
}

/* 上のカード側リングが効く環境では、リンク文字まわりのブラウザ既定リングを消して
   二重表示を避ける。:has() 非対応の環境では既定リングがそのまま残るため、
   どの環境でもフォーカス位置が分かる状態を保てる */
@supports selector(:has(*)) {

  .ai-lp .svc-link:focus-visible,
  .ai-lp .case-link:focus-visible {
    outline: none;
  }
}

.ai-lp .card-title {
  font-size: 27px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  /* 27pxで2行になる見出しが多いため、--lh-heading(1.5)より詰める */
  line-height: 1.3;
  margin-bottom: 12px;
}

.ai-lp .card-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* ===================== HERO ===================== */
.ai-lp #hero {
  background: var(--bg-0);
  /* 直上にテーマ出力のH1（固定ページタイトル）が入る。
     H1とヒーロー本体の間に適度な余白を確保する */
  padding: 32px 0 88px;
}

.ai-lp .hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  /* カンプ準拠: 左=画像 / 右=キャッチ＋CTA
     比率は 0.9:1.1（テキスト列≈685px）だとFV1行目が途中で折り返すため 0.75:1.25 へ変更。
     コンテナ1350 − padding48 − gap56 = 1246px を配分し、
     テキスト列 = 1246 × 0.625 ≈ 779px（50px時の必要幅≈757pxに対し約22pxの余裕）。
     画像列は 1246 × 0.375 ≈ 467px。 */
  grid-template-columns: 0.75fr 1.25fr;
  gap: 56px;
  align-items: center;
}

/* ヒーロー左側のビジュアル（角丸） */
.ai-lp .hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-lp .hero-visual img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
}

.ai-lp .hero-catch {
  /* FV1行目「AIを「試した」で終わらせない。」の必要幅は
     実測で needed(f) ≒ 14.98×f + 7.5px（f=font-size。430px幅Chromium実測）。
     2カラム時のテキスト列幅内で途中折り返ししないよう列幅連動で可変。
     fallback(50px)はclamp非対応の旧ブラウザ用。
     ※実際に途中折り返しが発生したため、2026-07-31に列幅比率を 0.9:1.1 → 0.75:1.25 へ変更し、
       テキスト列を約685px → 約779pxに拡大して解消した（.hero-inner のコメント参照）。
       文言を長くする場合はこの余裕（約22px＝1.5文字弱）を超えないか確認すること。 */
  font-size: 50px;
  font-size: clamp(28px, 3.8vw - 6px, 50px);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: var(--ls-heading);
  margin-bottom: 26px;
}

/* カンプではキャッチ全体が黒。spanは将来の装飾余地として残し、色は継承にする */
.ai-lp .hero-catch .accent {
  color: inherit;
}

/* ヒーロー補足文（文言最終確定書 §1 で復活） */
.ai-lp .hero-sub {
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  line-height: var(--lh-body);
  margin-bottom: 30px;
}

.ai-lp .hero-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ヒーローCTA添え書き（マイクロコピー） */
.ai-lp .hero-cta-note {
  font-size: 14px;
  color: var(--fg-3);
  line-height: 1.8;
}

/* ===================== PROBLEM（4カラム・アイコン型） ===================== */
.ai-lp .problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.ai-lp .problem-item {
  text-align: center;
}

.ai-lp .problem-label {
  font-size: 21px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1.2857; /* XD実測 21/27 */
  letter-spacing: var(--ls-heading);
}

/* ラベル下のイラスト。上限285pxで、列幅が足りなければ縮む */
.ai-lp .icon-problem {
  width: 100%;
  max-width: 285px;
  height: auto;
  margin: 26px auto 0;
}

.ai-lp .problem-bridge {
  margin: 64px auto 0;
  text-align: center;
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: var(--fg-1);
  line-height: var(--lh-body);
}

/* .sub-block はサブブロックのため意図的に56px規約から外している（2026-08-03決定・戻さない）。
   基準は直上の要素：リードがあれば本文同士の12px、なければ見出し直下の20px */
.ai-lp .sub-block .sec-head {
  margin-bottom: 20px;
}

.ai-lp .sub-block .sec-head:has(.sec-lead) {
  margin-bottom: 12px;
}

/* ===================== SERVICE / PRODUCTS ===================== */
/* .sub-block はSERVICEと同じグレー帯の続き（サブブロック）として見せる */
.ai-lp #service {
  padding-bottom: 56px;
}

.ai-lp .sub-block {
  padding-top: 28px;
}

/* サブブロックが連続する場合、間を詰める（section基本値の96pxを上書き）。
   最後のサブブロックは次セクションとの間隔が要るのでそのまま */
.ai-lp .sub-block:has(+ .sub-block) {
  padding-bottom: 28px;
}

/* SERVICEカード: イラストがカード上端から飛び出す構成。
   イラストを absolute で逃がし、その分 padding-top で本文を押し下げる */
.ai-lp .svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 78px 24px 28px;
}

/* 4枚は縦横比がバラバラなのでサイズ指定せずSVG本来の寸法で表示し、
   bottom基準（カード上端から70px）で足元を揃える */
.ai-lp .icon-svc {
  position: absolute;
  bottom: calc(100% - 70px);
  left: 0;
  right: 0;
  margin-inline: auto;
}

/* 1行と2行のタイトルが混在するため、帯の高さを2行分で固定して上下中央に置き、
   4枚のタイトルと直下の本文の開始位置を横一列に揃える */
.ai-lp .svc-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(30px * 2);
  font-size: 27px; /* XD実測 27/30 */
  font-weight: var(--fw-bold);
  color: var(--ai-red);
  line-height: 1.111;
  letter-spacing: var(--ls-heading);
  text-align: center;
  margin-bottom: 20px;
}

/* SERVICE／PRODUCTSカード本文の段落設定（カンプのテキストパネル実値）
   18px / Medium(500) / 字送り50=0.05em / 行送り24px / 段落前後0。
   .ai-lp 既定（字間0.1em・行間1.66=約30px）だとカード内が間延びするため上書き */
.ai-lp .svc-card .card-desc,
.ai-lp .prod-card .card-desc {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.05em;
  margin: 0;
}

.ai-lp .svc-card .card-desc {
  margin-bottom: 28px;
}

/* カード最下部の赤文字リンク（旧: 赤塗りボタン）。
   margin-top:auto で4カードのリンク位置が揃う */
.ai-lp .svc-link {
  margin-top: auto;
  /* センター合わせ（flex縦カードの子なので align-self が水平方向） */
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ai-red);
  /* 直上の .card-desc と同サイズに揃える（16pxでは目立たず見落とされるため） */
  font-size: var(--fs-body);
  /* ナビエリアは字間0（.ai-lp 既定の0.1emを上書き）。
     4カラム318px幅では字間があると「〜を見る」が窮屈になるため */
  letter-spacing: 0;
  justify-content: center;
  text-align: center;
  max-width: 100%;
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  /* 段落ち防止。文言は全カード「詳しく見る」（5文字＝18pxで約90px＋gap4px＋矢印14px＝約108px）に
     統一したため、4カラムが最も狭くなる帯（1024px幅＝カード内容幅187px）でも1行に収まる。
     ※文言を長くする場合は1行に収まらなくなるので、この nowrap を外して折返しを許可すること
     （2026-08-05に font-size を16px→18px＝--fs-body に変更。余白は187-108=79pxあり） */
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.ai-lp .svc-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ai-lp .svc-link:hover {
  color: var(--ai-red-dark);
  text-decoration: underline;
}

/* PRODUCTSカード: チェックボックスアイコン＋黒タイトル＋赤文字リンク */
.ai-lp .prod-card {
  display: flex;
  flex-direction: column;
}

.ai-lp .prod-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 27px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  /* 「Claude Code（Cowork）」がぎりぎり2行になるため .card-title と揃えて詰める */
  line-height: 1.3;
  margin-bottom: 16px;
}

.ai-lp .prod-check {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--ai-red);
}

.ai-lp .prod-card .card-desc {
  margin-bottom: 24px;
}

/* ===================== 中間CTA ===================== */
.ai-lp #cta-mid {
  padding: 88px 0 8px;
}

.ai-lp .cta-mid-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ===================== CASE（薄赤枠カード） ===================== */
/* 罫線色・角丸は cloudassist.jp/aws/deployment/ の同種ボックス
   （.msp__link--block）実値に合わせる: border 1px solid #ab010b・radius 12px */
/* 縦フレックス化はカード下端のリンクを margin-top:auto で揃えるため */
.ai-lp .case-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ab010b;
  border-radius: 12px;
  box-shadow: none;
}

/* 【仕様】事例ブロックの最終行にカードが1枚だけ残る場合は、そのカードを横長（全幅）にする。
   :last-child:nth-child(odd) ＝「最後のカードで、かつ通し番号が奇数」＝2カラムの行に1枚だけ
   余った状態。カード枚数が増減しても自動で切り替わるので、HTML側にクラスを足す必要はない。
   768px以下は .grid-2 が1カラム化するため grid-column:1/-1 は実質無効＝通常カードと同じ幅。 */
.ai-lp .grid-2 > .case-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* 事例カードは基本シャドウなしなので、ホバー時のシャドウを個別に指定する。
   .card:has(...) と同様、リンクを持つカードだけに限定する */
.ai-lp .case-card:has(.case-link):hover {
  box-shadow: var(--shadow-md);
}

/* align-self:flex-start がないとピルがカード幅いっぱいに伸びる */
.ai-lp .case-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  margin-bottom: 14px;
}

/* 事例カードから詳細ページへのリンク（間隔は margin だと auto に潰されるので padding-top） */
.ai-lp .case-link {
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 700;
  color: var(--ai-red);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.ai-lp .case-link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.ai-lp .case-link:hover {
  color: var(--ai-red-dark);
  text-decoration: underline;
}

.ai-lp .case-link:hover svg {
  transform: translateX(3px);
}

/* ===================== STRENGTH（ジグザグ4ステップ） ===================== */
.ai-lp .steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 奇数行: カード左／イラスト右。
   イラストは absolute にして行の高さに影響させない（カードの高さが行の高さになり、
   イラストは上下へはみ出して隣の行に入り込む）。列幅280pxはイラストの居場所として確保 */
.ai-lp .step-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: center;
}

.ai-lp .step-row .step-card {
  grid-column: 1;
}

/* 偶数行: イラスト左／カード右 */
.ai-lp .step-row-rev {
  grid-template-columns: 280px 1fr;
}

.ai-lp .step-row-rev .step-card {
  grid-column: 2;
}

.ai-lp .step-card {
  position: relative;
  z-index: 1; /* はみ出したイラストより前面に */
  padding: 32px 36px;
}

.ai-lp .step-num {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ai-red);
  margin-bottom: 8px;
}

.ai-lp .step-title {
  font-size: 27px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: var(--lh-heading);
}

.ai-lp .step-sub {
  margin-top: 10px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ai-red);
  line-height: 1.6;
}

.ai-lp .step-card .card-desc {
  margin-top: 10px;
}

/* ステップ横のイラスト（331×350のたて長）。行の高さに影響しないよう absolute で置く。
   列幅280pxより大きい330pxにして、カード側へ10pxもぐり込ませている（面積感を出すため） */
.ai-lp .step-row .step-img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 330px;
  height: auto;
}

.ai-lp .step-row-rev .step-img {
  right: auto;
  left: 0;
}

/* ===================== FAQ（フラット表示） ===================== */
.ai-lp .faq-list {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.ai-lp .faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 21px;
  font-weight: 700;
  color: var(--ai-red);
  line-height: 1.6;
}

.ai-lp .faq-q svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--ai-red);
}

.ai-lp .faq-a {
  margin-top: 10px;
  padding-left: 34px; /* Qのアイコン幅＋gap分そろえる */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* ===================== 最終CTA ===================== */
.ai-lp #cta {
  background: var(--bg-0);
  padding: 88px 0 112px;
}

.ai-lp .cta-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
}

/* 最終CTAタイトル（文言最終確定書 §9 で復活） */
.ai-lp .cta-title {
  font-size: 44px;
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin-bottom: 18px;
}

.ai-lp .cta-sub {
  font-size: var(--fs-body-lg);
  color: var(--fg-1);
  margin-bottom: 32px;
  line-height: var(--lh-body);
}

/* 資料DL並記枠（Pardot URL確定までコメントアウト中。白背景向けの控えめな並記） */
.ai-lp .cta-dl {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--ai-red-line);
}

.ai-lp .cta-dl-lead {
  font-size: 18px;
  color: var(--fg-2);
  margin-bottom: 18px;
  line-height: 1.8;
}

.ai-lp .cta-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 32px;
  background: var(--bg-0);
  border: 2px solid var(--ai-red);
  color: var(--ai-red);
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}

.ai-lp .cta-dl-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ai-lp .cta-dl-btn:hover {
  background: var(--ai-red-50);
  color: var(--ai-red-dark);
  text-decoration: none;
}

/* ===== fade-up ===== */
.ai-lp .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard);
}

.ai-lp .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ai-lp .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .ai-lp .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===================== RESPONSIVE =====================
   ・.grid-3 は auto-fit で 3→2→1 列へ自動折返し
   ・.grid-2 は 768px 以下で 1 カラム化／.problem-grid は 2×2
   ・.grid-4(SERVICE) は 900px 以下で 2×2 → 768px 以下で 1 カラム
     （カード上端から飛び出すイラスト分、折返し時は行gapを widen する）
   ・タブレット: ヒーローを縦積み（テキスト上・画像下）
   ・スマートフォン: ヒーロー画像は非表示（テキスト主体）＋各サイズを縮小
   ====================================================== */

/* ※旧「中間幅（901〜1220px）で .grid-4 .svc-link の折返しを許可する」指定は、
   リンク文言を「詳しく見る」に統一して最狭帯（1024px幅＝カード内容幅187px）でも
   1行に収まるようになったため削除（2026-08-04）。 */

/* タブレット */
@media (max-width: 900px) {
  .ai-lp .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* 縦積み時はテキストを先に（DOM順は画像が先のため order で入れ替え） */
  .ai-lp .hero-text {
    order: 1;
  }

  .ai-lp .hero-visual {
    order: 2;
    max-width: 430px;
    margin: 0 auto;
  }

  /* 1カラム化で使える幅が広がるため上限46pxまで拡大
     （幅連動で1行目の途中折り返しは起こさない。係数は430px幅実測に整合） */
  .ai-lp .hero-catch {
    font-size: 46px;
    font-size: min(46px, calc((100vw - 76px) / 15));
  }

  .ai-lp .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* SERVICE: 4列だと1列あたりが狭くなりすぎるため2×2へ。
     カード幅の上限318pxは維持し、行gapは飛び出すイラスト分を確保する */
  .ai-lp .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 318px));
    gap: 88px 24px;
  }
}

/* スマートフォン */
@media (max-width: 768px) {
  .ai-lp {
    --container-pad: 18px;
  }

  /* スマホではテーマのコンテンツ列が画面中央に来ないテーマがあり、
     100vwブレイクアウトだと左右にズレて見切れる(左端の文字が切れる等)。
     スマホ幅では列がほぼ全幅なので、ブレイクアウトを解除し列いっぱいに収める。
     これにより、どのテーマレイアウトでも横ズレ・横スクロールが起きない。 */
  .ai-lp>section {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    padding: 56px 0;
    scroll-margin-top: 70px;
  }

  .ai-lp #hero {
    padding: 16px 0 56px;
  }

  /* スマホではヒーロー画像を非表示（テキスト主体に） */
  .ai-lp .hero-visual {
    display: none;
  }

  .ai-lp .sec-head {
    margin-bottom: 36px;
  }

  .ai-lp .hero-catch {
    /* 421〜448px帯(iPhone Pro Max系)を含む全スマホ幅で1行目が
       途中折り返ししないよう幅連動 (100vw - 64px) / 15。
       430px幅実測: 必要幅≒14.98×f+7.5px・利用可能幅≒100vw−51px より
       f ≤ (100vw−59px)/15 が境界。−64pxは安全マージン5px上乗せ。
       上限31px＝従来サイズ。下限20px（約364px未満の極小幅のみ折り返し許容）。 */
    font-size: 21px;
    font-size: clamp(20px, (100vw - 64px) / 15, 31px);
    line-height: 1.35;
    margin-bottom: 20px;
  }

  .ai-lp .sec-title {
    font-size: 26px;
  }

  .ai-lp .sec-title-sm {
    font-size: 22px;
  }

  /* 本文・リード文はスマホ幅に合わせて縮小（PCの20pxは大きすぎる） */
  .ai-lp .hero-sub,
  .ai-lp .sec-lead,
  .ai-lp .problem-bridge,
  .ai-lp .cta-sub {
    font-size: 16px;
  }

  .ai-lp .cta-title {
    font-size: 26px;
  }

  .ai-lp .sec-lead {
    margin-top: 14px;
  }

  .ai-lp .card-title,
  .ai-lp .svc-title,
  .ai-lp .step-title {
    font-size: 20px;
  }

  /* カード類は1カラム化＋余白を詰める */
  .ai-lp .grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ai-lp .grid-3 {
    gap: 16px;
  }

  .ai-lp .card {
    padding: 26px 22px;
  }

  /* PROBLEM: 2×2 を維持（カンプの4カラムをスマホでは2列に）。
     列gapを詰め、ラベルは14px・字間0にして各ラベル2行（<br>のみ）を維持する
     （2行目最長10文字×14px=140px ≤ 列幅。可読性の下限14pxは守る） */
  .ai-lp .problem-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }

  .ai-lp .problem-label {
    font-size: 14px;
    letter-spacing: 0;
  }

  .ai-lp .icon-problem {
    max-width: 180px;
    margin-top: 14px;
  }

  /* PC専用の改行（<br class="br-pc"）をSPでは無効化し、SP専用の改行を有効化 */
  .ai-lp .br-pc {
    display: none;
  }

  .ai-lp .br-sp {
    display: inline;
  }

  /* PACKAGEのPC用1/2幅指定はSPでは不要（1カラム全幅に戻す） */
  .ai-lp #package .grid-3 {
    grid-template-columns: 1fr;
  }

  .ai-lp .problem-bridge {
    margin-top: 40px;
    text-align: left;
  }

  /* SP: PCの「イラストがカード上端中央から飛び出す」構成は、タイトル用に上余白62pxが
     必要で縦に間延びする。SPはイラストをカード左上へ寄せ、タイトルを横へ並べる構成へ
     変更（2026-08-04）。
     縮小率は4枚とも一律0.7倍で揃える。高さが136〜166pxと開くので、足元の位置を深めに
     （カード上端から99px）取ることで飛び出し量を0〜18pxに収め、行gapを22pxまで詰める
     （足元を浅く取ると背の高い1枚が大きく飛び出し、gapを詰められなくなる）。
     見出し→1枚目の margin-top は44pxのまま（セクション内のリズムはカード間と別扱い） */
  .ai-lp .grid-4 {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 44px;
  }

  .ai-lp .svc-card {
    padding: 14px 20px 24px;
    /* イラストの中央寄せ基準に使う（絶対配置の基準＝パディングボックスなので、
       カードの左paddingぶんずらさないと h3 の空きエリア中央に載らない） */
    --svc-pad-x: 20px;
  }

  /* 4枚とも一律0.7倍。下端をカード上端から99px内側に揃え（足元そろえ）、
     横方向はタイトル左に確保した110pxの枠の中央に置く。
     0.7倍の実寸は幅66〜87px・高さ95〜116px、飛び出しは0〜18px。
     ※中央寄せは translateX(枠の半分 − 自身の半幅) で算出している。
       transform の percentage は縮小前の自幅基準、origin が bottom center なので
       scale しても中央位置は動かない。left/right/margin では幅が4枚バラバラなため揃わない */
  .ai-lp .icon-svc {
    left: var(--svc-pad-x);
    right: auto;
    margin-inline: 0;
    bottom: calc(100% - 99px);
    top: auto;
    height: auto;
    width: auto;
    transform: translateX(calc(55px - 50%)) scale(0.7);
    transform-origin: bottom center;
  }

  .ai-lp .svc-card .card-desc {
    margin-bottom: 20px;
  }

  /* タイトルはイラストの右へ横並び。イラスト幅が4枚バラバラ（75〜99px）なので、
     開始位置を揃えるため左に固定量110pxを確保し、その枠の中央にイラストを置く。
     min-height 85px＋上padding 14px＝99px＝イラスト下端の位置に一致させ、
     イラストが本文に被らないようにしている */
  .ai-lp .svc-title {
    min-height: 85px;
    justify-content: flex-start;
    text-align: left;
    padding-left: 110px;
    margin-bottom: 14px;
  }

  .ai-lp .prod-title {
    font-size: 20px;
  }

  .ai-lp .prod-check {
    width: 22px;
    height: 22px;
  }

  /* 中間CTA・最終CTAのボタンは全幅でタップしやすく */
  .ai-lp #cta-mid {
    padding: 48px 0 0;
  }

  .ai-lp .cta-mid-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  /* 中間CTA「まずは30分、オンラインで話してみる（無料）」(21文字)は375px幅で
     1行に収まらないため（1行化には13px以下が必要で可読性を損なう）、
     読点の後で文節折り返しさせる2行表示とする（文言は削らない）。
     最終CTA「30分オンライン相談を予約する」(15文字)は17pxのまま1行に収まる。 */
  .ai-lp .cta-mid-row .btn-lg,
  .ai-lp .cta-inner .btn-lg {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding: 16px 20px;
    white-space: normal;
  }

  .ai-lp .cta-mid-row .btn-lg {
    font-size: 16px;
    line-height: 1.6;
  }

  /* ジグザグ4ステップ: 縦積み（カード→イラストの順） */
  .ai-lp .steps {
    gap: 20px;
  }

  .ai-lp .step-row,
  .ai-lp .step-row-rev {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* 1カラムではカード→イラストの縦積み。列指定を解除する */
  .ai-lp .step-row .step-card,
  .ai-lp .step-row-rev .step-card {
    grid-column: auto;
  }

  /* SPは絶対配置を解除して通常フローに戻し、幅に合わせて縮小 */
  .ai-lp .step-row .step-img,
  .ai-lp .step-row-rev .step-img {
    position: static;
    transform: none;
    width: 100%;
    max-width: 330px;
    height: auto;
    margin-inline: auto;
  }

  .ai-lp .step-card {
    padding: 26px 22px;
  }

  .ai-lp .faq-list {
    gap: 28px;
  }

  .ai-lp .faq-q {
    font-size: 17px;
  }

  .ai-lp .faq-q svg {
    width: 20px;
    height: 20px;
    margin-top: 3px;
  }

  .ai-lp .faq-a {
    padding-left: 32px;
  }

  /* ヒーローのCTAボタンは内容幅に収める
     （全幅だと巨大に見えるため。タップ領域は確保）。
     「30分オンライン相談を予約する（無料）」(19文字＋メールアイコン)が
     375px幅で1行に収まるようフォント15px・左右padding16pxまで詰める
     （実測: 文字幅≒18.1×fs。15pxで271.5+アイコン26+padding32=329.5 ≤ 339px=375−18×2）。
     幅超過時（〜365px未満）はボタン内テキストが文節単位で折り返す。 */
  .ai-lp .hero-cta-row .btn-fill,
  .ai-lp .hero-cta-row .btn-outline {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    align-self: flex-start;
    padding: 12px 16px;
    font-size: 15px;
    white-space: normal;
    text-align: left;
  }

  /* DLボタン: 全幅＋左右paddingを詰めて375pxでも1行に収める
     （white-spaceは通常値のため、極小幅では折り返して収まり、はみ出さない） */
  .ai-lp .cta-dl-btn {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* 小型スマートフォン */
@media (max-width: 420px) {
  .ai-lp {
    --container-pad: 16px;
  }

  .ai-lp .sec-title,
  .ai-lp .cta-title {
    font-size: 23px;
  }

  .ai-lp .card,
  .ai-lp .step-card {
    padding: 24px 20px;
  }

  /* SERVICEカードは飛び出すイラスト用に上余白を別途持っているため、
     直上の .card 一括指定（同詳細度・後勝ち）で潰されないよう再宣言する。
     ※これが無いと420px以下でイラストがタイトルに被る（2026-08-04 修正） */
  .ai-lp .svc-card {
    padding: 14px 18px 24px;
    --svc-pad-x: 18px;
  }
}

/* 〜400px（iPhone標準幅帯）: ヒーローCTAを14px・左右padding14pxまで詰めて、
   テーマ側の左右余白が残る環境でも「30分オンライン相談を予約する（無料）」を1行に保つ
   （必要幅≒文字18.1×14px＋アイコン26px＋padding28px≒307px。
     それも確保できない極小幅では文節単位の折り返しを許容） */
@media (max-width: 400px) {
  .ai-lp .hero-cta-row .btn-fill,
  .ai-lp .hero-cta-row .btn-outline {
    font-size: 14px;
    padding: 12px 14px;
  }
}