/* 経営支援｜JGA税理士法人 専用CSS（デザインHTMLから移植。共通部分は jga-base.css） */
/* ===== 2. 経営支援ページ専用CSS ===== */
/* ==========================================================================
   経営支援（サービスページ）専用の追加スタイル

   方針
   - 色・書体・余白・罫線・角丸・ボタンは css/top-renewal.css の token を使う。
     例外は Hero 背景の --c-logo-blue のみ（FIRST と同じ JGAロゴ実測色）
   - ヘッダー・フッター・FIRST CONTACT・セクション見出し・Hero CTA は TOP の component
   - NOIMAGE（.c-ph）は FIRST ページと同一の定義
   - フロー表現（上罫線＋小さな矢印＋英語ラベル＋日本語）は FIRST の
     DECISION SUPPORT（TIME → INPUT → CONNECT → DECISION）と同じ
   - 改行：明示改行（<br>）は指定箇所のみ（Hero の H1・説明文、MANAGEMENT CYCLE /
     MANAGEMENT INFRASTRUCTURE / JGA QUALITY のリード2段）。それ以外はブラウザの自然な折り返しに任せる
   - ページ固有クラスは p-bsFlow / p-bsApproach / p-bsSvc / p-bsCycle /
     p-bsInfra / p-bsQuality の接頭辞（bs = Business Support）にまとめ、
     TOP / FIRST / テクノロジー / 国内税務のクラスと衝突させない
   ========================================================================== */

:root {
  /* セクション冒頭（H2・リード）と FIRST CONTACT が共通で使う文章幅（テクノロジー / 国内税務と同値） */
  --w-text: 880px;
}

/* --------------------------------------------------------------------------
   画像枠 / NOIMAGE 仮枠（FIRST ページと同一の定義）

   画像ができたら、この2行を入れ替えるだけで差し替えられる：
     <figure class="c-ph"> … </figure>
     <figure class="c-figure"><img（写真のパスと alt を指定）></figure>

   比率は親要素の --ratio で決める（2カラム時 4:3 / 単独・縦積み時 16:9）。
   -------------------------------------------------------------------------- */
.c-figure,
.c-ph {
  margin: 0;
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  background: #eef2f5;
}
.c-figure img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.c-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--c-line);
  border-radius: 2px;
}
.c-ph__no {
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  color: #8d99a5;
}
.c-ph__name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: #8d99a5;
}

/* 単独配置の枠：PCでは最大560pxに抑え、中央に置く */
.c-figure--mid,
.c-ph--mid {
  max-width: 560px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   ヘッダー：現在ページの表示（サービス ＞ 経営支援）
   テクノロジー / 国内税務と同じ。既存の hover 表現（下線・Soft 背景）を「現在地」に使う
   -------------------------------------------------------------------------- */
.l-header__item--current > .l-header__toggle::after { width: 100%; }
.l-header__subnav a[aria-current="page"] {
  color: var(--c-brand-deep);
  font-weight: 700;
  background: var(--c-soft);
}
.l-drawer__sublist a[aria-current="page"] { color: var(--c-brand-deep); font-weight: 700; }

/* --------------------------------------------------------------------------
   01 HERO（実写写真：assets/img/business_hero.jpg ← assets/経営支援HERO.png）

   写真の構図（真上からの俯瞰）：左＝ノートPCを操作する手（横 0〜27%）／
   中央〜右＝財務資料・棒グラフ・円グラフを手渡しながら議論する手（横 27〜80%）／
   上中央＝ノートPC／右端＝手帳・スマートフォン・コーヒー・タブレット（横 77〜100%）。
   主役は中央〜右の財務資料と複数人の手のため、コピーは左に置き、中央には重ねない。

   テクノロジー・国際税務 Hero と同じ考え方（セレクタはすべて .p-bsHero 配下に限定）：
   PC（1101px 以上）：写真の上にコピーを重ねる
     ・高さはテクノロジー・国際税務と同じ clamp(560px, 46vw, 720px)。100vh 固定にしない
     ・写真フレームは右寄せ。幅は「Hero の高さ × 1.55（≤1280px は 1.35）」までに抑え、
       残りの左側は濃紺（--c-navy-2）。フレームが写真（16:9）より縦長になる分は
       object-position: 0% で右端（手帳・タブレット）側を切り、左のPCと中央の資料を残す
     ・可読性レイヤーは写真フレームの左端 約30% だけに掛ける濃紺のグラデーション。
       中央の資料・グラフ・手には掛けず、木目と資料の色味を保つ
     ・コピーの右端はフレーム横 24% の手前（左のPCの位置まで・中央の資料より左）
   1100px 以下：写真 → コピー（濃紺の帯）の縦積み。写真とコピーを重ねない
   写真にない UI・グラフ・装飾は追加しない
   -------------------------------------------------------------------------- */
.p-bsHero {
  --bs-hero-h: clamp(560px, 46vw, 720px);
  --bs-hero-ratio: 1.55;
  /* 写真フレームの幅：Hero 幅いっぱい、ただし構図を保てる横幅まで */
  --bs-hero-frame: min(100%, calc(var(--bs-hero-h) * var(--bs-hero-ratio)));

  display: flex;
  align-items: center;
  height: var(--bs-hero-h);
  color: #fff;
  background: var(--c-navy-2);
}
/* TOP 用の白い可読性レイヤーは使わない（グラデーションは写真フレーム側に持たせる） */
.p-bsHero::before { content: none; }

.p-bsHero .p-hero__media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: 0;
  width: var(--bs-hero-frame);
  margin: 0;
  aspect-ratio: auto;
  background: var(--c-navy-2);
}
.p-bsHero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
}
/* 可読性レイヤー：写真フレームの左端 約30% のみ。左の濃紺の帯から連続し、
   左のPCの途中（フレーム横 約30%）で透明になる。中央の資料には掛けない */
.p-bsHero .p-hero__media::after {
  content: "";
  position: absolute;
  /* 左へ 2px はみ出させ、写真の端（小数ピクセル）の細い線を濃紺で覆う */
  inset: 0 0 0 -2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 46, 89, 1) 0%,
    rgba(0, 46, 89, 0.9) 6%,
    rgba(0, 46, 89, 0.72) 13%,
    rgba(0, 46, 89, 0.42) 20%,
    rgba(0, 46, 89, 0.14) 26%,
    rgba(0, 46, 89, 0) 31%);
}

.p-bsHero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: 6%;
}
/* コピーの右端の上限：Hero 幅 −（写真フレーム幅 × 0.76）− 余白 ＝ フレーム横 24% の手前
   （実際の文字は 1440px でフレーム横 6% 前後まで。上限は 1101px で説明文を2行に保つための値） */
.p-bsHero .p-hero__body {
  max-width: calc(100% - var(--bs-hero-frame) * 0.76 - 24px);
  text-align: left;
}

/* H1：テクノロジー・国際税務・国内税務と同じ白の明朝体・同じサイズ式。2行固定 */
.p-bsHero .p-hero__title {
  max-width: 100%;
  font-size: clamp(24px, 2.3vw, 42px);
  line-height: 1.5;
  color: #fff;
}
.p-bsHero .p-hero__line { display: block; white-space: nowrap; }

/* 説明文：他サービスページと同じ明朝体・同じサイズ。改行は指定位置の <br> のみ */
.p-bsHero .p-hero__note {
  margin-top: 22px;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.92);
  font-feature-settings: normal;
}

/* CTA：他サービスページと同じ白の細いアウトラインのピル型。H1 より目立たせない */
.p-bsHero .p-hero__actions { margin-top: 30px; }
.p-bsHero .p-hero__cta {
  min-height: 52px;
  padding-inline: 28px;
  font-size: 14.5px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.p-bsHero .p-hero__cta:hover,
.p-bsHero .p-hero__cta:focus-visible { color: var(--c-navy-2); background: #fff; border-color: #fff; }
.p-bsHero .p-hero__cta:focus-visible { outline-color: #fff; }

/* 1101〜1280px：Hero が低くなる分、写真フレームを縦長寄りにしてコピー幅を確保する
   （説明文を指定どおり2行に保つ）。切る範囲は右端の手帳・コーヒー側に寄せ、
   右の財務資料（写真横 約80%まで）は残す */
@media screen and (max-width: 1280px) {
  .p-bsHero { --bs-hero-ratio: 1.35; }
  .p-bsHero__img { object-position: 20% 50%; }
}

/* 1100px 以下：写真 → コピーの縦積み（写真とコピーを重ねない）。他サービスページと同じ方針 */
@media screen and (max-width: 1100px) {
  .p-bsHero {
    display: block;
    height: auto;
  }
  .p-bsHero .p-hero__media {
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: 100%;
    aspect-ratio: 16 / 9;   /* 写真の俯瞰構図（左右のPC・中央の資料・複数人の手）をそのまま見せる */
  }
  .p-bsHero__img { object-position: 50% 50%; }
  .p-bsHero .p-hero__media::after { content: none; }
  .p-bsHero__inner {
    padding: clamp(44px, 6vw, 64px) var(--pad-x) clamp(52px, 7vw, 72px);
    text-align: center;
  }
  .p-bsHero .p-hero__body { max-width: none; text-align: center; }
  /* H1：他サービスページの縦積み時と同じ式（768px 35.3 / 390px 32） */
  .p-bsHero .p-hero__title { font-size: min(clamp(32px, calc(1.6vw + 23px), 46px), calc(10.6vw - 4.7px)); }
  .p-bsHero .p-hero__note { margin-top: 20px; font-size: clamp(15px, calc(0.5vw + 13.4px), 19px); }
  .p-bsHero .p-hero__actions { margin-top: 28px; }
}

/* スマートフォン：4:3。左右を少しずつ切り、左のPCの手・中央の財務資料・資料を渡す手を残す */
@media screen and (max-width: 620px) {
  .p-bsHero .p-hero__media { aspect-ratio: 4 / 3; }
  .p-bsHero__img { object-position: 56% 50%; }
  .p-bsHero__inner { padding-block: 40px 52px; }
}

/* --------------------------------------------------------------------------
   日本語の折り返し
     balance … 見出し（H2・H3）・短いラベルのみ
     pretty  … リード文・短い説明。行長を無理に揃えない
     wrap    … BUSINESS SERVICES の本文と「JGAの役割」。
               auto-phrase / pretty は文節単位で早めに折り返し、列の右側に空白を残すため使わない。
               利用できる横幅を使い切ってから、必要になった位置で折り返す
   -------------------------------------------------------------------------- */
.c-sectionHead .c-title,
.p-contact .c-title,
.p-bsFlow__ja,
.p-bsSvc__title,
.p-bsInfra__ja,
.p-bsQuality__title {
  word-break: auto-phrase;
  text-wrap: balance;
}
.c-sectionHead .c-lead,
.p-contact .c-lead,
.p-hero__note,
.p-bsFlow__text,
.p-bsSvc__points li,
.p-bsInfra__text,
.p-bsQuality__text {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.p-bsSvc__text,
.p-bsSvc__role dd {
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: wrap;
}

/* セクション冒頭：H2・リードを同じ文章幅に揃える */
.c-sectionHead .c-title,
.c-sectionHead .c-lead,
.p-contact .c-title,
.p-contact__lead { max-width: var(--w-text); }
.p-contact .c-title { margin-inline: auto; }

/* 英語ラベル（小・字間広め）：各セクション内の共通表現 */
.p-bsFlow__en,
.p-bsSvc__en,
.p-bsInfra__en,
.p-bsQuality__en {
  display: block;
  font-family: var(--f-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: var(--c-brand-strong);
}

/* --------------------------------------------------------------------------
   フロー（02 OUR APPROACH / 04 MANAGEMENT CYCLE で共通）
   FIRST の DECISION SUPPORT と同じ表現：
   細い上罫線・小さな矢印・英語ラベル・日本語見出し・短い説明のみ。
   等分・中央揃え。矢印はレイアウト幅を消費させず、absolute で列間 gap の中央に置く。
   -------------------------------------------------------------------------- */
.p-bsFlow {
  --flow-gap: 26px;
  --flow-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--flow-cols), minmax(0, 1fr));
  gap: var(--flow-gap);
}
.p-bsFlow--5 { --flow-cols: 5; }

.p-bsFlow__item {
  position: relative;
  padding: 20px 0 0;
  text-align: center;
  border-top: 1px solid var(--c-line-strong);
}
.p-bsFlow__item::after {
  content: "";
  position: absolute;
  top: 30px;
  /* 7px の矢印の中心を gap の中心に置く： gap/2 + 矢印幅/2 */
  right: calc(var(--flow-gap) / -2 - 3.5px);
  width: 7px; height: 7px;
  border-top: 1px solid var(--c-line-strong);
  border-right: 1px solid var(--c-line-strong);
  transform: rotate(45deg);
}
.p-bsFlow__item:last-child::after { content: none; }

.p-bsFlow__ja {
  margin-top: 13px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.p-bsFlow__text {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   02 OUR APPROACH：画像（単独 16:9・最大560px）→ SEE → THINK → ACT
   -------------------------------------------------------------------------- */
.p-bsApproach .p-bsFlow { margin-top: clamp(40px, 4.5vw, 64px); }

/* --------------------------------------------------------------------------
   03 BUSINESS SERVICES（ページの中心）
   画像 46 : テキスト 54（交互）。通常行・反転行ともテキスト列は同じ 54fr で、
   4サービスの本文幅は完全に同じ。4サービスとも同じ色・同じ構造。
   サービス名 → 本文 → JGAの役割 → 主な支援内容 の順。
   -------------------------------------------------------------------------- */
.p-bsSvc__row {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(32px, 3.4vw, 52px);
  align-items: center;
}
.p-bsSvc__row + .p-bsSvc__row {
  margin-top: clamp(40px, 4.5vw, 64px);
  padding-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--c-line);
}
.p-bsSvc__row--rev { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
.p-bsSvc__row--rev .p-bsSvc__media { order: 2; }
.p-bsSvc__media { --ratio: 4 / 3; }

/* テキスト領域の幅：4サービス共通。
   本文・JGAの役割・主な支援内容は、54fr の列幅をそのまま使う
   （サービスごとの max-width / 左右 padding / inner wrapper を持たせない）。
   反転行でもテキスト列は同じ 54fr のため、同じ文章量なら同じ位置で折り返す。 */
.p-bsSvc__body,
.p-bsSvc__text,
.p-bsSvc__role,
.p-bsSvc__points {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-inline: 0;
}

.p-bsSvc__en { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.p-bsSvc__no { color: var(--c-muted); }

.p-bsSvc__title {
  margin-top: 14px;
  font-size: clamp(21px, 1.9vw, 25px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.p-bsSvc__text {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--c-body);
}

/* FP&A の循環：英語ラベルと小さな矢印だけの1行（SERVICE 02 のみ） */
.p-bsSvc__seq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin-top: 18px;
}
.p-bsSvc__seq li {
  display: flex;
  align-items: center;
  font-family: var(--f-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--c-brand-strong);
  /* 1ラベル（例：FORECAST・TARGET）の途中では折り返さない。
     行全体は flex-wrap で折り返すため、スマホでも横スクロールは発生しない */
  white-space: nowrap;
}
.p-bsSvc__seq li + li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  margin: 0 12px 0 9px;
  border-top: 1px solid var(--c-line-strong);
  border-right: 1px solid var(--c-line-strong);
  transform: rotate(45deg);
}
/* 到達点（DECISION）だけ濃紺にして、循環の先が意思決定であることを示す */
.p-bsSvc__seq li:last-child { color: var(--c-brand-deep); }

/* JGAの役割：FIRST の BUSINESS INFRASTRUCTURE（SHARE / 情報共有）と同じ罫線の1行 */
.p-bsSvc__role {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 16px;
  margin-top: 22px;
  padding-block: 14px;
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 1px solid var(--c-line);
}
.p-bsSvc__role dt {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--c-brand-strong);
}
.p-bsSvc__role dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--c-ink);
}

.p-bsSvc__pointsTitle {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--c-muted);
}
.p-bsSvc__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
  margin-top: 12px;
}
/* TOP の ADVANTAGE カード / テクノロジーの支援内容と同じ「短いブルーの線」 */
.p-bsSvc__points li {
  position: relative;
  padding: 5px 0 5px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-ink);
}
.p-bsSvc__points li::before {
  content: "";
  position: absolute;
  top: 14px; left: 0;
  width: 7px; height: 1px;
  background: var(--c-brand);
}

/* --------------------------------------------------------------------------
   04 MANAGEMENT CYCLE（画像なし）
   PLAN → ACTION → DATA → ANALYSIS → DECISION。.p-bsFlow--5 を使う。
   到達点の DECISION だけ英語ラベルを濃紺にする（強調はそれだけ）
   -------------------------------------------------------------------------- */
.p-bsCycle .p-bsFlow__item:last-child .p-bsFlow__en { color: var(--c-brand-deep); }

/* --------------------------------------------------------------------------
   05 MANAGEMENT INFRASTRUCTURE
   画像（単独 16:9）→ 4つの仕組み（上罫線・中央揃え）→ 循環の小さなライン
   -------------------------------------------------------------------------- */
.p-bsInfra__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: clamp(40px, 4.5vw, 64px);
}
.p-bsInfra__item {
  padding-top: 20px;
  text-align: center;
  border-top: 1px solid var(--c-line-strong);
}
.p-bsInfra__ja {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.p-bsInfra__text {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-body);
}

/* DATA → KPI → MEETING → ACTION → DATA
   FIRST の「処理に使う時間 → 判断に使う時間」と同じ 1px の線＋小さな矢印。
   最後の DATA は先頭と同じ語を薄い色で置き、「次の数字として戻る」ことを示す */
.p-bsInfra__loop {
  margin-top: clamp(40px, 4.5vw, 60px);
  padding-top: 28px;
  text-align: center;
  border-top: 1px solid var(--c-line);
}
.p-bsInfra__loopList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 0;
}
.p-bsInfra__loopList li {
  display: flex;
  align-items: center;
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--c-brand-strong);
}
.p-bsInfra__loopList li + li::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(24px, 3vw, 40px);
  height: 1px;
  margin-inline: 14px;
  background: var(--c-line-strong);
}
/* 矢じり：線の右端に 1px の「く」を重ねる */
.p-bsInfra__loopList li + li { position: relative; }
.p-bsInfra__loopList li + li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(14px + clamp(24px, 3vw, 40px) - 6px);
  width: 6px; height: 6px;
  border-top: 1px solid var(--c-line-strong);
  border-right: 1px solid var(--c-line-strong);
  transform: translateY(-50%) rotate(45deg);
}
.p-bsInfra__loopList .is-return { color: var(--c-muted); }

/* --------------------------------------------------------------------------
   06 JGA QUALITY（画像 46 : 3項目 54。テクノロジー / 国内税務の JGA QUALITY と同じ構成）
   -------------------------------------------------------------------------- */
.p-bsQuality__row {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(32px, 3.4vw, 52px);
  align-items: center;
}
.p-bsQuality__media { --ratio: 4 / 3; }
.p-bsQuality__item { padding-block: 22px; border-top: 1px solid var(--c-line-strong); }
.p-bsQuality__item:last-child { border-bottom: 1px solid var(--c-line-strong); }
.p-bsQuality__title {
  margin-top: 11px;
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.p-bsQuality__text {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   Responsive（TOP / FIRST と同じ 1100 / 1023 / 900 / 620）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
  .p-bsInfra__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
}

@media screen and (max-width: 1023px) {
  /* SERVICES / QUALITY：画像 → テキストの縦積み。画像は 16:9・最大560px */
  .p-bsSvc__row,
  .p-bsSvc__row--rev,
  .p-bsQuality__row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .p-bsSvc__row--rev .p-bsSvc__media { order: 0; }
  .p-bsSvc__media,
  .p-bsQuality__media { --ratio: 16 / 9; max-width: 560px; }
}

/* CYCLE（5項目）：5列が窮屈になる幅から縦の流れへ。
   文字は中央揃えのまま、矢印も各項目の中心軸上で下向きにする */
@media screen and (max-width: 900px) {
  .p-bsFlow--5 {
    --flow-gap: 30px;
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
  .p-bsFlow--5 .p-bsFlow__item::after {
    top: auto; right: auto; bottom: -19px; left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .p-bsFlow--5 .p-bsFlow__item:last-child::after { content: none; }
}

@media screen and (max-width: 620px) {
  .c-figure--mid,
  .c-ph--mid,
  .p-bsSvc__media,
  .p-bsQuality__media { max-width: none; }

  /* APPROACH（3項目）：縦の流れへ。矢印は中心軸上で下向き */
  .p-bsFlow {
    --flow-gap: 30px;
    grid-template-columns: minmax(0, 1fr);
  }
  .p-bsFlow__item::after {
    top: auto; right: auto; bottom: -19px; left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .p-bsFlow__item:last-child::after { content: none; }

  .p-bsSvc__points { grid-template-columns: minmax(0, 1fr); }
  .p-bsSvc__role { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .p-bsSvc__seq li { font-size: 10px; letter-spacing: 0.12em; }
  .p-bsSvc__seq li + li::before { margin: 0 9px 0 6px; }

  .p-bsInfra__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .p-bsInfra__loopList li { font-size: 11px; letter-spacing: 0.12em; }
  .p-bsInfra__loopList li + li::before { width: 16px; margin-inline: 8px; }
  .p-bsInfra__loopList li + li::after { left: calc(8px + 16px - 6px); }

  .p-bsSvc__text,
  .p-bsQuality__text { font-size: 14.5px; }
}