@charset "UTF-8";
.wp-block-lazyblock-slick-slider ul {
    list-style: none;
}



/* 共通のスタイル */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; /* 矢印の幅 */
  height: 40px; /* 矢印の高さ */
  background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
  color: white; /* 矢印の色 */
  border-radius: 50%; /* 丸い形にする */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000; /* 矢印が他の要素の上に表示されるようにする */
}

/* 前の矢印のスタイル */
.prev-arrow {
  left: 10px; /* 左端からの距離 */
}

/* 次の矢印のスタイル */
.next-arrow {
  right: 10px; /* 右端からの距離 */
}

/* 矢印のアイコンを追加する場合 */
.prev-arrow::before,
.next-arrow::before {
  font-family: 'slick'; /* Slickのデフォルトアイコンフォントを使用 */
  font-size: 20px; /* アイコンのサイズ */
}

.prev-arrow::before {
  content: '←'; /* 前の矢印のアイコン */
}

.next-arrow::before {
  content: '→'; /* 次の矢印のアイコン */
}

/* ホバー時のスタイル */
.slide-arrow:hover {
  background-color: rgba(0, 0, 0, 0.7); /* ホバー時の背景色 */
}










.slickblock-01 img{
	width:100%;
}

.slickblock-02{
  　padding-left:0;
  }
 .slickblock-02 .slick-slide img {
    width: 100%;
    height: auto;
  }
.slickblock-03 img{
  width:100%;
}
.slickblock-03 .slick-slide{
  margin:0 10px;
}
.slickblock-03{
  padding-left:0;
}

.slickblock-04 img{
  width:100%;
}
.slickblock-04 .slide-box ul{
  padding-left:0;
}
.slickblock-04 .slide-box {
  position: relative;
  margin: 0;
  padding: 0;
}

/* slide */

.slickblock-04 .slide {
  position: relative;
  margin: 0;
  padding: 0;
}
.slickblock-04 .slide .item {
  position: relative;
  height: 100%;
}
.slickblock-04 .slide .item a {
  display: block;
}
.slickblock-04 .thumbnail .thumbnail-img {
  position: relative;
  cursor: pointer;
}
.slickblock-04 .thumbnail .image {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.slickblock-04 .thumbnail .image::before {
  display: block;
  padding-top: 60%;
  content: "";
}
.slickblock-04 .thumbnail .image::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.5;
  background: #000;
}
.slickblock-04 .thumbnail .slick-current .image::after {
  opacity: 0;
}
.slickblock-04 .thumbnail .image {
  position: relative;
  overflow: hidden;
}
.slickblock-04 .thumbnail .image img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
 
}

.slickblock-05 img{
  width:100%;
}



.slider-area img {
  max-width: 100%;
  display: block;
  height: auto;
}
//スライダーの幅を指定、overflow: hidden;で横スクロールを除外
.slider-area {
  overflow: hidden;
  max-width: 300px;
  width: 100%;
  margin: auto;
}
 
//サムネイル
//display: flex;を指定、transformをunsetにする
.thumnail .slick-track {
  transform: unset !important;
  width: 100% !important;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
//flexの値を変更し列数を変更
.thumnail .slick-slide {
    display: block!important;
    float: none !important;
    flex: 0 0 47.5%;
}

.slickblock-06 {
  margin: 30px auto 0;
  max-width: 100%;
  width: 100%;
}
.slickblock-06 .thumbnails {
      display: flex;
      flex-wrap: wrap;
    }
.slickblock-06 .thumbnails .thumbnail {
      width: 20%; /* 5列表示 */
      padding: 5px;
    }
.slickblock-06 .thumbnails .thumbnail img {
      width: 100%;
      cursor: pointer;
      opacity: 0.8;
      filter: grayscale(1);
    }
.slickblock-06 .thumbnails .thumbnail.active img {
      border: 2px solid #f443366e; /* メイン画像の枠を赤色で表示 */
      opacity: 1;
      filter: grayscale(0);
    }



.slickblock-06 .grayed-out {
    //pointer-events: none;  /* クリックを無効化 */
}

.slickblock-bikephoto {
  margin: 30px auto 0;
  max-width: 100%;
  width: 100%;
}
.slickblock-bikephoto .thumbnails {
      display: flex;
      flex-wrap: wrap;
    }
.slickblock-bikephoto .thumbnails .thumbnail {
      width: 20%; /* 5列表示 */
      padding: 5px;
    }
.slickblock-bikephoto .thumbnails .thumbnail img {
      width: 100%;
      cursor: pointer;
      opacity: 0.8;
      filter: grayscale(1);
    }
.slickblock-bikephoto .thumbnails .thumbnail.active img {
      border: 2px solid #f443366e; /* メイン画像の枠を赤色で表示 */
      opacity: 1;
      filter: grayscale(0);
    }



.slickblock-bikephoto .grayed-out {
    //pointer-events: none;  /* クリックを無効化 */
}