/* ==========================================================================
   CASE STUDY（導入事例）専用スタイル
   - コーポレートカラー：白・黒・グレーのモノトーン
   - 赤（#BF293B）は「成果の数字」「概要」「選択中のタブ」など要点のみに限定
   - すべて #case スコープ（例外: service.html から使う .case-inline-link）
   ========================================================================== */

#case {
  --c-ink: #121212;
  --c-text: #333333;
  --c-sub: #666666;
  --c-mute: #8C8C8C;
  --c-line: #DCDCDC;
  --c-bg: #F0F0F0;
  --c-bg-soft: #F7F7F7;
  --c-red: #BF293B;
}

/* SERVICE ページ「システム開発」末尾のリンク */
.case-inline-link {
  display: inline-block;
  margin-top: 1.6rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: #121212;
  border-bottom: 1px solid #121212;
  padding-bottom: 0.2rem;
  transition: 0.2s ease-in;
}

.case-inline-link:hover {
  color: #BF293B;
  border-bottom-color: #BF293B;
}

/* ページヘッダー（既存 .top-bg-section の背景指定のみ） */
#case .top-bg-section {
  background-image: url(../image/case_header.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* --------------------------------------------------------------------------
   一覧ページ: ヒーロー
   -------------------------------------------------------------------------- */
#case .case-intro {
  padding: 8rem 0 0;
}

#case .case-intro__label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--c-sub);
  letter-spacing: 0.08em;
}

#case .case-intro__label::before {
  content: "";
  width: 0.3rem;
  height: 1.6rem;
  background-color: var(--c-red);
}

#case .case-voice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2rem;
}

#case .case-voice-chips button {
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.8rem 1.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--c-text);
  transition: 0.2s ease-in;
}

#case .case-voice-chips button:hover {
  border-color: var(--c-ink);
  background-color: var(--c-ink);
  color: #ffffff;
}

#case .case-intro__title {
  margin-top: 3.2rem;
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-ink);
}

#case .case-intro__desc {
  margin-top: 2.4rem;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--c-text);
}

#case .case-intro__guide {
  margin-top: 1.2rem;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--c-sub);
}

/* --------------------------------------------------------------------------
   一覧ページ: 絞り込みタブ
   -------------------------------------------------------------------------- */
#case .case-filter {
  margin-top: 4.8rem;
  border-bottom: 1px solid var(--c-line);
}

#case .case-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
}

#case .case-filter__btn {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  background: none;
  padding: 0 0 1.6rem;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--c-mute);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: 0.2s ease-in;
}

#case .case-filter__btn .count {
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  color: var(--c-mute);
}

#case .case-filter__btn:hover {
  color: var(--c-ink);
}

#case .case-filter__btn.is-active {
  color: var(--c-ink);
  font-weight: 500;
  border-bottom-color: var(--c-red);
}

#case .case-filter__btn.is-active .count {
  color: var(--c-red);
}

/* --------------------------------------------------------------------------
   一覧ページ: カテゴリー
   -------------------------------------------------------------------------- */
#case .case-group {
  padding: 6.4rem 0 0;
  scroll-margin-top: 12rem;
}

#case .case-group.is-hidden {
  display: none;
}

#case .case-group:last-of-type {
  padding-bottom: 2rem;
}

#case .case-group__head {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  border-left: 0.6rem solid var(--c-ink);
  padding-left: 2rem;
}

#case .case-group__num {
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-mute);
  line-height: 1;
}

#case .case-group__title {
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.4;
}

#case .case-group__lead {
  margin-top: 1.6rem;
  padding-left: 2.6rem;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--c-sub);
}

#case .case-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
  margin-top: 3.2rem;
}

#case .case-card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background-color: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 2.8rem;
  transition: 0.3s ease-in-out;
}

#case .case-card:hover {
  transform: translateY(-0.4rem);
  border-color: var(--c-ink);
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.08);
}

#case .case-card__top {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

#case .case-card__icon {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-content: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-ink);
  transition: 0.3s ease-in-out;
}

#case .case-card:hover .case-card__icon {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: #ffffff;
}

#case .case-card__tag {
  width: fit-content;
  background-color: var(--c-bg);
  border-radius: 2px;
  padding: 0.4rem 1.2rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--c-sub);
}

#case .case-card__title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink);
}

#case .case-card__hook {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--c-sub);
}

/* 成果の数字＝赤のポイント */
#case .case-card__chip {
  margin-top: auto;
  width: fit-content;
  border: 1px solid rgba(191, 41, 59, 0.35);
  border-radius: 999px;
  padding: 0.6rem 1.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-red);
}

/* --------------------------------------------------------------------------
   事例詳細ページ
   -------------------------------------------------------------------------- */
#case .case-article-section {
  padding: 8rem 0 2rem;
}

#case .case-article {
  max-width: 86rem;
  margin: 0 auto;
}

#case .case-article__head {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

#case .case-article__icon {
  flex-shrink: 0;
  width: 5.6rem;
  height: 5.6rem;
  display: grid;
  place-content: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-ink);
}

#case .case-article__tag {
  display: inline-block;
  background-color: var(--c-bg);
  border-radius: 2px;
  padding: 0.4rem 1.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-sub);
}

#case .case-article__title {
  margin-top: 1.6rem;
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink);
}

#case .case-article__hook {
  margin-top: 1.6rem;
  font-size: 1.8rem;
  line-height: 1.8;
  color: var(--c-sub);
}

/* 概要＝赤のポイント */
#case .case-summary {
  margin-top: 4rem;
  background-color: var(--c-bg-soft);
  border-left: 0.6rem solid var(--c-red);
  padding: 2.4rem 2.8rem;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 2;
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   詳細ページ: 導入前後の変化（図表）
   -------------------------------------------------------------------------- */
#case .case-metrics {
  margin-top: 3.2rem;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 3.2rem;
}

#case .case-metrics__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--c-ink);
}

#case .case-metrics__head::before {
  content: "";
  width: 0.3rem;
  height: 1.6rem;
  background-color: var(--c-ink);
}

#case .case-metric {
  padding: 2.4rem 0;
  border-bottom: 1px dashed var(--c-line);
}

#case .case-metric:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

#case .case-metric__label {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-sub);
}

#case .case-metric__row {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  align-items: center;
  gap: 1.6rem;
  margin-top: 1.2rem;
}

#case .case-metric__stage {
  display: grid;
  place-content: center;
  padding: 0.3rem 0;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  font-size: 1.2rem;
  color: var(--c-sub);
}

#case .case-metric__row.is-after .case-metric__stage {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: #ffffff;
}

#case .case-metric__value {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-mute);
}

/* 導入後の値＝赤のポイント */
#case .case-metric__row.is-after .case-metric__value {
  color: var(--c-red);
}

#case .case-article h2 {
  margin: 6.4rem 0 2.4rem;
  border-left: 0.6rem solid var(--c-ink);
  padding-left: 1.6rem;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-ink);
}

#case .case-article > p {
  font-size: 1.6rem;
  line-height: 2;
  color: var(--c-text);
}

#case .case-results {
  counter-reset: case-num;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

#case .case-results li {
  position: relative;
  padding-left: 4.8rem;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--c-text);
  counter-increment: case-num;
}

#case .case-results li::before {
  content: counter(case-num);
  position: absolute;
  left: 0;
  top: 0;
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-content: center;
  background-color: var(--c-ink);
  border-radius: 50%;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}

/* 本文中の強調＝赤のポイント */
#case .case-em {
  color: var(--c-red);
  font-weight: 500;
}

#case .case-figure {
  display: block;
  overflow: visible;
  margin-top: 3.2rem;
}

#case .case-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: 4px;
}

#case .case-figure figcaption {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  color: var(--c-sub);
  text-align: center;
}

#case .case-source {
  margin-top: 5.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line);
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--c-mute);
}

/* --------------------------------------------------------------------------
   CTA（全ページ共通）
   -------------------------------------------------------------------------- */
#case .case-cta {
  padding: 8rem 0 10rem;
}

#case .case-cta__inner {
  background-color: var(--c-bg);
  border-radius: 4px;
  padding: 6.4rem 4rem;
  text-align: center;
}

#case .case-cta__title {
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.5;
}

#case .case-cta__lead {
  margin-top: 2rem;
  font-size: 1.5rem;
  color: var(--c-sub);
}

#case .case-cta__examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  max-width: 76rem;
  margin: 2rem auto 0;
  text-align: left;
}

#case .case-cta__examples li {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background-color: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 1.6rem 2rem;
}

#case .case-cta__ex-label {
  flex-shrink: 0;
  margin-top: 0.2rem;
  background-color: var(--c-bg);
  border-radius: 2px;
  padding: 0.3rem 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--c-ink);
  white-space: nowrap;
}

#case .case-cta__ex-text {
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--c-text);
}

#case .case-cta__desc {
  max-width: 60rem;
  margin: 2.4rem auto 0;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--c-text);
}

#case .case-cta .primary-btn {
  margin-top: 4rem;
}

#case .case-cta .primary-btn:hover {
  border-color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   タブレット（〜768px）
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  #case .case-cards {
    grid-template-columns: 1fr;
  }

  #case .case-group {
    scroll-margin-top: 80px;
  }

  #case .case-intro__title {
    font-size: 2.8rem;
  }

  #case .case-article__title {
    font-size: 2.8rem;
  }

  #case .case-filter__list {
    gap: 2.4rem;
  }

  #case .case-metrics {
    padding: 2.4rem;
  }

  #case .case-cta__examples {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   スマホ（〜576px）
   ※ このサイトの root font-size は vw 連動で 375px 幅では 1rem≒6.5px と
     小さくなるため、本文系は px 指定で可読サイズを担保する
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
  .case-inline-link {
    font-size: 14px;
    margin-top: 12px;
  }

  #case .case-intro {
    padding: 48px 0 0;
  }

  #case .case-intro__label {
    font-size: 13px;
    gap: 8px;
  }

  #case .case-intro__label::before {
    width: 3px;
    height: 14px;
  }

  #case .case-voice-chips {
    gap: 8px;
    margin-top: 14px;
  }

  #case .case-voice-chips button {
    font-size: 12px;
    padding: 7px 14px;
  }

  #case .case-intro__title {
    margin-top: 22px;
    font-size: 21px;
    line-height: 1.7;
  }

  #case .case-intro__desc {
    margin-top: 14px;
    font-size: 14px;
  }

  #case .case-intro__guide {
    margin-top: 8px;
    font-size: 13px;
  }

  #case .case-filter {
    margin-top: 28px;
    /* タブが多いので横スクロールで逃がす */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #case .case-filter__list {
    flex-wrap: nowrap;
    gap: 20px;
    width: max-content;
    min-width: 100%;
  }

  #case .case-filter__btn {
    font-size: 13px;
    padding-bottom: 10px;
    white-space: nowrap;
  }

  #case .case-filter__btn .count {
    font-size: 11px;
  }

  #case .case-group {
    padding: 32px 0 0;
  }

  #case .case-group__head {
    border-left-width: 4px;
    padding-left: 12px;
    gap: 10px;
  }

  #case .case-group__num {
    font-size: 14px;
  }

  #case .case-group__title {
    font-size: 19px;
  }

  #case .case-group__lead {
    margin-top: 10px;
    padding-left: 16px;
    font-size: 13px;
  }

  #case .case-cards {
    gap: 14px;
    margin-top: 20px;
  }

  #case .case-card {
    padding: 20px;
    gap: 10px;
  }

  #case .case-card__top {
    gap: 10px;
  }

  #case .case-card__icon {
    width: 34px;
    height: 34px;
  }

  #case .case-card__icon svg {
    width: 18px;
    height: 18px;
  }

  #case .case-card__tag {
    font-size: 11px;
  }

  #case .case-card__title {
    font-size: 17px;
  }

  #case .case-card__hook {
    font-size: 13px;
  }

  #case .case-card__chip {
    font-size: 12px;
    padding: 5px 14px;
  }

  #case .case-article-section {
    padding: 48px 0 8px;
  }

  #case .case-article__head {
    gap: 12px;
  }

  #case .case-article__icon {
    width: 40px;
    height: 40px;
  }

  #case .case-article__icon svg {
    width: 20px;
    height: 20px;
  }

  #case .case-article__tag {
    font-size: 12px;
  }

  #case .case-metrics {
    margin-top: 24px;
    padding: 18px;
  }

  #case .case-metrics__head {
    font-size: 14px;
    gap: 8px;
  }

  #case .case-metrics__head::before {
    width: 3px;
    height: 14px;
  }

  #case .case-metric {
    padding: 16px 0;
  }

  #case .case-metric__label {
    font-size: 12px;
  }

  #case .case-metric__row {
    grid-template-columns: 44px 1fr;
    gap: 10px;
    margin-top: 8px;
  }

  #case .case-metric__stage {
    font-size: 10px;
    align-self: center;
  }

  #case .case-metric__value {
    font-size: 16px;
  }

  #case .case-article__title {
    margin-top: 12px;
    font-size: 22px;
    line-height: 1.6;
  }

  #case .case-article__hook {
    margin-top: 10px;
    font-size: 14px;
  }

  #case .case-summary {
    margin-top: 24px;
    border-left-width: 4px;
    padding: 16px 18px;
    font-size: 14px;
  }

  #case .case-article h2 {
    margin: 40px 0 16px;
    border-left-width: 4px;
    padding-left: 12px;
    font-size: 19px;
  }

  #case .case-article > p {
    font-size: 14px;
  }

  #case .case-results {
    gap: 12px;
  }

  #case .case-results li {
    padding-left: 34px;
    font-size: 14px;
  }

  #case .case-results li::before {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  #case .case-figure {
    margin-top: 20px;
  }

  #case .case-figure figcaption {
    margin-top: 8px;
    font-size: 12px;
  }

  #case .case-source {
    margin-top: 36px;
    padding-top: 14px;
    font-size: 11px;
  }

  #case .case-cta {
    padding: 48px 0 64px;
  }

  #case .case-cta__inner {
    padding: 36px 20px;
  }

  #case .case-cta__title {
    font-size: 19px;
  }

  #case .case-cta__lead {
    margin-top: 14px;
    font-size: 13px;
  }

  #case .case-cta__examples {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  #case .case-cta__examples li {
    gap: 10px;
    padding: 12px 14px;
  }

  #case .case-cta__ex-label {
    font-size: 11px;
    padding: 3px 8px;
  }

  #case .case-cta__ex-text {
    font-size: 13px;
  }

  #case .case-cta__desc {
    margin-top: 16px;
    font-size: 14px;
    text-align: left;
  }

  #case .case-cta .primary-btn {
    margin-top: 24px;
    font-size: 15px;
    padding: 14px 40px;
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   業務フロー図（HTML版）
   2026-08-18: 画像(PNG)から置き換え。画像は文字が潰れる・改行位置がずれる・
   スマホで読めない・検索や読み上げに乗らない、という問題があった。
   色は図の意味に紐づけて使う（紺=工程、緑=システム/自動化、橙=手戻り・注意）。
   ⚠ 赤(--c-red)はページ側の要点表示に予約されているため、図では使わない。
   -------------------------------------------------------------------------- */
#case .case-flow {
  --flow-navy: #1F3A5F;
  --flow-green: #1E7A46;
  --flow-amber: #D98324;
  margin-top: 3.2rem;
}

#case .case-flow__steps {
  display: grid;
  grid-template-columns: repeat(var(--flow-cols, 3), 1fr);
  gap: 1.2rem;
  align-items: stretch;
}

#case .case-flow__step {
  position: relative;
  padding: 2.4rem 2rem;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: #fff;
}

/* 工程のあいだの矢印。カードの外側に絶対配置せず、gap の中央に置く */
#case .case-flow__step + .case-flow__step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1.2rem - 1px);
  width: 1.2rem;
  height: 2px;
  background: var(--flow-navy);
  transform: translateY(-50%);
}
#case .case-flow__step + .case-flow__step::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.5rem;
  border: 5px solid transparent;
  border-left-color: var(--flow-navy);
  transform: translateY(-50%);
}

#case .case-flow__head {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

#case .case-flow__num {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--flow-navy);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

#case .case-flow__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
  /* 画像版では長い見出しが「手入 / 力」のように割れていた。単語で折る */
  word-break: normal;
  overflow-wrap: anywhere;
}

#case .case-flow__desc {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--c-text);
  margin-bottom: 1.6rem;
}

/* 図版（伝票・画面のミニチュア） */
#case .case-flow__visual {
  border: 1px solid var(--c-line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--c-bg-soft);
}

#case .case-flow__cap {
  padding: 0.8rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  background: #EDEFF3;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
}
#case .case-flow__cap--sys {
  background: var(--flow-green);
  color: #fff;
  border-bottom: 0;
  text-align: left;
}

#case .case-flow__meta {
  padding: 0.8rem 1.2rem;
  font-size: 1.1rem;
  color: var(--c-sub);
  background: #fff;
}

#case .case-flow table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 1.15rem;
  line-height: 1.6;
}
#case .case-flow th,
#case .case-flow td {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--c-line);
  text-align: left;
  white-space: nowrap;
}
#case .case-flow th {
  background: var(--c-bg);
  font-weight: 700;
  color: var(--c-ink);
}
#case .case-flow__cap--sys + table th {
  background: #E8F1EC;
}

/* 状態や数値の印 */
#case .case-flow .is-ok { color: var(--flow-green); font-weight: 700; }
#case .case-flow .is-warn { color: var(--flow-amber); font-weight: 700; }

/* 補足の一行（アイコン＋テキスト） */
#case .case-flow__note {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--c-sub);
}
#case .case-flow__note svg { flex: 0 0 auto; }
#case .case-flow__note--warn { color: var(--flow-amber); font-weight: 700; }
#case .case-flow__note--ok { color: var(--flow-green); font-weight: 700; }

/* 集計チップ */
#case .case-flow__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.8rem;
  background: #fff;
  border-top: 1px solid var(--c-line);
}
#case .case-flow__chip {
  font-size: 1.1rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-sub);
  white-space: nowrap;
}

#case .case-flow__caption {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  color: var(--c-sub);
  text-align: center;
}

/* 横スクロールが必要な表だけ、その表を包む */
#case .case-flow__scroll { overflow-x: auto; }

@media screen and (max-width: 900px) {
  /* スマホでは縦に積み、矢印を下向きにする。
     画像版では1400px幅の図を縮小表示していたため文字が読めなかった */
  #case .case-flow__steps { grid-template-columns: 1fr; gap: 2.4rem; }
  #case .case-flow__step + .case-flow__step::before {
    top: -2.4rem; left: 50%; width: 2px; height: 1.6rem; transform: translateX(-50%);
  }
  #case .case-flow__step + .case-flow__step::after {
    top: -0.9rem; left: 50%;
    border-left-color: transparent; border-top-color: var(--flow-navy);
    transform: translateX(-50%);
  }
  #case .case-flow__title { font-size: 16px; }
  #case .case-flow__desc { font-size: 14px; }
  #case .case-flow table { font-size: 13px; }
  #case .case-flow__note, #case .case-flow__chip, #case .case-flow__meta { font-size: 12px; }
  #case .case-flow__caption { font-size: 13px; }
}

/* --- 媒体の描き分け -------------------------------------------------------
   2026-08-18 施主指摘: 紙もExcelもシステム画面も同じ表に見えて区別がつかない。
   FAXで届くものは紙、保存されるものはPDFファイル、入力先はExcel、
   確認するのはアプリ画面。**見た目で媒体が分かる**ようにする。
   -------------------------------------------------------------------------- */

/* 紙（FAXで届いた注文書・伝票） */
#case .case-flow__paper {
  position: relative;
  background: #fff;
  border: 1px solid #D5D5D5;
  border-radius: 2px;                       /* 紙は角を立てる */
  box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.13);
  padding: 1.2rem 1.2rem 1.6rem;
}
#case .case-flow__paper::after {            /* 右下の折れ */
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  border: 9px solid transparent;
  border-right-color: #EDEDED;
  border-bottom-color: #EDEDED;
}
#case .case-flow__paper-tag {
  display: inline-block;
  margin-bottom: 0.8rem;
  padding: 0.2rem 0.8rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #555;
  background: #F0F0F0;
  border: 1px solid #DDD;
  border-radius: 2px;
}
#case .case-flow__paper-title {
  margin-bottom: 0.8rem;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.15em;
  color: var(--c-ink);
}
#case .case-flow__paper table th { background: #F5F5F5; }
/* 紙に書かれた手書きの追記 */
#case .case-flow__hand {
  margin-top: 0.8rem;
  font-size: 1.15rem;
  color: #1F4E9C;
  transform: rotate(-1.2deg);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

/* Excelファイル */
#case .case-flow__xls-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--flow-green);
  color: #fff;
  font-size: 1.2rem; font-weight: 700;
}
#case .case-flow__xls-cols {
  display: grid;
  background: #F3F3F3;
  border-bottom: 1px solid var(--c-line);
  font-size: 1rem; color: #888; text-align: center;
}
#case .case-flow__xls-cols span { padding: 0.25rem 0; border-right: 1px solid #E4E4E4; }
#case .case-flow__xls td:first-child,
#case .case-flow__xls th:first-child {
  width: 2.4rem; text-align: center;
  background: #F3F3F3; color: #888; font-weight: 400; font-size: 1rem;
}

/* PDFファイル */
#case .case-flow__file {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 4px;
}
#case .case-flow__file-badge {
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border-radius: 3px;
  background: #B3261E;
  color: #fff;
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em;
}
#case .case-flow__file-name { font-size: 1.2rem; color: var(--c-text); word-break: break-all; }

/* アプリ／システムの画面 */
#case .case-flow__app { border: 1px solid #C8CDD4; border-radius: 6px; overflow: hidden; background: #fff; }
#case .case-flow__app-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: #E9ECF1;
  border-bottom: 1px solid #C8CDD4;
  font-size: 1.15rem; font-weight: 700; color: #33415C;
}
#case .case-flow__app-dots { display: flex; gap: 0.35rem; }
#case .case-flow__app-dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #C2C8D2; }

/* 紙 → データ の対応（OCRが何をしたのかを見せる） */
#case .case-flow__map {
  /* 3カラム表示ではカード幅が約380pxしかないため、左右対比にすると窮屈になる。
     常に縦並びにして「紙 → 項目」を上から下に読ませる（2026-08-18）。 */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  padding: 1rem;
  background: #fff;
}
#case .case-flow__map-arrow { text-align: center; }
#case .case-flow__map-arrow { color: var(--flow-green); font-size: 1.6rem; font-weight: 700; }
#case .case-flow__map-lbl { font-size: 1.05rem; color: var(--c-mute); margin-bottom: 0.4rem; text-align: center; }

/* 作業者が何をしているか（各カードの結び） */
#case .case-flow__actor {
  display: flex; align-items: flex-start; gap: 0.8rem;
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  border-radius: 4px;
  background: #F4F6F8;
  border-left: 3px solid var(--flow-navy);
  font-size: 1.25rem; line-height: 1.7; color: var(--c-text);
}
#case .case-flow__actor b { color: var(--c-ink); }
#case .case-flow__actor--auto { background: #EDF5F0; border-left-color: var(--flow-green); }
#case .case-flow__actor--auto b { color: var(--flow-green); }
#case .case-flow__actor svg { flex: 0 0 auto; margin-top: 0.2rem; }

@media screen and (max-width: 900px) {
  #case .case-flow__actor { font-size: 13px; }
  #case .case-flow__paper-title, #case .case-flow__xls-bar,
  #case .case-flow__app-bar, #case .case-flow__file-name { font-size: 13px; }
  #case .case-flow__hand, #case .case-flow__paper-tag { font-size: 12px; }
}

/* 紙→項目の対応を1つの表で見せる（2026-08-18）
   当初は「紙の図 → 矢印 → 抽出結果の表」と縦に積んでいたが、
   導入後のフローが導入前より34%高くなった（1641px対1225px）。
   紙の図は導入前とステップ1で既に出しているので、ここでは行ごとの
   対応だけを見せれば足りる。 */
#case .case-flow__to {
  width: 2.4rem;
  text-align: center !important;
  color: var(--flow-green);
  font-weight: 700;
  background: #F6FAF7;
}
#case .case-flow__from { color: var(--c-sub); }
#case .case-flow__from b { color: var(--c-ink); font-weight: 700; }

/* 詰め方の調整。情報は減らさずに高さだけ落とす */
#case .case-flow__paper { padding: 1rem 1rem 1.2rem; }
#case .case-flow__actor { margin-top: 1.2rem; padding: 0.8rem 1rem; }
#case .case-flow th, #case .case-flow td { padding: 0.5rem 0.8rem; }
#case .case-flow__desc { margin-bottom: 1.2rem; }

/* 高さの詰め（2026-08-18 施主指摘「導入後②の余白が気になる」）
   カードの上下余白と各ブロックの間隔を一段詰める。文字サイズは変えない。 */
#case .case-flow__step { padding: 1.8rem 1.6rem; }
#case .case-flow__head { margin-bottom: 0.9rem; }
#case .case-flow__desc { margin-bottom: 1rem; }
#case .case-flow__actor { margin-top: 1rem; }
#case .case-flow__cap { padding: 0.6rem 1.2rem; }

/* 3カラムで高さが揃うと、内容の少ないカードの下に大きな空白ができる
   （2026-08-18 施主指摘。縦積みでは起きないためデスクトップで初めて見えた）。
   本文を伸ばして余りを吸わせ、作業者欄は各カードの下端に揃える。 */
#case .case-flow__step { display: flex; flex-direction: column; }
#case .case-flow__body { flex: 1 1 auto; margin-bottom: 1rem; }
#case .case-flow__actor { margin-top: 0; }

/* カラムを完全な等幅にする（2026-08-18 施主指摘「まだおかしい」）
   1fr でもグリッドは既定で「中身の最小幅」を下回れないため、
   折り返し禁止の表を持つカードが太り、202px/367px/291px の不揃いになっていた。
   minmax(0,1fr) で最小幅の主張を無効化し、3枚を同じ幅で並べる。 */
#case .case-flow__steps {
  grid-template-columns: repeat(var(--flow-cols, 3), minmax(0, 1fr));
}
/* 等幅化でカードが狭くなるぶん、表側を折り返し可能・小さめの余白にする */
#case .case-flow__from { white-space: normal; }
#case .case-flow th, #case .case-flow td { padding: 0.45rem 0.6rem; }

/* 図版の開始位置をカード間で揃える（2026-08-18 施主指摘）
   見出し・説明文の行数がカードごとに違うと、図版の頭が数px単位でずれる。
   subgrid でカード内部を4段（見出し/説明/図版/作業者）の共有行に割り当て、
   どのカードでも図版が同じ高さから始まるようにする。 */
#case .case-flow__main { flex: 1 1 auto; margin-bottom: 1rem; }

@media screen and (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    #case .case-flow__steps {
      grid-template-rows: auto auto 1fr auto;
      gap: 0 1.2rem;                    /* 縦の間隔は各ブロックの margin で管理 */
    }
    #case .case-flow__step {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      align-content: start;
    }
    #case .case-flow__main { margin-bottom: 1rem; }
    /* 作業者欄は「下端に置く」ではなく「段いっぱいに伸ばす」。
       end だと1行のカードだけ箱が低くなり、大きさが不揃いに見える
       （2026-08-18 施主指摘）。stretch で3枚とも同じ高さにし、
       短い文は縦中央に寄せる。 */
    #case .case-flow__actor { align-self: stretch; align-items: center; }
  }
}

/* --- 8事例展開で追加した媒体部品（2026-08-18） --------------------------- */

/* スマホ・タブレット（LINE打刻／現場撮影／顧客アプリ／現場入力） */
#case .case-flow__phone {
  width: min(70%, 20rem);
  margin: 0 auto;
  border: 3px solid #2A2E35;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
#case .case-flow__phone-bar {
  padding: 0.5rem 1rem;
  background: var(--flow-navy);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
#case .case-flow__phone--tablet { width: min(88%, 26rem); border-radius: 10px; }

/* 手書き文書などの中身のダミー行 */
#case .case-flow__lines { padding: 0.4rem 0; }
#case .case-flow__lines i {
  display: block;
  height: 0.6rem;
  margin: 0.7rem 1.2rem 0;
  background: #E3E6EA;
  border-radius: 2px;
}
#case .case-flow__lines i:nth-child(2n) { margin-right: 3.2rem; }
#case .case-flow__lines i:last-child { margin-bottom: 0.7rem; }

/* 商圏（地元だけの円） */
#case .case-flow__zone {
  display: grid;
  place-items: center;
  gap: 0.8rem;
  padding: 1.6rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}
#case .case-flow__zone i {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--flow-navy);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  font-style: normal;
  display: grid;
  place-items: center;
}
#case .case-flow__zone span { font-size: 1.15rem; color: var(--c-mute); }

/* 在庫の山 */
#case .case-flow__blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 1.6rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}
#case .case-flow__blocks i {
  width: 2.6rem;
  height: 2.6rem;
  background: #CBD2DA;
  border: 1px solid #B4BCC6;
}
#case .case-flow__blocks i:nth-child(odd) { height: 3.4rem; }

/* 押印 */
#case .case-flow__stamp {
  float: right;
  margin: 0.4rem 1.2rem 0.8rem 0;
  width: 4rem;
  height: 4rem;
  border: 2px solid #C43C3C;
  border-radius: 50%;
  color: #C43C3C;
  font-size: 1.4rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  transform: rotate(-8deg);
}

/* 図面のミニチュア（見積・導入前） */
#case .case-flow__sketch {
  height: 9rem;
  margin: 0.8rem 1rem;
  border: 2px solid #33415C;
  background:
    linear-gradient(#E9ECF1 1px, transparent 1px) 0 0 / 100% 1.6rem,
    linear-gradient(90deg, #E9ECF1 1px, transparent 1px) 0 0 / 1.6rem 100%;
}

/* カードからの横はみ出しを止める（2026-08-18 施主指摘「見積・導入前②のサイズがバグ」）
   nowrap の表が中身の最小幅を主張し、subgrid の列幅（248px）を超えて
   258px に広がっていた。①③は 217px で収まっていたので②だけ幅が違って見えた。
   グリッドアイテムは min-width:auto のままだと中身に負けるので 0 にし、
   図版側は横スクロールで受ける。 */
#case .case-flow__step { min-width: 0; }
#case .case-flow__main,
#case .case-flow__visual,
#case .case-flow__app,
#case .case-flow__paper { min-width: 0; max-width: 100%; }
#case .case-flow__app > .case-flow__scroll,
#case .case-flow__visual > .case-flow__scroll,
#case .case-flow__paper > .case-flow__scroll { overflow-x: auto; }
/* 表はラッパー幅に合わせる。min-width:100% だとボーダー分だけ溢れて
   2px の横スクロールが出る（fax 導入後③で実測）ので width で指定する */
#case .case-flow table { width: 100%; }
#case .case-flow th, #case .case-flow td { white-space: normal; overflow-wrap: anywhere; }
#case .case-flow th { white-space: nowrap; }