@charset "UTF-8";
main {
  background-color: #d5eef4;
}

.mv {
  position: relative;
}
.mv .wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mv .mv_bg {
  width: 100%;
}
.mv .mv_content {
  position: absolute;
  right: 8%;
  top: 39.5%;
  width: 34%;
}
.mv .mv_content > * {
  transition: all ease 0.5s;
}
.mv .mv_content > *:nth-child(1) {
  transform: translate3d(1em, 0, 0);
  opacity: 0;
  transition-delay: 0.2s;
}
.mv .mv_content > *:nth-child(2) {
  transform: translate3d(1em, 0, 0);
  opacity: 0;
  transition-delay: 0.4s;
}
.mv .mv_content > *:nth-child(3) {
  transform: scale(1.1);
  opacity: 0;
  transition-delay: 0.6s;
}
.mv.active .mv_content > *:nth-child(1) {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.mv.active .mv_content > *:nth-child(2) {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.mv.active .mv_content > *:nth-child(3) {
  transform: scale(1);
  opacity: 1;
}

@media screen and (max-width: 880px) {
  .mv .mv_content {
    right: 0%;
    width: 100%;
    top: 60%;
  }
  .mv .mv_bg {
    position: relative;
  }
}
.new_xxio_bar {
  background-color: #003282;
  text-align: center;
}
.new_xxio_bar img {
  width: 65%;
}

.youtube_wide {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* YouTubeの標準比率 */
  vertical-align: bottom;
}

.info {
  padding: 1.5em 0;
  padding-bottom: 3.5em;
}
.info .wrap {
  width: 75%;
}
.info h2 {
  margin-bottom: 0.8em;
  text-align: center;
  font-size: 180%;
  color: #000;
}
.info ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.info ul li {
  flex: 0 1 calc((100% - 1em) / 2);
}
.info ul li a {
  display: block;
  background-color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.info ul li a h3 {
  font-size: 100%;
  font-weight: normal;
  transition: all ease 0.3s;
}
.info ul li a:hover h3 {
  transform: scale(1.05);
}

@media screen and (max-width: 880px) {
  .info .wrap {
    width: auto;
  }
}
.movie {
  padding: 1.5em 0;
  padding-bottom: 28em;
  background-color: #000;
  background-image: url(../img/movie_bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom left;
}
.movie .wrap {
  width: 90%;
}
.movie h2 {
  margin-bottom: 1.5em;
  text-align: center;
  font-size: 180%;
  color: #fff;
}
.movie ul {
  display: flex;
  gap: 1.5em;
  row-gap: 3em;
  flex-wrap: wrap;
}
.movie ul li {
  flex: 0 1 calc((100% - 4.5em) / 4);
}
.movie ul li a {
  display: block;
  color: #fff;
  overflow: hidden;
  text-decoration: none;
}
.movie ul li a figure {
  background-color: #fff;
  margin-bottom: 0.5em;
}
.movie ul li a figure img {
  transition: all ease 0.3s;
}
.movie ul li a p {
  font-size: 70%;
  font-weight: normal;
}
.movie ul li a:hover img {
  transform: scale(1.05);
}

@media screen and (max-width: 880px) {
  .movie .wrap {
    width: auto;
  }
  .movie ul {
    flex-wrap: wrap;
  }
  .movie ul li {
    flex: 0 1 calc((100% - 1.5em) / 2);
  }
  .movie {
    padding-bottom: 18em;
  }
}/*# sourceMappingURL=style.css.map */