html {
  overflow-x: hidden;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: #f3ffff;
  color: #070707;
  overflow-x: hidden;
}
.btn-primary {
  background-color: #ff9900;
  color: white;
  font-weight: bold;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  transition: background-color 0.3s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
  background-color: #e68a00;
}
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: opacity 0.3s, transform 0.3s;
  background: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
#header.hidden {
  opacity: 0;
  transform: translateY(-100%);
}
#scrollTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 40;
}
#scrollTop.show {
  opacity: 1;
  visibility: visible;
}
.section-title {
  font-size: 3.25rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.6;
  color: #707070;
}
.section-title-accent {
  background: linear-gradient(transparent 70%, #ffd6a8 70%);
  padding: 0 0.2em;
}
.fade-in,
.slide-left,
.slide-right {
  opacity: 0;
  transition: opacity 0.8s, transform 0.8s;
}
.slide-left {
  transform: translateX(-50px);
}
.slide-right {
  transform: translateX(50px);
}

.visible.fade-in {
  opacity: 1;
}
.visible.slide-left,
.visible.slide-right {
  opacity: 1;
  transform: translateX(0);
}

/* ハンバーガー → X 変形 */
#hamburger.is-open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
#hamburger.is-open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}