/**************** components **************/
.sp-block-image__image {
  width: 100%;
}
.sp-block-image-double {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  justify-content: center;
}
.sp-block-image-double__item {
  display: block;
  text-align: center;
  width: 50%;
}
.sp-block-image-double__image {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.sp-block-image-double__caption {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: var(--bs-gray);
  text-align: left;
}
@media (max-width: 575px) {
  .sp-block-image-double__item {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .sp-block-image-double__caption {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.sp-block-button-social {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}
.sp-block-button-social__image {
  max-width: 144px;
}


.sp-block-button-custom {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}
.sp-block-button-custom__button {
}

.sp-block-video {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.sp-block-video iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.sp-block-slider {
  margin-top: 3rem;
  margin-bottom: 3rem;
  aspect-ratio: 16 / 9;
}
.sp-block-slider {
  /* https://swiperjs.com/swiper-api#navigation-css-custom-properties */
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--bs-secondary);

  /* https://swiperjs.com/swiper-api#pagination-css-custom-properties */
  --swiper-pagination-color: var(--bs-secondary);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}
.sp-block-slider img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.sp-block-form__description {
  color: gray;
}
.sp-block-form .form-control::placeholder{
  color: gray;
}

.sp-block-socials_icon {
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  width: 2rem;
  height: 2rem;
  /* need set css variable for icon in theme css */
}

/* hide pseudo after element, to prefetch social ver icon */
.sp-block-socials_icon:after {
  position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1;
}

.sp-block-socials_icon.icon-discord {
  background-image: var(--icon-discord); 
}
.sp-block-socials_icon.icon-discord::after {
  content: var(--icon-discord-ver);
}

.sp-block-socials_icon.icon-discord:hover {
  background-image: var(--icon-discord-ver);
}

.sp-block-socials_icon.icon-email {
  background-image: var(--icon-email);
}
.sp-block-socials_icon.icon-email:after {
  content: var(--icon-email-ver)
}
.sp-block-socials_icon.icon-email:hover {
  content: var(--icon-email-ver);
}

.sp-block-socials_icon.icon-facebook {
  background-image: var(--icon-facebook);
}
.sp-block-socials_icon.icon-facebook:after {
  content: var(--icon-facebook-ver)
}
.sp-block-socials_icon.icon-facebook:hover {
  background-image: var(--icon-facebook-ver);
}

.sp-block-socials_icon.icon-github {
  background-image: var(--icon-github);
}
.sp-block-socials_icon.icon-github:after {
  content: var(--icon-github-ver);
}
.sp-block-socials_icon.icon-github:hover {
  background-image: var(--icon-github-ver);
}

.sp-block-socials_icon.icon-instagram {
  background-image: var(--icon-instagram);
}
.sp-block-socials_icon.icon-instagram:after {
  content: var(--icon-instagram-ver);
}
.sp-block-socials_icon.icon-instagram:hover {
  background-image: var(--icon-instagram-ver);
}

.sp-block-socials_icon.icon-line {
  background-image: var(--icon-line);
}
.sp-block-socials_icon.icon-line:after {
  content: var(--icon-line-ver);
}
.sp-block-socials_icon.icon-line:hover {
  background-image: var(--icon-line-ver);
}

.sp-block-socials_icon.icon-linkedin {
  background-image: var(--icon-linkedin);
 }
.sp-block-socials_icon.icon-linkedin:after {
  content: var(--icon-linkedin-ver);
}
.sp-block-socials_icon.icon-linkedin:hover {
  background-image: var(--icon-linkedin-ver);
}

.sp-block-socials_icon.icon-pixiv {
  background-image: var(--icon-pixiv);  
}
.sp-block-socials_icon.icon-pixiv:after {
  content: var(--icon-pixiv-ver);
}
.sp-block-socials_icon.icon-pixiv:hover {
  background-image: var(--icon-pixiv-ver);
}

.sp-block-socials_icon.icon-podcast {
  background-image: var(--icon-podcast);
}
.sp-block-socials_icon.icon-podcast:after {
  content: var(--icon-podcast-ver);
}
.sp-block-socials_icon.icon-podcast:hover {
  background-image: var(--icon-podcast-ver);
}

.sp-block-socials_icon.icon-threads {
  background-image: var(--icon-threads);
}
.sp-block-socials_icon.icon-threads:after {
  content: var(--icon-threads-ver);
}
.sp-block-socials_icon.icon-threads:hover {
  background-image: var(--icon-threads-ver);
}

.sp-block-socials_icon.icon-tiktok {
  background-image: var(--icon-tiktok);
}
.sp-block-socials_icon.icon-tiktok:after {
  content: var(--icon-tiktok-ver);
}
.sp-block-socials_icon.icon-tiktok:hover {
  background-image: var(--icon-tiktok-ver);
}

.sp-block-socials_icon.icon-twitch {
  background-image: var(--icon-twitch);
}
.sp-block-socials_icon.icon-twitch:after {
  content: var(--icon-twitch-ver);
}
.sp-block-socials_icon.icon-twitch:hover {
  background-image: var(--icon-twitch-ver);
}

.sp-block-socials_icon.icon-website {
  background-image: var(--icon-website);
}
.sp-block-socials_icon.icon-website:after {
  content: var(--icon-website-ver);
}
.sp-block-socials_icon.icon-website:hover {
  background-image: var(--icon-website-ver);
}

.sp-block-socials_icon.icon-wechat {
  background-image: var(--icon-wechat);
}
.sp-block-socials_icon.icon-wechat:after {
  content: var(--icon-wechat-ver);
}
.sp-block-socials_icon.icon-wechat:hover {
  background-image: var(--icon-wechat-ver);
}

.sp-block-socials_icon.icon-x {
  background-image: var(--icon-x);
}
.sp-block-socials_icon.icon-x:after {
  content: var(--icon-x-ver);
}
.sp-block-socials_icon.icon-x:hover {
  background-image: var(--icon-x-ver);
}

.sp-block-socials_icon.icon-youtube {
  background-image: var(--icon-youtube);
}
.sp-block-socials_icon.icon-youtube:after {
  content: var(--icon-youtube-ver);
}
.sp-block-socials_icon.icon-youtube:hover {
  background-image: var(--icon-youtube-ver);
}