.mainvisual{

}

#slide01,
#slide02 {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
 /* margin-bottom: 50px;*/
}
.splide {
visibility: visible;

}

.splide__track {
  width: 100%;
  margin: 0 auto 0.5em;
  padding: 0 0.5em;
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}

.is-initialized > .splide__track {
  visibility: visible;
}

.splide__list {
    display: flex;
  flex-flow: row nowrap;
  height: auto; /* ここ数値指定すると商品名の高さが揃いません */
  position: relative;


}

.splide__list li {
list-style: none;
  margin: ;
  display: flex;
  flex-flow: row ;

  position: relative;
  flex: 1 0 auto;

  margin-right: 10px;
}
.splide__slide {

  box-sizing: border-box;
  border: solid 1px #e9e9e9;
  margin-right: 10px;

}
.splide__slide img {/* 必須 firefoxの不具合回避 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  /* スライダー非活性時 */
  .splide:not(.is-active) {


    .swiper-button-prev,
    .swiper-button-next {
      display: none;
    }
    .splide__track{
    width: 100%;
  margin: 0 auto 1em;
  padding: 0 0.5em;
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
  }
  .splide__list {
    display: flex !important;


}
    .splide__slide {
    width: calc(90% / 5);
    }
  }


.splide__slide a{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.splide__slide:hover {

    opacity: 0.8;
}
.splide__slide img {
  width: 90%;
  height: auto;
  margin: 0 auto;

}


.splide__slide:before {
  /* 順位のアイコン表示 */
  position: absolute;
  display: inline-block;
  transform: scale(0.42);
  top: -32px;
  right: -30px;
}

/*ページネーション*/
.splide__pagination {
  bottom: 0;
  left: 0;
  padding: 0 1em 0 1em;
  margin-bottom: 0.5em;
  position: inherit;
  right: 0;
  z-index: 1;

}
.splide__pagination__page{

  border-radius: 4px;
  background: #000;
  opacity: .3;
}
.splide__pagination__page:hover {
  cursor: pointer;
    background: #007aff;
  opacity: .9;
}
.splide__pagination__page.is-active {
  background: #007aff;
  transform: inherit;
  opacity: .7;
  z-index: 1;
}

/*アロー*/

/* 矢印のクリック範囲など */
:root {
  --swiper-navigation-size: 4rem;
}
.button {
  background-color: transparent; /* ボタンの背景を透明にする */
    height: calc(80%) !important;
    border-radius: inherit;
  transition: .2s;
  width: 30px;
  position: absolute;
  top: 0%;
  transform: inherit;
}
/* 矢印共通のスタイル */
.button::before {
  content: "";
  font-size: var(--swiper-navigation-size);
  color: #fff;
  opacity: .9;
}
.prev {
  left: 5px;
}
.next {
  right: 5px;
}

.prev::before{
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f104";
  }
.next::before  {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f105";
}
.prev:hover::before,.next:hover::before{

    color: #fff;
    opacity: 1;
}

.prev:hover::before{
transition: all 0.2s;
transform: translate(-2px, 0);

}
.next:hover::before{
transition: all 0.2s;
transform: translate(2px, 0);
}
.prev:active::before,.next:active::before{
  color: #ff9900;
    opacity: 1;
    transition: all 0s;
}

@media only screen and (max-width:767px) {
  :root {
  --swiper-navigation-size: 3rem;
}
  .splide {
    padding: 0 0.5em;

  }
  .splide__list li {
  max-width: 50%;
  }
  .splide__list p {
    color: #FFFFFF;
    font-size: 12.5px;
  }


  /*アロー*/
  .button {
  width: 20px;}
  .prev {
  left: 2px;
}
.next {
  right: 2px;
}
}