/* 下層ページの頭（パンくず・ページ題・KPI の帯） */
.crumb { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.crumb ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 10px 0; font-size: var(--text-note); color: var(--ink-3);
}
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--accent-2); text-decoration: underline; }
.crumb li + li::before { content: "›"; margin-right: 8px; color: var(--ink-4); }
.crumb [aria-current] { color: var(--ink-2); font-weight: 500; }
.hero { padding: 48px 0 44px; }
.hero__kicker { display: flex; align-items: center; gap: 12px; font-size: var(--text-note); color: var(--ink-3); font-weight: 600; margin-bottom: 18px; letter-spacing: 0.02em; }
.hero__kicker strong { background: var(--accent-3); color: #fff; font-weight: 700; font-size: var(--text-note); letter-spacing: 0.08em; padding: 4px 12px; }
.hero__title { font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 18px; line-height: var(--leading-heading); }
.hero__title small { display: block; font-size: var(--text-h3); font-weight: 700; color: var(--accent-3); margin-top: 8px; letter-spacing: 0; }
.hero__lead { font-size: var(--text-lead); color: var(--ink); }
.kpi {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--accent-2);
  border-bottom: 1px solid var(--line-strong);
  background: #fff;
}
.kpi__item { padding: 20px 24px 18px; }
.kpi__item + .kpi__item { border-left: 1px solid var(--line); }
.kpi__label { font-size: var(--text-note); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 6px; }
.kpi__note { margin-top: 10px; font-size: var(--text-note); color: var(--ink-3); line-height: 1.7; }
.kpi__value { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: var(--num); line-height: 1.5; color: var(--sub); }
.kpi__value small { font-size: 17px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }

/* 2026-10-22 事例ページの上部を、下層ページの上部（PageIntro）と同じ見た目にそろえる。構成（題、副題、説明、KPI）は変えない */
.hero { position: relative; overflow: hidden; background: #fff; padding: 56px 0 52px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 30% 30%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 85% 70% at 30% 30%, #000 25%, transparent 78%); }
.hero > .container { position: relative; }
.hero__kicker strong { display: inline-flex; align-items: center; gap: 8px; background: none; color: var(--accent-3); padding: 0; font-size: 13px; letter-spacing: .14em; }
.hero__kicker strong::before { content: ""; width: 10px; height: 10px; background: var(--accent-2); }
.hero__lead .mk { font-weight: 700; background: linear-gradient(transparent 62%, var(--accent-line) 62%); }
.hero__title, .hero__sub, .hero__lead { word-break: auto-phrase; }