.top-1 {
  position: relative;
  z-index: 0;
  background-color: #281007;
}

.top-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: -1;
}

.webp .top-1::before {
  background-image: url(../img/top/bg-1.webp);
}

.no-webp .top-1::before {
  background-image: url(../img/top/bg-1.webp);
}

.top-2 {
  position: relative;
  z-index: 0;
  background-color: #123939;
}

.top-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: -1;
}

.webp .top-2::before {
  background-image: url(../img/top/bg-2.webp);
}

.no-webp .top-2::before {
  background-image: url(../img/top/bg-2.webp);
}

.top-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 1 / 0.661;
  margin: 0 auto;
  line-height: 0;
}

.top-logo {
  position: absolute;
  width: 100%;
  bottom: 4%;
  left: 0;
  text-align: center;
  z-index: 3;
}

.top-logo img {
  width: 36%;
}

.agf-logo {
  position: absolute;
  width: 16%;
  bottom: 3%;
  left: 2%;
  text-align: center;
  z-index: 3;
}

.c-1 {
  position: absolute;
  width: 26%;
  bottom: 1%;
  left: 25%;
}

.c-2 {
  position: absolute;
  width: 26%;
  bottom: 1%;
  right: 25%;
}

.c-3 {
  position: absolute;
  width: 25%;
  bottom: 1%;
  left: 8%;
}

.c-4 {
  position: absolute;
  width: 25%;
  bottom: 1%;
  left: 25%;
}

.c-5 {
  position: absolute;
  width: 25%;
  bottom: 1%;
  right: 25%;
}

.c-6 {
  position: absolute;
  width: 25%;
  bottom: 1%;
  right: 8%;
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .top::before {
    content: "";
    display: block;
    padding-top: 128.6%;
  }

  .webp .top-1::before {
    background-image: url(../img/top/sp-bg-1.webp);
  }

  .no-webp .top-1::before {
    background-image: url(../img/top/sp-bg-1.webp);
  }

  .webp .top-2::before {
    background-image: url(../img/top/sp-bg-2.webp);
  }

  .no-webp .top-2::before {
    background-image: url(../img/top/sp-bg-2.webp);
  }

  .top-inner {
    aspect-ratio: 1 / 1.286;
  }

  .top-logo {
    bottom: 17%;
  }

  .top-logo img {
    width: 66%;
  }

  .agf-logo {
    width: 100%;
    bottom: 3%;
    left: 0;
  }

  .agf-logo img {
    width: 32%;
  }

  .c-1 {
    width: 50%;
    bottom: 2%;
    left: 3%;
  }

  .c-2 {
    width: 50%;
    bottom: 2%;
    right: 3%;
  }

  .c-3 {
    width: 40%;
    bottom: 10%;
    left: -5%;
  }

  .c-4 {
    width: 40%;
    bottom: 10%;
    left: 13%;
  }

  .c-5 {
    width: 40%;
    bottom: 10%;
    right: 18%;
  }

  .c-6 {
    width: 40%;
    bottom: 10%;
    right: -2%;
  }
}

@media screen and (min-width: 744px) and (max-width: 1024px) {
  .top::before {
    content: "";
    display: block;
    padding-top: 70%;
  }

}

@media screen and (min-width: 1025px) {
  .top::before {
    content: "";
    display: block;
    padding-top: 70%;
  }
}