/* ---------------- ↓ スライドショーのスタイルシート ↓ ---------------- */

:root {
  --easing: cubic-bezier(.61,.11,.37,.9); /* 変化の仕方 */
  --transition: 0.8s var(--easing);
  --color-theme: chartreuse;
}

.splide {
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

 .slide-media {
   position: relative;
 }

 .slide-media img {
   position: absolute;
   height: 100%;
   width: 100%;
   object-fit: cover;
 }

  .slide {
   display: grid;
   place-content: center;
   padding: 0 8rem;
   text-align: center;
 }

  .slide-media {
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 /* ここが画像のアニメーション */
  .slide-media img {
   transition: 7s 1s linear;
   transform: translateX(-1.5%) scale(1.1);
 }

  .slide-title,
  .slide-text,
  .slide-link {
   animation: 2s var(--easing) both;
   opacity: 0;
 }

  .slide-title {
font-size:clamp(30px, 6.0vw, 100px);
   line-height: 1.1;
  color: var(--color-theme);
 }

  .slide-text {
font-size:clamp(22px, 2.0vw, 60px);
   margin: 4rem 0;
   animation-delay: 0.2s;
   color: #fff;
 }

  .slide-link {
   animation-delay: 0.4s;
 }

  .slide-button {
font-size:clamp(16px, 1.2vw, 60px);
   font-weight: bold;
   display: inline-block;
   color: var(--color-theme);
 }

  .slide-button::before {
   display: inline-block;
   width: 6rem;
   height: 1px;
   margin: -2px 1.6rem 0 0;
   content: "";
   vertical-align: middle;
   background-color: currentColor;
 }

  .splide__slide[class*=-active] .slide-media img {
   transition-delay: 0s;
   transform: translateX(1.5%) scale(1.05);
 }

  .splide__slide.anm-started .slide-title,
  .splide__slide.anm-started .slide-text,
  .splide__slide.anm-started .slide-link {
   animation-name: slide-fadeIn;
 }

  .splide__slide.anm-finished .slide-title,
  .splide__slide.anm-finished .slide-text,
  .splide__slide.anm-finished .slide-link {
   animation-name: slide-fadeOut;
 }

 @keyframes slide-fadeIn {
   0% {
     transform: translateY(30rem);
     opacity: 0;
     filter: blur(100px);
   }

   100% {
     transform: translateY(0);
     opacity: 1;
     filter: blur(0px);
   }
 }

 @keyframes slide-fadeOut {
   0% {
     transform: translateY(0);
     opacity: 1;
     filter: blur(0px);
   }

   100% {
     transform: translateY(-24rem);
     opacity: 0;
     filter: blur(100px);
   }
 }

 .slide {
   height: 100vh;
   height: 100svh;
 }

 .splide {
   position:relative;
 }

/* ---------------- ↑ スライドショーのスタイルシート ↑ ---------------- */

/* ---------------- ↓ スライドバーのページネーション ↓ ---------------- */
  .splide__pagination {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    margin-bottom:16px;
    counter-reset: pagination-num;
    color: white;
    font-size: 1.1em;
    font-family:sans-serif;
  }

  .splide__pagination__page:before {
   counter-increment: pagination-num;
   content: counter( pagination-num );
 }

 .splide__pagination li {
   margin-left: 4px;
   margin-right: 4px;
 }

 /* ページネーションのスタイル */
 .my-page {
   border:0;
   border-radius: 4px;
   background-color: gray;
   height: 30px;
   transition: .4s all;
   width: 30px;
   opacity: 0.7;
 }

 .my-page:hover {
   background: white;
   opacity: 1;
   color:black;
 }

 /* 現在表示されているページネーションのスタイル */
 .my-page.is-active {
   background-color: var(--color-theme);
   color:black;
   opacity: 1;
 }

/* ---------------- ↑ スライドバーのページネーション ↑ ---------------- */

/* ---------------- ↓ スライドバーの矢印 ↓ ---------------- */

  /* スライドバーの矢印 */
.my-arrow {
  z-index: 2;
  border: 0;
  background-color: transparent;
  position:absolute;
  background-color:var(--color-theme);
  height:100px;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transition: .3s all;
  opacity: 0.2;
}

.my-arrow:hover {
  opacity: 0.7;
}

.my-prev {
  left:2%;
/*  top:50%;*/
  bottom:0;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.my-next {
  right:2%;

/*  top:50%; */
  bottom:0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* ---------------- ↑ スライドバーの矢印 ↑ ---------------- */

/* ---------------- ↓ スライドバーのプログレスバー ↓ ---------------- */
 .slide-fraction {
  font-weight: bold;
  position: relative;
  text-align: center;
  --size: 96px;
}

  .slide-fraction .circle {
  display: block;
  width: var(--size);
  height: var(--size);
  transform: rotate(90deg);
}

  .slide-fraction .circle svg {
  width: 100%;
  height: 100%;
  fill: none;
}

  .slide-fraction .circle-01 {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1px;
}

  .slide-fraction .circle-02 {
  stroke: var(--color-theme);
  stroke-width: 2px;
  stroke-dasharray: 201.056px;
  stroke-dashoffset: 201.056px;
}

.slide-fraction .current {
  font-size: 2.0rem;
 line-height: var(--size);
 position: absolute;
 top: 0.05em;
 left: 0;
 width: var(--size);
 text-align: center;
 color: var(--color-theme);
}

/* 母音の棒 */
.slide-fraction .total::before {
  position: relative;
  display: block;
  width: 3px;
  height: 1em;
  margin: -3px auto 0.5em;
  content: "";
  background-color: var(--color-theme);
}

 .splide__slide[class*=-active] .slide-media img {
  transition-delay: 0s;
  transform: scale(1);
}

 .splide__slide[class*=-active] .slide-fraction .circle-02 {
  animation: mv04-circle linear both;
}

@keyframes mv04-circle {
  100% {
    stroke-dashoffset: 0;
  }
}

  .slide-content {
    font-size: 20px;
    color: #fff;
  }

 .slide-content .slide-fraction {
  position:absolute;
  top: 0;
  right:0;
  margin: 2.0rem;
}

/* ---------------- ↑ スライドバーのプログレスバー ↑ ---------------- */


/*
.sp-img1, .sp-img2, .sp-img3, .sp-img4, .sp-img5 {
  display:none;
}

@media only screen and (max-width:767px){
.sns_icon {
  margin:0 4px 0 4px;
  min-width:12px;
  min-height:12px;
  object-fit: cover;
}

.pc-img1, .pc-img2, .pc-img3, .pc-img4, .pc-img5, .for-sp {
  display: none;
}

.sp-img1, .sp-img2, .sp-img3, .sp-img4, .sp-img5 {
  display: block;
}

}
*/