/* =========================================================================
   EightDoor Phase 2 — pages.css
   Case Study 詳細 / Case 一覧 / QA×AI サービスページ固有の指定。
   共通部品と配色トークンは shared.css（Phase 1 から抽出）を使う。
   PC を基準に書き、幅が足りない場合だけ後段のメディアクエリで上書きする。
   ========================================================================= */

/* ---------- 共通の下地 ---------- */
.page-section {
  padding: 104px 0 112px;
  background: var(--paper);
}

.page-section + .page-section {
  border-top: 1px solid rgba(16, 21, 22, 0.08);
}

.page-section-tint {
  background: #f7f9f8;
}

.section-head {
  margin-bottom: 40px;
}

/* 下層ページの大見出し。TOPの3.5remより一段小さくし、2行に収める */
.section-head .section-title {
  max-width: 840px;
  font-size: var(--fs-h1);
  line-height: 1.3;
  text-wrap: balance;
}

.prose {
  max-width: 760px;
}

.prose p {
  margin: 0 0 20px;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.95;
  color: var(--ink-muted);
}

.prose p:last-child {
  margin-bottom: 0;
}

.phase-note {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 2px solid var(--coral);
  font-size: 1rem !important;
  line-height: 1.9;
}

/* ---------- breadcrumb ---------- */
.breadcrumb {
  margin-bottom: 34px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 12px;
  color: rgba(16, 21, 22, 0.34);
}

.breadcrumb a {
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 21, 22, 0.4);
}

.breadcrumb a:hover {
  border-bottom-color: var(--ink);
}

/* ---------- ページ先頭 ---------- */
.page-hero {
  padding: 52px 0 96px;
  background: var(--hero-base);
}

.case-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
  margin: 0 0 26px;
  font-family: var(--font-latin);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.case-label-parent {
  padding-bottom: 4px;
  border-bottom: 2px solid var(--coral);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--coral-text);
}

.case-label-sub {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--label-muted);
}

.page-title {
  max-width: 1040px;
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: var(--ls-ja);
}

.page-lead {
  max-width: 720px;
  margin: 34px 0 0;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.95;
  color: var(--ink-muted);
}

/* ---------- 関連リンク ---------- */
.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 44px;
  margin: 48px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.related-links li {
  min-width: 0;
}

/* ---------- 既存事例の観察できた変化 ---------- */
.case-metrics {
  margin: 36px 0 0;
  border-top: 1px solid rgba(16, 21, 22, 0.28);
}

.case-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 24px;
  padding: 20px 0 21px;
  border-bottom: 1px solid var(--line);
}

.case-metric dt {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink-muted);
}

.case-metric dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.6;
}

/* ---------- 事例の前後 ---------- */
.case-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding: 56px 0 60px;
  border-top: 1px solid var(--line);
}

.case-pager-item-next {
  text-align: right;
}

.case-pager-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.case-pager a {
  display: inline-block;
  max-width: 100%;
  font-size: var(--fs-lead);
  font-weight: 800;
  line-height: 1.6;
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 21, 22, 0.4);
}

.case-pager a:hover {
  border-bottom-color: var(--ink);
}

/* ---------- ページ末尾CTA ---------- */
.page-cta {
  padding: 104px 0 112px;
  background: #edf6f5;
}

.page-cta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.7fr);
  gap: 96px;
  align-items: end;
}

.page-cta-layout .section-title {
  max-width: 760px;
  font-size: var(--fs-h1);
}

.page-cta-action {
  display: grid;
  justify-items: start;
  gap: 30px;
}

.page-cta-action p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink-muted);
}

.page-cta-action .primary-cta {
  min-width: 264px;
}

/* =========================================================================
   Agentic QA Case — Closed Quality Loop（TOPの楕円図とは別表現）
   ========================================================================= */
.loop-section {
  background: #f7f9f8;
}

.loop-intro {
  max-width: 720px;
  margin-bottom: 52px;
}

.case-loop {
  position: relative;
  margin: 0;
  padding: 0 0 4px;
  border-top: 1px solid rgba(16, 21, 22, 0.28);
}

.case-loop-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding: 18px 0 17px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 700;
}

.case-loop-input-label {
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-muted);
}

/* 06 → 01 の戻り。工程の列の上を右から左へ通す */
.case-loop-return {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 38px 0 12px;
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.case-loop-return::before {
  content: "";
  position: absolute;
  right: 8.33%;
  bottom: -14px;
  left: 8.33%;
  border-top: 1px solid rgba(16, 21, 22, 0.24);
  border-left: 1px solid rgba(16, 21, 22, 0.24);
  border-right: 1px solid rgba(16, 21, 22, 0.24);
  height: 26px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.case-loop-return::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: calc(8.33% - 3px);
  width: 7px;
  height: 7px;
  border-bottom: 1px solid var(--coral);
  border-left: 1px solid var(--coral);
  transform: rotate(45deg);
}

.case-loop-return-mark {
  margin-right: 8px;
  font-size: 1rem;
  line-height: 1;
  color: var(--coral-text);
}

.case-loop-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 20px;
  margin: 0;
  padding: 0 0 40px;
  list-style: none;
}

/* 工程を貫く1本の線 */
.case-loop-track::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 8.33%;
  left: 8.33%;
  border-top: 1px solid rgba(16, 21, 22, 0.32);
}

.case-loop-step {
  position: relative;
  padding-top: 30px;
}

.case-loop-step::before {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(50% - 4px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.case-loop-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--coral-text);
}

.case-loop-meta span {
  color: var(--label-muted);
}

.case-loop-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.65;
  text-wrap: balance;
}

.case-loop-base {
  position: relative;
  padding: 30px 34px 32px;
  border: 1px solid rgba(16, 21, 22, 0.26);
  background: #edf6f5;
}

/* 06 LEARN から知識基盤へ落ちる線 */
.case-loop-base::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 91.67%;
  height: 40px;
  border-left: 1px solid rgba(16, 21, 22, 0.34);
}

/* 知識基盤から UNDERSTAND / DECIDE 側へ戻る線 */
.case-loop-base::after {
  content: "";
  position: absolute;
  top: -40px;
  left: 33%;
  height: 40px;
  border-left: 1px solid rgba(16, 21, 22, 0.34);
}

/* 06 LEARN から知識基盤へ入る向き */
.case-loop-feed-in {
  position: absolute;
  top: -9px;
  left: calc(91.67% - 4px);
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--coral);
  border-bottom: 1px solid var(--coral);
  transform: rotate(45deg);
}

/* 知識基盤から UNDERSTAND / DECIDE 側へ戻る向き */
.case-loop-feed-out {
  position: absolute;
  top: -40px;
  left: calc(33% - 4px);
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--coral);
  border-left: 1px solid var(--coral);
  transform: rotate(45deg);
}

.case-loop-base-label {
  margin: 0 0 12px;
  font-family: var(--font-latin);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.case-loop-base-states {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.7;
}

/* 矢じり用のspanと区別するため、注記はクラスで指定する */
.case-loop-base-note {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.case-loop-gate {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 26px 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink-muted);
}

.case-loop-gate-mark {
  height: 3px;
  margin-top: 11px;
  background: var(--coral);
}

.case-loop-gate-text {
  min-width: 0;
}

.case-loop-gate strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-text);
}

/* ---------- 構築できた状態（Loopと支援の流れの間の要約） ---------- */
.loop-outcome {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(16, 21, 22, 0.28);
}

.loop-outcome-title {
  margin: 0 0 24px;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.6;
}

.loop-outcome-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loop-outcome-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 16px 0 17px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.75;
}

.loop-outcome-mark {
  height: 2px;
  margin-top: 12px;
  background: var(--coral);
}

/* ---------- 支援の流れ ---------- */
.phase-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

/* 2つ目以降の phase-list は上の罫線を重ねない */
.phase-list + .evidence-states,
.phase-note + .phase-list {
  margin-top: 0;
}

.phase {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: 48px;
  padding: 46px 0 50px;
  border-bottom: 1px solid var(--line);
}

.phase-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  font-family: var(--font-latin);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-text);
}

.phase-number {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(16, 21, 22, 0.58);
}

.phase-body h3 {
  max-width: 640px;
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.55;
}

.phase-body p {
  max-width: 760px;
  margin: 0 0 18px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.95;
  color: var(--ink-muted);
}

.phase-body p:last-child {
  margin-bottom: 0;
}

/* ---------- 情報の状態 ---------- */
.evidence-states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1px;
  margin: 0 0 4px;
  padding: 1px;
  background: var(--line);
}

.evidence-state {
  display: block;
  padding: 22px 22px 24px;
  background: var(--paper);
}

/* 顧客が確認する状態だけ、品質ゲートであることを色で示す */
.evidence-state.is-gate {
  background: #f4faf9;
  box-shadow: inset 3px 0 0 var(--coral);
}

.evidence-state dt {
  font-family: var(--font-latin);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--coral-text);
}

.evidence-state dd {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink-muted);
}

/* =========================================================================
   Case Study 一覧
   ========================================================================= */
.case-index-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(16, 21, 22, 0.2);
}

.case-index-nav a {
  padding: 8px 0;
  border-bottom: 1px solid rgba(16, 21, 22, 0.4);
  font-family: var(--font-latin);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.case-index-nav a:hover {
  border-bottom-color: var(--ink);
}

.case-index-group {
  padding: 76px 0 0;
  scroll-margin-top: 24px;
}

.case-index-group:last-child {
  padding-bottom: 96px;
}

.case-index-head {
  max-width: 820px;
  margin-bottom: 42px;
}

.case-index-head .section-title {
  margin-bottom: 20px;
  font-size: 2.5rem;
}

.case-index-list {
  border-top: 1px solid rgba(16, 21, 22, 0.24);
}

.case-index-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 40px;
  padding: 46px 0 50px;
  border-bottom: 1px solid var(--line);
}

.case-index-number {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 0.9;
  color: rgba(16, 21, 22, 0.48);
}

.case-index-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 14px;
  font-family: var(--font-latin);
  text-transform: uppercase;
}

.case-index-parent {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--coral-text);
}

.case-index-sub {
  padding-left: 14px;
  border-left: 1px solid rgba(16, 21, 22, 0.28);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--label-muted);
}

.case-index-title {
  max-width: 760px;
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: var(--lh-head);
}

.case-index-title a {
  text-decoration: none;
}

.case-index-title a:hover {
  border-bottom: 1px solid var(--ink);
}

.case-index-summary {
  max-width: 760px;
  margin: 20px 0 24px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink-muted);
}

/* =========================================================================
   AI-assisted QA Case — マッピング図
   ========================================================================= */
.mapping-section {
  background: #f7f9f8;
}

.mapping-figure {
  margin: 44px 0 44px;
  padding: 34px 0 0;
  border-top: 1px solid rgba(16, 21, 22, 0.28);
}

.mapping-caption {
  margin-bottom: 26px;
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.mapping-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: 0 0 36px;
}

.mapping-side {
  margin: 0;
  padding: 26px 28px 28px;
  border: 1px solid rgba(16, 21, 22, 0.26);
  background: var(--paper);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.6;
}

.mapping-side span {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.mapping-link {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--coral-text);
}

.mapping-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.mapping-points li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.mapping-point-label {
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--coral-text);
}

/* =========================================================================
   QA4AI Case — 評価軸
   ========================================================================= */
.eval-section {
  background: #f7f9f8;
}

.eval-axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(16, 21, 22, 0.28);
}

.eval-axes li {
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--line);
}

.eval-axis-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.5;
}

.eval-axis-label span {
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--coral-text);
}

.eval-axes li p:last-child {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--ink-muted);
}

/* =========================================================================
   QA×AI サービスページ
   ========================================================================= */
.svc-map-section {
  background: #f7f9f8;
}

.svc-map {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid rgba(16, 21, 22, 0.28);
}

.svc-map-root {
  margin: 0 0 22px;
  font-family: var(--font-latin);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.svc-map-branches,
.svc-map-children {
  margin: 0;
  padding: 0 0 0 26px;
  list-style: none;
  border-left: 1px solid rgba(16, 21, 22, 0.28);
}

.svc-map-branches > li {
  padding: 18px 0;
}

.svc-map-children {
  margin-top: 16px;
}

.svc-map-children > li {
  padding: 12px 0;
}

.svc-map-parent,
.svc-map-child {
  margin: 0 0 6px;
  font-family: var(--font-latin);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.svc-map-parent {
  font-size: 1rem;
  color: var(--coral-text);
}

.svc-map-child {
  font-size: 0.875rem;
  color: var(--ink);
}

.svc-map-parent a,
.svc-map-child a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.svc-map-desc {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink-muted);
}

.svc-agentic {
  scroll-margin-top: 24px;
}

#ai-assisted-qa,
#qa4ai,
#qmo-architecture,
#agentic-qa,
#overview {
  scroll-margin-top: 24px;
}

.svc-loop {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
  gap: 72px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(16, 21, 22, 0.28);
}

.svc-loop-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-loop-list li {
  padding: 16px 0 17px 26px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid rgba(16, 21, 22, 0.32);
  position: relative;
}

.svc-loop-list li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.svc-loop-list li p:last-child {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.6;
}

.svc-loop-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--coral-text);
}

.svc-loop-meta span {
  color: var(--label-muted);
}

.svc-loop-side {
  display: grid;
  align-content: start;
  gap: 30px;
}

.svc-loop-note {
  padding: 26px 28px 28px;
  border: 1px solid rgba(16, 21, 22, 0.22);
  background: #edf6f5;
}

.svc-loop-note-label {
  margin: 0 0 12px;
  font-family: var(--font-latin);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.svc-loop-note p:last-child {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--ink-muted);
}

.svc-qa4ai {
  background: #f7f9f8;
}

/* ---------- QMO ---------- */
.qmo-section {
  background: var(--ink);
  color: #ffffff;
}

.qmo-section .section-kicker {
  color: var(--coral-text-dark);
}

.qmo-section .section-description,
.qmo-section .prose p {
  color: rgba(255, 255, 255, 0.76);
}

.qmo-section .related-links {
  border-top-color: rgba(255, 255, 255, 0.24);
}

.qmo-section .section-link {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.qmo-section .section-link:hover {
  border-bottom-color: #ffffff;
}

.qmo-section .phase-note {
  border-left-color: var(--coral-text-dark);
}

.qmo-figure {
  margin: 48px 0 40px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.qmo-caption {
  margin-bottom: 30px;
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.qmo-layer {
  padding: 26px 30px 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.qmo-layer-label {
  margin: 0 0 10px;
  font-family: var(--font-latin);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.qmo-layer-desc {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.76);
}

.qmo-connector {
  width: 1px;
  height: 34px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.34);
}

.qmo-agents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qmo-agents li {
  padding: 22px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.qmo-agents li p:last-child {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
}

.qmo-agent-label {
  margin: 0 0 8px;
  font-family: var(--font-latin);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-text-dark);
}

.qmo-foundation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.qmo-foundation li {
  padding: 20px 0 19px;
  font-family: var(--font-latin);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1279px) {
  .page-title {
    font-size: 3rem;
  }

  .page-cta-layout {
    gap: 64px;
  }

  .phase {
    gap: 36px;
  }

  .svc-loop {
    gap: 48px;
  }
}

@media (max-width: 1023px) {
  .page-hero {
    padding: 40px 0 72px;
  }

  .page-section,
  .page-cta {
    padding: 76px 0 80px;
  }

  .page-title {
    font-size: 2.5rem;
  }

  .page-lead,
  .prose,
  .prose p,
  .phase-body p,
  .loop-intro {
    max-width: none;
  }

  .section-head .section-title,
  .case-index-head .section-title,
  .page-cta-layout .section-title,
  .phase-body h3,
  .case-index-title,
  .case-index-summary {
    max-width: none;
  }

  .section-head .section-title,
  .case-index-head .section-title,
  .page-cta-layout .section-title {
    font-size: 2rem;
  }

  .page-cta-layout {
    display: block;
  }

  .page-cta-action {
    padding-top: 28px;
  }

  /* Loop: 縦方向の読順へ組み直す */
  .case-loop-return {
    order: 3;
    justify-content: flex-start;
    padding: 14px 0 16px var(--loop-indent, 24px);
    border-left: 1px solid rgba(16, 21, 22, 0.32);
  }

  .case-loop-return::before,
  .case-loop-return::after,
  .case-loop-track::before,
  .case-loop-base::before,
  .case-loop-base::after,
  .case-loop-feed-in,
  .case-loop-feed-out {
    display: none;
  }

  .case-loop {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .case-loop-input {
    order: 0;
  }

  .case-loop-track {
    order: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 8px 0 0;
  }

  .case-loop-step {
    padding: 16px 0 18px var(--loop-indent, 24px);
    border-left: 1px solid rgba(16, 21, 22, 0.32);
  }

  .case-loop-step::before {
    top: 22px;
    left: -4px;
  }

  .case-loop-base {
    order: 2;
    margin-left: var(--loop-indent, 24px);
  }

  .case-loop-gate {
    order: 4;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  .loop-outcome-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .phase {
    display: block;
    padding: 34px 0 38px;
  }

  .phase-meta {
    margin-bottom: 16px;
  }

  .evidence-state {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .case-index-group {
    padding-top: 64px;
  }

  .case-index-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 36px 0 40px;
  }

  .case-index-number {
    font-size: 2.5rem;
  }

  .case-index-title {
    font-size: 1.5rem;
  }

  .mapping-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .mapping-link {
    transform: rotate(90deg);
  }

  .mapping-points,
  .eval-axes {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .svc-loop {
    display: block;
  }

  .svc-loop-side {
    margin-top: 36px;
  }

  .qmo-agents {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .qmo-foundation {
    grid-template-columns: minmax(0, 1fr);
  }

  .qmo-foundation li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .case-metric {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .case-pager {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: 40px 0 44px;
  }

  .case-pager-item-next {
    text-align: left;
  }

  .related-links {
    gap: 14px 32px;
  }
}

@media (max-width: 767px) {
  .page-hero {
    padding: 28px 0 56px;
  }

  .page-section,
  .page-cta {
    padding: 58px 0 62px;
  }

  .breadcrumb {
    margin-bottom: 24px;
  }

  .page-title {
    font-size: 1.875rem;
    line-height: 1.38;
  }

  .page-title br {
    display: none;
  }

  .page-lead {
    margin-top: 24px;
    font-size: 1rem;
  }

  .section-head {
    margin-bottom: 28px;
  }

  .prose p,
  .phase-body p {
    font-size: 1rem;
  }

  .case-loop-base {
    padding: 22px 20px 24px;
  }

  .case-loop-gate {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
  }

  .phase-body h3 {
    font-size: 1.25rem;
  }

  .phase-number {
    font-size: 1.375rem;
  }

  .section-head .section-title,
  .case-index-head .section-title,
  .page-cta-layout .section-title {
    font-size: 1.75rem;
  }

  /* PC向けの強制改行は狭い幅で行末を取り残すため、自動の行分けへ戻す */
  .section-head .section-title br {
    display: none;
  }

  .case-index-title {
    font-size: 1.25rem;
  }

  .case-index-summary {
    margin: 16px 0 20px;
    font-size: 0.9375rem;
  }

  .case-index-nav {
    gap: 10px 24px;
    margin-top: 30px;
  }

  .mapping-side {
    padding: 20px 20px 22px;
    font-size: 1rem;
  }

  .svc-loop-note {
    padding: 20px 20px 22px;
  }

  .qmo-layer {
    padding: 20px 20px 22px;
  }

  .qmo-layer-label {
    font-size: 1rem;
  }

  .page-cta-action {
    justify-items: stretch;
  }

  .page-cta-action .primary-cta {
    min-width: 0;
  }

  .section-link,
  .case-link {
    padding: 16px 0 8px;
  }

  .breadcrumb ol {
    font-size: 0.75rem;
  }

  /* Phase 1 で .problem-copy と同じ組にあった指定の補完 */
  .section-description {
    font-size: 1rem;
    line-height: 1.85;
  }

  /* 指で押す前提のため、操作領域を44px以上にする。
     現在地は折り返すことがあるため、行頭を揃える。 */
  .breadcrumb ol {
    align-items: flex-start;
  }

  .breadcrumb a,
  .breadcrumb li > span {
    display: inline-block;
    padding: 13px 0 12px;
  }

  .breadcrumb li + li::before {
    display: inline-block;
    padding: 13px 0 12px;
  }

  .case-pager a {
    padding: 12px 0 10px;
  }

  .case-index-nav a {
    padding: 14px 0 12px;
  }
}

@media (max-width: 374px) {
  .section-title {
    font-size: 1.625rem;
  }

  .page-title {
    font-size: 1.625rem;
  }

  .case-index-head .section-title,
  .page-cta-layout .section-title,
  .section-head .section-title {
    font-size: 1.5rem;
  }
}

/* =========================================================================
   既存ページ（サービス / 会社 / お問い合わせ / プライバシー / 運営サイト）用の部品
   旧テーマのカード中心のUIを、Phase 1 / Phase 2 と同じ
   「白地・細い罫線・大きな余白・コーラルは小面積」の言語へ置き換えたもの。
   ========================================================================= */

.legacy-section > .section-inner > div + div,
.legacy-hero > .section-inner > div + div {
  margin-top: 32px;
}

.prose-p {
  max-width: 760px;
  margin: 0 0 18px;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

.prose-p:last-child {
  margin-bottom: 0;
}

.legacy-section .page-lead {
  max-width: 820px;
  margin: 0 0 40px;
}

/* ---------- 本文中のリスト ---------- */
.legacy-section ul,
.legacy-hero ul,
.legacy-section ol,
.legacy-hero ol {
  max-width: 760px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.legacy-section ul li,
.legacy-hero ul li,
.legacy-section ol li,
.legacy-hero ol li {
  padding: 11px 0 10px 22px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.7;
  position: relative;
}

.legacy-section ul li::before,
.legacy-hero ul li::before,
.legacy-section ol li::before,
.legacy-hero ol li::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--coral);
}

/* リスト部品として別途スタイルを持つものは対象外 */
.legacy-section .related-links,
.legacy-section .related-links li,
.legacy-section .site-link-list,
.legacy-section .step-list,
.legacy-section .step-list li {
  border-top: 0;
  list-style: none;
}

.legacy-section .related-links li::before,
.legacy-section .step-list li::before {
  content: none;
}

.legacy-section .step-list {
  border-top: 1px solid rgba(16, 21, 22, 0.24);
}

/* ---------- 本文中のインラインリンク ---------- */
.inline-link {
  display: inline;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 21, 22, 0.5);
}

.inline-link:hover {
  border-bottom-color: var(--ink);
}

/* ---------- 2列の情報ブロック（旧 service-card / challenge-item） ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin: 32px 0 0;
  border-top: 1px solid rgba(16, 21, 22, 0.24);
}

.info-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-item {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
}

.info-label {
  margin: 0 0 10px;
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--coral-text);
}

.info-heading {
  max-width: 620px;
  margin: 0 0 14px;
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: var(--lh-head);
}

.info-item .prose-p {
  margin-bottom: 16px;
  font-size: 1rem;
}

.info-item .section-link {
  margin-top: 4px;
}

.info-aside {
  margin: 40px 0 0;
  padding: 30px 32px 32px;
  border: 1px solid rgba(16, 21, 22, 0.22);
  background: #f7f9f8;
}

.info-aside .info-heading {
  font-size: 1.1875rem;
}

/* ---------- 工程（旧 stack-list） ---------- */
.step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 40px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(16, 21, 22, 0.24);
}

.step-item {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.7;
}

.step-item .info-label {
  margin-bottom: 8px;
}

.step-item .prose-p {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ---------- FAQ（details / summary。JSに依存しない） ---------- */
.faq-item {
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.faq-item:first-of-type {
  border-top: 1px solid rgba(16, 21, 22, 0.24);
}

.faq-question {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 44px;
  padding: 18px 0 17px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.7;
  list-style: none;
  cursor: pointer;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::before {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-latin);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--coral-text);
}

.faq-item[open] .faq-question::before {
  content: "−";
}

.faq-question:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.faq-item .info-heading {
  margin-bottom: 12px;
  font-size: 1.125rem;
}

.faq-answer {
  max-width: 820px;
  margin: 0;
  padding: 0 0 20px 28px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink-muted);
}

/* ---------- 会社情報 ---------- */
.company-info-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
  gap: 32px;
  padding: 20px 0 21px;
  border-bottom: 1px solid var(--line);
}

.company-info-row:first-of-type {
  border-top: 1px solid rgba(16, 21, 22, 0.24);
}

.company-info-label {
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.8;
}

.company-info-value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink-muted);
}

.company-info-value p {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 運営サイト ---------- */
.site-link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 40px 0 0;
  border-top: 1px solid rgba(16, 21, 22, 0.24);
}

.site-link {
  padding: 20px 0 19px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}

.site-link:hover {
  color: var(--coral-text);
}

/* ---------- ページ末尾CTAの本文 ---------- */
.page-cta-body {
  max-width: 640px;
  margin: 20px 0 30px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink-muted);
}

/* ---------- お問い合わせフォーム ---------- */
.contact-form-wrap {
  max-width: 720px;
  margin: 40px 0 0;
}

.form-field {
  margin-bottom: 26px;
}

.form-label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.6;
}

.form-required,
.form-optional {
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-required {
  color: var(--coral-text);
}

.form-optional {
  color: var(--label-muted);
}

.form-input,
.contact-form-wrap .wpcf7-form-control:not([type="submit"]):not([type="hidden"]) {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(16, 21, 22, 0.32);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
}

.form-input:focus-visible,
.contact-form-wrap .wpcf7-form-control:not([type="submit"]):not([type="hidden"]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.form-textarea,
.contact-form-wrap textarea.wpcf7-form-control {
  min-height: 180px;
  resize: vertical;
}

.form-error {
  margin: 8px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--coral-text);
}

.form-note {
  margin: 0 0 26px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--ink-muted);
}

.contact-form-wrap button[type="submit"],
.contact-form-wrap input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 58px;
  padding: 0 24px;
  border: 0;
  border-radius: 3px;
  background: var(--coral);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.contact-form-wrap button[type="submit"]:hover,
.contact-form-wrap input[type="submit"]:hover {
  background: var(--accent-hover);
}

/* Contact Form 7 が出力する要素 */
.contact-form-wrap .wpcf7-form > p {
  margin: 0 0 26px;
}

.contact-form-wrap .wpcf7-form-control-wrap {
  display: block;
}

.contact-form-wrap .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--coral-text);
}

.contact-form-wrap .wpcf7-response-output {
  margin: 26px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(16, 21, 22, 0.32);
  font-size: 0.9375rem;
  line-height: 1.8;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .info-grid,
  .info-grid-3,
  .step-list,
  .site-link-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .company-info-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .info-aside {
    padding: 24px 22px 26px;
  }

  .prose-p,
  .legacy-section .page-lead,
  .faq-answer,
  .info-heading,
  .contact-form-wrap {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .prose-p {
    font-size: 1rem;
  }

  .info-heading {
    font-size: 1.1875rem;
  }

  .contact-form-wrap button[type="submit"],
  .contact-form-wrap input[type="submit"] {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- QA×AI ページの見出し階層 ----------
   用語が多いページなので、重要度をサイズで示す。
   1 Agentic QA（中核）→ 2 AI4QA/QA4AIの違い → 3 AI-assisted QA → 4 QMO
   コピーと構造は変えず、見出しの大きさだけで序列をつける。 */
#ai-assisted-qa .section-title,
#qa4ai .section-title {
  font-size: var(--fs-h1);
}

#qmo-architecture .section-title {
  font-size: var(--fs-h2);
}

/* QMOは技術に関心がある人向けの補足。元から濃い面で本筋と切り分けられているため、
   背景は変更しない。見出しの大きさだけで序列をつける。 */

/* ---------- 旧ページのセクション余白 ----------
   Software Testing / QA Consulting は1ページに10セクション並ぶ。
   新デザインのページ（3〜6セクション）と同じ余白だと、
   内容に対してスクロール量が過大になるため締める。 */
.page-section.legacy-section {
  padding: 76px 0 84px;
}

@media (max-width: 1023px) {
  .page-section.legacy-section {
    padding: 56px 0 62px;
  }
}

@media (max-width: 767px) {
  .page-section.legacy-section {
    padding: 44px 0 48px;
  }
}

/* ---------- サービスの違いを1目で示す3並び ---------- */
.service-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1px;
  margin: 32px 0 0;
  padding: 1px;
  background: var(--line);
}

.service-compare-item {
  padding: 20px 20px 22px;
  background: var(--paper);
}

/* 今見ているサービスだけを強調する */
.service-compare-item.is-current {
  background: #f4faf9;
  box-shadow: inset 3px 0 0 var(--coral);
}

.service-compare-item p:last-child {
  margin: 8px 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.7;
}

/* 5工程のプロセス。4列前提の step-list を段数可変にする */
.step-list-5 {
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

/* ---------- Company: 思想セクション ----------
   支援方針の見た目は TOP の About と同じものを使う（新しい表現を作らない） */
.company-principle {
  margin: 44px 0 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.company-principle > p {
  margin: 0;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  font-weight: 800;
}

.company-principle ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 0;
}

.company-principle li {
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 20px 14px 20px 0;
  border-bottom: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.55;
}

.company-principle li::before {
  content: none;
}

.company-principle li + li {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.company-principle span {
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  color: var(--coral-text);
}

.company-team-note {
  margin: 0;
}

@media (max-width: 767px) {
  .company-principle ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-principle li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-height: 0;
    padding: 14px 0;
  }

  .company-principle li + li {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---------- 旧Heroの図を外した後の整え（Phase 3.5B.1） ----------
   図があった前提の2カラム構成が残っていたため、text-only として成立させる。
   新しい図は追加しない。 */
.legacy-hero .page-lead + .primary-cta {
  margin-top: 30px;
}

.legacy-hero .page-title {
  max-width: 20em;
}

.legacy-hero .page-lead {
  max-width: 34em;
}

/* =========================================================================
   Hero family（2026-09-23）
   TOP / サービス一覧 / ソフトウェアテスト / QA×AI / QAコンサル / 支援事例 / 会社概要 の7ページ共通。
   ページごとに読み込む CSS が違うため、page-home.css と page-detail.css に同じ値で置いている。
   片方を変えたら、もう片方も同じに変えること。
   正本: design-review-2026-09-23/hero-family-prototype/
   - PC: 左にコピーの面、右に画像（お問い合わせと同じ置き方。2026-09-23 ユーザー判断）。
     画像は高さ基準で上下を切らず、左端だけ背景へなじませる。文字の下に画像を置かないのでベールは使わない
   - 1023px以下: 画像が上、コピーが下。DOM も画像が先（CSS の order は使わない）
   - 高さは下限（min-height）。文字拡大時はコピーに合わせて伸ばし、切り取らない
   - 画像は生成した概念表現。社員・顧客画面・製品・テスト結果・事例の証拠として扱わない
   ========================================================================= */
.hero-family {
  /* 高さはお問い合わせページ（.contact-hero）と同じ（2026-09-23 ユーザー判断: 一番しっくりくるサイズ感に揃える） */
  --hero-family-h: 560px;
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: var(--hero-family-h);
  padding: 0;
  overflow: hidden;
  background: var(--hero-base);
  border-bottom: 1px solid var(--line);
}

/* 画像の下端を背景色へなじませる（全幅・全ページ共通） */
.hero-family-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 80px;
  background: linear-gradient(0deg, var(--hero-base), rgba(234, 247, 247, 0));
  pointer-events: none;
}

.hero-family > .hero-inner,
.hero-family > .section-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-max));
  margin: 0 auto;
  padding: 46px 0;
}

.hero-family-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

.hero-family-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 52% 48%;
}

/* PC: 画像は右側だけ。左端はコピーの左端＋640px（1024〜1279px は＋560px）と 画面幅の42% の大きい方（お問い合わせと同じ）。
   コピーは画像の手前 40px まで。--media-left は PC でだけ定義するので、1023px以下では上限が外れる */
@media (min-width: 1024px) {
  .hero-family {
    --copy-left: max(var(--page-gutter), calc((100% - var(--content-max)) / 2));
    --media-left: max(42%, calc(var(--copy-left) + 640px));
    --copy-max: calc(var(--media-left) - var(--copy-left) - 40px);
  }

  .hero-family-media {
    left: var(--media-left);
    /* 左端のぼかし: 境目が線に見えないよう、なだらかに（2026-09-24 ユーザー判断で 72px → 260px） */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 40px, rgba(0, 0, 0, 0.32) 95px, rgba(0, 0, 0, 0.62) 155px, rgba(0, 0, 0, 0.88) 215px, #000 260px);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 40px, rgba(0, 0, 0, 0.32) 95px, rgba(0, 0, 0, 0.62) 155px, rgba(0, 0, 0, 0.88) 215px, #000 260px);
  }

  /* 高さ基準で表示し、右寄せ。上下が切れない。
     画像の主題が左寄りのページは、テンプレートで --focus-x を指定する（例: QAコンサル 62%） */
  .hero-family-media img {
    object-position: var(--focus-x, 100%) 50%;
  }
}


/* 問い合わせ導線。7ページとも同じ大きさで、リード文の直後に置く */
.hero-family .hero-family-cta {
  width: 300px;
  max-width: 100%;
  min-width: 0;
  min-height: 58px;
  justify-content: center;
  gap: 18px;
  padding: 14px 18px;
  line-height: 1.4;
}

/* 詳細ページの CTA 上余白。既存の .legacy-hero .page-lead + .primary-cta（30px）と
   同じ優先度にして、legacy-hero の有無でページごとに値が分かれないようにする */
.hero-family .section-inner .hero-family-cta {
  margin-top: 26px;
}

.hero-family .hero-family-cta .arrow {
  flex: 0 0 auto;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-family {
    --hero-family-h: 500px;
  }

  .hero-family {
    --media-left: max(44%, calc(var(--copy-left) + 560px));
  }

  /* 画像の幅が狭いので、ぼかしも短くする */
  .hero-family-media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 28px, rgba(0, 0, 0, 0.32) 66px, rgba(0, 0, 0, 0.62) 108px, rgba(0, 0, 0, 0.88) 150px, #000 180px);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 28px, rgba(0, 0, 0, 0.32) 66px, rgba(0, 0, 0, 0.62) 108px, rgba(0, 0, 0, 0.88) 150px, #000 180px);
  }
}


@media (max-width: 1023px) {
  /* 1023px以下の高さ = 画像の高さ（幅に比例）+ 詳細ページのコピーの高さ（2026-09-23 実測の最大値）。
     どの幅でも6ページが同じ高さになる。TOP は中身がこれより高いので、中身に合わせて伸びる */
  .hero-family {
    --hero-family-h: calc(62.5vw + 312px);
    flex-direction: column;
  }

  /* 画像は幅に比例した高さ（お問い合わせと同じ 16:10 / スマホは 4:3） */
  .hero-family-media {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  /* 縦積みでは画像の下にコピーが続くので、ぼかしを少し長くする */
  .hero-family-media::after {
    height: 90px;
  }

  .hero-family > .hero-inner,
  .hero-family > .section-inner {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 40px 0 32px;
  }

  .hero-family-media img {
    object-position: 62% center;
  }

  /* CTA の位置を全ページで揃える（2026-09-23）。
     コピーの入れ物を縦いっぱいに伸ばし、CTA を下端へ寄せる。
     文字量の差は、リード文と CTA の間の余白が吸収する（最低 26px） */
  .hero-family > .section-inner > div,
  .hero-family .hero-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .hero-family .page-lead,
  .hero-family .hero-lead {
    margin-bottom: 26px;
  }

  .hero-family .section-inner .hero-family-cta,
  .hero-family .hero-actions {
    margin-top: auto;
  }
}

@media (max-width: 767px) {
  .hero-family {
    --hero-family-h: calc(75vw + 302px);
  }

  .hero-family-media {
    aspect-ratio: 4 / 3;
  }

  .hero-family > .hero-inner,
  .hero-family > .section-inner {
    padding: 36px 0 34px;
  }

  .hero-family .hero-family-cta {
    width: 100%;
    max-width: 420px;
  }

}

@media (max-width: 374px) {
  .hero-family {
    /* 320px ではリードが3行になるページがあるため、コピーの最大値が大きい */
    --hero-family-h: calc(75vw + 323px);
  }


}
/* ----- Hero family ここまで ----- */

/* ---------- 詳細ページ固有（Hero family の上に重ねる） ---------- */
.hero-family > .section-inner > div {
  max-width: min(700px, var(--copy-max, 700px));
}

.hero-family .page-title {
  max-width: min(700px, var(--copy-max, 700px));
  /* 語の途中で折らず、読点で折る（390px で「実行す／る。」になっていた）。
     はみ出す場合だけ折る安全策は .section-title と同じ組み合わせ */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hero-family .page-lead {
  max-width: min(650px, var(--copy-max, 650px));
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-family .page-title {
    max-width: min(590px, var(--copy-max, 590px));
  }

  .hero-family .page-lead {
    max-width: min(560px, var(--copy-max, 560px));
  }
}

@media (max-width: 1023px) {
  .hero-family .page-title,
  .hero-family .page-lead {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .hero-family .page-lead {
    margin-top: 20px;
    line-height: 1.7;
  }

  /* 共通指定では 767px 以下で見出しの <br> を消すが、Hero の見出しは意味の区切りで折る */
  .hero-family .page-title br {
    display: block;
  }

  .hero-family .breadcrumb {
    margin-bottom: 18px;
  }
}

/* 支援事例: Hero から移した分類ナビ（リンク先・ID は変更なし） */
.case-index > .case-index-nav {
  margin-top: 0;
}

/* ---------- 会社概要: 会社情報の表（2026-09-23） ----------
   ラベル・値とも本文と同じ大きさ。PC は2列、1023px以下は1列、767px以下はラベルと値を縦に積む */
.company-info-section dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  margin: 24px 0 0;
  border-top: 1px solid rgba(16, 21, 22, 0.24);
}

.company-info-section .company-info-row {
  grid-template-columns: minmax(96px, 0.34fr) minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
}

.company-info-section .company-info-row:first-of-type {
  border-top: 0;
}

.company-info-section .company-info-label,
.company-info-section .company-info-value {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 1023px) {
  .company-info-section dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-info-section .company-info-row {
    grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .company-info-section dl {
    margin-top: 18px;
  }

  .company-info-section .company-info-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* =========================================================================
   お問い合わせ（2026-09-23）
   .contact-hero / .contact-main / .contact-faq の内側だけに効かせる。
   共通のフォーム部品（.form-* / .contact-form-wrap）の既定値と、他ページの Hero には触れない。
   - PC: 左にコピーの面、右に大きな画像。画像の主題（中央のフィルターと右の人物）の上に文字・色面を重ねない
   - 1023px以下: 画像 → コピー → フォーム。Hero の直後にフォームが見つかるようにする
   - 画像は生成した概念表現。実在の顧客環境・製品・社員として扱わない
   ========================================================================= */
.contact-hero {
  position: relative;
  display: flex;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
  background: var(--hero-base);
  border-bottom: 1px solid var(--line);
}

.contact-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* 画像の左端は Hero family と同じ決め方（コピーの左端＋640px と 画面幅の42% の大きい方） */
  left: max(42%, calc(max(var(--page-gutter), calc((100% - var(--content-max)) / 2)) + 640px));
  margin: 0;
  overflow: hidden;
  /* 左端だけを背景へなじませる。主題の上には何も重ねない */
  /* 左端のぼかし: 境目が線に見えないよう、なだらかに（2026-09-24 ユーザー判断で 72px → 260px） */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 40px, rgba(0, 0, 0, 0.32) 95px, rgba(0, 0, 0, 0.62) 155px, rgba(0, 0, 0, 0.88) 215px, #000 260px);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 40px, rgba(0, 0, 0, 0.32) 95px, rgba(0, 0, 0, 0.62) 155px, rgba(0, 0, 0, 0.88) 215px, #000 260px);
}

@media (min-width: 1024px) and (max-width: 1279px) {
  /* 画像の幅が狭いので、ぼかしも短くする（Hero family と同じ） */
  .contact-hero-media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 28px, rgba(0, 0, 0, 0.32) 66px, rgba(0, 0, 0, 0.62) 108px, rgba(0, 0, 0, 0.88) 150px, #000 180px);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 28px, rgba(0, 0, 0, 0.32) 66px, rgba(0, 0, 0, 0.62) 108px, rgba(0, 0, 0, 0.88) 150px, #000 180px);
  }
}

/* 画像の下端を背景色へなじませる（Hero family と同じ） */
.contact-hero-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 80px;
  background: linear-gradient(0deg, var(--hero-base), rgba(234, 247, 247, 0));
  pointer-events: none;
}

.contact-hero-media img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}


.contact-hero > .section-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 56px 0;
}

.contact-hero-copy {
  width: 560px;
  max-width: 100%;
}

/* リード・CTA の文字組みは Hero family の詳細ページと同じ（2026-09-24 ユーザー判断: フォントの見え方を揃える） */
.contact-hero .page-lead {
  margin-top: 34px;
  /* 狭い幅でも語の途中で折らない（320px で「構い／ません。」になっていた） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.contact-hero .contact-hero-cta {
  width: 300px;
  max-width: 100%;
  min-width: 0;
  min-height: 58px;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
  padding: 14px 18px;
  line-height: 1.4;
}

/* ---------- フォームと初回相談 ---------- */
.contact-main {
  padding: 64px 0 88px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(280px, 340px);
  justify-content: space-between;
  gap: 48px 64px;
  align-items: start;
}

.contact-form-title {
  margin: 14px 0 0;
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: var(--lh-head);
  scroll-margin-top: 24px;
}

/* Hero のリンクで移ってきた時の読み上げ開始位置。操作対象ではないので枠は出さない */
.contact-form-title:focus {
  outline: none;
}

.contact-form-hint {
  max-width: 40em;
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

.contact-main .contact-form-wrap {
  margin-top: 32px;
}

/* CF7 の自動整形が入れる <br> で、ラベルと入力欄の間に空行ができるのを防ぐ */
.contact-main .wpcf7-form > p > br {
  display: none;
}

/* エラーのある入力欄。どの欄を直せばよいかを枠の色でも示す（文字の注記と併用） */
.contact-main .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--coral);
  border-width: 2px;
}

/* 送信結果の表示。CF7 標準の黄色（エラー）・緑（成功）の枠を、サイトの色に合わせる */
.contact-main .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  border-width: 2px;
  border-radius: 3px;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.contact-main .wpcf7 form.invalid .wpcf7-response-output,
.contact-main .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-main .wpcf7 form.payment-required .wpcf7-response-output,
.contact-main .wpcf7 form.failed .wpcf7-response-output,
.contact-main .wpcf7 form.aborted .wpcf7-response-output,
.contact-main .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--coral);
}

.contact-main .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--ink);
}

.contact-privacy {
  max-width: 40em;
  margin: 24px 0 0;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-muted);
}

.contact-aside {
  padding: 28px 28px 30px;
  background: var(--hero-base);
}

.contact-aside-title {
  margin: 10px 0 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: var(--lh-head);
}

.contact-aside-sub {
  margin: 24px 0 0;
  font-size: var(--fs-body);
  font-weight: 800;
}

.contact-facts,
.contact-can {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.contact-facts li,
.contact-can li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.contact-facts li + li,
.contact-can li + li {
  margin-top: 6px;
}

.contact-facts li::before,
.contact-can li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 2px;
  background: var(--coral);
}

.contact-aside-note {
  margin: 18px 0 0;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-muted);
}

.contact-faq-list {
  max-width: 820px;
  margin-top: 28px;
}

@media (max-width: 1279px) {
  .contact-hero {
    min-height: 500px;
  }

  .contact-hero-media {
    left: max(44%, calc(max(var(--page-gutter), calc((100% - var(--content-max)) / 2)) + 560px));
  }

  .contact-hero-copy {
    width: 460px;
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: 48px 48px;
  }
}

/* ---------- 1023px以下: 画像 → コピー → フォーム ---------- */
@media (max-width: 1023px) {
  /* 高さ・余白・CTA の位置は Hero family と同じ決め方（2026-09-24 ユーザー判断: 7ページと高さを揃える）。
     高さ = 画像の高さ（幅に比例）+ コピーの高さ。CTA はコピーの下端に寄せ、文字量の差はリードとの間の余白が吸収する */
  .contact-hero {
    flex-direction: column;
    min-height: calc(62.5vw + 312px);
  }

  .contact-hero-media {
    position: relative;
    left: auto;
    aspect-ratio: 16 / 10;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* 右端に寄せ、中央のフィルターと右の3人が両方入るようにする */
  .contact-hero-media img {
    object-position: 100% 50%;
  }

  .contact-hero-media::after {
    height: 90px;
  }

  .contact-hero > .section-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    padding: 40px 0 32px;
  }

  .contact-hero-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 44rem;
  }

  .contact-hero .page-lead {
    margin-bottom: 26px;
  }

  .contact-hero .contact-hero-cta {
    margin-top: auto;
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-main {
    padding: 48px 0 64px;
  }
}

@media (max-width: 767px) {
  .contact-hero-media {
    aspect-ratio: 4 / 3;
  }

  .contact-hero .page-lead {
    margin-top: 20px;
    line-height: 1.7;
  }

  .contact-hero .page-title br,
  .contact-hero .page-lead br {
    display: block;
  }

  .contact-hero {
    min-height: calc(75vw + 302px);
  }

  .contact-hero > .section-inner {
    padding: 36px 0 34px;
  }

  .contact-hero .contact-hero-cta {
    width: 100%;
    max-width: 420px;
  }


  .contact-form-title {
    font-size: 1.5rem;
  }

  .contact-aside {
    padding: 24px 20px 26px;
  }
}

@media (max-width: 374px) {
  .contact-hero {
    min-height: calc(75vw + 323px);
  }
}
/* ----- お問い合わせ ここまで ----- */

/* =========================================================================
   サービス一覧（2026-09-24 再構成）
   案内（課題→サービス）／依頼できること／相談 の3区画。テキスト中心なので
   区画の余白を広くとり、見出し→リード→カードの間を段階的に空ける。
   アイコンは業務の道具（チェックリスト・虫めがね・表など）の線画。AI を連想させる
   モチーフ（きらめき・ロボット・脳・グラデーション）は使わない
   ========================================================================= */
.svc-section {
  padding: 120px 0 128px;
}

.svc-head {
  max-width: 820px;
  margin-bottom: 56px;
}

.svc-title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: var(--ls-ja);
}

.svc-lead {
  margin: 24px 0 0;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.95;
  color: var(--ink-muted);
}

/* 案内カード: 2列 */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 64px;
}

.svc-card,
.svc-scope-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  /* 枠で囲まず、上の罫線1本と余白で区切る（2026-09-24 ユーザー判断: カードの囲みは AI 生成風に見えるため。TOP のサービス欄と同じ言語） */
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
}

.svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 色面のタイルに載せず、線画だけを本文と同じ色で置く */
  margin-bottom: 22px;
  color: var(--ink);
}

.svc-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 虫めがねのレンズは下の画面の線を隠す */
.svc-icon .svc-icon-fill {
  fill: var(--paper);
}

.page-section-tint .svc-icon .svc-icon-fill {
  fill: #f7f9f8;
}

.svc-card .info-label,
.svc-scope-item .info-label {
  margin-bottom: 10px;
}

.svc-card-title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: var(--lh-head);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.svc-card-text {
  margin: 14px 0 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink-muted);
}

/* リンクはカードの下端に揃える */
.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 26px 0 6px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 21, 22, 0.5);
  background-clip: content-box;
}

.svc-card-link:hover {
  border-bottom-color: var(--ink);
}

/* 依頼できること: 4列（1024〜1279px は2列） */
.svc-scope {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px 40px;
}

.svc-scope-item .svc-card-title {
  font-size: 1.1875rem;
}

.svc-scope-item .svc-card-text {
  font-size: 0.9375rem;
}

/* 相談 */
.svc-cta .svc-lead {
  max-width: 640px;
}

.svc-cta .svc-cta-button {
  width: 300px;
  max-width: 100%;
  min-height: 58px;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}

@media (max-width: 1279px) {
  .svc-scope {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .svc-section {
    padding: 88px 0 96px;
  }

  .svc-head {
    margin-bottom: 44px;
  }

  .svc-title {
    font-size: 2.25rem;
  }

  .svc-cards {
    gap: 56px 40px;
  }
}

@media (max-width: 767px) {
  .svc-section {
    padding: 64px 0 72px;
  }

  .svc-head {
    margin-bottom: 36px;
  }

  .svc-title {
    font-size: 1.75rem;
  }

  .svc-lead {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.8;
  }

  /* PC だけの改行。スマホでは自然に折り返す */
  .svc-br-pc {
    display: none;
  }

  .svc-cards,
  .svc-scope {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .svc-card,
  .svc-scope-item {
    padding-top: 28px;
  }

  .svc-icon {
    margin-bottom: 18px;
  }

  .svc-icon svg {
    width: 30px;
    height: 30px;
  }

  .svc-cta .svc-cta-button {
    width: 100%;
    max-width: 420px;
    margin-top: 28px;
  }
}

/* ---------- svc-* の追加部品（2026-09-24 ソフトウェアテストページで使用。他のサービス詳細にも流用できる） ---------- */
/* 見出しは語の途中で折らない（「ありませんか／。」を防ぐ） */
.svc-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* サービスの違い: 3並び。今のページは罫線をコーラルにし、他の2つはリンク */
.svc-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}

.svc-compare-item {
  display: block;
  padding: 24px 0 4px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.svc-compare-item.is-current {
  border-top: 2px solid var(--coral);
}

.svc-compare-text {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

.svc-compare-note {
  margin: 12px 0 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--label-muted);
}

a.svc-compare-item .svc-compare-note {
  color: var(--ink);
}

a.svc-compare-item:hover .svc-compare-note {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 工程: 5並び（1024〜1279px は3並び） */
.svc-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 48px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-step {
  min-width: 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.svc-step-num {
  margin: 0 0 18px;
  font-family: var(--font-latin);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-index);
}

.svc-step .svc-card-title {
  font-size: 1.1875rem;
}

.svc-step .svc-card-text {
  font-size: 0.9375rem;
}

/* 補足: 箱で囲まず、左の細い線で本文と分ける */
.svc-note {
  max-width: 860px;
  margin-top: 64px;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--line);
}

.svc-note .svc-card-text {
  margin-top: 10px;
}

/* カード内の箇条書き */
.svc-list {
  width: 100%;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.svc-list li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
}

.svc-list li::before {
  content: "";
  position: absolute;
  top: 1.45em;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--coral);
}

@media (max-width: 1279px) {
  .svc-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .svc-compare,
  .svc-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .svc-steps {
    gap: 36px;
  }

  .svc-compare-item {
    padding: 18px 0 18px;
  }

  .svc-note {
    margin-top: 44px;
    padding-left: 20px;
  }
}

/* ---------- QA×AI（2026-09-24 再構成）: 分類図・Loop の補足・構成図を、枠なしの言語へ ---------- */
/* 分類図: AI4QA（2項目）｜QA4AI（1項目）。グループ見出しは太い罫線、項目は細い罫線 */
.ai-map {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px 64px;
}

.ai-map-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0 40px;
}

.ai-map-group-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-map-group-head {
  grid-column: 1 / -1;
  padding: 22px 0 32px;
  border-top: 2px solid var(--ink);
}

.ai-map-group-head .info-label {
  margin-bottom: 8px;
}

.ai-map-group-desc {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

.ai-map-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.ai-map-name {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
}

.ai-map-item .svc-card-text {
  margin-top: 10px;
}

.ai-map-more {
  margin-top: 18px;
  padding-bottom: 4px;
  font-size: var(--fs-small);
  font-weight: 700;
  border-bottom: 1px solid rgba(16, 21, 22, 0.5);
}

.ai-map-item:hover .ai-map-more {
  border-bottom-color: var(--ink);
}

/* Loop の補足（System Knowledge / Human gate）: 色面の箱をやめ、左の線で分ける */
.svc-loop {
  border-top-color: var(--line);
}

.svc-loop-side {
  gap: 36px;
}

.svc-loop-note {
  padding: 2px 0 2px 24px;
  border: 0;
  border-left: 2px solid var(--line);
  background: none;
}

/* 構成図: 濃い背景をやめて白地に。層は罫線の太さで示す */
.qmo-section {
  background: var(--paper);
  color: var(--ink);
}

.qmo-section .section-kicker {
  color: var(--coral-text);
}

.qmo-section .related-links {
  border-top-color: var(--line);
}

.qmo-section .section-link {
  color: var(--ink);
  border-bottom-color: rgba(16, 21, 22, 0.5);
}

.qmo-section .section-link:hover {
  border-bottom-color: var(--ink);
}

.qmo-figure {
  margin: 0 0 8px;
  padding-top: 0;
  border-top: 0;
}

.qmo-caption {
  color: var(--label-muted);
}

.qmo-layer {
  padding: 22px 0 0;
  border: 0;
  border-top: 2px solid var(--ink);
}

.qmo-layer-desc {
  color: var(--ink-muted);
}

.qmo-connector {
  height: 40px;
  background: var(--line);
}

.qmo-agents {
  gap: 40px;
}

.qmo-agents li {
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.qmo-agents li p:last-child {
  color: var(--ink-muted);
}

.qmo-agent-label {
  color: var(--coral-text);
}

.qmo-foundation {
  border-top-color: var(--line);
}

.qmo-section .svc-note {
  margin-top: 56px;
}

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

@media (max-width: 767px) {
  .ai-map {
    gap: 44px;
  }

  .ai-map-group-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .ai-map-group-head {
    padding-bottom: 8px;
  }

  .svc-loop-note {
    padding-left: 18px;
  }

  .qmo-agents {
    gap: 24px;
  }
}

/* ---------- QA×AI 構成図（2026-09-24 作り直し）----------
   組織図の形。Orchestrator から縦線を下ろして3つの Agent へ枝分かれし、
   Agent から共通の基盤へ1本にまとめる。要素は箱で囲まず、上の太線で「線が届く場所」を示す。
   列は Agent と基盤で同じ（3列・間 40px）。1023px 以下は縦1列にして中央の縦線だけでつなぐ */
.qmo-figure {
  --qmo-gap: 40px;
  --qmo-drop: 28px;
  text-align: center;
}

.qmo-caption {
  margin-bottom: 28px;
  text-align: left;
}

.qmo-layer {
  padding: 22px 16px 24px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.qmo-branch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--qmo-gap);
  height: calc(var(--qmo-drop) * 2);
}

/* 中央の縦線（分岐では上半分、合流では下半分） */
.qmo-branch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--qmo-drop);
  background: var(--ink);
}

.qmo-branch-merge::before {
  top: auto;
  bottom: 0;
}

/* 3列の中心どうしを結ぶ横線 */
.qmo-branch::after {
  content: "";
  position: absolute;
  top: var(--qmo-drop);
  right: calc((100% - var(--qmo-gap) * 2) / 6);
  left: calc((100% - var(--qmo-gap) * 2) / 6);
  height: 1px;
  background: var(--ink);
}

/* 各列の縦線（分岐では下半分、合流では上半分） */
.qmo-branch span {
  position: relative;
}

.qmo-branch span::before {
  content: "";
  position: absolute;
  top: var(--qmo-drop);
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ink);
}

.qmo-branch-merge span::before {
  top: 0;
  bottom: var(--qmo-drop);
}

.qmo-agents {
  gap: var(--qmo-gap);
}

.qmo-agents li {
  padding: 20px 12px 22px;
  border: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.qmo-base-label {
  margin: 0;
  padding: 18px 0 14px;
  border-top: 2px solid var(--ink);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--label-muted);
}

.qmo-foundation {
  gap: 0 var(--qmo-gap);
  border-top: 0;
}

.qmo-foundation li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* AI-assisted QA の取り組み4つ: 本文との間を空ける */
.ai-assisted-scope {
  margin-bottom: 8px;
}

@media (max-width: 1023px) {
  .qmo-figure {
    --qmo-drop: 16px;
  }

  .qmo-branch {
    grid-template-columns: minmax(0, 1fr);
  }

  .qmo-branch::before {
    height: 100%;
  }

  .qmo-branch::after,
  .qmo-branch span {
    display: none;
  }

  .qmo-agents {
    gap: 0;
  }

  /* 縦に並んだ Agent どうしも中央の線でつなぐ */
  .qmo-agents li {
    position: relative;
  }

  .qmo-agents li + li {
    margin-top: 32px;
  }

  .qmo-agents li + li::before {
    content: "";
    position: absolute;
    top: -34px;
    left: 50%;
    width: 1px;
    height: 32px;
    background: var(--ink);
  }

  .qmo-foundation li {
    border-bottom: 0;
  }

  .qmo-foundation li:last-child {
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- 文書ページ（プライバシーポリシー / 運営サイト）2026-09-24 ----------
   画像を使わない見出しエリア（doc-hero）＋白地の本文。本文は読みやすい幅（820px）の1列 */
.doc-hero {
  padding: 96px 0 72px;
  background: var(--hero-base);
  border-bottom: 1px solid var(--line);
}

.doc-title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: var(--ls-ja);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.doc-lead {
  max-width: 820px;
  margin: 28px 0 0;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.95;
  color: var(--ink-muted);
}

.doc-section {
  padding-top: 88px;
}

.doc-body {
  max-width: 820px;
}

.doc-group-label {
  margin: 0 0 20px;
}

.doc-group-label:not(:first-child) {
  margin-top: 88px;
}

.doc-article {
  padding: 28px 0 32px;
  border-top: 1px solid var(--line);
}

.doc-heading {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.5;
}

.doc-article p {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.95;
  color: var(--ink-muted);
}

.doc-article p + p {
  margin-top: 14px;
}

.doc-sign {
  margin: 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.9;
  text-align: right;
}

/* 運営サイトのリンク一覧: 2列。別サイトへ開くので ↗ を付ける */
.doc-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.doc-links li:nth-last-child(-n + 2) .doc-link {
  border-bottom: 1px solid var(--line);
}

.doc-link-mark {
  flex: none;
  font-family: var(--font-latin);
  color: var(--label-muted);
}

.doc-link:hover .doc-link-mark,
.doc-link:hover {
  color: var(--coral-text);
}

/* 予備テンプレート（index.php）: 本文とリンク一覧の間 */
.doc-links-wrap {
  margin-top: 64px;
}

/* 画面には出さず、読み上げでだけ伝える文字（WordPress 標準のクラス名） */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .doc-title {
    font-size: 3rem;
  }
}

@media (max-width: 1023px) {
  .doc-hero {
    padding: 72px 0 56px;
  }

  .doc-title {
    font-size: 2.5rem;
  }

  .doc-section {
    padding-top: 64px;
  }
}

@media (max-width: 767px) {
  .doc-hero {
    padding: 48px 0 40px;
  }

  .doc-title {
    font-size: 1.875rem;
  }

  .doc-lead {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.8;
  }

  .doc-section {
    padding-top: 44px;
  }

  .doc-group-label:not(:first-child) {
    margin-top: 56px;
  }

  .doc-heading {
    font-size: 1.125rem;
  }

  .doc-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-links li:nth-last-child(2) .doc-link {
    border-bottom: 0;
  }
}

/* 工程の4並び（QAコンサル）。1024〜1279px と 768〜1023px は2並び */
.svc-steps-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1279px) {
  .svc-steps-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .svc-steps-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 比較の3並びの下に続く要素との間 */
.svc-compare + * {
  margin-top: 72px;
}

@media (max-width: 767px) {
  .svc-compare + * {
    margin-top: 48px;
  }
}

/* svc 区画内の FAQ は本文幅で */
.svc-faq {
  max-width: 900px;
}

.svc-faq .faq-item:first-of-type {
  border-top-color: var(--line);
}

.svc-faq .faq-question {
  padding: 22px 0 21px;
  font-size: 1.0625rem;
}

/* ---------- 支援事例（一覧・各事例）2026-09-24 ----------
   題名は、語のかたまりが1行に収まる幅でだけ語の途中で折らない（読点・空白・<wbr> で折る）。
   狭い幅で keep-all にすると、収まらないかたまりが無理に折れて1文字の行ができるため、通常の折り返しのまま */
@media (min-width: 1024px) {
  .page-hero .page-title {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 768px) {
  .case-index-title {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* 複数行の題名は行の長さをそろえ、1文字だけの行を作らない（対応ブラウザのみ。非対応では通常どおり） */
.page-hero .page-title,
.case-index-title,
.case-main h3,
.case-pager a,
.page-cta-layout .section-title {
  text-wrap: balance;
}

/* ページ末尾の相談（事例一覧・各事例で共通の .page-cta-layout）:
   左右2段をやめ、サービスページの相談区画と同じ縦の並びにする */
.page-cta-layout {
  display: block;
}

.page-cta-layout .section-title {
  max-width: 900px;
  font-size: var(--fs-h1);
  line-height: 1.3;
}

.page-cta-action {
  display: block;
  margin-top: 24px;
}

.page-cta-action p {
  max-width: 640px;
  font-size: var(--fs-lead);
  line-height: 1.95;
}

.page-cta-action .primary-cta {
  width: 300px;
  max-width: 100%;
  min-width: 0;
  min-height: 58px;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}

@media (max-width: 1023px) {
  .page-cta-layout .section-title {
    font-size: 2.25rem;
  }
}

@media (max-width: 767px) {
  /* 狭い幅では語の途中で折らない指定（theme.css の .section-title）を外す。収まらない語が「い、」だけの行を作るため */
  .page-cta-layout .section-title {
    font-size: 1.5rem;
    word-break: normal;
  }

  .page-cta-action {
    margin-top: 18px;
  }

  .page-cta-action p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .page-cta-action .primary-cta {
    width: 100%;
    max-width: 420px;
    margin-top: 28px;
  }
}

/* 3列のカード（会社概要の理念）。1023px 以下は1列 */
.svc-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .svc-cards-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 会社情報の表: 区画の見出しの直下に置く（表の上の罫線は1本だけ） */
.company-info-section .svc-head {
  margin-bottom: 40px;
}

/* お問い合わせの種別（ラジオボタン）2026-09-24。
   フォーム部品共通の枠線・高さ（.wpcf7-form-control）を、ラジオの束では外す */
/* 共通指定（:not() 2つで優先度が高い）に勝つよう、同じ :not() を重ねる */
.contact-form-wrap .wpcf7-form-control.wpcf7-radio:not([type="submit"]):not([type="hidden"]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

.contact-form-wrap .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}

.contact-form-wrap .wpcf7-radio label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.contact-form-wrap .wpcf7-radio input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--coral);
}

.contact-form-wrap .wpcf7-radio input[type="radio"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ハニーポット欄（人には見せない）。display:none だと読み飛ばすボットがいるため画面外へ出す */
.contact-form-wrap .form-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-wrap .contact-sales-note {
  margin: -8px 0 26px;
}

/* 会社情報の「事業内容」: 所在地の隣（PC）に置き、サービス名＋短い説明を1行ずつ */
.company-business {
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-business li {
  line-height: 1.8;
}

.company-business li + li {
  margin-top: 14px;
}

.company-business-name {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

/* お問い合わせ（2026-09-24）: 右側の「初回相談について」を色面の箱にせず、上の太線で区切る。
   FAQ の見出しは他ページの区画見出しと同じ大きさ */
.contact-aside {
  padding: 24px 0 0;
  background: none;
  border: 0;
  border-top: 2px solid var(--ink);
}

.contact-faq .section-title {
  font-size: var(--fs-h1);
  line-height: 1.3;
}

@media (max-width: 1023px) {
  .contact-faq .section-title {
    font-size: 2.25rem;
  }
}

@media (max-width: 767px) {
  .contact-aside {
    padding: 22px 0 0;
  }

  .contact-faq .section-title {
    font-size: 1.75rem;
  }
}
/* ----- サービス一覧 ここまで ----- */

/* ---------- LP（/release-bottleneck/）2026-10-03 ----------
   見出しの句点をぶら下げ、1行目の末尾で「。」だけが折れないようにする（TOP の .hero-title-p と同じ） */
.page-release-bottleneck .page-title .hero-title-p {
  letter-spacing: -0.5em;
}

/* =========================================================================
   お知らせ（/news/ 一覧と記事）2026-10-03
   文書ページ（doc-*）と同じ下地。一覧は 日付・分類・題名 の1行、記事の本文はブロックエディタの出力を整える
   ========================================================================= */
.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.news-item-link {
  display: grid;
  grid-template-columns: 7.5em 8em minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.news-date {
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--label-muted);
}

.news-cat {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--coral-text);
}

.news-item-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

.news-item-mark {
  font-family: var(--font-latin);
  color: var(--label-muted);
}

.news-item-link:hover .news-item-title,
.news-item-link:hover .news-item-mark {
  color: var(--coral-text);
}

.news-empty {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--ink-muted);
}

/* ページ送り（WordPress 標準の出力） */
.news-pagination {
  margin-top: 48px;
}

.news-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.news-pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.news-pagination .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* 記事 */
.news-article-title {
  font-size: var(--fs-h1);
  text-wrap: balance;
}

.news-meta {
  margin: 20px 0 0;
  font-family: var(--font-latin);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--label-muted);
}

.news-body {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.95;
  color: var(--ink-muted);
}

.news-body > * {
  margin: 0 0 22px;
}

.news-body > *:last-child {
  margin-bottom: 0;
}

.news-body h2 {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--ink);
}

.news-body h3 {
  margin-top: 40px;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--ink);
}

.news-body h2:first-child,
.news-body h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.news-body a {
  color: var(--coral-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.news-body strong {
  color: var(--ink);
}

.news-body ul,
.news-body ol {
  padding-left: 1.4em;
}

.news-body li + li {
  margin-top: 6px;
}

.news-body blockquote {
  margin: 0 0 22px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--coral);
}

.news-body blockquote p {
  margin: 0;
}

.news-body img {
  display: block;
  max-width: 100%;
  height: auto;
}

.news-body figure {
  margin: 32px 0;
}

.news-body figcaption {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--label-muted);
}

.news-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.news-body th,
.news-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.news-body th {
  font-weight: 700;
  color: var(--ink);
}

/* 前後の記事 */
.news-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin-top: 72px;
  border-top: 1px solid var(--line);
}

.news-nav-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0;
  color: var(--ink);
  text-decoration: none;
}

.news-nav-link.is-next {
  text-align: right;
}

.news-nav-title {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
}

a.news-nav-link:hover .news-nav-title {
  color: var(--coral-text);
}

@media (max-width: 767px) {
  .news-item-link {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "date cat mark"
      "title title title";
    gap: 10px 16px;
    padding: 20px 0;
  }

  .news-date { grid-area: date; }
  .news-cat { grid-area: cat; }
  .news-item-title { grid-area: title; font-size: 1rem; }
  .news-item-mark { grid-area: mark; justify-self: end; }

  .news-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-nav-link.is-next {
    text-align: left;
    border-top: 1px solid var(--line);
  }

  .news-nav-link.is-empty {
    display: none;
  }
}