/* =====================================================================
   共通コンポーネント（全ページで使用）
   - section-label（• Mission / Service ...）
   - btn-pill（ドット付きピルボタン）
   - mission（トップ／about で共有）
   - recruit-cta（全ページ下部の採用誘導）
   数値・色は tokens.css（現行サイト実測）優先
   ===================================================================== */

/* ---- セクションラベル ---- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 2.125rem;   /* 34px（Figma実測） */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-primary);
}
.section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- ピルボタン（ドット付き） ---- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.btn-pill--dark    { background: var(--c-text-strong); color: var(--c-on-primary); border-color: var(--c-text-strong); }
.btn-pill--primary { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
.btn-pill--outline { background: var(--c-bg); color: var(--c-primary); border-color: var(--c-primary); }

/* ホバーは .btn-cta と同じ「わずかに浮かせる」で揃える。以前は opacity を薄くする
   だけで、背景が明るいページではほとんど気づけなかった。
   ホバーできる装置のときだけ当てる（タッチ端末では :hover が張り付く）。 */
@media (hover: hover) {
  .btn-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  }
  /* 白抜きは面を反転させる。これ自体が十分な反応なので浮かせない */
  .btn-pill--outline:hover {
    background: var(--c-primary);
    color: var(--c-on-primary);
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-pill:hover { transform: none; }
}

/* =====================================================================
   Mission（トップ 530:4326 / about で本文違いで共有）
   トップは淡ブルー背景 / about は白背景（現行サイト実測）
   ===================================================================== */
.mission {
  background: var(--c-primary-50);   /* #F6F7FF 実測。無彩色グレーではない */
  padding-block: 90px;
}
.mission-inner {
  display: flex;
  align-items: center;
  gap: 90px;
}
.mission-img { flex: 0 0 auto; width: 475px; max-width: 45%; }
.mission-body { flex: 1 1 auto; }
.mission-headline {
  margin: 24px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-subhead);   /* 28px */
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--c-text);
}
.mission-text {
  margin: 28px 0 40px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.9;
  color: var(--c-text-strong);
}
.mission-body .mission-text:last-child { margin-bottom: 0; }

/* about版は白背景（現行はセクション全体に帯をかけず、薄グレーは会社概要テーブルのみ）。
   本文が長いためイラストは上寄せ。テキストカラムを広く取るため gap とイラスト幅を絞る。 */
.mission--about { background: var(--c-bg); }
.mission--about .mission-inner { align-items: flex-start; gap: 60px; }
.mission--about .mission-img { width: 400px; max-width: 38%; margin-top: 40px; }

/* =====================================================================
   Recruit CTA（530:4414）青背景 + 白カード
   現行サイト実測（1440px時）: 帯 1440×482 / padding 50px 40px / 上だけ角丸 20px
                             カード 1292×382 / padding 40px / イラスト約607×302
   帯の高さ(482px)はカード幅とイラストの大きさで決まる。padding だけ増やしても一致しない。
   ===================================================================== */
.recruit-cta {
  background: var(--c-primary);
  padding: 50px 40px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
/* カードは帯幅いっぱい（1292pxで上限）。通常の1080コンテナより広いのが現行の作り */
.recruit-cta > .container { max-width: 1292px; padding-inline: 0; }
.recruit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  background: var(--c-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.recruit-body { flex: 1 1 auto; }
.recruit-text {
  margin: 24px 0 34px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.9;
  color: var(--c-text-strong);
}
.recruit-img { flex: 0 0 auto; width: 607px; max-width: 50%; }
.recruit-img img { width: 100%; height: auto; }

/* =====================================================================
   リード（ページ冒頭の見出し＋本文＋イラスト）— 下層ページで共有
   consulting / engineering / manae / recruit で同じ作り。
   ページごとに違うのはイラストの幅だけなので、それだけ各ページCSSで上書きする。
   ===================================================================== */
.lead { padding-block: 80px; }
.lead-inner { display: flex; align-items: center; gap: 60px; }
.lead-body { flex: 1 1 auto; }
/* about の Mission（.mission-headline）と同じ書式にする。
   35.2px は下層ページのリードには大きすぎた（2026-08-18 指摘）。 */
.lead-title {
  margin: 0 0 28px;
  font-size: var(--fs-subhead);   /* 28px。.mission-headline と同値 */
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--c-text);
}
.lead-text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-text-strong);
}
.lead-img { flex: 0 0 auto; width: 432px; max-width: 42%; }
.lead-img img { width: 100%; height: auto; }

/* =====================================================================
   帯見出し付きカード — consulting「応募者採用に注力できる仕組み」/ manae「オプション機能」
   淡ラベンダーのカード + 青い帯見出し + 左右交互の項目。DB本文のクラス名が
   .sikumi-* / .option-* と別なので、両方を並べて1つの定義にしている
   （クラス名を統一するとDB本文の書き換えが必要になるため、CSS側で揃える）。
   ===================================================================== */
.sikumi-card,
.option-card {
  background: var(--c-primary-50);   /* #F6F7FF 実測 */
  border-radius: 20px;
  overflow: hidden;
}
.sikumi-banner,
.option-banner {
  margin: 0;
  padding: 20px 40px;                /* 実測 */
  text-align: center;
  background: var(--c-primary);      /* #485BBF 実測 */
  color: var(--c-on-primary);
  font-size: var(--fs-h2);           /* 24px */
  font-weight: var(--fw-semibold);
}
.sikumi-list,
.option-list { padding: 56px 60px 64px; }
.sikumi-item,
.option-item { display: flex; gap: 56px; }
.sikumi-item--rev,
.option-item--rev { flex-direction: row-reverse; }
.sikumi-body,
.option-body { flex: 1 1 0; min-width: 0; }
.sikumi-title,
.option-title {
  margin: 0 0 20px;
  font-size: var(--fs-feature);   /* 25.6px */
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
}
.sikumi-text,
.option-text { margin: 0; font-size: var(--fs-body); line-height: 1.9; color: var(--c-text-strong); }
.sikumi-img,
.option-img { flex: 0 0 466px; max-width: 46%; }
.sikumi-img img,
.option-img img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }

/* =====================================================================
   3カラムのカードグリッド
     consulting「支援サービス例」  .svc-grid   / .svc-card-img  / .svc-card-title / .svc-card-body
     manae     「管理機能」        .manage-grid/ .manage-img    / .manage-title   / .manage-text
     engineering「POINT」          .point-grid / .point-img     / .point-title    / .point-text
   骨格（3列グリッド + 角丸画像 + 青い見出し + 小さめ本文）は3つとも同じ。
   DB本文のクラス名が別なので、セレクタを並べて1つの定義にしている。

   ⚠️ 違いは次の3点だけで、これは意図的に残している:
     - engineering だけカード枠（白背景・影・padding）を持つ → .point-card（page-engineering.css）
       ※現行サイトには無いWP独自の装飾。3つを揃えるならここを外す判断になる
     - engineering だけ画像が 3:2（他は 16:9）
     - 見出しの上マージンが 20 / 18 / 14px
   ===================================================================== */
.svc-grid,
.manage-grid,
.point-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
/* 上の余白は .section-label + * が持つ（pages.css）。ここは行間だけ */
.svc-grid { gap: 40px 30px; }

.svc-card-img,
.manage-img,
.point-img { border-radius: 12px; overflow: hidden; }
.svc-card-img img,
.manage-img img,
.point-img img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.point-img img { aspect-ratio: 3 / 2; }           /* engineering だけ 3:2 */

.svc-card-title,
.manage-title,
.point-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
}
.svc-card-title { margin-top: 20px; }
.manage-title   { margin-top: 18px; }
.point-title    { margin-top: 14px; }

.svc-card-body,
.manage-text,
.point-text { margin: 0; font-size: var(--fs-small); line-height: 1.8; color: var(--c-text-strong); }

/* =====================================================================
   FEATURE（特徴）ジグザグ — サービス各ページで共有
   番号 + タイトル + 罫線 + 本文 / 写真 の2カラム、偶数行で写真左
   ===================================================================== */
/* 透かし文字を敷いた淡ブルーの帯。consulting / engineering / manae で共通。
   ⚠️ 以前はこの3ブロックが各ページCSSに複製されていて、SP指定が
   consulting のコピーにしか無く、engineering / manae にPCの余白が残る不具合の原因になっていた。 */
/* position / overflow / 透かしの位置は .deco-section が持つ。
   ここは塗り背景と、その上に載る透かしの色だけ。 */
.feature-section {
  padding-bottom: 100px;
  background: var(--c-primary-50);
}
.feature-section > .deco-heading { color: #FFFFFF; }

/* 英字の透かしを敷くセクションの共通の器。
   セクション見出し（.section-label）には必ずこれを添える、という規則で揃えている。
   英字は**大文字1語**。塗り背景（.feature-section）では白、白・淡ブルーの背景では
   淡ブルー（既定色）になる。 */
.deco-section { position: relative; overflow: hidden; }
/* 透かしの縦位置は**見出しの中心に合わせる。**
   固定の top だと画面幅で崩れる。透かしの級数が clamp(3.5rem, 9vw, 8.1rem) で
   幅に応じて 56〜130px と倍以上変わるのに、見出しは34px固定だからで、
   SPで合わせた 62px はPCで25px下にずれていた（2026-08-18 指摘）。

   基準は「セクション上端 → 見出しの中心」= 上余白(80px) + 見出し高さの半分(約20px)。
   translateY(-50%) で透かし自身の中心をそこへ置くので、級数が変わっても崩れない。 */
.deco-section > .deco-heading {
  position: absolute;
  top: calc(80px + 20px);
  left: var(--container-edge);
  transform: translateY(-50%);
}
.deco-section > .container { position: relative; z-index: 1; }

/* **上の余白はここだけで決める。**透かしは常に上から40pxに置くため、
   セクションごとに上余白が違うと「透かしと見出しの重なり方」が変わり、
   ルールが2通りあるように見える（実際 80 / 90 / 100px が混在していた）。
   各ページCSSは下余白だけを持つ約束にしてあるので、ここは素直に書ける。 */
.deco-section { padding-top: 80px; }

@media (max-width: 839px) {
  .deco-section { padding-top: 50px; }
  /* SPは上余白50px・見出し高さ約34px。考え方はPCと同じ */
  .deco-section > .deco-heading { top: calc(50px + 17px); }
}

.deco-heading {
  font-family: "Inter", sans-serif;
  font-size: clamp(3.5rem, 9vw, 8.1rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-primary-50);
  opacity: 0.7;              /* 現行サイト実測。見出しとの干渉を避けるため */
  user-select: none;
  pointer-events: none;
}

/* 見出し（サービスの特徴）と 01 の間を、01と02の間と同じにする。
   40px と 60px で不揃いだったため、見出しだけが本文に寄って見えていた
   （2026-08-17 指摘）。gap と同じ値を使うので、片方だけ直すと再びずれる。 */
/* 上の余白は .section-label + * が持つ（pages.css）。ここは行間だけ */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
/* 現行サイト実測: 行1080px / padding 40px / gap 50px → テキストと画像が 475px ずつ。
   テキスト幅475pxが確保できないと feature-title が2行に折り返す。 */
.feature-row {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 40px;
  background: var(--c-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.feature-row:nth-child(even) { flex-direction: row-reverse; }
.feature-text { flex: 1 1 0; min-width: 0; }
.feature-no {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-num);      /* 84px */
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--c-primary-100);
}
.feature-title {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-feature);  /* 25.6px */
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--c-primary);
}
.feature-body {
  margin: 20px 0 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.9;
  color: var(--c-text-strong);
}
.feature-img {
  flex: 0 0 475px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.feature-img img { width: 100%; height: 300px; object-fit: cover; display: block; }
.feature-img--contain { background: var(--c-bg); }
.feature-img--contain img { object-fit: contain; height: auto; }

/* =====================================================================
   レスポンシブ（実測ブレークポイント 840 / 415px）
   ===================================================================== */
/* SPの縦余白は現行サイト実測の 50px 基調に合わせる（セクション padding-block = 50px）。
   カード内側とカード間の詰めも併せて行う。 */
@media (max-width: 839px) {
  .section-label { font-size: 1.75rem; }

  .lead { padding-block: 50px; }
  .lead-inner { flex-direction: column; gap: 24px; }
  .lead-img { width: 70%; max-width: 320px; }

  .feature-section { padding-bottom: 50px; }

  .svc-grid,
  .manage-grid,
  .point-grid { grid-template-columns: 1fr; gap: 24px; }
  .point-grid { gap: 20px; }

  .sikumi-banner,
  .option-banner { padding: 16px 20px; font-size: 1.25rem; }
  .sikumi-list,
  .option-list { padding: 28px 20px 32px; }
  .sikumi-item, .sikumi-item--rev,
  .option-item, .option-item--rev { flex-direction: column; align-items: stretch; gap: 20px; }
  .sikumi-item + .sikumi-item,
  .option-item + .option-item { margin-top: 32px; }
  /* ⚠️ flex-basis を auto に戻すことが必須。縦積み（column）では flex-basis が
     「高さ」として効くため、画像の下に200〜290pxの空白が残っていた。 */
  .sikumi-img,
  .option-img { flex: 0 0 auto; width: 100%; max-width: none; }

  .feature-list { gap: 24px; }
  .feature-row,
  .feature-row:nth-child(even) { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .feature-no { font-size: 3.5rem; }
  .feature-img { flex-basis: auto; }
  .feature-img img { height: 200px; }

  .mission { padding-block: 50px; }
  .mission-inner { flex-direction: column; gap: 24px; text-align: left; }
  .mission-img { width: 60%; max-width: 300px; }
  .mission-body { width: 100%; }
  .mission--about .mission-inner { align-items: stretch; gap: 24px; }
  /* 現行サイトSP実測: イラストは本文の「後」に中央寄せで置かれる（幅267px）。
     order:-1 で見出しより前に出すと、ラベルの無い画像が唐突に先頭へ来てしまう。 */
  .mission--about .mission-img { width: 100%; max-width: 267px; margin: 0 auto; order: 0; }

  .recruit-cta { padding: 50px 24px; }
  .recruit-card { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 24px; }
  .recruit-img { width: 70%; max-width: 320px; align-self: center; }
  /* ボタンをカード幅の中央へ。inline-flex のままでは margin:auto が効かないので block 化する */
  .recruit-card .btn-pill { display: flex; width: fit-content; margin-inline: auto; }
}