/* ==========================================================================
   Organic HR — styles.css
   設計書: design.md（ベース: IBM DESIGN.md = Carbon Design System）
   白ベース・#002366 一色・完全な直角・影なし（罫線と面替えで階層）。
   戦略コンサルの信頼感 = 規律・抑制・証拠。

   目次
     1. トークン
     2. ベース（リセット・リンク・ユーティリティ・レターヘッド）
     3. タイポグラフィ
     4. ボタン・テキストリンク
     5. ヒーロー（地図・ワイプリビール・サービスライン図）
     6. セクション共通
     7. 事業カード
     8. 差別化の合流図
     9. VibesRadar バンド（レポートカード・公式サイトバナー）
    10. フォトストリップ・写真の共通処理
    11. 会社概要
    12. お問い合わせ（フォーム）
    13. フッター（反転）
    14. 下層ページ
    15. リビール
    16. レスポンシブ
    17. 動きを減らす設定
    18. 印刷
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root {
  /* ブランドの青はこの1系統だけ。CTA・リンク・フォーカス・青バンド・ワイプ */
  --primary: #002366;
  --primary-deep: #001A4D;   /* hover / pressed */
  --primary-soft: #E6E9F0;   /* バナー hover 面 */
  --on-primary: #FFFFFF;

  --ink: #12162B;            /* 主文字色 = 反転フッターの地色 */
  --body: #474D63;
  --mute: #696F84;           /* ラベル灰。白地 4.99:1 / soft-2 上 4.58:1（AA） */

  --hairline: #E8EAF1;
  --hairline-strong: #A6ABC0;
  --field-border: #878DA3;   /* 入力欄の下罫。UI境界 3:1（WCAG 1.4.11） */

  --canvas: #FFFFFF;
  --canvas-soft: #FAFBFD;
  --canvas-soft-2: #F3F5FA;  /* 入力欄の地・タイル hover */

  /* 青バンド上の2段。mute は #002366 上で 7.0:1（AA） */
  --on-dark-body: rgba(255, 255, 255, 0.78);
  --on-dark-mute: rgba(255, 255, 255, 0.65);

  /* 反転フッター（Carbon: ページはチャコールで閉まる） */
  --inverse-ink: #FFFFFF;
  --inverse-body: rgba(255, 255, 255, 0.65);
  --inverse-mute: rgba(255, 255, 255, 0.5);
  --inverse-hairline: rgba(255, 255, 255, 0.15);

  --error: #D92D20;

  --font-sans: "IBM Plex Sans", "IBM Plex Sans JP", system-ui, -apple-system,
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  /* モノ書体はプロダクト面（レポートカード）専用 */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px; --s-lg: 24px;
  --s-xl: 32px; --s-2xl: 40px; --s-3xl: 48px; --s-4xl: 64px; --s-5xl: 96px;

  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-wipe: cubic-bezier(0.65, 0, 0.35, 1);
  --container: 1120px;
}

/* --------------------------------------------------------------------------
   2. ベース
   角丸はこのブランドに存在しない。border-radius はどこにも書かない。
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.01em;  /* Carbon の body +0.16px の和文換算 */
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary); color: var(--on-primary); }

img { max-width: 100%; height: auto; display: block; }
svg { display: block; max-width: 100%; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-deep); }
/* 下線は本文中のリンクだけ。フッターのリスト内リンクには付けない */
p a, dd a, .prose li a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.skiplink {
  position: fixed;
  top: -48px;
  left: var(--s-md);
  z-index: 100;
  padding: var(--s-xs) var(--s-md);
  background: var(--primary);
  color: var(--on-primary);
  transition: top 0.2s var(--e-out);
}
.skiplink:focus-visible { top: var(--s-md); color: var(--on-primary); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-lg);
}

/* アンカー着地時に上端へ張り付きすぎないための余白 */
[id] { scroll-margin-top: 24px; }

/* ボット対策のハニーポット（人間には見せない） */
.hp { display: none !important; }

/* スクリーンリーダーにだけ読ませるテキスト（新規タブ告知など） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 外部リンクの ↗ は行ボックスを膨らませないよう分離して組む */
.ext-arrow { display: inline-block; line-height: 1; font-size: 0.9em; }

/* レターヘッド: グループロゴ｜社名。固定ヘッダーではなく「差出人印」。
   ロゴ単体だと親サイトと誤認されるため、必ず社名とセットで置く */
.site-mark {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-md);
  margin: 0 0 var(--s-4xl);
}
.site-mark img { height: 26px; width: auto; }
.site-mark-name {
  padding-left: var(--s-md);
  border-left: 1px solid var(--hairline-strong);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   3. タイポグラフィ — Carbon の声
   ウェイトの階梯: ヒーロー 300 / セクション見出し 400 / カードタイトル 500。
   太字（600+）で叫ばない。トラッキングは詰めない。
   -------------------------------------------------------------------------- */
h1, h2 {
  margin: 0;
  font-weight: 400;
  font-feature-settings: "palt";
  letter-spacing: 0;
  color: var(--ink);
}
h3, h4 {
  margin: 0;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: 0;
  color: var(--ink);
}

/* ヒーローだけ Light — サイズが線の細さを支える、IBM の署名の一撃 */
.display-xl { font-size: clamp(38px, 5vw, 60px); line-height: 1.25; font-weight: 300; }
/* 見出しの折返しは <wbr> の位置だけ（語中で切らない） */
.display-lg { font-size: clamp(28px, 3.6vw, 38px); line-height: 1.3; word-break: keep-all; }
.display-sm { font-size: 20px; line-height: 1.5; font-weight: 500; }

.lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.85;
  color: var(--body);
}

/* アイブロウ: センテンスケースの14px灰色。大文字化もモノ書体も使わない */
.eyebrow {
  display: block;
  margin: 0 0 var(--s-md);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mute);
}

.muted { color: var(--mute); }

/* --------------------------------------------------------------------------
   4. ボタン・テキストリンク — Carbon の型
   直角・高さ48px・最小幅200px・ラベル左寄せ + 右端に→。
   矢印の「/ ""」は代替テキスト空指定（読み上げに乗せない）。
   1行目の content は旧Firefox用フォールバック。
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xl);
  height: 48px;
  min-width: 200px;
  padding: 0 var(--s-md);
  border: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: left;
  text-decoration: none;   /* p 直下に置かれても下線を受けない */
  cursor: pointer;
  transition: background-color 0.2s var(--e-out), color 0.2s var(--e-out);
}
.btn::after { content: "→"; content: "→" / ""; }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-deep); color: var(--on-primary); }

/* Carbon の tertiary: 白地・青字・1px 青罫。hover で塗り反転 */
.btn-secondary {
  background: var(--canvas);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.btn-secondary:hover { background: var(--primary); color: var(--on-primary); }

/* テキストリンク（→つき）。back-link は privacy の「← トップへ戻る」 */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
.textlink::after { content: "→"; content: "→" / ""; transition: transform 0.2s var(--e-out); }
.textlink:hover::after { transform: translateX(3px); }

.back-link-row { margin: 0 0 var(--s-lg); }
.back-link::after { content: none; }
.back-link::before { content: "←"; content: "←" / ""; transition: transform 0.2s var(--e-out); }
.back-link:hover::before { transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   5. ヒーロー
   構成: レターヘッド → H1（ワイプリビール）→ リード → CTA → サービスライン図。
   背景はドット世界地図と、かすかな青ウォッシュ1枚だけ。
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-4xl) 0 var(--s-5xl);
  background: var(--canvas);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(52% 64% at 86% -12%, rgba(0, 35, 102, 0.07), transparent 70%);
}

/* ドットマトリクスの世界地図。右奥に敷き、端はラジアルマスクで溶かす。
   東京の拠点マークだけが紺で灯る */
.hero-map {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: min(780px, 58vw);
  height: auto;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(72% 72% at 68% 42%, #000 52%, transparent 98%);
          mask-image: radial-gradient(72% 72% at 68% 42%, #000 52%, transparent 98%);
}
.js .hero-map { opacity: 0; transition: opacity 1.2s var(--e-out) 0.6s; }
.js .hero-in .hero-map { opacity: 1; }

.hero-inner { position: relative; }

.hero h1 {
  margin-bottom: var(--s-lg);
  word-break: keep-all;
}

.hero .lead { max-width: 36em; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-top: var(--s-xl);
}

/* サービスライン図: 細罫 + 番号 + サービス名 + 一行定義 */
.hero-framework {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-lg);
  margin-top: var(--s-4xl);
}
.fw-item {
  border-top: 1px solid var(--hairline-strong);
  padding-top: var(--s-sm);
}
.fw-no {
  display: block;
  margin-bottom: var(--s-xs);
  font-size: 12px;
  color: var(--mute);
}
.fw-word {
  margin: 0 0 var(--s-xxs);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  font-feature-settings: "palt";
}
.fw-def {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--body);
}

/* --- 入場の振付（site.js が .hero-in を付ける） -------------------------
   主役はH1のワイプ: コーポレートカラーのバーが走り、通り過ぎた跡に
   コピーが刻印されている。時系列: レターヘッド(0s) → バー1(0.15s) →
   バー2(0.55s) → 下線(1.7s) → リード(1.15s) → CTA(1.3s) → 図(1.45s)。 */
.js .hero-inner > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--e-out), transform 0.65s var(--e-out);
}
.js .hero-in .hero-inner > * { opacity: 1; transform: none; }
/* H1 はワイプが全権を持つ — 汎用フェードから除外 */
.js .hero-inner > h1 { opacity: 1; transform: none; transition: none; }
.js .hero-in .hero-inner > :nth-child(3) { transition-delay: 1.15s; }
.js .hero-in .hero-inner > :nth-child(4) { transition-delay: 1.3s; }
.js .hero-in .hero-inner > :nth-child(5) { transition-delay: 1.45s; }

/* ワイプの部品: バー(::after)が 0→全幅→0 と走り、覆いきった瞬間(50%)に
   文字を出す。display:table = 縮小フィット幅のまま1セグメント1行 */
.hl { position: relative; display: table; }
.js .hl-t { opacity: 0; }
.hl::after {
  content: "";
  position: absolute;
  inset: 4% 0;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.js .hero-in .hl:nth-child(1)::after { animation: hl-wipe 0.9s var(--e-wipe) 0.15s forwards; }
/* 強調句は一拍おいて、少しゆっくり刻印される */
.js .hero-in .hl:nth-child(2)::after { animation: hl-wipe 1.05s var(--e-wipe) 0.55s forwards; }
.js .hero-in .hl:nth-child(1) .hl-t { animation: hl-show 0.01s linear 0.6s forwards; }
.js .hero-in .hl:nth-child(2) .hl-t { animation: hl-show 0.01s linear 1.08s forwards; }

/* 強調句「経営を勝たせる。」— コーポレートカラー + 刻印後に下線が走る */
.hl-em .hl-t { color: var(--primary); }
.hl-em::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0.5em;   /* 句点の下までは引かない */
  bottom: -6px;
  height: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
}
.js .hero-in .hl-em::before { animation: hl-rule 0.55s var(--e-out) 1.7s forwards; }

@keyframes hl-wipe {
  0%   { transform: scaleX(0); transform-origin: left center; }
  50%  { transform: scaleX(1); transform-origin: left center; }
  51%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes hl-show { to { opacity: 1; } }
@keyframes hl-rule { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   6. セクション共通
   区切りは余白ではなく、面替え（canvas ⇄ canvas-soft）と罫線で。
   -------------------------------------------------------------------------- */
.band { padding-block: var(--s-5xl); }
.band-soft { background: var(--canvas-soft); border-block: 1px solid var(--hairline); }

.band-head { max-width: 640px; margin-bottom: var(--s-3xl); }
.band-head .lead { margin-top: var(--s-md); }

/* --------------------------------------------------------------------------
   7. 事業カード（3-up の罫線タイル — 影なし・直角）
   -------------------------------------------------------------------------- */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-lg);
}

.card {
  display: flex;              /* 注記をカード下端に揃えるための縦フレックス */
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-xl);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  transition: background-color 0.2s var(--e-out);
}
/* Carbon のホバー語彙: 背景が一段沈むだけ。動かさない・浮かせない */
.card:hover { background: var(--canvas-soft-2); }

.card h3 { margin-bottom: var(--s-sm); }
.card p { margin: 0 0 var(--s-md); color: var(--body); }

/* .card p (0,1,1) より詳細度を上げて margin/color を通す */
.card p.card-note {
  margin: auto 0 0;           /* 等高カードの下端に揃える */
  padding-top: var(--s-sm);
  font-size: 12px;
  color: var(--mute);
}

/* --------------------------------------------------------------------------
   8. 差別化の合流図: 現場の見立て × 客観データ = 根拠つきの紹介
   hero-framework と同じ罫線図の語彙。演算子も読み上げに意味が通る並び。
   -------------------------------------------------------------------------- */
.merge-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--s-lg);
  align-items: start;
}
.merge-op {
  align-self: center;
  padding-top: var(--s-md);
  font-size: 24px;
  font-weight: 300;
  color: var(--mute);
}

/* --------------------------------------------------------------------------
   9. VibesRadar バンド — ページ唯一の青い面（Carbon の cta-banner に相当）
   仕事は「概要を語り、詳細は公式サイトへ手渡す」こと。ボタンは置かない。
   -------------------------------------------------------------------------- */
.band-dark {
  background: var(--primary);
  color: var(--on-dark-body);
  padding-block: var(--s-5xl);
}
.band-dark h2 { color: var(--on-primary); }
.band-dark .eyebrow { color: var(--on-dark-mute); }
.band-dark p { color: var(--on-dark-body); }
.band-dark a { color: var(--on-primary); }
.band-dark a:focus-visible { outline-color: var(--on-primary); }

.vr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--s-4xl);
  align-items: center;
}

.vr-copy .lead { color: var(--on-dark-body); max-width: 30em; }

/* 公式サイトへのバナーリンク。第三者ロゴは白地タイルの上でだけ使う */
.vr-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--s-lg);
  margin-top: var(--s-xl);
  padding: var(--s-md) var(--s-lg);
  background: var(--canvas);
  transition: background-color 0.2s var(--e-out);
}
.vr-banner:hover { background: var(--primary-soft); }
.vr-banner img { height: 30px; width: auto; }
.vr-banner-note { font-size: 12px; color: var(--mute); white-space: nowrap; }

/* レポートカード: 青バンドに浮かぶ白いプロダクト面。
   モノ書体を使ってよい唯一の場所。具体のラベルは書かない */
.radar-panel {
  background: var(--canvas);
  overflow: hidden;
}
.radar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  padding: 12px var(--s-md);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--mute);
}
.radar-head .radar-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
}
.radar-head .radar-live::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--primary);
}
.radar-body { padding: var(--s-lg) var(--s-lg) var(--s-sm); }
.radar-svg { width: 100%; height: auto; }
.radar-grid { stroke: var(--hairline); fill: none; stroke-width: 1; }
.radar-axis { stroke: rgba(18, 22, 43, 0.06); stroke-width: 1; }
.radar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  fill: var(--mute);
}
.radar-data {
  fill: rgba(0, 35, 102, 0.10);
  stroke: var(--primary);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.radar-dot { fill: var(--primary); }

/* .band-dark p（0,1,1）より詳細度を上げる — 白カード上の文字は必ず灰色 */
.radar-panel .radar-caption {
  margin: 0;
  padding: 0 var(--s-lg) var(--s-md);
  text-align: center;
  font-size: 12px;
  color: var(--mute);
}

/* リビール時に中心からふわっと */
.js .radar-figure {
  opacity: 0;
  transform: scale(0.82);
  transform-origin: center;
  transition: opacity 0.8s var(--e-out) 0.15s, transform 0.8s var(--e-out) 0.15s;
}
.js .rv-in .radar-figure { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   10. 写真 — モノクロ + 紺のヴェールでブランドに馴染ませる（直角・影なし）
   写真は浮かせない: 全幅ストリップとして帯に固定する
   -------------------------------------------------------------------------- */
.photo { position: relative; overflow: hidden; }
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0.14;
  pointer-events: none;
}

/* 無言の全幅フォトストリップ（見出しも主張も付けない区切りの一呼吸） */
.photo-strip { height: clamp(220px, 24vw, 320px); }

/* --------------------------------------------------------------------------
   11. 会社概要 — 2段組の定義リスト（段内を上から下へ読む）
   -------------------------------------------------------------------------- */
.company-table {
  margin: 0;
  columns: 2;
  column-gap: var(--s-4xl);
}
.company-table > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-lg);
  padding-block: var(--s-md);
  border-bottom: 1px solid var(--hairline);
  break-inside: avoid;       /* 行の泣き別れ禁止 */
}
.company-table dt { font-size: 13.5px; color: var(--mute); }
.company-table dd { margin: 0; font-size: 15px; color: var(--ink); }

/* --------------------------------------------------------------------------
   12. お問い合わせ — 左: 見出し + 送信後の流れ / 右: フォーム
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: var(--s-4xl);
  align-items: start;
}
.contact-head h2 { margin-bottom: var(--s-md); }

/* 送信後の流れ（罫線リスト。時間の約束はしない） */
.contact-flow {
  margin: var(--s-xl) 0 0;
  padding: 0;
  list-style: none;
}
.contact-flow li {
  display: flex;
  gap: var(--s-sm);
  padding-block: var(--s-sm);
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--body);
}
.contact-flow .flow-no { padding-top: 2px; font-size: 12px; color: var(--mute); }

.form-card {
  max-width: 640px;
  padding: var(--s-xl);
  background: var(--canvas);
  border: 1px solid var(--hairline);
}
.form-row { display: grid; gap: var(--s-xxs); margin-bottom: var(--s-lg); }
.form-row label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.form-row .req { margin-left: 6px; font-size: 11px; color: var(--mute); }

/* Carbon の入力チェーン: 薄グレー面 + 下罫、focus は 2px 青アウトライン */
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px var(--s-sm);
  border: 0;
  border-bottom: 1px solid var(--field-border);
  background: var(--canvas-soft-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;           /* 16px 未満だと iOS がフォーカス時にズームする */
  transition: border-color 0.2s var(--e-out);
}
.form-row textarea { min-height: 160px; line-height: 1.8; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--mute); }

.form-status { margin-top: var(--s-md); font-size: 13.5px; }
.form-status.is-error { color: var(--error); }
.form-status.is-ok { color: var(--primary); }

/* --------------------------------------------------------------------------
   13. フッター — 反転チャコール（ページで唯一の暗い面、青バンドを除く）
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--inverse-body);
  padding: var(--s-4xl) 0 var(--s-xl);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-xl);
}
.footer-brand .footer-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  font-feature-settings: "palt";
  color: var(--inverse-ink);
}
.footer-brand p { margin: var(--s-sm) 0 0; font-size: 12px; color: var(--inverse-mute); }
.footer-brand .footer-group-line { max-width: 34em; line-height: 1.8; }

.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-lg) var(--s-3xl); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-xs); }
.footer-nav .footer-head {
  margin-bottom: var(--s-xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--inverse-mute);
}
.footer-nav a { color: var(--inverse-body); font-size: 13.5px; }
.footer-nav a:hover { color: var(--inverse-ink); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  margin-top: var(--s-3xl);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--inverse-hairline);
  font-size: 12px;
  color: var(--inverse-mute);
}
/* 404 はリーガル行だけの短いフッター */
.footer-slim .footer-legal { margin-top: 0; padding-top: 0; border-top: 0; }

/* 帰属表記に添えるグループロゴ（黒いSVGを invert で白抜きに） */
.footer-group { display: inline-flex; align-items: center; gap: var(--s-sm); }
.footer-group .group-wordmark { height: 18px; width: auto; opacity: 0.7; filter: invert(1); }

/* --------------------------------------------------------------------------
   14. 下層ページ（privacy / 404）
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--s-3xl);
  background: var(--canvas-soft);
  border-bottom: 1px solid var(--hairline);
}
.page-head .site-mark { margin-bottom: var(--s-xl); }
.page-head h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.35; }
.page-head .lead { margin-top: var(--s-md); max-width: 40em; }
.page-head .page-cta { margin: var(--s-xl) 0 0; }

.prose { max-width: 720px; }
.prose h2 { margin: var(--s-2xl) 0 var(--s-sm); font-size: 20px; }
.prose p, .prose li { color: var(--body); }
.prose ul { padding-left: 1.4em; }
.prose .legal-date { margin-top: var(--s-2xl); }

/* --------------------------------------------------------------------------
   15. リビール（IntersectionObserver — site.js が .rv-in を付ける）
   -------------------------------------------------------------------------- */
.js .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s var(--e-out), transform 0.65s var(--e-out);
  transition-delay: calc(var(--rv-i, 0) * 60ms);
}
.js .rv.rv-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1119px) {
  .vr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--s-2xl); }
}

@media (max-width: 900px) {
  .hero-map { display: none; }
  .company-table { columns: 1; }
  .vr-grid { grid-template-columns: 1fr; }
  .radar-panel { max-width: 420px; margin-inline: auto; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-xl); }
  .merge-grid { grid-template-columns: 1fr; gap: var(--s-sm); }
  .merge-op { padding: 0; }
}

@media (max-width: 767px) {
  .hero { padding: var(--s-4xl) 0; }
  .hero-framework { grid-template-columns: 1fr; gap: var(--s-md); margin-top: var(--s-3xl); }
  .biz-grid { grid-template-columns: 1fr; }
  .band, .band-dark { padding-block: var(--s-4xl); }
  .company-table > div { grid-template-columns: 120px 1fr; gap: var(--s-md); }
  .footer-nav { gap: var(--s-xl); }
}

@media (max-width: 424px) {
  .container { padding-inline: 20px; }
  .hero-cta .btn, .form-card .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   17. 動きを減らす設定 — 動きがなくても全情報に到達できる
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .hero-inner > *, .js .radar-figure, .js .hero-map {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .hl-t { opacity: 1; animation: none; }
  .hl::after { display: none; }
  .hl-em::before { transform: scaleX(1); animation: none; }
}

/* --------------------------------------------------------------------------
   18. 印刷 — このページはPDF保存されて稟議に回る
   未リビール領域が白紙で刷られないよう全文を出し、装飾と操作要素を落とし、
   色面はインク節約のため白地に反転する。
   -------------------------------------------------------------------------- */
@media print {
  .skiplink, .hero-backdrop, .hero-map { display: none; }

  /* リビール前でも全文を刷る（H1のワイプ含む） */
  .js .rv, .js .hero-inner > *, .js .radar-figure, .js .hl-t {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .hl::after { display: none; }
  .hl-em::before { transform: scaleX(1) !important; animation: none !important; }

  /* 操作要素は紙の上では意味を持たない */
  .hero-cta, .vr-banner, #contact form { display: none; }

  /* 青バンドを白地に反転（.vr-copy .lead は詳細度が高いため個別に上書き） */
  .band-dark { background: #fff; color: var(--body); }
  .band-dark h2 { color: var(--ink); }
  .band-dark p, .band-dark .eyebrow, .band-dark .vr-copy .lead { color: var(--body); }
  .radar-panel { border: 1px solid var(--hairline); }

  /* 反転フッターも白地へ */
  .footer { background: #fff; color: var(--body); border-top: 1px solid var(--hairline); }
  .footer-brand .footer-name { color: var(--ink); }
  .footer-brand p, .footer-nav .footer-head, .footer-legal { color: var(--mute); }
  .footer-nav a { color: var(--body); }
  .footer-legal { border-top-color: var(--hairline); }
  .footer-group .group-wordmark { filter: none; opacity: 0.8; }
}