@charset "utf-8";
/*==========================================
 BtoBブランディング LP（/b2b・b2b/templates/top.php）と /b2b 以下のページ共通のヘッダー・フッター

 - このファイルは LP だけで読み込む（b2b/inc/assets.php）。全セレクタを body.lp-b2b 配下に閉じる
 - 共通トークン（--color-* / --font-* / --lh-* / --radius-*）は b2b/assets/css/base.css の :root を var() で参照する
 - LP 専用のデザイン値は、:root ではなく下の .lp-b2b に定義する（PC 値 --lp-xxx / SP 値 --lp-xxx-sp を並べる）。
   LP の値を共通 CSS に入れず、LP を外すときにこのファイルごと削除できるようにするため
 - @media 内でトークンを上書きしない（SP は --lp-xxx-sp を使う）
===========================================*/

.lp-b2b {
  /* --- color（LP 専用の色面。base.css に同等のトークンが無いものだけ） --- */
  --lp-ink: var(--color-gray-950);
  --lp-text: var(--color-text);
  --lp-muted: var(--color-gray-700);
  --lp-line: var(--color-gray-200);
  --lp-surface: var(--color-offwhite);
  --lp-accent: var(--color-brand);
  --lp-dark: #0f1519;                           /* 濃色面（FV・チェック）：技術・精密さを想起させる青みの墨。--color-gray-950 より深く、シアンとの対比を出す */
  --lp-fv-tone: linear-gradient(to top right, #5e1984 0%, #3b4a9b 50%, #0f89ba 100%); /* FV・セルフチェックの地：左下の紫から右上のシアンへ（tests/colortone.jpg に合わせる） */
  --lp-dark-text: rgba(255, 255, 255, 0.78);    /* 濃色面の本文（白78%） */
  --lp-dark-muted: rgba(255, 255, 255, 0.55);   /* 濃色面の補足（白55%） */
  --lp-dark-line: rgba(255, 255, 255, 0.14);    /* 濃色面の罫線・図形（白14%） */
  --lp-accent-glow: rgba(0, 180, 216, 0.28);    /* --color-cyan の28%：濃色面の光 */
  --lp-accent-tint: rgba(0, 180, 216, 0.08);    /* --color-cyan の8%：薄い面 */
  --lp-sticky-bg: rgba(255, 255, 255, 0.94);    /* SP 下部固定CTAの背景（白94%） */

  /* --- layout --- */
  --lp-container: 1160px;
  --lp-gutter: 40px;
  --lp-gutter-sp: 20px;
  --lp-header-h: 72px;
  --lp-header-h-sp: 96px;        /* ロゴの行＋ナビの行 */
  --lp-header-logo-row-sp: 52px; /* SP：ロゴの行の高さ */
  --lp-header-logo-h: 40px;
  --lp-header-logo-h-sp: 30px;
  --lp-header-nav-gap: 36px;
  --lp-section: 140px;
  --lp-section-sp: 80px;
  --lp-heading-gap: 64px;     /* セクション見出し → 本文 */
  --lp-heading-gap-sp: 40px;
  --lp-seminar-band-margin: 100px;    /* 子ページ：フッターの上のセミナーバナーの上下の余白 */
  --lp-seminar-band-margin-sp: 50px;
  --lp-seminar-banner-w: 1080px;      /* セミナーバナーの最大幅（画像の実寸。LP の本文幅 1160px − 左右の余白と同じ） */
  --lp-fv-min-h: 720px;
  --lp-fv-max-h: 900px;
  --lp-sticky-h-sp: 76px;

  /* --- font（font-size と line-height はセット） --- */
  --lp-font-hero: 7.2rem;
  --lp-font-hero-sp: 3.8rem;
  --lp-lh-hero: 1.28;
  --lp-font-hero-sub: 2.4rem;
  --lp-font-hero-sub-sp: 1.8rem;
  --lp-lh-hero-sub: 1.6;
  --lp-font-title: 4.2rem;
  --lp-font-title-sp: 2.6rem;
  --lp-lh-title: 1.5;
  --lp-font-lead: 1.7rem;
  --lp-font-lead-sp: 1.5rem;
  --lp-lh-lead: 2.0;
  --lp-lh-lead-sp: 1.9;
  --lp-font-label: 1.3rem;    /* 英字ラベル（Poppins） */
  --lp-font-card-title: 2.2rem;
  --lp-font-card-title-sp: 1.9rem;
  --lp-lh-card-title: 1.55;
  --lp-font-step-title: var(--font-heading-emphasis); /* ブランディングフローのコピー（カード見出しより2段大きい 3.0rem） */
  --lp-font-step-title-sp: 2.4rem;
  --lp-font-number: 5.6rem;   /* 実績の数字 */
  --lp-font-number-sp: 4.0rem;
  --lp-font-fact: 4.0rem;     /* 実績・支援領域の数字欄の見出し（専門家集団・100業種の経験・50年の実績） */
  --lp-font-fact-sp: 3.2rem;
  --lp-fv-logos-bottom: 72px;     /* ファーストビューのロゴの帯の下端の位置（下のスクロールの線と同じ高さ） */
  --lp-fv-logos-bottom-sp: 48px;
  --lp-fv-logos-space: 100px;     /* ロゴの帯の高さの上限（PC・1列） */
  --lp-fv-logos-space-sp: 184px;  /* 同 SP（1行に4つ・3行） */
  --lp-fv-logos-gap-sp: 8px;
  --lp-fv-logos-gap: 8px;         /* ロゴの間隔の最小値（PC）。実際の間隔は帯の幅に対して均等に広がる */
  /* ロゴ画像（高さ76pxに切り出したもの）の表示の高さ。元画像に対して全ロゴ同じ縮尺。
     縮尺は従来の表示と同じ：PC＝帯の幅（左右の余白48px・間隔8px×10を除く）を11等分した枠に、元画像の幅131pxを収める。
     SP＝帯の幅（左右の余白24px・間隔8px×3を除く）を4等分した枠に収める。どちらも元画像の実寸（76px）まで */
  --lp-fv-logos-h: min(76px, calc((100vw - 128px) / 11 * 76 / 131));
  --lp-fv-logos-h-sp: min(76px, calc((100vw - 48px) / 4 * 76 / 131));
  --lp-flow-arrow-w: 75px;    /* ブランディングフローのステップ間の下向き三角（/b2b/diagnose の結果の締め文の三角と同じ大きさ：幅 150px・高さ 20px） */
  --lp-flow-arrow-w-sp: 50px;
  --lp-flow-arrow-h: 20px;
  --lp-flow-arrow-h-sp: 14px;
  --lp-font-issues-note: var(--lp-font-hero-sub); /* 課題リストの下の締めの一文（2.4rem） */
  --lp-font-issues-note-sp: 2.0rem;
  --lp-strategy-pad: 64px;    /* 課題別の戦略：枠の内側の余白 */
  --lp-strategy-pad-sp: 20px;
  --lp-strategy-gap: 64px;    /* 同：枠と枠の間 */
  --lp-strategy-gap-sp: 32px;
  --lp-strategy-border: 3px;  /* 同：CIブルーの枠線の太さ */
  --lp-font-strategy-approach: var(--lp-font-card-title); /* 同：解決アプローチの小見出し（カード見出しと同じ 2.2rem） */
  --lp-font-strategy-approach-sp: var(--lp-font-card-title-sp);
  --lp-team-image-w: 420px;   /* TCDの共創体制：右端の写真の幅 */
  --lp-service-h: 96px;       /* 支援領域のボタンの天地（従来 64px の1.5倍） */
  --lp-service-h-sp: 84px;    /* 同 SP（従来 56px の1.5倍） */
  --lp-lh-number: 1.1;
  --lp-font-button: 1.8rem;
  --lp-font-button-sp: 1.5rem;

  /* --- button --- */
  --lp-button-h: 68px;
  --lp-button-h-sp: 56px;
  --lp-button-padding-x: 44px;
  --lp-button-padding-x-sp: 16px;
  --lp-radius: var(--radius-sm);

  /* --- /b2b/diagnose：固定ヘッダーの高さ（base.css の通常ヘッダー用の値を、LP ヘッダーの高さに置き換える） --- */
  --diagnose-header-offset: var(--lp-header-h);
  --diagnose-header-offset-sp: var(--lp-header-h-sp);

  /* --- motion --- */
  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lp-reveal-distance: 24px;
}

/*------------------------------------------
 ベース（base.css の body / a / header の共通指定を LP 内だけ上書き）
------------------------------------------*/
.lp-b2b {
  color: var(--lp-text);
  font-weight: 400;
}
.lp-b2b a,
.lp-b2b a:visited,
.lp-b2b a:hover,
.lp-b2b a:active {
  text-decoration: none; /* base.css の a:visited 等の下線を LP では使わない（ボタン・カードが下線付きになるため） */
}
.lp-b2b img {
  max-width: 100%;
  height: auto;
}
.lp-b2b [id] {
  scroll-margin-top: var(--lp-header-h);
}
/* 見出し・短文は文節で折り返す（対応ブラウザのみ。非対応でも通常の折り返しになる） */
.lp-b2b h1,
.lp-b2b h2,
.lp-b2b h3,
.lp-b2b .lp-issues_Item,
.lp-b2b .lp-works_Client,
.lp-b2b .lp-fv_Sub,
.lp-b2b .lp-button,
.lp-b2b .lp-issues_Note {
  word-break: auto-phrase;
}
.lp-b2b .lp-container {
  max-width: var(--lp-container);
  margin: 0 auto;
  padding: 0 var(--lp-gutter);
  box-sizing: border-box;
}
.lp-b2b .lp-main {
  display: block;
  padding-top: var(--lp-header-h);
}
/* /b2b 以下の固定ページ（フォーム・診断。page.php などの #mainContents）：
   base.css の通常ヘッダー用の上余白（PC 120px・SP 54px）を、LP ヘッダーの高さに合わせる */
.lp-b2b #mainContents {
  margin-top: var(--lp-header-h);
}
@media only screen and (max-width: 767px) {
  .lp-b2b [id] {
    scroll-margin-top: var(--lp-header-h-sp);
  }
  .lp-b2b #mainContents {
    margin-top: var(--lp-header-h-sp);
  }
  .lp-b2b .lp-container {
    padding: 0 var(--lp-gutter-sp);
  }
  .lp-b2b .lp-main {
    padding-top: var(--lp-header-h-sp);
  }
}

/*------------------------------------------
 ヘッダー（b2b/templates/parts/header.php）
 base.css の header（高さ 120px → スクロールで 80px）を LP の高さに置き換える。
 ロゴは常にスクロール時のもの（tcd_logo_down.svg）。SP はロゴの行とナビの行の2段
------------------------------------------*/
.lp-b2b .lp-header {
  height: var(--lp-header-h);
  border-bottom: 1px solid var(--lp-line);
}
.lp-b2b .lp-header_Inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  padding: 0 var(--lp-gutter);
}
.lp-b2b .lp-header_Logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.lp-b2b .lp-header_Logo img {
  width: auto;
  height: var(--lp-header-logo-h);
}
.lp-b2b .lp-header_Nav ul {
  display: flex;
  gap: var(--lp-header-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-b2b .lp-header_Nav a {
  display: flex;
  align-items: center;
  height: var(--lp-header-h);
  box-sizing: border-box;
  border-bottom: 4px solid transparent; /* 現在地・ホバーの線。a の高さが固定（border-box）なので、太くすると上へ伸びる */
  color: var(--lp-ink);
  font-size: var(--font-ui-small);
  font-weight: 700;
  line-height: var(--lh-compact);
  transition: border-color 0.2s ease;
}
.lp-b2b .lp-header_Nav a:hover,
.lp-b2b .lp-header_Nav a[aria-current="page"] {
  border-bottom-color: var(--lp-accent);
}
/* SP だけ短い表記（「BtoBブランディング」→「トップ」） */
.lp-b2b .lp-header_NavSp {
  display: none;
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-header {
    height: var(--lp-header-h-sp);
  }
  .lp-b2b .lp-header_Inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .lp-b2b .lp-header_Logo {
    height: var(--lp-header-logo-row-sp);
    padding: 0 var(--lp-gutter-sp);
  }
  .lp-b2b .lp-header_Logo img {
    height: var(--lp-header-logo-h-sp);
  }
  .lp-b2b .lp-header_Nav {
    border-top: 1px solid var(--lp-line);
  }
  /* 4項目を改行せず1行に並べる。項目の幅は文字数に合わせ、余りを均等に配る（等幅の列だと「セルフチェック」が折り返すため） */
  .lp-b2b .lp-header_Nav ul {
    gap: 0;
  }
  .lp-b2b .lp-header_Nav li {
    flex: 1 1 auto;
  }
  .lp-b2b .lp-header_Nav a {
    justify-content: center;
    height: calc(var(--lp-header-h-sp) - var(--lp-header-logo-row-sp) - 2px); /* exception: ヘッダー下端・ナビ上端の罫線（各1px）を除いた高さ */
    padding: 0 4px;
    font-size: var(--font-caption);
    line-height: var(--lh-ui-tight);
    white-space: nowrap;
  }
  .lp-b2b .lp-header_NavPc {
    display: none;
  }
  .lp-b2b .lp-header_NavSp {
    display: inline;
  }
}

/*------------------------------------------
 ボタン
------------------------------------------*/
.lp-b2b .lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: var(--lp-button-h);
  padding: 0 var(--lp-button-padding-x);
  border: 2px solid transparent;
  border-radius: var(--lp-radius);
  box-sizing: border-box;
  font-size: var(--lp-font-button);
  font-weight: 700;
  line-height: var(--lp-lh-hero-sub);
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s var(--lp-ease);
}
.lp-b2b .lp-button::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
/* 主CTA：シアン地に白文字・角丸・影。診断のボタン（.diagnose-check_Button）と /b2b のフォームの送信ボタンと同じ見た目にそろえる
   （白文字はシアン地とのコントラストが低め。ボタンは太字で大きめの文字にしている） */
.lp-b2b .lp-button--primary {
  background: var(--lp-accent);
  box-shadow: var(--card-shadow);
  color: var(--color-white);
}
.lp-b2b .lp-button--primary:hover {
  opacity: 0.7;
}
.lp-b2b .lp-button--outline {
  border-color: var(--lp-ink);
  background: transparent;
  color: var(--lp-ink);
}
.lp-b2b .lp-button--outline:hover {
  background: var(--lp-ink);
  color: var(--color-white);
}
.lp-b2b .lp-button:focus-visible,
.lp-b2b .lp-header_Nav a:focus-visible,
.lp-b2b .lp-textlink:focus-visible {
  outline: 3px solid var(--lp-accent);
  outline-offset: 3px;
}
.lp-b2b .lp-textlink {
  display: inline-block;
  margin-top: 24px;
  border-bottom: 1px solid currentColor;
  color: var(--lp-ink);
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-button {
    gap: 12px;
    width: 100%;
    min-height: var(--lp-button-h-sp);
    padding: 0 var(--lp-button-padding-x-sp);
    font-size: var(--lp-font-button-sp);
  }
}

/*------------------------------------------
 セクション共通・見出し
------------------------------------------*/
.lp-b2b .lp-section {
  padding: var(--lp-section) 0;
}
.lp-b2b .lp-heading {
  max-width: 880px;
  margin-bottom: var(--lp-heading-gap);
}
.lp-b2b .lp-heading_Label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--lp-accent);
  font-family: 'Poppins', sans-serif;
  font-size: var(--lp-font-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: var(--lp-lh-hero-sub);
  text-transform: uppercase;
}
.lp-b2b .lp-heading_Label::before {
  content: "";
  width: 32px;
  height: 2px;
  background: currentColor;
}
.lp-b2b .lp-heading_Title {
  color: var(--lp-ink);
  font-size: var(--lp-font-title);
  font-weight: 700;
  line-height: var(--lp-lh-title);
  letter-spacing: 0.02em;
}
.lp-b2b .lp-heading_Lead {
  margin-top: 28px;
  font-size: var(--lp-font-lead);
  line-height: var(--lp-lh-lead);
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-section {
    padding: var(--lp-section-sp) 0;
  }
  .lp-b2b .lp-heading {
    margin-bottom: var(--lp-heading-gap-sp);
  }
  .lp-b2b .lp-heading_Title {
    font-size: var(--lp-font-title-sp);
  }
  .lp-b2b .lp-heading_Lead {
    margin-top: 20px;
    font-size: var(--lp-font-lead-sp);
    line-height: var(--lp-lh-lead-sp);
  }
  .lp-b2b .lp-heading_Lead br {
    display: none; /* SP は PC 用の改行を使わず自然に折り返す */
  }
}

/*------------------------------------------
 Section 1：ファーストビュー
------------------------------------------*/
.lp-b2b .lp-fv {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(var(--lp-fv-min-h), calc(100vh - var(--lp-header-h)), var(--lp-fv-max-h));
  padding: 96px 0 calc(var(--lp-fv-logos-bottom) + var(--lp-fv-logos-space) + 48px); /* 下寄りのロゴの帯の分を空ける */
  overflow: hidden;
  background: var(--lp-dark);
  background-image: var(--lp-fv-tone);
  color: var(--color-white);
  box-sizing: border-box;
}
.lp-b2b .lp-fv_Visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
}
/* 写真のスライドショー：同心円の中心（右 52% の範囲の左 62%・上 46%）に 600×600 で置き、周りを円形のグラデーションで地に溶かす
   3枚を 6秒ずつ、フェードで重ねながら切り替える（1周 18秒） */
.lp-b2b .lp-fv_Slides {
  position: absolute;
  top: 46%;
  left: 62%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.lp-b2b .lp-fv_Slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: lp-fv-slide 18s ease-in-out infinite;
}
.lp-b2b .lp-fv_Slide:nth-child(2) {
  animation-delay: 6s;
}
.lp-b2b .lp-fv_Slide:nth-child(3) {
  animation-delay: 12s;
}
/* 画像未設定時の図形：精密な図面・計測をイメージした格子と同心円（装飾） */
.lp-b2b .lp-fv_Pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 62% 46%, var(--lp-accent-glow) 0, transparent 42%),
    repeating-radial-gradient(circle at 62% 46%, transparent calc(var(--lp-fv-ripple) - 60px) calc(var(--lp-fv-ripple) - 1px), var(--lp-dark-line) calc(var(--lp-fv-ripple) - 1px) var(--lp-fv-ripple)), /* 60px 間隔の同心円。--lp-fv-ripple を 0→60px で動かして外へ広げる */
    repeating-linear-gradient(0deg, transparent 0 39px, var(--lp-dark-line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--lp-dark-line) 39px 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%);
  mask-image: linear-gradient(90deg, transparent 0, #000 35%);
  animation: lp-fv-ripple 6s linear infinite, lp-fv-grid 12s linear infinite;
}
.lp-b2b .lp-fv_Pattern::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 62%;
  width: 360px;
  height: 360px;
  border: 1px solid var(--lp-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  -webkit-mask-image: conic-gradient(#000 var(--lp-fv-ring-draw), transparent 0); /* 上から時計回りに線を描く */
  mask-image: conic-gradient(#000 var(--lp-fv-ring-draw), transparent 0);
  animation: lp-fv-ring-draw 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both, lp-fv-ring-breathe 6s ease-in-out 2.1s infinite;
}
.lp-b2b .lp-fv_Image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.lp-b2b .lp-fv_Inner {
  position: relative;
  width: 100%;
}
.lp-b2b .lp-fv_Title,
.lp-b2b .lp-final_Title {
  font-feature-settings: "palt"; /* “”・。などの約物を詰める（「“選ばれる理由”に。」を1行に収める） */
}
.lp-b2b .lp-fv_Title {
  color: var(--color-white);
  font-size: var(--lp-font-hero);
  font-weight: 700;
  line-height: var(--lp-lh-hero);
  letter-spacing: 0.03em;
}
.lp-b2b .lp-fv_Sub {
  margin-top: 28px;
  color: var(--lp-accent);
  font-size: var(--lp-font-hero-sub);
  font-weight: 700;
  line-height: var(--lp-lh-hero-sub);
}
.lp-b2b .lp-fv_Lead {
  max-width: 620px;
  margin-top: 20px;
  color: var(--lp-dark-text);
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
/* 支援企業のロゴの帯（画面幅いっぱいの白地。下に背景が少し見える位置） */
.lp-b2b .lp-fv_Logos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--lp-fv-logos-bottom);
  padding: 12px 24px;
  background: var(--color-white);
}
.lp-b2b .lp-fv_LogosList {
  display: flex;
  justify-content: space-between; /* ロゴは左右の余白を切り落とした画像なので、見た目の間隔が帯の全幅に対して均等になる */
  align-items: center;
  gap: var(--lp-fv-logos-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-b2b .lp-fv_LogosList li {
  flex: none;
}
.lp-b2b .lp-fv_LogosList img {
  display: block;
  width: auto;
  height: var(--lp-fv-logos-h);
}
/* SP の改行位置（top.php で4つごとに入れる）。PC では出さない */
.lp-b2b .lp-fv_LogosBreak {
  display: none;
}
.lp-b2b .lp-fv_Scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 72px;
  overflow: hidden;
  background: var(--lp-dark-line);
}
.lp-b2b .lp-fv_Scroll span {
  position: absolute;
  top: -100%;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--lp-accent);
  animation: lp-scroll 2.4s var(--lp-ease) infinite;
}
/* キービジュアルの線画のアニメーション（セルフチェックの背景と共通）
   同心円は外へ広がり、格子は右下へ流れ、枠は描かれたあとゆっくり呼吸する。@property 未対応のブラウザは止まった状態で表示 */
@property --lp-fv-ripple {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --lp-fv-ring-draw {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}
@keyframes lp-fv-ripple {
  from { --lp-fv-ripple: 0px; }
  to { --lp-fv-ripple: 60px; }
}
/* 格子（3・4枚目の背景）だけを1マス（40px）ずらして繰り返す */
@keyframes lp-fv-grid {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 0 0, 0 40px, 40px 0; }
}
@keyframes lp-fv-ring-draw {
  from { --lp-fv-ring-draw: 0deg; }
  to { --lp-fv-ring-draw: 360deg; }
}
/* 0〜7%：フェードイン、7〜33%：表示、33〜40%：フェードアウト（次の写真のフェードインと重なる） */
@keyframes lp-fv-slide {
  0% { opacity: 0; }
  7%, 33% { opacity: 1; }
  40%, 100% { opacity: 0; }
}
@keyframes lp-fv-ring-breathe {
  0%, 100% { scale: 1; opacity: 0.6; }
  50% { scale: 1.06; opacity: 0.3; }
}
@keyframes lp-scroll {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}
@media only screen and (max-width: 1024px) {
  .lp-b2b .lp-fv_Visual {
    width: 70%;
    opacity: 0.6;
  }
  /* 1カラム幅では写真が見出し・本文の後ろに重なるため出さない */
  .lp-b2b .lp-fv_Slides {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-fv {
    min-height: 0;
    padding: 56px 0 calc(var(--lp-fv-logos-bottom-sp) + var(--lp-fv-logos-space-sp) + 32px);
  }
  /* SP：ロゴは1行に4つ（11社なら 4・4・3）。各行とも帯の全幅に対して均等な間隔 */
  .lp-b2b .lp-fv_Logos {
    bottom: var(--lp-fv-logos-bottom-sp);
    padding: 12px;
  }
  .lp-b2b .lp-fv_LogosList {
    flex-wrap: wrap;
    gap: 0 var(--lp-fv-logos-gap-sp); /* 行の間隔は改行の要素の高さで取る */
  }
  .lp-b2b .lp-fv_LogosList img {
    height: var(--lp-fv-logos-h-sp);
  }
  .lp-b2b .lp-fv_LogosList .lp-fv_LogosBreak {
    display: block;
    flex: 0 0 100%; /* 1行を占めて改行にする */
    height: var(--lp-fv-logos-gap-sp);
  }
  .lp-b2b .lp-fv_Visual {
    width: 100%;
    height: 60%;
    bottom: auto;
    opacity: 0.55;
  }
  .lp-b2b .lp-fv_Pattern::after {
    width: 200px;
    height: 200px;
    left: 78%;
    top: 30%;
  }
  .lp-b2b .lp-fv_Title {
    font-size: min(var(--lp-font-hero-sp), calc((100vw - var(--lp-gutter-sp) * 2) / 9)); /* 狭い画面では「“選ばれる理由”に。」（約物を詰めて約9文字分）が1行に収まる大きさまで縮める */
  }
  .lp-b2b .lp-fv_Sub {
    margin-top: 18px;
    font-size: var(--lp-font-hero-sub-sp);
  }
  .lp-b2b .lp-fv_Lead {
    font-size: var(--font-body-sp);
    line-height: var(--lp-lh-lead-sp);
  }
  .lp-b2b .lp-fv_Lead br {
    display: none;
  }
  .lp-b2b .lp-fv_Scroll {
    height: 48px;
  }
}

/*------------------------------------------
 Section 2：課題への共感
------------------------------------------*/
/* 説明文の下の図（認知から推奨までの段階） */
.lp-b2b .lp-issues_Figure {
  margin: 0 0 var(--lp-heading-gap);
}
.lp-b2b .lp-issues_Figure img {
  display: block;
  width: 100%;
  max-width: 1080px; /* 原寸より拡大しない */
  height: auto;
}
.lp-b2b .lp-issues_List {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lp-line);
}
.lp-b2b .lp-issues_Item {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-ink);
  font-size: var(--lp-font-card-title);
  font-weight: 700;
  line-height: var(--lp-lh-card-title);
}
.lp-b2b .lp-issues_Num {
  flex-shrink: 0;
  color: var(--lp-accent);
  font-family: 'Poppins', sans-serif;
  font-size: var(--font-ui-large);
  font-weight: 600;
}
.lp-b2b .lp-issues_Note {
  margin-top: 48px;
  color: var(--lp-ink);
  font-size: var(--lp-font-issues-note);
  font-weight: 700;
  line-height: var(--lp-lh-hero-sub);
  text-align: center;
}
/* 締めの一文の上に、ブランディングフローのステップ間と同じグレーの下向き三角（装飾） */
.lp-b2b .lp-issues_Note::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto 32px;
  border-top: var(--lp-flow-arrow-h) solid var(--color-gray-300);
  border-right: var(--lp-flow-arrow-w) solid transparent;
  border-left: var(--lp-flow-arrow-w) solid transparent;
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-issues_Figure {
    margin-bottom: var(--lp-heading-gap-sp);
  }
  .lp-b2b .lp-issues_Item {
    gap: 16px;
    padding: 20px 0;
    font-size: var(--lp-font-card-title-sp);
  }
  .lp-b2b .lp-issues_Num {
    font-size: var(--font-ui);
  }
  .lp-b2b .lp-issues_Note {
    margin-top: 32px;
    font-size: var(--lp-font-issues-note-sp);
  }
  .lp-b2b .lp-issues_Note::before {
    margin-bottom: 24px;
    border-top-width: var(--lp-flow-arrow-h-sp);
    border-right-width: var(--lp-flow-arrow-w-sp);
    border-left-width: var(--lp-flow-arrow-w-sp);
  }
}

/*------------------------------------------
 Section 3：TCDの考え方（3ステップ）
------------------------------------------*/
.lp-b2b .lp-approach {
  background: var(--lp-surface);
}
.lp-b2b .lp-approach_Steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.lp-b2b .lp-approach_Step {
  position: relative;
  padding: 40px 32px 44px;
  border-top: 4px solid var(--lp-accent);
  background: var(--color-white);
}
/* ステップ間の矢印 */
.lp-b2b .lp-approach_Step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -32px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--lp-ink);
  border-right: 2px solid var(--lp-ink);
  transform: translateY(-50%) rotate(45deg);
}
.lp-b2b .lp-approach_StepNum {
  color: var(--lp-accent);
  font-family: 'Poppins', sans-serif;
  font-size: var(--lp-font-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: var(--lp-lh-hero-sub);
}
.lp-b2b .lp-approach_StepTitle {
  margin-top: 12px;
  color: var(--lp-ink);
  font-size: var(--lp-font-card-title);
  font-weight: 700;
  line-height: var(--lp-lh-card-title);
}
.lp-b2b .lp-approach_StepText {
  margin-top: 16px;
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
@media only screen and (max-width: 1024px) {
  .lp-b2b .lp-approach_Steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .lp-b2b .lp-approach_Step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-approach_Step {
    padding: 28px 24px 32px;
  }
  .lp-b2b .lp-approach_StepTitle {
    font-size: var(--lp-font-card-title-sp);
  }
  .lp-b2b .lp-approach_StepText {
    font-size: var(--font-body-sp);
    line-height: var(--lp-lh-lead-sp);
  }
}

/*------------------------------------------
 課題別のブランディング戦略（CIブルーの枠：Case Study・見出し／課題｜画像／TCDの着眼点・解決アプローチの面）
------------------------------------------*/
.lp-b2b .lp-strategy_Item {
  padding: var(--lp-strategy-pad);
  border: var(--lp-strategy-border) solid var(--lp-accent);
  border-radius: var(--card-radius);
}
.lp-b2b .lp-strategy_Item + .lp-strategy_Item {
  margin-top: var(--lp-strategy-gap);
}
.lp-b2b .lp-strategy_Num {
  color: var(--lp-accent);
  font-family: 'Poppins', sans-serif;
  font-size: var(--lp-font-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: var(--lp-lh-hero-sub);
}
.lp-b2b .lp-strategy_Title {
  margin-top: 12px;
  color: var(--lp-ink);
  font-size: var(--lp-font-step-title);
  font-weight: 700;
  line-height: var(--lp-lh-title);
}
.lp-b2b .lp-strategy_Overview {
  display: grid;
  grid-template-columns: 1fr 450px; /* 画像は原寸（450×300）で表示する */
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}
.lp-b2b .lp-strategy_IssueText {
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
.lp-b2b .lp-strategy_Industry {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-muted);
  font-size: var(--font-ui-small);
  line-height: var(--lp-lh-hero-sub);
}
.lp-b2b .lp-strategy_Industry span {
  display: block;
  color: var(--lp-ink);
  font-weight: 700;
}
.lp-b2b .lp-strategy_Image,
.lp-b2b .lp-strategy_Placeholder {
  display: block;
  width: 100%;
  max-width: 450px; /* 1カラムになっても原寸より拡大しない */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* 画像未設定時の枠（テーマに strategy0N.jpg も無いとき） */
.lp-b2b .lp-strategy_Placeholder {
  background: var(--lp-line);
}
.lp-b2b .lp-strategy_Solution {
  margin-top: 56px;
  padding: 48px 64px 56px;
  border-top: 4px solid var(--lp-accent);
  background: var(--lp-surface);
}
/* 「TCDの着眼点」「TCDによる解決アプローチ」：CIブルーの帯に白文字 */
.lp-b2b .lp-strategy_Head {
  display: inline-block;
  min-width: 16em; /* 2つの帯（着眼点・解決アプローチ）を同じ幅にそろえる */
  padding: 2px 16px;
  box-sizing: border-box;
  background: var(--lp-accent);
  color: var(--color-white);
  font-size: var(--font-ui-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: var(--lp-lh-hero-sub);
  text-align: center;
}
.lp-b2b .lp-strategy_Text + .lp-strategy_Head {
  margin-top: 48px;
}
.lp-b2b .lp-strategy_Text {
  margin-top: 16px;
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
.lp-b2b .lp-strategy_Approach {
  margin: 16px 0 0;
}
.lp-b2b .lp-strategy_Approach > div + div {
  margin-top: 36px;
}
.lp-b2b .lp-strategy_Approach dt {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lp-accent);
  color: var(--lp-ink);
  padding-left: 1em; /* 2行目以降を「●」の後ろにそろえる */
  text-indent: -1em;
  font-size: var(--lp-font-strategy-approach);
  font-weight: 700;
  line-height: var(--lp-lh-card-title);
}
.lp-b2b .lp-strategy_Approach dt::before {
  content: "●";
}
.lp-b2b .lp-strategy_Approach dd {
  margin: 16px 0 0;
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
@media only screen and (max-width: 1024px) {
  .lp-b2b .lp-strategy_Overview {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lp-b2b .lp-strategy_Solution {
    padding: 40px 40px 48px;
  }
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-strategy_Item {
    padding: var(--lp-strategy-pad-sp);
  }
  .lp-b2b .lp-strategy_Item + .lp-strategy_Item {
    margin-top: var(--lp-strategy-gap-sp);
  }
  .lp-b2b .lp-strategy_Title {
    font-size: var(--lp-font-step-title-sp);
  }
  .lp-b2b .lp-strategy_Title br {
    display: none;
  }
  .lp-b2b .lp-strategy_Overview {
    margin-top: 24px;
  }
  .lp-b2b .lp-strategy_IssueText,
  .lp-b2b .lp-strategy_Text,
  .lp-b2b .lp-strategy_Approach dd {
    font-size: var(--font-body-sp);
    line-height: var(--lp-lh-lead-sp);
  }
  .lp-b2b .lp-strategy_Approach dt {
    font-size: var(--lp-font-strategy-approach-sp);
  }
  .lp-b2b .lp-strategy_Solution {
    margin: 32px calc(var(--lp-strategy-pad-sp) * -1) calc(var(--lp-strategy-pad-sp) * -1); /* SP は枠の内側いっぱいに広げて本文幅を確保する */
    padding: 28px 20px 32px;
  }
}

/*------------------------------------------
 Section 4：ブランディングフロー（5ステップ。サムネ｜ショルダー・コピー・文章・施策）
------------------------------------------*/
.lp-b2b .lp-cases {
  background: var(--lp-surface); /* 前の「課題別の戦略」（白地）と区切るため、考え方と同じ薄い面にする */
}
.lp-b2b .lp-case {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.lp-b2b .lp-case + .lp-case {
  position: relative;
  margin-top: 50px;  /* ステップ間は罫線をはさんで計 100px */
  padding-top: 50px;
  border-top: 1px solid var(--lp-accent);
}
/* ステップ間の罫線の中央に、次へ進むことを示す下向き三角（装飾。/b2b/diagnose の結果の締め文と同じグレーの三角） */
.lp-b2b .lp-case + .lp-case::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-top: var(--lp-flow-arrow-h) solid var(--color-gray-300);
  border-right: var(--lp-flow-arrow-w) solid transparent;
  border-left: var(--lp-flow-arrow-w) solid transparent;
  transform: translateX(-50%);
}
.lp-b2b .lp-case_Media {
  align-self: end; /* 画像はブロックの下端にそろえる（文章・施策が長いステップでも、画像が次の罫線の上に来る） */
}
.lp-b2b .lp-case:nth-of-type(even) .lp-case_Media {
  order: 2;
}
.lp-b2b .lp-case_Image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* 画像未設定時のプレースホルダー（番号のみ。架空の事例画像は使わない） */
.lp-b2b .lp-case_Placeholder {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: 24px 28px;
  box-sizing: border-box;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, var(--lp-dark-line) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--lp-dark-line) 31px 32px),
    var(--lp-dark);
}
.lp-b2b .lp-case_Placeholder span {
  color: var(--lp-accent);
  font-family: 'Poppins', sans-serif;
  font-size: var(--lp-font-number);
  font-weight: 200;
  line-height: var(--lp-lh-number);
}
.lp-b2b .lp-case_Label {
  color: var(--lp-accent);
  font-size: var(--font-ui-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: var(--lp-lh-hero-sub);
}
.lp-b2b .lp-case_Title {
  margin-top: 12px;
  color: var(--lp-ink);
  font-size: var(--lp-font-step-title);
  font-weight: 700;
  line-height: var(--lp-lh-card-title);
}
.lp-b2b .lp-case_Text {
  margin-top: 20px;
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
.lp-b2b .lp-case_Points {
  margin: 28px 0 0;
  border-top: 1px solid var(--lp-line);
}
.lp-b2b .lp-case_Points > div {
  display: grid;
  grid-template-columns: 1fr; /* 区分名の下に施策のタグを並べる（横に並べるとタグの列が狭く、1つずつ縦に並ぶため） */
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lp-line);
  font-size: var(--font-ui-small);
  line-height: var(--lp-lh-lead-sp);
}
.lp-b2b .lp-case_Points dt {
  color: var(--lp-ink);
  font-weight: 700;
}
.lp-b2b .lp-case_Points dd {
  margin: 0;
}
/* 施策：区分ごとのタグ */
.lp-b2b .lp-case_Measures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-b2b .lp-case_Measures li {
  padding: 4px 12px;
  background: var(--color-white);
  color: var(--lp-ink);
  font-size: var(--font-caption);
  line-height: var(--lh-compact);
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-case {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .lp-b2b .lp-case + .lp-case {
    margin-top: 32px;
    padding-top: 32px;
  }
  .lp-b2b .lp-case + .lp-case::before {
    border-top-width: var(--lp-flow-arrow-h-sp);
    border-right-width: var(--lp-flow-arrow-w-sp);
    border-left-width: var(--lp-flow-arrow-w-sp);
  }
  .lp-b2b .lp-case:nth-of-type(even) .lp-case_Media {
    order: 0;
  }
  .lp-b2b .lp-case_Placeholder span {
    font-size: var(--lp-font-number-sp);
  }
  .lp-b2b .lp-case_Title {
    font-size: var(--lp-font-step-title-sp);
  }
  .lp-b2b .lp-case_Text {
    font-size: var(--font-body-sp);
    line-height: var(--lp-lh-lead-sp);
  }
  .lp-b2b .lp-case_Points > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/*------------------------------------------
 関連セミナー（LP トップ：資料請求・相談と実績の間／子ページ：フッターの上）
------------------------------------------*/
.lp-b2b .lp-seminar {
  padding-top: 0; /* 直前の「資料請求・相談」と同じ白地が続くので、上の余白を重ねない */
}
.lp-b2b .lp-seminar_Banner {
  display: block;
  max-width: var(--lp-seminar-banner-w);
  margin: 0 auto;
  transition: opacity 0.2s ease;
}
.lp-b2b .lp-seminar .lp-seminar_Banner {
  margin: 0; /* LP トップでは見出しと左端をそろえる（子ページのフッターの上では中央） */
}
.lp-b2b .lp-seminar_Banner:hover {
  opacity: 0.8;
}
.lp-b2b .lp-seminar_Banner picture {
  display: block;
}
.lp-b2b .lp-seminar_Banner img {
  display: block;
  width: 100%;
  height: auto;
}
.lp-b2b .lp-seminar-band {
  margin: var(--lp-seminar-band-margin) 0;
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-seminar-band {
    margin: var(--lp-seminar-band-margin-sp) 0;
  }
}

/*------------------------------------------
 セルフチェック（/b2b/diagnose）：グレーの背景（.section-base）に、LP トップのキービジュアルと同じ図形を敷く
 図形は .lp-fv_Visual・.lp-fv_Pattern と同じ（右 52%・上からキービジュアルの最大の高さまで）。地は FV と同じグラデーション（--lp-fv-tone）
 ページを見分けるクラスが body に無いので、:has() でセルフチェックを含む .section-base を指定する（未対応のブラウザは従来のグレー）
------------------------------------------*/
.lp-b2b .section-base:has(.diagnose-check) {
  position: relative;
  overflow: hidden;
  background: var(--lp-dark);
  background-image: var(--lp-fv-tone);
}
.lp-b2b .section-base:has(.diagnose-check)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: var(--lp-fv-max-h);
  background:
    radial-gradient(circle at 62% 46%, var(--lp-accent-glow) 0, transparent 42%),
    repeating-radial-gradient(circle at 62% 46%, transparent calc(var(--lp-fv-ripple) - 60px) calc(var(--lp-fv-ripple) - 1px), var(--lp-dark-line) calc(var(--lp-fv-ripple) - 1px) var(--lp-fv-ripple)), /* 60px 間隔の同心円。--lp-fv-ripple を 0→60px で動かして外へ広げる */
    repeating-linear-gradient(0deg, transparent 0 39px, var(--lp-dark-line) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--lp-dark-line) 39px 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%);
  mask-image: linear-gradient(90deg, transparent 0, #000 35%);
  animation: lp-fv-ripple 6s linear infinite, lp-fv-grid 12s linear infinite;
}
/* 同心円の線（.lp-fv_Pattern::after と同じ。中心は図形の範囲の左 62%・上 46%） */
.lp-b2b .section-base:has(.diagnose-check)::after {
  content: "";
  position: absolute;
  top: calc(var(--lp-fv-max-h) * 0.46);
  left: calc(48% + 52% * 0.62);
  width: 360px;
  height: 360px;
  border: 1px solid var(--lp-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  -webkit-mask-image: conic-gradient(#000 var(--lp-fv-ring-draw), transparent 0); /* 上から時計回りに線を描く */
  mask-image: conic-gradient(#000 var(--lp-fv-ring-draw), transparent 0);
  animation: lp-fv-ring-draw 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both, lp-fv-ring-breathe 6s ease-in-out 2.1s infinite;
}
/* 白いカードは図形・同心円より手前に出す */
.lp-b2b .section-base:has(.diagnose-check) .article-shell {
  z-index: 1;
}
@media only screen and (max-width: 1024px) {
  .lp-b2b .section-base:has(.diagnose-check)::before {
    width: 70%;
    opacity: 0.6;
  }
  .lp-b2b .section-base:has(.diagnose-check)::after {
    left: calc(30% + 70% * 0.62);
  }
}

/*------------------------------------------
 子ページのフォームの送信ボタン（入力内容の確認・送信する など）を LP の主CTA と同じ天地・角丸に
 色・白文字・影は base.css の .contactTyp02 .submitArea のまま。元の /contact・/download は変えない
------------------------------------------*/
.lp-b2b #mainContents .contactTyp02 .submitArea input[type="submit"] {
  height: var(--lp-button-h);
  border-radius: var(--lp-radius);
}
@media only screen and (max-width: 767px) {
  .lp-b2b #mainContents .contactTyp02 .submitArea input[type="submit"] {
    height: var(--lp-button-h-sp);
  }
}

/*------------------------------------------
 子ページのページ見出し（資料請求フォーム・ご相談フォーム）を CIブルーに
 セルフチェックの見出し（.diagnose-check_PageTitle）は base.css で CIブルー。元の /contact・/download は変えない
------------------------------------------*/
.lp-b2b #mainContents .contactTyp01 h1,
.lp-b2b #mainContents .downloadTyp01 h1 {
  color: var(--lp-accent);
}

/*------------------------------------------
 Section 5：実績・支援領域
------------------------------------------*/
.lp-b2b .lp-works {
  background: var(--lp-surface);
}
.lp-b2b .lp-works_Grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-b2b .lp-works_Item a {
  display: block;
  height: 100%;
  background: var(--color-white);
  color: var(--lp-text);
  transition: transform 0.3s var(--lp-ease), box-shadow 0.3s ease;
}
.lp-b2b .lp-works_Item a:hover {
  box-shadow: var(--card-shadow);
  transform: translateY(-4px);
}
.lp-b2b .lp-works_Item a:hover img {
  opacity: 1; /* base.css の a:hover img（透過）を打ち消す。カード全体の浮きで反応を示す */
}
.lp-b2b .lp-works_Thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lp-line);
}
.lp-b2b .lp-works_Thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-b2b .lp-works_Client {
  display: block;
  padding: 20px 24px 0;
  color: var(--lp-ink);
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lp-lh-hero-sub);
}
.lp-b2b .lp-works_Title {
  display: block;
  padding: 8px 24px 24px;
  font-size: var(--font-ui-small);
  line-height: var(--lp-lh-lead-sp);
}
.lp-b2b .lp-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 96px 0 0;
  border-top: 1px solid var(--lp-ink);
  border-bottom: 1px solid var(--lp-ink);
}
.lp-b2b .lp-facts_Item {
  padding: 40px 32px;
  container-type: inline-size; /* 見出しの文字の大きさを列の幅に合わせる（下の cqi） */
}
.lp-b2b .lp-facts_Item + .lp-facts_Item {
  border-left: 1px solid var(--lp-line);
}
.lp-b2b .lp-facts dt {
  color: var(--lp-ink);
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-size: var(--lp-font-fact);
  font-size: min(var(--lp-font-fact), 14cqi); /* 列が狭いときは「100業種の経験」が1行に収まる大きさまで縮める。cqi 未対応のブラウザは上の指定のまま */
  white-space: nowrap; /* 見出しは改行しない */
  font-weight: 600;
  line-height: var(--lp-lh-number);
}
.lp-b2b .lp-facts dd {
  margin: 12px 0 0;
  font-size: var(--font-ui);
  line-height: var(--lp-lh-hero-sub);
  text-wrap: pretty;       /* 最後の行に数文字だけ残らないようにする */
  word-break: auto-phrase; /* 語の途中で改行しない。未対応のブラウザは通常の折り返し */
}
.lp-b2b .lp-services {
  margin-top: 96px;
}
.lp-b2b .lp-services_Title {
  color: var(--lp-ink);
  font-size: var(--lp-font-card-title);
  font-weight: 700;
  line-height: var(--lp-lh-card-title);
}
.lp-b2b .lp-services_Lead {
  margin-top: 16px;
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
.lp-b2b .lp-services_List {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.lp-b2b .lp-services_List a,
.lp-b2b .lp-services_List span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--lp-service-h);
  padding: 0 24px;
  background: var(--color-white);
  color: var(--lp-ink);
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: var(--lp-lh-hero-sub);
  transition: background-color 0.2s ease;
}
.lp-b2b .lp-services_List a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--lp-accent);
  border-right: 2px solid var(--lp-accent);
  transform: rotate(45deg);
}
.lp-b2b .lp-services_List a:hover {
  background: var(--lp-accent-tint);
}
/* TCDの共創体制（支援領域の下） */
.lp-b2b .lp-team {
  margin-top: 64px;
  background: var(--color-white);
}
.lp-b2b .lp-team_Body {
  padding: 48px 56px;
}
/* 写真があるときは、文章の右に写真の列を置く。写真は枠の上・右・下に余白なしで、列の高さいっぱいに切り抜く */
.lp-b2b .lp-team--image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lp-team-image-w);
}
.lp-b2b .lp-team_Image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-b2b .lp-team_Title {
  color: var(--lp-ink);
  font-size: var(--lp-font-card-title);
  font-weight: 700;
  line-height: var(--lp-lh-card-title);
}
.lp-b2b .lp-team_Text {
  margin-top: 16px;
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
@media only screen and (max-width: 1024px) {
  /* タブレット以下は1列にして、写真を文章の下に枠の幅いっぱいで置く（横並びだと文章の列が狭くなるため） */
  .lp-b2b .lp-team--image {
    grid-template-columns: 1fr;
  }
  .lp-b2b .lp-team_Image {
    height: auto;
  }
  .lp-b2b .lp-works_Grid,
  .lp-b2b .lp-services_List {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-works_Grid {
    gap: 16px 12px;
  }
  .lp-b2b .lp-works_Client {
    padding: 12px 12px 0;
    font-size: var(--font-ui-small);
  }
  .lp-b2b .lp-works_Title {
    padding: 4px 12px 16px;
    font-size: var(--font-caption-small);
  }
  .lp-b2b .lp-facts {
    grid-template-columns: 1fr;
    margin-top: 56px;
  }
  /* SP：見出し（専門家・業界経験・50年）の下に説明を置く */
  .lp-b2b .lp-facts_Item {
    padding: 20px 0;
  }
  .lp-b2b .lp-facts_Item + .lp-facts_Item {
    border-left: 0;
    border-top: 1px solid var(--lp-line);
  }
  .lp-b2b .lp-facts dt {
    font-size: var(--lp-font-fact-sp);
  }
  .lp-b2b .lp-facts dd {
    margin: 8px 0 0;
    font-size: var(--font-body-sp);
  }
  .lp-b2b .lp-services {
    margin-top: 56px;
  }
  .lp-b2b .lp-services_Title {
    font-size: var(--lp-font-card-title-sp);
  }
  .lp-b2b .lp-services_Lead {
    font-size: var(--font-body-sp);
    line-height: var(--lp-lh-lead-sp);
  }
  .lp-b2b .lp-services_List {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lp-b2b .lp-team {
    margin-top: 40px;
  }
  .lp-b2b .lp-team_Body {
    padding: 28px 20px 32px;
  }
  .lp-b2b .lp-team_Title {
    font-size: var(--lp-font-card-title-sp);
  }
  .lp-b2b .lp-team_Text {
    font-size: var(--font-body-sp);
    line-height: var(--lp-lh-lead-sp);
  }
  .lp-b2b .lp-team_Text br {
    display: none;
  }
  .lp-b2b .lp-services_List a,
  .lp-b2b .lp-services_List span {
    min-height: var(--lp-service-h-sp);
    padding: 0 20px;
    font-size: var(--font-ui-small);
  }
}

/*------------------------------------------
 Section 6：ブランディング・セルフチェック
------------------------------------------*/
.lp-b2b .lp-check {
  position: relative;
  overflow: hidden;
  background: var(--lp-dark);
  color: var(--color-white);
  text-align: center;
}
.lp-b2b .lp-check::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0, var(--lp-accent-glow) 0, transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--lp-dark-line) 39px 40px);
  opacity: 0.8;
  pointer-events: none;
}
.lp-b2b .lp-check_Inner {
  position: relative;
  max-width: 880px;
}
.lp-b2b .lp-check .lp-heading_Label {
  justify-content: center;
}
.lp-b2b .lp-check_Title {
  color: var(--color-white);
  font-size: var(--lp-font-title);
  font-weight: 700;
  line-height: var(--lp-lh-title);
}
.lp-b2b .lp-check_Lead {
  margin-top: 28px;
  color: var(--lp-dark-text);
  font-size: var(--lp-font-lead);
  line-height: var(--lp-lh-lead);
}
.lp-b2b .lp-check_Points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 36px 0 44px;
  padding: 0;
  list-style: none;
}
.lp-b2b .lp-check_Points li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid var(--lp-dark-line);
  border-radius: 999px; /* exception: 特長のピル形状（LP内のみ・角丸トークンに該当なし） */
  color: var(--color-white);
  font-size: var(--font-ui-small);
  font-weight: 700;
  line-height: var(--lp-lh-hero-sub);
}
.lp-b2b .lp-check_Points li::before {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--lp-accent);
  border-bottom: 2px solid var(--lp-accent);
  transform: translateY(-2px) rotate(-45deg);
}
.lp-b2b .lp-button--large {
  min-width: 480px;
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-check {
    text-align: left;
  }
  .lp-b2b .lp-check .lp-heading_Label {
    justify-content: flex-start;
  }
  .lp-b2b .lp-check_Title {
    font-size: var(--lp-font-title-sp);
  }
  .lp-b2b .lp-check_Lead {
    margin-top: 20px;
    font-size: var(--lp-font-lead-sp);
    line-height: var(--lp-lh-lead-sp);
  }
  .lp-b2b .lp-check_Points {
    justify-content: flex-start;
    gap: 8px;
    margin: 28px 0 32px;
  }
  .lp-b2b .lp-check_Points li {
    padding: 8px 14px;
    font-size: var(--font-caption);
  }
  .lp-b2b .lp-button--large {
    min-width: 0;
  }
}

/*------------------------------------------
 Section 7：資料請求・相談
------------------------------------------*/
.lp-b2b .lp-contact_Grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.lp-b2b .lp-contact_Card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 44px;
  border: 1px solid var(--lp-accent);
}
.lp-b2b .lp-contact_Title {
  color: var(--lp-ink);
  font-size: var(--lp-font-card-title);
  font-weight: 700;
  line-height: var(--lp-lh-card-title);
}
.lp-b2b .lp-contact_Text {
  flex-grow: 1;
  margin: 16px 0 32px;
  font-size: var(--font-ui);
  line-height: var(--lp-lh-lead);
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-contact_Grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lp-b2b .lp-contact_Card {
    padding: 28px 24px;
  }
  .lp-b2b .lp-contact_Title {
    font-size: var(--lp-font-card-title-sp);
  }
  .lp-b2b .lp-contact_Text {
    margin: 12px 0 24px;
    font-size: var(--font-body-sp);
    line-height: var(--lp-lh-lead-sp);
  }
}

/*------------------------------------------
 Section 8：最終CTA（シアンの色面）
------------------------------------------*/
.lp-b2b .lp-final {
  background: var(--lp-accent);
  color: var(--lp-ink);
  text-align: center;
}
.lp-b2b .lp-final_Title {
  margin: 0 0 44px;
  color: var(--color-white);
  font-size: var(--lp-font-hero);
  font-weight: 700;
  line-height: var(--lp-lh-hero);
  letter-spacing: 0.03em;
}
/* シアン地の上では主CTAを墨地・白文字にする（シアンのボタンが背景に埋もれないように） */
.lp-b2b .lp-final .lp-button--primary {
  background: var(--lp-ink);
  color: var(--color-white);
}
/* 特長（セルフチェック欄と同じ .lp-check_Points）。シアン地ではチェックマークを白、枠を白55%にする */
.lp-b2b .lp-final_Points {
  margin: 24px 0 0;
}
.lp-b2b .lp-final_Points li {
  border-color: var(--lp-dark-muted);
}
.lp-b2b .lp-final_Points li::before {
  border-color: var(--color-white);
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-final {
    text-align: left;
  }
  .lp-b2b .lp-final_Title {
    font-size: min(var(--lp-font-hero-sp), calc((100vw - var(--lp-gutter-sp) * 2) / 9)); /* 狭い画面では「“選ばれる理由”に。」（約物を詰めて約9文字分）が1行に収まる大きさまで縮める */
  }
  .lp-b2b .lp-final_Title {
    margin-bottom: 32px;
  }
  .lp-b2b .lp-final_Points {
    margin-top: 20px;
  }
}

/*------------------------------------------
 フッター（b2b/templates/parts/footer.php）
------------------------------------------*/
.lp-b2b .lp-footer {
  margin: 0;
  padding: 0 !important; /* base.css の footer 要素の余白（SP は !important 指定）を LP フッターでは使わないため */
  background: var(--lp-ink);
  color: var(--lp-dark-muted);
}
.lp-b2b .lp-footer_Inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  max-width: var(--lp-container);
  margin: 0 auto;
  padding: 48px var(--lp-gutter);
  box-sizing: border-box;
}
.lp-b2b .lp-footer_Links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-caption);
  line-height: var(--lp-lh-hero-sub);
}
.lp-b2b .lp-footer_Links a {
  color: var(--lp-dark-text);
}
.lp-b2b .lp-footer_Links a:hover {
  color: var(--color-white);
  text-decoration: underline;
}
.lp-b2b .lp-footer_Copy {
  margin-left: auto;
  font-size: var(--font-caption-small);
  line-height: var(--lp-lh-hero-sub);
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-footer_Inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px var(--lp-gutter-sp) calc(40px + var(--lp-sticky-h-sp));
  }
  .lp-b2b .lp-footer_Copy {
    margin-left: 0;
  }
}

/*------------------------------------------
 SP：下部固定の主CTA（b2b/assets/js/lp.js が is-visible を付け外しする）
------------------------------------------*/
.lp-b2b .lp-sticky {
  display: none;
}
@media only screen and (max-width: 767px) {
  .lp-b2b .lp-sticky {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 900; /* base.css の header（1000）より下 */
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--lp-sticky-h-sp);
    padding: 0 var(--lp-gutter-sp);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    background: var(--lp-sticky-bg);
    border-top: 1px solid var(--lp-line);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s var(--lp-ease), visibility 0s linear 0.3s;
  }
  .lp-b2b .lp-sticky.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s var(--lp-ease), visibility 0s;
  }
  .lp-b2b .lp-sticky .lp-button {
    min-height: 52px;
  }
}

/*------------------------------------------
 スクロール表示（JS が有効で、動きを減らす設定でないときだけ）
------------------------------------------*/
.lp-b2b.is-lp-reveal [data-lp-reveal] {
  opacity: 0;
  transform: translateY(var(--lp-reveal-distance));
  transition: opacity 0.8s var(--lp-ease), transform 0.8s var(--lp-ease);
}
.lp-b2b.is-lp-reveal [data-lp-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .lp-b2b.is-lp-reveal [data-lp-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .lp-b2b .lp-fv_Scroll span {
    animation: none;
    top: 0;
  }
  .lp-b2b .lp-fv_Slide {
    animation: none;
  }
  .lp-b2b .lp-fv_Slide:first-child {
    opacity: 1;
  }
  .lp-b2b .lp-fv_Pattern,
  .lp-b2b .lp-fv_Pattern::after,
  .lp-b2b .section-base:has(.diagnose-check)::before,
  .lp-b2b .section-base:has(.diagnose-check)::after {
    animation: none;
  }
  .lp-b2b .lp-button,
  .lp-b2b .lp-works_Item a,
  .lp-b2b .lp-sticky {
    transition: none;
  }
}