@charset "UTF-8";

/* =====================================================================
   クラウドPBX（トビラフォン Cloud）LP  ※トライアル用ベース
   - J:COM BUSINESS デザインシステム（design_system）の方向性に準拠
     色：navy #0c0b86 / deep-navy #0a308f / red #e93817 / bg-biz #ebefff
         marker #ced9ff / text #333 / sub #939393 / divider #e2e2e2
     見出し：.section h2 相当（中央・赤バー::after）
     CTA：btn-primary 相当（赤pill・shadow）
     パネル：board-biz(#ebefff) / navyヘッダー＋三角(biz-custom)
     フォント：Noto Sans JP のみ（400 / 700）
   - 画像・アイコンは未制作のためプレースホルダー(.cpbx-ph)で配置
   ===================================================================== */

.cpbx {
  --navy: #0c0b86;
  --navy-deep: #0a308f;
  --red: #e93817;
  --red-hover: #fa7268;
  --red-soft: #ffe8e1;
  --biz: #ebefff;
  --marker: #ced9ff;
  --gray: #f2f2f2;
  --ink: #333;
  --sub: #939393;
  --line: #e2e2e2;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink);
  font-weight: 400;
}
.cpbx *,
.cpbx *::before,
.cpbx *::after { box-sizing: border-box; }

.cpbx .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* 流体フォント補助（DS: fs-PC-TABLET の考え方を一部利用） */
.cpbx .fw-bold { font-weight: 700; }

/* 画像／アイコンのプレースホルダー（レイアウト確認用） */
.cpbx-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, #f4f6ff, #f4f6ff 10px, #eaeefb 10px, #eaeefb 20px);
  border: 1px dashed #b9c2e6;
  border-radius: 12px;
  color: #8a93b8; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  min-height: 60px;
}
.cpbx-ph--icon { width: 56px; height: 56px; min-height: 0; border-radius: 50%; flex: none; }
.cpbx-ph--wide { width: 100%; aspect-ratio: 16/7; }

.cpbx-note {
  display: inline-block; font-size: 11px; font-weight: 700; color: #b06a00;
  background: #fff5e2; border: 1px solid #ffd98a; border-radius: 4px;
  padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}

/* マーカー（DS: color-marker-biz 蛍光ペン風） */
.cpbx-mark {
  background: linear-gradient(transparent 60%, var(--marker) 60%);
  padding: 0 2px;
}

/* 共通：セクション見出し（DS: .section h2 + 赤バー::after） */
.cpbx-head { text-align: center; margin-bottom: 40px; }
.cpbx-head__sub { display: inline-block; color: var(--red); font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.cpbx-head__title {
  margin: 0; font-weight: 700; line-height: 1.4; text-align: center;
  font-size: 26px; color: var(--ink);
}
.cpbx-head__title::after {
  content: ""; display: block; width: 50px; height: 4px;
  margin: 10px auto 0; background: var(--red); border-radius: 4px;
}
.cpbx-head__title .red { color: var(--red); }
.cpbx-head__lead { margin: 16px 0 0; color: var(--sub); font-size: 15px; line-height: 1.9; }
/* 料金リードはグレーだと見づらいため濃色に（指示v04 #24） */
#price .cpbx-head__lead { color: var(--ink); }
@media (min-width: 768px) {
  .cpbx-head { margin-bottom: 48px; }
  .cpbx-head__title { font-size: 32px; }
  .cpbx-head__title::after { width: 80px; margin-top: 12px; }
  .cpbx-head__sub { font-size: 17px; }
}

/* ボタン（サイト共通 btn-primary に正確準拠：pill・3px枠・白SVGアロー right:24px） */
.cpbx-btn {
  position: relative; overflow: hidden; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 280px; max-width: 100%; min-height: 58px; padding: 14px 40px;
  font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center;
  text-decoration: none !important; border: 3px solid transparent; border-radius: 100px;
  transition: opacity .3s ease-out;
}
.cpbx-btn:hover { opacity: .7; }
.cpbx-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 24px; margin: auto;
  display: inline-block; width: 9px; height: 16px;
  background: url(/common_v10/images/icn-bullet-white.svg) no-repeat center center / contain;
}
/* color は !important（共通CSSの a:link #406FAF を上書き。site btn-primary と同様） */
.cpbx-btn--red { background: var(--red); border-color: var(--red); color: #fff !important; }
.cpbx-btn--navy { background: var(--navy); border-color: var(--navy); color: #fff !important; }
.cpbx-btn--ghost { background: #fff; border-color: var(--navy); color: var(--navy) !important; }
.cpbx-btn--ghost::after { background-image: url(/common_v10/images/icn-bullet-black.svg); }

/* MV内ボタンはサイズのみ調整（形状・アロー・色系は共通踏襲） */
.cpbx-fv__cta .cpbx-btn { width: 100%; min-width: 0; font-size: 16px; min-height: 54px; padding: 12px 40px; }
/* 濃紺背景でnavyボタンが埋もれるため白枠で視認性確保（指示v03 #2） */
.cpbx-fv__cta .cpbx-btn--navy { border-color: #fff; }
@media (min-width: 768px) {
  .cpbx-fv__cta .cpbx-btn { width: auto; flex: 1 1 0; }
}

/* =========================== ①ファーストビュー =========================== */
/* MV背景：濃紺ベースに抽象的な円模様＋左→右で明るくなるグラデ（指示v03 #3） */
.cpbx-fv {
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .06) 0 70px, transparent 71px),
    radial-gradient(circle at 32% 80%, rgba(255, 255, 255, .045) 0 110px, transparent 111px),
    radial-gradient(circle at 60% 28%, rgba(255, 255, 255, .055) 0 140px, transparent 141px),
    radial-gradient(circle at 86% 68%, rgba(255, 255, 255, .05) 0 95px, transparent 96px),
    linear-gradient(100deg, #090968 0%, #161690 55%, #3030b2 100%);
  padding: 36px 0 40px;
}
.cpbx-fv__inner { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.cpbx-fv__cat { display: inline-block; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; border-radius: 100px; padding: 6px 16px; }
.cpbx-fv__title { margin: 0; font-weight: 700; line-height: 1.4; font-size: 26px; color: #fff; text-align: center; }
.cpbx-fv__title .brand { color: #ff6b4d; }
.cpbx-fv__title .small { display: block; font-size: 16px; margin-top: 8px; color: #fff; }
.cpbx-fv__lead { margin: 0; text-align: center; font-size: 14px; line-height: 1.9; color: #fff; }
.cpbx-fv__lead b { color: #fff; }
/* 濃紺背景上のマーカー：白文字＋黄色マーカーで可読性確保（指示v03 #1） */
.cpbx-fv .cpbx-mark { color: #fff; background: linear-gradient(transparent 60%, #0079a9 60%); }
.cpbx-fv__visual { width: 100%; }
.cpbx-fv__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
/* SP：画像→ボタンの順に並べ替え、画像は中央寄せで切れないように（指示spv02 #1〜#3） */
@media (max-width: 767px) {
  .cpbx-fv__col { display: contents; }
  .cpbx-fv__title { order: 1; }
  .cpbx-fv__visual { order: 2; width: 100%; }
  .cpbx-fv__cta { order: 3; }
  .cpbx-fv__visual picture { width: 100%; }
  .cpbx-fv__visual img { width: 100%; max-width: 420px; margin: 0 auto; }
}
@media (min-width: 768px) {
  .cpbx-fv { padding: 56px 0 60px; }
  .cpbx-fv__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
  .cpbx-fv__title { font-size: 38px; text-align: left; }
  .cpbx-fv__title .small { font-size: 20px; }
  .cpbx-fv__lead { text-align: left; font-size: 16px; }
  .cpbx-fv__cta { justify-content: flex-start; }
  .cpbx-fv__col { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
}

/* =========================== ②アンカーナビ（/lp/mobile01/ と同デザイン：lp-anchor） =========================== */
/* mobile01同様にグレー背景(bg-gray)。直下の同色セクションと一体化しないよう上下に区切り線を付与 */
.lp-anchor { padding: 14px 0; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; }
@media (min-width: 47.9375em) {
  .lp-anchor { padding: 18px 0; }
}
.lp-anchor__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 32px; }
.lp-anchor__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
.lp-anchor__item { margin: 0; }
.lp-anchor__item .link-anchor-text { font-size: 16px; }
.lp-anchor__cta { margin: 0; }
.lp-anchor__cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 174px; height: 36px; padding: 0 32px 0 24px;
  background: #e93817; color: #fff !important; font-size: 16px; font-weight: 700; line-height: 1;
  border-radius: 100px; text-decoration: none !important; position: relative; transition: opacity 0.3s ease-out;
}
.lp-anchor__cta-btn::after {
  content: ""; position: absolute; top: 50%; right: 14px; width: 6px; height: 6px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-65%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .lp-anchor__cta-btn:hover { opacity: 0.8; }
}
/* アンカーナビ：PCは横並びリスト、SPはアコーディオン（details）。背景はPC同様の灰色（指示spv02 #4／spv02-2 #2／spv02-3） */
/* PC：details/summaryをラッパーとして無効化し、従来通りの横並びリスト表示 */
.lp-anchor__dd { width: 100%; }
.lp-anchor__dd-toggle { display: none; }
.lp-anchor__dd > .lp-anchor__list { display: flex; }
@media (max-width: 47.9375em) {
  .lp-anchor__inner { flex-direction: column; gap: 0; }
  .lp-anchor__dd { width: 100%; }
  /* 開閉トグル：「メニュー」中央＋右端に＋／−アイコン。PC同様の灰色背景に紺色テキスト */
  .lp-anchor__dd-toggle {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    list-style: none; cursor: pointer;
    padding: 10px 36px; font-size: 16px; font-weight: 700; color: var(--navy);
    background: #f2f2f2;
  }
  .lp-anchor__dd-toggle::-webkit-details-marker { display: none; }
  /* ＋／−の開閉アイコン（右端に固定配置） */
  .lp-anchor__dd-toggle::after {
    content: "＋"; position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
    font-size: 18px; font-weight: 700; line-height: 1; color: var(--navy);
  }
  .lp-anchor__dd[open] .lp-anchor__dd-toggle::after { content: "−"; }
  /* 展開パネル：アコーディオンとして下に開く（オーバーレイしない）。PCと同じリンク文字を縦並び表示 */
  .lp-anchor__dd > .lp-anchor__list {
    display: block; margin: 0; padding: 0; background: #f2f2f2;
    border-top: 1px solid #e2e2e2;
  }
  .lp-anchor__item { width: 100%; text-align: center; }
  .lp-anchor__item .link-anchor-text { display: block; padding: 12px 16px; }
  .lp-anchor__item + .lp-anchor__item .link-anchor-text { border-top: 1px solid #e2e2e2; }
  .lp-anchor__cta { width: 100%; text-align: center; }
}

/* =========================== ③お悩み =========================== */
.cpbx-problem { background: var(--gray); }
.cpbx-problem__cards { display: grid; gap: 16px; }
@media (min-width: 768px) { .cpbx-problem__cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.cpbx-pcard { background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.cpbx-pcard__problem { position: relative; background: var(--biz); color: var(--navy); font-weight: 700; font-size: 15px; line-height: 1.5; text-align: center; padding: 18px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* 上部ブルーと同色の下三角で本文と連結（指示v02 #2） */
.cpbx-pcard__problem::after { content: ""; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 14px solid var(--biz); z-index: 2; }
.cpbx-pcard__arrow { display: none; }
.cpbx-pcard__body { padding: 18px 16px 22px; flex: 1; }
.cpbx-pcard__solve { color: var(--red); font-weight: 700; font-size: 16px; text-align: center; margin: 0 0 12px; }
.cpbx-checklist { list-style: none; margin: 0; padding: 0; }
/* 波線なし・行間コンパクト（指示v02 #7／v03 #4でさらに詰め） */
.cpbx-checklist li { position: relative; margin-bottom: 5px; padding: 2px 0 2px 26px; font-size: 14px; line-height: 1.5; }
.cpbx-checklist li:last-child { margin-bottom: 0; }
.cpbx-checklist li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 2px #fff; }

/* =========================== ④比較表（/smb/ms365 の compare__table に準拠） =========================== */
/* 外枠は box-shadow で一定の1pxに（border+角丸での太細を解消・指示v03 #5） */
.cpbx-merit__table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px #ccc; margin-bottom: 1px; }
.cpbx-merit__table th, .cpbx-merit__table td { padding: 18px 16px; vertical-align: middle; line-height: 1.6; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
.cpbx-merit__table th:last-child, .cpbx-merit__table td:last-child { border-right: 0; }
.cpbx-merit__table tr:last-child th, .cpbx-merit__table tr:last-child td { border-bottom: 0; }
.cpbx-merit__table thead th { font-size: 16px; font-weight: 700; text-align: center; }
.cpbx-merit__th-axis { width: 22%; background: #f2f2f2; }
.cpbx-merit__th-old { background: var(--biz); color: var(--navy); }
.cpbx-merit__th-new { background: var(--navy); color: #fff; }
.cpbx-merit__table tbody th { background: #f2f2f2; color: var(--navy); font-weight: 700; text-align: center; font-size: 14px; }
.cpbx-merit__table td { background: #fff; font-size: 14px; line-height: 1.7; text-align: left; }
.cpbx-merit__table .col-old { color: var(--sub); }
.cpbx-merit__table .col-new { color: var(--ink); font-weight: 700; }
.cpbx-merit__mark { font-weight: 700; margin-right: 6px; }
.cpbx-merit__mark--x { color: #b3b3bd; }
.cpbx-merit__mark--o { color: var(--red); }
.cpbx-merit__sp { display: grid; gap: 14px; }
/* SP：カード間の余白。親は共通CSSで display:block !important になり gap が効かないため margin で付与（指示spv02 #5〜#8 / spv02-2 #3） */
.cpbx-merit__spcard { margin-bottom: 16px; }
.cpbx-merit__spcard:last-child { margin-bottom: 0; }
.cpbx-merit__spcard { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cpbx-merit__spcard h4 { margin: 0; background: var(--biz); color: var(--navy); font-size: 14px; text-align: center; padding: 10px; }
.cpbx-merit__sprow { padding: 12px 14px; font-size: 14px; line-height: 1.6; }
.cpbx-merit__sprow + .cpbx-merit__sprow { border-top: 1px solid var(--line); }
.cpbx-merit__sprow span { display: block; font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.cpbx-merit__sprow--old span { color: #8a8a99; }
.cpbx-merit__sprow--new span { color: var(--navy); }

/* 比較表の下に各列の構成イメージを余白なしで連結（指示v04 #28・#29） */
.cpbx-merit__diagram { display: flex; align-items: flex-start; gap: 0; margin-top: 0; }
.cpbx-merit__diagram-spacer { flex: 0 0 22%; }
.cpbx-merit__diagram-img { flex: 0 0 39%; width: 39%; height: auto; }
/* 親は共通CSSで display:block !important のため gap ではなく margin で余白を付与 */
.cpbx-merit__diagram-sp { display: grid; gap: 16px; margin-top: 16px; }
.cpbx-merit__diagram-sp img { width: 100%; height: auto; display: block; border-radius: 0 0 10px 10px; }
/* SP：構成イメージ上のラベル（PC表ヘッダーと同じ色味・指示spv02 #9・#10） */
.cpbx-merit__diagram-block { display: flex; flex-direction: column; margin-bottom: 16px; }
.cpbx-merit__diagram-block:last-child { margin-bottom: 0; }
.cpbx-merit__diagram-label { margin: 0; padding: 9px 12px; text-align: center; font-weight: 700; font-size: 14px; border-radius: 10px 10px 0 0; }
.cpbx-merit__diagram-label--old { background: var(--biz); color: var(--navy); }
.cpbx-merit__diagram-label--new { background: var(--navy); color: #fff; }

/* =========================== ⑤選ばれる理由 =========================== */
.cpbx-reason { background: var(--gray); }
.cpbx-reason__list { display: grid; gap: 18px; }
@media (min-width: 768px) { .cpbx-reason__list { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
/* DS: box-card.biz-custom（navyヘッダー＋三角・navy枠） */
.cpbx-rcard { background: #fff; border: 1px solid var(--navy); border-radius: 16px; overflow: visible; display: flex; flex-direction: column; }
.cpbx-rcard__no { position: relative; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 16px; text-align: center; border-radius: 15px 15px 0 0; }
.cpbx-rcard__no::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; margin: auto; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 11px solid var(--navy); }
.cpbx-rcard__no span { font-size: 18px; margin-left: 4px; }
.cpbx-rcard__body { padding: 24px 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cpbx-rcard__title { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--navy); text-align: center; }
.cpbx-rcard__title .red { color: var(--red); }
.cpbx-rcard__text { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink); }

/* =========================== ⑥機能 =========================== */
.cpbx-feature__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .cpbx-feature__grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.cpbx-fcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cpbx-fcard__name { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--navy); }
.cpbx-feature__note { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--sub); }
.cpbx-feature__image { max-width: 1040px; margin: 0 auto; }
.cpbx-feature__image img { display: block; width: 100%; height: auto; }

/* カード内アイコン（トビラフォン由来の線画／透過）・事例イラスト */
.cpbx-cardicon { display: block; width: auto; height: 56px; margin: 0 auto; }
.cpbx-caseimg { display: block; width: 100%; height: auto; border-radius: 10px; }

/* FVメインビジュアル（画像） */
.cpbx-fv__visual picture { display: block; }
.cpbx-fv__visual img { display: block; width: 100%; height: auto; }

/* =========================== ⑦料金 =========================== */
.cpbx-price__cards { display: grid; gap: 18px; }
@media (min-width: 768px) { .cpbx-price__cards { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.cpbx-prcard { border: 1px solid var(--navy); border-radius: 16px; overflow: hidden; background: #fff; }
.cpbx-prcard__head { background: var(--navy); color: #fff; text-align: center; font-weight: 700; font-size: 16px; padding: 14px; }
.cpbx-prcard__body { padding: 24px 20px; }
.cpbx-prcard__case { text-align: center; font-size: 13px; color: var(--sub); margin: 0 0 14px; }
.cpbx-prcard__rows { display: flex; flex-direction: column; gap: 12px; }
.cpbx-prrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--line); padding-bottom: 12px; }
.cpbx-prrow__label { font-size: 14px; font-weight: 700; color: var(--navy); }
.cpbx-prrow__val { font-size: 14px; color: var(--ink); text-align: right; }
.cpbx-prrow__val b { font-weight: 700; font-size: 28px; color: var(--red); }
.cpbx-prcard__sub { margin: 10px 0 0; font-size: 12px; color: var(--sub); }
/* 注釈の行間を詰める（指示v03 #6） */
.cpbx-price__notes { margin: 18px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--sub); line-height: 1.5; }
.cpbx-price__notes li { margin: 0; }

/* =========================== ⑧導入事例 =========================== */
.cpbx-case__list { display: grid; gap: 18px; }
@media (min-width: 768px) { .cpbx-case__list { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.cpbx-ccard { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.cpbx-ccard__company { padding: 16px 16px 0; }
.cpbx-ccard__name { margin: 10px 0 2px; font-weight: 700; font-size: 15px; color: var(--navy); }
.cpbx-ccard__cat { margin: 0; font-size: 12px; color: var(--sub); }
.cpbx-ccard__block { padding: 14px 16px; }
.cpbx-ccard__block h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--navy); }
/* お困りごとの上に白マージン＋背景同色の下三角（指示v02 #8・#10・#12・#13・#18・#19） */
.cpbx-ccard__block.is-before { position: relative; background: var(--biz); margin-top: 4px; }
.cpbx-ccard__block.is-before::after { content: ""; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 11px solid var(--biz); z-index: 2; }
/* リストの行間を詰める（指示v02 #9・#11・#14〜#17） */
.cpbx-ccard__block ul { margin: 0; padding-left: 1.1em; font-size: 13px; line-height: 1.45; color: var(--ink); }
.cpbx-ccard__block ul li { margin: 2px 0; }
/* 赤字コメントはお困りごとの上に配置（指示v04 #1〜#3）。上部移動につき罫線なし */
.cpbx-ccard__voice { padding: 8px 16px 14px; font-size: 13px; line-height: 1.7; color: var(--red); font-weight: 700; }

/* /interview/ と同一デザインのカード（指示#7）。カードが1枚のため中央寄せ */
.cpbx-case__list { justify-items: center; }
@media (min-width: 768px) { .cpbx-case__list { grid-template-columns: minmax(0, calc((100% - 56px) / 3)); justify-content: center; } }
.cpbx-case__list .info-item { width: 100%; }
.cpbx-case__list .info-item a { background-color: #f2f2f2; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; height: 100%; padding: 16px 16px 32px; border-radius: 32px; }
@media (min-width: 768px) { .cpbx-case__list .info-item a { padding: 24px 24px 27px; } }
.cpbx-case__list .info-item__imagearea { position: relative; width: 100%; border-radius: 20px; overflow: hidden; margin-bottom: 20px; }
.cpbx-case__list .info-item__imagearea img { width: 100%; height: auto; aspect-ratio: 307/190; object-fit: cover; display: block; }
.cpbx-case__list .info-item__textarea { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: 16px; width: 100%; flex-grow: 2; }
.cpbx-case__list .info-item__title { font-weight: bold; text-align: left; line-height: 1.5; font-size: 20px; margin: 0; width: 100%; }
.cpbx-case__list .info-item__text { line-height: 1.5; font-size: 14px; color: #333; margin: 0; }
.cpbx-case__list .info-item__link { font-size: 14px; padding-right: 22px; margin: 0; }
.cpbx-case__list .info-item__cat { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: inline-block; padding: 4px 12px; border-radius: 100px; background-color: #0c0b86; color: #fff; font-size: 12px; font-weight: bold; line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap; }
@media (min-width: 768px) { .cpbx-case__list .info-item__cat { left: 12px; bottom: 12px; font-size: 13px; padding: 4px 14px; } }
.cpbx-case__list .info-item__cat--corp { background-color: #0c0b86; }

/* =========================== ⑨無料トライアル =========================== */
.cpbx-trial { background: var(--navy-deep); color: #fff; }
.cpbx-trial .cpbx-head__title { color: #fff; }
.cpbx-trial .cpbx-head__title::after { background: #fff; }
.cpbx-trial__lead { text-align: center; font-size: 15px; line-height: 1.9; margin: 0 0 8px; }
.cpbx-trial__cond { text-align: center; font-size: 12px; opacity: .85; margin: 0 0 28px; }
.cpbx-trial__groups { display: grid; gap: 16px; }
@media (min-width: 768px) { .cpbx-trial__groups { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.cpbx-tgroup { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 16px; padding: 18px; }
.cpbx-tgroup h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.cpbx-tgroup ul { margin: 0; padding: 0; list-style: none; }
.cpbx-tgroup li { padding: 7px 0 7px 22px; position: relative; font-size: 14px; }
.cpbx-tgroup li::before { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }

/* =========================== ⑩FAQ =========================== */
.cpbx-faq { background: var(--gray); }
/* FAQ項目は共通の faq-list-accordion（/lp/mobile01/ と同一）。幅もmobile01に合わせ既定値を使用（指示v02 #21） */

/* =========================== ⑩資料DL / ⑪CTA =========================== */
/* DS: board-biz(#ebefff) パネル */
.cpbx-doc__box { background: var(--biz); border-radius: 20px; padding: 32px 20px; text-align: center; }
.cpbx-doc__label { display: inline-block; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; border-radius: 100px; padding: 6px 18px; margin-bottom: 14px; }
.cpbx-doc__catch { margin: 0 0 6px; font-weight: 700; color: var(--ink); font-size: 16px; }
.cpbx-doc__catch .vs { color: var(--red); font-size: 20px; }
.cpbx-doc__title { margin: 6px 0 18px; font-weight: 700; font-size: 22px; color: var(--navy); }
.cpbx-doc__img { max-width: 640px; margin: 0 auto 18px; }

/* 資料：紺バナー＋オンプレ vs クラウド（指示v02 #23） */
.cpbx-doc__banner { display: block; background: var(--navy); color: #fff; font-weight: 700; font-size: 18px; line-height: 1.4; border-radius: 10px; padding: 12px 14px; margin: 0 auto 20px; }
@media (min-width: 768px) { .cpbx-doc__banner { font-size: 22px; } }
.cpbx-doc__vs { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 20px; }
.cpbx-doc__vs-col { text-align: center; }
.cpbx-doc__vs-small { display: block; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.4; margin-bottom: 2px; }
.cpbx-doc__vs-big { display: block; font-weight: 700; font-size: 30px; line-height: 1.2; color: var(--navy); }
.cpbx-doc__vs-big.is-cloud { color: var(--navy); } /* オンプレと同じ青文字（指示v04 #26） */
.cpbx-doc__vs-mid { font-weight: 700; font-size: 22px; color: #000; flex: none; } /* vs.は黒字（指示v04 #25） */
@media (min-width: 768px) { .cpbx-doc__vs { gap: 24px; } .cpbx-doc__vs-small { font-size: 15px; } .cpbx-doc__vs-big { font-size: 40px; } .cpbx-doc__vs-mid { font-size: 28px; } }

/* 資料：オンプレ／クラウドの比較画像2枚（指示v02 #24） */
.cpbx-doc__compare { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 880px; margin: 0 auto 18px; }
@media (min-width: 768px) { .cpbx-doc__compare { grid-template-columns: 1fr 1fr; gap: 20px; } }
.cpbx-doc__compare-col { background: #fff; border-radius: 12px; padding: 10px; }
.cpbx-doc__compare-col img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* SP：オンプレ画像の下に「vs. / いっそ捨てちゃう？ / クラウド」を移動（指示spv02 #11） */
@media (max-width: 767px) {
  .cpbx-doc__box { display: flex; flex-direction: column; }
  .cpbx-doc__vs, .cpbx-doc__compare { display: contents; }
  .cpbx-doc__banner { order: 1; }
  .cpbx-doc__vs-col--old { order: 2; margin: 0 0 8px; }
  .cpbx-doc__compare-col--old { order: 3; margin: 0 0 18px; }
  .cpbx-doc__vs-mid { order: 4; margin: 0 0 8px; }
  .cpbx-doc__vs-col--new { order: 5; margin: 0 0 8px; }
  .cpbx-doc__compare-col--new { order: 6; margin: 0 0 20px; }
  .cpbx-doc__box > .cpbx-btn { order: 7; }
}

/* 導入企業実績ロゴ：上下パディング20px均一・サイズ調整（指示v02 #28／v03 #7） */
.cpbx-logos__item { padding: 20px; }
.cpbx-logos__item img { width: auto; max-width: 100%; height: auto; max-height: 40px; object-fit: contain; }

/* DS: board-cv（赤枠CTAボックス） */
.cpbx-cv { border: 2px solid var(--red); background: #fff; border-radius: 32px; padding: 32px; text-align: center; }
/* テキストは黒字（指示v02 #25） */
.cpbx-cv__lead { font-weight: 700; font-size: 18px; color: #000; margin: 0 0 16px; line-height: 1.6; }
/* トビラフォンCloud ロゴ（指示v02 #27） */
/* 赤枠との余白をさらに約10pt広げる（指示v04 #27） */
.cpbx-cv__logo { margin: 33px auto 0; text-align: center; }
.cpbx-cv__logo img { width: auto; height: 40px; max-width: 80%; }
.cpbx-cv__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (max-width: 767px) { .cpbx-cv { padding: 24px 16px; } }

/* お悩みカード：コンセプト枠（スマホがビジネスフォンに 等／背景色＋白文字） */
.cpbx-pcard__concept { margin: 0 0 16px; text-align: center; }
/* コンセプト見出しを大きく（指示v02 #3〜#5） */
.cpbx-pcard__concept-title { margin: 0 0 8px; font-weight: 700; font-size: 18px; color: var(--navy); line-height: 1.4; }
@media (min-width: 768px) { .cpbx-pcard__concept-title { font-size: 20px; } }
/* 枠の背景を#f2f2f2・文字を黒に（指示v02 #6） */
.cpbx-pcard__concept-icon {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 12px 14px;
  background: #f2f2f2; color: #000; font-weight: 700; font-size: 13px; line-height: 1.5;
  border-radius: 12px;
}

/* 料金カード：利用台数の見出しを大きく（Q上げ）、数字をさらに大きく */
.cpbx-prcard__case--lg { font-size: 18px; font-weight: 700; color: var(--ink); }
.cpbx-prcard__case--lg .num { font-size: 28px; color: var(--red); margin: 0 2px; }

/* 料金CTA上の誘導テキスト */
/* 黒字に（指示v04 #22） */
.cpbx-cv__catch { margin: 28px 0 16px; text-align: center; font-weight: 700; font-size: 18px; line-height: 1.6; color: #000; }
@media (min-width: 768px) { .cpbx-cv__catch { font-size: 20px; } }

/* 導入企業実績：ロゴグリッド */
/* 5列2行（指示v04 #5）。SPは2列 */
.cpbx-logos__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .cpbx-logos__grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.cpbx-logos__item { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); min-height: 0; color: var(--sub); }

/* セクションの上下余白 */
.cpbx-sec { padding: 48px 0; }
@media (min-width: 768px) { .cpbx-sec { padding: 72px 0; } }

/* =========================== 画像拡大モーダル（指示spv02 #12） =========================== */
.cpbx-zoomable { cursor: zoom-in; }
.cpbx-imgmodal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: rgba(0, 0, 0, .85); cursor: zoom-out;
}
.cpbx-imgmodal[hidden] { display: none; }
/* スマホの縦幅に合わせた大きさで表示（指示spv02 #12） */
.cpbx-imgmodal__img { width: auto; height: 92vh; max-width: 96vw; object-fit: contain; border-radius: 6px; }