/* リュネット合同会社 コーポレートサイト
   出どころ: Refero Atlassian（ドキュメント/デザインライブラリ/refero/Atlassian_c08ebca5.md）

   2026-09-08: 「日本語コーポレート用に翻訳」する中間層を撤去した。
   意匠9回目が「参照値が適用前に一度翻訳されており、差は全てこの翻訳工程の産物」と
   指摘したため。翻訳の実体は、下記3つの判断としてコメントに残っていた:
     - #101214 は無彩だから面に使わない → #16233d に置換していた
     - radius は0で押し切る → 参照は6段階
     - accent は面に使わない → 参照は全ての primary action を駆動する
   以後、トークン表の値を仕様として直接当てる。値を変えるときは
   Atlassian_c08ebca5.md の該当行を根拠として引く */

/* ── 視覚的重量の序列（この順を崩す変更を入れない） ──────────────
   1. h1        … ページの主役。最大サイズ・最高コントラスト
   2. 面        … .band / .stat-panel / 紺の矩形。構造を作る
   3. h2        … セクションの見出し
   4. 装飾      … .hero::after / ::before の幾何片。地の一部であって図ではない

   4回の改修で2回、順位が反転した。どちらも「参照にある要素を持ってきた」結果:
     - h2 の 820px 上限を外したら、代わりに版面左端が268px空いた
     - 装飾英字を強くしたら h1 より視覚的に重くなった
   要素を足す前に、この序列のどこに入るかを決める。
   装飾英字は 800 ではなく 300、字間は詰めずに広げる（参照は細ウェイト・広字間）。

   序列は「スタイル値」だけでなく「場所」でも守る:
   序列4の要素は序列1〜3の要素と矩形を共有しない。装飾英字を置く側は、
   その要素の行ボックス（font-size x 1.3）ぶんの空き帯を padding で先に確保する。
   実測（2026-09-08）: .page-head の padding-bottom 64px に 83px字（行ボックス108px）
   を bottom:-20px で置いていたため、下層5ページで本文とCTAボタンに
   164〜208px 重なっていた。index だけ padding-bottom 132px で偶然免れていた。

   序列は「サイズ」でも守る:
   序列4の font-size は序列1（h1）を超えない。vw係数も超えない。
   実測（2026-09-08・位置を直した直後）: 装飾英字 83.2px に対し h1 は 46px で
   1.81倍だった。重ならなくなった代わりに、装飾英字がページ冒頭で最も面積を
   持つ独立ブロックへ昇格していた。反転は形を変えて残る。
   ────────────────────────────────────────────── */

:root {
  /* サーフェス5段（Atlassian_c08ebca5.md の Colors 表より）。
     ダークパネルは1色。以前は --navy #16233d と --mid-deep #5c6779 の
     2つの暗い面が併存し、参照の「ダークパネルは #101214 の1色」が割れていた */
  --navy: #101214;
  --navy-deep: #101a2e;
  --ink: #101214;
  --carbon: #292a2e;
  --slate: #1c2b42;
  --indigo: #42526e;
  --white: #ffffff;
  --fog: #f0f1f2;
  /* 中間トーン: 参照 the-lead.biz の #848d9e。白と濃紺の2値を避け、
     目が休む階調を作る。--fog は白との輝度差15しかなく中間層にならない */
  --mid: #848d9e;
  /* 白文字を載せる面。#848d9e は白とのコントラストが2.3:1 しかない */
  --mid-deep: #5c6779;
  --mid-soft: #dcdfe5;
  /* 本文を包む帯。参照の帯は近白で「地の変化」であって図ではない。
     中間層の重みは帯ではなく紺の面（カード・パネル）で作る */
  --band: #f7f7f7;
  --ash: #b7b9be;

  /* 有彩サーフェス。参照が写真無しで成立している機構の一部で、帯の交互リズム
     （white → tint → white → dark）を作る。参照は blue と lavender の2段を
     使うが、Confetti と同じ理由で lavender は採らない。法人向けの信用付けが
     ゴールなので、色は accent とネイビー濃淡に絞る */
  --tint-blue: #e9f2fe;

  /* アクセント1色。参照(Atlassian)は electric blue が全ての primary action を
     駆動する。「色の規律」はアクセントを0にすることではなく1本に絞ること。
     the-lead が無彩色で成立しているのは写真が色を供給しているからで、
     写真1枚しかないこの版面で同じ配色を採ると、色という序列チャンネルが
     丸ごと欠落する（意匠8回目の指摘）。
     Atlassian原文の #1868db は --fog(#eceef1) の上で 4.47:1 と基準を
     わずかに割るため、色相を保ったまま一段暗くした。
     実測: 対白 6.25:1 / 対fog 5.38:1 / 対band 5.83:1 */
  --accent: #155cc4;

  /* Atlassian の6段。影を持たない代わりに角丸が物体感（深度）を担う
     （参照原文: "No drop shadow at scale — the radius and whitespace do the lifting"）。
     角丸0・影無し・枠線ほぼ無しを同時に成立させると深度チャンネルが全閉になる */
  --radius-card: 20px;
  --radius-btn: 28px;
  --radius-pill: 10000px;
  --radius-input: 8px;
  --radius-img: 5px;
  --radius-nav: 2px;

  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;

  --font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-en: 'Manrope', var(--font-ja);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-ja);
  font-size: 16px;
  /* 参照は 1.50。2.0 では縦の情報密度が参照の3/4になる */
  line-height: 1.7;
  color: var(--carbon);
  background: var(--white);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

.nw { white-space: nowrap; }

.inner {
  width: 100%;
  /* 参照(the-lead)の内容幅は 1200px（1280px幅で left=40 / right=1240・実測）。
     padding 24px を内側に持つので、max-width は 1200+48 で内容幅が一致する */
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 本文の行長制御。左端は .inner と同じ64pxに揃える（基準線を1本にする） */
.inner-text > p,
.inner-text > h2,
.inner-text > .note,
.inner-text > .message-box { max-width: 820px; }

/* ヘッダー */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fog);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.logo {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.logo span {
  display: block;
  font-family: var(--font-ja);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--indigo);
  line-height: 1.2;
  margin-top: 2px;
}

.gnav { display: flex; align-items: center; gap: 28px; }

.gnav a {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}

.gnav a:hover { color: var(--indigo); }

/* ヘッダー高さいっぱいのブロックCTA（参照 the-lead.biz の型）
   .gnav a より詳細度を上げないと文字色が --ink に負けて濃紺地に黒文字になる。
   角丸は Atlassian_c08ebca5.md の Named Radii --radius-nav(2px) を当てる。
   ナビ唯一の塗りボタンで、2pxはほぼ知覚できないため
   「the-lead.biz のブロック矩形」という型自体は壊さない */
.gnav a.header-cta {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  padding: 0 28px;
  margin-right: -24px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
  border-radius: var(--radius-nav);
}

.gnav a.header-cta:hover { background: var(--navy-deep); color: var(--white); }



.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform .25s, opacity .25s;
}

/* ファーストビュー */
.hero {
  padding: 88px 0 132px;
  background: var(--white);
  position: relative;
  /* clip はスクロールコンテナを作らないので sticky ヘッダーを壊さない。
     hero は全幅なので、版面外へ出した要素はビューポート右端で切れる */
  overflow: clip;
}

/* 背景に敷く大きな英文（余白を面として設計する） */
/* Confetti。参照は "The visual energy comes entirely from these geometric
   color fragments, not from photographic content" で、写真の代わりに
   幾何片が視覚エネルギーを供給する。写真1枚のこの版面では同じ役割を担う。
   参照のパレットは violet/yellow/blue/green の4色だが、法人向けの信用付けが
   ゴールなので accent とネイビー濃淡に絞る（意匠9回目の指示）。
   参照の規則「白い本文セクションの内側には出さない・機能UIに重ねない」を守り、
   紙面外へ抜ける位置にだけ置く。
   以前ここにあった装飾英字は撤去した。参照の装飾語彙は幾何であって文字ではなく、
   文字は confetti を外した穴を埋める代替物として機能していた（意匠9回目）。
   意匠10回目: hero は白面で暗面と隣接しない。confetti と暗面が一度も
   同じ場所に来ない指摘を受け、片数の予算をフッター側（暗面の角）へ振り、
   hero は1片に減らした */
.hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: 40px;
  width: 300px;
  height: 88px;
  background: var(--accent);
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  align-items: center;
}

.hero-label {
  font-size: 15px;
  color: var(--indigo);
  margin: 0 0 20px;
  padding-left: 40px;
  position: relative;
}

.hero-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--ash);
}

/* 右カラムの濃紺パネル（実績の面） */
.hero-panel {
  background: var(--navy);
  border-radius: var(--radius-card);
  padding: 40px 36px;
  color: var(--white);
  position: relative;
}

/* オフセット矩形。ずらした無彩色の面だけで奥行きを作る（影は使わない） */
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 48px 48px -48px -48px;
  background: var(--mid);
  z-index: -1;
}

.hero-grid > div:first-child { position: relative; z-index: 1; }

.hero-panel-label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ash);
  margin: 0 0 24px;
  text-transform: uppercase;
}

.hero-panel dl {
  margin: 0;
  display: grid;
  gap: 24px;
}

.hero-panel div {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-panel div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.hero-panel dt {
  font-size: 12px;
  color: var(--ash);
  margin: 0 0 6px;
  line-height: 1.6;
}

.hero-panel dd {
  margin: 0;
  font-family: var(--font-en);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
}

.hero-panel dd .unit {
  font-size: 0.46em;
  font-weight: 700;
  margin-left: 4px;
}

.hero h1 {
  /* 参照の display は 80px だが英字前提。日本語で 80px にすると
     hero の h1 が 4行に割れて第1行が「AIと」だけになる（実測）。
     1行に収まる上限として 64px を採る。段差は h2 32px に対し 2.0倍 */
  font-size: clamp(32px, 5.0vw, 64px);
  line-height: 1.42;
  /* 意匠10回目: 参照は40px+で0.0120em(tightened tracking)。0.05emは
     逆方向に約4倍開いていた。0.012emで1280/375を実測し、日本語として
     破綻しないことを確認して採用（詳細は50_制作メモ） */
  letter-spacing: 0.012em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 28px;
}

.hero-lead {
  font-size: clamp(16px, 2.2vw, 18px);
  max-width: 700px;
  margin: 0 0 40px;
  color: var(--carbon);
}

/* 実績数値バー */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--mid-soft);
  overflow: hidden;
  margin-top: 48px;
}

.stat {
  background: var(--white);
  padding: 28px 24px;
  text-align: center;
}

.stat-num {
  font-family: var(--font-en);
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  display: block;
}

.stat-num .unit {
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 3px;
}

.stat-label {
  display: block;
  font-size: 13px;
  color: var(--indigo);
  margin-top: 10px;
  line-height: 1.6;
}

/* セクション共通 */
.section { padding: 112px 0; }
.section-fog { background: var(--fog); }

/* 会社・事業を語る面。ここまで .section-about と .section-biz は HTML に
   書かれていながら CSS に定義が無く、面がほぼ全ページ白一色になっていた。
   有彩サーフェスをこの2つに割り当てて帯のリズムを作る */
.section-about { background: var(--tint-blue); }
/* 意匠10回目: --fog(#f0f1f2)は白との輝度差15しかなく面としては中間層に
   ならない（52行目のコメントで既に自認していた）。--fog の役割は
   Atlassian_c08ebca5.md で "muted button backgrounds" であって面ではない。
   リズムは 白 → 淡青(--tint-blue) → 白 → 黒(数字帯) のコントラストで作る */
.section-biz { background: var(--white); }

.section-dark {
  background: var(--navy);
  color: var(--white);
}

.section-dark h2,
.section-dark .sec-label .ja { color: var(--white); }

.section-dark .sec-label .en { color: var(--ash); }

.section-dark p { color: #d7d9dd; }

.section-dark .info-table .th { color: var(--ash); }
.section-dark .info-table .td { color: var(--white); }
.section-dark .info-table .th,
.section-dark .info-table .td { border-bottom-color: rgba(255, 255, 255, 0.14); }

.note {
  font-size: 13px;
  margin-top: 20px;
}

.sec-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.sec-label .ja {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* アクセントの使用箇所は .sec-label .en と .hero-note b の2つだけ。面には使わない。
   紺面の上は 3.01:1 で本文基準を満たさないので、白地・近白地に限る。
   増やすときは、序列4（装飾）より上の要素に使っていないかを先に見る */
.sec-label .en {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--indigo);
  text-transform: uppercase;
}

.sec-label::before {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--ash);
  flex: 0 0 1px;
  order: 1;
}

.sec-label .en { order: 2; }

h2 {
  /* 序列3は序列1の0.62倍を超えない（全ビューポートで）。
     実測(2026-09-08): 下層1280で 46:42=1.10倍まで潰れていた。参照は約1.7倍。
     サイズの上限だけ決めて h1 との「距離」を決めなかったため、
     装飾英字を縮めた分を h1 に戻さず、版面の字サイズのレンジごと消えていた */
  font-size: clamp(17px, 2.6vw, 32px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 32px;
  /* 意匠10回目: hero h1 と同じ理由で 0.012em に詰める */
  letter-spacing: 0.012em;
}

h3 {
  font-size: clamp(19px, 2.4vw, 22px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
}

p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

/* 事業カード */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.card {
  background: var(--white);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  /* 参照: 明面のカードは角丸20px＋Carbon Edge(#292a2e)の1px枠で
     「容器」として知覚される。radius/border が無いと白地に白カードが
     溶けて枠の無い未完成の面に見える */
  border-radius: var(--radius-card);
  border: 1px solid var(--carbon);
}

/* カード上端の色面（テキストより先に面が来る）。
   参照は写真がフルカラーの階調を供給しているが、こちらは写真が1枚しかない。
   紺を1値で使うと面が単色反復になるので階調を作る。
   --slate は対 --navy で 1.10:1 しかなく知覚できない（実測）。--mid-deep は 2.74:1。
   3枚とも同色にするので「1枚だけ違う」誤読は起きない */
.card-head {
  background: var(--navy);
  color: var(--white);
  padding: 26px 24px 22px;
  /* グリッド行いっぱいに伸びると下部が空白のまま残る（実測: 下6割が空）。
     内容をブロック中央に置いて「未完成の枠」に見えないようにする */
  display: flex;
  flex-direction: column;
  justify-content: center;
}




.card .card-num {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 12px;
}

.card-head h3 {
  color: var(--white);
  margin: 0;
  font-size: clamp(18px, 2.2vw, 21px);
}

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--carbon);
  margin-bottom: 24px;
}

/* 終端のアンカー。参照は primary が accent の pill、
   カード内の副次アンカーは無地＋accent文字 */
.card-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  padding: 10px 0;
  border-radius: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.card-link:hover { color: #0f4fa8; }

.btn .arrow::after,
.card-link .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* 代表メッセージ */
.message-box {
  padding: 44px 0 0;
  margin-top: 40px;
  border-top: 1px solid rgba(16, 18, 20, 0.14);
  position: relative;
}

.message-photo {
  width: 100%;
  border-radius: var(--radius-img);
  display: block;
}

.message-name {
  font-size: 14px;
  color: var(--indigo);
  margin-top: 24px;
  line-height: 1.7;
}

.message-name strong {
  display: block;
  font-size: 17px;
  color: var(--ink);
  font-weight: 700;
}

/* 情報テーブル */
.info-table {
  width: 100%;
  font-size: 15px;
  margin-top: 8px;
}

.info-table .th,
.info-table .td {
  text-align: left;
  padding: 18px 8px;
  border-bottom: 1px solid var(--fog);
  vertical-align: top;
  line-height: 1.8;
}

.info-table .th {
  width: 220px;
  font-weight: 500;
  color: var(--indigo);
}

.info-table .td { color: var(--carbon); }

/* CTAセクション */
.cta-section {
  background: var(--mid-deep);
  color: var(--white);
  padding: 110px 0;
}

.cta-section h2 { color: var(--white); }
.cta-section .sec-label .ja { color: var(--white); }
.cta-section .sec-label .en { color: rgba(255, 255, 255, 0.86); }

.cta-section .cta-head > p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin-bottom: 44px;
}

.cta-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cta-panel {
  /* 参照は中間グレーの帯の上に白い塗りカードを2枚立てる。
     細罫1本ではカードとして分節されず、序列2の「面」が成立しない */
  background: var(--white);
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cta-panel h3 {
  color: var(--ink);
  font-size: 20px;
  margin: 0 0 14px;
}

.cta-panel p {
  color: var(--carbon);
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 26px;
}

.cta-panel .btn {
  margin-top: auto;
  align-self: flex-start;
  border-radius: var(--radius-btn);
  padding: 14px 30px;
}

/* 白い面の上に載るので、白抜きボタンは使わず紺べたに揃える */
.cta-panel .btn-outline {
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--navy);
}

.cta-panel .btn-outline:hover { background: var(--navy-deep); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  /* 参照は padding 10px 22px の小さめ pill。「the color does the work」で、
     面積ではなく色が誘目を担う。min-width 268px は面積で押す設計だった */
  max-width: 100%;
  background: var(--accent);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  border: 0;
  transition: background .2s;
  margin-top: 12px;
}

.btn:hover { background: #0f4fa8; }

/* 右端の長い線＋小さな矢頭。参照ではこの形が全ボタンで反復される */
.btn .arrow,
.card-link .arrow {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: currentColor;
  position: relative;
  flex: 0 0 34px;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--slate);
  padding: 14px 35px;
  border-radius: var(--radius-btn);
}

.btn-outline:hover { background: var(--fog); }

.section-dark .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.section-dark .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* 制作実績ギャラリー */
.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.work {
  background: var(--white);
  border-radius: var(--radius-img);
  overflow: hidden;
  transform: rotate(-1deg);
  transition: transform .25s;
}

.work:nth-child(even) { transform: rotate(1deg); }
.work:hover { transform: rotate(0deg); }

.work img {
  width: 100%;
  height: auto;
  display: block;
}

/* フッター */
.site-footer {
  background: var(--navy);
  color: var(--white);
  border-top: 0;
  padding: var(--sp-64) 0 var(--sp-32);
  position: relative;
  /* clip は hero・page-head と同じ理由（sticky を壊さず、右端で切る） */
  overflow: clip;
}

/* 意匠10回目・致命1: 参照の核心「暗面とconfettiが同じ場所に来る」を、
   フッター（全6ページ共通の暗面）で初めて成立させる。上端の padding 帯
   （footer-grid の手前・var(--sp-64)=64px）だけを使い、本文と矩形を共有しない。
   footer-grid 側は z-index:1 で pseudo(absolute)より前面に出す */
.site-footer::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -18px;
  width: 220px;
  height: 60px;
  background: var(--accent);
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: 0;
}

.site-footer::after {
  content: "";
  position: absolute;
  right: 108px;
  top: -34px;
  width: 140px;
  height: 44px;
  background: var(--mid);
  transform: rotate(9deg);
  pointer-events: none;
  z-index: 0;
}

.site-footer > .inner { position: relative; z-index: 1; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-logo {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 12px;
}

.footer-addr {
  font-size: 13px;
  color: var(--indigo);
  line-height: 1.9;
  margin: 0;
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li { margin-bottom: 12px; }

.footer-col a {
  font-size: 14px;
  color: var(--indigo);
  text-decoration: none;
}

.footer-col a:hover { color: var(--white); }

.copyright {
  font-size: 12px;
  color: var(--indigo);
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid var(--fog);
  margin: 0;
}

/* モバイル */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cta-panels { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cards,
  .works { grid-template-columns: 1fr; }

  .message-box {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: var(--sp-32) var(--sp-24);
  }

  .message-photo { max-width: 160px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  .gnav {
    position: fixed;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--fog);
    padding: 8px 24px 24px;
    transform: translateY(-120%);
    transition: transform .28s ease;
    box-shadow: 0 12px 24px rgba(16, 18, 20, .06);
  }

  .gnav.open { transform: translateY(0); }

  .gnav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--fog);
    font-size: 15px;
  }

  .gnav .header-cta {
    margin-top: 16px;
    justify-content: center;
    border-bottom: 0;
  }

  .nav-toggle { display: block; }

  .hero { padding: 56px 0 56px; }

  .section { padding: var(--sp-64) 0; }

  .stats-bar {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .info-table .th,
  .info-table .td {
    display: block;
    width: 100%;
    padding: 12px 4px;
  }

  .info-table .th {
    border-bottom: 0;
    padding-bottom: 2px;
    font-size: 13px;
  }
}

/* --- 中間トーンをページ上部へ分散する（参照は写真6本が担う役目を面で作る） --- */






/* 実績セクションはページ中央の中間層を担う。fog(#f0f1f2)は輝度241で
   白に吸収されるため、中間トーンとして成立する #b7b9be を面に使う */
/* 帯を使うセクションは白地。fog地の上に薄い帯を置くと段が消える */
.section-track { background: var(--white); }
.section-track .info-table .th,
.section-track .info-table .td { border-bottom-color: rgba(16, 18, 20, 0.16); }
.section-track .info-table .th { color: var(--slate); }
.section-track .note { color: var(--slate); }

/* CTA帯を2カラムに。参照は帯の右半分にボックス2枚が入り端まで埋まる */
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.cta-head > p:last-child { margin-bottom: 0; }

.cta-section .cta-panels {
  grid-template-columns: 1fr;
  gap: 36px;
}

@media (max-width: 900px) {
  .cta-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* 濃紺フッター。参照は淡灰のCTA帯から濃紺フッターへ落として締める */
.site-footer .footer-logo { color: var(--white); }
.site-footer .footer-addr { color: #b9bec8; }
.site-footer .footer-col h4 { color: var(--white); }
.site-footer .footer-col a { color: #c3c8d1; }
.site-footer .footer-col a:hover { color: var(--white); }
.site-footer .copyright {
  color: #9aa1ad;
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* カード3枚を等質にしない。参照の3枚目は白地に細罫 */
/* 本文を包む帯。擬似要素ではなくDOM要素にして、高さが中身で決まるようにする。
   幅は全幅。820pxは本文の行長制御であって面の幅ではない（両者を兼ねさせると
   面が右端に届かず、ページ高の58%で右31%が空白になる） */
.band {
  background: var(--band);
  padding: 44px 0 52px;
}

.band > .inner-text { padding-top: 0; }

/* 情報表を2カラムに割る。1カラムだと値が短く行の右が空いたまま罫だけ伸びる。
   罫は各セルが持つので、2列でも表として読める */
.info-table.info-2col {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px minmax(0, 1fr);
  gap: 0 40px;
}

.info-table.info-2col th,
.info-table.info-2col td { display: block; width: auto; }

/* 値が長い項目は、ラベルを1列目に置いたまま値だけを残り全幅へ伸ばす */
.info-table.info-2col .full-row { grid-column: 1 / 2; }
.info-table.info-2col .full-row-td { grid-column: 2 / -1; }

@media (max-width: 860px) {
  .info-table.info-2col {
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .info-table.info-2col .full-row-td { grid-column: 2 / -1; }
}


/* about 帯を2カラムに割り、右カラムに写真を立てる。
   帯を全幅にしても中身が820pxのままだと、右400px×968pxが空の灰色面として残る
   （参照はこの位置を写真が縦断している） */
.band-about > .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  /* 意匠10回目: 写真背後のネイビープレート(::before)を撤去したぶん、
     テキスト列との間隔で余白を作る（64px → --sp-80） */
  gap: var(--sp-80);
  /* stretch(既定)だと右カラムの紺パネルが左カラムの行高まで伸び、
     community で高さ1080px中880pxが空の紺になっていた */
  align-items: start;
  /* .inner の 1248px と揃える。ここだけ 1200px が残っていて、
     index の about帯の本文左端だけ x=65 になっていた（他は40） */
  max-width: 1248px;
}

.band-about .band-text { max-width: 100%; }

.band-about .band-text > p { max-width: 620px; }

/* 写真。元データが206x237pxしかないので、原寸に近い幅で使い、
   縦方向は object-fit で伸ばす（拡大率を1.55倍までに抑える） */
.about-figure {
  position: relative;
  margin: 0;
}

/* 矩形は写真だけに掛ける。figure 全体に掛けるとキャプションが矩形の上に乗る */
.about-figure {
  display: flex;
  flex-direction: column;
}

/* 帯を上下に縦断させる。参照の写真はテキスト列より背が高く帯を貫く。
   意匠10回目: ::before(ネイビープレート)が -26px 下へ張り出していたぶんも
   写真の占有面積に見えていたため、プレート撤去に合わせて上端の食い込みを
   -56px→-40px に緩め、写真まわりの余白を増やした */
.about-figure-img {
  position: relative;
  flex: 1;
  min-height: 420px;
  margin-top: -40px;
}

.about-figure-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  display: block;
  border-radius: var(--radius-img);
}

.about-figure figcaption {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--indigo);
}

.about-figure figcaption strong {
  display: block;
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 900px) {
  .band-about > .inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .about-figure { max-width: 300px; }
}

/* ===== 下層ページ共通 ===== */

/* 下層ページの見出し。トップのFVと同じ語彙（ラベル＋大見出し）で、高さだけ抑える */
.page-head {
  padding: 76px 0 64px;
  position: relative;
  overflow: clip;
}

.page-head h1 {
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.44;
  /* 意匠10回目: hero h1 と同じ理由で 0.012em に詰める */
  letter-spacing: 0.012em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 24px;
}

.page-head .lead {
  font-size: clamp(15px, 2vw, 17px);
  max-width: 720px;
  margin: 0;
  color: var(--carbon);
}



/* 下層ページにも Confetti を置く。hero だけが幾何片を持ち下層5ページが
   持たない状態だと、装飾語彙がトップ限定の飾りに見える（意匠9回目）。
   page-head は hero より背が低いので片も小さくし、序列4が序列1〜3と矩形を
   共有しないよう、下端の padding 内と版面外にだけ掛ける */
.page-head::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -18px;
  width: 240px;
  height: 64px;
  background: var(--accent);
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: 0;
}

.page-head::before {
  content: "";
  position: absolute;
  right: 154px;
  bottom: -44px;
  width: 150px;
  height: 48px;
  background: var(--navy);
  transform: rotate(9deg);
  pointer-events: none;
  z-index: 0;
}

.page-head > .inner { position: relative; z-index: 1; }

/* メンバー */
.members {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 8px;
}

.member {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.member-head {
  border-top: 2px solid var(--navy);
  padding: 24px 0 20px;
}

.member-head h3 {
  color: var(--ink);
  margin: 0 0 8px;
  font-size: clamp(19px, 2.2vw, 22px);
}

.member-role {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--indigo);
}

.member-body { padding: 20px 0 0; }

.member-body p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--carbon);
  margin: 0 0 18px;
}

.member-body p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .members { grid-template-columns: 1fr; gap: 32px; }
  .page-head { padding: 56px 0 48px; }
}

/* ===== フォーム ===== */
.form {
  display: grid;
  gap: 26px;
  max-width: 760px;
  margin-top: 8px;
}

.form-row { display: grid; gap: 10px; }

.form-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Atlassian_c08ebca5.md: 「Metadata tags, status indicators, category labels」
   は Pill shape (10000px)。必須/任意タグはこの型に当たる */
.req,
.opt {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  line-height: 1;
  border-radius: var(--radius-pill);
}

.req { background: var(--navy); color: var(--white); }
.opt { background: var(--mid-soft); color: var(--slate); }

.form input,
.form select,
.form textarea {
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--ash);
  border-radius: var(--radius-input);
  padding: 13px 14px;
  width: 100%;
}

.form textarea { min-height: 150px; resize: vertical; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 2px solid var(--slate);
  outline-offset: -2px;
  border-color: var(--slate);
}

.form-note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--indigo);
  margin: 0;
}

.form-submit {
  border: 0;
  cursor: pointer;
  font-family: var(--font-ja);
  justify-self: start;
}

/* FAQ */
.faq { display: grid; gap: 0; margin-top: 8px; }

/* 参照は罫線をほとんど使わず、区切りを「面」と余白で作る。
   FAQ は6ページ合計26項目あり、全部を同じ hairline で切ると
   ページが「表とリストの束」に見える。偶奇の面で分節する */
.faq-item {
  padding: 26px 32px;
}

.faq-item:nth-child(even) { background: var(--band); }

.faq-item h3 {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 12px;
  padding-left: 30px;
  position: relative;
}

.faq-item h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--slate);
}

.faq-item p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--carbon);
  margin: 0;
  padding-left: 30px;
}

/* 番号つきの流れ */
.steps {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  border-bottom: 1px solid var(--ash);
  padding: 22px 0 22px 58px;
  position: relative;
  font-size: 15px;
  line-height: 1.9;
  color: var(--carbon);
}

.steps li:first-child { border-top: 1px solid var(--ash); }

.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--slate);
}

@media (max-width: 480px) {
  /* 文言の長いボタンは375pxで1行に収まらない。折り返して矢印を右端に残す */
  .btn {
    flex-wrap: wrap;
    gap: 14px 24px;
    padding: 16px 20px;
    font-size: 14px;
  }
  .btn .arrow { flex: 0 0 28px; width: 28px; }

  /* 375px では clamp の下限 32px が効き、nowrap の「ジョイントベンチャー」10文字が
     min-content 350px を作って grid の 1fr 列を版面（327px）より 40px 押し広げていた。
     序列1の h1 を下げるのではなく、下限だけを page-head h1 と同じ 30px に揃える
     （序列 h1 > 面 > h2 > 装飾 は 30px でも h2 の下限 17px に対して保たれる） */
  .hero h1 {
    font-size: 30px;
    /* 意匠10回目: 基準を0.012emに詰めたため、ここだけ0.03emのままだと
       375pxのほうが1280pxより字間が広くなる逆転が起きる。揃える */
    letter-spacing: 0.012em;
  }

  /* 375px では stats が縦積みになって右側が空かず、hero の片（序列4）が
     「設立2016年9月」と矩形を共有していた（実測）。片を縮めて
     padding-bottom 56px の内側に収める */
  .hero::after {
    width: 180px;
    height: 56px;
    right: -50px;
    bottom: -10px;
  }
}

/* 320px（SE 第1世代）では nowrap の塊が版面 272px を超え、grid の 1fr 列を
   押し広げて横スクロールを作る。極小画面では語中改行を許す。
   語の途中で折れるより、横スクロールが出るほうが読解を妨げる */
@media (max-width: 360px) {
  .nw { white-space: normal; }
}

/* 引き受け範囲などの箇条書き。中黒や記号を使わず、1px罫で区切る */
.list-lines {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
}

/* 参照は装飾としての hairline をほぼ使わず、区切りを面と余白で作る。
   FAQ と同じく偶奇の面で分節する（罫線リストが4節連続するページがあった） */
.list-lines li {
  padding: 17px 24px 17px 40px;
  position: relative;
  font-size: 15px;
  line-height: 1.85;
  color: var(--carbon);
}

.list-lines li:nth-child(even) { background: var(--band); }

.list-lines li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 29px;
  width: 12px;
  height: 1px;
  background: var(--slate);
}

/* 2列に割る箇条書き（項目が多いとき） */
.list-2col { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }



@media (max-width: 760px) {
  .list-2col { grid-template-columns: 1fr; }
}

/* プロダクトのラインナップ。カードと同じ語彙（紺の見出し面＋白の本文）で組む。
   1px罫だけで組むとFAQ・箇条書き・ステップと見分けがつかなくなる */
.lineup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 8px;
}

.lineup-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lineup-name {
  background: var(--navy);
  color: var(--white);
  margin: 0;
  padding: 24px 28px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.5;
  font-weight: 500;
}

.lineup-name .en {
  display: block;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 10px;
}

.lineup-body {
  padding: 26px 28px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lineup-body p:not(.lineup-price) {
  font-size: 15px;
  line-height: 1.95;
  color: var(--carbon);
  margin: 0 0 16px;
}

.lineup-price {
  margin-top: auto;
  border-left: 2px solid var(--slate);
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink);
}

@media (max-width: 860px) {
  .lineup { grid-template-columns: 1fr; gap: 28px; }
}

/* カードの列数バリエーション。見出しだけのカード（本文なし）も許す */
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-6 { grid-template-columns: repeat(3, 1fr); }

.cards-6 .card-head {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
}

@media (max-width: 860px) {
  .cards-2, .cards-6 { grid-template-columns: 1fr; }
  .cards-6 .card-head { min-height: 0; flex: 0 0 auto; }
}

/* 2) 非対称の型。左に見出し、右に本文。参照は同じ1ページ内で型を4回変える。
   中央1カラムと等分グリッドの2種類しかないと、5ページが同じ進行に見える */
.split {
  display: grid;
  /* 左カラムに h2 を置くので 340px では 5〜7文字で折り返す。
     参照の左カラムは400px超。値はここ1箇所だけで持つ */
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.split-head { position: sticky; top: 96px; }

.split-head h2 { margin-bottom: 20px; }

.split-head p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--carbon);
}

.split-body > :first-child { margin-top: 0; }

@media (max-width: 900px) {
  /* .split の1カラム化は後方（.split-body 系の直後）で1箇所に持つ */
  .split-head { position: static; }
}

/* 3) 数字の面。hero-panel を下層でも使えるように汎用化した。
   面が情報を運んでいる箇所が hero-panel の1つしか無かった */
.stat-panel {
  background: var(--navy);
  color: var(--white);
  padding: 40px 36px;
  position: relative;
}

.stat-panel::before {
  content: "";
  position: absolute;
  /* 左下へ48pxずらす。紺パネルの背後は紺でなく中間灰にしないと2枚の面に見えない */
  inset: 48px 48px -48px -48px;
  background: var(--mid);
  z-index: -1;
}

.stat-panel dl { margin: 0; display: grid; gap: 24px; }

.stat-panel div {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.stat-panel div:last-child { padding-bottom: 0; border-bottom: 0; }

.stat-panel dt {
  font-size: 12px;
  color: var(--ash);
  margin: 0 0 6px;
  line-height: 1.6;
}

.stat-panel dd {
  margin: 0;
  font-family: var(--font-en);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
}

.stat-panel dd .unit { font-size: 0.46em; font-weight: 700; margin-left: 4px; }

/* split の右カラムに入るメンバーは1列で積む（340px + 残りでは2列が窮屈） */
.members-stack { grid-template-columns: 1fr; gap: 28px; }

/* 番号つきの2列リスト。本文を持たない紺カードを並べると「ボタンの壁」に見えるため、
   引き受け範囲の列挙は面ではなく番号と罫で組む */
.numbered {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  counter-reset: n;
}

.numbered li {
  counter-increment: n;
  padding: 18px 24px 18px 58px;
  position: relative;
  font-size: 15px;
  line-height: 1.85;
  color: var(--carbon);
}

.numbered li:nth-child(4n+1), .numbered li:nth-child(4n+2) { background: var(--band); }

.numbered li::before {
  content: "0" counter(n);
  position: absolute;
  left: 24px;
  top: 19px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--slate);
}

/* 左カラムを狭めた非対称。右にカードが入るとき用 */
.split-wide { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }

/* split の右カラムに入るカードは縦積み（残り幅で3列は窮屈） */
.cards-stack { grid-template-columns: 1fr; gap: 24px; }

.cards-stack .card { flex-direction: row; }
/* min-width:0 が無いと word-break:keep-all(69行) の min-content が固定値を
   押し広げ、3ブロックの幅が 240/278/257px に割れて本文の左端が3本になる。
   288px は最長の「AIエージェント導入支援」(278px) が収まる値 */
.cards-stack .card-head { flex: 0 0 288px; min-width: 0; }
.cards-stack .card-body { padding: 24px 28px; }

@media (max-width: 900px) {
  /* .split の解除より後に定義しているので、ここで明示的に戻さないと
     300px固定のまま右カラムが潰れる */
  .split-wide { grid-template-columns: 1fr; gap: 36px; }
  .numbered { grid-template-columns: 1fr; }
  /* 1列に落ちるので、面の偶奇も 4n から 2n へ切り替える */
  .numbered li:nth-child(4n+1), .numbered li:nth-child(4n+2) { background: transparent; }
  .numbered li:nth-child(even) { background: var(--band); }
  .cards-stack .card { flex-direction: column; }
  .cards-stack .card-head { flex: 0 0 auto; }
}

/* 見出しブロック。参照(the-lead)は h2 が版面左端 x=40px から始まり、
   ラベルはその直上に置かれる（実測: h2 の left は全セクションで 40）。
   2カラムにすると左に220pxの空きが常時できて、序列2の「面」より
   序列3の h2 が奥に引っ込む。縦積みのまま h2 の 820px 上限だけを外す。 */
.section-head > .sec-label {
  margin: 0 0 14px;
}

/* .inner-text > h2 の 820px 上限（0,1,1）と同点なので、後に書いたこちらが勝つ */
.section-head > h2 {
  max-width: none;
}

/* h2 を一段落として行数を減らす（幅は .split の基本形が持つ） */
/* サイズは基本の h2 が1箇所で持つ（2箇所に散ると序列の比が崩れる） */
.split-head h2 { letter-spacing: 0.02em; }

/* .split の右カラム実効幅は 1152-400-64 = 688px。
   4列テーブルは固定440px+gapを取って値カラムが1列80px台になり、
   「東京都江／東区富岡1／-10-3」のように語中で折り返す。2列に落とす */
.split-body .info-table.info-2col {
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 28px;
}
.split-body .info-table.info-2col .full-row-td { grid-column: 2 / -1; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
}

/* 面を増やさずに版面右端まで到達させる。参照(mmark)のMission/Vision/Valueと同型 */
.split-body > h3,
.band-text > h3 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.split-body > h3::after,
.band-text > h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mid-soft);
}

/* 線画アイコン。参照(the-lead)は資料請求=書類・お問い合わせ=封筒の2個を持つ。
   写真は素材制約だが線画は制約ではないので、ここは埋められる。
   inline SVG を6ページに重複させず、mask で1箇所に定義する
   （mask はアルファを使うので SVG 側の stroke は #000 固定にする） */
.cta-panel h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cta-panel h3::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22square%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225.5%22%20width%3D%2219%22%20height%3D%2213%22%2F%3E%3Cpath%20d%3D%22M2.5%206.5l9.5%206.5%209.5-6.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22square%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225.5%22%20width%3D%2219%22%20height%3D%2213%22%2F%3E%3Cpath%20d%3D%22M2.5%206.5l9.5%206.5%209.5-6.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.cta-panels .cta-panel:nth-child(2) h3::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22square%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225.5%22%20width%3D%2217%22%20height%3D%2215%22%2F%3E%3Cpath%20d%3D%22M3.5%2010.5h17M8.5%203v4M15.5%203v4%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22square%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225.5%22%20width%3D%2217%22%20height%3D%2215%22%2F%3E%3Cpath%20d%3D%22M3.5%2010.5h17M8.5%203v4M15.5%203v4%22%2F%3E%3C%2Fsvg%3E");
}

/* 数字を3項目まで横に並べる面。罫線テーブルだけの区間が
   index 後半でページ高の21%あり、面が1つも無かった（意匠5回目 No.2）。
   ::before のオフセット矩形は親1枚に付くので、面を3枚に割らず1枚で持たせる */
.stat-panel-row {
  /* 参照の写真帯（1180x390px）に相当する非テキスト矩形として機能させる。
     1200x168px に 36px の数字では、面の中で数字が小さすぎて図にならない
     （意匠8回目の差1・3案のうち素材不要のもの） */
  padding: 64px 56px;
}

.stat-panel-row dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}

.stat-panel-row dd {
  font-size: clamp(40px, 5.2vw, 68px);
  letter-spacing: -0.02em;
}

.stat-panel-row dt {
  font-size: 13px;
  margin-bottom: 14px;
}

.info-compact { margin-top: 68px; }

@media (max-width: 900px) {
  .stat-panel-row { padding: 40px 28px; }
  .stat-panel-row dl { grid-template-columns: 1fr; gap: 32px; }
}

/* 参照は h1 の右に添え書きを置いて版面を使い切る。紺の面は置かない
   （同一パネルの反復が「面を壁紙にする」ので、ここはテキストだけで持たせる） */
.hero-note {
  align-self: end;
  padding-left: 32px;
  border-left: 1px solid var(--mid-soft);
}

.hero-note p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--indigo);
}

.hero-note b {
  display: block;
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .hero-note {
    padding-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid var(--mid-soft);
  }
}