@charset "UTF-8";
body, html {
  padding: 0;
  margin: 0;
}

.mv__container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 628px;
}
@media screen and (max-width: 440px) {
  .mv__container {
    height: 400px;
  }
}

.main-slider .slick-slide {
  height: 628px;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 1vw !important;
  margin-left: 1vw !important;
}
@media screen and (max-width: 440px) {
  .main-slider .slick-slide {
    height: 400px;
  }
}

.main-slider {
  width: 100%;
  max-width: 100%;
  z-index: 5;
  max-height: 628px;
  position: relative;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 628px;
}
@media screen and (max-width: 440px) {
  .main-slider {
    max-height: 400px;
    height: 400px;
  }
}

.main-slider .slide img {
  height: 480px;
  width: auto;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3098039216);
          box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3098039216);
}

.main-slider .slide.is-center img {
  -webkit-transform: scale(1);
          transform: scale(1);
  border: 4.73px solid #fff;
  -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3098039216);
          box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3098039216);
}

.mv-wrapper {
  position: relative;
  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.main-slider .slide.slick-slide a {
  width: auto;
  height: 76%;
  cursor: pointer;
}

.main-slider .slide.slick-slide img {
  width: auto;
  height: 100%;
}

.main-slider .slick-list {
  overflow: visible;
  width: 50%;
  margin: 0 auto;
  height: 628px;
}
@media screen and (max-width: 440px) {
  .main-slider .slick-list {
    height: 400px;
  }
}

.main-slider img {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.main-slider.slick-center img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.main-slider .slick-slide img {
  height: 100%;
  width: auto;
}

.main-slider .slick-cloned img {
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-transform: scale(0.6) !important;
          transform: scale(0.6) !important;
}

.bg-slick {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 628px;
}
@media screen and (max-width: 440px) {
  .bg-slick {
    height: 400px;
  }
}

.bg-slick__item.slick-slide {
  position: relative;
  height: 100%;
  padding-bottom: 50px;
}

.bg-slick__item.slick-slide .bg-backpack {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
  background: linear-gradient(90.59deg, rgba(220, 202, 173, 0.5), rgba(101, 73, 48, 0.5));
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
          clip-path: polygon(0 100%, 100% 100%, 100% 0);
  max-height: 628px;
  height: 100%;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 440px) {
  .bg-slick__item.slick-slide .bg-backpack {
    max-height: 400px;
  }
}

.bg-slick__item.slick-slide .bg-mirthwood {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
  background: linear-gradient(90.59deg, rgba(159, 174, 113, 0.5), rgba(76, 99, 74, 0.5));
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
          clip-path: polygon(0 100%, 100% 100%, 100% 0);
  max-height: 628px;
  height: 100%;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 440px) {
  .bg-slick__item.slick-slide .bg-mirthwood {
    max-height: 400px;
  }
}

.bg-slick__item.slick-slide .bg-miside {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
  background: linear-gradient(90.59deg, rgba(232, 251, 248, 0.5), rgba(117, 45, 107, 0.5));
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
          clip-path: polygon(0 100%, 100% 100%, 100% 0);
  max-height: 628px;
  height: 100%;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 440px) {
  .bg-slick__item.slick-slide .bg-miside {
    max-height: 400px;
  }
}

.bg-slick__item.slick-slide .bg-returnfromcore {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
  background: linear-gradient(90.59deg, rgba(222, 178, 132, 0.5), rgba(164, 173, 244, 0.5));
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
          clip-path: polygon(0 100%, 100% 100%, 100% 0);
  max-height: 628px;
  height: 100%;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 440px) {
  .bg-slick__item.slick-slide .bg-returnfromcore {
    max-height: 400px;
  }
}

.bg-slick__item.slick-slide .bg-unfollow {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
  background: linear-gradient(90.59deg, rgba(114, 158, 191, 0.5), rgba(121, 112, 105, 0.5));
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
          clip-path: polygon(0 100%, 100% 100%, 100% 0);
  max-height: 628px;
  height: 100%;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 440px) {
  .bg-slick__item.slick-slide .bg-unfollow {
    max-height: 400px;
  }
}

.bg-slick__item.slick-slide .bg-craftrium {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
  background: linear-gradient(90.59deg, rgba(160, 173, 175, 0.5), rgba(149, 156, 165, 0.5));
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);
          clip-path: polygon(0 100%, 100% 100%, 100% 0);
  max-height: 628px;
  height: 100%;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
@media screen and (max-width: 440px) {
  .bg-slick__item.slick-slide .bg-craftrium {
    max-height: 400px;
  }
}

.bg-slick__item.slick-slide img {
  -webkit-filter: blur(25px);
          filter: blur(25px);
}

.bg-slick__item.slick-slide.slick-current.slick-active img {
  -webkit-animation: animationZoom2 15s ease-in-out infinite;
          animation: animationZoom2 15s ease-in-out infinite;
  z-index: 1;
}

@-webkit-keyframes animationZoom2 {
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes animationZoom2 {
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
.main-slider.slick-slide {
  z-index: 50;
  height: 80%;
  position: relative;
}

.main-slider.slick-slide.slick-active {
  z-index: 100;
}

/* dotsカスタマイズ */
.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 30px !important;
}

.slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #fff;
  border-radius: 58%;
  cursor: pointer;
}

.slick-dots li:hover,
.slick-dots li.slick-active {
  background: #0C985B;
  border: solid #fff 2px;
}

.slick-dots li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

::marker {
  display: none !important;
  font-size: 0 !important;
}

@media screen and (max-width: 1000px) {
  .main-slider .slide.slick-slide a {
    width: auto;
    height: 60%;
  }
  .slick-track {
    height: 100% !important;
  }
  .slick-list.draggable {
    height: 100%;
  }
  .bg-slick__item.slick-slide img {
    height: 100%;
    width: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media screen and (max-width: 740px) {
  .main-slider .slide.slick-slide a {
    width: auto;
    height: 40%;
  }
}
@media screen and (max-width: 440px) {
  .main-slider .slide.slick-slide img {
    width: auto;
    height: 43%;
  }
}