/* ============================================
   機能ページ／業種・用途ページ 専用スタイル
   style.css の変数をそのまま使う。上書きはしない。
   ============================================ */

/* ---------- パンくず ---------- */
/* ヘッダーが position:fixed（高さ64px）なので、その分だけ下げる */
.crumbs {
  border-bottom: 1px solid var(--border-light);
  font-size: 0.8rem;
  color: var(--text-sub);
  padding: 78px 0 14px;
}
.crumbs a { color: var(--text-sub); }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs .crumb-sep { margin: 0 10px; color: var(--text-muted); }

/* ---------- ページ冒頭 ---------- */
.doc-hero { padding: 64px 0 40px; }
.doc-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.28;
  letter-spacing: 0;
  margin-bottom: 20px;
}
.doc-hero .doc-lead {
  font-size: 1.06rem;
  color: var(--text-sub);
  max-width: 46em;
  line-height: 1.95;
}
.doc-hero .doc-lead + .doc-lead { margin-top: 1em; }

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 26px;
}
.doc-meta span {
  font-size: 0.76rem;
  color: var(--text-sub);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
}
.doc-meta span.is-note { border-color: #F3D3C4; color: #A8471C; background: var(--primary-light); }

/* ---------- 画面写真 ---------- */
.shot { margin: 0; }
.shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-sub);
  cursor: zoom-in;
  overflow: hidden;
}
.shot-btn img { width: 100%; display: block; }
.shot figcaption {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-sub);
  line-height: 1.7;
}
/* スマートフォン幅で撮ったチャット画面は、実寸に近い幅で置く */
.shot-sp .shot-btn { max-width: 320px; border-radius: 14px; }
.shot-sp figcaption { max-width: 320px; }
.shot-wide .shot-btn { border-radius: var(--radius-sm); }

.shot-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  align-items: start;
}
.shot-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  align-items: start;
}

/* ---------- 交互ブロック ---------- */
.slab { padding: 56px 0; border-top: 1px solid var(--border-light); }
.slab:first-of-type { border-top: 0; }
.slab-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.slab-flip .slab-inner > .slab-text { order: 2; }
.slab-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 16px;
  line-height: 1.45;
}
.slab-body { color: var(--text-sub); line-height: 1.95; }
.slab-body p + p { margin-top: 1em; }
.slab-body strong { color: var(--text); font-weight: 700; }

/* ---------- 見出し ---------- */
.doc-h2 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 22px;
}
.doc-h3 {
  font-size: 1.06rem;
  font-weight: 700;
  margin: 0 0 10px;
}
.doc-section { padding: 56px 0; border-top: 1px solid var(--border-light); }
.doc-section > .container > p { color: var(--text-sub); line-height: 1.95; max-width: 44em; }
.doc-section > .container > p + p { margin-top: 1em; }

/* ---------- 使いどころ ---------- */
.uses { display: grid; gap: 0; margin-top: 8px; }
.use-item {
  padding: 22px 0;
  border-top: 1px solid var(--border-light);
  display: grid;
  grid-template-columns: 15em 1fr;
  gap: 28px;
}
.use-item:last-child { border-bottom: 1px solid var(--border-light); }
.use-item h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.6; }
.use-item p { color: var(--text-sub); line-height: 1.9; font-size: 0.94rem; }

/* ---------- 手順（管理画面の操作） ---------- */
.steps { counter-reset: step; margin-top: 6px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 16px 2.4em;
  color: var(--text-sub);
  line-height: 1.9;
  font-size: 0.94rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.6em;
  height: 1.6em;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
}
.steps li b { color: var(--text); font-weight: 700; }

/* ---------- 仕様の表 ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.spec th, .spec td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.8;
}
.spec th { width: 12em; font-weight: 600; color: var(--text); white-space: nowrap; }
.spec td { color: var(--text-sub); }

/* ---------- 一覧表（全機能） ---------- */
.tablewrap { overflow-x: auto; }
.list-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 720px; }
.list-table th, .list-table td {
  text-align: left;
  vertical-align: top;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.75;
}
.list-table thead th {
  font-size: 0.78rem;
  color: var(--text-sub);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.list-table td:first-child { white-space: nowrap; font-weight: 600; }
.list-table td:first-child a:hover { color: var(--primary); text-decoration: underline; }
.list-table td.cond { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }

/* ---------- 「こうしたい」の並び ---------- */
.wants { border-top: 1px solid var(--border-light); }
.want-row {
  display: grid;
  grid-template-columns: 3.2em 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border-light);
  transition: background .2s var(--ease);
}
.want-row:hover { background: var(--bg-sub); }
.want-row .num {
  font-family: var(--font-en);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}
.want-row .txt { font-size: 1.05rem; font-weight: 700; line-height: 1.6; }
.want-row .sub { display: block; font-size: 0.86rem; color: var(--text-sub); font-weight: 400; margin-top: 6px; }
.want-row .go { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.want-row:hover .go { color: var(--primary); }

/* ---------- 業種の並び ---------- */
.inds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 40px; }
.ind-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
}
.ind-row h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.ind-row p { font-size: 0.86rem; color: var(--text-sub); line-height: 1.8; }
.ind-row:hover h3 { color: var(--primary); }

/* ---------- 関連リンク ---------- */
.next { padding: 48px 0 72px; border-top: 1px solid var(--border-light); }
.next-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 36px; }
.next-list a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.94rem;
  font-weight: 600;
}
.next-list a:hover { color: var(--primary); }
.next-list a span { display: block; font-size: 0.82rem; color: var(--text-sub); font-weight: 400; margin-top: 4px; }

/* ---------- 引用・注記 ---------- */
.note {
  border-left: 2px solid var(--border);
  padding: 2px 0 2px 18px;
  color: var(--text-sub);
  font-size: 0.9rem;
  line-height: 1.9;
  margin: 22px 0;
}

/* ---------- 場面（営業AIモード） ---------- */
.scenes-rows { border-top: 1px solid var(--border-light); }
.scene-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 44px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--border-light);
}
.scene-row .cond {
  font-size: 0.78rem;
  color: var(--text-sub);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  display: inline-block;
  margin-bottom: 14px;
}
.scene-row h3 { font-size: 1.22rem; font-weight: 800; line-height: 1.55; margin-bottom: 12px; letter-spacing: 0; }
.scene-row p { color: var(--text-sub); line-height: 1.95; font-size: 0.95rem; }

/* ---------- 拡大表示 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(28, 25, 23, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0;
  max-width: 1400px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.lightbox-figure figcaption {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.7;
  max-width: 60em;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
}
.lightbox-close:hover { border-color: #fff; }

/* ---------- 画面の中を指し示す ---------- */
.callouts { position: relative; }
.callout-list { margin-top: 20px; display: grid; gap: 0; }
.callout-list li {
  display: grid;
  grid-template-columns: 2em 1fr;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.92rem;
  color: var(--text-sub);
  line-height: 1.85;
}
.callout-list li:first-child { border-top: 1px solid var(--border-light); }
.callout-list li b {
  font-family: var(--font-en);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 50%;
  width: 1.9em;
  height: 1.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15em;
}
.callout-list li strong { color: var(--text); font-weight: 700; }

/* ---------- 応答タイプ3つの入口 ---------- */
.type-rows { display: grid; gap: 0; }
.type-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 44px;
  padding: 40px 0;
  border-top: 1px solid var(--border-light);
  align-items: center;
}
.type-row:last-child { border-bottom: 1px solid var(--border-light); }

@media (max-width: 900px) {
  .slab-inner { grid-template-columns: 1fr; gap: 28px; }
  .slab-flip .slab-inner > .slab-text { order: 0; }
  .use-item { grid-template-columns: 1fr; gap: 8px; }
  .scene-row { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .type-row { grid-template-columns: 1fr; gap: 22px; }
  .want-row { grid-template-columns: 2.6em 1fr; }
  .want-row .go { display: none; }
  .doc-hero { padding: 40px 0 28px; }
  .doc-section, .slab { padding: 40px 0; }
  .shot-sp .shot-btn { max-width: 280px; }
}

/* 全幅ブロックの中の手順は、横に流して縦の長さを抑える */
.steps-wide {
  columns: 2;
  column-gap: 48px;
  max-width: 60em;
}
.steps-wide li { break-inside: avoid; }
@media (max-width: 760px) { .steps-wide { columns: 1; } }

/* ============================================
   2カラム（左ナビ＋本文）— 機能詳細・業種用途詳細・一覧
   参考: GENIEE SFA/CRM の機能一覧／機能詳細、マネーフォワード クラウド会計 の主な機能
   ============================================ */

.doc-layout {
  /* 幅は :root の --doc-w（サイト共通の1120px）で決める。
     ここで別の値を書くと、ヘッダーと本文の左端がずれる。 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 244px 1fr;
  gap: 48px;
  align-items: start;
}

/* ---------- 左ナビ ---------- */
.sidenav { position: sticky; top: 88px; }
.sidenav-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden auto;
  background: var(--white);
  max-height: calc(100vh - 170px);
}
.sidenav-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.86rem;
  font-weight: 700;
}
.sidenav-head svg { width: 17px; height: 17px; color: var(--primary); flex: none; }
.sidenav-group { border-bottom: 1px solid var(--border-light); }
.sidenav-group:last-child { border-bottom: 0; }
.sidenav-group > .g-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-sub);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sidenav-group > .g-title::-webkit-details-marker { display: none; }
.sidenav-group > .g-title:hover { color: var(--primary); }
.sidenav-group > .g-title .n {
  font-family: var(--font-en);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
}
.sidenav-group > .g-title .cnt {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}
.sidenav-group[open] > .g-title { color: var(--primary); background: var(--primary-light); }
.sidenav-group[open] > .g-title .n,
.sidenav-group[open] > .g-title .cnt { color: var(--primary); }
.sidenav .nav-plain {
  display: block;
  padding: 9px 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  border-left: 2px solid transparent;
}
.sidenav .g-more {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 9px 16px 12px;
}
.sidenav .g-more:hover { color: var(--primary); }
.sidenav a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 16px;
  font-size: 0.82rem;
  color: var(--text-sub);
  line-height: 1.5;
  border-left: 2px solid transparent;
}
.sidenav a:hover { background: var(--bg-sub); color: var(--text); }
.sidenav a.is-current {
  color: var(--primary);
  font-weight: 700;
  background: var(--primary-light);
  border-left-color: var(--primary);
}
.sidenav a .n {
  font-family: var(--font-en);
  font-size: 0.78rem;
  color: var(--text-muted);
  min-width: 1.1em;
  font-weight: 600;
}
.sidenav a.is-current .n { color: var(--primary); }

.sidenav-cta {
  margin-top: 18px;
  border-radius: 14px;
  background: var(--bg-dark);
  color: #fff;
  padding: 22px 20px;
}
.sidenav-cta p { font-size: 0.82rem; line-height: 1.75; color: rgba(255,255,255,.78); margin-bottom: 16px; }
.sidenav-cta strong { display: block; color: #fff; font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; line-height: 1.6; }
.sidenav-cta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: 0.83rem;
  font-weight: 700;
  border-left: 0;
}
.sidenav-cta a:hover { background: var(--primary-hover); color: #fff; }

/* ---------- 本文カラム ---------- */
.doc-main { min-width: 0; }
.doc-main > section:first-child { padding-top: 0; }

.crumbs-inline {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.crumbs-inline a { color: var(--text-muted); }
.crumbs-inline a:hover { color: var(--primary); text-decoration: underline; }
.crumbs-inline .sep { color: var(--border); }

.doc-title { font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1.35; letter-spacing: 0; }
.doc-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-sub);
}
.doc-cat a { color: var(--primary); font-weight: 600; }
.doc-cat a:hover { text-decoration: underline; }

/* 見出しの帯（マネーフォワードの見出しバーの型） */
.lead-band {
  margin: 30px 0 0;
  padding: 18px 22px;
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--primary-hover);
  line-height: 1.7;
}

.doc-h2-ul {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
  position: relative;
  margin: 0 0 24px;
}
.doc-h2-ul::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 5em;
  height: 2px;
  background: var(--primary);
}

/* ---------- カテゴリーの帯（一覧ページ） ---------- */
.cat-block { margin-bottom: 56px; scroll-margin-top: 88px; }
.cat-head {
  background: var(--bg-dark);
  color: #fff;
  border-radius: 14px 14px 0 0;
  padding: 26px 30px 24px;
}
.cat-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 12px;
}
.cat-head h2 .n {
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  letter-spacing: 0.04em;
}
.cat-head p { font-size: 0.88rem; line-height: 1.85; color: rgba(255,255,255,.76); max-width: 52em; }
.cat-count { font-size: 0.76rem; color: rgba(255,255,255,.55); margin-top: 10px; }

.fcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.fcard-empty { background: var(--white); }
.fcard {
  background: var(--white);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  min-height: 138px;
}
a.fcard:hover { background: var(--bg-sub); }
.fcard h3 { font-size: 0.95rem; font-weight: 700; line-height: 1.55; margin-bottom: 8px; }
a.fcard:hover h3 { color: var(--primary); }
.fcard p { font-size: 0.82rem; color: var(--text-sub); line-height: 1.75; flex: 1; }
.fcard .more { font-size: 0.78rem; color: var(--primary); font-weight: 600; margin-top: 12px; }
.fcard .cond { font-size: 0.72rem; color: var(--text-muted); margin-top: 12px; }

/* ---------- 関連（詳細ページ下部） ---------- */
.rel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(228px, 100%), 1fr));
  gap: 14px;
}
.rel-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 17px 19px;
}
.rel-card:hover { border-color: var(--primary); }
.rel-card h3 { font-size: 0.92rem; font-weight: 700; line-height: 1.5; margin-bottom: 6px; }
.rel-card:hover h3 { color: var(--primary); }
.rel-card p { font-size: 0.8rem; color: var(--text-sub); line-height: 1.7; }

.rel-list a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.6;
}
.rel-list a:first-child { border-top: 1px solid var(--border-light); }
.rel-list a:hover { color: var(--primary); }
.rel-list a span { display: block; font-size: 0.79rem; color: var(--text-sub); font-weight: 400; margin-top: 4px; }

@media (max-width: 980px) {
  .doc-layout { grid-template-columns: 1fr; gap: 0; padding-bottom: 56px; }
  .sidenav { position: static; margin-bottom: 32px; }
  .sidenav-box { max-height: none; }
  .sidenav-cta { display: none; }
  .cat-head { padding: 22px 20px 20px; }
  .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcard-empty { display: none; }
}
@media (max-width: 560px) {
  .fcards { grid-template-columns: minmax(0, 1fr); }
}

/* style.css の `section { padding: 88px 0 }` が効いてしまうので、2カラム内では打ち消す */
.doc-layout section { padding: 0; }
.doc-layout .doc-section { padding: 44px 0 0; }
.doc-layout .cat-block { margin-bottom: 40px; }
.doc-layout .doc-section > div > .doc-h2-ul { margin-top: 0; }

/* ============================================
   配色と見出しの作り直し
   黒帯＋オレンジバッジは参考にしたサイトの色そのままだった。
   白ベース＋細い罫線に戻し、オレンジはリンクとボタンだけに使う。
   ============================================ */

/* リードは帯をやめ、素の大きめの一文にする */
.lead-band {
  margin: 18px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.75;
  letter-spacing: 0;
}

/* 見出しの下線は1本だけ。二重線はやめる */
.doc-h2-ul {
  font-size: 1.3rem;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 26px;
}
.doc-h2-ul::after { display: none; }

/* カテゴリーの見出し。帯をやめ、連番と罫線で区切る */
.cat-head {
  background: none;
  color: inherit;
  border-radius: 0;
  border-bottom: 2px solid var(--text);
  padding: 0 0 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: start;
}
.cat-n {
  font-family: var(--font-en);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--border);
  line-height: 1;
  letter-spacing: 0;
  padding-top: 2px;
}
.cat-head h2 {
  display: block;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
  margin: 0 0 8px;
}
.cat-head p {
  color: var(--text-sub);
  font-size: 0.9rem;
  line-height: 1.85;
  max-width: 50em;
}
.cat-count {
  color: var(--text-muted);
  font-size: 0.76rem;
  margin-top: 8px;
}

.fcards {
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-top: 0;
  border-radius: 0;
}
.fcard { padding: 22px 22px 20px; }
a.fcard:hover { background: var(--primary-light); }

/* 左の相談ブロックも黒をやめる */
.sidenav-cta {
  background: var(--bg-sub);
  color: var(--text);
  border: 1px solid var(--border);
}
.sidenav-cta strong { color: var(--text); }
.sidenav-cta p { color: var(--text-sub); }

/* ---------- 本文 ---------- */
.prose {
  color: var(--text-sub);
  line-height: 2.05;
  font-size: 0.97rem;
  max-width: 40em;
}
.prose p + p { margin-top: 1.15em; }
.prose strong { color: var(--text); font-weight: 700; }
.prose-lead { margin-top: 24px; font-size: 1rem; }

/* 縦長のチャット画面は文章の横に。写真の幅は実寸に近づける */
.prose-with-shot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
.prose-with-shot .prose { max-width: none; }

@media (max-width: 860px) {
  .prose-with-shot { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ============================================
   本文の節。番号つきの大見出し＋画像と文章の左右交互。
   参考: SHANON MA の機能ページ、ferret One のツール紹介
   ============================================ */

/* 文字が薄かったので、本文の色と太さを上げる */
body { -webkit-font-smoothing: auto; }
.prose {
  color: #403A35;
  font-weight: 500;
  line-height: 2.0;
  font-size: 1rem;
  max-width: 40em;
}
.prose strong { color: var(--text); font-weight: 700; }
.doc-hero .doc-lead,
.slab-body, .use-item p, .spec td, .fcard p, .cat-head p,
.rel-card p, .next-list a span, .want-row .sub, .ind-row p,
.callout-list li, .steps li, .scene-row p, .note {
  color: #4A443E;
  font-weight: 500;
}
.list-table td { color: #403A35; font-weight: 500; }
.list-table td.cond { color: #6B635C; }
.lead-band { color: var(--text); font-weight: 700; }

.sec { padding: 52px 0; border-top: 1px solid var(--border-light); }
.sec:first-of-type { border-top: 0; padding-top: 40px; }

.sec-n {
  display: block;
  font-family: var(--font-en);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.sec-h {
  font-size: 1.62rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
  margin: 0 0 18px;
}

.sec-split {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.sec-split.is-flip { grid-template-columns: minmax(0, 1fr) 340px; }
.sec-split.is-flip > .sec-shot { order: 2; }
.sec-split .prose { max-width: none; }

.sec-full .sec-head { margin-bottom: 16px; }
.sec-full .sec-shot { margin-top: 26px; }

.sec-points { margin-top: 20px; }
.sec-points li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.85;
  font-size: 1rem;
}
.sec-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

@media (max-width: 900px) {
  .sec-split, .sec-split.is-flip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sec-split.is-flip > .sec-shot { order: 0; }
  .sec-h { font-size: 1.32rem; }
  .sec { padding: 38px 0; }
}

/* 画像と見出しの上端を揃える。中央揃えだと番号が浮いて、次の節と詰まって見える */
.sec-split { align-items: start; }
.sec-split .sec-shot { padding-top: 4px; }
.use-item { grid-template-columns: 13em minmax(0, 1fr); }
.use-item h3 { color: var(--text); }

/* 場面の条件バッジ。見出しの上に置く */
.sec .cond { margin-bottom: 12px; }
.sec-full .sec-head .cond { display: inline-block; }

/* ============================================
   実測にもとづく修正（2026-08-15）
   マネーフォワード / ferret One / GENIEE SFA/CRM の3サイトを実際に開いて計測。
   本文 16px・行間 1.5〜1.8、カードは gap 16px で離し、1px 罫線＋角丸 8px、内側 20px。
   自前の「1pxの格子」はどこもやっておらず、線が見えていなかった。
   ============================================ */

.prose {
  font-size: 1rem;
  line-height: 1.85;
  color: #333;
  font-weight: 500;
  max-width: 42em;
}
.prose p + p { margin-top: 1em; }
.prose-lead { margin-top: 20px; }

/* カードは隙間で分ける。格子をやめる */
.fcards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-top: 22px;
}
.fcard {
  border: 1px solid #E4E1DE;
  border-radius: 8px;
  padding: 20px;
  min-height: 0;
}
a.fcard { transition: border-color .15s var(--ease), background .15s var(--ease); }
a.fcard:hover { background: var(--white); border-color: var(--primary); }
.fcard h3 { font-size: 1rem; line-height: 1.5; margin-bottom: 10px; }
.fcard p { font-size: 0.88rem; line-height: 1.7; color: #4A443E; }
.fcard .more { margin-top: 14px; font-size: 0.8rem; }
.fcard-empty { display: none; }

/* カテゴリーの見出し。番号が薄くて読めなかった */
.cat-block { margin-bottom: 48px; }
.cat-head { border-bottom: 0; padding-bottom: 0; column-gap: 14px; }
.cat-n { color: #C9C3BD; font-size: 1.7rem; }
.cat-head h2 { font-size: 1.5rem; margin-bottom: 6px; }
.cat-head p { font-size: 0.92rem; line-height: 1.8; }
.cat-count { margin-top: 6px; }

/* 節。行間を詰めたぶん、上下の余白も締める */
.sec { padding: 44px 0; }
.sec:first-of-type { padding-top: 32px; }
.sec-h { font-size: 1.5rem; line-height: 1.55; margin-bottom: 14px; }
.sec-n { font-size: 0.8rem; margin-bottom: 8px; }
.sec-split { gap: 44px; grid-template-columns: 320px minmax(0, 1fr); }
.sec-split.is-flip { grid-template-columns: minmax(0, 1fr) 320px; }

/* リード文 */
.lead-band { font-size: 1.14rem; line-height: 1.7; margin-top: 14px; }

/* 見出しと表 */
.doc-h2-ul { font-size: 1.24rem; padding-bottom: 12px; margin-bottom: 22px; }
.doc-section { padding: 40px 0 0; }
.use-item { padding: 18px 0; gap: 24px; }
.use-item p { line-height: 1.8; font-size: 0.93rem; }
.spec th, .spec td { padding: 12px 16px 12px 0; line-height: 1.75; }
.steps li { line-height: 1.8; padding-bottom: 14px; }

/* 左ナビの行間 */
.sidenav a { padding: 8px 16px; }
.sidenav-group > .g-title { padding: 10px 16px; }

/* ============================================
   決定（2026-08-15）
   一覧 … パターンE のカード（隙間16px・1px罫線・角丸8px・内側20px）
   詳細 … パターンC の文字サイズ。ただし画像を囲む面は付けない
   ============================================ */

/* 番号と見出しを、Cの大きさに */
.sec-n {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0;
  margin-bottom: 6px;
  line-height: 1.2;
}
.sec-h {
  font-size: 1.72rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 画像と文章は半々。枠は付けず、画像だけを中央に置く */
.sec-split,
.sec-split.is-flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.sec-split .sec-shot { display: flex; justify-content: center; padding-top: 0; }
.sec-split .shot { width: 100%; }
.sec-split .shot-sp { max-width: 320px; }
.sec-split .shot-sp .shot-btn { max-width: 320px; }

.sec { padding: 48px 0; }
.sec:first-of-type { padding-top: 34px; }
.sec-full .sec-head { margin-bottom: 14px; }

@media (max-width: 900px) {
  .sec-h { font-size: 1.34rem; }
  .sec-n { font-size: 1.25rem; }
  .sec-split .sec-shot { justify-content: flex-start; }
}

/* ============================================
   幅の作り直し（2026-08-15）
   ・ヘッダー(1120px)とコンテンツ(1240px)の幅が合っておらず、ロゴだけ内側に寄っていた
   ・本文の幅が節ごとに違い（画像なし672px／画像あり450px）、行長がそろっていなかった
   1280px に統一し、本文の行長は全節で同じにする。
   ============================================ */

.doc-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 80px;
}
/* この2ページ群だけ、ヘッダーの内側も同じ幅に合わせる */


/* 本文の行長は全節でそろえる（日本語で1行 32〜40字） */
.prose { max-width: 41em; }
.sec-split .prose { max-width: none; }

/* 画像は実寸のまま右（または左）に固定。文章側を広く取る */
.sec-split { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
.sec-split.is-flip { grid-template-columns: 320px minmax(0, 1fr); }
.sec-split .sec-shot { justify-content: flex-start; }
.sec-split.is-flip .sec-shot { justify-content: flex-end; }
.sec-split .shot-sp,
.sec-split .shot-sp .shot-btn { max-width: 320px; }

/* リードと本文の幅をそろえる。ここが違うと改行位置がばらついて見える */
.lead-band { max-width: 41em; }
.doc-hero .doc-lead { max-width: 41em; }

@media (max-width: 1100px) {
  .doc-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 980px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); padding: 0 20px 56px; }

  .sec-split, .sec-split.is-flip { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================
   実測して見つけた不具合の修正（2026-08-15）
   1. `.doc-layout section { padding:0 }` が `.sec` にも当たり、節の上下余白が消えていた
   2. sec-split の列指定が DOM の並び（画像が先）と逆で、文章が320pxの列に入っていた
      → 本文が1行21字未満に潰れていた
   3. 本文カラムが狭かったので、左ナビを詰めて本文を広げる
   ============================================ */

.doc-layout {
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 36px;
}

.doc-layout .sec { padding: 48px 0; }
.doc-layout .sec:first-of-type { padding-top: 30px; }

/* DOM は 画像 → 文章 の順。通常は画像が左、is-flip は order で画像を右に送る */
.sec-split { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; }
.sec-split.is-flip { grid-template-columns: minmax(0, 1fr) 300px; }
.sec-split > .sec-shot { order: 0; }
.sec-split.is-flip > .sec-shot { order: 2; }
.sec-split .shot-sp,
.sec-split .shot-sp .shot-btn { max-width: 300px; }
.sec-split .sec-shot { justify-content: flex-start; }
.sec-split.is-flip .sec-shot { justify-content: flex-end; }

@media (max-width: 1100px) {
  .doc-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 980px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .sec-split, .sec-split.is-flip { grid-template-columns: minmax(0, 1fr); }
  .sec-split.is-flip > .sec-shot { order: 0; }
  .doc-layout .sec { padding: 34px 0; }
}

/* 左ナビ。200pxだと「問い合わせ・資料請求」が折り返して窮屈だったので少し広げる */
.doc-layout { grid-template-columns: 214px minmax(0, 1fr); }
.sidenav a { font-size: 0.8rem; align-items: flex-start; }
.sidenav a .n { padding-top: 0.15em; }
.sidenav .g-more { font-size: 0.8rem; line-height: 1.5; }
.sidenav-group > .g-title { font-size: 0.79rem; }
@media (max-width: 1100px) { .doc-layout { grid-template-columns: 200px minmax(0, 1fr); } }
@media (max-width: 980px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } }

/* ============================================
   ヘッダーと本文の幅を1か所で決める（2026-08-15）
   これまで `body:has(.doc-layout)` でヘッダーを上書きしていたが、
   :has() が効かない環境ではヘッダーだけ元の1120pxのまま残り、
   ロゴとサイドバーの左端がずれる。body のクラスで確実に当てる。
   ============================================ */
:root {
  /* サイト全体（トップ・コラム・料金）のヘッダーが 1120px / 左右24px なので、
     機能・業種用途のページもそこに合わせる。ここだけ1300pxだったため、
     ページを移るとロゴの位置が横に動いていた。 */
  --doc-w: 1120px;
  --doc-pad: 24px;
}
.doc-page .header-inner,
.doc-page .doc-layout,
.doc-page .pat-wrap {
  max-width: var(--doc-w);
  padding-left: var(--doc-pad);
  padding-right: var(--doc-pad);
  margin-left: auto;
  margin-right: auto;
}
.doc-page .doc-layout { padding-bottom: 80px; }

@media (max-width: 980px) {
  :root { --doc-pad: 20px; }
  .doc-page .doc-layout { padding-bottom: 56px; }
}

/* ============================================
   ヘッダーとパンくずの間隔（2026-08-15）
   ヘッダーの下線とパンくずの文字が数pxしか離れておらず、貼り付いていた。
   ヘッダーの高さぶんのスペーサーを空けたあと、さらに余白を取る。
   ※ ロゴの大きさは指示が無いので触らない（44px / ヘッダー64px のまま）
   ============================================ */
:root { --header-h: 64px; }

.doc-page .header-spacer { height: var(--header-h); }
.doc-page .crumbs-inline { padding-bottom: 22px; }
.doc-page .sidenav { top: calc(var(--header-h) + 24px); }
.doc-page .cat-block { scroll-margin-top: calc(var(--header-h) + 24px); }
/* .doc-layout の padding-top はここでは決めない。
   「一覧ページの入口」の節（帯）で 0 にするので、書いても効かなかった。
   ヘッダーぶんの余白は、パンくず側の padding-top が持っている。 */

/* ============================================
   本文の大きさと幅（2026-08-15・GENIEE SFA/CRM の機能詳細を実測）
   向こうは 本文18px / 行間32px / 幅872px。こちらは 16px / 656px で、
   文字も幅も小さすぎた。あわせて、画面写真がない節は番号を振らず
   本文の続きとして流す（番号だけ大きくて中身が薄い節をなくす）。
   ============================================ */

.doc-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }

.prose {
  font-size: 1.06rem;
  line-height: 1.85;
  max-width: 54em;
  color: #333;
  font-weight: 500;
}
.prose p + p { margin-top: 1.1em; }
.sec-split .prose { max-width: none; font-size: 1.02rem; }
.lead-band { font-size: 1.2rem; max-width: 34em; }
.doc-hero .doc-lead { max-width: 54em; }

/* 画面写真がない節は、番号なしの小見出しで本文の続きにする */
.sec-sub { padding: 34px 0 0; border-top: 0; }
.sub-h {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 12px;
}
.sec-sub + .sec-sub { padding-top: 30px; }
.sec.sec-split + .sec-sub,
.sec.sec-full + .sec-sub { padding-top: 32px; }

/* 節の区切りは、写真つきの節の前にだけ引く */
.sec-sub { border-top: 0 !important; }
.sec-split, .sec-full { border-top: 1px solid var(--border-light); }
.doc-main > .sec:first-of-type { border-top: 0; }

/* 表と一覧の文字も本文に合わせる */
.spec { font-size: 0.98rem; }
.use-item h3 { font-size: 1.02rem; }
.use-item p { font-size: 1rem; line-height: 1.85; }
.use-item { grid-template-columns: 16em minmax(0, 1fr); gap: 32px; }
.doc-h2-ul { font-size: 1.34rem; }
.sec-points li { font-size: 1.03rem; }
.rel-card p, .fcard p { font-size: 0.92rem; }

@media (max-width: 1100px) { .doc-layout { grid-template-columns: 214px minmax(0, 1fr); gap: 32px; } }
@media (max-width: 980px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: 1rem; }
  .use-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ============================================
   文字の太さ（2026-08-15）
   本文まで 500 にしていたので、全部が同じ濃さに見えて強弱がなくなっていた。
   地の文は 400 に戻し、目立たせるのは strong だけにする。
   ============================================ */

.prose,
.doc-hero .doc-lead, .slab-body, .use-item p, .spec td, .fcard p, .cat-head p,
.rel-card p, .next-list a span, .want-row .sub, .ind-row p,
.callout-list li, .steps li, .scene-row p, .note, .list-table td {
  font-weight: 400;
}

/* 強調はオレンジの太字だけ。地の文と同じ太さで置かない */
.prose strong,
.slab-body strong,
.sec-points li strong {
  color: var(--primary-hover);
  font-weight: 700;
}

/* とくに強い1行だけ、マーカーを引く */
.prose mark {
  background: linear-gradient(transparent 62%, #FFE1CE 62%);
  color: inherit;
  font-weight: 700;
  padding: 0 1px;
}

.sec-points li { font-weight: 400; color: #333; }
.use-item h3, .sub-h, .sec-h, .doc-h2-ul { font-weight: 700; }
.lead-band { font-weight: 700; }

/* ============================================
   本文の終わりに置く案内
   ============================================ */
/* .doc-layout section { padding: 0 }（681行）のほうが詳細度が高く、
   この箱の余白が0になっていた。見出しと枠線が接し、ボタンの下も1pxだった。 */
.doc-cta,
.doc-layout .doc-cta {
  margin: 56px 0 8px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft, #FAF9F8);
}
.doc-cta-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.6;
}
.doc-cta-text {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.9;
  margin: 0 0 20px;
  max-width: 42em;
}
.doc-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.doc-cta-btn {
  display: inline-block;
  padding: 11px 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  background: #fff;
}
.doc-cta-btn.is-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.doc-cta-btn:hover { border-color: var(--primary); color: var(--primary); }
.doc-cta-btn.is-primary:hover { background: var(--primary-hover); color: #fff; }

/* ============================================
   スマートフォンでの並び（2026-08-16）
   1カラムに畳んだとき、左ナビが本文より先に来て画面の最初を占めていた。
   固定ヘッダーの下に潜り込んでもいた。本文を先に読ませ、ナビは後ろに回す。
   ============================================ */
@media (max-width: 980px) {
  .doc-layout { gap: 0; }
  .doc-main { order: 1; min-width: 0; }
  .sidenav  { order: 2; margin-top: 56px; }

  /* 固定ヘッダーぶんの余白は、ここで確保する（2026-08-17 修正）。
     以前は .doc-layout の padding-top で空けてここを 8px に詰めていたが、
     下の「一覧ページの入口」の節が .doc-layout の padding-top を 0 にするため、
     帯を持たない詳細ページ（機能・業種用途）だけ本文がヘッダーに潜っていた。
     パンくずは帯のあるページでは帯の中にあるので、この指定は詳細ページにだけ効く。 */
  .doc-layout .breadcrumb,
  .doc-main .crumbs-inline { padding-top: calc(var(--header-h) + 20px); }

  /* 左ナビは畳んでおく。開くと機能一覧がそのまま出る */
  .sidenav .sidenav-box { border-radius: 10px; }
  .sidenav-cta { margin-top: 20px; }
}

@media (max-width: 620px) {
  .doc-layout { padding-left: 16px; padding-right: 16px; }
  .doc-title { font-size: 1.55rem; }
  .sec-full .sec-shot, .sec-split .sec-shot { margin-top: 18px; }
  .doc-cta, .doc-layout .doc-cta { padding: 24px 20px; }
  .doc-cta-btns { flex-direction: column; }
  .doc-cta-btn { text-align: center; }
}


/* ============================================
   幅は最後にここで決める（2026-08-16）
   途中に max-width が3か所あって、どれが効いているか分からなくなっていた。
   サイト共通の1120pxに揃え、ヘッダーと本文の左端を必ず同じにする。
   ============================================ */
.doc-page .header-inner,
.doc-page .doc-layout {
  max-width: var(--doc-w);
  padding-left: var(--doc-pad);
  padding-right: var(--doc-pad);
  margin-left: auto;
  margin-right: auto;
}
.doc-page .doc-layout { padding-bottom: 80px; }

@media (max-width: 620px) {
  .doc-page .header-inner,
  .doc-page .doc-layout { padding-left: 16px; padding-right: 16px; }
}

/* ============================================
   一覧のカード（2026-08-16）
   列の指定がメディアクエリより後ろにも書いてあり、後勝ちで
   幅375pxでも3列のままだった。カード幅104px＝日本語4〜5文字で
   折り返していたので、ここで最後に決め直す。
   ============================================ */
@media (max-width: 980px) {
  .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .fcards { grid-template-columns: minmax(0, 1fr); }
  .fcard-empty { display: none; }
}

/* フォームの文字。16px未満だと、iPhoneで入力欄を触った瞬間に画面が拡大する */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], select, textarea {
  font-size: 16px;
}

/* ============================================
   一覧カードの列数（2026-08-16・実測にもとづく）
   3列だとカード幅253px・本文211px・1行14.4字で、
   日本語としては短すぎた（読みやすいのは25〜35字）。
   2列にして1行22〜24字にする。
   ============================================ */
.fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.fcard { padding: 24px 26px 22px; }

@media (max-width: 700px) {
  .fcards { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================
   本文の行長（2026-08-16・やり直し）
   1行36字に収めようとして「段落だけ」に上限をかけた。
   その結果、本文カラムが792pxあるのに本文だけ611pxで止まり、
   同じページの中で節の区切り線・画像・カードと右端が合わなくなった。
   CTAの箱も792pxに対して本文547pxで、文の途中で折り返していた。

   行長はコンテナの幅で決める。段落だけを狭めない。
   （上の .prose { max-width: 41em } を打ち消すため none を明示する）
   ============================================ */
.prose,
.prose-lead,
.doc-main > .prose p,
.sec .prose,
.lead-band,
.doc-cta-text { max-width: none; }

/* 画像の横に並ぶ節は、もともと列が狭い。ここは制限しない */
.sec-split .prose,
.prose-with-shot .prose { max-width: none; }

/* 画像の横の本文が28字しかなかったので、画像側を少し詰めて本文を広げる。
   ※ この指定をメディアクエリの外に置いていたため、980px以下で1カラムに
     戻す指定（880行・1047行・1081行）を全部打ち消し、スマートフォンで
     22ページの本文が幅35px＝1行2字に潰れていた。PCだけに効かせる。 */
@media (min-width: 981px) {
  .sec-split { grid-template-columns: 268px minmax(0, 1fr); gap: 40px; }
}

/* 機能・業種用途のページの見出し。ここだけ normal のままだった */
.doc-page h1, .doc-page h2, .doc-page h3,
.doc-title, .sec-h, .sub-h, .doc-h2-ul, .cat-head h2 { letter-spacing: 0.02em; }

/* 上の行から漏れていて letter-spacing: 0 のままだったもの。
   とくに .lead-band は69ページの見出し直下にある、いちばん目立つ一行 */
.slab-title, .scene-row h3, .cat-n, .sec-n { letter-spacing: 0.02em; }
.lead-band { letter-spacing: 0.05em; }

/* ============================================
   一覧ページの入口（2026-08-16）
   パンくず・見出し・リードを帯の中にまとめ、
   その下を「探す（左）」と「一覧（右）」の2カラムにする。
   ============================================ */
.doc-hero-band {
  background: var(--primary);
  padding: 96px 0 48px;
  margin-bottom: 48px;
}
.doc-hero-inner {
  max-width: var(--doc-w);
  margin: 0 auto;
  padding: 0 var(--doc-pad);
}
.doc-hero-band .breadcrumb { padding: 0 0 18px; }
.doc-hero-band .breadcrumb a { color: rgba(255, 255, 255, 0.82); }
.doc-hero-band .breadcrumb a:hover { color: #fff; }
.doc-hero-band .breadcrumb .breadcrumb-sep { color: rgba(255, 255, 255, 0.5); }
.doc-hero-band .breadcrumb [aria-current="page"] { color: #fff; }

.doc-hero-title {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 16px;
}
.doc-hero-lead {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.92);
  /* 帯の内側は1120px。36emだと588pxで止まり、右に508px空いたうえ
     「AIチ／ャットボット」のような位置で折り返していた */
  max-width: 46em;
  margin: 0;
}

/* 帯を出したので、本文側の上の余白は要らない */
.doc-page .doc-layout { padding-top: 0; }

@media (max-width: 980px) {
  .doc-hero-band { padding: 84px 0 32px; margin-bottom: 32px; }
}
@media (max-width: 620px) {
  .doc-hero-inner { padding-left: 16px; padding-right: 16px; }
}

/* ============================================
   カテゴリーの見出し（2026-08-16・実測にもとづく）
   番号を左の列に置いていたため、見出しと説明だけ45px右にずれ、
   下のカードとも左端が合っていなかった。番号は見出しの前に置く。
   ============================================ */
.cat-head {
  display: block;
  margin-bottom: 20px;
}
.cat-head .cat-n {
  display: inline-block;
  margin-right: 12px;
  vertical-align: baseline;
}
.cat-head h2 { display: inline; }
.cat-head p {
  margin: 10px 0 0;
  /* 見出しは792px全幅なのに説明だけ530pxで止まっていた */
  max-width: none;
}

/* ============================================
   左ナビ（2026-08-16）
   実測 12.8px・上下8pxで、項目が詰まって読みにくかった。
   カテゴリーの見出しと、いま見ているページの色分けが
   どちらも #FFF4EF で、選択位置が分からなくなっていた。
   ============================================ */
.sidenav-head { font-size: 0.95rem; padding: 15px 18px; }
.sidenav-group > .g-title { font-size: 0.9rem; padding: 13px 18px; }
.sidenav-group > .g-title .n,
.sidenav-group > .g-title .cnt { font-size: 0.82rem; }
/* 開いているカテゴリーは文字色だけで示す。面は塗らない */
.sidenav-group[open] > .g-title { background: var(--bg-sub); }
.sidenav a,
.sidenav .nav-plain {
  font-size: 0.9rem;
  padding: 11px 18px;
  align-items: center;
  line-height: 1.6;
}
.sidenav a .n { font-size: 0.82rem; }
.sidenav .g-more { font-size: 0.82rem; padding: 11px 18px 14px; }
/* いま見ているページだけを塗る */
.sidenav a.is-current { background: var(--primary-light); border-left-width: 3px; }

/* 左ナビ下の導線。コラムのバナー2枚をそのまま使う。
   .sidenav a（灰色・padding 11px 18px）が当たると、
   バナーの見出しが背景に沈んで読めなくなるので、ここだけ外す。 */
.sidenav-banners { margin-top: 18px; display: grid; gap: 10px; }
.sidenav .sidenav-banners a {
  padding: 15px 16px;
  gap: 12px;
  line-height: 1.35;
  border-left: 0;
  color: #fff;
  font-size: 1rem;
}
.sidenav .sidenav-banners a:hover { color: #fff; }
.sidenav .sidenav-banners .cas-sidebar-banner-doc:hover { background: var(--primary-hover); }
.sidenav .sidenav-banners .cas-sidebar-banner-diag:hover { background: #1c1917; }
@media (max-width: 980px) { .sidenav-banners { display: none; } }

/* カテゴリー一覧の下の「一覧をすべて見る」。
   実測でカードとの間隔が0pxで、下のCTAとは56px空いていた */
.doc-back { margin: 32px 0 0; }
.doc-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
}
.doc-back a:hover { text-decoration: underline; }

/* ============================================================
   パートナープログラム（/partner/）
   接頭辞は pt-。

   色の決めごと（ここが曖昧だと「イメージカラーが分からない」になる）
     紫  = このページの主役。ラベル・番号・強調・ボタン・申込・キャンペーン。
     橙  = SHIRITAI 本体の色。ヘッダー、フッター、ロゴだけに残す。
   そのため pt- の節の中だけ --primary を紫に差し替える。
   節の中にある既存部品（FAQ・フォーム）も、これで自動的に紫へ揃う。

   既存部品の流用は .trusted-by（導入企業ロゴ）と .faq-item、
   .contact-layout / .form-* / .dl-*（申込フォーム）の3系統だけ。
   ヒーロー・課題・利点・キャンペーン・Step・対応表・比較図・
   パートナー画面・流れ・CTA帯は、このページのために作っている。
   ============================================================ */

:root {
  --pt-camp: #4A3AA8;
  --pt-camp-deep: #372B84;
  --pt-camp-bright: #7B67E8;
  --pt-camp-tint: #F1EEFC;
}

section[class^="pt-"] {
  --primary: var(--pt-camp);
  --primary-hover: var(--pt-camp-deep);
  --primary-light: var(--pt-camp-tint);
  --primary-bg: rgba(74, 58, 168, 0.06);
}

/* ---------- 共通の見出し ---------- */
.pt-sec-head { max-width: 800px; margin: 0 0 48px; }
.pt-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pt-camp);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--pt-camp);
  margin-bottom: 20px;
}
.pt-h2 {
  word-break: keep-all;
  overflow-wrap: break-word;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
}
.pt-sec-lead { margin-top: 18px; font-size: 1.02rem; color: var(--text-sub); line-height: 1.95; }
.pt-note { margin-top: 20px; font-size: 0.9rem; color: var(--text-sub); line-height: 1.95; }
.pt-note a { color: var(--pt-camp); text-decoration: underline; }

/* ---------- ヒーロー ---------- */
.pt-hero { background: var(--bg-dark); color: #fff; padding: 148px 0 96px; position: relative; overflow: hidden; }
.pt-hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 46%;
  height: 130px;
  background: var(--bg);
  clip-path: polygon(28% 100%, 100% 0, 100% 100%);
  pointer-events: none;
}
.pt-hero-inner { display: grid; grid-template-columns: 1fr 0.92fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.pt-hero-title {
  word-break: keep-all;
  overflow-wrap: break-word;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.pt-hero-lead { font-size: 1.02rem; line-height: 2; color: rgba(255, 255, 255, 0.66); max-width: 560px; margin-bottom: 34px; }
.pt-hero-caption { margin-top: 14px; font-size: 0.8rem; line-height: 1.8; color: rgba(255, 255, 255, 0.5); }
.pt-shot-caption { margin-top: 12px; font-size: 0.78rem; line-height: 1.75; color: var(--text-muted); }
.pt-hero-visual img { width: 100%; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }

/* キャンペーンの旗。ヒーローと申込の2か所で反復する */
.pt-camp-flag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--pt-camp);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 9px 22px 9px 10px;
  margin-bottom: 16px;
}
.pt-camp-flag-mark {
  background: #fff;
  color: var(--pt-camp);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}
.pt-camp-flag-text { font-size: 0.88rem; line-height: 1.6; }
.pt-camp-flag-text strong { font-weight: 800; }

/* 2行のCTA（上に煽り文、下に動詞で終わる文言） */
.pt-hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.pt-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  border-radius: var(--radius-pill);
  padding: 12px 34px 14px;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.pt-btn:hover { transform: translateY(-2px); }
.pt-btn-kicker { font-size: 0.75rem; font-weight: 600; opacity: 0.8; }
.pt-btn-main { font-size: 0.98rem; font-weight: 800; }
.pt-btn-camp { background: var(--pt-camp); color: #fff; }
.pt-btn-camp:hover { background: var(--pt-camp-deep); }
.pt-btn-line { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.3); }
.pt-btn-line:hover { border-color: #fff; }

.pt-trusted { padding: 44px 0; border-bottom: 1px solid var(--border); }

.pt-nb { white-space: nowrap; }

/* ---------- SHIRITAIとは ---------- */
.pt-about-sec { background: var(--bg-sub); }
.pt-about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }
.pt-about-shot { display: flex; flex-direction: column; align-items: center; }
.pt-about-shot img { width: 100%; max-width: 400px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.pt-about-points { display: grid; gap: 4px; }
.pt-about-point { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 24px 26px; }
.pt-about-point h3 {
  position: relative;
  padding-left: 28px;
  font-size: 1.06rem;
  font-weight: 800;
  margin-bottom: 8px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.pt-about-point h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A3AA8'%3E%3Cpath d='M11,16.4l-4.7,-4.7l1.4,-1.4l3.3,3.3l8.4,-8.4c-1.9,-1.9 -4.5,-3.2 -7.4,-3.2c-5.5,0 -10,4.5 -10,10c0,5.5 4.5,10 10,10c5.5,0 10,-4.5 10,-10c0,-1.9 -0.5,-3.6 -1.4,-5.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.pt-about-point p { font-size: 0.9rem; color: var(--text-sub); line-height: 1.95; }

/* ---------- パートナーになる利点（6枚） ---------- */
.pt-merits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pt-merit { background: var(--bg); padding: 34px 32px 36px; }
.pt-merit-num {
  display: block;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pt-camp-bright);
  line-height: 1;
  margin-bottom: 14px;
}
.pt-merit-kicker { display: block; font-size: 0.82rem; font-weight: 700; color: var(--pt-camp); margin-bottom: 8px; }
.pt-merit-body { font-size: 1.14rem; font-weight: 800; line-height: 1.6; margin: 0; word-break: keep-all; overflow-wrap: break-word; }

/* ---------- キャンペーン ---------- */
.pt-camp-sec { background: var(--pt-camp); color: #fff; text-align: center; position: relative; overflow: hidden; }
.pt-camp-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.1), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}
.pt-camp-head { position: relative; max-width: 720px; margin: 0 auto 48px; }
.pt-camp-badge {
  display: inline-block;
  background: #fff;
  color: var(--pt-camp);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  padding: 6px 20px;
  margin-bottom: 20px;
}
.pt-camp-title {
  word-break: keep-all;
  overflow-wrap: break-word;
  font-size: clamp(1.55rem, 3.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.5;
  margin: 0 0 18px;
}
.pt-camp-lead { font-size: 0.98rem; line-height: 2; color: rgba(255, 255, 255, 0.72); }
.pt-camp-compare { position: relative; display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 52px; flex-wrap: wrap; }
.pt-camp-col { min-width: 190px; display: flex; flex-direction: column; align-items: center; }
.pt-camp-col-label { display: inline-block; font-size: 0.8rem; font-weight: 700; border-radius: var(--radius-pill); padding: 5px 16px; margin-bottom: 14px; }
.pt-camp-col-normal .pt-camp-col-label { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.7); }
.pt-camp-col-now .pt-camp-col-label { background: #fff; color: var(--pt-camp); }
.pt-camp-col-num { font-family: var(--font-en); font-weight: 900; line-height: 1; display: inline-flex; align-items: baseline; gap: 6px; }
.pt-camp-col-normal .pt-camp-col-num { font-size: 3rem; color: rgba(255, 255, 255, 0.4); }
.pt-camp-col-now .pt-camp-col-num { font-size: 5.6rem; color: #fff; }
.pt-camp-col-unit { font-family: var(--font-jp); font-size: 0.98rem; font-weight: 700; }
.pt-camp-col-normal .pt-camp-col-unit { font-size: 0.82rem; }
.pt-camp-arrow { color: rgba(255, 255, 255, 0.45); display: inline-flex; }
.pt-camp-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  text-align: left;
  margin-bottom: 24px;
  position: relative;
}
.pt-camp-detail-col { padding: 30px 32px; }
.pt-camp-detail-col + .pt-camp-detail-col { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.pt-camp-detail-title { font-size: 0.95rem; font-weight: 800; margin-bottom: 14px; }
.pt-camp-list { margin: 0; padding: 0; list-style: none; }
.pt-camp-list li { position: relative; padding: 7px 0 7px 26px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); line-height: 1.8; }
.pt-camp-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 16px;
  height: 16px;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M11,16.4l-4.7,-4.7l1.4,-1.4l3.3,3.3l8.4,-8.4c-1.9,-1.9 -4.5,-3.2 -7.4,-3.2c-5.5,0 -10,4.5 -10,10c0,5.5 4.5,10 10,10c5.5,0 10,-4.5 10,-10c0,-1.9 -0.5,-3.6 -1.4,-5.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.pt-camp-terms { position: relative; margin-top: 26px; font-size: 0.78rem; line-height: 1.9; color: rgba(255, 255, 255, 0.5); text-align: left; }

/* ---------- 代行の使い道（バクラク 106688「導入後のサポート」と同じ骨格）
   左に見出し・説明・導線、右に横長カード3枚。カードは左端にアイコン、右にテキスト。
   番号もアイコンの下地も置かない。 */
.pt-use-inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; }
.pt-use-head .pt-h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.pt-use-head .pt-sec-lead { font-size: 0.96rem; }
.pt-use-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--pt-camp);
}
.pt-use-link .pt-cta-arrow { border-color: var(--pt-camp); color: var(--pt-camp); }
.pt-use-link:hover .pt-cta-arrow { background: var(--pt-camp); color: #fff; }

.pt-uses { display: grid; gap: 14px; }
.pt-use {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 20px;
  align-items: start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px 30px;
}
.pt-use-icon { display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }
.pt-use-icon img { width: 44px; height: 44px; }
.pt-use-title { font-size: 1.06rem; font-weight: 800; color: var(--pt-camp); margin-bottom: 8px; }
.pt-use-desc { font-size: 0.92rem; color: var(--text-sub); line-height: 1.95; }

/* ---------- Step ---------- */
.pt-steps { display: grid; gap: 18px; }
.pt-step { display: grid; grid-template-columns: 0.52fr 0.48fr; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.pt-step-body { background: var(--bg-dark); color: #fff; padding: 44px 46px; }
.pt-step-num {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--pt-camp-bright);
  padding: 4px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.pt-step-title { font-size: 1.36rem; font-weight: 800; line-height: 1.5; margin-bottom: 14px; }
.pt-step-desc { font-size: 0.96rem; line-height: 2; color: rgba(255, 255, 255, 0.66); }
.pt-step-shot { background: var(--bg-sub); padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.pt-step-shot img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }

/* 出たこと → 提案 */
.pt-signals { margin-top: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pt-signals-head, .pt-signal-row { display: grid; grid-template-columns: 1fr 1fr; }
.pt-signals-head { background: var(--bg-sub); border-bottom: 1px solid var(--border); }
.pt-signals-head span { padding: 14px 24px; font-size: 0.8rem; font-weight: 700; color: var(--text-sub); }
.pt-signals-head span + span, .pt-signal-row span + span { border-left: 1px solid var(--border); }
.pt-signal-row + .pt-signal-row { border-top: 1px solid var(--border-light); }
.pt-signal-row span { padding: 18px 24px; font-size: 0.94rem; line-height: 1.8; }
.pt-signal-from { color: var(--text-sub); }
.pt-signal-to { font-weight: 700; }

/* ---------- お客様から見た違い ---------- */
.pt-why-sec { background: var(--bg-sub); }
.pt-diagram { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 40px; }
.pt-diagram-col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 28px 28px 26px; }
.pt-diagram-one { border-color: var(--pt-camp); }
.pt-diagram-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  margin-bottom: 20px;
  background: var(--border-light);
  color: var(--text-sub);
}
.pt-diagram-one .pt-diagram-label { background: var(--pt-camp); color: #fff; }
.pt-diagram-boxes { display: flex; gap: 8px; flex-wrap: nowrap; margin-bottom: 16px; }
.pt-diagram-box {
  flex: 1 1 0;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--bg-sub);
}
.pt-diagram-box-on { border-style: solid; border-color: var(--pt-camp); background: var(--pt-camp-tint); color: var(--text); }
.pt-diagram-plus { display: flex; align-items: center; font-size: 0.9rem; font-weight: 700; color: var(--pt-camp); flex: 0 0 auto; }
.pt-diagram-note { font-size: 0.86rem; color: var(--text-sub); line-height: 1.9; }
.pt-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pt-reason { background: var(--bg); padding: 28px 30px; }
.pt-reason-title { font-size: 1.02rem; font-weight: 800; margin-bottom: 10px; }
.pt-reason-desc { font-size: 0.9rem; color: var(--text-sub); line-height: 1.95; }

/* ---------- パートナー画面 ---------- */
.pt-console { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; }
.pt-console-shot img { width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.pt-console-list { margin: 0; padding: 0; list-style: none; }
.pt-console-list li {
  position: relative;
  padding: 16px 0 16px 34px;
  font-size: 0.92rem;
  color: var(--text-sub);
  line-height: 1.85;
  border-bottom: 1px solid var(--border);
}
.pt-console-list li:first-child { padding-top: 0; }
.pt-console-list li:first-child::before { top: 4px; }
.pt-console-list li:last-child { border-bottom: 0; }
.pt-console-list li strong { display: block; font-size: 1.02rem; color: var(--text); margin-bottom: 4px; }
.pt-console-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A3AA8'%3E%3Cpath d='M11,16.4l-4.7,-4.7l1.4,-1.4l3.3,3.3l8.4,-8.4c-1.9,-1.9 -4.5,-3.2 -7.4,-3.2c-5.5,0 -10,4.5 -10,10c0,5.5 4.5,10 10,10c5.5,0 10,-4.5 10,-10c0,-1.9 -0.5,-3.6 -1.4,-5.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* 価格は大きく謳わない。細い帯で1回だけ触れる */
.pt-price-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 0;
  margin-top: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pt-price-band-main { background: var(--pt-camp); color: #fff; padding: 30px 34px; }
.pt-price-band-title { font-size: 1.12rem; font-weight: 800; margin-bottom: 8px; }
.pt-price-band-desc { font-size: 0.88rem; line-height: 1.9; color: rgba(255, 255, 255, 0.75); }
.pt-price-band-side { background: var(--pt-camp-tint); padding: 30px 34px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.pt-price-band-note { font-size: 0.85rem; line-height: 1.85; color: var(--text-sub); margin-bottom: 14px; }
.pt-price-band-link { display: inline-flex; align-items: center; gap: 12px; font-size: 0.92rem; font-weight: 800; color: var(--pt-camp); }
.pt-price-band-link .pt-cta-arrow { border-color: var(--pt-camp); color: var(--pt-camp); }
.pt-price-band-link:hover .pt-cta-arrow { background: var(--pt-camp); color: #fff; }

/* ---------- はじめかた（矢羽根） ---------- */
.pt-flow-sec { background: var(--bg-sub); }
.pt-chevrons { display: flex; align-items: stretch; gap: 6px; }
.pt-chevron {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 22px 18px 22px 30px;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}
.pt-chevron:first-child { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding-left: 22px; }
.pt-chevron:nth-child(1) { background: #EFECFA; }
.pt-chevron:nth-child(2) { background: #E3DEF7; }
.pt-chevron:nth-child(3) { background: #CFC7F1; }
.pt-chevron:nth-child(4) { background: #B7ABEA; }
.pt-chevron:nth-child(5) { background: #9C8CE3; }
.pt-chevron-step { display: block; font-family: var(--font-en); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; color: var(--pt-camp-deep); opacity: 0.75; }
.pt-chevron-num { display: block; font-family: var(--font-en); font-size: 1.7rem; font-weight: 900; line-height: 1.2; color: var(--pt-camp-deep); }
.pt-chevron-name { display: block; margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: var(--text); word-break: keep-all; }
.pt-flow-notes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.pt-flow-note { display: flex; gap: 12px; }
.pt-flow-note-num {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pt-camp);
  color: #fff;
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-flow-note p { font-size: 0.86rem; color: var(--text-sub); line-height: 1.9; }

/* ---------- 申込。紫のベタ塗りに白いカードを置く ---------- */
.pt-apply-sec { background: var(--pt-camp-tint); text-align: center; }
.pt-apply-sec .pt-sec-head { margin-left: auto; margin-right: auto; text-align: center; }
.pt-apply-sec .pt-label { color: var(--pt-camp); border-bottom-color: var(--pt-camp); }
.pt-apply-sec .pt-sec-lead { color: var(--text-sub); }
.pt-apply-sec .contact-layout { text-align: left; }
.pt-camp-flag-center { display: inline-flex; }
.pt-apply-info { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 32px; }
.pt-apply-info-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 18px; }
.pt-apply-list { margin: 0 0 22px; padding: 0; list-style: none; }
.pt-apply-list li { position: relative; padding: 9px 0 9px 26px; font-size: 0.94rem; line-height: 1.85; }
.pt-apply-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A3AA8'%3E%3Cpath d='M11,16.4l-4.7,-4.7l1.4,-1.4l3.3,3.3l8.4,-8.4c-1.9,-1.9 -4.5,-3.2 -7.4,-3.2c-5.5,0 -10,4.5 -10,10c0,5.5 4.5,10 10,10c5.5,0 10,-4.5 10,-10c0,-1.9 -0.5,-3.6 -1.4,-5.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.pt-apply-note { font-size: 0.88rem; color: var(--text-sub); line-height: 1.95; }
.pt-apply-note a { color: var(--pt-camp); text-decoration: underline; }
.pt-form { background: #fff; border: 1px solid var(--border); }
.pt-form .dl-submit { background: var(--pt-camp); color: #fff; width: 100%; }
.pt-form .dl-submit:hover { background: var(--pt-camp-deep); }

/* ---------- 下部CTA帯 ---------- */
.pt-cta { padding: 0; }
.pt-cta-inner { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr; }
.pt-cta-photo { min-height: 300px; background-color: var(--bg-dark-sub); background-size: cover; background-position: center; }
.pt-cta-col { padding: 56px 48px; }
.pt-cta-col-primary { background: var(--pt-camp); color: #fff; }
.pt-cta-col-sub { background: var(--bg-dark); color: #fff; }
.pt-cta-title { font-size: 1.35rem; font-weight: 800; line-height: 1.5; margin-bottom: 14px; }
.pt-cta-desc { font-size: 0.9rem; line-height: 1.9; opacity: 0.75; margin-bottom: 22px; }
.pt-cta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}
.pt-cta-link:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.pt-cta-arrow {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.pt-cta-link:hover .pt-cta-arrow { background: rgba(255, 255, 255, 0.18); }

/* ---------- 幅を詰めたとき ---------- */
@media (max-width: 980px) {
  .pt-diagram-boxes { flex-wrap: wrap; }
  .pt-diagram-box { flex: 1 1 46%; }
  .pt-diagram-plus { flex: 0 0 100%; justify-content: center; }
}

@media (max-width: 1080px) {
  .pt-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .pt-hero-visual { max-width: 560px; }
  .pt-hero::after { display: none; }
  .pt-about { grid-template-columns: 1fr; gap: 32px; }
  .pt-merits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-use-inner { grid-template-columns: 1fr; gap: 32px; }
  .pt-step { grid-template-columns: 1fr; }
  .pt-console { grid-template-columns: 1fr; gap: 32px; }
  .pt-price-band { grid-template-columns: 1fr; }
  .pt-chevrons { flex-wrap: wrap; }
  .pt-chevron { flex: 1 1 40%; }
  .pt-flow-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-cta-inner { grid-template-columns: 1fr 1fr; }
  .pt-cta-photo { grid-column: 1 / -1; min-height: 220px; }
}

@media (max-width: 700px) {
  .pt-hero { padding: 124px 0 72px; }
  .pt-hero-buttons { flex-direction: column; align-items: stretch; }
  .pt-btn { padding: 12px 20px 14px; }
  .pt-camp-flag { border-radius: var(--radius-sm); align-items: flex-start; padding: 12px 16px; }
  .pt-camp-flag-mark { white-space: nowrap; }
  .pt-merits { grid-template-columns: 1fr; }
  .pt-camp-compare { gap: 14px; }
  .pt-camp-arrow { transform: rotate(90deg); }
  .pt-camp-col { min-width: 0; }
  .pt-camp-col-now .pt-camp-col-num { font-size: 4.4rem; }
  .pt-camp-detail { grid-template-columns: 1fr; }
  .pt-camp-detail-col + .pt-camp-detail-col { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .pt-step-body { padding: 30px 24px; }
  .pt-step-shot { padding: 20px; }
  .pt-signals-head { display: none; }
  .pt-signal-row { grid-template-columns: 1fr; }
  .pt-signal-row span + span { border-left: 0; border-top: 1px solid var(--border-light); }
  .pt-signal-row span { padding: 14px 18px; }
  .pt-signal-to::before { content: '提案　'; font-size: 0.75rem; color: var(--pt-camp); font-weight: 700; }
  .pt-diagram { grid-template-columns: 1fr; }
  .pt-diagram-boxes { flex-wrap: wrap; justify-content: center; }
  .pt-diagram-box { flex: 1 1 100%; min-height: 54px; }
  .pt-diagram-plus { flex: 1 1 100%; justify-content: center; }
  .pt-reasons { grid-template-columns: 1fr; }
  .pt-chevron { flex: 1 1 100%; clip-path: none; border-radius: 8px; padding: 16px; }
  .pt-chevron:first-child { clip-path: none; }
  .pt-flow-notes { grid-template-columns: 1fr; }
  .pt-cta-inner { grid-template-columns: 1fr; }
  .pt-cta-col { padding: 40px 24px; }
}