@charset "utf-8";
/* CSS Document */
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
トップスライダー
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.top_slider_wrap {
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
工事実績
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.case_slider_wrap .slick-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.case_slider_wrap {
  /* スライダー */
  .slider-for-case {
    margin-bottom: 3.8rem;
    @media screen and (max-width: 480px) {
      margin-bottom: 2rem;
    }
  }

  /* ナビゲーション */
  .slider-nav {
    width: calc(100% + 1.2rem);
    transform: translateX(-0.6rem);
    @media screen and (max-width: 480px) {
      width: calc(100% + 0.6rem);
      transform: translateX(-0.3rem);
    }
    .slide-arrow {
      position: absolute;
      top: 50%;
      width: 4rem;
      aspect-ratio: 1/1;
      cursor: pointer;
      z-index: 100;
      background-color: rgba(255, 255, 255, 0.5);
      @media screen and (max-width: 480px) {
        background-color: rgba(255, 255, 255, 0.6);
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translate(0, -50%) rotate(-45deg);
        width: 1.4rem;
        aspect-ratio: 1/1;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
      }
      &.next-arrow {
        right: 0;
        transform: translate(120%, -50%);
        @media screen and (max-width: 480px) {
          transform: translate(0, -50%);
        }
      }

      &.prev-arrow {
        left: 0;
        transform: translate(-120%, -50%) scale(-1, 1);
        @media screen and (max-width: 480px) {
          transform: translate(0.3rem, -50%) scale(-1, 1);
        }
      }
    }
    .slick-slide {
      box-sizing: border-box;
      margin: 0 0.6rem;
      @media screen and (max-width: 480px) {
        margin: 0 0.3rem;
      }
      &.slick-current {
        img {
          border: 2px solid #fff;
          box-sizing: border-box;
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .works_slider_wrap {
    .slider-for-works {
      margin-bottom: 2rem;

      .slide-arrow {
        width: 3.2rem;

        &.next-arrow {
          right: 0;
          transform: translate(50%, -50%);
        }

        &.prev-arrow {
          left: 0;
          transform: translate(-50%, -50%) scale(-1, 1);
        }
      }
    }

    .slider-nav {
      .slick-slide {
        margin: 0 0.5rem;
      }
    }
  }
}