/* site/styles.css — Orchestrator の公開 HP（Concept と Product の2ページ）の様式。素の CSS 1ファイル。依存なし・CDN なし・ビルドなし。 */

/* 決めたこと

   1. 色は 地 #080A0F・字 #F5F6F8・弱い字 #9AA3B2・罫 rgba(245,246,248,.10)・強調のグラデ の5つからだけ作る。
      紫 #8A2BE2 は**字に使わない**（字に載せると 3.3 で、16px の字には届かない）。罫とにじみにだけ置く。
   2. 書体は `assets/Aijus-Regular.otf`（欧文だけ）。総称と並べて置き、当てた場所は斜体にする
      ——**ロゴの記章が `skewX(-10)` である**。和文を含む場所には掛けない（日本語が寝る）。
   3. 狭い画面を既定にし、`min-width` の側で広げる。製品画面見本とできることの図は、**罫と余白だけで組む**。
   4. **`.desktop` だけは例外である**（末尾の「例外」を読むこと）。 */

/* ------------------------------------------------------------------ 値 */

:root {
  /* 地と字 */
  --bg: #080A0F;
  --ink: #F5F6F8;
  --ink-dim: #9AA3B2;

  /* 罫。10% は節の区切り、22% は組織図と見本の骨格（10% では薄すぎて読めない） */
  --line: rgba(245, 246, 248, .10);
  --line-strong: rgba(245, 246, 248, .22);

  /* 面。地の上の薄い白で、地そのものは動かさない */
  --surface-1: rgba(245, 246, 248, .035);
  --surface-2: rgba(245, 246, 248, .07);

  --cyan: #00C6FF;
  --blue: #0072FF;
  --violet: #8A2BE2;

  /* 強調のグラデ。罫・にじみ・24px 以上の字に使う */
  --grad: linear-gradient(135deg, #00C6FF, #0072FF 50%, #8A2BE2);
  /* 字を載せる小さい面（記章・四角）。字の真下が薄い側へ来るよう止めを寄せる */
  --grad-ink: linear-gradient(135deg, #00C6FF, #0BA8FF 55%, #0072FF 88%, #8A2BE2);
  /* 主のボタン。濃い字を載せるので紫の端は使わない（#8A2BE2 の上は 3.3 で、16px の字には届かない） */
  --grad-solid: linear-gradient(135deg, #00C6FF, #0BA8FF 52%, #0072FF);

  --font-jp: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  /* Aijus は欧文だけの書体。無い字（仮名 ≒ ＝ → など）は総称へ落ちる */
  --font-en: "Aijus", system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

  --content: 1180px;
  --gutter: clamp(18px, 5vw, 44px);
  /* 広い画面では左右の余白を均等に広げて、中身を中央へ寄せる */
  --pad-inline: max(var(--gutter), calc((100% - var(--content)) / 2));

  --radius: 14px;
  --ease: .18s ease;
}

/* 書体は自前の1つだけ。CDN を読まない。表示は止めない */
@font-face {
  font-family: "Aijus";
  src: url("assets/Aijus-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------ 下地 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 頭が貼り付くので、目次の飛び先をその分だけ下げる */
  scroll-padding-block-start: 108px;    /* 狭い画面では目次が2行目へ落ちる */
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.9;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: var(--cyan);
  text-underline-offset: .2em;
}

/* 鍵で辿ったときだけ、はっきり見える輪を出す */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

::selection {
  background-color: var(--cyan);
  color: var(--bg);
}

/* ------------------------------------------ Aijus を当てる場所（すべて斜体）

   **`font-style: oblique` は Aijus に効かない。**ブラウザは Web フォントへ合成の斜体を掛けない——
   実測で `normal` と `oblique 10deg` の描画が**1ピクセルも変わらなかった**。
   **だから記章と同じ `skewX(-10deg)` を幾何的に掛ける。****ロゴの記章が `skewX(-10)` である。**

   **例外を作らない。Aijus を使う場所はすべて傾ける。** */

.brand span,
.eyebrow,
.section-label,
.kicker,
.cards small,
.cards h3,
.flow span,
.flow h3,
.person span,
.person i,
.status,
.product-sidebar b,
.product-sidebar span,
.product-top span,
.product-top button,
.future-grid strong,
.statement span,
.cta > span,
.cap-person strong,
.cap-tools b,
.features span,
.bridge-inner > p:first-child,
.product-download > span,
.nav nav a,
.nav-cta,
.lang {
  font-family: var(--font-en);
  display: inline-block;             /* **インラインの要素には `transform` が掛からない** */
  transform: skewX(-10deg);
}

/* 既に箱であるもの（`grid`・`flex`・`block`）は、そのまま傾ける。
   **`display` を書き換えない**——**中央寄せや間隔が落ちる**ため。 */
.avatar,
.p-avatar,
.big-avatar,
.person b,
.unicorn,
.button {
  font-family: var(--font-en);
  transform: skewX(-10deg);
}

/* --------------------------------------------------------------- 頭 */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(12px, 3vw, 26px);
  padding-block: clamp(10px, 2vw, 15px);
  padding-inline: var(--pad-inline);
  background-color: rgba(8, 10, 15, .82);
  border-block-end: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* 透かしが使えない環境では、地をそのまま敷く */
@supports not (backdrop-filter: blur(1px)) {
  .nav {
    background-color: var(--bg);
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: clamp(15px, 2.8vw, 19px);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.2;
  text-decoration: none;
}

/* 記章（assets/orchestrator-4a-mark.svg）。`img` として置かれる（alt=""） */
.mark {
  flex: none;
  display: block;
  inline-size: clamp(22px, 4.4vw, 27px);
}

/* 目次。狭い画面では2行目へ落として、**隠さない**（2ページを行き来する道である） */
.nav nav {
  order: 3;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px clamp(14px, 2.6vw, 28px);
  font-size: clamp(13px, 2.2vw, 14px);
}

.nav nav a {
  padding-block: .3em;
  color: var(--ink-dim);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}

.nav nav a:hover {
  color: var(--ink);
  border-block-end-color: var(--cyan);
}

/* 目次の中の Download だけは、押せる先として色で示す */
.download-nav {
  color: var(--cyan);
}

.nav-cta {
  flex: none;
  padding: .5em 1.05em;
  color: var(--cyan);
  font-size: clamp(13px, 2.2vw, 14px);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid rgba(0, 198, 255, .40);
  border-radius: 999px;
  transition: color var(--ease), border-color var(--ease),
    background-color var(--ease);
}

.nav-cta:hover {
  color: var(--ink);
  border-color: var(--cyan);
  background-color: rgba(0, 198, 255, .10);
}

/* 日本語 / English の切り替え。**目立たないが押せる**——頭の中で .nav-cta の隣に並ぶ。
   中身は lang.js が入れる（EN / 日本語）ので、幅は成り行きでよい。 */
.lang {
  flex: none;
  /* 余りを左に寄せ、切り替えと .nav-cta を右の端へまとめる（**隣り合って並ぶ**） */
  margin-inline-start: auto;
  padding: .5em .85em;
  color: var(--ink-dim);
  font-size: clamp(12px, 2.2vw, 13px);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease),
    background-color var(--ease);
}

.lang:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background-color: var(--surface-1);
}

/* -------------------------------------------------------- 押せるもの */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px 22px;
  font-size: clamp(13px, 2.3vw, 14px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform var(--ease), box-shadow var(--ease),
    border-color var(--ease), color var(--ease), background-color var(--ease);
}

.primary {
  background-image: var(--grad-solid);
  color: var(--bg);
}

.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 114, 255, .30);
}

.ghost {
  color: var(--ink);
  border-color: var(--line-strong);
}

.ghost:hover {
  color: var(--cyan);
  border-color: rgba(0, 198, 255, .45);
}

/* 配布の1つだけ大きい。中身は欧文（DOWNLOAD ORCHESTRATOR）なので、Aijus の斜体でよい */
.large {
  padding: 17px 30px;
  font-size: clamp(15px, 3vw, 17px);
  font-weight: 400;
  letter-spacing: .02em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 14px);
}

/* 頭の下ではない場所（橋・製品の題・締め）で、ボタンを中央に揃える */
.centered {
  justify-content: center;
}

/* --------------------------------------------------------------- 題 */

.hero {
  position: relative;
  overflow: hidden;                     /* 背後のにじみを枠内に留める */
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 3.2vw, 26px);
  min-block-size: 84vh;                 /* 古い環境のための落とし所 */
  min-block-size: 84svh;
  padding-block: clamp(96px, 18vw, 150px) clamp(60px, 12vw, 100px);
  padding-inline: var(--pad-inline);
  text-align: center;
  background-image: radial-gradient(120% 80% at 50% -10%,
      rgba(0, 198, 255, .10), transparent 58%);
}

/* 背後のにじみ。装飾なので、有っても無くても本文の配置は変わらない */
.ambient {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .32;
  filter: blur(60px);
  pointer-events: none;
  animation: ambient-drift 26s ease-in-out infinite alternate;
}

.a1 {
  inset-block-start: 6%;
  inset-inline-start: -10%;
  inline-size: min(30rem, 84vw);
  background-image: radial-gradient(closest-side, rgba(0, 198, 255, .55), transparent);
}

.a2 {
  inset-block-start: 30%;
  inset-inline-end: -12%;
  inline-size: min(24rem, 72vw);
  background-image: radial-gradient(closest-side, rgba(138, 43, 226, .45), transparent);
  animation-duration: 32s;
  animation-direction: alternate-reverse;
}

@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 3%, 0) scale(1.08); }
}

/* にじみより前へ、本文を出す */
.hero > :not(.ambient) {
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* 記章の線（参考の DOM にある空の span）。無ければ何も出ない */
.eyebrow span {
  display: inline-block;
  inline-size: 26px;
  block-size: 1px;
  margin-inline-end: 10px;
  vertical-align: middle;
  background-image: var(--grad);
}

/* 参考の「巨大すぎる字を抑えた」調整。狭い画面は 800px の側の値（下の広い画面）へ渡す */
.hero h1 {
  font-size: clamp(48px, 13vw, 64px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.lead {
  max-inline-size: 44rem;
  color: var(--ink);
  font-size: clamp(14px, 3.9vw, 17px);
  line-height: 1.95;
}

/* OLD ／ NEW。字は地の字、ラベルだけ Aijus、罫は1本 */
.statement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem clamp(.7rem, 2vw, 1.1rem);
  max-inline-size: 46rem;
  padding: 13px clamp(14px, 3vw, 22px);
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: clamp(13px, 2.2vw, 14px);
  line-height: 1.7;
}

.statement span {
  padding: .15em .7em;
  color: var(--ink-dim);
  font-size: .74em;
  font-weight: 400;
  letter-spacing: .16em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.statement strong {
  font-weight: 600;
}

/* → と ＝ は Aijus に無い字。総称で、傾けない */
.statement i {
  font-family: var(--font-jp);
  font-style: normal;
  color: var(--cyan);
}

/* ------------------------------------------------------------ 節の共通 */

.section {
  padding-block: 85px;
  padding-inline: var(--pad-inline);
  border-block-start: 1px solid var(--line);
}

/* 節ごとに地をわずかに動かす（同じ地のまま並べない）。地の色相は足していない */
.identity {
  background-image: linear-gradient(180deg, var(--surface-2), transparent 62%);
}

.org {
  background-image: linear-gradient(180deg, rgba(0, 114, 255, .06), transparent 48%);
}

.how {
  background-image: linear-gradient(180deg, var(--surface-1), transparent 60%);
}

.future {
  background-image: linear-gradient(180deg, rgba(138, 43, 226, .07), transparent 58%);
}

/* できることの節は白の被せ（前の節の地から切り替える） */
.capabilities {
  background-image: linear-gradient(180deg, var(--surface-1), transparent 55%);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(10px, 2.2vw, 12px);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
}

.section-label::before {
  content: "";
  flex: none;
  inline-size: clamp(18px, 3.5vw, 26px);
  block-size: 2px;
  border-radius: 2px;
  background-image: var(--grad);
}

.section h2 {
  margin-block-start: clamp(14px, 2.6vw, 20px);
  font-size: clamp(30px, 9vw, 42px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* 見出しの中の一語。和文なので正立。24px 以上なので、グラデの端（紫 3.3）でも大きな字の線（3:1）を越える */
.hero h1 em,
.section h2 em,
.product-hero h1 em,
.unicorn em {
  font-style: normal;
  color: var(--cyan);                   /* グラデを持たない環境のための落とし所 */
}

/* 締めの1行は欧文。**傾きは上の一覧から来る**（`.unicorn` に `skewX` が掛かっている） */
.unicorn em {
  color: var(--cyan);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 em,
  .section h2 em,
  .product-hero h1 em,
  .unicorn em {
    background-image: var(--grad);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* 見出しと本文の2列。狭い画面では1列のまま */
.split,
.org-head {
  display: grid;
  gap: clamp(18px, 3.5vw, 32px);
}

.copy {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.95;
}

.copy p + p {
  margin-block-start: 1rem;
}

/* 6つの問い。罫の枠だけで並べる */
.questions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(7px, 1.8vw, 10px);
  margin-block-start: clamp(20px, 4vw, 28px);
}

.questions span {
  padding: .4em .95em;
  color: var(--ink);
  font-size: clamp(12px, 2.2vw, 14px);
  line-height: 1.6;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* 節の締めの言い切り。罫1本で切り分ける */
.accent-copy {
  margin-block-start: clamp(20px, 4vw, 28px);
  padding-block-start: clamp(16px, 3vw, 22px);
  color: var(--ink-dim);
  font-size: clamp(16px, 2.8vw, 20px);
  line-height: 1.8;
  border-block-start: 1px solid var(--line);
}

.accent-copy b {
  color: var(--ink);
}

/* -------------------------------------------------------- 02 人格 */

.identity,
.future {
  text-align: center;
}

.identity .section-label,
.future .section-label,
.future .kicker {
  justify-content: center;
}

.center-note {
  max-inline-size: 44rem;
  margin-block-start: clamp(16px, 3vw, 24px);
  margin-inline: auto;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.95;
}

/* 5つの欄。幅が足りた数だけ自動で並ぶ（狭い画面は1列） */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2.2vw, 16px);
  margin-block-start: clamp(28px, 5vw, 44px);
  text-align: start;
}

.cards article {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 3vw, 22px);
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* 欄の頭の差し色。罫と余白だけで組む */
.cards article::before {
  content: "";
  inline-size: 26px;
  block-size: 2px;
  margin-block-end: clamp(16px, 3.5vw, 26px);
  border-radius: 2px;
  background-image: var(--grad);
}

.cards small {
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
}

.cards h3 {
  margin-block: auto 0;
  padding-block-start: 26px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
}

.cards p {
  margin-block-start: 4px;
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 600;
  line-height: 1.3;
}

.cards b {
  margin-block-start: 7px;
  color: var(--ink-dim);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}

/* 原理。上下の罫だけで帯にする */
.principle {
  display: grid;
  gap: clamp(12px, 2.4vw, 18px);
  margin-block-start: clamp(32px, 6vw, 52px);
  padding-block: clamp(24px, 4vw, 36px);
  text-align: start;
  border-block: 1px solid var(--line);
}

.principle > span {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
}

.principle p {
  font-size: clamp(18px, 3.2vw, 26px);
  line-height: 1.6;
}

.principle small {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.85;
}

/* -------------------------------------------------------- 03 組織 */

.org-head p {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.95;
}

/* 組織図。挿絵を使わず、罫線と余白だけで組む。
   狭い画面＝根 → 縦罫 → 頭（左に縦のレール、AIの札がそこからぶら下がる） */
.orgchart {
  max-inline-size: 32rem;
  margin-block-start: clamp(32px, 6vw, 56px);
  margin-inline: auto;
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  padding: clamp(14px, 2.8vw, 18px) clamp(14px, 3vw, 20px);
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.person b {
  font-size: clamp(15px, 2.5vw, 17px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.4;
}

.person span {
  margin-block-start: 2px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.person i {
  margin-block-start: 9px;
  padding: .22em .7em;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  background-color: rgba(0, 198, 255, .10);
  border: 1px solid rgba(0, 198, 255, .28);
  border-radius: 999px;
}

/* 根の札は、頭より一段上であることを幅でも示す */
.orgchart > .person,
.person.root {
  max-inline-size: 22rem;
  margin-inline: auto;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 42px;
  block-size: 42px;
  margin-block-end: 10px;
  padding: 2px;
  color: var(--bg);
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 400;
  letter-spacing: .03em;
  background-image: var(--grad-ink);
  border-radius: 50%;
}

.avatar.human {
  color: var(--ink);
  background-image: none;
  background-color: var(--surface-2);
  border: 1px solid var(--line-strong);
}

.person.ai {
  position: relative;
  background-color: var(--surface-2);
  border-color: rgba(0, 198, 255, .28);
}

/* 根と、頭から下への縦罫 */
.connector {
  inline-size: 1px;
  block-size: clamp(16px, 3vw, 26px);
  margin-inline: auto;
  background-color: var(--line-strong);
}

.teams {
  display: grid;
  gap: clamp(28px, 6vw, 40px);
}

.team {
  --rail-col: 20px;
  --rail-gap: 14px;
  --team-gap: 11px;
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-col) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--rail-gap);
  row-gap: var(--team-gap);
}

/* 頭は2列をまたぐ */
.team > .person:first-child {
  grid-column: 1 / -1;
  grid-row: 1;
}

/* 縦のレール。頭の下端から最後の札の下端まで。狭い画面の組み方 */
.line {
  grid-column: 1;
  grid-row: 2 / 4;
  justify-self: center;
  align-self: stretch;
  inline-size: 1px;
  margin-block-start: calc(-1 * var(--team-gap));
  background-color: var(--line-strong);
}

/* レールから札への横の足。札の左端から左へ伸ばす */
.person.ai::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(-1 * (var(--rail-col) / 2 + var(--rail-gap)));
  inline-size: calc(var(--rail-col) / 2 + var(--rail-gap));
  block-size: 1px;
  background-color: var(--line-strong);
}

.org-foot {
  max-inline-size: 44rem;
  margin-block-start: clamp(32px, 5vw, 48px);
  margin-inline: auto;
  padding-block-start: clamp(20px, 4vw, 28px);
  color: var(--ink-dim);
  font-size: 15px;
  text-align: center;
  border-block-start: 1px solid var(--line);
}

/* -------------------------------------------------------- 04 しくみ */

.flow {
  display: grid;
  gap: clamp(24px, 5vw, 32px);
  margin-block-start: clamp(28px, 5vw, 40px);
  padding-block-start: clamp(20px, 4vw, 28px);
  border-block-start: 1px solid var(--line);
}

.flow > div::before {
  content: "";
  display: block;
  inline-size: 26px;
  block-size: 2px;
  margin-block-end: 14px;
  border-radius: 2px;
  background-image: var(--grad);
}

.flow span {
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
}

.flow h3 {
  margin-block-start: 4px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
}

.flow b {
  display: block;
  margin-block-start: 6px;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 600;
  line-height: 1.5;
}

.flow p {
  margin-block-start: 7px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.8;
}

/* -------------------------------------------------------- 05 変化 */

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-start: clamp(28px, 5vw, 40px);
  font-size: clamp(10px, 2.2vw, 12px);
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--cyan);
}

.kicker::before {
  content: "";
  flex: none;
  inline-size: clamp(18px, 3.5vw, 26px);
  block-size: 2px;
  border-radius: 2px;
  background-image: var(--grad);
}

.future-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 28px);
  margin-block-start: clamp(28px, 5vw, 40px);
  padding-block-start: clamp(24px, 4vw, 36px);
  text-align: start;
  border-block-start: 1px solid var(--line);
}

.future-grid strong {
  display: block;
  font-size: clamp(20px, 3.6vw, 26px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.future-grid p {
  margin-block-start: 8px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.8;
}

/* 締めの巨大な1行。Aijus は Regular しか無いので、太らせず大きさで出す */
.unicorn {
  margin-block-start: clamp(48px, 11vw, 104px);
  font-size: clamp(44px, 12vw, 64px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
}

/* ------------------------------------------------------------ 橋 */

.product-bridge {
  text-align: center;
}

.bridge-inner {
  max-inline-size: 850px;
  margin-block-start: 35px;
  margin-inline: auto;
}

/* THIS IS NOT JUST A VISION. —— 節のラベルと同じ扱い（字は総称のまま。字の契約の外） */
.bridge-inner > p:first-child {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.bridge-copy {
  max-inline-size: 680px;
  margin-block-start: clamp(12px, 3vw, 18px);
  margin-block-end: clamp(24px, 4vw, 30px);
  margin-inline: auto;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.95;
}

/* -------------------------------------------------------- 製品（題） */

.product-hero {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(16px, 3.2vw, 26px);
  min-block-size: 80vh;
  min-block-size: 80svh;
  padding-block: clamp(104px, 18vw, 170px) clamp(60px, 10vw, 95px);
  padding-inline: var(--pad-inline);
  text-align: center;
  background-image: radial-gradient(120% 80% at 50% -10%,
      rgba(0, 198, 255, .09), transparent 58%);
}

.product-hero h1 {
  font-size: clamp(38px, 10.5vw, 54px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.product-hero > p {
  max-inline-size: 52rem;
  color: var(--ink-dim);
  font-size: clamp(14px, 2.4vw, 16px);
  line-height: 2;
}

/* ------------------------------------------------- 製品（画面見本と6枚） */

.product {
  background-image: linear-gradient(180deg, var(--surface-1), transparent 55%);
}

.product-head {
  margin-block-end: clamp(28px, 5vw, 40px);
}

/* 画面見本。枠の外に1px、中は罫で区切る。挿絵を使わない */
.product-shell {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background-color: rgba(245, 246, 248, .02);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .30);
}

/* 狭い画面では、左の柱を「タブの帯」として上に置く（隠さない） */
.product-sidebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 14px 16px;
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: .06em;
  border-block-end: 1px solid var(--line);
}

.product-sidebar b {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .1em;
}

.product-sidebar span {
  padding: 6px 10px;
  border-radius: 7px;
}

.product-sidebar .active {
  color: var(--cyan);
  background-color: rgba(0, 198, 255, .12);
}

.product-main {
  padding: 18px 20px;
}

.product-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block-end: 16px;
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: .06em;
  border-block-end: 1px solid var(--line);
}

.product-top button {
  padding: 8px 12px;
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  background-image: var(--grad-solid);
  border: 0;
  border-radius: 7px;
  cursor: default;
}

/* 1行＝アイコン・名・所属・状態・道具2つ。狭い画面では2行に折る */
.persona-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-block: 16px;
  color: var(--ink-dim);
  font-size: 12px;
  border-block-end: 1px solid var(--line);
}

.persona-row > div {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.persona-row b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
}

.persona-row small {
  display: block;
  margin-block-start: 2px;
  color: var(--ink-dim);
  font-size: 11px;
}

.p-avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  color: var(--bg);
  font-size: 12px;
  font-weight: 400;
  background-image: var(--grad-ink);
  border-radius: 9px;
}

.status {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--cyan);
}

/* 抜けた（休んでいる）行。地の字は落とさず、色だけ弱める */
.muted {
  color: var(--ink-dim);
}

.muted b,
.muted .status {
  color: var(--ink-dim);
}

.muted .p-avatar {
  color: var(--ink-dim);
  background-image: none;
  background-color: var(--surface-2);
  border: 1px solid var(--line);
}

/* 6枚。罫の格子で組む（枠の外にも罫があるので、表のように閉じる） */
.features {
  display: grid;
  grid-template-columns: 1fr;
  margin-block-start: clamp(28px, 5vw, 40px);
  text-align: start;
  border-block-start: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}

.features article {
  padding: clamp(20px, 3vw, 28px);
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
}

.features span {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--cyan);
}

.features h3 {
  margin-block: clamp(20px, 3vw, 28px) 9px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.5;
}

.features p {
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.85;
}

/* --------------------------------------------------- できることの図 */

/* Persona → 道具の3段。**罫と矢印の字だけ**で組む。狭い画面は縦に積む */
.capability-diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 24px);
  align-items: center;
  max-inline-size: 900px;
  margin-block-start: clamp(32px, 5vw, 48px);
  margin-inline: auto;
}

.cap-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 20px;
  background-color: var(--surface-1);
  border: 1px solid rgba(0, 198, 255, .28);
  border-radius: 18px;
  text-align: center;
}

.big-avatar {
  display: grid;
  place-items: center;
  inline-size: 68px;
  block-size: 68px;
  margin-block-end: 14px;
  color: var(--bg);
  font-size: 26px;
  font-weight: 400;
  background-image: var(--grad-ink);
  border-radius: 18px;
}

.cap-person strong {
  font-size: clamp(17px, 2.6vw, 19px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.3;
}

.cap-person span {
  margin-block-start: 2px;
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: .06em;
}

.cap-arrow {
  color: var(--cyan);
  font-size: 28px;
  line-height: 1;
  text-align: center;
  transform: rotate(90deg);
}

.cap-tools {
  display: grid;
  gap: 10px;
}

.cap-tools > div {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.cap-tools b {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .15em;
  color: var(--cyan);
}

.cap-tools span {
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.7;
}

/* 「予定」の札（**まだ実装していないものを、実装済みと読ませない**）。 */
.cap-tools small {
  justify-self: start;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: .04em;
}

.diagram-note {
  max-inline-size: 46rem;
  margin-block-start: clamp(24px, 4vw, 34px);
  margin-inline: auto;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

/* ------------------------------------------------------------ 配布 */

.product-download {
  text-align: center;
  background-image: radial-gradient(90% 70% at 50% 120%,
      rgba(0, 114, 255, .12), transparent 60%);
}

.product-download > span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--cyan);
}

.product-download h2 {
  margin-block: 22px 14px;
}

.product-download p {
  max-inline-size: 44rem;
  margin-inline: auto;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.95;
}

.product-download .large {
  margin-block-start: clamp(24px, 5vw, 34px);
}

.product-download small {
  display: block;
  margin-block-start: 18px;
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: .14em;
}

/* ------------------------------------------------------------ 締め */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* 背後の光。装飾（無くても本文の配置は変わらない） */
.orb {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: min(44rem, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-image: radial-gradient(closest-side,
      rgba(0, 198, 255, .18),
      rgba(0, 114, 255, .12) 45%,
      rgba(138, 43, 226, .10) 70%,
      transparent);
  filter: blur(26px);
  pointer-events: none;
}

.cta > :not(.orb) {
  position: relative;
  z-index: 1;
}

.cta > span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--cyan);
}

.cta p {
  max-inline-size: 44rem;
  margin-block-start: clamp(14px, 3vw, 20px);
  margin-inline: auto;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.95;
}

.cta .hero-actions {
  margin-block-start: clamp(22px, 5vw, 34px);
}

/* --------------------------------------------------------------- 足 */

footer {
  display: grid;
  gap: 9px;
  padding-block: clamp(28px, 5vw, 44px);
  padding-inline: var(--pad-inline);
  color: var(--ink-dim);
  font-size: 13px;
  border-block-start: 1px solid var(--line);
}

footer .brand {
  color: var(--ink);
  font-size: clamp(15px, 2.8vw, 17px);
}

footer small {
  font-size: .95em;
}

/* ----------------------------------------------------------- 広い画面 */

/* タブレット以上。目次を頭の1行目へ戻し、足を横に並べる */
@media (min-width: 44rem) {
  .nav nav {
    order: 0;
    flex-basis: auto;
  }

  /* 目次が頭の1行目へ戻るので、飛び先の下げを詰める */
  html {
    scroll-padding-block-start: 84px;
  }

  footer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(16px, 3vw, 32px);
  }

  footer p {
    text-align: center;
  }

  .cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }

  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 40px);
  }

  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 机以上。2列の組みと、参考の字の落差をここで開く */
@media (min-width: 50rem) {
  .section {
    padding-block: 105px;
  }

  .hero h1 {
    font-size: clamp(52px, 7.2vw, 104px);
    line-height: 1;
    letter-spacing: -.06em;
  }

  .section h2 {
    font-size: clamp(36px, 4.3vw, 62px);
    line-height: 1.2;
    letter-spacing: -.05em;
  }

  .product-hero h1 {
    font-size: clamp(46px, 5.8vw, 80px);
    line-height: 1.08;
    letter-spacing: -.05em;
  }

  .unicorn {
    font-size: clamp(58px, 8vw, 112px);
  }

  .lead {
    font-size: clamp(14px, 1.25vw, 18px);
  }

  .split,
  .org-head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(32px, 6vw, 72px);
    align-items: start;
  }

  /* 本文の列を少し下げて、見出しとの段差を作る */
  .split > .copy {
    margin-block-start: clamp(6px, 2vw, 24px);
  }

  .org-head p {
    align-self: center;
  }

  .features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 画面見本。左に柱を立て、中は表のように罫で区切る */
  .product-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .product-sidebar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 24px 18px;
    border-block-end: 0;
    border-inline-end: 1px solid var(--line);
  }

  .product-sidebar b {
    margin-block-end: 25px;
  }

  .product-main {
    padding: 22px 28px;
  }

  /* 1行に戻す（アイコン・名・所属・状態・道具2つ） */
  .persona-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 70px 100px 70px;
    gap: 13px;
    padding-inline: 5px;
  }

  .persona-row > div {
    flex: none;
  }

  .p-avatar {
    inline-size: 36px;
    block-size: 36px;
  }

  /* できることの図を、1本の流れへ開く */
  .capability-diagram {
    grid-template-columns: 230px 70px minmax(0, 1fr);
    gap: 25px;
  }

  .cap-person {
    block-size: 230px;
  }

  .cap-arrow {
    transform: none;
  }

  .cap-tools > div {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 0 16px;
    align-items: center;
    padding: 20px 24px;
  }

  .future-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 40px);
  }
}

/* 机以上。組織図を本来の形（根 → 2チーム → 各2枚の札）に開く */
@media (min-width: 56rem) {
  .orgchart {
    max-inline-size: 62rem;
  }

  .teams {
    --teams-gap: clamp(24px, 5vw, 48px);
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--teams-gap);
  }

  /* 2つのチームを結ぶ横罫。等しい2列の中心どうし（隙間の分だけ内側へ寄せる） */
  .teams::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(25% - var(--teams-gap) / 4);
    inset-inline-end: calc(25% - var(--teams-gap) / 4);
    block-size: 1px;
    background-color: var(--line-strong);
  }

  .team {
    --team-gap-x: clamp(16px, 3vw, 28px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    column-gap: var(--team-gap-x);
    row-gap: 0;
    padding-block-start: 32px;
  }

  /* 横罫から頭への縦の足 */
  .team::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    block-size: 32px;
    background-color: var(--line-strong);
  }

  .team > .person:first-child {
    grid-row: auto;
  }

  /* 頭から2枚の札へ。上と左右の罫で括る（中央の50%＝札の中心） */
  .line {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: center;
    align-self: start;
    inline-size: calc(50% + var(--team-gap-x) / 2);
    block-size: 1.1rem;
    margin-block: .75rem 0;
    background-color: transparent;
    border-block-start: 1px solid var(--line-strong);
    border-inline-start: 1px solid var(--line-strong);
    border-inline-end: 1px solid var(--line-strong);
  }

  /* 縦のレールと横の足は、この形では要らない */
  .person.ai::before {
    content: none;
  }

  .principle {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
    column-gap: clamp(24px, 4vw, 40px);
    align-items: center;
  }

  .flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  /* 段のあいだの縦罫。余白は各段の内側で取る */
  .flow > div {
    padding-inline: clamp(16px, 2.5vw, 24px);
  }

  .flow > div:first-child {
    padding-inline-start: 0;
  }

  .flow > div + div {
    border-inline-start: 1px solid var(--line);
  }
}

/* ----------------------------------------------------------- 動き */

/* 動きを減らす設定なら、にじみも浮きも止める */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ambient {
    animation: none;
  }

  .nav nav a,
  .nav-cta,
  .button,
  .lang {
    transition: none;
  }

  .primary:hover {
    transform: none;
  }
}

/* ------------------------------------------------------ 印刷（破綻しない程度） */

@page {
  margin: 18mm;
}

@media print {
  :root {
    --bg: #FFFFFF;
    --ink: #101318;
    --ink-dim: #454B56;
    --line: rgba(16, 19, 24, .30);
    --line-strong: rgba(16, 19, 24, .45);
    --surface-1: rgba(16, 19, 24, .04);
    --surface-2: rgba(16, 19, 24, .07);
  }

  body {
    background-color: #FFFFFF;
    color: var(--ink);
    font-size: 10.5pt;
    line-height: 1.7;
  }

  .nav {
    position: static;
    background-color: transparent;
    backdrop-filter: none;
  }

  .nav nav,
  .lang,
  .ambient,
  .orb,
  .hero-actions {
    display: none;
  }

  .hero,
  .product-hero {
    min-block-size: 0;
    padding-block: 0 1.5rem;
    background-image: none;
  }

  .section {
    padding-block: 1.6rem;
    background-image: none;
  }

  .hero h1,
  .product-hero h1 {
    font-size: 20pt;
  }

  .section h2 {
    font-size: 15pt;
  }

  .unicorn {
    margin-block-start: 1.5rem;
    font-size: 30pt;
  }

  /* グラデの字と差し色は落として、単色にする */
  .hero h1 em,
  .section h2 em,
  .product-hero h1 em,
  .unicorn em {
    background-image: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
  }

  .section-label::before,
  .kicker::before,
  .cards article::before,
  .flow > div::before,
  .eyebrow span {
    background-image: none;
    background-color: var(--ink-dim);
  }

  .section-label,
  .kicker,
  .cta > span,
  .cards h3,
  .flow h3,
  .person i,
  .status,
  .features span,
  .cap-tools b,
  .diagram-note,
  .product-download > span,
  .download-nav,
  .nav-cta {
    color: var(--ink);
  }

  .primary,
  .avatar,
  .p-avatar,
  .big-avatar,
  .product-top button {
    background-image: none;
    background-color: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--line-strong);
  }

  .cards article,
  .person,
  .person.ai,
  .statement,
  .product-shell,
  .product-sidebar .active,
  .cap-person,
  .cap-tools > div {
    background-color: transparent;
  }

  .nav-cta {
    border-color: var(--line-strong);
  }

  a {
    color: var(--ink);
    text-decoration: underline;
  }

  .cards article,
  .person,
  .flow > div,
  .future-grid > div,
  .features article,
  .principle,
  .persona-row,
  .cap-tools > div {
    break-inside: avoid;
  }
}

/* ------------------------------------------------------------ 例外 */

/* 参考の HTML が持つ行送りの調整（`<br class="desktop">`）。**契約のクラス表には無い。**
   HTML 側がこのクラスを落としたら、この2つの規則も落としてよい（他に効き目が無い）。
   狭い画面では折り返しを止め、広い画面ではそのまま改行させる。 */
.desktop {
  display: none;
}

@media (min-width: 50rem) {
  .desktop {
    display: revert;
  }
}

/* 切り替えは、JS が動いてから見せる（**JS が無いとき、
   押しても何も起きないボタンを残さない**）。 */
.lang {
  display: none;
}

.lang-ready .lang {
  display: inline-flex;
}