slide_01

// =====================================================================================
//
// slide_01
//
// =====================================================================================

@use 'scss/global' as g;

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

// スライド間のマージン
$slide_gutter_sp: 8px;
$slide_gutter_tablet: 16px;
$slide_gutter_pc: 16px;

// -------------------------------------------------------------------------------------
// 全体枠
// -------------------------------------------------------------------------------------
.slide_01 {
}

// -------------------------------------------------------------------------------------
// 全体枠 > スライド全体枠
// -------------------------------------------------------------------------------------
.slide_01--container {
}

// -------------------------------------------------------------------------------------
// 全体枠 > スライド全体枠 > スライドコンテナ
// -------------------------------------------------------------------------------------
.slide_01--wrapper {
}

// -------------------------------------------------------------------------------------
// 全体枠 > スライド全体枠 > スライドコンテナ > スライド
// -------------------------------------------------------------------------------------
.slide_01--slide {
  max-width: 120px;

  @include g.mq(tablet) {
    max-width: 160px;
  }

  @include g.mq(pc) {
    max-width: 200px;
  }

  img {
    display: block;
    max-width: 100%;
  }
}

// -------------------------------------------------------------------------------------
// 全体枠 > スライド操作枠
// -------------------------------------------------------------------------------------
.slide_01--controller {
  position: relative;
  width: 53vw;
  margin: 26px auto 0;

  @include g.mq(tablet) {
    width: 52vw;
    margin-top: 34px;
  }

  @include g.mq(pc) {
    width: 50vw;
    margin-top: 34px;
  }

  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 53vw;
    height: 1px;
    content: '';
    background: #ddd;
    transform: translateX(-50%);

    @include g.mq(tablet) {
      width: 52vw;
    }

    @include g.mq(pc) {
      width: 50vw;
    }
  }
}

// -------------------------------------------------------------------------------------
// 全体枠 > スライド操作枠 > スクロールバー
// -------------------------------------------------------------------------------------
.slide_01--scrollbar {
  position: relative;
  width: 53vw;
  height: 1px;
  margin: 0 auto;
  background: transparent;

  @include g.mq(tablet) {
    width: 52vw;
  }

  @include g.mq(pc) {
    width: 50vw;
  }
}

// -------------------------------------------------------------------------------------
// 全体枠 > スライド操作枠 > スクロールバー > ツマミ
// -------------------------------------------------------------------------------------
.slide_01--scrollbar_drag {
  position: absolute;
  top: -24px;
  height: 48px;
  cursor: pointer;

  &::after {
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    height: 5px;
    content: '';
    background: g.$color_primary;
    border-radius: 2.5px;
  }
}