@charset "UTF-8";
/*
  1. より直感的なボックスサイズのモデルを使用
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. デフォルトのマージンを削除
*/
* {
  margin: 0;
}

p, h1, h2, h3, h4, h5, h6, li, a, span, em, ul {
  padding: 0;
  margin: 0;
}

/*
  3. 高さは%ベースを使用
*/
html, body {
  height: 100%;
  overflow-x: hidden;
}

/*
  タイポグラフィの微調整
  4. アクセシブルなline-heightを追加
  5. テキストのレンダリングを改善
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

/*
  6. メディア要素のデフォルトを改善
*/
img, picture, video, canvas, svg {
  display: inline-block;
  max-width: 100%;
}

/*
  7. フォームのfontに関するデフォルトを削除
*/
input, button, textarea, select {
  font: inherit;
}

/*
  8. テキストのオーバーフローを回避
*/
p, h1, h2, h3, h4, h5, h6, li, a, span, em {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/*
  9. ルートのスタックコンテキストを作成
*/
#root, #__next {
  isolation: isolate;
}

a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

li {
  list-style: none;
}

em {
  font-style: normal;
}

button {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.splide__slide {
  height: 700px;
  overflow: hidden;
}
.splide__slide:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(128, 128, 128, 0.3);
}
.splide__slide.is-active img {
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes fadeInAnime {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeInAnime {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.splide__track {
  position: relative;
}

.pagination {
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  color: white;
  align-items: center;
  gap: 10px;
}
.pagination #progressBarOuter {
  width: 2px;
  height: 100px;
  background-color: white;
  position: relative;
}
.pagination #progressBarOuter #progressBar {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(60, 60, 60);
  top: 0;
  left: 0;
  -webkit-animation: linear 6s;
          animation: linear 6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  transform-origin: top;
}
@-webkit-keyframes progressAnime {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes progressAnime {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

/*# sourceMappingURL=style.css.map */