/* 記事・サービスページのスタイル。
   LP（Framer 由来の index.html / contact.html）とはコードを共有しないが、
   デザイン言語は揃える。下のトークンは LP の描画結果から実測した値。
   目分量で寄せるとずれるので、変えるときも LP を計測してから変える。

   実測の要点:
   - letter-spacing は全要素 0.04em。これがこのブランドの一番の特徴
   - Chakra Petch = 英字の見出しと小ラベル、Noto Sans JP = 日本語本文
   - 明色 #e7e7e7 の面と、暗色 #141414 / #1c1c1c の面の2構成
   - 区切りはカードの枠ではなく全幅の1px罫線

   LP からの意図的なずれ:
   - 本文は LP の 14px ではなく 17px。LP は短い文の羅列だが、こちらは
     4,000〜6,000字を読ませる。同じサイズだと読めない */

:root {
  /* 面 */
  --bg: #e7e7e7;
  --bg-alt: #e9e9e9;
  --bg-dark: #141414;
  --bg-dark-alt: #1c1c1c;

  /* 文字 */
  --ink: #000;
  --ink-60: rgba(0, 0, 0, .6);
  --ink-50: rgba(0, 0, 0, .5);
  --ink-30: rgba(0, 0, 0, .3);
  --rule: rgba(0, 0, 0, .16);

  --paper: #fff;
  --paper-60: rgba(255, 255, 255, .6);
  --paper-30: rgba(255, 255, 255, .3);
  --rule-dark: rgba(255, 255, 255, .16);

  --font-jp: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-display: 'Chakra Petch', var(--font-jp);
  --ls: .04em;

  --measure: 42rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --wide: 84rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: var(--ls);
  font-feature-settings: 'palt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* LP の背景にはノイズが乗っている。同じ質感を出す */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: inherit; }
img, svg, video { max-width: 100%; height: auto; }

/* キーボードで辿ったときに、今どこにいるか分かるようにする。
   :where() で詳細度 0 にしてあるので、個別の指定を上書きしない */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.cta :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible { outline-color: var(--paper); }

/* ---------- ラベル（S / 001 の類）---------- */

.label {
  display: block;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: var(--ls);
  color: var(--ink-50);
  margin: 0 0 1.5rem;
}

.on-dark .label, .cta .label { color: var(--paper-30); }

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem var(--gutter);
  max-width: var(--wide);
  margin-inline: auto;
}

.site-logo { display: block; color: var(--ink); }
.site-logo svg { display: block; width: 68px; height: auto; }

.site-header-right { display: flex; align-items: center; gap: 1.75rem; min-height: 30px; }

.site-nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: var(--ls);
}

.site-nav a {
  color: var(--ink-50);
  text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- サービス配下のサブナビ ---------- */

/* グローバルナビは Services / Blog / Contact の3つだけ。3サービスを並列に置くと
   Blog や Contact と同じ階層に見え、/services 一覧がどこからも指されなくなる。
   子への横移動はここが持つ。 */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: var(--ls);
  padding-bottom: 2.5rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--rule);
}
.subnav a {
  color: var(--ink-50);
  text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- layout ---------- */

.page {
  max-width: var(--wide);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

/* ---------- 本文 + サイドバーの2カラム ----------
   1カラムだと 1344px の容器に 672px の本文が左に寄り、右半分が丸ごと空いたまま
   記事が縦に10,000px 伸びていた。空いている側を目次と導線に使う。
   見出しは全幅のまま（LP の大見出しの流れを残す）、本文から下だけ2カラムにする。 */

/* 記事とサービスは容器を 84rem より狭くする。
   84rem のままだと本文（42rem）とサイドバー（17rem）の間が 400px 空いて、
   2カラムに見えずに別々の島になる */
.page-article, .page-service { max-width: 76rem; }

.entry-layout { display: grid; gap: 3rem; }
.entry-main { min-width: 0; }
.entry-main > .prose { max-width: var(--measure); }

/* 狭い画面ではサイドバーが本文の後ろに回るので、目次だけ前に出す。
   記事を読み終わってから目次が出てきても意味がない。
   display:contents でサイドバーの中身を外側のグリッドの直接の子にして、
   order で並べ替える */
@media (max-width: 63.99rem) {
  .entry-side { display: contents; }
  .entry-side .toc { order: -1; }
  .entry-main { order: 0; }
  .entry-side .side-block { order: 1; }
  .entry-side .side-block + .side-block { margin-top: -1rem; }
}

@media (min-width: 64rem) {
  .entry-layout {
    grid-template-columns: minmax(0, var(--measure)) 17rem;
    justify-content: space-between;
    gap: 3rem;
    align-items: start;
  }
  .entry-side {
    position: sticky;
    top: 2rem;
    display: grid;
    gap: 2.5rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.side-block { display: grid; gap: .875rem; }
.side-block .label { margin: 0; }

.side-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.side-links a {
  font-size: .875rem;
  line-height: 1.75;
  color: var(--ink-60);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.side-links a:hover { color: var(--ink); border-bottom-color: var(--rule); }

/* サービスの概要。
   grid の gap を使うと項目名と値の間隔が項目間と同じになり、対応が読めなくなる。
   名前と値をくっつけ、組の間を空ける */
.facts { margin: 0; }
.facts dt {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}
.facts dt:first-of-type { margin-top: 0; }
.facts dd { margin: .25rem 0 0; font-size: .9375rem; line-height: 1.7; font-weight: 700; }

.side-cta {
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgba(0, 0, 0, .025);
}
.side-cta-text { margin: 0; font-size: .875rem; font-weight: 700; line-height: 1.7; }
.side-cta .button-light { padding: .75rem 1.5rem; font-size: .875rem; text-align: center; }

.breadcrumb {
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
  padding-block: 2rem 4rem;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep { margin-inline: .625rem; }

/* 全幅の罫線。LP のセクション区切りと同じ */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------- 見出し ---------- */

/* LP は「英語の大見出し + 小さい日本語」で組んである */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.15;
  letter-spacing: var(--ls);
  margin: 0;
}

h1 {
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: var(--ls);
  margin: 0 0 1.75rem;
}

.lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 2;
  color: var(--ink-60);
  max-width: var(--measure);
}

/* ---------- 記事・サービスのヘッダー ---------- */

.entry-head { padding-bottom: 3.5rem; }

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
  margin: 0 0 2rem;
}

.entry-pillar { color: var(--ink-50); text-decoration: none; border-bottom: 1px solid var(--rule); }
.entry-pillar:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- 目次 ---------- */

/* 目次はサイドバーに置く。本文の上に積むと、読み始めるまでに1画面ぶん遠くなる */
.toc { margin: 0; }
.toc .label { margin: 0 0 1rem; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li + li { margin-top: .5rem; }
.toc a {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: .375rem;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--ink-60);
  text-decoration: none;
  transition: color .2s;
}
/* いま読んでいる見出しを示す */
.toc a[aria-current='true'] { color: var(--ink); font-weight: 700; }
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: .75rem;
  color: var(--ink-30);
}
.toc a:hover { color: var(--ink); }

/* ---------- 本文 ---------- */

.prose { max-width: var(--measure); }

/* 段落間の余白はここだけで決める。
   個別要素側で margin: 0 を書くと `.prose p`(0,1,1) が `.prose > * + *`(0,1,0) より
   詳細度が高くなり、隣接セレクタの margin-top を打ち消す。実際にそれで全段落がくっついた。 */
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.5rem; }

.prose h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: var(--ls);
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 2rem;
}

.prose h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.75;
  margin-top: 2.5rem;
}

.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: .75rem; }
.prose li::marker { color: var(--ink-30); }

.prose a {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: var(--ink-30);
  transition: text-decoration-color .2s;
}
.prose a:hover { text-decoration-color: var(--ink); }

.prose strong { font-weight: 700; }

.prose blockquote {
  padding-left: 1.5rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-60);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  letter-spacing: 0;
  background: rgba(0, 0, 0, .06);
  border-radius: 2px;
  padding: .1em .4em;
}

.prose pre {
  background: var(--bg-dark);
  color: var(--paper);
  padding: 1.5rem;
  overflow-x: auto;
  line-height: 1.75;
}
.prose pre code { background: none; padding: 0; font-size: .8125rem; }

.prose figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--ink-50); }
.prose figure { margin-inline: 0; }

.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .875rem 1rem .875rem 0; text-align: left; vertical-align: top; line-height: 1.85; }
.prose th { font-weight: 700; white-space: nowrap; border-bottom-color: var(--ink); }

.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 3rem; }

/* ---------- 記事末尾の著者 ----------
   誰が書いたかは B2B では読まれるかどうかを分ける。
   本文からは全幅の1px罫線で切り、名前・肩書き・略歴を段で分ける */

.author {
  max-width: var(--measure);
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.author .label { margin: 0 0 1.5rem; }

.author-name { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.6; }
.author-name a {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: var(--ink-30);
  transition: text-decoration-color .2s;
}
.author-name a:hover { text-decoration-color: var(--ink); }

/* 和名の横に欧文。LP の見出しと同じ組み方 */
.author-name-en {
  margin-left: .875rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}

.author-role { margin: .375rem 0 0; font-size: .8125rem; color: var(--ink-50); }
.author-bio { margin: 1.25rem 0 0; font-size: .9375rem; line-height: 1.9; color: var(--ink-60); }

.article-sources { border-top: 1px solid var(--rule); padding-top: 1.5rem; font-size: .875rem; color: var(--ink-60); }
.article-sources-title { margin: 0 0 .75rem; font-family: var(--font-display); font-size: .75rem; letter-spacing: var(--ls); color: var(--ink-50); }
.article-sources ul { margin: 0; padding-left: 1.25rem; }

/* ---------- 索引つきの項目リスト（LP の S / 001 と同じ組み方）---------- */

.indexed { margin: 0; padding: 0; list-style: none; }
.indexed > li { border-top: 1px solid var(--rule); padding: 2.5rem 0; }
.indexed > li:last-child { border-bottom: 1px solid var(--rule); }

.indexed-num {
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
  margin: 0 0 1rem;
}
.indexed-title { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 700; line-height: 1.65; }
.indexed-body { margin: 0; color: var(--ink-60); max-width: var(--measure); }
/* 行全体がリンクだが、見出しと本文にしか見えなかった。
   タイトルに罫線を残して、静止状態でも押せると分かるようにする */
.indexed a { text-decoration: none; display: block; }
.indexed a .indexed-title {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: var(--ink-30);
  transition: text-decoration-color .2s;
}
.indexed a:hover .indexed-title { text-decoration-color: var(--ink); }

/* 和文の副題。inline-block にしてタイトルの下線から外す
   （text-decoration は子孫に伝播し、子で none にしても消せない）*/
.indexed-title-ja {
  display: inline-block;
  font-size: .875rem;
  font-weight: 400;
  color: var(--ink-50);
  text-decoration: none;
}

/* ---------- 費用の考え方 / 実績 ---------- */

.section { padding-block: 3.5rem; }
.section-head { margin-bottom: 2rem; }
.section-head .display { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.section-head p { margin: .75rem 0 0; color: var(--ink-60); max-width: var(--measure); }

.pricing { display: grid; gap: 0; }
.pricing dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.pricing dt {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  font-weight: 700;
  font-size: 1rem;
}
.pricing dd { margin: .5rem 0 0; padding-bottom: 1.5rem; color: var(--ink-60); font-size: .9375rem; }
.pricing dd:last-of-type { border-bottom: 1px solid var(--rule); }

.works { list-style: none; margin: 0; padding: 0; }
.works > li { border-top: 1px solid var(--rule); padding: 2rem 0; display: grid; gap: .5rem; }
.works > li:last-child { border-bottom: 1px solid var(--rule); }
.works-client { font-family: var(--font-display); font-size: .8125rem; letter-spacing: var(--ls); color: var(--ink-50); }
.works-title { font-weight: 700; font-size: 1.0625rem; line-height: 1.65; }
.works-desc { color: var(--ink-60); font-size: .9375rem; max-width: var(--measure); }
.works-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.works-tags span {
  font-family: var(--font-display);
  font-size: .6875rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .125rem .625rem;
}

/* ---------- 会社情報（/company）----------
   トップページから移してきた Mission / About / Member / Company。
   LP では暗色面に白抜きで組んであったが、こちらは記事側の明色面に合わせる。
   暗転は末尾の CTA からで、他のページと転換の位置を揃える。 */

/* /company の h1。このページで一番大きい文字はミッションにしたいので、
   ページタイトルはその一段下に置く。英語の巨大なタグラインを頭に置いていたが、
   ミッションと同じことを言っていたので末尾の English セクションに移した */
.h1-lg {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

/* ミッションの一行。ページの中で一番大きい文字にする。
   元は英語1文 + 日本語2文を積んでいて、どれも覚えられなかった */
.statement {
  margin: 1.5rem 0 0;
  font-size: clamp(1.5rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--ls);
}
.statement-en {
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}

/* 索引つきリストの中に置く外部・内部リンク（自社プロダクトの参照先） */
.indexed-link { margin: 1rem 0 0; font-size: .8125rem; }
.indexed-link a {
  font-family: var(--font-display);
  letter-spacing: var(--ls);
  color: var(--ink-50);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .125rem;
}
.indexed-link a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* 英文。日本語の本文と同じ大きさだと字面が強く出るので、少し落とす */
.prose-en { max-width: var(--measure); }
.prose-en p {
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--ink-60);
}
.prose-en p:last-child { margin-bottom: 0; }

/* メンバー。サービス一覧の3カラム（索引 / 本文 / 画像）と同じ骨格にする。
   LP は写真を右に置いて本文を右寄せにしていたが、経歴は読ませる文章なので
   左揃えに直した */
.members { list-style: none; margin: 0; padding: 0; }
.members > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 3rem 0;
  border-top: 1px solid var(--rule);
}
.members > li:last-child { border-bottom: 1px solid var(--rule); }

.members-num {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}

.members-body { display: grid; gap: .5rem; align-content: start; }

.members-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
}
.members-name-ja {
  font-family: var(--font-jp);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}
.members-role { margin: 0 0 1rem; font-size: .875rem; font-weight: 700; letter-spacing: var(--ls); }
.members-bio { margin: 0; font-size: .9375rem; line-height: 1.9; color: var(--ink-60); max-width: var(--measure); }

.members-photo { justify-self: start; }
.members-photo img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 900 / 1158;
  object-fit: cover;
}

@media (min-width: 810px) {
  .members > li {
    grid-template-columns: 8rem minmax(0, 1fr) 300px;
    gap: 2rem;
    align-items: start;
    padding: 4rem 0;
  }
  .members-photo { justify-self: end; }
}

/* 会社概要。項目名と値を1px罫線で仕切る組みは .pricing と同じ */
.profile dl { margin: 0; }
.profile dt {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}
.profile dd {
  margin: .5rem 0 0;
  padding-bottom: 1.25rem;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.8;
}
.profile dd:last-of-type { border-bottom: 1px solid var(--rule); }

@media (min-width: 810px) {
  .profile dl { display: grid; grid-template-columns: 12rem minmax(0, 1fr); }
  .profile dt { grid-column: 1; padding-bottom: 1.25rem; }
  .profile dd { grid-column: 2; margin: 0; border-top: 1px solid var(--rule); padding: 1.25rem 0; }
  .profile dd:last-of-type { border-bottom: 1px solid var(--rule); }
  .profile dt:last-of-type { border-bottom: 1px solid var(--rule); }
}

/* ---------- 工程の図（.flow）と分岐の図（.branch）----------
   サービス詳細の工程を、文章と別に一目で追える形で置く。
   SVG は使わない。本文の HTML に読めない塊が挟まるのと、
   文字が画像の中に入って引用も検索も効かなくなるため。
   線は LP と同じ 1px、番号は Chakra Petch。箱で囲まない。 */

.flow {
  list-style: none;
  margin: 2.5rem 0 3rem;
  padding: 0;
  counter-reset: flow;
}

.flow > li {
  position: relative;
  counter-increment: flow;
  padding: 0 0 1.5rem 3rem;
}
.flow > li:last-child { padding-bottom: 0; }

/* 連番 */
.flow > li::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}

/* 工程をつなぐ縦線。節の点は ::before の右に置いた1本の線で兼ねる */
.flow > li::after {
  content: '';
  position: absolute;
  left: 1.75rem;
  top: .45em;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.flow > li:last-child::after { display: none; }

.flow b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}
.flow span {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--ink-60);
}

/* 最後の工程が先頭に戻るもの（計測を続ける、毎週見る）*/
.flow-loop {
  margin: -1.5rem 0 3rem 3rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}

/* 状態 → 入口の対応。1つの判断の枝であることを、左の縦線で示す */
.branch {
  list-style: none;
  margin: 2.5rem 0 3rem;
  padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--rule);
}
.branch > li {
  position: relative;
  display: grid;
  gap: .25rem;
  padding: .875rem 0;
}
/* 枝の横線 */
.branch > li::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 1.6em;
  width: .875rem;
  height: 1px;
  background: var(--rule);
}
.branch-from { font-size: .875rem; color: var(--ink-60); }
.branch-to { font-size: 1rem; font-weight: 700; line-height: 1.6; }
.branch-to::before {
  content: '→';
  margin-right: .5rem;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-30);
}

@media (min-width: 810px) {
  .branch > li {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }
}

/* ---------- サービスの全体図（.matrix）----------
   4本がどれも「見極める → つくる → 渡す → 続ける」の形をしている、というのが
   売り方の中身なので、それを一目で出す。中身は各サービス本文に書いてあるものだけ。
   マトリクスなので table を使う。狭い画面では横スクロールさせる。 */

.matrix-wrap {
  margin: 2.5rem 0 1rem;
  overflow-x: auto;
  /* スクロールできることが分かるように、右端を薄く落とす */
  -webkit-overflow-scrolling: touch;
}

.matrix {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: .875rem;
  letter-spacing: var(--ls);
}

.matrix th,
.matrix td {
  text-align: left;
  vertical-align: top;
  padding: 1rem .875rem;
  border-top: 1px solid var(--rule);
}
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

/* 列見出し（工程）*/
.matrix thead th {
  border-top: 0;
  padding-top: 0;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink-50);
}
.matrix thead th:first-child { width: 11rem; }

/* 行見出し（サービス名）*/
.matrix tbody th {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.matrix tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.matrix tbody th a:hover { border-bottom-color: var(--ink); }

.matrix td { color: var(--ink-60); line-height: 1.7; }
/* その工程を扱わないところ */
.matrix .matrix-none { color: var(--ink-30); }

.matrix-note {
  margin: 0 0 3rem;
  font-size: .8125rem;
  color: var(--ink-50);
}

/* ---------- 人がやる / 機械がやる の分担（.split）----------
   「AIで圧縮する」と「設計と解釈は人がやる」を本文の複数箇所で書いているので、
   2列に並べて対比させる。線だけで組む。 */

.split {
  display: grid;
  gap: 0;
  margin: 2.5rem 0 3rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.split > div { padding: 1.5rem 0; }
.split > div + div { border-top: 1px solid var(--rule); }

.split h4 {
  margin: 0 0 .875rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: var(--ls);
}
.split h4 span {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--ink-50);
}

.split ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.split li {
  position: relative;
  padding-left: 1rem;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--ink-60);
}
.split li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .8em;
  width: .375rem;
  height: 1px;
  background: var(--ink-30);
}

@media (min-width: 810px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split > div { padding: 1.75rem 2rem 1.75rem 0; }
  .split > div + div { border-top: 0; border-left: 1px solid var(--rule); padding-left: 2rem; padding-right: 0; }
}

/* ---------- FAQ ---------- */

.faq dl { margin: 0; }
.faq dt { border-top: 1px solid var(--rule); padding-top: 1.75rem; font-weight: 700; line-height: 1.7; }
.faq dd { margin: .75rem 0 0; padding-bottom: 1.75rem; color: var(--ink-60); font-size: .9375rem; max-width: var(--measure); }
.faq dd:last-of-type { border-bottom: 1px solid var(--rule); }

/* ---------- CTA（LP の明→暗の転換に合わせて暗色面にする）---------- */

.cta {
  background: var(--bg-dark);
  color: var(--paper);
  margin-top: 6rem;
}
.cta-inner { max-width: var(--wide); margin-inline: auto; padding: 5rem var(--gutter); }
.cta-heading { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.25; letter-spacing: var(--ls); }
.cta-sub { margin: 0 0 1.5rem; font-size: 1rem; font-weight: 700; }
.cta-lead { margin: 0 0 1rem; color: var(--paper-60); max-width: var(--measure); }
.cta-note { margin: 0 0 2.5rem; font-size: .875rem; color: var(--paper-30); max-width: var(--measure); }

.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }

.cta-button {
  display: inline-block;
  padding: 1rem 3rem;
  background: var(--paper);
  color: var(--bg-dark);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: var(--ls);
  text-decoration: none;
  border-radius: 999px;
  transition: opacity .2s;
}
.cta-button:hover { opacity: .8; }

.cta-secondary {
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: var(--ls);
  color: var(--paper-60);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: .25rem;
}
.cta-secondary:hover { color: var(--paper); border-bottom-color: var(--paper); }

/* 明色面に置く CTA ボタン（サービスページの冒頭など） */
.button-light {
  display: inline-block;
  padding: 1rem 3rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: var(--ls);
  text-decoration: none;
  border-radius: 999px;
  transition: opacity .2s;
}
.button-light:hover { opacity: .8; }

/* ---------- footer ---------- */

.site-footer { background: var(--bg-dark); color: var(--paper); overflow: hidden; }
.site-footer-inner { max-width: var(--wide); margin-inline: auto; padding: 4rem var(--gutter) 0; display: grid; gap: 2rem; }
.site-footer .site-logo { color: var(--paper); }
.site-footer-nav { display: flex; flex-wrap: wrap; gap: 3rem; font-size: .8125rem; letter-spacing: var(--ls); }
.site-footer-navgroup { display: grid; gap: .875rem; align-content: start; }
.site-footer-navtop { font-family: var(--font-display); color: var(--paper); text-decoration: none; }
.site-footer-navtop:hover { opacity: .7; }
.site-footer-navgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.site-footer-navgroup li a { color: var(--paper-60); text-decoration: none; font-size: .8125rem; }
.site-footer-navgroup li a:hover { color: var(--paper); }
.site-footer-note, .site-footer-copy { margin: 0; font-size: .75rem; color: var(--paper-30); line-height: 1.9; }

/* LP のフッターにある巨大なワードマーク */
.site-footer-mark { margin-top: 2rem; color: var(--paper); opacity: .12; }
.site-footer-mark svg { display: block; width: 100%; height: auto; }

/* ---------- 画面幅 ---------- */

@media (max-width: 63.99rem) {
  /* 横並びは畳んで Menu に集約する。LP の .lp-nav も同じ幅で消えるので、
     狭い画面ではどのページも「ロゴ + Menu」で揃う */
  .site-nav { display: none; }
}

@media (max-width: 47.99rem) {
  .site-header { padding-block: 1.125rem; gap: 1rem; }
  .site-logo svg { width: 54px; }
  .site-nav {
    gap: 1.125rem;
    font-size: .75rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .cta-actions { gap: 1.25rem; }
  .subnav {
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { white-space: nowrap; }
  .site-footer-nav { gap: 2rem; }
  .cta-button, .button-light { width: 100%; text-align: center; padding-inline: 1.5rem; }
}

@media (min-width: 64rem) {
  /* 見出しと本文を左寄せの読み幅に保ちつつ、罫線は全幅に伸ばす */
  .prose h2 { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- お問い合わせ ----------
   Framer 版はモバイルでレイアウトが壊れていた。フッターが絶対配置でフォームより
   上に来て、フォームは 600px 固定幅で左右が切れ、ラベルが読めなかった。
   スマートフォンから問い合わせできない状態だったので、組み直している。 */

.page-contact { max-width: var(--wide); }

.contact-grid {
  display: grid;
  gap: 4rem;
  padding-bottom: 2rem;
}

.field-group { display: grid; gap: 1.75rem; }

.field { display: grid; gap: .625rem; }

.field label {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: var(--ls);
}

/* 必須に印を付けるより、任意を明示する方が
   「書かなくてよい欄がある」と先に伝わる */
.field-optional {
  margin-left: .625rem;
  padding: .15em .625em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 400;
  color: var(--ink-50);
  vertical-align: 1px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .875rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #f2f2f2;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem; /* 16px 未満だと iOS が拡大する */
  line-height: 1.7;
  letter-spacing: var(--ls);
  transition: border-color .2s, background .2s;
}

.field textarea { resize: vertical; min-height: 9rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-30); }

.field input:hover,
.field select:hover,
.field textarea:hover { background: #eee; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  background: #fff;
}

.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid { border-color: #c0392b; }

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-50) 50%),
                    linear-gradient(135deg, var(--ink-50) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* honeypot。api/contact.js がここに値が入っていたら bot と判定して黙って捨てる。
   display:none にすると埋めないボットがいるので、見えないだけの状態に保つ。
   一度これが画面に露出して、入力した人の問い合わせが消える状態を作ったことがある。
   scripts/verify-form.mjs が毎回この不可視を確認している。 */
.honeypots {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* 入力欄自体も潰しておく。画面外に置くだけだと、
   要素の寸法を見る検査や支援技術からは「そこにある」ように見える */
.honeypots input {
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

.contact-submit { margin-top: 2.5rem; border: 0; cursor: pointer; font-family: inherit; }
.contact-submit[disabled] { opacity: .5; cursor: default; }

.contact-privacy {
  margin: 1.25rem 0 0;
  font-size: .75rem;
  color: var(--ink-50);
  line-height: 1.9;
}

/* 送信結果 */
[data-contact-error] { max-width: var(--measure); }

.contact-aside { align-self: start; }

.contact-steps {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: .875rem;
}
.contact-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.25rem;
  font-size: .9375rem;
  color: var(--ink-60);
  line-height: 1.9;
}
.contact-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: .75rem;
  color: var(--ink-30);
  line-height: 1.9;
}
.contact-steps strong { color: var(--ink); }

.contact-aside-note {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .875rem;
  color: var(--ink-60);
  line-height: 1.9;
}

.contact-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.contact-links a {
  font-size: .9375rem;
  color: var(--ink-60);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .25rem;
}
.contact-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (min-width: 64rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 5rem;
    align-items: start;
  }
  .field-group { max-width: var(--measure); }
}

/* ---------- ナレッジのテーマ ----------
   時系列のブログではなく、テーマごとに積み上がる形にしている。
   /knowledge にテーマのカード、/knowledge/themes/{slug} にそのテーマの記事一覧。
   記事の URL は /knowledge/{slug} でテーマの下に入れない。
   記事が別テーマに移っても URL が変わらないようにするため。 */

.theme-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

/* テーマが増えると縦一列では見渡せない。広い画面では2列にする */
@media (min-width: 64rem) {
  .theme-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
  .theme-card:nth-child(2) { border-top: 1px solid var(--rule); }
}

.theme-card {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0;
}
.theme-card:last-child { border-bottom: 1px solid var(--rule); }

.theme-num {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
}

.theme-title {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--ls);
}
.theme-title a {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: var(--ink-30);
  transition: text-decoration-color .2s;
}
.theme-title a:hover { text-decoration-color: var(--ink); }

.theme-summary {
  margin: 0 0 1.5rem;
  color: var(--ink-60);
  max-width: var(--measure);
  font-size: .9375rem;
}

.theme-articles {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: .625rem;
  max-width: var(--measure);
}
/* 直前の .theme-summary と同じ ink-60 の地の文で、記事一覧だと読めなかった。
   矢印を立てて、リンクは ink、地の文は ink-60 と濃さで分ける */
.theme-articles li {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  align-items: baseline;
}
.theme-articles li::before {
  content: '\2192';
  font-family: var(--font-display);
  font-size: .8125rem;
  color: var(--ink-30);
}
.theme-articles a {
  font-size: .9375rem;
  color: var(--ink);
  line-height: 1.75;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: var(--ink-30);
  transition: text-decoration-color .2s;
}
.theme-articles a:hover { text-decoration-color: var(--ink); }

.theme-more { margin: 0; }
.theme-more a {
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .25rem;
}
.theme-more a:hover { color: var(--ink); border-bottom-color: var(--ink); }


.theme-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.theme-links a {
  font-size: .9375rem;
  color: var(--ink-60);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.theme-links a:hover { color: var(--ink); border-bottom-color: var(--rule); }

@media (min-width: 48rem) {
  .theme-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; }
}

/* サービス一覧に出す「顧客の状態」 */
.service-stage {
  margin: 0 0 .75rem;
  font-size: .8125rem;
  color: var(--ink-50);
  letter-spacing: var(--ls);
}

/* 末尾の English セクションの見出しは長い1文。他の section-head より小さくする */
#about.section .display { font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.4; }