/*
 * kz-lp — Kazuna Lab の製品 LP とサイトの共通の見た目。
 *
 * 原本はこのファイル（cdn.kazunalab.com リポジトリの kz-lp/kz-lp.css）。stepanalytics.jp の LP の見た目を土台にしている。
 * Melta UI（ds-theme.css）には依存しない。この1枚で、変数・土台・部品がそろう。
 *
 * CDN からは配らない。使う各サイトが、自分のビルドでこのファイルを写し、自分のドメインから読む。
 * 共通の CSS を直しても、各サイトは自分を配り直すときに確かめてから取り込むので、確かめないまま本番の見た目が変わらない。
 * 写す側は、このファイルにコミットされていない変更があれば止まる（作業の途中の状態を本番に出さないため）。直したらコミットする。
 *
 * 使うページと写す処理:
 *   https://stepanalytics.jp/ （stepanalytics.jp の scripts/build.sh → /kz-lp.css）
 *   https://stepgate.jp/      （stepgate.jp の scripts/release.py → /assets/kz-lp.css）
 *
 * 読み方: <head> で、ページ固有の <style> より前に読む。ページ固有の規則は後に書いて上書きする。
 * 色は役割の名前（--base・--accent など）で持つ。製品ごとの意味を持つ色（stepanalytics の「全国平均より悪い」の赤など）はここに置かない。
 * 既存の規則を直すと全部のページの見た目が変わるので、使うページをすべて撮り比べて確かめる。部品を足すだけなら、ほかのページは変わらない。
 */
:root {
  /* 色は役割の名前で持つ。ページの側で値を差し替えれば、同じ部品のまま色だけが変わる
     （例：江原個人のページは地の色を緑にする）。値は stepanalytics.jp の LP の色 */
  --base: #0e266a;        /* 地の色（上の帯・ヒーロー・濃い面・締め） */
  --base-2: #13318d;      /* 地の上の箱・番号の丸 */
  --base-3: #1a40b5;      /* 白地の上で地の色を使う線・字 */
  --on-base: #dde8ff;     /* 地の上の本文 */
  --on-base-sub: #95b6ff; /* 地の上の補足 */
  --accent: #296ce8;      /* ボタン・リンク・焦点の輪。ボタンの白い字が WCAG AA（4.5:1）に届く濃さ（4.77:1。以前の #2b70ef は 4.497:1） */
  --accent-rgb: 41, 108, 232; /* --accent を半透明で使うとき（ヒーローの斜線） */
  /* 文字に使う青。--accent は薄い灰色の背景（#f8fafc）の上で 4.3:1 と、WCAG AA（4.5:1）に届かないため、文字だけ少し濃くする */
  --accent-ink: #2563eb;
  --accent-hover: #2250df;
  --accent-hover-2: #1a5ad6; /* 上の帯のボタンを押す手前 */
  --accent-wash: #f0f5ff; /* アイコンの下地 */
  --accent-band: #dde8ff; /* 手順をつなぐ点線 */
  --ink: #0f172a;
  --ink-2: #3d4b5f;
  --ink-3: #64748b;
  --rule: #e2e8f0;
  --rule-2: #cbd5e1;
  --paper: #fff;
  --bg: #f8fafc;
  /* 研究所の色の名前と由来。藍は染めを重ねるほど濃くなる（札幌市の広報資料「染める回数や藍染め液に浸す時間で色の濃さが変わります」）。
     小さなクラウドサービスを一つずつ作って重ねる研究所を、重ねた先の深い色（--base＝紺色。JIS 慣用色名の系統色名「暗い紫みの青」）を地に、
     一つひとつの仕事の色（--accent＝縹色。同「つよい青」）を線とボタンに当てて表す。色コードは JIS のマンセル値と照合しておらず、
     名前を拠り所にこちらで決めた値。理由と経緯は kazunalab-business の SKILL.md「視覚的ブランド」 */
  --base-deep: #0a173b;   /* 明るい画面の中に置く濃い面（note のアイキャッチの地）。--base と #05070c を半分ずつ混ぜた色 */
  --accent-soft-rgb: 41, 108, 232; /* 光・斜線・点に使う色（縹色）。ボタンには使わない。研究所では --accent と同じ値 */
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family:
    Inter, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    sans-serif;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.02em;
}
h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0;
}
a {
  color: var(--accent-ink);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 見出しの上の帯は使わない。区切りは余白と罫線で。 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 26px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.note-browser { margin-top: 24px; font-size: 14px; color: var(--ink-3); }
.btn-line { background: #fff; color: var(--base-3); border-color: var(--rule-2); }
.btn-line:hover { border-color: var(--accent); }
.closing .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-ghost:hover {
  border-color: #fff;
}
.link {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.hero-link { color: var(--on-base); align-self: center; padding: 0 8px; }
.hero-link:hover { color: #fff; }
.link:hover {
  text-decoration: underline;
}

/* ナビ */
header.nav {
  background: var(--base);
  color: #fff;
}
/* 項目が見える幅では、上部に固定する。ページが長く、節へ飛ぶ道としてもお問い合わせの入口としても使うため。
   スマートフォンの幅では項目を出さないので、固定せずに画面を広く使う */
@media (min-width: 761px) {
  header.nav { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
  [id] { scroll-margin-top: 88px; }
}
header.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.brand b {
  font-size: 20px;
  letter-spacing: 0.01em;
}
.brand span {
  font-size: 13px;
  color: var(--on-base-sub);
}
/* 製品の印（favicon.svg の白い棒だけを、枠を付けずに置く） */
.brand .mark { align-self: center; width: 22px; height: 20px; flex: none; margin-right: -3px; fill: none; stroke: currentColor; stroke-width: 6.5; stroke-linecap: round; }
/* β版の印（入力画面の見出しの印と同じ色）。狭い画面で添え書きを隠しても、印は残す */
.brand .beta { align-self: center; margin-left: -4px; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.5; }
/* 製品名の下に「ストレスチェック集団分析」を置く2段の組み。印は2段にまたがる */
.brand { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; column-gap: 10px; row-gap: 1px; }
.brand .mark { grid-row: 1 / span 2; width: 26px; height: 24px; margin: 0; vertical-align: 0; }
.brand b { grid-column: 2; line-height: 1.2; }
.brand .beta { grid-column: 3; justify-self: start; margin-left: 0; vertical-align: 0; }
.brand span { grid-column: 2 / span 2; margin-left: 0; font-size: 11.5px; line-height: 1.3; letter-spacing: .05em; }
nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
nav a {
  color: var(--on-base);
  text-decoration: none;
}
nav a:hover {
  color: #fff;
}
nav ul { align-items: center; }
/* お問い合わせは、ページ内の節ではなく行き先なので、ほかの項目と分けて枠で囲む */
/* ヘッダの右端は、いちばん押してほしい行動（報告書の作成）。お問い合わせは「ご質問・ご相談」の節とフッタから行ける */
nav a.nav-cta { padding: 7px 16px; background: var(--accent); color: #fff; font-weight: 700; border-radius: 999px; }
nav a.nav-cta:hover { background: var(--accent-hover-2); color: #fff; }

/* ヒーロー */
.hero {
  background: var(--base);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: repeating-linear-gradient(
    -36deg,
    rgba(var(--accent-rgb), 0) 0 50px,
    rgba(var(--accent-rgb), 0.35) 50px 51px
  );
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 56px;
  padding-top: 72px;
  padding-bottom: 88px;
  align-items: center;
}
.hero h1 {
  color: #fff;
  font-size: 46px;
  line-height: 1.35;
  font-weight: 700;
}
.hero .sub {
  color: var(--on-base);
  font-size: 18px;
  line-height: 1.95;
  margin: 22px 0 32px;
  max-width: 30em;
}
.hero .cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero .meta {
  margin-top: 26px;
  font-size: 13px;
  color: var(--on-base-sub);
  line-height: 1.8;
}


/* 数字の帯（出典つき） */
.facts {
  border-bottom: 1px solid var(--rule);
}
.facts .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.fact {
  padding: 34px 22px 30px;
  border-left: 1px solid var(--rule);
}
.fact:first-child {
  border-left: 0;
  padding-left: 0;
}
.fact .v {
  font-size: 38px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.fact .v small {
  font-size: 16px;
  font-weight: 600;
  margin-left: 2px;
}
/* 数字と単位を1行に保つ（列の幅が狭い画面で「約」や「万人」だけが次の行に落ちないように） */
.fact .v { white-space: nowrap; }
/* 説明を2行に割るのは、4つを横に並べる幅のときだけ（列が狭く、そろえないと高さがばらつくため）。2列の幅では1行に収まるので割らない */
@media (min-width: 901px) { .fact .k span { display: block; } }
/* 「全国平均の基準データ」は1行で収まる長さなので、列の幅がわずかに足りない幅でも2行に割らない */
.fact .k.kw { white-space: nowrap; }
.fact .v small.pre { margin: 0 2px 0 0; font-size: 0.55em; }
.fact .k {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-top: 8px;
}
.fact .s {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.6;
  margin-top: 6px;
}

section.block {
  padding: 112px 0;
}
section.block.tint {
  background: var(--bg);
}
.block h2 {
  font-size: 34px;
}
.block .lead {
  font-size: 18px;
  color: var(--ink-2);
  margin: 18px 0 0;
  max-width: 40em;
}


/* 特長 */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 72px;
  margin-top: 48px;
}
.feature {
  padding: 30px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
}
.feature .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-wash);
  display: grid;
  place-items: center;
}
.feature .ico svg {
  width: 24px;
  height: 24px;
  stroke: var(--base-3);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature h3 {
  font-size: 19px;
}
.feature p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.9;
}
.feature .src {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.7;
  margin-top: 8px;
}



/* よくある質問 */
.faq {
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
  top: 34px;
}
.faq .a {
  padding: 0 0 24px;
  font-size: 16px;
  line-height: 1.95;
  max-width: 46em;
}

.closing {
  background: var(--base);
  color: #fff;
  text-align: center;
  padding: 96px 0;
}
.closing h2 {
  color: #fff;
  font-size: 32px;
}
.closing p {
  color: var(--on-base);
  margin: 14px 0 32px;
}
footer.foot {
  padding: 28px 0;
  font-size: 12px;
  color: var(--ink-3);
}
footer.foot .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
footer.foot a {
  color: var(--ink-3);
  text-decoration: none;
}
.contact { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.contact > div:first-child { max-width: 680px; }
.contact p { margin-top: 12px; }
footer.foot .legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
footer.foot a:hover {
  text-decoration: underline;
}

/* スマートフォンの幅では、製品名の組みとボタンの間を詰めて、β版の印が折れないようにする */
.brand .beta { white-space: nowrap; }
@media (max-width: 420px) {
  .brand { column-gap: 8px; }
  .brand .mark { width: 22px; height: 20px; }
}
@media (max-width: 380px) {
  header.nav .wrap { padding-left: 16px; padding-right: 16px; }
  .brand b { font-size: 18px; }
  nav a.nav-cta { font-size: 13px; padding: 6px 10px; }
}
/* 幅320前後（初代の iPhone SE など）では、それでも収まらないので印を外す。製品名は文字で読める */
@media (max-width: 340px) {
  .brand .mark { display: none; }
  header.nav .wrap { padding-left: 12px; padding-right: 12px; gap: 8px; }
}
/* 狭い幅では節へ飛ぶ項目を外し、お問い合わせの入口だけを残す。LP は1ページで、スクロールすれば節にたどり着けるので、
   開閉するメニュー（ハンバーガー）は置かない（そのための JavaScript とボタンが増えるわりに、得るものが小さい）。
   外す幅は、製品名の組みと4つの項目とボタンが1行に収まらなくなる手前（幅を変えて撮影して確かめる） */
@media (max-width: 860px) {
  nav ul li:not(.keep) {
    display: none;
  }
  header.nav .wrap { gap: 12px; }
  nav a.nav-cta { white-space: nowrap; padding: 6px 12px; }
}
@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 34px;
  }
  .facts .wrap {
    grid-template-columns: 1fr 1fr;
  }
  .fact:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .features {
    grid-template-columns: 1fr;
  }
  section.block {
    padding: 72px 0;
  }
}

/* 日本語の折り返し：.ph は文節ごとのまとまりで、途中で折り返さない。.kw は <wbr> の位置でだけ折り返す */
.ph { display: inline-block; }
.kw { word-break: keep-all; overflow-wrap: break-word; }
.hero h1 { font-size: clamp(28px, 3.3vw, 40px); line-height: 1.45; }
/* 使う人（設計書1章「使う人」）を、ページの最初に示す */
.hero .for { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--on-base-sub); }
@media (min-width: 901px) { .hero .wrap { grid-template-columns: 1.15fr 1fr; } }

/* 数字の帯：白いパネルを見出しの紺の下端に半分重ね、4列の余白と高さをそろえる */
.hero .wrap { padding-bottom: 128px; }
.facts { border-bottom: 0; position: relative; z-index: 2; margin-top: -72px; }
.facts .wrap { display: block; }
.facts-panel { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 16px; box-shadow: 0 18px 48px rgba(3,10,40,.16); border: 1px solid var(--rule); padding: 30px 0; }
.facts-panel .fact { padding: 0 30px; border-left: 1px solid var(--rule); }
.facts-panel .fact:first-child { border-left: 0; padding-left: 30px; }
.facts-panel .v { font-size: clamp(30px, 3.2vw, 40px); }
.facts-panel .k { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 10px; line-height: 1.6; }
.facts-panel .s { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.6; }
.facts-src { font-size: 12px; color: var(--ink-3); line-height: 1.7; margin: 14px 4px 0; }
@media (max-width: 900px) { .facts-panel { grid-template-columns: 1fr 1fr; row-gap: 26px; } .facts-panel .fact:nth-child(3) { border-left: 0; } }

/* 動的に作る文（デモの説明・判定）は <wbr> を入れられないので、文節で折り返す指定を使う。
   word-break: auto-phrase は Baseline の Widely available ではない（Chrome・Edge のみ）。対応しないブラウザでは通常の折り返しになる */
.lead, .feature p { word-break: auto-phrase; }

/* 折り返し：見出しは <wbr> の位置でだけ折り返し、行の長さをそろえる（Safari を含む全ブラウザで効く）。
   本文は文節で折り返す（auto-phrase は Chrome・Edge のみ。ほかは通常の折り返し）。
   overflow-wrap は、折り返せない長い語が枠からはみ出すのを防ぐ */
h1, h2, h3, summary { word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
main p, main li, main td, main dd, .fact .k, .fact .s, .a { word-break: auto-phrase; overflow-wrap: break-word; text-wrap: pretty; }
.features > *, .feature > *, .issues > *, .steps > * { min-width: 0; }

/* スマートフォン幅：表は行ごとに縦に積む。数字のパネルは1列。リンクと短いラベルは途中で折り返さない */
@media (max-width: 600px) {
  .facts-panel { grid-template-columns: 1fr; row-gap: 0; padding: 8px 0; }
  .facts-panel .fact, .facts-panel .fact:first-child { border-left: 0; border-top: 1px solid var(--rule); padding: 18px 24px; }
  .facts-panel .fact:first-child { border-top: 0; }
}




/* よくある質問：広い幅では見出しを左、一覧を右に置く（ほかの節と同じ2列の型）。
   1列いっぱいに広げると、短い問いと右端の矢印の間が空きすぎる */
@media (min-width: 1000px) {
  #faq .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
  #faq .faq { margin-top: 0; }
}


/* 使い方：手順なので番号を付ける。広い幅では横に並べて線でつなぎ、狭い幅では縦の線でつなぐ */
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { position: relative; }
.st-ico { position: relative; width: 64px; height: 64px; border-radius: 16px; background: var(--accent-wash); display: grid; place-items: center; }
.st-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--base-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.st-ico .num { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--base-2); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 32px; left: 84px; right: -20px; border-top: 2px dashed var(--accent-band); }
.st-txt h3 { font-size: 20px; margin: 20px 0 0; }
.st-txt p { font-size: 16px; line-height: 1.9; margin: 10px 0 0; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding-bottom: 32px; }
  .step:not(:last-child)::after { top: 72px; bottom: 6px; left: 31px; right: auto; border-top: 0; border-left: 2px dashed var(--accent-band); }
  .st-txt h3 { margin-top: 16px; }
}

/* <wbr> を手で入れた文は、その位置でだけ折り返す。後に書いた auto-phrase の指定（.lead など）に上書きされないよう、詳細度を上げて最後に置く */
.kw.kw { word-break: keep-all; }
/* ただし本文の段落は、行の端まで詰めて折り返す。文節で区切ると、列の幅が狭い画面で1行が数文字の段落になり、かえって読みにくいため。
   文節で区切るのは、見出しと数字の帯の短い説明だけ */
main p.kw.kw, main p, main li, main td, main dd, .a, .src, main .feature p { word-break: normal; text-wrap: wrap; }
/* .feature p・.issue p は上の auto-phrase の指定（詳細度が高い）に負けて、スマートフォンで1行が数文字の段落になっていたので、ここで詳細度を上げて戻す */
/* text-wrap: pretty は最後の行が短くならないよう、前の行を見出しより手前で折り返すことがある。本文は列の幅いっぱいまで使う */
p .ph { display: inline; }
.nw { white-space: nowrap; }
/* ヒーローの説明は、2つの文をそれぞれ行の頭から始め、文節で折り返す（ページでいちばん読まれる文なので、語の途中で切らない） */
.hero p.sub.kw.kw { word-break: keep-all; }
.hero p.sub .s2 { display: block; }

/* ===========================================================================
 * ここから下は stepanalytics.jp の LP に無い部品。stepgate.jp の LP にある部品を、上の色と形で書き直したもの。
 * 上の規則は変えずに足す（stepanalytics.jp の見た目を変えないため）。
 * ======================================================================== */

/* 地の色の節（仕組み・技術仕様）。締め（.closing）と同じ地に、白い見出し */
section.block.dark { background: var(--base); color: var(--on-base); }
.block.dark h2, .block.dark h3 { color: #fff; }
.block.dark .lead { color: var(--on-base); }
.block.dark a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.block.dark a:hover { color: #fff; }

/* 仕組みの流れ：3つの箱を矢印でつなぐ。真ん中（.is-core）が製品 */
.pipe { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.2fr) 44px minmax(0, 1fr); align-items: stretch; margin-top: 48px; }
.pipe-node { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 22px 24px; background: var(--base-2); }
.pipe-node.is-core { border-color: var(--on-base-sub); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.28), var(--base-2)); }
.pipe-node .t { display: block; color: #fff; font-weight: 700; font-size: 17px; line-height: 1.5; }
.pipe-node p { margin: 8px 0 0; font-size: 15px; line-height: 1.8; color: var(--on-base); }
.pipe-arrow { display: flex; align-items: center; justify-content: center; color: var(--on-base-sub); font-size: 20px; }

/* 技術仕様の表：項目名と中身の2列 */
table.spec-table { width: 100%; max-width: 920px; border-collapse: collapse; margin-top: 44px; font-size: 15px; line-height: 1.8; }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-top: 1px solid var(--rule); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 1px solid var(--rule); }
.spec-table th { width: 11em; color: var(--ink); font-weight: 600; word-break: keep-all; }
.spec-table code { font-size: 13.5px; background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.block.dark .spec-table th, .block.dark .spec-table td { border-color: rgba(255, 255, 255, 0.16); }
.block.dark .spec-table th { color: #fff; }
.block.dark .spec-table code { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); color: #fff; }

/* 行わないこと：1行ずつの箱。太字で言い切り、補足を続ける */
.limits { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; max-width: 880px; }
.limits li { padding: 16px 20px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; font-size: 16px; line-height: 1.8; }
.limits b { color: var(--ink); }

/* 2列の比べ（お客様にお願いすること／Kazuna Lab が行うこと） */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.split > div { border: 1px solid var(--rule); border-radius: 14px; padding: 26px 28px; background: #fff; }
.split h3 { font-size: 18px; }
.split ul { margin: 12px 0 0; padding-left: 1.2em; font-size: 16px; line-height: 1.9; }
.split + .note { margin: 16px 0 0; font-size: 14px; color: var(--ink-3); }

/* 導入の実績：1件ごとに1つの箱（年月・どこに入れたか・何が起きたか）。年月が確かめられない件は .d を置かない */
.record { display: flex; align-items: baseline; gap: 20px; margin-top: 24px; padding: 24px 28px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
.block .lead + .record, h2 + .record { margin-top: 40px; }
.record .d { flex: none; font-size: 14px; font-weight: 700; color: var(--base-3); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.record p { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.7; }
.record p.t { margin-top: 8px; color: var(--ink-2); font-weight: 400; font-size: 16px; line-height: 1.9; }

/* ドキュメントへの入口：3つのカード。カード全体がリンク */
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.doc { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; padding: 24px; background: #fff; color: inherit; text-decoration: none; }
.doc:hover { border-color: var(--accent); }
.doc h3 { font-size: 18px; }
.doc p { margin: 8px 0 0; font-size: 15px; line-height: 1.8; flex: 1; }
.doc .go { margin-top: 14px; color: var(--accent-ink); font-weight: 600; font-size: 15px; }

@media (max-width: 900px) {
  .pipe { grid-template-columns: 1fr; }
  .pipe-arrow { height: 36px; transform: rotate(90deg); }
  .split, .docs { grid-template-columns: 1fr; }
  .record { flex-direction: column; gap: 6px; }
}
@media (max-width: 600px) {
  .spec-table th, .spec-table td { display: block; width: auto; padding: 0; border: 0; }
  .spec-table tr { display: block; padding: 14px 0; border-top: 1px solid var(--rule); }
  .spec-table tr:last-child { border-bottom: 1px solid var(--rule); }
  .spec-table th { margin-bottom: 4px; }
  .block.dark .spec-table tr { border-color: rgba(255, 255, 255, 0.16); }
}

/* 江原個人のページ（kazunalab.com/about/ など）の色。<body class="theme-green"> で、地の色を深緑に差し替える。
   研究所（紺）のページと、開いた瞬間に見分けられるようにするため。部品は同じで、色の値だけが変わる。
   どの組み合わせも WCAG AA（4.5:1）以上（いちばん低いのは、地の上の箱に載る補足の字で 5.04:1）。色を変えたら測り直す */
.theme-green {
  --base: #14432f;
  --base-2: #1b5a3f;
  --base-3: #1f6b4a;
  --on-base: #d8f0e3;
  --on-base-sub: #9fd8b9;
  --accent: #187a51;
  --accent-ink: #17784e;
  --accent-rgb: 24, 122, 81;
  --accent-hover: #136b46;
  --accent-hover-2: #105e3d;
  --accent-wash: #ecf7f1;
  --accent-band: #cdeedd;
  /* 江原個人の色の名前と由来。深い緑の上に、新しい芽の色が何度でも出てくる──モットーの「何度でも歩き出せば、その一歩が未来を変える」を色にしたもの。
     地（--base＝深緑。JIS 慣用色名の系統色名「こい緑」）は変わらないもの、芽（--accent-soft-rgb＝萌黄。同「つよい黄緑」。色名がわかる辞典（講談社）「草木の若い芽が萌えいずるような、わずかに青みがかった黄緑」）は歩き出す一歩。
     萌黄は白い字との差が 2.02:1 で WCAG AA に届かないので、光・斜線・点だけに使い、ボタンは --accent のまま */
  --base-deep: #0d251e;   /* 明るい画面の中に置く濃い面（note のアイキャッチの地）。--base と #05070c を半分ずつ混ぜた色 */
  --accent-soft-rgb: 156, 196, 74; /* 萌黄。光・斜線・点だけに使う */
}

/* ===========================================================================
 * stepgate.jp の LP を載せ替えるときに足した部品（上の規則は変えない）
 * ======================================================================== */

/* ヒーローの右の画面の見本：ブラウザの枠に画像を入れる */
.hero-frame { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); background: #fff; box-shadow: 0 24px 60px rgba(3, 10, 40, 0.45); }
.hero-frame .bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--base-2); }
.hero-frame .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.hero-frame .bar span { margin-left: 8px; font-size: 12px; color: var(--on-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-frame img { display: block; width: 100%; height: auto; }

/* こんな状況：番号つきのカード3枚 */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.cards > div { border: 1px solid var(--rule); border-radius: 14px; padding: 26px 26px 28px; background: #fff; }
.cards .no { display: block; font-size: 13px; font-weight: 700; color: var(--base-3); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.cards h3 { margin-top: 6px; font-size: 19px; }
.cards p { margin: 10px 0 0; font-size: 16px; line-height: 1.9; }

/* 地の色の節の中の補足：囲み（言い切りを太字で）と、2つの手順 */
.callout { display: flex; gap: 12px; align-items: baseline; width: fit-content; max-width: 100%; margin: 28px 0 0; padding: 14px 20px; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 12px; font-size: 16px; line-height: 1.8; color: var(--on-base); }
.callout b { color: #fff; }
.pipe-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.pipe-steps > div { border: 2px solid rgba(255, 255, 255, 0.4); /* 細く薄いと枠に見えないので、2px と図形の基準（3:1）を満たす濃さにする */ border-radius: 12px; padding: 16px 20px; font-size: 16px; line-height: 1.8; color: var(--on-base); }
.pipe-steps em { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--on-base-sub); }

/* 外部へのリンクの小さな印と、新しいタブで開くことの読み上げ */
.ext-link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.ext-link:hover { text-decoration: underline; }
.ext-link svg { width: 13px; height: 13px; vertical-align: -1px; margin-left: 3px; fill: none; stroke: currentColor; stroke-width: 2; }

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

/* ===========================================================================
 * StepChat・StepEAP・StepStatus・StepWidget の LP を載せ替えるときに足した部品（上の規則は変えない）
 * ======================================================================== */

/* 上の帯の製品の印（24 の枠で描いた印は、共通の印より線を細くする） */
.brand .mark.lp-mark { stroke-width: 2; stroke-linejoin: round; }

/* ヒーローの画面の見本：お客様のサイトの見立て（灰色の帯）の上に、ウィジェットの窓を重ねる */
.hero-frame .mock { position: relative; aspect-ratio: 4 / 3.3; background: #f1f5f9; overflow: hidden; }
.mock-faux { position: absolute; inset: 0; padding: 7% 6%; }
.mock-faux b, .mock-faux i { display: block; border-radius: 4px; background: #e2e8f0; }
.mock-faux b { width: 34%; height: 12px; margin-bottom: 18px; background: #cbd5e1; }
.mock-faux i { width: 40%; height: 8px; margin-bottom: 10px; }
.mock-faux i:nth-of-type(2n) { width: 32%; }
.mock-faux .card { width: 40%; height: 22%; margin: 18px 0 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.mock-panel { position: absolute; right: 6%; bottom: 15%; width: 46%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.06); }
.mock-panel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mock-launcher { position: absolute; right: 6%; bottom: 3.5%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #64748b; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3); }

/* 特長の分類の小見出し（相談する・学ぶ など） */
.feature-group { margin: 48px 0 0; font-size: 18px; color: var(--base-3); }
.feature-group + .features { margin-top: 8px; }

/* 技術仕様の項目名の補足（日本語の名前） */
.spec-table th small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; font-weight: 400; }
.block.dark .spec-table th small { color: var(--on-base-sub); }

/* 下の帯のリンク（製品の LP の利用規約など） */
footer.foot .wrap > span a { margin-left: 16px; }

@media (max-width: 900px) {
  .mock-panel { width: 54%; right: 5%; bottom: 14%; }
  .mock-launcher { width: 11%; }
}
/* ヒーローの画面の見本：画面の画像を枠いっぱいに（上端を合わせて切り出す） */
.mock.mock-fill img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* 外部リンクの印（共通規約 button-and-link.md：自分のドメインの外へ向かうリンクは新しいタブで開き、印と読み上げの断りを付ける）。
   印は melta-ui の OpenInNew。kazunalab.com はビルド（scripts/lib/external-links.js）が付け、製品の LP は HTML に直接書く */
.external-link-icon { display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.3em; vertical-align: -0.1em; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ===========================================================================
 * 記事（stepchat.kazunalab.com の「働く人のためのガイド」で足した部品。上の規則は変えない）
 * <body class="kz-guide"> の下だけで効く。HTML は stepchat.kazunalab.com の scripts/guides/build-guides.mjs が作る。
 * kazunalab.com の guides.css（Melta UI と Tailwind の上で組んでいた）から、寸法と並びを写した
 * ======================================================================== */

/* 記事の中の図解（cdn.kazunalab.com/figures/bf-figures.css・bf-chart.css）は Melta UI の変数を読む。
   ここで kz-lp の色の役割に読み替える。:root に置かないのは、ほかのページに要らない変数を増やさないため */
.kz-guide {
  --text-heading: var(--ink);
  --text-default: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-on-accent: #fff;
  --border-default: var(--rule);
  --border-strong: var(--rule-2);
  --bg-surface: var(--paper);
  --bg-page: var(--paper);
  --bg-page-alt: var(--bg);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --color-primary-50: var(--accent-wash);
  --color-primary-100: var(--accent-band);
  --color-primary-200: #c0d4ff;
  --color-primary-300: #95b6ff;
  --color-primary-400: #5b8ff4;
  --color-primary-500: var(--accent);
  --color-primary-600: var(--accent-hover);
  --color-primary-700: var(--base-3);
  --color-primary-800: var(--base-2);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
}

/* カテゴリの色。カードの面・ヒーロー・要点の箱に付け、中の部品はこの変数を読む。
   色は飾りで、カテゴリは見出しの文字で見分ける。red は「限界・危機」だけに使う */
.kz-guide .gd-tone-primary { --gd-solid: var(--accent); --gd-soft: var(--accent-wash); --gd-badge: var(--accent-band); --gd-badge-ink: var(--base-3); --gd-badge-line: #c0d4ff; --gd-icon: var(--accent-hover); }
.kz-guide .gd-tone-emerald { --gd-solid: #059669; --gd-soft: #ecfdf5; --gd-badge: #d1fae5; --gd-badge-ink: #065f46; --gd-badge-line: #a7f3d0; --gd-icon: #047857; }
.kz-guide .gd-tone-amber { --gd-solid: #d97706; --gd-soft: #fffbeb; --gd-badge: #fef3c7; --gd-badge-ink: #92400e; --gd-badge-line: #fde68a; --gd-icon: #b45309; }
.kz-guide .gd-tone-red { --gd-solid: #dc2626; --gd-soft: #fef2f2; --gd-badge: #fee2e2; --gd-badge-ink: #991b1b; --gd-badge-line: #fecaca; --gd-icon: #dc2626; }
.kz-guide .gd-solid { background: var(--gd-solid); color: #fff; }
.kz-guide .gd-icon { color: var(--gd-icon); }
.kz-guide .gd-badge { background: var(--gd-badge); color: var(--gd-badge-ink); border: 1px solid var(--gd-badge-line); }
.kz-guide .gd-mute { background: #f1f5f9; color: #334155; }
.kz-guide .gd-mute-bar { background: #e2e8f0; }
.kz-guide .gd-bubble-plain { background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); color: #334155; }

/* ページの枠 */
.kz-guide .gd-skip { position: absolute; left: -9999px; top: 8px; z-index: 60; padding: 8px 14px; background: #fff; color: var(--ink); border-radius: 8px; }
.kz-guide .gd-skip:focus { left: 8px; }
.kz-guide .gd-crumb { padding-top: 16px; padding-bottom: 0; }
.kz-guide .gd-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.kz-guide .gd-crumb li + li::before { content: "/"; margin: 0 8px; color: var(--rule-2); }
.kz-guide .gd-crumb a { color: var(--ink-3); text-decoration: none; }
.kz-guide .gd-crumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.kz-guide footer.foot { border-top: 1px solid var(--rule); }
.kz-guide footer.foot .wrap > span a { margin-left: 0; }

/* 進むリンク（青字のラベルの後に、丸で囲んだ →。共通規約 button-and-link.md） */
.gd-go { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-ink); font-weight: 600; font-size: 16px; text-decoration: none; }
.gd-go-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 14px; line-height: 1; transition: background-color 0.15s, color 0.15s, transform 0.15s; }
.gd-go:hover .gd-go-arrow { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(2px); }
/* 進むリンク（青字のラベル＋丸で囲んだ →。_shared/.claude/references/button-and-link.md）。ガイドだけでなく製品紹介でも使うので .kz-guide の外でも効かせる。
   濃い地（ヒーロー）の上では地の上の文字色にし、ホバーで丸を白く塗る */
.hero .gd-go, .dark .gd-go { color: var(--on-base); }
.hero .gd-go:hover .gd-go-arrow, .dark .gd-go:hover .gd-go-arrow { background: #fff; border-color: #fff; color: var(--base); }
.hero .cta .gd-go { align-self: center; padding: 0 8px; }
/* 外部へ向かうリンク（執筆者のプロフィール）。印と読み上げの断りはビルドが付ける */
.kz-guide .gd-ext { color: var(--accent-ink); font-weight: 600; font-size: 16px; text-decoration: none; }
.kz-guide .gd-ext:hover { text-decoration: underline; }

/* 一覧・特集の先頭 */
.kz-guide .gd-intro { padding: 48px 0 8px; text-align: center; }
.kz-guide .gd-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-ink); }
.kz-guide .gd-intro h1 { margin-top: 8px; font-size: 34px; }
.kz-guide .gd-lead { max-width: 40em; margin: 24px auto 0; font-size: 17px; line-height: 2; color: var(--ink-2); text-align: left; }
.kz-guide .gd-list { padding: 40px 0 88px; }
.kz-guide .gd-nav-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); text-align: center; }
.kz-guide .gd-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kz-guide .tag-chip { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; font-weight: 500; line-height: 1.6; text-decoration: none; }
.kz-guide .tag-chip:hover, .kz-guide .tag-chip:focus-visible { background: var(--accent-wash); border-color: #c0d4ff; color: var(--base-3); text-decoration: underline; }
.kz-guide .gd-groups { display: flex; flex-direction: column; gap: 64px; margin-top: 48px; }
.kz-guide .gd-group { scroll-margin-top: 96px; }
.kz-guide .gd-group h2 { font-size: 26px; }
.kz-guide .gd-subgroup { margin-top: 40px; }
.kz-guide .gd-subgroup h3 { font-size: 20px; }
.kz-guide .gd-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.8; color: var(--ink-3); }

/* カードの並び（スマートフォンでも2列。1列だと1枚が大きすぎる） */
.kz-guide .gd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
@media (min-width: 768px) { .kz-guide .gd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kz-guide .gd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 押せるカード（右下に「続きを読む >」。ホバーで枠を薄い青に、ラベルに下線） */
.kz-guide .card-link-media { position: relative; display: block; overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.kz-guide .card-link-media:hover { border-color: #95b6ff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); transform: translateY(-1px); }
.kz-guide .card-link-media:active { transform: none; }
.kz-guide .card-link-media-icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--gd-soft); }
.kz-guide .card-link-media-body { padding: 14px 16px 44px; }
.kz-guide .card-link-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(16px * 1.5 * 3); margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.kz-guide .card-link-cta { position: absolute; right: 16px; bottom: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--accent-ink); }
.kz-guide .card-link-media:hover .card-link-cta { text-decoration: underline; }
@media (max-width: 639px) { .kz-guide .card-link-title { min-height: 0; } }

/* アイキャッチ（カードとヒーローに置く UI の見立て。飾りなので aria-hidden） */
.kz-guide .gd-mock { display: flex; flex-direction: column; gap: 5px; align-items: center; width: 90%; max-width: 12.5rem; font-size: 11px; line-height: 1.3; color: var(--ink); }
.kz-guide .gd-mock-panel { width: 82%; max-width: 11rem; align-items: stretch; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.kz-guide .gd-mock-panel-wide { width: 92%; max-width: 12.5rem; }
.kz-guide .gd-mock-panel-narrow { width: 62%; max-width: 8rem; align-items: flex-start; }
.kz-guide .gd-mock-panel-narrow .gd-mock-title, .kz-guide .gd-mock-panel-narrow .gd-mock-label { padding-left: 0.5rem; }
.kz-guide .gd-mock-title { overflow: hidden; font-size: 10px; font-weight: 600; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.kz-guide .gd-mock-row { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.kz-guide .gd-mock-row-end { justify-content: flex-end; }
.kz-guide .gd-mock-row-chat { padding: 0 8%; }
.kz-guide .gd-mock-label { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.kz-guide .gd-mock-check { flex-shrink: 0; width: 11px; height: 11px; border: 1.5px solid var(--rule); border-radius: 3px; }
.kz-guide .gd-mock-check-on { border-color: transparent; }
.kz-guide .gd-mock-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.kz-guide .gd-mock-menu { flex-shrink: 0; margin-left: auto; font-size: 10px; letter-spacing: 0.05em; color: var(--ink-3); }
.kz-guide .gd-mock-btn { align-self: flex-start; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.kz-guide .gd-mock-badge { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.kz-guide .gd-mock-bar-label { display: block; overflow: hidden; width: 100%; padding: 4px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.kz-guide .gd-mock-bar-label.gd-mute { border: 1px solid transparent; }
.kz-guide .gd-mock-bubble { min-width: 55%; max-width: 92%; padding: 5px 8px; border-radius: 10px; }
.kz-guide .gd-mock-bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 36px; }
.kz-guide .gd-mock-bar { flex: 1; height: var(--gd-h, 20%); border-radius: 2px 2px 0 0; }
.kz-guide .gd-mock-line { display: block; overflow: visible; width: 100%; height: 32px; }
.kz-guide .gd-mock-line-grid { stroke: var(--rule); }
.kz-guide .gd-mock-progress-track { overflow: hidden; width: 100%; height: 6px; border-radius: 999px; background: #f1f5f9; }
.kz-guide .gd-mock-progress-bar { display: block; width: var(--gd-w, 40%); height: 100%; border-radius: 999px; }

/* ヒーローの右に置く大きいアイキャッチ（カードと同じ中身を、ひと回り大きく） */
.kz-guide .gd-hero-mock { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 8px; width: 100%; max-width: 21rem; font-size: 16px; line-height: 1.5; color: var(--ink); }
.kz-guide .gd-hero-mock.gd-mock-panel { width: 100%; max-width: 21rem; align-items: stretch; padding: 16px 18px; border-radius: 14px; }
.kz-guide .gd-hero-mock.gd-mock-panel-wide { max-width: 23rem; }
.kz-guide .gd-hero-mock.gd-mock-panel-narrow { width: auto; max-width: 15rem; align-items: flex-start; }
.kz-guide .gd-hero-mock .gd-mock-title, .kz-guide .gd-hero-mock .gd-mock-menu { font-size: 15px; }
.kz-guide .gd-hero-mock .gd-mock-check { width: 17px; height: 17px; border-width: 2px; border-radius: 5px; }
.kz-guide .gd-hero-mock .gd-mock-dot { width: 12px; height: 12px; }
.kz-guide .gd-hero-mock .gd-mock-btn { padding: 8px 16px; border-radius: 8px; font-size: 13px; }
.kz-guide .gd-hero-mock .gd-mock-badge { padding: 5px 12px; font-size: 13px; }
.kz-guide .gd-hero-mock .gd-mock-bar-label { padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.kz-guide .gd-hero-mock .gd-mock-bubble { padding: 8px 14px; border-radius: 14px; }
.kz-guide .gd-hero-mock .gd-mock-bars { height: 56px; gap: 8px; }
.kz-guide .gd-hero-mock .gd-mock-progress-track { height: 10px; }
.kz-guide .gd-hero-mock .gd-mock-line { height: 56px; }

/* 記事のページ。狭い幅では ヒーロー → 要点 → 目次 → 本文 の縦積み。1024px 以上で目次を左の欄に移して追従させる */
.kz-guide .gd-article { padding: 24px 0 72px; }
.kz-guide .guide-layout { max-width: 48rem; margin: 0 auto; }
.kz-guide .guide-layout-hero { padding: 32px; border-radius: 16px; background: var(--gd-soft); }
.kz-guide .guide-hero-grid { display: flex; flex-direction: column; gap: 24px; }
.kz-guide .guide-hero-text { min-width: 0; }
.kz-guide .gd-cat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.6; }
.kz-guide .guide-hero-text h1 { margin-top: 16px; font-size: 30px; line-height: 1.45; }
.kz-guide .gd-desc { margin: 16px 0 0; font-size: 16px; line-height: 2; color: var(--ink-2); }
.kz-guide .gd-byline { margin-top: 24px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.kz-guide .gd-byline p { margin: 0; }
.kz-guide .gd-byline b { color: var(--ink); font-weight: 600; }
.kz-guide .gd-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-3); }
@media (min-width: 768px) {
  .kz-guide .guide-layout-hero { padding: 40px; }
  .kz-guide .guide-hero-grid { flex-direction: row; align-items: center; gap: 32px; }
  .kz-guide .guide-hero-text { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .kz-guide .guide-layout-hero { padding: 24px 20px; }
  .kz-guide .guide-hero-text h1 { font-size: 24px; }
}

.kz-guide .guide-summary, .kz-guide .guide-layout-body { margin-top: 40px; }
.kz-guide .guide-summary { padding: 24px; border-radius: 12px; background: var(--gd-soft); }
.kz-guide .guide-summary-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.kz-guide .guide-summary ul { margin: 12px 0 0; padding: 0; list-style: none; }
.kz-guide .guide-summary li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.kz-guide .guide-summary li + li { margin-top: 8px; }
.kz-guide .guide-summary li::before { content: ""; position: absolute; left: 4px; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }

.kz-guide .guide-toc { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); }
.kz-guide .guide-toc-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.kz-guide .guide-toc ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: guide-toc; }
.kz-guide .guide-toc li { counter-increment: guide-toc; }
/* 上下 10px と行の高さで、押せる範囲を 44px 前後にする */
.kz-guide .guide-toc a { display: flex; gap: 8px; padding: 10px 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-decoration: none; }
.kz-guide .guide-toc a::before { content: counter(guide-toc) "."; flex-shrink: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kz-guide .guide-toc a:hover { color: var(--accent-ink); }
.kz-guide .guide-toc .guide-toc-sub { margin: 0 0 0 1.5rem; padding: 0; list-style: none; counter-reset: none; }
.kz-guide .guide-toc .guide-toc-sub li { counter-increment: none; }
.kz-guide .guide-toc .guide-toc-sub a { color: var(--ink-3); }
.kz-guide .guide-toc .guide-toc-sub a::before { content: none; }

@media (min-width: 1024px) {
  .kz-guide .guide-layout { max-width: 62rem; display: grid; grid-template-columns: 11rem 1fr; grid-template-areas: "hero hero" "toc summary" "toc body"; gap: 40px; }
  .kz-guide .guide-layout:not(:has(.guide-summary)) { grid-template-areas: "hero hero" "toc body"; }
  .kz-guide .guide-layout-hero { grid-area: hero; }
  .kz-guide .guide-hero-text p.gd-desc { max-width: 44rem; }
  .kz-guide .guide-summary { grid-area: summary; margin-top: 0; }
  .kz-guide .guide-toc { grid-area: toc; position: sticky; top: 96px; align-self: start; margin-top: 0; padding-top: 0; border-top: none; }
  .kz-guide .guide-layout-body { grid-area: body; margin-top: 0; }
}

/* 本文 */
.kz-guide .insight-body { font-size: 17px; line-height: 2; color: var(--ink-2); }
.kz-guide .insight-body > * + * { margin-top: 24px; }
.kz-guide .insight-body > :first-child { margin-top: 0; }
.kz-guide .insight-body p { margin-bottom: 0; }
.kz-guide .insight-body h2 { margin-top: 48px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--ink); scroll-margin-top: 96px; }
.kz-guide .insight-body h3 { margin-top: 40px; font-size: 20px; font-weight: 600; line-height: 1.5; color: var(--ink); scroll-margin-top: 96px; }
.kz-guide .insight-body h4 { margin-top: 32px; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.kz-guide .insight-body a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.kz-guide .insight-body a:hover { color: var(--base-3); }
.kz-guide .insight-body ul, .kz-guide .insight-body ol { margin-bottom: 0; padding-left: 1.5rem; }
.kz-guide .insight-body li { margin-bottom: 8px; line-height: 1.8; }
.kz-guide .insight-body ul li { list-style-type: disc; }
.kz-guide .insight-body ol li { list-style-type: decimal; }
.kz-guide .insight-body blockquote { margin-left: 0; margin-right: 0; padding: 16px 24px; border-radius: 8px; background: var(--accent-wash); color: var(--ink-2); }
.kz-guide .insight-body blockquote > :first-child { margin-top: 0; }
.kz-guide .insight-body blockquote > :last-child { margin-bottom: 0; }
.kz-guide .insight-body strong { font-weight: 600; color: var(--ink); }
.kz-guide .insight-body img { max-width: 100%; height: auto; border-radius: 8px; }
.kz-guide .insight-body hr { margin: 40px 0; border: none; border-top: 1px solid var(--rule); }
.kz-guide .insight-body .insight-footnote { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.75; color: var(--ink-3); }
.kz-guide .insight-body .insight-footnote + .insight-footnote { margin-top: 12px; padding-top: 0; border-top: none; }
.kz-guide .insight-body .video-embed { margin: 40px 0; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; }

/* Markdown から作った表（build-guides.mjs が <div class="insight-table"> で囲む）。角丸の枠、見出しは小さく灰色の地。
   表は横にスクロールさせないので、本文のセルはどこでも折り返す。見出しは広い幅では折り返さない（短い列が1文字幅に潰れるため） */
.kz-guide .insight-body .insight-table { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.kz-guide .insight-body .insight-table table { width: 100%; margin: 0; border-collapse: collapse; }
.kz-guide .insight-body .insight-table th { min-width: calc(3em + 1rem); padding: 12px 16px; border-bottom: 1px solid #e2e8f0; background: #f9fafb; font-size: 13px; font-weight: 500; line-height: 1.5; color: #64748b; text-align: left; }
.kz-guide .insight-body .insight-table td { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-size: 15px; line-height: 1.7; color: #0f172a; overflow-wrap: anywhere; vertical-align: top; }
.kz-guide .insight-body .insight-table tbody tr:last-child td { border-bottom: none; }
@media (min-width: 640px) { .kz-guide .insight-body .insight-table th { white-space: nowrap; } }
@media (max-width: 639px) { .kz-guide .insight-body .insight-table th, .kz-guide .insight-body .insight-table td { padding: 10px 8px; } }

/* 記事の下の節 */
.kz-guide .gd-related { padding: 64px 0; background: var(--bg); }
.kz-guide .gd-related h2 { font-size: 24px; }
.kz-guide .gd-more { margin: 32px 0 0; text-align: center; }
.kz-guide .gd-author { padding: 56px 0 64px; text-align: center; }
.kz-guide .gd-author h2 { font-size: 22px; }
.kz-guide .gd-author p { margin: 12px 0 0; font-size: 16px; }

/* 働く人のためのAIチャット相談の入口（stepchat.kazunalab.com/for-workers/）と、その利用規約・プライバシーポリシーのページ */
.kz-guide .hero .fw-points { display: grid; gap: 12px; align-content: center; }
.kz-guide .hero .fw-points .callout { display: block; width: auto; margin: 0; }
.kz-guide .fw-contacts { margin: 24px 0 0; padding-left: 1.2em; font-size: 17px; line-height: 2; color: var(--ink-2); }
.kz-guide .fw-contacts b { color: var(--ink); font-weight: 600; }
.kz-guide .block .lead a, .kz-guide .fw-contacts a { color: var(--accent-ink); }
.kz-guide .closing p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kz-guide .gd-legal { padding: 8px 0 72px; }
.kz-guide .gd-legal .wrap { max-width: 48rem; }
.kz-guide .gd-legal ol { margin: 0; padding-left: 1.5rem; font-size: 16px; line-height: 1.9; color: var(--ink-2); }
.kz-guide .gd-legal ol > li + li { margin-top: 12px; }
.kz-guide .gd-legal ul { margin: 8px 0 0; padding-left: 1.4rem; }
.kz-guide .gd-legal a { color: var(--accent-ink); }
.kz-guide .gd-legal hr { margin: 32px 0; border: none; border-top: 1px solid var(--rule); }
.kz-guide .gd-legal h2 { font-size: 16px; }
.kz-guide .gd-legal div { font-size: 14px; color: var(--ink-3); }

/* かずな総合研究所が運営する公共の取り組み（働く人のためのAIチャット相談 stepchat.kazunalab.com/for-workers/ とガイド）の色。
   <body class="theme-terracotta"> で地の色を赤茶に差し替える。製品（紺）と江原個人（緑）と、開いた瞬間に見分けられるようにするため。
   どの組み合わせも WCAG AA（4.5:1）以上（いちばん低いのはボタンの白い字で 5.67:1）。色を変えたら測り直す */
.theme-terracotta {
  --base: #4a1d12;
  --base-2: #63291a;
  --base-3: #8a3a22;
  --on-base: #f7e6dd;
  --on-base-sub: #ecbfa9;
  --accent: #b0442a;
  --accent-ink: #a03c24;
  --accent-rgb: 176, 68, 42;
  --accent-hover: #963820;
  --accent-hover-2: #83301b;
  --accent-wash: #fcf1ec;
  --accent-band: #f4d8cb;
}
.theme-terracotta.kz-guide { --color-primary-200: #eec0ad; --color-primary-300: #e3a088; --color-primary-400: #c9674a; }
.theme-terracotta .gd-tone-primary { --gd-badge-line: #eec0ad; }

/* 働く人のためのAIチャット相談の入口（/for-workers/）で足した部品 */
.kz-guide .fw-tel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.kz-guide .fw-tel > div { border: 1.5px solid #a9b4c2; /* 薄い線だと白地で枠に見えないので、太く濃くする */ border-radius: 14px; padding: 20px 22px; background: #fff; }
.kz-guide .fw-tel .n { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.kz-guide .fw-tel a.num { display: inline-block; margin-top: 6px; font-size: 24px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.kz-guide .fw-tel a.num:hover { text-decoration: underline; }
.kz-guide .fw-tel .s { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.kz-guide .fw-more { margin: 24px 0 0; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.kz-guide .fw-more a { color: var(--accent-ink); }
.kz-guide .block .gd-grid { margin-top: 32px; }
.kz-guide .block .gd-more { margin-top: 28px; text-align: left; }
@media (max-width: 900px) { .kz-guide .fw-tel { grid-template-columns: 1fr; } }
/* 入口のヒーローで、愛称（h1）の下に添える正式な名前 */
.kz-guide .hero .fw-formal { margin: 10px 0 0; font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--on-base-sub); }
/* 気軽にAI相談のヘッダー：愛称の下に正式な名前を添え、右に「働く人のためのガイド」を置く。
   スマートフォンの幅で1文字ずつ折り返さないよう、どちらも折り返さず、狭い幅では字を小さくする */
.theme-terracotta header.nav .brand b, .theme-terracotta header.nav .brand span, .theme-terracotta header.nav nav a { white-space: nowrap; }
@media (max-width: 420px) {
  .theme-terracotta header.nav .brand { column-gap: 8px; }
  .theme-terracotta header.nav .brand b { font-size: 15px; }
  .theme-terracotta header.nav .brand span { font-size: 10px; letter-spacing: 0; }
  .theme-terracotta header.nav nav a { font-size: 12px; }
}
/* 電話相談のカードの「24時間」の札。24時間受け付けている窓口だけに付け、カード全体の色は変えない（ほかの窓口が劣って見えないように） */
.kz-guide .fw-tel .tag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-size: 12px; font-weight: 700; line-height: 1.6; vertical-align: 1px; }