/* =========================================================================
   積算見積AI ｜ デザインシステム
   業務用SaaSの落ち着きと、資金調達フェーズの製品の精緻さを両立させる。
   ライトテーマ固定（現場の日中利用・入札業務のため）。
   ========================================================================= */

:root {
  /* --- タイポグラフィ --- */
  --font: "Inter", "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN",
          "Yu Gothic UI", Meiryo, sans-serif;

  /* --- ニュートラル（わずかに青みのある温かいグレー） --- */
  --ink-950:#0b1220; --ink-900:#111827; --ink-800:#1f2937; --ink-700:#374151;
  --ink-600:#4b5563; --ink-500:#616a78; --ink-400:#9ca3af; --ink-300:#d1d5db;
  --ink-200:#e5e7eb; --ink-100:#f3f4f6; --ink-50:#f9fafb;

  --bg:#f6f7fb;             /* ページ背景 */
  --surface:#ffffff;        /* カード面 */
  --surface-2:#fbfcfe;      /* 一段沈んだ面 */
  --line:#e8ebf1;           /* 標準の境界線 */
  --line-strong:#d7dce6;

  /* --- ブランド（インディゴ〜バイオレットの品のある勾配） --- */
  --brand-700:#4338ca; --brand-600:#4f46e5; --brand-500:#6366f1;
  --brand-100:#e0e7ff; --brand-50:#eef2ff;
  --brand-grad:linear-gradient(135deg,#4f46e5 0%,#6d5ef0 55%,#7c6cf5 100%);

  /* --- 状態色 --- */
  --ok-700:#047857; --ok-600:#059669; --ok-100:#d1fae5; --ok-50:#ecfdf5;
  --warn-700:#b45309; --warn-600:#d97706; --warn-100:#fef3c7; --warn-50:#fffbeb;
  --danger-700:#be123c; --danger-600:#e11d48; --danger-100:#ffe4e6; --danger-50:#fff1f2;
  --info-700:#0369a1; --info-100:#e0f2fe; --info-50:#f0f9ff;

  /* --- 影（多層・低彩度で上質に） --- */
  --sh-xs:0 1px 2px rgba(16,24,40,.05);
  --sh-sm:0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --sh-md:0 4px 12px -2px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);
  --sh-lg:0 16px 40px -12px rgba(16,24,40,.18), 0 4px 12px -4px rgba(16,24,40,.08);
  --sh-brand:0 12px 30px -10px rgba(79,70,229,.5);

  /* --- 角丸 --- */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* --- レイアウト --- */
  --maxw:1140px;
  --ease:cubic-bezier(.4,0,.2,1);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  color:var(--ink-800); background:var(--bg); line-height:1.7; font-size:15px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"palt" 1;
  overflow-x:clip; /* 装飾のはみ出しでページが横スクロールしないように（stickyは維持） */
}
a { color:inherit; text-decoration:none; }
::selection { background:var(--brand-100); }
:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; border-radius:4px; }

.tabular { font-variant-numeric:tabular-nums; }

/* ---------------- ナビゲーション ---------------- */
.nav {
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in { max-width:var(--maxw); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:18px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:700; color:var(--ink-900); }
.brand .mark {
  width:34px; height:34px; border-radius:10px; background:var(--brand-grad);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:17px;
  box-shadow:var(--sh-brand);
}
.brand .t { font-size:15.5px; letter-spacing:.01em; line-height:1.25; }
.brand .t small { display:block; font-weight:500; font-size:11px; color:var(--ink-500); letter-spacing:0; }
.nav-links { margin-left:auto; display:flex; gap:3px; align-items:center; }
.nav-links a { font-size:13.5px; font-weight:500; color:var(--ink-600); padding:8px 14px; border-radius:var(--r-sm);
  transition:background .15s var(--ease), color .15s var(--ease); }
.nav-links a:hover { background:var(--ink-100); color:var(--ink-900); }
.nav-links a.active { color:var(--brand-600); background:var(--brand-50); font-weight:600; }
.nav-links a.cta { background:var(--ink-900); color:#fff; padding:8px 16px; }
.nav-links a.cta:hover { background:var(--ink-800); }

/* ---------------- レイアウト ---------------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:40px 24px 80px; }
.narrow { max-width:840px; }
section { scroll-margin-top:80px; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--brand-600);
  background:var(--brand-50); padding:5px 13px; border-radius:var(--r-full); border:1px solid var(--brand-100); }

h1 { font-size:clamp(28px,4vw,42px); font-weight:800; line-height:1.15; letter-spacing:-.02em; color:var(--ink-950); }
h2 { font-size:20px; font-weight:700; color:var(--ink-900); letter-spacing:-.01em; }
h2.sec { font-size:clamp(22px,2.6vw,28px); }
h3 { font-size:15.5px; font-weight:700; color:var(--ink-900); }
p { color:var(--ink-600); }
.lead { font-size:clamp(16px,1.6vw,18px); color:var(--ink-600); line-height:1.75; }
.muted { color:var(--ink-500); font-size:13px; }
.note { font-size:12px; font-weight:400; color:var(--ink-500); margin-left:9px; }
.center { text-align:center; }
.gradient-text { background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------------- カード ---------------- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 28px; box-shadow:var(--sh-sm);
}
.card + .card { margin-top:18px; }
.card-h { display:flex; align-items:baseline; gap:8px; margin-bottom:16px; flex-wrap:wrap; }

/* ---------------- ボタン ---------------- */
.btn {
  --bg:var(--brand-600); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  background:var(--bg); color:var(--fg); border:1px solid transparent; font-family:inherit;
  font-weight:600; font-size:14px; padding:11px 22px; border-radius:var(--r); white-space:nowrap;
  transition:transform .12s var(--ease), box-shadow .18s var(--ease), background .15s var(--ease);
  box-shadow:var(--sh-xs);
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--sh-md); }
.btn:active { transform:translateY(0); }
.btn.primary { background:var(--brand-grad); box-shadow:var(--sh-brand); }
.btn.primary:hover { box-shadow:0 16px 36px -10px rgba(79,70,229,.6); }
.btn.dark { --bg:var(--ink-900); } .btn.dark:hover { background:var(--ink-800); }
.btn.ghost { --bg:var(--surface); --fg:var(--ink-700); border-color:var(--line-strong); box-shadow:var(--sh-xs); }
.btn.ghost:hover { background:var(--ink-50); }
.btn.sm { padding:8px 15px; font-size:13px; }
.btn.lg { padding:14px 30px; font-size:15px; }
.btn.block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.linkbtn { border:none; background:none; cursor:pointer; font-family:inherit; color:var(--ink-500);
  font-size:12px; text-decoration:underline; text-underline-offset:2px; }
.linkbtn:hover { color:var(--ink-800); }

/* ---------------- バッジ / チップ ---------------- */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600;
  padding:3px 10px; border-radius:var(--r-full); white-space:nowrap; line-height:1.4; }
.b-m1 { color:var(--ok-700); background:var(--ok-50); box-shadow:inset 0 0 0 1px var(--ok-100); }
.b-m2 { color:var(--info-700); background:var(--info-50); box-shadow:inset 0 0 0 1px var(--info-100); }
.b-m3 { color:var(--brand-600); background:var(--brand-50); box-shadow:inset 0 0 0 1px var(--brand-100); }
.b-m4 { color:var(--warn-700); background:var(--warn-50); box-shadow:inset 0 0 0 1px var(--warn-100); }
.b-manual { color:var(--ok-700); background:var(--ok-100); }
.b-ng { color:var(--danger-700); background:var(--danger-50); box-shadow:inset 0 0 0 1px var(--danger-100); }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500;
  color:var(--ink-600); background:var(--ink-100); padding:5px 12px; border-radius:var(--r-full); }

/* ---------------- テーブル ---------------- */
.scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.scroll::-webkit-scrollbar { height:9px; }
.scroll::-webkit-scrollbar-thumb { background:var(--ink-200); border-radius:var(--r-full); }
table { border-collapse:collapse; width:100%; font-size:13px; }
thead th { position:sticky; top:0; }
th { background:var(--surface-2); color:var(--ink-600); font-weight:600; text-align:left;
  padding:10px 12px; border-bottom:1px solid var(--line-strong); white-space:nowrap; font-size:12px; }
td { padding:9px 12px; border-bottom:1px solid var(--line); }
tbody tr { transition:background .12s var(--ease); }
tbody tr:hover td { background:var(--ink-50); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tr.warn td { background:var(--warn-50); } tr.warn:hover td { background:#fff4dd; }
tr.manual td { background:var(--ok-50); } tr.manual:hover td { background:#e3f9ee; }
.plain { border:none; background:none; }
.plain td, .plain th { border:none; }

/* ---------------- スタット（KPIカード） ---------------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:18px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-sm); position:relative; overflow:hidden; }
.stat.hl { border-color:var(--brand-500); box-shadow:0 0 0 1px var(--brand-500), var(--sh-md); }
.stat.hl::after { content:""; position:absolute; inset:0 0 auto auto; width:120px; height:120px;
  background:radial-gradient(circle at top right, rgba(99,102,241,.10), transparent 70%); }
.stat .k { font-size:12.5px; color:var(--ink-500); font-weight:500; }
.stat .v { font-size:30px; font-weight:800; color:var(--ink-950); margin-top:3px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.stat .v small { font-size:14px; color:var(--ink-500); font-weight:500; letter-spacing:0; }
.stat.hl .v { color:var(--brand-600); }
.stat .sub { font-size:12px; color:var(--ink-500); margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }

/* ---------------- バナー / コールアウト ---------------- */
.banner { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--warn-100);
  border-left:3px solid var(--warn-600); background:var(--warn-50); color:#7c4a03;
  font-size:13px; padding:12px 16px; border-radius:var(--r); margin-bottom:18px; }
.banner .ic { flex-shrink:0; }
.banner.red { border-color:var(--danger-100); border-left-color:var(--danger-600); background:var(--danger-50); color:var(--danger-700); }
.banner.green { border-color:var(--ok-100); border-left-color:var(--ok-600); background:var(--ok-50); color:var(--ok-700); }
.banner.info { border-color:var(--info-100); border-left-color:var(--info-700); background:var(--info-50); color:var(--info-700); }

/* ---------------- ドロップゾーン ---------------- */
.drop { display:block; border:2px dashed var(--line-strong); border-radius:var(--r-lg); padding:40px 22px;
  cursor:pointer; background:var(--surface-2); text-align:center;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); }
.drop:hover { border-color:var(--brand-500); background:var(--surface); }
.drop.over { border-color:var(--brand-600); background:var(--brand-50); transform:scale(1.01); }
.drop .di { font-size:34px; }

/* ---------------- ステップ ---------------- */
.step { display:flex; gap:16px; margin-bottom:22px; }
.step:last-child { margin-bottom:0; }
.step .n { flex-shrink:0; width:34px; height:34px; border-radius:var(--r-full); background:var(--brand-grad);
  color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-brand); }
.step h3 { margin-bottom:4px; }

/* ---------------- 要確認の解決ブロック ---------------- */
.resolve { border:1px solid var(--line); border-radius:var(--r); padding:15px 17px; margin-bottom:12px;
  background:var(--surface-2); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.resolve.resolving { opacity:0; transform:translateX(20px); }
.resolve select { padding:9px 11px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-size:13px; min-width:320px; font-family:inherit; background:#fff; color:var(--ink-800); }
.resolve select:focus { border-color:var(--brand-500); }
.resolve input[type=number] { width:96px; padding:8px 10px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); font-family:inherit; }
.flex { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------------- 進捗バー ---------------- */
.progress { height:8px; background:var(--ink-100); border-radius:var(--r-full); overflow:hidden; }
.progress .fill { height:100%; background:var(--brand-grad); border-radius:var(--r-full);
  transition:width .5s var(--ease); }

/* ---------------- スティッキー・アクションバー ---------------- */
.actionbar { position:sticky; top:60px; z-index:40; display:flex; align-items:center; gap:14px;
  padding:12px 16px; margin-bottom:16px; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm); flex-wrap:wrap; }

/* ---------------- トースト ---------------- */
#toasts { position:fixed; right:20px; bottom:20px; z-index:100; display:flex; flex-direction:column; gap:10px; }
.toast { display:flex; align-items:center; gap:10px; background:var(--ink-900); color:#fff;
  padding:12px 16px; border-radius:var(--r); box-shadow:var(--sh-lg); font-size:13.5px; font-weight:500;
  animation:toastIn .3s var(--ease); max-width:340px; }
.toast.ok { background:linear-gradient(135deg,#059669,#047857); }
.toast.info { background:var(--ink-900); }
.toast .ic { font-size:16px; }
@keyframes toastIn { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:none; } }
.toast.out { animation:toastOut .3s var(--ease) forwards; }
@keyframes toastOut { to { opacity:0; transform:translateX(20px); } }

/* ---------------- ヒーロー ---------------- */
.hero { position:relative; padding:24px 0 12px; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.hero h1 { margin:18px 0 0; }
.hero .lead { margin-top:18px; max-width:560px; }
.hero-cta { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.hero-trust { margin-top:22px; display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-500); }
.hero-trust span { display:inline-flex; align-items:center; gap:6px; }
.hero-art { position:relative; }
.bg-decor { position:absolute; inset:-8% 0 auto auto; width:min(58%,540px); height:420px; z-index:-1;
  background:radial-gradient(closest-side, rgba(99,102,241,.16), transparent);
  filter:blur(10px); pointer-events:none; }

/* 製品プレビュー（ミニ見積画面のモック） */
.mock { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-lg); overflow:hidden; }
.mock .bar { display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.mock .dot { width:10px; height:10px; border-radius:50%; background:var(--ink-200); }
.mock .body { padding:16px; }
.mock .mrow { display:flex; align-items:center; justify-content:space-between; padding:9px 10px;
  border-radius:var(--r-sm); font-size:12.5px; }
.mock .mrow + .mrow { margin-top:5px; }
.mock .mrow.on { background:var(--ok-50); }
.mock .mrow.warnrow { background:var(--warn-50); }
.mock .mrow .r { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-800); }
.mock .mtot { display:flex; justify-content:space-between; align-items:center; margin-top:12px;
  padding:12px 12px 4px; border-top:1px dashed var(--line-strong); }
.mock .mtot .big { font-size:22px; font-weight:800; color:var(--brand-600); font-variant-numeric:tabular-nums; }

/* ---------------- 特徴グリッド ---------------- */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.feat { border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; background:var(--surface);
  box-shadow:var(--sh-xs); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.feat:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
.feat .ic { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:21px; background:var(--brand-50); color:var(--brand-600); margin-bottom:14px; }
.feat h3 { margin-bottom:6px; }
.feat p { font-size:13.5px; }

/* ---------------- フロー（4ステップの帯） ---------------- */
.flow4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.flow4 .fstep { position:relative; padding:18px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-xs); }
.flow4 .fn { font-size:12px; font-weight:700; color:var(--brand-600); }
.flow4 h3 { margin:6px 0 4px; font-size:14.5px; }
.flow4 p { font-size:12.5px; }

/* ---------------- ストーリー（背景・目的） ---------------- */
.story { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.story .col { border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; background:var(--surface); box-shadow:var(--sh-xs); }
.story .col.problem { background:linear-gradient(180deg,#fff,var(--danger-50)); border-color:var(--danger-100); }
.story .col.solution { background:linear-gradient(180deg,#fff,var(--ok-50)); border-color:var(--ok-100); }
.story ul { list-style:none; margin-top:10px; }
.story li { display:flex; gap:9px; padding:6px 0; font-size:13.5px; color:var(--ink-700); }
.story li::before { content:""; flex-shrink:0; margin-top:9px; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.4; }

/* ---------------- CTA帯 ---------------- */
.cta-band { border-radius:var(--r-xl); padding:44px 40px; text-align:center; color:#fff;
  background:var(--brand-grad); box-shadow:var(--sh-lg); position:relative; overflow:hidden; }
.cta-band h2 { color:#fff; font-size:26px; }
.cta-band p { color:rgba(255,255,255,.85); margin-top:8px; }

/* ---------------- FAQ ---------------- */
.faq details { border:1px solid var(--line); border-radius:var(--r); padding:0; margin-bottom:10px; background:var(--surface); overflow:hidden; }
.faq summary { padding:15px 18px; cursor:pointer; font-weight:600; color:var(--ink-800); font-size:14.5px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"＋"; color:var(--ink-400); font-weight:400; }
.faq details[open] summary::after { content:"−"; }
.faq details[open] summary { border-bottom:1px solid var(--line); }
.faq .a { padding:14px 18px; font-size:13.5px; color:var(--ink-600); line-height:1.85; }

/* ---------------- 用語集 ---------------- */
.terms { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.term { border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--surface-2); }
.term dt { font-weight:700; color:var(--ink-900); font-size:14px; margin-bottom:3px; }
.term dd { font-size:13px; color:var(--ink-600); line-height:1.75; }

/* ---------------- セクション見出し ---------------- */
.sec-head { max-width:640px; margin-bottom:24px; }
.sec-head p { margin-top:10px; }

/* ---------------- フッター ---------------- */
.footer { border-top:1px solid var(--line); margin-top:56px; padding:28px 0 8px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer .muted { font-size:12px; }
.footer .fnav { display:flex; gap:16px; font-size:12.5px; color:var(--ink-500); }

/* ---------------- ユーティリティ ---------------- */
.mt8 { margin-top:8px; } .mt16 { margin-top:16px; } .mt24 { margin-top:24px; } .mt40 { margin-top:40px; }
.spacer { height:56px; }
.hr { height:1px; background:var(--line); border:none; margin:32px 0; }

/* ---------------- レスポンシブ ---------------- */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:28px; }
  .hero-art { order:-1; }
  .story { grid-template-columns:1fr; }
  .flow4 { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .wrap { padding:28px 16px 64px; }
  /* モバイルでもナビ項目を落とさない：ブランド副題を省き、リンクは折り返して全て表示 */
  .brand .t small { display:none; }
  .nav-in { flex-wrap:wrap; gap:8px 4px; padding:11px 14px; }
  .nav-links { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
  .nav-links a { padding:6px 9px; font-size:12.5px; }
  .flow4 { grid-template-columns:1fr; }
  .card { padding:20px; }
  .actionbar { top:56px; }
  .cta-band { padding:32px 22px; }
  .actionbar { gap:10px; }
}

/* アニメーションを控えたいユーザーへの配慮 */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}