:root {
  --hover-color: #ffc833;
  --scale: 1.05;
}
img {
  transition: transform 0.3s ease;
}
a:not(.logo) {
  transition: color 0.3s ease, transform 0.3s ease;
}
@media (min-width: 768px) {
  a:not(.logo):hover {
    color: var(--hover-color);
  }
  a:not(.logo):hover img {
    filter: brightness(0.6);
    transform: scale(--scale);
  }
}
#banner {
  --hover-color: #fff;
  --scale: 1;
}
@media (min-width: 768px) {
  #banner a:hover p.show {
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}
#video,
.animate-text-primary {
  --hover-color: #a71836;
}
#SNS {
  --hover-color: #cb1a23;
}
#video a:hover img {
  border-radius: 0;
}
.fade-up,
.fade-left,
.fade-right,
.fade-in {
  opacity: 0;
}
.fade-up.show,
.fade-left.show,
.fade-right.show,
.fade-in.show {
  opacity: 1;
  transform: none;
  transition: 1s ease;
}
.fade-up {
  transform: translateY(40px);
}
.fade-left {
  transform: translateX(40px);
}
.fade-right {
  transform: translateX(-40px);
}
.slide-bg-right {
  overflow: hidden;
}
.slide-bg-right:before {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background-color: #134486;
  transform: translateX(-100%);
  transition: transform 400ms;
}
.slide-bg-right:hover:before {
  transform: translateX(0);
}