/* ログイン前トップ（Figma: ログイン前トップ / 改修案 / Desktop, node 3:9） */
:root {
  --mint: #4abaa4;
  --mint-text: #26796a; /* 文字・ボタン用の濃い緑。--mint(#4abaa4)は白で2.4:1のため。白/薄緑の背景で4.5:1以上 */
  --light: #e8f7f3;
  --pale: #f4fbf9;
  --ink: #2e4a44;
  --muted: #5e7873;
  --white: #fff;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "BIZ UDPGothic", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
/* 日本語を文節の途中で折り返さない（非対応のブラウザは通常の折り返し） */
.hero h1 span, .hero-text p, .top-heading, .top-lead, .example-title, .example-desc, .why-message p, .closing-lead, .flow-title, .flow-desc, .scope-detail, .top-note { word-break: auto-phrase; }
.top-section { padding: 64px 24px; }
.top-inner { max-width: 1120px; margin: 0 auto; }
.top-heading { font-size: 28px; font-weight: 700; text-align: center; line-height: 1.65; text-wrap: balance; }
.top-lead { font-size: 15px; color: var(--muted); text-align: center; margin-top: 28px; }
.bg-light { background: var(--light); }
.bg-pale { background: var(--pale); }
.bg-white { background: var(--white); }

/* CTA（Slack・Chatworkへの相談導線）。背景は文字色と同じ濃い緑: 白文字で5.2:1（Figmaのミントは2.4:1） */
.cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-primary {
  display: inline-block; text-align: center;
  background: var(--mint-text); color: var(--white);
  font-weight: 700; font-size: 16px; line-height: 1.65;
  padding: 16px 28px; border-radius: 8px; text-decoration: none;
}
.cta-primary:hover { background: #1d6154; }
.cta-primary:focus-visible, .top-link:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 3px;
}
/* 準備中のチャネル: リンクではない（枠は破線・背景なし・矢印なし）。文字色は濃いインク色で4.5:1以上 */
.cta-pending {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  border: 2px dashed var(--muted); border-radius: 8px; padding: 14px 28px;
  color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.65;
}
.cta-pending-badge { background: var(--ink); color: var(--white); border-radius: 999px; font-size: 12px; padding: 2px 10px; }
/* 利用可能なチャネル: 相談先は招待URLのボタンから選ぶので、ここはリンクではなく状態の表示（実線・ブランド色のバッジ） */
.cta-available {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  border: 2px solid var(--mint-text); border-radius: 8px; padding: 14px 28px;
  color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.65;
}
.cta-available-badge { background: var(--mint-text); color: var(--white); border-radius: 999px; font-size: 12px; padding: 2px 10px; }
/* 招待URLなしで来た人向け: 利用可能のラベルは押せないので、ボタンが出る条件を先に伝える */
.invite-choice { gap: 12px; }
.invite { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 560px; margin: 0 auto 16px; }
.invite-form { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; text-align: left; }
.invite-label { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.65; }
.invite-login { display: block; width: 100%; box-sizing: border-box; text-decoration: none; }
.invite .cta-primary, .invite .cta-secondary { cursor: pointer; border: 0; font: inherit; font-weight: 700; text-align: center; }
.cta-secondary { background: var(--white); color: var(--mint-text); border: 2px solid var(--mint-text) !important; border-radius: 8px; padding: 12px 24px; }
.cta-secondary:hover { background: var(--pale); }
.invite-msg { font-size: 14px; font-weight: 700; color: var(--ink); background: var(--pale); border-left: 4px solid var(--mint-text); padding: 10px 14px; width: 100%; }
.cta-steps { list-style: none; counter-reset: step; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 14px; color: var(--ink); }
.cta-steps li { counter-increment: step; }
.cta-steps li::before { content: counter(step) ". "; font-weight: 700; color: var(--mint-text); }
.top-note { font-size: 12px; color: var(--muted); text-align: center; }
#notify .top-note { color: #526b66; } /* 薄緑(#e8f7f3)の上で5.21:1。--mutedは4.32:1で足りない（#262） */

/* 02 ヒーロー */
.hero { background: var(--light); padding: 72px 24px; text-align: center; }
.hero-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.hero-kicker { font-size: 14px; color: var(--muted); }
.hero h1 { font-size: 44px; font-weight: 700; line-height: 1.65; }
.hero h1 span { display: block; text-wrap: balance; }
.hero-text { font-size: 17px; color: var(--muted); max-width: 1000px; }
.hero-text p + p { margin-top: 0; }

/* 04 無料と有料の範囲 */
.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1119px; margin: 28px auto 0; }
.scope-card { background: var(--pale); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.scope-card .scope-name { font-size: 17px; font-weight: 700; }
.scope-card .scope-value { font-size: 28px; font-weight: 700; color: var(--mint-text); line-height: 1.65; }
.scope-card .scope-detail { font-size: 14px; color: var(--muted); }
.scope-note { margin-top: 28px; }

/* 05 ご利用の流れ */
.flow-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.flow-card { background: var(--pale); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.flow-card-dark { background: var(--ink); color: var(--white); }
.flow-num { font-size: 13px; font-weight: 700; color: var(--mint-text); display: flex; gap: 8px; }
.flow-num span { color: var(--ink); font-weight: 400; }
.flow-card-dark .flow-num { color: #66cbb6; } /* 濃緑(#2e4a44)の上で4.95:1。--mintは4.06:1で足りない（#262） */
.flow-card-dark .flow-num span { color: #66cbb6; }
/* 挿絵は viewBox の比率で領域を確保し、読み込み時のずれと縮小時の崩れを防ぐ */
.flow-illust { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; margin: 4px 0 8px; }
.flow-title { font-size: 20px; font-weight: 700; text-wrap: balance; }
.flow-desc { font-size: 14px; color: var(--muted); }
.flow-card-dark .flow-desc { color: var(--white); }
.flow-note { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* 08 時間プラン */
.plans-title { font-size: 30px; }
.plans-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-top: 28px; }
.plan-card {
  background: var(--white); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; text-align: left;
  text-decoration: none; color: inherit; border: 1px solid transparent;
}
.plan-card:hover { border-color: var(--mint); box-shadow: 0 6px 20px rgba(74, 186, 164, .18); }
.plan-hours { font-size: 18px; font-weight: 700; color: var(--mint-text); line-height: 1.4; }
.plan-price { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.plan-per { font-size: 13px; color: var(--muted); }
.plan-buy {
  display: block; margin-top: auto; text-align: center;
  background: var(--mint-text); color: var(--white);
  font-size: 13px; font-weight: 700; padding: 10px 12px; border-radius: 8px;
}
.plan-card:hover .plan-buy { background: #1d6154; }
.plans-check-wrap { text-align: center; margin-top: 28px; }
.plans-check {
  display: inline-block; text-decoration: none;
  font-size: 15px; font-weight: 700; color: var(--mint-text);
  border: 2px solid var(--mint-text); border-radius: 8px; padding: 12px 24px; background: transparent;
}
.plans-check:hover { background: var(--mint-text); color: var(--white); }
.plans-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 28px; }

/* 09 フッター */
.top-footer { background: var(--white); padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; font-size: 13px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-project { font-size: 14px; font-weight: 700; }
.footer-tagline { font-size: 12px; color: var(--muted); }

/* スマホ */
@media (max-width: 960px) {
  .scope-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .scope-card { min-width: 0; overflow-wrap: anywhere; } /* 200%拡大の狭い幅で「30,000円〜」などが枠を押し広げない（#261） */
  .flow-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .plans-grid .plan-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .top-section { padding: 48px 16px; }
  .hero { padding: 48px 16px; }
  .hero-inner { gap: 20px; }
  .hero h1 { font-size: clamp(19px, 5.6vw, 26px); }
  .hero-text { font-size: 15px; }
  .top-heading { font-size: 22px; }
  .plans-title { font-size: 24px; }
  .plans-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .plans-grid .plan-card:last-child { grid-column: auto; }
  .plan-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
  .plan-hours { flex: 0 0 auto; min-width: 4.5em; }
  .plan-price { flex: 1 1 auto; }
  .plan-per { flex: 1 0 100%; }
  .plan-per br { display: none; }
  .plans-check { padding: 12px 16px; font-size: 14px; }
  .plan-buy { flex: 1 0 100%; margin-top: 8px; }
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-card { min-width: 0; }
  .plan-price { min-width: 0; overflow-wrap: anywhere; }
  .plan-buy { overflow-wrap: anywhere; }
  .cta-group { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .cta-primary { padding: 16px 20px; font-size: 15px; }
  .cta-pending, .cta-available { padding: 12px 20px; font-size: 15px; }
  .cta-steps { flex-direction: column; align-items: center; gap: 4px; }
  .footer-links { gap: 12px 24px; }
}
/* 375/390pxのスマホを200%拡大（CSS幅 約187/195px）しても料金カードがはみ出さないように（#261） */
@media (max-width: 360px) {
  #time-plans.top-section { padding-left: 12px; padding-right: 12px; }
  .plan-card { padding: 14px; }
  .plan-hours { font-size: 16px; min-width: 0; }
  .plan-price { font-size: clamp(17px, 9vw, 24px); }
  .plan-buy { padding: 10px 8px; }
  .plans-check { padding: 10px 12px; }
  .consult-box { padding: 20px 12px; }
  .cta-pending, .cta-available { flex-wrap: wrap; gap: 4px 8px; padding: 10px 12px; }
  .cta-pending-badge, .cta-available-badge { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* 02 ヒーロー：ログイン不要のAI概算（#234。Figma node 3:16・130:208）。PCは左に説明・右に入力、スマホは縦に並べる */
.hero-estimate { text-align: left; }
.hero-split { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.hero-estimate .hero-kicker { font-weight: 700; color: var(--ink); }
.hero-estimate h1 { font-size: 40px; line-height: 1.5; }
.hero-estimate .hero-text { max-width: 560px; }
.hero-note { font-size: 13px; color: var(--muted); }
.estimate-card { background: var(--white); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; box-shadow: 0 1px 2px rgba(46, 74, 68, .08); }
.estimate-title { font-size: 18px; font-weight: 700; line-height: 1.5; }
.estimate-form { display: flex; flex-direction: column; gap: 8px; }
.estimate-label { font-size: 13px; color: var(--muted); font-weight: 700; }
.estimate-input { width: 100%; max-width: 100%; font: inherit; font-size: 16px; color: var(--ink); line-height: 1.65; padding: 12px 14px; border: 1px solid #8fa5a0; border-radius: 8px; background: var(--white); resize: vertical; }
.estimate-input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.estimate-hint { font-size: 12px; color: var(--muted); }
.estimate-more[hidden] { display: none; }
.estimate-more { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.estimate-first[hidden] { display: none; }
.estimate-first { display: flex; flex-direction: column; gap: 8px; }
.estimate-thread { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.estimate-msg { border-radius: 10px; padding: 10px 14px; overflow-wrap: anywhere; max-width: 92%; }
.estimate-msg.is-user { align-self: flex-end; background: #e6f2ef; white-space: pre-wrap; }
.estimate-msg.is-ai { align-self: flex-start; background: var(--pale); border-left: 4px solid var(--mint-text); }
.estimate-who { font-size: 12px; color: var(--muted); font-weight: 700; white-space: normal; }
.estimate-question { font-weight: 700; }
.estimate-submit, .estimate-human { display: block; width: 100%; text-align: center; background: var(--ink); color: var(--white); border: 0; border-radius: 8px; padding: 14px 20px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; margin-top: 8px; }
.estimate-submit:hover, .estimate-human:hover { background: #1f3631; }
.estimate-submit:disabled { background: #8a9a96; cursor: wait; }
.estimate-submit:focus-visible, .estimate-human:focus-visible, .estimate-again:focus-visible { outline: 3px solid var(--mint-text); outline-offset: 3px; }
.estimate-panel { background: var(--pale); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.estimate-panel:focus { outline: none; }
.estimate-panel:focus-visible { outline: 3px solid var(--mint-text); outline-offset: 2px; }
.estimate-panel-label { font-size: 12px; color: var(--muted); font-weight: 700; }
.estimate-panel.is-error { background: #fdf3f1; }
.estimate-figure { font-size: 18px; font-weight: 700; line-height: 1.6; }
.estimate-list { padding-left: 1.2em; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.estimate-small { font-size: 13px; color: var(--muted); }
.estimate-flow { font-size: 13px; font-weight: 700; }
.estimate-lead { font-weight: 700; line-height: 1.7; }
.estimate-invoice-step { display: flex; flex-direction: column; gap: 8px; }
.estimate-invoice-step:focus { outline: none; }
.estimate-invoice-plan { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line, #c9d6d2); border-radius: 8px; background: var(--white, #fff); color: inherit; max-width: 100%; }
.estimate-invoice-error { color: #a33a2b; font-size: 14px; font-weight: 700; }
.estimate-human:disabled, .estimate-again:disabled { opacity: .6; cursor: default; }
.estimate-details { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.estimate-details > summary { cursor: pointer; color: var(--mint-text); font-weight: 700; font-size: 14px; padding: 4px 0; }
.estimate-details > summary:focus-visible { outline: 3px solid var(--mint-text); outline-offset: 2px; }
.estimate-details[open] > summary { margin-bottom: 4px; }
.estimate-request { border: 1px solid #c9d6d2; border-radius: 8px; padding: 10px 14px; white-space: pre-wrap; font-size: 14px; }
.estimate-again { background: none; border: 0; padding: 4px 0; color: var(--mint-text); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; align-self: flex-start; }
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; max-width: 640px; }
}
@media (max-width: 600px) {
  .hero-estimate h1 { font-size: clamp(24px, 7.4vw, 30px); }
  .hero-copy { gap: 16px; }
  .estimate-card { padding: 16px; }
  .estimate-figure { font-size: 16px; }
}
/* 追い質問の選択肢（#234）。押すとその文を回答として送る */
.estimate-options { display: flex; flex-direction: column; gap: 8px; }
.estimate-options[hidden] { display: none; }
.estimate-option { display: block; width: 100%; text-align: left; background: var(--white); color: var(--ink); border: 2px solid var(--mint-text); border-radius: 8px; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.estimate-option:hover { background: var(--pale); }
.estimate-option:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* 概算のあとの「精度を上げる質問」と精度のメーター（#270） */
.estimate-precision { display: flex; flex-direction: column; gap: 4px; }
.estimate-precision-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--mint-text); }
.estimate-precision-bar { height: 8px; border-radius: 4px; background: #d6e3dc; overflow: hidden; }
.estimate-precision-fill { display: block; height: 100%; background: var(--mint-text); transition: width .3s; }
.estimate-refine { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #d6e3dc; border-radius: 10px; }
.estimate-refine .estimate-question { margin: 0; font-weight: 700; }
.estimate-history { display: block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--mint-text); text-align: center; }
.estimate-scope { margin: 0; padding: 10px 12px; border-left: 4px solid var(--mint-text); background: var(--white); font-size: 14px; line-height: 1.7; }
.estimate-option:disabled { opacity: .5; cursor: wait; }
.estimate-refine-other { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.estimate-refine-other > summary { cursor: pointer; color: var(--mint-text); font-weight: 700; }
.estimate-refine-other[open] { gap: 6px; }
@media (prefers-reduced-motion: reduce) { .estimate-precision-fill { transition: none; } }
.estimate-permalink { font-size: 13px; word-break: break-all; color: var(--mint-text); font-weight: 700; }
/* 濃緑のヒーロー（#262。Figma Desktop 3:16 / Mobile 45:163）。白の入力カードはそのまま */
.hero.hero-estimate { background: var(--ink); color: var(--white); padding: 64px 24px; }
.hero-split { align-items: center; }
.hero-estimate .hero-kicker { color: var(--white); font-weight: 400; }
.hero-estimate h1 { color: var(--white); line-height: 1.45; }
.hero-estimate h1 .hero-h1-ai { color: var(--mint); } /* 大きな見出しなので 4.0:1（3:1以上）で可 */
.hero-estimate .hero-text { color: var(--light); }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; width: 100%; }
.hero-illust { width: 240px; max-width: 100%; height: auto; flex: 0 1 240px; }
.hero-estimate .hero-note { color: var(--light); }
.estimate-card { border-radius: 20px; color: var(--ink); } /* ヒーローの白文字を引き継がない */
.estimate-title { font-size: 20px; }
/* 1列のとき（タブレット・スマホ）は入力カードを挿絵より先に出す（#262 の確定範囲。Figma 45:163 とは逆）。
   コピー→注記→入力カード→挿絵の順。DOMの順（＝キーボード操作の順）は変えない */
@media (max-width: 960px) {
  .hero-estimate .hero-copy, .hero-estimate .hero-actions { display: contents; }
  .hero-estimate .hero-split { gap: 16px; }
  .hero-estimate .hero-split > * { min-width: 0; }
  .hero-estimate .estimate-card { order: 1; margin-top: 16px; }
  .hero-estimate .hero-illust { order: 2; justify-self: center; width: 200px; margin-top: 8px; }
}
@media (max-width: 600px) {
  .hero.hero-estimate { padding: 32px 16px 40px; }
  .hero-estimate .hero-illust { width: 160px; }
  .estimate-card { border-radius: 16px; }
}
/* LP後半（#264。Figma PC 3:23・3:85・3:100・3:94／Mobile 45:189・45:251・45:260）。見出しは左寄せ・大きめ */
.top-heading-left { text-align: left; font-size: 38px; line-height: 1.42; text-wrap: pretty; }
/* 05 相談例：3つの困りごと。200%拡大などで列が狭くなっても、文字は折り返してカードの外に出さない */
.example-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.example-card { background: var(--pale); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow-wrap: anywhere; }
.example-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.example-title { font-size: 21px; font-weight: 700; line-height: 1.5; text-wrap: balance; }
.example-desc { font-size: 14px; line-height: 1.7; }
.example-image { background: var(--white); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 14px; font-size: 12px; color: var(--muted); line-height: 1.75; }
.example-cta { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; align-self: flex-start; }
.example-cta:hover { text-decoration: underline; }
/* 06 なぜ、TimeCrowdなのか */
.why-wrap { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 24px; }
.why-card { background: var(--ink); color: var(--white); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow-wrap: anywhere; }
.why-key { font-size: 24px; font-weight: 700; line-height: 1.58; color: var(--mint); } /* 大きな文字なので濃緑の上で3:1以上（4.0:1） */
.why-source { font-size: 15px; font-weight: 700; line-height: 1.67; }
.why-note { font-size: 13px; line-height: 1.77; }
.why-message { min-width: 0; font-size: 16px; line-height: 1.8; }
.why-message p + p { margin-top: 1.8em; }
.why-title { font-size: 27px; font-weight: 700; line-height: 1.4; margin-bottom: 1.1em; text-wrap: balance; }
/* 07 時間プランの下：人に相談する入口（Chatwork・Slack） */
#time-plans .plan-card { background: var(--pale); border-color: var(--light); }
#time-plans .plan-card:hover { border-color: var(--mint); }
.consult-box { margin: 40px auto 0; max-width: 760px; background: var(--light); border-radius: 20px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.consult-title { font-size: 22px; font-weight: 700; line-height: 1.5; }
.consult-text { font-size: 14px; color: var(--ink); max-width: 600px; }
.consult-text p + p { margin-top: 8px; }
.consult-box .invite { margin-bottom: 0; }
/* 08 末尾CTA：濃緑の帯から、ヒーローの無料AI概算へ戻す */
.closing-cta { background: var(--ink); color: var(--white); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.closing-title { font-size: 48px; font-weight: 700; line-height: 1.33; text-wrap: balance; }
.closing-lead { font-size: 16px; color: var(--light); max-width: 1120px; }
.closing-cta .closing-button { background: var(--mint); color: #1f3631; border-radius: 12px; min-width: 330px; max-width: 100%; } /* 5.4:1 */
.closing-cta .closing-button:hover { background: #5ccdb6; }
.closing-cta .closing-button:focus-visible { outline-color: var(--white); }
.closing-note { font-size: 13px; color: var(--light); }
@media (max-width: 960px) {
  .example-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .why-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 640px; margin-left: auto; margin-right: auto; }
  #services .top-heading-left, #why-timecrowd .top-heading-left { max-width: 560px; margin-left: auto; margin-right: auto; }
  #why-timecrowd .top-heading-left { max-width: 640px; }
}
@media (max-width: 600px) {
  .top-heading-left { font-size: 26px; }
  .why-title { font-size: 21px; }
  .consult-box { padding: 24px 16px; }
  .closing-title { font-size: 28px; }
  .closing-cta { gap: 20px; }
  .closing-cta .closing-button { min-width: 0; width: 100%; max-width: 360px; }
}
/* AI見積フォームの簡潔化（#286。Figma 206:425 / 231:1096）：機密注意の下に Slack・Chatwork のアイコン。
   見出し・入力欄のラベルは支援技術向けに残して見た目だけ隠し、空の結果欄は畳む */
.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; }
.estimate-panel:empty { display: none; }
.estimate-chat-entry { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.estimate-notice { font-size: 12px; line-height: 1.7; color: var(--ink); text-align: center; text-wrap: pretty; overflow-wrap: anywhere; }
.estimate-chat-icons { display: flex; justify-content: center; gap: 8px; }
.estimate-chat-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; }
.estimate-chat-icon svg { width: 24px; height: 24px; }
.estimate-chat-icon:hover { background: var(--pale); }
.estimate-chat-icon:focus-visible { outline: 3px solid var(--mint-text); outline-offset: 2px; }
/* hover / focus で目的を出す（aria-label と同じ文）。隠している間は display:none（visibility だけだと狭い幅・200%拡大で横スクロールの原因になる：#261） */
.estimate-chat-icon::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; line-height: 1.5; padding: 4px 8px; border-radius: 6px; pointer-events: none; z-index: 1; display: none; }
.estimate-chat-icon:hover::after, .estimate-chat-icon:focus-visible::after { display: block; }
.estimate-chat-note { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line, #d9e2e0); border-radius: 12px; font-size: 14px; overflow-wrap: anywhere; }
.estimate-chat-note[hidden] { display: none; }
.estimate-chat-note .estimate-human { margin-top: 0; }
/* Figma差分の仕上げ（#295）：無料／有料は薄緑の帯に白いカード（Figma 3:49 / 45:215）。値の大きさで 0円 ＞ 30,000円〜 ＞ 使った時間だけ の強弱 */
#pricing .scope-card { background: var(--white); }
#pricing .top-lead, #pricing .scope-note { color: var(--ink); text-align: left; } /* --muted は薄緑の上で4.3:1のため本文色（8.7:1） */
.scope-card .scope-value-free { font-size: 56px; line-height: 1.2; }
.scope-card .scope-value-price { font-size: 34px; line-height: 1.4; }
.scope-card .scope-value-usage { font-size: 26px; line-height: 1.5; }
/* 見出しの階層（Figma Desktop：ヒーロー52px、各セクション38px・左揃え）。中間の幅では自然に縮める */
.hero-estimate h1 { font-size: clamp(36px, 4.4vw, 52px); }
.top-heading-left + .top-lead { text-align: left; }
.plans-title.top-heading-left { font-size: 38px; }
@media (max-width: 600px) {
  .hero-estimate h1 { font-size: clamp(24px, 7.4vw, 30px); }
  .plans-title.top-heading-left { font-size: 26px; }
  .scope-card .scope-value-free { font-size: 44px; }
  .scope-card .scope-value-price { font-size: 30px; }
  .scope-card .scope-value-usage { font-size: 24px; }
}