@charset "UTF-8";
/* Slider */
.slick-slider{
  position: relative;
   display: block;
   box-sizing: border-box;
   -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
      touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list{
   position: relative;
   display: block;
   overflow: hidden;
   margin: 0;
   padding: 0;
}
.slick-list:focus{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track{
   position: relative;
   top: 0;
   left: 0;
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.slick-track:before,
.slick-track:after{
   display: table;
   content: '';
}
/* .slick-track:after{
   clear: both;
} */
.slick-loading .slick-track{
   visibility: hidden;
}

.slick-slide{
   display: none;
   float: left;
   height: 100%;
   min-height: 1px;
}
[dir='rtl'] .slick-slide{
    float: right;
}
.slick-slide img{
    display: block;
}
.slick-slide.slick-loading img{
    display: none;
}
.slick-slide.dragging img{
    pointer-events: none;
}
.slick-initialized .slick-slide{
    display: block;
}
.slick-loading .slick-slide{
    visibility: hidden;
}
.slick-vertical .slick-slide{
   display: block;
   height: auto;
   border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
   opacity: 0;
}

/* .slicksp{
  outline:none;
   border: none;
  text-align: center;
}  
.slicksp{
  pointer-events: none;
}*/

/* ドット全体のスタイル */
.slick-dots {
  bottom: -40px !important;
  display: flex;
  justify-content: center;  /* 水平方向に中央揃え */
  align-items: center;      /* 垂直方向に中央揃え */
  padding: 0 !important;    /* 不要なパディングを削除 */
  margin: 0 !important;     /* 不要なマージンを削除 */
}

/* ドットアイテム（li）の設定 */
.slick-dots li {
  margin: 0 6px !important; /* ドットの間隔を広げる */
  width: 20px !important;    /* ドットの幅 */
  height: 20px !important;   /* ドットの高さ */
  display: flex;
  justify-content: center;  /* 水平方向に中央揃え */
  align-items: center;      /* 垂直方向に中央揃え */
}

/* 非アクティブなドット（白色） */
.slick-dots li button {
  background-color: transparent !important; /* 背景を透明に */
  border: none !important;                   /* ボーダーを消す */
  padding: 0 !important;                     /* パディングを消す */
}

/* 非アクティブなドットのスタイル */
.slick-dots li button:before {
  content: '\2022'; /* 中黒（丸）を表示 */
  width: 20px !important; /* ドットの幅に合わせる */
  height: 20px !important; 
  font-size: 75px !important; /* サイズの設定 */
  color: #fff !important; /* 非アクティブ時は白色 */
  font-family: 'Noto Serif JP', serif !important;
  opacity: 1 !important;
  transition: color 0.3s ease; /* 色が変わる時にスムーズな遷移 */
}

/* アクティブなドット（グラデーション） */
.slick-dots li.slick-active button {
  background: linear-gradient(180deg, #89f7fe 0%, #66a6ff 100%); /* グラデーション色 */
  border-radius: 50%; /* 丸い形にする */
  width: 19px !important; /* ドットの幅に合わせる */
  height: 19px !important; /* ドットの高さに合わせる */
  border: none !important; /* ボーダーを消す */
 font-size: 75px !important; /* サイズの設定 */
    font-family: 'Noto Serif JP', serif !important;
    position: absolute;
    bottom: -16px!important;
    margin: 0 auto;
    left: 2.4px; 
}

/* アクティブなドットで中黒を消す */
.slick-dots li.slick-active button:before {
  content: ''; /* 中黒を消す */
}

.slick-next:before{
  background-size: contain!important;
  background-repeat: no-repeat !important;
  margin-left: 50%;
}

.slick-arrow{
  z-index:2!important;
  width:60px!important;
  height:60px!important;
}
.slick-next{
   right:-22px!important;
}
.slick-prev{
    left:-22px!important;
}
.slick-margin{
  margin: 0 20px;
}
.sp-arrow{
  position: absolute;
  top: 45%;
  margin-top: -15px;
  width:7vw !important;
  height:auto !important;
}

/*    add    */
.slicksp02 .slick-track {
  transform: unset !important;
  width: 100% !important;
  display: flex;
 /* display: -webkit-box;  指定すると消える Android用 */
  display: inline-flex;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.slicksp02 .slick-slide {
  display: block!important;
  /* float: none !important;*/
  flex-basis: 80px;
  width:20px!important;
  margin-top:5px;
  /* margin:9px 2px 9px 10px; */
}
.slick-track::after{
  display: block;
  content:"";
  width: 80px !important;
}
.slicksp02 .slick-slide:nth-child(8)::after{
 content:"";
 display:block!important;
 width:23px!important;
 margin:0 0 26px!important;
}
 .slick-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
 }
 .arrow-L{
  left: -5vw;
  width:2rem!important;
  height:3.6rem !important;
 }
 .arrow-R{
  right: -5vw;
  width:2rem!important;
  height:3.6rem !important;
 }

.slick-thumb{
  margin:-2px 0 2rem;
}
.slick-thumb .slick-slide img{
  width: 4.4rem;
  height: auto;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.3s ease;
}
.slick-thumb .slick-slide img:hover{
  opacity: 1;
}
.slick-thumb .slick-current img{
  opacity: 1;
  /* box-shadow: 0px 0px 3px 3px rgba(247, 247, 235, 0.8); */
  border-radius: 50%;
}
.slicksp02 .slick-current {
  opacity: 1;
}
/*         722px～        */
@media (min-width:722px) {
 .slicksp02 .slick-track {
    -webkit-box-pack: start;/* Android用 */
    justify-content: flex-start;
 }
  .slick-thumb .slick-slide img{
    width:6.6rem;
  }
 .slicksp02 .slick-slide {
   flex: 0 0 21%;
   margin:0px 7px 0px 10px;
 }
 .slicksp02 .slick-slide img:nth-child(8) ::after{
   content:"";
   display:block!important;
   width:200px;
 }
  /* .slicksp02 .slick-slide:nth-child(15) {
   content:"";
   display: block;
   width: 300px;
 } */
  .arrow-L{
    left: -9.5%;
    width:3rem!important;
    height:5.2rem !important;
  }
   .arrow-R{
    right: -9.5%;
    width:3rem!important;
    height:5.2rem !important;
  }
 .slick-dots{
  bottom:-50px;
 }
 .slick-dots li{
  margin:0 8px !important;
 }
 .slick-dots li button:before{
   font-size: 75px !important;
   width: 22px !important; /* ドットの幅に合わせる */
   height: 22px !important; 
 }

.slick-dots li.slick-active button {
  font-size: 81px !important; /* サイズの設定 */
  left: 2.7px; 
 }
}
@media (max-width: 344px) {
  .slicksp02 .slick-slide {
     flex-basis: 70px!important;
 }
 .slick-track::after{
    width: 70px !important;
 }
}