/* ============================================================================
   site.css — 株式会社アルカド コーポレートサイト
   トークンは 06 第4章2節を正とする（04 第4章・第5章の値を 06 が :root 用に整理したもの）。
   カンプのインライン style を直接コピーしないこと（CLAUDE.md 正誤の優先順位 3）。
   検収 7.1.1 が :root を 06 第4章2節と機械照合するため、値を勝手に変えない。
   ============================================================================ */

/* ── 書体の宣言 ───────────────────────────────────────────────
   欧文は Inter、和文は Zen Kaku Gothic New。いずれもセルフホストのサブセット woff2
   （CLAUDE.md E2 / 06 第11章2節）。Google Fonts の CDN は使わない（検収 7.2.3）。
   ウェイトは 400 と 500 のみ配信する（検収 7.2.4）。
   woff2 は tools/subset-fonts.mjs が生成する（Google Fonts CSS2 API の text= で取得し、
   src/assets/fonts/ に保存してコミットする。実行時に Google へは接続しない）。
   和文は unicode-range で3分割してある。理由と範囲は下の @font-face のコメント参照。
   ------------------------------------------------------------------------- */
/* 欧文: Inter（U+0020–1FFF） */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.77a22cd8.woff2') format('woff2');
  unicode-range: U+0020-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500.4f479a5c.woff2') format('woff2');
  unicode-range: U+0020-1FFF;
}

/* 和文: Zen Kaku Gothic New。**3つに分けている。**
   Google Fonts の text= は URL 約7.3KB を超えるとエラーにならず無言で文字を切り詰める。
   1ファイルにまとめると約800字が限界で、残りのページを実装すると確実に超えるため、
   unicode-range で分割して1リクエストを小さく保っている（tools/subset-fonts.mjs 参照）。
   ブラウザは実際に使う範囲のファイルだけを落とす。
   範囲はここが正で、subset-fonts.mjs の CHUNKS と一致させること。
     a … 約物・矢印・仮名・CJK部首   U+2000–33FF
     b … 漢字（前半）               U+3400–5FFF
     c … 漢字（後半）・全角英数      U+6000–10FFFF  */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/zen-kaku-gothic-new-400-a.bde0172a.woff2') format('woff2');
  unicode-range: U+2000-33FF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/zen-kaku-gothic-new-400-b.251167f9.woff2') format('woff2');
  unicode-range: U+3400-5FFF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/zen-kaku-gothic-new-400-c.306b45b1.woff2') format('woff2');
  unicode-range: U+6000-10FFFF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/zen-kaku-gothic-new-500-a.7971ef84.woff2') format('woff2');
  unicode-range: U+2000-33FF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/zen-kaku-gothic-new-500-b.5507f60d.woff2') format('woff2');
  unicode-range: U+3400-5FFF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/zen-kaku-gothic-new-500-c.04961427.woff2') format('woff2');
  unicode-range: U+6000-10FFFF;
}

:root {
  /* ── 書体 ─────────────────────────────
     トークンごとに切り替えず、ここで1つ定義して全体に継承させる。
     カンプは実績数値のラベルと単位に欧文のみのスタックを当てていたが、
     そこに載るのは日本語であり誤りである（CLAUDE.md E3）。 */
  --font: 'Inter', 'Zen Kaku Gothic New', sans-serif;

  /* ── 面 ─────────────────────────────── */
  --paper: #fbfbfb;
  --paper-alt: #f2f2f0;
  --card: #fbfbfb;
  --card-hover: #ffffff;
  --ink-face: #0d0d0d;

  /* ── 文字（4段階に丸めた。04第4章2節） ── */
  --ink: #0d0d0d;                 /* 18.8:1  見出し・H1・実績数値 */
  --ink-2: rgba(0,0,0,.78);       /* 11.5:1  本文 */
  --ink-3: rgba(0,0,0,.62);       /*  6.2:1  補足・キャプション・ラベル・日付 */
  --ink-4: rgba(0,0,0,.50);       /*  3.9:1  24px以上のみ。現状用途なし */
  --ink-label: var(--ink-3);

  /* ── 反転面 ──────────────────────────── */
  --face-heading: #fbfbfb;              /* 18.8:1 */
  --face-body: rgba(255,255,255,.68);   /*  9.2:1 */
  --face-label: rgba(255,255,255,.50);  /*  5.3:1 */
  --face-border: rgba(255,255,255,.45); /*  4.5:1 */

  /* ── 罫線 ───────────────────────────── */
  --line: rgba(0,0,0,.12);        /* テーブル行・ニュース行 */
  --line-strong: rgba(0,0,0,.14); /* 実績数値の上罫線・hover強調 */
  --line-soft: rgba(0,0,0,.10);   /* セクション区切り・縦罫線・フッター上部 */
  --underline: rgba(0,0,0,.30);   /* テキストリンクの下線（.25は.30に統一） */

  /* ── タイプスケール（px はコメント） ──── */
  --text-h1: 1.9375rem;           /* 31px / 1.85 / .01em / 500 / 和文 */
  --text-h1-sp: 1.3125rem;        /* 21px / 1.9  / .01em / 500 / 和文
                                     ※SPのH1。追加 2026-08-06。SPカンプの実測値 */
  --text-h2: 1.875rem;            /* 30px / 1.2  / +.01em / 500 / 欧文 ★2026-08-07 改訂 */
  --text-h2-face: 2rem;           /* 32px / 1.7  / 500 / 和文 トップの反転面RECRUIT */
  --text-h2-cta: 1.625rem;        /* 26px / 1.7  / 500 / 和文
                                     ※下層ページ下部の2枠CTAの見出し。追加 2026-08-06 */
  --text-h3-lg: 2.125rem;         /* 34px / 1.3  / -.015em */
  --text-h3: 1.5rem;              /* 24px / 1.35 / -.01em */
  --text-h3-sm: 1.25rem;          /* 20px / 1.35 / -.01em */
  --text-stat: 3.25rem;           /* 52px / 1    / -.03em */
  --text-stat-unit: 1.0625rem;    /* 17px */
  --text-body: 0.96875rem;        /* 15.5px / 2.05 / 400 ★2026-08-07 改訂 */
  --text-body-sm: 0.84375rem;     /* 13.5px / 2.1 */
  --text-body-face: 0.84375rem;   /* 13.5px / 2.2 */
  --text-lead: 0.8125rem;         /* 13px / 2 */
  --text-caption: 0.78125rem;     /* 12.5px / 2.2 */
  --text-news-title: 0.96875rem;  /* 15.5px / 1.7 / 400 */
  --text-cta: 0.84375rem;         /* 13.5px / 1 / .06em / 500 */
  --text-cta-sm: 0.78125rem;      /* 12.5px / 1 / .08em / 500 */
  --text-nav: 0.71875rem;         /* 11.5px / 1 */
  --text-date: 0.71875rem;        /* 11.5px / 1 / .08em / 400 */
  /* セクションラベル（01 / BUSINESS）。カンプは Top / About / Business / Recruit の
     4カンプとも 11.5px。04 第4章の「11〜11.5pxへの引き上げを検討中」をこの値で確定した */
  --text-label-sec: 0.71875rem;   /* 11.5px / 1 / .20em / 500 */
  --text-label: 0.6875rem;        /* 11px / 1 / .20em / 500
                                     ※カンプは10.5px。04第10章2節の修正5で引き上げ */
  --text-note: 0.6875rem;         /* 11px / 1.6 */
  --text-table: 1.0625rem;        /* 17px  電子公告の貸借対照表。04第6章3節 */

  /* ── 字間 ───────────────────────────── */
  --ls-label: .20em;              /* 01 / ABOUT */
  --ls-label-card: .18em;         /* 01 / FLAGSHIP */
  --ls-label-stat: .16em;         /* 実績数値のラベル */
  --ls-nav: .14em;                /* グローバルナビ */
  --ls-nav-footer: .10em;         /* フッターナビ */
  --ls-brand: .22em;              /* ヘッダーの社名 */

  /* ── レイアウト ──────────────────────── */
  --w-design: 1440px;
  --w-content: 1328px;
  --content-w: 1328px;   /* 04 第9章: 設計幅1440px − 左右パディング112px */
  --pad-x: 56px;
  --pad-y: 6.875rem;              /* 110px  ABOUT・GROUP */
  --pad-y-sm: 6rem;               /* 96px   PRODUCTS・NEWS */
  --pad-y-face: 5.25rem;          /* 84px   反転面 */
  --col-label: 260px;
  --gap-col: 80px;
  --radius: 0;
  --radius-pill: 999px;
}

@media (max-width: 767px) {
  :root {
    --pad-x: 20px;
    --pad-y: 4.5rem;              /* 72px */
    --pad-y-sm: 4rem;             /* 64px */
    --pad-y-face: 4rem;
    --gap-col: 32px;
  }
}

/* ── 全体への適用（06 第4章3節） ─────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink-2);
  font-size: var(--text-body);
  /* ★2026-08-07 オーナー判断で 2.3 → 2.05（カンプ実測値）。04 第4章を改訂した。
     2.3 は1行あたり約12%広く、カンプより縦に間延びして見えていた */
  line-height: 2.05;
  -webkit-font-smoothing: antialiased;
  /* 内容が短いページ（送信完了・404）でフッターが画面の途中に浮かないようにする。
     .skip-link は position:absolute なのでフレックス項目にならない。
     長いページでは main が伸びるだけなので、他ページの見た目は変わらない */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1; }

/* 等幅数字。実績数値・会社概要・貸借対照表の桁揃え */
.tnum, table, .stat { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* 角丸を使わない（--radius: 0）。ボタンのみ pill（検収 7.1.3） */
* { border-radius: var(--radius); }
.pill { border-radius: var(--radius-pill); }

/* 影を定義しない。彩度を持つ色を追加しない（06 第4章3節・検収 7.1.4 / 7.1.5） */

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ── リンクの下線 ─────────────────────────────────────────────
   本文中のテキストリンクは下線を持つ（hover のみで状態を伝えない。検収 8.3.7） */
/* 矢印付きの導線（「事業紹介を見る →」等）。
   ★ **カンプ間で値が揃っていない。** 実測: .04em/6px が7件、字間なし/6px が13件、
     .1em/6px が5件、.14em/6px が3件、.08em/7px+gap10 が3件（Arkad Recruit のみ）。
     04 にこの部品のトークンが無かったため、多数派の **.04em / padding-bottom 6px** に
     統一し、04 第4章に `--text-link` として確定させた（2026-08-08）。
   ★ 矢印は `<span aria-hidden="true">` に分けてあるが、display は inline のままにする。
     flex にすると本文と矢印の間の空白が消え、幅がカンプとずれる（Arkad Recruit を除く） */
.link {
  border-bottom: 1px solid var(--underline);
  padding-bottom: 6px;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--ink);
}

/* ── フォーカスリング（06 第16章・検収 8.2.3 / 8.1.9） ──────────
   --ink（#0d0d0d）は --paper 上で 18.8:1、反転面上では白リングに切り替える */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.face :focus-visible,
.face:focus-visible {
  outline-color: var(--face-heading);
}

/* ── 視覚的に非表示（検収 3.4.5） ─────────────────────────────
   display:none は読み上げ対象から外れるため使わない */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 本文へスキップ（06 第16章・検収 8.2.4 / 8.2.5） ─────────── */
.skip-link {
  position: absolute;
  left: var(--pad-x);
  top: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 20px;
  font-size: var(--text-caption);
  line-height: 1;
}
.skip-link:focus { transform: translateY(0); }

/* ── レイアウトの基本 ─────────────────────────────────────────
   カンプは 1440px 固定。コンテンツ幅 1328px ＝ 1440 - 56*2（検収 7.3.1） */
.wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }

.section {
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
  border-top: 1px solid var(--line-soft);
}

/* 共通2カラム（260px / 1fr、gap 80px。検収 7.3.2） */
.cols {
  display: grid;
  /* ★ 1fr のままだと min-width:auto が効き、中身の最小幅にトラックが押し広げられて
     セクションごと画面からはみ出す（実測: /business/ @800px で scrollWidth 874px）。
     minmax(0, 1fr) で縮められるようにする */
  grid-template-columns: var(--col-label) minmax(0, 1fr);
  gap: var(--gap-col);
  align-items: start;
}
/* ★ 04 第11章3節の 1024px ブレークポイント。ラベル列260px＋gap80px で340pxを使うため、
   1024px を切ると内容側が本文として成立しない。ここで縦積みに落とす。
   当初 767px の1点しか実装しておらず、768〜1023px が破綻していた */
@media (max-width: 1023px) {
  .cols { grid-template-columns: 1fr; gap: 34px; }
}

/* セクションラベル（01 / ABOUT）。見出し要素にしない（検収 3.4.6）
   カンプは見出しとの間隔を margin-bottom:12px で取っている */
.label {
  display: block;
  margin-bottom: 12px;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: var(--ink-label);
}

.h2 {
  /* ヒーローでは <span> に付く。インラインのままだと行ボックスの余白で
     ラベル列が 3px 高くなる（カンプは block） */
  display: block;
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.2;
  /* 04 第4章 --text-h2 は**欧文**の見出し（Recruit / Work / About 等）で -.01em。
     カンプの `Recruit` も -.01em である。
     ★2026-08-07: 一度これを +.01em に変えたが誤りだった。+.01em は**和文**の
       セクション見出し（「何をしている会社か」等）の値で、下の .h2--ja が持つ */
  letter-spacing: -.01em;
  color: var(--ink);
}
/* 和文のセクション見出し（30px）。カンプ実測 .01em。04 第4章のトークン表は
   欧文の想定しか持っていなかったため、2026-08-07 に行を追加した */
.h2--ja { letter-spacing: .01em; }

/* ── ヘッダー（partials/header.html） ─────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--pad-x);
  position: relative;
  z-index: 3;
  background: var(--paper);
}
/* 下層ページは罫線付き・やや詰める（カンプ Arkad About.dc.html） */
.site-header:not([data-variant="home"]) {
  padding-top: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}

.site-header__brand {
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-brand);
  color: var(--ink-3);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 1;
  /* ★ ラベルを和文にしたため字間を落とす（2026-08-08）。
     欧文の .14em のままだと「私たちについて」が間延びして幅も破綻する。
     和文のナビは 12.5px / .04em とし、フッターのリンク（12.5px）と揃える */
  letter-spacing: .04em;
}
/* 5項目は .site-nav と同じ 34px 間隔で並べる（カンプは6項目を1つのflexに置いている。
   SP でハンバーガーに折り畳むため実装ではラッパーを1枚挟んでおり、
   ここで display:flex を与えないと項目間が空白文字分（4px）になる） */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
}
.site-nav a { color: var(--ink); }
/* 現在地の下線。CTA（ピル）には掛けない。/recruit/ とその配下では
   「採用情報」が現在地になるため、除外しないとピルの下だけ余白が 4px に潰れる */
.site-nav a[aria-current="page"]:not(.site-nav__cta) {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

/* ヘッダーCTA。タップターゲット44px以上（検収 8.3.4）。
   カンプは padding 17px 26px ＝ 高さ 37.5px のため、min-height で底上げする */
.site-nav .site-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* カンプは padding:17px 26px（高さ45.5px）。min-height は 8.3.4 の下限として残す */
  min-height: 44px;
  padding: 17px 26px;
  /* 塗りのピルに枠線は無い（カンプ実測 46px）。1px 入れると 48px になる */
  border: 0;
  background: var(--ink);
  color: var(--paper);
}
/* トップページのヘッダーCTAは枠線のみ（カンプ Arkad Top Page.dc.html。高さ 48px） */
.site-header[data-variant="home"] .site-nav .site-nav__cta {
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.site-nav__toggle { display: none; }

@media (max-width: 767px) {
  .site-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    padding: 0;
  }
  .site-nav__toggle span { display: block; width: 22px; height: 1px; background: var(--ink); }
  /* SP でも RECRUIT を常時表示する（検収 4.9）。カンプ SP 375 は
     ハンバーガーのみで CTA が消えていたため、実装側で残す */
  .site-nav__list {
    display: none;
  }
  .site-nav[data-open="true"] .site-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
    padding: 8px var(--pad-x) 20px;
  }
  .site-nav[data-open="true"] .site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── ヒーロー（B-01。04 第6章1節・カンプ Arkad Top Page.dc.html） ──
   高さ726px。全幅ワードマーク（コンテンツ幅1328px）＋左に社名の由来・右にH1とCTA。
   背景の WebGL ドットフィールドは段階3（04 第9章2節）。それまで .hero__bg は無地。 */
.hero {
  position: relative;
  height: 726px;
  overflow: hidden;
}
/* ドットフィールドの土台。**CSS のドットパターンを既定として当てている**ので、
   WebGL が使えない環境でも JS ゼロで淡いドットフィールドが出る（検収 8.4.5）。
   WebGL が使える場合は hero.js が中に canvas を挿し、その上に描く。
   可読性は WebGL の有無に依存させない（検収 8.4.4。テキストは .hero__inner の z-index 2）。
   下端のフェードは 04 第9章2節の「静音域」に対応する（cuv.y < -0.06 で点が消える）。 */
.hero__bg {
  position: absolute;
  inset: 0;
  background: #ffffff;   /* 04 第9章2節「白地 #ffffff に対し点は 0.52 グレー」 */
}
/* パターンは擬似要素に置く。.hero__bg 自体に mask を当てると中の canvas まで
   下端が透過して、背後の --paper（#fbfbfb）が帯状に見えてしまう */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0,0,0,.13) 0.9px, rgba(0,0,0,0) 1.1px) 0 0 / 10px 10px;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, #000 34%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, #000 34%);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* ワードマークとコピーの可読性を確保する覆い。canvas が入って初めて効く */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,251,251,.45) 0%, rgba(251,251,251,0) 34%, rgba(251,251,251,.30) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 64px var(--pad-x) 0;
}
.hero__wordmark {
  width: var(--w-content);
  max-width: 100%;
  height: auto;
}
.hero__cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 70px;
  margin-top: 64px;
}
.hero__origin {
  max-width: 330px;
  font-size: var(--text-caption);
  line-height: 2.2;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero__h1 {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
}
.hero__h1 span { display: block; }
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
  /* カンプは padding 17px 32px（高さ47.5px）。44px 以上を満たすので下限だけ添える（8.3.4） */
  min-height: 44px;
  padding: 17px 32px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-cta);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
}

@media (max-width: 767px) {
  /* 06 第9章2節: 高さ 726px → 480〜520px。ワードマークは幅いっぱいを維持。
     並び順は SP カンプ（design/Arkad SP 375.dc.html）に合わせ、由来文を CTA の下に置く。
     マークアップは二重化せず order で入れ替える（7.3.7）。 */
  .hero { height: auto; min-height: 480px; }
  /* SPカンプの実測値 21px / 1.9（--text-h1-sp。06 第4章2節に追加済み）。
     31px のままだとヒーロー高さが538pxになり 06 第9章2節の480〜520pxを超える */
  .hero__h1 { font-size: var(--text-h1-sp); line-height: 1.9; }
  .hero__inner { padding: 34px var(--pad-x) 46px; }
  .hero__wordmark { width: 100%; }
  .hero__cols {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    margin-top: 38px;
  }
  .hero__origin { order: 2; max-width: none; }
  .hero__lead { order: 1; }
  .hero__cta { display: flex; margin-top: 28px; }
}

/* ── 01/ABOUT・02/GROUP（B-06/B-07・B-04。カンプの2カラム骨格） ──────
   左260px にラベルと欧文見出し、右に本文＋補助カラム330px。全セクション共通の骨格。 */
.block__body {
  display: flex;
  align-items: flex-start;
  gap: 70px;
}
.block__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
/* .block__main は gap 34px で子を離す。その直下に来た小見出しの margin-bottom 28px は
   gap と二重になり 62px になる（職種ページ 02/WORK・/about/ 01/VISION・/business/ 01/APPROACH
   で同じ間違いを繰り返した）。骨格側で一度だけ打ち消す。
   .block__main の外で使う .approach__h3 は 28px のまま */
.block__main > .approach__h3 { margin-bottom: 0; }
.block__side { width: 330px; flex: none; }
/* 本文の1行長は全角40字以内を目安とする（04 第4章）。15.5px の全角40字 ≒ 620px で、
   カンプの実測値も 640px。上限を置かないと、コンテンツ列（988px）いっぱいに伸びて
   1行65字前後になり、カンプと明確に見た目が変わる */
.block__p { max-width: 640px; color: var(--ink-2); text-wrap: pretty; }
.block__links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
@media (max-width: 767px) {
  .block__body { flex-direction: column; gap: var(--gap-col); }
  .block__side { width: 100%; }
}

/* 会社概要の要約（設立・資本金・所在地・株主）。項目名も --ink-3 以上（8.1.6） */
.facts { font-size: var(--text-caption); line-height: 1.6; }
.facts__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.facts__row:last-child { border-bottom: 1px solid var(--line); }
.facts__key { color: var(--ink-3); }
.facts__val { color: var(--ink); text-align: right; }
@media (max-width: 767px) {
  /* 06 第9章2節: 項目名と値を縦積みにする。横スクロールさせない */
  .facts__row { flex-direction: column; gap: 3px; }
  .facts__val { text-align: left; }
}

/* グループ構造図（02/GROUP）。図だけに閉じ込めず本文でも同じ内容を説明する（8.4.2） */

/* ── 実績数値（B-03。04 第7章） ────────────────────────────────
   4指標を罫線区切りで。ラベル番号は付けない（04 第6章1節）。
   基準日は数値ごとに出力する。一括注記にまとめてはならない（04 第7章2節・検収 5.1.6）。
   視覚的に非表示の h2「事業の実績」を置く（検収 3.4.5）。 */
.stats {
  padding: 0 var(--pad-x) var(--pad-y-sm);
}
.stats__grid {
  display: grid;
  /* ★ 3指標。2026-08-08 に「流通額の月間成長率」を非表示にした（オーナー判断）。
     04 第7章はこの縮小を想定しており、3カラムでもレイアウトは成立する。
     再掲するときは4に戻し、各ページにセルを追加する */
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
}
.stats__cell {
  padding: 38px 30px 34px;
  border-right: 1px solid var(--line-soft);
}
.stats__cell:first-child { padding-left: 0; }
.stats__cell:last-child { padding-right: 0; border-right: 0; }
.stats__label {
  display: block;
  margin-bottom: 18px;
  /* トップページのカンプは 11.5px。/recruit/ のカンプは 11px で、ページごとに違う
     （/recruit/ 側は .page-recruit で上書きしている）。
     いずれも E4（ラベルは 10.5px → 11px 以上）を満たす */
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.stats__value {
  font-size: var(--text-stat);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
}
.stats__unit {
  margin-left: 8px;
  font-size: var(--text-stat-unit);
  letter-spacing: 0;
}
/* 基準日。--text-note（11px/1.6）はカンプの 12px/1.7 ではなく 04 第5章2節に従う */
.stats__as-of {
  /* 基準日はトップ・/recruit/ の両カンプとも 12px/1.7。
     04 の --text-note（11px/1.6）より大きい */
  margin-top: 16px;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-3);
}
@media (max-width: 767px) {
  /* 06 第9章2節: 2×2グリッド。縦罫線を横罫線に。
     SPカンプ（design/Arkad SP 375.dc.html）は数値を34px・単位を13pxに落としている。
     いずれも既存トークン（--text-h3-lg / --text-lead）で足りる。
     minmax(0,1fr) にしているのは、52px の nowrap な数値が 1fr のトラックを押し広げて
     2列の幅が不均等になるため（実測 170px / 213px）。
     ★ 基準日は SP でも出す。SPカンプは省略しているが、実績数値には必ず基準日を併記する
       （検収 5.1.5）。SPで情報を省略してはならない（06 第9章2節） */
  .stats__label { margin-bottom: 12px; line-height: 1.4; }
  .stats__value { font-size: var(--text-h3-lg); }
  .stats__unit { margin-left: 6px; font-size: var(--text-lead); }
}

/* ── 03 / BUSINESS（B-02。--paper-alt の面） ───────────────────
   非対称グリッド 1.35fr / 1fr、gap 28px。Fincs を最大に（04 第6章1節） */
.business {
  padding: var(--pad-y-sm) var(--pad-x) 106px;
  background: var(--paper-alt);
}
.business__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 50px;
}
.business__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  max-width: 420px;
}
.business__lead p {
  font-size: var(--text-lead);
  line-height: 2;
  color: var(--ink-3);
  text-align: right;
}
.business__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: start;
}
.business__col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.card {
  display: block;
  background: var(--card);
  padding: 36px 36px 40px;
}
.card--md { padding: 32px 32px 36px; }
.card--sm {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 26px 32px;
}
.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.card--md .card__top { margin-bottom: 22px; }
.card__label {
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-card);
  color: var(--ink-3);
}
.card--sm .card__label { display: block; margin-bottom: 12px; }
/* 「詳細 →」。hover のみで状態を伝えないためテキストで示す（検収 8.3.7） */
.card__more {
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-nav-footer);
  color: var(--ink);
  white-space: nowrap;
}
.card__figure {
  height: 290px;
  margin-bottom: 28px;
  background: var(--paper-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card--md .card__figure { height: 150px; margin-bottom: 22px; }
.card__figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.card__title {
  margin-bottom: 14px;
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
}
.card--md .card__title { margin-bottom: 10px; }
.card--sm .card__title { margin-bottom: 6px; font-size: var(--text-h3-sm); }
.card__title img { height: 30px; width: auto; }
/* カード本文。カンプは .68 / .65 だが 04 第4章2節の4段階に丸めて --ink-3（.62）にする */
.card__body {
  max-width: 460px;
  font-size: var(--text-body-sm);
  line-height: 2.1;
  color: var(--ink-3);
}
.card--md .card__body { font-size: var(--text-caption); line-height: 2; max-width: none; }
.card--sm .card__body { font-size: var(--text-caption); line-height: 1.9; max-width: none; }
@media (max-width: 767px) {
  /* 06 第9章2節: 1カラム。Fincs のスクリーンショットは大きく保つ */
  .business__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .business__lead { align-items: flex-start; max-width: none; }
  .business__lead p { text-align: left; }
  .business__grid { grid-template-columns: 1fr; }
  .card { padding: 28px 20px 32px; }
  .card--sm { grid-template-columns: 1fr; gap: 12px; }
}

/* ── 04 / RECRUIT（B-05）。**このページで唯一の反転面**（CLAUDE.md 絶対ルール）──
   左に写真、右に黒面のメッセージとCTA。採用が最上位目的のため NEWS より上に置く
   （04 第6章1節でカンプから移動） */
.recruit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 400px;
}
.recruit__photo {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
}
.recruit__panel {
  background: var(--ink-face);
  padding: var(--pad-y-face) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recruit__label { color: var(--face-label); margin-bottom: 20px; }
.recruit__h2 {
  margin-bottom: 24px;
  font-size: var(--text-h2-face);
  font-weight: 500;
  line-height: 1.7;
  color: var(--face-heading);
}
.recruit__h2 span { display: block; }
.recruit__p {
  margin-bottom: 20px;
  max-width: 420px;
  font-size: var(--text-body-face);
  line-height: 2.2;
  color: var(--face-body);
}
.recruit__p:last-of-type { margin-bottom: 36px; }
.recruit__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 16px 30px;
  border: 1px solid var(--face-border);
  color: var(--face-heading);
  font-size: var(--text-cta-sm);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
}
@media (max-width: 767px) {
  /* 06 第9章2節: 写真の上に黒面を縦積み */
  .recruit { grid-template-columns: 1fr; min-height: 0; }
  .recruit__photo { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ── 05 / NEWS（B-08） ─────────────────────────────────────────
   日付112px＋見出しの1行リスト×4。**同じデータを2箇所に書かない**（検収 7.3.7） */
.news { padding: var(--pad-y-sm) var(--pad-x); }
/* 「VIEW ALL」は欧文の小ラベル。カンプは 11.5px / .14em で、
   矢印付きの導線（--text-link 12.5px / .04em）とは別の体裁である */
.news__all {
  display: inline-block;
  margin-top: 28px;
  font-size: var(--text-nav);
  letter-spacing: var(--ls-nav);
}
.news__row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 36px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.news__row:last-child { border-bottom: 1px solid var(--line); }
.news__date {
  font-size: var(--text-date);
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-feature-settings: "tnum";
}
.news__title {
  font-size: var(--text-news-title);
  line-height: 1.7;
  color: var(--ink);
}
@media (max-width: 767px) {
  /* 06 第9章2節: 日付を見出しの上に */
  .news__row { grid-template-columns: 1fr; gap: 10px; }
}

/* ── パンくず（partials/breadcrumb.html） ─────────────────────── */
.breadcrumb {
  padding: 18px var(--pad-x);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-nav);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.breadcrumb li { display: flex; gap: 12px; align-items: center; }
.breadcrumb li + li::before { content: "／"; color: var(--ink-3); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ── CTA（partials/cta.html） ─────────────────────────────────── */
.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-soft);
}
.cta__panel {
  padding: var(--pad-y-face) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta__panel + .cta__panel { border-left: 1px solid var(--line-soft); }
.cta__label { margin-bottom: 20px; }
/* 下層ページのCTA見出しは26px（カンプ Arkad About.dc.html）。
   トップの反転面RECRUIT（32px = --text-h2-face）とは別サイズ */
.cta__heading {
  margin-bottom: 20px;
  font-size: var(--text-h2-cta);
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
}
.cta__body {
  margin-bottom: 36px;
  max-width: 420px;
  font-size: var(--text-body-face);
  line-height: 2.2;
  color: var(--ink-2);
}
.cta__button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* カンプは上下 16px の余白で高さ 47px（トップの反転面・/about/・/business/ すべて同値）。
     min-height はタップ領域 44px の下限として残す（この余白なら効かない） */
  min-height: 44px;
  padding: 16px 30px;
  border: 1px solid var(--underline);
  font-size: var(--text-cta-sm);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--ink);
}
@media (max-width: 767px) {
  .cta { grid-template-columns: 1fr; }
  .cta__panel + .cta__panel { border-left: 0; border-top: 1px solid var(--line-soft); }
}

/* ── 反転面のCTA（partials/cta-face.html） ────────────────────────
   1ページに最大1箇所（CLAUDE.md 絶対ルール）。/electronic-notice/ では使わない */
.face {
  background: var(--ink-face);
  color: var(--face-body);
}
.face .cta__label { color: var(--face-label); }
.face .cta__heading { color: var(--face-heading); }
.face .cta__body { color: var(--face-body); }
.face .cta__button { border-color: var(--face-border); color: var(--face-heading); }
/* パネル1枚で使う場合（cta-face.html 単体）は1カラム */
.cta.face { grid-template-columns: 1fr; }

/* ── フッター（partials/footer.html） ─────────────────────────── */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--paper); }

.site-footer__top {
  padding: 66px var(--pad-x) 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}
.site-footer__nav {
  display: grid;
  /* カンプは各列に最小150pxを与えている。ただし 4列×150 + gap56×3 = 768px あり、
     ロゴ（約140px）＋間隔60px＋左右パディング112px を足すと約1080px 必要になる。
     実測の必要幅は 1107px（ロゴ枠142 ＋ 間隔60 ＋ ナビ793 ＋ 左右112）。
     それを下回る幅では 2列に畳む。畳まないと横スクロールが出る（実測 1150px で 1164px）。
     境界は他のブロック（資本関係図・ENTRY・職種カード）と同じ 1200px に揃えている */
  grid-template-columns: repeat(4, minmax(150px, auto));
  gap: 56px;
}
@media (max-width: 1200px) {
  .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}
.site-footer__group { display: flex; flex-direction: column; gap: 14px; }
.site-footer__heading {
  /* カンプはセクションラベルと同じ 11.5px（.20em） */
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: var(--ink);
  white-space: nowrap;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  font-size: var(--text-caption);
  line-height: 2.2;
  color: var(--ink-3);
}

.site-footer__bottom {
  padding: 34px var(--pad-x) 32px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
}
.site-footer__address {
  font-size: var(--text-nav);
  line-height: 2;
  color: var(--ink-3);
}
/* カンプは社名・住所・親会社の3行に分かれている（span に display:block を当てている）。
   実装で inline のままにすると住所と親会社が1行に繋がってしまう */
.site-footer__address strong,
.site-footer__address > span { display: block; }
.site-footer__address strong { color: var(--ink); font-weight: 500; }
.site-footer__address a { border-bottom: 1px solid var(--underline); }
.site-footer__legal {
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.site-footer__legal-links {
  display: flex;
  gap: 22px;
  font-size: var(--text-nav);
  line-height: 1;
  color: var(--ink-3);
}
.site-footer__copyright {
  font-size: var(--text-note);
  line-height: 1;
  /* カンプは .12em。フッターナビの .10em とは別（04 第4章の一覧に © の行が無かった） */
  letter-spacing: .12em;
  color: var(--ink-3);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .site-footer__top { flex-direction: column; gap: 40px; }
  .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .site-footer__legal { flex-direction: column; gap: 16px; }
  .site-footer__legal-links { flex-direction: column; gap: 12px; line-height: 2; }
}

/* ── 下層ページ共通のヒーロー（カンプ Arkad Business.dc.html / About.dc.html）──
   260px / 1fr の2カラム。左にラベルと欧文見出し、右に h1。
   背景に淡いドットパターン（トップのヒーローと同じ言語を弱めて使う） */
/* ヒーローはカンプに2種類ある。
   ・h1 が文になっているページ（/about/ /business/ /recruit/ /contact/ /press/ …）
     … 下余白 112px・行送り 1.85（この既定値）
   ・h1 がページ名そのもののページ（会社概要・沿革・ニュース・規約類・サイトマップ）
     … 下余白 104px・行送り 1.60（下の修飾クラス）
   ページごとに使い分ける。まとめて片方に寄せてはいけない */
.page-hero {
  padding: 118px var(--pad-x) 112px;
  background-image:
    linear-gradient(to left, rgba(251,251,251,0), var(--paper) 44%),
    radial-gradient(circle, rgba(0,0,0,.2) 1px, rgba(0,0,0,0) 1.5px);
  background-size: auto, 15px 15px;
}
.page-hero__h1 {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: pretty;
}
.page-hero__h1 span { display: block; }
/* 下余白と行送りは別々に効く。/company/group/ のように「下余白は 104px だが
   h1 は文なので行送りは 1.85」というページがあるため、1つのクラスに束ねない */
.page-hero--tight { padding-bottom: 104px; }
.page-hero__h1--name { line-height: 1.6; }
/* 一覧ページのヒーローはさらに詰まる（カンプ実測 104/60）。すぐ下に一覧の節が続くので、
   本文ページのような下余白を取らない。修飾クラスにせずページ側で持つ（この値はここだけ） */
.page-news > .page-hero { padding-block: 104px 60px; }

/* /press/ のヒーロー右側。見出しと注記を 1fr / 330px に割り、**下端で揃える**
   （カンプ実測。上揃えではない） */
.phero2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  /* ラベル列との間（--gap-col 80px）とは別に 70px。カンプ実測 */
  gap: 70px;
  align-items: end;
}
.phero2__note {
  font-size: var(--text-caption);
  line-height: 2.2;
  color: var(--ink-3);
}
/* ★ カンプはこのリンクに下線も色差も付けておらず、本文と見分けが付かない。
   文字色は本文と同じにしつつ下線だけ残す（WCAG 1.4.1・色だけに頼らない） */
.phero2__note a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1023px) {
  .phero2 { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}

/* ── 01 / APPROACH（B-52）─────────────────────────────────────── */
.approach { padding: 112px var(--pad-x) 104px; border-top: 1px solid var(--line-soft); }
.approach__grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 70px;
  align-items: start;
}
.approach__h3 {
  margin-bottom: 28px;
  font-size: var(--text-h3-sm);
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink);
}
/* 右カラムの「私たちが置いている価値」（カンプ実測）。
   ★ 列の 330px の内側に 28px の余白を持つ（グリッドの gap 70px と合わせて実質 98px 空く）。
   ★ 罫線は各項目の「下」に引く。上ではない。最後の項目にも引く（＝リストの底に線が残る）。
   ★ ラベルの字間は .16em（--ls-label-stat）。節ラベルの .20em ではない */
.values {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 28px;
}
.values__title {
  display: block;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.values ul { margin: 0; }
.values li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body-sm);
  line-height: 2.1;
  color: var(--ink-2);
}

/* ── 02 / STRUCTURE（B-53 事業構造図）───────────────────────────
   図の内容は必ずテキストでも記述する（03 第5章1節・検収 8.4.1）。
   ここでは「図」を罫線と余白だけで組み、各層の名称と説明をそのままテキストで置く。
   画像に閉じ込めていないので、検索エンジン・スクリーンリーダー・AI に情報が伝わる。 */
.structure {
  padding: 130px var(--pad-x) 118px;
  background: var(--paper-alt);
}
/* 導入文とレイヤー図の間はカンプが 36px。図の束には上罫線が付く */
.structure__main {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
/* この節の導入は 670px で止める（.block__p の既定 640px ではない） */
.structure__lead { max-width: 670px; }
.layers { border-top: 1px solid var(--line-strong); }
.layer {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.layer:last-child { border-bottom: 0; }
.layer__label {
  display: block;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.layer__name {
  display: block;
  margin-top: 10px;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}
.layer__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.layer__item {
  border: 1px solid var(--line-strong);
  background: var(--card);
  padding: 20px 22px;
}
/* ★ 見出しは h4。h3 で書くと当たらない（見出しレベルは節の階層で決まっており、
   ここは h2 → h3（層の名前）→ h4（サービス名）の順になる） */
.layer__item h4 {
  margin-bottom: 8px;
  font-size: var(--text-h3-sm);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
}
.layer__item p {
  font-size: var(--text-caption);
  line-height: 1.9;
  color: var(--ink-3);
}

/* ── 03 / MAIN・04 / RELATED（B-54〜B-56）───────────────────────── */
.services { padding: 88px var(--pad-x); }
.services__lead {
  margin-top: 24px;
  font-size: var(--text-caption);
  line-height: 2.2;
  color: var(--ink-3);
}
.services--related { border-top: 1px solid var(--line-soft); }
/* 事業ブロックの縦の間隔はカンプが 60px。.service 側の margin ではなく親の gap で取る */
.services__main {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
/* 図を持たない事業は1カラム。本文が 988px いっぱいに伸びると1行65字を超えるので
   670px で止める（04 第4章の1行長。Fincs 側の本文カラム 464px とは別の値） */
.service--noimg { grid-template-columns: 1fr; }
.service--noimg .service__col { max-width: 670px; }
/* 右カラムの中はすべて 22px 間隔（カンプ実測）。子側の margin では取らない */
.service__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.service__figure {
  background: var(--paper-alt);
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.service__figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.service__meta {
  display: block;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-card);
  color: var(--ink-3);
}
.service__name {
  font-size: var(--text-h3-lg);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* カンプのロゴは高さ 30px。見出しの文字サイズ 34px とは別 */
.service__name img { height: 30px; width: auto; }
/* 折返しは pretty（カンプと同じ）。最終行に1〜2字だけ残るのを避ける */
.service__body { color: var(--ink-2); text-wrap: pretty; }
.service__links { display: flex; flex-wrap: wrap; gap: 28px; }

/* サービスの実績数値。該当サービスに数値がなければブロックごと出さない（06 第9章1節） */
.service__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 44px;
  justify-content: start;
  /* 22px の gap に 6px 足して 28px 空ける（カンプ実測） */
  margin-top: 6px;
  padding: 26px 0 4px;
  border-top: 1px solid var(--line);
}
.service__stat-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-nav);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-nav);
  color: var(--ink-3);
}
.service__stat-value {
  display: block;
  font-size: var(--text-h2-cta);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
/* 単位はカンプが 12.5px。数値との間は詰める */
.service__stat-unit { font-size: var(--text-caption); letter-spacing: 0; }
/* 基準日は数値ごとに出す。一括注記にまとめない（検収 5.1.6） */
.service__stat-asof {
  display: block;
  margin-top: 8px;
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--ink-3);
}

/* 関連事業・自社開発は枠付きカードで、メイン事業と対等に見せない（01 第6章） */
.service--minor {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--line-strong);
  padding: 32px 32px 36px;
}
.service--minor + .service--minor { margin-top: 0; }
.services__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.service--minor .service__name { margin: 0; font-size: var(--text-h3); letter-spacing: -.01em; }
/* Bibro は筆記体のロゴ。見出しの 24px と目線が揃う光学サイズが 36px（文字の高さとは一致しない） */
.service--minor .service__logo { display: block; height: 36px; width: auto; }
.service--minor .service__body { font-size: var(--text-body-sm); line-height: 2.1; }
/* 本文とリンクの間は gap 18px にさらに 12px 足す（カンプ実測） */
.service--minor .service__links { margin-top: 0; padding-top: 12px; }

@media (max-width: 767px) {
  .page-hero { padding: 64px var(--pad-x) 56px; }
  .page-hero__h1 { font-size: var(--text-h1-sp); line-height: 1.9; }
  .approach { padding: 64px var(--pad-x) 56px; }
  .approach__grid { grid-template-columns: 1fr; gap: var(--gap-col); }
  .structure { padding: 64px var(--pad-x); }
  .layer { grid-template-columns: 1fr; gap: 16px; }
  .layer__items { grid-template-columns: 1fr; }
  .services { padding: 64px var(--pad-x); }
  .service { grid-template-columns: 1fr; gap: 28px; }
  .service + .service { margin-top: 56px; }
  .service__figure { height: 220px; }
  .service__stats { grid-template-columns: 1fr 1fr; gap: 24px; }
  .services__pair { grid-template-columns: 1fr; }
}

/* ── /about/ の VALUES（B-84。3項目・番号付き） ───────────────── */
.vlist { display: block; }   /* カンプは grid ではない。罫線は .vlist__item が持つ */
.vlist__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.vlist__item:last-child { border-bottom: 1px solid var(--line); }
.vlist__no {
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
}
.vlist__title {
  margin-bottom: 10px;
  font-size: var(--text-h3-sm);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}
.vlist__body { font-size: var(--text-body-sm); line-height: 2.1; color: var(--ink-2); }

/* ── /recruit/ 02/FOUNDATION のミッション2件（カンプ実測）──
   150px のラベル列＋1fr。上下を1px罫線で挟む。本文は 18px/2 の中ウェイトで、
   本文トークン（15.5px）ではない。理念の引用であることを大きさで示している */
/* 上辺だけ --line-strong（.14）。行の区切りは --line（.12）で、カンプも2種類を使い分けている */
.mission { margin-top: 44px; border-top: 1px solid var(--line-strong); }
.mission__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.mission__label {
  font-size: var(--text-note);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.mission__body { font-size: 1.125rem; font-weight: 500; line-height: 2; color: var(--ink); text-wrap: pretty; }

/* ── /recruit/ 02/FOUNDATION の資本関係図（カンプ実測）──
   罫線で親子を繋ぐツリー。100%子会社の箱だけ網掛けして当社の位置を示す。
   画像を使わず罫線と余白だけで組む（彩度ゼロ・影なし・角丸なし） */
.orgtree { font-size: 0; }
.orgtree__box {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line);
}
.orgtree__box--self { background: var(--paper-alt); }
.orgtree__tier {
  display: block;
  margin-bottom: 10px;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.orgtree__name { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.6; color: var(--ink); }
.orgtree__note {
  display: block;
  margin-bottom: 14px;
  font-size: 0.71875rem;
  line-height: 1.7;
  color: var(--ink-3);
}
.orgtree__name + .orgtree__name { margin-top: 14px; }
.orgtree__note--last { margin-bottom: 0; }
/* 親会社から降りる縦罫 */
.orgtree__stem { height: 26px; width: 1px; margin-left: 24px; background: var(--line); }
.orgtree__branch { display: grid; grid-template-columns: 48px 1fr; }
/* 縦罫＋30px の位置から箱へ伸びる横罫（L字） */
.orgtree__elbow { position: relative; }
.orgtree__elbow::before {
  content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.orgtree__elbow::after {
  content: ""; position: absolute; left: 24px; top: 30px; width: 24px; height: 1px; background: var(--line);
}
/* 最後の枝は縦罫を分岐点で止める */
.orgtree__elbow--last::before { bottom: auto; height: 30px; }
.orgtree__cell { padding-bottom: 20px; }
.orgtree__cell:last-child { padding-bottom: 0; }

/* ── /recruit/ 06/AI の利用ツール（カンプ実測）──
   3群を縦罫で仕切り、各ツールは 999px のピル＋14pxロゴ。
   ★ CLAUDE.md の「角丸を使わない。ボタンのみ pill 形（999px）」に対し、
     カンプはこのチップにも 999px を使っている。2026-08-07 オーナー判断でカンプを採用。
     リンクでもボタンでもないため、hover もカーソル変化も与えない */
.stack {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
}
/* 左右の余白は「行の中での位置」で決める。並び順で決めると、2列・1列に
   折り返したときに行頭の群だけ 30px 内側にずれる（実績数値と同じ間違い） */
.stack__group { padding: 32px 30px 34px; border-right: 1px solid var(--line-soft); }
.stack__group:first-child { padding-left: 0; }
.stack__group:last-child { border-right: 0; padding-right: 0; }
.stack__label {
  display: block;
  margin-bottom: 22px;
  font-size: var(--text-note);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-card);
  color: var(--ink-3);
}
.stack__items { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.stack__items li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ink);
}
.stack__items img { width: 14px; height: 14px; opacity: .85; }
/* 「etc.」は実在のツールではないので、カンプは破線・細字・薄色で区別している。
   .stack__items li と同じ詳細度にしないと border の一括指定に負ける */
.stack__items li.stack__etc {
  border-style: dashed;
  border-color: rgba(0, 0, 0, .22);
  font-weight: 400;
  color: var(--ink-3);
}
@media (max-width: 767px) {
  .mission__row { grid-template-columns: 1fr; gap: 12px; }
}

/* ── /about/ 03/PRACTICE（カンプ実測）──
   ★ カードではなく、上罫と縦罫だけの3カラム。他の3〜4カラム（.flow / .steps）と同じ骨格。
     枠付きカードにしていたため、カンプより囲みが強く出ていた。
   ★ 左右の余白は「行の中での位置」で決める */
.practice { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.practice__item { padding: 34px 30px 30px; border-right: 1px solid var(--line); }
.practice__item:first-child { padding-left: 0; }
.practice__item:last-child { padding-right: 0; border-right: 0; }
.practice__role {
  display: block;
  margin-bottom: 16px;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.practice__name { margin-bottom: 12px; font-size: 1.0625rem; font-weight: 500; line-height: 1.7; color: var(--ink); }
.practice__body { font-size: 0.8125rem; line-height: 2.1; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 1023px) {
  .practice { grid-template-columns: 1fr; }
  .practice__item { padding-left: 0; padding-right: 0; border-right: 0; }
  .practice__item + .practice__item { border-top: 1px solid var(--line); }
}

/* ── /about/ の社名の由来（B-85）の引用ブロック ─────────────────── */
/* ── /about/ 04/NAME の囲み（カンプ実測）──
   枠 1px .14・内側 32px 30px・flex column gap16。ラベルは 11.5px / .16em */
.namemark {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 30px;
  border: 1px solid var(--line-strong);
}
/* .namemark は2箇所で使う。01/VISION は文字ラベル（VISION）、04/NAME はワードマーク。
   ★ ロゴを入れたとき label の指定ごと消してしまい、VISION 側が既定サイズに戻る不具合を出した */
.namemark__label {
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
/* ワードマーク。文字ラベルと同じ位置・同じ視覚的な重さに収める */
.namemark__logo { width: 110px; height: auto; }
.namemark__body { font-size: 0.8125rem; line-height: 2.1; color: var(--ink-2); text-wrap: pretty; }

/* ── 定義テーブル（会社概要 B-102・認証 B-104）───────────────────
   値が空の項目は build.mjs が行ごと省略する（06 第9章1節）。
   項目名も薄くしない（--ink-3 以上。検収 8.1.6） */
.dtable { border-top: 1px solid var(--line); }
.dtable__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.dtable__key { font-size: var(--text-caption); line-height: 1.9; color: var(--ink-3); }
.dtable__val { font-size: var(--text-body-sm); line-height: 2.1; color: var(--ink); }
.dtable__val span { display: block; }

/* 会社概要・プレスキットの基本情報テーブル（カンプ実測。2ページで同じ仕様）。
   ★ 幅は 900px。コンテンツ列 988px いっぱいではない。項目 200 + gap40 + 値 660。
   ★ 罫線は各行の「上」に引く。1本目だけ --line-strong で濃く、最終行の下にも1本。
   ★ 項目名も値も 13.5px。既定の .dtable__key（12.5px）より一段大きい。
   /recruit/・職種ページ・ニュース記事の .dtable はそれぞれ別の値を持つ（各所で上書き） */
.dtable--facts { max-width: 900px; border-top: 0; }
.dtable--facts .dtable__row { border-top: 1px solid var(--line); border-bottom: 0; }
.dtable--facts .dtable__row:first-child { border-top: 1px solid var(--line-strong); }
.dtable--facts .dtable__row:last-child { border-bottom: 1px solid var(--line); }
.dtable--facts .dtable__key { font-size: var(--text-body-sm); line-height: 2.1; }
/* 値を1行に並べる（プレスキットの主要サービス）。区切りは CSS で入れる。
   データ側に「／」を持たせると、1件だけになったときに区切りが残る */
.dtable__val--inline span { display: inline; }
.dtable__val--inline span + span::before { content: "／"; }
@media (max-width: 767px) {
  /* 06 第9章2節: 項目名と値を縦積み。横スクロールさせない */
  .dtable__row { grid-template-columns: 1fr; gap: 6px; }
}

/* B-105 最終更新日。印刷して保管されるため必須（02 第7章9節） */
.updated {
  margin-top: 26px;
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--ink-3);
}

/* ── 沿革タイムライン（B-112 / Roots） ─────────────────────────── */
.timeline { border-top: 1px solid var(--line); }
.timeline__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.timeline__when {
  font-size: var(--text-date);
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-feature-settings: "tnum";
}
.timeline__what { font-size: var(--text-body-sm); line-height: 2.1; color: var(--ink); }
.timeline__note { display: block; font-size: var(--text-note); line-height: 1.6; color: var(--ink-3); }
@media (max-width: 767px) {
  .timeline__row { grid-template-columns: 1fr; gap: 8px; }
}

/* ── /company/group/ 01/CAPITAL の節 ──
   ★ 節余白は 130/118（カンプ実測。.approach の既定 112/104 ではない）。上罫線は無い。
   ★ 2カラムは .approach__grid の既定（588 / 330）のまま。
     2026-08-08 オーナー指示でこの節を /recruit/ 02/FOUNDATION と同じ構成にしたため、
     カンプの 518 / 400 と専用の .capital は廃止して .mission ＋ .orgtree を使う */
.page-group > .approach[aria-labelledby="capital-h2"] {
  padding-block: 130px 118px;
  border-top: 0;
}

/* ── /company/group/ 02/HISTORY（カンプ実測）──
   ★ 節余白は 88/88（.structure の既定 130/118 ではない）。地色は --paper-alt のまま。
   ★ 本文は左 588px、年表は右の補助カラム 330px（.approach__grid の既定どおり）。 */
.page-group > .structure[aria-labelledby="roots-h2"] { padding-block: 88px; }

/* グループのルーツの年表。/company/profile/ の沿革（.timeline・900px の表）とは別物で、
   330px の列に収める小さいリスト。列の内側に 28px の余白を持つ（.values と同じ扱い）。
   罫線は各行の「下」だけで、上には引かない。最終行の下にも引く */
.roots { display: flex; flex-direction: column; padding-left: 28px; }
.roots__row {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.roots__when { flex: none; font-size: var(--text-lead); line-height: 2; color: var(--ink-3); }
.roots__what { font-size: var(--text-lead); line-height: 2; color: var(--ink); }
.roots__note {
  display: block;
  margin-top: 2px;
  font-size: var(--text-nav);
  line-height: 2;
  color: var(--ink-3);
}
@media (max-width: 1200px) {
  /* .approach__grid が1列に落ちるので、年表の左余白を外して本文と頭を揃える */
  .roots { padding-left: 0; max-width: 520px; }
}


/* ── 関連導線のカード（B-128 / 03 / LINKS） ──────────────────────── */
/* ── 画面幅いっぱいの写真＋キャプション（カンプ Arkad Company Group.dc.html 実測）──
   ★ 写真は左右の余白を取らない。キャプションだけ本文と同じ 56px の余白に合わせる。
   ★ 高さは 560px 固定で object-fit:cover。原本は表示比率に切り抜いて書き出してある */
.fullshot { margin: 0; }
.fullshot img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
}
.fullshot figcaption {
  padding: 16px var(--pad-x) 0;
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--ink-3);
}
@media (max-width: 767px) {
  .fullshot img { height: 240px; }
}

/* ── 1本だけのCTA（カンプ Arkad Company Group.dc.html 実測）───────────
   共通CTA（.cta の2枠）とは別物。節と同じ骨格（左にラベルと見出し、右に本文）の中に
   リード文とボタンを置く。上下は 96px、上に区切りの罫線。
   ★ ラベル列と本文の両方を縦中央で揃える（.cols の既定は start）。
   ★ ボタンは右端。本文は 560px で止める */
.ctaline {
  padding: 96px var(--pad-x);
  border-top: 1px solid var(--line-soft);
  align-items: center;
}
.ctaline__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 70px;
  align-items: center;
}
.ctaline__lead {
  margin-bottom: 18px;
  font-size: var(--text-h2-cta);
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
}
.ctaline__text {
  max-width: 560px;
  font-size: var(--text-body-face);
  line-height: 2.2;
  color: var(--ink-2);
}
/* このボタンだけ左右が 32px（共通CTAの 30px とは別。カンプ実測）。
   ★ 中に置くボタンは2種類ある。/company/group/ は枠線のみ（.cta__button）、
     /press/ は黒の塗り（.hero__cta）。どちらも自前の配置指定を持っているので、
     ここで打ち消して行の中央に揃える */
.ctaline__button { padding-inline: 32px; align-self: center; margin-top: 0; }
@media (max-width: 899px) {
  .ctaline__body { grid-template-columns: 1fr; gap: 36px; justify-items: start; }
}

/* 関連導線のカード（カンプ Arkad Company Group.dc.html 実測）。
   ★ 幅は 900px（コンテンツ列 988px いっぱいではない）。436 + gap28 + 436。
   ★ 面は敷かない。枠線 1px だけ。
   ★ 矢印は見出しに続けず、カードの右端に別に置く。見出しとベースラインで揃える。
   ※ /404 も .linkcards を使っているが、カンプの 404 は枠なしの縦リストで別物。
      404 の照合時にそちら専用のクラスへ分ける */
.linkcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 900px;
}
.linkcards a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border: 1px solid var(--line-strong);
  padding: 28px 30px;
}
.linkcard__title {
  margin-bottom: 6px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
}
.linkcard__desc {
  display: block;
  font-size: var(--text-caption);
  line-height: 1.9;
  color: var(--ink-3);
}
.linkcard__arrow {
  flex: none;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
@media (max-width: 767px) {
  .practice, .linkcards { grid-template-columns: 1fr; }
  .vlist__item { grid-template-columns: 1fr; gap: 10px; }
}

/* ── hover / インタラクション（04 第9章4節） ─────────────────────
   「色を使えないぶん、明度と動きで応答する」のが本方向性のルール。所要 120ms。

   ★ カンプはグローバルに `a:hover{opacity:.6}` を当てているが、そのまま実装すると
     薄い色のリンクが AA を割る（--paper 上での実測）:
         --ink   (#0d0d0d)  18.8:1 → 5.06:1  ✓
         --ink-2 (.78)      11.5:1 → 3.54:1  ✗
         --ink-3 (.62)       6.1:1 → 2.60:1  ✗
     そこで **--ink の文字は opacity .6、それより薄い文字は --ink へ暗くする。**
     どちらも「明度で応答する」であり、後者は hover 時に可読性が上がる（検収 8.1.1）。

   ★ カードとニュース行は <a> だが opacity を当てない。中の画像と文字まで褪せるため。
     04 の指定どおり、背景と罫線で応答する。

   ★ `hover: hover` のある環境にのみ適用する。タッチ端末で状態が残るのを避ける。
     hover だけで状態を伝えてはいない（矢印とテキストでも示している。検収 8.3.7）。

   ★ prefers-reduced-motion では下の @media が transition を無効化するが、
     opacity と色の変化自体は即時に適用される（04 第9章4節・検収 8.3.6）。
   ------------------------------------------------------------------------- */
.link,
.site-nav a,
.site-header__brand,
.breadcrumb a,
.site-footer__links a,
.site-footer__legal-links a,
.site-footer__address a {
  transition: opacity .12s, color .12s;
}
.card { transition: background-color .12s; }
.news__row { transition: background-color .12s, border-color .12s; }
.site-nav__cta,
.hero__cta,
.cta__button,
.recruit__cta {
  transition: background-color .12s, border-color .12s, color .12s;
}
.hero__cta span { transition: transform .12s; }

@media (hover: hover) {
  /* テキストリンク（--ink）: opacity .6 */
  .link:hover,
  .site-nav a:hover { opacity: .6; }

  /* テキストリンク（--ink より薄い）: --ink へ暗くする */
  .site-header__brand:hover,
  .breadcrumb a:hover,
  .site-footer__links a:hover,
  .site-footer__legal-links a:hover,
  .site-footer__address a:hover { color: var(--ink); }

  /* プロダクトカード: 面が持ち上がる */
  .card:hover { background: var(--card-hover); }

  /* ニュース行: 罫線を --line-strong に／行全体を微かに明るく */
  .news__row:hover {
    background: var(--card-hover);
    border-top-color: var(--line-strong);
  }
  .news__row:last-child:hover { border-bottom-color: var(--line-strong); }

  /* CTA（黒 pill）: 背景をわずかに明度上げ／矢印を4px右へ */
  .hero__cta:hover,
  .site-nav .site-nav__cta:hover { background: var(--ink-2); }
  .hero__cta:hover span { transform: translateX(4px); }

  /* CTA（枠線のみの pill）: 枠線を --ink に／面を明るく */
  .site-header[data-variant="home"] .site-nav .site-nav__cta:hover,
  .cta__button:hover {
    background: var(--card-hover);
    border-color: var(--ink);
  }

  /* 反転面の CTA: 面をわずかに明度上げ／枠線を白へ */
  .face .cta__button:hover,
  .recruit__cta:hover {
    background: rgba(255,255,255,.08);
    border-color: var(--face-heading);
  }
}

/* ── モーション（06 第16章・検収 8.3.5 / 8.3.6） ─────────────────
   opacity と色の変化は即時適用する（状態が伝わらなくなることを避ける） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 印刷（06 第13章。/company/profile/ と /electronic-notice/） ── */
@media print {
  .site-header, .site-nav, .breadcrumb, .cta, .section-nav, .site-footer__nav { display: none; }
  body { background: #fff; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .print-url::after { content: "取得日: " attr(data-date); }
}

/* ══════════════════════════════════════════════════════════════════════════
   電子公告（/electronic-notice/）
   ★★★ このページだけは法令上の要件がデザイン・利便性・SEOのすべてに優先する。
   CLAUDE.md の「電子公告ページの絶対ルール」と 06 第12章に従う。

   ・装飾を加えない。反転面・写真・カード・影・モーション・CTAボタンを使わない
     （検収 12.5.7 / 12.5.8 / 12.5.9）。罫線と余白のみ
   ・貸借対照表は罫線の表組み。金額は右揃え・等幅数字（tnum）・--ink（最も濃い色）
     （検収 12.5.2 / 12.5.5）
   ・項目名も薄くしない。--ink-2 以上（検収 12.5.3）
   ・**表内は --text-table（17px）を使う。**本文より上げる。数字が主であり
     可読性が法令要件に直結する（検収 12.5.1・04 第6章3節）
   ・rgba(0,0,0,.62) より薄い色をこのページで使わない（検収 12.5.4）
   ・印刷用スタイルを適用する（第13章。取引先・金融機関が印刷して保管する）
   ══════════════════════════════════════════════════════════════════════════ */
/* 下余白は 112px（カンプ実測）。上は 88px */
.notice { padding: 88px var(--pad-x) 112px; border-top: 1px solid var(--line-soft); }
/* ヒーローの本文は 670px で止める（カンプ実測）。法令用語を含む文なので
   1行を長くしすぎない。h1 の下は 34px、段落の間は 20px */
/* ★ この節だけ見出しが 22px（カンプ実測）。他ページの節見出し 30px より小さい。
   装飾を持たない法令文書として、見出しを本文から極端に離さない（検収 12.5.7） */
.notice__h2 { font-size: 1.375rem; line-height: 1.6; }
/* 掲載中の公告が無いことの明示（検収 12.4.12）。上罫線のある枠に入れる */
.notice__none {
  max-width: 760px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.notice__hero { max-width: 670px; }
.notice__hero .page-hero__h1 { margin-bottom: 34px; }
.notice__intro { color: var(--ink-2); }
.notice__intro + .notice__intro { margin-top: 20px; }
.notice__lead { color: var(--ink-2); }
.notice__term {
  margin-top: 40px;
  font-size: var(--text-h3-sm);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}
.notice__meta {
  margin-top: 10px;
  font-size: var(--text-body-sm);
  line-height: 2.1;
  color: var(--ink-2);
}
.notice__caption {
  margin: 26px 0 8px;
  font-size: var(--text-body-sm);
  line-height: 2.1;
  color: var(--ink-2);
}
/* 貸借対照表。表内は 17px（検収 12.5.1） */
.notice__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-table);
  line-height: 1.9;
  color: var(--ink);
}
.notice__table th,
.notice__table td {
  font-size: var(--text-table);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
  color: var(--ink);
}
.notice__table th { color: var(--ink-2); font-weight: 500; }
/* 金額は右揃え・等幅数字（検収 12.5.5） */
.notice__table td.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
/* 区分の合計行は --line-strong で区別する（検収 12.5.6） */
.notice__table tr.total th,
.notice__table tr.total td {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  font-weight: 500;
}
.notice__none { color: var(--ink-2); }
/* 掲載についての注記。項目名を付けず、1文ずつ上下 22px の余白で並べる（カンプ実測）。
   幅は 670px で止める。法令用語を含む文なので1行を長くしすぎない */
.notice__about { max-width: 670px; color: var(--ink-2); }
.notice__about p { padding: 22px 0; }
/* 関連ページ。行リスト（上罫線＋各行の下罫線）。矢印は行の右端。
   ★ ボタンにしない。テキストリンクのみ（検収 12.5.9） */
.notice__links { max-width: 670px; border-top: 1px solid var(--line); }
.notice__links a {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--ink);
}
.notice__links a span { color: var(--ink-3); }
.notice__updated { margin-top: 34px; }
@media (max-width: 767px) {
  /* 06 第9章2節: **横スクロールさせない。**項目名と金額を上下に積む（検収 12.5.10） */
  .notice { padding: 56px var(--pad-x); }
  .notice__table, .notice__table tbody, .notice__table tr { display: block; }
  .notice__table th, .notice__table td { display: block; border-bottom: 0; padding: 4px 0; }
  .notice__table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .notice__table td.amount { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   フォーム（/contact/。06 第7章）
   ★ エラーは色で表さない（彩度ゼロのため）。文言・アイコン・枠線の太さ（1px→2px）の
     三重で表す（06 第7章4節・検収 10.x）
   ★ 必須は記号だけでなく「必須」というテキストも併記する
   ══════════════════════════════════════════════════════════════════════════ */
/* ── /contact/ の節（カンプ実測）──
   ★ ヒーローとフォームを分けず1つの節に収める。余白は 118 / 112。
   ★ 右カラムは 720px。コンテンツ列（988px）いっぱいには広げない。
     入力欄が横に間延びすると、どこまでが1つの項目か読み取りにくくなる */
.contact { padding: 118px var(--pad-x) 112px; }
.contact__main { max-width: 720px; }
/* 左のラベル列に置く注記 */
.contact__note {
  margin-top: 34px;
  font-size: var(--text-caption);
  line-height: 2.2;
  color: var(--ink-3);
}
.contact__h1 {
  margin-bottom: 30px;
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
}
.contact__lead {
  margin-bottom: 60px;
  font-size: var(--text-body);
  line-height: 2.05;
  color: var(--ink-2);
}
@media (max-width: 767px) {
  .contact { padding: 64px var(--pad-x) 56px; }
  .contact__h1 { font-size: var(--text-h1-sp); line-height: 1.9; }
}

/* 各ブロックが自前の余白（用件の区分の 40px、本体の 56px、送信の 48px）を持つので、
   form 側では gap を持たせない */
.form { display: flex; flex-direction: column; }
/* フォーム本体。1項目＝1行、上下 34px の余白と下罫線で区切る（カンプ実測） */
.form__fields {
  margin-top: 56px;
  border-top: 1px solid var(--line-strong);
}
.form__row { padding: 34px 0; border-bottom: 1px solid var(--line); }
/* 短い項目は2つ並べる。346 + gap28 + 346 = 720 */
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.form__row--last { padding-bottom: 0; border-bottom: 0; }
/* 送信ボタンと控えの案内を横に並べる */
.form__send { display: flex; align-items: center; gap: 28px; margin-top: 48px; }
@media (max-width: 559px) {
  .form__row--2 { grid-template-columns: 1fr; gap: 34px; }
  .form__send { flex-direction: column; align-items: flex-start; gap: 18px; }
}
/* ★ fieldset / legend はブラウザ既定の枠線・余白を持つ。消さないと 2px の
   グレー枠と 5〜12px の余白が出て、他の項目と揃わない（実測で発覚） */
.field { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; }
.field__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}
.field__req,
.field__opt {
  /* カンプは 10.5px・余白 5/8px・枠線 rgba(0,0,0,.3) */
  font-size: 0.65625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink);
  border: 1px solid var(--underline);
  padding: 5px 8px;
}
.field__note { font-size: var(--text-caption); line-height: 1.9; color: var(--ink-3); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  /* カンプは 15px・高さ48px・左右16px・面は --card（--card-hover ではない） */
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  padding: 0 16px;
  height: 48px;
}
.field textarea { height: auto; min-height: 248px; padding: 14px 16px; resize: vertical; }
/* エラー: 枠線を2pxに（色ではなく太さで示す。06 第7章4節の三重表示の1つ）
   ★ 基底の `.field input[type="text"]` は要素セレクタを含むため詳細度が (0,2,1) になる。
     属性セレクタだけの `.field [aria-invalid]` は (0,2,0) で**負ける**ので、
     こちらも要素セレクタを含めて同じ詳細度にし、後に置いて勝たせる */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--ink);
  padding: 13px 15px;   /* 枠線が1px太くなる分を詰めて、寸法が動かないようにする */
}
.field__error {
  display: none;
  font-size: var(--text-caption);
  line-height: 1.9;
  color: var(--ink);
  font-weight: 500;
}
.field__error::before { content: "！ "; }
/* 入力欄が .consent や .choices に入れ子になっている場合にも当たるよう :has() で拾う */
.field:has([aria-invalid="true"]) .field__error { display: block; }
.field [aria-invalid="true"] ~ .field__error { display: block; }
/* 用件の区分（ラジオ）は fieldset 全体が対象 */
fieldset.field:has([aria-invalid="true"]) { border-color: var(--ink); }

/* 用件の区分（ラジオ）。カード状に並べる */
/* 送信できなかったときの代替手段。常時表示するが、フォーム本体より弱く見せる */
.form__fallback {
  font-size: var(--text-caption);
  line-height: 2;
  color: var(--ink-3);
}
.form__fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* 用件の区分だけ独立した枠にする（カンプ実測）。上に罫線を引き、40px 空ける。
   ★ legend は既定でボーダー上に重なる特殊な配置になる。float:left で通常の
     ブロックとして流し、幅いっぱいのラベル行にする */
.field--kind {
  gap: 0;
  padding-top: 40px;
  border-top: 1px solid var(--line-strong);
}
.field--kind .field__label { float: left; width: 100%; margin-bottom: 20px; }
.field--kind .choices { clear: both; }
.field--kind .field__note { margin-top: 18px; line-height: 2; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ラジオ 18px 分の列＋本文の2列（カンプ実測）。flex ではなく grid にすることで、
   説明文が2行になってもラジオの位置が動かない */
.choice {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line-strong);
  padding: 20px 22px;
  cursor: pointer;
}
.choice input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: #0d0d0d; }
.choice strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}
.choice span span { display: block; font-size: var(--text-caption); line-height: 1.9; color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--ink); border-width: 2px; padding: 19px 21px; }

/* 同意チェックボックス。選択カードと同じく grid で組み、文言が2行になっても
   チェックボックスの位置が動かないようにする（カンプ実測 16px＋gap14px） */
.consent { display: grid; grid-template-columns: 16px 1fr; gap: 14px; align-items: start; }
.consent label { font-size: var(--text-body-sm); line-height: 1.8; color: var(--ink); }
.consent input { width: 16px; height: 16px; margin: 4px 0 0; accent-color: #0d0d0d; }

/* honeypot。画面外に置き、人間・SR・キーボードから到達させない（06 第7章1節） */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  /* 送信ボタンだけ一回り大きい（カンプ実測 19/40px・高さ52px）。
     ページ内で一番重い操作なので、他の黒ピル（17/32px）より押しやすくする */
  padding: 19px 40px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: inherit;
  font-size: var(--text-cta);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  cursor: pointer;
}
.form__after { font-size: var(--text-caption); line-height: 2; color: var(--ink-3); }
/* ★ 以前ここに `.form__fallback { display: none }` と
   `[data-shown="true"] { display: block }` があった。JS で送信失敗時に出す想定だったが、
   **ネイティブPOSTでは送信失敗をクライアント側で検知できない**（06 第7章1節）ため、
   出すきっかけが存在せず、実際に form.js にも実装が無かった。常時表示に変えた
   （2026-08-08）。体裁はフォーム冒頭の .form__fallback の定義を参照 */

@media (hover: hover) {
  .form__submit:hover { background: var(--ink-2); }
  .choice:hover { background: var(--card-hover); }
}
@media (max-width: 767px) {
  .choices { grid-template-columns: 1fr; }
  .form__submit { display: flex; width: 100%; }
}

/* 送信完了（/contact/thanks/） */
/* 縮小版フッター（/contact/thanks/）。社名・住所とコピーライトだけ */
.site-footer-min {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  padding: 34px var(--pad-x) 32px;
  border-top: 1px solid var(--line-soft);
}
.site-footer-min__name,
.site-footer-min__addr { display: block; font-size: var(--text-nav); line-height: 2; }
.site-footer-min__name { color: var(--ink); }
.site-footer-min__addr { color: var(--ink-3); }
.site-footer-min__copy { font-size: var(--text-label); line-height: 1; color: var(--ink-3); }
@media (max-width: 559px) {
  .site-footer-min { flex-direction: column; gap: 18px; }
}

/* 送信完了。中央揃えの1カラム（カンプ実測）。他ページのような左右2カラムにしない */
.sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 150px var(--pad-x) 160px;
}
.sent__label { margin-bottom: 44px; }
/* ラベルと見出しの間の縦罫。送信が終わって次に進む、という区切りを1本の線で示す */
.sent__rule {
  width: 1px;
  height: 64px;
  margin-bottom: 44px;
  background: var(--line-strong);
}
.sent__h1 {
  margin-bottom: 34px;
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
}
.sent__body { max-width: 560px; color: var(--ink-2); }
.sent__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 56px; }
/* この2つだけ一回り大きいピル（カンプ実測 19/36px・高さ54px） */
.sent__links .hero__cta,
.sent__links .cta__button { margin-top: 0; align-self: auto; padding: 19px 36px; }
@media (max-width: 767px) {
  .sent { padding: 90px var(--pad-x) 100px; }
  .sent__h1 { font-size: var(--text-h1-sp); line-height: 1.9; }
  .sent__body br { display: none; }
}
.sent .linkcards { margin-top: 44px; }
/* 404 の「よく見られているページ」。SPでは1カラム（.linkcards の指定を継承） */

/* ── 404（カンプ実測）───────────────────────────────────────────
   260 / 988 の2カラム。右をさらに 518（本文＋ボタン）と 400（よく見られているページ）に割る。
   ★ /contact/thanks/ のような中央揃えではない。迷っている人に次の行き先を並べるのが主 */
.e404 { padding: 140px var(--pad-x) 130px; }
.e404__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 70px; align-items: start; }
.e404__main { display: flex; flex-direction: column; gap: 34px; }
.e404__h1 {
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
}
.e404__body { color: var(--ink-2); }
.e404__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
/* 2つのボタンはそれぞれ自前の配置指定を持っているので打ち消す。
   左右は 32px に揃える（.cta__button の既定は 30px） */
.e404__btn { margin-top: 0; align-self: auto; padding-inline: 32px; }
/* よく見られているページ。カードではなく罫線の行リスト */
.e404__popular { border-top: 1px solid var(--line-strong); }
.e404__popular-title {
  display: block;
  padding: 20px 0 6px;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.e404__links { display: flex; flex-direction: column; }
.e404__links a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--ink);
}
.e404__links a span { color: var(--ink-3); }
@media (max-width: 1023px) {
  .e404__grid { grid-template-columns: 1fr; gap: 44px; }
  .e404__popular { max-width: 400px; }
}
@media (max-width: 767px) {
  .e404 { padding: 80px var(--pad-x) 90px; }
  .e404__h1 { font-size: var(--text-h1-sp); line-height: 1.9; }
}

/* ── /sitemap/（カンプ実測）─────────────────────────────────────
   464px × 2 の枠組み。列間 60px・行間 0。各枠は上罫線＋余白 30/34px。
   見出しは 11.5px のラベル、行は 14px で下罫線。
   フッターのナビ（.site-footer__nav）とは別の組み方 */
.smapsec { padding: 0 var(--pad-x) 110px; }
.smap { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; }
.smap__group { padding: 30px 0 34px; border-top: 1px solid var(--line-strong); }
.smap__head {
  margin: 0 0 20px;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.smap__links { display: flex; flex-direction: column; font-size: 0.875rem; line-height: 1; }
.smap__links a { padding: 14px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
/* 外部サービスへのリンクは本文より一段弱く（カンプ実測） */
.smap__links a[target="_blank"] { color: var(--ink-2); }
@media (max-width: 767px) {
  .smap { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   方針類（/privacy-policy/ ・ /anti-social-forces/）。03 第5章12節
   長文の条項が主。左に目次（sticky）、右に本文。装飾は罫線と余白のみ。
   ══════════════════════════════════════════════════════════════════════════ */
/* 方針類はニュース記事と同じ3カラム（.article が持つ）。上下の余白だけ違う。
   ★ .article と詳細度を揃えるため両方のクラスを書く。片方だけだと
     .article の padding（104px 上・下0）が後から勝つ */
.article.policy { padding: 0 var(--pad-x) 110px; }
.policy__intro { margin-bottom: 44px; color: var(--ink-2); }
.policy__h2 {
  margin-bottom: 20px;
  font-size: var(--text-h3-sm);
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink);
}
.policy__body { margin-bottom: 38px; color: var(--ink-2); }
/* 窓口の枠の直前だけ詰める（カンプ実測 20px） */
.policy__body--tight { margin-bottom: 20px; }
/* ヒーローに出す制定日 */
.policy__date { font-size: var(--text-caption); line-height: 2.2; color: var(--ink-3); }
/* 本文末尾に出す制定日。上に罫線を引いて本文と切り分ける */
.policy__enacted {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: var(--text-caption);
  line-height: 2.2;
  color: var(--ink-3);
}
/* 窓口 */
.policy__desk {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  border: 1px solid var(--line-strong);
  padding: 28px 30px;
  font-size: var(--text-body-sm);
  line-height: 2.1;
  color: var(--ink);
}
/* 目次（sticky）。見出しへのページ内リンク */
/* 粘らせるのは親の .article__aside 側。ここに sticky を書いても動く余地が無い */
.toc { border-top: 1px solid var(--line); }
.toc__title {
  display: block;
  padding: 18px 0 14px;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
}
.toc li { border-top: 1px solid var(--line); }
.toc a {
  display: block;
  padding: 13px 0;
  font-size: var(--text-caption);
  line-height: 1.8;
  color: var(--ink-2);
}
.toc__meta {
  margin-top: 18px;
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--ink-3);
}
@media (max-width: 767px) {
  .policy { padding: 64px var(--pad-x) 56px; }
  .policy__grid { grid-template-columns: 1fr; gap: var(--gap-col); }
  /* SPでは目次を本文の前に出し、sticky を解除する */
  .toc { position: static; order: -1; }
}
@media (hover: hover) { .toc a:hover { color: var(--ink); } }

/* ══════════════════════════════════════════════════════════════════════════
   ニュース（/news/ ・ /news/[slug]/）
   ══════════════════════════════════════════════════════════════════════════ */
/* ★ 節に上余白も上罫線も無い（カンプ実測）。ヒーローの下余白 60px がそのまま間隔になる */
.newslist { padding: 0 var(--pad-x) 110px; }
.newslist__count { margin-top: 24px; font-size: var(--text-caption); line-height: 2.2; color: var(--ink-3); }
/* 一覧の束。上の1本だけ濃い罫線を引き、行ごとの区切りは各行の「下」に引く */
.newsrows { border-top: 1px solid var(--line-strong); }
.newsrow {
  display: grid;
  grid-template-columns: 112px 130px 1fr auto;
  gap: 36px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .12s, border-color .12s;
}
.newsrow__date {
  font-size: var(--text-date);
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-feature-settings: "tnum";
}
/* 分類は 130px 固定の枠。中身の長さで幅が変わらないので、行をまたいで縦に揃う。
   ★ width と justify-self の両方が要る。列が 1fr に変わる 1023px 以下で、
     これが無いと枠が列幅いっぱい（実測 775px）に伸びる */
.newsrow__cat {
  width: 130px;
  justify-self: start;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink-3);
  border: 1px solid var(--line-strong);
  padding: 8px 0;
  text-align: center;
}
.newsrow__title { font-size: var(--text-news-title); line-height: 1.7; color: var(--ink); }
.newsrow__more {
  font-size: var(--text-date);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-nav-footer);
  color: var(--ink-3);
  white-space: nowrap;
}
@media (hover: hover) {
  .newsrow:hover { background: var(--card-hover); border-bottom-color: var(--line-strong); }
}
@media (max-width: 767px) {
  /* 06 第9章2節: 日付を見出しの上に。区分も上段に置く */
  .newslist { padding: 64px var(--pad-x) 56px; }
  .newsrow { grid-template-columns: auto auto; gap: 10px 16px; }
  .newsrow__title { grid-column: 1 / -1; }
  .newsrow__more { grid-column: 1 / -1; }
}

/* 個別記事 */
/* ── ニュース個別（カンプ Arkad News Detail.dc.html 実測）──
   ★ 3カラム 260 / 648 / 260、gap 80。.cols（260 / 988）ではない。
     本文が 648px に収まるので、.block__p のような上限は要らない。
   ★ 下余白は 0。すぐ下に「他のニュース」の節が続く */
.article {
  display: grid;
  grid-template-columns: var(--col-label) 648px var(--col-label);
  gap: var(--gap-col);
  align-items: start;
  padding: 104px var(--pad-x) 0;
}
/* 260 + 80 + 648 + 80 + 260 = 1328。これは 1440px でしか収まらないので、
   狭くなったら順に畳む。畳まないと本文が固定幅のまま画面からはみ出す */
@media (max-width: 1439px) {
  /* 目次を本文の下へ回す（左のラベル列はそのまま） */
  .article { grid-template-columns: var(--col-label) minmax(0, 1fr); }
  .article__main { max-width: 648px; }
  .article__aside { grid-column: 2; margin-top: 56px; }
}
@media (max-width: 899px) {
  .article { grid-template-columns: 1fr; gap: 44px; }
  .article__aside { grid-column: auto; margin-top: 0; }
}
/* 左カラム。公開日と区分は項目名を左・値を右に置く（会社概要テーブルと同じ組み方） */
.article__meta {
  margin: 34px 0 0;
  border-top: 1px solid var(--line-strong);
}
.article__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-size: 0.75rem;
  line-height: 1.9;
}
.article__meta dt { font-weight: 400; color: var(--ink-3); }
.article__meta dd { margin: 0; color: var(--ink); font-feature-settings: "tnum"; }
/* 一覧へ戻る／外部リンク。カンプは 11.5px で、本文の行送りを持たない。
   段落として置くと行ボックスの余白で位置が下にずれる */
.article__back,
.article__ext { margin-top: 28px; line-height: 1; }
.article__back .link,
.article__ext .link { font-size: var(--text-label-sec); }

.article__h1 {
  margin-bottom: 46px;
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: pretty;
}
/* 段落の間は 34px。カンプは本文の塊を flex+gap で組んでいるが、
   段落が @each で並ぶだけなので隣接セレクタで同じ間隔を作る */
.article__lead { color: var(--ink-2); }
.article__lead + .article__lead { margin-top: 34px; }
.article__h2 {
  margin: 56px 0 22px;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink);
}
.article__p { color: var(--ink-2); }
.article__p + .article__p { margin-top: 34px; }

/* 記事内の表。会社概要の .dtable（200/660）とも職種ページ（180/540）とも別で、
   本文の 648px に収まる 160 + gap32 + 456。文字も 13.5px と一回り小さい */
.article__main .dtable {
  margin-bottom: 26px;
  border-top-color: var(--line-strong);
}
.article__main .dtable__row { grid-template-columns: 160px 1fr; gap: 32px; padding: 18px 0; }
.article__main .dtable__key,
.article__main .dtable__val { font-size: var(--text-body-sm); line-height: 2.1; }

/* 問い合わせ先の枠。上の h2 の margin-bottom 22px が間隔になるので自前の上余白は要らない */
.article__desk {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: 0;
  padding: 28px 30px;
}
.article__desk .link { margin-top: 0; }

/* 右カラム。この記事の項目（目次）と外部リンク。
   ★ 粘らせる対象は .article__aside 自身であって、中の .toc ではない。
     .article は align-items:start なので aside の高さは中身ぶんしかなく、
     中の要素に sticky を付けても動く余地が無い（実際そうなっていた）。
     グリッド項目である aside に付ければ、粘る範囲は行の高さ＝本文の長さになる。
   ★ 1439px 以下では aside が本文の下に回るので粘らせない */
@media (min-width: 1440px) {
  .article__aside { position: sticky; top: 24px; }
}
.toc2__title {
  display: block;
  margin-bottom: 18px;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.toc2 ul { margin: 0; padding-left: 20px; }
.toc2 li { font-size: var(--text-caption); line-height: 2.2; }
/* 行いっぱいを押せるようにする（カンプも幅いっぱいのブロック） */
.toc2 a { display: block; color: var(--ink-2); }
/* カンプは罫線を引かない。問い合わせ枠のすぐ下に小さく置くだけ */
.article__note {
  margin-top: 34px;
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--ink-3);
}

/* ── プレスキットのロゴ配布カード（/press/ 02 / ASSETS） ─────────
   カンプ: プレビュー枠（余白60px・中央寄せ・下罫線）＋ 名称 ＋ 説明 ＋ DLリンク。
   反転版はカンプが filter:invert(1) を使っているが、実物の反転版SVGがあるので
   そちらを使う（CSSフィルタを使わない方針＝04 第8章3節と整合する）。 */
/* ── /press/ 03/GUIDELINES の使用ルール（カンプ実測）──
   420px × 2 の2段組み。列 60px・行 28px。番号も行の罫線も付けない。
   /recruit/ や /about/ の .vlist（番号付きの縦一列）とは別のコンポーネント */
.rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
  row-gap: 28px;
  max-width: 900px;
}
.rules__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 26px;
}
.rules__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.7; color: var(--ink); }
.rules__body { font-size: var(--text-body-sm); line-height: 2.1; color: var(--ink-2); }
/* 本文中のリンク。カンプは下線も色差も無く本文と見分けが付かないので下線を残す
   （WCAG 1.4.1。ヒーローの注記と同じ扱い） */
.rules__body a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 899px) {
  .rules { grid-template-columns: 1fr; row-gap: 0; }
}

/* ロゴの配布（カンプ実測）。見出し→カードは 18px、カード→次の見出しは 44px */
.assetgroups { display: flex; flex-direction: column; gap: 18px; }
.assets + .assets__h3 { margin-top: 26px; }
/* 小見出しはラベル扱い。20px の見出しではない */
.assets__h3 {
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.assets { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.asset {
  border: 1px solid var(--line-strong);
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.asset__preview {
  padding: 60px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line-soft);
}
/* 反転版は暗い面の上に置かないと見えない */
.asset__preview--dark { background: var(--ink-face); border-bottom-color: var(--ink-face); }
.asset__preview img { width: auto; }
.asset__preview--lg img { height: 44px; }
.asset__preview--sm img { height: 36px; }
/* カード下部は「名前＋説明」と「ダウンロード」を左右に振り、ベースラインで揃える */
.asset__body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 22px 26px;
}
.asset__name {
  margin-bottom: 6px;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}
.asset__note { font-size: var(--text-label-sec); line-height: 1.8; color: var(--ink-3); }
.asset__dl {
  flex: none;
  display: inline-block;
  font-size: var(--text-label-sec);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-nav-footer);
  color: var(--ink);
  border-bottom: 1px solid var(--underline);
  padding-bottom: 6px;
}
@media (hover: hover) { .asset__dl:hover { opacity: .6; } }
@media (max-width: 767px) { .assets { grid-template-columns: 1fr; } }

/* ── 職種別詳細 01/JOB の雇用形態タグ ──
   ボタンと紛れないよう pill にしない。矩形の細罫で置く（04 第7章） */
.tags { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tags li {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ============================================================================
   コンテンツ幅の上限（04 第9章 = 1328px）
   ----------------------------------------------------------------------------
   ★ **これが無いと、設計幅1440pxより広い画面でセクションの中身が全幅に伸びる。**
     カンプは 260px + gap 80px + 988px = 1328px で中身を止め、左右に余白を残す。
     1749px の画面で照合したところ、実装のコンテンツ列が 1297px（カンプは 988px）に
     なっており、これがカンプとの見た目の差の主因だった。

   ★ padding で実装する理由。背景（--paper-alt の網掛け・反転面）は全幅のまま
     残す必要があるため、セクションに max-width を掛けることはできない。
     max() を使うと 1440px 以下では従来どおり 56px になり、既存の照合結果は変わらない。

   ★ ファイル末尾に置く理由。.approach / .structure / .services は padding の
     ショートハンドで左右パディングを設定しており、詳細度が同じ（0,1,0）なので
     後に書いたほうが勝つ。
   ========================================================================== */
.wrap,
.stats,
.cta__panel {
  padding-inline: max(var(--pad-x), calc((100% - var(--content-w)) / 2));
}
/* CTAは2枚のパネルが並ぶため、外側だけを寄せて中央の罫線位置を保つ */
.cta__panel:first-child { padding-right: var(--pad-x); }
.cta__panel:last-child { padding-left: var(--pad-x); }

/* ── /recruit/ ENTRY（このページ唯一の反転面。CLAUDE.md 絶対ルール） ──
   カンプ: 全幅の #0d0d0d、260px ラベル列 ＋ 614px 本文 / 294px 行動 */
.entry {
  /* 左右は .wrap のコンテンツ幅の上限に任せる。ショートハンドで書くと上書きしてしまう */
  padding-block: var(--pad-y-face);
  background: var(--ink-face);
}
.entry__grid { display: grid; grid-template-columns: 1fr 294px; gap: 80px; align-items: end; }
.entry__h2 {
  font-size: var(--text-h2-face);
  font-weight: 500;
  line-height: 1.7;              /* 04 第4章 --text-h2-face は 32px / 1.7 */
  color: var(--face-heading);
}
/* 04 第4章 --text-body-face は 13.5px / 2.2 */
.entry__h2 + .entry__p { margin-top: 26px; }
.entry__p { max-width: 520px; font-size: var(--text-body-face); line-height: 2.2; color: var(--face-body); }
.entry__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* 主CTA は塗りではなく白の細枠。反転面の上なので塗ると強すぎる（カンプ） */
.entry.face .cta__button { gap: 12px; padding: 18px 32px; }
/* 副導線はカンプが .68 の薄色＋.3 の下罫。.face .link の既定より一段落とす */
.entry.face .link {
  font-size: var(--text-caption);
  letter-spacing: .08em;
  color: var(--face-body);
  border-bottom-color: rgba(255, 255, 255, .3);
  padding-bottom: 6px;
}
@media (max-width: 767px) {
  .entry__grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ── 反転面の上に置く汎用パーツの色 ──
   ★ .label（--ink-3）と .link（--ink）は明るい面を前提にした色である。
     反転面にそのまま置くと 1.08:1 / 1.00:1 になり、事実上見えない。
     /recruit/ の ENTRY で実測して判明した。--face-* 系に振り替える（04 第10章・検収 8.1） */
/* 反転面のラベルは rgba(255,255,255,.5)。トップの 04/RECRUIT・/recruit/ の ENTRY・
   職種ページの 07/ENTRY の3カンプとも同じ値である。
   #0d0d0d の上では実効 #868686 で 5.4:1。11.5px の通常サイズに必要な 4.5:1 を満たす */
.face .label { color: rgba(255, 255, 255, .5); }
.face .link {
  color: var(--face-heading);
  border-bottom-color: rgba(255, 255, 255, .34);
}
@media (hover: hover) {
  .face .link:hover { border-bottom-color: var(--face-heading); }
}

/* ============================================================================
   /recruit/ の縦リズムと区切り罫（カンプ実測 = design/Arkad Recruit.dc.html）
   ----------------------------------------------------------------------------
   ★ 汎用クラス（.approach 112/104・.structure 130/118・.services 88/88）を
     流用したため、網掛けをカンプに合わせて付け替えた副作用で縦パディングまで
     入れ替わっていた。/recruit/ に限ってカンプの実測値で上書きする。
     04 第9章の縦パディング表はトップページの各ブロックの値であり、
     /recruit/ の各節については規定していないため、カンプを採る。
   ========================================================================== */
.page-recruit > section { padding-block: 88px; }
.page-recruit > .page-hero { padding-block: 118px 112px; }
.page-recruit > .approach[aria-labelledby="business-h2"] { padding-block: 130px 118px; }
.page-recruit > .entry { padding-block: 96px; }

/* 区切り罫。カンプは 01〜08 のすべての節の上辺に 1px を引いている。
   ヒーローと ENTRY（反転面）には引かない */
/* 節の区切り罫はカンプが rgba(0,0,0,.10)＝--line-soft。--line（.12）ではない */
.page-recruit > section { border-top: 1px solid var(--line-soft); }
.page-recruit > .page-hero,
.page-recruit > .entry { border-top: 0; }

/* 職種カードの本文。カンプは 15.5px。04 の --text-body-sm（13.5px）は
   「カード内の本文」のトークンだが、/recruit/ の職種カードはこのページの主役であり、
   カンプが本文サイズを与えている。他ページのカードは 13.5px のまま */
.page-recruit .service__body { font-size: var(--text-body); line-height: 2.1; }

/* ── 段落より一段大きい宣言文（カンプ 07/PEOPLE の「奪い合う人ではなく、分け与えられる人。」）──
   04 の --text-h2-cta（26px）を使う。見出しではないので h2 にはしない */
.statement {
  font-size: var(--text-h2-cta);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .01em;
  color: var(--ink);
}

/* ── 番号付きリストの本文 ──
   カンプは 15.5px / --ink-3。13.5px（--text-body-sm）は「カード内の本文」の
   トークンであり（04 第4章）、.vlist はカードではない */
.vlist__body { font-size: var(--text-body); line-height: 2.05; color: var(--ink-3); }

/* ============================================================================
   固定幅の第2カラムが本文を潰す問題への対応
   ----------------------------------------------------------------------------
   ★ 04 第11章3節はブレークポイントを 768px と 1024px の2点としているが、
     これは**共通2カラム（260px / 1fr）の骨格**についての規定である。
     その内側にさらに固定幅の第2カラムを持つブロック
     （FOUNDATION の資本関係図 330px、ENTRY の行動 294px）は、
     骨格が畳まれる 768px より*ずっと手前*で本文側が潰れる。
     実測: 1100px でミッション本文 58px、900px で 36px（1行1文字）。
     767px 以下では正常だったため、SPの検査だけでは見つからなかった。
   ========================================================================== */
@media (max-width: 1200px) {
  .approach__grid,
  .entry__grid { grid-template-columns: 1fr; gap: 44px; }
  /* 1列に落ちたとき、図が本文幅いっぱいに伸びないよう上限を置く（カンプは330px） */
  .orgtree { max-width: 420px; }
  .entry__actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 28px; }
}
@media (max-width: 1023px) {
  /* ラベル150px＋本文 の行も、この幅では本文が短くなりすぎる */
  .mission__row { grid-template-columns: 1fr; gap: 10px; }
  .mission__label br { display: none; }
  /* ツール3群は2列に。1列だと縦に伸びすぎる */
  .stack { grid-template-columns: 1fr 1fr; }
  .stack__group:nth-child(odd) { padding-left: 0; }
  .stack__group:nth-child(even) { padding-right: 0; border-right: 0; }
}

/* ── /recruit/ 01/BUSINESS（カンプ実測）──
   ★ トップページの実績数値とは寸法が違う。トップは 38px 30px 34px / ラベル11.5px、
     /recruit/ は 34px 26px 30px / ラベル11px。ページごとに別の値なのでここで上書きする。
   ★ セルの左余白は 26px。ただし先頭セルだけ 0 で、節の左端に揃う */
.page-recruit .stats__grid { margin-top: 70px; }
.page-recruit .stats__cell { padding: 34px 26px 30px; }
/* 4列のときは1番目が左端・4番目が右端。2列以下は上のメディアクエリが上書きする */
.page-recruit .stats__cell:first-child { padding-left: 0; }
.page-recruit .stats__cell:last-child { padding-right: 0; }
@media (max-width: 899px) {
  .page-recruit .stats__cell { padding-left: 0; padding-right: 0; }
}
.page-recruit .stats__label { font-size: var(--text-note); line-height: 1.5; margin-bottom: 16px; }
/* /recruit/ だけ基準日の上余白が 14px（トップは 16px） */
.page-recruit .stats__as-of { margin-top: 14px; }
.page-recruit .stats__grid + .block__links { margin-top: 44px; }
/* 段落間はカンプが 30px（.block__main の既定 34px ではない） */
.page-recruit .block__main { gap: 30px; }

/* ============================================================================
   中間幅（768〜1200px）の破綻をまとめて解消する
   ----------------------------------------------------------------------------
   ★ 実装当初、レスポンシブの指定を 767px の1点しか置いていなかった。
     04 第11章3節は 768px と 1024px の2点を求めており、**1024px の指定が丸ごと
     欠けていた**。固定幅カラムを持つブロックは 768px より手前で潰れるか溢れる。
     実測（修正前）: /about/ @768px で scrollWidth 777px、/business/ @800px で 874px、
     / @800px で 870px、/news/ @800px で 826px。
   ★ 320px でも横スクロールを出さない（検収 8.3.3）。実績数値は 480px 未満で1列にする。
   ========================================================================== */
@media (max-width: 1023px) {
  /* 事業構造図の「180px + 内容」 */
  .layer { grid-template-columns: 1fr; gap: 14px; }
  /* /about/ の PRACTICE 3枚 */
  .practice { grid-template-columns: 1fr; gap: 20px; }
  /* PRODUCTS の非対称グリッド（04 第11章3節） */
  .business__grid { grid-template-columns: 1fr; }
  /* ニュース行「日付 / 分類 / 見出し / →」。→ は見出しの下へ回す */
  .newsrow { grid-template-columns: 112px 1fr; gap: 8px 24px; }
  .newsrow__title { grid-column: 1 / -1; }
  .newsrow__more { grid-column: 1 / -1; }
  /* 会社概要の facts（左右振り分け）を縦積みに */
  .facts__row { flex-direction: column; gap: 4px; }
}
/* ★ 3指標なので 2列にすると必ず1つ余る。3列か1列のどちらかにする。
   1列に落とす幅は実測で決めた。「15,000名突破」は 52px＋17px の nowrap で約226px 必要。
   セルの左右余白60pxと画面の左右112pxを足すと 3列には約 898px 要る（768px で11px はみ出した）。 */
@media (max-width: 899px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stats__cell { border-right: 0; padding-left: 0; padding-right: 0; }
  .stats__cell + .stats__cell { border-top: 1px solid var(--line-soft); }
}

/* ── 中間幅の追加対応（1024px 未満）──
   ★ .block__body は flex 行で、.block__side が width:330px / flex:none のため、
     .block__main（flex:1）が幅を失う。実測: 800px の画面で本文 38px（1行1文字）。
   ★ .service / .services__pair は 1fr 1fr のため、1列あたり 300px を切ると
     サービス名（20〜34px）が枠から溢れる。実測: /business/ @800px で scrollWidth 874px。 */
@media (max-width: 1023px) {
  .block__body { flex-direction: column; gap: 44px; }
  .block__side { width: 100%; max-width: 420px; }
  .service { grid-template-columns: 1fr; gap: 28px; }
  .services__pair { grid-template-columns: 1fr; }
}

/* ── /recruit/ ヒーローの内側 2カラム（カンプ: 1fr / 466px、gap 70px、下端揃え）── */
/* ★ 1fr 466px のままだと、写真が466pxを譲らないため**本文側が潰れる**。
   実測: 1100px の画面で h1 が 119px（1行3文字）になっていた。
   本文側に最小幅430px（リードの max-width と同じ）を与え、**先に写真を縮める**。
   写真が300pxを切る幅（≒1260px）からは縦積みにする */
.phero { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(0, 466px); gap: 70px; align-items: end; }
/* カンプ: h1 の下 32px、リードは max-width 430px、CTA は上 38px の黒ピル */
.phero .page-hero__h1 { margin-bottom: 32px; }
.phero__lead { max-width: 430px; font-size: var(--text-body); line-height: 2.05; color: var(--ink-2); text-wrap: pretty; }
.phero .hero__cta { margin-top: 38px; }
.phero__photo { width: 466px; height: 330px; object-fit: cover; }
@media (max-width: 1260px) {
  .phero { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .phero__photo { width: 100%; max-width: 466px; height: auto; aspect-ratio: 466 / 330; }
}

/* ── /recruit/ 職種カード（カンプ実測）──
   全幅の枠に 1fr / 300px。右列は左罫で仕切り、雇用形態タグと給与を置く。
   ★ 以前は .services__pair（1fr 1fr）に入れていたため、1件しかない職種が
     画面の半分の幅の縦長カードになっていた（カンプは横長の全幅） */
.joblist > * + * { margin-top: 24px; }
.jobcard {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: center;
  border: 1px solid var(--line-strong);
  padding: 46px 44px;
}
/* 「詳細を見る →」はカンプでは下線付きのテキスト導線（.link と同じ体裁） */
.jobcard .card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ink);
  border-bottom: 1px solid rgba(0, 0, 0, .3);
  padding-bottom: 7px;
}
.jobcard__label { font-size: var(--text-label); letter-spacing: var(--ls-label-card); margin-bottom: 18px; }
/* カンプは 28px。--text-h3（24px）ではない */
.jobcard__title { margin-bottom: 16px; font-size: 1.75rem; font-weight: 500; line-height: 1.5; letter-spacing: .01em; color: var(--ink); }
/* 「詳細を見る →」を右列へ移したので、概要は左列の最後になる（下余白なし） */
.jobcard__summary { font-size: var(--text-body); line-height: 2.1; color: var(--ink-2); }
/* 子を縦に並べる。インラインのままだと、最後の導線が親の行送り（2.05）の
   行ボックスに乗って余分な高さが付く（実測 +10px） */
.jobcard__side { display: flex; flex-direction: column; align-items: flex-start; border-left: 1px solid var(--line-soft); padding-left: 40px; }
.jobcard__key {
  display: block;
  margin-bottom: 10px;
  font-size: var(--text-note);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.jobcard__salary { margin-bottom: 26px; font-size: 1.25rem; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }
/* 単位（万円）は 13px に落とす */
.jobcard__salary span { font-size: 0.8125rem; letter-spacing: 0; margin: 0 2px 0 3px; }
/* 雇用形態タグの小型版（カンプ: 8px 14px / 11.5px / .06em / --ink-3） */
.tags--sm { margin: 0 0 22px; }
.tags--sm li { padding: 8px 14px; border-radius: 999px; font-size: var(--text-nav); font-weight: 500; line-height: 1; letter-spacing: .06em; color: var(--ink-3); }
/* ★ 1fr / 300px は、カード全体が 700px を切ると左列（本文）が潰れる。
   実測: 1024px の画面で本文 122px。骨格の 1024px より手前で畳む */
@media (max-width: 1200px) {
  .jobcard { grid-template-columns: 1fr; gap: 30px; padding: 34px 28px 38px; }
  .jobcard__side { border-left: 0; border-top: 1px solid var(--line-soft); padding-left: 0; padding-top: 28px; }
}

/* ── /recruit/ 05/ENVIRONMENT の定義表（カンプ実測）──
   ★ .dtable は /company/profile/ と職種ページでも使うが、カンプはこの節だけ
     項目名と値を**同じ 15.5px/2.1** にしている（項目名は色だけ薄い）。
     会社概要側は 12.5px / 13.5px のままでよい（各ページの照合時に確認する）。
   ★ 表全体を 820px で止め、行は 180px / 600px。罫線は各行の上辺、最終行のみ下辺も */
.page-recruit .dtable { max-width: 820px; border-top: 0; }
.page-recruit .dtable__row {
  grid-template-columns: 180px minmax(0, 600px);
  gap: 40px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.page-recruit .dtable__row:last-child { border-bottom: 1px solid var(--line); }
.page-recruit .dtable__key,
.page-recruit .dtable__val { font-size: var(--text-body); line-height: 2.1; }
.page-recruit .dtable__key { color: var(--ink-3); }
.page-recruit .dtable__val { color: var(--ink-2); }
@media (max-width: 1023px) { .page-recruit .dtable__row { grid-template-columns: 1fr; gap: 6px; } }

/* ── /recruit/ 02/FOUNDATION の縦リズム（カンプ実測）──
   ★ この節の本文は .block__main に入っていないため、段落間が 0 になっていた。
     カンプは各段落に margin-bottom:30px、ミッションの後の締め文に margin-top:28px、
     導線に margin-top:40px を置いている */
.page-recruit .approach__grid .block__p { margin-bottom: 30px; }
.page-recruit .approach__grid .mission + .block__p { margin-top: 28px; margin-bottom: 0; }
.page-recruit .approach__grid .block__links { margin-top: 40px; }

/* ── /recruit/ 04/VALUES の番号付きリスト（カンプ実測）──
   ★ .vlist は複数ページで使い回しているが、カンプはページごとに体裁を変えている。
       /recruit/ … 44px列 / gap28 / padding 32px 0 / baseline揃え / 番号 24px -.01em
       /about/   … 60px列 / gap40 / padding 36px 0 / start揃え  / 番号 11px .16em
       /press/   … そもそも番号なしの 1fr 1fr グリッド
     ここでは /recruit/ の値だけを当てる。他ページは各ページの照合時に合わせる */
.page-recruit .vlist__item {
  grid-template-columns: 44px 1fr;
  gap: 28px;
  padding: 32px 0;
  align-items: baseline;
}
.page-recruit .vlist__no {
  font-size: var(--text-h3);      /* 24px */
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink-3);
}
.page-recruit .vlist__title { margin-bottom: 14px; }

/* ★ この2つは 1023px の2列指定より**後ろ**に置く必要がある。
   同じ詳細度なので、前に書くと後勝ちで潰される（実際に 767px 以下でも2列のままだった） */
@media (max-width: 767px) {
  .stack { grid-template-columns: 1fr; }
  .stack__group {
    padding: 26px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .stack__group:nth-child(even) { padding-left: 0; }
  .stack__group:last-child { border-bottom: 0; }
}

/* ── /recruit/ 07/PEOPLE（カンプ実測）──
   枠は 640px。宣言文の下は 34px。カンプの意図的な改行を活かすが、
   SP では強制改行が「1行3文字」のような行を作るため無効にする */
.people { max-width: 640px; }
.people .statement { margin-bottom: 34px; }
@media (max-width: 767px) {
  .people br { display: none; }
}

/* ── 選考プロセス（/recruit/ 09/PROCESS ・職種ページ 06/SELECTION）──
   カンプ実測: 4カラム・上罫 .14・縦罫 .10。番号 24px、段階名 15.5/1.8、目安 12px/1.7。
   左右の余白は「行の中での位置」で決める（実績数値・AIツールと同じ考え方） */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.steps__item { padding: 32px 26px 34px; border-right: 1px solid var(--line-soft); }
.steps__item:first-child { padding-left: 0; }
.steps__item:last-child { padding-right: 0; border-right: 0; }
.steps__no {
  display: block;
  margin-bottom: 22px;
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink-3);
}
.steps__name { display: block; font-size: var(--text-body); font-weight: 500; line-height: 1.8; color: var(--ink); }
.steps__note { display: block; margin-top: 12px; font-size: 0.75rem; line-height: 1.7; color: var(--ink-3); }
@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps__item:nth-child(odd) { padding-left: 0; }
  .steps__item:nth-child(even) { padding-right: 0; border-right: 0; }
  .steps__item:nth-child(3),
  .steps__item:nth-child(4) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 559px) {
  .steps { grid-template-columns: 1fr; }
  .steps__item { padding-left: 0; padding-right: 0; border-right: 0; }
  .steps__item + .steps__item { border-top: 1px solid var(--line-soft); }
}

/* ── /recruit/ VOICE（メンバーの声）──
   カンプは説明文＋Wantedly への導線だけだったが、記事2本を受領したため一覧を足した。
   カンプに対する追加であり、体裁は他の一覧（ニュース行）に合わせている */
/* カンプ: 上下96px・区切り罫なし。.page-recruit > section（88px・罫あり）を上書きする */
.page-recruit > .voice { padding-block: 96px; border-top: 0; }
.voice__lead { max-width: 600px; font-size: var(--text-body); line-height: 2.05; color: var(--ink-2); text-wrap: pretty; }
.voice__list { margin-top: 34px; border-top: 1px solid var(--line); }
/* 本文の流れの中に1件だけ置く場合（/company/group/ 02/HISTORY）。
   親の .block__main が gap 34px を持っているので、自前の上余白は要らない */
.voice__list--single { margin-top: 0; }
/* 一覧の最終行の罫線に導線が張り付いていた。カンプのリード→導線と同じ 32px を空ける */
.voice__list + .block__links { margin-top: 32px; }
.voice__list li { border-bottom: 1px solid var(--line); }
.voice__list a { display: block; padding: 24px 0; }

/* サムネイル付き。画像は左に固定幅で置き、テキストが残りを取る。
   ★ 画像は装飾（alt=""）。記事名・氏名・役職はテキストで隣にある。
   ★ .voice__list a と詳細度が同じ（0,1,1）なので、必ずその「後」に置くこと。
     前に置くと display:block に負けて画像とテキストが縦に積まれる */
.voice__list--thumb a { display: flex; align-items: flex-start; gap: 24px; }
.voice__thumb {
  display: block;
  flex: none;
  width: 160px;
  height: 90px;
  object-fit: cover;
}
/* flex の子は既定で min-width:auto。0 にしないと長い記事名で枠を押し広げる */
.voice__text { min-width: 0; }
@media (max-width: 559px) {
  .voice__list--thumb a { gap: 16px; }
  .voice__thumb { width: 96px; height: 54px; }
}
.voice__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
  font-size: var(--text-note);
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ink-3);
}
/* 記事の主体。アルカド以外の記事が混ざるため、日付と並べて先に見せる */
.voice__co { font-weight: 500; }
.voice__title { display: block; font-size: var(--text-body); font-weight: 500; line-height: 1.8; color: var(--ink); }
.voice__who { display: block; margin-top: 8px; font-size: var(--text-caption); line-height: 1.8; color: var(--ink-3); }
@media (hover: hover) {
  .voice__list a:hover .voice__title { border-bottom: 1px solid var(--underline); }
}

/* ── 職種ページ 01/JOB のヒーロー（カンプ実測）──
   内容列を 1fr / 330px に割る。左に見出し・リード・雇用形態・CTA、右に主要条件の要約表。
   /recruit/ のヒーローと同じく、先に右列を縮めて本文を潰さない */
.jhero { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(0, 330px); gap: 70px; align-items: start; }
.jhero__main { display: flex; flex-direction: column; gap: 34px; }
.jhero__h1 { font-size: 2.125rem; font-weight: 500; line-height: 1.6; letter-spacing: .01em; color: var(--ink); }
.jhero__cta { align-self: flex-start; margin-top: 10px; }
/* 雇用形態タグ（大）。/recruit/ の職種カード（.tags--sm）より一回り大きい */
.tags--lg { margin: 0; gap: 16px; }
.tags--lg li {
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ink-2);
}
/* 主要条件の要約表 */
.jhero__facts { border-top: 1px solid var(--line-strong); }
.jhero__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-caption);
  line-height: 1.6;
}
.jhero__row > span:first-child { color: var(--ink-3); white-space: nowrap; }
.jhero__row > span:last-child { text-align: right; color: var(--ink-2); }
.jhero__note { margin-top: 18px; font-size: 0.75rem; line-height: 1.8; color: var(--ink-3); }
@media (max-width: 1260px) {
  .jhero { grid-template-columns: 1fr; gap: 40px; }
  .jhero__facts { max-width: 420px; }
}

/* 職種ページのヒーローはカンプが 118/104（/recruit/ の 118/112 とは別） */
.page-job > .page-hero { padding-block: 118px 104px; }

/* ── 職種ページ 02/WORK（カンプ実測）──
   ★ 本文の枠は 670px。/recruit/ の 640px とは別（.block__p の上限を外す）。
   ★ 小見出しと本文の間は .block__main の gap 34px だけ。
     二重マージンは .block__main > .approach__h3 で骨格側が打ち消し済み */
.page-job > .approach[aria-labelledby="work-h2"] { padding-block: 130px 118px; }
.page-job .block__main { max-width: 670px; }
.page-job .block__main > .block__p { max-width: none; }

/* ── 職種ページ 03/PROCESS（講座が立ち上がるまでの流れ。カンプ実測）──
   選考プロセス（.steps）とは別物。番号ではなく STEP ラベルで、見出しも本文も一回り小さい。
   左右の余白は「行の中での位置」で決める */
.section__lead { margin-top: 24px; font-size: var(--text-caption); line-height: 2.2; color: var(--ink-3); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.flow__item { padding: 34px 24px 30px; border-right: 1px solid var(--line); }
.flow__item:first-child { padding-left: 0; }
.flow__item:last-child { padding-right: 0; border-right: 0; }
.flow__step {
  display: block;
  margin-bottom: 18px;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
.flow__title { margin-bottom: 14px; font-size: 1.0625rem; font-weight: 500; line-height: 1.7; color: var(--ink); }
.flow__body { font-size: 0.8125rem; line-height: 2.1; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 1023px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow__item:nth-child(odd) { padding-left: 0; }
  .flow__item:nth-child(even) { padding-right: 0; border-right: 0; }
  .flow__item:nth-child(3),
  .flow__item:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 559px) {
  .flow { grid-template-columns: 1fr; }
  .flow__item { padding-left: 0; padding-right: 0; border-right: 0; }
  .flow__item + .flow__item { border-top: 1px solid var(--line); }
}

/* 職種ページ 03/PROCESS はカンプが 88/88（.structure の既定 130/118 ではない） */
.page-job > .structure[aria-labelledby="flow-h2"] { padding-block: 88px; }

/* ── 職種ページ 04/PEOPLE（カンプ実測）──
   2×2 のグリッド。番号は付けない（/recruit/ の判断基準とは別の体裁） */
.people2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 60px; }
.people2__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.people2__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.7; color: var(--ink); }
.people2__body { font-size: var(--text-body-sm); line-height: 2.1; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 767px) { .people2 { grid-template-columns: 1fr; gap: 24px; } }

/* ── 職種ページ 05/REQUIREMENTS（カンプ実測）──
   ★ /recruit/ の 05/ENVIRONMENT（15.5px・180/600・上限820px）とは別の値。
     こちらは 13.5px・180/540・上限760px。同じ .dtable でもページごとに違う。
   ★ 罫線は各行の上辺。1行目だけ .14 で、2行目以降は .12 */
.page-job > .approach[aria-labelledby="req-h2"] { padding-block: 88px; }
.page-job .dtable { max-width: 760px; border-top: 0; }
.page-job .dtable__row {
  grid-template-columns: 180px minmax(0, 540px);
  gap: 40px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  font-size: var(--text-body-sm);
  line-height: 2.1;
}
.page-job .dtable__row:first-child { border-top: 1px solid var(--line-strong); }
.page-job .dtable__row:last-child { border-bottom: 1px solid var(--line); }
.page-job .dtable__key,
.page-job .dtable__val { font-size: inherit; line-height: inherit; }
.page-job .dtable__key { color: var(--ink-3); }
.page-job .dtable__val { color: var(--ink); }
@media (max-width: 1023px) { .page-job .dtable__row { grid-template-columns: 1fr; gap: 6px; } }

/* ── 職種ページ 06/SELECTION（カンプ実測）──
   ★ /recruit/ の 09/PROCESS と同じ4カラムだが、値が一回り小さい。
     番号は 24px ではなく 11px のラベル、段階名は 15.5px ではなく 13.5px。
     カンプがページごとに密度を変えているため、ページ単位で上書きする */
.page-job > .structure[aria-labelledby="sel-h2"] { padding-block: 88px; }
.page-job .steps { max-width: 760px; }
.page-job .steps__item { padding: 28px 24px 26px; border-right-color: var(--line); }
/* 一括指定が先頭・末尾の指定を打ち消すため、後ろで戻す */
.page-job .steps__item:first-child { padding-left: 0; }
.page-job .steps__item:last-child { padding-right: 0; }
@media (max-width: 1023px) {
  .page-job .steps__item:nth-child(odd) { padding-left: 0; }
  .page-job .steps__item:nth-child(even) { padding-right: 0; }
}
@media (max-width: 559px) {
  .page-job .steps__item { padding-left: 0; padding-right: 0; }
}
.page-job .steps__no {
  margin-bottom: 14px;
  font-size: var(--text-label);
  letter-spacing: var(--ls-label-stat);
}
.page-job .steps__name { font-size: var(--text-body-sm); line-height: 1.9; }
.page-job .steps__note { margin-top: 10px; }

/* ── 職種ページ 07/ENTRY（カンプ実測）──
   /recruit/ の ENTRY とは行動の並びが違う。こちらは 1fr / auto・上下中央揃え・
   ボタンは幅いっぱいに伸ばす（stretch）。主行動は**白塗り**、副行動は白枠 */
.entry--job { align-items: center; }
.entry--job .entry__grid {
  grid-template-columns: 1fr auto;
  gap: 70px;
  align-items: center;
}
.entry--job .entry__p { max-width: 560px; margin-top: 0; }
.entry--job .entry__actions { align-items: stretch; gap: 14px; }
.entry__btn {
  display: block;
  padding: 16px 32px;
  border: 1px solid rgba(255, 255, 255, .45);
  font-size: var(--text-cta-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
  color: var(--face-heading);
}
.entry__btn--fill {
  padding: 17px 32px;
  border-color: var(--face-heading);
  background: var(--face-heading);
  font-size: var(--text-cta);
  letter-spacing: .06em;
  color: var(--ink-face);
}
@media (hover: hover) {
  .entry__btn:hover { background: rgba(255, 255, 255, .1); }
  .entry__btn--fill:hover { background: #ffffff; }
}
@media (max-width: 1023px) {
  .entry--job .entry__grid { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .entry--job .entry__actions { align-items: flex-start; }
  .entry__btn { display: inline-block; }
}

/* 職種ページの ENTRY もカンプは 96/96（--pad-y-face の 84 ではない） */
.page-job > .entry { padding-block: 96px; }

/* ── /pushquay/（製品・サポートページ）──
   カンプが無いページ。トークンは他ページと共通のものを使い、独自の色・サイズを作らない */
.pq__lead { max-width: 640px; font-size: var(--text-body); line-height: 2.05; color: var(--ink-2); text-wrap: pretty; }
.pq__stores { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; list-style: none; }
.pq__store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 17px 32px;
  background: var(--ink);
  font-size: var(--text-cta);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--paper);
}
@media (hover: hover) { .pq__store:hover { background: #2a2a2a; } }

/* /pushquay/ の番号付きリスト。/recruit/ の判断基準と同じ体裁を使う
   （このページにカンプは無い。既にある部品を流用し、新しい体裁を作らない） */
.page-pushquay .vlist__item {
  grid-template-columns: 44px 1fr;
  gap: 28px;
  padding: 32px 0;
  align-items: baseline;
}
.page-pushquay .vlist__no {
  font-size: var(--text-h3);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink-3);
}
.page-pushquay .vlist__title { margin-bottom: 14px; }

/* /pushquay/ 03/FOR。2×2 のグリッド。各項目の下辺に罫線（職種ページ 04/PEOPLE と同じ骨格） */
.pq__for { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; list-style: none; }
.pq__for li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-body);
  line-height: 2.05;
  color: var(--ink-2);
}
.pq__for li:nth-child(-n+2) { border-top: 1px solid var(--line-strong); }
@media (max-width: 767px) {
  .pq__for { grid-template-columns: 1fr; }
  .pq__for li:nth-child(2) { border-top: 0; }
}

/* /pushquay/ ヒーローの端末モックアップ。右列330pxに収める */
.pq__mock { width: 330px; height: auto; justify-self: end; }
@media (max-width: 1260px) { .pq__mock { width: 260px; justify-self: start; } }
/* 04/JOIN は3段。.flow は4カラム前提なので3カラムにする */
.page-pushquay .flow { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .page-pushquay .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .page-pushquay .flow { grid-template-columns: 1fr; } }

/* /pushquay/ の画面キャプチャ。手順の直下に置く（色はそのまま。2026-08-08 の方針改訂） */
.pq__shot { width: 100%; max-width: 240px; height: auto; margin-top: 26px; }

/* ── /pushquay/ の手順ブロック（05/SLACK・07/WEBAPP）──
   4カラムに収まらない長い手順は縦に積む。番号は ol の連番で示す */
.pq__brand { margin-top: 28px; width: 28px; height: 28px; }
.pq__steps { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.pq__step { padding: 32px 0 34px; border-bottom: 1px solid var(--line); }
.pq__step .flow__title { margin-top: 14px; }
.pq__ol { margin-top: 16px; padding-left: 0; list-style: none; counter-reset: pq; max-width: 760px; }
.pq__ol li {
  position: relative;
  padding-left: 34px;
  font-size: var(--text-body-sm);
  line-height: 2.1;
  color: var(--ink-2);
}
.pq__ol li + li { margin-top: 8px; }
.pq__ol li::before {
  counter-increment: pq;
  content: counter(pq) ".";
  position: absolute;
  left: 0;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.pq__ol code,
.pq__note code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}
.pq__note { margin-top: 14px; font-size: var(--text-caption); line-height: 2.1; color: var(--ink-3); }
.pq__note--tip { margin-top: 26px; padding-left: 22px; border-left: 1px solid var(--line-strong); }
.pq__note--tip strong { font-weight: 500; color: var(--ink); }

/* ── /pushquay/ 06/OTHERS。準備中の連携先 ── */
.pq__coming { border-top: 1px solid var(--line-strong); list-style: none; }
.pq__coming li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 22px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.pq__coming img { width: 26px; height: 26px; margin-top: 4px; }
.pq__coming-name { font-size: 1.0625rem; font-weight: 500; line-height: 1.7; color: var(--ink); }
.pq__coming-body { margin-top: 8px; font-size: var(--text-body-sm); line-height: 2.1; color: var(--ink-3); }
/* 状態のバッジ。色では示さない（彩度ゼロ）。枠線と文字で示す */
.pq__badge {
  align-self: center;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--text-note);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--ink-3);
}
@media (max-width: 559px) {
  .pq__coming li { grid-template-columns: 26px 1fr; gap: 14px; }
  .pq__badge { grid-column: 2; justify-self: start; margin-top: 12px; }
}

/* ── /pushquay/ 07/WEBAPP。立場ごとに2列 ── */
.pq__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.pq__role { padding-top: 32px; border-top: 1px solid var(--line-strong); }
.pq__role .flow__title { margin-top: 14px; margin-bottom: 0; }
.pq__role .pq__note a { white-space: nowrap; }
@media (max-width: 1023px) { .pq__roles { grid-template-columns: 1fr; gap: 40px; } }

/* ── /pushquay/ 08/FAQ ── */
.pq__faq { border-top: 1px solid var(--line-strong); }
.pq__qa {
  display: grid;
  grid-template-columns: 1fr;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--line);
}
.pq__qa dt {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
}
.pq__qa dd { margin: 0; }
.pq__qa dd p { margin-top: 14px; max-width: 760px; font-size: var(--text-body-sm); line-height: 2.1; color: var(--ink-2); }
.pq__qa dd .pq__note { color: var(--ink-3); }

/* /pushquay/ の CONTACT も反転面。職種ページの ENTRY と同じ骨格を使う */
.page-pushquay > .entry { padding-block: 96px; }

/* ── /about/ 01/VISION（カンプ実測）──
   ★ 節余白は 130/118（.section の既定ではない）。
   ★ 小見出しの下は .block__main の gap 34px だけ（二重マージンは骨格側で打ち消し済み）。
   ★ 本文の折返しは列幅（588px）に任せる。640px の上限は掛けない */
.page-about > .approach[aria-labelledby="vision-h2"] { padding-block: 130px 118px; }
.page-about .block__main > .block__p { max-width: none; }
/* 03/PRACTICE の導入は 670px で止める（01/VISION は列幅588pxに任せる） */
.page-about .services .block__main { max-width: 670px; }
/* 3カラムの下の導線も 34px 空ける（カンプ） */
.page-about .practice + .block__links { margin-top: 34px; }

/* ── /about/ 02/VALUES（カンプ実測）──
   ★ /recruit/ の判断基準とは体裁が違う。番号は 60px 列の小ラベル（11px・上8px）で、
     小見出しは 24px。罫線は**行の下辺**で、囲みの上辺だけ .14。
     同じ .vlist を使い回しているため、ページ単位で上書きする */
.page-about > .structure[aria-labelledby="values-h2"] { padding-block: 88px; }
.page-about > .approach[aria-labelledby="name-h2"] { padding-block: 88px; }
.page-about .services__lead { margin-top: 24px; }
.page-about .vlist { border-top: 1px solid var(--line-strong); }
.page-about .vlist__item {
  grid-template-columns: 60px 1fr;
  gap: 40px;
  padding: 36px 0;
  align-items: start;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.page-about .vlist__item:last-child { border-bottom: 1px solid var(--line); }
.page-about .vlist__no {
  padding-top: 8px;
  font-size: var(--text-label);
  line-height: 1;
  letter-spacing: var(--ls-label-stat);
  color: var(--ink-3);
}
/* 小見出しと本文は 14px の間隔（margin ではなく flex の gap） */
.page-about .vlist__item > div { display: flex; flex-direction: column; gap: 14px; }
.page-about .vlist__title { margin-bottom: 0; font-size: var(--text-h3); line-height: 1.6; }
.page-about .vlist__body { max-width: 660px; font-size: var(--text-body); line-height: 2.05; color: var(--ink-2); }

/* サービス名をロゴで見せる場合（/about/ 03/PRACTICE）。
   見出しの文字（17px/1.7 = 約29px の行）と視覚的な重さを揃える。
   ロゴが無いサービス（Fincs for School）は文字のまま並ぶため、高さを近づける */
.practice__logo { display: block; width: 90px; height: auto; }
.practice__logo--bibro { width: 78px; }

/* ── /company/profile/ 02/CERTIFICATION（カンプ実測）──
   左に説明（588px）、右に登録証の内容を写したカード（330px）。gap 70px。
   ★ カードの中は「項目名は左・値は右揃え」。会社概要テーブル（.dtable）とは別の組み方。
   ★ 行の区切りは2行目以降の「上」に引く。カードの外周にも 1px の枠がある */
.cert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 70px;
  align-items: start;
}
.cert__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
  border: 1px solid var(--line-strong);
  background: var(--card);
}
.cert__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--text-caption);
  line-height: 1.9;
}
.cert__row + .cert__row { padding-top: 14px; border-top: 1px solid var(--line); }
.cert__key { color: var(--ink-3); white-space: nowrap; }
.cert__val { color: var(--ink); text-align: right; }
/* 規格名は1つずつ行を分ける。途中で折り返させない */
.cert__std { display: block; white-space: nowrap; }
@media (max-width: 899px) {
  .cert { grid-template-columns: 1fr; gap: 34px; }
}

/* ── /company/profile/ 03/HISTORY（カンプ実測）──
   ★ 表の幅は 900px。項目 140 + gap 40 + 内容 720。会社概要テーブル（200/660）とは別。
   ★ 年月も内容も 13.5px / 2.0。年月だけ小さくしない。
   ★ 上の罫線だけ --line-strong で濃く、行間と最終行の下は --line。
   .timeline は /company/group/ でも使うのでページを限定して上書きする */
.page-profile .timeline { max-width: 900px; border-top-color: var(--line-strong); }
.page-profile .timeline__row { grid-template-columns: 140px 1fr; }
.page-profile .timeline__when,
.page-profile .timeline__what { font-size: var(--text-body-sm); line-height: 2; }

/* 最終更新日と関連ページの行（カンプは沿革とは別の節。上 0px・下 96px）。
   中身は 900px に収め、日付を左・リンクを右に置いてベースラインで揃える */
.pagemeta { padding: 0 var(--pad-x) 96px; }
.pagemeta__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 28px;
  max-width: 900px;
  padding-top: 24px;
}
.pagemeta .updated { margin-top: 0; font-size: 0.75rem; line-height: 1.7; }
@media (max-width: 767px) {
  .pagemeta__row { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ── 基本情報の節（/company/profile/ 01/PROFILE と /press/ 01/FACTS。カンプ実測）──
   ★ 節に上余白も上罫線も無い。ヒーローの下余白がそのまま間隔になる。
   表そのものの体裁は .dtable--facts が持つ（2ページ共通） */
.page-profile > .approach[aria-labelledby="profile-h2"],
.page-press > .approach[aria-labelledby="facts-h2"] { padding-block: 0 110px; border-top: 0; }
/* /press/ は表の下に関連導線が続く。導線も表と同じ 900px の幅に収める */
.page-press > .approach[aria-labelledby="facts-h2"] > div + div { max-width: 900px; }
.page-press > .approach[aria-labelledby="facts-h2"] .block__links { margin-top: 26px; }