@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Zen+Maru+Gothic:wght@500&display=swap");

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Maru Gothic", serif;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.carousel-item {
  display: none;
}
.carousel-item.active {
  display: block;
}

.slick-arrow.slick-next:before {
  content: "▶︎";
  color: black;
}

.slick-arrow.slick-prev:before {
  content: "â—€";
  color: black;
}

#vertical-text {
  writing-mode: vertical-rl;
}

.accordion-content2 {
  display: none;
}

.rotate-90 {
  transform: rotate(270deg);
}

.slide-in {
  transition: transform 0.5s ease-out;
}
.slide-in.active {
  transform: translateX(0);
}

#fixed-contactbox {
  opacity: 0;
  z-index: -10px;
  transition-duration: 0.2s;
}
#fixed-contactbox.active {
  opacity: 1;
  transition-duration: 0.2s;
}

#cta-btn {
  position: relative;
  overflow: hidden;
}

#cta-btn::before {
  position: absolute;
  content: "";
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  transform: skewX(-30deg);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
}

#cta-btn:before {
  animation: shine 2s infinite linear;
}
@keyframes shine {
  100% {
    left: 100%;
  }
}

.shadow-white {
  text-shadow: 0px 0px 4px white;
}