@charset "utf-8";

/* =========================================================
   業種別ページ（サポートAI™）の共通スタイル

   読み込む順番
     css/ai-lp.css → css/ai-detail.css → css/ai-modal.css →
     css/chat-faq.css → このファイル
   の順で、必ず最後に読み込んでください。ai-lp.css と同じ詳細度で
   打ち消している箇所があるため、前に置くと効きません。

   中身は3つに分かれています。
     A. 業種切り替えボタン（全業種で共通）
     B. サービス名バッジの色を変数にする（既定値＝士業版のいまの見た目）
     C. 業種テーマカラー（js/industry-data.js の theme から）
     E. ノートPCの画面（枠は写真のまま、中身だけHTMLで描く）

   士業版（ai-samurai.html）の色は、いままでどおり ai-samurai.html の中の
   <style> が決めています。このファイルは士業版の見た目を変えません。

   最終更新: 2026-08-31
   ========================================================= */


/* =========================================================
   A. 業種切り替えボタン
   ========================================================= */

/* 2026-09-01：業種の切り替えは、ヒーローからハンバーガーメニューへ移しました
   （メニューの「サービス内容」の下。指定は下のセクションFです）。
   バッジの行に足していた折り返しと余白の指定は、バッジ1つだけに戻ったので
   取り除いています。バッジの位置は切り替えボタンを置く前と同じです。

   下の .ind-switch / .ind-switch-btn は、メニュー以外の場所にも切り替えを
   出したくなったときのために残してあります（いまはどのページでも使っていません）。 */

/* ボタンの並び。折り返します。 */
.ind-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

/* 1つ1つのボタン。バッジ（.ai-lp-badge-service）と高さがそろうよう、
   余白と文字サイズを合わせています。 */
.ind-switch-btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(28, 37, 48, 0.28);
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink-mute, #55606d);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.ind-switch-btn:hover {
  border-color: var(--ind-accent, #123f7d);
  background: rgba(var(--ind-tint-rgb, 18, 63, 125), 0.07);
  color: var(--ind-accent, #123f7d);
  text-decoration: none;
}

.ind-switch-btn:focus-visible {
  outline: 3px solid var(--ind-accent, #123f7d);
  outline-offset: 2px;
}

/* 表示中の業種。塗りつぶして白文字にします。
   色は業種ごとに --ind-accent で切り替わります。 */
.ind-switch-btn.is-current {
  border-color: var(--ind-accent, #123f7d);
  background: var(--ind-accent, #123f7d);
  color: #fff;
  cursor: default;
}

.ind-switch-btn.is-current:hover {
  background: var(--ind-accent, #123f7d);
  color: #fff;
}


/* =========================================================
   B. サービス名バッジ（全業種で共通のデザイン）

   ai-lp.css の `.ai-lp-hero-line2-badge .ai-lp-badge`（詳細度 0-2-0）と
   同じ詳細度なので、このファイルを後ろに読み込むことで上書きします。

   見た目は業種によらず「白地・黒文字・黒枠」で固定です。
   業種の色は、文言の先頭に置く丸印だけで示します。
   角丸・大きさ・余白は従来のままです。

   丸印の色は js/industry-data.js の theme（--ind-fill）から来ます。
   theme を持たない業種（士業版）では、そのページの青（--lp-blue）に
   なります。運送業を緑で足せば、丸印も自動で緑になります。

   コントラスト：#1A1A1A × 白 = 19.6:1（AAA）
   ========================================================= */

/* クラスを2つ重ねて詳細度を上げています。下のセクションCに
   「塗りの上の文字を --ind-on-fill にする」指定があり、そこに
   .ai-lp-badge も含まれるためです。バッジは白地なので、
   onFill が白の業種（不動産版）でも必ず黒文字になるようにします。 */
.ai-lp-hero-line2-badge .ai-lp-badge.ai-lp-badge-service {
  display: inline-flex;
  align-items: center;
  border-color: #1A1A1A;
  background: #ffffff;
  color: #1A1A1A;
}

/* 業種を示す丸印。飾りなので読み上げの対象にはなりません
   （文字ではなく擬似要素なので、文言のコピーにも含まれません）。 */
.ai-lp-hero-line2-badge .ai-lp-badge.ai-lp-badge-service::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--ind-fill, var(--lp-blue, #123f7d));
}


/* =========================================================
   C. 業種テーマカラー（士業版以外）

   色の決め方
     黄色は「背景・枠線・アイコン」に使い、文字色には使いません。
     明るい黄色 #FFD400 は白地に対して 1.4:1 しかなく、文字には
     使えないためです。かわりに
       ・黄色で塗った面の上の文字 → --ind-on-fill（#1A1A1A・12.2:1）
       ・白地の上の文字           → --ind-ink（#1A1A1A・19.6:1）
     とし、黄色は面と枠線とアイコンで見せています。
     濃紺の面（ノートPCの画面）の上だけは #FFD400 をそのまま使います。

   仕組み
     js/industry.js が js/industry-data.js の theme を読み、
     --ind-fill / --ind-on-fill / --ind-ink … の9個を
     <body> と <main> に入れます。
     このファイルは、その9個を共通CSSが参照している変数
     （--lp-blue / --accent / --lp-navy など）へ割り当てたうえで、
     共通CSSが色を直書きしている箇所を上書きしています。
     色の値はここには書きません（例外はいちばん下の「控え」だけです）。

   業種を増やすときは js/industry-data.js に theme を1つ足すだけで、
   このファイルを触る必要はありません。

   士業版（ai-samurai.html）は theme を持たないので .has-ind-theme が
   付かず、ここの指定は一切効きません。
   ========================================================= */

/* ---------- 共通CSSの変数への割り当て ---------- */

.has-ind-theme {
  /* 面と枠線
     2026-09-01：業種色で塗った面の文字を9業種そろえて白にしたので、
     「塗り」に使う色は fillStrong（白文字で4.5:1以上）に切り替えました。
     fillStrong を持たない業種（士業・不動産・自動車・製造・美容）は
     var() の既定値によって、これまでどおり fill が使われます。
     薄い塗り（--ind-fill-soft）や半透明（--ind-fill-rgb）、丸印は fill のままです。 */
  --lp-blue: var(--ind-fill-strong, var(--ind-fill));
  --lp-blue-dark: var(--ind-fill-strong-dark, var(--ind-fill-dark));
  --accent: var(--ind-fill-strong, var(--ind-fill));
  --accent-dark: var(--ind-fill-strong, var(--ind-fill));
  /* --accent-bright は共通ヘッダーのメニューでしか使っていないので、
     業種テーマでは差し替えません。メニューの見た目（紺地・区切り線・
     現在地の青い下線）をどのページでも同じに保つためです。 */

  /* カードのタイトルバー（上から下へのグラデーション）。
     この上の見出しも白文字になるので、塗り用の色を使います。 */
  --lp-screen-top: var(--ind-fill-strong, var(--ind-fill));
  --lp-screen-bottom: var(--ind-fill-strong-dark, var(--ind-fill-dark));

  /* 濃色。もとは紺で、見出しの文字色としても地色としても使われています。
     黄色にはできないので、ほぼ黒にそろえます。 */
  --lp-navy: var(--ind-ink);
  --lp-navy-deep: var(--ind-ink);

  /* 濃色の面の上に置く明るいアクセント。カードのタイトルバーは黄色に
     なったので、その上のアイコンは黒（--ind-on-fill）にします。 */
  --lp-sky: var(--ind-on-fill);

  --lp-soft: var(--ind-soft);
  --lp-line: var(--ind-hairline);

  /* 半透明で使うときのRGB */
  --ind-tint-rgb: var(--ind-fill-rgb);
  --ind-solid-rgb: var(--ind-fill-rgb);
  --ind-deep-rgb: var(--ind-ink-rgb);

  /* 業種切り替えボタン（セクションAが読みます）。
     サービス名バッジは全業種とも白地・黒文字・黒枠で固定なので、
     ここでは色を渡していません（丸印だけが --ind-fill を使います）。 */
  --ind-accent: var(--ind-fill);
}

/* 選択中の切り替えボタンは黄色の塗り＋黒文字にします。 */
.has-ind-theme .ind-switch-btn.is-current,
.has-ind-theme .ind-switch-btn.is-current:hover {
  color: var(--ind-on-fill);
}

.has-ind-theme .ind-switch-btn:hover {
  color: var(--ind-ink);
}

/* ---------- 黄色の面の上に来る文字を黒にする ----------
   共通CSSでは「青い面＋白文字」を前提に color: #fff と書かれています。
   面が黄色になるので、文字だけ黒に置き換えます。 */

.has-ind-theme .ai-lp-btn-main,
.has-ind-theme .ai-lp-btn-main:hover,
.has-ind-theme .ai-lp-badge,
.has-ind-theme .ai-lp-plan-tag,
.has-ind-theme .ai-lp-pro-btn:hover,
.has-ind-theme .ai-lp-pro-cards h3,
.has-ind-theme .ai-lp-pro-cards .ai-lp-pro-head h3,
.has-ind-theme .ai-lp-hero-circle,
.has-ind-theme .ai-lp-hero-circle:hover,
.has-ind-theme .ai-lp-totop,
.has-ind-theme .ai-lp-totop:hover,
.has-ind-theme .ai-lp-dx-core,
.has-ind-theme .ai-lp-dx-core b,
.has-ind-theme .ai-lp-dx-core span,
.has-ind-theme .ai-lp-advisor-icon,
.has-ind-theme .ai-detail-cmp-shigyo input:checked + span,
.has-ind-theme .ai-detail-cmp-tag,
.has-ind-theme .ai-detail-cmp-pick,
.has-ind-theme .ai-lp-badge-pick,
.has-ind-theme .chat-faq-launcher,
.has-ind-theme .chat-faq-head,
.has-ind-theme .chat-faq-head *,
.has-ind-theme .chat-faq-bubble-right,
.has-ind-theme .chat-faq-fallback-btn {
  color: var(--ind-on-fill);
}

/* SVGアイコンは currentColor ではなく stroke 指定のものがあるので個別に。 */
.has-ind-theme .ai-lp-dx-core svg,
.has-ind-theme .ai-lp-advisor-icon svg,
.has-ind-theme .ai-lp-totop svg,
.has-ind-theme .ai-lp-pro-icon {
  color: var(--ind-on-fill);
}

/* カードのタイトルバーのアイコン枠。もとは白い面の上に水色でした。 */
/* 既定は白を薄く重ねた下地です。塗りが濃くて文字を白にしている業種では、
   js/industry-data.js の iconChip / iconChipLine で沈んだ下地に差し替えます。 */
.has-ind-theme .ai-lp-pro-icon {
  border-color: var(--ind-icon-chip-line, rgba(var(--ind-ink-rgb), 0.30));
  background: var(--ind-icon-chip, rgba(255, 255, 255, 0.42));
}

/* ---------- 白地の上の文字を黒にする ----------
   共通CSSで var(--lp-blue) を文字色に使っている箇所です。
   面と枠線は黄色のまま、文字だけ黒にします。 */

.has-ind-theme .ai-lp-en,
.has-ind-theme .ai-lp-head .ai-lp-en,
.has-ind-theme .ai-lp-hero .ai-lp-en,
.has-ind-theme .ai-lp-facts span,
.has-ind-theme .ai-lp-pro-btn,
.has-ind-theme .ai-lp-btn-sub,
.has-ind-theme .ai-lp-btn-invert,
.has-ind-theme .ai-lp-flow li::before,
.has-ind-theme .ai-lp-catch b,
.has-ind-theme .ai-lp-plan-stars .is-on,
.has-ind-theme .ai-detail-cmp thead th .is-on,
.has-ind-theme .chat-faq-back-btn:hover,
/* 価格の数字と単位（39.9万円〜）。太字で大きいですが、
   明るい黄色は白地では読めないので黒にします。 */
.has-ind-theme .ai-lp-price,
.has-ind-theme .ai-lp-price small,
/* プランカードの項目名（こんな方におすすめ／対象範囲／含まれるもの） */
.has-ind-theme .ai-lp-plan-specs b,
/* 比較表の見出し行（プラン名と価格） */
.has-ind-theme .ai-detail-cmp thead th,
.has-ind-theme .ai-detail-cmp thead th span,
.has-ind-theme .ai-lp-advisor-price .ai-lp-price {
  color: var(--ind-ink);
}

/* 未点灯の星。もとは淡い色でしたが、白地で読める濃さにします
   （点いている星＝黒、消えている星＝中間のグレー）。 */
.has-ind-theme .ai-lp-plan-stars,
.has-ind-theme .ai-detail-cmp thead th .ai-detail-cmp-stars {
  color: rgba(var(--ind-ink-rgb), 0.62);
}

/* ホバーしても文字は黒のまま、面と枠線だけ動かします。 */
.has-ind-theme .ai-lp-btn-sub:hover,
.has-ind-theme .ai-lp-btn-invert:hover {
  color: var(--ind-ink);
  border-color: var(--ind-fill-dark);
  background: rgba(var(--ind-fill-rgb), 0.22);
  box-shadow: none;
}

.has-ind-theme .ai-lp-btn-sub,
.has-ind-theme .ai-lp-btn-invert {
  border-color: var(--ind-fill);
}

/* ヒーローの塗りボタン「今すぐ相談する」。
   共通CSS（ai-lp.css の後ろのほう）で var(--lp-blue-dark) が当たっていて、
   ほかの黄色い塗りより一段暗くなってしまうので、ここでそろえます。
   カーソルを載せたときだけ一段暗くします。 */
.has-ind-theme .ai-lp-hero-grid .ai-lp-btn-main {
  background: var(--ind-fill-strong, var(--ind-fill));
  color: var(--ind-on-fill);
}

.has-ind-theme .ai-lp-hero-grid .ai-lp-btn-main:hover {
  background: var(--ind-fill-strong-dark, var(--ind-fill-dark));
  color: var(--ind-on-fill);
}

/* ---------- ヒーロー ---------- */

.has-ind-theme .ai-lp-hero {
  background:
    radial-gradient(760px 360px at 86% 0%, rgba(var(--ind-fill-rgb), 0.20), transparent 62%),
    linear-gradient(160deg, #fffdf3 0%, #fffef9 42%, #ffffff 82%);
}

.has-ind-theme .ai-lp-hero::before {
  background-image:
    linear-gradient(rgba(var(--ind-ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ind-ink-rgb), 0.05) 1px, transparent 1px);
}

/* 画像左上の円形バッジ。黄色の塗りに黒文字です。 */
.has-ind-theme .ai-lp-hero-circle {
  background: var(--ind-fill-strong, var(--ind-fill));
  box-shadow: 0 8px 20px rgba(var(--ind-ink-rgb), 0.26);
}

.has-ind-theme .ai-lp-hero-circle:hover {
  box-shadow: 0 12px 26px rgba(var(--ind-ink-rgb), 0.34);
}

.has-ind-theme .ai-lp-hero-circle:focus-visible {
  outline-color: var(--ind-ink);
}

/* 価格の訴求コピー。マーカーを黄色、数字を黒にします。 */
.has-ind-theme .ai-lp-catch {
  background-image: none;
}

/* 2026-09-03：マーカーが濃すぎるとのご指摘で、不透明度を 0.85 → 0.45 に下げました。
   色そのもの（--ind-fill-rgb ＝ 業種のテーマカラー）は変えていないので、
   業種ごとの色分けはそのまま残り、濃さだけが9ページで共通になります。
   下線は文字の後ろ（背景）に敷いているだけで、文字色（--lp-navy）は変わりません。
   もともと下地が白、文字が濃紺なので、薄くしても本文の読みやすさは落ちません。 */
.has-ind-theme .ai-lp-catch span {
  background-image: linear-gradient(transparent 56%, rgba(var(--ind-fill-rgb), 0.45) 56%);
  background-repeat: no-repeat;
}

.has-ind-theme .ai-lp-catch b {
  font-size: 1.55em;
}

/* ヒーロー右下のラインナップのタグ。
   薄い塗りに、濃いほうの色の枠線と黒文字です。
   薄い地の上なので、塗りの上の文字色（--ind-on-fill）ではなく
   本文の色（--ind-ink）を使います。onFill が白の業種でも読めます。

   幅は5つとも同じにそろえています。いちばん長い項目名が1行に収まる大きさを
   全部に当てているので、右の説明文の書き出しもそろい、見切れも起きません。 */
.has-ind-theme .ai-lp-hero-list b {
  min-width: 118px;
  background: var(--ind-fill-soft);
  border-color: var(--ind-fill);
  color: var(--ind-ink);
  font-size: 13px;
  white-space: nowrap;
}

/* ---------- 5枚のカード ---------- */

/* ---------- 5枚のカードのヘッダーの高さをそろえる ----------
   2026-09-01：カード名やサブタイトルの長さがカードごとに違うため、
   業種色で塗ったヘッダーの高さがばらつき、白い本文の始まる位置も
   横一列にそろっていませんでした。

   直し方は「固定の高さを決め打ちする」のではなく、5枚が同じ行を共有する形
   （subgrid）にしています。こうすると、いちばん高いカードに他の4枚が自動で
   そろい、業種ごとに無駄な余白が出ません（文言を変えても直しは不要です）。
     ・親（ul）に「ヘッダーの行」と「本文の行」の2行を用意する
     ・各カード（li）はその2行にまたがり、行の高さを親から受け取る
   2列・1列に折り返したときも、その並びごとに同じ動きになります
   （grid-auto-rows で同じ組み合わせを繰り返しています）。 */
.has-ind-theme .ai-lp-pro-cards {
  grid-template-rows: auto 1fr;
  grid-auto-rows: auto 1fr;
}

.has-ind-theme .ai-lp-pro-cards > li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

/* subgrid に対応していないブラウザ向けの控え。
   いちばん文字数の多いカード（飲食業「ラーメン・定食・ファストフード」＝
   タイトル2行＋サブ2行）が収まる高さです。 */
@supports not (grid-template-rows: subgrid) {
  .has-ind-theme .ai-lp-pro-head {
    min-height: 67px;
  }
}

/* ヘッダーの中身は上ぞろえにして、余った高さは下に残します。
   あわせて、タイトルが1行に収まりやすいよう横幅を稼いでいます。
     ・アイコン 52px → 44px（中の図柄も比率どおり 30px → 26px）
     ・アイコンとテキストの間隔 12px → 8px
     ・タイトル 14px → 12px
   これでタイトルの使える幅が 122.8px → 134.8px に広がり、
   2行に折り返すカードが12枚 → 2枚（飲食業のみ）に減ります。 */
.has-ind-theme .ai-lp-pro-head {
  align-items: flex-start;
  gap: 8px;
}

.has-ind-theme .ai-lp-pro-head .ai-lp-pro-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.has-ind-theme .ai-lp-pro-head .ai-lp-pro-icon svg {
  width: 26px;
  height: 26px;
}

.has-ind-theme .ai-lp-pro-cards h3,
.has-ind-theme .ai-lp-pro-cards .ai-lp-pro-head h3 {
  font-size: 12px;
}

/* カード名の下に置く、対象の工事業種。 */
.has-ind-theme .ai-lp-pro-title {
  min-width: 0;
}

.has-ind-theme .ai-lp-pro-scope {
  margin: 2px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  /* 2026-09-01：この行はカードのヘッダー（業種色のベタ塗り）の上にあります。
     塗りの上の文字は9業種とも白にそろえる方針なので、黒（--ind-ink）から
     白に変えました。
     いったん白85%にしましたが、10.5pxの小さな文字なので4.5:1が必要で、
     建設業（4.00:1）・運送業（3.92:1）・飲食業（3.91:1）・不動産業（4.43:1）で
     足りませんでした。白100%なら9業種とも塗り色と同じ比（4.80:1以上）になります。
     見出し（14px・太字）との差は、大きさと太さで十分に付いています。 */
  color: var(--ind-on-fill);
  /* 折り返しは「・」の後ろだけにします（「リフォ／ーム」のような割れ方を防ぎます）。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 「導入効果」の枠。 */
.has-ind-theme .ai-lp-pro-body .ai-lp-effect p {
  background: rgba(var(--ind-fill-rgb), 0.22);
  border-color: var(--ind-fill);
  color: var(--ind-ink);
}

/* ---------- 価格・プラン比較表 ---------- */

.has-ind-theme .ai-detail-cmp thead th.is-pick {
  background: rgba(var(--ind-fill-rgb), 0.22);
}

/* 「対応業務」のチップ。
     未選択 … 薄い黄色の地＋濃い黄色の枠線＋黒文字（ラインナップのタグと同じ）
     選択中 … 濃い黄色のベタ塗り＋黒文字
   押せることが伝わるよう、カーソルを載せたときは一段濃くします。 */
.has-ind-theme .ai-detail-cmp-shigyo span {
  border-color: var(--ind-fill);
  background: var(--ind-fill-soft);
  color: var(--ind-ink);
  cursor: pointer;
}

.has-ind-theme .ai-detail-cmp-shigyo label:hover span {
  background: rgba(var(--ind-fill-rgb), 0.55);
}

.has-ind-theme .ai-detail-cmp-shigyo input:checked + span {
  border-color: var(--ind-fill-strong, var(--ind-fill));
  background: var(--ind-fill-strong, var(--ind-fill));
  color: var(--ind-on-fill);
}

.has-ind-theme .ai-detail-cmp-shigyo input:focus-visible + span {
  outline-color: var(--ind-ink);
}

@media (max-width: 900px) {
  .has-ind-theme .ai-detail-cmp td[data-plan="AIスタンダード"] {
    background: rgba(var(--ind-fill-rgb), 0.10);
  }
}

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

.has-ind-theme .ai-lp-last {
  background:
    radial-gradient(620px 300px at 84% 10%, rgba(var(--ind-fill-rgb), 0.18), transparent 62%),
    linear-gradient(150deg, #ffffff, #fffdf4);
}

/* ---------- 共通CSSが色を直書きしている残りの箇所 ----------
   数値（ぼかし・位置・不透明度）は元のままで、色みだけ差し替えています。 */

.has-ind-theme .ai-lp-shigyo {
  background:
    radial-gradient(700px 340px at 90% 0%, rgba(var(--ind-fill-rgb), 0.16), transparent 62%),
    linear-gradient(160deg, #ffffff, var(--lp-soft));
}

.has-ind-theme .ai-lp-plan:hover {
  box-shadow: 0 16px 34px rgba(var(--ind-ink-rgb), 0.16);
}

.has-ind-theme .ai-lp-plan-pick {
  box-shadow: 0 16px 40px rgba(var(--ind-ink-rgb), 0.14);
}

.has-ind-theme .ai-lp-advisor-icon {
  box-shadow: 0 6px 16px rgba(var(--ind-ink-rgb), 0.22);
}

.has-ind-theme .ai-lp-dx-core {
  box-shadow: 0 10px 26px rgba(var(--ind-ink-rgb), 0.24);
}

.has-ind-theme .ai-lp-facts li {
  box-shadow: 0 2px 10px rgba(var(--ind-ink-rgb), 0.06);
}

.has-ind-theme .ai-lp-hero-visual img {
  filter: drop-shadow(0 14px 26px rgba(var(--ind-ink-rgb), 0.16));
}

.has-ind-theme .ai-lp-pro-cards > li {
  box-shadow: 0 3px 14px rgba(var(--ind-ink-rgb), 0.10);
}

.has-ind-theme .ai-lp-pro-cards > li:hover {
  box-shadow: 0 12px 28px rgba(var(--ind-ink-rgb), 0.22);
}

.has-ind-theme .ai-lp-plan-tag {
  box-shadow: 0 4px 12px rgba(var(--ind-ink-rgb), 0.18);
}

.has-ind-theme .ai-lp-advisor {
  box-shadow: 0 10px 30px rgba(var(--ind-ink-rgb), 0.08);
}

.has-ind-theme .ai-lp-dx-figure::after {
  border-color: rgba(var(--ind-ink-rgb), 0.16);
}

.has-ind-theme .ai-lp-dx-tag {
  box-shadow: 0 3px 12px rgba(var(--ind-ink-rgb), 0.09);
}

.has-ind-theme .ai-lp-totop {
  background: var(--ind-fill-strong, var(--ind-fill));
  box-shadow: 0 6px 18px rgba(var(--ind-ink-rgb), 0.28);
}

.has-ind-theme .ai-lp-sticky {
  box-shadow: 0 -6px 20px rgba(var(--ind-ink-rgb), 0.10);
}

.has-ind-theme .ai-detail-cmp tbody tr.ai-detail-cmp-excl td,
.has-ind-theme .ai-detail-cmp tbody tr.ai-detail-cmp-excl th,
.has-ind-theme .ai-detail-cmp tbody tr.ai-detail-cmp-excl th span {
  color: rgba(var(--ind-ink-rgb), 0.82);
}

.has-ind-theme .ai-detail-cmp tbody tr.ai-detail-cmp-excl td {
  background: rgba(var(--ind-ink-rgb), 0.025);
}

.has-ind-theme .ai-detail-cmp tbody tr.ai-detail-cmp-excl td li::before {
  color: rgba(var(--ind-ink-rgb), 0.66);
}

/* 申し込みのボタン（比較表の下と、申し込みモーダルの中）。
   通常時は薄い黄色、カーソルを載せると濃い黄色に変わります。
   文字はどちらの状態でも黒のままです
   （#1A1A1A × #FFF0B3 は 15.2:1、× #FFD400 は 12.2:1）。 */
.has-ind-theme .ai-detail-cmp-apply-btn,
.has-ind-theme .ai-modal-btn-main {
  background: var(--ind-fill-soft);
  border-color: var(--ind-fill);
  color: var(--ind-ink);
}

.has-ind-theme .ai-detail-cmp-apply-btn:hover,
.has-ind-theme .ai-modal-btn-main:hover {
  background: var(--ind-fill-strong, var(--ind-fill));
  border-color: var(--ind-fill-strong, var(--ind-fill));
  color: var(--ind-on-fill);
}

.has-ind-theme .ai-detail-cmp-apply-btn {
  box-shadow: 0 10px 26px rgba(var(--ind-ink-rgb), 0.18), 0 2px 6px rgba(var(--ind-ink-rgb), 0.12);
}

.has-ind-theme .ai-detail-cmp-apply-btn:hover {
  box-shadow: 0 16px 34px rgba(var(--ind-ink-rgb), 0.24), 0 3px 8px rgba(var(--ind-ink-rgb), 0.16);
}

/* チャットQ&A。全体が青の直書きです。面を黄色、文字を黒にします。 */
.has-ind-theme .chat-faq-launcher,
.has-ind-theme .chat-faq-launcher-icon::after,
.has-ind-theme .chat-faq-head,
.has-ind-theme .chat-faq-bubble-right,
.has-ind-theme .chat-faq-fallback-btn {
  background: var(--ind-fill-strong, var(--ind-fill));
}

.has-ind-theme .chat-faq-launcher:hover,
.has-ind-theme .chat-faq-fallback-btn:hover {
  background: var(--ind-fill-strong-dark, var(--ind-fill-dark));
}

.has-ind-theme .chat-faq-launcher {
  border-color: var(--ind-ink);
  box-shadow: 0 8px 20px rgba(var(--ind-ink-rgb), 0.26), 0 2px 6px rgba(var(--ind-ink-rgb), 0.16);
}

.has-ind-theme .chat-faq-launcher:hover {
  box-shadow: 0 14px 28px rgba(var(--ind-ink-rgb), 0.34);
}

.has-ind-theme .chat-faq-launcher:focus-visible {
  outline-color: var(--ind-ink);
}

/* 質問・カテゴリの選択肢。共通CSSでは白地に青文字・青系の枠線ですが、
   建設業版などテーマを持つ業種では、文字を黒・枠線を薄い黄色にそろえます
   （選ぶと薄い黄色が付き、押せることが分かる形です）。 */
.has-ind-theme .chat-faq-choice {
  color: var(--ind-ink);
  border-color: var(--ind-fill-soft);
}

.has-ind-theme .chat-faq-choice:hover {
  border-color: var(--ind-fill);
  background: rgba(var(--ind-fill-rgb), 0.16);
}

/* 「最初に戻る」も同じ色みにそろえます。 */
.has-ind-theme .chat-faq-back-btn {
  color: var(--ind-ink);
}

.has-ind-theme .chat-faq-panel {
  box-shadow: 0 18px 48px rgba(var(--ind-ink-rgb), 0.22);
}

/* ---------- カードのはみ出し防止 ----------
   ul の既定の字下げが効いてしまうと、いちばん左のカードが
   セクションの外へ出ます。念のため打ち消しておきます。 */
.has-ind-theme .ai-lp-pro-cards,
.has-ind-theme .ai-lp-hero-list,
.has-ind-theme .ai-lp-plans {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
}

.has-ind-theme .ai-lp-pro-cards > li {
  min-width: 0;
}

/* ---------- JavaScriptが動かないとき用の控え ----------
   通常は js/industry.js が js/industry-data.js の theme を読んで
   同じ値を入れます。ここはJavaScriptが無効なときのための控えで、
   値は industry-data.js の theme と同じものです。
   2026-09-01：--ind-on-fill を9業種とも白にし、白文字が読める濃さの
   --ind-fill-strong（＋そのホバー）を、必要な4業種に足しました。
   **industry-data.js を直したら、この控えも同じ値にそろえてください。** */
[data-industry="construction"] {
  --ind-fill: #FFD400;
  --ind-fill-dark: #EBC400;
  --ind-fill-soft: #FFF0B3;
  --ind-on-fill: #FFFFFF;
  --ind-icon-chip: rgba(0, 0, 0, 0.18);
  --ind-icon-chip-line: rgba(255, 255, 255, 0.32);
  --ind-fill-strong: #877000;
  --ind-fill-strong-dark: #6C5A00;
  --ind-ink: #1A1A1A;
  --ind-soft: #FFFBEA;
  --ind-hairline: #F0E4B0;
  --ind-screen-bg: #FFD400;
  --ind-screen-bg-soft: #FFE45C;
  --ind-screen-tile: #FFFFFF;
  --ind-screen-tile-line: #E0A800;
  --ind-screen-accent: #FFD400;
  --ind-screen-wave: #E0A800;
  --ind-fill-rgb: 255, 212, 0;
  --ind-ink-rgb: 26, 26, 26;
}

/* 不動産版。値は js/industry-data.js の theme と同じものです。 */
[data-industry="realestate"] {
  --ind-fill: #C62828;
  --ind-fill-dark: #A81F1F;
  --ind-fill-soft: #FBE3E2;
  --ind-on-fill: #FFFFFF;
  --ind-ink: #1A1A1A;
  --ind-soft: #FFF7F6;
  --ind-hairline: #F0D5D3;
  --ind-icon-chip: rgba(0, 0, 0, 0.18);
  --ind-icon-chip-line: rgba(255, 255, 255, 0.32);
  --ind-screen-bg: #E97C78;
  --ind-screen-bg-soft: #F5B3B0;
  --ind-screen-tile: #FFFFFF;
  --ind-screen-tile-line: #A81F1F;
  --ind-screen-accent: #C62828;
  --ind-screen-wave: #A81F1F;
  --ind-fill-rgb: 198, 40, 40;
  --ind-ink-rgb: 26, 26, 26;
}

/* 美容業版。値は js/industry-data.js の theme と同じものです。 */
[data-industry="beauty"] {
  --ind-fill: #BE185D;
  --ind-fill-dark: #9D1350;
  --ind-fill-soft: #FBDCE8;
  --ind-on-fill: #FFFFFF;
  --ind-ink: #1A1A1A;
  --ind-soft: #FFF5F8;
  --ind-hairline: #F3D3E0;
  --ind-icon-chip: rgba(0, 0, 0, 0.18);
  --ind-icon-chip-line: rgba(255, 255, 255, 0.32);
  --ind-screen-bg: #E07AA4;
  --ind-screen-bg-soft: #EFAEC8;
  --ind-screen-tile: #FFFFFF;
  --ind-screen-tile-line: #9D1350;
  --ind-screen-accent: #BE185D;
  --ind-screen-wave: #9D1350;
  --ind-fill-rgb: 190, 24, 93;
  --ind-ink-rgb: 26, 26, 26;
}

/* 飲食業版。値は js/industry-data.js の theme と同じものです。 */
[data-industry="restaurant"] {
  --ind-fill: #F97316;
  --ind-fill-dark: #FB8A2E;
  --ind-fill-soft: #FDE4CE;
  --ind-on-fill: #FFFFFF;
  --ind-icon-chip: rgba(0, 0, 0, 0.18);
  --ind-icon-chip-line: rgba(255, 255, 255, 0.32);
  --ind-fill-strong: #BE5105;
  --ind-fill-strong-dark: #984104;
  --ind-ink: #1A1A1A;
  --ind-soft: #FFF7EF;
  --ind-hairline: #F5DCC6;
  --ind-screen-bg: #F9A566;
  --ind-screen-bg-soft: #FBC79B;
  --ind-screen-tile: #FFFFFF;
  --ind-screen-tile-line: #D2600C;
  --ind-screen-accent: #F97316;
  --ind-screen-wave: #D2600C;
  --ind-fill-rgb: 249, 115, 22;
  --ind-ink-rgb: 26, 26, 26;
}

/* 自動車業版。値は js/industry-data.js の theme と同じものです。 */
[data-industry="automobile"] {
  --ind-fill: #41608F;
  --ind-fill-dark: #31496D;
  --ind-fill-soft: #DFE7F3;
  --ind-on-fill: #FFFFFF;
  --ind-ink: #1A1A1A;
  --ind-soft: #F5F8FD;
  --ind-hairline: #D3DDEC;
  --ind-icon-chip: rgba(0, 0, 0, 0.18);
  --ind-icon-chip-line: rgba(255, 255, 255, 0.32);
  --ind-screen-bg: #7A93BB;
  --ind-screen-bg-soft: #A9BBD6;
  --ind-screen-tile: #FFFFFF;
  --ind-screen-tile-line: #31496D;
  --ind-screen-accent: #41608F;
  --ind-screen-wave: #31496D;
  --ind-fill-rgb: 65, 96, 143;
  --ind-ink-rgb: 26, 26, 26;
}

/* 製造業版。値は js/industry-data.js の theme と同じものです。 */
[data-industry="manufacturing"] {
  --ind-fill: #8D5A3B;
  --ind-fill-dark: #6E4128;
  --ind-fill-soft: #F0E2D6;
  --ind-on-fill: #FFFFFF;
  --ind-ink: #1A1A1A;
  --ind-soft: #FBF6F1;
  --ind-hairline: #E5D3C3;
  --ind-icon-chip: rgba(0, 0, 0, 0.18);
  --ind-icon-chip-line: rgba(255, 255, 255, 0.32);
  --ind-screen-bg: #C79366;
  --ind-screen-bg-soft: #E0BC9C;
  --ind-screen-tile: #FFFFFF;
  --ind-screen-tile-line: #6E4128;
  --ind-screen-accent: #8D5A3B;
  --ind-screen-wave: #6E4128;
  --ind-fill-rgb: 141, 90, 59;
  --ind-ink-rgb: 26, 26, 26;
}

/* クリニック版。値は js/industry-data.js の theme と同じものです。 */
[data-industry="clinic"] {
  --ind-fill: #A970F2;
  --ind-fill-dark: #BC8CF6;
  --ind-fill-soft: #EEE4FC;
  --ind-on-fill: #FFFFFF;
  --ind-icon-chip: rgba(0, 0, 0, 0.18);
  --ind-icon-chip-line: rgba(255, 255, 255, 0.32);
  --ind-fill-strong: #7C3AED;
  --ind-fill-strong-dark: #5C14D8;
  --ind-ink: #1A1A1A;
  --ind-soft: #F9F6FE;
  --ind-hairline: #E4DAF6;
  --ind-screen-bg: #B78DF5;
  --ind-screen-bg-soft: #D6C2FA;
  --ind-screen-tile: #FFFFFF;
  --ind-screen-tile-line: #7C3AED;
  --ind-screen-accent: #A970F2;
  --ind-screen-wave: #7C3AED;
  --ind-fill-rgb: 169, 112, 242;
  --ind-ink-rgb: 26, 26, 26;
}

/* 運送業版。値は js/industry-data.js の theme と同じものです。 */
[data-industry="logistics"] {
  --ind-fill: #14A05C;
  --ind-fill-dark: #17B368;
  --ind-fill-soft: #D6F2E3;
  --ind-on-fill: #FFFFFF;
  --ind-icon-chip: rgba(0, 0, 0, 0.18);
  --ind-icon-chip-line: rgba(255, 255, 255, 0.32);
  --ind-fill-strong: #10834C;
  --ind-fill-strong-dark: #0D693D;
  --ind-ink: #1A1A1A;
  --ind-soft: #F2FBF6;
  --ind-hairline: #D6E8DD;
  --ind-screen-bg: #3CBB80;
  --ind-screen-bg-soft: #7FD6AC;
  --ind-screen-tile: #FFFFFF;
  --ind-screen-tile-line: #0E8B4E;
  --ind-screen-accent: #14A05C;
  --ind-screen-wave: #0E8B4E;
  --ind-fill-rgb: 20, 160, 92;
  --ind-ink-rgb: 26, 26, 26;
}

/* =========================================================
   E. ノートPCの画面（枠は写真のまま、中身だけHTMLで描く）

   写真（img/ai-support-hero.png・実寸951×627）のノートPCは少し斜めを
   向いているため、画面はまっすぐな長方形ではありません。
   写真から実測した画面の四隅は次のとおりです（画像の座標）。

       左上 (254.5,  53.0)    右上 (889.0,  53.5)
       左下 (233.8, 445.0)    右下 (871.9, 467.8)

   ここに 636×414 の板をぴったり載せるため、下の .lap-plate に
   射影変換（matrix3d）を当てています。実際の値は上の四隅を
   3.5pxだけ外へ広げた四角形から計算したものです。少し大きめに
   覆うことで、写真に焼き込まれた画面が縁からはみ出しません
   （はみ出した3.5pxはノートPCの黒い縁に重なるので目立ちません）。

   画面の中身を差し替えるときは、js/industry-data.js の screen だけを
   直してください。このファイルの座標は写真を変えない限りそのままです。
   ========================================================= */

/* 写真の上に重ねる入れ物。画像と同じ幅・同じ縦横比にします
   （.ai-lp-hero-shot の中で、画像は左上から幅100%で表示されています）。
   クリックは下の画像へ素通しさせ、円形バッジ（z-index:2）より下に置きます。 */
.lap-screen {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  aspect-ratio: 951 / 627;
  pointer-events: none;
}

/* 写真と同じ951×627の座標で組み、表示幅に合わせて縮めます。
   --lap-scale は js/industry.js が入れます（幅 ÷ 951）。 */
.lap-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 951px;
  height: 627px;
  transform-origin: 0 0;
  transform: scale(var(--lap-scale, 1));
}

/* 画面そのもの。この中はまっすぐな636×414として組み、
   最後に matrix3d でノートPCの傾きに合わせます。 */
.lap-plate {
  position: absolute;
  left: 0;
  top: 0;
  width: 636px;
  height: 414px;
  overflow: hidden;
  transform-origin: 0 0;
  transform: matrix3d(
    0.932178, -0.003413, 0, -0.000084,
    -0.054161, 0.948153, 0, -0.000017,
    0, 0, 1, 0,
    251.573096, 51.080824, 0, 1);
  /* 画面の地。業種テーマから差し替えられます。
     既定は士業版の濃紺で、値を書かなければ従来どおりです。 */
  background:
    radial-gradient(120% 90% at 50% 0%, var(--lap-glow, rgba(255, 255, 255, 0.07)), rgba(255, 255, 255, 0) 60%),
    var(--lap-bg, linear-gradient(165deg, #06182f 0%, #0b2c56 52%, #061c37 100%));
  font-family: var(--font);
  text-align: center;
}

.lap-title {
  margin: 30px 0 0;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--lap-title, #fff);
}

.lap-sub {
  margin: 10px 0 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--lap-sub, #9fd4ff);
}

/* 5枚を等幅で横並び。項目が5つである前提の見た目なので、
   増減させたい場合は js/industry-data.js の items を増減してください
   （grid が自動で等分します）。 */
.lap-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 位置と大きさは、もとの写真に写っていた画面を実測して合わせています
     （カード幅約112px・間隔約10px・左右の余白約13px）。 */
  gap: 10px;
  margin: 20px 14px 0;
  padding: 0;
  list-style: none;
}

.lap-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--lap-card-pad, 24px 6px 26px);
  border: 1px solid var(--lap-line, rgba(124, 202, 255, 0.30));
  border-radius: 12px;
  background: var(--lap-card-bg, rgba(255, 255, 255, 0.055));
}

/* アイコンの図柄は5枚のカードと同じもの（js/industry.js の ICONS）です。
   カード側は「薄い下地の角丸チップ＋その中に一回り小さい図柄」なので、
   画面側も同じ見せ方になるよう、下地と大きさを変数で切り替えられるように
   しています。既定値（チップなし・図柄が箱いっぱい）は士業版の従来どおりです。 */
.lap-icon {
  display: grid;
  place-items: center;
  width: var(--lap-icon-box, 48px);
  height: var(--lap-icon-box, 48px);
  border: var(--lap-icon-border, 0 solid transparent);
  border-radius: var(--lap-icon-radius, 0);
  background: var(--lap-icon-bg, transparent);
  color: var(--lap-accent, #7ccaff);
}

.lap-icon svg {
  display: block;
  width: var(--lap-icon-glyph, 100%);
  height: var(--lap-icon-glyph, 100%);
  /* 線の太さ。画面は板ごと縮小して描かれるぶん線が眠く見えるので、
     テーマ側で少しだけ太らせてカードと同じ濃さに見えるようにできます。 */
  stroke-width: var(--lap-icon-stroke, 1.7);
}

.lap-name {
  /* 業種名は「行政書士AI」(6字)から「許可・期限管理AI」(9字)まで長さが違います。
     長いものは2行に折り返すので、5枚とも同じ高さになるよう箱の高さを決めて
     上下中央に置いています（アイコンと説明文の位置がそろいます）。 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 11px;
  padding: 0 2px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--lap-title, #fff);
  /* 折り返しは js が「・」の後ろに入れた <wbr> の位置だけにします。
     どうしても収まらないときだけ、どこででも折り返します。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.lap-desc {
  /* 説明文も2行までを想定して高さをそろえています。 */
  display: block;
  min-height: 27px;
  margin-top: 4px;
  padding: 0 2px;
  /* 9.5px は「許認可申請・書類作成」（10文字）がカードの中に1行で収まる大きさで、
     もとの写真の説明文とほぼ同じです。 */
  font-size: 9.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--lap-desc, rgba(255, 255, 255, 0.72));
}

/* 画面下の波模様。写真の元の画面にあった飾りを線で再現しています。 */
.lap-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--lap-wave-height, 90px);
  fill: none;
  stroke: var(--lap-wave, var(--lap-accent, #7ccaff));
  stroke-width: var(--lap-wave-width, 1.7);
  opacity: var(--lap-wave-opacity, 0.42);
}

/* ---------- 画面の色づかい ---------- */

/* 青系（士業版）。もとの写真と同じ色みにそろえています。 */
.lap-screen[data-lap-theme="blue"] {
  --lap-accent: #7ccaff;
  --lap-sub: #9fd4ff;
  --lap-line: rgba(124, 202, 255, 0.30);
  --lap-card-bg: rgba(255, 255, 255, 0.055);
  --lap-glow: rgba(255, 255, 255, 0.07);
  --lap-wave-opacity: 0.5;
  --lap-bg: linear-gradient(165deg, #06182f 0%, #0b2c56 52%, #061c37 100%);
  --lap-title: #fff;
  --lap-desc: rgba(255, 255, 255, 0.72);
  --lap-wave: #7ccaff;
  --lap-wave-width: 1.7;
}

/* 明るい地の画面（建設業版・運送業版など）。
   士業版の「濃紺の地＋白文字」に対して、「明るい地＋黒の文字」に
   反転させたものです。地・タイル・枠線・波模様の色はすべて
   js/industry-data.js の screen… から来るので、業種ごとに変わります。
   （data-lap-theme の値は "light" です。"gold" は建設業版で先に
     使っていた古い呼び名で、同じ意味として受け付けています）

   色はすべて js/industry-data.js の theme から来ます
   （screenBg / screenBgSoft / screenTile / screenAccent / ink / fill）。
   業種を増やしたときも、テーマ色を変えるだけで画面の地色が切り替わります。

   コントラスト
     見出し・項目名 #1A1A1A × タイルの白   … 19.6:1（AAA）
     見出し #1A1A1A × 地 #FFD400           … 12.2:1（AAA）
     説明文 #1A1A1A の72% × タイルの白     … 6.9:1（AA）
     アイコン #1A1A1A × タイルの白         … 19.6:1
   いずれもAA（文字4.5:1／図形3:1）を上回ります。
   タイルの枠線と波模様の #FFD400 は装飾なので、コントラスト基準の
   対象外です（意味は文字が担っています）。 */
.lap-screen[data-lap-theme="light"],
.lap-screen[data-lap-theme="gold"] {
  --lap-bg: linear-gradient(165deg,
    var(--ind-screen-bg-soft, #FFE45C) 0%,
    var(--ind-screen-bg, #FFD400) 52%,
    var(--ind-screen-bg-soft, #FFE45C) 100%);
  --lap-glow: rgba(255, 255, 255, 0.55);
  --lap-title: var(--ind-ink, #1A1A1A);
  --lap-sub: var(--ind-ink, #1A1A1A);
  /* 説明文は9.5pxと小さいので、白地でもはっきり読めるよう濃いめにしています
     （#1A1A1A の82%＝#434343 相当。白に対して9.9:1）。 */
  --lap-desc: rgba(var(--ind-ink-rgb, 26, 26, 26), 0.82);
  --lap-accent: var(--ind-ink, #1A1A1A);
  /* タイルは白。枠線は地の上でも境目が分かるよう、地より濃い金色に
     しています（地が #FFD400 なので、#FFD400 の枠線だとタイルの外側で
     消えてしまうためです）。 */
  --lap-line: var(--ind-screen-tile-line, #E0A800);
  --lap-card-bg: var(--ind-screen-tile, #FFFFFF);
  --lap-wave: var(--ind-screen-wave, #E0A800);
  --lap-wave-width: 2.4;
  --lap-wave-opacity: 1;

  /* アイコンの下地。5枚のカード（.ai-lp-pro-icon）と同じ
     「薄い黄色の角丸チップ＋一回り小さい図柄」にそろえます。
     カードは 52px の箱に 30px の図柄（比 0.58）なので、
     画面も 80px の箱に 46px の図柄（比 0.58）で同じ比率にしています。 */
  /* 図柄の大きさは、5枚のカードのアイコン（30px）と画面上で同じ寸法に
     なるようにしています。画面は板ごと0.62倍で描かれるので、
     48px × 0.62 ＝ 約30px です。
     線の太さも、縮小で眠く見えるぶんを見込んで一段太くしています
     （48pxに1.9 ＝ 画面上で約2.4px。カードは30pxに1.7 ＝ 約2.1px）。 */
  --lap-icon-box: 72px;
  --lap-icon-glyph: 48px;
  --lap-icon-radius: 18px;
  /* チップを載せたぶんタイルが高くなるので、内側の余白と波の高さを詰めて
     タイルと波が重ならないようにしています。 */
  --lap-card-pad: 20px 5px 18px;
  --lap-wave-height: 66px;
  --lap-icon-border: 1px solid rgba(var(--ind-ink-rgb, 26, 26, 26), 0.16);
  /* アイコンの下地。白いタイルの上で薄い黄色のチップとして見える濃さです
     （#FFE047 相当）。 */
  --lap-icon-bg: rgba(var(--ind-fill-rgb, 255, 212, 0), 0.72);
  --lap-icon-stroke: 1.9;
}


/* =========================================================
   G. 共通ヘッダーを出すようになったヒーローの上余白

   このLPは以前ヘッダーを出しておらず、ヒーローの上余白44pxが
   ページ最上部の余白を兼ねていました。2026-09-01に他ページと同じ
   ヘッダー（高さ66px）を載せたので、その分だけ詰めています。
   ヘッダーの下端からブロックまでの間隔は、他ページと同じ見え方になります。

   ヒーローの中にあった会社ロゴは、ヘッダーのロゴと重なるため外しました。
   そのぶん上が空くので、ここで詰めるのが自然な形です。
   ========================================================= */

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

@media (max-width: 860px) {
  .ai-lp .ai-lp-hero {
    padding-top: 24px;
  }
}
