/* 2026-08-26 MTG feedback: mobile readability, hierarchy, spacing, and alignment */
.section-eyebrow {
  margin: 0 0 10px !important;
  color: #287fae !important;
  font-size: var(--fs-xs) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

.operations-heading h2 {
  position: relative;
  padding-bottom: 22px;
}

.operations-heading h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background: var(--color-blue);
}

.credibility-heading .credibility-kicker {
  margin: 18px 0 0;
  color: #4d657a;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.8;
}

.operation-story.operation-story-company-ai {
  padding: clamp(32px, 3.1vw, 44px);
  border: 1px solid #d5e7f2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 64px rgba(21, 74, 112, .08);
}

.faq-list summary::after {
  content: "";
  box-sizing: border-box;
  justify-self: center;
  align-self: center;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
  transform-origin: center;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }

.plan-main-cta { gap: 0; }
.plan-main-cta > small { margin-top: 12px; }
.plan-main-cta .plan-note { margin: 2px auto 0; }

/* 2026-08-31: desktop section intros share one visual center */
@media (min-width: 769px) {
  .operations-section,
  .credibility-section {
    padding-top: clamp(64px, 6vw, 80px);
  }

  .comparison .comparison-heading,
  .operations-heading,
  .credibility-heading,
  .diagnosis-intro,
  .faq-layout > header {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    text-align: center;
  }

  .section-heading h2,
  .comparison .comparison-heading h2,
  .operations-heading h2,
  .practice-results-heading h3,
  .practice-principles > header h3,
  .credibility-heading h2,
  .diagnosis-intro h2,
  .faq-layout > header h2 {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    font-size: var(--fs-section);
    line-height: 1.3;
    text-wrap: balance;
  }

  .comparison .comparison-heading {
    max-width: none;
  }

  .operations-heading,
  .diagnosis-intro {
    display: block;
  }

  .operations-heading h2::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .operations-heading > p,
  .diagnosis-intro > div:last-child > p {
    max-width: 780px;
    margin: 26px auto 0;
    text-align: center;
  }

  .diagnosis-intro ul {
    justify-content: center;
  }

  .faq-layout > header {
    position: static;
    grid-column: 1 / -1;
    max-width: 780px;
  }

  .faq-list {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1101px) {
  .credibility-heading .heading-phrase {
    display: inline-block;
  }
}

@media (max-width: 768px) {
  .section {
    padding-block: 64px;
    border-top: 1px solid rgba(7, 111, 166, .12);
  }

  .section-heading,
  .operations-heading,
  .practice-results-heading,
  .practice-principles > header,
  .credibility-heading,
  .capability-heading,
  .diagnosis-intro > div:first-child,
  .faq-layout > header {
    text-align: center;
  }

  .section-heading > p:first-child,
  .operations-heading .section-eyebrow,
  .practice-principles > header > p,
  .credibility-heading .section-en,
  .diagnosis-intro .section-en,
  .faq-layout > header .section-en {
    margin-bottom: 9px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    letter-spacing: .14em;
  }

  .section-heading h2,
  .operations-heading h2,
  .practice-results-heading h3,
  .practice-principles > header h3,
  .credibility-heading h2,
  .faq-layout > header h2 {
    width: 100%;
    margin-inline: auto;
    font-size: var(--fs-heading);
    line-height: 1.5;
  }

  .section-heading,
  .operations-heading,
  .practice-results-heading,
  .practice-principles > header,
  .credibility-heading,
  .faq-layout > header { margin-bottom: 32px; }

  .operations-heading { display: block; }
  .operations-heading h2::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .operations-heading > p {
    max-width: 38rem;
    margin: 18px auto 0;
    font-size: var(--fs-body);
    line-height: 1.9;
    text-align: left;
  }

  .operation-story.operation-story-company-ai {
    padding: 28px 18px;
    border-radius: 18px;
  }

  .operation-story-company-ai .operation-story-copy {
    padding-inline: 0;
  }

  .hero-ai { min-height: 710px; }
  .hero-ai-inner { min-height: 710px; }
  .hero-ai-lead { font-size: var(--fs-body); line-height: 1.72; }
  .hero-ai-authority { font-size: var(--fs-xs); line-height: 1.65; }

  .issue-scene-pins strong { font-size: var(--fs-xs); }
  .issue-stories small { font-size: var(--fs-xs); }
  .issue-stories h3 { font-size: var(--fs-title); }
  .issue-stories p,
  .issue-stories .issue-current { font-size: var(--fs-body); line-height: 1.8; }

  .comparison-heading .comparison-kicker { font-size: var(--fs-body); }
  .comparison-support-badge { font-size: var(--fs-body); }
  .comparison-support-board li strong { font-size: var(--fs-body); }
  .comparison-support-board li span { font-size: var(--fs-body); }
  .comparison-commitment { justify-content: center; }
  .comparison-commitment-copy { font-size: var(--fs-body); text-align: center; }

  .operations-proofline-stat,
  .operations-proofline-stat strong { justify-items: center; text-align: center; }
  .operations-proofline-stat span { font-size: var(--fs-body); }
  .operation-story-number { font-size: var(--fs-xs); }
  .operation-story-title h3 { font-size: var(--fs-title); }

  .practice-results-heading { text-align: center; }
  .proof-results-unified > article > p { font-size: var(--fs-body); line-height: 1.75; }
  .practice-principles li > p { font-size: var(--fs-body); line-height: 1.85; }

  .credibility-kicker { font-size: var(--fs-body); }
  .credibility-lead { font-size: var(--fs-body); line-height: 1.85; }
  .credibility-story li b { font-size: var(--fs-body); }
  .credibility-story li small { font-size: var(--fs-body); line-height: 1.7; }

  .capability-lead { font-size: var(--fs-body) !important; }
  .usecase-panels header p,
  .usecase-groups h4,
  .usecase-groups li { font-size: var(--fs-body); }

  .plan-grid li { font-size: var(--fs-body); }
  .plan-main-cta { gap: 0; margin-top: 28px; }
  .section-cta > small,
  .plan-note { font-size: var(--fs-body); line-height: 1.7; }
  .section-cta > small { margin-top: 10px; }
  .plan-note { max-width: 34rem; margin: 3px auto 0; }

  .faq-layout { gap: 22px; }
  .faq-layout > header > p:last-child { font-size: var(--fs-body); }
  .faq-list summary {
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    gap: 9px;
    min-height: 80px;
    font-size: var(--fs-body);
    line-height: 1.65;
  }
  .faq-list summary::after { width: 30px; height: 30px; }
  .faq-list details > div { padding-inline: 43px 38px; }
  .faq-list details p { font-size: var(--fs-body); line-height: 1.8; }
}

@media (max-width: 520px) {
  .operation-story.operation-story-company-ai { padding: 24px 14px; }
}

/* ============================================================
   2026-09-02 荒川さんMTG フィードバック
   1. 文字サイズは styles.css の --fs-* 10段階に統一（本文16px / 注釈13pxが下限）
   2. 以下はそのうえで残った、間隔・位置・改行の調整
   ============================================================ */

/* CTAボタンの文字級数を揃える（診断ボタンは本文より1段上） */
.section-cta > a,
.diagnosis-start > button,
.final-cta .cta-main > a { font-size: var(--fs-title); }

/* 最終CTA：見出しと本文の間隔を空け、ボタンと注釈を下へ下げる */
.final-cta .cta-main h2 { margin-bottom: 34px; }
.final-cta .cta-description { margin-bottom: 24px; }
.final-cta .cta-main > a { margin-bottom: 16px; }

/* 診断イントロ：バッジ列を上下の余白の中央に置く（上に張り付いていた） */
.diagnosis-intro > div:last-child > ul { margin-top: 14px; }
.diagnosis-intro { margin-bottom: 14px; }
.diagnosis-intro li { display: inline-flex; align-items: center; padding: 9px 14px; line-height: 1.2; }

/* WHYセクション：3ステップの見出しを1段上げる */
.credibility-story li b { font-size: var(--fs-lead); }

@media (max-width: 768px) {
  /* 実践事例02：監視→通知の行を左右中央へ */
  .routine-monitor > span { justify-content: center; }

  /* 実践事例セクションとWHYセクションの間の空白を詰める */
  .operations-section { padding-bottom: 36px; }
  .credibility-section { padding-top: 36px; }
  .practice-principles > ol > li:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* WHY：人とAIの分担リード（2026-09-02 追加コピー） */
.credibility-split-lead {
  margin: 0 0 18px;
  color: var(--color-ink);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

/* WHY見出し：前半はインク色、後半をブルーで強調（2026-09-02 コピー差し替え） */
.credibility-heading h2 b { color: var(--color-ink); font-weight: inherit; }

/* 指定のない <small> がブラウザ既定で本文より小さくなるのを止める（注釈は13pxが下限） */
small { font-size: var(--fs-note); }

/* 診断結果：「伸びしろ大」が途中で折り返さないようにする */
.axis-meter small em { white-space: nowrap; }

/* BEFORE/AFTERカード：注釈の行数が違っても区切り線の高さが揃うようにする
   （3枚のうち1枚だけ注釈が3行になり、線が19pxずれていた） */
.proof-results-unified > article > p { min-height: calc(1em * 1.7 * 3 + 16px); }

/* 実践事例03の専用AIグリッド：SP（2列）で左端セルに縦罫線が残る問題
   原因は 3列用の li:nth-child(3n+2), li:nth-child(3n+3)（詳細度 0,2,2）を
   2列用の li { border: 0 }（詳細度 0,2,1）で消せていなかったこと。
   同じ詳細度で打ち消し、内側だけに罫線が入る状態へ揃える。 */
@media (max-width: 768px) {
  .operation-story-company-ai .company-ai-office li:nth-child(odd) { border-left: 0; }
  .operation-story-company-ai .company-ai-office li:nth-child(even) { border-left: 1px solid rgba(0, 111, 202, .2); }
  .operation-story-company-ai .company-ai-office li:nth-child(-n + 2) { border-top: 0; }
  .operation-story-company-ai .company-ai-office li:nth-child(n + 3) { border-top: 1px solid rgba(0, 111, 202, .2); }
}