/* sierra.ai/jp のトークンを実測してトレースしたスタイル
   出典実測値: headline-xl 65/72/-0.02em, lg 44/48, md 38/46, sm 24/32
   body-lg 20/28, md 18/24, sm 16/24 / label-lg 15/22, md 14/20, sm 12/16
   全階層 font-weight: normal(400) / color-black #222 / gray 100 #f6f5f3, 200 #e4e0dc,
   300 #898683, 400 #625e5b, 700 #302e2d / section padding 80px / grid gutter 16px
   radius 4/6/8/12/16/24/32px / transition .25s cubic-bezier(.4,0,.2,1) */

.v2 {
  color-scheme: light;
  min-height: 100vh;
  --black: #222222;
  --gray-100: #f6f5f3;
  --gray-150: #eeeeee;
  --gray-200: #e4e0dc;
  --gray-250: #c1bcb7;
  --gray-300: #898683;
  --gray-400: #625e5b;
  --gray-700: #302e2d;
  --brand: #e96d28;
  --brand-deep: #c4551a;

  --fs-xl: 65px;
  --lh-xl: 72px;
  --fs-lg: 44px;
  --lh-lg: 48px;
  --fs-md: 38px;
  --lh-md: 46px;
  --fs-sm: 24px;
  --lh-sm: 32px;
  --body-lg: 20px;
  --body-lh-lg: 28px;
  --body-md: 18px;
  --body-lh-md: 24px;
  --body-sm: 16px;
  --body-lh-sm: 24px;
  --label-lg: 15px;
  --label-md: 14px;
  --label-sm: 12px;

  --pad-y: 80px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  background: #ffffff;
  color: var(--gray-700);
  font-size: var(--body-sm);
  line-height: var(--body-lh-sm);
  font-weight: 400;
  letter-spacing: normal;
}

.v2 * {
  box-sizing: border-box;
}

.v2 h1,
.v2 h2,
.v2 h3 {
  font-weight: 400; /* Sierraは見出しも全部 normal */
  margin: 0;
  color: var(--black);
}

.v2 p {
  margin: 0;
  color: var(--gray-400);
}

.v2-inner {
  width: min(1112px, calc(100vw - 48px));
  margin: 0 auto;
}

.v2-section {
  padding: var(--pad-y) 0;
}

/* 見出しブロック: 中央寄せ・h2 ＋ 2行のサブ（Sierraの全セクション共通型） */
.v2-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 720px;
}

.v2-head h2 {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.v2-head p {
  margin-top: 16px;
  text-wrap: balance;
  font-size: var(--body-sm);
  line-height: var(--body-lh-sm);
  max-width: 576px;
  margin-left: auto;
  margin-right: auto;
}

/* ボタン: Sierraは1セクションに1つだけ。塗りのピル */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  font-weight: 400;
  font-size: var(--label-md);
  line-height: 1;
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.v2-btn-solid {
  background: var(--brand);
  color: #ffffff;
}

.v2-btn-solid:hover {
  background: var(--brand-deep);
}

.v2-btn-light {
  background: #ffffff;
  color: var(--black);
}

.v2-btn-light:hover {
  background: var(--gray-100);
}

/* ヘッダー */
.v2-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-150);
}

.v2-nav .v2-inner {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.v2-logo {
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--black);
}

.v2-logo b {
  font-weight: 500;
}

.v2-logo i {
  color: var(--brand);
  font-style: normal;
}

.v2-nav nav {
  display: flex;
  gap: 32px;
}

.v2-nav nav a {
  font-size: var(--body-sm);
  color: var(--gray-400);
  text-decoration: none;
}

.v2-nav nav a:hover {
  color: var(--black);
}

/* ヒーロー: 全面ビジュアル＋h1＋ボタン1つ（Sierraと同じ構成） */
.v2-hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #080a0e;
}

.v2-hero-media {
  position: absolute;
  inset: 0;
}

.v2-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.v2-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 10, 14, 0.92) 0%, rgba(8, 10, 14, 0.55) 38%, rgba(8, 10, 14, 0) 62%);
}

.v2-hero .v2-inner {
  position: relative;
  z-index: 1;
  padding: 96px 0;
}

.v2-hero h1 {
  color: #ffffff;
  font-size: clamp(38px, 5vw, var(--fs-xl));
  line-height: 1.11;
  letter-spacing: -0.02em;
  max-width: 15em;
}

.v2-hero p {
  margin-top: 24px;
  max-width: 30em;
  font-size: var(--body-md);
  line-height: var(--body-lh-md);
  color: rgba(255, 255, 255, 0.78);
}

.v2-hero .v2-btn {
  margin-top: 36px;
}

/* 数字の列（Sierraのロゴ列と同じ位置・同じ余白の使い方） */
.v2-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.v2-figures div {
  text-align: center;
}

.v2-figures b {
  display: block;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--black);
}

.v2-figures span {
  display: block;
  margin-top: 6px;
  font-size: var(--label-md);
  line-height: 20px;
  color: var(--gray-300);
}

/* 大きな角丸ブロック（Sierraがプロダクトを見せている型） */
.v2-showcase {
  border-radius: 24px;
  overflow: hidden;
  background: var(--gray-100);
  padding: 40px 40px 0;
}

.v2-showcase-dark {
  background: linear-gradient(135deg, #2f3a33 0%, #1f2622 100%);
}

.v2-showcase h3 {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  margin-bottom: 28px;
}

.v2-showcase-dark h3 {
  color: rgba(255, 255, 255, 0.94);
}

.v2-showcase img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 28px 34px 0 #0f4f8a11, 0 75px 63px 0 #0f4f8a17;
}

/* イラストは主役ではないので高さを抑え、余白の中に置く。
   プロダクト画面(横長)はそのまま幅いっぱいに出る。 */
.v2-showcase.v2-illust {
  background: transparent;
  padding: 0;
}

.v2-showcase.v2-illust img {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: none;
}

/* 4カラムのテキスト（Sierraの導入成果セクション。カード・枠線・影なし） */
.v2-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.v2-cols article > b {
  display: block;
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--black);
  margin-bottom: 14px;
}

.v2-cols article p {
  font-size: var(--body-sm);
  line-height: var(--body-lh-sm);
}

.v2-cols article small {
  display: block;
  margin-top: 18px;
  font-size: var(--label-md);
  line-height: 20px;
  color: var(--gray-300);
}

/* 3カラム（任せ方） */
.v2-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.v2-quiet {
  background: var(--gray-100);
}

/* 最終CTA */
.v2-cta {
  text-align: center;
  padding: 96px 0;
}

.v2-cta h2 {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.v2-cta p {
  margin: 16px auto 32px;
  max-width: 34em;
  font-size: var(--body-sm);
}

.v2-foot {
  border-top: 1px solid var(--gray-150);
  padding: 32px 0;
  font-size: var(--label-md);
  color: var(--gray-300);
  display: flex;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .v2-cols,
  .v2-cols-3,
  .v2-figures {
    grid-template-columns: repeat(2, 1fr);
  }
  .v2-nav nav {
    display: none;
  }
}

@media (max-width: 560px) {
  .v2 {
    --pad-y: 56px;
  }
  .v2-cols,
  .v2-cols-3 {
    grid-template-columns: 1fr;
  }
  .v2-showcase {
    padding: 24px 20px 0;
  }
}

/* 追加セクション */
.v2-kicker {
  font-size: var(--label-md);
  line-height: 20px;
  letter-spacing: 0.1em;
  color: var(--gray-300);
  margin-bottom: 14px;
}

.v2-asof {
  margin-top: 20px;
  text-align: center;
  font-size: var(--label-md);
  line-height: 20px;
  color: var(--gray-300);
}

.v2-showcase figcaption {
  padding: 18px 0 28px;
  font-size: var(--label-md);
  line-height: 20px;
  color: var(--gray-300);
  text-align: center;
}

.v2-showcase-dark figcaption {
  color: rgba(255, 255, 255, 0.6);
}

.v2-table {
  width: 100%;
  margin-top: 40px;
  border-collapse: collapse;
  font-size: var(--body-sm);
}

.v2-table th,
.v2-table td {
  padding: 16px 12px;
  text-align: right;
  border-bottom: 1px solid var(--gray-200);
}

.v2-table th:first-child,
.v2-table td:first-child {
  text-align: left;
  color: var(--gray-400);
}

.v2-table thead th {
  font-weight: 500;
  color: var(--black);
}

.v2-roster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 24px;
}

.v2-roster article b {
  display: block;
  font-size: var(--body-md);
  font-weight: 500;
  color: var(--black);
}

.v2-roster article span {
  display: block;
  margin: 4px 0 10px;
  font-size: var(--label-sm);
  letter-spacing: 0.06em;
  color: var(--brand);
}

.v2-roster article p {
  font-size: var(--label-md);
  line-height: 20px;
}

.v2-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.v2-steps article span {
  display: block;
  font-size: var(--label-md);
  letter-spacing: 0.1em;
  color: var(--gray-300);
  margin-bottom: 12px;
}

.v2-steps article b {
  display: block;
  font-size: var(--body-md);
  font-weight: 500;
  color: var(--black);
  margin-bottom: 10px;
}

.v2-steps article small {
  display: block;
  margin-top: 14px;
  font-size: var(--label-md);
  color: var(--gray-300);
}

.v2-price article strong {
  display: block;
  margin: 10px 0 16px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 400;
  color: var(--black);
}

.v2-faq {
  display: grid;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
}

.v2-faq article {
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-200);
}

.v2-faq article b {
  display: block;
  font-size: var(--body-md);
  font-weight: 500;
  color: var(--black);
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .v2-roster {
    grid-template-columns: repeat(2, 1fr);
  }
  .v2-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .v2-table {
    display: block;
    overflow-x: auto;
  }
}

.v2-usecases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 64px;
}

.v2-usecases article header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.v2-usecases article header b {
  font-size: var(--label-md);
  letter-spacing: 0.1em;
  color: var(--brand);
  font-weight: 500;
}

.v2-usecases article header small {
  font-size: var(--label-sm);
  color: var(--gray-300);
}

.v2-usecases article h3 {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  margin-bottom: 12px;
}

.v2-usecases article ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v2-usecases article li {
  font-size: var(--label-md);
  color: var(--gray-400);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gray-100);
}

.v2-quiet .v2-usecases article li {
  background: #ffffff;
}

.v2-integrations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.v2-integrations article b {
  display: block;
  font-size: var(--label-md);
  letter-spacing: 0.1em;
  color: var(--gray-300);
  margin-bottom: 12px;
}

.v2-integrations article ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.v2-integrations article li {
  font-size: var(--body-sm);
  line-height: 30px;
  color: var(--black);
}

.v2-roster article small {
  display: block;
  margin-top: 10px;
  font-size: var(--label-sm);
  line-height: 18px;
  color: var(--gray-300);
}

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

.v2-roster article img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  margin-bottom: 12px;
}

/* 挿絵を外したセクションは、見出しと本文だけで成立させる（Sierraの型） */
.v2-head:only-child {
  margin-bottom: 0;
}

/* ── 図解（画像ではなく生のHTML。文字は本物のテキスト） ───────── */
.v2d {
  --line: #eceae7;
  --ink: #37352f;
  --sub: #8f8a85;
  --dim: #a5a09a;
  --ok: #17864a;
  --ng: #c0392b;
  font-size: 14px;
  color: var(--ink);
}

.v2d-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.v2d-k {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--dim);
  font-weight: 600;
  margin-bottom: 8px;
}

.v2d h3 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--ink);
}

.v2d-lead {
  font-size: 14px;
  color: var(--sub);
  margin-bottom: 22px;
  line-height: 1.8;
}

.v2d-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.v2d-tool {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.v2d-tool > b {
  display: block;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: #f6f5f4;
  border-bottom: 1px solid var(--line);
}

.v2d-tool.is-navy > b {
  background: #191919;
  color: #fff;
}

.v2d-tool ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.v2d-tool li {
  font-size: 12.5px;
  color: var(--sub);
  padding: 6px 8px;
  border: 1px solid #f0efed;
  border-radius: 6px;
  margin-bottom: 6px;
  text-align: center;
}

.v2d-tool li:last-child {
  margin-bottom: 0;
}

.v2d-tool.is-gone {
  opacity: 0.42;
}

.v2d-tool.is-gone li {
  text-decoration: line-through;
}

.v2d-link {
  height: 38px;
  position: relative;
}

.v2d-link::before {
  content: "";
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 0;
  height: 19px;
  border-left: 1.5px solid var(--ok);
  border-right: 1.5px solid var(--ok);
  border-bottom: 1.5px solid var(--ok);
  border-radius: 0 0 9px 9px;
}

.v2d-link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 19px;
  width: 1.5px;
  height: 19px;
  background: var(--ok);
}

.v2d-core {
  border: 1.6px solid var(--ok);
  border-radius: 11px;
  padding: 17px;
  text-align: center;
  background: #fff;
}

.v2d-core b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ok);
  margin-bottom: 6px;
}

.v2d-core span {
  font-size: 13px;
  color: var(--sub);
}

.v2d-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.v2d-note b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.v2d-note.is-bad b { color: var(--ng); }
.v2d-note.is-good b { color: var(--ok); }

.v2d-note span {
  font-size: 13.5px;
  color: var(--sub);
  line-height: 1.8;
}

.v2d-mini {
  font-size: 12.5px;
  color: var(--dim);
  margin-top: 13px;
}

/* 層 */
.v2d-layers {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 860px;
  margin: 0 auto;
}

.v2d-layer {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
}

.v2d-layer .v2d-lb {
  flex: none;
  width: 112px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
  font-weight: 600;
}

.v2d-layer b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.v2d-layer span {
  font-size: 13.5px;
  color: var(--sub);
}

.v2d-layer.is-exec {
  background: #191919;
  border-color: #191919;
}

.v2d-layer.is-exec b { color: #fff; }
.v2d-layer.is-exec span { color: rgba(255, 255, 255, 0.66); }
.v2d-layer.is-exec .v2d-lb { color: rgba(255, 255, 255, 0.5); }

.v2d-layer.is-mean {
  border-color: var(--ok);
  border-width: 1.6px;
}

.v2d-layer.is-mean b { color: var(--ok); }

.v2d-dep {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  font-size: 12.5px;
  color: var(--sub);
}

.v2d-dep i {
  width: 1.5px;
  height: 15px;
  background: #dedbd7;
  display: block;
}

/* 資産 */
.v2d-fan {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.v2d-fan div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  font-size: 13.5px;
  background: #fff;
}

.v2d-fan div.is-now {
  border-color: #191919;
  font-weight: 600;
}

.v2d-keep {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.v2d-keep div {
  background: #f6f5f4;
  border-radius: 10px;
  padding: 15px 17px;
}

.v2d-keep b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 5px;
}

.v2d-keep span {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.75;
}

/* 5種類 */
.v2d-kinds {
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
}

.v2d-kind {
  display: grid;
  grid-template-columns: 150px 1fr;
  border-bottom: 1px solid #f2f1ef;
}

.v2d-kind:last-child { border-bottom: 0; }

.v2d-kind > div:first-child {
  background: #fbfbfa;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 600;
}

.v2d-kind > div:last-child {
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--sub);
  line-height: 1.8;
}

.v2-quiet .v2d-tool,
.v2-quiet .v2d-core,
.v2-quiet .v2d-layer,
.v2-quiet .v2d-fan div,
.v2-quiet .v2d-kinds {
  background: #fff;
}

@media (max-width: 860px) {
  .v2d-two { grid-template-columns: 1fr; gap: 40px; }
  .v2d-fan, .v2d-keep { grid-template-columns: 1fr; }
  .v2d-kind { grid-template-columns: 1fr; }
  .v2d-kind > div:first-child { padding-bottom: 0; background: #fff; }
  .v2d-layer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .v2d-layer .v2d-lb { width: auto; }
}

.v2-cols-2 { grid-template-columns: repeat(2, 1fr); gap: 56px; }
.v2-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* colsが2段になる場合の行間 */
.v2-cols-3 > article:nth-child(n + 4),
.v2-cols-4 > article:nth-child(n + 5) {
  margin-top: 0;
}

@media (max-width: 860px) {
  .v2-cols-2, .v2-cols-4 { grid-template-columns: 1fr; }
}

.v2d-kv { grid-template-columns: 1fr auto; }
.v2d-kv > div:first-child { background: #fff; font-weight: 400; font-size: 13.5px; }
.v2d-kv > div:last-child { text-align: right; white-space: nowrap; }
.v2d-ok { color: var(--ok); font-weight: 600; }
.v2d-ng { color: var(--dim); font-weight: 600; }

.v2d-halt {
  margin-top: 26px;
  border: 1px solid #f2d9d5;
  background: #fdf6f5;
  border-radius: 11px;
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--sub);
  text-align: center;
}

.v2d-halt b { color: var(--ng); font-weight: 600; }

.v2d-halt span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ng);
  font-weight: 600;
}

/* AI社員カルーセル */
.v2r { position: relative; }

.v2r-ctrl {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.v2r-ctrl button {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: #fff;
  color: var(--gray-400);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.v2r-ctrl button:hover {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

.v2r-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 236px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.v2r-track::-webkit-scrollbar { display: none; }

.v2r-track article {
  scroll-snap-align: start;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 20px;
  background: #fff;
}

.v2r-face {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.v2r-track article b {
  display: block;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--black);
}

.v2r-track article span {
  display: block;
  margin: 3px 0 12px;
  font-size: var(--label-sm);
  letter-spacing: 0.06em;
  color: var(--brand);
}

.v2r-track article p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--gray-400);
}

.v2r-track article small {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-150);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--gray-300);
}

@media (max-width: 640px) {
  .v2r-track { grid-auto-columns: 78%; }
}

/* ── スクロールで組み上がる説明 ───────────────────────── */
.v2s { height: 420vh; position: relative; }

.v2s-sticky {
  position: sticky;
  top: 108px;
  height: calc(100vh - 108px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.v2s-inner {
  width: min(1112px, calc(100vw - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: center;
}

.v2s-text { position: relative; min-height: 260px; }

.v2s-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}

.v2s-step.is-on { opacity: 1; transform: none; }

.v2s-step span {
  display: block;
  font-size: var(--label-md);
  letter-spacing: 0.12em;
  color: var(--gray-300);
  margin-bottom: 14px;
}

.v2s-step h3 {
  font-size: 30px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 14px;
}

.v2s-step p {
  font-size: var(--body-sm);
  line-height: 1.95;
  color: var(--gray-400);
}

.v2s-dots { position: absolute; bottom: -34px; left: 0; display: flex; gap: 7px; }
.v2s-dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--gray-200); transition: background 0.35s var(--ease); }
.v2s-dots i.is-on { background: var(--black); }

/* ステージ */
.v2s-stage { position: relative; }

.v2s-sources { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

.v2s-src {
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}

.v2s-src b {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

.v2s-src ul { list-style: none; margin: 0; padding: 8px 10px; }
.v2s-src li { font-size: 11.5px; color: var(--gray-300); line-height: 1.9; font-variant-numeric: tabular-nums; }

/* 配線 */
.v2s-wires { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; height: 34px; opacity: 0; transition: opacity 0.5s var(--ease); }
.v2s-wires i { justify-self: center; width: 1.5px; height: 100%; background: var(--gray-250); }

/* 衝突 */
.v2s-conflict {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.45s var(--ease), max-height 0.45s var(--ease);
}

.v2s-conflict span {
  font-size: 12.5px;
  color: #c0392b;
  background: #fdf6f5;
  border: 1px solid #f2d9d5;
  border-radius: 999px;
  padding: 5px 13px;
}

/* 意味の層 */
.v2s-mean {
  border: 1.6px solid #17864a;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.5s var(--ease), max-height 0.5s var(--ease);
}

.v2s-mean-h {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #17864a;
  border-bottom: 1px solid #e3efe7;
  letter-spacing: 0.06em;
}

.v2s-mean-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.v2s-mean-grid > div { padding: 12px 14px; border-right: 1px solid #f2f1ef; border-bottom: 1px solid #f2f1ef; }
.v2s-mean-grid > div:nth-child(2n) { border-right: 0; }
.v2s-mean-grid > div:nth-child(n + 3) { border-bottom: 0; }
.v2s-mean-grid b { display: block; font-size: 12px; color: var(--gray-300); font-weight: 500; margin-bottom: 4px; }
.v2s-mean-grid p { font-size: 13.5px; color: var(--black); line-height: 1.6; }
.v2s-mean-grid small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--gray-300); }

/* 判断 */
.v2s-verdict {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
  padding: 15px 17px;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.5s var(--ease), max-height 0.5s var(--ease);
}

.v2s-who { font-size: 11.5px; color: var(--gray-300); margin-bottom: 7px; }
.v2s-verdict b { display: block; font-size: 15px; font-weight: 500; color: var(--black); margin-bottom: 7px; }
.v2s-verdict p { font-size: 12.5px; line-height: 1.9; color: var(--gray-400); }

/* 段階 */
.v2s-stage.is-step1 .v2s-wires,
.v2s-stage.is-step2 .v2s-wires,
.v2s-stage.is-step3 .v2s-wires { opacity: 1; }

.v2s-stage.is-step1 .v2s-conflict { opacity: 1; max-height: 120px; margin-top: 4px; }

.v2s-stage.is-step2 .v2s-mean,
.v2s-stage.is-step3 .v2s-mean { opacity: 1; max-height: 320px; margin-top: 4px; }

.v2s-stage.is-step3 .v2s-verdict { opacity: 1; max-height: 220px; margin-top: 14px; }

.v2s-stage.is-step2 .v2s-src,
.v2s-stage.is-step3 .v2s-src { transform: scale(0.97); }

@media (max-width: 900px) {
  .v2s { height: auto; }
  .v2s-sticky { position: static; height: auto; padding: 56px 0; }
  .v2s-inner { grid-template-columns: 1fr; gap: 32px; }
  .v2s-text { position: static; min-height: 0; }
  .v2s-step { position: static; opacity: 1; transform: none; margin-bottom: 24px; }
  .v2s-dots { display: none; }
  .v2s-stage .v2s-wires, .v2s-stage .v2s-conflict, .v2s-stage .v2s-mean, .v2s-stage .v2s-verdict {
    opacity: 1; max-height: none; margin-top: 12px;
  }
  .v2s-sources { grid-template-columns: repeat(2, 1fr); }
  .v2s-mean-grid { grid-template-columns: 1fr; }
}

/* main{overflow:clip} と body{overflow-x:hidden} は position:sticky を壊すため、
   v2ページのときだけ解除する（他ページには影響させない） */
html:has(.v2), body:has(.v2) {
  overflow-x: visible;
}

body:has(.v2) main {
  overflow: visible;
}

/* 段が進んだら、役目を終えた要素は畳む（縦にあふれさせない） */
.v2s-stage.is-step2 .v2s-conflict,
.v2s-stage.is-step3 .v2s-conflict {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
}

.v2s-stage .v2s-sources { transition: opacity 0.5s var(--ease); }
.v2s-stage.is-step3 .v2s-sources { opacity: 0.42; }
.v2s-stage.is-step3 .v2s-src ul { display: none; }

.v2s-stage.is-step2 .v2s-mean,
.v2s-stage.is-step3 .v2s-mean { max-height: 260px; }

.v2s-stage.is-step3 .v2s-verdict { max-height: 190px; }

/* たどる */
.v2t { max-width: 820px; margin: 0 auto; }

.v2t-row {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 11px;
  background: #fff;
  padding: 14px 18px;
  margin-bottom: 26px;
}

.v2t-row:last-child { margin-bottom: 0; }

.v2t-k {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--gray-300);
  font-weight: 600;
}

.v2t-b b { display: block; font-size: 15px; font-weight: 500; color: var(--black); }
.v2t-b small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--gray-300); }

.v2t-arrow {
  position: absolute;
  left: 39px;
  bottom: -26px;
  width: 1.5px;
  height: 26px;
  background: var(--gray-250);
}

.v2t-row.is-ask { background: var(--gray-100); border-color: var(--gray-100); }
.v2t-row.is-ans { border-color: #17864a; border-width: 1.6px; }
.v2t-row.is-ans .v2t-k { color: #17864a; }
.v2t-row.is-ans .v2t-b b { color: #17864a; }

/* 流れ */
.v2d-flow { display: flex; flex-direction: column; gap: 8px; }

.v2d-flow > div {
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--gray-400);
  background: #fff;
  position: relative;
}

.v2d-flow.is-ok > div { border-color: #cfe3d6; }
.v2d-flow.is-ok > div:last-child { color: var(--black); }

/* 名寄せ */
.v2d-alias { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

.v2d-alias > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  padding: 10px 14px;
  background: #fff;
}

.v2d-alias span { font-size: 12px; color: var(--gray-300); }
.v2d-alias b { font-size: 14px; font-weight: 500; color: var(--black); }
.v2d-alias.is-tied { margin-top: 10px; }
.v2d-alias.is-tied > div { border-color: #cfe3d6; }

/* メタデータ */
.v2d-kind.v2d-meta { grid-template-columns: 180px 1fr 1fr; }
.v2d-kind.v2d-meta > div { padding: 14px 16px; font-size: 13.5px; }
.v2d-kind.v2d-meta > div:first-child { background: #fbfbfa; }
.v2d-kind.v2d-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.v2d-kind.v2d-meta .is-bad { color: var(--dim); }
.v2d-kind.v2d-meta .is-good { color: var(--ink); }
.v2d-meta-h > div { font-size: 12px !important; color: var(--dim) !important; font-weight: 600; }

/* スモールスタート */
.v2d-small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.v2d-small > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.v2d-small span { display: block; font-size: 12px; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 8px; }
.v2d-small b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 7px; }
.v2d-small p { font-size: 13px; line-height: 1.85; color: var(--sub); }

@media (max-width: 860px) {
  .v2d-kind.v2d-meta { grid-template-columns: 1fr; }
  .v2d-small { grid-template-columns: 1fr; }
}

.v2-btn-ghost { background: transparent; color: var(--black); border: 1px solid var(--gray-250); }
.v2-btn-ghost:hover { background: var(--gray-100); }
.v2-ctapair { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.v2-ctapair p { margin-top: 8px; font-size: var(--label-md); color: var(--gray-300); max-width: 480px; }
@media (min-width: 561px) {
  .v2-ctapair { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .v2-ctapair p { width: 100%; margin-top: 14px; }
}