@charset "UTF-8";
/*** スライドショー ***/
.slide-show {
  position: relative; /*子要素の起点*/
  width: 285px; /*任意の幅*/
  height: 335px; /*任意の高さ*/
  margin: 0 auto;
  overflow: hidden; /*外側要素の非表示*/
  border: solid 15px #fff;
}

.slide {
  position: relative; /*子要素の起点*/
  width: 285px; /*任意の幅*/
  height: 335px; /*任意の高さ*/
  margin: 0 auto;
  overflow: hidden; /*外側要素の非表示*/
  border: solid 15px #fff;
}

/*** スライド ***/
.slide-show > img {
  position: absolute;
  top: 0;
  left: 100%; /*右側へ隠す*/
  width: 100%;
  height: 100%;
  animation: slide 8s linear forwards infinite; /*時間は 枚数×5s */
}

/*1枚目*/
.slide-show > img:nth-of-type(1) {
  animation: slide 8s linear forwards infinite, slide-start 8s linear; /*2つのアニメーション*/
}

/*** 2枚目移行は 1/2時間遅らせる ***/
.slide-show > img:nth-of-type(2) {
  animation-delay: 4s; /* 1/2の遅延 */
}

/*** スライドアニメーション ***/
@keyframes slide {
  0% {
    left: 100%; /*右*/
  }
  3%, 50% {
    left: 0; /*表示*/
  }
  53%, 100% {
    left: -100%; /*左*/
  }
}
/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start {
  0%, 50% {
    left: 0; /*表示*/
  }
  53%, 100% {
    left: -100%; /*左へ隠す*/
  }
}
/*========= 流れるテキスト ===============*/
/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
  background: #7d87c8;
  color: #fff;
}

#chapter02 .slide-in_inner {
  display: inline-block;
  background: #f0c341;
  color: #fff;
}

#chapter03 .slide-in_inner {
  display: inline-block;
  background: #82bed2;
  color: #fff;
}

/*左右のアニメーション*/
.leftAnime {
  opacity: 0; /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%); /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}
/* スライダー */
.slick-slider {
  margin-top: 5%;
}

.slick-list {
  padding: 0 10% 0 0 !important;
}

.slick-slide {
  margin-right: 15px;
}

.slick-list img {
  width: 100%;
}/*# sourceMappingURL=common_sp.css.map */