/* 導入事例ページ専用(トップ・他ページには読み込まない) */
.case-hero { padding: 48px 0 56px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.case-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-sub); margin-bottom: 28px; }
.case-crumb a { text-underline-offset: 3px; }
.case-h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 5.4vw, 38px); line-height: 1.55; letter-spacing: 0.04em; }

.case-two { display: grid; gap: 16px; }
.case-card { background: var(--bg); border: 1px solid var(--line); border-top: 2px solid var(--accent); padding: 24px 22px 26px; }
.section-soft .case-card { background: #fff; }
.case-card-tag { font-size: 12px; letter-spacing: 0.16em; color: var(--accent-dark); margin-bottom: 8px; }
.case-card p:not(.case-card-tag) { font-size: 15px; line-height: 2; }

/* 分析データ */
.data-box { margin: 0 0 24px; background: #fff; border: 1px solid var(--line); padding: 24px 20px 22px; }
.data-cap { display: grid; gap: 2px; font-size: 13px; color: var(--text-sub); margin-bottom: 20px; }
.data-cap strong { font-weight: 500; color: var(--text); font-size: 15px; }
.data-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.data-row { display: grid; gap: 8px; }
.data-label { font-size: 14px; line-height: 1.7; }
.data-track { height: 18px; background: var(--bg-soft); }
.data-bar { display: block; height: 100%; }
.bar-all { background: #b9bdb5; }
.bar-mid { background: #7f9a85; }
.bar-end { background: var(--accent-dark); }
.data-num { font-size: 14px; color: var(--text-sub); }
.data-num b { font-size: 30px; font-weight: 400; color: var(--text); margin-right: 4px; letter-spacing: 0.02em; }
.data-num small { display: block; margin-top: 2px; font-size: 12px; }
.data-note { margin-top: 20px; font-size: 12px; color: var(--text-sub); line-height: 1.8; }
.case-caution { margin-top: 24px; padding: 16px 18px; font-size: 13px; line-height: 1.9; color: var(--text-sub); background: #fff; border-left: 3px solid var(--line); }
.case-caution strong { color: var(--text); font-weight: 500; }

/* 画像のタップ拡大(共通) */
.zoom-link { position: relative; display: block; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }
.zoom-link img { width: 100%; height: auto; }
.zoom-hint { position: absolute; right: 8px; bottom: 8px; padding: 3px 10px; font-size: 12px; color: #fff; background: rgba(0,0,0,0.55); }
.doc-figure figcaption, .flow-figure figcaption { margin-top: 12px; font-size: 12px; color: var(--text-sub); line-height: 1.8; }

/* お問い合わせ対応の一元化フロー図(PCでは、本文の幅より大きく表示する) */
.flow-figure { margin: 0; }


/* 業務カルテ画面(画像の解像度に合わせ、拡大しすぎない) */
.karte-figure { margin: 0 auto; max-width: 687px; }
.karte-figure figcaption { margin-top: 12px; font-size: 13px; color: var(--text-sub); line-height: 1.8; }
.doc-figure img { width: 100%; height: auto; }
.zoom-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20,24,22,0.92); }
.zoom-dialog::backdrop { background: rgba(20,24,22,0.92); }
.zoom-close { position: fixed; top: 12px; right: 12px; z-index: 2; padding: 10px 18px; font: inherit; font-size: 14px; color: #fff; background: rgba(0,0,0,0.6); border: 1px solid #fff; cursor: pointer; }
.zoom-scroll { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 56px 12px 24px; }
.zoom-scroll img { width: 687px; max-width: none; height: auto; margin: 0 auto; background: #fff; }

/* KPI */
.kpi-cycle { display: grid; gap: 10px; justify-items: stretch; }
.kpi-cycle span { background: #fff; border: 1px solid var(--line); padding: 14px 18px; font-size: 15px; text-align: center; }
.kpi-cycle i { justify-self: center; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); margin: -2px 0 2px; }

/* お問い合わせ導線 */
.case-cta { border-top: 1px solid var(--line); }
.case-cta .section-title { font-size: 20px; }
.case-cta-text { margin: 20px 0 28px; color: var(--text-sub); font-size: 15px; }
.br-pc { display: none; }

/* ① ファーストビューの導入文 */
.case-lead { margin-top: 20px; font-size: 16px; line-height: 2; color: var(--text); max-width: 46em; }
.case-lead + .case-lead { margin-top: 12px; color: var(--text-sub); }
.br-sp { display: inline; }

/* ③ 分析結果のあとの、まとめの文章 */
.case-quote { margin: 32px 0 0; padding: 26px 22px 28px; background: #fff; border-left: 4px solid var(--accent); }
.case-quote p { font-size: 16px; line-height: 2; letter-spacing: 0.04em; }
.case-quote p:first-child { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--accent-dark); }
.case-quote p + p { margin-top: 10px; }

/* ④ 役割分担(簡潔な3行) */
.role-inline { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.role-inline li { display: grid; gap: 2px; padding: 14px 18px; background: var(--bg-soft); border-left: 3px solid var(--accent); }
.role-inline b { font-weight: 500; font-size: 15px; }
.role-inline span { font-size: 13px; color: var(--text-sub); line-height: 1.8; }

/* ⑤ 業務カルテ: 画面と「経営者が把握できること」 */
.karte-layout { display: grid; gap: 28px; }
.karte-points { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--accent); padding: 24px 22px 26px; }
.karte-layout .karte-points { width: 100%; max-width: 687px; margin: 0 auto; }
.karte-points-title { font-size: 12px; letter-spacing: 0.16em; color: var(--accent-dark); margin-bottom: 12px; }
.karte-points ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.karte-points li { display: grid; gap: 4px; }
.karte-points b { font-weight: 500; font-size: 15px; line-height: 1.8; }
.karte-points span { font-size: 14px; color: var(--text-sub); line-height: 1.95; }

/* ⑥ 管理指標の例 */
.kpi-examples { margin-top: 28px; }
.kpi-examples-title { font-size: 12px; letter-spacing: 0.16em; color: var(--accent-dark); margin-bottom: 10px; }
.kpi-examples ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kpi-examples li { padding: 6px 14px; font-size: 14px; border: 1px solid var(--accent); color: var(--accent-dark); background: #fff; }

@media (min-width: 768px) {
  .karte-points b { font-size: 16px; }
  .case-lead { font-size: 17px; }
  .br-sp { display: none; }
  .case-quote { padding: 32px 40px 34px; }
  .case-quote p { font-size: 17px; }
  .case-quote p:first-child { font-size: 21px; }
  .role-inline { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .role-inline li { padding: 16px 20px; }
  .case-hero { padding: 72px 0 80px; }
    .case-two { grid-template-columns: 1fr 1fr; gap: 24px; }
  .case-card { padding: 28px 28px 30px; }
  .data-box { padding: 32px 36px 28px; }
  .data-row { grid-template-columns: 300px 1fr 150px; align-items: center; gap: 24px; }
  .data-track { height: 22px; }
    .kpi-cycle { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
  .kpi-cycle i { transform: rotate(-45deg); margin: 0; }
  .case-cta .section-title { font-size: 26px; }
  .br-pc { display: inline; }
  .zoom-hint { display: none; }
  .flow-figure { width: min(1280px, calc(100vw - 96px)); margin-left: 50%; transform: translateX(-50%); }
}

@media (min-width: 1200px) {
  /* 画像を600px、説明枠を残りの幅(約350px)にして、3項目が折り返さず読める幅にする */
  .karte-layout { grid-template-columns: 600px 1fr; gap: 32px; align-items: start; }
  .karte-layout .karte-figure { max-width: none; margin: 0; }
  .karte-layout .karte-points { max-width: none; margin: 0; padding: 28px 24px 30px; }
  .karte-points b { font-size: 16px; }
}