slide_02

// =====================================================================================
//
// slide_02
//
// =====================================================================================

@use 'scss/global' as g;

// -------------------------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------------------------

// 戻る/進むアイコン色
$color_icon: #000;

// -------------------------------------------------------------------------------------
// スライド全体枠
// -------------------------------------------------------------------------------------
.slide_02 {
  @include g.holder();

  position: relative;
}

// -------------------------------------------------------------------------------------
// スライド全体枠 > Swiperコンテナ
// -------------------------------------------------------------------------------------
.slide_02--container {
}

// -------------------------------------------------------------------------------------
// スライド全体枠 > Swiperコンテナ > Swiperラッパー
// -------------------------------------------------------------------------------------
.slide_02--wrapper {
}

// -------------------------------------------------------------------------------------
// スライド全体枠 > Swiperコンテナ > Swiperラッパー > スライド単体
// -------------------------------------------------------------------------------------
.slide_02--slide {
  img {
    display: block;
    width: 100%;
  }
}

// -------------------------------------------------------------------------------------
// スライド全体枠 > Swiperコンテナ > 戻る/進むボタン
// -------------------------------------------------------------------------------------
%slide_02--prev_btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 24px;
  opacity: 0.3;
  transform: translateY(-50%);

  &.swiper-button-disabled {
    display: none;
  }
}

// 戻る
.slide_02--prev_btn {
  @extend %slide_02--prev_btn;

  left: 0;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path fill="%23#{str-slice(#{$color_icon}, 2)}" d="M8.5,11.7L2.8,6l5.7-5.7l0.7,0.7L4.2,6l4.9,4.9L8.5,11.7z" /></svg>');
}

// 進む
.slide_02--next_btn {
  @extend %slide_02--prev_btn;

  right: 0;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path fill="%23#{str-slice(#{$color_icon}, 2)}" d="M2.8,10.9L7.8,6L2.8,1.1l0.7-0.7L9.2,6l-5.7,5.7L2.8,10.9z" /></svg>');
}

// -------------------------------------------------------------------------------------
// スライド全体枠 > ページネーション
// -------------------------------------------------------------------------------------
.slide_02--pagination {
  display: flex;
  justify-content: center;
  margin: 16px 0 0;

  @include g.mq(pc) {
    margin-top: 24px;
  }
}

// -------------------------------------------------------------------------------------
// スライド全体枠 > ページネーション > ドット
// -------------------------------------------------------------------------------------
.slide_02--pagination_bullet {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 8px;
  background-color: #ccc;
  border-radius: 50% 50%;

  &.swiper-pagination-bullet-active {
    background-color: #000;
  }
}