@charset 'utf-8';

/* Slider */
.slider_bl_wrapper {
  height: 43.92vw;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  position: relative;
  width: 100vw;
}

.slider_bl_slides {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider_el_fixContents {
  color: var(--col_white);
  font-family: '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'Sawarabi Mincho', 'MS P明朝', 'MS PMincho', serif;
  font-size: 48px;
  font-weight: normal;
  left: 10%;
  letter-spacing: .01584em;
  line-height: 1.854;
  position: absolute;
  text-align: left;
  text-shadow: var(--col_blackTransparent);
  top: 27%;
  z-index: 10;
}

.slider_bl_slidePage {
  -webkit-animation: slide 24s linear infinite 0s;
  -moz-animation: slide 24s linear infinite 0s;
  animation: slide 24s linear infinite 0s;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.image {
  height: 100%;
  width: 100%;
}

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

/* Contents */
.slider_bl_content {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.slider_bl_contentTxt {
  -webkit-animation: content-s 24s linear infinite 0s;
  -moz-animation: content-s 24s linear infinite 0s;
  animation: content-s 24s linear infinite 0s;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  opacity: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 5;
}

.slider_bl_contentTxt p {
  color: var(--col_white);
  font-family: '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'Sawarabi Mincho', 'MS P明朝', 'MS PMincho', serif;
  font-size: 48px;
  font-weight: normal;
  left: 10%;
  letter-spacing: .01584em;
  line-height: 1.854;
  position: absolute;
  text-align: left;
  text-shadow: var(--col_blackTransparent);
  top: 27%;
  z-index: 10;
}

/* 2番目のテキストは読みやすいようにシャドウを入れる */
.slider_bl_slides .slider_bl_slidePage:nth-child(2) .slider_bl_contentTxt p {
  text-shadow: 3px 3px 5px var(--col_blackTransparent);
}

/* Animation */
@-webkit-keyframes slide {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  5% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes slide {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  5% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slide {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  5% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes content-s {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes content-s {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes content-s {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.slider_bl_slides .slider_bl_slidePage:nth-child(2) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.slider_bl_slides .slider_bl_slidePage:last-child {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -ms-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}

.slider_bl_slides .slider_bl_slidePage:nth-child(2) .image {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.slider_bl_slides .slider_bl_slidePage:last-child .image {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -ms-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}

.slider_bl_slides .slider_bl_slidePage:nth-child(2) .slider_bl_contentTxt {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.slider_bl_slides .slider_bl_slidePage:last-child .slider_bl_contentTxt {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -ms-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}

@media screen and (max-width: 896px) {
  .slider_bl_wrapper {
    height: 43.88vh;
    width: 100%;
  }

  .slider_el_fixContents {
    font-size: 18px;
    left: 5.3%;
    letter-spacing: .00594em;
    line-height: 2.1;
    top: 14.8%;
  }
  .slider_bl_contentTxt p {
    font-size: 18px;
    left: 5.3%;
    letter-spacing: .00594em;
    line-height: 2.1;
    top: 14.8%;
  }

  /* スライド画像の位置調整 */
  .slider_bl_slides .slider_bl_slidePage:first-child .image img {
    object-position: 10% bottom;
  }

  /* 2番目のテキストは読みやすいようにシャドウを入れる */
.slider_bl_slides .slider_bl_slidePage:nth-child(2) .slider_bl_contentTxt p {
  text-shadow: 3px 3px 6px var(--col_black);
}

}