:root {
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-500: #f97316;
  --orange-600: #ea580c;
}

.bg-orange-50 { background-color: var(--orange-50) !important; }
.bg-orange-100 { background-color: var(--orange-100) !important; }
.bg-orange-500 { background-color: var(--orange-500) !important; }
.bg-orange-600 { background-color: var(--orange-600) !important; }
.text-orange-500 { color: var(--orange-500) !important; }
.text-orange-600 { color: var(--orange-600) !important; }
.text-orange-800 { color: #9a3412 !important; }
.text-orange-100 { color: var(--orange-100) !important; }
.border-orange-500 { border-color: var(--orange-500) !important; }

.hero-gradient {
  background: linear-gradient(to bottom, var(--orange-50), white);
}

.btn-orange {
  background-color: var(--orange-500);
  border-color: var(--orange-500);
  color: white;
}

.btn-orange:hover {
  background-color: var(--orange-600);
  border-color: var(--orange-600);
  color: white;
}

.feature-icon {
  width: 4rem;
  height: 4rem;
  background-color: var(--orange-100);
  color: var(--orange-500);
}

.benefit-icon {
  width: 5rem;
  height: 5rem;
  background-color: white;
  color: var(--orange-500);
}

.step-number {
  width: 4rem;
  height: 4rem;
  background-color: var(--orange-500);
  color: white;
}

.line-login-area {
  display: inline-block;
  padding: 8px;
}

.line-login-submit {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
}

.line-login-image {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
}