main {
  overflow-x: clip;
}

.bg-banner1 {
  background-image: url("/ioc/wp/wp-content/themes/osaka_course/assets/img/homepage/img2_9.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
}

.moving-line {
  height: 155px;
  display: block;
  position: absolute;
  width: 2px;
  transform: scaleY(0);
  background-color: #00a0ff;
  animation: moveDownAndShrink 3s ease 0s infinite;
  margin-left: 8px;
}

.text-scroll {
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
}

.slide {
  transition: opacity 0.5s ease-in-out;
}

#slide1 {
  overflow-x: hidden;
}

.custom-blue {
  background: #0078ff;
}

.bg-hover-color {
  background-color: #0078ff;
}


@media only screen and (max-width: 1439px) {
  .bg-banner1 {
    margin-top: 70px;
  }
}

@media only screen and (max-width: 431px) {
  .bg-banner1 {
    background-image: url("/ioc/wp/wp-content/themes/osaka_course/assets/img/homepage/img22_2.webp");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
  }
}

@keyframes moveDownAndShrink {
  30% {
    transform: scaleY(0);
    transform-origin: 0 0;
  }

  65% {
    transform: scaleY(1);
    transform-origin: 0 0;
  }

  70% {
    transform: scaleY(1);
    transform-origin: left bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: left bottom;
  }
}

@media only screen and (max-width: 2560px) {
  #box-animation {
    width: 100%;
  }
}

@media only screen and (max-width: 2000px) {
  #box-animation {
    width: 100%;
  }
}

@media only screen and (max-width: 1440px) {
  #box-animation {
    width: 100%;
    margin-top: 150px;
  }

  img#img1,
  img#img2 {
    width: 500px;
    margin-left: 100px;
  }

  #banner-title {
    width: 200px;
    height: 200px;
  }
}

@media only screen and (max-width: 1024px) {
  #box-animation {
    width: 1000px;
    height: 500px;
  }

  .bg-banner1 {
    margin-top: 100px;
  }

  img#img1,
  img#img2 {
    width: 400px;
    margin-left: 50px;
  }
}

@media only screen and (max-width: 1024px) {
  #box-animation {
    width: 700px;
    margin-top: 300px;
  }

  #banner-title {
    width: 200px;
    height: 200px;
  }
}


.home-img {
  margin: -40px !important;
  z-index: 1;

}
@media screen and (max-width: 1024px) {
  .home-img {
    width: 200px !important;
    z-index: 1;

    img {
      width: 200px !important;
      margin-inline: auto;
    }
  }
}