#key-visual__container {
  position: relative;
  /*max-width: 1200px;*/
  max-width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width:1024px) {
  #key-visual__container {
    /*min-height: 720px;*/
  }
}

#container__tag {
  position: absolute;
  left: 7.52%;
  top: 4.0%;
  text-align: center;
  color: #fff;
  font-size: 3.2vw;
  line-height: 1.32;
  z-index: 100;
}

@media screen and (min-width:1200px) {
  #container__tag {
    font-size: 16px;
    top: 24px;
    left: 80px;
  }
}

#container__tag strong {
  color: #fff;
  font-size: 4.2vw;
}

@media screen and (min-width:1200px) {
  #container__tag strong {
    font-size: 36px;
  }
}

#container__tag--bg {
  position: absolute;
  top: 0;
  left: 3.2vw;
  z-index: 10;
  width: 22vw;
}

@media screen and (min-width:1200px) {
  #container__tag--bg {
    width: 160px;
    left: 52px;
  }
}

#container__area {
  text-align: center;
  color: #fff;
  font-size: 3.6vw;
  line-height: 1.32;
  z-index: 200;
  width: 100%;
  position: absolute;
  top: 22.4vw;
  letter-spacing: 0.12rem;
  font-weight: bold;
}

@media screen and (min-width:1024px) {
  #container__area {
    font-size: 32px;
    top: 244px;
  }
}

#key-visual {
  margin: 0 0;
  background-color: #000000;
}

.kv {
  position: relative;
  height: 670px;
  overflow: hidden;
}

@media screen and (max-width:991px) {
  .kv {
    height: 505px;
  }
}

.kv_ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  z-index: 2;
}

@media screen and (max-width:991px) {
  .kv_ttl {
    width: 270px;
    height: 270px;
  }

}

.kv_top {
  height: 50%;
}

.kv_top .kv_top-pc {
  display: flex;
  height: 100%;
  animation: loop-slide-right 50s infinite linear 1s both;
}

.kv_top .kv_top-sp {
  display: none;
}

@media screen and (max-width:991px) {
  .kv_top {
    height: calc(100% / 3);
  }

  .kv_top .kv_top-sp {
    display: flex;
    height: 100%;
    animation: loop-slide-right 30s infinite linear 1s both;
  }

  .kv_top .kv_top-pc {
    display: none;
  }
}

.kv_middle {
  display: none;
}

@media screen and (max-width:991px) {
  .kv_middle {
    display: flex;
    height: calc(100% / 3);
    animation: loop-slide-left 30s infinite linear 1s both;
  }
}

.kv_bottom {
  height: 50%;
}

.kv_bottom .kv_bottom-pc {
  display: flex;
  height: 100%;
  animation: loop-slide-left 50s infinite linear 1s both;
}

.kv_bottom .kv_bottom-sp {
  display: none;
}

@media screen and (max-width:991px) {
  .kv_bottom {
    height: calc(100% / 3);
  }

  .kv_bottom .kv_bottom-sp {
    display: flex;
    height: 100%;
    animation: loop-slide-right 30s infinite linear 1s both;
  }

  .kv_bottom .kv_bottom-pc {
    display: none;
  }
}

@keyframes loop-slide-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop-slide-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.kv_top img,
.kv_middle img,
.kv_bottom img {
  width: initial;
}

.kv_cover {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc((53 / 1200) * 100vw);
  z-index: 2;
}

@media screen and (max-width:991px) {
  .kv_cover {
    height: calc((23 / 375) * 100vw);
  }

}

.kv_cover picture {
  max-width: initial !important;
}

.kv_cover img {
  display: block;
  width: 100%;
  height: 100%;
}