/* 自動生成: node scripts/build-public-lp-styles.mjs。直接編集しない。 */
[data-marketing-lp][data-lp-theme="v2"] {
  --background: 0 0% 100%;
  --card: 0 0% 100%;
  --primary-foreground: 0 0% 100%;
  --marker: 52 100% 75%;
  --placeholder-foreground: 210 15% 51%;
  --font-noto-sans-jp: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

    /* CSS カスタムプロパティは「宣言した要素」で値が確定する。
       :root の --primary: var(--brand-blue) は :root 時点で置換済みなので、
       ここで --brand-blue だけ上書きしても --primary は変わらない。
       そのため実際に使うトークンを1つずつ直接宣言する。 */

    /* Main #0096D1 — メインブランドカラー・アイコン・面の色 */
    --brand-blue: 197 100% 41%;
    --primary: 197 100% 41%;
    --ring: 197 100% 41%;
    --accent-foreground: 197 100% 41%;
    /* Main (#0096D1) は白地の文字でも白文字の下地でも 3.3:1 しか出ず AA を割る。
       文字色としても、白文字を載せる面としても使える濃さ (5.1:1) を別に持つ。
       小さい文字を伴うチップ・バッジの背景は bg-primary ではなく bg-primary-600 を使うこと。 */
    --lp-primary-text: 197 100% 32%;
    --primary-600: 197 100% 32%;

    /* Text/Heading #11457E — 見出しテキスト (H2・H3) */
    --brand-navy: 211 76% 28%;
    --brand-ink: 211 76% 28%;
    --foreground: 211 76% 28%;
    --card-foreground: 211 76% 28%;
    --popover-foreground: 211 76% 28%;
    --primary-700: 211 76% 28%;
    --section-primary-top: 211 76% 28%;
    --section-primary-bottom: 211 76% 28%;

    /* Text/Secondary #3A4252 — 本文テキスト */
    --brand-copy: 220 17% 27%;
    --muted-foreground: 220 17% 27%;
    --secondary: 220 17% 27%;

    /* Text/Tertiary #6B7280 — 補足テキスト・キャプション */
    --brand-muted: 220 9% 46%;
    --text-muted: 220 9% 46%;

    /* Border #CBD2DA — ボーダー・区切り線 */
    --brand-border: 212 17% 83%;
    --brand-input: 212 17% 83%;
    --border: 212 17% 83%;
    --input: 212 17% 83%;
    --border-medium: 212 17% 83%;

    /* Surface #F1F7FB — カード・アイテム背景。96% では #EFF6FB に丸まるので 96.5% */
    --brand-pale: 204 56% 96.5%;
    --brand-subtle: 204 56% 98%;
    --muted: 204 56% 96.5%;
    --accent: 204 56% 96.5%;
    --surface-secondary: 204 56% 96.5%;
    --background-subtle: 204 56% 98%;

    /* CTA Gradient #1959B4 → #5BBDFF
       明部の #5BBDFF は白文字とのコントラストが 2.05:1 しか出ず AA (4.5:1) を割るため、
       同じ色相のまま明度だけ落として 4.5:1 を確保した値を使う。
       Figma の見た目確認はデザイナーと要すり合わせ。 */
    --lp-cta-from: 215 76% 40%;
    --lp-cta-to: 204 100% 40%;
    /* CTA の単色フォールバック。グラデが使えない面 (ボーダー等) はこちらを使う。 */
    --brand-cta: 215 76% 40%;
    --brand-cta-hover: 215 76% 34%;
    --cta: 215 76% 40%;
    --cta-hover: 215 76% 34%;
    --cta-foreground: 0 0% 100%;

    /* AI Gradient #AAD0FD → #F6C0E8 — AI 関連セクション装飾 */
    --lp-ai-from: 213 95% 83%;
    --lp-ai-to: 316 75% 86%;

    /* Page Gradient #0096D1 → #1255CA → #50C5D7 — ページ全体の薄いグラデ背景 */
    --lp-page-from: 197 100% 41%;
    --lp-page-mid: 218 84% 43%;
    --lp-page-to: 188 63% 58%;

    /* Double Color #0096D1 / #009799 — ダブルカラー装飾 */
    --lp-double-a: 197 100% 41%;
    --lp-double-b: 181 100% 30%;

    /* Support の AI 側で使う濃い青 #0075BC (バッジ・見出し・枠) */
    --lp-support-ai: 203 100% 36.9%;


    /* Surface/Translucent — チャットUI半透明背景 */
    --lp-surface-translucent: hsla(0, 0%, 100%, 0.4);

    /* Gradient/Background #ECF6FB → #EAEDF8 — セクション全面に敷く薄い横グラデ。
       Figma の書き出しを 90px 刻みで実測して 5 点に近似した (Concept 386:2289)。 */
    --lp-bg-grad-1: 200 65% 95.5%;
    --lp-bg-grad-2: 201 68% 95%;
    --lp-bg-grad-3: 208 63% 94.7%;
    --lp-bg-grad-4: 217 60% 94.1%;
    --lp-bg-grad-5: 227 50% 94.5%;

    --shadow-cta: 0 8px 20px hsla(215, 76%, 40%, 0.24);
    /* Card — Figma のカード影 (0/5/32 の黒 5%)。v1 の値より広く薄い */
    --shadow-card: 0 5px 32px rgba(0, 0, 0, 0.05);

    /* ── 型スケール (LINE Seed JP / Noto Sans JP / Montserrat) ── */
    --font-lp-heading: "LINE Seed JP", var(--font-noto-sans-jp);
    /* LP/Hero 56px */
    --lp-display-size: clamp(2rem, 5.2vw, 3.5rem);
    --lp-display-lh: 1.4;
    --lp-display-ls: 0.02em;
    --lp-display-compact-size: clamp(1.75rem, 4.2vw, 2.75rem);
    --lp-display-compact-lh: 1.4;
    --lp-display-compact-ls: 0.02em;
    /* LP/H2 48px */
    --lp-h2-size: clamp(1.5rem, 4.4vw, 3rem);
    --lp-h2-lh: 1.4;
    --lp-h2-ls: 0.02em;
    /* LP/H3 28px */
    --lp-h3-size: clamp(1.125rem, 2.6vw, 1.75rem);
    --lp-h3-lh: 1.4;
    --lp-h3-ls: 0.02em;
    /* LP/Body Large 20px */
    --lp-lead-size: clamp(1rem, 1.8vw, 1.25rem);
    --lp-lead-lh: 1.4;
    --lp-lead-ls: 0.02em;
    /* LP/Body 16px */
    --lp-body-size: 1rem;
    --lp-body-lh: 1.75;
    --lp-body-ls: 0.02em;
    /* LP/Body 2.0 18px — セクション見出しのリード文で使う */
    --lp-body2-size: 1.125rem;
    --lp-body2-lh: 2;
    --lp-body2-ls: 0.02em;
    /* LP/CTA 18px */
    --lp-cta-size: 1.125rem;
    --lp-cta-lh: 1.25;
    --lp-cta-ls: 0.02em;

    /* ── 角丸 (Figma radius 設計) ── */
    --lp-radius-sm: 4px;
    --lp-radius-md: 12px;
    --lp-radius-lg: 20px;
    --lp-radius-xl: 24px;
    --lp-radius-2xl: 40px;
    --lp-radius-3xl: 64px;

    /* ── 余白 (Figma spacing 設計 / SP 値) ── */
    --lp-space-12: 8px;
    --lp-space-16: 12px;
    --lp-space-24: 16px;
    --lp-space-32: 20px;
    --lp-space-40: 24px;
    --lp-space-48: 32px;
    --lp-space-64: 40px;
    --lp-space-80: 40px;
    --lp-space-100: 64px;
    --lp-space-120: 16px;
}
/* React・取り込みHTML・静的HTMLで共有する公開LPの意匠。
   静的配信用CSSは scripts/build-public-lp-styles.mjs で生成する。 */
[data-marketing-lp][data-lp-theme="v2"][data-public-lp] {
  --accent-foreground: 197 100% 31%;
  --lp-primary-text: 197 100% 31%;
  --primary-600: 197 100% 31%;
  --destructive-text: 0 70% 40%;
  color: hsl(var(--brand-copy));
  background: hsl(var(--background));
  font-family: var(--font-noto-sans-jp), sans-serif;
  line-height: 1.75;
  overflow-wrap: break-word;
  --lp-hero-background: linear-gradient(110deg, hsl(var(--brand-pale)), hsl(var(--lp-page-mid) / 0.08));
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(h1, h2, h3) {
  font-family: var(--font-lp-heading), sans-serif;
  letter-spacing: var(--lp-display-ls);
  text-wrap: pretty;
  word-break: auto-phrase;
  white-space: normal;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(h1, .lp-brand-title) {
  font-size: var(--lp-display-size) !important;
  line-height: var(--lp-display-lh) !important;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Studio書き出しの子要素にも共通の文字サイズを継承させる。 */
[data-marketing-lp][data-lp-theme="v2"][data-public-lp] h1 :is(span, div) {
  font-size: inherit !important;
  line-height: inherit !important;
  max-width: 100%;
  white-space: normal;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] h1.text-lp-display-compact {
  font-size: var(--lp-display-compact-size) !important;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] h2 :is(span, strong, b) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(.bg-primary, .gradient-primary) {
  background-color: hsl(var(--lp-primary-text));
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .text-success {
  color: hsl(var(--success-text));
}

/* 濃紺の面ではアクセント文字も白にして、補足まで読みやすくする。 */
[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(.section-primary, [data-lp-section="navy"]) :is(.text-primary, .text-muted-foreground) {
  color: hsl(var(--primary-foreground));
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .section-primary .card-light :is(.text-primary, .text-accent-foreground) {
  color: hsl(var(--lp-primary-text));
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .section-primary .card-light :is(.text-muted-foreground, h3, h4) {
  color: hsl(var(--brand-copy));
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(h2, .lp-brand-heading) {
  font-size: var(--lp-h2-size) !important;
  line-height: var(--lp-h2-lh) !important;
  font-weight: 700;
  overflow-wrap: anywhere;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is([data-lp-section="hero"], .lp-brand-hero) {
  background: var(--lp-hero-background) !important;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(.bg-cta, .lp-brand-cta) {
  background-color: hsl(var(--cta)) !important;
  background-image: linear-gradient(90deg, hsl(var(--lp-cta-from)), hsl(var(--lp-cta-to))) !important;
  border: 2px solid hsl(var(--cta-foreground) / 0.9);
  border-radius: var(--lp-cta-radius, 999px) !important;
  color: hsl(var(--cta-foreground)) !important;
  min-height: 48px;
  min-width: 0 !important;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: var(--shadow-cta);
  transition: filter 180ms ease, transform 180ms ease;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(.bg-cta, .lp-brand-cta):hover {
  filter: brightness(0.92);
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp]:not([data-brand-studio]) .lp-brand-cta {
  display: inline-flex;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .lp-brand-cta {
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  text-decoration: none;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .lp-brand-article-cta {
  width: 100%;
  font-size: var(--lp-cta-size);
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(.bg-cta, .lp-brand-cta):active {
  transform: translateY(1px);
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid hsl(var(--brand-navy));
  outline-offset: 4px;
}

/* 常時の点滅・浮遊ではなく、内容と押せる場所で視線を導く。 */
[data-marketing-lp][data-lp-theme="v2"][data-public-lp] :is(.pulse, .cta-pulse, .animate-shimmer, [class*="float"], [class*="Float"]) {
  animation: none !important;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .grid > * {
  min-width: 0;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .lp-brand-content {
  width: min(100% - 40px, 1120px);
  margin-inline: auto;
}

[data-brand-static] .lp-brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-brand-static] .lp-brand-on-primary {
  color: hsl(var(--primary-foreground)) !important;
}

[data-brand-static] .lp-brand-panel {
  background: hsl(var(--brand-navy)) !important;
}

[data-brand-static] .lp-brand-panel * {
  color: hsl(var(--primary-foreground)) !important;
}

[data-brand-static] .feature-ghost {
  color: hsl(var(--brand-muted)) !important;
}

[data-brand-static] .before .label {
  background: hsl(var(--brand-navy)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .lp-brand-section {
  padding-block: clamp(40px, 6vw, 96px);
}

@media (max-width: 767px) {
  /* グリッド内の長文で最小幅が広がらないようにする。比較表自体の横スクロールは維持する。 */
  [data-brand-static] :is(main, section, article) :is(div, ol, ul, li, p) {
    min-width: 0;
  }

  [data-brand-static] b {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-marketing-lp][data-public-lp] *, [data-marketing-lp][data-public-lp] *::before, [data-marketing-lp][data-public-lp] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 必須ラベルは小さな文字でも読める濃度にする。 */
[data-marketing-lp][data-lp-theme="v2"][data-public-lp] .text-destructive {
  color: hsl(var(--destructive-text));
}

/* 旧Studioのヘッダーもスマホの幅に収める。 */
@media (max-width: 767px) {
  [data-brand-studio] header > div { width: 100%; margin: 0; gap: 12px; padding: 12px 16px; }
  [data-brand-studio] header :is(.lp-4, .symbol-1__sd-2) { width: clamp(100px, 32vw, 150px); flex: none; }
  [data-brand-studio] header :is(.lp-5, .symbol-1__sd-3) { width: 100%; }
  [data-brand-studio] header :is(.lp-6, .symbol-1__sd-4) { width: 100%; height: auto; }
  [data-brand-studio] header :is(.lp-7, .symbol-1__sd-5) { width: auto; min-width: 0; flex: 1; gap: 8px; }
  [data-brand-studio] header .list-1 { display: none; }
  [data-brand-studio][data-marketing-lp][data-lp-theme="v2"][data-public-lp] header .lp-brand-cta { width: auto; flex: 1 1 0; padding: 10px 8px; min-height: 44px; font-size: 12px; }
  [data-brand-studio] header .lp-brand-cta p { font-size: inherit; }
  [data-brand-studio] header :is(.lp-10, .lp-11, .symbol-1__sd-7) { min-width: 0; flex-shrink: 1; }
  [data-brand-studio] header :is(.lp-12, .symbol-1__sd-8) { width: 44px; height: 44px; flex: none; padding: 12px; }
}

[data-brand-static] footer .copy { color: hsl(var(--primary-foreground) / .8); }

/* 濃い旧ヒーローを淡い共通背景へ移したLPの文字色。 */
[data-brand-static] .lp-brand-dark-source h1,
[data-brand-static] .lp-brand-dark-source h1 :is(span, em) { color: hsl(var(--brand-navy)); }
[data-brand-static] .lp-brand-dark-source :is(.hero-copy, .hero-copy b, .hero-note, .hero-trust, .trust, .visual-note, .hero-visual-note, .ghost) { color: hsl(var(--brand-copy)); }
[data-brand-static] .lp-brand-dark-source :is(.badge, .hero-badge) { color: hsl(var(--brand-navy)); background: hsl(var(--card)); border-color: hsl(var(--brand-border)); }
[data-brand-static] .lp-brand-dark-source .ghost { border-color: hsl(var(--brand-border)); }

/* エラーはブランドの青と区別できる状態色を保つ。 */
[data-brand-static] :is(.error, .form-error-global, .req) { color: hsl(var(--destructive-text)); }
[data-brand-static] .field.invalid :is(input, select, textarea, .radio, .choice-group) { border-color: hsl(var(--destructive-text)); }

/* 画像自体が案内になっているリンクはカードとして扱う。 */
[data-brand-static] .lp-brand-image-cta { display: block; max-width: 100%; padding: 0; border-radius: 16px; overflow: hidden; animation: none !important; transform: none !important; scale: none !important; }

/* Studio比較表はページではなく表の領域だけを横スクロールする。 */
[data-brand-studio] :is(.lp-153, .sd-153) { width: 100%; max-width: 100%; min-width: 0; }
[data-brand-studio] :is(h1, h2) { min-width: 0; max-width: 100%; }
@media (max-width: 767px) {
  [data-brand-studio] header .sd-4 { width: clamp(100px, 32vw, 150px); flex: none; }
  [data-brand-studio] header .sd-5 { width: 100%; }
  [data-brand-studio] header .sd-6 { width: 100%; height: auto; }
  [data-brand-studio] header .sd-7 { width: auto; min-width: 0; flex: 1; gap: 8px; }
  [data-brand-studio] header .sd-10 { min-width: 0; flex-shrink: 1; }
  [data-brand-studio] header .sd-12 { width: 44px; height: 44px; flex: none; padding: 12px; }
}

[data-brand-studio] sd-carousel { overflow: hidden; }
[data-brand-studio] :is(.symbol-2__sd-2, .symbol-2__lp-2) { flex: 1; min-width: 0; }

[data-brand-studio] .lp-cro-ceo-career { box-sizing: border-box; min-width: 0; max-width: 100%; }

/* 取り込みLPのスマホヘッダーは元のメニュー導線を保つ。 */
@media (max-width: 760px) {
  [data-marketing-lp][data-lp-theme="v2"][data-public-lp] [data-lp="agent-match"] .header-cta { display: none; }
}

/* 基準ページは構成を保ち、小さな文字とラベルのコントラストだけを補正する。
   計測中のテスト LP (/lp/test/001・003) は、比較を崩さないよう main と同じこの暗い色のまま使う。 */
[data-marketing-lp][data-lp-theme="v2"].lp-brand-reference { --lp-double-b: 181 100% 25%; }
[data-marketing-lp][data-lp-theme="v2"].lp-brand-reference .bg-primary { background-color: hsl(var(--lp-primary-text)); }
/* アイブロウは PC が 20px 太字 (AA の大きい文字) なので、暗くするのは SP の 14px だけ */
@media (width < 1024px) {
  [data-marketing-lp][data-lp-theme="v2"].lp-brand-reference .lp-figma-eyebrow-main { color: hsl(var(--lp-primary-text)); }
}
/* トップ (/) だけは Figma の色をそのまま使う。暗くした Main (--lp-primary-text: #0075A3 相当) を
   Figma の Main (#0096D1) へ向け、上の .bg-primary・アイブロウもまとめて Main にする。緑も Figma の #009799。
   ボタン hover の --primary-600 は残す。小さい文字が AA (4.5:1) を下回るのは承知のうえで、Figma の色を優先する (Issue 5050) */
.home-figma-colors [data-marketing-lp][data-lp-theme="v2"].lp-brand-reference { --lp-primary-text: var(--primary); --lp-double-b: 181 100% 30%; }
/* home-figma-colors はトップ専用の目印として色以外にも使う。小見出しの文字下 3px (Figma) は
   ブラウザでは中央がずれて見えるため、トップだけ消す (Issue 5134)。テスト LP は残す */
.home-figma-colors [data-marketing-lp][data-lp-theme="v2"].lp-brand-reference .lp-figma-eyebrow-text { padding-bottom: 0; }
[data-marketing-lp][data-lp-theme="v2"].lp-brand-reference .home-price-label { background-color: hsl(var(--brand-navy) / .25); }

@media (min-width: 1024px) {
  [data-marketing-lp][data-lp-theme="v2"].lp-brand-reference .hero-figma-title { font-size: calc(var(--lp-display-size) * .98) !important; }
}

[data-brand-static] .lp-brand-dark-source :is(.trust, .hero-trust) * { color: hsl(var(--brand-copy)); }

/* 濃いフッターでも正規ロゴの色を保ち、白い面で読みやすくする。 */
[data-brand-static] footer .lp-brand-footer-logo {
  height: auto !important;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 10px;
  background: hsl(var(--card));
  filter: none !important;
  object-fit: contain;
}