/* =========================================================================
   Praeternum トップページ — サイトCSS (共通 + 案A)
   _ds/colors_and_type.css のトークンの上に構築
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600;700&display=swap");

:root {
  /* 思想ステートメント・最終CTAの見出し用 明朝 (コンテンツ仕様指定) */
  --font-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg-page); }
*, *::before, *::after { box-sizing: border-box; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter-lg); }

/* 日本語の自然な改行（孤立した句点・単語途中の改行を抑制） */
h1, h2, h3, h4, h5, p, li, dt, dd, blockquote, figcaption, .section__sub, .section__h {
  text-wrap: pretty;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

/* ---------- reveal (fade-up 16px のみ) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

.draw-path { display: block; overflow: visible; }

/* 見出し・本文の意味単位ブロック（句点で改行・1文1行・収まらなければ読点で折り返し） */
.jpc { display: block; max-width: 100%; word-break: auto-phrase; overflow-wrap: normal; text-wrap: pretty; white-space: pre-line; }
.jpc:empty { display: none; }
/* 台帳リード：文と文の間に空白行を一つ入れる */
#ledger .section__sub .jpc + .jpc { margin-top: 0.9em; }

/* ---------- buttons ---------- */
.k-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--duration-base) var(--ease-out); text-decoration: none;
  white-space: nowrap;
}
.k-btn--primary { background: var(--blue-600); color: #fff; }
.k-btn--primary:hover { background: var(--blue-700); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.k-btn--primary-brand { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-brand); }
.k-btn--primary-brand:hover { background: var(--blue-700); transform: translateY(-1px); color: #fff; }
.k-btn--secondary { background: #fff; color: var(--blue-700); border-color: #bfdbfe; }
.k-btn--secondary:hover { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-700); }
.k-btn--on-dark-primary { background: #fff; color: var(--navy-900); }
.k-btn--on-dark-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(34, 211, 238, 0.45); color: var(--navy-900); }
.k-btn--on-dark-secondary { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
.k-btn--on-dark-secondary:hover { background: rgba(255,255,255,0.14); color: #fff; }
.k-btn--lg { padding: 14px 26px; font-size: 15px; }

.arrow-link {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--blue-600); display: inline-flex; gap: 6px; align-items: center;
}
.arrow-link:hover { color: var(--blue-700); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border-1);
}
.site-header__inner { display: flex; align-items: center; gap: 36px; height: 68px; }
.site-header__logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; color: var(--navy-900); letter-spacing: -0.01em;
}
.site-header__logo img { width: 30px; height: 30px; }
.site-header__nav { display: flex; gap: 26px; flex: 1; }
.site-header__nav a {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; color: var(--ink-700);
}
.site-header__nav a:hover { color: var(--navy-900); }
.site-header__actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.site-header__menu-btn {
  display: none; background: none; border: none; color: var(--navy-900);
  padding: 8px; cursor: pointer;
}
.site-header__mobile {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 24px 20px; border-top: 1px solid var(--border-2); background: #fff;
}
.site-header__mobile a {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  color: var(--ink-700); padding: 10px 4px; border-bottom: 1px solid var(--border-2);
}

/* ---------- section primitives ---------- */
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--ink-50); }
.section--dark { background: var(--gradient-hero-dark); color: #fff; }
.section__head { max-width: 760px; margin-bottom: 56px; }
.section__head--center { max-width: 920px; margin: 0 auto 56px; text-align: center; }
@media (min-width: 721px) { .section__head--center .section__h { white-space: nowrap; } }
.section__eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue-600);
  margin-bottom: 12px;
}
.section--dark .section__eyebrow { color: var(--cyan-400); }
.section__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--navy-900);
  margin: 0;
}
.section--dark .section__h { color: #fff; }
.section__sub { font-size: 16.5px; line-height: 1.8; color: var(--ink-600); margin: 14px 0 0; max-width: 74ch; }
.section--dark .section__sub { color: var(--fg-on-dark-2); }

.price-note {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; color: var(--ink-600); line-height: 1.6;
  background: var(--ink-50); border: 1px solid var(--border-2);
  padding: 10px 16px; border-radius: var(--radius-md);
}
.price-note svg { color: var(--green-600); flex-shrink: 0; margin-top: 3px; }
.price-note--dark { background: rgba(255,255,255,0.06); border-color: var(--border-on-dark); color: var(--fg-on-dark-2); }

.phone-note { font-size: 13px; color: var(--ink-500); margin: 14px 0 0; }
.phone-note--dark { color: var(--fg-on-dark-3); }

/* =========================================================================
   案A — 白基調・台帳エディトリアル
   ========================================================================= */

/* ---------- §1 hero ---------- */
.va-hero {
  position: relative;
  padding: 88px 0 96px;
  background: var(--gradient-hero-wash), var(--white);
  overflow: hidden;
}
.va-hero__inner { display: grid; grid-template-columns: 1.08fr 1fr; gap: 72px; align-items: center; }
.va-hero__h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 4.8vw, 62px);
  line-height: 1.18; letter-spacing: -0.03em; color: var(--navy-900);
  margin: 0 0 24px;
}
.va-hero__sub { font-size: 16.5px; line-height: 1.9; color: var(--ink-700); max-width: 66ch; margin: 0; }
.va-hero__ctas { display: flex; gap: 12px; margin-top: 34px; align-items: center; flex-wrap: wrap; }
.va-hero__note { font-size: 13px; color: var(--ink-500); margin: 14px 0 0; }

/* FlowFour — 縦の一筆書き */
.va-flow { position: relative; display: flex; flex-direction: column; gap: 18px; padding-left: 54px; }
.va-flow__line { position: absolute; left: 0; top: 10px; bottom: 10px; width: 44px; height: calc(100% - 20px); }
.va-flow__item {
  position: relative;
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.va-flow__item::before {
  content: ""; position: absolute; left: -36px; top: calc(50% - 5px);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue-600);
}
.va-flow__item .step {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--blue-600);
}
.va-flow__item .t {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--navy-900); letter-spacing: -0.01em; margin-top: 3px;
}
.va-flow__item .d { font-size: 13px; color: var(--ink-600); line-height: 1.6; margin-top: 4px; }

/* ---------- §1.5 pickup ---------- */
.va-pickup { padding: 0 0 var(--section-y-sm); }
.va-pickup__card {
  position: relative;
  display: flex; align-items: center; gap: 40px;
  background: var(--navy-900); color: #fff;
  border-radius: var(--radius-xl); padding: 36px 40px;
  overflow: hidden;
}
.va-pickup__card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 100% 0%, rgba(30, 181, 220, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.va-pickup__eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cyan-400);
}
.va-pickup__title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em; margin: 8px 0 10px; color: #fff;
}
.va-pickup__desc { font-size: 14px; line-height: 1.75; color: var(--fg-on-dark-2); margin: 0; max-width: 62ch; white-space: pre-line; }
.va-pickup__cta { flex-shrink: 0; position: relative; }

/* ---------- §2 ledger ---------- */
.va-ledger__table { border-top: 1px solid var(--border-strong); }
.va-ledger__labels, .va-ledger__row {
  display: grid; grid-template-columns: 44px 1fr 72px 1fr; gap: 16px; align-items: center;
}
.va-ledger__labels {
  padding: 14px 0 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-500);
  border-bottom: 1px solid var(--border-1);
}
.va-ledger__labels .r { color: var(--navy-800); }
.va-ledger__row { padding: 22px 0; border-bottom: 1px solid var(--border-2); }
.va-ledger__row .idx {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-400);
}
.va-ledger__row .l { font-size: 16px; color: var(--ink-700); line-height: 1.6; }
.va-ledger__row .arr { color: var(--blue-500); display: grid; place-items: center; }
.va-ledger__row .r {
  font-family: var(--font-display); font-weight: 700; font-size: 16.5px;
  color: var(--navy-900); letter-spacing: -0.01em; line-height: 1.55;
}
.va-ledger__close {
  margin-top: 32px; font-size: 16px; color: var(--navy-900); font-weight: 500;
  display: flex; gap: 12px; align-items: baseline;
}
.va-ledger__close::before {
  content: ""; width: 28px; height: 2px; background: var(--blue-600);
  flex-shrink: 0; transform: translateY(-4px);
}

/* ---------- §3 statement ---------- */
.va-statement { position: relative; overflow: hidden; }
.va-statement__inner {
  display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center;
  max-width: 980px; margin: 0 auto;
}
.va-statement__h {
  font-family: var(--font-mincho); font-weight: 600;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.5; letter-spacing: 0.02em;
  color: var(--navy-900); margin: 0 0 26px;
}
.va-statement__body { font-size: 15.5px; line-height: 2.1; color: var(--ink-700); margin: 0; max-width: 54em; }
.va-statement__vertical {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-mincho); font-weight: 600;
  font-size: clamp(28px, 2.6vw, 36px); letter-spacing: 0.34em;
  color: var(--navy-900);
  padding: 28px 26px 40px;
  border-left: 1px solid var(--border-1);
  height: max-content; align-self: center;
}

/* ---------- §4 products ---------- */
.va-prods__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.va-prods__grid + .va-prods__grid { margin-top: 20px; }
.prod-card {
  background: #fff; border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all var(--duration-base) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.prod-card:hover { border-color: var(--blue-100); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.prod-card__top { display: flex; align-items: center; gap: 14px; }
.prod-card__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
}
.prod-card__icon--blue { background: var(--blue-50); color: var(--blue-600); }
.prod-card__icon--green { background: var(--green-50); color: var(--green-700); }
.prod-card__icon--cyan { background: var(--cyan-50); color: var(--cyan-600); }
.prod-card__name {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--navy-900); letter-spacing: -0.01em;
}
.prod-card__tag { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.prod-card__desc { font-size: 14.5px; color: var(--ink-700); line-height: 1.75; margin: 0; }
.value-pair {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-2);
  display: flex; flex-direction: column; gap: 8px;
}
.value-pair__row { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; }
.value-pair__row .who {
  flex-shrink: 0; width: 44px; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  padding: 3px 0; border-radius: var(--radius-sm); margin-top: 1px;
}
.value-pair__row--genba .who { background: var(--cyan-50); color: var(--cyan-600); }
.value-pair__row--keiei .who { background: var(--blue-50); color: var(--blue-700); }
.value-pair__row .what { color: var(--ink-700); }

.prod-card--md { padding: 26px; }
.prod-card--md .prod-card__name { font-size: 18px; }

.va-service {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--ink-50); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); padding: 24px 28px;
}
.va-service__icon { color: var(--navy-700); flex-shrink: 0; margin-top: 2px; }
.va-service__name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--navy-900); letter-spacing: -0.01em;
}
.va-service__tag { font-size: 12px; color: var(--ink-500); margin-left: 10px; font-weight: 400; }
.va-service__desc { font-size: 13.5px; color: var(--ink-600); line-height: 1.7; margin: 6px 0 0; }
.va-prods__note { margin-top: 28px; }

/* ---------- §5 dev (dark) ---------- */
.va-dev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.va-dev__step {
  position: relative;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg); padding: 22px 24px;
}
.va-dev__step .n {
  font-family: var(--font-mono); font-size: 12px; color: var(--cyan-400); letter-spacing: 0.1em;
}
.va-dev__step .t {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff;
  margin-top: 6px; letter-spacing: -0.01em;
}
.va-dev__step .d { font-size: 13px; color: var(--fg-on-dark-2); margin-top: 4px; }
.va-dev__step .who-tag {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; padding: 3px 8px; border-radius: var(--radius-full);
  border: 1px solid;
}
.va-dev__step .who-tag--human { color: var(--cyan-400); border-color: rgba(34, 211, 238, 0.4); }
.va-dev__step .who-tag--ai { color: var(--fg-on-dark-2); border-color: var(--border-on-dark); }
.va-dev__loop {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-on-dark-3);
}
.va-dev__quote {
  margin: 56px auto 0; max-width: 760px; text-align: center;
  font-family: var(--font-mincho); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.7; color: #fff;
  letter-spacing: 0.02em;
}
.va-dev__quote::before, .va-dev__quote::after { content: "—"; color: var(--cyan-400); margin: 0 16px; }
.va-dev__link { text-align: center; margin-top: 36px; font-size: 14px; color: var(--fg-on-dark-2); }
.va-dev__link a { color: var(--cyan-400); font-weight: 600; margin-left: 8px; }
.va-dev__link a:hover { color: var(--cyan-100, #cffafe); }

/* ---------- §6 personas (tabs) ---------- */
.va-personas__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.va-personas__tab {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: var(--radius-md);
  border: 1px solid var(--border-1); background: #fff; color: var(--ink-600);
  cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
  transition: all var(--duration-fast) var(--ease-out);
}
.va-personas__tab:hover { color: var(--navy-900); border-color: var(--border-strong); }
.va-personas__tab.active {
  background: var(--navy-900); color: #fff; border-color: var(--navy-900);
}
.va-personas__panel {
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-xl);
  padding: 40px 44px; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
}
.va-personas__quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.55; letter-spacing: -0.015em;
  color: var(--navy-900); margin: 0;
}
.va-personas__quote::before { content: "「"; color: var(--blue-400); }
.va-personas__quote::after { content: "」"; color: var(--blue-400); }
.va-personas__body { font-size: 15px; line-height: 1.85; color: var(--ink-700); margin: 0 0 18px; }
.va-personas__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.va-personas__chip {
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--blue-50); color: var(--blue-700); border: 1px solid #bfdbfe;
}

/* ---------- §7 steps ---------- */
.va-steps { position: relative; }
.va-steps__row { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.va-steps__line { position: absolute; top: 21px; left: 6%; width: 88%; height: 12px; z-index: 0; }
.va-steps__item { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.va-steps__num {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto;
  background: #fff; border: 1px solid var(--border-1); box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 14px; color: var(--blue-600); font-weight: 500;
}
.va-steps__t {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  color: var(--navy-900); margin-top: 14px; letter-spacing: -0.01em;
}

/* ---------- §8 final CTA (接続線の到達点) ---------- */
.va-final { position: relative; padding: 40px 0 110px; text-align: center; overflow: hidden; }
.va-final__spine { width: 12px; height: 120px; margin: 0 auto 8px; }
.va-final__dot {
  width: 10px; height: 10px; border-radius: 50%; margin: 0 auto 36px;
  background: var(--gradient-brand);
}
.va-final__h {
  font-family: var(--font-mincho); font-weight: 600;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.6; letter-spacing: 0.02em;
  color: var(--navy-900); margin: 0 0 20px;
}
.va-final__body { font-size: 15.5px; line-height: 2; color: var(--ink-600); max-width: 36em; margin: 0 auto; }
.va-final__ctas { margin-top: 36px; display: flex; gap: 12px; justify-content: center; }
.va-final .phone-note { margin-top: 16px; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy-950); color: var(--fg-on-dark-2);
  padding: 64px 0 32px; font-size: 14px;
}
.site-footer__cols { display: grid; grid-template-columns: 1.3fr 1.15fr 0.85fr 1.6fr; gap: 32px; margin-bottom: 48px; }
.site-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; display: flex; gap: 10px; align-items: center; }
.site-footer__brand img { width: 28px; height: 28px; }
.site-footer__brand-sub { margin-top: 12px; color: var(--fg-on-dark-3); font-size: 13px; line-height: 1.7; max-width: 260px; }
.site-footer__col h4 {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #fff;
  margin: 0 0 14px;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a { color: var(--fg-on-dark-2); font-size: 13.5px; }
.site-footer__col a:hover { color: #fff; }
.site-footer__company li { font-size: 13px; line-height: 1.65; color: var(--fg-on-dark-2); display: flex; gap: 12px; }
.site-footer__company li span {
  flex-shrink: 0; width: 56px; color: var(--fg-on-dark-3);
  font-size: 12px; padding-top: 1px;
}
.site-footer__bar {
  padding-top: 24px; border-top: 1px solid var(--border-on-dark);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: var(--fg-on-dark-3);
}

/* ---------- responsive (共通 + 案A) ---------- */
@media (max-width: 1020px) {
  .site-header__nav { display: none; }
  .site-header__menu-btn { display: grid; place-items: center; }
  .site-header__mobile { display: flex; }
  .va-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .va-personas__panel { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
  .va-dev__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --section-y: 64px; }
  .site-header__contact { display: none; }
  .va-pickup__card { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; }
  .va-ledger__labels { display: none; }
  .va-ledger__row { grid-template-columns: 28px 1fr; row-gap: 8px; padding: 18px 0; }
  .va-ledger__row .arr { display: none; }
  .va-ledger__row .r { grid-column: 2; }
  .va-statement__inner { grid-template-columns: 1fr; gap: 36px; }
  .va-statement__vertical { writing-mode: horizontal-tb; letter-spacing: 0.2em; border-left: none; border-top: 1px solid var(--border-1); padding: 24px 0 0; }
  .va-prods__grid { grid-template-columns: 1fr; }
  .va-dev__grid { grid-template-columns: 1fr; }
  .va-steps__row { grid-template-columns: 1fr; gap: 20px; }
  .va-steps__line { display: none; }
  .va-steps__item { display: flex; align-items: center; gap: 16px; text-align: left; }
  .va-steps__num { margin: 0; flex-shrink: 0; }
  .va-steps__t { margin-top: 0; }
  .va-final__ctas { flex-direction: column; align-items: center; }
  .site-footer__cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   ヘッダードロップダウン / SupportLayer / サービス帯1本化 (研修廃止対応)
   ========================================================================= */

/* プロダクトドロップダウン */
.site-header__dd { position: relative; display: flex; align-items: center; }
.site-header__dd-btn {
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  color: var(--ink-700); background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 0;
}
.site-header__dd-btn:hover { color: var(--navy-900); }
.site-header__dd-caret { transform: rotate(90deg); transition: transform 160ms var(--ease-out); color: var(--ink-400); }
.site-header__dd:hover .site-header__dd-caret { color: var(--blue-600); }
.site-header__dd::after { content: ""; position: absolute; top: 100%; left: -16px; right: -16px; height: 16px; }
.site-header__dd-menu {
  position: absolute; top: calc(100% + 14px); left: -16px;
  min-width: 308px; background: #fff; border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms;
  z-index: 60;
}
.site-header__dd:hover .site-header__dd-menu,
.site-header__dd:focus-within .site-header__dd-menu { opacity: 1; visibility: visible; transform: none; }
.site-header__dd-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-md); }
.site-header__dd-menu a:hover { background: var(--ink-50); }
.site-header__dd-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--navy-900); letter-spacing: -0.01em; }
.site-header__dd-tag { font-size: 12px; color: var(--ink-500); }
.site-header__mobile-group {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  color: var(--ink-700); padding: 10px 4px; border-bottom: 1px solid var(--border-2);
}
.site-header__mobile-sub { padding-left: 18px !important; color: var(--ink-600) !important; font-size: 14px !important; }

/* サービス帯を1本化（商品グリッドと区別） */
.va-prods__services { margin-top: 20px; }
.vb-prods__services--single { grid-template-columns: 1fr; }

/* SupportLayer — 商品の列に見せない・伴走の帯 */
.support { background: var(--ink-50); }
.support__head { max-width: 720px; margin-bottom: 40px; }
.support__flow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-strong); margin-bottom: 32px;
}
.support__step { padding: 24px 24px 20px; border-left: 1px solid var(--border-1); }
.support__step:first-child { border-left: none; padding-left: 0; }
.support__step-n { font-family: var(--font-mono); font-size: 13px; color: var(--cyan-600); letter-spacing: 0.08em; }
.support__step-t { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--navy-900); margin-top: 8px; letter-spacing: -0.01em; }
.support__step-d { font-size: 13.5px; color: var(--ink-600); line-height: 1.7; margin-top: 6px; }
.support__foot { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.support__note {
  font-size: 13.5px; color: var(--ink-700); line-height: 1.75; margin: 0;
  padding-left: 16px; border-left: 2px solid var(--cyan-500); max-width: 62ch;
}
.support__cta { margin-top: 28px; }

@media (max-width: 860px) {
  .support__flow { grid-template-columns: 1fr 1fr; border-top: none; }
  .support__step { border-left: none; border-top: 1px solid var(--border-1); padding: 18px 0; }
  .support__step:nth-child(2) { border-left: 1px solid var(--border-1); padding-left: 24px; }
}
@media (max-width: 560px) {
  .support__flow { grid-template-columns: 1fr; }
  .support__step, .support__step:nth-child(2) { border-left: none; padding: 16px 0; }
}