/* ============================================================
   service.html（サービス）専用スタイル
   ------------------------------------------------------------
   読み込み順：common.css → service.css
   構成はFigmaワイヤーフレーム node 450-1902（SP-375）準拠。
   ワイヤーはSPのみのため、PCレイアウトは既存の配下ページ
   （about / news / contact）の作法に合わせて起こしている：
   ・見出しの左端は --shell を画面中央に置いたラインに揃える
   ・トーンは白カード＋ティール面。影は使わずボーダーと面で分ける
   ・タグ/カードのグリッドはSP2列 → PC4列（支援内容）などで展開
   画像はすべて .ph（プレースホルダー）。写真が入り次第 img に差し替える
   ============================================================ */

/* ---- 配下ページ共通の控えめ見出し（このページ内のみ上書き） ---- */
main .en-h2 {
  font-size: var(--fs-en-h3);
  letter-spacing: 3px;
}

/* ============================================================
   HERO（WF 450:1911 / 563:1372）
   ============================================================ */
/* DOM順は h1(見出し) → h2(SERVICE) だが、見た目は従来どおり
   「SERVICE」が上・h1が下。order で入れ替える（レビュー指摘 #5） */
.service-hero {
  padding-block: clamp(48px, 6vw, 104px) 0;
  display: flex;
  flex-direction: column;
}
.service-hero .section-head { order: 1; }
.service-hero__title { order: 2; }
.service-hero__title {
  margin-top: clamp(20px, 2.5vw, 40px);
  font-size: var(--fs-jp-lg);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 4px;
  color: var(--teal-900);
}

/* ============================================================
   イントロ（ティール面）＋3ステップ（WF 598:1506〜604:1783）
   ============================================================ */
.service-intro-section { margin-top: clamp(40px, 5vw, 72px); }
.service-intro {
  padding: var(--pad-card);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--teal-300) 0%, var(--teal-400) 100%);
  color: #fff;
}
.service-intro__title {
  font-family: var(--font-maru);
  font-size: var(--fs-jp-lg);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 3px;
}
.service-intro__body { margin-top: clamp(24px, 3vw, 40px); }
.service-intro__body p {
  font-size: var(--fs-body-sm);
  line-height: 1.95;
  letter-spacing: 1.5px;
}
.service-intro__body p + p { margin-top: 1em; }

/* ---- 3ステップ（発見する→育てる→変革する） ----
   SP：縦積み＋▼で連結／PC：横並び＋▶で連結。
   矢印は :not(:last-child)::after のCSS三角形で、回転だけで向きを変える */
.flow {
  list-style: none;
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--teal-900);
}
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  /* ピル間ギャップ(28px)の中央に三角(高さ9px)を置く。
     中心=14px下 なので top=14-4.5=9.5px（以前は5pxで手前のピルに寄っていた） */
  top: calc(100% + 9.5px);
  left: 50%;
  translate: -50% 0;
  border: 9px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.85);
  border-bottom: 0;
}
.flow__verb {
  flex-shrink: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--teal-900);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 2px;
}
.flow__noun {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: 2px;
}

/* ============================================================
   01〜03 事業の柱（WF 603:1552〜603:1693）
   ============================================================ */
.service-pillars {
  margin-top: clamp(56px, 7vw, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 80px);
}
.pillar {
  padding: var(--pad-card);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(14, 59, 52, 0.07);
  overflow: hidden; /* 中身が角丸の外に出ないよう切り取る（保険）。
                       以前はSP専用の画像フルブリードを切るために必須だった */
}
.pillar__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.pillar__num {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: var(--fs-jp-md);
  letter-spacing: 2px;
  color: var(--teal-400);
}
.pillar__title {
  font-size: var(--fs-jp-md);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 3px;
  color: var(--teal-900);
}
.pillar__catch {
  margin-top: clamp(12px, 1.5vw, 20px);
  font-size: var(--fs-ttl);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 2px;
  /* 番号（.pillar__num）と同じティールにして、番号＋見出し＋リード文を1組に見せる */
  color: var(--teal-400);
}
.pillar__body {
  margin-top: 12px;
  font-size: var(--fs-body-sm);
  line-height: 1.95;
  letter-spacing: 1px;
  color: var(--neutral-800);
}
/* 柱のタイトル下にあった写真プレースホルダー（.ph--wide）は削除済み。
   SP幅で画面いっぱいに敷く「50% - 50vw」のフルブリード指定もセットで撤去した。
   「私たちの原点」のプレースホルダーも同様に削除済み。
   写真を戻すときは .members に残っている .ph--wide の書き方を参照 */

/* ============================================================
   .pillar--split（01 事業創出 / 02 顧客価値向上 / 03 組織・事業変革）
   Toss（toss.im/simplicity-21）のタイトル部と同じ構え：
   大きな3Dオブジェクトを左、タイトル＋リード文を右に置く。
   SPは縦積み（3D→テキスト）。support / solutions はカラムの外なので全幅のまま
   ============================================================ */
.pillar__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}

/* ---- Splineの3Dループ ----
   ⚠️ 公開シーンはカメラが寄り引きせず、被写体の描画サイズがcanvasの大きさに
   関係なくほぼ一定（実測：loop7は768pxでも1024pxでも約330px）。
   つまりiframeを小さくすると「拡大」ではなく「切り取り」になり、
   114pxの枠では被写体が完全に枠外で何も映らなかった。
   そこで ①iframeは被写体が収まる大きさで置き ②被写体のある領域だけを
   overflow:hidden で切り出し ③transform で縮小だけかける、という3段構えにする。

   ・--spl-canvas … iframeの一辺
   ・--spl-view-w / -h … 切り出す領域の大きさ(px)
   ・--spl-off-x / -y … 切り出し開始位置(px)。被写体がcanvas中央にあるシーンで使う
   ・--spl-fit … シーン間で被写体の見た目の大きさを揃える係数（下記）
   ・--spl-zoom … 3本まとめての大小。ユーザー調整用のツマミはこれ1つ
   枠のサイズは view × scale で自動計算されるので、ブレークポイントで
   触るのは --spl-step だけでよい。

   --spl-fit について：被写体の実寸はシーンごとに違う（canvas内で loop7≈330px /
   loop5≈309px / loop2≈298px）。差が大きいシーンだけ係数を掛けて見た目の大きさを
   揃える（現状3本とも近いので全て1）。1に戻せば素の比率になる。

   ⚠️ 位置と大きさはスクリーンショットの見た目から換算しないこと。
   canvasに 64px 間隔のグリッドとラベルを重ねた検証ページを作って直読みする。
   一度スケール換算を誤って「中央に212px」と読み違え、オフセットで左上を削った。

   拡大でぼけないよう scale は min(1, ...) で頭打ちにしている。
   本来はSpline側でカメラをフィットさせて再パブリッシュすれば、この回避ごと不要になる */
.pillar__anim {
  /* 既定はカメラがフィットしているシーン用（canvas＝切り出し領域）。
     フィットしていないシーンは下の修飾子で個別に上書きする */
  --spl-canvas: 320px;
  --spl-view-w: 320;
  --spl-view-h: 320;
  --spl-off-x: 0;
  --spl-off-y: 0;
  --spl-fit: 1;
  /* 3本まとめて見せる大きさを調整するツマミ。1.0が「切り出し領域を等倍で表示」で、
     等倍だと主張が強すぎたため0.6に落としている。ここ1箇所だけ触れば3本連動する */
  --spl-zoom: 0.384; /* 0.6 → 0.48 → 0.384（3本まとめて0.8倍ずつ縮小してきた値） */
  --spl-step: 0.5;   /* ブレークポイントごとの段。実際の倍率は step × zoom × fit */
  --spl-scale: min(1, calc(var(--spl-step) * var(--spl-zoom) * var(--spl-fit)));
  position: relative;
  width: calc(var(--spl-view-w) * 1px * var(--spl-scale));
  height: calc(var(--spl-view-h) * 1px * var(--spl-scale));
  margin-inline: auto;      /* SPは中央寄せ */
  overflow: hidden;
  pointer-events: none;     /* 装飾。スクロールやクリックを奪わせない */
}
.pillar__anim iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--spl-canvas);
  height: var(--spl-canvas);
  border: 0;
  transform-origin: 0 0;
  /* 右から順に適用される：まず切り出し位置を原点へ寄せ、そのあと縮小する */
  transform: scale(var(--spl-scale))
             translate(calc(var(--spl-off-x) * -1px), calc(var(--spl-off-y) * -1px));
}

/* ---- シーンごとの切り出し設定 ----
   Splineは公開時のデザインサイズがそのままcanvasの固定サイズになる。
   シーンを差し替え／再パブリッシュしたら canvas と被写体の位置を実測し直すこと
   （検証手順：シーンURLを単体で開き canvas の getBoundingClientRect を測る） */

/* animatedloop7（01 事業創出）＝2つのリング
   canvas 768固定。被写体は左上の約 x14〜358 / y14〜358 に収まり、canvasを
   大きくしても位置・大きさが変わらない。左上400px四方を切り出す
   （被写体の右下に約40pxの余白が残る値） */
.pillar__anim--rings {
  --spl-canvas: 768px;
  --spl-view-w: 400;
  --spl-view-h: 400;
}

/* animatedloop5（02 顧客価値向上）＝棒グラフ
   カメラをフィットさせて再パブリッシュ済み。canvas 320固定で被写体が
   約 x10〜319 / y38〜298（棒は底面 y≈298 から上へ伸びる）とほぼ枠いっぱい。
   切り出し不要なので既定値（320×320）のまま使う */

/* animatedloop2（03 組織・事業変革）＝スプリング
   canvas 512固定。被写体は**左上寄り**に約 x8〜306 / y14〜306（実寸約298px）。
   canvas全体は使わないので左上352px四方だけを切り出す（右下に46pxの余裕を持たせ、
   回転で多少広がっても切れないようにしている）。
   実寸はloop7(330)/loop5(309)と近いので --spl-fit は既定の1のまま。
   ⚠️ 一度ここを「中央に212px」と読み違えてオフセット126を入れ、左上を削ってしまった。
   位置はスクリーンショットの見た目で推測せず、必ずグリッドを重ねて実測すること */
.pillar__anim--spring {
  --spl-canvas: 512px;
  --spl-view-w: 352;
  --spl-view-h: 352;
}

@media (min-width: 600px) {
  .pillar__anim { --spl-step: 0.625; }
}
@media (min-width: 768px) {
  .pillar__anim { --spl-step: 0.75; }
}
@media (min-width: 960px) {
  /* 段は最大（＝切り出し領域の等倍）。実際の倍率は --spl-zoom で 0.6 に落ちる */
  .pillar__anim { --spl-step: 1; margin-inline: 0; }
  .pillar--split .pillar__cols {
    /* 左は3Dの実寸に合わせる（シーンごとに切り出しサイズが違うので固定値にしない）。
       右は残り幅いっぱい */
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
}

/* ---- 主な支援内容（タググリッド） ----
   以前は枠線＋角丸＋内側paddingで囲っていたが、カード(.pillar)の中に
   さらに囲みができて入れ子っぽく見えるため、上に区切り線を1本引くだけに
   した（.related-rowなど他の区切りと同じ考え方） */
.support {
  margin-top: clamp(20px, 2.5vw, 36px);
  padding-top: clamp(20px, 2.2vw, 32px);
  border-top: 1px solid rgba(14, 59, 52, 0.12);
}
.support__label {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--teal-900);
}
.support__list {
  list-style: none;
  margin-top: 16px;
  display: grid;
  /* minmax(0,1fr)＋min-width:0 が無いと、グリッド項目の既定 min-width:auto により
     「顧客インサイトリサーチ」のような長いタグが列幅より広いまま右へはみ出す */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.support__list li {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(30, 217, 195, 0.12);
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
  color: var(--teal-900);
  /* 「顧客インサイトリサーチ」は letter-spacing 込みで143px必要だが、SP2列だと
     枠が145px（内寸125px）しかなく右へ8pxはみ出していた。auto-phrase は
     カタカナの連なりを1文節と見て折り返さないので、ここだけ通常の禁則に戻して
     2行に折り返させる（min-height:44px なので高さは他のタグと揃う） */
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ---- Our Solutions（02の中） ----
   .service-intro / .reason__chart と同じブランドのティールグラデーションに。
   中の.promo-cardは白のまま（ティール地の上に白カードで乗せる構成） */
.solutions {
  margin-top: clamp(20px, 2.5vw, 36px);
  padding: clamp(16px, 2vw, 28px);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--teal-300) 0%, var(--teal-400) 100%);
}
.solutions__label {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
}

/* ============================================================
   共通：訴求カード（Our Solutions / Our Product）
   ============================================================ */
.promo-card {
  display: block;
  margin-top: 14px;
  padding: clamp(20px, 2.2vw, 32px);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid rgba(14, 59, 52, 0.08);
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.promo-card:hover { transform: translateY(-3px); border-color: var(--teal-300); }
.promo-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.promo-card__eyebrow + .promo-card__head { margin-top: 14px; }
/* SPでは右の丸矢印(44px)に押されて「エキスパートレビ／ュー」と1文字だけ
   こぼれるため、1行に収まるサイズまで落とす。768px以上で本来のサイズに戻す */
.promo-card__title {
  min-width: 0;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--teal-900);
}
.promo-card__body {
  margin-top: 14px;
  font-size: var(--fs-body-sm);
  line-height: 1.9;
  letter-spacing: 1px;
  color: var(--neutral-800);
}
/* ============================================================
   関連プロダクト：RapiQ カード（Figma node 780:1181）
   濃緑→ティール→ラベンダーの横グラデ。右に製品画面3枚を斜めに重ねる。
   rapiq-logo.svg は「Rapi」が白抜きなので、濃い面でないと読めない
   ============================================================ */
.rapiq-card {
  position: relative;
  display: block;
  margin-top: clamp(16px, 2vw, 28px);
  padding: clamp(24px, 2.5vw, 30px);
  border-radius: clamp(20px, 2.4vw, 28px);
  overflow: hidden;   /* はみ出した製品画面をカード内で切り取る */
  color: #fff;
  background: linear-gradient(90deg,
    var(--teal-900) 22%, #26a18e 72.6%, #9eb1e2 89.8%, #58d5c0 100%);
  transition: transform 0.2s ease;
}
.rapiq-card:hover { transform: translateY(-3px); }
/* テキスト側は画面3枚の下に潜らないよう幅を制限する。
   画像は right:9% + width:30% = カード左から61%の位置に来るので、
   本文は 56% までに抑えて必ず手前で止める（620px固定だと03内の狭いカードで
   画像に31px重なっていた）。900px未満は下で画像を消し max-width:none に戻す */
.rapiq-card__body { position: relative; z-index: 1; max-width: 56%; }
.rapiq-card__head {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.rapiq-card__logo { width: clamp(88px, 8vw, 112px); height: auto; }
.rapiq-card__ruby,
.rapiq-card__catch {
  font-weight: 700;
  font-size: var(--fs-body-sm);    /* 1段階小さく（--fs-ttl → --fs-body-sm） */
  line-height: 1.5;
  letter-spacing: 2px;
}
.rapiq-card__lead {
  margin-top: 14px;
  font-size: var(--fs-sm);         /* 1段階小さく（--fs-body-sm → --fs-sm） */
  line-height: 1.65;               /* 3行になるSPで行間が空きすぎるため詰めた */
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.86);
}
/* 見た目（サイズ・配色・ホバー）は共通の .btn-round--invert 側。
   ここではカード内での「配置」だけを持つ */
.rapiq-card__arrow {
  position: absolute;
  right: clamp(20px, 2.2vw, 32px);
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
}

/* 製品画面。斜め3枚重ね＋影まで作り込んだ透過PNG（assets/rapiq-screens-stack.webp
   416×286）を1枚で置く。以前は shot-1/2/3 を CSS で重ねていたが、影と重なり順が
   カード幅によって崩れたため素材側に寄せた。カードより背が高いので上下にはみ出し、
   .rapiq-card の overflow:hidden で帯状に切り取られる（元の絵の作りは踏襲）。
   right は丸矢印（48px＋右inset最大32px）に被らない値。数値を詰めるときは注意 */
.rapiq-card__shots {
  position: absolute;
  right: 9%;
  top: 50%;
  translate: 0 -50%;
  width: 30%;
  height: auto;       /* 416:286 の比率のまま。高さはカードの約128% */
  pointer-events: none;
}

/* 狭い画面では画面3枚を隠してテキストだけに（重なって読めなくなるため） */
@media (max-width: 899.98px) {
  .rapiq-card__shots { display: none; }
  .rapiq-card__body { max-width: none; padding-right: 56px; }
  /* 横グラデ（90deg）は 1131×175 の横長カード前提で、ラベンダー→ティールの
     アクセントを右端の製品画面の背後に置く配色だった。SPは縦長になるうえ画面3枚も
     消えるため、右端に色帯だけが残って不自然に見えていた。
     カードの長辺に沿う対角グラデにして、.service-intro / .solutions と同じ流れに揃える */
  .rapiq-card {
    background: linear-gradient(160deg,
      var(--teal-900) 0%, #26a18e 58%, #9eb1e2 88%, #58d5c0 100%);
  }
}

/* ============================================================
   セクション見出し
   WHY DEAL / MEMBERS は Clients & Works と同じ common.css の
   .section-head（.en-h2 ＋ .section-head__jp）に揃えた。
   以前ここにあった .service-sub-title / .service-sub-en（日本語見出し＋
   小さな英字サブ）は使用箇所が無くなったので削除している
   ============================================================ */
.service-product-section,
.service-reason-section,
.service-members-section { margin-top: clamp(56px, 7vw, 120px); }

/* ============================================================
   Dealが選ばれる理由（WF 688:949〜700:550）
   ============================================================ */
/* 見出しを .section-head に揃えたので、見出しとの間隔も
   .works / .members と同じ値にする */
.reason { margin-top: clamp(24px, 3vw, 48px); }
/* CLIENTS & WORKS（.clients）は common.css で上下 clamp(72,10vw,176) の
   ゆったり padding を持つが、その直後の MEMBERS の margin-top と重なって
   上余白が二重（215px）になっていた。service では clients の下 padding を 0 にして、
   members の margin-top だけを間隔にする（他セクションと同じ間隔に揃う）。
   TOPは直後がNEWSで別途 styles.css が調整しているのでここは service 専用で影響しない */
.clients { padding-bottom: 0; }


/* Business → UX → Growth の縦フロー図 */
.reason__chart {
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(30, 217, 195, 0.16) 0%, rgba(250, 247, 240, 0.9) 100%),
    var(--neutral-50);
  border: 1px solid rgba(14, 59, 52, 0.08);
}
.chart-flow {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.chart-flow li {
  position: relative;
  font-family: var(--font-inter);
  font-size: var(--fs-jp-md);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--teal-900);
}
/* 項目間の下向き矢印。ギャップ26pxの中央に三角(高さ7px)を置く。
   中心=13px下 → top=13-3.5=9.5px（以前は4pxで前の項目に寄っていた）*/
.chart-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + 9.5px);
  left: 50%;
  translate: -50% 0;
  border: 7px solid transparent;
  border-top-color: var(--teal-400);
  border-bottom: 0;
}

/* 「UXだけでは終わらない。」＝ワイヤーのグリーン面 */
/* .service-intro / .solutions と同じブランドのティール面に統一
   （以前は rgba(30,217,195,.16) の淡いグリーンで、他のティール面と揃っていなかった） */
.reason__note {
  margin-top: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 2.5vw, 40px);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--teal-300) 0%, var(--teal-400) 100%);
  color: #fff;
}
.reason__note-title {
  font-size: var(--fs-ttl);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
  color: #fff;
}
.reason__note p {
  margin-top: 14px;
  font-size: var(--fs-body-sm);
  line-height: 1.9;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.92); /* ティール面になったので本文も白 */
}
/* SPは幅が狭く行が細切れになるため中央揃えに（PCは左揃えのまま） */
@media (max-width: 599.98px) {
  .reason__note { text-align: center; }
}

/* 「私たちの原点は"人を想う"」カード */
.reason__origin {
  margin-top: clamp(16px, 2vw, 28px);
  padding: var(--pad-card);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(14, 59, 52, 0.07);
  text-align: center;
}
.reason__origin-title {
  font-family: var(--font-maru);
  font-size: var(--fs-jp-md);   /* 1段階大きく（--fs-ttl → --fs-jp-md） */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 3px;
  color: var(--teal-900);
}
/* about.html の BRAND CONCEPT と同じシンボルのアニメーション。
   素材は403×296なので、dpr2で等倍になるのは表示幅200pxまで。上限160pxに留めている */
.reason__origin-symbol {
  width: clamp(96px, 11vw, 160px);
  height: auto;
  margin: clamp(16px, 2vw, 28px) auto 0;
}
.reason__origin-body {
  margin-top: clamp(18px, 2.2vw, 32px);
  font-size: var(--fs-body-sm);
  line-height: 1.95;
  letter-spacing: 1px;
  color: var(--neutral-800);
  text-align: left;
}
.reason__origin .button-cta { margin-top: clamp(24px, 3vw, 40px); }

/* ============================================================
   Clients & Works
   TOP（index.html）と同じ <section class="clients"> をそのまま使うように
   置き換えたので、このページ独自だった .client-logos（ロゴのグリッド）と
   .case-card（縦積みの事例カード）は削除した。本体は common.css 側
   ============================================================ */

/* .members__more（「一覧を見る」）は削除。
   Membersページが存在しないため導線ごと撤去した */

/* ============================================================
   Members（WF 700:591〜660:776）
   ============================================================ */
.members {
  margin-top: clamp(24px, 3vw, 48px);
  padding: var(--pad-card);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(14, 59, 52, 0.07);
}
.members__body {
  font-size: var(--fs-body-sm);
  line-height: 1.95;
  letter-spacing: 1px;
  color: var(--neutral-800);
}
/* メンバーアイコン（透過の円形イラスト）。
   4人＋3人の2グループで括り、flex-wrap で段落ちさせる。
   広い画面：7人が1行に収まる。狭い画面：グループ単位で2行に分かれる。
   以前は max-width ＋ --avatar-per-row で行の定員を制御していたが、
   グループ括りにしたので不要になった */
.members__avatars {
  /* SP下限は56→64px（小さくて顔が判別しづらかった）。
     4＋3の2段組みは維持できる：64×4 + gap12×3 = 292px ＜ SP内寸303px */
  --avatar: clamp(64px, 7.5vw, 112px);
  --avatar-gap: clamp(12px, 1.5vw, 24px);
  margin-top: clamp(20px, 2.5vw, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--avatar-gap);
}
.members__group {
  display: flex;
  gap: var(--avatar-gap);
}
.members__group img {
  flex-shrink: 0;
  width: var(--avatar);
  /* width/height属性(360×360)が presentational hint として効くと
     両辺が確定して aspect-ratio が無効になり、縦360pxの楕円になる。
     height:auto で高さを解放してから aspect-ratio に効かせる */
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
/* ラベルと役割ピルは「補足情報」の扱いなので、細字＋1段小さくして主張を弱める */
.members__label {
  margin-top: clamp(20px, 2.5vw, 36px);
  font-family: var(--font-inter);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--teal-900);
}
.role-list {
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 淡色の6色パレット。ロゴ由来のteal/coral/yellowに、離れた色相の
     amber/violet/blueを足して「同系色の濃淡」ではなく別の色相が
     隣り合うようにしている。彩度・明度は全色ほぼ揃えて「淡い」トーンで統一 */
  --role-c1: 30, 217, 195;   /* teal（ロゴ） */
  --role-c2: 255, 68, 106;   /* coral（ロゴ） */
  --role-c3: 138, 122, 235;  /* violet */
  --role-c4: 231, 204, 63;   /* amber */
  --role-c5: 74, 144, 226;   /* blue */
  --role-c6: 250, 216, 37;   /* yellow（ロゴ） */
}
.role-list li {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(var(--role-c), 0.16);
  font-family: var(--font-inter);
  /* --fs-sm が最小トークンなので、その1段下をここだけclampで作る（eyebrowと同じ扱い） */
  font-size: clamp(11px, 0.83vw, 15px);
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--teal-900);
}
.role-list li:nth-child(6n+1) { --role-c: var(--role-c1); }
.role-list li:nth-child(6n+2) { --role-c: var(--role-c2); }
.role-list li:nth-child(6n+3) { --role-c: var(--role-c3); }
.role-list li:nth-child(6n+4) { --role-c: var(--role-c4); }
.role-list li:nth-child(6n+5) { --role-c: var(--role-c5); }
.role-list li:nth-child(6n+6) { --role-c: var(--role-c6); }

/* ============================================================
   関連ページ（common.css の .related を使用）
   ============================================================ */
.service-related-section { margin-top: 0; }

/* Contact＋SNS のスタイルは common.css へ移設（全ページ共通で使うため） */

/* ============================================================
   768px〜（タブレット）
   ============================================================ */
@media (min-width: 768px) {
  /* 支援内容は4列に */
  .support__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 幅に余裕が出るのでカード見出しを本来のサイズへ */
  .promo-card__title { font-size: var(--fs-ttl); letter-spacing: 2px; }

  /* 3ステップを横並びにし、矢印を右向きへ */
  .flow { flex-direction: row; gap: 46px; }
  .flow__step { flex: 1; justify-content: center; }
  .flow__step:not(:last-child)::after {
    top: 50%;
    /* ギャップ(46px)の中央に三角(幅9px)を置く。中心=23px右 → left=23-4.5=18.5px
       （以前は8pxで手前のピルに寄っていた） */
    left: calc(100% + 18.5px);
    translate: 0 -50%;
    border: 9px solid transparent;
    border-left-color: rgba(255, 255, 255, 0.85);
    border-right: 0;
  }

  /* 支援企業ロゴは6列で1行に */

  /* 事例カードは2列 */

}

/* ============================================================
   960px〜（PC）
   ============================================================ */
@media (min-width: 960px) {
  .service-hero__title { font-size: var(--fs-jp-lg); }

  /* 事例カードは3列 */

  /* Dealが選ばれる理由：図とグリーン面を横並び、原点カードは全幅 */
  .reason {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 2.5vw, 40px);
    align-items: start;
  }
  .reason__note { margin-top: 0; }
  .reason__chart { height: 100%; }
  .reason__origin { grid-column: 1 / -1; margin-top: clamp(20px, 2.5vw, 40px); }
  .reason__origin-body { max-width: 74ch; margin-inline: auto; }

  /* Members：本文と写真を横並び */
}