/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 09 2023 | 12:17:13 */
@charset "UTF-8";
/* 共通 */
span {
  display: inline-block;
}

:root {
  --font-family: "Kiwi Maru", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W3", sans-serif;
  --font-kiwi: "Kiwi Maru"sans-serif;
  --font-noto: "Noto Sans JP", sans-serif;
  --font-sawarabi: "Sawarabi Mincho", serif;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --cta-size: clamp(20px, 1.2vw, 24px);
  --cta-size-medium: clamp(14px, 1.4vw, 20px);
  --cta-size-small: clamp(10px, 5vw, 16px);
  --fontsize-small: clamp(14px, 1vw, 20vw);
  --fontsize-small-sp: clamp(10px, 3.8vw, 16px);
  --spider--arrow-size: clamp(48px, 5vw, 64px);
}
@media (min-width: 1921px) {
  :root {
    --_global--container-max-width: 1440px;
  }
}
@media (min-width: 2560px) {
  :root {
    --_global--container-max-width: 1920px;
  }
}
@media (max-width: 768px) {
  :root {
    --spider--arrow-size: clamp(48px, 10vw, 64px);
  }
}

#xo-slider-490.c-slider-sp {
  display: none;
  margin-top: 72px;
}
@media (max-width: 600px) {
  #xo-slider-490.c-slider-sp {
    display: block;
  }
}
#xo-slider-490.c-slider-sp a {
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  outline: none !important;
}
#xo-slider-490.c-slider-sp .swiper-slide img {
  max-width: 65vw;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
}
#xo-slider-490.c-slider-sp .swiper-slide .slide-content {
  width: 65dvw;
  position: absolute;
  display: flex;
  left: 50%;
  bottom: -85%;
  transform: translateX(-50%);
  height: -moz-fit-content;
  height: fit-content;
  max-width: 65vw;
  margin: auto;
  padding: unset;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: white;
  font-size: clamp(1rem, 3vw, 2rem);
  z-index: 100;
}
#xo-slider-490.c-slider-sp .swiper-slide .slide-content .c-slider-thumbs-title {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
#xo-slider-490.c-slider-sp .swiper-slide .slide-content .c-slider-thumbs-title p {
  width: 100%;
}
#xo-slider-490.c-slider-sp .swiper-slide:has([href="#popmake-293"]) .slide-content {
  bottom: -75%;
}
#xo-slider-490.c-slider-sp .swiper-slide:has([href="#popmake-293"]) .slide-content p {
  font-size: clamp(0.6rem, 3.5dvw, 1.25rem);
}
#xo-slider-490.c-slider-sp .swiper-slide:has([href="#popmake-295"]) .slide-content {
  bottom: -75%;
}
#xo-slider-490.c-slider-sp .swiper-slide:has([href="#popmake-295"]) .slide-content p {
  font-size: clamp(0.6rem, 3.5dvw, 1.25rem);
}
#xo-slider-490.c-slider-sp .swiper-button-prev,
#xo-slider-490.c-slider-sp .swiper-button-next {
  border-right: unset;
  border-top: unset;
  width: clamp(12px, 9.5dvw, 48px);
  height: clamp(12px, 9.5dvw, 48px);
  background-color: white;
  border-radius: 50%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  outline: none !important;
}
#xo-slider-490.c-slider-sp .swiper-button-prev::before,
#xo-slider-490.c-slider-sp .swiper-button-next::before {
  content: "";
  width: 100%;
  height: 100%;
}
#xo-slider-490.c-slider-sp .swiper-button-prev::after,
#xo-slider-490.c-slider-sp .swiper-button-next::after {
  content: "";
  position: absolute;
  display: block;
  width: 105%;
  height: 105%;
  -webkit-mask-image: url("../2023/07/arrow-right-circle-fill.svg");
          mask-image: url("../2023/07/arrow-right-circle-fill.svg");
  -webkit-mask-size: 103%;
          mask-size: 103%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #00BA8E;
}
#xo-slider-490.c-slider-sp .swiper-button-prev {
  transform: rotate(180deg);
  left: 17.5vw;
}
#xo-slider-490.c-slider-sp .swiper-button-next {
  right: 17.5vw;
}
