/* ==========================================================================
   Samurai Brain — Powered by GOONSY
   Authense税理士法人 (Authense Professional Group)
   オリジナル デザインシステム
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* --- 墨（すみ）：Authense のコーポレート紺を基調とした暗色階調 --- */
  --ink-900: #08172e;
  --ink-800: #0f2547;
  --ink-700: #1a3668;
  --ink-500: #35507e;
  --ink-400: #5b7098;
  --ink-300: #8b9db9;
  --ink-200: #c2cddd;
  --ink-100: #e5ebf4;
  /* 面は冷たいグレーではなく、紙に近い温かいオフホワイト */
  --chalk: #f7f5f0;
  --chalk-2: #efece4;
  --line: #e6e1d6;
  --paper: #ffffff;

  /* --- 真鍮（しんちゅう）：ブランドの金を主役に据えたアクセント ---
     朱赤（原色に近い赤）は装飾に使わない。
     白文字ボタンの地色や淡い地の上の文字色になるため、
     コントラスト比 5:1 以上を確保できる濃さにする。
     暗い背景では明るい真鍮（--accent-2）に切り替わる */
  --accent: #8a5e1b;
  --accent-2: #c9a24b;
  --accent-soft: #f4ead6;
  --gold: #c9a24b;
  --teal: #2fa79b;
  /* オーセンス コーポレートカラー（紺 #1a3668）を基調としたブルー系 */
  --blue: #2c5c9e;
  --blue-soft: #e3ecf8;

  /* 見出しは筑紫系の明朝、本文は角の立ったゴシックで組む */
  --serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Zen Kaku Gothic New", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN",
    Meiryo, sans-serif;
  /* 数字用のDidone系。価格表の金額・数量など「数字を主役にしたい箇所」だけに使う。
     和文のグリフを持たない書体のため、かな・漢字は明朝へフォールバックさせる */
  --didone: "Bodoni Moda", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN",
    serif;

  --inner-max: 1400px;
  --pad-pc: 30px;
  --pad-sp: 20px;
  --radius: 12px;
  --radius-sm: 6px;

  /* 減速カーブは独自のものを使う */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 12px 40px rgba(8, 23, 46, 0.08);
  --shadow-pop: 0 20px 60px rgba(8, 23, 46, 0.16);
}

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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
dl,
dd,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
  vertical-align: bottom;
  border: 0;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Utilities ---------- */
.inner {
  width: min(var(--inner-max), 100%);
  margin-inline: auto;
  padding-inline: var(--pad-pc);
}

.sp-only {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-title {
  font-family: var(--serif);
  /* 細字の明朝ではなく、やや太めに組んで見出しの骨格を作る */
  font-weight: 600;
  font-size: 50px;
  line-height: 1.32;
  letter-spacing: -0.005em;
}

.section-title em {
  font-style: normal;
  color: var(--accent);
}

.section-title--center {
  text-align: center;
}

.section-lead {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-500);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* 丸めない矩形のボタン。文字の周囲に均等な余白を取る */
  padding: 15px 26px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: background-color 0.18s var(--ease);
}

/* 矢印は白い円板に載せず、文字と同じ色の細い線として置く */
.btn__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  color: inherit;
}

.btn__icon svg {
  width: 15px;
  height: auto;
  transition: transform 0.3s var(--ease);
}

.btn:hover {
  background: #6f4a12;
}

/* ループさせず、右へ少しだけ送る */
.btn:hover .btn__icon svg {
  transform: translateX(3px);
}

.btn--outline {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
  /* 枠線の 1px を差し引いて、面ボタンと高さを揃える */
  padding: 14px 25px;
}

.btn--outline .btn__icon {
  background: transparent;
  color: inherit;
}

.btn--outline:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* 紺地に置く枠線ボタン（2026-10 のCV統一で新設）。
   ヒーロー／SOLUTION／最終CTA が「資料請求（枠線）＋無料デモを予約する（茶）」の
   同じ並びになったため、暗い面用の枠線ボタンを1クラスに集約した。
   .btn--outline は濃紺の文字色なので、紺地では見えないことに注意 */
.btn--outline-light {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.45);
  /* 枠線の 1px を差し引いて、面ボタンと高さを揃える */
  padding: 14px 25px;
}

.btn--outline-light .btn__icon {
  background: transparent;
  color: inherit;
}

.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--paper);
  color: var(--paper);
}

.btn--sm {
  font-size: 14px;
  gap: 10px;
  padding: 11px 20px;
}

.btn--sm .btn__icon {
  width: 16px;
  height: 16px;
}

/* 矢印が枠外へループする演出は使わず、送り幅を小さく留める */

/* ---------- 商標表記（™）----------
   本文中のブランド名の直後に置く小さな上付きマーク */
.tm {
  font-size: 0.55em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}

/* ---------- Header (PC) ----------
   2026-10：ヒーロー上部の「白い帯」をご指示により廃止。
   ヘッダーは固定のまま、背景・境界線・ぼかしを持たない透明な行として
   ヒーローの紺地に直接重ねる。文字とロゴは白系に反転し、
   スクロールしてヒーローを離れたときだけ、白ではなく紺の面を敷いて
   可読性を保つ（＝帯には見えない） */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 990;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(15, 37, 71, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 76px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 0;
  /* ロゴ画像の表示高さ。下段「POWERED BY GOONSY」の字下げ量の基準になる */
  --brand-logo-h: 66px;
}

/* ロゴ画像（背景透過PNG）: 余白を切り落として、背景色の上にそのまま重ねる */
.brand__logo-box {
  display: block;
  flex-shrink: 0;
  height: 24px;
  overflow: hidden;
}

.brand__logo {
  display: block;
  height: var(--brand-logo-h); /* 文字部分は約34% → 表示高さ 約23px */
  width: auto;
  max-width: none;
  margin-block: -21px;
  /* ヘッダーは紺地に直接重ねるため、濃色のロゴを白文字として反転する */
  filter: invert(1);
}

/* ダーク背景のフッターでは白文字ロゴとして反転合成 */
.site-footer__brand .brand {
  --brand-logo-h: 78px;
}

.site-footer__brand .brand__logo-box {
  height: 28px;
}

.site-footer__brand .brand__logo {
  height: var(--brand-logo-h);
  margin-block: -25px;
  filter: invert(1); /* 透過ロゴを白文字として反転 */
}

.brand__sub {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  /* 2026-10：上段「SamuraiBrain」の S の左端と、下段「POWERED BY GOONSY」の
     P の左端を揃える（ご指示「SとPの左を揃える」）。
     ロゴPNGは文字の外側に透明余白があり、S のインク左端は画像高さの
     27／341 だけ内側にあるため、表示高さに比例したぶん下段を右へ字下げする */
  margin-left: calc(var(--brand-logo-h) * 27 / 341);
}

/* ※2026-10（最終）：ヘッダーのロゴは、ご指示により「前回のロゴ」へ戻しました。
   現行＝ images/samuraibrain-logo.png（1024×341・背景透過・黒インクの1行ワードマーク）。
   下段の「Powered by GOONSY」は画像に含めず、HTML側の .brand__sub で組みます。
   - 紺地（PCヘッダー／フッター／SPヘッダー）では .brand__logo の invert(1) で白文字にする
   - 白地になる場面（ドロワー展開中のSPヘッダー）では打ち消して濃色のまま見せる
   - 画像の上下に透明余白があるため、.brand__logo-box の overflow:hidden と
     負の margin-block でインク部分だけを切り出しています（下記の既存ルール）
   旧・2行ロックアップ画像（282×80・白インク）用の上書きは撤去し、
   その画像ファイル自体も 2026-10 のご指示により削除済みです。 */

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ヘッダーは紺のヒーローに直接重なるため、ナビの文字は白系にする */
.site-nav__item > span,
.site-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: color 0.16s var(--ease);
}

.site-nav__item > span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}

.site-nav__item.is-open > span {
  color: var(--accent-2);
}

.site-nav__item.is-open > span::after {
  transform: rotate(-135deg) translateY(-2px);
}

.site-nav__item:hover > span,
.site-nav__item:hover > a {
  color: var(--accent-2);
}

/* 紺地に重なるヘッダーでは、枠線ボタンの既定色（濃紺）が沈むため白系に切り替える */
.site-header .btn--outline {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.42);
  background: transparent;
}

.site-header .btn--outline:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
  background: transparent;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---------- Header (SP) ----------
   2026-10：PCと同じく「白い帯」を廃止。ヒーローの紺地に直接重ねる。
   本文が白い面に重なったとき（=スクロール後）とドロワー展開時だけ面を敷く */
.sp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 995;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding-inline: var(--pad-sp);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.sp-header.is-scrolled {
  background: rgba(15, 37, 71, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* ドロワー展開中は白い面を出し、ロゴとハンバーガーを紺に戻す */
body.drawer-open .sp-header {
  background: var(--paper);
  border-bottom-color: var(--line);
}

/* ドロワー展開中は白い面を出し、ロゴとハンバーガーを紺に戻す
   ※2026-10（最終）：ロゴを「前回のロゴ」（背景透過・黒インク）に戻したため、
     白地では invert を打ち消して黒インクのまま表示する（invert(1) だと白文字になり白地で消える） */
body.drawer-open .sp-header .brand__logo {
  filter: none;
}

body.drawer-open .sp-header .brand__sub {
  color: var(--ink-400);
}

body.drawer-open .hamburger span {
  background: var(--ink-900);
}

.sp-header .brand {
  margin-right: auto;
  /* SPヘッダーのロゴは 56px 表示。下段「POWERED BY GOONSY」の字下げ量を
     この高さから算出するため、基準値も 56px に合わせる（S と P の左を揃える） */
  --brand-logo-h: 56px;
}

.sp-header .brand__logo-box {
  height: 20px;
}

.sp-header .brand__logo {
  height: 56px;
  margin-block: -18px;
}

.hamburger {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  border-radius: 8px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px;
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease),
    background-color 0.24s var(--ease);
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.sp-drawer {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 994;
  background: var(--paper);
  overflow-y: auto;
  padding: 24px var(--pad-sp) 80px;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}

.sp-drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.sp-drawer__group {
  border-bottom: 1px solid var(--line);
  padding-block: 4px;
}

.sp-drawer__group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.sp-drawer__group > button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-300);
  border-bottom: 2px solid var(--ink-300);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.sp-drawer__group.is-open > button::after {
  transform: rotate(-135deg);
}

.sp-drawer__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s var(--ease);
}

.sp-drawer__group.is-open .sp-drawer__panel {
  grid-template-rows: 1fr;
}

.sp-drawer__panel > div {
  min-height: 0;
}

.sp-drawer__panel ul {
  display: grid;
  gap: 14px;
  padding-bottom: 20px;
}

.sp-drawer__panel a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
}

.sp-drawer__actions {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.sp-drawer__actions .btn {
  justify-content: flex-start;
  width: 100%;
}

/* PC表示時はSPヘッダー／ドロワーを完全に非表示（レイアウト崩れ防止） */
@media (min-width: 901px) {
  .sp-header,
  .sp-drawer {
    display: none;
  }
}

/* ---------- Hero ----------
   2026-10：ヘッダーの「帯」を廃止してヒーローに重ねるため、
   margin-top（帯のぶんの押し下げ）を 0 にし、その高さを padding-top に移した。
   72px（元の上余白）＋76px（ヘッダー高）＝148px */
.hero {
  margin-top: 0;
  padding-top: 148px;
  padding-bottom: 32px;
  background: linear-gradient(118deg, #0f2547 0%, #1a3668 52%, #274b83 100%);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 82% 18%, rgba(201, 162, 75, 0.3), transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(44, 92, 158, 0.32), transparent 50%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* 要件：デモの画面枠を会話枠の1.5～2.0倍の横幅で並べるため、
     右カラム（ビジュアル側）に広めの面積を配分する。
     見出しの英字行を削除したぶん左カラムをやや広げ、
     左右の重心を再調整する
     ※2026-10：メインコピーが3行構成（「記帳・申告から、」「経営の「打ち手」を」
       「提案する会計事務所へ。」）になり、最長行が11文字に伸びたため、
       左カラムを 0.8fr → 0.9fr に広げて指定どおり3行で収まるようにした */
  grid-template-columns: minmax(340px, 0.9fr) 1.1fr;
  align-items: center;
  gap: 40px;
}

.hero__copy {
  display: grid;
  /* 2026-10（最終）：ボタン直下の体験内容1行（.hero__demo）と注記
     （.hero__note）を削除し、要素数が1つ減ったため行間を 32px → 28px に詰め、
     縦のリズムを取り直した */
  gap: 28px;
}

/* ヒーロー上部の帯（添付デザイン・2026-10）。
   左に「特許出願済」の罫線ボックス、右に肩書「会計事務所のための経営支援AI」を横並び。
   旧デザインの印章モチーフ（「特」の正方形）と英字 PATENT PENDING は廃止した */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.hero__eyebrow {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--accent-2);
}

/* 「GOONSY」「Authense税理士法人」は語中で折り返さない */
.hero__eyebrow b {
  color: var(--accent-2);
  font-weight: 700;
  white-space: nowrap;
}

/* 「特許出願済」は真鍮の細い罫だけで囲む矩形。地は塗らず、紺の上に置く。
   文字は明朝の太字にして、肩書と同じ真鍮色で揃える */
.hero__patent {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 20px 6px;
  border: 1px solid rgba(201, 162, 75, 0.72);
  border-radius: 2px;
  background: transparent;
}

.hero__patent b {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  white-space: nowrap;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  /* 2026-10：メインコピーを3行（「記帳・申告から、」「経営の「打ち手」を」
     「提案する会計事務所へ。」）で見せるため、最長行11文字が左カラムに
     1行で収まるサイズに上限を下げた（旧 clamp(34px, 4.4vw, 58px)） */
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  display: grid;
  gap: 0.24em;
  /* 改行位置はご指定どおり br で固定するため、行長の自動調整は行わない
     （text-wrap: balance だと br の区切りを無視して再分割されることがある） */
  text-wrap: initial;
}

/* 「提案する会計事務所へ。」の「会計事務所」だけを真鍮で強調 */
.hero h1 em {
  font-style: normal;
  color: var(--accent-2);
}

/* ヒーロー見出しの英字行（現在は未使用：要素を削除済み） */
.hero h1 .line-en {
  font-family: var(--serif);
  font-size: 0.86em;
  color: var(--accent-2);
}

.hero__lead {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.74);
  max-width: 34em;
}

.hero__lead strong {
  color: var(--paper);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ※2026-10（最終）：CVボタン統一により、ヒーローは
   「資料請求（枠線・.btn--outline-light）」＋「無料デモを予約する（茶の面）」の並びに
   なったため、旧「資料を請求する」用の .btn--dark 上書きは撤去しました */

/* ※2026-10（最終）：ご指示によりボタン直下の体験内容1行（.hero__demo）と
   注記（.hero__note「※ 導入相談とお見積りも承ります。」）を削除したため、
   この2つのスタイルも撤去しました */

/* --- ファーストビューでの安心訴求 ---
   特許・機能の訴求だけでは「情報管理は大丈夫か」の不安が残るため、
   結論を1行に絞って添える。この行全体がリンクで、
   クリックすると #security（安心して、AIを活用するために。）へ自動スクロールする
   （注記とひとまとまりに見えるよう、ラッパーでまとめてから間隔を詰める） */
.hero__foot {
  display: grid;
  gap: 12px;
}

/* 行全体をクリック領域にする（アンカーなので下線は引かない） */
.hero__trust {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  width: fit-content;
  padding: 0;
  text-decoration: none;
}

/* 結論の一文。真鍮の点を頭に置き、紺の地の上で視線を拾わせる */
.hero__trust-lead {
  position: relative;
  padding-left: 13px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
  transition: color 0.18s var(--ease);
}

.hero__trust-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* 「詳しくはこちらから」：真鍮色のリンクとして見せ、下線で押せると伝える */
.hero__trust-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(201, 162, 75, 0.5);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.hero__trust-more svg {
  width: 13px;
  height: auto;
  transition: transform 0.3s var(--ease);
}

.hero__trust:hover .hero__trust-lead {
  color: var(--paper);
}

.hero__trust:hover .hero__trust-more {
  border-color: var(--accent-2);
  color: #e2c483;
}

.hero__trust:hover .hero__trust-more svg {
  transform: translateX(3px);
}

/* キーボード操作でもフォーカスが分かるようにする */
.hero__trust:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- モニター募集バナー（ヒーロー内）— 廃止 ----------
   ※2026-11：ご指示により、ヒーロー内のモニター募集バナー
     （.hero__monitor / .hero__monitor-tag / -body / -title / -note / -go）を
     HTML ごと削除しました。募集導線はヒーローの主CTA
     「限定50社 無料モニターに応募する」とヘッダーの「モニター募集」で確保します。
     スタイル定義も未使用になるため併せて削除しています。 */

/* Hero visual */
.hero__visual {
  position: relative;
  min-height: 380px;
}

/* 縮小ラッパー
   要件：縦横のバランス（アスペクト比）を変えずに、コンテンツ全体を
   約75%のサイズに縮小して中央に再配置する。

   仕組み：内側の .hero-demo は「縮小前の幅（親幅の 1/0.75 倍＝従来と同じ
   カラム幅）」でレイアウトし、等倍の transform: scale(0.75) で縮小する。
   等倍縮小なので縦横比は完全に保持される。
   ラッパー側は縮小後の寸法（幅75% × 高さ 560px×0.75）を確保して、
   レイアウトのはみ出しや見切れが起きないようにする。 */
.hero-demo-scale {
  position: relative;
  width: 75%;
  height: calc(560px * 0.75);
  margin-inline: auto;
}

.hero-demo-scale > .hero-demo {
  position: absolute;
  top: 0;
  left: 0;
  width: 133.3333%;
  height: 560px;
  transform: scale(0.75);
  transform-origin: top left;
}

.hero-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink-900);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-pop);
  display: grid;
  gap: 12px;
}

.hero-card--main {
  inset: 8% 4% 12% 8%;
  padding: 22px;
  gap: 18px;
}

.hero-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-400);
}

.hero-card__dots {
  display: flex;
  gap: 5px;
}

.hero-card__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-200);
}

.hero-card__dots i:first-child {
  background: var(--accent);
}

.wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 54px;
}

.wave i {
  flex: 1;
  background: var(--accent);
  border-radius: 3px;
  height: 22%;
  opacity: 0.85;
  animation: wave 1.5s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

@keyframes wave {
  0%,
  100% {
    height: 22%;
  }
  50% {
    height: 100%;
  }
}

.hero-lines {
  display: grid;
  gap: 9px;
}

.hero-lines i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--ink-100);
  overflow: hidden;
  position: relative;
}

.hero-lines i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w, 60%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transform-origin: left;
  animation: grow 2.6s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

@keyframes grow {
  0% {
    transform: scaleX(0.1);
  }
  40%,
  100% {
    transform: scaleX(1);
  }
}

.hero-card--kpi {
  right: 0;
  bottom: 4%;
  width: 176px;
  gap: 6px;
}

.hero-card--kpi .kpi-value {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}

.hero-card--kpi .kpi-label {
  font-size: 11px;
  color: var(--ink-400);
  line-height: 1.5;
}

.hero-card--tag {
  left: 0;
  bottom: 0;
  width: 172px;
  gap: 4px;
  padding: 14px;
}

.hero-card--tag strong {
  font-size: 13px;
}

.hero-card--tag span {
  font-size: 11px;
  color: var(--ink-400);
}

/* ---------- Logo marquee ---------- */
.marquee {
  background: var(--chalk);
  padding-block: 26px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: marquee 46s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  flex-shrink: 0;
  padding-inline: 34px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-300);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Intro ---------- */
.intro {
  padding-block: 72px 56px;
  text-align: center;
}

.intro__inner {
  display: grid;
  gap: 24px;
  justify-items: center;
}

.intro h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.3;
}

.intro h2 em {
  font-style: normal;
  color: var(--accent);
}

.intro p {
  max-width: 46em;
  color: var(--ink-500);
}

/* ---------- Howto（使い方の流れ・2026-10 追加／デザイン刷新） ----------
   #intro と #features の間に置き、「6つの機能」の前に“どう使うか”を3ステップで示す。
   ※2026-10 のご指示でデザインのみ刷新（テキストは据え置き）。
     紺ベタのカードは情報量が重く、直後の白い #features と沈み合うため、
     生成りの地に「白いカード＋真鍮の矢印」という明るい図解へ変更した。
     番号（01〜03）は順序を示すマーカー。円形の真鍮罫でステップらしさを出す。
   矢印は要素を増やさず、2枚目・3枚目の ::before で描く（clip-path のブロック矢印） */
.howto {
  padding-block: 72px 80px;
  background: var(--chalk);
}

.howto__title {
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink-900);
}

.howto__steps {
  display: grid;
  /* 3枚の等幅カード。gap の中央に矢印を置くため、gap は矢印より広く取る */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin-top: 40px;
}

.howto-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 248px;
  padding: 32px 26px 34px;
  background: var(--paper);
  border: 1px solid var(--line);
  /* 上端に真鍮のラインを引き、導入で変わる4つのこと（.benefit-card）と意匠を揃える */
  border-top: 3px solid var(--accent-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
}

/* ステップ番号：真鍮の細い円で囲み、本文と混ざらないようにする */
.howto-step__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201, 162, 75, 0.55);
  border-radius: 50%;
  background: rgba(201, 162, 75, 0.09);
  /* ※2026-10-27：34px の円の中の 13px では Didone の「4」が潰れるため明朝600へ。
     円の径は変えず、字面だけ読みやすいものに差し替えています。 */
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.howto-step__title {
  position: relative;
  padding-bottom: 14px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink-900);
}

/* 見出しの下に短い真鍮の罫を1本。カード内の視線の起点をつくる */
.howto-step__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 30px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--accent-2);
}

.howto-step__text {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-500);
}

/* カード内の ™ は本文より小さく（上付きの位置は .tm の既定に従う） */
.howto-step__text .tm {
  font-size: 0.5em;
}

/* 2枚目・3枚目の左側に、右向きのブロック矢印を描く（真鍮） */
.howto-step + .howto-step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -40px;
  width: 22px;
  height: 30px;
  transform: translateY(-50%);
  background: var(--accent-2);
  clip-path: polygon(0 32%, 52% 32%, 52% 6%, 100% 50%, 52% 94%, 52% 68%, 0 68%);
}

/* ---------- Benefits（導入で変わる6つのこと・2026-10 更新） ----------
   #challenges 末尾の紺色 SOLUTION カードの直下に置き、解決策の直後で
   「導入すると何が変わるか」を答える（旧：3枚・#features の手前 → 4枚 → 6枚）。
   2026-10 の安彦さんFB④により、事務所規模で効果が異なるため
   「小規模事務所（少人数）向け」「中堅・大規模事務所向け」の2グループ制にした。
   背景は薄い生成り（--chalk）にして、前後の白セクションとリズムを分ける */
.benefits {
  padding-block: 88px 96px;
  background: var(--chalk);
}

.benefits__head {
  text-align: center;
}

/* ※2026-10（最終）：ご指示によりアイブロー（BENEFITS）とリード文を
   削除したため、.benefits__eyebrow / .benefits__lead のスタイルも撤去しました */

.benefits__title {
  /* 2026-10（最終）：アイブロー削除に伴い、見出しが .benefits__head の
     第1子になったため、アイブローとの間隔用だった margin-top: 14px を 0 に戻した
     （余白は .benefits の padding-block 側で確保する） */
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.34;
  text-wrap: balance;
}

.benefits__title em {
  font-style: normal;
  color: var(--accent);
}

/* リード文（.benefits__lead）は2026-10 のご指示で削除済み */

.benefits__grid {
  display: grid;
  /* 2026-10：4枚 → 6枚。グループ内は3列（2グループ × 3枚）。
     1グループ3枚なので 4列指定のままでは2行目が1枚だけになり不格好になる。
     @1200で2列、@768で1列に落とす */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* 規模別のグループ。1つ目は見出しの下、2つ目は余白を空けて続ける */
.benefits__group + .benefits__group {
  margin-top: 40px;
}

.benefits__group-title {
  /* グループ見出しは「ラベル」として小さく。カード見出し（22px）より明確に弱くする */
  display: flex;
  align-items: center;
  gap: 12px;
  /* 見出し→リードの下に最初のグループ見出しが来るので、上は詰めずに空ける */
  margin-top: 48px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-700);
}

.benefits__group-title::after {
  /* 見出しの右に伸びる罫線。グループの区切りを視線で示す */
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  /* 上端の真鍮ライン。課題カードの紺ラインと意匠を揃えつつ、解決側であることを色で示す */
  border-top: 3px solid var(--accent-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* 導入で変わる6つのことの通し番号 01〜06
   ※2026-10-27：課題カード（.challenge-card__num）と同じ理由で明朝600に統一。
     15px の Didone では「4」「6」の線が細すぎて読みづらかったため。 */
.benefit-card__num {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}

.benefit-card__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  /* 2026-10：6枚のうち「新たな収益機会の獲得」だけが1行に収まり、
     同じ段の他のカードと本文の開始位置がずれていた。
     文言を変えずに済むよう、2行ぶんの高さを最低限確保して本文の頭を揃える
     （1列表示では不要なので responsive.css の @768 で 0 に戻す） */
  min-height: calc(2em * 1.45);
}

.benefit-card__text {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-500);
}

/* ---------- Feature banners（6カードを3列×2段で掲載） ---------- */
.feature-banners {
  padding-block: 40px 72px;
}

.feature-banners__head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.feature-banners__head h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
}

.feature-banners__head p {
  font-size: 13px;
  color: var(--ink-400);
  margin-top: 6px;
}

/* 3列×2段のグリッド。横スクロールは行わない。
   ※2026-10：固定3列だと、1025〜1229px と 769〜835px の帯でカード幅が
     344px を下回り、見出し（25px）が3〜4行に折れていました。
     カード本文幅が 380px を下回らない範囲で自動的に列数を落とす auto-fit に変更。
     → 3列（約1232px〜）／2列（836〜1231px）／1列（835px以下）に連続的に切り替わる。
     1列時に 380px を下回る幅（スマホ）では responsive.css の 1fr 指定で上書きします */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
}

.feature-card {
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 340px;
  position: relative;
  overflow: hidden;
  transition: transform 0.24s var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.72;
}

.feature-card h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.42;
}

/* 機能名は「補助ラベル」に下げる（見出しはユーザーメリット）。
   見出しとの区別がつくよう、小さめの英字風ラベルとして添える */
.feature-card__name {
  font-family: var(--sans);
  font-size: 11.5px !important;
  font-weight: 700;
  line-height: 1.5 !important;
  letter-spacing: 0.04em;
  opacity: 1 !important;
  padding-left: 9px;
  border-left: 2px solid currentColor;
}

.feature-card p {
  font-size: 13px;
  line-height: 1.75;
  opacity: 0.78;
}

.feature-card__more {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feature-card--ink {
  background: var(--ink-800);
  color: var(--paper);
}

.feature-card--blue {
  background: var(--blue-soft);
  color: var(--ink-900);
}

/* テンプレート機能：赤系をやめてネイビー〜グレー系に統一 */
.feature-card--grey {
  background: linear-gradient(150deg, var(--ink-500) 0%, var(--ink-700) 100%);
  color: var(--paper);
}

.feature-card--chalk {
  background: var(--chalk-2);
  color: var(--ink-900);
}

/* ---------- Feature detail (left detail / right visual) ---------- */
.feature-detail {
  padding-block: 80px;
}

.feature-detail + .feature-detail {
  border-top: 1px solid var(--line);
}

.feature-detail__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: start;
}

/* 要件：全機能セクションで「左＝機能概要／右＝動的な活用イメージ」を固定 */

.feature-detail__tagline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.feature-detail__title {
  margin-top: 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.32;
}

.feature-detail__title em {
  font-style: normal;
  color: var(--accent);
}

/* 見出しをユーザーメリットに変えたため、機能名は補助ラベルとして見出しの直下に置く。
   カード側（.feature-card__name）と同じ意匠にして、一覧と詳細で対応が取れるようにする */
.feature-detail__name {
  display: inline-block;
  width: fit-content;
  margin-top: 14px;
  padding-left: 10px;
  border-left: 2px solid var(--accent-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.feature-detail__lead {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-500);
}

.feature-detail__accordion {
  margin-top: 40px;
}

.acc-item {
  border-top: 1px solid var(--line);
}

.acc-item:first-child {
  border-top: 0;
}

.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  text-align: left;
}

.acc-trigger span {
  font-size: 16px;
  font-weight: 700;
}

.acc-trigger i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--ink-200);
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.acc-trigger i::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-500);
  border-bottom: 1.5px solid var(--ink-500);
  transform: rotate(45deg) translate(-1px, -1px);
}

.acc-item.is-open .acc-trigger i {
  transform: rotate(180deg);
  background: var(--accent);
  border-color: var(--accent);
}

.acc-item.is-open .acc-trigger i::before {
  border-color: var(--paper);
}

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.32s var(--ease);
}

.acc-item.is-open .acc-panel {
  grid-template-rows: 1fr;
}

.acc-panel > div {
  min-height: 0;
}

.acc-panel p {
  padding-bottom: 22px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-500);
}

/* FAQ「当事務所の規模でも導入効果はありますか」の回答内リスト（2026-10）
   導入で変わる6つのこと（#benefits）の小規模事務所向け3項目を、
   回答の中にそのまま読める形で並べる */
.acc-panel__lead {
  padding-bottom: 14px !important;
  font-weight: 700;
  color: var(--ink-700) !important;
}

.acc-panel__list {
  margin-bottom: 22px;
  display: grid;
  gap: 14px;
}

.acc-panel__list > div {
  padding: 14px 16px;
  background: var(--chalk);
  border-left: 2px solid var(--accent-2);
  border-radius: 3px;
}

.acc-panel__list dt {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--ink-900);
}

.acc-panel__list dd {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-500);
}

.feature-detail__action {
  margin-top: 36px;
}

/* ---------- Dynamic visuals ---------- */
.visual {
  position: relative;
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 58px 26px 26px;
  min-height: 420px;
  display: grid;
  align-content: center;
  gap: 18px;
  overflow: hidden;
}

.visual__note {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-500);
}

.visual__note strong {
  color: var(--ink-900);
}

.visual__caption {
  position: absolute;
  left: 26px;
  top: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  text-transform: uppercase;
}

.visual__stage {
  display: grid;
  gap: 14px;
}

.vpanel {
  background: var(--paper);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(8, 23, 46, 0.06);
  display: grid;
  gap: 10px;
}

.vpanel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-400);
}

.vpanel__head .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.vpanel__head .dot--teal {
  background: var(--teal);
}

.vpanel__head .dot--blue {
  background: var(--blue);
}

.vchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--chalk-2);
  color: var(--ink-500);
}

.vchip--accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.vchip--teal {
  background: rgba(47, 167, 155, 0.12);
  color: var(--teal);
}

.vchip--blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.vchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* voice visual : ソース欄へのドラッグ&ドロップ → 解析結果 */
.vreq {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
}

.vdnd {
  position: relative;
  display: grid;
  gap: 10px;
}

/* シーン①：音声ファイルをソース欄へドラッグしている様子 */
.vdnd__drag {
  position: absolute;
  left: 0;
  top: 4px;
  z-index: 4;
  display: grid;
  justify-items: start;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
}

.vdnd__drag-doc {
  display: block;
  width: 34px;
  height: 42px;
  filter: drop-shadow(0 8px 16px rgba(8, 23, 46, 0.2));
}

.vdnd__drag-doc svg {
  display: block;
  width: 100%;
  height: 100%;
}

.vdnd__drag-name {
  max-width: 190px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 4px 12px rgba(8, 23, 46, 0.12);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-700);
}

.visual.is-active .vdnd__drag {
  animation: vdnd-drag 2s var(--ease) both;
}

@keyframes vdnd-drag {
  0% {
    opacity: 0;
    transform: translate(-20px, -16px) scale(0.94);
  }
  18% {
    opacity: 1;
    transform: translate(-20px, -16px) scale(1);
  }
  66% {
    opacity: 1;
    transform: translate(4px, 8px) scale(1);
  }
  88% {
    opacity: 1;
    transform: translate(10px, 20px) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translate(14px, 28px) scale(0.86);
  }
}

.vdnd__zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 15px 14px;
  border: 1.5px dashed var(--ink-200);
  border-radius: 10px;
  background: var(--chalk-2);
}

.vdnd__zone > * {
  transition: opacity 0.35s var(--ease);
}

.vdnd__icon {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink-200);
  border-radius: 9px;
  background: var(--paper);
}

.vdnd__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 1.5px;
  height: 11px;
  background: var(--ink-400);
  transform: translateX(-50%);
}

.vdnd__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--ink-400);
  border-left: 1.5px solid var(--ink-400);
  transform: translateX(-50%) rotate(45deg);
}

.vdnd__title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-700);
}

.vdnd__hint {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-400);
}

.vdnd__btn {
  margin-top: 3px;
  padding: 6px 14px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
}

/* ドロップされた音声ファイル（ソース欄に落ちてくる動き） */
.vdnd__file {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--blue);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 8px 20px rgba(8, 23, 46, 0.1);
  opacity: 0;
  transform: translateY(-52px) scale(0.97);
  transition: opacity 0.45s var(--ease), transform 0.7s var(--ease);
}

.visual.is-active .vdnd__file {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 2.2s;
}

.vdnd__file-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--blue-soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}

.vdnd__file-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.vdnd__file-body b {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

.vdnd__file-body small {
  font-size: 10px;
  color: var(--ink-400);
}

.vdnd__file-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--ink-100);
  overflow: hidden;
}

.vdnd__file-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transition: width 0.9s var(--ease) 2.7s;
}

.visual.is-active .vdnd__file-bar i {
  width: 100%;
}

.vdnd__file-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  font-size: 10px;
  color: var(--paper);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s var(--ease) 3.4s, transform 0.3s var(--ease) 3.4s;
}

.visual.is-active .vdnd__file-check {
  opacity: 1;
  transform: scale(1);
}

/* ドロップ中はソース欄をハイライトし、中身を一時的に沈める */
.visual.is-active .vdnd__zone {
  animation: vdnd-zone 2s var(--ease) both;
}

.visual.is-active .vdnd__zone > * {
  animation: vdnd-dim 2s var(--ease) both;
}

@keyframes vdnd-zone {
  0% {
    border-color: var(--ink-200);
    background: var(--chalk-2);
  }
  30%,
  74% {
    border-color: var(--blue);
    background: var(--blue-soft);
  }
  94%,
  100% {
    border-color: var(--ink-200);
    background: var(--chalk-2);
  }
}

@keyframes vdnd-dim {
  0% {
    opacity: 1;
  }
  30%,
  74% {
    opacity: 0.3;
  }
  94%,
  100% {
    opacity: 1;
  }
}

/* 解析結果（要約 / アクション） */
.vresult {
  display: grid;
  gap: 9px;
}

.vresult__block {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 9px;
  background: var(--chalk-2);
}

/* 起動時のみ「順に現れる」アニメーションを付与。
   既定では可視のため、JSが動かない環境でも要約・アクションが表示される */
.visual.is-active .vresult__block {
  animation: vresult-in 0.55s var(--ease) both;
}

.visual.is-active .vresult__block:nth-child(1) {
  animation-delay: 3.2s;
}

.visual.is-active .vresult__block:nth-child(2) {
  animation-delay: 3.7s;
}

@keyframes vresult-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* アニメーションを抑制する環境では、ドラッグの演出を省いて結果を静的表示する */
@media (prefers-reduced-motion: reduce) {
  .vdnd__drag {
    display: none;
  }

  .visual.is-active .vdnd__zone,
  .visual.is-active .vdnd__zone > *,
  .visual.is-active .vresult__block {
    animation: none;
  }

  .visual.is-active .vdnd__file,
  .visual.is-active .vdnd__file-bar i,
  .visual.is-active .vdnd__file-check {
    transition: none;
  }

  /* 紙芝居は送らず、表紙だけを静的に表示する
     （PDFの描画自体は行うので、表紙は画像として表示される） */
  .visual.is-active .vslides.is-ready .vslide-page,
  .visual.is-active .vslides.is-ready .vslides__step {
    animation: none;
  }

  .visual.is-active .vslides.is-ready .vslide-page:not(:first-child) {
    display: none;
  }

  .visual.is-active .vslides.is-ready .vslides__step:first-child {
    color: var(--paper);
    background: var(--ink-800);
  }

  /* アップセル：アタックリストは静的表示（既定の表示状態のまま） */
  .visual.is-active .vupsell__row,
  .visual[data-visual="upsell"].is-active .vchip,
  .visual[data-visual="upsell"].is-active .vbubble {
    animation: none;
  }

  /* テンプレート機能：シーン切り替えを行わず、シーン①のみを静的に表示する */
  .visual.is-active .vtpl__view,
  .visual.is-active .vtpl__step,
  .visual.is-active .vtpl-in,
  .visual[data-visual="template"].is-active .vdnd__drag,
  .visual[data-visual="template"].is-active .vdnd__zone,
  .visual[data-visual="template"].is-active .vdnd__zone > * {
    animation: none;
  }

  .visual.is-active .vtpl__view:not(:first-child) {
    display: none;
  }

  .visual.is-active .vtpl__step:first-child {
    color: var(--paper);
    background: var(--ink-800);
  }

  .visual.is-active .vtpl-in {
    opacity: 1;
  }

  /* クライアント管理：シーン切り替えを行わず、シーン①を静的に表示する */
  .visual.is-active .vcli__view,
  .visual.is-active .vcli__step,
  .visual.is-active .vcli__item--target,
  .visual[data-visual="client"].is-active .vcli-in,
  .visual[data-visual="client"].is-active .vcli__cursor,
  .visual[data-visual="client"].is-active .vcli__tap {
    animation: none;
  }

  .visual.is-active .vcli__view:not(:first-child) {
    display: none;
  }

  .visual.is-active .vcli__step:first-child {
    color: var(--paper);
    background: var(--ink-800);
  }

  /* カーソルと波紋は出さず、選択中のバナーを静的に強調する */
  .vcli__cursor,
  .vcli__tap {
    display: none;
  }

  .vcli__item--target {
    border-color: var(--blue);
    background: var(--blue-soft);
  }

  .vcli-in {
    opacity: 1;
  }

  /* 経営分析：シーン切り替えを行わず、シーン①を静的に表示する */
  .visual.is-active .van__view,
  .visual.is-active .van__step,
  .visual.is-active .van-in,
  .visual.is-active .vfile,
  .visual[data-visual="analysis"].is-active .vdnd__drag,
  .visual[data-visual="analysis"].is-active .vdnd__zone,
  .visual[data-visual="analysis"].is-active .vdnd__zone > *,
  .visual[data-visual="analysis"].is-active .vb,
  .visual[data-visual="analysis"].is-active .vb-h,
  .visual[data-visual="analysis"].is-active .vdial-fg,
  .visual[data-visual="analysis"].is-active .vline,
  .visual[data-visual="analysis"].is-active .van__prog i {
    animation: none;
  }

  .visual.is-active .van__view:not(:first-child) {
    display: none;
  }

  .visual.is-active .van__step:first-child {
    color: var(--paper);
    background: var(--ink-800);
  }

  /* ドラッグ演出は行わないので、ファイルは最初から並べておく */
  .visual[data-visual="analysis"] .vfile {
    opacity: 1;
  }

  /* グラフは最終形で静的に表示する */
  .visual[data-visual="analysis"] .van-in {
    opacity: 1;
  }

  .visual[data-visual="analysis"] .van__prog i {
    width: 82%;
  }
}

.vresult__label {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  background: var(--blue-soft);
}

.vresult__label--action {
  color: var(--accent);
  background: var(--accent-soft);
}

.vresult__block p {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-700);
}

.vresult__block ul {
  display: grid;
  gap: 6px;
}

.vresult__block li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-700);
}

.vresult__block li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* presentation visual : ファイルをドラッグ&ドロップ → 月次レポート生成 */
/* プレゼン機能は「ドラッグ → ファイルが並ぶ → レポート生成」と続くため、
   ドラッグ演出を先に終わらせる */
.visual[data-visual="present"].is-active .vdnd__drag {
  animation-duration: 1.5s;
}

.vdnd__drag-doc--csv {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  border: 2.2px solid var(--ink-800);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 8px 16px rgba(8, 23, 46, 0.18);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-800);
}

.vfiles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vfile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px dashed var(--ink-200);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--paper);
}

.vfile b {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--ink-100);
  color: var(--ink-500);
}

/* インプットされたファイルが順に並んでいく */
.visual.is-active .vfile {
  animation: vfile-in 0.42s var(--ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes vfile-in {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 経営課題解決のご提案：全17ページから代表6ページを紙芝居状にパラパラ送り
   （ご提供PDFの該当ページを PDF.js で描画したものを掲載）
   --slide-count : 表示するページ数
   --slide-step  : 1ページあたりの表示時間
   --slide-start : レポート生成演出が終わってから送りを始めるまでの待ち時間 */
.vslides {
  --slide-count: 6;
  --slide-step: 2.6s;
  --slide-start: 2.4s;
  --slide-cycle: calc(var(--slide-count) * var(--slide-step));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(8, 23, 46, 0.08);
  overflow: hidden;
}

.vslides__frame {
  position: relative;
  /* 元PDFは 1080x608（≈16:9）なので、その比率で枠を確保する。
     PDF.js が読み込めた場合は実寸比をJS側から上書きする */
  aspect-ratio: 16 / 9;
  background: var(--chalk-2);
  perspective: 1000px;
  overflow: hidden;
}

.vslide-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: left center;
}

/* JSが動かない環境・アニメーション開始前は1ページ目を表示しておく
   （内容が空にならないためのフォールバック） */
.vslide-page:first-child {
  opacity: 1;
}

.vslide-page img,
.vslide-page canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* 枠の比率はPDFの実寸に合わせているため、歪みなく全面に収まる */
  object-fit: cover;
  object-position: top center;
}

/* PDF.js が読めない環境・描画完了前に表示する見出し。
   枠が空欄にならないようにするためのフォールバック */
.vslide-page__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 16px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--ink-500);
}

/* 描画が終わったら、重ねてあるフォールバックの見出しは隠す */
.vslides.is-ready .vslide-page__fallback {
  display: none;
}

/* 紙芝居のページ送り。
   各ページは同じ周期 --slide-cycle のアニメーションを、
   --i ぶん（= --slide-step ずつ）遅らせて開始する。
   1ページ目だけは fill-mode:both にして、送りが始まる前から表紙を見せておく。
   ※PDF.js の描画が終わって .is-ready が付くまでは送りを始めない
     （描画前に送りが進むと、空の枠がめくれてしまうため） */
.visual.is-active .vslides.is-ready .vslide-page {
  animation: vslide-flip var(--slide-cycle) var(--ease) infinite;
  animation-delay: calc(var(--slide-start) + var(--i) * var(--slide-step));
}

.visual.is-active .vslides.is-ready .vslide-page:first-child {
  animation-name: vslide-flip-first;
  animation-fill-mode: both;
}

/* 2ページ目以降：右から入り、左へ抜けていく */
@keyframes vslide-flip {
  0% {
    opacity: 0;
    transform: translateX(22%) rotateY(-13deg) scale(0.985);
  }
  3% {
    opacity: 1;
  }
  19% {
    opacity: 1;
    transform: translateX(0) rotateY(0) scale(1);
  }
  21%,
  100% {
    opacity: 0;
    transform: translateX(-22%) rotateY(13deg) scale(0.985);
  }
}

/* 1ページ目：送りが始まるまでは静止して見せておく */
@keyframes vslide-flip-first {
  0%,
  19% {
    opacity: 1;
    transform: translateX(0) rotateY(0) scale(1);
  }
  21%,
  100% {
    opacity: 0;
    transform: translateX(-22%) rotateY(13deg) scale(0.985);
  }
}

/* 現在表示中のページを示すインデックス */
.vslides__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--chalk);
}

.vslides__step {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ink-400);
  background: var(--paper);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.visual.is-active .vslides.is-ready .vslides__step {
  animation: vslide-step var(--slide-cycle) linear infinite;
  animation-delay: calc(var(--slide-start) + var(--i) * var(--slide-step));
}

.visual.is-active .vslides.is-ready .vslides__step:first-child {
  animation-fill-mode: both;
}

@keyframes vslide-step {
  0%,
  19% {
    color: var(--paper);
    background: var(--ink-800);
  }
  21%,
  100% {
    color: var(--ink-400);
    background: var(--paper);
  }
}

/* analysis visual : ①複数データのドロップ → ②定量×定性の統合分析 → ③分析結果6枚 */
/* テンプレート機能と同じ「アプリウィンドウ＋シーン重ね置き」の仕組みを使う。
   --scene-count / --scene-step で周期と順序を制御する。 */
.van {
  --scene-count: 3;
  --scene-step: 3.8s;
  --scene-cycle: calc(var(--scene-count) * var(--scene-step));
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}

.van__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--chalk);
}

.van__dots {
  display: inline-flex;
  gap: 4px;
}

.van__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-200);
}

.van__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
}

.van__badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink-800);
  color: var(--paper);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.van__views {
  display: grid;
  padding: 12px;
}

.van__view {
  grid-area: 1 / 1;
  opacity: 0;
}

/* JSが動かない環境・アニメーション開始前はシーン①を表示しておく */
.van__view:first-child {
  opacity: 1;
}

/* シーン切り替えのキーフレームはテンプレート機能と共通 */
.visual.is-active .van__view {
  animation: vtpl-scene var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
}

.visual.is-active .van__view:first-child {
  animation-name: vtpl-scene-first;
  animation-fill-mode: both;
}

.van__h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-700);
}

/* 見出しのドット（.vpanel__head の dot と同じ意匠） */
.van__h .dot,
.vmerge__box-h .dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.van__h .dot--blue,
.vmerge__box-h .dot--blue {
  background: var(--blue);
}

.van__h .dot--teal,
.vmerge__box-h .dot--teal {
  background: var(--teal);
}

/* --- シーン①：様々なデータをまとめてドロップする --- */
/* 複数ファイルを重ねて持っている様子（2枚目は後ろにずらす） */
.vdnd__drag-stack {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
}

.vdnd__drag-stack .vdnd__drag-doc {
  position: absolute;
  left: 0;
  top: 0;
}

.vdnd__drag-stack .vdnd__drag-doc:first-child {
  left: 9px;
  top: 7px;
  opacity: 0.6;
}

/* シーン①のドラッグ演出は毎周期再生する */
.visual[data-visual="analysis"].is-active .vdnd__drag {
  animation: van-drag var(--scene-cycle) var(--ease) infinite;
}

.visual[data-visual="analysis"].is-active .vdnd__zone {
  animation: van-zone var(--scene-cycle) var(--ease) infinite;
}

.visual[data-visual="analysis"].is-active .vdnd__zone > * {
  animation: van-dim var(--scene-cycle) var(--ease) infinite;
}

@keyframes van-drag {
  0% {
    opacity: 0;
    transform: translate(-8px, -14px) scale(0.94);
  }
  3% {
    opacity: 1;
    transform: translate(-8px, -14px) scale(1);
  }
  8% {
    opacity: 1;
    transform: translate(2px, 10px) scale(0.98);
  }
  11%,
  100% {
    opacity: 0;
    transform: translate(12px, 26px) scale(0.86);
  }
}

@keyframes van-zone {
  0%,
  2% {
    border-color: var(--ink-200);
    background: var(--chalk-2);
  }
  5%,
  9% {
    border-color: var(--blue);
    background: var(--blue-soft);
  }
  12%,
  100% {
    border-color: var(--ink-200);
    background: var(--chalk-2);
  }
}

@keyframes van-dim {
  0%,
  2% {
    opacity: 1;
  }
  5%,
  9% {
    opacity: 0.32;
  }
  12%,
  100% {
    opacity: 1;
  }
}

/* インプットされた5種類のデータが順に並ぶ（毎周期） */
.visual[data-visual="analysis"].is-active .vfile {
  animation: van-fade var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step) + var(--k, 0s));
  animation-fill-mode: both;
}

@keyframes van-fade {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  4% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 1;
    transform: none;
  }
  33%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* --- シーン②：定量データと定性データを統合して分析する --- */
.vmerge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vmerge__box {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--chalk-2);
}

.vmerge__box--ql {
  border-color: rgba(47, 167, 155, 0.4);
  background: rgba(47, 167, 155, 0.07);
}

.vmerge__box-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-700);
}

.vmerge__item {
  display: block;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-500);
}

/* 2つのデータが分析エンジンに合流する導線 */
.vmerge__join {
  display: block;
  width: 100%;
  height: 20px;
  margin: -2px 0;
}

.vmerge__engine {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--blue);
  border-radius: 10px;
  background: var(--blue-soft);
}

.vmerge__engine-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ink-800);
  color: var(--paper);
  font-size: 9.5px;
  font-weight: 700;
}

.vmerge__engine-body {
  flex: 1;
  min-width: 0;
}

.vmerge__engine-body b {
  display: block;
  font-size: 11.5px;
  color: var(--ink-900);
}

.van__prog {
  display: block;
  height: 4px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(44, 92, 158, 0.18);
  overflow: hidden;
}

.van__prog i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
}

.visual[data-visual="analysis"].is-active .van__prog i {
  animation: van-prog var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
  animation-fill-mode: both;
}

@keyframes van-prog {
  0% {
    width: 0;
  }
  4% {
    width: 10%;
  }
  31% {
    width: 82%;
  }
  33%,
  100% {
    width: 0;
  }
}

.vmerge__engine-pct {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
}

/* シーン内の行は、シーン表示中に順に現れる（毎周期）。
   待機中に一瞬見えないよう、既定は非表示とし fill-mode: both で待機中も保持する */
.van-in {
  opacity: 0;
}

.visual[data-visual="analysis"].is-active .van-in {
  animation: van-fade var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step) + var(--k, 0s));
  animation-fill-mode: both;
}

/* --- シーン③：経営分析結果のスライド6枚（上段3・下段3） --- */
.van__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.van__count {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-400);
}

.vanslides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vanslide {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
}

.vanslide__eyebrow {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-300);
}

.vanslide__title {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
}

.vanslide__chart {
  display: block;
  height: 34px;
  padding: 1px 0;
}

.vanslide__chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.vanslide__val {
  display: block;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
}

.vanslide__val span {
  display: block;
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 400;
  color: var(--ink-400);
}

/* スライド内のグラフ */
.vb {
  fill: var(--ink-100);
  transform-box: fill-box;
  transform-origin: bottom;
}

.vb--hot {
  fill: var(--accent);
}

.vb-h {
  fill: var(--ink-100);
  transform-box: fill-box;
  transform-origin: left;
}

.vb-h--dim {
  fill: var(--ink-200);
}

.vax {
  fill: var(--ink-400);
  font-family: sans-serif;
  font-size: 6.5px;
}

.vdial-bg {
  fill: none;
  stroke: var(--ink-100);
  stroke-width: 6;
}

.vdial-fg {
  fill: none;
  stroke: var(--teal);
  stroke-width: 6;
  stroke-linecap: round;
  /* r=11 の円周は約 69.1。72% なので残りを 19.3 にする */
  stroke-dasharray: 69.1;
  stroke-dashoffset: 19.3;
  transform: rotate(-90deg);
  transform-origin: 50px 17px;
}

.varea {
  fill: rgba(44, 92, 158, 0.14);
}

.vline {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="100" に合わせ、線を左から描き上げる */
  stroke-dasharray: 100;
}

/* グラフは毎周期、立ち上がりから描き直す */
.visual[data-visual="analysis"].is-active .vb {
  animation: van-grow-y var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
  animation-fill-mode: both;
}

.visual[data-visual="analysis"].is-active .vb-h {
  animation: van-grow-x var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
  animation-fill-mode: both;
}

.visual[data-visual="analysis"].is-active .vdial-fg {
  animation: van-dial var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
  animation-fill-mode: both;
}

.visual[data-visual="analysis"].is-active .vline {
  animation: van-line var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
  animation-fill-mode: both;
}

@keyframes van-grow-y {
  0%,
  4% {
    transform: scaleY(0.22);
  }
  12%,
  31% {
    transform: scaleY(1);
  }
  33%,
  100% {
    transform: scaleY(0.22);
  }
}

@keyframes van-grow-x {
  0%,
  4% {
    transform: scaleX(0.12);
  }
  12%,
  31% {
    transform: scaleX(1);
  }
  33%,
  100% {
    transform: scaleX(0.12);
  }
}

@keyframes van-dial {
  0%,
  4% {
    stroke-dashoffset: 69.1;
  }
  12%,
  31% {
    stroke-dashoffset: 19.3;
  }
  33%,
  100% {
    stroke-dashoffset: 69.1;
  }
}

@keyframes van-line {
  0%,
  4% {
    stroke-dashoffset: 100;
  }
  14%,
  31% {
    stroke-dashoffset: 0;
  }
  33%,
  100% {
    stroke-dashoffset: 100;
  }
}

/* シーン進行のインデックス */
.van__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--chalk);
}

.van__step {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-400);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.visual.is-active .van__step {
  animation: vtpl-step var(--scene-cycle) linear infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
}

.visual.is-active .van__step:first-child {
  animation-fill-mode: both;
}

/* template visual : ①PDFをドロップ → ②AIが分析・コーディング → ③テンプレート一覧 */
/* 3つのシーンを同じ枠に重ね、1つの周期で順に切り替える。
   --scene-count / --scene-step で周期と順序を制御する。 */
.vtpl {
  --scene-count: 3;
  --scene-step: 3.4s;
  --scene-cycle: calc(var(--scene-count) * var(--scene-step));
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}

/* アプリのウィンドウバー */
.vtpl__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--chalk);
}

.vtpl__dots {
  display: inline-flex;
  gap: 4px;
}

.vtpl__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-200);
}

.vtpl__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
}

.vtpl__badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink-800);
  color: var(--paper);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* シーンの重ね置き。高さは最も高いシーンに合わせて確保し、内容の切れを防ぐ */
.vtpl__views {
  display: grid;
  padding: 12px;
}

.vtpl__view {
  grid-area: 1 / 1;
  opacity: 0;
}

/* JSが動かない環境・アニメーション開始前はシーン①を表示しておく */
.vtpl__view:first-child {
  opacity: 1;
}

.visual.is-active .vtpl__view {
  animation: vtpl-scene var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
}

.visual.is-active .vtpl__view:first-child {
  animation-name: vtpl-scene-first;
  animation-fill-mode: both;
}

@keyframes vtpl-scene {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  2% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 1;
    transform: none;
  }
  33%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes vtpl-scene-first {
  0%,
  31% {
    opacity: 1;
    transform: none;
  }
  33%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* --- シーン①：PDFファイルをドロップする --- */
.vtpl__h {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-700);
}

.vtpl__types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.vtpl__type {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
}

.vtpl__type small {
  font-size: 9px;
  font-weight: 400;
  color: var(--ink-400);
}

.vtpl__type.is-on {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

/* ドラッグ中のPDFファイル：実際の月次レポートの表紙を模した縮小カバー */
.vpdf {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  width: 78px;
  height: 100px;
  padding: 7px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-900);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 0 10px 22px rgba(8, 23, 46, 0.24);
  overflow: hidden;
}

/* 表紙の右上にある淡い円 */
.vpdf::before {
  content: "";
  position: absolute;
  right: -14px;
  top: -12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e8ecf5;
}

.vpdf__eyebrow,
.vpdf__title,
.vpdf__bar {
  position: relative;
}

.vpdf__eyebrow {
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
}

.vpdf__title {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink-900);
}

.vpdf__bar {
  width: 16px;
  height: 2px;
  background: var(--blue);
}

/* 表紙下部のメタ情報カード（4分割の罫線を模す） */
.vpdf__meta {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.vpdf__meta i {
  height: 4px;
  border-radius: 1px;
  background: var(--ink-100);
}

/* ※2026-10（最終）：テンプレート機能シーン①のドラッグカードは、ご指示により
   縦型のダミー表紙（テキスト組み）から、添付の「サンプルクリニックレポート」
   （横型・1024×575）の実画像に差し替えました。
   .vpdf 本体はクライアント管理機能の .vpdf--sm が使い続けるため残し、
   ここでは横型の実画像用に上書きするだけにしています。 */
.vpdf--report {
  display: block;
  width: 104px;
  height: auto;
  aspect-ratio: 1024 / 575;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 10px 22px rgba(8, 23, 46, 0.28);
}

.vpdf--report::before {
  content: none;
}

.vpdf__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* シーン①のドラッグ演出は毎周期再生する */
.visual[data-visual="template"].is-active .vdnd__drag {
  animation: vtpl-drag var(--scene-cycle) var(--ease) infinite;
}

.visual[data-visual="template"].is-active .vdnd__zone {
  animation: vtpl-zone var(--scene-cycle) var(--ease) infinite;
}

.visual[data-visual="template"].is-active .vdnd__zone > * {
  animation: vtpl-dim var(--scene-cycle) var(--ease) infinite;
}

@keyframes vtpl-drag {
  0% {
    opacity: 0;
    transform: translate(-8px, -12px) scale(0.94);
  }
  3% {
    opacity: 1;
    transform: translate(-8px, -12px) scale(1);
  }
  8% {
    opacity: 1;
    transform: translate(2px, 10px) scale(0.98);
  }
  11%,
  100% {
    opacity: 0;
    transform: translate(12px, 26px) scale(0.86);
  }
}

@keyframes vtpl-zone {
  0%,
  2% {
    border-color: var(--ink-200);
    background: var(--chalk-2);
  }
  5%,
  9% {
    border-color: var(--blue);
    background: var(--blue-soft);
  }
  12%,
  100% {
    border-color: var(--ink-200);
    background: var(--chalk-2);
  }
}

@keyframes vtpl-dim {
  0%,
  2% {
    opacity: 1;
  }
  5%,
  9% {
    opacity: 0.32;
  }
  12%,
  100% {
    opacity: 1;
  }
}

/* --- シーン②：PDFを分析し、コーディングしてテンプレートに変換する ---
   解析結果は「左：抽出したレポートの表紙／右：コーディング内容と抽出項目」の
   2カラムで見せ、最下部に完了バナーを全幅で置く */
.vcode {
  display: grid;
  gap: 9px;
}

.vcode__split {
  display: grid;
  /* 左の表紙と右のコード＋チェックを並べる。
     コードは折り返すと読めなくなるため、1列あたり240pxを確保できない幅では
     自動的に1列（縦積み）へ切り替わる。子要素は2つなので、
     広い画面でも列が増えることはない */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 9px;
  align-items: stretch;
}

/* 左カラム：添付資料どおりティール（ペトロール）の面に、
   解析で読み取ったレポートの表紙を置く。
   右のコードパネル（墨）と面の色を分け、抽出結果と処理内容を見分けられるようにする。
   面の色はこの場面でしか使わないため、トークン化せず局所変数に持つ */
.vcode__cover {
  --vcode-cover: #175c7a;
  display: grid;
  place-items: center;
  padding: 12px;
  /* 右カラム（コード＋チェック）より低くなっても、面として成立する高さを確保する */
  min-height: 168px;
  border-radius: 9px;
  background: var(--vcode-cover);
}

/* ※2026-10（最終）：シーン②の「読み取ったレポートの表紙」も、ご指示により
   シーン①と同じサンプルクリニックレポート（横型）の実画像に差し替えました。
   縦型（A4相当の105×148）のダミー表紙は廃止し、横型の比率を保って表示します。 */
.vcover-card {
  display: block;
  width: 100%;
  max-width: 236px;
  height: auto;
  aspect-ratio: 1024 / 575;
  padding: 0;
  border-top: 0;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 10px 22px rgba(8, 23, 46, 0.3);
  overflow: hidden;
}

.vcover-card::before {
  content: none;
}

.vcover-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右カラム：コード（上）と抽出項目のチェック3行（下）を縦に積む */
.vcode__side {
  display: grid;
  align-content: start;
  gap: 9px;
}

.vcode__code {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--ink-900);
  color: #cfe0ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  line-height: 1.75;
  overflow: hidden;
}

.vcode__steps {
  display: grid;
  gap: 6px;
}

.vcode__steps li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-700);
}

.vcode__tick {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--paper);
  font-size: 9px;
}

/* 「テンプレート登録しました」の完了バナー */
.vcode__done {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 1px;
  padding: 9px 11px;
  border: 1px solid rgba(47, 167, 155, 0.42);
  border-radius: 9px;
  background: rgba(47, 167, 155, 0.1);
}

.vcode__done-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--paper);
  font-size: 12px;
}

.vcode__done b {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-900);
}

.vcode__done small {
  font-size: 9.5px;
  color: var(--ink-400);
}

/* シーン②の各行は、シーン表示中に順に現れる（毎周期）。
   待機時間中に一瞬だけ見えてしまうのを防ぐため、既定は非表示とし、
   fill-mode: both で 0% の状態（透明）を待機中も保持する */
.vtpl-in {
  opacity: 0;
}

.visual[data-visual="template"].is-active .vtpl-in {
  animation: vtpl-in var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step) + var(--k, 0s));
  animation-fill-mode: both;
}

@keyframes vtpl-in {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  4% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 1;
    transform: none;
  }
  33%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* --- シーン③：業種別・テーマ別のテンプレートが並ぶ --- */
.vtpl__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.vtpl__chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-400);
}

.vtpl__chip.is-on {
  border-color: var(--ink-800);
  background: var(--ink-800);
  color: var(--paper);
}

.vtpl__count {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-400);
}

.vtpl__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vtplcard {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
}

/* テンプレートの表紙（2026-10 最終：ご指示により、添付「サンプルクリニックレポート」の
   デザイン言語へ刷新しました。
   ・左＝深いペトロールの面（表紙のラベルと英字フッター）
   ・右＝生成りの面（明朝の見出しと金の細罫）
   ・文字（eyebrow / title / foot）とカード下のテキストは一切変更していません */
.vcover {
  position: relative;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fafaf7;
  color: #124956;
  box-shadow: inset 0 0 0 1px rgba(18, 73, 86, 0.12);
}

/* 左のペトロール面。色は業種・テーマ別の変数で差をつける。
   テクスチャ（--vcover-tex）は下地の上に重ねるため、
   background-image のカンマ区切りで合成する（background で上書きすると
   下地のグラデーションが消えてしまうため使わない） */
.vcover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38%;
  background-image: var(--vcover-tex, none),
    var(--vcover-panel, linear-gradient(160deg, #17505e 0%, #0d3743 100%));
}

/* 右の生成り面の上端に引く金の細罫 */
.vcover::after {
  content: "";
  position: absolute;
  left: 38%;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(201, 162, 75, 0.6);
}

.vcover > * {
  position: relative;
  z-index: 1;
}

/* 左面の上部：英字ラベル */
.vcover__eyebrow {
  grid-column: 1;
  grid-row: 1;
  padding: 7px 6px 0 8px;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: var(--vcover-eb, #c9a24b);
  opacity: 1;
}

/* 右面：明朝の見出し */
.vcover__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 2px 8px 0 9px;
  font-family: var(--serif);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: #124956;
}

/* 右面の見出し下の金の短罫 */
.vcover__bar {
  grid-column: 2;
  grid-row: 2;
  width: 18px;
  height: 2px;
  margin: 0 0 7px 9px;
  background: #c9a24b;
  opacity: 1;
}

/* 左面の下部：英字フッター */
.vcover__foot {
  grid-column: 1;
  grid-row: 2;
  padding: 0 6px 7px 8px;
  font-size: 4.5px;
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}

/* 業種・テーマ別の左面配色（全体はペトロール系で統一し、色相だけを変える） */
.vcover--teal {
  --vcover-panel: linear-gradient(160deg, #16574f 0%, #0c3b38 100%);
}

.vcover--gold {
  --vcover-panel: linear-gradient(160deg, #5a4a26 0%, #332a14 100%);
  --vcover-eb: #e6c588;
}

.vcover--accent {
  --vcover-panel: linear-gradient(160deg, #5f4a22 0%, #362a11 100%);
  --vcover-eb: #e6c588;
}

.vcover--blue {
  --vcover-panel: linear-gradient(160deg, #15496a 0%, #0b2d45 100%);
}

.vcover--graphite {
  --vcover-panel: linear-gradient(160deg, #2f3841 0%, #1a2027 100%);
}

/* 「low」は左面に淡い光量を加え、並べたときの単調さをなくす */
.vcover--low {
  --vcover-tex: radial-gradient(circle at 15% 115%, rgba(255, 255, 255, 0.14), transparent 62%);
}

/* 「diag」は左面に淡い斜線を重ねる（サンプルレポートの幾何モチーフに寄せる） */
.vcover--diag {
  --vcover-tex: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.07) 0 1px,
    transparent 1px 8px
  );
}

.vtplcard__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-900);
}

.vtplcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vtplcard__tag {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 8px;
  font-weight: 700;
}

.vtplcard__tag--ok {
  background: rgba(47, 167, 155, 0.14);
  color: var(--teal);
}

.vtplcard__meta {
  font-size: 8px;
  color: var(--ink-400);
}

/* シーン進行のインデックス */
.vtpl__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--chalk);
}

.vtpl__step {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink-400);
}

.visual.is-active .vtpl__step {
  animation: vtpl-step var(--scene-cycle) linear infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
}

.visual.is-active .vtpl__step:first-child {
  animation-fill-mode: both;
}

@keyframes vtpl-step {
  0%,
  31% {
    color: var(--paper);
    background: var(--ink-800);
  }
  33%,
  100% {
    color: var(--ink-400);
    background: var(--paper);
  }
}

/* client management visual */
.vchat {
  display: grid;
  gap: 10px;
}

.vbubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.visual.is-active .vbubble {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--d, 0s);
}

.vbubble--user {
  margin-left: auto;
  background: var(--ink-800);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}

.vbubble--ai {
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  box-shadow: 0 6px 20px rgba(8, 23, 46, 0.06);
}

/* client management visual : ①顧問先一覧 → ②顧問先ページ → ③チャット */
.vcli {
  --scene-count: 3;
  --scene-step: 3.4s;
  --scene-cycle: calc(var(--scene-count) * var(--scene-step));
  display: grid;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}

.vcli__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--chalk);
}

.vcli__dots {
  display: inline-flex;
  gap: 4px;
}

.vcli__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-200);
}

.vcli__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-700);
}

.vcli__badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink-800);
  color: var(--paper);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* 3つのシーンを同じ枠に重ねる（テンプレート機能と同じ仕組み） */
.vcli__views {
  display: grid;
  padding: 12px;
}

.vcli__view {
  grid-area: 1 / 1;
  opacity: 0;
}

.vcli__view:first-child {
  opacity: 1;
}

.visual.is-active .vcli__view {
  animation: vtpl-scene var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
}

.visual.is-active .vcli__view:first-child {
  animation-name: vtpl-scene-first;
  animation-fill-mode: both;
}

.vcli__h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-700);
}

/* 見出しとカード見出しのドット（.vpanel__head の dot と同じ意匠） */
.vcli__h .dot,
.vcli__card-h .dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.vcli__h .dot--blue,
.vcli__card-h .dot--blue {
  background: var(--blue);
}

.vcli__h .dot--teal,
.vcli__card-h .dot--teal {
  background: var(--teal);
}

/* --- シーン①：顧問先一覧からA社のバナーをクリックする --- */
.vcli__list {
  display: grid;
  gap: 7px;
}

.vcli__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

/* クリックされるバナー。枠と背景が反応して「開いた」ことを示す */
.visual[data-visual="client"].is-active .vcli__item--target {
  animation: vcli-pick var(--scene-cycle) var(--ease) infinite;
}

@keyframes vcli-pick {
  0%,
  6% {
    border-color: var(--line);
    background: var(--paper);
  }
  8%,
  31% {
    border-color: var(--blue);
    background: var(--blue-soft);
  }
  33%,
  100% {
    border-color: var(--line);
    background: var(--paper);
  }
}

/* クリックの波紋 */
.vcli__tap {
  position: absolute;
  right: 78px;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(44, 92, 158, 0.28);
  opacity: 0;
  pointer-events: none;
}

.visual[data-visual="client"].is-active .vcli__tap {
  animation: vcli-tap var(--scene-cycle) var(--ease) infinite;
}

@keyframes vcli-tap {
  0%,
  6% {
    opacity: 0;
    transform: translateY(-50%) scale(0.4);
  }
  8% {
    opacity: 0.55;
    transform: translateY(-50%) scale(1);
  }
  14%,
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(2.4);
  }
}

/* 操作カーソル */
.vcli__cursor {
  position: absolute;
  right: 70px;
  top: 50%;
  margin-top: -14px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(8, 23, 46, 0.3));
}

.visual[data-visual="client"].is-active .vcli__cursor {
  animation: vcli-cursor var(--scene-cycle) var(--ease) infinite;
}

/* シーン②のカーソルは、シーン②が現れてから動き出す */
.visual[data-visual="client"].is-active .vcli__cursor--chat {
  animation-delay: calc(var(--scene-step) + 0.55s);
}

@keyframes vcli-cursor {
  0% {
    opacity: 0;
    transform: translate(26px, 22px) scale(0.9);
  }
  3% {
    opacity: 1;
    transform: translate(26px, 22px) scale(1);
  }
  7% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  9% {
    opacity: 1;
    transform: translate(0, 0) scale(0.86);
  }
  11% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  19%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
}

.vcli__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.vcli__avatar--lg {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.vcli__avatar--teal {
  background: rgba(47, 167, 155, 0.14);
  color: var(--teal);
}

.vcli__body {
  flex: 1;
  min-width: 0;
}

.vcli__body strong {
  display: block;
  font-size: 12px;
}

.vcli__body span {
  font-size: 10px;
  color: var(--ink-400);
}

.vcli__flag {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.vcli__flag--ok {
  background: rgba(47, 167, 155, 0.12);
  color: var(--teal);
}

.vcli__flag--mid {
  background: var(--chalk-2);
  color: var(--ink-500);
}

/* --- シーン②：顧問先ページ（ボイスサマリーと月次レポート） --- */
.vcli__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--chalk-2);
}

.vcli__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.vcli__card {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.vcli__card-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-700);
}

.vcli__card-m {
  font-size: 9px;
  color: var(--ink-400);
}

.vcli__card-t {
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-500);
}

.vcli__card-tag {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(47, 167, 155, 0.12);
  color: var(--teal);
  font-size: 8.5px;
  font-weight: 700;
}

/* 月次レポートの表紙（テンプレート機能と同じ意匠の縮小版） */
.vpdf--sm {
  width: 60px;
  height: 78px;
  padding: 6px;
}

.vpdf--sm .vpdf__title {
  font-size: 9px;
}

/* チャットのバナー */
.vcli__chatbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid var(--blue);
  border-radius: 10px;
  background: var(--blue-soft);
}

.vcli__chatbar-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ink-800);
  color: var(--paper);
  font-size: 9.5px;
  font-weight: 700;
}

.vcli__chatbar-body {
  flex: 1;
  min-width: 0;
}

.vcli__chatbar-body strong {
  display: block;
  font-size: 11.5px;
  color: var(--ink-900);
}

.vcli__chatbar-body span {
  font-size: 9.5px;
  color: var(--ink-500);
}

.vcli__chatbar-btn {
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
}

.vcli__cursor--chat {
  right: 58px;
}

/* --- シーン③：チャットで資金繰りの変化を確認する --- */
.vcli__msgs {
  display: grid;
  gap: 8px;
}

.vcli__msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 13px;
  font-size: 11.5px;
  line-height: 1.65;
}

.vcli__msg--user {
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: var(--ink-800);
  color: var(--paper);
}

.vcli__msg--ai {
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  background: var(--paper);
  color: var(--ink-700);
  box-shadow: 0 6px 20px rgba(8, 23, 46, 0.06);
}

/* シーン内の行は、シーン表示中に順に現れる（毎周期） */
.vcli-in {
  opacity: 0;
}

.visual[data-visual="client"].is-active .vcli-in {
  animation: vcli-in var(--scene-cycle) var(--ease) infinite;
  animation-delay: calc(var(--i) * var(--scene-step) + var(--k, 0s));
  animation-fill-mode: both;
}

@keyframes vcli-in {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  4% {
    opacity: 1;
    transform: none;
  }
  31% {
    opacity: 1;
    transform: none;
  }
  33%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* シーン進行のインデックス */
.vcli__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--chalk);
}

.vcli__step {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-400);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.visual.is-active .vcli__step {
  animation: vcli-step var(--scene-cycle) linear infinite;
  animation-delay: calc(var(--i) * var(--scene-step));
}

.visual.is-active .vcli__step:first-child {
  animation-fill-mode: both;
}

@keyframes vcli-step {
  0%,
  31% {
    color: var(--paper);
    background: var(--ink-800);
  }
  33%,
  100% {
    color: var(--ink-400);
    background: var(--paper);
  }
}

/* upsell visual : チャット指示 → アタックリストの生成 */
.vupsell {
  display: grid;
  gap: 8px;
}

.vupsell__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.visual[data-visual="upsell"].is-active .vupsell__row {
  animation: vupsell-in 0.45s var(--ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes vupsell-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.vupsell__rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink-800);
}

.vupsell__body {
  flex: 1;
  min-width: 0;
}

.vupsell__body strong {
  display: block;
  font-size: 12px;
  color: var(--ink-900);
}

.vupsell__body span {
  font-size: 10px;
  color: var(--ink-400);
}

.vupsell__tag {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
}

.vupsell__tag--mid {
  color: var(--ink-500);
  background: var(--chalk-2);
}

/* 生成される成果物（提案のポイント／トークスクリプト／想定効果／提案書） */
.visual[data-visual="upsell"].is-active .vchip {
  animation: vupsell-in 0.45s var(--ease) both;
  animation-delay: var(--d, 0s);
}

/* このセクションのチャットは、JSが無くても内容が見えるように既定で表示し、
   .is-active のときだけアニメーションで出す */
.visual[data-visual="upsell"] .vbubble {
  opacity: 1;
  transform: none;
}

.visual[data-visual="upsell"].is-active .vbubble {
  animation: vupsell-in 0.45s var(--ease) both;
  animation-delay: var(--d, 0s);
}

.vupsell__tag {
  white-space: nowrap;
}

/* ---------- Challenges（課題提起 → 解決策 → CV導線） ----------
   ご提供いただいた2枚の資料を材料に、CVRを高める構成へ再編集したセクション。
   ①統計データで「経営者ニーズと会計事務所のサポート実態のギャップ」を自覚させ、
   ②「経営支援に応えられていない5つの理由」で痛みを具体化し、
   ③Samurai Brainで解決できることを示して資料請求・無料デモへ繋ぐ
   ※各カードの統計値は公的統計・公表調査の実数値を引用 */
.challenges {
  padding-block: 88px 96px;
  background: var(--paper);
}

.challenges__head {
  text-align: center;
}

/* ※2026-10：旧アイブロー（ISSUES）とリード文は DOM から削除したため、
   .challenges__eyebrow / .challenges__lead のスタイルも削除しました */

/* --- データで示すファクト（顧問先は経営支援を求めている） ---
   2つの円グラフ（期待＝65%／実態＝24%）を左右に並べる。
   数値は公表統計の実数値のみ。出典はコンテンツ最下部に小さく表記する。
   ※2026-10 のご指示により、外側パネルの濃い罫線と FACT 見出しを廃し、
     淡い地のパネルに白いカード2枚を載せる構成に変更した（添付デザインに準拠） */
.needproof {
  margin-top: 48px;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--chalk);
}

/* ---------- 円グラフ（期待と実態） ----------
   円弧は SVG の stroke-dasharray で描く。pathLength="100" を指定しているため
   「--pct」をそのまま％として扱える（65 → 円周の65%）。
   .is-inview が付いた時点で 0 から --pct へ伸ばし、動きを付ける。 */
.ringproof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ringcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 34px 32px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-800);
  border-radius: 8px;
  /* 白い地に白いカードを置くため、影はごく淡く敷く */
  box-shadow: 0 4px 16px rgba(8, 23, 46, 0.04);
  text-align: center;
}

/* 実態側は上端罫を真鍮にして、「届いていない」側であることを色で示す */
.ringcard--real {
  border-top-color: var(--accent-2);
}

.ringcard__cap {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-400);
}

.ringcard__chart {
  position: relative;
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
}

.ring {
  width: 100%;
  height: 100%;
  /* 12時方向から時計回りに描く */
  transform: rotate(-90deg);
  overflow: visible;
}

.ring__bg {
  fill: none;
  stroke: var(--chalk-2);
  stroke-width: 12;
}

.ring__bar {
  fill: none;
  stroke: var(--ink-800);
  stroke-width: 12;
  stroke-linecap: round;
  /* 円弧の長さ＝100（pathLength）なので、dasharray を％としてそのまま使える。
     既定値を最終状態（＝実数値）にしておくことで、JSやスクロール位置に
     関係なく必ず正しい割合で表示される（数値が欠ける事故を防ぐ） */
  stroke-dasharray: var(--pct) 100;
}

.ringcard--real .ring__bar {
  stroke: var(--accent-2);
}

/* 画面に入ったら 0 から実数値まで伸ばす。基準は最終状態のままなので、
   アニメーションが走らない環境でも実数値が表示される */
.needproof.is-inview .ring__bar {
  animation: ringDraw 1.1s var(--ease) both;
}

@keyframes ringDraw {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: var(--pct) 100;
  }
}

/* 動きを減らす設定の環境ではアニメーションしない */
@media (prefers-reduced-motion: reduce) {
  .needproof.is-inview .ring__bar {
    animation: none;
  }
}

/* 中央の数値。円弧の上に重ねる。
   ※ align-items:baseline にすると1行目がコンテナ上端に寄り、円弧の上部と
     重なってしまうため、上下とも中央（center）で揃える。
   ※2026-10-27：円グラフの「24」の「4」が読みづらいとのご指摘を受け、
     書体を Didone（Bodoni Moda）から明朝（Shippori Mincho）600 に変更しました。
     Didone は「4」の斜線が構造上どうしても極細になり、44px でも開口部が
     細く抜けて「1」寄りに見えます。通し番号（.challenge-card__num 等）と
     同じ明朝に揃えることで、サイト全体の数字の読み味も統一されます。
     サイズ・色は従来のまま（数値の存在感は変えていません）。 */
.ringcard__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 600;
  /* 明朝は Didone より字幅が広いため、わずかな詰めを解いて数字の間隔を確保 */
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink-900);
}

.ringcard--real .ringcard__value {
  color: var(--ink-700);
}

.ringcard__value small {
  margin-left: 2px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
}

/* カード見出しは明朝。セクション見出しと同じ書体で揃える */
.ringcard__title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.ringcard__desc {
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-500);
}

.ringcard__desc b {
  font-weight: 700;
  color: var(--ink-900);
}

/* 出典はコンテンツ最下部に小さく揃える（罫線は引かず控えめに） */
.needproof__source {
  margin-top: 18px;
  font-size: 10.5px;
  line-height: 1.8;
  text-align: right;
  color: var(--ink-300);
}

/* --- ② 5つの理由（見出し＋カード） --- */
.challenges__issues {
  margin-top: 96px;
}

.challenges__issues-head {
  text-align: center;
}

.challenges__issues-title {
  /* セクション見出し（h2 = .section-title）と完全に同じ文字サイズに揃える。
     値は .section-title と同一（50px ／ @1024:40px ／ @768:30px）で、
     responsive.css 側も .section-title と同じブレークポイントで上書きする。
     ※cqi 等で幅に応じて自動縮小すると h2 とサイズがずれるため使わない。
     text-wrap:balance で、改行する場合も行長が揃うようにする */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.32;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.challenges__issues-title em {
  font-style: normal;
  color: var(--accent);
}

.challenges__issues-lead {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-400);
}

.challenge-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.challenge-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 22px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  /* 上端の紺ライン（資料の見出し罫を踏襲） */
  border-top: 3px solid var(--ink-800);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* 経営支援がうまくいかない4つの理由の通し番号 01〜04
   ※2026-10-27：Didone（Bodoni Moda）を 15px で組むと「4」の細い斜線が潰れ、
     「01」と誤読されるというご指摘をいただきました。Didone は --didone の定義どおり
     44〜46px の「数字を主役にする」箇所（価格・実績値）専用とし、
     小さい通し番号は明朝（Shippori Mincho）600 に統一します。
     同サイトの .patent__num と同じ組み方で、数字の開口部が閉じません。 */
.challenge-card__num {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}

.challenge-card__title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* 強調ボックス（資料の薄グレー地＋濃紺文字） */
.challenge-card__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--chalk);
}

.challenge-card__stat span {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-500);
}

.challenge-card__stat strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
}

.challenge-card__desc {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-500);
}

/* 出典はカード最下部に小さく揃える（高さの不揃いを解消） */
.challenge-card__source {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-300);
}

/* 原資料の一括表記（ブロック下端） */
.challenges__issues-source {
  margin-top: 20px;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--ink-300);
}

/* ※2026-10（最終）：5つの課題と導入事例を橋渡しする一文
   （.challenges__origin）はご指示により削除しました。
   併せて .challenges__origin / b / -link のスタイルも撤去しています */

/* --- ① 経営者の悩みと、会計事務所のサポート実態 --- */
/* 見出しはセクション直下の h2＋サブタイトルに統合したため、
   このブロックは統計グラフ2本＋結論帯のみで構成する */
.gap {
  margin-top: 0;
}

.gap__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.gap-chart {
  padding: 26px 24px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.gap-chart__title {
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

.gap-bars {
  display: grid;
  /* 赤枠（outline-offset 4px）が隣の行に触れないよう、行間に余裕を取る */
  gap: 16px;
}

/* ラベル｜バー の2列。左右のグラフでバーの描画幅を揃える。
   原資料に数値の印字がないため、数値は棒の長さで示し数値は捏造しない */
.gap-bar {
  display: grid;
  grid-template-columns: var(--gap-label) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}

.gap-bar__label {
  color: var(--ink-700);
  line-height: 1.4;
  /* 「同業他社の成功/失敗事例」「業界分析・他社事例提供」を1行で表示する */
  white-space: nowrap;
}

.gap-bar__track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  /* 20%刻みの目盛り線 */
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0 1px,
    transparent 1px 20%
  );
}

.gap-bar__fill {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ink-900), var(--ink-700));
}

/* 提供サービス側は彩度を落とし、「ニーズに届いていない」印象を作る */
.gap-chart--support .gap-bar__fill {
  background: linear-gradient(90deg, var(--ink-400), var(--ink-300));
}

/* ------------------------------------------------------------------
   ギャップの強調（赤枠・アニメーション）
   左右のグラフで「同じテーマ」を赤枠で囲み、テーマの対応を示す。
   outline を使うためレイアウト（バーの描画幅）はずれない。
   ※グラフ内に赤い帯は重ねない（行の高さを揃えて棒を読み比べやすくするため）。
     提供できていない差分は早見パネル（.gapsum__lack）に集約している。
   ------------------------------------------------------------------ */
/* 左右で対応する行に同じ番号（①②③）を振り、テーマの対応を明示する。
   カウンタはグラフ（figure）ごとにリセットされるため、左が①②③・右も①②③となる */
.gap-chart {
  /* ラベル列の幅。最長の「同業他社の成功/失敗事例」は番号バッジ込みで実測165pxのため、
     折り返さないよう余裕を持たせる。.gap-bar と .gap-chart__axis で同じ値を使い、
     目盛りとバーの開始位置を一致させる */
  --gap-label: 184px;
  counter-reset: gap-pair;
}

.gap-bar.is-gap {
  position: relative;
  counter-increment: gap-pair;
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.gap-bar.is-gap .gap-bar__label::before {
  content: counter(gap-pair);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  vertical-align: 1px;
}

/* 赤枠の行はラベルも赤くして、ひと目で「ここが問題」と分かるようにする */
.gap-bar.is-gap .gap-bar__label {
  color: var(--accent);
  font-weight: 700;
}

/* グラフ内の注記（赤枠の凡例／グレーの棒の説明） */
.gap-chart__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-500);
}

/* 注記の見出し記号。既定は「赤枠」を示す赤い四角の枠 */
.gap-chart__note-key {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 2px solid var(--accent);
  border-radius: 4px;
}

/* 「グレーの棒」を説明する注記用。棒そのものと同じ見た目にする */
.gap-chart__note-key--grey {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ink-400), var(--ink-300));
}

/* 棒は画面内に入った時点で 0 から実測値まで伸びる（--v が最終値）。
   アニメーションを使わない環境・JS無効時は CSS 既定の width で最終形を表示する */
@keyframes gapBarGrow {
  from {
    width: 0;
  }
}

@keyframes gapRingIn {
  from {
    outline-color: transparent;
  }
}

.gap-chart.is-inview .gap-bar__fill {
  animation: gapBarGrow 0.6s var(--ease) both;
}

/* 行ごとに少しずつ遅らせて、上から順に伸びていくように見せる */
.gap-chart.is-inview .gap-bar:nth-child(2) .gap-bar__fill {
  animation-delay: 0.05s;
}
.gap-chart.is-inview .gap-bar:nth-child(3) .gap-bar__fill {
  animation-delay: 0.1s;
}
.gap-chart.is-inview .gap-bar:nth-child(4) .gap-bar__fill {
  animation-delay: 0.15s;
}
.gap-chart.is-inview .gap-bar:nth-child(5) .gap-bar__fill {
  animation-delay: 0.2s;
}
.gap-chart.is-inview .gap-bar:nth-child(6) .gap-bar__fill {
  animation-delay: 0.25s;
}
.gap-chart.is-inview .gap-bar:nth-child(7) .gap-bar__fill {
  animation-delay: 0.3s;
}

/* 棒が伸びきったあとに赤枠が点灯する */
.gap-chart.is-inview .gap-bar.is-gap {
  animation: gapRingIn 0.5s var(--ease) 0.5s both;
}

/* アニメーションを抑制する環境では伸長・点灯を行わず、最終形を静的に表示する */
@media (prefers-reduced-motion: reduce) {
  .gap-chart.is-inview .gap-bar__fill,
  .gap-chart.is-inview .gap-bar.is-gap {
    animation: none;
  }
}

.gap-chart__axis {
  display: grid;
  grid-template-columns: var(--gap-label) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.gap-chart__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-300);
}

/* ---------- ギャップ早見（対になる3テーマだけを同じ縮尺で並べる） ----------
   7行×2本のグラフを見比べなくても、「どこがどれだけ足りないか」が
   ひと目で分かるように、提供できている範囲（グレー）と
   届いていない範囲（赤い斜線＝ギャップ）を1本のバーにまとめて表示する。
   値は左右のグラフと同じ実測値を使い、新たな数値は作らない。 */
.gapsum {
  /* ラベル列の幅（.gapsum__row / .gapsum__axis で共用）。
     最長の「同業他社の成功/失敗事例＋に応える『業界分析・他社事例提供』」は
     番号バッジ込みで実測231pxのため、折り返さないよう余裕を持たせる */
  --gapsum-label: 300px;
  margin-top: 22px;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  /* 上端のアクセント線。以前は赤（--accent）だったが、パネル自体を
     強く主張させず、中のギャップ帯を目立たせるためグレーにする */
  border-top: 3px solid var(--ink-300);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--paper) 0%, var(--chalk) 100%);
  box-shadow: var(--shadow-card);
}

.gapsum__head {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
  text-wrap: balance;
}

.gapsum__lead {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-500);
}

.gapsum__lead b {
  color: var(--ink-900);
}

.gapsum__list {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}

/* ラベル｜バー の2列（目盛り行と列幅を揃え、縦に一直線に並べる）
   幅は .gapsum の変数で管理し、狭い画面では responsive.css 側で詰める */
.gapsum__row,
.gapsum__axis {
  display: grid;
  grid-template-columns: var(--gapsum-label) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.gapsum__label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-500);
}

/* 左右のグラフの赤枠と対応する番号 */
.gapsum__label i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent);
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
}

.gapsum__label-text {
  display: block;
  min-width: 0;
}

.gapsum__label-text b {
  display: block;
  font-size: 13px;
  color: var(--ink-900);
}

.gapsum__label-text span {
  display: block;
}

.gapsum__track {
  position: relative;
  display: block;
  height: 22px;
  border-radius: 999px;
  background-color: var(--chalk-2);
  /* 20%刻みの目盛り線（左右のグラフと同じ縮尺） */
  background-image: repeating-linear-gradient(
    to right,
    rgba(15, 37, 71, 0.12) 0 1px,
    transparent 1px 20%
  );
}

/* 提供できている範囲＝左右グラフの「会計事務所のサポート」と同じグレー */
.gapsum__have {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--v, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ink-400), var(--ink-300));
}

/* 届いていない範囲＝提供できている範囲の終端から、経営者ニーズの水準までの差分。
   左右のグラフから赤い帯を外したため、「足りていない領域」を示すのは
   この1本のバー（3テーマ分）だけになる。
   両端は四角ではなく丸みを持たせ、右端は濃い赤の縁で終端を示す */
.gapsum__lack {
  position: absolute;
  left: var(--from, 0%);
  top: 0;
  bottom: 0;
  width: calc(var(--need, 0%) - var(--from, 0%));
  border-radius: 999px;
  border-right: 2px solid var(--accent);
  background: repeating-linear-gradient(
    135deg,
    rgba(138, 94, 27, 0.55) 0 5px,
    rgba(138, 94, 27, 0.3) 5px 10px
  );
}

.gapsum__axis {
  margin-top: 10px;
}

/* 目盛り行の左カラム（ラベル用の空セル） */
.gapsum__axis > span:first-child {
  align-self: stretch;
}

.gapsum__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-500);
}

.gapsum__key {
  display: inline-block;
  width: 22px;
  height: 12px;
  border-radius: 999px;
  vertical-align: -1px;
}

.gapsum__key--have {
  background: linear-gradient(90deg, var(--ink-400), var(--ink-300));
}

.gapsum__key--lack {
  border-right: 2px solid var(--accent);
  background: repeating-linear-gradient(
    135deg,
    rgba(138, 94, 27, 0.55) 0 4px,
    rgba(138, 94, 27, 0.3) 4px 8px
  );
}

/* 画面内に入ったら、提供できている範囲 → 届いていない範囲（ギャップ）の順に伸びる */
@keyframes gapsumHaveGrow {
  from {
    width: 0;
  }
}

@keyframes gapsumLackGrow {
  from {
    width: 0;
  }
}

.gapsum.is-inview .gapsum__have {
  animation: gapsumHaveGrow 0.7s var(--ease) both;
}

.gapsum.is-inview .gapsum__lack {
  animation: gapsumLackGrow 0.8s var(--ease) 0.55s both;
}

/* 行ごとに少しずつ遅らせて、上から順に伸びていくように見せる */
.gapsum.is-inview .gapsum__list > :nth-child(2) .gapsum__have {
  animation-delay: 0.12s;
}
.gapsum.is-inview .gapsum__list > :nth-child(2) .gapsum__lack {
  animation-delay: 0.67s;
}
.gapsum.is-inview .gapsum__list > :nth-child(3) .gapsum__have {
  animation-delay: 0.24s;
}
.gapsum.is-inview .gapsum__list > :nth-child(3) .gapsum__lack {
  animation-delay: 0.79s;
}

/* アニメーションを抑制する環境では伸長させず、最終形を静的に表示する */
@media (prefers-reduced-motion: reduce) {
  .gapsum.is-inview .gapsum__have,
  .gapsum.is-inview .gapsum__lack {
    animation: none;
  }
}

/* 結論の帯（紺地に白文字）— 「自分ごと化」を促す */
.gap__callout {
  margin-top: 30px;
  padding: 22px 28px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--ink-900), var(--ink-700));
  color: var(--paper);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* 「ギャップ」を結論の帯の先頭にバッジで明示する */
.gap__callout-tag {
  display: inline-block;
  margin-right: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--paper);
  vertical-align: middle;
}

.gap__source {
  margin-top: 12px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-300);
  text-align: right;
}

/* --- ③ 解決策の提示＋CV導線 --- */
.challenges__cta {
  margin-top: 96px;
  padding: 54px 40px 58px;
  border-radius: var(--radius);
  background: linear-gradient(140deg, var(--ink-900) 0%, #123059 100%);
  color: var(--paper);
  text-align: center;
}

/* ※2026-10（最終）：ご指示によりアイブロー「SOLUTION」をHTMLから削除したため、
   .challenges__cta-eyebrow のスタイルも撤去しました。
   タイトルはアイブローが無くなったぶん、上マージンを 0 にして余白を詰めています */
.challenges__cta-title {
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 3vw, 38px);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.challenges__cta-title em {
  font-style: normal;
  color: var(--accent-2);
}

.challenges__cta-lead {
  max-width: 46em;
  margin: 20px auto 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}

.challenges__cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* ※2026-10（最終）：CVボタン統一により、このブロックの副次ボタンは
   「活用レポートを読む」（.challenges__cta-sub）から「資料請求」
   （.btn--outline-light）に変わったため、専用の上書きは撤去しました */

/* ---------- Video ---------- */
.video {
  padding-block: 72px 80px;
  background: var(--chalk-2);
}

.video__title {
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 46px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink-200);
}

.video__title em {
  font-style: normal;
  color: var(--accent);
}

.video__content {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.video__wrapper {
  width: 100%;
  max-width: 62%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.video__aspect {
  aspect-ratio: 16 / 9;
}

.video__aspect iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* 動画プレースホルダー（実運用時に iframe へ差し替え） */
.video__placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 14px;
  background: linear-gradient(130deg, var(--ink-900) 0%, #1a3668 58%, #274b83 100%);
  color: var(--paper);
  text-align: center;
  padding: 24px;
}

.video__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 22%, rgba(201, 162, 75, 0.3), transparent 52%);
  pointer-events: none;
}

.video__placeholder > * {
  position: relative;
  z-index: 1;
}

.video__placeholder p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 30em;
}

.video__placeholder strong {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 500;
}

.video__play {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.34);
  display: grid;
  place-items: center;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.video__play:hover {
  background: var(--accent);
  transform: scale(1.06);
}

.video__play svg {
  width: 20px;
  height: auto;
  margin-left: 3px;
}

/* ---------- Usecase / seminar / download ---------- */
.usecase {
  background: var(--chalk);
  padding-block: 80px;
}

.usecase__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}

.usecase__head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 46px);
}

.usecase__head h2 em {
  font-style: normal;
  color: var(--accent);
}

.usecase__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.usecase-card {
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.usecase-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ink-700), var(--ink-900));
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 16px;
}

.usecase-card:nth-child(2) .usecase-card__thumb {
  background: linear-gradient(135deg, #274b83, var(--ink-800));
}

.usecase-card:nth-child(3) .usecase-card__thumb {
  background: linear-gradient(135deg, #7a5a22, #2b1c05);
}

.usecase-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.usecase-card__tag {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--chalk-2);
  color: var(--ink-500);
  width: fit-content;
}

.usecase-card__company {
  font-size: 15px;
  font-weight: 700;
}

.usecase-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  flex: 1;
}

.usecase-card__more {
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* columns: seminar + download */
.columns {
  padding-block: 80px;
}

.columns__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
}

.column-block h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 40px);
  margin-bottom: 28px;
}

.mini-list {
  display: grid;
  gap: 24px;
}

.mini-item a {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.2s var(--ease);
}

.mini-item:last-child a {
  border-bottom: 0;
  padding-bottom: 0;
}

.mini-item a:hover {
  opacity: 0.72;
}

.mini-item__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ink-800), var(--blue));
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 8px;
}

.mini-item:nth-child(2n) .mini-item__thumb {
  background: linear-gradient(135deg, var(--accent), #4a3312);
}

.mini-item__body {
  display: grid;
  gap: 10px;
  align-content: start;
}

.mini-item__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.mini-item__tag {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--chalk-2);
  color: var(--ink-500);
  width: fit-content;
}

.mini-item__date {
  font-size: 13px;
  color: var(--ink-400);
}

.mini-item__more {
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--accent);
}

.column-block__action {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

/* ---------- News list ---------- */
.news-list {
  /* 下余白は料金プランの上余白と合わせて「セクション間の空白」を作る。
     当初は下 80px ＋ プラン上 80px ＝ 160px あったため、
     ユーザー指示により半分（40px ＋ 40px ＝ 80px）へ縮小した */
  padding-block: 72px 40px;
}

.news-list__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
}

.news-list h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
}

.news-list__items {
  display: grid;
}

.news-item {
  border-bottom: 1px solid var(--line);
}

.news-item:first-child {
  border-top: 1px solid var(--line);
}

.news-item a {
  display: grid;
  gap: 8px;
  padding-block: 22px;
  transition: opacity 0.2s var(--ease);
}

.news-item a:hover {
  opacity: 0.72;
}

.news-item time {
  font-size: 14px;
  color: var(--ink-400);
}

.news-item__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.news-item__row p {
  flex: 1;
  font-size: 15px;
  line-height: 1.7;
}

.news-item__arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper);
  display: grid;
  place-items: center;
}

.news-item__arrow svg {
  width: 10px;
  height: auto;
}

/* ※2026-10（最終）：ご指示により「お知らせ一覧」バナーをHTMLから削除したため、
   .news-list__action のスタイルも撤去しました */

/* ---------- Statement（開発元の宣言） ----------
   添付デザインに合わせ、明朝の大きな見出し（1行目＝紺／2行目＝赤）と
   中央寄せのゴシック体リード文だけで構成し、上下に余白を大きく取る */
.statement {
  padding-block: 92px 96px;
  background: var(--paper);
}

/* 添付デザインの赤枠：見出しの上に開発元ロゴ（Authense）を中央配置 */
.statement__logo {
  margin-bottom: 46px;
  text-align: center;
}

.statement__logo img {
  display: inline-block;
  width: 290px;
  height: auto;
}

.statement__title {
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 4.2vw, 46px);
  line-height: 1.34;
  letter-spacing: 0.01em;
  color: var(--ink-900);
}

.statement__title em {
  /* 2行目（真鍮色）は必ず改行して独立した行にする */
  display: block;
  font-style: normal;
  color: var(--accent);
}

/* 「Samurai Brain」の途中で折り返さない */
.statement__nowrap {
  white-space: nowrap;
}

.statement__lead {
  /* 見出し幅のおよそ6割に収め、2行で読ませる */
  max-width: 680px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-500);
}

/* ---------- Security（情報管理の安心） ----------
   会計事務所がLLM活用で立ち止まる「情報管理の不安」に答えるセクション。
   ※具体的なシステム構成・委託先・保管地域・処理手順は書かない。
     「どういう前提で預けられるか」という方針だけを示し、
     詳細は個別説明へ誘導する（模倣防止のため） */
.security {
  padding-block: 92px 96px;
  background: var(--chalk);
}

.security__head {
  text-align: center;
}

/* ※2026-10（最終）：アイブロー（SECURITY & GOVERNANCE）を削除したため、
   .security__eyebrow のスタイルも撤去しました */

/* リード文は横幅を抑え、不安→設計方針の流れが1続きで読めるようにする */
.security__lead {
  max-width: 46em;
  margin-inline: auto;
}

/* --- 4つの方針 --- */
.security__pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

.security-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  /* 課題カードと同じ「上端の紺ライン」で、セクションの意匠を揃える */
  border-top: 3px solid var(--ink-800);
  border-radius: 3px;
}

/* 通し番号は右上に小さく置く
   （アイコンバッジを廃止したため、1行目の見出しと横に並ぶ位置に合わせる） */
.security-card__num {
  position: absolute;
  right: 24px;
  top: 30px;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-300);
}

/* 見出し右側に番号の居場所を確保し、長い見出しが番号に重ならないようにする */
.security-card__title {
  padding-right: 34px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-900);
}

.security-card__desc {
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--ink-500);
}

/* --- 所長の視点（このセクションの結論） ---
   直前のカード群（白）と差をつけるため、証書と同じ濃紺の面にする */
.security__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 48px;
  margin-top: 20px;
  padding: 46px 48px;
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 3px;
  background: linear-gradient(140deg, #0b1d3a 0%, #0f2547 52%, #16305c 100%);
  color: var(--paper);
}

.security__panel-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--accent-2);
}

.security__panel-title {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.security__panel-text {
  margin-top: 18px;
  font-size: 13px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.7);
}

/* リストは行頭に短い金罫を置き、証書の「条項」のように見せる */
.security__panel-list {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 0;
  list-style: none;
}

.security__panel-list li {
  padding: 16px 0 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(201, 162, 75, 0.28);
  font-size: 12.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.6);
}

.security__panel-list li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.security__panel-list span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
}

/* --- 注記とCV導線 --- */
.security__foot {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin-top: 40px;
  text-align: center;
}

/* 具体的な内容を書かない代わりに、個別説明で出すことを明示する */
.security__note {
  max-width: 46em;
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-400);
}

.security__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---------- Patent（特許出願済の訴求） ----------
   直前が紺の Message、直後が白の Challenges のため、
   淡い紙の上に「白い証書」を1枚置く構成にして、紺の面の連続を避ける。
   （Message と同系の紺を敷くと面が連結して見えるため、ここは明るい紙面にする）
   金の細罫だけで格調を作り、彩度の高い色は使わない */
.patent {
  padding-block: 92px;
  /* 紺の Message と白の Challenges のあいだに、暖色の淡い帯を1本だけ置く。
     地を一段深く（--chalk-2）することで、白い証書の面が浮き上がり、
     同系の --chalk を使う #security とも重複しない */
  background: var(--chalk-2);
}

/* 証書の面。内側にも細い金罫を引き、二重罫の額装に見せる */
.patent__panel {
  position: relative;
  padding: 60px 56px 58px;
  border: 1px solid rgba(201, 162, 75, 0.55);
  border-radius: 2px;
  background: linear-gradient(168deg, #fffdf9 0%, #fdfaf2 52%, #f8f2e4 100%);
  box-shadow: 0 18px 40px -28px rgba(8, 23, 46, 0.28);
  text-align: center;
}

/* 内側の金罫（外枠から12px内側に引く） */
.patent__panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 162, 75, 0.28);
  border-radius: 1px;
  pointer-events: none;
}

/* ※2026-10（最終）：アイブロー（INTELLECTUAL PROPERTY）を削除したため、
   .patent__eyebrow のスタイルも撤去しました */

.patent__title {
  /* 2026-10（最終）：アイブロー削除に伴い、見出しが証書面の第1要素に
     なったため、アイブローとの間隔用だった margin-top: 20px を 0 に戻した
     （上余白は .patent__panel の padding-top: 60px 側で確保する） */
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.38;
  letter-spacing: 0.01em;
  color: var(--ink-900);
}

.patent__title em {
  font-style: normal;
  color: var(--accent);
}

/* 見出し下の金罫（両端を透明にして中央だけ発光させる） */
.patent__rule {
  display: block;
  width: 88px;
  height: 1px;
  margin: 30px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
}

.patent__lead {
  max-width: 640px;
  margin: 28px auto 0;
  font-size: 14.5px;
  line-height: 2.05;
  color: var(--ink-500);
}

/* 3項目：細い金罫で区切り、証書の「条項」のように並べる */
.patent__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.patent__item {
  padding: 4px 34px;
  border-left: 1px solid rgba(201, 162, 75, 0.32);
}

/* 最初の項目の左罫は不要（欄外の罫に見えてしまうため） */
.patent__item:first-child {
  border-left: 0;
  padding-left: 6px;
}

.patent__item:last-child {
  padding-right: 6px;
}

.patent__num {
  display: block;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.patent__item h3 {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

.patent__item p {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--ink-500);
}

/* 注記：出願と登録の違いを明確にする（景表法・誤認防止のため） */
.patent__note {
  max-width: 640px;
  margin: 44px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.8;
  color: var(--ink-400);
}

/* ---------- Message（開発会社からのメッセージ） ----------
   紺のダークトーンで「高級感」を出し、左に本文・右に代表写真を配置
   （本文を先に読ませ、人物写真で権威づけする順序） */
.message {
  padding-block: 96px 104px;
  background: linear-gradient(168deg, var(--ink-900) 0%, #0b1d3a 48%, #123059 100%);
  color: var(--paper);
}

.message__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-align: center;
}

.message__title {
  margin-top: 16px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.message__title em {
  font-style: normal;
  color: var(--accent-2);
}

/* 見出し下の細い金罫（高級感のアクセント） */
.message__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.message__grid {
  margin-top: 52px;
  display: grid;
  /* 左に本文・右に代表写真。本文の可読幅を確保するため左カラムを可変にする */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  /* 右カラム（写真カード）を左カラム（本文）と同じ高さに伸縮させ、写真下の空白を出さない */
  align-items: stretch;
}

/* 写真と白い名刺プレートを縦に積んだ1枚のカード。
   写真が余った高さを吸収し、カード全体が左カラム（本文）と同じ高さになる */
.message__photo {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55);
}

/* 写真枠：縦長に大きく見せ、はみ出しは cover で処理する（赤枠の「画像サイズ変更」） */
.message__photo-frame {
  flex: 1;
  min-height: 300px;
  overflow: hidden;
}

.message__photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  /* 被写体（顔・手）が中央に残るよう横位置を左寄りに調整 */
  object-fit: cover;
  object-position: 34% 40%;
}

/* 白い名刺プレート（添付デザイン：白地に濃紺の文字） */
.message__name {
  padding: 20px 22px 22px;
  background: var(--paper);
  border-top: 3px solid var(--gold);
}

.message__name-org {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.message__name-main {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-400);
}

.message__name-main b {
  margin-left: 8px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink-900);
}

/* プレート内のプロフィール一行（余白を埋めつつ、名刺としての情報を補う） */
.message__name-cred {
  display: block;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-400);
}

.message__body {
  display: grid;
  gap: 20px;
}

.message__body p {
  font-size: 14.5px;
  line-height: 2.1;
  color: rgba(255, 255, 255, 0.78);
}

.message__body strong {
  color: var(--paper);
  border-bottom: 1px solid rgba(201, 162, 75, 0.55);
  padding-bottom: 1px;
}

/* ---------- Plans ---------- */
.plans {
  /* 料金プランの直前は導入事例（.columns は非公開）。
     導入事例の下余白と合わせて上下のリズムを作るため 40px / 80px としている。
     ※お知らせ（#news）は最終CTAの後ろへ移動したため、この余白とは連動しない */
  padding-block: 40px 80px;
}

.plans__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 添付デザインはカード同士を近づけて並べるため、罫線の間隔を詰める */
  gap: 14px;
  /* 3枚の高さを揃える（推奨カードだけ背が高くなるのを防ぐ） */
  align-items: stretch;
}

/* 添付デザインのカード：白地＋細い罫線、角丸はほぼ付けない。
   中身は「名称 → 説明 → 価格 → 仕様4行」の順に縦積みする */
.plan {
  position: relative;
  display: grid;
  align-content: start;
  padding: 30px 26px 24px;
  border: 1px solid #e5e2da;
  border-radius: 3px;
  background: var(--paper);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.plan:hover {
  border-color: var(--ink-300);
  box-shadow: 0 10px 28px rgba(8, 23, 46, 0.07);
}

/* 推奨カード（プロフェッショナル）：濃紺の面。
   影を落として手前に見せ、視線を集める */
.plan--featured {
  --plan-dark: #1b2230;
  border-color: var(--plan-dark);
  background: var(--plan-dark);
  color: var(--paper);
  box-shadow: 0 18px 40px -18px rgba(8, 23, 46, 0.5);
}

.plan--featured:hover {
  border-color: var(--plan-dark);
  box-shadow: 0 22px 44px -18px rgba(8, 23, 46, 0.55);
}

/* 「推奨」バッジ：カード右上の角に沿わせる */
.plan__badge {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 13px;
  background: var(--accent-2);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--paper);
}

/* プラン名：明朝で字間を広めに取り、上品に組む */
.plan__name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-900);
}

.plan--featured .plan__name {
  color: var(--paper);
}

/* プランの説明：本文より小さく淡い色で、2行に収める */
.plan__desc {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--ink-400);
}

.plan--featured .plan__desc {
  color: rgba(255, 255, 255, 0.55);
}

/* 価格：Didone系の数字を大きく組み、金額そのものを主役にする */
.plan__price {
  margin-top: 22px;
  font-family: var(--didone);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.05;
  /* 数字の字間をわずかに開き、桁を読み取りやすくする */
  letter-spacing: 0.015em;
  color: var(--ink-900);
  white-space: nowrap;
}

.plan--featured .plan__price {
  color: var(--paper);
}

.plan__price small {
  margin-left: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-400);
}

.plan--featured .plan__price small {
  color: rgba(255, 255, 255, 0.6);
}

/* 仕様4行：細い罫で区切り、項目名を左・値を右に置く
   （カード内の導線ボタンは廃止したため、価格の直下に罫で区切って仕様を置く） */
.plan__specs {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}

/* カード内の「月間の利用目安」小見出し（2026-10）
   ご指示により件数の目安はカード内に直接記載するため、
   月間クレジット等の仕様行と区切るラベルを置く */
.plan__usage-label {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.plan--featured .plan__usage-label {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: var(--accent-2);
}

/* 利用目安の2行は、上の仕様行と連続して見えるよう罫を詰める */
.plan__specs--usage {
  margin-top: 4px;
  border-top: 0;
}

.plan--featured .plan__specs {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.plan__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.plan--featured .plan__spec {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.plan__spec dt {
  flex-shrink: 0;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-500);
}

/* 項目名の頭に短いダッシュを置く（添付デザインの「— 項目名」） */
.plan__spec dt::before {
  content: "—";
  margin-right: 7px;
  color: var(--ink-300);
}

.plan--featured .plan__spec dt {
  color: rgba(255, 255, 255, 0.62);
}

.plan--featured .plan__spec dt::before {
  color: rgba(255, 255, 255, 0.32);
}

/* 値は数字をDidoneで組み、日本語（無制限・オプション）は明朝にフォールバックさせる */
.plan__spec dd {
  margin: 0;
  font-family: var(--didone);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-align: right;
  color: var(--ink-900);
}

.plan--featured .plan__spec dd {
  color: var(--paper);
}

/* 注記（2026-10）：ご指示により左右振り分けをやめ、左寄せの2段積みにする */
.plans__notes {
  display: grid;
  gap: 4px;
  justify-items: start;
  margin-top: 26px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-400);
  text-align: left;
}

/* オプション：カードに収まらない選択肢のみ、料金表の下に全幅の帯として置く。
   上端に濃紺のラインを引いて、上のカード群と地続きに見えないよう区切る */
.plan-options {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 24px 28px;
  background: var(--chalk);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink-800);
  border-radius: 3px;
}

.plan-options__title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* 項目は2列で並べ、狭い幅では1列に積む */
.plan-options__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.plan-option {
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.plan-option__name {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-900);
}

.plan-option__desc {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ink-500);
}

/* カード内の「〜の目安」行は、数字＋日本語の混在なのでDidoneをやめて読みやすくする */
.plan__spec--est dd {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
}

/* ※2026-10：ご指示により「月間の利用目安」セクション
   （作成物別コスト表・プラン別の月間目安表・単価分解表・注記）および
   「料金の考え方」ブロックを削除したため、.cost-table / .plan-usage__* /
   .plan-value / .value-card のスタイルも併せて撤去しました。
   件数の目安は各プランカード内に直接記載しています（.plan__spec--est）。 */

/* ---------- CTA ---------- */
.cta {
  padding-block: 20px;
  background: var(--chalk);
}

.cta__box {
  background: linear-gradient(120deg, var(--ink-900) 0%, #1a3668 62%, #274b83 100%);
  border-radius: 4px;
  padding: 72px 48px;
  position: relative;
  overflow: hidden;
  color: var(--paper);
}

.cta__box::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.3), transparent 66%);
  pointer-events: none;
}

.cta__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
}

.cta__content h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.3;
}

.cta__content p {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- Fixed banner ---------- */
.fixed-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 240px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}

.fixed-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fixed-banner a {
  display: block;
  background: linear-gradient(135deg, var(--ink-900), #274b83);
  color: var(--paper);
  padding: 20px;
  display: grid;
  gap: 10px;
}

.fixed-banner strong {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
}

.fixed-banner span {
  font-size: 12px;
  color: var(--accent-2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-900);
  color: var(--paper);
  padding-block: 64px 32px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: start;
}

.site-footer__brand {
  display: grid;
  gap: 16px;
  max-width: 300px;
}

.site-footer__brand .brand__sub {
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__brand p {
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.55);
}

/* フッターのメニュー（2026-10 最終：ご指示によりヘッダーと連動）
   ヘッダーと同じ5項目を横1列に並べるだけになったため、
   4列グリッド（機能／リソース／サービス／会社情報）は廃止しました */
.site-footer__nav {
  display: flex;
  justify-content: flex-end;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 28px;
}

.site-footer__nav a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.16s var(--ease);
}

.site-footer__nav a:hover {
  color: var(--paper);
}

.site-footer__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-footer__bottom p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ※2026-10（最終・2）：ご指示により、コピーライト行の右にあった
   「プライバシーポリシー／Japanese / JP」（.site-footer__links / .site-footer__lang）を
   HTMLから削除したため、この2つのスタイルも撤去しました */

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--ink-900);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner__inner {
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cookie-banner p {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
}

.cookie-banner button {
  flex-shrink: 0;
  padding: 11px 26px;
  border-radius: 3px;
  background: var(--ink-900);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.2s var(--ease);
}

.cookie-banner button:hover {
  background: var(--ink-700);
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 168px;
  z-index: 880;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top svg {
  width: 14px;
  height: auto;
  transform: rotate(-90deg);
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Forms (request page) ---------- */
.page-hero {
  /* ヘッダーを重ねるため、帯のぶんの押し下げを padding-top 側へ移す（56 + 76 = 132） */
  margin-top: 0;
  padding-top: 132px;
  padding-bottom: 48px;
  background: linear-gradient(118deg, var(--ink-800) 0%, #1a3668 60%, #274b83 100%);
  color: var(--paper);
}

.page-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.3;
}

.page-hero p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  max-width: 44em;
}

.form-section {
  padding-block: 64px 96px;
}

.form-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-card);
}

.form-grid {
  display: grid;
  gap: 24px;
}

.form-row {
  display: grid;
  gap: 8px;
}

.form-row > label {
  font-size: 14px;
  font-weight: 700;
}

.form-row .req {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 15px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(138, 94, 27, 0.18);
}

.form-row textarea {
  min-height: 140px;
  resize: vertical;
}

.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.7;
}

.form-check input {
  margin-top: 6px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

/* ※2026-10（最終）：ご指示により「プライバシーポリシー」をリンク化したため、
   同意文の中のリンク用スタイルを追加しました（別ウィンドウで開きます）。
   本文と見分けがつくよう下線を引き、押せることが分かる色にしています。
   チェックボックス自体の見た目・余白には影響しません */
.form-check__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.16s var(--ease), text-decoration-color 0.16s var(--ease);
}

.form-check__link:hover,
.form-check__link:focus-visible {
  color: var(--ink-900);
  text-decoration-color: var(--ink-900);
}

.form-check__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.form-actions {
  display: grid;
  gap: 14px;
  justify-items: center;
  margin-top: 8px;
}

.form-submit {
  padding: 16px 56px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--paper);
  font-size: 16px;
  font-weight: 700;
  transition: background-color 0.16s var(--ease);
}

.form-submit:hover {
  background: var(--accent-2);
}

.form-submit:disabled {
  background: var(--ink-200);
  cursor: not-allowed;
}

.form-note {
  font-size: 12px;
  color: var(--ink-400);
  text-align: center;
  line-height: 1.7;
}

.form-message {
  display: none;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.7;
}

.form-message.is-error {
  display: block;
  /* エラーだけは注意喚起の赤を保持する（装飾のアクセントとは役割が違う） */
  background: #fdecea;
  color: #8d2317;
}

.form-message.is-success {
  display: block;
  background: rgba(47, 167, 155, 0.12);
  color: #17635c;
}

.form-side {
  display: grid;
  gap: 20px;
}

.form-side__card {
  background: var(--chalk);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  gap: 12px;
}

.form-side__card h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
}

.form-side__card ul {
  display: grid;
  gap: 10px;
}

.form-side__card li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-500);
}

.form-side__card li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* お問い合わせフォーム（資料請求ページ） */

/* ==========================================================================
   Hero product demo（メインビジュアルの動的コンテンツ）
   チャットで質問 → グラフ／課題表 → 提案書プレビューまでを再現する
   オリジナル実装（アプリ画面モックアップ）
   ========================================================================== */
.hero-demo {
  position: relative;
  border-radius: 18px;
  height: 560px;
  padding: 20px;
  background: linear-gradient(150deg, #3b4c57 0%, #25333c 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  color: var(--ink-900);
  text-align: left;
  /* 要件：会話枠（左）と画面枠（右）を
     ・同じ高さ（stretch）
     ・わずかな隙間（gap）で被らせず分離
     ・画面枠は会話枠の約1.7倍の横幅
     で並べる */
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 1.7fr);
  gap: 14px;
  align-items: stretch;
}

/* 画面枠（グラフ・表・提案書を表示する側） */
.demo-screen {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  background: var(--paper);
  border-radius: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.demo-screen__body {
  position: relative;
  min-height: 0;
  padding: 18px 20px;
}

/* 表示中のビューだけを見せる */
.demo-view {
  position: absolute;
  inset: 18px 20px;
  display: grid;
  gap: 14px;
  align-content: start;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}

.demo-view.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.demo-view__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-300);
  text-transform: uppercase;
}

.demo-view__note {
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-500);
}

/* KPI */
.demo-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.demo-kpi {
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 2px;
}

.demo-kpi b {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
  color: var(--accent);
}

.demo-kpi b small {
  font-size: 0.5em;
  margin-left: 2px;
}

.demo-kpi span {
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-400);
}

/* 会話枠（チャット）— 画面枠と同列・同高さで並ぶ */
.demo-chat {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 22px 48px rgba(8, 23, 46, 0.28);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.demo-chat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--chalk);
  border-bottom: 1px solid var(--line);
}

.demo-chat__mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
}

.demo-chat__name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-800);
}

.demo-chat__close {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-300);
}

/* アプリのタイトルバー */
.demo-app__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--chalk);
  border-bottom: 1px solid var(--line);
}

.demo-app__dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.demo-app__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-200);
}

.demo-app__dots i:first-child {
  background: var(--accent);
}

.demo-app__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}

/* 実際の画面キャプチャを掲載する枠 */
.demo-shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(8, 23, 46, 0.06);
}

.demo-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.demo-shot figcaption {
  font-size: 9px;
  line-height: 1.5;
  color: var(--ink-400);
  padding: 7px 9px;
  border-top: 1px solid var(--line);
  background: var(--chalk);
}

/* 入力中インジケーター */
.demo-typing__dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 11px 14px;
  background: var(--chalk-2);
  border-radius: 14px;
}

.demo-typing__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
  animation: demo-typing 1.2s var(--ease) infinite;
}

.demo-typing__dots i:nth-child(2) {
  animation-delay: 0.16s;
}

.demo-typing__dots i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes demo-typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* チャットログ */
.demo-app__log {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
  padding: 14px 12px 16px;
  overflow-y: auto;
  scrollbar-width: none;
}

.demo-app__log::-webkit-scrollbar {
  display: none;
}

.demo-msg {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.demo-msg--user {
  justify-items: end;
}

.demo-msg--user p {
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--ink-800);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.6;
}

.demo-msg--ai {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.demo-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.demo-ai-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.demo-ai-body > p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* グラフ */
.demo-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding: 10px 12px;
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.demo-chart i {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 4px 4px 0 0;
  background: var(--blue-soft);
  transition: height 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}

.demo-chart i.is-accent {
  background: var(--accent);
}

/* 課題表 */
.demo-table {
  width: 100%;
  border-collapse: collapse;
}

.demo-table th,
.demo-table td {
  text-align: left;
  padding: 6px 7px;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.5;
  word-break: break-word;
}

.demo-table th {
  background: var(--chalk-2);
  color: var(--ink-400);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.demo-table td:first-child {
  font-weight: 600;
  color: var(--ink-800);
}

.demo-table tbody tr:last-child td {
  border-bottom: 0;
}

.demo-pri {
  font-weight: 700;
}

.demo-pri--high {
  color: var(--accent);
}

.demo-pri--mid {
  color: var(--gold);
}

.demo-pri--low {
  color: var(--teal);
}

/* 入力欄 */
.demo-app__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--chalk);
  border-top: 1px solid var(--line);
}

.demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}

.demo-pill svg {
  width: 8px;
  height: auto;
  opacity: 0.6;
}

.demo-send {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper);
  display: grid;
  place-items: center;
}

.demo-send svg {
  width: 13px;
  height: auto;
}

/* --- アニメーション（JSが有効なときだけ .is-live を付与） ---
   非表示メッセージは display:none で場所を取らせない（空枠の原因回避） */
.hero-demo.is-live .demo-msg {
  display: none;
}

.hero-demo.is-live .demo-msg.is-shown {
  display: grid;
  animation: demo-msg-in 0.45s var(--ease) both;
}

.hero-demo.is-live .demo-typing[hidden] {
  display: none;
}

.hero-demo.is-live .demo-typing:not([hidden]) {
  display: grid;
}

@keyframes demo-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   公開準備中（コンテンツ未整備）の非表示設定
   --------------------------------------------------------------------------
   以下のセクション／パーツは、コンテンツが未整備のため非表示にしています。
     ・ロゴマーキー（.marquee）
     ・セミナー／資料ダウンロード（.columns）

   ※ ナビゲーション（PCナビ・メガメニュー・SPドロワー・ハンバーガー）と
     フッターは公開し、このリストから外しました。
   ※ 導入事例（.usecase）も公開済みです。

   コンテンツが用意できたら、各HTMLの <body class="is-preparing"> から
   class を外すだけで、マークアップはそのまま元どおり表示されます。
   ========================================================================== */
body.is-preparing .marquee,
body.is-preparing .columns {
  display: none !important;
}

/* ナビを表示するため、右端寄せの上書きは不要になった（互換のため残さない） */

/* ヘッダーは fixed で内容に重なるため、ページ内リンクで飛んだときに
   見出しがヘッダーの下に隠れないよう余白を確保する。
   あわせて、ヒーローの「詳しくはこちらから」などで
   該当セクションへ滑らかにスクロールさせる */
html {
  scroll-behavior: smooth;
}

section[id],
div[id="company"] {
  /* PCヘッダー 76px ＋ 余裕。スマホ（60px）は下のメディアクエリで詰める */
  scroll-margin-top: 96px;
}

/* ファーストビュー自体はページ最上部なので、余白は付けない */
section[id="about"] {
  scroll-margin-top: 0;
}

@media (max-width: 900px) {
  section[id],
  div[id="company"] {
    scroll-margin-top: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* 添付のカード群と余白を詰める */

/* ==========================================================================
   Issues brief（ファーストビュー直後の課題提起・要約版）
   --------------------------------------------------------------------------
   機能の説明より先に「なぜ必要か」を突きつけるための帯。
   濃紺の hero → 生成りのこの帯 → 白の intro と地色を切り替え、
   「課題 → 機能」の順番を視覚的にも示す。
   詳細（ギャップのグラフ／5つの理由／解決策）は従来どおり #challenges にある。
   ※数値は #challenges のカードで引用している公表統計と同一（新規の数値は足さない）
   ========================================================================== */
.issues-brief {
  padding-block: 80px 84px;
  background: var(--chalk);
}

.issues-brief__head {
  text-align: center;
}

.issues-brief__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-400);
}

/* 見出しは .section-title と同じ寸法にして、セクションの格を揃える */
.issues-brief__title {
  margin-top: 16px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.32;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.issues-brief__title em {
  font-style: normal;
  color: var(--accent);
}

.issues-brief__lead {
  max-width: 46em;
  margin: 24px auto 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-500);
}

/* 3つの統計：課題カードと同じ「上端の紺ライン」で意匠を揃える */
.issues-brief__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.issues-brief__item {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-800);
  border-radius: 3px;
}

/* 数値は価格表と同じ Didone で組み、数字を主役にする */
.issues-brief__num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--didone);
  color: var(--ink-900);
}

.issues-brief__num strong {
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

.issues-brief__num span {
  font-size: 18px;
  font-weight: 500;
}

.issues-brief__text {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink-900);
}

/* 出典はカード下端に罫で区切って置く（数値の根拠を隠さない） */
.issues-brief__src {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-400);
}

.issues-brief__text + .issues-brief__src {
  margin-top: 14px;
  padding-top: 12px;
}

.issues-brief__action {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* ==========================================================================
   FAQ（反論処理とデモの流れを兼ねる）
   --------------------------------------------------------------------------
   料金プランの直後に置き、「検討時に必ず出る疑問」を先に潰してから
   最終CTAへ送る。開閉は .acc-item / .acc-trigger / .acc-panel を
   機能詳細セクションと共通利用する（js/main.js の initAccordions）。
   ========================================================================== */
.faq {
  padding-block: 88px 96px;
  background: var(--chalk-2);
}

.faq__head {
  text-align: center;
}

/* ※2026-10（最終）：アイブロー（FAQ）を削除したため、
   .faq__eyebrow のスタイルも撤去しました */

.faq__title {
  /* 2026-10（最終）：アイブロー削除に伴い、見出しが .faq__head の第1子に
     なったため、アイブローとの間隔用だった margin-top: 16px を 0 に戻した */
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.32;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.faq__title em {
  font-style: normal;
  color: var(--accent);
}

/* ※2026-10：ご指示によりリード文（.faq__lead）を削除しました。
   見出しからFAQリストへ直結させています */

/* 白い面にまとめ、質疑が1続きで読めるようにする */
.faq__list {
  max-width: 920px;
  margin: 44px auto 0;
  padding: 4px 32px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
}

/* 最後の項目にも下罫を引き、カードの下端で線が途切れないようにする */
.faq__list .acc-item:last-child {
  border-bottom: 1px solid var(--line);
}

/* FAQ下部のCV。統一後は2つのボタンが並ぶため、折り返しと間隔を持たせる */
.faq__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* ==========================================================================
   導入事例（活用モデル）の補足
   ========================================================================== */
/* ※2026-10（最終）：アイブロー（REPORT）を削除したため、
   .usecase__eyebrow のスタイルも撤去しました。
   見出しの上余白は .usecase__head > div > h2 側で調整しています */

/* 導入事例の前提（現在は開発元1社のみ）を、事例カードの直前に明示する */
.usecase__note {
  margin: 0 0 28px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ink-400);
}

/* ---------- 導入事例：1社のケーススタディ ----------
   現在ご紹介できるのは開発元（Authense税理士法人）自身の1社のみのため、
   複数カードを並べるのではなく、1社の「課題 → 活用 → 効果」を
   5つの論点で対応付けて読ませるレイアウトにしている。
   課題カードと同じ「上端の紺ライン」でセクションの意匠を揃える */
.case {
  padding: 40px 40px 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-800);
  border-radius: 3px;
}

.case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.case__tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--chalk-2);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-500);
}

/* 開発元自身の導入であることを、他社事例と区別して示す */
.case__badge {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.case__company {
  width: 100%;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-900);
}

.case__company-sub {
  margin-left: 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-400);
}

.case__title {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}

.case__title em {
  font-style: normal;
  color: var(--accent);
}

.case__lead {
  max-width: 52em;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-500);
}

/* --- ①〜⑤の対応表 --- */
.case__list {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

/* 「通し番号｜利用前の課題｜活用＋効果」の3列。
   左右に振ることで、何がどう変わったかを行単位で読み比べられる */
.case__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 0 28px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.case__item:first-child {
  border-top: 2px solid var(--ink-800);
}

/* 活用事例の通し番号 01〜05
   ※2026-10-27：左端の細い桁で Didone を使うと「4」が「1」に見えるため明朝600へ。
     色（--ink-300）は本文より弱い階層を示す既存の意図をそのまま残しています。 */
.case__num {
  padding-top: 2px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-300);
}

.case__col {
  min-width: 0;
}

/* 左（課題）と右（活用）の間に罫を立て、対比を明示する */
.case__col--before {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}

.case__label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.case__col--before .case__label {
  background: var(--chalk-2);
  color: var(--ink-400);
}

.case__col--after .case__label {
  background: var(--accent-soft);
  color: var(--accent);
}

.case__text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-500);
}

/* 効果は、活用内容と地色で区別して読ませる */
.case__effect {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--accent-2);
  background: var(--chalk);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-500);
}

.case__effect span {
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
  color: var(--accent);
}

/* --- 事例末尾のCV導線 --- */
.case__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.case__action-text {
  flex: 1 1 320px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-400);
}

/* --- 本人の言葉（引用）---
   1社しか事例がない段階では、第三者の声で語る余地がない。
   そこで、導入した本人（代表）の言葉を原文のまま抜粋して置き、
   事実の裏付けと説得力を補う。写真は代表写真を再利用する */
.case__voice {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin-top: 28px;
  padding: 26px 28px;
  background: var(--chalk);
  border-left: 3px solid var(--accent-2);
}

/* 顔が切れないよう縦長に切り抜く（4:5）。
   ※HTMLの width/height 属性は付けない（高さのヒントとして残り、
     aspect-ratio を指定しても実寸の 604px になってしまうため）。
   ※新しい本人写真は横位置で顔が中央やや右（横約53%／縦約35%）にあるため、
     被写体が枠の中央に来るよう object-position を右寄り・上寄りにする */
.case__voice-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 25%;
  border-radius: 2px;
  background: var(--chalk-2);
}

.case__voice-body {
  display: grid;
  gap: 14px;
}

/* 発言であることが分かるよう、明朝＋大きめの行間で組む */
.case__voice-quote {
  position: relative;
  padding-left: 20px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.01em;
  color: var(--ink-800);
}

/* 筆頭の引用符を真鍮色で立て、引用の開始を明示する */
.case__voice-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  bottom: 0.5em;
  width: 2px;
  background: rgba(201, 162, 75, 0.55);
}

.case__voice-name {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-400);
}

.case__voice-name span {
  margin-right: 6px;
}

.case__voice-name b {
  margin-left: 4px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
}

/* ---------- 最終CTAの副次導線 ---------- */
/* ※2026-10（最終）：CVボタン統一により「資料を請求する」（.cta__sub）から
   「資料請求」（.btn--outline-light）に変わったため、専用の上書きは撤去しました */

/* ---------- Footer：会社概要は削除 ----------
   ※2026-10（最終）：ご指示によりフッターの「会社概要」ブロック
     （.site-footer__company / .site-footer__facts）をHTMLから削除したため、
     対応するスタイルも撤去しました。販売会社はブランド隣の紹介文と
     コピーライト行で示しています */

/* ---------- プライバシーポリシー（privacy.html）----------
   読み物ページのため、本文は可読幅を抑えて縦に流す。
   見出しは明朝、本文はゴシックで LP と同じ組み方に揃える */
.privacy-doc {
  max-width: 860px;
  margin-inline: auto;
}

.privacy-doc h2 {
  margin-top: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

.privacy-doc > h2:first-child {
  margin-top: 0;
}

.privacy-doc h3 {
  /* ※2026-10-27：事業者情報（販売元／開発・システム提供元）の小見出しを追加したため、
     上の h2 と本文から余白を確保する */
  margin-top: 28px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-900);
}

.privacy-doc p,
.privacy-doc li {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-500);
}

.privacy-doc ul,
.privacy-doc ol {
  margin: 0;
  padding-left: 1.4em;
}

.privacy-doc ul li {
  list-style: disc;
}

/* ※2026-10-27：本文に番号付きリスト（利用目的・第三者提供および委託）を追加したため、
   ol の行頭番号を明示する。全体のリセット（ul, ol { list-style: none }）を
   打ち消さないと「1. 2. 3.」が出ないため。 */
.privacy-doc ol li {
  list-style: decimal;
  margin-top: 10px;
}

/* 番号付きリスト内の小見出し（「第三者提供の禁止」「業務委託」） */
.privacy-doc li > strong {
  font-weight: 700;
  color: var(--ink-900);
}

/* 本文中のリンクは真鍮色＋下線。
   ※2026-10 修正：以前は .privacy-doc a が .btn の color（白）を上書きしてしまい、
     ページ下部の「無料デモ体験を申し込む」が【茶色の地に茶色の文字】＝
     文字のない茶色の角丸ブロックとして描画されていました。
     ボタンは .btn 自身の配色を保つよう :not(.btn) で除外します */
.privacy-doc a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-doc .btn {
  /* 文字色は .btn / .btn--outline 側の指定をそのまま使う（ここで色を固定しない） */
  text-decoration: none;
}

/* リード文を1行で見せたいページ用（privacy.html）。
   既定の `.page-hero p { max-width: 44em }` を打ち消すため、
   同特異度以上のセレクタで指定する */
.page-hero p.page-hero__lead--wide {
  max-width: none;
}

/* ※「情報管理の方針」の独立ページ内セクションは削除したため、
      .privacy-doc__policy / __note / __anchor のスタイルも併せて削除 */

/* 会社情報の事実列（フッターの .site-footer__facts と同内容を白地で） */
.privacy-doc__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 18px 0 0;
}

/* ※2026-10-27：「8. 事業者情報およびお問い合わせ窓口」は所在地が長いため、
   2列に割ると折返しが窮屈になる。このブロックだけ1列で縦に流す。
   ラベル列も住所が入る前提で少し広げる。 */
.privacy-doc__facts--single {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.privacy-doc__facts--single > div {
  grid-template-columns: 112px minmax(0, 1fr);
}

.privacy-doc__facts > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.7;
}

.privacy-doc__facts dt {
  color: var(--ink-400);
}

.privacy-doc__facts dd {
  margin: 0;
  color: var(--ink-900);
}

.privacy-doc__date {
  margin-top: 36px;
  font-size: 12px;
  color: var(--ink-400);
}

.privacy-doc__action {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}