/* ============================================================
   Usassist HP 共通スタイル
   トークンの正は Usassist Design System（ClaudeDesign
   projectId: b031fea8-51ad-491c-9223-0a6e7c745211 の tokens/*.css）。
   ここは同じ変数名で写しているので、DS側を直したらここも直す。
   ページ側のレイアウトはインラインstyleで、この変数を参照している。
   ============================================================ */

:root {
  /* ---- Deep Teal（ブランドメイン） ---- */
  --teal-50: #f1f6f8;
  --teal-100: #dce8ec;
  --teal-200: #bacfd7;
  --teal-300: #8caebb;
  --teal-400: #56808f;
  --teal-500: #2f5d6e;
  --teal-600: #1c4859;
  --teal-700: #143e4f;
  --teal-800: #0c3a4c;
  --teal-900: #082a38;
  --teal-950: #051d27;

  /* ---- Pine Green（ブランドサブ） ---- */
  --green-50: #eef6f3;
  --green-100: #d4ebe3;
  --green-200: #a6d6c7;
  --green-300: #6fbca6;
  --green-400: #3f9b82;
  --green-500: #1a6b5a;
  --green-600: #155a4c;
  --green-700: #11483d;
  --green-800: #0d3930;

  /* ---- Warm Gold（アクセント） ---- */
  --gold-50: #faf6ee;
  --gold-100: #f1e7d3;
  --gold-200: #e3d0a9;
  --gold-300: #d2b67e;
  --gold-400: #c4a36b;
  --gold-500: #b89968;
  --gold-600: #9c7f50;
  --gold-700: #7c6440;

  /* ---- Chartreuse（アクセント2・区切り線） ---- */
  --chartreuse-300: #ddd27a;
  --chartreuse-400: #d0c45e;
  --chartreuse-500: #c8b84a;
  --chartreuse-600: #a99b34;

  /* ---- Warm Neutrals ---- */
  --paper-0: #ffffff;
  --paper-50: #faf8f3;
  --paper-100: #f7f5ef;
  --paper-200: #efece2;
  --paper-300: #e6e2d6;
  --ink-900: #0e2b36;
  --ink-700: #38525c;
  --ink-500: #647c85;
  --ink-400: #8a9ca3;
  --ink-300: #b7c3c8;
  --line-cool: #e1e8eb;

  /* ---- Status ---- */
  --success: #1a6b5a;
  --success-bg: #eef6f3;
  --warning: #b8862a;
  --warning-bg: #faf2e0;
  --danger: #b23b34;
  --danger-bg: #fbeceb;
  --info: #2f5d6e;
  --info-bg: #eef4f6;

  /* ---- セマンティック別名（ページ側はこちらを使う） ---- */
  --surface-base: var(--paper-0);
  --surface-raised: var(--paper-0);
  --surface-subtle: var(--paper-50);
  --surface-sunken: var(--paper-100);
  /* 寒色の地（2026-08-04・代表判断）。クリーム一色だと単調で「高級感テンプレ」に寄るので、
     既存パレットの teal-50 を主、クリームをアクセントに使い分ける。メインの濃緑・金は不変 */
  --surface-cool: var(--teal-50);
  --surface-cool-deep: var(--teal-100);
  --surface-ink: var(--teal-800);
  --surface-ink-deep: var(--teal-900);
  --text-strong: var(--teal-800);
  --text-body: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-accent: var(--gold-600);
  --text-on-ink: #eef3f4;
  --text-on-ink-muted: #9db6bf;
  --brand: var(--teal-800);
  --brand-sub: var(--green-500);
  --brand-accent: var(--gold-500);
  --brand-spark: var(--chartreuse-500);
  --border-subtle: var(--paper-300);
  --border-default: var(--line-cool);
  --border-strong: var(--ink-300);
  --border-on-ink: rgba(255, 255, 255, 0.14);
  --link: var(--green-600);
  --link-hover: var(--teal-800);
  --focus-ring: var(--gold-500);

  /* ---- フォント ----
     Cormorant Garamond は外した（2026-08-04）。和文には当たらず、欧文の数字と
     「偽イタリック」だけを供給していた＝装飾のためだけの1フォント。
     見出しも明朝をやめてゴシックに統一した（2026-08-04・代表判断）。
     書体で階層を作らず、太さ・大きさ・色だけで作る。読み込むファミリーも減る。
     数字だけ IBM Plex Mono（帳簿・通帳の数字の見え方）。 */
  --font-display: 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', 'YuGothic', -apple-system, system-ui, sans-serif;
  --font-serif: 'Noto Serif JP', 'Noto Serif CJK JP', 'Yu Mincho', 'YuMincho', serif;
  --font-sans: 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', 'YuGothic', -apple-system, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  --font-figure: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0.005em;
  --ls-eyebrow: 0.22em;
  --ls-button: 0.04em;

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.5;
  --lh-relaxed: 1.85;

  --fs-display-1: 76px;
  --fs-display-2: 56px;
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 21px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 13px;

  /* ---- 余白（4px基準） ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --gutter: 24px;
  --page-pad: 24px;
  --section-y: 120px;
  --section-y-tight: 80px;
  --content-max: 1180px;
  --prose-max: 720px;

  /* ---- 角丸・枠線 ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-width: 1px;

  /* ---- 影・フォーカス ---- */
  --shadow-xs: 0 1px 2px rgba(12, 58, 76, 0.05);
  --shadow-sm: 0 2px 6px rgba(12, 58, 76, 0.06);
  --shadow-md: 0 8px 24px rgba(12, 58, 76, 0.08);
  --shadow-lg: 0 18px 48px rgba(12, 58, 76, 0.10);
  --shadow-xl: 0 30px 70px rgba(12, 58, 76, 0.12);
  --shadow-ring: 0 0 0 1px var(--border-default);
  /* カード用の2層の影（2026-08-04）。1pxの枠線＋均一な影の「箱」をやめ、
     近い影と遠い影を重ねて浮きを出す。色のついた面の上に置く前提。
     実物のStripeと見比べて薄くした（前の値は濃すぎた） */
  --shadow-card: 0 1px 2px rgba(12, 58, 76, 0.08), 0 4px 12px -2px rgba(12, 58, 76, 0.09);
  --shadow-card-lift: 0 2px 4px rgba(12, 58, 76, 0.08), 0 14px 32px -8px rgba(12, 58, 76, 0.18);
  --focus-width: 3px;
  --focus-ring-shadow: 0 0 0 3px rgba(184, 153, 104, 0.35);

  /* ---- 動き ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast: 130ms;
  --dur-normal: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   base層（DSの tokens/base.css を踏襲）
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
  background: var(--surface-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 和文の見出しに欧文の設定（負の字送り・1.16の行送り）を当てない。
   詰めると濁点・半濁点が潰れ、行が近すぎると2行目が読みにくくなる。 */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

p { margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; }

::selection { background: rgba(200, 184, 74, 0.30); color: var(--teal-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-shadow);
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   hoverユーティリティ
   ClaudeDesignの非標準属性 style-hover="..." をここに移した。
   ページ側はインラインstyleで色を指定しているので、上書きには
   !important が必要（インラインの方が詳細度が高い）。
   ============================================================ */

.hov-white:hover { color: #ffffff !important; }
.hov-gold:hover { background: var(--gold-400) !important; }
.hov-more:hover {
  color: var(--teal-800) !important;
  border-bottom-color: var(--teal-800) !important;
}
.hov-navy:hover { background: var(--teal-700) !important; }
.hov-link:hover { color: var(--teal-800) !important; }

/* ============================================================
   版面（2026-08-04）

   やめたもの（すべてページ側のインラインstyleにあった）:
   ・中央寄せの英語見出し＋黄緑の短い棒（全セクション同型の飾り）
   ・大文字＋0.22emの字送りのバッジ（これ自体が生成物の型）
   ・3つの理由の 01 / 02 / 03（順序ではないので情報になっていない）
   ・1px枠＋均一な影の「箱」。中身の違いを表さない同型のカード
   ・水平にまっすぐ積まれたセクションの境界

   色の役割を分けた: **金は「押せる場所」だけ**（CTA）。見出し・リンク・
   小さな印はブランドサブの深緑（--green-600）。金が全部をやっていたのが
   「高級感テンプレ」に見える原因だった。濃色の面は単色でなく階調で塗る。
   ============================================================ */

.us-sec { padding: clamp(60px, 7.5vw, 100px) clamp(20px, 5vw, 32px); }
.us-sec-tight { padding: clamp(48px, 6vw, 76px) clamp(20px, 5vw, 32px); }
.us-wrap { position: relative; z-index: 3; max-width: var(--content-max); margin: 0 auto; }

/* 濃色の面。単色のベタ塗りをやめ、teal から green へ寄せた階調にする */
.us-ink {
  background: linear-gradient(140deg, var(--teal-900) 0%, var(--teal-800) 46%, var(--green-800) 100%);
}

/* ブランド色のグラデーション作品（2026-08-04）。
   Stripeのヒーローにある大判のグラデーションに当たるもの。外部素材を使わず、
   ブランドの4色（teal / green / gold / chartreuse）だけを重ねて作る。
   色を足していないので、メインカラーの約束は破らない。 */
.us-mesh {
  background:
    radial-gradient(58% 74% at 10% 16%, rgba(63, 155, 130, 0.52) 0%, rgba(63, 155, 130, 0) 62%),
    radial-gradient(48% 60% at 88% 8%, rgba(200, 184, 74, 0.26) 0%, rgba(200, 184, 74, 0) 60%),
    radial-gradient(68% 86% at 76% 84%, rgba(26, 107, 90, 0.58) 0%, rgba(26, 107, 90, 0) 66%),
    radial-gradient(44% 56% at 34% 98%, rgba(196, 163, 107, 0.24) 0%, rgba(196, 163, 107, 0) 60%),
    radial-gradient(38% 46% at 60% 40%, rgba(111, 188, 166, 0.20) 0%, rgba(111, 188, 166, 0) 62%),
    linear-gradient(146deg, var(--teal-950) 0%, var(--teal-800) 52%, var(--green-800) 100%);
}

/* 実績の数字を横に並べる（Stripeの実績欄の作り）。数字ごとに色を変える */
.us-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(22px, 3vw, 44px);
}
.us-stat-n {
  font-family: var(--font-figure);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.us-stat-n small { font-size: 0.46em; font-weight: 500; letter-spacing: 0; }
.us-stat-l {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 10px 0 0;
}

/* 本文の2段組は入れない（2026-08-04・代表判断で却下）。
   和文16pxで2段にすると1段が25文字前後まで縮んで読みづらい。
   1段のまま器を640px（約40文字）に保つほうが、ジル・アンドリュースの
   「1行30〜40文字」も満たせる。手動の改行も不要。 */

/* フッター: 2列のリンク束をやめ、3列のサイトマップにする。
   4列にすると実在しないリンク（同じページへの重複・ページ内アンカー）で
   列を埋めることになる（2026-08-04に一度やって却下された） */
.us-footer-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.us-fcol-h {
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: #ffffff;
  margin: 0 0 14px;
}
.us-fcol a {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  padding: 7px 0;
  color: var(--text-on-ink-muted);
}
@media (max-width: 880px) { .us-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .us-footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* セクションの境界を斜めに切る。隣のセクションの色の三角を重ねて描くだけなので、
   レイアウトには影響しない（中身の高さも折り返しも変わらない）。
   実物のStripeでは1ページに1回・濃色の面の上端にしか出てこない脇役なので、
   ここでも最終CTAの1箇所だけに使う。三角が食い込むぶん padding を足すこと。 */
.us-wedge-t { position: relative; }
.us-wedge-t::before {
  content: '';
  position: absolute;
  left: -2vw;
  right: -2vw;
  top: -1px;
  height: clamp(38px, 5vw, 72px);
  background: var(--wedge-t, var(--surface-base));
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 2;
  pointer-events: none;
}
/* 斜めの縁に沿って細い色の帯を覗かせる（Stripeの濃紺セクションと同じ作り）。
   上の三角より数px下にずらした同じ三角なので、ずらした幅だけが線として見える */
.us-bar {
  position: absolute;
  left: -2vw;
  right: -2vw;
  height: clamp(38px, 5vw, 72px);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
  pointer-events: none;
}

/* 見出しブロック。中央寄せをやめ、軸を1本にする。
   幅640pxは1行あたり約40文字（ジル・アンドリュースの上限）。760pxでは47文字あった */
.us-head { max-width: 640px; }
.us-head-wide { max-width: 760px; }

/* 英語の小見出し。大文字＋広い字送りのバッジをやめ、文章の書き出しとして置く */
.us-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--green-600);
  margin-bottom: 10px;
}
.us-label-ink { color: var(--green-300); }

.us-h {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--text-strong);
}
.us-h-ink { color: #ffffff; }

/* お客様の声。一問一答のまま出す（アンケートの形そのもの）。
   設問が見えるので原文を1文字も変えずに使える——繋いで文を整える必要が無い。
   原文の正は knowledge/voice/customers/ */
.us-qa-q {
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  line-height: 1.7;
  color: var(--green-600);
}
.us-qa-a {
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-body);
  margin: 6px 0 0;
}
.us-cite {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* カード。枠線を外し、2層の淡い影で浮かせる。色のついた面の上に置く前提。 */
.us-card {
  background: var(--surface-raised);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: clamp(26px, 2.6vw, 32px);
  transition: box-shadow var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-standard);
}
.us-card-lift { box-shadow: var(--shadow-card-lift); }
/* 「…手から離れ／る」のような折り返しを避ける */
.us-card h3, .us-h { text-wrap: balance; }

.us-grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  align-items: stretch;
}

/* 数字は帳簿の数字として置く。等幅 */
.us-figure {
  font-family: var(--font-figure);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* 続きを見るリンク。金をやめて深緑に（コントラスト4.0:1 → 7:1）。
   下線は敷かず、細い山括弧がホバーで進む */
.us-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--green-600);
  transition: color var(--dur-fast) var(--ease-standard);
}
.us-link::after {
  content: '\203A';
  font-size: 1.25em;
  line-height: 1;
  transition: transform var(--dur-normal) var(--ease-out);
}
.us-link:hover { color: var(--teal-800); }
.us-link:hover::after { transform: translateX(4px); }
.us-link-ink { color: var(--green-300); }
.us-link-ink:hover { color: #ffffff; }

/* CTA。金はここだけで使う */
.us-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  border-radius: var(--radius-pill);
  background: var(--gold-500);
  color: var(--teal-900);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard);
}
.us-cta:hover { background: var(--gold-300); color: var(--teal-900); box-shadow: var(--shadow-card-lift); }

/* ============================================================
   FAQ（details / summary）
   ============================================================ */

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.us-chev {
  display: inline-flex;
  transition: transform var(--dur-normal) var(--ease-standard);
}
details[open] .us-chev { transform: rotate(180deg); }

/* ============================================================
   フォーム
   ============================================================ */

.us-input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-body);
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard);
}
.us-input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: var(--focus-ring-shadow);
}
.us-input::placeholder { color: var(--ink-400); }

/* 同意チェックが未入力のあいだは送信できない（JSではなくCSSで見せる） */
button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   下部の固定CTAは撤去した（2026-07-31・代表判断）
   ヘッダーがstickyで「無料相談」ボタンを常時出しているので役割が重複し、
   狭いスマホの画面を帯と padding-bottom で常に削っていた。
   ボタンのラベルに「（売り込みません）」と入れていたのも、押す直前の
   一言としては売り手の自白になる（pairs.md P-001の適用範囲）。
   復活させるなら、まずヘッダー側のCTAをどうするかから決める。
   ============================================================ */

/* ============================================================
   狭い画面の調整
   ============================================================ */

@media (max-width: 719px) {
  /* ヘッダーの「クリニック・歯科の経理代行」タグは畳む */
  .site-header-tag { display: none; }
}

/* トップ「引き受けるのは〜」の写真。文の右に240pxで置き、段が変わったら横いっぱいに広げる。
   605pxは折り返しの境界の実測値（608pxからは横並びのまま。ここを間違えると、
   横並びのまま幅100%になって文が潰れる）。文の min-width か写真の幅を変えたら測り直す */
.us-side-photo { width: 240px; }
/* 上限420pxは、素材（840px）が高精細画面でも足りる範囲。外すと605px幅で545pxまで伸びる */
@media (max-width: 605px) { .us-side-photo { width: 100%; max-width: 420px; } }