.content {
  opacity: 0;
  animation: fadeIn 1s 1s ease forwards;
}

.top {
  position: relative;
  height: 100svh;
}

.title {
  position: absolute;
  top: 6rem;
  left: 3rem;
  width: 55.2%;
}

.top__text {
  position: absolute;
  right: 2.8rem;
  bottom: 2.6rem;
  width: 52.5%;
}

.yodogawa__body {
  display: grid;
  margin-inline: auto;
  padding: 3.2rem 2.2rem 4.5rem;
  background: rgba(255, 255, 255, 0.9);
}

.yodogawa__text {
  font-size: 1.5rem;
  line-height: 2;
}

.yodogawa__text + .yodogawa__text {
  margin-top: 2em;
}

.yodogawa__video {
  max-width: 610px;
  width: 100%;
  margin-block: 3.2rem;
}

.yodogawa__video iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.yodogawa__more {
  margin-top: 6.2rem;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  line-height: 2;
  text-align: center;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: center / cover no-repeat
    url("/store/miknits/2025aw/img/pre/01/bg_sp.webp");
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

@media (min-width: 801px) {
  .title {
    position: absolute;
    top: 0;
    right: 2rem;
    left: auto;
    width: 9.19%;
    height: 100%;
  }

  .title img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right top;
  }

  .top__text {
    position: absolute;
    right: auto;
    bottom: 4.6rem;
    left: 0;
    bottom: 2.6rem;
    width: 51%;
  }

  .yodogawa {
    padding-block: 9.4rem 14.3rem;
  }

  .yodogawa__body {
    display: grid;
    justify-items: center;
    width: var(--pc-width);
    max-width: 945px;
    padding: 12rem 4rem 13.5rem;
    background: rgba(255, 255, 255, 0.9);
  }

  .yodogawa__video {
    width: 100%;
    margin-block: 5.5rem 6.2rem;
  }

  .yodogawa__more {
    margin-top: 12rem;
  }

  .bg {
    background-image: url("/store/miknits/2025aw/img/pre/01/bg_pc.webp");
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}