@charset "utf-8";
/* ============================================================================
 * 機能LP（ピラー）専用スタイル / page-function-lp.php
 * すべて main.lp-function 配下にスコープし、下層共通(lower.css)と干渉させない。
 * 追従バー(.lp-navbar)だけは main の外に出るため個別にスコープする。
 * 配色は製品ブランド(#1266b1)に合わせる。パートナーLP(partner-lp.css)とは別系統。
 *
 * 構造:
 *   .lp-chapter を4つ並べ、その左端に1本の縦レールを通す。
 *   レール上の節点は 塗り=章 / 白抜き=セクション の2種類だけ。
 *   背景の切り替えは章単位でだけ行う（セクションごとには変えない）。
 * ========================================================================= */

.lp-function {
    --lp-primary: #1266b1;
    --lp-primary-dark: #0e5290;
    --lp-primary-deep: #0e3f6b;   /* ヒーローのグラデ内で使っている濃色。章の節点に流用 */
    --lp-ink: #2b3a4d;
    --lp-ink-sub: #5b6b80;
    --lp-ink-faint: #8a99ad;      /* ラベル・キャプション用の第3のインク */
    --lp-line: #d6e4f3;
    --lp-tint: #f1f6fc;
    --lp-tint-deep: #e2ecf9;      /* tint の上に重ねられる面 */
    --lp-white: #ffffff;
    --lp-cta: #ff8a00;
    --lp-warn: #e5484d;
    --lp-rail: 76px;              /* 進行レールの溝幅 */
    --lp-railgap: 30px;           /* レールと本文カラムの間隔。節点が文字に触れない距離 */

    color: var(--lp-ink);
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 1.8;
    overflow-x: clip;
}

/*
 * テーマ全体は content-box のため、max-width にパディングが加算されて
 * コンテナ幅が 1040px にならず、中央寄せを前提にしたレールの位置がずれる。
 * 本LPの内側だけ border-box にする。
 */
.lp-function,
.lp-function *,
.lp-function *::before,
.lp-function *::after { box-sizing: border-box; }

.lp-function .lp-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: var(--lp-rail) minmax(0, 1fr);
}
.lp-function .lp-inner > * { grid-column: 2; }

/* ---------- 章 ---------- */
.lp-function .lp-chapter { position: relative; }
.lp-function .lp-chapter[id] { scroll-margin-top: calc(var(--lp-headertop, 60px) + 44px); }
.lp-function .lp-chapter--tint { background: var(--lp-tint); }

/* ページを貫く縦レール。flow の連結線をページ全体の構造装置に広げたもの */
.lp-function .lp-chapter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 520px + 24px + var(--lp-rail) - var(--lp-railgap));
    width: 1px;
    background: var(--lp-line);
}
@media screen and (max-width: 1088px) {
    .lp-function .lp-chapter::before { left: calc(24px + var(--lp-rail) - var(--lp-railgap)); }
}

.lp-function .lp-chapter__head { padding: 88px 0 8px; }
.lp-function .lp-chapter__head .lp-inner > * { grid-column: 1 / -1; }
.lp-function .lp-chapter__headgrid {
    display: grid;
    grid-template-columns: var(--lp-rail) minmax(0, 1fr);
}
/* 章番号は溝の中に置き、レール上には節点だけを載せる */
.lp-function .lp-chapter__numwrap {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: calc(var(--lp-railgap) + 14px);
}
.lp-function .lp-chapter__num {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--lp-primary);
    line-height: 1;
}
.lp-function .lp-chapter__title {
    grid-column: 2;
    position: relative;
    align-self: center;
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--lp-ink);
}
.lp-function .lp-chapter__title::before {
    content: "";
    position: absolute;
    top: .62em;
    left: calc(-1 * var(--lp-railgap));
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--lp-primary-deep);
    transform: translateX(-50%);
}
.lp-function .lp-chapter__note {
    grid-column: 2;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--lp-ink-sub);
}

/* ---------- セクション（章の一段下） ---------- */
.lp-function .lp-section { padding: 44px 0; }
.lp-function .lp-section--lead { padding-top: 32px; }
.lp-function .lp-section--dense { padding: 56px 0; }

.lp-function .lp-h2 {
    position: relative;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--lp-ink);
    margin: 0 0 20px;
}
.lp-function .lp-h2::before {
    content: "";
    position: absolute;
    top: .62em;
    left: calc(-1 * var(--lp-railgap));
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lp-white);
    border: 2px solid var(--lp-primary);
    transform: translateX(-50%);
}
.lp-function .lp-chapter--tint .lp-h2::before { background: var(--lp-tint); }
/* 関連記事など、章の外側に置くブロックには節点を出さない */
.lp-function .lp-h2--nonode::before { display: none; }

/* 散文には行長上限をかけない。見出しが本文カラム全幅なのに文章だけ手前で
   折り返すと、右側が空いたまま文の途中で改行されたように見えるため。 */
.lp-function .lp-lead {
    font-size: 16px;
    line-height: 2;
    color: var(--lp-ink-sub);
    margin: 0 0 22px;
}
.lp-function .lp-body p { margin: 0 0 18px; font-size: 16px; line-height: 2; }
.lp-function .lp-body p:last-child { margin-bottom: 0; }
.lp-function .lp-body strong { font-weight: 700; color: var(--lp-ink); }
.lp-function .lp-body a { color: var(--lp-primary); text-decoration: underline; }

.lp-function .lp-textlink { margin: 22px 0 0; }
.lp-function .lp-textlink a {
    color: var(--lp-primary);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}


/* ---------- ヒーロー ---------- */
.lp-function .lp-hero {
    background: linear-gradient(160deg, #0e3f6b 0%, #1266b1 62%, #2f86cf 100%);
    color: var(--lp-white);
    padding: 64px 0 60px;
}
.lp-function .lp-hero__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    /*
     * テキスト側の幅で H1 が1行に収まるかが決まる。最長の見出しは16文字
     * （中小製造業向け受発注管理システム）。letter-spacing 込みの実測で
     * 37px なら 612px に収まる（38pxでは4px足りず2行になる）。
     * コンテナ1040px・パディング48・gap40 から、この比率でテキスト612px／図版340px。
     * 図版側を狭めすぎると hero-*.svg（480px幅で設計）の文字が実効10.5pxを割るため、
     * 340pxが下限。これ以上テキストを広げるなら図版の作り直しが必要。
     */
    grid-template-columns: minmax(0, 1fr) minmax(0, .556fr);
    gap: 40px;
    align-items: center;
}
/* 図版が未設定のページでも行長が伸びきらないようにする */
.lp-function .lp-hero--noimage .lp-hero__inner { grid-template-columns: minmax(0, 1fr); }
.lp-function .lp-hero--noimage .lp-hero__title,
.lp-function .lp-hero--noimage .lp-hero__lead { max-width: 22em; }

.lp-function .lp-hero__title {
    font-size: 37px;
    font-weight: 700;
    line-height: 1.32;
    margin: 0 0 18px;
    letter-spacing: .01em;
    /* 幅が足りず折り返す場合でも、1文字だけ次行に落ちないよう均等に割る */
    text-wrap: balance;
}
/* 制度対応バッジ。訴求点(✓リスト)と区別するためチップ形式にする */
.lp-function .lp-hero__badges {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lp-function .lp-hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    padding: 6px 14px 6px 11px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--lp-white);
    white-space: nowrap;
}
.lp-function .lp-hero__badges li::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background: #ffd257;
    /* 角丸の盾形。制度・認定の記号として使う */
    clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
}
.lp-function .lp-hero__lead {
    font-size: 16.5px;
    line-height: 1.95;
    color: rgba(255, 255, 255, .93);
    margin: 0 0 22px;
    max-width: 34em;
}
.lp-function .lp-hero__points { list-style: none; margin: 0 0 28px; padding: 0; }
.lp-function .lp-hero__points li {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 11px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.7;
}
.lp-function .lp-hero__points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .55em;
    width: 8px;
    height: 14px;
    border-right: 3px solid #ffd257;
    border-bottom: 3px solid #ffd257;
    transform: rotate(42deg);
}
.lp-function .lp-hero__figure {
    background: var(--lp-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}
.lp-function .lp-hero__figure img { display: block; width: 100%; height: auto; }

/* ---------- CTA ---------- */
.lp-function .lp-cta { margin: 0; }
.lp-function .lp-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; }

.lp-function .lp-btn {
    display: inline-block;
    min-width: 262px;
    text-align: center;
    padding: 16px 28px;
    border-radius: 6px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    border: 2px solid transparent;
    transition: .2s ease-in-out;
}
.lp-function .lp-btn:focus-visible { outline: 3px solid #ffd257; outline-offset: 3px; }
.lp-function .lp-btn--primary {
    background: var(--lp-cta);
    border-color: var(--lp-cta);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 138, 0, .32);
}
.lp-function .lp-btn--primary:hover { background: #e87c00; border-color: #e87c00; }
.lp-function .lp-btn--secondary {
    background: transparent;
    border-color: var(--lp-white);
    color: var(--lp-white);
}
.lp-function .lp-btn--secondary:hover { background: var(--lp-white); color: var(--lp-primary); }

/* 資料DLのラベルが長いため、ヒーローでは幅を揃えて縦に積む */
.lp-function .lp-hero .lp-cta__buttons { flex-direction: column; align-items: flex-start; gap: 12px; }
.lp-function .lp-hero .lp-btn { width: 100%; max-width: 352px; }

.lp-function .lp-cta__note {
    font-size: 12.5px;
    line-height: 1.7;
    margin: 13px 0 0;
    color: rgba(255, 255, 255, .82);
}

/* 本文の途中に差し込む濃色CTA。セクションを増やさずにCTAを置くため */
.lp-function .lp-ctablock {
    margin: 8px 0 0;
    padding: 28px 30px;
    background: var(--lp-primary-deep);
    border-radius: 12px;
    color: var(--lp-white);
}
.lp-function .lp-ctablock__title { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.55; }
.lp-function .lp-ctablock__note {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .85);
    max-width: 34em;
}

/* ---------- 章1 課題リスト ---------- */
.lp-function .lp-problems {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.lp-function .lp-problems li {
    background: var(--lp-white);
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    padding: 16px 18px 16px 46px;
    position: relative;
    font-size: 15px;
    line-height: 1.75;
}
.lp-function .lp-problems li::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 20px;
    width: 15px;
    height: 15px;
    background: var(--lp-warn);
    clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
}

/* ---------- 章2 2カラム ---------- */
.lp-function .lp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: 36px;
    align-items: start;
}
/* 図版が無い場合は本文が右半分を空けたまま折り返すため、1カラムに落とす */
.lp-function .lp-split--noimage { grid-template-columns: minmax(0, 1fr); }
.lp-function .lp-split__text { max-width: none; }
.lp-function .lp-split__image img {
    width: 100%;
    height: auto;
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    background: var(--lp-white);
}

/* 機能一覧。カードも縦罫も使わない（レール以外に縦線を増やさないため）。
   色付きの見出しと余白だけで区切り、用語解説の罫線リストと描き分ける。 */
.lp-function .lp-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 26px 36px;
}
.lp-function .lp-features li { margin: 0; }
.lp-function .lp-features__title {
    position: relative;
    padding-left: 17px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--lp-primary);
    margin: 0 0 6px;
    line-height: 1.5;
}
.lp-function .lp-features__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--lp-primary);
}
.lp-function .lp-features__desc {
    padding-left: 17px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--lp-ink-sub);
    margin: 0;
}

/* 要件。順序ではなく並列の条件なので連番を使わない */
.lp-function .lp-requirements { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.lp-function .lp-requirements li { padding: 18px 22px; background: var(--lp-tint); border-radius: 10px; }
.lp-function .lp-chapter--tint .lp-requirements li { background: var(--lp-white); border: 1px solid var(--lp-line); }
.lp-function .lp-requirements__title {
    position: relative;
    padding-left: 28px;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 7px;
    line-height: 1.55;
    color: var(--lp-ink);
}
.lp-function .lp-requirements__title::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .42em;
    width: 8px;
    height: 14px;
    border-right: 2.5px solid var(--lp-primary);
    border-bottom: 2.5px solid var(--lp-primary);
    transform: rotate(42deg);
}
.lp-function .lp-requirements__desc {
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--lp-ink-sub);
    margin: 0;
}

/* 用語タイル（費目・指標など）。項目数が奇数でも空セルが出ないよう枠は各項目が持つ */
.lp-function .lp-terms {
    list-style: none;
    margin: 24px 0 26px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
}
.lp-function .lp-terms li {
    background: var(--lp-white);
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    padding: 19px 21px;
}
.lp-function .lp-terms__name { font-size: 17px; font-weight: 700; color: var(--lp-ink); margin: 0 0 8px; line-height: 1.4; }
.lp-function .lp-terms__meta {
    display: block;
    margin: 0 0 10px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--lp-ink-faint);
}
.lp-function .lp-terms__meta b {
    display: block;
    margin-top: 3px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--lp-primary);
}
.lp-function .lp-terms__desc { font-size: 14.5px; line-height: 1.85; color: var(--lp-ink-sub); margin: 0; }

/* サイクル。末尾から先頭へ戻る帯を付けて、実際に循環させる */
.lp-function .lp-cycle { margin: 0 0 24px; }
.lp-function .lp-cycle__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    counter-reset: lpcyc;
}
.lp-function .lp-cycle__steps li {
    counter-increment: lpcyc;
    position: relative;
    padding: 16px 20px 18px 16px;
    background: var(--lp-white);
    border: 1px solid var(--lp-line);
    border-right: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
}
.lp-function .lp-cycle__steps li:first-child { border-radius: 10px 0 0 0; }
.lp-function .lp-cycle__steps li:last-child { border-right: 1px solid var(--lp-line); border-radius: 0 10px 0 0; }
.lp-function .lp-cycle__steps li::before {
    content: "0" counter(lpcyc);
    display: block;
    margin-bottom: 6px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--lp-primary);
}
/* ステップ間の送り矢印 */
.lp-function .lp-cycle__steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 26px;
    z-index: 2;
    width: 12px;
    height: 12px;
    background: var(--lp-white);
    border-top: 1px solid var(--lp-line);
    border-right: 1px solid var(--lp-line);
    transform: rotate(45deg);
}
.lp-function .lp-cycle__return {
    position: relative;
    height: 44px;
    border: 1px solid var(--lp-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: var(--lp-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-function .lp-chapter--tint .lp-cycle__return { background: var(--lp-tint-deep); }
.lp-function .lp-cycle__return span {
    position: relative;
    padding-left: 26px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lp-primary);
    background: inherit;
    z-index: 1;
}
.lp-function .lp-cycle__return span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 9px;
    border-left: 2px solid var(--lp-primary);
    border-bottom: 2px solid var(--lp-primary);
    transform: translateY(-50%) rotate(45deg);
}
.lp-function .lp-cycle__return::before,
.lp-function .lp-cycle__return::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    background: var(--lp-line);
}
.lp-function .lp-cycle__return::before { left: 22px; right: calc(50% + 96px); }
.lp-function .lp-cycle__return::after { left: calc(50% + 96px); right: 22px; }

/* ---------- 図版 ---------- */
.lp-function .lp-figure { margin: 0; }
.lp-function .lp-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    background: var(--lp-white);
}
.lp-function .lp-figure figcaption {
    margin: 11px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--lp-ink-faint);
}
.lp-function .lp-figure--wide { margin: 0 0 28px; }
.lp-function .lp-figure__zoom { display: none; }

/* ---------- 章3 比較表 ---------- */
.lp-function .lp-table-wrap {
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    background: var(--lp-white);
    overflow: hidden;
}
.lp-function .lp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; text-align: left; }
.lp-function .lp-table th {
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    background: var(--lp-ink);
    color: var(--lp-white);
}
/* 訴求列は色で列ごと所有させる。太字だけでは勝ち列が伝わらない */
.lp-function .lp-table th:last-child { background: var(--lp-primary); }
.lp-function .lp-table td {
    padding: 13px 16px;
    line-height: 1.7;
    color: var(--lp-ink-sub);
    border-bottom: 1px solid var(--lp-line);
    vertical-align: top;
}
.lp-function .lp-table td:first-child { width: 22%; color: var(--lp-ink); font-weight: 700; background: #f7fafd; }
.lp-function .lp-table td:last-child { width: 39%; color: var(--lp-ink); font-weight: 700; background: #eaf3fb; }
.lp-function .lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-function .lp-table__sp { display: none; }

/* 料金。数字を散文から取り出して数字として見せる。
   2列×2行で、左=スモール／右=スタンダードの対比になるように並べる */
.lp-function .lp-price {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--lp-line);
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 10px;
}
.lp-function .lp-price div { background: var(--lp-white); padding: 20px 22px; }
.lp-function .lp-price dt { font-size: 13px; font-weight: 700; color: var(--lp-ink-sub); margin: 0 0 6px; }
.lp-function .lp-price dd {
    margin: 0;
    font-family: 'IBM Plex Sans', 'Noto Sans JP', sans-serif;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--lp-primary-deep);
    letter-spacing: -.01em;
}
.lp-function .lp-price dd small { font-size: 15px; font-weight: 700; color: var(--lp-ink-sub); margin-left: 2px; }
.lp-function .lp-price__note { margin: 0 0 20px; font-size: 13px; line-height: 1.7; color: var(--lp-ink-sub); }
.lp-function .lp-price__badge {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 20px;
    background: var(--lp-tint-deep);
    border-radius: 14px;
    padding: 9px 16px 9px 12px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--lp-primary-deep);
}
.lp-function .lp-price__badge::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    margin-top: .35em;
    background: #f0a500;
    clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
}

/* ---------- 章4 導入の流れ ---------- */
.lp-function .lp-flow { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: lpflow; }
.lp-function .lp-flow li { counter-increment: lpflow; position: relative; padding: 0 0 24px 56px; }
.lp-function .lp-flow li:last-child { padding-bottom: 0; }
.lp-function .lp-flow li::before {
    content: counter(lpflow);
    position: absolute;
    left: 0;
    top: 1px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--lp-white);
    border: 2px solid var(--lp-primary);
    color: var(--lp-primary);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    display: grid;
    place-items: center;
    z-index: 1;
}
/* ステップ同士をつなぐ縦線 */
.lp-function .lp-flow li::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 34px;
    bottom: 0;
    width: 2px;
    background: var(--lp-line);
}
.lp-function .lp-flow li:last-child::after { display: none; }
.lp-function .lp-flow__title { font-size: 16.5px; font-weight: 700; margin: 3px 0 6px; line-height: 1.5; }
.lp-function .lp-flow__desc {
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--lp-ink-sub);
    margin: 0;
}

/* 用語解説。カードをやめ罫線の定義リストにして、機能一覧と描き分ける */
.lp-function .lp-glossary {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 36px;
}
.lp-function .lp-glossary > div { padding: 14px 0; border-top: 1px solid var(--lp-line); }
.lp-function .lp-glossary dt { font-size: 15px; font-weight: 700; color: var(--lp-ink); margin: 0 0 4px; line-height: 1.5; }
.lp-function .lp-glossary dd { margin: 0; font-size: 14px; line-height: 1.8; color: var(--lp-ink-sub); }

/* FAQ。折りたたんでも本文はDOMに残るので構造化データ・SEOに影響しない */
.lp-function .lp-faq { margin: 0; }
.lp-function .lp-faq details { border-bottom: 1px solid var(--lp-line); }
.lp-function .lp-faq details:first-of-type { border-top: 1px solid var(--lp-line); }
.lp-function .lp-faq summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 16px 40px 16px 28px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
}
.lp-function .lp-faq summary::-webkit-details-marker { display: none; }
.lp-function .lp-faq summary:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: -2px; }
.lp-function .lp-faq summary::before {
    content: "Q";
    position: absolute;
    left: 2px;
    top: 16px;
    color: var(--lp-primary);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
}
.lp-function .lp-faq summary::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 24px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--lp-ink-faint);
    border-bottom: 2px solid var(--lp-ink-faint);
    transform: rotate(45deg);
    transition: transform .2s;
}
.lp-function .lp-faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
/* 回答には行長上限をかけない。質問文（summary）が全幅なのに回答だけ 40em で
   折り返すと、右側が大きく空いて途中で改行されたように見えるため。 */
.lp-function .lp-faq p {
    margin: 0;
    padding: 0 28px 20px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--lp-ink-sub);
}

/* ---------- 関連記事（ピラー→クラスタ） ---------- */
.lp-function .lp-related {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
}
.lp-function .lp-related li { margin: 0; }
.lp-function .lp-related a {
    display: block;
    position: relative;
    background: var(--lp-white);
    border: 1px solid var(--lp-line);
    border-left: 4px solid var(--lp-primary);
    border-radius: 6px;
    padding: 14px 36px 14px 16px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.65;
    color: var(--lp-ink);
    text-decoration: none;
    transition: .2s ease-in-out;
}
.lp-function .lp-related a:hover { background: var(--lp-tint); }
.lp-function .lp-related a::after {
    content: "";
    position: absolute;
    right: 16px;
    top: calc(50% - 4px);
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--lp-primary);
    border-right: 2px solid var(--lp-primary);
    transform: rotate(45deg);
}

/* ---------- クロージング（揃えは左に統一） ---------- */
.lp-function .lp-closing { background: var(--lp-primary); color: var(--lp-white); padding: 64px 0; }
.lp-function .lp-closing .lp-inner { grid-template-columns: minmax(0, 1fr); }
.lp-function .lp-closing .lp-inner > * { grid-column: 1; }
.lp-function .lp-closing h2 { font-size: 28px; font-weight: 700; line-height: 1.45; margin: 0 0 14px; }
.lp-function .lp-closing__lead {
    font-size: 15.5px;
    line-height: 1.95;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 26px;
    max-width: 36em;
}
.lp-function .lp-closing .lp-textlink a { color: var(--lp-white); }

/* ============================================================================
 * 章ナビゲーション
 *
 * テーマの .p-header は position:fixed（PC 97px / SP 55px）で常時表示される。
 * SPにはさらに .c-fix-cta（固定の資料請求バー）が下端にある。
 * そのため
 *   - 固定の左サイドインデックスは本文カラム(左端 149px @1400)と重なるため使わない
 *   - 追従バーにCTAは置かない（.c-fix-cta と重複するため）
 *   - 追従バーはヘッダーの直下に出す。高さはJSが実測して --lp-headertop に入れる
 * ========================================================================= */

/* ヒーロー直後に置く章インデックス。全幅で成立し、固定要素と干渉しない */
.lp-function .lp-chapternav { background: var(--lp-white); border-bottom: 1px solid var(--lp-line); }
.lp-function .lp-chapternav ol {
    list-style: none;
    max-width: 1040px;
    margin: 0 auto;
    padding: 14px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.lp-function .lp-chapternav a {
    display: block;
    padding: 10px 12px 10px 14px;
    border-left: 3px solid var(--lp-line);
    border-radius: 0 5px 5px 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--lp-ink);
    text-decoration: none;
    transition: .2s ease-in-out;
}
.lp-function .lp-chapternav a:hover { background: var(--lp-tint); border-left-color: var(--lp-primary); }
.lp-function .lp-chapternav a:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }
.lp-function .lp-chapternav b {
    display: block;
    margin-bottom: 2px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--lp-primary);
}

/* 追従バー。進捗と現在章だけを出す細いもの。main の外なので個別にスコープする */
.lp-navbar {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--lp-headertop, 0px);
    z-index: 900;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid #d6e4f3;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease-in-out;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
}
.lp-navbar.is-on { opacity: 1; visibility: visible; }
.lp-navbar__prog { height: 3px; background: #1266b1; width: 0; }
.lp-navbar__row {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 6px 24px;
}
.lp-navbar__num { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 700; color: #1266b1; letter-spacing: .08em; }
.lp-navbar__name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #2b3a4d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media screen and (max-width: 768px) {
    .lp-navbar__row { padding: 6px 18px; }
    .lp-function .lp-chapternav ol { padding: 12px 18px; grid-template-columns: 1fr 1fr; gap: 6px; }
    .lp-function .lp-chapternav a { padding: 8px 8px 8px 10px; font-size: 12.5px; }
}

/* ============================================================================
 * SP
 * ========================================================================= */
@media screen and (max-width: 900px) {
    .lp-function .lp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    /* 見出しより先に画面写真を出さない。図版はCTAのあとに回す */
    .lp-function .lp-hero__figure { order: 2; }
    .lp-function .lp-hero__text { display: flex; flex-direction: column; }
    .lp-function .lp-hero__title { order: 0; margin-bottom: 14px; }
    .lp-function .lp-hero__badges { order: 1; margin: 0 0 16px; }
    .lp-function .lp-hero__lead { order: 2; }
    .lp-function .lp-hero__points { order: 3; }
    .lp-function .lp-hero .lp-cta { order: 4; }
    .lp-function .lp-hero .lp-btn { max-width: none; }

    .lp-function .lp-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .lp-function .lp-cycle__steps { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    .lp-function .lp-cycle__steps li { border-right: 1px solid var(--lp-line); border-radius: 0 !important; }
    .lp-function .lp-cycle__steps li:not(:last-child)::after { display: none; }
    .lp-function .lp-price { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
    .lp-function { --lp-rail: 34px; --lp-railgap: 20px; }
    .lp-function .lp-inner { padding: 0 18px; }
    .lp-function .lp-hero__inner { padding: 0 18px; }
    .lp-function .lp-chapter::before { left: calc(18px + var(--lp-rail) - var(--lp-railgap)); }

    .lp-function .lp-hero { padding: 44px 0 40px; }
    .lp-function .lp-hero__title { font-size: 27px; }
    .lp-function .lp-hero__lead { font-size: 15px; }
    .lp-function .lp-hero__points li { font-size: 14.5px; }
    .lp-function .lp-hero__badges { gap: 6px; }
    .lp-function .lp-hero__badges li { font-size: 11.5px; padding: 5px 11px 5px 9px; white-space: normal; }

    .lp-function .lp-chapter__head { padding: 52px 0 4px; }
    /* 溝が狭いのでSPでは章番号を見出しの上に置く */
    .lp-function .lp-chapter__numwrap { grid-column: 2; justify-content: flex-start; padding: 0 0 5px; }
    .lp-function .lp-chapter__num { font-size: 12px; letter-spacing: .12em; }
    .lp-function .lp-chapter__title { font-size: 21px; }
    .lp-function .lp-chapter__title::before { width: 11px; height: 11px; }

    .lp-function .lp-section { padding: 30px 0; }
    .lp-function .lp-section--dense { padding: 38px 0; }
    .lp-function .lp-h2 { font-size: 19px; margin-bottom: 16px; }
    .lp-function .lp-h2::before { width: 7px; height: 7px; top: .6em; }
    .lp-function .lp-lead, .lp-function .lp-body p { font-size: 15px; }

    .lp-function .lp-cta__buttons { flex-direction: column; gap: 10px; }
    .lp-function .lp-btn { min-width: 0; width: 100%; padding: 14px 18px; font-size: 15px; }
    .lp-function .lp-ctablock { padding: 22px 20px; border-radius: 10px; }
    .lp-function .lp-ctablock__title { font-size: 17px; }

    .lp-function .lp-problems { grid-template-columns: 1fr; }
    .lp-function .lp-features { grid-template-columns: 1fr; gap: 20px; }
    .lp-function .lp-terms { grid-template-columns: 1fr; }
    .lp-function .lp-cycle__steps { grid-template-columns: 1fr; }
    .lp-function .lp-cycle__steps li { border-bottom: 0; }
    .lp-function .lp-cycle__steps li:last-child { border-bottom: 1px solid var(--lp-line); }
    .lp-function .lp-glossary { grid-template-columns: 1fr; }
    .lp-function .lp-related { grid-template-columns: 1fr; }
    .lp-function .lp-closing { padding: 44px 0; }
    .lp-function .lp-closing h2 { font-size: 21px; }

    /* 比較表。横スクロールさせると最終列（訴求列）が画面外のまま読まれるため、
       同じデータを行ごとのカードに組み替える。 */
    .lp-function .lp-table-wrap { display: none; }
    .lp-function .lp-table__sp { display: grid; gap: 10px; }
    .lp-function .lp-table__sp > div {
        border: 1px solid var(--lp-line);
        border-radius: 9px;
        overflow: hidden;
        background: var(--lp-white);
    }
    .lp-function .lp-table__sp h4 {
        margin: 0;
        padding: 11px 14px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        background: var(--lp-ink);
        color: var(--lp-white);
    }
    /* 見出し語(lp_compare_head)はページごとに長さが違うため、ラベル列は固定幅で
       折り返させる。auto にすると「単独の原価管理システム」等で値の側が潰れる。 */
    .lp-function .lp-table__sp dl { margin: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); }
    .lp-function .lp-table__sp dt {
        padding: 11px 8px 11px 12px;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.6;
        color: var(--lp-ink-faint);
        border-bottom: 1px solid var(--lp-line);
    }
    .lp-function .lp-table__sp dd {
        margin: 0;
        padding: 11px 12px 11px 0;
        font-size: 14px;
        line-height: 1.65;
        color: var(--lp-ink-sub);
        border-bottom: 1px solid var(--lp-line);
    }
    .lp-function .lp-table__sp dt.is-fa { color: var(--lp-primary); background: #eaf3fb; border-bottom: 0; }
    .lp-function .lp-table__sp dd.is-fa { color: var(--lp-ink); font-weight: 700; background: #eaf3fb; border-bottom: 0; }

    /* 広い図版は縮小せず原寸で横スクロールさせ、合図を出す */
    .lp-function .lp-figure--wide .lp-figure__scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--lp-line);
        border-radius: 10px;
        background: var(--lp-white);
    }
    .lp-function .lp-figure--wide img { min-width: 620px; border: 0; border-radius: 0; }
    .lp-function .lp-figure__zoom {
        display: block;
        margin: 9px 0 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--lp-ink-faint);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-function *,
    .lp-navbar { transition: none !important; animation: none !important; }
}