.fv {
  position: relative;
  padding-top: var(--header-height-sp);
}

.fv .inner {
  margin: 0 auto;
  height: 0;
  padding-top: 160%;
  position: relative;
  max-width: none;
}

.fv h1 {
  width: 74%;
  position: absolute;
  top: 31%;
  left: 17%;
  z-index: 5;
}

.fv-logo__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fv h1 svg,
.fv h1 img {
  width: 100%;
}

.fv .fv-img {
  width: 66%;
  position: absolute;
  top: 57%;
  left: 33%;
  z-index: 2;
}

.fv .fv-img img {
  width: 100%;
  border-radius: 2px;
}

.fv .fv-en-txt {
  width: 57%;
  font-size: 11px;
  position: absolute;
  top: 61%;
  left: 5%;
  z-index: 4;
  line-height: 1.6;
}

.fv .morph-shape {
  width: 55%;
  top: 8%;
  left: 3%;
}

@media screen and (min-width: 768px) {
  .fv {
    padding-top: calc(var(--header-height-pc) + 24px);
  }

  .fv .inner {
    padding-top: 64%;
  }

  .fv h1 {
    width: 45%;
    top: 13%;
    left: 28.8%;
  }

  .fv .fv-img {
    width: 41%;
    top: 48%;
    left: 48%;
  }

  .fv .fv-en-txt {
    width: 23%;
    font-size: clamp(12px, 1.1vw, 16px);
    top: 58%;
    left: 20%;
  }

  .fv .morph-shape {
    width: 35%;
    top: 5%;
    left: 5%;
  }
}

@media screen and (max-width: 320px) {
  .fv .fv-en-txt {
    font-size: 10px;
  }
}