@charset "UTF-8";

:root {
  --accent-blue: #1976d2;
  --accent-green: #1b5e20;
}

.bg-primary {
  background-color: var(--accent-green);
}
.bg-accent {
  background-color: var(--accent-blue);
}
.text-primary {
  color: var(--accent-green);
}
.text-accent {
  color: var(--accent-blue);
}
.border-primary {
  border-color: var(--accent-green);
}

.hero-gradient {
  background: linear-gradient(
    135deg,
    var(--accent-green) 0%,
    var(--accent-green) 100%
  );
}

.step-number {
  background: #7b7f82;
}

.mobile-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.active {
  transform: translateX(0);
}

.fade-in {
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* トップ画像 */
.guide-top {
  background-image: url(../img/guide-top.jpg);
  background-color: rgba(41, 41, 41, 0.7);
  background-blend-mode: darken;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: overlayFade 6s ease-in-out infinite;
}