@charset "utf-8";
/* CSS Document */

/*============================
#mv（ここからスライダー専用のデザイン）
============================*/
#mv {
  padding: 18px 0;
  background: #ffffff;
}
@media (min-width: 769px) {
  #mv {
    padding: 30px 0;
  }
}
#mv .mv-inner {
  opacity: 0;
  transition: 0.3s;
}
#mv .mv-inner .mv-slider.swiper {
  margin-bottom: 14px;
}
@media (min-width: 769px) {
  #mv .mv-inner .mv-slider.swiper {
    margin-bottom: 20px;
  }
}
#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide {
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}
/*
#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide a {
  position: relative;
  width: 100%;
  height: 100%;
}
*/

/* 1. 画像の入っている箱（.img-box）の舞台を完全固定（aタグの干渉を受けない） */
#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide .img-box {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  z-index: 1 !important; /* ベースの重なり */
}
/* 2. img-box の「::after」を使い、中の画像（imgや.img-bg）の真上に強制的に30%の膜を被せる */
#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide .img-box::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.3) !important; /* 本家ISPと同じ30%の暗さ */
  z-index: 9999 !important; /* 画像の支配層よりも絶対上に配置 */
  transition: 0.3s !important;
  pointer-events: none !important; /* ポップアップのクリックを邪魔しない安全弁 */
}

/* 3. Swiperが中央と判定したスライド（.swiper-slide-active）の中にある .img-box::after だけを透明にする */
#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide.swiper-slide-active .img-box::after {
  opacity: 0 !important;
}
/* アクティブじゃないスライドを少し暗くするおしゃれエフェクト */
/*#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  transition: 0.3s;
}
*/
#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide a .img-box {
  border-radius: 10px;
  overflow: hidden;
}
#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide a .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 769px) {
  #mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide a:hover .img-box img {
    transform: scale(1.05); /* マウスを乗せたときに画像を少し大きくする */
  }
}
#mv .mv-inner .mv-slider.swiper .mv-list.swiper-wrapper .swiper-slide.swiper-slide-active a::before {
  opacity: 0;
}
/* 左右の矢印ボタンのカスタム調整 */
#mv .mv-inner .mv-slider.swiper .slider-btn-wrapper .slider-button {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  cursor: pointer;
}
@media (min-width: 769px) {
  #mv .mv-inner .mv-slider.swiper .slider-btn-wrapper .slider-button {
    width: 50px;
    height: 50px;
  }
}
#mv .mv-inner .mv-slider.swiper .slider-btn-wrapper .mv-slider-button-prev {
  left: 10px;
  transform: scale(-1, 1);
}
@media (min-width: 769px) {
  #mv .mv-inner .mv-slider.swiper .slider-btn-wrapper .mv-slider-button-prev {
    left: 5vw;
  }
}
#mv .mv-inner .mv-slider.swiper .slider-btn-wrapper .mv-slider-button-next {
  right: 10px;
}
@media (min-width: 769px) {
  #mv .mv-inner .mv-slider.swiper .slider-btn-wrapper .mv-slider-button-next {
    right: 5vw;
  }
}
/* メイン画像の下にある、サムネイル（小さい画像）用のスライダー設定 */
#mv .mv-inner .sub-slider-wrapper.num4 {
  margin: 0 auto;
  overflow: hidden;
}
#mv .mv-inner .sub-slider-wrapper.num4 .sub-slider {
  overflow: visible;
}
#mv .mv-inner .sub-slider.swiper {
  margin: 0 auto;
}
@media (min-width: 769px) {
  #mv .mv-inner .sub-slider.swiper {
    max-width: 700px;
    margin: 0 auto;
  }
}
#mv .mv-inner .sub-slider.swiper .swiper-wrapper .swiper-slide {
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  max-width: 184px;
}
#mv .mv-inner .sub-slider.swiper .swiper-wrapper .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  transition: 0.3s;
}
#mv .mv-inner .sub-slider.swiper .swiper-wrapper .swiper-slide .img-box {
  border-radius: 3px;
  overflow: hidden;
}
#mv .mv-inner .sub-slider.swiper .swiper-wrapper .swiper-slide .img-box img {
  transition: 0.3s;
}
@media (min-width: 769px) {
  #mv .mv-inner .sub-slider.swiper .swiper-wrapper .swiper-slide:hover .img-box img {
    opacity: 0.7;
  }
}
#mv .mv-inner .sub-slider.swiper .swiper-wrapper .swiper-slide.swiper-slide-active::before {
  opacity: 0;
}