@charset "UTF-8";
/* ==========================================================================
   kpiee 新TOP：モバイルファースト対応（292回目：2026/10/15）
   newtop-custom.css の後に読み込む。今回追加・変更した箇所だけをここにまとめている。

   1. ページ内リンクの着地位置（固定ヘッダーの高さ分ずらす）
   2. FV：（旧）SPのデモ拡大表示。292回目後半でモバイルFVは「11.」の新しいキービジュアルに差し替え済み
   3. 課題4つ：SPはアコーディオン
   4. できること：SPの項目間の余白
   5. （削除）比較表の表示対象の選択
   6. 説明文の「続きを読む」：SPは冒頭3行（トップのできること本文・機能ページの説明文。PCは全文表示）
   7. 伴走支援のリード：SPでも表示（既存CSSの非表示指定を上書き）
   8. 比較表以降：セクションの背景色（白／グレー）を入れ替え
   9. 伴走支援ページ：お悩みカードの本文をSPでも表示
  10. SPの説明文は「。」の後でのみ改行
  11. モバイルFVのキービジュアル（iframe）
  12. 伴走支援ページ：お悩みパネルをSPでアコーディオンに（トップの課題と同じ）
  13. PC用キービジュアル（iframe）
  14. イントロ：ヘッダーのロゴのピンの位置の目印（文字は動かさない）
  15. できること：各項目の番号（赤）、チェックリストの文字サイズ12px
  16. 比較表（SP）：比較項目とkpieeの列を固定して、他社の列だけ横スクロール
  17. できること01の図解（iframe）
  18. 比較表（SP・案A）：記号だけの一覧表＋行をタップで説明
  19. FV（SP）：キャッチコピー・説明文を左揃え、説明文12px
  20. SP：各セクションの見出し＋説明文を左揃え、説明文12px
  21. SP：左右の余白を全セクション25pxにそろえる（293回目に変更）
  ――― 293回目（2026/10/20）：モバイルファースト観点の反映（トップページ） ―――
  22. SPの文字サイズ（案A）：リード・本文14px／カード内の説明文・補足13px／注記・表の説明12px／見出し22px
  23. （削除）導入効果の注記は従来どおり（方針の例外）
  26. SP：主な機能・CTAカードの説明文は改行位置を指定せず自然に折り返す
  27. FV（SP）：キービジュアルをCTAの上に（説明文 → キービジュアル → CTA）
  28. できること（SP）：説明文は全文たたみ「説明を読む」で開く（data-more="hide"）
  29. 比較表（SP）：行をタップで説明をシート表示（画面下から。前後の項目へ移動可）
  30. 主な機能・伴走支援（SP）：最初の横並びのまま図解を大きく、8枚のパネルの高さをそろえる
  31. SPの行間：同じ文字サイズは同じ行間（14px は 1.7、13px・12px は 1.6）
  32. できること01（SP）：MDPの図解の下の余白を詰める
  33. よくある質問：白地を画面の端まで確実に敷く（SP）、区切り線の端を丸めない
  34. 最後のCTA（SP）：図解を大きく（72px → 96px）、見出し・説明文は図解の右に。資料DL・デモの図解を差し替え（picture）
  35. 導入から運用までの流れ（SP）：見出しと箇条書きの間を 約25px → 8px に（見出しの位置は変えない）
  ――― 293回目：TOPの修正を下層ページ（機能5・伴走支援・セキュリティ）へ展開 ―――
  36. パンくず（下層ページ共通。PC・SP）
  37. 下層ページ（SP）の文字サイズ・行間：カード内の説明文 13px・1.7、リード 1.7
  38. 機能ページ（SP）：その他の主な機能のカード（TOPの主な機能と同じく、図解を大きく・高さをそろえる）
  39. 伴走支援ページ（SP）：作業内容のカード（図解を大きく・高さをそろえる）
  40. 下層ページの文字色：小さい赤文字・グレー文字のコントラスト（PC・SP）
  41. TOP：FVのキャッチコピー下・各セクションの見出し下の説明文をグレーに（PC・SP）
  42. 他サービスとの比較（SP）：見出しの kpiee ロゴを 2px 下に
  43. SPの常駐CTA：画面下部の固定バー（資料ダウンロード）
  44. モバイルFVのキービジュアル：進行バーの押せる帯・スワイプの層
  45. SP：常駐CTAが出ている間はヘッダーの資料DLボタンを隠す
  46. できること：番号を小さく（PC 18px／SP 14px）し、分類名（収集・集計・分析・AI接続）を並べる（どちらも赤）
  47. できること01：見出し内の英語表記（Management Data Platform）を小さい文字に
  48. 主な機能（PC）：パネルの高さを伴走支援と同程度に（画像の枠の高さ・見出し上の余白）、図解を5%縮小
  49. できること：小見出し・見出しの最後の行が1〜2文字にならないよう折り返しを整える
  50. できること：PCの01と02の間を他の項目間とそろえる／SPの「説明を読む」の上の余白を半分に
  51. できること（PC）：チェック項目どうしの間を 10px → 8px、文字サイズ 12px → 13px
  52. FV（SP）：キャッチコピー 30px → 32px
  53. 経営管理部の課題（SP）：アコーディオンをやめ、見出しと説明文を常に表示
  54. FV（SP）のキービジュアル：下の操作行（‹　2/5 場面名／手順　›）。キービジュアル内の見出しはここに集約
  55. FV（SP）：キービジュアルの進行バーをなくし、下端の帯を切り取って高さを詰める／CTAが画面に収まるよう余白を詰める
  56. 導入事例（SP）：社名 13px・見出し 16px、次のカードを覗かせる横スクロール、前後のボタンはSPでは出さない（PC用に端での非活性は残す）
  57. お知らせ：企業ロゴの下のセクション（#section_news）
  58. 伴走支援ページ（SP）：「BPaaSで全て解決」のパネルの説明文の改行指定をなくす／FVの説明文のPC用の改行をSPで出さない
  24. 図版：WebPの出し分け（picture）で既存のレイアウトを変えない
  25. 長い英数字の折り返し（320px幅でのはみ出し防止）

   ※ このファイルはトップと下層ページ（機能・伴走支援・セキュリティ）で読み込む

   ブレークポイントは既存CSSに合わせる（SP: 〜640px / 本文の出し分け: 〜768px / ヘッダー切替: 〜1024px）
   293回目以降、新しく作る部品は小さい画面を基準に書き、min-width で広げる。
   既存のSP指定（max-width）を上書きする箇所だけ、同じ max-width で上書きする
   ========================================================================== */


/* 追加要素は box-sizing を明示（テーマ側の指定に依存しない） */



/* --------------------------------------------------------------------------
   1. ページ内リンクの着地位置
   ヘッダーは PC 56px / SP 48px で固定。見出しが隠れないように +16px の余白
   （#case と #function は既存の .v2-anchor で調整済みのため対象外）
   -------------------------------------------------------------------------- */
#faq,
#cta {
  scroll-margin-top: 72px;
}
@media (max-width: 1024px) {
  #faq,
  #cta {
    scroll-margin-top: 64px;
  }
}


/* --------------------------------------------------------------------------
   2. FV：SPは製品画面を固定の画角で拡大表示
   画角は newtop-components.js（「SP：キービジュアルを拡大して見せる」）の MAIN_W / FRAME_RATIO / SHOTS で指定。
   ここでは表示枠からのはみ出しを隠し、四辺をぼかしてサイトとの境界をなじませる
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #section_001 .kpiee-kv3 .browser-scroll {
    overflow: hidden;
    /* 四辺をふわっと消して、サイトとの境界をぼかす（背景の白になじむ）。
       縦・横のグラデーションを重ね、両方が不透明な部分だけを表示する */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%);
    mask-composite: intersect;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}


/* --------------------------------------------------------------------------
   3. 課題4つ：SPはアコーディオン（見出しをタップで説明文を開閉）
   newtop-mobilefirst.js が 640px以下のときだけ見出しをボタンにし、.is-accordion を付ける。
   PCとJSが動かない環境では、従来どおり説明文をすべて表示する。
   説明文はHTMLに常に入っている（非表示にするのはSPの閉じた状態のみ）
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 既存CSS（2675行目付近）が SP で display:block !important を指定しているため、!important で上書き */
  body #section_003 .problem-grid.is-accordion .problem-card:not(.is-open) .problem-txt {
    display: none !important;
  }
  /* 閉じた状態は見出し1行ぶんの高さに。チェックアイコンは見出しの行に固定する
     （既存は上下中央のため、開くとアイコンが説明文の横へずれてしまう） */
  body #section_003 .problem-grid.is-accordion .problem-card {
    padding: 10px 16px 10px 56px;
    background-position: left 16px top 21px;
  }
  body #section_003 .problem-grid.is-accordion .problem-card .problem-ttl {
    margin: 0 !important;
  }
  body #section_003 .problem-grid.is-accordion .problem-card.is-open {
    padding-bottom: 16px;
  }
  #section_003 .problem-grid.is-accordion .problem-txt {
    margin-top: 2px;
  }
  #section_003 .problem-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* 右端の山形：閉じているときは下向き、開いているときは上向き */
  #section_003 .problem-toggle::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin: -4px 4px 0 0;
    border-right: 2px solid #868F9C;
    border-bottom: 2px solid #868F9C;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  #section_003 .problem-card.is-open .problem-toggle::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }
  #section_003 .problem-toggle:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 4px;
    border-radius: 4px;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  #section_003 .problem-toggle::after {
    transition: none;
  }
}



/* --------------------------------------------------------------------------
   4. できること：SPの項目間の余白（並びは既存のまま：見出し → 図解 → 説明文 → チェックリスト）
   一度、項目間に薄い線を入れたが削除。余白は線があったときと同じ（40px＋40px）を保つ
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_004 .cap-list {
    gap: 40px;
  }
  body #section_004 .cap-list .cap-row + .cap-row {
    padding-top: 40px;
  }
}


/* --------------------------------------------------------------------------
   5. 比較表：（一度SPに「表示する比較対象」の選択を入れたが、292回目後半で削除。列の固定は「16.」）
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6. 説明文の「続きを読む」（トップのできること本文・機能ページの各項目の説明文）
   PCと同じ全文に一本化（SP用の短文は廃止）。768px以下は冒頭3行を表示し、「続きを読む」で全文を開く。
   PCは全文表示。対象は data-more を付けた要素、中身は .more-text。
   .is-clampable と「続きを読む」ボタン（.more-btn）は newtop-mobilefirst.js が付ける
   （3行に収まる場合は付けない。JSが動かない場合は全文表示）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* PC用の改行はSPでは使わず、自然に折り返す */
  body [data-more] br.v2-only-pc {
    display: none;
  }
  /* 開いたときもボタンが本文の下の行に来るよう、本文はブロックにする */
  [data-more].is-clampable .more-text {
    display: block;
  }
  [data-more].is-clampable:not(.is-expanded) .more-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  [data-more] .more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #222222;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  [data-more] .more-btn::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }
  [data-more].is-expanded .more-btn::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }
  [data-more] .more-btn:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 4px;
    border-radius: 4px;
  }
}
@media (min-width: 769px) {
  [data-more] .more-btn {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   7. 伴走支援のリード：既存CSSがSPで1つ目のリード（.v2-lead:first-of-type）を非表示にしているため上書き。
      リードは「kpieeでは、…」の1段落のみ（「ツールを導入しても…」の段落は削除済み）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body #section_006 .v2-head .v2-lead:first-of-type {
    display: block;
  }
}


/* --------------------------------------------------------------------------
   8. 比較表以降：セクションの背景色（白／グレー）を入れ替え（PC・SP共通）
   比較表 白 → 主な機能 グレー → 伴走支援 白 → 導入の流れ グレー → よくある質問 白 → お知らせ グレー → CTA（黒のまま）
   -------------------------------------------------------------------------- */
body #section_004b {
  background: #ffffff;
}
body #section_005 {
  background: #F5F8FA;
}
body #section_006 {
  background: #ffffff;
}
body #section_009 {
  background: #F5F8FA;
}
/* よくある質問（全幅のグレー地）→ 白、お知らせ（白地）→ グレー */
body #section_008 {
  background: #F5F8FA;
}
body #section_008 .faq-block {
  background: #ffffff;
}

/* 伴走支援：パネルは白地のまま、図版ではなくパネル全体を線で囲む
   （線の色・太さは導入の流れのパネルで使っていたものと同じ） */
body #section_006 .support-card {
  border: 1px solid #e3e6ea;
  border-radius: 6px;
  background: #ffffff;
}
body #section_006 .support-visual {
  background: #ffffff;
}

/* 導入の流れ：パネルの囲み線をなくす（白地のまま） */
body #section_009 .flow-step {
  border: 0;
}

/* よくある質問：各項目は白 ／ お知らせ：各項目はグレー */
body #section_008 .qa-accordion .accordion-item {
  background: #ffffff;
}
body #section_008 .news-contents .news-item {
  background-color: #F5F8FA;
}


/* --------------------------------------------------------------------------
   9. 伴走支援ページ（bpaas.html）：お悩みカードの本文をSPでも表示（PCと同じ内容に）
   既存CSS（newtop-custom.css）がSPで .bp-worry__txt を非表示にしているため上書き
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html body .bp-v2 .bp-worry__txt {
    display: block;
    margin-top: 8px;
  }
}


/* --------------------------------------------------------------------------
   10. SPの説明文は「。」の後でのみ改行（トップ・機能ページ・伴走支援ページ）
   HTML側で改行を3種類に分けている（変換は README 参照）
     <br class="br-sent">              … 「。」の後の改行（PC・SPとも）
     <br class="v2-only-sp br-sent">   … 「。」の後の改行（SPのみ。PCでは改行していなかった箇所）
     <br class="v2-only-pc">           … PCだけの改行（SPでは出さない）
     <br class="br-keep">              … 個別に指定された改行（PC・SPとも。主な機能・他の機能の「、」の後など）
   既存CSSに「br を表示／非表示にする」指定があるため、ここで確実に上書きする
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body .problem-txt br.v2-only-pc,
  body .cap-body br.v2-only-pc,
  body .feature-txt br.v2-only-pc,
  body .support-txt br.v2-only-pc,
  body .featdetail-body br.v2-only-pc,
  body .featother-txt br.v2-only-pc,
  body .bp-worry__txt br.v2-only-pc,
  body .bp-work__txt br.v2-only-pc {
    display: none !important;
  }
  body br.br-sent,
  body br.br-keep {
    display: inline !important;
  }
}
@media (min-width: 769px) {
  body br.v2-only-sp.br-sent {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   11. モバイルFVのキービジュアル（768px以下）
   kv-mobile/fv-mobile.html を正方形の iframe で表示（画面幅いっぱいに裁ち落とし）。
   読み込むまではポスター画像を表示し、読み込んだら iframe をふわっと重ねる。
   PC（769px以上）は「13.」の PC用キービジュアル（.kv-showcase）
   -------------------------------------------------------------------------- */
.home-v2 .kv-mobile {
  display: none;
}
@media (max-width: 768px) {
  body #section_001 .kv-showcase {
    display: none;
  }
  /* 292回目（2回目）：表示を少し小さく（画面幅の92%）、ボタンとの間を広げ（24px）、
     境界を白へぼかしてなじませる（v18までは四辺、v20からは左右のみ） */
  body #section_001 .kv-mobile {
    display: block;
    position: relative;
    width: 92vw;
    margin: 24px 0 0 calc(50% - 46vw);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* v20（ステップ見出し版）：上端にステップの見出し、下端に進行バーがあるため上下はぼかさない。
       左端はステップの見出しが端から始まるのでぼかさず、右端（画面が切れる側）だけ7%ぼかす */
    -webkit-mask-image: linear-gradient(to right, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, #000 93%, transparent 100%);
  }
  #section_001 .kv-mobile__poster,
  #section_001 .kv-mobile__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  #section_001 .kv-mobile__frame {
    background: transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  #section_001 .kv-mobile.is-loaded .kv-mobile__frame {
    opacity: 1;
  }
  #section_001 .kv-mobile.is-loaded .kv-mobile__poster {
    visibility: hidden;
    transition: visibility 0s 0.4s;
  }
}



/* --------------------------------------------------------------------------
   12. 伴走支援ページ（bpaas.html）：お悩みパネルをSPでアコーディオンに（トップの課題パネルと同じ動き・見た目）
   newtop-mobilefirst.js が768px以下のときだけ見出しをボタンにし、.is-accordion を付ける。
   見出しの文字の太さはトップの課題パネルに合わせて太字（既存CSSの font-weight:400 を上書き）。
   見出しは中央揃え、説明文は左揃え。パネル内の余白は上下16px、説明文の上は16px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html body .bp-v2 .bp-worry__ttl {
    font-weight: 700;
  }
  /* パネル内の余白は上下16px。見出しは中央揃え（PCと同じ）、右端の山形は見出しの中央揃えに影響しないよう絶対配置 */
  html body .bp-v2 .bp-worry-grid.is-accordion .bp-worry {
    padding: 16px;
    text-align: center;
  }
  /* 9. で表示にした本文を、閉じているときだけ隠す */
  html body .bp-v2 .bp-worry-grid.is-accordion .bp-worry:not(.is-open) .bp-worry__txt {
    display: none !important;
  }
  /* 説明文：左揃え、見出しとの間は16px */
  html body .bp-v2 .bp-worry-grid.is-accordion .bp-worry__txt {
    margin-top: 16px;
    text-align: left;
  }
  .bp-v2 .bp-worry .problem-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 24px;   /* 左右同じ幅を空けて、山形があっても見出しが中央に来るように */
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bp-v2 .bp-worry .problem-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #868F9C;
    border-bottom: 2px solid #868F9C;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .bp-v2 .bp-worry.is-open .problem-toggle::after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }
  .bp-v2 .bp-worry .problem-toggle:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 4px;
    border-radius: 4px;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .bp-v2 .bp-worry .problem-toggle::after {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   13. PC用キービジュアル（769px以上）
   kv-pc/showcase.html を iframe で表示。iframe の幅・高さは newtop-mobilefirst.js が、
   中身の大きさとファーストビューの残りの高さから決める（従来のデモと同じく、画面パネル＋タブがファーストビューに収まる幅に）
   -------------------------------------------------------------------------- */
#section_001 .kv-pc__frame {
  display: block;
  width: 100%;
  aspect-ratio: 1216 / 701;   /* 中身の大きさが届くまでの仮の比率（レイアウトのずれを防ぐ） */
  margin: 0 auto;
  border: 0;
  background: transparent;
}


/* --------------------------------------------------------------------------
   14. イントロ：ヘッダーのロゴ（「ピン＋kpiee」の1枚の画像）のピンの位置に、透明な目印（行き先）を重ねる
   画像の中のピン：左端から幅19.4%・高さ86.5%（299×96px の画像で 58×83px）
   イントロ中と、ピンが着地するまで（目印に opacity:0 が付いている間）は、画像のピンの部分だけを隠す。
   「kpiee」の文字は最初から定位置に表示されるので、ピンが入っても文字は動かない
   -------------------------------------------------------------------------- */
#header .site-logo {
  position: relative;
  display: block;
  line-height: 0;
}
#header .kpiee-intro-logo-target {
  position: absolute;
  left: 0;
  top: 0;
  width: 19.4%;
  height: 86.5%;
  pointer-events: none;
}
@media (max-width: 1024px) {
  /* 既存CSSでロゴ画像を2px下げているのに合わせる */
  #header .kpiee-intro-logo-target {
    top: 2px;
  }
}
html.kpiee-intro-active #header .site-logo img,
#header .kpiee-intro-logo-target[style*="opacity: 0"] + img {
  clip-path: inset(0 0 0 23.4%);
}


/* --------------------------------------------------------------------------
   15. できること：各項目の番号（01〜04、赤。PC 48px／SP 34px）と、チェックリストの文字サイズ（12px）。PC・SP共通
   -------------------------------------------------------------------------- */
#section_004 .cap-num {
  margin: 0 0 12px;
  color: #F32F4C;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  #section_004 .cap-num {
    margin-bottom: 8px;
    font-size: 34px;
  }
}
body #section_004 .cap-check li {
  font-size: 12px;
}


/* --------------------------------------------------------------------------
   16. 比較表（SP）：比較項目とkpieeの列を左に固定し、他社の列だけ横にスクロールする
   セルの背景は不透明にし（固定した列の下に他社の列が透けないように）。kpieeの列の右端の影は入れない（一度入れたが削除）
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_004b .cmp tr > :nth-child(1),
  body #section_004b .cmp tr > :nth-child(2) {
    position: sticky;
    z-index: 2;
  }
  /* 罫線を重ねて描く方式（border-collapse: collapse）だと、罫線が固定した列と一緒に動かず、
     スクロール中に罫線のすき間から後ろの文字が見えるため、SPでは各セルが自分の罫線を持つ方式にする。
     見た目は従来と同じ1pxの線（右と下だけに引き、左端の列と1行目だけ左・上にも引く） */
  body #section_004b .cmp {
    border-collapse: separate;
    border-spacing: 0;
  }
  body #section_004b .cmp th,
  body #section_004b .cmp td {
    border: 0;
    border-right: 1px solid #e8eaee;
    border-bottom: 1px solid #e8eaee;
  }
  body #section_004b .cmp tr > :first-child {
    border-left: 1px solid #e8eaee;
  }
  body #section_004b .cmp tr:first-child > * {
    border-top: 1px solid #e8eaee;
  }
  /* 固定する位置は、スクロール前の列の位置そのもの（newtop-mobilefirst.js が実測して変数に入れる）。
     列幅を決め打ちすると、スクロールしたときに列がずれて重なるため */
  body #section_004b .cmp tr > :nth-child(1) {
    left: var(--cmp-stick1, 0px);
  }
  body #section_004b .cmp tr > :nth-child(2) {
    left: var(--cmp-stick2, 88px);
  }
  body #section_004b .cmp.is-measuring tr > :nth-child(1),
  body #section_004b .cmp.is-measuring tr > :nth-child(2) {
    position: static;
  }
  /* 横スクロールの端で引っぱったときの跳ね返り（オーバースクロール）で、固定した列ごと表がずれないようにする */
  body #section_004b .compare-table__scroll {
    overscroll-behavior-x: none;
  }
  body #section_004b .cmp-row-head {
    background: #ffffff;
  }
  body #section_004b .cmp-kpiee {
    background: #fdeef1;
  }
}



/* --------------------------------------------------------------------------
   17. できること01の図解：kv-cap/mdp.html（16:9）を iframe で表示。PC・SP共通
   -------------------------------------------------------------------------- */
/* 292回目：図解を20%大きく（枠の幅を120%にして中央に置く。はみ出す部分は図解の透明な余白） */
/*   画面幅を超えないように、最大で画面幅いっぱい（SPや、図解が1列になる幅で横スクロールが出ないように） */
#section_004 .cap-mdp {
  position: relative;
  width: min(120%, 100vw);
  margin-left: calc((100% - min(120%, 100vw)) / 2);
  aspect-ratio: 16 / 9;
}
#section_004 .cap-mdp__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  pointer-events: none;
}



/* --------------------------------------------------------------------------
   18. 比較表（SP・案A）：記号だけの一覧表＋行をタップで4サービスの説明
   640px以下は上の表（.compare-table__scroll）を隠して、この表を表示。凡例・注記はそのまま。PCは従来の表
   見出しの色・kpieeの列の色・記号の色はPCの表と同じ（.cmp-head／.cmp-head--kpiee／.cmp-kpiee／.cmp-mark の既存CSSを流用）
   -------------------------------------------------------------------------- */
#section_004b .cmp-sp-wrap {
  display: none;
}
@media (max-width: 640px) {
  body #section_004b .compare-table__scroll {
    display: none;
  }
  body #section_004b .cmp-sp-wrap {
    display: block;
  }
  #section_004b .cmp-sp {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: #ffffff;
  }
  /* 293回目：比較項目の列を 38% → 110px（「シミュレーション」が1行に収まる幅）に狭め、各サービスの列を広げる */
  #section_004b .cmp-sp__col-label { width: 110px; }
  #section_004b .cmp-sp th,
  #section_004b .cmp-sp td {
    border: 1px solid #e8eaee;
    padding: 0;
    text-align: center;
    vertical-align: middle;
  }
  /* 列見出しはPCの表と同じ正式名を2〜3行で（10px） */
  body #section_004b .cmp-sp .cmp-head {
    height: 52px;
    padding: 4px 0;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: -0.05em;   /* 「スプレッド」が1行に収まるように */
  }
  body #section_004b .cmp-sp .cmp-head--label {
    font-size: 12px;
  }
  #section_004b .cmp-sp .cmp-logo {
    display: block;
    width: 48px;
    height: 15px;
    margin: 0 auto;
  }
  /* 比較項目（タップで開閉） */
  #section_004b .cmp-sp__toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 52px;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: #222222;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #section_004b .cmp-sp__toggle::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: -3px 1px 0 0;
    border-right: 2px solid #868F9C;
    border-bottom: 2px solid #868F9C;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  #section_004b .cmp-sp__toggle[aria-expanded="true"]::before {
    margin-top: 3px;
    transform: rotate(-135deg);
  }
  /* 幅の狭い端末（〜370px）では、比較項目の列を少し広げ（「シミュレーション」を1行に）、列見出しを9pxに（「スプレッド」を1行に） */
  @media (max-width: 370px) {
    #section_004b .cmp-sp__col-label { width: 110px; }
    body #section_004b .cmp-sp .cmp-head:not(.cmp-head--label) { font-size: 9px; }
  }
  #section_004b .cmp-sp__toggle:focus-visible {
    outline: 2px solid #222222;
    outline-offset: -2px;
  }
  #section_004b .cmp-sp__row {
    cursor: pointer;
  }
  body #section_004b .cmp-sp .cmp-mark {
    display: block;
    margin: 0;
    font-size: 18px;
    line-height: 1;
  }
  /* 開いたときの説明（PCの表と同じ文言） */
  #section_004b .cmp-sp__detail[hidden] {
    display: none;
  }
  #section_004b .cmp-sp__detail td {
    padding: 4px 12px 8px;
    background: #F5F8FA;
    text-align: left;
  }
  #section_004b .cmp-sp__list {
    margin: 0;
  }
  #section_004b .cmp-sp__item {
    padding: 8px 0;
    border-top: 1px solid #e8eaee;
  }
  #section_004b .cmp-sp__item:first-child {
    border-top: 0;
  }
  #section_004b .cmp-sp__item dt {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 2px;
    color: #222222;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
  }
  #section_004b .cmp-sp__mark {
    font-size: 14px;
  }
  #section_004b .cmp-sp__item dd {
    margin: 0;
    color: #222222;
    font-size: 12px;
    line-height: 1.7;
  }
  #section_004b .cmp-sp__item--kpiee dt,
  #section_004b .cmp-sp__item--kpiee dd {
    color: #F32F4C;
  }
  /* 開いた説明の中のkpieeは、表のkpieeの列と同じピンクの地に。
     説明欄の余白（上4px・左右12px）を打ち消して、説明欄の上端・左右いっぱいまでピンクにする */
  #section_004b .cmp-sp__item--kpiee {
    margin: -4px -12px 0;
    padding: 12px 12px 10px;
    border-top: 0;
    border-radius: 0;
    background: #fdeef1;
  }
  #section_004b .cmp-sp__item--kpiee + .cmp-sp__item {
    border-top: 0;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  #section_004b .cmp-sp__toggle::before { transition: none; }
}


/* --------------------------------------------------------------------------
   19. FV（SP）：キャッチコピー・説明文を左揃え（ボタンとキービジュアルは従来どおり）、説明文は12px
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_001 .kv-ttl,
  body #section_001 .kv-lead {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  body #section_001 .kv-lead {
    font-size: 12px;
  }
}



/* --------------------------------------------------------------------------
   20. SP：各セクションの見出し（小見出し・見出し）と説明文を左揃え・左寄せに、説明文は12px
   対象は各セクション冒頭の .v2-head（中央寄せの .v2-head--center も含む）。
   セクションごとに中央寄せ・文字サイズの個別指定が多数あるため !important で一括上書き
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body .v2-head,
  body .v2-head .v2-kicker,
  body .v2-head .v2-ttl,
  body .v2-head .v2-lead,
  body #section_004b .compare-ttl,
  body #section_004b .compare-ttl__row {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  body .v2-head .v2-lead {
    font-size: 12px !important;
  }
}


/* --------------------------------------------------------------------------
   21. SP：ページの左右の余白（293回目に変更：全セクション・フッターとも画面端から25px）
   背景色は従来どおり画面幅いっぱい
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 293回目：コンテナの外側に5pxを足す方式から、内側の余白を25pxに明示する方式に変更。
     本番CSSのセクションごとの余白の差に左右されず、すべてのセクションで中身の左右が画面端から25pxにそろう。
     コンテナは中央に置いたままなので、全幅に広げる計算（よくある質問の白地など）もずれない */
  body .v2-container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    box-sizing: border-box;
  }
  /* フッターは .v2-container を使っていない（従来は左右20px）ので同じ25pxに */
  body .v2-footer .v2-footer__inner {
    padding-left: 25px;
    padding-right: 25px;
  }
}



/* --------------------------------------------------------------------------
   22. SPの文字サイズ（案A：293回目）
   基準：本文 14px ／ リード（見出し下の説明文）・カード内の説明文・補足 13px ／ チェックリスト・注記・キャプション・表の説明 12px ／ 見出し 22px。
   カード内の説明文（見出しが14pxのパネル：課題・主な機能・伴走支援）は、見出しとの差をつけるため 13px
   11px以下は使わない（例外：比較表の列見出しは列幅の都合で現状維持、導入効果の注記は補足情報として従来の 8〜10px・#868F9C のまま）。
   既存の 12px 指定（19.・20.・15. と newtop-custom.css のSP指定）を同じ範囲で上書きする
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* カード内の説明文 13px（見出し14pxのパネル：主な機能・伴走支援） */
  body #section_005 .feature-txt,
  body #section_006 .support-txt {
    font-size: 13px;
  }
  /* 補足 13px */
  body #section_004 .cap-ttl-sub,
  body #section_009 .flow-step__list li {
    font-size: 13px;
  }
}
@media (max-width: 640px) {
  /* リード（FVのキャッチコピー下・各セクションの見出し下の説明文）：14px → 12px・グレー → 13px（293回目。色は「41.」） */
  body #section_001 .kv-lead {
    font-size: 13px;   /* 293回目：12px → 13px → 14px → 13px */
  }
  body .v2-head .v2-lead {
    font-size: 13px !important;   /* 293回目：12px → 13px → 14px → 13px */
  }
  /* 最後のCTAカードの説明文（カード内の説明文 13px） */
  body .sec-cta .cta-card__txt {
    font-size: 13px;
  }
  /* 見出し 22px（導入事例だけ 20px だったのをそろえる） */
  body #section_007 .v2-ttl {
    font-size: 22px;
  }
  /* 比較表（SP）：開いた説明・凡例・注記は 12px（表の説明として情報量が多いため） */
  #section_004b .cmp-sp__item dd {
    font-size: 12px;
  }
  /* 開いた説明の kpiee の文字：#F32F4C はピンクの地（#fdeef1）で 3.5:1 のため、
     同系の濃い赤 #CF1B39（4.8:1）に。表の記号の赤は従来どおり */
  #section_004b .cmp-sp__item--kpiee dt,
  #section_004b .cmp-sp__item--kpiee dd {
    color: #CF1B39;
  }
  body #section_004b .compare-legend,
  body #section_004b .compare-note {
    font-size: 10px;   /* 293回目：10px → 12px → 11px → 10px（元の大きさ。方針の「11px以下は使わない」の例外。補足の記号説明・注記のため） */
  }
  /* 導入の流れのラベル、フッターの「提供サービス：」は 12px */
  body #section_009 .flow-step__label,
  body .v2-footer .v2-footer__services-lbl {
    font-size: 12px;
  }
}
/* 課題の説明文（カード内の説明文 13px）：既存CSS（newtop-custom.css 5486行目付近）が 768px以下で 12px !important のため、!important で上書き */
@media (max-width: 768px) {
  body #section_003 .problem-card .problem-txt,
  body #section_003 .problem-txt {
    font-size: 13px !important;
  }
}
/* チェックリスト：SP 13px（293回目：12px → 13px → 12px → 13px。PCも「51.」で 13px。行間は「31.」で 1.6） */
@media (max-width: 768px) {
  body #section_004 .cap-check li {
    font-size: 13px;
  }
}


/* --------------------------------------------------------------------------
   24. 図版：WebP の出し分け（293回目）
   主な機能・伴走支援の図版を <picture> で包み、幅700px／1400pxのWebPを画面幅に応じて読み込む。
   picture は箱を作らない（display: contents）ので、img の幅・高さ・中央寄せの指定は従来どおり効く
   -------------------------------------------------------------------------- */
#section_005 .feature-visual > picture,
#section_006 .support-visual > picture {
  display: contents;
}


/* --------------------------------------------------------------------------
   25. 長い英数字の折り返し（293回目）
   URLや英単語が続く箇所で、320px幅でも横にはみ出さないように（通常の日本語の折り返しには影響しない）
   -------------------------------------------------------------------------- */
#primary :where(p, li, dt, dd, h1, h2, h3, h4) {
  overflow-wrap: break-word;
}



/* --------------------------------------------------------------------------
   26. SP：主な機能・CTAカードの説明文は改行位置を指定せず、自然に折り返す（293回目）
   主な機能の「、」の後の改行（br-keep）と、最後のCTAカードの改行を768px以下で出さない。PCは従来どおり
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body #section_005 .feature-txt br,
  body .sec-cta .cta-card__txt br {
    display: none !important;
  }
}



/* --------------------------------------------------------------------------
   27. FV（SP）：キービジュアルをCTAの上に（293回目）
   HTMLで .kv-mobile を .kv-head の中（説明文とCTAの間）へ移動。PCは .kv-mobile を表示しないため影響なし。
   再生開始はサイト表示の1.5秒後（kv-mobile/fv-mobile.html の START_DELAY）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* CTAがファーストビューに収まるように（iPhoneの実機でCTAの2つ目が画面下のツールバーに隠れたため）、
     キービジュアルの高さを画面幅の92% → 80%に、説明文・CTAとの間を 24px → 16px に。
     横長の枠（92:80）にして中身の舞台を右へ広げた（kv-mobile/fv-mobile.html の fitStage。構図はそのままで、ウィンドウの右側が多く見える）。
     一度、正方形のまま80%に縮めたが、右側に不自然な余白ができたため横長に。さらに、左右の余白を他のコンテンツとそろえた（下の指定） */
  /* 293回目：左右の余白を他のコンテンツと同じ（画面端から25px）に。横長の比率（92:80）はそのまま、中身の幅いっぱいに置く */
  body #section_001 .kv-head .kv-mobile {
    width: 100%;
    height: auto;
    aspect-ratio: 92 / 80;
    margin-top: 16px;
    margin-left: 0;
    margin-right: 0;
  }
  /* 読み込みまで（再生開始前）のポスター画像は、枠と同じ横長（989×860px）の最初のコマ。
     （一度、正方形のポスターを左寄せで表示したが、右側に余白が出たため横長で書き出し直した） */
  body #section_001 .kv-head .kv-mobile__poster {
    object-fit: cover;
    object-position: left top;
  }
  body #section_001 .kv-head .kv-mobile + .v2-cta-row {
    margin-top: 16px;
  }
}


/* --------------------------------------------------------------------------
   28. できること（SP）：説明文は全文たたむ（293回目）
   data-more="hide" の説明文は、768px以下では閉じているあいだ全文を隠し、「説明を読む」で開く。
   （冒頭3行を見せる方式は、文の途中で切れて中途半端に見えるため。小見出し・見出し・図解・チェックリストで要点は伝わる）
   ボタンの見た目・開閉の山形は「6.」の .more-btn と同じ。PCは全文表示
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  [data-more="hide"].is-clampable:not(.is-expanded) .more-text {
    display: none;
  }
  [data-more="hide"].is-clampable:not(.is-expanded) .more-btn {
    margin-top: 0;
  }
}


/* --------------------------------------------------------------------------
   29. 比較表（SP）：行をタップで説明をシート表示（293回目）
   行の下に開く方式から変更。表は記号の一覧のまま崩さず、説明は画面下からのシートで読む。
   シートは newtop-mobilefirst.js の「7.」が body の末尾に作る（.cmp-sheet）。
   中身は HTML の .cmp-sp__detail の複製。説明文は 12px（表の説明）、サービス名は 13px
   -------------------------------------------------------------------------- */
/* 表の上の案内（JSが付ける。SPのみ） */
.cmp-sp-hint {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.6;
  color: #63636B;
}
@media (min-width: 641px) {
  .cmp-sp-hint {
    display: none;
  }
}
/* 行の山形（プルダウンのアイコン）は出さない。タップできることは表の上の案内で伝える */
@media (max-width: 640px) {
  #section_004b .cmp-sp__toggle::before {
    display: none;
  }
  #section_004b .cmp-sp__toggle {
    padding: 8px 4px 8px 8px;
  }
}

/* シート本体 */
.cmp-sheet {
  position: fixed;
  inset: 0;
  z-index: 100000;
  font-family: inherit;
  color: #222222;
}
.cmp-sheet[hidden] {
  display: none;
}
html.is-cmp-sheet-open,
html.is-cmp-sheet-open body {
  overflow: hidden;
}
.cmp-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cmp-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  max-height: 85dvh;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 16px 16px 0 0;
  background: #ffffff;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.cmp-sheet.is-open .cmp-sheet__backdrop {
  opacity: 1;
}
.cmp-sheet.is-open .cmp-sheet__panel {
  transform: translateY(0);
}
/* 上端のつまみ（飾り） */
.cmp-sheet__panel::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: #E3E6EA;
}
.cmp-sheet__head {
  position: relative;
  flex: none;
  padding: 24px 60px 12px 20px;
  border-bottom: 1px solid #E3E6EA;
}
.cmp-sheet__count {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #63636B;
}
.cmp-sheet__ttl {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #222222;
}
.cmp-sheet__close {
  position: absolute;
  top: 16px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cmp-sheet__close::before,
.cmp-sheet__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  background: #222222;
  transform: rotate(45deg);
}
.cmp-sheet__close::after {
  transform: rotate(-45deg);
}
.cmp-sheet__body {
  flex: 1 1 auto;
  min-height: 0;   /* 高さはJSで全項目の最大にそろえる。画面に収まらないときは縮んでスクロール */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
}
.cmp-sheet .cmp-sp__list {
  margin: 0;
}
.cmp-sheet .cmp-sp__item {
  box-sizing: border-box;
  min-height: var(--cmp-item-min, 0);   /* 全項目・全サービスで一番高いブロックにそろえる（JSが設定） */
  padding: 12px 0;
  border-top: 1px solid #E3E6EA;
}
.cmp-sheet .cmp-sp__item:first-child {
  border-top: 0;
}
.cmp-sheet .cmp-sp__item dt {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #222222;
}
.cmp-sheet .cmp-sp__mark {
  font-size: 16px;
  line-height: 1;
}
.cmp-sheet .cmp-sp__item dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #222222;
}
/* kpiee は表の kpiee の列と同じピンクの地に（文字は「22.」と同じ濃い赤） */
.cmp-sheet .cmp-sp__item--kpiee {
  margin: 0 -20px;
  padding: 12px 20px 13px;   /* 上下の余白を他のサービス（12px＋区切り線1px）とそろえ、ブロックの高さを同じに */
  background: #fdeef1;
}
.cmp-sheet .cmp-sp__item--kpiee + .cmp-sp__item {
  border-top: 0;
}
.cmp-sheet .cmp-sp__item--kpiee dt,
.cmp-sheet .cmp-sp__item--kpiee dd {
  color: #CF1B39;
}
.cmp-sheet__nav {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid #E3E6EA;
}
.cmp-sheet__prev,
.cmp-sheet__next {
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid #222222;
  border-radius: 5px;
  background: #ffffff;
  color: #222222;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cmp-sheet__prev:disabled,
.cmp-sheet__next:disabled {
  border-color: #E3E6EA;
  color: #A3A9B3;
  cursor: default;
}
.cmp-sheet__close:focus-visible,
.cmp-sheet__prev:focus-visible,
.cmp-sheet__next:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cmp-sheet__backdrop,
  .cmp-sheet__panel {
    transition: none;
  }
}
/* 比較表（SP）は640px以下だけなので、シートも640px以下だけ */
@media (min-width: 641px) {
  .cmp-sheet {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   30. 主な機能・伴走支援（SP）：図解を大きく、パネルの高さをそろえる（293回目）
   並びは最初の状態（図解：左／見出し・説明文：右）のまま、図解の列を広げる。
     主な機能 図解：文章 ＝ 0.95：1.15 → 1.28：1、伴走支援 0.8：1 → 1.28：1（両セクションで図解の大きさをそろえる）
     （1.15：1 から、図解をさらに5%大きくするため 1.28：1 に）
   説明文は3行程度になる。パネルの高さは、主な機能・伴走支援の8枚すべてで一番高いパネルにそろえる
   （セクションをまたぐため newtop-mobilefirst.js の「9.」が高さを測って min-height を付ける）。
   途中で「図解を上・文章を下」「見出しを上に1行」も試したが、パネルが大きくなるため最初の並びに戻した。
   641〜768pxは従来どおり
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_005 .feature-item {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    align-items: center;
  }
  body #section_005 .feature-visual {
    aspect-ratio: 4 / 3;
  }
  /* 主な機能の図解をさらに約5%大きく：枠の中の画像を 95% → 100%（枠の大きさ・文章の列は変えない。
     枠の内側の余白 2.5% は残すので、画像の影が切れない） */
  body #section_005 .feature-visual img {
    width: 100%;
    height: 100%;
  }
  body #section_006 .support-card {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  }
  /* 伴走支援の図解をさらに約5%大きく。画像はすでに枠いっぱいのため、枠ごと 1.05倍に拡大する
     （transform なので枠の大きさ・文章の列・パネルの高さは変わらない。左右に約4pxずつはみ出し、
     パネルの内側の余白と文章との間が 16px → 約12px になる） */
  body #section_006 .support-visual {
    transform: scale(1.05);
    transform-origin: center center;
  }
}
/* 390px未満（iPhone SE など）は文章の列が狭くなり、伴走支援の「ダッシュボード作成」が3行に折れて
   全パネルが高くなるため、図解の列は 1.15：1 に留める */
@media (max-width: 389px) {
  body #section_005 .feature-item,
  body #section_006 .support-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   31. SPの行間：同じ文字サイズは同じ行間に（293回目）
   14px（本文）は 1.7、13px・12px（カード内の説明文・補足・リード・注記・表の説明）は 1.6。
   （一度 13px も 1.7 にしたが、1.6 に変更）
   セクションごとに個別の行間指定（1.5〜1.8）が多数あるため !important でそろえる。見出しは対象外
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 14px */
  body #section_004 .cap-body {
    line-height: 1.7 !important;
  }
  /* 13px */
  body #section_001 .kv-lead,
  body .v2-head .v2-lead,
  body #section_003 .problem-txt,
  body #section_005 .feature-txt,
  body #section_006 .support-txt,
  body .sec-cta .cta-card__txt,
  body #section_004 .cap-ttl-sub,
  body #section_004 .cap-check li,
  body #section_009 .flow-step__list li {
    line-height: 1.6 !important;
  }
}
@media (max-width: 640px) {
  /* 12px */
  body #section_004b .compare-legend,
  body #section_004b .compare-note,
  body #section_004b .cmp-sp__toggle,
  body #section_004b .cmp-sp__item dt,
  body #section_004b .cmp-sp__item dd,
  body #section_009 .flow-step__label,
  body #section_007 .case-company,
  body #section_008 .news-item .data,
  body .v2-footer a,
  body .feat-v2 .page-labels .page-label {
    line-height: 1.6 !important;
  }
}



/* --------------------------------------------------------------------------
   32. できること01（SP）：MDPの図解の下の余白を詰める（293回目）
   図解の枠（.cap-visual）が既存CSSで 1750:1172 の比率に固定され、中の図解（16:9）より縦に長く、下に空きができていた。
   さらに図解（kv-cap/mdp.html）自体も下側に透明な余白があるため、枠を図解の高さに合わせ、下の余白ぶん（約20px）を詰める
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body #section_004 .cap-list .cap-row:first-child .cap-visual {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body #section_004 .cap-list .cap-row:first-child .cap-mdp {
    margin-bottom: -20px;
  }
}


/* --------------------------------------------------------------------------
   33. よくある質問（293回目）
   ・SP：白地（.faq-block）を画面の左右の端まで確実に敷く。
     「21.」でSPの左右に5pxの余白を足したことで、全幅に広げる計算（newtop-custom.css の margin-inline）がずれ、
     左側にセクションのグレー地が見えていたため、位置の計算に頼らず白を左右に塗り足す（レイアウトは変えない）
   ・各項目の角丸（newtop-custom.css の border-radius: 6px）をなくす。
     白地の上で区切り線だけを見せているため、角丸があると区切り線の両端が丸まって見えていた
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_008 .faq-block {
    box-shadow: 0 0 0 100vmax #ffffff;
    clip-path: inset(0 -100vmax);
  }
}
body #section_008 .qa-accordion .accordion-item,
body #section_008 .qa-accordion .accordion-item .a-inner {
  border-radius: 0 !important;
}



/* --------------------------------------------------------------------------
   34. 最後のCTA（SP）：図解を大きく（293回目）
   図解を 72px → 96px に。見出しと説明文は図解の右の列に置き、説明文の幅を狭める（3行程度になる）。
   従来は説明文を padding-left で見出しの下にずらしていたが、図解の大きさに合わせて列で組む
   資料DL（cta-doc-mockup）とデモ（cta-device-mockup）の図解は、本番の140px四方の画像から、
   images/ の360px四方の画像（WebP＋PNG）に差し替え。<picture> で包むため、picture は箱を作らない指定にする（PC・SP共通）
   -------------------------------------------------------------------------- */
.sec-cta .cta-card__ico > picture {
  display: contents;
}
/* 画像の大きさは図解の枠（PC 90px／SP 96px）に合わせる（本番CSSが img の直接の親を前提にしていても崩れないよう明示） */
.sec-cta .cta-card__ico {
  display: block;
  flex: none;
}
.sec-cta .cta-card__ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 640px) {
  body .sec-cta .cta-card__unit {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: start;
    align-content: center;
  }
  body .sec-cta .cta-card__head {
    display: contents;
  }
  body .sec-cta .cta-card__ico {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 96px;
    height: 96px;
  }
  body .sec-cta .cta-card__ico img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  body .sec-cta .cta-card__ttl {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
  }
  body .sec-cta .cta-card__txt {
    grid-column: 2;
    grid-row: 2;
    margin: 6px 0 0;
    padding-left: 0;
  }
}


/* --------------------------------------------------------------------------
   35. 導入から運用までの流れ（SP）：見出しと箇条書きの間を詰める（293回目）
   見出しは左の「STEP 01」（高さ約45px）と同じ行の上下中央にあり、見出しの下に約13pxの空き＋箇条書きの margin-top 12px で
   計約25px空いていた。見出しの位置はそのままに、箇条書きを上に寄せて間を 8px にする（margin-top 12px → -5px）。
   見出しはどの画面幅でも1行（2行になると箇条書きと重なるため、見出しを長くする場合は見直す）
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_009 .flow-step__list {
    margin-top: -5px;
  }
}


/* ==========================================================================
   ここから 293回目：TOPの修正を下層ページへ展開
   （左右の余白25px「21.」、ホバーの限定、フッターなどは共通の指定がそのまま効く）
   ========================================================================== */

/* --------------------------------------------------------------------------
   36. パンくず（下層ページ共通。PC・SP）
   ページ見出しの上に「TOP ＞ ページ名」。見出しが中央寄せのページでも左寄せ。
   構造化データ（BreadcrumbList）は各ページの head に記載
   -------------------------------------------------------------------------- */
.v2-breadcrumb {
  margin: 0 0 20px;
  text-align: left;
}
.v2-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
  color: #63636B;
}
.v2-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.v2-breadcrumb__item + .v2-breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px 0 6px;
  border-top: 1px solid #63636B;
  border-right: 1px solid #63636B;
  transform: rotate(45deg);
}
.v2-breadcrumb__item a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #63636B;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .v2-breadcrumb__item a:hover {
    text-decoration: none;
  }
}
.v2-breadcrumb__item a:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 2px;
}
.v2-breadcrumb__item [aria-current="page"] {
  color: #222222;
}
@media (min-width: 769px) {
  .v2-breadcrumb {
    margin-bottom: 28px;
  }
}


/* --------------------------------------------------------------------------
   37. 下層ページ（SP）の文字サイズ・行間（TOPの「22.」「31.」と同じ基準）
   カード内の説明文 13px・行間1.6、リード・本文 14px・行間1.7
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* カード内の説明文 13px */
  body .feat-v2 .featother-txt,
  body .bp-v2 .bp-work__txt,
  body .bp-v2 .bp-worry__txt {
    font-size: 13px;
    line-height: 1.6 !important;
  }
  /* リード・本文 14px の行間を 1.7 に（ページによって 1.7〜1.9 だった） */
  body .page-lead,
  body .sec-cert .cert-txt,
  body .sec-closing .closing-txt {
    line-height: 1.7 !important;
  }
  /* 機能ページの特徴ラベル：11px（収集・統合ページ）→ 12px。11px以下は使わない
     （feature.css の .page-labels--collect .page-label より強く指定） */
  body .feat-v2 .page-labels .page-label {
    font-size: 12px;
  }
}
/* 390px未満では、1行に2つ並べると画面からはみ出すラベルがあるため（収集・統合ページの320px幅など。変更前から発生）、
   はみ出す分は次の行に回す */
@media (max-width: 389px) {
  body .feat-v2 .page-labels .page-labels__row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}


/* --------------------------------------------------------------------------
   38. 機能ページ（SP）：その他の主な機能のカード（TOPの「30.」と同じ）
   図解：文章 ＝ 1.1：1 → 1.28：1（390px未満は 1.15：1）。図解は枠いっぱい。4枚の高さをそろえる。
   図版は <picture> でWebPを出し分けるため、picture は箱を作らない
   -------------------------------------------------------------------------- */
.feat-v2 .featother-visual > picture {
  display: contents;
}
/* 説明文は改行位置を指定せず、自然に折り返す（TOPの「26.」と同じ。768px以下） */
@media (max-width: 768px) {
  body .feat-v2 .featother-txt br {
    display: none !important;
  }
}
@media (max-width: 640px) {
  body .feat-v2 .featother-grid {
    grid-auto-rows: 1fr;
  }
  body .feat-v2 .featother-card {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    align-content: center;
  }
  body .feat-v2 .featother-visual img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}
@media (max-width: 389px) {
  body .feat-v2 .featother-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   39. 伴走支援ページ（SP）：作業内容のカード
   図解：文章 ＝ 0.85：1.15 → 1：1 で図解を大きく（約125px → 約147px）、6枚の高さをそろえる。
   TOPの伴走支援（1.28：1）より説明文が長く、同じ比率では文章が6行前後になってカードが高くなりすぎるため 1：1 に
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body .bp-v2 .bp-work-grid {
    grid-auto-rows: 1fr;
  }
  /* bpaas.css の body .bp-v2 .bp-work（後から読み込まれる）より強く指定 */
  html body .bp-v2 .bp-work {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
  }
}


/* --------------------------------------------------------------------------
   40. 下層ページの文字色（PC・SP）：コントラスト比 4.5:1 以上に
   ・機能ページの特徴ラベル（ピンク地に #F32F4C、約3.5:1）と見出しの番号（白地に #F32F4C、約3.9:1）：
     TOPの比較表と同じ、同系の濃い赤 #CF1B39（ピンク地で約4.8:1、白地で約5.4:1）に
   ・伴走支援ページの「and more...」（#8F8F8F、約3.2:1）：#63636B（約6:1）に
   -------------------------------------------------------------------------- */
body .feat-v2 .page-label,
body .feat-v2 .featdetail-num {
  color: #CF1B39;
}
body .bp-v2 .bp-more {
  color: #63636B;
}


/* --------------------------------------------------------------------------
   41. TOP：FVのキャッチコピー下・各セクションの見出し下の説明文をグレーに（293回目。PC・SP）
   #222222 → #63636B（白地で約6.1:1、グレー地 #F5F8FA で約5.6:1。基準の4.5:1以上）。
   SPの文字サイズは 12px・行間1.6（「22.」「31.」）、PCの文字サイズは変更なし
   -------------------------------------------------------------------------- */
/* newtop-custom.css の #section_00x .v2-lead（color: #222222）より強く指定 */
body #section_001 .kv-lead,
body #primary .v2-head .v2-lead {
  color: #63636B;
}


/* --------------------------------------------------------------------------
   42. 他サービスとの比較（SP）：見出し「kpieeは、迅速かつ高度な〜」の kpiee ロゴを 2px 下に（293回目）
   ロゴが文字に対してわずかに上にずれて見えたため。position: relative で表示位置だけ動かす（行の高さは変わらない）
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_004b .compare-logo {
    position: relative;
    top: 2px;
  }
}


/* --------------------------------------------------------------------------
   43. SPの常駐CTA：画面下部の固定バー（293回目）
   「ヘッダーの資料ダウンロードは弱い。常に見えている必要がある」との指摘を受けて追加。768px以下のみ。
   親指が届く画面下部に、横幅いっぱい（左右25px）の「今すぐ資料をダウンロードする」（FVのボタンと同じ文言）。ボタンの見た目はFVの黒いボタンと同じ。
   出し入れはJS（newtop-mobilefirst.js の「10.」）が .is-visible を付け外しする。
   隠れている間は visibility: hidden（タブ移動・読み上げの対象外）。iPhoneの画面下端（ホームバー）の余白も確保。
   重なり順は、比較表のシート（100000）・イントロより下
   -------------------------------------------------------------------------- */
.sp-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  padding: 8px 25px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #E3E6EA;
  box-shadow: 0 -4px 16px rgba(28, 45, 80, 0.08);
  box-sizing: border-box;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .sp-sticky-cta {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.sp-sticky-cta.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.25s ease, visibility 0s linear 0s;
}
.sp-sticky-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 5px;
  background: #222222;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;   /* 293回目：700 → 400（FV・最後のCTAなど他のボタンとそろえる） */
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
/* 押した後・開いた後（訪問済み）・押している間も文字は白のまま。
   本番テーマの a:visited／a:focus／a:active の文字色（グレーなど）が、.sp-sticky-cta__btn より強い指定で上書きしていたため */
.sp-sticky-cta a.sp-sticky-cta__btn,
.sp-sticky-cta a.sp-sticky-cta__btn:link,
.sp-sticky-cta a.sp-sticky-cta__btn:visited,
.sp-sticky-cta a.sp-sticky-cta__btn:hover,
.sp-sticky-cta a.sp-sticky-cta__btn:focus,
.sp-sticky-cta a.sp-sticky-cta__btn:active {
  color: #ffffff;
  text-decoration: none;
}
.sp-sticky-cta__btn:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 3px;
}
@media (hover: hover) {
  .sp-sticky-cta__btn:hover {
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-sticky-cta,
  .sp-sticky-cta.is-visible {
    transition: none;
  }
}
@media (min-width: 769px) {
  .sp-sticky-cta {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   44. モバイルFVのキービジュアル：場面の切り替え（293回目）
   PCのように場面を選べるようにする。見た目・高さは変えず、透明な層を2つ重ねる（JSの「11.」が作る）。
   ・.kv-mobile__gesture：キービジュアル全体。左右スワイプで前後の場面へ（タップでは切り替えない）。
     touch-action: pan-y pinch-zoom で、縦スクロールと拡大はブラウザに任せる
   ・.kv-mobile__nav：下端の高さ44px。iframe 内の進行バー（下端から約9px）の位置に、場面の数だけ透明なボタン
   -------------------------------------------------------------------------- */
#section_001 .kv-mobile__gesture {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
#section_001 .kv-mobile__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  height: 44px;
}
#section_001 .kv-mobile__seg {
  flex: 1 1 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#section_001 .kv-mobile__seg:focus-visible {
  outline: 2px solid #222222;
  outline-offset: -2px;
  border-radius: 4px;
}


/* --------------------------------------------------------------------------
   45. SP：常駐CTA（「43.」）が出ている間は、ヘッダーの資料DLボタンを隠す（293回目）
   画面に見える資料DLボタンを常に1つにする（上下に同じボタンが並ばないように。どこから押されたかの計測も分かれにくい）。
   FV・最後のCTA・フッターのあたりでは常駐CTAが隠れるので、ヘッダーのボタンが戻る。
   ボタンの場所は空けたまま（visibility）なので、ヘッダーのロゴ・メニューの位置は動かない
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header .header-sp-dl {
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
  html.is-sticky-cta-visible .site-header .header-sp-dl {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .site-header .header-sp-dl,
  html.is-sticky-cta-visible .site-header .header-sp-dl {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   46. できること：番号と分類名（293回目）
   番号 01〜04 を PC 48px／SP 34px → PC 18px／SP 14px に小さくし、横に分類名（収集・集計・分析・AI接続）を並べる。
   番号の赤は、小さい文字でもコントラスト比 4.5:1 以上になるよう、#F32F4C（白地で約3.9:1）→ 同系の濃い赤 #CF1B39（約5.4:1）。
   分類名は読み上げの対象（以前は番号だけで aria-hidden だった）
   -------------------------------------------------------------------------- */
#section_004 .cap-num {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
#section_004 .cap-num__no {
  color: #CF1B39;
  font-variant-numeric: tabular-nums;
}
#section_004 .cap-num__label {
  color: #CF1B39;   /* 分類名も番号と同じ赤（293回目） */
}
@media (max-width: 640px) {
  #section_004 .cap-num {
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
  }
}


/* --------------------------------------------------------------------------
   47. できること01：見出し「「MDP (Management Data Platform)」で一元管理」の英語表記を小さい文字に（293回目）
   PC 20px／SP 16px（一度、以前の「- Management Data Platform」と同じ PC 16px／SP 13px にしたが変更）。
   色・太さは見出しのまま
   -------------------------------------------------------------------------- */
#section_004 .cap-ttl-en {
  font-size: 20px;   /* 293回目：16px → 20px */
  letter-spacing: 0;
}
@media (max-width: 768px) {
  #section_004 .cap-ttl-en {
    font-size: 16px;   /* 293回目：13px → 16px */
  }
}


/* --------------------------------------------------------------------------
   48. 主な機能（PC・901px以上）：パネルの高さを伴走支援と同程度に（293回目）
   伴走支援は画像の枠が高さ163px固定・見出しの上10px。主な機能は横幅に合わせた4:3の枠で、パネルが約35px高かった。
   画像の枠を 4:3 → 高さ193px に（画像は横幅いっぱいで表示されているため、詰まるのは上下の空きだけで画像の大きさはほぼ同じ）、
   見出しの上の余白を 16px → 10px（伴走支援と同じ）に。パネルの高さ 約374px → 約339px（伴走支援と同じ）
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  #section_005 .feature-visual {
    aspect-ratio: auto;
    height: 193px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 図解を5%縮小（枠いっぱい → 枠の95%。枠の大きさ・パネルの高さは変えず、図解は枠の中央に置く） */
  #section_005 .feature-visual img {
    width: 95%;
    height: 95%;
  }
  #section_005 .feature-body {
    margin-top: 10px;
  }
}


/* --------------------------------------------------------------------------
   49. できること：小見出し・見出しの折り返し（293回目）
   狭い画面（320px幅など）で「直接参／照」のように最後の行が1〜2文字になるのを避ける（text-wrap: pretty。
   対応していないブラウザでは従来どおりの折り返し）。指定した改行位置は変わらない
   -------------------------------------------------------------------------- */
#section_004 .cap-kicker,
#section_004 .cap-ttl {
  text-wrap: pretty;
}
/* 単語の途中で折り返さないまとまり（例：01の小見出しの「データを」が「デ／ータを」に分かれないように） */
.v2-nowrap {
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   50. できること：項目の間・「説明を読む」の上の余白（293回目）
   ■ PC（769px以上）：01と02の間を、02〜03・03〜04の間（見えている中身どうしで約86px）とそろえる。
     01には最低の高さ 573px（newtop-custom.css）があり、図解（MDP）の下に大きな空きができて、01〜02だけ約185px空いていた。
     最低の高さを外し、01の下の余白を -64px → -8px に（MDPの図解の下側の透明な余白 約10% を含めて約86px になる値。
     本番に近い条件（コンテナ1080px・2列）を再現して計測）
   ■ SP（768px以下）：「説明を読む」の上の余白を半分に。
     図解の下端から「説明を読む」の文字までの見た目の間隔が約40〜57px（説明文の上の余白24px＋ボタンの内側12px＋図解の下側の空き）
     だったのを、約22〜25pxに。説明文を閉じているあいだだけ上の余白を 24px → 6px（03は 0、04は -8px。図解の下側の空きが大きいため）。
     開いたときは従来どおり 24px
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  #section_004 .cap-list .cap-row:first-child {
    min-height: 0;
    margin-bottom: -8px;
  }
}
@media (max-width: 768px) {
  body #section_004 .cap-row .cap-body[data-more="hide"].is-clampable:not(.is-expanded) {
    margin-top: 6px;
  }
  body #section_004 .cap-row:nth-child(3) .cap-body[data-more="hide"].is-clampable:not(.is-expanded) {
    margin-top: 0;
  }
  body #section_004 .cap-row:nth-child(4) .cap-body[data-more="hide"].is-clampable:not(.is-expanded) {
    margin-top: -8px;
  }
}


/* --------------------------------------------------------------------------
   51. できること（PC・769px以上）：チェック項目どうしの間を 10px → 8px、文字サイズ 12px → 13px（293回目）
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  #section_004 .cap-check {
    gap: 8px;
  }
  /* チェック項目の文字サイズ：12px → 13px（PCのみ。SPは12px） */
  body #section_004 .cap-check li {
    font-size: 13px;
  }
}


/* --------------------------------------------------------------------------
   52. FV（SP・640px以下）：キャッチコピー「予実管理をAIでもっとシンプルに」を 30px → 32px（293回目）
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_001 .kv-ttl {
    font-size: 32px;
  }
}


/* --------------------------------------------------------------------------
   53. 経営管理部の課題（SP・640px以下）：アコーディオンをやめ、見出しと説明文を常に表示（293回目）
   （開閉の処理は newtop-mobilefirst.js の「1.」でトップを対象外に。「3.」〜「9.」のアコーディオン用の指定は .is-accordion が付かないので効かない）
   チェックのアイコン（背景画像）は、パネルの上下中央ではなく見出し（2行）の横にそろえる。見出しの行間を 1.4 に固定し、
   アイコン（22px）の中心を見出しの中央（上から 20px＋見出しの高さの半分 約20px）に合わせる
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body #section_003 .problem-card {
    background-position: left 16px top 29px;
  }
  body #section_003 .problem-card .problem-ttl {
    line-height: 1.4;
  }
}


/* --------------------------------------------------------------------------
   54. FV（SP）のキービジュアル：下の操作行（293回目・案A）
   「進行バーのタップ・スワイプは分かりにくい」との指摘を受けて追加。JSの「11.」がキービジュアルの直後に作る。
   キービジュアル内の見出し（小見出し・①〜）は情報が重なるため出さず（iframe の ?nohead）、この行に2行でまとめる。
     1行目：2/5（赤・太字）＋場面名（予実管理｜ドリルダウン など。12px・グレー）
     2行目：手順（数字から取引明細を確認 など。14px・太字）。手順が進むと下からふわっと書き換わる（番号①②は293回目に外した）
   左右の矢印（押せる範囲 44px・丸い枠 36px）で前後の場面へ。進行バーのタップ・横スワイプも引き続き使える。
   場面の一覧が届くまでは高さだけ確保して見えない状態（.is-ready で表示）
   -------------------------------------------------------------------------- */
#section_001 .kv-mobile-ctrl {
  display: none;
}
@media (max-width: 768px) {
  #section_001 .kv-mobile-ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px;
    margin: 10px 0 0;
    visibility: hidden;
  }
  #section_001 .kv-mobile-ctrl.is-ready {
    visibility: visible;
  }
  #section_001 .kv-mobile-ctrl__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }
  #section_001 .kv-mobile-ctrl__meta,
  #section_001 .kv-mobile-ctrl__step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
  }
  #section_001 .kv-mobile-ctrl__meta {
    font-size: 12px;
    line-height: 1.6;
    color: #63636B;
  }
  #section_001 .kv-mobile-ctrl__count {
    flex: none;
    color: #CF1B39;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  #section_001 .kv-mobile-ctrl__name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #section_001 .kv-mobile-ctrl__step {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #222222;
  }
  #section_001 .kv-mobile-ctrl:not(.has-step) .kv-mobile-ctrl__step {
    display: none;
  }
  /* 手順が変わったとき、下からふわっと入れ替える（番号の代わりに、進んだことを動きで伝える） */
  #section_001 .kv-mobile-ctrl__step.is-changing .kv-mobile-ctrl__steptxt {
    animation: kvStepIn 0.35s ease-out;
  }
  @keyframes kvStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  #section_001 .kv-mobile-ctrl__no {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #CF1B39;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
  #section_001 .kv-mobile-ctrl__steptxt {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #section_001 .kv-mobile-ctrl__btn {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #section_001 .kv-mobile-ctrl__btn::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 36px;
    height: 36px;
    border: 1px solid #C7CCD4;
    border-radius: 50%;
    background: #ffffff;
    box-sizing: border-box;
  }
  #section_001 .kv-mobile-ctrl__btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #222222;
    border-right: 2px solid #222222;
  }
  #section_001 .kv-mobile-ctrl__btn--prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
  }
  #section_001 .kv-mobile-ctrl__btn--next::after {
    transform: translate(-70%, -50%) rotate(45deg);
  }
  #section_001 .kv-mobile-ctrl__btn:active::before {
    background: #F5F6F8;
  }
  #section_001 .kv-mobile-ctrl__btn:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 0;
    border-radius: 50%;
  }
  body #section_001 .kv-head .kv-mobile-ctrl + .v2-cta-row {
    margin-top: 16px;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #section_001 .kv-mobile-ctrl__step.is-changing .kv-mobile-ctrl__steptxt {
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   55. FV（SP）：進行バーをなくして高さを詰める（293回目）
   進行バーは、下の操作行（2/5・矢印）で場面の位置が分かるため不要に（iframe の ?nobar）。
   キービジュアルの舞台の下端の帯（進行バー用。舞台の高さの約7.4%）を切り取る：
   枠の比率を 92:80 → 92:74.07 にし、iframe は枠の 108%（1080/1000）の高さで上寄せ、はみ出した下端を隠す
   （中身の大きさは変わらない。画面幅393pxで高さ 約298px → 約276px）。ポスター画像も上寄せで同じ範囲を表示。
   あわせて、FVの最初のCTAが画面に収まるよう、キービジュアル・操作行・CTAの間を少し詰める
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body #section_001 .kv-head .kv-mobile {
    aspect-ratio: 92 / 74.07;
    margin-top: 4px;   /* 説明文との間 12px → 10px → 4px */
  }
  /* キャッチコピーと説明文の間 約21px → 12px */
  body #section_001 .kv-head .kv-ttl {
    margin-bottom: 12px;
  }
  body #section_001 .kv-head .kv-lead {
    margin-top: 0;
  }
  body #section_001 .kv-head .kv-mobile .kv-mobile__frame {
    height: 108%;
    bottom: auto;
  }
  body #section_001 .kv-head .kv-mobile__poster {
    object-fit: cover;
    object-position: left top;
  }
  #section_001 .kv-mobile__nav {
    display: none;
  }
  #section_001 .kv-mobile-ctrl {
    margin-top: 4px;
  }
  body #section_001 .kv-head .kv-mobile-ctrl + .v2-cta-row {
    margin-top: 12px;
  }
}


/* --------------------------------------------------------------------------
   56. 導入事例（293回目）
   ■ SP：社名 12px → 13px、見出し 14px → 16px
   ■ 前後のボタン：デザインは従来どおり。最初の事例では「前」、最後の事例では「次」を非活性（薄く）に（JS の「13.」）
   ■ SP：次のカードの端を覗かせる横スクロール（下記）
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  html body #section_007 .case-company {
    font-size: 13px;
  }
  html body #section_007 .case-ttl {
    font-size: 16px;
  }
}
/* 前後のボタン：SPでは出さない（293回目。横スクロールと次のカードの覗きで送れるため）。
   デザインは従来どおり（一度黒にしたが戻した）。非活性のときだけ薄く */
@media (max-width: 640px) {
  html body #section_007 .case-carousel__arrow {
    display: none !important;
  }
}
html body #section_007 .case-carousel__arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}

/* ■ SP（640px以下）：次のカードの端を覗かせる横スクロール（.is-peek は JS の「13.」が付ける）
   本番テーマの「1枚ずつ重ねて切り替え」の指定を上書きし、カードを横に並べる。カードの幅は 86%、間 12px。
   右端は画面の端まではみ出させ（-25px）、次のカードが約36px＋余白分だけ見える。
   以前は枠（.case-carousel__viewport）に付いていた影・白地を、各カードに付け替える */
@media (max-width: 640px) {
  html body #section_007 .case-carousel.is-peek .case-carousel__stage {
    position: relative;
  }
  html body #section_007 .case-carousel.is-peek .case-carousel__viewport {
    display: flex !important;
    gap: 12px;
    height: auto !important;
    margin: -8px -25px -24px 0;
    padding: 8px 25px 24px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body #section_007 .case-carousel.is-peek .case-carousel__viewport::-webkit-scrollbar {
    display: none;
  }
  html body #section_007 .case-carousel.is-peek .case-slide {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 86% !important;
    width: 86% !important;
    max-width: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
    scroll-snap-align: start;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 20px -8px rgba(20, 30, 60, 0.16), 0 2px 6px rgba(20, 30, 60, 0.06);
  }
}


/* --------------------------------------------------------------------------
   57. お知らせ（293回目）：FAQのセクションの中から、企業ロゴの下の独立したセクション（#section_news）へ移動。PC・SP共通。
   移動したことで本番テーマ側の指定（FAQのセクション内でだけ効く並び・区切り線など）が外れて崩れたため、
   現行サイトの並びをこちらで明示的に再現する：
     PC：日付（左・幅112px）＋タイトル（右）の横並び、上下の余白 26px、項目の下に区切り線（#E3E6EA）
     SP：日付の下にタイトルの縦並び、上下の余白 16px、項目の下に区切り線
   背景は白。リンク先が未定のお知らせ（.is-nolink）は押せない
   -------------------------------------------------------------------------- */
html body #section_news {
  background: #ffffff;
}
html body #section_news .sec-news {
  padding: 96px 0;
}
html body #section_news .v2-ttl {
  margin: 0;
  color: #222222;
}
html body #section_news .news-contents {
  max-width: 844px;
  margin: 48px auto 0;
}
html body #section_news .news-contents .accordion-container {
  margin: 0;
  padding: 0;
  list-style: none;
}
html body #section_news .news-contents .news-item {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #E3E6EA;
  border-radius: 0;
  box-shadow: none;
}
html body #section_news .news-contents .news-item::before,
html body #section_news .news-contents .news-item::after {
  content: none;
}
html body #section_news .news-contents .news-item .a-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 26px 32px;
  margin: 0;
  background: transparent;
}
html body #section_news .news-contents .news-item .data {
  flex: 0 0 112px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #222222;
  font-variant-numeric: tabular-nums;
}
html body #section_news .news-contents .news-item a {
  flex: 1 1 auto;
  min-width: 0;
  color: #222222;
  text-decoration: none;
}
html body #section_news .news-contents .news-item .news-title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #222222;
}
@media (hover: hover) {
  html body #section_news .news-contents .news-item a:not(.is-nolink):hover .news-title {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
html body #section_news .news-item a.is-nolink {
  pointer-events: none;
  cursor: default;
}
@media (max-width: 640px) {
  html body #section_news .sec-news {
    padding: 64px 0;
  }
  html body #section_news .news-contents {
    margin: 16px auto 0;
  }
  html body #section_news .news-contents .news-item .a-inner {
    display: block;
    padding: 16px 0;
  }
  html body #section_news .news-contents .news-item .data {
    margin: 0 0 4px;
    font-size: 12px;
    color: #63636B;
  }
  html body #section_news .news-contents .news-item .news-title {
    font-size: 14px;
    line-height: 1.7;
  }
}


/* --------------------------------------------------------------------------
   58. 伴走支援ページ（SP・768px以下）：「BPaaSで全て解決」のパネルの説明文は改行位置を指定せず、自然に折り返す（293回目）
   （HTMLの <br> はPC用として残す。「対応可能な作業内容を一部ご紹介！」の見出しのSP用の改行は HTML から削除）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* bpaas.css（後から読み込まれる）の body .bp-v2 .bp-solve__txt br { display: inline } より強く指定 */
  html body .bp-v2 .bp-solve__txt br {
    display: none;
  }
  /* FVの説明文：PC用の改行（「実現する、」の後）はSPでは出さない（「22.」付近の説明文の改行の指定と同じ考え方） */
  html body #section_001 .kv-lead br.v2-only-pc {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   59. できること05「セキュリティ」（294回目）
   - 課題4「セキュリティ面が不安で、AIを活用できない」への回答として、04（MCP）の後ろに追加
   - 図解は311回目に kv-cap/data-protection.html（iframe・.cap-dp）へ差し替え
   - 新規の部品なので小さい画面を基準に書き、min-width で広げる（方針書⑤-10）
   -------------------------------------------------------------------------- */

/* --- セキュリティページへのボタン --- */
#section_004 .cap-row .cap-more {
  margin-top: 20px;
}
#section_004 .cap-row .cap-more .v2-btn {
  min-height: 44px; /* タップ領域（方針書⑤-9） */
}
@media (max-width: 640px) {
  /* SPは .cap-txt が分解され 見出し→図解→説明文→チェックリスト の順に並ぶので、ボタンはその次 */
  #section_004 .cap-row .cap-more {
    grid-row: 5;
    margin-top: 16px;
    text-align: center;
  }
}

/* --- 図解（311回目。320回目に kv-cap/security-layers.html へ差し替え）：iframe で表示（01の .cap-mdp と同じ作り）
   図解の左右に余白が多いため、01と同じく列幅の120%（最大で画面幅）に広げて中央に置く。背景は透明 --- */
#section_004 .cap-dp {
  position: relative;
  /* 321回目：表示を5%小さく（列幅の120% → 114%、最大で画面幅 → 画面幅の95%） */
  width: min(114%, 95vw);
  margin-left: calc((100% - min(114%, 95vw)) / 2);
  aspect-ratio: 1340 / 820;  /* 321回目：図解 v12 の表示範囲（viewBox 0 40 1340 820）に合わせる */
}
#section_004 .cap-dp__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  pointer-events: none;
}

@media (min-width: 769px) {
  /* 1・3項目目と同じく 文章（左）＋図解（右）。列比と余白は1項目目に合わせる */
  #section_004 .cap-list .cap-row--security {
    grid-template-columns: minmax(0, 1fr) min(522px, 50%);
    -webkit-column-gap: 100px;
    column-gap: 100px;
    margin-top: 40px;
  }
  #section_004 .cap-row .cap-more {
    margin-top: 28px;
  }
  /* 320回目：図解（security-layers）は絵が枠の端近くまであるため、枠を左右均等に広げると右端が本文の幅からはみ出す。
     PCでは枠の右端を列の右端にそろえ、広げた分は左（文章との間の余白 100px）にだけ伸ばす */
  #section_004 .cap-row--security .cap-dp {
    margin-left: calc(100% - min(114%, 95vw));
  }
}


/* --------------------------------------------------------------------------
   60. 機能ページ（SP・768px以下）：説明文の下のチェック項目をTOPの「できること」にそろえる（295回目）
   - 文字 14px → 13px、行間 1.7 → 1.6（TOPの「22.」「31.」と同じ）
   - 項目どうしの間：TOPと同じく 641〜768px は10px、640px以下は6px（従来は上下4pxずつ＝8px）
   - チェックのアイコン（16px）は1行目の文字の高さの中央に合わせる
   - feature-figure.css が後から読み込まれるので、詳細度を上げて上書きする
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html body .feat-v2 .featdetail-points li {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
    line-height: 1.6;
  }
  html body .feat-v2 .featdetail-points li::before {
    top: 7.4px; /* 5px ＋（行の高さ20.8px − アイコン16px）÷ 2 */
  }
}
@media (max-width: 640px) {
  html body .feat-v2 .featdetail-points li {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  html body .feat-v2 .featdetail-points li::before {
    top: 5.4px; /* 3px ＋ 2.4px */
  }
}


/* --------------------------------------------------------------------------
   61. 伴走支援ページ（SP・768px以下）：お悩みパネル・解決パネル（295回目）
   - お悩みパネル：PCと同じく 見出し／線／説明文 の構成に。線の上下はSPの文字の大きさに合わせて12px（PCは16px）
     （newtop-custom.css の「線は非表示」と「9.」の説明文の上8pxを上書き）
   - 解決パネル：文字の太さをお悩みの見出しと同じ700に、パネル内の上下の余白を14px → 22px
     （bpaas.css の「body .bp-v2 …」が後から読み込まれるので、詳細度を上げて上書きする）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html body .bp-v2 .bp-worry__ttl {
    padding-bottom: 12px;
    border-bottom: 1px solid #d9dde3;
  }
  html body .bp-v2 .bp-worry__txt {
    margin-top: 12px;
  }
  html body .bp-v2 .bp-solve {
    padding-top: 22px;
    padding-bottom: 22px;
  }
  html body .bp-v2 .bp-solve__txt {
    font-weight: 700;
  }
}


/* --------------------------------------------------------------------------
   62. 機能ページ・伴走支援ページ：見出し下の説明文（.page-lead）の色をTOPのリードと同じ #63636B に（298回目。PC・SP）
   TOPの「41.」と同じ色。白地で約6.1:1（基準の4.5:1以上）。文字サイズ・揃えは変えない
   （セキュリティページは security.css で同じ色を指定）
   -------------------------------------------------------------------------- */
body #primary.feat-v2 .page-lead,
body #primary.bp-v2 .page-lead {
  color: #63636B;
}


/* --------------------------------------------------------------------------
   63. TOP（SP・768px以下）：文字サイズ・文字色・FVの余白（299回目）
   ■ FV
     - 説明文：13px・グレー → 14px・黒（#222222）、行間 1.7（「31.」の14pxの基準）
     - キービジュアルの上（説明文との間）：4px → 14px（10px追加）
     - キービジュアルの下のテキスト（操作行）の上：4px → 10px
     - 操作行の「1/5」などの数字は出さない（場面名・手順は残す）
     - CTA（資料ダウンロード）の上：12px → 16px
   ■ 各セクションの見出し下の説明文：13px・グレー → 14px・黒（「22.」「41.」を上書き）
   ■ パネル内：見出し 14px → 16px、説明文 13px → 14px
     （経営管理部の課題・主な機能・伴走支援・導入から運用までの流れ）
   ■ 導入事例：成果文（.case-ttl）の強制改行をなくし、自然に折り返す
   ■ 最後のCTA：パネル内の説明文 13px → 14px
   ■ できること：チェック項目 13px → 14px
   既存の指定に !important があるもの（リード・課題の説明文、「31.」の行間 1.6）は、同じく !important で上書き。
   14px になった文字の行間は「31.」の基準どおり 1.7
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* FV */
  html body #section_001 .kv-head .kv-lead {
    color: #222222;
    font-size: 14px;
    line-height: 1.7 !important;
  }
  html body #section_001 .kv-head .kv-mobile {
    margin-top: 14px;
  }
  html body #section_001 .kv-mobile-ctrl {
    margin-top: 10px;
  }
  html body #section_001 .kv-mobile-ctrl__count {
    display: none;
  }
  html body #section_001 .kv-head .kv-mobile-ctrl + .v2-cta-row {
    margin-top: 16px;
  }

  /* 各セクションの見出し下の説明文 */
  html body #primary .v2-head .v2-lead {
    color: #222222;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* パネル内の見出し 16px */
  html body #section_003 .problem-card .problem-ttl,
  html body #section_005 .feature-ttl,
  html body #section_006 .support-ttl,
  html body #section_009 .flow-step__ttl {
    font-size: 16px;
  }
  /* パネル内の説明文 14px */
  html body #section_003 .problem-card .problem-txt,
  html body #section_003 .problem-txt {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  html body #section_005 .feature-txt,
  html body #section_006 .support-txt,
  html body #section_009 .flow-step__list li,
  html body .sec-cta .cta-card__txt {
    font-size: 14px;
    line-height: 1.7 !important;
  }

  /* できること：チェック項目 */
  html body #section_004 .cap-check li {
    font-size: 14px;
    line-height: 1.7 !important;
  }
}
@media (max-width: 640px) {
  /* 課題：チェックのアイコン（22px）を見出し（16px・行間1.4・2行）の中央に合わせ直す（「53.」は14px用の29px）
     20px ＋ 見出しの高さの半分 約22px − 11px ≒ 31px */
  html body #section_003 .problem-card {
    background-position: left 16px top 31px;
  }
  /* 伴走支援：見出し16pxで「ダッシュボード作成」の「成」だけが次の行に落ちるため、「作成」をひとまとまりにする */
  html body #section_006 .support-ttl__nw {
    white-space: nowrap;
  }
  /* 導入事例：成果文の強制改行をなくす */
  html body #section_007 .case-ttl br {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   64. 機能ページ・セキュリティページ：見出し下のラベルを押すと該当箇所へスクロール（299回目）
   機能ページのラベルは <a href="#detail-01"> に変更し、各機能（.featdetail-item）に id を付けた。
   見た目はラベルのまま（下線なし）。移動先の見出しが固定ヘッダーに隠れないよう scroll-margin-top を取る（要実機確認）。
   スクロールはなめらかに（動きを減らす設定の端末では瞬時に移動）
   -------------------------------------------------------------------------- */
body .feat-v2 a.page-label {
  text-decoration: none;
}
@media (hover: hover) {
  body .feat-v2 a.page-label:hover {
    background: #FAD6DC;
    color: #CF1B39;
  }
}
body .feat-v2 a.page-label:focus-visible {
  outline: 2px solid #CF1B39;
  outline-offset: 2px;
}
body .feat-v2 .featdetail-item {
  scroll-margin-top: 64px;
}
@media (min-width: 769px) {
  body .feat-v2 .featdetail-item {
    scroll-margin-top: 96px;
  }
}
/* 317回目：scroll-behavior: smooth は外した（テーマ側のページ内リンク処理と重なって動きがもたつくため）。
   スクロールは newtop-mobilefirst.js「14.」で行う */
/* 移動先（tabindex="-1" でフォーカスを受ける）に枠を出さない */
body .feat-v2 .featdetail-item:focus,
body .sec-v2 .sd-sec:focus {
  outline: none;
}


/* --------------------------------------------------------------------------
   65. 見出し下の説明文を黒に（PC・SP）、機能ページ・伴走支援ページ（SP）のパネルの文字サイズ（300回目）
   ■ 見出し下の説明文：#63636B → #222222（PC・SP共通）
     TOPのFVの説明文・各セクションの説明文（「41.」を上書き）、機能ページ・伴走支援ページの .page-lead（「62.」を上書き）
   ■ 機能ページ（SP・768px以下）
     - チェック項目：13px → 14px・行間 1.7（TOPの「できること」と同じ。項目どうしの間は「60.」のまま 640px以下 6px／641〜768px 10px）
     - その他の主な機能のパネル：見出し 14px → 16px、説明文 13px → 14px
   ■ 伴走支援ページ（SP・768px以下）
     - お悩みパネル：見出し 14px → 16px、説明文 13px → 14px
     - BPaaSで全て解決のパネル：文字 14px → 16px（太さはお悩みの見出しと同じ700のまま）、アイコンと文字の間 18px → 12px
     - 作業内容のパネル：見出し 14px → 16px、説明文 13px → 14px
   14pxになった文字の行間は 1.7（「31.」の基準）。既存の個別指定・!important を上書きするため !important
   -------------------------------------------------------------------------- */
html body #section_001 .kv-head .kv-lead,
html body #primary .v2-head .v2-lead,
html body #primary.feat-v2 .page-lead,
html body #primary.bp-v2 .page-lead {
  color: #222222;
}

@media (max-width: 768px) {
  /* 機能ページ：チェック項目 */
  html body .feat-v2 .featdetail-points li {
    font-size: 14px;
    line-height: 1.7 !important;
  }
  html body .feat-v2 .featdetail-points li::before {
    top: 8.9px; /* 5px ＋（行の高さ23.8px − アイコン16px）÷ 2 */
  }
  /* 機能ページ：その他の主な機能 */
  html body .feat-v2 .featother-name {
    font-size: 16px;
  }
  html body .feat-v2 .featother-txt {
    font-size: 14px;
    line-height: 1.7 !important;
  }

  /* 伴走支援：お悩み */
  html body .bp-v2 .bp-worry__ttl {
    font-size: 16px;
  }
  html body .bp-v2 .bp-worry__txt {
    font-size: 14px;
    line-height: 1.7 !important;
  }
  /* 伴走支援：BPaaSで全て解決 */
  html body .bp-v2 .bp-solve {
    -webkit-column-gap: 12px;
    column-gap: 12px;
  }
  html body .bp-v2 .bp-solve__txt {
    font-size: 16px;
    font-weight: 700;
  }
  /* 伴走支援：作業内容 */
  html body .bp-v2 .bp-work__ttl {
    font-size: 16px;
  }
  html body .bp-v2 .bp-work__txt {
    font-size: 14px;
    line-height: 1.7 !important;
  }
}
@media (max-width: 640px) {
  html body .feat-v2 .featdetail-points li::before {
    top: 6.9px; /* 3px ＋ 3.9px */
  }
}

/* 伴走支援：作業内容の見出し（16px）が語の途中で折り返さないよう、語のまとまり（.bp-nw）ごとに折り返す（300回目）
   例：「KPI見直し/改善支／援」→「KPI見直し/／改善支援」、「マスタのメンテナ／ンス」→「マスタの／メンテナンス」 */
html body .bp-v2 .bp-work__ttl .bp-nw {
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   66. TOP（PC・769px以上）：説明文の文字サイズ、FVのキービジュアルの上の余白（301回目）
   - FVの説明文：16px
   - キービジュアル（.kv-showcase）の上：20px → 34px
     ※ キービジュアルの大きさは newtop-mobilefirst.js の「6.」が画面の高さに収まるよう計算するため、
       画面の高さが足りないときは、余白を広げたぶん（最大14px）キービジュアルが少し小さくなる
   - 各セクションの見出し下の説明文：16px
   - パネル内の説明文 14px → 16px（経営管理部の課題・主な機能・伴走支援・導入から運用までの流れ）
   - できること：各項目の説明文 14px → 16px、チェック項目 13px → 16px（「51.」を上書き）
   行間：説明文は 1.7、チェック項目は 1.6
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  html body #section_001 .kv-head .kv-lead {
    font-size: 16px;
    line-height: 1.7;
  }
  html body #section_001 .kv-showcase {
    margin-top: 34px;
  }
  html body #primary .v2-head .v2-lead {
    font-size: 16px !important;
    line-height: 1.7;
  }
  html body #section_003 .problem-card .problem-txt,
  html body #section_003 .problem-txt {
    font-size: 16px !important;
    line-height: 1.7;
  }
  html body #section_005 .feature-txt,
  html body #section_006 .support-txt,
  html body #section_009 .flow-step__list li {
    font-size: 16px;
    line-height: 1.7;
  }
  html body #section_004 .cap-body {
    font-size: 16px;
    line-height: 1.7;
  }
  html body #section_004 .cap-check li {
    font-size: 16px;
    line-height: 1.6;
  }
}


/* --------------------------------------------------------------------------
   67. TOP（SP）：FVのCTAの上、できることのチェック項目の並び、主な機能・導入の流れのパネルの高さ（303回目）
   ■ FV：CTA（資料ダウンロード）の上 16px → 20px（「63.」を上書き）
   ■ できること：チェック項目が2行になったとき
     チェックボックスは1行目の高さの中央に置き、2行目は1行目の文字の開始位置にそろえる。
     本番テーマの並べ方（flex・上下中央）に左右されないよう、SPでは文章の左に「チェックボックス＋間」の余白を取り、
     チェックボックスを1行目の位置に重ねる（文章の途中に <span>・<br> があっても文章は1つのまとまりのまま）。
     チェックボックスと文章の間は10px（従来どおり）。チェックボックスの大きさは従来どおり（640px以下20px、641〜768px 22px）。
     「外部のAIツール連携」のロゴの段も文章の列にそろえる
   ■ 主な機能（640px以下）：パネルの上下左右の余白を16pxに。高さは主な機能の中だけでそろえる（JSの「9.」）
   ■ 導入から運用までの流れ（768px以下）：各パネルの高さを一番高いパネルにそろえる（行の高さを等分）。中身は上寄せ
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html body #section_001 .kv-head .kv-mobile-ctrl + .v2-cta-row {
    margin-top: 20px;
  }

  html body #section_004 .cap-check li {
    display: block;
    position: relative;
    padding-left: 32px;   /* チェックボックス22px ＋ 間10px（641〜768px） */
  }
  html body #section_004 .cap-check li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.9px;           /* 641〜768px：（行の高さ23.8px − 22px）÷ 2 */
    left: 0;
    margin: 0;
    transform: none;
  }
  html body #section_004 .cap-check li.cap-check--ai .ai-logos {
    display: flex;
    flex: none;
    margin-left: 0;
  }

  /* 05「プライバシーマーク」を途中で折り返さない（320px幅などで「マー／ク」に割れるのを防ぐ） */
  html body #section_004 .cap-check__nw {
    white-space: nowrap;
  }

  html body #section_009 .flow-list {
    grid-auto-rows: 1fr;
  }
  html body #section_009 .flow-step {
    align-content: start;
  }
}
@media (max-width: 640px) {
  html body #section_004 .cap-check li {
    padding-left: 30px;   /* チェックボックス20px ＋ 間10px */
  }
  html body #section_004 .cap-check li::before {
    top: 1.9px;           /* （行の高さ23.8px − 20px）÷ 2 */
  }
  html body #section_005 .feature-item {
    padding: 16px;
  }
}


/* --------------------------------------------------------------------------
   68. TOP・機能ページ：見出しまわりの文字サイズ、ヘッダーの資料DLボタン、キービジュアルの下（304回目）
   ■ SP（768px以下）
     - お知らせの見出し：24px → 22px
     - ヘッダーの資料DLボタンを出さない（全ページ。資料DLは画面下の常駐CTA・FV・最後のCTAから）
       「45.」の出し入れの指定は残るが、常に非表示になる
   ■ PC（769px以上）
     - TOP：キービジュアルの下端から企業ロゴまでを40px
     - 機能ページ：各機能の「01 XXX」18px → 20px、見出し（.featdetail-lead）28px → 32px、
       説明文 16px、チェック項目 14px → 16px（チェックのアイコンを1行目の中央に合わせ直す）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html body #section_news .v2-ttl {
    font-size: 22px;
  }
  /* 機能ページ：見出しのPC用の改行（予算策定02など）をSPでは出さない */
  html body .feat-v2 .featdetail-lead br.v2-only-pc {
    display: none;
  }
  /* newtop-custom.css の「display: flex !important」（1024px以下で表示）を上書き */
  html body #header .cta-btns.header-sp-dl {
    display: none !important;
  }
}
@media (min-width: 769px) {
  html body #section_001 {
    padding-bottom: 0;
  }
  html body #section_001 .kv-showcase {
    margin-bottom: 0;
  }
  html body #section_002 {
    padding-top: 40px;
  }

  html body .feat-v2 .featdetail-item .featdetail-ttl,
  html body .feat-v2 .featdetail-item .featdetail-num {
    font-size: 20px;
  }
  html body .feat-v2 .featdetail-lead {
    font-size: 32px;
  }
  html body .feat-v2 .featdetail-desc {
    font-size: 16px;
  }
  html body .feat-v2 .featdetail-points li {
    font-size: 16px;
    line-height: 1.7;
  }
  html body .feat-v2 .featdetail-points li::before {
    top: 9.6px; /* 4px ＋（行の高さ27.2px − アイコン16px）÷ 2 */
  }
}


/* --------------------------------------------------------------------------
   69. PC（769px以上）：パンくずの文字 12px → 14px（下層ページ共通）、できること05のチェック項目（307回目）
   - できること05の1つ目のチェック項目は、文章全体を .cap-check__txt で1つに囲んだ。
     PCのチェック項目は本番テーマで横並び（flex）のため、文章の途中の <span>・<br>（SP用の改行）を境に
     部品が分かれて隙間が空いていた。囲むことでPCは1行のまま隙間なし（SP用の改行はPCでは出ない）
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  html body .v2-breadcrumb__list {
    font-size: 14px;
  }
  html body #section_004 .cap-check br.v2-only-sp {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   70. サイト全体：チェックボックス・チェックアイコン・赤い丸などを、番号（「01」など）と同じ赤 #CF1B39 に統一（326回目）
   従来はブランドの赤 #F32F4C で、番号（#CF1B39。ピンク地でも読める濃い赤）と色が違っていた。
   対象：
   - TOP：できることのチェックボックス、導入から運用までの流れの項目の赤い丸、比較表のkpiee列の◎○と文字（PC。SPはすでに #CF1B39）
   - 機能ページ：説明文の下のチェックアイコン、見出し上の「・」
   - セキュリティページ：認証の見出し・項目の見出しの赤い「・」、目次で選んでいる項目の赤い線
   対象外：ボタン・ホバー・フォーカス枠などの操作の色、機能ページの図解（画面の再現）の中の赤、TOP 05 のアニメーション
   後から読み込まれる feature-figure.css／security.css 等に勝つよう、html body を付けて詳細度を上げている
   -------------------------------------------------------------------------- */
html body #section_004 .cap-check li::before,
html body #section_009 .flow-step__list li::before,
html body .feat-v2 .featdetail-points li::before,
html body .sec-v2 .sd-row dt::before,
html body .sec-v2 .sc-certblock .cert-ttl::before {
  background: #CF1B39;
}
html body #section_004b .cmp-kpiee .cmp-mark,
html body #section_004b .cmp-kpiee .cmp-txt,
html body .feat-v2 .page-kicker .dot {
  color: #CF1B39;
}
html body .sec-v2 .sd-toc a[aria-current="true"] {
  border-left-color: #CF1B39;
}


/* --------------------------------------------------------------------------
   71. できること02・05の図解を iframe に差し替え（333回目）
   ■ 02（集計）：kv-cap/dashboard.html
     ダッシュボードの枠（860×592）が列幅いっぱいになるよう、iframe（論理サイズ 884×616＝枠＋左上の影の余白 24px）を
     列幅の 884/860 倍にし、左上へ 24/860 ずらす（従来の直接書き込み版と同じ見え方。影は列の外へはみ出す）
   ■ 05（セキュリティ）：kv-cap/security-dome.html
     枠の縦横比を絵に合わせて 1340:820 → 1448:1086（約4:3）。幅・配置（列幅の114%・PCは右端そろえ）は従来どおり
   -------------------------------------------------------------------------- */
#section_004 .cap-dg {
  position: relative;
  width: calc(100% * 884 / 860);
  margin-top: calc(-100% * 24 / 860);
  margin-left: calc(-100% * 24 / 860);
  aspect-ratio: 884 / 616;
}
#section_004 .cap-dg__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  pointer-events: none;
}
html body #section_004 .cap-row--security .cap-dp {
  aspect-ratio: 1340 / 860;   /* 338回目：図解を security-layers v20 に戻したため（viewBox 0 30 1340 860）。333回目のドームは 1448:1086 */
}


/* --------------------------------------------------------------------------
   72. できること05：PC と SP で図解を分ける（340回目）
   - SP（768px以下）：kv-cap/security-layers-sp.html（縦長。viewBox 0 50 750 1480）
   - PC（769px以上）：kv-cap/security-layers.html（横長。viewBox 0 30 1340 860）
   表示していない方の iframe は display:none（ブラウザによっては読み込まれるが、画面に入らないため再生されない。各約25KB）
   幅・配置：PC は従来どおり（列幅の114%・右端そろえ）。SP は列幅の114%・画面幅の95%・480px のうち最も小さい幅で中央
   -------------------------------------------------------------------------- */
html body #section_004 .cap-row--security .cap-dp--sp {
  aspect-ratio: 750 / 1480;
  /* 縦長のため、タブレット幅で大きくなりすぎないよう最大 480px（元ファイルも 480px で止める作り）。中央 */
  width: min(114%, 95vw, 480px);
  margin-left: calc((100% - min(114%, 95vw, 480px)) / 2);
}
@media (max-width: 768px) {
  html body #section_004 .cap-row--security .cap-dp--pc {
    display: none;
  }
}
@media (min-width: 769px) {
  html body #section_004 .cap-row--security .cap-dp--sp {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   73. 最終CTA：資料ダウンロードの画像を 10% 大きく（349回目）
   枠（PC 90px／SP 96px の正方形）は変えず（見出し・説明文の開始位置を3枚のカードでそろえるため）、
   画像だけを枠の幅の 110% にして左右へ 5% ずつはみ出させる（PC 約90×49 → 約99×54px）
   -------------------------------------------------------------------------- */
html body .sec-cta .cta-card__ico--doc img {
  width: 110%;
  max-width: none;
  margin-left: -5%;
}