/* =============================================================
   single.css ｜ コンサルタント個別ページ（インソースコンサルティング）
   ・寸法・比率・状態はすべて【カンプ実測】（single/momose.html + その CSS）。
     design-locked を付した値は丸め・統合を禁止する。
   ・色・書体トークンは親ページ style.css の :root をそのまま使用。
     カンプ :root（--red/--ink/--navy/--line…）と親トークンは同値であることを
     確認済みのため、新規トークンは 1 つも起こさない。
   ・命名・BEM・a11y・floor 規律はスキル正準（＝親ページの支配的規約）に追従。
   ・本ファイルは style.css の「後」に読み込む前提。l_cont / l_grid / u_col* /
     m_eyebrow / m_btnPrimary / m_skipLink は親の定義を再利用（再定義しない）。
   ・記述順序: 1.Module(m_) → 2.レスポンシブ → 3.Utility(u_)
   ============================================================= */


/* =============================================================
   共通：アンカー逃げ幅
   host の共通ヘッダー（.m_gArea__wrap）は position:fixed / height:70px。
   ※ scroll-margin はレイアウトに影響しないため Block 外 margin 禁止の対象外。
   ============================================================= */
.m_profileDetail,
.m_profileTopic,
.m_profileContact {
  scroll-margin-top: 86px;
}


/* =============================================================
   m_breadcrumb（パンくず）
   カンプではヒーローの外（上）に置かれ、ヒーローの上罫線がその下に来る。
   ============================================================= */
.m_breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 66px; /* design-locked：カンプ実測 */
  color: var(--color-text-faint); /* a11y-adjusted：カンプ #75808c は白地 3.9:1 で AA 未達。親と同じ前例で置換 */
  font-size: 10px;
}
.m_breadcrumb__item {
  display: flex;
  align-items: center;
}
/* 区切り記号は装飾のため CSS 生成にする（読み上げに混入させない） */
.m_breadcrumb__item + .m_breadcrumb__item::before {
  content: "›";
  margin-inline: 12px;
}
.m_breadcrumb__link {
  transition: color var(--transition);
}
.m_breadcrumb__link:hover,
.m_breadcrumb__link:focus-visible {
  color: var(--color-main);
}
.m_breadcrumb__current {
  color: var(--color-text);
}


/* =============================================================
   m_profileHero（プロフィールヒーロー）
   ============================================================= */
.m_profileHero {
  position: relative;
  background: var(--color-reverse);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
/* 背景のあしらい：カンプは方眼グリッドだが、一覧ページ（m_hero）と揃える方針で
   薄赤の太リング＋細リングの2枚重ねにする（値は一覧ページ m_hero と同一）。 */
.m_profileHero::before {
  content: "";
  position: absolute;
  top: -330px;
  right: -70px;
  width: 610px;
  height: 610px;
  border: 86px solid var(--color-bk);
  border-radius: 50%;
}
.m_profileHero::after {
  content: "";
  position: absolute;
  bottom: -240px;
  left: 32%;
  width: 300px;
  height: 300px;
  border: 1px solid var(--color-main-a22);
  border-radius: 50%;
}
/* 左上の赤ライン：全幅ではなく幅 32% × 高さ 7px（design-locked） */
.m_profileHero__rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 32%;
  height: 7px;
  background: var(--color-main);
}
/* 写真／テキストの2カラム。12分割で割れない非対称比のため m_ 内部 grid。
   等分段組みではない（l_grid の再発明ではない）。 */
.m_profileHero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(350px, 0.78fr) minmax(0, 1.22fr); /* design-locked */
  align-items: center;
  gap: 84px;
  min-height: 560px;
  padding-block: 64px;
}

/* --- 写真：高さ固定＋薄赤のオフセット影（カンプ実測・丸め禁止） --- */
.m_profileHero__portrait {
  position: relative;
  height: 440px;
  background: var(--color-panel-face);
  box-shadow: 18px 18px 0 var(--color-bk); /* design-locked */
  overflow: hidden;
}
.m_profileHero__portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(transparent, var(--color-portraitScrim));
}
.m_profileHero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* カンプはトリミング上寄せ・彩度フィルタなし */
}
.m_profileHero__caption {
  position: absolute;
  bottom: 20px;
  left: 24px;
  z-index: 2;
  color: var(--color-reverse);
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

/* --- テキスト --- */
.m_profileHero__intro {
  padding-right: 40px;
}
.m_profileHero__role {
  color: var(--color-main);
  font-size: 11px;
  font-weight: 800;
}
.m_profileHero__name {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: clamp(48px, 6.78vw, 76px); /* design-locked：min/max はカンプ実測。fluid=76÷768×100（親と同じ変換） */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
.m_profileHero__roman {
  color: var(--color-text-faint); /* a11y-adjusted：カンプ #7b8795 は 3.7:1 で AA 未達 */
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.m_profileHero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m_profileHero__tag {
  padding: 7px 10px;
  background: var(--color-bk);
  border: 1px solid var(--color-tag-border);
  color: var(--color-tag-text); /* カンプ #8d001d と親トークン #8f0020 は判別不能差のためトークンを維持 */
  font-size: 10px;
  font-weight: 700;
}
/* ステートメント：游明朝 20px・左に赤の縦バー（カンプの主役要素・design-locked） */
.m_profileHero__statement {
  max-width: 620px;
  padding: 24px 0 24px 24px;
  border-left: 4px solid var(--color-main);
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.9;
}
.m_profileHero__cta {
  width: min(320px, 100%);
}
.m_profileHero__eyebrow + .m_profileHero__role {
  margin-top: 20px;
}
.m_profileHero__role + .m_profileHero__name {
  margin-top: 14px;
}
.m_profileHero__name + .m_profileHero__roman {
  margin-top: 9px;
}
.m_profileHero__roman + .m_profileHero__tags {
  margin-top: 28px;
}
.m_profileHero__tags + .m_profileHero__statement {
  margin-top: 34px;
}
.m_profileHero__statement + .m_profileHero__cta {
  margin-top: 32px;
}


/* =============================================================
   m_profileDetail（専門分野・略歴セクション）
   ============================================================= */
.m_profileDetail {
  background: var(--color-reverse);
  border-bottom: 1px solid var(--color-border);
  padding-block: 112px;
}
/* 固定幅 260px の索引カラムは 12分割で割れず l_grid では表現不能。
   等分段組みではない。 */
.m_profileDetail__grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr); /* design-locked */
  gap: 78px;
}
.m_profileDetail__index {
  position: sticky;
  /* カンプ実測は 32px だが、host の共通ヘッダー（.m_gArea__wrap）が position:fixed / 70px
     のため追従時に潜り込む。scroll-margin-top と同じ 86px に揃える（host 統合による調整）。 */
  top: 86px;
  align-self: start;
  padding-top: 18px;
  border-top: 5px solid var(--color-main);
}
.m_profileDetail__ttl {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: 29px; /* design-locked：カンプは可変でなく固定 29px */
  font-weight: 600;
  line-height: 1.65;
}
.m_profileDetail__content {
  min-width: 0;
}
.m_profileDetail__eyebrow + .m_profileDetail__ttl {
  margin-top: 18px;
}


/* =============================================================
   m_profileTopic（01〜04 の各トピック・繰返）
   トピック間の余白は Block 外 margin でなく自身の padding で持つ。
   カンプ：先頭は padding-top 4px、2つ目以降は 40px、下は一律 72px。
   ============================================================= */
.m_profileTopic {
  padding-block: 40px 72px;
  border-top: 1px solid var(--color-line);
}
/* 関連コンテンツのトピックだけ下余白を持たない＝セクション padding に委ねる */
.m_profileTopic--resource {
  padding-bottom: 0;
}
.m_profileTopic__heading {
  display: grid;
  grid-template-columns: 70px 1fr; /* design-locked */
  align-items: start;
  gap: 24px;
}
/* 番号は Georgia の大きな数字ではなく Arial 10px の赤ラベル（カンプ実測） */
.m_profileTopic__num {
  color: var(--color-main);
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.m_profileTopic__label {
  color: var(--color-text-faint); /* a11y-adjusted：カンプ #87909b は 3.1:1 で AA 未達 */
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
}
.m_profileTopic__ttl {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: 25px;
  font-weight: 600;
}
.m_profileTopic__label + .m_profileTopic__ttl {
  margin-top: 7px;
}

/* --- 01 専門テーマ：2列の罫線連結グリッド ---
   段組みは l_grid（ガターなし＝Modifier 非付与）が担う。
   1px 罫線連結の見た目は、外枠を __themeList、右下線を __themeItem が持って作る
   （親ページ m_serviceGrid / m_serviceCard と同じ手法）。 */
.m_profileTopic__heading + .m_profileTopic__themeList {
  margin-top: 36px;
}
.m_profileTopic__themeList {
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}
.m_profileTopic__themeItem {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92px;
  padding: 22px 26px 22px 52px; /* design-locked */
  background: var(--color-reverse);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}
/* 塗りつぶしでなくリング（枠線）の丸（カンプ実測） */
.m_profileTopic__themeItem::before {
  content: "";
  position: absolute;
  left: 26px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-main);
  border-radius: 50%;
}

/* --- 02 略歴：左 94px インデント（カンプ実測） --- */
.m_profileTopic__heading + .m_profileTopic__biography {
  margin-top: 36px;
}
.m_profileTopic__biography {
  padding-left: 94px;
}
.m_profileTopic__bioTxt {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 2.15;
}
.m_profileTopic__bioTxt + .m_profileTopic__bioTxt {
  margin-top: 20px;
}

/* --- 03 メッセージ：背景なし・左に赤の縦バー --- */
.m_profileTopic__heading + .m_profileTopic__quote {
  margin-top: 36px;
}
.m_profileTopic__quote {
  margin-left: 94px; /* design-locked：略歴と同じインデント。Block 内 Element のため許容 */
  padding: 5px 0 5px 28px;
  border-left: 4px solid var(--color-main);
}
.m_profileTopic__quoteTxt {
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 2.15;
}

/* --- 04 関連コンテンツ --- */
.m_profileTopic__heading + .m_profileTopic__resourceLead {
  margin-top: 26px;
}
.m_profileTopic__resourceLead {
  padding-left: 94px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.9;
}
.m_profileTopic__resourceLead + .m_profileTopic__resourceGrid {
  margin-top: 34px;
}
/* 2列の罫線連結グリッド（罫線色は薄赤系＝親トークン --color-tag-border を流用） */
.m_profileTopic__resourceGrid {
  border-top: 1px solid var(--color-tag-border);
  border-left: 1px solid var(--color-tag-border);
}


/* =============================================================
   m_resourceCard（関連セミナーカード・繰返）
   hover / focus で全面が赤に反転する（カンプ実測）。
   ============================================================= */
.m_resourceCard {
  width: 100%;
  border-right: 1px solid var(--color-tag-border);
  border-bottom: 1px solid var(--color-tag-border);
  background: var(--color-reverse);
  transition: background var(--transition), color var(--transition);
}
.m_resourceCard:hover,
.m_resourceCard:focus-within {
  background: var(--color-main);
}
.m_resourceCard__link {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 248px;
  padding: 26px;
  color: inherit;
}
.m_resourceCard__num {
  color: var(--color-text-faint); /* a11y-adjusted：カンプ #9da5af は 2.4:1 で AA 未達 */
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.m_resourceCard__kind {
  align-self: flex-start;
  padding: 5px 8px;
  border: 1px solid currentColor;
  color: var(--color-main);
  font-size: 9px;
  font-weight: 800;
}
.m_resourceCard__ttl {
  padding-right: 30px; /* design-locked：右下の矢印を避ける逃げ（カンプ実測） */
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
}
.m_resourceCard__icon {
  position: absolute;
  bottom: 24px;
  right: 25px;
  color: var(--color-main);
  font-size: 18px;
}
.m_resourceCard__num + .m_resourceCard__kind {
  margin-top: 38px;
}
.m_resourceCard__kind + .m_resourceCard__ttl {
  margin-top: 16px;
}
/* 反転時の文字色（親 m_serviceCard と同じ手法） */
.m_resourceCard:hover .m_resourceCard__num,
.m_resourceCard:focus-within .m_resourceCard__num,
.m_resourceCard:hover .m_resourceCard__kind,
.m_resourceCard:focus-within .m_resourceCard__kind,
.m_resourceCard:hover .m_resourceCard__ttl,
.m_resourceCard:focus-within .m_resourceCard__ttl,
.m_resourceCard:hover .m_resourceCard__icon,
.m_resourceCard:focus-within .m_resourceCard__icon {
  color: var(--color-reverse);
}


/* =============================================================
   m_profileContact（お問合せ：左見出し／右アクションの2カラム）
   カンプ profile-contact に準拠。親の中央寄せ m_contactCta とは別レイアウト。
   段組みは l_grid（ガターなし）が担い、80px の間隔は左右 Element の
   padding 40px + 40px で作る（パネルの内側で負マージンを出さないため）。
   ============================================================= */
.m_profileContact {
  background: var(--color-reverse);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: 84px;
}
.m_profileContact__panel {
  padding: 54px 64px; /* design-locked */
  background: linear-gradient(105deg, var(--color-reverse), var(--color-bk));
  border: 1px solid var(--color-main);
}
.m_profileContact__copy {
  padding-right: 40px;
}
.m_profileContact__action {
  padding-left: 40px;
}
.m_profileContact__ttl {
  color: var(--color-heading);
  font-family: var(--font-mincho);
  font-size: clamp(32px, 4.1vw, 46px); /* design-locked：min/max はカンプ実測。fluid=46÷768×100 */
  font-weight: 600;
  line-height: 1.5;
}
.m_profileContact__lead {
  color: var(--color-text-muted);
  font-size: 13px;
}
.m_profileContact__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding-inline: 20px;
  background: var(--color-main);
  color: var(--color-reverse);
  font-size: 12px;
  font-weight: 800;
  transition: background var(--transition);
}
.m_profileContact__btn:hover,
.m_profileContact__btn:focus-visible {
  background: var(--color-main-dark);
}
.m_profileContact__eyebrow + .m_profileContact__ttl {
  margin-top: 14px;
}
.m_profileContact__lead + .m_profileContact__btn {
  margin-top: 22px;
}


/* =============================================================
   m_profilePager（前後のコンサルタント）
   ============================================================= */
.m_profilePager {
  background: var(--color-reverse);
  padding-block: 58px 84px;
}
/* 中央のボタンだけ内容幅の3分割は 12分割で割れないため m_ 内部 grid。
   等分段組みではない。 */
.m_profilePager__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.m_profilePager__prev,
.m_profilePager__next {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: color var(--transition);
}
.m_profilePager__next {
  align-items: flex-end;
  text-align: right;
}
.m_profilePager__prev:hover,
.m_profilePager__prev:focus-visible,
.m_profilePager__next:hover,
.m_profilePager__next:focus-visible {
  color: var(--color-main);
}
.m_profilePager__label {
  color: var(--color-main); /* カンプ実測：ラベルは赤 */
  font-family: var(--font-en);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.17em;
}
.m_profilePager__name {
  font-family: var(--font-mincho);
  font-size: 19px;
  font-weight: 600;
}
.m_profilePager__all {
  padding: 12px 18px;
  border: 1px solid var(--color-main);
  color: var(--color-main);
  font-size: 10px;
  font-weight: 800;
  transition: background var(--transition), color var(--transition);
}
.m_profilePager__all:hover,
.m_profilePager__all:focus-visible {
  background: var(--color-main);
  color: var(--color-reverse);
}


/* =============================================================
   レスポンシブ（BP はカンプ実測＝親と同一：Lg=1020 / Md=820 / Sm=620）
   ============================================================= */
@media screen and (max-width: 1020px) {
  .m_profileHero__inner {
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 40px;
  }
}

@media screen and (max-width: 820px) {
  .m_profileHero__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .m_profileHero__portrait {
    width: min(460px, 100%);
    margin-inline: auto;
  }
  .m_profileHero__intro {
    padding-right: 0;
    padding-bottom: 28px;
  }
  .m_profileDetail__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .m_profileDetail__index {
    position: static;
  }
  .m_profileTopic__biography,
  .m_profileTopic__resourceLead {
    padding-left: 0;
  }
  .m_profileTopic__quote {
    margin-left: 0;
  }
  .m_profileContact__copy {
    padding-right: 0;
    padding-bottom: 32px;
  }
  .m_profileContact__action {
    padding-left: 0;
  }
}

@media screen and (max-width: 620px) {
  .m_profileHero__inner {
    padding-block: 44px;
  }
  .m_profileHero__portrait {
    height: 420px;
    box-shadow: 10px 10px 0 var(--color-bk);
  }
  .m_profileHero__name {
    font-size: 48px;
  }
  .m_profileHero__statement {
    font-size: 17px;
  }
  .m_profileDetail {
    padding-block: 78px;
  }
  .m_profileDetail__ttl br {
    display: none;
  }
  .m_profileTopic__heading {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
  .m_profileTopic__themeItem {
    min-height: 78px;
    padding: 18px 18px 18px 44px;
  }
  .m_profileTopic__themeItem::before {
    left: 20px;
  }
  .m_profileTopic__resourceLead + .m_profileTopic__resourceGrid {
    margin-top: 36px;
  }
  .m_resourceCard__link {
    min-height: 220px;
  }
  .m_profileContact {
    padding-block: 60px;
  }
  .m_profileContact__panel {
    padding: 40px 24px;
  }
  /* 一覧へ戻るボタンを2段目に回して中央寄せ（カンプ実測） */
  .m_profilePager__inner {
    grid-template-columns: 1fr 1fr;
    gap: 34px 20px;
  }
  .m_profilePager__all {
    grid-area: 2 / 1 / auto / -1;
    justify-self: center;
  }
  .m_profilePager__name {
    font-size: 16px;
  }
}


/* =============================================================
   UTILITY (u_)
   ・u_ は全ページ共通レイヤーのため、本ファイルには置かない。
     本ページで使う .u_resMdCol12（≤820 で1列）と .u_hide（視覚的に隠す）は
     style.css の UTILITY セクションに追加済み。
   ============================================================= */