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

   方針
   - 色・書体・余白・罫線・角丸・ボタンは css/top-renewal.css の token を使う。
     例外は Hero 背景の --c-logo のみ（各サービスページと同じ JGAロゴ実測色）。
     Local / Global / Technology / Business に別々の色は付けない
   - Hero・文章幅（--w-text）は各サービスページと同値
   - CASE は TOP の JGA SOLUTIONS（.p-case / .p-case__tag / .p-case__flowLabel …）を流用し、
     ここでは NOIMAGE の収め方と 横長 / 2カラム の配置だけを追加する
   - NOIMAGE（.c-ph）は FIRST ページと同一の定義
   - アイコン・図形ノード・グラデーション・影は追加しない。関係性は罫線と英語ラベルだけで示す
   - 改行：<br> は Hero（H1・説明文）のみ。セクションの H2・リードは強制改行せず、
     共通の文章幅（--w-text）の中で自然に折り返す（本文はブラウザ標準の折り返し）
   - ページ固有クラスは p-cx* の接頭辞（cx = Cross Expertise）にまとめ、
     TOP / FIRST / 各サービスページのクラスと衝突させない
   ========================================================================== */

:root {
  /* JGAロゴ（assets/img/logo.png）のブランドブルー実測値。Hero 背景にのみ使用（各サービスページと同値） */
  --c-logo: #148fbe;
  /* セクション冒頭（H2・リード）と FIRST CONTACT が共通で使う文章幅（各サービスページと同値） */
  --w-text: 880px;
}

/* --------------------------------------------------------------------------
   画像枠 / NOIMAGE 仮枠（FIRST ページと同一の定義）
   比率は親要素の --ratio で決める（2カラム CASE 4:3 / 横長 CASE・縦積み時 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;
}

/* --------------------------------------------------------------------------
   ヘッダー：現在ページの表示（JGAの強み）
   既存の hover 表現（下線）をそのまま「現在地」に使う
   -------------------------------------------------------------------------- */
.l-header__link--current::after { width: 100%; }
.l-drawer__list a.is-current { color: var(--c-brand-deep); font-weight: 700; }

/* --------------------------------------------------------------------------
   01 HERO（国内税務・国際税務・テクノロジー・経営支援と同一）
   画像なし・中央揃え・JGAロゴカラー1色の背景に白文字。
   H1 → 説明文 → CTA を1つのメッセージブロックとして見せる。
   高さは min-height を持たず、上下同じ padding だけで決める（上下中央）。
   -------------------------------------------------------------------------- */
.p-hero {
  display: block;
  margin-top: var(--header-h);
  padding-block: clamp(64px, 7vw, 104px);
  text-align: center;
  color: #fff;
  background: var(--c-logo);
}
/* TOP 用の写真可読性レイヤーを無効化 */
.p-hero::before { content: none; }
.p-hero__body { max-width: 100%; }

/* H1：2行固定（各サービスページと同じサイズ式）。
   1440px 46 / 1280px 43.5 / 1024px 39.4 / 768px 35.3 / 390px 32 */
.p-hero__title {
  max-width: 100%;
  font-size: min(clamp(32px, calc(1.6vw + 23px), 46px), calc(10.6vw - 4.7px));
  line-height: 1.45;
  color: #fff;
}
.p-hero__line { display: block; white-space: nowrap; }

/* 説明文：H1 と同じ明朝体で1つのまとまりに。1440px 22 / 1024px 20 / 390px 16.8 */
.p-hero__note {
  margin-top: 24px;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(16px, calc(0.5vw + 14.8px), 22px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.94);
  font-feature-settings: normal;
}

.p-hero__actions { margin-top: 36px; }
.p-hero__cta {
  padding-inline: 36px;
  color: #fff;
  border-color: #fff;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.p-hero__cta:hover,
.p-hero__cta:focus-visible { color: var(--c-logo); background: #fff; }
.p-hero__cta:focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   折り返しルール
     見出し（H2〜H4・短いコピー）… auto-phrase ＋ balance（短い見出しのみ）
     通常の文章（リード・カード本文・CASE本文・説明文）… ブラウザ標準の折り返し。
       箱の幅いっぱいまで文字を入れ、右側に余白を残したまま早く折り返さない
       （text-wrap: pretty / word-break: auto-phrase は本文には使わない）
   -------------------------------------------------------------------------- */
.c-sectionHead .c-title,
.p-contact .c-title,
.p-cxMap__issueTitle,
.p-cxMap__solutionTitle,
.p-cxBuild__title,
.p-cxGroup__ja,
.p-case__name,
.p-cxValue__title {
  word-break: auto-phrase;
  text-wrap: balance;
}
.c-sectionHead .c-lead,
.p-contact .c-lead,
.p-hero__note,
.p-cxMap__text,
.p-cxBuild__text,
.p-case__text,
.p-case__desc,
.p-advCard__desc,
.p-advCard__list li,
.p-cxValue__text {
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: wrap;
}

/* セクション冒頭：ラベル・H2・リードを1つの文章ボックス（--w-text = 880px）に入れる。
   H2・リードは箱の幅いっぱい（width: 100%）を使い、セクションごとの個別 max-width は持たない。
   FIRST CONTACT も同じ幅の箱を中央に置く */
.p-cx .c-sectionHead { max-width: var(--w-text); }
.p-cx .c-sectionHead .c-title,
.p-cx .c-sectionHead .c-lead { width: 100%; max-width: none; }
.p-contact .c-title,
.p-contact__lead { width: 100%; max-width: var(--w-text); margin-inline: auto; }

/* 英語ラベル（小・字間広め）：各セクション内の共通表現（テクノロジーページと同値） */
.p-cxBuild__en,
.p-cxGroup__en,
.p-cxValue__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 WHY CROSS EXPERTISE
   セクション見出し → 図（ISSUE → 4つの問い → SOLUTION）。

   図（.p-cxMap）の考え方：
     一つの経営判断（ISSUE）が、Local / Global / Technology / Business の4つの問いへ分かれ、
     それらが再び一つの支援（SOLUTION）にまとまる。
     左側の分岐線はグレー、右側の統合線はブランドブルーで「分かれた問いが一つになる」を示す。
   PC   … 3列（ISSUE 25 ｜ 問い 50 ｜ SOLUTION 25）。問いの列の左右 56px を分岐・統合の線に使う
   ≤900 … 縦方向。左端の1本の線に ISSUE → 4つの問い → SOLUTION がつながる
   CASE と同じ部品（.p-case__flowLabel / .p-case__tag）を使い、後の CASE と同じ言葉で読ませる。
   アイコン・影・角丸・グラデーション・色分けは使わない
   -------------------------------------------------------------------------- */
.p-cxMap {
  --map-join: 56px;      /* 分岐・統合の線に使う幅 */
  --map-half: 28px;
  --map-gap: 10px;       /* 問いの行間 */
  display: grid;
  /* ISSUE / SOLUTION は文字幅に合わせ（線が文字の直後から始まる）、残りを4つの問いに使う */
  grid-template-columns: fit-content(260px) minmax(0, 1fr) fit-content(300px);
  align-items: center;
}
.p-cxMap__issue { padding-right: 20px; }
.p-cxMap__solution { padding-left: 20px; }

/* ISSUE：一つの経営判断（ラベル → タイトル。PC は1行） */
.p-cxMap__issueTitle {
  margin-top: 12px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--c-navy);
}

/* 4つの問い：左右の余白（56px）に分岐線・統合線を引く */
.p-cxMap__fan {
  position: relative;
  padding-inline: var(--map-join);
}
/* 左の縦線（分岐）：1行目の中心 〜 4行目の中心。行は同じ高さ（1fr） */
.p-cxMap__fan::before,
.p-cxMap__fan::after {
  content: "";
  position: absolute;
  top: calc((100% - var(--map-gap) * 3) / 8);
  bottom: calc((100% - var(--map-gap) * 3) / 8);
  width: 1px;
}
.p-cxMap__fan::before { left: var(--map-half); background: var(--c-line-strong); }
.p-cxMap__fan::after { right: var(--map-half); background: var(--c-brand); }
/* ISSUE → 分岐線、統合線 → SOLUTION の短い横線 */
.p-cxMap__join {
  position: absolute;
  top: 50%;
  width: var(--map-half);
  height: 1px;
}
.p-cxMap__join--in { left: 0; background: var(--c-line-strong); }
.p-cxMap__join--out { right: 0; background: var(--c-brand); }
.p-cxMap__join--out::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-brand);
}

.p-cxMap__list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--map-gap);
}
.p-cxMap__q {
  position: relative;
  /* 領域名 → 問い の縦積み。問いは行の幅いっぱいを使う */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 6px;
  padding: 16px 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 2px;
}
/* 各行から左右の縦線への短い横線 */
.p-cxMap__q::before,
.p-cxMap__q::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--map-half);
  height: 1px;
}
.p-cxMap__q::before { left: calc(var(--map-half) * -1 - 1px); background: var(--c-line-strong); }
.p-cxMap__q::after { right: calc(var(--map-half) * -1 - 1px); background: var(--c-brand); }

.p-cxMap__area {
  font-family: var(--f-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: var(--c-brand-strong);
}
.p-cxMap__area small {
  display: inline;
  margin-left: 10px;
  font-family: var(--f-jp);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}
.p-cxMap__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}

/* SOLUTION：一つの支援へ */
.p-cxMap__solutionTitle {
  margin-top: 10px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--c-navy);
}
/* 2段固定：「あらゆる問いに対する」／「Solutionを設計する。」 */
.p-cxMap__solutionTitle span { display: block; }
.p-cxMap__solution .p-case__tag { margin-top: 16px; }
.p-cxMap__solution .p-case__flowLabel { color: var(--c-brand-strong); }


/* --------------------------------------------------------------------------
   03 FOUR EXPERTISE
   4カードは TOP の JGA ADVANTAGE（.p-advantage__grid / .p-advCard …）をそのまま使用。
   HTML・画像・文章・CSS とも TOP と同一で、このページでは追加・上書きしない。
   （TOP と同じ白背景のセクションに置く）
   4カードは同じ幅（repeat(4, 1fr)）。本文は箱の幅いっぱいを使い、個別の max-width は持たせない
   -------------------------------------------------------------------------- */
.p-cxFour .p-advCard,
.p-cxFour .p-advCard__body { width: 100%; min-width: 0; }

/* 4領域の写真（このページ専用の画像）：枠（4:3）・object-fit: cover は TOP のまま。
   元画像の比率が異なるため、主要な被写体が枠内に残るよう object-position のみ調整する
     国内税務   … 相談する女性の表情（左寄り）
     国際税務   … 握手とデータ表現（右寄り）
     テクノロジー … 中央のグラフ
     経営支援   … 資料を指す手元とグラフ */
.p-cxFour #local .p-advCard__figure img { object-position: 38% 50%; }
.p-cxFour #global .p-advCard__figure img { object-position: 68% 50%; }
.p-cxFour #technology .p-advCard__figure img { object-position: 50% 50%; }
.p-cxFour #business .p-advCard__figure img { object-position: 52% 60%; }

/* --------------------------------------------------------------------------
   04 HOW WE BUILD：ISSUE → EXPERTISE → SOLUTION
   1本の上罫線を3列で共有し、列の境目に CASE と同じ細い矢印（線の先端のみ）を置く。
   3段階とも同じ配色ルール：番号・英語ラベル＝ブランドブルー / 見出し＝--c-ink /
   本文＝--c-body / 罫線・矢印＝--c-line-strong。色で段階を区別しない
   アイコン・丸いノード・アニメーションは使わない
   -------------------------------------------------------------------------- */
.p-cxBuild__no { margin-right: 10px; }
/* 3ステップは同じ幅・同じ内部余白（padding 0）。列の間は gap のみで、文字幅を削らない。
   1本の線（track::before）を3列で共有し、各ステップの始点に小さな点、
   列の間（gap の中央）に小さな矢印を置く（テクノロジーの IMPLEMENTATION と同じ表現） */
.p-cxBuild__track {
  --build-gap: clamp(32px, 4vw, 56px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--build-gap);
}
.p-cxBuild__track::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-line-strong);
}
.p-cxBuild__item {
  position: relative;
  min-width: 0;
  padding: 28px 0 0;
}
/* 始点の点 */
.p-cxBuild__item::before {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-brand);
}
/* 列の間の矢印（gap の中央） */
.p-cxBuild__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -4px;
  right: calc(var(--build-gap) / -2 - 4px);
  width: 8px; height: 8px;
  border-top: 1px solid var(--c-brand);
  border-right: 1px solid var(--c-brand);
  transform: rotate(45deg);
}
.p-cxBuild__title {
  margin-top: 12px;
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.p-cxBuild__text {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--c-body);
}
.p-cxBuild__tag { margin-top: 12px; }
/* --------------------------------------------------------------------------
   05 JGA SOLUTIONS
   CASE の枠・中身は TOP の .p-case をそのまま使う。
   ここでは ①COMBINATION 中見出し ②NOIMAGE の収め方 ③横長 / 2カラム の配置 だけを定義する。
     CASE 01（横長 .p-case--feature：画像 58 / 本文 42）→ CASE 02・03（2カラム .p-case--sub）
     CASE 04（横長 .p-case--feature：CASE 01 と同じ）  → CASE 05・06（2カラム .p-case--sub）
     CASE 07・08（2カラム .p-case--sub）
     「大 → 小 小」を2回繰り返し、同じコンポーネントだけで構成する
   -------------------------------------------------------------------------- */

/* COMBINATION：英語ラベル＋日本語の小見出し＋右へ伸びる細い罫線。CASE より目立たせない。
   CASE との間隔は .p-solutions__list の gap（PC 32px / SP 24px）、
   前の CASE との間隔は gap ＋ margin-top（PC 80px） */
.p-cxGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}
.p-cxGroup:not(:first-child) { margin-top: clamp(24px, 3.4vw, 48px); }
.p-cxGroup::after {
  content: "";
  flex: 1 1 80px;
  align-self: center;
  height: 1px;
  background: var(--c-line-strong);
}
.p-cxGroup__ja {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

/* 専門性の組み合わせ表示（.p-case__tag）：「Local×Global×Tech×Business」を
   間隔なしの1つの文字列として1段で表示する（×の前後に gap を置かない）。
   PC は折り返し禁止。スマートフォン（≤620px）のみ、収まらない場合の折り返しを許可する */
.p-cx .p-case__tag {
  display: block;
  white-space: nowrap;
}

/* JGA SOLUTIONS は白背景のため、CASE の外枠（TOP と同じブルー）を少しだけ濃くして境界を保つ。影は使わない */
.p-cx .p-case { border-color: rgba(35, 135, 239, 0.45); }

/* CASE 番号を載せる画像枠（div）。中身は .c-ph → 後で .c-figure に差し替える */
.p-cx .p-case__figure { position: relative; }
/* CASE の白枠の中では NOIMAGE の枠線・角丸を外す（外枠と二重にしない） */
.p-cx .p-case__figure > .c-ph { border: 0; border-radius: 0; }

/* 2カラム CASE：画像 4:3 */
.p-cx .p-case--sub .p-case__figure { aspect-ratio: auto; --ratio: 4 / 3; }

/* 横長 CASE（01 / 04）：画像 58 / 本文 42。
   画像は最低 16:9 の高さを確保し、本文が長い場合は本文の高さまで伸ばす */
.p-cx .p-case--feature .p-case__figure { min-height: 0; }
.p-cx .p-case--feature .p-case__figure::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.p-cx .p-case--feature .p-case__figure > .c-ph,
.p-cx .p-case--feature .p-case__figure > .c-figure {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
}

/* CASE の高さ・リズムを揃える：ISSUE / 説明文に最低行数を持たせ、
   文章量が違っても 01 = 04（横長）、02・03 = 05・06 = 07・08（2カラム）の
   カード高さと SOLUTION の開始位置が揃うようにする（1行 = 14.5px × 1.8） */
@media screen and (min-width: 1024px) {
  .p-cx .p-case--feature .p-case__text,
  .p-cx .p-case--feature .p-case__desc { min-height: calc(14.5px * 1.8 * 3); }
}
@media screen and (min-width: 901px) {
  .p-cx .p-case--sub .p-case__text,
  .p-cx .p-case--sub .p-case__desc { min-height: calc(14.5px * 1.8 * 3); }
}
@media screen and (min-width: 901px) and (max-width: 1100px) {
  .p-cx .p-case--sub .p-case__text { min-height: calc(14.5px * 1.8 * 4); }
}

/* --------------------------------------------------------------------------
   06 OUR VALUE：横3列＋上罫線（テクノロジーの OUR APPROACH と同じ表現）
   -------------------------------------------------------------------------- */
.p-cxValue__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.p-cxValue__item {
  padding-top: 20px;
  border-top: 1px solid var(--c-line-strong);
}
.p-cxValue__title {
  margin-top: 13px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.p-cxValue__text {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   Responsive（TOP / FIRST / 各サービスページと同じ 1100 / 1023 / 900 / 620）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
  /* WHY の図：縦方向へ。左端の1本の線に ISSUE → 4つの問い → SOLUTION がつながる。
     線は ISSUE の点から SOLUTION の点まで。4つの問いへの分岐はグレー、SOLUTION への区間はブルー */
  .p-cxMap {
    --rail: 6px;          /* 縦線の x 位置 */
    --indent: 30px;       /* 縦線から本文までの字下げ */
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding-left: var(--indent);
  }
  .p-cxMap__issue { padding-right: 0; }
  .p-cxMap__solution { padding-left: 0; }
  .p-cxMap__issue,
  .p-cxMap__solution { position: relative; }
  /* 点：ISSUE（濃紺）・SOLUTION（ブルー） */
  .p-cxMap__issue::before,
  .p-cxMap__solution::before {
    content: "";
    position: absolute;
    top: 2px;
    left: calc(var(--rail) - var(--indent) - 3px);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-navy);
  }
  .p-cxMap__solution::before { background: var(--c-brand); }
  /* 縦線：ISSUE の点 → 問いの最終行の中心（グレー）／ 最終行 → SOLUTION の点（ブルー） */
  .p-cxMap__issue::after {
    content: "";
    position: absolute;
    top: 6px; bottom: -28px;
    left: calc(var(--rail) - var(--indent));
    width: 1px;
    background: var(--c-line-strong);
  }
  .p-cxMap__fan { padding: 28px 0; }
  .p-cxMap__fan::before {
    top: 0; bottom: 28px;
    left: calc(var(--rail) - var(--indent));
  }
  .p-cxMap__fan::after {
    top: auto; bottom: -3px; height: 31px;
    right: auto;
    left: calc(var(--rail) - var(--indent));
  }
  .p-cxMap__join { display: none; }
  .p-cxMap__list { grid-auto-rows: auto; }
  .p-cxMap__q::before {
    left: calc(var(--rail) - var(--indent) - 1px);
    width: calc(var(--indent) - var(--rail));
  }
  .p-cxMap__q::after { content: none; }

}

@media screen and (max-width: 1023px) {
  /* HOW WE BUILD：横 → 縦。左の縦線を3ステップで共有し、始点の点・間の矢印を縦に置く */
  .p-cxBuild__track { grid-template-columns: minmax(0, 1fr); padding-left: 28px; }
  .p-cxBuild__track::before { top: 4px; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
  .p-cxBuild__item { padding: 0; }
  .p-cxBuild__item::before { top: 0; left: -28px; }
  .p-cxBuild__item:not(:last-child)::after {
    top: auto; right: auto;
    bottom: calc(var(--build-gap) / -2 - 4px);
    left: -28px;
    transform: rotate(135deg);
  }
  .p-cxBuild__en { margin-top: -3px; }

  /* 横長 CASE：画像（16:9）→ 本文の縦積み */
  .p-cx .p-case--feature { grid-template-columns: minmax(0, 1fr); }
  .p-cx .p-case--feature .p-case__body { padding: 32px; }
}

@media screen and (max-width: 900px) {
  /* 2カラム CASE が1列になったら、画像は横長 CASE と同じ 16:9 */
  .p-cx .p-case--sub .p-case__figure { --ratio: 16 / 9; }
  .p-cxValue__list { gap: 24px; }
}

@media screen and (max-width: 620px) {
  .p-hero { padding-block: 56px; }
  .p-hero__note { margin-top: 20px; }
  .p-hero__actions { margin-top: 28px; }
  .p-hero__cta { padding-inline: 28px; }

  .p-cxValue__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .p-cx .p-case--feature .p-case__body { padding: 24px; }
  /* 専門性の組み合わせ：収まらない場合のみ折り返す（横スクロール・縮小はしない） */
  .p-cx .p-case__tag { white-space: normal; overflow-wrap: anywhere; }
}