/* =========================================================
   KANAMOTO HOLDINGS 採用サイト — lower.css（下層の骨組みと共通部品・2026-10-29）
   tokens.css → fv.css → top.css → motion.css の後に読む。色・角丸・余白は tokens.css の変数だけを参照する
   （例外：transparent／currentColor／白の透過 rgba(255,255,255,…)）。
   骨組み（設計書 6.1）：下層MV（パンくず・ラベル・H1・リード・文責）→ 要約 → 本文（01〜。地は白と淡いオレンジ白を交互）
                       → FAQ（3問）→ 次に読む＋カテゴリ・インデックス → エントリー帯（top.css）→ フッター（top.css）
   部品（6.2）：.lpanel 面／.split 写真と文／.prose 文章／.dtable 罫線の表／.tabs タブ／.lsteps ステップ／.timeline 時系列／
               .qa 質問と答え／.stat 数字／.chips チップ／.ncard 次に読む／.catidx カテゴリ・インデックス／.toc ページ内の目次
   札（後ろにずらして重ねる淡い面）は使わない（10/29）。重なりは最小限に。動きは M3・M4・M5・M7・M9・M12（1ページ2か所まで）
   ブレークポイント：SP 〜767 ／ 768 タブレット ／ 1024 左右に分ける ／ 1200 PC
   ========================================================= */

/* ---------- 下層の基礎 ---------- */
h1, h3, h4 { margin: 0; }
/* 折り返し：短い文（リード・説明・カードの一言）は文節で、段落は最後の行に1〜2字だけ残さない */
.lmv__lead, .sec-text, .job-card__text, .pcard__title, .ncard__text, .lpanel__title, .catidx__ja { word-break: auto-phrase; }
.lmv__lead, .sec-text, .lsum__text, .lpanel__text, .prose p, .qa__a > p, .timeline__text, .lsteps__text, .faq__a-body > p, .ncard__text, .stat__note, .note { text-wrap: pretty; }
/* 見出し・短い行：1〜2字だけ次の行に落とさない（文節で区切り、行の長さをそろえる） */
.job-card__title, .job-card__text, .ncard__title, .pcard__title, .lpanel__title, .qa__q-text, .faq__qtext, .timeline__title, .lsteps__name, .post-apply__job, .rq-post__title, .post-other__type { word-break: auto-phrase; text-wrap: balance; }
/* 本文の短い行・表・リスト：最後の行に1〜2字だけ残さない（text-wrap: pretty に対応したブラウザで） */
main :is(p, li, dt, dd, td, th, figcaption) { text-wrap: pretty; }
/* 表の値・条件のリスト・プロフィールの1行：2字だけ落ちるのも避ける（文節で区切って、行の長さをそろえる） */
.dtable__td, .ptable__list li, .skills__list li, .senior__meta, .pcard__meta, .office__addr, .office__access { word-break: auto-phrase; text-wrap: balance; }
/* 白い地の上の白いピル（説明会など）は淡いオレンジに */
.lsec:not(.lsec--pale) .btn-sub { background: var(--color-tint); }
.lsec:not(.lsec--pale) .btn-sub:hover { background: var(--color-layer); }
/* 面（.lpanel）の中のサブボタンは、面と反対の地に（白い節の淡い面では白、淡い節の白い面では淡いオレンジ） */
.lsec:not(.lsec--pale) .lpanel .btn-sub { background: var(--color-bg); }
.lsec--pale .lpanel .btn-sub { background: var(--color-tint); }
.lsec .lpanel .btn-sub:hover { background: var(--color-layer); }
.label-no { margin-right: .7em; font-weight: var(--fw-bold); }
.note { font-size: 13px; line-height: 1.8; letter-spacing: var(--ls-ja); color: var(--color-gray); }
.lh3 { font-size: 18px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.ph-frame { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--color-bg-kv); }
.ph-frame img { object-position: var(--pos, 50% 50%); }
.marker { background: linear-gradient(transparent 62%, var(--color-marker) 62%); }

/* =========================================================
   下層MV：淡いオレンジ白の地（FV と同じ方眼）。左にラベル・H1・リード・文責、右に写真の窓（札は重ねない）
   ========================================================= */
.lmv {
  position: relative;
  padding: calc(var(--header-h) + 4px) var(--kv-pad) calc(56px + var(--radius-xl)); /* 下の白い面（要約）が角丸で重なる分を足す */
  background-color: var(--color-bg-page);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.lmv__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px;
  max-width: var(--container-kv); margin: 0 auto;
}
.lmv__text { min-width: 0; }
.lmv__title {
  font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .08em;
  word-break: auto-phrase;
}
.lmv__title .rv-line { vertical-align: top; }
.lmv__meta { margin-top: 12px; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.lmv__lead { margin-top: 16px; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); letter-spacing: var(--ls-ja); }
.lmv .byline { margin-top: 20px; }
.lmv__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-l); overflow: hidden; background: var(--color-bg-kv); }
.lmv__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.lmv--compact { padding-bottom: calc(48px + var(--radius-xl)); }
.lmv--wide .lmv__frame { aspect-ratio: auto; height: clamp(300px, 60vh, 640px); border-radius: var(--radius-xl); }
@media (max-width: 1023px) { .lmv--wide .lmv__frame { height: auto; aspect-ratio: 4 / 3; } } /* SP・タブレットは縦長に切り抜かない */
/* MV の写真は FV と同じ登場（上から重なって出る。札は重ねない） */
@keyframes lmv-in { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .lmv__frame { animation: lmv-in .9s var(--ease-out) .25s both; }
}

/* パンくず */
.crumbs { grid-column: 1 / -1; min-width: 0; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.6; letter-spacing: var(--ls-ja); }
.crumbs__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs__item + .crumbs__item::before { /* 区切りは細い山形 */
  content: ""; flex-shrink: 0; width: 5px; height: 5px; margin-right: 2px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
  opacity: .6;
}
.crumbs__item a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--fw-bold); }
.crumbs__item a:hover { text-decoration: underline; text-underline-offset: 4px; }
.crumbs__item [aria-current] { display: inline-block; max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-sub); }

/* 文責・更新日 */
.byline { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--fs-small); line-height: 1.7; letter-spacing: var(--ls-ja); color: var(--color-gray); }

/* MV の背景の図形（M12。写真と文字には重ねない） */
.bgs--lmv .s1 { left: 48.6%; top: 132px; width: 3.4%; --c: var(--color-layer); --sp: -40; --i: 0; --fd: 6.2s; --fy: -10px; --fr: -6deg; }
.bgs--lmv .s2 { left: 52.2%; top: 184px; width: 1.3%; --c: var(--color-brand-mid); --blend: normal; --sp: -70; --i: 1; --fd: 4.6s; --fy: -7px; }
.lmv--compact .bgs--lmv .s1 { left: 86%; top: 40%; width: 4.2%; }
.lmv--compact .bgs--lmv .s2 { left: 90%; top: calc(40% + 64px); }
.lmv--wide .bgs--lmv .s1 { left: 88%; top: 132px; }
.lmv--wide .bgs--lmv .s2 { left: 92%; top: 184px; }
@media (max-width: 1023px) {
  .bgs--lmv .s1, .lmv--compact .bgs--lmv .s1, .lmv--wide .bgs--lmv .s1 { left: 88%; top: calc(var(--header-h) + 64px); width: 7%; }
  .bgs--lmv .s2, .lmv--compact .bgs--lmv .s2, .lmv--wide .bgs--lmv .s2 { left: 96%; top: calc(var(--header-h) + 112px); width: 2.2%; }
  }
@media (max-width: 767px) { .bgs--lmv { display: none; } } /* SP は文字が全幅なので図形を置かない */

/* =========================================================
   要約ボックス：白い面の上端を大きく丸めた最初の面（トップのステートメントと同じ形）。淡いオレンジの箱に、垂れ下がるラベル「要約」
   ========================================================= */
.lsum {
  position: relative; z-index: 1;
  margin-top: calc(var(--radius-xl) * -1); /* MV の下端に重ねて、角丸の外に MV の地（方眼）が見えるように */
  padding: 56px var(--side) 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-bg);
}
.lsum__box {
  position: relative;
  max-width: var(--container); margin: 0 auto;
  padding: 60px 22px 26px;
  border-radius: var(--radius-m); background: var(--color-tint);
}
.lsum__tab {
  position: absolute; top: 0; left: 22px;
  padding: 6px 18px 9px;
  border-radius: 0 0 var(--radius-chip) var(--radius-chip);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .14em;
}
.lsum__text { font-size: 16px; font-weight: var(--fw-bold); line-height: 2; letter-spacing: var(--ls-ja); }
.lsum__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 18px; }
.lsum__num { padding: 12px 0 8px; border-top: 1px solid var(--color-line); }
.lsum__num dt { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.lsum__num dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; margin-top: 2px; }
.lsum__num .num { font-size: 30px; font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.lsum__num .unit { font-size: 13px; }
/* 要約のすぐ下の本文は、上の余白を少し詰める */
.lsum + .lsec { padding-top: calc(var(--section-py) * .72); }
.lsum:has(+ .lsec--pale) { padding-bottom: 64px; } /* 最初の本文が淡い地のときは、白い面の下に余白を取る */

/* =========================================================
   本文のセクション（01〜）。地は白と淡いオレンジ白を交互に
   ========================================================= */
.lsec { position: relative; padding: var(--section-py) var(--side); background: var(--color-bg); }
.lsec--pale { background: var(--color-bg-page); }
.lsec--white { background: var(--color-bg); }
.lsec__inner { position: relative; max-width: var(--container); margin: 0 auto; }
/* 要約の無いページ（エントリー・完了・方針・404）は、最初の本文を白い面にして MV に角丸で重ねる */
.lsec--sheet { z-index: 1; margin-top: calc(var(--radius-xl) * -1); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
/* エントリー帯を省いたページは、最後の面の下にフッターの角丸が重なる分を足す */
main > .lsec:last-child { padding-bottom: calc(var(--section-py) + var(--radius-xl)); }
.lsec__inner--narrow { max-width: 880px; }
.lsec__inner > .sec-head { margin-bottom: 36px; }
.lsec__body > * + * { margin-top: 40px; }
.lactions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.lactions--center { justify-content: center; }
.lactions .btn-primary { margin-top: 0; }

/* 面（淡いオレンジの箱。淡い地の上では白） */
.lpanel { position: relative; padding: 26px 22px 24px; border-radius: var(--radius-m); background: var(--color-tint); }
.lsec--pale .lpanel { background: var(--color-bg); }
.lpanel__no { font-size: 20px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: .04em; color: var(--color-brand-soft); }
.lpanel__title { margin-top: 6px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.lpanel__text { margin-top: 10px; font-size: 15px; line-height: 1.9; letter-spacing: var(--ls-ja); }
.lpanel__proof { /* 根拠の数字（罫線の上に） */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-line);
}
.lpanel__proof-label { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.lpanel__proof .num { font-size: 32px; }
.lpanel .text-link { margin-top: 8px; }

/* カードを並べる格子 */
.lgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* 写真と文の2カラム（左右交互は .split--rev） */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.split__media .ph-frame { aspect-ratio: 4 / 3; }
.split__body > * + * { margin-top: 16px; }

/* 文章（代表メッセージ・方針など） */
.prose { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 2.05; letter-spacing: var(--ls-ja); }
.prose > * + * { margin-top: 1.2em; }
.prose h3 { margin-top: 2em; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose a:not([class]) { text-decoration: underline; text-underline-offset: 4px; }
.sign { margin-top: 28px; text-align: right; font-size: 14px; line-height: 1.8; letter-spacing: var(--ls-ja); }
.sign strong { display: block; font-size: 18px; letter-spacing: .14em; }

/* =========================================================
   罫線の表：項目名は左列（700）。SP は項目名を上に積む
   ========================================================= */
.dtable { margin: 0; border-top: 1px solid var(--color-line); }
.dtable__row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 14px 2px; border-bottom: 1px solid var(--color-line); }
.dtable__th { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.dtable__td { margin: 0; font-size: 15px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
.dtable__td .note { display: block; margin-top: 2px; }

/* =========================================================
   タブ（ピル型。全パネルを DOM に置き、aria-selected とハッシュで開ける。lower.js）
   JS が無いときは全パネルが縦に並ぶ（読める・検索できる）
   ========================================================= */
.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tabs__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-ink);
  font-size: 14px; font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: var(--ls-ja); cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.tabs__tab:hover { background: var(--color-layer); }
.tabs__tab[aria-selected="true"] { background: var(--color-brand); color: var(--color-on-brand); }
.lsec--pale .tabs__tab:not([aria-selected="true"]) { background: var(--color-bg); }
.lsec--pale .tabs__tab:not([aria-selected="true"]):hover { background: var(--color-layer); }
.tabs__panel { margin-top: 24px; }
.tabs__panel[hidden] { display: none; }
.tabs__panel:focus-visible { outline-offset: 6px; border-radius: var(--radius-xs); }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .tabs__panel.is-shown { animation: tab-in .45s var(--ease-out) both; }
}

/* ページ内の目次（ピルの並び） */
.toc { margin: 0; }
.toc__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.toc__list a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px 0 18px;
  border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink);
  font-size: 14px; font-weight: var(--fw-bold); letter-spacing: var(--ls-ja);
  transition: background-color var(--dur-ui) var(--ease-out);
}
.lsec:not(.lsec--pale) .toc__list a { background: var(--color-tint); }
.toc__list a:hover { background: var(--color-layer); }
.toc__list .arw { width: 26px; height: 26px; transform: rotate(90deg); }

/* =========================================================
   ステップ（選考の流れ・入社後の流れ）：番号のピル・名前・説明・所要日数。縦の線が伸び、各ステップが順に出る
   ========================================================= */
.lsteps { position: relative; margin: 0; padding: 0; list-style: none; }
.lsteps__item { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
.lsteps__item:last-child { padding-bottom: 0; }
.lsteps__item:not(:last-child)::before { /* 次のステップへの縦線 */
  content: ""; position: absolute; left: 41px; top: 34px; bottom: 4px; width: 2px; border-radius: 2px;
  background: var(--color-brand-soft);
  transform-origin: top center;
}
.lsteps__no {
  display: grid; place-items: center; height: 32px;
  border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-ink);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: .08em; white-space: nowrap;
}
.lsec--pale .lsteps__no { background: var(--color-bg); }
.lsteps__item:last-child .lsteps__no { background: var(--color-brand); color: var(--color-on-brand); }
.lsteps__name { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); padding-top: 2px; }
.lsteps__text { margin-top: 4px; font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja); }
.lsteps__days {
  display: inline-block; margin-top: 8px; padding: 2px 10px;
  border-radius: var(--radius-xs); background: var(--color-tint); color: var(--color-ink);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: var(--ls-ja);
}
.lsec--pale .lsteps__days { background: var(--color-bg); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .reveal:not(.is-act) .lsteps__item::before { transform: scaleY(0); }
  .page:not([data-anim="static"]) .lsteps__item::before { transition: transform .7s var(--ease-out) calc(.6s + var(--j, 0) * .08s); }
}

/* =========================================================
   時系列（歩み・1日の流れ・研修の3年間）：左に時刻（年）、縦の線（scaleY 0→1）、点、見出し・説明・写真
   ========================================================= */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: var(--tl-x, 76px); top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: var(--color-line);
  transform-origin: top center;
}
.timeline__item { position: relative; display: grid; grid-template-columns: var(--tl-x, 76px) minmax(0, 1fr); column-gap: 26px; padding-bottom: 28px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::after { /* 線の上の点 */
  content: ""; position: absolute; left: calc(var(--tl-x, 76px) - 5px); top: 9px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-brand); box-shadow: 0 0 0 4px var(--color-bg);
}
.lsec--pale .timeline__item::after { box-shadow: 0 0 0 4px var(--color-bg-page); }
.timeline__time { font-size: 18px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.timeline__title { font-size: 16px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.timeline__text { margin-top: 4px; font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja); }
.timeline__media { margin-top: 14px; max-width: 420px; }
.timeline__media .ph-frame { aspect-ratio: 3 / 2; border-radius: var(--radius-s); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .reveal:not(.is-act) .timeline::before { transform: scaleY(0); }
  .page:not([data-anim="static"]) .timeline::before { transition: transform 1.4s var(--ease-out) .35s; }
  .page:not([data-anim="static"]) .reveal:not(.is-act) .timeline__item::after { transform: scale(0); }
  .page:not([data-anim="static"]) .timeline__item::after { transition: transform .5s var(--ease-back) calc(.5s + var(--j, 0) * .14s); }
  .page:not([data-anim="static"]) .timeline .rv-body { --rv-db: calc(.55s + var(--j, 0) * .14s); }
}

/* =========================================================
   質問と答え（インタビュー・座談会）：Q はオレンジの吹き出し
   ========================================================= */
.qa { display: grid; row-gap: 48px; }
.qa__q { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 14px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.qa__mark {
  display: grid; place-items: center; width: 46px; aspect-ratio: 120 / 110; padding-bottom: 4px;
  background: var(--color-brand); color: var(--color-on-brand);
  -webkit-mask: var(--shape-bubble) center / 100% 100% no-repeat; mask: var(--shape-bubble) center / 100% 100% no-repeat;
  font-size: 14px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: .02em;
}
.qa__q-text { padding-top: 6px; }
.qa__a { margin-top: 16px; }
.qa__a > p { font-size: var(--fs-body); line-height: 2.05; letter-spacing: var(--ls-ja); }
.qa__a > p + p { margin-top: 1em; }
.qa__photo .ph-frame { aspect-ratio: 3 / 2; }
.qa__photo figcaption { margin-top: 10px; }

/* =========================================================
   数字（.stat）：ラベル → 数値（DOM のテキスト。M4 でカウントアップ）＋単位 → 補足（時点・対象。灰）→ 図（aria-hidden）
   ========================================================= */
.stat { display: grid; align-content: start; padding: 20px 20px 18px; border-radius: var(--radius-m); background: var(--color-tint); }
.lsec--pale .stat { background: var(--color-bg); }
.stat__label { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.stat__value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin-top: 6px; }
.stat__value .num { font-size: calc(var(--fs-num) * .85); }
.stat__note { margin-top: 8px; font-size: 12px; line-height: 1.8; letter-spacing: var(--ls-ja); color: var(--color-gray); }
.stat__fig { margin-top: 14px; }
.stat__fig svg { display: block; width: 100%; height: auto; }

/* =========================================================
   チップ（職種・社員へのリンク）
   ========================================================= */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 18px;
  border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-ink);
  font-size: 14px; font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: var(--ls-ja);
  transition: background-color var(--dur-ui) var(--ease-out);
}
.lsec--pale .chip { background: var(--color-bg); }
.chip:hover, .lsec--pale .chip:hover { background: var(--color-layer); }
.chip .arw { width: 28px; height: 28px; }

/* =========================================================
   ページ末尾の FAQ（トップの .faq__item を使う）
   ========================================================= */
.lfaq__inner { max-width: 880px; }
.lfaq .faq__list { margin-top: 0; }
.faq__a-body { min-width: 0; }
.faq__a-body > p:first-child { padding-top: 4px; font-size: 15px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
.faq__rel { margin-top: 6px; }
.faq__rel .text-link { font-size: 14px; min-height: 44px; }
.lsec--pale .faq__chev { background: var(--color-bg); } /* 淡い地の上では山形の丸を白に */
.lsec--pale .faq__q:hover .faq__chev { background: var(--color-layer); }

/* =========================================================
   次に読む（3枚）＋カテゴリ・インデックス
   ========================================================= */
.lnext .lsec__inner > .sec-head { margin-bottom: 32px; }
.next-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ncard__link {
  display: flex; flex-direction: column; height: 100%;
  padding: 8px 8px 22px; border-radius: var(--radius-tab); background: var(--color-bg);
}
.lsec:not(.lsec--pale) .ncard__link { background: var(--color-tint); }
.ncard__photo { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-kv); }
.ncard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: scale .6s var(--ease-out); }
.ncard__link:hover .ncard__photo img { scale: 1.05; }
.ncard__body { padding: 16px 12px 0; }
.ncard__cat { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.ncard__no { color: var(--color-brand-soft); }
.ncard__title { margin-top: 6px; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-heading); }
.ncard__text { margin-top: 4px; font-size: 13px; line-height: 1.8; letter-spacing: var(--ls-ja); }

.catidx { margin-top: 64px; }
.lnext .catidx:first-child { margin-top: 0; }
.catidx__title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 15px; font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.catidx__title::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.catidx__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.catidx__item {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px;
  min-height: 76px; padding: 12px 10px 12px 16px;
  border-radius: var(--radius-m); background: var(--color-bg); color: var(--color-ink);
  transition: background-color var(--dur-ui) var(--ease-out);
}
.lsec:not(.lsec--pale) .catidx__item { background: var(--color-tint); }
.catidx__item:hover { background: var(--color-layer); }
.catidx__no { grid-column: 1; font-size: 12px; font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: .06em; color: var(--color-brand-soft); }
.catidx__name { grid-column: 1; display: grid; gap: 2px; }
.catidx__en { font-size: 10px; font-weight: var(--fw-medium); line-height: 1.3; letter-spacing: .12em; color: var(--color-ink-sub); }
.catidx__ja { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: .06em; }
.catidx__item .arw { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; }
.catidx__here {
  position: absolute; top: 10px; right: 10px;
  padding: 1px 8px; border-radius: var(--radius-xs); background: var(--color-bg); color: var(--color-ink);
  font-size: 10px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .06em;
}
.catidx__item.is-current, .lsec:not(.lsec--pale) .catidx__item.is-current { background: var(--color-brand); color: var(--color-on-brand); }
.catidx__item.is-current .catidx__no, .catidx__item.is-current .catidx__en { color: var(--color-on-brand); } /* オレンジの面の上は白を透かさない（オレンジ版） */
.catidx__item.is-current .arw::before { border-color: rgba(255, 255, 255, .5); }
.catidx__item.is-current .arw { display: none; }
.catidx__item:hover .arw::before { transform: scale(1); }
.catidx__item:hover .arw svg { animation: arw-next .4s var(--ease-arrow); }

/* =========================================================
   タブレット（768px から）
   ========================================================= */
@media (min-width: 768px) {
  .lmv { padding-bottom: 72px; }
  .lmv__lead { font-size: 16px; }
  .crumbs__list { font-size: 13px; }
  .lsum { padding-top: 72px; }
  .lsum__box { padding: 64px 40px 32px; }
  .lsum__tab { left: 40px; padding: 8px 22px 11px; font-size: 14px; }
  .lsum__text { font-size: 17px; }
  .lsum__nums { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 24px; margin-top: 22px; }
  .lsum__num .num { font-size: 36px; }
  .lsec__inner > .sec-head { margin-bottom: 48px; }
  .lpanel { padding: 32px 30px 28px; }
  .lpanel__title { font-size: 19px; }
  .lgrid--2, .lgrid--3, .lgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .dtable__row { grid-template-columns: 12em minmax(0, 1fr); column-gap: 28px; padding: 18px 4px; }
  .dtable__th { font-size: 15px; color: var(--color-ink); }
  .dtable__td { font-size: 15px; }
  .tabs__tab { min-height: 52px; padding: 0 28px; font-size: 15px; }
  .tabs__panel { margin-top: 32px; }
  .lsteps__item { grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; padding-bottom: 28px; }
  .lsteps__item:not(:last-child)::before { left: 47px; }
  .lsteps__no { height: 36px; font-size: 13px; }
  .lsteps__name { font-size: 17px; }
  .lsteps__text { font-size: 15px; }
  .timeline { --tl-x: 96px; }
  .timeline__time { font-size: 20px; }
  .timeline__title { font-size: 17px; }
  .timeline__text { font-size: 15px; }
  .qa__q { font-size: 20px; column-gap: 18px; }
  .qa__mark { width: 54px; font-size: 15px; }
  .qa__q-text { padding-top: 8px; }
  .qa__a { padding-left: 72px; margin-top: 18px; }
  .stat { padding: 24px 24px 22px; }
  .next-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ncard__title { font-size: 17px; }
  .catidx__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* =========================================================
   PC：左右に分ける（1024px から）
   ========================================================= */
@media (min-width: 1024px) {
  .lmv { padding-top: calc(var(--header-h) - 6px); padding-bottom: 80px; }
  .lmv__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); column-gap: 64px; align-items: center; }
  .lmv--compact .lmv__inner { grid-template-columns: minmax(0, 1fr); }
  .lmv--compact .lmv__text { max-width: 980px; }
  .lmv--wide .lmv__inner { grid-template-columns: minmax(0, 1fr); }
  .lmv--wide .lmv__text { max-width: 1100px; }
  .lmv__text { padding: 8px 0; }
  .crumbs { margin-bottom: 4px; }
  .lsum__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; align-items: center; padding: 72px 56px 44px; }
  .lsum__box:not(:has(.lsum__nums)) { grid-template-columns: minmax(0, 1fr); }
  .lsum__tab { left: 56px; }
  .lsum__nums { grid-template-columns: repeat(2, minmax(150px, auto)); margin-top: 0; align-self: center; }
  .lsum__box:has(.lsum__num:nth-child(3)) { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .lsum__box:has(.lsum__num:nth-child(3)) .lsum__nums { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; }
  .split--rev .split__media { order: 2; }
  .lgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .lgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .lfaq .sec-head { margin-bottom: 40px; }
  .catidx__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .catidx__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 132px; padding: 16px 16px 14px; align-content: start; }
  .catidx__item .arw { grid-column: 1; grid-row: 3; margin-top: 10px; }
}

/* =========================================================
   PC（1200px から：文字サイズ・余白が最大）
   ========================================================= */
@media (min-width: 1200px) {
  .lmv__lead { font-size: 17px; }
  .lsum__text { font-size: 18px; }
  .lsum__num .num { font-size: 40px; }
  .lsec__inner > .sec-head { margin-bottom: 56px; }
  .lpanel { padding: 36px 34px 32px; }
  .lpanel__title { font-size: 20px; }
  .dtable__td { font-size: 16px; }
  .prose { font-size: 16px; }
  .ncard__title { font-size: 18px; }
  .catidx__ja { font-size: 16px; }
}

/* 停止：static と「動きを減らす」は最終状態を即表示 */
.page[data-anim="static"] .lmv__frame { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ncard__photo img, .chip, .tabs__tab, .catidx__item { transition: none; }
}

/* =========================================================
   社員カード（.pcard）：トップの社員カードと同じ形（白・角丸32px・写真 4:5・垂れ下がるタブ）。格子に並べる
   職種カード（.job-card）は top.css のものをそのまま使う（.lgrid の中に置く）
   ========================================================= */
.pcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.pcard { --card-r: var(--radius-tab); }
.pcard__link { position: relative; display: flex; flex-direction: column; height: 100%; padding: 8px 8px 24px; border-radius: var(--radius-tab); background: var(--color-bg); }
.lsec:not(.lsec--pale) .pcard__link { background: var(--color-tint); }
.pcard__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-kv); }
.pcard--wide .pcard__photo { aspect-ratio: 3 / 2; }
.pcard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 25%); transition: scale .6s var(--ease-out); }
.pcard__link:hover .pcard__photo img { scale: 1.05; }
.pcard__tab {
  position: absolute; z-index: 2; top: 0; left: 28px;
  padding: 9px 14px 8px; border-radius: 0 0 var(--radius-chip) var(--radius-chip);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: var(--ls-heading);
}
.pcard__body { padding: 18px 12px 0; }
.pcard__meta { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.pcard__title { margin-top: 8px; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: var(--ls-heading); }
.pcard__name { margin-top: 10px; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .14em; }
.lgrid .job-card { list-style: none; }
.jobcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .jobcards { gap: 40px 24px; }
}
@media (min-width: 1024px) {
  .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; }
  .jobcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .pcard__title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pcard__photo img { transition: none; } }