/* ============================================================
   Partner Drive LP — style.css
   Design tokens: synergeee design system (colors_and_type.css)
   Design source: claude.ai/design 「コンサル向けLP改善」Partner Drive LP.dc.html
   ============================================================ */
:root {
  /* ——— Font ——— */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;

  /* ——— Text ——— */
  --text-basic: #353535;
  --text-subtle: #7d7d7d;
  --text-primary: #574bfe;
  --text-inverse: #ffffff;
  --text-secondary: #e96c2d;
  --text-placeholder: #cbcbcb;

  /* ——— Surfaces ——— */
  --surface-basic: #ffffff;
  --surface-subtle: #f9f9f9;
  --surface-primary: #574bfe;
  --surface-primary-light: #f5f7ff;
  --surface-primary-middle: #919ff8;
  --surface-primary-subtle: #d8defc;
  --surface-secondary: #e96c2d;
  --surface-inverse: #464646;

  /* ——— Backgrounds ——— */
  --background-subtle: #f5f7ff;

  /* ——— Borders ——— */
  --border-basic: #cbcbcb;
  --border-subtle: #eaeaea;
  --border-primary: #574bfe;

  /* ——— Spacing ——— */
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 32px;
  --spacing-xl: 40px;

  /* ——— Radii ——— */
  --radius-form: 12px;
  --radius-button: 16px;
  --radius-card: 24px;
  --radius-window: 32px;
  --radius-infinity: 999px;

  /* ——— Shadows ——— */
  --shadow-card: 0px 0px 10px 0px rgba(0, 0, 0, 0.05),
    0px 8px 16px 0px rgba(0, 0, 0, 0.07);
  --shadow-header: 0px 11px 24px 0px rgba(0, 0, 0, 0.1);
  --shadow-section: 0px 59px 59px 0px rgba(0, 0, 0, 0.05),
    0px 11px 24px 0px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0px 9px 39px 0px rgba(87, 75, 254, 0.15),
    0px 8px 24px 0px rgba(87, 75, 254, 0.33);

  /* ——— Brand gradient ——— */
  --gradient-sidebar: linear-gradient(177deg, #6f00ed 0%, #4538fc 48.86%, #3e8ef7 97.72%);

  --hover-primary: #6771f6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--text-basic);
  background: var(--background-subtle);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-button);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
  cursor: pointer;
  border: none;
  line-height: 1.4;
  font-family: inherit;
}
.btn svg { flex-shrink: 0; }
.btn-primary {
  background: var(--surface-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover { background: var(--hover-primary); transform: translateY(-2px); }
.btn-white {
  background: var(--surface-basic);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}
.btn-white:hover { color: var(--hover-primary); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--text-inverse);
  border: 1px solid rgba(255, 255, 255, .5);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-outline {
  background: var(--surface-basic);
  color: var(--text-basic);
  border: 1px solid var(--border-basic);
}
.btn-outline:hover { color: var(--text-subtle); }
.btn-lg { padding: 16px 40px; font-size: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--surface-basic);
  box-shadow: var(--shadow-header);
}
.site-header .inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { text-decoration: none; display: flex; align-items: baseline; gap: 14px; color: var(--text-basic); }
.brand .logo {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand .logo .dot { color: var(--text-primary); }
.brand .byline { font-size: 12px; color: var(--text-subtle); font-weight: 400; }
.header-cta { display: flex; gap: 12px; align-items: center; }
.header-cta .btn { padding: 10px 22px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  padding: var(--spacing-m);
  max-width: 1400px;
  margin: 0 auto;
}
.hero-card {
  background: var(--gradient-sidebar);
  border-radius: var(--radius-window);
  padding: 88px 80px;
  box-shadow: var(--shadow-section);
}
.hero-eyebrow {
  display: inline-flex;
  padding: 8px 20px;
  border-radius: var(--radius-infinity);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  color: var(--text-inverse);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hero h1 {
  margin: 28px 0 0;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--text-inverse);
  letter-spacing: .02em;
}
.hero h1 .accent { color: #bae1ff; }
.hero .lead {
  margin: 24px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 2;
  color: rgba(255, 255, 255, .86);
}
.hero-stats {
  display: flex;
  gap: var(--spacing-s);
  margin-top: var(--spacing-xl);
  flex-wrap: wrap;
}
.stat-chip {
  background: var(--surface-basic);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 28px;
  min-width: 180px;
}
.stat-chip .label { font-size: 13px; color: var(--text-subtle); }
.stat-chip .value { font-size: 26px; line-height: 34px; font-weight: 700; margin-top: 4px; }
.stat-chip .value small { font-size: 15px; font-weight: 700; }
.hero-cta { display: flex; gap: var(--spacing-s); margin-top: var(--spacing-xl); flex-wrap: wrap; }

/* ---------- Section common ---------- */
.section-head { text-align: center; }
.section-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-primary);
}
.section-head h2 {
  margin: 14px 0 0;
  font-size: 30px;
  line-height: 1.5;
  font-weight: 700;
}

/* ---------- Pain (Problem) ---------- */
.pain { max-width: 1000px; margin: 0 auto; padding: 88px 24px 40px; }
.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-s);
  margin-top: var(--spacing-xl);
}
.pain-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-basic);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
}
.pain-card .mark {
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-infinity);
  background: var(--surface-primary-subtle);
  color: var(--text-primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pain-card span:last-child { font-size: 15px; line-height: 1.6; font-weight: 700; }
.pain-bridge { text-align: center; margin-top: var(--spacing-xl); }
.pain-bridge p { margin-top: 20px; font-size: 21px; font-weight: 700; }
.pain-bridge p .accent { color: var(--text-primary); }

/* ---------- Results ---------- */
.results { max-width: 1100px; margin: 0 auto; padding: 72px 24px 24px; }
.results-card {
  background: var(--surface-basic);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-section);
  margin-top: var(--spacing-xl);
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.results-client {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: var(--radius-infinity);
  background: var(--surface-primary-light);
  border: 1px solid var(--surface-primary-subtle);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}
.results-card h3 { margin: 20px 0 0; font-size: 25px; line-height: 1.55; font-weight: 700; }
.results-card h3 .accent { color: var(--text-primary); }
.results-card .desc { margin: 14px 0 0; font-size: 15px; line-height: 1.8; color: var(--text-subtle); }
.results-viz { display: flex; align-items: center; gap: 20px; }
.results-viz .step { text-align: center; }
.results-viz .step .when { font-size: 13px; color: var(--text-subtle); }
.results-viz .circle-before {
  margin: 8px auto 0;
  width: 96px; height: 96px;
  border-radius: var(--radius-infinity);
  background: var(--surface-primary-light);
  border: 1px solid var(--surface-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-subtle);
}
.results-viz .circle-after {
  margin: 8px auto 0;
  width: 128px; height: 128px;
  border-radius: var(--radius-infinity);
  background: var(--surface-primary);
  box-shadow: var(--shadow-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-inverse);
}
.results-note {
  text-align: center;
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--text-placeholder);
}

/* ---------- Approach (Points) ---------- */
.points { max-width: 1100px; margin: 0 auto; padding: 72px 24px 24px; }
.point-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 72px;
}
.point-row + .point-row { margin-top: 88px; }
.point-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-primary);
}
.point-body h3 { margin: 16px 0 0; font-size: 25px; line-height: 1.45; font-weight: 700; }
.point-body p { margin: 16px 0 0; font-size: 16px; line-height: 1.9; color: var(--text-subtle); }
.point-visual {
  background: var(--surface-basic);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Point1: 制度スタック */
.viz-stack { flex-direction: column; }
.viz-stack .bar {
  padding: 9px 0;
  text-align: center;
  border-radius: var(--radius-form);
  font-size: 13px;
  font-weight: 700;
}
.viz-stack .bar-1 { width: 220px; background: var(--surface-primary-light); border: 1px solid var(--surface-primary-subtle); color: var(--text-basic); }
.viz-stack .bar-2 { width: 190px; background: var(--surface-primary-subtle); color: var(--text-primary); }
.viz-stack .bar-3 { width: 160px; background: var(--surface-primary-middle); color: var(--text-inverse); }
.viz-stack .bar-4 { width: 130px; background: var(--surface-primary); color: var(--text-inverse); box-shadow: var(--shadow-primary); }
/* Point2: 資料レビュー */
.viz-review { gap: 20px; }
.viz-review .doc {
  width: 120px; height: 150px;
  border-radius: var(--radius-form);
  background: var(--surface-primary-light);
  border: 1px solid var(--surface-primary-subtle);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.viz-review .doc .line { height: 8px; border-radius: 4px; background: var(--surface-primary-subtle); }
.viz-review .doc .line:nth-child(1) { width: 80%; }
.viz-review .doc .line:nth-child(2) { width: 65%; }
.viz-review .doc .line:nth-child(3) { width: 72%; }
.viz-review .doc .block { height: 26px; width: 55%; border-radius: 6px; background: var(--surface-primary-middle); margin-top: auto; }
.viz-dots { width: 44px; border-top: 3px dotted var(--surface-primary-middle); }
.viz-check {
  width: 64px; height: 64px;
  border-radius: var(--radius-infinity);
  background: var(--surface-primary);
  box-shadow: var(--shadow-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Point3: 経営⇄現場 */
.viz-bridge .node {
  width: 76px; height: 76px;
  border-radius: var(--radius-infinity);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viz-bridge .node-mgmt { background: var(--surface-inverse); }
.viz-bridge .node-field { background: var(--surface-primary); box-shadow: var(--shadow-primary); }
.viz-bridge .viz-dots { width: 40px; }
.viz-bridge .hub {
  width: 52px; height: 52px;
  border-radius: var(--radius-infinity);
  border: 2px solid var(--border-primary);
  background: var(--surface-basic);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Point4: 部分発注グリッド */
.viz-grid {
  display: grid;
  grid-template-columns: repeat(3, 84px);
  grid-auto-rows: 68px;
  gap: 12px;
}
.viz-grid .cell {
  border-radius: var(--radius-form);
  background: var(--surface-primary-light);
  border: 1px solid var(--surface-primary-subtle);
}
.viz-grid .cell.on {
  background: var(--surface-primary);
  border: none;
  box-shadow: var(--shadow-primary);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Features ---------- */
.features { max-width: 1100px; margin: 0 auto; padding: 88px 24px 24px; }
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-m);
  margin-top: var(--spacing-xl);
}
.feature-card {
  background: var(--surface-basic);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px 36px;
}
.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-button);
  background: var(--surface-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
}
.feature-card h3 { margin: 20px 0 0; font-size: 18px; line-height: 1.55; font-weight: 700; }
.feature-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.8; color: var(--text-subtle); }

/* ---------- Pricing ---------- */
.pricing { max-width: 1160px; margin: 0 auto; padding: 88px 24px 48px; }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-m);
  margin-top: 56px;
  align-items: stretch;
}
.price-card {
  position: relative;
  background: var(--surface-basic);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}
.price-card.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-primary);
  pointer-events: none;
}
.price-card .badge {
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  background: var(--surface-secondary);
  color: var(--text-inverse);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 20px;
  border-radius: var(--radius-infinity);
  white-space: nowrap;
}
.price-card .plan-name { font-size: 20px; font-weight: 700; }
.price-card .plan-desc {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-subtle);
  min-height: 46px;
}
.price-card .price { margin-top: 20px; }
.price-card .price .amount { font-size: 34px; font-weight: 700; }
.price-card .price .unit { font-size: 14px; color: var(--text-subtle); }
.price-card .price-note { font-size: 12px; color: var(--text-subtle); margin-top: 4px; }
.price-card hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 24px 0;
}
.price-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  line-height: 1.6;
  flex-grow: 1;
}
.price-card ul li { display: flex; gap: 10px; align-items: flex-start; }
.price-card ul li svg { flex: none; margin-top: 3px; }
.price-card .btn { margin-top: 32px; width: 100%; }
.pricing-note {
  text-align: center;
  margin: 40px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-subtle);
}

/* ---------- CTA band ---------- */
.cta { padding: 48px 24px 24px; max-width: 1400px; margin: 0 auto; }
.cta-card {
  background: var(--gradient-sidebar);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-section);
  padding: 72px 48px;
  text-align: center;
}
.cta-card h2 {
  font-size: 30px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--text-inverse);
}
.cta-card p { margin: 16px 0 0; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, .85); }
.cta-card .actions {
  display: flex;
  gap: var(--spacing-s);
  justify-content: center;
  margin-top: var(--spacing-l);
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.site-footer {
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer .logo { font-size: 17px; font-weight: 700; }
.site-footer .logo .dot { color: var(--text-primary); }
.site-footer .copy { font-size: 12px; color: var(--text-placeholder); margin-top: 6px; }
.site-footer nav { display: flex; gap: var(--spacing-m); font-size: 14px; }
.site-footer nav a { color: var(--text-subtle); text-decoration: none; }
.site-footer nav a:hover { color: var(--text-primary); }

/* ---------- Form pages ---------- */
.form-page { min-height: 100vh; padding: 56px 0 40px; }
.form-wrap { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.form-head { text-align: center; margin-bottom: 36px; }
.form-head h1 { font-size: clamp(24px, 3.6vw, 30px); font-weight: 700; margin-bottom: 12px; }
.form-head p { color: var(--text-subtle); font-size: 14.5px; }
.form-card {
  background: var(--surface-basic);
  border-radius: var(--radius-card);
  padding: 44px 42px;
  box-shadow: var(--shadow-card);
}
.field { margin-bottom: 24px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.field label .req {
  display: inline-block;
  background: var(--surface-secondary);
  color: var(--text-inverse);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: 2px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-form);
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  background: var(--surface-subtle);
  transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--border-primary);
  background: var(--surface-basic);
}
.field textarea { min-height: 140px; resize: vertical; }
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--text-subtle);
  margin-bottom: 28px;
}
.consent input { margin-top: 5px; width: 16px; height: 16px; accent-color: var(--surface-primary); }
.consent a { color: var(--text-primary); }
.form-msg { display: none; border-radius: var(--radius-form); padding: 14px 18px; font-size: 14px; font-weight: 700; margin-bottom: 20px; }
.form-msg.success { background: #f1fcf3; color: #22973f; }
.form-msg.error { background: #fff0f1; color: #e41e1e; }
.back-link { display: block; text-align: center; margin-top: 26px; font-size: 13.5px; color: var(--text-subtle); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .brand .byline { display: none; }
  .header-cta .btn-outline { display: none; }
  .hero { padding: var(--spacing-s); }
  .hero-card { padding: 56px 28px; }
  .pain, .results, .points, .features, .pricing { padding-top: 64px; }
  .pain-grid { grid-template-columns: 1fr; }
  .results-card { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
  .results-viz { justify-content: center; }
  .point-row { grid-template-columns: 1fr; gap: 24px; margin-top: 56px; }
  .point-row + .point-row { margin-top: 64px; }
  .point-row .point-visual { order: -1; height: 220px; }
  .viz-grid { grid-template-columns: repeat(3, 72px); grid-auto-rows: 56px; }
  .feature-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .price-card.featured { order: -1; }
  .cta-card { padding: 56px 24px; }
  .form-card { padding: 32px 24px; }
}