/*全共通*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.bgappear a:hover {
  border-bottom: none !important;
  transition: all 0.3s;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#hoge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  margin: 0 auto;
  /* background-color: #000; */
  /* background-image: url(/images/home/company@pc.jpg); */
  /*  background-repeat: no-repeat; */
  /*  background-size: cover; */
  z-index: 8000;
}

/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(26, 26, 26); /*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定*/
.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/*画像拡大＋回転*/
.zoomInRotate img {
  /* opacity: 0.5; */
  transform: scale(1);
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomInRotate a:hover img {
  /*hoverした時の変化*/
  opacity: 1;
  transform: rotate(5deg) scale(1.2); /*拡大、回転の値を変更したい場合はこの数値を変更*/
}
/*画像のマスク*/
.mask {
  display: block;
  line-height: 0; /*行の高さを0にする*/
  overflow: hidden; /*拡大してはみ出る要素を隠す*/
}

/*タイプライター*/
.Typing span {
  display: none;
}
.Typing::after {
  content: "|";
  animation: typinganime 0.8s ease infinite;
}
@keyframes typinganime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* スライダー */
.swiper-container {
  overflow: visible !important;
}

.swiper-slide {
  overflow: hidden;
  height: 75vh;
}

.swiper-slide-active .hero-img {
  transform: none;
}

.swiper-slide img {
  max-width: 100%;
  transform: scale(1.2);
  transition: transform 4s ease;
}