body {
  margin: 0;
  padding: 0;
}

.slider--area {
  overflow: hidden;
}

.slider--area ul {
  width: 100%;
  height: 750px;
  margin: 0;
  padding: 0;
  position: relative;
}
@media screen and (max-width: 768px) {
.slider--area ul {
  width: 100%;
  aspect-ratio:750 / 1300;
  margin: 0;
  padding: 0;
  position: relative;
  }
}
.slider--area ul:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: calc(50% - 700px);
  width: 1400px;
  height: 750px;
  background: url(../img/top/mv_catch.png) no-repeat left top;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .slider--area ul:after {
    width: 100%;
    height: 100%;
    background: url(../img/top/mv_catch_sp.png) no-repeat left 110px;
    background-size: 80%;
    aspect-ratio: 646/502;
    left: 15px;
  }
}

.slider--area ul li {
  width: 100%;
  height: 100%;
  list-style: none;
}

.slider--area ul li picture {
  display: block;
  margin: 0 auto;
  width: 1400px;
  height: 100%;
  overflow: visible;
  position: relative;
}
@media screen and (max-width: 768px) {
  .slider--area ul li picture {
    width: 100%;
  }
}

.slider--area ul li picture img {
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .slider--area ul li picture img {
    aspect-ratio: 750/1300;
    height: 100%;
    width: 100%;
  }
}

/* slide_new */
.slider--area ul li .slide_img{
    width:100%;
    height:100%;
}
.slider--area ul li.sl01 .slide_img{
    background: url(../img/top/mv_item01.png) no-repeat center center;
    background-size: cover;
}
.slider--area ul li.sl02 .slide_img{
    background: url(../img/top/mv_item02.png) no-repeat center center;
    background-size: cover;
}
.slider--area ul li.sl03 .slide_img{
    background: url(../img/top/mv_item03.png) no-repeat center center;
    background-size: cover;
}
.slider--area ul li.sl04 .slide_img{
    background: url(../img/top/mv_item04.png) no-repeat center center;
    background-size: cover;
}
@media screen and (max-width: 768px) {
.slider--area ul li.sl01 .slide_img{
    background: url(../img/top/mv_item01_sp.png) no-repeat center center;
    background-size: contain;
}
.slider--area ul li.sl02 .slide_img{
    background: url(../img/top/mv_item02_sp.png) no-repeat center center;
    background-size: contain;
}
.slider--area ul li.sl03 .slide_img{
    background: url(../img/top/mv_item03_sp.png) no-repeat center center;
    background-size: contain;
}
.slider--area ul li.sl04 .slide_img{
    background: url(../img/top/mv_item04_sp.png) no-repeat center center;
    background-size: contain;
}
}

.slider--area ul li.sl01 {
  background: url(../img/top/mv_back01.png) no-repeat center left;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .slider--area ul li.sl01 {
    background: url(../img/top/mv_back01_sp.png) no-repeat left top;
    background-size: cover;
  }
}

.slider--area ul li.sl02 {
  background: url(../img/top/mv_back02.png) no-repeat center left;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .slider--area ul li.sl02 {
    background: url(../img/top/mv_back02_sp.png) no-repeat left top;
    background-size: cover;
  }
}

.slider--area ul li.sl03 {
  background: url(../img/top/mv_back03.png) no-repeat center left;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .slider--area ul li.sl03 {
    background: url(../img/top/mv_back03_sp.png) no-repeat left top;
    background-size: cover;
  }
}

.slider--area ul li.sl04 {
  background: url(../img/top/mv_back04.png) no-repeat center left;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .slider--area ul li.sl04 {
    background: url(../img/top/mv_back04_sp.png) no-repeat left top;
    background-size: cover;
  }
}

@media screen and (min-width: 640px) and (max-width: 1400px) {
  .slider--area ul li picture {
    margin-left: calc(50vw - 700px);
  }
}
@media screen and (min-width: 640px) and (max-width: 1085px) {
  .slider--area ul {
    height: calc(100vw * 750 / 1086);
  }

  .slider--area ul:after {
    height: calc(100vw * 750 / 1086);
    background: url(../img/top/mv_catch2.png) no-repeat center center;
    background-size: contain;
  }

  .slider--area ul li {
    width: 100%;
    height: 100%;
    list-style: none;
  }

  .slider--area ul li picture img {
    position: absolute;
    left: 0;
    height: 100%;
    width: auto;
  }
}

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