/* ===========================================================================
   ACLab / aclabtech.com
   数値は共通デザイン仕様のスケールへスナップし、
   色は WCAG を 5つの地色すべてに対して実測して確定している。
   色・余白・サイズは下の :root だけで定義する。以下に生の数値を書かない。
   =========================================================================== */

:root {
  /* --- 地。単色2種だけ（_core.md §8「セクションごとに背景色を変えない」）--- */
  --paper: #F7F8FB;      /* ページ地 */
  --surface: #FFFFFF;    /* 文字を載せる面 */
  --tint: #F1EEFF;       /* ブランドの淡い塗り。文字は ink のみ載せる */

  /* --- 文字。brand.md の正本値。すべて paper / surface 上で実測済み ------- */
  --ink: #18213E;        /* 見出し・本文        14.91:1 / paper */
  --body: #18213E;       /* 本文（inkと同色。階層はサイズと太さで作る） */
  --meta: #5E667A;       /* 補足・ラベル         5.41:1 / paper */
  --brand: #4B3CBC;      /* ブランド文字・リンク  7.40:1 / paper */
  --brand-fill: #5B4BD6; /* ブランド塗り（白文字 6.14:1） */
  --brand-strong: #3B2E96;
  --on-dark: #FFFFFF;

  /* --- 面と線 ------------------------------------------------------------ */
  --solid: #18213E;                    /* 主ボタン */
  --line: #CED2EA;                     /* 罫線の基本。中立グレーではなく紫寄り（Stripe #e5edf5 の考え方）。実測 paper 1.41:1 / surface 1.50:1 */
  --rule: var(--line);
  --rule-soft: #E7E9F0;
  --rule-strong: #7E8599;              /* 操作部品の境界。実測 白3.68:1 / paper3.47:1 */
  --focus: #3B2E96;

  /* --- 行送り。和文の長文可読性に振る（_core.md 既定より広く取る）--------- */
  --lh-display: 1.2;     /* 大見出し（既定1.15） */
  --lh-heading: 1.5;     /* 見出し（既定1.35） */
  --lh-body: 2.2;        /* 本文（既定1.8） */
  --lh-tight: 1.5;       /* ラベル・ボタン */

  /* --- 書体 -------------------------------------------------------------- */
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Yu Gothic", sans-serif;
  /* brand.md: display は Zen Kaku Gothic New 700。和文本文用のwebfontは読み込まない
     （数百KB増になるためOS標準へフォールバックさせる）。 */
  --font-display: "Zen Kaku Gothic New", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Yu Gothic", sans-serif;

  /* --- 文字サイズ（_core.md §1 の8段から7つだけ使う） -------------------- */
  --fs-hero: clamp(40px, 6vw, 64px);   /* Web spec: step 4 → 6 */
  --fs-h2: clamp(32px, 4vw, 40px);     /* step 3 → 4 */
  /* H1(--fs-hero)を常に最大にする。以前は1200px幅で H1 54px < 受講者数 64px と
     階層が逆転していた（2026-09-15の独立検査で実測）。 */
  --fs-num: clamp(25px, 2.4vw, 32px);      /* step 2 → 3。40px(=--fs-h2)まで上げると先頭の
                                              受講者数(50px)との差が1.25倍しか残らず、「研修の受講者数
                                              だけを大きくする」という主従が崩れるため32pxで止める。
                                              狭い画面では25pxへ戻す（先頭は32pxなので差が残る） */
  --fs-num-lead: clamp(32px, 4vw, 50px);   /* step 3 → 5 */
  --fs-h3: 25px;                       /* step 2 */
  --fs-lead: 20px;                     /* step 1 */
  --fs-base: 16px;                     /* step 0 */
  --fs-meta: 16px;                     /* step 0 */
  --fs-note: 14px;                     /* step -1。サイト全体の最小サイズ */

  /* --- 余白（4pxベース9段のみ） ------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --sec: clamp(48px, 8vw, 96px);
  --sec-tight: clamp(32px, 6vw, 64px);

  /* --- 角丸: 2値。Stripe に倣い 4〜8px に抑え、pill 形状は使わない ------- */
  --r-sm: 6px;
  --r-md: 8px;

  /* --- 影は2段だけ。_core.md §6 の既定値をそのまま使う -------------------- */
  /* 使ってよいのは「浮いている必要があるもの」= ドロップダウン・モーダル・固定ヘッダー。
     カードやボタンには使わない（影が3つ以上並んだ時点で情報階層が壊れる）。 */
  /* 現在このサイトで影を使うのはモーダル1箇所だけなので lg しか定義しない。
     sm が要るときは _core.md §6 の値をそのまま足す。 */
  --shadow-lg: 0 12px 32px rgba(16, 20, 35, .14);

  /* --- モーション。イージングは1つに統一する ------------------------------ */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --dur-micro: .18s;   /* ホバー・フォーカスなどの即応 */
  --dur-reveal: .6s;   /* スクロールで現れる */
  --dur-line: .7s;     /* ヒーローの行送り */

  --container: min(1200px, 100vw - 48px);
  --header-h: 64px;
  --index-col: 280px;
}

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

/* ローカル編集モードが選ぶ安全なプリセット。任意CSSは保存しない。 */
.ed-fs-note { font-size: var(--fs-note) !important; }
.ed-fs-meta, .ed-fs-base { font-size: var(--fs-base) !important; }
.ed-fs-lead { font-size: var(--fs-lead) !important; }
.ed-fs-h3 { font-size: var(--fs-h3) !important; }
.ed-fs-h2 { font-size: var(--fs-h2) !important; }
.ed-fs-h1 { font-size: var(--fs-hero) !important; }
.ed-fs-display { font-size: 64px !important; }
.ed-w-auto { width: auto !important; max-width: none !important; }
.ed-w-narrow { width: min(34em, 100%) !important; max-width: 34em !important; }
.ed-w-reading { width: min(780px, 100%) !important; max-width: 780px !important; }
.ed-w-wide { width: min(980px, 100%) !important; max-width: 980px !important; }
.ed-w-full { width: 100% !important; max-width: none !important; }
.ed-align-start { text-align: left !important; }
.ed-align-center { text-align: center !important; }
.ed-align-end { text-align: right !important; }
.ed-place-start { margin-right: auto !important; margin-left: 0 !important; }
.ed-place-center { margin-right: auto !important; margin-left: auto !important; }
.ed-place-end { margin-right: 0 !important; margin-left: auto !important; }
.ed-place-stretch { width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; }
.ed-mt-0 { margin-top: 0 !important; }
.ed-mt-s1 { margin-top: var(--s-1) !important; }
.ed-mt-s2 { margin-top: var(--s-2) !important; }
.ed-mt-s3 { margin-top: var(--s-3) !important; }
.ed-mt-s4 { margin-top: var(--s-4) !important; }
.ed-mt-s5 { margin-top: var(--s-5) !important; }
.ed-mt-s6 { margin-top: var(--s-6) !important; }
.ed-mt-s7 { margin-top: var(--s-7) !important; }
.ed-mt-s8 { margin-top: var(--s-8) !important; }
.ed-mt-s9 { margin-top: var(--s-9) !important; }
.ed-mb-0 { margin-bottom: 0 !important; }
.ed-mb-s1 { margin-bottom: var(--s-1) !important; }
.ed-mb-s2 { margin-bottom: var(--s-2) !important; }
.ed-mb-s3 { margin-bottom: var(--s-3) !important; }
.ed-mb-s4 { margin-bottom: var(--s-4) !important; }
.ed-mb-s5 { margin-bottom: var(--s-5) !important; }
.ed-mb-s6 { margin-bottom: var(--s-6) !important; }
.ed-mb-s7 { margin-bottom: var(--s-7) !important; }
.ed-mb-s8 { margin-bottom: var(--s-8) !important; }
.ed-mb-s9 { margin-bottom: var(--s-9) !important; }
.ed-preserve-lines { white-space: pre-line !important; }

html {
  background-color: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.container { width: var(--container); margin-inline: auto; }

.skip-link {
  position: fixed; top: var(--s-2); left: var(--s-2); z-index: 60;
  padding: var(--s-3) var(--s-4);
  background-color: var(--solid); color: var(--on-dark);
  font-size: var(--fs-meta); font-weight: 700; border-radius: var(--r-sm);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; color: var(--on-dark); }

/* --- 共通のタイポ役割 ------------------------------------------------------ */
.eyebrow {
  font-size: var(--fs-note); font-weight: 700; line-height: 1.5;
  letter-spacing: .2em; color: var(--brand);
}
.display,
.section-title,
.hero-copy h1 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
}
.lead {
  max-width: 34em;
  font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--body);
}
.note { font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }

/* 罫線で区切った行。4b の表組みの基本形 */
.rows { border-bottom: 1px solid var(--rule); }
.row { border-top: 1px solid var(--rule); }
.row-num { font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; color: var(--brand); }
.row-title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.row-text { font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }

/* --- ボタン ---------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--s-3) var(--s-6);
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700;
  line-height: 1.5; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.button-solid, .button-brand { background-color: var(--solid); color: var(--on-dark); }
.button-solid:hover, .button-brand:hover { background-color: var(--brand-fill); color: var(--on-dark); }
.button-outline, .button-light { border-color: var(--rule-strong); color: var(--ink); }
.button-outline:hover, .button-light:hover { border-color: var(--ink); background-color: rgba(24, 33, 62, .06); color: var(--ink); }
.button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.actions, .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* --- ヘッダー -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--rule-soft);
}
/* backdrop-filter を .site-header 自身に掛けると、子孫の position:fixed の
   包含ブロックがヘッダーになり、全画面メニューが画面左端に来ない。疑似要素へ逃がす。 */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: rgba(247, 248, 251, .78);
  backdrop-filter: blur(4px);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header.is-scrolled::before { background-color: rgba(247, 248, 251, .94); backdrop-filter: blur(16px); }
.nav-shell {
  width: var(--container); margin-inline: auto; min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.brand, .personal-brand { display: flex; align-items: center; min-height: 44px; gap: var(--s-3); color: var(--ink); }
.brand img, .personal-brand img { height: 36px; width: auto; }  /* brand.md: 画面での最小幅 96px */
.personal-brand strong { font-family: var(--font-display); font-size: var(--fs-base); }

.site-nav { display: flex; align-items: center; gap: var(--s-6); }
.site-nav .nav-foot { display: none; }
.site-nav > a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-meta); font-weight: 500; line-height: 1.5; color: var(--ink); }
.site-nav > a:hover, .site-nav > a[aria-current="page"], .site-nav > a.is-current { color: var(--brand); }

.nav-cta {
  padding: var(--s-3) var(--s-5); min-height: 44px;
  display: inline-flex; align-items: center;
  background-color: var(--solid); color: var(--on-dark);
  font-size: var(--fs-meta); font-weight: 700; border-radius: var(--r-sm);
}
.nav-cta:hover { background-color: var(--brand-fill); color: var(--on-dark); }

.menu-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 20px; height: 2px; background-color: currentColor;
  transition: transform .18s ease, background-color .18s ease;
}
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after  { top: 6px; }
.menu-toggle[aria-expanded="true"] { position: relative; z-index: 55; }
.menu-toggle[aria-expanded="true"] span { background-color: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --- ヒーロー（4b） -------------------------------------------------------- */
.hero { padding-block: var(--sec) var(--sec-tight); border-bottom: 1px solid var(--rule); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s-8); align-items: start;
}
/* _core.md §3: 大見出し(step 4-6) は 1.15。Apple の「display を極端に詰める」を
   和文で成立する下限まで適用している（従来は 1.35 だった）。 */
.hero-copy h1 {
  margin-top: var(--s-5);
  font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: -.02em;
}
/* 1行ずつマスクの裏から立ち上げる。行は原稿側で分けてあるので、
   JSで文字を分割しない（和文の禁則が壊れるため）。 */
.hero-title .line { display: block; overflow: hidden; padding-bottom: var(--s-1); margin-bottom: calc(var(--s-1) * -1); }
/* 最終行の負マージンを戻す。残ると h1→罫線が 32-4=28px になり、_core.md §2 の禁止値になる。 */
.hero-title .line:last-child { margin-bottom: 0; }
.js .hero-title .line > span { display: block; transform: translateY(110%); transition: transform var(--dur-line) var(--ease); }
.js .hero-title.is-in .line > span { transform: none; }
.js .hero-title .line:nth-child(2) > span { transition-delay: .08s; }
.js .hero-title .line:nth-child(3) > span { transition-delay: .16s; }
.hero-rule { margin-top: var(--s-6); width: 200px; height: 2px; background-color: var(--brand-fill); }
.hero-copy .lead { margin-top: var(--s-5); }
.hero-copy .actions { margin-top: var(--s-6); }

/* --- 本文 ------------------------------------------------------------------ */
.doc-body { padding: var(--s-9) 0; display: flex; flex-direction: column; gap: var(--s-9); }
.block-head { display: flex; align-items: baseline; gap: var(--s-5); }
.block-head h2 { margin-top: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
/* アイブロウがある節だけ 12px。無い節に掛けると見出し上が 96→108px になり不揃いになる。 */
.block-head .eyebrow + h2 { margin-top: var(--s-3); }
.block-head h2 + p { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--meta); }
.block-body { margin-top: var(--s-6); }

/* 05 進め方 — 他セクションと同じ「行＋非対称幅」。
   等幅3カラム＋丸アイコンは _core.md §8 の禁止形に一致するため使わない
   （2026-08-25 の独立検査で指摘され、カード型から行型へ変更した）。 */
.step { display: grid; grid-template-columns: 88px minmax(0, 1fr) 220px; gap: var(--s-5); padding-block: var(--s-5); align-items: baseline; }
.step .row-text { margin-top: var(--s-2); }

/* 02 課題 / 03 サービス / 04 実績 — 表組みの行 */
/* 課題リスト。全幅の罫線で6行を刻むと、どの項目も同じ骨格の表組みに見える。
   罫線をやめ、余白と数字の大小だけで分ける2列グリッドにした（2026-09-15）。 */
.issue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
/* 地のグラデーションの上に小さい文字を直接置くと沈む。白の淡い面で持ち上げる。
   実測: 本文 #3A3A4C はこの面の上で 9.07:1（地に直接だと 7.96:1）。 */
.issue { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); align-items: start;
  padding: var(--s-5); border-radius: var(--r-md);
  background-color: var(--surface); border: 1px solid var(--line); }
.issue, .strength-list .strength {
  transition: border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
@media (hover: hover) {
  /* 面を強めて浮かせる。実測: 本文 #3A3A4C はホバー面の上で 9.84:1。 */
  .issue:hover, .strength-list .strength:hover {
    border-color: var(--brand-fill); transform: translateY(-2px);
  }
  .issue:hover .issue-map { color: var(--brand-strong, var(--focus)); }
}
.issue .row-num { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-display); color: var(--brand); font-variant-numeric: tabular-nums; }
.issue .row-title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.issue .row-text { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.issue-map { display: block; margin-top: var(--s-2); font-size: var(--fs-meta); font-weight: 700; line-height: var(--lh-body); color: var(--brand); }
.issue-map a { display: inline-flex; align-items: center; min-height: 44px; }

.service { display: grid; grid-template-columns: 180px minmax(0, 1fr) 300px; gap: var(--s-6); padding-block: var(--s-6); align-items: baseline; }
.service-tag { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .14em; color: var(--brand); }
.service > div > p { margin-top: var(--s-2); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); }
.service-meta { font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.service-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-3); font-size: var(--fs-meta); font-weight: 700; }

.case { display: grid; grid-template-columns: 110px 180px minmax(0, 1fr) 160px; gap: var(--s-5); padding-block: var(--s-6); align-items: center; }
.case-tag { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .14em; color: var(--brand); }
.case > div > p { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
/* 成果は Before → After で見せる。数字帯で作った「数字で語る」トーンを
   事例でも崩さない（2026-08-25 の独立検査で指摘） */
.case-result { text-align: right; }
.case-before {
  display: block; font-family: var(--font-body); font-size: var(--fs-note);
  font-weight: 700; line-height: 1.5; color: var(--meta);
}
.case-before::after { content: " ↓"; }
.case-after {
  display: block; margin-top: var(--s-1); font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading);
  letter-spacing: -.02em; color: var(--brand);
}

/* 05 About */
.about-photo img { width: 100%; height: auto; border-radius: var(--r-md); }
.about-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.about-role { margin-top: var(--s-1); font-size: var(--fs-meta); font-weight: 500; line-height: 1.5; color: var(--meta); }
.strength-tag { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .14em; color: var(--brand); }
.spec { margin-top: var(--s-6); border-bottom: 1px solid var(--rule); }
.spec .row { display: grid; grid-template-columns: 170px minmax(0, 1fr); padding-block: var(--s-4); }
.spec dt { font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; color: var(--meta); }
.spec dd { font-size: var(--fs-meta); font-weight: 500; line-height: 1.5; color: var(--ink); }

/* --- CONTACT --------------------------------------------------------------- */
.contact { padding-block: var(--sec); border-top: 1px solid var(--rule); }
.contact-inner { max-width: 760px; }
.contact h2 { margin-top: var(--s-5); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.contact p { margin-top: var(--s-5); }
.contact .actions { margin-top: var(--s-7); }

/* --- フッター -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); padding-block: var(--s-7); }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.footer-brand { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-brand img { align-self: flex-start; height: 36px; width: auto; }
.footer-brand p { font-size: var(--fs-note); line-height: 1.5; color: var(--meta); max-width: 34em; }
.footer-legal { font-size: var(--fs-note); line-height: 1.5; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--meta); }
.footer-legal a:hover { color: var(--brand); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-meta); line-height: 1.5; color: var(--ink); }
.footer-nav a:hover { color: var(--brand); }
.copyright { font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }

/* --- モバイル専用パーツ（5a） ---------------------------------------------- */
.chip-bar { display: none; gap: var(--s-2); overflow-x: auto; padding-block: var(--s-4); border-top: 1px solid var(--rule); scrollbar-width: none; }
.chip-bar::-webkit-scrollbar { display: none; }
.chip-bar a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--s-3); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  font-size: var(--fs-note); font-weight: 700; line-height: 1; color: var(--ink);
}
.chip-bar a.is-current { border-color: var(--brand); color: var(--brand); }

.mobile-bar { display: none; }
body.nav-open .mobile-bar { display: none !important; }  /* 全画面メニュー展開中は下部バーを隠す（重なりバグの回避） */

/* --- 下位ページ（4b と同じ言語に合わせる） --------------------------------- */
.page-hero { padding-block: var(--sec) var(--sec-tight); border-bottom: 1px solid var(--rule); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-note); line-height: 1.5; color: var(--meta); margin-bottom: var(--s-6); }
.breadcrumbs a { color: var(--brand); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-8); align-items: end; }
.page-hero-grid .eyebrow + .display { margin-top: var(--s-6); }
.display-small { font-size: var(--fs-h2); line-height: var(--lh-heading); }

.section { padding-block: var(--sec); }
.section-tight { padding-block: var(--sec-tight); }
.section + .section, .section-tight + .section,
.section + .section-tight, .section-tight + .section-tight { border-top: 1px solid var(--rule); }
.section-head { margin-bottom: var(--s-7); }
.section-head .eyebrow + .section-title { margin-top: var(--s-3); }
.section-title { font-size: var(--fs-h2); line-height: var(--lh-heading); }
/* 和文は既定の折り返しだと「〜分からな／い」のように1文字が孤立する。
   文節単位で折る（非対応ブラウザは既定動作のまま）。 */
.hero-title, .display, .section-title, .row-title, .issue h3, .service h3,
.proof-item dt { word-break: auto-phrase; }

/* サービス一覧 */
.service-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-index-card { display: block; padding: var(--s-6) var(--s-6) var(--s-6) 0; border-top: 1px solid var(--rule); color: var(--ink); position: relative; }
.service-index-grid > :first-child { grid-column: 1 / -1; padding-right: 0; }
.service-index-grid > :nth-child(3) { border-left: 1px solid var(--rule); padding-left: var(--s-6); }
.service-index-grid > :nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.service-num { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .14em; color: var(--brand); }
.card-arrow { position: absolute; top: var(--s-6); right: 0; color: var(--brand); font-size: var(--fs-meta); }
.service-index-card h2 { margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); }
.service-index-card p { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.service-index-card:hover h2 { color: var(--brand); }

/* サービス詳細 */
.detail-layout { display: grid; grid-template-columns: var(--index-col) minmax(0, 1fr); }
/* 目次を持たないページは1カラム。読み物が短いページで目次を出すと、
   中身より目次が目立ち、どのページも同じ骨格に見える。 */
.detail-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.detail-layout.is-single .detail-content { padding-left: 0; max-width: 46em; }
.detail-aside { border-right: 1px solid var(--rule); padding-right: var(--s-6); }
.detail-aside ul { position: sticky; top: calc(var(--header-h) + var(--s-5)); margin-top: var(--s-4); }
.detail-aside li a { display: flex; align-items: center; min-height: 44px; padding-block: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-meta); font-weight: 700; color: var(--ink); }
.detail-aside li:last-child a { border-bottom: 1px solid var(--rule); }
.detail-aside li a:hover { color: var(--brand); }
.detail-content { padding-left: var(--s-7); display: flex; flex-direction: column; gap: var(--s-9); }
.detail-block h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); margin-block: var(--s-3) var(--s-5); max-width: 24em; }
.detail-block > p { max-width: 34em; }
.detail-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.detail-next a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-1); }
.detail-content p a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-1); }

.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-6); border-bottom: 1px solid var(--rule); }
.mini-card { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-top: 1px solid var(--rule); }
.mini-grid > :nth-child(even) { border-left: 1px solid var(--rule); padding-left: var(--s-5); }
.mini-card h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--ink); }
.mini-card p { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); }

/* 番号リスト（複数ページで共用） */
/* --- 詳細ページの「進め方」は、ページごとに見せ方を変える -----------------
   全ページを同じ縦番号リストで組むと、文字だけ差し替えた印象になる。
   number-list（縦・番号）/ process-track（横帯）/ timeline（時間軸）の3種を使い分ける。 */

/* 横帯。工程が短く、並列に俯瞰させたいページ用 */
/* 目次のある狭いカラムでも収まるよう、列幅で折り返す（固定3列だと1280pxで溢れた） */
.process-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.process-track > * { padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.process-track > * + * { border-left: 1px solid var(--rule); padding-left: var(--s-5); }
.process-track span { font-size: var(--fs-note); font-weight: 700; letter-spacing: .14em; color: var(--brand); }
.process-track h3 { margin-top: var(--s-3); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.process-track p { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }

/* 時間軸。研修のように「当日の流れ」が本質のページ用 */
.timeline { border-top: 1px solid var(--rule); }
.timeline-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-6); border-bottom: 1px solid var(--rule); }
.timeline-when { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--brand); font-variant-numeric: tabular-nums; }
.timeline-item h3 { font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--ink); }
.timeline-item p { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); max-width: 34em; }

.number-list { border-bottom: 1px solid var(--rule); }
.number-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--rule); align-items: baseline; }
.number-item span { font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; color: var(--brand); }
.number-item h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.number-item p { grid-column: 2; margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); }

/* 実績ページ */
.works-intro { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); align-items: start; margin-bottom: var(--s-8); }
.works-stat strong { display: block; font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--brand); }
.works-stat-unit { font-size: var(--fs-base); font-weight: 700; margin-left: var(--s-2); color: var(--body); }
.works-stat strong + p { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--meta); }
.works-summary h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.works-summary p { margin-top: var(--s-3); }

.case-grid { border-bottom: 1px solid var(--rule); }
.case-card { padding-block: var(--s-6); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.case-card > div { min-width: 0; }
.case-card .case-result { display: block; text-align: left; margin-top: var(--s-3); }
.case-card .case-before::after { content: " →"; }
.case-card .case-after { display: inline-block; margin-top: var(--s-1); }
.case-card h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.case-card > p:not(.eyebrow), .case-card div > p { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); }
.case-flow { margin-top: var(--s-4); }
.case-flow > div { padding-block: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-meta); line-height: var(--lh-body); }
.case-flow span { display: block; font-size: var(--fs-note); font-weight: 700; letter-spacing: .14em; color: var(--brand); }

/* Aboutページ */
.about-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.about-layout .about-photo img { border-radius: var(--r-md); }
.about-panel p { margin-top: var(--s-4); max-width: 34em; }
.about-panel .about-name { margin-block: var(--s-2) var(--s-4); }
.skill-cloud { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.skill-cloud span { padding: var(--s-2) var(--s-3); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); font-size: var(--fs-note); font-weight: 700; color: var(--ink); }

.principles { border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.principle { padding: var(--s-6) var(--s-6) var(--s-6) 0; border-top: 1px solid var(--rule); }
.principles > :not(:first-child) { border-left: 1px solid var(--rule); padding-left: var(--s-6); }
.principle strong { font-size: var(--fs-note); font-weight: 700; line-height: var(--lh-tight); letter-spacing: .14em; color: var(--brand); }
.principle h2 { margin-top: var(--s-3); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.principle p { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); }

/* Contactページ — メールでの相談 */
/* 相談ページ：フォームを主導線にし、代替手段は右側に従として置く（非対称2カラム）。
   等幅で並べると「どちらでもいい」に見えるため 1.5fr : 1fr で差をつける。 */
.contact-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-8); align-items: start; }
.contact-form-block { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.contact-form-block h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.contact-form-lead { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); max-width: 34em; }
.contact-alt { display: grid; gap: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.contact-alt-item h3 { margin-top: var(--s-3); font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--ink); }
.contact-alt-item p { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.contact-alt-item .button { margin-top: var(--s-4); }
.contact-option-tag { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .14em; color: var(--brand); }
.contact-done { padding: var(--s-6) 0; border-top: 1px solid var(--rule-strong); }
.contact-done:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.contact-done-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.contact-done p + p { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.copy-row { margin-top: var(--s-4); display: inline-flex; align-items: center; gap: var(--s-3); }
.copy-row-value { font-size: var(--fs-base); font-weight: 700; color: var(--brand); }
.copy-button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: var(--s-2) var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background-color: transparent; color: var(--ink); font: 700 var(--fs-note)/1 var(--font-body);
  cursor: pointer;
}
.copy-button:hover { border-color: var(--ink); background-color: rgba(24, 33, 62, .06); }
.copy-button.is-copied { border-color: var(--brand); color: var(--brand); }
.copy-button.is-copy-error { border-color: var(--ink); color: var(--ink); }
.copy-status { min-height: var(--s-5); margin-top: var(--s-2); font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }

/* 相談方法の選択。等幅カードではなく、既存の罫線リストと同じ構造にする。 */
.contact-dialog {
  width: min(780px, calc(100vw - 48px)); max-height: calc(100svh - 48px);
  margin: auto; padding: 0; overflow: auto;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  background-color: var(--surface); color: var(--body);
  box-shadow: var(--shadow-lg);   /* モーダルは §6 が影を許す対象。値も §6 の lg そのまま */
}
.contact-dialog::backdrop {
  background-color: rgba(24, 33, 62, .45); backdrop-filter: blur(4px);
  opacity: 1; transition: opacity .18s ease;
}
.contact-dialog-panel {
  position: relative; padding: var(--s-7);
  opacity: 1; transform: none;
  transition: opacity .2s ease, transform .2s var(--ease);
}
.contact-dialog-panel h2 { margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--ink); }
.contact-dialog-lead { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); }
.contact-dialog-close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background-color: transparent; color: var(--ink);
  font: 500 var(--fs-lead)/1 var(--font-body); cursor: pointer;
}
.contact-dialog-close:hover { background-color: rgba(24, 33, 62, .06); }
.contact-choice-list { margin-top: var(--s-6); border-bottom: 1px solid var(--rule); }
.contact-choice {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: var(--s-5); align-items: start; padding-block: var(--s-6);
  border-top: 1px solid var(--rule);
}
.contact-choice-tag { padding-top: var(--s-1); font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .14em; color: var(--brand); }
.contact-choice-body h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--ink); }
.contact-choice-body > p { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); }
.contact-choice-action { align-self: start; white-space: nowrap; }

/* Contactページ — 入力内容をメールへ反映するフォーム */
/* アンカー着地が固定ヘッダーに隠れないようにする */
[id]:target, .detail-block[id], .mini-card[id], section[id] { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.contact-form { display: grid; gap: var(--s-5); max-width: 34em; margin-top: var(--s-6); }
/* display 指定はUA既定の [hidden]{display:none} に勝つため、明示的に打ち消す。
   これが無いと送信後にフォームが消えず、完了表示と二重に出る。 */
.contact-form[hidden], .contact-done[hidden] { display: none; }
.form-field { display: grid; gap: var(--s-2); font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; color: var(--ink); }
.form-field small { font-size: var(--fs-note); font-weight: 500; color: var(--meta); }
.form-field input, .form-field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background-color: var(--surface); color: var(--ink);
  font: 400 var(--fs-base)/1.8 var(--font-body);
}
.form-field textarea { resize: vertical; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form-note, .form-status { font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }
.form-status { min-height: var(--s-5); }

/* CTA帯（下位ページ） */
.cta-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6);
  padding: var(--s-8) var(--s-7); border-radius: var(--r-md);
  background-color: var(--solid);
}
.cta-panel h2 { max-width: 24em; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--on-dark); }
.cta-panel .button-brand { background-color: var(--brand-fill); color: var(--on-dark); }
.cta-panel .button-brand:hover { background-color: var(--surface); color: var(--ink); }
.cta-panel .button-light { border-color: rgba(255, 255, 255, .55); color: var(--on-dark); }
.cta-panel .button-light:hover { border-color: var(--on-dark); background-color: rgba(255, 255, 255, .12); color: var(--on-dark); }
/* 濃紺面の上では補足色（--meta）が 2.76:1 まで落ちる。面の上の文字色を明示する。 */
.cta-panel p, .cta-panel .note { color: #C7CBDA; }   /* 9.79:1 / --solid */

/* --- ピン留めシーン（スクロールしても進まず、演出が一定期間続く） --------- */
/* JSが動く広い画面でだけ有効。JS無効・reduced-motion・狭い画面では
   ただの縦並びに戻り、内容は常に読める。 */
.pin-scene { position: relative; }
.pin-progress { margin-top: var(--s-6); height: 2px; background-color: var(--rule); }
.pin-progress > span {
  display: block; width: 100%; height: 100%; background-color: var(--brand);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

@media (min-width: 1025px) {
  .js .pin-scene[data-pin] { height: 210vh; }
  .js .pin-scene[data-pin] .pin-stage { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .js .pin-scene[data-pin] .solution-step {
    opacity: 0; transform: translateY(20px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .js .pin-scene[data-pin] .solution-step.is-in { opacity: 1; transform: none; }
}

/* --- 演出（JSが動くときだけ。無効なら常に表示） ----------------------------- */
.js .reveal {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal-heading { transform: translateX(calc(var(--s-4) * -1)); }
.js .reveal-body { transform: translateY(var(--s-4)); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ===========================================================================
   1024px 以下
   =========================================================================== */
@media (max-width: 1024px) {
  .hero-grid, .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-aside { display: none; }
  .doc-body, .detail-content { padding-left: 0; padding-block: var(--sec); }
  .step { grid-template-columns: 88px minmax(0, 1fr); }
  .service { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .case { grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-3) var(--s-5); }
  .case-result { grid-column: 2; text-align: left; }
  .works-intro, .about-layout, .case-card { grid-template-columns: minmax(0, 1fr); }
  .chip-bar { display: flex; }

  .nav-shell { gap: var(--s-3); }
  .menu-toggle { display: flex; }
  .nav-cta { padding-inline: var(--s-4); }

  /* 5b: 全画面のメニュー */
  .site-nav {
    position: fixed; inset: 0; z-index: 50;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: calc(var(--header-h) + var(--s-7)) var(--s-4) var(--s-7);
    background-color: var(--surface);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s;
    overflow-y: auto;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; }
  .site-nav > a {
    display: flex; gap: var(--s-4); align-items: baseline;
    padding-block: var(--s-5); border-top: 1px solid var(--rule);
    font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading);
  }
  .site-nav > a:last-of-type { border-bottom: 1px solid var(--rule); }
  .site-nav .nav-foot { display: block; margin-top: auto; padding-top: var(--s-6); }
  .site-nav .nav-foot .button { width: 100%; }
}

/* ===========================================================================
   768px 以下 — 案5a / 5b
   =========================================================================== */
@media (max-width: 768px) {
  :root { --container: min(1200px, 100vw - 32px); --header-h: 56px; }

  .nav-shell { gap: var(--s-2); }
  .brand img, .personal-brand img { width: min(120px, 30vw); height: auto; }
  .nav-cta { padding-inline: var(--s-3); white-space: nowrap; }
  .menu-toggle { flex-shrink: 0; }

  body { padding-bottom: 0; }

  .hero { padding-block: var(--sec-tight); }
  .hero-copy h1 { margin-top: var(--s-5); }
  .hero-rule { width: 120px; }
  .hero-copy .actions { flex-direction: column; }
  .hero-copy .actions .button { width: 100%; }

  .block-head { gap: var(--s-3); }
  .principles, .mini-grid, .service-index-grid { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .principle, .mini-card,
  .service-index-card { padding: var(--s-5) 0; }
  .principles > :not(:first-child),
  .mini-grid > :nth-child(even), .service-index-grid > :nth-child(3) {
    border-left: 0; padding-left: 0;
  }
  .service-index-grid > :first-child { grid-column: auto; }
  .service-index-grid > :nth-last-child(-n+2) { border-bottom: 0; }
  .service-index-grid > :last-child { border-bottom: 1px solid var(--rule); }
  .card-arrow { top: var(--s-5); }

    .contact-dialog { width: calc(100vw - 32px); max-height: calc(100svh - 32px); }
  .contact-dialog-panel { padding: var(--s-5); }
  .contact-choice { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-5); }
  .contact-choice-action { justify-self: start; }
  .copy-row { display: flex; flex-wrap: wrap; }

  .case { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .case-result { grid-column: auto; }
  .spec .row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }

  .cta-panel { flex-direction: column; align-items: flex-start; }
  .hero-actions, .contact .actions { flex-direction: column; width: 100%; }
  .hero-actions .button, .contact .actions .button { width: 100%; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-5); }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer { padding-bottom: var(--s-8); }

  /* 行内リンクのタップ領域（375px 実測で 17px しかなかった） */
  .issue-map a, .service-more {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* モバイル相談導線：本文を覆わず、フッター後に置く */
  .mobile-bar {
    display: flex; gap: var(--s-3); align-items: center;
    margin: var(--s-4); position: static;
    padding: var(--s-3); border-radius: var(--r-md);
    background-color: rgba(24, 33, 62, .94); backdrop-filter: blur(10px);
  }
  .mobile-bar .button-solid { flex: 1 1 auto; background-color: var(--on-dark); color: var(--ink); min-height: 48px; }
  .mobile-bar .button-solid:hover { background-color: var(--on-dark); color: var(--ink); }
  .mobile-bar .to-top {
    width: 48px; height: 48px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-sm);
    color: var(--on-dark); font-size: var(--fs-note); font-weight: 700;
  }
  .mobile-bar .to-top:hover { color: var(--on-dark); border-color: var(--on-dark); }
}

/* ===========================================================================
   2026-08-25 ブラッシュアップ分
   情報の順序を「信用 → 人物 → サービス → 課題 → 事例 → 進め方」へ組み替え、
   モーションを追加した。3D/WebGL は使わない。
   モーションは全て「情報を伝える役割」を持たせている（装飾のためには足さない）。
   =========================================================================== */

/* --- ヒーロー右：どんな会社向けかを先に示す ------------------------------- */
.hero-side { border-top: 1px solid var(--rule); padding-top: var(--s-5); }
.hero-side-label { font-size: var(--fs-note); font-weight: 700; letter-spacing: .06em; color: var(--meta); }
.hero-side-list { margin-top: var(--s-4); }
.hero-side-list li {
  padding-block: var(--s-2);
  font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; color: var(--ink);
}


/* --- 信用の帯：数字を最初に見せる --------------------------------------- */
/* 等幅4カラムのKPIカードにしない（_core.md §8）。幅を不均等にし、
   研修の受講者数だけを大きくして主従をつける。 */
/* ページ内でブランド色を「面」として使うのはここと最後のCTAの2箇所だけ。
   セクションごとに背景色を変えると _core.md §8 の禁止形になる。 */
.proof { padding-block: var(--sec); background-color: var(--tint); }
/* 数値帯。罫線で4分割すると表組みに見える。数字そのものが十分に強いので余白で分ける。 */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; column-gap: var(--s-6); }
.proof-item { padding-block: var(--s-5); }

.proof-item dt { font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; color: var(--meta); }
.proof-item dd { margin-top: var(--s-3); display: flex; align-items: baseline; gap: var(--s-2); }
/* Apple から借用: 見出しだけでなく数字にも負トラッキングを効かせる（欧文・数字のみ。
   和文には効かせない = brand.md 混植ルール） */
.proof-item .num {
  /* font-weight を書き忘れており、本文の400を継承して細く出ていた（2026-09-17 修正）。
     サイト内の display 書体の見出しはすべて 700。数値もそれに揃える。 */
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-num); line-height: var(--lh-display);
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.proof-item-lead .num { font-size: var(--fs-num-lead); color: var(--brand); }
.proof-item .unit { font-size: var(--fs-lead); font-weight: 700; color: var(--body); }

/* 本文の行長を 34em（和文で約34字）に抑える。_core.md §3。
   1440px では行が最大86emまで伸びており、読み返しで行を見失う状態だった。 */
.note,
.row-text,
.service-meta,
.faq-list summary,
.faq-list details p,
.case-flow > div,
.timeline-item p,
.history p:last-child,
.process-track p,
.solution-step .row-text,
.flow-step .row-text,
.service-index-card p,
.spec .row dd,
.spec .row p:last-child,
.legal-block > p,
.section-head > div > p,
.block-head h2 + p { max-width: 34em; }

/* --- 業種のマーキー：広さを数字でなく流れで見せる ------------------------ */
.marquee {
  margin-top: var(--s-6); overflow: hidden;
  /* 端で文字が途中から切れると崩れて見える。両端をフェードさせて逃がす。 */
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-6), #000 calc(100% - var(--s-6)), transparent 100%);
}
.marquee-track { display: flex; width: max-content; }
.marquee-set { display: flex; gap: var(--s-6); padding-right: var(--s-6); }
.marquee-set span { font-size: var(--fs-meta); font-weight: 700; line-height: 1.5; color: var(--meta); white-space: nowrap; }
/* KPIのカウントアップと同一ビューポートで二重に動かないよう、
   既定は停止。JSが「見えてから少し待って」から動かす。 */
.js .marquee-track { animation: marquee-scroll 38s linear infinite; animation-play-state: paused; }
.js .marquee.is-running .marquee-track { animation-play-state: running; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: none; } to { transform: translateX(-50%); } }

/* --- 01 About：写真を固定したまま強みを流す（Pinning） -------------------- */
/* 「誰か」を画面に置いたまま「何ができるか」を読ませ、人物と能力を結び付ける。 */
/* 強み。4件を縦に罫線で刻むと、上の支援の流れ・下の進め方と同じ骨格になる。
   2×2 にして罫線を外し、タグの色と余白だけで分ける。 */
.strength-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.strength-list .strength { padding: var(--s-5); border-radius: var(--r-md); background-color: var(--surface); border: 1px solid var(--line); }
.strength-list .strength h3 { margin-top: var(--s-3); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.strength-list .strength > p:last-child { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); max-width: 34em; }
.block-more { margin-top: var(--s-5); }

/* --- 02 サービス：AI研修を主役にする ------------------------------------- */
.service-lead {
  position: relative; color: var(--ink);
  padding: var(--s-7) var(--s-7) var(--s-7) 0;
  /* 下罫は置かない。直後の行リストが持つ上罫と24px間隔で並び、二重線に見えるため。 */
  border-top: 1px solid var(--rule);
  transition: background-color var(--dur-micro) var(--ease);
}
.service-lead h3 {
  margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: 700; line-height: var(--lh-heading); color: var(--ink);
}
.service-lead-text { margin-top: var(--s-4); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); max-width: 34em; }
.service-lead-meta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.service-lead-meta span {
  padding: var(--s-2) var(--s-3); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  font-size: var(--fs-note); font-weight: 700; line-height: 1.5; color: var(--ink);
}
.service-lead-cta {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-4);
  font-size: var(--fs-meta); font-weight: 700; color: var(--brand);
}
.service-bridge { margin-top: var(--s-6); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--meta); max-width: 34em; }
.service-bridge + .block-body { margin-top: var(--s-4); }

/* --- ヒーロー右：対象企業と課題 ------------------------------------------- */
.hero-aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-8); padding-top: var(--s-7); }
.hero-aside .hero-side { width: 100%; }

/* --- 主役サービスに登壇写真を添える ------------------------------------- */
.service-lead { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7); align-items: start; }
.service-lead-media { margin: 0; }
.service-lead-media img { width: 100%; height: auto; border-radius: var(--r-md); }
.service-lead-media figcaption { margin-top: var(--s-3); font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }

/* --- ページ遷移のワイプ --------------------------------------------------- */
/* --- マイクロインタラクション -------------------------------------------- */
.service, .case, .strength { transition: background-color var(--dur-micro) ease; }
.service-more, .service-lead-cta, .issue-map a { transition: color var(--dur-micro) ease; }

/* ACLabの罫線をそのまま操作フィードバックに使う。面全体は拡大しない。 */
.service-lead, .service-index-card, .case-card, .case-story { position: relative; overflow: clip; }
.service-lead::before, .service-index-card::before, .case-card::before, .case-story::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background-color: var(--brand); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease);
}
.service-lead-body, .service-index-card h2, .service-index-card .card-arrow,
.case-card h2, .case-story h3, .service-lead-cta {
  transition: transform var(--dur-micro) var(--ease), color var(--dur-micro) ease;
}

@media (hover: hover) and (pointer: fine) {
  .button, .nav-cta { transition: transform var(--dur-micro) var(--ease), background-color var(--dur-micro) ease, color var(--dur-micro) ease, border-color var(--dur-micro) ease; }
  .button:hover, .nav-cta:hover { transform: translateY(calc(var(--s-1) * -1)); }
  .button:active, .nav-cta:active { transform: scale(.97); transition-duration: .16s, var(--dur-micro), var(--dur-micro), var(--dur-micro); }
  .service:hover, .case:hover { background-color: rgba(255, 255, 255, .22); }
  .service-lead:hover { background-color: rgba(255, 255, 255, .28); }
  .service-lead:hover h3 { color: var(--brand); }
  .service-lead:hover::before, .service-index-card:hover::before, .case-card:hover::before, .case-story:hover::before,
  .service-lead:focus-visible::before, .service-index-card:focus-visible::before { transform: scaleX(1); }
  .service-lead:hover .service-lead-body, .service-index-card:hover h2, .case-card:hover h2, .case-story:hover h3 { transform: translateX(var(--s-2)); }
  .service-lead:hover .service-lead-cta, .service-index-card:hover .card-arrow { transform: translateX(var(--s-1)); }
}

/* --- カウントアップ中の数字が詰まって見えないようにする ------------------ */
/* カウントアップ中に幅が動かないよう桁数ぶんだけ予約する（tabular-nums 前提） */
.num { display: inline-block; min-width: 2ch; }
.proof-item:nth-child(3) .num { min-width: 3ch; }
.proof-item-lead .num { min-width: 3ch; }

/* ===========================================================================
   1024px 以下（ブラッシュアップ分）
   =========================================================================== */
@media (max-width: 1024px) {
  .hero-aside { align-items: flex-start; gap: var(--s-6); padding-top: 0; }
  .service-lead { grid-template-columns: minmax(0, 1fr); }
  .service-lead-media img { max-width: 480px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .proof-item:nth-child(3), .proof-item:nth-child(4) { border-top: 1px solid var(--rule); }
}

/* ===========================================================================
   768px 以下（ブラッシュアップ分）
   =========================================================================== */
@media (max-width: 768px) {
  .hero-side { margin-top: 0; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .proof-item, .proof-item + .proof-item { border-left: 0; padding: var(--s-4) 0; }
  .service-lead { padding-right: 0; padding-block: var(--s-6); }
  .service-lead-media img { max-width: 100%; }
  .service-lead-meta { gap: var(--s-2); }
}

/* ===========================================================================
   演出を止める指定。ここに追加した動きも全て止める
   =========================================================================== */
@media print {
  .site-header, .mobile-bar, .chip-bar, .skip-link { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
}

/* ===========================================================================
   2026-08-28 企業向けサービスサイト化
   Appleから借りる極端値: 読み幅980px / カード枠0 / 影は浮くUIの1種類だけ。
   ACLab固有の紫〜ミントの地と、罫線による編集的な行組みは維持する。
   =========================================================================== */

.hero {
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: var(--s-8);
}
/* 右カラム（ロゴ→人物写真）を廃し、見出しとCTAだけの構成にした。
   背景のリボンは右側にマスクされているので、右の余白がそのまま図版になる。 */
.hero-grid { grid-template-columns: minmax(0, .62fr); align-items: center; }
.hero-copy .lead { max-width: 34em; }
/* ヒーロー右カラム。ロゴの二重掲示をやめ、「誰が担当するのか」を最初の画面で示す。
   写真は枠も影も付けず、地のグラデーションに直接置く（_core.md §6）。 */
.hero-person { width: min(100%, 280px); margin-left: auto; }
.hero-person img {
  width: 100%; aspect-ratio: 4 / 5; height: auto;
  object-fit: cover; object-position: center 42%;
  border-radius: var(--r-md);
}
.hero-person figcaption { margin-top: var(--s-4); }
.hero-person-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.hero-person-role { margin-top: var(--s-1); font-size: var(--fs-note); font-weight: 500; line-height: 1.5; color: var(--meta); }
.hero-person-note { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); max-width: 22em; }

.container.doc { width: var(--container); }
.block-head > div > p:last-child:not(.eyebrow) { margin-top: var(--s-3); max-width: 34em; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--meta); }

/* 支援の流れ。4段階の「順に進む」性質は横に並べたほうが伝わる。
   縦リストにすると、下の進め方（STEP 1-5）と同じ形が1ページに2度出る。 */
.solution-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-7); border-top: 1px solid var(--rule); }
.solution-step { padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.solution-step + .solution-step { border-left: 1px solid var(--rule); padding-left: var(--s-5); }
.solution-step .row-num { font-size: var(--fs-note); letter-spacing: .14em; }
.solution-step .row-title { margin-top: var(--s-3); }
.solution-step .row-text { margin-top: var(--s-3); }

/* 進め方。横罫の行ではなく、1本の縦線と点で「順番」を示す。 */
.flow-list { position: relative; margin-top: var(--s-7); padding-left: var(--s-6); }
.flow-list::before { content: ""; position: absolute; left: 3px; top: var(--s-5); bottom: var(--s-5); width: 1px; background-color: var(--rule); }
.flow-step { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-5); }
.flow-step::before { content: ""; position: absolute; left: calc(var(--s-6) * -1); top: calc(var(--s-5) + .55em); width: 7px; height: 7px; border-radius: 999px; background-color: var(--brand); }
.flow-step .row-num { letter-spacing: .14em; }
.flow-step .row-text { margin-top: var(--s-2); }
.solution-step::marker, .flow-step::marker { content: ""; }
.solution-flow, .flow-list { list-style: none; }
.other-service { margin-top: var(--s-5); max-width: 34em; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--meta); }
.other-service a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--brand); }

/* 3件を横に並べて Before→After を見比べさせる。
   以前は1件だけ縦2行ぶち抜き（左1・右2）で、重心が左に偏っていた。 */
.case-studies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.case-story { padding: var(--s-6) var(--s-5) var(--s-6) 0; border-top: 1px solid var(--rule); }
.case-story + .case-story { border-left: 1px solid var(--rule); padding-left: var(--s-5); }

.case-story h3 { margin-top: var(--s-3); font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--ink); }
.case-story dl { margin-top: var(--s-5); }
.case-story dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--rule); }
.case-story dt { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; color: var(--meta); }
.case-story dd { font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.case-story dl > div:first-child dd, .case-story dl > div:last-child dd { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.case-story dl > div:last-child dd { color: var(--brand); }

.profile-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.profile-layout .about-photo { margin: 0; }
.profile-copy { margin-top: var(--s-5); max-width: 34em; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); }
.profile-layout .spec { margin-top: var(--s-6); }

/* 規約・ポリシーは読み物として組む。カードもグリッドも使わず、1カラムで縦に読ませる。 */
.legal { max-width: 46em; display: flex; flex-direction: column; gap: var(--s-8); }
.legal-block h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.legal-block > p { margin-top: var(--s-4); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.legal-list { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.legal-list li { position: relative; padding-left: var(--s-5); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.legal-list li::before { content: ""; position: absolute; left: var(--s-2); top: .8em; width: 6px; height: 1px; background-color: var(--brand); }
.legal-dl { margin-top: var(--s-4); }
.legal-dl > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-4); border-top: 1px solid var(--rule); }
.legal-dl > div:last-child { border-bottom: 1px solid var(--rule); }
.legal-dl dt { font-size: var(--fs-meta); font-weight: 700; line-height: var(--lh-body); color: var(--ink); }
.legal-dl dd { font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }
.legal-mail { font-weight: 700; color: var(--brand); }

/* 経歴は年表。左に年、右に内容。縦罫で時間の連なりを示す（timeline / number-list とは別形）。 */
.history { margin-top: var(--s-7); }
.history li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-6); border-top: 1px solid var(--rule); }
.history li:last-child { border-bottom: 1px solid var(--rule); }
.history-when { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--brand); font-variant-numeric: tabular-nums; }
.history h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.service-footnote { margin-top: var(--s-5); max-width: 34em; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--meta); }
.cta-sub { margin-top: var(--s-4); }
/* /en/ だけ。欧文本文は 60〜75字（_core.md §3）。34em は和文の値。 */
.en-page .hero-copy .lead { max-width: 42em; }
@media (min-width: 769px) {
  /* 1番目の原則が提供の核。残り2つはその限定。等幅3カラムは _core.md §8 の禁止形。
     768px 以下の1カラム化（詳細度0,1,0）を破らないよう min-width で囲う。 */
  .en-page .principles { grid-template-columns: 1.6fr 1fr 1fr; }
}
.history p:last-child { margin-top: var(--s-3); font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); max-width: 34em; }

.faq-list { border-bottom: 1px solid var(--rule); }
.faq-list details { border-top: 1px solid var(--rule); transition: border-color var(--dur-micro) ease; }
.faq-list summary {
  position: relative; display: flex; align-items: center; min-height: 64px;
  padding: var(--s-4) var(--s-7) var(--s-4) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--ink);
  transition: color var(--dur-micro) ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 0; font-size: var(--fs-h3); font-weight: 400; line-height: 1; color: var(--brand);
  transition: transform var(--dur-micro) var(--ease), color var(--dur-micro) ease;
}
.faq-list details[open] { border-top-color: var(--rule-strong); }
.faq-list details[open] summary { color: var(--brand); }
.faq-list details[open] summary::after { transform: rotate(45deg); color: var(--focus); }
.faq-list details p { padding: 0 var(--s-7) var(--s-5) 0; max-width: 34em; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--body); }

@starting-style {
  .contact-dialog[open] .contact-dialog-panel { opacity: 0; transform: translateY(var(--s-3)); }
  .contact-dialog[open]::backdrop { opacity: 0; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-6); }
  .issue-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .solution-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-step:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 768px) {
  .hero { min-height: auto; padding-block: var(--s-7); }
  .hero-grid { gap: var(--s-5); }
  /* モバイルは「見出し→写真」の順。値を示す前に顔を出さない
     （従来は order:-1 で巨大ロゴを先頭に出し、1画面目を潰していた）。 */
  .hero-aside { order: 0; gap: 0; }
  .hero-person { width: 100%; margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
  .hero-person img { aspect-ratio: 1 / 1; }
  .hero-person figcaption { margin-top: 0; }
  .hero-person-note { display: none; }
  .hero-aside .hero-side { display: none; }
  .hero-copy h1 { margin-top: var(--s-4); }
  .hero-copy .lead { margin-top: var(--s-4); }
  .hero-copy .actions { margin-top: var(--s-5); }

  .solution-step, .flow-step { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .case-studies { grid-template-columns: minmax(0, 1fr); }
  .case-story { padding: var(--s-6) 0; }
  .case-story + .case-story { border-left: 0; padding-left: 0; }
  .case-story dl > div { grid-template-columns: 72px minmax(0, 1fr); }
  .profile-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .profile-layout .about-photo { max-width: 240px; }
  .faq-list summary { min-height: 64px; padding-right: var(--s-6); }
  .faq-list details p { padding-right: 0; }

  /* 2026-09-15 追加分のモバイル対応。
     2カラムのまま375pxへ持ち込むと、メールアドレスのような分割できない文字列が
     はみ出して横スクロールが発生する（/privacy/ で実際に発生した）。 */
  .contact-main { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .process-track { grid-template-columns: minmax(0, 1fr); }
  .process-track > * { padding: var(--s-5) 0; }
  .process-track > * + * { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .timeline-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .history li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .legal-dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .legal-mail { overflow-wrap: anywhere; }
  .issue { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-3); }
  .proof-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
  .solution-flow { grid-template-columns: minmax(0, 1fr); }
  .solution-step { padding: var(--s-5) 0; }
  .solution-step + .solution-step { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .strength-list { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .flow-step { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}

/* ===========================================================================
   2026-09-16 ヒーローの曲線を戻し、視認性を「背景以外」で上げる
   主軸: Stripe。借りた極端値3つ
     (1) 角丸を 4〜8px に抑え、pill 形状を使わない（--r-md 12px → 8px）
     (2) 枠線を中立グレーでなく紫寄りにする（Stripe #e5edf5 の考え方）。
         罫線に色を持たせ、面の分離を影ではなく枠線に担わせる
     (3) 状態を枠線の色で示す（Stripe #b9b9f9 = active border）。ホバーで枠を brand へ
   当初は Stripe のブランド着色シャドウも借りたが、_core.md §6「影は浮いているものだけ・
   2段まで・3つ以上並べない」に正面から反するため撤回した。カード10枚に影を付けていた。
   Apple から借りた「読み幅980px / カード枠0」は維持する。
   地は --paper 単色のまま。ここで足すのは背景以外の装飾に限る。
   =========================================================================== */

/* --- ヒーローの曲線 -------------------------------------------------------
   .hero-grid は .62fr の1カラムで、右の余白がそのまま図版になる構成。
   素材は透過 WebP（全1,067,200画素のうち不透明は158,768画素＝15%）なので、
   地を塗ったり乗算で白を抜いたりする必要はない。そのまま重ねる。
   色相は brand #5B4BD6 の 246.9度 1色に揃えてある（brand.md「色相をまたがない」）。
   WebGL版（three.js 470KB）は戻さない。静止画1枚（80KB）で足りる。 */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-art img {
  position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  width: auto; max-width: none; height: 106%;
  -webkit-mask-image: linear-gradient(90deg, transparent 16%, #000 56%);
          mask-image: linear-gradient(90deg, transparent 16%, #000 56%);
}

/* --- 高度: 沈んでいた面を地から持ち上げる ---------------------------------
   白い面(--surface #FFFFFF)を地(--paper #F7F8FB)に置くと輝度差は 1.03:1 しかなく、
   枠線1本（旧 #D9DCE6 = 地に対して 1.29:1）では面の輪郭が読めなかった。
   背景色を変えずに輪郭を出す手段として影を使う。_core.md §8「全要素に影」を
   避けるため、影は「面として並ぶもの」と「押す対象」だけに限る。 */
/* 面の輪郭は罫線で出す。カードの枠はその面を示す唯一の手がかりなので、
   装飾罫（--line）ではなく 3:1 を満たす --rule-strong を使う（_core.md §9-4）。
   実測: #7E8599 は paper に対して 3.47:1、surface に対して 3.68:1。 */
.issue, .strength-list .strength { border-color: var(--rule-strong); }

/* --- セクションの入口に印を置く -------------------------------------------
   地の色でセクションを分けるのをやめたぶん、「ここから別の話」を示す手がかりが
   余白しかなくなった。ラベルの前に短いブランド罫を1本だけ置く（全6か所）。 */
/* 印を付ける対象は「ページの中で新しいブロックが始まる見出し」だけに限る。
   ページ見出しの肩ラベル（.page-hero-grid）・事例カードの業種ラベル（.case-card）・
   目次（.detail-aside）・ダイアログの見出しには付けない。付ける対象が増えるほど
   印が意味を失い、_core.md §8 の「アイコン付きの箇条書きを並べる」に近づくため。 */
.section-head .eyebrow,
.block-head .eyebrow,
.detail-block > .eyebrow { display: flex; align-items: center; gap: var(--s-3); }
.section-head .eyebrow::before,
.block-head .eyebrow::before,
.detail-block > .eyebrow::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 2px; background-color: var(--brand-fill);
}

/* --- 数値を読み取りやすくする ---------------------------------------------
   実績の数字はプロポーショナルだと桁の位置が揃わない。数値だけ等幅にする。 */
.proof-item .num, .case-story dl dd, .case-before, .case-after { font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  /* 1カラムでは本文が全幅に来るので、曲線を下部へ逃がして文字に重ねない。 */
  .hero-art img {
    top: auto; bottom: 0; left: 50%; transform: translateX(-50%);
    /* 1カラムでは本文が曲線に重なる。実測で 4.5:1 を満たす濃さまで落としてある
       （この値は 2026-09-17 に削除した .hero-note が opacity .85 で 4.47:1 だったため
       下げたもの。現在の最下段はボタンなので余裕はあるが、濃くする理由もないため据え置く）。 */
    height: 40%; opacity: .45;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 62%);
            mask-image: linear-gradient(180deg, transparent, #000 62%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-title .line > span,
  .js .reveal,
  .js .pin-scene[data-pin] .solution-step { opacity: 1; transform: none; transition: none; }
  .contact-dialog[open] .contact-dialog-panel { animation: none; }
  .js .marquee-track { animation: none; }
  .js .pin-scene[data-pin] { height: auto; }
  .js .pin-scene[data-pin] .pin-stage { position: static; }
  .pin-progress { display: none; }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after,
  .service-lead::before, .service-index-card::before, .case-card::before, .case-story::before { transition: none; }
  .button, .nav-cta,
  .service-lead::before, .service-index-card::before, .case-card::before, .case-story::before,
  .service-lead-body, .service-index-card h2, .service-index-card .card-arrow,
  .case-card h2, .case-story h3, .service-lead-cta,
  .faq-list summary::after { transform: none !important; }
  .contact-dialog-panel, .contact-dialog::backdrop { transition: none; }
  .issue, .strength-list .strength { transition: none; }
  .issue:hover, .strength-list .strength:hover { transform: none; }
}

/* ===========================================================================
   2026-09-23 トップページ刷新「今日の事業から、明日の可能性へ」
   方向性画像（PC/Mobile）に準拠。Stripe を主軸に3つの数値を借りる:
     1) 浮く要素の影は青みを混ぜ、負のspreadで縦にだけ落とす
        rgba(50,50,93,.25) 0 30px 45px -30px / rgba(0,0,0,.1) 0 18px 36px -18px
     2) 角丸は 6/8px に抑え、pill を使わない
     3) 装飾のグラデーションはヒーロー1箇所に限る
   色: brand(紫) → 補助の青 → 未来を示す青緑 の順に「今日→明日」を表す。
   青緑は手順バッジ(03/04)と装飾面だけに使い、本文・リンクには使わない。
   =========================================================================== */
:root {
  --step-1: #5B4BD6;  /* 白文字 6.14:1 */
  --step-2: #245F92;  /* accent-blue。白文字 6.72:1 */
  --step-3: #0B7285;  /* 白文字 5.59:1 */
  --step-4: #0D7A5F;  /* 白文字 5.29:1 */
  --shadow-float: 0 30px 45px -30px rgba(50, 50, 93, .25), 0 18px 36px -18px rgba(0, 0, 0, .1);
  --fs-home-hero: 50px;  /* step 5 */
  --font-hand: "Klee One", "Zen Kurenaido", cursive;
  /* 手書き装飾(.home-hand)1箇所だけ Klee One 600 を使う。Klee One は 400/600 のみで、
     400 だと線が細く弱く見えるため（2026-09-23 オーナー指摘）。_core.md §4 のウェイト規定の例外 */
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ヘッダーCTAを紫の塗りに（方向性画像）。白文字 6.14:1 */
.nav-cta { background-color: var(--brand-fill); }
.nav-cta:hover { background-color: var(--brand-strong); }

/* --- ヒーロー -------------------------------------------------------------- */
.home-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: var(--s-8);
  background-color: var(--paper);
  background-image: linear-gradient(115deg, #F1EEFF 0%, #EEF0FE 38%, #EAF4FB 70%, #EAF7F2 100%);
}
.home-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-6); align-items: center;
}
.home-eyebrow { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .16em; color: var(--brand); }
.home-hero-title {
  margin-top: var(--s-3);
  font-family: var(--font-display); font-size: var(--fs-home-hero); font-weight: 700;
  line-height: var(--lh-display); color: var(--ink); letter-spacing: 0;
}
.home-hero-lead { margin-top: var(--s-5); max-width: 34em; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--body); }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.home-hero-actions .button { gap: var(--s-3); min-height: 52px; }
.home-hero-actions .button .i { width: 16px; height: 16px; stroke-width: 2; }
.home-cta { background-color: var(--brand-fill); color: var(--on-dark); }
.home-cta:hover { background-color: var(--brand-strong); color: var(--on-dark); }
.home-cta-sub { background-color: var(--surface); border-color: var(--brand); color: var(--brand); }
.home-cta-sub:hover { background-color: var(--tint); border-color: var(--brand-strong); color: var(--brand-strong); }

.home-hero-art { position: relative; min-height: 480px; }
.home-ribbon {
  position: absolute; top: 50%; left: -24%; width: 148%; aspect-ratio: 1400 / 760;  /* 上下のうねり分だけ縦に余白（リボン本体は中央68%） */
  transform: translateY(-50%); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 88%, transparent 100%);
}
/* 曲線を横に流す。形は継ぎ目なく繰り返すマスク画像、色は位置に固定したグラデーション。
   層を見える幅の2倍にし、マスクの繰り返し幅＝見える幅（層の50%）にする。mask-position を 0%→100% 送ると
   ちょうど1周期ずれて途切れない。色は左半分（見える範囲）にだけ敷き、位置を固定する。 */
.home-ribbon { overflow: hidden; }
.home-ribbon-flow {
  position: absolute; top: 16%; bottom: 16%; left: 0; width: 200%; opacity: .9;
  background-image: linear-gradient(90deg, #7B6CF0 0%, #8FA8F5 40%, #8CCFF0 70%, #8EE0CC 100%);
  background-size: 50% 100%; background-repeat: no-repeat;
  -webkit-mask-image: url("/assets/home/ribbon-flow.webp"); mask-image: url("/assets/home/ribbon-flow.webp");
  -webkit-mask-size: 50% 100%; mask-size: 50% 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: 0% 0; mask-position: 0% 0;
}
.home-ribbon-flow.f2 {
  -webkit-mask-image: url("/assets/home/ribbon-flow-2.webp"); mask-image: url("/assets/home/ribbon-flow-2.webp");
  opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  /* 横の流れ（mask-position）に、上下のうねり（transform）を重ねる。
     scaleY の伸び縮みでリボンがねじれて回っているように見せる。2本は周期をずらして交差させる。 */
  .home-ribbon-flow { transform-origin: 25% 50%; will-change: transform; }
  .home-ribbon-flow.f1 { animation: home-ribbon-flow 40s linear infinite, home-ribbon-wave-a 9s ease-in-out infinite alternate; }
  .home-ribbon-flow.f2 { animation: home-ribbon-flow 64s linear infinite reverse, home-ribbon-wave-b 12s ease-in-out -5s infinite alternate; }
}
@keyframes home-ribbon-wave-a {
  0%   { transform: translateY(-9%) scaleY(.78) rotate(-1.2deg); }
  50%  { transform: translateY(5%)  scaleY(1.12) rotate(.4deg); }
  100% { transform: translateY(9%)  scaleY(.86) rotate(1.2deg); }
}
@keyframes home-ribbon-wave-b {
  0%   { transform: translateY(6%)  scaleY(1.12) rotate(1.2deg); }
  50%  { transform: translateY(-4%) scaleY(.76) rotate(-.6deg); }
  100% { transform: translateY(-6%) scaleY(1.04) rotate(-1.2deg); }
}
@keyframes home-ribbon-flow {
  from { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  to   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
.home-tags { position: absolute; inset: 0; }
.home-tag {
  position: absolute; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background-color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .95); border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.home-tag b { display: block; font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--ink); }
.home-tag small { display: block; font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }
/* 絵柄のアイコンは置かない（絵文字に見えるため・2026-09-23 オーナー指摘）。
   左の細い縦線だけで種類を示す。未来側の「次の体験へ」だけ青緑。 */
.home-tag::before { content: ""; align-self: stretch; width: 3px; background-color: var(--brand-fill); }
.home-tag.is-future::before { background-color: var(--step-4); }
.home-tag.t1 { top: 2%;  left: 6%; }
.home-tag.t2 { top: 10%; right: 0; }
.home-tag.t3 { top: 36%; left: 22%; }
.home-tag.t4 { top: 44%; right: 2%; }
.home-tag.t5 { top: 70%; left: 0; }
.home-tag.t6 { top: 62%; left: 44%; }
.home-hand {
  position: absolute; right: 2%; bottom: 0;
  font-family: var(--font-hand); font-size: var(--fs-lead); font-weight: 600; line-height: 1.5;
  color: var(--brand); transform: rotate(-6deg); transform-origin: right bottom;
}
.home-skyline {
  height: 160px; margin-top: calc(var(--s-7) * -1);
  background-image: url("/assets/home/skyline.webp"), linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface));
  background-repeat: repeat-x, no-repeat; background-position: center bottom, center bottom;
  background-size: auto 160px, 100% 100%;
  position: relative; z-index: -1; opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
  .home-tag { animation: home-float 7s var(--ease) infinite alternate; }
  .home-tag.t2, .home-tag.t5 { animation-delay: -2.4s; }
  .home-tag.t3, .home-tag.t6 { animation-delay: -4.6s; }
}
@keyframes home-float { from { transform: translateY(0); } to { transform: translateY(calc(var(--s-2) * -1)); } }

/* --- 実績の数字 ------------------------------------------------------------ */
.home-proof { background-color: var(--surface); border-bottom: 1px solid var(--rule); }
.home-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-proof-item { padding: var(--s-6) var(--s-5); }
.home-proof-item + .home-proof-item { border-left: 1px solid var(--rule); }
.home-proof-item:first-child { padding-left: 0; }
.home-proof-num { font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--brand); font-variant-numeric: tabular-nums; }
.home-proof-num .plus { margin-left: var(--s-1); font-size: var(--fs-lead); vertical-align: 25%; }
.home-proof-label { margin-top: var(--s-2); font-size: var(--fs-note); font-weight: 700; line-height: 1.5; color: var(--ink); }
.home-proof-sub { margin-top: var(--s-1); font-size: var(--fs-note); line-height: 1.5; color: var(--meta); }

/* --- 見出し（中央の小見出し。3行以内なので中央揃え可） ---------------------- */
.home-sec-head { text-align: center; }
.home-kicker {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .2em; color: var(--brand);
}
.home-kicker::before, .home-kicker::after { content: ""; width: var(--s-7); height: 1px; background-color: var(--rule); }
.home-sec-head h2 { word-break: auto-phrase; margin-top: var(--s-3); font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }

/* --- 4つのステップ --------------------------------------------------------- */
.home-flow { padding-block: var(--s-9) var(--s-7); }
.home-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); list-style: none; }
.home-step {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto 1fr; gap: var(--s-3);
  padding: var(--s-5); padding-right: var(--s-7);
  background-color: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--dur-micro) ease, transform var(--dur-micro) var(--ease);
}
.home-step:hover { border-color: var(--brand); color: var(--ink); transform: translateY(calc(var(--s-1) * -1)); }
.home-step-no {
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700; line-height: 1.5; letter-spacing: .08em;
  color: var(--step-c); font-variant-numeric: tabular-nums;
}
.home-step-body b { display: block; font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); }
.home-step-body span { display: block; margin-top: var(--s-2); font-size: var(--fs-note); line-height: 1.8; color: var(--meta); }
.home-step-chev { position: absolute; right: var(--s-4); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--step-c); }
.home-step.s1 { --step-c: var(--step-1); }
.home-step.s2 { --step-c: var(--step-2); }
.home-step.s3 { --step-c: var(--step-3); }
.home-step.s4 { --step-c: var(--step-4); }
.home-flow-note { margin: var(--s-6) auto 0; max-width: none; text-align: center; font-size: var(--fs-note); line-height: 1.8; color: var(--meta); }

/* --- 3つのアプローチ ------------------------------------------------------- */
.home-approach { padding-block: var(--s-7) 0; }
.home-approach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.home-app {
  display: grid; grid-template-columns: 36% minmax(0, 1fr);
  background-color: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  overflow: hidden; color: var(--ink);
  transition: border-color var(--dur-micro) ease;
}
.home-app:hover { border-color: var(--brand); color: var(--ink); }
.home-app img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.home-app img[src*="talk-chiangmai"] { object-position: 44% 30%; }
.home-app-body { display: flex; flex-direction: column; padding: var(--s-5) var(--s-4) var(--s-5) var(--s-5); }
.home-app-tag { font-size: var(--fs-note); font-weight: 700; line-height: 1.5; letter-spacing: .12em; color: var(--brand); }
.home-app-body b { margin-top: var(--s-2); font-size: var(--fs-lead); font-weight: 700; line-height: var(--lh-heading); }
.home-app-text { margin-top: var(--s-2); font-size: var(--fs-note); line-height: 1.8; color: var(--meta); }
.home-app-more { margin-top: auto; padding-top: var(--s-4); display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-note); font-weight: 700; line-height: 1.5; color: var(--brand); }
.home-app-more .i { width: 16px; height: 16px; stroke-width: 2; transition: transform var(--dur-micro) var(--ease); }
.home-app:hover .home-app-more .i { transform: translateX(var(--s-1)); }
.home-approach-more { margin-top: var(--s-6); text-align: center; font-size: var(--fs-note); line-height: 1.8; color: var(--meta); }
.home-approach-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

@media (max-width: 1024px) {
  :root { --fs-home-hero: 40px; }
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero-art { min-height: 0; padding-block: var(--s-5) var(--s-8); }
  /* タブレットはタグを3枚だけ横に並べる（浮かせない） */
  .home-tags { position: relative; display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .home-tag { position: static; animation: none; }
  .home-tag:nth-child(n+4) { display: none; }
  .home-ribbon { left: -10%; width: 120%; }
  .home-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-proof-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .home-proof-item:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-approach-grid { grid-template-columns: minmax(0, 1fr); }
  .home-app { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 768px) {
  :root { --fs-home-hero: 32px; }
  .home-hero { padding-top: var(--s-6); }
  .home-hero-actions { flex-direction: column; }
  .home-hero-actions .button { width: 100%; }
  .home-hero-art { min-height: 200px; margin-top: calc(var(--s-4) * -1); padding-block: 0; }
  .home-tags { display: none; }
  .home-app img[src*="talk-chiangmai"] { object-position: 30% 25%; }
  .home-ribbon { left: -30%; width: 160%; }
  .home-hand { font-size: var(--fs-base); right: 0; bottom: var(--s-4); }
  .home-skyline { height: 96px; background-size: auto 96px, 100% 100%; margin-top: calc(var(--s-6) * -1); }
  .home-proof-item, .home-proof-item:first-child { padding: var(--s-4) var(--s-3); }
  .home-proof-item:nth-child(odd) { padding-left: 0; }
  .home-proof-num { font-size: var(--fs-h3); }
  .home-proof-num .plus { font-size: var(--fs-base); }
  .home-proof-label { margin-top: 0; }
  .home-proof-sub { display: none; }
  .home-flow { padding-block: var(--s-7) var(--s-6); }
  .home-sec-head h2 { font-size: var(--fs-h3); }
  .home-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
  .home-step { grid-template-columns: var(--s-5) minmax(0, 1fr); grid-template-rows: auto; gap: var(--s-3); align-items: center; padding: var(--s-4); padding-right: var(--s-7); }
  .home-step-no { font-size: var(--fs-note); }
  .home-step-body b { font-size: var(--fs-lead); }
  .home-step-body span { margin-top: 0; }
  .home-flow-note { text-align: left; }
  .home-approach { padding-block: var(--s-6) 0; }
  .home-approach-grid { margin-top: var(--s-5); gap: var(--s-4); }
  .home-app { grid-template-columns: 112px minmax(0, 1fr); }
  .home-app img { min-height: 0; }
  .home-app-body { padding: var(--s-4); }
  .home-app-body b { font-size: var(--fs-base); }
  .home-approach-more { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .home-step, .home-app-more .i { transition: none; }
  .home-step:hover { transform: none; }
}

/* ===========================================================================
   2026-09-25 全ページ共通の見せ方の層（内容・色は変えない）
   トップの「光・ガラス・奥行き」を下層ページと英語版にも通す。
   色は既存のもの（ヒーローの地のグラデーション、リボンの光の色、--shadow-float）だけ。
   =========================================================================== */
/* ページ冒頭：地のグラデーションと、右上からの柔らかい光 */
.page-hero, .en-page .hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 0; }
.page-hero::before, .en-page .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(115deg, #F1EEFF 0%, #EEF0FE 38%, #EAF4FB 70%, #EAF7F2 100%);
}
.page-hero::after {
  content: ""; position: absolute; z-index: -1; right: -120px; top: -160px; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(circle, rgba(123, 108, 240, .22) 0%, rgba(143, 168, 245, .14) 40%, rgba(142, 224, 204, 0) 70%);
}

/* 情報のまとまりは、浮いたガラスの面として見せる */
.service-index-card, .mini-card, .case-card, .number-item, .contact-form-block, .contact-alt-item, .about-panel, .principle, .timeline-item {
  background-color: rgba(255, 255, 255, .78);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 18px 36px -24px rgba(50, 50, 93, .25);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.service-index-card, .mini-card, .case-card { padding: var(--s-6); }
.number-item, .principle, .timeline-item, .contact-alt-item { padding: var(--s-5); }
.contact-form-block, .about-panel { padding: var(--s-6); }
.service-index-grid, .mini-grid, .case-grid, .number-list { gap: var(--s-4); }
.number-list .number-item + .number-item { margin-top: var(--s-3); }
a.service-index-card, a.case-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease; }
a.service-index-card:hover, a.case-card:hover { transform: translateY(calc(var(--s-1) * -1)); border-color: var(--brand-fill); box-shadow: var(--shadow-float); }

/* 締めの相談パネル：濃紺の面に、紫の光を落とす */
.cta-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-md); }
.cta-panel::after {
  content: ""; position: absolute; z-index: -1; right: -80px; top: -140px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(circle, rgba(123, 108, 240, .45) 0%, rgba(143, 168, 245, .18) 45%, rgba(142, 224, 204, 0) 70%);
}

@media (prefers-reduced-motion: reduce) {
  a.service-index-card, a.case-card { transition: none; }
  a.service-index-card:hover, a.case-card:hover { transform: none; }
}
@media (max-width: 768px) {
  .service-index-card, .mini-card, .case-card, .contact-form-block, .about-panel { padding: var(--s-5); }
  .page-hero::after { width: 320px; height: 320px; right: -120px; top: -120px; }
}
/* 独立検査（2026-09-25）への対応：下層のカードは常時の影とぼかしを外し、半透明の面＋罫線に。
   影は、押せるカードのホバー時と、締めの相談パネルだけに残す */
.service-index-card, .mini-card, .case-card, .number-item, .contact-form-block, .contact-alt-item, .about-panel, .principle, .timeline-item {
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.service-index-card .card-arrow { right: var(--s-6); }
@media (max-width: 768px) {
  .service-index-card, .mini-card, .case-card, .contact-form-block, .about-panel { padding: var(--s-4); }
  .service-index-card .card-arrow { right: var(--s-5); }
  .page-hero h1, .page-hero h2, .section h2, .detail-block h2 { word-break: auto-phrase; }
}