@charset "UTF-8";

/* =========================================================
   AIサポーターLP 専用スタイル（ai-samurai.html でのみ読み込む）
   - css/style.css の後ろに読み込みます。
   - 既存サイトと衝突しないよう、クラス名はすべて ai-lp- で始めます。
   - 色・角丸などLP固有の値は .ai-lp スコープ内の変数にまとめています。
   ========================================================= */

.ai-lp {
  /* 5枚の士業カードの紺い部分に使う色。
     もとはノートPC画像（img/ai-support-hero.png）の画面背景から抽出した
     #0f192a → #071d48 でしたが、ほぼ黒く見えたため、2026-08-29に
     青みを強めて明るくしています（画像の色そのものではありません）。
     白文字とのコントラストは 12.6:1 / 10.8:1 で、AAA基準（7:1）を満たします。 */
  --lp-screen-top: #1b3358;
  --lp-screen-bottom: #0f3b7d;
  --lp-navy: #08234a;
  --lp-navy-deep: #05182f;
  --lp-blue: #1777f2;
  --lp-blue-dark: #1160c7;
  --lp-sky: #7ccaff;
  --lp-green: #53d0aa;
  --lp-green-ink: #0f7a5e;
  --lp-soft: #f3f7fb;
  --lp-line: #dde5ee;
  --lp-r-s: 12px;
  --lp-r-m: 16px;
  --lp-r-l: 22px;
}

/* ---------- 共通パーツ ---------- */

.ai-lp-section {
  padding: 84px 0;
}

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

/* 2026-08-29：セクションどうしの間隔は 84px＋84px＝168px が標準ですが、
   料金（PRICE）と比較（COMPARE）は地色が同じ（--lp-soft）でひと続きに読ませる並びのため、
   ここだけ 40px＋44px＝84px（およそ半分）に詰めます。
   このクラスを付けた組み合わせだけが対象で、ほかのセクション間の余白は変えていません。
   ※ スマホ（700px以下）は 60＋60＝120px → 28＋32＝60px。max-width:700px のブロックにも
     同じクラスの指定を置いています（クラスの詳細度が同じなので、後ろのそちらが効きます）。

   2026-08-30：**同じ組み合わせを、ai-samurai.html の次の4か所に使いました**
   （いずれも「上が広すぎる」というご指摘への対応で、値は上のまま・クラスを足しただけです）。
   ・AI化できる業務例（WHAT AI CAN DO）→ 士業カード（FOR PROFESSIONAL FIRMS）：169px → 84px
   ・士業カード（#shigyo）→ 料金（#price）：169px → 85px
   ・比較（#plan-compare）→ FLOW：168px → 84px
   ・FLOW → AI・DX開発（AI & DX DEVELOPMENT）：168px → 84px
     ※ AI・DX開発は地色が同じ白で、スマホでは図が先に来るため
       「前セクションの下端 → 図の上端」も同じ84px（スマホ60px）になります。
     ※ 1つのセクションが tight-top と tight-bottom の両方を持つ形になっています
       （#shigyo と FLOW）。上下それぞれ別の隣接関係に効くので競合しません。 */
.ai-lp-section-tight-bottom {
  padding-bottom: 40px;
}

.ai-lp-section-tight-top {
  padding-top: 44px;
}

/* 2026-08-30：料金（PRICE）と比較（COMPARE）の間を**さらに半分**に詰めるための組み合わせ。
   この2つは地色（--lp-soft）が同じで境目の罫線もないため、ひと続きの表として読めます。
   84px（40＋44）→ **42px（22＋20）**。スマホは 60px（28＋32）→ **30px（16＋14）**。
   上（COMPAREのpadding-top）を 44 → 20 と大きめに、
   下（PRICEのpadding-bottom）を 40 → 22 と控えめに減らして、
   「COMPAREラベルの上の余白を中心に詰める」形にしています。
   ※ `.ai-lp-section-tight-*` は **#shigyo → #price の間で使い続けている**ので、
     そちらの値は変えずに、この別クラスを新設して #price / #plan-compare に付け替えました。 */
.ai-lp-section-tighter-bottom {
  padding-bottom: 22px;
}

.ai-lp-section-tighter-top {
  padding-top: 20px;
}

/* 見出しは1行で見せたいので幅を制限しません。
   読みやすさのための 46em の制限は、下のリード文（p）だけに掛けています。 */
.ai-lp-head {
  margin-bottom: 40px;
}

.ai-lp-head .ai-lp-en {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--lp-blue);
}

/* 上限を33px→31pxにしています。DX & FUNDING は2カラムで見出し欄が
   624pxしかなく、33pxのままだと「本格的な開発には、補助金活用もご提案。」が
   14px はみ出して2行に折り返すためです。 */
.ai-lp-head h2 {
  font-size: clamp(23px, 2.9vw, 31px);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.ai-lp-head p {
  max-width: 46em;
  margin: 16px 0 0;
  font-size: 15.5px;
  color: var(--ink-mute);
}

/* 2026-08-29：#shigyo（サポートAIの対応士業）のリード文だけ、幅の上限を広げています。
   文章が98文字あり、46em＝713px では PC でも3行になるため、2行に収まる 52em＝806px に。
   必要幅は 1498px なので1行あたり749px以上あれば2行になります。コンテナは1120pxあるので
   はみ出しません。`.ai-lp-head p`（詳細度0,1,1）を上書きするため要素＋クラスで0,2,1にし、
   定義も後ろに置いています。 */
.ai-lp-head p.ai-lp-lead-wide {
  max-width: 52em;
}

/* 見出し中の改行。狭い画面では改行位置を機械にまかせます。 */
@media (max-width: 560px) {
  .ai-lp-br {
    display: none;
  }
}

.ai-lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border: 2px solid transparent;
  border-radius: var(--lp-r-s);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.15s ease;
}

.ai-lp-btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.ai-lp-btn-main {
  background: var(--lp-blue);
  color: #fff;
}

.ai-lp-btn-main:hover {
  background: var(--lp-blue-dark);
  color: #fff;
}

/* 枠線だけのボタン。ファーストビューでのみ使っています。
   背景が白なので、枠線・文字とも青にしています。 */
.ai-lp-btn-sub {
  border-color: rgba(23, 119, 242, 0.55);
  background: #fff;
  color: var(--lp-blue);
}

.ai-lp-btn-sub:hover {
  background: rgba(23, 119, 242, 0.08);
  border-color: var(--lp-blue);
  color: var(--lp-blue-dark);
}

.ai-lp-btn-outline {
  border-color: var(--lp-blue);
  color: var(--lp-blue);
  background: #fff;
}

.ai-lp-btn-outline:hover {
  background: var(--lp-blue);
  color: #fff;
}

/* 2026-08-29：青地＋白文字から、白地＋青文字＋青枠線に反転したボタン。
   「本格開発について相談する」「技術顧問の件で相談する」「AI導入について相談する」の
   3つに付けています。.ai-lp-btn-main の後ろに書いて、色だけを上書きしています。
   ・文字だけ一段濃い青（--lp-blue-dark）にしているのは、白地でのコントラスト比を
     4.5:1以上（実測5.96:1）にして読みやすくするためです。枠線は --lp-blue のままです。
   ・矢印（→）は色を指定していないので、文字と同じ青になります。
   ・太さ・大きさは .ai-lp-btn のまま（16px / 700）で変えていません。 */
.ai-lp-btn-invert {
  border-color: var(--lp-blue);
  background: #fff;
  color: var(--lp-blue-dark);
  /* 共通の .ai-lp-btn には box-shadow が入っていないので、ここで足しています */
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* ホバー時は、反転前（青が濃くなる）と同じ感覚になるよう、
   薄い青の地が入り、枠線が濃くなり、青い影が付きます。
   浮き上がり（translateY(-2px)）は共通の .ai-lp-btn:hover のままです。 */
.ai-lp-btn-invert:hover {
  border-color: var(--lp-blue-dark);
  background: rgba(23, 119, 242, 0.08);
  color: var(--lp-blue-dark);
  box-shadow: 0 8px 20px rgba(23, 119, 242, 0.20);
}

/* 目立たない補足・注記 */
.ai-lp-note {
  margin: 24px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--lp-line);
  border-radius: 0 var(--lp-r-s) var(--lp-r-s) 0;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-mute);
}

.ai-lp-section-soft .ai-lp-note {
  background: #fff;
}

/* ---------- ファーストビュー ---------- */

.ai-lp-hero {
  position: relative;
  overflow: hidden;
  /* 2026-08-29：ロゴの上の余白が広すぎたので 76px → 44px に。
     このLPは共通ヘッダーを出さないため、この上余白がページ最上部の余白になります。 */
  padding: 44px 0 68px;
  /* 白背景。下にいくほど白へ抜いて、直下のセクションと地続きに
     見えないようにしています。境目には罫線も入れています。 */
  background:
    radial-gradient(760px 360px at 86% 0%, rgba(23, 119, 242, 0.1), transparent 62%),
    linear-gradient(160deg, #eef4fc 0%, #f7fafe 42%, #ffffff 82%);
  border-bottom: 1px solid var(--lp-line);
  color: var(--ink);
}

.ai-lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 白地では白い線が見えないので、紺の細線にしています。 */
  background-image:
    linear-gradient(rgba(8, 35, 74, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 35, 74, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 22% 46%, #000 10%, transparent 74%);
  mask-image: radial-gradient(ellipse at 22% 46%, #000 10%, transparent 74%);
}

.ai-lp-hero > .container {
  position: relative;
  z-index: 1;
}

.ai-lp-hero .ai-lp-en {
  display: block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--lp-blue);
}

.ai-lp-hero h1 {
  font-size: clamp(31px, 5.4vw, 54px);
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--lp-navy);
}

/* 見出しの上に置く一文。枠・背景は付けず、テキストだけで見せます。
   黒文字。見出しの直上に置く行なので、下余白は詰めています。
   2026-08-29：13px → 15px に拡大。全角21文字ぶんで315pxなので、
   左カラム492pxに1行で収まります（18pxまでなら1行を保てます）。 */
/* 2026-08-29：h1「士業に強い味方、AIサポーター。」だけを6px上げるため、
   この行の下余白を 10px → 4px にしています。h1より下の要素は動かさないよう、
   .ai-lp-hero-line2-badge の上余白を同じ6pxぶん増やして相殺しています。
   （片方だけ変えると、バッジから下の全部が一緒に上がってしまいます） */
/* 2026-08-29：「もう少し大きい字で」のご指示で 15px固定 → min(17px, 4.0cqi) に。
   この文言は22文字ぶんで、1行に収まる上限は 100 ÷ 22 ＝ 4.55cqi。4.0cqi はその88%です。
   固定15pxだと360px以下の画面で2行に折り返していましたが、
   左カラムの幅に連動させたことでスマホでも1行に収まるようになりました。
   1行目は cqi 非対応ブラウザ向けのフォールバックです。 */
.ai-lp-hero-note {
  margin: 0 0 4px;
  font-size: clamp(13px, 1.6vw, 17px);
  font-size: min(17px, 4.0cqi);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.ai-lp-sub {
  margin: 20px 0 0;
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700;
  color: var(--lp-blue);
}

/* 見出しの2行目。h1（1行目）と合わせて
   「士業のためのAIサポーター。／サポートAI誕生！」の2行構成にする行です。
   h1が折り返した2行目ではなく、意図して足した別の行なので、
   他ページのサブコピー（.ai-lp-sub）とは別のクラスにしています。
   ・大きさは1行目の約0.93倍（35.4px に対して 33px）。見出しの2行目として読ませたいので、
     注釈に見えないよう1行目に近づけています。
     cqi の係数を 5.77 にしているのは、幅が狭いときに2行目が1行目を追い越さないよう、
     1行目の 6.2cqi に対して同じ 0.93 倍を保つためです
   ・h1と同じく左カラムの幅で縮め、常に横1行を保ちます
     （「「サポートAI」誕生！」は全角にして約10文字ぶん。上限は約9.9cqiなので 6.7cqi は十分下）
   ・見出しの続きに見せるため、上の余白は .ai-lp-sub の20pxより詰めて10pxにしています */
/* 2026-08-29：2行目「「サポートAI」サービス誕生！」の上に置く小さなバッジの行。
   バッジ自体は .ai-lp-badge ＋ .ai-lp-badge-service ですが、
   このページのこの1つだけ「白地＋青罫線＋青文字の四角」に変えています。 */
.ai-lp-hero-line2-badge {
  /* display: flex にしているのは、インライン要素のままだと行ボックスに
     ディセンダ（文字の下に伸びる部分）ぶんの空きができ、バッジの下に
     14pxほど見えない余白が残るためです。 */
  display: flex;
  /* 上余白 8px → 14px（2026-08-29に .ai-lp-hero-note で詰めた6pxぶんの足し戻し）
     → 22px（2026-08-30に h1 を負の上余白で8px上げたぶんの足し戻し）。
     バッジから下の位置が変わらないようにするための相殺です。 */
  margin: 22px 0 0;
  line-height: 1;
}

/* バッジ自身が持つ下余白14px（.ai-lp-badge 由来。同じ詳細度の
   .ai-lp-badge-service の margin-bottom: 0 は記述順で負けています）を、
   詳細度を1段上げて打ち消します。これが残っていると16px空いたままになります。 */
.ai-lp-hero-line2-badge .ai-lp-badge {
  margin-bottom: 0;
  /* 丸いピル（999px）ではなく四角。角丸4pxはトップページのタグ（.tags li）と同じ値。
     色は青ベタ塗り＋白文字ではなく、白抜き（白地）です。
     2026-08-30：**罫線と文字を青（--lp-blue ＝ #1777f2）から黒（--ink ＝ #1c2530）に**。
     真っ黒（#000）ではなく、すぐ下の2行目「「サポートAI」サービス！」と同じ色にそろえています。
     背景（#fff）・角丸（4px）・罫線の太さ（1px）・余白・文字サイズは変えていません。
     ※ このバッジはページ内でここ1つだけです（`.ai-lp-hero-line2-badge` は ai-samurai 専用）。
       他ページや最終CTAの `.ai-lp-badge` は青のままです。 */
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}

/* バッジのすぐ下に来るときだけ、2行目の上余白を調整します。
   2行目は文字30.5px・行の高さ41.2pxなので、文字の上に約5.3pxの空きが
   もともとあります。ここの値＋5.3pxが見た目の間隔になります（約7px）。 */
.ai-lp-hero-line2-badge + .ai-lp-hero-line2 {
  margin-top: 2px;
}

/* 2026-09-01：サービス名の左に業種のアイコンを置くため、この行を横並びにしました。
   アイコンと文字は align-items: center で縦中央にそろえます。
   文字側（.ai-lp-hero-name）は幅を持たない inline のままなので、
   これまでの文字サイズの計算（cqi）はそのまま効きます。 */
.ai-lp-hero-line2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 10px 0 0;
  white-space: nowrap;
  /* 1行目は cqi 非対応ブラウザ向け */
  font-size: clamp(28px, 6.4vw, 50px);
  /* 2026-08-30：文言を「「サポートAI」サービス！」から「サポートAI」に変更し、
     あわせて「もっと太く・大きく」のご指示を反映しました。
     文言は全角5文字ぶん（サポート＝4、AIは半角2つで1）。
     1行に収まる上限は 100 ÷ 5 ＝ 20cqi で、その94%の 18.8cqi を採用しています。
     文言を変えたら必ずこの計算をやり直してください。
     ・上限は 46px → 64px → 54px → **50px** と調整してきました
       （左カラムは1160px以上で約492px。18.8cqi＝約92pxになるため、
       広い画面ではこの50pxで頭打ちになります）。元の46pxよりは大きい状態です。
     ・10vw は狭い画面用の頭打ちです。これを入れないと、320pxの画面で
       約53pxとなり、すぐ上の h1 に対して大きくなりすぎます（320pxで32px）。 */
  font-size: min(50px, 18.8cqi, 10vw);
  /* 2026-08-30：800 → 900（ご指示により、より太く） */
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.01em;
  /* 2026-08-30：青（--lp-blue ＝ #1777f2）から**黒**に変更。
     サイトの本文で使っている --ink（#1c2530）です。真っ黒（#000）ではなく、
     すぐ上の一文「高い費用や〜」と同じ色なので、ページの中で浮きません。
     ※ 1行目の h1「士業に強い味方、AIサポーター。」は紺（--lp-navy ＝ #08234a）です。
       2行そろえて紺にしたい場合は、ここを var(--lp-navy) に変えてください。 */
  color: var(--ink);
}

/* 価格の訴求コピー。サブコピーより一回り大きい太字にし、
   数字の部分だけさらに大きく青にして目を引かせています。
   1行に必要な幅は文字サイズの約21.6倍（=1行に収まる上限は約4.6cqi）。
   2026-08-28：ノートPC画像を大きくして左カラムが約492pxまで狭くなり、
   26px固定（必要幅562px）では2行に折り返すようになったため、見出しと同じく
   左カラムの幅に連動させました。余裕を見て 4.1cqi（必要幅は幅の約93%）。
   2026-08-29：文言を「こんなことをやってみたいを39.9万円〜実現可能」に変えて
   全角1文字ぶん長くなったため、4.4cqi → 4.1cqi に下げています。
   広い画面では従来どおり26pxで頭打ちです。
   vw のほうは cqi 非対応ブラウザ向けのフォールバックとして残しています。 */
/* 蛍光ペンで引いたような太い帯。文字の下半分に重ねます。
   背景を「上は透明・下は色」の2色グラデーションにして、56%を境目にしています
   （細い罫線ではなく、文字に被る太さがあるのがこの表現の要点）。
   画像を使わないので拡大しても劣化しません。
   display: inline-block は帯の幅を文字の長さに合わせるためです
   （block のままだと左カラムの幅いっぱいに帯が伸びます）。 */
/* 業種のアイコン（ヒーローのサービス名の左）。
   図柄と色は js/industry.js が js/industry-data.js から入れます。
     --hero-icon-fill … その業種の fill（タイルの地を12%に薄めて使います）
     --hero-icon-ink  … 白地でコントラストが取れる濃いほうの値（図柄の色）
   どちらも受け取れなかったときだけ、士業の紺を既定にします。 */
.ai-lp-hero-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #eef2f7;
  background: color-mix(in srgb, var(--hero-icon-fill, #123F7D) 12%, #ffffff);
  color: var(--hero-icon-ink, #123F7D);
}

.ai-lp-hero-icon svg {
  width: 34px;
  height: 34px;
}

/* 文字側。これまでどおり1行に保ちます。 */
.ai-lp-hero-name {
  min-width: 0;
}

.ai-lp-catch {
  display: inline-block;
  padding: 0 6px 3px;
  background-image: linear-gradient(transparent 56%, rgba(255, 209, 71, 0.8) 56%);
  background-repeat: no-repeat;
  margin: 16px 0 0;
  font-size: clamp(17px, 1.9vw, 26px);
  font-size: min(26px, 4.1cqi);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--lp-navy);
}

/* 語の途中で折り返させません。折り返すときは必ず <wbr> を置いた
   「やってみたいを」と「39.9万円〜」の間だけで折れ、数字が2行目の先頭にきます
   （nowrap が無いと「実現可／能」「みた／いを」のように割れます）。 */
.ai-lp-catch span {
  white-space: nowrap;
}

.ai-lp-catch b {
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--lp-blue);
}

.ai-lp-catch b small {
  font-size: 0.62em;
  font-weight: 800;
}

.ai-lp-lede {
  margin: 16px 0 0;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-mute);
}

/* 2026-08-29：LPヒーローのリード文だけ、上の訴求コピー（.ai-lp-catch）に寄せます。
   16px → 4px。行の高さ（line-height 1.9〜1.95）で上下に約7pxの余白が付くので、
   見た目の間隔は約23px → 約11px になります。
   ※ .ai-lp-hero-main を挟んでいるのは、同じ .ai-lp-lede を使う士業別5ページ・
     申し込みページのリード文の余白を変えないためです（詳細度0,1,0→0,2,0）。 */
/* 2026-08-29：本文を約140文字に差し替えたのに合わせ、行間を詰めています
   （既定の 1.95 → 1.6）。士業別ページなど他で使う .ai-lp-lede は従来のままです。 */
/* 2026-08-30：ヒーローのリード文だけ、文字色をグレー（--ink-mute #5b6675）から
   黒（--ink #1c2530）に変更しました。サイトの本文と同じ色で、
   すぐ上の2行目「サポートAI」と同じ黒です（真っ黒 #000 ではありません）。
   .ai-lp-hero-main は ai-samurai.html のヒーローにしか無いクラスなので、
   士業別5ページ・申し込みページのリード文はグレーのままです。 */
.ai-lp-hero-main .ai-lp-lede {
  margin-top: 4px;
  line-height: 1.6;
  color: var(--ink);
}

/* 数字の3枠
   2026-08-30：**1辺131pxの正方形**にしています（101px角のさらに約1.3倍）。
   `minmax(0, 131px)` は「131pxを上限に、入らなければ縮む」という指定です。
   固定の `131px` にすると、3枠＋すき間で 419px 必要になり、
   スマホでは横にはみ出します。minmax なら入れ物に合わせて自動で縮むので、
   **どの幅でも3列横並びが崩れません**（390pxの画面で108px角、320pxで84.7px角）。
   ヒーローの左カラムは1440pxで492pxあるので、PCでは上限の131px角になります。
   `justify-content: start` は、3枠の合計が419pxで入れ物が余るためです。
   左そろえにしているのは、見出し・リード文・ボタンと**左端をそろえる**ためで、
   中央ぞろえにするとこの左カラムだけ縦のラインが崩れます。
   すき間も1.3倍にして 10px → 13px にしています。 */
.ai-lp-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 131px));
  justify-content: start;
  gap: 13px;
  max-width: none;
  /* 2026-08-29：3枠を少し下げるため 36px → 52px にしたあと、
     「まず何をやってみたいですか？」に近づけるため 22px に詰めました。 */
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/* 白地に白いカードなので、罫線と薄い影で浮かせています。

   2026-08-30：**横長にしました**（`aspect-ratio: 10 / 7` ＝ 高さは幅の0.7倍）。
   直前は `1 / 1` の正方形だったので、**幅はそのまま・高さだけ7割**です。
   131px角 → 131×91.7px になります。比で指定しているので、スマホで枠が縮んでも
   3枠とも同じ比率・同じ高さのままです。
   幅はグリッドの3列ぶん（枠の外側が決める）で、高さはその0.7倍になります。
   中身は上下の余白ではなく flex の中央ぞろえで真ん中に置くので、
   上下 padding は効きません（左右だけが効きます）。

   `container-type: inline-size` を付けているのは、中の文字を
   **枠の幅に対する割合（cqi）** で決めるためです。正方形は画面幅ではなく
   グリッドの列幅で決まるので、vw で追従させるとどこかで必ず溢れます。
   下の .ai-lp-facts b / span を参照してください。 */
.ai-lp-facts li {
  container-type: inline-size;
  aspect-ratio: 10 / 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 2026-08-30：131px角に対する左右余白。5px を1.3倍して6pxにしています。
     文字が使える幅（＝100cqi）は 131 − 6×2 − 罫線2 ＝ 117px。
     101px角のときの89pxのちょうど1.31倍なので、cqi 指定の文字も同じ比率で大きくなります。
     上下は flex の中央ぞろえなので効きません。 */
  padding: 6px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-m);
  background: #fff;
  box-shadow: 0 2px 10px rgba(8, 35, 74, 0.06);
  text-align: center;
}

/* 見出し（相談無料／最短2週間〜／補助金対応可）。
   2026-08-30：正方形化にともない、**枠の幅に対する割合**で決めます。
   **1cqi は枠の「内側（コンテンツボックス）」の幅の1%です**（罫線と左右paddingを
   引いたあと）。つまり文字が使える幅はちょうど 100cqi。
   いちばん長い「補助金対応可」は全角6文字で、この書体の全角1文字の送りは
   font-size の約1.0136倍なので、1行に必要な幅は font-size × 6.08。
   したがって上限は 100 ÷ 6.08 ＝ 16.4cqi。余裕をみて **15.5cqi** にしています
   （必要幅は94.2cqiで、5.8cqiぶん余ります）。
   PCの157.33px角（内側135.33px）で約21px、スマホの160px角（内側142px）で約22px。
   1行目は cqi 非対応ブラウザ向けの保険です。
   文言を変えるときは、この「100 ÷ 文字数 ÷ 1.0136」の計算をやり直してください。 */
.ai-lp-facts b {
  display: block;
  font-size: clamp(15px, 2.0vw, 23px);
  font-size: 15.5cqi;
  line-height: 1.3;
  color: var(--lp-navy);
}

/* サブテキスト（まずはお話から など）。見出しとの間隔は0pxです。
   2026-08-30：見出しと同じく枠の内側の幅に対する割合にしました。
   **9cqi → 11cqi に拡大し、太字（700）にしています**（131px角で 10.53px → 12.87px）。
   ・見出し（15.5cqi ＝ 18.135px）の 71% なので、見出しより小さい関係は保っています。
     見出しと同じ太さ700にしても、大きさの差で主従はつきます。
   ・いちばん長い「まずはお話から」（全角7文字）で 7 × 1.0136 × 11 ＝ 78cqi。
     枠の内側は100cqiなので22cqiの余裕があり、1行のまま収まります
     （上限は 100 ÷ 7 ÷ 1.0136 ＝ 14.1cqi）。
   ・和文は太字にしても1文字の送り幅が変わらないため、幅の計算はそのままで大丈夫です。
   色は従来どおり var(--lp-blue) です。 */
.ai-lp-facts span {
  display: block;
  /* 2026-08-30：高さを7割にしたご指示に合わせて 1px → 0 まで詰めました。
     ※ 枠の高さは aspect-ratio が決めていて、中身は flex の中央ぞろえです。
        中身の高さは131px幅のとき約47pxで、枠の91.7pxに対して十分余裕があるため、
        この余白を詰めても詰めなくても枠の高さは変わりません（はみ出しも起きません）。 */
  margin-top: 0;
  font-size: 12.5px;
  font-size: 11cqi;
  font-weight: 700;
  color: var(--lp-blue);
}

.ai-lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  /* 2026-08-29：2つのボタンの高さをそろえます。stretch なので、
     どちらかが背高になっても自動的に同じ高さに引き伸ばされます
     （ボタンの中身は .ai-lp-btn 側の align-items: center で上下中央のままです）。 */
  align-items: stretch;
  gap: 14px;
  margin-top: 34px;
}

/* ヒーローの「今すぐ相談する」。以前は文字を1.5倍（24px）にしていましたが、
   2026-08-30：**文字だけ**を隣の「商品プランを見る」と同じ16pxに戻します。
   ボタンの見た目の大きさ（幅246.25px・高さ60px）と色・角丸は変えないため、
   小さくした文字ぶんを内側余白で埋め合わせています。

   高さ：文字16px × 行の高さ1.5 ＝ 24px、罫線 上下2px×2 ＝ 4px なので、
         上下の余白は (60 − 24 − 4) ÷ 2 ＝ 16px（＝「商品プランを見る」と同じ）。
   幅　：「今すぐ相談する」は16pxのとき約113.7px。
         (246.25 − 113.7 − 4) ÷ 2 ＝ 64.3px を左右の余白にします。
   ※ 文言を変えると必要な余白も変わるので、そのときはこの計算をやり直してください。 */
.ai-lp-btn-lg {
  padding: 16px 64.3px;
  font-size: 16px;
}

/* 1023px以下では左カラムが狭く（768pxのとき413px）、1.5倍のままだと
   「商品プランを見る」と横に並びきらず2段になります。
   この幅だけ1.25倍相当（文字20px・余白20px/24px）に抑えて、横並びを保ちます。
   必要幅＝文字140px＋罫線4px＋余白24px×2＝192px。
   192＋すき間14＋副194＝400pxで、413pxに収まります。
   700px以下は2つとも幅いっぱいの縦並びになるため、この調整は関係しません。 */
@media (max-width: 1023px) {
  .ai-lp-cta-row .ai-lp-btn-lg {
    /* 2026-08-30：この幅も文字は16px（上の .ai-lp-btn-lg のまま）にし、
       これまでの見た目の大きさ 幅185.88px・高さ60px を余白で保ちます。
       上下＝16px、左右＝(185.88 − 113.7 − 4) ÷ 2 ＝ 34.1px。 */
    padding: 16px 34.1px;
  }
}

/* ヒーローの2カラム（左＝本文、右＝対応士業の5枚） */
.ai-lp-hero-grid {
  display: grid;
  /* 右カラムは幅に応じて縮みます（最大460px）。700px以下で下に回します。 */
  grid-template-columns: minmax(0, 1fr) min(460px, 40%);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* このLPの見出し「士業のためのAIサポーター。」は、どの画面幅でも横1行にします。
   固定サイズだと左カラムが狭い幅で折り返してしまうため、左カラムの幅に対する
   割合（cqi）で文字を縮め、white-space: nowrap で折り返しを止めています。
   見出しは全角にして約13.2文字ぶんの幅なので、1行に収まる上限は約7.6cqi。
   余裕を見て 7.2cqi にし、広い画面では 33px で頭打ちにしています。
   （カードの見出し .card-wide-title と同じやり方です）
   ※ .ai-lp-hero h1 ではなく .ai-lp-hero-grid を挟んでいるのは、同じ .ai-lp-hero を
     使う士業別ページ・申し込みページ（.ai-detail-hero）の見出しを変えないためです。 */
.ai-lp-hero-main {
  container-type: inline-size;
}

.ai-lp-hero .ai-lp-hero-grid h1 {
  white-space: nowrap;
  /* 1行目は cqi 非対応ブラウザ向け。画面幅に追従させて、はみ出しを防ぎます */
  font-size: clamp(18px, 3.4vw, 31px);
  /* 2026-08-28：見出しは「士業の強い味方、AIサポーター。」＝全角15.1文字ぶん。
     文言を変えるたびに、1行に収まる上限（100 ÷ 文字数）の約94%を係数にしています。
     15.1文字 → 上限6.61cqi。
     2026-08-29：「もう少し小さく（現在の85%程度）」のご指示で 6.2cqi → 5.3cqi、
     上限も 36px → 31px にしました（1440pxで30.5px → 26.1px）。
     15.1文字 × 5.3% ＝ コンテナ幅の80%なので、1行は余裕をもって保てます。
     文言を変えるときは必ずこの計算をやり直してください。 */
  font-size: min(31px, 5.3cqi);
  /* 2026-08-30：h1「士業に強い味方、AIサポーター。」を**8px上げる**ご指示。
     すぐ上の一文（.ai-lp-hero-note）との間隔は4pxしかなく、
     その下余白を削るだけでは4pxしか上げられないため、ここで負の上余白を使っています。
     h1より下（バッジ・2行目・キャッチ・3枠・ボタン）は動かさないよう、
     .ai-lp-hero-line2-badge の上余白を同じ8pxぶん増やして相殺しています
     （14px → 22px）。片方だけ変えると、バッジから下の全部が一緒に上がります。
     ※ 一文の文字は17px・行の高さ27.2px、h1は26.1px・行の高さ34.4pxで、
       もともと文字と文字の間に約13.3pxの空きがあります。8px上げると約5.3pxです。
       これ以上詰めると2つの行がくっついて見えるので、上限と考えてください。 */
  margin-top: -8px;
}

/* コンテナが最大幅（1120px）に達する 1160px 以上でだけ、画像を一回り大きく見せます。
   これより狭い範囲は従来のまま＝タブレット・スマートフォンには影響しません。

   2026-08-28：ノートPC画像をもう一段大きくするため 44% → 52.5% に広げました
   （右カラム 492.8px → 588px。画像は約1.19倍）。画像は右カラムの幅いっぱいなので、
   列を広げるとラインナップの囲みごと一緒に大きくなり、両者の右端は揃ったままです。

   左カラムはそのぶん狭くなります（約492px）。数字の3枠の「最短2週間〜」が2行に
   折り返さないよう、この幅では下の .ai-lp-facts 3点セットで枠の余白と文字を詰めています。
   文字を22pxまで下げれば 56% あたりまで広げられますが、数字の見せ場が弱くなるため
   52.5% にとどめています。 */
@media (min-width: 1160px) {
  .ai-lp-hero-grid {
    grid-template-columns: minmax(0, 1fr) min(600px, 52.5%);
  }

  /* 2026-08-30：3枠は131px角に固定したので、画面幅ごとの上書き
     （gap / li の padding / b・span の px 指定）はすべて削除しました。 */

  /* リード文を2行に収めます。この文は1行に必要な幅が文字サイズの約62倍あり、
     左カラム約492pxでは 16px だと 2行ぶん（984px）をわずかに超えて3行になります。
     15px なら 930px（2行ぶんの約95%）で収まります。
     ※ .ai-lp-hero-main を挟んでいるのは、同じ .ai-lp-lede を使う士業別ページ・
       申し込みページのリード文を変えないためです。
     ※ 1160px未満は左カラムの幅が変わるので従来どおり16pxのままです。 */
  /* 2026-08-29：本文を141文字に差し替え、PCで4行に収まる 13.5px にしています。
     14px では左カラム492pxに対して5行になりました（日本語は禁則で行末に余りが出るため、
     単純な文字数計算より1行あたりの実効容量が小さくなります）。 */
  .ai-lp-hero-main .ai-lp-lede {
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* 2つのボタンは必ず横一列に並べます。
     2026-08-29：左のボタンは「今すぐ相談する」（7文字）になり、必要幅は大きく減りました。
     以前の「今すぐお問い合わせする」（11文字）を前提にした下の計算は、余裕の根拠として残します。
     2026-08-28：左のボタンを「今すぐお問い合わせする」にしたぶん文字が広がったため、
     左右の内側余白を 30px → 24px に詰めて1行に収めています。
     必要幅＝文字352px＋枠104px＋間隔14px＝470px（左カラム492pxに対し余裕22px）。
     30pxのままだと494pxで2pxだけ溢れます。
     flex: none はボタンが縮んで中の文字が折り返すのを防ぐためです。
     ※ 700px以下は下のブロックでボタンを幅いっぱいの縦積みにしています（そちらが優先）。 */
  .ai-lp-cta-row {
    flex-wrap: nowrap;
  }

  .ai-lp-cta-row .ai-lp-btn {
    flex: none;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* 「今すぐ相談する」の左右の余白は上の .ai-lp-btn-lg（64.3px）のままにします
     （すぐ上の 24px に上書きされてしまうため、ここで戻しています）。
     これでこの幅でもボタンの幅は従来どおり246.25pxです。 */
  .ai-lp-cta-row .ai-lp-btn-lg {
    padding-left: 64.3px;
    padding-right: 64.3px;
  }
}

/* 右側のビジュアル（演出用の画像＋テキストのバッジ） */
.ai-lp-hero-visual {
  display: grid;
  /* 画像とラインナップの間隔。広くするとリストの位置が下がります。
     狭い画面では下の max-width:900px / 700px のブロックが 12px に詰めます。 */
  gap: 10px;
  align-content: start;
}

/* 画像だけを囲む入れ物。円形バッジの位置の基準になります。 */
.ai-lp-hero-shot {
  position: relative;
}

/* 円形バッジ。ノートPCの絵柄には重ねず、画像の左側にある白い余白に置きます。
   画像は左の22.7%（1160px以上で約133px）が透明なので、そこに収めています。
   2026-08-29：もう少し左下へ寄せ、直径も 120px → 136px に大きくしました。
   ・left を -18px にして画像の外へ少し出しています（出る先は左カラムとの
     間隔34〜40pxの中なので、本文には重なりません）。バッジの右端は118px
   ・top は 20px → 100px。PCの左端は y=100〜236px の範囲で最小135pxなので、
     右端118pxとの間に17pxの余裕があります
   ・y=290px より下はキーボード面が左に大きく張り出す（y=320で左端44px）ため、
     これ以上は下げられません
   ・幅と高さを同じにして border-radius: 50% で真円にしています */
.ai-lp-hero-circle {
  position: absolute;
  left: -18px;
  top: 100px;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  width: 136px;
  height: 136px;
  margin: 0;
  padding: 0 8px;
  border-radius: 50%;
  /* 2026-08-29：青からオレンジに変更しました。
     この円は14px・19px・16pxの3行があり、いちばん小さい14pxは
     WCAGの「大きい文字」に当たらないため、白文字とのコントラストは4.5:1必要です。
     #F5A623 は約2.0:1、#d97a06 でも3.12:1で足りないため、#b46100（4.56:1）にしています。 */
  background: #b46100;
  box-shadow: 0 8px 20px rgba(120, 66, 4, 0.30);
  color: #fff;
  text-align: center;
  line-height: 1.3;
  /* 2026-08-29：<a> にして「サポートAIの対応士業」への
     ページ内リンクにしました。共通CSSの下線を打ち消します。 */
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ai-lp-hero-circle:hover {
  text-decoration: none;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(120, 66, 4, 0.38);
}

.ai-lp-hero-circle:focus-visible {
  outline: 3px solid #b46100;
  outline-offset: 3px;
}

/* 2行目。この円の中でいちばん大きく見せる行です。
   「毎月5社限定」は全角5.5文字ぶんなので、17pxで約94px。
   円の内側（120px − 左右8px×2 = 104px）に収まります。 */
.ai-lp-hero-circle-lead {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 1行目。2行目を立たせるため控えめにします。 */
.ai-lp-hero-circle-plan {
  font-size: 14px;
  font-weight: 700;
}

/* 3行目。円の中で折り返させません。 */
.ai-lp-hero-circle-price {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

/* 背景が透過のモックアップ画像なので、枠線・角丸は付けません。
   白地だと切り抜きが浮くため、下向きの淡い影だけ敷いています。 */
.ai-lp-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(8, 35, 74, 0.16));
}

/* ノートPC画像の下に置く注記。小さく控えめに、右寄せで置きます。
   .ai-lp-hero-shot（画像だけを囲む入れ物）の中にあるので、
   下のラインナップとの間隔（.ai-lp-hero-visual の gap）には影響しません。 */
.ai-lp-hero-caption {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.6;
  text-align: right;
  color: var(--ink-mute);
}

/* 小見出しとバッジリストのまとまり。ビジュアル側のgap(16px)ではなく、
   リストの行間(9px)に合わせて詰めています。 */
/* ブロック全体を罫線で囲みます。内側に余白ができるぶん、
   リスト側の字下げ（もとの padding-left）は 0 にして幅を確保しています。 */
/* 2026-08-28：囲みを低くするため、縦方向の余白だけを詰めています。
   文字サイズと左右の余白（18px）は変えていないので、説明文が1行に収まる幅は
   そのままです。効きが大きいのは行の高さで、バッジは本文と同じ行間(1.85)を
   引き継いでいたため 1.4 に、説明文は 1.6 → 1.5 にしています。 */
.ai-lp-hero-lineup {
  display: grid;
  gap: 8px;
  padding: 14px 18px 16px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-m);
}

/* バッジリストの小見出し。右カラム（画像とリスト）の幅に対して中央に置きます。
   カード側の小見出し（.ai-lp-cards-title）と同じトーンで、こちらは控えめなサイズ。 */
.ai-lp-hero-list-title {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lp-navy);
}

/* 画像はあくまで演出なので、士業名と内容はテキストでも持たせています。
   1項目1行のボックスで、名前は太字、説明は少し小さく。 */
/* 字下げは囲み（.ai-lp-hero-lineup）の内側余白が受け持つので 0 にしています。 */
.ai-lp-hero-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 行そのものには枠を付けません。囲むのは名前だけです。 */
.ai-lp-hero-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* 4文字と5文字が混在するので、箱の幅を揃えて説明文の頭を合わせます。 */
.ai-lp-hero-list b {
  flex: none;
  min-width: 94px;
  text-align: center;
  padding: 4px 11px;
  line-height: 1.4;
  border: 1px solid rgba(8, 35, 74, 0.16);
  border-radius: 8px;
  background: rgba(23, 119, 242, 0.07);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lp-navy);
}

/* 説明は名前よりはっきり小さく（13.5px に対して 11.5px）。 */
.ai-lp-hero-list span {
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* ラインナップを右カラムの中で「右寄り」に置きます（画像を拡大するのと同じ 1160px 以上だけ）。
   ・画像との間隔で上下の位置を決める（現在10px）
   ・左の余白で囲みの幅を決める（右端は列の端に揃ったまま）
   ・見出しもリストの右端に合わせる
   ※ .ai-lp-hero-visual / .ai-lp-hero-list / .ai-lp-hero-list-title と同じ詳細度なので、
     このブロックは必ずそれらの定義より後ろに置いてください。 */
@media (min-width: 1160px) {
  .ai-lp-hero-visual {
    gap: 10px;
  }

  /* 囲みごと右へ寄せます。右端は列の端に揃ったまま。
     2026-08-28：囲み全体を一回り大きくしたので、左余白を 24% → 14% に狭めて
     囲みの幅を広げています（内容幅 約413px → 約472px）。
     14%＝約82px。文字を拡大したぶん、説明文が1行に必要な幅も
     390px → 426px に増えますが、472pxなので約11%の余裕があります
     （この列幅では 21% あたりが上限。これ以上寄せると2行に折り返します）。 */
  .ai-lp-hero-lineup {
    margin-left: 14%;
  }
}

/* ヒーローの会社ロゴ。このページは共通ヘッダーを出さないので、
   ロゴだけを英字ラベルの上に置いています（リンクは張っていません）。
   2026-08-29：上に寄りすぎていたので上に16pxの余白を足して下げ、
   そのぶん下の余白を26px → 10pxにして相殺していました。
   2026-08-30：**再び16px上げる**ご指示があったので、その16pxを戻しました
   （上の余白 16px → 0、下の余白 10px → 26px）。合計は26pxのままなので、
   **英字ラベルから下の要素はすべて元の位置のまま**で、ロゴだけが16px上がります。
   ロゴ下端から英字ラベルまでの間隔は 10px → 26px になります。
   ※ヒーロー全体の上余白（.ai-lp-hero の padding-top 44px）は触っていません。
     ページ全体を上げたい場合はそちらを縮めてください。 */
.ai-lp-hero-logo {
  display: block;
  width: 200px;
  height: auto;
  margin-top: 0;
  margin-bottom: 26px;
}

/* ---------- サービス名のバッジ ---------- */

/* 英字ラベルとサービス名を同じ行に並べます。
   .ai-lp-en の下余白はこの行が持つので、行の側で打ち消します。
   （.ai-lp-hero .ai-lp-en / .ai-lp-head .ai-lp-en と同じ詳細度なので、
     このブロックは必ずそれらより後ろに置いてください） */
.ai-lp-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ai-lp-eyebrow .ai-lp-en {
  margin-bottom: 0;
}

/* 2026-08-30：ai-samurai.html だけ、英字ラベルの下余白を 16px → 2px に詰めます。
   「高い費用や〜／士業に強い味方、AIサポーター。」のブロックが**14px上がります**。
   ラベルとブロックの間隔（枠どうし）は 16px → 2px ですが、
   ラベルの行の高さ29.6px（文字16px）とブロック1行目の行の高さ27.2px（文字17px）に
   もともと上下6.8px＋5.1pxの空きがあるため、**文字と文字の見た目の間隔は
   27.9px → 13.9px** です。詰まりすぎではありません。
   ブロックより下（バッジ・2行目・キャッチ・3枠・ボタン）も同じ14pxだけ一緒に上がるので、
   **h1とバッジの間隔（14px）や、その先の間隔はすべて元のまま**です。
   ここを相殺してブロックだけ上げると、h1とバッジが14px離れて
   見出しの2行構成がばらけて見えるため、あえて相殺していません。
   `.ai-lp-hero-grid` を挟んでいるので、同じ `.ai-lp-eyebrow` を使う
   ai-apply・士業別5ページのラベルは動きません。 */
.ai-lp-hero-grid .ai-lp-eyebrow {
  margin-bottom: 2px;
}

/* 「おすすめ」バッジ（.ai-lp-badge）と同じ角丸バッジ。
   行の中に並べるので、下余白と自前の寄せは外しています。 */
.ai-lp-badge-service {
  align-self: auto;
  margin-bottom: 0;
  padding: 4px 12px;
  font-size: 11.5px;
}

/* 5枚のカードの見出し。セクション見出しより一段小さくし、中央に置きます。 */
.ai-lp-cards-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--lp-navy);
}

/* ---------- 業務例 ---------- */

/* 2026-08-29：項目15個・横5列×縦3行にしました（6個2行 → 12個4列 → 15個5列）。
   grid-auto-rows: 1fr が要点です。これがないと、文字が2行になる項目を含む行だけ
   高くなって行ごとに高さがずれます。1fr にすると3行すべてがいちばん高い行に揃い、
   15個のボックスの高さが完全に同じになります（中身は align-items: center で上下中央）。
   5列にできるのは、コンテナが最大幅1120pxに達する画面幅1160px以上のときだけです。
   それより狭いと1枠あたりの幅が足りないので、下のメディアクエリで4列→2列→1列に減らします。 */
.ai-lp-tasks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2026-08-29：4列×3行・12項目。
   「よくある質問への自動応答(FAQチャットボット)」＝21.5文字ぶんだけは2行を許容し、
   それ以外は1行に収める方針です。次に長い「スケジュール調整・日程確認の自動化」＝17文字ぶんが
   基準で、PC（コンテナ1120px）の1列あたりの文字が入る幅は
   269.5px −（内側余白12px×2 ＋ 罫線1px×2 ＋ 印18px ＋ 間隔6px）＝219.5px。
   ※上の計算は4列だったときのものです。5列にした2026-08-29の再計算は次のとおり。
   PC（コンテナ1120px・すき間8px×4）の1列は217.6px。文字が入る幅は
   217.6 −（内側余白8px×2 ＋ 罫線1px×2 ＋ 印13px ＋ 間隔5px）＝181.6px。
   実測では「スケジュール調整・日程確認の自動化」が10.5pxで180px必要で0.4px足りず
   2行になったため、内側余白を9px→8pxに詰め、文字を10.2pxにしています（必要174.9px）。
   上下の余白と印も詰めて、セクション全体の高さを抑えています。 */
.ai-lp-tasks li {
  display: flex;
  align-items: center;
  /* 2026-08-29：「枠の大きさはそのままで文字だけ大きく」のご指示で 10.2px → 12.5px（約1.23倍）。
     行の高さを1.5→1.35、内側余白を7px→6pxに詰めているので、枠の高さは47px前後のまま変わりません。
     1列217.6pxのうち文字が入る幅は
     217.6 −（内側余白7px×2 ＋ 罫線1px×2 ＋ 印15px ＋ 間隔4px）＝182.6px。
     12.5pxでは「よくある質問…」と「スケジュール調整・日程確認の自動化」の2つが2行になり、
     残り13枠は1行に収まります（枠の高さは grid-auto-rows: 1fr で全枠そろいます）。 */
  gap: 4px;
  padding: 6px 7px;
  line-height: 1.35;
  border: 1px solid var(--lp-line);
  /* 2026-08-29：「角丸を無くして四角にする」のご指示で角丸なしにしています。
     罫線の色・太さ、背景色、内側の余白（padding）はそのままです。
     ✓印の丸（li::before の border-radius: 50%）は枠ではないので変更していません。 */
  border-radius: 0;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lp-navy);
}

/* 2026-08-29：「よくある質問への自動応答(FAQチャットボット)」だけは枠に収まらず2行になります。
   何もしないと「…自動応答(FAQチャッ／トボット)」と括弧の途中で割れてしまうため、
   括弧の手前に <br class="ai-lp-tasks-br"> を置いて改行位置を固定しています。
   （nowrap の span で囲む方法も試しましたが、前半のほうが折り返してしまい不自然でした）
   枠の高さは grid-auto-rows: 1fr で全枠そろうので、ここだけ2行でも並びは崩れません。
   2列・1列に組み替わる900px以下では1行に収まるため、そこでは改行を無効にします
   （有効なままだと15枠すべてが2行ぶんの高さになり、縦に間延びします）。 */
@media (max-width: 900px) {
  .ai-lp-tasks-br {
    display: none;
  }
}

/* 2026-09-03：グリッド内の「採用・求人サポート」は他の枠と同じ1行の項目名だけなので、
   説明はグリッドの外にこの補足文として置いています。
   体裁は他セクションの補足文（.ai-lp-note）をそのまま使っています。
   ※ 一時的に16項目目を横いっぱいに広げる .ai-lp-tasks-pickup を置いていましたが、
     重複していた2項目を統合して15項目に戻したため、その指定は削除しました。 */
.ai-lp-tasks-note b {
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: var(--lp-r-s);
  background: rgba(83, 208, 170, 0.18);
  color: var(--lp-green-ink);
  font-size: 12.5px;
}

/* おすすめ業種の一文。補足文の中でも一段小さくして、添え書きに見せます。 */
.ai-lp-tasks-note-for {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--lp-navy);
  font-weight: 700;
}

/* 「色だけに頼らない」ため、印には記号を使います */
.ai-lp-tasks li::before {
  content: "✓";
  flex: none;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(83, 208, 170, 0.18);
  color: var(--lp-green-ink);
  font-size: 10.5px;
}

/* ---------- 士業向けAI ---------- */

/* 地は白系。ただし5枚のカードは紺のまま残すので、
   その受け皿としてごく淡い青みを敷いています。 */
.ai-lp-shigyo {
  background:
    radial-gradient(700px 340px at 90% 0%, rgba(23, 119, 242, 0.08), transparent 62%),
    linear-gradient(160deg, #f2f7fd 0%, #ffffff 70%);
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
}

.ai-lp-secure {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 20px;
  /* 2026-08-29：薄い緑から薄いグレーに変更しました。
     文字は白地でも使っている --ink（#1c2530）にしていて、
     グレー地（#efefef）とのコントラストは13.9:1あります。
     罫線もグレーにそろえ、地との差が分かる濃さにしています。 */
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  background: #efefef;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

/* 2026-08-29：バッジを2つ横並びにするための入れ物。
   .ai-lp-secure は inline-flex なので並べるだけでも横に並びますが、
   間隔と折り返しを制御したいので flex の親を用意しています。
   狭い画面では flex-wrap で素直に縦積みになります。
   上の余白は親が持つので、中のバッジの margin-top は打ち消します
   （.ai-lp-secure＝詳細度0,1,0 に対して0,2,0なので後ろに置けば勝ちます）。 */
/* 2026-08-29：3つのバッジと矢印のまとまりを、セクションの中で中央にそろえます。 */
.ai-lp-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.ai-lp-badges .ai-lp-secure {
  margin-top: 0;
}

/* 文字色は .ai-lp-head p（詳細度0,1,1）に負けてしまうため、
   ここで詳細度を上げて指定します。グレー地の上で読みやすい濃さにしています
   （#efefef との コントラストは13.9:1）。 */
.ai-lp-head .ai-lp-secure {
  color: var(--ink);
}

/* バッジのあいだに挟む矢印。バッジと同じ行の中央に来るように align-self で
   揃えています（flex の既定の stretch のままだと縦に間延びします）。 */
.ai-lp-badge-arrow {
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-mute);
}

/* PCは横一列に5枚。カードは同じ幅・同じ高さで揃います（gridの既定の伸縮）。
   1列あたりが細くなるぶん、文字と余白はこの段階で詰めています。 */
.ai-lp-pro-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* 2026-08-29：カードを上下2色に分けました。
   ・上部（アイコンとカード名）は従来どおり紺
   ・下部（.ai-lp-pro-body ＝ 説明文・支援業務・導入効果）は白
   ・カード全体の外枠は黒い罫線
   内側の余白は li ではなく上下それぞれが持つように変え、
   overflow: hidden で白い地が角丸からはみ出さないようにしています。 */
.ai-lp-pro-cards > li {
  /* 2026-08-29：カード全体を価格セクションへのリンクにする層は削除しました
     （クリックしてもページ内移動しません）。position: relative は
     オーバーフローの基準として残しています。 */
  position: relative;
  display: flex;
  flex-direction: column;
  /* 2026-08-29：カード全体の高さを約2/3に縮めるため 24px 18px 0 → 14px 12px 0 */
  padding: 14px 12px 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: var(--lp-r-l);
  /* ノートPC画面と同じ紺。上が明るく下が深い、画像と同じ向きにしています。 */
  background: linear-gradient(180deg, var(--lp-screen-top), var(--lp-screen-bottom));
  box-shadow: 0 3px 14px rgba(8, 35, 74, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* カード下部。白い地に変えるので、中の文字色も暗い色に置き換えます
   （紺地の上で使っていた白系の色は、白地では読めません）。
   左右の余白は li の 18px と同じ、上下は白い面が窮屈にならない値にしました。
   margin: 0 -18px は、li の左右余白を打ち消して白い面を端まで広げるためです。 */
.ai-lp-pro-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* 左右の -12px は li の左右余白12pxの打ち消し。li 側を変えたらここも合わせること。 */
  margin: 12px -12px 0;
  padding: 12px 12px 14px;
  background: #fff;
  border-top: 1px solid var(--ink);
  color: var(--ink);
}

.ai-lp-pro-body .ai-lp-pro-desc {
  color: var(--ink);
}

/* 「支援業務」「導入効果」の小見出し。白地に合わせて太字の黒にします
   （紺地のときは水色、白地にした直後は青にしていました）。
   ※ セレクタの先頭に .ai-lp-pro-cards を足しているのは、この下にある
     .ai-lp-pro-cards h4（水色）と詳細度を同じにしないためです。
     同じ詳細度だと後に書かれたほうが勝ち、この指定が無効になります。 */
.ai-lp-pro-cards .ai-lp-pro-body h4 {
  font-weight: 700;
  color: var(--ink);
}

.ai-lp-pro-body .ai-lp-pro-list {
  color: var(--ink-mute);
}

/* 導入効果の囲み。2026-08-29に薄い緑から薄い青に変更しました。
   地だけ青にすると枠線と文字が緑のままでちぐはぐになるため、
   枠線と文字色もあわせて青系にそろえています。 */
.ai-lp-pro-body .ai-lp-effect p {
  border-color: rgba(23, 119, 242, 0.32);
  background: rgba(23, 119, 242, 0.09);
  color: var(--lp-blue-dark);
}

/* カーソルを合わせると少し浮き上がります。 */
.ai-lp-pro-cards > li:hover {
  transform: translateY(-4px);
  border-color: var(--lp-blue);
  box-shadow: 0 12px 28px rgba(8, 35, 74, 0.22);
}


/* 2026-08-29：各カードの「導入効果」の下に置く「価格を見る」ボタン。
   カード下部は白地なので、白地＋青罫線＋青文字のアウトライン型にしています
   （サイト内の .ai-lp-btn-outline と同じ考え方の、一回り小さい版）。
   .ai-lp-effect の margin-top: auto でこのボタンごとカード下端に寄ります。 */
.ai-lp-pro-btn {
  display: block;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid var(--lp-blue);
  border-radius: var(--lp-r-s);
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  color: var(--lp-blue);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ai-lp-pro-btn:hover {
  background: var(--lp-blue);
  color: #fff;
  text-decoration: none;
}

.ai-lp-pro-btn:focus-visible {
  outline: 2px solid var(--lp-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ai-lp-pro-btn {
    transition: none;
  }
}

/* 士業カードのアイコン。ヒーロー画像（img/ai-support-hero.png）の中に
   描かれている5つの絵柄を、同じ線画スタイル（線幅1.6・丸い端点）で
   SVGに起こしたものです。紺のカードの上に置くので色は --lp-sky。 */
.ai-lp-pro-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border: 1px solid rgba(124, 202, 255, 0.28);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--lp-sky);
}

.ai-lp-pro-icon svg {
  width: 24px;
  height: 24px;
}

/* 2026-08-29：アイコンとカード名を縦並び → 横並びに変更しました。
   左にアイコン、右にカード名。カード名は align-items: center で上下中央に来ます。
   ※ この箱は ai-samurai.html の5枚だけに付けています。申し込みページ（ai-apply.html）の
     カードにはアイコンが無く、li の直下に h3 が来る構造のままです。 */
.ai-lp-pro-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-lp-pro-head h3 {
  margin: 0;
  text-align: left;
}

/* 横並びにしたぶんアイコンを大きくしています（40px → 52px）。
   中央寄せのための margin: 0 auto は不要になるので打ち消します。 */
.ai-lp-pro-head .ai-lp-pro-icon {
  width: 52px;
  height: 52px;
  margin: 0;
  border-radius: 14px;
}

.ai-lp-pro-head .ai-lp-pro-icon svg {
  width: 30px;
  height: 30px;
}

.ai-lp-pro-cards h3 {
  font-size: 14px;
  color: #fff;
}

.ai-lp-pro-desc {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.ai-lp-pro-cards h4 {
  margin: 11px 0 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lp-sky);
}

.ai-lp-pro-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.ai-lp-pro-list li {
  margin-bottom: 2px;
}

.ai-lp-effect {
  margin-top: auto;
  padding-top: 9px;
}

.ai-lp-effect p {
  margin: 5px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(83, 208, 170, 0.45);
  border-radius: var(--lp-r-s);
  background: rgba(83, 208, 170, 0.13);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}

/* カード下部のボタン。カードの高さが違っても、ボタンは必ず最下部でそろいます。
   5列のときカード幅が200px前後しかないため、横並びにはせず縦に積みます。 */
.ai-lp-card-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ai-lp-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--lp-r-s);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* 紺のカードの上に置くので、枠線だけの白いボタンにしています。 */
.ai-lp-card-detail {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.ai-lp-card-detail:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--lp-sky);
  color: #fff;
}

.ai-lp-card-apply {
  background: var(--lp-blue);
  color: #fff;
}

.ai-lp-card-apply:hover {
  background: var(--lp-blue-dark);
  color: #fff;
}

/* このセクションは下にいくほど白に抜けるので、白い注記だと沈みます。
   ここだけ薄いグレーの地にします。 */
.ai-lp-shigyo .ai-lp-note {
  background: var(--lp-soft);
}

/* ---------- 料金プラン ---------- */

.ai-lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-lp-plan {
  /* 右上のバッジ（.ai-lp-plan-tag）とリンク層（.ai-lp-plan-link）の位置の基準にします */
  position: relative;
  display: flex;
  flex-direction: column;
  /* 2026-08-29：カードを低くするため 32px 28px → 22px 22px */
  padding: 22px 22px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-l);
  background: #fff;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* カーソルを合わせたとき：少し浮き上がり、青い枠線が出ます。
   「おすすめ」のカードはもともと青い2px枠なので、浮き上がりだけが加わります。 */
.ai-lp-plan:hover {
  transform: translateY(-4px);
  border-color: var(--lp-blue);
  box-shadow: 0 16px 34px rgba(23, 119, 242, 0.18);
}

/* カード全体を「プランの比較」（#plan-compare）へのリンクにするための透明な層。
   カードいっぱいに広げているので、どこをクリックしても移動します。
   ・inset: 0 でカードの内側全面を覆います
   ・border-radius: inherit で、カードの角丸に合わせています
   ・z-index: 2 は、右上のバッジ（z-index: 1）より前に出すためです
   ・中身が空なので、読み上げ用に aria-label を付けています（HTML側） */
.ai-lp-plan-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

/* キーボード操作で選んだときに、どのカードにいるか分かるようにします。 */
.ai-lp-plan-link:focus-visible {
  outline: 3px solid var(--lp-blue);
  outline-offset: 3px;
}

/* カードの右上角に乗せるバッジと、その下の星をまとめる箱。
   2026-08-29：星を追加したため、絶対配置をバッジ自体からこの箱に移しました。
   ・top を負の値にして、バッジがカードの上辺をまたぐように置いています
   ・position: absolute なので、カード内の見出しや価格の位置はずれません
   ・align-items: center で、星をバッジの幅の中央にそろえます
   ・gap: 22px は、バッジと星が近づきすぎないための間隔です */
.ai-lp-plan-tagwrap {
  position: absolute;
  top: -13px;
  right: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* .ai-lp-badge の margin-bottom: 14px がこの後ろに書かれていて打ち消せないため、
   ここで詳細度を上げて0にしています。バッジと星の間隔は上の gap だけで決めます。 */
.ai-lp-plan-tagwrap .ai-lp-plan-tag {
  margin-bottom: 0;
}

/* 「おすすめ」のカードだけ枠線が2px（他は1px）で、
   絶対配置の基準がその分だけ下にずれます。1px 上げて3枚をそろえます。 */
.ai-lp-plan-pick .ai-lp-plan-tagwrap {
  top: -14px;
}

/* バッジ本体。「おすすめ」（.ai-lp-badge-pick）と同じピル型です。
   カードの中に収める都合で、ヒーローの円形バッジより小さくしています
   （文字11.5px、上下左右の余白 4px/12px）。 */
.ai-lp-plan-tag {
  align-self: auto;
  margin-bottom: 0;
  padding: 4px 12px;
  font-size: 11.5px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(8, 35, 74, 0.18);
}

/* プランの段階を表す星。3つのうち、塗りつぶし（★）の数が段階を示します。
   AIミニ＝1つ、AIスタンダード＝2つ、AIプロ＝3つです。
   色はバッジと同じ青（--lp-blue）でそろえ、消えている星（☆）は薄い青にしました。
   金色も検討しましたが、はっきり見える濃さにすると茶色に寄ってしまい、
   青一色のこのページでは浮いてしまうため、青系を採用しています。
   文字（★☆）で描いているので、拡大してもぼやけません。 */
.ai-lp-plan-stars {
  display: flex;
  gap: 3px;
  font-size: 15px;
  line-height: 1;
  color: #7fabe0;
}

.ai-lp-plan-stars .is-on {
  color: var(--lp-blue);
}

.ai-lp-plan-pick {
  border: 2px solid var(--lp-blue);
  box-shadow: 0 16px 40px rgba(23, 119, 242, 0.14);
}

.ai-lp-badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--lp-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

/* 「おすすめ」バッジは見出しの右隣に並べます。
   バッジが単独で1行を占めていたぶんの余白がなくなり、
   3枚のカードで見出しの高さがそろいます。 */
.ai-lp-plan-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 見出しの高さに合わせて、料金カードのバッジだけ一回り小さくします
   （ヒーローのサービス名バッジ .ai-lp-badge-service には影響しません）。 */
.ai-lp-badge-pick {
  align-self: auto;
  margin-bottom: 0;
  padding: 3px 10px;
  font-size: 11px;
}

.ai-lp-plan h3 {
  font-size: 17px;
  color: var(--lp-navy);
}

.ai-lp-price {
  margin: 10px 0 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--lp-blue);
}

.ai-lp-price small {
  font-size: 15px;
  font-weight: 700;
}

.ai-lp-term {
  display: inline-block;
  margin: 9px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lp-soft);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lp-navy);
}

.ai-lp-plan ul {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--lp-line);
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
}

.ai-lp-plan ul li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 1.5em;
}

/* 料金カードの仕様3項目。「プランの比較」表の文言をそのまま出しています
   （表とカードで内容がズレないよう、ここに新しい文章は書かないこと）。
   ダッシュ付きの箇条書きは保ったまま、ラベルを上・内容を下の2段にしています。 */
.ai-lp-plan-specs li {
  margin-bottom: 9px;
}

.ai-lp-plan-specs li:last-child {
  margin-bottom: 0;
}

.ai-lp-plan-specs b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--lp-blue);
}

/* 内容は表の文言をそのまま入れるため長くなることがあります。
   折り返しても詰まって見えないよう行間を広めにしています。 */
.ai-lp-plan-specs span {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}

.ai-lp-plan ul li::before {
  content: "―";
  position: absolute;
  left: 0;
  color: var(--lp-blue);
}

/* ---------- 導入の流れ ---------- */

.ai-lp-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lpstep;
}

/* 2026-08-29：高さを詰めました（30px 26px → 18px 18px → 上下は8pxへ）。
   文字の大きさは変えないため、中身の高さ82.3px（STEP21.3＋見出し22＋本文39）は固定です。
   上下の余白と行間だけで調整し、133px → 106px（約8割）にしています。
   左右の余白は18pxのままです。 */
.ai-lp-flow li {
  position: relative;
  padding: 8px 18px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-m);
  background: #fff;
  counter-increment: lpstep;
}

.ai-lp-flow li::before {
  content: "STEP " counter(lpstep);
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--lp-blue);
}

.ai-lp-flow h3 {
  font-size: 15px;
  color: var(--lp-navy);
}

.ai-lp-flow p {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mute);
}

/* 2026-08-29：ボックスとボックスのあいだに矢印を出します（3か所）。
   HTMLは変えず ::after で描いています。<ol> の STEP 番号は ::before の
   カウンターで出しているので、<li> を増やすと番号がずれてしまうためです。
   位置は「自分の右端＋すき間20pxの半分」＝ calc(100% + 10px) の中央。
   最後の1つには出しません。 */
.ai-lp-flow li::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--lp-blue);
}

.ai-lp-flow li:last-child::after {
  content: none;
}

/* ---------- AI顧問 / DX開発（2カラム） ---------- */

/* ---------- AI顧問（AFTER-SUPPORT） ---------- */

/* 薄い青灰色のセクションの上に置く、白い角丸カード1枚。
   中は左（アイコン＋文言）と右（価格）の2ブロックで、間を縦の罫線で区切ります。 */
.ai-lp-advisor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 40px 44px;
  border-radius: var(--lp-r-l);
  background: #fff;
  box-shadow: 0 10px 30px rgba(8, 35, 74, 0.08);
}

.ai-lp-advisor-main {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* 青の角丸正方形アイコン。中の線画は白抜きです。 */
.ai-lp-advisor-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--lp-blue), var(--lp-blue-dark));
  color: #fff;
  box-shadow: 0 6px 16px rgba(23, 119, 242, 0.28);
}

.ai-lp-advisor-icon svg {
  width: 32px;
  height: 32px;
}

.ai-lp-advisor .ai-lp-en {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lp-blue);
}

.ai-lp-advisor h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--lp-navy);
}

.ai-lp-advisor-body p {
  max-width: 44em;
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-mute);
}

/* 技術顧問セクションの相談ボタン。色・形・ホバーは共通の .ai-lp-btn-main のままで、
   本文との間隔だけここで決めています（AI・DX開発の .ai-lp-dx-btn と同じ考え方）。 */
.ai-lp-advisor-btn {
  margin-top: 18px;
}

/* 右側の価格ブロック。左との境目に縦の区切り線を引きます。 */
.ai-lp-advisor-price {
  padding-left: 40px;
  border-left: 1px solid var(--lp-line);
  text-align: center;
}

.ai-lp-advisor-unit {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-mute);
}

.ai-lp-advisor-price .ai-lp-price {
  margin: 4px 0 0;
  white-space: nowrap;
}

.ai-lp-advisor-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
}


/* ---------- AI・DX開発（AI & DX DEVELOPMENT） ---------- */

.ai-lp-dx {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 44px;
  align-items: center;
}

/* 左：図解。正方形の薄いグレー地に、中央の円とまわりのタグを重ねます。 */
.ai-lp-dx-figure {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--lp-r-l);
  background: var(--lp-soft);
  border: 1px solid var(--lp-line);
}

/* 中央の円を囲む点線の同心円（2重）。装飾なので疑似要素で描いています。 */
.ai-lp-dx-figure::before,
.ai-lp-dx-figure::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(8, 35, 74, 0.16);
  border-radius: 50%;
}

.ai-lp-dx-figure::before {
  width: 62%;
  height: 62%;
}

.ai-lp-dx-figure::after {
  width: 84%;
  height: 84%;
}

/* 中央の青い円 */
.ai-lp-dx-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 46%;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--lp-blue), var(--lp-blue-dark));
  box-shadow: 0 10px 26px rgba(23, 119, 242, 0.3);
  color: #fff;
  text-align: center;
}

.ai-lp-dx-core svg {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}

.ai-lp-dx-core b {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.ai-lp-dx-core span {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

/* 円のまわりに置く白いピル型のタグ */
.ai-lp-dx-tag {
  position: absolute;
  padding: 7px 14px;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(8, 35, 74, 0.09);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--lp-navy);
}

.ai-lp-dx-tag-1 { top: 9%; left: 6%; }
.ai-lp-dx-tag-2 { top: 9%; right: 6%; }
.ai-lp-dx-tag-3 { bottom: 9%; right: 6%; }

/* 右：テキスト */
.ai-lp-dx-body .ai-lp-en {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lp-blue);
}

.ai-lp-dx-body h2 {
  font-size: clamp(23px, 2.9vw, 31px);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.ai-lp-dx-body > p {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-mute);
}

/* 緑のチェックマーク付きリスト（.ai-lp-tasks と同じ見た目にそろえています） */
.ai-lp-dx-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.ai-lp-dx-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
}

.ai-lp-dx-list li::before {
  content: "\2713";
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(83, 208, 170, 0.18);
  color: var(--lp-green-ink);
  font-size: 12px;
}

.ai-lp-dx-btn {
  margin-top: 26px;
}

/* 2026-08-29：補助金の段落だけ、強調部分を紺にして本文（--ink-mute）と差をつけます。
   services.html 側と同じ <strong> の使い方にそろえたものです。 */
.ai-lp-dx-body > p strong {
  color: var(--lp-navy);
}

.ai-lp-dx-body .ai-lp-note {
  margin-top: 22px;
}

/* ---------- 最終CTA ---------- */

.ai-lp-last {
  padding: 84px 0;
  background:
    radial-gradient(620px 300px at 84% 10%, rgba(23, 119, 242, 0.09), transparent 62%),
    linear-gradient(150deg, #ffffff, #f7fafe);
  border-top: 1px solid var(--lp-line);
  text-align: center;
}

.ai-lp-last h2 {
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.45;
  color: var(--lp-navy);
}

.ai-lp-last p {
  margin: 18px auto 0;
  max-width: 34em;
  font-size: 15.5px;
  color: var(--ink-mute);
}

.ai-lp-last .ai-lp-cta-row {
  justify-content: center;
}

/* ページ下部でサービス名を改めて明記します。
   .ai-lp-last p の余白・文字サイズを上書きするため、詳細度を合わせています。 */
.ai-lp-last .ai-lp-service-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 44em;
  margin: 36px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--lp-line);
  font-size: 13.5px;
  color: var(--ink-mute);
}

.ai-lp-tel {
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--ink-mute);
}

.ai-lp-tel a {
  color: var(--lp-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 最終CTAを詰めた版（ai-samurai.html だけ） ----------

   2026-08-30：**セクションの高さを約7割に**するご指示。
   文字サイズとボタンは変えられないので、上下の余白と中の間隔だけを詰めています。
   1440pxで 522.3px → 368.3px（70.5%）、768pxで 510.8px → 356.8px（69.9%）。

   内訳（PC）：上下padding 84 → 40px／見出し→説明文 18 → 10px／
   説明文→ボタン 34 → 18px／ボタン→「お電話でも承ります」 18 → 10px／
   電話→サービス名 36 → 16px／サービス名の罫線から文字まで 26 → 12px。
   文字とボタンの高さで合計222.3pxあり、これは変えられない分です。
   残り300pxの余白を146pxまで詰めて7割にしています。

   ※ `.ai-lp-last` は**LP系7ページ共通**なので、そちらの値は変えず、
     この修飾クラスを ai-samurai.html のセクションにだけ付けています。
   ※ 各ルールは対応する `.ai-lp-last …` と同じ詳細度なので、必ずそれより後ろに置くこと。 */

.ai-lp-last-tight {
  padding: 40px 0;
}

.ai-lp-last-tight p {
  margin-top: 10px;
}

.ai-lp-last-tight .ai-lp-cta-row {
  margin-top: 18px;
}

/* `.ai-lp-tel { margin-top: 26px }` は詳細度で `.ai-lp-last p` に負けるので、
   ここは2クラス（0,2,0）にして確実に効かせています。 */
.ai-lp-last-tight .ai-lp-tel {
  margin-top: 10px;
}

.ai-lp-last-tight .ai-lp-service-sig {
  margin-top: 16px;
  padding-top: 12px;
}

/* ---------- 「TOPに戻る」ボタン（画面右に固定） ---------- */

/* position: fixed なので、スクロールしても画面の右下に留まります。
   JSは使わず、<main id="top"> へのページ内リンクにしています
   （html の scroll-behavior: smooth で滑らかに戻ります）。
   z-index は、下部の固定ボタン（.ai-lp-sticky＝60）より前に出します。 */
.ai-lp-totop {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 70;
  display: grid;
  place-items: center;
  gap: 1px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--lp-navy);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(8, 35, 74, 0.28);
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.ai-lp-totop:hover {
  background: var(--lp-blue);
  color: #fff;
  text-decoration: none;
  transform: translateY(-3px);
}

.ai-lp-totop:focus-visible {
  outline: 3px solid var(--lp-blue);
  outline-offset: 3px;
}

.ai-lp-totop svg {
  width: 17px;
  height: 17px;
}

.ai-lp-totop span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---------- スマートフォン下部の固定ボタン ---------- */

.ai-lp-sticky {
  display: none;
}

/* ---------- レスポンシブ ---------- */

/* 5列を保てない幅では2列に落とします。カードが広くなるので文字も戻します。 */
/* 2カラムのままだと、コンテナが最大幅（1120px）を下回るあたりから
   数字の3枠の「最短2週間〜」が2行に折り返します。
   901px以上でも段階的に詰まるよう、文字サイズを可変にしています。
   （下の max-width:900px のブロックが余白をさらに詰めるので、必ずその前に置きます） */
@media (max-width: 1159px) {
  /* コンテナが最大幅1120pxに届かなくなるので、5列はやめて4列にします。 */
  .ai-lp-tasks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media (max-width: 1023px) {
  .ai-lp-pro-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .ai-lp-pro-cards > li {
    padding: 22px 20px 0;
  }

  /* 2026-08-29：li の左右余白を打ち消す値をこの幅でも合わせます。
     PC用の -12px のままだと、白い面がカードの端まで届かず紺色が縁のように残ります。 */
  .ai-lp-pro-body {
    margin: 14px -20px 0;
    padding: 14px 20px 16px;
  }

  .ai-lp-pro-cards h3 {
    font-size: 20px;
  }

  .ai-lp-pro-desc {
    font-size: 14.5px;
    line-height: 1.9;
  }

  .ai-lp-pro-cards h4 {
    margin: 22px 0 10px;
    font-size: 11.5px;
  }

  .ai-lp-pro-list {
    font-size: 14px;
    line-height: 1.85;
  }

  .ai-lp-effect p {
    padding: 14px 16px;
    font-size: 14.5px;
  }
}

@media (max-width: 900px) {
  .ai-lp-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 横一列でなくなるので、矢印は出しません（行末の矢印が宙に浮くため）。 */
  .ai-lp-flow li::after {
    content: none;
  }

  .ai-lp-tasks,
  .ai-lp-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* AI顧問のカードは縦積みにし、区切り線を縦から横に変えます。 */
  .ai-lp-advisor {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: 32px 28px;
  }

  .ai-lp-advisor-price {
    padding: 24px 0 0;
    border-left: none;
    border-top: 1px solid var(--lp-line);
  }

  /* AI・DX開発は図解を上、テキストを下に。図解が大きくなりすぎないよう幅を抑えます。 */
  .ai-lp-dx {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .ai-lp-dx-figure {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .ai-lp-hero-visual {
    gap: 12px;
  }
}

/* 2026-09-01：狭い画面ではタイルを縮めて、横並びのまま収めます。 */
@media (max-width: 700px) {
  .ai-lp-hero-line2 {
    gap: 12px;
  }

  .ai-lp-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .ai-lp-hero-icon svg {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 380px) {
  .ai-lp-hero-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .ai-lp-hero-icon svg {
    width: 23px;
    height: 23px;
  }
}

@media (max-width: 700px) {
  .ai-lp-section,
  .ai-lp-last {
    padding: 60px 0;
  }

  /* PRICE と COMPARE の間だけ、120px → 60px に詰めます（上の指定と同じ考え方です）。 */
  .ai-lp-section-tight-bottom {
    padding-bottom: 28px;
  }

  .ai-lp-section-tight-top {
    padding-top: 32px;
  }

  /* PRICE と COMPARE の間だけ、60px → 30px にさらに詰めます。 */
  .ai-lp-section-tighter-bottom {
    padding-bottom: 16px;
  }

  .ai-lp-section-tighter-top {
    padding-top: 14px;
  }

  /* 2026-08-30：最終CTAの詰めた版はスマホでも上下40px。
     スマホは見出し・説明文・サービス名がそれぞれ折り返して行数が増え、
     文字とボタンだけで292pxあるため、余白を詰めても7割までは下がりません
     （545.3px → 439.3px＝約8割）。これ以上はフォントを小さくする必要があります。 */
  .ai-lp-last-tight {
    padding: 40px 0;
  }

  .ai-lp-hero {
    padding: 32px 0 52px;
  }

  .ai-lp-tasks,
  .ai-lp-plans,
  .ai-lp-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1列になったら高さを揃える必要はないので、grid-auto-rows: 1fr を解除します
     （そのままだと1項目が2行になっただけで12個すべてが2行ぶんの高さになります）。 */
  .ai-lp-tasks {
    grid-auto-rows: auto;
  }

  .ai-lp-pro-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ここまで来ると横に並べきれないので、本文の下に回します */
  .ai-lp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .ai-lp-hero-visual {
    max-width: 100%;
    gap: 12px;
  }

  /* 画面が狭いので一回り小さくし、左のはみ出しもやめます。
     円が小さくなるぶん、いちばん長い行も 17px → 15px に下げます。 */
  /* 画面が狭いと画像の左余白も狭くなるので、はみ出しはやめて一回り小さくします。 */
  .ai-lp-hero-circle {
    left: 0;
    width: 116px;
    height: 116px;
  }

  .ai-lp-hero-circle-lead {
    font-size: 16px;
  }

  .ai-lp-hero-circle-plan {
    font-size: 13px;
  }

  .ai-lp-hero-circle-price {
    font-size: 14px;
  }

  .ai-lp-hero-list b {
    padding: 4px 9px;
  }

  /* アイコンは文言の上に置きます。 */
  .ai-lp-advisor {
    padding: 28px 22px;
  }

  .ai-lp-advisor-main {
    flex-direction: column;
    gap: 18px;
  }

  .ai-lp-advisor-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .ai-lp-advisor-icon svg {
    width: 28px;
    height: 28px;
  }

  .ai-lp-cta-row .ai-lp-btn {
    width: 100%;
  }

  /* 画面下に「無料相談」を常時表示します */
  .ai-lp-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--lp-line);
    box-shadow: 0 -6px 20px rgba(8, 35, 74, 0.1);
  }

  .ai-lp-sticky .ai-lp-btn {
    width: 100%;
    padding: 14px 20px;
  }

  /* 固定ボタンでフッターが隠れないよう、下に余白を足します */
  .ai-lp-pad {
    padding-bottom: 78px;
  }

  /* 下部の固定ボタン（高さ約70px）と重ならないよう、その上に置きます。 */
  .ai-lp-totop {
    right: 12px;
    bottom: 86px;
    width: 46px;
    height: 46px;
  }
}

/* 2026-08-30：3枠は131px角。3つ横並びの合計は419px（すき間こみ）なので
   スマホでは収まりませんが、`minmax(0, 131px)` が入れ物に合わせて自動で縮めるため、
   **どの幅でも横一列のまま**です（390pxで108px角、360pxで98px角、320pxで84.7px角）。
   ここにあった「480px以下は2列で折り返し」は、横一列を維持するご指示にあわせて
   削除済みです。 */

/* ---------- 動きを減らす設定への対応 ---------- */

@media (prefers-reduced-motion: reduce) {
  .ai-lp-btn,
  .ai-lp-card-btn {
    transition: none;
  }

  .ai-lp-pro-cards > li {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .ai-lp-pro-cards > li:hover {
    transform: none;
  }

  .ai-lp-plan {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .ai-lp-plan:hover {
    transform: none;
  }

  .ai-lp-totop {
    transition: none;
  }

  .ai-lp-totop:hover {
    transform: none;
  }

  .ai-lp-btn:hover {
    transform: none;
  }
}

/* 2026-08-30：ファーストビューの「今すぐ相談する」だけ、青を一段濃くします。
   #1777f2（--lp-blue）→ #1160c7（--lp-blue-dark）。
   ホバーはさらに濃い #0d4d9e にして、変化の向きは今までと同じ「押すと濃くなる」に。
   白文字とのコントラストは 4.24:1 → 5.96:1（ホバー時 8.16:1）に上がります。

   となりの「商品プランを見る」（.ai-lp-btn-sub）や、
   ページ下部にある他の青いボタンには影響しません。
   囲いに .ai-lp-hero-grid を使っているのは、このクラスが
   ai-samurai.html のヒーローにしか無く、士業ページや ai-apply.html の
   ヒーロー（.ai-lp-hero.ai-detail-hero）を巻き込まないためです。
   大きさ・角丸・文字色・文言・リンク先はそのままです。 */
.ai-lp-hero-grid .ai-lp-btn-main {
  background: var(--lp-blue-dark);
  color: #fff;
}

.ai-lp-hero-grid .ai-lp-btn-main:hover {
  background: #0d4d9e;
  color: #fff;
}

/* 2026-08-30：ai-apply.html の申し込み系ボタンも、ヒーローの「今すぐ相談する」と
   同じ濃い青（#1160c7 / ホバー #0d4d9e）にそろえます。

   ・「お申し込みフォームへ進む」（ページ上部と下部の2箇所）
     → この2つだけが data-ai-carry を持っているので、それを目印にしています。
       同じページ最下部の「AI導入を無料相談」は対象外なので、
       .ai-lp-btn-main 全体には掛けていません。
   ・「この内容で相談(申し込む)」（プランカード内の .ai-lp-card-apply）
     → このクラスは ai-apply.html にしかありません。

   大きさ・角丸・文字色（白）・文言・リンク先は変えていません。 */
.ai-lp-btn-main[data-ai-carry] {
  background: var(--lp-blue-dark);
  color: #fff;
}

.ai-lp-btn-main[data-ai-carry]:hover {
  background: #0d4d9e;
  color: #fff;
}

.ai-lp-card-apply {
  background: var(--lp-blue-dark);
}

.ai-lp-card-apply:hover {
  background: #0d4d9e;
}