@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");
:root {
  --navy: #3B3535;
  --navy-light: #5A5A5A;
  --orange: #f97316;
  --orange-dark: #c2410c;
  --orange-light: #FFB84D; /* 温かみのあるオレンジアクセント */
  --warm-bg: #FFF9F0; /* 少しオレンジがかったクリーム色 */
  --warm-bg-alt: #FFFFFF;
}

* {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  overflow-x: hidden;
}

.text-navy {
  color: var(--navy);
}

.bg-navy {
  background-color: var(--navy);
}

.text-orange {
  color: var(--orange);
}

.bg-orange {
  background-color: var(--orange);
}

.border-orange {
  border-color: var(--orange);
}

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

.bg-warm-alt {
  background-color: var(--warm-bg-alt);
}

.header-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.hero-bg {
  background-color: var(--warm-bg);
  background-size: cover;
  background-position: center;
}

.check-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 20px;
}
.check-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(255, 184, 77, 0.2);
}

.step-card {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.step-connector {
  display: none;
}
@media (min-width: 768px) {
  .step-connector {
    display: block;
    position: absolute;
    top: 50%;
    right: -32px;
    transform: translateY(-50%);
    color: var(--orange);
    font-size: 1.5rem;
    z-index: 10;
  }
}

.reason-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-left: 4px solid transparent;
}
.reason-card:hover {
  transform: translateX(4px);
  border-left-color: var(--orange);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-answer.open {
  max-height: 200px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse-shadow {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(237, 137, 54, 0.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(237, 137, 54, 0.7);
  }
}
.pulse-btn {
  animation: pulse-shadow 2s infinite;
}

.story-step {
  position: relative;
  padding-left: 2rem;
}
.story-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--orange), var(--orange-light));
  border-radius: 2px;
}

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

.wave-divider {
  height: 60px;
  background: var(--warm-bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}

/*# sourceMappingURL=style.css.map */