@charset "UTF-8";

/* =================================================================
   1. Base
   ================================================================= */

/* ---------- resetCss ---------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: baseline;
}
*{
  box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }
ol, ul { list-style: none; }
address { font-style: normal; }
a { text-decoration: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
input {
  margin: 0;
  background-color: transparent;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  line-height: inherit;
}

/* ---------- variable ----------
   トークン名は DESIGN.md §2〜§6 の正準名。値はカンプ（ICO プロトタイプ）実測で上書きしている。
   design-locked: 値の出所は全てカンプ CSS の :root と各セレクタ実測。丸め・独自調整は禁止。
   ---------------------------------------- */
:root {
  /* color（カンプ実測） */
  --color-main:          #E5002D; /* 公式ロゴ内の赤。塗り・罫線・アイコン用。白文字 4.81:1 = AA */
  --color-mainText:      #D4002A; /* 赤い「文字」用。--color-main は淡色地（#f1efeb）で 4.19:1 と AA 未達になるため、
                                     文字だけ僅かに濃くする。淡色地 4.77:1 / 白地 5.48:1 = AA。
                                     塗りと隣接しても色差は視認できない範囲に収めている */
  --color-mainDark:      #C50027; /* main の hover。白地 6.17:1 = AA */
  --color-mainTint:      #fff5f7; /* タイル hover 背景。main を極薄に振った値 */
  --color-text:          #1b2028; /* カンプ --ink */
  --color-textSub:       #646b75; /* カンプ --muted。白地 5.38:1 = AA */
  --color-text-muted:    #767676; /* カンプの #bbb / #b6b8bb 系（白地 1.92:1 = AA不適合）の置換先。白地 4.54:1 = AA */
  --color-textLabel:     #555555; /* カンプ .profile-table th（項目名）。白地 7.46:1 = AA */
  --color-textDeep:      #41464d; /* カンプ ヒーロー本文。白地 9.51:1 = AAA */
  --color-reverse:       #FFFFFF;
  --color-bk:            #f7f6f4; /* カンプ --warm。帯背景 */
  --color-bk-sub:        #f1efeb; /* カンプ hero の地色 */
  --color-bk-contact:    #f8f7f5; /* カンプ お問合せ帯。--warm より僅かに明るい別値 */
  --color-bk-teaser:     #f3f2ef; /* カンプ 採用ティザーの地色 */
  --color-bk-subHero:    #f0efec; /* カンプ 下層ヒーローの地色。--color-bk-sub(#f1efeb) とは別値なので1本化しない */
  --color-border:        #e9e7e4; /* カンプ --line */
  --color-borderWarm:    #ddd9d4; /* warm 帯の上に乗る罫線（カンプ実測） */
  --color-borderBar:     #cfd0d1; /* スライダー進捗バーの地（カンプ実測・非テキスト） */
  --color-borderFaint:   #efefee; /* カンプ .topic-list の下罫線。--color-border より僅かに淡い別値 */
  --color-bk-avatar:     linear-gradient(145deg, #f4f0eb, #e5ddd5); /* 写真が無い人のイニシャル表示の地。グラデを1トークンに収めて色トークンの増殖を防ぐ */
  --color-avatarText:    #7f7264; /* 同・文字色。カンプ #d8cfc6 は 1.16:1 で大テキスト 3:1 未達のため置換。
                                     グラデの明側 4.12:1 / 暗側 3.48:1 で、どちらの端でも AA（大テキスト 3:1）を満たす */
  /* 黒地セクション（recruit「企業を変える仕事。」）専用。明るい地では使わない。
     --color-main(#E5002D) は黒地で 3.4:1 しかなく小さい文字に使えないため、カンプが明るい赤を当てている。 */
  --color-bk-dark:       #1b2028; /* カンプ --ink */
  --color-textOnDark:    #bfc3c9; /* 黒地の本文。カンプの #b7bbc2 / #bfc3c9 を1本に統合 */
  --color-mainOnDark:    #ff6a6f; /* 黒地の英字ラベル（カンプ実測） */
  --color-borderOnDark:  rgba(255, 255, 255, 0.196); /* カンプ #ffffff32 */
  --color-headerBg:      rgba(255, 255, 255, 0.96); /* カンプ #fffffff5 */
  --color-panelBg:       rgba(255, 255, 255, 0.95); /* スライダー操作パネルの地 */
  --color-scrim:         rgba(0, 0, 0, 0.6);        /* 写真の上に文字を置くときのスクリム */
  --shadow-panel:        0 5px 20px rgba(0, 0, 0, 0.07);
  /* PICK UP の赤いカードの影。カンプ実測 #9b111a25。
     ブランド赤（--color-main / --color-mainDark）とは別の暗い赤で、この影のためだけの色 */
  --shadow-featureDoc:   0 16px 38px rgba(155, 17, 26, .15);
  /* 写真の上にコピーを載せる白ベール。カンプは置き場所ごとに別の値を持っている
     （#fffffff7 / #fffffffa / #ffffffeb …）が、見た目の差が無いので実装では1本に揃える。
     SP は横幅が狭くコピーが写真の全面にかかるため、右端を透明にせず薄く残す別形状。 */
  --veil-photoCopy:      linear-gradient(90deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .92) 42%, rgba(255, 255, 255, 0) 80%);
  --veil-photoCopySp:    linear-gradient(90deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .86) 62%, rgba(255, 255, 255, .19));

  /* font
     --font-latin の Inter はカンプが指定しているが Web フォントを読み込んでいない。
     実表示は Helvetica Neue / Arial にフォールバックする（カンプの見え方と一致）。 */
  --font-base:  "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, "Noto Sans JP", system-ui, sans-serif;
  --font-latin: Inter, "Helvetica Neue", Arial, sans-serif;

  /* font-size
     design-locked: ユーザー指定により、カンプ実測（8〜13px 主体）から**スケール全体を底上げ**している。
     一次引き上げ（ベース 14px・下限 11px）に対し、二次引き上げで **ベース 16px・下限 13px**。
     「文字が小さすぎる」への対応で、小さい段を強めに・大きい段を +2px 上げ、
     eyebrow < 本文 < 見出し の階層は維持する（下限に一本化して階層を潰す案は不採用）。
     clamp の fluid は max ÷ 768 × 100。PC / SP で寸法差のない段はプレーンな px。 */
  --fz-caption: 13px;                       /* カンプ 8px / 9px（一次 11px） */
  --fz-sm:      14px;                       /* カンプ 10px / 11px（一次 12px） */
  --fz-main:    16px;                       /* カンプ 12px / 13px（一次 14px）＝ body の既定 */
  --fz-md:      18px;                       /* カンプ 14px / 15px（一次 16px） */
  --fz-lg:      21px;                       /* カンプ 16px〜18px（一次 19px） */
  --fz-xl:      clamp(24px, 3.39vw, 26px);  /* カンプ 21px / 23px（SP 20px） */
  --fz-2xl:     clamp(26px, 4.17vw, 32px);  /* カンプ 27px / 29px（SP 22px） */
  --fz-3xl:     clamp(32px, 4.69vw, 36px);  /* カンプ 32px（SP 27px） */
  --fz-4xl:     clamp(34px, 5.21vw, 40px);  /* カンプ 36px（SP 30px） */
  --fz-leadTtl: clamp(29px, 4.30vw, 33px);  /* カンプ .company-lead h2 29px（SP 25px）。2xl と 3xl のどちらとも一致しない */
  --fz-stat:    clamp(44px, 7.81vw, 60px);  /* カンプ 人数の大数字 58px。既存最大 5xl(44px) から 18px 差で流用不可 */
  --fz-avatar:  98px;                       /* カンプ カードのイニシャル 96px */
  --fz-avatarLg: 140px;                     /* カンプ プロフィールヒーローのイニシャル 138px */
  --fz-subTtl:  clamp(33px, 5.08vw, 39px);  /* カンプ 下層ヒーロー h1 35px（SP 29px）。3xl と 4xl の中間で既存に該当なし */
  --fz-display: clamp(46px, 7.03vw, 54px);  /* カンプ recruit ヒーロー h1 52px（SP 44px）。
                                               --fz-5xl は SP 下限 30px が実測由来の制約で流用できない */
  --fz-5xl:     clamp(30px, 5.73vw, 44px);  /* カンプ hero 39px（SP 27px）。
                                               design-locked: **SP 下限 30px はスケールの段ではなく実測で決めた制約**。
                                               m_mainSlider は高さ固定（SP 430px）で、32px にすると 360px 幅で
                                               「企業の未来を変える。」が折り返して h1 が3行になり、コピー全体が
                                               ヒーローから 16px はみ出す。二次引き上げでもここだけ 30px に据え置く。
                                               ヒーローの高さかコピーを変えない限り上げられない。 */
  --fz-num:     clamp(24px, 3.91vw, 30px);  /* カンプ 実績数値 28px（SP 22px） */
  --fz-dayLg:   clamp(37px, 5.86vw, 45px);  /* カンプ セミナー登壇日の日付 43px（SP 35px）。--fz-day(31px) では 12px 縮むため新設 */
  --fz-day:     31px;                       /* カンプ 登壇日の日付 */

  /* spacing（カンプ実測） */
  --space-xs:      8px;
  --space-sm:      16px;
  --space-md:      24px;
  --space-lg:      32px;
  --space-xl:      40px;
  --space-fSm:     clamp(12px, 2.08vw, 16px);
  --space-fMd:     clamp(18px, 3.13vw, 24px);
  --space-fLg:     clamp(24px, 4.17vw, 32px);
  --space-fXl:     clamp(30px, 5.21vw, 40px);
  --space-sectionT:  clamp(74px, 13.28vw, 102px); /* カンプ .section padding-top */
  --space-sectionB:  clamp(70px, 12.76vw, 98px);  /* カンプ .section padding-bottom */
  --space-band:      clamp(55px, 10.42vw, 80px);  /* カンプ 帯 padding-block（80px / 75px を統合） */
  --space-fHeroGap:  clamp(17px, 4.43vw, 34px);   /* カンプ ヒーロー上の間隙 */
  --space-subSection: clamp(66px, 11.46vw, 88px); /* カンプ .subpage-section padding-block（88px / 66px） */
  --space-fSubHeroGap: clamp(17px, 3.78vw, 29px); /* カンプ 下層ヒーロー上の間隙（29px / 17px） */
  --space-fTeaserGap: clamp(68px, 12.37vw, 95px); /* カンプ 採用ティザー下の間隙 */
  --space-headGap:   clamp(26px, 4.95vw, 38px);   /* セクション見出しと本体の間隙 */

  /* 写真の表示比率（＝入稿ルール）
     design-locked: 枠は「高さ固定」ではなく「比率固定」にする。
     高さを固定すると枠の比率が画面幅で変わり、同じ写真が PC と SP で違う切り取りになる
     （実測：事例サムネが PC 1.93:1 → SP 3.4:1 になり人物の頭が消えた）。
     比率を固定すれば切り取り位置は画面幅に依存しない。
     入稿写真をこの比率で用意すればトリミングは発生しない。 */
  --ratio-photo:    16 / 9; /* 事例サムネ等のコンテンツ写真 */
  --ratio-portrait: 1 / 1;  /* 人物写真（顔が中央に来る前提） */
  --ratio-band:     4 / 3;  /* 大判写真（セミナーカード・帯） */

  /* layout（カンプ実測） */
  --w-content:     1060px; /* カンプ --content */
  --w-header:      1240px; /* カンプ .header-inner max-width */
  --gutter-page:   32px;   /* カンプ .wrap calc(100% - 64px) の片側 */
  --gutter-pageSp: 19px;   /* カンプ SP .wrap calc(100% - 38px) の片側 */

  /* transition（DESIGN.md §5-2） */
  --transition: 0.2s;

  /* breakpoint（@media では数値直書き）
     design-locked: 規約既定は 768 / 599 だが、カンプが 1120 / 800 / 420 で組まれているため値を差し替えた */
  --bp-lg: 1120px;
  --bp-md: 800px;
  --bp-sm: 420px;
}

/* ---------- base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 191px; /* 追従ヘッダーの実測高。無いとアンカー先がヘッダー裏に隠れる。
                                文字サイズを変えたら必ず再実測する（二次引き上げで 188px → 191px） */
}

@media screen and (max-width: 1120px) {
  html {
    scroll-padding-top: 183px;
  }
}

@media screen and (max-width: 800px) {
  html {
    scroll-padding-top: 68px;
  }
}
body {
  color: var(--color-text);
  background: var(--color-reverse);
  font-family: var(--font-base);
  font-size: var(--fz-main);
  font-feature-settings: "palt";
  letter-spacing: .025em;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}
html.is_scrollLock {
  overflow: hidden;
}
/* hidden 属性を確実に効かせる。l_grid__item など display を持つ要素に付けても隠れるようにする
   （JS のフィルタは class ではなく hidden 属性で出し分ける＝支援技術からも消える） */
[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =================================================================
   2. Layout (l_)
   ================================================================= */

/* ---------- l_cont / l_cont__inner ----------
   design-locked: 規約既定の l_cont { min-width: 1220px } は採用しない。
   カンプが完全流体（width: min(1060px, 100% - 64px)）で組まれているため。 */
.l_cont {
  margin-inline: auto;
}
.l_cont__inner {
  width: min(var(--w-content), calc(100% - var(--gutter-page) * 2));
  margin-inline: auto;
}
.l_cont__inner--wide {
  width: min(var(--w-header), 100%);
}

@media screen and (max-width: 800px) {
  .l_cont__inner {
    width: calc(100% - var(--gutter-pageSp) * 2);
  }
  .l_cont__inner--wide {
    width: 100%; /* ヘッダーは SP でも全幅。左右余白は m_globalHeader 側の padding が担う */
  }
}

/* ---------- l_grid ----------
   段組みの器。ガターは l_grid の上左マイナスマージン ＋ l_grid__item の上左パディング。
   gap は使わない（u_col* の % 幅と合算されてカラム落ちするため）。 */
.l_grid {
  display: flex;
  flex-wrap: wrap;
}
.l_grid__item {
  display: flex;
}
.l_grid__inner {
  width: 100%;
}

/* ガターの値＝隣接カラム間の隙間。カンプ実測の gap をそのまま入れる。
   canon（DESIGN.md §7-29）の Sm/Md/Lg とは値が違う（カンプ実測で差し替えている）。 */
.l_grid--gutterXs {
  margin: -8px 0 0 -8px; /* カンプ .approach-steps gap 8px */
}
.l_grid--gutterXs > .l_grid__item {
  padding: 8px 0 0 8px;
}

.l_grid--gutterSm {
  margin: -12px 0 0 -12px; /* カンプ .portrait-row gap 12px */
}
.l_grid--gutterSm > .l_grid__item {
  padding: 12px 0 0 12px;
}

.l_grid--gutterMd {
  margin: -24px 0 0 -24px; /* カンプ .case-grid gap 24px */
}
.l_grid--gutterMd > .l_grid__item {
  padding: 24px 0 0 24px;
}

.l_grid--gutterLg {
  margin: -47px 0 0 -47px; /* カンプ .news-panel の右余白 47px */
}
.l_grid--gutterLg > .l_grid__item {
  padding: 47px 0 0 47px;
}

.l_grid--gutterXl {
  margin: -60px 0 0 -60px; /* カンプ .feature-inner gap 60px */
}
.l_grid--gutterXl > .l_grid__item {
  padding: 60px 0 0 60px;
}

/* 縦横で値が違う唯一のガター。カンプ .topic-list gap: 9px 16px（2列のトピック一覧）。
   Xs(8px) に丸めず実測値のまま持つ。 */
.l_grid--gutterXsWide {
  margin: -9px 0 0 -16px;
}
.l_grid--gutterXsWide > .l_grid__item {
  padding: 9px 0 0 16px;
}


/* =================================================================
   3a. Module（構造系・他モジュールの土台）
   ================================================================= */

/* ---------- m_arrowIco ----------
   カンプは矢印を inline SVG で置いているが、同一形状が20箇所以上に出るため
   疑似要素で実装する。装飾なので DOM には現れない（aria-hidden 漏れも起きない）。
   色は親から降らせず --main Modifier で指定する（親依存セレクタを作らないため）。 */
.m_arrowIco {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 19px;
  height: 8px;
}
.m_arrowIco::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
}
.m_arrowIco::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  width: 6px;
  height: 6px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}
.m_arrowIco--emphasis {
  color: var(--color-mainText);
}
.m_arrowIco--prev {
  transform: rotate(180deg);
}

/* ---------- m_coverImg ----------
   領域を覆う写真。カンプは background-image で組んでいるが、
   寸法予約（CLS 対策）と alt を持てる img に置き換えている。 */
.m_coverImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* 入稿ルール（16:9）より縦長の写真を上寄せで逃がす Modifier。
   比率どおりに入稿された写真ではトリミングが起きないのでこの指定は効かない。
   現行の事例写真3枚は 4:3 / 5:4 / 2.2:1 で未対応のため、人物の頭を残す用途で使う
   （TOP の m_caseCard__img と同じ回避策）。 */
.m_coverImg--top {
  object-position: 50% 25%;
}


/* =================================================================
   3b. Module（共通汎用系）
   ================================================================= */
/* ---------- m_skipLink ---------- */
.m_skipLink {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 0;
  z-index: 1000;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-main);
  color: var(--color-reverse);
  font-size: var(--fz-sm);
  font-weight: 700;
}
.m_skipLink:focus {
  inset-block-start: 0;
}

/* ---------- m_eyebrow ----------
   セクション上の英字ラベル（赤い短い罫線＋英字）。カンプ .eyebrow
   下方向の間隙は、このラベルを内包する Block のエレメント側（Mixes）が持つ。 */
.m_eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.2;
}
.m_eyebrow::before {
  flex-shrink: 0;
  width: 24px;
  height: 1px;
  background: currentColor;
  content: "";
}
/* 黒地に乗せる版。--color-mainText は黒地で 3.4:1 しかなく AA を満たさない。 */
.m_eyebrow--onDark {
  color: var(--color-mainOnDark);
}

/* ---------- m_ctaBtn ---------- */
.m_ctaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 17px;
  font-size: var(--fz-main);
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}
.m_ctaBtn--primary {
  background: var(--color-main);
  color: var(--color-reverse);
}
.m_ctaBtn--primary:hover {
  background: var(--color-mainDark);
}

@media screen and (max-width: 800px) {
  .m_ctaBtn {
    min-height: 43px;
    padding: 0 13px;
  }
}

/* ---------- m_textLink ---------- */
.m_textLink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fz-main);
  font-weight: 700;
  transition: color var(--transition);
}
.m_textLink:hover {
  color: var(--color-mainText);
}

/* ---------- m_sectionHead ----------
   セクション見出しの器。左に見出し群、右にテキストリンクが並ぶ（カンプ .section-heading）。
   見出し下の間隙はこの Block でなく、親セクションの __heading エレメントが持つ。 */
.m_sectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
}
.m_sectionHead__body {}
.m_sectionHead__eyebrow {
  margin-bottom: 15px;
}
.m_sectionHead__ttl {
  margin-bottom: 7px;
  font-size: var(--fz-2xl);
  letter-spacing: .01em;
  line-height: 1.5;
}
.m_sectionHead__sub {
  max-width: 700px;
  color: var(--color-textSub);
  font-size: var(--fz-main);
  line-height: 1.9;
}
.m_sectionHead__footer {
  padding-bottom: 4px;
  white-space: nowrap;
}
/* 黒地に乗せる版。__sub の --color-textSub は黒地で読めないため差し替える。
   Block 自身のエレメントだけを対象にしており、親カスケードは作らない。 */
.m_sectionHead--onDark .m_sectionHead__sub {
  color: var(--color-textOnDark);
}

@media screen and (max-width: 800px) {
  .m_sectionHead {
    display: block;
  }
  .m_sectionHead__footer {
    margin-top: 14px;
  }
}


/* ---------- m_globalHeader ----------
   design-locked: カンプのヘッダー（ロゴ＋ナビ7項目＋CTA の1行）を意図的に上書きしている。
   インソースグループのヘッダー（赤帯より上）を踏襲した3行構成が施主指定。
   上段＝グループ共通のユーティリティ行（グループロゴ・実績表示を含む）、
   中段＝ICO ロゴ＋実績＋CTA、下段＝ICO のグローバルナビ（カンプの会社情報・採用情報は上段へ移動）。
   カンプに戻す判断をする場合は、この3行をまとめて差し替えること。 */
.m_globalHeader {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--color-headerBg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  width: min(var(--w-header), 100%);
}
.m_globalHeader__funcs {
  display: flex;
  align-items: center;
  /* サブナビと検索窓をまとめて右端へ寄せる。左は空ける */
  justify-content: flex-end;
  gap: var(--space-md);
  padding: 7px 34px 0;
}
.m_globalHeader__main {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 34px 11px;
}
.m_globalHeader__logo {}
.m_globalHeader__infos {
  /* ロゴのすぐ右に実績を置き、残りの余白をここで吸収して m_askNav を右端へ送る。
     ロゴ側で auto を持たせると、実績が非表示になる 1120px 以下（下の MQ）で詰め方が変わる。 */
  margin-inline-end: auto;
}
.m_globalHeader__nav {
  padding: 0 34px;
  border-top: 1px solid var(--color-border);
}
.m_globalHeader__hamburger {}

@media screen and (max-width: 1120px) {
  .m_globalHeader__funcs,
  .m_globalHeader__main,
  .m_globalHeader__nav {
    padding-inline: 24px;
  }
  /* この幅から実績（m_gInfos）が消えるので、__infos の auto も一緒に消える。
     余白の吸収をロゴ側へ移してお問合せ群を右端に留める */
  .m_globalHeader__logo {
    margin-inline-end: auto;
  }
}

@media screen and (max-width: 800px) {
  .m_globalHeader__funcs,
  .m_globalHeader__nav {
    display: none;
  }
  .m_globalHeader__main {
    gap: var(--space-sm);
    padding: 10px var(--gutter-pageSp);
  }
}

/* ---------- m_headerLogo ----------
   ICO 公式ロゴ（insource ＋ Consulting EXPERT の一体ロゴ）。
   design-locked: カンプは「insource ロゴ＋英字サブをテキストで組む」構成だったが、
   公式ロゴが両方を含むため1枚に統合した。比率は 283.5:119.1（= 2.38:1）で固定。 */
.m_headerLogo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}
.m_headerLogo__img {
  width: 150px;
  height: 63px;
  object-fit: contain;
  object-position: left center;
}

@media screen and (max-width: 1120px) {
  .m_headerLogo__img {
    width: 132px;
    height: 55px;
  }
}

@media screen and (max-width: 800px) {
  .m_headerLogo__img {
    width: 112px;
    height: 47px;
  }
}

/* ---------- m_gFuncNav ----------
   上段のユーティリティリンク群＋インソースグループロゴ。 */
.m_gFuncNav__list {
  display: flex;
  align-items: center;
  gap: 23px;
}
.m_gFuncNav__target {
  white-space: nowrap;
  font-size: var(--fz-sm);
  font-weight: 700;
  transition: color var(--transition);
}
.m_gFuncNav__target:hover,
.m_gFuncNav__target.is_current {
  color: var(--color-mainText);
}
.m_gFuncNav__groupImg {
  width: 100px;
  height: 20px;
}

@media screen and (max-width: 1120px) {
  .m_gFuncNav__list {
    gap: 15px;
  }
  .m_gFuncNav__target {
    font-size: var(--fz-caption);
  }
}

/* ---------- m_gSearch ----------
   Google のサイト内検索。sitesearch を ICO ドメインに向けている。 */
.m_gSearch__inner {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
}
.m_gSearch__field {
  width: 220px;
  height: 32px;
  padding: 0 10px;
  border: none;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fz-sm);
}
.m_gSearch__field::placeholder {
  color: var(--color-text-muted);
}
.m_gSearch__btn {
  width: 46px;
  height: 32px;
  background: var(--color-main);
  color: var(--color-reverse);
  font-size: var(--fz-caption);
  font-weight: 700;
  transition: background var(--transition);
}
.m_gSearch__btn:hover {
  background: var(--color-mainDark);
}

@media screen and (max-width: 1120px) {
  .m_gSearch__field {
    width: 150px;
  }
}

/* ---------- m_gInfos ----------
   インソースグループの実績表示。数値は静的直書き（インソース本体は JS で後入れしている）。
   follow-legacy: 更新時は手修正。WordPress 化のタイミングで動的化を検討する。 */
.m_gInfos {
  /* 等分段組みではなく、nowrap のコンテンツ幅で2列を寄せる表示。
     u_col* の % 幅では成立しないため l_grid を使わない（coding_class.md §5）。 */
  display: flex;
  gap: var(--space-md);
}
.m_gInfos__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.m_gInfos__item {
  font-size: var(--fz-caption);
  line-height: 1.5;
  white-space: nowrap;
}
.m_gInfos__em {
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-md);
  font-weight: 700;
}

@media screen and (max-width: 1120px) {
  .m_gInfos {
    display: none;
  }
}

/* ---------- m_askNav ----------
   お問合せ・商談予約・お電話。カンプの赤 CTA を踏襲し、末尾のみ塗り。 */
.m_askNav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.m_askNav__item {}
.m_askNav__target {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 12px;
  white-space: nowrap;
  font-size: var(--fz-sm);
  font-weight: 700;
  transition: color var(--transition), background var(--transition);
}
.m_askNav__target:hover {
  color: var(--color-mainText);
}
.m_askNav__item--ask .m_askNav__target {
  background: var(--color-main);
  color: var(--color-reverse);
}
.m_askNav__item--ask .m_askNav__target:hover {
  background: var(--color-mainDark);
  color: var(--color-reverse);
}

@media screen and (max-width: 800px) {
  .m_askNav__item {
    display: none;
  }
  .m_askNav__item--ask {
    display: block;
  }
  .m_askNav__target {
    min-height: 38px;
    padding: 0 10px;
    font-size: var(--fz-caption);
  }
}

/* ---------- m_gnavList ----------
   下段のグローバルナビの器。インソースは赤帯だが、カンプの静かなトーンを守るため白地のまま。
   帯の地色と上罫線は親の m_globalHeader__nav が持つので、赤帯にする場合はそちらを変える。 */
.m_gnavList__list {
  display: flex;
  align-items: center;
  gap: 28px;
}
.m_gnavList__item {}

@media screen and (max-width: 1120px) {
  .m_gnavList__list {
    gap: 20px;
  }
}

/* ---------- m_gnav ---------- */
.m_gnav__link {
  display: block;
  padding: 10px 0;
  white-space: nowrap;
  font-size: var(--fz-main);
  font-weight: 700;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.m_gnav__link:hover,
.m_gnav__link.is_current {
  color: var(--color-mainText);
  border-bottom-color: var(--color-main);
}

/* ---------- m_drawer ----------
   SP のドロワー。ハンバーガーと aria-controls="globalNav" で連携する。 */
.m_drawer {
  display: none;
}
.m_drawer__list {
  border-top: 1px solid var(--color-border);
}
.m_drawer__item {}
.m_drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter-pageSp);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fz-main);
  font-weight: 700;
}

@media screen and (max-width: 800px) {
  .m_drawer.is_open {
    display: block;
    max-height: calc(100dvh - 68px); /* ヘッダー実測高を引く。短い縦画面で下端の項目に届かなくなるため */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------- m_hamburger ---------- */
.m_hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
}
.m_hamburger__line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}
.m_hamburger.is_open .m_hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.m_hamburger.is_open .m_hamburger__line:nth-child(2) {
  opacity: 0;
}
.m_hamburger.is_open .m_hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media screen and (max-width: 800px) {
  .m_hamburger {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m_hamburger__line {
    transition: none;
  }
}

/* ---------- m_contactBand ---------- */
.m_contactBand {
  padding-block: 52px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bk-contact);
}
.m_contactBand__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.m_contactBand__body {}
.m_contactBand__eyebrow {
  margin-bottom: 14px;
}
.m_contactBand__ttl {
  margin-bottom: 7px;
  font-size: var(--fz-xl);
}
.m_contactBand__txt {
  color: var(--color-textSub);
  font-size: var(--fz-sm);
}
.m_contactBand__footer {
  min-width: 174px;
}

@media screen and (max-width: 800px) {
  .m_contactBand__inner {
    display: block;
  }
  .m_contactBand__footer {
    margin-top: 20px;
  }
}

/* ---------- m_footer ---------- */
.m_footer {
  padding-top: 43px;
}
.m_footer__main {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.m_footer__address {
  margin-top: 15px;
  color: var(--color-textSub);
  font-size: var(--fz-caption);
  line-height: 1.9;
}
.m_footer__tel {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: var(--font-latin);
  font-size: var(--fz-md);
  font-weight: 700;
  letter-spacing: .03em;
}
.m_footer__nav {}
.m_footer__copy {
  margin-top: 34px;
  padding-block: 17px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  letter-spacing: .07em;
}

@media screen and (max-width: 800px) {
  .m_footer__main {
    display: block;
  }
  .m_footer__nav {
    margin-top: 27px;
  }
}

/* ---------- m_footerNav ---------- */
.m_footerNav {
  display: flex;
  gap: 54px;
}
.m_footerNav__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m_footerNav__item {}
.m_footerNav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fz-sm);
  transition: color var(--transition);
}
.m_footerNav__link:hover {
  color: var(--color-mainText);
}

@media screen and (max-width: 800px) {
  .m_footerNav {
    justify-content: space-between;
    gap: 14px;
  }
}

@media screen and (max-width: 420px) {
  .m_footerNav {
    flex-wrap: wrap;
    gap: 20px;
  }
}


/* ---------- m_breadcrumb ----------
   カンプに無い要素。下層ページの JSON-LD は BreadcrumbList が必須で、
   ミラー原則によりその名称を可視 HTML にも出す必要があるため追加している。
   下層8ページで共用する。 */
.m_breadcrumb {
  padding-block: 12px 0;
}
.m_breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--color-textSub);
  font-size: var(--fz-caption);
}
.m_breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.m_breadcrumb__item + .m_breadcrumb__item::before {
  color: var(--color-text-muted);
  content: "/";
}
.m_breadcrumb__item--current {
  color: var(--color-text);
}
.m_breadcrumb__link {
  transition: color var(--transition);
}
.m_breadcrumb__link:hover {
  color: var(--color-mainText);
}

/* ---------- m_subHero ----------
   下層ページ共通のヒーロー。写真の上に白のグラデーションを重ね、左にコピーを置く。
   段組みではなく「重ね」なので l_ では表現できず、内部で position を持つ。
   design-locked: 高さ固定は意図（コピーを重ねるため高さが要る・意図的なトリミング前提の背景写真）。
   m_mainSlider / m_recruitTeaser と同じ扱いで、比率固定ルール（--ratio-*）の対象外。 */
.m_subHero {
  position: relative;
  height: 285px;
  overflow: hidden;
  background: var(--color-bk-subHero);
}
.m_subHero::after {
  position: absolute;
  inset: 0;
  background: var(--veil-photoCopy);
  content: "";
}
.m_subHero__photo {
  position: absolute;
  inset: 0;
}
.m_subHero__copy {
  position: relative;
  z-index: 1;
  max-width: 570px;
  padding: 76px 0 0 51px;
}
.m_subHero__eyebrow {
  margin-bottom: 16px;
}
.m_subHero__ttl {
  margin-bottom: 9px;
  font-size: var(--fz-subTtl);
  line-height: 1.4;
}
.m_subHero__txt {
  color: var(--color-textSub);
  line-height: 1.9;
}
.m_subHero__em {
  color: var(--color-mainText);
}
.m_subHero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 23px;
}
/* 見出しが2行でアクションを持つ、背の高い版（consultants）。
   高さ・コピー幅・被膜の濃さがカンプで別値なので Modifier で差し替える。 */
.m_subHero--wide {
  height: 440px;
}
.m_subHero--wide::after {
  background: var(--veil-photoCopy);
}
.m_subHero--wide .m_subHero__copy {
  max-width: 610px;
  padding: 85px 0 0 56px;
}
/* 大きな見出し1本で見せる版（recruit）。リード文もアクションも持たない。 */
.m_subHero--display {
  height: 410px;
}
.m_subHero--display .m_subHero__copy {
  padding-top: 100px;
}
.m_subHero--display .m_subHero__ttl {
  font-size: var(--fz-display);
  line-height: 1.3;
}
/* 見出しの長さが読めない版（single-services。ACF 入稿のサービス名がそのまま入る）。
   素の m_subHero は height 固定＋overflow:hidden なので、4行を超える見出しが
   下端で切れてしまう。ここだけ下限だけ固定して伸びるようにする。
   高さ固定の意図（写真の上にコピーを重ねる）は min-height で保たれる。 */
.m_subHero--auto {
  height: auto;
  min-height: 285px;
}
.m_subHero--auto .m_subHero__copy {
  /* 上余白は他ページと同じ（base の 76px / SP 65px）。伸びたときだけ下端に余白が要る */
  padding-bottom: 56px;
}
.m_subHero--auto .m_subHero__ttl {
  /* ここの見出しは「ページ名」ではなく ACF 入稿の「サービス名」で、長さが読めない。
     既定の --fz-subTtl（39px）だと 570px のコピー幅で1文字だけ折り返す崩れが出るため1段下げる
     （2026-08-27 施主指定） */
  font-size: var(--fz-2xl);
}
.m_subHero__sub {
  font-size: var(--fz-xl);
}

@media screen and (max-width: 800px) {
  .m_subHero {
    /* SP は height ではなく min-height で持つ。
       写真は position:absolute + inset:0 なので、箱が伸びても写真は追従して覆う。
       文字サイズを上げるたびに実測して height を上げ直す運用は破綻するため、
       「カンプの高さを下限として、収まらなければ伸びる」形にしている。
       カンプ 245px → 二次引き上げ後の実測に合わせて 275px を下限にした。 */
    height: auto;
    min-height: 275px;
  }
  .m_subHero__copy {
    padding: 65px 18px 0;
  }
  .m_subHero__actions {
    gap: 13px;
  }
  .m_subHero--wide {
    /* カンプ 408px。同じく min-height（375px 幅で 450px・360px 幅では中身なりに伸びる） */
    min-height: 450px;
  }
  .m_subHero--wide .m_subHero__copy {
    padding: 79px 17px 0;
  }
  .m_subHero--display {
    /* カンプ 350px。base と同じく min-height で持つ（中身なりに伸びる） */
    min-height: 350px;
  }
  .m_subHero--display .m_subHero__copy {
    padding-top: 94px;
  }
}

@media screen and (max-width: 420px) {
  .m_subHero--wide {
    min-height: 470px;
  }
  .m_subHero__actions {
    gap: 12px;
  }
}

/* ---------- m_anchorNav ----------
   ページ内の節へ飛ぶ枠線チップの列。固有幅のチップが折り返すだけで等分段組みではないため
   l_grid ではなく flex-wrap で持つ（grid-template-columns は使わない）。
   カレント状態はカンプに定義が無いので実装していない。 */
.m_anchorNav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m_anchorNav__link {
  display: block;
  padding: 10px 13px;
  border: 1px solid var(--color-border);
  font-size: var(--fz-sm);
  transition: border-color var(--transition), color var(--transition);
}
.m_anchorNav__link:hover {
  border-color: var(--color-main);
  color: var(--color-mainText);
}

/* ---------- m_subpageCta ----------
   節の末尾に置く相談導線。下層8ページで共用する。 */
.m_subpageCta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34px;
  background: var(--color-bk);
}
.m_subpageCta__body {}
.m_subpageCta__ttl {
  margin-bottom: 7px;
  font-size: var(--fz-lg);
  line-height: 1.6;
}
.m_subpageCta__txt {
  color: var(--color-textSub);
  font-size: var(--fz-sm);
}
.m_subpageCta__footer {
  flex-shrink: 0;
}

@media screen and (max-width: 800px) {
  .m_subpageCta {
    display: block;
    padding: 23px;
  }
  .m_subpageCta__footer {
    margin-top: 16px;
  }
}


/* ---------- m_profileTable ----------
   項目名（th）と内容（td）が縦に並ぶ定義表。会社概要・プロフィール等で使う。
   段組みではなく表なので l_grid の対象外（見出しセルと本文セルの対応が意味を持つ）。 */
.m_profileTable {
  width: 100%;
}
.m_profileTable__row {}
.m_profileTable__th,
.m_profileTable__td {
  padding: 15px 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fz-main);
  line-height: 1.9;
  text-align: left;
  vertical-align: top;
}
.m_profileTable__th {
  width: 170px;
  color: var(--color-textLabel);
}

@media screen and (max-width: 800px) {
  .m_profileTable__th,
  .m_profileTable__td {
    padding: 12px 5px;
  }
  .m_profileTable__th {
    width: 110px;
  }
}

/* ---------- m_filterList ----------
   絞り込みボタンの列。固有幅のボタンが折り返すだけで等分段組みではないため
   l_grid ではなく flex-wrap で持つ（m_anchorNav と同型）。
   選択状態は JS が is_current と aria-pressed の両方を切り替える。 */
.m_filterList__list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.m_filterList__item {}
.m_filterList__btn {
  min-height: 33px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fz-caption);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.m_filterList__btn:hover,
.m_filterList__btn.is_current {
  border-color: var(--color-main);
  color: var(--color-mainText);
}
.m_filterList__btn.is_current {
  background: var(--color-mainTint);
}

/* ---------- m_profileHero ----------
   人物ページのヒーロー。左に写真、右にプロフィールの2列で、段組みは内側の l_grid が持つ。
   m_subHero（写真の上に文字を重ねる1枚もの）とは別構造なので Modifier ではなく別 Block。 */
.m_profileHero {
  background: var(--color-bk);
}
.m_profileHero__photo {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: var(--color-bk-sub);
}
.m_profileHero__avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-bk-avatar);
  color: var(--color-avatarText);
  font-size: var(--fz-avatarLg);
  font-weight: 700;
}
.m_profileHero__copy {
  flex-direction: column;
  justify-content: center;
  padding: 47px 51px;
}
.m_profileHero__role {
  margin-top: 25px;
  color: var(--color-textSub);
  font-size: var(--fz-caption);
}
.m_profileHero__name {
  margin-top: 11px;
  font-size: var(--fz-4xl);
}
.m_profileHero__nameEn {
  display: block;
  margin-top: 5px;
  color: var(--color-textSub);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 500;
  letter-spacing: .09em;
}
.m_profileHero__tags {
  margin-top: 12px;
}
.m_profileHero__txt {
  margin-top: 19px;
  color: var(--color-textSub);
  line-height: 2;
}
.m_profileHero__footer {
  margin-top: 18px;
}

@media screen and (max-width: 800px) {
  .m_profileHero__photo {
    min-height: 350px;
  }
  .m_profileHero__copy {
    padding: 34px 24px 38px;
  }
  .m_profileHero__role {
    margin-top: 19px;
  }
}

@media screen and (max-width: 420px) {
  .m_profileHero__photo {
    min-height: 290px;
  }
}

/* ---------- m_profilePager ----------
   前後送り。`1fr auto 1fr` は「左に前・中央に一覧・右に次」の固定スロットで、
   件数不定の一覧ではないため l_grid の対象外（m_ 内 grid の例外）。 */
.m_profilePager__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding-block: 26px 77px;
}
.m_profilePager__prev,
.m_profilePager__next {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.m_profilePager__next {
  text-align: right;
}
.m_profilePager__label {
  color: var(--color-textSub);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 600;
  letter-spacing: .08em;
}
.m_profilePager__name {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: var(--fz-sm);
  font-weight: 700;
  transition: color var(--transition);
}
/* PREV は左寄せ。カンプは一覧先頭（前が無い）の1枚しか無く、この状態はカンプ外 */
.m_profilePager__prev .m_profilePager__name {
  justify-content: flex-start;
}
.m_profilePager__prev:hover .m_profilePager__name,
.m_profilePager__next:hover .m_profilePager__name {
  color: var(--color-mainText);
}
.m_profilePager__back {
  color: var(--color-mainText);
  font-size: var(--fz-sm);
  font-weight: 700;
}

@media screen and (max-width: 800px) {
  .m_profilePager__inner {
    gap: 10px;
    padding-block: 23px 58px;
  }
}

@media screen and (max-width: 420px) {
  .m_profilePager__inner {
    grid-template-columns: 1fr 1fr;
  }
  .m_profilePager__back {
    grid-area: 1 / 1 / auto / -1;
    padding-bottom: 10px;
    text-align: center;
  }
}

/* ---------- m_stepCol ----------
   番号＋見出し＋説明の1段。3等分の段組みは l_grid（ガター無し）が持ち、
   段の区切りはこの Block の罫線（--divided）が担う。
   PC は左罫線・SP は上罫線に切り替わるので :first-child の打ち消しが要らない。
   consultants の支援スタイルと seminar の「選ばれる理由」で共用している。 */
.m_stepCol {
  flex-direction: column;
  width: 100%;
  padding: 25px 28px 25px 0;
}
.m_stepCol--divided {
  padding-left: 28px;
  border-left: 1px solid var(--color-borderWarm);
}
.m_stepCol__index {
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
}
.m_stepCol__ttl {
  margin-top: 15px;
  font-size: var(--fz-md);
  line-height: 1.6;
}
.m_stepCol__txt {
  margin-top: 8px;
  color: var(--color-textSub);
  font-size: var(--fz-caption);
  line-height: 1.9;
}
/* 罫線で区切る代わりに、warm 地の箱として独立させる skin（download の「資料を次のアクションへ」）。
   中身の構造は同じなので Block を分けず Modifier で持つ。 */
.m_stepCol--boxed {
  min-height: 190px;
  padding: 23px 21px;
  border-top: 2px solid var(--color-main);
  background: var(--color-bk);
}
/* 黒地に乗せる版（recruit「企業を変える仕事。」）。区切りの罫線も明るい色に差し替える。 */
.m_stepCol--onDark {
  padding: 30px 29px 31px 0;
}
.m_stepCol--onDark.m_stepCol--divided {
  padding-left: 29px;
  border-left-color: var(--color-borderOnDark);
}
.m_stepCol--onDark .m_stepCol__index {
  color: var(--color-mainOnDark);
  letter-spacing: .08em;
}
.m_stepCol--onDark .m_stepCol__txt {
  color: var(--color-textOnDark);
  line-height: 2;
}
/* 段と段の間に赤い菱形のマーカーを置く版（recruit「提案して終わらない。」）。
   最後の段には付けないので :last-child の打ち消しが要らない。 */
.m_stepCol--step {
  position: relative;
}
.m_stepCol--step::after {
  position: absolute;
  inset-block-start: 46px;
  inset-inline-end: -7px;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-block-start: 1px solid var(--color-main);
  border-inline-end: 1px solid var(--color-main);
  background: var(--color-reverse);
  content: "";
  transform: rotate(45deg);
}

@media screen and (max-width: 800px) {
  .m_stepCol {
    padding: 20px 0;
  }
  .m_stepCol--boxed {
    min-height: 0;
    padding: 23px 21px;
  }
  .m_stepCol--onDark,
  .m_stepCol--onDark.m_stepCol--divided {
    padding: 23px 0;
    border-left: none;
  }
  .m_stepCol--onDark.m_stepCol--divided {
    border-top: 1px solid var(--color-borderOnDark);
  }
  .m_stepCol--step::after {
    display: none;
  }
  .m_stepCol--divided {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--color-borderWarm);
  }
}

/* ---------- m_tagList ----------
   warm 地の小さなタグを折り返して並べる。固有幅チップの折返しで等分段組みではないため
   l_grid ではなく flex-wrap で持つ。
   margin-top:auto は「カードの中で下端に寄せる」ため（親が flex-direction:column の想定）。
   consultants のカード・プロフィール、seminar のカードで共用。 */
.m_tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
}
.m_tagList--flush {
  margin-top: 0;
  padding-top: 0;
}
.m_tagList__item {
  padding: 6px 8px;
  background: var(--color-bk);
  font-size: var(--fz-caption);
}
.m_tagList--onWarm .m_tagList__item {
  background: var(--color-reverse);
}
/* 線囲みのタグ（archive-services.php の支援領域）。地を塗ったチップだと
   カードの中で説明文より目立ってしまうため、枠だけにする（2026-08-28 施主指定）。
   font-size 11px は確定事項#4「最低13px」の**唯一の例外**。施主が値まで指定した
   （枠付きの分類ラベルで、本文として読む文字ではないという判断）。
   トークンを作らず直値にしてあるのは、例外を1箇所に閉じ込めて広がらせないため。 */
.m_tagList--outlined .m_tagList__item {
  padding: 2px 4px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: none;
  font-size: 11px;
  letter-spacing: 0;
}

/* ---------- m_docCard ----------
   カード全体がリンクの枠線カード。カテゴリ＋通番 → 見出し → 説明 →（タグ）→ リンク。
   seminar のテーマカードと download の資料カードで共用している
   （元は m_seminarCard。download で同型が出たため汎用名にして 3b へ移した）。 */
.m_docCard {
  position: relative;
  /* カンプ（.seminar-card / .download-card）は display:flex。これが抜けていたため
     flex-direction が無効化され、m_tagList の margin-top:auto（下端寄せ）が
     効いていなかった。2026-08-28 にカンプどおりへ修正 */
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
  transition: border-color var(--transition), transform var(--transition);
}
.m_docCard:hover {
  border-color: var(--color-main);
  transform: translateY(-2px);
}
.m_docCard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.m_docCard--noLink::after {
  /* 「詳しく見る」が無い分の高さを空けて、同じ行のカードとタグの位置を揃える。
     空の content だと行ボックスが作られず高さ 0 になるので nbsp を入れている。
     間隙は margin ではなく padding で作る。Block ルート（--noLink）に margin を付けると
     inspect_floor.py の「Block 外 margin」に当たるうえ、実際これは Block の内側の余白。
     18px と font-size は __link と同値。__link 側を変えたらここも直すこと
     （高さ自体は line-height から自動で追従する） */
  content: "\00a0";
  padding-top: 9px;
  font-size: var(--fz-sm);
}
.m_docCard--noLink:hover {
  /* 個別ページを持たない（本文が空で 404 になる）サービスは div で出すので、
     hover の反応だけ消す。見た目はリンク付きと同じ（本番と同じ扱い）。
     「詳しく見る」が無いことが押せない印になる */
  border-color: var(--color-border);
  transform: none;
}
.m_docCard__cat {
  color: var(--color-mainText);
  font-size: var(--fz-caption);
  font-weight: 700;
}
.m_docCard__no {
  color: var(--color-text-muted); /* カンプ #b6b8bb は白地 1.90:1 で AA 未達のため置換 */
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 500;
}
.m_docCard__ttl {
  font-size: var(--fz-main);
  line-height: 1.6;
}
.m_docCard__txt {
  /* 概要は入稿次第で長さがまちまち。5行で打ち切り、以降は省略記号にする。
     カード高さが揃わないと下のタグ・リンクの位置がカードごとにばらつくため */
  display: -webkit-box;
  overflow: hidden;
  margin-top: 8px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  color: var(--color-textSub);
  font-size: var(--fz-sm);
  line-height: 1.8;
}
.m_docCard__tags {}
.m_docCard__link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  color: var(--color-mainText);
  font-size: var(--fz-caption);
  font-weight: 700;
}

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

@media screen and (max-width: 420px) {
  .m_docCard {
    min-height: 225px;
  }
}

/* =================================================================
   3c. Module（ページ固有系）
   ================================================================= */
/* ---------- m_notFound ----------
   404 ページの器。カンプに無いページなので、中身は共通の m_subpageCta を借りている。 */
.m_notFound {
  padding-block: var(--space-subSection);
}
.m_notFound__inner {}

/* ---------- m_policy（個人情報保護方針の本文）----------
   カンプに無いページ。旧テーマの本文マークアップを新命名へ移し替えたもので、
   余白・字下げの値は旧 css/privacy_policy.css の実測を引き継いでいる。
   条文なので節の間隔だけで階層を見せ、装飾は足していない。 */
.m_policy {
  padding-block: var(--space-subSection);
}
/* 条文は m_policy を2つ並べて章を分けている。境目で padding が二重にならないようにする */
.m_policy + .m_policy {
  padding-block-start: 0;
}
.m_policy__inner {}
.m_policy__heading {
  margin-bottom: var(--space-headGap);
}
.m_policy__sec + .m_policy__sec {
  margin-top: 50px;
}
.m_policy__ttl {
  margin-bottom: 20px;
  font-size: var(--fz-lg);
}
/* 節（h3）の中の小見出し。h3 とのサイズ差が 3px しかないので、上の余白で階層を見せる */
.m_policy__subTtl {
  margin-bottom: 10px;
  font-size: var(--fz-md);
}
.m_policy__block + .m_policy__subTtl {
  margin-top: 32px;
}
.m_policy__body {
  word-wrap: break-word;
}
/* 節の中をさらに小分けにしたときの間隔（旧 .m_policy_sec_inr + .m_policy_sec_inr） */
.m_policy__body + .m_policy__body {
  margin-top: 40px;
}
/* 条文は段落・リスト・注記が混在するので、種類を問わず同じ間隔を空ける。
   直下の子すべてに m_policy__block を付けて隣接セレクタで管理する */
.m_policy__block + .m_policy__block {
  margin-top: 20px;
}
.m_policy__listBlock {}
.m_policy__linkBlock {}
.m_policy__list {
  counter-reset: number;
}
.m_policy__item {
  position: relative;
  padding-left: 1em;
}
.m_policy__item::before {
  position: absolute;
  left: 0;
}
.m_policy__item--num {
  counter-increment: number;
}
.m_policy__item--num::before {
  content: "" counter(number) ".";
}
.m_policy__item--dot::before {
  content: "・";
}
.m_policy__item--ast::before {
  content: "※";
}
.m_policy__note {
  padding: 20px;
  background: var(--color-bk);
  word-wrap: break-word;
}
.m_policy__indent {
  padding-left: 1em;
  text-indent: -1em;
}
.m_policy__linkBlock--indent {
  padding-left: 2.5em;
  text-indent: -2.5em;
}
/* 署名。節の先頭に置かれることがあるので、下側の余白は自分で持つ（旧 .m_policy_author_sec p） */
.m_policy__author {
  margin-bottom: 20px;
  text-align: right;
  font-size: var(--fz-sm);
}

@media screen and (max-width: 800px) {
  .m_policy__sec + .m_policy__sec {
    margin-top: 36px;
  }
}

/* ---------- m_mainSlider ----------
   カンプは Swiper を使わず fade 切替＋ドットが進捗バーを兼ねる独自スライダー。
   構成をカンプに合わせるため m_slider（Swiper 前提）は使わず新規 Block とする。 */
.m_mainSlider {
  position: relative;
  height: 440px;
  background: var(--color-bk-sub);
}
.m_mainSlider__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.m_mainSlider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .75s;
}
.m_mainSlider__slide.is_active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}
.m_mainSlider__slide::after {
  position: absolute;
  inset: 0;
  background: var(--veil-photoCopy);
  content: "";
}
.m_mainSlider__photo {
  position: absolute;
  inset: 0;
  transform: scale(1.015);
  transition: transform 7s;
}
.m_mainSlider__slide.is_active .m_mainSlider__photo {
  transform: scale(1.055);
}
.m_mainSlider__copy {
  position: relative;
  z-index: 1;
  max-width: 590px;
  padding: 73px 0 0 58px;
}
.m_mainSlider__eyebrow {
  margin-bottom: 19px;
}
.m_mainSlider__ttl {
  margin-bottom: 13px;
  font-size: var(--fz-5xl);
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.38;
}
.m_mainSlider__em {
  color: var(--color-mainText);
}
.m_mainSlider__txt {
  color: var(--color-textDeep);
  font-size: var(--fz-main);
  line-height: 2.03;
}
.m_mainSlider__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
}
.m_mainSlider__caption {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 18px;
  z-index: 1;
  padding: 3px 8px;
  /* カンプは text-shadow だけの白文字だが、背景が写真なのでコントラストを保証できない
     （明るい空が来ると読めなくなる）。α0.6 の黒を敷くと、どんな写真でも白文字 5.7:1 以上になる。 */
  background: var(--color-scrim);
  color: var(--color-reverse);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 600;
  letter-spacing: .12em;
}

@media screen and (max-width: 800px) {
  .m_mainSlider {
    /* design-locked: カンプは 430px。文字サイズの二次引き上げ（本文 14→16px）でコピーが縦に伸び、
       360px 幅で 453px・375px 幅で 437px となり 430px から溢れて CTA が切れたため実測で 470px に上げた。
       高さ固定はヒーローの意図（コピーを重ねるため）なので比率固定には変えない。
       文字サイズを変えたら必ずここを再実測する。 */
    height: 470px;
  }
  .m_mainSlider__slide::after {
      background: var(--veil-photoCopySp);
  }
  .m_mainSlider__copy {
    padding: 71px 19px 0;
  }
  .m_mainSlider__actions {
    flex-wrap: wrap;
    gap: 14px;
  }
  .m_mainSlider__caption {
    display: none; /* カンプは SP でも表示だが操作パネルと重なって読めないため隠す（装飾の英字コピー） */
  }
}

@media (prefers-reduced-motion: reduce) {
  .m_mainSlider__slide,
  .m_mainSlider__photo {
    transition: none;
  }
}

/* ---------- m_sliderCtrl ---------- */
.m_sliderCtrl {
  position: absolute;
  inset-block-end: 37px;
  inset-inline-end: 23px;
  z-index: 4;
  display: flex;
  align-items: center;
  background: var(--color-panelBg);
  box-shadow: var(--shadow-panel);
}
.m_sliderCtrl__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 37px;
  color: var(--color-text);
}
.m_sliderCtrl__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 37px;
}
.m_sliderCtrl__dot {
  width: 34px;
  height: 37px;
}
.m_sliderCtrl__bar {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-borderBar);
  overflow: hidden;
}
.m_sliderCtrl__dot.is_active .m_sliderCtrl__bar::after {
  position: absolute;
  inset: 0;
  background: var(--color-main);
  content: "";
  transform-origin: 0;
  animation: sliderProgress 6.5s linear;
}
.m_sliderCtrl__play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 37px;
  border-left: 1px solid var(--color-border);
}
.m_sliderCtrl__playIco {
  width: 8px;
  height: 10px;
  border-left: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
}
.m_sliderCtrl.is_paused .m_sliderCtrl__bar::after {
  animation-play-state: paused;
}
.m_sliderCtrl.is_paused .m_sliderCtrl__playIco {
  width: 0;
  height: 0;
  border-block-start: 5px solid transparent;
  border-block-end: 5px solid transparent;
  border-left: 8px solid var(--color-text);
  border-right: none;
}

@keyframes sliderProgress {
  0%  { transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

@media screen and (max-width: 800px) {
  .m_sliderCtrl {
    inset-block-end: 10px;
    inset-inline-end: 10px;
  }
  .m_sliderCtrl__dot {
    width: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m_sliderCtrl__dot.is_active .m_sliderCtrl__bar::after {
    animation: none;
  }
}

/* ---------- m_newsSeminar ----------
   最新情報と登壇予定を横に並べる器。下罫線はコンテンツ幅で引く。 */
.m_newsSeminar {
  border-bottom: 1px solid var(--color-border);
}

/* ---------- m_newsList ----------
   1行が「日付・カテゴリ・見出し・矢印」の4カラム。12分割では表現できない固定ラベル構成のため
   l_grid ではなく Block 内の grid で組む（coding_class.md §5 が許容する形）。
   カラム幅はカンプ実測（78px 65px 1fr 22px）を文字サイズ引き上げ分だけ補正している。 */
.m_newsList {
  padding: 44px 0 39px;
}
.m_newsList__heading {
  margin-bottom: 16px;
}
.m_newsList__eyebrow {
  margin-bottom: 6px;
}
.m_newsList__ttl {
  font-size: var(--fz-lg);
}
.m_newsList__list {
  border-top: 1px solid var(--color-border);
}
.m_newsList__item {}
.m_newsList__row {
  display: grid;
  grid-template-columns: 86px 72px 1fr 24px;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}
.m_newsList__row:hover {
  color: var(--color-mainText);
}
.m_newsList__date {
  color: var(--color-text-muted);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 500;
}
.m_newsList__cat {
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .07em;
}
.m_newsList__txt {
  font-size: var(--fz-sm);
  font-weight: 600;
  line-height: 1.65;
}

@media screen and (max-width: 800px) {
  .m_newsList {
    padding: 38px 0 31px;
  }
  .m_newsList__row {
    grid-template-columns: 80px 66px 1fr 20px;
    gap: 7px;
  }
}

/* ---------- m_appearanceList ----------
   登壇予定。1件が「日付ブロック（固定幅）＋詳細」の2カラム。こちらも固定ラベル構成。 */
.m_appearanceList {
  padding: 35px 31px 30px;
  background: var(--color-bk);
}
.m_appearanceList__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 14px;
}
.m_appearanceList__eyebrow {
  margin-bottom: 9px;
}
.m_appearanceList__ttl {
  font-size: var(--fz-lg);
}
.m_appearanceList__more {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 33px;
  height: 33px;
  background: var(--color-reverse);
}
.m_appearanceList__list {
  border-top: 1px solid var(--color-borderWarm);
}
.m_appearanceList__item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--color-borderWarm);
  transition: color var(--transition);
}
.m_appearanceList__item:hover {
  color: var(--color-mainText);
}
.m_appearanceList__date {
  padding-right: 13px;
  border-right: 1px solid var(--color-borderWarm);
  font-family: var(--font-latin);
  text-align: center;
}
.m_appearanceList__month {
  display: block;
  margin-bottom: 3px;
  color: var(--color-mainText);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .08em;
}
.m_appearanceList__day {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fz-day);
  line-height: 1;
}
.m_appearanceList__week {
  display: block;
  color: var(--color-textSub); /* 暖色地（#f7f6f4）では --color-text-muted が 4.21:1 で AA 未達のため濃い方を使う */
  font-size: var(--fz-caption);
}
.m_appearanceList__format {
  display: block;
  margin-bottom: 5px;
  color: var(--color-mainText);
  font-size: var(--fz-caption);
  font-weight: 700;
}
.m_appearanceList__subTtl {
  margin-bottom: 5px;
  font-size: var(--fz-sm);
  line-height: 1.55;
}
.m_appearanceList__speaker {
  color: var(--color-textSub);
  font-size: var(--fz-caption);
}

@media screen and (max-width: 800px) {
  .m_appearanceList {
    padding: 31px var(--gutter-pageSp);
  }
}

/* ---------- m_proof ----------
   実績帯。リード文1つ＋数値3つの非等分4カラム（1.3fr 1fr 1fr 1.1fr）。
   同型要素を N 列で並べる段組みではなく、種類の違う要素を1行に対向配置する Block 内部の構造のため
   l_grid を使わない（coding_class.md §5 の「表現できない」に該当・理由を残すこと）。
   fr で組むのは、リード文の折り返しに応じて数値列が追従する必要があるため。 */
.m_proof {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  align-items: center;
  min-height: 129px;
  border-bottom: 1px solid var(--color-border);
}
.m_proof__lead {
  font-size: var(--fz-md);
  font-weight: 700;
  line-height: 1.8;
}
.m_proof__item {
  padding-left: 27px;
  border-left: 1px solid var(--color-border);
}
.m_proof__num {
  display: block;
  font-family: var(--font-latin);
  font-size: var(--fz-num);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.m_proof__em {
  color: var(--color-mainText);
}
.m_proof__label {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-textSub);
  font-size: var(--fz-caption);
}

@media screen and (max-width: 800px) {
  .m_proof {
    grid-template-columns: 1fr 1fr;
    gap: 17px;
    min-height: 0;
    padding: 26px 0;
  }
  .m_proof__lead {
    font-size: var(--fz-main);
  }
  .m_proof__item {
    padding-left: 15px;
  }
}

/* ---------- m_service（支援領域セクション） ----------
   design-locked: 節間余白は l_section を使わず、各セクション Block の padding-block が持つ。
   l_section--primary は「__item 同士の隣接セレクタで一律の margin-top」方式だが、
   カンプは節ごとに間隙が違う（背景なしの節 102/98px・背景ありの帯 80px）ため一律にできない。
   さらに背景を持つ帯（m_approach / m_people / m_contactBand）は自身の padding が
   視覚的な間隙を兼ねており、隣接 margin を重ねると二重化する。
   この判断は 9 ページ共通。値を変える場合は --space-sectionT / --space-sectionB を差し替える。 */
.m_service {
  padding-block: var(--space-sectionT) var(--space-sectionB);
}
.m_service__heading {
  margin-bottom: var(--space-headGap);
}
.m_service__grid {
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

/* ---------- m_serviceTile ---------- */
.m_serviceTile {
  position: relative;
  min-height: 230px;
  padding: 24px 23px 46px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.m_serviceTile:hover {
  background: var(--color-mainTint);
}
.m_serviceTile__index {
  display: block;
  margin-bottom: 23px;
  color: var(--color-textSub); /* hover 時の地色（--color-mainTint #fff5f7）では --color-text-muted が 4.25:1 で AA 未達 */
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 500;
}
.m_serviceTile__en {
  display: block;
  margin-bottom: 9px;
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .08em;
}
.m_serviceTile__ttl {
  margin-bottom: 9px;
  font-size: var(--fz-md);
  line-height: 1.55;
}
.m_serviceTile__txt {
  max-width: 255px;
  color: var(--color-textSub);
  font-size: var(--fz-sm);
  line-height: 1.85;
}
.m_serviceTile__arrow {
  position: absolute;
  inset-block-end: 19px;
  inset-inline-end: 21px;
}

@media screen and (max-width: 800px) {
  .m_serviceTile {
    min-height: 213px;
    padding: 19px 13px 42px;
  }
  .m_serviceTile__index {
    margin-bottom: 14px;
  }
}

/* ---------- m_approach（OUR APPROACH 帯） ---------- */
.m_approach {
  /* 帯の内寸。背景を持つのでこの padding が節間の間隙も兼ねる（m_service のコメント参照） */
  padding-block: var(--space-band);
  background: var(--color-bk);
}
.m_approach__photo {
  position: relative;
  align-self: center; /* flex の stretch を切って比率を成立させる。カンプも上下中央で置いている */
  aspect-ratio: var(--ratio-band);
  overflow: hidden;
}
.m_approach__copy {
  padding-right: 12px;
}
.m_approach__eyebrow {
  margin-bottom: 21px;
}
.m_approach__ttl {
  margin-bottom: 17px;
  font-size: var(--fz-3xl);
  line-height: 1.48;
}
.m_approach__em {
  color: var(--color-mainText);
}
.m_approach__txt {
  margin-bottom: 22px;
  color: var(--color-textSub);
  font-size: var(--fz-main);
  line-height: 2.1;
}
.m_approach__steps {
  margin-bottom: 25px;
}
.m_approach__step {
  padding: 10px 9px;
  border-left: 2px solid var(--color-main);
  background: var(--color-reverse);
  font-size: var(--fz-sm);
}

@media screen and (max-width: 800px) {
  .m_approach__copy {
    padding-right: 0;
  }
}

/* ---------- m_case（導入事例セクション） ---------- */
.m_case {
  padding-block: var(--space-sectionT) var(--space-sectionB); /* 節間余白の設計判断は m_service を参照 */
}
.m_case__heading {
  margin-bottom: var(--space-headGap);
}

/* ---------- m_caseCard ---------- */
.m_caseCard {
  display: block;
  background: var(--color-reverse);
  transition: transform var(--transition);
}
.m_caseCard:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .m_caseCard {
    transition: none;
  }
  .m_caseCard:hover {
    transform: none;
  }
}
.m_caseCard__imgWrap {
  position: relative;
  aspect-ratio: var(--ratio-photo);
  overflow: hidden;
}
.m_caseCard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 入稿ルール（16:9）に沿った写真ならトリミングは発生しないので、この指定は効かない。
     現行3枚は 4:3 / 5:4 / 2.2:1 で未対応のため、上寄せにして人物の頭を残している。 */
  object-position: 50% 25%;
}
.m_caseCard__industry {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding: 8px 11px;
  background: var(--color-reverse);
  font-size: var(--fz-caption);
}
.m_caseCard__copy {
  position: relative;
  padding: 17px 24px 17px 0;
}
.m_caseCard__tag {
  display: block;
  margin-bottom: 9px;
  color: var(--color-mainText);
  font-size: var(--fz-caption);
}
.m_caseCard__ttl {
  margin-bottom: 10px;
  font-size: var(--fz-md);
  line-height: 1.7;
}
.m_caseCard__client {
  color: var(--color-textSub);
  font-size: var(--fz-sm);
}
.m_caseCard__arrow {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-end: 2px;
}

/* ---------- m_people（コンサルタント帯） ---------- */
.m_people {
  /* 帯の内寸。背景を持つのでこの padding が節間の間隙も兼ねる（m_service のコメント参照） */
  padding-block: var(--space-band);
  background: var(--color-bk);
}
.m_people__copy {}
.m_people__eyebrow {
  margin-bottom: 21px;
}
.m_people__ttl {
  margin-bottom: 17px;
  font-size: var(--fz-2xl);
  line-height: 1.48;
}
.m_people__txt {
  color: var(--color-textSub);
  font-size: var(--fz-main);
  line-height: 2.1;
}
.m_people__footer {
  margin-top: 15px;
}

/* ---------- m_portraitCard ---------- */
.m_portraitCard {
  display: block;
}
.m_portraitCard__img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-portrait);
  object-fit: cover;
  object-position: 50% 22%;
  transition: opacity var(--transition);
}
.m_portraitCard:hover .m_portraitCard__img {
  opacity: .85;
}
.m_portraitCard__name {
  display: block;
  margin-top: 11px;
  font-size: var(--fz-main);
}
.m_portraitCard__role {
  display: block;
  margin-top: 5px;
  color: var(--color-textSub);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
}

/* ---------- m_resource（知見・資料セクション） ---------- */
.m_resource {
  padding-block: var(--space-sectionT) var(--space-sectionB); /* 節間余白の設計判断は m_service を参照 */
}
.m_resource__heading {
  margin-bottom: var(--space-headGap);
}

/* ---------- m_resourceCard（セミナーの大カード） ---------- */
.m_resourceCard {
  align-self: start; /* 隣列（m_downloadList）の高さに引き伸ばされると、比率固定の写真の下に空きが出るため */
  border: 1px solid var(--color-border);
  transition: border-color var(--transition);
}
.m_resourceCard:hover {
  border-color: var(--color-main);
}
.m_resourceCard__photo {
  position: relative;
  align-self: start; /* l_grid__item の stretch を切って比率を成立させる */
  aspect-ratio: var(--ratio-band);
  overflow: hidden;
}
.m_resourceCard__copy {
  padding: 20px 18px;
}
.m_resourceCard__eyebrow {
  margin-bottom: 15px;
}
.m_resourceCard__ttl {
  margin-bottom: 10px;
  font-size: var(--fz-lg);
}
.m_resourceCard__txt {
  color: var(--color-textSub);
  font-size: var(--fz-sm);
  line-height: 1.9;
}
.m_resourceCard__footer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  color: var(--color-mainText);
  font-size: var(--fz-sm);
  font-weight: 700;
}



/* ---------- m_downloadList ---------- */
.m_downloadList {
  padding: 5px 0;
}
.m_downloadList__eyebrow {
  margin-bottom: 15px;
}
.m_downloadList__ttl {
  margin-bottom: 10px;
  font-size: var(--fz-lg);
}
.m_downloadList__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 42px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fz-sm);
  transition: color var(--transition);
}
.m_downloadList__item:hover {
  color: var(--color-mainText);
}
.m_downloadList__footer {
  margin-top: 19px;
}

/* ---------- m_recruitTeaser ---------- */
.m_recruitTeaser {
  position: relative;
  height: 325px;
  background: var(--color-bk-teaser);
  overflow: hidden;
}
.m_recruitTeaser__img {
  position: absolute;
  inset: 0;
}
.m_recruitTeaser::after {
  position: absolute;
  inset: 0;
  background: var(--veil-photoCopy);
  content: "";
}
.m_recruitTeaser__copy {
  position: relative;
  z-index: 1;
  padding: 52px 0 0 53px;
}
.m_recruitTeaser__eyebrow {
  margin-bottom: 18px;
}
.m_recruitTeaser__ttl {
  margin-bottom: 8px;
  font-size: var(--fz-4xl);
  line-height: 1.2;
}
.m_recruitTeaser__sub {
  display: block;
  font-size: var(--fz-xl);
}
.m_recruitTeaser__txt {
  color: var(--color-textSub);
  font-size: var(--fz-sm);
}
.m_recruitTeaser__footer {
  margin-top: 12px;
}

@media screen and (max-width: 800px) {
  .m_recruitTeaser {
    /* design-locked: カンプは 290px。二次引き上げでコピーが 285px まで伸び残り 5px になったため
       実測で 315px に上げた（360px 幅で余白 30px）。文字サイズを変えたら再実測する。 */
    height: 315px;
  }
  .m_recruitTeaser__copy {
    padding: 47px 20px 0;
  }
  .m_recruitTeaser__txt {
    max-width: 230px;
  }
}

/* ---------- m_serviceIndex（支援領域一覧・services ページ） ----------
   節間余白の持ち方は m_service のコメント参照（l_section は使わず padding-block が持つ）。 */
.m_serviceIndex {
  padding-block: var(--space-subSection);
}
.m_serviceIndex__inner {}
.m_serviceIndex__nav {
  margin-bottom: 48px;
}
.m_serviceIndex__cta {}

@media screen and (max-width: 800px) {
  .m_serviceIndex__nav {
    margin-bottom: 35px;
  }
}

/* ---------- m_serviceDetail ----------
   左に固定幅 235px の見出し欄、右に本文の2カラム。
   m_ 内に grid を書いている理由：左列が画面幅に依存しない固定幅であるため。
   l_grid の u_col* は % 幅なので 800〜1120px 間で左列が 174px 前後まで縮み、
   6つの節で見出しの折返し位置が揃わなくなる。ガター・段数の差し替えでは表現できない。
   （既存の例外 m_newsList__row / m_appearanceList__item / m_proof と同じ判断） */
.m_serviceDetail {
  display: grid;
  grid-template-columns: 315px 1fr;
  /* 列間は 47px（カンプ実測）だが、行間は __services（サービスカード）との1箇所だけに効く。
     47px だとカードが離れて見えるので詰めた（2026-08-28 施主指定） */
  column-gap: 47px;
  row-gap: 24px;
  padding-block: 37px 43px;
  border-top: 1px solid var(--color-border);
}
.m_serviceDetail__head {}
.m_serviceDetail__index {
  display: block;
  color: var(--color-text-muted); /* カンプ #aeb1b5 は白地 2.06:1 で AA 未達のため置換 */
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 500;
}
.m_serviceDetail__en {
  display: block;
  margin-top: 19px;
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .07em;
}
.m_serviceDetail__ttl {
  margin-top: 8px;
  font-size: var(--fz-xl);
  line-height: 1.5;
}
.m_serviceDetail__body {}
.m_serviceDetail__txt {
  color: var(--color-textSub);
  line-height: 2;
}
.m_serviceDetail__topics {
  margin-top: 19px;
}
/* その領域に割り振られたサービス（2026-08-28 施主指定。カンプには無い）。
   __head / __body の弟として置き、左の見出し欄をまたいでコンテンツ幅いっぱいに広げる。
   領域どうしの区切りは次の .m_serviceDetail の border-top が担うので、
   全幅に出しても帰属は迷わない（施主確認済み）。0件の領域では要素ごと出ない。 */
.m_serviceDetail__services {
  /* margin-top は持たない。上の間隙は Block の row-gap が持つ（下の gap 宣言を参照）。
     margin と row-gap を両方持たせると合算されて 81px になり、
     下の padding-bottom 43px と釣り合わなかった（実測） */
  grid-column: 1 / -1;
}

@media screen and (max-width: 800px) {
  .m_serviceDetail {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 28px 35px;
  }
  .m_serviceDetail__en {
    margin-top: 11px;
  }
  .m_serviceDetail__services {
    margin-top: 12px; /* SP は Block の gap が 12px なので合計 24px（PC の row-gap と揃える） */
  }
}

/* ---------- m_topicItem ----------
   トピック一覧の1件。2列の段組みは l_grid（l_grid--gutterXsWide）が持つ。 */
.m_topicItem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-block: 10px;
  border-bottom: 1px solid var(--color-borderFaint);
  font-size: var(--fz-sm);
}
.m_topicItem::before {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--color-main);
  content: "";
}


/* ---------- m_about（私たちについて・about ページ） ----------
   節間余白の持ち方は m_service のコメント参照（l_section は使わず padding-block が持つ）。 */
.m_about {
  padding-block: var(--space-subSection);
}
.m_about__inner {}
.m_about__lead {
  margin-bottom: 77px;
}
.m_about__leadPhoto {
  align-self: center; /* flex の stretch を切って比率を成立させる（m_approach__photo と同型） */
  aspect-ratio: var(--ratio-photo); /* design-locked: カンプの height:290px は採らない。比率固定の入稿ルール */
  overflow: hidden;
}
.m_about__values {}
.m_about__heading {
  margin-bottom: var(--space-headGap);
}
.m_about__valueList {
  margin-bottom: 75px;
}
.m_about__profile {}
.m_about__table {
  margin-top: 25px;
}

@media screen and (max-width: 800px) {
  .m_about__lead {
    margin-bottom: 48px;
  }
}

/* ---------- m_mission ----------
   ミッションの文章側。2列の段組みは l_grid（l_grid--gutterXl）が持つ。 */
.m_mission__eyebrow {
  margin-bottom: 15px;
}
.m_mission__ttl {
  margin-bottom: 15px;
  font-size: var(--fz-leadTtl);
  line-height: 1.65;
}
.m_mission__txt {
  color: var(--color-textSub);
  line-height: 2.1;
}

/* ---------- m_valueCard ----------
   5つの姿勢のカード。5等分の段組みは l_grid（u_col20）が持つ。 */
.m_valueCard {
  flex-direction: column;
  min-height: 159px;
  padding: 19px 13px;
  background: var(--color-bk);
}
.m_valueCard__label {
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700; /* カンプ 650 は可変フォント前提。Inter 未読込で実表示は Helvetica/Arial のため 700 */
  letter-spacing: .04em;
}
.m_valueCard__ttl {
  margin-top: 14px;
  font-size: var(--fz-main);
}
.m_valueCard__txt {
  margin-top: 8px;
  color: var(--color-textSub);
  font-size: var(--fz-sm);
  line-height: 1.75;
}

/* ---------- m_caseList（導入事例一覧・cases ページ） ----------
   節間余白の持ち方は m_service のコメント参照（l_section は使わず padding-block が持つ）。 */
.m_caseList {
  padding-block: var(--space-subSection);
}
.m_caseList__inner {}
.m_caseList__cta {}

/* ---------- m_caseFull ----------
   横長の事例1件。左に写真、右に本文の2列で、段組みそのものは内側の l_grid が持つ。
   この Block が l_grid の外側に要る理由：l_grid はガターを負マージンで作るため、
   border-top を持つ要素に Mix すると罫線が左へ 24px はみ出し、上へ 24px ずれる。
   罫線と上下 padding をこの Block、段組みを内側の l_grid、と責任を分けている。 */
.m_caseFull {
  padding-block: 35px;
  border-top: 1px solid var(--color-border);
}
.m_caseFull__photo {
  align-self: center; /* flex の stretch を切って比率を成立させる（m_approach__photo と同型） */
  aspect-ratio: var(--ratio-photo); /* design-locked: カンプの height:220px は採らない。比率固定の入稿ルール */
  overflow: hidden;
}
.m_caseFull__body {
  flex-direction: column;
  align-self: center;
}
.m_caseFull__tag {
  color: var(--color-mainText);
  font-size: var(--fz-caption);
}
.m_caseFull__ttl {
  margin-top: 12px;
  font-size: var(--fz-xl); /* カンプ 23px（SP 20px）。既存トークン 22〜24px に1本化（ガターと同方針） */
  line-height: 1.6;
}
.m_caseFull__txt {
  margin-top: 12px;
  color: var(--color-textSub);
  font-size: var(--fz-sm);
  line-height: 1.95;
}
.m_caseFull__client {
  margin-top: 16px;
  font-weight: 700;
}
.m_caseFull__footer {
  margin-top: 17px;
}

/* ---------- m_consultantIntro（consultants ページ） ---------- */
.m_consultantIntro__inner {
  padding-block: 68px 48px;
  border-bottom: 1px solid var(--color-border);
}
.m_consultantIntro__body {
  flex-direction: column;
  align-self: center;
}
.m_consultantIntro__eyebrow {
  margin-bottom: 17px;
}
.m_consultantIntro__ttl {
  font-size: var(--fz-xl);
  line-height: 1.6;
}
/* 大数字が2行ぶち抜きで、右に単位と説明が積まれる情報表示。
   段組みではなく数字の幅（auto）に追従するため l_grid では表現できない（m_ 内 grid の例外）。 */
.m_consultantIntro__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-self: center;
  gap: 4px 17px;
}
.m_consultantIntro__num {
  grid-row: 1 / 3;
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-stat);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
}
.m_consultantIntro__unit {
  align-self: end;
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .11em;
}
.m_consultantIntro__txt {
  align-self: start;
  color: var(--color-textSub);
  font-size: var(--fz-caption);
  line-height: 1.8;
}

@media screen and (max-width: 800px) {
  .m_consultantIntro__inner {
    padding-block: 49px 34px;
  }
}

/* ---------- m_consultantSearch ----------
   固定幅 112px のラベル列＋入力欄。ラベルの折返し位置を固定するための固定列なので
   u_col* の % 幅では表現できない（m_ 内 grid の例外）。 */
.m_consultantSearch {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 20px;
  padding-block: 18px 21px;
  border-top: 1px solid var(--color-border);
}
.m_consultantSearch__label {
  font-size: var(--fz-sm);
  font-weight: 700;
}
.m_consultantSearch__field {
  width: 100%;
  height: 43px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fz-sm);
  transition: border-color var(--transition);
}
.m_consultantSearch__field:focus {
  border-color: var(--color-main);
}

@media screen and (max-width: 800px) {
  .m_consultantSearch {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}

/* ---------- m_consultantDirectory ---------- */
.m_consultantDirectory {
  padding-block: var(--space-subSection);
}
.m_consultantDirectory__inner {}
.m_consultantDirectory__heading {
  margin-bottom: var(--space-headGap);
}
.m_consultantDirectory__search {}
.m_consultantDirectory__filters {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.m_consultantDirectory__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}
.m_consultantDirectory__count {
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .09em;
}
.m_consultantDirectory__num {
  color: var(--color-mainText);
  font-size: var(--fz-md);
}
.m_consultantDirectory__note {
  color: var(--color-textSub);
  font-size: var(--fz-caption);
}
.m_consultantDirectory__grid {
  margin-top: 20px; /* 上の件数表示との間隙。__result 側に下 margin を持たせると上下同時付与になる */
}
.m_consultantDirectory__empty {
  padding: 48px 20px;
  text-align: center;
}
.m_consultantDirectory__emptyTtl {
  font-weight: 700;
}
.m_consultantDirectory__emptyTxt {
  margin-top: 6px;
  color: var(--color-textSub);
  font-size: var(--fz-sm);
}
.m_consultantDirectory__emptyFooter {
  margin-top: 12px;
}
.m_consultantDirectory__reset {
  padding: 10px 14px;
  border: 1px solid var(--color-main);
  background: var(--color-reverse);
  color: var(--color-mainText);
  font-family: inherit;
  font-size: var(--fz-sm);
  font-weight: 700;
  transition: background var(--transition);
}
.m_consultantDirectory__reset:hover {
  background: var(--color-mainTint);
}

@media screen and (max-width: 800px) {
  .m_consultantDirectory__result {
    display: block;
  }
  .m_consultantDirectory__note {
    margin-top: 6px;
  }
}

/* ---------- m_consultantCard ---------- */
.m_consultantCard {
  flex-direction: column;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
  transition: border-color var(--transition), transform var(--transition);
}
.m_consultantCard:hover {
  border-color: var(--color-main);
  transform: translateY(-3px);
}
.m_consultantCard__photo {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ratio-portrait); /* design-locked: カンプの height:242px は採らない。入稿画像が 335x322 とほぼ正方形で、1:1 ならトリミングが起きない */
  background: var(--color-bk-sub);
}
.m_consultantCard__img {
  transition: transform .35s;
}
.m_consultantCard:hover .m_consultantCard__img {
  transform: scale(1.04);
}
.m_consultantCard__avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-bk-avatar);
  color: var(--color-avatarText);
  font-size: var(--fz-avatar);
  font-weight: 700;
}
.m_consultantCard__index {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  min-width: 40px;
  padding: 9px 10px;
  background: var(--color-reverse);
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  text-align: center;
}
.m_consultantCard__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 19px 16px 15px;
}
.m_consultantCard__role {
  color: var(--color-textSub);
  font-size: var(--fz-caption);
}
.m_consultantCard__name {
  display: block;
  margin-top: 10px;
  font-size: var(--fz-lg);
  font-weight: 700;
}
.m_consultantCard__nameEn {
  display: block;
  margin-top: 4px;
  color: var(--color-textSub);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 500;
  letter-spacing: .055em;
}
.m_consultantCard__txt {
  display: block;
  margin-top: 8px;
  color: var(--color-textSub);
  font-size: var(--fz-caption);
  line-height: 1.85;
}
.m_consultantCard__tags {}
.m_consultantCard__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 11px;
  border-top: 1px solid var(--color-border);
  color: var(--color-mainText);
  font-size: var(--fz-sm);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .m_consultantCard {
    transition: none;
  }
  .m_consultantCard:hover {
    transform: none;
  }
  .m_consultantCard__img,
  .m_consultantCard:hover .m_consultantCard__img {
    transition: none;
    transform: none;
  }
}

@media screen and (max-width: 800px) {
  .m_consultantCard__body {
    padding: 16px 12px 13px;
  }
}

/* ---------- m_consultantApproach ---------- */
.m_consultantApproach {
  /* 帯の内寸。背景を持つのでこの padding が節間の間隙も兼ねる（m_service のコメント参照） */
  padding-block: var(--space-band);
  background: var(--color-bk);
}
.m_consultantApproach__inner {}
.m_consultantApproach__heading {
  margin-bottom: var(--space-headGap);
}
.m_consultantApproach__steps {
  border-block: 1px solid var(--color-borderWarm);
}

/* ---------- m_consultantServices ---------- */
.m_consultantServices {
  padding-block: var(--space-subSection);
}
.m_consultantServices__inner {}
.m_consultantServices__heading {
  margin-bottom: var(--space-headGap);
}
.m_consultantServices__grid {
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

/* ---------- m_profileMain（kobayashi ページ） ----------
   固定幅 244px の見出し列＋本文。6つの節で見出しの折返し位置を揃えるための固定列なので
   u_col* の % 幅では表現できない（m_ 内 grid の例外。m_serviceDetail と同型）。 */
.m_profileMain__inner {
  display: grid;
  grid-template-columns: 244px 1fr;
  gap: 62px;
  padding-block: 94px 57px;
}
.m_profileMain__heading {}
.m_profileMain__eyebrow {
  margin-bottom: 19px;
}
.m_profileMain__ttl {
  font-size: var(--fz-xl);
  line-height: 1.65;
}
.m_profileMain__body {}
.m_profileMain__cta {
  padding-bottom: 8px;
}

@media screen and (max-width: 800px) {
  .m_profileMain__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block: 69px 43px;
  }
}

/* ---------- m_profileDetail ----------
   固定幅 194px の見出し列＋本文（m_ 内 grid の例外・理由は m_profileMain と同じ）。 */
.m_profileDetail {
  display: grid;
  grid-template-columns: 194px 1fr;
  gap: 23px;
  padding-block: 28px 33px;
  border-top: 1px solid var(--color-border);
}
.m_profileDetail__head {}
.m_profileDetail__en {
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .07em;
}
.m_profileDetail__ttl {
  margin-top: 10px;
  font-size: var(--fz-md);
}
.m_profileDetail__body {}
.m_profileDetail__item {
  position: relative;
  padding: 9px 0 9px 14px;
  border-bottom: 1px solid var(--color-borderFaint);
  font-size: var(--fz-sm);
  line-height: 1.7;
}
.m_profileDetail__item::before {
  position: absolute;
  inset-block-start: 15px;
  inset-inline-start: 0;
  width: 5px;
  height: 5px;
  background: var(--color-main);
  content: "";
}
.m_profileDetail__txt {
  color: var(--color-textSub);
  font-size: var(--fz-sm);
  line-height: 2;
}
.m_profileDetail__txt + .m_profileDetail__txt {
  margin-top: 11px;
}
.m_profileDetail__quote {
  padding: 17px 17px 17px 19px;
  border-left: 2px solid var(--color-main);
  background: var(--color-bk);
  font-size: var(--fz-sm);
  line-height: 2;
}

@media screen and (max-width: 800px) {
  .m_profileDetail {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 21px 25px;
  }
}

/* ---------- m_profileResource ----------
   `21px 59px 1fr 19px` は通番・カテゴリ・見出し・矢印の固定スロットで、
   件数不定の等分一覧ではない（m_ 内 grid の例外。m_newsList__row と同型）。 */
.m_profileResource {
  border-top: 1px solid var(--color-border);
}
.m_profileResource__item {}
.m_profileResource__link {
  display: grid;
  grid-template-columns: 21px 59px 1fr 19px;
  align-items: center;
  gap: 7px;
  min-height: 53px;
  padding-block: 8px;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition);
}
.m_profileResource__link:hover {
  color: var(--color-mainText);
}
.m_profileResource__index {
  color: var(--color-textSub);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 500;
}
.m_profileResource__cat {
  color: var(--color-mainText);
  font-size: var(--fz-caption);
}
.m_profileResource__ttl {
  font-size: var(--fz-sm);
  line-height: 1.6;
}
.m_profileResource__arrow {}

@media screen and (max-width: 420px) {
  .m_profileResource__link {
    grid-template-columns: 17px 49px 1fr 15px;
    gap: 5px;
  }
}

/* ---------- m_seminarUpcoming（seminar ページ） ---------- */
.m_seminarUpcoming {
  padding-block: var(--space-subSection);
}
.m_seminarUpcoming__inner {}
.m_seminarUpcoming__heading {
  margin-bottom: var(--space-headGap);
}
.m_seminarUpcoming__list {}

/* ---------- m_scheduleList ---------- */
.m_scheduleList {
  border-top: 2px solid var(--color-text);
}
.m_scheduleList__item {}

/* ---------- m_scheduleRow ----------
   `118px 1fr 145px` は「固定幅の日付欄｜本文｜固定幅の申込み欄」の情報表示。
   日付の桁数や申込み文言に幅を揺らされないための固定列なので、
   u_col* の % 幅では表現できない（m_ 内 grid の例外）。 */
.m_scheduleRow {
  display: grid;
  grid-template-columns: 118px 1fr 145px;
  align-items: center;
  gap: 31px;
  min-height: 158px;
  padding: 22px 24px 22px 13px;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition), color var(--transition);
}
.m_scheduleRow:hover {
  background: var(--color-mainTint);
}
.m_scheduleRow__date {
  padding-right: 24px;
  border-right: 1px solid var(--color-border);
  font-family: var(--font-latin);
  text-align: center;
}
.m_scheduleRow__mon {
  display: block;
  color: var(--color-mainText);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .12em;
}
.m_scheduleRow__day {
  display: block;
  margin-top: 5px;
  font-size: var(--fz-dayLg);
  letter-spacing: -.04em;
  line-height: 1;
}
.m_scheduleRow__sub {
  display: block;
  margin-top: 6px;
  color: var(--color-textSub); /* カンプ #858990 は白地 3.52:1 で AA 未達のため置換 */
  font-size: var(--fz-caption);
  letter-spacing: .08em;
}
.m_scheduleRow__main {
  display: block;
  min-width: 0;
}
.m_scheduleRow__format {
  display: inline-flex;
  padding: 5px 8px;
  background: var(--color-mainTint);
  color: var(--color-mainText);
  font-size: var(--fz-caption);
  font-weight: 700;
}
.m_scheduleRow__ttl {
  margin-top: 10px;
  font-size: var(--fz-md);
  line-height: 1.65;
}
.m_scheduleRow__speaker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 9px;
}
.m_scheduleRow__name {
  font-size: var(--fz-sm);
  font-weight: 700;
}
.m_scheduleRow__org {
  color: var(--color-textSub);
  font-size: var(--fz-caption);
}
.m_scheduleRow__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--color-mainText);
  font-size: var(--fz-sm);
  font-weight: 700;
  white-space: nowrap;
}

@media screen and (max-width: 800px) {
  .m_scheduleRow {
    grid-template-columns: 78px 1fr;
    gap: 18px;
    min-height: 150px;
    padding: 20px 5px;
  }
  .m_scheduleRow__date {
    padding-right: 15px;
  }
  .m_scheduleRow__speaker {
    display: block;
  }
  .m_scheduleRow__org {
    display: block;
    margin-top: 4px;
  }
  .m_scheduleRow__action {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 420px) {
  .m_scheduleRow {
    grid-template-columns: 67px 1fr;
    gap: 13px;
  }
  .m_scheduleRow__date {
    padding-right: 10px;
  }
}

/* ---------- m_seminarValues ---------- */
.m_seminarValues {
  /* 帯の内寸。背景を持つのでこの padding が節間の間隙も兼ねる（m_service のコメント参照） */
  padding-block: var(--space-band);
  background: var(--color-bk);
}
.m_seminarValues__inner {}
.m_seminarValues__eyebrow {
  margin-bottom: 28px;
}
.m_seminarValues__steps {
  border-block: 1px solid var(--color-borderWarm);
}

/* ---------- m_seminarThemes ---------- */
.m_seminarThemes {
  padding-block: var(--space-subSection);
}
.m_seminarThemes__inner {}
.m_seminarThemes__heading {
  margin-bottom: var(--space-headGap);
}
.m_seminarThemes__grid {}
.m_seminarThemes__cta {
  margin-top: 34px; /* カンプは inline style で持っていた値。inline style は使えないのでここへ移した */
}

/* ---------- m_downloadIntro（download ページ） ---------- */
.m_downloadIntro {
  padding-block: var(--space-subSection);
}
.m_downloadIntro__inner {}
.m_downloadIntro__copy {
  flex-direction: column;
  align-self: center;
}
.m_downloadIntro__eyebrow {
  margin-bottom: 20px;
}
.m_downloadIntro__ttl {
  font-size: var(--fz-2xl);
  line-height: 1.55;
}
.m_downloadIntro__txt {
  margin-top: 12px;
  color: var(--color-textSub);
  line-height: 2.05;
}
.m_downloadIntro__footer {
  margin-top: 23px;
}

/* ---------- m_featureDoc ----------
   ピックアップ資料の赤いカード。地は確定事項のブランド赤（--color-mainDark → --color-main）で、
   カンプの #b8141a→#e41f26 は使わない。
   カンプは small/p に opacity を掛けて白文字を薄くしているが、
   AA（白文字 4.5:1）を割るため opacity は使わず不透明の白のままにしている。 */
.m_featureDoc {
  position: relative;
  flex-direction: column;
  padding: 30px 30px 27px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-mainDark), var(--color-main));
  box-shadow: var(--shadow-featureDoc);
  color: var(--color-reverse);
}
.m_featureDoc::after {
  position: absolute;
  inset-block-start: -80px;
  inset-inline-end: -95px;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(255, 255, 255, .23);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(255, 255, 255, .047), 0 0 0 103px rgba(255, 255, 255, .039);
  content: "";
}
.m_featureDoc__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .13em;
}
.m_featureDoc__body {
  position: relative;
  z-index: 1;
  display: block;
  margin-block: auto;
}
.m_featureDoc__cat {
  display: block;
  font-size: var(--fz-caption);
}
.m_featureDoc__ttl {
  margin-top: 12px;
  font-size: var(--fz-xl);
  line-height: 1.6;
}
.m_featureDoc__txt {
  display: block;
  margin-top: 8px;
  font-size: var(--fz-sm);
  line-height: 1.8;
}
.m_featureDoc__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .4);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
  letter-spacing: .08em;
}

@media screen and (max-width: 800px) {
  .m_featureDoc {
    min-height: 300px;
    padding: 24px 22px;
  }
}

@media screen and (max-width: 420px) {
  .m_featureDoc {
    min-height: 285px;
  }
}

/* ---------- m_downloadLibrary ---------- */
.m_downloadLibrary {
  padding-block: var(--space-subSection);
  background: var(--color-bk);
}
.m_downloadLibrary__inner {}
.m_downloadLibrary__heading {
  margin-bottom: var(--space-headGap);
}
.m_downloadLibrary__grid {}

/* ---------- m_downloadUse ---------- */
.m_downloadUse {
  padding-block: var(--space-subSection);
}
.m_downloadUse__inner {}
.m_downloadUse__heading {
  margin-bottom: var(--space-headGap);
}
.m_downloadUse__grid {}
.m_downloadUse__cta {
  margin-top: 34px;
}

/* ---------- m_recruitMessage（recruit ページ） ---------- */
.m_recruitMessage {
  padding-block: 85px 72px;
}
.m_recruitMessage__inner {}
.m_recruitMessage__eyebrow {
  margin-bottom: 19px;
}
.m_recruitMessage__ttl {
  max-width: 860px;
  font-size: var(--fz-2xl);
  line-height: 1.6;
}
.m_recruitMessage__txt {
  max-width: 860px;
  margin-top: 13px;
  color: var(--color-textSub);
  line-height: 2.2;
}
.m_recruitMessage__stats {
  margin-top: 38px;
  border-block: 1px solid var(--color-border);
}

@media screen and (max-width: 800px) {
  .m_recruitMessage {
    padding-block: 66px 58px;
  }
}

/* ---------- m_statCol ----------
   数字とラベルの1段。3等分の段組みは l_grid（ガター無し）が持ち、
   段の区切りはこの Block の罫線（--divided）が担う。
   SP は3つ目だけ全幅に回り込むので、その1つに --wrapped を付けて左罫線を上罫線へ替える
   （:last-child の打ち消しを使わない）。 */
.m_statCol {
  flex-direction: column;
  width: 100%;
  padding: 23px 24px 22px 0;
}
.m_statCol--divided {
  padding-left: 24px;
  border-left: 1px solid var(--color-border);
}
.m_statCol__num {
  display: block;
  font-family: var(--font-latin);
  font-size: var(--fz-num);
  font-weight: 700;
  letter-spacing: -.03em;
}
.m_statCol__sup {
  color: var(--color-mainText);
}
.m_statCol__label {
  display: block;
  margin-top: 7px;
  color: var(--color-textSub);
  font-size: var(--fz-caption);
}

@media screen and (max-width: 800px) {
  .m_statCol {
    padding: 18px 13px 18px 0;
  }
  .m_statCol--divided {
    padding-left: 13px;
  }
  .m_statCol--wrapped {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

/* ---------- m_recruitWork ---------- */
.m_recruitWork {
  /* 帯の内寸。背景を持つのでこの padding が節間の間隙も兼ねる（m_service のコメント参照） */
  padding-block: var(--space-band);
  background: var(--color-bk-dark);
  color: var(--color-reverse);
}
.m_recruitWork__inner {}
.m_recruitWork__heading {
  margin-bottom: var(--space-headGap);
}
.m_recruitWork__grid {
  border-block: 1px solid var(--color-borderOnDark);
}

/* ---------- m_recruitProcess ---------- */
.m_recruitProcess {
  padding-block: var(--space-subSection);
}
.m_recruitProcess__inner {}
.m_recruitProcess__heading {
  margin-bottom: var(--space-headGap);
}
.m_recruitProcess__list {
  border-block: 1px solid var(--color-border);
}

/* ---------- m_recruitWhy ---------- */
.m_recruitWhy {
  padding-bottom: 74px;
}
.m_recruitWhy__inner {}
.m_recruitWhy__heading {
  margin-bottom: var(--space-headGap);
}
.m_recruitWhy__grid {}

/* ---------- m_recruitPositions ---------- */
.m_recruitPositions {
  /* 下の余白は m_recruitClosing の上の間隙も兼ねる。
     Block 外 margin を作らないため、間隙は必ず手前の Block の padding で持つ。 */
  padding-bottom: 92px;
}
.m_recruitPositions__inner {}
.m_recruitPositions__heading {
  margin-bottom: var(--space-headGap);
}
.m_recruitPositions__grid {}

/* ---------- m_positionCard ---------- */
.m_positionCard { 
  display: flex;
  flex-direction: column;
  min-height: 410px;
  padding: 31px 29px;
  border: 1px solid var(--color-border);
}
.m_positionCard__en {
  color: var(--color-mainText);
  font-family: var(--font-latin);
  font-size: var(--fz-caption);
  font-weight: 700;
}
.m_positionCard__ttl {
  margin-top: 13px;
  font-size: var(--fz-lg);
}
.m_positionCard__list {
  flex-grow: 1;
  margin-top: 13px;
}
.m_positionCard__term {
  margin-top: 15px;
  font-size: var(--fz-sm);
  font-weight: 700;
}
.m_positionCard__desc {
  margin-top: 4px;
  color: var(--color-textSub);
  font-size: var(--fz-sm);
  line-height: 1.9;
}
.m_positionCard__footer {
  margin-top: 19px;
}

@media screen and (max-width: 800px) {
  .m_positionCard {
    min-height: 0;
    padding: 25px 20px;
  }
}

/* ---------- m_recruitClosing ---------- */
.m_recruitClosing {
  padding-block: 76px 82px;
  border-top: 1px solid var(--color-border);
  background: linear-gradient(110deg, var(--color-bk) 0%, var(--color-reverse) 70%);
}
.m_recruitClosing__inner {}
.m_recruitClosing__eyebrow {
  margin-bottom: 20px;
}
.m_recruitClosing__ttl {
  font-size: var(--fz-3xl);
  line-height: 1.5;
}
.m_recruitClosing__txt {
  margin-top: 12px;
  color: var(--color-textSub);
  line-height: 2;
}
.m_recruitClosing__footer {
  margin-top: 23px;
}

@media screen and (max-width: 800px) {
  .m_recruitClosing {
    padding-block: 59px 64px;
  }
}

/* =================================================================
   4. State (js_ / .is_)
   ================================================================= */

.js_scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s, transform .6s;
}
.js_scroll.is_active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js_scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =================================================================
   5. Utility (u_)
   カラム幅と、Block 外に出る間隙の調整。
   u_col62 / 38 / 60 / 40 / 45 / 55 はカンプの非12分割比率
   （1.65fr:1fr / 1.2fr:.8fr / .9fr:1.1fr）を表現するための例外ユーティリティ。
   ================================================================= */

.u_col3  { width: 25%; }
.u_col4  { width: 33.3333%; }
.u_col6  { width: 50%; }
.u_col12 { width: 100%; }
.u_col20 { width: 20%; }   /* 5等分。12分割で割れないための例外 */
.u_col38 { width: 38%; }
.u_col40 { width: 40%; }
.u_col45 { width: 45%; }
.u_col55 { width: 55%; }
.u_col60 { width: 60%; }
.u_col62 { width: 62%; }

@media screen and (max-width: 800px) {
  .u_resMdCol6  { width: 50%; }
  .u_resMdCol12 { width: 100%; }
}

/* ---- 余白調整 ----
   ヒーロー上と採用ティザー下の間隙。どちらも Block 外に出る余白で、
   節間余白を l_section に持たせない方針（m_service のコメント参照）のため u_ が受け持つ。 */
.u_mtHeroGap { margin-top: var(--space-fHeroGap); }
.u_mtSubHeroGap { margin-top: var(--space-fSubHeroGap); }
.u_mbTeaserGap { margin-bottom: var(--space-fTeaserGap); }
/* 旧マークアップのままの本文（single-services）の下に節間余白を足す。
   新しい節は m_ の padding-block が余白を持つが、旧側は l_section に依存していて
   その l_section を廃止したため、本文がフッター帯に直付けになる */
.u_mbSubSection { margin-bottom: var(--space-subSection); }

@media screen and (max-width: 800px) {
  /* 画面端まで伸ばす。l_grid__inner の width:100% を上書きしないと、
     負マージンは左にずらすだけで右端が伸びない。u_ の上書きなので !important を使う */
  .u_bleedSp {
    width: calc(100% + var(--gutter-pageSp) * 2) !important;
    margin-inline: calc(var(--gutter-pageSp) * -1) !important;
  }
}

@media screen and (max-width: 420px) {
  .u_resSmCol12 { width: 100%; }
}

/* ---- 視覚的に隠す ----
   スクリーンリーダーには読ませるが画面には出さない。table の caption 等に使う。 */
.u_visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}