/* =============================================================
   style.css ｜ コンサルタント紹介（インソースコンサルティング）
   ・ALMTデザインシステム（DESIGN.md / coding_*.md）準拠の骨格に
     デザインカンプ（HTML+CSS）実測値を value-swap して忠実再現。
   ・記述順序: 1.Base → 2.Layout(l_) → 3.Module(m_) → 4.State → 5.Utility(u_)
   ・1プロパティ1行 / var() 経由 / transition:all 禁止 / 隣接セレクタで item 余白
   ・トークン値・余白・BP・タイポは「カンプ実測」が正（design-locked）。
     命名・BEM・a11y・floor はスキル正準が正。
   ============================================================= */


/* =============================================================
   1. BASE
   ============================================================= */

/* ---------- reset は host に委譲 ----------
   host（元ページ index.html）が theme herab の reset.css を先に読み込むため、
   本ファイルでは reset を再定義しない（再定義すると本ファイルが後ろに来る分、
   host common.css のヘッダー/フッター指定を上書きしてしまう）。
   host reset.css で担保済み：margin/padding/border 0・box-sizing:border-box（列挙要素）・
   list-style:none・a{text-decoration:none}・img{max-width:100%}・input{background:transparent}。
   host reset.css が触っていない要素だけ、以下で最小限補う。
   ---------------------------------------- */
button, input, select, textarea, label {
  box-sizing: border-box;
}
button {
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
  line-height: inherit;
}


/* ---------- :root（デザイントークン・カンプ実測値）----------
   色は元カンプ CSS の :root を正準命名規約へ翻訳（値はカンプのまま）。
   DESIGN.md §2 の色（#8F1E35 等）は「見た目忠実」のため使用しない。
   ---------------------------------------- */
:root {
  /* color（カンプ実測。カンプ元 token をコメント併記）*/
  --color-main:        #e5002d; /* カンプ --red：ブランド赤・ボタン・CTA・アクセント */
  --color-main-dark:   #bd0025; /* カンプ --red-dark：ボタン hover */
  --color-main-deep:   #89001c; /* カンプ：イニシャル肖像グラデ終端・タグ文字基調 */
  --color-heading:     #1e2f4f; /* カンプ --navy：見出し（明朝） */
  --color-text:        #172235; /* カンプ --ink：本文 */
  --color-text-muted:  #526071; /* カンプ --ink-soft：補足・リード・ステートメント */
  --color-text-faint:  #6c7885; /* a11y-adjusted：カンプ #74808e は白地 4.02:1 で AA 未達 → 色相維持のまま暗化し 4.50:1 */
  --color-reverse:     #ffffff; /* カンプ --white */
  --color-bk:          #fff4f6; /* カンプ --red-soft：薄赤背景 */
  --color-border:      #dfe3e8; /* カンプ --line：罫線・カード枠 */
  --color-border-dark: #8996a6; /* a11y-adjusted：カンプ #cbd1d8 は白地 1.54:1。入力欄・ボタンの境界は WCAG 1.4.11 で 3:1 必要 → 3.01:1 */
  --color-line:        #cbd1d8; /* カンプ --line-dark の原値。装飾罫線（ステップ区切り等・非UI境界）に使う */
  --color-placeholder: #6b7887; /* a11y-adjusted：カンプ #8a95a2 は 3.04:1 → 4.50:1 */
  --color-tag-text:    #8f0020; /* カンプ：タグ文字（薄赤地の上） */
  --color-tag-border:  #f0c7cf; /* カンプ：タグ枠 */
  --color-panel-face:  #eef0f2; /* カンプ：肖像プレースホルダ地 */

  /* 装飾用の半透明・効果（literal を token 内に閉じ込め＝floor 準拠）*/
  --color-main-a08:    rgba(229, 0, 45, 0.08); /* ヒーロー背景グリッド線 */
  --color-main-a22:    rgba(229, 0, 45, 0.22); /* ヒーロー装飾リング */
  /* a11y-adjusted：カンプは枠 30%（1.34:1）・弱文字 72%（2.89:1）でいずれも未達。
     赤地の上で AA/1.4.11 を満たすには不透明度を上げるしかないため引き上げた。 */
  --color-line-reverse: rgba(255, 255, 255, 0.75); /* パネル内二重枠：3.05:1（1.4.11 UI 3:1）*/
  --color-reverse-muted: var(--color-reverse);     /* パネル内弱テキスト：純白 4.81:1（AA）*/
  --shadow-panel:      0 28px 70px rgba(148, 0, 30, 0.18); /* ヒーローパネル影 */
  --shadow-search:     0 14px 40px rgba(23, 34, 53, 0.06); /* 検索パネル影 */
  --shadow-card-hover: 0 22px 50px rgba(23, 34, 53, 0.11); /* カード hover 影 */
  --shadow-contact:    0 16px 28px rgba(183, 0, 36, 0.15); /* contact CTA 影 */
  --color-portraitScrim: rgba(58, 0, 11, 0.42);   /* 肖像下部のスクリム（番号の可読性確保） */
  --color-face-a97:      rgba(255, 255, 255, 0.97); /* contact 面グラデ左 */
  --color-bk-a96:        rgba(255, 244, 246, 0.96); /* contact 面グラデ右 */

  /* font（カンプ実測の使い分け）*/
  --font-base:   "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-mincho: "Yu Mincho", "Hiragino Mincho ProN", serif; /* 見出し・和文セリフ */
  --font-en:     Arial, Helvetica, sans-serif;               /* 欧文ラベル・ローマ字 */
  --font-num:    Georgia, serif;                             /* 数字（メトリクス・番号） */

  /* shape / motion */
  --r-pill: 999px;
  --transition: 0.18s; /* カンプ標準 */

  /* breakpoint（参照用。@media では数値直書き）
     --bp-lg:1020 / --bp-md:820 / --bp-sm:620（カンプ実測に差し替え） */
  --bp-lg: 1020px;
  --bp-md: 820px;
  --bp-sm: 620px;
}


/* ---------- base styles ----------
   html 以外のグローバル指定（body の色・書体・行間）は置かない。
   host common.css が :root に font-size:14px / letter-spacing:1px / line-height:2 /
   font-weight:500 を敷いており、body に上書きすると host のヘッダー・フッターの
   タイポグラフィまで巻き込むため。本文側のタイポは .m_consultantsMain（本文ルート
   Block）に置き、継承で配下へ渡す（親要素依存セレクタは使わない）。
   ---------------------------------------- */
html {
  scroll-behavior: smooth;
}
a { color: inherit; }
button, input { font: inherit; }


/* =============================================================
   2. LAYOUT (l_)
   スキン情報は持たない。値はカンプ実測へ差し替え。
   ============================================================= */

/* ---------- l_cont（全幅ラッパー×内側幅制限の2層）----------
   カンプは「全幅fluid＋左右48px」方式。正準の min-width:1220px 横スクロール
   方式は不採用（value-swap／§3-6）。外枠は全幅、内側が幅制限＋中央寄せ。
   ----------------------------------------------------------- */
.l_cont {
  display: block;
  width: 100%;
}
.l_cont__inner {
  width: min(1060px, 100% - 48px);
  margin-inline: auto;
}
.l_cont__inner--wide {
  width: min(1320px, 100% - 44px); /* ヘッダーのみ広い（カンプ実測） */
}
@media screen and (max-width: 620px) {
  .l_cont__inner {
    width: min(1060px, 100% - 32px);
  }
}

/* ---------- l_grid（段組み・3層契約）----------
   ガターは負マージン＋パディング方式（gap 禁止＝u_col と % 幅の合算落ち回避）。
   カンプ実測ガター 26px を --gutter26 で value-swap。
   ----------------------------------------------------------- */
.l_grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.l_grid__item {
  display: flex;
}
.l_grid__inner {
  display: block;
  width: 100%;
}
.l_grid--gutter26 {
  margin-top: -26px;
  margin-inline: -13px;
}
.l_grid--gutter26 > .l_grid__item {
  padding-top: 26px;
  padding-inline: 13px;
}


/* =============================================================
   3. MODULE (m_)
   3a 構造/共通 → 3b ページ固有（カンプ構成・正準命名）
   ============================================================= */

/* ---------- m_skipLink（a11y：フォーカス時のみ可視） ---------- */
.m_skipLink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 8px 24px;
  background: var(--color-main);
  color: var(--color-reverse);
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-100%);
  transition: transform var(--transition);
}
.m_skipLink:focus { transform: translateY(0); }


/* ---------- m_consultantsMain（本文ルート Block）----------
   host（元ページ）は :root に font-size:14px / letter-spacing:1px / line-height:2 /
   font-weight:500 を敷いており、これが <main> 配下へ継承されると本ページの
   タイポグラフィ実測値（px 指定・em 指定の字送り）が崩れる。
   本文ルートで一度だけ打ち消し、継承で配下へ渡す（配下を子孫セレクタで縛らない）。
   ※ ヘッダー / フッター（m_gArea / m_gFooterArea）は host の指定のまま＝無干渉。
   ---------------------------------------------------------- */
.m_consultantsMain {
  display: block;
  background: var(--color-reverse);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
}

/* host の共通ヘッダー（.m_gArea__wrap）は position:fixed / height:70px。
   ページ内アンカー（#consultants / #approach / #services / #contact）で
   見出しがヘッダーの下に隠れるため、遷移先 Block に逃げ幅を持たせる。
   ※ scroll-margin はレイアウトに影響しない（Block 外 margin 禁止の対象外）。 */
.m_directory,
.m_approach,
.m_serviceSection,
.m_contactSection {
  scroll-margin-top: 86px;
}


/* host 側の共通ヘッダー / フッターを正としたため、
   自作の m_brandBar / m_header / m_headerLogo / m_headerCta / m_gnav /
   m_hamburger / m_footer / m_footerLogo は削除した（HTML からも撤去済み）。 */


/* ---------- m_hero ----------
   段組みは m_ 内部 grid（非対称 1.45fr/.55fr）。理由：12分割で割れず、
   装飾（円・グリッド・帯）と密結合のため l_grid では表現不能。
   ----------------------------------------------------------- */
.m_hero {
  position: relative;
  background: var(--color-reverse);
  overflow: hidden;
}
.m_hero::before {
  content: "";
  position: absolute;
  top: -330px;
  right: -70px;
  width: 610px;
  height: 610px;
  border: 86px solid var(--color-bk);
  border-radius: 50%;
}
.m_hero::after {
  content: "";
  position: absolute;
  bottom: -240px;
  left: 32%;
  width: 300px;
  height: 300px;
  border: 1px solid var(--color-main-a22);
  border-radius: 50%;
}
.m_hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image: linear-gradient(var(--color-main-a08) 1px, transparent 1px), linear-gradient(90deg, var(--color-main-a08) 1px, transparent 1px);
  background-size: 84px 84px;
  /* mask-image の #000 は色ではなくアルファ（不透明領域）の指定のため、色トークン化の対象外 */
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 68%);
  mask-image: linear-gradient(90deg, #000, transparent 68%);
}
.m_hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
  align-items: center;
  gap: 78px;
  min-height: 600px;
  padding-block: 62px 76px;
}
.m_hero__breadcrumb {
  color: var(--color-text-faint);
  font-size: 11px;
}
.m_hero__breadcrumb + .m_hero__eyebrow {
  margin-top: 50px;
}
.m_hero__ttl {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: clamp(38px, 4.8vw, 62px); /* design-locked：min/max はカンプ実測。fluid=72÷768×100 */
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.03em;
}
.m_hero__ttlMark {
  position: relative;
  color: var(--color-main);
}
.m_hero__ttlMark::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: -8px;
  width: 9px;
  height: 9px;
  background: var(--color-main);
  border-radius: 50%;
}
.m_hero__lead {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.035em;
}
.m_hero__actions {
  display: flex;
  align-items: center;
  gap: 34px;
}
.m_hero__eyebrow + .m_hero__ttl {
  margin-top: 20px;
}
.m_hero__ttl + .m_hero__lead {
  margin-top: 28px;
}
.m_hero__lead + .m_hero__actions {
  margin-top: 34px;
}

/* ヒーローパネル（右） */
.m_heroPanel {
  position: relative;
  min-height: 360px;
  padding: 40px 36px;
  background: var(--color-main);
  color: var(--color-reverse);
  box-shadow: var(--shadow-panel);
}
.m_heroPanel::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--color-line-reverse);
  pointer-events: none;
}
.m_heroPanel__label {
  position: relative;
  color: var(--color-reverse-muted);
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.m_heroPanel__metric {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.m_heroPanel__num {
  font-family: var(--font-num);
  font-size: 94px;
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.07em;
}
.m_heroPanel__unit {
  margin-bottom: 9px;
  color: var(--color-reverse-muted);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.15em;
}
.m_heroPanel__desc {
  position: relative;
  color: var(--color-reverse);
  font-size: 13px;
  line-height: 1.8;
}
.m_heroPanel__rule {
  position: relative;
  height: 1px;
  background: var(--color-line-reverse);
}
.m_heroPanel__points {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
}
.m_heroPanel__points i {
  flex: 1;
  height: 1px;
  margin-inline: 13px;
  background: var(--color-reverse-muted);
}
.m_heroPanel__label + .m_heroPanel__metric {
  margin-top: 30px;
}
.m_heroPanel__metric + .m_heroPanel__desc {
  margin-top: 26px;
}
.m_heroPanel__desc + .m_heroPanel__rule {
  margin-top: 32px;
}
.m_heroPanel__rule + .m_heroPanel__points {
  margin-top: 22px;
}

/* ヒーロー帯（全幅・上下赤ボーダー） */
.m_heroBand {
  position: relative;
  z-index: 2;
  background: var(--color-reverse);
  border-top: 1px solid var(--color-main);
  border-bottom: 1px solid var(--color-main);
  color: var(--color-main);
}
.m_heroBand__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
}
.m_heroBand__lead {
  font-family: var(--font-mincho);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.m_heroBand__note {
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

@media screen and (max-width: 1020px) {
  .m_hero__inner {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 42px;
  }
}
@media screen and (max-width: 820px) {
  .m_hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 46px 56px;
  }
  .m_hero__breadcrumb {
    /* 余白は隣接で管理せず先頭要素のため下側で吸収 */
  }
  .m_heroPanel {
    min-height: auto;
  }
}
@media screen and (max-width: 620px) {
  .m_hero__ttl {
    font-size: clamp(38px, 6.77vw, 52px); /* design-locked：min/max はカンプ SP 実測。fluid=52÷768×100 */
  }
  .m_hero__lead br {
    display: none;
  }
  .m_hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .m_heroPanel {
    padding: 32px 26px;
  }
  .m_heroPanel__num {
    font-size: 80px;
  }
  .m_heroBand__note {
    display: none;
  }
}


/* ---------- 共通：eyebrow / primary button / text link / outline link ---------- */
.m_eyebrow {
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.m_btnPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 210px;
  min-height: 56px;
  padding: 14px 22px;
  background: var(--color-main);
  color: var(--color-reverse);
  border: 1px solid var(--color-main);
  font-size: 13px;
  font-weight: 800;
  transition: background var(--transition), transform var(--transition);
}
.m_btnPrimary:hover,
.m_btnPrimary:focus-visible {
  background: var(--color-main-dark);
  transform: translateY(-2px);
}

.m_textLink {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-heading);
  font-size: 12px;
  font-weight: 700;
}

.m_outlineLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(310px, 100%);
  height: 58px;
  padding-inline: 20px;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  font-size: 12px;
  font-weight: 800;
  transition: background var(--transition), color var(--transition);
}
.m_outlineLink:hover,
.m_outlineLink:focus-visible {
  background: var(--color-main);
  color: var(--color-reverse);
}


/* ---------- m_secHeading（セクション見出し：左h2 / 右説明の振り分け）---------- */
.m_secHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.m_secHeading__ttl {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: clamp(26px, 3.2vw, 44px); /* design-locked：min/max 実測。fluid=48÷768×100 */
  font-weight: 600;
  letter-spacing: 0.04em;
}
.m_secHeading__sub {
  max-width: 360px;
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.9;
}
.m_secHeading__eyebrow + .m_secHeading__ttl {
  margin-top: 14px;
}
.m_secHeading--narrowSub .m_secHeading__sub {
  max-width: 300px;
}
@media screen and (max-width: 820px) {
  .m_secHeading {
    display: block;
  }
  .m_secHeading__sub {
    max-width: none;
    margin-top: 24px;
  }
}


/* ---------- m_directory（コンサルタント検索＋一覧セクション）---------- */
.m_directory {
  background: var(--color-reverse);
  padding-block: 106px 126px;
  scroll-margin-top: 24px;
}
.m_directory__heading + .m_directory__search {
  margin-top: 48px;
}
.m_directory__search + .m_directory__meta {
  margin-top: 47px;
}
.m_directory__meta + .m_directory__grid {
  margin-top: 18px;
}

/* 検索パネル */
.m_search {
  padding: 24px;
  background: var(--color-reverse);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-main);
  box-shadow: var(--shadow-search);
}
.m_search__field {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 58px;
  padding-inline: 20px;
  background: var(--color-reverse);
  border: 1px solid var(--color-border-dark);
}
.m_search__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--color-main);
  border-radius: 50%;
}
.m_search__icon::after {
  content: "";
  position: absolute;
  bottom: -3px;
  right: -6px;
  width: 8px;
  height: 2px;
  background: var(--color-main);
  transform: rotate(45deg);
}
.m_search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
}
.m_search__input::placeholder {
  color: var(--color-placeholder);
}
.m_search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.m_search__field + .m_search__filters {
  margin-top: 17px;
}
.m_search__filter {
  min-height: 36px;
  padding-inline: 15px;
  background: var(--color-reverse);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.m_search__filter:hover,
.m_search__filter:focus-visible {
  border-color: var(--color-main);
  color: var(--color-main);
}
.m_search__filter.is_active {
  background: var(--color-main);
  color: var(--color-reverse);
  border-color: var(--color-main);
}

/* 件数メタ */
.m_dirMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m_dirMeta__count {
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}
.m_dirMeta__num {
  margin-right: 8px;
  color: var(--color-main);
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 400;
}
.m_dirMeta__note {
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

/* 空状態 */
.m_directory__empty {
  padding: 64px 24px;
  text-align: center;
  background: var(--color-reverse);
  border: 1px solid var(--color-border);
}
.m_directory__emptyTxt {
  color: var(--color-text-muted);
}
.m_directory__emptyBtn {
  color: var(--color-main);
  border-bottom: 1px solid var(--color-main);
  font-weight: 700;
}
.m_directory__emptyTxt + .m_directory__emptyBtn {
  margin-top: 18px;
  display: inline-block;
}


/* ---------- m_consultantCard（コンサルタント1名・繰返）---------- */
.m_consultantCard {
  height: 100%;
  background: var(--color-reverse);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.m_consultantCard:hover {
  border-color: var(--color-main);
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}
.m_consultantCard__link {
  display: block;
  height: 100%;
  color: inherit;
}
.m_consultantCard__portrait {
  position: relative;
  aspect-ratio: 1.3;
  background: var(--color-panel-face);
  overflow: hidden;
}
.m_consultantCard__portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(transparent, var(--color-portraitScrim));
}
.m_consultantCard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: saturate(0.86) contrast(1.02);
  transition: transform 0.42s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.m_consultantCard:hover .m_consultantCard__img {
  transform: scale(1.035);
}
.m_consultantCard__initial {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-main), var(--color-main-deep));
  color: var(--color-reverse);
}
.m_consultantCard__initialCh {
  font-family: var(--font-mincho);
  font-size: 76px;
}
.m_consultantCard__initialRoman {
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.m_consultantCard__number {
  position: absolute;
  bottom: 14px;
  right: 18px;
  z-index: 2;
  color: var(--color-reverse);
  font-family: var(--font-num);
  font-size: 21px;
}
.m_consultantCard__body {
  padding: 25px 25px 27px;
}
.m_consultantCard__role {
  min-height: 32px;
  color: var(--color-main);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
}
.m_consultantCard__name {
  display: inline;
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.m_consultantCard__roman {
  display: inline;
  margin-left: 12px;
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.07em;
}
.m_consultantCard__statement {
  min-height: 84px;
  padding-top: 17px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.85;
}
.m_consultantCard__role + .m_consultantCard__name {
  margin-top: 9px;
}
.m_consultantCard__name + .m_consultantCard__statement,
.m_consultantCard__roman + .m_consultantCard__statement {
  margin-top: 21px;
}
.m_consultantCard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m_consultantCard__statement + .m_consultantCard__tags {
  margin-top: 20px;
}
.m_consultantCard__tag {
  padding: 5px 8px;
  background: var(--color-bk);
  border: 1px solid var(--color-tag-border);
  color: var(--color-tag-text);
  font-size: 9px;
  font-weight: 700;
}
.m_consultantCard__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid var(--color-main);
  color: var(--color-main);
  font-size: 11px;
  font-weight: 800;
}
.m_consultantCard__more b {
  font-size: 17px;
}
.m_consultantCard__tags + .m_consultantCard__more {
  margin-top: 22px;
}


/* ---------- m_approach（提案アプローチ）----------
   非対称2カラム（.92fr/.78fr）は m_ 内部 grid。理由：12分割で割れず
   左コピー／右ステップの意味的2分割のため。l_grid では表現不能。
   ----------------------------------------------------------- */
.m_approach {
  position: relative;
  background: var(--color-reverse);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: 126px;
  overflow: hidden;
}
.m_approach::before {
  content: "";
  position: absolute;
  top: -270px;
  left: -230px;
  width: 620px;
  height: 620px;
  border: 72px solid var(--color-bk);
  border-radius: 50%;
}
.m_approach__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(410px, 0.78fr);
  align-items: start;
  gap: 110px;
}
.m_approach__copy {
  padding-left: 26px;
  border-left: 5px solid var(--color-main);
}
.m_approach__ttl {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: clamp(28px, 3vw, 44px); /* design-locked：min/max 実測。fluid=54÷768×100 */
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.m_approach__ttlMark {
  color: var(--color-main);
}
.m_approach__lead {
  max-width: 570px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 2;
}
.m_approach__eyebrow + .m_approach__ttl {
  margin-top: 14px;
}
.m_approach__ttl + .m_approach__lead {
  margin-top: 30px;
}
.m_approach__lead + .m_approach__link {
  margin-top: 38px;
}

/* ステップ */
.m_approachSteps {}
.m_approachSteps__item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 22px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--color-line);
}
.m_approachSteps__item:last-child {
  border-bottom: 1px solid var(--color-line);
}
.m_approachSteps__num {
  color: var(--color-main);
  font-family: var(--font-num);
  font-size: 26px;
}
.m_approachSteps__ttl {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.m_approachSteps__txt {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.8;
}
.m_approachSteps__ttl + .m_approachSteps__txt {
  margin-top: 12px;
}

@media screen and (max-width: 1020px) {
  .m_approach__grid {
    grid-template-columns: 1fr 1fr;
    gap: 55px;
  }
}
@media screen and (max-width: 820px) {
  .m_approach__grid {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 620px) {
  .m_approach {
    padding-block: 82px;
  }
  .m_approach__copy {
    padding-left: 18px;
  }
  .m_approachSteps__item {
    grid-template-columns: 54px 1fr;
    gap: 14px;
  }
}


/* ---------- m_serviceGrid / m_serviceCard（事業内容）----------
   罫線連結グリッド（gutter 0・セル境界 1px 共有・hover 赤反転）。
   理由：l_grid はガター方式で「隣接セルが 1px 罫線を共有する」見た目を
   作れないため、m_ 内部 grid＋境界線テクニックで実装（design-locked）。
   ----------------------------------------------------------- */
.m_serviceSection {
  background: var(--color-reverse);
  padding-block: 118px 128px;
}
.m_serviceSection__heading + .m_serviceSection__grid {
  margin-top: 55px;
}
/* 段組みは l_grid（ガターなし＝Modifier 非付与）が担う。
   罫線連結（セル境界 1px 共有）の見た目は、外枠を m_serviceGrid、
   右下線を m_serviceCard が持つことで作る（スキンは m_ の責任）。 */
.m_serviceGrid {
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}
.m_serviceCard {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 326px;
  padding: 28px 25px 25px;
  background: var(--color-reverse);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition), color var(--transition);
}
.m_serviceCard:hover {
  background: var(--color-main);
  color: var(--color-reverse);
}
.m_serviceCard__num {
  color: var(--color-main);
  font-family: var(--font-num);
  font-size: 22px;
}
.m_serviceCard:hover .m_serviceCard__num {
  color: var(--color-reverse);
}
.m_serviceCard__ttl {
  margin-top: 70px;
  font-family: var(--font-mincho);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}
.m_serviceCard__txt {
  margin-top: 14px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.8;
}
.m_serviceCard:hover .m_serviceCard__txt {
  color: var(--color-reverse);
}
.m_serviceCard__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid currentColor;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.m_serviceCard__txt + .m_serviceCard__more {
  margin-top: auto;
}
.m_serviceCard__more b {
  font-size: 16px;
}

@media screen and (max-width: 620px) {
  .m_serviceSection {
    padding-block: 82px;
  }
  .m_serviceSection__heading + .m_serviceSection__grid {
    margin-top: 36px;
  }
  .m_serviceCard {
    min-height: 270px;
  }
  .m_serviceCard__ttl {
    margin-top: 42px;
  }
}


/* ---------- m_contactCta（お問合せ誘導）---------- */
.m_contactSection {
  background: var(--color-reverse);
  border-top: 1px solid var(--color-border);
  padding-block: 100px;
}
.m_contactCta {
  padding: 66px 70px;
  text-align: center;
  background: linear-gradient(90deg, var(--color-face-a97), var(--color-bk-a96)), var(--color-reverse);
  border: 1px solid var(--color-main);
}
.m_contactCta__ttl {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: min(4.46vw, 50px); /* design-locked：min/max 実測。fluid=50÷768×100 */
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.m_contactCta__lead {
  color: var(--color-text-muted);
  font-size: 13px;
}
.m_contactCta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}
.m_contactCta__eyebrow + .m_contactCta__ttl {
  margin-top: 14px;
}
.m_contactCta__ttl + .m_contactCta__lead {
  margin-top: 25px;
}
.m_contactCta__lead + .m_contactCta__actions {
  margin-top: 40px;
}
.m_contactCta__primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: 350px;
  height: 62px;
  padding-inline: 24px;
  background: var(--color-main);
  color: var(--color-reverse);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--shadow-contact);
  transition: background var(--transition), transform var(--transition);
}
.m_contactCta__primary:hover,
.m_contactCta__primary:focus-visible {
  background: var(--color-main-dark);
  transform: translateY(-2px);
}
.m_contactCta__secondary {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-main);
  color: var(--color-main);
  font-size: 11px;
  font-weight: 800;
}

@media screen and (max-width: 620px) {
  .m_contactSection {
    padding-block: 60px;
  }
  .m_contactCta {
    padding: 50px 22px;
  }
  .m_contactCta__lead {
    line-height: 1.8;
  }
  .m_contactCta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  .m_contactCta__primary {
    width: 100%;
    min-width: 0;
    text-align: left;
  }
  .m_contactCta__secondary {
    align-self: center;
  }
}


/* =============================================================
   4. STATE (js_ / .is_)
   ============================================================= */
.is_hidden { display: none; }


/* =============================================================
   5. UTILITY (u_)
   ・u_col*：列幅%（クラス名が値の契約のため px/％直書き許容）
   ・レスポンシブBPはカンプ実測（Lg=1020 / Sm=620）に value-swap
   ============================================================= */

/* --- 列幅（PC） --- */
.u_col3  { width: 25%; }
.u_col4  { width: 33.333%; }
.u_col6  { width: 50%; }
.u_col12 { width: 100%; }

/* --- ≤1020：2列へ --- */
@media screen and (max-width: 1020px) {
  .u_resLgCol6  { width: 50%; }
  .u_resLgCol12 { width: 100%; }
}

/* --- ≤820：2列 or 1列へ --- */
@media screen and (max-width: 820px) {
  .u_resMdCol6  { width: 50%; }
  .u_resMdCol12 { width: 100%; }
}

/* --- ≤620：1列へ --- */
@media screen and (max-width: 620px) {
  .u_resSmCol12 { width: 100%; }
}

/* --- 視覚的に隠して支援技術にだけ渡す ---
   HTML 側（検索欄のラベル等）で使用しているが定義が欠けていたため追加。
   display:none / visibility:hidden と違い、読み上げ対象として残る。 */
.u_hide {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}


/* ---------- prefers-reduced-motion（全称は reset 同様の全体制御として例外許容）---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}