/* モーダル（SHEとは／SHEプロジェクト／働く姿）。2026-10-19
   - 中身は文字で組む（本人決定）。数値は Figma のPC（1440幅）・SP（375幅）から
   - PC（1024px〜）：暗い背景の上にピンクの板（幅1200）。板の中だけでなく、画面ごとスクロールする
   - SP・iPad（〜1023px）：PCと同じく暗い背景＋ピンクの板（左右に余白・2026-10-19 本人）。iPadはSPの絵を1.4倍で中央に置く
   - ×ボタンはスクロールしても板の右上に残る（sticky） */

/* ---------- 共通の枠 ---------- */
.modal {
  /* dialog の初期の見た目を消して、画面いっぱいのスクロール面にする */
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--color-navy);
  /* 色の組み合わせ。学ぶ＝ピンク（初期値）、働く＝青（.modal--blue） */
  --modal-bg: var(--color-pink-200);
  --modal-accent: var(--color-pink-500);
  --modal-card-shadow: var(--shadow-pc-pink-s);
}
/* 働く：板は #e4edff（Figma の値。トークンに無い色）、ボタン・×・カードの影は青 */
.modal--blue {
  --modal-bg: #e4edff;
  --modal-accent: var(--color-blue);
  --modal-card-shadow: var(--shadow-pc-s);
}
.modal::backdrop { background: rgb(2 2 24 / .6); }   /* Figma Rectangle 5603（#020218・60%） */
/* 開いている間は後ろのページをスクロールさせない */
html:has(.modal[open]) { overflow: hidden; }

.modal__panel {
  position: relative;
  width: min(1200px, calc(100% - 64px));
  margin: 140px auto 80px;                 /* Figma：上140 */
  padding: 30px 30px 70px;
  background: var(--modal-bg);
  box-shadow: var(--shadow-modal);   /* 板の下にうっすら影（2026-10-19 本人）。暗い背景の上でも見える型 */
}
.modal__close {
  /* 高さを取らずに右上へ。スクロールしても板の中で上に残る */
  position: sticky; top: 30px; z-index: 2;
  display: grid; place-items: center;
  width: 50px; height: 50px; margin: 0 0 -50px auto;
  border-radius: 50%;
  background: var(--glass-bg); border: var(--glass-border); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow);   /* すりガラス（10/20） */
  box-shadow: 0 2px 10px color-mix(in srgb, var(--modal-accent) 14%, transparent);   /* 影はモーダルの色で・控えめに（本人 10/20） */
  transition: transform .2s ease;
}
.modal__close svg { width: 15px; height: 15px; fill: none; stroke: var(--modal-accent); stroke-width: 1.6; stroke-linecap: round; }
.modal__close:hover { transform: rotate(90deg); }
.modal__close:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }
.modal__panel:focus { outline: none; }   /* 開いたときは板にフォーカスを置く（×ボタンに青い枠が出ないように） */
.modal__body { width: min(999px, 100%); margin: 40px auto 0; }

/* 開く・閉じるの動きは付けない（本人 10/20「ふわっと出てくる系は全部なし」）。動くのはボタンのホバーだけ */

/* SP・iPad：PCと同じく暗い背景の上にピンクの板を置く（幅いっぱいにしない。2026-10-19 本人） */
@media (max-width: 1023px) {
  .modal__panel { width: calc(100% - 32px); margin: 56px auto 40px; padding: 12px 12px 24px; }
  .modal__close { top: 12px; width: 40px; height: 40px; margin: 0 0 -40px auto; }
  .modal__close svg { width: 13px; height: 13px; }
  .modal__body { width: 100%; margin-top: 55px; }   /* ×の上端→カードの上端 55（Figma） */
}
/* iPad（768〜1023px）：SPの絵を1.4倍で中央に（他のセクションの「SPの絵を最大1.5倍」と同じ考え方） */
@media (min-width: 768px) and (max-width: 1023px) {
  .modal__panel { width: min(680px, calc(100% - 64px)); margin-top: 80px; padding: 24px 24px 50px; }
  .modal__close { top: 24px; width: 50px; height: 50px; margin-bottom: -50px; }
  .modal__body { width: 400px; margin: 40px auto 0; zoom: 1.4; }
}

/* ---------- ボタン（輪郭だけの丸いボタン） ---------- */
.pill-btn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 368px; max-width: 100%; height: 55px; margin: 0 auto;
  border: 2px solid var(--modal-accent, var(--color-pink-500)); border-radius: 999px;   /* PCは2px・SPは1px（Figma） */
  background: rgb(255 255 255 / .3);
  color: var(--modal-accent, var(--color-pink-500));
  font: 500 16px/1 var(--font-sans); letter-spacing: .1em;
}
.pill-btn svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 矢印は右の丸い部分（R）の中の真ん中に置く（本人 10/20 試し）。文字はボタンの真ん中 */
.pill-btn { position: relative; --h: 55px; }
.pill-btn svg { position: absolute; top: calc(50% - 5.5px); right: calc(var(--h) / 2 - 5.5px + 8px); }   /* 矢印は丸い部分の真ん中より8px内側（本人 10/21） */
.pill-btn--s { width: 306px; height: 46px; font-size: 13.3px; --h: 46px; }
/* ホバー：輪郭だけのボタンは全部塗らず、中をうっすら色に（本人 10/21 B案。サイト内のボタンを全部同じ動きに） */
.pill-btn { transition: background .2s ease, color .2s ease; }
.pill-btn:not(.pill-btn--fill):hover { background: color-mix(in srgb, var(--modal-accent, var(--color-pink-500)) 12%, #fff); }
.pill-btn:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }
@media (max-width: 1023px) {
  .pill-btn, .pill-btn--s { width: 229px; height: 34px; gap: 10px; border-width: 1px; font-size: 12px; letter-spacing: .05em; --h: 34px; }
  .pill-btn svg { width: 9px; height: 9px; top: calc(50% - 4.5px); right: calc(var(--h) / 2 - 4.5px + 5px); }
}

/* ---------- SHEとは（学ぶ・働く）：サービスのカード ---------- */
.svc-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }   /* Figmaは17。5px広げる（本人 10/21） */
.svc-block {
  display: flex; flex-direction: column;
  padding: 29px 32px 25px;
  background: var(--color-white); border-radius: 2px;
  box-shadow: var(--modal-card-shadow);
}
.svc-block__head { display: flex; align-items: center; gap: 25px; }
.svc-block__logo { flex: none; }
.svc-block__logo img { width: 100%; }
.svc-block__logo--likes { width: 187px; }
.svc-block__logo--pro { width: 177px; }
.svc-block__logo--money { width: 163px; }
.svc-block__logo--works { width: 201px; }
.svc-block__logo--growth { width: 242px; }
/* NEWの札：PCはカードの左上の角に 74×32（10/28 Figma PC 1889:7898・Poppins 20）。SPは下の @media で並びの中に置く */
.svc-block__tag { display: none; }
@media (min-width: 1024px) {
  .svc-block--growth { position: relative; }
  .svc-block--growth .svc-block__tag { display: grid; place-items: center; position: absolute; left: 0; top: 0; width: 74px; height: 32px;
    background: var(--color-pink-500); border-radius: 2px 0 2px 0; color: var(--color-white); font: 400 20px/1 var(--font-en); letter-spacing: .06em; }
}
.svc-block__catch {
  padding-left: 25px; border-left: 1px solid rgb(7 8 77 / .3);
  font: 500 18px/1.57 var(--font-sans); letter-spacing: .02em;
  white-space: nowrap;   /* 改行位置は <br> で決める。幅が足りないときに「なる」だけ落ちないように */
}
.svc-block__desc {
  margin-top: 25px;
  font: 400 16px/1.62 var(--font-sans); letter-spacing: .02em;
  text-align: justify;
}
.svc-block .pill-btn { margin-top: auto; }
.svc-block__desc + .pill-btn { margin-top: 26px; }
/* 10/29 夕 Figma PC 2538:56401（下の2枚）：PRO＝上33・左35／money＝上30.5・左43、ロゴと見出しの間 PRO 22・money 35、見出し→本文18、ボタンは下から31（板の高さ270） */
@media (min-width: 1024px) {
  .svc-block--pro, .svc-block--money { min-height: 270px; padding-bottom: 31px; }
  .svc-block--pro { padding: 33px 32px 31px 35px; }
  .svc-block--money { padding: 30.5px 32px 31px 43px; }
  .svc-block--pro .svc-block__head { gap: 22px; }
  .svc-block--money .svc-block__head { gap: 35px; }
  :is(.svc-block--pro, .svc-block--money) .svc-block__desc { margin-top: 18px; }
  :is(.svc-block--pro, .svc-block--money) .svc-block__desc + .pill-btn { margin-top: auto; }
}

/* 上の大きいカード（SHElikes）：左に文字、右に端末の写真。ボタンは文字の列の下 */
.svc-block--main {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: var(--text-w, 477px) 1fr; column-gap: 37px;
  padding: 40px 36px 40px 40px;
}
.svc-block--main .svc-block__head { gap: 35px; }
.svc-block--main .svc-block__catch { padding-left: 30px; }
.svc-block--main .svc-block__desc { margin-top: 30px; }
.svc-block--main .svc-block__img { grid-row: 1 / 3; grid-column: 2; align-self: start; margin-top: 2px; }
.svc-block--main .svc-block__img img { width: 100%; }
.svc-block--main .pill-btn { grid-column: 1; margin-top: 31px; }
/* 学ぶ：上のSHElikesのボタンを、下のPROのボタンと左右の端をそろえる（本人 10/20）
   下のカードの幅＝(列−17)/2、ボタン368は真ん中 → カードの左端から ((下のカード幅)−368)/2。上のカードは左の余白40を引く */
.svc-modal { container-type: inline-size; }
@media (min-width: 1024px) {
  /* 狭いPC幅では下のボタンがカードに合わせて縮む（幅＝下のカード−左右の余白64）ので、上も同じ幅にする */
  [data-modal="she-learn"] .svc-block--main .pill-btn {
    --low-w: calc((100cqw - 22px) / 2); --btn-w: min(368px, var(--low-w) - 64px);   /* cqw は .svc-modal の幅（自分の中でしか使えない） */
    width: var(--btn-w); margin-left: calc((var(--low-w) - var(--btn-w)) / 2 - 40px); margin-right: 0;
  }
}
/* 働く：Growth Studio は見出しが長いので文字の列を広く（Figma 513） */
.svc-block--growth { --text-w: 513px; column-gap: 16px; }
.svc-block--growth .pill-btn { margin-left: 54px; margin-right: 0; }   /* ボタンは上のカードと同じ位置（Figma） */
.svc-block--main .svc-block__img--center { align-self: center; margin-top: 0; }

/* SP（〜1023px）：Figma SP 1559:6820（学ぶ）／1559:6984（働く）。本人が 10/22 に Figma で微調整したものに合わせ直した
   数値はカードの左上からの距離。iPad は .modal__body の zoom でこのまま拡大 */
@media (max-width: 1023px) {
  .svc-modal { grid-template-columns: 1fr; gap: 13px; }   /* カードの間はFigma（10）より広い13のまま（本人 10/21・10/22「実装が正」） */
  .svc-block { padding: 19px 22px 20px 23px; box-shadow: none; }   /* 本文の幅274（Figma） */
  .svc-block .pill-btn { margin: 15px auto 0; }
  .svc-block__img img { display: block; }   /* 画像の下に行の隙間を作らない */
  .svc-block__logo--likes { width: 97px; }
  .svc-block__logo--pro { width: 119px; }
  .svc-block__logo--money { width: 111px; }
  .svc-block__logo--works { width: 123px; }
  .svc-block__logo--growth { width: 168px; }

  /* ロゴ｜一言：縦線は高さ30・#c2c5cc。ロゴ→線→文字の間はカードごとに Figma の値（--g1・--g2） */
  .svc-block__head, .svc-block--main .svc-block__head { gap: 0; min-height: 30px; }
  .svc-block__catch, .svc-block--main .svc-block__catch {
    margin: -3px 0 -3px var(--g1, 15px); padding: 0 0 0 var(--g2, 15px); border-left: 0;
    background: linear-gradient(#c2c5cc, #c2c5cc) left center / 1px 30px no-repeat;
    font: 700 12px/1.49 var(--font-sans); letter-spacing: .02em;
  }
  .svc-block--pro .svc-block__head { --g1: 12px; --g2: 10px; }
  .svc-block--money .svc-block__head { --g1: 17px; }
  .svc-block--pro .svc-block__catch, .svc-block--money .svc-block__catch { letter-spacing: 0; }
  .svc-block--pro .svc-block__logo, .svc-block--money .svc-block__logo { margin-left: 2px; }
  .svc-block__desc, .svc-block--main .svc-block__desc { margin-top: 15px; font: 400 13px/1.538 var(--font-sans); letter-spacing: 0; }   /* 下の2枚は行間20 */
  .svc-block--pro, .svc-block--money { padding-top: 26px; padding-bottom: 20px; }   /* 10/29 夕 Figma 2538:57630 更新：板の高さ180・上26・下22（前は20） */
  :is(.svc-block--pro, .svc-block--money) .svc-block__desc { margin-top: 20px; }   /* 10/29 夕 本人「PROが変わってない」：Figma 2538:57768 は見出し→本文がもう5px広い（本文の頭 y70） */
  :is(.svc-block--pro, .svc-block--money) .pill-btn { margin-top: 10px; }   /* ボタンの頭 y119・板の高さ172（Figma） */   /* 10/29 本人：Figma 2538:57630 は板の上端→ロゴと見出しの頭が20（前は PRO 19・money 18） */

  /* 上の大きいカード（SHElikes・SHE WORKS・Growth Studio）：写真が上、本文の行間22 */
  .svc-block--main { display: flex; padding: 22px 22px 20px 23px; }
  .svc-block--main .svc-block__img { order: -1; }
  .svc-block--main .svc-block__desc { line-height: 1.692; }
  .svc-block--main .pill-btn { margin-top: 14px; }
  /* SHElikes：写真280幅（左22・上22）→ 5 → ロゴの行 → 13 → 本文 → 14 → ボタン
     ※ 本文との間は「行の箱」の上端から測る（Figma の文字枠は行より低く、上下にはみ出している分を差し引いた） */
  .svc-block--likes .svc-block__img { width: calc(100% + 7px); max-width: none; margin: 0 -6px 5px -1px; }
  .svc-block--likes .svc-block__desc { margin-top: 13px; }

  /* SHE WORKS：写真285幅（上18）→ 26 → ロゴと一言（中央・間20）→ 17 → 横線 → 15 → 本文 → 15 → ボタン */
  .svc-block--works { padding-top: 18px; }
  .svc-block--main.svc-block--works .svc-block__img { width: calc(100% + 11px); max-width: none; margin: 0 -5px 26px -6px; }
  .svc-block--main.svc-block--works .svc-block__head { justify-content: center; gap: 20px; padding-bottom: 17px; border-bottom: 1px solid #c2c5cc; }
  .svc-block--main.svc-block--works .svc-block__catch { margin: -3px 0; padding: 0; background: none; }
  .svc-block--works .svc-block__desc { margin-top: 15px; }
  .svc-block--main.svc-block--works .pill-btn { margin-top: 15px; }

  /* Growth Studio：スマホ3台309幅（上16）→ 13 → NEW＋ロゴ（中央・間13）→ 10 → 一言（1行・中央・13px）→ 15 → 横線 → 13 → 本文 → 14 → ボタン */
  .svc-block--growth { padding-top: 16px; }
  .svc-block--main.svc-block--growth .svc-block__img { width: calc(100% + 35px); max-width: none; margin: 0 -17px 13px -18px; }
  .svc-block--main.svc-block--growth .svc-block__head { flex-wrap: wrap; justify-content: center; gap: 10px 13px; padding-bottom: 15px; border-bottom: 1px solid #c2c5cc; }
  .svc-block__tag {
    display: grid; place-items: center; width: 43px; height: 20px;
    background: var(--color-pink-500); border-radius: 1px; color: var(--color-white);
    font: 400 13px/1 var(--font-en); letter-spacing: .06em;
  }
  .svc-block--main.svc-block--growth .svc-block__catch {
    flex-basis: 100%; margin: 0; padding: 0; background: none; text-align: center;
    font: 700 13px/20px var(--font-sans); letter-spacing: 0;
  }
  .svc-block--growth .svc-block__desc { margin-top: 13px; }
  .svc-block--main.svc-block--growth .pill-btn { margin: 14px auto 0; }
  /* 10/28 Figma SP（1559:6984）：“働く”のカードは タイトル（ロゴ＋一言）→ 写真 → 本文 → ボタン の順に。横線はなし
     SHE WORKS：上28 → ロゴと一言 → 22 → 写真285 → 25 → 本文 → 18 → ボタン → 20
     Growth Studio：上28 → NEW＋ロゴ → 18 → 一言 → 17 → スマホ3台309 → 12 → 本文 → 20 → ボタン → 20 */
  [data-modal="she-work"] .svc-block--main .svc-block__text { display: contents; }
  [data-modal="she-work"] .svc-block--main .svc-block__head { order: 0; }
  [data-modal="she-work"] .svc-block--main .svc-block__img { order: 1; }
  [data-modal="she-work"] .svc-block--main .svc-block__desc { order: 2; }
  [data-modal="she-work"] .svc-block--main .pill-btn { order: 3; }
  [data-modal="she-work"] .svc-block--main.svc-block--works { padding-top: 28px; }
  [data-modal="she-work"] .svc-block--main.svc-block--works .svc-block__head { gap: 17px; padding-bottom: 0; border-bottom: 0; }
  [data-modal="she-work"] .svc-block--main.svc-block--works .svc-block__catch { padding-left: 15px; background: linear-gradient(#c2c5cc, #c2c5cc) left center / 1px 30px no-repeat; }   /* ロゴ｜一言の縦線（Figma） */
  [data-modal="she-work"] .svc-block--main.svc-block--works .svc-block__img { margin: 22px -5px 0 -6px; }
  [data-modal="she-work"] .svc-block--works .svc-block__desc { margin-top: 20px; }
  [data-modal="she-work"] .svc-block--main.svc-block--works .pill-btn { margin-top: 15px; }
  [data-modal="she-work"] .svc-block--main.svc-block--growth { padding-top: 28px; }
  [data-modal="she-work"] .svc-block--main.svc-block--growth .svc-block__head { row-gap: 12px; padding-bottom: 0; border-bottom: 0; }
  [data-modal="she-work"] .svc-block--main.svc-block--growth .svc-block__img { margin: 15px -17px 0 -18px; }
  [data-modal="she-work"] .svc-block--growth .svc-block__desc { margin-top: 5px; }
  [data-modal="she-work"] .svc-block--main.svc-block--growth .pill-btn { margin-top: 15px; }
  /* 10/28 本人：最後の白いカードの下から板の下までを50に（学ぶ・働く共通） */
  .modal--svc .modal__panel { padding-bottom: 50px; }
}

/* ---------- 記事型（SHEプロジェクト・働く姿）：.modal--article ＋ .article ----------
   Figma：PC 1440幅の中で本文の箱は1000幅（左219）。本文の列は800幅で左に100下げる（左319）
   SP：本文311幅。板は薄い青 #eff4ff（Figma の値。トークンに無い色） */
.modal--article {
  --modal-bg: #eff4ff;
  --modal-accent: var(--color-blue);
}
/* 記事型は画面いっぱいに広げる（本人 10/19）。×ボタンは追従＝最初は上100pxの位置、スクロールすると上30pxに貼りつく */
.modal--article .modal__panel { display: flow-root; width: 100%; min-height: 100%; margin: 0; padding: 0 0 120px; box-shadow: none; }   /* flow-root：×ボタンの上の余白が板の外へ漏れないように */
.modal--article .modal__close { top: 30px; margin: 100px max(20px, calc(50% - 500px)) -50px auto; }
.modal--article .modal__body { width: min(1000px, calc(100% - 40px)); margin-top: 55px; }

/* 改行の出し分け（Figma の PC と SP で改行位置が違うところ） */
.sp-only { display: none; }
@media (max-width: 1023px) { .sp-only { display: inline; } .pc-only { display: none; } }

.article { color: var(--color-navy); }
.article__eyebrow {
  display: flex; align-items: center; gap: 15px;
  color: var(--color-blue-500); font: 500 22px/1 var(--font-en); letter-spacing: .08em;
}
.article__eyebrow::after { content: ""; flex: 1; height: 2px; background: #5d8ae2; }
.article__title {
  margin-top: 45px;
  color: var(--color-blue); font: 600 40px/1.62 var(--font-serif); letter-spacing: .02em;
}
.article__lead {
  margin: 55px 0 0 100px;
  font: 500 18px/1.9 var(--font-sans); letter-spacing: .05em;
}
.article__hero { margin: 35px 0 0 100px; }
.article__hero img { width: 100%; aspect-ratio: 899 / 471; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow-pc-s); }

/* 本文の列（800幅・左100） */
.article__sec { margin: 0 0 0 100px; max-width: 800px; }
.article__sec > p:not([class]) { margin-top: 25px; font: 400 16px/1.75 var(--font-sans); text-align: justify; }
.article__label {
  display: inline-block; margin-top: 50px; padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  color: var(--color-blue); font: 500 20px/1.2 var(--font-en); letter-spacing: .11em;
}
.article__label + .article__h { margin-top: 22px; }
.article__h {
  margin-top: 50px;
  color: var(--color-blue); font: 600 28px/1.5 var(--font-serif); letter-spacing: .02em;
}
.article__h + p { margin-top: 30px !important; }

/* 図（白い箱に画像）＋ 説明（左に青い線） */
.article__fig { margin-top: 35px; }
.article__fig-box { padding: 40px 80px; background: var(--color-white); border-radius: 4px; }
.article__fig-box--gray { padding: 25px 72px 35px; background: #f8f8f8; }
.article__fig-box img { width: 100%; }
.article__fig figcaption {
  margin-top: 20px; padding: 4px 0 4px 18px; border-left: 2px solid var(--color-blue);
  font: 400 14px/1.7 var(--font-sans);
}
.article__fig + p { margin-top: 35px !important; }

/* 年表：白い丸の札（日付＋見出し）と、その下の説明。左に白い縦の帯 */
.tl { position: relative; margin-top: 50px; }
.tl::before {
  content: ""; position: absolute; left: 41px; top: 27px; bottom: 30px; width: 16px;
  background: var(--color-white); box-shadow: var(--shadow-pc-s);
}
.tl__item { position: relative; }
.tl__item + .tl__item { margin-top: 22px; }
.tl__head {
  position: relative; display: flex; align-items: center;
  width: 413px; max-width: 100%; height: 60px; padding: 0 18px;
  background: var(--color-white); border-radius: 100px; box-shadow: var(--shadow-pc-s);
}
.tl__icon { width: 29px; height: 29px; border-radius: 50%; flex: none; }
.tl__date { width: 130px; margin-left: 11px; flex: none; color: var(--color-blue); font: 500 20px/1 var(--font-serif); letter-spacing: .02em; }
.tl__title { font: 500 26px/1 var(--font-serif); letter-spacing: .02em; }
.tl__desc { position: relative; margin: 18px 0 0 93px; font: 400 14px/1.57 var(--font-sans); letter-spacing: .05em; }

/* 社員の声：白いカードに中央寄せの青い文字。大きな引用符を左上と右下に */
.article__sec--voice { max-width: none; margin-left: 0; margin-top: 30px; text-align: center; }
.article__label--center { margin-top: 30px; }
.voice {
  position: relative; margin: 25px 0 0; padding: 60px 100px 55px;
  background: var(--color-white); border-radius: 4px; box-shadow: var(--shadow-pc-s);
  color: var(--color-blue); font: 500 18px/1.89 var(--font-sans); letter-spacing: .02em;
}
.voice p + p { margin-top: 20px; }
/* 引用符：SPと同じ形（透明度なしのSVG）。位置は Figma PC（大賞 1559:7608・ヘラルボニー 1559:7766）＝左から75・右から73、上下に10はみ出す。
   大きさは 10/28 本人「小さくしていい・上下均等に少しはみ出す」で Figma の52×41.5 を40×32に */
.voice::before, .voice::after { content: ""; position: absolute; width: 40px; height: 32px; background: #c2d6ff;
  -webkit-mask: url(../assets/modal/quote_open_solid.svg) no-repeat 0 0 / 100% 100%; mask: url(../assets/modal/quote_open_solid.svg) no-repeat 0 0 / 100% 100%; }
.voice::after { -webkit-mask-image: url(../assets/modal/quote_close_solid.svg); mask-image: url(../assets/modal/quote_close_solid.svg); }
.voice::before { left: 75px; top: -10px; }
.voice::after { right: 73px; bottom: -10px; }
.member {
  display: grid; grid-template-columns: 176px 494px; column-gap: 30px; align-items: start;
  justify-content: center; margin-top: 21px; text-align: left;
}
.member__photo { grid-row: 1 / 3; }
.member__photo img { width: 176px; height: 176px; object-fit: cover; border-radius: 2px; }
.member__name { margin-top: 28px; font: 700 18px/1.4 var(--font-sans); letter-spacing: .08em; }
.member__name span { margin-left: 12px; font: 500 13px/1 var(--font-en); letter-spacing: .08em; }
.member__bio { margin-top: 12px; font: 400 14px/1.7 var(--font-sans); text-align: justify; }

/* リンクのボタン（大）と、PREV / NEXT / CLOSE */
.article__links { display: flex; justify-content: center; gap: 18px; margin: 95px 0 0 100px; max-width: 800px; }
.pill-btn--l { width: 390px; height: 75px; gap: 40px; font-size: 18px; letter-spacing: .19em; background: rgb(255 255 255 / .7); }
.pill-btn--fill { background: var(--modal-accent); color: var(--color-white); }
.pill-btn--fill:hover { background: var(--color-blue-500); border-color: var(--color-blue-500); }
.article__pager {
  display: grid; grid-template-columns: 1fr 1fr; row-gap: 70px;
  width: 660px; max-width: 100%; margin: 95px auto 0;
  font: 500 24px/1 var(--font-en); letter-spacing: .15em;
}
.article__pager svg { width: 10px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.article__prev, .article__next { display: inline-flex; align-items: center; gap: 28px; }
.article__next { justify-self: end; }
.article__closebtn { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 22px; letter-spacing: .15em; }
.article__closebtn svg { width: 16px; height: 16px; stroke-width: 1.5; }
.article__prev:hover, .article__next:hover, .article__closebtn:hover { color: var(--color-blue); }

/* SP・iPad */
@media (max-width: 767px) {
  .modal--article .modal__panel { width: 100%; margin: 0; padding: 0 20px 60px; }
  .modal--article .modal__close { top: 16px; margin: 50px 0 -40px auto; }
  .modal--article .modal__body { width: min(640px, 100%); margin-top: 20px; }
  /* 本文の列はFigmaどおり左右12px内側（画像と図は端まで） */
  .article__sec { padding-inline: 12px; }
  .article__sec .article__fig { margin-inline: -12px; }
  .article__sec--voice { padding-inline: 0; }
  .article__eyebrow { display: block; margin-top: 34px; font-size: 16px; letter-spacing: .05em; }   /* Figma SP：文字の上端86・線112（本人 10/21） */
  .article__eyebrow::after { display: block; height: 1px; margin-top: 12px; }
  .article__title { margin-top: 22px; font-size: 20px; line-height: 1.7; }
  .article__lead { margin: 26px 0 0 12px; font: 500 13px/1.75 var(--font-sans); letter-spacing: 0; }
  .article__hero, .article__sec, .article__links { margin-left: 0; }
  .article__hero { margin-top: 25px; }
  .article__hero img { border-radius: 2px; }
  .article__sec > p:not([class]) { margin-top: 20px; font-size: 13px; }
  .article__label { display: table; margin: 30px auto 0; font-size: 16px; letter-spacing: .08em; padding-bottom: 6px; }
  .article__label + .article__h { margin-top: 20px; }
  .article__h { margin-top: 40px; font-size: 18px; line-height: 1.56; }
  .article__h + p { margin-top: 25px !important; }
  .article__fig-box, .article__fig-box--gray { padding: 17px 12px 16px; border-radius: 2px; }
  /* 10/26 Figma SP（3記事とも）：線は枠の左から23px内側・太さ1.5・線→文字15・右は28空け・上下3.5。下の本文まで25 */
  .article__fig figcaption { margin: 15px 28px 0 23px; padding: 3.5px 0 3.5px 15px; border-left-width: 1.5px; font-size: 12px; line-height: 1.65; text-align: justify; }
  .article__fig + p { margin-top: 25px !important; }
  .tl { margin-top: 40px; }
  .tl::before { left: 31px; width: 12px; top: 20px; }
  .tl__item + .tl__item { margin-top: 16px; }
  .tl__head { width: 276px; height: 45px; padding: 0 14px; }
  .tl__icon { width: 22px; height: 22px; }
  .tl__date { width: 85px; margin-left: 8px; font-size: 16px; }
  .tl__title { font-size: 18px; }
  .tl__desc { margin: 14px 0 0 70px; font-size: 12px; line-height: 1.5; letter-spacing: 0; }
  .article__sec--voice { margin-top: 20px; }
  .voice { margin-top: 18px; padding: 35px 6px 30px; font: 400 12px/1.67 var(--font-sans); letter-spacing: 0; }
  .voice p + p { margin-top: 14px; }
  /* 10/28 本人：Figma SP（補助金・大賞・ヘラルボニー共通）の引用符＝17.6×14・#C2D6FF。左上は箱の左から23・上に5はみ出す／右下は箱の右から23・下に5はみ出す */
  .voice::before, .voice::after { content: ""; width: 17.6px; height: 14px; background: #c2d6ff;
    -webkit-mask: url(../assets/modal/quote_open_solid.svg) no-repeat 0 0 / 100% 100%; mask: url(../assets/modal/quote_open_solid.svg) no-repeat 0 0 / 100% 100%; }
  .voice::after { -webkit-mask-image: url(../assets/modal/quote_close_solid.svg); mask-image: url(../assets/modal/quote_close_solid.svg); }   /* 元のSVGは透明度60%で透けて見えたので、透明度なしの形を使う（本人 10/28） */
  .voice::before { left: 23px; top: -5px; }
  .voice::after { right: 23px; bottom: -5px; }
  .member { grid-template-columns: 122px 1fr; column-gap: 12px; margin: 15px 12px 0; }
  .member__photo { grid-row: 1; }
  .member__photo img { width: 122px; height: 122px; }
  .member__name { align-self: end; margin: 0; font-size: 18px; line-height: 1.2; }
  .member__name span { display: block; margin: 6px 0 0; font-size: 12px; }
  .member__bio { grid-column: 1 / -1; margin-top: 22px; font-size: 12px; line-height: 1.65; }
  .article__links { flex-direction: column; align-items: center; gap: 12px; margin-top: 50px; }
  .pill-btn--l { width: 288px; height: 50px; gap: 24px; border-width: 1.5px; font-size: 14px; }
  .article__pager { width: 100%; margin-top: 40px; padding: 0 30px; row-gap: 24px; font: 400 12px/1 var(--font-en); letter-spacing: .1em; }
  .article__pager svg { width: 6px; height: 11px; }
  .article__prev, .article__next { gap: 12px; }
  .article__closebtn { gap: 10px; letter-spacing: .1em; }
  .article__closebtn svg { width: 10px; height: 10px; }
}
/* 記事型の部品（スタートアップ大賞で追加） */
/* WHAT IS：白い箱に中央寄せの説明（708幅・本文の列の中央） */
.whatis {
  width: 708px; max-width: 100%; margin: 35px auto 0; padding: 28px 20px 38px;
  background: var(--color-white); border-radius: 4px; box-shadow: var(--shadow-pc-s); text-align: center;
}
.whatis__label { color: var(--color-blue); font: 500 16px/1 var(--font-en); letter-spacing: .08em; }
.whatis__title { margin-top: 12px; color: var(--color-blue); font: 500 25px/1.36 var(--font-sans); letter-spacing: .05em; }
.whatis__text { margin-top: 22px; font: 500 16px/1.94 var(--font-sans); letter-spacing: .05em; }
.whatis + .article__fig { margin-top: 35px; }
/* 写真2枚を横に並べる */
.article__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.article__pair img { width: 100%; aspect-ratio: 395 / 263; object-fit: cover; border-radius: 4px; }
/* 本文の列より少し細い横長の写真（708幅・中央） */
.article__wide { width: 708px; max-width: 100%; margin: 60px auto 0; }   /* 上の写真2枚（説明文）との間 35→60（本人 10/26「もう少し開けたい」） */
.article__wide img { width: 100%; border-radius: 4px; }
.article__wide + p { margin-top: 30px !important; }   /* 10/28 本人：写真→本文 PC30・SP20 */
/* Xの投稿2つを白い箱に並べる（上そろえ） */
.article__ugc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; padding: 30px 20px; }
/* Xの埋め込み：読み込み前は投稿の文章だけが出るので、白いカード風にしておく。読み込み後はXの枠（.twitter-tweet-rendered）に置き換わる */
.article__ugc .twitter-tweet { margin: 0 !important; min-width: 0; }
.article__ugc blockquote.twitter-tweet { padding: 16px; border: 1px solid #e1e8ed; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.6; color: #0f1419; }
.article__ugc blockquote.twitter-tweet a { color: #1d9bf0; }
.article__fig figcaption b { font-weight: 700; }
/* MESSAGE：太字の言葉＋名前 */
.voice--message { padding: 50px 40px 40px; font: 700 22px/1.59 var(--font-sans); letter-spacing: .07em; }
.voice__by { margin-top: 18px; color: var(--color-navy); font: 500 16px/1.5 var(--font-sans); letter-spacing: .05em; }
.article__sec--voice + .article__sec > .article__h:first-child { margin-top: 90px; }

@media (max-width: 767px) {
  .whatis { margin-top: 30px; padding: 20px 12px 24px; border-radius: 2px; }
  .whatis__label { font: 400 12px/1 var(--font-en); }
  .whatis__title { margin-top: 8px; font-size: 16px; line-height: 1.2; }
  .whatis__text { margin-top: 14px; font: 400 12px/1.83 var(--font-sans); letter-spacing: 0; }
  .article__pair { grid-template-columns: 1fr; gap: 8px; width: calc(100% - 22px); margin-inline: auto; }   /* Figma SP：写真は289幅で中央 */
  .article__pair img, .article__wide img { border-radius: 2px; }
  .article__wide { width: calc(100% - 22px); margin-top: 25px; }
  .article__wide img { aspect-ratio: 289 / 160; object-fit: cover; }
  .article__ugc { grid-template-columns: 1fr; gap: 16px; padding: 16px 12px; }
  .voice--message { padding: 35px 12px 30px; font: 700 12px/1.67 var(--font-sans); letter-spacing: 0; }
  .voice__by { margin-top: 12px; font: 400 12px/1.67 var(--font-sans); letter-spacing: 0; }
  .article__sec--voice + .article__sec > .article__h:first-child { margin-top: 60px; }
}
/* 記事型の部品（ヘラルボニーで追加） */
.article__sub { margin: 70px 0 0 100px; color: var(--color-blue); font: 600 24px/1.5 var(--font-serif); letter-spacing: .02em; }
.article__lead--after-sub { margin-top: 30px; }
.article__h4 { margin-top: 50px; color: var(--color-blue); font: 600 24px/1.5 var(--font-serif); letter-spacing: .02em; }
.article__h4 + p { margin-top: 30px !important; }
.article__sec p b { font-weight: 700; }
/* 注釈（10/25 Figma ヘラルボニー 1964:1824・1964:1827）：本文の＊と、段落のすぐ下の小さい注釈（PC 12/16.8・SP 10/15） */
.article__mark { position: relative; top: -.55em; font-size: .62em; vertical-align: baseline; line-height: 0; }   /* Figma：全角＊にフォントの上付き（SUPS）。Webのフォントに上付きの字形が無いので、小さく上げて同じ見た目に（10/26 本人） */
.article__sec p.article__note { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--color-navy-60); }   /* 10/29 本人：注釈は薄く（働く姿の注釈と同じ紺60%） */
@media (max-width: 767px) { .article__sec p.article__note { margin-top: 6px; font-size: 10px; line-height: 1.5; } }
.article__sec--case { margin-top: 70px; }
/* 仮の中身（Figma でもピンクの仮文字のところ）。中身が届いたら is-todo を外す */
.is-todo { color: var(--color-pink-500); font-style: normal; }
/* お話を伺った人：写真＋「お話を伺った人」＋名前、その下に紹介文 */
.person {
  display: grid; grid-template-columns: 176px max-content 1fr; grid-template-rows: auto 1fr;
  column-gap: 26px; margin: 50px 0 0 100px; max-width: 800px;
}
.person--in-sec { margin: 35px 0 0; }
.person__photo { grid-row: 1 / 3; }
.person__label { margin-left: 14px; }   /* Figma：写真と札の間は40px */
.person__photo img { width: 176px; height: 176px; object-fit: cover; }
.person__label {
  align-self: start; margin-top: 11px; padding: 13px 12px;
  border-block: 1px solid var(--color-blue); color: var(--color-blue);
  font: 500 16px/1 var(--font-sans); letter-spacing: .08em;
}
/* 名前・肩書きは Medium（Figma 10/26 照合。前は Bold）。名前の b は太字にしない */
.person__name { margin-top: 11px; font: 500 18px/1.5 var(--font-sans); letter-spacing: .08em; }
.person .person__name b { font-weight: 500; }   /* 本文の太字（.article__sec p b）に負けないように強める：松田さんの名前が太く出ていた（10/28） */
.person__name b + span { margin-left: 12px; font: 400 14px/1 var(--font-en); letter-spacing: .05em; }
.person__meta { font: 500 16px/1.6 var(--font-sans); letter-spacing: 0; }
@media (min-width: 768px) { .person--in-sec .person__meta { font-size: 14px; letter-spacing: .07em; } }   /* SPは12px（SPの指定のまま） */
.person__meta em { font-style: normal; }   /* 年は斜体にしない（Figma は立体） */
.person__bio { grid-column: 2 / 4; margin: 22px 0 0 14px; font: 400 14px/1.7 var(--font-sans); text-align: justify; }
.person--in-sec .person__photo + .person__label, .person--in-sec .person__name { margin-top: 70px; }
/* 画像がまだ無いところの仮の箱（灰色） */
.article__placeholder {
  display: grid; place-content: center; gap: 14px; height: 329px; margin-top: 40px;
  background: var(--color-gray-300); text-align: center; font: 500 18px/1.5 var(--font-sans); letter-spacing: .05em;
}
.article__placeholder small { font-size: 13px; }

@media (max-width: 767px) {
  .article__sub { margin: 30px 0 0 12px; font-size: 16px; line-height: 1.56; }
  .article__lead--after-sub { margin-top: 20px; }
  .article__h4 { margin-top: 40px; font-size: 16px; line-height: 1.56; }
  .article__h4 + p { margin-top: 20px !important; }
  .article__sec--case { margin-top: 50px; }
  .person { grid-template-columns: 122px 1fr; column-gap: 12px; margin: 35px 12px 0; }
  .person--in-sec { margin: 25px 0 0; }
  .person__photo { grid-row: 1 / 3; margin: 0; }
  .person__photo img { width: 122px; height: 122px; }
  .person__label { justify-self: center; margin: 10px 0 0; padding: 9px 6px; font-size: 13px; }
  .person__name { grid-column: 2; grid-row: 2; align-self: end; margin: 0; font-size: 16px; line-height: 1.4; }
  .person__name b + span { display: block; margin: 2px 0 6px; font-size: 12px; }
  .person__meta { font: 500 12px/1.5 var(--font-sans); letter-spacing: 0; }
  .person__bio { grid-column: 1 / -1; grid-row: 3; margin: 18px 0 0; font-size: 12px; line-height: 1.65; }
  .person--in-sec .person__photo + .person__label, .person--in-sec .person__name { margin-top: 0; }
  .person--in-sec .person__label { margin-top: 10px; }
  .article__placeholder { height: 220px; margin-top: 30px; padding: 0 20px; font-size: 14px; }
  .article__placeholder small { font-size: 12px; }
}
/* ---------- 働く姿（.modal--work）：板は画面いっぱい。筆の背景も画面の端まで敷き、その上に白い列（白95%・幅1200）を中央に置く（本人 10/19）
   中身は800幅で中央 ---------- */
.modal--work .modal__panel {
  background:
    linear-gradient(rgb(255 255 255 / .95), rgb(255 255 255 / .95)) center top / min(1200px, 100%) 100% no-repeat,
    #dfe8fb url(../assets/modal/mk_bg.webp) center top / max(100%, 1440px) auto repeat-y;
}
/* PC：CLOSEから下の端までの空きを、上の端から「CASE STUDY」までと同じ153pxに（本人 10/26。前は120） */
@media (min-width: 768px) { .modal--work .modal__panel { padding-bottom: 153px; } }
/* PC：筆はFigmaの2枚（上の筆・下の筆）を、Figmaと同じ回転・切り抜きで1枚ずつ絵にしたもの（元の解像度）。
   10/28 本人：画質のため65%に縮め、上の筆は左へ・下の筆は右へ180px寄せる（比較 tools/pc_paint_1028.html の C2）。下の方が空かないよう2枚ずつ繰り返す。
   記事ごとに位置が違うので（本人 10/26）、位置だけを記事ごとに変える。x は1440の枠の中心から絵の中心までのずれ、y は枠の上からの位置（Figmaの値） */
@media (min-width: 768px) {
  /* 10/28 夜 Figma（働く姿 PC 4本共通）：地の色 #D5E3FF の上に筆3枚（Figmaの回転のまま書き出し）。x は枠の中心から、y は枠の上から */
  .modal--work .modal__panel {
    background:
      url(../assets/modal/wbg_pcB.webp) calc(50% - 2380px + 3971px / 2) -892px / 3971px auto no-repeat,
      url(../assets/modal/wbg_pcA.webp) calc(50% - 2351px + 5309px / 2) 2179px / 5309px auto no-repeat,
      url(../assets/modal/wbg_pcC.webp) calc(50% - 1539px + 2850px / 2) 6176px / 2850px auto no-repeat,
      #d5e3ff;
  }
}
.work { text-align: left; }
.work__case {
  display: table; margin: -2px auto 0; padding-bottom: 6px; border-bottom: 1px solid currentColor;
  color: var(--color-blue); font: 500 28px/1.3 var(--font-en); letter-spacing: .08em;
}
.work__hero { position: relative; width: min(800px, 100%); margin: 49px auto 0; }
.work__hero img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.work__title { position: absolute; left: -16px; bottom: 30px; display: grid; justify-items: start; gap: 8px; }
.work__title span {
  padding: 6px 15px; background: var(--color-white); box-shadow: 0 0 8.5px rgb(0 61 166 / .2);   /* Figmaの影 */
  font: 700 28px/1.3 var(--font-sans); letter-spacing: .05em; color: var(--color-navy);
}
.work__sec { width: min(800px, 100%); margin: 0 auto; }
.work__sec > p:not([class]), .work__sec > p.is-todo { margin-top: 25px; font: 400 16px/1.75 var(--font-sans); text-align: justify; }
.work__sec--center { text-align: center; }
.work__sec--center .article__label { margin-top: 43px; }
.work__catch {
  position: relative; display: inline-block; margin-top: 20px; white-space: nowrap;
  color: var(--color-blue); font: 700 35px/1.49 var(--font-sans); letter-spacing: .05em;
}
/* 引用符：Figma のベクター（icon_“／icon_”）をそのまま絵にしたもの。位置は見出しの文字の箱（上下を切った箱）からの距離で、記事ごとに違う（Figma 10/26）
   PC：41.89×33.32、右の”は左の“より1下。SP：14.03×11.16、上へ8 */
.work__catch::before, .work__catch::after { content: ""; position: absolute; top: var(--qt, -20px); width: 41.89px; height: 33.32px; background: url(../assets/modal/quote_open.svg) no-repeat 0 0 / 100% 100%; }
.work__catch::before { left: var(--ql, -42px); }
.work__catch::after { right: var(--qr, -41.89px); top: calc(var(--qt, -20px) + 1px); background-image: url(../assets/modal/quote_close.svg); }
dialog[data-modal="work-01"] .work__catch { --ql: -42px; --qr: -41.89px; --qt: -20px; }
dialog[data-modal="work-02"] .work__catch { --ql: -62px; --qr: -61.89px; --qt: -25px; }
dialog[data-modal="work-03"] .work__catch { --ql: -2px;  --qr: -1.89px;  --qt: -17px; }
dialog[data-modal="work-04"] .work__catch { --ql: -42px; --qr: -41.89px; --qt: -17px; }
.work__desc { margin-top: 30px; font: 500 18px/1.89 var(--font-sans); letter-spacing: .05em; }
.work__stats { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.work__stats li {
  display: grid; justify-items: center; align-content: center; gap: 10px; width: 210px; height: 110px;
  background: var(--color-white); box-shadow: var(--shadow-pc-s); color: var(--color-blue);
}
.work__stat-label { font: 500 20px/1.2 var(--font-sans); letter-spacing: .05em; }
.work__stat-label--en { font-family: var(--font-en); letter-spacing: .15em; }
.work__stat-val { font: 700 28px/1 var(--font-sans); letter-spacing: .02em; }
.work__stat-val em { font: 500 40px/1 var(--font-en); font-style: normal; letter-spacing: -.02em; }
.work__stat-val small { font: 500 28px/1 var(--font-en); }
.work__cm { position: relative; width: min(1000px, 100%); margin: 50px auto 0; }
.work__cm img { width: 100%; border-radius: 4px; box-shadow: var(--shadow-pc-s); }
/* CMの視聴ボタン：Figma 10/22 で白地＋青い線＋斜めの矢印に（前はすりガラス・10/21）→ 10/25 に白い枠へ（下） */
.work__cm .pill-btn { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); }
/* 10/25 本人：白い枠・白い文字のすりガラスに（cmbtn.html D）。CMの写真の上に置くので、SPも写真の上に重ねる */
.work__cm .pill-btn.pill-btn--ext { border-color: transparent; color: #fff; font-weight: 700; text-shadow: 0 1px 6px rgb(0 0 0 / .25); box-shadow: 0 4px 16px rgb(0 0 0 / .18);
  background: rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }   /* 10/28 本人：枠線なし・比較 tools/cmbtn_1028.html の B（白28%・ぼかし14・太字・影） */
.work__cm .pill-btn.pill-btn--ext:hover { background: rgb(255 255 255 / .4); }
.work__uline { margin-top: 55px; }
/* 下線は1行ずつ（Figma：1行の枠47＋間3＝50px、下線は文字の下）。前は行の高さ38pxで、2行目の文字が1行目の下線にくっついていた（10/26 本人「レイアウト崩れてます」） */
.work__uline span { padding-bottom: 5px; border-bottom: 1px solid var(--color-blue); color: var(--color-blue); font: 700 24px/50px var(--font-sans); letter-spacing: .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.work__uline + p { margin-top: 30px !important; }
.work__sec .article__label--center { display: table; margin: 90px auto 0; }
.work__ititle { margin-top: 35px; text-align: center; color: var(--color-blue); font: 700 35px/1.55 var(--font-sans); letter-spacing: .02em; }
.work__photo { margin-top: 30px; }
.work__photo img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.work__photo figcaption { margin-top: 15px; text-align: center; color: var(--color-blue); font: 500 16px/1.75 var(--font-sans); }   /* Figma Medium（10/26 照合。前は700） */
.work__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.work__pair img { aspect-ratio: 397 / 260; }
.qa__q {
  display: grid; grid-template-columns: 45px 1fr; column-gap: 10px; margin-top: 35px;
  color: var(--color-blue-500); font: 500 16px/1.34 var(--font-sans); letter-spacing: .05em; text-align: justify;
}
.qa__q::before { content: ""; height: 1px; margin-top: .67em; background: currentColor; }
.qa__q + p { margin-top: 30px !important; }
.qa__who { color: var(--color-blue); font-weight: 700; }
.work__sec p b { font-weight: 700; }
.work__h { margin-top: 80px; color: var(--color-blue); font: 700 28px/1.6 var(--font-sans); letter-spacing: .02em; }
.members { display: grid; gap: 15px; margin-top: 30px; }
.members__item {
  display: grid; grid-template-columns: 78px 1fr 370px; align-items: center; column-gap: 14px;
  padding: 18px 30px 18px 18px; background: var(--color-white); border-radius: 3px; box-shadow: var(--shadow-pc-s);
}
.members__photo img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; }
.members__name b { font: 700 18px/1.4 var(--font-sans); letter-spacing: .08em; }
.members__name span { margin-left: 12px; font: 500 13px/1 var(--font-en); letter-spacing: .08em; }
.members__role { margin-top: 6px; font: 500 12px/1.45 var(--font-sans); letter-spacing: .02em; }
.members__bio { font: 400 14px/1.71 var(--font-sans); text-align: justify; }
.work__links { display: grid; justify-items: center; gap: 15px; margin-top: 130px; }
.work__links .pill-btn--l { margin-bottom: 20px; }
.work__links .pill-btn:not(.pill-btn--l) { letter-spacing: .1em; }

@media (max-width: 767px) {
  /* SP：10/28 夜 Figma（働く姿 SP 4本共通）：地の色 #D5E3FF の上に筆5枚。x は枠の中心（187.5）から、y は枠の上から */
  .modal--work .modal__panel {
    background:
      url(../assets/modal/wbg_sp5.webp) calc(50% - 900.5px + 1539px / 2) -322px / 1539px auto no-repeat,
      url(../assets/modal/wbg_sp4.webp) calc(50% - 536.5px + 1583px / 2) 919px / 1583px auto no-repeat,
      url(../assets/modal/wbg_sp3.webp) calc(50% - 853.5px + 1645px / 2) 2416px / 1645px auto no-repeat,
      url(../assets/modal/wbg_sp1.webp) calc(50% - 680.5px + 1427px / 2) 4201px / 1427px auto no-repeat,
      url(../assets/modal/wbg_sp2.webp) calc(50% - 680.5px + 1427px / 2) 5969px / 1427px auto no-repeat,
      #d5e3ff;
  }
  .modal--work .modal__panel { padding-bottom: 100px; }   /* 10/28 本人：記事の最後（PREV・CLOSE・NEXTの下）の空きは100 */
  .work__case { margin-top: 0; font-size: 18px; }
  .work__hero { width: 100%; margin-top: 23px; }
  .work__hero img { aspect-ratio: 311 / 180; }
  .work__title { position: relative; left: auto; bottom: auto; justify-items: center; gap: 6px; margin-top: -12px; }
  .work__title span { padding: 2px 8px; font-size: calc(17 / 375 * 100vw); letter-spacing: .02em; white-space: nowrap; }   /* 1行ずつ折り返さない。04の2行目は白い列より少し広い＝Figmaどおりはみ出す。10/30 本人「SPのタイトルがFigmaより小さい」：15px（375幅）を画面の幅に合わせて伸び縮み＝写真・列と同じ比率 */
  .work__sec { padding-inline: 12px; }
  .work__sec > p:not([class]), .work__sec > p.is-todo { margin-top: 20px; font-size: 14px; line-height: 1.57; }
  .work__sec--center .article__label { margin-top: 30px; }
  .work__catch { margin-top: 18px; white-space: normal; font-size: 22px; line-height: 1.36; }
  .work__catch::before, .work__catch::after { display: none; }
  .work__desc { margin-top: 24px; font-size: 13px; line-height: 1.77; letter-spacing: 0; }
  .work__stats { gap: 6px; margin-top: 30px; }
  .work__stats li { flex: 1; height: 62px; gap: 6px; box-shadow: var(--shadow-sp-m); }
  .work__stat-label { font-size: 12px; }
  .work__stat-label--long { font-size: 10px; }   /* 「プロジェクト期間」はSPで10px（Figma SP 1671:11356） */
  .work__stat-val { font-size: 18px; }
  .work__stat-val em { font-size: 24px; }
  .work__stat-val small { font-size: 16px; }
  .work__cm { margin-top: 30px; }
  .work__cm img { border-radius: 1px; }
  .work__cm .pill-btn { bottom: 12px; width: 200px; height: 30px; }   /* 写真の上に重ねる（前は写真の下・10/25） */
  .work__uline { margin: 40px 12px 0; }   /* 見出しの左端は本文と同じ（Figma SP：どちらも x44。前は本文より12px左に出ていた・本人 10/22） */
  .work__uline span { font-size: 15px; line-height: 2.2; }
  .work__uline + p { margin-top: 20px !important; }
  .work__sec .article__label--center { margin-top: 50px; }
  .work__ititle { margin-top: 20px; font-size: 20px; line-height: 1.5; }
  .work__photo { margin-top: 20px; }
  .work__photo img { aspect-ratio: 287 / 166; }
  .work__photo figcaption { margin-top: 10px; font: 500 12px/1.67 var(--font-sans); }
  .work__pair { grid-template-columns: 1fr; gap: 8px; }
  .work__pair img { aspect-ratio: 287 / 188; }
  .qa__q { display: block; margin-top: 30px; font: 400 12px/1.65 var(--font-sans); letter-spacing: 0; }
  .qa__q::before { display: none; }
  /* 質問の下の短い線（Figma SP：幅20・1px。PCは左の線） */
  .qa__q::after { content: ""; display: block; width: 20px; height: 1px; margin-top: 15px; background: currentColor; }
  .qa__q + p { margin-top: 17px !important; }
  /* 本文はFigmaどおり見出しより左右12px内側（幅287・本人 10/21）。見出し（タイトル・小見出し）は幅311のまま */
  .work__sec > p:not([class]), .work__sec > p.is-todo, .work__desc, .qa__q { margin-inline: 12px; }
  .work__sec--center .work__desc { margin-inline: 12px; }
  .work__sec > p.is-todo { font-size: 13px; line-height: 1.75; }   /* Figma 13px・行間22.8 */
  .work__h { margin-top: 50px; font-size: 16px; line-height: 1.55; }
  .members { gap: 10px; margin-top: 20px; }
  .members__item { grid-template-columns: 60px 1fr; column-gap: 11px; row-gap: 14px; padding: 15px 17px; border-radius: 2px; }
  .members__photo img { width: 60px; height: 60px; }
  .members__name b { font-size: 14px; }
  .members__name span { margin-left: 8px; font-size: 10px; }
  .members__role { font-size: 10px; line-height: 1.2; }
  .members__bio { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; }
  .work__links { gap: 8px; margin-top: 60px; }
  .work__links .pill-btn--l { margin-bottom: 7px; }
}
/* 働く姿：白い箱に入れた図（スライドの画像など）・注釈・縦型動画（仮） */
.work__box { padding: 25px 60px; background: var(--color-white); border-radius: 4px; box-shadow: var(--shadow-pc-s); }
.work__box img { aspect-ratio: auto; object-fit: contain; }
.work__note { margin-top: 15px; font: 400 14px/1.7 var(--font-sans); color: var(--color-navy-60); }
.work__video { position: relative; width: 422px; max-width: 100%; margin: 100px auto 0; }
.work__video img, .work__video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; background: #000; }
.work__video::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: rgb(7 8 77 / .2); pointer-events: none; }   /* 色の膜：Figma Rectangle 5613（#07084D・不透明度20%・通常）。角はPC 4px（本人 10/25） */
/* 動画（10/25）：再生を押したら、暗い膜と再生ボタンを消して、プレーヤーの操作を出す */
.work__video.is-playing::after, .work__video.is-playing .work__play { display: none; }
button.work__play { padding: 0; cursor: pointer; }
/* 04の動画2本（10/25）：PCは横に並べる（幅800＝下のボタン2つの端とそろう・間24。本人 B案）。SPは1本ずつ指で送り、点で位置を示す（矢印なし＝ほかのカルーセルと同じ） */
.work__vcarousel { position: relative; width: 800px; max-width: 100%; margin: 100px auto 0; }
.work__vtrack { display: flex; gap: 24px; }
.work__vtrack .work__video { flex: 1 1 0; width: auto; margin: 0; scroll-snap-align: center; }
.work__vdots { display: none; justify-content: center; gap: 6px; margin-top: 12px; }
.work__vdots span { width: 6px; height: 6px; border-radius: 999px; background: #c8cbd3; transition: background .35s ease; }
.work__vdots span.is-active { background: var(--color-blue); }
.work__play {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 99px; height: 99px; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .3);   /* 10/28 本人「再生ボタンの枠線なくして」 */ -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);   /* 白い輪は残してすりガラスに（10/20） */
}
.work__play::before { content: ""; position: absolute; left: 41px; top: 33px; border-style: solid; border-width: 17px 0 17px 28px; border-color: transparent transparent transparent var(--color-white); }
.work__links { margin-top: 70px; }
@media (max-width: 767px) {
  .work__box { padding: 12px; border-radius: 2px; }
  .work__note { margin-top: 10px; font-size: 11px; line-height: 1.6; }
  .work__video { width: 250px; margin-top: 50px; }
  .work__vcarousel { width: 250px; margin: 20px auto 24px; }   /* Figma SP：ボタンの下20・点から PREV まで約50 */
  .work__vtrack { gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 2px; }
  .work__vtrack::-webkit-scrollbar { display: none; }
  .work__vtrack .work__video { flex: 0 0 100%; width: 100%; }
  .work__vdots { display: flex; }
  /* 動画の角：SPは2px（本人 10/25）。動画・最初の絵・色の膜・04のカルーセルの枠をそろえる */
  .work__video img, .work__video video, .work__video::after { border-radius: 2px; }
  .work__play { width: 64px; height: 64px; }
  .work__play::before { left: 26px; top: 21px; border-width: 11px 0 11px 18px; }
  .work__links { margin-top: 50px; }
}
/* 働く姿04（10/22）：図（協業体制のスライド）は切り抜かずにそのまま／VOICE（お客様のコメント）の見出しは1行目が小さい（Figma PC 28/35・SP 16/20） */
.work__photo--chart { margin-top: 40px; }
.work__photo--chart img { aspect-ratio: auto; object-fit: contain; }
.work__ititle small { font-size: .8em; }
.work__honor { font-size: calc(30em / 35); }   /* 「様」だけ名前より小さく（Figma 10/25：PC 会社・肩書き28／名前35／様30・SP 16／20／16） */
@media (max-width: 767px) { .work__honor { font-size: .8em; } }
.work__sec--voice .work__photo + p { margin-top: 35px; }
/* 働く姿01（10/23 Figma）：マーケティング部門の構成の図（影の分だけ書き出しが左右6px大きい＝はみ出させて図の枠を本文の幅にそろえる） */
.work__chart-mk { margin-top: 30px; }
.work__chart-mk img { aspect-ratio: auto; width: calc(100% * 811 / 799); max-width: none; margin-left: calc(-6 / 799 * 100%); }
.work__chart-mk figcaption { margin-top: 10px; font-weight: 500; font-size: 16px; }
@media (max-width: 767px) { .work__chart-mk { margin: 20px 0 0; } .work__chart-mk figcaption { font-size: 12px; } }
/* 働く姿02（10/23 Figma）：キャリアカウンセリングの図。PCは「青春チーム」の段落のあと（Figma 2039:37104）、SPはリード文の前に説明と一緒（1671:11348・2039:37106） */
.work__sp-block { display: none; }
.work__map { margin-top: 50px; }
.work__map img { aspect-ratio: 16 / 9; }
.work__map figcaption { margin-top: 15px; font-weight: 500; line-height: 1.44; }   /* Figma：Medium 16・行間23 */
/* 下の「副業・業務委託キャリアプランナー募集」＋動画（Figma PC 2092:69751：ボタンの下110・動画まで50） */
.work__recruit { margin-top: 110px; text-align: center; }
.work__uline--center { margin-top: 0; }
.work__recruit .work__video { margin-top: 50px; }
.work__recruit + .article__pager { margin-top: 53px; }
@media (max-width: 767px) {
  .work__pc-block { display: none; }
  .work__sp-block { display: block; }
  p.work__sp-block.work__desc { text-align: center; }
  .work__map { margin: 20px 0 0; }   /* Figma SP：図は311幅（見出しと同じ） */
  .work__map figcaption { margin-top: 10px; text-align: center; line-height: 1.5; }   /* Figma SP：Medium 12・行間18。10/29 本人：中央そろえで改行（HTMLの br.sp-only） */
  .work__map + .work__desc { margin-top: 20px; }
  .work__recruit { margin-top: 63px; }
  .work__uline--center { margin: 0; }
  .work__recruit .work__video { margin-top: 30px; }
  .work__recruit + .article__pager { margin-top: 30px; }
}
@media (max-width: 767px) {
  .work__photo--chart { margin: 30px -12px 0; }   /* Figma SP：図は見出しと同じ幅311 */
  .work__sec--voice .work__ititle { line-height: 1.4; }
}
/* iPad（768〜1023px）の記事型：SPの組みを1.25倍にして中央に（本文13px→約16px） */
/* 10/29 夕：iPadの記事型はPCの組みを縮めて使う（下の @media (min-width: 768px) and (max-width: 1023px)） */

/* SHE PROJECTS の明朝の見出しは細め（SemiBold 600 → Medium 500。本人 10/19「もうちょっと細く」）
   Figma は 600 のまま。README の「Noto Serif JP のタイトルは 600」の例外 */
.article__title, .article__h, .article__h4, .article__sub { font-weight: 500; }


/* ---------- ×ボタンの位置（PC・本人 10/20「記事やテキストにかからない位置に、絶対値で追従」） ----------
   画面に対して固定（position: fixed）。文字の列の外の余白に置くので、スクロールしても文字や写真に重ならない
   SHEとは：板（幅1200）の右上、文字の列との間の余白（幅100）の真ん中。上は板の上端＋30
   記事型（SHE PROJECTS・働く姿）：文字の列（幅1000）の右の外側、上30。狭い画面では列を細くして余白を空ける */
@media (min-width: 1024px) {
  .modal .modal__close, .modal--article .modal__close { position: fixed; top: var(--close-top); right: var(--close-right); margin: 0; }   /* 記事型の古い margin（上100・右の余白）を打ち消す */
  .modal--svc { --close-top: 170px; --close-right: calc(max(32px, (100% - 1200px) / 2) + 25px); }
  .modal--svc .modal__body { width: min(999px, 100% - 140px); }
}
@media (min-width: 768px) {
  .modal--article .modal__close { position: fixed; top: var(--close-top); right: var(--close-right); margin: 0; }
  .modal--article { --close-top: 30px; --close-right: max(20px, calc(50% - 580px)); }
  .modal--article .modal__panel { padding-top: 100px; }   /* 前は×ボタンが取っていた上の余白 */
  .modal--article .modal__body { width: min(1000px, 100% - 200px); }
}
/* 10/29 夕 本人「iPadの働く姿は幅も写真の配置も変。PCデザインをあてがうのでも大丈夫」：iPad（768〜1023px）はPCの組みを幅860で組んで0.8倍に（見た目688） */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 11/2 公開後：iPadのSafariは zoom で箱は縮むのに文字が縮まず、見出しの1字落ち・行の重なり・列のはみ出しが出ていた。
     どのブラウザでも同じに効く transform で0.8倍にする。縮んだ分の下の空きは js/main.js が --body-h から詰める */
  .modal--article .modal__body { zoom: 1; width: 860px; max-width: none; margin-inline: calc((100% - 860px) / 2); transform: scale(.8); transform-origin: 50% 0; margin-bottom: calc(var(--body-h, 0px) * -.2); }
  .modal--article .modal__panel { overflow-x: clip; }
  dialog.modal--article .modal__body { margin-top: calc(55px * .8); }   /* 上の空きは transform で縮まないので、前の zoom と同じ0.8倍の値を直接書く */
  dialog.modal--project .modal__body { margin-top: calc(102px * .8); }
  .modal--article .modal__panel { padding-top: 80px; }
  .modal--article .sp-only { display: none; }
  .modal--article .pc-only { display: inline; }
  dialog.modal--work .work__hero { width: 100%; max-width: none; margin: 34px 0 0; }
  dialog.modal--work .modal__body .work__title { width: max-content; transform: scale(calc(860 / 1200)); transform-origin: 0 100%; left: calc(-21px * 860 / 1200); bottom: calc(40px * 860 / 1200); }   /* 11/2：zoom をやめて transform に（位置の数字も同じ比率で縮める） */   /* 10/30 本人「iPadはタイトルが写真に対してデカすぎる」：写真は860幅なのに札はPC（写真1200幅）の大きさのままだった＝PCと同じ比率に縮める（札の位置・余白も一緒に） */
  dialog.modal--work .modal__panel::before { top: 374px; }   /* 10/30 本人「すりガラスの始まりが絶妙」：写真のちょうど真ん中から（写真 y188〜561。PC も写真の途中から） */
  .modal--article .br-sp { display: none; }   /* 10/30 本人：ヘラルボニーの小見出し「次はこれも〜自然に生まれる。」は改行なし */
  .modal--work .members__bio br.pc-only { display: none; }   /* 10/30 本人：小山さんの紹介文の改行は iPad 幅だと「入社。」だけ落ちる＝改行をはずす */
  .modal--project .voice p br { display: none; }   /* 10/29 夕 本人「iPadのSHE PROJECTの中央そろえがずれる」：PCの改行のままだと幅が足りず1〜2字だけ落ちる。改行をはずして行の長さをそろえる */
  .modal--project .voice p { text-wrap: balance; }
  /* 10/29 夕 本人「メンバーズボイスに対して上の塊が右寄り」：PCは本文の列を左100下げる組み（見出しは左端）。iPadの狭い幅だと右に寄って見えるので、左の下げをなくして声の箱と同じ幅に */
  .modal--project .article :is(.article__lead, .article__sub, .article__hero, .article__sec, .article__links, .person) { margin-left: 0; max-width: none; }
  .modal--project .article .article__wide figcaption, .modal--project .article .article__sec > figure > figcaption { margin-left: 0; }   /* 作品の説明（ヘラルボニー）も左の下げをなくす */   /* PCは列より広い1200で中央にはみ出す＝iPadでは列の幅に収める */
}

/* 狭いPC幅（1024〜1279px）：SHEとはのカードは、ロゴと一言を横に並べると列からはみ出す（×ボタンにも重なる）
   ので、一言をロゴの下に回して列に収める（2026-10-20） */
@media (min-width: 1024px) and (max-width: 1279px) {
  .svc-block { min-width: 0; }
  .svc-block__head, .svc-block--main .svc-block__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .svc-block__catch, .svc-block--main .svc-block__catch { padding-left: 0; border-left: 0; }
  .svc-block--main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- SHE PROJECTS（補助金・スタートアップ大賞・ヘラルボニー）を Figma 10/22 の直しに合わせる ----------
   PC 1559:7383・7529・7666／SP 1559:8012・7894・7802。dialog に .modal--project を付けた3本だけに効かせる
   （.article__label・.article__pager は働く姿でも使っているので、働く姿は前のまま） */
/* 上の「SHE PROJECTS 01」：文字も線も紺寄りの青（#003da6）。線は PC 2px・SP 1px */
.modal--project .article__eyebrow { color: var(--color-blue); }
.modal--project .article__eyebrow::after { background: var(--color-blue); }
/* セクションの見出し（STORY・CASE・MEMBER'S VOICE・FUTURE VISION など）：下線までの間を少し広く */
.modal--project .article__label { padding-bottom: 10px; }
.modal--project .article__label + .article__h { margin-top: 12px; }
.modal--project .article__h { margin-top: 60px; }
.modal--project .article__h + p { margin-top: 22px !important; }
.modal--project .article__h4 { margin-top: 32px; }
.modal--project .article__h4 + p { margin-top: 13px !important; }
.modal--project .article__hero + .article__sec > .article__label:first-child { margin-top: 62px; }
.modal--project .person + .article__sec > .article__label:first-child { margin-top: 42px; }
.modal--project .article__sec--case { margin-top: 35px; }
.modal--project .article__sec:has(+ .article__links) > .article__label:first-child { margin-top: 90px; }
.modal--project .article__sec--voice + .article__sec > .article__h:first-child { margin-top: 75px; }
/* 下のボタン：外のサイトへ行くので矢印は斜め「↗」（Figma 部品 PC_botton-naname／SP_botton-naname）。輪郭だけのボタンの中は白 */
.pill-btn--ext:not(.pill-btn--fill) { background: var(--color-white); }
.pill-btn--l.pill-btn--ext svg { width: 10px; height: 10px; top: calc(50% - 5px); right: 39px; stroke-width: 2; }
.modal--project .article__links { margin-top: 93px; gap: 20px; }
@keyframes arrow-through-ne {
  0% { transform: none; opacity: 1; }
  45% { transform: translate(8px, -8px); opacity: 0; }
  46% { transform: translate(-8px, 8px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@media (hover: hover) { .pill-btn--ext:hover svg { animation-name: arrow-through-ne; } }
/* PREV・CLOSE・NEXT：1行に横並び（CLOSE が真ん中）。PC 18px／SP 12px。働く姿も Figma 10/22 で同じ形になったので共通（.modal--work） */
:is(.modal--project, .modal--work) .article__pager {
  grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: 0;
  width: 620px; margin-top: 49px; font: 500 18px/1 var(--font-en); letter-spacing: .15em;
}
:is(.modal--project, .modal--work) .article__pager svg { width: 10px; height: 20px; stroke-width: 1; }
:is(.modal--project, .modal--work) .article__prev, :is(.modal--project, .modal--work) .article__next { gap: 30px; }
:is(.modal--project, .modal--work) .article__prev { grid-column: 1; grid-row: 1; justify-self: start; }
:is(.modal--project, .modal--work) .article__closebtn { grid-column: 2; grid-row: 1; gap: 21px; letter-spacing: .15em; }
:is(.modal--project, .modal--work) .article__closebtn svg { width: 17px; height: 17px; }
:is(.modal--project, .modal--work) .article__next { grid-column: 3; grid-row: 1; }
@media (min-width: 768px) {
  .modal--project .modal__body { margin-top: 102px; }
  .modal--project .article__title { margin-top: 26px; }
  .modal--project .article__lead { margin-top: 43px; }
  .modal--project .article__sub { margin-top: 43px; }
  .modal--project .article__lead--after-sub { margin-top: 10px; }
  .modal--project .article__hero { margin-top: 26px; }
}
@media (max-width: 767px) {
  .modal--project .article__eyebrow { font-size: 14px; letter-spacing: .05em; }
  .modal--project .article__eyebrow::after { margin-top: 10px; }   /* 線は文字の上端から22px下（Figma：文字86・線108） */
  .modal--project .article__title { margin-top: 12px; font-size: 22px; line-height: 1.7; letter-spacing: 0; }   /* Figma SP は字間0 */
  .modal--project .article__lead { margin-top: 15px; }
  .modal--project .article__sub { margin-top: 14px; }
  .modal--project .article__lead--after-sub { margin-top: 8px; }
  .modal--project .article__h { font-size: 20px; line-height: 1.4; }
  .modal--project .article__label { padding-bottom: 6px; }
  .modal--project .article__label + .article__h { margin-top: 23px; }
  .modal--project .article__h { margin-top: 35px; }
  .modal--project .article__h + p { margin-top: 14px !important; }
  .modal--project .article__h4 { margin-top: 28px; }
  .modal--project .article__h4 + p { margin-top: 9px !important; }
  .modal--project .article__hero + .article__sec > .article__label:first-child { margin-top: 43px; }
  .modal--project .person + .article__sec > .article__label:first-child { margin-top: 52px; }
  .modal--project .article__sec--case { margin-top: 50px; }
  .modal--project .article__sec:has(+ .article__links) > .article__label:first-child { margin-top: 55px; }
  .modal--project .article__sec--voice + .article__sec > .article__h:first-child { margin-top: 45px; }
  .modal--project .article__links { margin-top: 72px; gap: 10px; }   /* 10/28 本人：縦に並ぶボタンの間は10（Figma 大賞 SP） */   /* Figma：大賞・ヘラルボニーは本文から77〜79（補助金だけ49） */
  :is(.modal--project, .modal--work) .article__pager { margin-top: 28px; }
  .pill-btn--l.pill-btn--ext svg { width: 9px; height: 9px; top: calc(50% - 4.5px); right: 29px; stroke-width: 1.3; }
  :is(.modal--project, .modal--work) .article__pager { width: 257px; padding: 0; font: 400 12px/1 var(--font-en); letter-spacing: .1em; }
  :is(.modal--project, .modal--work) .article__pager svg { width: 6px; height: 11px; }
  :is(.modal--project, .modal--work) .article__prev { gap: 14px; }
  :is(.modal--project, .modal--work) .article__next { gap: 15px; }
  :is(.modal--project, .modal--work) .article__closebtn { gap: 10px; letter-spacing: .1em; }
  :is(.modal--project, .modal--work) .article__closebtn svg { width: 9px; height: 9px; }
}

/* ---------- 働く姿（.modal--work）を Figma 10/22 の直しに合わせる（wt/work2） ----------
   PC 1671:10715・10919・11128／1959:1379、SP 1671:10515・11314・10314／1959:1165 */
/* 下のボタン：PCは2つを横に並べる（どちらも390×75・間20）。SPは縦に「大（288×50）＋小（236×34）」で間10
   「事業・サービス資料をDLする」は Figma で無くなったので外した */
.work__links { display: flex; justify-content: center; gap: 20px; }
.work__links .pill-btn--l { margin: 0; }
.work__links .pill-btn--l:not(.pill-btn--fill) { letter-spacing: .1em; }   /* Figma：「SHElikesをもっと知る」は字間が狭め */
@media (max-width: 767px) {
  .work__links { flex-direction: column; align-items: center; gap: 10px; }
  .work__links .pill-btn--l:not(.pill-btn--fill) { width: 236px; height: 34px; border-width: 1px; font-size: 12px; letter-spacing: .05em; --h: 34px; }
  .work__links .pill-btn--l.pill-btn--ext:not(.pill-btn--fill) svg { width: 8px; height: 8px; top: calc(50% - 4px); right: 17px; stroke-width: 1.3; }
}
/* 輪郭だけの小さいボタン（CMの視聴）の斜めの矢印（Figma 部品 btn_SHElikesをもっと知る 537:1710／SP btn_CMの視聴はこちら） */
.pill-btn--ext:not(.pill-btn--l) svg { width: 10px; height: 10px; top: calc(50% - 5px); right: 27px; stroke-width: 2; }
@media (max-width: 1023px) {
  .pill-btn--ext:not(.pill-btn--l) svg { width: 8px; height: 8px; top: calc(50% - 4px); right: 17px; stroke-width: 1.3; }
  /* CMのボタンの矢印は、ほかの小さいボタンと同じ位置（右17px）。前はFigmaどおり右32pxで「ら」に近かった（本人 10/25） */
}
/* インタビュー：同じ人の話が続く段落は、話し手が替わるときより間を狭くする（本人 10/22 の直接の指示・Figma には無い）
   話し手が替わる（「小山：」などの名前で始まる段落）：PC 25px／SP 20px のまま。同じ人の続き：PC 12px／SP 10px */
.work__sec > p:not([class]) + p:not([class]):not(:has(> .qa__who)) { margin-top: 12px; }
@media (max-width: 767px) {
  .work__sec > p:not([class]) + p:not([class]):not(:has(> .qa__who)) { margin-top: 10px; }
}
/* 長い記事（02〜04）は PC の筆の背景が途中で切れて、下の方が薄い青だけになっていた（絵の高さが01の7670pxだった）
   → Figma の筆2枚（1671:10720・10721）を書き出し直して高さ8560px（Figmaの筆の下端）まで描いた。CSSは前のまま */
/* 題（.work__title）：02の1行目は SP だけ2つの札に分ける（Figma SP 1671:11335・11336）。HTMLは PC用1つ＋SP用2つ（.pc-only／.sp-only） */
/* 注釈の2行目は「※2　」の後ろにそろえる（Figma PC 1671:11233：2行目の頭に全角スペース2つ） */
@media (min-width: 768px) { .work__note--hang { padding-left: 2em; text-indent: -2em; } }
/* PREV・CLOSE・NEXT の色は青（Figma 働く姿 #003da6） */
.modal--work .article__pager { color: var(--color-blue); }
/* ---------- SHE PROJECTS 10/22 午後の直し（Figma PC 1559:7383・7529・7666／SP 1559:8012・7894・7802） ---------- */
/* 補助金の年表：PCは札（350幅）の右に説明（間44・札の高さの真ん中）。SPは札（260幅）の下に説明
   説明の文字は Figma のまま＝PCは上3つが14px・下2つが16px（.tl__desc--l） */
.modal--project .tl::before { left: 24px; top: 27px; bottom: 32px; }
.modal--project .tl__item { display: flex; align-items: center; }
.modal--project .tl__item + .tl__item { margin-top: 25px; }
.modal--project .tl__head { flex: none; width: 350px; }
.modal--project .tl__date { width: 110px; }
.modal--project .tl__desc { margin: 0 0 0 44px; font-size: 14px; line-height: 22px; }
.modal--project .tl__desc--l { font-size: 16px; }
/* お話を伺った人の札：上下の線＋角丸2。PC 146×47・16px */
.modal--project .person__label {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 47px; padding: 0 12px; border-radius: 2px;
}
/* MEMBER'S WORKS：白い板（PC 1000幅・上50／左右100／下51）に作品5点を2段。説明は板の下 */
.modal--project .works { margin-top: 25px; text-align: left; }
.modal--project .works__box { padding: 50px 99px 51px 100px; box-shadow: var(--shadow-pc-s); }
.modal--project .works__row { display: flex; align-items: flex-start; }
.modal--project .works__row + .works__row { margin-top: 20px; }
.modal--project .works__row picture { display: block; }
.modal--project .works__row img { display: block; width: 100%; height: auto; }
.modal--project .works__row:first-child picture:nth-child(1) { width: 72.91%; }
.modal--project .works__row:first-child picture:nth-child(2) { width: 25.97%; margin-left: 1.12%; }
.modal--project .works__row:last-child picture:nth-child(1) { width: 24.84%; }
.modal--project .works__row:last-child picture:nth-child(2) { width: 21.10%; margin-left: 2.5%; }
.modal--project .works__row:last-child picture:nth-child(3) { width: 51.56%; }
.modal--project .works figcaption { margin: 20px 0 0 101px; }
.modal--project .article__sec--voice .article__label--center { margin-top: 26px; }
.modal--project .voice + .article__label--center { margin-top: 26px; }
@media (max-width: 767px) {
  /* リード文（タイトルの下の段落）は左24px内側（Figma SP x44）。本文は12px内側のまま */
  .modal--project .article__lead, .modal--project .article__sub { margin-left: 24px; }
  .modal--project .tl::before { left: 18px; top: 20px; bottom: 60px; }
  .modal--project .tl__item { display: block; }
  .modal--project .tl__item + .tl__item { margin-top: 15px; }   /* 10/29 夕 本人「パツパツ」：Figma 2538:59292 は説明の字の下→次の札15（前は11） */
  .modal--project .tl__head { width: 260px; }
  .modal--project .tl__date { width: 85px; }
  .modal--project .tl__desc, .modal--project .tl__desc--l { max-width: 230px; margin: 16px 0 0 70px; font-size: 12px; line-height: 18px; letter-spacing: 0; }   /* 札の下→説明の字の頭16（Figma。前は11） */
  /* お話を伺った人：写真の右の列の幅いっぱいに札。永田さん 146×41・14px（写真との間20）／松田さん 153×33・12px（間12） */
  .modal--project .person { column-gap: 20px; margin-inline: 24px; }
  .modal--project .person--in-sec { column-gap: 12px; margin-inline: 12px; }
  .modal--project .person__label { justify-self: stretch; height: 41px; margin-top: 4px; padding: 0; font-size: 14px; }
  .modal--project .person--in-sec .person__label { height: 33px; margin-top: 0; font-size: 12px; }
  .modal--project .person:not(.person--in-sec) .person__name { align-self: start; margin-top: 14px; }
  .modal--project .person:not(.person--in-sec) .person__name > p:first-child { white-space: nowrap; }
  .modal--project .person:not(.person--in-sec) .person__name b + span { display: inline; margin-left: 10px; white-space: nowrap; }
  .modal--project .person__bio { margin-top: 22px; }
  /* MEMBER'S WORKS：板 335幅（上15・左右12・下15）。説明は板の下15 */
  .modal--project .works { margin: 15px 0 0; }
  .modal--project .works__box { padding: 15px 12px; }
  .modal--project .works__row + .works__row { margin-top: 8px; }
  .modal--project .works figcaption { margin: 15px 27px 0 24px; }   /* Figma：線 x44・説明の幅269（10/26 ほかの記事とそろえた） */
  .modal--project .voice + .article__label--center { margin-top: 33px; }   /* 10/28 本人：声の箱→MEMBER'S WORKS を広げる（Figma SP ヘラルボニー：箱の下→札 33.5） */
}

/* ---------- 働く姿（PC）：10/26 Figma の並べ方のルールをそのまま写す ----------
   Figma の本文は「上下の余白を切る（キャップハイト）」設定で、間隔の数値＝見た目の間隔になっている。
   サイトも同じ切り方（text-box）にして、間隔は Figma の自動レイアウトの数値をそのまま書く。
   本人 10/26：写真→説明文は15・カード→図は50・見出しの写真→質問は35・質問のまとまりの間は35・ボタン→動画は80にそろえる（Figmaで記事ごとに違っていた所）
   冒頭の写真→本文はFigmaでは4本とも50（10/26 に Claude が80/150と読み違えて100を提案した。Figmaどおり50）
   （text-box が効かないブラウザ（Firefox）では、各間隔が少し広く見えるだけで崩れない） */
@media (min-width: 768px) {
  .modal--work :is(.work__catch, .work__desc, .work__ititle, .work__h, .qa__q, .work__note, .work__photo figcaption, .work__sec > p:not([class]), .work__sec > p.is-todo) {
    text-box: trim-both cap alphabetic;
  }
  /* 英字の札（CASE STUDY／PROJECT／INTERVIEW／MEMBER／VOICE）：Figma は高さ47の枠の下端に線 */
  .modal--work .work__case { box-sizing: border-box; height: 47px; padding: 0; line-height: 47px; margin-top: -2px; }
  .modal--work .article__label { box-sizing: border-box; height: 47px; padding: 0; line-height: 47px; }
  .modal--work .work__hero { margin-top: 50px; }
  /* PROJECT のまとまり */
  .modal--work .work__sec--center { margin-top: 50px; }
  /* 写真の上のタイトル：10/28 Figma（PC hero）＝写真の中・下端から20上／字間2%（01だけ5%）／角丸1.7 */
  .modal--work .work__title { bottom: 20px; }
  .modal--work .work__title span { letter-spacing: .02em; border-radius: 1.7px; }
  dialog[data-modal="work-01"] .work__title span { letter-spacing: .05em; }
  .modal--work .work__sec--center .article__label { margin-top: 0; }
  .modal--work .work__catch { display: block; width: 800px; max-width: 100%; margin: 45px auto 0; text-align: center; }   /* Figma の見出しの箱（幅800・中央そろえ）。引用符はこの箱からの距離で置く */   /* inline-block だと行の分だけ下が広がり、table だと上下の余白を切れない */
  .modal--work .work__sec--center .work__desc { margin-top: 45px !important; }   /* 02 は前にSP用の図（非表示）があるので、写真→本文の35に負けないように */
  .modal--work .work__stats { margin-top: 40px; }
  .modal--work .work__cm { margin-top: 50px; }
  /* 下線の見出しのカード：見出し→本文30（見出しは1行50pxの最後に3px余るので27）・カードの間30・最後のカード→図50 */
  .modal--work :is(.work__sec--center, .work__cm) + .work__sec { margin-top: 50px; }
  .modal--work .work__uline { font: 700 24px/50px var(--font-sans); }   /* 見出しの箱の行の高さも50にそろえる（そろえないと1行が58になる） */
  .modal--work .work__sec > .work__uline { margin-top: 30px; }
  .modal--work .work__sec > .work__uline:first-child { margin-top: 0; }
  .modal--work .work__uline + p { margin-top: 27px !important; }
  /* 写真・図→説明文15 */
  .modal--work :is(.work__photo, .work__map, .work__chart-mk) figcaption { margin-top: 15px; }
  /* INTERVIEW／MEMBER／VOICE：前のまとまりから100・札→見出し50・見出し→写真30 */
  .modal--work .work__sec .article__label--center { margin-top: 100px; }
  .modal--work .work__ititle { margin-top: 50px; }
  .modal--work :is(.work__ititle, .work__h) + .work__photo { margin-top: 30px; }
  /* 本文の中：写真・質問・メモは35あける。質問→答え35。話し手が替わる段落は25、同じ話し手の続きは12。注釈は25 */
  .modal--work .work__photo { margin-top: 35px; }
  .modal--work .work__sec > :is(.work__chart-mk, .work__map, .work__photo--chart) { margin-top: 50px; }
  /* 白い箱の図（Kickoffのスライド・申し送り資料など）：Figma は箱の高さ469で、画像は箱のまん中に原寸で置く */
  .modal--work .work__box { display: grid; place-items: center; height: 469px; padding: 0; }
  .modal--work .work__box img { width: auto; max-width: 100%; aspect-ratio: auto; }
  .modal--work .work__box img[src$="cp_p2.jpg"] { width: 662px; }
  .modal--work .work__box img[src$="cp_p4.jpg"] { width: 658px; }
  .modal--work .work__box img[src$="hj_p3.jpg"] { width: 748px; }
  .modal--work .work__box img[src$="hj_p4.jpg"] { width: 696px; }
  .modal--work .qa__q { display: block; position: relative; padding-left: 55px; margin-top: 35px; }
  .modal--work .qa__q::before { position: absolute; left: 0; top: .5em; width: 45px; margin: 0; }
  .modal--work .qa__q + p { margin-top: 35px !important; }
  .modal--work .work__photo + p { margin-top: 35px !important; }
  .modal--work .work__sec > p:not([class]) + p:not([class]) { margin-top: 25px; }
  .modal--work .work__sec > p:not([class]) + p:not([class]):not(:has(.qa__who)) { margin-top: 12px; }
  .modal--work .work__note { margin-top: 25px; }
  /* 小見出し（写真の上の見出し）：前のまとまりから80 */
  .modal--work .work__h { margin-top: 80px; }
  /* MEMBER：札→一覧35・カードの間15。メンバー→ボタン80・ボタンの間19・ボタン→動画80・動画→PREV/NEXT 50 */
  .modal--work .members { margin-top: 35px; }
  .modal--work .work__links { margin-top: 80px; gap: 19px; }
  .modal--work .work__links + :is(.work__video, .work__vcarousel, .work__recruit) { margin-top: 80px; }
  .modal--work .work__recruit .work__video { margin-top: 50px; }
  .modal--work :is(.work__links, .work__video, .work__vcarousel, .work__recruit) + .article__pager { margin-top: 50px; }
}

/* ---------- SHE PROJECTS（PC）：10/26 Figma の並べ方のルールをそのまま写す（働く姿と同じ考え方） ---------- */
@media (min-width: 768px) {
  .modal--project :is(.article__title, .article__sub, .article__lead, .article__h, .article__h4, .article__note, .article__sec > p:not([class]), .article__fig figcaption, .voice p, .member__name, .member__bio, .person__name, .person__bio, .whatis__title, .whatis__text, .tl__desc) {
    text-box: trim-both cap alphabetic;
  }
  .modal--project .article__label { box-sizing: border-box; height: 47px; padding: 0; line-height: 47px; }
  .modal--project .article__eyebrow { text-box: trim-both cap alphabetic; }
  /* 冒頭：見出し→リード70（ヘラルボニーは見出し→小見出し70・小見出し→リード30）・リード→写真35 */
  .modal--project .article .article__title { margin-top: 50px; }
  .modal--project .article .article__lead, .modal--project .article .article__sub { margin-top: 70px; }
  .modal--project .article .article__lead--after-sub { margin-top: 30px; }
  .modal--project .article .article__hero { margin-top: 35px; }
  /* 写真→STORY 50（ヘラルボニーは「お話を伺った人」→STORY 30）・札→見出し25・見出し→本文40・小見出し→本文30 */
  .modal--project .article .article__label + .article__h { margin-top: 25px; }
  .modal--project .article .article__h { margin-top: 80px; }
  .modal--project .article .article__h + p { margin-top: 40px !important; }
  .modal--project .article .article__h4 { margin-top: 50px; }
  .modal--project .article .article__h4 + p { margin-top: 30px !important; }
  .modal--project .article .article__note { margin-top: 20px; }
  /* CASE・FUTURE VISION の札：前のまとまりから80。MEMBER'S VOICE の札：50 */
  .modal--project .article .article__sec:not(.article__sec--voice) > .article__label:first-child { margin-top: 80px; }
  .modal--project .article .article__sec--voice > .article__label:first-child { margin-top: 50px; }
  .modal--project .article .article__sec--voice + .article__sec > .article__label:first-child { margin-top: 71px; }   /* MEMBER'S VOICE のまとまりの下は、中の余白の分だけ詰める（Figma 80） */
  .modal--project .article .article__hero + .article__sec > .article__label:first-child { margin-top: 50px; }
  .modal--project .article .person + .article__sec > .article__label:first-child { margin-top: 30px; }
  .modal--project .article .article__sec { margin-top: 0; }
  .modal--project .article .article__sec--voice + .article__sec > .article__h:first-child { margin-top: 107px; }   /* 大賞：MESSAGEの箱→次の見出し（Figma 184） */
  .modal--project .article .voice p + p { margin-top: 40px; }
  .modal--project .article .member { margin-top: 31px; }   /* 声の箱の下の余白55を引いた分（Figma：本文→写真86） */
  .modal--project .article .voice + .article__label--center { margin-top: 36px; }   /* 声の箱の下の余白55を引いた分（Figma 91） */
  .modal--project .article .whatis__text { margin-top: 35px; }
  .modal--project .article .article__fig figcaption { padding: 2.5px 0 2.5px 18px; }
  .modal--project .article .article__wide { margin-top: 50px; }
  .modal--project .article .person--in-sec + .article__h4 { margin-top: 50px; }
  /* お話を伺った人：札・名前・紹介文のかたまりを写真の高さのまん中に（Figma）。札は高さ47・札→名前25・1行目→紹介文25 */
  .modal--project .article .person { grid-template-rows: 1fr 47px auto 1fr; row-gap: 0; height: 176px; }   /* 上下の 1fr で、札＋紹介文のかたまりを写真の高さのまん中に */
  .modal--project .article .person__photo { grid-row: 1 / 5; }
  .modal--project .article :is(.person__label, .person__name) { grid-row: 2; }
  .modal--project .article .person__bio { grid-row: 3; }
  .modal--project .article .person__bio { max-width: 469px; }   /* Figma：紹介文の幅（永田さん469・松田さん573） */
  .modal--project .article .person--in-sec .person__bio { max-width: 573px; }
  .modal--project .article .person--in-sec { margin-top: 35px; }
  .modal--project .article .person--in-sec .person__label { margin-left: 9px; }   /* 写真→札 35（永田さんは40） */
  .modal--project .article .person__label { box-sizing: border-box; height: 47px; margin-top: 0; padding: 0 12px; line-height: 45px; align-self: center; }
  .modal--project .article .person__name { margin: 0 0 0 -1px; align-self: center; }
  .modal--project .article .person__bio { margin-top: 25px; }
  .modal--project .article .person__name p { margin: 0; }
  /* X の説明：3行それぞれに線（Figma：行の高さ25・行の間 -3） */
  /* 本文の最後→ボタン100・ボタン→PREV/NEXT 50 */
  .modal--project .article .article__links { margin-top: 100px; }
}

/* ---------- モーダル（SP）：10/26 Figma の並べ方のルールをそのまま写す（PCと同じく文字の上下を切る） ---------- */
@media (max-width: 767px) {
  .modal--work :is(.work__catch, .work__desc, .work__ititle, .work__h, .qa__q, .work__note, .work__photo figcaption, .work__map figcaption, .work__chart-mk figcaption, .work__sec > p:not([class]), .work__sec > p.is-todo),
  .modal--project :is(.article__eyebrow, .article__title, .article__sub, .article__lead, .article__h, .article__h4, .article__note, .article__sec > p:not([class]), .article__fig figcaption, .voice p, .member__name, .member__bio, .person__name, .person__bio, .whatis__title, .whatis__text, .tl__desc) {
    text-box: trim-both cap alphabetic;
  }
  /* 英字の札：Figma SP は高さ33の枠（CASE STUDY は37） */
  .modal--work .work .article__label, .modal--project .article .article__label { box-sizing: border-box; height: 33px; padding: 0; line-height: 33px; }
  .modal--work .work .work__case { box-sizing: border-box; height: 37px; padding: 0; line-height: 37px; }

  /* ===== 働く姿（SP） ===== */
  .modal--work .work .work__hero { width: 100%; max-width: none; margin-top: 29px; }   /* 10/29 夕 本人「すりガラスと写真の始まりがずれている」：Figma 2538:55690 は写真＝すりガラスと同じ x20・y137・幅335 */
  .modal--work .work .work__hero img { aspect-ratio: 335 / 180; }
  .modal--work .work .work__title { margin-top: -6px; }
  .modal--work .work .work__sec--center { margin-top: 30px; }
  .modal--work .work .work__sec--center .article__label { margin-top: 0; }
  .modal--work .work .work__catch { display: block; margin-top: 30px; }
  .modal--work .work .work__sec--center .work__desc { margin-top: 25px !important; }
  .modal--work .work .work__stats { margin-top: 25px; }
  .modal--work .work .work__cm { width: 311px; max-width: 100%; margin: 30px auto 0; }
  .modal--work .work .work__cm img { aspect-ratio: 311 / 175; object-fit: cover; }
  /* 下線の見出しのカード：CM・PROJECT→最初の見出し20・見出し→本文20・カードの間15・最後→図30 */
  .modal--work .work :is(.work__sec--center, .work__cm) + .work__sec { margin-top: 20px; }
  .modal--work .work .work__sec > .work__uline { margin-top: 15px; }
  .modal--work .work .work__sec > .work__uline:first-child { margin-top: 0; }
  .modal--work .work .work__sec > :is(.work__chart-mk, .work__map, .work__photo--chart) { margin-top: 30px; }
  /* INTERVIEW・MEMBER・VOICE：前から50・札→見出し30・見出し→写真20・写真→質問35 */
  .modal--work .work .work__sec .article__label--center { margin-top: 50px; }
  .modal--work .work .work__ititle { margin-top: 30px; }
  .modal--work .work .work__ititle + .work__photo { margin-top: 20px; }
  .modal--work .work .work__photo { margin: 35px 12px 0; }
  .modal--work .work .work__ititle + .work__photo { margin-inline: 0; }
  .modal--work .work .work__ititle + .work__photo img { aspect-ratio: 311 / 180; }
  .modal--work .work .work__h { margin-top: 50px; margin-inline: 12px; }   /* 10/29 本人「働く姿のSPは写真に合わせて」：小見出しの左端を写真・本文と同じ12px内側に */
  .modal--work .work .work__h + .work__photo { margin-top: 15px; }
  .modal--work .work .work__photo + :is(p, .qa__q) { margin-top: 20px !important; }
  .modal--work .work .work__photo:has(figcaption) + :is(p, .qa__q) { margin-top: 35px !important; }
  /* 質問→答え：線まで20・線→答え20。話し手が替わる段落25・同じ話し手の続き10・質問のまとまりの間35・注釈20 */
  .modal--work .work .qa__q { margin-top: 35px; }
  .modal--work .work .qa__q::after { margin-top: 20px; }
  .modal--work .work .qa__q + p { margin-top: 20px !important; }
  .modal--work .work .work__sec > p:not([class]) + p:not([class]) { margin-top: 25px; }
  .modal--work .work .work__sec > p:not([class]) + p:not([class]):not(:has(.qa__who)) { margin-top: 10px; }
  .modal--work .work .work__note { margin-top: 20px; }
  /* MEMBER：札→一覧30・カードの間10。メンバー→ボタン50・ボタンの間10・ボタン→動画35・動画→PREV/NEXT 30 */
  .modal--work .work .members { margin-top: 30px; gap: 10px; }
  .modal--work .work .work__links { margin-top: 50px; gap: 10px; }
  .modal--work .work .work__links .pill-btn--l { margin-bottom: 0; }
  .modal--work .work .work__links + :is(.work__video, .work__vcarousel, .work__recruit) { margin-top: 35px; }
  .modal--work .work :is(.work__links, .work__video, .work__recruit) + .article__pager { margin-top: 30px; }

  /* ===== SHE PROJECTS（SP） ===== */
  .modal--project .article .article__title { margin-top: 25px; }
  .modal--project .article .article__lead, .modal--project .article .article__sub { margin-top: 30px; }
  .modal--project .article .article__lead--after-sub { margin-top: 20px; }
  .modal--project .article .article__hero { margin-top: 25px; }
  .modal--project .article .article__sec { margin-top: 0; }
  .modal--project .article .article__sec > .article__label:first-child { margin-top: 50px; }
  .modal--project .article .article__hero + .article__sec > .article__label:first-child { margin-top: 35px; }
  .modal--project .article .article__hero + .person { margin-top: 50px; }
  .modal--project .article .person + .article__sec > .article__label:first-child { margin-top: 50px; }
  .modal--project .article .article__label + .article__h { margin-top: 30px; }
  .modal--project .article .article__h { margin-top: 50px; }
  .modal--project .article .article__h + p { margin-top: 25px !important; }
  .modal--project .article .article__sec > p:not([class]) + p:not([class]) { margin-top: 20px; }
  .modal--project .article .article__h4 { margin-top: 40px; }
  .modal--project .article .article__h4 + p { margin-top: 22px !important; }
  .modal--project .article .person--in-sec + .article__h4 { margin-top: 40px; }
  .modal--project .article .article__note { margin-top: 15px; }
  .modal--project .article .article__fig figcaption { margin-top: 15px; padding: 3.5px 0 3.5px 15px; }
  .modal--project .article .article__fig + p { margin-top: 25px !important; }
  .modal--project .article .voice p + p { margin-top: 25px; }
  .modal--project .article .article__links { margin-top: 50px; }
  .modal--project .article .article__wide + p { margin-top: 20px !important; }   /* 10/28 本人：写真→本文 SP20 */
  .modal--project .article .article__pair img { aspect-ratio: 289 / 193; }
  .modal--project .article .article__ugc-cap span { padding: 5px 0 5px 15px; line-height: 1.5; }

  /* --- 測って合わせた残り（10/26） --- */
  /* 働く姿：INTERVIEW・VOICE の最初の写真→質問・本文は35（本文中の写真→質問は20） */
  .modal--work .work .work__ititle + .work__photo + :is(p, .qa__q) { margin-top: 35px !important; }
  /* 質問の線：文字の下20（文字の最後の行の下は切れないので、その分4を引く） */
  .modal--work .work .qa__q::after { margin-top: 16px; }
  /* 写真の説明→本文25・質問35。白い箱の図は本文から25 */
  .modal--work .work .work__photo:has(figcaption) + p { margin-top: 25px !important; }
  .modal--work .work .work__photo:has(.work__box) { margin-top: 25px; }
  /* PROJECT→最初の下線見出し：CMがある01は20・ない記事は30 */
  .modal--work .work .work__sec--center + .work__sec { margin-top: 30px; }
  /* 下線見出しの下の図（01の組織図・02の図・03・04の図）は幅311 */
  .modal--work .work .work__sec > :is(.work__chart-mk, .work__map, .work__photo--chart) { margin-inline: 0; }
  /* 01「共感のうねり」の写真の説明文：10/28 Figma SP（1671:10637）にも入った＝SPでも出す（写真との間10） */
  /* 02 の「副業・業務委託キャリアプランナー募集」はボタンから50 */
  .modal--work .work .work__links + .work__recruit { margin-top: 50px; }
  /* 04 の動画2本（下に点がある）→PREV/NEXT */
  .modal--work .work .work__vcarousel + .article__pager { margin-top: 53px; }
  /* メンバーのカード：写真の上15・名前は写真の上から11・肩書きは名前の下12・紹介文は写真の下15・下の余白24 */
  .modal--work .work .members__item { padding: 15px 17px 24px; row-gap: 15px; }
  .modal--work .work .members__name { align-self: start; margin-top: 11px; }
  .modal--work .work :is(.members__name > p, .members__role, .members__bio) { text-box: trim-both cap alphabetic; }
  .modal--work .work .members__role { margin-top: 12px; }

  /* SHE PROJECTS：本文→白い箱の図25・WHAT IS→写真・写真2枚は幅289 */
  .modal--project .article .article__fig { margin-top: 25px; }
  .modal--project .article .whatis + .article__fig { margin-top: 26px; }
  .modal--project .article .article__pair { width: 289px; max-width: 100%; margin-inline: auto; }
  /* 大賞：MESSAGE の札は本文から66。FUTURE VISION の見出しは2行で列から少しはみ出す（Figma） */
  dialog[data-modal="project-taisho"] .article__sec--voice > .article__label:first-child { margin-top: 66px; }
  dialog[data-modal="project-taisho"] .article__sec:has(+ .article__links) .article__h { white-space: nowrap; }
  /* 補助金：MEMBER'S VOICE の札は写真の説明から50。ヘラルボニー：本文から35 */
  dialog[data-modal="project-hojo"] .article__sec--voice > .article__label:first-child { margin-top: 50px; }
  dialog[data-modal="project-heralbony"] .article__sec--case + .article__sec--voice > .article__label:first-child { margin-top: 35px; }
  /* 声の箱：文字の幅288（左右12） */
  .modal--project .article .voice { padding-inline: 11.5px; }
  /* ヘラルボニーの小見出し：STORY の中は16px・左右12内側／CASE の中は20px・幅いっぱい（Figma） */
  .modal--project .article .article__h4 { margin-inline: 12px; }
  .modal--project .article .person--in-sec + .article__h4 { margin-inline: 0; font-size: 20px; line-height: 1.4; }
  /* ヘラルボニー：STORY の中の小見出しより下の本文・注釈は12内側（Figma SP：x44・幅299） */
  dialog[data-modal="project-heralbony"] .article__sec:not(.article__sec--case) .article__h4 ~ :is(p, .article__note) { margin-inline: 12px; }
  /* 声の文章：Figma SP は手で改行した中央そろえ */
  .modal--project .article .voice p { text-align: center; }
  /* 働く姿の大きい見出しの引用符：Figma SP も出す（小さく・列の内側12） */
  /* 10/30 本人「テキストとちょんちょんの位置関係・大きさは 01 の iPhone SE がベスト」：引用符を見出しの1行目（.work__l1）の両脇に付ける（4記事とも・どの幅でも同じ距離。Figma SP も1行目の脇）
     大きさは Figma SP の 14.03×11.16 のまま。位置は下の 10/30 Figma の値 */
  .modal--work .work .work__sec--center .work__catch { position: relative; padding-inline: 0; }
  .modal--work .work .work__catch::before, .modal--work .work .work__catch::after { display: none; }
  .modal--work .work .work__l1 { position: relative; }
  .modal--work .work .work__l1::before, .modal--work .work .work__l1::after { content: ""; position: absolute; width: 14.03px; height: 11.16px; background: url(../assets/modal/quote_open.svg) no-repeat 0 0 / 100% 100%; }
  .modal--work .work .work__l1::before { left: var(--ql); }
  .modal--work .work .work__l1::after { right: var(--qr); background-image: url(../assets/modal/quote_close.svg); }
  /* 10/30 Figma（10:41）：引用符は見出しの文字の上端から8上（1行目の箱の上から-1.1）。1行目の端からの距離は記事ごと（375幅の Figma の位置を1行目の端から測った値） */
  .modal--work .work .work__l1::before, .modal--work .work .work__l1::after { top: -1.1px; }
  dialog[data-modal="work-01"] .work__l1 { --ql: -21.9px; --qr: -21.9px; }
  dialog[data-modal="work-02"] .work__l1 { --ql: -31.7px; --qr: -31.7px; }
  dialog[data-modal="work-03"] .work__l1 { --ql: -21.7px; --qr: -21.7px; }
  dialog[data-modal="work-04"] .work__l1 { --ql: -21.4px; --qr: -19.4px; }
  /* 題の札（Figma SP 10/30 10:41）：17px・上下8・左右8（記事ごとに2の所あり）・文字の上下を切って高さ28・札の間5・角丸1。白い列より広い札も中央に
     文字・余白・札の間は画面の幅に合わせて伸び縮み（375幅で Figma の px。余白は em＝17pxに対する比） */
  .modal--work .work .work__title { gap: calc(5 / 375 * 100vw); margin-top: calc(-14 / 375 * 100vw); justify-items: unsafe center; }   /* 10/30 本人「写真の下端が1つ目の札の真ん中に来るように」（4記事とも）＝札の高さ28の半分だけ上げる */
  .modal--work .work .work__title span { padding: .4706em; border-radius: 1px; text-box: trim-both cap alphabetic; line-height: 1.9; }
  dialog[data-modal="work-01"] .work__title span:nth-child(1) { padding-inline: .1176em; }   /* 左右2（「」の空きの分） */
  dialog[data-modal="work-01"] .work__title span:nth-child(2) { padding-left: .1176em; }
  dialog[data-modal="work-02"] .work__title span:nth-child(3) { padding-right: .1176em; }   /* 「熱狂的なカルチャー醸成。」の右2 */
  dialog[data-modal="work-04"] .work__title span:nth-child(1) { letter-spacing: 0; }
  .modal--work .work .work__sec--center .work__catch { margin-top: 29px; }   /* PROJECT の札（枠33）から30＝Figma y487 */
  /* 10/30 Figma：見出しは20px（02だけ行間30・ほかは27.28）。最後の札→PROJECT は 01 27・02 26・03／04 30 */
  .modal--work .work .work__catch { font-size: 20px; line-height: 1.364; }
  dialog[data-modal="work-02"] .work .work__catch { line-height: 1.5; }
  dialog[data-modal="work-01"] .work .work__sec--center { margin-top: 27px; }
  dialog[data-modal="work-02"] .work .work__sec--center { margin-top: 26px; }
}

/* 写真の下の人物の説明（10/26 Figma）：PC 16px・写真から20／SP 12px・写真から10。中央そろえ */
.modal--work .work .work__photo figcaption.work__who { margin-top: 20px; text-align: center; text-box: trim-both cap alphabetic; }
@media (max-width: 767px) { .modal--work .work .work__photo figcaption.work__who { margin-top: 10px; } }
/* 大賞の X の説明：線1本の1つの文章（10/30 本人：PCもSPと同じ文に） */
@media all {
  .modal--project .article .article__ugc-cap { padding: 3.5px 0 3.5px 15px; border-left: 1.5px solid var(--color-blue); }
  .modal--project .article .article__ugc-cap span { display: inline; padding: 0; border: 0; margin: 0; }
  .modal--project .article .article__ugc-cap span:first-child { display: block; }
  .modal--project .article .article__ugc-cap span:nth-child(1)::after { content: "。"; }
  .modal--project .article .article__ugc-cap span:nth-child(2)::after { content: "、"; }
  .modal--project .article .article__ugc-cap span:nth-child(3)::after { content: "。"; }
}

/* “働く”モーダル：スマホ3台の画面で動画を流す（本人 10/26） */
/* 10/30 Figma 2600:2390（本人が差し替え）：本体とボタン（背景）→動画→ノッチ（上の画像）の3層。位置は Figma の枠 380×231 の中の％
   画面は 97.634×207.458・角の丸み 12.83（本体 107×215 の左上から 4.768, 3.771）。iPhone 14 で画面の上に白いすき間が出ていたので、下に本体の黒を敷いた */
.growth-phones { position: relative; aspect-ratio: 380 / 231; background: url(../assets/modal/growth_phones_under.svg) 0 0 / 100% 100% no-repeat; }
.growth-phones .growth-phones__over { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.growth-phones__v { position: absolute; top: 4.663%; width: 25.693%; height: 89.808%; object-fit: cover; border-radius: 13.14% / 6.23%; background: #000; }
.growth-phones__v:nth-child(1) { left: 6.518%; }
.growth-phones__v:nth-child(2) { left: 37.307%; }
.growth-phones__v:nth-child(3) { left: 68.097%; }

/* 働く姿の見出し：Figma は英数字が Poppins Bold・日本語は Noto Sans JP Bold（10/26 に照合）。字間は記事ごと
   PC：01 は日本語7%・英数字2%／02 は2%／03・04 は5%。SP：すべて2% */
.modal--work .work__catch { font-family: var(--font-en); }
.modal--work .work__title span { font-family: var(--font-en); }   /* 10/30 本人「写真の上のタイトルも英数字を Poppins に」（見出しと同じ。太さは Bold＝Figma の SemiBold） */
@media (min-width: 768px) {
  dialog[data-modal="work-01"] .work__catch { letter-spacing: .07em; }
  dialog[data-modal="work-01"] .work__catch .en { letter-spacing: .02em; }
  dialog[data-modal="work-02"] .work__catch { letter-spacing: .02em; }
  dialog[data-modal="work-03"] .work__catch, dialog[data-modal="work-04"] .work__catch { letter-spacing: .05em; }
}
@media (max-width: 767px) {
  .modal--work .work .work__catch, .modal--work .work .work__catch .en { letter-spacing: .02em; }
}

/* ---------- 働く姿の記事：段落のまとまりごとの空き（Figma 10/27 本人が見直し。PC 1671:10715・10919・11128／1959:1379、SP 1671:10515・11314・10314／1959:1165）----------
   PC：同じ話し手の続き20・話し手が替わる30・VOICEの段落どうし30
   SP：同じ話し手の続き20・話し手が替わる25・VOICEの段落どうし25・本文→次の質問40・メンバーの名前→肩書き12
   （10/22 の「同じ話し手は狭く（PC12／SP10）」は、この値で置きかえ） */
.modal--work .modal__body.work .work__sec > p:not([class]) + p:not([class]) { margin-top: 30px; }
.modal--work .modal__body.work .work__sec > p:not([class]) + p:not([class]):not(:has(> .qa__who)) { margin-top: 20px; }
.modal--work .modal__body.work .work__sec--voice > p:not([class]) + p:not([class]):not(:has(> .qa__who)) { margin-top: 30px; }
@media (max-width: 767px) {
  .modal--work .modal__body.work .work__sec > p:not([class]) + p:not([class]) { margin-top: 25px; }
  .modal--work .modal__body.work .work__sec > p:not([class]) + p:not([class]):not(:has(> .qa__who)) { margin-top: 20px; }
  .modal--work .modal__body.work .work__sec--voice > p:not([class]) + p:not([class]):not(:has(> .qa__who)) { margin-top: 25px; }
  .modal--work .modal__body.work .work__sec > p:not([class]) + .qa__q { margin-top: 40px; }
  .modal--work .modal__body.work .members__role { margin-top: 20px; }
  .modal--work .modal__body.work .members__bio { margin-top: 8px; }
}
/* SP：写真→次の質問の空きがFigmaで個別に違う所（10/27 本人「SPはFigmaに合わせて」）。01「AI時代における〜」40、01「制作から配信〜」・02「200人規模の〜」「改めてこの変革期〜」20 */
@media (max-width: 767px) {
  .modal--work .modal__body.work .qa__q.qa__q--sp40 { margin-top: 40px !important; }
  .modal--work .modal__body.work .qa__q.qa__q--sp20 { margin-top: 20px !important; }
}

/* 10/28 夜 Figma：白い列は 白85%＋背景ぼかし20。PC は幅1200・y466 から（写真の途中から）、SP は左右20を残して y137 から（写真の上端から） */
.modal--work .modal__panel::before { content: ""; position: absolute; left: 50%; top: 466px; bottom: 0; width: min(1200px, 100%); transform: translateX(-50%);
  background: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); pointer-events: none; }   /* すりガラスB（10/28 夜） */
.modal--work .modal__body.work { position: relative; z-index: 1; }
@media (max-width: 767px) { .modal--work .modal__panel::before { top: 137px; width: calc(100% - 40px); } }
/* 10/28 夜 Figma（PC）：写真は幅1200×650／見出しは35px・字間5%・札の余白 上下18 左右20・角丸2・写真の下端から40上・左は写真から21はみ出す・間10 */
@media (min-width: 768px) {
  .modal--work .work__hero { width: 1200px; max-width: calc(100vw - 32px); margin: 34px 0 0 calc(50% - 600px); }   /* 記事の列（1000）より広い＝列の外へはみ出して中央 */
  .modal--work .work__hero img { aspect-ratio: 1200 / 650; }
  .modal--work .work__title { left: -21px; bottom: 40px; gap: 10px; }
  .modal--work .work .work__title span { padding: 18px 20px; font-size: 35px; line-height: 26px; letter-spacing: .05em; border-radius: 2.2px; box-shadow: 0 0 11px rgb(0 61 166 / .2); }
}

/* 11/2 本人：働く姿のトップの写真の右上にSHEロゴ。PC・iPadは写真の書き出しに入っている（Figma 2618:6551 ほか）。
   SPは写真を切り抜いて使うので、ロゴだけ重ねる（Figma 2618:906：写真335×180の右から10・上から10・幅34。上の空きは幅に対する％＝margin で書く） */
.work__logo { display: none; }
@media (max-width: 767px) {
  .modal--work .work__hero .work__logo { display: block; position: absolute; top: 0; right: calc(10 / 335 * 100%); margin-top: calc(10 / 335 * 100%); width: calc(34.1 / 335 * 100%); height: auto; z-index: 1; }
}