:root {
  --um-primary: #2563EB;
  --um-primary-hover: #1D4ED8;
  --um-black: #0E0E10;
  --um-navy: #0D1830;
  --um-heading: #111111;
  --um-text: #1A1A1A;
  --um-muted: #6B6B6B;
  --um-border: #E5E5E2;
  --um-bg-off: #F6F6F4;
  --um-white: #FFFFFF;
  --um-error: #DC2626;

  --um-grad-dark: linear-gradient(135deg, #0E0E10 0%, #0D1830 100%);
  --um-grad-blue: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);

  --um-watermark: rgba(37, 99, 235, 0.04);
  --um-ring-light: rgba(255, 255, 255, 0.08);

  --um-sp-1: 8px;
  --um-sp-2: 16px;
  --um-sp-3: 24px;
  --um-sp-4: 32px;
  --um-sp-5: 40px;
  --um-sp-6: 48px;
  --um-sp-8: 64px;
  --um-sp-12: 96px;
  --um-sp-15: 120px;
  --um-section-y: clamp(96px, 13vw, 176px);
  --um-section-y-hero: clamp(140px, 18vw, 240px);
  --um-section-x: clamp(24px, 4vw, 48px);
  --um-content-max: 1120px;
  --um-prose-max: 800px;

  --um-r-card: 12px 48px 12px 12px;
  --um-r-img: 12px;
  --um-r-ui: 8px;
  --um-r-pill: 999px;

  --um-shadow-card: 0 4px 16px rgba(11, 31, 63, 0.06);
  --um-shadow-hover: 0 8px 24px rgba(37, 99, 235, 0.3);

  --um-font: 'Noto Sans JP', sans-serif;
  --um-h1: clamp(36px, 4.8vw, 58px);
  --um-h2: clamp(30px, 3.8vw, 46px);
  --um-h3: 20px;
  --um-h3-lg: clamp(20px, 2vw, 24px);
  --um-body: 16px;
  --um-body-sp: 15px;
  --um-label-size: 14px;
  --um-small: 13px;
  --um-num-deco: 64px;
  --um-lh-body: 1.9;
  --um-lh-heading: 1.4;
  --um-lh-h1: 1.3;
  --um-ls-label: 0.25em;

  --um-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --um-dur: 0.3s;

  --um-header-h: 72px;
  --um-bp-nav: 900px;
  --um-bp-pin: 768px;

  --um-z-watermark: -1;
  --um-z-base: 0;
  --um-z-content: 1;
  --um-z-sp-cta: 90;
  --um-z-header: 100;
  --um-z-drawer: 110;
  --um-z-loader: 200;
}

body {
  font-family: var(--um-font);
  color: var(--um-text);
  font-size: var(--um-body);
  line-height: var(--um-lh-body);
  margin: 0;
  background: var(--um-white);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--um-primary); text-decoration: none; }
a:hover { color: var(--um-primary-hover); }
img { max-width: 100%; }

body {
  text-wrap: pretty;
  line-break: strict;
}

h1, h2, h3, h4, h5, h6,
li, dt, dd, td, th, caption, figcaption, small,
.um-h2, .um-btn, .um-cta {
  text-wrap: balance;
}

.um-nb { display: inline-block; }

.um-section { padding: var(--um-section-y) var(--um-section-x); position: relative; }
.um-section__inner { max-width: var(--um-content-max); margin: 0 auto; position: relative; z-index: var(--um-z-content); }
.um-section--dark { background: var(--um-grad-dark); color: var(--um-white); overflow: hidden; }
.um-section--cta { background: var(--um-grad-blue); color: var(--um-white); text-align: center; overflow: hidden; }
.um-section--off { background: var(--um-bg-off); }

.um-label { color: var(--um-primary); font-size: var(--um-label-size); font-weight: 700; letter-spacing: var(--um-ls-label); margin: 0 0 var(--um-sp-3); }
.um-h2 { color: var(--um-heading); font-size: var(--um-h2); font-weight: 700; line-height: var(--um-lh-heading); margin: 0 0 var(--um-sp-3); }

.um-card {
  background: var(--um-white);
  border: 1px solid var(--um-border);
  border-radius: var(--um-r-card);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--um-shadow-card);
  transition: all var(--um-dur);
}
.um-card--invert:hover {
  background: var(--um-primary);
  border-color: var(--um-primary);
  color: var(--um-white);
  box-shadow: var(--um-shadow-hover);
  transform: translateY(-2px);
}

.um-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: var(--um-r-ui);
  transition: all var(--um-dur);
  cursor: pointer;
}
.um-btn--primary { background: var(--um-primary); color: var(--um-white); border: none; }
.um-btn--primary:hover { background: var(--um-primary-hover); color: var(--um-white); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4); }
.um-btn--secondary { background: var(--um-white); color: var(--um-heading); border: 1px solid var(--um-heading); }
.um-btn--secondary:hover { color: var(--um-primary); border-color: var(--um-primary); transform: translateY(-2px); }
.um-btn--on-blue { background: var(--um-white); color: var(--um-primary); }
.um-btn--on-blue:hover { background: var(--um-white); color: var(--um-primary-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 24, 48, 0.3); }

.um-pill { border: 1px solid var(--um-primary); color: var(--um-primary); font-size: 12px; font-weight: 500; padding: 4px 16px; border-radius: var(--um-r-pill); }

.um-input {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--um-border);
  border-radius: var(--um-r-ui);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  color: var(--um-text);
  background: var(--um-white);
  transition: border-color var(--um-dur), box-shadow var(--um-dur);
}
.um-input:focus { border-color: var(--um-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); outline: none; }
.um-input--error { border-color: var(--um-error); }
.um-field-error { color: var(--um-error); font-size: 13px; margin: 8px 0 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}