@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : top.css
Description : トップページ
===================================================================== */
/* ========================================================
    mv
======================================================== */
.mv {
  position: relative;
  width: 100%;
  padding: 24rem 0 20rem 0;
}
@media screen and (min-width: 768px) {
  .mv {
    padding: 24rem 0 12.5% 0;
  }
}
@media screen and (min-width: 1600px) {
  .mv {
    padding: 24rem 0 20rem 0;
  }
}
.mv::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff300;
  z-index: -4;
}
.mv .inner {
  max-width: 1600px;
  padding: 0;
}
.mv_column {
  position: relative;
  width: 100%;
}
.mv_ttl {
  position: relative;
  width: 60%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .mv_ttl {
    width: 36.875%;
    margin: 0 0 0 3.75%;
  }
}
.mv_anime {
  position: relative;
  width: 86.6666666667%;
  aspect-ratio: 1.2389853138;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .mv_anime {
    position: absolute;
    right: 1.25%;
    top: 0;
    width: 58%;
    margin: -7.5% 0 0 0;
  }
}
.mv_anime::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/top/mv_anime_bg01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
.mv_anime_img {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  z-index: -1;
}
.mv_anime_img.img01 {
  left: 20.7974137931%;
  top: 2.9372496662%;
  width: 19.3965517241%;
}
.mv_anime_img.img02 {
  left: 67.1336206897%;
  top: 20.5607476636%;
  width: 3.6637931034%;
}
.mv_anime_img.img03 {
  left: 43.4267241379%;
  top: 24.2990654206%;
  width: 4.849137931%;
}
.mv_anime_img.img04 {
  left: 48.0603448276%;
  top: 27.1028037383%;
  width: 4.849137931%;
}
.mv_anime_img.img05 {
  left: 57.3275862069%;
  top: 34.1789052069%;
  width: 27.2629310345%;
}
.mv_anime_img.img06 {
  left: 15.1939655172%;
  top: 84.779706275%;
  width: 3.3405172414%;
}
.mv_anime_img.img07 {
  left: 26.6163793103%;
  top: 77.7036048064%;
  width: 11.3146551724%;
}
.mv_anime_img.img08 {
  left: 43.1034482759%;
  top: 72.3631508678%;
  width: 6.8965517241%;
}
.mv_anime_img.img09 {
  left: 77.9094827586%;
  top: 79.8397863818%;
  width: 10.775862069%;
}
.mv_anime_img.img10 {
  left: 87.2844827586%;
  top: 76.3684913218%;
  width: 12.1767241379%;
}
.mv_anime_img.img11 {
  left: 42.284483%;
  top: 56.368491%;
  width: 11.176724%;
}
.mv_anime_img.img12 {
  left: 11.284483%;
  top: 52.368491%;
  width: 9.176724%;
}
.mv_anime_img * {
  line-height: 1 !important;
}
.mv_wrap {
  position: relative;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .mv_wrap {
    margin-top: 5%;
  }
}
.mv_btn {
  position: relative;
  width: 62%;
  aspect-ratio: 465/140;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .mv_btn {
    width: 29.0625%;
    margin: 0 0 0 3.75%;
  }
}
.mv_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  padding: 0 6.1538461538%;
  border-radius: 2rem;
  background-color: #e50012;
  overflow: hidden;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .mv_btn > a:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .mv_btn > a:hover::before {
    transform: translateY(-50%) scale(200);
  }
}
.mv_btn > a::before {
  content: "";
  position: absolute;
  right: 3.0769230769%;
  top: 50%;
  display: block;
  width: 1rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #ff4070;
  transform: translateY(-50%);
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.mv_btn > a::after {
  content: "";
  position: absolute;
  right: 3.0769230769%;
  top: 50%;
  display: block;
  width: 1rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #fff300;
  transform: translateY(-50%);
  transition: 0.5s ease-in-out;
  z-index: -1;
}
.mv_btn > a > figure {
  display: block;
  width: 20.8333333333%;
  margin-right: 5.2631578947%;
}
.mv_btn > a > span {
  display: block;
  width: auto;
  color: #fff300;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.4;
  transform: translateY(-0.05em);
}
@media screen and (min-width: 768px) {
  .mv_btn > a > span {
    font-size: 1.75vw;
  }
}
@media screen and (min-width: 1600px) {
  .mv_btn > a > span {
    font-size: 2.8rem;
  }
}
.mv_scroll {
  position: relative;
  width: auto;
  margin: 8rem 0 0 50%;
}
@media screen and (min-width: 768px) {
  .mv_scroll {
    margin: 5% 0 0 18.25%;
  }
}
.mv_scroll > a {
  position: relative;
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .mv_scroll > a:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .mv_scroll > a:hover::before {
    top: 1rem;
  }
}
.mv_scroll > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 1.9rem;
  aspect-ratio: 21/86;
  background-image: url(../images/common/arrow_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .mv_scroll > a::before {
    width: 0.875vw;
  }
}
@media screen and (min-width: 1600px) {
  .mv_scroll > a::before {
    width: 1.4rem;
  }
}
.mv_scroll > a > span {
  display: block;
  padding-left: 0.8em;
  font-family: "Poppins", sans-serif;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  transform: scale(1.1, 1);
  transform-origin: left top;
}
@media screen and (min-width: 768px) {
  .mv_scroll > a > span {
    font-size: 1.875vw;
  }
}
@media screen and (min-width: 1600px) {
  .mv_scroll > a > span {
    font-size: 3rem;
  }
}

/*# sourceMappingURL=top.css.map */