@charset "utf-8";

/* Aimax合同会社 ── モバイル優先 */

:root {
  /* ブラウザ側の自動ダークモード反転を止める。
     反転されるとブランド5色がすべて別の色になるため */
  color-scheme: only light;

  --deep-navy: #0E264A;
  --warm-gold: #B08A3F;
  --ivory:     #F9F6EE;
  --warm-gray: #A8A29A;
  --dark-gold: #8A6A2F;

  --font-jp: "Noto Serif JP", Georgia, "Times New Roman", "Yu Mincho", serif;

  --inner-max: 720px;
  --side-pad: 24px;
}

/* ---- リセット（最小限） ---- */
*,
*::before,
*::after { box-sizing: border-box; }

body,
h1, h2, h3, p, ol { margin: 0; }

ol { padding-inline-start: 0; list-style: none; }

/* ---- 基本 ---- */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ivory);
  color: var(--deep-navy);
  font-family: var(--font-jp);
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
}

.l-inner {
  width: 100%;
  max-width: var(--inner-max);
  margin-inline: auto;
  padding-inline: var(--side-pad);
}

/* ---- ヘッダ ---- */
/* 固定しない（スクロールで流す）。sticky にしないので
   アンカーで飛んだときに見出しが隠れる問題も起きない */
.site-header {
  padding-block: 20px;
  border-bottom: 1px solid var(--warm-gray);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header__logo {
  width: 32px;
  height: auto;          /* 縦横比を固定する（ガイドライン 2.2） */
  flex: none;
}

/* 欧文は Georgia、和文は Noto Serif JP に落ちる */
.wordmark {
  font-family: Georgia, "Noto Serif JP", "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* ---- ヘッド ---- */
.hero__inner {
  padding-block: 56px 64px;
  text-align: center;
}

.hero__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* 1文ずつブロックにする。<br> で折らないので
   320px幅でも不自然な位置で折れない */
.hero__line {
  display: block;
}

/* 文節のかたまり。この内側では折り返さないので
   「お預かりしま / す。」のような切れ方が起きない。
   入りきらないときは、かたまりごと次の行へ送られる */
.nb {
  display: inline-block;
}

.hero__line--strong {
  margin-top: 8px;
}

/* 横幅を絞って折り返させる。強制改行はしない。
   1行あたりが短くなるので、中央揃えでも目が迷いにくい */
.hero__lead {
  margin-top: 28px;
  max-width: 20em;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.9;
}

/* 段落と段落のあいだを1行分あける。
   「何を引き受けるか」と「その結果どうなるか」の区切り */
.hero__lead + .hero__lead {
  margin-top: 1.9em;
}

/* ボタンのすぐ下。本文と同じ大きさ・同じ色にする */
.hero__proof {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--deep-navy);
}

/* サブコピーとのあいだを広くとる。
   ここが空くほど、ボタンと下の一文がひとかたまりに見える */
.hero__cta {
  margin-top: 44px;
}

/* ---- セクション共通 ---- */
/* 見出しと前置きだけ中央揃え。ヘッドから流れを引き継ぎつつ、
   本文（実績の各件）は左揃えにして読みやすさを優先する */
.section__title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: center;
}

/* 注釈あつかい。Warm Gray は文字に使えないため（比率2.34:1）、
   Deep Navy のまま不透明度で落とす（ガイドライン 3.4） */
.section__lead {
  margin-top: 20px;
  max-width: 30em;
  margin-inline: auto;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(14, 38, 74, 0.78);
}

/* ---- お預かりしている仕事（実績）／お預かりしたあとの流れ ---- */
.works__inner,
.flow__inner {
  padding-block: 48px 56px;
}

/* 実績のすぐ下に続くので、上の余白を詰めて重さを出しすぎない */
.flow__inner {
  padding-block-start: 0;
}

.works__list {
  margin-top: 32px;
}

/* 件と件のあいだは余白だけで区切る。罫線も枠も使わない */
.work + .work {
  margin-top: 36px;
}

/* 番号は左の列に出す。縦に積むと1件あたり1行ぶん増え、
   8件で8行になってページが伸びる（2026-08-07 コンパクト化） */
.work {
  display: grid;
  grid-template-columns: 2.1em 1fr;
  column-gap: 12px;
  align-items: start;
}

/* 大きな数字を視線の起点にする。面や線を足さずに、
   ここが1件のはじまりだと分かるようにするための扱い。
   Dark Gold × Ivory は 4.65:1 で AA を満たす（ガイドライン 3.3）。
   Warm Gold だと 2.97:1 で足りないので使わない */
.work__num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--dark-gold);
}

.work__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
}

.work__body {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.75;
}

/* 流れの番号は1桁。実績の 01〜05 と見分けがつくよう、
   桁数が違うだけで別の並びだと分かる */
.work__num--flow {
  letter-spacing: 0;
}

/* 本文が2段落続くときは1行分あける */
.work__body + .work__body {
  margin-top: 1.3em;
}

/* 効き目の一文。各件でいちばん読ませたい結論。
   見出しがすでに太字なので、ここも太字にすると太字が連続してうるさくなる。
   太さではなく「本文と同じ濃さ」と「広めの余白」で独立させる。
   初版＝15px・薄い細字（目立たない）→ 太字（うるさい）→ この形に落ち着いた */
.work__effect {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.75;
}

/* ---- お預かりする範囲 ---- */
/* 番号付きの3ステップとは別の性格の文なので、余白を広くとって
   別ブロックだと分かるようにする。枠線・背景は使わない */
.scope {
  margin-top: 40px;
  max-width: 30em;
  margin-inline: auto;
}

.scope__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.scope__body {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.9;
}

/* 締め。ボタンを置かず、静かな一文で区画を閉じる。
   05の3段落目に見えてしまったため、上の余白を大きく取り、
   太字にして「この区画のまとめ」だと分かるようにした
   （2026-08-07）。上に64px空くので、太字が連続する問題は起きない */
.works__close {
  margin-top: 64px;
  max-width: 26em;
  margin-inline: auto;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
}

/* ---- できること ---- */
.offer__inner {
  padding-block: 0 56px;
}

.offer__list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.offer__item + .offer__item {
  margin-top: 28px;
}

/* モバイルは横組み。アイコンを上に置くと3本柱が縦に伸びるため
   （2026-08-07 コンパクト化）。名刺の裏面も横組みなので
   地続き感はむしろ強まる */
.offer__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
}

/* 共有フォルダの正本をそのまま置く。色も形も変えない
   （ガイドライン 6.4「過度な加工をしない」）。
   文字ではなく装飾なので、意味は下の見出しと本文が持つ */
.offer__icon {
  width: 48px;
  height: 48px;
  display: block;
  grid-row: 1 / span 2;
  align-self: center;
}

.offer__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.offer__body {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.8;
}

/* ---- 私について ---- */
/* ページ唯一の濃色面。ここで区切りをつくる */
.about {
  background: var(--deep-navy);
  color: var(--ivory);
}

.about__inner {
  padding-block: 48px 56px;
  max-width: 640px;
}

/* 本文は全区画で同じ大きさにそろえる（ガイドライン 4.4）。
   濃色の面では同じ太さでも太く見えるが、指定で補正しない */
.about__body {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.75;
}

/* 締めだけ中央揃え。区画を静かに閉じる */
.about__close {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.9;
  font-weight: 700;
  text-align: center;
}

/* ---- ご相談ください ---- */
.contact__inner {
  padding-block: 48px 56px;
  text-align: center;
}

.contact__body {
  max-width: 22em;
  margin-inline: auto;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.9;
}

.contact__cta {
  margin-top: 36px;
}

/* ---- フッター ---- */
.site-footer {
  background: var(--deep-navy);
  color: var(--ivory);
}

.site-footer__inner {
  padding-block: 40px 44px;
  text-align: center;
}

.site-footer__logo {
  width: 56px;
  height: auto;          /* 縦横比を固定する（ガイドライン 2.2） */
  display: block;
  margin-inline: auto;
}

.site-footer__name {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-footer__copy {
  margin-top: 10px;
  font-family: Georgia, "Noto Serif JP", "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;        /* 指で押せる大きさ。推奨44px以上を満たす */
  padding: 12px 32px;
  border-radius: 5px;      /* 控えめに丸める（4〜6px） */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
}

/* 枠線 Dark Gold は、外周と背景の差を確保するため */
.btn--primary {
  background: var(--warm-gold);
  color: var(--ivory);
  border: 1px solid var(--dark-gold);
}

.btn--secondary {
  background: var(--deep-navy);
  color: var(--ivory);
}

.btn:focus-visible {
  outline: 3px solid var(--deep-navy);
  outline-offset: 3px;
}

/* ---- 狭い画面（390px 未満） ----
   見出し3行目が2行に割れるのを防ぐため、ここで文字を1段落とす */
@media (max-width: 389px) {
  :root { --side-pad: 20px; }

  .hero__title { font-size: 26px; }

  .section__title { font-size: 22px; }

  /* iPhone SE（375px）で見出しが折り返し、送り仮名だけが
     次の行に落ちるのを防ぐ。番号の列も少し詰める */
  .work { grid-template-columns: 1.9em 1fr; column-gap: 10px; }
  .work__num { font-size: 24px; }
  .work__title { font-size: 16px; }

  .btn {
    display: flex;      /* 幅いっぱいにして押しやすくする */
    width: 100%;
    padding-inline: 20px;
  }
}

/* ---- タブレット以上 ---- */
@media (min-width: 768px) {
  body { font-size: 18px; }

  .site-header { padding-block: 28px; }
  .site-header__logo { width: 38px; }
  .wordmark { font-size: 20px; }

  .hero__inner { padding-block: 88px 96px; }

  .hero__title {
    font-size: 44px;
    line-height: 1.5;
  }

  .hero__line--strong { margin-top: 12px; }

  .hero__lead {
    margin-top: 36px;
    font-size: 18px;
  }

  .hero__proof { font-size: 18px; }

  .hero__cta { margin-top: 40px; }

  .section__title { font-size: 31px; }
  .section__lead { margin-top: 24px; }

  .works__inner,
  .flow__inner { padding-block: 88px 96px; }
  .flow__inner { padding-block-start: 0; }
  .works__list { margin-top: 56px; }
  .work + .work { margin-top: 48px; }

  .work { grid-template-columns: 2.2em 1fr; column-gap: 22px; }
  .work__num { font-size: 32px; }
  .work__title { font-size: 21px; }
  .work__body { font-size: 18px; }
  .work__effect { font-size: 16px; }

  .scope { margin-top: 72px; }
  .scope__title { font-size: 18px; }
  .scope__body { font-size: 17px; }

  .offer__inner { padding-block: 0 96px; }

  /* 3本柱は横に並べる。名刺の裏面と同じ並びになる */
  .offer__list {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
  }

  .offer__item + .offer__item { margin-top: 0; }

  .offer__icon { width: 72px; height: 72px; }
  .offer__name { font-size: 19px; }
  .offer__body { font-size: 17px; }

  .about__inner { padding-block: 88px 96px; }
  .about__body { margin-top: 28px; }
  .about__close { margin-top: 36px; font-size: 18px; }

  .contact__inner { padding-block: 88px 96px; }
  .contact__body { margin-top: 28px; font-size: 18px; }
  .contact__cta { margin-top: 44px; }

  .site-footer__inner { padding-block: 52px 56px; }
  .site-footer__logo { width: 64px; }

  .works__close {
    margin-top: 72px;
    font-size: 18px;
  }
}


/* 見出しの上に置く英字ラベル。書体は名刺と同じ Georgia（ガイドライン 7.4） */
.section__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: var(--dark-gold);
  text-align: center;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .section__label { font-size: 13px; }
}


/* ==================================================================
   カードと囲み（ブランドガイドライン 7.4／7.5）
   ・実績と「できること」は白い面のカード。外周に線は引かない
   ・効き目の一文だけ、白地＋細い金の線で囲む
   ================================================================== */

/* --- 実績：1件＝1枚のカード --- */
.works .works__list { margin-top: 32px; }

.works .work {
  display: block;              /* 番号を左に出す組みをやめ、カードの中で縦に積む */
  background: #FFFFFF;
  border-radius: 3px;
  padding: 22px 20px 24px;
}
.works .work + .work { margin-top: 14px; padding-top: 22px; }

.works .work__num {
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.works .work__title { font-size: 17px; }
.works .work__body { margin-top: 6px; }

/* --- できること：3本柱もカードにそろえる --- */
.offer__item {
  background: #FFFFFF;
  border-radius: 3px;
  padding: 18px 20px;
}
.offer__item + .offer__item { margin-top: 14px; padding-top: 18px; }

/* --- 効き目の一文。ページの中で線を使うのはここだけ（ガイドライン 7.5）。
       太さは1pxが下限なので、細く見せたいときは濃さで調整する --- */
.work__effect {
  margin-top: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(176, 138, 63, 0.70);
  border-radius: 3px;
  padding: 12px 14px;
}
.works .work__effect { margin-top: 14px; }
.flow .work__effect { margin-top: 14px; }

/* --- 画面が広いとき --- */
@media (min-width: 768px) {
  .works .works__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
  }
  /* 締めの1件は横いっぱいに。右側が空いて途中で終わったように見えるのを防ぐ。
     順番のある「流れ」は2列にしない（読み順が壊れるため） */
  .works .work:last-child { grid-column: 1 / -1; }
  .works .work + .work { margin-top: 0; }
  .works .work { padding: 26px 24px 28px; }
  .offer__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .offer__item + .offer__item { margin-top: 0; }
}

@media (max-width: 389px) {
  .works .work { padding: 20px 18px 22px; }
  .works .work__num { font-size: 19px; }
}

/* --- 実績のアイコン（ガイドライン 7.4.2）。アイコンと見出しは中央、本文は左 --- */
.work__icon {
  width: 54px;
  height: 54px;
  display: block;
  margin-inline: auto;
  margin-bottom: 10px;
}
.works .work__title { text-align: center; }

@media (min-width: 768px) {
  .work__icon { width: 58px; height: 58px; margin-bottom: 12px; }
}
@media (max-width: 389px) {
  .work__icon { width: 48px; height: 48px; }
}

/* --- 区画の番号（ガイドライン 7.4.1）。番号は区画の目印としてだけ使い、項目には振らない --- */
.section__num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--dark-gold);
  text-align: center;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  .section__num { font-size: 28px; margin-bottom: 6px; }
}

/* 濃紺の面では Dark Gold が 2.9992:1 で 3:1 に届かない。
   Warm Gold なら 4.6983:1 で AA を満たす（ガイドライン 3.3／7.4） */
.about .section__num,
.about .section__label { color: var(--warm-gold); }


/* --- 「お預かりしたあとは」は1〜3をまとめて1枚のカード（ガイドライン 7.4.3）。
       カードの枚数を中身の数に合わせる。項目どうしは余白だけで分ける --- */
.flow .works__list {
  background: #FFFFFF;
  border-radius: 3px;
  padding: 26px 20px 28px;
  margin-top: 32px;
}
.flow .work + .work { margin-top: 30px; padding-top: 0; }

@media (min-width: 768px) {
  .flow .works__list { padding: 32px 28px 34px; }
}
@media (max-width: 389px) {
  .flow .works__list { padding: 22px 16px 24px; }
}

/* --- 流れの番号は見出しの行の中に置く（ガイドライン 7.4.3）。
       左の列に飛び出させると、本文と効き目の一文が右へ寄って見える --- */
.flow .work { display: block; }
.work__num--inline {
  /* Georgia の数字はオールドスタイル（1と2が低く、3が下に飛び出す）で高さがそろわない。
     ここだけ和文書体にする。区画番号 01〜05 は Georgia のまま（ガイドライン 7.4.3） */
  font-family: "Noto Serif JP", serif;
  font-size: 1em;          /* 見出しの文字サイズに追従させる。PCでもスマホでもそろう */
  font-weight: 700;        /* 見出しが太字なので、並べたときに細く見えないようそろえる */
  letter-spacing: 0;
  color: var(--dark-gold);
  margin-right: 0.7em;
}

/* --- 流れの効き目の一文は、囲まずに文字色だけで分ける（ガイドライン 7.5）。
       実績は言い切る場所なので囲みで強く、流れは説明なので色だけで静かに --- */
.flow .work__effect {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 18px;
  color: var(--dark-gold);
}

/* ==================================================================
   ヘッドの名刺の帯（ガイドライン 7.4.4）
   名刺の表面を、連絡先なしでHTMLで組み直したもの。画像は使わない
   ================================================================== */
.card-band {
  display: grid;
  grid-template-columns: auto 30px minmax(0, 1fr);   /* ロゴ ／ 金のカーブ ／ テキスト */
  align-items: center;
  background: #FFFFFF;
  border-radius: 3px;
  padding: 26px 16px;
  margin-bottom: 36px;
  text-align: left;
  overflow: hidden;
  /* 影は右と下だけに落とす。ぼかしを抑えると紙の縁が出て持ち上がって見える。
     影は線ではないので 6.1 から外れない */
  box-shadow:
    2px 2px 0 rgba(14, 38, 74, 0.05),
    5px 5px 3px rgba(14, 38, 74, 0.16);
}

/* 名刺の金のカーブ。上下の端まで通し、右へ膨らませる */
.card-band__curve {
  width: 30px;
  display: block;
  align-self: stretch;
  margin-block: -26px;      /* padding-block と同じ値で外へ逃がす */
  height: auto;
}

.card-band__logo { width: 112px; height: auto; display: block; }
/* 金のカーブと文字が近すぎないよう、テキストを右へ寄せる */
.card-band__body { padding-left: 18px; }

.card-band__copy { font-size: 13px; line-height: 1.75; }
.card-band__name {
  margin-top: 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.card-band__role {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  margin-bottom: 3px;
}
.card-band__en {
  margin-top: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dark-gold);
}
.card-band__url {
  margin-top: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dark-gold);
}

@media (min-width: 768px) {
  .card-band { padding: 40px 34px; margin-bottom: 48px; grid-template-columns: auto 54px minmax(0, 1fr); }
  .card-band__logo { width: 164px; }
  .card-band__curve { width: 54px; margin-block: -40px; }
  .card-band__body { padding-left: 34px; }
  .card-band__copy { font-size: 16px; }
  .card-band__name { font-size: 26px; }
  .card-band__role { font-size: 12px; }
  .card-band__en { font-size: 14px; }
  .card-band__url { font-size: 14px; margin-top: 16px; }
}
@media (max-width: 389px) {
  .card-band { padding: 22px 14px; grid-template-columns: auto 24px minmax(0, 1fr); }
  .card-band__logo { width: 94px; }
  .card-band__curve { width: 24px; margin-block: -22px; }
  .card-band__body { padding-left: 13px; }
  .card-band__name { font-size: 17px; }
}

/* 375px では「経営者の時間を創ることが、」が1pxだけ入りきらず、
   文節の途中で折れてしまう。文字を1px落として幅を確保する */
@media (max-width: 389px) {
  .card-band__logo { width: 88px; }
  .card-band__copy { font-size: 12px; }
}

/* --- ヘッダー（ガイドライン 7.4.5）
       社名だけの細い濃紺の帯にして固定する。ロゴは置かない（名刺の帯にあるため）。
       固定できるようになったのは、ボタンの飛び先を外部フォームに変えて
       ページ内で飛ぶ箇所が無くなったから。固定する以上、背景の面が要る --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--deep-navy);
  color: var(--ivory);
  border-bottom: none;
  padding-block: 9px;
}
.wordmark { font-size: 15px; }

@media (min-width: 768px) {
  .site-header { padding-block: 12px; }
  .wordmark { font-size: 17px; }
}

/* --- 誰に向けたページかを最初に示す一文（ガイドライン 7.4.6） --- */
.hero__to {
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--dark-gold);
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .hero__to { font-size: 14px; margin-bottom: 20px; }
}

/* --- 「お預かりする範囲」を02のカードの中へ入れる（ガイドライン 7.4.3）。
       外に出すと独立した区画に見え、どこに属する話か分からなくなる --- */
.flow__card {
  background: #FFFFFF;
  border-radius: 3px;
  padding: 26px 20px 28px;
  margin-top: 32px;
}
.flow .works__list { background: none; border-radius: 0; padding: 0; margin-top: 0; }

/* 1〜3（進み方）とは性質が違う（線引き）ので、濃紺の面にして立ち止まって読む場所にする。
   「私について」と同じ濃紺なので、濃紺＝人となりに関わる話、という意味がそろう
   （ガイドライン 7.4.7）。アイボリーの面は使わない ── 地アイボリー→白カード→
   またアイボリーで、同じ色が入れ子になり穴が空いたように見えるため */
.scope {
  margin-top: 40px;
  background: var(--deep-navy);
  color: var(--ivory);
  border-radius: 3px;
  padding: 22px 18px 24px;
  max-width: none;
}
/* 本文は全区画で16px・行間1.75（ガイドライン 4.4）。ここだけ1.9で大きく見えていた */
.scope__body { line-height: 1.75; }

@media (min-width: 768px) {
  .flow__card { padding: 32px 28px 34px; }
  .scope { margin-top: 48px; padding: 28px 26px 30px; }
}
@media (max-width: 389px) {
  .flow__card { padding: 22px 16px 24px; }
}

/* 流れの番号は見出しと同じ Deep Navy にそろえる */
.work__num--inline { color: var(--deep-navy); }