/* ============================================================
   humbulls V3 core — 全ページ共通(トークン/ベース/ボタン/ヘッダー/CTA帯/フッター)
   デザイントークンは :root が唯一の値置き場。フォントは --font-heading / --font-body。
   ============================================================ */
/* ============================================================
   humbulls V3 — D系（MOLTS/baigie 参照・背景純白）
   #FFFFFF ベース + 墨 #17191E + ライトグレー #F5F5F4 の帯。
   ガスはヒーローのブロブ1点のみ。罫線 + アウトライン数字のエディトリアル調。
   CTA/フッターのみ濃色帯を許容（07-21 ルール例外）。
   ============================================================ */
:root {
  --ink: #17191E;
  --ink-2: #545862;
  --ink-3: #63666F;
  --paper: #FFFFFF;
  --surface: #F5F5F4;
  --line: #E7E7E4;
  --line-strong: #C9C9C6;
  --on-dark: #FFFFFF;
  --on-dark-2: #C7CAD1;
  --on-dark-3: #9BA0AA;
  --gas-1: #5FA8FF;
  --gas-2: #9B7CFF;
  --gas-3: #FF5A3C;
  --gas-4: #BFE8FF;
  --gas-5: #FFB06B;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo UI", "Meiryo",
    "Noto Sans JP", sans-serif;
  --font-heading: var(--font-sans);   /* フォント実験はこの2変数だけ差し替える */
  --font-body: var(--font-sans);
  --ease: cubic-bezier(0.25, 0.1, 0, 1);
  --radius-sm: 4px;    /* 四角ボタン(ヘッダー)・バナー */
  --radius-md: 8px;    /* 四角ボタン(本文)・写真枠・タブ */
  --radius-pill: 9999px;
  --radius-card: 14px;
  --underline-h: 1px;        /* 「にゅっと下線」の共通パラメータ */
  --underline-dur: 0.25s;
  --seg-blue: #2563C9;           /* BtoB バッジ */
  --seg-blue-on-dark: #7FB0FF;   /* ダーク面（モバイルメニュー）用の青 */   /* BtoB/BtoC セグメント表示専用の色（07-25 ユーザー指示・UIでの色使用はここだけ）*/
  --seg-purple: #7133C9;         /* BtoC バッジ（07-28 ユーザー指示・白地で約7:1） */
  --seg-purple-on-dark: #B695FF; /* ダーク面用の紫 */
  --container: 1240px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-feature-settings: "palt" 1, "tnum" 0, "onum" 0, "ss01" 0, "zero" 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
main { padding-top: clamp(72px, 7.5vw, 108px); }  /* 固定ヘッダー分の余白（下層ページの潜り込み防止）*/
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
/* 濃色面（newsletter パネル・モバイルメニュー）ではフォーカスリングを白に（墨 outline は不可視のため） */
.cta :focus-visible, .plan-card.is-featured :focus-visible,
.newsletter-panel :focus-visible, .m-menu :focus-visible { outline-color: #fff; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 2vw, 28px); }

h1, h2, h3, .mega-group, .mega-cat { font-family: var(--font-heading); }

.nb { white-space: nowrap; }  /* 折返し制御(語のまとまり)。ページ横断で使う汎用ユーティリティ */

/* reveal */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

.sec-en { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }

/* ---------- buttons — コンポーネント正本(design-system/components/buttons.html はこの実装のデモ) ---------- */
/* 四角形(本文用・角丸8px = baigie .c-button 実測)。ヘッダーは --header 変種(4px・小型)で上書き */
.btn-sq {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none;
  border-radius: var(--radius-md); padding: 15px 24px;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease), opacity 240ms var(--ease);
}
.btn-pill--fill {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none;
  background: var(--ink); color: #fff; border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill); padding: 17px 30px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn-pill--fill:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(23,25,30,0.22); }
.link-underline { font-size: 14px; font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.link-underline:hover { opacity: 0.65; }
.btn-pill--ghost {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none;
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill); padding: 17px 30px;
  transition: background-color 240ms var(--ease), color 240ms var(--ease);
}
.btn-pill--ghost:hover { background: var(--ink); color: #fff; }
.btn-pill--invert { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; background: var(--paper); color: var(--ink); border: 1.5px solid var(--paper); border-radius: var(--radius-pill); padding: 17px 34px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.btn-pill--invert:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }

.circle-link { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.circle-link .ci {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--ink); color: var(--ink); font-size: 13px; line-height: 1;
  transition: background-color 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease);
}
.circle-link:hover .ci { background: var(--ink); color: #fff; transform: translateX(2px); }
.circle-link--fill .ci { background: var(--ink); color: #fff; }
/* サイズ変種: セクション末尾の「すべて見る」系（CTA帯の contact-link と同寸） */
.circle-link--lg { gap: 16px; font-size: 17px; }
.circle-link--lg .ci { width: 44px; height: 44px; font-size: 17px; }
.circle-list { list-style: none; }
.circle-list li { border-top: 1px solid var(--line); }
.circle-list li:last-child { border-bottom: 1px solid var(--line); }
.circle-list .circle-link { padding: 14px 2px; width: 100%; }

/* ---------- header — baigie 型: 区切り線なし・ほぼ全幅・大きめロゴ・右端に2ボタン ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(.22, 1, .36, 1); /* baigie 実測の easing */
}
/* baigie 型 auto-hide: 常時 fixed（absolute→fixed の位置ジャンプを排除）。
   少しスクロールで影、下スクロールで隠し（opacity+visibility のみ・translateY 不使用）上で再表示 */
.header.is-scrolled { box-shadow: 0 1px 14px rgba(23, 25, 30, 0.07); }
.header.is-hidden { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .header { transition: none; } }
.header-inner {
  display: flex; align-items: center;
  height: clamp(72px, 7.5vw, 108px); gap: 24px;
  padding: 0 clamp(20px, 5.8vw, 84px);
}
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-lockup .logo-mark { width: 46px; height: 42px; }
.brand-lockup .logo-word { width: 140px; height: 23px; margin-top: 5px; }
.header-nav { display: none; align-items: center; gap: 0; flex: 1; justify-content: center; }
.nav-item { position: static; display: inline-flex; align-items: center; }
.nav-link {
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; color: var(--ink);
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 24px 13px; border-radius: 8px;
  /* 下線が左からにゅっと入る。ヘッダーは下線位置をテキストより下に（+丸と重ねない・baigie 風）*/
  background-color: transparent;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 24px 100%; background-size: 0% var(--underline-h); background-origin: border-box;
  transition: background-size var(--underline-dur) var(--ease), background-color 160ms var(--ease);
}
.nav-link:hover { background-color: #F6F6F6; background-size: calc(100% - 48px) var(--underline-h); }
/* サービスの +/−（細い丸枠の中・開くと縦棒が消えて −） */
.mega-plus { position: relative; width: 18px; height: 18px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; transition: border-color 160ms var(--ease); }
.mega-plus::before, .mega-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transition: transform 200ms var(--ease); }
.mega-plus::before { width: 8px; height: 1.3px; transform: translate(-50%, -50%); }
.mega-plus::after  { width: 1.3px; height: 8px; transform: translate(-50%, -50%); }
.has-mega.is-open .mega-plus::after, .has-dots.is-open .mega-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.has-mega.is-open .mega-plus, .has-dots.is-open .mega-plus { border-color: var(--ink); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn-sq--header {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none;
  border-radius: var(--radius-sm); padding: 12px 18px; /* baigie ヘッダーボタン: 角丸4px（本文CTAより四角い） */
  transition: opacity 200ms var(--ease), border-color 200ms var(--ease);
}
.btn-sq--ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-sq--ghost:hover { border-color: var(--ink); }
.btn-sq--fill { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn-sq--fill:hover { opacity: 0.85; }
@media (max-width: 519px) {
  .header .btn-sq--ghost { display: none; }
  .brand-lockup .logo-mark { width: 38px; height: 35px; }
  .brand-lockup .logo-word { width: 118px; height: 20px; margin-top: 4px; }
}
@media (min-width: 1024px) { .header-nav { display: flex; } }
/* ナビ項目が多いので中間幅ではヘッダー余白・ナビ padding を詰めて1行に収める */
@media (min-width: 1024px) and (max-width: 1319px) {
  .header-inner { padding-left: 22px; padding-right: 22px; gap: 10px; }
  .nav-link { padding-left: 11px; padding-right: 11px; }
  .btn-sq--header { padding: 11px 13px; }
}

/* ---------- header: サービスのメガメニュー（全幅パネル） ---------- */
/* baigie: 全幅でなく左右にマージンのある白パネル + 下方向の影 */
.mega-panel {
  position: absolute; top: calc(50% + 20px); left: 28px; right: 28px; z-index: 5;
  background: #fff; border-radius: 4px;
  box-shadow: 0 30px 54px -14px rgba(23, 25, 30, 0.18);
  padding: 46px 0 52px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms var(--ease);
}
.has-mega.is-open .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* 2大カテゴリブロック（伴走型｜プロジェクト型）を縦分割線で区切る */
.mega-inner { display: flex; gap: 44px; align-items: stretch; }
.mega-block--retainer { flex: 2 1 0; min-width: 0; }
.mega-block--project { flex: 3.1 1 0; min-width: 0; }
.mega-divider { flex: none; width: 1px; background: var(--line); align-self: stretch; }
.mega-group { font-size: clamp(24px, 2.1vw, 30px); font-weight: 900; letter-spacing: 0.01em; line-height: 1.2; color: var(--ink); margin: 0 0 26px; }
/* プロジェクト型支援: BtoB / BtoC セグメント切り替え */
.mega-group-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 26px; }
.mega-group-row .mega-group { margin-bottom: 0; }
.seg-badge { font-size: clamp(18px, 1.6vw, 22px); font-weight: 900; letter-spacing: 0.02em; color: var(--seg-blue); line-height: 1.2; }
[data-seg="btoc"] .seg-badge { color: var(--seg-purple); }
.seg-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: transparent; border: 0; padding: 4px 2px; cursor: pointer;
  transition: color 160ms var(--ease);
}
.seg-toggle:hover { color: var(--ink); }
.seg-ci {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong);
  font-size: 11px; line-height: 1;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.seg-toggle:hover .seg-ci { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateX(2px); }
.seg-pane { display: none; }
.seg-pane.is-active { display: block; animation: segFade 220ms var(--ease); }
@keyframes segFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .seg-pane.is-active { animation: none; } }

.mega-cols { display: grid; gap: 32px; align-items: start; }
.mega-cols--2 { grid-template-columns: repeat(2, 1fr); }
.mega-cols--project { grid-template-columns: repeat(3, 1fr); }
/* 2行目(HubSpot活用支援/その他)は上の3列と揃えず、自然幅で折返しなしに */
.mega-row2 { display: flex; gap: 72px; margin-top: 40px; }
.mega-row2 .mega-col { flex: none; }
.mega-row2 .mega-cat, .mega-row2 .mega-link { white-space: nowrap; }
.mega-col { display: flex; flex-direction: column; }
.mega-cat { font-size: clamp(20px, 1.7vw, 26px); font-weight: 800; letter-spacing: 0.01em; line-height: 1.25; color: var(--ink); margin: 0; }
.mega-en { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); margin: 4px 0 16px; }
/* block + 円を絶対配置。テキストは1つの流れとして自然に折返す（nb で語中割れ防止） */
.mega-link {
  display: block; position: relative;
  font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  padding: 7px 0 7px 32px; line-height: 1.5;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% var(--underline-h); background-origin: content-box;
  transition: color 160ms var(--ease), background-size 0.25s var(--ease);
}
.mega-link .ci--sm {
  position: absolute; left: 0; top: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--ink-3); font-size: 11px; line-height: 1;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.mega-link:hover { color: var(--ink); background-size: 100% var(--underline-h); }
.mega-link:hover .ci--sm { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- header: … ドロップダウン ---------- */
.has-dots { position: relative; }               /* パネルは … の直下（baigie と同じ位置） */
.dots-btn { font-size: 20px; letter-spacing: 1.5px; background-image: none; }
.dots-glyph { display: inline-block; line-height: 1; transform: translateY(-0.16em); } /* … を他項目とセンター揃え */
.dots-menu {
  position: absolute; top: calc(100% + 12px); left: -10px; right: auto; z-index: 5;
  min-width: 248px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 20px 44px rgba(23, 25, 30, 0.12); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms var(--ease);
}
.has-dots.is-open .dots-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dots-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
  padding: 9px 10px; border-radius: 7px; white-space: nowrap;
  transition: background-color 160ms var(--ease);
}
.dots-item:hover { background-color: #F6F6F6; } /* … 内は下線を出さない */
.dots-icon { display: inline-flex; width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.dots-icon svg { width: 16px; height: 16px; display: block; }
.dots-divider { display: block; height: 1px; background: var(--line); margin: 6px 8px; }

/* メガ展開中: ヘッダー中身の上に本文オーバーレイと同一の暗幕(同色+同blur)を乗せ、
   ヘッダーと本文がひと続きの「暗いすりガラス」に見えるようにする(baigie 準拠)。
   タブ(z6)とパネル(z5)だけが暗幕(z4)の上に浮く */
.header::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: rgba(23, 25, 30, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms var(--ease), visibility 200ms var(--ease);
}
.header.mega-open::after { opacity: 1; visibility: visible; }
/* サービスタブ: 白のままパネル上端に乗って一体化(下角丸なし) */
.has-mega.is-open > .nav-link { background-color: #fff; border-radius: 8px 8px 0 0; position: relative; z-index: 6; }

/* メガメニュー展開中の背景オーバーレイ（ページを薄暗く・クリックで閉じる） */
.mega-overlay {
  position: fixed; inset: 0; z-index: 90;   /* ヘッダー(100)の下・ページより上 */
  background: rgba(23, 25, 30, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms var(--ease), visibility 200ms var(--ease);
}
.mega-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .mega-overlay { transition: none; } }

/* ---------- section scaffolding（罫線エディトリアル） ---------- */
.section { padding: clamp(60px, 7.5vw, 104px) 0; }
.sec-title { font-size: clamp(27px, 3.6vw, 42px); font-weight: 900; line-height: 1.32; letter-spacing: 0.005em; }
.sec-title .keep { display: inline-block; }
.sec-lead { margin-top: 20px; font-size: 16px; color: var(--ink-2); max-width: 40em; line-height: 2.0; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink);
  border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; transition: gap 200ms var(--ease), opacity 200ms var(--ease);
}
.arrow-link:hover { gap: 11px; opacity: 0.65; }
.section-foot { margin-top: 40px; }

/* ---------- CTA（baigie 型・薄背景の3カラム。線画イラスト+タイトル+説明+丸矢印） ---------- */
.contact-cta { background: var(--surface); padding: clamp(64px, 8vw, 104px) 0; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(48px, 6vw, 64px); }
@media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4vw, 64px); } }
.contact-item { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.contact-illust { width: 150px; height: 130px; margin-bottom: 6px; display:flex; align-items:flex-end; }
.contact-illust img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.contact-title { font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; line-height: 1.5; color: var(--ink); }
.contact-desc { margin-top: 16px; font-size: 15px; color: var(--ink-2); line-height: 1.95; }
/* 相談/問い合わせ/DL の丸ボタン+テキスト: 大きめ + hover で下線がにゅっと出る。カード下端に揃える */
.contact-link { margin-top: auto; padding-top: 30px; gap: 16px; font-size: 17px; }
.contact-link .ci { width: 44px; height: 44px; font-size: 17px; }
.circle-link .clink-text {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 0% var(--underline-h); background-origin: content-box;
  padding-bottom: 3px;
  transition: background-size var(--underline-dur) var(--ease);
}
.circle-link:hover .clink-text { background-size: 100% var(--underline-h); }

/* ---------- newsletter — ダークのハイライトパネル + メール入力フォーム ---------- */
.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; }
.newsletter { padding: clamp(40px, 5vw, 64px) 0; background: var(--paper); }
.newsletter-panel {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-dark); border-radius: 20px;
  padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 60px);
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
@media (min-width: 860px) { .newsletter-panel { grid-template-columns: 1.1fr 0.9fr; gap: 56px; } }
/* ブランドのガスグラデをごく淡く右上に(ページ唯一の色ルールの範囲: 装飾グロー) */
.nl-glow { position: absolute; top: -40%; right: -10%; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,124,255,0.5), rgba(95,168,255,0.28) 45%, rgba(23,25,30,0) 70%);
  filter: blur(8px); pointer-events: none; }
.nl-copy { position: relative; z-index: 1; }
.nl-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--on-dark-3); margin-bottom: 16px; }
.nl-heading { font-size: clamp(21px, 2.2vw, 28px); font-weight: 900; line-height: 1.5; color: #fff; }
.nl-sub { margin-top: 14px; font-size: 12px; color: var(--on-dark-3); line-height: 1.7; }
.nl-form { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.nl-input {
  grid-column: 1 / 2;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1.5px solid #fff; border-radius: 9999px;
  padding: 15px 22px; width: 100%; min-width: 0;
}
.nl-input::placeholder { color: var(--ink-3); }
.nl-input:focus-visible { outline: 2px solid var(--gas-1); outline-offset: 2px; }
.nl-submit {
  grid-column: 2 / 3;
  font-family: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--paper); border-radius: 9999px;
  padding: 15px 28px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.nl-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.nl-note { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: var(--on-dark-3); line-height: 1.7; }
.nl-note a { color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 2px; }
.nl-note a:hover { color: #fff; }
@media (max-width: 519px) { .nl-form { grid-template-columns: 1fr; } .nl-input, .nl-submit { grid-column: 1 / -1; } }

/* ---------- footer — baigie 型ダーク ---------- */
.footer { background: #1A1C21; color: var(--on-dark-2); padding: clamp(56px, 7vw, 88px) 0 40px; }
@media (max-width: 1023px) { .footer { padding-bottom: 100px; } }  /* 固定モバイルメニューボタンが © に重なるのを回避（07-28。07-29 下限640を撤去 — 380-639px でも13px重なっていた） */
.footer-top { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1200px) { .footer-top { grid-template-columns: 1fr 1.7fr; gap: 64px; } }  /* 900px 発火だとカラム幅が 768px 時より痩せて折返し事故（07-28 レスポンシブレビュー） */
.footer-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.footer-lockup .f-logo-mark { width: 46px; height: 42px; }
.footer-lockup .f-logo-word { width: 150px; height: 25px; margin-top: 5px; }
.footer-note { margin-top: 24px; font-size: 13px; color: var(--on-dark-3); line-height: 1.95; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
@media (min-width: 720px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col-head { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: #fff; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-col a { font-size: 13.5px; font-weight: 500; color: var(--on-dark-2); text-decoration: none; transition: color 160ms var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-partner { white-space: nowrap; font-size: 12px; color: var(--on-dark-3); }
.footer-meta {
  margin-top: clamp(48px, 6vw, 72px); padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
}
.footer-copy { font-size: 12px; color: var(--on-dark-3); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.footer-legal a { font-size: 12px; color: var(--on-dark-2); text-decoration: none; }
.footer-legal a:hover { color: #fff; }
.footer-top-btn {
  margin-left: auto; flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  text-decoration: none; transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.footer-top-btn:hover { background: #fff; color: var(--ink); }
.footer .container :focus-visible { outline-color: #fff; }

/* ---------- responsive(共通) ---------- */
@media (min-width: 1024px) { .cta-cols { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1023px) { .cta-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- mobile menu — baigie 型（左下ボタン→右斜上へ拡大） ---------- */
.m-menu-btn, .m-menu-bg, .m-menu { display: none; }
@media (max-width: 1023px) {
  .m-menu-btn { display: flex; }
  .m-menu-bg { display: block; }
  .m-menu { display: block; }
}
.m-menu-btn {
  position: fixed; z-index: 10000; bottom: 22px; left: 18px;
  width: 62px; height: 44px; background: #1A1C21; border: 0; border-radius: 8px;
  align-items: center; justify-content: center; cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
body.m-open .m-menu-btn { background: #3b3b39; }
.m-menu-lines { position: relative; width: 26px; height: 13px; }
.m-menu-lines::before, .m-menu-lines::after {
  content: ""; position: absolute; left: 0; width: 26px; height: 1.5px; background: #fff;
  transition: top 0.3s var(--ease), transform 0.3s var(--ease);
}
.m-menu-lines::before { top: 4px; }
.m-menu-lines::after { top: 9px; }
body.m-open .m-menu-lines::before { top: 6px; transform: rotate(-20deg); }
body.m-open .m-menu-lines::after { top: 6px; transform: rotate(20deg); }
/* ボタン位置から全画面へ拡大する暗幕 */
.m-menu-bg {
  position: fixed; z-index: 9990; bottom: 0; left: 0;
  translate: 18px -22px; width: 62px; height: 44px;
  background: #1A1C21; border-radius: 8px; pointer-events: none;
  transition: translate 0.4s cubic-bezier(.215,.61,.355,1), width 0.4s cubic-bezier(.215,.61,.355,1), height 0.4s cubic-bezier(.215,.61,.355,1), border-radius 0.4s cubic-bezier(.215,.61,.355,1);
}
body.m-open .m-menu-bg { translate: 8px -8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 12px; }
/* ナビ本体（フェードイン・スクロール） */
.m-menu {
  position: fixed; z-index: 9995; top: 8px; left: 8px;
  width: calc(100% - 16px); height: calc(100% - 16px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s var(--ease) 0.12s, visibility 0.3s var(--ease) 0.12s;
}
body.m-open .m-menu { visibility: visible; opacity: 1; }
.m-menu-inner { padding: 40px 28px 100px; }
.m-nav { list-style: none; }
.m-nav-item { border-bottom: 1px solid rgba(255,255,255,0.2); }
.m-nav-item > a, .m-sub-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  color: #fff; font-family: inherit; font-size: 19px; font-weight: 500; line-height: 1.5;
  padding: 17px 2px 15px; text-decoration: none; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.m-pm { position: relative; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%; flex: none; }
.m-pm::before, .m-pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; }
.m-pm::before { width: 8px; height: 1px; transform: translate(-50%,-50%); }
.m-pm::after { width: 1px; height: 8px; transform: translate(-50%,-50%); transition: transform 0.3s var(--ease); }
.m-has-sub.is-open .m-pm::after { transform: translate(-50%,-50%) scaleY(0); }
.m-sub { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.m-has-sub.is-open .m-sub { max-height: 2400px; }
.m-sub a { display: block; color: rgba(255,255,255,0.82); font-size: 16px; padding: 9px 2px; text-decoration: none; }
.m-sub .m-sub-top { padding-top: 4px; padding-bottom: 8px; }
.m-sub-cat { color: rgba(255,255,255,0.45); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; margin-top: 18px; margin-bottom: 2px; }
.m-nav--sub { margin-top: 28px; padding-bottom: 20px; }
.m-nav--sub li a { display: block; color: rgba(255,255,255,0.8); font-size: 15px; padding: 11px 2px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .m-menu-bg, .m-menu, .m-menu-lines::before, .m-menu-lines::after, .m-sub { transition: none; }
}

.footer-legal-soon { font-size: 12px; color: var(--on-dark-3); cursor: default; }

/* モバイルメニュー: BtoB / BtoC セグメント切り替え */
/* 伴走型支援 / プロジェクト型支援 は同格の大見出し（デスクトップのメガメニューと同じ階層）*/
.m-seg { margin-top: 30px; }
.m-seg + .m-seg { margin-top: 38px; }
/* 見出し+バッジは1行、切替ボタンは右端（狭いときは次行右寄せ）*/
.m-seg-head { display: flex; align-items: baseline; flex-wrap: wrap; row-gap: 10px; column-gap: 10px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,0.28); margin-bottom: 8px; }
.m-seg-title { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.45; }
.m-seg-badge { font-size: 18px; font-weight: 900; letter-spacing: 0.02em; color: var(--seg-blue-on-dark); line-height: 1.45; }
[data-seg="btoc"] .m-seg-badge { color: var(--seg-purple-on-dark); }
.m-seg-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  font-family: inherit; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.82);
  background: transparent; border: 0; padding: 4px 0; cursor: pointer;
  transition: color 160ms var(--ease);
}
.m-seg-toggle:hover { color: #fff; }
.m-seg-ci {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5);
  font-size: 10px; line-height: 1;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.m-seg-toggle:hover .m-seg-ci { background: #fff; color: var(--ink); transform: translateX(2px); }