@keyframes first-view-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc((100vw - 40px) * 7201 / 2561 * -1));
  }
}

.first-view.pc-only {
  position: fixed;
  right: 0;
  top: 0;
  width: calc(100vw - 40px);
  height: calc((100vw - 40px) * 6422 / 4905);
}

.first-view.sp-only {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.first-view__bg {
  width: calc((100vw - 40px));
  height: calc((100vw - 40px) * 7201 / 2561);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.first-view__bg.scroll.pc {
  animation: first-view-scroll 140s linear 9s infinite;
}

.first-view__bg.scroll.sp {
  animation: first-view-scroll 60s linear 9s infinite;
}

.first-view__card {
  position: relative;
  width: 100%;
  height: auto;
}

.first-view__card-front, .first-view__card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: all 1s;
}

.first-view__card-back {
  transform: rotateY(-180deg);
}

.first-view__card:hover .first-view__card-front.hover {
  transform: rotateY(180deg);
}

.first-view__card:hover .first-view__card-back.hover {
  transform: rotateY(0);
}

.first-view__card.back .first-view__card-front.random {
  transform: rotateY(180deg);
}

.first-view__card.back .first-view__card-back.random {
  transform: rotateY(0);
}

.first-view__card-front img, .first-view__card-back img {
  width: 100%;
}

.first-view__content.pc-only {
  position: absolute;
  left: min(5.601vw, 285px);
  top: min(15.625vw, 795px);
}

.first-view__content.sp-only {
  position: absolute;
  left: 0px;
  top: 35%;
  width: 100%;
}

.first-view__icon {
  background-image: url('../img/first-view/first-view-icon.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: min(15.556vw, 224px);
}

@media (min-width: 1025px) {
  .first-view__icon {
    height: min(4.403vw, 224px);
  }
}

.first-view__title {
  color: #FFFFFF;
  font-family: 'Vollkorn', serif;
  font-weight: 700;
  font-size: 10vw;
  line-height: 68%;
  opacity: 0.7;
  text-align: center;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
}

@media (min-width: 1025px) {
  .first-view__title {
    font-size: min(3.734vw, 190px);
  }
}

.first-view__sub-title {
  display: block;
  margin-top: 4px;
  color: #FFFFFF;
  font-family: 'Shippori Mincho', serif;
  font-weight: 800;
  font-size: min(3.125vw, 45px);
  line-height: 68%;
  opacity: 0.7;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

@media (min-width: 1025px) {
  .first-view__sub-title {
    font-size: min(0.884vw, 45px);
  }
}