:root {
  --background: oklch(0.969 0.017 96.1);
  --foreground: oklch(0.144 0.003 247.1);
  --card: oklch(0.959 0.005 228.8);
  --card-foreground: oklch(0.144 0.003 247.1);
  --popover: oklch(0.959 0.005 228.8);
  --popover-foreground: oklch(0.144 0.003 247.1);
  --primary: oklch(0.426 0.237 264.0);
  --primary-foreground: oklch(0.969 0.017 96.1);
  --secondary: oklch(0.912 0.014 231.2);
  --secondary-foreground: oklch(0.194 0.045 270.3);
  --muted: oklch(0.934 0.003 264.5);
  --muted-foreground: oklch(0.486 0.051 247.9);
  --accent: oklch(0.833 0.170 90.6);
  --accent-foreground: oklch(0.144 0.003 247.1);
  --destructive: oklch(0.695 0.140 87.1);
  --border: oklch(0.864 0.015 235.4);
  --input: oklch(0.864 0.015 235.4);
  --ring: oklch(0.533 0.177 257.9);
  --chart-1: oklch(0.426 0.237 264.0);
  --chart-2: oklch(0.533 0.177 257.9);
  --chart-3: oklch(0.833 0.170 90.6);
  --chart-4: oklch(0.695 0.140 87.1);
  --chart-5: oklch(0.194 0.045 270.3);
  --sidebar: oklch(0.959 0.005 228.8);
  --sidebar-foreground: oklch(0.144 0.003 247.1);
  --sidebar-primary: oklch(0.426 0.237 264.0);
  --sidebar-primary-foreground: oklch(0.969 0.017 96.1);
  --sidebar-accent: oklch(0.912 0.014 231.2);
  --sidebar-accent-foreground: oklch(0.426 0.237 264.0);
  --sidebar-border: oklch(0.864 0.015 235.4);
  --sidebar-ring: oklch(0.533 0.177 257.9);
  --radius: 0.5rem;
}

.dark {
  --background: oklch(0.147 0.018 254.4);
  --foreground: oklch(0.959 0.005 228.8);
  --card: oklch(0.210 0.032 264.7);
  --card-foreground: oklch(0.959 0.005 228.8);
  --popover: oklch(0.210 0.032 264.7);
  --popover-foreground: oklch(0.959 0.005 228.8);
  --primary: oklch(0.719 0.132 254.3);
  --primary-foreground: oklch(0.147 0.018 254.4);
  --secondary: oklch(0.319 0.046 258.7);
  --secondary-foreground: oklch(0.959 0.005 228.8);
  --muted: oklch(0.257 0.047 261.2);
  --muted-foreground: oklch(0.717 0.038 243.2);
  --accent: oklch(0.883 0.179 96.5);
  --accent-foreground: oklch(0.147 0.018 254.4);
  --destructive: oklch(0.780 0.158 89.6);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 16%);
  --ring: oklch(0.719 0.132 254.3);
  --chart-1: oklch(0.719 0.132 254.3);
  --chart-2: oklch(0.426 0.237 264.0);
  --chart-3: oklch(0.883 0.179 96.5);
  --chart-4: oklch(0.780 0.158 89.6);
  --chart-5: oklch(0.959 0.005 228.8);
  --sidebar: oklch(0.194 0.045 270.3);
  --sidebar-foreground: oklch(0.959 0.005 228.8);
  --sidebar-primary: oklch(0.719 0.132 254.3);
  --sidebar-primary-foreground: oklch(0.147 0.018 254.4);
  --sidebar-accent: oklch(0.319 0.046 258.7);
  --sidebar-accent-foreground: oklch(0.959 0.005 228.8);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: oklch(0.719 0.132 254.3);
  --radius: 0.5rem;
}

body.role-public,
body.role-customer {
  --page-bg: #ffffff;
  --surface: oklch(0.959 0.005 228.8);
  --surface-strong: oklch(0.959 0.005 228.8);
  --header-bg: rgba(255,255,255,.82);
  --nav-bg: rgba(255,255,255,.88);
  --hero-copy-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
  --hero-visual-bg: rgba(255,255,255,.92);
  --table-head-bg: #eff6ff;
  --row-bg: rgba(248,250,252,.72);
  --row-hover-bg: rgba(239,246,255,.95);
  --field-bg: #fff;
  --line: rgba(37,99,235,.12);
  --line-soft: rgba(148,163,184,.22);
  --primary: oklch(0.426 0.237 264.0);
  --primary-dark: oklch(0.320 0.188 264.2);
  --secondary: oklch(0.912 0.014 231.2);
  --accent: oklch(0.833 0.170 90.6);
  --text: oklch(0.144 0.003 247.1);
  --muted: oklch(0.486 0.051 247.9);
  --shadow: 0 18px 44px rgba(15,23,42,.09);
  --role-accent: oklch(0.426 0.237 264.0);
  --role-accent-dark: oklch(0.320 0.188 264.2);
  --role-accent-soft: rgba(37,99,235,.10);
  --role-glow: rgba(37,99,235,.12);
  --ui-chip-bg: rgba(37,99,235,.08);
  --ui-chip-bg-hover: rgba(37,99,235,.14);
  --ui-pill-bg: rgba(255,237,213,.10);
  --ui-pill-bg-hover: rgba(255,237,213,.16);
  --ui-pill-border: rgba(249,115,22,.22);
}

body.role-public::before,
body.role-customer::before {
  background: radial-gradient(circle, var(--role-glow), rgba(59,130,246,0) 72%);
}

body.role-public::after,
body.role-customer::after {
  background: radial-gradient(circle, rgba(245,158,11,.08), rgba(245,158,11,0) 70%);
}

.hero-banner {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-radius: 30px;
  background: #ffffff url('/images/hero/hero-bg-01.webp') center/cover no-repeat;
  box-shadow: 0 24px 46px rgba(15,23,42,.10);
  margin-bottom: 20px;
}

.hero-banner-slides {
  position: absolute;
  inset: 0;
}

.hero-banner-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  animation: hero-banner-fade 112s infinite;
  filter: saturate(1.02) contrast(1.03);
  pointer-events: none;
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,12,24,.68), rgba(6,12,24,.38) 42%, rgba(6,12,24,.14));
  pointer-events: none;
}

.hero-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  max-width: none;
  padding: 56px 64px;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.hero-banner-overlay-hero {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

.hero-banner-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
}

.hero-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
  text-align: left;
  align-items: flex-start;
  max-width: 760px;
  color: #fff;
}

.hero-banner-copy-hero {
  gap: 16px;
}

.hero-banner-copy-hero-center {
  position: absolute;
  inset: 19.375rem auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100% - 96px));
  max-width: none;
  align-items: flex-start;
  text-align: left;
}

.hero-banner-copy-hero-center p {
  margin-left: 0;
  margin-right: auto;
}

.hero-banner-copy-hero-center .hero-cta {
  justify-content: flex-start;
}

.hero-banner-brand {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.hero-banner-overlay-hero .hero-banner-brand {
  position: absolute;
  top: 3.5rem;
  left: 64px;
  z-index: 2;
  margin-bottom: 0;
}

.hero-banner-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero-banner-kicker {
  font-family: "BIZ UDPGothic Web", "BIZ UDPGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  color: rgba(255,255,255,.94);
}

.hero-banner-name {
  font-family: "Jost Web", "Jost", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1.5;
  font-weight: 600;
  color: #f59e0b;
}

.hero-banner-sub {
  font-family: "BIZ UDPGothic Web", "BIZ UDPGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(10px, 1.7vw, 12px);
  font-weight: 800;
  letter-spacing: 0;
  color: rgba(255,255,255,.90);
}

.hero-banner-copy-hero .hero-title {
  color: #fff;
  text-shadow: 0 10px 24px rgba(0,0,0,.26);
}

.hero-banner-copy-hero p {
  color: rgba(255,255,255,.90);
  margin-top: 0;
  max-width: 740px;
  line-height: 1.4;
}

.hero-banner-copy-hero .hero-cta {
  margin-top: 8px;
}

.hero-banner-copy-hero .hero-cta a,
.hero-banner-copy-hero .hero-cta button {
  background: rgba(255,255,255,.96);
  color: var(--role-accent-dark);
}

.hero-banner-copy-hero .hero-cta a:hover,
.hero-banner-copy-hero .hero-cta button:hover {
  background: #fff;
}

@keyframes hero-banner-fade {
  0% { opacity: 0; transform: scale(1.05); }
  4% { opacity: 1; }
  14% { opacity: 1; }
  18% { opacity: 0; transform: scale(1.10); }
  100% { opacity: 0; transform: scale(1.10); }
}

@media (max-width: 900px) {
  .hero-banner {
    min-height: 0;
    border-radius: 24px;
  }
  .hero-banner-overlay {
    padding: 18px;
  }
  .hero-banner-overlay-hero {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    padding: 18px;
  }
  .hero-banner-overlay-hero .hero-banner-brand {
    position: static;
    top: auto;
    left: auto;
    margin-bottom: 0;
  }
  .hero-banner-copy-hero-center {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 0;
    align-items: flex-start;
    text-align: left;
  }
  .hero-banner-copy-hero-center p {
    margin-left: 0;
    margin-right: 0;
  }
  .hero-banner-copy-hero-center .hero-cta {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }
  .hero-banner-copy-hero-center .hero-cta a,
  .hero-banner-copy-hero-center .hero-cta button {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner-slide {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .hero-banner-slide:first-child {
    opacity: 1;
  }
}