:root {
  /* カラーパレット */
  --color-primary: #003366;      /* ネイビー（信頼・専門性） */
  --color-accent: #00b894;       /* エメラルド（清潔・現代的） */
  --color-warm: #ffb300;         /* オレンジ（注目・温かさ） */
  --color-light-bg: #f4f6f9;     /* 明るいグレー（ベース） */
  --color-white: #ffffff;
  --color-gray: #6c757d;

  /* グラデーションカラー */
  --gradient-primary: linear-gradient(90deg, #003366 0%, #00b894 100%);
}

/* === 背景色 === */
.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.bg-accent {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

.bg-warm {
  background-color: var(--color-warm) !important;
  color: var(--color-white) !important;
}

.bg-light-gray {
  background-color: var(--color-light-bg) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

.bg-gradient-primary {
  background: var(--gradient-primary) !important;
  color: var(--color-white) !important;
}

/* === テキスト色 === */
.text-primary {
  color: var(--color-primary) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-warm {
  color: var(--color-warm) !important;
}

.text-gray {
  color: var(--color-gray) !important;
}

.text-gradient-primary {
  color: var(--gradient-primary) !important;
}


/* === ボタン === */
.btn-primary-custom {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
}
.btn-primary-custom:hover {
  background-color: #00264d;
}

.btn-accent-custom {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: none;
}
.btn-accent-custom:hover {
  background-color: #00997a;
}

.btn-warm-custom {
  background-color: var(--color-warm);
  color: var(--color-white);
  border: none;
}
.btn-warm-custom:hover {
  background-color: #e6a300;
}

.btn-gradient {
  background: var(--gradient-primary);
  color: var(--color-white);
  border: none;
}
.btn-gradient:hover {
  opacity: 0.9;
}
.wpcf7 .btn-gradient {
  min-width: 100%;
  min-height: 48px;
  transition: none;
}

/* === 背景色 === */
.badge-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.badge-accent {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

.badge-warm {
  background-color: var(--color-warm) !important;
  color: var(--color-white) !important;
}

.badge-light-gray {
  background-color: var(--color-light-bg) !important;
}

.badge-white {
  background-color: var(--color-white) !important;
}

.badge-gradient-primary {
  background: var(--gradient-primary) !important;
  color: var(--color-white) !important;
}



/* === 汎用装飾 === */
.rounded-soft {
  border-radius: 0.5rem;
}

.shadow-sm {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3),
                0 0 10px rgba(0, 123, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.6),
                0 0 25px rgba(0, 123, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3),
                0 0 10px rgba(0, 123, 255, 0.2);
  }
}

.btn-gradient.glow {
  animation: glow 2.5s infinite ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
}

@keyframes navBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.animate-bounce {
  animation: navBounce 1.2s ease-in-out infinite;
}