@charset "utf-8";

.mySwiper01Main .swiper-wrapper {
  width: 100%;
  margin: 0 auto 2%;
}

.mySwiper01Main .swiper-wrapper .swiper-slide img {
  width: 100%;
  margin: 0 auto;
}

.mySwiper01Thumb .swiper-wrapper {
  display: block;
  width: 100%;
  margin: 0 auto 6%;
  letter-spacing: -0.4em !important;
}

.mySwiper01Thumb .swiper-wrapper .swiper-slide {
  position: relative;
  width: 15.625% !important;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal !important;
}

.mySwiper01Thumb .swiper-wrapper .swiper-slide:not(:last-of-type) {
  margin-right: 1.25%;
}

.mySwiper01Thumb .swiper-slide:nth-of-type(1) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon01_off.png") no-repeat;
  background-size: cover;
}
.mySwiper01Thumb .swiper-slide-thumb-active:nth-of-type(1) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon01_on.png") no-repeat;
  background-size: cover;
}

.mySwiper01Thumb .swiper-slide:nth-of-type(2) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon02_off.png") no-repeat;
  background-size: cover;
}
.mySwiper01Thumb .swiper-slide-thumb-active:nth-of-type(2) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon02_on.png") no-repeat;
  background-size: cover;
}

.mySwiper01Thumb .swiper-slide:nth-of-type(3) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon03_off.png") no-repeat;
  background-size: cover;
}
.mySwiper01Thumb .swiper-slide-thumb-active:nth-of-type(3) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon03_on.png") no-repeat;
  background-size: cover;
}

.mySwiper01Thumb .swiper-slide:nth-of-type(4) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon04_off.png") no-repeat;
  background-size: cover;
}
.mySwiper01Thumb .swiper-slide-thumb-active:nth-of-type(4) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon04_on.png") no-repeat;
  background-size: cover;
}

.mySwiper01Thumb .swiper-slide:nth-of-type(5) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon05_off.png") no-repeat;
  background-size: cover;
}
.mySwiper01Thumb .swiper-slide-thumb-active:nth-of-type(5) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon05_on.png") no-repeat;
  background-size: cover;
}

.mySwiper01Thumb .swiper-slide:nth-of-type(6) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon06_off.png") no-repeat;
  background-size: cover;
}
.mySwiper01Thumb .swiper-slide-thumb-active:nth-of-type(6) span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(118 / 122 * 100%);
  background: url("../images/chara_icon06_on.png") no-repeat;
  background-size: cover;
}

.swiper-button-next01 {
  width: 7.5%;
  height: auto;
  padding-top: calc(230 / 63 * 7.5%);
  background-size: cover !important;
  margin-top: 0;
  position: absolute;
  top: 26%;
  right: 0%;
  z-index: 10;
  cursor: pointer;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  background: url("../images/right.png") left top no-repeat;
}

.swiper-button-prev01 {
  width: 7.5%;
  height: auto;
  padding-top: calc(230 / 63 * 7.5%);
  background-size: cover !important;
  margin-top: 0;
  position: absolute;
  top: 26%;
  left: 0%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  background: url("../images/left.png") left top no-repeat;
}

.swiperMOVIE {
  width: 82.1%;
  margin: 0 auto;
}

.swiper-button-nextMOVIE {
  width: 4.5%;
  height: auto;
  padding-top: calc(53 / 31 * 4.5%);
  background-size: cover !important;
  margin-top: 0;
  position: absolute;
  top: 48%;
  right: 2.4%;
  z-index: 10;
  cursor: pointer;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  background: url("../images/ev_right-mv.png") left top no-repeat;
}

.swiper-button-prevMOVIE {
  width: 4.5%;
  height: auto;
  padding-top: calc(53 / 31 * 4.5%);
  background-size: cover !important;
  margin-top: 0;
  position: absolute;
  top: 48%;
  left: 2.4%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  background: url("../images/ev_left-mv.png") left top no-repeat;
}

.swiperMOVIE .swiper-pagination {
  position: relative;
  margin: clamp(1.2rem, 0.514rem + 3.43vw, 1.8rem) auto 0;
}

.swiperMOVIE .swiper-pagination-bullet,
.swiperMOVIE .swiper-pagination-bullet-active {
  border-radius: 0%;
  width: clamp(0.375rem, 0.089rem + 1.43vw, 0.625rem);
  height: clamp(0.375rem, 0.089rem + 1.43vw, 0.625rem);
}

.swiperMOVIE .swiper-pagination-bullet {
  background: white;
  opacity: 1;
  margin: 0 clamp(0.188rem, -0.17rem + 1.79vw, 0.5rem) !important;
}

.swiperMOVIE .swiper-pagination-bullet-active {
  background: #35ff79;
  opacity: 1;
  margin: 0 clamp(0.188rem, -0.17rem + 1.79vw, 0.5rem) !important;
}

.swiperEV1,
.swiperEV2,
.swiperEV3,
.swiperEV4 {
  width: 75%;
  position: absolute;
  bottom: clamp(0.5rem, -0.643rem + 5.71vw, 1.5rem);
  left: 0;
  right: 0;
  margin: auto;
}

.swiper-button-nextEV1,
.swiper-button-nextEV2,
.swiper-button-nextEV3,
.swiper-button-nextEV4 {
  width: 6%;
  height: auto;
  padding-top: calc(53 / 31 * 6%);
  background-size: cover !important;
  margin-top: 0;
  position: absolute;
  top: 42%;
  right: -10%;
  z-index: 10;
  cursor: pointer;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  background: url("../images/ev_right.png") left top no-repeat;
}

.swiper-button-prevEV1,
.swiper-button-prevEV2,
.swiper-button-prevEV3,
.swiper-button-prevEV4 {
  width: 6%;
  height: auto;
  padding-top: calc(53 / 31 * 6%);
  background-size: cover !important;
  margin-top: 0;
  position: absolute;
  top: 42%;
  left: -10%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  background: url("../images/ev_left.png") left top no-repeat;
}

.swiperEV1 .swiper-pagination,
.swiperEV2 .swiper-pagination,
.swiperEV3 .swiper-pagination,
.swiperEV4 .swiper-pagination {
  position: relative;
  margin: clamp(0.5rem, -0.357rem + 4.29vw, 1.25rem) auto 0;
}

.swiperEV1 .swiper-pagination-bullet,
.swiperEV2 .swiper-pagination-bullet,
.swiperEV3 .swiper-pagination-bullet,
.swiperEV4 .swiper-pagination-bullet,
.swiperEV1 .swiper-pagination-bullet-active,
.swiperEV2 .swiper-pagination-bullet-active,
.swiperEV3 .swiper-pagination-bullet-active,
.swiperEV4 .swiper-pagination-bullet-active {
  border-radius: 0%;
  width: clamp(0.375rem, 0.089rem + 1.43vw, 0.625rem);
  height: clamp(0.375rem, 0.089rem + 1.43vw, 0.625rem);
  opacity: 1;
  margin: 0 clamp(0.25rem, -0.036rem + 1.43vw, 0.5rem) !important;
}

.swiperEV1 .swiper-pagination-bullet,
.swiperEV2 .swiper-pagination-bullet,
.swiperEV3 .swiper-pagination-bullet,
.swiperEV4 .swiper-pagination-bullet {
  background: white;
}

.swiperEV1 .swiper-pagination-bullet-active,
.swiperEV2 .swiper-pagination-bullet-active,
.swiperEV3 .swiper-pagination-bullet-active,
.swiperEV4 .swiper-pagination-bullet-active {
  background: #00419b;
}