/* =============================================================
   Leapcom Components — v3（P920・2026-09-28）
   複数のページで使う大きめの部品。基本・レイアウトは leapcom.css、ページ固有は pages/*.css。
   読み込み順: tokens.css → leapcom.css → components.css → pages/<page>.css
   ============================================================= */

/* 短い文・小見出しは文節で折り返す */
.lc-flow__lane,
.lc-flow__after,
.lc-principle p,
.lc-case__title,
.lc-case__text,
.lc-h4,
.lc-callout__title,
.lc-note-card__title {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* ---------- 図解: 同じゴールまでの 5 ステップ（TOP・システム開発） ---------- */
.lc-flow {
  margin-top: 8px;
  padding: 36px 36px 40px;
}

.lc-flow__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
}

.lc-flow__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lc-navy-800);
}

.lc-flow__sub {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--lc-steel-700);
}

/* PC: 列 = 凡例 / STEP1〜5 / GOAL、行 = 印 / 名前 / お客様 / 定例会議の線 / Leapcom */
.lc-flow__body {
  display: grid;
  grid-template-columns: 76px repeat(5, minmax(0, 1fr)) minmax(0, 0.95fr);
  grid-template-rows: auto auto auto 44px auto;
}

.lc-flow__legend {
  grid-column: 1;
  grid-row: 2 / span 4;
  display: grid;
  grid-template-rows: subgrid;
}

.lc-flow__who {
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lc-steel-500);
}

.lc-flow__who:first-child {
  align-self: end;
  padding-bottom: 14px;
  font-family: var(--lc-font-en);
  letter-spacing: 0.14em;
}

.lc-flow__who--track {
  color: var(--lc-navy-800);
}

.lc-flow__touch {
  grid-column: 4 / span 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 8px 14px;
  color: var(--lc-blue-600);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lc-flow__touch::after {
  content: "";
  align-self: stretch;
  height: 8px;
  margin-top: 6px;
  border: 1.5px solid var(--lc-blue-600);
  border-bottom: none;
}

.lc-flow__steps {
  grid-column: 2 / -1;
  grid-row: 2 / span 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.lc-flow__step,
.lc-flow__goal {
  grid-row: 1 / span 4;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
}

.lc-flow__name {
  grid-row: 1;
  align-self: end;
  margin: 0 8px 14px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--lc-ink);
}

.lc-flow__no {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lc-blue-600);
}

.lc-flow__lane {
  position: relative;
  margin: 0 8px;
  padding: 12px 12px;
  font-size: 0.8125rem;
  line-height: 1.7;
  border-radius: var(--lc-radius-s);
}

.lc-flow__lane--customer {
  grid-row: 2;
  background: #fff;
  border: 1px solid var(--lc-blue-200);
}

.lc-flow__lane--us {
  grid-row: 4;
  background: var(--lc-blue-100);
  border: 1px solid var(--lc-blue-100);
  color: var(--lc-navy-800);
}

/* レーンから「定例会議」の線へ、点線でつなぐ */
.lc-flow__lane--customer::after,
.lc-flow__lane--us::before {
  content: "";
  position: absolute;
  left: 50%;
  height: 16px;
  border-left: 1px dashed var(--lc-steel-500);
}

.lc-flow__lane--customer::after {
  top: 100%;
}

.lc-flow__lane--us::before {
  bottom: 100%;
}

.lc-flow__step--touch .lc-flow__lane--customer {
  border-color: var(--lc-blue-600);
  box-shadow: inset 0 0 0 1px var(--lc-blue-600);
}

/* PC では、各箱の「お客様／Leapcom」は凡例に任せて読み上げ用だけにする */
.lc-flow__tag,
.lc-flow__touchtag {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* 定例会議の線（行 3）と、各ステップの点 */
.lc-flow__node {
  grid-row: 3;
  position: relative;
}

.lc-flow__node::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 2px solid var(--lc-navy-800);
}

.lc-flow__node::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--lc-navy-800);
  border-radius: 50%;
  background: #fff;
}

.lc-flow__step:first-child .lc-flow__node::before {
  left: 50%;
}

/* ゴール（赤。この画面の赤はここだけ） */
.lc-flow__node--goal::before {
  right: 50%;
}

.lc-flow__node--goal::after {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: none;
  background: var(--lc-red);
  box-shadow: 0 0 0 7px var(--lc-red-soft);
}

.lc-flow__name--goal {
  text-align: center;
  font-size: 1rem;
}

.lc-flow__name--goal .lc-flow__no {
  color: var(--lc-steel-500);
}

.lc-flow__after {
  grid-row: 4;
  margin: 0 8px;
  padding-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--lc-steel-700);
  text-align: center;
}

.lc-flow__after .lc-flow__no {
  color: var(--lc-steel-500);
}

/* タブレット・スマホ: 縦の 1 本線に組み替える */
@media (max-width: 1023px) {
  .lc-flow {
    padding: 28px 22px 32px;
  }

  .lc-flow__body {
    display: block;
  }

  .lc-flow__legend,
  .lc-flow__touch {
    display: none;
  }

  .lc-flow__steps {
    position: relative;
    display: block;
    padding-left: 30px;
  }

  .lc-flow__steps::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 64px;
    border-left: 2px solid var(--lc-navy-800);
  }

  .lc-flow__step,
  .lc-flow__goal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 26px;
  }

  .lc-flow__goal {
    padding-bottom: 0;
  }

  .lc-flow__name,
  .lc-flow__after {
    align-self: stretch;
  }

  .lc-flow__name {
    margin: 0;
    font-size: 1rem;
  }

  .lc-flow__name br {
    display: none;
  }

  .lc-flow__node {
    position: absolute;
    left: -30px;
    top: 4px;
    width: 16px;
    height: 16px;
  }

  .lc-flow__node::before {
    display: none;
  }

  .lc-flow__node::after {
    top: 0;
    left: 0;
    margin: 0;
  }

  .lc-flow__node--goal::after {
    left: -3px;
    top: -2px;
  }

  .lc-flow__lane {
    margin: 0;
    padding: 10px 12px;
  }

  .lc-flow__lane--customer::after,
  .lc-flow__lane--us::before {
    display: none;
  }

  .lc-flow__tag,
  .lc-flow__touchtag {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    display: inline-block;
    margin-right: 8px;
    padding: 0 6px;
    border-radius: 2px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: 1px;
  }

  .lc-flow__lane--customer .lc-flow__tag {
    background: var(--lc-blue-100);
    color: var(--lc-navy-800);
  }

  .lc-flow__lane--us .lc-flow__tag {
    background: #fff;
    color: var(--lc-navy-800);
  }

  .lc-flow__touchtag {
    background: var(--lc-blue-600);
    color: #fff;
  }

  .lc-flow__name--goal,
  .lc-flow__after {
    text-align: left;
  }
}

/* ---------- 3 つの約束（番号＋見出し＋文）と、締めの一文 ---------- */
.lc-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: clamp(48px, 6vw, 72px);
}

.lc-principle {
  padding-top: 20px;
  border-top: 1px solid var(--lc-steel-200);
}

.lc-principle__no {
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lc-blue-600);
}

.lc-principle p:last-child {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--lc-steel-700);
}

.lc-punch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: clamp(48px, 6vw, 72px);
  text-align: center;
}

.lc-punch__text {
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--lc-navy-800);
}

@media (max-width: 767px) {
  .lc-principles {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- 事例カード（TOP・柱ページ・事例一覧） ---------- */
.lc-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.lc-head__action {
  flex: none;
}

.lc-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.lc-cases > li {
  display: flex;
}

.lc-case {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.lc-case__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #fff;
  border-bottom: 1px solid var(--lc-steel-200);
}

.lc-case__body {
  padding: 20px 22px 24px;
}

.lc-case__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--lc-steel-500);
}

.lc-case__title {
  margin-top: 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.lc-case__text {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--lc-steel-700);
}

.lc-cases__note {
  margin-top: 20px;
}

@media (max-width: 1023px) {
  .lc-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .lc-head--split {
    flex-direction: column;
    align-items: flex-start;
  }

  .lc-cases {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* スマホ: 左に絵、右に文字の横長カード（縦の長さを抑える） */
@media (max-width: 639px) {
  .lc-case {
    flex-direction: row;
  }

  .lc-case__img {
    width: 40%;
    height: auto;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--lc-steel-200);
  }

  .lc-case__body {
    flex: 1;
    padding: 12px 14px 14px;
  }

  .lc-case__meta {
    gap: 8px;
  }

  .lc-case__meta .lc-tag {
    padding: 1px 6px;
    font-size: 0.6875rem;
  }

  .lc-case__title {
    margin-top: 8px;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .lc-case__text {
    display: none;
  }
}

/* 事例が 1 件だけのとき（横長のカード。スマホは通常のカード）。
   一覧の先頭の 1 件だけを横長で大きくするときは <li class="lc-cases__feature">（事例一覧。7 件を 3 列にすると、ちょうど埋まる） */
@media (min-width: 768px) {
  .lc-cases--feature {
    grid-template-columns: 1fr;
  }

  .lc-cases > .lc-cases__feature {
    grid-column: 1 / -1;
  }

  .lc-cases--feature .lc-case,
  .lc-cases__feature .lc-case {
    flex-direction: row;
  }

  .lc-cases--feature .lc-case__img,
  .lc-cases__feature .lc-case__img {
    width: 48%;
    border-bottom: none;
    border-right: 1px solid var(--lc-steel-200);
  }

  .lc-cases--feature .lc-case__body,
  .lc-cases__feature .lc-case__body {
    flex: 1;
    align-self: center;
    padding: 32px 36px;
  }

  .lc-cases--feature .lc-case__title,
  .lc-cases__feature .lc-case__title {
    font-size: 1.375rem;
  }

  .lc-cases--feature .lc-case__text,
  .lc-cases__feature .lc-case__text {
    font-size: 0.9375rem;
  }
}

/* =============================================================
   ここから下は、段階 2（3 本柱のページ）で足した部品
   ============================================================= */

/* ---------- 下層ページのヒーロー（全幅の製図台に、図面を 1 枚） ----------
   帯は全幅の方眼紙（製図台）。製図イラストは白い紙として、本文と同じ左端にそろえて置き、右に文字。
   2026-09-28 改訂: 絵がブラウザの左端にはり付いて見えたため（大串さんのご指摘）。
   以前は絵を帯の左端（left: 0）に置いていたので、画面が広いほど左に寄って見えた */
.lc-page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--lc-blue-50);
  background-image:
    linear-gradient(to right, rgba(30, 108, 176, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 108, 176, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--lc-steel-200);
}

.lc-page-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  min-height: clamp(520px, 64vh, 660px);
  padding-block: clamp(40px, 5vw, 64px);
}

/* 図面の紙（白い紙に、薄い影） */
.lc-page-hero__media {
  margin: 0;
}

.lc-page-hero__sheet {
  padding: clamp(10px, 1.4vw, 18px);
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(15, 44, 76, 0.05), 0 18px 40px rgba(15, 44, 76, 0.1);
}

.lc-page-hero__img {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
}

/* 図の番号と説明（FIG. 01 ─ …） */
.lc-page-hero__fig {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--lc-steel-500);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-page-hero__fig .lc-en {
  flex: none;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lc-navy-800);
}

.lc-page-hero__copy {
  max-width: 560px;
}

.lc-page-hero__title {
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.lc-page-hero__lead {
  margin-top: 22px;
  font-size: var(--lc-fs-lead);
  font-weight: 500;
  line-height: 2;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* パンくずリスト */
.lc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--lc-steel-500);
}

.lc-breadcrumb li + li::before {
  content: "／";
  margin-right: 6px;
  color: var(--lc-steel-300);
}

.lc-breadcrumb a {
  color: var(--lc-steel-500);
}

/* タブレット・スマホ: 図面の紙を上に、文字を下に */
@media (max-width: 1023px) {
  .lc-page-hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: 0;
    padding-block: 24px 44px;
  }

  .lc-page-hero__img {
    max-height: 420px;
  }

  .lc-page-hero__copy {
    max-width: none;
  }
}

/* ---------- ページの目次（章へのリンク） ---------- */
.lc-toc {
  display: grid;
  grid-template-columns: repeat(var(--toc-cols, 3), minmax(0, 1fr));
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
  background: #fff;
  overflow: hidden;
}

.lc-toc li {
  border-right: 1px solid var(--lc-steel-200);
  border-bottom: 1px solid var(--lc-steel-200);
  margin: 0 -1px -1px 0;
}

.lc-toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  height: 100%;
  padding: 18px 22px;
  color: var(--lc-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-decoration: none;
  transition: background-color 0.2s;
}

.lc-toc a:hover {
  background: var(--lc-blue-50);
  text-decoration: none;
}

.lc-toc__no {
  flex: none;
  min-width: 22px;
  font-family: var(--lc-font-en);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lc-blue-600);
}

@media (max-width: 767px) {
  .lc-toc {
    --toc-cols: 1;
  }

  .lc-toc a {
    padding: 14px 16px;
  }
}

/* 目次を「このページの内容」の見出しつきで置くとき（システム開発・会社情報） */
.lc-toc-wrap {
  margin-top: clamp(56px, 7vw, 88px);
}

.lc-toc-wrap__label {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lc-steel-500);
}

/* ---------- 小見出し（A-1 など）と、そのかたまり ---------- */
.lc-block + .lc-block {
  margin-top: clamp(72px, 9vw, 112px);
}

.lc-subhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}

.lc-subhead__no {
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--lc-blue-200);
  border-radius: 2px;
  font-family: var(--lc-font-en);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lc-blue-600);
  line-height: 1.4;
}

.lc-subhead__title {
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.05em;
}

.lc-h4 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--lc-navy-800);
}

/* 読み物の段落 */
.lc-prose > * + * {
  margin-top: 1em;
}

.lc-prose p {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* ---------- 番号つきの特長カード（お約束・基盤の 6 項目など） ---------- */
.lc-features {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 20px;
}

.lc-feature {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
}

.lc-feature__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lc-feature__no {
  font-family: var(--lc-font-en);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lc-steel-500);
}

.lc-feature__title {
  margin-top: 14px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.lc-feature__text {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-feature__text + .lc-feature__text {
  margin-top: 8px;
}

.lc-feature__link {
  margin-top: auto;
  padding-top: 18px;
}

/* 列数は HTML の style="--cols: 4" で決める（PC）。タブレット・スマホは並べ方そのものを上書きする
   （変数を上書きしても、HTML に直接書いた style のほうが強いため） */
@media (max-width: 1023px) {
  .lc-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .lc-features {
    grid-template-columns: 1fr;
  }
}

/* 5 枚のとき: 上に 3 枚、下に 2 枚を広めに（PC だけ。空きのマスを作らない） */
@media (min-width: 1024px) {
  .lc-features--3-2 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lc-features--3-2 > * {
    grid-column: span 2;
  }

  .lc-features--3-2 > :nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* ---------- 矢印でつなぐ手順（横並び。スマホは縦） ---------- */
.lc-steps {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 30px;
}

.lc-step {
  position: relative;
  padding: 22px 20px 22px;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
}

.lc-step + .lc-step::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 1.5px solid var(--lc-steel-500);
  border-right: 1.5px solid var(--lc-steel-500);
  transform: translateY(-50%) rotate(45deg);
}

.lc-step__no {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lc-font-en);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lc-blue-600);
}

.lc-step__title {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-step__text {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* 手順の終わりがゴールのとき（赤い点。ひと画面にひとつ） */
.lc-step--goal .lc-step__no::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lc-red);
  box-shadow: 0 0 0 4px var(--lc-red-soft);
}

@media (max-width: 1023px) {
  .lc-steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .lc-step + .lc-step::before {
    left: 50%;
    top: -19px;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* 縦に並べる手順（2 段組の片側など、横に並べる幅がないとき。PC でもスマホと同じ縦の形） */
.lc-steps--vertical {
  grid-template-columns: 1fr;
  gap: 26px;
}

.lc-steps--vertical .lc-step + .lc-step::before {
  left: 50%;
  top: -19px;
  transform: translateX(-50%) rotate(135deg);
}

/* ---------- チェックリスト ---------- */
.lc-checklist {
  display: grid;
  gap: 10px;
}

.lc-checklist li {
  position: relative;
  padding-left: 30px;
  line-height: 1.85;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--lc-blue-600);
}

.lc-checklist li::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: calc(0.42em + 2.5px);
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* ---------- 表（スマホでは 1 行ずつカードに） ---------- */
.lc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
}

.lc-table th,
.lc-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--lc-steel-200);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}

.lc-table thead th {
  background: var(--lc-steel-50);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lc-steel-700);
}

.lc-table tbody th {
  font-weight: 700;
  white-space: nowrap;
  color: var(--lc-ink);
}

@media (max-width: 767px) {
  .lc-table--stack,
  .lc-table--stack tbody,
  .lc-table--stack tr,
  .lc-table--stack th,
  .lc-table--stack td {
    display: block;
  }

  .lc-table--stack thead {
    display: none;
  }

  .lc-table--stack tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--lc-steel-200);
  }

  .lc-table--stack th,
  .lc-table--stack td {
    padding: 2px 0;
    border: none;
  }

  .lc-table--stack td[data-label]::before {
    content: attr(data-label) "：";
    font-weight: 700;
    color: var(--lc-steel-500);
    font-size: 0.8125rem;
  }
}

/* ---------- 大きな数字 ---------- */
.lc-metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--lc-navy-800);
}

.lc-metric__value {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.lc-metric__unit {
  font-size: 1.125rem;
  font-weight: 700;
}

/* ---------- 2 段組（文章と図） ---------- */
.lc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.lc-split--center {
  align-items: center;
}

.lc-split--narrow-left {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

@media (max-width: 1023px) {
  .lc-split,
  .lc-split--narrow-left {
    grid-template-columns: 1fr;
  }
}

/* ---------- 囲み（事例のお話・大事な一言） ---------- */
.lc-callout {
  padding: clamp(24px, 4vw, 44px);
  background: var(--lc-steel-50);
  border-left: 3px solid var(--lc-navy-800);
  border-radius: 0 var(--lc-radius-m) var(--lc-radius-m) 0;
}

.lc-section--tint .lc-callout {
  background: #fff;
}

.lc-callout__label {
  font-family: var(--lc-font-en);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--lc-steel-500);
}

.lc-callout__title {
  margin-top: 10px;
  font-size: clamp(1.1875rem, 2vw, 1.375rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

/* ---------- ノート（罫線の紙。手書きのメモの話に） ---------- */
.lc-note-card {
  position: relative;
  padding: 26px 26px 26px 58px;
  background-color: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--lc-blue-100) 33px 34px);
  background-position: 0 18px;
  border: 1px solid var(--lc-steel-200);
  border-radius: 4px;
  box-shadow: var(--lc-shadow-card);
  line-height: 34px;
}

.lc-note-card::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--lc-steel-300);
}

.lc-note-card__label {
  font-family: var(--lc-font-en);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--lc-steel-500);
  line-height: 34px;
}

.lc-note-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 34px;
}

.lc-note-card p {
  font-size: 0.9375rem;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* ---------- よくあるご質問（開閉式） ---------- */
.lc-faq {
  border-top: 1px solid var(--lc-steel-200);
}

.lc-faq details {
  border-bottom: 1px solid var(--lc-steel-200);
}

.lc-faq summary {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 22px 48px 22px 4px;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-faq summary::-webkit-details-marker {
  display: none;
}

.lc-faq summary::before {
  content: "Q";
  flex: none;
  font-family: var(--lc-font-en);
  font-weight: 600;
  color: var(--lc-blue-600);
}

/* 開閉の印（＋ / －） */
.lc-faq summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--lc-navy-800), var(--lc-navy-800)) center / 14px 2px no-repeat,
    linear-gradient(var(--lc-navy-800), var(--lc-navy-800)) center / 2px 14px no-repeat;
  transition: transform 0.2s;
}

.lc-faq details[open] summary::after {
  background: linear-gradient(var(--lc-navy-800), var(--lc-navy-800)) center / 14px 2px no-repeat;
}

.lc-faq summary:hover {
  color: var(--lc-blue-600);
}

.lc-faq__a {
  display: flex;
  gap: 14px;
  padding: 0 4px 24px;
  color: var(--lc-steel-700);
  line-height: 1.95;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-faq__a::before {
  content: "A";
  flex: none;
  font-family: var(--lc-font-en);
  font-weight: 600;
  color: var(--lc-steel-500);
}

/* ---------- 追従するお問い合わせ（製品ページ）。leapcom.js が出し入れする ---------- */
.lc-sticky-cta {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(560px, calc(100vw - 96px));
  padding: 12px 12px 12px 18px;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
  box-shadow: var(--lc-shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.lc-sticky-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lc-sticky-cta__text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--lc-steel-700);
}

.lc-sticky-cta__text strong {
  display: block;
  font-size: 0.875rem;
  color: var(--lc-navy-800);
}

.lc-sticky-cta .lc-btn {
  flex: none;
}

@media (max-width: 639px) {
  .lc-sticky-cta {
    left: 12px;
    right: 76px;
    bottom: 12px;
    max-width: none;
    padding: 10px;
  }

  .lc-sticky-cta__text {
    display: none;
  }

  .lc-sticky-cta .lc-btn {
    width: 100%;
  }
}

/* ---------- だれが担うかのしるし（AI／人／自動）と凡例 ----------
   流れの図の各ステップに付ける。製品ページ・事例ページで使う */
.lc-actor {
  display: inline-block;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 2px;
  font-family: var(--lc-font-ja);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lc-actor--ai {
  background: var(--lc-blue-100);
  color: var(--lc-blue-600);
}

.lc-actor--human {
  background: var(--lc-navy-800);
  color: #fff;
}

.lc-actor--system {
  background: var(--lc-steel-100);
  color: var(--lc-steel-700);
}

.lc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--lc-steel-700);
}

.lc-legend .lc-actor {
  margin: 0 6px 0 0;
}

/* =============================================================
   ここから下は、段階 3（事例）で足した部品
   ============================================================= */

/* ---------- 真ん中の箱と、両側の箱をつなぐ図（ハブ） ----------
   <div class="lc-hub">
     <div class="lc-hub__side lc-hub__side--left"> .lc-hub__item … </div>
     <div class="lc-hub__center"> … </div>
     <div class="lc-hub__side lc-hub__side--right"> .lc-hub__item … </div>
   </div> */
.lc-hub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 34px;
}

.lc-hub__side {
  display: grid;
  align-content: center;
  gap: 14px;
}

.lc-hub__item {
  position: relative;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--lc-steel-200);
  border-radius: var(--lc-radius-m);
}

.lc-hub__label {
  font-family: var(--lc-font-en);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--lc-blue-600);
}

.lc-hub__title {
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--lc-navy-800);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-hub__item ul {
  margin-top: 8px;
}

.lc-hub__item li {
  position: relative;
  padding-left: 14px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-hub__item li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lc-blue-600);
}

/* 両側から真ん中へ（点線） */
.lc-hub__side--left .lc-hub__item::after,
.lc-hub__side--right .lc-hub__item::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  border-top: 1.5px dashed var(--lc-steel-500);
}

.lc-hub__side--left .lc-hub__item::after {
  left: 100%;
}

.lc-hub__side--right .lc-hub__item::after {
  right: 100%;
}

.lc-hub__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 22px;
  background: var(--lc-navy-800);
  border-radius: var(--lc-radius-m);
  color: #fff;
  text-align: center;
  box-shadow: var(--lc-shadow-float);
}

.lc-hub__center .lc-hub__label {
  color: rgba(255, 255, 255, 0.66);
}

.lc-hub__center-name {
  margin-top: 6px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-hub__center-text {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
  .lc-hub {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lc-hub__center {
    order: -1;
  }

  .lc-hub__item::after {
    display: none;
  }
}

/* ---------- 事例カードの小見出し（お客様）とタグ ---------- */
.lc-case__sub {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--lc-steel-500);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.lc-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.lc-case__tags li {
  padding: 1px 8px;
  border: 1px solid var(--lc-steel-200);
  border-radius: 2px;
  font-size: 0.6875rem;
  color: var(--lc-steel-700);
  background: #fff;
}

@media (max-width: 639px) {
  .lc-case__sub,
  .lc-case__tags {
    display: none;
  }
}

/* =============================================================
   ここから下は、段階 4（会社情報ほか）で共通に移した部品
   ============================================================= */

/* ---------- 小さな札の並び（定義する仕様の例など） ---------- */
.lc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lc-chips li {
  padding: 4px 12px;
  border-radius: 2px;
  background: var(--lc-steel-100);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* トレースログに残ること（1 行の記録に見立てる） */
.lc-log__caption {
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lc-steel-500);
}

.lc-log__fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
  border: 1px solid var(--lc-navy-800);
  border-radius: var(--lc-radius-s);
  overflow: hidden;
}

.lc-log__fields li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--lc-navy-800);
  background: var(--lc-blue-50);
}

.lc-log__fields li + li {
  border-left: 1px dashed var(--lc-blue-200);
}

.lc-log__fields .lc-en {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--lc-blue-600);
}

@media (max-width: 767px) {
  .lc-log__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lc-log__fields li + li {
    border-left: none;
  }

  .lc-log__fields li:nth-child(even) {
    border-left: 1px dashed var(--lc-blue-200);
  }

  .lc-log__fields li:nth-child(n + 3) {
    border-top: 1px dashed var(--lc-blue-200);
  }

  .lc-log__fields .lc-log__wide {
    grid-column: 1 / -1;
    border-left: none !important;
  }
}

/* 狭い場所（2 段組の片側など）では、PC でもスマホと同じ 2 列に（会社情報） */
.lc-log--narrow .lc-log__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lc-log--narrow .lc-log__fields li + li {
  border-left: none;
}

.lc-log--narrow .lc-log__fields li:nth-child(even) {
  border-left: 1px dashed var(--lc-blue-200);
}

.lc-log--narrow .lc-log__fields li:nth-child(n + 3) {
  border-top: 1px dashed var(--lc-blue-200);
}

.lc-log--narrow .lc-log__fields .lc-log__wide {
  grid-column: 1 / -1;
}

/* ---------- 文字だけの下層ヒーロー（ニュース・ブログ・プライバシー） ----------
   <section class="lc-simple-hero lc-grid-paper"> … 全幅の方眼の帯に、パンくず・ラベル・見出し・ひとこと */
.lc-simple-hero {
  border-bottom: 1px solid var(--lc-steel-200);
}

.lc-simple-hero__inner {
  padding-block: clamp(40px, 5vw, 72px);
}

.lc-simple-hero__title {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.lc-simple-hero__lead {
  max-width: 44em;
  margin-top: 18px;
  font-size: var(--lc-fs-lead);
  font-weight: 500;
  line-height: 2;
  color: var(--lc-steel-700);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* 締めの一言（上に細い罫線） */
.lc-closing {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--lc-steel-200);
}