@charset "utf-8";

/*============================
MV
============================*/
.mv {
  width: 100%;
  height: 35.71vw;
  min-height: 5rem;
  position: relative;
}
@media screen and (max-width: 640px) {
  .mv {
    min-height: 2.5rem;
  }
}

.mv::before {
	/* content: "";
	width: 100%;
	height: 1.40rem;
	background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
	position: absolute;
	top: 0;
	left: 0;
  z-index: 1; */
}

.mv .ph {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.mv .catch_wrap {
  position: absolute;
  width: 100%;
  max-width: 12rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: right;
  text-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.16);
  z-index: 2;
}
@media screen and (max-width: 640px) {
  .mv .catch_wrap {
    max-width: 100%;
    text-align: center;
  }
}

/* センター揃え */
.mv .catch_wrap.-center {
  text-align: center;
}

.mv .catch_wrap .catch {
  font-weight: 900;
  font-size: 0.5rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  padding-bottom: 0.2rem;
}
@media screen and (max-width: 640px) {
  .mv .catch_wrap .catch { 
    font-size: 0.24rem;
    padding-bottom: 0.05rem;
  }
}

.mv .catch_wrap .catch .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.16rem);
  transition: opacity 0.45s ease, transform 0.45s ease;
  transition-delay: calc(var(--char-index, 0) * 0.08s);
}

.mv.-animated .catch_wrap .catch .char {
  opacity: 1;
  transform: translateY(0);
}

.mv .catch_wrap .en {
  font-size: 0.2rem;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-feature-settings: "normal";
  display: inline-block;
  opacity: 0;
  transform: translateY(0.16rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media screen and (max-width: 640px) {
  .mv .catch_wrap .en {
    font-size: 0.12rem;
  }
}

.mv.-animated .catch_wrap .en {
  opacity: 1;
  transform: translateY(0);
}