@charset "UTF-8";
.common-slider{
  margin-top: 3rem;
}

[class*=swiper]:focus {
  outline: none;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}
.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.swiper-button-prev,
.swiper-button-next {
  display: grid;
  place-content: center;
  width: 6rem;
  height: 6rem;
  cursor: pointer;
  display: none;
}
.swiper-button-prev::before,
.swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border-radius: 50%;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  width: 1.535rem;
  height: 1.535rem;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
}
.swiper-button-next::after{
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215.347%22%20height%3D%2215.138%22%20viewBox%3D%220%200%2015.347%2015.138%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_57879%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2057879%22%20transform%3D%22translate(-909.502%20-2098.5)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_57750%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2057750%22%20transform%3D%22translate(5788.33%20-3030.353)%20rotate(45)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_51997%22%20data-name%3D%22%E3%83%91%E3%82%B9%2051997%22%20d%3D%22M2976.2%2C8024.214h-1v-9.5h-9.5v-1h10.5Z%22%20transform%3D%22translate(-2783.203%20-942.714)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_51998%22%20data-name%3D%22%E3%83%91%E3%82%B9%2051998%22%20d%3D%22M2965.476%2C8024.566l-.707-.707%2C10-10%2C.707.707Z%22%20transform%3D%22translate(-2782.623%20-942.715)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E')
}
.swiper-button-prev::after {
  margin-left: 0.4rem;
  transform: rotate(-135deg);
}
.swiper-button-next::after {
  margin-right: 0.4rem;
  transform: rotate(45deg);
}
.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.common-slider {
  overflow: hidden;
}
.common-slider .swiper-main {
  margin: auto;
}
.common-slider .swiper-main {
  overflow: visible;
}
.common-slider .swiper-thumb {
  padding-top: 8px;
}
.common-slider .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  pointer-events: none;
}
.common-slider .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
/* .common-slider .swiper-controller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
} */
/* .common-slider .swiper-button-prev,
.common-slider .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
} */
/* .common-slider .swiper-button-prev {
  right: calc(100% + 3.2rem);
}
.common-slider .swiper-button-next {
  left: calc(100% + 3.2rem);
} */
.common-slider .slide {
  display: block;
  overflow: hidden;
}
.common-slider .slide-media {
  aspect-ratio: 800/533;
}
.common-slider .slide-media img {
  object-fit: cover;
}
.common-slider .slide-title {
  margin-top: 1.5rem;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.5;
}
.common-slider .thumb-wrapper {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(6, auto);
  /* gap: 4px; */
  justify-content: center;
  margin-left: -.2rem;
  row-gap: .4rem;
  padding-inline: 1.4rem;
}
.common-slider .thumb-media {
  cursor: pointer;
  aspect-ratio: 3/2;
  width: 5.7rem;
  transition: opacity var(--transition-default);
  margin-inline: .2rem;


}
.common-slider .thumb-media.thumb-media-active{
  opacity: .3;
}
.common-slider .thumb-media img {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
@media (min-width: 768px) {
  .common-slider .thumb-wrapper {
    padding-inline: 0;
    margin-top: 2rem;
    grid-template-columns: repeat(12, auto);
    /* gap: 5px; */
    row-gap: .5rem;
    margin-left: -.25rem;
  }
  .common-slider .thumb-media{
    margin-inline: .25rem;
  }
  /* .common-slider .thumb-media:nth-child(12n){
    margin-right: 0;
  } */
  .common-slider .slide-title {
    margin-top: 2rem;
  }
}


/* ----------------------------------------------------
    Mouse Stalker Styles (PC Only)
---------------------------------------------------- */
/* ストーカー要素（JSで追加されるため初期は非表示でも良いがスタイル定義） */
.mouse-stalker {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  pointer-events: none; /* マウスイベントを透過させる */
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0); /* 初期は非表示 */
  transition: transform 0.15s ease-out, background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.mouse-stalker::after {
  content: '';
  display: block;
  width: 1.535rem;
  height: 1.535rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215.347%22%20height%3D%2215.138%22%20viewBox%3D%220%200%2015.347%2015.138%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_57879%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2057879%22%20transform%3D%22translate(-909.502%20-2098.5)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_57750%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2057750%22%20transform%3D%22translate(5788.33%20-3030.353)%20rotate(45)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_51997%22%20data-name%3D%22%E3%83%91%E3%82%B9%2051997%22%20d%3D%22M2976.2%2C8024.214h-1v-9.5h-9.5v-1h10.5Z%22%20transform%3D%22translate(-2783.203%20-942.714)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_51998%22%20data-name%3D%22%E3%83%91%E3%82%B9%2051998%22%20d%3D%22M2965.476%2C8024.566l-.707-.707%2C10-10%2C.707.707Z%22%20transform%3D%22translate(-2782.623%20-942.715)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: perspective(600px) rotateY(0deg);
  backface-visibility: visible; 
}
.mouse-stalker.is-next::after {
  transform: perspective(600px) rotateY(0deg);
}
.mouse-stalker.is-prev::after {
  transform: perspective(600px) rotateY(180deg);
}

/* ホバー時の表示アニメーション */
.mouse-stalker.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

/* PCのみ適用するスタイル */
@media (min-width: 769px) {
  /* エリア内ではカーソルを消す */
  .js-mouse-stalker {
    cursor: none; 
    position: relative; /* 座標計算の基準 */
  }

  /* PCではデフォルトの矢印ナビゲーションを隠す（ストーカーが代わりになるため） */
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

/* スマホなどは通常のカーソルとボタンを表示 */
@media (max-width: 768px) {
  .mouse-stalker {
    display: none !important;
  }
}


@media (hover: hover) {
}