@charset "utf-8";
/* =============================================================================
   mtg0813.css — 2026年8月13日 社内MTG反映版で新しく必要になったブロック
   -----------------------------------------------------------------------------
   【重要】このファイルは新規ページ専用の追加レイヤーです。
   既存の blocks.css / concept-d.css / pages.css / pages-v2.css / pages-v3.css /
   concept-ef.css / lab.css / refine.css は一切変更していません。
   セレクタは すべて .m8- プレフィックス（および body.m8-page 配下）に限定し、
   既存ページのクラス名を上書きしません。

   色・角丸・影・書体は blocks.css のデザイントークン
   （--navy #071943 / --coral #f6867c / --cream #f9f4ef / --font-heading 等）を
   そのまま使用し、新しいブランドカラー・書体は追加していません。

   設計方針（MTGで決まった内容）
     - 奇抜さより情報設計。巨大タイポ・過剰アニメーション・全カード化はしない。
     - 390px のスマートフォンを基準に書き、min-width で PC を足す（SP優先）。
     - 拠点数が 4 → 5、6、7 と増えても破綻しない可変グリッドにする。
   ========================================================================== */

/* =============================================================================
   0. 共通
   ========================================================================== */
.m8-inner { max-width: var(--w-1160); margin-inline: auto; padding-inline: 20px; }
.m8-inner--narrow { max-width: var(--w-1000); }
.m8-inner--wide { max-width: var(--w-1280); }

.m8-sec { padding-block: 56px; }
.m8-sec--tight { padding-block: 40px; }
.m8-sec--cream { background-color: var(--cream); }
.m8-sec--navy { background-color: var(--navy); color: var(--white); }
.m8-sec--line { border-top: 1px solid var(--line-light); }

.m8-h2 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.m8-sec--navy .m8-h2 { color: var(--white); }
.m8-h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
}
.m8-eyebrow {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--slate);
}
.m8-sec--navy .m8-eyebrow { color: #cdd5e4; }
.m8-lead { margin: 0 0 28px; font-size: 1.6rem; line-height: 1.9; max-width: 40em; }
.m8-body { margin: 0 0 16px; font-size: 1.6rem; line-height: 1.9; }
.m8-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--line);
  background-color: var(--white-soft);
  font-size: 1.4rem;
  line-height: 1.8;
}
.m8-sec--cream .m8-note { background-color: var(--white); }
.m8-small { margin: 12px 0 0; font-size: 1.35rem; line-height: 1.8; color: var(--slate); }
/* 背景反転時：--white-soft は白のままのため、注記ボックスだけ個別に指定する */
html[data-theme="dark"] .m8-note { background-color: #1f1f1f; color: #ffffff; border-left-color: #888888; }
html[data-theme="dark"] .m8-scene,
html[data-theme="dark"] .m8-voice,
html[data-theme="dark"] .m8-map__item,
html[data-theme="dark"] .m8-base,
html[data-theme="dark"] .m8-job,
html[data-theme="dark"] .m8-flow__item,
html[data-theme="dark"] .m8-ba__item,
html[data-theme="dark"] .m8-area,
html[data-theme="dark"] .m8-cta__card { background-color: #1f1f1f; }
html[data-theme="dark"] .m8-gate { background-color: #1f1f1f; color: #ffffff; border-color: #ffffff; }
html[data-theme="dark"] .m8-gate:hover { background-color: #ffffff; color: #000000; }
html[data-theme="dark"] .m8-cta__btn { background-color: #ffffff; color: #000000; }
html[data-theme="dark"] .m8-cta__btn--ghost { background-color: #000000; color: #ffffff; border-color: #ffffff; }

/* 本文中の補足リンク */
.m8-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.m8-more::after { content: "→"; }

@media (min-width: 768px) {
  .m8-sec { padding-block: 88px; }
  .m8-sec--tight { padding-block: 56px; }
  .m8-h2 { font-size: 3.6rem; margin-bottom: 12px; }
  .m8-h3 { font-size: 2.1rem; }
  .m8-lead { font-size: 1.8rem; margin-bottom: 40px; }
  .m8-body { font-size: 1.7rem; }
}

/* 既存 d-header のロゴは高さが約29pxでタップ領域が小さいため、
   このCSSを読み込むページに限って44px以上にする。
   （concept-d.css は変更していないので、既存ページの見た目は変わらない） */
.d-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* =============================================================================
   1. m8-hero — トップのHero
   D案のHero A（メッセージ中心）の思想を維持。写真は入れるが主役にしない。
   ========================================================================== */
.m8-hero { padding-block: 40px 32px; background-color: var(--white); }
.m8-hero__inner { max-width: var(--w-1160); margin-inline: auto; padding-inline: 20px; }
.m8-hero__title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.m8-hero__lead { margin: 0 0 24px; font-size: 1.7rem; line-height: 1.9; }
.m8-hero__media { margin: 24px 0 0; }
.m8-hero__media img { width: 100%; border-radius: 16px; }

@media (min-width: 768px) {
  .m8-hero { padding-block: 64px 48px; }
  .m8-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
  }
  .m8-hero__title { font-size: 4.8rem; }
  .m8-hero__lead { font-size: 2rem; max-width: 22em; }
  .m8-hero__media { margin: 0; }
  .m8-hero__media img { border-radius: 20px; }
}

/* =============================================================================
   2. m8-gates — 主要導線（お問い合わせだけを目立たせない）
   「同行援護を利用したい方」「ヘルパーとして働きたい方」など、
   訪問者の目的そのものをラベルにする。件数が増減しても崩れない可変グリッド。
   ========================================================================== */
.m8-gates { padding-block: 24px 8px; background-color: var(--cream); }
.m8-gates__inner { max-width: var(--w-1160); margin-inline: auto; padding-inline: 20px; }
.m8-gates__title { margin: 0 0 12px; font-size: 1.5rem; font-weight: 700; color: var(--slate); }
.m8-gates__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.m8-gate {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background-color: var(--white);
  text-decoration: none;
}
.m8-gate:hover { background-color: var(--navy); color: var(--white); }
.m8-gate:hover .m8-gate__sub { color: inherit; }
.m8-gate__body { flex: 1 1 auto; }
.m8-gate__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.45;
}
.m8-gate__sub { display: block; margin-top: 2px; font-size: 1.35rem; line-height: 1.6; color: var(--slate); }
.m8-gate__arrow { flex: 0 0 auto; font-size: 1.8rem; font-weight: 700; }
/* 4つ目以降（会社向けの用件）は主導線と差をつける */
.m8-gate--sub { border-color: var(--line); }
.m8-gates__foot { margin: 12px 0 0; font-size: 1.4rem; line-height: 1.8; }

@media (min-width: 768px) {
  .m8-gates { padding-block: 32px 16px; }
  .m8-gates__list { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
  .m8-gate { flex-direction: column; align-items: flex-start; min-height: 116px; padding: 20px; }
  .m8-gate__label { font-size: 1.9rem; }
  .m8-gate__arrow { align-self: flex-end; margin-top: auto; }
}

/* =============================================================================
   3. m8-spbar — スマートフォンの固定導線（SPのみ）
   PCの縮小版にしないための、SP専用の主要導線。
   ========================================================================== */
.m8-spbar { display: none; }
@media (max-width: 767px) {
  .m8-spbar {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background-color: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--line-light);
  }
  .m8-spbar__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .m8-spbar__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 6px 4px;
    border-radius: 999px;
    background-color: var(--navy);
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
  }
  .m8-spbar__list a.m8-spbar__ghost {
    background-color: var(--white);
    border: 2px solid var(--navy);
    color: var(--navy);
  }
  body.m8-has-spbar { padding-bottom: 88px; }
}
/* 文字を拡大したときや画面が低いときは固定を解除して本文を隠さない */
@media (max-width: 767px) and (max-height: 480px) {
  .m8-spbar { position: static; padding-bottom: 8px; }
  body.m8-has-spbar { padding-bottom: 0; }
}
html[data-theme="dark"] .m8-spbar { background-color: #000; }

/* =============================================================================
   4. m8-map — 事業構造（3領域）の見取り図
   「同行援護／事業所向けプロダクト／Webメディア」の3領域を先に示す。
   ただし3つを同格には見せず、同行援護を軸として表現する。
   ========================================================================== */
.m8-map { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.m8-map__item {
  padding: 18px 18px 20px;
  border: 1px solid var(--line-light);
  border-radius: 14px;
  background-color: var(--white);
}
.m8-map__item--core { border: 2px solid var(--navy); }
.m8-map__badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 12px;
  border-radius: 4px;
  background-color: var(--cream);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--slate);
}
.m8-map__item--core .m8-map__badge { background-color: var(--navy); color: var(--white); }
.m8-map__name {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.45;
}
.m8-map__text { margin: 0; font-size: 1.5rem; line-height: 1.8; }
@media (min-width: 768px) {
  .m8-map { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
  .m8-map__name { font-size: 2.1rem; }
  .m8-map__text { font-size: 1.6rem; }
}

/* =============================================================================
   5. m8-domain — 領域ごとの本編ブロック
   --core（同行援護）は大きく、--sub（プロダクト／メディア）は横並びの節にする。
   ========================================================================== */
.m8-domain { padding-block: 40px; }
.m8-domain + .m8-domain { border-top: 1px solid var(--line-light); }
.m8-domain__kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 14px;
  border-radius: 4px;
  background-color: var(--coral);
  color: #3a1410;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.m8-domain__kicker--quiet { background-color: var(--cream); color: var(--slate); }
.m8-domain__name {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
}
.m8-domain__desc { margin: 0 0 20px; font-size: 1.6rem; line-height: 1.9; }
.m8-domain__media { margin: 0 0 20px; }
.m8-domain__media img { width: 100%; border-radius: 16px; }
.m8-domain__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.m8-domain--sub .m8-domain__name { font-size: 2.2rem; }
@media (min-width: 768px) {
  .m8-domain { padding-block: 64px; }
  .m8-domain__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
  }
  .m8-domain__name { font-size: 4rem; }
  .m8-domain--sub .m8-domain__name { font-size: 2.6rem; }
  .m8-domain__desc { font-size: 1.8rem; }
  .m8-domain__media { margin: 0; }
  /* プロダクト／メディアは2列に並べ、同行援護との重みの差を出す */
  .m8-domain__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .m8-domain__pair .m8-domain { padding-block: 0; border-top: 0; }
}

/* =============================================================================
   6. m8-bases — 拠点カード
   4拠点前提の固定レイアウトにしない。5・6・7拠点でも破綻しない可変グリッド。
   ========================================================================== */
.m8-bases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.m8-base {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line-light);
  border-radius: 12px;
  background-color: var(--white);
}
.m8-base__name { margin: 0; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1.4; }
/* 拠点名はタップ領域を確保する（44px以上） */
.m8-base__name a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.m8-base__area { margin: 0; font-size: 1.45rem; line-height: 1.7; color: var(--slate); }
.m8-base__note { margin: 4px 0 0; font-size: 1.3rem; line-height: 1.6; color: var(--slate); }
.m8-base__go { margin: 8px 0 0; font-size: 1.4rem; font-weight: 700; }
@media (min-width: 600px) {
  /* minmax + auto-fit のため、拠点が増えても行が自動で折り返される */
  .m8-bases { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 16px; }
}

/* =============================================================================
   7. m8-area — 対応地域の考え方
   「自分の県名が拠点名にない＝使えない」という誤解で離脱させないためのブロック。
   ========================================================================== */
.m8-area {
  padding: 20px;
  border: 2px solid var(--navy);
  border-radius: 14px;
  background-color: var(--white);
}
.m8-area__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
}
.m8-area__text { margin: 0 0 16px; font-size: 1.55rem; line-height: 1.9; }
.m8-area__points { margin: 0 0 16px; padding-left: 1.2em; font-size: 1.5rem; line-height: 1.9; }
.m8-area__points li + li { margin-top: 6px; }
@media (min-width: 768px) {
  .m8-area { padding: 32px 36px; }
  .m8-area__title { font-size: 2.2rem; }
  .m8-area__text, .m8-area__points { font-size: 1.7rem; }
}

/* =============================================================================
   8. m8-scenes — 「同行援護でできること」
   制度の説明ではなく、生活の場面を具体的に見せる。
   ========================================================================== */
.m8-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.m8-scene {
  padding: 16px 14px;
  border-radius: 12px;
  background-color: var(--cream);
}
.m8-sec--cream .m8-scene { background-color: var(--white); }
.m8-scene__name {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.45;
}
.m8-scene__text { margin: 0; font-size: 1.4rem; line-height: 1.75; }
@media (min-width: 768px) {
  .m8-scenes { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 32px; }
  .m8-scene { padding: 22px 20px; }
  .m8-scene__name { font-size: 1.9rem; }
  .m8-scene__text { font-size: 1.5rem; }
}

/* =============================================================================
   9. m8-voice — 実在する声（利用者・社員・ヘルパー）
   写真がない人も同じ体裁で並べられるようにする。
   ========================================================================== */
.m8-voices { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.m8-voice {
  padding: 20px;
  border: 1px solid var(--line-light);
  border-radius: 14px;
  background-color: var(--white);
}
.m8-sec--cream .m8-voice { background-color: var(--white); }
.m8-voice__media { margin: 0 0 14px; }
.m8-voice__media img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; }
.m8-voice__role { margin: 0 0 4px; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.06em; color: var(--slate); }
.m8-voice__name { margin: 0 0 12px; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1.5; }
.m8-voice__text { margin: 0; font-size: 1.5rem; line-height: 1.95; }
.m8-voice__text + .m8-voice__text { margin-top: 12px; }
.m8-voice__meta { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-light); font-size: 1.35rem; line-height: 1.8; color: var(--slate); }
@media (min-width: 768px) {
  .m8-voices--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
  .m8-voice { padding: 28px; }
  .m8-voice__name { font-size: 2rem; }
  .m8-voice__text { font-size: 1.6rem; }
  .m8-voice__media img { height: 240px; }
}

/* =============================================================================
   10. m8-table — 条件・料金・機能などの表
   既存 bk-table と別に、SPで横スクロールさせない縦積み型を用意する。
   ========================================================================== */
.m8-table { width: 100%; border-collapse: collapse; font-size: 1.5rem; line-height: 1.8; }
.m8-table th, .m8-table td { display: block; width: 100%; text-align: left; }
.m8-table th {
  padding: 12px 14px 4px;
  border-top: 1px solid var(--line-table);
  font-weight: 700;
  color: var(--navy);
}
.m8-table td { padding: 0 14px 14px; }
@media (min-width: 768px) {
  .m8-table th, .m8-table td { display: table-cell; width: auto; }
  .m8-table th { width: 12em; padding: 18px 20px; border-right: 1px solid var(--line-table); background-color: var(--cream); vertical-align: top; }
  .m8-table td { padding: 18px 20px; border-top: 1px solid var(--line-table); }
  .m8-table { font-size: 1.6rem; }
}
html[data-theme="dark"] .m8-table th { background-color: #2a2a2a; color: #fff; }

/* =============================================================================
   11. m8-ba — 導入すると何が変わるか（Before / After）
   数値の効果は書かない。作業そのものの変化だけを並べる。
   ========================================================================== */
.m8-ba { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.m8-ba__item {
  padding: 18px;
  border-radius: 14px;
  background-color: var(--white);
  border: 1px solid var(--line-light);
}
.m8-ba__who { margin: 0 0 10px; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; }
.m8-ba__row { display: grid; gap: 8px; margin: 0; }
.m8-ba__label { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.06em; color: var(--slate); }
.m8-ba__before, .m8-ba__after { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.8; }
.m8-ba__after { padding-left: 14px; border-left: 4px solid var(--coral); }
@media (min-width: 768px) {
  .m8-ba { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
  .m8-ba__item { padding: 26px; }
  .m8-ba__before, .m8-ba__after { font-size: 1.6rem; }
}

/* =============================================================================
   12. m8-jobs — 募集職種
   ========================================================================== */
.m8-jobs { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
.m8-job {
  padding: 20px;
  border: 1px solid var(--line-light);
  border-left: 6px solid var(--navy);
  border-radius: 0 12px 12px 0;
  background-color: var(--white);
}
.m8-job__title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; line-height: 1.45; }
.m8-job__tag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border: 1px solid var(--navy);
  border-radius: 4px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
}
.m8-job__text { margin: 0 0 12px; font-size: 1.5rem; line-height: 1.85; }
@media (min-width: 768px) {
  .m8-job { padding: 26px 30px; }
  .m8-job__title { font-size: 2.1rem; }
  .m8-job__text { font-size: 1.6rem; }
}

/* =============================================================================
   13. m8-cta — 目的別の相談導線
   「大きな色面＋お問い合わせだけ」をやめ、用件ごとの入口を並べる。
   ========================================================================== */
.m8-cta { padding-block: 48px 56px; background-color: var(--cream); }
.m8-cta__inner { max-width: var(--w-1000); margin-inline: auto; padding-inline: 20px; }
.m8-cta__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1.4; }
.m8-cta__text { margin: 0 0 24px; font-size: 1.55rem; line-height: 1.9; }
.m8-cta__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.m8-cta__card {
  padding: 20px;
  border-left: 8px solid var(--navy);
  border-radius: 0 12px 12px 0;
  background-color: var(--white);
}
.m8-cta__card:nth-child(2) { border-left-color: var(--coral); }
.m8-cta__card:nth-child(3) { border-left-color: var(--slate); }
.m8-cta__card:nth-child(4) { border-left-color: var(--line); }
.m8-cta__who { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1.45; }
.m8-cta__what { margin: 0 0 14px; font-size: 1.5rem; line-height: 1.8; }
.m8-cta__actions { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.m8-cta__btn {
  display: block;
  padding: 14px 20px;
  border-radius: 99px;
  background-color: var(--navy);
  color: var(--white);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.m8-cta__btn:hover { opacity: 0.88; }
.m8-cta__btn--line { background-color: #157a2b; }   /* 既存 #00b301 はコントラスト不足のため暗くした */
.m8-cta__btn--ghost { background-color: var(--white); color: var(--navy); border: 2px solid var(--navy); }
.m8-cta__ext { display: block; margin-top: 2px; font-size: 1.3rem; font-weight: 500; color:#FFF}
.m8-cta__ext--ghost{color:var(--navy);}
@media (min-width: 768px) {
  .m8-cta { padding-block: 72px 80px; }
  .m8-cta__title { font-size: 3.2rem; }
  .m8-cta__text { font-size: 1.7rem; }
  .m8-cta__card { padding: 26px 30px; }
  .m8-cta__who { font-size: 2rem; }
  .m8-cta__actions { flex-direction: row; flex-wrap: wrap; }
  .m8-cta__btn { display: inline-block; padding: 14px 26px; text-align: left; }
}

/* =============================================================================
   14. m8-footer — フッター
   SNSは「いま無いものは書かない、増えても崩れない」構造にする。
   ========================================================================== */
.m8-footer { border-top: 1px solid var(--line-light); background-color: var(--white); }
.m8-footer__inner { max-width: var(--w-1280); margin-inline: auto; padding: 40px 20px 24px; }
.m8-footer__brand { margin: 0 0 24px; font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--navy); }
.m8-fnav { display: grid; gap: 24px; margin: 0 0 28px; }
.m8-fnav__group-title {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-light);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--slate);
}
.m8-fnav__list { margin: 0; padding: 0; list-style: none; }
.m8-fnav__list a { display: block; padding: 9px 0; font-size: 1.5rem; line-height: 1.5; }
.m8-fnav__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.m8-sns { display: grid; gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.m8-sns__group-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; color: var(--slate); }
.m8-sns__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.m8-sns__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.5rem; text-decoration: underline; text-underline-offset: 4px; }
.m8-footer__bottom { border-top: 1px solid var(--line-light); }
.m8-footer__bottom-inner { max-width: var(--w-1280); margin-inline: auto; padding: 16px 20px; }
.m8-footer__copy { margin: 0; font-size: 1.3rem; color: var(--slate); }
@media (min-width: 768px) {
  .m8-footer__inner { padding: 56px 20px 32px; }
  .m8-fnav { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
  .m8-sns { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* =============================================================================
   15. m8-flow — 手順（既存 bk-steps は画像前提のため、文字だけの手順用）
   ========================================================================== */
.m8-flow { counter-reset: m8flow; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.m8-flow__item {
  position: relative;
  padding: 16px 18px 18px 56px;
  border-radius: 12px;
  background-color: var(--white);
  border: 1px solid var(--line-light);
}
.m8-sec--cream .m8-flow__item { background-color: var(--white); }
.m8-flow__item::before {
  counter-increment: m8flow;
  content: counter(m8flow);
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--navy);
  color: var(--white);
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 700;
}
.m8-flow__title { margin: 0 0 4px; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; line-height: 1.45; }
.m8-flow__text { margin: 0; font-size: 1.45rem; line-height: 1.8; }
@media (min-width: 768px) {
  .m8-flow { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .m8-flow__title { font-size: 1.8rem; }
  .m8-flow__text { font-size: 1.5rem; }
}

/* =============================================================================
   16. m8-def — 定義・箇条（用語＋説明）
   ========================================================================== */
.m8-def { margin: 0; }
.m8-def__item { padding: 16px 0; border-top: 1px solid var(--line-light); }
.m8-def__item:last-child { border-bottom: 1px solid var(--line-light); }
.m8-def__term { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; line-height: 1.5; }
.m8-def__desc { margin: 0; font-size: 1.5rem; line-height: 1.9; }
@media (min-width: 768px) {
  .m8-def__item { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 24px; padding: 22px 0; }
  .m8-def__term { margin: 0; font-size: 1.8rem; }
  .m8-def__desc { font-size: 1.6rem; }
}

/* =============================================================================
   17. design-lab 専用の表示（本番サイトには含めない）
   ========================================================================== */
.m8-labbrief {
  background-color: #10202c;
  color: #e8ecf2;
  font-family: system-ui, "Hiragino Sans", sans-serif;
}
.m8-labbrief__inner { max-width: var(--w-1160); margin-inline: auto; padding: 20px; }
.m8-labbrief__flag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: 4px;
  background-color: #7fd1c8;
  color: #0b1116;
  font-size: 1.2rem;
  font-weight: 700;
}
.m8-labbrief__title { margin: 0 0 6px; font-size: 1.9rem; font-weight: 700; }
.m8-labbrief__sub { margin: 0 0 14px; font-size: 1.4rem; line-height: 1.8; color: #cfd8e3; }
.m8-labbrief__grid { display: grid; gap: 14px; margin: 0; }
.m8-labbrief__grid dt { font-size: 1.3rem; font-weight: 700; color: #7fd1c8; }
.m8-labbrief__grid dd { margin: 4px 0 0; font-size: 1.35rem; line-height: 1.8; }
.m8-labbrief__grid ul { margin: 0; padding-left: 1.2em; }
.m8-labbrief a { color: #9fe3db; text-decoration: underline; }
@media (min-width: 768px) {
  .m8-labbrief__inner { padding: 24px 20px 28px; }
  .m8-labbrief__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 32px; }
}

/* 未確定事項の赤枠メモ（refine.css の .lab-todo と同じ役割。
   新規ページでも既存クラスをそのまま使うため、ここでは余白だけ足す） */
.m8-sec .lab-todo { margin-top: 24px; }