@charset "utf-8";

.mainVisual {
display: none;
}

@media screen and (max-width:960px) {

/***********
mainVisual
************/

.mainVisual {
  display: block;
  position: relative;
  padding-top: 140px;
  overflow: hidden;
  height: 10vh;
  min-height: 300px;
  padding-top: 80px;
}

.mainVisual::before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
}


.mainVisual-scroll {
  position: absolute;
  right: 40px;
  bottom: 0;
  transform: rotate(90deg);
  transform-origin: right bottom;
}

.mainVisual-scroll p {
  display: block;
  width: 300px;
  position: relative;
  overflow: hidden;
  color: #000;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
}
.mainVisual-scroll p::before,
.mainVisual-scroll p::after {
  content: "";
  display: block;
  width: 110px;
  height: 1px;
  position: absolute;
  right: 0;
  top: 50%;
  transform-origin: left;
  background-color: rgba(0, 0, 0, 0.5);
}
.mainVisual-scroll p::before{
  background-color: rgba(0, 0, 0, 0.1);
}
.mainVisual-scroll p::after {
  transform: scaleX(0);
  animation: anim-mainVisualScroll 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}


@keyframes anim-mainVisualScroll {

  0% {
    transform: scaleX(0)
  }
  35% {
    transform: scaleX(1);
    transform-origin: left
  }
  40% {
    transform-origin: right
  }
  50% {
    transform: scaleX(1)
  }
  85% {
    transform: scaleX(0);
    transform-origin: right
  }
  100% {
    transform-origin: left
  }
}

}